@thecb/components 4.2.7-beta.7 → 4.2.7-beta.8

package/dist/index.cjs.js

@@ -6481,7 +6481,7 @@ function _templateObject2$2() {
 }
 
 function _templateObject$3() {
-  var data = _taggedTemplateLiteral(["\n  overflow: ", ";\n  box-sizing: border-box;\n  justify-self: ", ";\n  align-self: ", ";\n  flex-grow: ", ";\n"]);
+  var data = _taggedTemplateLiteral(["\n  overflow: ", ";\n  box-sizing: border-box;\n  justify-self: ", ";\n  align-self: ", ";\n  flex-grow: ", ";\n  ", ";\n"]);
 
   _templateObject$3 = function _templateObject() {
     return data;
@@ -6508,27 +6508,30 @@ var ClusterWrapper = styled__default(function (_ref) {
 }, function (_ref5) {
   var flexGrow = _ref5.flexGrow;
   return flexGrow;
+}, function (_ref6) {
+  var extraStyles = _ref6.extraStyles;
+  return extraStyles;
 });
-var ClusterInnerWrapper = styled__default.div(_templateObject2$2(), function (_ref6) {
-  var nowrap = _ref6.nowrap;
+var ClusterInnerWrapper = styled__default.div(_templateObject2$2(), function (_ref7) {
+  var nowrap = _ref7.nowrap;
   return nowrap ? "nowrap" : "wrap";
-}, function (_ref7) {
-  var justify = _ref7.justify;
-  return justify;
 }, function (_ref8) {
-  var align = _ref8.align;
-  return align;
+  var justify = _ref8.justify;
+  return justify;
 }, function (_ref9) {
-  var childGap = _ref9.childGap;
-  return childGap;
+  var align = _ref9.align;
+  return align;
 }, function (_ref10) {
-  var minHeight = _ref10.minHeight;
-  return minHeight;
+  var childGap = _ref10.childGap;
+  return childGap;
 }, function (_ref11) {
-  var minWidth = _ref11.minWidth;
-  return minWidth;
+  var minHeight = _ref11.minHeight;
+  return minHeight;
 }, function (_ref12) {
-  var childGap = _ref12.childGap;
+  var minWidth = _ref12.minWidth;
+  return minWidth;
+}, function (_ref13) {
+  var childGap = _ref13.childGap;
   return childGap;
 });
 
@@ -6553,15 +6556,17 @@ var Cluster = function Cluster(_ref) {
       justifySelf = _ref.justifySelf,
       alignSelf = _ref.alignSelf,
       flexGrow = _ref.flexGrow,
+      extraStyles = _ref.extraStyles,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, ["justify", "align", "childGap", "minHeight", "minWidth", "nowrap", "overflow", "justifySelf", "alignSelf", "flexGrow", "children"]);
+      rest = _objectWithoutProperties(_ref, ["justify", "align", "childGap", "minHeight", "minWidth", "nowrap", "overflow", "justifySelf", "alignSelf", "flexGrow", "extraStyles", "children"]);
 
   return /*#__PURE__*/React__default.createElement(ClusterWrapper, _extends({
     overflow: overflow
   }, rest, {
     justifySelf: justifySelf,
     alignSelf: alignSelf,
-    flexGrow: flexGrow
+    flexGrow: flexGrow,
+    extraStyles: extraStyles
   }), /*#__PURE__*/React__default.createElement(ClusterInnerWrapper, {
     justify: justify,
     align: align,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "4.2.7-beta.7",
+  "version": "4.2.7-beta.8",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/atoms/layouts/Cluster.js

@@ -22,6 +22,7 @@ const Cluster = ({
   justifySelf,
   alignSelf,
   flexGrow,
+  extraStyles,
   children,
   ...rest
 }) => (
@@ -31,6 +32,7 @@ const Cluster = ({
     justifySelf={justifySelf}
     alignSelf={alignSelf}
     flexGrow={flexGrow}
+    extraStyles={extraStyles}
   >
     <ClusterInnerWrapper
       justify={justify}

package/src/components/atoms/layouts/Cluster.styled.js

@@ -10,6 +10,7 @@ export const ClusterWrapper = styled(({ overflow, ...props }) => (
   justify-self: ${({ justifySelf }) => justifySelf};
   align-self: ${({ alignSelf }) => alignSelf};
   flex-grow: ${({ flexGrow }) => flexGrow};
+  ${({ extraStyles }) => extraStyles};
 `;
 
 export const ClusterInnerWrapper = styled.div`