@thecb/components 11.6.3-beta.0 → 11.6.3-beta.1

package/dist/index.d.ts

@@ -599,6 +599,7 @@ 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>>;

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,7 +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)
 };
@@ -19723,13 +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({
@@ -19739,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
@@ -21144,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 = {
@@ -21153,7 +21201,7 @@ var fallbackValues$9 = {
   activeBreadcrumbColor: activeBreadcrumbColor,
   fontSize: fontSize$2,
   lineHeight: lineHeight,
-  fontWeight: fontWeight$1,
+  fontWeight: fontWeight$2,
   margin: margin,
   hover: hover
 };
@@ -24114,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)
 };
@@ -24132,7 +24180,7 @@ var fallbackValues$j = {
   lineHeight: lineHeight$1,
   fontSize: fontSize$4,
   errorFontSize: errorFontSize,
-  fontWeight: fontWeight$2,
+  fontWeight: fontWeight$3,
   hoverFocusStyles: hoverFocusStyles
 };
 
@@ -25858,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)
 };
@@ -25879,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
 };
@@ -26843,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",
@@ -26860,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) {
@@ -38938,7 +38986,7 @@ var fontSize$9 = {
   largeTitle: "1.75rem",
   small: "1.25rem"
 };
-var fontWeight$5 = {
+var fontWeight$6 = {
   "default": "600",
   largeTitle: "700",
   small: "600"
@@ -38985,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,
@@ -47626,7 +47674,7 @@ var fontSize$a = {
 var lineHeight$4 = {
   "default": "1.5rem"
 };
-var fontWeight$6 = {
+var fontWeight$7 = {
   "default": FONT_WEIGHT_REGULAR
 };
 var modalLinkHoverFocus = {
@@ -47639,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
 };
@@ -47721,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
 };
@@ -47740,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
 };
@@ -49597,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,