@thecb/components 7.7.3-beta.3 → 7.7.3-beta.5

package/dist/index.d.ts

@@ -431,6 +431,9 @@ interface PopoverProps {
   arrowDirection?: "left" | "right" | "top" | "bottom";
   transform?: string;
   disclosedExtraStyles?: string;
+  borderColor?: string;
+  backgroundColor?: string;
+  popoverExtraStyles?: string;
 }
 
 declare const Popover: React.FC<Expand<PopoverProps> &

package/dist/index.esm.js

@@ -15544,7 +15544,14 @@ var CheckIcon = function CheckIcon() {
   })))))));
 };
 
-var WarningIconXS = function WarningIconXS() {
+var WarningIconXS = function WarningIconXS(_ref) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? "#B34A00" : _ref$color,
+      title = _ref.title,
+      _ref$titleID = _ref.titleID,
+      titleID = _ref$titleID === void 0 ? "warning-icon-title" : _ref$titleID,
+      _ref$iconIndex = _ref.iconIndex,
+      iconIndex = _ref$iconIndex === void 0 ? 0 : _ref$iconIndex;
   return /*#__PURE__*/React.createElement("svg", {
     width: "16px",
     height: "13px",
@@ -15552,40 +15559,40 @@ var WarningIconXS = function WarningIconXS() {
     version: "1.1",
     xmlns: "http://www.w3.org/2000/svg",
     xmlnsXlink: "http://www.w3.org/1999/xlink",
-    "aria-labelledby": "#warning-restricted-item",
+    "aria-labelledby": title && "#".concat(titleID, "-").concat(iconIndex),
     role: "img"
-  }, /*#__PURE__*/React.createElement("title", {
-    id: "warning-restricted-item"
-  }, "Warning: restricted items cannot be selected"), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("path", {
+  }, title && /*#__PURE__*/React.createElement("title", {
+    id: "".concat(titleID, "-").concat(iconIndex)
+  }, title), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("path", {
     d: "M11.0106463,4.4659633 C11.3063934,4.63914978 11.5526739,4.88543032 11.7258604,5.18117739 L16.7999622,13.846119 C17.3581267,14.7992854 17.0379144,16.0244612 16.0847481,16.5826257 C15.7781918,16.762142 15.4293522,16.8567653 15.0741018,16.8567653 L4.92589823,16.8567653 C3.82132873,16.8567653 2.92589823,15.9613348 2.92589823,14.8567653 C2.92589823,14.5015149 3.02052159,14.1526753 3.20003784,13.846119 L8.27413962,5.18117739 C8.83230416,4.22801102 10.0574799,3.90779877 11.0106463,4.4659633 Z M10.6666667,13.3333333 L9.33333333,13.3333333 L9.33333333,14.6666667 L10.6666667,14.6666667 L10.6666667,13.3333333 Z M10.6666667,6.66666667 L9.33333333,6.66666667 L9.33333333,12 L10.6666667,12 L10.6666667,6.66666667 Z",
-    id: "WarningIconXs-path-1"
+    id: "WarningIconXs-path-1-".concat(iconIndex)
   })), /*#__PURE__*/React.createElement("g", {
-    id: "WarningIconXs-SRV-2647---Workflow-$0-Balance",
+    id: "WarningIconXs-Group-1-".concat(iconIndex),
     stroke: "none",
     strokeWidth: "1",
     fill: "none",
     fillRule: "evenodd"
   }, /*#__PURE__*/React.createElement("g", {
-    id: "WarningIconXs-11---Search-Results----Checked--Copy-6",
+    id: "WarningIconXs-Group-2-".concat(iconIndex),
     transform: "translate(-135.000000, -483.000000)"
   }, /*#__PURE__*/React.createElement("g", {
-    id: "WarningIconXs-Group",
+    id: "WarningIconXs-Group-3-".concat(iconIndex),
     transform: "translate(133.000000, 479.000000)"
   }, /*#__PURE__*/React.createElement("mask", {
-    id: "WarningIconXs-mask-2",
+    id: "WarningIconXs-mask-2-".concat(iconIndex),
     fill: "white"
   }, /*#__PURE__*/React.createElement("use", {
-    xlinkHref: "#WarningIconXs-path-1"
+    xlinkHref: "#WarningIconXs-path-1-".concat(iconIndex)
   })), /*#__PURE__*/React.createElement("use", {
-    id: "WarningIconXs-Mask",
-    fill: "#B34A00",
+    id: "WarningIconXs-Mask-".concat(iconIndex),
+    fill: color,
     fillRule: "nonzero",
-    xlinkHref: "#WarningIconXs-path-1"
+    xlinkHref: "#WarningIconXs-path-1-".concat(iconIndex)
   }), /*#__PURE__*/React.createElement("polygon", {
-    id: "WarningIconXs-Path",
-    fill: "#B34A00",
+    id: "WarningIconXs-Path-".concat(iconIndex),
+    fill: color,
     fillRule: "nonzero",
-    mask: "url(#WarningIconXs-mask-2)",
+    mask: "url(#WarningIconXs-mask-2-".concat(iconIndex, ")"),
     points: "-2.84217094e-14 -4.26325641e-14 20 -4.26325641e-14 20 20 -2.84217094e-14 20"
   })))));
 };
@@ -23688,10 +23695,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);
@@ -23733,7 +23740,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;
@@ -23819,7 +23831,7 @@ var Popover = function Popover(_ref) {
     color: popoverTriggerColor,
     extraStyles: "&:active { color: ".concat(activeColor, "; } &:hover { color: ").concat(hoverColor, " }; ").concat(textExtraStyles)
   }, triggerText)), /*#__PURE__*/React.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),
@@ -23828,10 +23840,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.createElement(Paragraph$1, null, content), /*#__PURE__*/React.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          ")
   })));
 };