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

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,
@@ -26457,15 +26474,18 @@ var FormattedCreditCard = function FormattedCreditCard(_ref) {
     expireDate = _ref.expireDate,
     expirationStatus = _ref.expirationStatus,
     themeValues = _ref.themeValues;
+  var _useContext = React.useContext(styled.ThemeContext),
+    isMobile = _useContext.isMobile;
   return /*#__PURE__*/React__default.createElement(CreditCardWrapper, null, /*#__PURE__*/React__default.createElement(CCIconWrapper, null, /*#__PURE__*/React__default.createElement(CardType, {
-    type: type
+    type: type,
+    size: isMobile ? "small" : "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 +48934,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;";
@@ -51604,163 +51624,8 @@ var Tooltip = function Tooltip(_ref) {
   })));
 };
 
-var TOOLTIP_V2_THEME_SOURCE = "Popover";
-var hoverColor$6 = SAPPHIRE_BLUE;
-var activeColor$b = PEACOCK_BLUE;
-var tooltipTriggerColor = MATISSE_BLUE;
-var borderColor$7 = "rgba(255, 255, 255, 0.85)";
-var fallbackValues$13 = {
-  hoverColor: hoverColor$6,
-  activeColor: activeColor$b,
-  tooltipTriggerColor: tooltipTriggerColor,
-  borderColor: borderColor$7
-};
-
-var TooltipV2 = function TooltipV2(_ref) {
-  var children = _ref.children,
-    _ref$content = _ref.content,
-    content = _ref$content === void 0 ? "" : _ref$content,
-    tooltipID = _ref.tooltipID,
-    _ref$triggerText = _ref.triggerText,
-    triggerText = _ref$triggerText === void 0 ? "" : _ref$triggerText,
-    _ref$contentPosition = _ref.contentPosition,
-    contentPosition = _ref$contentPosition === void 0 ? {
-      top: "-110px",
-      right: "auto",
-      bottom: "auto",
-      left: "-225px"
-    } : _ref$contentPosition,
-    _ref$arrowDirection = _ref.arrowDirection,
-    arrowDirection = _ref$arrowDirection === void 0 ? "down" : _ref$arrowDirection,
-    _ref$arrowPosition = _ref.arrowPosition,
-    arrowPosition = _ref$arrowPosition === void 0 ? {
-      arrowTop: "auto",
-      arrowRight: "10px",
-      arrowBottom: "-8px",
-      arrowLeft: "auto"
-    } : _ref$arrowPosition,
-    _ref$minWidth = _ref.minWidth,
-    minWidth = _ref$minWidth === void 0 ? "250px" : _ref$minWidth,
-    _ref$maxWidth = _ref.maxWidth,
-    maxWidth = _ref$maxWidth === void 0 ? "100%" : _ref$maxWidth,
-    _ref$height = _ref.height,
-    height = _ref$height === void 0 ? "auto" : _ref$height,
-    _ref$containerExtraSt = _ref.containerExtraStyles,
-    containerExtraStyles = _ref$containerExtraSt === void 0 ? "" : _ref$containerExtraSt,
-    _ref$contentExtraStyl = _ref.contentExtraStyles,
-    contentExtraStyles = _ref$contentExtraStyl === void 0 ? "" : _ref$contentExtraStyl,
-    _ref$contentBackgroun = _ref.contentBackgroundColor,
-    contentBackgroundColor = _ref$contentBackgroun === void 0 ? WHITE : _ref$contentBackgroun,
-    _ref$triggerVariant = _ref.triggerVariant,
-    triggerVariant = _ref$triggerVariant === void 0 ? "smallGhost" : _ref$triggerVariant;
-  var closeTimeoutRef = React.useRef(null);
-  var _useState = React.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    tooltipOpen = _useState2[0],
-    setTooltipOpen = _useState2[1];
-  var themeContext = React.useContext(styled.ThemeContext);
-  var themeValues = createThemeValues(themeContext, fallbackValues$13, TOOLTIP_V2_THEME_SOURCE);
-  var arrowColor = themeValues.borderColor,
-    tooltipTriggerColor = themeValues.tooltipTriggerColor,
-    hoverColor = themeValues.hoverColor,
-    activeColor = themeValues.activeColor;
-  var top = contentPosition.top,
-    right = contentPosition.right,
-    bottom = contentPosition.bottom,
-    left = contentPosition.left;
-  var arrowTop = arrowPosition.arrowTop,
-    arrowRight = arrowPosition.arrowRight,
-    arrowBottom = arrowPosition.arrowBottom,
-    arrowLeft = arrowPosition.arrowLeft;
-  var handleToggleTooltip = function handleToggleTooltip(desiredState) {
-    if (tooltipOpen !== desiredState) {
-      setTooltipOpen(desiredState);
-    }
-  };
-  var handleKeyDown = function handleKeyDown(e) {
-    if (e.key === "Escape") {
-      handleToggleTooltip(false);
-    }
-  };
-  var handleMouseEnter = function handleMouseEnter() {
-    if (closeTimeoutRef.current) {
-      clearTimeout(closeTimeoutRef.current);
-      closeTimeoutRef.current = null;
-    }
-    handleToggleTooltip(true);
-  };
-  var handleMouseLeave = function handleMouseLeave() {
-    closeTimeoutRef.current = setTimeout(function () {
-      handleToggleTooltip(false);
-    }, 300);
-  };
-  React.useEffect(function () {
-    return function () {
-      if (closeTimeoutRef.current) {
-        clearTimeout(closeTimeoutRef.current);
-      }
-    };
-  }, []);
-  var renderTrigger = function renderTrigger() {
-    if (children) {
-      return /*#__PURE__*/React__default.cloneElement(React__default.Children.only(children), {
-        "aria-describedby": tooltipID,
-        onFocus: function onFocus() {
-          return handleToggleTooltip(true);
-        },
-        onBlur: function onBlur() {
-          return handleToggleTooltip(false);
-        },
-        onKeyDown: handleKeyDown
-      });
-    }
-    return /*#__PURE__*/React__default.createElement(ButtonWithAction, {
-      action: function action() {
-        return noop$1;
-      },
-      "aria-describedby": tooltipID,
-      onKeyDown: handleKeyDown,
-      variant: triggerVariant,
-      onFocus: function onFocus() {
-        return handleToggleTooltip(true);
-      },
-      onBlur: function onBlur() {
-        return handleToggleTooltip(false);
-      },
-      onTouchStart: function onTouchStart() {
-        return handleToggleTooltip(true);
-      },
-      "data-qa": "tooltip-v2-trigger",
-      text: triggerText,
-      extraStyles: "\n          color: ".concat(tooltipTriggerColor, ";\n          &:hover { color: ").concat(hoverColor, "; text-decoration: none;}\n          &:active, &:focus { color: ").concat(activeColor, "; text-decoration: none;}\n          button, span, &:hover span { text-decoration: none; }\n        ")
-    });
-  };
-  return /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0",
-    extraStyles: "position: relative; ".concat(containerExtraStyles),
-    onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave,
-    "data-qa": "tooltip-v2-container"
-  }, renderTrigger(), /*#__PURE__*/React__default.createElement(Box, {
-    role: "tooltip",
-    id: tooltipID,
-    "aria-hidden": !tooltipOpen,
-    background: contentBackgroundColor,
-    "data-qa": "tooltip-v2-contents",
-    extraStyles: "\n          position: absolute;\n          display: ".concat(tooltipOpen ? "block" : "none", ";\n          top: ").concat(top, ";\n          right: ").concat(right, ";\n          bottom: ").concat(bottom, ";\n          left: ").concat(left, ";\n          height: ").concat(height, ";\n          ").concat(contentExtraStyles, "\n        "),
-    boxShadow: "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)",
-    border: "1px solid transparent",
-    borderRadius: "4px",
-    minWidth: minWidth,
-    maxWidth: maxWidth
-  }, typeof content === "string" ? /*#__PURE__*/React__default.createElement(Text$1, null, content) : content, /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0",
-    extraStyles: "\n            position: absolute;\n            content: \"\";\n            width: 0;\n            height: 0;\n            ".concat(arrowBorder(arrowColor, arrowDirection, "8px"), ";\n            filter: drop-shadow(2px 8px 14px black);\n            bottom: ").concat(arrowBottom, ";\n            right: ").concat(arrowRight, ";\n            top: ").concat(arrowTop, ";\n            left: ").concat(arrowLeft, ";\n          ")
-  })));
-};
-
 var pageBackground = "#FBFCFD";
-var fallbackValues$14 = {
+var fallbackValues$13 = {
   pageBackground: pageBackground
 };
 
@@ -51808,7 +51673,7 @@ var CenterSingle = function CenterSingle(_ref) {
     padding: "0"
   })));
 };
-var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$14));
+var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$13));
 
 var CenterStack = function CenterStack(_ref) {
   var header = _ref.header,
@@ -51851,7 +51716,7 @@ var CenterStack = function CenterStack(_ref) {
     padding: "0"
   })));
 };
-var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$14));
+var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$13));
 
 var CenterSingle$2 = function CenterSingle(_ref) {
   var header = _ref.header,
@@ -51897,7 +51762,7 @@ var CenterSingle$2 = function CenterSingle(_ref) {
     padding: "0"
   })));
 };
-var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$14));
+var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$13));
 
 var SidebarSingleContent = function SidebarSingleContent(_ref) {
   var header = _ref.header,
@@ -51950,7 +51815,7 @@ var SidebarSingleContent = function SidebarSingleContent(_ref) {
     padding: "0"
   })));
 };
-var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$14));
+var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$13));
 
 var SidebarStackContent = function SidebarStackContent(_ref) {
   var header = _ref.header,
@@ -52019,7 +51884,7 @@ var SidebarStackContent = function SidebarStackContent(_ref) {
     key: "footer-box"
   })));
 };
-var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$14));
+var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$13));
 
 var useFocusInvalidInput = function useFocusInvalidInput(hasErrors) {
   var resetHasErrors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {};
@@ -52319,7 +52184,6 @@ exports.Title = Title$1;
 exports.ToastNotification = ToastNotification;
 exports.ToggleSwitch = ToggleSwitch$1;
 exports.Tooltip = Tooltip;
-exports.TooltipV2 = TooltipV2;
 exports.TrashIcon = TrashIcon$1;
 exports.TrashIconV2 = TrashIconV2$1;
 exports.TurnstileWidget = TurnstileWidget;