@thecb/components 12.0.4-beta.0 → 12.0.5-beta.0

package/dist/index.esm.js

@@ -14066,8 +14066,12 @@ var PaymentMethodIcon = function PaymentMethodIcon(_ref) {
 };
 var PaymentMethodIcon$1 = themeComponent(PaymentMethodIcon, "Icons", fallbackValues$2, "info");
 
+// When ariaHidden is true, aria-hidden="true" is added to the SVG, which tells
+// screen readers to skip this element. Use this when the icon is purely decorative
+// and adjacent text already conveys its meaning (e.g. an icon inside a labeled nav link).
 var AccountsIconSmall = function AccountsIconSmall(_ref) {
-  var themeValues = _ref.themeValues;
+  var themeValues = _ref.themeValues,
+    ariaHidden = _ref.ariaHidden;
   return /*#__PURE__*/React__default.createElement("svg", {
     width: "22px",
     height: "22px",
@@ -14078,7 +14082,8 @@ var AccountsIconSmall = function AccountsIconSmall(_ref) {
     style: {
       display: "inline-block",
       verticalAlign: "text-bottom"
-    }
+    },
+    "aria-hidden": ariaHidden ? "true" : undefined
   }, /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("rect", {
     id: "path-1-accountssmall",
     x: "0",
@@ -14245,8 +14250,12 @@ var ProfileIconSmall = function ProfileIconSmall(_ref) {
 };
 var ProfileIconSmall$1 = themeComponent(ProfileIconSmall, "Icons", fallbackValues$2, "primary");
 
+// When ariaHidden is true, aria-hidden="true" is added to the SVG, which tells
+// screen readers to skip this element. Use this when the icon is purely decorative
+// and adjacent text already conveys its meaning (e.g. an icon inside a labeled nav link).
 var SettingsIconSmall = function SettingsIconSmall(_ref) {
-  var themeValues = _ref.themeValues;
+  var themeValues = _ref.themeValues,
+    ariaHidden = _ref.ariaHidden;
   return /*#__PURE__*/React__default.createElement("svg", {
     width: "22px",
     height: "22px",
@@ -14257,7 +14266,8 @@ var SettingsIconSmall = function SettingsIconSmall(_ref) {
     style: {
       display: "inline-block",
       verticalAlign: "text-bottom"
-    }
+    },
+    "aria-hidden": ariaHidden ? "true" : undefined
   }, /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("rect", {
     id: "path-1-paymentssmall",
     x: "0",
@@ -14295,17 +14305,22 @@ var SettingsIconSmall = function SettingsIconSmall(_ref) {
 };
 var SettingsIconSmall$1 = themeComponent(SettingsIconSmall, "Icons", fallbackValues$2, "primary");
 
+// When ariaHidden is true, aria-hidden="true" is added to the SVG, which tells
+// screen readers to skip this element. Use this when the icon is purely decorative
+// and adjacent text already conveys its meaning (e.g. an icon inside a labeled nav link).
 var WalletIconSmall = function WalletIconSmall(_ref) {
   var themeValues = _ref.themeValues,
     _ref$iconIndex = _ref.iconIndex,
     iconIndex = _ref$iconIndex === void 0 ? 0 : _ref$iconIndex,
-    colorOverride = _ref.colorOverride;
+    colorOverride = _ref.colorOverride,
+    ariaHidden = _ref.ariaHidden;
   return /*#__PURE__*/React__default.createElement("svg", {
     width: "20",
     height: "20",
     viewBox: "0 0 20 20",
     fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": ariaHidden ? "true" : undefined
   }, /*#__PURE__*/React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -14445,8 +14460,12 @@ var PropertiesAddIcon = function PropertiesAddIcon(_ref) {
 };
 var PropertiesAddIcon$1 = themeComponent(PropertiesAddIcon, "Icons", fallbackValues$2, "info");
 
+// When ariaHidden is true, aria-hidden="true" is added to the SVG, which tells
+// screen readers to skip this element. Use this when the icon is purely decorative
+// and adjacent text already conveys its meaning (e.g. an icon inside a labeled nav link).
 var PropertiesIconSmall = function PropertiesIconSmall(_ref) {
-  var themeValues = _ref.themeValues;
+  var themeValues = _ref.themeValues,
+    ariaHidden = _ref.ariaHidden;
   return /*#__PURE__*/React__default.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "22px",
@@ -14457,7 +14476,8 @@ var PropertiesIconSmall = function PropertiesIconSmall(_ref) {
     style: {
       display: "inline-block",
       verticalAlign: "text-bottom"
-    }
+    },
+    "aria-hidden": ariaHidden ? "true" : undefined
   }, /*#__PURE__*/React__default.createElement("g", {
     fill: "none",
     fillRule: "evenodd",
@@ -17223,17 +17243,22 @@ var CashieringImage = function CashieringImage() {
   })));
 };
 
+// When ariaHidden is true, aria-hidden="true" is added to the SVG, which tells
+// screen readers to skip this element. Use this when the icon is purely decorative
+// and adjacent text already conveys its meaning (e.g. an icon inside a labeled nav link).
 var FindIconSmall = function FindIconSmall(_ref) {
   var themeValues = _ref.themeValues,
     _ref$iconIndex = _ref.iconIndex,
-    iconIndex = _ref$iconIndex === void 0 ? 0 : _ref$iconIndex;
+    iconIndex = _ref$iconIndex === void 0 ? 0 : _ref$iconIndex,
+    ariaHidden = _ref.ariaHidden;
   var maskId = "find-icon-mask-".concat(iconIndex);
   return /*#__PURE__*/React__default.createElement("svg", {
     width: "20",
     height: "20",
     viewBox: "0 0 20 20",
     fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": ariaHidden ? "true" : undefined
   }, /*#__PURE__*/React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -17264,14 +17289,19 @@ var FindIconSmall = function FindIconSmall(_ref) {
 };
 var FindIconSmall$1 = themeComponent(FindIconSmall, "Icons", fallbackValues$2, "primary");
 
+// When ariaHidden is true, aria-hidden="true" is added to the SVG, which tells
+// screen readers to skip this element. Use this when the icon is purely decorative
+// and adjacent text already conveys its meaning (e.g. an icon inside a labeled nav link).
 var HistoryIconSmall = function HistoryIconSmall(_ref) {
-  var themeValues = _ref.themeValues;
+  var themeValues = _ref.themeValues,
+    ariaHidden = _ref.ariaHidden;
   return /*#__PURE__*/React__default.createElement("svg", {
     width: "20",
     height: "20",
     viewBox: "0 0 20 20",
     fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": ariaHidden ? "true" : undefined
   }, /*#__PURE__*/React__default.createElement("path", {
     d: "M3.33337 8.33333C3.33337 7.8731 3.70647 7.5 4.16671 7.5H15.8334C16.2936 7.5 16.6667 7.8731 16.6667 8.33333V16.6667C16.6667 17.1269 16.2936 17.5 15.8334 17.5H4.16671C3.70647 17.5 3.33337 17.1269 3.33337 16.6667V8.33333Z",
     fill: themeValues.singleIconColor
@@ -45839,37 +45869,34 @@ var fallbackValues$L = {
   textColor: textColor$5
 };
 
-var StyledAnchor = styled("a").withConfig({
-  displayName: "LinkCardstyled__StyledAnchor",
-  componentId: "sc-l5q1h2-0"
-})(["", ""], 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 getCardBaseStyles = function getCardBaseStyles(theme, disabled, extraStyles) {
+  return "\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  font-size: inherit;\n  color: inherit;\n  font-weight: inherit;\n  line-height: inherit;\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(disabled ? "pointer-events: none;" : "", "\n  ").concat(extraStyles || "", "\n");
+};
+var getCardHoverActiveStyles = function getCardHoverActiveStyles(theme, disabled, hoverStyles, activeStyles) {
+  if (disabled) {
+    return "\n      &:hover,\n      &:active {\n        cursor: default;\n        box-shadow: none;\n        border: 1px solid ".concat(theme.disabledBorderColor, ";\n      }\n    ");
+  }
+  return "\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  ");
+};
 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:", ";color:", ";"], FONT_WEIGHT_SEMIBOLD, function (_ref2) {
-  var disabled = _ref2.$disabled,
-    theme = _ref2.$theme;
+  componentId: "sc-l5q1h2-0"
+})(["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 (_ref) {
+  var disabled = _ref.$disabled,
+    theme = _ref.$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:", ";color:", ";"], FONT_WEIGHT_REGULAR, function (_ref3) {
-  var disabled = _ref3.$disabled,
-    theme = _ref3.$theme;
+  componentId: "sc-l5q1h2-1"
+})(["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 (_ref2) {
+  var disabled = _ref2.$disabled,
+    theme = _ref2.$theme;
   return disabled ? theme.disabledColor : theme.textColor;
 });
 var Footer = styled(Stack).withConfig({
   displayName: "LinkCardstyled__Footer",
-  componentId: "sc-l5q1h2-3"
+  componentId: "sc-l5q1h2-2"
 })(["align-items:center;width:100%;"]);
 
 var LinkCard = function LinkCard(_ref) {
@@ -45900,21 +45927,9 @@ var LinkCard = function LinkCard(_ref) {
     isExternalLink = _ref$isExternalLink === void 0 ? false : _ref$isExternalLink;
   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(StyledAnchor, {
-    key: "link-card-".concat(locatorSlug),
-    href: disabled ? undefined : href,
-    rel: isExternalLink ? "noopener noreferrer" : undefined,
-    target: isExternalLink ? "_blank" : undefined,
-    tabIndex: disabled ? -1 : 0,
-    "aria-disabled": disabled,
-    $disabled: disabled,
-    "aria-label": "".concat(title, ", ").concat(subtitle),
-    "data-qa": "link-card-".concat(locatorSlug),
-    $theme: themeValues,
-    $extraStyles: disabled ? "pointer-events: none; ".concat(extraStyles) : extraStyles,
-    $hoverStyles: extraHoverStyles,
-    $activeStyles: extraActiveStyles
-  }, /*#__PURE__*/React__default.createElement(Stack, {
+  var baseStyles = getCardBaseStyles(themeValues, disabled, extraStyles);
+  var hoverActiveStyles = getCardHoverActiveStyles(themeValues, disabled, extraHoverStyles, extraActiveStyles);
+  var cardContent = /*#__PURE__*/React__default.createElement(Stack, {
     childGap: 0,
     bottomItem: 3,
     justify: "space-between",
@@ -45956,7 +45971,30 @@ var LinkCard = function LinkCard(_ref) {
     justify: "space-between"
   }, showLeft && !!leftContent ? leftContent : /*#__PURE__*/React__default.createElement(Box, {
     extraStyles: "margin-right: auto;"
-  }), showRight && !!rightContent && rightContent))));
+  }), showRight && !!rightContent && rightContent)));
+  if (isExternalLink) {
+    return /*#__PURE__*/React__default.createElement(ExternalLink, {
+      key: "link-card-".concat(locatorSlug),
+      href: disabled ? undefined : href,
+      newTab: true,
+      isUnderlined: false,
+      tabIndex: disabled ? "-1" : "0",
+      ariaLabel: "".concat(title, ", ").concat(subtitle),
+      dataQa: "link-card-".concat(locatorSlug),
+      extraStyles: "".concat(baseStyles, " ").concat(hoverActiveStyles)
+    }, cardContent);
+  }
+  return /*#__PURE__*/React__default.createElement(InternalLink, {
+    key: "link-card-".concat(locatorSlug),
+    to: disabled ? undefined : href,
+    isUnderlined: false,
+    hoverUnderline: false,
+    tabIndex: disabled ? "-1" : "0",
+    "aria-label": "".concat(title, ", ").concat(subtitle),
+    "aria-disabled": disabled,
+    "data-qa": "link-card-".concat(locatorSlug),
+    extraStyles: "".concat(baseStyles, " ").concat(hoverActiveStyles)
+  }, cardContent);
 };
 var LinkCard$1 = themeComponent(LinkCard, "LinkCard", fallbackValues$L, "primary");
 
@@ -46118,7 +46156,7 @@ var NavMenuMobile = function NavMenuMobile(_ref3) {
     width: "100%",
     maxWidth: "400px",
     padding: "1rem 0.5rem",
-    extraStyles: "position: relative; max-width: 400px; height: calc(100vh - 72px);",
+    extraStyles: "position: relative; max-width: 400px; height: calc(100vh - 72px); overflow-y: auto;",
     background: themeValues.backgroundColor
   }, menuContent));
 };