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

package/dist/taco.cjs.development.js

@@ -3122,17 +3122,17 @@ const icons = {
   zoom: Zoom
 };
 
-var _excluded = ["name"];
-var Icon = /*#__PURE__*/React__default.forwardRef(function Icon(props, ref) {
+const Icon = /*#__PURE__*/React__default.forwardRef(function Icon(props, ref) {
   var _props$className;
 
-  var name = props.name,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
-
-  var Component = icons[name];
+  const {
+    name,
+    ...otherProps
+  } = props;
+  const Component = icons[name];
   /* 24x24 _at the base body font_ - must be em so that they scale with font size - tailwind spacing uses rem */
 
-  var className = cn('inline-flex h-[1.715em] w-[1.715em]', props.className, {
+  const className = cn('inline-flex h-[1.715em] w-[1.715em]', props.className, {
     'p-[3px]': (_props$className = props.className) === null || _props$className === void 0 ? void 0 : _props$className.includes('rounded-full')
   });
   return Component ? React__default.createElement(Component, Object.assign({}, otherProps, {
@@ -3144,7 +3144,7 @@ var Icon = /*#__PURE__*/React__default.forwardRef(function Icon(props, ref) {
   })) : null;
 });
 
-var _excluded$1 = ["id"],
+var _excluded = ["id"],
     _excluded2 = ["id", "defaultId", "onChange", "as"];
 var AccordionContext = /*#__PURE__*/React__default.createContext({
   as: 'h2'
@@ -3182,7 +3182,7 @@ var Content = /*#__PURE__*/React__default.forwardRef(function AccordionContent(p
 
 var Item = function Item(props) {
   var id = props.id,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$1);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
 
   return React__default.createElement(AccordionPrimitive.Item, Object.assign({}, otherProps, {
     value: id
@@ -3283,7 +3283,7 @@ const getOutlineClasses = state => {
   }
 };
 
-var _excluded$2 = ["children", "compact", "outline", "state"];
+var _excluded$1 = ["children", "compact", "outline", "state"];
 var Badge = /*#__PURE__*/React.forwardRef(function Badge(props, ref) {
   var _cn;
 
@@ -3293,7 +3293,7 @@ var Badge = /*#__PURE__*/React.forwardRef(function Badge(props, ref) {
       _props$outline = props.outline,
       outline = _props$outline === void 0 ? false : _props$outline,
       state = props.state,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$2);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$1);
 
   var className = cn('rounded-full border font-bold text-xs uppercase overflow-hidden whitespace-nowrap inline-flex items-center justify-center h-5', (_cn = {}, _cn[getOutlineClasses(state)] = outline, _cn["border-transparent " + getStateClasses(state)] = !outline, _cn['h-2 w-2 min-w-0'] = compact, _cn['h-5 py-0 px-[0.354rem]'] = !compact, _cn), props.className);
   return React.createElement("span", Object.assign({}, otherProps, {
@@ -3453,14 +3453,13 @@ const createButton = (props, className, ref) => {
   return button;
 };
 
-var _excluded$3 = ["icon", "rounded"];
-var IconButton = /*#__PURE__*/React.forwardRef(function IconButton(props, ref) {
-  var icon = props.icon,
-      _props$rounded = props.rounded,
-      rounded = _props$rounded === void 0 ? false : _props$rounded,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$3);
-
-  var className = cn('w-8', getButtonClasses(), getAppearanceClasses(otherProps.appearance, true), {
+const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(props, ref) {
+  const {
+    icon,
+    rounded = false,
+    ...otherProps
+  } = props;
+  const className = cn('w-8', getButtonClasses(), getAppearanceClasses(otherProps.appearance, true), {
     'rounded-full': rounded,
     rounded: !rounded,
     'cursor-not-allowed opacity-50': props.disabled,
@@ -3471,20 +3470,22 @@ var IconButton = /*#__PURE__*/React.forwardRef(function IconButton(props, ref) {
     return null;
   }
 
-  return createButton(_extends({}, otherProps, {
+  return createButton({ ...otherProps,
     children: React.createElement(Icon, {
       name: icon,
       className: "m-0 p-0"
     }),
     'data-taco': 'icon-button'
-  }), className, ref);
+  }, className, ref);
 });
 
-var Banner = /*#__PURE__*/React.forwardRef(function Banner(props, ref) {
-  var children = props.children,
-      state = props.state,
-      onClose = props.onClose;
-  var className = cn('bg-white relative flex items-center px-4 h-12 shadow-lg z-10', props.className);
+const Banner = /*#__PURE__*/React.forwardRef(function Banner(props, ref) {
+  const {
+    children,
+    state,
+    onClose
+  } = props;
+  const className = cn('bg-white relative flex items-center px-4 h-12 shadow-lg z-10', props.className);
   return React.createElement("div", {
     className: className,
     "data-taco": "banner",
@@ -3497,10 +3498,10 @@ var Banner = /*#__PURE__*/React.forwardRef(function Banner(props, ref) {
   }) : null);
 });
 
-var _excluded$4 = ["fluid"];
+var _excluded$2 = ["fluid"];
 var Button$1 = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
   var fluid = props.fluid,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$4);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$2);
 
   var className = cn(getButtonClasses(), getAppearanceClasses(otherProps.appearance), 'rounded px-3', {
     'cursor-not-allowed opacity-50': props.disabled,
@@ -3878,7 +3879,7 @@ const ToastProvider = ({
 };
 const useToast = () => React.useContext(ToastContext);
 
-var defaultLocalisationTexts = {
+const defaultLocalisationTexts = {
   calendar: {
     months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
     weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
@@ -3953,67 +3954,62 @@ var defaultLocalisationTexts = {
     inputLabel: 'Search...'
   }
 };
-var defaultLocalizationContext = {
+const defaultLocalizationContext = {
   locale: 'en-GB',
   texts: defaultLocalisationTexts,
   formatting: {
     date: 'dd.mm.yy'
   }
 };
-var Context = /*#__PURE__*/React.createContext({
+const Context = /*#__PURE__*/React.createContext({
   localization: defaultLocalizationContext
 });
-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]);
+const Provider = props => {
+  const {
+    children,
+    localization = defaultLocalizationContext
+  } = props;
+  const value = React.useMemo(() => ({
+    localization
+  }), [localization]);
   return React.createElement(Context.Provider, {
     value: value
   }, React.createElement(ToastProvider, null, children));
 };
-var useTaco = function useTaco() {
-  return React.useContext(Context);
-};
-var useLocalization = function useLocalization() {
-  return useTaco().localization;
-};
+const useTaco = () => React.useContext(Context);
+const useLocalization = () => useTaco().localization;
 
-var _excluded$5 = ["onChange", "value"];
+const renderDay = (day, modifiers) => modifiers.disabled ? React.createElement("span", {
+  className: "dot"
+}) : day.getDate();
 
-var renderDay = function renderDay(day, modifiers) {
-  return modifiers.disabled ? React.createElement("span", {
-    className: "dot"
-  }) : day.getDate();
-};
-
-var thisYear = /*#__PURE__*/new Date().getFullYear();
-var years = [];
+const thisYear = /*#__PURE__*/new Date().getFullYear();
+const years = [];
 
-for (var i = thisYear - 10; i <= thisYear + 10; i += 1) {
+for (let i = thisYear - 10; i <= thisYear + 10; i += 1) {
   years.push(i);
 }
 
-var Navbar = /*#__PURE__*/React.memo(function (_ref) {
-  var onMonthChange = _ref.onMonthChange,
-      onNextClick = _ref.onNextClick,
-      onPreviousClick = _ref.onPreviousClick,
-      _ref$value = _ref.value,
-      value = _ref$value === void 0 ? new Date() : _ref$value;
+const Navbar = /*#__PURE__*/React.memo(({
+  onMonthChange,
+  onNextClick,
+  onPreviousClick,
+  value = new Date()
+}) => {
+  const {
+    texts: {
+      calendar: {
+        actions,
+        months
+      }
+    }
+  } = useLocalization();
 
-  var _useLocalization = useLocalization(),
-      _useLocalization$text = _useLocalization.texts.calendar,
-      actions = _useLocalization$text.actions,
-      months = _useLocalization$text.months;
-
-  var handleChange = function handleChange(event) {
-    var _event$target$form = event.target.form,
-        year = _event$target$form.year,
-        month = _event$target$form.month;
+  const handleChange = function handleChange(event) {
+    const {
+      year,
+      month
+    } = event.target.form;
     onMonthChange(new Date(year.value, month.value));
   };
 
@@ -4026,59 +4022,49 @@ var Navbar = /*#__PURE__*/React.memo(function (_ref) {
     name: "month",
     onChange: handleChange,
     value: value.getMonth()
-  }, months.map(function (month, i) {
-    return React.createElement("option", {
-      key: month,
-      value: i
-    }, month);
-  })), React.createElement("select", {
+  }, months.map((month, i) => React.createElement("option", {
+    key: month,
+    value: i
+  }, month))), React.createElement("select", {
     className: "h-8 px-2",
     name: "year",
     onChange: handleChange,
     value: value.getFullYear()
-  }, years.map(function (year) {
-    return React.createElement("option", {
-      key: year,
-      value: year
-    }, String(year));
-  }))), React.createElement("div", null, React.createElement(IconButton, {
+  }, years.map(year => React.createElement("option", {
+    key: year,
+    value: year
+  }, String(year))))), React.createElement("div", null, React.createElement(IconButton, {
     appearance: "discrete",
     icon: "chevron-left",
     "aria-label": actions.previousMonth,
-    onClick: function onClick() {
-      return onPreviousClick();
-    },
+    onClick: () => onPreviousClick(),
     rounded: true
   }), React.createElement(IconButton, {
     appearance: "discrete",
     icon: "chevron-right",
     "aria-label": actions.nextMonth,
-    onClick: function onClick() {
-      return onNextClick();
-    },
+    onClick: () => onNextClick(),
     rounded: true
   })));
 });
-var Calendar$1 = /*#__PURE__*/React.forwardRef(function Calendar(props, ref) {
-  var handleChange = props.onChange,
-      value = props.value,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$5);
-
-  var _useLocalization2 = useLocalization(),
-      locale = _useLocalization2.locale,
-      texts = _useLocalization2.texts;
-
-  var _React$useState = React.useState(value !== null && value !== void 0 ? value : new Date()),
-      visibleMonth = _React$useState[0],
-      setVisibleMonth = _React$useState[1];
-
-  React.useEffect(function () {
+const Calendar$1 = /*#__PURE__*/React.forwardRef(function Calendar(props, ref) {
+  const {
+    onChange: handleChange,
+    value,
+    ...otherProps
+  } = props;
+  const {
+    locale,
+    texts
+  } = useLocalization();
+  const [visibleMonth, setVisibleMonth] = React.useState(value !== null && value !== void 0 ? value : new Date());
+  React.useEffect(() => {
     if (visibleMonth !== value) {
       setVisibleMonth(value !== null && value !== void 0 ? value : new Date());
     }
   }, [value]);
 
-  var handleDayClick = function handleDayClick(date, modifiers, event) {
+  const handleDayClick = (date, modifiers, event) => {
     if (modifiers.outside || modifiers.disabled) {
       return;
     }
@@ -4086,8 +4072,8 @@ var Calendar$1 = /*#__PURE__*/React.forwardRef(function Calendar(props, ref) {
     handleChange(date, event);
   };
 
-  var handleCalendarClickToday = function handleCalendarClickToday() {
-    var today = new Date(); // set to midday to avoid UTC offset causing dates to be mismatched server side
+  const handleCalendarClickToday = () => {
+    const today = new Date(); // set to midday to avoid UTC offset causing dates to be mismatched server side
 
     today.setHours(12);
     today.setMinutes(0);
@@ -4095,7 +4081,7 @@ var Calendar$1 = /*#__PURE__*/React.forwardRef(function Calendar(props, ref) {
     handleChange(today);
   };
 
-  var className = cn('flex bg-white text-xs p-4', otherProps.className);
+  const className = cn('flex bg-white text-xs p-4', otherProps.className);
   return React.createElement("div", {
     "data-taco": "calendar"
   }, React.createElement(ReactDayPicker, Object.assign({}, otherProps, {
@@ -4106,18 +4092,14 @@ var Calendar$1 = /*#__PURE__*/React.forwardRef(function Calendar(props, ref) {
     firstDayOfWeek: 1,
     months: texts.calendar.months,
     weekdaysShort: texts.calendar.weekdaysShort,
-    navbarElement: function navbarElement(navProps) {
-      return React.createElement(Navbar, Object.assign({}, navProps, {
-        onMonthChange: setVisibleMonth,
-        value: visibleMonth
-      }));
-    },
+    navbarElement: navProps => React.createElement(Navbar, Object.assign({}, navProps, {
+      onMonthChange: setVisibleMonth,
+      value: visibleMonth
+    })),
     onDayClick: handleDayClick,
     onMonthChange: setVisibleMonth,
     onTodayButtonClick: handleCalendarClickToday,
-    captionElement: function captionElement() {
-      return null;
-    },
+    captionElement: () => null,
     todayButton: texts.calendar.actions.today,
     showOutsideDays: true,
     renderDay: renderDay,
@@ -4126,32 +4108,30 @@ var Calendar$1 = /*#__PURE__*/React.forwardRef(function Calendar(props, ref) {
   })));
 });
 
-var _excluded$6 = ["checked", "highlighted", "indeterminate", "invalid", "label", "onChange"];
-var Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
-  var checked = props.checked,
-      highlighted = props.highlighted,
-      indeterminate = props.indeterminate,
-      invalid = props.invalid,
-      label = props.label,
-      onChange = props.onChange,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$6);
-
-  var className = cn('bg-white h-5 w-5 border rounded text-sm flex-shrink-0 self-start mt-[0.1rem]', {
+const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
+  const {
+    checked,
+    highlighted,
+    indeterminate,
+    invalid,
+    label,
+    onChange,
+    ...otherProps
+  } = props;
+  const className = cn('bg-white h-5 w-5 border rounded text-sm flex-shrink-0 self-start mt-[0.1rem]', {
     'mr-2': !!label,
     'border-grey-dark text-blue focus:border-blue focus:yt-focus': !props.disabled && !invalid,
     'border-grey text-blue-light cursor-not-allowed': props.disabled,
     'bg-[rgba(255,255,0,0.2)] disabled:bg-[rgba(255,255,0,0.075)]': highlighted,
     'border-red text-red focus:border-red focus:yt-focus-red': invalid && !props.disabled
   });
-  var handleChange;
+  let handleChange;
 
   if (onChange) {
-    handleChange = function handleChange(checked) {
-      return onChange(checked === 'indeterminate' ? false : checked);
-    };
+    handleChange = checked => onChange(checked === 'indeterminate' ? false : checked);
   }
 
-  var element = React.createElement(CheckboxPrimitive.Root, Object.assign({}, otherProps, {
+  const element = React.createElement(CheckboxPrimitive.Root, Object.assign({}, otherProps, {
     "data-taco": "checkbox",
     checked: indeterminate ? 'indeterminate' : checked,
     className: className,
@@ -4165,7 +4145,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
   })));
 
   if (label) {
-    var labelClassName = cn('flex items-center cursor-pointer', {
+    const labelClassName = cn('flex items-center cursor-pointer', {
       'cursor-not-allowed text-grey-dark': props.disabled
     }, props.className);
     return React.createElement("label", {
@@ -4208,21 +4188,22 @@ const getButtonStateClasses = invalid => {
   return '!border-grey-dark focus:!border-blue-light peer-focus:!border-blue-light peer-focus:peer-active:!border-blue-dark';
 };
 
-var _excluded$7 = ["button", "icon", "highlighted", "invalid", "onKeyDown", "autoFocus"];
-var Input = /*#__PURE__*/React.forwardRef(function Input(props, ref) {
-  var button = props.button,
-      icon = props.icon,
-      invalid = props.invalid,
-      onKeyDown = props.onKeyDown,
-      autoFocus = props.autoFocus,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$7);
-
-  var inputRef = useProxiedRef(ref);
-  var hasContainer = button || icon;
-  var className = cn(getInputClasses(props), 'min-h-[theme(spacing.8)] pointer-events-all', {
+const Input = /*#__PURE__*/React.forwardRef(function Input(props, ref) {
+  const {
+    button,
+    icon,
+    highlighted,
+    invalid,
+    onKeyDown,
+    autoFocus,
+    ...otherProps
+  } = props;
+  const inputRef = useProxiedRef(ref);
+  const hasContainer = button || icon;
+  const className = cn(getInputClasses(props), 'min-h-[theme(spacing.8)] pointer-events-all', {
     'pr-8': !!hasContainer
   }, !hasContainer && otherProps.className);
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (autoFocus && inputRef.current) {
       inputRef.current.focus();
     }
@@ -4230,10 +4211,10 @@ var Input = /*#__PURE__*/React.forwardRef(function Input(props, ref) {
   // if it has scroll height then the browser reverts to native scrolling behaviour only
   // so we manually override it to ensure _our_ desired behaviour remains intact
 
-  var handleKeyDown = function handleKeyDown(event) {
+  const handleKeyDown = event => {
     if (event.key === 'Home' || event.key === 'End') {
       event.preventDefault();
-      var position = event.key === 'End' ? event.currentTarget.value.length : 0;
+      const position = event.key === 'End' ? event.currentTarget.value.length : 0;
       event.currentTarget.setSelectionRange(position, position);
     }
 
@@ -4242,7 +4223,7 @@ var Input = /*#__PURE__*/React.forwardRef(function Input(props, ref) {
     }
   };
 
-  var input = React.createElement("input", Object.assign({}, otherProps, {
+  const input = React.createElement("input", Object.assign({}, otherProps, {
     className: className,
     "data-taco": "input",
     onKeyDown: handleKeyDown,
@@ -4250,19 +4231,21 @@ var Input = /*#__PURE__*/React.forwardRef(function Input(props, ref) {
   }));
 
   if (hasContainer) {
-    var extra;
+    let extra;
 
     if (button) {
-      var _button$props$disable, _cn;
+      var _button$props$disable;
 
-      var disabled = (_button$props$disable = button.props.disabled) !== null && _button$props$disable !== void 0 ? _button$props$disable : otherProps.disabled;
-      var buttonClassName = cn('items-center flex justify-center border absolute rounded-l-none rounded-r right-0 h-full focus:rounded focus:outline-none', (_cn = {}, _cn[getButtonStateClasses(invalid)] = !props.disabled, _cn), button.props.className);
+      const disabled = (_button$props$disable = button.props.disabled) !== null && _button$props$disable !== void 0 ? _button$props$disable : otherProps.disabled;
+      const buttonClassName = cn('items-center flex justify-center border absolute rounded-l-none rounded-r right-0 h-full focus:rounded focus:outline-none', {
+        [getButtonStateClasses(invalid)]: !props.disabled
+      }, button.props.className);
       extra = React.cloneElement(button, {
         className: buttonClassName,
-        disabled: disabled
+        disabled
       });
     } else if (icon) {
-      var iconClassName = cn('items-center flex justify-center absolute pointer-events-none mr-1 p-px right-0 w-5 top-1/2 -translate-y-1/2', {
+      const iconClassName = cn('items-center flex justify-center absolute pointer-events-none mr-1 p-px right-0 w-5 top-1/2 -translate-y-1/2', {
         'text-grey-dark': props.disabled,
         'text-grey-darkest': !props.disabled
       });
@@ -4274,7 +4257,7 @@ var Input = /*#__PURE__*/React.forwardRef(function Input(props, ref) {
       });
     }
 
-    var containerClassName = cn('bg-white inline-flex relative rounded w-full', otherProps.className);
+    const containerClassName = cn('bg-white inline-flex relative rounded w-full', otherProps.className);
     return React.createElement("div", {
       className: containerClassName,
       "data-taco": "input-container"
@@ -4582,12 +4565,11 @@ const setInputValueByRef = (input, value, event = 'change') => {
   input.dispatchEvent(createCustomEvent(event));
 };
 
+const getValue = value => String(value !== null && value !== void 0 ? value : '');
+
 const setInputValueByRef$1 = (input, value, event = 'change') => {
-  setInputValueByRef(input, value !== undefined && value !== null ? String(value) : '', event);
+  setInputValueByRef(input, getValue(value), event);
 };
-
-const getValue = value => value === undefined || value === null ? '' : String(value);
-
 const getIndexFromValue = (data, value) => {
   const index = data.findIndex(option => getValue(option.value) === getValue(value));
   return index > -1 ? index : undefined;
@@ -4612,9 +4594,7 @@ const searchForString = (child, value, strategy = 'includes') => {
 
       return searchForString((_child$props3 = child.props) === null || _child$props3 === void 0 ? void 0 : _child$props3.children, value, strategy);
     } else {
-      var _String;
-
-      return child.toString().toLowerCase()[strategy]((_String = String(value)) === null || _String === void 0 ? void 0 : _String.toLowerCase());
+      return child.toString().toLowerCase()[strategy](String(value).toLowerCase());
     }
   } catch {
     return false;
@@ -5048,12 +5028,12 @@ var useBoundingClientRectListener = function useBoundingClientRectListener(ref)
   return dimensions;
 };
 
-var _excluded$8 = ["className", "dialog", "style"];
+var _excluded$3 = ["className", "dialog", "style"];
 var Combobox = /*#__PURE__*/React.forwardRef(function Combobox(props, ref) {
   var externalClassName = props.className,
       dialog = props.dialog,
       style = props.style,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$8);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$3);
 
   var _useCombobox = useCombobox(otherProps, ref),
       combobox = _useCombobox.combobox,
@@ -5345,19 +5325,18 @@ function mergeRefs(refs) {
   };
 }
 
-var _excluded$9 = ["children", "trigger"];
-var PopoverContext = /*#__PURE__*/React.createContext({
+const PopoverContext = /*#__PURE__*/React.createContext({
   props: {},
   ref: null
 });
-var Trigger$1 = /*#__PURE__*/React.forwardRef(function PopoverTrigger(props, ref) {
+const Trigger$1 = /*#__PURE__*/React.forwardRef(function PopoverTrigger(props, ref) {
   var _props$children;
 
-  var context = React.useContext(PopoverContext);
-  var children = props.children;
+  const context = React.useContext(PopoverContext);
+  let 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);
   }
 
@@ -5367,22 +5346,22 @@ var Trigger$1 = /*#__PURE__*/React.forwardRef(function PopoverTrigger(props, ref
     asChild: true
   }));
 });
-var RenderPropWrapper = /*#__PURE__*/React.forwardRef(function RenderPropWrapper(_ref, ref) {
-  var children = _ref.children,
-      onClick = _ref.onClick;
-
-  var close = function close() {
+const RenderPropWrapper = /*#__PURE__*/React.forwardRef(function RenderPropWrapper({
+  children,
+  onClick
+}, ref) {
+  const close = () => {
     onClick(new CustomEvent('hide'));
   };
 
   return children({
-    close: close,
-    ref: ref
+    close,
+    ref
   });
 });
-var Content$1 = /*#__PURE__*/React.forwardRef(function PopoverContent(props, ref) {
-  var className = cn('bg-white focus:border-blue-light', props.className);
-  var output;
+const Content$1 = /*#__PURE__*/React.forwardRef(function PopoverContent(props, ref) {
+  const className = cn('bg-white focus:border-blue-light', props.className);
+  let output;
 
   if (typeof props.children === 'function') {
     output = React.createElement(PopoverPrimitive.Close, {
@@ -5400,23 +5379,20 @@ var Content$1 = /*#__PURE__*/React.forwardRef(function PopoverContent(props, ref
     className: "text-white"
   }));
 });
-var Close$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  return React.createElement(PopoverPrimitive.Close, Object.assign({}, props, {
-    ref: ref,
-    asChild: true
-  }));
-});
-var Popover = /*#__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]);
+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]);
   return React.createElement(PopoverContext.Provider, {
     value: context
   }, React.createElement(PopoverPrimitive.Root, null, trigger && React.createElement(Trigger$1, null, trigger), children));
@@ -5425,25 +5401,25 @@ Popover.Trigger = Trigger$1;
 Popover.Content = Content$1;
 Popover.Close = Close$1;
 
-var _excluded$a = ["className", "onReset", "style", "shortcuts", "shortcutsText"];
-var Datepicker = /*#__PURE__*/React.forwardRef(function Datepicker(props, ref) {
+const Datepicker = /*#__PURE__*/React.forwardRef(function Datepicker(props, ref) {
   var _input$disabled;
 
-  var externalClassName = props.className,
-      handleReset = props.onReset,
-      style = props.style,
-      shortcuts = props.shortcuts,
-      shortcutsText = props.shortcutsText,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$a);
-
-  var _useDatepicker = useDatepicker(otherProps, ref),
-      calendar = _useDatepicker.calendar,
-      input = _useDatepicker.input;
-
-  var _useLocalization = useLocalization(),
-      texts = _useLocalization.texts;
-
-  var className = cn('inline-flex w-full text-black font-normal', externalClassName);
+  const {
+    className: externalClassName,
+    onReset: handleReset,
+    style,
+    shortcuts,
+    shortcutsText,
+    ...otherProps
+  } = props;
+  const {
+    calendar,
+    input
+  } = useDatepicker(otherProps, ref);
+  const {
+    texts
+  } = useLocalization();
+  const className = cn('inline-flex w-full text-black font-normal', externalClassName);
   return React.createElement("span", {
     className: className,
     "data-taco": "datepicker",
@@ -5453,40 +5429,37 @@ var Datepicker = /*#__PURE__*/React.forwardRef(function Datepicker(props, ref) {
       "aria-label": texts.datepicker.expand,
       disabled: (_input$disabled = input.disabled) !== null && _input$disabled !== void 0 ? _input$disabled : input.readOnly,
       icon: "calendar"
-    })), React.createElement(Popover.Content, null, function (_ref) {
-      var close = _ref.close;
-      return React.createElement("div", {
-        className: "flex -m-3"
-      }, React.createElement(Calendar$1, Object.assign({}, calendar, {
-        onChange: function onChange(date, event) {
-          calendar.onChange(date, event);
-          close();
-        },
-        tabIndex: -1
-      })), shortcuts && React.createElement("div", {
-        className: "border-l border-grey-dark flex flex-col"
-      }, React.createElement("span", {
-        className: "font-semibold text-xs m-4 flex items-center h-8 w-32 mb-3"
-      }, shortcutsText !== null && shortcutsText !== void 0 ? shortcutsText : texts.datepicker.shortcuts), React.createElement("ul", null, shortcuts.map(function (shortcut, i) {
-        return React.createElement("li", {
-          key: i
-        }, React.createElement("button", {
-          className: "w-full px-4 py-1 flex items-start hover:bg-grey-light text-xs",
-          onClick: function onClick(event) {
-            event.persist();
-            shortcut.onClick(event);
-            close();
-          }
-        }, shortcut.text));
-      })), handleReset && React.createElement("button", {
-        className: "text-blue hover:text-blue-light inline-flex border-none bg-transparent text-xs cursor-pointer mt-auto my-4 mx-auto",
-        onClick: function onClick(event) {
-          event.persist();
-          handleReset(event);
-          close();
-        }
-      }, texts.datepicker.clear)));
-    }))
+    })), React.createElement(Popover.Content, null, ({
+      close
+    }) => React.createElement("div", {
+      className: "flex -m-3"
+    }, React.createElement(Calendar$1, Object.assign({}, calendar, {
+      onChange: (date, event) => {
+        calendar.onChange(date, event);
+        close();
+      },
+      tabIndex: -1
+    })), shortcuts && React.createElement("div", {
+      className: "border-l border-grey-dark flex flex-col"
+    }, React.createElement("span", {
+      className: "font-semibold text-xs m-4 flex items-center h-8 w-32 mb-3"
+    }, shortcutsText !== null && shortcutsText !== void 0 ? shortcutsText : texts.datepicker.shortcuts), React.createElement("ul", null, shortcuts.map((shortcut, i) => React.createElement("li", {
+      key: i
+    }, React.createElement("button", {
+      className: "w-full px-4 py-1 flex items-start hover:bg-grey-light text-xs",
+      onClick: event => {
+        event.persist();
+        shortcut.onClick(event);
+        close();
+      }
+    }, shortcut.text)))), handleReset && React.createElement("button", {
+      className: "text-blue hover:text-blue-light inline-flex border-none bg-transparent text-xs cursor-pointer mt-auto my-4 mx-auto",
+      onClick: event => {
+        event.persist();
+        handleReset(event);
+        close();
+      }
+    }, texts.datepicker.clear)))))
   })));
 });
 
@@ -5729,14 +5702,12 @@ const Extra = /*#__PURE__*/React.forwardRef(function DialogExtra(props, ref) {
 });
 Extra.displayName = 'DialogExtra';
 
-var _excluded$b = ["children", "closeOnEscape", "defaultOpen", "draggable", "onChange", "onClose", "open", "showCloseButton", "size", "trigger"];
-
-var useSeparatedChildren = function useSeparatedChildren(initialChildren) {
-  return React.useMemo(function () {
-    var children = [];
-    var drawer;
-    var extra;
-    React.Children.toArray(initialChildren).forEach(function (child) {
+const useSeparatedChildren = initialChildren => {
+  return React.useMemo(() => {
+    const children = [];
+    let drawer;
+    let extra;
+    React.Children.toArray(initialChildren).forEach(child => {
       var _child$type, _child$type2;
 
       if (((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) === Drawer.displayName) {
@@ -5751,55 +5722,39 @@ var useSeparatedChildren = function useSeparatedChildren(initialChildren) {
   }, [initialChildren]);
 };
 
-var Dialog = /*#__PURE__*/React.forwardRef(function Dialog(props, ref) {
-  var initialChildren = props.children,
-      _props$closeOnEscape = props.closeOnEscape,
-      closeOnEscape = _props$closeOnEscape === void 0 ? true : _props$closeOnEscape,
-      defaultOpen = props.defaultOpen,
-      _props$draggable = props.draggable,
-      draggable = _props$draggable === void 0 ? false : _props$draggable,
-      onChange = props.onChange,
-      onClose = props.onClose,
-      open = props.open,
-      _props$showCloseButto = props.showCloseButton,
-      showCloseButton = _props$showCloseButto === void 0 ? true : _props$showCloseButto,
-      _props$size = props.size,
-      size = _props$size === void 0 ? 'sm' : _props$size,
-      trigger = props.trigger,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$b);
-
-  var _useSeparatedChildren = useSeparatedChildren(initialChildren),
-      children = _useSeparatedChildren[0],
-      drawer = _useSeparatedChildren[1],
-      extra = _useSeparatedChildren[2];
-
-  var _React$useState = React.useState(false),
-      drawerOpen = _React$useState[0],
-      setDrawerOpen = _React$useState[1];
-
-  var context = React.useMemo(function () {
-    return {
-      closeOnEscape: closeOnEscape,
-      draggable: draggable,
-      drawer: {
-        open: drawerOpen,
-        toggle: function toggle() {
-          return setDrawerOpen(function (isDrawerOpen) {
-            return !isDrawerOpen;
-          });
-        }
-      },
-      elements: {
-        drawer: drawer,
-        extra: extra
-      },
-      onClose: onClose,
-      props: otherProps,
-      showCloseButton: showCloseButton,
-      size: size,
-      ref: ref
-    };
-  }, [closeOnEscape, drawerOpen, draggable, drawer, extra, open, otherProps, showCloseButton]);
+const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(props, ref) {
+  const {
+    children: initialChildren,
+    closeOnEscape = true,
+    defaultOpen,
+    draggable = false,
+    onChange,
+    onClose,
+    open,
+    showCloseButton = true,
+    size = 'sm',
+    trigger,
+    ...otherProps
+  } = props;
+  const [children, drawer, extra] = useSeparatedChildren(initialChildren);
+  const [drawerOpen, setDrawerOpen] = React.useState(false);
+  const context = React.useMemo(() => ({
+    closeOnEscape,
+    draggable,
+    drawer: {
+      open: drawerOpen,
+      toggle: () => setDrawerOpen(isDrawerOpen => !isDrawerOpen)
+    },
+    elements: {
+      drawer,
+      extra
+    },
+    onClose,
+    props: otherProps,
+    showCloseButton,
+    size,
+    ref
+  }), [closeOnEscape, drawerOpen, draggable, drawer, extra, open, otherProps, showCloseButton]);
   return React.createElement(DialogContext.Provider, {
     value: context
   }, React.createElement(DialogPrimitive.Root, {
@@ -5816,19 +5771,18 @@ Dialog.Extra = Extra;
 Dialog.Drawer = Drawer;
 Dialog.Close = Close$2;
 
-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$c);
-
-  var className = cn('flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]', {
+const Field = /*#__PURE__*/React.forwardRef(function Field(props, ref) {
+  const {
+    disabled,
+    children,
+    invalid = false,
+    message,
+    ...otherProps
+  } = props;
+  const className = cn('flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]', {
     'text-grey-dark': disabled
   }, props.className);
-  var messageClassName = cn('h-4 text-xs text-left leading-normal font-normal truncate -mb-4', {
+  const messageClassName = cn('h-4 text-xs text-left leading-normal font-normal truncate -mb-4', {
     'text-grey-darkest': !invalid,
     'text-red': invalid,
     'opacity-50': disabled
@@ -5843,13 +5797,12 @@ var Field = /*#__PURE__*/React.forwardRef(function Field(props, ref) {
   }, message));
 });
 
-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$d);
-
-  var className = cn('yt-form', {
+const Form = /*#__PURE__*/React.forwardRef(function Form(props, ref) {
+  const {
+    horizontal = false,
+    ...otherProps
+  } = props;
+  const className = cn('yt-form', {
     'yt-form--horizontal flex flex-wrap': horizontal
   }, props.className);
   return React.createElement("form", Object.assign({}, otherProps, {
@@ -5859,13 +5812,12 @@ var Form = /*#__PURE__*/React.forwardRef(function Form(props, ref) {
   }));
 });
 
-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$e);
-
-  var className = cn('flex ', props.className);
+const Group = /*#__PURE__*/React.forwardRef(function Group(props, ref) {
+  const {
+    as: Tag = 'span',
+    ...otherProps
+  } = props;
+  const className = cn('flex ', props.className);
   return React.createElement(Tag, Object.assign({}, otherProps, {
     className: className,
     "data-taco": "group",
@@ -5873,19 +5825,18 @@ var Group = /*#__PURE__*/React.forwardRef(function Group(props, ref) {
   }));
 });
 
-var _excluded$f = ["anchor", "children", "defaultOpen"];
-var HangerContext = /*#__PURE__*/React.createContext({
+const HangerContext = /*#__PURE__*/React.createContext({
   props: {},
   ref: null
 });
-var Anchor = /*#__PURE__*/React.forwardRef(function HangerAnchor(props, ref) {
+const Anchor = /*#__PURE__*/React.forwardRef(function HangerAnchor(props, ref) {
   var _props$children;
 
-  var context = React.useContext(HangerContext);
-  var children = props.children;
+  const context = React.useContext(HangerContext);
+  let 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");
+    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);
   }
 
@@ -5895,15 +5846,14 @@ var Anchor = /*#__PURE__*/React.forwardRef(function HangerAnchor(props, ref) {
     asChild: true
   }));
 });
-var Content$3 = /*#__PURE__*/React.forwardRef(function HangerContent(props, ref) {
-  var context = React.useContext(HangerContext);
-
-  var _useLocalization = useLocalization(),
-      texts = _useLocalization.texts;
-
-  var className = cn('wcag-blue border border-transparent rounded p-3 pr-12 yt-shadow z-[996] focus:border-transparent', props.className);
+const Content$3 = /*#__PURE__*/React.forwardRef(function HangerContent(props, ref) {
+  const context = React.useContext(HangerContext);
+  const {
+    texts
+  } = useLocalization();
+  const className = cn('wcag-blue border border-transparent rounded p-3 pr-12 yt-shadow z-[996] focus:border-transparent', props.className);
 
-  var handleInteractOutside = function handleInteractOutside(event) {
+  const handleInteractOutside = event => {
     event.preventDefault();
   };
 
@@ -5925,25 +5875,20 @@ var Content$3 = /*#__PURE__*/React.forwardRef(function HangerContent(props, ref)
     onClick: context.props.onClose
   })));
 });
-var Hanger = /*#__PURE__*/React.forwardRef(function Hanger(props, ref) {
-  var anchor = props.anchor,
-      children = props.children,
-      _props$defaultOpen = props.defaultOpen,
-      defaultOpen = _props$defaultOpen === void 0 ? true : _props$defaultOpen,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$f);
-
-  var context = React.useMemo(function () {
-    return {
-      props: otherProps,
-      ref: ref
-    };
-  }, [otherProps]); // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal
-
-  var _React$useState = React.useState(false),
-      open = _React$useState[0],
-      setOpen = _React$useState[1];
+const Hanger = /*#__PURE__*/React.forwardRef(function Hanger(props, ref) {
+  const {
+    anchor,
+    children,
+    defaultOpen = true,
+    ...otherProps
+  } = props;
+  const context = React.useMemo(() => ({
+    props: otherProps,
+    ref
+  }), [otherProps]); // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal
 
-  React.useEffect(function () {
+  const [open, setOpen] = React.useState(false);
+  React.useEffect(() => {
     if (defaultOpen) {
       setOpen(defaultOpen);
     }
@@ -6109,7 +6054,7 @@ const useListbox = ({
     onChange: handleInputChange,
     ref: inputRef,
     tabIndex: -1,
-    value: value === undefined || value === null ? '' : value
+    value: value !== null && value !== void 0 ? value : ''
   };
   return {
     list,
@@ -6121,6 +6066,7 @@ const useMultiListbox = ({
   data: externalData = [],
   defaultValue,
   disabled,
+  emptyValue: _,
   id: nativeId,
   name,
   onClick,
@@ -6302,49 +6248,49 @@ const useMultiListbox = ({
   };
 };
 
-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);
+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);
   return React.createElement("span", {
     "data-taco": "listbox",
     className: className
   }, React.createElement(ScrollableList, Object.assign({}, list, {
-    style: _extends({}, list.style, {
+    style: { ...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$1);
-
-  var _useMultiListbox = useMultiListbox(otherProps, ref),
-      list = _useMultiListbox.list,
-      input = _useMultiListbox.input;
-
-  var className = cn('bg-white inline-flex relative w-full', externalClassName);
+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);
   return React.createElement("span", {
     "data-taco": "listbox",
     className: className
   }, React.createElement(ScrollableList, Object.assign({}, list, {
-    style: _extends({}, list.style, {
+    style: { ...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"
@@ -6607,34 +6553,26 @@ const Checkbox$1 = props => {
   })), children);
 };
 
-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({
+const getRadioGroupItemValueAsString = value => value === null ? '' : String(value);
+const findByValue$1 = (values, valueAsString) => values.find(value => getRadioGroupItemValueAsString(value) === valueAsString);
+const RadioGroupContext = /*#__PURE__*/React.createContext({
   disabled: false,
   invalid: false
 });
-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 ', {
+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 ', {
     'border-grey-dark focus:border-blue focus:yt-focus aria-checked:bg-blue aria-checked:border-blue': !disabled && !context.invalid,
     'border-grey cursor-not-allowed aria-checked:bg-grey-dark aria-checked:border-grey-dark': disabled,
     'border-red text-red focus:border-red focus:yt-focus-red aria-checked:bg-red aria-checked:border-red': context.invalid && !disabled
   });
-  var labelClassName = cn('flex items-center cursor-pointer', {
+  const labelClassName = cn('flex items-center cursor-pointer', {
     'cursor-not-allowed text-grey-dark': disabled
   }, props.className);
   return React.createElement("label", {
@@ -6648,38 +6586,34 @@ var RadioGroupItem = /*#__PURE__*/React.forwardRef(function RadioGroupItem(props
     className: "h-2 w-2 rounded-full bg-white"
   })), children);
 });
-var useRadioGroup = function useRadioGroup(props) {
-  var children = props.children,
-      defaultValue = props.defaultValue,
-      disabled = props.disabled,
-      invalid = props.invalid,
-      onChange = props.onChange,
-      _props$orientation = props.orientation,
-      orientation = _props$orientation === void 0 ? 'vertical' : _props$orientation,
-      value = props.value,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded2$2);
-
-  var values = React.useMemo(function () {
-    var radioGroupItemValues = [];
-    React.Children.forEach(children, function (child) {
+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 => {
       if (React.isValidElement(child)) {
         radioGroupItemValues.push(child.props.value);
       }
     });
     return radioGroupItemValues;
   }, [children]);
-  var context = React.useMemo(function () {
-    return {
-      disabled: disabled !== null && disabled !== void 0 ? disabled : false,
-      invalid: invalid !== null && invalid !== void 0 ? invalid : false
-    };
-  }, [disabled, invalid]);
-  var valueProps;
+  const context = React.useMemo(() => ({
+    disabled: disabled !== null && disabled !== void 0 ? disabled : false,
+    invalid: invalid !== null && invalid !== void 0 ? invalid : false
+  }), [disabled, invalid]);
+  let valueProps;
 
   if (onChange !== undefined) {
-    var handleChange = function handleChange(value) {
-      return onChange(findByValue$1(values, value));
-    };
+    const handleChange = value => onChange(findByValue$1(values, value));
 
     valueProps = {
       onValueChange: handleChange,
@@ -6692,19 +6626,20 @@ var useRadioGroup = function useRadioGroup(props) {
   }
 
   return {
-    context: context,
-    props: _extends({}, otherProps, valueProps, {
-      children: children,
-      orientation: orientation
-    })
+    context,
+    props: { ...otherProps,
+      ...valueProps,
+      children,
+      orientation
+    }
   };
 };
-var RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(props, ref) {
-  var _useRadioGroup = useRadioGroup(props),
-      context = _useRadioGroup.context,
-      otherProps = _useRadioGroup.props;
-
-  var className = cn('flex items-start', {
+const RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(props, ref) {
+  const {
+    context,
+    props: otherProps
+  } = useRadioGroup(props);
+  const className = cn('flex items-start', {
     'flex-wrap space-x-4': otherProps.orientation === 'horizontal',
     'flex-col space-y-2': otherProps.orientation === 'vertical'
   }, otherProps.className);
@@ -6817,48 +6752,26 @@ const Header = props => {
   }));
 };
 
-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]);
+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]);
   return React.createElement(MenuContext.Provider, {
     value: context
   }, React.createElement(DropdownMenuPrimitive.Root, Object.assign({}, props, {
@@ -6978,25 +6891,20 @@ const useDropTarget = onDrop => {
   return [isDraggedOver, props];
 };
 
-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', {
+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', {
     '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,
@@ -7004,7 +6912,7 @@ var Item$2 = /*#__PURE__*/React__default.forwardRef(function Item(props, ref) {
     'yt-navigation__item--dropping bg-blue': isDraggedOver
   }, props.className);
 
-  var handleClick = function handleClick(event) {
+  const handleClick = event => {
     if (event.target instanceof HTMLAnchorElement || event.target instanceof HTMLButtonElement) {
       return;
     }
@@ -7027,19 +6935,19 @@ var Item$2 = /*#__PURE__*/React__default.forwardRef(function Item(props, ref) {
     className: "yt-navigation__item__postfix ml-1"
   }, postfix));
 });
-var Panel = /*#__PURE__*/React__default.forwardRef(function Panel(props, ref) {
+const 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
   }));
 });
-var MenuGroup = /*#__PURE__*/React__default.forwardRef(function MenuGroup(props, ref) {
-  var className = cn('flex-shrink-0 space-y-1 outline-none', {
+const MenuGroup = /*#__PURE__*/React__default.forwardRef(function MenuGroup(props, ref) {
+  const className = cn('flex-shrink-0 space-y-1 outline-none', {
     'bg-white pb-2': props.fixed
   }, props.className);
 
-  var title = function title(expanded) {
-    var className = cn('bg-white h-10 pl-3 pr-1 flex items-center justify-between w-full', {
+  const title = expanded => {
+    const 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
     });
@@ -7056,16 +6964,14 @@ var MenuGroup = /*#__PURE__*/React__default.forwardRef(function MenuGroup(props,
     ref: ref
   }));
 });
-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) {
+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 => {
       if (child.props.fixed) {
         scrollableAreas.push(child);
       } else {
-        var x = scrollableAreas[scrollableAreas.length - 1];
+        const x = scrollableAreas[scrollableAreas.length - 1];
 
         if (Array.isArray(x)) {
           x.push(child);
@@ -7079,19 +6985,18 @@ var 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(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;
-  }));
+  }), 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));
 });
 Menu$1.Group = MenuGroup;
-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);
+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);
   return React__default.createElement("div", Object.assign({}, otherProps, {
     className: className,
     "data-taco": "navigation",
@@ -7155,20 +7060,21 @@ const useSelect = ({
   emptyValue,
   id: nativeId,
   multiselect,
+  onBlur,
   onClick,
   onChange,
   readOnly,
-  value = emptyValue,
+  value,
   ...otherProps
 }, ref) => {
   const {
     texts
   } = useLocalization();
-  const searchData = useFlattenedData(data);
-  const inputRef = useProxiedRef(ref);
+  const flattenedData = useFlattenedData(data);
+  const listboxInputRef = useProxiedRef(ref);
   const [open, setOpen] = React.useState(false);
   const id = React.useMemo(() => nativeId || `select_${uuid.v4()}`, [nativeId]);
-  const internalInputRef = React.useRef(null);
+  const inputRef = React.useRef(null);
   const buttonId = `${id}-button`; // support 'escape' resetting to the value that was set when the listbox opened
 
   const [lastValue, setLastValue] = React.useState(value);
@@ -7176,16 +7082,24 @@ const useSelect = ({
     setLastValue(value);
   }, [open]);
   React.useEffect(() => {
-    if (defaultValue !== undefined && value === undefined) {
-      setInputValueByRef$1(internalInputRef.current, defaultValue);
-    }
-  }, [defaultValue]);
-  React.useEffect(() => {
-    // If emptyValue is defined, then set emptyValue
-    if (emptyValue !== undefined && value === emptyValue) {
-      setInputValueByRef$1(internalInputRef.current, value);
-    } else if (value !== undefined && data.some(option => option.value === value)) {
-      setInputValueByRef$1(internalInputRef.current, value);
+    if (value === undefined) {
+      if (defaultValue !== undefined && findByValue(flattenedData, defaultValue)) {
+        setInputValueByRef$1(inputRef.current, defaultValue);
+      } else {
+        if (emptyValue !== undefined) {
+          setInputValueByRef$1(inputRef.current, emptyValue);
+        } else if (data.length > 0) {
+          setInputValueByRef$1(inputRef.current, data[0].value);
+        }
+      }
+    } else {
+      if (!multiselect && !findByValue(flattenedData, value)) {
+        if (emptyValue !== undefined) {
+          setInputValueByRef$1(inputRef.current, emptyValue);
+        } else if (data.length > 0) {
+          setInputValueByRef$1(inputRef.current, data[0].value);
+        }
+      }
     }
   }, []); // event handlers
 
@@ -7203,7 +7117,7 @@ const useSelect = ({
           event.preventDefault();
 
           if (lastValue !== undefined) {
-            setInputValueByRef$1(inputRef.current, lastValue);
+            setInputValueByRef$1(listboxInputRef.current, lastValue);
           }
 
           setOpen(false);
@@ -7232,6 +7146,10 @@ const useSelect = ({
 
     if (!multiselect) {
       setOpen(false);
+
+      if (onBlur) {
+        onBlur(createCustomEvent('blur'));
+      }
     }
   };
 
@@ -7242,16 +7160,16 @@ const useSelect = ({
     if (multiselect) {
       const selectedValues = (value === null || value === void 0 ? void 0 : value.toString().split(',')) || [];
 
-      if (selectedValues.length === searchData.filter(item => !item.disabled).length) {
+      if (selectedValues.length === flattenedData.filter(item => !item.disabled).length) {
         text = texts.select.allOptionsSelected;
       } else {
         var _findByValue$text, _findByValue;
 
-        text = (_findByValue$text = (_findByValue = findByValue(searchData, selectedValues[0])) === null || _findByValue === void 0 ? void 0 : _findByValue.text) !== null && _findByValue$text !== void 0 ? _findByValue$text : '';
+        text = (_findByValue$text = (_findByValue = findByValue(flattenedData, selectedValues[0])) === null || _findByValue === void 0 ? void 0 : _findByValue.text) !== null && _findByValue$text !== void 0 ? _findByValue$text : '';
         more = selectedValues.length > 1 ? selectedValues.length - 1 : 0;
       }
     } else {
-      const item = findByValue(searchData, value);
+      const item = findByValue(flattenedData, value);
 
       if (item) {
         text = item.icon ? React.createElement(React.Fragment, null, React.cloneElement(item.icon, {
@@ -7267,7 +7185,7 @@ const useSelect = ({
     if (onChange) {
       var _item$path$split, _item$path;
 
-      const item = findByValue(searchData, event.target.value);
+      const item = findByValue(flattenedData, event.target.value);
       event.detail = sanitizeItem(item);
       const 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 : [];
 
@@ -7278,7 +7196,7 @@ const useSelect = ({
         let lastPath;
         event.detail.parents = indexes.map(i => {
           lastPath = lastPath ? [lastPath, i].join('.') : i;
-          return sanitizeItem(searchData.find(i => i.path === lastPath));
+          return sanitizeItem(flattenedData.find(i => i.path === lastPath));
         });
       }
 
@@ -7301,21 +7219,19 @@ const useSelect = ({
     data,
     disabled,
     emptyValue,
+    onBlur,
     onClick: handleListboxClick,
     onChange: event => {
-      var _event$target;
-
-      setInputValueByRef$1(internalInputRef.current, (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value);
+      setInputValueByRef$1(inputRef.current, event.target.value);
     },
     onKeyDown: handleListboxKeyDown,
-    ref: inputRef,
-    value,
-    multiselect
+    ref: listboxInputRef,
+    value
   };
   const input = {
     onChange: handleInputChange,
-    ref: internalInputRef,
-    value: value !== null && value !== void 0 ? value : ''
+    ref: inputRef,
+    value: String(value !== null && value !== void 0 ? value : '')
   };
   return {
     button,
@@ -7323,61 +7239,65 @@ const useSelect = ({
     input,
     popover: {
       open,
-      onOpenChange: setOpen
+      onOpenChange: open => {
+        if (!open && onBlur) {
+          onBlur(createCustomEvent('blur'));
+        }
+
+        setOpen(open);
+      }
     },
     text,
     more
   };
 };
 
-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', {
+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', {
     'yt-select--readonly': props.readOnly
   }, externalClassName);
-  var inputClassname = cn(getInputClasses(props), 'h-8 text-left pr-0', {
+  const inputClassname = cn(getInputClasses(props), 'h-8 text-left pr-0', {
     'border-blue': popover.open
   });
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (autoFocus && internalRef.current) {
       internalRef.current.focus();
     }
   }, []);
 
-  var renderMultiSelection = function renderMultiSelection() {
+  const 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}`));
   };
 
-  var commonListboxProps = _extends({}, listbox, {
+  const commonListboxProps = { ...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",
@@ -7400,9 +7320,11 @@ var BaseSelect = /*#__PURE__*/React.forwardRef(function BaseSelect(props, ref) {
     type: "text"
   }))));
 });
-var Select = /*#__PURE__*/React.forwardRef(function Select(props, ref) {
-  var editable = props.editable,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded2$4);
+const Select = /*#__PURE__*/React.forwardRef(function Select(props, ref) {
+  const {
+    editable,
+    ...otherProps
+  } = props;
 
   if (editable) {
     return React.createElement(Combobox, Object.assign({}, otherProps, {
@@ -7473,47 +7395,41 @@ const usePagination = (initialPageIndex = 0, initialPageSize = 10) => {
   };
 };
 
-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;
+const getShowingLabel = (length, pageIndex, pageSize, texts) => {
+  const minItemIndex = pageIndex * pageSize + 1;
+  const 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));
 };
 
-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;
+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;
   usePaginationShortcuts({
-    setPageIndex: setPageIndex,
-    maxPageIndex: maxPageIndex,
-    pageIndex: pageIndex,
-    dangerouslyHijackGlobalKeyboardNavigation: dangerouslyHijackGlobalKeyboardNavigation
+    setPageIndex,
+    maxPageIndex,
+    pageIndex,
+    dangerouslyHijackGlobalKeyboardNavigation
   });
-  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);
+  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);
   return React.createElement("div", Object.assign({}, otherProps, {
     className: className,
     "data-taco": "pagination",
@@ -7523,13 +7439,11 @@ var 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(function (pageSize) {
-      return {
-        text: String(pageSize),
-        value: pageSize
-      };
-    }),
-    onChange: function onChange(event) {
+    data: pageSizes.map(pageSize => ({
+      text: String(pageSize),
+      value: pageSize
+    })),
+    onChange: event => {
       setPageIndex(0);
       setPageSize(Number(event.target.value));
     },
@@ -7541,18 +7455,14 @@ var Pagination = /*#__PURE__*/React.forwardRef(function Pagination(props, ref) {
     appearance: "default",
     disabled: !canPreviousPage,
     icon: "arrow-start",
-    onClick: function onClick() {
-      return setPageIndex(0);
-    },
+    onClick: () => 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: function onClick() {
-      return setPageIndex(pageIndex - 1);
-    },
+    onClick: () => 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, {
@@ -7563,43 +7473,36 @@ var Pagination = /*#__PURE__*/React.forwardRef(function Pagination(props, ref) {
     appearance: "default",
     disabled: !canNextPage,
     icon: "arrow-right",
-    onClick: function onClick() {
-      return setPageIndex(pageIndex + 1);
-    },
+    onClick: () => 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: function onClick() {
-      return setPageIndex(pageCount - 1);
-    },
+    onClick: () => setPageIndex(pageCount - 1),
     "aria-label": showShortcutTexts ? texts.pagination.actions.lastPageWithShortcut : texts.pagination.actions.lastPage,
     tooltip: showShortcutTexts ? texts.pagination.actions.lastPageWithShortcut : texts.pagination.actions.lastPage
   })));
 });
 
-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;
+const Progress = ({
+  duration = undefined,
+  ...props
+}) => {
+  let style;
 
   if (duration) {
     style = {
-      animationDuration: duration + "ms"
+      animationDuration: `${duration}ms`
     };
   }
 
-  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));
+  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
+  });
   return React__default.createElement("span", Object.assign({}, props, {
     "data-taco": "progress",
     className: className
@@ -9491,22 +9394,22 @@ var useOnClickOutside = function useOnClickOutside(ref, callback) {
   }, [ref, callback]);
 };
 
-var _excluded$n = ["onSearch"];
-var SearchInput = /*#__PURE__*/React.forwardRef(function SearchInput(_ref, ref) {
-  var onSearch = _ref.onSearch,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
-
-  var _useLocalization = useLocalization(),
-      texts = _useLocalization.texts;
+const SearchInput = /*#__PURE__*/React.forwardRef(function SearchInput({
+  onSearch,
+  ...props
+}, ref) {
+  const {
+    texts
+  } = useLocalization();
 
-  var handleClick = function handleClick() {
+  const handleClick = () => {
     if (!props.disabled) {
       onSearch === null || onSearch === void 0 ? void 0 : onSearch(props.value);
     }
   };
 
-  var handleKeyDown = function handleKeyDown(event) {
-    var isEnterKeyPressed = event.keyCode === keycode('enter');
+  const handleKeyDown = event => {
+    const isEnterKeyPressed = event.keyCode === keycode('enter');
 
     if (isEnterKeyPressed) {
       handleClick();