@thecb/components 7.13.3-beta.1 → 7.13.3-beta.10

package/dist/index.cjs.js

@@ -40375,6 +40375,48 @@ var fallbackValues$D = {
   bodyBackgroundColor: bodyBackgroundColor
 };
 
+var ChevronIconWhite = function ChevronIconWhite(_ref) {
+  var themeValues = _ref.themeValues,
+      iconFill = _ref.iconFill;
+  return /*#__PURE__*/React__default.createElement("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg",
+    xmlnsXlink: "http://www.w3.org/1999/xlink",
+    style: {
+      display: "inline-block",
+      verticalAlign: "text-bottom"
+    }
+  }, /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("polygon", {
+    id: "icon-chevron-path-1",
+    points: "10.4099998 6 9 7.40999976 13.5799996 11.9999996 9 16.5899995 10.4099998 17.9999993 16.4099994 11.9999996"
+  })), /*#__PURE__*/React__default.createElement("g", {
+    id: "icon-chevron-Icon/Chevron-Down",
+    fill: "#ffffff",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React__default.createElement("mask", {
+    id: "icon-chevron-mask-2"
+  }, /*#__PURE__*/React__default.createElement("use", {
+    fill: iconFill !== null && iconFill !== void 0 ? iconFill : themeValues.singleIconColor,
+    xlinkHref: "#icon-chevron-path-1"
+  })), /*#__PURE__*/React__default.createElement("use", {
+    fill: iconFill !== null && iconFill !== void 0 ? iconFill : themeValues.singleIconColor,
+    id: "icon-chevron-Fill-2",
+    xlinkHref: "#icon-chevron-path-1"
+  }), /*#__PURE__*/React__default.createElement("g", {
+    id: "Colors/Blue-Dark",
+    mask: "url(#icon-chevron-mask-2)",
+    fill: iconFill !== null && iconFill !== void 0 ? iconFill : themeValues.singleIconColor
+  }, /*#__PURE__*/React__default.createElement("rect", {
+    id: "icon-chevron-rect",
+    width: "24",
+    height: "24"
+  }))));
+};
+
+var ChevronIconWhite$1 = themeComponent(ChevronIconWhite, "Icons", fallbackValues$2, "secondary");
+
 var CollapsibleSection = function CollapsibleSection(_ref) {
   var _label$replaceAll;
 
@@ -40401,8 +40443,10 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
       name = _ref$name === void 0 ? "" : _ref$name,
       _ref$index = _ref.index,
       index = _ref$index === void 0 ? 1 : _ref$index,
-      _ref$headerEl = _ref.headerEl,
-      headerEl = _ref$headerEl === void 0 ? null : _ref$headerEl;
+      _ref$iconColor = _ref.iconColor,
+      _ref$extraStyles = _ref.extraStyles,
+      extraStyles = _ref$extraStyles === void 0 ? "" : _ref$extraStyles,
+      CustomIcon = _ref.CustomIcon;
 
   var handleKeyDown = function handleKeyDown(e) {
     if (e.keyCode === 13) {
@@ -40462,7 +40506,7 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
     hoverStyles: "cursor: pointer;",
     tabIndex: "0",
     onKeyDown: handleKeyDown,
-    extraStyles: "z-index: 25;",
+    extraStyles: "z-index: 25;".concat(extraStyles),
     role: "button",
     "aria-expanded": isOpen.toString(),
     "aria-controls": id,
@@ -40472,20 +40516,16 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
     align: "center"
   }, customTitle ? /*#__PURE__*/React__default.createElement(Box, {
     width: "calc(100% - 36px)",
-    padding: "0px",
-    id: "cristin"
-  }, headerEl ? headerEl : title) : /*#__PURE__*/React__default.createElement(Title$1, {
+    padding: "0"
+  }, title) : /*#__PURE__*/React__default.createElement(Title$1, {
     weight: FONT_WEIGHT_SEMIBOLD,
     color: themeValues.titleColor,
     as: "h6",
-    variant: "small",
-    id: "cristin"
-  }, headerEl ? headerEl : title), /*#__PURE__*/React__default.createElement(Motion, {
+    variant: "small"
+  }, title), /*#__PURE__*/React__default.createElement(Motion, {
     variants: icon,
     extraStyles: "display: flex; align-items: center;"
-  }, /*#__PURE__*/React__default.createElement(ChevronIcon$1, {
-    color: iconColor ? iconColor : null
-  }))))), /*#__PURE__*/React__default.createElement(AnimatePresence, {
+  }, CustomIcon ? /*#__PURE__*/React__default.createElement(CustomIcon, null) : /*#__PURE__*/React__default.createElement(ChevronIconWhite$1, null))))), /*#__PURE__*/React__default.createElement(AnimatePresence, {
     initial: false
   }, isOpen && /*#__PURE__*/React__default.createElement(Motion, {
     padding: "0",