beem-component 2.0.27 → 2.1.1

package/dist/components/Buttons/buttonDropdown copy.js

@@ -10,16 +10,18 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _buttonIconsOnly = require("./buttonIconsOnly");
 var _buttons = require("./buttons");
 var _colors = require("../colors");
-var _excluded = ["children"];
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-var ButtonDropdownWrapper = _styledComponents.default.div.withConfig({
+const _excluded = ["children"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+const ButtonDropdownWrapper = _styledComponents.default.div.withConfig({
   displayName: "buttonDropdowncopy__ButtonDropdownWrapper"
-})(["display:flex;&:hover{background:", ";border:0.071rem solid ", ";}&:active{background:", ";box-shadow:", ";border:0.071rem solid ", ";}"], function (_ref) {
-  var variant = _ref.variant,
-    disabled = _ref.disabled;
+})(["display:flex;&:hover{background:", ";border:0.071rem solid ", ";}&:active{background:", ";box-shadow:", ";border:0.071rem solid ", ";}"], _ref => {
+  let {
+    variant,
+    disabled
+  } = _ref;
   if (!disabled) {
     if (variant === 'primary') return "".concat(_colors.BmSecondaryCyan);
     if (variant === 'neutral') return "".concat(_colors.BmGrey50);
@@ -29,16 +31,20 @@ var ButtonDropdownWrapper = _styledComponents.default.div.withConfig({
       return "".concat(_colors.BmSecondaryCyan);
     }
   }
-}, function (_ref2) {
-  var variant = _ref2.variant,
-    disabled = _ref2.disabled;
+}, _ref2 => {
+  let {
+    variant,
+    disabled
+  } = _ref2;
   if (!disabled) {
     if (variant === 'secondary') return "".concat(_colors.BmSecondaryCyan);
   }
   return 'none';
-}, function (_ref3) {
-  var variant = _ref3.variant,
-    disabled = _ref3.disabled;
+}, _ref3 => {
+  let {
+    variant,
+    disabled
+  } = _ref3;
   if (!disabled) {
     if (variant === 'primary') return "".concat(_colors.BmPrimaryBlue);
     if (variant === 'neutral') return "".concat(_colors.BmGrey100);
@@ -48,28 +54,34 @@ var ButtonDropdownWrapper = _styledComponents.default.div.withConfig({
       return "".concat(_colors.BmPrimaryBlue);
     }
   }
-}, function (_ref4) {
-  var variant = _ref4.variant,
-    disabled = _ref4.disabled;
+}, _ref4 => {
+  let {
+    variant,
+    disabled
+  } = _ref4;
   if (!disabled) {
     if (variant === 'primary' || variant === 'success' || variant === 'destructive') return 'inset 0rem 0.125rem 0.25rem rgba(0, 0, 0, 0.25)';
     if (!variant) {
       return 'inset 0rem 0.125rem 0.25rem rgba(0, 0, 0, 0.25)';
     }
   }
-}, function (_ref5) {
-  var variant = _ref5.variant,
-    disabled = _ref5.disabled;
+}, _ref5 => {
+  let {
+    variant,
+    disabled
+  } = _ref5;
   if (!disabled) {
     if (variant === 'secondary') return "".concat(_colors.BmPrimaryBlue);
   }
   return 'none';
 });
-var Dropdown = (0, _styledComponents.default)(_buttonIconsOnly.BmBtnIcon).withConfig({
+const Dropdown = (0, _styledComponents.default)(_buttonIconsOnly.BmBtnIcon).withConfig({
   displayName: "buttonDropdowncopy__Dropdown"
-})(["background:", ";border:0.0625rem solid ", ";border-left:0.071rem solid ", ";border-top-left-radius:0.071rem;border-bottom-left-radius:0.071rem;padding:0rem;"], function (_ref6) {
-  var variant = _ref6.variant,
-    disabled = _ref6.disabled;
+})(["background:", ";border:0.0625rem solid ", ";border-left:0.071rem solid ", ";border-top-left-radius:0.071rem;border-bottom-left-radius:0.071rem;padding:0rem;"], _ref6 => {
+  let {
+    variant,
+    disabled
+  } = _ref6;
   if (!disabled) {
     if (variant === 'primary') return "".concat(_colors.BmPrimaryBlue);
     if (variant === 'secondary') return 'none';
@@ -83,9 +95,11 @@ var Dropdown = (0, _styledComponents.default)(_buttonIconsOnly.BmBtnIcon).withCo
   if (variant === 'secondary') return 'none';
   if (variant === 'tertiary') return 'none';
   return "".concat(_colors.BmGrey100);
-}, function (_ref7) {
-  var variant = _ref7.variant,
-    disabled = _ref7.disabled;
+}, _ref7 => {
+  let {
+    variant,
+    disabled
+  } = _ref7;
   if (!disabled) {
     if (variant === 'primary') return "".concat(_colors.BmPrimaryBlue);
     if (variant === 'secondary') return "".concat(_colors.BmPrimaryBlue);
@@ -98,9 +112,11 @@ var Dropdown = (0, _styledComponents.default)(_buttonIconsOnly.BmBtnIcon).withCo
   if (variant === 'primary') return "".concat(_colors.BmGrey100);
   if (variant === 'secondary') return "".concat(_colors.BmGrey400);
   if (variant === 'tertiary') return 'transparent';
-}, function (_ref8) {
-  var variant = _ref8.variant,
-    disabled = _ref8.disabled;
+}, _ref8 => {
+  let {
+    variant,
+    disabled
+  } = _ref8;
   if (!disabled) {
     if (variant === 'primary') return "".concat(_colors.BmPrimaryWhite);
     if (variant === 'secondary') return "".concat(_colors.BmPrimaryBlue);
@@ -114,12 +130,13 @@ var Dropdown = (0, _styledComponents.default)(_buttonIconsOnly.BmBtnIcon).withCo
   if (variant === 'secondary') return "".concat(_colors.BmGrey400);
   if (variant === 'tertiary') return 'transparent';
 });
-var Button = (0, _styledComponents.default)(_buttons.BmButton).withConfig({
+const Button = exports.Button = (0, _styledComponents.default)(_buttons.BmButton).withConfig({
   displayName: "buttonDropdowncopy__Button"
 })(["border-top-right-radius:0.071rem;border-bottom-right-radius:0.071rem;border-radius:none;border-right:none;"]);
-exports.Button = Button;
-var BmButtonDropDown = function BmButtonDropDown(_ref9) {
-  var children = _ref9.children,
+const BmButtonDropDown = _ref9 => {
+  let {
+      children
+    } = _ref9,
     rest = _objectWithoutProperties(_ref9, _excluded);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(ButtonDropdownWrapper, rest, /*#__PURE__*/_react.default.createElement(Button, rest, children), /*#__PURE__*/_react.default.createElement(Dropdown, _extends({}, rest, {
     icon: /*#__PURE__*/_react.default.createElement(_icons.KeyboardArrowDown, null)

package/dist/components/Buttons/buttonDropdown.js

@@ -8,9 +8,11 @@ var _icons = require("@material-ui/icons");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _buttonIconsOnly = require("./buttonIconsOnly");
 var _buttons = require("./buttons");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var BmButtonDropdown = function BmButtonDropdown(_ref) {
-  var children = _ref.children;
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const BmButtonDropdown = _ref => {
+  let {
+    children
+  } = _ref;
   return /*#__PURE__*/React.createElement("div", {
     style: {
       display: 'flex',

package/dist/components/Buttons/buttonIconsOnly.js

@@ -9,17 +9,19 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _colors = require("../colors");
 var _iconStyles = require("../iconStyles");
-var _excluded = ["variant", "size", "disabled", "children", "icon", "color"];
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-var BeemButtonIcon = _styledComponents.default.button.withConfig({
+const _excluded = ["variant", "size", "disabled", "children", "icon", "color"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+const BeemButtonIcon = _styledComponents.default.button.withConfig({
   displayName: "buttonIconsOnly__BeemButtonIcon"
-})(["display:flex;flex-direction:row;align-items:center;justify-content:center;background:", ";border:0.071rem solid ", ";box-sizing:border-box;border-radius:0.25rem;padding:0rem;"], function (_ref) {
-  var variant = _ref.variant,
-    disabled = _ref.disabled,
-    color = _ref.color;
+})(["display:flex;flex-direction:row;align-items:center;justify-content:center;background:", ";border:0.071rem solid ", ";box-sizing:border-box;border-radius:0.25rem;padding:0rem;"], _ref => {
+  let {
+    variant,
+    disabled,
+    color
+  } = _ref;
   if (!disabled) {
     if (variant === 'active') return "".concat(_colors.BmPrimaryBlue);
     if (variant === 'enabled') return "".concat(_colors.BmGrey50);
@@ -32,10 +34,12 @@ var BeemButtonIcon = _styledComponents.default.button.withConfig({
     return "".concat(color || _colors.BmPrimaryBlue);
   }
   return "".concat(_colors.BmGrey100);
-}, function (_ref2) {
-  var variant = _ref2.variant,
-    disabled = _ref2.disabled,
-    color = _ref2.color;
+}, _ref2 => {
+  let {
+    variant,
+    disabled,
+    color
+  } = _ref2;
   if (!disabled) {
     if (variant === 'active') return "".concat(_colors.BmPrimaryBlue);
     if (variant === 'enabled') return "".concat(_colors.BmGrey50);
@@ -49,23 +53,26 @@ var BeemButtonIcon = _styledComponents.default.button.withConfig({
   }
   return "".concat(_colors.BmGrey100);
 });
-var BmIconWrapper = _styledComponents.default.div.withConfig({
+const BmIconWrapper = exports.BmIconWrapper = _styledComponents.default.div.withConfig({
   displayName: "buttonIconsOnly__BmIconWrapper"
-})(["padding:", ";"], function (_ref3) {
-  var size = _ref3.size;
+})(["padding:", ";"], _ref3 => {
+  let {
+    size
+  } = _ref3;
   if (size === 'xxsmall') {
     return '0rem !important';
   }
   return '0.5rem !important';
 });
-exports.BmIconWrapper = BmIconWrapper;
-var BmBtnIcon = function BmBtnIcon(props) {
-  var variant = props.variant,
-    size = props.size,
-    disabled = props.disabled,
-    children = props.children,
-    icon = props.icon,
-    color = props.color,
+const BmBtnIcon = props => {
+  const {
+      variant,
+      size,
+      disabled,
+      children,
+      icon,
+      color
+    } = props,
     rest = _objectWithoutProperties(props, _excluded);
   return /*#__PURE__*/_react.default.createElement(BeemButtonIcon, _extends({
     color: color,

package/dist/components/Buttons/buttons.js

@@ -11,24 +11,28 @@ var _polished = require("polished");
 var _colors = require("../colors");
 var _iconStyles = require("../iconStyles");
 var _text = require("../text");
-var _excluded = ["variant", "size", "disabled", "children", "leadingIcon", "trailingIcon", "color", "type"];
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-var ButtonText = _styledComponents.default.div.withConfig({
+const _excluded = ["variant", "size", "disabled", "children", "leadingIcon", "trailingIcon", "color", "borderColor", "type"]; // TODO: Button Links Pending
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+const ButtonText = _styledComponents.default.div.withConfig({
   displayName: "buttons__ButtonText"
-})(["", " text-align:center;color:", ";padding:0rem;"], function (_ref) {
-  var size = _ref.size;
+})(["", " text-align:center;color:", ";padding:0rem;"], _ref => {
+  let {
+    size
+  } = _ref;
   if (size === 'large') return "".concat(_text.h5);
   if (size === 'medium') return "".concat(_text.h5);
   if (size === 'small') return "".concat(_text.h5);
   if (size === 'xsmall') return "".concat(_text.h5);
   return "".concat(_text.h5);
-}, function (_ref2) {
-  var variant = _ref2.variant,
-    disabled = _ref2.disabled,
-    color = _ref2.color;
+}, _ref2 => {
+  let {
+    variant,
+    disabled,
+    color
+  } = _ref2;
   if (!disabled) {
     if (variant === 'primary') return "".concat(_colors.BmPrimaryWhite);
     if (variant === 'secondary') return "".concat(color || _colors.BmPrimaryBlue);
@@ -40,29 +44,37 @@ var ButtonText = _styledComponents.default.div.withConfig({
   }
   return "".concat(_colors.BmGrey400);
 });
-var BeemButton = _styledComponents.default.button.withConfig({
+const BeemButton = _styledComponents.default.button.withConfig({
   displayName: "buttons__BeemButton"
-})(["display:flex;flex-direction:row;justify-content:center;align-items:center;width:", ";border-radius:0.5714rem;padding:", ";line-height:", ";background:", ";border:0.994px solid ", ";&:hover{background:", ";border:0.994px solid ", ";}&:active{background:", ";box-shadow:", ";border:0.071rem solid ", ";}&:hover ", "{color:", ";}&:active ", "{color:", ";}"], function (_ref3) {
-  var width = _ref3.width;
+})(["display:flex;flex-direction:row;justify-content:center;align-items:center;width:", ";border-radius:0.5714rem;padding:", ";line-height:", ";background:", ";border:0.994px solid ", ";&:hover{background:", ";border:0.994px solid ", ";}&:active{background:", ";box-shadow:", ";border:0.071rem solid ", ";}&:hover ", "{color:", ";}&:active ", "{color:", ";}"], _ref3 => {
+  let {
+    width
+  } = _ref3;
   return width || '';
-}, function (_ref4) {
-  var size = _ref4.size;
+}, _ref4 => {
+  let {
+    size
+  } = _ref4;
   if (size === 'large') return '.7143rem 1.2857rem';
   if (size === 'medium') return '.7143rem 1.1429rem';
   if (size === 'small') return '.5714rem 1rem';
   if (size === 'xsmall') return '.4286rem .8571rem';
   return '.7143rem 1.1429rem';
-}, function (_ref5) {
-  var size = _ref5.size;
+}, _ref5 => {
+  let {
+    size
+  } = _ref5;
   if (size === 'large') return '1.7143rem';
   if (size === 'medium') return '1.4286rem';
   if (size === 'small') return '1.4286rem';
   if (size === 'xsmall') return '1.4286rem';
   return '1.4286rem';
-}, function (_ref6) {
-  var variant = _ref6.variant,
-    disabled = _ref6.disabled,
-    color = _ref6.color;
+}, _ref6 => {
+  let {
+    variant,
+    disabled,
+    color
+  } = _ref6;
   if (!disabled) {
     if (variant === 'primary') return "".concat(color || _colors.BmPrimaryBlue);
     if (variant === 'secondary') return 'none';
@@ -76,26 +88,31 @@ var BeemButton = _styledComponents.default.button.withConfig({
   if (variant === 'secondary') return 'none';
   if (variant === 'tertiary') return 'none';
   return "".concat(_colors.BmGrey100);
-}, function (_ref7) {
-  var variant = _ref7.variant,
-    disabled = _ref7.disabled,
-    color = _ref7.color;
+}, _ref7 => {
+  let {
+    variant,
+    disabled,
+    color,
+    borderColor
+  } = _ref7;
   if (!disabled) {
-    if (variant === 'primary') return "".concat(color || _colors.BmPrimaryBlue);
-    if (variant === 'secondary') return "".concat(color || _colors.BmPrimaryBlue);
+    if (variant === 'primary') return "".concat(borderColor || color || _colors.BmPrimaryBlue);
+    if (variant === 'secondary') return "".concat(borderColor || color || _colors.BmPrimaryBlue);
     if (variant === 'tertiary') return 'transparent';
     if (variant === 'destructive') return "".concat(_colors.BmSecondaryRed);
     if (variant === 'success') return "".concat(_colors.BmSecondaryDarkGreen);
     if (variant === 'neutral') return "".concat(_colors.BmGrey400);
-    return "".concat(color || _colors.BmPrimaryBlue);
+    return "".concat(borderColor || color || _colors.BmPrimaryBlue);
   }
   if (variant === 'primary') return "".concat(_colors.BmGrey100);
   if (variant === 'secondary') return "".concat(_colors.BmGrey400);
   if (variant === 'tertiary') return 'transparent';
-}, function (_ref8) {
-  var variant = _ref8.variant,
-    disabled = _ref8.disabled,
-    color = _ref8.color;
+}, _ref8 => {
+  let {
+    variant,
+    disabled,
+    color
+  } = _ref8;
   if (!disabled) {
     if (variant === 'primary') return "".concat((0, _polished.darken)(0.1, color || _colors.BmPrimaryBlue));
     if (variant === 'neutral') return "".concat(_colors.BmGrey50);
@@ -105,18 +122,23 @@ var BeemButton = _styledComponents.default.button.withConfig({
       return "".concat((0, _polished.darken)(0.1, color || _colors.BmPrimaryBlue));
     }
   }
-}, function (_ref9) {
-  var variant = _ref9.variant,
-    disabled = _ref9.disabled,
-    color = _ref9.color;
+}, _ref9 => {
+  let {
+    variant,
+    disabled,
+    color,
+    borderColor
+  } = _ref9;
   if (!disabled) {
-    if (variant === 'secondary') return "".concat((0, _polished.darken)(0.1, color || _colors.BmPrimaryBlue));
+    if (variant === 'secondary') return "".concat((0, _polished.darken)(0.1, borderColor || color || _colors.BmPrimaryBlue));
   }
   return 'none';
-}, function (_ref10) {
-  var variant = _ref10.variant,
-    disabled = _ref10.disabled,
-    color = _ref10.color;
+}, _ref0 => {
+  let {
+    variant,
+    disabled,
+    color
+  } = _ref0;
   if (!disabled) {
     if (variant === 'primary') return "".concat((0, _polished.darken)(0.1, color || _colors.BmPrimaryBlue));
     if (variant === 'neutral') return "".concat(_colors.BmGrey100);
@@ -126,61 +148,72 @@ var BeemButton = _styledComponents.default.button.withConfig({
       return "".concat((0, _polished.darken)(0.1, color || _colors.BmPrimaryBlue));
     }
   }
-}, function (_ref11) {
-  var variant = _ref11.variant,
-    disabled = _ref11.disabled;
+}, _ref1 => {
+  let {
+    variant,
+    disabled
+  } = _ref1;
   if (!disabled) {
     if (variant === 'primary' || variant === 'success' || variant === 'destructive') return 'inset 0rem .125rem .25rem rgba(0, 0, 0, 0.25)';
     if (!variant) {
       return 'inset 0rem .125rem .25rem rgba(0, 0, 0, 0.25)';
     }
   }
-}, function (_ref12) {
-  var variant = _ref12.variant,
-    disabled = _ref12.disabled,
-    color = _ref12.color;
+}, _ref10 => {
+  let {
+    variant,
+    disabled,
+    color,
+    borderColor
+  } = _ref10;
   if (!disabled) {
-    if (variant === 'secondary') return "".concat((0, _polished.darken)(0.1, color || _colors.BmPrimaryBlue));
+    if (variant === 'secondary') return "".concat((0, _polished.darken)(0.1, borderColor || color || _colors.BmPrimaryBlue));
   }
   return 'none';
-}, ButtonText, function (_ref13) {
-  var variant = _ref13.variant,
-    disabled = _ref13.disabled,
-    color = _ref13.color;
+}, ButtonText, _ref11 => {
+  let {
+    variant,
+    disabled,
+    color
+  } = _ref11;
   if (!disabled) {
     if (variant === 'secondary' || variant === 'tertiary') return "".concat((0, _polished.darken)(0.1, color || _colors.BmPrimaryBlue));
   }
-}, ButtonText, function (_ref14) {
-  var variant = _ref14.variant,
-    disabled = _ref14.disabled,
-    color = _ref14.color;
+}, ButtonText, _ref12 => {
+  let {
+    variant,
+    disabled,
+    color
+  } = _ref12;
   if (!disabled) {
     if (variant === 'secondary' || variant === 'tertiary') return "".concat((0, _polished.darken)(0.1, color || _colors.BmPrimaryBlue));
   }
 });
-var BmLeftIcon = (0, _styledComponents.default)(_iconStyles.BmButtonIcon).withConfig({
+const BmLeftIcon = exports.BmLeftIcon = (0, _styledComponents.default)(_iconStyles.BmButtonIcon).withConfig({
   displayName: "buttons__BmLeftIcon"
 })(["margin-right:0.5rem;"]);
-exports.BmLeftIcon = BmLeftIcon;
-var BmRightIcon = (0, _styledComponents.default)(_iconStyles.BmButtonIcon).withConfig({
+const BmRightIcon = exports.BmRightIcon = (0, _styledComponents.default)(_iconStyles.BmButtonIcon).withConfig({
   displayName: "buttons__BmRightIcon"
 })(["margin-left:0.5rem;"]);
-exports.BmRightIcon = BmRightIcon;
-var BmButton = function BmButton(props) {
-  var variant = props.variant,
-    size = props.size,
-    disabled = props.disabled,
-    children = props.children,
-    leadingIcon = props.leadingIcon,
-    trailingIcon = props.trailingIcon,
-    color = props.color,
-    type = props.type,
+const BmButton = props => {
+  const {
+      variant,
+      size,
+      disabled,
+      children,
+      leadingIcon,
+      trailingIcon,
+      color,
+      borderColor,
+      type
+    } = props,
     rest = _objectWithoutProperties(props, _excluded);
   return /*#__PURE__*/_react.default.createElement(BeemButton, _extends({
     size: size,
     variant: variant,
     disabled: disabled,
     color: color,
+    borderColor: borderColor,
     type: type
   }, rest), leadingIcon && /*#__PURE__*/_react.default.createElement(BmLeftIcon, {
     disabled: disabled,

package/dist/components/Card_v2/Card.js

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BmCardv2 = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+const _excluded = ["className", "children", "borderColor", "borderWidth"];
+/* eslint-disable func-style */
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+const hexToRgba = function (hex) {
+  let opacity = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.6;
+  try {
+    const normalizedHex = hex === null || hex === void 0 ? void 0 : hex.replace('#', '');
+    if (!normalizedHex || normalizedHex.length !== 6 || !/^[0-9a-fA-F]{6}$/.test(normalizedHex)) {
+      throw new Error('Invalid hex');
+    }
+    const r = parseInt(normalizedHex.slice(0, 2), 16);
+    const g = parseInt(normalizedHex.slice(2, 4), 16);
+    const b = parseInt(normalizedHex.slice(4, 6), 16);
+    return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(opacity, ")");
+  } catch (e) {
+    return "rgba(0, 0, 0, ".concat(opacity, ")");
+  }
+};
+const StyledCard = _styledComponents.default.div.withConfig({
+  displayName: "Card__StyledCard"
+})(["background-color:var(--card,#fff);color:var(--card-foreground,#000);display:flex;flex-direction:column;gap:1.5rem;border-radius:0.75rem;border-style:solid;border-color:", ";border-width:", ";width:100%;"], _ref => {
+  let {
+    borderColor
+  } = _ref;
+  return hexToRgba(borderColor || '#ccc', 0.1);
+}, _ref2 => {
+  let {
+    borderWidth
+  } = _ref2;
+  return borderWidth || '.0714rem';
+});
+const Header = _styledComponents.default.div.withConfig({
+  displayName: "Card__Header"
+})(["display:grid;grid-template-columns:1fr;grid-auto-rows:auto;gap:0.375rem;padding:1.5rem 1.5rem 0 1.5rem;"]);
+const Title = _styledComponents.default.h4.withConfig({
+  displayName: "Card__Title"
+})(["line-height:1;margin:0;"]);
+const Description = _styledComponents.default.p.withConfig({
+  displayName: "Card__Description"
+})(["color:var(--muted-foreground,#666);margin:0;"]);
+const Content = _styledComponents.default.div.withConfig({
+  displayName: "Card__Content"
+})(["min-height:180px;padding:0 1.5rem;max-height:calc(100vh - 28.5714rem);overflow-y:auto;scrollbar-width:thin;scrollbar-color:", " transparent;&::-webkit-scrollbar-thumb{background:", ";border-radius:0.6429rem;transition:background 0.2s ease;}&::-webkit-scrollbar-thumb:hover{background:", ";}&:last-child{padding-bottom:1.5rem;}@media (max-width:54.8571rem){max-height:calc(100vh - 17.8572rem);}"], () => hexToRgba('#33b1ba', 0.2), () => hexToRgba('#33b1ba', 0.3), () => hexToRgba('#33b1ba', 0.3));
+const Footer = _styledComponents.default.div.withConfig({
+  displayName: "Card__Footer"
+})(["display:flex;justify-content:space-between;align-items:center;padding:0 1.5rem 1.5rem 1.5rem;gap:1rem;@media (max-width:42.8571rem){flex-direction:column;align-items:stretch;& > *{width:100%;}}"]);
+function CardComponent(_ref3) {
+  let {
+      className,
+      children,
+      borderColor,
+      borderWidth
+    } = _ref3,
+    props = _objectWithoutProperties(_ref3, _excluded);
+  return /*#__PURE__*/_react.default.createElement(StyledCard, _extends({
+    className: className,
+    borderColor: borderColor,
+    borderWidth: borderWidth
+  }, props), children);
+}
+const BmCardv2 = exports.BmCardv2 = Object.assign(CardComponent, {
+  Header,
+  Title,
+  Description,
+  Content,
+  Footer
+});