@botonic/react 0.55.1 → 0.57.0-rslib-esm.0

package/lib/esm/webchat/theme/default-theme.js

@@ -1,8 +1,8 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultTheme = void 0;
-const constants_1 = require("../../constants");
-exports.defaultTheme = {
+import { COLORS, WEBCHAT, WEBCHAT_DEFAULT_CONTENTS } from "../../constants.js";
+
+
+
+const defaultTheme = {
     style: {
         width: '300px',
         height: '450px',
@@ -12,8 +12,8 @@ exports.defaultTheme = {
         position: 'fixed',
         right: '20px',
         bottom: '20px',
-        backgroundColor: constants_1.COLORS.SOLID_WHITE,
-        boxShadow: `${constants_1.COLORS.SOLID_BLACK_ALPHA_0_2} 0px 0px 12px`,
+        backgroundColor: COLORS.SOLID_WHITE,
+        boxShadow: `${COLORS.SOLID_BLACK_ALPHA_0_2} 0px 0px 12px`
     },
     mobileBreakpoint: 768,
     mobileStyle: {
@@ -23,33 +23,33 @@ exports.defaultTheme = {
         fontSize: '16px',
         position: 'absolute',
         right: '0px',
-        bottom: '0px',
+        bottom: '0px'
     },
     header: {
         title: 'Botonic',
         subtitle: '',
-        image: constants_1.WEBCHAT.DEFAULTS.LOGO,
+        image: WEBCHAT.DEFAULTS.LOGO,
         style: {
-            borderRadius: '10px 10px 0px 0px',
+            borderRadius: '10px 10px 0px 0px'
         },
         mobileStyle: {
-            borderRadius: '0px',
-        },
+            borderRadius: '0px'
+        }
     },
     brand: {
-        color: constants_1.COLORS.BOTONIC_BLUE,
-        image: constants_1.WEBCHAT.DEFAULTS.LOGO,
+        color: COLORS.BOTONIC_BLUE,
+        image: WEBCHAT.DEFAULTS.LOGO
     },
     button: {
         autodisable: false,
         disabledstyle: {
             opacity: 0.5,
             cursor: 'auto',
-            pointerEvents: 'none',
+            pointerEvents: 'none'
         },
         messageType: 'text',
-        hoverBackground: constants_1.COLORS.CONCRETE_WHITE,
-        hoverTextColor: constants_1.COLORS.SOLID_BLACK,
+        hoverBackground: COLORS.CONCRETE_WHITE,
+        hoverTextColor: COLORS.SOLID_BLACK,
         style: {
             width: '100%',
             maxHeight: '80px',
@@ -57,48 +57,63 @@ exports.defaultTheme = {
             fontFamily: 'inherit',
             fontSize: '14px',
             fontWeight: 'normal',
-            background: constants_1.COLORS.SOLID_WHITE,
-            color: constants_1.COLORS.SOLID_BLACK,
+            background: COLORS.SOLID_WHITE,
+            color: COLORS.SOLID_BLACK,
             outline: '0',
-            border: ` 1px solid ${constants_1.COLORS.SEASHELL_WHITE}`,
+            border: ` 1px solid ${COLORS.SEASHELL_WHITE}`,
             borderRadius: '0px',
             padding: '12px 32px',
-            overflow: 'hidden',
+            overflow: 'hidden'
         },
         urlIcon: {
             enable: false,
-            image: constants_1.WEBCHAT.DEFAULTS.URL_ICON,
-        },
+            image: WEBCHAT.DEFAULTS.URL_ICON
+        }
     },
     message: {
         user: {
-            blobTick: true,
+            blobTick: true
         },
         bot: {
-            blobTick: true,
-        },
+            blobTick: true
+        }
+    },
+    triggerButton: {
+        image: WEBCHAT.DEFAULTS.LOGO
     },
-    triggerButton: { image: constants_1.WEBCHAT.DEFAULTS.LOGO },
     userInput: {
-        attachments: { enable: undefined },
+        attachments: {
+            enable: undefined
+        },
         box: {
-            placeholder: constants_1.WEBCHAT_DEFAULT_CONTENTS.INPUT_PLACEHOLDER,
+            placeholder: WEBCHAT_DEFAULT_CONTENTS.INPUT_PLACEHOLDER
+        },
+        emojiPicker: {
+            enable: undefined
+        },
+        sendButton: {
+            enable: true
         },
-        emojiPicker: { enable: undefined },
-        sendButton: { enable: true },
-        enable: true,
+        enable: true
     },
     carousel: {
-        enableArrows: true,
+        enableArrows: true
+    },
+    animations: {
+        enable: true
     },
-    animations: { enable: true },
     notifications: {
         enable: false,
         banner: {
             enable: false,
-            text: 'unread messages',
+            text: 'unread messages'
         },
-        triggerButton: { enable: false },
-    },
+        triggerButton: {
+            enable: false
+        }
+    }
 };
+
+export { defaultTheme };
+
 //# sourceMappingURL=default-theme.js.map

package/lib/esm/webchat/theme/default-theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"default-theme.js","sourceRoot":"","sources":["../../../../src/webchat/theme/default-theme.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"webchat/theme/default-theme.js","sources":["../../../../src/webchat/theme/default-theme.ts"],"sourcesContent":["import { COLORS, WEBCHAT, WEBCHAT_DEFAULT_CONTENTS } from '../../constants'\nimport type { WebchatTheme } from './types'\n\nexport const defaultTheme: WebchatTheme = {\n  style: {\n    width: '300px',\n    height: '450px',\n    borderRadius: '10px',\n    fontFamily: \"'Noto Sans JP', sans-serif\",\n    fontSize: '16px',\n    position: 'fixed',\n    right: '20px',\n    bottom: '20px',\n    backgroundColor: COLORS.SOLID_WHITE,\n    boxShadow: `${COLORS.SOLID_BLACK_ALPHA_0_2} 0px 0px 12px`,\n  },\n  mobileBreakpoint: 768,\n  mobileStyle: {\n    width: '100%',\n    height: '100%',\n    borderRadius: '0px',\n    fontSize: '16px',\n    position: 'absolute',\n    right: '0px',\n    bottom: '0px',\n  },\n  header: {\n    title: 'Botonic',\n    subtitle: '',\n    image: WEBCHAT.DEFAULTS.LOGO,\n    style: {\n      borderRadius: '10px 10px 0px 0px',\n    },\n    mobileStyle: {\n      borderRadius: '0px',\n    },\n  },\n  brand: {\n    color: COLORS.BOTONIC_BLUE,\n    image: WEBCHAT.DEFAULTS.LOGO,\n  },\n  button: {\n    autodisable: false,\n    disabledstyle: {\n      opacity: 0.5,\n      cursor: 'auto',\n      pointerEvents: 'none',\n    },\n    messageType: 'text',\n    hoverBackground: COLORS.CONCRETE_WHITE,\n    hoverTextColor: COLORS.SOLID_BLACK,\n    style: {\n      width: '100%',\n      maxHeight: '80px',\n      height: 'auto',\n      fontFamily: 'inherit',\n      fontSize: '14px',\n      fontWeight: 'normal',\n      background: COLORS.SOLID_WHITE,\n      color: COLORS.SOLID_BLACK,\n      outline: '0',\n      border: ` 1px solid ${COLORS.SEASHELL_WHITE}`,\n      borderRadius: '0px',\n      padding: '12px 32px',\n      overflow: 'hidden',\n    },\n    urlIcon: {\n      enable: false,\n      image: WEBCHAT.DEFAULTS.URL_ICON,\n    },\n  },\n  message: {\n    user: {\n      blobTick: true,\n    },\n    bot: {\n      blobTick: true,\n    },\n  },\n  triggerButton: { image: WEBCHAT.DEFAULTS.LOGO },\n  userInput: {\n    attachments: { enable: undefined },\n    box: {\n      placeholder: WEBCHAT_DEFAULT_CONTENTS.INPUT_PLACEHOLDER,\n    },\n    emojiPicker: { enable: undefined },\n    sendButton: { enable: true },\n    enable: true,\n  },\n  carousel: {\n    enableArrows: true,\n  },\n  animations: { enable: true },\n  notifications: {\n    enable: false,\n    banner: {\n      enable: false,\n      text: 'unread messages',\n    },\n    triggerButton: { enable: false },\n  },\n}\n"],"names":["COLORS","WEBCHAT","WEBCHAT_DEFAULT_CONTENTS","defaultTheme","undefined"],"mappings":";;;AAA2E;AAGpE,MAAMG,YAAYA,GAAiB;IACxC,OAAO;QACL,OAAO;QACP,QAAQ;QACR,cAAc;QACd,YAAY;QACZ,UAAU;QACV,UAAU;QACV,OAAO;QACP,QAAQ;QACR,iBAAiBH,kBAAkB;QACnC,WAAW,GAAGA,4BAA4B,CAAC,aAAa,CAAC;IAC3D;IACA,kBAAkB;IAClB,aAAa;QACX,OAAO;QACP,QAAQ;QACR,cAAc;QACd,UAAU;QACV,UAAU;QACV,OAAO;QACP,QAAQ;IACV;IACA,QAAQ;QACN,OAAO;QACP,UAAU;QACV,OAAOC,qBAAqB;QAC5B,OAAO;YACL,cAAc;QAChB;QACA,aAAa;YACX,cAAc;QAChB;IACF;IACA,OAAO;QACL,OAAOD,mBAAmB;QAC1B,OAAOC,qBAAqB;IAC9B;IACA,QAAQ;QACN,aAAa;QACb,eAAe;YACb,SAAS;YACT,QAAQ;YACR,eAAe;QACjB;QACA,aAAa;QACb,iBAAiBD,qBAAqB;QACtC,gBAAgBA,kBAAkB;QAClC,OAAO;YACL,OAAO;YACP,WAAW;YACX,QAAQ;YACR,YAAY;YACZ,UAAU;YACV,YAAY;YACZ,YAAYA,kBAAkB;YAC9B,OAAOA,kBAAkB;YACzB,SAAS;YACT,QAAQ,CAAC,WAAW,EAAEA,qBAAqB,EAAE;YAC7C,cAAc;YACd,SAAS;YACT,UAAU;QACZ;QACA,SAAS;YACP,QAAQ;YACR,OAAOC,yBAAyB;QAClC;IACF;IACA,SAAS;QACP,MAAM;YACJ,UAAU;QACZ;QACA,KAAK;YACH,UAAU;QACZ;IACF;IACA,eAAe;QAAE,OAAOA,qBAAqB;IAAC;IAC9C,WAAW;QACT,aAAa;YAAE,QAAQG;QAAU;QACjC,KAAK;YACH,aAAaF,0CAA0C;QACzD;QACA,aAAa;YAAE,QAAQE;QAAU;QACjC,YAAY;YAAE,QAAQ;QAAK;QAC3B,QAAQ;IACV;IACA,UAAU;QACR,cAAc;IAChB;IACA,YAAY;QAAE,QAAQ;IAAK;IAC3B,eAAe;QACb,QAAQ;QACR,QAAQ;YACN,QAAQ;YACR,MAAM;QACR;QACA,eAAe;YAAE,QAAQ;QAAM;IACjC;AACF,EAAC"}

package/lib/esm/webchat/theme/theme.d.ts

@@ -0,0 +1,8 @@
+import 'styled-components'
+
+import { WebchatTheme } from './types.js'
+
+// With this declaration, we can use the theme prop in styled components with TypeScript defined in WebchatTheme
+declare module 'styled-components' {
+  export interface DefaultTheme extends WebchatTheme {}
+}

package/lib/esm/webchat/theme/types.d.ts

@@ -1,4 +1,4 @@
-import type { BlockInputOption, ButtonProps, CustomMessageType } from '../../components/index-types';
+import type { BlockInputOption, ButtonProps, CustomMessageType } from '../../components/index-types.js';
 export interface ImagePreviewerProps {
     src: string;
     isPreviewerOpened: boolean;

package/lib/esm/webchat/theme/types.js

@@ -1,3 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+
+
 //# sourceMappingURL=types.js.map

package/lib/esm/webchat/theme/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/webchat/theme/types.ts"],"names":[],"mappings":""}
+{"version":3,"file":"webchat/theme/types.js","sources":["../../../../src/webchat/theme/types.ts"],"sourcesContent":["import type {\n  BlockInputOption,\n  ButtonProps,\n  CustomMessageType,\n} from '../../components/index-types'\n\nexport interface ImagePreviewerProps {\n  src: string\n  isPreviewerOpened: boolean\n  closePreviewer: () => void\n}\nexport interface CoverComponentProps {\n  closeComponent: () => void\n}\n\nexport interface CoverComponentOptions {\n  component: React.ComponentType<CoverComponentProps>\n  props?: any\n}\n\nexport type PersistentMenuCloseOption = { closeLabel: string }\nexport type PersistentMenuOption = { label: string } & ButtonProps\n\nexport type PersistentMenuOptionsTheme = (\n  | PersistentMenuCloseOption\n  | PersistentMenuOption\n)[]\n\nexport interface PersistentMenuOptionsProps {\n  onClick: () => void\n  options: any\n}\n\nexport interface BlobProps {\n  blobTick?: boolean\n  blobTickStyle?: any\n  blobWidth?: string\n  imageStyle?: any\n}\n\nexport interface CustomButtonProps {\n  children: React.ReactNode\n  onClick?: () => void\n}\n\ninterface ButtonStyle {\n  width?: string\n  maxHeight?: string\n  height?: string\n  fontFamily?: string\n  fontSize?: string\n  fontWeight?: string\n  background?: string\n  color?: string\n  outline?: string\n  border?: string\n  borderRadius?: string\n  padding?: string\n  overflow?: string\n}\n\nexport interface WebchatTheme {\n  style: {\n    width?: string\n    height?: string\n    borderRadius?: string\n    fontFamily?: string\n    fontSize?: string\n    position?: 'fixed' | 'absolute'\n    right?: string\n    bottom?: string\n    backgroundColor?: string\n    boxShadow?: string\n  }\n  mobileBreakpoint: number\n  mobileStyle: {\n    width?: string\n    height?: string\n    borderRadius?: string\n    fontSize?: string\n    position?: 'fixed' | 'absolute'\n    right?: string\n    bottom?: string\n  }\n\n  coverComponent?: CoverComponentOptions\n  webview?: {\n    style?: any\n    header?: {\n      style?: any\n    }\n  }\n  animations?: { enable?: boolean }\n  intro?: {\n    style?: any\n    image?: string\n    custom?: React.ComponentType\n  }\n  brand?: { color?: string; image?: string }\n  header?: {\n    title?: string\n    subtitle?: string\n    image?: string\n    style?: {\n      borderRadius?: string\n    }\n    mobileStyle?: {\n      borderRadius?: string\n    }\n    custom?: React.ComponentType\n  }\n  message?: {\n    bot?: BlobProps & { image?: string; style?: any }\n    agent?: { image?: string }\n    user?: BlobProps & { style?: any }\n    // TODO: Review type used in customTypes should be a component exported by default with customMessage function\n    customTypes?: CustomMessageType[]\n    style?: any\n    timestamps?: {\n      withImage?: boolean\n      format: () => string\n      style?: any\n      enable?: boolean\n    }\n  }\n  button?: {\n    autodisable?: boolean\n    disabledstyle?: {\n      opacity?: number\n      cursor?: string\n      pointerEvents?: string\n      backgroundColor?: string\n    }\n    hoverBackground?: string\n    hoverTextColor?: string\n    messageType?: 'text' | 'postback'\n    urlIcon?: {\n      image?: string\n      enable?: boolean\n    }\n    style?: ButtonStyle\n    custom?: React.ComponentType<CustomButtonProps>\n  }\n  replies?: {\n    align?: 'left' | 'center' | 'right'\n    wrap?: 'wrap' | 'nowrap'\n  }\n  carousel?: {\n    arrow?: {\n      left: { custom?: React.ComponentType }\n      right: { custom?: React.ComponentType }\n    }\n    enableArrows?: boolean\n  }\n  reply?: {\n    style?: any\n    custom?: React.ComponentType\n  }\n  triggerButton: {\n    image?: string\n    style?: any\n    custom?: React.ComponentType\n  }\n  notifications?: {\n    enable?: boolean\n    banner?: {\n      custom?: React.ComponentType\n      enable?: boolean\n      text?: string\n    }\n    triggerButton?: { enable?: boolean }\n  }\n  scrollButton?: {\n    enable?: boolean\n    custom?: React.ComponentType\n  }\n  markdownStyle?: string // string template with css styles\n  userInput?: {\n    attachments?: {\n      enable?: boolean\n      custom?: React.ComponentType\n    }\n    blockInputs?: BlockInputOption[]\n    box?: {\n      placeholder: string\n      style?: any\n    }\n    emojiPicker?: {\n      enable?: boolean\n      custom?: React.ComponentType\n    }\n    menu?: {\n      darkBackground?: boolean\n      custom?: React.ComponentType<PersistentMenuOptionsProps>\n    }\n    menuButton?: { custom?: React.ComponentType }\n    persistentMenu?: PersistentMenuOptionsTheme\n    sendButton?: {\n      enable?: boolean\n      custom?: React.ComponentType\n    }\n    enable?: boolean\n    style?: any\n  }\n  imagePreviewer?: React.ComponentType<ImagePreviewerProps>\n}\n"],"names":[],"mappings":"AA6MC"}

package/lib/esm/webchat/tracking.js

@@ -1,24 +1,26 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTracking = useTracking;
-const react_1 = require("react");
-const context_1 = require("./context");
+import { useContext } from "react";
+import { WebchatContext } from "./context/index.js";
+
+
+
+
+
 function useTracking() {
-    const { webchatState, trackEvent } = (0, react_1.useContext)(context_1.WebchatContext);
-    const getRequest = () => {
+    const { webchatState, trackEvent } = useContext(WebchatContext);
+    const getRequest = ()=>{
         const request = {
             session: {
-                ...webchatState.session,
+                ...webchatState.session
             },
-            getUserCountry: () => webchatState.session.user?.country || '',
-            getUserLocale: () => webchatState.session.user?.locale || '',
-            getSystemLocale: () => {
+            getUserCountry: ()=>webchatState.session.user?.country || '',
+            getUserLocale: ()=>webchatState.session.user?.locale || '',
+            getSystemLocale: ()=>{
                 return webchatState.session.user?.system_locale || '';
-            },
+            }
         };
         return request;
     };
-    const trackCustomEvent = async (event) => {
+    const trackCustomEvent = async (event)=>{
         if (!trackEvent) {
             return;
         }
@@ -26,7 +28,7 @@ function useTracking() {
         const { action, ...eventArgs } = event;
         await trackEvent(request, action, eventArgs);
     };
-    const trackFeedbackEvent = async (event) => {
+    const trackFeedbackEvent = async (event)=>{
         if (!trackEvent) {
             return;
         }
@@ -34,6 +36,12 @@ function useTracking() {
         const { action, ...eventArgs } = event;
         await trackEvent(request, action, eventArgs);
     };
-    return { trackCustomEvent, trackFeedbackEvent };
+    return {
+        trackCustomEvent,
+        trackFeedbackEvent
+    };
 }
+
+export { useTracking };
+
 //# sourceMappingURL=tracking.js.map

package/lib/esm/webchat/tracking.js.map

@@ -1 +1 @@
-{"version":3,"file":"tracking.js","sourceRoot":"","sources":["../../../src/webchat/tracking.ts"],"names":[],"mappings":";;AAWA,kCAuCC;AAjDD,iCAAkC;AAGlC,uCAA0C;AAO1C,SAAgB,WAAW;IACzB,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,GAAG,IAAA,kBAAU,EAAC,wBAAc,CAAC,CAAA;IAE/D,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,MAAM,OAAO,GAAG;YACd,OAAO,EAAE;gBACP,GAAG,YAAY,CAAC,OAAO;aACxB;YACD,cAAc,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,EAAE,OAAO,IAAI,EAAE;YAC9D,aAAa,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,EAAE,MAAM,IAAI,EAAE;YAC5D,eAAe,EAAE,GAAG,EAAE;gBACpB,OAAO,YAAY,CAAC,OAAO,CAAC,IAAI,EAAE,aAAa,IAAI,EAAE,CAAA;YACvD,CAAC;SAC0B,CAAA;QAE7B,OAAO,OAAO,CAAA;IAChB,CAAC,CAAA;IAED,MAAM,gBAAgB,GAAG,KAAK,EAAE,KAAkB,EAAE,EAAE;QACpD,IAAI,CAAC,UAAU,EAAE,CAAC;YAChB,OAAM;QACR,CAAC;QAED,MAAM,OAAO,GAAG,UAAU,EAAE,CAAA;QAC5B,MAAM,EAAE,MAAM,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAA;QACtC,MAAM,UAAU,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,CAAC,CAAA;IAC9C,CAAC,CAAA;IAED,MAAM,kBAAkB,GAAG,KAAK,EAAE,KAAoB,EAAE,EAAE;QACxD,IAAI,CAAC,UAAU,EAAE,CAAC;YAChB,OAAM;QACR,CAAC;QAED,MAAM,OAAO,GAAG,UAAU,EAAE,CAAA;QAC5B,MAAM,EAAE,MAAM,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAA;QACtC,MAAM,UAAU,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,CAAC,CAAA;IAC9C,CAAC,CAAA;IAED,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,CAAA;AACjD,CAAC"}
+{"version":3,"file":"webchat/tracking.js","sources":["../../../src/webchat/tracking.ts"],"sourcesContent":["import type { EventCustom, EventFeedback } from '@botonic/core'\nimport { useContext } from 'react'\n\nimport type { ActionRequest } from '../index-types'\nimport { WebchatContext } from './context'\n\ninterface UseTracking {\n  trackCustomEvent: (event: EventCustom) => Promise<void>\n  trackFeedbackEvent: (event: EventFeedback) => Promise<void>\n}\n\nexport function useTracking(): UseTracking {\n  const { webchatState, trackEvent } = useContext(WebchatContext)\n\n  const getRequest = () => {\n    const request = {\n      session: {\n        ...webchatState.session,\n      },\n      getUserCountry: () => webchatState.session.user?.country || '',\n      getUserLocale: () => webchatState.session.user?.locale || '',\n      getSystemLocale: () => {\n        return webchatState.session.user?.system_locale || ''\n      },\n    } as unknown as ActionRequest\n\n    return request\n  }\n\n  const trackCustomEvent = async (event: EventCustom) => {\n    if (!trackEvent) {\n      return\n    }\n\n    const request = getRequest()\n    const { action, ...eventArgs } = event\n    await trackEvent(request, action, eventArgs)\n  }\n\n  const trackFeedbackEvent = async (event: EventFeedback) => {\n    if (!trackEvent) {\n      return\n    }\n\n    const request = getRequest()\n    const { action, ...eventArgs } = event\n    await trackEvent(request, action, eventArgs)\n  }\n\n  return { trackCustomEvent, trackFeedbackEvent }\n}\n"],"names":["useContext","WebchatContext","useTracking","webchatState","trackEvent","getRequest","request","trackCustomEvent","event","action","eventArgs","trackFeedbackEvent"],"mappings":";;;;;AACkC;AAGQ;AAOnC,SAASE,WAAWA;IACzB,MAAM,EAAEC,YAAY,EAAEC,UAAU,EAAE,GAAGJ,UAAUA,CAACC,cAAcA;IAE9D,MAAMI,aAAa;QACjB,MAAMC,UAAU;YACd,SAAS;gBACP,GAAGH,aAAa,OAAO;YACzB;YACA,gBAAgB,IAAMA,aAAa,OAAO,CAAC,IAAI,EAAE,WAAW;YAC5D,eAAe,IAAMA,aAAa,OAAO,CAAC,IAAI,EAAE,UAAU;YAC1D,iBAAiB;gBACf,OAAOA,aAAa,OAAO,CAAC,IAAI,EAAE,iBAAiB;YACrD;QACF;QAEA,OAAOG;IACT;IAEA,MAAMC,mBAAmB,OAAOC;QAC9B,IAAI,CAACJ,YAAY;YACf;QACF;QAEA,MAAME,UAAUD;QAChB,MAAM,EAAEI,MAAM,EAAE,GAAGC,WAAW,GAAGF;QACjC,MAAMJ,WAAWE,SAASG,QAAQC;IACpC;IAEA,MAAMC,qBAAqB,OAAOH;QAChC,IAAI,CAACJ,YAAY;YACf;QACF;QAEA,MAAME,UAAUD;QAChB,MAAM,EAAEI,MAAM,EAAE,GAAGC,WAAW,GAAGF;QACjC,MAAMJ,WAAWE,SAASG,QAAQC;IACpC;IAEA,OAAO;QAAEH;QAAkBI;IAAmB;AAChD"}

package/lib/esm/webchat/trigger-button/index.js

@@ -1,34 +1,59 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TriggerButton = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-/** biome-ignore-all lint/a11y/noStaticElementInteractions: we need to use static elements for the trigger button */
-/** biome-ignore-all lint/a11y/useKeyWithClickEvents: we need to use key with click events for the trigger button */
-const react_1 = require("react");
-const constants_1 = require("../../constants");
-const environment_1 = require("../../util/environment");
-const context_1 = require("../../webchat/context");
-const styles_1 = require("./styles");
-const TriggerButton = () => {
-    const { webchatState, getThemeProperty, toggleWebchat } = (0, react_1.useContext)(context_1.WebchatContext);
-    const getTriggerImage = () => {
-        const image = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.triggerButtonImage, undefined);
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import { ROLES, WEBCHAT } from "../../constants.js";
+import { resolveImage } from "../../util/environment.js";
+import { WebchatContext } from "../context/index.js";
+import { StyledTriggerButton, TriggerImage, UnreadMessagesCounter } from "./styles.js";
+
+
+
+
+
+
+
+
+/** biome-ignore-all lint/a11y/noStaticElementInteractions: we need to use static elements for the trigger button */ /** biome-ignore-all lint/a11y/useKeyWithClickEvents: we need to use key with click events for the trigger button */ 
+
+
+
+
+const TriggerButton = ()=>{
+    const { webchatState, getThemeProperty, toggleWebchat } = useContext(WebchatContext);
+    const getTriggerImage = ()=>{
+        const image = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.triggerButtonImage, undefined);
         if (!image) {
-            webchatState.theme.triggerButton.image = constants_1.WEBCHAT.DEFAULTS.LOGO;
+            webchatState.theme.triggerButton.image = WEBCHAT.DEFAULTS.LOGO;
             return null;
         }
         return image;
     };
     const triggerButtonImage = getTriggerImage();
-    const triggerButtonStyle = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.triggerButtonStyle);
-    const notificationsTriggerButtonEnabled = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.notificationsTriggerButtonEnabled);
-    const notificationsEnabled = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.notificationsEnabled, notificationsTriggerButtonEnabled);
-    const CustomTriggerButton = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.customTrigger);
-    const handleClick = (event) => {
+    const triggerButtonStyle = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.triggerButtonStyle);
+    const notificationsTriggerButtonEnabled = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.notificationsTriggerButtonEnabled);
+    const notificationsEnabled = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.notificationsEnabled, notificationsTriggerButtonEnabled);
+    const CustomTriggerButton = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.customTrigger);
+    const handleClick = (event)=>{
         toggleWebchat(true);
         event.preventDefault();
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { onClick: handleClick, children: [webchatState.numUnreadMessages !== 0 && notificationsEnabled && ((0, jsx_runtime_1.jsx)(styles_1.UnreadMessagesCounter, { className: 'trigger-notifications', children: webchatState.numUnreadMessages })), CustomTriggerButton ? ((0, jsx_runtime_1.jsx)(CustomTriggerButton, {})) : ((0, jsx_runtime_1.jsx)(styles_1.StyledTriggerButton, { role: constants_1.ROLES.TRIGGER_BUTTON, style: triggerButtonStyle, children: triggerButtonImage && ((0, jsx_runtime_1.jsx)(styles_1.TriggerImage, { src: (0, environment_1.resolveImage)(triggerButtonImage) })) }))] }));
+    return /*#__PURE__*/ jsxs("div", {
+        onClick: handleClick,
+        children: [
+            webchatState.numUnreadMessages !== 0 && notificationsEnabled && /*#__PURE__*/ jsx(UnreadMessagesCounter, {
+                className: "trigger-notifications",
+                children: webchatState.numUnreadMessages
+            }),
+            CustomTriggerButton ? /*#__PURE__*/ jsx(CustomTriggerButton, {}) : /*#__PURE__*/ jsx(StyledTriggerButton, {
+                role: ROLES.TRIGGER_BUTTON,
+                style: triggerButtonStyle,
+                children: triggerButtonImage && /*#__PURE__*/ jsx(TriggerImage, {
+                    src: resolveImage(triggerButtonImage)
+                })
+            })
+        ]
+    });
 };
-exports.TriggerButton = TriggerButton;
+
+export { TriggerButton };
+
 //# sourceMappingURL=index.js.map

package/lib/esm/webchat/trigger-button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/webchat/trigger-button/index.tsx"],"names":[],"mappings":";;;;AAAA,oHAAoH;AACpH,oHAAoH;AACpH,iCAAkC;AAElC,+CAAgD;AAChD,wDAAqD;AACrD,mDAAsD;AACtD,qCAIiB;AAEV,MAAM,aAAa,GAAG,GAAgB,EAAE;IAC7C,MAAM,EAAE,YAAY,EAAE,gBAAgB,EAAE,aAAa,EAAE,GACrD,IAAA,kBAAU,EAAC,wBAAc,CAAC,CAAA;IAE5B,MAAM,eAAe,GAAG,GAAG,EAAE;QAC3B,MAAM,KAAK,GAAG,gBAAgB,CAC5B,mBAAO,CAAC,iBAAiB,CAAC,kBAAkB,EAC5C,SAAS,CACV,CAAA;QAED,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,YAAY,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,GAAG,mBAAO,CAAC,QAAQ,CAAC,IAAI,CAAA;YAC9D,OAAO,IAAI,CAAA;QACb,CAAC;QACD,OAAO,KAAK,CAAA;IACd,CAAC,CAAA;IAED,MAAM,kBAAkB,GAAG,eAAe,EAAE,CAAA;IAE5C,MAAM,kBAAkB,GAAG,gBAAgB,CACzC,mBAAO,CAAC,iBAAiB,CAAC,kBAAkB,CAC7C,CAAA;IAED,MAAM,iCAAiC,GAAG,gBAAgB,CACxD,mBAAO,CAAC,iBAAiB,CAAC,iCAAiC,CAC5D,CAAA;IAED,MAAM,oBAAoB,GAAG,gBAAgB,CAC3C,mBAAO,CAAC,iBAAiB,CAAC,oBAAoB,EAC9C,iCAAiC,CAClC,CAAA;IAED,MAAM,mBAAmB,GAAG,gBAAgB,CAC1C,mBAAO,CAAC,iBAAiB,CAAC,aAAa,CACxC,CAAA;IAED,MAAM,WAAW,GAAG,CAAC,KAAU,EAAE,EAAE;QACjC,aAAa,CAAC,IAAI,CAAC,CAAA;QACnB,KAAK,CAAC,cAAc,EAAE,CAAA;IACxB,CAAC,CAAA;IAED,OAAO,CACL,iCAAK,OAAO,EAAE,WAAW,aACtB,YAAY,CAAC,iBAAiB,KAAK,CAAC,IAAI,oBAAoB,IAAI,CAC/D,uBAAC,8BAAqB,IAAC,SAAS,EAAC,uBAAuB,YACrD,YAAY,CAAC,iBAAiB,GACT,CACzB,EACA,mBAAmB,CAAC,CAAC,CAAC,CACrB,uBAAC,mBAAmB,KAAG,CACxB,CAAC,CAAC,CAAC,CACF,uBAAC,4BAAmB,IAClB,IAAI,EAAE,iBAAK,CAAC,cAAc,EAC1B,KAAK,EAAE,kBAAkB,YAExB,kBAAkB,IAAI,CACrB,uBAAC,qBAAY,IAAC,GAAG,EAAE,IAAA,0BAAY,EAAC,kBAAkB,CAAC,GAAI,CACxD,GACmB,CACvB,IACG,CACP,CAAA;AACH,CAAC,CAAA;AA9DY,QAAA,aAAa,iBA8DzB"}
+{"version":3,"file":"webchat/trigger-button/index.js","sources":["../../../../src/webchat/trigger-button/index.tsx"],"sourcesContent":["/** biome-ignore-all lint/a11y/noStaticElementInteractions: we need to use static elements for the trigger button */\n/** biome-ignore-all lint/a11y/useKeyWithClickEvents: we need to use key with click events for the trigger button */\nimport { useContext } from 'react'\n\nimport { ROLES, WEBCHAT } from '../../constants'\nimport { resolveImage } from '../../util/environment'\nimport { WebchatContext } from '../../webchat/context'\nimport {\n  StyledTriggerButton,\n  TriggerImage,\n  UnreadMessagesCounter,\n} from './styles'\n\nexport const TriggerButton = (): JSX.Element => {\n  const { webchatState, getThemeProperty, toggleWebchat } =\n    useContext(WebchatContext)\n\n  const getTriggerImage = () => {\n    const image = getThemeProperty(\n      WEBCHAT.CUSTOM_PROPERTIES.triggerButtonImage,\n      undefined\n    )\n\n    if (!image) {\n      webchatState.theme.triggerButton.image = WEBCHAT.DEFAULTS.LOGO\n      return null\n    }\n    return image\n  }\n\n  const triggerButtonImage = getTriggerImage()\n\n  const triggerButtonStyle = getThemeProperty(\n    WEBCHAT.CUSTOM_PROPERTIES.triggerButtonStyle\n  )\n\n  const notificationsTriggerButtonEnabled = getThemeProperty(\n    WEBCHAT.CUSTOM_PROPERTIES.notificationsTriggerButtonEnabled\n  )\n\n  const notificationsEnabled = getThemeProperty(\n    WEBCHAT.CUSTOM_PROPERTIES.notificationsEnabled,\n    notificationsTriggerButtonEnabled\n  )\n\n  const CustomTriggerButton = getThemeProperty(\n    WEBCHAT.CUSTOM_PROPERTIES.customTrigger\n  )\n\n  const handleClick = (event: any) => {\n    toggleWebchat(true)\n    event.preventDefault()\n  }\n\n  return (\n    <div onClick={handleClick}>\n      {webchatState.numUnreadMessages !== 0 && notificationsEnabled && (\n        <UnreadMessagesCounter className='trigger-notifications'>\n          {webchatState.numUnreadMessages}\n        </UnreadMessagesCounter>\n      )}\n      {CustomTriggerButton ? (\n        <CustomTriggerButton />\n      ) : (\n        <StyledTriggerButton\n          role={ROLES.TRIGGER_BUTTON}\n          style={triggerButtonStyle}\n        >\n          {triggerButtonImage && (\n            <TriggerImage src={resolveImage(triggerButtonImage)} />\n          )}\n        </StyledTriggerButton>\n      )}\n    </div>\n  )\n}\n"],"names":["useContext","ROLES","WEBCHAT","resolveImage","WebchatContext","StyledTriggerButton","TriggerImage","UnreadMessagesCounter","TriggerButton","webchatState","getThemeProperty","toggleWebchat","getTriggerImage","image","undefined","triggerButtonImage","triggerButtonStyle","notificationsTriggerButtonEnabled","notificationsEnabled","CustomTriggerButton","handleClick","event"],"mappings":";;;;;;;;;;;;;;AAAA,kHAAkH,GAClH,kHAAkH,GAChF;AAEc;AACK;AACC;AAKrC;AAEV,MAAMQ,aAAaA,GAAG;IAC3B,MAAM,EAAEC,YAAY,EAAEC,gBAAgB,EAAEC,aAAa,EAAE,GACrDX,UAAUA,CAACI,cAAcA;IAE3B,MAAMQ,kBAAkB;QACtB,MAAMC,QAAQH,iBACZR,4CAA4C,EAC5CY;QAGF,IAAI,CAACD,OAAO;YACVJ,aAAa,KAAK,CAAC,aAAa,CAAC,KAAK,GAAGP,qBAAqB;YAC9D,OAAO;QACT;QACA,OAAOW;IACT;IAEA,MAAME,qBAAqBH;IAE3B,MAAMI,qBAAqBN,iBACzBR,4CAA4C;IAG9C,MAAMe,oCAAoCP,iBACxCR,2DAA2D;IAG7D,MAAMgB,uBAAuBR,iBAC3BR,8CAA8C,EAC9Ce;IAGF,MAAME,sBAAsBT,iBAC1BR,uCAAuC;IAGzC,MAAMkB,cAAc,CAACC;QACnBV,cAAc;QACdU,MAAM,cAAc;IACtB;IAEA,qBACE,KAAC;QAAI,SAASD;;YACXX,aAAa,iBAAiB,KAAK,KAAKS,sCACvC,IAACX,qBAAqBA;gBAAC,WAAU;0BAC9BE,aAAa,iBAAiB;;YAGlCU,oCACC,IAACA,yCAED,IAACd,mBAAmBA;gBAClB,MAAMJ,oBAAoB;gBAC1B,OAAOe;0BAEND,oCACC,IAACT,YAAYA;oBAAC,KAAKH,YAAYA,CAACY;;;;;AAM5C,EAAC"}

package/lib/esm/webchat/trigger-button/styles.js

@@ -1,13 +1,14 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TriggerImage = exports.UnreadMessagesCounter = exports.StyledTriggerButton = void 0;
-const tslib_1 = require("tslib");
-const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-const constants_1 = require("../../constants");
-exports.StyledTriggerButton = styled_components_1.default.div `
+import styled_components from "styled-components";
+import { COLORS } from "../../constants.js";
+
+
+
+
+
+const StyledTriggerButton = styled_components.div`
   cursor: pointer;
   position: fixed;
-  background: ${constants_1.COLORS.SOLID_WHITE};
+  background: ${COLORS.SOLID_WHITE};
   border-radius: 50%;
   display: flex;
   align-items: center;
@@ -19,7 +20,7 @@ exports.StyledTriggerButton = styled_components_1.default.div `
   right: 10px;
   padding: 8px;
 `;
-exports.UnreadMessagesCounter = styled_components_1.default.div `
+const UnreadMessagesCounter = styled_components.div`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -29,12 +30,15 @@ exports.UnreadMessagesCounter = styled_components_1.default.div `
   bottom: 80px;
   width: 24px;
   height: 24px;
-  background-color: ${constants_1.COLORS.RED_NOTIFICATIONS};
+  background-color: ${COLORS.RED_NOTIFICATIONS};
   color: white;
   z-index: 10;
 `;
-exports.TriggerImage = styled_components_1.default.img `
+const TriggerImage = styled_components.img`
   max-width: 100%;
   max-height: 100%;
 `;
+
+export { StyledTriggerButton, TriggerImage, UnreadMessagesCounter };
+
 //# sourceMappingURL=styles.js.map

package/lib/esm/webchat/trigger-button/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/webchat/trigger-button/styles.ts"],"names":[],"mappings":";;;;AAAA,kFAAsC;AAEtC,+CAAwC;AAE3B,QAAA,mBAAmB,GAAG,2BAAM,CAAC,GAAG,CAAA;;;gBAG7B,kBAAM,CAAC,WAAW;;;;;;;;;;;CAWjC,CAAA;AAEY,QAAA,qBAAqB,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;;;;;;;sBAUzB,kBAAM,CAAC,iBAAiB;;;CAG7C,CAAA;AAEY,QAAA,YAAY,GAAG,2BAAM,CAAC,GAAG,CAAA;;;CAGrC,CAAA"}
+{"version":3,"file":"webchat/trigger-button/styles.js","sources":["../../../../src/webchat/trigger-button/styles.ts"],"sourcesContent":["import styled from 'styled-components'\n\nimport { COLORS } from '../../constants'\n\nexport const StyledTriggerButton = styled.div`\n  cursor: pointer;\n  position: fixed;\n  background: ${COLORS.SOLID_WHITE};\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  width: 65px;\n  height: 65px;\n  bottom: 20px;\n  right: 10px;\n  padding: 8px;\n`\n\nexport const UnreadMessagesCounter = styled.div`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  position: fixed;\n  right: 20px;\n  bottom: 80px;\n  width: 24px;\n  height: 24px;\n  background-color: ${COLORS.RED_NOTIFICATIONS};\n  color: white;\n  z-index: 10;\n`\n\nexport const TriggerImage = styled.img`\n  max-width: 100%;\n  max-height: 100%;\n`\n"],"names":["styled","COLORS","StyledTriggerButton","UnreadMessagesCounter","TriggerImage"],"mappings":";;;;;AAAsC;AAEE;AAEjC,MAAME,mBAAmBA,GAAGF,qBAAU,CAAC;;;cAGhC,EAAEC,kBAAkB,CAAC;;;;;;;;;;;AAWnC,CAAC;AAEM,MAAME,qBAAqBA,GAAGH,qBAAU,CAAC;;;;;;;;;;oBAU5B,EAAEC,wBAAwB,CAAC;;;AAG/C,CAAC;AAEM,MAAMG,YAAYA,GAAGJ,qBAAU,CAAC;;;AAGvC,CAAC"}

package/lib/esm/webchat/typing-indicator/index.js

@@ -1,10 +1,32 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const constants_1 = require("../../constants");
-const styles_1 = require("./styles");
-const TypingIndicator = (0, react_1.forwardRef)((_props, ref) => ((0, jsx_runtime_1.jsx)(styles_1.TypingContainer, { ref: ref, children: (0, jsx_runtime_1.jsxs)(styles_1.TypingMsgWrapper, { role: constants_1.ROLES.TYPING_INDICATOR, className: 'typing-indicator', backgroundColor: constants_1.COLORS.SEASHELL_WHITE, children: [(0, jsx_runtime_1.jsx)(styles_1.Dot, {}), (0, jsx_runtime_1.jsx)(styles_1.Dot, {}), (0, jsx_runtime_1.jsx)(styles_1.Dot, {})] }) })));
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { COLORS, ROLES } from "../../constants.js";
+import { Dot, TypingContainer, TypingMsgWrapper } from "./styles.js";
+
+
+
+
+
+
+
+
+
+const TypingIndicator = /*#__PURE__*/ forwardRef((_props, ref)=>/*#__PURE__*/ jsx(TypingContainer, {
+        ref: ref,
+        children: /*#__PURE__*/ jsxs(TypingMsgWrapper, {
+            role: ROLES.TYPING_INDICATOR,
+            className: "typing-indicator",
+            backgroundColor: COLORS.SEASHELL_WHITE,
+            children: [
+                /*#__PURE__*/ jsx(Dot, {}),
+                /*#__PURE__*/ jsx(Dot, {}),
+                /*#__PURE__*/ jsx(Dot, {})
+            ]
+        })
+    }));
 TypingIndicator.displayName = 'TypingIndicator';
-exports.default = TypingIndicator;
+/* export default */ const typing_indicator = (TypingIndicator);
+
+export default typing_indicator;
+
 //# sourceMappingURL=index.js.map

package/lib/esm/webchat/typing-indicator/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/webchat/typing-indicator/index.tsx"],"names":[],"mappings":";;;AAAA,iCAAqD;AAErD,+CAA+C;AAC/C,qCAAiE;AAEjE,MAAM,eAAe,GAAG,IAAA,kBAAU,EAChC,CAAC,MAAM,EAAE,GAAiC,EAAE,EAAE,CAAC,CAC7C,uBAAC,wBAAe,IAAC,GAAG,EAAE,GAAG,YACvB,wBAAC,yBAAgB,IACf,IAAI,EAAE,iBAAK,CAAC,gBAAgB,EAC5B,SAAS,EAAC,kBAAkB,EAC5B,eAAe,EAAE,kBAAM,CAAC,cAAc,aAEtC,uBAAC,YAAG,KAAG,EACP,uBAAC,YAAG,KAAG,EACP,uBAAC,YAAG,KAAG,IACU,GACH,CACnB,CACF,CAAA;AAED,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAA;AAE/C,kBAAe,eAAe,CAAA"}
+{"version":3,"file":"webchat/typing-indicator/index.js","sources":["../../../../src/webchat/typing-indicator/index.tsx"],"sourcesContent":["import { type ForwardedRef, forwardRef } from 'react'\n\nimport { COLORS, ROLES } from '../../constants'\nimport { Dot, TypingContainer, TypingMsgWrapper } from './styles'\n\nconst TypingIndicator = forwardRef<HTMLDivElement, any>(\n  (_props, ref: ForwardedRef<HTMLDivElement>) => (\n    <TypingContainer ref={ref}>\n      <TypingMsgWrapper\n        role={ROLES.TYPING_INDICATOR}\n        className='typing-indicator'\n        backgroundColor={COLORS.SEASHELL_WHITE}\n      >\n        <Dot />\n        <Dot />\n        <Dot />\n      </TypingMsgWrapper>\n    </TypingContainer>\n  )\n)\n\nTypingIndicator.displayName = 'TypingIndicator'\n\nexport default TypingIndicator\n"],"names":["forwardRef","COLORS","ROLES","Dot","TypingContainer","TypingMsgWrapper","TypingIndicator","_props","ref"],"mappings":";;;;;;;;;;AAAqD;AAEN;AACkB;AAEjE,MAAMM,eAAeA,iBAAGN,UAAUA,CAChC,CAACO,QAAQC,oBACP,IAACJ,eAAeA;QAAC,KAAKI;kBACpB,mBAACH,gBAAgBA;YACf,MAAMH,sBAAsB;YAC5B,WAAU;YACV,iBAAiBD,qBAAqB;;8BAEtC,IAACE,GAAGA;8BACJ,IAACA,GAAGA;8BACJ,IAACA,GAAGA;;;;AAMZG,eAAeA,CAAC,WAAW,GAAG;AAE9B,+CAAeA,eAAeA,EAAA"}

package/lib/esm/webchat/typing-indicator/styles.js

@@ -1,22 +1,21 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Dot = exports.TypingMsgWrapper = exports.TypingContainer = void 0;
-const tslib_1 = require("tslib");
-const styled_components_1 = tslib_1.__importStar(require("styled-components"));
-const blink = (0, styled_components_1.keyframes) `
+import styled_components, { keyframes } from "styled-components";
+
+
+
+const blink = keyframes`
   50% {
     opacity: 1;
   }
 `;
-const bulge = (0, styled_components_1.keyframes) `
+const bulge = keyframes`
   50% {
     transform: scale(1.05);
   }
 `;
-exports.TypingContainer = styled_components_1.default.div `
+const TypingContainer = styled_components.div`
   padding: 0px 8px 8px 8px;
 `;
-exports.TypingMsgWrapper = styled_components_1.default.div `
+const TypingMsgWrapper = styled_components.div`
   will-change: transform;
   width: 44px;
   line-height: 0px;
@@ -27,9 +26,9 @@ exports.TypingMsgWrapper = styled_components_1.default.div `
   margin: 8px;
   position: relative;
   animation: 2s ${bulge} infinite ease-out;
-  background-color: ${props => props.backgroundColor};
+  background-color: ${(props)=>props.backgroundColor};
 `;
-exports.Dot = styled_components_1.default.span `
+const Dot = styled_components.span`
   height: 6px;
   width: 6px;
   margin: 0 1px;
@@ -47,4 +46,7 @@ exports.Dot = styled_components_1.default.span `
     animation: 1s ${blink} infinite 1s;
   }
 `;
+
+export { Dot, TypingContainer, TypingMsgWrapper };
+
 //# sourceMappingURL=styles.js.map

package/lib/esm/webchat/typing-indicator/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/webchat/typing-indicator/styles.ts"],"names":[],"mappings":";;;;AAAA,+EAAqD;AAErD,MAAM,KAAK,GAAG,IAAA,6BAAS,EAAA;;;;CAItB,CAAA;AAED,MAAM,KAAK,GAAG,IAAA,6BAAS,EAAA;;;;CAItB,CAAA;AAEY,QAAA,eAAe,GAAG,2BAAM,CAAC,GAAG,CAAA;;CAExC,CAAA;AAMY,QAAA,gBAAgB,GAAG,2BAAM,CAAC,GAAG,CAAuB;;;;;;;;;;kBAU/C,KAAK;sBACD,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,eAAe;CACnD,CAAA;AAEY,QAAA,GAAG,GAAG,2BAAM,CAAC,IAAI,CAAA;;;;;;;;;oBASV,KAAK;;;oBAGL,KAAK;;;oBAGL,KAAK;;CAExB,CAAA"}
+{"version":3,"file":"webchat/typing-indicator/styles.js","sources":["../../../../src/webchat/typing-indicator/styles.ts"],"sourcesContent":["import styled, { keyframes } from 'styled-components'\n\nconst blink = keyframes`\n  50% {\n    opacity: 1;\n  }\n`\n\nconst bulge = keyframes`\n  50% {\n    transform: scale(1.05);\n  }\n`\n\nexport const TypingContainer = styled.div`\n  padding: 0px 8px 8px 8px;\n`\n\ninterface TypingMsgWrapperProps {\n  backgroundColor: string\n}\n\nexport const TypingMsgWrapper = styled.div<TypingMsgWrapperProps>`\n  will-change: transform;\n  width: 44px;\n  line-height: 0px;\n  border-radius: 20px;\n  padding: 8px 2px;\n  text-align: center;\n  display: block;\n  margin: 8px;\n  position: relative;\n  animation: 2s ${bulge} infinite ease-out;\n  background-color: ${props => props.backgroundColor};\n`\n\nexport const Dot = styled.span`\n  height: 6px;\n  width: 6px;\n  margin: 0 1px;\n  background-color: #9e9ea1;\n  display: inline-block;\n  border-radius: 50%;\n  opacity: 0.4;\n  &:nth-of-type(1) {\n    animation: 1s ${blink} infinite 0.3333s;\n  }\n  &:nth-of-type(2) {\n    animation: 1s ${blink} infinite 0.6666s;\n  }\n  &:nth-of-type(3) {\n    animation: 1s ${blink} infinite 1s;\n  }\n`\n"],"names":["styled","keyframes","blink","bulge","TypingContainer","TypingMsgWrapper","props","Dot"],"mappings":";;;AAAqD;AAErD,MAAME,KAAKA,GAAGD,SAAS,CAAC;;;;AAIxB,CAAC;AAED,MAAME,KAAKA,GAAGF,SAAS,CAAC;;;;AAIxB,CAAC;AAEM,MAAMG,eAAeA,GAAGJ,qBAAU,CAAC;;AAE1C,CAAC;AAMM,MAAMK,gBAAgBA,GAAGL,qBAAiC,CAAC;;;;;;;;;;gBAUlD,EAAEG,KAAKA,CAAC;oBACJ,EAAEG,CAAAA,QAASA,MAAM,eAAe,CAAC;AACrD,CAAC;AAEM,MAAMC,GAAGA,GAAGP,sBAAW,CAAC;;;;;;;;;kBASb,EAAEE,KAAKA,CAAC;;;kBAGR,EAAEA,KAAKA,CAAC;;;kBAGR,EAAEA,KAAKA,CAAC;;AAE1B,CAAC"}