@coorpacademy/components 11.35.2-alpha.4 → 11.35.2-forcedeploy.13

package/es/template/skill-detail/style.css

@@ -7,6 +7,7 @@
 @value cm_grey_200 from colors;
 @value cm_grey_400 from colors;
 @value cm_grey_500 from colors;
+@value purple_600 from colors;
 
 .textBase {
   font-family: "Gilroy";
@@ -22,12 +23,7 @@
 .container {
   composes: textBase;
   background-color: white;
-  font-family: "Gilroy";
-  font-style: normal;
-  margin-top: 48px;
-  margin-bottom: 48px;
-  margin-left: auto;
-  margin-right: auto;
+  margin: 48px auto;
   padding: 0 16px;
   position: relative;
   box-sizing: border-box;
@@ -36,14 +32,48 @@
   max-width: calc(1080px + 40px);
 }
 
-.backButton {
-  margin-bottom: 16px;
+.topSection {
+  display: flex;
 }
 
-.ctaContainer {
+.mainSection {
   display: flex;
-  width: 100%;
-  justify-content: space-between;
+  align-items: flex-start;
+  gap: 40px;
+}
+
+.leftSide {
+  width: 420px;
+  height: 280px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.rightSide {
+  max-width: 620px;
+  height: 280px;
+  display: flex;
+  gap: 8px;
+  flex-direction: column;
+}
+
+.title {
+  gap: 8px;
+  margin: 0;
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 32px;
+}
+
+.ctaWrapper {
+  display: flex;
+  gap: 8px;
+  margin-top: 16px;
+}
+
+.backButton {
+  margin-bottom: 16px;
 }
 
 .skillFocusBadge {
@@ -57,35 +87,39 @@
   font-size: 12px;
   line-height: 16px;
   font-weight: 600;
-  color: #3900D6;
-  margin-bottom: 16px;
+  color: purple_600;
 }
 
-.ctaWrapper,
-.showMoreWrapper {
+.skillBadge {
   display: flex;
-  gap: 8px;
+  height: 12px;
+  width: fit-content;
+  align-items: center;
+  background-color: cm_grey_100;
+  border-radius: 24px;
+  padding: 4px 8px;
+  font-size: 12px;
+  line-height: 12px;
+  font-weight: 600;
+  color: cm_grey_500;
 }
 
 .showMoreWrapper {
+  display: flex;
   align-items: center;
-  margin-top: 8px;
+  color: cm_grey_500;
   font-weight: 600;
   cursor: pointer;
-}
-
-.title {
-  font-size: 24px;
-  font-weight: 700;
-  line-height: 32px;
+  font-size: 14px;
 }
 
 .description {
-  margin-top: 8px;
-  max-width: 734px;
+  max-width: 620px;
   font-size: 14px;
   font-weight: 500;
   line-height: 20px;
+  flex: 1 0 0;
+  align-self: stretch;
   color: cm_grey_400;
 }
 
@@ -105,27 +139,37 @@
   color: cm_grey_400;
   margin-top: 16px;
 }
-
-.skillInformationNumber {
-  color: #000;
+.noDescriptionSpacing {
+  margin-top: 48px ;
 }
 
+
 .progressContainer {
   display: flex;
   align-items: center;
   gap: 8px;
-  margin: 16px 0 40px 0;
 }
 
 .progressInformationNumber {
+  font-size: 14px;
+  font-weight: 600;
   color: cm_grey_500;
+  flex-shrink: 0;
+}
+
+.progressBarRow {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  width: 100%;
+  gap: 8px;
 }
 
 .progressBarWrapper {
   position: relative;
   left: 0;
   max-width: 300px;
-  width: 100%;
+  flex: 1; 
   height: 4px;
   border-radius: 2px;
   overflow: hidden;
@@ -133,27 +177,41 @@
 }
 
 .progress {
-  display: block;
+  display: flex;
   height: 8px;
   animation: progressbar 2s ease-in-out;
 }
 
 @media tablet {
-  .ctaContainer {
-    flex-direction: column;
+  .topSection {
+    flex-direction: row;
+    align-items: flex-start;
   }
-
-  .ctaWrapper {
-    margin-top: 32px;
+  .leftSide,
+  .rightSide {
+    width: 50%;
   }
 }
 
 @media mobile {
+  .topSection {
+    flex-direction: column;
+    align-items: center; 
+  }
+
+  .leftSide,
+  .rightSide {
+    width: 100%;
+    align-items: center;
+  }
+
   .ctaWrapper {
     flex-direction: column;
+    gap: 8px;
+    margin-top: 16px;
+  }
 
-    button {
-      width: 100% !important;
-    }
+  .ctaWrapper button {
+    width: 100% !important;
   }
 }

package/es/variables/colors.css

@@ -91,4 +91,13 @@
 @value red_100: #FFD1D1;
 
 @value warning_100: #FFEECC;
-@value warning_700: #B87A00;
+@value warning_700: #B87A00;
+
+@value negative_600 #C91214;
+@value red_200 #FF9E9E;
+@value turquoise_100: '#D9F4F7';
+@value pink_100: '#FAD6DE';
+@value orange_100: '#FFDCD1';
+@value primary_100: '#D6E6FF';
+@value purple_100: #DDD1FF;
+@value purple_600: #3900D6;

package/es/variables/colors.d.ts

@@ -2,12 +2,12 @@ export declare const COLORS: {
     readonly gray: "#EAEAEB";
     readonly negative: "#ed3436";
     readonly cm_negative_200: "#B81400";
-    readonly positive: "#35CC7F";
     readonly cm_positive_200: "#05944F";
-    readonly white: "#ffffff";
+    readonly white: "#FFFFFF";
     readonly cm_blue_50: "#f1f6fe";
     readonly cm_grey_400: "#9999A8";
     readonly cm_grey_800: "#171721";
+    readonly cm_grey_150: "#E1E1E3";
     readonly cm_primary_blue: "#0061FF";
     readonly cm_blue_700: "#0042AD";
     readonly primary_100: "#D6E6FF";
@@ -22,7 +22,17 @@ export declare const COLORS: {
     readonly red_100: "#FFD1D1";
     readonly cm_turquoise_strong: "#1B7B88";
     readonly yellow_500: "#FFCE0A";
-    readonly neutral_400: "#9999A8";
+    readonly neutral_75: " #F4F4F5";
+    readonly neutral_400: " #9999A8";
+    readonly neutral_500: "#515161";
+    readonly negative_700: "#B81400";
+    readonly cm_orange_800: "#A32700";
+    readonly purple_700: "#2B00A3";
+    readonly purple_100: "#DDD1FF";
+    readonly turquoise_100: "#D9F4F7";
+    readonly pink_100: "#FAD6DE";
+    readonly orange_100: "#FFDCD1";
+    readonly cm_positive_500: "#35CC7F";
 };
 export declare type Colors = typeof COLORS;
 //# sourceMappingURL=colors.d.ts.map

package/es/variables/colors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/variables/colors.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;CAyBT,CAAC;AAEX,oBAAY,MAAM,GAAG,OAAO,MAAM,CAAC"}
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/variables/colors.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCT,CAAC;AAEX,oBAAY,MAAM,GAAG,OAAO,MAAM,CAAC"}

package/es/variables/colors.js

@@ -2,12 +2,12 @@ export const COLORS = {
   gray: '#EAEAEB',
   negative: '#ed3436',
   cm_negative_200: '#B81400',
-  positive: '#35CC7F',
   cm_positive_200: '#05944F',
-  white: '#ffffff',
+  white: '#FFFFFF',
   cm_blue_50: '#f1f6fe',
   cm_grey_400: '#9999A8',
   cm_grey_800: '#171721',
+  cm_grey_150: '#E1E1E3',
   cm_primary_blue: '#0061FF',
   cm_blue_700: '#0042AD',
   primary_100: '#D6E6FF',
@@ -22,6 +22,16 @@ export const COLORS = {
   red_100: '#FFD1D1',
   cm_turquoise_strong: '#1B7B88',
   yellow_500: '#FFCE0A',
-  neutral_400: '#9999A8'
+  neutral_75: ' #F4F4F5',
+  neutral_400: ' #9999A8',
+  neutral_500: '#515161',
+  negative_700: '#B81400',
+  cm_orange_800: '#A32700',
+  purple_700: '#2B00A3',
+  purple_100: '#DDD1FF',
+  turquoise_100: '#D9F4F7',
+  pink_100: '#FAD6DE',
+  orange_100: '#FFDCD1',
+  cm_positive_500: '#35CC7F'
 };
 //# sourceMappingURL=colors.js.map

package/es/variables/colors.js.map

@@ -1 +1 @@
-{"version":3,"file":"colors.js","names":["COLORS","gray","negative","cm_negative_200","positive","cm_positive_200","white","cm_blue_50","cm_grey_400","cm_grey_800","cm_primary_blue","cm_blue_700","primary_100","primary_600","cm_grey_500","cm_grey_700","cm_yellow_400","brand","yellow_700","yellow_100","red_700","red_100","cm_turquoise_strong","yellow_500","neutral_400"],"sources":["../../src/variables/colors.ts"],"sourcesContent":["export const COLORS = {\n  gray: '#EAEAEB',\n  negative: '#ed3436',\n  cm_negative_200: '#B81400',\n  positive: '#35CC7F',\n  cm_positive_200: '#05944F',\n  white: '#ffffff',\n  cm_blue_50: '#f1f6fe',\n  cm_grey_400: '#9999A8',\n  cm_grey_800: '#171721',\n  cm_primary_blue: '#0061FF',\n  cm_blue_700: '#0042AD',\n  primary_100: '#D6E6FF',\n  primary_600: '#0051D6',\n  cm_grey_500: '#9999A8',\n  cm_grey_700: '#1D1D2B',\n  cm_yellow_400: '#bd7e00',\n  brand: '#00B0FF',\n  yellow_700: '#A38300',\n  yellow_100: '#FFF9D1',\n  red_700: '#A30000',\n  red_100: '#FFD1D1',\n  cm_turquoise_strong: '#1B7B88',\n  yellow_500: '#FFCE0A',\n  neutral_400: '#9999A8'\n} as const;\n\nexport type Colors = typeof COLORS;\n"],"mappings":"AAAA,OAAO,MAAMA,MAAM,GAAG;EACpBC,IAAI,EAAE,SAAS;EACfC,QAAQ,EAAE,SAAS;EACnBC,eAAe,EAAE,SAAS;EAC1BC,QAAQ,EAAE,SAAS;EACnBC,eAAe,EAAE,SAAS;EAC1BC,KAAK,EAAE,SAAS;EAChBC,UAAU,EAAE,SAAS;EACrBC,WAAW,EAAE,SAAS;EACtBC,WAAW,EAAE,SAAS;EACtBC,eAAe,EAAE,SAAS;EAC1BC,WAAW,EAAE,SAAS;EACtBC,WAAW,EAAE,SAAS;EACtBC,WAAW,EAAE,SAAS;EACtBC,WAAW,EAAE,SAAS;EACtBC,WAAW,EAAE,SAAS;EACtBC,aAAa,EAAE,SAAS;EACxBC,KAAK,EAAE,SAAS;EAChBC,UAAU,EAAE,SAAS;EACrBC,UAAU,EAAE,SAAS;EACrBC,OAAO,EAAE,SAAS;EAClBC,OAAO,EAAE,SAAS;EAClBC,mBAAmB,EAAE,SAAS;EAC9BC,UAAU,EAAE,SAAS;EACrBC,WAAW,EAAE;AACf,CAAU","ignoreList":[]}
+{"version":3,"file":"colors.js","names":["COLORS","gray","negative","cm_negative_200","cm_positive_200","white","cm_blue_50","cm_grey_400","cm_grey_800","cm_grey_150","cm_primary_blue","cm_blue_700","primary_100","primary_600","cm_grey_500","cm_grey_700","cm_yellow_400","brand","yellow_700","yellow_100","red_700","red_100","cm_turquoise_strong","yellow_500","neutral_75","neutral_400","neutral_500","negative_700","cm_orange_800","purple_700","purple_100","turquoise_100","pink_100","orange_100","cm_positive_500"],"sources":["../../src/variables/colors.ts"],"sourcesContent":["export const COLORS = {\n  gray: '#EAEAEB',\n  negative: '#ed3436',\n  cm_negative_200: '#B81400',\n  cm_positive_200: '#05944F',\n  white: '#FFFFFF',\n  cm_blue_50: '#f1f6fe',\n  cm_grey_400: '#9999A8',\n  cm_grey_800: '#171721',\n  cm_grey_150: '#E1E1E3',\n  cm_primary_blue: '#0061FF',\n  cm_blue_700: '#0042AD',\n  primary_100: '#D6E6FF',\n  primary_600: '#0051D6',\n  cm_grey_500: '#9999A8',\n  cm_grey_700: '#1D1D2B',\n  cm_yellow_400: '#bd7e00',\n  brand: '#00B0FF',\n  yellow_700: '#A38300',\n  yellow_100: '#FFF9D1',\n  red_700: '#A30000',\n  red_100: '#FFD1D1',\n  cm_turquoise_strong: '#1B7B88',\n  yellow_500: '#FFCE0A',\n  neutral_75: ' #F4F4F5',\n  neutral_400: ' #9999A8',\n  neutral_500: '#515161',\n  negative_700: '#B81400',\n  cm_orange_800: '#A32700',\n  purple_700: '#2B00A3',\n  purple_100: '#DDD1FF',\n  turquoise_100: '#D9F4F7',\n  pink_100: '#FAD6DE',\n  orange_100: '#FFDCD1',\n  cm_positive_500: '#35CC7F'\n} as const;\n\nexport type Colors = typeof COLORS;\n"],"mappings":"AAAA,OAAO,MAAMA,MAAM,GAAG;EACpBC,IAAI,EAAE,SAAS;EACfC,QAAQ,EAAE,SAAS;EACnBC,eAAe,EAAE,SAAS;EAC1BC,eAAe,EAAE,SAAS;EAC1BC,KAAK,EAAE,SAAS;EAChBC,UAAU,EAAE,SAAS;EACrBC,WAAW,EAAE,SAAS;EACtBC,WAAW,EAAE,SAAS;EACtBC,WAAW,EAAE,SAAS;EACtBC,eAAe,EAAE,SAAS;EAC1BC,WAAW,EAAE,SAAS;EACtBC,WAAW,EAAE,SAAS;EACtBC,WAAW,EAAE,SAAS;EACtBC,WAAW,EAAE,SAAS;EACtBC,WAAW,EAAE,SAAS;EACtBC,aAAa,EAAE,SAAS;EACxBC,KAAK,EAAE,SAAS;EAChBC,UAAU,EAAE,SAAS;EACrBC,UAAU,EAAE,SAAS;EACrBC,OAAO,EAAE,SAAS;EAClBC,OAAO,EAAE,SAAS;EAClBC,mBAAmB,EAAE,SAAS;EAC9BC,UAAU,EAAE,SAAS;EACrBC,UAAU,EAAE,UAAU;EACtBC,WAAW,EAAE,UAAU;EACvBC,WAAW,EAAE,SAAS;EACtBC,YAAY,EAAE,SAAS;EACvBC,aAAa,EAAE,SAAS;EACxBC,UAAU,EAAE,SAAS;EACrBC,UAAU,EAAE,SAAS;EACrBC,aAAa,EAAE,SAAS;EACxBC,QAAQ,EAAE,SAAS;EACnBC,UAAU,EAAE,SAAS;EACrBC,eAAe,EAAE;AACnB,CAAU","ignoreList":[]}

package/es/variables/theme.native.js

@@ -21,7 +21,7 @@ const defaultTheme = {
     },
     cta: cm_primary_blue,
     negative: COLORS.negative,
-    positive: COLORS.positive,
+    positive: COLORS.cm_positive_500,
     white: '#FFFFFF',
     black: '#14171A',
     battle: '#FFDE03',

package/es/variables/theme.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.native.js","names":["COLORS","HTML_ANCHOR_TEXT_COLOR","cm_primary_blue","defaultTheme","colors","border","gray","extra","lighter","light","lightMedium","medium","dark","extraDark","text","primary","secondary","cta","negative","positive","white","black","battle","notification","salmon","podcast","background","cm_grey_800","spacing","micro","tiny","small","base","large","xlarge","radius","common","card","regular","search","button","thumbnail","fontWeight","semiBold","bold","extraBold","fontSize","extraSmall","xxlarge","xxxlarge","letterSpacing","header"],"sources":["../../src/variables/theme.native.ts"],"sourcesContent":["import {TextStyle} from 'react-native';\nimport {COLORS} from './colors';\n\nexport type SpaceType = 'micro' | 'tiny' | 'small' | 'base' | 'medium' | 'large' | 'xlarge';\n\nexport const HTML_ANCHOR_TEXT_COLOR = '#002BDB';\n\nconst {cm_primary_blue} = COLORS;\n\nexport type Colors = {\n  border: string;\n  gray: {\n    extra: string;\n    light: string;\n    lighter: string;\n    lightMedium: string;\n    medium: string;\n    dark: string;\n    extraDark: string;\n  };\n  podcast: {\n    background: string;\n    primary: string;\n  };\n  text: {\n    primary: string;\n    secondary: string;\n  };\n  cta: string;\n  negative: string;\n  positive: string;\n  white: string;\n  black: string;\n  battle: string;\n  notification: string;\n  salmon: string;\n};\n\nexport type Theme = {\n  colors: Colors;\n  spacing: {\n    micro: number;\n    tiny: number;\n    small: number;\n    base: number;\n    medium: number;\n    large: number;\n    xlarge: number;\n  };\n  radius: {\n    button: number;\n    common: number;\n    card: number;\n    medium: number;\n    regular: number;\n    search: number;\n    thumbnail: number;\n  };\n  fontWeight: {\n    regular: TextStyle['fontWeight'];\n    semiBold: TextStyle['fontWeight'];\n    bold: TextStyle['fontWeight'];\n    extraBold: TextStyle['fontWeight'];\n  };\n  fontSize: {\n    extraSmall: TextStyle['fontSize'];\n    small: TextStyle['fontSize'];\n    medium: TextStyle['fontSize'];\n    regular: TextStyle['fontSize'];\n    large: TextStyle['fontSize'];\n    xlarge: TextStyle['fontSize'];\n    xxlarge: TextStyle['fontSize'];\n    xxxlarge: TextStyle['fontSize'];\n  };\n  letterSpacing: {\n    header: number;\n  };\n};\n\nconst defaultTheme: Theme = {\n  colors: {\n    border: 'rgba(0, 0, 0, 0.1)',\n    gray: {\n      extra: '#FAFAFA',\n      lighter: '#F4F4F5',\n      light: '#ededed',\n      lightMedium: '#CFD8DC',\n      medium: '#90A4AE',\n      dark: '#546E7A',\n      extraDark: '#323232'\n    },\n    text: {\n      primary: '#06265B',\n      secondary: '#FFFFFF'\n    },\n    cta: cm_primary_blue,\n    negative: COLORS.negative,\n    positive: COLORS.positive,\n    white: '#FFFFFF',\n    black: '#14171A',\n    battle: '#FFDE03',\n    notification: '#FF7043',\n    salmon: '#FDE2E5',\n    podcast: {\n      background: COLORS.cm_grey_800,\n      primary: '#FF541F'\n    }\n  },\n  spacing: {\n    micro: 4,\n    tiny: 8,\n    small: 16,\n    base: 24,\n    medium: 32,\n    large: 48,\n    xlarge: 64\n  },\n  radius: {\n    common: 3,\n    card: 5,\n    regular: 8,\n    medium: 12,\n    search: 24,\n    button: 32,\n    thumbnail: 1000\n  },\n  fontWeight: {\n    regular: '400',\n    semiBold: '500',\n    bold: '700',\n    extraBold: '900'\n  },\n  fontSize: {\n    extraSmall: 10,\n    small: 12,\n    medium: 13,\n    regular: 15,\n    large: 17,\n    xlarge: 22,\n    xxlarge: 28,\n    xxxlarge: 40\n  },\n  letterSpacing: {\n    header: 5\n  }\n};\n\nexport default defaultTheme;\n"],"mappings":"AACA,SAAQA,MAAM,QAAO,UAAU;AAI/B,OAAO,MAAMC,sBAAsB,GAAG,SAAS;AAE/C,MAAM;EAACC;AAAe,CAAC,GAAGF,MAAM;AAwEhC,MAAMG,YAAmB,GAAG;EAC1BC,MAAM,EAAE;IACNC,MAAM,EAAE,oBAAoB;IAC5BC,IAAI,EAAE;MACJC,KAAK,EAAE,SAAS;MAChBC,OAAO,EAAE,SAAS;MAClBC,KAAK,EAAE,SAAS;MAChBC,WAAW,EAAE,SAAS;MACtBC,MAAM,EAAE,SAAS;MACjBC,IAAI,EAAE,SAAS;MACfC,SAAS,EAAE;IACb,CAAC;IACDC,IAAI,EAAE;MACJC,OAAO,EAAE,SAAS;MAClBC,SAAS,EAAE;IACb,CAAC;IACDC,GAAG,EAAEf,eAAe;IACpBgB,QAAQ,EAAElB,MAAM,CAACkB,QAAQ;IACzBC,QAAQ,EAAEnB,MAAM,CAACmB,QAAQ;IACzBC,KAAK,EAAE,SAAS;IAChBC,KAAK,EAAE,SAAS;IAChBC,MAAM,EAAE,SAAS;IACjBC,YAAY,EAAE,SAAS;IACvBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE;MACPC,UAAU,EAAE1B,MAAM,CAAC2B,WAAW;MAC9BZ,OAAO,EAAE;IACX;EACF,CAAC;EACDa,OAAO,EAAE;IACPC,KAAK,EAAE,CAAC;IACRC,IAAI,EAAE,CAAC;IACPC,KAAK,EAAE,EAAE;IACTC,IAAI,EAAE,EAAE;IACRrB,MAAM,EAAE,EAAE;IACVsB,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE;EACV,CAAC;EACDC,MAAM,EAAE;IACNC,MAAM,EAAE,CAAC;IACTC,IAAI,EAAE,CAAC;IACPC,OAAO,EAAE,CAAC;IACV3B,MAAM,EAAE,EAAE;IACV4B,MAAM,EAAE,EAAE;IACVC,MAAM,EAAE,EAAE;IACVC,SAAS,EAAE;EACb,CAAC;EACDC,UAAU,EAAE;IACVJ,OAAO,EAAE,KAAK;IACdK,QAAQ,EAAE,KAAK;IACfC,IAAI,EAAE,KAAK;IACXC,SAAS,EAAE;EACb,CAAC;EACDC,QAAQ,EAAE;IACRC,UAAU,EAAE,EAAE;IACdhB,KAAK,EAAE,EAAE;IACTpB,MAAM,EAAE,EAAE;IACV2B,OAAO,EAAE,EAAE;IACXL,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,EAAE;IACVc,OAAO,EAAE,EAAE;IACXC,QAAQ,EAAE;EACZ,CAAC;EACDC,aAAa,EAAE;IACbC,MAAM,EAAE;EACV;AACF,CAAC;AAED,eAAehD,YAAY","ignoreList":[]}
+{"version":3,"file":"theme.native.js","names":["COLORS","HTML_ANCHOR_TEXT_COLOR","cm_primary_blue","defaultTheme","colors","border","gray","extra","lighter","light","lightMedium","medium","dark","extraDark","text","primary","secondary","cta","negative","positive","cm_positive_500","white","black","battle","notification","salmon","podcast","background","cm_grey_800","spacing","micro","tiny","small","base","large","xlarge","radius","common","card","regular","search","button","thumbnail","fontWeight","semiBold","bold","extraBold","fontSize","extraSmall","xxlarge","xxxlarge","letterSpacing","header"],"sources":["../../src/variables/theme.native.ts"],"sourcesContent":["import {TextStyle} from 'react-native';\nimport {COLORS} from './colors';\n\nexport type SpaceType = 'micro' | 'tiny' | 'small' | 'base' | 'medium' | 'large' | 'xlarge';\n\nexport const HTML_ANCHOR_TEXT_COLOR = '#002BDB';\n\nconst {cm_primary_blue} = COLORS;\n\nexport type Colors = {\n  border: string;\n  gray: {\n    extra: string;\n    light: string;\n    lighter: string;\n    lightMedium: string;\n    medium: string;\n    dark: string;\n    extraDark: string;\n  };\n  podcast: {\n    background: string;\n    primary: string;\n  };\n  text: {\n    primary: string;\n    secondary: string;\n  };\n  cta: string;\n  negative: string;\n  positive: string;\n  white: string;\n  black: string;\n  battle: string;\n  notification: string;\n  salmon: string;\n};\n\nexport type Theme = {\n  colors: Colors;\n  spacing: {\n    micro: number;\n    tiny: number;\n    small: number;\n    base: number;\n    medium: number;\n    large: number;\n    xlarge: number;\n  };\n  radius: {\n    button: number;\n    common: number;\n    card: number;\n    medium: number;\n    regular: number;\n    search: number;\n    thumbnail: number;\n  };\n  fontWeight: {\n    regular: TextStyle['fontWeight'];\n    semiBold: TextStyle['fontWeight'];\n    bold: TextStyle['fontWeight'];\n    extraBold: TextStyle['fontWeight'];\n  };\n  fontSize: {\n    extraSmall: TextStyle['fontSize'];\n    small: TextStyle['fontSize'];\n    medium: TextStyle['fontSize'];\n    regular: TextStyle['fontSize'];\n    large: TextStyle['fontSize'];\n    xlarge: TextStyle['fontSize'];\n    xxlarge: TextStyle['fontSize'];\n    xxxlarge: TextStyle['fontSize'];\n  };\n  letterSpacing: {\n    header: number;\n  };\n};\n\nconst defaultTheme: Theme = {\n  colors: {\n    border: 'rgba(0, 0, 0, 0.1)',\n    gray: {\n      extra: '#FAFAFA',\n      lighter: '#F4F4F5',\n      light: '#ededed',\n      lightMedium: '#CFD8DC',\n      medium: '#90A4AE',\n      dark: '#546E7A',\n      extraDark: '#323232'\n    },\n    text: {\n      primary: '#06265B',\n      secondary: '#FFFFFF'\n    },\n    cta: cm_primary_blue,\n    negative: COLORS.negative,\n    positive: COLORS.cm_positive_500,\n    white: '#FFFFFF',\n    black: '#14171A',\n    battle: '#FFDE03',\n    notification: '#FF7043',\n    salmon: '#FDE2E5',\n    podcast: {\n      background: COLORS.cm_grey_800,\n      primary: '#FF541F'\n    }\n  },\n  spacing: {\n    micro: 4,\n    tiny: 8,\n    small: 16,\n    base: 24,\n    medium: 32,\n    large: 48,\n    xlarge: 64\n  },\n  radius: {\n    common: 3,\n    card: 5,\n    regular: 8,\n    medium: 12,\n    search: 24,\n    button: 32,\n    thumbnail: 1000\n  },\n  fontWeight: {\n    regular: '400',\n    semiBold: '500',\n    bold: '700',\n    extraBold: '900'\n  },\n  fontSize: {\n    extraSmall: 10,\n    small: 12,\n    medium: 13,\n    regular: 15,\n    large: 17,\n    xlarge: 22,\n    xxlarge: 28,\n    xxxlarge: 40\n  },\n  letterSpacing: {\n    header: 5\n  }\n};\n\nexport default defaultTheme;\n"],"mappings":"AACA,SAAQA,MAAM,QAAO,UAAU;AAI/B,OAAO,MAAMC,sBAAsB,GAAG,SAAS;AAE/C,MAAM;EAACC;AAAe,CAAC,GAAGF,MAAM;AAwEhC,MAAMG,YAAmB,GAAG;EAC1BC,MAAM,EAAE;IACNC,MAAM,EAAE,oBAAoB;IAC5BC,IAAI,EAAE;MACJC,KAAK,EAAE,SAAS;MAChBC,OAAO,EAAE,SAAS;MAClBC,KAAK,EAAE,SAAS;MAChBC,WAAW,EAAE,SAAS;MACtBC,MAAM,EAAE,SAAS;MACjBC,IAAI,EAAE,SAAS;MACfC,SAAS,EAAE;IACb,CAAC;IACDC,IAAI,EAAE;MACJC,OAAO,EAAE,SAAS;MAClBC,SAAS,EAAE;IACb,CAAC;IACDC,GAAG,EAAEf,eAAe;IACpBgB,QAAQ,EAAElB,MAAM,CAACkB,QAAQ;IACzBC,QAAQ,EAAEnB,MAAM,CAACoB,eAAe;IAChCC,KAAK,EAAE,SAAS;IAChBC,KAAK,EAAE,SAAS;IAChBC,MAAM,EAAE,SAAS;IACjBC,YAAY,EAAE,SAAS;IACvBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE;MACPC,UAAU,EAAE3B,MAAM,CAAC4B,WAAW;MAC9Bb,OAAO,EAAE;IACX;EACF,CAAC;EACDc,OAAO,EAAE;IACPC,KAAK,EAAE,CAAC;IACRC,IAAI,EAAE,CAAC;IACPC,KAAK,EAAE,EAAE;IACTC,IAAI,EAAE,EAAE;IACRtB,MAAM,EAAE,EAAE;IACVuB,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE;EACV,CAAC;EACDC,MAAM,EAAE;IACNC,MAAM,EAAE,CAAC;IACTC,IAAI,EAAE,CAAC;IACPC,OAAO,EAAE,CAAC;IACV5B,MAAM,EAAE,EAAE;IACV6B,MAAM,EAAE,EAAE;IACVC,MAAM,EAAE,EAAE;IACVC,SAAS,EAAE;EACb,CAAC;EACDC,UAAU,EAAE;IACVJ,OAAO,EAAE,KAAK;IACdK,QAAQ,EAAE,KAAK;IACfC,IAAI,EAAE,KAAK;IACXC,SAAS,EAAE;EACb,CAAC;EACDC,QAAQ,EAAE;IACRC,UAAU,EAAE,EAAE;IACdhB,KAAK,EAAE,EAAE;IACTrB,MAAM,EAAE,EAAE;IACV4B,OAAO,EAAE,EAAE;IACXL,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,EAAE;IACVc,OAAO,EAAE,EAAE;IACXC,QAAQ,EAAE;EACZ,CAAC;EACDC,aAAa,EAAE;IACbC,MAAM,EAAE;EACV;AACF,CAAC;AAED,eAAejD,YAAY","ignoreList":[]}

package/lib/atom/button-link/index.js

@@ -36,7 +36,7 @@ const getButtonContent = (icon, content, hovered, hoverBackgroundColor, hoverCol
     iconName: faIcon.name,
     iconColor: hovered && hoverColor ? hoverColor : faIcon.color ?? _icon.DEFAULT_ICON_COLOR,
     // eslint-disable-next-line no-nested-ternary
-    backgroundColor: !faIcon?.backgroundColor ? 'transparent' : hovered && hoverBackgroundColor ? hoverBackgroundColor : faIcon.backgroundColor,
+    backgroundColor: !faIcon?.backgroundColor ? null : hovered && hoverBackgroundColor ? hoverBackgroundColor : faIcon.backgroundColor,
     size: {
       faSize: faIcon.size,
       wrapperSize: faIcon.size

package/lib/atom/button-link/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_link","_icon","_buttonIcons","_tooltip","_types","_style","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","getButtonContent","icon","content","hovered","hoverBackgroundColor","hoverColor","type","faIcon","position","Icon","ICONS","createElement","className","style","buttonContent","label","iconComponent","iconName","name","iconColor","color","DEFAULT_ICON_COLOR","backgroundColor","size","faSize","wrapperSize","customStyle","theme","ButtonLink","props","usage","disabled","dataName","dataTestId","ariaLabel","tooltipText","tooltipPlacement","link","onClick","_noop2","onKeyDown","useTitle","styleButton","classnames","button","iconButton","primary","secondary","tertiary","text","dangerous","setHovered","useState","handleOnClick","useCallback","event","handleOnKeyDown","handleMouseOver","handleMouseLeave","TooltipContent","tooltipContentWrapper","renderToolTip","closeToolTipInformationTextAriaLabel","fontSize","anchorId","toolTipIsVisible","placement","_customStyle","useMemo","title","onMouseEnter","onMouseLeave","onMouseOver","tabIndex","propTypes","process","env","NODE_ENV","_default","exports"],"sources":["../../../src/atom/button-link/index.tsx"],"sourcesContent":["import React, {useCallback, useState, useMemo} from 'react';\nimport {noop} from 'lodash/fp';\nimport classnames from 'classnames';\nimport Link from '../link';\nimport FaIcon, {DEFAULT_ICON_COLOR} from '../icon';\nimport {ICONS} from '../../util/button-icons';\nimport ToolTip from '../tooltip';\nimport propTypes, {ButtonLinkProps, IconType} from './types';\nimport style from './style.css';\n\nconst getButtonContent = (\n  icon?: IconType,\n  content?: string | React.ReactNode,\n  hovered?: boolean,\n  hoverBackgroundColor?: string,\n  hoverColor?: string\n) => {\n  const {type, faIcon, position} = icon || {type: '', position: ''};\n  const Icon = type && ICONS[type];\n\n  if (!Icon && !faIcon) {\n    return (\n      <div className={style.buttonContent}>\n        <span className={style.label}>{content}</span>\n      </div>\n    );\n  }\n\n  const iconComponent = faIcon ? (\n    <FaIcon\n      {...{\n        iconName: faIcon.name,\n        iconColor: hovered && hoverColor ? hoverColor : faIcon.color ?? DEFAULT_ICON_COLOR,\n        // eslint-disable-next-line no-nested-ternary\n        backgroundColor: !faIcon?.backgroundColor\n          ? 'transparent'\n          : hovered && hoverBackgroundColor\n          ? hoverBackgroundColor\n          : faIcon.backgroundColor,\n        size: {\n          faSize: faIcon.size,\n          wrapperSize: faIcon.size\n        },\n        customStyle: faIcon.customStyle\n      }}\n    />\n  ) : (\n    <Icon className={style.icon} theme=\"coorpmanager\" />\n  );\n\n  return (\n    <div className={style.buttonContent}>\n      {position === 'left' ? iconComponent : null}\n      {content ? <span className={style.label}>{content}</span> : null}\n      {position === 'right' ? iconComponent : null}\n    </div>\n  );\n};\n\nconst ButtonLink = (props: ButtonLinkProps) => {\n  const {\n    type,\n    usage = 'button',\n    label,\n    content,\n    hoverBackgroundColor,\n    hoverColor,\n    disabled = false,\n    icon,\n    'data-name': dataName,\n    'data-testid': dataTestId = 'button-link',\n    'aria-label': ariaLabel,\n    tooltipText,\n    tooltipPlacement = 'left',\n    link,\n    onClick = noop,\n    onKeyDown = noop,\n    className,\n    customStyle,\n    useTitle = true\n  } = props;\n  const styleButton = classnames(\n    className,\n    style.button,\n    !label && style.iconButton,\n    type === 'primary' && style.primary,\n    type === 'secondary' && style.secondary,\n    type === 'tertiary' && style.tertiary,\n    type === 'text' && style.text,\n    type === 'dangerous' && style.dangerous,\n    link && style.link,\n    disabled && style.disabled\n  );\n\n  const [hovered, setHovered] = useState(false);\n\n  const handleOnClick = useCallback(event => onClick(event), [onClick]);\n\n  const handleOnKeyDown = useCallback(event => onKeyDown(event), [onKeyDown]);\n\n  const handleMouseOver = useCallback(() => {\n    setHovered(true);\n  }, [setHovered]);\n\n  const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\n\n  const TooltipContent = useCallback(\n    () => <span className={style.tooltipContentWrapper}>{tooltipText || ariaLabel}</span>,\n    [tooltipText, ariaLabel]\n  );\n\n  const renderToolTip = () => {\n    const closeToolTipInformationTextAriaLabel = tooltipText || ariaLabel;\n    if (!closeToolTipInformationTextAriaLabel) return null;\n    return (\n      <ToolTip\n        fontSize={12}\n        anchorId=\"button-icon\"\n        toolTipIsVisible={hovered}\n        placement={tooltipPlacement}\n        TooltipContent={TooltipContent}\n        closeToolTipInformationTextAriaLabel={closeToolTipInformationTextAriaLabel}\n      />\n    );\n  };\n\n  const _customStyle = useMemo(() => {\n    return {\n      ...customStyle,\n      ...((hoverBackgroundColor || hoverColor) && hovered\n        ? {\n            backgroundColor: hoverBackgroundColor,\n            color: hoverColor\n          }\n        : null)\n    };\n  }, [hoverBackgroundColor, hoverColor, hovered, customStyle]);\n\n  if (link) {\n    return (\n      <Link\n        {...link}\n        {...(useTitle && {\n          title: ariaLabel || label\n        })}\n        style={customStyle}\n        className={styleButton}\n        data-name={dataName}\n        data-testid={dataTestId}\n        aria-label={ariaLabel || label}\n        hoverColor={hoverColor}\n        hoverBackgroundColor={hoverBackgroundColor}\n        onMouseEnter={handleMouseOver}\n        onMouseLeave={handleMouseLeave}\n      >\n        {getButtonContent(icon, content ?? label, hovered, hoverBackgroundColor, hoverColor)}\n        {renderToolTip()}\n      </Link>\n    );\n  }\n\n  return (\n    <button\n      {...(useTitle && {\n        title: ariaLabel || label\n      })}\n      {...(ariaLabel && !label\n        ? {\n            'data-for': 'button-icon',\n            'data-tip': hovered\n          }\n        : {})}\n      // eslint-disable-next-line react/button-has-type\n      type={usage}\n      aria-label={ariaLabel || label}\n      data-name={dataName}\n      data-testid={dataTestId}\n      style={_customStyle}\n      className={styleButton}\n      onClick={handleOnClick}\n      onKeyDown={handleOnKeyDown}\n      onMouseOver={handleMouseOver}\n      onMouseLeave={handleMouseLeave}\n      tabIndex={0}\n      disabled={disabled}\n    >\n      {getButtonContent(icon, content ?? label, hovered, hoverBackgroundColor, hoverColor)}\n      {renderToolTip()}\n    </button>\n  );\n};\n\nButtonLink.propTypes = propTypes;\n\nexport default ButtonLink;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_link","_icon","_buttonIcons","_tooltip","_types","_style","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","getButtonContent","icon","content","hovered","hoverBackgroundColor","hoverColor","type","faIcon","position","Icon","ICONS","createElement","className","style","buttonContent","label","iconComponent","iconName","name","iconColor","color","DEFAULT_ICON_COLOR","backgroundColor","size","faSize","wrapperSize","customStyle","theme","ButtonLink","props","usage","disabled","dataName","dataTestId","ariaLabel","tooltipText","tooltipPlacement","link","onClick","_noop2","onKeyDown","useTitle","styleButton","classnames","button","iconButton","primary","secondary","tertiary","text","dangerous","setHovered","useState","handleOnClick","useCallback","event","handleOnKeyDown","handleMouseOver","handleMouseLeave","TooltipContent","tooltipContentWrapper","renderToolTip","closeToolTipInformationTextAriaLabel","fontSize","anchorId","toolTipIsVisible","placement","_customStyle","useMemo","title","onMouseEnter","onMouseLeave","onMouseOver","tabIndex","propTypes","process","env","NODE_ENV","_default","exports"],"sources":["../../../src/atom/button-link/index.tsx"],"sourcesContent":["import React, {useCallback, useState, useMemo} from 'react';\nimport {noop} from 'lodash/fp';\nimport classnames from 'classnames';\nimport Link from '../link';\nimport FaIcon, {DEFAULT_ICON_COLOR, IconProps} from '../icon';\nimport {ICONS} from '../../util/button-icons';\nimport ToolTip from '../tooltip';\nimport propTypes, {ButtonLinkProps, IconType} from './types';\nimport style from './style.css';\n\nconst getButtonContent = (\n  icon?: IconType,\n  content?: string | React.ReactNode,\n  hovered?: boolean,\n  hoverBackgroundColor?: string,\n  hoverColor?: string\n) => {\n  const {type, faIcon, position} = icon || {type: '', position: ''};\n  const Icon = type && ICONS[type];\n\n  if (!Icon && !faIcon) {\n    return (\n      <div className={style.buttonContent}>\n        <span className={style.label}>{content}</span>\n      </div>\n    );\n  }\n\n  const iconComponent = faIcon ? (\n    <FaIcon\n      {...({\n        iconName: faIcon.name,\n        iconColor: hovered && hoverColor ? hoverColor : faIcon.color ?? DEFAULT_ICON_COLOR,\n        // eslint-disable-next-line no-nested-ternary\n        backgroundColor: !faIcon?.backgroundColor\n          ? null\n          : hovered && hoverBackgroundColor\n          ? hoverBackgroundColor\n          : faIcon.backgroundColor,\n        size: {\n          faSize: faIcon.size,\n          wrapperSize: faIcon.size\n        },\n        customStyle: faIcon.customStyle\n      } as IconProps)}\n    />\n  ) : (\n    <Icon className={style.icon} theme=\"coorpmanager\" />\n  );\n\n  return (\n    <div className={style.buttonContent}>\n      {position === 'left' ? iconComponent : null}\n      {content ? <span className={style.label}>{content}</span> : null}\n      {position === 'right' ? iconComponent : null}\n    </div>\n  );\n};\n\nconst ButtonLink = (props: ButtonLinkProps) => {\n  const {\n    type,\n    usage = 'button',\n    label,\n    content,\n    hoverBackgroundColor,\n    hoverColor,\n    disabled = false,\n    icon,\n    'data-name': dataName,\n    'data-testid': dataTestId = 'button-link',\n    'aria-label': ariaLabel,\n    tooltipText,\n    tooltipPlacement = 'left',\n    link,\n    onClick = noop,\n    onKeyDown = noop,\n    className,\n    customStyle,\n    useTitle = true\n  } = props;\n  const styleButton = classnames(\n    className,\n    style.button,\n    !label && style.iconButton,\n    type === 'primary' && style.primary,\n    type === 'secondary' && style.secondary,\n    type === 'tertiary' && style.tertiary,\n    type === 'text' && style.text,\n    type === 'dangerous' && style.dangerous,\n    link && style.link,\n    disabled && style.disabled\n  );\n\n  const [hovered, setHovered] = useState(false);\n\n  const handleOnClick = useCallback(event => onClick(event), [onClick]);\n\n  const handleOnKeyDown = useCallback(event => onKeyDown(event), [onKeyDown]);\n\n  const handleMouseOver = useCallback(() => {\n    setHovered(true);\n  }, [setHovered]);\n\n  const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\n\n  const TooltipContent = useCallback(\n    () => <span className={style.tooltipContentWrapper}>{tooltipText || ariaLabel}</span>,\n    [tooltipText, ariaLabel]\n  );\n\n  const renderToolTip = () => {\n    const closeToolTipInformationTextAriaLabel = tooltipText || ariaLabel;\n    if (!closeToolTipInformationTextAriaLabel) return null;\n    return (\n      <ToolTip\n        fontSize={12}\n        anchorId=\"button-icon\"\n        toolTipIsVisible={hovered}\n        placement={tooltipPlacement}\n        TooltipContent={TooltipContent}\n        closeToolTipInformationTextAriaLabel={closeToolTipInformationTextAriaLabel}\n      />\n    );\n  };\n\n  const _customStyle = useMemo(() => {\n    return {\n      ...customStyle,\n      ...((hoverBackgroundColor || hoverColor) && hovered\n        ? {\n            backgroundColor: hoverBackgroundColor,\n            color: hoverColor\n          }\n        : null)\n    };\n  }, [hoverBackgroundColor, hoverColor, hovered, customStyle]);\n\n  if (link) {\n    return (\n      <Link\n        {...link}\n        {...(useTitle && {\n          title: ariaLabel || label\n        })}\n        style={customStyle}\n        className={styleButton}\n        data-name={dataName}\n        data-testid={dataTestId}\n        aria-label={ariaLabel || label}\n        hoverColor={hoverColor}\n        hoverBackgroundColor={hoverBackgroundColor}\n        onMouseEnter={handleMouseOver}\n        onMouseLeave={handleMouseLeave}\n      >\n        {getButtonContent(icon, content ?? label, hovered, hoverBackgroundColor, hoverColor)}\n        {renderToolTip()}\n      </Link>\n    );\n  }\n\n  return (\n    <button\n      {...(useTitle && {\n        title: ariaLabel || label\n      })}\n      {...(ariaLabel && !label\n        ? {\n            'data-for': 'button-icon',\n            'data-tip': hovered\n          }\n        : {})}\n      // eslint-disable-next-line react/button-has-type\n      type={usage}\n      aria-label={ariaLabel || label}\n      data-name={dataName}\n      data-testid={dataTestId}\n      style={_customStyle}\n      className={styleButton}\n      onClick={handleOnClick}\n      onKeyDown={handleOnKeyDown}\n      onMouseOver={handleMouseOver}\n      onMouseLeave={handleMouseLeave}\n      tabIndex={0}\n      disabled={disabled}\n    >\n      {getButtonContent(icon, content ?? label, hovered, hoverBackgroundColor, hoverColor)}\n      {renderToolTip()}\n    </button>\n  );\n};\n\nButtonLink.propTypes = propTypes;\n\nexport default ButtonLink;\n"],"mappings":"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","ignoreList":[]}

package/lib/atom/button-link/style.css

@@ -22,7 +22,7 @@
   align-items: center;
   cursor: pointer;
   border: none;
-  padding: 0px 16px;
+  padding: 12px 16px;
   /* prevents text selection when dragging
   the mouse over the button */
   user-select: none;
@@ -39,6 +39,7 @@
 }
 
 .buttonContent {
+  gap: 8px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -55,7 +56,6 @@
 }
 
 .label {
-  margin: 0 8px 0 8px;
   text-wrap: nowrap;
   display: block;
 }

package/lib/atom/icon/index.d.ts

@@ -1,22 +1,40 @@
-export const DEFAULT_ICON_COLOR: "hsl(0, 0%, 32%)";
-export function getForegroundColor(backgroundColor: any): any;
-export namespace iconPropTypes {
-    const iconName: PropTypes.Validator<string>;
-    const iconColor: PropTypes.Requireable<string>;
-    const backgroundColor: PropTypes.Requireable<string>;
-    const gradientBackground: PropTypes.Requireable<boolean>;
-    const borderRadius: PropTypes.Requireable<string>;
-    const preset: PropTypes.Requireable<string>;
-    const size: PropTypes.Requireable<PropTypes.InferProps<{
-        faSize: PropTypes.Requireable<number>;
-        wrapperSize: PropTypes.Requireable<number>;
+import React, { CSSProperties } from 'react';
+import PropTypes from 'prop-types';
+export declare const DEFAULT_PRESET = "m";
+export declare const ICON_LUMINOSITY = 32;
+export declare const DEFAULT_WRAPPER_SIZE = 40;
+export declare const ICON_PADDING = 8;
+export declare const DEFAULT_ICON_COLOR = "hsl(0, 0%, 32%)";
+export interface IconSize {
+    faSize: number;
+    wrapperSize: number;
+}
+export interface IconProps {
+    iconName: string;
+    iconColor?: string;
+    backgroundColor?: string;
+    gradientBackground?: boolean;
+    borderRadius?: string;
+    preset?: string;
+    size?: IconSize;
+    customStyle?: CSSProperties;
+}
+export declare function getForegroundColor(backgroundColor: string): string;
+declare const Icon: React.FC<IconProps>;
+export declare const propTypes: {
+    iconName: PropTypes.Validator<string>;
+    iconColor: PropTypes.Requireable<string>;
+    backgroundColor: PropTypes.Requireable<string>;
+    gradientBackground: PropTypes.Requireable<boolean>;
+    borderRadius: PropTypes.Requireable<string>;
+    preset: PropTypes.Requireable<string>;
+    size: PropTypes.Requireable<PropTypes.InferProps<{
+        faSize: PropTypes.Validator<number>;
+        wrapperSize: PropTypes.Validator<number>;
     }>>;
-    const customStyle: PropTypes.Requireable<{
+    customStyle: PropTypes.Requireable<{
         [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
     }>;
-}
+};
 export default Icon;
-import PropTypes from "prop-types";
-declare const Icon: React.NamedExoticComponent<object>;
-import React from "react";
 //# sourceMappingURL=index.d.ts.map

package/lib/atom/icon/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/icon/index.js"],"names":[],"mappings":"AAkBA,mDAAoD;AAiB7C,8DAC8D;;;;;;;;;;;;;;;;;;AAGrE,uDAsCG"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/icon/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,aAAa,EAAC,MAAM,OAAO,CAAC;AAC3C,OAAO,SAAS,MAAM,YAAY,CAAC;AAanC,eAAO,MAAM,cAAc,MAAM,CAAC;AAClC,eAAO,MAAM,eAAe,KAAK,CAAC;AAClC,eAAO,MAAM,oBAAoB,KAAK,CAAC;AACvC,eAAO,MAAM,YAAY,IAAI,CAAC;AAC9B,eAAO,MAAM,kBAAkB,oBAAoB,CAAC;AAEpD,MAAM,WAAW,QAAQ;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,SAAS;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,WAAW,CAAC,EAAE,aAAa,CAAC;CAC7B;AAED,wBAAgB,kBAAkB,CAAC,eAAe,EAAE,MAAM,GAAG,MAAM,CAElE;AAiBD,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAiD7B,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;CAYrB,CAAC;AAUF,eAAe,IAAI,CAAC"}

package/lib/atom/icon/index.js

@@ -1,9 +1,11 @@
 "use strict";
 
 exports.__esModule = true;
-exports.iconPropTypes = exports.getForegroundColor = exports.default = exports.DEFAULT_ICON_COLOR = void 0;
+exports.default = exports.ICON_PADDING = exports.ICON_LUMINOSITY = exports.DEFAULT_WRAPPER_SIZE = exports.DEFAULT_PRESET = exports.DEFAULT_ICON_COLOR = void 0;
+exports.getForegroundColor = getForegroundColor;
+exports.propTypes = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireWildcard(require("prop-types"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactFontawesome = require("@fortawesome/react-fontawesome");
 var _proSolidSvgIcons = require("@fortawesome/pro-solid-svg-icons");
 var _fontawesomeSvgCore = require("@fortawesome/fontawesome-svg-core");
@@ -13,15 +15,16 @@ var _getOr = _interopRequireDefault(require("lodash/fp/getOr"));
 var _cssColorFunction = require("css-color-function");
 var _getBackgroundGradientColor = require("../../util/get-background-gradient-color");
 var _style = _interopRequireDefault(require("./style.css"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 _fontawesomeSvgCore.library.add(_proSolidSvgIcons.fas);
-const DEFAULT_PRESET = 'm';
-const ICON_LUMINOSITY = 32;
-const DEFAULT_WRAPPER_SIZE = 40;
-const ICON_PADDING = 8;
+const DEFAULT_PRESET = exports.DEFAULT_PRESET = 'm';
+const ICON_LUMINOSITY = exports.ICON_LUMINOSITY = 32;
+const DEFAULT_WRAPPER_SIZE = exports.DEFAULT_WRAPPER_SIZE = 40;
+const ICON_PADDING = exports.ICON_PADDING = 8;
 const DEFAULT_ICON_COLOR = exports.DEFAULT_ICON_COLOR = 'hsl(0, 0%, 32%)';
+function getForegroundColor(backgroundColor) {
+  return (0, _cssColorFunction.convert)(`color(${backgroundColor} lightness(${ICON_LUMINOSITY}%))`);
+}
 const SIZE_CONFIGS = {
   s: {
     faSize: 12,
@@ -36,10 +39,7 @@ const SIZE_CONFIGS = {
     wrapperSize: 48
   }
 };
-const getForegroundColor = backgroundColor => (0, _cssColorFunction.convert)(`color(${backgroundColor} lightness(${ICON_LUMINOSITY}%))`);
-// set lightness to 32%
-exports.getForegroundColor = getForegroundColor;
-const Icon = /*#__PURE__*/_react.default.memo(function Icon({
+const Icon = ({
   iconName,
   iconColor,
   backgroundColor,
@@ -48,9 +48,18 @@ const Icon = /*#__PURE__*/_react.default.memo(function Icon({
   preset = DEFAULT_PRESET,
   size,
   customStyle
-}) {
+}) => {
   const effectiveIconColor = iconColor || (backgroundColor ? getForegroundColor(backgroundColor) : DEFAULT_ICON_COLOR);
   const effectiveSize = size ? (0, _merge.default)(SIZE_CONFIGS[DEFAULT_PRESET], size) : (0, _getOr.default)(SIZE_CONFIGS[DEFAULT_PRESET], (0, _toLower.default)(preset), SIZE_CONFIGS);
+  const hasBackground = backgroundColor || gradientBackground;
+  if (!hasBackground) {
+    return /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+      icon: `fa-${iconName}`,
+      color: effectiveIconColor,
+      fontSize: effectiveSize.faSize,
+      style: customStyle
+    });
+  }
   const wrapperSize = effectiveSize.wrapperSize - ICON_PADDING * 2;
   const iconWrapperStyle = {
     background: gradientBackground ? (0, _getBackgroundGradientColor.createGradientBackground)(effectiveIconColor, '81%', '91%') : backgroundColor,
@@ -70,8 +79,8 @@ const Icon = /*#__PURE__*/_react.default.memo(function Icon({
     color: effectiveIconColor,
     fontSize: effectiveSize.faSize
   }));
-});
-const iconPropTypes = exports.iconPropTypes = {
+};
+const propTypes = exports.propTypes = {
   iconName: _propTypes.default.string.isRequired,
   iconColor: _propTypes.default.string,
   backgroundColor: _propTypes.default.string,
@@ -79,11 +88,18 @@ const iconPropTypes = exports.iconPropTypes = {
   borderRadius: _propTypes.default.string,
   preset: _propTypes.default.oneOf(['s', 'm', 'xl']),
   size: _propTypes.default.shape({
-    faSize: _propTypes.number,
-    wrapperSize: _propTypes.default.number
+    faSize: _propTypes.default.number.isRequired,
+    wrapperSize: _propTypes.default.number.isRequired
   }),
   customStyle: _propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]))
 };
-Icon.propTypes = process.env.NODE_ENV !== "production" ? iconPropTypes : {};
+
+// const MemoizedIcon = React.memo(Icon) as React.MemoExoticComponent<React.FC<IconProps>> & {
+//   propTypes?: React.WeakValidationMap<IconProps>;
+//   defaultProps?: Partial<IconProps>;
+// };
+
+Icon.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
+// MemoizedIcon.propTypes = Icon.propTypes;
 var _default = exports.default = Icon;
 //# sourceMappingURL=index.js.map