@thecb/components 8.4.0-beta.2 → 8.4.0-beta.21

package/dist/index.d.ts

@@ -1,5 +1,300 @@
 import React from 'react';
 
+type Color = string;
+
+type ColorSet = {
+  background: Color;
+  border: Color;
+  iconBackground: Color;
+  iconFill: Color;
+};
+
+declare const BLACK: Color;
+declare const TRANSPARENT: Color;
+
+// WHITE
+declare const WHITE: Color;
+declare const SOLITUDE_WHITE: Color;
+declare const SEASHELL_WHITE: Color;
+declare const ALABASTER_WHITE: Color;
+declare const AQUA_HAZE_WHITE: Color;
+declare const BLEACH_WHITE: Color;
+declare const CATSKILL_WHITE: Color;
+declare const HALF_COLONIAL_WHITE: Color;
+
+// GREY
+declare const ATHENS_GREY: Color;
+declare const ALTO_GREY: Color;
+declare const SILVER_GREY: Color;
+declare const PEWTER_GREY: Color;
+declare const ASH_GREY: Color;
+declare const IRON_GREY: Color;
+declare const GHOST_GREY: Color;
+declare const DUSTY_GREY: Color;
+declare const REGENT_GREY: Color;
+declare const STORM_GREY: Color;
+declare const TROUT_GREY: Color;
+declare const MINESHAFT_GREY: Color;
+declare const SOOT_GREY: Color;
+declare const FIREFLY_GREY: Color;
+declare const BRIGHT_GREY: Color;
+declare const CHARADE_GREY: Color;
+declare const GRECIAN_GREY: Color;
+declare const BLACK_SQUEEZE: Color;
+declare const GREY_CHATEAU: Color;
+declare const COOL_GREY_05: Color;
+
+// BLUE
+declare const CLOUDBURST_BLUE: Color;
+declare const ZODIAC_BLUE: Color;
+declare const CONGRESS_BLUE: Color;
+declare const SCIENCE_BLUE: Color;
+declare const MARINER_BLUE: Color;
+declare const CURIOUS_BLUE: Color;
+declare const SELAGO_BLUE: Color;
+declare const ONAHAU_BLUE: Color;
+declare const PICKLED_BLUE: Color;
+declare const CERULEAN_BLUE: Color;
+declare const FOAM_BLUE: Color;
+declare const CELLO_BLUE: Color;
+declare const BOSTON_BLUE: Color;
+declare const INFO_BLUE: Color;
+declare const CORNFLOWER_BLUE: Color;
+declare const HOVER_LIGHT_BLUE: Color;
+declare const MATISSE_BLUE: Color;
+declare const ROYAL_BLUE: Color;
+declare const ROYAL_BLUE_VIVID: Color;
+declare const ASTRAL_BLUE: Color;
+declare const SAPPHIRE_BLUE: Color;
+declare const PEACOCK_BLUE: Color;
+
+// GREEN
+declare const FOREST_GREEN: Color;
+declare const MEADOW_GREEN: Color;
+declare const POLAR_GREEN: Color;
+declare const ICE_GREEN: Color;
+declare const HAZE_GREEN: Color;
+declare const EMERALD_GREEN: Color;
+declare const HINT_GREEN: Color;
+declare const SEA_GREEN: Color;
+
+// YELLOW
+declare const SELECTIVE_YELLOW: Color;
+declare const MUSTARD_YELLOW: Color;
+declare const FIRE_YELLOW: Color;
+
+// ORANGE
+declare const CARROT_ORANGE: Color;
+declare const ZEST_ORANGE: Color;
+declare const APRICOT_ORANGE: Color;
+
+// RED
+declare const RED: Color;
+declare const CRIMSON_RED: Color;
+declare const THUNDERBIRD_RED: Color;
+declare const RAZZMATAZZ_RED: Color;
+declare const RASPBERRY: Color;
+declare const FANTASY_RED: Color;
+declare const COSMOS_RED: Color;
+declare const BLUSH_RED: Color;
+
+declare const ERROR_COLOR: Color;
+
+declare const ALERT_COLORS: {
+  warn: ColorSet;
+  info: ColorSet;
+  error: ColorSet;
+  success: ColorSet;
+  text: Color;
+  link: Color;
+};
+
+declare const PILL_COLORS: {
+  danger: {
+    background: Color;
+    text: Color;
+  };
+  neutral: {
+    background: Color;
+    text: Color;
+  };
+  success: {
+    background: Color;
+    text: Color;
+  };
+  warning: {
+    background: Color;
+    text: Color;
+  };
+};
+
+declare const colors_d_BLACK: typeof BLACK;
+declare const colors_d_TRANSPARENT: typeof TRANSPARENT;
+declare const colors_d_WHITE: typeof WHITE;
+declare const colors_d_SOLITUDE_WHITE: typeof SOLITUDE_WHITE;
+declare const colors_d_SEASHELL_WHITE: typeof SEASHELL_WHITE;
+declare const colors_d_ALABASTER_WHITE: typeof ALABASTER_WHITE;
+declare const colors_d_AQUA_HAZE_WHITE: typeof AQUA_HAZE_WHITE;
+declare const colors_d_BLEACH_WHITE: typeof BLEACH_WHITE;
+declare const colors_d_CATSKILL_WHITE: typeof CATSKILL_WHITE;
+declare const colors_d_HALF_COLONIAL_WHITE: typeof HALF_COLONIAL_WHITE;
+declare const colors_d_ATHENS_GREY: typeof ATHENS_GREY;
+declare const colors_d_ALTO_GREY: typeof ALTO_GREY;
+declare const colors_d_SILVER_GREY: typeof SILVER_GREY;
+declare const colors_d_PEWTER_GREY: typeof PEWTER_GREY;
+declare const colors_d_ASH_GREY: typeof ASH_GREY;
+declare const colors_d_IRON_GREY: typeof IRON_GREY;
+declare const colors_d_GHOST_GREY: typeof GHOST_GREY;
+declare const colors_d_DUSTY_GREY: typeof DUSTY_GREY;
+declare const colors_d_REGENT_GREY: typeof REGENT_GREY;
+declare const colors_d_STORM_GREY: typeof STORM_GREY;
+declare const colors_d_TROUT_GREY: typeof TROUT_GREY;
+declare const colors_d_MINESHAFT_GREY: typeof MINESHAFT_GREY;
+declare const colors_d_SOOT_GREY: typeof SOOT_GREY;
+declare const colors_d_FIREFLY_GREY: typeof FIREFLY_GREY;
+declare const colors_d_BRIGHT_GREY: typeof BRIGHT_GREY;
+declare const colors_d_CHARADE_GREY: typeof CHARADE_GREY;
+declare const colors_d_GRECIAN_GREY: typeof GRECIAN_GREY;
+declare const colors_d_BLACK_SQUEEZE: typeof BLACK_SQUEEZE;
+declare const colors_d_GREY_CHATEAU: typeof GREY_CHATEAU;
+declare const colors_d_COOL_GREY_05: typeof COOL_GREY_05;
+declare const colors_d_CLOUDBURST_BLUE: typeof CLOUDBURST_BLUE;
+declare const colors_d_ZODIAC_BLUE: typeof ZODIAC_BLUE;
+declare const colors_d_CONGRESS_BLUE: typeof CONGRESS_BLUE;
+declare const colors_d_SCIENCE_BLUE: typeof SCIENCE_BLUE;
+declare const colors_d_MARINER_BLUE: typeof MARINER_BLUE;
+declare const colors_d_CURIOUS_BLUE: typeof CURIOUS_BLUE;
+declare const colors_d_SELAGO_BLUE: typeof SELAGO_BLUE;
+declare const colors_d_ONAHAU_BLUE: typeof ONAHAU_BLUE;
+declare const colors_d_PICKLED_BLUE: typeof PICKLED_BLUE;
+declare const colors_d_CERULEAN_BLUE: typeof CERULEAN_BLUE;
+declare const colors_d_FOAM_BLUE: typeof FOAM_BLUE;
+declare const colors_d_CELLO_BLUE: typeof CELLO_BLUE;
+declare const colors_d_BOSTON_BLUE: typeof BOSTON_BLUE;
+declare const colors_d_INFO_BLUE: typeof INFO_BLUE;
+declare const colors_d_CORNFLOWER_BLUE: typeof CORNFLOWER_BLUE;
+declare const colors_d_HOVER_LIGHT_BLUE: typeof HOVER_LIGHT_BLUE;
+declare const colors_d_MATISSE_BLUE: typeof MATISSE_BLUE;
+declare const colors_d_ROYAL_BLUE: typeof ROYAL_BLUE;
+declare const colors_d_ROYAL_BLUE_VIVID: typeof ROYAL_BLUE_VIVID;
+declare const colors_d_ASTRAL_BLUE: typeof ASTRAL_BLUE;
+declare const colors_d_SAPPHIRE_BLUE: typeof SAPPHIRE_BLUE;
+declare const colors_d_PEACOCK_BLUE: typeof PEACOCK_BLUE;
+declare const colors_d_FOREST_GREEN: typeof FOREST_GREEN;
+declare const colors_d_MEADOW_GREEN: typeof MEADOW_GREEN;
+declare const colors_d_POLAR_GREEN: typeof POLAR_GREEN;
+declare const colors_d_ICE_GREEN: typeof ICE_GREEN;
+declare const colors_d_HAZE_GREEN: typeof HAZE_GREEN;
+declare const colors_d_EMERALD_GREEN: typeof EMERALD_GREEN;
+declare const colors_d_HINT_GREEN: typeof HINT_GREEN;
+declare const colors_d_SEA_GREEN: typeof SEA_GREEN;
+declare const colors_d_SELECTIVE_YELLOW: typeof SELECTIVE_YELLOW;
+declare const colors_d_MUSTARD_YELLOW: typeof MUSTARD_YELLOW;
+declare const colors_d_FIRE_YELLOW: typeof FIRE_YELLOW;
+declare const colors_d_CARROT_ORANGE: typeof CARROT_ORANGE;
+declare const colors_d_ZEST_ORANGE: typeof ZEST_ORANGE;
+declare const colors_d_APRICOT_ORANGE: typeof APRICOT_ORANGE;
+declare const colors_d_RED: typeof RED;
+declare const colors_d_CRIMSON_RED: typeof CRIMSON_RED;
+declare const colors_d_THUNDERBIRD_RED: typeof THUNDERBIRD_RED;
+declare const colors_d_RAZZMATAZZ_RED: typeof RAZZMATAZZ_RED;
+declare const colors_d_RASPBERRY: typeof RASPBERRY;
+declare const colors_d_FANTASY_RED: typeof FANTASY_RED;
+declare const colors_d_COSMOS_RED: typeof COSMOS_RED;
+declare const colors_d_BLUSH_RED: typeof BLUSH_RED;
+declare const colors_d_ERROR_COLOR: typeof ERROR_COLOR;
+declare const colors_d_ALERT_COLORS: typeof ALERT_COLORS;
+declare const colors_d_PILL_COLORS: typeof PILL_COLORS;
+declare namespace colors_d {
+  export {
+    colors_d_BLACK as BLACK,
+    colors_d_TRANSPARENT as TRANSPARENT,
+    colors_d_WHITE as WHITE,
+    colors_d_SOLITUDE_WHITE as SOLITUDE_WHITE,
+    colors_d_SEASHELL_WHITE as SEASHELL_WHITE,
+    colors_d_ALABASTER_WHITE as ALABASTER_WHITE,
+    colors_d_AQUA_HAZE_WHITE as AQUA_HAZE_WHITE,
+    colors_d_BLEACH_WHITE as BLEACH_WHITE,
+    colors_d_CATSKILL_WHITE as CATSKILL_WHITE,
+    colors_d_HALF_COLONIAL_WHITE as HALF_COLONIAL_WHITE,
+    colors_d_ATHENS_GREY as ATHENS_GREY,
+    colors_d_ALTO_GREY as ALTO_GREY,
+    colors_d_SILVER_GREY as SILVER_GREY,
+    colors_d_PEWTER_GREY as PEWTER_GREY,
+    colors_d_ASH_GREY as ASH_GREY,
+    colors_d_IRON_GREY as IRON_GREY,
+    colors_d_GHOST_GREY as GHOST_GREY,
+    colors_d_DUSTY_GREY as DUSTY_GREY,
+    colors_d_REGENT_GREY as REGENT_GREY,
+    colors_d_STORM_GREY as STORM_GREY,
+    colors_d_TROUT_GREY as TROUT_GREY,
+    colors_d_MINESHAFT_GREY as MINESHAFT_GREY,
+    colors_d_SOOT_GREY as SOOT_GREY,
+    colors_d_FIREFLY_GREY as FIREFLY_GREY,
+    colors_d_BRIGHT_GREY as BRIGHT_GREY,
+    colors_d_CHARADE_GREY as CHARADE_GREY,
+    colors_d_GRECIAN_GREY as GRECIAN_GREY,
+    colors_d_BLACK_SQUEEZE as BLACK_SQUEEZE,
+    colors_d_GREY_CHATEAU as GREY_CHATEAU,
+    colors_d_COOL_GREY_05 as COOL_GREY_05,
+    colors_d_CLOUDBURST_BLUE as CLOUDBURST_BLUE,
+    colors_d_ZODIAC_BLUE as ZODIAC_BLUE,
+    colors_d_CONGRESS_BLUE as CONGRESS_BLUE,
+    colors_d_SCIENCE_BLUE as SCIENCE_BLUE,
+    colors_d_MARINER_BLUE as MARINER_BLUE,
+    colors_d_CURIOUS_BLUE as CURIOUS_BLUE,
+    colors_d_SELAGO_BLUE as SELAGO_BLUE,
+    colors_d_ONAHAU_BLUE as ONAHAU_BLUE,
+    colors_d_PICKLED_BLUE as PICKLED_BLUE,
+    colors_d_CERULEAN_BLUE as CERULEAN_BLUE,
+    colors_d_FOAM_BLUE as FOAM_BLUE,
+    colors_d_CELLO_BLUE as CELLO_BLUE,
+    colors_d_BOSTON_BLUE as BOSTON_BLUE,
+    colors_d_INFO_BLUE as INFO_BLUE,
+    colors_d_CORNFLOWER_BLUE as CORNFLOWER_BLUE,
+    colors_d_HOVER_LIGHT_BLUE as HOVER_LIGHT_BLUE,
+    colors_d_MATISSE_BLUE as MATISSE_BLUE,
+    colors_d_ROYAL_BLUE as ROYAL_BLUE,
+    colors_d_ROYAL_BLUE_VIVID as ROYAL_BLUE_VIVID,
+    colors_d_ASTRAL_BLUE as ASTRAL_BLUE,
+    colors_d_SAPPHIRE_BLUE as SAPPHIRE_BLUE,
+    colors_d_PEACOCK_BLUE as PEACOCK_BLUE,
+    colors_d_FOREST_GREEN as FOREST_GREEN,
+    colors_d_MEADOW_GREEN as MEADOW_GREEN,
+    colors_d_POLAR_GREEN as POLAR_GREEN,
+    colors_d_ICE_GREEN as ICE_GREEN,
+    colors_d_HAZE_GREEN as HAZE_GREEN,
+    colors_d_EMERALD_GREEN as EMERALD_GREEN,
+    colors_d_HINT_GREEN as HINT_GREEN,
+    colors_d_SEA_GREEN as SEA_GREEN,
+    colors_d_SELECTIVE_YELLOW as SELECTIVE_YELLOW,
+    colors_d_MUSTARD_YELLOW as MUSTARD_YELLOW,
+    colors_d_FIRE_YELLOW as FIRE_YELLOW,
+    colors_d_CARROT_ORANGE as CARROT_ORANGE,
+    colors_d_ZEST_ORANGE as ZEST_ORANGE,
+    colors_d_APRICOT_ORANGE as APRICOT_ORANGE,
+    colors_d_RED as RED,
+    colors_d_CRIMSON_RED as CRIMSON_RED,
+    colors_d_THUNDERBIRD_RED as THUNDERBIRD_RED,
+    colors_d_RAZZMATAZZ_RED as RAZZMATAZZ_RED,
+    colors_d_RASPBERRY as RASPBERRY,
+    colors_d_FANTASY_RED as FANTASY_RED,
+    colors_d_COSMOS_RED as COSMOS_RED,
+    colors_d_BLUSH_RED as BLUSH_RED,
+    colors_d_ERROR_COLOR as ERROR_COLOR,
+    colors_d_ALERT_COLORS as ALERT_COLORS,
+    colors_d_PILL_COLORS as PILL_COLORS,
+  };
+}
+
+
+
+declare namespace index_d {
+  export {
+    colors_d as colors,
+  };
+}
+
 type Expand<T> = T extends infer O ? { [K in keyof O]: O[K] } : never;
 
 interface ButtonWithActionProps {
@@ -698,5 +993,5 @@ interface DefaultPageTemplateProps {
 declare const DefaultPageTemplate: React.FC<Expand<DefaultPageTemplateProps> &
   React.HTMLAttributes<HTMLElement>>;
 
-export { AddValidatorAction, ArrowDownCircleIconSmall, ArrowDownCircleIconSmallProps, ArrowLeftCircleIconMedium, ArrowLeftCircleIconMediumProps, ArrowLeftCircleIconSmall, ArrowLeftCircleIconSmallProps, ArrowRightCircleIconSmall, ArrowRightCircleIconSmallProps, ArrowUpCircleIconSmall, ArrowUpCircleIconSmallProps, BankIconLarge, BankIconLargeProps, Box, BoxProps, ButtonWithAction, ButtonWithActionProps, ButtonWithLink, ButtonWithLinkProps, Card, CardProps, Center, CenterProps, ChargebackIconMedium, ChargebackIconMediumProps, ChargebackIconSmall, ChargebackIconSmallProps, ChargebackReversalIconMedium, ChargebackReversalIconMediumProps, ChargebackReversalIconSmall, ChargebackReversalIconSmallProps, ClearAction, Cluster, ClusterProps, CollapsibleSection, CollapsibleSectionProps, Copyable, CopyableProps, Cover, CoverProps, DefaultPageTemplate, DefaultPageTemplateProps, EditableTable, EditableTableProps, ErrorMessageDictionary, ExternalLink, ExternalLinkProps, Field, FieldActionPayload, FieldActions, FooterWithSubfooter, FooterWithSubfooterProps, FormInput, FormInputProps, FormSelect, FormSelectOption, FormSelectProps, GuidedCheckoutImage, HistoryIconSmall, InternalLink, InternalLinkProps, KioskImage, Loading, LoadingProps, NavFooter, NavFooterProps, NavHeader, NavHeaderProps, NavTabs, NavTabsProps, Paragraph, ParagraphProps, PointOfSaleImage, Popover, PopoverProps, ProfileImage, ReduxAction, RefundIconMedium, RefundIconMediumProps, RefundIconSmall, RefundIconSmallProps, RemoveValidatorAction, RevenueManagementImage, SetAction, Spinner, SpinnerProps, Stack, StackProps, StandardCheckoutImage, SuccessfulIconMedium, SuccessfulIconMediumProps, SuccessfulIconSmall, SuccessfulIconSmallProps, Switcher, SwitcherProps, Table, TableBody, TableBodyProps, TableCell, TableCellProps, TableHead, TableHeadProps, TableHeading, TableHeadingProps, TableListItem, TableListItemProps, TableProps, TableRow, TableRowProps, Text, TextProps, Title, TitleProps, ValidatorFn, XCircleIconMedium, XCircleIconMediumProps, XCircleIconSmall, XCircleIconSmallProps };
+export { AddValidatorAction, ArrowDownCircleIconSmall, ArrowDownCircleIconSmallProps, ArrowLeftCircleIconMedium, ArrowLeftCircleIconMediumProps, ArrowLeftCircleIconSmall, ArrowLeftCircleIconSmallProps, ArrowRightCircleIconSmall, ArrowRightCircleIconSmallProps, ArrowUpCircleIconSmall, ArrowUpCircleIconSmallProps, BankIconLarge, BankIconLargeProps, Box, BoxProps, ButtonWithAction, ButtonWithActionProps, ButtonWithLink, ButtonWithLinkProps, Card, CardProps, Center, CenterProps, ChargebackIconMedium, ChargebackIconMediumProps, ChargebackIconSmall, ChargebackIconSmallProps, ChargebackReversalIconMedium, ChargebackReversalIconMediumProps, ChargebackReversalIconSmall, ChargebackReversalIconSmallProps, ClearAction, Cluster, ClusterProps, CollapsibleSection, CollapsibleSectionProps, Copyable, CopyableProps, Cover, CoverProps, DefaultPageTemplate, DefaultPageTemplateProps, EditableTable, EditableTableProps, ErrorMessageDictionary, ExternalLink, ExternalLinkProps, Field, FieldActionPayload, FieldActions, FooterWithSubfooter, FooterWithSubfooterProps, FormInput, FormInputProps, FormSelect, FormSelectOption, FormSelectProps, GuidedCheckoutImage, HistoryIconSmall, InternalLink, InternalLinkProps, KioskImage, Loading, LoadingProps, NavFooter, NavFooterProps, NavHeader, NavHeaderProps, NavTabs, NavTabsProps, Paragraph, ParagraphProps, PointOfSaleImage, Popover, PopoverProps, ProfileImage, ReduxAction, RefundIconMedium, RefundIconMediumProps, RefundIconSmall, RefundIconSmallProps, RemoveValidatorAction, RevenueManagementImage, SetAction, Spinner, SpinnerProps, Stack, StackProps, StandardCheckoutImage, SuccessfulIconMedium, SuccessfulIconMediumProps, SuccessfulIconSmall, SuccessfulIconSmallProps, Switcher, SwitcherProps, Table, TableBody, TableBodyProps, TableCell, TableCellProps, TableHead, TableHeadProps, TableHeading, TableHeadingProps, TableListItem, TableListItemProps, TableProps, TableRow, TableRowProps, Text, TextProps, Title, TitleProps, ValidatorFn, XCircleIconMedium, XCircleIconMediumProps, XCircleIconSmall, XCircleIconSmallProps, index_d as constants };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.esm.js

@@ -4951,8 +4951,8 @@ Name already taken? If you can't use the existing color, then use thesaurus.com
 to the one generated by name-that-color.
 */
 var BLACK = "#000000";
-var TRANSPARENT = "transparent"; // WHITE
-
+var TRANSPARENT = "transparent";
+var LINK_WATER = "#FEFEFE";
 var WHITE = "#FFFFFF";
 var SOLITUDE_WHITE = "#EBEDF1";
 var SEASHELL_WHITE = "#F1F1F1";
@@ -4999,6 +4999,7 @@ var MARINER_BLUE = "#2E75D2";
 var CURIOUS_BLUE = "#27A9E1";
 var SELAGO_BLUE = "#F2F8FD";
 var ONAHAU_BLUE = "#D1ECFF";
+var MOON_RAKER = "#C4CEF4";
 var PICKLED_BLUE = "#2C3E50";
 var CERULEAN_BLUE = "#0D8DC4";
 var FOAM_BLUE = "#EFF4FD";
@@ -5095,6 +5096,7 @@ var colors = /*#__PURE__*/Object.freeze({
   BLACK: BLACK,
   TRANSPARENT: TRANSPARENT,
   WHITE: WHITE,
+  LINK_WATER: LINK_WATER,
   SOLITUDE_WHITE: SOLITUDE_WHITE,
   SEASHELL_WHITE: SEASHELL_WHITE,
   ALABASTER_WHITE: ALABASTER_WHITE,
@@ -5132,6 +5134,7 @@ var colors = /*#__PURE__*/Object.freeze({
   CURIOUS_BLUE: CURIOUS_BLUE,
   SELAGO_BLUE: SELAGO_BLUE,
   ONAHAU_BLUE: ONAHAU_BLUE,
+  MOON_RAKER: MOON_RAKER,
   PICKLED_BLUE: PICKLED_BLUE,
   CERULEAN_BLUE: CERULEAN_BLUE,
   FOAM_BLUE: FOAM_BLUE,
@@ -17666,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$labeledBy = _ref.labeledBy,
+      labeledBy = _ref$labeledBy === void 0 ? "" : _ref$labeledBy;
   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-labeledBy": labeledBy
   }, /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -18094,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$labeledBy = _ref.labeledBy,
+      labeledBy = _ref$labeledBy === void 0 ? "" : _ref$labeledBy;
   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-labelledby": labeledBy
   }, /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -19759,9 +19768,9 @@ var fontFamily$2 = {
   primary: "Public Sans",
   secondary: "Open Sans"
 };
-var hoverColor$2 = "#116285";
-var activeColor$3 = "#0E506D";
-var externalLinkColor = "#15749D";
+var hoverColor$2 = SAPPHIRE_BLUE;
+var activeColor$3 = PEACOCK_BLUE;
+var externalLinkColor = MATISSE_BLUE;
 var fallbackValues$a = {
   fontFamily: fontFamily$2,
   hoverColor: hoverColor$2,
@@ -42827,78 +42836,99 @@ var MISC_BILL_ICON = "MISC_SINGLE_BILL";
 var iconsMap = (_iconsMap = {}, _defineProperty(_iconsMap, ACCOUNTS_GENERIC_ICON, AccountGenericIcon), _defineProperty(_iconsMap, ACCOUNTS_CONSTRUCTION_ICON, AccountConstructionIcon), _defineProperty(_iconsMap, ACCOUNTS_HEALTH_ICON, AccountMedicalIcon), _defineProperty(_iconsMap, ACCOUNTS_DENTAL_ICON, AccountDentalIcon), _defineProperty(_iconsMap, ACCOUNTS_UTILITY_ELECTRIC_ICON, AccountElectricIcon), _defineProperty(_iconsMap, ACCOUNTS_UTILITY_GARBAGE_ICON, AccountGarbageIcon), _defineProperty(_iconsMap, ACCOUNTS_UTILITY_GAS_ICON, AccountGasIcon), _defineProperty(_iconsMap, ACCOUNTS_UTILITY_WATER_ICON, AccountWaterIcon), _defineProperty(_iconsMap, PROPERTIES_PERSONAL_ICON, PropertyPersonalIcon), _defineProperty(_iconsMap, PROPERTIES_GARAGE_ICON, PropertyGarageIcon), _defineProperty(_iconsMap, PROPERTIES_BUSINESS_ICON, PropertyBusinessIcon), _defineProperty(_iconsMap, PROPERTIES_STOREFRONT_ICON, PropertyStorefrontIcon), _defineProperty(_iconsMap, PROPERTIES_APARTMENT_ICON, PropertyApartmentIcon), _defineProperty(_iconsMap, PROPERTIES_LAND_ICON, PropertyLandIcon), _defineProperty(_iconsMap, PROPERTIES_CAR_ICON, PropertyCarIcon), _defineProperty(_iconsMap, PROPERTIES_MOTORCYCLE_ICON, PropertyMotorcycleIcon), _defineProperty(_iconsMap, PROPERTIES_COMMERCIAL_AUTO_ICON, PropertyCommercialVehicleIcon), _defineProperty(_iconsMap, MISC_BILL_ICON, AccountBillIcon), _iconsMap);
 
 var background$3 = {
-  "default": "".concat(WHITE)
+  "default": MOON_RAKER
 };
 var color$b = {
-  "default": "".concat(ROYAL_BLUE_VIVID)
+  "default": ROYAL_BLUE_VIVID
 };
 var fallbackValues$I = {
   background: background$3,
   color: color$b
 };
 
-// import ArrowRightIcon from "../../atoms/icons/ArrowRightIcon";
+var Container = styled(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;&:hover,&:active{cursor:pointer;box-shadow:0px 0px 0px 0px rgba(41,42,51,0.1),0px 5px 11px 0px rgba(41,42,51,0.1),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);}&:hover:not(:active){border:1px solid ", ";background-color:", ";}&:active{border:1px solid ", ";}"], MOON_RAKER, LINK_WATER, ROYAL_BLUE_VIVID);
+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;"]);
+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;"]);
+var Footer = styled(Stack).withConfig({
+  displayName: "LinkCardstyled__Footer",
+  componentId: "sc-l5q1h2-3"
+})(["align-items:center;width:100%;"]);
 
 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,
       themeValues = _ref.themeValues,
-      path = _ref.path,
       showLeft = _ref.showLeft,
       leftContent = _ref.leftContent,
       showRight = _ref.showRight,
-      rightContent = _ref.rightContent;
-  var navigate = useNavigate();
-  var activeHoverStyles = "\n    border-radius: 8px;\n    cursor: pointer;\n    border: 1px solid ".concat(themeValues.color, ";\n    background: var(--primary-color-primary-10, #EBEFFB);\n    /* Primitives/New Shadow/3-Pressed-New */\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);\n    .show-on-hover {color: ").concat(themeValues.color, ";}\n  ");
-  return /*#__PURE__*/React.createElement(Box, {
-    background: "#FEFEFE" // --grays-cool-gray-00
-    ,
-    border: "1px solid #C4CEF4;" // --primary-color-primary-30
-    ,
+      rightContent = _ref.rightContent,
+      onClick = _ref.onClick,
+      _ref$extraStyles = _ref.extraStyles,
+      extraStyles = _ref$extraStyles === void 0 ? "" : _ref$extraStyles,
+      _ref$extraHoverStyles = _ref.extraHoverStyles,
+      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;
+
+  return /*#__PURE__*/React.createElement(Container, {
+    border: "1px solid ".concat(themeValues.background, ";"),
     borderRadius: "8px",
     dataQa: "link-card-".concat(title),
     width: "100%",
-    maxWidth: "288px",
-    minWidth: "240px",
+    maxWidth: isMobile ? "100%" : "288px",
+    minWidth: isMobile ? "240px" : "288px",
     minHeight: "141px",
-    padding: "16px 24px",
-    extraStyles: " display: flex; flex-direction: column; align-items: flex-start; gap: 40px; flex-shrink: 0; align-self: stretch;",
-    hoverStyles: activeHoverStyles,
-    activeStyles: activeHoverStyles,
-    onClick: function onClick() {
-      navigate(path);
-    }
+    padding: "24px",
+    extraStyles: extraStyles,
+    hoverStyles: extraHoverStyles,
+    activeStyles: extraActiveStyles,
+    onClick: onClick
   }, /*#__PURE__*/React.createElement(Stack, {
     childGap: 0,
     bottomItem: 3,
+    justify: "space-between",
+    style: {
+      width: "100%"
+    },
     fullHeight: true
   }, /*#__PURE__*/React.createElement(Box, {
-    padding: "1rem 1rem 0 1rem"
-  }, /*#__PURE__*/React.createElement(Heading$1, {
+    padding: 0,
+    width: "100%"
+  }, /*#__PURE__*/React.createElement(Title$2, {
     variant: "h6",
     weight: FONT_WEIGHT_SEMIBOLD,
     color: themeValues.color,
-    margin: 0,
-    extraStyles: "display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; align-self: stretch; overflow: hidden; text-overflow: ellipsis; font-family: Public Sans; font-size: 16px; font-style: normal; font-weight: 600; line-height: 150%;"
+    margin: 0
   }, title)), /*#__PURE__*/React.createElement(Box, {
-    padding: "0 1rem 40px"
-    /* minHeight={"4.25rem"}*/
-
-  }, /*#__PURE__*/React.createElement(Paragraph$1, {
+    padding: "0 0 40px",
+    width: "100%"
+  }, /*#__PURE__*/React.createElement(Subtitle, {
     variant: "pS",
-    color: themeValues.color,
-    extraStyles: "overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; align-self: stretch; /* CB Standard/Desktop/D - P Small - Regular */ font-family: Public Sans; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ letter-spacing: 0.14px;"
+    color: themeValues.color
   }, subtitle)), /*#__PURE__*/React.createElement(Box, {
     background: "transparent",
     borderWidthOverride: "0 0 0 0",
-    padding: "0 1rem 1rem 1rem"
-  }, /*#__PURE__*/React.createElement(Stack, {
+    padding: "0",
+    width: "100%"
+  }, /*#__PURE__*/React.createElement(Footer, {
     direction: "row",
+    childGap: "6px",
     justify: "space-between"
-  }, showLeft && leftContent, showRight && rightContent))));
+  }, showLeft && !leftContent && /*#__PURE__*/React.createElement(Box, null), showLeft && leftContent, showRight && rightContent))));
 };
 
 var LinkCard$1 = themeComponent(LinkCard, "LinkCard", fallbackValues$I, "default");