@thecb/components 7.7.8-beta.1 → 7.7.8-beta.2

package/dist/index.cjs.js

@@ -40330,6 +40330,8 @@ var HighlightTabRow = function HighlightTabRow(_ref) {
     useOrderedList: useOrderedList,
     useUnorderedList: useUnorderedList
   }, repeat( /*#__PURE__*/React__default.createElement(Box, null), boxesBefore), tabs.map(function (t, i) {
+    var _t$toLowerCase;
+
     return /*#__PURE__*/React__default.createElement(Box, {
       key: t,
       borderSize: "3px",
@@ -40344,7 +40346,7 @@ var HighlightTabRow = function HighlightTabRow(_ref) {
       color: themeValues.textColor,
       weight: FONT_WEIGHT_SEMIBOLD,
       extraStyles: "display: block; white-space: nowrap;",
-      id: "".concat(t, "-tab-text")
+      id: "".concat(t === null || t === void 0 ? void 0 : (_t$toLowerCase = t.toLowerCase()) === null || _t$toLowerCase === void 0 ? void 0 : _t$toLowerCase.replace(/\s/g, "-"), "-tab-text")
     }, t));
   }), repeat( /*#__PURE__*/React__default.createElement(Box, null), boxesAfter))));
 };
@@ -45538,19 +45540,27 @@ var Module = function Module(_ref) {
       variant = _ref$variant === void 0 ? "default" : _ref$variant,
       fontSize = _ref.fontSize,
       as = _ref.as,
+      _ref$titleID = _ref.titleID,
+      titleID = _ref$titleID === void 0 ? "" : _ref$titleID,
+      rightTitleContent = _ref.rightTitleContent,
       children = _ref.children;
   var themedFontSize = variant === "small" ? "1.25rem" : variant === "default" ? "1.375rem" : "2rem";
   var computedFontSize = fontSize || themedFontSize;
   var themedElemType = variant === "small" ? "h6" : variant === "default" ? "h5" : "h2";
   var computedElemType = as || themedElemType;
-  return /*#__PURE__*/React__default.createElement(React.Fragment, null, heading && /*#__PURE__*/React__default.createElement(Title$1, {
+  var headingText = /*#__PURE__*/React__default.createElement(Title$1, {
     weight: themeValues.fontWeight,
     color: themeValues.fontColor,
     margin: "".concat(spacing, " 0 ").concat(themeValues.titleSpacing, " 0"),
     textAlign: themeValues.textAlign,
     as: computedElemType,
-    extraStyles: "font-size: ".concat(computedFontSize, ";")
-  }, heading), /*#__PURE__*/React__default.createElement(Box, {
+    extraStyles: "font-size: ".concat(computedFontSize, ";"),
+    id: titleID
+  }, heading);
+  return /*#__PURE__*/React__default.createElement(React.Fragment, null, heading && !rightTitleContent && headingText, heading && rightTitleContent && /*#__PURE__*/React__default.createElement(Cluster, {
+    justify: "center",
+    align: "space-between"
+  }, headingText, rightTitleContent), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0 0 ".concat(spacingBottom)
   }, /*#__PURE__*/React__default.createElement(Box, {
     padding: padding,