@thecb/components 4.1.12 → 4.1.13

package/dist/index.cjs.js

@@ -35140,10 +35140,12 @@ var HighlightTabRow = function HighlightTabRow(_ref) {
     boxShadow: "0px 0px 4px 0px rgb(110, 114, 126)",
     role: "region",
     "aria-label": "Payment step"
+  }, /*#__PURE__*/React__default.createElement(Center, {
+    maxWidth: "76.5rem"
   }, /*#__PURE__*/React__default.createElement(Reel, {
     padding: "0",
-    childGap: "3rem",
-    childWidth: "12rem",
+    childGap: "4.5rem",
+    childWidth: "11rem",
     justifyContent: "space-evenly",
     disableScroll: true
   }, repeat( /*#__PURE__*/React__default.createElement(Box, null), boxesBefore), tabs.map(function (t, i) {
@@ -35160,7 +35162,7 @@ var HighlightTabRow = function HighlightTabRow(_ref) {
       weight: FONT_WEIGHT_SEMIBOLD,
       extraStyles: "display: block; white-space: nowrap;"
     }, t));
-  }), repeat( /*#__PURE__*/React__default.createElement(Box, null), boxesAfter)));
+  }), repeat( /*#__PURE__*/React__default.createElement(Box, null), boxesAfter))));
 };
 
 var HighlightTabRow$1 = /*#__PURE__*/React.memo(themeComponent(HighlightTabRow, "HighlightTabRow", fallbackValues$s));

package/package.json

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

package/src/components/molecules/highlight-tab-row/HighlightTabRow.js

@@ -3,7 +3,7 @@ import { repeat } from "ramda";
 
 import { fallbackValues } from "./HighlightTabRow.theme";
 import { themeComponent } from "../../../util/themeUtils";
-import { Reel, Box } from "../../atoms/layouts";
+import { Reel, Box, Center } from "../../atoms/layouts";
 import Text from "../../atoms/text";
 import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
 
@@ -28,37 +28,39 @@ const HighlightTabRow = ({ tabs, highlightIndex, themeValues, isMobile }) => {
       role="region"
       aria-label="Payment step"
     >
-      <Reel
-        padding="0"
-        childGap="3rem"
-        childWidth="12rem"
-        justifyContent="space-evenly"
-        disableScroll
-      >
-        {repeat(<Box />, boxesBefore)}
-        {tabs.map((t, i) => (
-          <Box
-            key={t}
-            borderSize="3px"
-            borderColor={
-              highlightIndex == i ? themeValues.textColor : "transparent"
-            }
-            borderWidthOverride="0 0 3px 0"
-            extraStyles="text-align: center;"
-          >
-            <Text
-              variant="p"
-              textAlign="center"
-              color={themeValues.textColor}
-              weight={FONT_WEIGHT_SEMIBOLD}
-              extraStyles="display: block; white-space: nowrap;"
+      <Center maxWidth="76.5rem">
+        <Reel
+          padding="0"
+          childGap="4.5rem"
+          childWidth="11rem"
+          justifyContent="space-evenly"
+          disableScroll
+        >
+          {repeat(<Box />, boxesBefore)}
+          {tabs.map((t, i) => (
+            <Box
+              key={t}
+              borderSize="3px"
+              borderColor={
+                highlightIndex == i ? themeValues.textColor : "transparent"
+              }
+              borderWidthOverride="0 0 3px 0"
+              extraStyles="text-align: center;"
             >
-              {t}
-            </Text>
-          </Box>
-        ))}
-        {repeat(<Box />, boxesAfter)}
-      </Reel>
+              <Text
+                variant="p"
+                textAlign="center"
+                color={themeValues.textColor}
+                weight={FONT_WEIGHT_SEMIBOLD}
+                extraStyles="display: block; white-space: nowrap;"
+              >
+                {t}
+              </Text>
+            </Box>
+          ))}
+          {repeat(<Box />, boxesAfter)}
+        </Reel>
+      </Center>
     </Box>
   );
 };