@thecb/components 5.2.1 → 5.3.3-beta.0

package/dist/index.esm.js

@@ -12541,7 +12541,7 @@ var ButtonWithAction = function ButtonWithAction(_ref2) {
     activeStyles: activeStyles,
     disabledStyles: disabledStyles,
     as: "button",
-    onClick: !isLoading && action,
+    onClick: isLoading ? undefined : action,
     borderRadius: "2px",
     theme: themeContext,
     extraStyles: "margin: 0.5rem; ".concat(extraStyles),
@@ -19280,15 +19280,12 @@ var DropdownIcon = function DropdownIcon() {
     transform: "translate(1 1)"
   }, /*#__PURE__*/React.createElement("g", {
     fillRule: "evenodd",
-    fill: "none",
-    id: "Symbols_1548197283918"
+    fill: "none"
   }, /*#__PURE__*/React.createElement("g", {
     fill: "#333",
-    transform: "translate(-155 -22)",
-    id: "Dropdown/Closed_1548197283918"
+    transform: "translate(-155 -22)"
   }, /*#__PURE__*/React.createElement("polygon", {
     points: "165.59 22.59 161 27.17 156.41 22.59 155 24 161 30 167 24",
-    id: "Path_1548197283918",
     vectorEffect: "non-scaling-stroke"
   })))));
 };
@@ -40451,7 +40448,9 @@ var fallbackValues$C = {
     {
       title: <React Component(s)>,
       id: <String> "identifier of section",
-      disabled: boolean,
+      disabled: boolean, (displays section and grayed out radio but disables interaction)
+      hideRadioButton: boolean, (keeps section displayed but hides radio and disables open/close function),
+      hidden: boolean, (hides section entirely)
       dataQa: string,
       content: <React Component(s)> e.g.: <Box><Stack>cool content stuff</Stack></Box> (any collection of components will work)
     }
@@ -40571,7 +40570,7 @@ var RadioSection = function RadioSection(_ref) {
     return !section.hidden;
   }).map(function (section) {
     return /*#__PURE__*/React.createElement(Motion, {
-      tabIndex: "0",
+      tabIndex: section.hideRadioButton ? "-1" : "0",
       onKeyDown: function onKeyDown(e) {
         return handleKeyDown(section.id, e);
       },
@@ -41109,13 +41108,10 @@ var fontWeight$8 = {
   "default": FONT_WEIGHT_REGULAR,
   footer: FONT_WEIGHT_SEMIBOLD
 };
+var standardInteractionStyles = "\n    &:hover {\n      outline: none; \n      text-decoration: underline;\n    }\n    &:focus {\n      outline: 3px solid #3181E3;\n      outline-offset: 2px;\n    }\n";
 var modalLinkHoverFocus$2 = {
-  "default": "outline: none; text-decoration: underline;",
-  footer: "outline: none; text-decoration: underline;"
-};
-var accessibilityColor = {
-  "default": "#3181E3",
-  footer: "#3181E3"
+  "default": standardInteractionStyles,
+  footer: standardInteractionStyles
 };
 var fallbackValues$F = {
   backgroundColor: backgroundColor$9,
@@ -41124,8 +41120,7 @@ var fallbackValues$F = {
   fontSize: fontSize$c,
   lineHeight: lineHeight$6,
   fontWeight: fontWeight$8,
-  modalLinkHoverFocus: modalLinkHoverFocus$2,
-  accessibilityColor: accessibilityColor
+  modalLinkHoverFocus: modalLinkHoverFocus$2
 };
 
 var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
@@ -41174,8 +41169,7 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
     tabIndex: "0",
     color: themeValues.linkColor,
     weight: themeValues.fontWeight,
-    hoverStyles: themeValues.modalLinkHoverFocus,
-    extraStyles: "cursor: pointer;    \n      &:focus { \n        outline: 3px solid ".concat(themeValues.accessibilityColor, "; \n        outline-offset: 2px; \n      }")
+    hoverStyles: themeValues.modalLinkHoverFocus
   }, link));
 };