@redsift/popovers 10.3.0-alpha.1 → 10.3.0-alpha.11

package/index.js

@@ -1,10 +1,10 @@
+import { baseContainer, Theme, useBoundingClientRect, baseStyling, baseFlexbox, useId, Skeleton, Heading, Icon, AppContainerContext, useTheme, useMessageFormatter, partitionComponents, isComponent, IconButton, ThemeProvider as ThemeProvider$1, Flexbox, Text, RedsiftTypographyFontWeightSemiBold, Spinner, NotificationsColorPalette, Button, IconButtonLink } from '@redsift/design-system';
+import React, { forwardRef, useContext, useRef, useState, useEffect, useCallback } from 'react';
 import { FloatingOverlay, useMergeRefs, useTransitionStyles, FloatingPortal, FloatingFocusManager, useFloating, useDismiss, useRole, useInteractions, offset, flip, shift, size, autoUpdate, arrow, useHover, safePolygon, useFocus } from '@floating-ui/react';
 export { FloatingPortal, useMergeRefs } from '@floating-ui/react';
-import React, { forwardRef, useContext, useRef, useState, useEffect, useCallback } from 'react';
-import { baseContainer, Theme, useBoundingClientRect, baseStyling, baseFlexbox, useId, Skeleton, Heading, Icon, AppContainerContext, useTheme, useMessageFormatter, partitionComponents, isComponent, IconButton, ThemeProvider as ThemeProvider$1, Flexbox, Text, RedsiftTypographyFontWeightSemiBold, Spinner, NotificationsColorPalette } from '@redsift/design-system';
 import classNames from 'classnames';
-import { mdiClose, mdiAlert, mdiCheckCircle, mdiAlertCircle, mdiInformation } from '@redsift/icons';
 import styled, { css } from 'styled-components';
+import { mdiClose, mdiAlert, mdiCheckCircle, mdiAlertCircle, mdiInformation } from '@redsift/icons';
 import { ToastContainer as ToastContainer$1, Slide, toast } from 'react-toastify';
 
 const DialogContext = /*#__PURE__*/React.createContext(null);
@@ -215,12 +215,9 @@ const StyledDialogContentActions = styled.div`
   }
 `;
 
-const _excluded$7 = ["children", "className"];
+const _excluded$a = ["children", "className", "flexDirection"];
 const COMPONENT_NAME$d = 'DialogContentActions';
 const CLASSNAME$d = 'redsift-dialog-content-actions';
-const DEFAULT_PROPS$d = {
-  flexDirection: 'row'
-};
 
 /**
  * The DialogContentActions component.
@@ -228,21 +225,23 @@ const DEFAULT_PROPS$d = {
 const DialogContentActions = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       children,
-      className
+      className,
+      flexDirection = 'row'
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$7);
+    forwardedProps = _objectWithoutProperties(props, _excluded$a);
   const {
     actionsRef,
     initialFocus
   } = useDialogContext();
-  return /*#__PURE__*/React.createElement(StyledDialogContentActions, _extends({}, forwardedProps, {
+  return /*#__PURE__*/React.createElement(StyledDialogContentActions, _extends({
+    flexDirection: flexDirection
+  }, forwardedProps, {
     className: classNames(DialogContentActions.className, className),
     ref: useMergeRefs([ref, actionsRef]),
     tabIndex: initialFocus === 'actions' ? -1 : undefined
   }), children);
 });
 DialogContentActions.className = CLASSNAME$d;
-DialogContentActions.defaultProps = DEFAULT_PROPS$d;
 DialogContentActions.displayName = COMPONENT_NAME$d;
 
 /**
@@ -305,10 +304,9 @@ const StyledDialogContentBody = styled.div`
   }
 `;
 
-const _excluded$6 = ["children", "className"];
+const _excluded$9 = ["children", "className"];
 const COMPONENT_NAME$c = 'DialogContentBody';
 const CLASSNAME$c = 'redsift-dialog-content-body';
-const DEFAULT_PROPS$c = {};
 
 /**
  * The DialogContentBody component.
@@ -318,7 +316,7 @@ const DialogContentBody = /*#__PURE__*/forwardRef((props, ref) => {
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$6);
+    forwardedProps = _objectWithoutProperties(props, _excluded$9);
   const {
     actionsRef,
     bodyRef,
@@ -343,7 +341,6 @@ const DialogContentBody = /*#__PURE__*/forwardRef((props, ref) => {
   }), children);
 });
 DialogContentBody.className = CLASSNAME$c;
-DialogContentBody.defaultProps = DEFAULT_PROPS$c;
 DialogContentBody.displayName = COMPONENT_NAME$c;
 
 /**
@@ -372,10 +369,9 @@ const StyledDialogContentHeader = styled.div`
   }
 `;
 
-const _excluded$5 = ["children", "className", "header", "headingProps", "icon", "iconProps", "isLoading", "subheader", "theme"];
+const _excluded$8 = ["children", "className", "header", "headingProps", "icon", "iconProps", "isLoading", "subheader", "theme"];
 const COMPONENT_NAME$b = 'DialogContentHeader';
 const CLASSNAME$b = 'redsift-dialog-content-header';
-const DEFAULT_PROPS$b = {};
 
 /**
  * The DialogContentHeader component.
@@ -392,7 +388,7 @@ const DialogContentHeader = /*#__PURE__*/forwardRef((props, ref) => {
       subheader,
       theme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$5);
+    forwardedProps = _objectWithoutProperties(props, _excluded$8);
   const {
     setLabelId,
     setDescriptionId,
@@ -447,13 +443,11 @@ const DialogContentHeader = /*#__PURE__*/forwardRef((props, ref) => {
   }, children) : null);
 });
 DialogContentHeader.className = CLASSNAME$b;
-DialogContentHeader.defaultProps = DEFAULT_PROPS$b;
 DialogContentHeader.displayName = COMPONENT_NAME$b;
 
-const _excluded$4 = ["children", "className", "theme"];
+const _excluded$7 = ["children", "className", "style", "theme"];
 const COMPONENT_NAME$a = 'DialogContent';
 const CLASSNAME$a = 'redsift-dialog-content';
-const DEFAULT_PROPS$a = {};
 const sizeToDimension = size => {
   if (typeof size !== 'string') {
     return size;
@@ -486,9 +480,10 @@ const BaseDialogContent = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       children,
       className,
+      style,
       theme: propsTheme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$4);
+    forwardedProps = _objectWithoutProperties(props, _excluded$7);
   const appContainerState = useContext(AppContainerContext);
   const {
     context: floatingContext,
@@ -532,7 +527,7 @@ const BaseDialogContent = /*#__PURE__*/forwardRef((props, ref) => {
     "aria-labelledby": labelId,
     "aria-describedby": descriptionId
   }, getFloatingProps(props), {
-    style: styles,
+    style: _objectSpread2(_objectSpread2({}, styles), style),
     $width: width
   }), header || hasCloseButton ? /*#__PURE__*/React.createElement("div", {
     className: `${BaseDialogContent.className}__header`
@@ -548,7 +543,6 @@ const BaseDialogContent = /*#__PURE__*/forwardRef((props, ref) => {
   }, body, actions) : null))));
 });
 BaseDialogContent.className = CLASSNAME$a;
-BaseDialogContent.defaultProps = DEFAULT_PROPS$a;
 BaseDialogContent.displayName = COMPONENT_NAME$a;
 const DialogContent = Object.assign(BaseDialogContent, {
   Header: DialogContentHeader,
@@ -558,7 +552,6 @@ const DialogContent = Object.assign(BaseDialogContent, {
 
 const COMPONENT_NAME$9 = 'DialogTrigger';
 const CLASSNAME$9 = 'redsift-dialog-trigger';
-const DEFAULT_PROPS$9 = {};
 
 /**
  * The DialogTrigger component.
@@ -572,30 +565,32 @@ const DialogTrigger = /*#__PURE__*/forwardRef((props, ref) => {
     isOpen,
     handleOpen,
     refs,
-    triggerClassName
+    triggerClassName,
+    color
   } = useDialogContext();
   const childrenRef = children.ref;
   const triggerRef = useMergeRefs([refs.setReference, ref, childrenRef]);
-  if (isComponent('Button')(children) || isComponent('IconButton')(children) || isComponent('LinkButton')(children) || isComponent('Checkbox')(children)) {
+  if (isComponent('Button')(children) || isComponent('IconButton')(children) || isComponent('LinkButton')(children) || isComponent('Checkbox')(children) || isComponent('Switch')(children) || isComponent('Radio')(children) || isComponent('Item')(children)) {
     var _children$props$child;
     return /*#__PURE__*/React.cloneElement(children, _objectSpread2(_objectSpread2({}, getReferenceProps(_objectSpread2(_objectSpread2(_objectSpread2({
       ref: triggerRef
     }, props), children.props), {}, {
       children: (_children$props$child = children.props.children) !== null && _children$props$child !== void 0 ? _children$props$child : ''
     }))), {}, {
-      onClick: () => handleOpen(!isOpen),
+      onClick: props.onClick ? props.onClick : () => handleOpen(!isOpen),
       isActive: isOpen,
-      className: classNames(children.props.className, triggerClassName)
+      className: classNames(children.props.className, triggerClassName),
+      color: color !== null && color !== void 0 ? color : children.props.color
     }));
   }
   return /*#__PURE__*/React.createElement(React.Fragment, null, children);
 });
 DialogTrigger.className = CLASSNAME$9;
-DialogTrigger.defaultProps = DEFAULT_PROPS$9;
 DialogTrigger.displayName = COMPONENT_NAME$9;
 
 function useDialog(_ref) {
   let {
+    color,
     defaultOpen,
     hasCloseButton,
     initialFocus,
@@ -632,6 +627,7 @@ function useDialog(_ref) {
   const role = useRole(context);
   const interactions = useInteractions([dismiss, role]);
   return React.useMemo(() => _objectSpread2(_objectSpread2(_objectSpread2({
+    color,
     isOpen,
     handleOpen
   }, interactions), data), {}, {
@@ -646,33 +642,31 @@ function useDialog(_ref) {
     bodyRef,
     actionsRef,
     triggerClassName
-  }), [isOpen, handleOpen, interactions, data, labelId, descriptionId, hasCloseButton, initialFocus, size, headerRef, bodyRef, actionsRef, triggerClassName]);
+  }), [color, isOpen, handleOpen, interactions, data, labelId, descriptionId, hasCloseButton, initialFocus, size, headerRef, bodyRef, actionsRef, triggerClassName]);
 }
 
 const COMPONENT_NAME$8 = 'Dialog';
 const CLASSNAME$8 = 'redsift-dialog';
-const DEFAULT_PROPS$8 = {
-  hasCloseButton: true,
-  size: DialogSize.medium
-};
 
 /**
  * The Dialog component.
  */
 const BaseDialog = props => {
   const {
+    color,
     children,
     defaultOpen,
-    hasCloseButton = DEFAULT_PROPS$8.hasCloseButton,
+    hasCloseButton = true,
     initialFocus,
     isOpen,
     onOpen,
-    size,
+    size = DialogSize.medium,
     theme: propsTheme,
     triggerClassName
   } = props;
   const theme = useTheme(propsTheme);
   const dialog = useDialog({
+    color,
     defaultOpen,
     hasCloseButton,
     initialFocus,
@@ -691,7 +685,6 @@ const BaseDialog = props => {
   }, trigger && isComponent('DialogTrigger')(trigger) ? trigger : null, content && isComponent('DialogContent')(content) ? content : null));
 };
 BaseDialog.className = CLASSNAME$8;
-BaseDialog.defaultProps = DEFAULT_PROPS$8;
 BaseDialog.displayName = COMPONENT_NAME$8;
 const Dialog = Object.assign(BaseDialog, {
   Trigger: DialogTrigger,
@@ -888,10 +881,9 @@ const StyledPopoverContent = styled.div`
   }
 `;
 
-const _excluded$3 = ["children", "className", "style", "theme"];
+const _excluded$6 = ["children", "className", "style", "theme"];
 const COMPONENT_NAME$7 = 'PopoverContent';
 const CLASSNAME$7 = 'redsift-popover-content';
-const DEFAULT_PROPS$7 = {};
 
 /**
  * The PopoverContent component.
@@ -903,7 +895,7 @@ const PopoverContent = /*#__PURE__*/forwardRef((props, ref) => {
       style,
       theme: propsTheme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$3);
+    forwardedProps = _objectWithoutProperties(props, _excluded$6);
   const appContainerState = useContext(AppContainerContext);
   const {
     context: floatingContext,
@@ -913,37 +905,37 @@ const PopoverContent = /*#__PURE__*/forwardRef((props, ref) => {
     refs,
     strategy,
     x,
-    y
+    y,
+    hideInsteadOfClose
   } = usePopoverContext();
   const theme = useTheme(propsTheme);
   const popoverRef = useMergeRefs([refs.setFloating, ref]);
   const RenderedPopoverContent = /*#__PURE__*/React.createElement(StyledPopoverContent, _extends({
-    $theme: theme,
+    $theme: theme
+  }, getFloatingProps(props), {
     style: _objectSpread2({
       position: strategy,
       top: y !== null && y !== void 0 ? y : 0,
       left: x !== null && x !== void 0 ? x : 0,
-      width: 'fit-content'
-    }, style)
-  }, getFloatingProps(props), {
+      width: 'fit-content',
+      display: hideInsteadOfClose && !isOpen ? 'none' : 'flex'
+    }, style),
     className: classNames(PopoverContent.className, className)
   }, forwardedProps, {
     ref: popoverRef
   }), children);
   return /*#__PURE__*/React.createElement(FloatingPortal, {
     root: appContainerState === null || appContainerState === void 0 ? void 0 : appContainerState.appContainerRef.current
-  }, isOpen && /*#__PURE__*/React.createElement(FloatingFocusManager, {
+  }, isOpen || hideInsteadOfClose ? /*#__PURE__*/React.createElement(FloatingFocusManager, {
     context: floatingContext,
     modal: isModal
-  }, RenderedPopoverContent));
+  }, RenderedPopoverContent) : null);
 });
 PopoverContent.className = CLASSNAME$7;
-PopoverContent.defaultProps = DEFAULT_PROPS$7;
 PopoverContent.displayName = COMPONENT_NAME$7;
 
 const COMPONENT_NAME$6 = 'PopoverTrigger';
 const CLASSNAME$6 = 'redsift-popover-trigger';
-const DEFAULT_PROPS$6 = {};
 
 /**
  * The PopoverTrigger component.
@@ -957,40 +949,45 @@ const PopoverTrigger = /*#__PURE__*/forwardRef((props, ref) => {
     isOpen,
     handleOpen,
     refs,
-    triggerClassName
+    triggerClassName,
+    color
   } = usePopoverContext();
   const childrenRef = children.ref;
   const triggerRef = useMergeRefs([refs.setReference, ref, childrenRef]);
-  if (isComponent('Button')(children) || isComponent('IconButton')(children) || isComponent('LinkButton')(children)) {
+  if (isComponent('Button')(children) || isComponent('IconButton')(children) || isComponent('LinkButton')(children) || isComponent('Checkbox')(children) || isComponent('Switch')(children) || isComponent('Radio')(children) || isComponent('Item')(children)) {
     var _children$props$child;
     return /*#__PURE__*/React.cloneElement(children, _objectSpread2(_objectSpread2({}, getReferenceProps(_objectSpread2(_objectSpread2(_objectSpread2({
       ref: triggerRef
     }, props), children.props), {}, {
-      children: (_children$props$child = children.props.children) !== null && _children$props$child !== void 0 ? _children$props$child : '',
-      className: classNames(children.props.className, triggerClassName)
+      children: (_children$props$child = children.props.children) !== null && _children$props$child !== void 0 ? _children$props$child : ''
     }))), {}, {
-      onClick: () => handleOpen(!isOpen),
-      isActive: isOpen
+      onClick: props.onClick ? props.onClick : () => handleOpen(!isOpen),
+      isActive: isOpen,
+      className: classNames(children.props.className, triggerClassName),
+      color: color !== null && color !== void 0 ? color : children.props.color
     }));
   }
   return null;
 });
 PopoverTrigger.className = CLASSNAME$6;
-PopoverTrigger.defaultProps = DEFAULT_PROPS$6;
 PopoverTrigger.displayName = COMPONENT_NAME$6;
 
 function usePopover(_ref) {
   let {
+    color,
     defaultOpen,
     isModal,
     isOpen: propsIsOpen,
     maxWidth,
     minWidth,
+    offset: propsOffset,
     onOpen,
     placement,
     role: propsRole,
     triggerClassName,
-    width
+    width,
+    setHideInsteadOfClose,
+    hideInsteadOfClose
   } = _ref;
   const [isOpen, setIsOpen] = useState(propsIsOpen !== null && propsIsOpen !== void 0 ? propsIsOpen : defaultOpen);
   useEffect(() => {
@@ -1004,7 +1001,7 @@ function usePopover(_ref) {
       setIsOpen(collapsed);
     }
   }, [onOpen]);
-  const middleware = [offset(2), flip({
+  const middleware = [offset(propsOffset !== null && propsOffset !== void 0 ? propsOffset : 2), flip({
     fallbackAxisSideDirection: 'end'
   }), shift({
     padding: 2
@@ -1031,14 +1028,7 @@ function usePopover(_ref) {
   const data = useFloating({
     placement,
     open: isOpen,
-    onOpenChange: open => {
-      if (propsIsOpen === undefined || propsIsOpen === null) {
-        setIsOpen(open);
-        if (onOpen) {
-          onOpen(open);
-        }
-      }
-    },
+    onOpenChange: handleOpen,
     whileElementsMounted: autoUpdate,
     middleware
   });
@@ -1049,21 +1039,19 @@ function usePopover(_ref) {
   });
   const interactions = useInteractions([dismiss, role]);
   return React.useMemo(() => _objectSpread2(_objectSpread2(_objectSpread2({
+    color,
     isOpen,
     handleOpen
   }, interactions), data), {}, {
     isModal,
-    triggerClassName
-  }), [isOpen, handleOpen, interactions, data, isModal, triggerClassName]);
+    triggerClassName,
+    setHideInsteadOfClose,
+    hideInsteadOfClose
+  }), [color, isOpen, handleOpen, interactions, data, isModal, triggerClassName, setHideInsteadOfClose, hideInsteadOfClose]);
 }
 
 const COMPONENT_NAME$5 = 'Popover';
 const CLASSNAME$5 = 'redsift-popover';
-const DEFAULT_PROPS$5 = {
-  isModal: false,
-  placement: PopoverPlacement.bottom,
-  role: 'dialog'
-};
 
 /**
  * The Popover component.
@@ -1072,30 +1060,37 @@ const BasePopover = props => {
   var _overrideDisplayName$, _overrideDisplayName$2, _overrideDisplayName$3, _overrideDisplayName$4;
   const {
     children,
+    color,
     defaultOpen,
-    isModal,
+    isModal = false,
     isOpen,
     maxWidth,
     minWidth,
+    offset,
     onOpen,
     overrideDisplayName,
-    placement,
-    role,
+    placement = PopoverPlacement.bottom,
+    role = 'dialog',
     theme: propsTheme,
     triggerClassName,
     width
   } = props;
   const theme = useTheme(propsTheme);
+  const [hideInsteadOfClose, setHideInsteadOfClose] = useState(false);
   const popover = usePopover({
+    color,
     defaultOpen,
     isModal,
     isOpen,
     maxWidth,
     minWidth,
+    offset,
     onOpen,
     placement,
     role,
     triggerClassName,
+    setHideInsteadOfClose,
+    hideInsteadOfClose,
     width
   });
   const [[trigger], [content]] = partitionComponents(React.Children.toArray(children), [isComponent((_overrideDisplayName$ = overrideDisplayName === null || overrideDisplayName === void 0 ? void 0 : overrideDisplayName.trigger) !== null && _overrideDisplayName$ !== void 0 ? _overrideDisplayName$ : 'PopoverTrigger'), isComponent((_overrideDisplayName$2 = overrideDisplayName === null || overrideDisplayName === void 0 ? void 0 : overrideDisplayName.content) !== null && _overrideDisplayName$2 !== void 0 ? _overrideDisplayName$2 : 'PopoverContent')]);
@@ -1108,7 +1103,6 @@ const BasePopover = props => {
   }, trigger && isComponent((_overrideDisplayName$3 = overrideDisplayName === null || overrideDisplayName === void 0 ? void 0 : overrideDisplayName.trigger) !== null && _overrideDisplayName$3 !== void 0 ? _overrideDisplayName$3 : 'PopoverTrigger')(trigger) ? trigger : null, content && isComponent((_overrideDisplayName$4 = overrideDisplayName === null || overrideDisplayName === void 0 ? void 0 : overrideDisplayName.content) !== null && _overrideDisplayName$4 !== void 0 ? _overrideDisplayName$4 : 'PopoverContent')(content) ? content : null));
 };
 BasePopover.className = CLASSNAME$5;
-BasePopover.defaultProps = DEFAULT_PROPS$5;
 BasePopover.displayName = COMPONENT_NAME$5;
 const Popover = Object.assign(BasePopover, {
   Trigger: PopoverTrigger,
@@ -1201,13 +1195,9 @@ const StyledToast = styled.div`
 }}
 `;
 
-const _excluded$2 = ["children", "className", "closeToast", "closeButton", "title", "variant", "theme"];
+const _excluded$5 = ["children", "className", "closeButton", "closeToast", "theme", "title", "variant"];
 const COMPONENT_NAME$4 = 'Toast';
 const CLASSNAME$4 = 'redsift-toast';
-const DEFAULT_PROPS$4 = {
-  variant: 'info',
-  closeButton: true
-};
 const getVariant = variant => {
   switch (variant) {
     case ToastVariant.info:
@@ -1245,13 +1235,13 @@ const Toast = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       children,
       className,
+      closeButton = true,
       closeToast,
-      closeButton,
+      theme: propsTheme,
       title,
-      variant,
-      theme: propsTheme
+      variant = 'info'
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$2);
+    forwardedProps = _objectWithoutProperties(props, _excluded$5);
   const theme = useTheme(propsTheme);
   const format = useMessageFormatter(intlMessages);
   const icon = getVariant(variant);
@@ -1292,7 +1282,6 @@ const Toast = /*#__PURE__*/forwardRef((props, ref) => {
   }) : null));
 });
 Toast.className = CLASSNAME$4;
-Toast.defaultProps = DEFAULT_PROPS$4;
 Toast.displayName = COMPONENT_NAME$4;
 
 const ReactToastify = styled.div`
@@ -2025,27 +2014,30 @@ const StyledToastContainer = styled(ToastContainer$1)`
   }
 `;
 
-const _excluded$1 = ["placement"];
+const _excluded$4 = ["autoClose", "closeOnClick", "draggable", "pauseOnFocusLoss", "pauseOnHover", "placement"];
 const COMPONENT_NAME$3 = 'ToastContainer';
 const CLASSNAME$3 = 'redsift-toast-container';
-const DEFAULT_PROPS$3 = {
-  autoClose: 5000,
-  closeOnClick: false,
-  draggable: true,
-  pauseOnFocusLoss: true,
-  pauseOnHover: true,
-  placement: 'top-right'
-};
 
 /**
  * The ToastContainer component.
  */
 const ToastContainer = /*#__PURE__*/forwardRef((props, ref) => {
   const {
-      placement
+      autoClose = 5000,
+      closeOnClick = false,
+      draggable = true,
+      pauseOnFocusLoss = true,
+      pauseOnHover = true,
+      placement = 'top-right'
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1);
-  return /*#__PURE__*/React.createElement(ReactToastify, null, /*#__PURE__*/React.createElement(StyledToastContainer, _extends({}, forwardedProps, {
+    forwardedProps = _objectWithoutProperties(props, _excluded$4);
+  return /*#__PURE__*/React.createElement(ReactToastify, null, /*#__PURE__*/React.createElement(StyledToastContainer, _extends({
+    autoClose: autoClose,
+    closeOnClick: closeOnClick,
+    draggable: draggable,
+    pauseOnFocusLoss: pauseOnFocusLoss,
+    pauseOnHover: pauseOnHover
+  }, forwardedProps, {
     className: ToastContainer.className,
     closeButton: false,
     icon: false,
@@ -2057,10 +2049,9 @@ const ToastContainer = /*#__PURE__*/forwardRef((props, ref) => {
   })));
 });
 ToastContainer.className = CLASSNAME$3;
-ToastContainer.defaultProps = DEFAULT_PROPS$3;
 ToastContainer.displayName = COMPONENT_NAME$3;
 
-const _excluded = ["content", "closeButton", "placement", "title", "variant"],
+const _excluded$3 = ["content", "closeButton", "placement", "title", "variant"],
   _excluded2 = ["content", "closeButton", "placement", "title", "variant"],
   _excluded3 = ["closeButton", "placement"];
 const notify = (_ref, props) => {
@@ -2071,7 +2062,7 @@ const notify = (_ref, props) => {
       title,
       variant = 'info'
     } = _ref,
-    options = _objectWithoutProperties(_ref, _excluded);
+    options = _objectWithoutProperties(_ref, _excluded$3);
   return toast( /*#__PURE__*/React.createElement(Toast, _extends({
     title: title,
     variant: variant,
@@ -2209,34 +2200,6 @@ const useToast = () => {
   };
 };
 
-const TooltipContext = /*#__PURE__*/React.createContext(null);
-
-/**
- * Context props.
- */
-
-/**
- * Component variant.
- */
-const TooltipPlacement = {
-  top: 'top',
-  right: 'right',
-  bottom: 'bottom',
-  left: 'left',
-  'top-start': 'top-start',
-  'top-end': 'top-end',
-  'right-start': 'right-start',
-  'right-end': 'right-end',
-  'bottom-start': 'bottom-start',
-  'bottom-end': 'bottom-end',
-  'left-start': 'left-start',
-  'left-end': 'left-end'
-};
-
-/**
- * Component props.
- */
-
 /**
  * Component style.
  */
@@ -2360,7 +2323,6 @@ const StyledTooltipContent = styled.div`
 
 const COMPONENT_NAME$2 = 'TooltipContent';
 const CLASSNAME$2 = 'redsift-tooltip-content';
-const DEFAULT_PROPS$2 = {};
 
 /**
  * The TooltipContent component.
@@ -2404,14 +2366,14 @@ const TooltipContent = /*#__PURE__*/forwardRef((props, ref) => {
   }, isOpen && /*#__PURE__*/React.createElement(StyledTooltipContent, _extends({
     className: classNames(TooltipContent.className, className),
     ref: popoverRef,
-    $theme: theme,
+    $theme: theme
+  }, getFloatingProps(props), {
     style: _objectSpread2({
       position: strategy,
       top: y !== null && y !== void 0 ? y : 0,
       left: x !== null && x !== void 0 ? x : 0,
       visibility: x == null ? 'hidden' : 'visible'
-    }, style)
-  }, getFloatingProps(props), {
+    }, style),
     $placement: placement
   }), /*#__PURE__*/React.createElement("div", {
     ref: arrowRef,
@@ -2426,12 +2388,10 @@ const TooltipContent = /*#__PURE__*/forwardRef((props, ref) => {
   }, children)));
 });
 TooltipContent.className = CLASSNAME$2;
-TooltipContent.defaultProps = DEFAULT_PROPS$2;
 TooltipContent.displayName = COMPONENT_NAME$2;
 
 const COMPONENT_NAME$1 = 'TooltipTrigger';
 const CLASSNAME$1 = 'redsift-tooltip-trigger';
-const DEFAULT_PROPS$1 = {};
 
 /**
  * The TooltipTrigger component.
@@ -2444,31 +2404,62 @@ const TooltipTrigger = /*#__PURE__*/forwardRef((props, ref) => {
     getReferenceProps,
     refs,
     tooltipId,
-    triggerClassName
+    triggerClassName,
+    color
   } = useTooltipContext();
   const childrenRef = children.ref;
   const triggerRef = useMergeRefs([refs.setReference, ref, childrenRef]);
   if ( /*#__PURE__*/React.isValidElement(children)) {
     var _children$props$child;
-    return /*#__PURE__*/React.cloneElement(children, _objectSpread2({}, getReferenceProps(_objectSpread2(_objectSpread2(_objectSpread2({
+    return /*#__PURE__*/React.cloneElement(children, _objectSpread2(_objectSpread2({}, getReferenceProps(_objectSpread2(_objectSpread2(_objectSpread2({
       ref: triggerRef
     }, props), {}, {
       'aria-describedby': tooltipId
     }, children.props), {}, {
-      children: (_children$props$child = children.props.children) !== null && _children$props$child !== void 0 ? _children$props$child : '',
-      className: classNames(children.props.className, triggerClassName)
-    }))));
+      children: (_children$props$child = children.props.children) !== null && _children$props$child !== void 0 ? _children$props$child : ''
+    }))), {}, {
+      className: classNames(children.props.className, triggerClassName),
+      color: color !== null && color !== void 0 ? color : children.props.color
+    }));
   }
   return /*#__PURE__*/React.createElement("span", _extends({
     ref: triggerRef
   }, getReferenceProps(props)), children);
 });
 TooltipTrigger.className = CLASSNAME$1;
-TooltipTrigger.defaultProps = DEFAULT_PROPS$1;
 TooltipTrigger.displayName = COMPONENT_NAME$1;
 
+const TooltipContext = /*#__PURE__*/React.createContext(null);
+
+/**
+ * Context props.
+ */
+
+/**
+ * Component variant.
+ */
+const TooltipPlacement = {
+  top: 'top',
+  right: 'right',
+  bottom: 'bottom',
+  left: 'left',
+  'top-start': 'top-start',
+  'top-end': 'top-end',
+  'right-start': 'right-start',
+  'right-end': 'right-end',
+  'bottom-start': 'bottom-start',
+  'bottom-end': 'bottom-end',
+  'left-start': 'left-start',
+  'left-end': 'left-end'
+};
+
+/**
+ * Component props.
+ */
+
 function useTooltip(_ref) {
   let {
+    color,
     defaultOpen,
     delay,
     placement,
@@ -2521,13 +2512,14 @@ function useTooltip(_ref) {
   });
   const interactions = useInteractions([hover, focus, dismiss, role]);
   return React.useMemo(() => _objectSpread2(_objectSpread2(_objectSpread2({
+    color,
     isOpen,
     handleOpen
   }, interactions), data), {}, {
     arrowRef,
     tooltipId,
     triggerClassName
-  }), [isOpen, handleOpen, interactions, data, arrowRef, tooltipId, triggerClassName]);
+  }), [color, isOpen, handleOpen, interactions, data, arrowRef, tooltipId, triggerClassName]);
 }
 
 const ThemeContext = /*#__PURE__*/React.createContext(null);
@@ -2535,10 +2527,6 @@ const ThemeProvider = ThemeContext.Provider;
 
 const COMPONENT_NAME = 'Tooltip';
 const CLASSNAME = 'redsift-tooltip';
-const DEFAULT_PROPS = {
-  delay: 500,
-  placement: TooltipPlacement.top
-};
 
 /**
  * The Tooltip component.
@@ -2546,17 +2534,19 @@ const DEFAULT_PROPS = {
 const BaseTooltip = props => {
   const {
     children,
+    color,
     defaultOpen,
-    delay,
+    delay = 500,
     isOpen,
     onOpen,
-    placement,
-    tooltipId,
+    placement = TooltipPlacement.top,
     theme: propsTheme,
+    tooltipId,
     triggerClassName
   } = props;
   const theme = useTheme ? useTheme(propsTheme) : undefined;
   const tooltip = useTooltip({
+    color,
     defaultOpen,
     delay,
     placement,
@@ -2576,13 +2566,66 @@ const BaseTooltip = props => {
   }, trigger && isComponent('TooltipTrigger')(trigger) ? trigger : null, content && isComponent('TooltipContent')(content) ? content : null));
 };
 BaseTooltip.className = CLASSNAME;
-BaseTooltip.defaultProps = DEFAULT_PROPS;
 BaseTooltip.displayName = COMPONENT_NAME;
 const Tooltip = Object.assign(BaseTooltip, {
   Trigger: TooltipTrigger,
   Content: TooltipContent
 });
 
+const _excluded$2 = ["tooltip", "tooltipProps", "tooltipTriggerProps", "tooltipContentProps"];
+const ButtonWithTooltip = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      tooltip,
+      tooltipProps,
+      tooltipTriggerProps,
+      tooltipContentProps
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded$2);
+  return /*#__PURE__*/React.createElement(Tooltip, tooltipProps, /*#__PURE__*/React.createElement(Tooltip.Trigger, tooltipTriggerProps, /*#__PURE__*/React.createElement(Button, _extends({
+    "aria-label": tooltip
+  }, props, {
+    "aria-describedby": undefined,
+    ref: ref
+  }))), /*#__PURE__*/React.createElement(Tooltip.Content, tooltipContentProps, tooltip));
+});
+ButtonWithTooltip.displayName = 'Button';
+
+const _excluded$1 = ["tooltip", "tooltipProps", "tooltipTriggerProps", "tooltipContentProps"];
+const IconButtonLinkWithTooltip = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      tooltip,
+      tooltipProps,
+      tooltipTriggerProps,
+      tooltipContentProps
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded$1);
+  return /*#__PURE__*/React.createElement(Tooltip, tooltipProps, /*#__PURE__*/React.createElement(Tooltip.Trigger, tooltipTriggerProps, /*#__PURE__*/React.createElement(IconButtonLink, _extends({
+    "aria-label": tooltip
+  }, props, {
+    "aria-describedby": undefined,
+    ref: ref
+  }))), /*#__PURE__*/React.createElement(Tooltip.Content, tooltipContentProps, tooltip));
+});
+IconButtonLinkWithTooltip.displayName = 'IconButtonLink';
+
+const _excluded = ["tooltip", "tooltipProps", "tooltipTriggerProps", "tooltipContentProps"];
+const IconButtonWithTooltip = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      tooltip,
+      tooltipProps,
+      tooltipTriggerProps,
+      tooltipContentProps
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Tooltip, tooltipProps, /*#__PURE__*/React.createElement(Tooltip.Trigger, tooltipTriggerProps, /*#__PURE__*/React.createElement(IconButton, _extends({
+    "aria-label": tooltip
+  }, props, {
+    "aria-describedby": undefined,
+    ref: ref
+  }))), /*#__PURE__*/React.createElement(Tooltip.Content, tooltipContentProps, tooltip));
+});
+IconButtonWithTooltip.displayName = 'IconButton';
+
 const useTooltipContext = () => {
   const context = React.useContext(TooltipContext);
   if (context == null) {
@@ -2591,5 +2634,11 @@ const useTooltipContext = () => {
   return context;
 };
 
-export { BaseDialog, BaseDialogContent, BasePopover, BaseTooltip, Dialog, DialogContent, DialogContentActions, DialogContentBody, DialogContentHeader, DialogContext, DialogSize, DialogTrigger, Popover, PopoverContent, PopoverContext, PopoverPlacement, PopoverTrigger, StyledPopoverContent, Toast, ToastContainer, ToastPlacement, ToastVariant, Tooltip, TooltipContent, TooltipContext, TooltipPlacement, TooltipTrigger, sizeToDimension, useDialog, useDialogContext, usePopover, usePopoverContext, useToast, useTooltip, useTooltipContext };
+const WithTooltip = {
+  Button: ButtonWithTooltip,
+  IconButton: IconButtonWithTooltip,
+  IconButtonLink: IconButtonLinkWithTooltip
+};
+
+export { BaseDialog, BaseDialogContent, BasePopover, BaseTooltip, ButtonWithTooltip, Dialog, DialogContent, DialogContentActions, DialogContentBody, DialogContentHeader, DialogContext, DialogSize, DialogTrigger, IconButtonLinkWithTooltip, IconButtonWithTooltip, Popover, PopoverContent, PopoverContext, PopoverPlacement, PopoverTrigger, StyledPopoverContent, Toast, ToastContainer, ToastPlacement, ToastVariant, Tooltip, TooltipContent, TooltipContext, TooltipPlacement, TooltipTrigger, WithTooltip, sizeToDimension, useDialog, useDialogContext, usePopover, usePopoverContext, useToast, useTooltip, useTooltipContext };
 //# sourceMappingURL=index.js.map