@economic/taco 0.0.1-alpha.2 → 0.0.3-alpha.0

package/dist/taco.cjs.development.js

@@ -16,7 +16,6 @@ var DialogPrimitive = require('@radix-ui/react-dialog');
 var interactions = require('@react-aria/interactions');
 var ReactDayPicker = _interopDefault(require('react-day-picker'));
 var CheckboxPrimitive = require('@radix-ui/react-checkbox');
-var Popover$1 = require('reakit/Popover');
 var keycode = _interopDefault(require('keycode'));
 var debounce = _interopDefault(require('lodash/debounce'));
 var dateFns = require('date-fns');
@@ -3188,6 +3187,13 @@ Accordion.Item = Item;
 Accordion.Trigger = Trigger;
 Accordion.Content = Content;
 
+var Backdrop = function Backdrop(props) {
+  var className = cn('fixed inset-0 cursor-default overflow-y-auto bg-[rgba(50,46,62,0.8)] animate-[fade-in_150ms] aria-hidden:hidden', props.className);
+  return React.createElement("div", Object.assign({}, props, {
+    className: className
+  }));
+};
+
 var VisuallyHidden = /*#__PURE__*/React.forwardRef(function VisuallyHidden(props, ref) {
   return React.createElement("span", Object.assign({}, props, {
     className: "sr-only",
@@ -4092,10 +4098,9 @@ var Content$2 = /*#__PURE__*/React.forwardRef(function DialogContent(props, ref)
     'w-md': dialog.size === 'md',
     'w-lg': dialog.size === 'lg'
   });
-  var containerClassName = cn('yt-dialog 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)]', {
+  var containerClassName = cn('bg-white p-6 rounded relative z-[999]', 'shadow-[0_6px_9px_0_rgba(89,85,98,0.3),0_0_1px_0_rgba(89,85,98,0.2)]', {
     'rounded-b-none': !!dialog.elements.extra
-  }, props.className);
-  var overlayClassName = cn('fixed inset-0 cursor-default overflow-y-auto bg-[rgba(50,46,62,0.8)] animate-[fade-in_150ms] aria-hidden:hidden'); // the chosen behaviour in taco is that outside clicks do not close the dialog
+  }, props.className); // the chosen behaviour in taco is that outside clicks do not close the dialog
 
   var handleInteractOutside = function handleInteractOutside(event) {
     return event.preventDefault();
@@ -4113,10 +4118,9 @@ var Content$2 = /*#__PURE__*/React.forwardRef(function DialogContent(props, ref)
   }
 
   return React.createElement(DialogPrimitive.Portal, null, React.createElement(DialogPrimitive.Overlay, {
-    className: overlayClassName
-  }, React.createElement(DialogPrimitive.Content, Object.assign({}, props, {
+    asChild: true
+  }, React.createElement(Backdrop, null, React.createElement(DialogPrimitive.Content, Object.assign({}, props, {
     className: className,
-    "data-taco": "dialog",
     onEscapeKeyDown: dialog.onClose,
     onInteractOutside: handleInteractOutside,
     onCloseAutoFocus: handleCloseAutoFocus,
@@ -4126,7 +4130,8 @@ var Content$2 = /*#__PURE__*/React.forwardRef(function DialogContent(props, ref)
       top: dialog.draggable ? "calc(50% + " + position.y + "px)" : undefined
     })
   }), React.createElement("div", {
-    className: containerClassName
+    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"
@@ -4138,7 +4143,7 @@ var Content$2 = /*#__PURE__*/React.forwardRef(function DialogContent(props, ref)
     "aria-label": texts.dialog.close,
     className: "absolute top-0 right-0 mt-2 mr-2",
     icon: "close"
-  }))), dialog.elements.drawer, dialog.elements.extra)));
+  }))), dialog.elements.drawer, dialog.elements.extra))));
 });
 
 var Drawer = /*#__PURE__*/React.forwardRef(function DialogDrawer(props, ref) {
@@ -4146,7 +4151,8 @@ var Drawer = /*#__PURE__*/React.forwardRef(function DialogDrawer(props, ref) {
 
   var dialog = useCurrentDialog();
   return React.createElement(framerMotion.motion.div, Object.assign({}, props, {
-    className: "bg-white absolute top-0 h-full w-full hidden text-left p-6 overflow-y-auto rounded-r -ml-[4px] z-[998]",
+    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: {
@@ -4175,7 +4181,8 @@ var Drawer = /*#__PURE__*/React.forwardRef(function DialogDrawer(props, ref) {
 
 var Extra = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return React.createElement("div", Object.assign({}, props, {
-    className: "bg-grey-light rounded-t-none rounded-b absolute top-full w-full text-left p-6 left-0 -mt-px yt-shadow-inset",
+    className: "bg-grey-light yt-shadow-inset absolute top-full left-0 -mt-px w-full rounded-t-none rounded-b p-6 text-left",
+    "data-taco": "dialog-extra",
     ref: ref
   }));
 });
@@ -4654,7 +4661,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
 var getInputClasses = function getInputClasses(props) {
   var _cn;
 
-  return cn('bg-white text-black text-sm border font-normal not-italic no-underline rounded inline-flex leading-6 px-2 relative w-full text-ellipsis transition-all delay-100 ease-in flex items-center', (_cn = {
+  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));
@@ -4680,19 +4687,19 @@ var getStateClasses$1 = function getStateClasses(value) {
 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';
+      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';
+      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';
+      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';
+      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';
+      return '!border-grey-dark focus:!border-blue-light peer-focus:!border-blue-light peer-focus:peer-active:!border-blue-dark';
   }
 };
 
@@ -4953,7 +4960,9 @@ var ScrollableList = /*#__PURE__*/React.forwardRef(function ScrollableList(props
 
   var list = _extends({}, otherProps, {
     className: cn('inline-flex flex-col list-none !p-0 m-0 overflow-y-auto h-auto', getInputClasses(props), {
-      'yt-list--multiselect': multiselect
+      'yt-list--multiselect': multiselect,
+      'pointer-events-none': disabled,
+      'cursor-not-allowed': disabled || readOnly
     }, otherProps.className),
     disabled: disabled,
     id: id,
@@ -4971,7 +4980,7 @@ var ScrollableList = /*#__PURE__*/React.forwardRef(function ScrollableList(props
       'aria-selected': multiselect ? getOptionCheckedState(String(option.value), index) : currentIndex === index,
       'data-focused': currentIndex === index,
       children: option.text,
-      className: cn('flex items-center px-3 w-full cursor-pointer bg-white flex-[0_0_2rem] focus:wcag-blue', {
+      className: cn('flex items-center px-3 w-full cursor-pointer bg-white flex-[0_0_2rem] focus:wcag-blue focus:border-blue', {
         'sticky top-0 font-bold': depth === 0 && !!option.hasChildren
       }),
       disabled: option.disabled,
@@ -4998,13 +5007,13 @@ var ScrollableList = /*#__PURE__*/React.forwardRef(function ScrollableList(props
         optionProps = _objectWithoutPropertiesLoose(_ref, _excluded2$1);
 
     return React.createElement("li", Object.assign({}, optionProps), icon, React.createElement("span", {
-      className: "flex-grow text-left truncate"
+      className: "flex-grow truncate text-left"
     }, children), multiselect && React.createElement(Checkbox, {
       checked: optionProps['aria-selected'],
       onChange: function onChange() {
         return null;
       },
-      className: "ml-2 flex items-center justify-end pointer-events-none overflow-visible p-px"
+      className: "pointer-events-none ml-2 flex items-center justify-end overflow-visible p-px"
     }));
   }) : React.createElement("li", {
     className: "yt-list__empty"
@@ -5251,8 +5260,7 @@ var convertToInputValue = function convertToInputValue(value) {
 };
 
 var useCombobox = function useCombobox(_ref, ref) {
-  var ariaLabel = _ref['aria-label'],
-      ariaLabelledBy = _ref['aria-labelledby'],
+  var ariaLabelledBy = _ref['aria-labelledby'],
       _ref$data = _ref.data,
       unfilteredData = _ref$data === void 0 ? [] : _ref$data,
       defaultValue = _ref.defaultValue,
@@ -5267,17 +5275,18 @@ var useCombobox = function useCombobox(_ref, ref) {
 
   var inputRef = useProxiedRef(ref);
   var listRef = React.useRef(null);
-  var popover = Popover$1.usePopoverState({
-    gutter: 4,
-    placement: 'bottom-start'
-  });
+
+  var _React$useState = React.useState(false),
+      open = _React$useState[0],
+      setOpen = _React$useState[1];
+
   var listId = React.useMemo(function () {
     return uuid.v4();
   }, []);
 
-  var _React$useState = React.useState(convertToInputValue(value)),
-      inputValue = _React$useState[0],
-      setInputValue = _React$useState[1];
+  var _React$useState2 = React.useState(convertToInputValue(value)),
+      inputValue = _React$useState2[0],
+      setInputValue = _React$useState2[1];
 
   var shouldFilterData = !inline || inline && inputValue !== convertToInputValue(value);
   var flattenedData = useFlattenedData(unfilteredData);
@@ -5285,9 +5294,9 @@ var useCombobox = function useCombobox(_ref, ref) {
     return shouldFilterData ? filterData(flattenedData, inputValue) : flattenedData;
   }, [shouldFilterData, inputValue, flattenedData]); // listbox/select change value _with_ the index, but combobox changes on select of an index (click/enter), so we need state
 
-  var _React$useState2 = React.useState(inputValue !== undefined ? getIndexFromValue(data, inputValue) : undefined),
-      currentIndex = _React$useState2[0],
-      setCurrentIndex = _React$useState2[1];
+  var _React$useState3 = React.useState(inputValue !== undefined ? getIndexFromValue(data, inputValue) : undefined),
+      currentIndex = _React$useState3[0],
+      setCurrentIndex = _React$useState3[1];
 
   var setInputValueByIndex = function setInputValueByIndex(index) {
     if (index !== undefined) {
@@ -5335,20 +5344,20 @@ var useCombobox = function useCombobox(_ref, ref) {
     if (inputValue && data.length && !isCurrentValue) {
       setCurrentIndex(0);
 
-      if (!popover.visible) {
-        popover.show();
+      if (!open) {
+        setOpen(true);
       }
     } else {
-      popover.hide();
+      setOpen(false);
     }
   }, [inputValue, data]);
   React.useEffect(function () {
-    if (popover.visible) {
+    if (open) {
       setCurrentIndex(getIndexFromValue(data, inputValue) || 0);
     } else {
       setCurrentIndex(undefined);
     }
-  }, [popover.visible]); // event handlers
+  }, [open]); // event handlers
 
   var handleInputBlur = function handleInputBlur(event) {
     event.persist();
@@ -5380,8 +5389,8 @@ var useCombobox = function useCombobox(_ref, ref) {
   };
 
   var handleInputClick = function handleInputClick(event) {
-    if (inline || !popover.visible && inputValue && data.length) {
-      popover.show();
+    if (inline || !open && inputValue && data.length) {
+      setOpen(true);
     }
 
     if (onClick) {
@@ -5403,7 +5412,7 @@ var useCombobox = function useCombobox(_ref, ref) {
         {
           event.preventDefault();
           setInputValue(convertToInputValue(value));
-          popover.hide();
+          setOpen(false);
           return;
         }
 
@@ -5415,7 +5424,7 @@ var useCombobox = function useCombobox(_ref, ref) {
           }
 
           setCurrentValue(currentIndex);
-          popover.hide();
+          setOpen(false);
           return;
         }
 
@@ -5424,7 +5433,7 @@ var useCombobox = function useCombobox(_ref, ref) {
       case keycode('home'):
       case keycode('end'):
         {
-          if (popover.visible) {
+          if (open) {
             event.preventDefault();
           }
 
@@ -5437,12 +5446,12 @@ var useCombobox = function useCombobox(_ref, ref) {
       listRef.current.dispatchEvent(createCustomKeyboardEvent(event));
     }
 
-    if (inline && !popover.visible) {
+    if (inline && !open) {
       if (event.keyCode === keycode('up') || event.keyCode === keycode('down')) {
         event.preventDefault();
         var initialIndex = event.keyCode === keycode('up') ? data.length - 1 : 0;
         setCurrentIndex(currentIndex !== undefined ? currentIndex : initialIndex);
-        popover.show();
+        setOpen(true);
       }
     }
 
@@ -5459,11 +5468,11 @@ var useCombobox = function useCombobox(_ref, ref) {
   var handleListboxClick = function handleListboxClick(event, index) {
     event.preventDefault();
     setCurrentValue(index);
-    popover.hide();
+    setOpen(false);
   };
 
   var combobox = {
-    'aria-expanded': popover.visible,
+    'aria-expanded': open,
     'aria-owns': listId,
     'aria-haspopup': 'listbox',
     role: 'combobox'
@@ -5504,15 +5513,10 @@ var useCombobox = function useCombobox(_ref, ref) {
     combobox: combobox,
     input: input,
     list: list,
-    popover: _extends({}, popover, {
-      visible: !data.length ? false : popover.visible,
-      container: {
-        tabIndex: -1,
-        'aria-label': ariaLabel,
-        'aria-labelledby': ariaLabelledBy,
-        unstable_initialFocusRef: inputRef
-      }
-    })
+    popover: {
+      open: open,
+      onOpenChange: setOpen
+    }
   };
 };
 
@@ -5561,8 +5565,7 @@ var useBoundingClientRectListener = function useBoundingClientRectListener(ref)
   return dimensions;
 };
 
-var _excluded$m = ["className", "style"],
-    _excluded2$2 = ["container"];
+var _excluded$m = ["className", "style"];
 var Combobox = /*#__PURE__*/React.forwardRef(function Combobox(props, ref) {
   var externalClassName = props.className,
       style = props.style,
@@ -5574,9 +5577,6 @@ var Combobox = /*#__PURE__*/React.forwardRef(function Combobox(props, ref) {
       popover = _useCombobox.popover,
       list = _useCombobox.list;
 
-  var container = popover.container,
-      base = _objectWithoutPropertiesLoose(popover, _excluded2$2);
-
   var internalRef = React.useRef(null);
   var selectDimensions = useBoundingClientRectListener(internalRef);
   var className = cn('inline-flex relative', {
@@ -5586,28 +5586,36 @@ var Combobox = /*#__PURE__*/React.forwardRef(function Combobox(props, ref) {
     className: className,
     "data-taco": "combobox",
     style: style
-  }, React.createElement(Popover$1.PopoverDisclosure, Object.assign({}, base, {
+  }, React.createElement(PopoverPrimitive.Root, Object.assign({}, popover), React.createElement(PopoverPrimitive.Anchor, {
+    asChild: true,
     ref: internalRef
-  }), function (_ref) {
-    var ref = _ref.ref;
-    return React.createElement("span", Object.assign({}, combobox, {
-      className: "w-full",
-      ref: ref
-    }), React.createElement(Input, Object.assign({}, input, {
-      autoComplete: "off",
-      button: props.inline ? React.createElement(IconButton, {
-        icon: popover.visible ? 'chevron-up' : 'chevron-down',
-        onClick: popover.toggle,
-        tabIndex: -1
-      }) : props.button
-    })));
-  }), !otherProps.disabled && React.createElement(Popover$1.Popover, Object.assign({}, base, container), React.createElement(ScrollableList, Object.assign({}, list, {
-    className: cn('border-blue w-auto max-w-[theme(spacing.96)] max-h-[calc(12rem+2px)]'),
+  }, React.createElement("div", Object.assign({}, combobox, {
+    className: "inline w-full",
+    ref: ref
+  }), React.createElement(Input, Object.assign({}, input, {
+    autoComplete: "off",
+    button: props.inline ? React.createElement(IconButton, {
+      appearance: "discrete",
+      className: "focus:!border-none focus:!shadow-none active:!border-none",
+      icon: popover.open ? 'chevron-up' : 'chevron-down',
+      onClick: function onClick() {
+        return popover.onOpenChange(true);
+      },
+      tabIndex: -1
+    }) : props.button
+  })))), React.createElement(PopoverPrimitive.Content, {
+    align: "start",
+    onOpenAutoFocus: function onOpenAutoFocus(event) {
+      event.preventDefault();
+    },
+    sideOffset: 4
+  }, React.createElement(ScrollableList, Object.assign({}, list, {
+    className: cn('border-blue max-h-[calc(12rem+2px)] w-auto max-w-[theme(spacing.96)]'),
     style: {
       minWidth: selectDimensions === null || selectDimensions === void 0 ? void 0 : selectDimensions.width
     },
-    tabIndex: popover.visible ? 0 : -1
-  }))));
+    tabIndex: popover.open ? 0 : -1
+  })))));
 });
 
 var format = function format(date, mask) {
@@ -6304,7 +6312,7 @@ var useMultiListbox = function useMultiListbox(_ref, ref) {
 };
 
 var _excluded$u = ["className"],
-    _excluded2$3 = ["className"];
+    _excluded2$2 = ["className"];
 var Listbox = /*#__PURE__*/React.forwardRef(function Listbox(props, ref) {
   var externalClassName = props.className,
       otherProps = _objectWithoutPropertiesLoose(props, _excluded$u);
@@ -6313,25 +6321,41 @@ var Listbox = /*#__PURE__*/React.forwardRef(function Listbox(props, ref) {
       list = _useListbox.list,
       input = _useListbox.input;
 
-  var className = cn('yt-listbox', externalClassName);
+  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)), React.createElement("input", Object.assign({}, input, {
+  }, 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$3);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded2$2);
 
   var _useMultiListbox = useMultiListbox(otherProps, ref),
       list = _useMultiListbox.list,
       input = _useMultiListbox.input;
 
-  var className = cn('yt-listbox', externalClassName);
+  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)), React.createElement("input", Object.assign({}, input, {
+  }, 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"
   })));
 });
@@ -6569,9 +6593,9 @@ var Checkbox$1 = function Checkbox(props) {
 };
 
 var _excluded$z = ["children", "value"],
-    _excluded2$4 = ["children", "defaultValue", "disabled", "invalid", "onChange", "orientation", "value"];
+    _excluded2$3 = ["children", "defaultValue", "disabled", "invalid", "onChange", "orientation", "value"];
 var getRadioGroupItemValueAsString = function getRadioGroupItemValueAsString(value) {
-  return value === undefined || value === null ? '' : String(value);
+  return value === null ? '' : String(value);
 };
 var findByValue$1 = function findByValue(values, valueAsString) {
   return values.find(function (value) {
@@ -6618,14 +6642,16 @@ var useRadioGroup = function useRadioGroup(props) {
       _props$orientation = props.orientation,
       orientation = _props$orientation === void 0 ? 'vertical' : _props$orientation,
       value = props.value,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded2$4);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded2$3);
 
   var values = React.useMemo(function () {
-    var _React$Children$map;
-
-    return (_React$Children$map = React.Children.map(children, function (child) {
-      return child.props.value;
-    })) !== null && _React$Children$map !== void 0 ? _React$Children$map : [];
+    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 {
@@ -6635,17 +6661,18 @@ var useRadioGroup = function useRadioGroup(props) {
   }, [disabled, invalid]);
   var valueProps;
 
-  if (defaultValue) {
+  if (onChange !== undefined) {
+    var handleChange = function handleChange(value) {
+      return onChange(findByValue$1(values, value));
+    };
+
     valueProps = {
-      defaultValue: getRadioGroupItemValueAsString(defaultValue) || undefined
+      onValueChange: handleChange,
+      value: value !== undefined ? getRadioGroupItemValueAsString(value) : undefined
     };
   } else {
-    var handleChange = onChange ? function (value) {
-      return onChange(findByValue$1(values, value));
-    } : undefined;
     valueProps = {
-      onValueChange: handleChange,
-      value: getRadioGroupItemValueAsString(value) || undefined
+      defaultValue: defaultValue !== undefined ? getRadioGroupItemValueAsString(defaultValue) : undefined
     };
   }
 
@@ -6663,9 +6690,9 @@ var RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(props, ref) {
       otherProps = _useRadioGroup.props;
 
   var className = cn('flex items-start', {
-    'flex-wrap space-x-4': props.orientation === 'horizontal',
-    'flex-col space-y-2': props.orientation === 'vertical'
-  }, props.className);
+    '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, {
@@ -6943,7 +6970,7 @@ var useDropTarget = function useDropTarget(onDrop) {
 };
 
 var _excluded$C = ["active", "children", "onDrop", "postfix", "prefix", "role"],
-    _excluded2$5 = ["children"];
+    _excluded2$4 = ["children"];
 var Item$2 = /*#__PURE__*/React__default.forwardRef(function Item(props, ref) {
   var active = props.active,
       children = props.children,
@@ -7053,11 +7080,12 @@ var Menu$1 = /*#__PURE__*/React__default.forwardRef(function Menu(props, ref) {
 Menu$1.Group = MenuGroup;
 var Navigation = /*#__PURE__*/React__default.forwardRef(function Navigation(props, ref) {
   var children = props.children,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded2$5);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded2$4);
 
   var className = cn('h-full flex flex-col bg-grey-light divide-y-2 divide-grey-light', props.className);
   return React__default.createElement("div", Object.assign({}, otherProps, {
     className: className,
+    "data-taco": "navigation",
     ref: ref
   }), children);
 });
@@ -7114,20 +7142,19 @@ var PageNumbers = function PageNumbers(_ref) {
   }));
 };
 
-var _excluded$D = ["aria-label", "aria-labelledby", "data", "disabled", "emptyValue", "id", "multiselect", "onClick", "readOnly", "showSelectedIcon", "value"];
+var _excluded$D = ["aria-label", "aria-labelledby", "data", "defaultValue", "disabled", "emptyValue", "id", "multiselect", "onClick", "onChange", "readOnly", "value"];
 var useSelect = function useSelect(_ref, ref) {
   var ariaLabel = _ref['aria-label'],
       ariaLabelledBy = _ref['aria-labelledby'],
       _ref$data = _ref.data,
       data = _ref$data === void 0 ? [] : _ref$data,
+      defaultValue = _ref.defaultValue,
       disabled = _ref.disabled,
       emptyValue = _ref.emptyValue,
       nativeId = _ref.id,
       multiselect = _ref.multiselect,
-      onClick = _ref.onClick,
+      onChange = _ref.onChange,
       readOnly = _ref.readOnly,
-      _ref$showSelectedIcon = _ref.showSelectedIcon,
-      showSelectedIcon = _ref$showSelectedIcon === void 0 ? false : _ref$showSelectedIcon,
       _ref$value = _ref.value,
       value = _ref$value === void 0 ? emptyValue : _ref$value,
       otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$D);
@@ -7137,36 +7164,39 @@ var useSelect = function useSelect(_ref, ref) {
 
   var searchData = useFlattenedData(data);
   var inputRef = useProxiedRef(ref);
-  var popover = Popover$1.usePopoverState({
-    gutter: 4,
-    placement: 'bottom-start'
-  });
+
+  var _React$useState = React.useState(false),
+      open = _React$useState[0],
+      setOpen = _React$useState[1];
+
   var id = React.useMemo(function () {
     return nativeId || "select_" + uuid.v4();
   }, [nativeId]);
+  var internalInputRef = React.useRef(null);
   var buttonId = id + "-button"; // support 'escape' resetting to the value that was set when the listbox opened
 
-  var _React$useState = React.useState(value),
-      lastValue = _React$useState[0],
-      setLastValue = _React$useState[1];
+  var _React$useState2 = React.useState(value),
+      lastValue = _React$useState2[0],
+      setLastValue = _React$useState2[1];
 
   React.useEffect(function () {
     setLastValue(value);
-  }, [popover.visible]); // event handlers
-
-  var handleButtonClick = function handleButtonClick(event) {
-    popover.toggle();
-
-    if (onClick) {
-      event.persist();
-      onClick(event);
+  }, [open]);
+  React.useEffect(function () {
+    if (defaultValue !== undefined && value === undefined) {
+      setInputValueByRef$1(internalInputRef.current, defaultValue);
     }
-  };
+  }, [defaultValue]);
+  React.useEffect(function () {
+    if (value !== undefined) {
+      setInputValueByRef$1(internalInputRef.current, value);
+    }
+  }, []); // event handlers
 
   var handleButtonKeyDown = function handleButtonKeyDown(event) {
     if (event.keyCode === keycode('up') || event.keyCode === keycode('down')) {
       event.preventDefault();
-      popover.toggle();
+      setOpen(true);
     }
   };
 
@@ -7180,7 +7210,7 @@ var useSelect = function useSelect(_ref, ref) {
             setInputValueByRef$1(inputRef.current, lastValue);
           }
 
-          popover.hide();
+          setOpen(false);
           break;
         }
 
@@ -7191,7 +7221,7 @@ var useSelect = function useSelect(_ref, ref) {
             event.preventDefault();
           }
 
-          popover.hide();
+          setOpen(false);
           break;
         }
     }
@@ -7205,7 +7235,7 @@ var useSelect = function useSelect(_ref, ref) {
     event.preventDefault();
 
     if (!multiselect) {
-      popover.hide();
+      setOpen(false);
     }
   };
 
@@ -7230,21 +7260,47 @@ var useSelect = function useSelect(_ref, ref) {
       var item = findByValue(searchData, value);
 
       if (item) {
-        text = showSelectedIcon && item.icon ? React.createElement(React.Fragment, null, React.cloneElement(item.icon, {
-          className: cn(item.icon.props.className, 'mr-1')
+        text = item.icon ? React.createElement(React.Fragment, null, React.cloneElement(item.icon, {
+          className: cn(item.icon.props.className, 'mr-1 -mt-px')
         }), item.text) : item.text;
       }
     }
   }
 
+  var handleInputChange = function handleInputChange(event) {
+    event.persist();
+
+    if (onChange) {
+      var _item$path$split, _item$path;
+
+      var _item = findByValue(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 : [];
+
+      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(searchData.find(function (i) {
+            return i.path === lastPath;
+          }));
+        });
+      }
+
+      onChange(event);
+    }
+  };
+
   var button = {
-    'aria-expanded': popover.visible,
     'aria-haspopup': 'listbox',
     'aria-label': ariaLabel ? ariaLabel + " " + text : undefined,
     'aria-labelledby': ariaLabelledBy ? ariaLabelledBy + " " + buttonId : undefined,
     disabled: disabled,
     id: buttonId,
-    onClick: !disabled && !readOnly ? handleButtonClick : undefined,
     onKeyDown: !disabled && !readOnly ? handleButtonKeyDown : undefined,
     type: 'button'
   };
@@ -7256,30 +7312,35 @@ var useSelect = function useSelect(_ref, ref) {
     disabled: disabled,
     emptyValue: emptyValue,
     onClick: handleListboxClick,
+    onChange: function onChange(event) {
+      setInputValueByRef$1(internalInputRef.current, event.detail.value);
+    },
     onKeyDown: handleListboxKeyDown,
     ref: inputRef,
     value: value,
     multiselect: multiselect
   });
 
+  var input = {
+    onChange: handleInputChange,
+    ref: internalInputRef,
+    value: value !== null && value !== void 0 ? value : ''
+  };
   return {
     button: button,
     listbox: listbox,
-    popover: _extends({}, popover, {
-      container: {
-        tabIndex: -1,
-        'aria-label': ariaLabel,
-        'aria-labelledby': ariaLabelledBy
-      }
-    }),
+    input: input,
+    popover: {
+      open: open,
+      onOpenChange: setOpen
+    },
     text: text,
     more: more
   };
 };
 
 var _excluded$E = ["autoFocus", "className", "highlighted", "style"],
-    _excluded2$6 = ["container"],
-    _excluded3 = ["editable"];
+    _excluded2$5 = ["editable"];
 var BaseSelect = /*#__PURE__*/React.forwardRef(function BaseSelect(props, ref) {
   var autoFocus = props.autoFocus,
       externalClassName = props.className,
@@ -7290,19 +7351,19 @@ var BaseSelect = /*#__PURE__*/React.forwardRef(function BaseSelect(props, ref) {
       button = _useSelect.button,
       listbox = _useSelect.listbox,
       popover = _useSelect.popover,
+      input = _useSelect.input,
       text = _useSelect.text,
       _useSelect$more = _useSelect.more,
       more = _useSelect$more === void 0 ? 0 : _useSelect$more;
 
-  var container = popover.container,
-      base = _objectWithoutPropertiesLoose(popover, _excluded2$6);
-
   var internalRef = React.useRef(null);
   var selectDimensions = useBoundingClientRectListener(internalRef);
   var className = cn('inline-flex relative w-full', {
     'yt-select--readonly': props.readOnly
   }, externalClassName);
-  var inputClassname = cn(getInputClasses(props), 'text-left pr-0');
+  var inputClassname = cn(getInputClasses(props), 'text-left pr-0', {
+    'border-blue': popover.open
+  });
   React.useEffect(function () {
     if (autoFocus && internalRef.current) {
       internalRef.current.focus();
@@ -7310,7 +7371,9 @@ var BaseSelect = /*#__PURE__*/React.forwardRef(function BaseSelect(props, ref) {
   }, []);
 
   var renderMultiSelection = function renderMultiSelection() {
-    return React.createElement(React.Fragment, null, React.createElement("span", null, text), more > 0 && React.createElement(Badge, {
+    return React.createElement(React.Fragment, null, React.createElement("span", {
+      className: "flex-grow truncate text-left"
+    }, text), more > 0 && React.createElement(Badge, {
       className: "ml-2"
     }, "+" + more));
   };
@@ -7320,34 +7383,34 @@ var BaseSelect = /*#__PURE__*/React.forwardRef(function BaseSelect(props, ref) {
     style: {
       minWidth: selectDimensions === null || selectDimensions === void 0 ? void 0 : selectDimensions.width
     },
-    tabIndex: popover.visible ? 0 : -1
+    tabIndex: popover.open ? 0 : -1
   });
 
   return React.createElement("span", {
     className: className,
     "data-taco": "select",
     style: style
-  }, React.createElement(Popover$1.PopoverDisclosure, Object.assign({}, base, {
+  }, React.createElement(PopoverPrimitive.Root, Object.assign({}, popover), React.createElement(PopoverPrimitive.Trigger, Object.assign({}, button, {
+    className: inputClassname,
     ref: internalRef
-  }), function (_ref) {
-    var disclosureRef = _ref.ref;
-    return React.createElement("button", Object.assign({
-      ref: disclosureRef
-    }, button, {
-      className: inputClassname
-    }), props.multiselect ? renderMultiSelection() : React.createElement("span", {
-      className: "flex-grow"
-    }, text), React.createElement("span", {
-      className: "flex h-8 w-8 items-center justify-center"
-    }, React.createElement(Icon, {
-      className: "group-hover:text-grey-darkest text-black",
-      name: popover.visible ? 'chevron-up' : 'chevron-down'
-    })));
-  }), !otherProps.disabled && React.createElement(Popover$1.Popover, Object.assign({}, base, container), props.multiselect ? React.createElement(MultiListbox, Object.assign({}, commonListboxProps)) : React.createElement(Listbox, Object.assign({}, commonListboxProps))));
+  }), props.multiselect ? renderMultiSelection() : React.createElement("span", {
+    className: "flex-grow truncate text-left"
+  }, text), React.createElement("span", {
+    className: "flex h-8 w-8 items-center justify-center"
+  }, React.createElement(Icon, {
+    className: "pointer-events-none",
+    name: popover.open ? 'chevron-up' : 'chevron-down'
+  }))), React.createElement(PopoverPrimitive.Content, {
+    align: "start",
+    sideOffset: 4
+  }, props.multiselect ? React.createElement(MultiListbox, Object.assign({}, commonListboxProps)) : React.createElement(Listbox, Object.assign({}, commonListboxProps))), React.createElement("input", Object.assign({}, input, {
+    className: "hidden",
+    type: "text"
+  }))));
 });
 var Select = /*#__PURE__*/React.forwardRef(function Select(props, ref) {
   var editable = props.editable,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded3);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded2$5);
 
   if (editable) {
     return React.createElement(Combobox, Object.assign({}, otherProps, {
@@ -7474,6 +7537,7 @@ var Pagination = /*#__PURE__*/React.forwardRef(function Pagination(props, ref) {
   var className = cn('inline-flex relative justify-between items-center', props.className);
   return React.createElement("div", Object.assign({}, otherProps, {
     className: className,
+    "data-taco": "pagination",
     ref: ref
   }), showPageSize && React.createElement("span", {
     className: "mr-4"
@@ -8105,7 +8169,7 @@ var useRowActions = function useRowActions(inlineEditingUniqueId, handlers, acti
 };
 
 var _excluded$I = ["onChange"],
-    _excluded2$7 = ["onChange"];
+    _excluded2$6 = ["onChange"];
 
 var toggleBetween = function toggleBetween(fromRowIndex, toRowIndex) {
   var fromIndex = toRowIndex < fromRowIndex ? toRowIndex : fromRowIndex;
@@ -8173,7 +8237,7 @@ var useRowSelect = function useRowSelect(onSelectedRows) {
                 rows = _ref2.rows;
 
             var _row$getToggleRowSele = row.getToggleRowSelectedProps(),
-                props = _objectWithoutPropertiesLoose(_row$getToggleRowSele, _excluded2$7); // row.index refers to the index in the original data, not the current index
+                props = _objectWithoutPropertiesLoose(_row$getToggleRowSele, _excluded2$6); // row.index refers to the index in the original data, not the current index
 
 
             var sortedIndex = rows.findIndex(function (r) {
@@ -8467,7 +8531,7 @@ var useRowDraggable = function useRowDraggable(onRowDrag) {
 };
 
 var _excluded$J = ["children", "data", "dangerouslyHijackGlobalKeyboardNavigation", "onRowClick", "onRowDrag", "onSelectedRows", "rowClassName", "rowExpansionRenderer", "rowHeight", "selectedRows", "disableSorting", "manualSorting", "onSort", "sortRules", "disablePagination", "length", "onPaginate", "pageSize", "pageIndex", "inlineEditingUniqueId", "onRowCreate", "actions", "onRowEdit", "onRowCopy", "onRowDelete", "onRowActive", "windowed"],
-    _excluded2$8 = ["headerGroups", "rows", "sortedRows", "prepareRow", "state", "page", "gotoPage", "setPageSize"];
+    _excluded2$7 = ["headerGroups", "rows", "sortedRows", "prepareRow", "state", "page", "gotoPage", "setPageSize"];
 
 var useTableRowActive = function useTableRowActive(activeIndex, rows, rowExpansionRenderer, handleonRowActive) {
   React__default.useEffect(function () {
@@ -8631,7 +8695,7 @@ var useTable = function useTable(props, ref) {
       page = _useReactTable.page,
       gotoPage = _useReactTable.gotoPage,
       setPageSize = _useReactTable.setPageSize,
-      instance = _objectWithoutPropertiesLoose(_useReactTable, _excluded2$8);
+      instance = _objectWithoutPropertiesLoose(_useReactTable, _excluded2$7);
 
   useTablePaginationListener(disablePagination, onPaginate, state);
   useTableSortingListener(data, sortedRows, onSort, !!manualSorting, state);
@@ -8935,7 +8999,7 @@ PaginatedTable.Group = function () {
 };
 
 var _excluded$N = ["height"],
-    _excluded2$9 = ["emptyStateRenderer", "length", "loadMore"];
+    _excluded2$8 = ["emptyStateRenderer", "length", "loadMore"];
 var ROW_HEIGHT = 40;
 var VariableRow = /*#__PURE__*/React__default.memo(function (_ref) {
   var data = _ref.data,
@@ -9003,7 +9067,7 @@ var WindowedTable = /*#__PURE__*/React__default.forwardRef(function WindowedTabl
       emptyStateRenderer = _props$emptyStateRend === void 0 ? DefaultEmptyState : _props$emptyStateRend,
       length = props.length,
       loadMore = props.loadMore,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded2$9);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded2$8);
 
   var _useTable = useTable(_extends({}, otherProps, {
     windowed: true
@@ -9308,8 +9372,8 @@ var useTableRowCreation = function useTableRowCreation(data, tableRef) {
 };
 
 var _excluded$O = ["id", "defaultId", "children", "onChange", "orientation"],
-    _excluded2$a = ["id", "disabled"],
-    _excluded3$1 = ["id"];
+    _excluded2$9 = ["id", "disabled"],
+    _excluded3 = ["id"];
 var Tabs = /*#__PURE__*/React.forwardRef(function Tabs(props, ref) {
   var id = props.id,
       defaultId = props.defaultId,
@@ -9343,7 +9407,7 @@ var TabList = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
 var TabTrigger = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
   var id = props.id,
       disabled = props.disabled,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded2$a);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded2$9);
 
   var className = cn('yt-tab bg-transparent border-b-2 border-transparent text-grey-darkest m-0 py-2 px-4', disabled ? 'cursor-not-allowed !text-grey' : 'cursor-pointer rounded-t hover:border-grey-light hover:text-black active:yt-focus active:border-blue focus:yt-focus focus:border-blue', props.className);
   return React.createElement(TabsPrimitive.Trigger, Object.assign({}, otherProps, {
@@ -9358,7 +9422,7 @@ var TabTrigger = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
 });
 var TabContent = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
   var id = props.id,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded3$1);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded3);
 
   var className = cn('yt-tab__panel outline-none', props.className);
   return React.createElement(TabsPrimitive.Content, Object.assign({}, otherProps, {
@@ -9882,6 +9946,7 @@ var useOnClickOutside = function useOnClickOutside(ref, callback) {
 };
 
 exports.Accordion = Accordion;
+exports.Backdrop = Backdrop;
 exports.Badge = Badge;
 exports.Banner = Banner;
 exports.Button = Button$1;