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

package/public/components/Button/Button.d.ts

@@ -1,5 +1,5 @@
 import { ButtonHTMLAttributes, ForwardRefExoticComponent } from "react";
-import { ICON_TYPE, ICON_STYLE_PREFIX } from "../Icon";
+import { IconType, ICON_STYLE_PREFIX } from "../Icon";
 import { ButtonGroupProps } from "./ButtonGroup";
 import { THEME } from "../../types";
 export declare enum BUTTON_VARIANT {
@@ -10,6 +10,7 @@ export declare enum BUTTON_VARIANT {
     MINIMAL = "minimal"
 }
 export declare enum BUTTON_SIZE {
+    SMALL = "small",
     MEDIUM = "medium",
     LARGE = "large"
 }
@@ -22,7 +23,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     block?: boolean;
     depressed?: boolean;
     isLoading?: boolean;
-    icon?: ICON_TYPE;
+    icon?: IconType;
     iconColor?: string;
     iconPosition?: BUTTON_ICON_POSITION;
     iconSpin?: boolean;

package/public/components/Button/Button.js

@@ -41,6 +41,7 @@ var BUTTON_VARIANT;
 })(BUTTON_VARIANT = exports.BUTTON_VARIANT || (exports.BUTTON_VARIANT = {}));
 var BUTTON_SIZE;
 (function (BUTTON_SIZE) {
+    BUTTON_SIZE["SMALL"] = "small";
     BUTTON_SIZE["MEDIUM"] = "medium";
     BUTTON_SIZE["LARGE"] = "large";
 })(BUTTON_SIZE = exports.BUTTON_SIZE || (exports.BUTTON_SIZE = {}));
@@ -51,10 +52,12 @@ var BUTTON_ICON_POSITION;
 })(BUTTON_ICON_POSITION = exports.BUTTON_ICON_POSITION || (exports.BUTTON_ICON_POSITION = {}));
 function getButtonSizeClasses(size, icon, children) {
     const buttonSizeClasses = {
+        [BUTTON_SIZE.SMALL]: bem_1.bem(cn, { m: "small" }),
         [BUTTON_SIZE.MEDIUM]: bem_1.bem(cn, { m: "medium" }),
         [BUTTON_SIZE.LARGE]: bem_1.bem(cn, { m: "large" }),
     };
     const buttonIconOnlySizeClasses = {
+        [BUTTON_SIZE.SMALL]: bem_1.bem(cn, { m: "iconOnly--small" }),
         [BUTTON_SIZE.MEDIUM]: bem_1.bem(cn, { m: "iconOnly--medium" }),
         [BUTTON_SIZE.LARGE]: bem_1.bem(cn, { m: "iconOnly--large" }),
     };
@@ -66,7 +69,7 @@ exports.Button = react_1.forwardRef(({ as: Component = "button", children, class
     const isDisabled = disabled || isLoading;
     const themeContext = react_1.useContext(contexts_1.ThemeContext);
     const theme = themeProp || themeContext;
-    const buttonClassNames = classnames_1.default(bem_1.bem(cn), bem_1.bem(cn, { m: variant }), bem_1.bem(cn, { m: theme }), block ? ["flex", "w-full"] : "inline-flex", getButtonSizeClasses(size, icon, children), depressed && bem_1.bem(cn, { m: "depressed" }), isDisabled ? ["opacity-50", "pointer-events-none"] : "", className);
+    const buttonClassNames = classnames_1.default(bem_1.bem(cn), bem_1.bem(cn, { m: variant }), bem_1.bem(cn, { m: theme }), block && bem_1.bem(cn, { m: "block" }), getButtonSizeClasses(size, icon, children), depressed && bem_1.bem(cn, { m: "depressed" }), isDisabled && bem_1.bem(cn, { m: "disabled" }), className);
     const iconClassNames = classnames_1.default(bem_1.bem(cn, { e: "icon" }), children && bem_1.bem(cn, { e: "icon", m: iconPosition }), isLoading && bem_1.bem(cn, { e: "icon", m: "invisible" }));
     const iconProps = icon
         ? {
@@ -82,7 +85,7 @@ exports.Button = react_1.forwardRef(({ as: Component = "button", children, class
         type = "button";
     }
     const propsIfLink = Component === Link_1.Link ? { noStyles: true } : {};
-    return (react_1.default.createElement(Component, Object.assign({ type: type, className: buttonClassNames, disabled: disabled, ref: ref }, propsIfLink, rest),
+    return (react_1.default.createElement(Component, Object.assign({ type: type, className: buttonClassNames, disabled: isDisabled, ref: ref }, propsIfLink, rest),
         icon && iconProps && iconPosition === BUTTON_ICON_POSITION.LEFT && (react_1.default.createElement(Icon_1.Icon, Object.assign({}, iconProps))),
         react_1.default.createElement("span", { className: classnames_1.default(bem_1.bem(cn, { e: "content" }), isLoading && bem_1.bem(cn, { e: "content", m: "invisible" })) }, children),
         icon && iconProps && iconPosition === BUTTON_ICON_POSITION.RIGHT && (react_1.default.createElement(Icon_1.Icon, Object.assign({}, iconProps))),

package/public/components/Checkbox/Checkbox.js

@@ -42,34 +42,16 @@ const CheckboxGroup = (props) => {
     return react_1.default.createElement(Stack_1.Stack, Object.assign({ orientation: orientation }, rest));
 };
 const Checkbox = ({ checked, children, className, disabled = false, id: idProp, label, onBlur, onChange = () => { }, onClick, onFocus, hideRequiredStyles = true, isRequired = undefined, tabIndex, theme: themeProp, ...rest }) => {
-    const [hasFocus, setHasFocus] = react_1.useState(false);
     const { isRequired: isRequiredContext, theme: themeContext } = react_1.useContext(FormGroupContext_1.FormGroupContext);
     const fallbackId = `checkbox:${auto_id_1.useId()}`;
     const id = isUndefined_1.default(idProp) ? fallbackId : idProp;
     const theme = themeProp || themeContext;
-    const classes = classnames_1.default([
-        bem_1.bem(cn),
-        { "is-disabled": disabled },
-        { "is-focused": hasFocus },
-        className,
-    ]);
+    const classes = classnames_1.default([bem_1.bem(cn), { "is-disabled": disabled }, className]);
     const handleClick = (event) => {
         if (!disabled && onClick) {
             onClick(event);
         }
     };
-    const handleFocus = (event) => {
-        setHasFocus(true);
-        if (onFocus) {
-            onFocus(event);
-        }
-    };
-    const handleBlur = (event) => {
-        setHasFocus(false);
-        if (onBlur) {
-            onBlur(event);
-        }
-    };
     let calculatedRequired = false;
     if (isRequired !== undefined) {
         calculatedRequired = isRequired;
@@ -78,7 +60,7 @@ const Checkbox = ({ checked, children, className, disabled = false, id: idProp,
         calculatedRequired = isRequiredContext;
     }
     const bareCheckbox = (react_1.default.createElement(Box_1.Box, { className: bem_1.bem(cn, { e: "BoxWrapper" }) },
-        react_1.default.createElement(Input_1.Input, Object.assign({ "aria-checked": checked ? "true" : "false", checked: checked, className: bem_1.bem(cn, { e: "Input" }), disabled: disabled, id: id, onChange: onChange, type: "checkbox", onFocus: handleFocus, onBlur: handleBlur, onClick: label ? handleClick : undefined, tabIndex: tabIndex }, rest)),
+        react_1.default.createElement(Input_1.Input, Object.assign({ "aria-checked": checked ? "true" : "false", checked: checked, className: bem_1.bem(cn, { e: "Input" }), disabled: disabled, id: id, onChange: onChange, type: "checkbox", onFocus: onFocus, onBlur: onBlur, onClick: label ? handleClick : undefined, tabIndex: tabIndex }, rest)),
         react_1.default.createElement(Box_1.Box, { className: classnames_1.default(bem_1.bem(cn, { e: "Box" }), bem_1.bem(cn, { e: "Box", m: theme }), checked && bem_1.bem(cn, { e: "Box", m: "checked" })) }),
         checked && (react_1.default.createElement(Icon_1.Icon, { className: classnames_1.default(bem_1.bem(cn, { e: "Check" }), bem_1.bem(cn, { e: "Check", m: theme })), icon: Icon_1.ICON_TYPE.CHECK }))));
     const checkboxWithLabel = label || children ? (react_1.default.createElement(Label_1.Label, { className: bem_1.bem(cn, { e: "Label" }), isRequired: calculatedRequired && !hideRequiredStyles },

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

@@ -5,5 +5,6 @@ export interface ConveyorLogoProps extends SvgProps {
     monochrome?: boolean;
     theme?: THEME;
     variant?: "icon" | "wordmark";
+    color?: string;
 }
-export declare const ConveyorLogo: ({ height, monochrome, theme, variant, className, ...rest }: ConveyorLogoProps) => JSX.Element;
+export declare const ConveyorLogo: ({ height, monochrome, theme, variant, color, className, ...rest }: ConveyorLogoProps) => JSX.Element;

package/public/components/ConveyorLogo/ConveyorLogo.js

@@ -6,28 +6,28 @@ 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;
 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 ConveyorLogo = ({ height = HEIGHT, monochrome = false, theme = types_1.THEME.PRODUCT, variant = "wordmark", color, 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 color || tokens_1.tokens.color.brandBlack;
         }
         if (monochrome && theme === types_1.THEME.BRAND) {
-            return tokens_1.colors.white;
+            return color || 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/DatePicker/DatePicker.js

@@ -42,10 +42,12 @@ exports.DatePickerInput = react_1.forwardRef((props, ref) => (react_1.default.cr
 const renderDayContents = (day) => {
     return (react_1.default.createElement(Text_1.Text, { as: "span", className: cn({ e: "day-text" }) }, day));
 };
+const CustomHeaderButtonNext = ({ onClick, disabled }) => (react_1.default.createElement(Button_1.Button, { className: "text-h5", icon: Icon_1.ICON_TYPE.CARET_RIGHT, variant: Button_1.BUTTON_VARIANT.MINIMAL, onClick: onClick, disabled: disabled }));
+const CustomHeaderButtonPrev = ({ onClick, disabled }) => (react_1.default.createElement(Button_1.Button, { className: "text-h5", icon: Icon_1.ICON_TYPE.CARET_LEFT, variant: Button_1.BUTTON_VARIANT.MINIMAL, onClick: onClick, disabled: disabled }));
 const CustomHeaderButtons = ({ decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, }) => (react_1.default.createElement(Flex_1.Flex, { className: cn({ e: "month-btns-wrapper" }) },
-    react_1.default.createElement(Button_1.Button, { icon: Icon_1.ICON_TYPE.CHEVRON_LEFT, variant: Button_1.BUTTON_VARIANT.SECONDARY, onClick: decreaseMonth, disabled: prevMonthButtonDisabled }),
-    react_1.default.createElement(Button_1.Button, { icon: Icon_1.ICON_TYPE.CHEVRON_RIGHT, variant: Button_1.BUTTON_VARIANT.SECONDARY, onClick: increaseMonth, disabled: nextMonthButtonDisabled })));
-const CustomHeader = ({ date, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, monthsShown, setHeaderProps, }) => {
+    react_1.default.createElement(CustomHeaderButtonPrev, { onClick: decreaseMonth, disabled: prevMonthButtonDisabled }),
+    react_1.default.createElement(CustomHeaderButtonNext, { onClick: increaseMonth, disabled: nextMonthButtonDisabled })));
+const CustomHeader = ({ date, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, decreaseYear, increaseYear, prevYearButtonDisabled, nextYearButtonDisabled, monthsShown, setHeaderProps, showMonthYearPicker = false, }) => {
     react_1.useEffect(() => {
         if (monthsShown > 1) {
             setHeaderProps({
@@ -54,6 +56,10 @@ const CustomHeader = ({ date, decreaseMonth, increaseMonth, prevMonthButtonDisab
                 increaseMonth,
                 prevMonthButtonDisabled,
                 nextMonthButtonDisabled,
+                decreaseYear,
+                increaseYear,
+                prevYearButtonDisabled,
+                nextYearButtonDisabled,
             });
         }
     }, [
@@ -63,18 +69,39 @@ const CustomHeader = ({ date, decreaseMonth, increaseMonth, prevMonthButtonDisab
         increaseMonth,
         prevMonthButtonDisabled,
         nextMonthButtonDisabled,
+        decreaseYear,
+        increaseYear,
+        prevYearButtonDisabled,
+        nextYearButtonDisabled,
         setHeaderProps,
     ]);
     if (monthsShown > 1) {
         return null;
     }
     return (react_1.default.createElement(Flex_1.Flex, { className: cn({ e: "header" }) },
-        react_1.default.createElement(Heading_1.Heading.H4, { className: cn({ e: "heading" }) }, date_fns_1.format(date, MONTH_YEAR_FORMAT)),
-        react_1.default.createElement(CustomHeaderButtons, { decreaseMonth: decreaseMonth, prevMonthButtonDisabled: prevMonthButtonDisabled, increaseMonth: increaseMonth, nextMonthButtonDisabled: nextMonthButtonDisabled })));
+        react_1.default.createElement(CustomHeaderButtonPrev, { onClick: () => {
+                if (showMonthYearPicker) {
+                    decreaseYear();
+                }
+                else {
+                    decreaseMonth();
+                }
+            }, disabled: showMonthYearPicker ? prevYearButtonDisabled : prevMonthButtonDisabled }),
+        react_1.default.createElement(Heading_1.Heading.H4, { className: cn({ e: "heading" }) }, showMonthYearPicker
+            ? date_fns_1.format(date, "yyyy")
+            : date_fns_1.format(date, MONTH_YEAR_FORMAT)),
+        react_1.default.createElement(CustomHeaderButtonNext, { onClick: () => {
+                if (showMonthYearPicker) {
+                    increaseYear();
+                }
+                else {
+                    increaseMonth();
+                }
+            }, disabled: showMonthYearPicker ? nextYearButtonDisabled : nextMonthButtonDisabled })));
 };
-const generateCustomHeaderRenderer = ({ monthsShown, setHeaderProps, }) => {
+const generateCustomHeaderRenderer = ({ monthsShown, setHeaderProps, showMonthYearPicker = false, }) => {
     return (customHeaderProps) => {
-        return (react_1.default.createElement(CustomHeader, Object.assign({}, customHeaderProps, { monthsShown: monthsShown, setHeaderProps: setHeaderProps })));
+        return (react_1.default.createElement(CustomHeader, Object.assign({}, customHeaderProps, { monthsShown: monthsShown, setHeaderProps: setHeaderProps, showMonthYearPicker: showMonthYearPicker })));
     };
 };
 const checkHeaderPropsEquality = (prev, next) => {
@@ -86,6 +113,10 @@ const checkHeaderPropsEquality = (prev, next) => {
         return false;
     if (prev.nextMonthButtonDisabled !== next.nextMonthButtonDisabled)
         return false;
+    if (prev.prevYearButtonDisabled !== next.prevYearButtonDisabled)
+        return false;
+    if (prev.nextYearButtonDisabled !== next.nextYearButtonDisabled)
+        return false;
     return true;
 };
 const DAY_ABBREVIATIONS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
@@ -136,13 +167,14 @@ const getCalendarContainer = ({ inline, monthsShown, headerProps, calInstance, }
         });
     return ({ children, className }) => (react_1.default.createElement(PopoverMenu_1.PopoverMenu, { className: className }, children));
 };
-const UnwrappedDatePicker = ({ className, monthsShown = 1, calendarClassName, customInput = react_1.default.createElement(exports.DatePickerInput, null), onHeaderPropsUpdate, inline = false, popperModifiers, headerProps, rdpRef, ...rest }) => {
+const UnwrappedDatePicker = ({ className, monthsShown = 1, calendarClassName, customInput = react_1.default.createElement(exports.DatePickerInput, null), onHeaderPropsUpdate, inline = false, popperModifiers, headerProps, rdpRef, showMonthYearPicker, ...rest }) => {
     const isMultiMonth = monthsShown > 1;
     const calInstance = rdpRef.current;
     return (react_1.default.createElement(react_datepicker_1.default, Object.assign({ ref: rdpRef, className: classnames_1.default(cn(), className), calendarClassName: classnames_1.default(isMultiMonth && cn({ e: "calendar", m: "multi-month" }), calendarClassName), showPopperArrow: false, customInput: customInput, disabledKeyboardNavigation: true, renderDayContents: renderDayContents, renderCustomHeader: generateCustomHeaderRenderer({
             monthsShown,
             setHeaderProps: onHeaderPropsUpdate,
-        }), monthsShown: monthsShown, calendarContainer: getCalendarContainer({
+            showMonthYearPicker,
+        }), showMonthYearPicker: showMonthYearPicker, monthsShown: monthsShown, calendarContainer: getCalendarContainer({
             inline,
             monthsShown,
             headerProps,

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

@@ -1,6 +1,9 @@
 import React, { HTMLProps } from "react";
+import { ButtonProps } from "../Button";
 export interface FileUploadProps extends React.HTMLProps<HTMLLabelElement> {
     inputProps: HTMLProps<HTMLInputElement>;
+    buttonProps?: ButtonProps;
     label?: string;
+    hideFileLabel?: boolean;
 }
-export declare const FileUpload: ({ className, inputProps, label, ...rest }: FileUploadProps) => JSX.Element;
+export declare const FileUpload: ({ className, inputProps, buttonProps, label, hideFileLabel, ...rest }: FileUploadProps) => JSX.Element;

package/public/components/FileUpload/FileUpload.js

@@ -31,7 +31,7 @@ const FormGroupContext_1 = require("../FormGroup/FormGroupContext");
 const Text_1 = require("../Text");
 const Truncate_1 = require("../Truncate");
 const cn = "FileUpload";
-const FileUpload = ({ className, inputProps = {}, label = "Select file", ...rest }) => {
+const FileUpload = ({ className, inputProps = {}, buttonProps = {}, label = "Select file", hideFileLabel, ...rest }) => {
     const inputRef = react_1.useRef(null);
     const { id: idProp, onChange, ...inputRest } = inputProps;
     const { id: idContext } = react_1.useContext(FormGroupContext_1.FormGroupContext);
@@ -62,8 +62,8 @@ const FileUpload = ({ className, inputProps = {}, label = "Select file", ...rest
     };
     return (react_1.default.createElement("label", Object.assign({ htmlFor: id, className: classnames_1.default(bem_1.bem(cn), className) }, rest),
         react_1.default.createElement("input", Object.assign({ className: classnames_1.default(bem_1.bem(cn, { e: "input" })), ref: inputRef, type: "file", id: id, onChange: handleChange }, inputRest)),
-        react_1.default.createElement(Button_1.Button, { className: classnames_1.default(bem_1.bem(cn, { e: "button" })), as: "div", variant: Button_1.BUTTON_VARIANT.SECONDARY }, label),
-        react_1.default.createElement(Truncate_1.Truncate, null,
-            react_1.default.createElement(Text_1.Text, { className: classnames_1.default(bem_1.bem(cn, { e: "fileLabel" })) }, fileLabel))));
+        react_1.default.createElement(Button_1.Button, Object.assign({ className: classnames_1.default(bem_1.bem(cn, { e: "button" })), as: "div", variant: Button_1.BUTTON_VARIANT.SECONDARY }, buttonProps), label),
+        !hideFileLabel && (react_1.default.createElement(Truncate_1.Truncate, null,
+            react_1.default.createElement(Text_1.Text, { className: classnames_1.default(bem_1.bem(cn, { e: "fileLabel" })) }, fileLabel)))));
 };
 exports.FileUpload = FileUpload;

package/public/components/FileUpload/FileUploadDnD.d.ts

@@ -1,9 +1,12 @@
 import { HTMLProps } from "react";
+import { ButtonProps } from "../Button";
 interface FileUploadDndPropsBase extends Omit<HTMLProps<HTMLLabelElement>, "onChange" | "value"> {
     className?: string;
     accept?: string;
     label?: string;
     inputProps?: HTMLProps<HTMLInputElement>;
+    buttonProps?: ButtonProps;
+    hideFileLabel?: boolean;
 }
 interface FileUploadDndPropsSingle extends FileUploadDndPropsBase {
     onChange: (file: File | null) => void;

package/public/components/FileUpload/FileUploadDnD.js

@@ -35,7 +35,7 @@ const Text_1 = require("../Text");
 const Truncate_1 = require("../Truncate");
 const cn = utilities_1.bemHOF("FileUpload");
 const ERROR_TIMEOUT = 5000;
-const FileUploadInput = ({ inputProps, className, accept, label = "Select file", ...props }) => {
+const FileUploadInput = ({ inputProps, buttonProps, className, accept, label = "Select file", hideFileLabel, ...props }) => {
     const inputRef = react_1.useRef(null);
     const { id: contextId } = react_1.useContext(FormGroupContext_1.FormGroupContext);
     const inputId = inputProps ? inputProps.id : undefined;
@@ -138,8 +138,11 @@ const FileUploadInput = ({ inputProps, className, accept, label = "Select file",
     }, [value, multiple]);
     return (react_1.default.createElement("label", Object.assign({ ref: drop, htmlFor: id, className: classnames_1.default(cn(), isActive && cn({ m: "active" }), className) }, labelRest),
         react_1.default.createElement("input", Object.assign({ className: classnames_1.default(cn({ e: "input" }), inputClassName), ref: inputRef, type: "file", id: id, multiple: props.multiple, accept: accept }, inputRest, { onChange: handleInputChange })),
-        react_1.default.createElement(Button_1.Button, { className: classnames_1.default(cn({ e: "button" })), as: "div", variant: Button_1.BUTTON_VARIANT.SECONDARY }, label),
-        react_1.default.createElement(Truncate_1.Truncate, { className: cn({ e: "truncate" }) }, errorText ? (react_1.default.createElement(Text_1.Text, { as: "span", className: cn({ e: "error" }) }, errorText)) : (react_1.default.createElement(Text_1.Text, { className: classnames_1.default(cn({ e: "fileLabel" })) }, fileLabel)))));
+        react_1.default.createElement(Button_1.Button, Object.assign({ className: classnames_1.default(cn({ e: "button" })), as: "div", variant: Button_1.BUTTON_VARIANT.SECONDARY, tabIndex: -1 }, buttonProps), label),
+        errorText && (react_1.default.createElement(Truncate_1.Truncate, { className: cn({ e: "truncate" }) },
+            react_1.default.createElement(Text_1.Text, { as: "span", className: cn({ e: "error" }) }, errorText))),
+        !hideFileLabel && (react_1.default.createElement(Truncate_1.Truncate, { className: cn({ e: "truncate" }) },
+            react_1.default.createElement(Text_1.Text, { className: classnames_1.default(cn({ e: "fileLabel" })) }, fileLabel)))));
 };
 const FileUploadDnD = (props) => {
     return (react_1.default.createElement(react_dnd_1.DndProvider, { backend: react_dnd_html5_backend_1.HTML5Backend },

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,7 +2,11 @@ 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",
+    BADGE_CHECK = "badge-check",
+    COMMENT_ALT_CHECK = "comment-alt-check",
     DIALOG_CHECK = "dialog-check",
+    FOLDERS = "folders",
     SCROLL = "scroll",
     SPARKLE = "sparkle",
     TRIANGLE_DOWN = "triangle-down",
@@ -16,11 +20,17 @@ 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_LEFT = "caret-left",
+    CARET_RIGHT = "caret-right",
     CARET_UP = "caret-up",
+    CHART_LINE = "chart-line",
     CHECK = "check",
     CHECK_CIRCLE = "check-circle",
     CHEVRON_DOWN = "chevron-down",
@@ -34,10 +44,13 @@ export declare enum ICON_TYPE {
     COG = "cog",
     COLUMNS = "columns",
     COMMENT_ALT = "comment-alt",
+    COMPASS = "compass",
     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",
@@ -56,6 +69,7 @@ export declare enum ICON_TYPE {
     GRIP_LINES = "grip-lines",
     GRIP_LINES_VERTICAL = "grip-lines-vertical",
     HASHTAG = "hashtag",
+    HIGHLIGHTER = "highlighter",
     INFO_CIRCLE = "info-circle",
     KEY = "key",
     KEYBOARD = "keyboard",
@@ -67,6 +81,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 +89,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",
@@ -93,12 +112,15 @@ export declare enum ICON_TYPE {
     TH_LARGE = "th-large",
     THUMBS_DOWN = "thumbs-down",
     THUMBS_UP = "thumbs-up",
+    TOOLS = "tools",
     TRASH = "trash",
+    UNLOCK = "unlock",
     USER = "user",
     USER_ASTRONAUT = "user-astronaut",
     USER_PLUS = "user-plus",
     USERS = "users",
-    USER_FRIENDS = "user-friends"
+    USER_FRIENDS = "user-friends",
+    USER_SHIELD = "user-shield"
 }
 export declare enum ICON_STYLE_PREFIX {
     SOLID = "fas",
@@ -125,4 +147,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 {};