@bikdotai/bik-component-library 0.0.664-beta.5 → 0.0.665-beta.0

package/dist/cjs/components/alerts/Alert.d.ts

@@ -14,5 +14,8 @@ export type AlertProps = {
     redirectTo?: string;
     redirectToText?: string;
     iconStyle?: React.CSSProperties;
+    handleRedirectButtonClick?: () => void;
+    showCrossButton?: boolean;
+    handleCrossIconClick?: () => void;
 };
 export declare const Alert: React.FC<AlertProps>;

package/dist/cjs/components/alerts/Alert.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("./Alert.styled.js"),i=require("./AlertHelper.js"),r=require("../TypographyStyle.js"),o=require("../../constants/Theme.js");exports.Alert=l=>{var n,s;return e.jsxs(t.AlertStyle,Object.assign({type:l.type,contentPosition:l.contentPosition,style:l.containerStyle},{children:[l.icon&&e.jsx("div",Object.assign({style:Object.assign(Object.assign({},null==l?void 0:l.iconStyle),{display:(null===(n=null==l?void 0:l.iconStyle)||void 0===n?void 0:n.display)||"flex",alignSelf:(null===(s=null==l?void 0:l.iconStyle)||void 0===s?void 0:s.alignSelf)||"flex-start"})},{children:e.jsx(l.icon,{color:i.COLOR_CONFIG_MAP[l.type].textColor,height:16,width:16})})),e.jsx(r.BodyCaption,Object.assign({style:{color:l.textColor||i.COLOR_CONFIG_MAP[l.type].textColor,marginLeft:8,marginRight:4}},{children:l.text})),l.redirectToText&&l.redirectTo&&e.jsx(r.BodyCaption,Object.assign({style:{color:o.COLORS.text.brand,cursor:"pointer",textDecoration:"underline"},onClick:()=>{l.redirectTo&&window.open(l.redirectTo,"_blank")}},{children:l.redirectToText}))]}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/cross.svg.js"),r=require("./Alert.styled.js"),o=require("./AlertHelper.js"),i=require("../TypographyStyle.js"),n=require("../../constants/Theme.js");exports.Alert=l=>{var s,c;return e.jsxs(r.AlertStyle,Object.assign({type:l.type,contentPosition:l.contentPosition,style:l.containerStyle},{children:[e.jsxs(r.AlertContentWrapper,{children:[l.icon&&e.jsx("div",Object.assign({style:Object.assign(Object.assign({},null==l?void 0:l.iconStyle),{display:(null===(s=null==l?void 0:l.iconStyle)||void 0===s?void 0:s.display)||"flex",alignSelf:(null===(c=null==l?void 0:l.iconStyle)||void 0===c?void 0:c.alignSelf)||"flex-start"})},{children:e.jsx(l.icon,{color:o.COLOR_CONFIG_MAP[l.type].textColor,height:16,width:16})})),e.jsx(i.BodyCaption,Object.assign({style:{color:l.textColor||o.COLOR_CONFIG_MAP[l.type].textColor,marginLeft:8,marginRight:4}},{children:l.text})),l.redirectToText&&l.redirectTo&&e.jsx(i.BodyCaption,Object.assign({style:{color:n.COLORS.text.brand,cursor:"pointer",textDecoration:"underline"},onClick:()=>{"INTERNAL"===l.redirectTo&&l.handleRedirectButtonClick?l.handleRedirectButtonClick():l.redirectTo&&window.open(l.redirectTo,"_blank")}},{children:l.redirectToText}))]}),l.showCrossButton&&e.jsx(r.CloseIconWrapper,{children:e.jsx(t.default,{width:20,height:20,color:n.COLORS.content.secondary,onClick:()=>{(null==l?void 0:l.handleCrossIconClick)&&l.handleCrossIconClick()}})})]}))};

package/dist/cjs/components/alerts/Alert.styled.d.ts

@@ -3,3 +3,5 @@ export declare const AlertStyle: import("styled-components").StyledComponent<"di
     type: ALERT_TYPES;
     contentPosition?: CONTENT_POSITION | undefined;
 }, never>;
+export declare const AlertContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CloseIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/cjs/components/alerts/Alert.styled.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("./AlertHelper.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const o=r(e).default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("./AlertHelper.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=r(e);const l=o.default.div`
 	display: flex;
 	align-items: center;
 	justify-content: ${e=>e.contentPosition||t.CONTENT_POSITION.CENTER};
@@ -6,4 +6,12 @@
 	background-color: ${e=>t.COLOR_CONFIG_MAP[e.type].backgroundColor};
 	border-radius: 4px;
 	border: 1px solid ${e=>t.COLOR_CONFIG_MAP[e.type].borderColor};
-`;exports.AlertStyle=o;
+`,n=o.default.div`
+	flex: 1;
+	display: flex;
+	justify-content: center;
+`,i=o.default.div`
+	margin-left: 16px;
+	display: flex;
+	align-items: center;
+`;exports.AlertContentWrapper=n,exports.AlertStyle=l,exports.CloseIconWrapper=i;

package/dist/cjs/components/alerts/AlertHelper.d.ts

@@ -8,7 +8,8 @@ export declare enum ALERT_TYPES {
 export declare enum CONTENT_POSITION {
     START = "start",
     CENTER = "center",
-    END = "end"
+    END = "end",
+    SPACE_BETWEEN = "space-between"
 }
 export declare const COLOR_CONFIG_MAP: {
     Negative: {

package/dist/cjs/components/alerts/AlertHelper.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var o,r,t=require("../../constants/Theme.js");exports.ALERT_TYPES=void 0,(o=exports.ALERT_TYPES||(exports.ALERT_TYPES={})).NEGATIVE="Negative",o.WARNING="Warning",o.POSITIVE="Positive",o.NEUTRAL="Neutral",o.BRAND="Brand",exports.CONTENT_POSITION=void 0,(r=exports.CONTENT_POSITION||(exports.CONTENT_POSITION={})).START="start",r.CENTER="center",r.END="end";const e={[exports.ALERT_TYPES.NEGATIVE]:{backgroundColor:t.COLORS.background.negative.light,textColor:t.COLORS.content.negative,borderColor:t.COLORS.stroke.negative.lightAlt},[exports.ALERT_TYPES.WARNING]:{backgroundColor:t.COLORS.background.warning.light,textColor:t.COLORS.content.warning,borderColor:t.COLORS.stroke.warning.lightAlt},[exports.ALERT_TYPES.POSITIVE]:{backgroundColor:t.COLORS.background.positive.light,textColor:t.COLORS.content.positive,borderColor:t.COLORS.stroke.positive.lightAlt},[exports.ALERT_TYPES.NEUTRAL]:{backgroundColor:t.COLORS.surface.subdued,textColor:t.COLORS.content.secondary,borderColor:t.COLORS.stroke.primary},[exports.ALERT_TYPES.BRAND]:{backgroundColor:t.COLORS.background.brandLight,textColor:t.COLORS.content.brand,borderColor:t.COLORS.stroke.brandLightAlt}};exports.COLOR_CONFIG_MAP=e;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var o,r,t=require("../../constants/Theme.js");exports.ALERT_TYPES=void 0,(o=exports.ALERT_TYPES||(exports.ALERT_TYPES={})).NEGATIVE="Negative",o.WARNING="Warning",o.POSITIVE="Positive",o.NEUTRAL="Neutral",o.BRAND="Brand",exports.CONTENT_POSITION=void 0,(r=exports.CONTENT_POSITION||(exports.CONTENT_POSITION={})).START="start",r.CENTER="center",r.END="end",r.SPACE_BETWEEN="space-between";const e={[exports.ALERT_TYPES.NEGATIVE]:{backgroundColor:t.COLORS.background.negative.light,textColor:t.COLORS.content.negative,borderColor:t.COLORS.stroke.negative.lightAlt},[exports.ALERT_TYPES.WARNING]:{backgroundColor:t.COLORS.background.warning.light,textColor:t.COLORS.content.warning,borderColor:t.COLORS.stroke.warning.lightAlt},[exports.ALERT_TYPES.POSITIVE]:{backgroundColor:t.COLORS.background.positive.light,textColor:t.COLORS.content.positive,borderColor:t.COLORS.stroke.positive.lightAlt},[exports.ALERT_TYPES.NEUTRAL]:{backgroundColor:t.COLORS.surface.subdued,textColor:t.COLORS.content.secondary,borderColor:t.COLORS.stroke.primary},[exports.ALERT_TYPES.BRAND]:{backgroundColor:t.COLORS.background.brandLight,textColor:t.COLORS.content.brand,borderColor:t.COLORS.stroke.brandLightAlt}};exports.COLOR_CONFIG_MAP=e;

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

@@ -8,6 +8,7 @@ export declare const AVATAR_SIZE_VS_ICON_SIZE_MAP: {
 };
 export declare const BACKGROUND_VS_TEXT_COLOR_MAP: {
     LIGHT: string;
+    WHITE: string;
     DARK: string;
 };
 export type AvatarProps = {

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("react"),t=require("./Avatar.styled.js"),i=require("./AvatarHelper.js"),r=require("../TypographyStyle.js"),a=require("../../constants/Theme.js"),o=require("../../assets/icons/bik_livechat.svg.js"),n=require("../../assets/icons/CheckSquareOffset.svg.js"),A=require("../../assets/icons/email-channel.svg.js"),S=require("../../assets/icons/facebook_channel.svg.js"),c=require("../../assets/icons/gmail.svg.js"),l=require("../../assets/icons/instagram-channel.svg.js"),E=require("../../assets/icons/whatsapp_color.svg.js");const d={[i.SIZE.SMALL]:16,[i.SIZE.MEDIUM]:20,[i.SIZE.INBOX]:24,[i.SIZE.LARGE]:32},u={[i.AVATAR_BACKGROUND.LIGHT]:a.COLORS.content.secondary,[i.AVATAR_BACKGROUND.DARK]:a.COLORS.surface.standard};var h;exports.MESSAGE_CHANNELS=void 0,(h=exports.MESSAGE_CHANNELS||(exports.MESSAGE_CHANNELS={})).INSTAGRAM="instagram",h.MESSENGER="messenger",h.WHATSAPP="whatsapp",h.GMAIL="gmail",h.LIVECHAT="livechat",h.GOOGLE_BUSINESS_CHAT="gbm",h.SHOPIFY="shopify",h.FACEBOOK="facebook",h.EMAIL="email",h.SMTP="smtp",h.FACEBOOK_CATALOG="facebook-catalog",h.TASKS="tasks",h.BIK_LIVECHAT="livechat";exports.AVATAR_SIZE_VS_ICON_SIZE_MAP=d,exports.Avatar=h=>{const[p,g]=s.useState(!1),x=()=>{const s=(h.name||"").split(".").join(" ").split(" ").map((e=>e.charAt(0).toUpperCase())).slice(0,2).join("");return h.size===i.SIZE.SMALL?e.jsx(r.BodyTiny,Object.assign({style:{color:u[h.background]}},{children:s})):h.size===i.SIZE.MEDIUM||h.size===i.SIZE.INBOX?e.jsx(r.TitleSmall,Object.assign({style:{color:u[h.background]}},{children:s})):h.size===i.SIZE.LARGE?e.jsx(r.TitleMedium,Object.assign({style:{color:u[h.background]}},{children:s})):void 0};return e.jsxs("div",Object.assign({style:{position:"relative"}},{children:[e.jsxs(t.AvatarStyle,Object.assign({type:h.type===i.AVATAR_TYPES.IMAGE&&p&&h.useNameFallback&&h.name?i.AVATAR_TYPES.INITIALS:h.type,size:h.size,background:h.background},{children:[h.type===i.AVATAR_TYPES.IMAGE&&(h.useNameFallback&&!p?e.jsx("img",{alt:"",width:i.AVATAR_SIZE_MAP[h.size],height:i.AVATAR_SIZE_MAP[h.size],style:{borderRadius:(null==h?void 0:h.borderRadius)||"50%",objectFit:"contain"},src:h.photoUrl,onError:()=>{g(!0)}}):h.useNameFallback&&p&&h.name?e.jsx("div",{children:x()}):e.jsx("img",{alt:"",width:i.AVATAR_SIZE_MAP[h.size],height:i.AVATAR_SIZE_MAP[h.size],style:{borderRadius:(null==h?void 0:h.borderRadius)||"50%",objectFit:"contain"},src:h.photoUrl})),h.type===i.AVATAR_TYPES.INITIALS&&e.jsx("div",{children:x()}),h.type===i.AVATAR_TYPES.ICON&&h.icon&&e.jsx(h.icon,{width:d[h.size],height:d[h.size],color:u[h.background]})]})),h.inboxSettings&&e.jsx("div",Object.assign({style:{position:"absolute",left:d[h.size]+"px",top:d[h.size]+"px",width:14,height:14,borderRadius:(null==h?void 0:h.borderRadius)||"50%",display:"flex",justifyContent:"center",backgroundColor:h.inboxSettings.isSelected?h.inboxSettings.isComments?a.COLORS.content.primary:a.COLORS.background.brandLight:h.inboxSettings.isComments?a.COLORS.content.primary:a.COLORS.surface.standard,alignItems:"center"}},{children:(()=>{switch(h.channelName){case exports.MESSAGE_CHANNELS.EMAIL:case exports.MESSAGE_CHANNELS.SMTP:return e.jsx(A.default,{width:11,height:11});case exports.MESSAGE_CHANNELS.FACEBOOK:case exports.MESSAGE_CHANNELS.FACEBOOK_CATALOG:case exports.MESSAGE_CHANNELS.MESSENGER:return e.jsx(S.default,{width:11,height:11});case exports.MESSAGE_CHANNELS.INSTAGRAM:return e.jsx(l.default,{width:11,height:11});case exports.MESSAGE_CHANNELS.WHATSAPP:return e.jsx(E.default,{width:11,height:11});case exports.MESSAGE_CHANNELS.GMAIL:return e.jsx(c.default,{width:11,height:11});case exports.MESSAGE_CHANNELS.TASKS:return e.jsx(n.default,{width:11,height:11});case exports.MESSAGE_CHANNELS.BIK_LIVECHAT:return e.jsx(o.default,{width:11,height:11})}})()})),h.status&&e.jsx("div",Object.assign({style:{position:"absolute",left:d[h.size]+"px",top:d[h.size]+"px",width:11,height:11,borderRadius:"50%",display:"flex",justifyContent:"center",backgroundColor:a.COLORS.surface.standard,alignItems:"center"}},{children:h.status?e.jsx("div",{style:{backgroundColor:"ONLINE"===h.status?a.COLORS.special.whatsapp.brand:a.COLORS.content.inactive,width:"8px",height:"8px",borderRadius:"50%"}}):null}))]}))},exports.BACKGROUND_VS_TEXT_COLOR_MAP=u;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("react"),t=require("./Avatar.styled.js"),i=require("./AvatarHelper.js"),r=require("../TypographyStyle.js"),a=require("../../constants/Theme.js"),o=require("../../assets/icons/bik_livechat.svg.js"),n=require("../../assets/icons/CheckSquareOffset.svg.js"),A=require("../../assets/icons/email-channel.svg.js"),S=require("../../assets/icons/facebook_channel.svg.js"),c=require("../../assets/icons/gmail.svg.js"),l=require("../../assets/icons/instagram-channel.svg.js"),E=require("../../assets/icons/whatsapp_color.svg.js");const d={[i.SIZE.SMALL]:16,[i.SIZE.MEDIUM]:20,[i.SIZE.INBOX]:24,[i.SIZE.LARGE]:32},u={[i.AVATAR_BACKGROUND.LIGHT]:a.COLORS.content.secondary,[i.AVATAR_BACKGROUND.WHITE]:a.COLORS.content.secondary,[i.AVATAR_BACKGROUND.DARK]:a.COLORS.surface.standard};var h;exports.MESSAGE_CHANNELS=void 0,(h=exports.MESSAGE_CHANNELS||(exports.MESSAGE_CHANNELS={})).INSTAGRAM="instagram",h.MESSENGER="messenger",h.WHATSAPP="whatsapp",h.GMAIL="gmail",h.LIVECHAT="livechat",h.GOOGLE_BUSINESS_CHAT="gbm",h.SHOPIFY="shopify",h.FACEBOOK="facebook",h.EMAIL="email",h.SMTP="smtp",h.FACEBOOK_CATALOG="facebook-catalog",h.TASKS="tasks",h.BIK_LIVECHAT="livechat";exports.AVATAR_SIZE_VS_ICON_SIZE_MAP=d,exports.Avatar=h=>{const[p,g]=s.useState(!1),O=()=>{const s=(h.name||"").split(".").join(" ").split(" ").map((e=>e.charAt(0).toUpperCase())).slice(0,2).join("");return h.size===i.SIZE.SMALL?e.jsx(r.BodyTiny,Object.assign({style:{color:u[h.background]}},{children:s})):h.size===i.SIZE.MEDIUM||h.size===i.SIZE.INBOX?e.jsx(r.TitleSmall,Object.assign({style:{color:u[h.background]}},{children:s})):h.size===i.SIZE.LARGE?e.jsx(r.TitleMedium,Object.assign({style:{color:u[h.background]}},{children:s})):void 0};return e.jsxs("div",Object.assign({style:{position:"relative"}},{children:[e.jsxs(t.AvatarStyle,Object.assign({type:h.type===i.AVATAR_TYPES.IMAGE&&p&&h.useNameFallback&&h.name?i.AVATAR_TYPES.INITIALS:h.type,size:h.size,background:h.background},{children:[h.type===i.AVATAR_TYPES.IMAGE&&(h.useNameFallback&&!p?e.jsx("img",{alt:"",width:i.AVATAR_SIZE_MAP[h.size],height:i.AVATAR_SIZE_MAP[h.size],style:{borderRadius:(null==h?void 0:h.borderRadius)||"50%",objectFit:"contain"},src:h.photoUrl,onError:()=>{g(!0)}}):h.useNameFallback&&p&&h.name?e.jsx("div",{children:O()}):e.jsx("img",{alt:"",width:i.AVATAR_SIZE_MAP[h.size],height:i.AVATAR_SIZE_MAP[h.size],style:{borderRadius:(null==h?void 0:h.borderRadius)||"50%",objectFit:"contain"},src:h.photoUrl})),h.type===i.AVATAR_TYPES.INITIALS&&e.jsx("div",{children:O()}),h.type===i.AVATAR_TYPES.ICON&&h.icon&&e.jsx(h.icon,{width:d[h.size],height:d[h.size],color:u[h.background]})]})),h.inboxSettings&&e.jsx("div",Object.assign({style:{position:"absolute",left:d[h.size]+"px",top:d[h.size]+"px",width:14,height:14,borderRadius:(null==h?void 0:h.borderRadius)||"50%",display:"flex",justifyContent:"center",backgroundColor:h.inboxSettings.isSelected?h.inboxSettings.isComments?a.COLORS.content.primary:a.COLORS.background.brandLight:h.inboxSettings.isComments?a.COLORS.content.primary:a.COLORS.surface.standard,alignItems:"center"}},{children:(()=>{switch(h.channelName){case exports.MESSAGE_CHANNELS.EMAIL:case exports.MESSAGE_CHANNELS.SMTP:return e.jsx(A.default,{width:11,height:11});case exports.MESSAGE_CHANNELS.FACEBOOK:case exports.MESSAGE_CHANNELS.FACEBOOK_CATALOG:case exports.MESSAGE_CHANNELS.MESSENGER:return e.jsx(S.default,{width:11,height:11});case exports.MESSAGE_CHANNELS.INSTAGRAM:return e.jsx(l.default,{width:11,height:11});case exports.MESSAGE_CHANNELS.WHATSAPP:return e.jsx(E.default,{width:11,height:11});case exports.MESSAGE_CHANNELS.GMAIL:return e.jsx(c.default,{width:11,height:11});case exports.MESSAGE_CHANNELS.TASKS:return e.jsx(n.default,{width:11,height:11});case exports.MESSAGE_CHANNELS.BIK_LIVECHAT:return e.jsx(o.default,{width:11,height:11})}})()})),h.status&&e.jsx("div",Object.assign({style:{position:"absolute",left:d[h.size]+"px",top:d[h.size]+"px",width:11,height:11,borderRadius:"50%",display:"flex",justifyContent:"center",backgroundColor:a.COLORS.surface.standard,alignItems:"center"}},{children:h.status?e.jsx("div",{style:{backgroundColor:"ONLINE"===h.status?a.COLORS.special.whatsapp.brand:a.COLORS.content.inactive,width:"8px",height:"8px",borderRadius:"50%"}}):null}))]}))},exports.BACKGROUND_VS_TEXT_COLOR_MAP=u;

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

@@ -1,10 +1,10 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),r=require("./AvatarHelper.js"),t=require("../../constants/Theme.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const n=o(e).default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),r=require("./AvatarHelper.js"),t=require("../../constants/Theme.js");function A(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const a=A(e).default.div`
 	width: ${e=>r.AVATAR_SIZE_MAP[e.size]+"px"};
 	height: ${e=>r.AVATAR_SIZE_MAP[e.size]+"px"};
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	background-color: ${e=>e.type===r.AVATAR_TYPES.IMAGE?"null":e.background===r.AVATAR_BACKGROUND.LIGHT?t.COLORS.background.base:t.COLORS.background.inverse};
-	border: ${e=>e.background===r.AVATAR_BACKGROUND.LIGHT?"1px solid "+t.COLORS.stroke.primary:0};
+	background-color: ${e=>e.type===r.AVATAR_TYPES.IMAGE?"null":e.background===r.AVATAR_BACKGROUND.LIGHT?t.COLORS.background.base:e.background===r.AVATAR_BACKGROUND.WHITE?t.COLORS.surface.standard:t.COLORS.background.inverse};
+	border: ${e=>e.background===r.AVATAR_BACKGROUND.LIGHT||e.background===r.AVATAR_BACKGROUND.WHITE?"1px solid "+t.COLORS.stroke.primary:0};
 	border-radius: 50%;
-`;exports.AvatarStyle=n;
+`;exports.AvatarStyle=a;

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

@@ -11,7 +11,8 @@ export declare enum SIZE {
 }
 export declare enum AVATAR_BACKGROUND {
     LIGHT = "LIGHT",
-    DARK = "DARK"
+    DARK = "DARK",
+    WHITE = "WHITE"
 }
 export declare const AVATAR_SIZE_MAP: {
     SMALL: number;

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

@@ -1 +1 @@
-"use strict";var A,I,e;Object.defineProperty(exports,"__esModule",{value:!0}),exports.AVATAR_TYPES=void 0,(A=exports.AVATAR_TYPES||(exports.AVATAR_TYPES={})).IMAGE="IMAGE",A.INITIALS="INITIALS",A.ICON="ICON",exports.SIZE=void 0,(I=exports.SIZE||(exports.SIZE={})).SMALL="SMALL",I.MEDIUM="MEDIUM",I.LARGE="LARGE",I.INBOX="INBOX",exports.AVATAR_BACKGROUND=void 0,(e=exports.AVATAR_BACKGROUND||(exports.AVATAR_BACKGROUND={})).LIGHT="LIGHT",e.DARK="DARK";const o={[exports.SIZE.SMALL]:24,[exports.SIZE.MEDIUM]:40,[exports.SIZE.LARGE]:64,[exports.SIZE.INBOX]:30};exports.AVATAR_SIZE_MAP=o;
+"use strict";var A,I,e;Object.defineProperty(exports,"__esModule",{value:!0}),exports.AVATAR_TYPES=void 0,(A=exports.AVATAR_TYPES||(exports.AVATAR_TYPES={})).IMAGE="IMAGE",A.INITIALS="INITIALS",A.ICON="ICON",exports.SIZE=void 0,(I=exports.SIZE||(exports.SIZE={})).SMALL="SMALL",I.MEDIUM="MEDIUM",I.LARGE="LARGE",I.INBOX="INBOX",exports.AVATAR_BACKGROUND=void 0,(e=exports.AVATAR_BACKGROUND||(exports.AVATAR_BACKGROUND={})).LIGHT="LIGHT",e.DARK="DARK",e.WHITE="WHITE";const o={[exports.SIZE.SMALL]:24,[exports.SIZE.MEDIUM]:40,[exports.SIZE.LARGE]:64,[exports.SIZE.INBOX]:30};exports.AVATAR_SIZE_MAP=o;

package/dist/esm/components/alerts/Alert.d.ts

@@ -14,5 +14,8 @@ export type AlertProps = {
     redirectTo?: string;
     redirectToText?: string;
     iconStyle?: React.CSSProperties;
+    handleRedirectButtonClick?: () => void;
+    showCrossButton?: boolean;
+    handleCrossIconClick?: () => void;
 };
 export declare const Alert: React.FC<AlertProps>;

package/dist/esm/components/alerts/Alert.js

@@ -1 +1 @@
-import{jsxs as t,jsx as e}from"react/jsx-runtime";import{AlertStyle as o}from"./Alert.styled.js";import{COLOR_CONFIG_MAP as i}from"./AlertHelper.js";import{BodyCaption as r}from"../TypographyStyle.js";import{COLORS as n}from"../../constants/Theme.js";const l=l=>{var c,s;return t(o,Object.assign({type:l.type,contentPosition:l.contentPosition,style:l.containerStyle},{children:[l.icon&&e("div",Object.assign({style:Object.assign(Object.assign({},null==l?void 0:l.iconStyle),{display:(null===(c=null==l?void 0:l.iconStyle)||void 0===c?void 0:c.display)||"flex",alignSelf:(null===(s=null==l?void 0:l.iconStyle)||void 0===s?void 0:s.alignSelf)||"flex-start"})},{children:e(l.icon,{color:i[l.type].textColor,height:16,width:16})})),e(r,Object.assign({style:{color:l.textColor||i[l.type].textColor,marginLeft:8,marginRight:4}},{children:l.text})),l.redirectToText&&l.redirectTo&&e(r,Object.assign({style:{color:n.text.brand,cursor:"pointer",textDecoration:"underline"},onClick:()=>{l.redirectTo&&window.open(l.redirectTo,"_blank")}},{children:l.redirectToText}))]}))};export{l as Alert};
+import{jsxs as t,jsx as e}from"react/jsx-runtime";import o from"../../assets/icons/cross.svg.js";import{AlertStyle as i,AlertContentWrapper as r,CloseIconWrapper as n}from"./Alert.styled.js";import{COLOR_CONFIG_MAP as l}from"./AlertHelper.js";import{BodyCaption as c}from"../TypographyStyle.js";import{COLORS as s}from"../../constants/Theme.js";const d=d=>{var a,h;return t(i,Object.assign({type:d.type,contentPosition:d.contentPosition,style:d.containerStyle},{children:[t(r,{children:[d.icon&&e("div",Object.assign({style:Object.assign(Object.assign({},null==d?void 0:d.iconStyle),{display:(null===(a=null==d?void 0:d.iconStyle)||void 0===a?void 0:a.display)||"flex",alignSelf:(null===(h=null==d?void 0:d.iconStyle)||void 0===h?void 0:h.alignSelf)||"flex-start"})},{children:e(d.icon,{color:l[d.type].textColor,height:16,width:16})})),e(c,Object.assign({style:{color:d.textColor||l[d.type].textColor,marginLeft:8,marginRight:4}},{children:d.text})),d.redirectToText&&d.redirectTo&&e(c,Object.assign({style:{color:s.text.brand,cursor:"pointer",textDecoration:"underline"},onClick:()=>{"INTERNAL"===d.redirectTo&&d.handleRedirectButtonClick?d.handleRedirectButtonClick():d.redirectTo&&window.open(d.redirectTo,"_blank")}},{children:d.redirectToText}))]}),d.showCrossButton&&e(n,{children:e(o,{width:20,height:20,color:s.content.secondary,onClick:()=>{(null==d?void 0:d.handleCrossIconClick)&&d.handleCrossIconClick()}})})]}))};export{d as Alert};

package/dist/esm/components/alerts/Alert.styled.d.ts

@@ -3,3 +3,5 @@ export declare const AlertStyle: import("styled-components").StyledComponent<"di
     type: ALERT_TYPES;
     contentPosition?: CONTENT_POSITION | undefined;
 }, never>;
+export declare const AlertContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CloseIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/esm/components/alerts/Alert.styled.js

@@ -1,9 +1,17 @@
-import o from"styled-components";import{CONTENT_POSITION as r,COLOR_CONFIG_MAP as e}from"./AlertHelper.js";const t=o.div`
+import e from"styled-components";import{CONTENT_POSITION as o,COLOR_CONFIG_MAP as t}from"./AlertHelper.js";const r=e.div`
 	display: flex;
 	align-items: center;
-	justify-content: ${o=>o.contentPosition||r.CENTER};
+	justify-content: ${e=>e.contentPosition||o.CENTER};
 	padding: 8px 16px;
-	background-color: ${o=>e[o.type].backgroundColor};
+	background-color: ${e=>t[e.type].backgroundColor};
 	border-radius: 4px;
-	border: 1px solid ${o=>e[o.type].borderColor};
-`;export{t as AlertStyle};
+	border: 1px solid ${e=>t[e.type].borderColor};
+`,i=e.div`
+	flex: 1;
+	display: flex;
+	justify-content: center;
+`,n=e.div`
+	margin-left: 16px;
+	display: flex;
+	align-items: center;
+`;export{i as AlertContentWrapper,r as AlertStyle,n as CloseIconWrapper};

package/dist/esm/components/alerts/AlertHelper.d.ts

@@ -8,7 +8,8 @@ export declare enum ALERT_TYPES {
 export declare enum CONTENT_POSITION {
     START = "start",
     CENTER = "center",
-    END = "end"
+    END = "end",
+    SPACE_BETWEEN = "space-between"
 }
 export declare const COLOR_CONFIG_MAP: {
     Negative: {

package/dist/esm/components/alerts/AlertHelper.js

@@ -1 +1 @@
-import{COLORS as o}from"../../constants/Theme.js";var r,t;!function(o){o.NEGATIVE="Negative",o.WARNING="Warning",o.POSITIVE="Positive",o.NEUTRAL="Neutral",o.BRAND="Brand"}(r||(r={})),function(o){o.START="start",o.CENTER="center",o.END="end"}(t||(t={}));const n={[r.NEGATIVE]:{backgroundColor:o.background.negative.light,textColor:o.content.negative,borderColor:o.stroke.negative.lightAlt},[r.WARNING]:{backgroundColor:o.background.warning.light,textColor:o.content.warning,borderColor:o.stroke.warning.lightAlt},[r.POSITIVE]:{backgroundColor:o.background.positive.light,textColor:o.content.positive,borderColor:o.stroke.positive.lightAlt},[r.NEUTRAL]:{backgroundColor:o.surface.subdued,textColor:o.content.secondary,borderColor:o.stroke.primary},[r.BRAND]:{backgroundColor:o.background.brandLight,textColor:o.content.brand,borderColor:o.stroke.brandLightAlt}};export{r as ALERT_TYPES,n as COLOR_CONFIG_MAP,t as CONTENT_POSITION};
+import{COLORS as o}from"../../constants/Theme.js";var r,t;!function(o){o.NEGATIVE="Negative",o.WARNING="Warning",o.POSITIVE="Positive",o.NEUTRAL="Neutral",o.BRAND="Brand"}(r||(r={})),function(o){o.START="start",o.CENTER="center",o.END="end",o.SPACE_BETWEEN="space-between"}(t||(t={}));const e={[r.NEGATIVE]:{backgroundColor:o.background.negative.light,textColor:o.content.negative,borderColor:o.stroke.negative.lightAlt},[r.WARNING]:{backgroundColor:o.background.warning.light,textColor:o.content.warning,borderColor:o.stroke.warning.lightAlt},[r.POSITIVE]:{backgroundColor:o.background.positive.light,textColor:o.content.positive,borderColor:o.stroke.positive.lightAlt},[r.NEUTRAL]:{backgroundColor:o.surface.subdued,textColor:o.content.secondary,borderColor:o.stroke.primary},[r.BRAND]:{backgroundColor:o.background.brandLight,textColor:o.content.brand,borderColor:o.stroke.brandLightAlt}};export{r as ALERT_TYPES,e as COLOR_CONFIG_MAP,t as CONTENT_POSITION};

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

@@ -8,6 +8,7 @@ export declare const AVATAR_SIZE_VS_ICON_SIZE_MAP: {
 };
 export declare const BACKGROUND_VS_TEXT_COLOR_MAP: {
     LIGHT: string;
+    WHITE: string;
     DARK: string;
 };
 export type AvatarProps = {

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

@@ -1 +1 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as s}from"react";import{AvatarStyle as i}from"./Avatar.styled.js";import{SIZE as r,AVATAR_BACKGROUND as a,AVATAR_TYPES as o,AVATAR_SIZE_MAP as n}from"./AvatarHelper.js";import{BodyTiny as c,TitleSmall as l,TitleMedium as d}from"../TypographyStyle.js";import{COLORS as h}from"../../constants/Theme.js";import m from"../../assets/icons/bik_livechat.svg.js";import g from"../../assets/icons/CheckSquareOffset.svg.js";import p from"../../assets/icons/email-channel.svg.js";import u from"../../assets/icons/facebook_channel.svg.js";import b from"../../assets/icons/gmail.svg.js";import A from"../../assets/icons/instagram-channel.svg.js";import I from"../../assets/icons/whatsapp_color.svg.js";const f={[r.SMALL]:16,[r.MEDIUM]:20,[r.INBOX]:24,[r.LARGE]:32},S={[a.LIGHT]:h.content.secondary,[a.DARK]:h.surface.standard};var y;!function(e){e.INSTAGRAM="instagram",e.MESSENGER="messenger",e.WHATSAPP="whatsapp",e.GMAIL="gmail",e.LIVECHAT="livechat",e.GOOGLE_BUSINESS_CHAT="gbm",e.SHOPIFY="shopify",e.FACEBOOK="facebook",e.EMAIL="email",e.SMTP="smtp",e.FACEBOOK_CATALOG="facebook-catalog",e.TASKS="tasks",e.BIK_LIVECHAT="livechat"}(y||(y={}));const j=a=>{const[j,v]=s(!1),E=()=>{const e=(a.name||"").split(".").join(" ").split(" ").map((e=>e.charAt(0).toUpperCase())).slice(0,2).join("");return a.size===r.SMALL?t(c,Object.assign({style:{color:S[a.background]}},{children:e})):a.size===r.MEDIUM||a.size===r.INBOX?t(l,Object.assign({style:{color:S[a.background]}},{children:e})):a.size===r.LARGE?t(d,Object.assign({style:{color:S[a.background]}},{children:e})):void 0};return e("div",Object.assign({style:{position:"relative"}},{children:[e(i,Object.assign({type:a.type===o.IMAGE&&j&&a.useNameFallback&&a.name?o.INITIALS:a.type,size:a.size,background:a.background},{children:[a.type===o.IMAGE&&(a.useNameFallback&&!j?t("img",{alt:"",width:n[a.size],height:n[a.size],style:{borderRadius:(null==a?void 0:a.borderRadius)||"50%",objectFit:"contain"},src:a.photoUrl,onError:()=>{v(!0)}}):a.useNameFallback&&j&&a.name?t("div",{children:E()}):t("img",{alt:"",width:n[a.size],height:n[a.size],style:{borderRadius:(null==a?void 0:a.borderRadius)||"50%",objectFit:"contain"},src:a.photoUrl})),a.type===o.INITIALS&&t("div",{children:E()}),a.type===o.ICON&&a.icon&&t(a.icon,{width:f[a.size],height:f[a.size],color:S[a.background]})]})),a.inboxSettings&&t("div",Object.assign({style:{position:"absolute",left:f[a.size]+"px",top:f[a.size]+"px",width:14,height:14,borderRadius:(null==a?void 0:a.borderRadius)||"50%",display:"flex",justifyContent:"center",backgroundColor:a.inboxSettings.isSelected?a.inboxSettings.isComments?h.content.primary:h.background.brandLight:a.inboxSettings.isComments?h.content.primary:h.surface.standard,alignItems:"center"}},{children:(()=>{switch(a.channelName){case y.EMAIL:case y.SMTP:return t(p,{width:11,height:11});case y.FACEBOOK:case y.FACEBOOK_CATALOG:case y.MESSENGER:return t(u,{width:11,height:11});case y.INSTAGRAM:return t(A,{width:11,height:11});case y.WHATSAPP:return t(I,{width:11,height:11});case y.GMAIL:return t(b,{width:11,height:11});case y.TASKS:return t(g,{width:11,height:11});case y.BIK_LIVECHAT:return t(m,{width:11,height:11})}})()})),a.status&&t("div",Object.assign({style:{position:"absolute",left:f[a.size]+"px",top:f[a.size]+"px",width:11,height:11,borderRadius:"50%",display:"flex",justifyContent:"center",backgroundColor:h.surface.standard,alignItems:"center"}},{children:a.status?t("div",{style:{backgroundColor:"ONLINE"===a.status?h.special.whatsapp.brand:h.content.inactive,width:"8px",height:"8px",borderRadius:"50%"}}):null}))]}))};export{f as AVATAR_SIZE_VS_ICON_SIZE_MAP,j as Avatar,S as BACKGROUND_VS_TEXT_COLOR_MAP,y as MESSAGE_CHANNELS};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as s}from"react";import{AvatarStyle as i}from"./Avatar.styled.js";import{SIZE as r,AVATAR_BACKGROUND as o,AVATAR_TYPES as a,AVATAR_SIZE_MAP as n}from"./AvatarHelper.js";import{BodyTiny as c,TitleSmall as l,TitleMedium as d}from"../TypographyStyle.js";import{COLORS as h}from"../../constants/Theme.js";import m from"../../assets/icons/bik_livechat.svg.js";import g from"../../assets/icons/CheckSquareOffset.svg.js";import p from"../../assets/icons/email-channel.svg.js";import u from"../../assets/icons/facebook_channel.svg.js";import b from"../../assets/icons/gmail.svg.js";import A from"../../assets/icons/instagram-channel.svg.js";import I from"../../assets/icons/whatsapp_color.svg.js";const f={[r.SMALL]:16,[r.MEDIUM]:20,[r.INBOX]:24,[r.LARGE]:32},S={[o.LIGHT]:h.content.secondary,[o.WHITE]:h.content.secondary,[o.DARK]:h.surface.standard};var y;!function(e){e.INSTAGRAM="instagram",e.MESSENGER="messenger",e.WHATSAPP="whatsapp",e.GMAIL="gmail",e.LIVECHAT="livechat",e.GOOGLE_BUSINESS_CHAT="gbm",e.SHOPIFY="shopify",e.FACEBOOK="facebook",e.EMAIL="email",e.SMTP="smtp",e.FACEBOOK_CATALOG="facebook-catalog",e.TASKS="tasks",e.BIK_LIVECHAT="livechat"}(y||(y={}));const E=o=>{const[E,j]=s(!1),v=()=>{const e=(o.name||"").split(".").join(" ").split(" ").map((e=>e.charAt(0).toUpperCase())).slice(0,2).join("");return o.size===r.SMALL?t(c,Object.assign({style:{color:S[o.background]}},{children:e})):o.size===r.MEDIUM||o.size===r.INBOX?t(l,Object.assign({style:{color:S[o.background]}},{children:e})):o.size===r.LARGE?t(d,Object.assign({style:{color:S[o.background]}},{children:e})):void 0};return e("div",Object.assign({style:{position:"relative"}},{children:[e(i,Object.assign({type:o.type===a.IMAGE&&E&&o.useNameFallback&&o.name?a.INITIALS:o.type,size:o.size,background:o.background},{children:[o.type===a.IMAGE&&(o.useNameFallback&&!E?t("img",{alt:"",width:n[o.size],height:n[o.size],style:{borderRadius:(null==o?void 0:o.borderRadius)||"50%",objectFit:"contain"},src:o.photoUrl,onError:()=>{j(!0)}}):o.useNameFallback&&E&&o.name?t("div",{children:v()}):t("img",{alt:"",width:n[o.size],height:n[o.size],style:{borderRadius:(null==o?void 0:o.borderRadius)||"50%",objectFit:"contain"},src:o.photoUrl})),o.type===a.INITIALS&&t("div",{children:v()}),o.type===a.ICON&&o.icon&&t(o.icon,{width:f[o.size],height:f[o.size],color:S[o.background]})]})),o.inboxSettings&&t("div",Object.assign({style:{position:"absolute",left:f[o.size]+"px",top:f[o.size]+"px",width:14,height:14,borderRadius:(null==o?void 0:o.borderRadius)||"50%",display:"flex",justifyContent:"center",backgroundColor:o.inboxSettings.isSelected?o.inboxSettings.isComments?h.content.primary:h.background.brandLight:o.inboxSettings.isComments?h.content.primary:h.surface.standard,alignItems:"center"}},{children:(()=>{switch(o.channelName){case y.EMAIL:case y.SMTP:return t(p,{width:11,height:11});case y.FACEBOOK:case y.FACEBOOK_CATALOG:case y.MESSENGER:return t(u,{width:11,height:11});case y.INSTAGRAM:return t(A,{width:11,height:11});case y.WHATSAPP:return t(I,{width:11,height:11});case y.GMAIL:return t(b,{width:11,height:11});case y.TASKS:return t(g,{width:11,height:11});case y.BIK_LIVECHAT:return t(m,{width:11,height:11})}})()})),o.status&&t("div",Object.assign({style:{position:"absolute",left:f[o.size]+"px",top:f[o.size]+"px",width:11,height:11,borderRadius:"50%",display:"flex",justifyContent:"center",backgroundColor:h.surface.standard,alignItems:"center"}},{children:o.status?t("div",{style:{backgroundColor:"ONLINE"===o.status?h.special.whatsapp.brand:h.content.inactive,width:"8px",height:"8px",borderRadius:"50%"}}):null}))]}))};export{f as AVATAR_SIZE_VS_ICON_SIZE_MAP,E as Avatar,S as BACKGROUND_VS_TEXT_COLOR_MAP,y as MESSAGE_CHANNELS};

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

@@ -4,7 +4,7 @@ import r from"styled-components";import{AVATAR_SIZE_MAP as e,AVATAR_TYPES as o,A
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	background-color: ${r=>r.type===o.IMAGE?"null":r.background===t.LIGHT?n.background.base:n.background.inverse};
-	border: ${r=>r.background===t.LIGHT?"1px solid "+n.stroke.primary:0};
+	background-color: ${r=>r.type===o.IMAGE?"null":r.background===t.LIGHT?n.background.base:r.background===t.WHITE?n.surface.standard:n.background.inverse};
+	border: ${r=>r.background===t.LIGHT||r.background===t.WHITE?"1px solid "+n.stroke.primary:0};
 	border-radius: 50%;
 `;export{s as AvatarStyle};

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

@@ -11,7 +11,8 @@ export declare enum SIZE {
 }
 export declare enum AVATAR_BACKGROUND {
     LIGHT = "LIGHT",
-    DARK = "DARK"
+    DARK = "DARK",
+    WHITE = "WHITE"
 }
 export declare const AVATAR_SIZE_MAP: {
     SMALL: number;

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

@@ -1 +1 @@
-var I,L,A;!function(I){I.IMAGE="IMAGE",I.INITIALS="INITIALS",I.ICON="ICON"}(I||(I={})),function(I){I.SMALL="SMALL",I.MEDIUM="MEDIUM",I.LARGE="LARGE",I.INBOX="INBOX"}(L||(L={})),function(I){I.LIGHT="LIGHT",I.DARK="DARK"}(A||(A={}));const M={[L.SMALL]:24,[L.MEDIUM]:40,[L.LARGE]:64,[L.INBOX]:30};export{A as AVATAR_BACKGROUND,M as AVATAR_SIZE_MAP,I as AVATAR_TYPES,L as SIZE};
+var I,L,A;!function(I){I.IMAGE="IMAGE",I.INITIALS="INITIALS",I.ICON="ICON"}(I||(I={})),function(I){I.SMALL="SMALL",I.MEDIUM="MEDIUM",I.LARGE="LARGE",I.INBOX="INBOX"}(L||(L={})),function(I){I.LIGHT="LIGHT",I.DARK="DARK",I.WHITE="WHITE"}(A||(A={}));const M={[L.SMALL]:24,[L.MEDIUM]:40,[L.LARGE]:64,[L.INBOX]:30};export{A as AVATAR_BACKGROUND,M as AVATAR_SIZE_MAP,I as AVATAR_TYPES,L as SIZE};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "0.0.664-beta.5",
+	"version": "0.0.665-beta.0",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",