@bikdotai/bik-component-library 0.0.820 → 0.0.821-0

package/dist/esm/components/TypographyStyle.js

@@ -165,6 +165,15 @@ const i = (e) => e === void 0 || e == null ? "" : e + "px", b = n.div`
 	display: -webkit-box;
 	-webkit-line-clamp: ${(e) => e.numberOfLines};
 `, v = n.div`
+	color: ${(e) => e.color || o.text.primary};
+	font-weight: ${t.bodyTinySemiBold.fontWeight};
+	font-size: ${i(t.bodyTinySemiBold.fontSize)};
+	line-height: ${i(t.bodyTinySemiBold.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${(e) => e.numberOfLines};
+`, z = n.div`
 	color: ${(e) => e.color || o.text.primary};
 	font-weight: ${t.tiny.fontWeight};
 	font-size: ${i(t.tiny.fontSize)};
@@ -179,7 +188,7 @@ const i = (e) => e === void 0 || e == null ? "" : e + "px", b = n.div`
 	-webkit-text-fill-color: transparent;
 	background-clip: text;
 	text-fill-color: transparent;
-`, z = n.div`
+`, S = n.div`
 	font-family: Inter;
 	color: ${(e) => e.color || o.text.primary};
 	font-weight: ${t.buttonLarge.fontWeight};
@@ -189,7 +198,7 @@ const i = (e) => e === void 0 || e == null ? "" : e + "px", b = n.div`
 	overflow: hidden;
 	display: -webkit-box;
 	-webkit-line-clamp: ${(e) => e.numberOfLines};
-`, S = n.div`
+`, L = n.div`
 	font-family: Inter;
 	color: ${(e) => e.color || o.text.primary};
 	font-weight: ${t.buttonLarge.fontWeight};
@@ -205,7 +214,7 @@ const i = (e) => e === void 0 || e == null ? "" : e + "px", b = n.div`
 	-webkit-text-fill-color: transparent;
 	background-clip: text;
 	text-fill-color: transparent;
-`, L = n.div`
+`, H = n.div`
 	font-family: Inter;
 	color: ${(e) => e.color || o.text.primary};
 	font-weight: ${t.buttonRegular.fontWeight};
@@ -215,7 +224,7 @@ const i = (e) => e === void 0 || e == null ? "" : e + "px", b = n.div`
 	overflow: hidden;
 	display: -webkit-box;
 	-webkit-line-clamp: ${(e) => e.numberOfLines};
-`, H = n.div`
+`, O = n.div`
 	font-family: Inter;
 	color: ${(e) => e.color || o.text.primary};
 	font-weight: ${t.subHeading.fontWeight};
@@ -225,7 +234,7 @@ const i = (e) => e === void 0 || e == null ? "" : e + "px", b = n.div`
 	overflow: hidden;
 	display: -webkit-box;
 	-webkit-line-clamp: ${(e) => e.numberOfLines};
-`, O = n.div`
+`, W = n.div`
 	font-family: Inter;
 	color: ${(e) => e.color || o.text.primary};
 	font-weight: ${t.bodyRegular.fontWeight};
@@ -235,7 +244,7 @@ const i = (e) => e === void 0 || e == null ? "" : e + "px", b = n.div`
 	overflow: hidden;
 	display: -webkit-box;
 	-webkit-line-clamp: ${(e) => e.numberOfLines};
-`, W = n.div`
+`, I = n.div`
 	font-family: Inter;
 	color: ${o.text.primary};
 	font-weight: ${t.caption.fontWeight};
@@ -245,7 +254,7 @@ const i = (e) => e === void 0 || e == null ? "" : e + "px", b = n.div`
 	overflow: hidden;
 	display: -webkit-box;
 	-webkit-line-clamp: ${(e) => e.numberOfLines};
-`, I = n.div`
+`, B = n.div`
 	font-family: Inter;
 	color: ${o.text.primary};
 	font-weight: ${t.textPlaceholder.fontWeight};
@@ -255,7 +264,7 @@ const i = (e) => e === void 0 || e == null ? "" : e + "px", b = n.div`
 	overflow: hidden;
 	display: -webkit-box;
 	-webkit-line-clamp: ${(e) => e.numberOfLines};
-`, B = n.div`
+`, R = n.div`
 	font-family: Inter;
 	color: ${o.text.primary};
 	font-weight: ${t.title4.fontWeight};
@@ -265,7 +274,7 @@ const i = (e) => e === void 0 || e == null ? "" : e + "px", b = n.div`
 	overflow: hidden;
 	display: -webkit-box;
 	-webkit-line-clamp: ${(e) => e.numberOfLines};
-`, R = n.div`
+`, T = n.div`
 	font-family: Inter;
 	color: ${o.text.primary};
 	font-weight: ${t.bodySmall.fontWeight};
@@ -285,7 +294,7 @@ const i = (e) => e === void 0 || e == null ? "" : e + "px", b = n.div`
 	overflow: hidden;
 	display: -webkit-box;
 	-webkit-line-clamp: ${(e) => e.numberOfLines};
-`, T = n.div`
+`, C = n.div`
 	font-family: Inter;
 	color: ${o.text.primary};
 	font-weight: ${t.tiny.fontWeight};
@@ -298,28 +307,29 @@ const i = (e) => e === void 0 || e == null ? "" : e + "px", b = n.div`
 `;
 export {
   k as AiBodyCaption,
-  v as AiBodyTiny,
+  z as AiBodyTiny,
   x as BodyCaption,
   $ as BodyLarge,
   l as BodyPrimary,
   m as BodyPrimaryLink,
-  O as BodyRegular,
+  W as BodyRegular,
   r as BodySecondary,
   p as BodySecondaryLink,
-  R as BodySmall,
+  T as BodySmall,
   u as BodyTiny,
-  z as ButtonLarge,
-  S as ButtonLargeAI,
-  L as ButtonRegular,
+  v as BodyTinySemiBold,
+  S as ButtonLarge,
+  L as ButtonLargeAI,
+  H as ButtonRegular,
   s as ButtonRegularAI,
-  W as Caption,
+  I as Caption,
   P as CaptionBold,
   y as Display,
   h as SmallRegular,
-  H as SubHeading,
-  I as TextPlaceholder,
-  T as Tiny,
-  B as TitleFour,
+  O as SubHeading,
+  B as TextPlaceholder,
+  C as Tiny,
+  R as TitleFour,
   d as TitleLarge,
   c as TitleMedium,
   g as TitleRegular,

package/dist/esm/components/TypographyStyle.js.map

@@ -1 +1 @@
-{"version":3,"file":"TypographyStyle.js","sources":["../../../src/components/TypographyStyle.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS, FONTS } from '@src/constants/Theme';\n\nconst addPixels = (value?: number) => {\n\tif (value === undefined || value == null) return '';\n\treturn value + 'px';\n};\nexport interface customStyles {\n\tfontWeight?: number;\n\tfontSize?: number;\n\twidth?: number;\n}\n\nexport const TitleXlarge = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color || COLORS.text.primary};\n\tfont-weight: ${FONTS.titleXLarge.fontWeight};\n\tfont-size: ${addPixels(FONTS.titleXLarge.fontSize)};\n\tline-height: ${addPixels(FONTS.titleXLarge.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const TitleLarge = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color || COLORS.text.primary};\n\tfont-weight: ${FONTS.titleLarge.fontWeight};\n\tfont-size: ${addPixels(FONTS.titleLarge.fontSize)};\n\tline-height: ${addPixels(FONTS.titleLarge.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const TitleMedium = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color || COLORS.text.primary};\n\tfont-weight: ${FONTS.titleMedium.fontWeight};\n\tfont-size: ${addPixels(FONTS.titleMedium.fontSize)};\n\tline-height: ${addPixels(FONTS.titleMedium.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const SmallRegular = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color || COLORS.text.primary};\n\tfont-weight: ${FONTS.title4.fontWeight};\n\tfont-size: ${addPixels(FONTS.title4.fontSize)};\n\tline-height: ${addPixels(FONTS.title4.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const TitleRegular = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color || COLORS.text.primary};\n\tfont-weight: ${FONTS.titleRegular.fontWeight};\n\tfont-size: ${addPixels(FONTS.titleRegular.fontSize)};\n\tline-height: ${addPixels(FONTS.titleRegular.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\nexport const TitleSmall = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color || COLORS.text.primary};\n\tfont-weight: ${FONTS.titleSmall.fontWeight};\n\tfont-size: ${addPixels(FONTS.titleSmall.fontSize)};\n\tline-height: ${addPixels(FONTS.titleSmall.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const Display = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color || COLORS.text.primary};\n\tfont-weight: ${FONTS.display.fontWeight};\n\tfont-size: ${addPixels(FONTS.display.fontSize)};\n\tline-height: ${addPixels(FONTS.display.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const BodyLarge = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color || COLORS.text.primary};\n\tfont-weight: ${FONTS.bodyPrimary.fontWeight};\n\tfont-size: ${addPixels(FONTS.bodyLarge.fontSize)};\n\tline-height: ${addPixels(FONTS.bodyLarge.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\nexport const BodyPrimary = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color || COLORS.text.primary};\n\tfont-weight: ${FONTS.bodyPrimary.fontWeight};\n\tfont-size: ${addPixels(FONTS.bodyPrimary.fontSize)};\n\tline-height: ${addPixels(FONTS.bodyPrimary.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\nexport const BodySecondary = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n\tcustomStyles?: customStyles;\n}>`\n\tfont-family: Inter;\n\twidth: ${(props) => addPixels(props.customStyles?.width)};\n\tcolor: ${(props) => props.color || COLORS.text.primary};\n\tfont-weight: ${(props) =>\n\t\tprops.customStyles?.fontWeight || FONTS.bodySecondary.fontWeight};\n\tfont-size: ${(props) =>\n\t\taddPixels(props.customStyles?.fontSize) ||\n\t\taddPixels(FONTS.bodySecondary.fontSize)};\n\tline-height: ${addPixels(FONTS.bodySecondary.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const ButtonRegularAI = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n\tdisabled?: boolean;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color || COLORS.text.primary};\n\tfont-weight: ${FONTS.bodySecondary.fontWeight};\n\tfont-size: ${addPixels(FONTS.bodySecondary.fontSize)};\n\tline-height: ${addPixels(FONTS.bodySecondary.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n\tz-index: 1;\n\tbackground: linear-gradient(93deg, #ff166a 0.37%, #fb5f08 100%);\n\t-webkit-background-clip: text;\n\t-webkit-text-fill-color: transparent;\n\tbackground-clip: text;\n\ttext-fill-color: transparent;\n`;\n\nexport const BodyPrimaryLink = styled(BodyPrimary)`\n\ttext-decoration: underline;\n\tcolor: ${COLORS.content.brand};\n\ttext-decoration-color: ${COLORS.content.brand};\n\tcursor: pointer;\n`;\n\nexport const BodySecondaryLink = styled(BodySecondary)`\n\ttext-decoration: underline;\n\tcolor: ${COLORS.content.brand};\n\ttext-decoration-color: ${COLORS.content.brand};\n\tcursor: pointer;\n`;\n\nexport const BodyCaption = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color || COLORS.text.primary};\n\tfont-weight: ${FONTS.caption.fontWeight};\n\tfont-size: ${addPixels(FONTS.caption.fontSize)};\n\tline-height: ${addPixels(FONTS.caption.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n\tword-break: break-word;\n\toverflow-wrap: break-word;\n`;\n\nexport const AiBodyCaption = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color || COLORS.text.primary};\n\tfont-weight: ${FONTS.caption.fontWeight};\n\tfont-size: ${addPixels(FONTS.caption.fontSize)};\n\tline-height: ${addPixels(FONTS.caption.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n\tz-index: 1;\n\tbackground: linear-gradient(93deg, #ff166a 0.37%, #fb5f08 100%);\n\t-webkit-background-clip: text;\n\t-webkit-text-fill-color: transparent;\n\tbackground-clip: text;\n\ttext-fill-color: transparent;\n`;\n\nexport const BodyTiny = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tcolor: ${(props) => props.color || COLORS.text.primary};\n\tfont-weight: ${FONTS.tiny.fontWeight};\n\tfont-size: ${addPixels(FONTS.tiny.fontSize)};\n\tline-height: ${addPixels(FONTS.tiny.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const AiBodyTiny = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tcolor: ${(props) => props.color || COLORS.text.primary};\n\tfont-weight: ${FONTS.tiny.fontWeight};\n\tfont-size: ${addPixels(FONTS.tiny.fontSize)};\n\tline-height: ${addPixels(FONTS.tiny.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n\tz-index: 1;\n\tbackground: linear-gradient(93deg, #ff166a 0.37%, #fb5f08 100%);\n\t-webkit-background-clip: text;\n\t-webkit-text-fill-color: transparent;\n\tbackground-clip: text;\n\ttext-fill-color: transparent;\n`;\n\nexport const ButtonLarge = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color || COLORS.text.primary};\n\tfont-weight: ${FONTS.buttonLarge.fontWeight};\n\tfont-size: ${addPixels(FONTS.buttonLarge.fontSize)};\n\tline-height: ${addPixels(FONTS.buttonLarge.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const ButtonLargeAI = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color || COLORS.text.primary};\n\tfont-weight: ${FONTS.buttonLarge.fontWeight};\n\tfont-size: ${addPixels(FONTS.buttonLarge.fontSize)};\n\tline-height: ${addPixels(FONTS.buttonLarge.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n\tbackground: linear-gradient(93deg, #ff166a 0.37%, #fb5f08 100%);\n\tz-index: 1;\n\t-webkit-background-clip: text;\n\t-webkit-text-fill-color: transparent;\n\tbackground-clip: text;\n\ttext-fill-color: transparent;\n`;\n\nexport const ButtonRegular = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color || COLORS.text.primary};\n\tfont-weight: ${FONTS.buttonRegular.fontWeight};\n\tfont-size: ${addPixels(FONTS.buttonRegular.fontSize)};\n\tline-height: ${addPixels(FONTS.buttonRegular.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const SubHeading = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color || COLORS.text.primary};\n\tfont-weight: ${FONTS.subHeading.fontWeight};\n\tfont-size: ${addPixels(FONTS.subHeading.fontSize)};\n\tline-height: ${addPixels(FONTS.subHeading.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const BodyRegular = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color || COLORS.text.primary};\n\tfont-weight: ${FONTS.bodyRegular.fontWeight};\n\tfont-size: ${addPixels(FONTS.bodyRegular.fontSize)};\n\tline-height: ${addPixels(FONTS.bodyRegular.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const Caption = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${COLORS.text.primary};\n\tfont-weight: ${FONTS.caption.fontWeight};\n\tfont-size: ${addPixels(FONTS.caption.fontSize)};\n\tline-height: ${addPixels(FONTS.caption.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const TextPlaceholder = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${COLORS.text.primary};\n\tfont-weight: ${FONTS.textPlaceholder.fontWeight};\n\tfont-size: ${addPixels(FONTS.textPlaceholder.fontSize)};\n\tline-height: ${addPixels(FONTS.textPlaceholder.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const TitleFour = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${COLORS.text.primary};\n\tfont-weight: ${FONTS.title4.fontWeight};\n\tfont-size: ${addPixels(FONTS.title4.fontSize)};\n\tline-height: ${addPixels(FONTS.title4.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const BodySmall = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${COLORS.text.primary};\n\tfont-weight: ${FONTS.bodySmall.fontWeight};\n\tfont-size: ${addPixels(FONTS.bodySmall.fontSize)};\n\tline-height: ${addPixels(FONTS.bodySmall.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const CaptionBold = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${COLORS.text.primary};\n\tfont-weight: ${FONTS.captionBold.fontWeight};\n\tfont-size: ${addPixels(FONTS.captionBold.fontSize)};\n\tline-height: ${addPixels(FONTS.captionBold.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const Tiny = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${COLORS.text.primary};\n\tfont-weight: ${FONTS.tiny.fontWeight};\n\tfont-size: ${addPixels(FONTS.tiny.fontSize)};\n\tline-height: ${addPixels(FONTS.tiny.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n"],"names":["addPixels","value","TitleXlarge","styled","props","COLORS","FONTS","TitleLarge","TitleMedium","SmallRegular","TitleRegular","TitleSmall","Display","BodyLarge","BodyPrimary","BodySecondary","ButtonRegularAI","BodyPrimaryLink","BodySecondaryLink","BodyCaption","AiBodyCaption","BodyTiny","AiBodyTiny","ButtonLarge","ButtonLargeAI","ButtonRegular","SubHeading","BodyRegular","Caption","TextPlaceholder","TitleFour","BodySmall","CaptionBold","Tiny"],"mappings":"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"}
+{"version":3,"file":"TypographyStyle.js","sources":["../../../src/components/TypographyStyle.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS, FONTS } from '@src/constants/Theme';\n\nconst addPixels = (value?: number) => {\n\tif (value === undefined || value == null) return '';\n\treturn value + 'px';\n};\nexport interface customStyles {\n\tfontWeight?: number;\n\tfontSize?: number;\n\twidth?: number;\n}\n\nexport const TitleXlarge = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color || COLORS.text.primary};\n\tfont-weight: ${FONTS.titleXLarge.fontWeight};\n\tfont-size: ${addPixels(FONTS.titleXLarge.fontSize)};\n\tline-height: ${addPixels(FONTS.titleXLarge.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const TitleLarge = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color || COLORS.text.primary};\n\tfont-weight: ${FONTS.titleLarge.fontWeight};\n\tfont-size: ${addPixels(FONTS.titleLarge.fontSize)};\n\tline-height: ${addPixels(FONTS.titleLarge.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const TitleMedium = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color || COLORS.text.primary};\n\tfont-weight: ${FONTS.titleMedium.fontWeight};\n\tfont-size: ${addPixels(FONTS.titleMedium.fontSize)};\n\tline-height: ${addPixels(FONTS.titleMedium.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const SmallRegular = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color || COLORS.text.primary};\n\tfont-weight: ${FONTS.title4.fontWeight};\n\tfont-size: ${addPixels(FONTS.title4.fontSize)};\n\tline-height: ${addPixels(FONTS.title4.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const TitleRegular = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color || COLORS.text.primary};\n\tfont-weight: ${FONTS.titleRegular.fontWeight};\n\tfont-size: ${addPixels(FONTS.titleRegular.fontSize)};\n\tline-height: ${addPixels(FONTS.titleRegular.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\nexport const TitleSmall = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color || COLORS.text.primary};\n\tfont-weight: ${FONTS.titleSmall.fontWeight};\n\tfont-size: ${addPixels(FONTS.titleSmall.fontSize)};\n\tline-height: ${addPixels(FONTS.titleSmall.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const Display = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color || COLORS.text.primary};\n\tfont-weight: ${FONTS.display.fontWeight};\n\tfont-size: ${addPixels(FONTS.display.fontSize)};\n\tline-height: ${addPixels(FONTS.display.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const BodyLarge = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color || COLORS.text.primary};\n\tfont-weight: ${FONTS.bodyPrimary.fontWeight};\n\tfont-size: ${addPixels(FONTS.bodyLarge.fontSize)};\n\tline-height: ${addPixels(FONTS.bodyLarge.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\nexport const BodyPrimary = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color || COLORS.text.primary};\n\tfont-weight: ${FONTS.bodyPrimary.fontWeight};\n\tfont-size: ${addPixels(FONTS.bodyPrimary.fontSize)};\n\tline-height: ${addPixels(FONTS.bodyPrimary.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\nexport const BodySecondary = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n\tcustomStyles?: customStyles;\n}>`\n\tfont-family: Inter;\n\twidth: ${(props) => addPixels(props.customStyles?.width)};\n\tcolor: ${(props) => props.color || COLORS.text.primary};\n\tfont-weight: ${(props) =>\n\t\tprops.customStyles?.fontWeight || FONTS.bodySecondary.fontWeight};\n\tfont-size: ${(props) =>\n\t\taddPixels(props.customStyles?.fontSize) ||\n\t\taddPixels(FONTS.bodySecondary.fontSize)};\n\tline-height: ${addPixels(FONTS.bodySecondary.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const ButtonRegularAI = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n\tdisabled?: boolean;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color || COLORS.text.primary};\n\tfont-weight: ${FONTS.bodySecondary.fontWeight};\n\tfont-size: ${addPixels(FONTS.bodySecondary.fontSize)};\n\tline-height: ${addPixels(FONTS.bodySecondary.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n\tz-index: 1;\n\tbackground: linear-gradient(93deg, #ff166a 0.37%, #fb5f08 100%);\n\t-webkit-background-clip: text;\n\t-webkit-text-fill-color: transparent;\n\tbackground-clip: text;\n\ttext-fill-color: transparent;\n`;\n\nexport const BodyPrimaryLink = styled(BodyPrimary)`\n\ttext-decoration: underline;\n\tcolor: ${COLORS.content.brand};\n\ttext-decoration-color: ${COLORS.content.brand};\n\tcursor: pointer;\n`;\n\nexport const BodySecondaryLink = styled(BodySecondary)`\n\ttext-decoration: underline;\n\tcolor: ${COLORS.content.brand};\n\ttext-decoration-color: ${COLORS.content.brand};\n\tcursor: pointer;\n`;\n\nexport const BodyCaption = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color || COLORS.text.primary};\n\tfont-weight: ${FONTS.caption.fontWeight};\n\tfont-size: ${addPixels(FONTS.caption.fontSize)};\n\tline-height: ${addPixels(FONTS.caption.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n\tword-break: break-word;\n\toverflow-wrap: break-word;\n`;\n\nexport const AiBodyCaption = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color || COLORS.text.primary};\n\tfont-weight: ${FONTS.caption.fontWeight};\n\tfont-size: ${addPixels(FONTS.caption.fontSize)};\n\tline-height: ${addPixels(FONTS.caption.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n\tz-index: 1;\n\tbackground: linear-gradient(93deg, #ff166a 0.37%, #fb5f08 100%);\n\t-webkit-background-clip: text;\n\t-webkit-text-fill-color: transparent;\n\tbackground-clip: text;\n\ttext-fill-color: transparent;\n`;\n\nexport const BodyTiny = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tcolor: ${(props) => props.color || COLORS.text.primary};\n\tfont-weight: ${FONTS.tiny.fontWeight};\n\tfont-size: ${addPixels(FONTS.tiny.fontSize)};\n\tline-height: ${addPixels(FONTS.tiny.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const BodyTinySemiBold = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tcolor: ${(props) => props.color || COLORS.text.primary};\n\tfont-weight: ${FONTS.bodyTinySemiBold.fontWeight};\n\tfont-size: ${addPixels(FONTS.bodyTinySemiBold.fontSize)};\n\tline-height: ${addPixels(FONTS.bodyTinySemiBold.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const AiBodyTiny = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tcolor: ${(props) => props.color || COLORS.text.primary};\n\tfont-weight: ${FONTS.tiny.fontWeight};\n\tfont-size: ${addPixels(FONTS.tiny.fontSize)};\n\tline-height: ${addPixels(FONTS.tiny.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n\tz-index: 1;\n\tbackground: linear-gradient(93deg, #ff166a 0.37%, #fb5f08 100%);\n\t-webkit-background-clip: text;\n\t-webkit-text-fill-color: transparent;\n\tbackground-clip: text;\n\ttext-fill-color: transparent;\n`;\n\nexport const ButtonLarge = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color || COLORS.text.primary};\n\tfont-weight: ${FONTS.buttonLarge.fontWeight};\n\tfont-size: ${addPixels(FONTS.buttonLarge.fontSize)};\n\tline-height: ${addPixels(FONTS.buttonLarge.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const ButtonLargeAI = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color || COLORS.text.primary};\n\tfont-weight: ${FONTS.buttonLarge.fontWeight};\n\tfont-size: ${addPixels(FONTS.buttonLarge.fontSize)};\n\tline-height: ${addPixels(FONTS.buttonLarge.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n\tbackground: linear-gradient(93deg, #ff166a 0.37%, #fb5f08 100%);\n\tz-index: 1;\n\t-webkit-background-clip: text;\n\t-webkit-text-fill-color: transparent;\n\tbackground-clip: text;\n\ttext-fill-color: transparent;\n`;\n\nexport const ButtonRegular = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color || COLORS.text.primary};\n\tfont-weight: ${FONTS.buttonRegular.fontWeight};\n\tfont-size: ${addPixels(FONTS.buttonRegular.fontSize)};\n\tline-height: ${addPixels(FONTS.buttonRegular.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const SubHeading = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color || COLORS.text.primary};\n\tfont-weight: ${FONTS.subHeading.fontWeight};\n\tfont-size: ${addPixels(FONTS.subHeading.fontSize)};\n\tline-height: ${addPixels(FONTS.subHeading.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const BodyRegular = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color || COLORS.text.primary};\n\tfont-weight: ${FONTS.bodyRegular.fontWeight};\n\tfont-size: ${addPixels(FONTS.bodyRegular.fontSize)};\n\tline-height: ${addPixels(FONTS.bodyRegular.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const Caption = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${COLORS.text.primary};\n\tfont-weight: ${FONTS.caption.fontWeight};\n\tfont-size: ${addPixels(FONTS.caption.fontSize)};\n\tline-height: ${addPixels(FONTS.caption.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const TextPlaceholder = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${COLORS.text.primary};\n\tfont-weight: ${FONTS.textPlaceholder.fontWeight};\n\tfont-size: ${addPixels(FONTS.textPlaceholder.fontSize)};\n\tline-height: ${addPixels(FONTS.textPlaceholder.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const TitleFour = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${COLORS.text.primary};\n\tfont-weight: ${FONTS.title4.fontWeight};\n\tfont-size: ${addPixels(FONTS.title4.fontSize)};\n\tline-height: ${addPixels(FONTS.title4.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const BodySmall = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${COLORS.text.primary};\n\tfont-weight: ${FONTS.bodySmall.fontWeight};\n\tfont-size: ${addPixels(FONTS.bodySmall.fontSize)};\n\tline-height: ${addPixels(FONTS.bodySmall.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const CaptionBold = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${COLORS.text.primary};\n\tfont-weight: ${FONTS.captionBold.fontWeight};\n\tfont-size: ${addPixels(FONTS.captionBold.fontSize)};\n\tline-height: ${addPixels(FONTS.captionBold.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const Tiny = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${COLORS.text.primary};\n\tfont-weight: ${FONTS.tiny.fontWeight};\n\tfont-size: ${addPixels(FONTS.tiny.fontSize)};\n\tline-height: ${addPixels(FONTS.tiny.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n"],"names":["addPixels","value","TitleXlarge","styled","props","COLORS","FONTS","TitleLarge","TitleMedium","SmallRegular","TitleRegular","TitleSmall","Display","BodyLarge","BodyPrimary","BodySecondary","ButtonRegularAI","BodyPrimaryLink","BodySecondaryLink","BodyCaption","AiBodyCaption","BodyTiny","BodyTinySemiBold","AiBodyTiny","ButtonLarge","ButtonLargeAI","ButtonRegular","SubHeading","BodyRegular","Caption","TextPlaceholder","TitleFour","BodySmall","CaptionBold","Tiny"],"mappings":"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"}

package/dist/esm/components/avatar/Avatar.d.ts

@@ -1,15 +1,16 @@
 import { default as React } from 'react';
 import { AVATAR_BACKGROUND, AVATAR_TYPES, SIZE } from './AvatarHelper';
 export declare const AVATAR_SIZE_VS_ICON_SIZE_MAP: {
+    EXTRA_SMALL: number;
     SMALL: number;
     MEDIUM: number;
-    INBOX: number;
     LARGE: number;
 };
 export declare const BACKGROUND_VS_TEXT_COLOR_MAP: {
     LIGHT: string;
     WHITE: string;
     DARK: string;
+    BRAND: string;
 };
 export type AvatarProps = {
     type: AVATAR_TYPES;

package/dist/esm/components/avatar/Avatar.js

@@ -1,82 +1,60 @@
 import { jsxs as g, jsx as e } from "react/jsx-runtime";
-import { useState as k } from "react";
-import { AvatarStyle as v } from "./Avatar.styled.js";
-import { SIZE as a, AVATAR_TYPES as r, AVATAR_BACKGROUND as h, AVATAR_SIZE_MAP as o } from "./AvatarHelper.js";
-import { BodyTiny as R, TitleSmall as w, TitleMedium as O } from "../TypographyStyle.js";
+import { useState as R } from "react";
+import { TitleMedium as k, TitleSmall as A, BodyTiny as w } from "../TypographyStyle.js";
 import { COLORS as i } from "../../constants/Theme.js";
-import A from "../../assets/icons/bik_livechat.svg.js";
+import O from "../../assets/icons/bik_livechat.svg.js";
 import u from "../../assets/icons/email-channel.svg.js";
 import d from "../../assets/icons/facebook_channel.svg.js";
-import z from "../../assets/icons/gmail.svg.js";
-import x from "../../assets/icons/instagram-channel.svg.js";
+import x from "../../assets/icons/gmail.svg.js";
+import z from "../../assets/icons/instagram-channel.svg.js";
 import C from "../../assets/icons/task.svg.js";
-import B from "../../assets/icons/whatsapp_color.svg.js";
-const n = {
-  [a.SMALL]: 16,
-  [a.MEDIUM]: 20,
-  [a.INBOX]: 24,
-  [a.LARGE]: 32
-}, c = {
-  [h.LIGHT]: i.content.secondary,
-  [h.WHITE]: i.content.secondary,
-  [h.DARK]: i.surface.standard
+import U from "../../assets/icons/whatsapp_color.svg.js";
+import { AvatarStyle as B } from "./Avatar.styled.js";
+import { SIZE as n, AVATAR_TYPES as r, AVATAR_BACKGROUND as o, AVATAR_SIZE_MAP as c } from "./AvatarHelper.js";
+const a = {
+  [n.EXTRA_SMALL]: 10,
+  [n.SMALL]: 16,
+  [n.MEDIUM]: 20,
+  [n.LARGE]: 32
+}, b = {
+  [o.LIGHT]: i.content.secondary,
+  [o.WHITE]: i.content.secondary,
+  [o.DARK]: i.surface.standard,
+  [o.BRAND]: i.background.inverseLight
 };
-var U = /* @__PURE__ */ ((t) => (t.INSTAGRAM = "instagram", t.MESSENGER = "messenger", t.WHATSAPP = "whatsapp", t.GMAIL = "gmail", t.LIVECHAT = "livechat", t.GOOGLE_BUSINESS_CHAT = "gbm", t.SHOPIFY = "shopify", t.FACEBOOK = "facebook", t.EMAIL = "email", t.SMTP = "smtp", t.FACEBOOK_CATALOG = "facebook-catalog", t.TASKS = "tasks", t.BIK_LIVECHAT = "livechat", t))(U || {});
-const Y = (t) => {
-  const [l, b] = k(!1), m = () => {
-    const s = (t.name || "").split(".").join(" ").split(" ").map((T) => T.charAt(0).toUpperCase()).slice(0, 2).join("");
-    if (t.size === a.SMALL)
-      return /* @__PURE__ */ e(
-        R,
-        {
-          style: { color: c[t.background] },
-          children: s
-        }
-      );
-    if (t.size === a.MEDIUM || t.size === a.INBOX)
-      return /* @__PURE__ */ e(
-        w,
-        {
-          style: { color: c[t.background] },
-          children: s
-        }
-      );
-    if (t.size === a.LARGE)
-      return /* @__PURE__ */ e(
-        O,
-        {
-          style: { color: c[t.background] },
-          children: s
-        }
-      );
-  }, I = () => t.useNameFallback && (!t.photoUrl || l) && t.name ? /* @__PURE__ */ e("div", { children: m() }) : t.useNameFallback && t.photoUrl && !l ? /* @__PURE__ */ e(
+var P = /* @__PURE__ */ ((t) => (t.INSTAGRAM = "instagram", t.MESSENGER = "messenger", t.WHATSAPP = "whatsapp", t.GMAIL = "gmail", t.LIVECHAT = "livechat", t.GOOGLE_BUSINESS_CHAT = "gbm", t.SHOPIFY = "shopify", t.FACEBOOK = "facebook", t.EMAIL = "email", t.SMTP = "smtp", t.FACEBOOK_CATALOG = "facebook-catalog", t.TASKS = "tasks", t.BIK_LIVECHAT = "livechat", t))(P || {});
+const q = (t) => {
+  const [s, I] = R(!1), m = () => {
+    const l = (t.name || "").split(".").join(" ").split(" ").map((v) => v.charAt(0).toUpperCase()).slice(0, 2).join(""), h = b[t.background];
+    return t.size === n.LARGE ? /* @__PURE__ */ e(k, { style: { color: h }, children: l }) : t.size === n.MEDIUM ? /* @__PURE__ */ e(A, { style: { color: h }, children: l }) : /* @__PURE__ */ e(w, { style: { color: h }, children: l });
+  }, f = () => t.useNameFallback && (!t.photoUrl || s) && t.name ? /* @__PURE__ */ e("div", { children: m() }) : t.useNameFallback && t.photoUrl && !s ? /* @__PURE__ */ e(
     "img",
     {
       alt: "",
-      width: o[t.size],
-      height: o[t.size],
+      width: c[t.size],
+      height: c[t.size],
       style: {
         borderRadius: t?.borderRadius || "50%",
         objectFit: "contain"
       },
       src: t.photoUrl,
       onError: () => {
-        b(!0);
+        I(!0);
       }
     }
   ) : /* @__PURE__ */ e(
     "img",
     {
       alt: "",
-      width: o[t.size],
-      height: o[t.size],
+      width: c[t.size],
+      height: c[t.size],
       style: {
         borderRadius: t?.borderRadius || "50%",
         objectFit: "contain"
       },
       src: t.photoUrl
     }
-  ), f = () => {
+  ), y = () => {
     switch (t.channelName) {
       case "email":
         return /* @__PURE__ */ e(u, { width: 11, height: 11 });
@@ -89,17 +67,17 @@ const Y = (t) => {
       case "messenger":
         return /* @__PURE__ */ e(d, { width: 11, height: 11 });
       case "instagram":
-        return /* @__PURE__ */ e(x, { width: 11, height: 11 });
+        return /* @__PURE__ */ e(z, { width: 11, height: 11 });
       case "whatsapp":
-        return /* @__PURE__ */ e(B, { width: 11, height: 11 });
+        return /* @__PURE__ */ e(U, { width: 11, height: 11 });
       case "gmail":
-        return /* @__PURE__ */ e(z, { width: 11, height: 11 });
+        return /* @__PURE__ */ e(x, { width: 11, height: 11 });
       case "tasks":
         return /* @__PURE__ */ e(C, { width: 11, height: 11 });
       case "livechat":
-        return /* @__PURE__ */ e(A, { width: 11, height: 11 });
+        return /* @__PURE__ */ e(O, { width: 11, height: 11 });
     }
-  }, y = () => t.status ? /* @__PURE__ */ e(
+  }, T = () => t.status ? /* @__PURE__ */ e(
     "div",
     {
       style: {
@@ -118,20 +96,20 @@ const Y = (t) => {
       },
       children: [
         /* @__PURE__ */ g(
-          v,
+          B,
           {
-            type: t.type === r.IMAGE && (l || !t.photoUrl) && t.useNameFallback && t.name ? r.INITIALS : t.type,
+            type: t.type === r.IMAGE && (s || !t.photoUrl) && t.useNameFallback && t.name ? r.INITIALS : t.type,
             size: t.size,
             background: t.background,
             children: [
-              t.type === r.IMAGE && I(),
+              t.type === r.IMAGE && f(),
               t.type === r.INITIALS && /* @__PURE__ */ e("div", { children: m() }),
               t.type === r.ICON && t.icon && /* @__PURE__ */ e(
                 t.icon,
                 {
-                  width: n[t.size],
-                  height: n[t.size],
-                  color: c[t.background]
+                  width: a[t.size],
+                  height: a[t.size],
+                  color: b[t.background]
                 }
               )
             ]
@@ -142,8 +120,8 @@ const Y = (t) => {
           {
             style: {
               position: "absolute",
-              left: n[t.size] + "px",
-              top: n[t.size] + "px",
+              left: a[t.size] + "px",
+              top: a[t.size] + "px",
               width: 14,
               height: 14,
               borderRadius: t?.borderRadius || "50%",
@@ -152,7 +130,7 @@ const Y = (t) => {
               backgroundColor: t.inboxSettings.isSelected ? t.inboxSettings.isComments ? i.content.primary : i.background.brandLight : t.inboxSettings.isComments ? i.content.primary : i.surface.standard,
               alignItems: "center"
             },
-            children: f()
+            children: y()
           }
         ),
         t.status && /* @__PURE__ */ e(
@@ -160,8 +138,8 @@ const Y = (t) => {
           {
             style: {
               position: "absolute",
-              left: n[t.size] + "px",
-              top: n[t.size] + "px",
+              left: a[t.size] + "px",
+              top: a[t.size] + "px",
               width: 11,
               height: 11,
               borderRadius: "50%",
@@ -170,7 +148,7 @@ const Y = (t) => {
               backgroundColor: i.surface.standard,
               alignItems: "center"
             },
-            children: y()
+            children: T()
           }
         )
       ]
@@ -178,9 +156,9 @@ const Y = (t) => {
   );
 };
 export {
-  n as AVATAR_SIZE_VS_ICON_SIZE_MAP,
-  Y as Avatar,
-  c as BACKGROUND_VS_TEXT_COLOR_MAP,
-  U as MESSAGE_CHANNELS
+  a as AVATAR_SIZE_VS_ICON_SIZE_MAP,
+  q as Avatar,
+  b as BACKGROUND_VS_TEXT_COLOR_MAP,
+  P as MESSAGE_CHANNELS
 };
 //# sourceMappingURL=Avatar.js.map

package/dist/esm/components/avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { AvatarStyle } from '@src/components/avatar/Avatar.styled';\nimport {\n\tAVATAR_BACKGROUND,\n\tAVATAR_SIZE_MAP,\n\tAVATAR_TYPES,\n\tSIZE,\n} from '@src/components/avatar/AvatarHelper';\nimport {\n\tBodyTiny,\n\tTitleMedium,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport BikLivechatIcon from '../../assets/icons/bik_livechat.svg';\nimport EmailIcon from '../../assets/icons/email-channel.svg';\nimport FacebookIcon from '../../assets/icons/facebook_channel.svg';\nimport GmailIcon from '../../assets/icons/gmail.svg';\nimport InstagramIcon from '../../assets/icons/instagram-channel.svg';\nimport TaskIcon from '../../assets/icons/task.svg';\nimport WhatsappIcon from '../../assets/icons/whatsapp_color.svg';\n\nexport const AVATAR_SIZE_VS_ICON_SIZE_MAP = {\n\t[SIZE.SMALL]: 16,\n\t[SIZE.MEDIUM]: 20,\n\t[SIZE.INBOX]: 24,\n\t[SIZE.LARGE]: 32,\n};\n\nexport const BACKGROUND_VS_TEXT_COLOR_MAP = {\n\t[AVATAR_BACKGROUND.LIGHT]: COLORS.content.secondary,\n\t[AVATAR_BACKGROUND.WHITE]: COLORS.content.secondary,\n\t[AVATAR_BACKGROUND.DARK]: COLORS.surface.standard,\n};\n\nexport type AvatarProps = {\n\ttype: AVATAR_TYPES;\n\tsize: SIZE;\n\tbackground: AVATAR_BACKGROUND;\n\tname?: string;\n\tphotoUrl?: string;\n\ticon?: React.FC<{ width: number; height: number; color: string }>;\n\tuseNameFallback?: boolean;\n\tchannelName?: MESSAGE_CHANNELS;\n\tborderRadius?: string;\n\tinboxSettings?: {\n\t\tisSelected: boolean;\n\t\tisComments: boolean;\n\t};\n\tstatus?: 'ONLINE' | 'OFFLINE' | 'AWAY';\n};\n\nexport const enum MESSAGE_CHANNELS {\n\tINSTAGRAM = 'instagram',\n\tMESSENGER = 'messenger',\n\tWHATSAPP = 'whatsapp',\n\tGMAIL = 'gmail',\n\tLIVECHAT = 'livechat',\n\tGOOGLE_BUSINESS_CHAT = 'gbm',\n\tSHOPIFY = 'shopify',\n\tFACEBOOK = 'facebook',\n\tEMAIL = 'email',\n\tSMTP = 'smtp',\n\tFACEBOOK_CATALOG = 'facebook-catalog',\n\tTASKS = 'tasks',\n\tBIK_LIVECHAT = 'livechat',\n}\n\nexport const Avatar: React.FC<AvatarProps> = (props) => {\n\tconst [imgError, setImgError] = useState<boolean>(false);\n\n\tconst getInitials = () => {\n\t\tconst initials = (props.name || '')\n\t\t\t.split('.')\n\t\t\t.join(' ')\n\t\t\t.split(' ')\n\t\t\t.map((e) => e.charAt(0).toUpperCase())\n\t\t\t.slice(0, 2)\n\t\t\t.join('');\n\n\t\tif (props.size === SIZE.SMALL) {\n\t\t\treturn (\n\t\t\t\t<BodyTiny\n\t\t\t\t\tstyle={{ color: BACKGROUND_VS_TEXT_COLOR_MAP[props.background] }}\n\t\t\t\t>\n\t\t\t\t\t{initials}\n\t\t\t\t</BodyTiny>\n\t\t\t);\n\t\t} else if (props.size === SIZE.MEDIUM || props.size === SIZE.INBOX) {\n\t\t\treturn (\n\t\t\t\t<TitleSmall\n\t\t\t\t\tstyle={{ color: BACKGROUND_VS_TEXT_COLOR_MAP[props.background] }}\n\t\t\t\t>\n\t\t\t\t\t{initials}\n\t\t\t\t</TitleSmall>\n\t\t\t);\n\t\t} else if (props.size === SIZE.LARGE) {\n\t\t\treturn (\n\t\t\t\t<TitleMedium\n\t\t\t\t\tstyle={{ color: BACKGROUND_VS_TEXT_COLOR_MAP[props.background] }}\n\t\t\t\t>\n\t\t\t\t\t{initials}\n\t\t\t\t</TitleMedium>\n\t\t\t);\n\t\t}\n\t};\n\n\tconst getImageBlock = () => {\n\t\tif (props.useNameFallback && (!props.photoUrl || imgError) && props.name) {\n\t\t\treturn <div>{getInitials()}</div>;\n\t\t}\n\t\tif (props.useNameFallback && props.photoUrl && !imgError) {\n\t\t\treturn (\n\t\t\t\t<img\n\t\t\t\t\talt=\"\"\n\t\t\t\t\twidth={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\t\theight={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tborderRadius: props?.borderRadius || '50%',\n\t\t\t\t\t\tobjectFit: 'contain',\n\t\t\t\t\t}}\n\t\t\t\t\tsrc={props.photoUrl}\n\t\t\t\t\tonError={() => {\n\t\t\t\t\t\tsetImgError(true);\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<img\n\t\t\t\talt=\"\"\n\t\t\t\twidth={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\theight={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\tstyle={{\n\t\t\t\t\tborderRadius: props?.borderRadius || '50%',\n\t\t\t\t\tobjectFit: 'contain',\n\t\t\t\t}}\n\t\t\t\tsrc={props.photoUrl}\n\t\t\t/>\n\t\t);\n\t};\n\n\tconst getChannelIcon = () => {\n\t\tswitch (props.channelName) {\n\t\t\tcase MESSAGE_CHANNELS.EMAIL:\n\t\t\t\treturn <EmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.SMTP:\n\t\t\t\treturn <EmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.FACEBOOK:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.FACEBOOK_CATALOG:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.MESSENGER:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.INSTAGRAM:\n\t\t\t\treturn <InstagramIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.WHATSAPP:\n\t\t\t\treturn <WhatsappIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.GMAIL:\n\t\t\t\treturn <GmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.TASKS:\n\t\t\t\treturn <TaskIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.BIK_LIVECHAT:\n\t\t\t\treturn <BikLivechatIcon width={11} height={11} />;\n\t\t}\n\t};\n\n\tconst getOnlineStatusIcon = () => {\n\t\treturn props.status ? (\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\tprops.status === 'ONLINE'\n\t\t\t\t\t\t\t? COLORS.special.whatsapp.brand\n\t\t\t\t\t\t\t: COLORS.content.inactive,\n\t\t\t\t\twidth: '8px',\n\t\t\t\t\theight: '8px',\n\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t}}\n\t\t\t></div>\n\t\t) : null;\n\t};\n\n\tconst getPropsType = () => {\n\t\tif (\n\t\t\tprops.type === AVATAR_TYPES.IMAGE &&\n\t\t\t(imgError || !props.photoUrl) &&\n\t\t\tprops.useNameFallback &&\n\t\t\tprops.name\n\t\t) {\n\t\t\treturn AVATAR_TYPES.INITIALS;\n\t\t}\n\n\t\treturn props.type;\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tposition: 'relative',\n\t\t\t}}\n\t\t>\n\t\t\t<AvatarStyle\n\t\t\t\ttype={getPropsType()}\n\t\t\t\tsize={props.size}\n\t\t\t\tbackground={props.background}\n\t\t\t>\n\t\t\t\t{props.type === AVATAR_TYPES.IMAGE && getImageBlock()}\n\t\t\t\t{props.type === AVATAR_TYPES.INITIALS && <div>{getInitials()}</div>}\n\t\t\t\t{props.type === AVATAR_TYPES.ICON && props.icon && (\n\t\t\t\t\t<props.icon\n\t\t\t\t\t\twidth={AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size]}\n\t\t\t\t\t\theight={AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size]}\n\t\t\t\t\t\tcolor={BACKGROUND_VS_TEXT_COLOR_MAP[props.background]}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</AvatarStyle>\n\t\t\t{props.inboxSettings && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\tleft: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\ttop: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\twidth: 14,\n\t\t\t\t\t\theight: 14,\n\t\t\t\t\t\tborderRadius: props?.borderRadius || '50%',\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\tbackgroundColor: props.inboxSettings.isSelected\n\t\t\t\t\t\t\t? props.inboxSettings.isComments\n\t\t\t\t\t\t\t\t? COLORS.content.primary\n\t\t\t\t\t\t\t\t: COLORS.background.brandLight\n\t\t\t\t\t\t\t: props.inboxSettings.isComments\n\t\t\t\t\t\t\t? COLORS.content.primary\n\t\t\t\t\t\t\t: COLORS.surface.standard,\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{getChannelIcon()}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t{props.status && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\tleft: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\ttop: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\twidth: 11,\n\t\t\t\t\t\theight: 11,\n\t\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\tbackgroundColor: COLORS.surface.standard,\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{getOnlineStatusIcon()}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n"],"names":["AVATAR_SIZE_VS_ICON_SIZE_MAP","SIZE","BACKGROUND_VS_TEXT_COLOR_MAP","AVATAR_BACKGROUND","COLORS","MESSAGE_CHANNELS","Avatar","props","imgError","setImgError","useState","getInitials","initials","e","jsx","BodyTiny","TitleSmall","TitleMedium","getImageBlock","AVATAR_SIZE_MAP","getChannelIcon","EmailIcon","FacebookIcon","InstagramIcon","WhatsappIcon","GmailIcon","TaskIcon","BikLivechatIcon","getOnlineStatusIcon","jsxs","AvatarStyle","AVATAR_TYPES"],"mappings":"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"}
+{"version":3,"file":"Avatar.js","sources":["../../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport {\n\tBodyTiny,\n\tTitleMedium,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport BikLivechatIcon from '../../assets/icons/bik_livechat.svg';\nimport EmailIcon from '../../assets/icons/email-channel.svg';\nimport FacebookIcon from '../../assets/icons/facebook_channel.svg';\nimport GmailIcon from '../../assets/icons/gmail.svg';\nimport InstagramIcon from '../../assets/icons/instagram-channel.svg';\nimport TaskIcon from '../../assets/icons/task.svg';\nimport WhatsappIcon from '../../assets/icons/whatsapp_color.svg';\nimport { AvatarStyle } from './Avatar.styled';\nimport {\n\tAVATAR_BACKGROUND,\n\tAVATAR_SIZE_MAP,\n\tAVATAR_TYPES,\n\tSIZE,\n} from './AvatarHelper';\n\nexport const AVATAR_SIZE_VS_ICON_SIZE_MAP = {\n\t[SIZE.EXTRA_SMALL]: 10,\n\t[SIZE.SMALL]: 16,\n\t[SIZE.MEDIUM]: 20,\n\t[SIZE.LARGE]: 32,\n};\n\nexport const BACKGROUND_VS_TEXT_COLOR_MAP = {\n\t[AVATAR_BACKGROUND.LIGHT]: COLORS.content.secondary,\n\t[AVATAR_BACKGROUND.WHITE]: COLORS.content.secondary,\n\t[AVATAR_BACKGROUND.DARK]: COLORS.surface.standard,\n\t[AVATAR_BACKGROUND.BRAND]: COLORS.background.inverseLight,\n};\n\nexport type AvatarProps = {\n\ttype: AVATAR_TYPES;\n\tsize: SIZE;\n\tbackground: AVATAR_BACKGROUND;\n\tname?: string;\n\tphotoUrl?: string;\n\ticon?: React.FC<{ width: number; height: number; color: string }>;\n\tuseNameFallback?: boolean;\n\tchannelName?: MESSAGE_CHANNELS;\n\tborderRadius?: string;\n\tinboxSettings?: {\n\t\tisSelected: boolean;\n\t\tisComments: boolean;\n\t};\n\tstatus?: 'ONLINE' | 'OFFLINE' | 'AWAY';\n};\n\nexport const enum MESSAGE_CHANNELS {\n\tINSTAGRAM = 'instagram',\n\tMESSENGER = 'messenger',\n\tWHATSAPP = 'whatsapp',\n\tGMAIL = 'gmail',\n\tLIVECHAT = 'livechat',\n\tGOOGLE_BUSINESS_CHAT = 'gbm',\n\tSHOPIFY = 'shopify',\n\tFACEBOOK = 'facebook',\n\tEMAIL = 'email',\n\tSMTP = 'smtp',\n\tFACEBOOK_CATALOG = 'facebook-catalog',\n\tTASKS = 'tasks',\n\tBIK_LIVECHAT = 'livechat',\n}\n\nexport const Avatar: React.FC<AvatarProps> = (props) => {\n\tconst [imgError, setImgError] = useState<boolean>(false);\n\n\tconst getInitials = () => {\n\t\tconst initials = (props.name || '')\n\t\t\t.split('.')\n\t\t\t.join(' ')\n\t\t\t.split(' ')\n\t\t\t.map((e) => e.charAt(0).toUpperCase())\n\t\t\t.slice(0, 2)\n\t\t\t.join('');\n\n\t\tconst color = BACKGROUND_VS_TEXT_COLOR_MAP[props.background];\n\n\t\tif (props.size === SIZE.LARGE) {\n\t\t\treturn <TitleMedium style={{ color }}>{initials}</TitleMedium>;\n\t\t}\n\t\tif (props.size === SIZE.MEDIUM) {\n\t\t\treturn <TitleSmall style={{ color }}>{initials}</TitleSmall>;\n\t\t}\n\t\treturn <BodyTiny style={{ color }}>{initials}</BodyTiny>;\n\t};\n\n\tconst getImageBlock = () => {\n\t\tif (props.useNameFallback && (!props.photoUrl || imgError) && props.name) {\n\t\t\treturn <div>{getInitials()}</div>;\n\t\t}\n\t\tif (props.useNameFallback && props.photoUrl && !imgError) {\n\t\t\treturn (\n\t\t\t\t<img\n\t\t\t\t\talt=\"\"\n\t\t\t\t\twidth={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\t\theight={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tborderRadius: props?.borderRadius || '50%',\n\t\t\t\t\t\tobjectFit: 'contain',\n\t\t\t\t\t}}\n\t\t\t\t\tsrc={props.photoUrl}\n\t\t\t\t\tonError={() => {\n\t\t\t\t\t\tsetImgError(true);\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<img\n\t\t\t\talt=\"\"\n\t\t\t\twidth={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\theight={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\tstyle={{\n\t\t\t\t\tborderRadius: props?.borderRadius || '50%',\n\t\t\t\t\tobjectFit: 'contain',\n\t\t\t\t}}\n\t\t\t\tsrc={props.photoUrl}\n\t\t\t/>\n\t\t);\n\t};\n\n\tconst getChannelIcon = () => {\n\t\tswitch (props.channelName) {\n\t\t\tcase MESSAGE_CHANNELS.EMAIL:\n\t\t\t\treturn <EmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.SMTP:\n\t\t\t\treturn <EmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.FACEBOOK:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.FACEBOOK_CATALOG:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.MESSENGER:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.INSTAGRAM:\n\t\t\t\treturn <InstagramIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.WHATSAPP:\n\t\t\t\treturn <WhatsappIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.GMAIL:\n\t\t\t\treturn <GmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.TASKS:\n\t\t\t\treturn <TaskIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.BIK_LIVECHAT:\n\t\t\t\treturn <BikLivechatIcon width={11} height={11} />;\n\t\t}\n\t};\n\n\tconst getOnlineStatusIcon = () => {\n\t\treturn props.status ? (\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\tprops.status === 'ONLINE'\n\t\t\t\t\t\t\t? COLORS.special.whatsapp.brand\n\t\t\t\t\t\t\t: COLORS.content.inactive,\n\t\t\t\t\twidth: '8px',\n\t\t\t\t\theight: '8px',\n\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t}}\n\t\t\t></div>\n\t\t) : null;\n\t};\n\n\tconst getPropsType = () => {\n\t\tif (\n\t\t\tprops.type === AVATAR_TYPES.IMAGE &&\n\t\t\t(imgError || !props.photoUrl) &&\n\t\t\tprops.useNameFallback &&\n\t\t\tprops.name\n\t\t) {\n\t\t\treturn AVATAR_TYPES.INITIALS;\n\t\t}\n\n\t\treturn props.type;\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tposition: 'relative',\n\t\t\t}}\n\t\t>\n\t\t\t<AvatarStyle\n\t\t\t\ttype={getPropsType()}\n\t\t\t\tsize={props.size}\n\t\t\t\tbackground={props.background}\n\t\t\t>\n\t\t\t\t{props.type === AVATAR_TYPES.IMAGE && getImageBlock()}\n\t\t\t\t{props.type === AVATAR_TYPES.INITIALS && <div>{getInitials()}</div>}\n\t\t\t\t{props.type === AVATAR_TYPES.ICON && props.icon && (\n\t\t\t\t\t<props.icon\n\t\t\t\t\t\twidth={AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size]}\n\t\t\t\t\t\theight={AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size]}\n\t\t\t\t\t\tcolor={BACKGROUND_VS_TEXT_COLOR_MAP[props.background]}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</AvatarStyle>\n\t\t\t{props.inboxSettings && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\tleft: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\ttop: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\twidth: 14,\n\t\t\t\t\t\theight: 14,\n\t\t\t\t\t\tborderRadius: props?.borderRadius || '50%',\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\tbackgroundColor: props.inboxSettings.isSelected\n\t\t\t\t\t\t\t? props.inboxSettings.isComments\n\t\t\t\t\t\t\t\t? COLORS.content.primary\n\t\t\t\t\t\t\t\t: COLORS.background.brandLight\n\t\t\t\t\t\t\t: props.inboxSettings.isComments\n\t\t\t\t\t\t\t? COLORS.content.primary\n\t\t\t\t\t\t\t: COLORS.surface.standard,\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{getChannelIcon()}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t{props.status && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\tleft: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\ttop: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\twidth: 11,\n\t\t\t\t\t\theight: 11,\n\t\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\tbackgroundColor: COLORS.surface.standard,\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{getOnlineStatusIcon()}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n"],"names":["AVATAR_SIZE_VS_ICON_SIZE_MAP","SIZE","BACKGROUND_VS_TEXT_COLOR_MAP","AVATAR_BACKGROUND","COLORS","MESSAGE_CHANNELS","Avatar","props","imgError","setImgError","useState","getInitials","initials","e","color","TitleMedium","TitleSmall","BodyTiny","getImageBlock","jsx","AVATAR_SIZE_MAP","getChannelIcon","EmailIcon","FacebookIcon","InstagramIcon","WhatsappIcon","GmailIcon","TaskIcon","BikLivechatIcon","getOnlineStatusIcon","jsxs","AvatarStyle","AVATAR_TYPES"],"mappings":"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"}

package/dist/esm/components/avatar/Avatar.styled.js

@@ -1,14 +1,14 @@
-import a from "styled-components";
-import { AVATAR_SIZE_MAP as t, AVATAR_TYPES as d, AVATAR_BACKGROUND as e } from "./AvatarHelper.js";
-import { COLORS as o } from "../../constants/Theme.js";
-const A = a.div`
-	width: ${(r) => t[r.size] + "px"};
-	height: ${(r) => t[r.size] + "px"};
+import o from "styled-components";
+import { AVATAR_SIZE_MAP as d, AVATAR_TYPES as t, AVATAR_BACKGROUND as e } from "./AvatarHelper.js";
+import { COLORS as a } from "../../constants/Theme.js";
+const A = o.div`
+	width: ${(r) => d[r.size] + "px"};
+	height: ${(r) => d[r.size] + "px"};
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	background-color: ${(r) => r.type === d.IMAGE ? "null" : r.background === e.LIGHT ? o.background.base : r.background === e.WHITE ? o.surface.standard : o.background.inverse};
-	border: ${(r) => r.background === e.LIGHT || r.background === e.WHITE ? "1px solid " + o.stroke.primary : 0};
+	background-color: ${(r) => r.type === t.IMAGE ? "null" : r.background === e.LIGHT ? a.background.base : r.background === e.WHITE ? a.surface.standard : r.background === e.BRAND ? a.background.brandLight : a.background.inverse};
+	border: ${(r) => r.background === e.LIGHT || r.background === e.WHITE ? "1px solid " + a.stroke.primary : 0};
 	border-radius: 50%;
 `;
 export {

package/dist/esm/components/avatar/Avatar.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.styled.js","sources":["../../../../src/components/avatar/Avatar.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport {\n\tAVATAR_BACKGROUND,\n\tAVATAR_SIZE_MAP,\n\tAVATAR_TYPES,\n\tSIZE,\n} from '@src/components/avatar/AvatarHelper';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const AvatarStyle = styled.div<{\n\tsize: SIZE;\n\tbackground: AVATAR_BACKGROUND;\n\ttype: AVATAR_TYPES;\n}>`\n\twidth: ${(props) => AVATAR_SIZE_MAP[props.size] + 'px'};\n\theight: ${(props) => AVATAR_SIZE_MAP[props.size] + 'px'};\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbackground-color: ${(props) =>\n\t\tprops.type === AVATAR_TYPES.IMAGE\n\t\t\t? 'null'\n\t\t\t: props.background === AVATAR_BACKGROUND.LIGHT\n\t\t\t? COLORS.background.base\n\t\t\t: props.background === AVATAR_BACKGROUND.WHITE\n\t\t\t? COLORS.surface.standard\n\t\t\t: COLORS.background.inverse};\n\tborder: ${(props) =>\n\t\tprops.background === AVATAR_BACKGROUND.LIGHT ||\n\t\tprops.background === AVATAR_BACKGROUND.WHITE\n\t\t\t? '1px solid ' + COLORS.stroke.primary\n\t\t\t: 0};\n\tborder-radius: 50%;\n`;\n"],"names":["AvatarStyle","styled","props","AVATAR_SIZE_MAP","AVATAR_TYPES","AVATAR_BACKGROUND","COLORS"],"mappings":";;;AASO,MAAMA,IAAcC,EAAO;AAAA,UAKxB,CAACC,MAAUC,EAAgBD,EAAM,IAAI,IAAI,IAAI;AAAA,WAC5C,CAACA,MAAUC,EAAgBD,EAAM,IAAI,IAAI,IAAI;AAAA;AAAA;AAAA;AAAA,qBAInC,CAACA,MACpBA,EAAM,SAASE,EAAa,QACzB,SACAF,EAAM,eAAeG,EAAkB,QACvCC,EAAO,WAAW,OAClBJ,EAAM,eAAeG,EAAkB,QACvCC,EAAO,QAAQ,WACfA,EAAO,WAAW,OAAO;AAAA,WACnB,CAACJ,MACVA,EAAM,eAAeG,EAAkB,SACvCH,EAAM,eAAeG,EAAkB,QACpC,eAAeC,EAAO,OAAO,UAC7B,CAAC;AAAA;AAAA;"}
+{"version":3,"file":"Avatar.styled.js","sources":["../../../../src/components/avatar/Avatar.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport {\n\tAVATAR_BACKGROUND,\n\tAVATAR_SIZE_MAP,\n\tAVATAR_TYPES,\n\tSIZE,\n} from '@src/components/avatar/AvatarHelper';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const AvatarStyle = styled.div<{\n\tsize: SIZE;\n\tbackground: AVATAR_BACKGROUND;\n\ttype: AVATAR_TYPES;\n}>`\n\twidth: ${(props) => AVATAR_SIZE_MAP[props.size] + 'px'};\n\theight: ${(props) => AVATAR_SIZE_MAP[props.size] + 'px'};\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbackground-color: ${(props) =>\n\t\tprops.type === AVATAR_TYPES.IMAGE\n\t\t\t? 'null'\n\t\t\t: props.background === AVATAR_BACKGROUND.LIGHT\n\t\t\t? COLORS.background.base\n\t\t\t: props.background === AVATAR_BACKGROUND.WHITE\n\t\t\t? COLORS.surface.standard\n\t\t\t: props.background === AVATAR_BACKGROUND.BRAND\n\t\t\t? COLORS.background.brandLight\n\t\t\t: COLORS.background.inverse};\n\tborder: ${(props) =>\n\t\tprops.background === AVATAR_BACKGROUND.LIGHT ||\n\t\tprops.background === AVATAR_BACKGROUND.WHITE\n\t\t\t? '1px solid ' + COLORS.stroke.primary\n\t\t\t: 0};\n\tborder-radius: 50%;\n`;\n"],"names":["AvatarStyle","styled","props","AVATAR_SIZE_MAP","AVATAR_TYPES","AVATAR_BACKGROUND","COLORS"],"mappings":";;;AASO,MAAMA,IAAcC,EAAO;AAAA,UAKxB,CAACC,MAAUC,EAAgBD,EAAM,IAAI,IAAI,IAAI;AAAA,WAC5C,CAACA,MAAUC,EAAgBD,EAAM,IAAI,IAAI,IAAI;AAAA;AAAA;AAAA;AAAA,qBAInC,CAACA,MACpBA,EAAM,SAASE,EAAa,QACzB,SACAF,EAAM,eAAeG,EAAkB,QACvCC,EAAO,WAAW,OAClBJ,EAAM,eAAeG,EAAkB,QACvCC,EAAO,QAAQ,WACfJ,EAAM,eAAeG,EAAkB,QACvCC,EAAO,WAAW,aAClBA,EAAO,WAAW,OAAO;AAAA,WACnB,CAACJ,MACVA,EAAM,eAAeG,EAAkB,SACvCH,EAAM,eAAeG,EAAkB,QACpC,eAAeC,EAAO,OAAO,UAC7B,CAAC;AAAA;AAAA;"}

package/dist/esm/components/avatar/AvatarHelper.d.ts

@@ -4,19 +4,20 @@ export declare enum AVATAR_TYPES {
     ICON = "ICON"
 }
 export declare enum SIZE {
+    EXTRA_SMALL = "EXTRA_SMALL",
     SMALL = "SMALL",
     MEDIUM = "MEDIUM",
-    LARGE = "LARGE",
-    INBOX = "INBOX"
+    LARGE = "LARGE"
 }
 export declare enum AVATAR_BACKGROUND {
     LIGHT = "LIGHT",
     DARK = "DARK",
-    WHITE = "WHITE"
+    WHITE = "WHITE",
+    BRAND = "BRAND"
 }
 export declare const AVATAR_SIZE_MAP: {
+    EXTRA_SMALL: number;
     SMALL: number;
     MEDIUM: number;
     LARGE: number;
-    INBOX: number;
 };

package/dist/esm/components/avatar/AvatarHelper.js

@@ -1,14 +1,14 @@
-var L = /* @__PURE__ */ ((I) => (I.IMAGE = "IMAGE", I.INITIALS = "INITIALS", I.ICON = "ICON", I))(L || {}), M = /* @__PURE__ */ ((I) => (I.SMALL = "SMALL", I.MEDIUM = "MEDIUM", I.LARGE = "LARGE", I.INBOX = "INBOX", I))(M || {}), r = /* @__PURE__ */ ((I) => (I.LIGHT = "LIGHT", I.DARK = "DARK", I.WHITE = "WHITE", I))(r || {});
+var I = /* @__PURE__ */ ((L) => (L.IMAGE = "IMAGE", L.INITIALS = "INITIALS", L.ICON = "ICON", L))(I || {}), M = /* @__PURE__ */ ((L) => (L.EXTRA_SMALL = "EXTRA_SMALL", L.SMALL = "SMALL", L.MEDIUM = "MEDIUM", L.LARGE = "LARGE", L))(M || {}), r = /* @__PURE__ */ ((L) => (L.LIGHT = "LIGHT", L.DARK = "DARK", L.WHITE = "WHITE", L.BRAND = "BRAND", L))(r || {});
 const E = {
+  EXTRA_SMALL: 16,
   SMALL: 24,
   MEDIUM: 40,
-  LARGE: 64,
-  INBOX: 30
+  LARGE: 64
 };
 export {
   r as AVATAR_BACKGROUND,
   E as AVATAR_SIZE_MAP,
-  L as AVATAR_TYPES,
+  I as AVATAR_TYPES,
   M as SIZE
 };
 //# sourceMappingURL=AvatarHelper.js.map