@thecb/components 11.10.4-beta.0 → 11.10.4-beta.2

package/dist/index.cjs.js

@@ -25946,7 +25946,8 @@ var FormInput = function FormInput(_ref15) {
     minWidth: "100%"
   }, /*#__PURE__*/React__default.createElement(Cluster, {
     justify: "space-between",
-    align: "center"
+    align: "center",
+    overflow: true
   }, labelDisplayOverride ? labelDisplayOverride : /*#__PURE__*/React__default.createElement(Text$1, {
     as: "label",
     color: themeValues.labelColor,
@@ -25954,22 +25955,16 @@ var FormInput = function FormInput(_ref15) {
     fontWeight: themeValues.fontWeight,
     extraStyles: "word-break: break-word;\n                    font-family: Public Sans;\n                    &::first-letter {\n                      text-transform: uppercase;\n                    }",
     id: createIdFromString(labelTextWhenNoError)
-  }, labelTextWhenNoError), type === "password" && /*#__PURE__*/React__default.createElement(Text$1, {
-    variant: labelTextVariant,
-    color: themeValues.linkColor,
-    weight: themeValues.fontWeight,
-    hoverStyles: themeValues.hoverFocusStyles,
-    extraStyles: "text-decoration: underline; cursor: pointer; &:focus { outline-offset: -2px; }",
-    onClick: function onClick() {
+  }, labelTextWhenNoError), type === "password" && /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+    variant: "smallGhost",
+    text: showPassword ? "Hide" : "Show",
+    action: function action() {
       return setShowPassword(!showPassword);
     },
-    tabIndex: "0",
     "aria-label": showPassword ? "Hide Password" : "Show password",
-    "aria-live": "polite",
-    onKeyPress: function onKeyPress(e) {
-      return e.key === "Enter" && setShowPassword(!showPassword);
-    }
-  }, showPassword ? "Hide" : "Show"), isMobile && decorator && /*#__PURE__*/React__default.createElement(Box, {
+    extraStyles: "margin: 0; min-width: auto;",
+    textExtraStyles: "color: ".concat(themeValues.linkColor, ";")
+  }), isMobile && decorator && /*#__PURE__*/React__default.createElement(Box, {
     padding: "0 0 0 auto"
   }, decorator)))), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0"
@@ -26309,7 +26304,7 @@ var FormattedAddress = function FormattedAddress(_ref) {
 var FormattedAddress$1 = themeComponent(FormattedAddress, "FormattedAddress", fallbackValues$n, "default");
 
 var textColor$1 = "".concat(CHARADE_GREY);
-var autopayTextColor = "".concat(SEA_GREEN);
+var autopayTextColor = "".concat(REGENT_GREY);
 var fallbackValues$o = {
   textColor: textColor$1,
   autopayTextColor: autopayTextColor
@@ -26345,8 +26340,8 @@ var FormattedBankAccount = function FormattedBankAccount(_ref2) {
   }, "Savings Account ending in ", lastFour), autoPay && /*#__PURE__*/React__default.createElement(Text$1, {
     variant: "p",
     color: themeValues.autopayTextColor,
-    extraStyles: "font-style: italic; font-size: .75rem;"
-  }, "Autopay On")));
+    extraStyles: "font-style: italic;"
+  }, "Autopay Enabled")));
 };
 var FormattedBankAccount$1 = themeComponent(FormattedBankAccount, "FormattedBankAccount", fallbackValues$o);
 
@@ -26395,7 +26390,7 @@ var CardType = function CardType(_ref) {
 };
 
 var textColor$2 = "".concat(CHARADE_GREY);
-var autopayTextColor$1 = "".concat(SEA_GREEN);
+var autopayTextColor$1 = "".concat(REGENT_GREY);
 var fallbackValues$p = {
   textColor: textColor$2,
   autopayTextColor: autopayTextColor$1
@@ -26424,15 +26419,13 @@ var renderCardStatus = function renderCardStatus(expirationStatus, expireDate) {
       return /*#__PURE__*/React__default.createElement(Text$1, {
         as: as,
         variant: "pXS",
-        fontSize: ".75rem",
-        color: STORM_GREY,
+        color: ASH_GREY,
         extraStyles: "text-align: ".concat(textAlign, "; margin: ").concat(textMargin, ";")
       }, "Exp Date ", expireDate);
     case EXPIRING_SOON:
       return /*#__PURE__*/React__default.createElement(Text$1, {
         as: as,
         variant: "pXS",
-        fontSize: ".75rem",
         color: FIRE_YELLOW,
         extraStyles: "text-align: ".concat(textAlign, "; margin: ").concat(textMargin, ";")
       }, "Expiring Soon ", expireDate);
@@ -26440,8 +26433,7 @@ var renderCardStatus = function renderCardStatus(expirationStatus, expireDate) {
       return /*#__PURE__*/React__default.createElement(Text$1, {
         as: as,
         variant: "pXS",
-        fontSize: ".75rem",
-        color: STORM_GREY,
+        color: ASH_GREY,
         extraStyles: "text-align: ".concat(textAlign, "; margin: ").concat(textMargin, ";")
       }, "Expired");
   }
@@ -26494,8 +26486,8 @@ var FormattedCreditCard = function FormattedCreditCard(_ref) {
   }, "Card ending in ".concat(lastFour)), expireDate && /*#__PURE__*/React__default.createElement(React.Fragment, null, renderCardStatus(expirationStatus, expireDate, "left", "p"))), autoPay && /*#__PURE__*/React__default.createElement(Text$1, {
     variant: "p",
     color: themeValues.autopayTextColor,
-    extraStyles: "font-style: italic; font-size: .75rem;"
-  }, "Autopay On")));
+    extraStyles: "font-style: italic;"
+  }, "Autopay Enabled")));
 };
 var FormattedCreditCard$1 = themeComponent(FormattedCreditCard, "FormattedCreditCard", fallbackValues$p);
 
@@ -40901,6 +40893,7 @@ var EditableList = function EditableList(_ref) {
     _ref$canAdd = _ref.canAdd,
     canAdd = _ref$canAdd === void 0 ? true : _ref$canAdd,
     addItem = _ref.addItem,
+    addItemDestination = _ref.addItemDestination,
     removeItem = _ref.removeItem,
     editItem = _ref.editItem,
     itemName = _ref.itemName,
@@ -41008,6 +41001,8 @@ var EditableList = function EditableList(_ref) {
     padding: items.length === 0 ? "0" : "1rem 0 0"
   }, /*#__PURE__*/React__default.createElement(Placeholder$1, {
     text: addText,
+    isLink: !!addItemDestination,
+    destination: addItemDestination,
     action: addItem,
     dataQa: "Add " + qaPrefix,
     "aria-label": addText,