@bolio-ui/core 1.0.3 → 1.0.4

package/dist/card/index.js

@@ -1212,17 +1212,20 @@ var ImageBrowser$1 = ImageBrowser;
 Image$1.Browser = ImageBrowser$1;
 
 var _excluded = ["children", "hoverable", "rounded", "className", "shadow", "type"];
+var defaultProps = {
+  type: 'default',
+  hoverable: false,
+  shadow: false,
+  className: ''
+};
 
 function CardComponent(_ref) {
   var children = _ref.children,
-      _ref$hoverable = _ref.hoverable,
-      hoverable = _ref$hoverable === void 0 ? false : _ref$hoverable,
-      _ref$rounded = _ref.rounded,
-      rounded = _ref$rounded === void 0 ? false : _ref$rounded,
+      hoverable = _ref.hoverable,
+      rounded = _ref.rounded,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
-      _ref$shadow = _ref.shadow,
-      shadow = _ref$shadow === void 0 ? false : _ref$shadow,
+      shadow = _ref.shadow,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'default' : _ref$type,
       props = _objectWithoutProperties(_ref, _excluded);
@@ -1241,8 +1244,8 @@ function CardComponent(_ref) {
     return getStyles(type, theme.palette, shadow);
   }, [type, theme.palette, shadow]),
       color = _useMemo.color,
-      bgColor = _useMemo.bgColor;
-      _useMemo.borderColor;
+      bgColor = _useMemo.bgColor,
+      borderColor = _useMemo.borderColor;
 
   var _pickChild = pickChild(children, CardFooter$1),
       _pickChild2 = _slicedToArray(_pickChild, 2),
@@ -1256,15 +1259,14 @@ function CardComponent(_ref) {
 
   var hasContent = hasChild(withoutImageChildren, CardContent$1);
   return /*#__PURE__*/React__default["default"].createElement("div", _extends({}, props, {
-    className: styledJsx_cjs.style.dynamic([["470877697", [rounded ? '25px' : theme.layout.radius, shadow ? theme.expressiveness.shadowSmall : 'none', color, bgColor, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverShadow]]]) + " " + (props && props.className != null && props.className || useClasses$1('card', className) || "")
-  }), imageChildren, hasContent ? withoutImageChildren : /*#__PURE__*/React__default["default"].createElement(CardContent$1, {
-    className: "card"
-  }, withoutImageChildren), footerChildren, /*#__PURE__*/React__default["default"].createElement(styledJsx_cjs.style, {
-    id: "470877697",
-    dynamic: [rounded ? '25px' : theme.layout.radius, shadow ? theme.expressiveness.shadowSmall : 'none', color, bgColor, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverShadow]
-  }, ".card.__jsx-style-dynamic-selector{-webkit-transition:all 0.2s ease;transition:all 0.2s ease;border-radius:".concat(rounded ? '25px' : theme.layout.radius, ";box-shadow:").concat(shadow ? theme.expressiveness.shadowSmall : 'none', ";box-sizing:border-box;color:").concat(color, ";background-color:").concat(bgColor, ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.card.__jsx-style-dynamic-selector:hover{box-shadow:").concat(hoverShadow, ";}.card.__jsx-style-dynamic-selector img{width:100%;}.card.__jsx-style-dynamic-selector .image{border-bottom-left-radius:0;border-bottom-right-radius:0;}")));
+    className: styledJsx_cjs.style.dynamic([["1209748169", [theme.palette.background, rounded ? '25px' : theme.layout.radius, shadow ? theme.expressiveness.shadowSmall : 'none', color, bgColor, borderColor, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverShadow]]]) + " " + (props && props.className != null && props.className || useClasses$1('card', className) || "")
+  }), imageChildren, hasContent ? withoutImageChildren : /*#__PURE__*/React__default["default"].createElement(CardContent$1, null, withoutImageChildren), footerChildren, /*#__PURE__*/React__default["default"].createElement(styledJsx_cjs.style, {
+    id: "1209748169",
+    dynamic: [theme.palette.background, rounded ? '25px' : theme.layout.radius, shadow ? theme.expressiveness.shadowSmall : 'none', color, bgColor, borderColor, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverShadow]
+  }, ".card.__jsx-style-dynamic-selector{background:".concat(theme.palette.background, ";-webkit-transition:all 0.2s ease;transition:all 0.2s ease;border-radius:").concat(rounded ? '25px' : theme.layout.radius, ";box-shadow:").concat(shadow ? theme.expressiveness.shadowSmall : 'none', ";box-sizing:border-box;color:").concat(color, ";background-color:").concat(bgColor, ";border:none;width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.card.__jsx-style-dynamic-selector:hover{box-shadow:").concat(hoverShadow, ";}.card.__jsx-style-dynamic-selector img{width:100%;}.card.__jsx-style-dynamic-selector .image{border-bottom-left-radius:0;border-bottom-right-radius:0;}")));
 }
 
+CardComponent.defaultProps = defaultProps;
 CardComponent.displayName = 'BolioUICard';
 var Card = withScale$1(CardComponent);
 var Card$1 = Card;

package/dist/index.js

@@ -1317,7 +1317,7 @@ var usePortal = function usePortal() {
 var usePortal$1 = usePortal;
 
 var _excluded$1g = ["children", "className", "visible", "enterTime", "leaveTime", "clearTime", "name"];
-var defaultProps$e = {
+var defaultProps$f = {
   visible: false,
   enterTime: 60,
   leaveTime: 60,
@@ -1380,10 +1380,10 @@ function CssTransition(_ref) {
   }));
 }
 
-CssTransition.defaultProps = defaultProps$e;
+CssTransition.defaultProps = defaultProps$f;
 CssTransition.displayName = 'BolioUICssTransition';
 
-var defaultProps$d = {
+var defaultProps$e = {
   x: 0,
   y: 0
 };
@@ -1435,7 +1435,7 @@ var ButtonDrip = function ButtonDrip(_ref) {
   }, ".drip.jsx-3424889537{position:absolute;left:0;right:0;top:0;bottom:0;}svg.jsx-3424889537{position:absolute;-webkit-animation:350ms ease-in expand-jsx-3424889537;animation:350ms ease-in expand-jsx-3424889537;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;width:1rem;height:1rem;}@-webkit-keyframes expand-jsx-3424889537{0%{opacity:0;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}30%{opacity:1;}80%{opacity:0.5;}100%{-webkit-transform:scale(28);-ms-transform:scale(28);transform:scale(28);opacity:0;}}@keyframes expand-jsx-3424889537{0%{opacity:0;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}30%{opacity:1;}80%{opacity:0.5;}100%{-webkit-transform:scale(28);-ms-transform:scale(28);transform:scale(28);opacity:0;}}"));
 };
 
-ButtonDrip.defaultProps = defaultProps$d;
+ButtonDrip.defaultProps = defaultProps$e;
 ButtonDrip.displayName = 'BolioUItButtonDrip';
 var ButtonDrip$1 = ButtonDrip;
 
@@ -1858,7 +1858,7 @@ var getButtonDripColor = function getButtonDripColor(palette, props) {
 };
 
 var _excluded$1d = ["children", "disabled", "type", "loading", "shadow", "ghost", "rounded", "effect", "onClick", "auto", "icon", "htmlType", "iconRight", "className"];
-var defaultProps$c = {
+var defaultProps$d = {
   type: 'default',
   htmlType: 'button',
   ghost: false,
@@ -1986,7 +1986,7 @@ var ButtonComponent = /*#__PURE__*/React__default["default"].forwardRef(function
     dynamic: [rounded ? '25px' : theme.layout.radius, SCALES.font(0.875), color, bg, border, cursor, events, shadow ? '0 4px 10px 0' + bg : 'none', SCALES.pl(0.75), SCALES.height(2.5), color, bg, auto ? 'min-content' : SCALES.width(10.5), auto ? 'auto' : 'initial', SCALES.height(2.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hover.color, hover.color, hover.bg, hover.border, cursor, events]
   }, ".btn.__jsx-style-dynamic-selector{box-sizing:border-box;display:inline-block;border-radius:".concat(rounded ? '25px' : theme.layout.radius, ";font-weight:500;font-size:").concat(SCALES.font(0.875), ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:none;text-transform:capitalize;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center;white-space:nowrap;-webkit-transition:background-color 200ms ease 0ms,box-shadow 200ms ease 0ms, border 200ms ease 0ms,color 200ms ease 0ms;transition:background-color 200ms ease 0ms,box-shadow 200ms ease 0ms, border 200ms ease 0ms,color 200ms ease 0ms;position:relative;overflow:hidden;color:").concat(color, ";background-color:").concat(bg, ";border:1px solid ").concat(border, ";cursor:").concat(cursor, ";pointer-events:").concat(events, ";box-shadow:").concat(shadow ? '0 4px 10px 0' + bg : 'none', ";--bolio-ui-button-icon-padding:").concat(SCALES.pl(0.75), ";--bolio-ui-button-height:").concat(SCALES.height(2.5), ";--bolio-ui-button-color:").concat(color, ";--bolio-ui-button-bg:").concat(bg, ";min-width:").concat(auto ? 'min-content' : SCALES.width(10.5), ";width:").concat(auto ? 'auto' : 'initial', ";height:").concat(SCALES.height(2.5), ";padding:").concat(SCALES.pt(0), " ").concat(paddingRight, " ").concat(SCALES.pb(0), " ").concat(paddingLeft, ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.btn.__jsx-style-dynamic-selector:hover,.btn.__jsx-style-dynamic-selector:focus{color:").concat(hover.color, ";--bolio-ui-button-color:").concat(hover.color, ";background-color:").concat(hover.bg, ";cursor:").concat(cursor, ";pointer-events:").concat(events, ";}.btn.__jsx-style-dynamic-selector:active{-webkit-transform:scale(0.98,0.98);-ms-transform:scale(0.98,0.98);transform:scale(0.98,0.98);}.btn.__jsx-style-dynamic-selector .text{position:relative;z-index:1;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center;line-height:inherit;}.btn.__jsx-style-dynamic-selector .text p,.btn.__jsx-style-dynamic-selector .text pre,.btn.__jsx-style-dynamic-selector .text div{margin:0;}")));
 });
-ButtonComponent.defaultProps = defaultProps$c;
+ButtonComponent.defaultProps = defaultProps$d;
 ButtonComponent.displayName = 'BolioUIButton';
 var Button = withScale$1(ButtonComponent);
 var Button$1 = Button;
@@ -2718,7 +2718,7 @@ var ButtonDropdown$1 = ButtonDropdown;
 ButtonDropdown$1.Item = ButtonDropdownItem;
 
 var _excluded$18 = ["disabled", "type", "ghost", "vertical", "children", "className"];
-var defaultProps$b = {
+var defaultProps$c = {
   disabled: false,
   vertical: false,
   ghost: false,
@@ -2780,7 +2780,7 @@ function ButtonGroupComponent(groupProps) {
   }, ".btn-group.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;border-radius:".concat(theme.layout.radius, ";border:1px solid ").concat(border, ";background-color:transparent;overflow:hidden;width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'min-content'), ";margin:").concat(SCALES.mt(0.313), " ").concat(SCALES.mr(0.313), " ").concat(SCALES.mb(0.313), " ").concat(SCALES.ml(0.313), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";}.vertical.__jsx-style-dynamic-selector{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.btn-group.__jsx-style-dynamic-selector .btn{border:none;}.btn-group.__jsx-style-dynamic-selector .btn .text{top:0;}.horizontal.__jsx-style-dynamic-selector .btn:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0;border-left:1px solid ").concat(border, ";}.horizontal.__jsx-style-dynamic-selector .btn:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0;}.vertical.__jsx-style-dynamic-selector .btn:not(:first-child){border-top-left-radius:0;border-top-right-radius:0;border-top:1px solid ").concat(border, ";}.vertical.__jsx-style-dynamic-selector .btn:not(:last-child){border-bottom-left-radius:0;border-bottom-right-radius:0;}"))));
 }
 
-ButtonGroupComponent.defaultProps = defaultProps$b;
+ButtonGroupComponent.defaultProps = defaultProps$c;
 ButtonGroupComponent.displayName = 'BolioUIButtonGroup';
 var ButtonGroup = withScale$1(ButtonGroupComponent);
 var ButtonGroup$1 = ButtonGroup;
@@ -3187,17 +3187,20 @@ var ImageBrowser$1 = ImageBrowser;
 Image$1.Browser = ImageBrowser$1;
 
 var _excluded$11 = ["children", "hoverable", "rounded", "className", "shadow", "type"];
+var defaultProps$b = {
+  type: 'default',
+  hoverable: false,
+  shadow: false,
+  className: ''
+};
 
 function CardComponent(_ref) {
   var children = _ref.children,
-      _ref$hoverable = _ref.hoverable,
-      hoverable = _ref$hoverable === void 0 ? false : _ref$hoverable,
-      _ref$rounded = _ref.rounded,
-      rounded = _ref$rounded === void 0 ? false : _ref$rounded,
+      hoverable = _ref.hoverable,
+      rounded = _ref.rounded,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
-      _ref$shadow = _ref.shadow,
-      shadow = _ref$shadow === void 0 ? false : _ref$shadow,
+      shadow = _ref.shadow,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'default' : _ref$type,
       props = _objectWithoutProperties(_ref, _excluded$11);
@@ -3216,8 +3219,8 @@ function CardComponent(_ref) {
     return getStyles$1(type, theme.palette, shadow);
   }, [type, theme.palette, shadow]),
       color = _useMemo.color,
-      bgColor = _useMemo.bgColor;
-      _useMemo.borderColor;
+      bgColor = _useMemo.bgColor,
+      borderColor = _useMemo.borderColor;
 
   var _pickChild = pickChild(children, CardFooter$1),
       _pickChild2 = _slicedToArray(_pickChild, 2),
@@ -3231,15 +3234,14 @@ function CardComponent(_ref) {
 
   var hasContent = hasChild(withoutImageChildren, CardContent$1);
   return /*#__PURE__*/React__default["default"].createElement("div", _extends({}, props, {
-    className: styledJsx_cjs.style.dynamic([["470877697", [rounded ? '25px' : theme.layout.radius, shadow ? theme.expressiveness.shadowSmall : 'none', color, bgColor, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverShadow]]]) + " " + (props && props.className != null && props.className || useClasses$1('card', className) || "")
-  }), imageChildren, hasContent ? withoutImageChildren : /*#__PURE__*/React__default["default"].createElement(CardContent$1, {
-    className: "card"
-  }, withoutImageChildren), footerChildren, /*#__PURE__*/React__default["default"].createElement(styledJsx_cjs.style, {
-    id: "470877697",
-    dynamic: [rounded ? '25px' : theme.layout.radius, shadow ? theme.expressiveness.shadowSmall : 'none', color, bgColor, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverShadow]
-  }, ".card.__jsx-style-dynamic-selector{-webkit-transition:all 0.2s ease;transition:all 0.2s ease;border-radius:".concat(rounded ? '25px' : theme.layout.radius, ";box-shadow:").concat(shadow ? theme.expressiveness.shadowSmall : 'none', ";box-sizing:border-box;color:").concat(color, ";background-color:").concat(bgColor, ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.card.__jsx-style-dynamic-selector:hover{box-shadow:").concat(hoverShadow, ";}.card.__jsx-style-dynamic-selector img{width:100%;}.card.__jsx-style-dynamic-selector .image{border-bottom-left-radius:0;border-bottom-right-radius:0;}")));
+    className: styledJsx_cjs.style.dynamic([["1209748169", [theme.palette.background, rounded ? '25px' : theme.layout.radius, shadow ? theme.expressiveness.shadowSmall : 'none', color, bgColor, borderColor, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverShadow]]]) + " " + (props && props.className != null && props.className || useClasses$1('card', className) || "")
+  }), imageChildren, hasContent ? withoutImageChildren : /*#__PURE__*/React__default["default"].createElement(CardContent$1, null, withoutImageChildren), footerChildren, /*#__PURE__*/React__default["default"].createElement(styledJsx_cjs.style, {
+    id: "1209748169",
+    dynamic: [theme.palette.background, rounded ? '25px' : theme.layout.radius, shadow ? theme.expressiveness.shadowSmall : 'none', color, bgColor, borderColor, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverShadow]
+  }, ".card.__jsx-style-dynamic-selector{background:".concat(theme.palette.background, ";-webkit-transition:all 0.2s ease;transition:all 0.2s ease;border-radius:").concat(rounded ? '25px' : theme.layout.radius, ";box-shadow:").concat(shadow ? theme.expressiveness.shadowSmall : 'none', ";box-sizing:border-box;color:").concat(color, ";background-color:").concat(bgColor, ";border:none;width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.card.__jsx-style-dynamic-selector:hover{box-shadow:").concat(hoverShadow, ";}.card.__jsx-style-dynamic-selector img{width:100%;}.card.__jsx-style-dynamic-selector .image{border-bottom-left-radius:0;border-bottom-right-radius:0;}")));
 }
 
+CardComponent.defaultProps = defaultProps$b;
 CardComponent.displayName = 'BolioUICard';
 var Card = withScale$1(CardComponent);
 var Card$1 = Card;

package/esm/card/card.js

@@ -12,17 +12,20 @@ import Image from '../image';
 import { hasChild, pickChild } from '../utils/collections';
 import useScale, { withScale } from '../use-scale';
 import useClasses from '../use-classes';
+var defaultProps = {
+  type: 'default',
+  hoverable: false,
+  shadow: false,
+  className: ''
+};
 
 function CardComponent(_ref) {
   var children = _ref.children,
-      _ref$hoverable = _ref.hoverable,
-      hoverable = _ref$hoverable === void 0 ? false : _ref$hoverable,
-      _ref$rounded = _ref.rounded,
-      rounded = _ref$rounded === void 0 ? false : _ref$rounded,
+      hoverable = _ref.hoverable,
+      rounded = _ref.rounded,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
-      _ref$shadow = _ref.shadow,
-      shadow = _ref$shadow === void 0 ? false : _ref$shadow,
+      shadow = _ref.shadow,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'default' : _ref$type,
       props = _objectWithoutProperties(_ref, _excluded);
@@ -56,15 +59,14 @@ function CardComponent(_ref) {
 
   var hasContent = hasChild(withoutImageChildren, CardContent);
   return /*#__PURE__*/React.createElement("div", _extends({}, props, {
-    className: _JSXStyle.dynamic([["470877697", [rounded ? '25px' : theme.layout.radius, shadow ? theme.expressiveness.shadowSmall : 'none', color, bgColor, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverShadow]]]) + " " + (props && props.className != null && props.className || useClasses('card', className) || "")
-  }), imageChildren, hasContent ? withoutImageChildren : /*#__PURE__*/React.createElement(CardContent, {
-    className: "card"
-  }, withoutImageChildren), footerChildren, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "470877697",
-    dynamic: [rounded ? '25px' : theme.layout.radius, shadow ? theme.expressiveness.shadowSmall : 'none', color, bgColor, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverShadow]
-  }, ".card.__jsx-style-dynamic-selector{-webkit-transition:all 0.2s ease;transition:all 0.2s ease;border-radius:".concat(rounded ? '25px' : theme.layout.radius, ";box-shadow:").concat(shadow ? theme.expressiveness.shadowSmall : 'none', ";box-sizing:border-box;color:").concat(color, ";background-color:").concat(bgColor, ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.card.__jsx-style-dynamic-selector:hover{box-shadow:").concat(hoverShadow, ";}.card.__jsx-style-dynamic-selector img{width:100%;}.card.__jsx-style-dynamic-selector .image{border-bottom-left-radius:0;border-bottom-right-radius:0;}")));
+    className: _JSXStyle.dynamic([["1209748169", [theme.palette.background, rounded ? '25px' : theme.layout.radius, shadow ? theme.expressiveness.shadowSmall : 'none', color, bgColor, borderColor, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverShadow]]]) + " " + (props && props.className != null && props.className || useClasses('card', className) || "")
+  }), imageChildren, hasContent ? withoutImageChildren : /*#__PURE__*/React.createElement(CardContent, null, withoutImageChildren), footerChildren, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1209748169",
+    dynamic: [theme.palette.background, rounded ? '25px' : theme.layout.radius, shadow ? theme.expressiveness.shadowSmall : 'none', color, bgColor, borderColor, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverShadow]
+  }, ".card.__jsx-style-dynamic-selector{background:".concat(theme.palette.background, ";-webkit-transition:all 0.2s ease;transition:all 0.2s ease;border-radius:").concat(rounded ? '25px' : theme.layout.radius, ";box-shadow:").concat(shadow ? theme.expressiveness.shadowSmall : 'none', ";box-sizing:border-box;color:").concat(color, ";background-color:").concat(bgColor, ";border:none;width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.card.__jsx-style-dynamic-selector:hover{box-shadow:").concat(hoverShadow, ";}.card.__jsx-style-dynamic-selector img{width:100%;}.card.__jsx-style-dynamic-selector .image{border-bottom-left-radius:0;border-bottom-right-radius:0;}")));
 }
 
+CardComponent.defaultProps = defaultProps;
 CardComponent.displayName = 'BolioUICard';
 var Card = withScale(CardComponent);
 export default Card;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bolio-ui/core",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "license": "MIT",
   "description": "Amazing, modern and creative tools for React UI. 🥷🏼",
   "homepage": "https://bolio-ui.com/",