@conveyorhq/arrow-ds 2.0.0-beta.6 → 2.0.0-beta.7

package/public/components/Drawer/Drawer.js

@@ -24,13 +24,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Drawer = exports.WithDrawer = void 0;
 const react_1 = __importStar(require("react"));
-const react_spring_1 = require("react-spring");
+const web_1 = require("@react-spring/web");
 const classnames_1 = __importDefault(require("classnames"));
 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");
@@ -46,7 +45,7 @@ const calculateTransformValue = (isOpen, drawerOnRight, drawerWidth) => {
 const WithDrawer = ({ drawerSlot, onClose, isOpen = false, fixedSlotTop, fixedSlotBottom, scrollableSlot, drawerSide = "left", noAnimation = false, drawerWidth = DEFAULT_DRAWER_WIDTH, }) => {
     const drawerOnRight = drawerSide === "right";
     const [isClosedAtRest, setIsClosedAtRest] = react_1.useState(false);
-    const { transform, paddingLeft, paddingRight } = react_spring_1.useSpring({
+    const { transform, paddingLeft, paddingRight } = web_1.useSpring({
         transform: calculateTransformValue(isOpen, drawerOnRight, drawerWidth),
         paddingLeft: isOpen && !drawerOnRight ? drawerWidth : 0,
         paddingRight: isOpen && drawerOnRight ? drawerWidth : 0,
@@ -64,7 +63,7 @@ const WithDrawer = ({ drawerSlot, onClose, isOpen = false, fixedSlotTop, fixedSl
             easing: d3_ease_1.easeCubicInOut,
         },
     });
-    const { transform: transformReverse } = react_spring_1.useSpring({
+    const { transform: transformReverse } = web_1.useSpring({
         transform: isOpen && !drawerOnRight
             ? `translateX(${drawerWidth}px)`
             : "translateX(0px)",
@@ -80,22 +79,25 @@ const WithDrawer = ({ drawerSlot, onClose, isOpen = false, fixedSlotTop, fixedSl
         react_1.default.createElement(Box_1.Box, { className: classnames_1.default(cn(), {
                 [cn({ m: "isOpen" })]: isOpen,
             }) },
-            react_1.default.createElement(react_spring_1.animated.div, { className: classnames_1.default(cn({ e: "wrapper" }), { drawerOnRight }), style: wrapperCombinedStyle }, drawerSlot),
+            react_1.default.createElement(web_1.animated.div, { className: classnames_1.default(cn({ e: "wrapper" }), { drawerOnRight }), style: wrapperCombinedStyle }, drawerSlot),
             react_1.default.createElement(Flex_1.Flex, { className: classnames_1.default(cn({ e: "onScreenContent" }), {
                     drawerOnRight,
                 }) },
-                fixedSlotTop && (react_1.default.createElement(react_spring_1.animated.div, { style: { paddingLeft, paddingRight }, className: cn({ e: "fixedSlot" }) }, fixedSlotTop)),
-                scrollableSlot && (react_1.default.createElement(react_spring_1.animated.div, { style: {
+                fixedSlotTop && (react_1.default.createElement(web_1.animated.div, { style: { paddingLeft, paddingRight }, className: cn({ e: "fixedSlot" }) }, fixedSlotTop)),
+                scrollableSlot && (react_1.default.createElement(web_1.animated.div, { style: {
                         transform: transformReverse,
                         width: scrollableSlotPaddingToInterpolate.interpolate((w) => `calc(100% - ${w}px)`),
                     }, className: cn({ e: "scrollableSlot" }) }, scrollableSlot)),
-                fixedSlotBottom && (react_1.default.createElement(react_spring_1.animated.div, { style: { paddingLeft, paddingRight }, className: cn({ e: "fixedSlot" }) }, fixedSlotBottom))))));
+                fixedSlotBottom && (react_1.default.createElement(web_1.animated.div, { style: { paddingLeft, paddingRight }, className: cn({ e: "fixedSlot" }) }, fixedSlotBottom))))));
 };
 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/Flex/Flex.js

@@ -26,7 +26,6 @@ exports.Flex = void 0;
 const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const Box_1 = require("../Box");
-exports.Flex = react_1.forwardRef((props, ref) => {
-    const { className, ...rest } = props;
-    return react_1.default.createElement(Box_1.Box, Object.assign({ ref: ref }, rest, { className: classnames_1.default("flex", className) }));
-});
+const utilities_1 = require("../../utilities");
+const cn = utilities_1.bemHOF("Flex");
+exports.Flex = react_1.forwardRef(({ className, ...rest }, ref) => (react_1.default.createElement(Box_1.Box, Object.assign({ className: classnames_1.default([cn(), className]), ref: ref }, rest))));

package/public/components/Grid/Grid.d.ts

@@ -1,8 +1,8 @@
 import { ForwardRefExoticComponent } from "react";
 import { BoxProps } from "../Box";
 interface GridProps extends BoxProps {
-    columns?: string[];
-    rows?: string[];
+    columns?: string | string[];
+    rows?: string | string[];
     gap?: string;
 }
 interface GridItemProps extends BoxProps {

package/public/components/Grid/Grid.js

@@ -26,6 +26,8 @@ exports.Grid = exports.GridItem = void 0;
 const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const Box_1 = require("../Box");
+const utilities_1 = require("../../utilities");
+const cn = utilities_1.bemHOF("Grid");
 exports.GridItem = react_1.forwardRef((props, ref) => {
     const { className, style, column: gridColumn, row: gridRow, area: gridArea, ...rest } = props;
     const styles = gridArea
@@ -42,12 +44,16 @@ exports.GridItem = react_1.forwardRef((props, ref) => {
 });
 exports.Grid = react_1.forwardRef((props, ref) => {
     const { className, style, columns = [], rows = [], gap, ...rest } = props;
+    const gridTemplateColumns = Array.isArray(columns)
+        ? columns.join(" ")
+        : columns;
+    const gridTemplateRows = Array.isArray(rows) ? rows.join(" ") : rows;
     const styles = {
-        gridTemplateColumns: columns.join(" "),
-        gridTemplateRows: rows.join(" "),
+        gridTemplateColumns,
+        gridTemplateRows,
         gap,
         ...style,
     };
-    return (react_1.default.createElement(Box_1.Box, Object.assign({ className: classnames_1.default("grid", className), ref: ref, style: styles }, rest)));
+    return (react_1.default.createElement(Box_1.Box, Object.assign({ className: classnames_1.default(cn(), className), ref: ref, style: styles }, rest)));
 });
 exports.Grid.Item = exports.GridItem;

package/public/components/Icon/Icon.d.ts

@@ -2,6 +2,8 @@ import React, { HTMLAttributes } from "react";
 import { FlipProp } from "@fortawesome/fontawesome-svg-core";
 import { STATUS_VARIANT } from "../../types";
 export declare enum CUSTOM_ICON_TYPE {
+    ARROW_TO_BOTTOM = "arrow-to-bottom",
+    COMMENT_ALT_CHECK = "comment-alt-check",
     DIALOG_CHECK = "dialog-check",
     SCROLL = "scroll",
     SPARKLE = "sparkle",
@@ -16,11 +18,15 @@ export declare enum ICON_TYPE {
     ARROW_UP = "arrow-up",
     BACKWARD = "backward",
     BAN = "ban",
+    BATTERY_HALF = "battery-half",
+    BED = "bed",
+    BELL = "bell",
     BOLT = "bolt",
     CALENDAR = "calendar",
     CALCULATOR = "calculator",
     CARET_DOWN = "caret-down",
     CARET_UP = "caret-up",
+    CHART_LINE = "chart-line",
     CHECK = "check",
     CHECK_CIRCLE = "check-circle",
     CHEVRON_DOWN = "chevron-down",
@@ -35,9 +41,11 @@ export declare enum ICON_TYPE {
     COLUMNS = "columns",
     COMMENT_ALT = "comment-alt",
     COMPRESS = "compress",
+    CROWN = "crown",
     ELLIPSIS_H = "ellipsis-h",
     ELLIPSIS_V = "ellipsis-v",
     ENVELOPE = "envelope",
+    EXCLAMATION_CIRCLE = "exclamation-circle",
     EXCLAMATION_TRIANGLE = "exclamation-triangle",
     EXPAND = "expand",
     EXTERNAL_LINK_ALT = "external-link-alt",
@@ -67,6 +75,7 @@ export declare enum ICON_TYPE {
     MAGIC = "magic",
     MAP_SIGNS = "map-signs",
     MINUS = "minus",
+    MOUSE_POINTER = "mouse-pointer",
     PAPERCLIP = "paperclip",
     PAUSE = "pause",
     PEN = "pen",
@@ -74,10 +83,14 @@ export declare enum ICON_TYPE {
     PLUS = "plus",
     PLUS_CIRCLE = "plus-circle",
     POO_STORM = "poo-storm",
+    QUESTION = "question",
     QUESTION_CIRCLE = "question-circle",
     SCROLL = "scroll",
     SEARCH = "search",
+    SHARE_ALT = "share-alt",
     SHIELD_ALT = "shield-alt",
+    SIGN_OUT_ALT = "sign-out-alt",
+    SIGNATURE = "signature",
     SLIDERS_H = "sliders-h",
     SORT = "sort",
     SORT_DOWN = "sort-down",
@@ -125,4 +138,5 @@ export interface StatusIconProps extends SharedFaIconProps {
 }
 export declare const Icon: React.ForwardRefExoticComponent<Pick<IconProps, string | number> & React.RefAttributes<HTMLSpanElement>>;
 export declare const StatusIcon: React.ForwardRefExoticComponent<Pick<StatusIconProps, string | number> & React.RefAttributes<HTMLSpanElement>>;
+export declare type IconType = ICON_TYPE | CUSTOM_ICON_TYPE;
 export {};

package/public/components/Icon/Icon.js

@@ -31,6 +31,7 @@ const faFileAlt_1 = require("@fortawesome/free-regular-svg-icons/faFileAlt");
 const faQuestionCircle_1 = require("@fortawesome/free-regular-svg-icons/faQuestionCircle");
 const faUser_1 = require("@fortawesome/free-regular-svg-icons/faUser");
 const faCheckCircle_1 = require("@fortawesome/free-regular-svg-icons/faCheckCircle");
+const faCircle_1 = require("@fortawesome/free-regular-svg-icons/faCircle");
 const faTimesCircle_1 = require("@fortawesome/free-regular-svg-icons/faTimesCircle");
 const faClock_1 = require("@fortawesome/free-regular-svg-icons/faClock");
 const faKeyboard_1 = require("@fortawesome/free-regular-svg-icons/faKeyboard");
@@ -44,27 +45,34 @@ const faArrowRight_1 = require("@fortawesome/free-solid-svg-icons/faArrowRight")
 const faArrowUp_1 = require("@fortawesome/free-solid-svg-icons/faArrowUp");
 const faBackward_1 = require("@fortawesome/free-solid-svg-icons/faBackward");
 const faBan_1 = require("@fortawesome/free-solid-svg-icons/faBan");
+const faBatteryHalf_1 = require("@fortawesome/free-solid-svg-icons/faBatteryHalf");
+const faBed_1 = require("@fortawesome/free-solid-svg-icons/faBed");
+const faBell_1 = require("@fortawesome/free-solid-svg-icons/faBell");
 const faBolt_1 = require("@fortawesome/free-solid-svg-icons/faBolt");
 const faCalculator_1 = require("@fortawesome/free-solid-svg-icons/faCalculator");
 const faCalendar_1 = require("@fortawesome/free-solid-svg-icons/faCalendar");
 const faCaretDown_1 = require("@fortawesome/free-solid-svg-icons/faCaretDown");
 const faCaretUp_1 = require("@fortawesome/free-solid-svg-icons/faCaretUp");
+const faChartLine_1 = require("@fortawesome/free-solid-svg-icons/faChartLine");
 const faCheck_1 = require("@fortawesome/free-solid-svg-icons/faCheck");
 const faCheckCircle_2 = require("@fortawesome/free-solid-svg-icons/faCheckCircle");
 const faChevronDown_1 = require("@fortawesome/free-solid-svg-icons/faChevronDown");
 const faChevronLeft_1 = require("@fortawesome/free-solid-svg-icons/faChevronLeft");
 const faChevronRight_1 = require("@fortawesome/free-solid-svg-icons/faChevronRight");
 const faChevronUp_1 = require("@fortawesome/free-solid-svg-icons/faChevronUp");
-const faCircle_1 = require("@fortawesome/free-solid-svg-icons/faCircle");
+const faCircle_2 = require("@fortawesome/free-solid-svg-icons/faCircle");
 const faCircleNotch_1 = require("@fortawesome/free-solid-svg-icons/faCircleNotch");
 const faClipboard_1 = require("@fortawesome/free-solid-svg-icons/faClipboard");
+const faClock_2 = require("@fortawesome/free-solid-svg-icons/faClock");
 const faCog_1 = require("@fortawesome/free-solid-svg-icons/faCog");
 const faColumns_1 = require("@fortawesome/free-solid-svg-icons/faColumns");
 const faCommentAlt_1 = require("@fortawesome/free-solid-svg-icons/faCommentAlt");
 const faCompress_1 = require("@fortawesome/free-solid-svg-icons/faCompress");
+const faCrown_1 = require("@fortawesome/free-solid-svg-icons/faCrown");
 const faEllipsisH_1 = require("@fortawesome/free-solid-svg-icons/faEllipsisH");
 const faEllipsisV_1 = require("@fortawesome/free-solid-svg-icons/faEllipsisV");
 const faEnvelope_1 = require("@fortawesome/free-solid-svg-icons/faEnvelope");
+const faExclamationCircle_1 = require("@fortawesome/free-solid-svg-icons/faExclamationCircle");
 const faExclamationTriangle_1 = require("@fortawesome/free-solid-svg-icons/faExclamationTriangle");
 const faExpand_1 = require("@fortawesome/free-solid-svg-icons/faExpand");
 const faExternalLinkAlt_1 = require("@fortawesome/free-solid-svg-icons/faExternalLinkAlt");
@@ -93,6 +101,7 @@ const faLongArrowAltRight_1 = require("@fortawesome/free-solid-svg-icons/faLongA
 const faMagic_1 = require("@fortawesome/free-solid-svg-icons/faMagic");
 const faMapSigns_1 = require("@fortawesome/free-solid-svg-icons/faMapSigns");
 const faMinus_1 = require("@fortawesome/free-solid-svg-icons/faMinus");
+const faMousePointer_1 = require("@fortawesome/free-solid-svg-icons/faMousePointer");
 const faPaperclip_1 = require("@fortawesome/free-solid-svg-icons/faPaperclip");
 const faPause_1 = require("@fortawesome/free-solid-svg-icons/faPause");
 const faPen_1 = require("@fortawesome/free-solid-svg-icons/faPen");
@@ -100,10 +109,14 @@ const faPlay_1 = require("@fortawesome/free-solid-svg-icons/faPlay");
 const faPlus_1 = require("@fortawesome/free-solid-svg-icons/faPlus");
 const faPlusCircle_1 = require("@fortawesome/free-solid-svg-icons/faPlusCircle");
 const faPooStorm_1 = require("@fortawesome/free-solid-svg-icons/faPooStorm");
+const faQuestion_1 = require("@fortawesome/free-solid-svg-icons/faQuestion");
 const faQuestionCircle_2 = require("@fortawesome/free-solid-svg-icons/faQuestionCircle");
 const faScroll_1 = require("@fortawesome/free-solid-svg-icons/faScroll");
 const faSearch_1 = require("@fortawesome/free-solid-svg-icons/faSearch");
+const faShareAlt_1 = require("@fortawesome/free-solid-svg-icons/faShareAlt");
 const faShieldAlt_1 = require("@fortawesome/free-solid-svg-icons/faShieldAlt");
+const faSignOutAlt_1 = require("@fortawesome/free-solid-svg-icons/faSignOutAlt");
+const faSignature_1 = require("@fortawesome/free-solid-svg-icons/faSignature");
 const faSlidersH_1 = require("@fortawesome/free-solid-svg-icons/faSlidersH");
 const faSort_1 = require("@fortawesome/free-solid-svg-icons/faSort");
 const faSortDown_1 = require("@fortawesome/free-solid-svg-icons/faSortDown");
@@ -114,6 +127,8 @@ const faStar_2 = require("@fortawesome/free-solid-svg-icons/faStar");
 const faSync_1 = require("@fortawesome/free-solid-svg-icons/faSync");
 const faTasks_1 = require("@fortawesome/free-solid-svg-icons/faTasks");
 const faThLarge_1 = require("@fortawesome/free-solid-svg-icons/faThLarge");
+const faThumbsDown_2 = require("@fortawesome/free-solid-svg-icons/faThumbsDown");
+const faThumbsUp_2 = require("@fortawesome/free-solid-svg-icons/faThumbsUp");
 const faTicketAlt_1 = require("@fortawesome/free-solid-svg-icons/faTicketAlt");
 const faTimes_1 = require("@fortawesome/free-solid-svg-icons/faTimes");
 const faTrash_1 = require("@fortawesome/free-solid-svg-icons/faTrash");
@@ -127,9 +142,11 @@ const status_1 = require("../../contexts/status");
 const types_1 = require("../../types");
 const utilities_1 = require("../../utilities");
 const cn = utilities_1.bemHOF("Icon");
-fontawesome_svg_core_1.library.add(faArchive_1.faArchive, faArrowDown_1.faArrowDown, faArrowLeft_1.faArrowLeft, faArrowRight_1.faArrowRight, faArrowUp_1.faArrowUp, faBackward_1.faBackward, faBan_1.faBan, faBolt_1.faBolt, faCalculator_1.faCalculator, faCalendar_1.faCalendar, faCaretDown_1.faCaretDown, faCaretUp_1.faCaretUp, faCheck_1.faCheck, faCheckCircle_2.faCheckCircle, faCheckCircle_1.faCheckCircle, faChevronDown_1.faChevronDown, faChevronLeft_1.faChevronLeft, faChevronRight_1.faChevronRight, faChevronUp_1.faChevronUp, faCircle_1.faCircle, faCircleNotch_1.faCircleNotch, faClipboard_1.faClipboard, faClock_1.faClock, faCog_1.faCog, faColumns_1.faColumns, faCommentAlt_1.faCommentAlt, faCompress_1.faCompress, faEllipsisH_1.faEllipsisH, faEllipsisV_1.faEllipsisV, faEnvelope_1.faEnvelope, faExclamationTriangle_1.faExclamationTriangle, faExpand_1.faExpand, faExternalLinkAlt_1.faExternalLinkAlt, faExternalLinkSquareAlt_1.faExternalLinkSquareAlt, faEye_1.faEye, faEyeSlash_1.faEyeSlash, faFastBackward_1.faFastBackward, faFastForward_1.faFastForward, faFileAlt_1.faFileAlt, faFileAlt_2.faFileAlt, faFileImport_1.faFileImport, faFileSignature_1.faFileSignature, faFilter_1.faFilter, faFlag_1.faFlag, faFolder_1.faFolder, faForward_1.faForward, faGripLines_1.faGripLines, faGripLinesVertical_1.faGripLinesVertical, faHashtag_1.faHashtag, faInfoCircle_1.faInfoCircle, faKey_1.faKey, faKeyboard_1.faKeyboard, faLayerGroup_1.faLayerGroup, faLevelUpAlt_1.faLevelUpAlt, faListUl_1.faListUl, faLock_1.faLock, faLongArrowAltRight_1.faLongArrowAltRight, faMagic_1.faMagic, faMapSigns_1.faMapSigns, faMinus_1.faMinus, faPaperclip_1.faPaperclip, faPause_1.faPause, faPen_1.faPen, faPlay_1.faPlay, faPlus_1.faPlus, faPlusCircle_1.faPlusCircle, faPooStorm_1.faPooStorm, faQuestionCircle_2.faQuestionCircle, faQuestionCircle_1.faQuestionCircle, faScroll_1.faScroll, faSearch_1.faSearch, faShieldAlt_1.faShieldAlt, faSlidersH_1.faSlidersH, faSort_1.faSort, faSortDown_1.faSortDown, faSortUp_1.faSortUp, faSpinner_1.faSpinner, faSquare_1.faSquare, faStar_1.faStar, faStar_2.faStar, faSync_1.faSync, faTasks_1.faTasks, faThLarge_1.faThLarge, faThumbsDown_1.faThumbsDown, faThumbsUp_1.faThumbsUp, faTicketAlt_1.faTicketAlt, faTimes_1.faTimes, faTimesCircle_1.faTimesCircle, faTrash_1.faTrash, faUser_2.faUser, faUserAstronaut_1.faUserAstronaut, faUserPlus_1.faUserPlus, faUser_1.faUser, faUsers_1.faUsers, faUserFriends_1.faUserFriends);
+fontawesome_svg_core_1.library.add(faArchive_1.faArchive, faArrowDown_1.faArrowDown, faArrowLeft_1.faArrowLeft, faArrowRight_1.faArrowRight, faArrowUp_1.faArrowUp, faBackward_1.faBackward, faBan_1.faBan, faBatteryHalf_1.faBatteryHalf, faBed_1.faBed, faBell_1.faBell, faBolt_1.faBolt, faCalculator_1.faCalculator, faCalendar_1.faCalendar, faCaretDown_1.faCaretDown, faCaretUp_1.faCaretUp, faChartLine_1.faChartLine, faCheck_1.faCheck, faCheckCircle_2.faCheckCircle, faCheckCircle_1.faCheckCircle, faChevronDown_1.faChevronDown, faChevronLeft_1.faChevronLeft, faChevronRight_1.faChevronRight, faChevronUp_1.faChevronUp, faCircle_2.faCircle, faCircleNotch_1.faCircleNotch, faCircle_1.faCircle, faClipboard_1.faClipboard, faClock_1.faClock, faClock_2.faClock, faCog_1.faCog, faColumns_1.faColumns, faCommentAlt_1.faCommentAlt, faCompress_1.faCompress, faCrown_1.faCrown, faEllipsisH_1.faEllipsisH, faEllipsisV_1.faEllipsisV, faEnvelope_1.faEnvelope, faExclamationCircle_1.faExclamationCircle, faExclamationTriangle_1.faExclamationTriangle, faExpand_1.faExpand, faExternalLinkAlt_1.faExternalLinkAlt, faExternalLinkSquareAlt_1.faExternalLinkSquareAlt, faEye_1.faEye, faEyeSlash_1.faEyeSlash, faFastBackward_1.faFastBackward, faFastForward_1.faFastForward, faFileAlt_1.faFileAlt, faFileAlt_2.faFileAlt, faFileImport_1.faFileImport, faFileSignature_1.faFileSignature, faFilter_1.faFilter, faFlag_1.faFlag, faFolder_1.faFolder, faForward_1.faForward, faGripLines_1.faGripLines, faGripLinesVertical_1.faGripLinesVertical, faHashtag_1.faHashtag, faInfoCircle_1.faInfoCircle, faKey_1.faKey, faKeyboard_1.faKeyboard, faLayerGroup_1.faLayerGroup, faLevelUpAlt_1.faLevelUpAlt, faListUl_1.faListUl, faLock_1.faLock, faLongArrowAltRight_1.faLongArrowAltRight, faMagic_1.faMagic, faMapSigns_1.faMapSigns, faMinus_1.faMinus, faMousePointer_1.faMousePointer, faPaperclip_1.faPaperclip, faPause_1.faPause, faPen_1.faPen, faPlay_1.faPlay, faPlus_1.faPlus, faPlusCircle_1.faPlusCircle, faPooStorm_1.faPooStorm, faQuestion_1.faQuestion, faQuestionCircle_2.faQuestionCircle, faQuestionCircle_1.faQuestionCircle, faScroll_1.faScroll, faSearch_1.faSearch, faShareAlt_1.faShareAlt, faShieldAlt_1.faShieldAlt, faSignOutAlt_1.faSignOutAlt, faSignature_1.faSignature, faSlidersH_1.faSlidersH, faSort_1.faSort, faSortDown_1.faSortDown, faSortUp_1.faSortUp, faSpinner_1.faSpinner, faSquare_1.faSquare, faStar_1.faStar, faStar_2.faStar, faSync_1.faSync, faTasks_1.faTasks, faThLarge_1.faThLarge, faThumbsDown_1.faThumbsDown, faThumbsDown_2.faThumbsDown, faThumbsUp_1.faThumbsUp, faThumbsUp_2.faThumbsUp, faTicketAlt_1.faTicketAlt, faTimes_1.faTimes, faTimesCircle_1.faTimesCircle, faTrash_1.faTrash, faUser_2.faUser, faUserAstronaut_1.faUserAstronaut, faUserPlus_1.faUserPlus, faUser_1.faUser, faUsers_1.faUsers, faUserFriends_1.faUserFriends);
 var CUSTOM_ICON_TYPE;
 (function (CUSTOM_ICON_TYPE) {
+    CUSTOM_ICON_TYPE["ARROW_TO_BOTTOM"] = "arrow-to-bottom";
+    CUSTOM_ICON_TYPE["COMMENT_ALT_CHECK"] = "comment-alt-check";
     CUSTOM_ICON_TYPE["DIALOG_CHECK"] = "dialog-check";
     CUSTOM_ICON_TYPE["SCROLL"] = "scroll";
     CUSTOM_ICON_TYPE["SPARKLE"] = "sparkle";
@@ -137,6 +154,8 @@ var CUSTOM_ICON_TYPE;
     CUSTOM_ICON_TYPE["TRIANGLE_UP"] = "triangle-up";
 })(CUSTOM_ICON_TYPE = exports.CUSTOM_ICON_TYPE || (exports.CUSTOM_ICON_TYPE = {}));
 const CustomIcons = {
+    [CUSTOM_ICON_TYPE.ARROW_TO_BOTTOM]: svg_1.ArrowToBottom,
+    [CUSTOM_ICON_TYPE.COMMENT_ALT_CHECK]: svg_1.CommentAltCheck,
     [CUSTOM_ICON_TYPE.DIALOG_CHECK]: svg_1.DialogCheck,
     [CUSTOM_ICON_TYPE.SCROLL]: svg_1.Scroll,
     [CUSTOM_ICON_TYPE.SPARKLE]: svg_1.Sparkle,
@@ -152,11 +171,15 @@ var ICON_TYPE;
     ICON_TYPE["ARROW_UP"] = "arrow-up";
     ICON_TYPE["BACKWARD"] = "backward";
     ICON_TYPE["BAN"] = "ban";
+    ICON_TYPE["BATTERY_HALF"] = "battery-half";
+    ICON_TYPE["BED"] = "bed";
+    ICON_TYPE["BELL"] = "bell";
     ICON_TYPE["BOLT"] = "bolt";
     ICON_TYPE["CALENDAR"] = "calendar";
     ICON_TYPE["CALCULATOR"] = "calculator";
     ICON_TYPE["CARET_DOWN"] = "caret-down";
     ICON_TYPE["CARET_UP"] = "caret-up";
+    ICON_TYPE["CHART_LINE"] = "chart-line";
     ICON_TYPE["CHECK"] = "check";
     ICON_TYPE["CHECK_CIRCLE"] = "check-circle";
     ICON_TYPE["CHEVRON_DOWN"] = "chevron-down";
@@ -171,9 +194,11 @@ var ICON_TYPE;
     ICON_TYPE["COLUMNS"] = "columns";
     ICON_TYPE["COMMENT_ALT"] = "comment-alt";
     ICON_TYPE["COMPRESS"] = "compress";
+    ICON_TYPE["CROWN"] = "crown";
     ICON_TYPE["ELLIPSIS_H"] = "ellipsis-h";
     ICON_TYPE["ELLIPSIS_V"] = "ellipsis-v";
     ICON_TYPE["ENVELOPE"] = "envelope";
+    ICON_TYPE["EXCLAMATION_CIRCLE"] = "exclamation-circle";
     ICON_TYPE["EXCLAMATION_TRIANGLE"] = "exclamation-triangle";
     ICON_TYPE["EXPAND"] = "expand";
     ICON_TYPE["EXTERNAL_LINK_ALT"] = "external-link-alt";
@@ -203,6 +228,7 @@ var ICON_TYPE;
     ICON_TYPE["MAGIC"] = "magic";
     ICON_TYPE["MAP_SIGNS"] = "map-signs";
     ICON_TYPE["MINUS"] = "minus";
+    ICON_TYPE["MOUSE_POINTER"] = "mouse-pointer";
     ICON_TYPE["PAPERCLIP"] = "paperclip";
     ICON_TYPE["PAUSE"] = "pause";
     ICON_TYPE["PEN"] = "pen";
@@ -210,10 +236,14 @@ var ICON_TYPE;
     ICON_TYPE["PLUS"] = "plus";
     ICON_TYPE["PLUS_CIRCLE"] = "plus-circle";
     ICON_TYPE["POO_STORM"] = "poo-storm";
+    ICON_TYPE["QUESTION"] = "question";
     ICON_TYPE["QUESTION_CIRCLE"] = "question-circle";
     ICON_TYPE["SCROLL"] = "scroll";
     ICON_TYPE["SEARCH"] = "search";
+    ICON_TYPE["SHARE_ALT"] = "share-alt";
     ICON_TYPE["SHIELD_ALT"] = "shield-alt";
+    ICON_TYPE["SIGN_OUT_ALT"] = "sign-out-alt";
+    ICON_TYPE["SIGNATURE"] = "signature";
     ICON_TYPE["SLIDERS_H"] = "sliders-h";
     ICON_TYPE["SORT"] = "sort";
     ICON_TYPE["SORT_DOWN"] = "sort-down";

package/public/components/Icon/svg/ArrowToBottom.d.ts

@@ -0,0 +1,2 @@
+import { SvgProps } from "../../Svg";
+export declare const ArrowToBottom: (props: SvgProps) => JSX.Element;

package/public/components/Icon/svg/ArrowToBottom.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ArrowToBottom = void 0;
+const react_1 = __importDefault(require("react"));
+const Svg_1 = require("../../Svg");
+const ArrowToBottom = (props) => {
+    return (react_1.default.createElement(Svg_1.Svg, Object.assign({ width: "27", height: "32", viewBox: "0 0 27 32", fill: "none" }, props),
+        react_1.default.createElement("path", { d: "M1.671 26.82h24.063c0.923 0 1.671 0.748 1.671 1.671v1.838c0 0.923-0.748 1.671-1.671 1.671h-24.063c-0.923 0-1.671-0.748-1.671-1.671v-1.838c0-0.923 0.748-1.671 1.671-1.671z", fill: "currentColor" }),
+        react_1.default.createElement("path", { d: "M23.047 11.777l1.613 1.609c0.541 0.54 0.541 1.413 0 1.947l-9.853 9.996c-0.541 0.54-1.751 0.54-2.286 0l-9.858-9.996c-0.541-0.54-0.541-1.413 0-1.947l1.613-1.609c0.547-0.546 1.44-0.534 1.975 0.023l4.94 4.832-0.084-15.254c0-0.764 0.616-1.378 1.382-1.378h2.428c0.766 0 1.382 0.615 1.382 1.378v15.254l4.773-4.832c0.536-0.563 1.428-0.574 1.975-0.023z", fill: "currentColor" })));
+};
+exports.ArrowToBottom = ArrowToBottom;

package/public/components/Icon/svg/CommentAltCheck.d.ts

@@ -0,0 +1,2 @@
+import { SvgProps } from "../../Svg";
+export declare const CommentAltCheck: (props: SvgProps) => JSX.Element;

package/public/components/Icon/svg/CommentAltCheck.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CommentAltCheck = void 0;
+const react_1 = __importDefault(require("react"));
+const Svg_1 = require("../../Svg");
+const CommentAltCheck = (props) => {
+    return (react_1.default.createElement(Svg_1.Svg, Object.assign({ width: "30", height: "32", viewBox: "0 0 30 32", fill: "none" }, props),
+        react_1.default.createElement("path", { d: "M26.133 1.067h-22.4c-2.1 0-3.733 1.692-3.733 3.733v16.8c0 2.1 1.633 3.733 3.733 3.733h5.6v4.9c0 0.583 0.642 0.933 1.108 0.583l7.292-5.483h8.4c2.042 0 3.733-1.633 3.733-3.733v-16.8c0-2.042-1.692-3.733-3.733-3.733zM21.583 10.633l-7.642 7.583c-0.292 0.292-0.7 0.292-0.933 0l-4.433-4.433c-0.233-0.233-0.233-0.642 0-0.933l1.517-1.517c0.292-0.233 0.7-0.233 0.933 0.058l2.45 2.45 5.658-5.6c0.292-0.292 0.7-0.292 0.933 0l1.517 1.517c0.233 0.233 0.233 0.642 0 0.875z", fill: "currentColor" })));
+};
+exports.CommentAltCheck = CommentAltCheck;

package/public/components/Icon/svg/index.d.ts

@@ -1,3 +1,5 @@
+export * from "./ArrowToBottom";
+export * from "./CommentAltCheck";
 export * from "./DialogCheck";
 export * from "./Scroll";
 export * from "./Sparkle";

package/public/components/Icon/svg/index.js

@@ -10,6 +10,8 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ArrowToBottom"), exports);
+__exportStar(require("./CommentAltCheck"), exports);
 __exportStar(require("./DialogCheck"), exports);
 __exportStar(require("./Scroll"), exports);
 __exportStar(require("./Sparkle"), exports);

package/public/components/Input/Input.d.ts

@@ -1,6 +1,6 @@
 import { InputHTMLAttributes, ForwardRefExoticComponent } from "react";
 import { STATUS_VARIANT, THEME } from "../../types";
-import { SharedFaIconProps, ICON_TYPE } from "../Icon";
+import { SharedFaIconProps, IconType } from "../Icon";
 export declare enum INPUT_ICON_POSITION {
     LEFT = "left",
     RIGHT = "right"
@@ -10,9 +10,10 @@ export interface InputBaseProps {
     as?: any;
     variant?: STATUS_VARIANT;
     theme?: THEME;
-    icon?: ICON_TYPE;
+    icon?: IconType;
     iconPosition?: INPUT_ICON_POSITION;
     iconProps?: SharedFaIconProps;
+    wrapperClassName?: string;
 }
 export interface InputProps extends InputBaseProps, InputHTMLAttributes<HTMLInputElement> {
 }

package/public/components/Input/Input.js

@@ -36,17 +36,18 @@ var INPUT_ICON_POSITION;
     INPUT_ICON_POSITION["RIGHT"] = "right";
 })(INPUT_ICON_POSITION = exports.INPUT_ICON_POSITION || (exports.INPUT_ICON_POSITION = {}));
 const cn = "TextInput";
-const Input = react_1.forwardRef(({ as: Component = "input", className, icon, iconPosition = INPUT_ICON_POSITION.LEFT, iconProps, id: idProp, type, variant: variantProp = types_1.STATUS_VARIANT.DEFAULT, theme: themeProp, ...rest }, ref) => {
+const Input = react_1.forwardRef(({ as: Component = "input", className, wrapperClassName, icon, iconPosition = INPUT_ICON_POSITION.LEFT, iconProps = {}, id: idProp, type, variant: variantProp = types_1.STATUS_VARIANT.DEFAULT, theme: themeProp, disabled, ...rest }, ref) => {
     const isTextInput = type !== "radio" && type !== "checkbox";
     const { id: idContext, variant: variantContext, theme: themeContext, } = react_1.useContext(FormGroupContext_1.FormGroupContext);
     const id = idContext || idProp;
     const variant = variantContext || variantProp;
     const theme = themeProp || themeContext;
-    const inputClasses = classnames_1.default(isTextInput && bem_1.bem(cn), bem_1.bem(cn, { m: variant }), bem_1.bem(cn, { m: theme }), icon && bem_1.bem(cn, { m: `icon-${iconPosition}` }), !icon && className);
-    const wrapperClasses = classnames_1.default(bem_1.bem(cn, { e: "wrapper" }), className);
-    const iconClasses = classnames_1.default(bem_1.bem(cn, { e: "icon" }), bem_1.bem(cn, { e: "icon", m: iconPosition }));
+    const inputClasses = classnames_1.default(isTextInput && bem_1.bem(cn), bem_1.bem(cn, { m: variant }), bem_1.bem(cn, { m: theme }), disabled && bem_1.bem(cn, { m: "disabled" }), icon && bem_1.bem(cn, { m: `icon-${iconPosition}` }), className);
+    const wrapperClasses = classnames_1.default(bem_1.bem(cn, { e: "wrapper" }), wrapperClassName);
+    const { className: iconClassName, ...iconPropsRest } = iconProps;
+    const iconClasses = classnames_1.default(bem_1.bem(cn, { e: "icon" }), bem_1.bem(cn, { e: "icon", m: iconPosition }), iconClassName);
     return isTextInput && icon ? (react_1.default.createElement(Box_1.Box, { className: wrapperClasses },
-        react_1.default.createElement(Component, Object.assign({ ref: ref, className: inputClasses, id: id, type: type }, rest)),
-        react_1.default.createElement(Icon_1.Icon, Object.assign({ icon: icon, className: iconClasses }, iconProps)))) : (react_1.default.createElement(Component, Object.assign({ ref: ref, className: inputClasses, id: id, type: type }, rest)));
+        react_1.default.createElement(Component, Object.assign({ ref: ref, className: inputClasses, id: id, type: type, disabled: disabled }, rest)),
+        react_1.default.createElement(Icon_1.Icon, Object.assign({ icon: icon, className: iconClasses }, iconPropsRest)))) : (react_1.default.createElement(Component, Object.assign({ ref: ref, className: inputClasses, id: id, type: type, disabled: disabled }, rest)));
 });
 exports.Input = Input;

package/public/components/Loading/Loading.d.ts

@@ -1,2 +1,3 @@
-import { BoxProps } from "../Box";
-export declare const Loading: ({ className, ...rest }: BoxProps) => JSX.Element;
+import { ConveyorLogoProps } from "../ConveyorLogo";
+export declare type LoadingProps = Omit<ConveyorLogoProps, "variant">;
+export declare const Loading: ({ theme, height, className, ...rest }: LoadingProps) => JSX.Element;

package/public/components/Loading/Loading.js

@@ -6,14 +6,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Loading = void 0;
 const react_1 = __importDefault(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-const Box_1 = require("../Box");
 const bem_1 = require("../../utilities/bem");
+const types_1 = require("../../types");
+const ConveyorLogo_1 = require("../ConveyorLogo");
 const cn = "Loading";
-const Loading = ({ className, ...rest }) => {
-    return (react_1.default.createElement(Box_1.Box, Object.assign({ className: classnames_1.default(bem_1.bem(cn), className) }, rest),
-        react_1.default.createElement(Box_1.Box, null),
-        react_1.default.createElement(Box_1.Box, null),
-        react_1.default.createElement(Box_1.Box, null),
-        react_1.default.createElement(Box_1.Box, null)));
+const Loading = ({ theme = types_1.THEME.BRAND, height = 40, className, ...rest }) => {
+    return (react_1.default.createElement(ConveyorLogo_1.ConveyorLogo, Object.assign({ className: classnames_1.default(bem_1.bem(cn), className), variant: "icon", height: height, theme: theme }, rest)));
 };
 exports.Loading = Loading;

package/public/components/Markdown/Markdown.d.ts

@@ -6,4 +6,4 @@ export interface MarkdownProps extends ReactMarkdownProps {
     skipHtml?: boolean;
     renderPlainText?: boolean;
 }
-export declare const Markdown: ({ children, className, escapeHtml, skipHtml, renderPlainText, ...rest }: MarkdownProps) => JSX.Element;
+export declare const Markdown: ({ children, className, escapeHtml, skipHtml, renderPlainText, renderers, ...rest }: MarkdownProps) => JSX.Element;

package/public/components/Markdown/Markdown.js

@@ -11,14 +11,14 @@ const bem_1 = require("../../utilities/bem");
 const Text_1 = require("../Text");
 const cn = "Markdown";
 const TextRenderer = (as = "p") => ({ children, }) => react_1.default.createElement(Text_1.Text, { as: as }, children);
-const Markdown = ({ children, className, escapeHtml = true, skipHtml = false, renderPlainText = false, ...rest }) => {
-    const renderers = renderPlainText
+const Markdown = ({ children, className, escapeHtml = true, skipHtml = false, renderPlainText = false, renderers, ...rest }) => {
+    const plainTextRenderers = renderPlainText
         ? {
             heading: TextRenderer(),
             strong: TextRenderer("span"),
             emphasis: TextRenderer("span"),
         }
         : undefined;
-    return (react_1.default.createElement(react_markdown_1.default, Object.assign({ className: classnames_1.default(bem_1.bem(cn), className), source: children, escapeHtml: escapeHtml, skipHtml: skipHtml, renderers: renderers }, rest)));
+    return (react_1.default.createElement(react_markdown_1.default, Object.assign({ className: classnames_1.default(bem_1.bem(cn), className), source: children, escapeHtml: escapeHtml, skipHtml: skipHtml, renderers: { ...plainTextRenderers, ...renderers } }, rest)));
 };
 exports.Markdown = Markdown;

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

@@ -27,7 +27,7 @@ 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_1 = require("react-popper");
-const react_spring_1 = require("react-spring");
+const web_1 = require("@react-spring/web");
 const d3_ease_1 = require("d3-ease");
 const hooks_1 = require("../../hooks");
 const types_1 = require("../../types");
@@ -128,7 +128,7 @@ const MenuRenderer = ({ children, className, placement = "bottom-start", positio
         }
     }, [children, update]);
     const PortalComponent = hasPortal ? Portal_1.Portal : react_1.Fragment;
-    const transitions = react_spring_1.useTransition(isOpen, null, {
+    const transitions = web_1.useTransition(isOpen, {
         from: TRANSITION_START,
         enter: TRANSITION_END,
         leave: TRANSITION_START,
@@ -139,11 +139,14 @@ const MenuRenderer = ({ children, className, placement = "bottom-start", positio
     });
     return (react_1.default.createElement(Box_1.Box, Object.assign({ className: className, ref: menuElement }, rest),
         react_1.default.createElement(Box_1.Box, { ref: setReferenceElement }, trigger(triggerProps, triggerState)),
-        transitions.map(({ item, key, props: transitionProps }) => item && (react_1.default.createElement(PortalComponent, { key: key },
+        transitions(({ opacity, transform }, item) => item && (react_1.default.createElement(PortalComponent, null,
             react_1.default.createElement(context_1.MenuContext.Provider, { value: context },
                 react_1.default.createElement(Box_1.Box, Object.assign({ className: hasPortal ? "z-toast" : "z-menu", ref: setPopperElement, style: { minWidth: `${minWidth}px`, ...styles.popper } }, attributes.popper),
                     react_1.default.createElement(react_focus_lock_1.default, { autoFocus: autoFocus },
-                        react_1.default.createElement(react_spring_1.animated.div, { key: key, style: transitionProps, ref: menuListElement }, typeof children === "function"
+                        react_1.default.createElement(web_1.animated.div, { style: {
+                                opacity,
+                                transform,
+                            }, ref: menuListElement }, typeof children === "function"
                             ? children(renderProps)
                             : children)))))))));
 };