@economic/taco 1.16.2 → 1.17.0

package/dist/taco.cjs.development.js

@@ -94,7 +94,7 @@ const Action = /*#__PURE__*/React.forwardRef(function AlertDialogAction(props, r
 });
 
 const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(props, ref) {
-  const className = cn('fixed inset-0 cursor-default overflow-y-auto bg-purple-darker/[0.3] aria-hidden:invisible', props.className);
+  const className = cn('fixed inset-0 cursor-default overflow-y-auto bg-blue-900/[0.3] aria-hidden:invisible', props.className);
   return /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
     className: className,
     "data-taco": "backdrop",
@@ -3169,7 +3169,7 @@ const AccordionContext = /*#__PURE__*/React__default.createContext({
 });
 const StyledTrigger = /*#__PURE__*/React__default.forwardRef(function AccordionStyledTrigger(props, ref) {
   const isExpanded = !!props['aria-expanded'];
-  const className = cn('w-full inline-flex justify-between items-center align-middle', 'focus:rounded-sm focus:border-blue focus:yt-focus', props.className);
+  const className = cn('w-full inline-flex justify-between items-center align-middle', 'focus:rounded-sm focus:border-blue-500 focus:yt-focus', props.className);
   return /*#__PURE__*/React__default.createElement("button", Object.assign({}, props, {
     ref: ref,
     className: className
@@ -3230,7 +3230,7 @@ const Accordion = props => {
     };
   }
   const type = Array.isArray(valueProps.defaultValue) || Array.isArray(valueProps.value) ? 'multiple' : 'single';
-  const className = cn('divide-y divide-grey', props.className);
+  const className = cn('divide-y divide-grey-200', props.className);
   return /*#__PURE__*/React__default.createElement(AccordionContext.Provider, {
     value: context
   }, /*#__PURE__*/React__default.createElement(AccordionPrimitive.Root, Object.assign({}, otherProps, valueProps, {
@@ -3359,7 +3359,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(props, ref) {
   } = props;
   const className = cn(otherProps.className);
   return /*#__PURE__*/React.createElement(TooltipPrimitive.Root, {
-    delayDuration: 50
+    delayDuration: 250
   }, /*#__PURE__*/React.createElement(TooltipPrimitive.Trigger, {
     asChild: true,
     ref: ref
@@ -3369,36 +3369,36 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(props, ref) {
     side: placement,
     sideOffset: 3
   }), /*#__PURE__*/React.createElement("div", {
-    className: "wcag-purple xs:max-w-[theme(spacing.56)] max-w-[theme(spacing.32)] animate-[fade-in_150ms] rounded-sm px-2 py-1 text-xs font-bold opacity-90",
+    className: "xs:max-w-[theme(spacing.56)] max-w-[theme(spacing.32)] animate-[fade-in_150ms] rounded-sm bg-blue-900/90 px-2 py-1 text-xs font-bold text-white opacity-90",
     "data-taco": "tooltip",
     style: {
       transformOrigin: 'var(--radix-tooltip-content-transform-origin)'
     }
   }, /*#__PURE__*/React.createElement(TooltipPrimitive.Arrow, {
-    className: "fill-purple stroke-purple -mt-px"
+    className: "-mt-px fill-blue-900/90 stroke-blue-900/90"
   }), title))));
 });
 
 const getButtonClasses = () => {
-  return 'min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max leading-5 inline-flex items-center justify-center';
+  return 'flex-shrink-0 min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max leading-5 inline-flex items-center justify-center';
 };
 const getAppearanceClasses = (value, icon = false) => {
   switch (value) {
     case 'primary':
-      return `yt-blue-solid focus:bg-blue focus:text-white focus:yt-focus active:bg-blue-dark active:text-white hover:bg-blue-light hover:text-white hover:focus:bg-blue-light hover:focus:border-blue-light hover:focus:text-white disabled:hover:yt-blue-solid disabled:hover:hover:border-blue`;
+      return `yt-blue-solid focus:bg-blue-500 focus:text-white focus:yt-focus active:bg-blue-700 active:text-white hover:bg-blue-300 hover:text-white hover:focus:bg-blue-300 hover:focus:border-blue-300 hover:focus:text-white disabled:hover:yt-blue-solid disabled:hover:hover:border-blue-500`;
     case 'danger':
-      return `yt-red-solid focus:bg-red focus:text-white focus:yt-focus-red active:bg-red-dark active:text-white hover:bg-red-light hover:text-white hover:focus:bg-red-light hover:focus:text-white disabled:hover:yt-red-solid`;
+      return `yt-red-solid focus:bg-red-500 focus:text-white focus:yt-focus-red active:bg-red-700 active:text-white hover:bg-red-300 hover:text-white hover:focus:bg-red-300 hover:focus:text-white disabled:hover:yt-red-solid`;
     case 'ghost':
-      return `bg-white shadow-[inset_0_0_0_1px_theme(colors.blue.DEFAULT)] text-blue focus:bg-transparent focus:text-blue active:bg-blue-lightest focus:!shadow-[inset_0_0_0_1px_theme(colors.blue.DEFAULT),0_0_0_2px_rgba(0,99,255,0.25)] active:text-blue-dark hover:bg-blue-lightest hover:shadow-[inset_0_0_0_1px_theme(colors.blue.light)] hover:text-blue-light hover:focus:bg-blue-lightest hover:focus:!shadow-[inset_0_0_0_1px_theme(colors.blue.light),0_0_0_2px_rgba(0,99,255,0.25)] hover:focus:text-blue-light`;
+      return `bg-white shadow-[inset_0_0_0_1px_theme(colors.blue.500)] text-blue-500 focus:bg-transparent focus:text-blue-500 active:bg-blue-100 focus:!shadow-[inset_0_0_0_1px_theme(colors.blue.500),0_0_0_2px_rgba(0,99,255,0.25)] active:text-blue-700 hover:bg-blue-100 hover:shadow-[inset_0_0_0_1px_theme(colors.blue.300)] hover:text-blue-300 hover:focus:bg-blue-100 hover:focus:!shadow-[inset_0_0_0_1px_theme(colors.blue.300),0_0_0_2px_rgba(0,99,255,0.25)] hover:focus:text-blue-300`;
     case 'discrete':
       {
         if (icon) {
-          return `bg-transparent text-black border-transparent focus:text-black focus:yt-focus active:text-black hover:text-grey-darkest hover:focus:text-grey-darkest disabled:hover:text-black `;
+          return `bg-transparent text-black border-transparent focus:text-black focus:yt-focus active:text-black hover:text-grey-700 hover:focus:text-grey-700 disabled:hover:text-black `;
         }
-        return `yt-transparent focus:text-blue focus:yt-focus active:text-blue-dark hover:text-blue-light hover:focus:text-blue-light disabled:hover:yt-transparent`;
+        return `yt-transparent focus:text-blue-500 focus:yt-focus active:text-blue-700 hover:text-blue-300 hover:focus:text-blue-300 disabled:hover:yt-transparent`;
       }
     default:
-      return `yt-grey-solid focus:bg-grey focus:yt-focus active:bg-grey-dark active:text-black hover:bg-grey-light hover:text-grey-darkest hover:focus:bg-grey-light hover:focus:text-grey-darkest disabled:hover:yt-grey-solid`;
+      return `yt-grey-solid focus:bg-grey-200 focus:yt-focus active:bg-grey-300 active:text-black hover:bg-grey-100 hover:text-grey-700 hover:focus:bg-grey-100 hover:focus:text-grey-700 disabled:hover:yt-grey-solid`;
   }
 };
 const createButtonWithTooltip = (props, className, ref) => {
@@ -3575,8 +3575,9 @@ const defaultLocalisationTexts = {
     open: 'Open'
   },
   searchInput: {
-    inputLabel: 'Search...',
-    buttonLabel: 'Search'
+    button: 'Search',
+    placeholder: 'Search...',
+    clear: 'Clear'
   }
 };
 const defaultLocalizationContext = {
@@ -3655,9 +3656,8 @@ const Button$1 = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
     })];
   }
   const button = /*#__PURE__*/React.createElement(Base$1, Object.assign({}, buttonProps, {
-    children: children,
     ref: ref
-  }));
+  }), children);
   return createButtonWithOverlays({
     dialog,
     hanger,
@@ -3668,7 +3668,7 @@ const Button$1 = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
 
 const thisYear = /*#__PURE__*/new Date().getFullYear();
 const years = [];
-for (let i = thisYear - 10; i <= thisYear + 10; i += 1) {
+for (let i = thisYear - 50; i <= thisYear + 10; i += 1) {
   years.push(i);
 }
 const Navbar = /*#__PURE__*/React.memo(({
@@ -3839,10 +3839,10 @@ const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
   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, {
-    'border-grey-dark text-blue hover:text-blue-light focus:border-blue focus:hover:border-blue-light': !props.disabled && !invalid,
-    'border-grey text-blue-light cursor-not-allowed': props.disabled,
+    'border-grey-300 text-blue-500 hover:text-blue-300 focus:border-blue-500 focus:hover:border-blue-300': !props.disabled && !invalid,
+    'border-grey-200 text-blue-300 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 hover:text-red-light hover:border-red-light focus:border-red focus:hover:border-red-light': invalid && !props.disabled
+    'border-red-500 text-red-500 hover:text-red-300 hover:border-red-300 focus:border-red-500 focus:hover:border-red-300': invalid && !props.disabled
   });
   let handleChange;
   if (onChange) {
@@ -3851,7 +3851,7 @@ const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
   let labelledByProps = null;
   if (label) {
     labelledByProps = {
-      ['aria-labelledby']: `${id}-label`,
+      'aria-labelledby': `${id}-label`,
       id
     };
   }
@@ -3869,7 +3869,7 @@ const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
   })));
   if (label) {
     const labelContainerClassName = cn('flex items-center cursor-pointer gap-2', {
-      'cursor-not-allowed text-grey-dark': props.disabled
+      'cursor-not-allowed text-grey-300': props.disabled
     }, props.className);
     return /*#__PURE__*/React.createElement("span", {
       className: labelContainerClassName
@@ -3880,6 +3880,80 @@ const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
   }
   return element;
 });
+Checkbox.displayName = 'Checkbox';
+
+const getInputClasses = props => {
+  const disabled = props.disabled || !!props['aria-disabled'];
+  const readOnly = props.readOnly || !!props['aria-readonly'];
+  const invalid = props.invalid || !!props['aria-invalid'];
+  return cn('peer bg-white text-black text-sm border font-normal not-italic no-underline rounded inline-flex items-center leading-6 px-2 relative w-full text-ellipsis transition-colors transition-opacity ease-in min-h-[theme(spacing.8)]', {
+    // default
+    'border-grey-300 focus:border-blue-300 focus:yt-focus': !invalid,
+    'hover:shadow-[0_0_0.1rem_theme(colors.grey.500)] active:border-blue-700': !invalid && !disabled,
+    // disabled
+    'border-grey-200 text-opacity-25 cursor-not-allowed placeholder:text-grey-700': disabled,
+    // highlighted
+    'bg-[rgba(255,255,0,0.075)]': props.highlighted && disabled,
+    'bg-[rgba(255,255,0,0.2)]': props.highlighted && !disabled,
+    // invalid
+    'border-red focus:border-red-300 focus:yt-focus-red active:border-red-700': invalid,
+    'hover:shadow-[0_0_0.15rem_theme(colors.red.500)]': invalid && !disabled,
+    // readOnly
+    'cursor-not-allowed text-black bg-grey-200': readOnly
+  });
+};
+const getButtonStateClasses = invalid => {
+  if (invalid) {
+    return '!border-red-500 group-peer-focus:!border-red-300 focus:yt-focus-red group-focus:group-active:!border-red-300 transition-colors ease-in';
+  }
+  return 'border-grey-300 focus:!border-blue-300 group-peer-focus:!border-blue-300 group-peer-focus:group-peer-active:!border-blue-700 transition-colors transition-opacity ease-in';
+};
+
+const debounce = (fn, delay) => {
+  let timeoutId;
+  return function (...args) {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => fn.apply(this, args), delay);
+  };
+};
+
+const getVisibility = element => Boolean(element && (element.offsetWidth || element.offsetHeight || element.getClientRects().length));
+const useBoundingClientRectListener = (ref, dependencies) => {
+  const [dimensions, setDimensions] = React.useState(undefined);
+  const isRefElementVisible = getVisibility(ref.current);
+  const [visibility, setVisibility] = React.useState(isRefElementVisible);
+  const resize = () => {
+    if (visibility) {
+      var _ref$current;
+      setDimensions((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.getBoundingClientRect());
+    }
+  };
+  React.useEffect(() => {
+    const timeout = setTimeout(resize, 0);
+    const debouncedResize = debounce(resize, 250);
+    window.addEventListener('resize', debouncedResize);
+    return () => {
+      clearTimeout(timeout);
+      window.removeEventListener('resize', debouncedResize);
+    };
+  }, [ref.current, visibility]);
+  React.useEffect(() => {
+    const newRefElementVisibility = getVisibility(ref.current);
+    if (visibility !== newRefElementVisibility) {
+      // When visibility of an element changes, then the new visibility of the element can only be checked after the
+      // component has rendered. That's why the visibility check is inside the useEffect. This useEffect will cause
+      // the consumer to rerender and that will cause the above hook to recalculate the dimensions
+      setVisibility(newRefElementVisibility);
+    }
+  });
+  React.useEffect(() => {
+    if (dependencies) {
+      var _ref$current2;
+      setDimensions((_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.getBoundingClientRect());
+    }
+  }, dependencies);
+  return dimensions;
+};
 
 // merges an external ref (optional) with an internal ref (required)
 const useMergedRef = ref => {
@@ -3896,96 +3970,126 @@ const useMergedRef = ref => {
   return internalRef;
 };
 
-const getInputClasses = props => {
-  const disabled = props.disabled || !!props['aria-disabled'];
-  const readOnly = props.readOnly || !!props['aria-readonly'];
-  const invalid = props.invalid || !!props['aria-invalid'];
-  return cn('peer bg-white text-black text-sm border font-normal not-italic no-underline rounded inline-flex leading-6 px-2 relative w-full text-ellipsis flex items-center min-h-[theme(spacing.8)]', {
-    'cursor-not-allowed text-black bg-grey border-grey-dark': readOnly,
-    'border-grey text-opacity-25 cursor-not-allowed': disabled,
-    'bg-[rgba(255,255,0,0.075)]': props.highlighted && disabled,
-    'bg-[rgba(255,255,0,0.2)]': props.highlighted && !disabled,
-    'border-grey-dark': !invalid,
-    'hover:shadow-[0_0_0.1rem_theme(colors.grey.darker)] focus:border-blue-light focus:yt-focus active:border-blue-dark': !disabled && !readOnly,
-    'border-red hover:shadow-[0_0_0.15rem_theme(colors.red.DEFAULT)] focus:border-red-light focus:yt-focus-red active:border-red-dark': invalid && !disabled && !readOnly
-  });
-};
-const getButtonStateClasses = invalid => {
-  if (invalid) {
-    return '!border-red focus:!border-red-light focus:yt-focus-red peer-focus:!border-red-light peer-focus:peer-active:!border-red-dark';
-  }
-  return '!border-grey-dark focus:!border-blue-light peer-focus:!border-blue-light peer-focus:peer-active:!border-blue-dark';
-};
-
-const Input = /*#__PURE__*/React.forwardRef(function Input(props, ref) {
+const validSetSelectionRangeTypes = ['text', 'search', 'url', 'tel', 'password'];
+const InputWithoutDeprecatedFeatures = /*#__PURE__*/React.forwardRef(function InputWithoutDeprecatedFeatures(props, ref) {
   const {
-    button,
-    icon,
     highlighted,
     invalid,
     onKeyDown,
-    autoFocus,
-    ...otherProps
+    postfix,
+    prefix,
+    type = 'text',
+    ...attributes
   } = props;
-  const inputRef = useMergedRef(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(() => {
-    if (autoFocus && inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, []);
+  const internalRef = useMergedRef(ref);
+  let handleKeyDown = onKeyDown;
   // home and end keys only navigate to the start/end of input value if the input container does not scroll
   // 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
-  const handleKeyDown = event => {
-    if (!event.shiftKey && (event.key === 'Home' || event.key === 'End')) {
-      event.preventDefault();
-      const position = event.key === 'End' ? event.currentTarget.value.length : 0;
-      event.currentTarget.setSelectionRange(position, position);
-    }
-    if (onKeyDown) {
-      onKeyDown(event);
-    }
-  };
-  const input = /*#__PURE__*/React.createElement("input", Object.assign({}, otherProps, {
+  // only the 'text', 'search', 'url', 'tel', 'password' input types support setSelectionRange
+  if (validSetSelectionRangeTypes.includes(type)) {
+    handleKeyDown = event => {
+      if (!event.shiftKey && (event.key === 'Home' || event.key === 'End')) {
+        event.preventDefault();
+        const position = event.key === 'End' ? event.currentTarget.value.length : 0;
+        event.currentTarget.setSelectionRange(position, position);
+      }
+      if (typeof onKeyDown === 'function') {
+        onKeyDown(event);
+      }
+    };
+  }
+  const prefixRef = React.useRef(null);
+  const prefixRect = useBoundingClientRectListener(prefixRef);
+  const postfixRef = React.useRef(null);
+  const postfixRect = useBoundingClientRectListener(postfixRef);
+  const className = cn(getInputClasses(props), {
+    'pl-8': !!prefix,
+    'pr-8': !!postfix
+  }, attributes.className);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "relative inline-flex"
+  }, /*#__PURE__*/React.createElement("input", Object.assign({}, attributes, {
     className: className,
     "data-taco": "input",
     onKeyDown: handleKeyDown,
-    ref: inputRef
-  }));
-  if (hasContainer) {
-    let extra;
-    if (button) {
-      const disabled = button.props.disabled || 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 = /*#__PURE__*/React.cloneElement(button, {
-        className: buttonClassName,
-        disabled
-      });
-    } else if (icon) {
-      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
-      });
-      extra = typeof icon === 'string' ? /*#__PURE__*/React.createElement(Icon, {
-        className: iconClassName,
-        name: icon
-      }) : /*#__PURE__*/React.cloneElement(icon, {
-        className: cn(iconClassName, icon.props.className)
-      });
+    ref: internalRef,
+    style: {
+      paddingLeft: prefixRect ? `${prefixRect.width - 1}px` : undefined,
+      paddingRight: postfixRect ? `${postfixRect.width - 1}px` : undefined
+    },
+    type: type
+  })), prefix ? /*#__PURE__*/React.createElement(Affix, {
+    type: "prefix",
+    children: prefix,
+    disabled: attributes.disabled,
+    ref: prefixRef
+  }) : null, postfix ? /*#__PURE__*/React.createElement(Affix, {
+    type: "postfix",
+    children: postfix,
+    disabled: attributes.disabled,
+    ref: postfixRef
+  }) : null);
+});
+const Affix = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function Affix(props, ref) {
+  const {
+    children,
+    disabled,
+    type
+  } = props;
+  let displayName;
+  if (children) {
+    let el = children;
+    if ( /*#__PURE__*/React.isValidElement(children)) {
+      var _children$type;
+      displayName = children === null || children === void 0 ? void 0 : (_children$type = children.type) === null || _children$type === void 0 ? void 0 : _children$type.displayName;
+      if (displayName === 'Icon') {
+        el = /*#__PURE__*/React.cloneElement(children, {
+          className: cn('!h-5 !w-5', children.props.className)
+        });
+      }
     }
-    const containerClassName = cn('bg-white inline-flex relative rounded w-full', otherProps.className);
-    return /*#__PURE__*/React.createElement("div", {
-      className: containerClassName,
-      "data-taco": "input-container"
-    }, input, extra);
+    return /*#__PURE__*/React.createElement("span", {
+      className: cn('group absolute top-0 flex h-full items-center justify-center', {
+        'text-grey-300': disabled,
+        'text-grey-700': !disabled,
+        'left-0': type === 'prefix',
+        'right-0': type === 'postfix',
+        'px-0': displayName === 'IconButton',
+        'px-1.5': displayName === 'Icon',
+        'px-2': displayName !== 'IconButton' && displayName !== 'Icon'
+      }),
+      ref: ref
+    }, el);
+  }
+  return null;
+}));
+const Input = /*#__PURE__*/React.forwardRef(function LegacyInput(props, ref) {
+  var _attributes$postfix;
+  const {
+    button,
+    icon,
+    ...attributes
+  } = props;
+  let postfix;
+  if (button) {
+    const disabled = button.props.disabled || attributes.disabled;
+    const buttonClassName = cn('items-center focus:z-10 flex justify-center border rounded-l-none rounded-r h-full focus:rounded focus:outline-none', {
+      [getButtonStateClasses(attributes.invalid)]: !props.disabled
+    }, button.props.className);
+    postfix = /*#__PURE__*/React.cloneElement(button, {
+      className: buttonClassName,
+      disabled
+    });
+  } else if (icon) {
+    postfix = typeof icon === 'string' ? /*#__PURE__*/React.createElement(Icon, {
+      name: icon
+    }) : icon;
   }
-  return input;
+  return /*#__PURE__*/React.createElement(InputWithoutDeprecatedFeatures, Object.assign({}, attributes, {
+    postfix: (_attributes$postfix = attributes.postfix) !== null && _attributes$postfix !== void 0 ? _attributes$postfix : postfix,
+    ref: ref
+  }));
 });
 
 const getNextIndexFromKey = (key, length, index, direction = 'vertical') => {
@@ -4184,7 +4288,7 @@ const ScrollableList = /*#__PURE__*/React.forwardRef(function ScrollableList(pro
       'aria-selected': multiselect ? getOptionCheckedState(String(option.value), index) : currentIndex === index,
       'data-focused': currentIndex === index,
       children: option.text,
-      className: cn('flex items-center px-3 w-full cursor-pointer bg-white flex-[0_0_2rem] focus:wcag-blue focus:border-blue', {
+      className: cn('flex items-center px-3 w-full cursor-pointer bg-white flex-[0_0_2rem] focus:wcag-blue-500 focus:border-blue-500', {
         'sticky top-0 font-bold': depth === 0 && !!option.hasChildren
       }),
       disabled: option.disabled,
@@ -4648,52 +4752,6 @@ const useCombobox = ({
   };
 };
 
-const debounce = (fn, delay) => {
-  let timeoutId;
-  return function (...args) {
-    clearTimeout(timeoutId);
-    timeoutId = setTimeout(() => fn.apply(this, args), delay);
-  };
-};
-
-const getVisibility = element => Boolean(element && (element.offsetWidth || element.offsetHeight || element.getClientRects().length));
-const useBoundingClientRectListener = (ref, dependencies) => {
-  const [dimensions, setDimensions] = React.useState(undefined);
-  const isRefElementVisible = getVisibility(ref.current);
-  const [visibility, setVisibility] = React.useState(isRefElementVisible);
-  const resize = () => {
-    if (visibility) {
-      var _ref$current;
-      setDimensions((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.getBoundingClientRect());
-    }
-  };
-  React.useEffect(() => {
-    const timeout = setTimeout(resize, 0);
-    const debouncedResize = debounce(resize, 250);
-    window.addEventListener('resize', debouncedResize);
-    return () => {
-      clearTimeout(timeout);
-      window.removeEventListener('resize', debouncedResize);
-    };
-  }, [ref.current, visibility]);
-  React.useEffect(() => {
-    const newRefElementVisibility = getVisibility(ref.current);
-    if (visibility !== newRefElementVisibility) {
-      // When visibility of an element changes, then the new visibility of the element can only be checked after the
-      // component has rendered. That's why the visibility check is inside the useEffect. This useEffect will cause
-      // the consumer to rerender and that will cause the above hook to recalculate the dimensions
-      setVisibility(newRefElementVisibility);
-    }
-  });
-  React.useEffect(() => {
-    if (dependencies) {
-      var _ref$current2;
-      setDimensions((_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.getBoundingClientRect());
-    }
-  }, dependencies);
-  return dimensions;
-};
-
 const Combobox = /*#__PURE__*/React.forwardRef(function Combobox(props, ref) {
   const {
     className: externalClassName,
@@ -4764,7 +4822,7 @@ const Combobox = /*#__PURE__*/React.forwardRef(function Combobox(props, ref) {
     },
     sideOffset: 4
   }, /*#__PURE__*/React.createElement(ScrollableList, Object.assign({}, list, {
-    className: cn('!border-blue max-h-[calc(12rem+2px)] w-auto max-w-[theme(spacing.96)]'),
+    className: cn('max-h-[calc(12rem+2px)] w-auto max-w-[theme(spacing.96)] !border-blue-500'),
     style: {
       minWidth: selectDimensions === null || selectDimensions === void 0 ? void 0 : selectDimensions.width
     },
@@ -4918,7 +4976,7 @@ const UnstyledArrow = /*#__PURE__*/React.forwardRef(function PopoverArrow(props,
       transform: 'rotateZ(180deg)'
     }
   }), /*#__PURE__*/React.createElement("path", {
-    className: "text-grey-dark group-focus:text-blue-light fill-current",
+    className: "text-grey-300 fill-current group-focus:text-blue-300",
     d: "M23.7,27.1L17,19.9C16.5,19.3,15.8,19,15,19s-1.6,0.3-2.1,0.9l-6.6,7.2C5.3,28.1,3.4,29,2,29h26 C26.7,29,24.6,28.1,23.7,27.1z"
   }), /*#__PURE__*/React.createElement("path", {
     className: "fill-current",
@@ -4926,7 +4984,7 @@ const UnstyledArrow = /*#__PURE__*/React.forwardRef(function PopoverArrow(props,
   })));
 });
 
-const getPopoverStyleClassnames = () => 'bg-white focus:border-blue-light border border-transparent rounded p-3 yt-shadow focus:yt-focus outline-none group';
+const getPopoverStyleClassnames = () => 'bg-white focus:border-blue-300 border border-transparent rounded p-3 yt-shadow focus:yt-focus outline-none group';
 
 const PopoverContext = /*#__PURE__*/React.createContext({
   props: {},
@@ -4945,10 +5003,9 @@ const Trigger$2 = /*#__PURE__*/React.forwardRef(function PopoverAnchor(props, ex
     children = /*#__PURE__*/React.createElement("span", null, props.children);
   }
   return /*#__PURE__*/React.createElement(PopoverPrimitive.Trigger, Object.assign({}, parentProps, props, {
-    children: children,
     ref: refCallback,
     asChild: true
-  }));
+  }), children);
 });
 const RenderPropWrapper = /*#__PURE__*/React.forwardRef(function RenderPropWrapper({
   children,
@@ -5040,43 +5097,47 @@ const Datepicker = /*#__PURE__*/React.forwardRef(function Datepicker(props, ref)
     "data-taco": "datepicker",
     style: style
   }, /*#__PURE__*/React.createElement(Input, Object.assign({}, input, {
-    button: /*#__PURE__*/React.createElement(Popover, null, /*#__PURE__*/React.createElement(Popover.Trigger, null, /*#__PURE__*/React.createElement(IconButton, {
+    button: /*#__PURE__*/React.createElement(IconButton, {
       "aria-label": texts.datepicker.expand,
       disabled: input.disabled || input.readOnly,
-      icon: "calendar"
-    })), /*#__PURE__*/React.createElement(Popover.Content, null, ({
-      close
-    }) => /*#__PURE__*/React.createElement("div", {
-      className: "-m-3 flex"
-    }, /*#__PURE__*/React.createElement(Calendar$1, Object.assign({}, calendar, {
-      onChange: (date, event) => {
-        calendar.onChange(date, event);
-        close();
-      },
-      tabIndex: -1
-    })), shortcuts && /*#__PURE__*/React.createElement("div", {
-      className: "border-grey-dark flex flex-col border-l"
-    }, /*#__PURE__*/React.createElement("span", {
-      className: "m-4 mb-3 flex h-8 w-32 items-center text-xs font-semibold"
-    }, shortcutsText !== null && shortcutsText !== void 0 ? shortcutsText : texts.datepicker.shortcuts), /*#__PURE__*/React.createElement("ul", null, shortcuts.map((shortcut, i) => /*#__PURE__*/React.createElement("li", {
-      key: i
-    }, /*#__PURE__*/React.createElement("button", {
-      className: "hover:bg-grey-light flex w-full items-start px-4 py-1 text-xs",
-      onClick: event => {
-        event.persist();
-        shortcut.onClick(event);
-        close();
-      }
-    }, shortcut.text)))), handleReset && /*#__PURE__*/React.createElement("button", {
-      className: "text-blue hover:text-blue-light my-4 mx-auto mt-auto inline-flex cursor-pointer border-none bg-transparent text-xs",
-      onClick: event => {
-        event.persist();
-        handleReset(event);
-        close();
-      }
-    }, texts.datepicker.clear)))))
+      icon: "calendar",
+      popover: props => /*#__PURE__*/React.createElement(Popover, Object.assign({}, props), /*#__PURE__*/React.createElement(Popover.Content, null, ({
+        close
+      }) => /*#__PURE__*/React.createElement("div", {
+        className: "-m-3 flex"
+      }, /*#__PURE__*/React.createElement(Calendar$1, Object.assign({}, calendar, {
+        onChange: (date, event) => {
+          calendar.onChange(date, event);
+          close();
+        },
+        tabIndex: -1
+      })), shortcuts && /*#__PURE__*/React.createElement("div", {
+        className: "border-grey-300 flex flex-col border-l"
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "m-4 mb-3 flex h-8 w-32 items-center text-xs font-semibold"
+      }, shortcutsText !== null && shortcutsText !== void 0 ? shortcutsText : texts.datepicker.shortcuts), /*#__PURE__*/React.createElement("ul", null, shortcuts.map(shortcut => /*#__PURE__*/React.createElement("li", {
+        key: shortcut.text
+      }, /*#__PURE__*/React.createElement("button", {
+        type: "button",
+        className: "hover:bg-grey-100 flex w-full items-start px-4 py-1 text-xs",
+        onClick: event => {
+          event.persist();
+          shortcut.onClick(event);
+          close();
+        }
+      }, shortcut.text)))), handleReset && /*#__PURE__*/React.createElement("button", {
+        type: "button",
+        className: "my-4 mx-auto mt-auto inline-flex cursor-pointer border-none bg-transparent text-xs text-blue-500 hover:text-blue-300",
+        onClick: event => {
+          event.persist();
+          handleReset(event);
+          close();
+        }
+      }, texts.datepicker.clear)))))
+    })
   })));
 });
+Datepicker.displayName = 'Datepicker';
 
 /* eslint-disable @typescript-eslint/no-empty-function */
 const DialogContext = /*#__PURE__*/React.createContext({
@@ -5247,7 +5308,7 @@ const Content$4 = /*#__PURE__*/React.forwardRef(function DialogContent(props, re
     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"
+    className: "yt-dialog__drag absolute-center-x bg-grey-100 top-1.5 h-3 w-24 cursor-move rounded text-center"
   })), dialog.showCloseButton ? /*#__PURE__*/React.createElement(DialogPrimitive.Close, {
     onClick: dialog.onClose,
     asChild: true
@@ -5294,7 +5355,7 @@ const Drawer = /*#__PURE__*/React.forwardRef(function DialogDrawer(props, ref) {
 Drawer.displayName = 'DialogDrawer';
 
 const Extra = /*#__PURE__*/React.forwardRef(function DialogExtra(props, ref) {
-  const className = cn('bg-grey-light yt-shadow-inset absolute top-full left-0 -mt-px w-full rounded-t-none rounded-b p-6 text-left', props.className);
+  const className = cn('bg-grey-100 yt-shadow-inset absolute top-full left-0 -mt-px w-full rounded-t-none rounded-b p-6 text-left', props.className);
   return /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
     className: className,
     "data-taco": "dialog-extra",
@@ -5379,11 +5440,11 @@ const Field = /*#__PURE__*/React.forwardRef(function Field(props, ref) {
     ...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
+    'text-grey-300': disabled
   }, props.className);
   const messageClassName = cn('h-4 text-xs text-left leading-normal font-normal truncate -mb-4', {
-    'text-grey-darkest': !invalid,
-    'text-red': invalid,
+    'text-grey-700': !invalid,
+    'text-red-500': invalid,
     'opacity-50': disabled
   }, props.className);
   return /*#__PURE__*/React.createElement("label", Object.assign({}, otherProps, {
@@ -5445,10 +5506,9 @@ const Anchor = /*#__PURE__*/React.forwardRef(function HangerAnchor(props, extern
     children = /*#__PURE__*/React.createElement("span", null, props.children);
   }
   return /*#__PURE__*/React.createElement(PopoverPrimitive.Anchor, Object.assign({}, parentProps, props, {
-    children: children,
     ref: refCallback,
     asChild: true
-  }));
+  }), children);
 });
 const Title$2 = /*#__PURE__*/React.forwardRef(function DialogTitle(props, ref) {
   const className = cn('mb-1 text-base font-bold flex w-full', props.className);
@@ -5465,7 +5525,7 @@ const Content$5 = /*#__PURE__*/React.forwardRef(function HangerContent(props, re
   const {
     texts
   } = useLocalization();
-  const className = cn('wcag-blue border border-transparent rounded p-3 pr-12 yt-shadow focus:border-transparent max-w-sm', props.className);
+  const className = cn('wcag-blue-500 border border-transparent rounded p-3 pr-12 yt-shadow focus:border-transparent max-w-sm', props.className);
   const handleInteractOutside = event => {
     event.preventDefault();
   };
@@ -5477,7 +5537,7 @@ const Content$5 = /*#__PURE__*/React.forwardRef(function HangerContent(props, re
     sideOffset: 1,
     ref: ref
   }, props.children, /*#__PURE__*/React.createElement(UnstyledArrow, {
-    className: "text-blue"
+    className: "text-blue-500"
   }), /*#__PURE__*/React.createElement(PopoverPrimitive.Close, {
     asChild: true
   }, /*#__PURE__*/React.createElement(IconButton, {
@@ -5533,7 +5593,7 @@ const UnstyledArrow$1 = /*#__PURE__*/React.forwardRef(function HoverCardArrow(pr
       transform: 'rotateZ(180deg)'
     }
   }), /*#__PURE__*/React.createElement("path", {
-    className: "text-grey-dark group-focus:text-blue-light fill-current",
+    className: "text-grey-300 fill-current group-focus:text-blue-300",
     d: "M23.7,27.1L17,19.9C16.5,19.3,15.8,19,15,19s-1.6,0.3-2.1,0.9l-6.6,7.2C5.3,28.1,3.4,29,2,29h26 C26.7,29,24.6,28.1,23.7,27.1z"
   }), /*#__PURE__*/React.createElement("path", {
     className: "fill-current",
@@ -5574,34 +5634,48 @@ const SearchInput = /*#__PURE__*/React.forwardRef(function SearchInput({
   onSearch,
   ...props
 }, ref) {
+  const internalRef = useMergedRef(ref);
   const {
     texts
   } = useLocalization();
   const handleClick = () => {
-    if (!props.disabled) {
-      onSearch === null || onSearch === void 0 ? void 0 : onSearch(props.value);
-    }
+    var _internalRef$current$, _internalRef$current;
+    onSearch === null || onSearch === void 0 ? void 0 : onSearch((_internalRef$current$ = (_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 ? void 0 : _internalRef$current.value) !== null && _internalRef$current$ !== void 0 ? _internalRef$current$ : '');
+  };
+  const handleCancelClick = () => {
+    setInputValueByRef(internalRef.current, '');
   };
   const handleKeyDown = event => {
     var _props$onKeyDown;
-    const isEnterKeyPressed = event.key === 'Enter';
-    if (isEnterKeyPressed) {
+    if (event.key === 'Enter') {
+      event.preventDefault();
       handleClick();
+      return;
     }
     (_props$onKeyDown = props.onKeyDown) === null || _props$onKeyDown === void 0 ? void 0 : _props$onKeyDown.call(props, event);
   };
   return /*#__PURE__*/React.createElement(Input, Object.assign({
-    "aria-label": texts.searchInput.inputLabel
+    "aria-label": texts.searchInput.placeholder,
+    placeholder: texts.searchInput.placeholder
   }, 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,
-      onClick: handleClick
-    }),
     onKeyDown: handleKeyDown,
-    ref: ref,
+    postfix: /*#__PURE__*/React.createElement(React.Fragment, null, props.disabled || props.readOnly || !props.value ? null : /*#__PURE__*/React.createElement(IconButton, {
+      "aria-hidden": true,
+      className: "group-peer-focus:visible group-peer-hover:visible !text-grey-700 invisible mr-0.5 !h-5 !min-h-[theme(spacing.4)] !w-5 !min-w-[theme(spacing.4)] text-xs hover:visible group-hover:visible",
+      icon: "close",
+      onClick: handleCancelClick,
+      rounded: true,
+      tabIndex: -1,
+      tooltip: texts.searchInput.clear
+    }), /*#__PURE__*/React.createElement(IconButton, {
+      "aria-label": texts.searchInput.button,
+      icon: "search",
+      className: "group-peer-focus:!border-transparent group-peer-focus:group-peer-active:!border-transparent -mr-2 !border-transparent !bg-transparent focus:!border-transparent",
+      disabled: props.disabled || props.readOnly,
+      onClick: handleClick,
+      tooltip: texts.searchInput.button
+    })),
+    ref: internalRef,
     type: "search"
   }));
 });
@@ -6058,13 +6132,13 @@ const useItemStyling = ({
   return cn('flex items-center justify-start h-8 pr-1.5 relative rounded w-full focus:outline-none group', {
     'pl-7': menu === null || menu === void 0 ? void 0 : menu.indented,
     'pl-1.5': !(menu !== null && menu !== void 0 && menu.indented),
-    'cursor-pointer hover:bg-grey-light text-black hover:text-black': !disabled,
-    'cursor-not-allowed hover:bg-white text-grey-dark': disabled
+    'cursor-pointer hover:bg-grey-100 text-black hover:text-black': !disabled,
+    'cursor-not-allowed hover:bg-white text-grey-300': disabled
   }, className);
 };
 const Shortcut = props => {
   return /*#__PURE__*/React.createElement("span", Object.assign({}, props, {
-    className: "text-grey-darkest ml-auto pl-3"
+    className: "text-grey-700 ml-auto pl-3"
   }));
 };
 const Item$1 = /*#__PURE__*/React.forwardRef(function MenuItem(props, ref) {
@@ -6200,13 +6274,13 @@ const RadioGroupItem = /*#__PURE__*/React.forwardRef(function RadioGroupItem(pro
   } = props;
   const isDisabled = context.disabled || props.disabled;
   const className = cn('flex flex-shrink-0 self-start items-center justify-center h-4 w-4 mt-[0.2rem] rounded-full bg-white border-2', {
-    'border-grey-dark hover:border-4 focus:yt-focus aria-checked:bg-blue aria-checked:border-blue hover:aria-checked:border-blue-light': !isDisabled && !context.invalid,
-    'border-grey cursor-not-allowed aria-checked:bg-blue-light aria-checked:border-blue-light ': isDisabled,
-    'border-red hover:border-4 text-red focus:border-red focus:yt-focus-red aria-checked:bg-red aria-checked:border-red': context.invalid && !isDisabled
+    'border-grey-300 hover:border-4 focus:yt-focus aria-checked:bg-blue-500 aria-checked:border-blue-500 hover:aria-checked:border-blue-300': !isDisabled && !context.invalid,
+    'border-grey-200 cursor-not-allowed aria-checked:bg-blue-300 aria-checked:border-blue-300 ': isDisabled,
+    'border-red-500 hover:border-4 text-red-500 focus:border-red-500 focus:yt-focus-red aria-checked:bg-red-500 aria-checked:border-red': context.invalid && !isDisabled
   });
   const labelClassName = cn('flex items-center gap-2', {
     'cursor-pointer': !isDisabled,
-    'cursor-not-allowed text-grey-dark': isDisabled
+    'cursor-not-allowed text-grey-300': isDisabled
   }, props.className);
   return /*#__PURE__*/React.createElement("label", {
     className: labelClassName
@@ -6328,13 +6402,13 @@ RadioGroup$1.Item = RadioItem;
 
 const Separator = () => {
   return /*#__PURE__*/React.createElement(DropdownMenuPrimitive.Separator, {
-    className: "bg-grey-dark my-1 h-px"
+    className: "bg-grey-300 my-1 h-px"
   });
 };
 
 const Header = /*#__PURE__*/React.forwardRef(function MenuHeader(props, ref) {
   const menu = useCurrentMenu();
-  const className = cn('flex items-center justify-start h-7 pr-1.5 text-xs text-grey-darkest', {
+  const className = cn('flex items-center justify-start h-7 pr-1.5 text-xs text-grey-700', {
     'pl-7': menu === null || menu === void 0 ? void 0 : menu.indented,
     'pl-1.5': !(menu !== null && menu !== void 0 && menu.indented)
   }, props.className);
@@ -6499,11 +6573,11 @@ const Item$2 = /*#__PURE__*/React__default.forwardRef(function Item(props, 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,
+    'w-full mb-px py-1 px-3 flex items-center hover:bg-grey-300': 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,
-    'bg-grey-dark': isTreeitem && active && !isDraggedOver,
-    'yt-navigation__item--dropping bg-blue': isDraggedOver
+    'bg-grey-300': isTreeitem && active && !isDraggedOver,
+    'yt-navigation__item--dropping bg-blue-500': isDraggedOver
   }, props.className);
   const handleClick = event => {
     if (event.target instanceof HTMLAnchorElement || event.target instanceof HTMLButtonElement) {
@@ -6539,7 +6613,7 @@ const MenuGroup = /*#__PURE__*/React__default.forwardRef(function MenuGroup(prop
   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
+      'cursor-pointer hover:text-blue-500': !props.fixed
     });
     return /*#__PURE__*/React__default.createElement("span", {
       className: className
@@ -6572,10 +6646,10 @@ const Menu$2 = /*#__PURE__*/React__default.forwardRef(function Menu(props, ref)
     return scrollableAreas;
   }, [props.children]);
   return /*#__PURE__*/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),
+    className: cn('divide-grey-100 flex flex-grow flex-col divide-y-2 overflow-y-auto', props.className),
     ref: ref
   }), scrollableAreas.map((area, i) => Array.isArray(area) ? /*#__PURE__*/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",
+    className: "divide-grey-100 flex h-0 flex-auto flex-shrink-0 flex-grow flex-col divide-y-2 overflow-y-auto",
     key: i
   }, area) : area));
 });
@@ -6585,7 +6659,7 @@ const Navigation = /*#__PURE__*/React__default.forwardRef(function Navigation(pr
     children,
     ...otherProps
   } = props;
-  const className = cn('h-full flex flex-col bg-grey-light divide-y-2 divide-grey-light', props.className);
+  const className = cn('h-full flex flex-col bg-grey-100 divide-y-2 divide-grey-100', props.className);
   return /*#__PURE__*/React__default.createElement("div", Object.assign({}, otherProps, {
     className: className,
     "data-taco": "navigation",
@@ -6836,8 +6910,8 @@ const BaseSelect = /*#__PURE__*/React.forwardRef(function BaseSelect(props, ref)
   const className = cn('inline-flex relative w-full', {
     'yt-select--readonly': props.readOnly
   }, externalClassName);
-  const inputClassname = cn(getInputClasses(props), 'h-8 text-left pr-0', {
-    'border-blue': popover.open
+  const inputClassname = cn(getInputClasses(props), 'h-8 text-left !pr-0', {
+    'border-blue-500': popover.open
   });
   React.useEffect(() => {
     if (autoFocus && internalRef.current) {
@@ -7050,10 +7124,10 @@ const Progress = ({
       animationDuration: `${duration}ms`
     };
   }
-  const className = cn('bg-grey-light rounded block h-1 overflow-hidden w-full', props.className);
+  const className = cn('bg-grey-100 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
+    "w-full before:h-1 before:bg-grey-300 before:block before:animate-[progress-indeterminate_2s_cubic-bezier(0.4,0,0.2,1)_infinite] before:content-[' ']": !duration,
+    [`w-0 bg-grey-300 animate-[progress_linear]`]: duration
   });
   return /*#__PURE__*/React__default.createElement("span", Object.assign({}, props, {
     "data-taco": "progress",
@@ -7113,10 +7187,10 @@ const Toast = ({
     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-grey-200': type === 'default' || type === 'loading' || !type,
+    'border border-grey-500': type === 'success',
+    'border border-blue-500': type === 'information',
+    'border border-yellow-700': type === 'warning',
     'border border-red': type === 'error'
   });
   const timer = useTimer(autoClose, handleClose);
@@ -7160,7 +7234,7 @@ const Toast = ({
     className: "flex-grow"
   }, content), /*#__PURE__*/React__default.createElement(IconButton, {
     appearance: "discrete",
-    className: "text-grey-darkest -mr-2 cursor-pointer self-start !px-0",
+    className: "text-grey-700 -mr-2 cursor-pointer self-start !px-0",
     icon: "close",
     "aria-label": texts.toasts.dismiss,
     onClick: handleClose
@@ -7615,15 +7689,15 @@ const Title$3 = /*#__PURE__*/React__default.forwardRef(function Listbox2Group(pr
 });
 
 const colors = {
-  green: 'bg-[#cdf0e7] text-[#14493a]',
-  yellow: 'bg-[#fff1c3] text-[#733700]',
-  red: 'bg-[#ffdad2] text-[#64001b]',
-  blue: 'bg-[#deebff] text-[#29283e]',
-  purple: 'bg-[#eee5ff] text-[#412970]',
-  orange: 'bg-[#ffe3bb] text-[#4a2811]',
-  brown: 'bg-[#eee0da] text-[#45291f]',
-  pink: 'bg-[#ffe3f7] text-[#870062]',
-  grey: 'bg-grey text-[#303030]'
+  green: 'bg-green-100 text-green-900',
+  yellow: 'bg-yellow-100 text-yellow-900',
+  red: 'bg-red-100 text-red-900',
+  blue: 'bg-blue-100 text-blue-900',
+  purple: 'bg-purple-100 text-purple-900',
+  orange: 'bg-orange-100 text-orange-900',
+  brown: 'bg-brown-100 text-brown-900',
+  pink: 'bg-pink-100 text-pink-900',
+  grey: 'bg-grey-200 text-grey-900'
 };
 
 const Tag$1 = /*#__PURE__*/React__default.forwardRef((props, ref) => {
@@ -7661,7 +7735,7 @@ const Tag$1 = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   }) : null);
 });
 
-const createOptionClassName = () => 'group mb-px flex h-8 w-full text-sm flex-shrink-0 font-normal cursor-pointer items-center rounded bg-white px-2 leading-8 text-black aria-hidden:hidden gap-1.5 bg-white hover:bg-grey-light aria-current:bg-grey-light aria-disabled:text-black/25 aria-disabled:pointer-events-none';
+const createOptionClassName = () => 'group mb-px flex h-8 w-full text-sm flex-shrink-0 font-normal cursor-pointer items-center rounded bg-white px-2 leading-8 text-black aria-hidden:hidden gap-1.5 bg-white hover:bg-grey-100 aria-current:bg-grey-100 aria-disabled:text-black/25 aria-disabled:pointer-events-none';
 const createCollectionClassName = () => 'flex flex-col gap-px';
 
 const Select2Context = /*#__PURE__*/React__default.createContext({});
@@ -7818,7 +7892,7 @@ const EditPopover = props => {
     appearance: "primary",
     onClick: handleSave(close)
   }, texts.select2.save))) : null, onEdit && onDelete ? /*#__PURE__*/React__default.createElement("hr", null) : null, onDelete ? /*#__PURE__*/React__default.createElement("button", {
-    className: "hover:text-grey-darkest flex items-center justify-start gap-1",
+    className: "hover:text-grey-700 flex items-center justify-start gap-1",
     onClick: handleDelete(close),
     onKeyDown: preventKeyDownPropagation
   }, /*#__PURE__*/React__default.createElement(Icon, {
@@ -7981,7 +8055,7 @@ const Thumb = props => /*#__PURE__*/React__default.createElement(ScrollAreaPrimi
   className: "flex-[1] rounded bg-black opacity-50"
 }));
 const Corner = props => /*#__PURE__*/React__default.createElement(ScrollAreaPrimitive.Corner, Object.assign({}, props, {
-  classname: "bg-grey-darker"
+  classname: "bg-grey-500"
 }));
 const ScrollArea = props => {
   const {
@@ -8037,7 +8111,7 @@ const Button$2 = /*#__PURE__*/React__default.forwardRef(function Select2TriggerB
     highlighted,
     invalid,
     readOnly
-  }).replace('w-full ', ''), {
+  }).replace('w-full', ''), {
     'w-full': !((_props$className = props.className) !== null && _props$className !== void 0 && _props$className.includes('w-'))
   }, props.className);
   const handleClick = event => {
@@ -8100,6 +8174,7 @@ const Single = /*#__PURE__*/React__default.forwardRef(function Select2TriggerSin
   }, output));
 });
 const Multiple = /*#__PURE__*/React__default.forwardRef(function Select2TriggerMultiple(props, ref) {
+  var _buttonRef$current;
   const {
     children,
     values = [],
@@ -8112,9 +8187,12 @@ const Multiple = /*#__PURE__*/React__default.forwardRef(function Select2TriggerM
     setValue,
     tags
   } = useSelect2Context();
+  const buttonRef = useMergedRef(ref);
   const valuesAsChildren = values.map(value => children.find(c => c.props.value === value));
   let content;
-  let className = buttonProps.className;
+  let {
+    className
+  } = buttonProps;
   if (open) {
     className = cn('absolute z-20', buttonProps.className);
     content = /*#__PURE__*/React__default.createElement(ScrollArea, {
@@ -8143,12 +8221,15 @@ const Multiple = /*#__PURE__*/React__default.forwardRef(function Select2TriggerM
     });
   }
   return /*#__PURE__*/React__default.createElement("span", {
-    className: cn({
-      'relative h-8': open
-    })
+    className: cn('relative inline-flex flex-grow', {
+      'h-8': open
+    }),
+    style: {
+      width: open ? (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.offsetWidth : undefined
+    }
   }, /*#__PURE__*/React__default.createElement(Button$2, Object.assign({}, buttonProps, {
     className: className,
-    ref: ref
+    ref: buttonRef
   }), content));
 });
 const MultipleValue = ({
@@ -8343,6 +8424,7 @@ const Search$1 = /*#__PURE__*/React__default.forwardRef(function ListboxSearch(p
 const useChildren = ({
   children: initialChildren,
   emptyValue,
+  multiple,
   open,
   setValue,
   value
@@ -8351,7 +8433,7 @@ const useChildren = ({
   // support empty value - probably a more elegant way to achieve this
   const allChildren = React__default.useMemo(() => {
     const initial = initialChildren || [];
-    if (emptyValue !== undefined) {
+    if (emptyValue !== undefined && !multiple) {
       return [/*#__PURE__*/React__default.createElement(Option$1, {
         key: "__empty",
         children: "",
@@ -8362,7 +8444,7 @@ const useChildren = ({
   }, [initialChildren, emptyValue]);
   // set an initial value if none is set, we have to trigger state updates for controlled components
   React__default.useEffect(() => {
-    if (emptyValue === undefined && value === undefined) {
+    if (!multiple && emptyValue === undefined && value === undefined) {
       var _allChildren$;
       setValue(allChildren === null || allChildren === void 0 ? void 0 : (_allChildren$ = allChildren[0]) === null || _allChildren$ === void 0 ? void 0 : _allChildren$.props.value);
     }
@@ -8465,7 +8547,7 @@ const Collection = props => {
     children
   } = props;
   return /*#__PURE__*/React__default.createElement(ScrollArea, {
-    className: "flex max-h-[10.25rem] w-full flex-col gap-y-0.5 px-1.5"
+    className: "flex max-h-[10.3rem] w-full flex-col gap-y-0.5 px-1.5"
   }, children);
 };
 
@@ -8518,6 +8600,7 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
   } = useChildren({
     children: initialChildren,
     emptyValue,
+    multiple,
     open,
     setValue,
     value
@@ -8549,15 +8632,13 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     var _listboxRef$current;
     if (open) {
       event.preventDefault();
-    } else {
-      if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
-        setOpen(true);
-      }
+    } else if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      setOpen(true);
     }
     // the focus should always remain on the input, so we forward events on to the listbox
     (_listboxRef$current = listboxRef.current) === null || _listboxRef$current === void 0 ? void 0 : _listboxRef$current.dispatchEvent(createCustomKeyboardEvent(event));
   };
-  const className = cn('border-grey-dark rounded border bg-white py-1.5 shadow-md outline-none', createCollectionClassName());
+  const className = cn('border-grey-300 rounded border bg-white py-1.5 shadow-md outline-none', createCollectionClassName());
   return /*#__PURE__*/React__default.createElement(Select2Context.Provider, {
     value: context
   }, /*#__PURE__*/React__default.createElement(PopoverPrimitive.Root, {
@@ -8576,10 +8657,9 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     "data-taco": "Select2"
   }, /*#__PURE__*/React__default.createElement(Trigger$6, Object.assign({}, otherProps, {
     "aria-haspopup": "listbox",
-    children: allChildren,
     onKeyDown: handleKeyDown,
     ref: internalRef
-  }))), /*#__PURE__*/React__default.createElement(PopoverPrimitive.Portal, null, /*#__PURE__*/React__default.createElement(PopoverPrimitive.Content, {
+  }), allChildren)), /*#__PURE__*/React__default.createElement(PopoverPrimitive.Portal, null, /*#__PURE__*/React__default.createElement(PopoverPrimitive.Content, {
     asChild: true,
     align: "start",
     onOpenAutoFocus: event => {
@@ -8605,7 +8685,7 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     placeholder: onCreate ? texts.select2.searchOrCreate : texts.select2.search,
     ref: searchRef
   }) : null, allChildren.length <= 0 ? /*#__PURE__*/React__default.createElement("div", {
-    className: "text-grey-darkest -mt-0.5 flex h-8 items-center px-2",
+    className: "text-grey-700 -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",
@@ -8660,6 +8740,7 @@ const ControlledHiddenField = props => {
   }
   return null;
 };
+Select2.displayName = 'Select2';
 
 const sanitizeRowProps = (row, rowExpansionRenderer) => {
   var _row$subRows;
@@ -8773,7 +8854,7 @@ const getString = value => {
 };
 const guess = value => {
   if (typeof value === 'boolean') {
-    return !!value;
+    return value;
   }
   return isNaN(value) ? getString(value) : Number(value);
 };
@@ -9370,7 +9451,7 @@ const visibleColumns = columns => {
     className: 'yt-table__cell--draggable flex-col px-0',
     Cell: () => /*#__PURE__*/React__default.createElement(Icon, {
       name: "drag",
-      className: "text-grey-darkest invisible w-[20px] cursor-grab"
+      className: "text-grey-700 invisible w-[20px] cursor-grab"
     }),
     flex: '0 0 20px'
   }, ...columns];
@@ -9662,8 +9743,8 @@ const Row = /*#__PURE__*/React__default.forwardRef(function TableRow({
       minHeight: rowHeight ? `${rowHeight}px` : undefined,
       paddingLeft: row.depth ? `${row.depth * 2}rem` : undefined
     },
-    className: cn('yt-table__row border-grey-light flex border-b min-h-[2.5rem] hover:bg-grey-light', {
-      'yt-table__row--active bg-grey-light hover:bg-grey-light': activeIndex === index,
+    className: cn('yt-table__row border-grey-100 flex border-b min-h-[2.5rem] hover:bg-grey-100', {
+      'yt-table__row--active bg-grey-100 hover:bg-grey-100': activeIndex === index,
       'yt-table__row--clickable': !!onRowClick,
       'yt-table__row--dragging': !!row.isDragging,
       'yt-table__row--editing': !!row.isEditing
@@ -9720,7 +9801,7 @@ const Column = ({
     ...(cell.getSortByToggleProps && cell.getSortByToggleProps({
       title: undefined
     })),
-    className: cn('yt-table__cell flex flex-1 truncate p-2 align-middle text-grey-darkest hover:text-black', cell.className, {
+    className: cn('yt-table__cell flex flex-1 truncate p-2 align-middle text-grey-700 hover:text-black', cell.className, {
       'yt-table__cell__group': !!cell.columns,
       'cursor-pointer': !cell.disableSorting,
       'justify-start text-left': cell.align === 'left',
@@ -9775,7 +9856,7 @@ const BaseTable = /*#__PURE__*/React__default.forwardRef(function BaseTable(prop
   }, headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.map((headerGroup, index) => /*#__PURE__*/React__default.createElement("div", {
     key: index,
     role: "row",
-    className: "border-grey-light flex h-auto min-h-[2.5rem] w-full select-none border-t-0 border-b-2 font-bold"
+    className: "border-grey-100 flex h-auto min-h-[2.5rem] w-full select-none border-t-0 border-b-2 font-bold"
   }, headerGroup.headers.map((cell, index) => /*#__PURE__*/React__default.createElement(Column, {
     key: index,
     index: index,
@@ -9885,7 +9966,7 @@ const VariableRow = /*#__PURE__*/React__default.memo(({
     role: "row",
     style: style
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "yt-table__cell text-grey-dark"
+    className: "yt-table__cell text-grey-300"
   }, texts.table.loading));
 }, reactWindow.areEqual);
 const getAverageRowHeight = (rowHeights = {}) => {
@@ -10155,7 +10236,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(props, ref) {
   }), children);
 });
 const TabList = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
-  const className = cn('yt-tab__list border-b border-grey-light flex flex-row m-0 mb-4', props.className);
+  const className = cn('yt-tab__list border-b border-grey-100 flex flex-row m-0 mb-4', props.className);
   return /*#__PURE__*/React.createElement(TabsPrimitive.List, Object.assign({}, props, {
     className: className,
     ref: ref
@@ -10167,7 +10248,7 @@ const TabTrigger = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
     disabled,
     ...otherProps
   } = props;
-  const className = cn('yt-tab bg-transparent border-b-2 border-transparent text-grey-darkest m-0 py-2 px-4', disabled ? 'cursor-not-allowed !text-grey-darker' : 'cursor-pointer rounded-t hover:border-grey-dark aria-selected:border-blue aria-selected:text-black aria-selected:hover:border-blue-light hover:text-black active:yt-focus active:border-blue focus:yt-focus focus:border-blue', props.className);
+  const className = cn('yt-tab bg-transparent border-b-2 border-transparent text-grey-700 m-0 py-2 px-4', disabled ? 'cursor-not-allowed !text-grey-500' : 'cursor-pointer rounded-t hover:border-grey-300 aria-selected:border-blue-500 aria-selected:text-black aria-selected:hover:border-blue-300 hover:text-black active:yt-focus active:border-blue-500 focus:yt-focus focus:border-blue-500', props.className);
   return /*#__PURE__*/React.createElement(TabsPrimitive.Trigger, Object.assign({}, otherProps, {
     className: className,
     disabled: disabled,
@@ -10234,13 +10315,13 @@ const Switch = /*#__PURE__*/React.forwardRef(function Switch(props, ref) {
   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
+    'bg-grey-500 hover:bg-grey-300 aria-checked:bg-blue-500 aria-checked:hover:bg-blue-300 focus:yt-focus': !props.disabled,
+    'bg-grey-100 cursor-not-allowed aria-checked:bg-blue-300': props.disabled
   }, props.className);
   let labelledByProps = null;
   if (label) {
     labelledByProps = {
-      ['aria-labelledby']: `${id}-label`,
+      'aria-labelledby': `${id}-label`,
       id
     };
   }
@@ -10253,7 +10334,7 @@ const Switch = /*#__PURE__*/React.forwardRef(function Switch(props, ref) {
   }));
   if (label) {
     const labelContainerClassName = cn('flex self-start cursor-pointer', {
-      'cursor-not-allowed text-grey-dark': props.disabled
+      'cursor-not-allowed text-grey-300': props.disabled
     });
     return /*#__PURE__*/React.createElement("span", {
       className: labelContainerClassName
@@ -10264,6 +10345,7 @@ const Switch = /*#__PURE__*/React.forwardRef(function Switch(props, ref) {
   }
   return element;
 });
+Switch.displayName = 'Switch';
 
 const Tooltip$1 = ({
   continuous,
@@ -10346,7 +10428,7 @@ const Tour = props => {
     var _props$children$find;
     return (_props$children$find = props.children.find(child => child.props.selector === selector)) === null || _props$children$find === void 0 ? void 0 : _props$children$find.props;
   }, [props.children]);
-  function callback(state) {
+  const callback = state => {
     if (state.action === Joyride.ACTIONS.SKIP && state.lifecycle === Joyride.LIFECYCLE.COMPLETE) {
       if (onClose) {
         onClose(getStep(state.step.target));
@@ -10362,7 +10444,7 @@ const Tour = props => {
         onReady(getStep(state.step.target));
       }
     }
-  }
+  };
   return /*#__PURE__*/React.createElement(Joyride__default, Object.assign({}, rest, {
     run: run,
     steps: steps,
@@ -10383,7 +10465,7 @@ const Tour = props => {
     styles: {
       /** style beacon */
       options: {
-        // tailwind.theme.colors.blue.light
+        // tailwind.theme.colors.blue.300
         primaryColor: '#6ba4ff'
       }
     },