@economic/taco 0.0.4-alpha.0 → 0.0.8-alpha.0

package/dist/taco.cjs.development.js

@@ -12,6 +12,8 @@ var TooltipPrimitive = require('@radix-ui/react-tooltip');
 var PopoverPrimitive = require('@radix-ui/react-popover');
 var uuid = require('uuid');
 var framerMotion = require('framer-motion');
+var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
+var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
 var DialogPrimitive = require('@radix-ui/react-dialog');
 var interactions = require('@react-aria/interactions');
 var ReactDayPicker = _interopDefault(require('react-day-picker'));
@@ -19,8 +21,6 @@ var CheckboxPrimitive = require('@radix-ui/react-checkbox');
 var keycode = _interopDefault(require('keycode'));
 var debounce = _interopDefault(require('lodash/debounce'));
 var dateFns = require('date-fns');
-var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
-var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
 var reactTable = require('react-table');
 var reactIntersectionObserver = require('react-intersection-observer');
 var focus = require('@react-aria/focus');
@@ -3895,8 +3895,18 @@ var HangerContext = /*#__PURE__*/React.createContext({
   ref: null
 });
 var Anchor = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _props$children;
+
   var context = React.useContext(HangerContext);
+  var children = props.children;
+
+  if (React.isValidElement(props.children) && typeof ((_props$children = props.children) === null || _props$children === void 0 ? void 0 : _props$children.type) === 'function') {
+    console.warn("Hanger.Anchor requires its child to forwardRef so that it can attach to the dom element. Did you mean to wrap '" + props.children.type.name + "' in React.forwardRef()? Taco has wrapped '" + props.children.type.name + "' in a 'span' to maintain functionality, but this may cause unintended behaviour");
+    children = React.createElement("span", null, props.children);
+  }
+
   return React.createElement(PopoverPrimitive.Anchor, Object.assign({}, context.props, props, {
+    children: children,
     ref: mergeRefs([context.ref, ref]),
     asChild: true
   }));
@@ -3949,32 +3959,11 @@ var Hanger = /*#__PURE__*/React.forwardRef(function (props, ref) {
 Hanger.Anchor = Anchor;
 Hanger.Content = Content$1;
 
-/* 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);
+var MenuContext = /*#__PURE__*/React.createContext(undefined);
+var useCurrentMenu = function useCurrentMenu() {
+  return React.useContext(MenuContext);
 };
 
-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) {
   var internalRef = React.useRef(null);
   React.useEffect(function () {
@@ -3989,891 +3978,1429 @@ var useProxiedRef = function useProxiedRef(ref) {
   return internalRef;
 };
 
-var useDraggable = function useDraggable(ref) {
-  var _React$useState = React__default.useState({
-    x: 0,
-    y: 0
-  }),
-      position = _React$useState[0],
-      setPosition = _React$useState[1];
+var _excluded$a = ["children", "placement"];
 
-  var _useMove = interactions.useMove({
-    onMove: function onMove(event) {
-      var _ref$current;
+var getAppearanceClasses = function getAppearanceClasses(appearance) {
+  switch (appearance) {
+    case 'primary':
+      return 'wcag-blue border-blue';
 
-      var rect = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.getBoundingClientRect(); // Prevent dragging out of bounds
+    case 'danger':
+      return 'wcag-red border-red';
 
-      // 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 'ghost':
+      return 'bg-white text-blue border-blue yt-shadow-blue';
 
-      setPosition(function (_ref) {
-        var x = _ref.x,
-            y = _ref.y;
-        x += event.deltaX;
-        y += event.deltaY;
-        return {
-          x: x,
-          y: y
-        };
-      });
-    }
-  }),
-      moveProps = _useMove.moveProps;
+    case 'discrete':
+      return 'wcag-white border-grey yt-shadow';
 
-  return {
-    position: position,
-    handleProps: moveProps
-  };
+    case 'default':
+    default:
+      return 'wcag-grey-light border-grey';
+  }
 };
 
-var MenuContext = /*#__PURE__*/React.createContext(undefined);
-var useCurrentMenu = function useCurrentMenu() {
-  return React.useContext(MenuContext);
-};
+var Content$2 = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var internalRef = useProxiedRef(ref);
+  var menu = useCurrentMenu();
 
-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,
+  var children = props.children,
+      side = props.placement,
       otherProps = _objectWithoutPropertiesLoose(props, _excluded$a);
 
-  var className = cn('flex ', props.className);
-  return React.createElement(Tag, Object.assign({}, otherProps, {
+  var className = cn('border rounded block outline-none p-1', getAppearanceClasses(menu === null || menu === void 0 ? void 0 : menu.appearance), props.className);
+  return React.createElement(DropdownMenuPrimitive.Content, Object.assign({}, otherProps, {
+    align: "start",
     className: className,
-    "data-taco": "group",
-    ref: ref
-  }));
+    "data-taco": "menu",
+    side: side,
+    sideOffset: 2,
+    style: {
+      minWidth: menu === null || menu === void 0 ? void 0 : menu.minWidth
+    },
+    ref: internalRef
+  }), children);
 });
 
-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 _excluded$b = ["icon", "shortcut"];
+var Icon$1 = function Icon$1(_ref) {
+  var name = _ref.name;
+  return React.createElement("span", {
+    className: "absolute left-0 ml-1"
+  }, React.createElement(Icon, {
+    className: "!h-5 !w-5 -ml-px -mt-px",
+    name: name
   }));
-});
-var Content$2 = /*#__PURE__*/React.forwardRef(function DialogContent(props, ref) {
-  var dialog = useCurrentDialog();
-  var internalRef = useProxiedRef(ref);
+};
 
-  var _useDraggable = useDraggable(internalRef),
-      position = _useDraggable.position,
-      dragHandleProps = _useDraggable.handleProps;
+var getAppearanceClasses$1 = function getAppearanceClasses(appearance) {
+  switch (appearance) {
+    case 'primary':
+      return 'wcag-blue aria-disabled:text-blue-dark focus:wcag-blue-light';
 
-  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 'danger':
+      return 'wcag-red aria-disabled:text-red-dark focus:wcag-red-light';
+
+    case 'ghost':
+      return 'text-blue aria-disabled:text-grey focus:wcag-blue';
+
+    case 'discrete':
+      return 'text-black aria-disabled:text-grey focus:wcag-blue-lightest';
 
+    case 'default':
+    default:
+      return 'wcag-grey-light aria-disabled:text-grey-darker focus:wcag-grey-dark';
+  }
+};
 
+var useItemStyling = function useItemStyling(_ref2) {
+  var disabled = _ref2.disabled,
+      indented = _ref2.indented,
+      className = _ref2.className;
   var menu = useCurrentMenu();
-  var handleCloseAutoFocus;
+  React.useEffect(function () {
+    if (indented && !(menu !== null && menu !== void 0 && menu.indented)) {
+      menu === null || menu === void 0 ? void 0 : menu.registerIndentation();
+    }
+  }, [indented]);
+  return cn('flex items-center justify-start h-7 pr-1.5 relative rounded w-full focus:outline-none group', getAppearanceClasses$1(menu === null || menu === void 0 ? void 0 : menu.appearance), {
+    'pl-7': menu === null || menu === void 0 ? void 0 : menu.indented,
+    'pl-1.5': !(menu !== null && menu !== void 0 && menu.indented),
+    'cursor-pointer': !disabled,
+    'cursor-not-allowed': disabled
+  }, className);
+};
+var Shortcut = function Shortcut(props) {
+  var menu = useCurrentMenu();
+  var appearance;
 
-  if (menu) {
-    handleCloseAutoFocus = function handleCloseAutoFocus() {
-      return menu.close();
-    };
+  switch (menu === null || menu === void 0 ? void 0 : menu.appearance) {
+    case 'primary':
+      appearance = 'text-blue-lightest group-focus:text-black';
+      break;
+
+    case 'danger':
+      appearance = 'text-red-lightest group-focus:text-white';
+      break;
+
+    case 'ghost':
+      appearance = 'text-blue-light group-focus:text-blue-lightest';
+      break;
+
+    case 'discrete':
+      appearance = 'text-grey-darker group-focus:text-blue-light';
+      break;
+
+    case 'default':
+    default:
+      appearance = 'text-grey-darkest';
+      break;
   }
 
-  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 className = cn('ml-auto pl-3', appearance);
+  return React.createElement("span", Object.assign({}, props, {
+    className: className
+  }));
+};
+var Item$1 = /*#__PURE__*/React.forwardRef(function MenuItem(props, ref) {
+  var icon = props.icon,
+      shortcut = props.shortcut,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$b);
 
-  var handleInteractOutside = function handleInteractOutside(event) {
-    return event.preventDefault();
-  };
+  var className = useItemStyling({
+    disabled: props.disabled,
+    indented: !!icon,
+    className: props.className
+  });
+  var handleClick; // radix has a bug that does not disable clicks when disabled is set on items
 
-  var output;
+  if (!otherProps.disabled) {
+    handleClick = props.onClick;
 
-  if (typeof props.children === 'function') {
-    output = props.children({
-      drawer: dialog.drawer,
-      close: dialog.close
-    });
-  } else {
-    output = props.children;
+    if (props['aria-haspopup']) {
+      handleClick = function handleClick(event) {
+        if (props.onClick) {
+          event.persist();
+          props.onClick(event);
+          event.preventDefault();
+        }
+      };
+    }
   }
 
-  return React.createElement(DialogPrimitive.Portal, null, React.createElement(DialogPrimitive.Overlay, {
-    asChild: true
-  }, React.createElement(Backdrop, null, React.createElement(DialogPrimitive.Content, Object.assign({}, props, {
+  return React.createElement(DropdownMenuPrimitive.Item, Object.assign({}, otherProps, {
     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 Drawer = /*#__PURE__*/React.forwardRef(function DialogDrawer(props, ref) {
-  var _dialog$drawer, _dialog$drawer2;
-
-  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',
+    onClick: handleClick,
     ref: ref
-  }));
+  }), icon && React.createElement(Icon$1, {
+    name: icon
+  }), props.children, shortcut && React.createElement(Shortcut, null, shortcut));
 });
 
-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",
+var _excluded$c = ["href", "icon"];
+var Link = /*#__PURE__*/React.forwardRef(function MenuLink(props, ref) {
+  var href = props.href,
+      icon = props.icon,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$c);
+
+  var className = useItemStyling({
+    disabled: props.disabled,
+    indented: !!icon,
+    className: props.className
+  });
+  return React.createElement(DropdownMenuPrimitive.Item, Object.assign({}, otherProps, {
+    asChild: true,
+    className: className,
     ref: ref
-  }));
+  }), React.createElement("a", {
+    href: href,
+    target: "_blank"
+  }, icon && React.createElement(Icon$1, {
+    name: icon
+  }), props.children));
 });
 
-var _excluded$b = ["children", "draggable", "onClose", "open", "size"];
-
-var useSeparatedChildren = function useSeparatedChildren(initialChildren) {
-  return React.useMemo(function () {
-    var children = [];
-    var drawer;
-    var extra;
-    React.Children.forEach(initialChildren, function (child) {
-      if (child.type.displayName === 'Drawer') {
-        drawer = child;
-      } else if (child.type.displayName === 'Extra') {
-        extra = child;
-      } else {
-        children.push(child);
-      }
-    });
-    return [children, drawer, extra];
-  }, [initialChildren]);
-};
-
-var 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 Trigger$1 = /*#__PURE__*/React.forwardRef(function MenuTrigger(props, ref) {
+  var _props$children3, _props$children3$prop;
 
-  var _useSeparatedChildren = useSeparatedChildren(initialChildren),
-      children = _useSeparatedChildren[0],
-      drawer = _useSeparatedChildren[1],
-      extra = _useSeparatedChildren[2];
+  var menu = useCurrentMenu();
+  var internalRef = useProxiedRef(ref);
+  React.useEffect(function () {
+    if (internalRef.current) {
+      menu === null || menu === void 0 ? void 0 : menu.setMinWidth(internalRef.current.getBoundingClientRect().width);
+    }
+  }, [internalRef]); // set the appearance based on the trigger button
 
-  var _React$useState = React.useState(defaultOpen),
-      open = _React$useState[0],
-      setOpen = _React$useState[1];
+  React.useEffect(function () {
+    var _props$children, _props$children$props;
 
-  var _React$useState2 = React.useState(false),
-      drawerOpen = _React$useState2[0],
-      setDrawerOpen = _React$useState2[1];
+    if ((_props$children = props.children) !== null && _props$children !== void 0 && (_props$children$props = _props$children.props) !== null && _props$children$props !== void 0 && _props$children$props.appearance) {
+      var _props$children2, _props$children2$prop;
 
-  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
+      menu === null || menu === void 0 ? void 0 : menu.setAppearance((_props$children2 = props.children) === null || _props$children2 === void 0 ? void 0 : (_props$children2$prop = _props$children2.props) === null || _props$children2$prop === void 0 ? void 0 : _props$children2$prop.appearance);
+    }
+  }, [(_props$children3 = props.children) === null || _props$children3 === void 0 ? void 0 : (_props$children3$prop = _props$children3.props) === null || _props$children3$prop === void 0 ? void 0 : _props$children3$prop.appearance]);
+  return React.createElement(DropdownMenuPrimitive.Trigger, Object.assign({}, props, {
+    asChild: true,
+    ref: internalRef
   }));
 });
-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 _excluded$d = ["checked", "children", "onChange"];
+var Checkbox = function Checkbox(props) {
+  var checked = props.checked,
+      children = props.children,
+      onChange = props.onChange,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$d);
 
-  var close = function close() {
-    onClick(new CustomEvent('hide'));
-  };
+  var className = useItemStyling({
+    disabled: props.disabled,
+    indented: true,
+    className: props.className
+  });
+  return React.createElement(DropdownMenuPrimitive.CheckboxItem, Object.assign({}, otherProps, {
+    className: className,
+    checked: checked,
+    onCheckedChange: onChange
+  }), React.createElement(DropdownMenuPrimitive.ItemIndicator, {
+    className: "absolute left-0 ml-1.5"
+  }, React.createElement(Icon, {
+    name: "tick",
+    className: "!h-4 !w-4 -ml-px"
+  })), children);
+};
 
-  return children({
-    close: close,
-    ref: ref
+var _excluded$e = ["children", "value"],
+    _excluded2$1 = ["children", "defaultValue", "disabled", "invalid", "onChange", "orientation", "value"];
+var getRadioGroupItemValueAsString = function getRadioGroupItemValueAsString(value) {
+  return value === null ? '' : String(value);
+};
+var findByValue = function findByValue(values, valueAsString) {
+  return values.find(function (value) {
+    return getRadioGroupItemValueAsString(value) === valueAsString;
   });
+};
+var RadioGroupContext = /*#__PURE__*/React.createContext({
+  disabled: false,
+  invalid: false
 });
-var Content$3 = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var className = cn('bg-white focus:border-blue-light', props.className);
-  var output;
+var RadioGroupItem = /*#__PURE__*/React.forwardRef(function RadioGroupItem(props, ref) {
+  var context = React.useContext(RadioGroupContext);
 
-  if (typeof props.children === 'function') {
-    output = React.createElement(PopoverPrimitive.Close, {
-      asChild: true
-    }, React.createElement(RenderPropWrapper, null, props.children));
-  } else {
-    output = props.children;
-  }
+  var children = props.children,
+      value = props.value,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$e);
 
-  return React.createElement(UnstyledContent, {
+  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 ', {
+    'border-grey-dark focus:border-blue focus:yt-focus aria-checked:bg-blue aria-checked:border-blue': !disabled && !context.invalid,
+    'border-grey cursor-not-allowed aria-checked:bg-grey-dark aria-checked:border-grey-dark': disabled,
+    'border-red text-red focus:border-red focus:yt-focus-red aria-checked:bg-red aria-checked:border-red': context.invalid && !disabled
+  });
+  var labelClassName = cn('flex items-center cursor-pointer', {
+    'cursor-not-allowed text-grey-dark': disabled
+  });
+  return React.createElement("label", {
+    className: labelClassName
+  }, React.createElement(RadioGroupPrimitive.Item, Object.assign({}, otherProps, {
     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, {
+    disabled: disabled,
     ref: ref,
-    asChild: true
-  }));
+    value: getRadioGroupItemValueAsString(value)
+  }), React.createElement(RadioGroupPrimitive.Indicator, {
+    className: "h-2 w-2 rounded-full bg-white"
+  })), children);
 });
-var Popover = /*#__PURE__*/React.forwardRef(function (props, ref) {
+var useRadioGroup = function useRadioGroup(props) {
   var children = props.children,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$c);
+      defaultValue = props.defaultValue,
+      disabled = props.disabled,
+      invalid = props.invalid,
+      onChange = props.onChange,
+      _props$orientation = props.orientation,
+      orientation = _props$orientation === void 0 ? 'vertical' : _props$orientation,
+      value = props.value,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded2$1);
 
+  var values = React.useMemo(function () {
+    var radioGroupItemValues = [];
+    React.Children.forEach(children, function (child) {
+      if (React.isValidElement(child)) {
+        radioGroupItemValues.push(child.props.value);
+      }
+    });
+    return radioGroupItemValues;
+  }, [children]);
   var context = React.useMemo(function () {
     return {
-      props: otherProps,
-      ref: ref
+      disabled: disabled !== null && disabled !== void 0 ? disabled : false,
+      invalid: invalid !== null && invalid !== void 0 ? invalid : false
     };
-  }, [otherProps]);
-  return React.createElement(PopoverContext.Provider, {
+  }, [disabled, invalid]);
+  var valueProps;
+
+  if (onChange !== undefined) {
+    var handleChange = function handleChange(value) {
+      return onChange(findByValue(values, value));
+    };
+
+    valueProps = {
+      onValueChange: handleChange,
+      value: value !== undefined ? getRadioGroupItemValueAsString(value) : undefined
+    };
+  } else {
+    valueProps = {
+      defaultValue: defaultValue !== undefined ? getRadioGroupItemValueAsString(defaultValue) : undefined
+    };
+  }
+
+  return {
+    context: context,
+    props: _extends({}, otherProps, valueProps, {
+      children: children,
+      orientation: orientation
+    })
+  };
+};
+var RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(props, ref) {
+  var _useRadioGroup = useRadioGroup(props),
+      context = _useRadioGroup.context,
+      otherProps = _useRadioGroup.props;
+
+  var className = cn('flex items-start', {
+    'flex-wrap space-x-4': otherProps.orientation === 'horizontal',
+    'flex-col space-y-2': otherProps.orientation === 'vertical'
+  }, otherProps.className);
+  return React.createElement(RadioGroupContext.Provider, {
     value: context
-  }, React.createElement(PopoverPrimitive.Root, {
-    children: children
-  }));
+  }, React.createElement(RadioGroupPrimitive.Root, Object.assign({}, otherProps, {
+    className: className,
+    "data-taco": "radio-group",
+    ref: ref
+  })));
 });
-Popover.Trigger = Trigger$2;
-Popover.Content = Content$3;
-Popover.Close = Close$2;
+RadioGroup.Item = RadioGroupItem;
 
-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 _excluded$f = ["children", "value"];
+var RadioItem = function RadioItem(props) {
+  var context = React.useContext(MenuRadioGroupContext);
+
+  var children = props.children,
+      value = props.value,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$f);
+
+  var disabled = context.disabled || props.disabled;
+  var className = useItemStyling({
+    disabled: disabled,
+    indented: true,
+    className: props.className
+  });
+  return React.createElement(DropdownMenuPrimitive.RadioItem, Object.assign({}, otherProps, {
+    className: className,
+    disabled: disabled,
+    value: getRadioGroupItemValueAsString(value)
+  }), React.createElement(DropdownMenuPrimitive.ItemIndicator, {
+    className: "absolute left-0 ml-1.5"
+  }, React.createElement("span", {
+    className: "flex h-1.5 w-1.5 ml-1 rounded-full bg-current "
+  })), children);
 };
-var getAppearanceClasses = function getAppearanceClasses(value, icon) {
-  if (icon === void 0) {
-    icon = false;
-  }
+var MenuRadioGroupContext = /*#__PURE__*/React.createContext({
+  disabled: false
+});
+var RadioGroup$1 = function RadioGroup(props) {
+  var _useRadioGroup = useRadioGroup(props),
+      context = _useRadioGroup.context,
+      otherProps = _useRadioGroup.props;
 
-  switch (value) {
+  var className = cn('flex flex-col', props.className);
+  return React.createElement(MenuRadioGroupContext.Provider, {
+    value: context
+  }, React.createElement(DropdownMenuPrimitive.RadioGroup, Object.assign({}, otherProps, {
+    className: className
+  })));
+};
+RadioGroup$1.Item = RadioItem;
+
+var getAppearanceClasses$2 = function getAppearanceClasses(appearance) {
+  switch (appearance) {
     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";
+      return 'bg-blue-lighe';
 
     case 'danger':
-      return "yt-red-solid border-red\n                focus:bg-red focus:text-white focus:yt-focus-red\n                active:bg-red-dark active:text-white \n                hover:bg-red-light hover:text-white\n                hover:focus:bg-red-light hover:focus:text-white\n                disabled:hover:yt-red-solid";
+      return 'bg-red-light';
 
     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";
+      return 'bg-blue-light';
 
     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";
-      }
+      return 'bg-grey-dark';
 
+    case 'default':
     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";
+      return 'bg-grey-dark';
   }
 };
-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
-  }));
+var Separator = function Separator() {
+  var menu = useCurrentMenu();
+  var className = cn('h-px  my-1', getAppearanceClasses$2(menu === null || menu === void 0 ? void 0 : menu.appearance));
+  return React.createElement(DropdownMenuPrimitive.Separator, {
+    className: className
+  });
+};
 
-  if (hanger) {
-    button = React__default.createElement(Hanger, Object.assign({}, hanger.props), React__default.createElement(Hanger.Anchor, null, button), hanger.props.children);
-  }
+var getAppearanceClasses$3 = function getAppearanceClasses(appearance) {
+  switch (appearance) {
+    case 'primary':
+      return 'text-blue-lighest';
 
-  if (dialog) {
-    button = React__default.createElement(Dialog, Object.assign({}, dialog.props), React__default.createElement(Dialog.Trigger, null, button), dialog.props.children);
-  }
+    case 'danger':
+      return 'text-red-lightest';
 
-  if (popover) {
-    button = React__default.createElement(Popover, Object.assign({}, popover.props), React__default.createElement(Popover.Trigger, null, button), popover.props.children);
-  }
+    case 'ghost':
+      return 'text-blue-light';
 
-  if (tooltip) {
-    button = React__default.createElement(Tooltip, {
-      title: tooltip
-    }, button);
-  }
+    case 'discrete':
+      return 'text-grey-darkest';
 
-  return button;
+    case 'default':
+    default:
+      return 'text-grey-darkest';
+  }
 };
 
-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
+var Header = function Header(props) {
+  var menu = useCurrentMenu();
+  var className = cn('flex items-center justify-start h-6 pr-1.5 text-xs', getAppearanceClasses$3(menu === null || menu === void 0 ? void 0 : menu.appearance), {
+    'pl-7': menu === null || menu === void 0 ? void 0 : menu.indented,
+    'pl-1.5': !(menu !== null && menu !== void 0 && menu.indented)
   }, props.className);
+  return React.createElement(DropdownMenuPrimitive.Label, Object.assign({}, props, {
+    className: 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 Menu = function Menu(props) {
+  var _React$useState = React.useState(false),
+      open = _React$useState[0],
+      setOpen = _React$useState[1];
 
-  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 _React$useState2 = React.useState('default'),
+      appearance = _React$useState2[0],
+      _setAppearance = _React$useState2[1];
 
-var _excluded$g = ["onChange", "value"];
+  var _React$useState3 = React.useState(false),
+      indented = _React$useState3[0],
+      setIndented = _React$useState3[1];
 
-var renderDay = function renderDay(day, modifiers) {
-  return modifiers.disabled ? React.createElement("span", {
-    className: "dot"
-  }) : day.getDate();
-};
+  var _React$useState4 = React.useState(undefined),
+      minWidth = _React$useState4[0],
+      _setMinWidth = _React$useState4[1];
 
-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 context = React.useMemo(function () {
+    return {
+      appearance: appearance,
+      setAppearance: function setAppearance(appearance) {
+        return _setAppearance(appearance);
+      },
+      indented: indented,
+      registerIndentation: function registerIndentation() {
+        return setIndented(true);
+      },
+      minWidth: minWidth,
+      setMinWidth: function setMinWidth(width) {
+        return _setMinWidth(width);
+      },
+      close: function close() {
+        return setOpen(false);
+      }
+    };
+  }, [indented, minWidth, appearance]);
+  return React.createElement(MenuContext.Provider, {
+    value: context
+  }, React.createElement(DropdownMenuPrimitive.Root, Object.assign({}, props, {
+    open: open,
+    onOpenChange: setOpen
   })));
+};
+Menu.Trigger = Trigger$1;
+Menu.Content = Content$2;
+Menu.Item = Item$1;
+Menu.Link = Link;
+Menu.Checkbox = Checkbox;
+Menu.Separator = Separator;
+Menu.Header = Header;
+Menu.RadioGroup = RadioGroup$1;
+
+/* eslint-disable @typescript-eslint/no-empty-function */
+var DialogContext = /*#__PURE__*/React.createContext({
+  closeOnEscape: true,
+  close: function close() {},
+  draggable: false,
+  drawer: undefined,
+  elements: {
+    drawer: undefined,
+    extra: undefined
+  },
+  onClose: function onClose() {},
+  props: {},
+  ref: null,
+  showCloseButton: true,
+  size: 'sm'
 });
-var Calendar$1 = /*#__PURE__*/React.forwardRef(function Calendar(props, ref) {
-  var handleChange = props.onChange,
-      value = props.value,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$g);
+var useCurrentDialog = function useCurrentDialog() {
+  return React.useContext(DialogContext);
+};
 
-  var _useLocalization2 = useLocalization(),
-      locale = _useLocalization2.locale,
-      texts = _useLocalization2.texts;
+var Trigger$2 = /*#__PURE__*/React.forwardRef(function DialogTrigger(props, ref) {
+  var dialog = useCurrentDialog();
+  return React.createElement(DialogPrimitive.Trigger, Object.assign({}, dialog.props, props, {
+    ref: mergeRefs([dialog.ref, ref]),
+    asChild: true
+  }));
+});
 
-  var _React$useState = React.useState(value !== null && value !== void 0 ? value : new Date()),
-      visibleMonth = _React$useState[0],
-      setVisibleMonth = _React$useState[1];
+var useDraggable = function useDraggable(ref) {
+  var _React$useState = React__default.useState({
+    x: 0,
+    y: 0
+  }),
+      position = _React$useState[0],
+      setPosition = _React$useState[1];
 
-  React.useEffect(function () {
-    if (visibleMonth !== value) {
-      setVisibleMonth(value !== null && value !== void 0 ? value : new Date());
-    }
-  }, [value]);
+  var _useMove = interactions.useMove({
+    onMove: function onMove(event) {
+      var _ref$current;
 
-  var handleDayClick = function handleDayClick(date, modifiers, event) {
-    if (modifiers.outside || modifiers.disabled) {
-      return;
-    }
+      var rect = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.getBoundingClientRect(); // Prevent dragging out of bounds
 
-    handleChange(date, event);
-  };
+      // 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 handleCalendarClickToday = function handleCalendarClickToday() {
-    var today = new Date(); // set to midday to avoid UTC offset causing dates to be mismatched server side
+      setPosition(function (_ref) {
+        var x = _ref.x,
+            y = _ref.y;
+        x += event.deltaX;
+        y += event.deltaY;
+        return {
+          x: x,
+          y: y
+        };
+      });
+    }
+  }),
+      moveProps = _useMove.moveProps;
 
-    today.setHours(12);
-    today.setMinutes(0);
-    today.setSeconds(0);
-    handleChange(today);
+  return {
+    position: position,
+    handleProps: moveProps
   };
+};
 
-  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, {
+var Title = /*#__PURE__*/React.forwardRef(function DialogTitle(props, ref) {
+  var className = cn('text-center', props.className);
+  return React.createElement(DialogPrimitive.Title, Object.assign({}, props, {
     className: className,
-    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 Footer = /*#__PURE__*/React.forwardRef(function DialogFooter(props, ref) {
+  var className = cn('mt-8 flex justify-end', props.className);
+  return React.createElement("div", Object.assign({}, props, {
+    className: className,
+    ref: ref
+  }), props.children);
+});
+var Close$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$3 = /*#__PURE__*/React.forwardRef(function DialogContent(props, ref) {
+  var dialog = useCurrentDialog();
+  var internalRef = useProxiedRef(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 _useDraggable = useDraggable(internalRef),
+      position = _useDraggable.position,
+      dragHandleProps = _useDraggable.handleProps;
 
-  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;
+  var _useLocalization = useLocalization(),
+      texts = _useLocalization.texts; // if the dialog was opened by a menu, we need to close the menu when the dialog closes
+  // the menu is still open (and mounted) because it is the trigger for the dialog
 
-  if (onChange) {
-    handleChange = function handleChange(checked) {
-      return onChange(checked === 'indeterminate' ? false : checked);
+
+  var menu = useCurrentMenu();
+  var handleCloseAutoFocus;
+
+  if (menu) {
+    handleCloseAutoFocus = function handleCloseAutoFocus() {
+      return menu.close();
     };
   }
 
-  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"
-  })));
+  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);
 
-  if (label) {
-    var labelClassName = cn('flex items-center cursor-pointer', {
-      'cursor-not-allowed text-grey-dark': props.disabled
+  var handleEscapeKeyDown = function handleEscapeKeyDown(event) {
+    if (!dialog.closeOnEscape) {
+      event.preventDefault();
+    } else if (dialog.onClose) {
+      dialog.onClose();
+    }
+  }; // the chosen behaviour in taco is that outside clicks do not close the dialog
+
+
+  var handleInteractOutside = function handleInteractOutside(event) {
+    return event.preventDefault();
+  };
+
+  var output;
+
+  if (typeof props.children === 'function') {
+    output = props.children({
+      drawer: dialog.drawer,
+      close: dialog.close
     });
-    return React.createElement("label", {
-      className: labelClassName
-    }, element, label);
+  } else {
+    output = props.children;
   }
 
-  return element;
+  return React.createElement(DialogPrimitive.Portal, null, React.createElement(DialogPrimitive.Overlay, {
+    asChild: true
+  }, React.createElement(Backdrop, null, React.createElement(DialogPrimitive.Content, Object.assign({}, props, {
+    className: className,
+    onEscapeKeyDown: handleEscapeKeyDown,
+    onInteractOutside: handleInteractOutside,
+    onCloseAutoFocus: handleCloseAutoFocus,
+    ref: ref,
+    style: _extends({}, props.style, {
+      left: dialog.draggable ? "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"
+  })), dialog.showCloseButton ? 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"
+  })) : null), dialog.elements.drawer, dialog.elements.extra))));
 });
 
-var getInputClasses = function getInputClasses(props) {
-  var _cn;
+var Drawer = /*#__PURE__*/React.forwardRef(function DialogDrawer(props, ref) {
+  var _dialog$drawer, _dialog$drawer2;
 
-  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 dialog = useCurrentDialog();
+  var className = cn('absolute top-0 z-[998] -ml-[4px] hidden h-full w-full overflow-y-auto rounded-r bg-white p-6 text-left', props.className);
+  return React.createElement(framerMotion.motion.div, Object.assign({}, props, {
+    className: className,
+    "data-taco": "dialog-drawer",
+    "aria-hidden": !((_dialog$drawer = dialog.drawer) !== null && _dialog$drawer !== void 0 && _dialog$drawer.open),
+    variants: {
+      visible: {
+        left: '100%',
+        display: 'block',
+        transition: {
+          ease: 'easeOut',
+          duration: 0.2
+        }
+      },
+      hidden: {
+        left: '0%',
+        transition: {
+          ease: 'easeOut',
+          duration: 0.2
+        },
+        transitionEnd: {
+          display: 'none'
+        }
+      }
+    },
+    animate: (_dialog$drawer2 = dialog.drawer) !== null && _dialog$drawer2 !== void 0 && _dialog$drawer2.open ? 'visible' : 'hidden',
+    ref: ref
+  }));
+});
+
+var Extra = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var className = cn('bg-grey-light yt-shadow-inset absolute top-full left-0 -mt-px w-full rounded-t-none rounded-b p-6 text-left', props.className);
+  return React.createElement("div", Object.assign({}, props, {
+    className: className,
+    "data-taco": "dialog-extra",
+    ref: ref
+  }));
+});
+
+var _excluded$g = ["children", "closeOnEscape", "draggable", "onClose", "open", "showCloseButton", "size"];
+
+var useSeparatedChildren = function useSeparatedChildren(initialChildren) {
+  return React.useMemo(function () {
+    var children = [];
+    var drawer;
+    var extra;
+    React.Children.forEach(initialChildren, function (child) {
+      if (child.type.displayName === 'Drawer') {
+        drawer = child;
+      } else if (child.type.displayName === 'Extra') {
+        extra = child;
+      } else {
+        children.push(child);
+      }
+    });
+    return [children, drawer, extra];
+  }, [initialChildren]);
 };
-var 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';
+var Dialog = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var initialChildren = props.children,
+      _props$closeOnEscape = props.closeOnEscape,
+      closeOnEscape = _props$closeOnEscape === void 0 ? true : _props$closeOnEscape,
+      _props$draggable = props.draggable,
+      draggable = _props$draggable === void 0 ? false : _props$draggable,
+      onClose = props.onClose,
+      defaultOpen = props.open,
+      _props$showCloseButto = props.showCloseButton,
+      showCloseButton = _props$showCloseButto === void 0 ? true : _props$showCloseButto,
+      _props$size = props.size,
+      size = _props$size === void 0 ? 'sm' : _props$size,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$g);
 
-    case 'warning':
-      return 'border-yellow-dark hover:shadow-[0_0_0.15rem_theme(colors.yellow.dark)] focus:yt-focus-yellow active:border-yellow-dark';
+  var _useSeparatedChildren = useSeparatedChildren(initialChildren),
+      children = _useSeparatedChildren[0],
+      drawer = _useSeparatedChildren[1],
+      extra = _useSeparatedChildren[2];
 
-    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';
+  var _React$useState = React.useState(defaultOpen),
+      open = _React$useState[0],
+      setOpen = _React$useState[1];
 
-    default:
-      return 'border-grey-dark hover:shadow-[0_0_0.1rem_theme(colors.grey.darker)] focus:border-blue-light focus:yt-focus active:border-blue-dark';
-  }
-};
-var getButtonStateClasses = function getButtonStateClasses(value) {
-  switch (value) {
-    case 'success':
-      return '!border-green focus:!border-green-light focus:yt-focus-green peer-focus:!border-green-light peer-focus:peer-active:!border-green-dark';
+  var _React$useState2 = React.useState(false),
+      drawerOpen = _React$useState2[0],
+      setDrawerOpen = _React$useState2[1];
 
-    case 'error':
-      return '!border-red focus:!border-red-light focus:yt-focus-red peer-focus:!border-red-light peer-focus:peer-active:!border-red-dark';
+  var context = React.useMemo(function () {
+    return {
+      close: function close() {
+        return setOpen(false);
+      },
+      closeOnEscape: closeOnEscape,
+      draggable: draggable,
+      drawer: {
+        open: drawerOpen,
+        toggle: function toggle() {
+          return setDrawerOpen(function (isDrawerOpen) {
+            return !isDrawerOpen;
+          });
+        }
+      },
+      elements: {
+        drawer: drawer,
+        extra: extra
+      },
+      onClose: onClose,
+      props: otherProps,
+      showCloseButton: showCloseButton,
+      size: size,
+      ref: ref
+    };
+  }, [closeOnEscape, drawerOpen, draggable, drawer, extra, open, otherProps, showCloseButton]);
+  return React.createElement(DialogContext.Provider, {
+    value: context
+  }, React.createElement(DialogPrimitive.Root, {
+    children: children,
+    open: open,
+    onOpenChange: setOpen
+  }));
+});
+Dialog.Trigger = Trigger$2;
+Dialog.Content = Content$3;
+Dialog.Title = Title;
+Dialog.Footer = Footer;
+Dialog.Extra = Extra;
+Dialog.Drawer = Drawer;
+Dialog.Close = Close$1;
 
-    case 'warning':
-      return '!border-yellow-dark focus:!border-yellow-dark focus:yt-focus-yellow peer-focus:peer-active:!border-yellow-dark';
+var _excluded$h = ["children"];
+var PopoverContext = /*#__PURE__*/React.createContext({
+  props: {},
+  ref: null
+});
+var Trigger$3 = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _props$children;
 
-    case 'information':
-      return '!border-blue focus:!border-blue-light peer-focus:!border-blue-light peer-focus:peer-active:!border-blue-dark';
+  var context = React.useContext(PopoverContext);
+  var children = props.children;
 
-    default:
-      return '!border-grey-dark focus:!border-blue-light peer-focus:!border-blue-light peer-focus:peer-active:!border-blue-dark';
+  if (React.isValidElement(props.children) && typeof ((_props$children = props.children) === null || _props$children === void 0 ? void 0 : _props$children.type) === 'function') {
+    console.warn("Popover.Trigger requires its child to forwardRef so that it can attach to the dom element. Did you mean to wrap '" + props.children.type.name + "' in React.forwardRef()? Taco has wrapped '" + props.children.type.name + "' in a 'span' to maintain functionality, but this may cause unintended behaviour");
+    children = React.createElement("span", null, props.children);
   }
-};
-
-var _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
+  return React.createElement(PopoverPrimitive.Trigger, Object.assign({}, context.props, props, {
+    children: children,
+    ref: mergeRefs([context.ref, ref]),
+    asChild: true
   }));
+});
+var RenderPropWrapper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+      onClick = _ref.onClick;
 
-  if (hasContainer) {
-    var extra;
-
-    if (button) {
-      var _button$props$disable, _cn;
+  var close = function close() {
+    onClick(new CustomEvent('hide'));
+  };
 
-      var disabled = (_button$props$disable = button.props.disabled) !== null && _button$props$disable !== void 0 ? _button$props$disable : otherProps.disabled;
-      var buttonClassName = cn('items-center flex justify-center border absolute rounded-l-none rounded-r right-0 h-full focus:rounded focus:outline-none', (_cn = {}, _cn[getButtonStateClasses(state)] = !props.disabled, _cn), button.props.className);
-      extra = React.cloneElement(button, {
-        className: buttonClassName,
-        disabled: disabled
-      });
-    } else if (icon) {
-      var iconClassName = cn('items-center flex justify-center absolute pointer-events-none mr-1 p-px right-0 w-5 top-1/2 -translate-y-1/2', {
-        'text-grey-dark': props.disabled,
-        'text-grey-darkest': !props.disabled
-      });
-      extra = typeof icon === 'string' ? React.createElement(Icon, {
-        className: iconClassName,
-        name: icon
-      }) : React.cloneElement(icon, {
-        className: cn(iconClassName, icon.props.className)
-      });
-    }
+  return children({
+    close: close,
+    ref: ref
+  });
+});
+var Content$4 = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var className = cn('bg-white focus:border-blue-light', props.className);
+  var output;
 
-    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);
+  if (typeof props.children === 'function') {
+    output = React.createElement(PopoverPrimitive.Close, {
+      asChild: true
+    }, React.createElement(RenderPropWrapper, null, props.children));
+  } else {
+    output = props.children;
   }
 
-  return input;
+  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$h);
 
-var getNextIndexFromKeycode = function getNextIndexFromKeycode(keyCode, length, index, direction) {
-  if (direction === void 0) {
-    direction = 'vertical';
+  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$3;
+Popover.Content = Content$4;
+Popover.Close = Close$2;
+
+var _excluded$i = ["dialog", "hanger", "menu", "popover", "tooltip"];
+var getButtonClasses = function getButtonClasses() {
+  return 'min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] leading-6 inline-flex items-center justify-center transition-all delay-100 ease-in border';
+};
+var getAppearanceClasses$4 = function getAppearanceClasses(value, icon) {
+  if (icon === void 0) {
+    icon = false;
   }
 
-  var previousKey = direction === 'horizontal' ? 'left' : 'up';
-  var nextKey = direction === 'horizontal' ? 'right' : 'down';
+  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";
 
-  switch (keyCode) {
-    case keycode(previousKey):
-      return index !== undefined ? index - 1 < 0 ? 0 : index - 1 : index;
+    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 keycode(nextKey):
-      return index !== undefined ? index + 1 >= length ? index : index + 1 : index;
+    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 keycode('home'):
-      return 0;
+    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";
+        }
 
-    case keycode('end'):
-      return length - 1;
+        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;
+      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 useListKeyboardNavigation = function useListKeyboardNavigation(length, options) {
-  if (length === void 0) {
-    length = 0;
-  }
+var createButton = function createButton(props, className, ref) {
+  var dialog = props.dialog,
+      hanger = props.hanger,
+      menu = props.menu,
+      popover = props.popover,
+      tooltip = props.tooltip,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$i);
 
-  if (options === void 0) {
-    options = {
-      direction: 'vertical'
-    };
+  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);
   }
 
-  var _React$useState = React__default.useState(options.initialIndex),
-      index = _React$useState[0],
-      setIndex = _React$useState[1];
+  if (menu) {
+    button = React__default.createElement(Menu, Object.assign({}, menu.props), React__default.createElement(Menu.Trigger, null, button), menu.props.children);
+  }
 
-  var getNextIndex = function getNextIndex(event) {
-    var nextIndex = getNextIndexFromKeycode(event.keyCode, length, index, options.direction);
+  if (dialog) {
+    button = React__default.createElement(Dialog, Object.assign({}, dialog.props), React__default.createElement(Dialog.Trigger, null, button), dialog.props.children);
+  }
 
-    if (nextIndex !== undefined) {
-      event.preventDefault();
-    }
+  if (popover) {
+    button = React__default.createElement(Popover, Object.assign({}, popover.props), React__default.createElement(Popover.Trigger, null, button), popover.props.children);
+  }
 
-    return nextIndex;
-  };
+  if (tooltip) {
+    button = React__default.createElement(Tooltip, {
+      title: tooltip
+    }, button);
+  }
 
-  return [index, setIndex, getNextIndex];
+  return button;
 };
 
-var scrollToChildElement = function scrollToChildElement(parent, child) {
-  var clientHeight = parent.clientHeight;
+var _excluded$j = ["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$j);
 
-  if (parent.scrollHeight > clientHeight) {
-    var scrollTop = parent.scrollTop;
-    var scrollBottom = clientHeight + scrollTop;
-    var childBottom = child.offsetTop + child.offsetHeight;
+  var className = cn(getButtonClasses(), getAppearanceClasses$4(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 (childBottom > scrollBottom) {
-      parent.scrollTop = childBottom - clientHeight;
-    } else if (child.offsetTop < scrollTop) {
-      parent.scrollTop = child.offsetTop;
-    }
+  if (!icon) {
+    return null;
   }
-};
 
-var useListScrollTo = function useListScrollTo(internalRef, itemRefs) {
-  var scrollTo = function scrollTo(index) {
-    if (internalRef && internalRef.current) {
-      if (index !== undefined) {
-        var activeRef = itemRefs[index];
+  return createButton(_extends({}, otherProps, {
+    children: React.createElement(Icon, {
+      name: icon,
+      className: "m-0 p-0"
+    }),
+    'data-taco': 'icon-button'
+  }), className, ref);
+});
 
-        if (activeRef && activeRef.current) {
-          scrollToChildElement(internalRef.current, activeRef.current);
-        }
-      } else {
-        internalRef.current.scrollTop = 0;
-      }
-    }
-  };
+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);
+});
 
-  return {
-    scrollTo: scrollTo
-  };
-};
+var _excluded$k = ["appearance", "fluid"];
+var Button$1 = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
+  var appearance = props.appearance,
+      fluid = props.fluid,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$k);
 
-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 className = cn(getButtonClasses(), getAppearanceClasses$4(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$l = ["onChange", "value"];
+
+var renderDay = function renderDay(day, modifiers) {
+  return modifiers.disabled ? React.createElement("span", {
+    className: "dot"
+  }) : day.getDate();
 };
 
-var getNextEnabledItem = function getNextEnabledItem(event, data, index) {
-  var nextIndex = getNextIndexFromKeycode(event.keyCode, data.length, index);
+var thisYear = /*#__PURE__*/new Date().getFullYear();
+var years = [];
 
-  if (nextIndex) {
-    if (nextIndex === index) {
-      return index;
-    } else if (data[nextIndex] && data[nextIndex].disabled) {
-      return getNextEnabledItem(event, data, nextIndex);
-    }
-  }
+for (var i = thisYear - 10; i <= thisYear + 10; i += 1) {
+  years.push(i);
+}
 
-  return nextIndex;
-};
+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 ScrollableList = /*#__PURE__*/React.forwardRef(function ScrollableList(props, ref) {
-  var data = props.data,
-      disabled = props.disabled,
-      id = props.id,
+  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$l);
+
+  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$m = ["checked", "highlighted", "indeterminate", "invalid", "label", "onChange"];
+var Checkbox$1 = /*#__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$m);
+
+  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$n = ["button", "icon", "highlighted", "state", "autoFocus"];
+var Input = /*#__PURE__*/React.forwardRef(function Input(props, ref) {
+  var button = props.button,
+      icon = props.icon,
+      state = props.state,
+      autoFocus = props.autoFocus,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$n);
+
+  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$o = ["data", "disabled", "highlighted", "id", "loading", "onChange", "onClick", "onFocus", "onKeyDown", "readOnly", "scrollOnFocus", "state", "value", "multiselect", "selectedIndexes", "allOptionsSelected"],
+    _excluded2$2 = ["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,
@@ -4888,7 +5415,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$j);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$o);
 
   var listRef = useProxiedRef(ref);
   var itemRefs = React.useMemo(function () {
@@ -5003,11 +5530,11 @@ var ScrollableList = /*#__PURE__*/React.forwardRef(function ScrollableList(props
   })), React.createElement("span", null, texts.listbox.loading)) : options.length ? options.map(function (_ref) {
     var children = _ref.children,
         icon = _ref.icon,
-        optionProps = _objectWithoutPropertiesLoose(_ref, _excluded2$1);
+        optionProps = _objectWithoutPropertiesLoose(_ref, _excluded2$2);
 
     return React.createElement("li", Object.assign({}, optionProps), icon, React.createElement("span", {
       className: "flex-grow truncate text-left"
-    }, children), multiselect && React.createElement(Checkbox, {
+    }, children), multiselect && React.createElement(Checkbox$1, {
       checked: optionProps['aria-selected'],
       onChange: function onChange() {
         return null;
@@ -5070,7 +5597,7 @@ var setInputValueByRef = function setInputValueByRef(input, value, event) {
   input.dispatchEvent(createCustomEvent(event));
 };
 
-var _excluded$k = ["hasChildren", "path"];
+var _excluded$p = ["hasChildren", "path"];
 var setInputValueByRef$1 = function setInputValueByRef$1(input, value, event) {
   if (event === void 0) {
     event = 'change';
@@ -5099,7 +5626,7 @@ var getSelectedIndexesFromValue = function getSelectedIndexesFromValue(data, val
     return v !== -1;
   });
 };
-var findByValue = function findByValue(data, value) {
+var findByValue$1 = function findByValue(data, value) {
   return data.find(function (option) {
     return getValue(option.value) === getValue(value);
   });
@@ -5188,7 +5715,7 @@ var useFlattenedData = function useFlattenedData(data) {
 };
 var sanitizeItem = function sanitizeItem(item) {
   if (item) {
-    var rest = _objectWithoutPropertiesLoose(item, _excluded$k);
+    var rest = _objectWithoutPropertiesLoose(item, _excluded$p);
 
     return rest;
   }
@@ -5252,7 +5779,10 @@ var filterData = function filterData(data, value) {
   });
 };
 
-var _excluded$l = ["aria-label", "aria-labelledby", "data", "defaultValue", "disabled", "id", "inline", "loading", "onChange", "onClick", "onKeyDown", "readOnly", "value"];
+var _excluded$q = ["aria-label", "aria-labelledby", "data", "defaultValue", "disabled", "id", "inline", "loading", "onChange", "onClick", "onKeyDown", "onSearch", "readOnly", "value"];
+var debouncer = /*#__PURE__*/debounce(function (f) {
+  return f();
+}, 200);
 
 var convertToInputValue = function convertToInputValue(value) {
   return String(value !== null && value !== void 0 ? value : '');
@@ -5268,9 +5798,10 @@ var useCombobox = function useCombobox(_ref, ref) {
       onChange = _ref.onChange,
       onClick = _ref.onClick,
       onKeyDown = _ref.onKeyDown,
+      onSearch = _ref.onSearch,
       readOnly = _ref.readOnly,
       value = _ref.value,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
 
   var inputRef = useProxiedRef(ref);
   var listRef = React.useRef(null);
@@ -5287,7 +5818,7 @@ var useCombobox = function useCombobox(_ref, ref) {
       inputValue = _React$useState2[0],
       setInputValue = _React$useState2[1];
 
-  var shouldFilterData = !inline || inline && inputValue !== convertToInputValue(value);
+  var shouldFilterData = !onSearch && (!inline || inline && inputValue !== convertToInputValue(value));
   var flattenedData = useFlattenedData(unfilteredData);
   var data = React.useMemo(function () {
     return shouldFilterData ? filterData(flattenedData, inputValue) : flattenedData;
@@ -5333,7 +5864,14 @@ var useCombobox = function useCombobox(_ref, ref) {
     if (value !== undefined && value !== inputValue) {
       setInputValue(convertToInputValue(value));
     }
-  }, [value]); // show listbox based on input value
+  }, [value]);
+  React.useEffect(function () {
+    if (onSearch) {
+      debouncer(function () {
+        onSearch(inputValue);
+      });
+    }
+  }, [inputValue]); // show listbox based on input value
 
   React.useEffect(function () {
     // don't show the popover if the internal (input) value already is the current value
@@ -5367,7 +5905,7 @@ var useCombobox = function useCombobox(_ref, ref) {
     }
 
     if (onChange && event.target.value !== value) {
-      var item = findByValue(flattenedData, event.target.value);
+      var item = findByValue$1(flattenedData, event.target.value);
       event.detail = sanitizeItem(item);
       var parents = getOptionParents(flattenedData, item === null || item === void 0 ? void 0 : item.path);
 
@@ -5564,11 +6102,11 @@ var useBoundingClientRectListener = function useBoundingClientRectListener(ref)
   return dimensions;
 };
 
-var _excluded$m = ["className", "style"];
+var _excluded$r = ["className", "style"];
 var Combobox = /*#__PURE__*/React.forwardRef(function Combobox(props, ref) {
   var externalClassName = props.className,
       style = props.style,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$m);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$r);
 
   var _useCombobox = useCombobox(otherProps, ref),
       combobox = _useCombobox.combobox,
@@ -5711,13 +6249,13 @@ var parseFromISOString = function parseFromISOString(date) {
   return dateFns.isValid(tempDate) ? parseFromCustomString(format(new Date(date))) : undefined;
 };
 
-var _excluded$n = ["defaultValue", "calendar", "onBlur", "onChange", "value"];
+var _excluded$s = ["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);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
 
   var inputRef = useProxiedRef(ref);
 
@@ -5788,7 +6326,7 @@ var useDatepicker = function useDatepicker(_ref, ref) {
   };
 };
 
-var _excluded$o = ["className", "onReset", "style", "shortcuts", "shortcutsText"];
+var _excluded$t = ["className", "onReset", "style", "shortcuts", "shortcutsText"];
 var Datepicker = /*#__PURE__*/React.forwardRef(function Datepicker(props, ref) {
   var _input$disabled;
 
@@ -5797,7 +6335,7 @@ var Datepicker = /*#__PURE__*/React.forwardRef(function Datepicker(props, ref) {
       style = props.style,
       shortcuts = props.shortcuts,
       shortcutsText = props.shortcutsText,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$o);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$t);
 
   var _useDatepicker = useDatepicker(otherProps, ref),
       calendar = _useDatepicker.calendar,
@@ -5853,11 +6391,11 @@ var Datepicker = /*#__PURE__*/React.forwardRef(function Datepicker(props, ref) {
   })));
 });
 
-var _excluded$p = ["horizontal"];
+var _excluded$u = ["horizontal"];
 var Form = /*#__PURE__*/React.forwardRef(function Form(props, ref) {
   var _props$horizontal = props.horizontal,
       horizontal = _props$horizontal === void 0 ? false : _props$horizontal,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$p);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$u);
 
   var className = cn('yt-form', {
     'yt-form--horizontal flex flex-wrap': horizontal
@@ -5869,10 +6407,24 @@ var Form = /*#__PURE__*/React.forwardRef(function Form(props, ref) {
   }));
 });
 
-var _excluded$q = ["onSearch"];
+var _excluded$v = ["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$v);
+
+  var className = cn('flex ', props.className);
+  return React.createElement(Tag, Object.assign({}, otherProps, {
+    className: className,
+    "data-taco": "group",
+    ref: ref
+  }));
+});
+
+var _excluded$w = ["onSearch"];
 var SearchInput = /*#__PURE__*/React.forwardRef(function SearchInput(_ref, ref) {
   var onSearch = _ref.onSearch,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$w);
 
   var _useLocalization = useLocalization(),
       texts = _useLocalization.texts;
@@ -5905,13 +6457,13 @@ var SearchInput = /*#__PURE__*/React.forwardRef(function SearchInput(_ref, ref)
   }));
 });
 
-var _excluded$r = ["disabled", "children", "message", "state"];
+var _excluded$x = ["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$r);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$x);
 
   var className = cn('flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]', {
     'text-grey-dark': disabled
@@ -5955,7 +6507,7 @@ var useTypeahead = function useTypeahead(_ref) {
   };
 };
 
-var _excluded$s = ["data", "defaultValue", "disabled", "emptyValue", "id", "name", "onChange", "onFocus", "onKeyDown", "value"];
+var _excluded$y = ["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,
@@ -5969,7 +6521,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$s);
+      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$y);
 
   var data = useFlattenedData(emptyValue !== undefined ? [{
     text: '',
@@ -6005,246 +6557,29 @@ var useListbox = function useListbox(_ref, ref) {
     if (data.length && currentIndex === undefined) {
       if (defaultValue !== undefined) {
         var defaultValueIndex = getIndexFromValue(data, defaultValue);
-
-        if (defaultValueIndex !== undefined) {
-          setInputValueByIndex(defaultValueIndex);
-        }
-      } else {
-        setInputValueByIndex(0);
-      }
-    }
-  }, [data]);
-
-  var handleListboxKeyDown = function handleListboxKeyDown(event) {
-    var charKey = String.fromCharCode(event.keyCode);
-
-    if (charKey.match(/(\w)/g)) {
-      var nextIndex = getNextIndex(charKey);
-
-      if (nextIndex > -1 && nextIndex !== currentIndex) {
-        setInputValueByIndex(nextIndex);
-      }
-
-      return;
-    }
-
-    if (onKeyDown) {
-      event.persist();
-      onKeyDown(event);
-    }
-  };
-
-  var handleListboxFocus = function handleListboxFocus(event) {
-    if (currentIndex === undefined && data.length) {
-      setInputValueByIndex(0);
-    }
-
-    if (onFocus) {
-      event.persist();
-      onFocus(event);
-    }
-  };
-
-  var handleInputChange = function handleInputChange(event) {
-    event.persist();
-
-    if (onChange) {
-      var _item$path$split, _item$path;
-
-      var item = findByValue(data, event.target.value);
-      event.detail = sanitizeItem(item);
-      var indexes = (_item$path$split = item === null || item === void 0 ? void 0 : (_item$path = item.path) === null || _item$path === void 0 ? void 0 : _item$path.split('.')) !== null && _item$path$split !== void 0 ? _item$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;
-        event.detail.parents = indexes.map(function (i) {
-          lastPath = lastPath ? [lastPath, i].join('.') : i;
-          return sanitizeItem(data.find(function (i) {
-            return i.path === lastPath;
-          }));
-        });
-      }
-
-      onChange(event);
-    }
-  };
-
-  var list = _extends({}, otherProps, {
-    'aria-activedescendant': getActiveDescendant(data, currentIndex, id),
-    data: data,
-    disabled: disabled,
-    id: id,
-    onChange: handleListboxChange,
-    onFocus: handleListboxFocus,
-    onKeyDown: handleListboxKeyDown,
-    scrollOnFocus: true,
-    tabIndex: disabled ? -1 : otherProps.tabIndex ? otherProps.tabIndex : 0,
-    value: currentIndex
-  });
-
-  var input = {
-    name: name,
-    onChange: handleInputChange,
-    ref: inputRef,
-    tabIndex: -1,
-    value: value === undefined || value === null ? '' : value
-  };
-  return {
-    list: list,
-    input: input
-  };
-};
-
-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,
-      defaultValue = _ref.defaultValue,
-      disabled = _ref.disabled,
-      nativeId = _ref.id,
-      name = _ref.name,
-      onClick = _ref.onClick,
-      onChange = _ref.onChange,
-      onFocus = _ref.onFocus,
-      onKeyDown = _ref.onKeyDown,
-      value = _ref.value,
-      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$t);
-
-  var _useLocalization = useLocalization(),
-      texts = _useLocalization.texts;
-
-  var id = React.useMemo(function () {
-    return nativeId || uuid.v4();
-  }, [nativeId]);
-  var inputRef = useProxiedRef(ref);
-  var data = React.useMemo(function () {
-    return [{
-      text: texts.listbox.allOption,
-      value: '#ALL-OPTIONS#'
-    }].concat(externalData);
-  }, [externalData]);
-
-  var _React$useState = React.useState(getIndexFromValue(data, value) || 0),
-      currentIndex = _React$useState[0],
-      setCurrentIndex = _React$useState[1];
-
-  var _React$useState2 = React.useState(false),
-      allOptionsSelected = _React$useState2[0],
-      setAllOptionsSelected = _React$useState2[1];
-
-  var _useTypeahead = useTypeahead({
-    data: data,
-    currentIndex: currentIndex
-  }),
-      getNextIndex = _useTypeahead.getNextIndex;
-
-  var _React$useState3 = React.useState(getSelectedIndexesFromValue(data, value)),
-      selectedIndexes = _React$useState3[0],
-      setSelectedIndexes = _React$useState3[1];
-
-  React.useEffect(function () {
-    if (defaultValue && !value) {
-      setInputValueByRef$1(inputRef.current, defaultValue.toString());
-    }
-  }, []);
-  React.useEffect(function () {
-    var selectableItemsCount = data.filter(function (item) {
-      return !item.disabled;
-    }).length - 1;
-
-    if (selectableItemsCount === selectedIndexes.length) {
-      setAllOptionsSelected(true);
-    } else {
-      setAllOptionsSelected(false);
-    }
-  }, [selectedIndexes, data]);
-
-  var setInputValueByIndex = function setInputValueByIndex(index) {
-    if (index !== undefined) {
-      var option = data[index];
-
-      if (option && !option.disabled) {
-        var _inputRef$current;
-
-        var newInputValue = '';
-        var currentInputValue = (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value;
-        var currentValuesArray = (currentInputValue === null || currentInputValue === void 0 ? void 0 : currentInputValue.split(',')) || [];
-        var optionAlreadySelected = currentValuesArray.findIndex(function (val) {
-          return val === String(option.value);
-        }) !== -1; // Handling the select_all option
-
-        if (option.value === '#ALL-OPTIONS#') {
-          if (!allOptionsSelected) {
-            newInputValue = data.filter(function (option, index) {
-              return index !== 0 && !option.disabled;
-            }).map(function (option) {
-              return option.value;
-            }).join(',');
-          } else {
-            newInputValue = '';
-          }
-        } else {
-          // Handling rest options
-          if (optionAlreadySelected) {
-            newInputValue = currentValuesArray.filter(function (val) {
-              return val !== String(option.value);
-            }).join(',');
-          } else {
-            newInputValue = currentInputValue ? currentInputValue + "," + option.value : option.value;
-          }
-        }
-
-        setInputValueByRef$1(inputRef.current, newInputValue);
-      }
-    }
-  };
-
-  var handleListboxClick = function handleListboxClick(event, index) {
-    event.preventDefault();
-
-    if (!data[index].disabled) {
-      setCurrentIndex(index);
-      setInputValueByIndex(index);
-    }
-
-    if (onClick) {
-      onClick(event);
+
+        if (defaultValueIndex !== undefined) {
+          setInputValueByIndex(defaultValueIndex);
+        }
+      } else {
+        setInputValueByIndex(0);
+      }
     }
-  };
+  }, [data]);
 
-  var handleListboxKeyDown = function handleListboxKeyDown(event, index) {
+  var handleListboxKeyDown = function handleListboxKeyDown(event) {
     var charKey = String.fromCharCode(event.keyCode);
 
     if (charKey.match(/(\w)/g)) {
       var nextIndex = getNextIndex(charKey);
 
       if (nextIndex > -1 && nextIndex !== currentIndex) {
-        setCurrentIndex(nextIndex);
+        setInputValueByIndex(nextIndex);
       }
 
       return;
     }
 
-    switch (event.keyCode) {
-      case keycode('space'):
-        {
-          event.preventDefault();
-          setInputValueByIndex(index);
-          break;
-        }
-
-      case keycode('enter'):
-        {
-          setInputValueByIndex(index);
-          break;
-        }
-    }
-
-    setCurrentIndex(index);
-
     if (onKeyDown) {
       event.persist();
       onKeyDown(event);
@@ -6252,6 +6587,10 @@ var useMultiListbox = function useMultiListbox(_ref, ref) {
   };
 
   var handleListboxFocus = function handleListboxFocus(event) {
+    if (currentIndex === undefined && data.length) {
+      setInputValueByIndex(0);
+    }
+
     if (onFocus) {
       event.persist();
       onFocus(event);
@@ -6260,41 +6599,42 @@ var useMultiListbox = function useMultiListbox(_ref, ref) {
 
   var handleInputChange = function handleInputChange(event) {
     event.persist();
-    setSelectedIndexes(getSelectedIndexesFromValue(data, event.target.value));
 
     if (onChange) {
-      var detail = [];
-      var valuesArray = event.target.value.split(',');
-      valuesArray.forEach(function (val) {
-        var item = findByValue(data, val);
+      var _item$path$split, _item$path;
+
+      var item = findByValue$1(data, event.target.value);
+      event.detail = sanitizeItem(item);
+      var indexes = (_item$path$split = item === null || item === void 0 ? void 0 : (_item$path = item.path) === null || _item$path === void 0 ? void 0 : _item$path.split('.')) !== null && _item$path$split !== void 0 ? _item$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;
+        event.detail.parents = indexes.map(function (i) {
+          lastPath = lastPath ? [lastPath, i].join('.') : i;
+          return sanitizeItem(data.find(function (i) {
+            return i.path === lastPath;
+          }));
+        });
+      }
 
-        if (item) {
-          detail.push(item);
-        }
-      });
-      event.detail = detail;
       onChange(event);
     }
   };
 
   var list = _extends({}, otherProps, {
     'aria-activedescendant': getActiveDescendant(data, currentIndex, id),
-    'aria-multiselectable': true,
     data: data,
     disabled: disabled,
     id: id,
-    onChange: function onChange() {
-      return null;
-    },
-    onClick: handleListboxClick,
+    onChange: handleListboxChange,
     onFocus: handleListboxFocus,
     onKeyDown: handleListboxKeyDown,
-    scrollOnFocus: false,
+    scrollOnFocus: true,
     tabIndex: disabled ? -1 : otherProps.tabIndex ? otherProps.tabIndex : 0,
-    value: currentIndex,
-    selectedIndexes: selectedIndexes,
-    multiselect: true,
-    allOptionsSelected: allOptionsSelected
+    value: currentIndex
   });
 
   var input = {
@@ -6302,7 +6642,7 @@ var useMultiListbox = function useMultiListbox(_ref, ref) {
     onChange: handleInputChange,
     ref: inputRef,
     tabIndex: -1,
-    value: value !== null && value !== void 0 ? value : ''
+    value: value === undefined || value === null ? '' : value
   };
   return {
     list: list,
@@ -6310,549 +6650,266 @@ var useMultiListbox = function useMultiListbox(_ref, ref) {
   };
 };
 
-var _excluded$u = ["className"],
-    _excluded2$2 = ["className"];
-var Listbox = /*#__PURE__*/React.forwardRef(function Listbox(props, ref) {
-  var externalClassName = props.className,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$u);
-
-  var _useListbox = useListbox(otherProps, ref),
-      list = _useListbox.list,
-      input = _useListbox.input;
-
-  var className = cn('bg-white inline-flex relative w-full', externalClassName);
-  return React.createElement("span", {
-    "data-taco": "listbox",
-    className: className
-  }, React.createElement(ScrollableList, Object.assign({}, list, {
-    style: _extends({}, list.style, {
-      maxHeight: 'calc(12rem + 2px)'
-      /* (6 * option height) + listbox border */
-
-    })
-  })), React.createElement("input", Object.assign({}, input, {
-    className: "hidden",
-    type: "text"
-  })));
-});
-var MultiListbox = /*#__PURE__*/React.forwardRef(function Listbox(props, ref) {
-  var externalClassName = props.className,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded2$2);
-
-  var _useMultiListbox = useMultiListbox(otherProps, ref),
-      list = _useMultiListbox.list,
-      input = _useMultiListbox.input;
-
-  var className = cn('bg-white inline-flex relative w-full', externalClassName);
-  return React.createElement("span", {
-    "data-taco": "listbox",
-    className: className
-  }, React.createElement(ScrollableList, Object.assign({}, list, {
-    style: _extends({}, list.style, {
-      maxHeight: 'calc(12rem + 2px + 2px)'
-      /* (6 * option height) + listbox border + ALL_OPTIONS bottom border */
-
-    })
-  })), React.createElement("input", Object.assign({}, input, {
-    className: "hidden",
-    type: "text"
-  })));
-});
-
-var _excluded$v = ["children", "placement"];
-
-var getAppearanceClasses$1 = function getAppearanceClasses(appearance) {
-  switch (appearance) {
-    case 'primary':
-      return 'wcag-blue border-blue';
-
-    case 'danger':
-      return 'wcag-red border-red';
-
-    case 'ghost':
-      return 'bg-white text-blue border-blue yt-shadow-blue';
-
-    case 'discrete':
-      return 'wcag-white border-grey yt-shadow';
-
-    case 'default':
-    default:
-      return 'wcag-grey-light border-grey';
-  }
-};
-
-var Content$4 = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var internalRef = useProxiedRef(ref);
-  var menu = useCurrentMenu();
-
-  var children = props.children,
-      side = props.placement,
-      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, {
-    align: "start",
-    className: className,
-    "data-taco": "menu",
-    side: side,
-    sideOffset: 2,
-    style: {
-      minWidth: menu === null || menu === void 0 ? void 0 : menu.minWidth
-    },
-    ref: internalRef
-  }), children);
-});
-
-var _excluded$w = ["icon", "shortcut"];
-var Icon$1 = function Icon$1(_ref) {
-  var name = _ref.name;
-  return React.createElement("span", {
-    className: "absolute left-0 ml-1"
-  }, React.createElement(Icon, {
-    className: "!h-5 !w-5 -ml-px -mt-px",
-    name: name
-  }));
-};
-
-var getAppearanceClasses$2 = function getAppearanceClasses(appearance) {
-  switch (appearance) {
-    case 'primary':
-      return 'wcag-blue aria-disabled:text-blue-dark focus:wcag-blue-light';
-
-    case 'danger':
-      return 'wcag-red aria-disabled:text-red-dark focus:wcag-red-light';
-
-    case 'ghost':
-      return 'text-blue aria-disabled:text-grey focus:wcag-blue';
-
-    case 'discrete':
-      return 'text-black aria-disabled:text-grey focus:wcag-blue-lightest';
-
-    case 'default':
-    default:
-      return 'wcag-grey-light aria-disabled:text-grey-darker focus:wcag-grey-dark';
-  }
-};
-
-var useItemStyling = function useItemStyling(_ref2) {
-  var disabled = _ref2.disabled,
-      indented = _ref2.indented,
-      className = _ref2.className;
-  var menu = useCurrentMenu();
-  React.useEffect(function () {
-    if (indented && !(menu !== null && menu !== void 0 && menu.indented)) {
-      menu === null || menu === void 0 ? void 0 : menu.registerIndentation();
-    }
-  }, [indented]);
-  return cn('flex items-center justify-start h-7 pr-1.5 relative rounded w-full focus:outline-none group', getAppearanceClasses$2(menu === null || menu === void 0 ? void 0 : menu.appearance), {
-    'pl-7': menu === null || menu === void 0 ? void 0 : menu.indented,
-    'pl-1.5': !(menu !== null && menu !== void 0 && menu.indented),
-    'cursor-pointer': !disabled,
-    'cursor-not-allowed': disabled
-  }, className);
-};
-var Shortcut = function Shortcut(props) {
-  var menu = useCurrentMenu();
-  var appearance;
-
-  switch (menu === null || menu === void 0 ? void 0 : menu.appearance) {
-    case 'primary':
-      appearance = 'text-blue-lightest group-focus:text-black';
-      break;
-
-    case 'danger':
-      appearance = 'text-red-lightest group-focus:text-white';
-      break;
-
-    case 'ghost':
-      appearance = 'text-blue-light group-focus:text-blue-lightest';
-      break;
-
-    case 'discrete':
-      appearance = 'text-grey-darker group-focus:text-blue-light';
-      break;
-
-    case 'default':
-    default:
-      appearance = 'text-grey-darkest';
-      break;
-  }
-
-  var className = cn('ml-auto pl-3', appearance);
-  return React.createElement("span", Object.assign({}, props, {
-    className: className
-  }));
-};
-var Item$1 = /*#__PURE__*/React.forwardRef(function MenuItem(props, ref) {
-  var icon = props.icon,
-      shortcut = props.shortcut,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$w);
-
-  var className = useItemStyling({
-    disabled: props.disabled,
-    indented: !!icon,
-    className: props.className
-  });
-  var handleClick; // radix has a bug that does not disable clicks when disabled is set on items
+var _excluded$z = ["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,
+      defaultValue = _ref.defaultValue,
+      disabled = _ref.disabled,
+      nativeId = _ref.id,
+      name = _ref.name,
+      onClick = _ref.onClick,
+      onChange = _ref.onChange,
+      onFocus = _ref.onFocus,
+      onKeyDown = _ref.onKeyDown,
+      value = _ref.value,
+      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$z);
 
-  if (!otherProps.disabled) {
-    handleClick = props.onClick;
+  var _useLocalization = useLocalization(),
+      texts = _useLocalization.texts;
 
-    if (props['aria-haspopup']) {
-      handleClick = function handleClick(event) {
-        if (props.onClick) {
-          event.persist();
-          props.onClick(event);
-          event.preventDefault();
-        }
-      };
-    }
-  }
+  var id = React.useMemo(function () {
+    return nativeId || uuid.v4();
+  }, [nativeId]);
+  var inputRef = useProxiedRef(ref);
+  var data = React.useMemo(function () {
+    return [{
+      text: texts.listbox.allOption,
+      value: '#ALL-OPTIONS#'
+    }].concat(externalData);
+  }, [externalData]);
 
-  return React.createElement(DropdownMenuPrimitive.Item, Object.assign({}, otherProps, {
-    className: className,
-    onClick: handleClick,
-    ref: ref
-  }), icon && React.createElement(Icon$1, {
-    name: icon
-  }), props.children, shortcut && React.createElement(Shortcut, null, shortcut));
-});
+  var _React$useState = React.useState(getIndexFromValue(data, value) || 0),
+      currentIndex = _React$useState[0],
+      setCurrentIndex = _React$useState[1];
 
-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$x);
+  var _React$useState2 = React.useState(false),
+      allOptionsSelected = _React$useState2[0],
+      setAllOptionsSelected = _React$useState2[1];
 
-  var className = useItemStyling({
-    disabled: props.disabled,
-    indented: !!icon,
-    className: props.className
-  });
-  return React.createElement(DropdownMenuPrimitive.Item, Object.assign({}, otherProps, {
-    asChild: true,
-    className: className,
-    ref: ref
-  }), React.createElement("a", {
-    href: href,
-    target: "_blank"
-  }, icon && React.createElement(Icon$1, {
-    name: icon
-  }), props.children));
-});
+  var _useTypeahead = useTypeahead({
+    data: data,
+    currentIndex: currentIndex
+  }),
+      getNextIndex = _useTypeahead.getNextIndex;
 
-var Trigger$3 = /*#__PURE__*/React.forwardRef(function MenuTrigger(props, ref) {
-  var _props$children3, _props$children3$prop;
+  var _React$useState3 = React.useState(getSelectedIndexesFromValue(data, value)),
+      selectedIndexes = _React$useState3[0],
+      setSelectedIndexes = _React$useState3[1];
 
-  var menu = useCurrentMenu();
-  var internalRef = useProxiedRef(ref);
   React.useEffect(function () {
-    if (internalRef.current) {
-      menu === null || menu === void 0 ? void 0 : menu.setMinWidth(internalRef.current.getBoundingClientRect().width);
+    if (defaultValue && !value) {
+      setInputValueByRef$1(inputRef.current, defaultValue.toString());
     }
-  }, [internalRef]); // set the appearance based on the trigger button
-
+  }, []);
   React.useEffect(function () {
-    var _props$children, _props$children$props;
-
-    if ((_props$children = props.children) !== null && _props$children !== void 0 && (_props$children$props = _props$children.props) !== null && _props$children$props !== void 0 && _props$children$props.appearance) {
-      var _props$children2, _props$children2$prop;
+    var selectableItemsCount = data.filter(function (item) {
+      return !item.disabled;
+    }).length - 1;
 
-      menu === null || menu === void 0 ? void 0 : menu.setAppearance((_props$children2 = props.children) === null || _props$children2 === void 0 ? void 0 : (_props$children2$prop = _props$children2.props) === null || _props$children2$prop === void 0 ? void 0 : _props$children2$prop.appearance);
+    if (selectableItemsCount === selectedIndexes.length) {
+      setAllOptionsSelected(true);
+    } else {
+      setAllOptionsSelected(false);
     }
-  }, [(_props$children3 = props.children) === null || _props$children3 === void 0 ? void 0 : (_props$children3$prop = _props$children3.props) === null || _props$children3$prop === void 0 ? void 0 : _props$children3$prop.appearance]);
-  return React.createElement(DropdownMenuPrimitive.Trigger, Object.assign({}, props, {
-    asChild: true,
-    ref: internalRef
-  }));
-});
-
-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$y);
+  }, [selectedIndexes, data]);
 
-  var className = useItemStyling({
-    disabled: props.disabled,
-    indented: true,
-    className: props.className
-  });
-  return React.createElement(DropdownMenuPrimitive.CheckboxItem, Object.assign({}, otherProps, {
-    className: className,
-    checked: checked,
-    onCheckedChange: onChange
-  }), React.createElement(DropdownMenuPrimitive.ItemIndicator, {
-    className: "absolute left-0 ml-1.5"
-  }, React.createElement(Icon, {
-    name: "tick",
-    className: "!h-4 !w-4 -ml-px"
-  })), children);
-};
+  var setInputValueByIndex = function setInputValueByIndex(index) {
+    if (index !== undefined) {
+      var option = data[index];
 
-var _excluded$z = ["children", "value"],
-    _excluded2$3 = ["children", "defaultValue", "disabled", "invalid", "onChange", "orientation", "value"];
-var getRadioGroupItemValueAsString = function getRadioGroupItemValueAsString(value) {
-  return value === null ? '' : String(value);
-};
-var findByValue$1 = function findByValue(values, valueAsString) {
-  return values.find(function (value) {
-    return getRadioGroupItemValueAsString(value) === valueAsString;
-  });
-};
-var RadioGroupContext = /*#__PURE__*/React.createContext({
-  disabled: false,
-  invalid: false
-});
-var RadioGroupItem = /*#__PURE__*/React.forwardRef(function RadioGroupItem(props, ref) {
-  var context = React.useContext(RadioGroupContext);
+      if (option && !option.disabled) {
+        var _inputRef$current;
 
-  var children = props.children,
-      value = props.value,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$z);
+        var newInputValue = '';
+        var currentInputValue = (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value;
+        var currentValuesArray = (currentInputValue === null || currentInputValue === void 0 ? void 0 : currentInputValue.split(',')) || [];
+        var optionAlreadySelected = currentValuesArray.findIndex(function (val) {
+          return val === String(option.value);
+        }) !== -1; // Handling the select_all option
 
-  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 ', {
-    'border-grey-dark focus:border-blue focus:yt-focus aria-checked:bg-blue aria-checked:border-blue': !disabled && !context.invalid,
-    'border-grey cursor-not-allowed aria-checked:bg-grey-dark aria-checked:border-grey-dark': disabled,
-    'border-red text-red focus:border-red focus:yt-focus-red aria-checked:bg-red aria-checked:border-red': context.invalid && !disabled
-  });
-  var labelClassName = cn('flex items-center cursor-pointer', {
-    'cursor-not-allowed text-grey-dark': disabled
-  });
-  return React.createElement("label", {
-    className: labelClassName
-  }, React.createElement(RadioGroupPrimitive.Item, Object.assign({}, otherProps, {
-    className: className,
-    disabled: disabled,
-    ref: ref,
-    value: getRadioGroupItemValueAsString(value)
-  }), React.createElement(RadioGroupPrimitive.Indicator, {
-    className: "h-2 w-2 rounded-full bg-white"
-  })), children);
-});
-var useRadioGroup = function useRadioGroup(props) {
-  var children = props.children,
-      defaultValue = props.defaultValue,
-      disabled = props.disabled,
-      invalid = props.invalid,
-      onChange = props.onChange,
-      _props$orientation = props.orientation,
-      orientation = _props$orientation === void 0 ? 'vertical' : _props$orientation,
-      value = props.value,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded2$3);
+        if (option.value === '#ALL-OPTIONS#') {
+          if (!allOptionsSelected) {
+            newInputValue = data.filter(function (option, index) {
+              return index !== 0 && !option.disabled;
+            }).map(function (option) {
+              return option.value;
+            }).join(',');
+          } else {
+            newInputValue = '';
+          }
+        } else {
+          // Handling rest options
+          if (optionAlreadySelected) {
+            newInputValue = currentValuesArray.filter(function (val) {
+              return val !== String(option.value);
+            }).join(',');
+          } else {
+            newInputValue = currentInputValue ? currentInputValue + "," + option.value : option.value;
+          }
+        }
 
-  var values = React.useMemo(function () {
-    var radioGroupItemValues = [];
-    React.Children.forEach(children, function (child) {
-      if (React.isValidElement(child)) {
-        radioGroupItemValues.push(child.props.value);
+        setInputValueByRef$1(inputRef.current, newInputValue);
       }
-    });
-    return radioGroupItemValues;
-  }, [children]);
-  var context = React.useMemo(function () {
-    return {
-      disabled: disabled !== null && disabled !== void 0 ? disabled : false,
-      invalid: invalid !== null && invalid !== void 0 ? invalid : false
-    };
-  }, [disabled, invalid]);
-  var valueProps;
-
-  if (onChange !== undefined) {
-    var handleChange = function handleChange(value) {
-      return onChange(findByValue$1(values, value));
-    };
-
-    valueProps = {
-      onValueChange: handleChange,
-      value: value !== undefined ? getRadioGroupItemValueAsString(value) : undefined
-    };
-  } else {
-    valueProps = {
-      defaultValue: defaultValue !== undefined ? getRadioGroupItemValueAsString(defaultValue) : undefined
-    };
-  }
-
-  return {
-    context: context,
-    props: _extends({}, otherProps, valueProps, {
-      children: children,
-      orientation: orientation
-    })
-  };
-};
-var RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(props, ref) {
-  var _useRadioGroup = useRadioGroup(props),
-      context = _useRadioGroup.context,
-      otherProps = _useRadioGroup.props;
-
-  var className = cn('flex items-start', {
-    'flex-wrap space-x-4': otherProps.orientation === 'horizontal',
-    'flex-col space-y-2': otherProps.orientation === 'vertical'
-  }, otherProps.className);
-  return React.createElement(RadioGroupContext.Provider, {
-    value: context
-  }, React.createElement(RadioGroupPrimitive.Root, Object.assign({}, otherProps, {
-    className: className,
-    "data-taco": "radio-group",
-    ref: ref
-  })));
-});
-RadioGroup.Item = RadioGroupItem;
+    }
+  };
 
-var _excluded$A = ["children", "value"];
-var RadioItem = function RadioItem(props) {
-  var context = React.useContext(MenuRadioGroupContext);
+  var handleListboxClick = function handleListboxClick(event, index) {
+    event.preventDefault();
 
-  var children = props.children,
-      value = props.value,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$A);
+    if (!data[index].disabled) {
+      setCurrentIndex(index);
+      setInputValueByIndex(index);
+    }
 
-  var disabled = context.disabled || props.disabled;
-  var className = useItemStyling({
-    disabled: disabled,
-    indented: true,
-    className: props.className
-  });
-  return React.createElement(DropdownMenuPrimitive.RadioItem, Object.assign({}, otherProps, {
-    className: className,
-    disabled: disabled,
-    value: getRadioGroupItemValueAsString(value)
-  }), React.createElement(DropdownMenuPrimitive.ItemIndicator, {
-    className: "absolute left-0 ml-1.5"
-  }, React.createElement("span", {
-    className: "flex h-1.5 w-1.5 ml-1 rounded-full bg-current "
-  })), children);
-};
-var MenuRadioGroupContext = /*#__PURE__*/React.createContext({
-  disabled: false
-});
-var RadioGroup$1 = function RadioGroup(props) {
-  var _useRadioGroup = useRadioGroup(props),
-      context = _useRadioGroup.context,
-      otherProps = _useRadioGroup.props;
+    if (onClick) {
+      onClick(event);
+    }
+  };
 
-  var className = cn('flex flex-col', props.className);
-  return React.createElement(MenuRadioGroupContext.Provider, {
-    value: context
-  }, React.createElement(DropdownMenuPrimitive.RadioGroup, Object.assign({}, otherProps, {
-    className: className
-  })));
-};
-RadioGroup$1.Item = RadioItem;
+  var handleListboxKeyDown = function handleListboxKeyDown(event, index) {
+    var charKey = String.fromCharCode(event.keyCode);
 
-var getAppearanceClasses$3 = function getAppearanceClasses(appearance) {
-  switch (appearance) {
-    case 'primary':
-      return 'bg-blue-lighe';
+    if (charKey.match(/(\w)/g)) {
+      var nextIndex = getNextIndex(charKey);
 
-    case 'danger':
-      return 'bg-red-light';
+      if (nextIndex > -1 && nextIndex !== currentIndex) {
+        setCurrentIndex(nextIndex);
+      }
 
-    case 'ghost':
-      return 'bg-blue-light';
+      return;
+    }
 
-    case 'discrete':
-      return 'bg-grey-dark';
+    switch (event.keyCode) {
+      case keycode('space'):
+        {
+          event.preventDefault();
+          setInputValueByIndex(index);
+          break;
+        }
 
-    case 'default':
-    default:
-      return 'bg-grey-dark';
-  }
-};
+      case keycode('enter'):
+        {
+          setInputValueByIndex(index);
+          break;
+        }
+    }
 
-var Separator = function Separator() {
-  var menu = useCurrentMenu();
-  var className = cn('h-px  my-1', getAppearanceClasses$3(menu === null || menu === void 0 ? void 0 : menu.appearance));
-  return React.createElement(DropdownMenuPrimitive.Separator, {
-    className: className
-  });
-};
+    setCurrentIndex(index);
 
-var getAppearanceClasses$4 = function getAppearanceClasses(appearance) {
-  switch (appearance) {
-    case 'primary':
-      return 'text-blue-lighest';
+    if (onKeyDown) {
+      event.persist();
+      onKeyDown(event);
+    }
+  };
 
-    case 'danger':
-      return 'text-red-lightest';
+  var handleListboxFocus = function handleListboxFocus(event) {
+    if (onFocus) {
+      event.persist();
+      onFocus(event);
+    }
+  };
 
-    case 'ghost':
-      return 'text-blue-light';
+  var handleInputChange = function handleInputChange(event) {
+    event.persist();
+    setSelectedIndexes(getSelectedIndexesFromValue(data, event.target.value));
 
-    case 'discrete':
-      return 'text-grey-darkest';
+    if (onChange) {
+      var detail = [];
+      var valuesArray = event.target.value.split(',');
+      valuesArray.forEach(function (val) {
+        var item = findByValue$1(data, val);
 
-    case 'default':
-    default:
-      return 'text-grey-darkest';
-  }
-};
+        if (item) {
+          detail.push(item);
+        }
+      });
+      event.detail = detail;
+      onChange(event);
+    }
+  };
 
-var Header = function Header(props) {
-  var menu = useCurrentMenu();
-  var className = cn('flex items-center justify-start h-6 pr-1.5 text-xs', getAppearanceClasses$4(menu === null || menu === void 0 ? void 0 : menu.appearance), {
-    'pl-7': menu === null || menu === void 0 ? void 0 : menu.indented,
-    'pl-1.5': !(menu !== null && menu !== void 0 && menu.indented)
-  }, props.className);
-  return React.createElement(DropdownMenuPrimitive.Label, Object.assign({}, props, {
-    className: className
-  }));
+  var list = _extends({}, otherProps, {
+    'aria-activedescendant': getActiveDescendant(data, currentIndex, id),
+    'aria-multiselectable': true,
+    data: data,
+    disabled: disabled,
+    id: id,
+    onChange: function onChange() {
+      return null;
+    },
+    onClick: handleListboxClick,
+    onFocus: handleListboxFocus,
+    onKeyDown: handleListboxKeyDown,
+    scrollOnFocus: false,
+    tabIndex: disabled ? -1 : otherProps.tabIndex ? otherProps.tabIndex : 0,
+    value: currentIndex,
+    selectedIndexes: selectedIndexes,
+    multiselect: true,
+    allOptionsSelected: allOptionsSelected
+  });
+
+  var input = {
+    name: name,
+    onChange: handleInputChange,
+    ref: inputRef,
+    tabIndex: -1,
+    value: value !== null && value !== void 0 ? value : ''
+  };
+  return {
+    list: list,
+    input: input
+  };
 };
 
-var Menu = function Menu(props) {
-  var _React$useState = React.useState(false),
-      open = _React$useState[0],
-      setOpen = _React$useState[1];
+var _excluded$A = ["className"],
+    _excluded2$3 = ["className"];
+var Listbox = /*#__PURE__*/React.forwardRef(function Listbox(props, ref) {
+  var externalClassName = props.className,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$A);
 
-  var _React$useState2 = React.useState('default'),
-      appearance = _React$useState2[0],
-      _setAppearance = _React$useState2[1];
+  var _useListbox = useListbox(otherProps, ref),
+      list = _useListbox.list,
+      input = _useListbox.input;
 
-  var _React$useState3 = React.useState(false),
-      indented = _React$useState3[0],
-      setIndented = _React$useState3[1];
+  var className = cn('bg-white inline-flex relative w-full', externalClassName);
+  return React.createElement("span", {
+    "data-taco": "listbox",
+    className: className
+  }, React.createElement(ScrollableList, Object.assign({}, list, {
+    style: _extends({}, list.style, {
+      maxHeight: 'calc(12rem + 2px)'
+      /* (6 * option height) + listbox border */
 
-  var _React$useState4 = React.useState(undefined),
-      minWidth = _React$useState4[0],
-      _setMinWidth = _React$useState4[1];
+    })
+  })), React.createElement("input", Object.assign({}, input, {
+    className: "hidden",
+    type: "text"
+  })));
+});
+var MultiListbox = /*#__PURE__*/React.forwardRef(function Listbox(props, ref) {
+  var externalClassName = props.className,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded2$3);
 
-  var context = React.useMemo(function () {
-    return {
-      appearance: appearance,
-      setAppearance: function setAppearance(appearance) {
-        return _setAppearance(appearance);
-      },
-      indented: indented,
-      registerIndentation: function registerIndentation() {
-        return setIndented(true);
-      },
-      minWidth: minWidth,
-      setMinWidth: function setMinWidth(width) {
-        return _setMinWidth(width);
-      },
-      close: function close() {
-        return setOpen(false);
-      }
-    };
-  }, [indented, minWidth, appearance]);
-  return React.createElement(MenuContext.Provider, {
-    value: context
-  }, React.createElement(DropdownMenuPrimitive.Root, Object.assign({}, props, {
-    open: open,
-    onOpenChange: setOpen
+  var _useMultiListbox = useMultiListbox(otherProps, ref),
+      list = _useMultiListbox.list,
+      input = _useMultiListbox.input;
+
+  var className = cn('bg-white inline-flex relative w-full', externalClassName);
+  return React.createElement("span", {
+    "data-taco": "listbox",
+    className: className
+  }, React.createElement(ScrollableList, Object.assign({}, list, {
+    style: _extends({}, list.style, {
+      maxHeight: 'calc(12rem + 2px + 2px)'
+      /* (6 * option height) + listbox border + ALL_OPTIONS bottom border */
+
+    })
+  })), React.createElement("input", Object.assign({}, input, {
+    className: "hidden",
+    type: "text"
   })));
-};
-Menu.Trigger = Trigger$3;
-Menu.Content = Content$4;
-Menu.Item = Item$1;
-Menu.Link = Link;
-Menu.Checkbox = Checkbox$1;
-Menu.Separator = Separator;
-Menu.Header = Header;
-Menu.RadioGroup = RadioGroup$1;
+});
 
 var _excluded$B = ["children", "className", "expanded", "title", "fixed", "onClick"];
 var TreeviewItem = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
@@ -7252,11 +7309,11 @@ var useSelect = function useSelect(_ref, ref) {
       } else {
         var _findByValue$text, _findByValue;
 
-        text = (_findByValue$text = (_findByValue = findByValue(searchData, selectedValues[0])) === null || _findByValue === void 0 ? void 0 : _findByValue.text) !== null && _findByValue$text !== void 0 ? _findByValue$text : '';
+        text = (_findByValue$text = (_findByValue = findByValue$1(searchData, selectedValues[0])) === null || _findByValue === void 0 ? void 0 : _findByValue.text) !== null && _findByValue$text !== void 0 ? _findByValue$text : '';
         more = selectedValues.length > 1 ? selectedValues.length - 1 : 0;
       }
     } else {
-      var item = findByValue(searchData, value);
+      var item = findByValue$1(searchData, value);
 
       if (item) {
         text = item.icon ? React.createElement(React.Fragment, null, React.cloneElement(item.icon, {
@@ -7272,7 +7329,7 @@ var useSelect = function useSelect(_ref, ref) {
     if (onChange) {
       var _item$path$split, _item$path;
 
-      var _item = findByValue(searchData, event.target.value);
+      var _item = findByValue$1(searchData, event.target.value);
 
       event.detail = sanitizeItem(_item);
       var indexes = (_item$path$split = _item === null || _item === void 0 ? void 0 : (_item$path = _item.path) === null || _item$path === void 0 ? void 0 : _item$path.split('.')) !== null && _item$path$split !== void 0 ? _item$path$split : [];
@@ -8226,7 +8283,7 @@ var useRowSelect = function useRowSelect(onSelectedRows) {
               }
             };
 
-            return React__default.createElement(Checkbox, Object.assign({}, props, {
+            return React__default.createElement(Checkbox$1, Object.assign({}, props, {
               onChange: onChange,
               className: "mt-px"
             }));
@@ -8259,7 +8316,7 @@ var useRowSelect = function useRowSelect(onSelectedRows) {
               lastSelectedSortedIndex.current = sortedIndex;
             };
 
-            return React__default.createElement(Checkbox, Object.assign({}, props, {
+            return React__default.createElement(Checkbox$1, Object.assign({}, props, {
               className: "mt-px",
               onClick: onClick,
               // this is necessary to remove console spam from eslint
@@ -8604,6 +8661,8 @@ var useTableSortingListener = function useTableSortingListener(data, sortedRows,
 
 var DEFAULT_PAGE_SIZE = 10;
 var useTable = function useTable(props, ref) {
+  var _otherProps$tabIndex;
+
   var children = props.children,
       data = props.data,
       onRowClick = props.onRowClick,
@@ -8736,7 +8795,8 @@ var useTable = function useTable(props, ref) {
     tableProps: _extends({}, otherProps, {
       headerGroups: headerGroups,
       onFocus: handleFocus,
-      onKeyDown: handleKeyDown
+      onKeyDown: handleKeyDown,
+      tabIndex: (_otherProps$tabIndex = otherProps.tabIndex) !== null && _otherProps$tabIndex !== void 0 ? _otherProps$tabIndex : 0
     }),
     state: state,
     pagination: !disablePagination ? {
@@ -8965,8 +9025,7 @@ var Table = /*#__PURE__*/React__default.forwardRef(function Table(props, ref) {
   }
 
   return React__default.createElement(React__default.Fragment, null, paginationElement, React__default.createElement(BaseTable, Object.assign({}, tableProps, {
-    ref: tableRef,
-    tabIndex: 0
+    ref: tableRef
   }), rows.length ? rows.map(function (row, index) {
     prepareRow(row, index);
     return React__default.createElement(Row, Object.assign({}, rowProps, {
@@ -9178,7 +9237,6 @@ var WindowedTable = /*#__PURE__*/React__default.forwardRef(function WindowedTabl
   return React__default.createElement(BaseTable, Object.assign({}, tableProps, {
     className: className,
     headerRef: headerRef,
-    tabIndex: 0,
     ref: tableRef
   }), list ? list : emptyStateRenderer());
 });
@@ -9647,7 +9705,7 @@ exports.Badge = Badge;
 exports.Banner = Banner;
 exports.Button = Button$1;
 exports.Calendar = Calendar$1;
-exports.Checkbox = Checkbox;
+exports.Checkbox = Checkbox$1;
 exports.Combobox = Combobox;
 exports.Datepicker = Datepicker;
 exports.Dialog = Dialog;
@@ -9684,7 +9742,7 @@ exports.VisuallyHidden = VisuallyHidden;
 exports.WindowedTable = WindowedTable;
 exports.convertRowIndexPathToNumberArray = convertRowIndexPathToNumberArray;
 exports.defaultLocalisationTexts = defaultLocalisationTexts;
-exports.findByValue = findByValue$1;
+exports.findByValue = findByValue;
 exports.format = format;
 exports.getByRowIndexPath = getByRowIndexPath;
 exports.getNextIndexFromKeycode = getNextIndexFromKeycode;