@thecb/components 12.0.0-beta.5 → 12.0.0-beta.7

package/dist/index.esm.js

@@ -26306,9 +26306,13 @@ var BankItemWrapper = styled.div.withConfig({
   displayName: "FormattedBankAccount__BankItemWrapper",
   componentId: "sc-18hcgw4-0"
 })(["display:flex;justify-content:flex-start;align-items:center;"]);
+var BankIconWrapper = styled.div.withConfig({
+  displayName: "FormattedBankAccount__BankIconWrapper",
+  componentId: "sc-18hcgw4-1"
+})(["margin-right:8px;width:36px;height:auto;display:flex;"]);
 var BankAccountText = styled.h4.withConfig({
   displayName: "FormattedBankAccount__BankAccountText",
-  componentId: "sc-18hcgw4-1"
+  componentId: "sc-18hcgw4-2"
 })(["color:", ";font-size:1rem;font-weight:400;line-height:1.5rem;text-align:left;margin-right:0.5rem;display:inline-block;"], function (_ref) {
   var color = _ref.color;
   return color;
@@ -26320,10 +26324,7 @@ var FormattedBankAccount = function FormattedBankAccount(_ref2) {
     accountType = _ref2.accountType,
     autoPay = _ref2.autoPay,
     themeValues = _ref2.themeValues;
-  return /*#__PURE__*/React__default.createElement(BankItemWrapper, null, /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0.25rem 0 0 0",
-    extraStyles: "margin-right: 1rem;"
-  }, /*#__PURE__*/React__default.createElement(BankIcon, null)), /*#__PURE__*/React__default.createElement(Stack, {
+  return /*#__PURE__*/React__default.createElement(BankItemWrapper, null, /*#__PURE__*/React__default.createElement(BankIconWrapper, null, /*#__PURE__*/React__default.createElement(BankIconLarge, null)), /*#__PURE__*/React__default.createElement(Stack, {
     childGap: "0"
   }, accountType === CHECKING && /*#__PURE__*/React__default.createElement(BankAccountText, {
     color: themeValues.textColor
@@ -26378,7 +26379,7 @@ var CardType = function CardType(_ref) {
   var _ref2 = cardBrands[normalizedType] || cardBrands["default"],
     label = _ref2.label,
     IconComponent = _ref2[size];
-  return /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(IconComponent, null));
+  return /*#__PURE__*/React__default.createElement(IconComponent, null);
 };
 
 var textColor$2 = "".concat(CHARADE_GREY);
@@ -26455,7 +26456,7 @@ var CreditCardWrapper = styled.div.withConfig({
 var CCIconWrapper = styled.div.withConfig({
   displayName: "FormattedCreditCard__CCIconWrapper",
   componentId: "sc-s0ta5l-1"
-})(["margin-right:16px;width:36px;height:auto;display:flex;"]);
+})(["margin-right:8px;width:36px;height:auto;display:flex;"]);
 var FormattedCreditCard = function FormattedCreditCard(_ref) {
   var lastFour = _ref.lastFour,
     type = _ref.type,
@@ -27564,7 +27565,7 @@ var RadioButton$1 = function RadioButton(_ref2) {
     borderWidth: "1px",
     borderStyle: "solid",
     borderRadius: "12px",
-    margin: "6px 14px 6px 6px",
+    margin: "6px 8px 6px 6px",
     height: "24px",
     width: "24px",
     variants: buttonBorder,
@@ -45821,30 +45822,30 @@ var fallbackValues$L = {
 var LinkWrapper = styled(Link).withConfig({
   displayName: "LinkCardstyled__LinkWrapper",
   componentId: "sc-l5q1h2-0"
-})(["display:flex;flex-direction:column;align-items:flex-start;gap:40px;flex-shrink:0;padding:24px;align-self:stretch;border-radius:8px;text-decoration:none;", " transition:all .2s ease-in-out;", ""], function (_ref) {
-  var isDisabled = _ref.isDisabled,
-    theme = _ref.theme;
-  return "\n    background-color: ".concat(isDisabled ? theme.disabledBackgroundColor : theme.backgroundColor, ";\n    border: 1px solid ").concat(isDisabled ? theme.disabledBorderColor : theme.borderColor, ";\n  ");
-}, function (_ref2) {
-  var isDisabled = _ref2.isDisabled,
-    theme = _ref2.theme;
-  return isDisabled ? "\n        &:hover,\n        &:active {\n          cursor: default;\n          box-shadow: none;\n          border: 1px solid ".concat(theme.disabledBorderColor, ";\n        }\n      ") : "\n        &:hover,\n        &:active {\n          cursor: pointer;\n          box-shadow: 0px 0px 0px 0px rgba(41, 42, 51, 0.1),\n            0px 5px 11px 0px rgba(41, 42, 51, 0.1),\n            0px 4px 19px 0px rgba(41, 42, 51, 0.09),\n            0px 27px 26px 0px rgba(41, 42, 51, 0.05),\n            0px 56px 31px 0px rgba(41, 42, 51, 0.01),\n            0px 80px 33px 0px rgba(41, 42, 51, 0);\n        }\n\n        &:hover:not(:active) {\n          border: 1px solid ".concat(theme.borderColor, ";\n        }\n\n        &:active {\n          background-color: ").concat(theme.activeBackgroundColor, ";\n          border: 1px solid ").concat(theme.borderColor, ";\n        }\n      ");
+})(["", ""], function (_ref) {
+  var disabled = _ref.disabled,
+    theme = _ref.$theme,
+    extraStyles = _ref.extraStyles,
+    disabledStyles = _ref.disabledStyles,
+    hoverStyles = _ref.hoverStyles,
+    activeStyles = _ref.activeStyles;
+  return "\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 40px;\n  flex-shrink: 0;\n  padding: 24px;\n  align-self: stretch;\n  border-radius: 8px;\n  text-decoration: none;\n  background-color: ".concat(disabled ? theme.disabledBackgroundColor : theme.backgroundColor, ";\n  border: 1px solid\n    ").concat(disabled ? theme.disabledBorderColor : theme.borderColor, ";\n  transition: all 0.2s ease-in-out;\n  ").concat(extraStyles || "", "\n\n  ").concat(disabled ? "\n        &:hover,\n        &:active {\n          cursor: default;\n          box-shadow: none;\n          border: 1px solid ".concat(theme.disabledBorderColor, ";\n          ").concat(disabledStyles || "", "\n        }\n      ") : "\n        &:hover,\n        &:active {\n          cursor: pointer;\n          box-shadow: 0px 0px 0px 0px rgba(41, 42, 51, 0.1),\n            0px 5px 11px 0px rgba(41, 42, 51, 0.1),\n            0px 4px 19px 0px rgba(41, 42, 51, 0.09),\n            0px 27px 26px 0px rgba(41, 42, 51, 0.05),\n            0px 56px 31px 0px rgba(41, 42, 51, 0.01),\n            0px 80px 33px 0px rgba(41, 42, 51, 0);\n        }\n        ".concat(hoverStyles || "", "\n\n        &:hover:not(:active) {\n          border: 1px solid ").concat(theme.borderColor, ";\n        }\n\n        &:active {\n          background-color: ").concat(theme.activeBackgroundColor, ";\n          border: 1px solid ").concat(theme.borderColor, ";\n          ").concat(activeStyles || "", "\n        }\n      "), "\n  ");
 });
 var Title$2 = styled(Heading$1).withConfig({
   displayName: "LinkCardstyled__Title",
   componentId: "sc-l5q1h2-1"
-})(["display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;align-self:stretch;overflow:hidden;text-overflow:ellipsis;font-size:16px;line-height:150%;background-color:transparent;font-weight:", ";", ";"], FONT_WEIGHT_SEMIBOLD, function (_ref3) {
-  var isDisabled = _ref3.isDisabled,
-    theme = _ref3.theme;
-  return "color: ".concat(isDisabled ? theme.disabledColor : theme.color, ";");
+})(["display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;align-self:stretch;overflow:hidden;text-overflow:ellipsis;font-size:16px;line-height:150%;background-color:transparent;font-weight:", ";color:", ";"], FONT_WEIGHT_SEMIBOLD, function (_ref2) {
+  var disabled = _ref2.disabled,
+    theme = _ref2.$theme;
+  return disabled ? theme.disabledColor : theme.color;
 });
 var Subtitle = styled(Paragraph$1).withConfig({
   displayName: "LinkCardstyled__Subtitle",
   componentId: "sc-l5q1h2-2"
-})(["overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;align-self:stretch;font-size:14px;line-height:150%;letter-spacing:0.14px;font-weight:", ";", ";"], FONT_WEIGHT_REGULAR, function (_ref4) {
-  var isDisabled = _ref4.isDisabled,
-    theme = _ref4.theme;
-  return "color: ".concat(isDisabled ? theme.disabledColor : theme.textColor, ";");
+})(["overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;align-self:stretch;font-size:14px;line-height:150%;letter-spacing:0.14px;font-weight:", ";color:", ";"], FONT_WEIGHT_REGULAR, function (_ref3) {
+  var disabled = _ref3.disabled,
+    theme = _ref3.$theme;
+  return disabled ? theme.disabledColor : theme.textColor;
 });
 var Footer = styled(Stack).withConfig({
   displayName: "LinkCardstyled__Footer",
@@ -45876,24 +45877,27 @@ var LinkCard = function LinkCard(_ref) {
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     _ref$isExternalLink = _ref.isExternalLink,
-    isExternalLink = _ref$isExternalLink === void 0 ? false : _ref$isExternalLink;
+    isExternalLink = _ref$isExternalLink === void 0 ? false : _ref$isExternalLink,
+    key = _ref.key;
   var _useContext = useContext(ThemeContext),
     isMobile = _useContext.isMobile;
   var regex = /\W/g;
   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(LinkWrapper, {
+    key: key || locatorSlug,
     as: Link,
     to: disabled ? undefined : href,
     role: "link",
     isMobile: isMobile,
-    dataQa: "link-card-".concat(locatorSlug),
-    theme: themeValues,
+    $theme: themeValues,
     extraStyles: extraStyles,
     hoverStyles: extraHoverStyles,
     activeStyles: extraActiveStyles,
     "aria-disabled": disabled,
-    isDisabled: disabled,
-    "aria-label": "".concat(title, ", ").concat(subtitle)
+    disabled: disabled,
+    "aria-label": "".concat(title, ", ").concat(subtitle),
+    "data-qa": "link-card-".concat(locatorSlug),
+    tabIndex: disabled ? -1 : 0
   }, /*#__PURE__*/React__default.createElement(Stack, {
     childGap: 0,
     bottomItem: 3,
@@ -45908,9 +45912,9 @@ var LinkCard = function LinkCard(_ref) {
     extraStyles: "align-items: center;"
   }, /*#__PURE__*/React__default.createElement(Title$2, {
     variant: titleVariant,
-    theme: themeValues,
+    $theme: themeValues,
     margin: 0,
-    isDisabled: disabled
+    disabled: disabled
   }, title), isExternalLink && /*#__PURE__*/React__default.createElement(ExternalLinkIcon, {
     linkColor: themeValues.color,
     text: locatorSlug,
@@ -45923,8 +45927,8 @@ var LinkCard = function LinkCard(_ref) {
     width: "100%"
   }, /*#__PURE__*/React__default.createElement(Subtitle, {
     variant: "pS",
-    theme: themeValues,
-    isDisabled: disabled
+    $theme: themeValues,
+    disabled: disabled
   }, subtitle)), /*#__PURE__*/React__default.createElement(Box, {
     background: "transparent",
     borderWidthOverride: "0 0 0 0",