@thecb/components 8.4.0-beta.13 → 8.4.0-beta.15

package/dist/index.esm.js

@@ -17669,13 +17669,16 @@ var ArrowRightCircleIconSmall = function ArrowRightCircleIconSmall(_ref) {
 
 var ArrowRightIcon = function ArrowRightIcon(_ref) {
   var _ref$color = _ref.color,
-      color = _ref$color === void 0 ? ROYAL_BLUE_VIVID : _ref$color;
+      color = _ref$color === void 0 ? ROYAL_BLUE_VIVID : _ref$color,
+      _ref$describedBy = _ref.describedBy,
+      describedBy = _ref$describedBy === void 0 ? "" : _ref$describedBy;
   return /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "20",
     height: "20",
     viewBox: "0 0 20 20",
-    fill: "none"
+    fill: "none",
+    "aria-describedby": describedBy
   }, /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -18097,13 +18100,16 @@ var ChargebackReversalIconMedium = function ChargebackReversalIconMedium(_ref) {
 
 var PlusCircleIcon = function PlusCircleIcon(_ref) {
   var _ref$color = _ref.color,
-      color = _ref$color === void 0 ? ROYAL_BLUE_VIVID : _ref$color;
+      color = _ref$color === void 0 ? ROYAL_BLUE_VIVID : _ref$color,
+      _ref$describedBy = _ref.describedBy,
+      describedBy = _ref$describedBy === void 0 ? "" : _ref$describedBy;
   return /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "20",
     height: "20",
     viewBox: "0 0 20 20",
-    fill: "none"
+    fill: "none",
+    "aria-describedby": describedBy
   }, /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -42842,8 +42848,7 @@ var fallbackValues$I = {
 };
 
 var LinkCard = function LinkCard(_ref) {
-  var _ref$variant = _ref.variant,
-      _ref$title = _ref.title,
+  var _ref$title = _ref.title,
       title = _ref$title === void 0 ? "Test Workflow" : _ref$title,
       _ref$subtitle = _ref.subtitle,
       subtitle = _ref$subtitle === void 0 ? "Link your benefit plan" : _ref$subtitle,
@@ -42859,6 +42864,10 @@ var LinkCard = function LinkCard(_ref) {
       extraHoverStyles = _ref$extraHoverStyles === void 0 ? "" : _ref$extraHoverStyles,
       _ref$extraActiveStyle = _ref.extraActiveStyles,
       extraActiveStyles = _ref$extraActiveStyle === void 0 ? "" : _ref$extraActiveStyle;
+
+  var _useContext = useContext(ThemeContext),
+      isMobile = _useContext.isMobile;
+
   var activeAndHoverStyles = "cursor: pointer;\n    border-radius: 8px;\n    border: 1px solid ".concat(themeValues.color, ";\n    box-shadow: 0px 0px 0px 0px rgba(41, 42, 51, 0.10), 0px 5px 11px 0px rgba(41, 42, 51, 0.10), 0px 4px 19px 0px rgba(41, 42, 51, 0.09), 0px 27px 26px 0px rgba(41, 42, 51, 0.05), 0px 56px 31px 0px rgba(41, 42, 51, 0.01), 0px 80px 33px 0px rgba(41, 42, 51, 0.00);");
   return /*#__PURE__*/React.createElement(Box, {
     border: "1px solid ".concat(MOON_RAKER, ";"),
@@ -42866,7 +42875,7 @@ var LinkCard = function LinkCard(_ref) {
     dataQa: "link-card-".concat(title),
     width: "100%",
     maxWidth: "288px",
-    minWidth: "240px",
+    minWidth: isMobile ? "240px" : "288px",
     minHeight: "141px",
     padding: "24px",
     extraStyles: "\n        display: flex;\n        flex-direction: column;\n        align-items: flex-start;\n        width: 100%;\n        gap: 40px;\n        flex-shrink: 0;\n        align-self: stretch;\n        ".concat(extraStyles, "\n      "),
@@ -42906,7 +42915,7 @@ var LinkCard = function LinkCard(_ref) {
     direction: "row",
     childGap: "6px",
     justify: "space-between",
-    extraStyles: "width: 100%; justify-content: space-between"
+    extraStyles: "width: 100%; align-items: flex-end;"
   }, showLeft && leftContent, showRight && rightContent))));
 };