@bikdotai/bik-component-library 0.0.840-tools-beta.5 → 0.0.841-beta.0

package/dist/esm/components/analytics-chips-and-dropdowns/AnalyticsChip.js

@@ -1,6 +1,6 @@
 import { jsxs as l, jsx as o } from "react/jsx-runtime";
 import y from "../../assets/icons/info.svg.js";
-import { BASE_COLORS as r } from "../../constants/Theme.js";
+import { BASE_COLORS as t } from "../../constants/Theme.js";
 import { BodyCaption as C, TitleLarge as f } from "../TypographyStyle.js";
 import { AnalyticsChipChannelFooter as g } from "./AnalyticsChipChannelFooter.js";
 import { AnalyticsChipContainer as x } from "./CommonStyles.js";
@@ -10,11 +10,11 @@ const L = (e) => {
     title: n,
     primaryValue: a,
     titleColor: c,
-    captionColor: s = r.grayscale[700],
-    backgroundColor: p = r.grayscale[50],
-    width: m = "224.67px",
-    extraJSX: h,
-    tooltipContent: t,
+    captionColor: s = t.grayscale[700],
+    backgroundColor: p = t.grayscale[50],
+    width: h = "224.67px",
+    extraJSX: m,
+    tooltipContent: r,
     channelConfig: i,
     style: d
   } = e;
@@ -23,22 +23,23 @@ const L = (e) => {
     {
       style: d ?? {},
       backgroundColor: p,
-      width: m,
+      width: h,
       children: [
         /* @__PURE__ */ l("div", { className: "sub--container", children: [
           /* @__PURE__ */ o(C, { style: { color: s }, children: n }),
-          t && /* @__PURE__ */ o(u, { body: t, children: /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(
+          r && /* @__PURE__ */ o(u, { body: r, children: /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(
             y,
             {
+              "data-test": "analytics-chip-tooltip-icon",
               height: 14.67,
               width: 14.67,
-              color: r.grayscale[500]
+              color: t.grayscale[500]
             }
           ) }) })
         ] }),
         /* @__PURE__ */ o(f, { style: { color: c }, children: a }),
         i && /* @__PURE__ */ o(g, { channelConfig: i }),
-        h
+        m
       ]
     }
   );

package/dist/esm/components/analytics-chips-and-dropdowns/AnalyticsChip.js.map

@@ -1 +1 @@
-{"version":3,"file":"AnalyticsChip.js","sources":["../../../../src/components/analytics-chips-and-dropdowns/AnalyticsChip.tsx"],"sourcesContent":["import Info from '@src/assets/icons/info.svg';\nimport React from 'react';\nimport { Tooltip } from '@src/components/tooltips';\nimport { BASE_COLORS } from '@src/constants/Theme';\nimport { BodyCaption, TitleLarge } from '../TypographyStyle';\nimport { AnalyticsChipInterface } from './AnalyticsChip.model';\nimport { AnalyticsChipChannelFooter } from './AnalyticsChipChannelFooter';\nimport { AnalyticsChipContainer } from './CommonStyles';\n\nexport const AnalyticsChip: React.FC<AnalyticsChipInterface> = (props) => {\n\tconst {\n\t\ttitle,\n\t\tprimaryValue,\n\t\ttitleColor,\n\t\tcaptionColor = BASE_COLORS.grayscale[700],\n\t\tbackgroundColor = BASE_COLORS.grayscale[50],\n\t\twidth = '224.67px',\n\t\textraJSX,\n\t\ttooltipContent,\n\t\tchannelConfig,\n\t\tstyle,\n\t} = props;\n\treturn (\n\t\t<AnalyticsChipContainer\n\t\t\tstyle={style ?? {}}\n\t\t\tbackgroundColor={backgroundColor}\n\t\t\twidth={width}\n\t\t>\n\t\t\t<div className=\"sub--container\">\n\t\t\t\t<BodyCaption style={{ color: captionColor }}>{title}</BodyCaption>\n\t\t\t\t{tooltipContent && (\n\t\t\t\t\t<Tooltip body={tooltipContent}>\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<Info\n\t\t\t\t\t\t\t\theight={14.67}\n\t\t\t\t\t\t\t\twidth={14.67}\n\t\t\t\t\t\t\t\tcolor={BASE_COLORS.grayscale[500]}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t<TitleLarge style={{ color: titleColor }}>{primaryValue}</TitleLarge>\n\t\t\t{channelConfig && (\n\t\t\t\t<AnalyticsChipChannelFooter channelConfig={channelConfig} />\n\t\t\t)}\n\t\t\t{extraJSX}\n\t\t</AnalyticsChipContainer>\n\t);\n};\n"],"names":["AnalyticsChip","props","title","primaryValue","titleColor","captionColor","BASE_COLORS","backgroundColor","width","extraJSX","tooltipContent","channelConfig","style","jsxs","AnalyticsChipContainer","jsx","BodyCaption","Tooltip","Info","TitleLarge","AnalyticsChipChannelFooter"],"mappings":";;;;;;;AASO,MAAMA,IAAkD,CAACC,MAAU;AACzE,QAAM;AAAA,IACL,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,YAAAC;AAAA,IACA,cAAAC,IAAeC,EAAY,UAAU,GAAG;AAAA,IACxC,iBAAAC,IAAkBD,EAAY,UAAU,EAAE;AAAA,IAC1C,OAAAE,IAAQ;AAAA,IACR,UAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,OAAAC;AAAA,EAAA,IACGX;AACJ,SACC,gBAAAY;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,OAAOF,KAAS,CAAA;AAAA,MAChB,iBAAAL;AAAA,MACA,OAAAC;AAAA,MAEA,UAAA;AAAA,QAAA,gBAAAK,EAAC,OAAA,EAAI,WAAU,kBACd,UAAA;AAAA,UAAA,gBAAAE,EAACC,KAAY,OAAO,EAAE,OAAOX,EAAA,GAAiB,UAAAH,GAAM;AAAA,UACnDQ,KACA,gBAAAK,EAACE,GAAA,EAAQ,MAAMP,GACd,4BAAC,OAAA,EACA,UAAA,gBAAAK;AAAA,YAACG;AAAAA,YAAA;AAAA,cACA,QAAQ;AAAA,cACR,OAAO;AAAA,cACP,OAAOZ,EAAY,UAAU,GAAG;AAAA,YAAA;AAAA,UAAA,GAElC,EAAA,CACD;AAAA,QAAA,GAEF;AAAA,0BACCa,GAAA,EAAW,OAAO,EAAE,OAAOf,EAAA,GAAe,UAAAD,GAAa;AAAA,QACvDQ,KACA,gBAAAI,EAACK,GAAA,EAA2B,eAAAT,EAAA,CAA8B;AAAA,QAE1DF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGJ;"}
+{"version":3,"file":"AnalyticsChip.js","sources":["../../../../src/components/analytics-chips-and-dropdowns/AnalyticsChip.tsx"],"sourcesContent":["import Info from '@src/assets/icons/info.svg';\nimport React from 'react';\nimport { Tooltip } from '@src/components/tooltips';\nimport { BASE_COLORS } from '@src/constants/Theme';\nimport { BodyCaption, TitleLarge } from '../TypographyStyle';\nimport { AnalyticsChipInterface } from './AnalyticsChip.model';\nimport { AnalyticsChipChannelFooter } from './AnalyticsChipChannelFooter';\nimport { AnalyticsChipContainer } from './CommonStyles';\n\nexport const AnalyticsChip: React.FC<AnalyticsChipInterface> = (props) => {\n\tconst {\n\t\ttitle,\n\t\tprimaryValue,\n\t\ttitleColor,\n\t\tcaptionColor = BASE_COLORS.grayscale[700],\n\t\tbackgroundColor = BASE_COLORS.grayscale[50],\n\t\twidth = '224.67px',\n\t\textraJSX,\n\t\ttooltipContent,\n\t\tchannelConfig,\n\t\tstyle,\n\t} = props;\n\treturn (\n\t\t<AnalyticsChipContainer\n\t\t\tstyle={style ?? {}}\n\t\t\tbackgroundColor={backgroundColor}\n\t\t\twidth={width}\n\t\t>\n\t\t\t<div className=\"sub--container\">\n\t\t\t\t<BodyCaption style={{ color: captionColor }}>{title}</BodyCaption>\n\t\t\t\t{tooltipContent && (\n\t\t\t\t\t<Tooltip body={tooltipContent}>\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<Info\n\t\t\t\t\t\t\t\tdata-test=\"analytics-chip-tooltip-icon\"\n\t\t\t\t\t\t\t\theight={14.67}\n\t\t\t\t\t\t\t\twidth={14.67}\n\t\t\t\t\t\t\t\tcolor={BASE_COLORS.grayscale[500]}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t<TitleLarge style={{ color: titleColor }}>{primaryValue}</TitleLarge>\n\t\t\t{channelConfig && (\n\t\t\t\t<AnalyticsChipChannelFooter channelConfig={channelConfig} />\n\t\t\t)}\n\t\t\t{extraJSX}\n\t\t</AnalyticsChipContainer>\n\t);\n};\n"],"names":["AnalyticsChip","props","title","primaryValue","titleColor","captionColor","BASE_COLORS","backgroundColor","width","extraJSX","tooltipContent","channelConfig","style","jsxs","AnalyticsChipContainer","jsx","BodyCaption","Tooltip","Info","TitleLarge","AnalyticsChipChannelFooter"],"mappings":";;;;;;;AASO,MAAMA,IAAkD,CAACC,MAAU;AACzE,QAAM;AAAA,IACL,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,YAAAC;AAAA,IACA,cAAAC,IAAeC,EAAY,UAAU,GAAG;AAAA,IACxC,iBAAAC,IAAkBD,EAAY,UAAU,EAAE;AAAA,IAC1C,OAAAE,IAAQ;AAAA,IACR,UAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,OAAAC;AAAA,EAAA,IACGX;AACJ,SACC,gBAAAY;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,OAAOF,KAAS,CAAA;AAAA,MAChB,iBAAAL;AAAA,MACA,OAAAC;AAAA,MAEA,UAAA;AAAA,QAAA,gBAAAK,EAAC,OAAA,EAAI,WAAU,kBACd,UAAA;AAAA,UAAA,gBAAAE,EAACC,KAAY,OAAO,EAAE,OAAOX,EAAA,GAAiB,UAAAH,GAAM;AAAA,UACnDQ,KACA,gBAAAK,EAACE,GAAA,EAAQ,MAAMP,GACd,4BAAC,OAAA,EACA,UAAA,gBAAAK;AAAA,YAACG;AAAAA,YAAA;AAAA,cACA,aAAU;AAAA,cACV,QAAQ;AAAA,cACR,OAAO;AAAA,cACP,OAAOZ,EAAY,UAAU,GAAG;AAAA,YAAA;AAAA,UAAA,GAElC,EAAA,CACD;AAAA,QAAA,GAEF;AAAA,0BACCa,GAAA,EAAW,OAAO,EAAE,OAAOf,EAAA,GAAe,UAAAD,GAAa;AAAA,QACvDQ,KACA,gBAAAI,EAACK,GAAA,EAA2B,eAAAT,EAAA,CAA8B;AAAA,QAE1DF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGJ;"}

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

@@ -45,6 +45,7 @@ export declare const enum MESSAGE_CHANNELS {
     SMTP = "smtp",
     FACEBOOK_CATALOG = "facebook-catalog",
     TASKS = "tasks",
-    BIK_LIVECHAT = "livechat"
+    BIK_LIVECHAT = "livechat",
+    VOICE = "voice"
 }
 export declare const Avatar: React.FC<AvatarProps>;

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

@@ -1,16 +1,17 @@
 import { jsxs as m, jsx as e } from "react/jsx-runtime";
 import { useState as R } from "react";
-import { TitleMedium as k, TitleSmall as A, SubHeading as w, BodyTiny as x } from "../TypographyStyle.js";
+import { TitleMedium as k, TitleSmall as w, SubHeading as A, BodyTiny as O } from "../TypographyStyle.js";
 import { COLORS as i } from "../../constants/Theme.js";
-import O from "../../assets/icons/bik_livechat.svg.js";
+import x 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 C from "../../assets/icons/instagram-channel.svg.js";
-import L from "../../assets/icons/task.svg.js";
+import P from "../../assets/icons/task.svg.js";
 import U from "../../assets/icons/whatsapp_color.svg.js";
-import { AvatarStyle as B } from "./Avatar.styled.js";
-import { SIZE as a, AVATAR_TYPES as r, AVATAR_BACKGROUND as s, AVATAR_SIZE_MAP as l } from "./AvatarHelper.js";
+import { AvatarStyle as B, PhoneIconWrapper as L } from "./Avatar.styled.js";
+import { SIZE as a, AVATAR_TYPES as r, AVATAR_BACKGROUND as s, AVATAR_SIZE_MAP as h } from "./AvatarHelper.js";
+import F from "../../icons/Informational/Communication/Phone.js";
 const n = {
   [a.EXTRA_SMALL]: 10,
   [a.SMALL]: 16,
@@ -22,32 +23,32 @@ const n = {
   [s.DARK]: i.surface.standard,
   [s.BRAND]: i.background.inverseLight
 };
-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 J = (t) => {
-  const [h, f] = R(!1), g = () => {
-    const o = (t.name || "").split(".").join(" ").split(" ").map((v) => v.charAt(0).toUpperCase()).slice(0, 2).join(""), c = b[t.background];
-    return t.size === a.LARGE ? /* @__PURE__ */ e(k, { style: { color: c }, children: o }) : t.size === a.MEDIUM ? /* @__PURE__ */ e(A, { style: { color: c }, children: o }) : t.size === a.SMALL ? /* @__PURE__ */ e(w, { style: { color: c }, children: o }) : /* @__PURE__ */ e(x, { style: { color: c, fontSize: "6.667px", lineHeight: "8px" }, children: o });
-  }, I = () => t.useNameFallback && (!t.photoUrl || h) && t.name ? /* @__PURE__ */ e("div", { children: g() }) : t.useNameFallback && t.photoUrl && !h ? /* @__PURE__ */ e(
+var V = /* @__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.VOICE = "voice", t))(V || {});
+const H = (t) => {
+  const [l, I] = R(!1), g = () => {
+    const o = (t.name || "").split(".").join(" ").split(" ").map((T) => T.charAt(0).toUpperCase()).slice(0, 2).join(""), c = b[t.background];
+    return t.size === a.LARGE ? /* @__PURE__ */ e(k, { style: { color: c }, children: o }) : t.size === a.MEDIUM ? /* @__PURE__ */ e(w, { style: { color: c }, children: o }) : t.size === a.SMALL ? /* @__PURE__ */ e(A, { style: { color: c }, children: o }) : /* @__PURE__ */ e(O, { style: { color: c, fontSize: "6.667px", lineHeight: "8px" }, children: o });
+  }, f = () => t.useNameFallback && (!t.photoUrl || l) && t.name ? /* @__PURE__ */ e("div", { children: g() }) : t.useNameFallback && t.photoUrl && !l ? /* @__PURE__ */ e(
     "img",
     {
       alt: "",
-      width: l[t.size],
-      height: l[t.size],
+      width: h[t.size],
+      height: h[t.size],
       style: {
         borderRadius: t?.borderRadius || "50%",
         objectFit: "contain"
       },
       src: t.photoUrl,
       onError: () => {
-        f(!0);
+        I(!0);
       }
     }
   ) : /* @__PURE__ */ e(
     "img",
     {
       alt: "",
-      width: l[t.size],
-      height: l[t.size],
+      width: h[t.size],
+      height: h[t.size],
       style: {
         borderRadius: t?.borderRadius || "50%",
         objectFit: "contain"
@@ -73,11 +74,20 @@ const J = (t) => {
       case "gmail":
         return /* @__PURE__ */ e(z, { width: 11, height: 11 });
       case "tasks":
-        return /* @__PURE__ */ e(L, { width: 11, height: 11 });
+        return /* @__PURE__ */ e(P, { width: 11, height: 11 });
       case "livechat":
-        return /* @__PURE__ */ e(O, { width: 11, height: 11 });
+        return /* @__PURE__ */ e(x, { width: 11, height: 11 });
+      case "voice":
+        return /* @__PURE__ */ e(L, { children: /* @__PURE__ */ e(
+          F,
+          {
+            width: 8,
+            height: 8,
+            color: i.content.secondaryInverse
+          }
+        ) });
     }
-  }, T = () => t.status ? /* @__PURE__ */ e(
+  }, v = () => t.status ? /* @__PURE__ */ e(
     "div",
     {
       style: {
@@ -98,11 +108,11 @@ const J = (t) => {
         /* @__PURE__ */ m(
           B,
           {
-            type: t.type === r.IMAGE && (h || !t.photoUrl) && t.useNameFallback && t.name ? r.INITIALS : t.type,
+            type: t.type === r.IMAGE && (l || !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: g() }),
               t.type === r.ICON && t.icon && /* @__PURE__ */ e(
                 t.icon,
@@ -150,7 +160,7 @@ const J = (t) => {
               backgroundColor: i.surface.standard,
               alignItems: "center"
             },
-            children: T()
+            children: v()
           }
         )
       ]
@@ -159,8 +169,8 @@ const J = (t) => {
 };
 export {
   n as AVATAR_SIZE_VS_ICON_SIZE_MAP,
-  J as Avatar,
+  H as Avatar,
   b as BACKGROUND_VS_TEXT_COLOR_MAP,
-  P as MESSAGE_CHANNELS
+  V 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 {\n\tBodyTiny,\n\tSubHeading,\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\tif (props.size === SIZE.SMALL) {\n\t\t\treturn <SubHeading style={{ color }}>{initials}</SubHeading>;\n\t\t}\n\t\t// EXTRA_SMALL: 6.667px / 8px per Figma. BodyTiny's 10px/12px is too large\n\t\t// for the 16px circle (leaves 2px padding instead of the intended 4px).\n\t\treturn (\n\t\t\t<BodyTiny style={{ color, fontSize: '6.667px', lineHeight: '8px' }}>\n\t\t\t\t{initials}\n\t\t\t</BodyTiny>\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\tdata-test=\"avatar-inbox-badge\"\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\tdata-test=\"avatar-status-indicator\"\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","SubHeading","jsx","BodyTiny","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 { Phone as PhoneIcon } from '@src/icons';\nimport {\n\tBodyTiny,\n\tSubHeading,\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, PhoneIconWrapper } 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\tVOICE = 'voice',\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\tif (props.size === SIZE.SMALL) {\n\t\t\treturn <SubHeading style={{ color }}>{initials}</SubHeading>;\n\t\t}\n\t\t// EXTRA_SMALL: 6.667px / 8px per Figma. BodyTiny's 10px/12px is too large\n\t\t// for the 16px circle (leaves 2px padding instead of the intended 4px).\n\t\treturn (\n\t\t\t<BodyTiny style={{ color, fontSize: '6.667px', lineHeight: '8px' }}>\n\t\t\t\t{initials}\n\t\t\t</BodyTiny>\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\tcase MESSAGE_CHANNELS.VOICE:\n\t\t\t\treturn (\n\t\t\t\t\t<PhoneIconWrapper>\n\t\t\t\t\t\t<PhoneIcon\n\t\t\t\t\t\t\twidth={8}\n\t\t\t\t\t\t\theight={8}\n\t\t\t\t\t\t\tcolor={COLORS.content.secondaryInverse}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</PhoneIconWrapper>\n\t\t\t\t);\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\tdata-test=\"avatar-inbox-badge\"\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\tdata-test=\"avatar-status-indicator\"\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","SubHeading","jsx","BodyTiny","getImageBlock","AVATAR_SIZE_MAP","getChannelIcon","EmailIcon","FacebookIcon","InstagramIcon","WhatsappIcon","GmailIcon","TaskIcon","BikLivechatIcon","PhoneIconWrapper","PhoneIcon","getOnlineStatusIcon","jsxs","AvatarStyle","AVATAR_TYPES"],"mappings":"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"}

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

@@ -4,3 +4,4 @@ export declare const AvatarStyle: import('styled-components').StyledComponent<"d
     background: AVATAR_BACKGROUND;
     type: AVATAR_TYPES;
 }, never>;
+export declare const PhoneIconWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;

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

@@ -1,17 +1,26 @@
 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"};
+import { AVATAR_SIZE_MAP as t, AVATAR_TYPES as d, AVATAR_BACKGROUND as n } from "./AvatarHelper.js";
+import { COLORS as e } from "../../constants/Theme.js";
+const s = o.div`
+	width: ${(r) => t[r.size] + "px"};
+	height: ${(r) => t[r.size] + "px"};
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	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};
+	background-color: ${(r) => r.type === d.IMAGE ? "null" : r.background === n.LIGHT ? e.background.base : r.background === n.WHITE ? e.surface.standard : r.background === n.BRAND ? e.background.brandLight : e.background.inverse};
+	border: ${(r) => r.background === n.LIGHT || r.background === n.WHITE ? "1px solid " + e.stroke.primary : 0};
 	border-radius: 50%;
+`, u = o.div`
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 11px;
+	height: 11px;
+	border-radius: 4px;
+	background-color: ${e.content.secondary};
 `;
 export {
-  A as AvatarStyle
+  s as AvatarStyle,
+  u as PhoneIconWrapper
 };
 //# sourceMappingURL=Avatar.styled.js.map

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: 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;"}
+{"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\nexport const PhoneIconWrapper = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 11px;\n\theight: 11px;\n\tborder-radius: 4px;\n\tbackground-color: ${COLORS.content.secondary};\n`;\n"],"names":["AvatarStyle","styled","props","AVATAR_SIZE_MAP","AVATAR_TYPES","AVATAR_BACKGROUND","COLORS","PhoneIconWrapper"],"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,GAIOC,IAAmBN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAOlBK,EAAO,QAAQ,SAAS;AAAA;"}

package/dist/esm/components/button/themes.d.ts

@@ -8,6 +8,7 @@ export declare const GetButtonTextComponent: (size: Size, type: Type, disabled?:
     color?: string | undefined;
 }, never>;
 export declare const getBorderColor: (type: Type, inverse?: boolean, error?: boolean) => string;
+export declare const strokeStyle: (size: Size, color: string, width?: number) => string;
 export declare const getBorder: (version: '1.0' | '2.0' | '3.0', type: Type, size: Size, inverse?: boolean, error?: boolean) => string;
 export declare const getLinearGradientValue: (size: Size) => string;
 /**

package/dist/esm/components/button/themes.js

@@ -1,13 +1,13 @@
 import { COLORS as r } from "../../constants/Theme.js";
-import { ButtonRegularAI as d, ButtonLargeAI as g, BodySecondary as l, BodyCaption as f, ButtonRegular as b, ButtonLarge as p } from "../TypographyStyle.js";
-const m = (t, n, e, a, o) => {
+import { ButtonRegularAI as g, ButtonLargeAI as f, BodySecondary as l, BodyCaption as b, ButtonRegular as p, ButtonLarge as h } from "../TypographyStyle.js";
+const y = (t, n, e, a, i) => {
   if (t === "special") return r.background.brandVeryLight;
   if (t === "secondaryGray") return "transparent";
   if (n === "chip")
     return t === "text" ? "transparent" : a ? r.surface.hovered : r.surface.subdued;
   switch (t) {
     case "primary":
-      return o || (e ? r.background.warning.vibrant : r.background.inverseLight);
+      return i || (e ? r.background.warning.vibrant : r.background.inverseLight);
     case "destructive":
       return r.background.negative.vibrant;
     case "tertiary":
@@ -36,7 +36,7 @@ const m = (t, n, e, a, o) => {
     default:
       return e ? r.content.primaryInverse : r.stroke.brand;
   }
-}, y = (t) => t ? "rgba(255, 255, 255, 0.5)" : r.content.inactive, v = (t, n) => {
+}, v = (t) => t ? "rgba(255, 255, 255, 0.5)" : r.content.inactive, B = (t, n) => {
   if (t === "text")
     return "0px";
   if (n === "xs")
@@ -70,27 +70,30 @@ const m = (t, n, e, a, o) => {
       default:
         return "14px 12px";
     }
-}, B = (t, n, e) => !e && n === "ai" ? t === "small" ? d : g : n === "dashRegular" ? l : t === "chip" || t === "xs" ? f : t === "small" ? b : p, s = (t, n, e) => e ? r.stroke.negative.vibrant : n ? r.surface.standard : t == "secondary" ? r.stroke.brand : r.content.placeholder, L = (t, n, e, a, o) => n == "text" ? "border: none;" : n === "special" ? `border: 1px solid ${r.stroke.brandLightAlt};` : n === "secondaryGray" ? `border: 1px solid ${r.stroke.primary};` : e === "chip" ? `border: ${t === "2.0" ? 0.5 : 1}px solid ${r.stroke.primary};` : a ? n === "secondary" ? `border: ${t === "2.0" ? 0.5 : 1}px solid ${s(
-  n,
-  a,
-  o
-)};` : "border: none;" : n === "secondary" ? `border: ${t === "2.0" ? 0.5 : 1}px solid ${s(
-  n,
-  !1,
-  o
-)};` : "border: none;", c = (t) => t === "medium" ? `5px,
+}, L = (t, n, e) => !e && n === "ai" ? t === "small" ? g : f : n === "dashRegular" ? l : t === "chip" || t === "xs" ? b : t === "small" ? p : h, d = (t, n, e) => e ? r.stroke.negative.vibrant : n ? r.surface.standard : t == "secondary" ? r.stroke.brand : r.content.placeholder, o = (t, n, e = 1) => t === "xs" ? `box-shadow: inset 0 0 0 ${e}px ${n}; border: none;` : `border: ${e}px solid ${n};`, G = (t, n, e, a, i) => n == "text" ? "border: none;" : n === "special" ? o(e, r.stroke.brandLightAlt) : n === "secondaryGray" ? o(e, r.stroke.primary) : e === "chip" ? `border: ${t === "2.0" ? 0.5 : 1}px solid ${r.stroke.primary};` : a ? n === "secondary" ? o(
+  e,
+  d(n, a, i),
+  t === "2.0" ? 0.5 : 1
+) : "border: none;" : n === "secondary" ? o(
+  e,
+  d(n, !1, i),
+  t === "2.0" ? 0.5 : 1
+) : "border: none;", u = (t) => t === "medium" ? `5px,
 		transparent 5px,
 		transparent 10px` : `6px,
 		transparent 6px,
-		transparent 12px`, G = (t, n) => {
-  const e = parseInt(t.replace("#", ""), 16), a = Math.round(2.55 * n), o = (e >> 16) - a, i = (e >> 8 & 255) - a, u = (e & 255) - a;
-  return `#${(16777216 + (Math.max(o, 0) << 16) + (Math.max(i, 0) << 8) + Math.max(u, 0)).toString(16).slice(1)}`;
-}, x = (t, n) => {
-  const e = parseInt(t.replace("#", ""), 16), a = Math.round(2.55 * n), o = (e >> 16) + a, i = (e >> 8 & 255) + a, u = (e & 255) + a;
-  return `#${(16777216 + (Math.min(o, 255) << 16) + (Math.min(i, 255) << 8) + Math.min(u, 255)).toString(16).slice(1)}`;
-}, w = (t, n) => t === "ai" ? `background: ${r.surface.aiLight};` : t === "text" ? "background-color:transparent;" : t === "special" || t === "secondaryGray" ? "" : !n && t !== "primary" ? `background-color: #000000;
-				opacity: 0.03;` : "", I = (t, n) => n ? "" : `text-decoration-line: underline;
-			text-decoration-color: ${r.content.brand};`, M = (t, n) => n ? "" : t === "primary" ? `background-color: ${r.stroke.warning.lightAlt};` : "background-color: rgba(255, 255, 255, 0.1)", A = (t, n, e) => t === "special" ? `background-color: ${r.background.base}; border: 1px solid ${r.stroke.primary};` : t === "secondaryGray" ? `border: 1px solid ${r.stroke.primary};` : n === "chip" ? "background-color: transparent;" : t === "primary" || t === "destructive" ? e ? "background-color: rgba(255,255,255,0.3);" : `background-color: ${r.background.inactive};` : t === "secondary" ? e ? "border: 1px solid rgba(255, 255, 255, 0.5);" : `border: 1px solid ${r.stroke.primary};` : "", S = (t, n, e = s(t, !1)) => `
+		transparent 12px`, w = (t, n) => {
+  const e = parseInt(t.replace("#", ""), 16), a = Math.round(2.55 * n), i = (e >> 16) - a, c = (e >> 8 & 255) - a, s = (e & 255) - a;
+  return `#${(16777216 + (Math.max(i, 0) << 16) + (Math.max(c, 0) << 8) + Math.max(s, 0)).toString(16).slice(1)}`;
+}, k = (t, n) => {
+  const e = parseInt(t.replace("#", ""), 16), a = Math.round(2.55 * n), i = (e >> 16) + a, c = (e >> 8 & 255) + a, s = (e & 255) + a;
+  return `#${(16777216 + (Math.min(i, 255) << 16) + (Math.min(c, 255) << 8) + Math.min(s, 255)).toString(16).slice(1)}`;
+}, I = (t, n) => t === "ai" ? `background: ${r.surface.aiLight};` : t === "text" ? "background-color:transparent;" : t === "special" || t === "secondaryGray" ? "" : !n && t !== "primary" ? `background-color: #000000;
+				opacity: 0.03;` : "", M = (t, n) => n ? "" : `text-decoration-line: underline;
+			text-decoration-color: ${r.content.brand};`, S = (t, n) => n ? "" : t === "primary" ? `background-color: ${r.stroke.warning.lightAlt};` : "background-color: rgba(255, 255, 255, 0.1)", A = (t, n, e) => t === "special" ? `background-color: ${r.background.base}; ${o(
+  n,
+  r.stroke.primary
+)}` : t === "secondaryGray" ? o(n, r.stroke.primary) : n === "chip" ? "background-color: transparent;" : t === "primary" || t === "destructive" ? e ? "background-color: rgba(255,255,255,0.3);" : `background-color: ${r.background.inactive};` : t === "secondary" ? e ? o(n, "rgba(255, 255, 255, 0.5)") : o(n, r.stroke.primary) : "", R = (t, n, e = d(t, !1)) => `
 	.line-top {
 		position: absolute;
 		left: 0;
@@ -101,7 +104,7 @@ const m = (t, n, e, a, o) => {
 			to right,
 			${e},
 			${e}
-				${c(n)}
+				${u(n)}
 		);
 	}
 	.line-right {
@@ -114,7 +117,7 @@ const m = (t, n, e, a, o) => {
 			to bottom,
 			${e},
 			${e}
-				${c(n)}
+				${u(n)}
 		);
 	}
 	.line-bottom {
@@ -127,7 +130,7 @@ const m = (t, n, e, a, o) => {
 			to right,
 			${e},
 			${e}
-				${c(n)}
+				${u(n)}
 		);
 	}
 	.line-left {
@@ -140,18 +143,24 @@ const m = (t, n, e, a, o) => {
 			to bottom,
 			${e},
 			${e}
-				${c(n)}
+				${u(n)}
 		);
 	}
-	`, R = (t, n, e) => {
+	`, D = (t, n, e) => {
   if (t === "text")
     return `background-color: ${r.background.brandLight};
 			text-decoration-line: underline;
 			text-decoration-color: ${r.content.brand};`;
   if (t === "special")
-    return `background-color: ${r.background.brandLight}; border: 1px solid ${r.stroke.brandLightAlt};`;
+    return `background-color: ${r.background.brandLight}; ${o(
+      n,
+      r.stroke.brandLightAlt
+    )}`;
   if (t === "secondaryGray")
-    return `background-color: ${r.surface.hovered}; border: 1px solid ${r.stroke.primary};`;
+    return `background-color: ${r.surface.hovered}; ${o(
+      n,
+      r.stroke.primary
+    )}`;
   if (n === "chip")
     return `border: 1px solid ${r.stroke.brandLightAlt};
 		background-color: ${r.background.brandLight};`;
@@ -161,13 +170,13 @@ const m = (t, n, e, a, o) => {
 			` : "box-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);";
   if (t === "secondary" || t === "tertiary" || t === "tertiaryGray" || t.startsWith("dash"))
     return e ? `background-color: ${r.background.inverseLight}  !important;` : `background-color: ${r.background.brandLight};`;
-}, D = (t, n, e, a) => t === "special" ? `background-color: ${r.background.brandVeryLight};` : t === "secondaryGray" ? `background-color: ${r.surface.subdued};` : n === "chip" ? `background-color: ${r.background.base};` : t === "primary" ? a ? `background-color: ${x(
+}, H = (t, n, e, a) => t === "special" ? `background-color: ${r.background.brandVeryLight};` : t === "secondaryGray" ? `background-color: ${r.surface.subdued};` : n === "chip" ? `background-color: ${r.background.base};` : t === "primary" ? a ? `background-color: ${k(
   a,
   50
-)};` : `background-color: ${e ? r.background.warning.vibrant : r.background.brandLight};` : t === "destructive" ? `background-color: ${r.background.negative.light};` : "background-color: transparent;", H = (t, n, e) => t === "special" ? `border: 1px solid ${r.stroke.brandLightAlt};` : t === "secondaryGray" ? `border: 1px solid ${r.stroke.primary};` : n === "chip" ? "border: none;" : t === "secondary" ? e ? `border: 1px solid ${r.content.secondary};` : `border: 1px solid ${r.stroke.brandLightAlt};` : "", C = (t, n) => t === "secondaryGray" ? r.content.secondary : n ? t === "primary" ? r.content.primary : r.content.primaryInverse : t === "destructive" ? r.content.negative : r.content.brand, T = (t, n, e, a, o, i) => {
+)};` : `background-color: ${e ? r.background.warning.vibrant : r.background.brandLight};` : t === "destructive" ? `background-color: ${r.background.negative.light};` : "background-color: transparent;", C = (t, n, e) => t === "special" ? o(n, r.stroke.brandLightAlt) : t === "secondaryGray" ? o(n, r.stroke.primary) : n === "chip" ? "border: none;" : t === "secondary" ? e ? o(n, r.content.secondary) : o(n, r.stroke.brandLightAlt) : "", T = (t, n) => t === "secondaryGray" ? r.content.secondary : n ? t === "primary" ? r.content.primary : r.content.primaryInverse : t === "destructive" ? r.content.negative : r.content.brand, V = (t, n, e, a, i, c) => {
   if (t === "chip")
-    return a ? r.content.inactive : i ? r.content.primary : r.content.secondary;
-  if (o)
+    return a ? r.content.inactive : c ? r.content.primary : r.content.secondary;
+  if (i)
     return "transparent";
   if (n === "special")
     return a ? r.content.inactive : r.background.inverseLight;
@@ -183,25 +192,26 @@ const m = (t, n, e, a, o) => {
     return a ? r.content.inactive : r.content.secondary;
 };
 export {
-  B as GetButtonTextComponent,
-  C as SpinnerColorMap,
+  L as GetButtonTextComponent,
+  T as SpinnerColorMap,
   A as generateDisabledStyling,
-  M as generateInverseHoverBackground,
-  m as getBackgroundColor,
-  L as getBorder,
-  s as getBorderColor,
-  T as getButtonIconColor,
-  R as getClickEffect,
+  S as generateInverseHoverBackground,
+  y as getBackgroundColor,
+  G as getBorder,
+  d as getBorderColor,
+  V as getButtonIconColor,
+  D as getClickEffect,
   $ as getColor,
-  S as getDashedBorderStyling,
-  y as getDisabledTextColor,
-  w as getHoverButtonBackground,
-  G as getHoverButtonBackgroundCustom,
-  I as getHoverButtonTextDecorationStyle,
-  c as getLinearGradientValue,
-  D as getLoadingBackground,
-  H as getLoadingBorder,
-  x as getLoadingButtonBackgroundCustom,
-  v as getPadding
+  R as getDashedBorderStyling,
+  v as getDisabledTextColor,
+  I as getHoverButtonBackground,
+  w as getHoverButtonBackgroundCustom,
+  M as getHoverButtonTextDecorationStyle,
+  u as getLinearGradientValue,
+  H as getLoadingBackground,
+  C as getLoadingBorder,
+  k as getLoadingButtonBackgroundCustom,
+  B as getPadding,
+  o as strokeStyle
 };
 //# sourceMappingURL=themes.js.map