@thecb/components 7.8.0 → 7.8.1

package/dist/index.esm.js

@@ -40324,13 +40324,15 @@ var HighlightTabRow = function HighlightTabRow(_ref) {
     maxWidth: "76.5rem"
   }, /*#__PURE__*/React.createElement(Reel, {
     padding: "0",
-    childGap: "4.5rem",
+    childGap: "0",
     childWidth: "11rem",
     justifyContent: "space-evenly",
     disableScroll: true,
     useOrderedList: useOrderedList,
     useUnorderedList: useUnorderedList
   }, repeat( /*#__PURE__*/React.createElement(Box, null), boxesBefore), tabs.map(function (t, i) {
+    var _t$toLowerCase;
+
     return /*#__PURE__*/React.createElement(Box, {
       key: t,
       borderSize: "3px",
@@ -40338,7 +40340,8 @@ var HighlightTabRow = function HighlightTabRow(_ref) {
       borderWidthOverride: "0 0 3px 0",
       extraStyles: "text-align: center; display: block;",
       as: "li",
-      "aria-current": highlightIndex == i ? "step" : ""
+      "aria-current": highlightIndex == i ? "step" : "",
+      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")
     }, /*#__PURE__*/React.createElement(Text$1, {
       variant: "p",
       textAlign: "center",
@@ -40349,7 +40352,7 @@ var HighlightTabRow = function HighlightTabRow(_ref) {
   }), repeat( /*#__PURE__*/React.createElement(Box, null), boxesAfter))));
 };
 
-var HighlightTabRow$1 = /*#__PURE__*/memo(themeComponent(HighlightTabRow, "HighlightTabRow", fallbackValues$F));
+var HighlightTabRow$1 = themeComponent(HighlightTabRow, "HighlightTabRow", fallbackValues$F);
 
 var AccountBillIcon = function AccountBillIcon() {
   return /*#__PURE__*/React.createElement("svg", {
@@ -45538,19 +45541,28 @@ 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.createElement(Fragment$1, null, heading && /*#__PURE__*/React.createElement(Title$1, {
+  var headingText = /*#__PURE__*/React.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.createElement(Box, {
+    extraStyles: "font-size: ".concat(computedFontSize, ";"),
+    id: titleID
+  }, heading);
+  return /*#__PURE__*/React.createElement(Fragment$1, null, heading && !rightTitleContent && headingText, heading && rightTitleContent && /*#__PURE__*/React.createElement(Cluster, {
+    justify: "space-between",
+    align: "center",
+    nowrap: true
+  }, headingText, rightTitleContent), /*#__PURE__*/React.createElement(Box, {
     padding: "0 0 ".concat(spacingBottom)
   }, /*#__PURE__*/React.createElement(Box, {
     padding: padding,