@thecb/components 11.6.4-beta.0 → 11.6.5-beta.1

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, HTMLAttributes } from 'react';
 
 type Color = string;
 
@@ -67,6 +67,7 @@ declare const ROYAL_BLUE_VIVID: Color;
 declare const ASTRAL_BLUE: Color;
 declare const SAPPHIRE_BLUE: Color;
 declare const PEACOCK_BLUE: Color;
+declare const HAWKES_BLUE: Color;
 
 // GREEN
 declare const FOREST_GREEN: Color;
@@ -98,6 +99,9 @@ declare const FANTASY_RED: Color;
 declare const COSMOS_RED: Color;
 declare const BLUSH_RED: Color;
 
+// PURPLE
+declare const LUCKY_POINT: Color;
+
 declare const ERROR_COLOR: Color;
 declare const ERROR_BACKGROUND_COLOR: Color;
 
@@ -181,6 +185,7 @@ 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_HAWKES_BLUE: typeof HAWKES_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;
@@ -203,6 +208,7 @@ 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_LUCKY_POINT: typeof LUCKY_POINT;
 declare const colors_d_ERROR_COLOR: typeof ERROR_COLOR;
 declare const colors_d_ERROR_BACKGROUND_COLOR: typeof ERROR_BACKGROUND_COLOR;
 declare const colors_d_ALERT_COLORS: typeof ALERT_COLORS;
@@ -261,6 +267,7 @@ declare namespace colors_d {
     colors_d_ASTRAL_BLUE as ASTRAL_BLUE,
     colors_d_SAPPHIRE_BLUE as SAPPHIRE_BLUE,
     colors_d_PEACOCK_BLUE as PEACOCK_BLUE,
+    colors_d_HAWKES_BLUE as HAWKES_BLUE,
     colors_d_FOREST_GREEN as FOREST_GREEN,
     colors_d_MEADOW_GREEN as MEADOW_GREEN,
     colors_d_POLAR_GREEN as POLAR_GREEN,
@@ -283,6 +290,7 @@ declare namespace colors_d {
     colors_d_FANTASY_RED as FANTASY_RED,
     colors_d_COSMOS_RED as COSMOS_RED,
     colors_d_BLUSH_RED as BLUSH_RED,
+    colors_d_LUCKY_POINT as LUCKY_POINT,
     colors_d_ERROR_COLOR as ERROR_COLOR,
     colors_d_ERROR_BACKGROUND_COLOR as ERROR_BACKGROUND_COLOR,
     colors_d_ALERT_COLORS as ALERT_COLORS,
@@ -595,6 +603,25 @@ interface AlertProps {
 declare const Alert: React.FC<Expand<AlertProps> &
   React.HTMLAttributes<HTMLElement>>;
 
+interface BadgeProps {
+  label: string;
+  Icon?: JSX.Element;
+  iconOnLeft?: boolean;
+  variant?:
+    | "info"
+    | "warn"
+    | "primary"
+    | "primaryHeadline"
+    | "secondary"
+    | "secondaryHeadline"
+    | "success"
+    | "disabled";
+  id?: string;
+  extraStyles?: string;
+}
+
+declare const Badge: React.FC<Expand<BadgeProps> & HTMLAttributes<HTMLElement>>;
+
 interface ButtonWithActionProps {
   action?: (event: React.ChangeEvent<HTMLInputElement>) => void;
   disabled?: boolean;
@@ -714,7 +741,7 @@ interface DropdownProps {
 }
 
 declare const Dropdown: React.FC<Expand<DropdownProps> &
-  React.HTMLAttributes<HTMLElement>>;
+  Omit<React.HTMLAttributes<HTMLElement>, "onSelect">>;
 
 type SortOrder = "asc" | "desc" | null;
 interface SortableTableHeadingProps {
@@ -1326,7 +1353,7 @@ interface CollapsibleSectionProps {
   ) => void;
   isMobile?: boolean;
   supportsTouch?: boolean;
-  title?: string;
+  title?: string | JSX.Element;
   customPadding?: string;
   initiallyOpen?: boolean;
   openHeight?: string;
@@ -1341,7 +1368,7 @@ interface CollapsibleSectionProps {
 }
 
 declare const CollapsibleSection: React.FC<Expand<CollapsibleSectionProps> &
-  React.HTMLAttributes<HTMLElement>>;
+  Omit<React.HTMLAttributes<HTMLElement>, "title">>; // ommitting title prop to avoid conflicts with component's title prop
 
 interface CopyableProps {
   content: string;
@@ -1523,5 +1550,5 @@ interface DefaultPageTemplateProps {
 declare const DefaultPageTemplate: React.FC<Expand<DefaultPageTemplateProps> &
   React.HTMLAttributes<HTMLElement>>;
 
-export { AddValidatorAction, Alert, AlertProps, ArrowDownCircleIconSmall, ArrowDownCircleIconSmallProps, ArrowLeftCircleIconMedium, ArrowLeftCircleIconMediumProps, ArrowLeftCircleIconSmall, ArrowLeftCircleIconSmallProps, ArrowRightCircleIconSmall, ArrowRightCircleIconSmallProps, ArrowUpCircleIconSmall, ArrowUpCircleIconSmallProps, BankIconLarge, BankIconLargeProps, Box, BoxProps, ButtonWithAction, ButtonWithActionProps, ButtonWithLink, ButtonWithLinkProps, Card, CardProps, CaretArrowDown, CaretArrowDownProps, CaretArrowUp, CaretArrowUpProps, CashieringImage, Center, CenterProps, ChargebackIconMedium, ChargebackIconMediumProps, ChargebackIconSmall, ChargebackIconSmallProps, ChargebackReversalIconMedium, ChargebackReversalIconMediumProps, ChargebackReversalIconSmall, ChargebackReversalIconSmallProps, ClearAction, CloseIcon, Cluster, ClusterProps, CollapsibleSection, CollapsibleSectionProps, Copyable, CopyableProps, Cover, CoverProps, DefaultPageTemplate, DefaultPageTemplateProps, Dropdown, DropdownProps, DropdownThemeValues, EditableTable, EditableTableProps, ErrorMessageDictionary, ExternalLink, ExternalLinkProps, Field, FieldActionPayload, FieldActions, FooterWithSubfooter, FooterWithSubfooterProps, FormInput, FormInputProps, FormSelect, FormSelectOption, FormSelectProps, FormTextarea, FormTextareaProps, GuidedCheckoutImage, HistoryIconSmall, InternalLink, InternalLinkProps, KebabMenuIcon, KioskImage, Loading, LoadingProps, MultiCartIcon, MultipleSelectFilter, MultipleSelectFilterProps, NavFooter, NavFooterProps, NavHeader, NavHeaderProps, NavTabs, NavTabsProps, Paragraph, ParagraphProps, PaydotImage, Popover, PopoverProps, PopupMenu, PopupMenuProps, ProfileImage, RadioGroup, RadioGroupProps, ReduxAction, RefundIconMedium, RefundIconMediumProps, RefundIconSmall, RefundIconSmallProps, RemoveValidatorAction, RevenueManagementImage, Search, SearchProps, SearchableSelect, SearchableSelectOption, SearchableSelectProps, SetAction, SortOrder, SortableTableHeading, SortableTableHeadingProps, 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, ToastNotification, ToastNotificationProps, ToastVariants, TrashIconV2, ValidatorFn, XCircleIconMedium, XCircleIconMediumProps, XCircleIconSmall, XCircleIconSmallProps, index_d as constants, index as hooks };
+export { AddValidatorAction, Alert, AlertProps, ArrowDownCircleIconSmall, ArrowDownCircleIconSmallProps, ArrowLeftCircleIconMedium, ArrowLeftCircleIconMediumProps, ArrowLeftCircleIconSmall, ArrowLeftCircleIconSmallProps, ArrowRightCircleIconSmall, ArrowRightCircleIconSmallProps, ArrowUpCircleIconSmall, ArrowUpCircleIconSmallProps, Badge, BadgeProps, BankIconLarge, BankIconLargeProps, Box, BoxProps, ButtonWithAction, ButtonWithActionProps, ButtonWithLink, ButtonWithLinkProps, Card, CardProps, CaretArrowDown, CaretArrowDownProps, CaretArrowUp, CaretArrowUpProps, CashieringImage, Center, CenterProps, ChargebackIconMedium, ChargebackIconMediumProps, ChargebackIconSmall, ChargebackIconSmallProps, ChargebackReversalIconMedium, ChargebackReversalIconMediumProps, ChargebackReversalIconSmall, ChargebackReversalIconSmallProps, ClearAction, CloseIcon, Cluster, ClusterProps, CollapsibleSection, CollapsibleSectionProps, Copyable, CopyableProps, Cover, CoverProps, DefaultPageTemplate, DefaultPageTemplateProps, Dropdown, DropdownProps, DropdownThemeValues, EditableTable, EditableTableProps, ErrorMessageDictionary, ExternalLink, ExternalLinkProps, Field, FieldActionPayload, FieldActions, FooterWithSubfooter, FooterWithSubfooterProps, FormInput, FormInputProps, FormSelect, FormSelectOption, FormSelectProps, FormTextarea, FormTextareaProps, GuidedCheckoutImage, HistoryIconSmall, InternalLink, InternalLinkProps, KebabMenuIcon, KioskImage, Loading, LoadingProps, MultiCartIcon, MultipleSelectFilter, MultipleSelectFilterProps, NavFooter, NavFooterProps, NavHeader, NavHeaderProps, NavTabs, NavTabsProps, Paragraph, ParagraphProps, PaydotImage, Popover, PopoverProps, PopupMenu, PopupMenuProps, ProfileImage, RadioGroup, RadioGroupProps, ReduxAction, RefundIconMedium, RefundIconMediumProps, RefundIconSmall, RefundIconSmallProps, RemoveValidatorAction, RevenueManagementImage, Search, SearchProps, SearchableSelect, SearchableSelectOption, SearchableSelectProps, SetAction, SortOrder, SortableTableHeading, SortableTableHeadingProps, 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, ToastNotification, ToastNotificationProps, ToastVariants, TrashIconV2, ValidatorFn, XCircleIconMedium, XCircleIconMediumProps, XCircleIconSmall, XCircleIconSmallProps, index_d as constants, index as hooks };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.esm.js

@@ -348,6 +348,8 @@ var BORDER_RADIUS = {
 };
 var BORDER_THIN = "1px";
 var FONT_SIZE = {
+  XXS: "0.625rem",
+  // 10px
   XS: "0.750rem",
   // 12px
   SM: "0.875rem",
@@ -11720,14 +11722,15 @@ var index = /*#__PURE__*/Object.freeze({
 
 var WHITE$1 = WHITE,
   TRANSPARENT$1 = TRANSPARENT,
-  SAPPHIRE_BLUE$1 = SAPPHIRE_BLUE,
   PEACOCK_BLUE$1 = PEACOCK_BLUE,
   MANATEE_GREY$1 = MANATEE_GREY,
-  MATISSE_BLUE$1 = MATISSE_BLUE,
+  LUCKY_POINT$1 = LUCKY_POINT,
   HINT_GREEN$1 = HINT_GREEN,
   SEA_GREEN$1 = SEA_GREEN,
   RASPBERRY$1 = RASPBERRY,
-  ERROR_COLOR$1 = ERROR_COLOR;
+  ERROR_COLOR$1 = ERROR_COLOR,
+  LUCKY_POINT_DARK$1 = LUCKY_POINT_DARK,
+  HAWKES_BLUE$1 = HAWKES_BLUE;
 var LINK_TEXT_DECORATION$1 = LINK_TEXT_DECORATION;
 var disabledBorderColor = {
   primary: MANATEE_GREY$1,
@@ -11795,13 +11798,13 @@ var padding = {
 };
 var color$2 = {
   primary: WHITE$1,
-  secondary: MATISSE_BLUE$1,
-  back: MATISSE_BLUE$1,
+  secondary: LUCKY_POINT$1,
+  back: LUCKY_POINT$1,
   smallPrimary: WHITE$1,
-  smallSecondary: MATISSE_BLUE$1,
-  smallGhost: MATISSE_BLUE$1,
-  ghost: MATISSE_BLUE$1,
-  tertiary: MATISSE_BLUE$1,
+  smallSecondary: LUCKY_POINT$1,
+  smallGhost: LUCKY_POINT$1,
+  ghost: LUCKY_POINT$1,
+  tertiary: LUCKY_POINT$1,
   danger: WHITE$1,
   dangerSecondary: ERROR_COLOR$1,
   whitePrimary: WHITE$1,
@@ -11890,10 +11893,10 @@ var textDecoration = {
   greenSecondary: "none"
 };
 var backgroundColor = {
-  primary: MATISSE_BLUE$1,
+  primary: LUCKY_POINT$1,
   secondary: TRANSPARENT$1,
   back: TRANSPARENT$1,
-  smallPrimary: MATISSE_BLUE$1,
+  smallPrimary: LUCKY_POINT$1,
   smallSecondary: TRANSPARENT$1,
   smallGhost: TRANSPARENT$1,
   ghost: TRANSPARENT$1,
@@ -11906,11 +11909,11 @@ var backgroundColor = {
   greenSecondary: TRANSPARENT$1
 };
 var border = {
-  primary: "2px solid " + MATISSE_BLUE$1,
-  secondary: "2px solid " + MATISSE_BLUE$1,
-  back: "2px solid " + MATISSE_BLUE$1,
-  smallPrimary: "2px solid " + MATISSE_BLUE$1,
-  smallSecondary: "2px solid " + MATISSE_BLUE$1,
+  primary: "2px solid " + LUCKY_POINT$1,
+  secondary: "2px solid " + LUCKY_POINT$1,
+  back: "2px solid " + LUCKY_POINT$1,
+  smallPrimary: "2px solid " + LUCKY_POINT$1,
+  smallSecondary: "2px solid " + LUCKY_POINT$1,
   smallGhost: "none",
   ghost: "none",
   tertiary: "none",
@@ -11922,11 +11925,11 @@ var border = {
   greenSecondary: "2px solid " + SEA_GREEN$1
 };
 var hoverBackgroundColor = {
-  primary: SAPPHIRE_BLUE$1,
-  secondary: "#DBEAF0",
+  primary: LUCKY_POINT_DARK$1,
+  secondary: HAWKES_BLUE$1,
   back: TRANSPARENT$1,
-  smallPrimary: SAPPHIRE_BLUE$1,
-  smallSecondary: "#DBEAF0",
+  smallPrimary: LUCKY_POINT_DARK$1,
+  smallSecondary: HAWKES_BLUE$1,
   smallGhost: TRANSPARENT$1,
   ghost: TRANSPARENT$1,
   tertiary: TRANSPARENT$1,
@@ -11938,11 +11941,11 @@ var hoverBackgroundColor = {
   greenSecondary: HINT_GREEN$1
 };
 var hoverBorderColor = {
-  primary: SAPPHIRE_BLUE$1,
-  secondary: MATISSE_BLUE$1,
+  primary: LUCKY_POINT_DARK$1,
+  secondary: LUCKY_POINT$1,
   back: "#DCEAF1",
-  smallPrimary: SAPPHIRE_BLUE$1,
-  smallSecondary: MATISSE_BLUE$1,
+  smallPrimary: LUCKY_POINT_DARK$1,
+  smallSecondary: LUCKY_POINT$1,
   smallGhost: TRANSPARENT$1,
   ghost: TRANSPARENT$1,
   tertiary: TRANSPARENT$1,
@@ -11955,13 +11958,13 @@ var hoverBorderColor = {
 };
 var hoverColor = {
   primary: WHITE$1,
-  secondary: SAPPHIRE_BLUE$1,
-  back: SAPPHIRE_BLUE$1,
+  secondary: LUCKY_POINT$1,
+  back: LUCKY_POINT$1,
   smallPrimary: WHITE$1,
-  smallSecondary: SAPPHIRE_BLUE$1,
-  smallGhost: SAPPHIRE_BLUE$1,
-  ghost: SAPPHIRE_BLUE$1,
-  tertiary: SAPPHIRE_BLUE$1,
+  smallSecondary: LUCKY_POINT$1,
+  smallGhost: LUCKY_POINT$1,
+  ghost: LUCKY_POINT$1,
+  tertiary: LUCKY_POINT$1,
   danger: WHITE$1,
   dangerSecondary: "#B10541",
   whitePrimary: WHITE$1,
@@ -11970,11 +11973,11 @@ var hoverColor = {
   greenSecondary: SEA_GREEN$1
 };
 var activeBackgroundColor = {
-  primary: PEACOCK_BLUE$1,
-  secondary: "#B8D5E1",
+  primary: LUCKY_POINT_DARK$1,
+  secondary: adjustHexColor(HAWKES_BLUE$1, 10, "darken"),
   back: TRANSPARENT$1,
-  smallPrimary: PEACOCK_BLUE$1,
-  smallSecondary: "#B8D5E1",
+  smallPrimary: LUCKY_POINT_DARK$1,
+  smallSecondary: adjustHexColor(HAWKES_BLUE$1, 10, "darken"),
   smallGhost: TRANSPARENT$1,
   ghost: TRANSPARENT$1,
   tertiary: TRANSPARENT$1,
@@ -11986,11 +11989,11 @@ var activeBackgroundColor = {
   greenSecondary: adjustHexColor(HINT_GREEN$1, 5, "darken")
 };
 var activeBorderColor = {
-  primary: PEACOCK_BLUE$1,
-  secondary: MATISSE_BLUE$1,
+  primary: adjustHexColor(LUCKY_POINT_DARK$1, 10, "darken"),
+  secondary: LUCKY_POINT$1,
   back: PEACOCK_BLUE$1,
-  smallPrimary: PEACOCK_BLUE$1,
-  smallSecondary: MATISSE_BLUE$1,
+  smallPrimary: adjustHexColor(LUCKY_POINT_DARK$1, 10, "darken"),
+  smallSecondary: LUCKY_POINT$1,
   smallGhost: TRANSPARENT$1,
   ghost: TRANSPARENT$1,
   tertiary: TRANSPARENT$1,
@@ -12003,7 +12006,7 @@ var activeBorderColor = {
 };
 var activeColor = {
   primary: WHITE$1,
-  secondary: MATISSE_BLUE$1,
+  secondary: LUCKY_POINT$1,
   back: PEACOCK_BLUE$1,
   smallPrimary: WHITE$1,
   smallSecondary: PEACOCK_BLUE$1,
@@ -16189,7 +16192,7 @@ var PeriscopeFailedIcon = function PeriscopeFailedIcon() {
   }, /*#__PURE__*/React__default.createElement("g", {
     transform: "translate(288 64)"
   }, /*#__PURE__*/React__default.createElement("path", {
-    fill: "#15749D",
+    fill: "#281978",
     fillOpacity: "0.3",
     d: "M302.247 310.746c36.612 0 66.292 6.549 66.292 14.627S338.86 340 302.247 340c-36.613 0-66.292-6.55-66.292-14.627 0-8.078 29.68-14.627 66.292-14.627zM65.904 208.318c6.071 0 11.057 4.655 11.608 10.6a6.983 6.983 0 014.09-1.321c3.885 0 7.034 3.159 7.034 7.055 0 3.818-3.022 6.926-6.798 7.051l-.237.004H49.756c-4.548 0-8.234-3.696-8.234-8.256 0-4.56 3.686-8.257 8.234-8.257 1.848 0 3.549.618 4.923 1.65 1.378-4.919 5.88-8.526 11.225-8.526zm195.894-57.546c16.134 0 29.213 13.097 29.213 29.254 0 16.157-13.08 29.254-29.213 29.254-16.134 0-29.214-13.097-29.214-29.254 0-16.157 13.08-29.254 29.214-29.254zm80.899 0c16.134 0 29.213 13.097 29.213 29.254 0 16.157-13.08 29.254-29.213 29.254-16.135 0-29.214-13.097-29.214-29.254 0-16.157 13.08-29.254 29.214-29.254zm-80.899 22.503c-5.514 0-10.317 3.673-12.173 9.018a3.377 3.377 0 002.077 4.297 3.37 3.37 0 004.29-2.08l.16-.42c1.027-2.474 3.233-4.064 5.646-4.064 2.547 0 4.863 1.771 5.805 4.484l.12.302a3.37 3.37 0 004.17 1.778 3.377 3.377 0 002.077-4.297c-1.855-5.345-6.658-9.018-12.172-9.018zm80.9 0c-5.515 0-10.318 3.673-12.174 9.018a3.377 3.377 0 002.077 4.297 3.37 3.37 0 004.29-2.08l.16-.42c1.027-2.474 3.233-4.064 5.646-4.064 2.547 0 4.863 1.771 5.805 4.484l.12.302a3.37 3.37 0 004.17 1.778 3.377 3.377 0 002.077-4.297c-1.855-5.345-6.659-9.018-12.172-9.018zM519.99 12.426c12.578 0 22.908 9.642 24.048 21.958a14.473 14.473 0 018.471-2.737c8.049 0 14.575 6.544 14.575 14.617 0 7.966-6.358 14.445-14.262 14.612l-.313.003H486.54c-9.42 0-17.057-7.658-17.057-17.106 0-9.446 7.637-17.104 17.057-17.104 3.83 0 7.352 1.281 10.2 3.418 2.855-10.189 12.179-17.66 23.252-17.66zM170.591 0c6.61 0 12.239 4.15 14.476 9.99a6.571 6.571 0 011.792-.252c2.114 0 3.994.996 5.208 2.543a9.767 9.767 0 014.028-.872c5.431 0 9.833 4.414 9.833 9.86 0 5.354-4.254 9.712-9.557 9.858l-.276.004h-42.442c-5.43 0-9.833-4.415-9.833-9.861 0-5.447 4.403-9.861 9.833-9.861.666 0 1.315.068 1.942.194C157.345 4.93 163.386 0 170.59 0z"
   }), /*#__PURE__*/React__default.createElement("path", {
@@ -16207,7 +16210,7 @@ var PeriscopeFailedIcon = function PeriscopeFailedIcon() {
     filter: "url(#periscope-failed-filter-2)",
     xlinkHref: "#periscope-failed-path-1"
   }), /*#__PURE__*/React__default.createElement("use", {
-    fill: "#15749D",
+    fill: "#281978",
     xlinkHref: "#periscope-failed-path-1"
   })), /*#__PURE__*/React__default.createElement("g", {
     transform: "translate(0 96.764)"
@@ -19239,7 +19242,7 @@ var AlertInfoIcon = function AlertInfoIcon() {
     xlinkHref: "#path-1"
   })), /*#__PURE__*/React__default.createElement("use", {
     id: "background-2",
-    fill: "#15749d",
+    fill: "#281978",
     fillRule: "nonzero",
     xlinkHref: "#path-1"
   })))));
@@ -19390,13 +19393,13 @@ var AlertIcons = {
 };
 
 var background = {
-  info: "".concat(INFO_BLUE),
+  info: "".concat(HAWKES_BLUE),
   warn: "".concat(APRICOT_ORANGE),
   error: "".concat(BLUSH_RED),
   success: "".concat(HINT_GREEN)
 };
 var border$1 = {
-  info: "".concat(MATISSE_BLUE),
+  info: "".concat(LUCKY_POINT),
   warn: "".concat(ZEST_ORANGE),
   error: "".concat(RAZZMATAZZ_RED),
   success: "".concat(EMERALD_GREEN)
@@ -19715,6 +19718,9 @@ var background$1 = {
   info: "".concat(INFO_BLUE),
   warn: "".concat(HALF_COLONIAL_WHITE),
   primary: "".concat(CORNFLOWER_BLUE),
+  primaryHeadline: "".concat(CORNFLOWER_BLUE),
+  secondary: "".concat(ROYAL_BLUE_VIVID),
+  secondaryHeadline: "".concat(ROYAL_BLUE_VIVID),
   success: "".concat(HINT_GREEN),
   disabled: "".concat(GRECIAN_GREY)
 };
@@ -19722,12 +19728,48 @@ var color$5 = {
   info: "".concat(MATISSE_BLUE),
   warn: "".concat(ZEST_ORANGE),
   primary: "".concat(ROYAL_BLUE_VIVID),
+  primaryHeadline: "".concat(ROYAL_BLUE_VIVID),
+  secondary: "".concat(CORNFLOWER_BLUE),
+  secondaryHeadline: "".concat(CORNFLOWER_BLUE),
   success: "".concat(SEA_GREEN),
   disabled: "".concat(MANATEE_GREY)
 };
+var fontWeight$1 = {
+  info: FONT_WEIGHT_REGULAR,
+  warn: FONT_WEIGHT_REGULAR,
+  primary: FONT_WEIGHT_REGULAR,
+  primaryHeadline: FONT_WEIGHT_SEMIBOLD,
+  secondary: FONT_WEIGHT_REGULAR,
+  secondaryHeadline: FONT_WEIGHT_SEMIBOLD,
+  success: FONT_WEIGHT_REGULAR,
+  disabled: FONT_WEIGHT_REGULAR
+};
+var fontSizeMobile = {
+  info: fallbackValues.fontSize.pXXS,
+  warn: fallbackValues.fontSize.pXXS,
+  primary: fallbackValues.fontSize.pXXS,
+  primaryHeadline: fallbackValues.fontSize.pXS,
+  secondary: fallbackValues.fontSize.pXXS,
+  secondaryHeadline: fallbackValues.fontSize.pXS,
+  success: fallbackValues.fontSize.pXXS,
+  disabled: fallbackValues.fontSize.pXXS
+};
+var fontSizeDesktop = {
+  info: fallbackValues.fontSize.pXS,
+  warn: fallbackValues.fontSize.pXS,
+  primary: fallbackValues.fontSize.pXS,
+  primaryHeadline: fallbackValues.fontSize.pS,
+  secondary: fallbackValues.fontSize.pXS,
+  secondaryHeadline: fallbackValues.fontSize.pS,
+  success: fallbackValues.fontSize.pXS,
+  disabled: fallbackValues.fontSize.pXS
+};
 var fallbackValues$7 = {
   background: background$1,
-  color: color$5
+  color: color$5,
+  fontWeight: fontWeight$1,
+  fontSizeMobile: fontSizeMobile,
+  fontSizeDesktop: fontSizeDesktop
 };
 
 var StyledBadgeContainer = styled(Box).withConfig({
@@ -19737,22 +19779,31 @@ var StyledBadgeContainer = styled(Box).withConfig({
 var StyledBadge = styled(Text$1).withConfig({
   displayName: "Badge__StyledBadge",
   componentId: "sc-1g438j-1"
-})(["font-family:\"Public Sans\",sans-serif;font-size:10px;font-style:normal;font-weight:400;line-height:150%;letter-spacing:0.2px;white-space:nowrap;@media screen and (min-width:1049px){font-size:12px;line-height:150%;letter-spacing:0.24px;}"]);
+})(["line-height:150%;letter-spacing:", ";white-space:nowrap;"], function (props) {
+  return props.isMobile ? "0.2px" : "0.24px";
+});
 var Badge = function Badge(_ref) {
   var label = _ref.label,
     Icon = _ref.Icon,
     themeValues = _ref.themeValues,
     _ref$iconOnLeft = _ref.iconOnLeft,
     iconOnLeft = _ref$iconOnLeft === void 0 ? true : _ref$iconOnLeft,
-    id = _ref.id;
+    id = _ref.id,
+    extraStyles = _ref.extraStyles;
+  var _useContext = useContext(ThemeContext),
+    isMobile = _useContext.isMobile;
   return /*#__PURE__*/React__default.createElement(StyledBadgeContainer, {
     background: themeValues.background,
-    id: id
+    id: id,
+    extraStyles: extraStyles
   }, iconOnLeft && Icon && /*#__PURE__*/React__default.createElement(Icon, {
     color: themeValues.color,
     fill: themeValues.color
   }), /*#__PURE__*/React__default.createElement(StyledBadge, {
-    color: themeValues.color
+    color: themeValues.color,
+    weight: themeValues.fontWeight,
+    fontSize: isMobile ? themeValues.fontSizeMobile : themeValues.fontSizeDesktop,
+    isMobile: isMobile
   }, label), !iconOnLeft && Icon && /*#__PURE__*/React__default.createElement(Icon, {
     color: themeValues.color,
     fill: themeValues.color
@@ -21128,7 +21179,7 @@ var BoxWithShadow = function BoxWithShadow(_ref) {
 var BoxWithShadow$1 = themeComponent(BoxWithShadow, "BoxWithShadow", fallbackValues$8);
 
 // import theme from "styled-theming";
-var MATISSE_BLUE$2 = MATISSE_BLUE,
+var MATISSE_BLUE$1 = MATISSE_BLUE,
   STORM_GREY$1 = STORM_GREY;
 var LINK_TEXT_DECORATION$2 = LINK_TEXT_DECORATION;
 
@@ -21137,12 +21188,12 @@ var LINK_TEXT_DECORATION$2 = LINK_TEXT_DECORATION;
   for colors/values that should be used here instead
 */
 
-var color$6 = "".concat(MATISSE_BLUE$2);
+var color$6 = "".concat(MATISSE_BLUE$1);
 var activeColor$2 = "".concat(STORM_GREY$1);
 var activeBreadcrumbColor = "".concat(STORM_GREY$1);
 var fontSize$2 = "0.875rem";
 var lineHeight = "1.25rem";
-var fontWeight$1 = "400";
+var fontWeight$2 = "400";
 var margin = "0.5rem";
 var hover = "text-decoration: ".concat(LINK_TEXT_DECORATION$2, ";");
 var fallbackValues$9 = {
@@ -21151,7 +21202,7 @@ var fallbackValues$9 = {
   activeBreadcrumbColor: activeBreadcrumbColor,
   fontSize: fontSize$2,
   lineHeight: lineHeight,
-  fontWeight: fontWeight$1,
+  fontWeight: fontWeight$2,
   margin: margin,
   hover: hover
 };
@@ -23645,9 +23696,9 @@ exportTypedArrayMethod$1('at', function at(index) {
   return (k < 0 || k >= len) ? undefined : O[k];
 });
 
-var selectedColor = "".concat(MATISSE_BLUE);
-var hoverColor$3 = "".concat(HOVER_LIGHT_BLUE);
-var focusColor = "".concat(MATISSE_BLUE_DARK);
+var selectedColor = "".concat(LUCKY_POINT);
+var hoverColor$3 = "".concat(HAWKES_BLUE);
+var focusColor = "".concat(LUCKY_POINT_DARK);
 var fallbackValues$i = {
   selectedColor: selectedColor,
   hoverColor: hoverColor$3,
@@ -24069,15 +24120,15 @@ var SelectField = styled.select.withConfig({
 }, function (_ref3) {
   var themeValues = _ref3.themeValues;
   return themeValues.color && themeValues.color;
-}, MATISSE_BLUE);
+}, LUCKY_POINT);
 var SelectOption = styled.option.withConfig({
   displayName: "FormSelectstyled__SelectOption",
   componentId: "sc-hkrqrv-2"
 })([""]);
 
 var linkColor$1 = {
-  "default": "".concat(MATISSE_BLUE),
-  disabled: "".concat(MATISSE_BLUE)
+  "default": "".concat(LUCKY_POINT),
+  disabled: "".concat(LUCKY_POINT)
 };
 var formBackgroundColor = {
   "default": "".concat(WHITE),
@@ -24113,12 +24164,12 @@ var errorFontSize = {
   "default": "0.75rem",
   disabled: "0.75rem"
 };
-var fontWeight$2 = {
+var fontWeight$3 = {
   "default": "".concat(FONT_WEIGHT_REGULAR),
   disabled: "".concat(FONT_WEIGHT_REGULAR)
 };
 var hoverFocusStyles = {
-  "default": "color: #0E506D; outline: none; text-decoration: underline;  ",
+  "default": "color: ".concat(LUCKY_POINT_DARK, "; outline: none; text-decoration: underline;  "),
   disabled: "color: #6D717E;"
 };
 var fallbackValues$j = {
@@ -24131,7 +24182,7 @@ var fallbackValues$j = {
   lineHeight: lineHeight$1,
   fontSize: fontSize$4,
   errorFontSize: errorFontSize,
-  fontWeight: fontWeight$2,
+  fontWeight: fontWeight$3,
   hoverFocusStyles: hoverFocusStyles
 };
 
@@ -25857,7 +25908,7 @@ var errorFontSize$1 = {
   "default": "0.75rem",
   disabled: "0.75rem"
 };
-var fontWeight$3 = {
+var fontWeight$4 = {
   "default": "".concat(FONT_WEIGHT_REGULAR),
   disabled: "".concat(FONT_WEIGHT_REGULAR)
 };
@@ -25878,7 +25929,7 @@ var fallbackValues$n = {
   lineHeight: lineHeight$2,
   fontSize: fontSize$6,
   errorFontSize: errorFontSize$1,
-  fontWeight: fontWeight$3,
+  fontWeight: fontWeight$4,
   hoverFocusStyles: hoverFocusStyles$1,
   formFooterPanel: formFooterPanel
 };
@@ -26842,7 +26893,7 @@ var Jumbo = function Jumbo(_ref) {
 };
 var Jumbo$1 = withWindowSize(Jumbo);
 
-var fontWeight$4 = {
+var fontWeight$5 = {
   // v1 variants
   "default": "600",
   pS: "600",
@@ -26859,7 +26910,7 @@ var fontWeight$4 = {
   large: "700" // fontsize Title small
 };
 var fallbackValues$t = {
-  fontWeight: fontWeight$4
+  fontWeight: fontWeight$5
 };
 
 var LabeledAmountV1 = function LabeledAmountV1(_ref) {
@@ -38937,7 +38988,7 @@ var fontSize$9 = {
   largeTitle: "1.75rem",
   small: "1.25rem"
 };
-var fontWeight$5 = {
+var fontWeight$6 = {
   "default": "600",
   largeTitle: "700",
   small: "600"
@@ -38984,7 +39035,7 @@ var backgroundColor$7 = {
 };
 var fallbackValues$G = {
   fontSize: fontSize$9,
-  fontWeight: fontWeight$5,
+  fontWeight: fontWeight$6,
   fontColor: fontColor,
   lineHeight: lineHeight$3,
   textAlign: textAlign,
@@ -47625,7 +47676,7 @@ var fontSize$a = {
 var lineHeight$4 = {
   "default": "1.5rem"
 };
-var fontWeight$6 = {
+var fontWeight$7 = {
   "default": FONT_WEIGHT_REGULAR
 };
 var modalLinkHoverFocus = {
@@ -47638,7 +47689,7 @@ var fallbackValues$R = {
   linkColor: linkColor$4,
   fontSize: fontSize$a,
   lineHeight: lineHeight$4,
-  fontWeight: fontWeight$6,
+  fontWeight: fontWeight$7,
   modalLinkHoverFocus: modalLinkHoverFocus,
   linkTextDecoration: linkTextDecoration
 };
@@ -47720,7 +47771,7 @@ var lineHeight$5 = {
   "default": "1.5rem",
   footer: "1.25rem"
 };
-var fontWeight$7 = {
+var fontWeight$8 = {
   "default": FONT_WEIGHT_REGULAR,
   footer: FONT_WEIGHT_SEMIBOLD
 };
@@ -47739,7 +47790,7 @@ var fallbackValues$S = {
   border: border$3,
   fontSize: fontSize$b,
   lineHeight: lineHeight$5,
-  fontWeight: fontWeight$7,
+  fontWeight: fontWeight$8,
   modalLinkHoverFocus: modalLinkHoverFocus$1,
   modalLinkTextDecoration: modalLinkTextDecoration
 };
@@ -49596,13 +49647,13 @@ var ToastNotification = function ToastNotification(_ref) {
   }));
 };
 
-var fontWeight$8 = "600";
+var fontWeight$9 = "600";
 var fontColor$1 = WHITE;
 var textAlign$1 = "left";
 var headerBackgroundColor$1 = BRIGHT_GREY;
 var imageBackgroundColor$1 = MATISSE_BLUE;
 var fallbackValues$Z = {
-  fontWeight: fontWeight$8,
+  fontWeight: fontWeight$9,
   fontColor: fontColor$1,
   textAlign: textAlign$1,
   headerBackgroundColor: headerBackgroundColor$1,