beem-component 1.0.0 → 1.0.4

package/dist/components/{Accordion.js → Accordion/Accordion.js}

@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -13,9 +13,11 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _colors = require("./colors");
+var _colors = require("../colors");
 
-var _iconStyles = require("./iconStyles");
+var _iconStyles = require("../iconStyles");
+
+var _icons = require("@material-ui/icons");
 
 var _excluded = ["children", "disabled", "expandIcon"],
     _excluded2 = ["children", "leadingIcon", "trailingIcon", "size"];
@@ -28,8 +30,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -48,6 +48,8 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 var _React$createContext = /*#__PURE__*/_react.default.createContext({}),
     Provider = _React$createContext.Provider,
     Consumer = _React$createContext.Consumer;
@@ -58,7 +60,11 @@ var Dropdown = function Dropdown(value, rest) {
   }
 
   if (!value.expandIcon) {
-    return value.toggle ? /*#__PURE__*/_react.default.createElement(_iconStyles.BmDropupIcon, rest) : /*#__PURE__*/_react.default.createElement(_iconStyles.BmDropdownIcon, rest);
+    return value.toggle ? /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, _extends({
+      icon: /*#__PURE__*/_react.default.createElement(_icons.KeyboardArrowDown, null)
+    }, rest)) : /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, _extends({
+      icon: /*#__PURE__*/_react.default.createElement(_icons.KeyboardArrowUp, null)
+    }, rest));
   }
 
   if (value.expandIcon && value.expandIcon !== "none") {

package/dist/components/Accordion/Accordion.stories.js

@@ -0,0 +1,86 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Accordion = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Accordion = _interopRequireDefault(require("./Accordion"));
+
+var _addonKnobs = require("@storybook/addon-knobs");
+
+var _icons = require("@material-ui/icons");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable import/no-anonymous-default-export */
+var _default = {
+  component: _Accordion.default,
+  subcomponents: _Accordion.default.Title,
+  title: "components/Accordion",
+  argTypes: {
+    size: {
+      options: ["small", "medium", "large"],
+      control: {
+        type: "select"
+      },
+      description: "Size of the icons",
+      defaultValue: {
+        summary: "large"
+      }
+    },
+    disabled: {
+      description: "Optional",
+      defaultValue: {
+        summary: false
+      },
+      control: {
+        type: "boolean"
+      }
+    },
+    children: {
+      description: "Accordion Title Text",
+      defaultValue: {
+        summary: undefined
+      }
+    },
+    expandIcon: {
+      description: "'none' or Material-UI icon (optional)",
+      defaultValue: {
+        summary: undefined
+      }
+    },
+    leadingIcon: {
+      description: "Material-UI icon(optional)",
+      defaultValue: {
+        summary: undefined
+      }
+    },
+    trailingIcon: {
+      description: "Material-UI icon(optional)",
+      defaultValue: {
+        summary: undefined
+      }
+    }
+  }
+};
+exports.default = _default;
+var optionSize = {
+  small: "small",
+  medium: "medium",
+  large: "large"
+};
+
+var Accordion = function Accordion() {
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Accordion.default, {
+    disabled: (0, _addonKnobs.boolean)("disabled", false)
+  }, /*#__PURE__*/_react.default.createElement(_Accordion.default.Title, {
+    leadingIcon: /*#__PURE__*/_react.default.createElement(_icons.Home, null),
+    trailingIcon: /*#__PURE__*/_react.default.createElement(_icons.Favorite, null),
+    size: (0, _addonKnobs.select)("size", optionSize, "large")
+  }, /*#__PURE__*/_react.default.createElement("h3", null, (0, _addonKnobs.text)("children", "Accordion"))), /*#__PURE__*/_react.default.createElement(_Accordion.default.Body, null, "Accordion Body")));
+};
+
+exports.Accordion = Accordion;

package/dist/components/{avatars.js → Avatars/avatars.js}

@@ -3,19 +3,23 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.BmAvatar = exports.BmAvatarWrapper = void 0;
+exports.BmAvatarWrapper = exports.BmAvatar = void 0;
 
 var _icons = require("@material-ui/icons");
 
 var _react = _interopRequireDefault(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _colors = require("./colors");
+var _colors = require("../colors");
+
+var _iconStyles = require("../iconStyles");
 
-var _iconStyles = require("./iconStyles");
+var _SmartToy = _interopRequireDefault(require("@mui/icons-material/SmartToy"));
 
-var _excluded = ["user", "size"];
+var _excluded = ["user", "size", "color"];
 
 var _templateObject;
 
@@ -35,14 +39,16 @@ var BmAvatarWrapper = _styledComponents.default.div(_templateObject || (_templat
   if (size === "medium") return "2.286rem";
   if (size === "small") return "1.714rem";
   if (size === "xsmall") return "1.429rem";
-  return "3.429rem";
+  if (!size) return "3.429rem";
+  return size;
 }, function (_ref2) {
   var size = _ref2.size;
   if (size === "large") return "3.429rem";
   if (size === "medium") return "2.286rem";
   if (size === "small") return "1.714rem";
   if (size === "xsmall") return "1.429rem";
-  return "3.429rem";
+  if (!size) return "3.429rem";
+  return size;
 }, function (_ref3) {
   var user = _ref3.user;
   if (user === "chatbot") return "".concat(_colors.BmPrimaryBlue);
@@ -67,17 +73,31 @@ exports.BmAvatarWrapper = BmAvatarWrapper;
 var BmAvatar = function BmAvatar(props) {
   var user = props.user,
       size = props.size,
+      color = props.color,
       rest = _objectWithoutProperties(props, _excluded);
 
   return /*#__PURE__*/_react.default.createElement(BmAvatarWrapper, _extends({
     user: user,
     size: size
-  }, rest), user === "default" && /*#__PURE__*/_react.default.createElement(_iconStyles.BmAvatarIcon, _extends({
+  }, rest), user === "employee" && /*#__PURE__*/_react.default.createElement(_iconStyles.BmAvatarIcon, _extends({
     icon: /*#__PURE__*/_react.default.createElement(_icons.Person, null),
-    size: size
-  }, rest)), user === "chatbot" && /*#__PURE__*/_react.default.createElement(_iconStyles.BmChatbotIcon, _extends({
-    size: size
+    size: size,
+    color: color
+  }, rest)), user === "chatbot" && /*#__PURE__*/_react.default.createElement(_iconStyles.BmAvatarIcon, _extends({
+    icon: /*#__PURE__*/_react.default.createElement(_SmartToy.default, null),
+    size: size,
+    color: color
+  }, rest)), user !== "chatbot" && user !== "employee" && user !== "default" && /*#__PURE__*/_react.default.createElement(_iconStyles.BmAvatarIcon, _extends({
+    icon: user,
+    size: size,
+    color: color
   }, rest)));
 };
 
-exports.BmAvatar = BmAvatar;
+exports.BmAvatar = BmAvatar;
+BmAvatar.propTypes = {
+  size: _propTypes.default.string,
+  type: _propTypes.default.string,
+  color: _propTypes.default.string,
+  user: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node])
+};

package/dist/components/Avatars/avatars.stories.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.CustomAvatar = exports.Avatar = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _avatars = require("./avatars");
+
+var _icons = require("@material-ui/icons");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable import/no-anonymous-default-export */
+var _default = {
+  component: _avatars.BmAvatar,
+  title: "components/Avatars",
+  argTypes: {
+    size: {
+      options: ["xsmall", "small", "medium", "large"],
+      control: {
+        type: "select"
+      },
+      description: "Size of the Avatar",
+      defaultValue: {
+        summary: "large"
+      }
+    },
+    type: {
+      options: ["circle", "square"],
+      control: {
+        type: "select"
+      },
+      description: "Shape of the Avatar",
+      defaultValue: {
+        summary: "circle"
+      }
+    },
+    user: {
+      description: "Type of the Avatar ('chatbot', 'employee' or Material-UI icon)",
+      defaultValue: {
+        summary: undefined
+      }
+    }
+  }
+};
+exports.default = _default;
+
+var MainAvatar = function MainAvatar(args) {
+  return /*#__PURE__*/_react.default.createElement(_avatars.BmAvatar, args);
+};
+
+var Avatar = MainAvatar.bind({});
+exports.Avatar = Avatar;
+Avatar.args = {
+  user: "chatbot",
+  size: "large",
+  type: "circle"
+};
+var CustomAvatar = MainAvatar.bind({});
+exports.CustomAvatar = CustomAvatar;
+CustomAvatar.args = {
+  user: /*#__PURE__*/_react.default.createElement(_icons.Home, null),
+  size: "large",
+  type: "square",
+  color: "#000000"
+};

package/dist/components/Buttons/Stories/basicbutton.stories.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.BasicButton = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _buttons = require("../buttons");
+
+var _icons = require("@material-ui/icons");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable import/no-anonymous-default-export */
+var _default = {
+  component: _buttons.BmButton,
+  title: "components/Buttons/Basic",
+  argTypes: {
+    size: {
+      options: ["small", "medium", "large"],
+      control: {
+        type: "select"
+      },
+      description: "Size",
+      defaultValue: {
+        summary: "large"
+      }
+    },
+    variant: {
+      options: ["primary", "secondary", "tertiary", "success", "neutral", "destructive"],
+      control: {
+        type: "select"
+      },
+      description: "Variant",
+      defaultValue: {
+        summary: "primary"
+      }
+    },
+    leadingIcon: {
+      description: "Material UI Icons"
+    },
+    trailingIcon: {
+      description: "Material UI Icons"
+    },
+    children: {
+      description: "Text of the button",
+      default: "Button"
+    }
+  }
+};
+exports.default = _default;
+
+var MainButton = function MainButton(args) {
+  return /*#__PURE__*/_react.default.createElement(_buttons.BmButton, args);
+};
+
+var BasicButton = MainButton.bind({});
+exports.BasicButton = BasicButton;
+BasicButton.args = {
+  variant: "primary",
+  size: "large",
+  children: "Button",
+  leadingIcon: /*#__PURE__*/_react.default.createElement(_icons.Home, null),
+  trailingIcon: /*#__PURE__*/_react.default.createElement(_icons.Favorite, null)
+};

package/dist/components/Buttons/Stories/buttonAlertIcons.stories.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ButtonAlertIcon = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _buttonAlertIcons = require("../buttonAlertIcons");
+
+var _icons = require("@material-ui/icons");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable import/no-anonymous-default-export */
+var _default = {
+  component: _buttonAlertIcons.BmAlertIcon,
+  title: "components/Buttons/AlertIcons",
+  argTypes: {
+    size: {
+      options: ["small", "medium", "large"],
+      control: {
+        type: "select"
+      },
+      description: "Size",
+      defaultValue: {
+        summary: "large"
+      }
+    },
+    icon: {
+      description: "Material UI Icons"
+    },
+    color: {
+      description: "Color of the icon",
+      defaultValue: {
+        summary: "#575757"
+      }
+    },
+    badgeContent: {
+      description: "Badge Content"
+    },
+    badgeColor: {
+      description: "Color of the badge content",
+      defaultValue: {
+        summary: "#F62E48"
+      }
+    }
+  }
+};
+exports.default = _default;
+
+var MainButtonAlertIcon = function MainButtonAlertIcon(args) {
+  return /*#__PURE__*/_react.default.createElement(_buttonAlertIcons.BmAlertIcon, args);
+};
+
+var ButtonAlertIcon = MainButtonAlertIcon.bind({});
+exports.ButtonAlertIcon = ButtonAlertIcon;
+ButtonAlertIcon.args = {
+  icon: /*#__PURE__*/_react.default.createElement(_icons.AssignmentLateOutlined, null),
+  badgeContent: 4,
+  badgeColor: "red",
+  size: "large",
+  color: "black"
+};

package/dist/components/Buttons/Stories/buttonIconsOnly.stories.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ButtonIcon = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _buttonIconsOnly = require("../buttonIconsOnly");
+
+var _icons = require("@material-ui/icons");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable import/no-anonymous-default-export */
+var _default = {
+  component: _buttonIconsOnly.BmBtnIcon,
+  title: "components/Buttons/IconsOnly",
+  argTypes: {
+    size: {
+      options: ["small", "medium", "large"],
+      control: {
+        type: "select"
+      },
+      description: "Size",
+      defaultValue: {
+        summary: "large"
+      }
+    },
+    variant: {
+      options: ["primary", "secondary", "tertiary", "success", "neutral", "destructive", "active", "enabled"],
+      control: {
+        type: "select"
+      },
+      description: "Variant",
+      defaultValue: {
+        summary: "primary"
+      }
+    },
+    icon: {
+      description: "Material UI Icons"
+    },
+    color: {
+      description: "Color of the button",
+      defaultValue: {
+        summary: "primary color"
+      }
+    }
+  }
+};
+exports.default = _default;
+
+var MainButtonIcon = function MainButtonIcon(args) {
+  return /*#__PURE__*/_react.default.createElement(_buttonIconsOnly.BmBtnIcon, args);
+};
+
+var ButtonIcon = MainButtonIcon.bind({});
+exports.ButtonIcon = ButtonIcon;
+ButtonIcon.args = {
+  icon: /*#__PURE__*/_react.default.createElement(_icons.Favorite, null),
+  size: "large",
+  variant: "primary",
+  color: undefined
+};

package/dist/components/{buttonAlertIcons.js → Buttons/buttonAlertIcons.js}

@@ -3,18 +3,22 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.BmAlertIcon = exports.BmBtnIconWrapper = exports.BmIcon = void 0;
+exports.BmIcon = exports.BmBtnIconWrapper = exports.BmAlertIcon = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _styles = require("@material-ui/core/styles");
 
-var _colors = require("./colors");
+var _colors = require("../colors");
 
 var _Badge = _interopRequireDefault(require("@material-ui/core/Badge"));
 
+var _typography = require("../typography");
+
 var _excluded = ["icon", "badgeContent", "badgeColor", "size"];
 
 var _templateObject;
@@ -57,7 +61,7 @@ var AlertIcon = {
   }
 };
 
-var BadgeIcon = function BadgeIcon(props) {
+var BadgeIcon = function BadgeIcon() {
   return {
     badge: {
       height: function height(props) {
@@ -73,11 +77,10 @@ var BadgeIcon = function BadgeIcon(props) {
         return props.badgeColor || "".concat(_colors.BmSecondaryRed);
       },
       color: "".concat(_colors.BmPrimaryWhite),
-      fontFamily: "Poppins",
+      fontFamily: "".concat(_typography.PoppinsMedium),
       fontStyle: "normal",
       fontWeight: 500,
       fontSize: "0.643rem",
-      lineHeight: "0.929rem",
       display: "flex",
       alignItems: "center",
       textAlign: "center",
@@ -107,9 +110,7 @@ var BmIcon = (0, _styles.withStyles)(AlertIcon)(function (props) {
 });
 exports.BmIcon = BmIcon;
 
-var BmBtnIconWrapper = _styledComponents.default.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  padding: 0.536rem;\n  height: 3.357rem;\n  ", "\n  border: none;\n  background: none;\n"])), ""
-/* added */
-);
+var BmBtnIconWrapper = _styledComponents.default.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  padding: 0.536rem;\n  border: none;\n  background: none;\n"])));
 
 exports.BmBtnIconWrapper = BmBtnIconWrapper;
 
@@ -128,4 +129,11 @@ var BmAlertIcon = function BmAlertIcon(props) {
   }, rest)));
 };
 
-exports.BmAlertIcon = BmAlertIcon;
+exports.BmAlertIcon = BmAlertIcon;
+BmAlertIcon.propTypes = {
+  size: _propTypes.default.string,
+  badgeColor: _propTypes.default.string,
+  badgeContent: _propTypes.default.string,
+  icon: _propTypes.default.node,
+  color: _propTypes.default.string
+};

package/dist/components/{buttonIconsOnly.js → Buttons/buttonIconsOnly.js}

@@ -3,15 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.BmBtnIcon = exports.BmIconWrapper = void 0;
+exports.BmIconWrapper = exports.BmBtnIcon = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _colors = require("./colors");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _iconStyles = require("./iconStyles");
+var _colors = require("../colors");
+
+var _iconStyles = require("../iconStyles");
 
 var _excluded = ["variant", "size", "disabled", "children", "icon", "color"];
 
@@ -89,4 +91,11 @@ var BmBtnIcon = function BmBtnIcon(props) {
   })));
 };
 
-exports.BmBtnIcon = BmBtnIcon;
+exports.BmBtnIcon = BmBtnIcon;
+BmBtnIcon.propTypes = {
+  size: _propTypes.default.string,
+  variant: _propTypes.default.string,
+  icon: _propTypes.default.node,
+  color: _propTypes.default.string,
+  disabled: _propTypes.default.bool
+};

package/dist/components/{buttons.js → Buttons/buttons.js}

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.BmButton = exports.BmRightIcon = exports.BmLeftIcon = void 0;
+exports.BmRightIcon = exports.BmLeftIcon = exports.BmButton = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -11,11 +11,11 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _colors = require("./colors");
+var _colors = require("../colors");
 
-var _iconStyles = require("./iconStyles");
+var _iconStyles = require("../iconStyles");
 
-var _text = require("./text");
+var _text = require("../text");
 
 var _excluded = ["variant", "size", "disabled", "children", "leadingIcon", "trailingIcon", "color"];
 
@@ -172,9 +172,9 @@ var BeemButton = _styledComponents.default.button(_templateObject2 || (_template
   }
 });
 
-var BmLeftIcon = (0, _styledComponents.default)(_iconStyles.BmButtonIcon)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding-right: 0.5rem;\n"])));
+var BmLeftIcon = (0, _styledComponents.default)(_iconStyles.BmButtonIcon)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-right: 0.5rem;\n"])));
 exports.BmLeftIcon = BmLeftIcon;
-var BmRightIcon = (0, _styledComponents.default)(_iconStyles.BmButtonIcon)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  padding-left: 0.5rem;\n"])));
+var BmRightIcon = (0, _styledComponents.default)(_iconStyles.BmButtonIcon)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin-left: 0.5rem;\n"])));
 exports.BmRightIcon = BmRightIcon;
 
 var BmButton = function BmButton(props) {
@@ -216,8 +216,9 @@ var BmButton = function BmButton(props) {
 exports.BmButton = BmButton;
 BmButton.propTypes = {
   size: _propTypes.default.string,
-  variant: _propTypes.default.string.isRequired
-};
-BmButton.defaultProps = {
-  onClick: undefined
+  variant: _propTypes.default.string,
+  leadingIcon: _propTypes.default.node,
+  trailingIcon: _propTypes.default.node,
+  color: _propTypes.default.string,
+  disabled: _propTypes.default.bool
 };