@economic/taco 0.0.1-alpha.1533 → 0.0.1-alpha.8

package/dist/taco.cjs.development.js

@@ -9,17 +9,17 @@ 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 ReactDayPicker = _interopDefault(require('react-day-picker'));
+var PopoverPrimitive = require('@radix-ui/react-popover');
 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 Popover$1 = require('reakit/Popover');
 var keycode = _interopDefault(require('keycode'));
 var debounce = _interopDefault(require('lodash/debounce'));
 var dateFns = require('date-fns');
-var PopoverPrimitive = require('@radix-ui/react-popover');
-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');
@@ -1800,6 +1800,20 @@ function IconMatchAmount(props, svgRef) {
 
 var MatchAmount = /*#__PURE__*/React.forwardRef(IconMatchAmount);
 
+function IconMatchEntries(props, svgRef) {
+  return React.createElement("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    ref: svgRef
+  }, props), React.createElement("path", {
+    d: "M19.25 3a1.75 1.75 0 011.744 1.606L21 4.75v14.5a1.75 1.75 0 01-1.606 1.744L19.25 21H12v-1.5h7.25a.25.25 0 00.243-.193l.007-.057V5.996L19.406 6H4.5l.001 6H3V4.75a1.75 1.75 0 011.606-1.744L4.75 3h14.5zM3.696 15.809l.082.038 2.143 1.237.074.052a.5.5 0 01.147.55l-.038.081-.052.074a.5.5 0 01-.55.147l-.081-.038-.878-.505a2.5 2.5 0 004 1.525.75.75 0 11.925 1.181 4.002 4.002 0 01-6.343-2.173l-.402.695-.052.074a.5.5 0 01-.852-.492l.038-.082 1.238-2.143.051-.074a.5.5 0 01.55-.147zM7.002 13a4.001 4.001 0 013.92 3.197l.357-.62a.5.5 0 01.602-.221l.081.038a.5.5 0 01.221.601l-.038.082-1.237 2.143a.5.5 0 01-.601.221l-.082-.038-2.143-1.237a.5.5 0 01.418-.904l.082.038.914.528a2.5 2.5 0 00-4.034-1.798.75.75 0 11-.924-1.181A3.985 3.985 0 017.002 13zm10.248 2a.75.75 0 110 1.5h-2.5a.75.75 0 110-1.5h2.5zm-.125-3.5c.483 0 .875.336.875.75s-.392.75-.875.75h-5.25c-.483 0-.875-.336-.875-.75s.392-.75.875-.75h5.25zM17.25 8a.75.75 0 110 1.5H6.75a.75.75 0 010-1.5h10.5z",
+    fill: "currentColor",
+    fillRule: "evenodd"
+  }));
+}
+
+var MatchEntries = /*#__PURE__*/React.forwardRef(IconMatchEntries);
+
 function IconMileage(props, svgRef) {
   return React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2993,6 +3007,7 @@ var icons = {
   log: Log,
   market: Market,
   'match-amount': MatchAmount,
+  'match-entries': MatchEntries,
   mileage: Mileage,
   minus: Minus,
   'modal-resize': ModalResize,
@@ -3173,6 +3188,13 @@ Accordion.Item = Item;
 Accordion.Trigger = Trigger;
 Accordion.Content = Content;
 
+var Backdrop = function Backdrop(props) {
+  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
+  }));
+};
+
 var VisuallyHidden = /*#__PURE__*/React.forwardRef(function VisuallyHidden(props, ref) {
   return React.createElement("span", Object.assign({}, props, {
     className: "sr-only",
@@ -3274,43 +3296,16 @@ var getBannerIcon = function getBannerIcon(type) {
   }
 };
 
-var _excluded$3 = ["title", "children", "placement"];
-var Tooltip = function Tooltip(_ref) {
-  var title = _ref.title,
-      children = _ref.children,
-      placement = _ref.placement,
-      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$3);
-
-  return React.createElement(TooltipPrimitive.Root, {
-    delayDuration: 50
-  }, React.createElement(TooltipPrimitive.Trigger, {
-    asChild: true
-  }, children), React.createElement(TooltipPrimitive.Content, Object.assign({}, otherProps, {
-    asChild: true,
-    side: placement,
-    sideOffset: 5
-  }), React.createElement("div", {
-    className: "px-2 py-1 rounded-sm wcag-purple text-xs font-bold animate-[fade-in_150ms]",
-    "data-taco": "tooltip",
-    style: {
-      transformOrigin: 'var(--radix-tooltip-content-transform-origin)'
-    }
-  }, React.createElement(TooltipPrimitive.Arrow, {
-    className: "fill-purple stroke-purple"
-  }), title)));
-};
-
-var _excluded$4 = ["disabled", "target", "tooltip", "type"];
+var _excluded$3 = ["disabled", "target", "type"];
 var Button = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
   var disabled = props.disabled,
       target = props.target,
-      tooltip = props.tooltip,
       _props$type = props.type,
       type = _props$type === void 0 ? 'button' : _props$type,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$4);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$3);
 
   var Tag = props.href ? 'a' : 'button';
-  var button = React.createElement(Tag, Object.assign({}, otherProps, {
+  return React.createElement(Tag, Object.assign({}, otherProps, {
     "aria-disabled": disabled ? 'true' : undefined,
     disabled: disabled,
     target: Tag === 'a' ? target : undefined,
@@ -3319,108 +3314,69 @@ var Button = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
   }), React.Children.count(props.children) > 1 ? React.Children.map(props.children, function (child) {
     return typeof child === 'string' ? React.createElement("span", null, child) : child;
   }) : props.children);
-
-  if (tooltip) {
-    return React.createElement(Tooltip, {
-      title: tooltip
-    }, button);
-  }
-
-  return button;
 });
 
-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 _excluded$5 = ["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$5);
-
-  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;
-  }
+var _excluded$4 = ["title", "children", "placement"];
+var Tooltip = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var title = props.title,
+      children = props.children,
+      placement = props.placement,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$4);
 
-  return React.createElement(Button, Object.assign({}, otherProps, {
-    className: className,
-    "data-taco": "icon-button",
+  return React.createElement(TooltipPrimitive.Root, {
+    delayDuration: 50
+  }, React.createElement(TooltipPrimitive.Trigger, {
+    asChild: true,
     ref: ref
-  }), React.createElement(Icon, {
-    name: icon,
-    className: "m-0 p-0"
-  }));
+  }, children), React.createElement(TooltipPrimitive.Content, Object.assign({}, otherProps, {
+    asChild: true,
+    side: placement,
+    sideOffset: 3
+  }), React.createElement("div", {
+    className: "wcag-purple animate-[fade-in_150ms] rounded-sm px-2 py-1 text-xs font-bold",
+    "data-taco": "tooltip",
+    style: {
+      transformOrigin: 'var(--radix-tooltip-content-transform-origin)'
+    }
+  }, React.createElement(TooltipPrimitive.Arrow, {
+    className: "fill-purple stroke-purple"
+  }), title)));
 });
 
-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$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,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$5);
 
-var _excluded$6 = ["appearance", "fluid"];
-var Button$1 = /*#__PURE__*/React.forwardRef(function Button$1(props, ref) {
-  var appearance = props.appearance,
-      fluid = props.fluid,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$6);
-
-  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 React.createElement(Button, Object.assign({}, otherProps, {
+  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,
-    "data-taco": "button",
+    side: side,
+    sideOffset: 1,
+    style: _extends({}, props.style, {
+      zIndex: 996
+    }),
     ref: ref
   }));
 });
@@ -3479,12 +3435,12 @@ function useTimer(duration, callback) {
   };
 }
 
-var _excluded$7 = ["delay", "label"];
+var _excluded$6 = ["delay", "label"];
 var Spinner$1 = /*#__PURE__*/React__default.forwardRef(function Spinner(props, ref) {
   var _props$delay = props.delay,
       delay = _props$delay === void 0 ? 500 : _props$delay,
       label = props.label,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$7);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$6);
 
   var _React$useState = React__default.useState(!delay),
       visible = _React$useState[0],
@@ -3567,13 +3523,13 @@ var getBadgeIcon = function getBadgeIcon(type) {
   }
 };
 
-var _excluded$8 = ["content", "lastUpdated", "onClose", "options"];
+var _excluded$7 = ["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$8);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
 
   var _useLocalization = useLocalization(),
       texts = _useLocalization.texts;
@@ -3636,7 +3592,7 @@ var Toast = function Toast(_ref) {
   }));
 };
 
-var _excluded$9 = ["children"];
+var _excluded$8 = ["children"];
 var DEFAULT_AUTO_CLOSE_TIMEOUT = 7500;
 var ToastContext = /*#__PURE__*/React.createContext({});
 
@@ -3662,7 +3618,7 @@ var insertToastWithoutDuplicates = function insertToastWithoutDuplicates(current
 
 var ToastProvider = function ToastProvider(_ref) {
   var children = _ref.children,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
 
   var _React$useState = React.useState([]),
       toasts = _React$useState[0],
@@ -3923,187 +3879,102 @@ var useLocalization = function useLocalization() {
   return useTaco().localization;
 };
 
-var _excluded$a = ["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);
+function mergeRefs(refs) {
+  return function (value) {
+    refs.forEach(function (ref) {
+      if (typeof ref === 'function') {
+        ref(value);
+      } else if (ref != null) {
+        ref.current = value;
+      }
+    });
+  };
 }
 
-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 _excluded$9 = ["children"];
+var HangerContext = /*#__PURE__*/React.createContext({
+  props: {},
+  ref: null
+});
+var Anchor = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var context = React.useContext(HangerContext);
+  return React.createElement(PopoverPrimitive.Anchor, Object.assign({}, context.props, props, {
+    ref: mergeRefs([context.ref, ref]),
+    asChild: true
+  }));
+});
+var Content$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _useLocalization = useLocalization(),
-      _useLocalization$text = _useLocalization.texts.calendar,
-      actions = _useLocalization$text.actions,
-      months = _useLocalization$text.months;
+      texts = _useLocalization.texts;
 
-  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));
+  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("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$a);
-
-  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, {
+  return React.createElement(UnstyledContent, {
     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,
+    "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 _excluded$b = ["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$b);
-
-  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 element = React.createElement(CheckboxPrimitive.Root, Object.assign({}, otherProps, {
-    "data-taco": "checkbox",
-    checked: indeterminate ? 'indeterminate' : checked,
-    className: className,
-    onCheckedChange: onChange,
-    ref: ref
-  }), React.createElement(CheckboxPrimitive.Indicator, {
-    className: "flex h-full w-full"
-  }, React.createElement(Icon, {
-    name: indeterminate ? 'line' : 'tick',
-    className: "!h-full !w-full"
-  })));
+  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
+  }));
+});
+Hanger.Anchor = Anchor;
+Hanger.Content = Content$1;
 
-  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);
-  }
+/* 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 useCurrentDialog = function useCurrentDialog() {
+  return React.useContext(DialogContext);
+};
 
-  return element;
+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 useProxiedRef = function useProxiedRef(ref) {
@@ -4120,225 +3991,893 @@ var useProxiedRef = function useProxiedRef(ref) {
   return internalRef;
 };
 
-var getInputClasses = function getInputClasses(props) {
-  var _cn;
+var useDraggable = function useDraggable(ref) {
+  var _React$useState = React__default.useState({
+    x: 0,
+    y: 0
+  }),
+      position = _React$useState[0],
+      setPosition = _React$useState[1];
 
-  return cn('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 _useMove = interactions.useMove({
+    onMove: function onMove(event) {
+      var _ref$current;
 
-    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';
+      var rect = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.getBoundingClientRect(); // Prevent dragging out of bounds
 
-    case 'warning':
-      return 'border-yellow-dark hover:shadow-[0_0_0.15rem_theme(colors.yellow.dark)] focus:yt-focus-yellow active:border-yellow-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 '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';
+      setPosition(function (_ref) {
+        var x = _ref.x,
+            y = _ref.y;
+        x += event.deltaX;
+        y += event.deltaY;
+        return {
+          x: x,
+          y: y
+        };
+      });
+    }
+  }),
+      moveProps = _useMove.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';
-  }
+  return {
+    position: position,
+    handleProps: moveProps
+  };
 };
-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';
-
-    case 'warning':
-      return 'border-yellow-dark focus:border-yellow-dark focus:yt-focus-yellow peer-focus:peer-active:border-yellow-dark';
-
-    case 'information':
-      return 'border-blue focus:border-blue-light peer-focus:border-blue-light peer-focus:peer-active:border-blue-dark';
 
-    default:
-      return 'border-grey-dark focus:border-blue-light peer-focus:border-blue-light peer-focus:peer-active:border-blue-dark';
-  }
+var MenuContext = /*#__PURE__*/React.createContext(undefined);
+var useCurrentMenu = function useCurrentMenu() {
+  return React.useContext(MenuContext);
 };
 
-var _excluded$c = ["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$c);
+var _excluded$a = ["as"];
+var Group = /*#__PURE__*/React.forwardRef(function Group(props, ref) {
+  var _props$as = props.as,
+      Tag = _props$as === void 0 ? 'span' : _props$as,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$a);
 
-  var 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, {
+  var className = cn('flex ', props.className);
+  return React.createElement(Tag, Object.assign({}, otherProps, {
     className: className,
-    "data-taco": "input",
-    ref: inputRef
+    "data-taco": "group",
+    ref: ref
   }));
+});
 
-  if (hasContainer) {
-    var extra;
-
-    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);
-  }
-
-  return input;
+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
+  }));
+});
+var Content$2 = /*#__PURE__*/React.forwardRef(function DialogContent(props, ref) {
+  var dialog = useCurrentDialog();
+  var internalRef = useProxiedRef(ref);
 
-var getNextIndexFromKeycode = function getNextIndexFromKeycode(keyCode, length, index, direction) {
-  if (direction === void 0) {
-    direction = 'vertical';
-  }
-
-  var previousKey = direction === 'horizontal' ? 'left' : 'up';
-  var nextKey = direction === 'horizontal' ? 'right' : 'down';
-
-  switch (keyCode) {
-    case keycode(previousKey):
-      return index !== undefined ? index - 1 < 0 ? 0 : index - 1 : index;
-
-    case keycode(nextKey):
-      return index !== undefined ? index + 1 >= length ? index : index + 1 : index;
+  var _useDraggable = useDraggable(internalRef),
+      position = _useDraggable.position,
+      dragHandleProps = _useDraggable.handleProps;
 
-    case keycode('home'):
-      return 0;
+  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
 
-    case keycode('end'):
-      return length - 1;
 
-    default:
-      return;
-  }
-};
-var useListKeyboardNavigation = function useListKeyboardNavigation(length, options) {
-  if (length === void 0) {
-    length = 0;
-  }
+  var menu = useCurrentMenu();
+  var handleCloseAutoFocus;
 
-  if (options === void 0) {
-    options = {
-      direction: 'vertical'
+  if (menu) {
+    handleCloseAutoFocus = function handleCloseAutoFocus() {
+      return menu.close();
     };
   }
 
-  var _React$useState = React__default.useState(options.initialIndex),
-      index = _React$useState[0],
-      setIndex = _React$useState[1];
+  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 getNextIndex = function getNextIndex(event) {
-    var nextIndex = getNextIndexFromKeycode(event.keyCode, length, index, options.direction);
+  var handleInteractOutside = function handleInteractOutside(event) {
+    return event.preventDefault();
+  };
 
-    if (nextIndex !== undefined) {
-      event.preventDefault();
-    }
+  var output;
 
-    return nextIndex;
-  };
+  if (typeof props.children === 'function') {
+    output = props.children({
+      drawer: dialog.drawer,
+      close: dialog.close
+    });
+  } else {
+    output = props.children;
+  }
 
-  return [index, setIndex, getNextIndex];
-};
+  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))));
+});
 
-var scrollToChildElement = function scrollToChildElement(parent, child) {
-  var clientHeight = parent.clientHeight;
+var Drawer = /*#__PURE__*/React.forwardRef(function DialogDrawer(props, ref) {
+  var _dialog$drawer, _dialog$drawer2;
 
-  if (parent.scrollHeight > clientHeight) {
-    var scrollTop = parent.scrollTop;
-    var scrollBottom = clientHeight + scrollTop;
-    var childBottom = child.offsetTop + child.offsetHeight;
+  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
+  }));
+});
 
-    if (childBottom > scrollBottom) {
-      parent.scrollTop = childBottom - clientHeight;
-    } else if (child.offsetTop < scrollTop) {
-      parent.scrollTop = child.offsetTop;
-    }
-  }
-};
+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
+  }));
+});
 
-var useListScrollTo = function useListScrollTo(internalRef, itemRefs) {
-  var scrollTo = function scrollTo(index) {
-    if (internalRef && internalRef.current) {
-      if (index !== undefined) {
-        var activeRef = itemRefs[index];
+var _excluded$b = ["children", "draggable", "onClose", "open", "size"];
 
-        if (activeRef && activeRef.current) {
-          scrollToChildElement(internalRef.current, activeRef.current);
-        }
+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 {
-        internalRef.current.scrollTop = 0;
+        children.push(child);
       }
-    }
-  };
-
-  return {
-    scrollTo: scrollTo
-  };
+    });
+    return [children, drawer, extra];
+  }, [initialChildren]);
 };
 
-var _excluded$d = ["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 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 getNextEnabledItem = function getNextEnabledItem(event, data, index) {
-  var nextIndex = getNextIndexFromKeycode(event.keyCode, data.length, index);
+  var _useSeparatedChildren = useSeparatedChildren(initialChildren),
+      children = _useSeparatedChildren[0],
+      drawer = _useSeparatedChildren[1],
+      extra = _useSeparatedChildren[2];
 
-  if (nextIndex) {
-    if (nextIndex === index) {
-      return index;
-    } else if (data[nextIndex] && data[nextIndex].disabled) {
-      return getNextEnabledItem(event, data, nextIndex);
-    }
-  }
+  var _React$useState = React.useState(defaultOpen),
+      open = _React$useState[0],
+      setOpen = _React$useState[1];
 
-  return nextIndex;
-};
+  var _React$useState2 = React.useState(false),
+      drawerOpen = _React$useState2[0],
+      setDrawerOpen = _React$useState2[1];
 
-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,
+  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;
+          });
+        }
+      },
+      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 context = React.useContext(PopoverContext);
+  return React.createElement(PopoverPrimitive.Trigger, Object.assign({}, context.props, props, {
+    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'));
+  };
+
+  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 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 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 _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;
+  }
+
+  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,
+      popover = props.popover,
+      tooltip = props.tooltip,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$d);
+
+  var button = React__default.createElement(Button, Object.assign({}, otherProps, {
+    className: className,
+    ref: ref
+  }));
+
+  if (hanger) {
+    button = React__default.createElement(Hanger, Object.assign({}, hanger.props), React__default.createElement(Hanger.Anchor, null, button), hanger.props.children);
+  }
+
+  if (dialog) {
+    button = React__default.createElement(Dialog, Object.assign({}, dialog.props), React__default.createElement(Dialog.Trigger, null, button), dialog.props.children);
+  }
+
+  if (popover) {
+    button = React__default.createElement(Popover, Object.assign({}, popover.props), React__default.createElement(Popover.Trigger, null, button), popover.props.children);
+  }
+
+  if (tooltip) {
+    button = React__default.createElement(Tooltip, {
+      title: tooltip
+    }, button);
+  }
+
+  return button;
+};
+
+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 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$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
+
+    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 _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"
+  })));
+
+  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 getInputClasses = function getInputClasses(props) {
+  var _cn;
+
+  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';
+
+    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';
+
+    case 'warning':
+      return 'border-yellow-dark hover:shadow-[0_0_0.15rem_theme(colors.yellow.dark)] focus:yt-focus-yellow active:border-yellow-dark';
+
+    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';
+
+    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';
+
+    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';
+
+    case 'warning':
+      return '!border-yellow-dark focus:!border-yellow-dark focus:yt-focus-yellow peer-focus:peer-active:!border-yellow-dark';
+
+    case 'information':
+      return '!border-blue focus:!border-blue-light peer-focus:!border-blue-light peer-focus:peer-active:!border-blue-dark';
+
+    default:
+      return '!border-grey-dark focus:!border-blue-light peer-focus:!border-blue-light peer-focus:peer-active:!border-blue-dark';
+  }
+};
+
+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);
+
+  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 (hasContainer) {
+    var extra;
+
+    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);
+  }
+
+  return input;
+});
+
+var getNextIndexFromKeycode = function getNextIndexFromKeycode(keyCode, length, index, direction) {
+  if (direction === void 0) {
+    direction = 'vertical';
+  }
+
+  var previousKey = direction === 'horizontal' ? 'left' : 'up';
+  var nextKey = direction === 'horizontal' ? 'right' : 'down';
+
+  switch (keyCode) {
+    case keycode(previousKey):
+      return index !== undefined ? index - 1 < 0 ? 0 : index - 1 : index;
+
+    case keycode(nextKey):
+      return index !== undefined ? index + 1 >= length ? index : index + 1 : index;
+
+    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;
+  }
+
+  if (options === void 0) {
+    options = {
+      direction: 'vertical'
+    };
+  }
+
+  var _React$useState = React__default.useState(options.initialIndex),
+      index = _React$useState[0],
+      setIndex = _React$useState[1];
+
+  var getNextIndex = function getNextIndex(event) {
+    var nextIndex = getNextIndexFromKeycode(event.keyCode, length, index, options.direction);
+
+    if (nextIndex !== undefined) {
+      event.preventDefault();
+    }
+
+    return nextIndex;
+  };
+
+  return [index, setIndex, getNextIndex];
+};
+
+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;
+    }
+  }
+};
+
+var useListScrollTo = function useListScrollTo(internalRef, itemRefs) {
+  var scrollTo = function scrollTo(index) {
+    if (internalRef && internalRef.current) {
+      if (index !== undefined) {
+        var activeRef = itemRefs[index];
+
+        if (activeRef && activeRef.current) {
+          scrollToChildElement(internalRef.current, activeRef.current);
+        }
+      } else {
+        internalRef.current.scrollTop = 0;
+      }
+    }
+  };
+
+  return {
+    scrollTo: scrollTo
+  };
+};
+
+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);
+
+  if (nextIndex) {
+    if (nextIndex === index) {
+      return index;
+    } else if (data[nextIndex] && data[nextIndex].disabled) {
+      return getNextEnabledItem(event, data, nextIndex);
+    }
+  }
+
+  return nextIndex;
+};
+
+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,
@@ -4351,7 +4890,7 @@ var ScrollableList = /*#__PURE__*/React.forwardRef(function ScrollableList(props
       selectedIndexes = _props$selectedIndexe === void 0 ? [] : _props$selectedIndexe,
       _props$allOptionsSele = props.allOptionsSelected,
       allOptionsSelected = _props$allOptionsSele === void 0 ? false : _props$allOptionsSele,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$d);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$j);
 
   var listRef = useProxiedRef(ref);
   var itemRefs = React.useMemo(function () {
@@ -4531,7 +5070,7 @@ var setInputValueByRef = function setInputValueByRef(input, value, event) {
   input.dispatchEvent(createCustomEvent(event));
 };
 
-var _excluded$e = ["hasChildren", "path"];
+var _excluded$k = ["hasChildren", "path"];
 var setInputValueByRef$1 = function setInputValueByRef$1(input, value, event) {
   if (event === void 0) {
     event = 'change';
@@ -4649,1087 +5188,677 @@ var useFlattenedData = function useFlattenedData(data) {
 };
 var sanitizeItem = function sanitizeItem(item) {
   if (item) {
-    var rest = _objectWithoutPropertiesLoose(item, _excluded$e);
-
-    return rest;
-  }
-
-  return undefined;
-};
-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 : [];
-
-  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 lastPath;
-    return indexes.map(function (i) {
-      lastPath = lastPath ? [lastPath, i].join('.') : i;
-      return sanitizeItem(data.find(function (i) {
-        return i.path === lastPath;
-      }));
-    });
-  }
-
-  return null;
-};
-var filterData = function filterData(data, value) {
-  if (value === void 0) {
-    value = '';
-  }
-
-  if (value === '' || value === null) {
-    return data;
-  }
-
-  var filteredOptionValues = new Set();
-
-  var shouldFilterOption = function shouldFilterOption(option) {
-    if (option.disabled) {
-      return false;
-    }
-
-    return searchForString(option.text, String(value));
-  };
-
-  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$f = ["aria-label", "aria-labelledby", "data", "defaultValue", "disabled", "id", "inline", "loading", "onChange", "onClick", "onKeyDown", "readOnly", "value"];
-
-var convertToInputValue = function convertToInputValue(value) {
-  return String(value !== null && value !== void 0 ? value : '');
-};
-
-var useCombobox = function useCombobox(_ref, ref) {
-  var ariaLabel = _ref['aria-label'],
-      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,
-      readOnly = _ref.readOnly,
-      value = _ref.value,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
-
-  var inputRef = useProxiedRef(ref);
-  var listRef = React.useRef(null);
-  var popover = Popover$1.usePopoverState({
-    gutter: 4,
-    placement: 'bottom-start'
-  });
-  var listId = React.useMemo(function () {
-    return uuid.v4();
-  }, []);
-
-  var _React$useState = React.useState(convertToInputValue(value)),
-      inputValue = _React$useState[0],
-      setInputValue = _React$useState[1];
-
-  var shouldFilterData = !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 _React$useState2 = React.useState(inputValue !== undefined ? getIndexFromValue(data, inputValue) : undefined),
-      currentIndex = _React$useState2[0],
-      setCurrentIndex = _React$useState2[1];
-
-  var setInputValueByIndex = function setInputValueByIndex(index) {
-    if (index !== undefined) {
-      var option = data[index];
-
-      if (option && !option.disabled) {
-        setInputValueByRef$1(inputRef.current, option.value, 'focusout');
-      }
-    }
-  };
+    var rest = _objectWithoutPropertiesLoose(item, _excluded$k);
 
-  var setCurrentValue = function setCurrentValue(index) {
-    if (index === undefined) {
-      return;
-    }
-
-    var option = data[index]; // if the selected option is not already selected, trigger blur event
-
-    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
-
-
-  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
-
-  React.useEffect(function () {
-    if (value !== undefined && value !== inputValue) {
-      setInputValue(convertToInputValue(value));
-    }
-  }, [value]); // 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 (!popover.visible) {
-        popover.show();
-      }
-    } else {
-      popover.hide();
-    }
-  }, [inputValue, data]);
-  React.useEffect(function () {
-    if (popover.visible) {
-      setCurrentIndex(getIndexFromValue(data, inputValue) || 0);
-    } else {
-      setCurrentIndex(undefined);
-    }
-  }, [popover.visible]); // event handlers
-
-  var handleInputBlur = function handleInputBlur(event) {
-    event.persist();
-
-    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;
-      }
-
-      onChange(event);
-    }
-
-    if (props.onBlur) {
-      props.onBlur(event);
-    }
-  };
-
-  var handleInputChange = function handleInputChange(event) {
-    setInputValue(event.target.value);
-  };
-
-  var handleInputClick = function handleInputClick(event) {
-    if (inline || !popover.visible && inputValue && data.length) {
-      popover.show();
-    }
-
-    if (onClick) {
-      event.persist();
-      onClick(event);
-    }
-  };
-
-  var handleInputKeyDown = function handleInputKeyDown(event) {
-    event.persist();
-
-    switch (event.keyCode) {
-      case keycode('backspace'):
-        {
-          return;
-        }
-
-      case keycode('escape'):
-        {
-          event.preventDefault();
-          setInputValue(convertToInputValue(value));
-          popover.hide();
-          return;
-        }
-
-      case keycode('tab'):
-      case keycode('enter'):
-        {
-          if (event.keyCode !== keycode('tab')) {
-            event.preventDefault();
-          }
-
-          setCurrentValue(currentIndex);
-          popover.hide();
-          return;
-        }
-
-      case keycode('up'):
-      case keycode('down'):
-      case keycode('home'):
-      case keycode('end'):
-        {
-          if (popover.visible) {
-            event.preventDefault();
-          }
+    return rest;
+  }
 
-          break;
-        }
-    } // we aren't focused on the list, so manually forward the keydown event to it
+  return undefined;
+};
+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 : [];
 
-    if (listRef.current) {
-      listRef.current.dispatchEvent(createCustomKeyboardEvent(event));
-    }
+  if (indexes.length > 1) {
+    // we don't want to map the current item
+    indexes.pop(); // we need to rebuild the path as we map
 
-    if (inline && !popover.visible) {
-      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);
-        popover.show();
-      }
-    }
+    var lastPath;
+    return indexes.map(function (i) {
+      lastPath = lastPath ? [lastPath, i].join('.') : i;
+      return sanitizeItem(data.find(function (i) {
+        return i.path === lastPath;
+      }));
+    });
+  }
 
-    if (!event.isDefaultPrevented() && onKeyDown) {
-      event.persist();
-      onKeyDown(event);
-    }
-  };
+  return null;
+};
+var filterData = function filterData(data, value) {
+  if (value === void 0) {
+    value = '';
+  }
 
-  var handleListboxChange = function handleListboxChange(index) {
-    setCurrentIndex(index);
-  };
+  if (value === '' || value === null) {
+    return data;
+  }
 
-  var handleListboxClick = function handleListboxClick(event, index) {
-    event.preventDefault();
-    setCurrentValue(index);
-    popover.hide();
-  };
+  var filteredOptionValues = new Set();
 
-  var combobox = {
-    'aria-expanded': popover.visible,
-    'aria-owns': listId,
-    'aria-haspopup': 'listbox',
-    role: 'combobox'
+  var shouldFilterOption = function shouldFilterOption(option) {
+    if (option.disabled) {
+      return false;
+    }
+
+    return searchForString(option.text, String(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 || ''
-  });
+  data.forEach(function (option) {
+    if (shouldFilterOption(option)) {
+      var parents = getOptionParents(data, option.path);
+      filteredOptionValues.add(option.value);
 
-  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: _extends({}, popover, {
-      visible: !data.length ? false : popover.visible,
-      container: {
-        tabIndex: -1,
-        'aria-label': ariaLabel,
-        'aria-labelledby': ariaLabelledBy,
-        unstable_initialFocusRef: inputRef
+      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 getVisibility = function getVisibility(element) {
-  return Boolean(element && (element.offsetWidth || element.offsetHeight || element.getClientRects().length));
+var _excluded$l = ["aria-label", "aria-labelledby", "data", "defaultValue", "disabled", "id", "inline", "loading", "onChange", "onClick", "onKeyDown", "readOnly", "value"];
+
+var convertToInputValue = function convertToInputValue(value) {
+  return String(value !== null && value !== void 0 ? value : '');
 };
 
-var useBoundingClientRectListener = function useBoundingClientRectListener(ref) {
-  var _React$useState = React.useState(undefined),
-      dimensions = _React$useState[0],
-      setDimensions = _React$useState[1];
+var useCombobox = function useCombobox(_ref, ref) {
+  var ariaLabel = _ref['aria-label'],
+      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,
+      readOnly = _ref.readOnly,
+      value = _ref.value,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
 
-  var isRefElementVisible = getVisibility(ref.current);
+  var inputRef = useProxiedRef(ref);
+  var listRef = React.useRef(null);
+  var popover = Popover$1.usePopoverState({
+    gutter: 4,
+    placement: 'bottom-start'
+  });
+  var listId = React.useMemo(function () {
+    return uuid.v4();
+  }, []);
 
-  var _React$useState2 = React.useState(isRefElementVisible),
-      visibility = _React$useState2[0],
-      setVisibility = _React$useState2[1];
+  var _React$useState = React.useState(convertToInputValue(value)),
+      inputValue = _React$useState[0],
+      setInputValue = _React$useState[1];
 
-  var resize = function resize() {
-    if (visibility) {
-      var _ref$current;
+  var shouldFilterData = !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
 
-      setDimensions((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.getBoundingClientRect());
-    }
-  };
+  var _React$useState2 = React.useState(inputValue !== undefined ? getIndexFromValue(data, inputValue) : undefined),
+      currentIndex = _React$useState2[0],
+      setCurrentIndex = _React$useState2[1];
 
-  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);
+  var setInputValueByIndex = function setInputValueByIndex(index) {
+    if (index !== undefined) {
+      var option = data[index];
 
-    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);
+      if (option && !option.disabled) {
+        setInputValueByRef$1(inputRef.current, option.value, 'focusout');
+      }
     }
-  });
-  return dimensions;
-};
-
-var _excluded$g = ["className", "style"],
-    _excluded2$2 = ["container"];
-var Combobox = /*#__PURE__*/React.forwardRef(function Combobox(props, ref) {
-  var externalClassName = props.className,
-      style = props.style,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$g);
+  };
 
-  var _useCombobox = useCombobox(otherProps, ref),
-      combobox = _useCombobox.combobox,
-      input = _useCombobox.input,
-      popover = _useCombobox.popover,
-      list = _useCombobox.list;
+  var setCurrentValue = function setCurrentValue(index) {
+    if (index === undefined) {
+      return;
+    }
 
-  var container = popover.container,
-      base = _objectWithoutPropertiesLoose(popover, _excluded2$2);
+    var option = data[index]; // if the selected option is not already selected, trigger blur event
 
-  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(Popover$1.PopoverDisclosure, Object.assign({}, base, {
-    ref: internalRef
-  }), function (_ref) {
-    var ref = _ref.ref;
-    return React.createElement("span", Object.assign({}, combobox, {
-      className: "w-full",
-      ref: ref
-    }), React.createElement(Input, Object.assign({}, input, {
-      autoComplete: "off",
-      button: props.inline ? React.createElement(IconButton, {
-        icon: popover.visible ? 'chevron-up' : 'chevron-down',
-        onClick: popover.toggle,
-        tabIndex: -1
-      }) : props.button
-    })));
-  }), !otherProps.disabled && React.createElement(Popover$1.Popover, Object.assign({}, base, container), React.createElement(ScrollableList, Object.assign({}, list, {
-    className: cn('border-blue w-auto max-w-[theme(spacing.96)] max-h-[calc(12rem+2px)]'),
-    style: {
-      minWidth: selectDimensions === null || selectDimensions === void 0 ? void 0 : selectDimensions.width
-    },
-    tabIndex: popover.visible ? 0 : -1
-  }))));
-});
+    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 format = function format(date, mask) {
-  if (mask === void 0) {
-    mask = 'dd.mm.yy';
-  }
 
-  if (!date) {
-    return undefined;
-  }
+  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 value = dateFns.isDate(date) ? date : dateFns.toDate(date);
+  React.useEffect(function () {
+    if (value !== undefined && value !== inputValue) {
+      setInputValue(convertToInputValue(value));
+    }
+  }, [value]); // show listbox based on input value
 
-  if (!dateFns.isValid(value)) {
-    return undefined;
-  }
+  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);
 
-  var pad = function pad(v) {
-    return String(v).length === 1 ? "0" + v : v.toString();
-  };
+    if (inputValue && data.length && !isCurrentValue) {
+      setCurrentIndex(0);
 
-  return mask.replace('dd', pad(value.getDate())).replace('mm', pad(value.getMonth() + 1)).replace('yy', String(value.getFullYear()).slice(2));
-};
-var parseFromCustomString = function parseFromCustomString(date, mask) {
-  if (date === void 0) {
-    date = '';
-  }
+      if (!popover.visible) {
+        popover.show();
+      }
+    } else {
+      popover.hide();
+    }
+  }, [inputValue, data]);
+  React.useEffect(function () {
+    if (popover.visible) {
+      setCurrentIndex(getIndexFromValue(data, inputValue) || 0);
+    } else {
+      setCurrentIndex(undefined);
+    }
+  }, [popover.visible]); // event handlers
 
-  if (mask === void 0) {
-    mask = 'dd.mm.yy';
-  }
+  var handleInputBlur = function handleInputBlur(event) {
+    event.persist();
 
-  if (!date || !date.length) {
-    return undefined;
-  }
+    if (event.relatedTarget === listRef.current) {
+      event.preventDefault();
+      return;
+    }
 
-  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;
+    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);
 
-  var getFullYear = function getFullYear(y) {
-    if (y && y.length === 2) {
-      var z = Number.parseInt(y, 10);
-      return z > 50 ? "19" + y : "20" + y;
+      if (parents !== null && parents.length > 0) {
+        event.detail.parents = parents;
+      }
+
+      onChange(event);
     }
 
-    return y;
+    if (props.onBlur) {
+      props.onBlur(event);
+    }
   };
 
-  var inputParts = date.split(/\D/);
+  var handleInputChange = function handleInputChange(event) {
+    setInputValue(event.target.value);
+  };
 
-  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]);
-  }
+  var handleInputClick = function handleInputClick(event) {
+    if (inline || !popover.visible && inputValue && data.length) {
+      popover.show();
+    }
 
-  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
+    if (onClick) {
+      event.persist();
+      onClick(event);
+    }
+  };
 
-  /* 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 handleInputKeyDown = function handleInputKeyDown(event) {
+    event.persist();
 
-var _excluded$h = ["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$h);
+    switch (event.keyCode) {
+      case keycode('backspace'):
+        {
+          return;
+        }
 
-  var inputRef = useProxiedRef(ref);
+      case keycode('escape'):
+        {
+          event.preventDefault();
+          setInputValue(convertToInputValue(value));
+          popover.hide();
+          return;
+        }
 
-  var _useLocalization = useLocalization(),
-      formatting = _useLocalization.formatting;
+      case keycode('tab'):
+      case keycode('enter'):
+        {
+          if (event.keyCode !== keycode('tab')) {
+            event.preventDefault();
+          }
 
-  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'
+          setCurrentValue(currentIndex);
+          popover.hide();
+          return;
+        }
 
+      case keycode('up'):
+      case keycode('down'):
+      case keycode('home'):
+      case keycode('end'):
+        {
+          if (popover.visible) {
+            event.preventDefault();
+          }
 
-  React.useEffect(function () {
-    if (value) {
-      var formattedValue = format(value, formatting.date);
+          break;
+        }
+    } // we aren't focused on the list, so manually forward the keydown event to it
 
-      if (formattedValue !== internalValue) {
-        setInternalValue(formattedValue);
-      }
-    } else {
-      setInternalValue('');
-    }
-  }, [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 (listRef.current) {
+      listRef.current.dispatchEvent(createCustomKeyboardEvent(event));
+    }
 
-    if (onChange) {
-      event.detail = valueAsDate;
-      onChange(event);
-    } else {
-      // update the internal value to use the formatted date
-      setInternalValue(formattedValue);
+    if (inline && !popover.visible) {
+      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);
+        popover.show();
+      }
     }
 
-    if (onBlur) {
-      onBlur(event);
+    if (!event.isDefaultPrevented() && onKeyDown) {
+      event.persist();
+      onKeyDown(event);
     }
   };
 
-  var handleInputChange = function handleInputChange(event) {
-    setInternalValue(event.target.value);
+  var handleListboxChange = function handleListboxChange(index) {
+    setCurrentIndex(index);
   };
 
-  var handleChange = function handleChange(date) {
-    setInputValueByRef(inputRef.current, format(date, formatting.date), 'focusout');
+  var handleListboxClick = function handleListboxClick(event, index) {
+    event.preventDefault();
+    setCurrentValue(index);
+    popover.hide();
   };
 
-  var inputProps = _extends({}, props, {
-    autoComplete: 'off',
-    onBlur: handleInputBlur,
-    onChange: handleInputChange,
+  var combobox = {
+    'aria-expanded': popover.visible,
+    'aria-owns': listId,
+    'aria-haspopup': 'listbox',
+    role: 'combobox'
+  };
+
+  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: internalValue
-  });
-
-  var calendarProps = _extends({}, calendar, {
-    onChange: handleChange,
-    value: value
+    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 {
-    input: inputProps,
-    calendar: calendarProps
+    combobox: combobox,
+    input: input,
+    list: list,
+    popover: _extends({}, popover, {
+      visible: !data.length ? false : popover.visible,
+      container: {
+        tabIndex: -1,
+        'aria-label': ariaLabel,
+        'aria-labelledby': ariaLabelledBy,
+        unstable_initialFocusRef: inputRef
+      }
+    })
   };
 };
 
-var _excluded$i = ["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$i);
-
-  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 getVisibility = function getVisibility(element) {
+  return Boolean(element && (element.offsetWidth || element.offsetHeight || element.getClientRects().length));
+};
 
-var _excluded$j = ["children"];
-var PopoverContext = /*#__PURE__*/React.createContext({
-  props: {}
-});
-var Trigger$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var context = React.useContext(PopoverContext);
-  return React.createElement(PopoverPrimitive.Trigger, Object.assign({}, context.props, props, {
-    ref: ref,
-    asChild: true
-  }));
-});
-var RenderPropWrapper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-      onClick = _ref.onClick;
+var useBoundingClientRectListener = function useBoundingClientRectListener(ref) {
+  var _React$useState = React.useState(undefined),
+      dimensions = _React$useState[0],
+      setDimensions = _React$useState[1];
 
-  var close = function close() {
-    onClick(new CustomEvent('hide'));
-  };
+  var isRefElementVisible = getVisibility(ref.current);
 
-  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 _React$useState2 = React.useState(isRefElementVisible),
+      visibility = _React$useState2[0],
+      setVisibility = _React$useState2[1];
 
-  if (typeof props.children === 'function') {
-    output = React.createElement(PopoverPrimitive.Close, {
-      asChild: true
-    }, React.createElement(RenderPropWrapper, null, props.children));
-  } else {
-    output = props.children;
-  }
+  var resize = function resize() {
+    if (visibility) {
+      var _ref$current;
 
-  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 = function Popover(props) {
-  var children = props.children,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$j);
+      setDimensions((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.getBoundingClientRect());
+    }
+  };
 
-  var context = React.useMemo(function () {
-    return {
-      props: otherProps
+  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);
     };
-  }, [otherProps]);
-  return React.createElement(PopoverContext.Provider, {
-    value: context
-  }, React.createElement(PopoverPrimitive.Root, {
-    children: children
-  }));
-};
-Popover.Trigger = Trigger$1;
-Popover.Content = Content$1;
-Popover.Close = Close$1;
+  }, [ref.current, visibility]);
+  React.useEffect(function () {
+    var newRefElementVisibility = getVisibility(ref.current);
 
-var _excluded$k = ["className", "onReset", "style", "shortcuts", "shortcutsText"];
-var Datepicker = /*#__PURE__*/React.forwardRef(function Datepicker(props, ref) {
-  var _input$disabled;
+    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$m = ["className", "style"],
+    _excluded2$2 = ["container"];
+var Combobox = /*#__PURE__*/React.forwardRef(function Combobox(props, ref) {
   var externalClassName = props.className,
-      handleReset = props.onReset,
       style = props.style,
-      shortcuts = props.shortcuts,
-      shortcutsText = props.shortcutsText,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$k);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$m);
 
-  var _useDatepicker = useDatepicker(otherProps, ref),
-      calendar = _useDatepicker.calendar,
-      input = _useDatepicker.input;
+  var _useCombobox = useCombobox(otherProps, ref),
+      combobox = _useCombobox.combobox,
+      input = _useCombobox.input,
+      popover = _useCombobox.popover,
+      list = _useCombobox.list;
 
-  var _useLocalization = useLocalization(),
-      texts = _useLocalization.texts;
+  var container = popover.container,
+      base = _objectWithoutPropertiesLoose(popover, _excluded2$2);
 
-  var className = cn('inline-flex w-full text-black font-normal', externalClassName);
+  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": "datepicker",
+    "data-taco": "combobox",
     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();
-        },
+  }, React.createElement(Popover$1.PopoverDisclosure, Object.assign({}, base, {
+    ref: internalRef
+  }), function (_ref) {
+    var ref = _ref.ref;
+    return React.createElement("span", Object.assign({}, combobox, {
+      className: "w-full",
+      ref: ref
+    }), React.createElement(Input, Object.assign({}, input, {
+      autoComplete: "off",
+      button: props.inline ? React.createElement(IconButton, {
+        icon: popover.visible ? 'chevron-up' : 'chevron-down',
+        onClick: popover.toggle,
         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({
-  close: function close() {},
-  draggable: false,
-  drawer: undefined,
-  elements: {
-    drawer: undefined,
-    extra: undefined
-  },
-  onClose: function onClose() {},
-  props: {},
-  size: 'sm'
+      }) : props.button
+    })));
+  }), !otherProps.disabled && React.createElement(Popover$1.Popover, Object.assign({}, base, container), React.createElement(ScrollableList, Object.assign({}, list, {
+    className: cn('border-blue w-auto max-w-[theme(spacing.96)] max-h-[calc(12rem+2px)]'),
+    style: {
+      minWidth: selectDimensions === null || selectDimensions === void 0 ? void 0 : selectDimensions.width
+    },
+    tabIndex: popover.visible ? 0 : -1
+  }))));
 });
-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: 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
-        };
-      });
+  return mask.replace('dd', pad(value.getDate())).replace('mm', pad(value.getMonth() + 1)).replace('yy', String(value.getFullYear()).slice(2));
+};
+var parseFromCustomString = function parseFromCustomString(date, mask) {
+  if (date === void 0) {
+    date = '';
+  }
+
+  if (mask === void 0) {
+    mask = 'dd.mm.yy';
+  }
+
+  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 getFullYear = function getFullYear(y) {
+    if (y && y.length === 2) {
+      var z = Number.parseInt(y, 10);
+      return z > 50 ? "19" + y : "20" + y;
     }
-  }),
-      moveProps = _useMove.moveProps;
 
-  return {
-    position: position,
-    handleProps: moveProps
+    return y;
   };
-};
 
-var MenuContext = /*#__PURE__*/React.createContext(undefined);
-var useCurrentMenu = function useCurrentMenu() {
-  return React.useContext(MenuContext);
-};
+  var inputParts = date.split(/\D/);
 
-var _excluded$l = ["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$l);
+  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]);
+  }
 
-  var className = cn('flex ', props.className);
-  return React.createElement(Tag, Object.assign({}, otherProps, {
-    className: className,
-    "data-taco": "group",
-    ref: 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 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: "flex justify-end mt-8",
-    ref: ref
-  }), React.createElement(Group, null, 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 Content$2 = /*#__PURE__*/React.forwardRef(function DialogContent(props, ref) {
-  var dialog = useCurrentDialog();
-  var internalRef = useProxiedRef(ref);
+  /* 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 _useDraggable = useDraggable(internalRef),
-      position = _useDraggable.position,
-      dragHandleProps = _useDraggable.handleProps;
+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 _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 inputRef = useProxiedRef(ref);
 
+  var _useLocalization = useLocalization(),
+      formatting = _useLocalization.formatting;
 
-  var menu = useCurrentMenu();
-  var handleCloseAutoFocus;
+  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'
 
-  if (menu) {
-    handleCloseAutoFocus = function handleCloseAutoFocus() {
-      return menu.close();
-    };
-  }
 
-  var className = cn('bg-white yt-shadow rounded fixed-center', {
-    '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('yt-dialog bg-white p-6 rounded relative z-10', {
-    'rounded-b-none': !!dialog.elements.extra
-  }, props.className);
-  var overlayClassName = cn('fixed inset-0 cursor-default overflow-y-auto bg-[rgba(50,46,62,0.8)] animate-[fade-in_150ms] aria-hidden:hidden'); // 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);
 
-  var handleInteractOutside = function handleInteractOutside(event) {
-    return event.preventDefault();
-  };
+      if (formattedValue !== internalValue) {
+        setInternalValue(formattedValue);
+      }
+    } else {
+      setInternalValue('');
+    }
+  }, [value]); // event handlers
 
-  var output;
+  var handleInputBlur = function handleInputBlur(event) {
+    event.persist();
+    var valueAsDate = parseFromCustomString(event.target.value);
+    var formattedValue = valueAsDate ? format(valueAsDate) || '' : '';
+    event.target.value = formattedValue;
 
-  if (typeof props.children === 'function') {
-    output = props.children({
-      drawer: dialog.drawer,
-      close: dialog.close
-    });
-  } else {
-    output = props.children;
-  }
+    if (onChange) {
+      event.detail = valueAsDate;
+      onChange(event);
+    } else {
+      // update the internal value to use the formatted date
+      setInternalValue(formattedValue);
+    }
 
-  return React.createElement(DialogPrimitive.Portal, null, React.createElement(DialogPrimitive.Overlay, {
-    className: overlayClassName
-  }, React.createElement(DialogPrimitive.Content, Object.assign({}, props, {
-    className: className,
-    "data-taco": "dialog",
-    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
-  }, output, dialog.draggable && React.createElement("div", Object.assign({}, dragHandleProps, {
-    "aria-label": texts.dialog.drag,
-    className: "yt-dialog__drag absolute-center-x h-3 rounded bg-grey-light cursor-move text-center w-24 top-1.5"
-  })), 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 (onBlur) {
+      onBlur(event);
+    }
+  };
 
-var Drawer = /*#__PURE__*/React.forwardRef(function DialogDrawer(props, ref) {
-  var _dialog$drawer, _dialog$drawer2;
+  var handleInputChange = function handleInputChange(event) {
+    setInternalValue(event.target.value);
+  };
 
-  var dialog = useCurrentDialog();
-  return React.createElement(framerMotion.motion.div, Object.assign({}, props, {
-    className: "bg-white absolute top-0 h-full w-full hidden text-left p-6 overflow-y-auto rounded-r -ml-px yt-shadow-inset",
-    "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 handleChange = function handleChange(date) {
+    setInputValueByRef(inputRef.current, format(date, formatting.date), 'focusout');
+  };
 
-var Extra = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  return React.createElement("div", Object.assign({}, props, {
-    className: "bg-grey-light rounded-t-none rounded-b absolute top-full w-full text-left p-6 left-0 -mt-px yt-shadow-inset",
-    ref: ref
-  }));
-});
+  var inputProps = _extends({}, props, {
+    autoComplete: 'off',
+    onBlur: handleInputBlur,
+    onChange: handleInputChange,
+    ref: inputRef,
+    type: 'text',
+    value: internalValue
+  });
 
-var _excluded$m = ["children", "draggable", "onClose", "open", "size"];
+  var calendarProps = _extends({}, calendar, {
+    onChange: handleChange,
+    value: value
+  });
 
-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 {
+    input: inputProps,
+    calendar: calendarProps
+  };
 };
 
-var Dialog = function Dialog(props) {
-  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$m);
+var _excluded$o = ["className", "onReset", "style", "shortcuts", "shortcutsText"];
+var Datepicker = /*#__PURE__*/React.forwardRef(function Datepicker(props, ref) {
+  var _input$disabled;
 
-  var _useSeparatedChildren = useSeparatedChildren(initialChildren),
-      children = _useSeparatedChildren[0],
-      drawer = _useSeparatedChildren[1],
-      extra = _useSeparatedChildren[2];
+  var externalClassName = props.className,
+      handleReset = props.onReset,
+      style = props.style,
+      shortcuts = props.shortcuts,
+      shortcutsText = props.shortcutsText,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$o);
 
-  var _React$useState = React.useState(defaultOpen),
-      open = _React$useState[0],
-      setOpen = _React$useState[1];
+  var _useDatepicker = useDatepicker(otherProps, ref),
+      calendar = _useDatepicker.calendar,
+      input = _useDatepicker.input;
 
-  var _React$useState2 = React.useState(false),
-      drawerOpen = _React$useState2[0],
-      setDrawerOpen = _React$useState2[1];
+  var _useLocalization = useLocalization(),
+      texts = _useLocalization.texts;
 
-  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;
-          });
+  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();
         }
-      },
-      elements: {
-        drawer: drawer,
-        extra: extra
-      },
-      onClose: onClose,
-      props: otherProps,
-      size: size
-    };
-  }, [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$2;
-Dialog.Content = Content$2;
-Dialog.Title = Title;
-Dialog.Footer = Footer;
-Dialog.Extra = Extra;
-Dialog.Drawer = Drawer;
-Dialog.Close = Close$2;
+      }, texts.datepicker.clear)));
+    }))
+  })));
+});
 
-var _excluded$n = ["horizontal"];
+var _excluded$p = ["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$n);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$p);
 
   var className = cn('yt-form', {
     'yt-form--horizontal flex flex-wrap': horizontal
@@ -5741,68 +5870,10 @@ var Form = /*#__PURE__*/React.forwardRef(function Form(props, ref) {
   }));
 });
 
-var _excluded$o = ["children"];
-var HangerContext = /*#__PURE__*/React.createContext({
-  props: {}
-});
-var Anchor = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var context = React.useContext(HangerContext);
-  return React.createElement(PopoverPrimitive.Anchor, Object.assign({}, context.props, props, {
-    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: "text-white ml-2 absolute top-0 right-0 mr-2 mt-2",
-    icon: "close",
-    onClick: props.onClose
-  })));
-});
-var Hanger = function Hanger(props) {
-  var children = props.children,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$o);
-
-  var context = React.useMemo(function () {
-    return {
-      props: otherProps
-    };
-  }, [otherProps]);
-  return React.createElement(HangerContext.Provider, {
-    value: context
-  }, React.createElement(PopoverPrimitive.Root, {
-    children: children,
-    defaultOpen: true
-  }));
-};
-Hanger.Anchor = Anchor;
-Hanger.Content = Content$3;
-
-var _excluded$p = ["onSearch"];
+var _excluded$q = ["onSearch"];
 var SearchInput = /*#__PURE__*/React.forwardRef(function SearchInput(_ref, ref) {
   var onSearch = _ref.onSearch,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
 
   var _useLocalization = useLocalization(),
       texts = _useLocalization.texts;
@@ -5835,13 +5906,13 @@ var SearchInput = /*#__PURE__*/React.forwardRef(function SearchInput(_ref, ref)
   }));
 });
 
-var _excluded$q = ["disabled", "children", "message", "state"];
+var _excluded$r = ["disabled", "children", "message", "state"];
 var Label = /*#__PURE__*/React.forwardRef(function Label(props, ref) {
   var disabled = props.disabled,
       children = props.children,
       message = props.message,
       state = props.state,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$q);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$r);
 
   var className = cn('flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]', {
     'text-grey-dark': disabled
@@ -5885,7 +5956,7 @@ var useTypeahead = function useTypeahead(_ref) {
   };
 };
 
-var _excluded$r = ["data", "defaultValue", "disabled", "emptyValue", "id", "name", "onChange", "onFocus", "onKeyDown", "value"];
+var _excluded$s = ["data", "defaultValue", "disabled", "emptyValue", "id", "name", "onChange", "onFocus", "onKeyDown", "value"];
 var useListbox = function useListbox(_ref, ref) {
   var _ref$data = _ref.data,
       externalData = _ref$data === void 0 ? [] : _ref$data,
@@ -5899,7 +5970,7 @@ var useListbox = function useListbox(_ref, ref) {
       onKeyDown = _ref.onKeyDown,
       _ref$value = _ref.value,
       value = _ref$value === void 0 ? emptyValue : _ref$value,
-      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$r);
+      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$s);
 
   var data = useFlattenedData(emptyValue !== undefined ? [{
     text: '',
@@ -6028,7 +6099,7 @@ var useListbox = function useListbox(_ref, ref) {
   };
 };
 
-var _excluded$s = ["data", "defaultValue", "disabled", "id", "name", "onClick", "onChange", "onFocus", "onKeyDown", "value"];
+var _excluded$t = ["data", "defaultValue", "disabled", "id", "name", "onClick", "onChange", "onFocus", "onKeyDown", "value"];
 var useMultiListbox = function useMultiListbox(_ref, ref) {
   var _ref$data = _ref.data,
       externalData = _ref$data === void 0 ? [] : _ref$data,
@@ -6041,7 +6112,7 @@ var useMultiListbox = function useMultiListbox(_ref, ref) {
       onFocus = _ref.onFocus,
       onKeyDown = _ref.onKeyDown,
       value = _ref.value,
-      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$s);
+      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$t);
 
   var _useLocalization = useLocalization(),
       texts = _useLocalization.texts;
@@ -6240,11 +6311,11 @@ var useMultiListbox = function useMultiListbox(_ref, ref) {
   };
 };
 
-var _excluded$t = ["className"],
+var _excluded$u = ["className"],
     _excluded2$3 = ["className"];
 var Listbox = /*#__PURE__*/React.forwardRef(function Listbox(props, ref) {
   var externalClassName = props.className,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$t);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$u);
 
   var _useListbox = useListbox(otherProps, ref),
       list = _useListbox.list,
@@ -6273,7 +6344,7 @@ var MultiListbox = /*#__PURE__*/React.forwardRef(function Listbox(props, ref) {
   })));
 });
 
-var _excluded$u = ["children", "placement"];
+var _excluded$v = ["children", "placement"];
 
 var getAppearanceClasses$1 = function getAppearanceClasses(appearance) {
   switch (appearance) {
@@ -6301,7 +6372,7 @@ var Content$4 = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
   var children = props.children,
       side = props.placement,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$u);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$v);
 
   var className = cn('border rounded block outline-none p-1', getAppearanceClasses$1(menu === null || menu === void 0 ? void 0 : menu.appearance), props.className);
   return React.createElement(DropdownMenuPrimitive.Content, Object.assign({}, otherProps, {
@@ -6317,7 +6388,7 @@ var Content$4 = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), children);
 });
 
-var _excluded$v = ["icon", "shortcut"];
+var _excluded$w = ["icon", "shortcut"];
 var Icon$1 = function Icon$1(_ref) {
   var name = _ref.name;
   return React.createElement("span", {
@@ -6400,7 +6471,7 @@ var Shortcut = function Shortcut(props) {
 var Item$1 = /*#__PURE__*/React.forwardRef(function MenuItem(props, ref) {
   var icon = props.icon,
       shortcut = props.shortcut,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$v);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$w);
 
   var className = useItemStyling({
     disabled: props.disabled,
@@ -6432,11 +6503,11 @@ var Item$1 = /*#__PURE__*/React.forwardRef(function MenuItem(props, ref) {
   }), props.children, shortcut && React.createElement(Shortcut, null, shortcut));
 });
 
-var _excluded$w = ["href", "icon"];
+var _excluded$x = ["href", "icon"];
 var Link = /*#__PURE__*/React.forwardRef(function MenuLink(props, ref) {
   var href = props.href,
       icon = props.icon,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$w);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$x);
 
   var className = useItemStyling({
     disabled: props.disabled,
@@ -6481,12 +6552,12 @@ var Trigger$3 = /*#__PURE__*/React.forwardRef(function MenuTrigger(props, ref) {
   }));
 });
 
-var _excluded$x = ["checked", "children", "onChange"];
+var _excluded$y = ["checked", "children", "onChange"];
 var Checkbox$1 = function Checkbox(props) {
   var checked = props.checked,
       children = props.children,
       onChange = props.onChange,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$x);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$y);
 
   var className = useItemStyling({
     disabled: props.disabled,
@@ -6505,7 +6576,7 @@ var Checkbox$1 = function Checkbox(props) {
   })), children);
 };
 
-var _excluded$y = ["children", "value"],
+var _excluded$z = ["children", "value"],
     _excluded2$4 = ["children", "defaultValue", "disabled", "invalid", "onChange", "orientation", "value"];
 var getRadioGroupItemValueAsString = function getRadioGroupItemValueAsString(value) {
   return value === undefined || value === null ? '' : String(value);
@@ -6524,7 +6595,7 @@ var RadioGroupItem = /*#__PURE__*/React.forwardRef(function RadioGroupItem(props
 
   var children = props.children,
       value = props.value,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$y);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$z);
 
   var disabled = context.disabled || props.disabled;
   var className = cn('flex items-center justify-center h-4 w-4 mr-2 rounded-full bg-white border-2 ', {
@@ -6613,13 +6684,13 @@ var RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(props, ref) {
 });
 RadioGroup.Item = RadioGroupItem;
 
-var _excluded$z = ["children", "value"];
+var _excluded$A = ["children", "value"];
 var RadioItem = function RadioItem(props) {
   var context = React.useContext(MenuRadioGroupContext);
 
   var children = props.children,
       value = props.value,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$z);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$A);
 
   var disabled = context.disabled || props.disabled;
   var className = useItemStyling({
@@ -6765,7 +6836,7 @@ Menu.Separator = Separator;
 Menu.Header = Header;
 Menu.RadioGroup = RadioGroup$1;
 
-var _excluded$A = ["children", "className", "expanded", "title", "fixed", "onClick"];
+var _excluded$B = ["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
@@ -6779,7 +6850,7 @@ var TreeviewGroup = /*#__PURE__*/React__default.forwardRef(function (props, ref)
       title = props.title,
       fixed = props.fixed,
       onClick = props.onClick,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$A);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$B);
 
   var _React$useState = React__default.useState(fixed || initialExpanded),
       expanded = _React$useState[0],
@@ -6879,7 +6950,7 @@ var useDropTarget = function useDropTarget(onDrop) {
   return [isDraggedOver, props];
 };
 
-var _excluded$B = ["active", "children", "onDrop", "postfix", "prefix", "role"],
+var _excluded$C = ["active", "children", "onDrop", "postfix", "prefix", "role"],
     _excluded2$5 = ["children"];
 var Item$2 = /*#__PURE__*/React__default.forwardRef(function Item(props, ref) {
   var active = props.active,
@@ -6888,7 +6959,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$B);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$C);
 
   var proxyRef = useProxiedRef(ref);
 
@@ -6922,7 +6993,7 @@ var Item$2 = /*#__PURE__*/React__default.forwardRef(function Item(props, ref) {
   }), prefix && React__default.createElement("span", {
     className: "yt-navigation__item__prefix flex items-center"
   }, prefix), React__default.createElement("a", Object.assign({}, otherProps, {
-    className: "flex-grow block truncate",
+    className: "block flex-grow truncate",
     ref: proxyRef
   }), children), postfix && React__default.createElement("span", {
     className: "yt-navigation__item__postfix ml-1"
@@ -6930,7 +7001,7 @@ var Item$2 = /*#__PURE__*/React__default.forwardRef(function Item(props, ref) {
 });
 var Panel = /*#__PURE__*/React__default.forwardRef(function Panel(props, ref) {
   return React__default.createElement("div", Object.assign({}, props, {
-    className: cn('bg-white p-3 w-full', props.className),
+    className: cn('w-full bg-white p-3', props.className),
     ref: ref
   }));
 });
@@ -6978,11 +7049,11 @@ var Menu$1 = /*#__PURE__*/React__default.forwardRef(function Menu(props, ref) {
     return scrollableAreas;
   }, [props.children]);
   return React__default.createElement(Treeview, Object.assign({}, props, {
-    className: cn('flex flex-col flex-grow overflow-y-auto divide-y-2 divide-grey-light', props.className),
+    className: cn('divide-grey-light flex flex-grow flex-col divide-y-2 overflow-y-auto', props.className),
     ref: ref
   }), scrollableAreas.map(function (area, i) {
     return Array.isArray(area) ? React__default.createElement("div", {
-      className: "flex flex-col flex-auto flex-shrink-0 flex-grow overflow-y-auto divide-y-2 divide-grey-light h-0",
+      className: "divide-grey-light flex h-0 flex-auto flex-shrink-0 flex-grow flex-col divide-y-2 overflow-y-auto",
       key: i
     }, area) : area;
   }));
@@ -6995,6 +7066,7 @@ var Navigation = /*#__PURE__*/React__default.forwardRef(function Navigation(prop
   var className = cn('h-full flex flex-col bg-grey-light divide-y-2 divide-grey-light', props.className);
   return React__default.createElement("div", Object.assign({}, otherProps, {
     className: className,
+    "data-taco": "navigation",
     ref: ref
   }), children);
 });
@@ -7051,7 +7123,7 @@ var PageNumbers = function PageNumbers(_ref) {
   }));
 };
 
-var _excluded$C = ["aria-label", "aria-labelledby", "data", "disabled", "emptyValue", "id", "multiselect", "onClick", "readOnly", "value"];
+var _excluded$D = ["aria-label", "aria-labelledby", "data", "disabled", "emptyValue", "id", "multiselect", "onClick", "readOnly", "showSelectedIcon", "value"];
 var useSelect = function useSelect(_ref, ref) {
   var ariaLabel = _ref['aria-label'],
       ariaLabelledBy = _ref['aria-labelledby'],
@@ -7063,9 +7135,11 @@ var useSelect = function useSelect(_ref, ref) {
       multiselect = _ref.multiselect,
       onClick = _ref.onClick,
       readOnly = _ref.readOnly,
+      _ref$showSelectedIcon = _ref.showSelectedIcon,
+      showSelectedIcon = _ref$showSelectedIcon === void 0 ? false : _ref$showSelectedIcon,
       _ref$value = _ref.value,
       value = _ref$value === void 0 ? emptyValue : _ref$value,
-      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$C);
+      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$D);
 
   var _useLocalization = useLocalization(),
       texts = _useLocalization.texts;
@@ -7162,9 +7236,13 @@ var useSelect = function useSelect(_ref, ref) {
         more = selectedValues.length > 1 ? selectedValues.length - 1 : 0;
       }
     } else {
-      var _findByValue2;
+      var item = findByValue(searchData, value);
 
-      text = ((_findByValue2 = findByValue(searchData, value)) === null || _findByValue2 === void 0 ? void 0 : _findByValue2.text) || '';
+      if (item) {
+        text = showSelectedIcon && item.icon ? React.createElement(React.Fragment, null, React.cloneElement(item.icon, {
+          className: cn(item.icon.props.className, 'mr-1')
+        }), item.text) : item.text;
+      }
     }
   }
 
@@ -7208,14 +7286,14 @@ var useSelect = function useSelect(_ref, ref) {
   };
 };
 
-var _excluded$D = ["autoFocus", "className", "highlighted", "style"],
+var _excluded$E = ["autoFocus", "className", "highlighted", "style"],
     _excluded2$6 = ["container"],
     _excluded3 = ["editable"];
 var BaseSelect = /*#__PURE__*/React.forwardRef(function BaseSelect(props, ref) {
   var autoFocus = props.autoFocus,
       externalClassName = props.className,
       style = props.style,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$D);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$E);
 
   var _useSelect = useSelect(otherProps, ref),
       button = _useSelect.button,
@@ -7269,8 +7347,9 @@ var BaseSelect = /*#__PURE__*/React.forwardRef(function BaseSelect(props, ref) {
     }), props.multiselect ? renderMultiSelection() : React.createElement("span", {
       className: "flex-grow"
     }, text), React.createElement("span", {
-      className: "h-8 w-8 flex items-center justify-center"
+      className: "flex h-8 w-8 items-center justify-center"
     }, React.createElement(Icon, {
+      className: "group-hover:text-grey-darkest text-black",
       name: popover.visible ? 'chevron-up' : 'chevron-down'
     })));
   }), !otherProps.disabled && React.createElement(Popover$1.Popover, Object.assign({}, base, container), props.multiselect ? React.createElement(MultiListbox, Object.assign({}, commonListboxProps)) : React.createElement(Listbox, Object.assign({}, commonListboxProps))));
@@ -7361,7 +7440,7 @@ var usePagination = function usePagination(initialPageIndex, initialPageSize) {
   };
 };
 
-var _excluded$E = ["length", "pageIndex", "pageSize", "pageSizes", "setPageIndex", "setPageSize", "showPageControls", "showPageNumbers", "showPageSize", "dangerouslyHijackGlobalKeyboardNavigation"];
+var _excluded$F = ["length", "pageIndex", "pageSize", "pageSizes", "setPageIndex", "setPageSize", "showPageControls", "showPageNumbers", "showPageSize", "dangerouslyHijackGlobalKeyboardNavigation"];
 
 var getShowingLabel = function getShowingLabel(length, pageIndex, pageSize, texts) {
   var minItemIndex = pageIndex * pageSize + 1;
@@ -7385,7 +7464,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$E);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$F);
 
   var _useLocalization = useLocalization(),
       texts = _useLocalization.texts;
@@ -7404,6 +7483,7 @@ var Pagination = /*#__PURE__*/React.forwardRef(function Pagination(props, ref) {
   var className = cn('inline-flex relative justify-between items-center', props.className);
   return React.createElement("div", Object.assign({}, otherProps, {
     className: className,
+    "data-taco": "pagination",
     ref: ref
   }), showPageSize && React.createElement("span", {
     className: "mr-4"
@@ -7467,13 +7547,13 @@ var Pagination = /*#__PURE__*/React.forwardRef(function Pagination(props, ref) {
   })));
 });
 
-var _excluded$F = ["duration"];
+var _excluded$G = ["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$F);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$G);
 
   var style;
 
@@ -7497,7 +7577,7 @@ var Progress = function Progress(_ref) {
   }));
 };
 
-var _excluded$G = ["children"];
+var _excluded$H = ["children"];
 var sanitizeRowProps = function sanitizeRowProps(row, rowExpansionRenderer) {
   var _row$subRows;
 
@@ -7537,7 +7617,7 @@ var getColumnsFromChildren = function getColumnsFromChildren(children, rowExpans
   .map(function (_ref) {
     var _ref$props = _ref.props,
         groupChildren = _ref$props.children,
-        props = _objectWithoutPropertiesLoose(_ref$props, _excluded$G);
+        props = _objectWithoutPropertiesLoose(_ref$props, _excluded$H);
 
     var column = _extends({}, props);
 
@@ -7782,6 +7862,8 @@ var useRowEditing = function useRowEditing(uniqueId) {
   return plugin;
 };
 
+var actionGroupClassName = '-mt-1 -mb-1 h-8 flex';
+
 var hasActions = function hasActions(inlineEditingUniqueId, handlers, actions) {
   return !!actions || handlers.onRowCreate || handlers.onRowCopy || handlers.onRowDelete || !!inlineEditingUniqueId || handlers.onRowEdit;
 };
@@ -7882,7 +7964,9 @@ var EditModeActions = function EditModeActions() {
       document.removeEventListener('keydown', listener);
     };
   }, []);
-  return React__default.createElement(Group, null, React__default.createElement(IconButton, {
+  return React__default.createElement("div", {
+    className: actionGroupClassName
+  }, React__default.createElement(IconButton, {
     appearance: "primary",
     icon: "tick",
     type: "submit",
@@ -7907,7 +7991,7 @@ var useRowActions = function useRowActions(inlineEditingUniqueId, handlers, acti
       hooks.visibleColumns.push(function (columns) {
         return [].concat(columns, [{
           id: '_actions',
-          className: 'yt-table__cell__actions',
+          className: 'flex justify-end px-1 overflow-visible',
           flex: "0 0 calc((" + actionsLength + " * 2rem) + .5rem)",
           Cell: function Cell(_ref) {
             var row = _ref.row;
@@ -8005,7 +8089,9 @@ var useRowActions = function useRowActions(inlineEditingUniqueId, handlers, acti
             }))) : null);
 
             if (windowed) {
-              return React__default.createElement(Group, null, output);
+              return React__default.createElement("div", {
+                className: actionGroupClassName
+              }, output);
             }
 
             return React__default.createElement(reactIntersectionObserver.InView, {
@@ -8013,7 +8099,8 @@ var useRowActions = function useRowActions(inlineEditingUniqueId, handlers, acti
             }, function (_ref2) {
               var inView = _ref2.inView,
                   ref = _ref2.ref;
-              return React__default.createElement(Group, {
+              return React__default.createElement("div", {
+                className: actionGroupClassName,
                 ref: ref
               }, inView ? output : null);
             });
@@ -8027,7 +8114,7 @@ var useRowActions = function useRowActions(inlineEditingUniqueId, handlers, acti
   return plugin;
 };
 
-var _excluded$H = ["onChange"],
+var _excluded$I = ["onChange"],
     _excluded2$7 = ["onChange"];
 
 var toggleBetween = function toggleBetween(fromRowIndex, toRowIndex) {
@@ -8075,7 +8162,7 @@ var useRowSelect = function useRowSelect(onSelectedRows) {
                 rows = _ref.rows;
 
             var _getToggleAllRowsSele = getToggleAllRowsSelectedProps(),
-                props = _objectWithoutPropertiesLoose(_getToggleAllRowsSele, _excluded$H);
+                props = _objectWithoutPropertiesLoose(_getToggleAllRowsSele, _excluded$I);
 
             var onChange = function onChange(checked) {
               if (checked) {
@@ -8088,7 +8175,7 @@ var useRowSelect = function useRowSelect(onSelectedRows) {
 
             return React__default.createElement(Checkbox, Object.assign({}, props, {
               onChange: onChange,
-              className: "h-auto mt-px"
+              className: "mt-px"
             }));
           },
           Cell: function Cell(_ref2) {
@@ -8120,7 +8207,7 @@ var useRowSelect = function useRowSelect(onSelectedRows) {
             };
 
             return React__default.createElement(Checkbox, Object.assign({}, props, {
-              className: "h-auto mt-px",
+              className: "mt-px",
               onClick: onClick,
               // this is necessary to remove console spam from eslint
               onChange: function onChange() {
@@ -8129,7 +8216,7 @@ var useRowSelect = function useRowSelect(onSelectedRows) {
             }));
           },
           flex: '0 0 36px',
-          className: 'flex-col justify-start'
+          className: 'flex-col justify-start !pb-0'
         }].concat(columns);
       });
     }
@@ -8389,7 +8476,7 @@ var useRowDraggable = function useRowDraggable(onRowDrag) {
   return plugin;
 };
 
-var _excluded$I = ["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$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"],
     _excluded2$8 = ["headerGroups", "rows", "sortedRows", "prepareRow", "state", "page", "gotoPage", "setPageSize"];
 
 var useTableRowActive = function useTableRowActive(activeIndex, rows, rowExpansionRenderer, handleonRowActive) {
@@ -8494,7 +8581,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$I);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$J);
 
   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');
@@ -8611,13 +8698,13 @@ var useTable = function useTable(props, ref) {
   };
 };
 
-var _excluded$J = ["row", "index", "instance", "headerGroups"];
+var _excluded$K = ["row", "index", "instance", "headerGroups"];
 
 var renderCell = function renderCell(cell, row) {
   var props = _extends({}, cell.getCellProps(), {
     className: cn('yt-table__cell', cell.column.className, {
-      'yt-table__cell--align-left': cell.column.align === 'left',
-      'yt-table__cell--align-right': cell.column.align === 'right'
+      'justify-start text-left': cell.column.align === 'left',
+      'justify-end text-right': cell.column.align === 'right'
     }),
     style: _extends({}, cell.column.style, {
       flex: typeof cell.column.flex === 'function' ? cell.column.flex(row) : cell.column.flex
@@ -8625,7 +8712,8 @@ var renderCell = function renderCell(cell, row) {
   });
 
   return React__default.createElement("div", Object.assign({}, props, {
-    role: "gridcell"
+    role: "gridcell",
+    "data-taco": "table-cell"
   }), cell.render('Cell') || null);
 };
 
@@ -8633,7 +8721,7 @@ var Row = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var row = _ref.row,
       index = _ref.index,
       instance = _ref.instance,
-      rowProps = _objectWithoutPropertiesLoose(_ref, _excluded$J);
+      rowProps = _objectWithoutPropertiesLoose(_ref, _excluded$K);
 
   var activeIndex = rowProps.activeIndex,
       onRowClick = rowProps.onRowClick,
@@ -8720,8 +8808,8 @@ var Column = function Column(_ref) {
     className: cn('yt-table__cell', cell.className, {
       'yt-table__cell__group': !!cell.columns,
       'yt-table__cell--disable-sort': cell.disableSorting,
-      'yt-table__cell--align-left': cell.align === 'left',
-      'yt-table__cell--align-right': cell.align === 'right'
+      'justify-start text-left': cell.align === 'left',
+      'justify-end text-right': cell.align === 'right'
     }),
     style: _extends({}, cell.style, {
       flex: cell.flex
@@ -8733,13 +8821,14 @@ var Column = function Column(_ref) {
   }
 
   return React__default.createElement("div", Object.assign({}, props, {
-    key: cell.id
+    key: cell.id,
+    "data-taco": "table-column"
   }), React__default.createElement("span", null, cell.render('Header')), cell.isSorted ? React__default.createElement(Icon, {
     name: cell.isSortedDesc ? 'chevron-down-solid' : 'chevron-up-solid'
   }) : null);
 };
 
-var _excluded$K = ["autoFocus", "children", "disableSorting", "headerGroups", "headerRef", "bodyRef"];
+var _excluded$L = ["autoFocus", "children", "disableSorting", "headerGroups", "headerRef", "bodyRef"];
 var DefaultEmptyState = function DefaultEmptyState() {
   return null;
 };
@@ -8751,7 +8840,7 @@ var BaseTable = /*#__PURE__*/React__default.forwardRef(function BaseTable(props,
       headerGroups = props.headerGroups,
       headerRef = props.headerRef,
       bodyRef = props.bodyRef,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$K);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$L);
 
   React__default.useEffect(function () {
     if (autoFocus && tableRef.current) {
@@ -8786,11 +8875,11 @@ var BaseTable = /*#__PURE__*/React__default.forwardRef(function BaseTable(props,
   }, children));
 });
 
-var _excluded$L = ["emptyStateRenderer"];
+var _excluded$M = ["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$L);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$M);
 
   var tableRef = useProxiedRef(ref);
 
@@ -8855,14 +8944,14 @@ PaginatedTable.Group = function () {
   return null;
 };
 
-var _excluded$M = ["height"],
+var _excluded$N = ["height"],
     _excluded2$9 = ["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$M);
+      style = _objectWithoutPropertiesLoose(_ref$style, _excluded$N);
 
   var _useLocalization = useLocalization(),
       texts = _useLocalization.texts;
@@ -9228,7 +9317,7 @@ var useTableRowCreation = function useTableRowCreation(data, tableRef) {
   };
 };
 
-var _excluded$N = ["id", "defaultId", "children", "onChange", "orientation"],
+var _excluded$O = ["id", "defaultId", "children", "onChange", "orientation"],
     _excluded2$a = ["id", "disabled"],
     _excluded3$1 = ["id"];
 var Tabs = /*#__PURE__*/React.forwardRef(function Tabs(props, ref) {
@@ -9238,7 +9327,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$N);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$O);
 
   var className = cn('yt-tabs', "yt-tabs--" + orientation, {
     'flex w-full': orientation === 'vertical'
@@ -9292,9 +9381,9 @@ Tabs.List = TabList;
 Tabs.Trigger = TabTrigger;
 Tabs.Content = TabContent;
 
-var _excluded$O = ["defaultValue", "highlighted", "state"];
+var _excluded$P = ["defaultValue", "highlighted", "state"];
 var Textarea = /*#__PURE__*/React.forwardRef(function Textarea(props, ref) {
-  var otherProps = _objectWithoutPropertiesLoose(props, _excluded$O);
+  var otherProps = _objectWithoutPropertiesLoose(props, _excluded$P);
 
   var classNames = cn(getInputClasses(props), 'py-1 min-h-[75px] disabled:resize-none', props.className);
   return React.createElement("textarea", Object.assign({}, otherProps, {
@@ -9303,11 +9392,11 @@ var Textarea = /*#__PURE__*/React.forwardRef(function Textarea(props, ref) {
   }));
 });
 
-var _excluded$P = ["label", "onChange"];
+var _excluded$Q = ["label", "onChange"];
 var Switch = /*#__PURE__*/React.forwardRef(function Switch(props, ref) {
   var label = props.label,
       onChange = props.onChange,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$P);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$Q);
 
   var className = cn('group h-6 w-10 flex rounded-full inline-flex', {
     'mr-2': !!label,
@@ -9643,7 +9732,7 @@ var tailwind_config = {
 };
 var tailwind_config_1 = tailwind_config.theme;
 
-var _excluded$Q = ["autoStart", "onComplete", "onClose", "onReady", "spotlightClicks", "disableCloseOnEsc", "disableScrollParentFix"];
+var _excluded$R = ["autoStart", "onComplete", "onClose", "onReady", "spotlightClicks", "disableCloseOnEsc", "disableScrollParentFix"];
 
 var Tooltip$1 = function Tooltip(_ref) {
   var continuous = _ref.continuous,
@@ -9708,7 +9797,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$Q);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$R);
 
   var steps = React.useMemo(function () {
     return React__default.Children.map(props.children, function (child) {
@@ -9803,6 +9892,7 @@ var useOnClickOutside = function useOnClickOutside(ref, callback) {
 };
 
 exports.Accordion = Accordion;
+exports.Backdrop = Backdrop;
 exports.Badge = Badge;
 exports.Banner = Banner;
 exports.Button = Button$1;