@thecb/components 11.9.0 → 11.10.0-beta.1

package/dist/index.cjs.js

@@ -15822,7 +15822,7 @@ var GenericCardLarge = function GenericCardLarge() {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     role: "img",
-    "aria-label": "Card Payment"
+    "aria-label": "Credit card"
   }, /*#__PURE__*/React__default.createElement("rect", {
     width: "36",
     height: "24",
@@ -18700,7 +18700,9 @@ var VisaSmallIcon = function VisaSmallIcon() {
     height: "16",
     viewBox: "0 0 24 16",
     fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
+    xmlns: "http://www.w3.org/2000/svg",
+    role: "img",
+    "aria-label": "Visa"
   }, /*#__PURE__*/React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -18727,7 +18729,9 @@ var AmExSmallIcon = function AmExSmallIcon() {
     height: "16",
     viewBox: "0 0 24 16",
     fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
+    xmlns: "http://www.w3.org/2000/svg",
+    role: "img",
+    "aria-label": "American Express"
   }, /*#__PURE__*/React__default.createElement("g", {
     clipPath: "url(#clip0_3693_1095)"
   }, /*#__PURE__*/React__default.createElement("g", {
@@ -18826,7 +18830,9 @@ var DiscoverSmallIcon = function DiscoverSmallIcon() {
     height: "16",
     viewBox: "0 0 24 16",
     fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
+    xmlns: "http://www.w3.org/2000/svg",
+    role: "img",
+    "aria-label": "Discover"
   }, /*#__PURE__*/React__default.createElement("g", {
     clipPath: "url(#clip0_3818_267)"
   }, /*#__PURE__*/React__default.createElement("path", {
@@ -18951,7 +18957,9 @@ var GenericSmallIcon = function GenericSmallIcon() {
     height: "16",
     viewBox: "0 0 24 16",
     fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
+    xmlns: "http://www.w3.org/2000/svg",
+    role: "img",
+    "aria-label": "Credit card"
   }, /*#__PURE__*/React__default.createElement("rect", {
     width: "24",
     height: "16",
@@ -18972,7 +18980,9 @@ var MasterCardSmallIcon = function MasterCardSmallIcon() {
     height: "16",
     viewBox: "0 0 24 16",
     fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
+    xmlns: "http://www.w3.org/2000/svg",
+    role: "img",
+    "aria-label": "Mastercard"
   }, /*#__PURE__*/React__default.createElement("rect", {
     width: "24",
     height: "16",
@@ -26365,11 +26375,18 @@ var cardBrands = {
     large: GenericCardLarge
   }
 };
+var normalizeType = function normalizeType(type) {
+  if (!type) return undefined;
+  var lower = type.toLowerCase();
+  if (lower === "mastercard") return "master_card";
+  return lower;
+};
 var CardType = function CardType(_ref) {
   var type = _ref.type,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? "small" : _ref$size;
-  var _ref2 = cardBrands[type] || cardBrands["default"],
+  var normalizedType = normalizeType(type);
+  var _ref2 = cardBrands[normalizedType] || cardBrands["default"],
     label = _ref2.label,
     IconComponent = _ref2[size];
   return /*#__PURE__*/React__default.createElement("span", {
@@ -26449,7 +26466,7 @@ var CreditCardWrapper = styled__default.div.withConfig({
 var CCIconWrapper = styled__default.div.withConfig({
   displayName: "FormattedCreditCard__CCIconWrapper",
   componentId: "sc-s0ta5l-1"
-})(["margin-right:16px;width:30px;height:auto;display:flex;"]);
+})(["margin-right:16px;width:36px;height:auto;display:flex;"]);
 var FormattedCreditCard = function FormattedCreditCard(_ref) {
   var lastFour = _ref.lastFour,
     type = _ref.type,
@@ -26458,14 +26475,15 @@ var FormattedCreditCard = function FormattedCreditCard(_ref) {
     expirationStatus = _ref.expirationStatus,
     themeValues = _ref.themeValues;
   return /*#__PURE__*/React__default.createElement(CreditCardWrapper, null, /*#__PURE__*/React__default.createElement(CCIconWrapper, null, /*#__PURE__*/React__default.createElement(CardType, {
-    type: type
+    type: type,
+    size: "large"
   })), /*#__PURE__*/React__default.createElement(Stack, {
     childGap: "0"
   }, /*#__PURE__*/React__default.createElement(Box, {
     padding: "0"
   }, /*#__PURE__*/React__default.createElement(Text$1, {
     variant: "p",
-    padding: "0 0 0 8px",
+    padding: "0",
     color: themeValues.textColor,
     textAlign: "left",
     extraStyles: "display: inline-block;"
@@ -48914,10 +48932,10 @@ var InnerRadioSection = function InnerRadioSection(_ref) {
     componentId: "sc-1wtp6qc-0"
   })(["height:", ";width:", ";", " transition:opacity 0.3s ease;"], function (_ref2) {
     var isMobile = _ref2.isMobile;
-    return isMobile ? "14px" : "18px";
+    return isMobile ? "16px" : "24px";
   }, function (_ref3) {
     var isMobile = _ref3.isMobile;
-    return isMobile ? "22px" : "28px";
+    return isMobile ? "24px" : "36px";
   }, function (_ref4) {
     var fade = _ref4.fade;
     return fade && "opacity: 0.4;";