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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "11.6.4-beta.0",
+  "version": "11.6.5-beta.1",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

package/src/components/atoms/alert/Alert.theme.js

@@ -1,10 +1,8 @@
 import {
   APRICOT_ORANGE,
-  INFO_BLUE,
   BLUSH_RED,
   HINT_GREEN,
   ZEST_ORANGE,
-  MATISSE_BLUE,
   RAZZMATAZZ_RED,
   EMERALD_GREEN,
   MUSTARD_YELLOW,
@@ -16,18 +14,20 @@ import {
   THUNDERBIRD_RED,
   HAZE_GREEN,
   ZODIAC_BLUE,
-  SCIENCE_BLUE
+  SCIENCE_BLUE,
+  LUCKY_POINT,
+  HAWKES_BLUE
 } from "../../../constants/colors";
 
 const background = {
-  info: `${INFO_BLUE}`,
+  info: `${HAWKES_BLUE}`,
   warn: `${APRICOT_ORANGE}`,
   error: `${BLUSH_RED}`,
   success: `${HINT_GREEN}`
 };
 
 const border = {
-  info: `${MATISSE_BLUE}`,
+  info: `${LUCKY_POINT}`,
   warn: `${ZEST_ORANGE}`,
   error: `${RAZZMATAZZ_RED}`,
   success: `${EMERALD_GREEN}`

package/src/components/atoms/badge/Badge.js

@@ -1,5 +1,5 @@
-import React from "react";
-import styled from "styled-components";
+import React, { useContext } from "react";
+import styled, { ThemeContext } from "styled-components";
 import Box from "../layouts/Box";
 import Text from "../../atoms/text/";
 import { themeComponent } from "../../../util/themeUtils";
@@ -15,31 +15,45 @@ const StyledBadgeContainer = styled(Box)`
 `;
 
 const StyledBadge = styled(Text)`
-  font-family: "Public Sans", sans-serif;
-  font-size: 10px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 150%; /* 15px */
-  letter-spacing: 0.2px;
+  line-height: 150%;
+  letter-spacing: ${props => (props.isMobile ? "0.2px" : "0.24px")};
   white-space: nowrap;
-
-  @media screen and (min-width: 1049px) {
-    font-size: 12px;
-    line-height: 150%; /* 18px */
-    letter-spacing: 0.24px;
-  }
 `;
 
-const Badge = ({ label, Icon, themeValues, iconOnLeft = true, id }) => (
-  <StyledBadgeContainer background={themeValues.background} id={id}>
-    {iconOnLeft && Icon && (
-      <Icon color={themeValues.color} fill={themeValues.color} />
-    )}
-    <StyledBadge color={themeValues.color}>{label}</StyledBadge>
-    {!iconOnLeft && Icon && (
-      <Icon color={themeValues.color} fill={themeValues.color} />
-    )}
-  </StyledBadgeContainer>
-);
+const Badge = ({
+  label,
+  Icon,
+  themeValues,
+  iconOnLeft = true,
+  id,
+  extraStyles
+}) => {
+  const { isMobile } = useContext(ThemeContext);
+
+  return (
+    <StyledBadgeContainer
+      background={themeValues.background}
+      id={id}
+      extraStyles={extraStyles}
+    >
+      {iconOnLeft && Icon && (
+        <Icon color={themeValues.color} fill={themeValues.color} />
+      )}
+      <StyledBadge
+        color={themeValues.color}
+        weight={themeValues.fontWeight}
+        fontSize={
+          isMobile ? themeValues.fontSizeMobile : themeValues.fontSizeDesktop
+        }
+        isMobile={isMobile}
+      >
+        {label}
+      </StyledBadge>
+      {!iconOnLeft && Icon && (
+        <Icon color={themeValues.color} fill={themeValues.color} />
+      )}
+    </StyledBadgeContainer>
+  );
+};
 
 export default themeComponent(Badge, "Badge", fallbackValues, "success");

package/src/components/atoms/badge/Badge.stories.js

@@ -1,9 +1,9 @@
 import React from "react";
 import {
   MANATEE_GREY,
-  MATISSE_BLUE,
   ROYAL_BLUE_VIVID,
-  ZEST_ORANGE
+  ZEST_ORANGE,
+  CORNFLOWER_BLUE
 } from "../../../constants/colors";
 import Badge from "./Badge";
 import { Box, Stack, Cluster } from "../layouts";
@@ -80,12 +80,30 @@ const PrimaryBadge = props => {
     <Badge
       {...props}
       label={"Item in Cart"}
-      Icon={() => MultiCartIcon({ color: ROYAL_BLUE_VIVID })}
+      Icon={() => MultiCartIcon({ iconFill: ROYAL_BLUE_VIVID })}
       variant="primary"
     />
   );
 };
 
+const PrimaryHeadlineBadge = props => {
+  return <Badge {...props} label={"Kiosk"} variant="primaryHeadline" />;
+};
+
+const SecondaryBadge = props => {
+  return (
+    <Badge
+      {...props}
+      label={"Item in Cart"}
+      Icon={() => MultiCartIcon({ iconFill: CORNFLOWER_BLUE })}
+      variant="secondary"
+    />
+  );
+};
+
+const SecondaryHeadlineBadge = props => {
+  return <Badge {...props} label={"Online"} variant="secondaryHeadline" />;
+};
 const InfoBadge = props => {
   return (
     <Badge
@@ -133,6 +151,9 @@ export const Badges = {
             <SuccessBadge {...args} />
             <DisabledBadge {...args} />
             <PrimaryBadge {...args} />
+            <PrimaryHeadlineBadge {...args} />
+            <SecondaryBadge {...args} />
+            <SecondaryHeadlineBadge {...args} />
             <WarnBadge {...args} />
           </Cluster>
           <Cluster justify="flex-start" align="center" childGap="1.5rem">

package/src/components/atoms/badge/Badge.theme.js

@@ -10,11 +10,20 @@ import {
   SEA_GREEN,
   ZEST_ORANGE
 } from "../../../constants/colors";
+import {
+  FONT_SIZE,
+  FONT_WEIGHT_REGULAR,
+  FONT_WEIGHT_SEMIBOLD
+} from "../../../constants/style_constants";
+import { fallbackValues as textTheme } from "../text/Text.theme";
 
 const background = {
   info: `${INFO_BLUE}`,
   warn: `${HALF_COLONIAL_WHITE}`,
   primary: `${CORNFLOWER_BLUE}`,
+  primaryHeadline: `${CORNFLOWER_BLUE}`,
+  secondary: `${ROYAL_BLUE_VIVID}`,
+  secondaryHeadline: `${ROYAL_BLUE_VIVID}`,
   success: `${HINT_GREEN}`,
   disabled: `${GRECIAN_GREY}`
 };
@@ -23,11 +32,50 @@ const color = {
   info: `${MATISSE_BLUE}`,
   warn: `${ZEST_ORANGE}`,
   primary: `${ROYAL_BLUE_VIVID}`,
+  primaryHeadline: `${ROYAL_BLUE_VIVID}`,
+  secondary: `${CORNFLOWER_BLUE}`,
+  secondaryHeadline: `${CORNFLOWER_BLUE}`,
   success: `${SEA_GREEN}`,
   disabled: `${MANATEE_GREY}`
 };
 
+const fontWeight = {
+  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
+};
+
+const fontSizeMobile = {
+  info: textTheme.fontSize.pXXS,
+  warn: textTheme.fontSize.pXXS,
+  primary: textTheme.fontSize.pXXS,
+  primaryHeadline: textTheme.fontSize.pXS,
+  secondary: textTheme.fontSize.pXXS,
+  secondaryHeadline: textTheme.fontSize.pXS,
+  success: textTheme.fontSize.pXXS,
+  disabled: textTheme.fontSize.pXXS
+};
+
+const fontSizeDesktop = {
+  info: textTheme.fontSize.pXS,
+  warn: textTheme.fontSize.pXS,
+  primary: textTheme.fontSize.pXS,
+  primaryHeadline: textTheme.fontSize.pS,
+  secondary: textTheme.fontSize.pXS,
+  secondaryHeadline: textTheme.fontSize.pS,
+  success: textTheme.fontSize.pXS,
+  disabled: textTheme.fontSize.pXS
+};
+
 export const fallbackValues = {
   background,
-  color
+  color,
+  fontWeight,
+  fontSizeMobile,
+  fontSizeDesktop
 };

package/src/components/atoms/badge/index.d.ts

@@ -5,6 +5,17 @@ export interface BadgeProps {
   label: string;
   Icon?: JSX.Element;
   iconOnLeft?: boolean;
+  variant?:
+    | "info"
+    | "warn"
+    | "primary"
+    | "primaryHeadline"
+    | "secondary"
+    | "secondaryHeadline"
+    | "success"
+    | "disabled";
+  id?: string;
+  extraStyles?: string;
 }
 
 export const Badge: React.FC<Expand<BadgeProps> & HTMLAttributes<HTMLElement>>;

package/src/components/atoms/button-with-action/ButtonWithAction.theme.js

@@ -7,11 +7,13 @@ const {
   SAPPHIRE_BLUE,
   PEACOCK_BLUE,
   MANATEE_GREY,
-  MATISSE_BLUE,
+  LUCKY_POINT,
   HINT_GREEN,
   SEA_GREEN,
   RASPBERRY,
-  ERROR_COLOR
+  ERROR_COLOR,
+  LUCKY_POINT_DARK,
+  HAWKES_BLUE
 } = colors;
 
 const { LINK_TEXT_DECORATION } = styleConstants;
@@ -86,13 +88,13 @@ const padding = {
 
 const color = {
   primary: WHITE,
-  secondary: MATISSE_BLUE,
-  back: MATISSE_BLUE,
+  secondary: LUCKY_POINT,
+  back: LUCKY_POINT,
   smallPrimary: WHITE,
-  smallSecondary: MATISSE_BLUE,
-  smallGhost: MATISSE_BLUE,
-  ghost: MATISSE_BLUE,
-  tertiary: MATISSE_BLUE,
+  smallSecondary: LUCKY_POINT,
+  smallGhost: LUCKY_POINT,
+  ghost: LUCKY_POINT,
+  tertiary: LUCKY_POINT,
   danger: WHITE,
   dangerSecondary: ERROR_COLOR,
   whitePrimary: WHITE,
@@ -187,10 +189,10 @@ const textDecoration = {
 };
 
 const backgroundColor = {
-  primary: MATISSE_BLUE,
+  primary: LUCKY_POINT,
   secondary: TRANSPARENT,
   back: TRANSPARENT,
-  smallPrimary: MATISSE_BLUE,
+  smallPrimary: LUCKY_POINT,
   smallSecondary: TRANSPARENT,
   smallGhost: TRANSPARENT,
   ghost: TRANSPARENT,
@@ -204,11 +206,11 @@ const backgroundColor = {
 };
 
 const border = {
-  primary: "2px solid " + MATISSE_BLUE,
-  secondary: "2px solid " + MATISSE_BLUE,
-  back: "2px solid " + MATISSE_BLUE,
-  smallPrimary: "2px solid " + MATISSE_BLUE,
-  smallSecondary: "2px solid " + MATISSE_BLUE,
+  primary: "2px solid " + LUCKY_POINT,
+  secondary: "2px solid " + LUCKY_POINT,
+  back: "2px solid " + LUCKY_POINT,
+  smallPrimary: "2px solid " + LUCKY_POINT,
+  smallSecondary: "2px solid " + LUCKY_POINT,
   smallGhost: "none",
   ghost: "none",
   tertiary: "none",
@@ -221,11 +223,11 @@ const border = {
 };
 
 const hoverBackgroundColor = {
-  primary: SAPPHIRE_BLUE,
-  secondary: "#DBEAF0",
+  primary: LUCKY_POINT_DARK,
+  secondary: HAWKES_BLUE,
   back: TRANSPARENT,
-  smallPrimary: SAPPHIRE_BLUE,
-  smallSecondary: "#DBEAF0",
+  smallPrimary: LUCKY_POINT_DARK,
+  smallSecondary: HAWKES_BLUE,
   smallGhost: TRANSPARENT,
   ghost: TRANSPARENT,
   tertiary: TRANSPARENT,
@@ -238,11 +240,11 @@ const hoverBackgroundColor = {
 };
 
 const hoverBorderColor = {
-  primary: SAPPHIRE_BLUE,
-  secondary: MATISSE_BLUE,
+  primary: LUCKY_POINT_DARK,
+  secondary: LUCKY_POINT,
   back: "#DCEAF1",
-  smallPrimary: SAPPHIRE_BLUE,
-  smallSecondary: MATISSE_BLUE,
+  smallPrimary: LUCKY_POINT_DARK,
+  smallSecondary: LUCKY_POINT,
   smallGhost: TRANSPARENT,
   ghost: TRANSPARENT,
   tertiary: TRANSPARENT,
@@ -256,13 +258,13 @@ const hoverBorderColor = {
 
 const hoverColor = {
   primary: WHITE,
-  secondary: SAPPHIRE_BLUE,
-  back: SAPPHIRE_BLUE,
+  secondary: LUCKY_POINT,
+  back: LUCKY_POINT,
   smallPrimary: WHITE,
-  smallSecondary: SAPPHIRE_BLUE,
-  smallGhost: SAPPHIRE_BLUE,
-  ghost: SAPPHIRE_BLUE,
-  tertiary: SAPPHIRE_BLUE,
+  smallSecondary: LUCKY_POINT,
+  smallGhost: LUCKY_POINT,
+  ghost: LUCKY_POINT,
+  tertiary: LUCKY_POINT,
   danger: WHITE,
   dangerSecondary: "#B10541",
   whitePrimary: WHITE,
@@ -272,11 +274,11 @@ const hoverColor = {
 };
 
 const activeBackgroundColor = {
-  primary: PEACOCK_BLUE,
-  secondary: "#B8D5E1",
+  primary: LUCKY_POINT_DARK,
+  secondary: adjustHexColor(HAWKES_BLUE, 10, "darken"),
   back: TRANSPARENT,
-  smallPrimary: PEACOCK_BLUE,
-  smallSecondary: "#B8D5E1",
+  smallPrimary: LUCKY_POINT_DARK,
+  smallSecondary: adjustHexColor(HAWKES_BLUE, 10, "darken"),
   smallGhost: TRANSPARENT,
   ghost: TRANSPARENT,
   tertiary: TRANSPARENT,
@@ -289,11 +291,11 @@ const activeBackgroundColor = {
 };
 
 const activeBorderColor = {
-  primary: PEACOCK_BLUE,
-  secondary: MATISSE_BLUE,
+  primary: adjustHexColor(LUCKY_POINT_DARK, 10, "darken"),
+  secondary: LUCKY_POINT,
   back: PEACOCK_BLUE,
-  smallPrimary: PEACOCK_BLUE,
-  smallSecondary: MATISSE_BLUE,
+  smallPrimary: adjustHexColor(LUCKY_POINT_DARK, 10, "darken"),
+  smallSecondary: LUCKY_POINT,
   smallGhost: TRANSPARENT,
   ghost: TRANSPARENT,
   tertiary: TRANSPARENT,
@@ -307,7 +309,7 @@ const activeBorderColor = {
 
 const activeColor = {
   primary: WHITE,
-  secondary: MATISSE_BLUE,
+  secondary: LUCKY_POINT,
   back: PEACOCK_BLUE,
   smallPrimary: WHITE,
   smallSecondary: PEACOCK_BLUE,

package/src/components/atoms/dropdown/Dropdown.theme.js

@@ -1,12 +1,12 @@
 import {
-  HOVER_LIGHT_BLUE,
-  MATISSE_BLUE,
-  MATISSE_BLUE_DARK
+  HAWKES_BLUE,
+  LUCKY_POINT,
+  LUCKY_POINT_DARK
 } from "../../../constants/colors";
 
-const selectedColor = `${MATISSE_BLUE}`;
-const hoverColor = `${HOVER_LIGHT_BLUE}`;
-const focusColor = `${MATISSE_BLUE_DARK}`;
+const selectedColor = `${LUCKY_POINT}`;
+const hoverColor = `${HAWKES_BLUE}`;
+const focusColor = `${LUCKY_POINT_DARK}`;
 
 export const fallbackValues = {
   selectedColor,

package/src/components/atoms/dropdown/index.d.ts

@@ -54,6 +54,6 @@ export interface DropdownProps {
 }
 
 export const Dropdown: React.FC<Expand<DropdownProps> &
-  React.HTMLAttributes<HTMLElement>>;
+  Omit<React.HTMLAttributes<HTMLElement>, "onSelect">>;
 
 export default Dropdown;

package/src/components/atoms/form-select/FormSelect.styled.js

@@ -2,7 +2,7 @@ import styled from "styled-components";
 import {
   GHOST_GREY,
   ERROR_COLOR,
-  MATISSE_BLUE
+  LUCKY_POINT
 } from "../../../constants/colors";
 import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
 
@@ -41,7 +41,7 @@ export const SelectField = styled.select`
   box-shadow: none;
 
   &:focus {
-    border: 1px solid ${MATISSE_BLUE};
+    border: 1px solid ${LUCKY_POINT};
   }
 `;
 

package/src/components/atoms/form-select/FormSelect.theme.js

@@ -6,11 +6,14 @@ import {
   MINESHAFT_GREY,
   DUSTY_GREY,
   GREY_CHATEAU,
-  ATHENS_GREY
+  ATHENS_GREY,
+  LUCKY_POINT,
+  LUCKY_POINT_DARK,
+  HAWKES_BLUE
 } from "../../../constants/colors";
 import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
 
-const linkColor = { default: `${MATISSE_BLUE}`, disabled: `${MATISSE_BLUE}` };
+const linkColor = { default: `${LUCKY_POINT}`, disabled: `${LUCKY_POINT}` };
 const formBackgroundColor = {
   default: `${WHITE}`,
   disabled: `${WHITE}`,
@@ -33,7 +36,7 @@ const fontWeight = {
   disabled: `${FONT_WEIGHT_REGULAR}`
 };
 const hoverFocusStyles = {
-  default: `color: #0E506D; outline: none; text-decoration: underline;  `,
+  default: `color: ${LUCKY_POINT_DARK}; outline: none; text-decoration: underline;  `,
   disabled: `color: #6D717E;`
 };
 

package/src/components/atoms/icons/PeriscopeFailedIcon.js

@@ -131,7 +131,7 @@ const PeriscopeFailedIcon = () => {
           <g transform="translate(132 195)">
             <g transform="translate(288 64)">
               <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"
               ></path>
@@ -154,7 +154,7 @@ const PeriscopeFailedIcon = () => {
                   filter="url(#periscope-failed-filter-2)"
                   xlinkHref="#periscope-failed-path-1"
                 ></use>
-                <use fill="#15749D" xlinkHref="#periscope-failed-path-1"></use>
+                <use fill="#281978" xlinkHref="#periscope-failed-path-1"></use>
               </g>
               <g transform="translate(0 96.764)">
                 <g>

package/src/components/atoms/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./alert";
+export * from "./badge";
 export * from "./button-with-action";
 export * from "./button-with-link";
 export * from "./card";

package/src/components/molecules/collapsible-section/index.d.ts

@@ -8,7 +8,7 @@ export interface CollapsibleSectionProps {
   ) => void;
   isMobile?: boolean;
   supportsTouch?: boolean;
-  title?: string;
+  title?: string | JSX.Element;
   customPadding?: string;
   initiallyOpen?: boolean;
   openHeight?: string;
@@ -23,4 +23,4 @@ export interface CollapsibleSectionProps {
 }
 
 export 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

package/src/constants/colors.d.ts

@@ -65,6 +65,7 @@ export const ROYAL_BLUE_VIVID: Color;
 export const ASTRAL_BLUE: Color;
 export const SAPPHIRE_BLUE: Color;
 export const PEACOCK_BLUE: Color;
+export const HAWKES_BLUE: Color;
 
 // GREEN
 export const FOREST_GREEN: Color;
@@ -96,6 +97,9 @@ export const FANTASY_RED: Color;
 export const COSMOS_RED: Color;
 export const BLUSH_RED: Color;
 
+// PURPLE
+export const LUCKY_POINT: Color;
+
 export const ERROR_COLOR: Color;
 export const ERROR_BACKGROUND_COLOR: Color;
 

package/src/constants/style_constants.js

@@ -5,6 +5,7 @@ export const BORDER_RADIUS = {
 };
 export const BORDER_THIN = "1px";
 export const FONT_SIZE = {
+  XXS: "0.625rem", // 10px
   XS: "0.750rem", // 12px
   SM: "0.875rem", // 14px
   MD: "1.000rem", // 16px

package/src/deprecated/icons/AlertInfoIcon.js

@@ -31,7 +31,7 @@ export const AlertInfoIcon = () => (
           </mask>
           <use
             id="background-2"
-            fill="#15749d"
+            fill="#281978"
             fillRule="nonzero"
             xlinkHref="#path-1"
           ></use>