@economic/taco 0.0.32-alpha.0 → 0.0.33-alpha.0

package/dist/taco.cjs.development.js

@@ -3383,7 +3383,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(props, ref) {
 });
 
 const getButtonClasses = () => {
-  return 'min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] h-max inline-flex items-center justify-center border';
+  return 'min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max inline-flex items-center justify-center border';
 };
 const getAppearanceClasses = (value, icon = false) => {
   switch (value) {
@@ -3878,7 +3878,7 @@ const ToastProvider = ({
 };
 const useToast = () => React.useContext(ToastContext);
 
-const defaultLocalisationTexts = {
+var defaultLocalisationTexts = {
   calendar: {
     months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
     weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
@@ -3953,30 +3953,35 @@ const defaultLocalisationTexts = {
     inputLabel: 'Search...'
   }
 };
-const defaultLocalizationContext = {
+var defaultLocalizationContext = {
   locale: 'en-GB',
   texts: defaultLocalisationTexts,
   formatting: {
     date: 'dd.mm.yy'
   }
 };
-const Context = /*#__PURE__*/React.createContext({
+var Context = /*#__PURE__*/React.createContext({
   localization: defaultLocalizationContext
 });
-const Provider = props => {
-  const {
-    children,
-    localization = defaultLocalizationContext
-  } = props;
-  const value = React.useMemo(() => ({
-    localization
-  }), [localization]);
+var Provider = function Provider(props) {
+  var children = props.children,
+      _props$localization = props.localization,
+      localization = _props$localization === void 0 ? defaultLocalizationContext : _props$localization;
+  var value = React.useMemo(function () {
+    return {
+      localization: localization
+    };
+  }, [localization]);
   return React.createElement(Context.Provider, {
     value: value
   }, React.createElement(ToastProvider, null, children));
 };
-const useTaco = () => React.useContext(Context);
-const useLocalization = () => useTaco().localization;
+var useTaco = function useTaco() {
+  return React.useContext(Context);
+};
+var useLocalization = function useLocalization() {
+  return useTaco().localization;
+};
 
 var _excluded$5 = ["onChange", "value"];
 
@@ -5340,18 +5345,19 @@ function mergeRefs(refs) {
   };
 }
 
-const PopoverContext = /*#__PURE__*/React.createContext({
+var _excluded$9 = ["children", "trigger"];
+var PopoverContext = /*#__PURE__*/React.createContext({
   props: {},
   ref: null
 });
-const Trigger$1 = /*#__PURE__*/React.forwardRef(function PopoverTrigger(props, ref) {
+var Trigger$1 = /*#__PURE__*/React.forwardRef(function PopoverTrigger(props, ref) {
   var _props$children;
 
-  const context = React.useContext(PopoverContext);
-  let children = 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`);
+    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);
   }
 
@@ -5361,22 +5367,22 @@ const Trigger$1 = /*#__PURE__*/React.forwardRef(function PopoverTrigger(props, r
     asChild: true
   }));
 });
-const RenderPropWrapper = /*#__PURE__*/React.forwardRef(function RenderPropWrapper({
-  children,
-  onClick
-}, ref) {
-  const close = () => {
+var RenderPropWrapper = /*#__PURE__*/React.forwardRef(function RenderPropWrapper(_ref, ref) {
+  var children = _ref.children,
+      onClick = _ref.onClick;
+
+  var close = function close() {
     onClick(new CustomEvent('hide'));
   };
 
   return children({
-    close,
-    ref
+    close: close,
+    ref: ref
   });
 });
-const Content$1 = /*#__PURE__*/React.forwardRef(function PopoverContent(props, ref) {
-  const className = cn('bg-white focus:border-blue-light', props.className);
-  let output;
+var Content$1 = /*#__PURE__*/React.forwardRef(function PopoverContent(props, ref) {
+  var className = cn('bg-white focus:border-blue-light', props.className);
+  var output;
 
   if (typeof props.children === 'function') {
     output = React.createElement(PopoverPrimitive.Close, {
@@ -5394,20 +5400,23 @@ const Content$1 = /*#__PURE__*/React.forwardRef(function PopoverContent(props, r
     className: "text-white"
   }));
 });
-const Close$1 = /*#__PURE__*/React.forwardRef((props, ref) => React.createElement(PopoverPrimitive.Close, Object.assign({}, props, {
-  ref: ref,
-  asChild: true
-})));
-const Popover = /*#__PURE__*/React.forwardRef(function Popover(props, ref) {
-  const {
-    children,
-    trigger,
-    ...otherProps
-  } = props;
-  const context = React.useMemo(() => ({
-    props: otherProps,
-    ref
-  }), [otherProps]);
+var Close$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return React.createElement(PopoverPrimitive.Close, Object.assign({}, props, {
+    ref: ref,
+    asChild: true
+  }));
+});
+var Popover = /*#__PURE__*/React.forwardRef(function Popover(props, ref) {
+  var children = props.children,
+      trigger = props.trigger,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$9);
+
+  var context = React.useMemo(function () {
+    return {
+      props: otherProps,
+      ref: ref
+    };
+  }, [otherProps]);
   return React.createElement(PopoverContext.Provider, {
     value: context
   }, React.createElement(PopoverPrimitive.Root, null, trigger && React.createElement(Trigger$1, null, trigger), children));
@@ -5416,7 +5425,7 @@ Popover.Trigger = Trigger$1;
 Popover.Content = Content$1;
 Popover.Close = Close$1;
 
-var _excluded$9 = ["className", "onReset", "style", "shortcuts", "shortcutsText"];
+var _excluded$a = ["className", "onReset", "style", "shortcuts", "shortcutsText"];
 var Datepicker = /*#__PURE__*/React.forwardRef(function Datepicker(props, ref) {
   var _input$disabled;
 
@@ -5425,7 +5434,7 @@ var Datepicker = /*#__PURE__*/React.forwardRef(function Datepicker(props, ref) {
       style = props.style,
       shortcuts = props.shortcuts,
       shortcutsText = props.shortcutsText,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$9);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$a);
 
   var _useDatepicker = useDatepicker(otherProps, ref),
       calendar = _useDatepicker.calendar,
@@ -5720,7 +5729,7 @@ const Extra = /*#__PURE__*/React.forwardRef(function DialogExtra(props, ref) {
 });
 Extra.displayName = 'DialogExtra';
 
-var _excluded$a = ["children", "closeOnEscape", "defaultOpen", "draggable", "onChange", "onClose", "open", "showCloseButton", "size", "trigger"];
+var _excluded$b = ["children", "closeOnEscape", "defaultOpen", "draggable", "onChange", "onClose", "open", "showCloseButton", "size", "trigger"];
 
 var useSeparatedChildren = function useSeparatedChildren(initialChildren) {
   return React.useMemo(function () {
@@ -5757,7 +5766,7 @@ var Dialog = /*#__PURE__*/React.forwardRef(function Dialog(props, ref) {
       _props$size = props.size,
       size = _props$size === void 0 ? 'sm' : _props$size,
       trigger = props.trigger,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$a);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$b);
 
   var _useSeparatedChildren = useSeparatedChildren(initialChildren),
       children = _useSeparatedChildren[0],
@@ -5807,14 +5816,14 @@ Dialog.Extra = Extra;
 Dialog.Drawer = Drawer;
 Dialog.Close = Close$2;
 
-var _excluded$b = ["disabled", "children", "invalid", "message"];
+var _excluded$c = ["disabled", "children", "invalid", "message"];
 var Field = /*#__PURE__*/React.forwardRef(function Field(props, ref) {
   var disabled = props.disabled,
       children = props.children,
       _props$invalid = props.invalid,
       invalid = _props$invalid === void 0 ? false : _props$invalid,
       message = props.message,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$b);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$c);
 
   var className = cn('flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]', {
     'text-grey-dark': disabled
@@ -5834,11 +5843,11 @@ var Field = /*#__PURE__*/React.forwardRef(function Field(props, ref) {
   }, message));
 });
 
-var _excluded$c = ["horizontal"];
+var _excluded$d = ["horizontal"];
 var Form = /*#__PURE__*/React.forwardRef(function Form(props, ref) {
   var _props$horizontal = props.horizontal,
       horizontal = _props$horizontal === void 0 ? false : _props$horizontal,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$c);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$d);
 
   var className = cn('yt-form', {
     'yt-form--horizontal flex flex-wrap': horizontal
@@ -5850,11 +5859,11 @@ var Form = /*#__PURE__*/React.forwardRef(function Form(props, ref) {
   }));
 });
 
-var _excluded$d = ["as"];
+var _excluded$e = ["as"];
 var Group = /*#__PURE__*/React.forwardRef(function Group(props, ref) {
   var _props$as = props.as,
       Tag = _props$as === void 0 ? 'span' : _props$as,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$d);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$e);
 
   var className = cn('flex ', props.className);
   return React.createElement(Tag, Object.assign({}, otherProps, {
@@ -5864,7 +5873,7 @@ var Group = /*#__PURE__*/React.forwardRef(function Group(props, ref) {
   }));
 });
 
-var _excluded$e = ["anchor", "children", "defaultOpen"];
+var _excluded$f = ["anchor", "children", "defaultOpen"];
 var HangerContext = /*#__PURE__*/React.createContext({
   props: {},
   ref: null
@@ -5921,7 +5930,7 @@ var Hanger = /*#__PURE__*/React.forwardRef(function Hanger(props, ref) {
       children = props.children,
       _props$defaultOpen = props.defaultOpen,
       defaultOpen = _props$defaultOpen === void 0 ? true : _props$defaultOpen,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$e);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$f);
 
   var context = React.useMemo(function () {
     return {
@@ -6293,49 +6302,49 @@ const useMultiListbox = ({
   };
 };
 
-const Listbox = /*#__PURE__*/React.forwardRef(function Listbox(props, ref) {
-  const {
-    className: externalClassName,
-    ...otherProps
-  } = props;
-  const {
-    list,
-    input
-  } = useListbox(otherProps, ref);
-  const className = cn('bg-white inline-flex relative w-full', externalClassName);
+var _excluded$g = ["className"],
+    _excluded2$1 = ["className"];
+var Listbox = /*#__PURE__*/React.forwardRef(function Listbox(props, ref) {
+  var externalClassName = props.className,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$g);
+
+  var _useListbox = useListbox(otherProps, ref),
+      list = _useListbox.list,
+      input = _useListbox.input;
+
+  var className = cn('bg-white inline-flex relative w-full', externalClassName);
   return React.createElement("span", {
     "data-taco": "listbox",
     className: className
   }, React.createElement(ScrollableList, Object.assign({}, list, {
-    style: { ...list.style,
+    style: _extends({}, list.style, {
       maxHeight: 'calc(12rem + 2px)'
       /* (6 * option height) + listbox border */
 
-    }
+    })
   })), React.createElement("input", Object.assign({}, input, {
     className: "hidden",
     type: "text"
   })));
 });
-const MultiListbox = /*#__PURE__*/React.forwardRef(function Listbox(props, ref) {
-  const {
-    className: externalClassName,
-    ...otherProps
-  } = props;
-  const {
-    list,
-    input
-  } = useMultiListbox(otherProps, ref);
-  const className = cn('bg-white inline-flex relative w-full', externalClassName);
+var MultiListbox = /*#__PURE__*/React.forwardRef(function Listbox(props, ref) {
+  var externalClassName = props.className,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded2$1);
+
+  var _useMultiListbox = useMultiListbox(otherProps, ref),
+      list = _useMultiListbox.list,
+      input = _useMultiListbox.input;
+
+  var className = cn('bg-white inline-flex relative w-full', externalClassName);
   return React.createElement("span", {
     "data-taco": "listbox",
     className: className
   }, React.createElement(ScrollableList, Object.assign({}, list, {
-    style: { ...list.style,
+    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"
@@ -6598,26 +6607,34 @@ const Checkbox$1 = props => {
   })), children);
 };
 
-const getRadioGroupItemValueAsString = value => value === null ? '' : String(value);
-const findByValue$1 = (values, valueAsString) => values.find(value => getRadioGroupItemValueAsString(value) === valueAsString);
-const RadioGroupContext = /*#__PURE__*/React.createContext({
+var _excluded$h = ["children", "value"],
+    _excluded2$2 = ["children", "defaultValue", "disabled", "invalid", "onChange", "orientation", "value"];
+var getRadioGroupItemValueAsString = function getRadioGroupItemValueAsString(value) {
+  return value === null ? '' : String(value);
+};
+var findByValue$1 = function findByValue(values, valueAsString) {
+  return values.find(function (value) {
+    return getRadioGroupItemValueAsString(value) === valueAsString;
+  });
+};
+var RadioGroupContext = /*#__PURE__*/React.createContext({
   disabled: false,
   invalid: false
 });
-const RadioGroupItem = /*#__PURE__*/React.forwardRef(function RadioGroupItem(props, ref) {
-  const context = React.useContext(RadioGroupContext);
-  const {
-    children,
-    value,
-    ...otherProps
-  } = props;
-  const disabled = context.disabled || props.disabled;
-  const className = cn('flex flex-shrink-0 self-start items-center justify-center h-4 w-4 mr-2 mt-[0.2rem] rounded-full bg-white border-2 ', {
+var RadioGroupItem = /*#__PURE__*/React.forwardRef(function RadioGroupItem(props, ref) {
+  var context = React.useContext(RadioGroupContext);
+
+  var children = props.children,
+      value = props.value,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$h);
+
+  var disabled = context.disabled || props.disabled;
+  var className = cn('flex flex-shrink-0 self-start items-center justify-center h-4 w-4 mr-2 mt-[0.2rem] rounded-full bg-white border-2 ', {
     'border-grey-dark focus:border-blue focus:yt-focus aria-checked:bg-blue aria-checked:border-blue': !disabled && !context.invalid,
     'border-grey cursor-not-allowed aria-checked:bg-grey-dark aria-checked:border-grey-dark': disabled,
     'border-red text-red focus:border-red focus:yt-focus-red aria-checked:bg-red aria-checked:border-red': context.invalid && !disabled
   });
-  const labelClassName = cn('flex items-center cursor-pointer', {
+  var labelClassName = cn('flex items-center cursor-pointer', {
     'cursor-not-allowed text-grey-dark': disabled
   }, props.className);
   return React.createElement("label", {
@@ -6631,34 +6648,38 @@ const RadioGroupItem = /*#__PURE__*/React.forwardRef(function RadioGroupItem(pro
     className: "h-2 w-2 rounded-full bg-white"
   })), children);
 });
-const useRadioGroup = props => {
-  const {
-    children,
-    defaultValue,
-    disabled,
-    invalid,
-    onChange,
-    orientation = 'vertical',
-    value,
-    ...otherProps
-  } = props;
-  const values = React.useMemo(() => {
-    const radioGroupItemValues = [];
-    React.Children.forEach(children, child => {
+var useRadioGroup = function useRadioGroup(props) {
+  var children = props.children,
+      defaultValue = props.defaultValue,
+      disabled = props.disabled,
+      invalid = props.invalid,
+      onChange = props.onChange,
+      _props$orientation = props.orientation,
+      orientation = _props$orientation === void 0 ? 'vertical' : _props$orientation,
+      value = props.value,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded2$2);
+
+  var values = React.useMemo(function () {
+    var radioGroupItemValues = [];
+    React.Children.forEach(children, function (child) {
       if (React.isValidElement(child)) {
         radioGroupItemValues.push(child.props.value);
       }
     });
     return radioGroupItemValues;
   }, [children]);
-  const context = React.useMemo(() => ({
-    disabled: disabled !== null && disabled !== void 0 ? disabled : false,
-    invalid: invalid !== null && invalid !== void 0 ? invalid : false
-  }), [disabled, invalid]);
-  let valueProps;
+  var context = React.useMemo(function () {
+    return {
+      disabled: disabled !== null && disabled !== void 0 ? disabled : false,
+      invalid: invalid !== null && invalid !== void 0 ? invalid : false
+    };
+  }, [disabled, invalid]);
+  var valueProps;
 
   if (onChange !== undefined) {
-    const handleChange = value => onChange(findByValue$1(values, value));
+    var handleChange = function handleChange(value) {
+      return onChange(findByValue$1(values, value));
+    };
 
     valueProps = {
       onValueChange: handleChange,
@@ -6671,20 +6692,19 @@ const useRadioGroup = props => {
   }
 
   return {
-    context,
-    props: { ...otherProps,
-      ...valueProps,
-      children,
-      orientation
-    }
+    context: context,
+    props: _extends({}, otherProps, valueProps, {
+      children: children,
+      orientation: orientation
+    })
   };
 };
-const RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(props, ref) {
-  const {
-    context,
-    props: otherProps
-  } = useRadioGroup(props);
-  const className = cn('flex items-start', {
+var RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(props, ref) {
+  var _useRadioGroup = useRadioGroup(props),
+      context = _useRadioGroup.context,
+      otherProps = _useRadioGroup.props;
+
+  var className = cn('flex items-start', {
     'flex-wrap space-x-4': otherProps.orientation === 'horizontal',
     'flex-col space-y-2': otherProps.orientation === 'vertical'
   }, otherProps.className);
@@ -6797,26 +6817,48 @@ const Header = props => {
   }));
 };
 
-const Menu = externalProps => {
-  const {
-    appearance: externalAppearance,
-    children,
-    trigger,
-    ...props
-  } = externalProps;
-  const [open, setOpen] = React.useState(false);
-  const [appearance, setAppearance] = React.useState(externalAppearance !== null && externalAppearance !== void 0 ? externalAppearance : 'default');
-  const [indented, setIndented] = React.useState(false);
-  const [minWidth, setMinWidth] = React.useState(undefined);
-  const context = React.useMemo(() => ({
-    appearance,
-    setAppearance: appearance => setAppearance(appearance),
-    indented,
-    registerIndentation: () => setIndented(true),
-    minWidth,
-    setMinWidth: width => setMinWidth(width),
-    close: () => setOpen(false)
-  }), [indented, minWidth, appearance]);
+var _excluded$i = ["appearance", "children", "trigger"];
+var Menu = function Menu(externalProps) {
+  var externalAppearance = externalProps.appearance,
+      children = externalProps.children,
+      trigger = externalProps.trigger,
+      props = _objectWithoutPropertiesLoose(externalProps, _excluded$i);
+
+  var _React$useState = React.useState(false),
+      open = _React$useState[0],
+      setOpen = _React$useState[1];
+
+  var _React$useState2 = React.useState(externalAppearance !== null && externalAppearance !== void 0 ? externalAppearance : 'default'),
+      appearance = _React$useState2[0],
+      _setAppearance = _React$useState2[1];
+
+  var _React$useState3 = React.useState(false),
+      indented = _React$useState3[0],
+      setIndented = _React$useState3[1];
+
+  var _React$useState4 = React.useState(undefined),
+      minWidth = _React$useState4[0],
+      _setMinWidth = _React$useState4[1];
+
+  var context = React.useMemo(function () {
+    return {
+      appearance: appearance,
+      setAppearance: function setAppearance(appearance) {
+        return _setAppearance(appearance);
+      },
+      indented: indented,
+      registerIndentation: function registerIndentation() {
+        return setIndented(true);
+      },
+      minWidth: minWidth,
+      setMinWidth: function setMinWidth(width) {
+        return _setMinWidth(width);
+      },
+      close: function close() {
+        return setOpen(false);
+      }
+    };
+  }, [indented, minWidth, appearance]);
   return React.createElement(MenuContext.Provider, {
     value: context
   }, React.createElement(DropdownMenuPrimitive.Root, Object.assign({}, props, {
@@ -6936,20 +6978,25 @@ const useDropTarget = onDrop => {
   return [isDraggedOver, props];
 };
 
-const Item$2 = /*#__PURE__*/React__default.forwardRef(function Item(props, ref) {
-  const {
-    active,
-    children,
-    onDrop,
-    postfix,
-    prefix,
-    role,
-    ...otherProps
-  } = props;
-  const proxyRef = useProxiedRef(ref);
-  const [isDraggedOver, dropTargetProps] = useDropTarget(onDrop);
-  const isTreeitem = role === 'treeitem';
-  const className = cn('yt-navigation__item cursor-pointer', {
+var _excluded$j = ["active", "children", "onDrop", "postfix", "prefix", "role"],
+    _excluded2$3 = ["children"];
+var Item$2 = /*#__PURE__*/React__default.forwardRef(function Item(props, ref) {
+  var active = props.active,
+      children = props.children,
+      onDrop = props.onDrop,
+      postfix = props.postfix,
+      prefix = props.prefix,
+      role = props.role,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$j);
+
+  var proxyRef = useProxiedRef(ref);
+
+  var _useDropTarget = useDropTarget(onDrop),
+      isDraggedOver = _useDropTarget[0],
+      dropTargetProps = _useDropTarget[1];
+
+  var isTreeitem = role === 'treeitem';
+  var className = cn('yt-navigation__item cursor-pointer', {
     'w-full mb-px py-1 px-3 flex items-center hover:bg-grey-dark': isTreeitem,
     'bg-white w-full h-10 px-3 flex-shrink-0 flex items-center justify-between cursor-pointer': !isTreeitem,
     'yt-navigation__item--active': active && !isDraggedOver,
@@ -6957,7 +7004,7 @@ const Item$2 = /*#__PURE__*/React__default.forwardRef(function Item(props, ref)
     'yt-navigation__item--dropping bg-blue': isDraggedOver
   }, props.className);
 
-  const handleClick = event => {
+  var handleClick = function handleClick(event) {
     if (event.target instanceof HTMLAnchorElement || event.target instanceof HTMLButtonElement) {
       return;
     }
@@ -6980,19 +7027,19 @@ const Item$2 = /*#__PURE__*/React__default.forwardRef(function Item(props, ref)
     className: "yt-navigation__item__postfix ml-1"
   }, postfix));
 });
-const Panel = /*#__PURE__*/React__default.forwardRef(function Panel(props, ref) {
+var Panel = /*#__PURE__*/React__default.forwardRef(function Panel(props, ref) {
   return React__default.createElement("div", Object.assign({}, props, {
     className: cn('w-full bg-white p-3', props.className),
     ref: ref
   }));
 });
-const MenuGroup = /*#__PURE__*/React__default.forwardRef(function MenuGroup(props, ref) {
-  const className = cn('flex-shrink-0 space-y-1 outline-none', {
+var MenuGroup = /*#__PURE__*/React__default.forwardRef(function MenuGroup(props, ref) {
+  var className = cn('flex-shrink-0 space-y-1 outline-none', {
     'bg-white pb-2': props.fixed
   }, props.className);
 
-  const title = expanded => {
-    const className = cn('bg-white h-10 pl-3 pr-1 flex items-center justify-between w-full', {
+  var title = function title(expanded) {
+    var className = cn('bg-white h-10 pl-3 pr-1 flex items-center justify-between w-full', {
       'mb-1': expanded,
       'cursor-pointer hover:text-blue': !props.fixed
     });
@@ -7009,14 +7056,16 @@ const MenuGroup = /*#__PURE__*/React__default.forwardRef(function MenuGroup(prop
     ref: ref
   }));
 });
-const Menu$1 = /*#__PURE__*/React__default.forwardRef(function Menu(props, ref) {
-  const scrollableAreas = React__default.useMemo(() => {
-    const scrollableAreas = [];
-    React__default.Children.toArray(props.children).filter(child => !!child).map(child => {
+var Menu$1 = /*#__PURE__*/React__default.forwardRef(function Menu(props, ref) {
+  var scrollableAreas = React__default.useMemo(function () {
+    var scrollableAreas = [];
+    React__default.Children.toArray(props.children).filter(function (child) {
+      return !!child;
+    }).map(function (child) {
       if (child.props.fixed) {
         scrollableAreas.push(child);
       } else {
-        const x = scrollableAreas[scrollableAreas.length - 1];
+        var x = scrollableAreas[scrollableAreas.length - 1];
 
         if (Array.isArray(x)) {
           x.push(child);
@@ -7030,18 +7079,19 @@ const Menu$1 = /*#__PURE__*/React__default.forwardRef(function Menu(props, ref)
   return React__default.createElement(Treeview, Object.assign({}, props, {
     className: cn('divide-grey-light flex flex-grow flex-col divide-y-2 overflow-y-auto', props.className),
     ref: ref
-  }), scrollableAreas.map((area, i) => Array.isArray(area) ? React__default.createElement("div", {
-    className: "divide-grey-light flex h-0 flex-auto flex-shrink-0 flex-grow flex-col divide-y-2 overflow-y-auto",
-    key: i
-  }, area) : area));
+  }), scrollableAreas.map(function (area, i) {
+    return Array.isArray(area) ? React__default.createElement("div", {
+      className: "divide-grey-light flex h-0 flex-auto flex-shrink-0 flex-grow flex-col divide-y-2 overflow-y-auto",
+      key: i
+    }, area) : area;
+  }));
 });
 Menu$1.Group = MenuGroup;
-const Navigation = /*#__PURE__*/React__default.forwardRef(function Navigation(props, ref) {
-  const {
-    children,
-    ...otherProps
-  } = props;
-  const className = cn('h-full flex flex-col bg-grey-light divide-y-2 divide-grey-light', props.className);
+var Navigation = /*#__PURE__*/React__default.forwardRef(function Navigation(props, ref) {
+  var children = props.children,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded2$3);
+
+  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",
@@ -7136,8 +7186,6 @@ const useSelect = ({
       setInputValueByRef$1(internalInputRef.current, value);
     } else if (value !== undefined && data.some(option => option.value === value)) {
       setInputValueByRef$1(internalInputRef.current, value);
-    } else if (data.length && defaultValue === undefined) {
-      setInputValueByRef$1(internalInputRef.current, data[0].value);
     }
   }, []); // event handlers
 
@@ -7282,52 +7330,54 @@ const useSelect = ({
   };
 };
 
-const BaseSelect = /*#__PURE__*/React.forwardRef(function BaseSelect(props, ref) {
-  const {
-    autoFocus,
-    className: externalClassName,
-    highlighted,
-    style,
-    ...otherProps
-  } = props;
-  const {
-    button,
-    listbox,
-    popover,
-    input,
-    text,
-    more = 0
-  } = useSelect(otherProps, ref);
-  const internalRef = React.useRef(null);
-  const selectDimensions = useBoundingClientRectListener(internalRef);
-  const className = cn('inline-flex relative w-full', {
+var _excluded$k = ["autoFocus", "className", "highlighted", "style"],
+    _excluded2$4 = ["editable"];
+var BaseSelect = /*#__PURE__*/React.forwardRef(function BaseSelect(props, ref) {
+  var autoFocus = props.autoFocus,
+      externalClassName = props.className,
+      style = props.style,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$k);
+
+  var _useSelect = useSelect(otherProps, 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 internalRef = React.useRef(null);
+  var selectDimensions = useBoundingClientRectListener(internalRef);
+  var className = cn('inline-flex relative w-full', {
     'yt-select--readonly': props.readOnly
   }, externalClassName);
-  const inputClassname = cn(getInputClasses(props), 'h-8 text-left pr-0', {
+  var inputClassname = cn(getInputClasses(props), 'h-8 text-left pr-0', {
     'border-blue': popover.open
   });
-  React.useEffect(() => {
+  React.useEffect(function () {
     if (autoFocus && internalRef.current) {
       internalRef.current.focus();
     }
   }, []);
 
-  const renderMultiSelection = () => {
+  var renderMultiSelection = function renderMultiSelection() {
     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}`));
+    }, "+" + more));
   };
 
-  const commonListboxProps = { ...listbox,
+  var commonListboxProps = _extends({}, listbox, {
     className: 'w-auto',
     invalid: undefined,
     style: {
       minWidth: selectDimensions === null || selectDimensions === void 0 ? void 0 : selectDimensions.width
     },
     tabIndex: popover.open ? 0 : -1
-  };
+  });
+
   return React.createElement("span", {
     className: className,
     "data-taco": "select",
@@ -7350,11 +7400,9 @@ const BaseSelect = /*#__PURE__*/React.forwardRef(function BaseSelect(props, ref)
     type: "text"
   }))));
 });
-const Select = /*#__PURE__*/React.forwardRef(function Select(props, ref) {
-  const {
-    editable,
-    ...otherProps
-  } = props;
+var Select = /*#__PURE__*/React.forwardRef(function Select(props, ref) {
+  var editable = props.editable,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded2$4);
 
   if (editable) {
     return React.createElement(Combobox, Object.assign({}, otherProps, {
@@ -7425,41 +7473,47 @@ const usePagination = (initialPageIndex = 0, initialPageSize = 10) => {
   };
 };
 
-const getShowingLabel = (length, pageIndex, pageSize, texts) => {
-  const minItemIndex = pageIndex * pageSize + 1;
-  const maxItemIndex = (pageIndex + 1) * pageSize;
+var _excluded$l = ["length", "pageIndex", "pageSize", "pageSizes", "setPageIndex", "setPageSize", "showPageControls", "showPageNumbers", "showPageSize", "dangerouslyHijackGlobalKeyboardNavigation"];
+
+var getShowingLabel = function getShowingLabel(length, pageIndex, pageSize, texts) {
+  var minItemIndex = pageIndex * pageSize + 1;
+  var maxItemIndex = (pageIndex + 1) * pageSize;
   return texts.pagination.showingXofYofTotal.replace('[X]', length === 0 ? '0' : String(minItemIndex)).replace('[Y]', String(maxItemIndex > length ? length : maxItemIndex)).replace('[total]', String(length));
 };
 
-const Pagination = /*#__PURE__*/React.forwardRef(function Pagination(props, ref) {
-  const {
-    length,
-    pageIndex,
-    pageSize,
-    pageSizes = [10, 25, 50, 100, 500],
-    setPageIndex,
-    setPageSize,
-    showPageControls = true,
-    showPageNumbers = true,
-    showPageSize = true,
-    dangerouslyHijackGlobalKeyboardNavigation = false,
-    ...otherProps
-  } = props;
-  const {
-    texts
-  } = useLocalization();
-  const maxPageIndex = Math.ceil(length / pageSize) - 1;
-  const showShortcutTexts = dangerouslyHijackGlobalKeyboardNavigation;
+var Pagination = /*#__PURE__*/React.forwardRef(function Pagination(props, ref) {
+  var length = props.length,
+      pageIndex = props.pageIndex,
+      pageSize = props.pageSize,
+      _props$pageSizes = props.pageSizes,
+      pageSizes = _props$pageSizes === void 0 ? [10, 25, 50, 100, 500] : _props$pageSizes,
+      setPageIndex = props.setPageIndex,
+      setPageSize = props.setPageSize,
+      _props$showPageContro = props.showPageControls,
+      showPageControls = _props$showPageContro === void 0 ? true : _props$showPageContro,
+      _props$showPageNumber = props.showPageNumbers,
+      showPageNumbers = _props$showPageNumber === void 0 ? true : _props$showPageNumber,
+      _props$showPageSize = props.showPageSize,
+      showPageSize = _props$showPageSize === void 0 ? true : _props$showPageSize,
+      _props$dangerouslyHij = props.dangerouslyHijackGlobalKeyboardNavigation,
+      dangerouslyHijackGlobalKeyboardNavigation = _props$dangerouslyHij === void 0 ? false : _props$dangerouslyHij,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$l);
+
+  var _useLocalization = useLocalization(),
+      texts = _useLocalization.texts;
+
+  var maxPageIndex = Math.ceil(length / pageSize) - 1;
+  var showShortcutTexts = dangerouslyHijackGlobalKeyboardNavigation;
   usePaginationShortcuts({
-    setPageIndex,
-    maxPageIndex,
-    pageIndex,
-    dangerouslyHijackGlobalKeyboardNavigation
+    setPageIndex: setPageIndex,
+    maxPageIndex: maxPageIndex,
+    pageIndex: pageIndex,
+    dangerouslyHijackGlobalKeyboardNavigation: dangerouslyHijackGlobalKeyboardNavigation
   });
-  const pageCount = Math.ceil(length / pageSize);
-  const canPreviousPage = pageIndex > 0;
-  const canNextPage = pageIndex < pageCount - 1;
-  const className = cn('inline-flex relative justify-between items-center', props.className);
+  var pageCount = Math.ceil(length / pageSize);
+  var canPreviousPage = pageIndex > 0;
+  var canNextPage = pageIndex < pageCount - 1;
+  var className = cn('inline-flex relative justify-between items-center', props.className);
   return React.createElement("div", Object.assign({}, otherProps, {
     className: className,
     "data-taco": "pagination",
@@ -7469,11 +7523,13 @@ const Pagination = /*#__PURE__*/React.forwardRef(function Pagination(props, ref)
   }, getShowingLabel(length, pageIndex, pageSize, texts), React.createElement(Select, {
     "aria-label": texts.pagination.pageSize,
     className: "ml-4 !w-20",
-    data: pageSizes.map(pageSize => ({
-      text: String(pageSize),
-      value: pageSize
-    })),
-    onChange: event => {
+    data: pageSizes.map(function (pageSize) {
+      return {
+        text: String(pageSize),
+        value: pageSize
+      };
+    }),
+    onChange: function onChange(event) {
       setPageIndex(0);
       setPageSize(Number(event.target.value));
     },
@@ -7485,14 +7541,18 @@ const Pagination = /*#__PURE__*/React.forwardRef(function Pagination(props, ref)
     appearance: "default",
     disabled: !canPreviousPage,
     icon: "arrow-start",
-    onClick: () => setPageIndex(0),
+    onClick: function onClick() {
+      return setPageIndex(0);
+    },
     "aria-label": showShortcutTexts ? texts.pagination.actions.firstPageWithShortcut : texts.pagination.actions.firstPage,
     tooltip: showShortcutTexts ? texts.pagination.actions.firstPageWithShortcut : texts.pagination.actions.firstPage
   }), React.createElement(IconButton, {
     appearance: "default",
     disabled: !canPreviousPage,
     icon: "arrow-left",
-    onClick: () => setPageIndex(pageIndex - 1),
+    onClick: function onClick() {
+      return setPageIndex(pageIndex - 1);
+    },
     "aria-label": showShortcutTexts ? texts.pagination.actions.previousPageWithShortcut : texts.pagination.actions.previousPage,
     tooltip: showShortcutTexts ? texts.pagination.actions.previousPageWithShortcut : texts.pagination.actions.previousPage
   }), showPageNumbers && pageCount > 0 && React.createElement(PageNumbers, {
@@ -7503,36 +7563,43 @@ const Pagination = /*#__PURE__*/React.forwardRef(function Pagination(props, ref)
     appearance: "default",
     disabled: !canNextPage,
     icon: "arrow-right",
-    onClick: () => setPageIndex(pageIndex + 1),
+    onClick: function onClick() {
+      return setPageIndex(pageIndex + 1);
+    },
     "aria-label": showShortcutTexts ? texts.pagination.actions.nextPageWithShortcut : texts.pagination.actions.nextPage,
     tooltip: showShortcutTexts ? texts.pagination.actions.nextPageWithShortcut : texts.pagination.actions.nextPage
   }), React.createElement(IconButton, {
     appearance: "default",
     disabled: !canNextPage,
     icon: "arrow-end",
-    onClick: () => setPageIndex(pageCount - 1),
+    onClick: function onClick() {
+      return setPageIndex(pageCount - 1);
+    },
     "aria-label": showShortcutTexts ? texts.pagination.actions.lastPageWithShortcut : texts.pagination.actions.lastPage,
     tooltip: showShortcutTexts ? texts.pagination.actions.lastPageWithShortcut : texts.pagination.actions.lastPage
   })));
 });
 
-const Progress = ({
-  duration = undefined,
-  ...props
-}) => {
-  let style;
+var _excluded$m = ["duration"];
+var Progress = function Progress(_ref) {
+  var _cn;
+
+  var _ref$duration = _ref.duration,
+      duration = _ref$duration === void 0 ? undefined : _ref$duration,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
+
+  var style;
 
   if (duration) {
     style = {
-      animationDuration: `${duration}ms`
+      animationDuration: duration + "ms"
     };
   }
 
-  const className = cn('bg-grey-light rounded block h-1 overflow-hidden w-full', props.className);
-  const progressClassName = cn('yt-progress__bar block h-1', {
-    "w-full before:h-1 before:bg-grey-dark before:block before:animate-[progress-indeterminate_2s_cubic-bezier(0.4,0,0.2,1)_infinite] before:content-[' ']": !duration,
-    [`w-0 bg-grey-dark animate-[progress_linear]`]: duration
-  });
+  var className = cn('bg-grey-light rounded block h-1 overflow-hidden w-full', props.className);
+  var progressClassName = cn('yt-progress__bar block h-1', (_cn = {
+    "w-full before:h-1 before:bg-grey-dark before:block before:animate-[progress-indeterminate_2s_cubic-bezier(0.4,0,0.2,1)_infinite] before:content-[' ']": !duration
+  }, _cn["w-0 bg-grey-dark animate-[progress_linear]"] = duration, _cn));
   return React__default.createElement("span", Object.assign({}, props, {
     "data-taco": "progress",
     className: className
@@ -9424,10 +9491,10 @@ var useOnClickOutside = function useOnClickOutside(ref, callback) {
   }, [ref, callback]);
 };
 
-var _excluded$f = ["onSearch"];
+var _excluded$n = ["onSearch"];
 var SearchInput = /*#__PURE__*/React.forwardRef(function SearchInput(_ref, ref) {
   var onSearch = _ref.onSearch,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
 
   var _useLocalization = useLocalization(),
       texts = _useLocalization.texts;