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

package/package.json

@@ -2,7 +2,7 @@
   "name": "@conveyorhq/arrow-ds",
   "author": "Conveyor",
   "license": "MIT",
-  "version": "2.0.0-beta.5",
+  "version": "2.0.0-beta.9",
   "description": "Arrow Design System",
   "repository": "https://github.com/conveyor/arrow-ds",
   "publishConfig": {
@@ -50,14 +50,18 @@
   },
   "scripts": {
     "prepublishOnly": "yarn run build",
-    "build": "yarn run build:clean && yarn run build:ts && yarn run build:css && yarn run minify:css && yarn run build:copy-files",
+    "build": "yarn run style-dictionary:build && yarn run build:clean && yarn run build:ts && yarn run build:css && yarn run minify:css && yarn run build:copy-files",
     "build:clean": "node utilities/clean.js",
     "build:ts": "tsc -b",
     "build:css": "yarn run postcss -c postcss.config.js -o public/css/styles.css src/css/styles.css",
-    "build:copy-files": "copyfiles -u 1 src/**/*.svg public/",
+    "build:copy-files": "yarn run build:copy-svg && yarn run build:copy-style-dictionary",
+    "build:copy-svg": "copyfiles -u 1 src/**/*.svg public/",
+    "build:copy-style-dictionary": "copyfiles src/style-dictionary/dist/* src/style-dictionary/tailwind.config.js public/",
     "minify:css": "csso public/css/styles.css --output public/css/styles.min.css --comments none --source-map file",
     "storybook": "yarn run build && start-storybook --docs -p 9002 -c .storybook -s .storybook",
     "build-storybook": "yarn run build && build-storybook --docs -c .storybook -s .storybook -o storybook-static",
+    "style-dictionary:build": "style-dictionary build --config ./style-dictionary.config.js",
+    "style-dictionary:clean": "style-dictionary clean --config ./style-dictionary.config.js",
     "generate": "plop",
     "lint:check": "prettier --check 'src/**/**.{ts,tsx,js,css,mdx}' && eslint 'src/**/**.{ts,tsx,js,mdx}'",
     "lint:fix": "eslint 'src/**/**.{ts,tsx,js,mdx}' --fix && prettier --write 'src/**/**.{ts,tsx,js,css,mdx}'",
@@ -73,7 +77,7 @@
   },
   "release": {
     "branches": [
-      "master",
+      "main",
       {
         "name": "alpha",
         "prerelease": true
@@ -98,17 +102,20 @@
     "@babel/preset-env": "^7.9.0",
     "@babel/preset-react": "^7.7.0",
     "@babel/preset-typescript": "^7.7.2",
-    "@commitlint/cli": "^9.0.1",
-    "@commitlint/config-conventional": "^9.0.1",
-    "@storybook/addon-actions": "^6.2.1",
-    "@storybook/addon-docs": "^6.2.1",
+    "@commitlint/cli": "^16.2.1",
+    "@commitlint/config-conventional": "^16.2.1",
+    "@storybook/addon-actions": "^v6.5.0-alpha.44",
+    "@storybook/addon-docs": "^v6.5.0-alpha.44",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/react": "^6.2.1",
-    "@storybook/theming": "^6.2.1",
+    "@storybook/builder-webpack5": "^6.4.19",
+    "@storybook/manager-webpack5": "^6.4.19",
+    "@storybook/react": "^v6.5.0-alpha.44",
+    "@storybook/theming": "^v6.5.0-alpha.44",
     "@types/classnames": "^2.2.9",
     "@types/codemirror": "^0.0.91",
     "@types/d3-ease": "^1.0.9",
     "@types/jest": "^24.0.22",
+    "@types/lodash.camelcase": "^4.3.6",
     "@types/md5": "^2.2.1",
     "@types/mime-types": "^2.1.0",
     "@types/node": "^12.12.6",
@@ -117,44 +124,45 @@
     "@types/react-dom": "^16.9.4",
     "@types/react-fontawesome": "^1.6.4",
     "@types/react-select": "^3.0.8",
-    "@types/tailwindcss": "^2.0.0",
-    "@types/webpack": "^4.41.0",
+    "@types/tailwindcss": "^3.0.1",
+    "@types/webpack": "^5.0.0",
     "@typescript-eslint/eslint-plugin": "^4.18.0",
     "@typescript-eslint/parser": "^4.18.0",
-    "autoprefixer": "^10.2.5",
+    "autoprefixer": "^10.4.0",
     "babel-loader": "^8.0.6",
-    "babel-plugin-inline-react-svg": "^1.1.0",
+    "babel-plugin-inline-react-svg": "^2.0.0",
     "copyfiles": "^2.4.1",
     "csso-cli": "^3.0.0",
-    "eslint": "^7.22.0",
+    "eslint": "^7.32.0",
     "eslint-config-airbnb-typescript": "^12.3.1",
     "eslint-config-prettier": "^8.1.0",
     "eslint-formatter-pretty": "^4.0.0",
     "eslint-import-resolver-typescript": "^2.4.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-mdx": "^1.11.1",
+    "eslint-plugin-mdx": "^1.16.0",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "fs-extra": "^8.1.0",
     "husky": "^3.1.0",
+    "lodash.camelcase": "^4.3.0",
     "plop": "^2.5.3",
-    "postcss": "^8.2.8",
-    "postcss-cli": "^8.3.1",
-    "postcss-import": "^12.0.1",
+    "postcss": "^8.4.7",
+    "postcss-cli": "^9.0.2",
+    "postcss-import": "^14.0.2",
     "prettier": "^2.2.1",
     "react": "^16.11.0",
     "react-docgen-typescript-loader": "^3.6.0",
     "react-dom": "^16.11.0",
     "react-is": "^16.12.0",
     "regenerator-runtime": "^0.13.3",
-    "semantic-release": "^17.0.8",
-    "storybook-readme": "^5.0.9",
-    "tailwindcss": "^2.0.3",
+    "semantic-release": "^19.0.2",
+    "style-dictionary": "^3.1.1",
+    "tailwindcss": "^3.0.23",
     "ts-loader": "^6.2.1",
     "typescript": "^4.2.3",
-    "webpack": "^4.41.2",
+    "webpack": "^5.0.0",
     "webpack-bundle-analyzer": "^3.6.0"
   },
   "peerDependencies": {

package/public/components/Accordion/Accordion.d.ts

@@ -1,21 +1,33 @@
-import { ReactNode } from "react";
+import React from "react";
 import { BoxProps } from "../Box";
-export interface AccordionProps extends BoxProps {
-    title: string;
-    isActive?: boolean;
+import { StackProps } from "../Stack";
+import type { AccordionOwnProps, AccordionItemOwnProps, AccordionDisclosureProps, AccordionGroupOwnProps } from "./types";
+export declare type AccordionGroupProps = AccordionGroupOwnProps & Pick<StackProps, "children" | "spacing">;
+export declare const AccordionGroup: ({ children, spacing, defaultValue, ...rest }: AccordionGroupProps) => JSX.Element;
+export declare type AccordionItemProps = AccordionItemOwnProps & BoxProps;
+export declare const AccordionItem: ({ value, defaultIsOpen: defaultIsOpenProp, children, className, ...rest }: AccordionItemProps) => JSX.Element;
+declare type AccordionButtonChildProps = Omit<AccordionDisclosureProps, "onToggle">;
+declare type AccordionButtonChildFunction = {
+    children(props: AccordionButtonChildProps): React.ReactNode;
+};
+declare type AccordionButtonOwnProps = AccordionButtonChildFunction | {
+    children: React.ReactNode;
+};
+export declare type AccordionButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & AccordionButtonOwnProps;
+export declare const AccordionButton: React.ForwardRefExoticComponent<AccordionButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export declare type AccordionContentProps = {
+    children: React.ReactNode;
     maxHeight?: string;
-    defaultIsOpen?: boolean;
-    iconSlot?: ReactNode;
-    removePadding?: ReactNode;
-}
-export declare const AccordionGroup: ({ children, className, ...rest }: {
-    children: ReactNode;
-    className?: string | undefined;
-}) => JSX.Element;
+    style?: React.CSSProperties;
+    className?: string;
+};
+export declare const AccordionContent: ({ children, maxHeight, style, className, ...rest }: AccordionContentProps) => JSX.Element;
+export declare type AccordionProps = AccordionOwnProps & BoxProps;
 export declare const Accordion: {
-    ({ title, isActive, maxHeight, children, defaultIsOpen, iconSlot, className, removePadding, ...rest }: AccordionProps): JSX.Element;
-    Group: ({ children, className, ...rest }: {
-        children: ReactNode;
-        className?: string | undefined;
-    }) => JSX.Element;
+    (props: AccordionProps): JSX.Element;
+    Group: ({ children, spacing, defaultValue, ...rest }: AccordionGroupProps) => JSX.Element;
+    Item: ({ value, defaultIsOpen: defaultIsOpenProp, children, className, ...rest }: AccordionItemProps) => JSX.Element;
+    Button: React.ForwardRefExoticComponent<AccordionButtonProps & React.RefAttributes<HTMLButtonElement>>;
+    Content: ({ children, maxHeight, style, className, ...rest }: AccordionContentProps) => JSX.Element;
 };
+export {};

package/public/components/Accordion/Accordion.js

@@ -1,83 +1,103 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Accordion = exports.AccordionGroup = void 0;
-const react_1 = __importStar(require("react"));
+exports.Accordion = exports.AccordionContent = exports.AccordionButton = exports.AccordionItem = exports.AccordionGroup = void 0;
+const react_1 = __importDefault(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const renderprops_1 = require("react-spring/renderprops");
 const component_size_1 = __importDefault(require("@rehooks/component-size"));
 const auto_id_1 = require("@reach/auto-id");
+const react_merge_refs_1 = __importDefault(require("react-merge-refs"));
+const utilities_1 = require("../../utilities");
+const hooks_1 = require("../../hooks");
+const types_1 = require("../../types");
 const Box_1 = require("../Box");
 const Flex_1 = require("../Flex");
+const Stack_1 = require("../Stack");
 const Heading_1 = require("../Heading");
 const Icon_1 = require("../Icon");
-const bem_1 = require("../../utilities/bem");
-const hooks_1 = require("../../hooks");
-const cn = bem_1.bemHOF("Accordion");
-const AccordionGroup = ({ children, className, ...rest }) => (react_1.default.createElement(Flex_1.Flex, Object.assign({ className: classnames_1.default("flex-col", className) }, rest), children));
+const context_1 = require("./context");
+const cn = utilities_1.bemHOF("Accordion");
+const AccordionGroup = ({ children, spacing = 0, defaultValue, ...rest }) => {
+    return (react_1.default.createElement(context_1.AccordionGroupContext.Provider, { value: { defaultValue } },
+        react_1.default.createElement(Stack_1.Stack, Object.assign({ orientation: types_1.ORIENTATION.VERTICAL, spacing: spacing }, rest), children)));
+};
 exports.AccordionGroup = AccordionGroup;
-const Accordion = ({ title, isActive, maxHeight, children, defaultIsOpen = false, iconSlot, className, removePadding, ...rest }) => {
+const AccordionItem = ({ value, defaultIsOpen: defaultIsOpenProp, children, className, ...rest }) => {
+    const { defaultValue } = context_1.useAccordionGroupContext();
+    const hasDefaultValue = typeof defaultValue === "undefined" ? false : defaultValue === value;
+    const defaultIsOpen = typeof defaultIsOpenProp === "undefined"
+        ? hasDefaultValue
+        : defaultIsOpenProp;
     const { isOpen, onToggle } = hooks_1.useDisclosure(defaultIsOpen);
-    const buttonRef = react_1.useRef(null);
-    const [childrenRef, setChildrenRef] = react_1.useState({ current: null });
-    const onRefChange = react_1.useCallback((node) => {
+    const id = `accordion-${auto_id_1.useId()}`;
+    const buttonId = `${id}-button`;
+    const contentId = `${id}-content`;
+    return (react_1.default.createElement(context_1.AccordionItemContext.Provider, { value: {
+            defaultIsOpen,
+            isOpen,
+            onToggle,
+            buttonId,
+            contentId,
+        } },
+        react_1.default.createElement(Box_1.Box, Object.assign({ "data-component": "accordion", className: classnames_1.default(cn(), className, {
+                [cn({ m: "isOpen" })]: isOpen,
+            }) }, rest), children)));
+};
+exports.AccordionItem = AccordionItem;
+exports.AccordionButton = react_1.default.forwardRef((props, forwardedRef) => {
+    const { children, className, onClick, disabled = false, ...rest } = props;
+    const { buttonId, contentId, isOpen, onToggle } = context_1.useAccordionItemContext();
+    const buttonRef = react_1.default.useRef(null);
+    const ref = react_merge_refs_1.default([forwardedRef, buttonRef]);
+    return (react_1.default.createElement("button", Object.assign({ ref: ref, type: "button", className: className, id: buttonId, "aria-controls": contentId, "aria-expanded": isOpen, "aria-disabled": disabled, disabled: disabled, onClick: (event) => {
+            if (onClick) {
+                onClick(event);
+            }
+            if (onToggle) {
+                onToggle();
+            }
+        } }, rest), typeof children === "function" ? children({ isOpen }) : children));
+});
+const AccordionContent = ({ children, maxHeight, style, className, ...rest }) => {
+    const { buttonId, contentId, defaultIsOpen, isOpen, } = context_1.useAccordionItemContext();
+    const [childrenRef, setChildrenRef] = react_1.default.useState({ current: null });
+    const onRefChange = react_1.default.useCallback((node) => {
         if (node !== null) {
             setChildrenRef({ current: node });
         }
     }, []);
     const { height } = component_size_1.default(childrenRef);
     const heightObj = { height };
-    const id = `accordion:${auto_id_1.useId()}`;
-    const buttonId = `${id}-button`;
-    const contentId = `${id}-content`;
-    const [enableTransition, setEnableTransition] = react_1.useState(!defaultIsOpen);
-    const handleItemClick = () => {
-        if (isOpen && buttonRef.current !== null) {
-            buttonRef.current.blur();
-        }
-        onToggle();
-    };
-    return (react_1.default.createElement(Box_1.Box, Object.assign({ className: classnames_1.default(cn(), className, {
-            [cn({ m: "isOpen" })]: isOpen,
-        }) }, rest),
+    const [enableTransition, setEnableTransition] = react_1.default.useState(!defaultIsOpen);
+    return (react_1.default.createElement(renderprops_1.Transition, { items: isOpen, from: { height: 0 }, enter: { height }, leave: { height: 0 }, update: heightObj, onRest: () => {
+            if (defaultIsOpen && isOpen) {
+                setEnableTransition(true);
+            }
+        }, immediate: !enableTransition }, (show) => show
+        ? (styles) => (react_1.default.createElement(Box_1.Box, Object.assign({ className: classnames_1.default("overflow-hidden box-content", className), style: { ...styles, ...style }, "aria-labelledby": buttonId, id: contentId, role: "region" }, rest),
+            react_1.default.createElement(Box_1.Box, { ref: onRefChange, className: classnames_1.default(maxHeight && "overflow-y-auto"), style: maxHeight ? { maxHeight } : undefined }, children)))
+        : null));
+};
+exports.AccordionContent = AccordionContent;
+const Accordion = (props) => {
+    const { title, isActive, maxHeight, children, iconSlot, className, removePadding, ...rest } = props;
+    return (react_1.default.createElement(exports.AccordionItem, Object.assign({ className: className }, rest),
         react_1.default.createElement(Heading_1.Heading.H5, null,
-            react_1.default.createElement("button", { type: "button", onClick: handleItemClick, className: classnames_1.default(cn({ e: "button" }), {
+            react_1.default.createElement(exports.AccordionButton, { className: classnames_1.default(cn({ e: "button" }), {
                     [cn({ e: "button", m: "isActive" })]: isActive,
-                }), ref: buttonRef, id: buttonId, "aria-controls": contentId, "aria-expanded": isOpen, "aria-disabled": "false" },
+                }) },
                 react_1.default.createElement(Flex_1.Flex, { className: "items-center", as: "span" },
                     iconSlot && (react_1.default.createElement(Box_1.Box, { className: classnames_1.default(cn({ e: "icon" })), as: "span" }, iconSlot)),
                     title),
                 react_1.default.createElement(Icon_1.Icon, { icon: Icon_1.ICON_TYPE.CHEVRON_DOWN, className: cn({ e: "chevronIcon" }) }))),
-        react_1.default.createElement(renderprops_1.Transition, { items: isOpen, from: { height: 0 }, enter: { height }, leave: { height: 0 }, update: heightObj, onRest: () => {
-                if (defaultIsOpen && isOpen) {
-                    setEnableTransition(true);
-                }
-            }, immediate: !enableTransition }, (show) => {
-            return (show &&
-                ((props) => (react_1.default.createElement("div", { style: props, className: cn({ e: "content" }) },
-                    react_1.default.createElement(Box_1.Box, { ref: onRefChange, className: classnames_1.default(cn({ e: "children" }), !removePadding && cn({ e: "children", m: "padded" })), style: maxHeight ? { maxHeight } : undefined, id: contentId, "aria-labelledby": buttonId }, children)))));
-        })));
+        react_1.default.createElement(exports.AccordionContent, { className: cn({ e: "content" }), maxHeight: maxHeight },
+            react_1.default.createElement(Box_1.Box, { className: classnames_1.default(cn({ e: "children" }), !removePadding && cn({ e: "children", m: "padded" })) }, children))));
 };
 exports.Accordion = Accordion;
 exports.Accordion.Group = exports.AccordionGroup;
+exports.Accordion.Item = exports.AccordionItem;
+exports.Accordion.Button = exports.AccordionButton;
+exports.Accordion.Content = exports.AccordionContent;

package/public/components/Accordion/context.d.ts

@@ -0,0 +1,12 @@
+import { Context } from "react";
+import type { AccordionGroupOwnProps, AccordionItemOwnProps, AccordionDisclosureProps } from "./types";
+declare type AccordionGroupContextType = AccordionGroupOwnProps;
+export declare const AccordionGroupContext: Context<AccordionGroupContextType>;
+export declare function useAccordionGroupContext(): AccordionGroupOwnProps;
+declare type AccordionItemContextType = AccordionItemOwnProps & AccordionDisclosureProps & {
+    buttonId: string;
+    contentId: string;
+};
+export declare const AccordionItemContext: Context<AccordionItemContextType>;
+export declare function useAccordionItemContext(): AccordionItemContextType;
+export {};

package/public/components/Accordion/context.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAccordionItemContext = exports.AccordionItemContext = exports.useAccordionGroupContext = exports.AccordionGroupContext = void 0;
+const react_1 = require("react");
+const defaultGroupContext = {
+    defaultValue: undefined,
+};
+exports.AccordionGroupContext = react_1.createContext(defaultGroupContext);
+function useAccordionGroupContext() {
+    const context = react_1.useContext(exports.AccordionGroupContext) || {
+        ...defaultGroupContext,
+    };
+    return context;
+}
+exports.useAccordionGroupContext = useAccordionGroupContext;
+const defaultContext = {
+    defaultIsOpen: false,
+    isOpen: false,
+    onToggle: () => { },
+    buttonId: "accordion-0-button",
+    contentId: "accordion-0-content",
+};
+exports.AccordionItemContext = react_1.createContext(defaultContext);
+function useAccordionItemContext() {
+    const context = react_1.useContext(exports.AccordionItemContext) || {
+        ...defaultContext,
+    };
+    return context;
+}
+exports.useAccordionItemContext = useAccordionItemContext;

package/public/components/Accordion/index.d.ts

@@ -1 +1,2 @@
 export * from "./Accordion";
+export * from "./context";

package/public/components/Accordion/index.js

@@ -11,3 +11,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./Accordion"), exports);
+__exportStar(require("./context"), exports);

package/public/components/Accordion/types.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+import type { DisclosureProps } from "../../types";
+export declare type AccordionGroupOwnProps = {
+    defaultValue?: string;
+};
+export declare type AccordionItemOwnProps = {
+    defaultIsOpen?: boolean;
+    value?: string;
+};
+export declare type AccordionOwnProps = Pick<AccordionItemOwnProps, "defaultIsOpen"> & {
+    title: string;
+    isActive?: boolean;
+    maxHeight?: string;
+    iconSlot?: ReactNode;
+    removePadding?: ReactNode;
+};
+export declare type AccordionDisclosureProps = Pick<DisclosureProps, "isOpen" | "onToggle">;

package/public/components/Accordion/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

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

package/public/components/Avatar/Avatar.js

@@ -27,7 +27,7 @@ const react_1 = __importStar(require("react"));
 const md5_1 = __importDefault(require("md5"));
 const classnames_1 = __importDefault(require("classnames"));
 const bem_1 = require("../../utilities/bem");
-const tokens_1 = require("../../tokens");
+const tokens_1 = require("../../style-dictionary/dist/tokens");
 const Box_1 = require("../Box");
 const Icon_1 = require("../Icon");
 const Flex_1 = require("../Flex");
@@ -39,35 +39,36 @@ const AvatarGroup_1 = require("./AvatarGroup");
 const types_1 = require("./types");
 const context_1 = require("./context");
 const cn = bem_1.bemHOF("Avatar");
+const { color } = tokens_1.tokens;
 const SystemIcon = (props) => {
     return (react_1.default.createElement(Svg_1.Svg, Object.assign({ viewBox: "0 0 32 32" }, props),
-        react_1.default.createElement("path", { fill: tokens_1.colors.brandGreen["400"], d: "M19.042 31.58c-1.17 0.275-2.389 0.42-3.642 0.42-0.24 0-0.479-0.005-0.716-0.016v-2.851c0-1.318-1.285-2.25-2.533-1.843-1.934 0.63-3.873 1.249-5.809 1.872-1.371-0.954-2.586-2.118-3.598-3.447l7.94-2.602c1.96-0.637 4.054-0.299 5.721 0.918s2.633 3.115 2.637 5.186l0.001 2.362z" }),
-        react_1.default.createElement("path", { fill: tokens_1.colors.brandGreen["400"], d: "M20.856 31.037l0.004-8.342c-0.003-2.071 0.95-3.969 2.636-5.191 1.647-1.216 3.736-1.548 5.716-0.909l2.066 0.675c-0.117 1.502-0.441 2.946-0.943 4.302-0.876-0.286-1.751-0.576-2.627-0.861-1.23-0.401-2.48 0.525-2.48 1.824v6.057c-1.308 1.032-2.781 1.862-4.372 2.445z" }),
-        react_1.default.createElement("path", { fill: tokens_1.colors.brandGreen["400"], d: "M31.314 15.338l-7.709-2.523c-1.98-0.64-3.471-2.149-4.105-4.12s-0.299-4.075 0.911-5.75l1.212-1.677c1.363 0.582 2.629 1.349 3.767 2.27-0.512 0.704-1.032 1.403-1.555 2.099-0.802 1.066-0.321 2.608 0.946 3.015l5.558 1.785c0.567 1.536 0.906 3.184 0.976 4.901z" }),
-        react_1.default.createElement("path", { fill: tokens_1.colors.brandGreen["400"], d: "M14.89 0.008c0.169-0.005 0.339-0.008 0.509-0.008 1.534 0 3.017 0.218 4.421 0.624l-4.725 6.537c-1.211 1.675-3.098 2.645-5.159 2.648s-3.949-0.956-5.166-2.651l-1.287-1.776c0.971-1.099 2.091-2.063 3.327-2.859l1.565 2.223c0.764 1.085 2.365 1.090 3.135 0.008l3.379-4.747z" }),
-        react_1.default.createElement("path", { fill: tokens_1.colors.brandGreen["400"], d: "M0.145 11.383c0.487-1.624 1.223-3.14 2.165-4.502l4.823 6.663c1.217 1.695 1.548 3.795 0.906 5.745-0.636 1.99-2.137 3.487-4.097 4.124l-2.253 0.733c-0.737-1.249-1.31-2.608-1.689-4.046l2.681-0.912c1.244-0.423 1.711-1.948 0.93-3.009-1.168-1.589-2.318-3.193-3.466-4.797z" })));
+        react_1.default.createElement("path", { fill: color.brandGreen["400"], d: "M19.042 31.58c-1.17 0.275-2.389 0.42-3.642 0.42-0.24 0-0.479-0.005-0.716-0.016v-2.851c0-1.318-1.285-2.25-2.533-1.843-1.934 0.63-3.873 1.249-5.809 1.872-1.371-0.954-2.586-2.118-3.598-3.447l7.94-2.602c1.96-0.637 4.054-0.299 5.721 0.918s2.633 3.115 2.637 5.186l0.001 2.362z" }),
+        react_1.default.createElement("path", { fill: color.brandGreen["400"], d: "M20.856 31.037l0.004-8.342c-0.003-2.071 0.95-3.969 2.636-5.191 1.647-1.216 3.736-1.548 5.716-0.909l2.066 0.675c-0.117 1.502-0.441 2.946-0.943 4.302-0.876-0.286-1.751-0.576-2.627-0.861-1.23-0.401-2.48 0.525-2.48 1.824v6.057c-1.308 1.032-2.781 1.862-4.372 2.445z" }),
+        react_1.default.createElement("path", { fill: color.brandGreen["400"], d: "M31.314 15.338l-7.709-2.523c-1.98-0.64-3.471-2.149-4.105-4.12s-0.299-4.075 0.911-5.75l1.212-1.677c1.363 0.582 2.629 1.349 3.767 2.27-0.512 0.704-1.032 1.403-1.555 2.099-0.802 1.066-0.321 2.608 0.946 3.015l5.558 1.785c0.567 1.536 0.906 3.184 0.976 4.901z" }),
+        react_1.default.createElement("path", { fill: color.brandGreen["400"], d: "M14.89 0.008c0.169-0.005 0.339-0.008 0.509-0.008 1.534 0 3.017 0.218 4.421 0.624l-4.725 6.537c-1.211 1.675-3.098 2.645-5.159 2.648s-3.949-0.956-5.166-2.651l-1.287-1.776c0.971-1.099 2.091-2.063 3.327-2.859l1.565 2.223c0.764 1.085 2.365 1.090 3.135 0.008l3.379-4.747z" }),
+        react_1.default.createElement("path", { fill: color.brandGreen["400"], d: "M0.145 11.383c0.487-1.624 1.223-3.14 2.165-4.502l4.823 6.663c1.217 1.695 1.548 3.795 0.906 5.745-0.636 1.99-2.137 3.487-4.097 4.124l-2.253 0.733c-0.737-1.249-1.31-2.608-1.689-4.046l2.681-0.912c1.244-0.423 1.711-1.948 0.93-3.009-1.168-1.589-2.318-3.193-3.466-4.797z" })));
 };
 const SystemIconConveyor = (props) => (react_1.default.createElement(SystemIcon, Object.assign({}, props)));
 exports.SystemIconConveyor = SystemIconConveyor;
 const SystemIconAptible = (props) => (react_1.default.createElement(Svg_1.Svg, Object.assign({ viewBox: "0 0 40 32" }, props),
-    react_1.default.createElement("path", { fill: tokens_1.colors.gold["400"], d: "M22.018 31.667h5.646v-11.538l11.291 11.538v-7.692l-16.937-17.308z" }),
-    react_1.default.createElement("path", { fill: tokens_1.colors.gold["400"], d: "M27.777 0h-7.452l18.631 18.333v-7.333l-11.178-11z" }),
-    react_1.default.createElement("path", { fill: tokens_1.colors.gold["400"], d: "M0 23.974v7.692l11.291-11.538v11.538h5.646v-25l-16.937 17.308z" }),
-    react_1.default.createElement("path", { fill: tokens_1.colors.gold["400"], d: "M0 11v7.333l18.631-18.333h-7.522l-11.109 11z" })));
+    react_1.default.createElement("path", { fill: color.gold["400"], d: "M22.018 31.667h5.646v-11.538l11.291 11.538v-7.692l-16.937-17.308z" }),
+    react_1.default.createElement("path", { fill: color.gold["400"], d: "M27.777 0h-7.452l18.631 18.333v-7.333l-11.178-11z" }),
+    react_1.default.createElement("path", { fill: color.gold["400"], d: "M0 23.974v7.692l11.291-11.538v11.538h5.646v-25l-16.937 17.308z" }),
+    react_1.default.createElement("path", { fill: color.gold["400"], d: "M0 11v7.333l18.631-18.333h-7.522l-11.109 11z" })));
 exports.SystemIconAptible = SystemIconAptible;
 const avatarInitialBackgroundColors = [
-    tokens_1.colors.green["600"],
-    tokens_1.colors.gold["600"],
-    tokens_1.colors.orange["600"],
-    tokens_1.colors.red["600"],
-    tokens_1.colors.pink["600"],
-    tokens_1.colors.purple["600"],
-    tokens_1.colors.blue["600"],
-    tokens_1.colors.cyan["600"],
+    color.green["600"],
+    color.gold["600"],
+    color.orange["600"],
+    color.red["600"],
+    color.pink["600"],
+    color.purple["600"],
+    color.blue["600"],
+    color.cyan["600"],
 ];
 const Initials = ({ email, name, firstInitial, lastInitial, }) => {
     const initialsBgColor = react_1.useMemo(() => {
-        const fallbackColor = tokens_1.colors.gray["600"];
+        const fallbackColor = color.gray["600"];
         if (!email)
             return fallbackColor;
         let hash = 0;

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

@@ -4,7 +4,7 @@ import { BoxProps } from "../Box";
 import { AvatarSize } from "./types";
 export interface AvatarGroupProps extends BoxProps {
     children: ReactNode[];
-    spacing?: "overlap" | Spacing;
+    spacing?: "overlap" | "overlap-reverse" | Spacing;
     size?: AvatarSize;
 }
 export declare const AvatarGroup: ({ children, spacing, size, className, ...rest }: AvatarGroupProps) => JSX.Element;

package/public/components/Avatar/AvatarGroup.js

@@ -32,7 +32,17 @@ const cn = bem_1.bemHOF("AvatarGroup");
 const AvatarGroup = ({ children, spacing = 0, size = "medium", className, ...rest }) => {
     const validChildren = react_1.Children.toArray(children).filter((child) => react_1.isValidElement(child));
     const reversedChildren = validChildren.reverse();
-    return (react_1.default.createElement(Flex_1.Flex, Object.assign({ className: classnames_1.default(cn(), spacing === "overlap" ? cn({ m: "overlap" }) : `gap-${spacing}`, className) }, rest),
+    let spacingClass = "";
+    if (spacing === "overlap") {
+        spacingClass = cn({ m: "overlap" });
+    }
+    else if (spacing === "overlap-reverse") {
+        spacingClass = cn({ m: "overlap-reverse" });
+    }
+    else {
+        spacingClass = `gap-${spacing}`;
+    }
+    return (react_1.default.createElement(Flex_1.Flex, Object.assign({ className: classnames_1.default(cn(), spacingClass, className) }, rest),
         react_1.default.createElement(context_1.AvatarContext.Provider, { value: { size } }, reversedChildren)));
 };
 exports.AvatarGroup = AvatarGroup;

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