@thecb/components 12.0.0-beta.6 → 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,33 +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 extraStyles = _ref2.extraStyles;
-  return extraStyles;
-}, function (_ref3) {
-  var isDisabled = _ref3.isDisabled,
-    theme = _ref3.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 (_ref4) {
-  var isDisabled = _ref4.isDisabled,
-    theme = _ref4.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 (_ref5) {
-  var isDisabled = _ref5.isDisabled,
-    theme = _ref5.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",
@@ -45879,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,
@@ -45911,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,
@@ -45926,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",