@conveyorhq/arrow-ds 1.62.0 → 2.0.0-beta.10

package/package.json

@@ -2,7 +2,7 @@
   "name": "@conveyorhq/arrow-ds",
   "author": "Conveyor",
   "license": "MIT",
-  "version": "1.62.0",
+  "version": "2.0.0-beta.10",
   "description": "Arrow Design System",
   "repository": "https://github.com/conveyor/arrow-ds",
   "publishConfig": {
@@ -41,7 +41,8 @@
     "react-focus-lock": "^2.2.1",
     "react-markdown": "^4.3.1",
     "react-merge-refs": "^1.1.0",
-    "react-popper-2": "npm:react-popper@^2.2.3",
+    "react-overlays": "^5.1.1",
+    "react-popper": "^2.2.5",
     "react-remove-scroll": "^2.2.0",
     "react-select": "^4.0.2",
     "react-spring": "^8.0.27",

package/public/components/Avatar/Avatar.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { BoxProps } from "../Box";
 import { SvgProps } from "../Svg";
 import { AvatarSize, AVATAR_TYPE } from "./types";
@@ -35,7 +36,7 @@ interface GravatarOrInitialsProps extends InitialsProps {
 }
 export declare const SystemAvatarConveyor: () => JSX.Element;
 export declare const SystemAvatarAptible: () => JSX.Element;
-export declare const AvatarWrapper: ({ children, size, square, bordered, className, ...rest }: SharedAvatarProps) => JSX.Element;
+export declare const AvatarWrapper: React.ForwardRefExoticComponent<Pick<SharedAvatarProps, "as" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "square" | "alt" | "size" | "bordered"> & React.RefAttributes<HTMLDivElement>>;
 export declare const Avatar: {
     ({ size: sizeProp, square, bordered, className, style, alt, ...rest }: AvatarProps): JSX.Element;
     Group: ({ children, spacing, size, className, ...rest }: import("./AvatarGroup").AvatarGroupProps) => JSX.Element;

package/public/components/Avatar/Avatar.js

@@ -132,15 +132,19 @@ const NonUserAvatarComponent = (type) => {
         system: react_1.default.createElement(SystemAvatar, null),
     }[type];
 };
-const AvatarWrapper = ({ children, size, square, bordered, className, ...rest }) => (react_1.default.createElement(Box_1.Box, Object.assign({ className: classnames_1.default(cn(), cn({ m: size }), square && cn({ m: "square" }), bordered && cn({ m: "bordered" }), className) }, rest), children));
-exports.AvatarWrapper = AvatarWrapper;
+exports.AvatarWrapper = react_1.default.forwardRef(({ children, size, square, bordered, className, ...rest }, forwardedRef) => (react_1.default.createElement(Box_1.Box, Object.assign({ ref: forwardedRef, className: classnames_1.default(cn(), cn({ m: size }), square && cn({ m: "square" }), bordered && cn({ m: "bordered" }), className) }, rest), children)));
 const Avatar = ({ size: sizeProp = "medium", square, bordered, className, style, alt, ...rest }) => {
     const avatarContext = react_1.useContext(context_1.AvatarContext);
     const size = avatarContext ? avatarContext.size : sizeProp;
     if (rest.type === types_1.AVATAR_TYPE.USER && (rest.email || rest.imgSrc)) {
         const { type, email, imgSrc, name, firstInitial, lastInitial, enableTooltip = false, ...userRest } = rest;
-        return (react_1.default.createElement(exports.AvatarWrapper, Object.assign({ size: size, square: square, bordered: bordered, className: className, style: style, title: alt }, userRest), enableTooltip && (name || email) ? (react_1.default.createElement(Tooltip_1.Tooltip, { placement: "top", referenceElement: react_1.default.createElement(Box_1.Box, { className: "h-full" },
-                react_1.default.createElement(UserAvatar, { email: email, imgSrc: imgSrc, name: name, firstInitial: firstInitial, lastInitial: lastInitial, size: size, alt: alt })) }, name || email)) : (react_1.default.createElement(UserAvatar, { email: email, imgSrc: imgSrc, name: name, firstInitial: firstInitial, lastInitial: lastInitial, size: size, alt: alt }))));
+        if (enableTooltip && (name || email)) {
+            return (react_1.default.createElement(Tooltip_1.Tooltip, { placement: "top", content: name || email },
+                react_1.default.createElement(exports.AvatarWrapper, Object.assign({ size: size, square: square, bordered: bordered, className: className, style: style, title: alt }, userRest),
+                    react_1.default.createElement(UserAvatar, { email: email, imgSrc: imgSrc, name: name, firstInitial: firstInitial, lastInitial: lastInitial, size: size, alt: alt }))));
+        }
+        return (react_1.default.createElement(exports.AvatarWrapper, Object.assign({ size: size, square: square, bordered: bordered, className: className, style: style, title: alt }, userRest),
+            react_1.default.createElement(UserAvatar, { email: email, imgSrc: imgSrc, name: name, firstInitial: firstInitial, lastInitial: lastInitial, size: size, alt: alt })));
     }
     const { type, ...nonUserRest } = rest;
     if (type === types_1.AVATAR_TYPE.USER) {

package/public/components/DateRangePicker/CustomDateRangeInput.js

@@ -32,7 +32,8 @@ const Tooltip_1 = require("../Tooltip");
 const cn = bem_1.bemHOF("DateRangePicker");
 const DATE_INPUT_PLACEHOLDER = "--/--/----";
 exports.CustomDateRangeInput = react_1.forwardRef(({ value, setValue, error, setError, ariaLabel, onFocus }, ref) => {
-    return (react_1.default.createElement(Tooltip_1.Tooltip, { placement: "top", className: cn({ e: "date-input-tooltip" }), isVisible: !!error, referenceElement: react_1.default.createElement(Box_1.Box, null,
+    return (react_1.default.createElement(Tooltip_1.Tooltip, { placement: "top", content: error },
+        react_1.default.createElement(Box_1.Box, null,
             react_1.default.createElement(Input_1.Input, { ref: ref, "aria-label": ariaLabel, variant: error ? types_1.STATUS_VARIANT.WARNING : undefined, placeholder: DATE_INPUT_PLACEHOLDER, className: cn({ e: "date-input" }), icon: Icon_1.ICON_TYPE.CALENDAR, value: value, onChange: (e) => setValue(e.currentTarget.value), onFocus: onFocus, onBlur: () => {
                     const parsedDate = utilities_1.parseDate(value);
                     if (!parsedDate) {
@@ -44,5 +45,5 @@ exports.CustomDateRangeInput = react_1.forwardRef(({ value, setValue, error, set
                     }
                     setError("");
                     setValue(date_fns_1.format(parsedDate, utilities_1.DATE_FORMAT));
-                } })) }, error));
+                } }))));
 });

package/public/components/Drawer/Drawer.js

@@ -30,7 +30,6 @@ const d3_ease_1 = require("d3-ease");
 const bem_1 = require("../../utilities/bem");
 const drawer_1 = require("../../contexts/drawer");
 const Box_1 = require("../Box");
-const TopBar_1 = require("../TopBar");
 const CloseButton_1 = require("../CloseButton");
 const Flex_1 = require("../Flex");
 const cn = bem_1.bemHOF("Drawer");
@@ -95,7 +94,10 @@ exports.WithDrawer = WithDrawer;
 const Drawer = ({ children, headingSlot, footerSlot, className, drawerSide, ...rest }) => {
     const { onClose } = react_1.useContext(drawer_1.DrawerContext);
     return (react_1.default.createElement(Flex_1.Flex, Object.assign({ className: classnames_1.default(cn({ e: "innerWrapper" }), className) }, rest),
-        react_1.default.createElement(TopBar_1.TopBar, { className: cn({ e: "topbar" }), leftSlot: headingSlot, rightSlot: react_1.default.createElement(CloseButton_1.CloseButton, { className: "text-icon -mr-8", onClick: onClose }) }),
+        react_1.default.createElement(Flex_1.Flex, { className: cn({ e: "topbar" }) },
+            react_1.default.createElement(Flex_1.Flex, { className: cn({ e: "topbar-left" }) }, headingSlot),
+            react_1.default.createElement(Flex_1.Flex, { className: cn({ e: "topbar-right" }) },
+                react_1.default.createElement(CloseButton_1.CloseButton, { className: cn({ e: "topbar-close" }), onClick: onClose }))),
         react_1.default.createElement(Box_1.Box, { className: cn({ e: "drawerContent" }) }, children),
         !!footerSlot && react_1.default.createElement(Box_1.Box, { className: cn({ e: "footer" }) }, footerSlot)));
 };

package/public/components/MarkdownEditor/MarkdownEditor.js

@@ -14,7 +14,6 @@ const hooks_1 = require("../../hooks");
 const types_1 = require("../../types");
 const Box_1 = require("../Box");
 const Flex_1 = require("../Flex");
-const Fixed_1 = require("../Fixed");
 const Link_1 = require("../Link");
 const Markdown_1 = require("../Markdown");
 const Portal_1 = require("../Portal");
@@ -35,7 +34,7 @@ const MarkdownEditor = (props) => {
     return isOpen ? (react_1.default.createElement(Portal_1.Portal, null,
         react_1.default.createElement(react_focus_lock_1.default, { returnFocus: true },
             react_1.default.createElement(react_remove_scroll_1.RemoveScroll, null,
-                react_1.default.createElement(Fixed_1.Fixed, { className: classnames_1.default(bem_1.bem(cn), showBackdrop && "bg-screen") },
+                react_1.default.createElement(Flex_1.Flex, { className: classnames_1.default(bem_1.bem(cn), showBackdrop && "bg-screen") },
                     react_1.default.createElement(Flex_1.Flex, { className: bem_1.bem(cn, { e: "popover" }) },
                         react_1.default.createElement(Box_1.Box, { className: "w-1/2" },
                             react_1.default.createElement(react_codemirror2_1.Controlled, { value: value, options: options, onBeforeChange: onBeforeChange })),

package/public/components/MarkdownEditor/MarkdownHelp.js

@@ -7,20 +7,17 @@ exports.MarkdownHelp = void 0;
 const react_1 = __importDefault(require("react"));
 const bem_1 = require("../../utilities/bem");
 const Box_1 = require("../Box");
-const Fixed_1 = require("../Fixed");
 const Heading_1 = require("../Heading");
 const Paragraph_1 = require("../Paragraph");
-const Relative_1 = require("../Relative");
-const Absolute_1 = require("../Absolute");
 const CloseButton_1 = require("../CloseButton");
 const cn = "MarkdownHelp";
 const CodeExamples = ({ heading, headingLevel = 3, children, }) => (react_1.default.createElement(react_1.default.Fragment, null,
     headingLevel === 3 ? (react_1.default.createElement(Heading_1.Heading.H3, { className: "text-gray-400" }, heading)) : (react_1.default.createElement(Heading_1.Heading.H4, { className: "text-gray-400" }, heading)),
     react_1.default.createElement(Box_1.Box, { as: "pre", className: bem_1.bem(cn, { e: "preformattedText" }) }, react_1.default.Children.map(children, (child) => (react_1.default.createElement(Box_1.Box, { key: child }, child))))));
 const MarkdownHelp = ({ isOpen, onClose, }) => {
-    return isOpen ? (react_1.default.createElement(Fixed_1.Fixed, { className: bem_1.bem(cn) },
-        react_1.default.createElement(Fixed_1.Fixed, { className: bem_1.bem(cn, { e: "panel" }) },
-            react_1.default.createElement(Relative_1.Relative, { className: bem_1.bem(cn, { e: "header" }) },
+    return isOpen ? (react_1.default.createElement(Box_1.Box, { className: bem_1.bem(cn) },
+        react_1.default.createElement(Box_1.Box, { className: bem_1.bem(cn, { e: "panel" }) },
+            react_1.default.createElement(Box_1.Box, { className: bem_1.bem(cn, { e: "header" }) },
                 react_1.default.createElement(CloseButton_1.CloseButton, { className: bem_1.bem(cn, { e: "closeButton" }), onClick: onClose })),
             react_1.default.createElement(Box_1.Box, { className: bem_1.bem(cn, { e: "scrollBox" }) },
                 react_1.default.createElement(Heading_1.Heading.H2, { className: "text-gray-400" }, "Markdown help"),
@@ -65,6 +62,6 @@ const MarkdownHelp = ({ isOpen, onClose, }) => {
                     "![alt text][image]",
                     "[image]: https://www.conveyorhq.com/image.jpg",
                 ]))),
-        react_1.default.createElement(Absolute_1.Absolute, { className: bem_1.bem(cn, { e: "cover" }), onClick: onClose }))) : null;
+        react_1.default.createElement(Box_1.Box, { className: bem_1.bem(cn, { e: "cover" }), onClick: onClose }))) : null;
 };
 exports.MarkdownHelp = MarkdownHelp;

package/public/components/MenuRenderer/MenuRenderer.js

@@ -26,7 +26,7 @@ exports.MenuRenderer = void 0;
 const react_1 = __importStar(require("react"));
 const auto_id_1 = require("@reach/auto-id");
 const react_focus_lock_1 = __importDefault(require("react-focus-lock"));
-const react_popper_2_1 = require("react-popper-2");
+const react_popper_1 = require("react-popper");
 const react_spring_1 = require("react-spring");
 const d3_ease_1 = require("d3-ease");
 const hooks_1 = require("../../hooks");
@@ -58,7 +58,7 @@ const MenuRenderer = ({ children, className, placement = "bottom-start", positio
     const [minWidth, setMinWidth] = react_1.useState(0);
     const [referenceElement, setReferenceElement] = react_1.useState(null);
     const [popperElement, setPopperElement] = react_1.useState(null);
-    const { styles, attributes, update } = react_popper_2_1.usePopper(referenceElement, popperElement, {
+    const { styles, attributes, update } = react_popper_1.usePopper(referenceElement, popperElement, {
         placement,
         modifiers: [...defaultPopperModifiers, ...popperModifiers],
         strategy: position,

package/public/components/Modal/Modal.d.ts

@@ -1,3 +1,5 @@
+import React from "react";
+import { ModalProps as RoModalProps } from "react-overlays/Modal";
 import { BoxProps } from "../Box";
 import { CloseButtonProps } from "../CloseButton";
 import { StackProps } from "../Stack";
@@ -6,18 +8,19 @@ export declare enum MODAL_SIZE {
     LARGE = "large",
     FULL = "full"
 }
-export interface ModalProps extends BoxProps {
+export interface ModalProps extends RoModalProps {
+    children?: React.ReactElement;
     title?: string;
     secondaryTitle?: string;
-    description?: string;
     isOpen?: boolean;
     onClose?: () => void;
     autoFocus?: boolean;
-    disableOutsideClick?: boolean;
+    enableOutsideClick?: boolean;
     disableEscClose?: boolean;
     hideCloseButton?: boolean;
     size?: MODAL_SIZE;
     center?: boolean;
+    disableBackdrop?: boolean;
     noHeader?: boolean;
 }
 export interface ModalBodyProps extends BoxProps {
@@ -36,7 +39,8 @@ export declare const ModalFooter: (props: BoxProps) => JSX.Element;
 export declare const ModalFooterMultiStep: ({ steps, currentStep, leftButtonLabel, rightButtonLabel, children, className, ...rest }: ModalFooterMultiStepProps) => JSX.Element;
 export declare const ModalCloseButton: ({ className, ...rest }: CloseButtonProps) => JSX.Element;
 export declare const Modal: {
-    (props: ModalProps): JSX.Element | null;
+    (props: ModalProps): JSX.Element;
+    Root: any;
     Tabs: (props: StackProps) => JSX.Element;
     Header: (props: BoxProps) => JSX.Element;
     Body: (props: ModalBodyProps) => JSX.Element;

package/public/components/Modal/Modal.js

@@ -1,43 +1,20 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Modal = exports.ModalCloseButton = exports.ModalFooterMultiStep = exports.ModalFooter = exports.ModalTabs = exports.ModalBody = exports.ModalHeader = exports.MODAL_SIZE = void 0;
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-const react_focus_lock_1 = __importDefault(require("react-focus-lock"));
-const react_remove_scroll_1 = require("react-remove-scroll");
+const Modal_1 = __importDefault(require("react-overlays/Modal"));
 const Box_1 = require("../Box");
 const Flex_1 = require("../Flex");
-const Portal_1 = require("../Portal");
-const Description_1 = require("../Description");
 const CloseButton_1 = require("../CloseButton");
 const Stack_1 = require("../Stack");
-const types_1 = require("../../types");
-const hooks_1 = require("../../hooks");
 const bem_1 = require("../../utilities/bem");
 const Tab_1 = require("../Tab");
 const Heading_1 = require("../Heading");
+const Overlay_1 = require("../Overlay");
 const context_1 = require("./context");
 const cn = "Modal";
 var MODAL_SIZE;
@@ -91,43 +68,29 @@ const ModalCloseButton = ({ className, ...rest }) => {
 };
 exports.ModalCloseButton = ModalCloseButton;
 const Modal = (props) => {
-    const { title, secondaryTitle, description, children, isOpen, onClose, autoFocus = false, disableOutsideClick = true, disableEscClose = false, hideCloseButton = false, size = MODAL_SIZE.DEFAULT, center = false, noHeader = false, className, ...rest } = props;
-    const modalElement = react_1.useRef(null);
+    const { title, secondaryTitle, children, isOpen, onClose, autoFocus = true, enableOutsideClick = false, disableEscClose = false, hideCloseButton = false, size = MODAL_SIZE.DEFAULT, center = false, disableBackdrop = false, noHeader = false, className, style, ...rest } = props;
     const showHeader = title || secondaryTitle || !hideCloseButton;
-    const [esc, setEsc] = react_1.useState(disableEscClose);
-    react_1.useEffect(() => {
-        setEsc(disableEscClose);
-    }, [disableEscClose]);
-    hooks_1.useKeyPress(types_1.KEY_CODE.ESC, () => {
-        if (!esc && onClose) {
-            onClose();
-        }
-    });
-    hooks_1.useOutsideClick(modalElement, () => {
-        if (!disableOutsideClick && onClose) {
-            onClose();
-        }
-    });
-    return isOpen ? (react_1.default.createElement(context_1.ModalContext.Provider, { value: { onClose } },
-        react_1.default.createElement(Portal_1.Portal, null,
-            react_1.default.createElement(react_focus_lock_1.default, { autoFocus: autoFocus, returnFocus: true },
-                react_1.default.createElement(react_remove_scroll_1.RemoveScroll, null,
-                    react_1.default.createElement(Box_1.Box, { className: bem_1.bem(`${cn}Container`) },
-                        react_1.default.createElement(Box_1.Box, Object.assign({ ref: modalElement, className: classnames_1.default([
-                                bem_1.bem(cn),
-                                bem_1.bem(cn, { m: size }),
-                                center && bem_1.bem(cn, { m: "center" }),
-                                className,
-                            ]) }, rest),
-                            !noHeader && showHeader && (react_1.default.createElement(exports.ModalHeader, null,
-                                title && react_1.default.createElement(Heading_1.Heading.H2, null, title),
-                                react_1.default.createElement(Stack_1.Stack, { className: "flex-shrink-0", spacing: 5 },
-                                    secondaryTitle && (react_1.default.createElement(Heading_1.Heading.H5, { className: "text-gray-600" }, secondaryTitle)),
-                                    !hideCloseButton && react_1.default.createElement(exports.ModalCloseButton, null)))),
-                            description && (react_1.default.createElement(Description_1.Description, { className: bem_1.bem(cn, { e: "description" }) }, description)),
-                            children))))))) : null;
+    return (react_1.default.createElement(context_1.ModalContext.Provider, { value: { onClose } },
+        react_1.default.createElement(Modal_1.default, Object.assign({ className: classnames_1.default([
+                bem_1.bem(`${cn}Container`),
+                enableOutsideClick && "pointer-events-none",
+            ]), show: isOpen, onHide: onClose, autoFocus: autoFocus, keyboard: !disableEscClose, renderBackdrop: disableBackdrop ? undefined : (p) => react_1.default.createElement(Overlay_1.Overlay, Object.assign({}, p)) }, rest),
+            react_1.default.createElement(Box_1.Box, { className: classnames_1.default([
+                    bem_1.bem(cn),
+                    bem_1.bem(cn, { m: size }),
+                    center && bem_1.bem(cn, { m: "center" }),
+                    enableOutsideClick && "pointer-events-auto",
+                    className,
+                ]), style: style },
+                !noHeader && showHeader && (react_1.default.createElement(exports.ModalHeader, null,
+                    title && react_1.default.createElement(Heading_1.Heading.H2, null, title),
+                    react_1.default.createElement(Stack_1.Stack, { className: "flex-shrink-0", spacing: 5 },
+                        secondaryTitle && (react_1.default.createElement(Heading_1.Heading.H5, { className: "text-gray-600" }, secondaryTitle)),
+                        !hideCloseButton && react_1.default.createElement(exports.ModalCloseButton, null)))),
+                children))));
 };
 exports.Modal = Modal;
+exports.Modal.Root = exports.Modal;
 exports.Modal.Tabs = exports.ModalTabs;
 exports.Modal.Header = exports.ModalHeader;
 exports.Modal.Body = exports.ModalBody;

package/public/components/Overlay/Overlay.js

@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Overlay = void 0;
 const react_1 = __importDefault(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-const Fixed_1 = require("../Fixed");
+const Box_1 = require("../Box");
 const bem_1 = require("../../utilities/bem");
 const cn = "Overlay";
 const Overlay = (props) => {
     const { className, ...rest } = props;
-    return react_1.default.createElement(Fixed_1.Fixed, Object.assign({ className: classnames_1.default(bem_1.bem(cn), className) }, rest));
+    return react_1.default.createElement(Box_1.Box, Object.assign({ className: classnames_1.default(bem_1.bem(cn), className) }, rest));
 };
 exports.Overlay = Overlay;

package/public/components/Popover/Popover.js

@@ -25,7 +25,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Popover = void 0;
 const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-const react_popper_2_1 = require("react-popper-2");
+const react_popper_1 = require("react-popper");
 const Box_1 = require("../Box");
 const Portal_1 = require("../Portal");
 const bem_1 = require("../../utilities/bem");
@@ -62,13 +62,13 @@ const Popover = ({ removePadding = false, ...props }) => {
             },
         ];
         const propModifiers = popperModifiers || [];
-        return (react_1.default.createElement(react_popper_2_1.Manager, null,
-            isVisible && (react_1.default.createElement(react_popper_2_1.Popper, { placement: placement, modifiers: [...defaultPopperModifiers, ...propModifiers] }, ({ ref, style, placement: popperPlacement, arrowProps, update, }) => (react_1.default.createElement(InlinePopover, Object.assign({ ref: ref, style: {
+        return (react_1.default.createElement(react_popper_1.Manager, null,
+            isVisible && (react_1.default.createElement(react_popper_1.Popper, { placement: placement, modifiers: [...defaultPopperModifiers, ...propModifiers] }, ({ ref, style, placement: popperPlacement, arrowProps, update, }) => (react_1.default.createElement(InlinePopover, Object.assign({ ref: ref, style: {
                     ...style,
                     ...styleProp,
                 }, className: className, "data-placement": popperPlacement, hasPortal: true, removePadding: removePadding }, rest),
                 react_1.default.createElement(ChildrenWithArrow, { popperPlacement: popperPlacement, arrowProps: arrowProps, update: update, showArrow: showArrow }, children))))),
-            react_1.default.createElement(react_popper_2_1.Reference, null, ({ ref }) => react_1.cloneElement(referenceElement, {
+            react_1.default.createElement(react_popper_1.Reference, null, ({ ref }) => react_1.cloneElement(referenceElement, {
                 ref,
             }))));
     }

package/public/components/SelectNew/hooks/useSelectLayout.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSelectLayout = void 0;
 const classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("react");
-const react_popper_2_1 = require("react-popper-2");
+const react_popper_1 = require("react-popper");
 const types_1 = require("../../../types");
 const utilities_1 = require("../../../utilities");
 const FormGroupContext_1 = require("../../FormGroup/FormGroupContext");
@@ -58,7 +58,7 @@ function useSelectLayout({ isOpen, hasSearch, isDisabled, variantProp, getLabelP
     const [callbackElement, setCallbackElement] = react_1.useState(null);
     const isListRendered = callbackElement !== null;
     const inputRef = react_1.useRef(null);
-    const { styles, attributes, update } = react_popper_2_1.usePopper(referenceElement, popperRef.current, {
+    const { styles, attributes, update } = react_popper_1.usePopper(referenceElement, popperRef.current, {
         placement: initialPlacement,
         modifiers: popperModifiers,
     });

package/public/components/Stack/Stack.js

@@ -32,7 +32,7 @@ const cn = "Stack";
 exports.Stack = react_1.forwardRef(({ className, orientation = types_1.ORIENTATION.HORIZONTAL, spacing = 2, justify = types_1.JUSTIFY.START, reverse = false, children, ...rest }, ref) => {
     return (react_1.default.createElement(Flex_1.Flex, Object.assign({ ref: ref, className: classnames_1.default([
             utilities_1.bem(cn, { m: orientation }),
-            spacing > 0 && utilities_1.bem(cn, { m: `spacing-${spacing}` }),
+            `gap-${spacing}`,
             reverse && utilities_1.bem(cn, { m: "reverse" }),
             `justify-${justify}`,
             className,

package/public/components/Table/FilterDropdown.js

@@ -26,7 +26,7 @@ exports.FilterDropdown = void 0;
 const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const react_focus_lock_1 = __importDefault(require("react-focus-lock"));
-const react_popper_2_1 = require("react-popper-2");
+const react_popper_1 = require("react-popper");
 const bem_1 = require("../../utilities/bem");
 const hooks_1 = require("../../hooks");
 const Icon_1 = require("../Icon");
@@ -89,9 +89,9 @@ const FilterDropdown = ({ isVisible = false, filterApplied = false, onSetVisible
     const getButtonElement = (buttonElement) => {
         buttonRef.current = buttonElement;
     };
-    return (react_1.default.createElement(react_popper_2_1.Manager, null,
+    return (react_1.default.createElement(react_popper_1.Manager, null,
         isVisible && (react_1.default.createElement(Portal_1.Portal, null,
-            react_1.default.createElement(react_popper_2_1.Popper, { placement: "bottom", innerRef: getPopperElement, modifiers: [
+            react_1.default.createElement(react_popper_1.Popper, { placement: "bottom", innerRef: getPopperElement, modifiers: [
                     {
                         name: "offset",
                         options: {
@@ -99,6 +99,6 @@ const FilterDropdown = ({ isVisible = false, filterApplied = false, onSetVisible
                         },
                     },
                 ] }, ({ ref, placement, style }) => (react_1.default.createElement(FilterMenu, { ref: ref, buttonRef: buttonRef, menuRef: menuRef, placement: placement, className: className, style: style, onSetVisible: onSetVisible, searchInputValue: searchInputValue, onFilterInputChange: onFilterInputChange, onFilterSelectAll: onFilterSelectAll, onFilterClear: onFilterClear, filterOptions: filterOptions, filterControl: filterControl, hideFilterSearch: hideFilterSearch }))))),
-        react_1.default.createElement(react_popper_2_1.Reference, { innerRef: getButtonElement }, ({ ref }) => (react_1.default.createElement(FilterToggleButton, { ref: ref, onSetVisible: onSetVisible, isVisible: isVisible, filterApplied: filterApplied })))));
+        react_1.default.createElement(react_popper_1.Reference, { innerRef: getButtonElement }, ({ ref }) => (react_1.default.createElement(FilterToggleButton, { ref: ref, onSetVisible: onSetVisible, isVisible: isVisible, filterApplied: filterApplied })))));
 };
 exports.FilterDropdown = FilterDropdown;

package/public/components/Toast/Toast.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from "react";
 import { BoxProps } from "../Box";
 import { STATUS_VARIANT } from "../../types";
-import { ArrowLinkProps } from "../ArrowLink";
+import { LinkProps } from "../Link";
 declare type ToastPosition = "top-right";
 export interface ToastProps extends BoxProps {
     title: string;
@@ -22,11 +22,11 @@ export interface ShowToastProps {
     className?: string;
     variant?: STATUS_VARIANT;
 }
-export declare const ToastLink: ({ children, className, ...rest }: ArrowLinkProps) => JSX.Element;
+export declare const ToastLink: ({ className, children, ...rest }: LinkProps) => JSX.Element;
 export declare const ToastMessage: ({ children, withIcon, className, }: ToastMessageProps) => JSX.Element;
 export declare const Toast: {
     (props: ToastProps): JSX.Element;
-    Link: ({ children, className, ...rest }: ArrowLinkProps) => JSX.Element;
+    Link: ({ className, children, ...rest }: LinkProps) => JSX.Element;
     Message: ({ children, withIcon, className, }: ToastMessageProps) => JSX.Element;
 };
 export declare const showToast: ({ position, duration, variant, title, content, className, ...rest }: ShowToastProps) => any;

package/public/components/Toast/Toast.js

@@ -33,9 +33,13 @@ const Icon_1 = require("../Icon");
 const bem_1 = require("../../utilities/bem");
 const types_1 = require("../../types");
 const status_1 = require("../../contexts/status");
-const ArrowLink_1 = require("../ArrowLink");
+const Link_1 = require("../Link");
 const cn = "Toast";
-const ToastLink = ({ children, className, ...rest }) => (react_1.default.createElement(ArrowLink_1.ArrowLink, Object.assign({ className: classnames_1.default(bem_1.bem(cn, { e: "link" }), className) }, rest), children));
+const ToastLink = ({ className, children, ...rest }) => {
+    return (react_1.default.createElement(Link_1.Link, Object.assign({ className: classnames_1.default(bem_1.bem(cn, { e: "link" }), className), noStyles: true }, rest),
+        react_1.default.createElement("span", { className: "mr-1" }, children),
+        react_1.default.createElement(Icon_1.Icon, { icon: Icon_1.ICON_TYPE.LONG_ARROW_ALT_RIGHT })));
+};
 exports.ToastLink = ToastLink;
 const ToastMessage = ({ children, withIcon, className, }) => {
     const variant = react_1.useContext(status_1.StatusContext);

package/public/components/Tooltip/Tooltip.d.ts

@@ -1,5 +1,9 @@
-import { PopoverTooltipSharedProps } from "../Popover";
-export interface TooltipProps extends PopoverTooltipSharedProps {
+import React from "react";
+import { PopperPlacement } from "../../types";
+export declare type TooltipProps = {
+    children: React.ReactElement;
+    content?: React.ReactNode;
+    placement?: PopperPlacement;
     delay?: number;
-}
-export declare const Tooltip: (props: TooltipProps) => JSX.Element;
+};
+export declare const Tooltip: ({ children, content, placement, delay, }: TooltipProps) => JSX.Element;