@economic/taco 0.0.1-alpha.8 → 0.0.5-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');
@@ -36,7 +35,6 @@ var TabsPrimitive = require('@radix-ui/react-tabs');
 var PrimitiveSwitch = require('@radix-ui/react-switch');
 var Joyride = require('react-joyride');
 var Joyride__default = _interopDefault(Joyride);
-var plugin = _interopDefault(require('tailwindcss/plugin'));
 
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -3897,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
   }));
@@ -4277,8 +4285,18 @@ var PopoverContext = /*#__PURE__*/React.createContext({
   ref: null
 });
 var Trigger$2 = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _props$children;
+
   var context = React.useContext(PopoverContext);
+  var children = props.children;
+
+  if (React.isValidElement(props.children) && typeof ((_props$children = props.children) === null || _props$children === void 0 ? void 0 : _props$children.type) === 'function') {
+    console.warn("Popover.Trigger requires its child to forwardRef so that it can attach to the dom element. Did you mean to wrap '" + props.children.type.name + "' in React.forwardRef()? Taco has wrapped '" + props.children.type.name + "' in a 'span' to maintain functionality, but this may cause unintended behaviour");
+    children = React.createElement("span", null, props.children);
+  }
+
   return React.createElement(PopoverPrimitive.Trigger, Object.assign({}, context.props, props, {
+    children: children,
     ref: mergeRefs([context.ref, ref]),
     asChild: true
   }));
@@ -4961,7 +4979,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,
@@ -4979,7 +4999,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,
@@ -5006,13 +5026,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"
@@ -5259,8 +5279,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,
@@ -5275,17 +5294,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);
@@ -5293,9 +5313,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) {
@@ -5343,20 +5363,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();
@@ -5388,8 +5408,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) {
@@ -5411,7 +5431,7 @@ var useCombobox = function useCombobox(_ref, ref) {
         {
           event.preventDefault();
           setInputValue(convertToInputValue(value));
-          popover.hide();
+          setOpen(false);
           return;
         }
 
@@ -5423,7 +5443,7 @@ var useCombobox = function useCombobox(_ref, ref) {
           }
 
           setCurrentValue(currentIndex);
-          popover.hide();
+          setOpen(false);
           return;
         }
 
@@ -5432,7 +5452,7 @@ var useCombobox = function useCombobox(_ref, ref) {
       case keycode('home'):
       case keycode('end'):
         {
-          if (popover.visible) {
+          if (open) {
             event.preventDefault();
           }
 
@@ -5445,12 +5465,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);
       }
     }
 
@@ -5467,11 +5487,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'
@@ -5512,15 +5532,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
+    }
   };
 };
 
@@ -5569,8 +5584,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,
@@ -5582,9 +5596,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', {
@@ -5594,28 +5605,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) {
@@ -6312,7 +6331,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);
@@ -6321,25 +6340,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"
   })));
 });
@@ -6577,9 +6612,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) {
@@ -6626,14 +6661,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 {
@@ -6643,17 +6680,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
     };
   }
 
@@ -6671,9 +6709,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, {
@@ -6951,7 +6989,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,
@@ -7061,7 +7099,7 @@ 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, {
@@ -7123,20 +7161,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);
@@ -7146,36 +7183,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);
     }
   };
 
@@ -7189,7 +7229,7 @@ var useSelect = function useSelect(_ref, ref) {
             setInputValueByRef$1(inputRef.current, lastValue);
           }
 
-          popover.hide();
+          setOpen(false);
           break;
         }
 
@@ -7200,7 +7240,7 @@ var useSelect = function useSelect(_ref, ref) {
             event.preventDefault();
           }
 
-          popover.hide();
+          setOpen(false);
           break;
         }
     }
@@ -7214,7 +7254,7 @@ var useSelect = function useSelect(_ref, ref) {
     event.preventDefault();
 
     if (!multiselect) {
-      popover.hide();
+      setOpen(false);
     }
   };
 
@@ -7239,21 +7279,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'
   };
@@ -7265,30 +7331,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,
@@ -7299,19 +7370,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();
@@ -7319,7 +7390,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));
   };
@@ -7329,34 +7402,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, {
@@ -8115,7 +8188,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;
@@ -8183,7 +8256,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) {
@@ -8407,10 +8480,11 @@ var prepareRow$1 = function prepareRow(row, _ref) {
 var visibleColumns = function visibleColumns(columns) {
   return [{
     id: 'draggable',
-    className: 'yt-table__cell--draggable',
+    className: 'yt-table__cell--draggable flex-col px-0',
     Cell: function Cell() {
       return React__default.createElement(Icon, {
-        name: "drag"
+        name: "drag",
+        className: "text-grey-darkest invisible w-[20px] cursor-grab"
       });
     },
     flex: '0 0 20px'
@@ -8477,7 +8551,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 () {
@@ -8641,7 +8715,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);
@@ -8702,9 +8776,10 @@ var _excluded$K = ["row", "index", "instance", "headerGroups"];
 
 var renderCell = function renderCell(cell, row) {
   var props = _extends({}, cell.getCellProps(), {
-    className: cn('yt-table__cell', cell.column.className, {
+    className: cn('yt-table__cell flex-1 truncate p-2 align-middle', cell.column.className, {
       'justify-start text-left': cell.column.align === 'left',
-      'justify-end text-right': cell.column.align === 'right'
+      'justify-end text-right': cell.column.align === 'right',
+      'text-center': !cell.column.align
     }),
     style: _extends({}, cell.column.style, {
       flex: typeof cell.column.flex === 'function' ? cell.column.flex(row) : cell.column.flex
@@ -8738,8 +8813,8 @@ var Row = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       minHeight: rowHeight ? rowHeight + "px" : undefined,
       paddingLeft: row.depth ? row.depth * 2 + "rem" : undefined
     }),
-    className: cn('yt-table__row', {
-      'yt-table__row--active': activeIndex === index,
+    className: cn('yt-table__row border-grey-light flex border-b min-h-[2.5rem] hover:bg-grey-light', {
+      'yt-table__row--active bg-grey-light hover:bg-grey-light': activeIndex === index,
       'yt-table__row--clickable': !!onRowClick,
       'yt-table__row--dragging': !!row.isDragging,
       'yt-table__row--editing': !!row.isEditing
@@ -8805,11 +8880,12 @@ var Column = function Column(_ref) {
   var props = _extends({}, cell.getHeaderProps(), cell.getSortByToggleProps && cell.getSortByToggleProps({
     title: undefined
   }), {
-    className: cn('yt-table__cell', cell.className, {
+    className: cn('yt-table__cell flex flex-1 truncate p-2 align-middle text-grey-darkest hover:text-black', cell.className, {
       'yt-table__cell__group': !!cell.columns,
-      'yt-table__cell--disable-sort': cell.disableSorting,
+      'cursor-pointer': !cell.disableSorting,
       'justify-start text-left': cell.align === 'left',
-      'justify-end text-right': cell.align === 'right'
+      'justify-end text-right': cell.align === 'right',
+      'justify-center text-center': !cell.align
     }),
     style: _extends({}, cell.style, {
       flex: cell.flex
@@ -8823,7 +8899,9 @@ var Column = function Column(_ref) {
   return React__default.createElement("div", Object.assign({}, props, {
     key: cell.id,
     "data-taco": "table-column"
-  }), React__default.createElement("span", null, cell.render('Header')), cell.isSorted ? React__default.createElement(Icon, {
+  }), React__default.createElement("span", {
+    className: "truncate"
+  }, cell.render('Header')), cell.isSorted ? React__default.createElement(Icon, {
     name: cell.isSortedDesc ? 'chevron-down-solid' : 'chevron-up-solid'
   }) : null);
 };
@@ -8847,7 +8925,7 @@ var BaseTable = /*#__PURE__*/React__default.forwardRef(function BaseTable(props,
       tableRef.current.focus();
     }
   }, []);
-  var className = cn('yt-table', props.className);
+  var className = cn('yt-table flex flex-col focus:yt-focus focus:rounded-sm', props.className);
   return React__default.createElement("div", Object.assign({}, otherProps, {
     role: "table",
     className: className,
@@ -8860,7 +8938,7 @@ var BaseTable = /*#__PURE__*/React__default.forwardRef(function BaseTable(props,
     return React__default.createElement("div", {
       key: index,
       role: "row",
-      className: "yt-table__row"
+      className: "border-grey-light flex h-auto min-h-[2.5rem] w-full select-none border-b border-t-0 border-b-2 font-bold"
     }, headerGroup.headers.map(function (cell, index) {
       return React__default.createElement(Column, {
         key: index,
@@ -8945,7 +9023,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,
@@ -9013,7 +9091,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
@@ -9318,8 +9396,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,
@@ -9353,7 +9431,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, {
@@ -9368,7 +9446,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, {
@@ -9423,315 +9501,6 @@ var Switch = /*#__PURE__*/React.forwardRef(function Switch(props, ref) {
   return element;
 });
 
-
-
-var tailwindcssAriaAttributes = {
-    __proto__: null
-};
-
-function getCjsExportFromNamespace (n) {
-	return n && n['default'] || n;
-}
-
-var require$$0 = getCjsExportFromNamespace(tailwindcssAriaAttributes);
-
-var tailwind_config = {
-  theme: {
-    colors: {
-      transparent: 'transparent',
-      current: 'currentColor',
-      white: '#fff',
-      black: '#1c1c1c',
-      grey: {
-        lightest: '#fafafa',
-        light: '#efefef',
-        DEFAULT: '#ebebeb',
-        dark: '#ddd',
-        darker: '#acacac',
-        darkest: '#595959'
-      },
-      purple: {
-        lightest: '#585c74',
-        light: '#4b4f64',
-        DEFAULT: '#3d4153',
-        dark: '#353a48'
-      },
-      blue: {
-        lightest: '#e5efff',
-        light: '#6ba4ff',
-        DEFAULT: '#0063ff',
-        dark: '#0158e2'
-      },
-      red: {
-        lightest: '#f3cfc5',
-        light: '#e67355',
-        DEFAULT: '#cf3c16',
-        dark: '#b12d0b'
-      },
-      green: {
-        lightest: '#c4e1d7',
-        light: '#5caf93',
-        DEFAULT: '#138760',
-        dark: '#0c5f43'
-      },
-      yellow: {
-        lightest: '#fff1c3',
-        light: '#fddd70',
-        DEFAULT: '#ffc810',
-        dark: '#e89c2e'
-      }
-    },
-    fontFamily: {
-      display: ['Helvetica, Arial, sans-serif'],
-      mono: ['Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace']
-    },
-    extend: {
-      cursor: {
-        grab: 'grab',
-        grabbing: 'grabbing'
-      },
-      listStyleType: {
-        circle: 'circle'
-      },
-      spacing: {
-        18: '4.5rem',
-        72: '18rem',
-        80: '20rem',
-        88: '22rem',
-        96: '24rem',
-        104: '26rem',
-        112: '28rem',
-        120: '30rem',
-        128: '32rem',
-        xs: '32rem',
-        sm: '48rem',
-        md: '64rem',
-        lg: '80rem'
-      }
-    }
-  },
-  plugins: [/*#__PURE__*/require$$0, /*#__PURE__*/plugin(function (_ref) {
-    var addUtilities = _ref.addUtilities,
-        theme = _ref.theme;
-    // ideally we would do this using the @layer utilities directive, but
-    // that causes issues in tools like tailwind where the typescript is loaded before the css
-    // resulting in "yt-focus class does not exist" errors
-    addUtilities({
-      '.fixed-center': {
-        position: 'fixed',
-        left: '50%',
-        top: '50%',
-        transform: 'translateX(-50%) translateY(-50%)'
-      },
-      '.absolute-center': {
-        position: 'absolute',
-        left: '50%',
-        top: '50%',
-        transform: 'translateX(-50%) translateY(-50%)'
-      },
-      '.absolute-center-x': {
-        position: 'absolute',
-        left: '50%',
-        transform: 'translateX(-50%)'
-      },
-      '.absolute-center-y': {
-        position: 'absolute',
-        top: '50%',
-        transform: 'translateY(-50%)'
-      },
-      // WCAG contrast combinations
-      '.wcag-black': {
-        background: theme('colors.black'),
-        color: theme('colors.white')
-      },
-      '.wcag-white': {
-        background: theme('colors.white'),
-        color: theme('colors.black')
-      },
-      '.wcag-grey-lightest': {
-        background: theme('colors.grey.lightest'),
-        color: theme('colors.black')
-      },
-      '.wcag-grey-light': {
-        background: theme('colors.grey.light'),
-        color: theme('colors.black')
-      },
-      '.wcag-grey': {
-        background: theme('colors.grey.DEFAULT'),
-        color: theme('colors.black')
-      },
-      '.wcag-grey-dark': {
-        background: theme('colors.grey.dark'),
-        color: theme('colors.black')
-      },
-      '.wcag-grey-darker': {
-        background: theme('colors.grey.darker'),
-        color: theme('colors.white')
-      },
-      '.wcag-grey-darkest': {
-        background: theme('colors.grey.darkest'),
-        color: theme('colors.white')
-      },
-      '.wcag-purple-lightest': {
-        background: theme('colors.purple.lightest'),
-        color: theme('colors.white')
-      },
-      '.wcag-purple-light': {
-        background: theme('colors.purple.light'),
-        color: theme('colors.white')
-      },
-      '.wcag-purple': {
-        background: theme('colors.purple.DEFAULT'),
-        color: theme('colors.white')
-      },
-      '.wcag-purple-dark': {
-        background: theme('colors.purple.dark'),
-        color: theme('colors.white')
-      },
-      '.wcag-blue-lightest': {
-        background: theme('colors.blue.lightest'),
-        color: theme('colors.blue.dark')
-      },
-      '.wcag-blue-light': {
-        background: theme('colors.blue.light'),
-        color: theme('colors.white')
-      },
-      '.wcag-blue': {
-        background: theme('colors.blue.DEFAULT'),
-        color: theme('colors.white')
-      },
-      '.wcag-blue-dark': {
-        background: theme('colors.blue.dark'),
-        color: theme('colors.white')
-      },
-      '.wcag-red-lightest': {
-        background: theme('colors.red.lightest'),
-        color: theme('colors.red.dark')
-      },
-      '.wcag-red-light': {
-        background: theme('colors.red.light'),
-        color: theme('colors.white')
-      },
-      '.wcag-red': {
-        background: theme('colors.red.DEFAULT'),
-        color: theme('colors.white')
-      },
-      '.wcag-red-dark': {
-        background: theme('colors.red.dark'),
-        color: theme('colors.white')
-      },
-      '.wcag-green-lightest': {
-        background: theme('colors.green.lightest'),
-        color: theme('colors.black')
-      },
-      '.wcag-green-light': {
-        background: theme('colors.green.light'),
-        color: theme('colors.black')
-      },
-      '.wcag-green': {
-        background: theme('colors.green.DEFAULT'),
-        color: theme('colors.white')
-      },
-      '.wcag-green-dark': {
-        background: theme('colors.green.dark'),
-        color: theme('colors.white')
-      },
-      '.wcag-yellow-lightest': {
-        background: theme('colors.yellow.lightest'),
-        color: theme('colors.black')
-      },
-      '.wcag-yellow-light': {
-        background: theme('colors.yellow.light'),
-        color: theme('colors.black')
-      },
-      '.wcag-yellow': {
-        background: theme('colors.yellow.DEFAULT'),
-        color: theme('colors.black')
-      },
-      '.wcag-yellow-dark': {
-        background: theme('colors.yellow.dark'),
-        color: theme('colors.white')
-      },
-      // Legacy
-      '.yt-transparent': {
-        background: theme('colors.transparent'),
-        color: theme('colors.blue.DEFAULT')
-      },
-      '.yt-focus': {
-        'box-shadow': '0 0 0 0.15rem rgba(0, 143, 255, 0.25)',
-        outline: 'none'
-      },
-      '.yt-focus-green': {
-        'box-shadow': '0 0 0 0.15rem rgba(0, 213, 165, 0.25)',
-        outline: 'none'
-      },
-      '.yt-focus-yellow': {
-        'box-shadow': '0 0 0 0.15rem rgba(239, 125, 0, 0.25)',
-        outline: 'none'
-      },
-      '.yt-focus-red': {
-        'box-shadow': '0 0 0 0.15rem rgba(253, 99, 97, 0.25)',
-        outline: 'none'
-      },
-      '.yt-blue-solid': {
-        background: theme('colors.blue.DEFAULT'),
-        color: theme('colors.white')
-      },
-      '.yt-blue-inverted': {
-        background: theme('colors.transparent'),
-        border: "1px solid " + theme('colors.blue.DEFAULT'),
-        color: theme('colors.blue.DEFAULT')
-      },
-      '.yt-yellow-solid': {
-        background: theme('colors.yellow.DEFAULT'),
-        color: theme('colors.black')
-      },
-      '.yt-yellow-inverted': {
-        background: theme('colors.transparent'),
-        border: "1px solid " + theme('colors.yellow.DEFAULT'),
-        color: theme('colors.yellow.DEFAULT')
-      },
-      '.yt-red-solid': {
-        background: theme('colors.red.DEFAULT'),
-        color: theme('colors.white')
-      },
-      '.yt-red-inverted': {
-        background: theme('colors.transparent'),
-        border: "1px solid " + theme('colors.red.DEFAULT'),
-        color: theme('colors.red.DEFAULT')
-      },
-      '.yt-green-solid': {
-        background: theme('colors.green.DEFAULT'),
-        color: theme('colors.white')
-      },
-      '.yt-green-inverted': {
-        background: theme('colors.transparent'),
-        border: "1px solid " + theme('colors.green.DEFAULT'),
-        color: theme('colors.green.DEFAULT')
-      },
-      '.yt-grey-solid': {
-        background: theme('colors.grey.DEFAULT'),
-        color: theme('colors.black')
-      },
-      '.yt-grey-inverted': {
-        background: theme('colors.transparent'),
-        border: "1px solid " + theme('colors.grey.darkest'),
-        color: theme('colors.grey.darkest')
-      },
-      '.yt-shadow': {
-        'box-shadow': '0px 1px 3px 0px rgba(89, 85, 98, 0.35), 0px 0px 1px 0px rgba(89, 85, 98, 0.2)'
-      },
-      '.yt-shadow-inset': {
-        'box-shadow': 'inset 0px 1px 4px 0px rgba(89, 85, 98, 0.3), inset 0px 0px 1px 0px rgba(89, 85, 98, 0.2)'
-      },
-      '.pointer-events-all': {
-        'pointer-events': 'all'
-      }
-    });
-  })]
-};
-var tailwind_config_1 = tailwind_config.theme;
-
 var _excluded$R = ["autoStart", "onComplete", "onClose", "onReady", "spotlightClicks", "disableCloseOnEsc", "disableScrollParentFix"];
 
 var Tooltip$1 = function Tooltip(_ref) {
@@ -9746,8 +9515,8 @@ var Tooltip$1 = function Tooltip(_ref) {
       size = _ref.size,
       locale = _ref.locale,
       disableTourSkipOnEsc = _ref.disableTourSkipOnEsc;
-  var skipButtonRef = React__default.useRef(null);
-  React__default.useEffect(function () {
+  var skipButtonRef = React.useRef(null);
+  React.useEffect(function () {
     var onWindowKeyDown = function onWindowKeyDown(event) {
       if (!disableTourSkipOnEsc) {
         if (event.keyCode === keycode('esc') && skipButtonRef.current !== null) {
@@ -9763,20 +9532,20 @@ var Tooltip$1 = function Tooltip(_ref) {
       window.removeEventListener('keydown', onWindowKeyDown);
     };
   }, []);
-  return React__default.createElement("div", Object.assign({}, tooltipProps, {
-    className: "yt-tour__step bg-white p-4 w-88 rounded relative"
-  }), React__default.createElement(IconButton, Object.assign({}, skipProps, {
+  return React.createElement("div", Object.assign({}, tooltipProps, {
+    className: "yt-tour__step w-88 relative rounded bg-white p-4"
+  }), React.createElement(IconButton, Object.assign({}, skipProps, {
     ref: skipButtonRef,
     appearance: "discrete",
     icon: "close",
     title: locale.skip,
     "aria-label": locale.skip,
-    className: "absolute top-0 mt-1 right-0 mr-1"
-  })), step.title && React__default.createElement("h5", null, step.title), step.content, React__default.createElement(Group, {
+    className: "absolute top-0 right-0 mt-1 mr-1"
+  })), step.title && React.createElement("h5", null, step.title), step.content, React.createElement(Group, {
     className: "mt-4 justify-end"
-  }, index > 0 && React__default.createElement(Button$1, Object.assign({}, backProps, {
+  }, index > 0 && React.createElement(Button$1, Object.assign({}, backProps, {
     appearance: "discrete"
-  }), locale.back), React__default.createElement(Button$1, Object.assign({}, primaryProps, {
+  }), locale.back), React.createElement(Button$1, Object.assign({}, primaryProps, {
     appearance: "primary"
   }), continuous ? isLastStep ? locale.last + " (" + (index + 1) + "/" + size + ")" : locale.next + " (" + (index + 1) + "/" + size + ")" : locale.close)));
 }; // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -9800,7 +9569,7 @@ var Tour = function Tour(props) {
       rest = _objectWithoutPropertiesLoose(props, _excluded$R);
 
   var steps = React.useMemo(function () {
-    return React__default.Children.map(props.children, function (child) {
+    return React.Children.map(props.children, function (child) {
       var step = {
         disableBeacon: !child.props.showBeacon,
         target: child.props.selector,
@@ -9811,7 +9580,7 @@ var Tour = function Tour(props) {
       return step;
     });
   }, [props.children]);
-  var getStep = React__default.useCallback(function (selector) {
+  var getStep = React.useCallback(function (selector) {
     var _props$children$find;
 
     return (_props$children$find = props.children.find(function (child) {
@@ -9839,7 +9608,7 @@ var Tour = function Tour(props) {
     }
   }
 
-  return React__default.createElement(Joyride__default, Object.assign({}, rest, {
+  return React.createElement(Joyride__default, Object.assign({}, rest, {
     run: run,
     steps: steps,
     showProgress: true,
@@ -9847,7 +9616,7 @@ var Tour = function Tour(props) {
       disableAnimation: true
     },
     tooltipComponent: function tooltipComponent(tooltipProps) {
-      return React__default.createElement(Tooltip$1, Object.assign({}, tooltipProps, {
+      return React.createElement(Tooltip$1, Object.assign({}, tooltipProps, {
         locale: tour,
         disableTourSkipOnEsc: disableTourSkipOnEsc
       }));
@@ -9860,7 +9629,8 @@ var Tour = function Tour(props) {
     styles: {
       /** style beacon */
       options: {
-        primaryColor: tailwind_config_1.colors.blue.light
+        // tailwind.theme.colors.blue.light
+        primaryColor: '#6ba4ff'
       }
     },
     disableCloseOnEsc: true