@thecb/components 11.2.11 → 11.2.13-beta.0

package/dist/index.esm.js

@@ -13093,19 +13093,22 @@ var ErroredIcon = function ErroredIcon() {
   }))));
 };
 
+var _excluded$j = ["linkColor", "text", "ariaLabel"];
 var ExternalLinkIcon = function ExternalLinkIcon(_ref) {
-  var linkColor = _ref.linkColor,
+  var _ref$linkColor = _ref.linkColor,
+    linkColor = _ref$linkColor === void 0 ? MATISSE_BLUE : _ref$linkColor,
     text = _ref.text,
     _ref$ariaLabel = _ref.ariaLabel,
-    ariaLabel = _ref$ariaLabel === void 0 ? "External Link" : _ref$ariaLabel;
-  return /*#__PURE__*/React.createElement("svg", {
+    ariaLabel = _ref$ariaLabel === void 0 ? "External Link" : _ref$ariaLabel,
+    rest = _objectWithoutProperties(_ref, _excluded$j);
+  return /*#__PURE__*/React.createElement("svg", _extends({
     width: "14",
     height: "14",
     viewBox: "0 0 14 14",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     "aria-label": ariaLabel
-  }, /*#__PURE__*/React.createElement("path", {
+  }, rest), /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M1.86092 1.59483C1.92074 1.56953 1.98651 1.55554 2.05554 1.55554H2.6111H4.94443C5.22057 1.55554 5.44443 1.7794 5.44443 2.05554V2.6111C5.44443 2.88724 5.22057 3.1111 4.94443 3.1111H3.1111V10.8889H10.8889V9.05554C10.8889 8.7794 11.1127 8.55554 11.3889 8.55554H11.9444C12.2206 8.55554 12.4444 8.7794 12.4444 9.05554V11.9444C12.4444 12.2206 12.2206 12.4444 11.9444 12.4444H11.3889C11.3507 12.4444 11.3135 12.4401 11.2778 12.432C11.242 12.4401 11.2048 12.4444 11.1667 12.4444H2.6111H2.05554C1.7794 12.4444 1.55554 12.2206 1.55554 11.9444V11.3889V2.6111V2.05554C1.55554 2.05554 1.55554 2.05554 1.55554 2.05554C1.55554 2.01307 1.56084 1.97183 1.57081 1.93246C1.60944 1.77983 1.71826 1.65517 1.86092 1.59483ZM7.77776 2.05554C7.77776 1.7794 8.00162 1.55554 8.27776 1.55554H11.3889H11.9444C12.2206 1.55554 12.4444 1.7794 12.4444 2.05554V2.6111V5.72221C12.4444 5.99835 12.2206 6.22221 11.9444 6.22221H11.3889C11.1127 6.22221 10.8889 5.99835 10.8889 5.72221V4.26638L6.89793 8.25733C6.70267 8.45259 6.38608 8.45259 6.19082 8.25733L5.79798 7.8645C5.60272 7.66923 5.60272 7.35265 5.79798 7.15739L9.84428 3.1111H8.27776C8.00162 3.1111 7.77776 2.88724 7.77776 2.6111V2.05554Z",
@@ -13524,13 +13527,13 @@ var EmptyCartIcon = function EmptyCartIcon(_ref) {
 };
 var EmptyCartIcon$1 = themeComponent(EmptyCartIcon, "Icons", fallbackValues$2, "info");
 
-var _excluded$j = ["themeValues", "color", "height"];
+var _excluded$k = ["themeValues", "color", "height"];
 var EmptyCartIconV2 = function EmptyCartIconV2(_ref) {
   var themeValues = _ref.themeValues,
     color = _ref.color,
     _ref$height = _ref.height,
     height = _ref$height === void 0 ? "auto" : _ref$height,
-    rest = _objectWithoutProperties(_ref, _excluded$j);
+    rest = _objectWithoutProperties(_ref, _excluded$k);
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
     width: "126",
@@ -15249,7 +15252,7 @@ var KebabMenuIcon = function KebabMenuIcon() {
   }));
 };
 
-var _excluded$k = ["iconFill", "iconWidth", "iconHeight"];
+var _excluded$l = ["iconFill", "iconWidth", "iconHeight"];
 var MultiCartIcon = function MultiCartIcon(_ref) {
   var _ref$iconFill = _ref.iconFill,
     iconFill = _ref$iconFill === void 0 ? "#3B5BDB" : _ref$iconFill,
@@ -15257,7 +15260,7 @@ var MultiCartIcon = function MultiCartIcon(_ref) {
     iconWidth = _ref$iconWidth === void 0 ? "20" : _ref$iconWidth,
     _ref$iconHeight = _ref.iconHeight,
     iconHeight = _ref$iconHeight === void 0 ? "17" : _ref$iconHeight,
-    rest = _objectWithoutProperties(_ref, _excluded$k);
+    rest = _objectWithoutProperties(_ref, _excluded$l);
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
     width: iconWidth,
@@ -15271,7 +15274,7 @@ var MultiCartIcon = function MultiCartIcon(_ref) {
   }));
 };
 
-var _excluded$l = ["iconFill", "iconWidth", "iconHeight"];
+var _excluded$m = ["iconFill", "iconWidth", "iconHeight"];
 var CloseIcon = function CloseIcon(_ref) {
   var _ref$iconFill = _ref.iconFill,
     iconFill = _ref$iconFill === void 0 ? "#3B414D" : _ref$iconFill,
@@ -15279,7 +15282,7 @@ var CloseIcon = function CloseIcon(_ref) {
     iconWidth = _ref$iconWidth === void 0 ? "24px" : _ref$iconWidth,
     _ref$iconHeight = _ref.iconHeight,
     iconHeight = _ref$iconHeight === void 0 ? "24px" : _ref$iconHeight,
-    rest = _objectWithoutProperties(_ref, _excluded$l);
+    rest = _objectWithoutProperties(_ref, _excluded$m);
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
     width: "24",
@@ -15722,11 +15725,11 @@ var NoResultsIcon = function NoResultsIcon(_ref) {
   }))))));
 };
 
-var _excluded$m = ["color"];
+var _excluded$n = ["color"];
 var AgencyIcon = function AgencyIcon(_ref) {
   var _ref$color = _ref.color,
     color = _ref$color === void 0 ? "#292A33" : _ref$color,
-    props = _objectWithoutProperties(_ref, _excluded$m);
+    props = _objectWithoutProperties(_ref, _excluded$n);
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
     width: "20",
@@ -15744,7 +15747,7 @@ var AgencyIcon = function AgencyIcon(_ref) {
   })));
 };
 
-var _excluded$n = ["width", "height", "color"];
+var _excluded$o = ["width", "height", "color"];
 var PersonIcon = function PersonIcon(_ref) {
   var _ref$width = _ref.width,
     width = _ref$width === void 0 ? "20" : _ref$width,
@@ -15752,7 +15755,7 @@ var PersonIcon = function PersonIcon(_ref) {
     height = _ref$height === void 0 ? "21" : _ref$height,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? CHARADE_GREY : _ref$color,
-    props = _objectWithoutProperties(_ref, _excluded$n);
+    props = _objectWithoutProperties(_ref, _excluded$o);
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
     width: width,
@@ -15767,7 +15770,7 @@ var PersonIcon = function PersonIcon(_ref) {
   }));
 };
 
-var _excluded$o = ["width", "height", "color"];
+var _excluded$p = ["width", "height", "color"];
 var PaymentStatusIcon = function PaymentStatusIcon(_ref) {
   var _ref$width = _ref.width,
     width = _ref$width === void 0 ? "20" : _ref$width,
@@ -15775,7 +15778,7 @@ var PaymentStatusIcon = function PaymentStatusIcon(_ref) {
     height = _ref$height === void 0 ? "21" : _ref$height,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? CHARADE_GREY : _ref$color,
-    props = _objectWithoutProperties(_ref, _excluded$o);
+    props = _objectWithoutProperties(_ref, _excluded$p);
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
     width: width,
@@ -16484,7 +16487,7 @@ var mobileFallbackValues = {
 };
 var MOBILE_BREAKPOINT = 768;
 
-var _excluded$p = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
+var _excluded$q = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
 var isBelowBreakpoint = window.innerWidth < MOBILE_BREAKPOINT;
 var isTouchDevice = "ontouchstart" in window || navigator.maxTouchPoints > 1;
 var mobileDeviceDetected = isBelowBreakpoint && isTouchDevice;
@@ -16507,7 +16510,7 @@ var Title = function Title(_ref) {
     as = _ref$as === void 0 ? "h1" : _ref$as,
     dataQa = _ref.dataQa,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$p);
+    rest = _objectWithoutProperties(_ref, _excluded$q);
   return /*#__PURE__*/React.createElement(TitleText, _extends({
     variant: variant,
     as: as,
@@ -17939,12 +17942,12 @@ var fallbackValues$8 = {
   linkColor: linkColor
 };
 
-var _excluded$q = ["variant", "themeValues", "children"];
+var _excluded$r = ["variant", "themeValues", "children"];
 var BoxWithShadow = function BoxWithShadow(_ref) {
   var variant = _ref.variant,
     themeValues = _ref.themeValues,
     children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$q);
+    props = _objectWithoutProperties(_ref, _excluded$r);
   var shadowRegistry = {
     baseStandard: "0px 3px 7px 2px ".concat(rgba$1(BLACK, 0.1), ", 0px 1px 2px 1px ").concat(rgba$1(BLACK, 0.1), ";"),
     baseHover: "0px 1px 7px 0px ".concat(rgba$1(BLACK, 0.3), ", 0px 1px 4px 0px ").concat(rgba$1(BLACK, 0.2), ", 0px 7px 12px 0px ").concat(rgba$1(BLACK, 0.2), ";"),
@@ -18004,7 +18007,7 @@ var fallbackValues$a = {
   externalLinkColor: externalLinkColor
 };
 
-var _excluded$r = ["hoverColor", "activeColor", "extrastyles"];
+var _excluded$s = ["hoverColor", "activeColor", "extrastyles"];
 var ROYAL_BLUE$1 = ROYAL_BLUE;
 var LINK_TEXT_DECORATION$3 = LINK_TEXT_DECORATION;
 
@@ -18018,7 +18021,7 @@ var StyledExternalLink = styled( /*#__PURE__*/forwardRef(function (_ref, ref) {
   var hoverColor = _ref.hoverColor,
     activeColor = _ref.activeColor,
     extrastyles = _ref.extrastyles,
-    props = _objectWithoutProperties(_ref, _excluded$r);
+    props = _objectWithoutProperties(_ref, _excluded$s);
   return /*#__PURE__*/React.createElement("a", _extends({}, props, {
     ref: ref
   }));
@@ -18111,7 +18114,7 @@ var ExternalLink = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, safeChildren(children, /*#__PURE__*/React.createElement("span", null))));
 });
 
-var _excluded$s = ["hoverColor", "activeColor", "active", "color", "extrastyles"];
+var _excluded$t = ["hoverColor", "activeColor", "active", "color", "extrastyles", "underlined", "hoverUnderline", "extraHoverStyles", "extraActiveStyles", "extraFocusStyles"];
 var ROYAL_BLUE$2 = ROYAL_BLUE;
 var LINK_TEXT_DECORATION$4 = LINK_TEXT_DECORATION;
 
@@ -18127,14 +18130,19 @@ var StyledInternalLink = styled( /*#__PURE__*/forwardRef(function (_ref, ref) {
     active = _ref.active,
     color = _ref.color,
     extrastyles = _ref.extrastyles,
-    props = _objectWithoutProperties(_ref, _excluded$s);
+    underlined = _ref.underlined,
+    hoverUnderline = _ref.hoverUnderline,
+    extraHoverStyles = _ref.extraHoverStyles,
+    extraActiveStyles = _ref.extraActiveStyles,
+    extraFocusStyles = _ref.extraFocusStyles,
+    props = _objectWithoutProperties(_ref, _excluded$t);
   return /*#__PURE__*/React.createElement(Link, _extends({}, props, {
     ref: ref
   }));
 })).withConfig({
   displayName: "InternalLinkstyled__StyledInternalLink",
   componentId: "sc-cuqxud-0"
-})(["display:flex;color:", ";font-weight:", ";line-height:", ";font-size:", ";font-family:", ";margin:", ";text-decoration:", ";&:hover{color:", ";text-decoration:", ";}&:focus{outline:3px solid ", ";outline-offset:2px;text-decoration:", ";}&:active{color:", ";}", ""], function (_ref2) {
+})(["display:flex;color:", ";font-weight:", ";line-height:", ";font-size:", ";font-family:", ";margin:", ";text-decoration:", ";&:hover{color:", ";text-decoration:", ";", "}&:focus{outline:3px solid ", ";outline-offset:2px;text-decoration:", ";", "}&:active{color:", ";", "}", ""], function (_ref2) {
   var color = _ref2.color,
     active = _ref2.active,
     activeColor = _ref2.activeColor;
@@ -18154,14 +18162,32 @@ var StyledInternalLink = styled( /*#__PURE__*/forwardRef(function (_ref, ref) {
 }, function (_ref7) {
   var margin = _ref7.margin;
   return margin;
-}, LINK_TEXT_DECORATION$4, function (_ref8) {
-  var hoverColor = _ref8.hoverColor;
+}, function (_ref8) {
+  var underlined = _ref8.underlined;
+  return underlined ? LINK_TEXT_DECORATION$4 : "none";
+}, function (_ref9) {
+  var hoverColor = _ref9.hoverColor;
   return hoverColor;
-}, LINK_TEXT_DECORATION$4, ROYAL_BLUE$2, LINK_TEXT_DECORATION$4, function (_ref9) {
-  var activeColor = _ref9.activeColor;
-  return activeColor;
 }, function (_ref10) {
-  var extrastyles = _ref10.extrastyles;
+  var hoverUnderline = _ref10.hoverUnderline;
+  return hoverUnderline ? LINK_TEXT_DECORATION$4 : "none";
+}, function (_ref11) {
+  var extraHoverStyles = _ref11.extraHoverStyles;
+  return extraHoverStyles;
+}, ROYAL_BLUE$2, function (_ref12) {
+  var hoverUnderline = _ref12.hoverUnderline;
+  return hoverUnderline ? LINK_TEXT_DECORATION$4 : "none";
+}, function (_ref13) {
+  var extraFocusStyles = _ref13.extraFocusStyles;
+  return extraFocusStyles;
+}, function (_ref14) {
+  var activeColor = _ref14.activeColor;
+  return activeColor;
+}, function (_ref15) {
+  var extraActiveStyles = _ref15.extraActiveStyles;
+  return extraActiveStyles;
+}, function (_ref16) {
+  var extrastyles = _ref16.extrastyles;
   return extrastyles;
 });
 /* eslint-enable no-unused-vars */
@@ -18183,8 +18209,16 @@ var InternalLink = /*#__PURE__*/forwardRef(function (_ref, ref) {
     dataQa = _ref.dataQa,
     _ref$extraStyles = _ref.extraStyles,
     extraStyles = _ref$extraStyles === void 0 ? "" : _ref$extraStyles,
-    _ref$isUnderlined = _ref.isUnderlined,
-    isUnderlined = _ref$isUnderlined === void 0 ? true : _ref$isUnderlined;
+    _ref$underlined = _ref.underlined,
+    underlined = _ref$underlined === void 0 ? true : _ref$underlined,
+    _ref$hoverUnderline = _ref.hoverUnderline,
+    hoverUnderline = _ref$hoverUnderline === void 0 ? true : _ref$hoverUnderline,
+    _ref$extraHoverStyles = _ref.extraHoverStyles,
+    extraHoverStyles = _ref$extraHoverStyles === void 0 ? "" : _ref$extraHoverStyles,
+    _ref$extraActiveStyle = _ref.extraActiveStyles,
+    extraActiveStyles = _ref$extraActiveStyle === void 0 ? "" : _ref$extraActiveStyle,
+    _ref$extraFocusStyles = _ref.extraFocusStyles,
+    extraFocusStyles = _ref$extraFocusStyles === void 0 ? "" : _ref$extraFocusStyles;
   var themeContext = useContext(ThemeContext);
   var themeValues = createThemeValues(themeContext, fallbackValues$a, "Link", variant);
   return /*#__PURE__*/React.createElement(StyledInternalLink, {
@@ -18199,7 +18233,12 @@ var InternalLink = /*#__PURE__*/forwardRef(function (_ref, ref) {
     hoverColor: themeValues.hoverColor,
     activeColor: themeValues.activeColor,
     tabIndex: tabIndex,
-    extrastyles: "text-decoration: ".concat(isUnderlined ? LINK_TEXT_DECORATION : "none", "; ").concat(extraStyles),
+    underlined: underlined,
+    hoverUnderline: hoverUnderline,
+    extrastyles: extraStyles,
+    extraHoverStyles: extraHoverStyles,
+    extraActiveStyles: extraActiveStyles,
+    extraFocusStyles: extraFocusStyles,
     "data-qa": dataQa,
     ref: ref
   }, safeChildren(children, /*#__PURE__*/React.createElement("span", null)));
@@ -18237,7 +18276,7 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
   })));
 };
 
-var _excluded$t = ["url", "disabled", "fileLink", "extraStyles", "linkExtraStyles", "newTab", "dataQa"];
+var _excluded$u = ["url", "disabled", "fileLink", "extraStyles", "linkExtraStyles", "newTab", "dataQa"];
 var ButtonWithLink = function ButtonWithLink(_ref) {
   var _ref$url = _ref.url,
     url = _ref$url === void 0 ? "/" : _ref$url,
@@ -18252,7 +18291,7 @@ var ButtonWithLink = function ButtonWithLink(_ref) {
     _ref$newTab = _ref.newTab,
     newTab = _ref$newTab === void 0 ? false : _ref$newTab,
     dataQa = _ref.dataQa,
-    otherProps = _objectWithoutProperties(_ref, _excluded$t);
+    otherProps = _objectWithoutProperties(_ref, _excluded$u);
   var ButtonWithLinkWrapper = function ButtonWithLinkWrapper(_ref2) {
     var children = _ref2.children,
       url = _ref2.url,
@@ -18340,7 +18379,7 @@ var ParagraphText = styled.p.withConfig({
   return extraStyles;
 });
 
-var _excluded$u = ["themeValues", "weight", "color", "margin", "extraStyles", "dataQa", "children", "as"];
+var _excluded$v = ["themeValues", "weight", "color", "margin", "extraStyles", "dataQa", "children", "as"];
 var Paragraph = function Paragraph(_ref) {
   var themeValues = _ref.themeValues,
     _ref$weight = _ref.weight,
@@ -18354,7 +18393,7 @@ var Paragraph = function Paragraph(_ref) {
     dataQa = _ref.dataQa,
     children = _ref.children,
     as = _ref.as,
-    rest = _objectWithoutProperties(_ref, _excluded$u);
+    rest = _objectWithoutProperties(_ref, _excluded$v);
   return /*#__PURE__*/React.createElement(ParagraphText, _extends({
     weight: weight,
     color: color,
@@ -18596,7 +18635,7 @@ var ENTER = 13;
 var ESCAPE = 27;
 var SPACEBAR = 32;
 
-var _excluded$v = ["title", "name", "checked", "onChange", "disabled", "themeValues", "hidden", "error", "checkboxMargin", "extraStyles", "textExtraStyles", "labelledById", "dataQa", "checkboxExtraStyles", "hasIconOverride", "icon"];
+var _excluded$w = ["title", "name", "checked", "onChange", "disabled", "themeValues", "hidden", "error", "checkboxMargin", "extraStyles", "textExtraStyles", "labelledById", "dataQa", "checkboxExtraStyles", "hasIconOverride", "icon"];
 var CheckboxContainer = styled.span.withConfig({
   displayName: "Checkbox__CheckboxContainer",
   componentId: "sc-36kqbv-0"
@@ -18666,7 +18705,7 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_ref5, ref) {
     _ref5$hasIconOverride = _ref5.hasIconOverride,
     hasIconOverride = _ref5$hasIconOverride === void 0 ? false : _ref5$hasIconOverride,
     Icon = _ref5.icon,
-    rest = _objectWithoutProperties(_ref5, _excluded$v);
+    rest = _objectWithoutProperties(_ref5, _excluded$w);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     focused = _useState2[0],
@@ -19022,7 +19061,7 @@ var TableRowWrapper = styled.tr.withConfig({
   return extraStyles;
 });
 
-var _excluded$w = ["children", "extraStyles", "hoverCursor", "hoverEffect", "onClick", "themeValues"];
+var _excluded$x = ["children", "extraStyles", "hoverCursor", "hoverEffect", "onClick", "themeValues"];
 var TableRow = function TableRow(_ref) {
   var children = _ref.children,
     extraStyles = _ref.extraStyles,
@@ -19032,7 +19071,7 @@ var TableRow = function TableRow(_ref) {
     hoverEffect = _ref$hoverEffect === void 0 ? true : _ref$hoverEffect,
     onClick = _ref.onClick,
     themeValues = _ref.themeValues,
-    props = _objectWithoutProperties(_ref, _excluded$w);
+    props = _objectWithoutProperties(_ref, _excluded$x);
   return /*#__PURE__*/React.createElement(TableRowWrapper, _extends({
     onClick: onClick,
     hoverEffect: hoverEffect,
@@ -21867,7 +21906,7 @@ var mobileFallbackValues$1 = {
 };
 var MOBILE_BREAKPOINT$1 = 768;
 
-var _excluded$x = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
+var _excluded$y = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
 var isBelowBreakpoint$1 = window.innerWidth < MOBILE_BREAKPOINT$1;
 var isTouchDevice$1 = "ontouchstart" in window || navigator.maxTouchPoints > 1;
 var mobileDeviceDetected$1 = isBelowBreakpoint$1 && isTouchDevice$1;
@@ -21890,7 +21929,7 @@ var Detail = function Detail(_ref) {
     as = _ref$as === void 0 ? "p" : _ref$as,
     dataQa = _ref.dataQa,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$x);
+    rest = _objectWithoutProperties(_ref, _excluded$y);
   return /*#__PURE__*/React.createElement(DetailText, _extends({
     variant: variant,
     as: as,
@@ -22628,7 +22667,7 @@ var fallbackValues$n = {
   formFooterPanel: formFooterPanel
 };
 
-var _excluded$y = ["showErrors", "themeValues"],
+var _excluded$z = ["showErrors", "themeValues"],
   _excluded2 = ["ariaLabelledBy", "type", "labelDisplayOverride", "labelTextWhenNoError", "errorMessages", "isNum", "isEmail", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "autocompleteValue", "extraStyles", "removeFromValue", "dataQa", "isRequired", "errorFieldExtraStyles", "showFieldErrorRow", "labelTextVariant", "errorTextVariant"];
 var InputField = styled.input.withConfig({
   displayName: "FormInput__InputField",
@@ -22663,7 +22702,7 @@ var InputField = styled.input.withConfig({
 var FormattedInputField = styled(function (_ref8) {
   var showErrors = _ref8.showErrors,
     themeValues = _ref8.themeValues,
-    props = _objectWithoutProperties(_ref8, _excluded$y);
+    props = _objectWithoutProperties(_ref8, _excluded$z);
   return /*#__PURE__*/React.createElement(FormattedInput, props);
 }).withConfig({
   displayName: "FormInput__FormattedInputField",
@@ -22872,7 +22911,7 @@ var FormInput = function FormInput(_ref15) {
 };
 var FormInput$1 = themeComponent(FormInput, "FormInput", fallbackValues$n, "default");
 
-var _excluded$z = ["breakpoint", "childGap", "largeChild", "largeChildSize", "children"];
+var _excluded$A = ["breakpoint", "childGap", "largeChild", "largeChildSize", "children"];
 var FormInputRow = function FormInputRow(_ref) {
   var _ref$breakpoint = _ref.breakpoint,
     breakpoint = _ref$breakpoint === void 0 ? "30rem" : _ref$breakpoint,
@@ -22881,7 +22920,7 @@ var FormInputRow = function FormInputRow(_ref) {
     largeChild = _ref.largeChild,
     largeChildSize = _ref.largeChildSize,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$z);
+    rest = _objectWithoutProperties(_ref, _excluded$A);
   return /*#__PURE__*/React.createElement(Box, _extends({
     padding: "0"
   }, rest), /*#__PURE__*/React.createElement(Switcher, {
@@ -22892,24 +22931,24 @@ var FormInputRow = function FormInputRow(_ref) {
   }, children));
 };
 
-var _excluded$A = ["childGap", "bottomItem", "children"];
+var _excluded$B = ["childGap", "bottomItem", "children"];
 var FormInputColumn = function FormInputColumn(_ref) {
   var _ref$childGap = _ref.childGap,
     childGap = _ref$childGap === void 0 ? "0.5rem" : _ref$childGap,
     bottomItem = _ref.bottomItem,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$A);
+    rest = _objectWithoutProperties(_ref, _excluded$B);
   return /*#__PURE__*/React.createElement(Stack, _extends({
     childGap: childGap,
     bottomItem: bottomItem
   }, rest), children);
 };
 
-var _excluded$B = ["themeValues", "children"];
+var _excluded$C = ["themeValues", "children"];
 var FormContainer = function FormContainer(_ref) {
   var themeValues = _ref.themeValues,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$B);
+    rest = _objectWithoutProperties(_ref, _excluded$C);
   var _useContext = useContext(ThemeContext),
     isMobile = _useContext.isMobile;
   return /*#__PURE__*/React.createElement(Box, _extends({
@@ -23219,7 +23258,7 @@ var fallbackValues$r = {
   fontSize: fontSize$8
 };
 
-var _excluded$C = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
+var _excluded$D = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
 var Heading = function Heading(_ref) {
   var themeValues = _ref.themeValues,
     _ref$weight = _ref.weight,
@@ -23238,7 +23277,7 @@ var Heading = function Heading(_ref) {
     as = _ref$as === void 0 ? variant : _ref$as,
     dataQa = _ref.dataQa,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$C);
+    rest = _objectWithoutProperties(_ref, _excluded$D);
   return /*#__PURE__*/React.createElement(HeadingText, _extends({
     variant: variant,
     as: as,
@@ -23439,11 +23478,11 @@ var LabeledAmountV2 = function LabeledAmountV2(_ref) {
   }, /*#__PURE__*/React.createElement("span", null, label), /*#__PURE__*/React.createElement("span", null, amount));
 };
 
-var _excluded$D = ["version"];
+var _excluded$E = ["version"];
 var LabeledAmount = function LabeledAmount(_ref) {
   var _ref$version = _ref.version,
     version = _ref$version === void 0 ? "v1" : _ref$version,
-    rest = _objectWithoutProperties(_ref, _excluded$D);
+    rest = _objectWithoutProperties(_ref, _excluded$E);
   var LabeledAmountComponent = version === "v1" ? LabeledAmountV1 : LabeledAmountV2;
   return /*#__PURE__*/React.createElement(LabeledAmountComponent, rest);
 };
@@ -23588,7 +23627,7 @@ var Loading = function Loading() {
   })))));
 };
 
-var _excluded$E = ["leftContent", "rightContent", "footerMinHeight", "backgroundColor", "largeSide", "largeSideSize", "footerPadding", "isMobile", "footerWidth"];
+var _excluded$F = ["leftContent", "rightContent", "footerMinHeight", "backgroundColor", "largeSide", "largeSideSize", "footerPadding", "isMobile", "footerWidth"];
 var NavFooter = function NavFooter(_ref) {
   var leftContent = _ref.leftContent,
     rightContent = _ref.rightContent,
@@ -23603,7 +23642,7 @@ var NavFooter = function NavFooter(_ref) {
     footerPadding = _ref$footerPadding === void 0 ? "1.5rem 1rem" : _ref$footerPadding,
     isMobile = _ref.isMobile,
     footerWidth = _ref.footerWidth,
-    rest = _objectWithoutProperties(_ref, _excluded$E);
+    rest = _objectWithoutProperties(_ref, _excluded$F);
   return /*#__PURE__*/React.createElement(Box, _extends({
     padding: footerPadding,
     background: backgroundColor,
@@ -23634,7 +23673,7 @@ var NavFooter = function NavFooter(_ref) {
   }, rightContent)))))));
 };
 
-var _excluded$F = ["leftContent", "rightContent", "headerHeight", "isMobile", "backgroundColor", "headerWidth"];
+var _excluded$G = ["leftContent", "rightContent", "headerHeight", "isMobile", "backgroundColor", "headerWidth"];
 var NavHeader = function NavHeader(_ref) {
   var leftContent = _ref.leftContent,
     rightContent = _ref.rightContent,
@@ -23643,7 +23682,7 @@ var NavHeader = function NavHeader(_ref) {
     isMobile = _ref.isMobile,
     backgroundColor = _ref.backgroundColor,
     headerWidth = _ref.headerWidth,
-    rest = _objectWithoutProperties(_ref, _excluded$F);
+    rest = _objectWithoutProperties(_ref, _excluded$G);
   return /*#__PURE__*/React.createElement(Box, _extends({
     padding: "0 16px 4px",
     background: backgroundColor,
@@ -35503,7 +35542,7 @@ var LoadingPill = styled.span.withConfig({
   return backgroundColor;
 }, shineFrames);
 
-var _excluded$G = ["minWidth", "maxWidth", "exactWidth", "height", "margin", "backgroundColor", "foregroundColor"];
+var _excluded$H = ["minWidth", "maxWidth", "exactWidth", "height", "margin", "backgroundColor", "foregroundColor"];
 var LoadingLine = function LoadingLine(_ref) {
   var minWidth = _ref.minWidth,
     maxWidth = _ref.maxWidth,
@@ -35517,7 +35556,7 @@ var LoadingLine = function LoadingLine(_ref) {
     backgroundColor = _ref$backgroundColor === void 0 ? SEASHELL_WHITE : _ref$backgroundColor,
     _ref$foregroundColor = _ref.foregroundColor,
     foregroundColor = _ref$foregroundColor === void 0 ? ALABASTER_WHITE : _ref$foregroundColor,
-    props = _objectWithoutProperties(_ref, _excluded$G);
+    props = _objectWithoutProperties(_ref, _excluded$H);
   var calculatedWidth = Math.floor(Math.random() * (parseInt(maxWidth) - parseInt(minWidth) + 1) + parseInt(minWidth));
   return /*#__PURE__*/React.createElement(LoadingPill, _extends({
     "aria-label": "loading",
@@ -41594,11 +41633,11 @@ var Modal$2 = function Modal(_ref) {
 };
 var ModalControlV2 = withWindowSize(Modal$2);
 
-var _excluded$H = ["version"];
+var _excluded$I = ["version"];
 var Modal$3 = function Modal(_ref) {
   var _ref$version = _ref.version,
     version = _ref$version === void 0 ? "v1" : _ref$version,
-    rest = _objectWithoutProperties(_ref, _excluded$H);
+    rest = _objectWithoutProperties(_ref, _excluded$I);
   var ModalControl = version === "v1" ? Modal$1 : ModalControlV2;
   return /*#__PURE__*/React.createElement(ModalControl, rest);
 };
@@ -42163,6 +42202,8 @@ var LinkCard = function LinkCard(_ref) {
     title = _ref$title === void 0 ? "Test Workflow" : _ref$title,
     _ref$subtitle = _ref.subtitle,
     subtitle = _ref$subtitle === void 0 ? "Link your benefit plan" : _ref$subtitle,
+    _ref$subtitlePadding = _ref.subtitlePadding,
+    subtitlePadding = _ref$subtitlePadding === void 0 ? "0 0 40px" : _ref$subtitlePadding,
     showLeft = _ref.showLeft,
     leftContent = _ref.leftContent,
     showRight = _ref.showRight,
@@ -42177,8 +42218,11 @@ 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;
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$isExternalLink = _ref.isExternalLink,
+    isExternalLink = _ref$isExternalLink === void 0 ? false : _ref$isExternalLink;
   var _useContext = useContext(ThemeContext),
     isMobile = _useContext.isMobile;
   var regex = /\W/g;
@@ -42208,16 +42252,23 @@ var LinkCard = function LinkCard(_ref) {
       width: "100%"
     },
     fullHeight: true
-  }, /*#__PURE__*/React.createElement(Box, {
-    padding: 0,
-    width: "100%"
+  }, /*#__PURE__*/React.createElement(Stack, {
+    direction: "row",
+    childGap: "0.5rem"
   }, /*#__PURE__*/React.createElement(Title$2, {
     variant: titleVariant,
     theme: themeValues,
     margin: 0,
     isDisabled: disabled
-  }, title)), /*#__PURE__*/React.createElement(Box, {
-    padding: "0 0 0.5rem",
+  }, title), isExternalLink && /*#__PURE__*/React.createElement(ExternalLinkIcon, {
+    linkColor: themeValues.color,
+    text: locatorSlug,
+    style: {
+      height: "1.125rem",
+      width: "1.125rem"
+    }
+  })), /*#__PURE__*/React.createElement(Box, {
+    padding: subtitlePadding,
     width: "100%"
   }, /*#__PURE__*/React.createElement(Subtitle, {
     variant: "pS",
@@ -43816,7 +43867,7 @@ var fallbackValues$Q = {
   labeledAmountTotal: labeledAmountTotal
 };
 
-var _excluded$I = ["amount"],
+var _excluded$J = ["amount"],
   _excluded2$1 = ["amount"];
 var PaymentDetailsContent = function PaymentDetailsContent(_ref) {
   var lineItemElems = _ref.lineItemElems,
@@ -44059,7 +44110,7 @@ var PaymentDetails = function PaymentDetails(_ref4) {
     return fee.amount > 0;
   }).map(function (_ref5) {
     var amount = _ref5.amount,
-      rest = _objectWithoutProperties(_ref5, _excluded$I);
+      rest = _objectWithoutProperties(_ref5, _excluded$J);
     return _objectSpread2(_objectSpread2({}, rest), {}, {
       amount: displayCurrency(amount)
     });
@@ -44496,11 +44547,11 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
   }, errorMessage))))));
 };
 
-var _excluded$J = ["version"];
+var _excluded$K = ["version"];
 var TermsAndConditions = function TermsAndConditions(_ref) {
   var _ref$version = _ref.version,
     version = _ref$version === void 0 ? "v1" : _ref$version,
-    rest = _objectWithoutProperties(_ref, _excluded$J);
+    rest = _objectWithoutProperties(_ref, _excluded$K);
   var TermsAndConditionsControl = version === "v1" ? TermsAndConditionsControlV1 : TermsAndConditionsControlV2;
   return /*#__PURE__*/React.createElement(TermsAndConditionsControl, rest);
 };
@@ -45308,7 +45359,7 @@ var InnerRadioSection = function InnerRadioSection(_ref) {
   }, section.content))));
 };
 
-var _excluded$K = ["themeValues", "isMobile", "supportsTouch", "sections", "openSection", "toggleOpenSection", "staggeredAnimation", "initiallyOpen", "openHeight", "containerStyles", "ariaDescribedBy", "isSectionRequired", "groupedSections", "borderOverride"];
+var _excluded$L = ["themeValues", "isMobile", "supportsTouch", "sections", "openSection", "toggleOpenSection", "staggeredAnimation", "initiallyOpen", "openHeight", "containerStyles", "ariaDescribedBy", "isSectionRequired", "groupedSections", "borderOverride"];
 
 /**
 - The RadioSection component takes either a flat array (via the 'sections' 
@@ -45358,7 +45409,7 @@ var RadioSection = function RadioSection(_ref) {
     _ref$groupedSections = _ref.groupedSections,
     groupedSections = _ref$groupedSections === void 0 ? [] : _ref$groupedSections,
     borderOverride = _ref.borderOverride,
-    rest = _objectWithoutProperties(_ref, _excluded$K);
+    rest = _objectWithoutProperties(_ref, _excluded$L);
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     focused = _useState2[0],
@@ -45989,7 +46040,8 @@ var TabSidebar = function TabSidebar(_ref) {
     return /*#__PURE__*/React.createElement(InternalLink, {
       to: route,
       key: "".concat(route, "-").concat(index),
-      extraStyles: "text-decoration: none;\n            &:hover {\n            text-decoration: none;\n            ".concat(active ? "> * {\n                background-color: ".concat(themeValues.activeTabHover, ";\n              }") : "> * { \n                background-color: rgba(8, 27, 43, 0.05);\n              }", "}")
+      isUnderlined: false,
+      extraStyles: "\n            &:hover {\n            ".concat(active ? "> * {\n                background-color: ".concat(themeValues.activeTabHover, ";\n              }") : "> * { \n                background-color: rgba(8, 27, 43, 0.05);\n              }", "}")
     }, /*#__PURE__*/React.createElement(Box, {
       padding: isMobile ? "6px 4px" : "18px 16px",
       background: active ? themeValues.activeTabBackground : "transparent",
@@ -46050,7 +46102,7 @@ var Timeout = function Timeout(_ref) {
 };
 var Timeout$1 = withWindowSize(Timeout);
 
-var _excluded$L = ["variant", "message", "toastOpen", "closeToastNotification", "extraStyles", "minWidth", "maxWidth", "height", "childGap", "backgroundColor", "role", "ariaLive", "screenReaderMessage", "showScreenReaderMessage"];
+var _excluded$M = ["variant", "message", "toastOpen", "closeToastNotification", "extraStyles", "minWidth", "maxWidth", "height", "childGap", "backgroundColor", "role", "ariaLive", "screenReaderMessage", "showScreenReaderMessage"];
 var VARIANTS = {
   SUCCESS: "success",
   ERROR: "error"
@@ -46079,7 +46131,7 @@ var ToastNotification = function ToastNotification(_ref) {
     screenReaderMessage = _ref.screenReaderMessage,
     _ref$showScreenReader = _ref.showScreenReaderMessage,
     showScreenReaderMessage = _ref$showScreenReader === void 0 ? true : _ref$showScreenReader,
-    rest = _objectWithoutProperties(_ref, _excluded$L);
+    rest = _objectWithoutProperties(_ref, _excluded$M);
   var screenReaderMessageRef = useRef();
   var LIVEREGION_TRANSITION_DELAY = 1000;
   useEffect$1(function () {
@@ -46262,7 +46314,7 @@ var PopupMenuItemContainer = styled(ButtonWithAction).withConfig({
   return "\n    background-color: ".concat(isDeleteAction ? theme.menuItemHoverBackgroundColorDelete : theme.menuItemHoverBackgroundColor, ";\n  ");
 });
 
-var _excluded$M = ["id", "closeMenuCallback", "action", "themeValues", "text", "hasIcon", "isDeleteAction", "icon", "textExtraStyles", "hoverStyles", "activeStyles", "extraStyles"];
+var _excluded$N = ["id", "closeMenuCallback", "action", "themeValues", "text", "hasIcon", "isDeleteAction", "icon", "textExtraStyles", "hoverStyles", "activeStyles", "extraStyles"];
 var PopupMenuItem = function PopupMenuItem(_ref) {
   var id = _ref.id,
     closeMenuCallback = _ref.closeMenuCallback,
@@ -46278,7 +46330,7 @@ var PopupMenuItem = function PopupMenuItem(_ref) {
     hoverStyles = _ref.hoverStyles,
     activeStyles = _ref.activeStyles,
     extraStyles = _ref.extraStyles,
-    rest = _objectWithoutProperties(_ref, _excluded$M);
+    rest = _objectWithoutProperties(_ref, _excluded$N);
   return /*#__PURE__*/React.createElement(PopupMenuItemContainer, _extends({
     id: id,
     role: "menuItem",
@@ -46517,7 +46569,7 @@ var ActionLinkButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
   });
 });
 
-var _excluded$N = ["width", "height", "color"];
+var _excluded$O = ["width", "height", "color"];
 var DropdownIconV2 = function DropdownIconV2(_ref) {
   var _ref$width = _ref.width,
     width = _ref$width === void 0 ? "18" : _ref$width,
@@ -46525,7 +46577,7 @@ var DropdownIconV2 = function DropdownIconV2(_ref) {
     height = _ref$height === void 0 ? "19" : _ref$height,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? "#292A33" : _ref$color,
-    props = _objectWithoutProperties(_ref, _excluded$N);
+    props = _objectWithoutProperties(_ref, _excluded$O);
   return /*#__PURE__*/React.createElement("svg", _extends({
     width: width,
     height: height,
@@ -46672,7 +46724,7 @@ var SearchBox = function SearchBox(_ref) {
   }));
 };
 
-var _excluded$O = ["width", "height", "color"];
+var _excluded$P = ["width", "height", "color"];
 var CheckboxCheckmarkIcon = function CheckboxCheckmarkIcon(_ref) {
   var _ref$width = _ref.width,
     width = _ref$width === void 0 ? "18" : _ref$width,
@@ -46680,7 +46732,7 @@ var CheckboxCheckmarkIcon = function CheckboxCheckmarkIcon(_ref) {
     height = _ref$height === void 0 ? "18" : _ref$height,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? "#FEFEFE" : _ref$color,
-    props = _objectWithoutProperties(_ref, _excluded$O);
+    props = _objectWithoutProperties(_ref, _excluded$P);
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
     width: width,
@@ -47376,7 +47428,7 @@ var fallbackValues$11 = {
   justifyContent: justifyContent
 };
 
-var _excluded$P = ["variant", "imageUrl", "isMobile", "theme", "extraStyles"],
+var _excluded$Q = ["variant", "imageUrl", "isMobile", "theme", "extraStyles"],
   _excluded2$2 = ["theme", "isMobile"],
   _excluded3 = ["theme", "isMobile"],
   _excluded4 = ["theme", "isMobile"];
@@ -47399,7 +47451,7 @@ var HeroContainer = styled(function (_ref2) {
     isMobile = _ref2.isMobile,
     theme = _ref2.theme,
     extraStyles = _ref2.extraStyles,
-    props = _objectWithoutProperties(_ref2, _excluded$P);
+    props = _objectWithoutProperties(_ref2, _excluded$Q);
   return /*#__PURE__*/React.createElement(Box, props);
 }).withConfig({
   displayName: "HeroImagestyled__HeroContainer",