@thecb/components 11.6.2 → 11.6.3-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;
 
@@ -595,6 +595,15 @@ 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";
+}
+
+declare const Badge: React.FC<Expand<BadgeProps> & HTMLAttributes<HTMLElement>>;
+
 interface ButtonWithActionProps {
   action?: (event: React.ChangeEvent<HTMLInputElement>) => void;
   disabled?: boolean;
@@ -1272,7 +1281,7 @@ interface CollapsibleSectionProps {
   ) => void;
   isMobile?: boolean;
   supportsTouch?: boolean;
-  title?: string;
+  title?: string | JSX.Element;
   customPadding?: string;
   initiallyOpen?: boolean;
   openHeight?: string;
@@ -1469,5 +1478,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, 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, 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",
@@ -19715,6 +19717,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 +19727,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 +19778,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
@@ -21142,7 +21192,7 @@ 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 +21201,7 @@ var fallbackValues$9 = {
   activeBreadcrumbColor: activeBreadcrumbColor,
   fontSize: fontSize$2,
   lineHeight: lineHeight,
-  fontWeight: fontWeight$1,
+  fontWeight: fontWeight$2,
   margin: margin,
   hover: hover
 };
@@ -24112,7 +24162,7 @@ var errorFontSize = {
   "default": "0.75rem",
   disabled: "0.75rem"
 };
-var fontWeight$2 = {
+var fontWeight$3 = {
   "default": "".concat(FONT_WEIGHT_REGULAR),
   disabled: "".concat(FONT_WEIGHT_REGULAR)
 };
@@ -24130,7 +24180,7 @@ var fallbackValues$j = {
   lineHeight: lineHeight$1,
   fontSize: fontSize$4,
   errorFontSize: errorFontSize,
-  fontWeight: fontWeight$2,
+  fontWeight: fontWeight$3,
   hoverFocusStyles: hoverFocusStyles
 };
 
@@ -25856,7 +25906,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)
 };
@@ -25877,7 +25927,7 @@ var fallbackValues$n = {
   lineHeight: lineHeight$2,
   fontSize: fontSize$6,
   errorFontSize: errorFontSize$1,
-  fontWeight: fontWeight$3,
+  fontWeight: fontWeight$4,
   hoverFocusStyles: hoverFocusStyles$1,
   formFooterPanel: formFooterPanel
 };
@@ -26841,7 +26891,7 @@ var Jumbo = function Jumbo(_ref) {
 };
 var Jumbo$1 = withWindowSize(Jumbo);
 
-var fontWeight$4 = {
+var fontWeight$5 = {
   // v1 variants
   "default": "600",
   pS: "600",
@@ -26858,7 +26908,7 @@ var fontWeight$4 = {
   large: "700" // fontsize Title small
 };
 var fallbackValues$t = {
-  fontWeight: fontWeight$4
+  fontWeight: fontWeight$5
 };
 
 var LabeledAmountV1 = function LabeledAmountV1(_ref) {
@@ -38936,7 +38986,7 @@ var fontSize$9 = {
   largeTitle: "1.75rem",
   small: "1.25rem"
 };
-var fontWeight$5 = {
+var fontWeight$6 = {
   "default": "600",
   largeTitle: "700",
   small: "600"
@@ -38983,7 +39033,7 @@ var backgroundColor$7 = {
 };
 var fallbackValues$G = {
   fontSize: fontSize$9,
-  fontWeight: fontWeight$5,
+  fontWeight: fontWeight$6,
   fontColor: fontColor,
   lineHeight: lineHeight$3,
   textAlign: textAlign,
@@ -47624,7 +47674,7 @@ var fontSize$a = {
 var lineHeight$4 = {
   "default": "1.5rem"
 };
-var fontWeight$6 = {
+var fontWeight$7 = {
   "default": FONT_WEIGHT_REGULAR
 };
 var modalLinkHoverFocus = {
@@ -47637,7 +47687,7 @@ var fallbackValues$R = {
   linkColor: linkColor$4,
   fontSize: fontSize$a,
   lineHeight: lineHeight$4,
-  fontWeight: fontWeight$6,
+  fontWeight: fontWeight$7,
   modalLinkHoverFocus: modalLinkHoverFocus,
   linkTextDecoration: linkTextDecoration
 };
@@ -47719,7 +47769,7 @@ var lineHeight$5 = {
   "default": "1.5rem",
   footer: "1.25rem"
 };
-var fontWeight$7 = {
+var fontWeight$8 = {
   "default": FONT_WEIGHT_REGULAR,
   footer: FONT_WEIGHT_SEMIBOLD
 };
@@ -47738,7 +47788,7 @@ var fallbackValues$S = {
   border: border$3,
   fontSize: fontSize$b,
   lineHeight: lineHeight$5,
-  fontWeight: fontWeight$7,
+  fontWeight: fontWeight$8,
   modalLinkHoverFocus: modalLinkHoverFocus$1,
   modalLinkTextDecoration: modalLinkTextDecoration
 };
@@ -49595,13 +49645,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,