@conveyorhq/arrow-ds 2.0.0-beta.5 → 2.0.0-beta.9

package/public/components/CloseButton/CloseButton.d.ts

@@ -1,4 +1,3 @@
 import React, { ButtonHTMLAttributes } from "react";
-declare type CloseButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
+export declare type CloseButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
 export declare const CloseButton: React.ForwardRefExoticComponent<CloseButtonProps & React.RefAttributes<HTMLButtonElement>>;
-export {};

package/public/components/ConveyorLogo/ConveyorLogo.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ConveyorLogo = void 0;
 const react_1 = __importDefault(require("react"));
 const types_1 = require("../../types");
-const tokens_1 = require("../../tokens");
+const tokens_1 = require("../../style-dictionary/dist/tokens");
 const Svg_1 = require("../Svg");
 const WIDTH = 165;
 const HEIGHT = 32;
@@ -14,20 +14,20 @@ const RATIO = WIDTH / HEIGHT;
 const widthFromHeight = (height) => Math.ceil(height * RATIO);
 const ConveyorLogo = ({ height = HEIGHT, monochrome = false, theme = types_1.THEME.PRODUCT, variant = "wordmark", className, ...rest }) => {
     const wordmarkColor = {
-        brand: tokens_1.colors.white,
-        product: tokens_1.colors.conveyor.black,
+        brand: tokens_1.tokens.color.white,
+        product: tokens_1.tokens.color.brandBlack,
     };
     const iconColorFunction = () => {
         if (monochrome && theme === types_1.THEME.PRODUCT) {
-            return tokens_1.colors.conveyor.black;
+            return tokens_1.tokens.color.brandBlack;
         }
         if (monochrome && theme === types_1.THEME.BRAND) {
-            return tokens_1.colors.white;
+            return tokens_1.tokens.color.white;
         }
-        return tokens_1.colors.brandGreen[400];
+        return tokens_1.tokens.color.brandGreen[400];
     };
     const iconColor = iconColorFunction();
-    return (react_1.default.createElement(Svg_1.Svg, Object.assign({ width: variant === "wordmark" ? widthFromHeight(height) : height, height: height, viewBox: variant === "wordmark" ? `0 0 ${WIDTH} ${HEIGHT}` : "0 0 32 32" }, rest),
+    return (react_1.default.createElement(Svg_1.Svg, Object.assign({ width: variant === "wordmark" ? widthFromHeight(height) : height, height: height, viewBox: variant === "wordmark" ? `0 0 ${WIDTH} ${HEIGHT}` : "0 0 32 32", className: className }, rest),
         variant === "wordmark" && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement("path", { fill: wordmarkColor[theme], d: "M44.159 22.858c-3.914 0-5.732-3.663-5.732-9.087 0-4.222 1.286-8.388 5.144-8.388 2.796 0 4.389 2.125 5.228 5.088h3.076l-0.28-5.088c-1.789-1.51-4.669-2.349-7.884-2.349-6.626 0-11.91 4.473-11.91 11.603 0 6.263 4.11 10.764 11.938 10.764 3.411 0 6.43-0.783 8.36-2.125l0.503-6.039h-3.048c-1.146 3.774-2.768 5.62-5.396 5.62z" }),
             react_1.default.createElement("path", { fill: wordmarkColor[theme], d: "M62.261 23.361c-1.789 0-2.6-2.88-2.6-6.85 0-3.075 0.419-5.088 2.013-5.088 1.789 0 2.6 2.88 2.6 6.85 0 3.075-0.42 5.088-2.013 5.088zM61.674 25.402c5.116 0 8.779-3.187 8.779-8.276 0-4.362-3.215-7.745-8.192-7.745-5.116 0-8.779 3.187-8.779 8.276 0 4.362 3.215 7.745 8.192 7.745z" }),

package/public/components/Divider/Divider.d.ts

@@ -5,12 +5,4 @@ export interface DividerProps extends BoxProps {
     dashed?: boolean;
     thick?: boolean;
 }
-declare const Divider: {
-    (props: DividerProps): JSX.Element;
-    defaultProps: {
-        dashed: boolean;
-        direction: ORIENTATION;
-        thick: boolean;
-    };
-};
-export { Divider };
+export declare const Divider: (props: DividerProps) => JSX.Element;

package/public/components/Divider/Divider.js

@@ -8,32 +8,21 @@ const react_1 = __importDefault(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const types_1 = require("../../types");
 const Box_1 = require("../Box");
-const defaultDividerProps = {
-    dashed: false,
-    direction: types_1.ORIENTATION.HORIZONTAL,
-    thick: false,
-};
-const HorizontalDivider = (props) => {
-    const { className, dashed, thick, ...rest } = props;
-    return (react_1.default.createElement(Box_1.Box, Object.assign({ as: "hr", className: classnames_1.default("border-gray-400", dashed && "border-dashed", thick && "border", className) }, rest)));
-};
-const VerticalDivider = (props) => {
-    const { className, dashed, thick, ...rest } = props;
-    const dividerClasses = classnames_1.default([
-        "border-l",
-        "border-gray-400",
-        "w-auto",
-        dashed && "border-dashed",
-        thick && "border",
+const utilities_1 = require("../../utilities");
+const cn = utilities_1.bemHOF("Divider");
+const HorizontalDivider = ({ className, ...rest }) => (react_1.default.createElement(Box_1.Box, Object.assign({ as: "hr", className: className }, rest)));
+const VerticalDivider = ({ className, ...rest }) => (react_1.default.createElement(Box_1.Box, Object.assign({ className: className }, rest)));
+const Divider = (props) => {
+    const { direction = types_1.ORIENTATION.HORIZONTAL, dashed = false, thick = false, className, ...rest } = props;
+    const styles = classnames_1.default([
+        cn(),
+        direction === types_1.ORIENTATION.VERTICAL && cn({ m: "vertical" }),
+        dashed && cn({ m: "dashed" }),
+        thick && cn({ m: "thick" }),
         className,
     ]);
-    return react_1.default.createElement(Box_1.Box, Object.assign({ className: dividerClasses }, rest));
-};
-const Divider = (props) => {
-    const { direction = types_1.ORIENTATION.HORIZONTAL, dashed = defaultDividerProps.dashed, thick = defaultDividerProps.thick, ...rest } = props;
     return direction === types_1.ORIENTATION.HORIZONTAL
-        ? HorizontalDivider({ dashed, thick, ...rest })
-        : VerticalDivider({ dashed, thick, ...rest });
+        ? HorizontalDivider({ className: styles, ...rest })
+        : VerticalDivider({ className: styles, ...rest });
 };
 exports.Divider = Divider;
-Divider.defaultProps = defaultDividerProps;

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/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/Frame/Frame.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-declare type FrameAreaName = "appbar" | "topbar" | "main" | "bottombar";
+declare type FrameAreaName = "navbar" | "appbar" | "topbar" | "main" | "bottombar";
 interface FrameProps {
     children: ReactNode;
 }

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",
@@ -94,6 +107,7 @@ export declare enum ICON_TYPE {
     THUMBS_DOWN = "thumbs-down",
     THUMBS_UP = "thumbs-up",
     TRASH = "trash",
+    UNLOCK = "unlock",
     USER = "user",
     USER_ASTRONAUT = "user-astronaut",
     USER_PLUS = "user-plus",
@@ -125,4 +139,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,9 +127,12 @@ 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");
+const faUnlock_1 = require("@fortawesome/free-solid-svg-icons/faUnlock");
 const faUser_2 = require("@fortawesome/free-solid-svg-icons/faUser");
 const faUserAstronaut_1 = require("@fortawesome/free-solid-svg-icons/faUserAstronaut");
 const faUserPlus_1 = require("@fortawesome/free-solid-svg-icons/faUserPlus");
@@ -127,9 +143,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, faUnlock_1.faUnlock, 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 +155,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 +172,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 +195,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 +229,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 +237,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";
@@ -230,6 +261,7 @@ var ICON_TYPE;
     ICON_TYPE["THUMBS_DOWN"] = "thumbs-down";
     ICON_TYPE["THUMBS_UP"] = "thumbs-up";
     ICON_TYPE["TRASH"] = "trash";
+    ICON_TYPE["UNLOCK"] = "unlock";
     ICON_TYPE["USER"] = "user";
     ICON_TYPE["USER_ASTRONAUT"] = "user-astronaut";
     ICON_TYPE["USER_PLUS"] = "user-plus";

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 })),