@doist/reactist 14.1.0 → 15.1.0

package/dist/reactist.cjs.development.js

@@ -10,14 +10,16 @@ var classNames = _interopDefault(require('classnames'));
 var flattenChildren = _interopDefault(require('react-keyed-flatten-children'));
 var tooltip = require('ariakit/tooltip');
 var ariakitUtils = require('ariakit-utils');
-var tab = require('ariakit/tab');
-var dialog = require('@reach/dialog');
 var FocusLock = _interopDefault(require('react-focus-lock'));
+var ariaHidden = require('aria-hidden');
+var dialog = require('ariakit/dialog');
+var portal = require('ariakit/portal');
+var tab = require('ariakit/tab');
 var ReactDOM = _interopDefault(require('react-dom'));
 var dayjs = _interopDefault(require('dayjs'));
 var LocalizedFormat = _interopDefault(require('dayjs/plugin/localizedFormat'));
 var Ariakit = require('ariakit/menu');
-var portal = require('ariakit/portal');
+var dialog$1 = require('@reach/dialog');
 
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
@@ -1203,7 +1205,7 @@ function BaseField({
   }, /*#__PURE__*/React.createElement(Box, {
     className: [className, modules_540a88ff.container, tone === 'error' ? modules_540a88ff.error : null, variant === 'bordered' ? modules_540a88ff.bordered : null],
     maxWidth: maxWidth
-  }, /*#__PURE__*/React.createElement(Box, {
+  }, label || secondaryLabel || auxiliaryLabel ? /*#__PURE__*/React.createElement(Box, {
     as: "span",
     display: "flex",
     justifyContent: "spaceBetween",
@@ -1219,7 +1221,7 @@ function BaseField({
   }, "\u00A0(", secondaryLabel, ")") : null), auxiliaryLabel ? /*#__PURE__*/React.createElement(Box, {
     className: modules_540a88ff.auxiliaryLabel,
     paddingLeft: "small"
-  }, auxiliaryLabel) : null), children(childrenProps)), message ? /*#__PURE__*/React.createElement(FieldMessage, {
+  }, auxiliaryLabel) : null) : null, children(childrenProps)), message ? /*#__PURE__*/React.createElement(FieldMessage, {
     id: messageId,
     tone: tone
   }, message) : null, hint ? /*#__PURE__*/React.createElement(FieldHint, {
@@ -1463,9 +1465,9 @@ const SwitchField = /*#__PURE__*/React.forwardRef(function SwitchField(_ref, ref
   }, hint) : null);
 });
 
-var modules_2728c236 = {"container":"d6ec37c5","bordered":"a60d6043","error":"bef49c61"};
+var modules_2728c236 = {"textAreaContainer":"_61447829","bordered":"_76f4ad88","error":"_4df3452b"};
 
-const _excluded$k = ["variant", "id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "maxWidth"];
+const _excluded$k = ["variant", "id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "maxWidth", "hidden", "aria-describedby"];
 
 function TextArea(_ref) {
   let {
@@ -1477,7 +1479,9 @@ function TextArea(_ref) {
     hint,
     message,
     tone,
-    maxWidth
+    maxWidth,
+    hidden,
+    'aria-describedby': ariaDescribedBy
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded$k);
 
@@ -1490,7 +1494,9 @@ function TextArea(_ref) {
     hint: hint,
     message: message,
     tone: tone,
-    className: [modules_2728c236.container, tone === 'error' ? modules_2728c236.error : null, variant === 'bordered' ? modules_2728c236.bordered : null],
+    hidden: hidden,
+    "aria-describedby": ariaDescribedBy,
+    className: [modules_2728c236.textAreaContainer, tone === 'error' ? modules_2728c236.error : null, variant === 'bordered' ? modules_2728c236.bordered : null],
     maxWidth: maxWidth
   }, extraProps => /*#__PURE__*/React.createElement(Box, {
     width: "full",
@@ -1536,194 +1542,72 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(_ref, ref) {
   }))));
 });
 
-/**
- * usePrevious tracks the change of the given value -
- * when a given value has been changed from a previous call,
- * it will return the value prior to the change.
- *
- * Example:
- *
- * const [x, setX] = useState(1)
- * const prevX = usePrevious(x)
- *
- * Suppose `setX(2)` is called, then in the next component render
- * x = 2 and prevX = 1
- */
+function getInitials(name) {
+  var _initials;
 
-function usePrevious(value) {
-  const ref = React.useRef(null);
-  React.useEffect(() => {
-    ref.current = value;
-  }, [value]);
-  return ref.current;
-}
+  if (!name) {
+    return '';
+  }
 
-var modules_40c67f5b = {"tab":"a1064a3b","track":"_06f1b8a1","tab-neutral":"dabbec7d","tab-themed":"e6f5ae4e","track-neutral":"_43913ce5","track-themed":"_39bdfdde","track-xsmall":"_1c148f4e","track-small":"_2a370df5","track-medium":"_77430437","track-large":"_33db5352","track-xlarge":"_60bf9564","track-xxlarge":"_29a35080"};
+  const seed = name.trim().split(' ');
+  const firstInitial = seed[0];
+  const lastInitial = seed[seed.length - 1];
+  let initials = firstInitial == null ? void 0 : firstInitial[0];
 
-const _excluded$m = ["as", "children", "id", "exceptionallySetClassName"],
-      _excluded2$1 = ["children", "space"],
-      _excluded3 = ["children", "id", "as", "render"];
-const TabsContext = /*#__PURE__*/React.createContext(null);
-/**
- * Used to group components that compose a set of tabs. There can only be one active tab within the same `<Tabs>` group.
- */
+  if (firstInitial != null && lastInitial != null && initials != null && // Better readable this way.
+  // eslint-disable-next-line @typescript-eslint/prefer-string-starts-ends-with
+  firstInitial[0] !== lastInitial[0]) {
+    initials += lastInitial[0];
+  }
 
-function Tabs({
-  children,
-  selectedId,
-  defaultSelectedId,
-  variant = 'neutral',
-  onSelectedIdChange
-}) {
-  const tabState = tab.useTabState({
-    selectedId,
-    setSelectedId: onSelectedIdChange
-  });
-  const previousDefaultSelectedId = usePrevious(defaultSelectedId);
-  const {
-    selectedId: actualSelectedId,
-    select
-  } = tabState;
-  React.useEffect(function selectDefaultTab() {
-    if (!selectedId && defaultSelectedId !== previousDefaultSelectedId && defaultSelectedId !== actualSelectedId && defaultSelectedId !== undefined) {
-      select(defaultSelectedId);
-    }
-  }, [selectedId, defaultSelectedId, actualSelectedId, select, previousDefaultSelectedId]);
-  const memoizedTabState = React.useMemo(function memoizeTabState() {
-    return {
-      tabState,
-      variant
-    };
-  }, [variant, tabState]);
-  return /*#__PURE__*/React.createElement(TabsContext.Provider, {
-    value: memoizedTabState
-  }, children);
+  return (_initials = initials) == null ? void 0 : _initials.toUpperCase();
 }
-/**
- * Represents the individual tab elements within the group. Each `<Tab>` must have a corresponding `<TabPanel>` component.
- */
-
-const Tab = /*#__PURE__*/polymorphicComponent(function Tab(_ref, ref) {
-  let {
-    as,
-    children,
-    id,
-    exceptionallySetClassName
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$m);
 
-  const tabContextValue = React.useContext(TabsContext);
+function emailToIndex(email, maxIndex) {
+  const seed = email.split('@')[0];
+  const hash = seed ? seed.charCodeAt(0) + seed.charCodeAt(seed.length - 1) || 0 : 0;
+  return hash % maxIndex;
+}
 
-  if (!tabContextValue) {
-    return null;
-  }
+var modules_08f3eeac = {"avatar":"_38a1be89","size-xxs":"d32e92ae","size-xs":"_0667d719","size-s":"cf529fcf","size-m":"_6e268eab","size-l":"d64c62cf","size-xl":"_44fb77de","size-xxl":"_01f85e0e","size-xxxl":"_41a5fe19","tablet-size-xxs":"_6ab1577d","tablet-size-xs":"b52a4963","tablet-size-s":"_714a8419","tablet-size-m":"_81cd4d51","tablet-size-l":"bf0a4edb","tablet-size-xl":"e4f0dabd","tablet-size-xxl":"_67ea065d","tablet-size-xxxl":"_2af7f76f","desktop-size-xxs":"_759081dc","desktop-size-xs":"_8290d1c1","desktop-size-s":"_48ea172d","desktop-size-m":"_758f6641","desktop-size-l":"f9ada088","desktop-size-xl":"d3bb7470","desktop-size-xxl":"_9a312ee3","desktop-size-xxxl":"a1d30c23"};
 
-  const {
-    variant,
-    tabState
-  } = tabContextValue;
-  return /*#__PURE__*/React.createElement(tab.Tab, _objectSpread2(_objectSpread2({}, props), {}, {
-    as: as,
-    className: classNames(exceptionallySetClassName, modules_40c67f5b.tab, modules_40c67f5b["tab-" + variant]),
-    id: id,
-    state: tabState,
-    ref: ref
-  }), children);
-});
-/**
- * A component used to group `<Tab>` elements together.
- */
+const _excluded$m = ["user", "avatarUrl", "size", "className", "colorList", "exceptionallySetClassName"];
+const AVATAR_COLORS = ['#fcc652', '#e9952c', '#e16b2d', '#d84b40', '#e8435a', '#e5198a', '#ad3889', '#86389c', '#a8a8a8', '#98be2f', '#5d9d50', '#5f9f85', '#5bbcb6', '#32a3bf', '#2bafeb', '#2d88c3', '#3863cc', '#5e5e5e'];
 
-function TabList(_ref2) {
+function Avatar(_ref) {
   let {
-    children,
-    space = 'xsmall'
-  } = _ref2,
-      props = _objectWithoutProperties(_ref2, _excluded2$1);
-
-  const tabContextValue = React.useContext(TabsContext);
+    user,
+    avatarUrl,
+    size = 'l',
+    className,
+    colorList = AVATAR_COLORS,
+    exceptionallySetClassName
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$m);
 
-  if (!tabContextValue) {
-    return null;
-  }
+  const userInitials = getInitials(user.name) || getInitials(user.email);
+  const avatarSize = size ? size : 'l';
+  const style = avatarUrl ? {
+    backgroundImage: "url(" + avatarUrl + ")",
+    textIndent: '-9999px' // hide the initials
 
-  const {
-    tabState,
-    variant
-  } = tabContextValue;
-  return (
-    /*#__PURE__*/
-    // The extra <Box> prevents <Inline>'s negative margins from collapsing when used in a flex container
-    // which will render the track with the wrong height
-    React.createElement(Box, null, /*#__PURE__*/React.createElement(tab.TabList, _objectSpread2({
-      state: tabState,
-      as: Box,
-      position: "relative",
-      width: "maxContent"
-    }, props), /*#__PURE__*/React.createElement(Box, {
-      className: classNames(modules_40c67f5b.track, modules_40c67f5b["track-" + space], modules_40c67f5b["track-" + variant])
-    }), /*#__PURE__*/React.createElement(Inline, {
-      space: space
-    }, children)))
-  );
+  } : {
+    backgroundColor: colorList[emailToIndex(user.email, colorList.length)]
+  };
+  const sizeClassName = getClassNames(modules_08f3eeac, 'size', avatarSize);
+  return /*#__PURE__*/React__default.createElement(Box, _objectSpread2({
+    className: [className, modules_08f3eeac.avatar, sizeClassName, exceptionallySetClassName],
+    style: style
+  }, props), userInitials);
 }
-/**
- * Used to define the content to be rendered when a tab is active. Each `<TabPanel>` must have a corresponding `<Tab>` component.
- */
-
-const TabPanel = /*#__PURE__*/polymorphicComponent(function TabPanel(_ref3, ref) {
-  let {
-    children,
-    id,
-    as,
-    render = 'always'
-  } = _ref3,
-      props = _objectWithoutProperties(_ref3, _excluded3);
-
-  const tabContextValue = React.useContext(TabsContext);
-  const [tabRendered, setTabRendered] = React.useState(false);
-  const tabIsActive = (tabContextValue == null ? void 0 : tabContextValue.tabState.selectedId) === id;
-  React.useEffect(function trackTabRenderedState() {
-    if (!tabRendered && tabIsActive) {
-      setTabRendered(true);
-    }
-  }, [tabRendered, tabIsActive]);
-
-  if (!tabContextValue) {
-    return null;
-  }
-
-  const {
-    tabState
-  } = tabContextValue;
-  const shouldRender = render === 'always' || render === 'active' && tabIsActive || render === 'lazy' && (tabIsActive || tabRendered);
-  return shouldRender ? /*#__PURE__*/React.createElement(tab.TabPanel, _objectSpread2(_objectSpread2({
-    tabId: id
-  }, props), {}, {
-    state: tabState,
-    as: as,
-    ref: ref
-  }), children) : null;
-});
-/**
- * Allows content to be rendered based on the current tab being selected while outside of the TabPanel
- * component. Can be placed freely within the main `<Tabs>` component.
- */
 
-function TabAwareSlot({
-  children
-}) {
-  const tabContextValue = React.useContext(TabsContext);
-  return tabContextValue ? children({
-    selectedId: tabContextValue == null ? void 0 : tabContextValue.tabState.selectedId
-  }) : null;
-}
+Avatar.displayName = 'Avatar';
 
-var modules_8f59d13b = {"reach-portal":"_37bef8d8","fadein":"_77f9687f","fitContent":"bcc4e0a5","container":"d4832c2d","full":"b0c3b021","large":"_573d6aa5","medium":"_8550d996","small":"_43bb18f5","xlarge":"_57b4159d","overlay":"cb63f300","expand":"e741893e","buttonContainer":"bb1ce281","headerContent":"c5ef989c"};
+var modules_8f59d13b = {"overlay":"_868392ae","fadein":"_63d7ee15","fitContent":"b8548bf2","container":"_31956461","full":"_1007df83","large":"_10c275aa","medium":"_0ac526b4","small":"_30f38fdb","xlarge":"_54868e8b","expand":"c0bc68bc","buttonContainer":"_6527332a","headerContent":"_4750dc1b"};
 
 const _excluded$n = ["isOpen", "onDismiss", "height", "width", "exceptionallySetClassName", "autoFocus", "children"],
-      _excluded2$2 = ["children", "button", "withDivider", "exceptionallySetClassName"],
-      _excluded3$1 = ["exceptionallySetClassName", "children"],
+      _excluded2$1 = ["children", "button", "withDivider", "exceptionallySetClassName"],
+      _excluded3 = ["exceptionallySetClassName", "children"],
       _excluded4 = ["exceptionallySetClassName", "withDivider"],
       _excluded5 = ["children"];
 const ModalContext = /*#__PURE__*/React.createContext({
@@ -1757,23 +1641,65 @@ function Modal(_ref) {
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded$n);
 
+  const setVisible = React.useCallback(visible => {
+    if (!visible) {
+      onDismiss == null ? void 0 : onDismiss();
+    }
+  }, [onDismiss]);
+  const state = dialog.useDialogState({
+    visible: isOpen,
+    setVisible
+  });
   const contextValue = React.useMemo(() => ({
     onDismiss,
     height
   }), [onDismiss, height]);
-  return /*#__PURE__*/React.createElement(dialog.DialogOverlay, {
-    isOpen: isOpen,
-    onDismiss: onDismiss,
-    dangerouslyBypassFocusLock // We're setting up our own focus lock below
-    : true,
+  const portalRef = React.useRef(null);
+  const dialogRef = React.useRef(null);
+  const backdropRef = React.useRef(null);
+  const handleBackdropClick = React.useCallback(event => {
+    var _dialogRef$current, _backdropRef$current;
+
+    if ( // The focus lock element takes up the same space as the backdrop and is where the event bubbles up from,
+    // so instead of checking the backdrop as the event target, we need to make sure it's just above the dialog
+    !((_dialogRef$current = dialogRef.current) != null && _dialogRef$current.contains(event.target)) && // Events fired from other portals will bubble up to the backdrop, even if it isn't a child in the DOM
+    (_backdropRef$current = backdropRef.current) != null && _backdropRef$current.contains(event.target)) {
+      event.stopPropagation();
+      onDismiss == null ? void 0 : onDismiss();
+    }
+  }, [onDismiss]);
+  React.useLayoutEffect(function disableAccessibilityTreeOutside() {
+    if (!isOpen || !portalRef.current) {
+      return;
+    }
+
+    return ariaHidden.hideOthers(portalRef.current);
+  }, [isOpen]);
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(portal.Portal // @ts-expect-error `portalRef` doesn't accept MutableRefObject initialized as null
+  , {
+    // @ts-expect-error `portalRef` doesn't accept MutableRefObject initialized as null
+    portalRef: portalRef
+  }, /*#__PURE__*/React.createElement(Box, {
+    "data-testid": "modal-overlay",
+    "data-overlay": true,
     className: classNames(modules_8f59d13b.overlay, modules_8f59d13b[height], modules_8f59d13b[width]),
-    "data-testid": "modal-overlay"
+    onClick: handleBackdropClick,
+    ref: backdropRef
   }, /*#__PURE__*/React.createElement(FocusLock, {
     autoFocus: autoFocus,
     whiteList: isNotInternalFrame,
     returnFocus: true
-  }, /*#__PURE__*/React.createElement(dialog.DialogContent, _objectSpread2(_objectSpread2({}, props), {}, {
+  }, /*#__PURE__*/React.createElement(dialog.Dialog, _objectSpread2(_objectSpread2({}, props), {}, {
+    ref: dialogRef,
     as: Box,
+    state: state,
+    hideOnEscape: true,
+    preventBodyScroll: true,
     borderRadius: "full",
     background: "default",
     display: "flex",
@@ -1781,10 +1707,19 @@ function Modal(_ref) {
     overflow: "hidden",
     height: height === 'expand' ? 'full' : undefined,
     flexGrow: height === 'expand' ? 1 : 0,
-    className: [exceptionallySetClassName, modules_8f59d13b.container]
+    className: [exceptionallySetClassName, modules_8f59d13b.container],
+    // Disable focus lock as we set up our own using ReactFocusLock
+    modal: false,
+    autoFocus: false,
+    autoFocusOnShow: false,
+    autoFocusOnHide: false,
+    // Disable portal and backdrop as we control their markup
+    portal: false,
+    backdrop: false,
+    hideOnInteractOutside: false
   }), /*#__PURE__*/React.createElement(ModalContext.Provider, {
     value: contextValue
-  }, children))));
+  }, children)))));
 }
 /**
  * The close button rendered by ModalHeader. Provided independently so that consumers can customize
@@ -1828,7 +1763,7 @@ function ModalHeader(_ref2) {
     withDivider = false,
     exceptionallySetClassName
   } = _ref2,
-      props = _objectWithoutProperties(_ref2, _excluded2$2);
+      props = _objectWithoutProperties(_ref2, _excluded2$1);
 
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
     as: "header",
@@ -1870,7 +1805,7 @@ function ModalBody(_ref3) {
     exceptionallySetClassName,
     children
   } = _ref3,
-      props = _objectWithoutProperties(_ref3, _excluded3$1);
+      props = _objectWithoutProperties(_ref3, _excluded3);
 
   const {
     height
@@ -1924,66 +1859,188 @@ function ModalActions(_ref5) {
   }, children));
 }
 
-function getInitials(name) {
-  var _initials;
-
-  if (!name) {
-    return '';
-  }
-
-  const seed = name.trim().split(' ');
-  const firstInitial = seed[0];
-  const lastInitial = seed[seed.length - 1];
-  let initials = firstInitial == null ? void 0 : firstInitial[0];
-
-  if (firstInitial != null && lastInitial != null && initials != null && // Better readable this way.
-  // eslint-disable-next-line @typescript-eslint/prefer-string-starts-ends-with
-  firstInitial[0] !== lastInitial[0]) {
-    initials += lastInitial[0];
-  }
+/**
+ * usePrevious tracks the change of the given value -
+ * when a given value has been changed from a previous call,
+ * it will return the value prior to the change.
+ *
+ * Example:
+ *
+ * const [x, setX] = useState(1)
+ * const prevX = usePrevious(x)
+ *
+ * Suppose `setX(2)` is called, then in the next component render
+ * x = 2 and prevX = 1
+ */
 
-  return (_initials = initials) == null ? void 0 : _initials.toUpperCase();
+function usePrevious(value) {
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
 }
 
-function emailToIndex(email, maxIndex) {
-  const seed = email.split('@')[0];
-  const hash = seed ? seed.charCodeAt(0) + seed.charCodeAt(seed.length - 1) || 0 : 0;
-  return hash % maxIndex;
-}
+var modules_40c67f5b = {"tab":"a1064a3b","track":"_06f1b8a1","tab-neutral":"dabbec7d","tab-themed":"e6f5ae4e","track-neutral":"_43913ce5","track-themed":"_39bdfdde","track-xsmall":"_1c148f4e","track-small":"_2a370df5","track-medium":"_77430437","track-large":"_33db5352","track-xlarge":"_60bf9564","track-xxlarge":"_29a35080"};
 
-var modules_08f3eeac = {"avatar":"_38a1be89","size-xxs":"d32e92ae","size-xs":"_0667d719","size-s":"cf529fcf","size-m":"_6e268eab","size-l":"d64c62cf","size-xl":"_44fb77de","size-xxl":"_01f85e0e","size-xxxl":"_41a5fe19","tablet-size-xxs":"_6ab1577d","tablet-size-xs":"b52a4963","tablet-size-s":"_714a8419","tablet-size-m":"_81cd4d51","tablet-size-l":"bf0a4edb","tablet-size-xl":"e4f0dabd","tablet-size-xxl":"_67ea065d","tablet-size-xxxl":"_2af7f76f","desktop-size-xxs":"_759081dc","desktop-size-xs":"_8290d1c1","desktop-size-s":"_48ea172d","desktop-size-m":"_758f6641","desktop-size-l":"f9ada088","desktop-size-xl":"d3bb7470","desktop-size-xxl":"_9a312ee3","desktop-size-xxxl":"a1d30c23"};
+const _excluded$o = ["as", "children", "id", "exceptionallySetClassName"],
+      _excluded2$2 = ["children", "space"],
+      _excluded3$1 = ["children", "id", "as", "render"];
+const TabsContext = /*#__PURE__*/React.createContext(null);
+/**
+ * Used to group components that compose a set of tabs. There can only be one active tab within the same `<Tabs>` group.
+ */
 
-const _excluded$o = ["user", "avatarUrl", "size", "className", "colorList", "exceptionallySetClassName"];
-const AVATAR_COLORS = ['#fcc652', '#e9952c', '#e16b2d', '#d84b40', '#e8435a', '#e5198a', '#ad3889', '#86389c', '#a8a8a8', '#98be2f', '#5d9d50', '#5f9f85', '#5bbcb6', '#32a3bf', '#2bafeb', '#2d88c3', '#3863cc', '#5e5e5e'];
+function Tabs({
+  children,
+  selectedId,
+  defaultSelectedId,
+  variant = 'neutral',
+  onSelectedIdChange
+}) {
+  const tabState = tab.useTabState({
+    selectedId,
+    setSelectedId: onSelectedIdChange
+  });
+  const previousDefaultSelectedId = usePrevious(defaultSelectedId);
+  const {
+    selectedId: actualSelectedId,
+    select
+  } = tabState;
+  React.useEffect(function selectDefaultTab() {
+    if (!selectedId && defaultSelectedId !== previousDefaultSelectedId && defaultSelectedId !== actualSelectedId && defaultSelectedId !== undefined) {
+      select(defaultSelectedId);
+    }
+  }, [selectedId, defaultSelectedId, actualSelectedId, select, previousDefaultSelectedId]);
+  const memoizedTabState = React.useMemo(function memoizeTabState() {
+    return {
+      tabState,
+      variant
+    };
+  }, [variant, tabState]);
+  return /*#__PURE__*/React.createElement(TabsContext.Provider, {
+    value: memoizedTabState
+  }, children);
+}
+/**
+ * Represents the individual tab elements within the group. Each `<Tab>` must have a corresponding `<TabPanel>` component.
+ */
 
-function Avatar(_ref) {
+const Tab = /*#__PURE__*/polymorphicComponent(function Tab(_ref, ref) {
   let {
-    user,
-    avatarUrl,
-    size = 'l',
-    className,
-    colorList = AVATAR_COLORS,
+    as,
+    children,
+    id,
     exceptionallySetClassName
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded$o);
 
-  const userInitials = getInitials(user.name) || getInitials(user.email);
-  const avatarSize = size ? size : 'l';
-  const style = avatarUrl ? {
-    backgroundImage: "url(" + avatarUrl + ")",
-    textIndent: '-9999px' // hide the initials
+  const tabContextValue = React.useContext(TabsContext);
 
-  } : {
-    backgroundColor: colorList[emailToIndex(user.email, colorList.length)]
-  };
-  const sizeClassName = getClassNames(modules_08f3eeac, 'size', avatarSize);
-  return /*#__PURE__*/React__default.createElement(Box, _objectSpread2({
-    className: [className, modules_08f3eeac.avatar, sizeClassName, exceptionallySetClassName],
-    style: style
-  }, props), userInitials);
+  if (!tabContextValue) {
+    return null;
+  }
+
+  const {
+    variant,
+    tabState
+  } = tabContextValue;
+  return /*#__PURE__*/React.createElement(tab.Tab, _objectSpread2(_objectSpread2({}, props), {}, {
+    as: as,
+    className: classNames(exceptionallySetClassName, modules_40c67f5b.tab, modules_40c67f5b["tab-" + variant]),
+    id: id,
+    state: tabState,
+    ref: ref
+  }), children);
+});
+/**
+ * A component used to group `<Tab>` elements together.
+ */
+
+function TabList(_ref2) {
+  let {
+    children,
+    space = 'xsmall'
+  } = _ref2,
+      props = _objectWithoutProperties(_ref2, _excluded2$2);
+
+  const tabContextValue = React.useContext(TabsContext);
+
+  if (!tabContextValue) {
+    return null;
+  }
+
+  const {
+    tabState,
+    variant
+  } = tabContextValue;
+  return (
+    /*#__PURE__*/
+    // The extra <Box> prevents <Inline>'s negative margins from collapsing when used in a flex container
+    // which will render the track with the wrong height
+    React.createElement(Box, null, /*#__PURE__*/React.createElement(tab.TabList, _objectSpread2({
+      state: tabState,
+      as: Box,
+      position: "relative",
+      width: "maxContent"
+    }, props), /*#__PURE__*/React.createElement(Box, {
+      className: classNames(modules_40c67f5b.track, modules_40c67f5b["track-" + space], modules_40c67f5b["track-" + variant])
+    }), /*#__PURE__*/React.createElement(Inline, {
+      space: space
+    }, children)))
+  );
 }
+/**
+ * Used to define the content to be rendered when a tab is active. Each `<TabPanel>` must have a corresponding `<Tab>` component.
+ */
 
-Avatar.displayName = 'Avatar';
+const TabPanel = /*#__PURE__*/polymorphicComponent(function TabPanel(_ref3, ref) {
+  let {
+    children,
+    id,
+    as,
+    render = 'always'
+  } = _ref3,
+      props = _objectWithoutProperties(_ref3, _excluded3$1);
+
+  const tabContextValue = React.useContext(TabsContext);
+  const [tabRendered, setTabRendered] = React.useState(false);
+  const tabIsActive = (tabContextValue == null ? void 0 : tabContextValue.tabState.selectedId) === id;
+  React.useEffect(function trackTabRenderedState() {
+    if (!tabRendered && tabIsActive) {
+      setTabRendered(true);
+    }
+  }, [tabRendered, tabIsActive]);
+
+  if (!tabContextValue) {
+    return null;
+  }
+
+  const {
+    tabState
+  } = tabContextValue;
+  const shouldRender = render === 'always' || render === 'active' && tabIsActive || render === 'lazy' && (tabIsActive || tabRendered);
+  return shouldRender ? /*#__PURE__*/React.createElement(tab.TabPanel, _objectSpread2(_objectSpread2({
+    tabId: id
+  }, props), {}, {
+    state: tabState,
+    as: as,
+    ref: ref
+  }), children) : null;
+});
+/**
+ * Allows content to be rendered based on the current tab being selected while outside of the TabPanel
+ * component. Can be placed freely within the main `<Tabs>` component.
+ */
+
+function TabAwareSlot({
+  children
+}) {
+  const tabContextValue = React.useContext(TabsContext);
+  return tabContextValue ? children({
+    selectedId: tabContextValue == null ? void 0 : tabContextValue.tabState.selectedId
+  }) : null;
+}
 
 const _excluded$p = ["type", "variant", "size", "loading", "disabled", "tooltip", "onClick", "children"];
 /**
@@ -2943,11 +3000,13 @@ const MenuList = /*#__PURE__*/polymorphicComponent(function MenuList(_ref3, ref)
   } = React.useContext(MenuContext);
   return state.visible ? /*#__PURE__*/React.createElement(portal.Portal, {
     preserveTabOrder: true
+  }, /*#__PURE__*/React.createElement(FocusLock, {
+    returnFocus: true
   }, /*#__PURE__*/React.createElement(Ariakit.Menu, _objectSpread2(_objectSpread2({}, props), {}, {
     state: state,
     ref: ref,
     className: classNames('reactist_menulist', exceptionallySetClassName)
-  }))) : null;
+  })))) : null;
 });
 /**
  * A menu item inside a menu list. It can be selected by the user, triggering the `onSelect`
@@ -3110,6 +3169,212 @@ Select.defaultProps = {
   disabled: false
 };
 
+var modules_8f59d13b$1 = {"reach-portal":"_37bef8d8","fadein":"_77f9687f","fitContent":"bcc4e0a5","container":"d4832c2d","full":"b0c3b021","large":"_573d6aa5","medium":"_8550d996","small":"_43bb18f5","xlarge":"_57b4159d","overlay":"cb63f300","expand":"e741893e","buttonContainer":"bb1ce281","headerContent":"c5ef989c"};
+
+const _excluded$v = ["isOpen", "onDismiss", "height", "width", "exceptionallySetClassName", "autoFocus", "children"],
+      _excluded2$4 = ["children", "button", "withDivider", "exceptionallySetClassName"],
+      _excluded3$3 = ["exceptionallySetClassName", "children"],
+      _excluded4$2 = ["exceptionallySetClassName", "withDivider"],
+      _excluded5$2 = ["children"];
+const ModalContext$1 = /*#__PURE__*/React.createContext({
+  onDismiss: undefined,
+  height: 'fitContent'
+});
+
+function isNotInternalFrame$1(element) {
+  return !(element.ownerDocument === document && element.tagName.toLowerCase() === 'iframe');
+}
+/**
+ * Renders a modal that sits on top of the rest of the content in the entire page.
+ *
+ * Follows the WAI-ARIA Dialog (Modal) Pattern.
+ *
+ * @see DeprecatedModalHeader
+ * @see DeprecatedModalFooter
+ * @see DeprecatedModalBody
+ * @deprecated
+ */
+
+
+function DeprecatedModal(_ref) {
+  let {
+    isOpen,
+    onDismiss,
+    height = 'fitContent',
+    width = 'medium',
+    exceptionallySetClassName,
+    autoFocus = true,
+    children
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$v);
+
+  const contextValue = React.useMemo(() => ({
+    onDismiss,
+    height
+  }), [onDismiss, height]);
+  return /*#__PURE__*/React.createElement(dialog$1.DialogOverlay, {
+    isOpen: isOpen,
+    onDismiss: onDismiss,
+    dangerouslyBypassFocusLock // We're setting up our own focus lock below
+    : true,
+    className: classNames(modules_8f59d13b$1.overlay, modules_8f59d13b$1[height], modules_8f59d13b$1[width]),
+    "data-testid": "modal-overlay"
+  }, /*#__PURE__*/React.createElement(FocusLock, {
+    autoFocus: autoFocus,
+    whiteList: isNotInternalFrame$1,
+    returnFocus: true
+  }, /*#__PURE__*/React.createElement(dialog$1.DialogContent, _objectSpread2(_objectSpread2({}, props), {}, {
+    as: Box,
+    borderRadius: "full",
+    background: "default",
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+    height: height === 'expand' ? 'full' : undefined,
+    flexGrow: height === 'expand' ? 1 : 0,
+    className: [exceptionallySetClassName, modules_8f59d13b$1.container]
+  }), /*#__PURE__*/React.createElement(ModalContext$1.Provider, {
+    value: contextValue
+  }, children))));
+}
+/**
+ * The close button rendered by ModalHeader. Provided independently so that consumers can customize
+ * the button's label.
+ *
+ * @see DeprecatedModalHeader
+ */
+
+function DeprecatedModalCloseButton(props) {
+  const {
+    onDismiss
+  } = React.useContext(ModalContext$1);
+  const [includeInTabOrder, setIncludeInTabOrder] = React.useState(false);
+  const [isMounted, setIsMounted] = React.useState(false);
+  React.useEffect(function skipAutoFocus() {
+    if (isMounted) {
+      setIncludeInTabOrder(true);
+    } else {
+      setIsMounted(true);
+    }
+  }, [isMounted]);
+  return /*#__PURE__*/React.createElement(Button, _objectSpread2(_objectSpread2({}, props), {}, {
+    variant: "quaternary",
+    onClick: onDismiss,
+    icon: /*#__PURE__*/React.createElement(CloseIcon, null),
+    tabIndex: includeInTabOrder ? 0 : -1
+  }));
+}
+/**
+ * Renders a standard modal header area with an optional close button.
+ *
+ * @see DeprecatedModal
+ * @see DeprecatedModalFooter
+ * @see DeprecatedModalBody
+ */
+
+function DeprecatedModalHeader(_ref2) {
+  let {
+    children,
+    button = true,
+    withDivider = false,
+    exceptionallySetClassName
+  } = _ref2,
+      props = _objectWithoutProperties(_ref2, _excluded2$4);
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
+    as: "header",
+    paddingLeft: "large",
+    paddingRight: button === false || button === null ? 'large' : 'small',
+    paddingY: "small",
+    className: exceptionallySetClassName
+  }), /*#__PURE__*/React.createElement(Columns, {
+    space: "large",
+    alignY: "center"
+  }, /*#__PURE__*/React.createElement(Column, {
+    width: "auto"
+  }, children), button === false || button === null ? /*#__PURE__*/React.createElement("div", {
+    className: modules_8f59d13b$1.headerContent
+  }) : /*#__PURE__*/React.createElement(Column, {
+    width: "content",
+    exceptionallySetClassName: modules_8f59d13b$1.buttonContainer,
+    "data-testid": "button-container"
+  }, typeof button === 'boolean' ? /*#__PURE__*/React.createElement(DeprecatedModalCloseButton, {
+    "aria-label": "Close modal",
+    autoFocus: false
+  }) : button))), withDivider ? /*#__PURE__*/React.createElement(Divider, null) : null);
+}
+/**
+ * Renders the body of a modal.
+ *
+ * Convenient to use alongside ModalHeader and/or ModalFooter as needed. It ensures, among other
+ * things, that the contet of the modal body expands or contracts depending on the modal height
+ * setting or the size of the content. The body content also automatically scrolls when it's too
+ * large to fit the available space.
+ *
+ * @see DeprecatedModal
+ * @see DeprecatedModalHeader
+ * @see DeprecatedModalFooter
+ */
+
+function DeprecatedModalBody(_ref3) {
+  let {
+    exceptionallySetClassName,
+    children
+  } = _ref3,
+      props = _objectWithoutProperties(_ref3, _excluded3$3);
+
+  const {
+    height
+  } = React.useContext(ModalContext$1);
+  return /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
+    className: exceptionallySetClassName,
+    flexGrow: height === 'expand' ? 1 : 0,
+    height: height === 'expand' ? 'full' : undefined,
+    overflow: "auto"
+  }), /*#__PURE__*/React.createElement(Box, {
+    padding: "large",
+    paddingBottom: "xxlarge"
+  }, children));
+}
+/**
+ * Renders a standard modal footer area.
+ *
+ * @see DeprecatedModal
+ * @see DeprecatedModalHeader
+ * @see DeprecatedModalBody
+ */
+
+function DeprecatedModalFooter(_ref4) {
+  let {
+    exceptionallySetClassName,
+    withDivider = false
+  } = _ref4,
+      props = _objectWithoutProperties(_ref4, _excluded4$2);
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, withDivider ? /*#__PURE__*/React.createElement(Divider, null) : null, /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2({
+    as: "footer"
+  }, props), {}, {
+    className: exceptionallySetClassName,
+    padding: "large"
+  })));
+}
+/**
+ * A specific version of the ModalFooter, tailored to showing an inline list of actions (buttons).
+ * @see DeprecatedModalFooter
+ */
+
+function DeprecatedModalActions(_ref5) {
+  let {
+    children
+  } = _ref5,
+      props = _objectWithoutProperties(_ref5, _excluded5$2);
+
+  return /*#__PURE__*/React.createElement(DeprecatedModalFooter, _objectSpread2({}, props), /*#__PURE__*/React.createElement(Inline, {
+    align: "right",
+    space: "large"
+  }, children));
+}
+
 exports.Alert = Alert;
 exports.Avatar = Avatar;
 exports.Box = Box;
@@ -3123,6 +3388,12 @@ exports.Columns = Columns;
 exports.DeprecatedButton = Button$1;
 exports.DeprecatedDropdown = Dropdown;
 exports.DeprecatedInput = Input;
+exports.DeprecatedModal = DeprecatedModal;
+exports.DeprecatedModalActions = DeprecatedModalActions;
+exports.DeprecatedModalBody = DeprecatedModalBody;
+exports.DeprecatedModalCloseButton = DeprecatedModalCloseButton;
+exports.DeprecatedModalFooter = DeprecatedModalFooter;
+exports.DeprecatedModalHeader = DeprecatedModalHeader;
 exports.DeprecatedSelect = Select;
 exports.Divider = Divider;
 exports.Heading = Heading;