@thecb/components 11.11.1-beta.2 → 12.0.0-beta.1

package/dist/index.cjs.js

@@ -40923,9 +40923,7 @@ var EditableList = function EditableList(_ref) {
     _ref$editItemAriaRole = _ref.editItemAriaRole,
     editItemAriaRole = _ref$editItemAriaRole === void 0 ? "" : _ref$editItemAriaRole,
     _ref$disablePlacehold = _ref.disablePlaceholder,
-    disablePlaceholder = _ref$disablePlacehold === void 0 ? false : _ref$disablePlacehold,
-    _ref$getEditHref = _ref.getEditHref,
-    getEditHref = _ref$getEditHref === void 0 ? null : _ref$getEditHref;
+    disablePlaceholder = _ref$disablePlacehold === void 0 ? false : _ref$disablePlacehold;
   var addText = "Add a".concat(itemName[0].match(/[aieouAIEOU]/) ? "n" : "", " ").concat(itemName);
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: listPadding,
@@ -40992,12 +40990,7 @@ var EditableList = function EditableList(_ref) {
       extraStyles: ":not(:first-child) { border-left: 2px solid ".concat(BOSTON_BLUE, ";}"),
       dataQa: qaPrefix + " Edit",
       key: "Edit ".concat(item.id)
-    }, getEditHref ? /*#__PURE__*/React__default.createElement(InternalLink, {
-      to: getEditHref(item),
-      fontWeight: "400",
-      extraStyles: "margin: 0.5rem; min-width: 0;",
-      "aria-label": "Edit ".concat(ariaLabel || itemName)
-    }, "Edit") : /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+    }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
       variant: "smallGhost",
       text: "Edit",
       action: function action() {
@@ -45821,8 +45814,9 @@ var disabledBorderColor$1 = GHOST_GREY;
 var disabledColor$2 = MANATEE_GREY;
 var activeBackgroundColor$1 = CORNFLOWER_BLUE;
 var backgroundColor$a = LINK_WATER;
-var borderColor$5 = MOON_RAKER;
+var borderColor$5 = MANATEE_GREY;
 var color$c = ROYAL_BLUE_VIVID;
+var textColor$5 = BRIGHT_GREY;
 var fallbackValues$L = {
   disabledBackgroundColor: disabledBackgroundColor$1,
   disabledBorderColor: disabledBorderColor$1,
@@ -45830,36 +45824,37 @@ var fallbackValues$L = {
   activeBackgroundColor: activeBackgroundColor$1,
   backgroundColor: backgroundColor$a,
   borderColor: borderColor$5,
-  color: color$c
+  color: color$c,
+  textColor: textColor$5
 };
 
 var Container = styled__default(Box).withConfig({
   displayName: "LinkCardstyled__Container",
   componentId: "sc-l5q1h2-0"
-})(["display:flex;flex-direction:column;align-items:flex-start;width:100%;gap:40px;flex-shrink:0;align-self:stretch;border-radius:8px;", " 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  ");
+})(["display:flex;flex-direction:column;align-items:flex-start;width:100%;gap:40px;flex-shrink:0;align-self:stretch;border-radius:8px;padding:", ";", " text-decoration:none;transition:all 0.2s ease-in-out;", ""], SPACING.MD, function (_ref) {
+  var disabled = _ref.disabled,
+    themeValues = _ref.themeValues;
+  return "\n    background-color: ".concat(disabled ? themeValues.disabledBackgroundColor : themeValues.backgroundColor, ";\n    border: 1px solid ").concat(disabled ? themeValues.disabledBorderColor : themeValues.borderColor, ";\n  ");
 }, function (_ref2) {
-  var isDisabled = _ref2.isDisabled,
-    theme = _ref2.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      ");
+  var disabled = _ref2.disabled,
+    themeValues = _ref2.themeValues;
+  return disabled ? "\n        &:hover,\n        &:active {\n          cursor: default;\n          box-shadow: none;\n          border: 1px solid ".concat(themeValues.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(themeValues.borderColor, ";\n        }\n\n        &:active {\n          background-color: ").concat(themeValues.activeBackgroundColor, ";\n          border: ").concat(BORDER_THIN, " solid ").concat(themeValues.borderColor, ";\n        }\n      ");
 });
 var Title$2 = styled__default(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 (_ref3) {
-  var isDisabled = _ref3.isDisabled,
-    theme = _ref3.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:", ";line-height:150%;background-color:transparent;font-weight:", ";", ";"], FONT_SIZE.MD, FONT_WEIGHT_SEMIBOLD, function (_ref3) {
+  var disabled = _ref3.disabled,
+    themeValues = _ref3.themeValues;
+  return "color: ".concat(disabled ? themeValues.disabledColor : themeValues.color, ";");
 });
 var Subtitle = styled__default(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_SEMIBOLD, function (_ref4) {
-  var isDisabled = _ref4.isDisabled,
-    theme = _ref4.theme;
-  return "color: ".concat(isDisabled ? theme.disabledColor : theme.color, ";");
+})(["overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;align-self:stretch;font-size:", ";line-height:150%;letter-spacing:0.14px;font-weight:", ";", ";"], FONT_SIZE.SM, FONT_WEIGHT_REGULAR, function (_ref4) {
+  var disabled = _ref4.disabled,
+    themeValues = _ref4.themeValues;
+  return "color: ".concat(disabled ? themeValues.disabledColor : themeValues.textColor, ";");
 });
 var Footer = styled__default(Stack).withConfig({
   displayName: "LinkCardstyled__Footer",
@@ -45878,7 +45873,6 @@ var LinkCard = function LinkCard(_ref) {
     leftContent = _ref.leftContent,
     showRight = _ref.showRight,
     rightContent = _ref.rightContent,
-    onClick = _ref.onClick,
     _ref$extraStyles = _ref.extraStyles,
     extraStyles = _ref$extraStyles === void 0 ? "" : _ref$extraStyles,
     _ref$extraHoverStyles = _ref.extraHoverStyles,
@@ -45888,31 +45882,34 @@ var LinkCard = function LinkCard(_ref) {
     themeValues = _ref.themeValues,
     _ref$titleVariant = _ref.titleVariant,
     titleVariant = _ref$titleVariant === void 0 ? "h3" : _ref$titleVariant,
-    _ref$titlePadding = _ref.titlePadding,
     _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,
+    _ref$href = _ref.href,
+    href = _ref$href === void 0 ? "" : _ref$href;
   var _useContext = React.useContext(styled.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(Container, {
+    as: "a",
+    role: "link",
+    href: disabled ? undefined : href,
+    tabIndex: disabled ? -1 : 0,
     borderRadius: "8px",
     dataQa: "link-card-".concat(locatorSlug),
     width: "100%",
     maxWidth: isMobile ? "100%" : "288px",
     minWidth: isMobile ? "240px" : "288px",
     minHeight: "141px",
-    padding: "24px",
-    theme: themeValues,
+    padding: SPACING.MD,
+    themeValues: themeValues,
     extraStyles: extraStyles,
     hoverStyles: extraHoverStyles,
     activeStyles: extraActiveStyles,
-    onClick: disabled ? noop$1 : onClick,
     "aria-disabled": disabled,
-    isDisabled: disabled,
-    role: "group",
+    disabled: disabled,
     "aria-label": "".concat(title, ", ").concat(subtitle)
   }, /*#__PURE__*/React__default.createElement(Stack, {
     childGap: 0,
@@ -45928,9 +45925,9 @@ var LinkCard = function LinkCard(_ref) {
     extraStyles: "align-items: center;"
   }, /*#__PURE__*/React__default.createElement(Title$2, {
     variant: titleVariant,
-    theme: themeValues,
+    themeValues: themeValues,
     margin: 0,
-    isDisabled: disabled
+    disabled: disabled
   }, title), isExternalLink && /*#__PURE__*/React__default.createElement(ExternalLinkIcon, {
     linkColor: themeValues.color,
     text: locatorSlug,
@@ -45943,8 +45940,8 @@ var LinkCard = function LinkCard(_ref) {
     width: "100%"
   }, /*#__PURE__*/React__default.createElement(Subtitle, {
     variant: "pS",
-    theme: themeValues,
-    isDisabled: disabled
+    themeValues: themeValues,
+    disabled: disabled
   }, subtitle)), /*#__PURE__*/React__default.createElement(Box, {
     background: "transparent",
     borderWidthOverride: "0 0 0 0",
@@ -51482,12 +51479,12 @@ var TurnstileWidget = /*#__PURE__*/React.forwardRef(function (_ref4, ref) {
 var hoverColor$6 = ROYAL_BLUE;
 var activeColor$b = CONGRESS_BLUE;
 var linkColor$6 = ROYAL_BLUE_VIVID;
-var textColor$5 = CHARADE_GREY;
+var textColor$6 = CHARADE_GREY;
 var fallbackValues$12 = {
   linkColor: linkColor$6,
   hoverColor: hoverColor$6,
   activeColor: activeColor$b,
-  textColor: textColor$5
+  textColor: textColor$6
 };
 
 var TOOLTIP_THEME_SOURCE = "Popover";