@thecb/components 11.1.7-beta.0 → 11.1.8-beta.0

package/dist/index.cjs.js

@@ -28470,10 +28470,12 @@ var ProcessingFee = function ProcessingFee(_ref) {
 var ProcessingFee$1 = themeComponent(ProcessingFee, "ProcessingFee", fallbackValues$w, "default");
 
 var activeColor$6 = MATISSE_BLUE;
+var disabledColor$1 = MANATEE_GREY; // or GREY_CHATEAU?
 var inactiveBorderColor = GREY_CHATEAU;
 var fallbackValues$x = {
-  inactiveBorderColor: inactiveBorderColor,
-  activeColor: activeColor$6
+  activeColor: activeColor$6,
+  disabledColor: disabledColor$1,
+  inactiveBorderColor: inactiveBorderColor
 };
 
 var HiddenRadioInput = styled__default.input.withConfig({
@@ -28484,8 +28486,8 @@ var Circle = styled__default.div.withConfig({
   displayName: "RadioButtonWithLabel__Circle",
   componentId: "sc-1m9whwg-1"
 })(["flex-shrink:0;margin-right:8px;width:1.5rem;height 1.5rem;border:", ";border-radius:50%;box-sizing:border-box;padding:2px;:after{content:\"\";width:100%;height:100%;display:block;background:", ";border-radius:50%;transform:scale(0);}"], function (_ref) {
-  var inactiveBorderColor = _ref.inactiveBorderColor;
-  return "1px solid ".concat(inactiveBorderColor);
+  var borderColor = _ref.borderColor;
+  return "1px solid ".concat(borderColor);
 }, function (_ref2) {
   var activeColor = _ref2.activeColor;
   return activeColor;
@@ -28494,11 +28496,11 @@ var InputAndLabelContainer = styled__default(Cluster).withConfig({
   displayName: "RadioButtonWithLabel__InputAndLabelContainer",
   componentId: "sc-1m9whwg-2"
 })(["overflow:visible;", ":checked + label ", ":after{transform:scale(0.85);transition:transform 0.15s;}", ":checked + label ", "{border:", "}", ":focus + label ", "{{box-shadow:", "}"], HiddenRadioInput, Circle, HiddenRadioInput, Circle, function (_ref3) {
-  var activeColor = _ref3.activeColor;
-  return "1px solid ".concat(activeColor, ";");
+  var borderColor = _ref3.borderColor;
+  return "1px solid ".concat(borderColor, ";");
 }, HiddenRadioInput, Circle, function (_ref4) {
-  var activeColor = _ref4.activeColor;
-  return "0px 0px 2px 1px ".concat(activeColor, ";");
+  var borderColor = _ref4.borderColor;
+  return "0px 0px 2px 1px ".concat(borderColor, ";");
 });
 var RadioButtonWithLabel = function RadioButtonWithLabel(_ref5) {
   var _ref5$id = _ref5.id,
@@ -28515,7 +28517,11 @@ var RadioButtonWithLabel = function RadioButtonWithLabel(_ref5) {
     _ref5$handleChange = _ref5.handleChange,
     handleChange = _ref5$handleChange === void 0 ? noop$1 : _ref5$handleChange,
     field = _ref5.field,
-    config = _ref5.config;
+    config = _ref5.config,
+    _ref5$disabled = _ref5.disabled,
+    disabled = _ref5$disabled === void 0 ? false : _ref5$disabled,
+    _ref5$title = _ref5.title,
+    title = _ref5$title === void 0 ? "" : _ref5$title;
   var getDefaultChecked = function getDefaultChecked(value, idx) {
     var selectionExistsInConfig = config === null || config === void 0 ? void 0 : config.map(function (c) {
       return c.value;
@@ -28530,8 +28536,10 @@ var RadioButtonWithLabel = function RadioButtonWithLabel(_ref5) {
   return /*#__PURE__*/React__default.createElement(InputAndLabelContainer, {
     align: "center",
     childGap: "0.5rem",
-    activeColor: themeValues.activeColor
+    borderColor: disabled ? themeValues.inactiveBorderColor : themeValues.activeColor,
+    title: title
   }, /*#__PURE__*/React__default.createElement(HiddenRadioInput, {
+    disabled: disabled,
     "aria-invalid": ariaInvalid,
     style: {
       marginTop: 0
@@ -28550,8 +28558,8 @@ var RadioButtonWithLabel = function RadioButtonWithLabel(_ref5) {
     htmlFor: id,
     extraStyles: "\n          font-size: 1rem;\n          display: flex; \n          width: 100%;\n          :hover {\n            cursor: pointer;\n          }\n        "
   }, /*#__PURE__*/React__default.createElement(Circle, {
-    activeColor: themeValues.activeColor,
-    inactiveBorderColor: themeValues.inactiveBorderColor
+    activeColor: disabled ? themeValues.disabledColor : themeValues.activeColor,
+    borderColor: themeValues.inactiveBorderColor
   }), labelText));
 };
 var RadioButtonWithLabel$1 = themeComponent(RadioButtonWithLabel, "RadioButtonWithLabel", fallbackValues$x);
@@ -41224,7 +41232,7 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
   };
   var numChildren = typeof children === "Array" ? children.length : 1;
   var label = name !== "" ? name : !customTitle ? title : "collapsible section";
-  var id = "".concat(label === null || label === void 0 || (_label$replaceAll = label.replaceAll(" ", "-")) === null || _label$replaceAll === void 0 ? void 0 : _label$replaceAll.toLowerCase(), "-").concat(index);
+  var id = "".concat(label === null || label === void 0 || (_label$replaceAll = label.replaceAll) === null || _label$replaceAll === void 0 || (_label$replaceAll = _label$replaceAll.call(label, " ", "-")) === null || _label$replaceAll === void 0 ? void 0 : _label$replaceAll.toLowerCase(), "-").concat(index);
   var wrapper = {
     open: {
       height: openHeight,
@@ -46471,7 +46479,7 @@ var iconsMap = (_iconsMap = {}, _defineProperty(_defineProperty(_defineProperty(
 
 var disabledBackgroundColor$1 = TRANSPARENT;
 var disabledBorderColor$1 = GHOST_GREY;
-var disabledColor$1 = MANATEE_GREY;
+var disabledColor$2 = MANATEE_GREY;
 var activeBackgroundColor$1 = CORNFLOWER_BLUE;
 var backgroundColor$a = LINK_WATER;
 var borderColor$5 = MOON_RAKER;
@@ -46479,7 +46487,7 @@ var color$b = ROYAL_BLUE_VIVID;
 var fallbackValues$L = {
   disabledBackgroundColor: disabledBackgroundColor$1,
   disabledBorderColor: disabledBorderColor$1,
-  disabledColor: disabledColor$1,
+  disabledColor: disabledColor$2,
   activeBackgroundColor: activeBackgroundColor$1,
   backgroundColor: backgroundColor$a,
   borderColor: borderColor$5,
@@ -46520,6 +46528,7 @@ var Footer = styled__default(Stack).withConfig({
 })(["align-items:center;width:100%;"]);
 
 var LinkCard = function LinkCard(_ref) {
+  var _title$toLowerCase, _title$toLowerCase$re;
   var _ref$title = _ref.title,
     title = _ref$title === void 0 ? "Test Workflow" : _ref$title,
     _ref$subtitle = _ref.subtitle,
@@ -46543,7 +46552,7 @@ var LinkCard = function LinkCard(_ref) {
   var _useContext = React.useContext(styled.ThemeContext),
     isMobile = _useContext.isMobile;
   var regex = /\W/g;
-  var locatorSlug = title.toLowerCase().replaceAll(regex, "-");
+  var locatorSlug = title === null || title === void 0 || (_title$toLowerCase = title.toLowerCase) === null || _title$toLowerCase === void 0 || (_title$toLowerCase = _title$toLowerCase.call(title)) === null || _title$toLowerCase === void 0 || (_title$toLowerCase$re = _title$toLowerCase.replaceAll) === null || _title$toLowerCase$re === void 0 ? void 0 : _title$toLowerCase$re.call(_title$toLowerCase, regex, "-");
   return /*#__PURE__*/React__default.createElement(Container, {
     borderRadius: "8px",
     dataQa: "link-card-".concat(locatorSlug),