@economic/taco 1.15.1 → 1.16.0

package/dist/taco.cjs.development.js

@@ -11,18 +11,18 @@ var cn = _interopDefault(require('classnames'));
 var AccordionPrimitive = require('@radix-ui/react-accordion');
 var TooltipPrimitive = require('@radix-ui/react-tooltip');
 var ReactDayPicker = _interopDefault(require('react-day-picker'));
-var uuid = require('uuid');
-var framerMotion = require('framer-motion');
 var CheckboxPrimitive = require('@radix-ui/react-checkbox');
+var uuid = require('uuid');
 var PopoverPrimitive = require('@radix-ui/react-popover');
 var debounce$1 = _interopDefault(require('lodash/debounce'));
 var dateFns = require('date-fns');
 var DialogPrimitive = require('@radix-ui/react-dialog');
 var interactions = require('@react-aria/interactions');
+var framerMotion = require('framer-motion');
 var HoverCardPrimitive = require('@radix-ui/react-hover-card');
 var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
-var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
 var reactUseControllableState = require('@radix-ui/react-use-controllable-state');
+var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
 var ScrollAreaPrimitive = require('@radix-ui/react-scroll-area');
 var reactTable = require('react-table');
 var reactIntersectionObserver = require('react-intersection-observer');
@@ -3489,18 +3489,130 @@ const IconButton = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
   }, button);
 });
 
+const defaultLocalisationTexts = {
+  calendar: {
+    months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+    weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    actions: {
+      previousMonth: 'Previous month',
+      nextMonth: 'Next month',
+      previousYear: 'Previous year',
+      nextYear: 'Next year',
+      today: 'Today'
+    }
+  },
+  combobox: {
+    tooltip: 'Search in list'
+  },
+  datepicker: {
+    calendar: 'Calendar',
+    clear: 'Clear',
+    expand: 'Show calendar',
+    shortcuts: 'Shortcuts'
+  },
+  hanger: {
+    close: 'Close'
+  },
+  banner: {
+    close: 'Close'
+  },
+  listbox: {
+    loading: 'Loading results...',
+    empty: 'No results found',
+    allOption: 'All'
+  },
+  dialog: {
+    close: 'Close',
+    drag: 'Drag'
+  },
+  pagination: {
+    label: 'Pagination',
+    pageSize: 'Items per page',
+    showingXofYofTotal: 'Showing [X] - [Y] of [total]',
+    actions: {
+      firstPage: 'Goto first page',
+      firstPageWithShortcut: 'Goto first page (Home)',
+      previousPage: 'Goto previous page',
+      previousPageWithShortcut: 'Goto previous page (Page Up)',
+      nextPage: 'Goto next page',
+      nextPageWithShortcut: 'Goto next page (Page Down)',
+      lastPage: 'Goto last page',
+      lastPageWithShortcut: 'Goto last page (End)',
+      pageX: 'Goto page [X]'
+    }
+  },
+  table: {
+    actions: 'Other actions',
+    edit: 'Edit (e)',
+    copy: 'Copy (c)',
+    del: 'Delete (del)',
+    newSubRow: 'New row (shift + n)',
+    loading: 'Loading...'
+  },
+  select: {
+    allOptionsSelected: 'All'
+  },
+  select2: {
+    allSelect: 'Select all',
+    allDeselect: 'Deselect all',
+    cancel: 'Cancel',
+    chooseColor: 'Pick a color',
+    create: 'Create',
+    delete: 'Delete',
+    save: 'Save',
+    search: 'Search...',
+    searchOrCreate: 'Search or create...'
+  },
+  toasts: {
+    dismiss: 'Dismiss'
+  },
+  tour: {
+    back: 'Back',
+    close: 'Close',
+    skip: 'Close and complete',
+    last: 'Done',
+    next: 'Next',
+    open: 'Open'
+  },
+  searchInput: {
+    inputLabel: 'Search...',
+    buttonLabel: 'Search'
+  }
+};
+const defaultLocalizationContext = {
+  locale: 'en-GB',
+  texts: defaultLocalisationTexts,
+  formatting: {
+    date: 'dd.mm.yy'
+  }
+};
+const LocalizationContext = /*#__PURE__*/React.createContext(defaultLocalizationContext);
+const LocalizationProvider = ({
+  localization,
+  children
+}) => {
+  return /*#__PURE__*/React.createElement(LocalizationContext.Provider, {
+    value: localization || defaultLocalizationContext
+  }, children);
+};
+const useLocalization = () => React.useContext(LocalizationContext);
+
 const Banner = /*#__PURE__*/React.forwardRef(function Banner(props, ref) {
   const {
     children,
     state,
     onClose
   } = props;
+  const {
+    texts
+  } = useLocalization();
   const className = cn('bg-white relative flex items-center gap-2 py-2 px-4 leading-6 shadow-md z-10', props.className);
   return /*#__PURE__*/React.createElement("div", {
     className: className,
     "data-taco": "banner",
     ref: ref
   }, getBannerIcon(state), children, onClose ? /*#__PURE__*/React.createElement(IconButton, {
+    "aria-label": texts.banner.close,
     className: "ml-auto -mr-2 self-start",
     icon: "close",
     appearance: "discrete",
@@ -3554,542 +3666,101 @@ const Button$1 = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
   }, button);
 });
 
-function useTimer(duration = 0, callback) {
-  const timer = React.useRef();
-  const [tracker, setTracker] = React.useState({
-    remaining: duration,
-    started: null
-  });
-  React.useEffect(() => {
-    if (duration) {
-      if (tracker.started) {
-        timer.current = window.setTimeout(callback, tracker.remaining);
-      } else {
-        clearTimeout(timer.current);
-      }
-    }
-    return () => {
-      clearTimeout(timer.current);
-    };
-  }, [tracker.started]);
-  return {
-    running: !!tracker.started,
-    start: () => {
-      setTracker({
-        remaining: duration,
-        started: Date.now()
-      });
-    },
-    pause: () => {
-      if (tracker.started) {
-        setTracker({
-          remaining: tracker.remaining - (Date.now() - tracker.started),
-          started: null
-        });
-      }
-    },
-    resume: () => {
-      if (tracker.remaining && !tracker.started) {
-        setTracker({
-          remaining: tracker.remaining,
-          started: Date.now()
-        });
+const thisYear = /*#__PURE__*/new Date().getFullYear();
+const years = [];
+for (let i = thisYear - 10; i <= thisYear + 10; i += 1) {
+  years.push(i);
+}
+const Navbar = /*#__PURE__*/React.memo(({
+  onMonthChange,
+  onNextClick,
+  onPreviousClick,
+  value = new Date()
+}) => {
+  const {
+    texts: {
+      calendar: {
+        actions,
+        months
       }
     }
+  } = useLocalization();
+  const handleChange = function handleChange(event) {
+    const {
+      year,
+      month
+    } = event.target.form;
+    onMonthChange(new Date(year.value, month.value));
   };
-}
-
-const Spinner$1 = /*#__PURE__*/React__default.forwardRef(function Spinner(props, ref) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "mb-2 flex items-center justify-between"
+  }, /*#__PURE__*/React.createElement("form", {
+    className: "inline-flex space-x-1"
+  }, /*#__PURE__*/React.createElement("select", {
+    className: "h-8 px-2",
+    name: "month",
+    onChange: handleChange,
+    value: value.getMonth()
+  }, months.map((month, i) => /*#__PURE__*/React.createElement("option", {
+    key: month,
+    value: i
+  }, month))), /*#__PURE__*/React.createElement("select", {
+    className: "h-8 px-2",
+    name: "year",
+    onChange: handleChange,
+    value: value.getFullYear()
+  }, years.map(year => /*#__PURE__*/React.createElement("option", {
+    key: year,
+    value: year
+  }, String(year))))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(IconButton, {
+    appearance: "discrete",
+    icon: "chevron-left",
+    "aria-label": actions.previousMonth,
+    onClick: () => onPreviousClick(),
+    rounded: true
+  }), /*#__PURE__*/React.createElement(IconButton, {
+    appearance: "discrete",
+    icon: "chevron-right",
+    "aria-label": actions.nextMonth,
+    onClick: () => onNextClick(),
+    rounded: true
+  })));
+});
+const Calendar$1 = /*#__PURE__*/React.forwardRef(function Calendar(props, ref) {
   const {
-    delay = 500,
-    label,
+    onChange: handleChange,
+    value,
+    disabledDays,
     ...otherProps
   } = props;
-  const [visible, setVisibility] = React__default.useState(!delay);
-  React__default.useEffect(() => {
-    let timeout;
-    if (delay) {
-      timeout = window.setTimeout(() => setVisibility(true), delay);
+  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());
     }
-    return () => {
-      if (timeout) {
-        clearTimeout(timeout);
-      }
-    };
-  }, [delay]);
-  if (!visible) {
-    return null;
-  }
-  const className = cn('inline-flex flex-col relative items-center', otherProps.className);
-  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, otherProps, {
-    className: className,
-    "data-taco": "spinner",
-    ref: ref
-  }), /*#__PURE__*/React__default.createElement("svg", {
-    className: "h-10 w-10 animate-[spinnerRotation_2s_linear_infinite]",
-    viewBox: "0 0 100 100",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React__default.createElement("circle", {
-    cx: "50",
-    cy: "50",
-    r: "45"
-  })), label && /*#__PURE__*/React__default.createElement("span", {
-    className: "mt-4"
-  }, label));
-});
-
-const getBadgeIcon = type => {
-  const css = 'rounded-full flex-shrink-0 mr-2 mt-1 self-start';
-  switch (type) {
-    case 'success':
-      return /*#__PURE__*/React__default.createElement(Icon, {
-        name: "tick",
-        className: cn(css, 'yt-green-solid ')
-      });
-    case 'warning':
-      return /*#__PURE__*/React__default.createElement(Icon, {
-        name: "warning",
-        className: cn(css, 'yt-yellow-solid')
-      });
-    case 'error':
-      return /*#__PURE__*/React__default.createElement(Icon, {
-        name: "warning",
-        className: cn(css, 'yt-red-solid')
-      });
-    case 'information':
-      return /*#__PURE__*/React__default.createElement(Icon, {
-        name: "info",
-        className: cn(css, 'yt-blue-solid')
-      });
-    case 'loading':
-      return /*#__PURE__*/React__default.createElement(Spinner$1, {
-        delay: 0,
-        className: cn(css, 'h-6 w-6')
-      });
-    default:
-      return null;
-  }
-};
-
-const Toast = ({
-  content,
-  lastUpdated,
-  onClose: handleClose,
-  options,
-  ...props
-}) => {
-  const {
-    texts
-  } = useLocalization();
-  const {
-    autoClose,
-    type = 'default'
-  } = options;
-  const className = cn('bg-white relative flex items-center py-1 px-2 mt-3 w-full rounded yt-shadow', {
-    'border border-grey': type === 'default' || type === 'loading' || !type,
-    'border border-grey-darker': type === 'success',
-    'border border-blue': type === 'information',
-    'border border-yellow-dark': type === 'warning',
-    'border border-red': type === 'error'
-  });
-  const timer = useTimer(autoClose, handleClose);
-  const controls = framerMotion.useAnimation();
-  if (!content) {
-    console.warn(`Toast requires 'content' property, which can't be empty string, null or undefined. Current content value is set to ${content === '' ? 'empty string' : content}.`);
-  }
-  React__default.useEffect(() => {
-    if (autoClose) {
-      timer.start();
-    }
-  }, [autoClose]);
-  const triggerUpdateAnimation = function () {
-    try {
-      return Promise.resolve(controls.start({
-        scale: 1.05
-      })).then(function () {
-        return Promise.resolve(controls.start({
-          scale: 1
-        })).then(function () {});
-      });
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  };
-  React__default.useEffect(() => {
-    if (lastUpdated) {
-      triggerUpdateAnimation();
-      if (timer.running) {
-        timer.start();
-      }
-    }
-  }, [lastUpdated]);
-  return /*#__PURE__*/React__default.createElement(framerMotion.motion.div, Object.assign({}, props, {
-    animate: controls,
-    className: className,
-    "data-taco": "toast",
-    onMouseEnter: timer.pause,
-    onMouseLeave: timer.resume
-  }), getBadgeIcon(type), /*#__PURE__*/React__default.createElement("div", {
-    className: "flex-grow"
-  }, content), /*#__PURE__*/React__default.createElement(IconButton, {
-    appearance: "discrete",
-    className: "text-grey-darkest -mr-2 cursor-pointer self-start !px-0",
-    icon: "close",
-    "aria-label": texts.toasts.dismiss,
-    onClick: handleClose
-  }));
-};
-
-const DEFAULT_AUTO_CLOSE_TIMEOUT = 7500;
-const ToastContext = /*#__PURE__*/React.createContext({});
-const insertToastWithoutDuplicates = (currentToasts, id, content, options, close) => {
-  const nextToasts = [...currentToasts];
-  const existingToastIndex = currentToasts.findIndex(toast => JSON.stringify(toast.content) === JSON.stringify(content));
-  if (existingToastIndex > -1) {
-    nextToasts[existingToastIndex].lastDuplicateId = id;
-    nextToasts[existingToastIndex].lastUpdated = Date.now();
-  } else {
-    nextToasts.push({
-      id,
-      content: typeof content === 'function' ? content(close) : content,
-      options
-    });
-  }
-  return nextToasts;
-};
-const ToastProvider = ({
-  children,
-  ...props
-}) => {
-  const [toasts, setToasts] = React.useState([]);
-  const handleClose = id => {
-    setToasts(currentToasts => currentToasts.filter(toast => toast.id !== id));
-  };
-  // memoize (useCallback) this function,
-  // it is the value of the context provider and we don't want it to trigger state tree re-renders on provider children
-  const toaster = React.useCallback((content, options) => {
-    const id = uuid.v4();
-    const close = () => handleClose(id);
-    setToasts(currentToasts => insertToastWithoutDuplicates(currentToasts, id, content, options, close));
-    const update = (content, options) => {
-      setToasts(currentToasts => {
-        const nextToasts = currentToasts.filter(toast => {
-          if (toast.lastDuplicateId) {
-            return toast.lastDuplicateId !== id;
-          }
-          return toast.id !== id;
-        });
-        return insertToastWithoutDuplicates(nextToasts, uuid.v4(), content, options, close);
-      });
-    };
-    const success = (content, options) => {
-      update(content, {
-        autoClose: DEFAULT_AUTO_CLOSE_TIMEOUT,
-        ...options,
-        type: 'success'
-      });
-    };
-    const error = (content, options) => {
-      update(content, {
-        ...options,
-        type: 'error'
-      });
-    };
-    const warning = (content, options) => {
-      update(content, {
-        ...options,
-        type: 'warning'
-      });
-    };
-    const information = (content, options) => {
-      update(content, {
-        ...options,
-        type: 'information'
-      });
-    };
-    const loading = (content, options) => {
-      update(content, {
-        ...options,
-        type: 'loading'
-      });
-    };
-    return {
-      success,
-      error,
-      warning,
-      information,
-      loading,
-      close
-    };
-  }, []);
-  // no need to rebind these every render, do them once in an effect
-  React.useEffect(() => {
-    toaster.success = (content, options) => toaster(content, {
-      autoClose: DEFAULT_AUTO_CLOSE_TIMEOUT,
-      ...options,
-      type: 'success'
-    });
-    toaster.error = (content, options) => toaster(content, {
-      ...options,
-      type: 'error'
-    });
-    toaster.warning = (content, options) => toaster(content, {
-      ...options,
-      type: 'warning'
-    });
-    toaster.information = (content, options) => toaster(content, {
-      ...options,
-      type: 'information'
-    });
-    toaster.loading = (content, options) => toaster(content, {
-      ...options,
-      type: 'loading'
-    });
-  }, []);
-  return /*#__PURE__*/React.createElement(ToastContext.Provider, Object.assign({}, props, {
-    value: toaster
-  }), children, /*#__PURE__*/React.createElement("div", {
-    id: "yt-toast__container",
-    className: "pointer-events-all absolute bottom-0 right-0 !left-auto z-[1000] mb-4 mr-4 flex max-w-md flex-col items-end justify-end",
-    role: "log"
-  }, /*#__PURE__*/React.createElement(framerMotion.AnimatePresence, {
-    initial: false
-  }, toasts.map(toast => /*#__PURE__*/React.createElement(framerMotion.motion.div, {
-    key: toast.id,
-    transition: {
-      type: 'spring',
-      damping: 20,
-      stiffness: 300
-    },
-    initial: {
-      opacity: 0,
-      y: 10,
-      scale: 0.5
-    },
-    animate: {
-      opacity: 1,
-      y: 0,
-      scale: 1
-    },
-    exit: {
-      opacity: 0,
-      scale: 0.5,
-      transition: {
-        duration: 0.2
-      }
-    }
-  }, /*#__PURE__*/React.createElement(Toast, Object.assign({}, toast, {
-    onClose: () => handleClose(toast.id)
-  })))))));
-};
-const useToast = () => React.useContext(ToastContext);
-
-const defaultLocalisationTexts = {
-  calendar: {
-    months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
-    weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
-    actions: {
-      previousMonth: 'Previous month',
-      nextMonth: 'Next month',
-      previousYear: 'Previous year',
-      nextYear: 'Next year',
-      today: 'Today'
-    }
-  },
-  combobox: {
-    tooltip: 'Search in list'
-  },
-  datepicker: {
-    calendar: 'Calendar',
-    clear: 'Clear',
-    expand: 'Show calendar',
-    shortcuts: 'Shortcuts'
-  },
-  hanger: {
-    close: 'Close'
-  },
-  listbox: {
-    loading: 'Loading results...',
-    empty: 'No results found',
-    allOption: 'All'
-  },
-  dialog: {
-    close: 'Close',
-    drag: 'Drag'
-  },
-  pagination: {
-    label: 'Pagination',
-    pageSize: 'Items per page',
-    showingXofYofTotal: 'Showing [X] - [Y] of [total]',
-    actions: {
-      firstPage: 'Goto first page',
-      firstPageWithShortcut: 'Goto first page (Home)',
-      previousPage: 'Goto previous page',
-      previousPageWithShortcut: 'Goto previous page (Page Up)',
-      nextPage: 'Goto next page',
-      nextPageWithShortcut: 'Goto next page (Page Down)',
-      lastPage: 'Goto last page',
-      lastPageWithShortcut: 'Goto last page (End)',
-      pageX: 'Goto page [X]'
-    }
-  },
-  table: {
-    actions: 'Other actions',
-    edit: 'Edit (e)',
-    copy: 'Copy (c)',
-    del: 'Delete (del)',
-    newSubRow: 'New row (shift + n)',
-    loading: 'Loading...'
-  },
-  select: {
-    allOptionsSelected: 'All'
-  },
-  select2: {
-    allSelect: 'Select all',
-    allDeselect: 'Deselect all',
-    cancel: 'Cancel',
-    chooseColor: 'Pick a color',
-    create: 'Create',
-    delete: 'Delete',
-    save: 'Save',
-    search: 'Search...',
-    searchOrCreate: 'Search or create...'
-  },
-  toasts: {
-    dismiss: 'Dismiss'
-  },
-  tour: {
-    back: 'Back',
-    close: 'Close',
-    skip: 'Close and complete',
-    last: 'Done',
-    next: 'Next',
-    open: 'Open'
-  },
-  searchInput: {
-    inputLabel: 'Search...'
-  }
-};
-const defaultLocalizationContext = {
-  locale: 'en-GB',
-  texts: defaultLocalisationTexts,
-  formatting: {
-    date: 'dd.mm.yy'
-  }
-};
-const Context = /*#__PURE__*/React.createContext({
-  localization: defaultLocalizationContext
-});
-const Provider = props => {
-  const {
-    children,
-    localization = defaultLocalizationContext
-  } = props;
-  const value = React.useMemo(() => ({
-    localization
-  }), [localization]);
-  return /*#__PURE__*/React.createElement(Context.Provider, {
-    value: value
-  }, /*#__PURE__*/React.createElement(TooltipPrimitive.Provider, null, /*#__PURE__*/React.createElement(ToastProvider, null, children)));
-};
-const useTaco = () => React.useContext(Context);
-const useLocalization = () => useTaco().localization;
-
-const thisYear = /*#__PURE__*/new Date().getFullYear();
-const years = [];
-for (let i = thisYear - 10; i <= thisYear + 10; i += 1) {
-  years.push(i);
-}
-const Navbar = /*#__PURE__*/React.memo(({
-  onMonthChange,
-  onNextClick,
-  onPreviousClick,
-  value = new Date()
-}) => {
-  const {
-    texts: {
-      calendar: {
-        actions,
-        months
-      }
-    }
-  } = useLocalization();
-  const handleChange = function handleChange(event) {
-    const {
-      year,
-      month
-    } = event.target.form;
-    onMonthChange(new Date(year.value, month.value));
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    className: "mb-2 flex items-center justify-between"
-  }, /*#__PURE__*/React.createElement("form", {
-    className: "inline-flex space-x-1"
-  }, /*#__PURE__*/React.createElement("select", {
-    className: "h-8 px-2",
-    name: "month",
-    onChange: handleChange,
-    value: value.getMonth()
-  }, months.map((month, i) => /*#__PURE__*/React.createElement("option", {
-    key: month,
-    value: i
-  }, month))), /*#__PURE__*/React.createElement("select", {
-    className: "h-8 px-2",
-    name: "year",
-    onChange: handleChange,
-    value: value.getFullYear()
-  }, years.map(year => /*#__PURE__*/React.createElement("option", {
-    key: year,
-    value: year
-  }, String(year))))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(IconButton, {
-    appearance: "discrete",
-    icon: "chevron-left",
-    "aria-label": actions.previousMonth,
-    onClick: () => onPreviousClick(),
-    rounded: true
-  }), /*#__PURE__*/React.createElement(IconButton, {
-    appearance: "discrete",
-    icon: "chevron-right",
-    "aria-label": actions.nextMonth,
-    onClick: () => onNextClick(),
-    rounded: true
-  })));
-});
-const Calendar$1 = /*#__PURE__*/React.forwardRef(function Calendar(props, ref) {
-  const {
-    onChange: handleChange,
-    value,
-    disabledDays,
-    ...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]);
-  const handleDayClick = (date, modifiers, event) => {
-    if (modifiers.outside || modifiers.disabled) {
-      return;
-    }
-    handleChange(date, event);
-  };
-  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);
-    today.setSeconds(0);
-    handleChange(today);
-  };
-  const className = cn('flex bg-white text-xs p-4', otherProps.className);
-  return /*#__PURE__*/React.createElement("div", {
-    "data-taco": "calendar"
-  }, /*#__PURE__*/React.createElement(ReactDayPicker, Object.assign({}, otherProps, {
+  }, [value]);
+  const handleDayClick = (date, modifiers, event) => {
+    if (modifiers.outside || modifiers.disabled) {
+      return;
+    }
+    handleChange(date, event);
+  };
+  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);
+    today.setSeconds(0);
+    handleChange(today);
+  };
+  const className = cn('flex bg-white text-xs p-4', otherProps.className);
+  return /*#__PURE__*/React.createElement("div", {
+    "data-taco": "calendar"
+  }, /*#__PURE__*/React.createElement(ReactDayPicker, Object.assign({}, otherProps, {
     className: className,
     month: visibleMonth,
     selectedDays: value,
@@ -4112,6 +3783,48 @@ const Calendar$1 = /*#__PURE__*/React.forwardRef(function Calendar(props, ref) {
   })));
 });
 
+const Content$2 = /*#__PURE__*/React.forwardRef(function CardContent(externalProps, ref) {
+  const {
+    noPadding,
+    ...props
+  } = externalProps;
+  const className = cn('flex-grow overflow-auto', {
+    'mx-4 mb-4': !noPadding
+  }, props.className);
+  return /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
+    className: className,
+    ref: ref
+  }));
+});
+const Card = /*#__PURE__*/React.forwardRef(function Card(props, ref) {
+  const {
+    title,
+    menu,
+    children
+  } = props;
+  const className = cn('bg-white flex flex-col rounded-xl shadow-[0px_0px_1px_rgba(0,0,0,0.1),0px_6px_18px_rgba(47,51,68,0.2)]', props.className);
+  return /*#__PURE__*/React.createElement("div", {
+    className: className,
+    "data-taco": "card",
+    ref: ref
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "mx-4 mt-4 mb-2 flex"
+  }, title && /*#__PURE__*/React.createElement("h4", {
+    className: "mb-0 flex-grow text-left"
+  }, title), menu ? /*#__PURE__*/React.createElement(IconButton, {
+    icon: "ellipsis-horizontal",
+    appearance: "discrete",
+    menu: menu,
+    className: "-mt-[4px]"
+  }) : null), children);
+});
+Card.Content = Content$2;
+
+// React 18 has this built-in, when we upgrade this hook should be removed and the uuid dependency should be removed
+const useId = nativeId => {
+  return React__default.useMemo(() => nativeId !== null && nativeId !== void 0 ? nativeId : uuid.v4(), []);
+};
+
 const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
   const {
     checked,
@@ -4122,6 +3835,7 @@ const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
     onChange,
     ...otherProps
   } = props;
+  const id = useId(props.id);
   const className = cn('bg-white h-5 w-5 border rounded text-sm flex-shrink-0 self-start mt-[0.1rem] focus:yt-focus',
   //hover:shadow-[0_0_0_1px_rgba(235,235,235,1)]
   props.className, {
@@ -4134,7 +3848,14 @@ const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
   if (onChange) {
     handleChange = checked => onChange(checked === 'indeterminate' ? false : checked);
   }
-  const element = /*#__PURE__*/React.createElement(CheckboxPrimitive.Root, Object.assign({}, otherProps, {
+  let labelledByProps = null;
+  if (label) {
+    labelledByProps = {
+      ['aria-labelledby']: `${id}-label`,
+      id
+    };
+  }
+  const element = /*#__PURE__*/React.createElement(CheckboxPrimitive.Root, Object.assign({}, otherProps, labelledByProps, {
     "data-taco": "checkbox",
     checked: indeterminate ? 'indeterminate' : checked,
     className: className,
@@ -4147,12 +3868,15 @@ const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
     className: "!h-full !w-full"
   })));
   if (label) {
-    const labelClassName = cn('flex items-center cursor-pointer gap-2', {
+    const labelContainerClassName = cn('flex items-center cursor-pointer gap-2', {
       'cursor-not-allowed text-grey-dark': props.disabled
     }, props.className);
-    return /*#__PURE__*/React.createElement("label", {
-      className: labelClassName
-    }, element, label);
+    return /*#__PURE__*/React.createElement("span", {
+      className: labelContainerClassName
+    }, element, /*#__PURE__*/React.createElement("label", {
+      htmlFor: id,
+      id: `${id}-label`
+    }, label));
   }
   return element;
 });
@@ -4325,6 +4049,45 @@ const useListScrollTo = (internalRef, itemRefs) => {
   };
 };
 
+const Spinner$1 = /*#__PURE__*/React__default.forwardRef(function Spinner(props, ref) {
+  const {
+    delay = 500,
+    label,
+    ...otherProps
+  } = props;
+  const [visible, setVisibility] = React__default.useState(!delay);
+  React__default.useEffect(() => {
+    let timeout;
+    if (delay) {
+      timeout = window.setTimeout(() => setVisibility(true), delay);
+    }
+    return () => {
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+    };
+  }, [delay]);
+  if (!visible) {
+    return null;
+  }
+  const className = cn('inline-flex flex-col relative items-center', otherProps.className);
+  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, otherProps, {
+    className: className,
+    "data-taco": "spinner",
+    ref: ref
+  }), /*#__PURE__*/React__default.createElement("svg", {
+    className: "h-10 w-10 animate-[spinnerRotation_2s_linear_infinite]",
+    viewBox: "0 0 100 100",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default.createElement("circle", {
+    cx: "50",
+    cy: "50",
+    r: "45"
+  })), label && /*#__PURE__*/React__default.createElement("span", {
+    className: "mt-4"
+  }, label));
+});
+
 const getId = (id, value) => `${id}_${value}`;
 const getNextEnabledItem = (event, data, index) => {
   const nextIndex = getNextIndexFromKey(event.key, data.length, index);
@@ -4415,22 +4178,6 @@ const ScrollableList = /*#__PURE__*/React.forwardRef(function ScrollableList(pro
       return selectedIndexes.findIndex(i => i === index) !== -1;
     }
   };
-  const list = {
-    ...otherProps,
-    className: cn('inline-flex flex-col list-none !p-0 m-0 overflow-y-auto h-auto', getInputClasses(props), {
-      'yt-list--multiselect': multiselect,
-      'pointer-events-none': disabled,
-      'cursor-not-allowed': disabled || readOnly
-    }, otherProps.className),
-    disabled,
-    id,
-    onFocus: !disabled && !readOnly ? handleFocus : undefined,
-    onKeyDown: !disabled && !readOnly ? handleKeyDown : undefined,
-    readOnly,
-    ref: listRef,
-    role: 'listbox',
-    tabIndex: otherProps.tabIndex || 0
-  };
   const options = data.map((option, index) => {
     const depth = option.path ? option.path.split('.').length - 1 : 0;
     return {
@@ -4452,6 +4199,22 @@ const ScrollableList = /*#__PURE__*/React.forwardRef(function ScrollableList(pro
       } : undefined
     };
   });
+  const list = {
+    ...otherProps,
+    className: cn('inline-flex flex-col list-none !p-0 m-0 overflow-y-auto h-auto', getInputClasses(props), {
+      'yt-list--multiselect': multiselect,
+      'pointer-events-none': disabled,
+      'cursor-not-allowed': disabled || readOnly
+    }, otherProps.className),
+    disabled,
+    id,
+    onFocus: !disabled && !readOnly ? handleFocus : undefined,
+    onKeyDown: !disabled && !readOnly ? handleKeyDown : undefined,
+    readOnly,
+    ref: listRef,
+    role: options.length <= 0 || loading ? 'presentation' : 'listbox',
+    tabIndex: otherProps.tabIndex || 0
+  };
   return /*#__PURE__*/React.createElement("ul", Object.assign({}, list, {
     "data-taco": "scrollable-list"
   }), loading ? /*#__PURE__*/React.createElement("li", {
@@ -4464,7 +4227,12 @@ const ScrollableList = /*#__PURE__*/React.forwardRef(function ScrollableList(pro
     ...optionProps
   }) => /*#__PURE__*/React.createElement("li", Object.assign({}, optionProps), icon, /*#__PURE__*/React.createElement("span", {
     className: "flex-grow truncate text-left"
-  }, children), multiselect && /*#__PURE__*/React.createElement(Checkbox, {
+  }, children), multiselect && /*#__PURE__*/React.createElement(Checkbox
+  // In multiselect variant, this checkbox only acts as visual representation of item being selected,
+  // so need to be taken out of screen reader scope.
+  , {
+    "aria-hidden": true,
+    tabIndex: -1,
     checked: optionProps['aria-selected'],
     onChange: () => null,
     className: "pointer-events-none ml-2 self-center p-px"
@@ -4960,7 +4728,11 @@ const Combobox = /*#__PURE__*/React.forwardRef(function Combobox(props, ref) {
     ref: ref
   }), /*#__PURE__*/React.createElement(Input, Object.assign({}, input, {
     autoComplete: "off",
-    button: props.inline ? /*#__PURE__*/React.createElement(IconButton, {
+    button: props.inline ? /*#__PURE__*/React.createElement(IconButton
+    // In case of inline combobox, this icon button acts only as visual chevron representation,
+    // so should be taken out of screen reader scope.
+    , {
+      "aria-hidden": true,
       appearance: "discrete",
       className: "!border-l-0 focus:!border-none focus:!shadow-none active:!border-none",
       icon: popover.open ? 'chevron-up' : 'chevron-down',
@@ -5190,7 +4962,7 @@ const RenderPropWrapper = /*#__PURE__*/React.forwardRef(function RenderPropWrapp
     ref
   });
 });
-const Content$2 = /*#__PURE__*/React.forwardRef(function PopoverContent(props, ref) {
+const Content$3 = /*#__PURE__*/React.forwardRef(function PopoverContent(props, ref) {
   const {
     placement: side,
     ...popoverContentProps
@@ -5242,7 +5014,7 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(props, ref) {
   }, trigger && /*#__PURE__*/React.createElement(Trigger$2, null, trigger), children));
 });
 Popover.Trigger = Trigger$2;
-Popover.Content = Content$2;
+Popover.Content = Content$3;
 Popover.Close = Close$1;
 Popover.Portal = PopoverPrimitive.Portal;
 
@@ -5345,9 +5117,13 @@ const useDraggable = ref => {
     x: 0,
     y: 0
   });
+  const [dragging, setDragging] = React__default.useState(false);
   const {
     moveProps
   } = interactions.useMove({
+    onMoveStart() {
+      setDragging(true);
+    },
     onMove(event) {
       var _ref$current;
       const rect = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.getBoundingClientRect();
@@ -5366,10 +5142,14 @@ const useDraggable = ref => {
           y
         };
       });
+    },
+    onMoveEnd() {
+      setDragging(false);
     }
   });
   return {
     position,
+    dragging,
     handleProps: moveProps
   };
 };
@@ -5411,11 +5191,12 @@ const RenderPropWrapper$1 = /*#__PURE__*/React.forwardRef(function RenderPropWra
     ...renderProps
   });
 });
-const Content$3 = /*#__PURE__*/React.forwardRef(function DialogContent(props, ref) {
+const Content$4 = /*#__PURE__*/React.forwardRef(function DialogContent(props, ref) {
   const dialog = useCurrentDialog();
   const internalRef = useMergedRef(ref);
   const {
     position,
+    dragging,
     handleProps: dragHandleProps
   } = useDraggable(internalRef);
   const {
@@ -5462,6 +5243,9 @@ const Content$3 = /*#__PURE__*/React.forwardRef(function DialogContent(props, re
     className: containerClassName,
     "data-taco": "dialog"
   }, output, dialog.draggable && /*#__PURE__*/React.createElement("div", Object.assign({}, dragHandleProps, {
+    role: "button",
+    draggable: true,
+    "aria-grabbed": dragging,
     "aria-label": texts.dialog.drag,
     className: "yt-dialog__drag absolute-center-x bg-grey-light top-1.5 h-3 w-24 cursor-move rounded text-center"
   })), dialog.showCloseButton ? /*#__PURE__*/React.createElement(DialogPrimitive.Close, {
@@ -5579,7 +5363,7 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(props, ref) {
   }, trigger && /*#__PURE__*/React.createElement(Trigger$3, null, trigger), children));
 });
 Dialog.Trigger = Trigger$3;
-Dialog.Content = Content$3;
+Dialog.Content = Content$4;
 Dialog.Title = Title$1;
 Dialog.Footer = Footer$1;
 Dialog.Extra = Extra;
@@ -5673,7 +5457,7 @@ const Title$2 = /*#__PURE__*/React.forwardRef(function DialogTitle(props, ref) {
     ref: ref
   }));
 });
-const Content$4 = /*#__PURE__*/React.forwardRef(function HangerContent(props, ref) {
+const Content$5 = /*#__PURE__*/React.forwardRef(function HangerContent(props, ref) {
   const {
     placement: side
   } = props;
@@ -5732,7 +5516,7 @@ const Hanger = /*#__PURE__*/React.forwardRef(function Hanger(props, ref) {
   }, anchor && /*#__PURE__*/React.createElement(Anchor, null, anchor), children));
 });
 Hanger.Anchor = Anchor;
-Hanger.Content = Content$4;
+Hanger.Content = Content$5;
 Hanger.Title = Title$2;
 
 const UnstyledArrow$1 = /*#__PURE__*/React.forwardRef(function HoverCardArrow(props, ref) {
@@ -5763,7 +5547,7 @@ const Trigger$4 = /*#__PURE__*/React.forwardRef(function HoverCardTrigger(props,
     ref: ref
   }));
 });
-const Content$5 = /*#__PURE__*/React.forwardRef(function HoverCardContent(props, ref) {
+const Content$6 = /*#__PURE__*/React.forwardRef(function HoverCardContent(props, ref) {
   const {
     placement: side
   } = props;
@@ -5784,7 +5568,7 @@ const HoverCard = props => {
   }));
 };
 HoverCard.Trigger = Trigger$4;
-HoverCard.Content = Content$5;
+HoverCard.Content = Content$6;
 
 const SearchInput = /*#__PURE__*/React.forwardRef(function SearchInput({
   onSearch,
@@ -5810,6 +5594,7 @@ const SearchInput = /*#__PURE__*/React.forwardRef(function SearchInput({
     "aria-label": texts.searchInput.inputLabel
   }, props, {
     button: /*#__PURE__*/React.createElement(IconButton, {
+      "aria-label": texts.searchInput.buttonLabel,
       icon: "search",
       className: "!border-transparent !bg-transparent focus:!border-transparent peer-focus:!border-transparent peer-focus:peer-active:!border-transparent",
       disabled: props.disabled,
@@ -5821,6 +5606,51 @@ const SearchInput = /*#__PURE__*/React.forwardRef(function SearchInput({
   }));
 });
 
+function useTimer(duration = 0, callback) {
+  const timer = React.useRef();
+  const [tracker, setTracker] = React.useState({
+    remaining: duration,
+    started: null
+  });
+  React.useEffect(() => {
+    if (duration) {
+      if (tracker.started) {
+        timer.current = window.setTimeout(callback, tracker.remaining);
+      } else {
+        clearTimeout(timer.current);
+      }
+    }
+    return () => {
+      clearTimeout(timer.current);
+    };
+  }, [tracker.started]);
+  return {
+    running: !!tracker.started,
+    start: () => {
+      setTracker({
+        remaining: duration,
+        started: Date.now()
+      });
+    },
+    pause: () => {
+      if (tracker.started) {
+        setTracker({
+          remaining: tracker.remaining - (Date.now() - tracker.started),
+          started: null
+        });
+      }
+    },
+    resume: () => {
+      if (tracker.remaining && !tracker.started) {
+        setTracker({
+          remaining: tracker.remaining,
+          started: Date.now()
+        });
+      }
+    }
+  };
+}
+
 const useTypeahead = ({
   data,
   currentIndex
@@ -6183,21 +6013,22 @@ const useCurrentMenu = () => {
   return React.useContext(MenuContext);
 };
 
-const Content$6 = /*#__PURE__*/React.forwardRef(function MenuContent(props, ref) {
+const Content$7 = /*#__PURE__*/React.forwardRef(function MenuContent(props, ref) {
   const internalRef = useMergedRef(ref);
   const menu = useCurrentMenu();
   const {
+    align = 'start',
     children,
     placement: side,
     ...otherProps
   } = props;
-  const className = cn('border rounded block outline-none p-1 wcag-white border-grey yt-shadow', props.className);
+  const className = cn('border border-transparent rounded block outline-none p-1 yt-shadow wcag-white', props.className);
   return /*#__PURE__*/React.createElement(DropdownMenuPrimitive.Portal, null, /*#__PURE__*/React.createElement(DropdownMenuPrimitive.Content, Object.assign({}, otherProps, {
-    align: "start",
+    align: align,
     className: className,
     "data-taco": "menu",
     side: side,
-    sideOffset: 2,
+    sideOffset: 3,
     style: {
       minWidth: menu === null || menu === void 0 ? void 0 : menu.minWidth
     },
@@ -6516,12 +6347,21 @@ const Header = /*#__PURE__*/React.forwardRef(function MenuHeader(props, ref) {
 const Menu$1 = /*#__PURE__*/React.forwardRef(function Menu(externalProps, ref) {
   const {
     children,
+    defaultOpen: defaultProp,
+    onChange,
+    open: prop,
     trigger,
     ...props
   } = externalProps;
-  const [open, setOpen] = React.useState(false);
   const [indented, setIndented] = React.useState(false);
   const [minWidth, setMinWidth] = React.useState(undefined);
+  const [open, setOpen] = reactUseControllableState.useControllableState({
+    // uncontrolled
+    defaultProp,
+    // controlled
+    onChange,
+    prop
+  });
   const context = React.useMemo(() => ({
     indented,
     registerIndentation: () => setIndented(true),
@@ -6534,13 +6374,13 @@ const Menu$1 = /*#__PURE__*/React.forwardRef(function Menu(externalProps, ref) {
   }, /*#__PURE__*/React.createElement(DropdownMenuPrimitive.Root, Object.assign({}, props, {
     modal: false,
     open: open,
-    onOpenChange: setOpen
+    onOpenChange: onChange
   }), trigger && /*#__PURE__*/React.createElement(Trigger$5, {
     ref: ref
   }, trigger), children));
 });
 Menu$1.Trigger = Trigger$5;
-Menu$1.Content = Content$6;
+Menu$1.Content = Content$7;
 Menu$1.Item = Item$1;
 Menu$1.Link = Link;
 Menu$1.Checkbox = Checkbox$1;
@@ -7200,34 +7040,285 @@ const Pagination = /*#__PURE__*/React.forwardRef(function Pagination(props, ref)
   })));
 });
 
-const Progress = ({
-  duration = undefined,
+const Progress = ({
+  duration = undefined,
+  ...props
+}) => {
+  let style;
+  if (duration) {
+    style = {
+      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
+  });
+  return /*#__PURE__*/React__default.createElement("span", Object.assign({}, props, {
+    "data-taco": "progress",
+    className: className
+  }), /*#__PURE__*/React__default.createElement("span", {
+    className: progressClassName,
+    "data-taco": "progress-bar",
+    style: style
+  }));
+};
+
+const getBadgeIcon = type => {
+  const css = 'rounded-full flex-shrink-0 mr-2 mt-1 self-start';
+  switch (type) {
+    case 'success':
+      return /*#__PURE__*/React__default.createElement(Icon, {
+        name: "tick",
+        className: cn(css, 'yt-green-solid ')
+      });
+    case 'warning':
+      return /*#__PURE__*/React__default.createElement(Icon, {
+        name: "warning",
+        className: cn(css, 'yt-yellow-solid')
+      });
+    case 'error':
+      return /*#__PURE__*/React__default.createElement(Icon, {
+        name: "warning",
+        className: cn(css, 'yt-red-solid')
+      });
+    case 'information':
+      return /*#__PURE__*/React__default.createElement(Icon, {
+        name: "info",
+        className: cn(css, 'yt-blue-solid')
+      });
+    case 'loading':
+      return /*#__PURE__*/React__default.createElement(Spinner$1, {
+        delay: 0,
+        className: cn(css, 'h-6 w-6')
+      });
+    default:
+      return null;
+  }
+};
+
+const Toast = ({
+  content,
+  lastUpdated,
+  onClose: handleClose,
+  options,
+  ...props
+}) => {
+  const {
+    texts
+  } = useLocalization();
+  const {
+    autoClose,
+    type = 'default'
+  } = options;
+  const className = cn('bg-white relative flex items-center py-1 px-2 mt-3 w-full rounded yt-shadow', {
+    'border border-grey': type === 'default' || type === 'loading' || !type,
+    'border border-grey-darker': type === 'success',
+    'border border-blue': type === 'information',
+    'border border-yellow-dark': type === 'warning',
+    'border border-red': type === 'error'
+  });
+  const timer = useTimer(autoClose, handleClose);
+  const controls = framerMotion.useAnimation();
+  if (!content) {
+    console.warn(`Toast requires 'content' property, which can't be empty string, null or undefined. Current content value is set to ${content === '' ? 'empty string' : content}.`);
+  }
+  React__default.useEffect(() => {
+    if (autoClose) {
+      timer.start();
+    }
+  }, [autoClose]);
+  const triggerUpdateAnimation = function () {
+    try {
+      return Promise.resolve(controls.start({
+        scale: 1.05
+      })).then(function () {
+        return Promise.resolve(controls.start({
+          scale: 1
+        })).then(function () {});
+      });
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  React__default.useEffect(() => {
+    if (lastUpdated) {
+      triggerUpdateAnimation();
+      if (timer.running) {
+        timer.start();
+      }
+    }
+  }, [lastUpdated]);
+  return /*#__PURE__*/React__default.createElement(framerMotion.motion.div, Object.assign({}, props, {
+    animate: controls,
+    className: className,
+    "data-taco": "toast",
+    onMouseEnter: timer.pause,
+    onMouseLeave: timer.resume
+  }), getBadgeIcon(type), /*#__PURE__*/React__default.createElement("div", {
+    className: "flex-grow"
+  }, content), /*#__PURE__*/React__default.createElement(IconButton, {
+    appearance: "discrete",
+    className: "text-grey-darkest -mr-2 cursor-pointer self-start !px-0",
+    icon: "close",
+    "aria-label": texts.toasts.dismiss,
+    onClick: handleClose
+  }));
+};
+
+const DEFAULT_AUTO_CLOSE_TIMEOUT = 7500;
+const ToastContext = /*#__PURE__*/React.createContext({});
+const insertToastWithoutDuplicates = (currentToasts, id, content, options, close) => {
+  const nextToasts = [...currentToasts];
+  const existingToastIndex = currentToasts.findIndex(toast => JSON.stringify(toast.content) === JSON.stringify(content));
+  if (existingToastIndex > -1) {
+    nextToasts[existingToastIndex].lastDuplicateId = id;
+    nextToasts[existingToastIndex].lastUpdated = Date.now();
+  } else {
+    nextToasts.push({
+      id,
+      content: typeof content === 'function' ? content(close) : content,
+      options
+    });
+  }
+  return nextToasts;
+};
+const ToastProvider = ({
+  children,
   ...props
 }) => {
-  let style;
-  if (duration) {
-    style = {
-      animationDuration: `${duration}ms`
+  const [toasts, setToasts] = React.useState([]);
+  const handleClose = id => {
+    setToasts(currentToasts => currentToasts.filter(toast => toast.id !== id));
+  };
+  // memoize (useCallback) this function,
+  // it is the value of the context provider and we don't want it to trigger state tree re-renders on provider children
+  const toaster = React.useCallback((content, options) => {
+    const id = uuid.v4();
+    const close = () => handleClose(id);
+    setToasts(currentToasts => insertToastWithoutDuplicates(currentToasts, id, content, options, close));
+    const update = (content, options) => {
+      setToasts(currentToasts => {
+        const nextToasts = currentToasts.filter(toast => {
+          if (toast.lastDuplicateId) {
+            return toast.lastDuplicateId !== id;
+          }
+          return toast.id !== id;
+        });
+        return insertToastWithoutDuplicates(nextToasts, uuid.v4(), content, options, close);
+      });
     };
-  }
-  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 /*#__PURE__*/React__default.createElement("span", Object.assign({}, props, {
-    "data-taco": "progress",
-    className: className
-  }), /*#__PURE__*/React__default.createElement("span", {
-    className: progressClassName,
-    "data-taco": "progress-bar",
-    style: style
-  }));
+    const success = (content, options) => {
+      update(content, {
+        autoClose: DEFAULT_AUTO_CLOSE_TIMEOUT,
+        ...options,
+        type: 'success'
+      });
+    };
+    const error = (content, options) => {
+      update(content, {
+        ...options,
+        type: 'error'
+      });
+    };
+    const warning = (content, options) => {
+      update(content, {
+        ...options,
+        type: 'warning'
+      });
+    };
+    const information = (content, options) => {
+      update(content, {
+        ...options,
+        type: 'information'
+      });
+    };
+    const loading = (content, options) => {
+      update(content, {
+        ...options,
+        type: 'loading'
+      });
+    };
+    return {
+      success,
+      error,
+      warning,
+      information,
+      loading,
+      close
+    };
+  }, []);
+  // no need to rebind these every render, do them once in an effect
+  React.useEffect(() => {
+    toaster.success = (content, options) => toaster(content, {
+      autoClose: DEFAULT_AUTO_CLOSE_TIMEOUT,
+      ...options,
+      type: 'success'
+    });
+    toaster.error = (content, options) => toaster(content, {
+      ...options,
+      type: 'error'
+    });
+    toaster.warning = (content, options) => toaster(content, {
+      ...options,
+      type: 'warning'
+    });
+    toaster.information = (content, options) => toaster(content, {
+      ...options,
+      type: 'information'
+    });
+    toaster.loading = (content, options) => toaster(content, {
+      ...options,
+      type: 'loading'
+    });
+  }, []);
+  return /*#__PURE__*/React.createElement(ToastContext.Provider, Object.assign({}, props, {
+    value: toaster
+  }), children, /*#__PURE__*/React.createElement("div", {
+    id: "yt-toast__container",
+    className: "pointer-events-all absolute bottom-0 right-0 !left-auto z-[1000] mb-4 mr-4 flex max-w-md flex-col items-end justify-end",
+    role: "log"
+  }, /*#__PURE__*/React.createElement(framerMotion.AnimatePresence, {
+    initial: false
+  }, toasts.map(toast => /*#__PURE__*/React.createElement(framerMotion.motion.div, {
+    key: toast.id,
+    transition: {
+      type: 'spring',
+      damping: 20,
+      stiffness: 300
+    },
+    initial: {
+      opacity: 0,
+      y: 10,
+      scale: 0.5
+    },
+    animate: {
+      opacity: 1,
+      y: 0,
+      scale: 1
+    },
+    exit: {
+      opacity: 0,
+      scale: 0.5,
+      transition: {
+        duration: 0.2
+      }
+    }
+  }, /*#__PURE__*/React.createElement(Toast, Object.assign({}, toast, {
+    onClose: () => handleClose(toast.id)
+  })))))));
 };
+const useToast = () => React.useContext(ToastContext);
 
-// React 18 has this built-in, when we upgrade this hook should be removed and the uuid dependency should be removed
-const useId = nativeId => {
-  return React__default.useMemo(() => nativeId !== null && nativeId !== void 0 ? nativeId : uuid.v4(), []);
+const Provider = props => {
+  const {
+    children,
+    localization
+  } = props;
+  return /*#__PURE__*/React.createElement(LocalizationProvider, {
+    localization: localization
+  }, /*#__PURE__*/React.createElement(TooltipPrimitive.Provider, null, /*#__PURE__*/React.createElement(ToastProvider, null, children)));
 };
 
 const isAriaSelectionKey = event => {
@@ -7970,7 +8061,7 @@ const Button$2 = /*#__PURE__*/React__default.forwardRef(function Select2TriggerB
     type: "button"
   }), children, /*#__PURE__*/React__default.createElement(Icon, {
     name: open ? 'chevron-up' : 'chevron-down',
-    className: "-mr-1 ml-auto"
+    className: "pointer-events-none -mr-1 ml-auto"
   }));
 });
 const Single = /*#__PURE__*/React__default.forwardRef(function Select2TriggerSingle(props, ref) {
@@ -8021,22 +8112,12 @@ const Multiple = /*#__PURE__*/React__default.forwardRef(function Select2TriggerM
     setValue,
     tags
   } = useSelect2Context();
-  const contentRef = React__default.useRef(null);
-  const createClickHandler = tagValue => event => {
-    event === null || event === void 0 ? void 0 : event.stopPropagation();
-    event === null || event === void 0 ? void 0 : event.preventDefault();
-    if (!disabled && !readOnly) {
-      setValue(tagValue);
-    }
-  };
   const valuesAsChildren = values.map(value => children.find(c => c.props.value === value));
+  let content;
+  let className = buttonProps.className;
   if (open) {
-    return /*#__PURE__*/React__default.createElement("span", {
-      className: "relative h-8"
-    }, /*#__PURE__*/React__default.createElement(Button$2, Object.assign({}, buttonProps, {
-      className: cn('absolute z-20', buttonProps.className),
-      ref: ref
-    }), /*#__PURE__*/React__default.createElement(ScrollArea, {
+    className = cn('absolute z-20', buttonProps.className);
+    content = /*#__PURE__*/React__default.createElement(ScrollArea, {
       className: "my-1 flex max-h-[5.5rem] flex-col"
     }, /*#__PURE__*/React__default.createElement("span", {
       className: "flex flex-wrap gap-1"
@@ -8046,18 +8127,54 @@ const Multiple = /*#__PURE__*/React__default.forwardRef(function Select2TriggerM
       color: tags ? child.props.color : undefined,
       disabled: disabled,
       icon: child.props.icon,
-      onDelete: open ? createClickHandler(child.props.value) : undefined,
+      onDelete: event => {
+        event === null || event === void 0 ? void 0 : event.stopPropagation();
+        event === null || event === void 0 ? void 0 : event.preventDefault();
+        if (!disabled && !readOnly) {
+          setValue(child.props.value);
+        }
+      },
       readOnly: readOnly
-    }, child.props.children))))));
+    }, child.props.children))));
+  } else {
+    content = /*#__PURE__*/React__default.createElement(MultipleValue, {
+      key: String(open),
+      valuesAsChildren: valuesAsChildren
+    });
   }
-  const boundaryIndex = contentRef.current ? getIndexOfFirstChildOverflowingParent(contentRef.current, 30) : undefined;
-  return /*#__PURE__*/React__default.createElement(Button$2, Object.assign({}, buttonProps, {
+  return /*#__PURE__*/React__default.createElement("span", {
+    className: cn({
+      'relative h-8': open
+    })
+  }, /*#__PURE__*/React__default.createElement(Button$2, Object.assign({}, buttonProps, {
+    className: className,
     ref: ref
-  }), /*#__PURE__*/React__default.createElement("span", {
+  }), content));
+});
+const MultipleValue = ({
+  valuesAsChildren
+}) => {
+  const {
+    disabled,
+    open,
+    readOnly,
+    setValue,
+    tags
+  } = useSelect2Context();
+  const [contentRef, setContentRef] = React__default.useState(null);
+  const boundaryIndex = contentRef ? getIndexOfFirstChildOverflowingParent(contentRef, 30) : undefined;
+  const createClickHandler = tagValue => event => {
+    event === null || event === void 0 ? void 0 : event.stopPropagation();
+    event === null || event === void 0 ? void 0 : event.preventDefault();
+    if (!disabled && !readOnly) {
+      setValue(tagValue);
+    }
+  };
+  return /*#__PURE__*/React__default.createElement("span", {
     className: "relative flex items-center gap-1 overflow-hidden"
   }, /*#__PURE__*/React__default.createElement("span", {
     className: "flex gap-1 truncate",
-    ref: contentRef
+    ref: el => setContentRef(el)
   }, valuesAsChildren.map((child, index) => {
     const tag = /*#__PURE__*/React__default.createElement(Tag$1, {
       key: child.props.value,
@@ -8082,8 +8199,8 @@ const Multiple = /*#__PURE__*/React__default.forwardRef(function Select2TriggerM
     title: valuesAsChildren.slice(boundaryIndex + 1).map(child => child ? String(child.props.children) : '').join(', ')
   }, /*#__PURE__*/React__default.createElement(Badge, {
     className: "flex-shrink-0"
-  }, "+", valuesAsChildren.length - (boundaryIndex + 1))) : null));
-});
+  }, "+", valuesAsChildren.length - (boundaryIndex + 1))) : null);
+};
 const matchesValue = value => child => {
   if (Array.isArray(value)) {
     return value.includes(child.props.value);
@@ -8233,14 +8350,15 @@ const useChildren = ({
   const [searchQuery, setSearchQuery] = React__default.useState('');
   // support empty value - probably a more elegant way to achieve this
   const allChildren = React__default.useMemo(() => {
+    const initial = initialChildren || [];
     if (emptyValue !== undefined) {
       return [/*#__PURE__*/React__default.createElement(Option$1, {
         key: "__empty",
         children: "",
         value: emptyValue
-      }), ...initialChildren];
+      }), ...initial];
     }
-    return initialChildren;
+    return initial;
   }, [initialChildren, emptyValue]);
   // set an initial value if none is set, we have to trigger state updates for controlled components
   React__default.useEffect(() => {
@@ -8346,12 +8464,6 @@ const Collection = props => {
   const {
     children
   } = props;
-  if (!children.length) {
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "text-grey-darkest -mt-0.5 flex h-8 items-center px-2",
-      role: "presentation"
-    }, "No results found...");
-  }
   return /*#__PURE__*/React__default.createElement(ScrollArea, {
     className: "flex max-h-[10.25rem] w-full flex-col gap-y-0.5 px-1.5"
   }, children);
@@ -8461,8 +8573,7 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     value: value
   }), /*#__PURE__*/React__default.createElement(PopoverPrimitive.Trigger, {
     asChild: true,
-    "data-taco": "Select2",
-    type: undefined
+    "data-taco": "Select2"
   }, /*#__PURE__*/React__default.createElement(Trigger$6, Object.assign({}, otherProps, {
     "aria-haspopup": "listbox",
     children: allChildren,
@@ -8490,10 +8601,13 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     style: {
       minWidth: dimensions !== null && dimensions !== void 0 && dimensions.width ? `${dimensions.width}px` : undefined
     }
-  }, !disableSearch ? /*#__PURE__*/React__default.createElement(Search$1, {
+  }, !disableSearch && (allChildren.length > 0 || onCreate) ? /*#__PURE__*/React__default.createElement(Search$1, {
     placeholder: onCreate ? texts.select2.searchOrCreate : texts.select2.search,
     ref: searchRef
-  }) : null, /*#__PURE__*/React__default.createElement(Root$1, {
+  }) : null, allChildren.length <= 0 ? /*#__PURE__*/React__default.createElement("div", {
+    className: "text-grey-darkest -mt-0.5 flex h-8 items-center px-2",
+    role: "presentation"
+  }, "No results found...") : /*#__PURE__*/React__default.createElement(Root$1, {
     className: "flex flex-col gap-0.5",
     customSelector: ":scope > button",
     disabled: disabled,
@@ -9711,7 +9825,11 @@ const Table = /*#__PURE__*/React__default.forwardRef(function Table(props, ref)
       instance: instance,
       headerGroups: tableProps.headerGroups
     }));
-  }) : emptyStateRenderer()), paginationElement);
+  }) : /*#__PURE__*/React__default.createElement("div", {
+    role: "row"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    role: "gridcell"
+  }, emptyStateRenderer()))), paginationElement);
 });
 Table.Column = () => null;
 Table.Group = () => null;
@@ -10117,25 +10235,36 @@ const Switch = /*#__PURE__*/React.forwardRef(function Switch(props, ref) {
     onChange,
     ...otherProps
   } = props;
+  const id = useId(props.id);
   const className = cn('group h-5 w-9 flex flex-shrink-0 rounded-full inline-flex', {
     'mr-2': !!label,
     'bg-grey-darker hover:bg-grey-dark aria-checked:bg-blue aria-checked:hover:bg-blue-light focus:yt-focus': !props.disabled,
     'bg-grey-light cursor-not-allowed aria-checked:bg-blue-light': props.disabled
   }, props.className);
-  const element = /*#__PURE__*/React.createElement(PrimitiveSwitch.Root, Object.assign({}, otherProps, {
+  let labelledByProps = null;
+  if (label) {
+    labelledByProps = {
+      ['aria-labelledby']: `${id}-label`,
+      id
+    };
+  }
+  const element = /*#__PURE__*/React.createElement(PrimitiveSwitch.Root, Object.assign({}, otherProps, labelledByProps, {
     className: className,
     onCheckedChange: onChange,
     ref: ref
   }), /*#__PURE__*/React.createElement(PrimitiveSwitch.Thumb, {
-    className: "'will-change-transform group-aria-checked:translate-x-[1.1rem] mt-0.5 h-4 w-4 translate-x-[0.15rem] rounded-full bg-white transition-transform group-disabled:opacity-50"
+    className: "'will-change-transform mt-0.5 h-4 w-4 translate-x-[0.15rem] rounded-full bg-white transition-transform group-disabled:opacity-50 group-aria-checked:translate-x-[1.1rem]"
   }));
   if (label) {
-    const labelClassName = cn('flex self-start cursor-pointer', {
+    const labelContainerClassName = cn('flex self-start cursor-pointer', {
       'cursor-not-allowed text-grey-dark': props.disabled
     });
-    return /*#__PURE__*/React.createElement("label", {
-      className: labelClassName
-    }, element, label);
+    return /*#__PURE__*/React.createElement("span", {
+      className: labelContainerClassName
+    }, element, /*#__PURE__*/React.createElement("label", {
+      htmlFor: id,
+      id: `${id}-label`
+    }, label));
   }
   return element;
 });
@@ -10285,43 +10414,6 @@ const useOnClickOutside = (ref, callback) => {
   }, [ref, callback]);
 };
 
-const Content$7 = /*#__PURE__*/React.forwardRef(function CardContent(externalProps, ref) {
-  const {
-    noPadding,
-    ...props
-  } = externalProps;
-  const className = cn('flex-grow overflow-auto', {
-    'mx-4 mb-4': !noPadding
-  }, props.className);
-  return /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
-    className: className,
-    ref: ref
-  }));
-});
-const Card = /*#__PURE__*/React.forwardRef(function Card(props, ref) {
-  const {
-    title,
-    menu,
-    children
-  } = props;
-  const className = cn('bg-white flex flex-col rounded-xl shadow-[0px_0px_1px_rgba(0,0,0,0.1),0px_6px_18px_rgba(47,51,68,0.2)]', props.className);
-  return /*#__PURE__*/React.createElement("div", {
-    className: className,
-    "data-taco": "card",
-    ref: ref
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "mx-4 mt-4 mb-2 flex"
-  }, title && /*#__PURE__*/React.createElement("h4", {
-    className: "mb-0 flex-grow text-left"
-  }, title), menu ? /*#__PURE__*/React.createElement(IconButton, {
-    icon: "ellipsis-horizontal",
-    appearance: "discrete",
-    menu: menu,
-    className: "-mt-[4px]"
-  }) : null), children);
-});
-Card.Content = Content$7;
-
 exports.Accordion = Accordion;
 exports.AlertDialog = AlertDialog;
 exports.Backdrop = Backdrop;
@@ -10344,6 +10436,8 @@ exports.Icon = Icon;
 exports.IconButton = IconButton;
 exports.Input = Input;
 exports.Listbox = Listbox;
+exports.LocalizationContext = LocalizationContext;
+exports.LocalizationProvider = LocalizationProvider;
 exports.Menu = Menu$1;
 exports.MultiListbox = MultiListbox;
 exports.Navigation = Navigation;
@@ -10395,6 +10489,5 @@ exports.useOnClickOutside = useOnClickOutside;
 exports.usePagination = usePagination;
 exports.useRadioGroup = useRadioGroup;
 exports.useTableRowCreation = useTableRowCreation;
-exports.useTaco = useTaco;
 exports.useToast = useToast;
 //# sourceMappingURL=taco.cjs.development.js.map