@thecb/components 7.7.3-beta.2 → 7.7.3-beta.4

package/dist/index.cjs.js

@@ -23696,10 +23696,10 @@ var fallbackValues$i = {
   popoverTriggerColor: popoverTriggerColor
 };
 
-var arrowBorder = function arrowBorder(direction) {
-  var width = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "8px";
+var arrowBorder = function arrowBorder(borderColor, direction) {
+  var width = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "8px";
   var angle = "".concat(width, " solid transparent");
-  var straight = "".concat(width, " solid rgba(255, 255, 255, 0.85)");
+  var straight = "".concat(width, " solid ").concat(borderColor);
 
   if (direction == "down") {
     return "border-left: ".concat(angle, "; border-right: ").concat(angle, "; border-top: ").concat(straight);
@@ -23741,7 +23741,12 @@ var Popover = function Popover(_ref) {
       arrowDirection = _ref$arrowDirection === void 0 ? "down" : _ref$arrowDirection,
       _ref$transform = _ref.transform,
       transform = _ref$transform === void 0 ? "none" : _ref$transform,
-      buttonExtraStyles = _ref.buttonExtraStyles;
+      buttonExtraStyles = _ref.buttonExtraStyles,
+      _ref$backgroundColor = _ref.backgroundColor,
+      backgroundColor = _ref$backgroundColor === void 0 ? "white" : _ref$backgroundColor,
+      _ref$borderColor = _ref.borderColor,
+      borderColor = _ref$borderColor === void 0 ? "rgba(255, 255, 255, 0.85)" : _ref$borderColor,
+      popoverExtraStyles = _ref.popoverExtraStyles;
   var hoverColor = themeValues.hoverColor,
       activeColor = themeValues.activeColor,
       popoverTriggerColor = themeValues.popoverTriggerColor;
@@ -23827,7 +23832,7 @@ var Popover = function Popover(_ref) {
     color: popoverTriggerColor,
     extraStyles: "&:active { color: ".concat(activeColor, "; } &:hover { color: ").concat(hoverColor, " }; ").concat(textExtraStyles)
   }, triggerText)), /*#__PURE__*/React__default.createElement(Box, {
-    background: "white",
+    background: backgroundColor,
     borderRadius: "4px",
     boxShadow: "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)",
     id: "Disclosed".concat(popoverID),
@@ -23836,10 +23841,10 @@ var Popover = function Popover(_ref) {
     tabIndex: popoverFocus && popoverOpen ? "0" : "-1",
     minWidth: minWidth,
     maxWidth: maxWidth,
-    extraStyles: "\n          display: ".concat(popoverOpen ? "block" : "none", "; \n          position: absolute; \n          top: ").concat(top, "; \n          right: ").concat(right, "; \n          bottom: ").concat(bottom, "; \n          left: ").concat(left, ";\n          height: ").concat(height, ";\n          transform: ").concat(transform, ";\n          ")
+    extraStyles: "\n          display: ".concat(popoverOpen ? "block" : "none", "; \n          position: absolute; \n          top: ").concat(top, "; \n          right: ").concat(right, "; \n          bottom: ").concat(bottom, "; \n          left: ").concat(left, ";\n          height: ").concat(height, ";\n          transform: ").concat(transform, ";\n          ").concat(popoverExtraStyles, ";\n          ")
   }, /*#__PURE__*/React__default.createElement(Paragraph$1, null, content), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
-    extraStyles: "\n            position: absolute;\n            content: \"\";\n            width: 0;\n            height: 0;\n            ".concat(arrowBorder(arrowDirection, "8px"), ";\n            filter: drop-shadow(2px 8px 14px black);\n            bottom: ").concat(arrowBottom, ";\n            right: ").concat(arrowRight, ";\n            top: ").concat(arrowTop, ";\n            left: ").concat(arrowLeft, ";\n          ")
+    extraStyles: "\n            position: absolute;\n            content: \"\";\n            width: 0;\n            height: 0;\n            ".concat(arrowBorder(borderColor, arrowDirection, "8px"), ";\n            filter: drop-shadow(2px 8px 14px black);\n            bottom: ").concat(arrowBottom, ";\n            right: ").concat(arrowRight, ";\n            top: ").concat(arrowTop, ";\n            left: ").concat(arrowLeft, ";\n          ")
   })));
 };
 
@@ -36427,7 +36432,7 @@ var LoadingLine = function LoadingLine(_ref) {
 var Table_styled = styled__default.table.withConfig({
   displayName: "Tablestyled",
   componentId: "sc-mveye7-0"
-})(["width:100%;table-layout:auto;", ""], function (_ref) {
+})(["width:100%;table-layout:auto;border-collapse:collapse;", ""], function (_ref) {
   var extraStyles = _ref.extraStyles;
   return extraStyles;
 });
@@ -36443,11 +36448,20 @@ var TableBody_styled = styled__default.tbody.withConfig({
 var TableCell_styled = styled__default.td.withConfig({
   displayName: "TableCellstyled",
   componentId: "sc-iqndn8-0"
-})(["padding:", ";font-size:0.875rem;white-space:nowrap;max-width:250px;overflow:hidden;text-overflow:ellipsis;&:last-child{text-align:right;}", ";"], function (_ref) {
-  var padding = _ref.padding;
-  return padding ? padding : "24px";
+})(["padding:", ";font-size:", " white-space:nowrap;max-width:", ";overflow:hidden;text-overflow:ellipsis;&:last-child{text-align:right;}", ";"], function (_ref) {
+  var _ref$padding = _ref.padding,
+      padding = _ref$padding === void 0 ? "24px" : _ref$padding;
+  return padding;
 }, function (_ref2) {
-  var extraStyles = _ref2.extraStyles;
+  var _ref2$fontSize = _ref2.fontSize,
+      fontSize = _ref2$fontSize === void 0 ? "0.875rem" : _ref2$fontSize;
+  return fontSize;
+}, function (_ref3) {
+  var _ref3$maxWidth = _ref3.maxWidth,
+      maxWidth = _ref3$maxWidth === void 0 ? "250px" : _ref3$maxWidth;
+  return maxWidth;
+}, function (_ref4) {
+  var extraStyles = _ref4.extraStyles;
   return extraStyles;
 });
 
@@ -36461,12 +36475,16 @@ var fallbackValues$A = {
 var StyledTableHead = styled__default.thead.withConfig({
   displayName: "TableHeadstyled",
   componentId: "sc-j8e6c1-0"
-})(["background-color:", ";border-bottom:", ";font-size:0.875rem;"], function (_ref) {
+})(["background-color:", ";border-bottom:", ";font-size:", ";"], function (_ref) {
   var backgroundColor = _ref.backgroundColor;
   return backgroundColor;
 }, function (_ref2) {
   var borderColor = _ref2.borderColor;
   return "1px solid ".concat(borderColor);
+}, function (_ref3) {
+  var _ref3$fontSize = _ref3.fontSize,
+      fontSize = _ref3$fontSize === void 0 ? "0.875rem" : _ref3$fontSize;
+  return fontSize;
 });
 
 var borderColor$4 = GREY_CHATEAU;
@@ -36534,11 +36552,16 @@ var TableHead$1 = themeComponent(TableHead, "TableHead", fallbackValues$A);
 var TableHeading_styled = styled__default.th.withConfig({
   displayName: "TableHeadingstyled",
   componentId: "sc-1ggk38d-0"
-})(["padding:24px;min-width:", ";text-align:left;&:last-child{text-align:right;}", ""], function (_ref) {
-  var minWidth = _ref.minWidth;
-  return minWidth ? minWidth : "initial";
+})(["padding:", ";min-width:", ";text-align:left;&:last-child{text-align:right;}", ""], function (_ref) {
+  var _ref$padding = _ref.padding,
+      padding = _ref$padding === void 0 ? "24px" : _ref$padding;
+  return padding;
 }, function (_ref2) {
-  var extraStyles = _ref2.extraStyles;
+  var _ref2$minWidth = _ref2.minWidth,
+      minWidth = _ref2$minWidth === void 0 ? "initial" : _ref2$minWidth;
+  return minWidth;
+}, function (_ref3) {
+  var extraStyles = _ref3.extraStyles;
   return extraStyles;
 });