@botonic/react 0.22.0-alpha.0 → 0.22.0-alpha.2

package/lib/cjs/webchat/components/emoji-picker.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OpenedEmojiPicker = exports.EmojiPicker = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const emoji_picker_react_1 = tslib_1.__importDefault(require("emoji-picker-react"));
+const react_1 = tslib_1.__importStar(require("react"));
+const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+const emojiButton_svg_1 = tslib_1.__importDefault(require("../../assets/emojiButton.svg"));
+const constants_1 = require("../../constants");
+const contexts_1 = require("../../contexts");
+const conditional_animation_1 = require("../components/conditional-animation");
+const hooks_1 = require("../hooks");
+const common_1 = require("./common");
+const EmojiPicker = ({ enableEmojiPicker, onClick }) => {
+    const { getThemeProperty } = (0, react_1.useContext)(contexts_1.WebchatContext);
+    const CustomEmojiPicker = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.customEmojiPicker, undefined);
+    const isEmojiPickerEnabled = () => {
+        var _a;
+        const hasCustomEmojiPicker = !!CustomEmojiPicker;
+        return ((_a = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.enableEmojiPicker, enableEmojiPicker)) !== null && _a !== void 0 ? _a : hasCustomEmojiPicker);
+    };
+    const emojiPickerEnabled = isEmojiPickerEnabled();
+    const handleClick = event => {
+        onClick();
+        event.stopPropagation();
+    };
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: emojiPickerEnabled ? ((0, jsx_runtime_1.jsx)(conditional_animation_1.ConditionalAnimation, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ role: constants_1.ROLES.EMOJI_PICKER_ICON, onClick: handleClick }, { children: CustomEmojiPicker ? ((0, jsx_runtime_1.jsx)(CustomEmojiPicker, {})) : ((0, jsx_runtime_1.jsx)(common_1.Icon, { src: emojiButton_svg_1.default })) })) })) : null }));
+};
+exports.EmojiPicker = EmojiPicker;
+const Container = styled_components_1.default.div `
+  display: flex;
+  justify-content: flex-end;
+  position: absolute;
+  right: 3px;
+  top: -324px;
+`;
+const OpenedEmojiPicker = props => {
+    const { ref, isComponentVisible } = (0, hooks_1.useComponentVisible)(true, props.onClick);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref }, { children: isComponentVisible && ((0, jsx_runtime_1.jsx)(Container, Object.assign({ role: constants_1.ROLES.EMOJI_PICKER }, { children: (0, jsx_runtime_1.jsx)(emoji_picker_react_1.default, { width: '100%', height: '19rem', previewConfig: { showPreview: false }, onEmojiClick: props.onEmojiClick, disableAutoFocus: true }) }))) })));
+};
+exports.OpenedEmojiPicker = OpenedEmojiPicker;
+//# sourceMappingURL=emoji-picker.js.map

package/lib/cjs/webchat/components/emoji-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"emoji-picker.js","sourceRoot":"src/","sources":["webchat/components/emoji-picker.jsx"],"names":[],"mappings":";;;;;AAAA,oFAAuC;AACvC,uDAAyC;AACzC,kFAAsC;AAEtC,2FAAoD;AACpD,+CAAgD;AAChD,6CAA+C;AAC/C,+EAA0E;AAC1E,oCAA8C;AAC9C,qCAA+B;AAExB,MAAM,WAAW,GAAG,CAAC,EAAE,iBAAiB,EAAE,OAAO,EAAE,EAAE,EAAE;IAC5D,MAAM,EAAE,gBAAgB,EAAE,GAAG,IAAA,kBAAU,EAAC,yBAAc,CAAC,CAAA;IAEvD,MAAM,iBAAiB,GAAG,gBAAgB,CACxC,mBAAO,CAAC,iBAAiB,CAAC,iBAAiB,EAC3C,SAAS,CACV,CAAA;IAED,MAAM,oBAAoB,GAAG,GAAG,EAAE;;QAChC,MAAM,oBAAoB,GAAG,CAAC,CAAC,iBAAiB,CAAA;QAChD,OAAO,CACL,MAAA,gBAAgB,CACd,mBAAO,CAAC,iBAAiB,CAAC,iBAAiB,EAC3C,iBAAiB,CAClB,mCAAI,oBAAoB,CAC1B,CAAA;IACH,CAAC,CAAA;IACD,MAAM,kBAAkB,GAAG,oBAAoB,EAAE,CAAA;IAEjD,MAAM,WAAW,GAAG,KAAK,CAAC,EAAE;QAC1B,OAAO,EAAE,CAAA;QACT,KAAK,CAAC,eAAe,EAAE,CAAA;IACzB,CAAC,CAAA;IAED,OAAO,CACL,2DACG,kBAAkB,CAAC,CAAC,CAAC,CACpB,uBAAC,4CAAoB,cACnB,8CAAK,IAAI,EAAE,iBAAK,CAAC,iBAAiB,EAAE,OAAO,EAAE,WAAW,gBACrD,iBAAiB,CAAC,CAAC,CAAC,CACnB,uBAAC,iBAAiB,KAAG,CACtB,CAAC,CAAC,CAAC,CACF,uBAAC,aAAI,IAAC,GAAG,EAAE,yBAAS,GAAI,CACzB,IACG,GACe,CACxB,CAAC,CAAC,CAAC,IAAI,GACP,CACJ,CAAA;AACH,CAAC,CAAA;AAvCY,QAAA,WAAW,eAuCvB;AAED,MAAM,SAAS,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;;;CAM3B,CAAA;AAEM,MAAM,iBAAiB,GAAG,KAAK,CAAC,EAAE;IACvC,MAAM,EAAE,GAAG,EAAE,kBAAkB,EAAE,GAAG,IAAA,2BAAmB,EAAC,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,CAAA;IAC5E,OAAO,CACL,8CAAK,GAAG,EAAE,GAAG,gBACV,kBAAkB,IAAI,CACrB,uBAAC,SAAS,kBAAC,IAAI,EAAE,iBAAK,CAAC,YAAY,gBACjC,uBAAC,4BAAM,IACL,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,OAAO,EACd,aAAa,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,EACrC,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,gBAAgB,EAAE,IAAI,GACtB,IACQ,CACb,IACG,CACP,CAAA;AACH,CAAC,CAAA;AAjBY,QAAA,iBAAiB,qBAiB7B"}

package/lib/cjs/webchat/components/persistent-menu.d.ts

@@ -0,0 +1,10 @@
+export function OpenedPersistentMenu({ onClick, options, borderRadius }: {
+    onClick: any;
+    options: any;
+    borderRadius: any;
+}): JSX.Element;
+export function PersistentMenu({ onClick, persistentMenu }: {
+    onClick: any;
+    persistentMenu: any;
+}): JSX.Element;
+export default OpenedPersistentMenu;

package/lib/cjs/webchat/components/persistent-menu.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PersistentMenu = exports.OpenedPersistentMenu = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importStar(require("react"));
+const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+const menuButton_svg_1 = tslib_1.__importDefault(require("../../assets/menuButton.svg"));
+const button_1 = require("../../components/button");
+const constants_1 = require("../../constants");
+const contexts_1 = require("../../contexts");
+const conditional_animation_1 = require("../components/conditional-animation");
+const hooks_1 = require("../hooks");
+const common_1 = require("./common");
+const ButtonsContainer = styled_components_1.default.div `
+  position: absolute;
+  z-index: 2;
+  width: 100%;
+  bottom: 0;
+  text-align: center;
+`;
+const OpenedPersistentMenu = ({ onClick, options, borderRadius }) => {
+    const { ref, isComponentVisible } = (0, hooks_1.useComponentVisible)(true, onClick);
+    const { getThemeProperty } = (0, react_1.useContext)(contexts_1.WebchatContext);
+    const CustomPersistentMenu = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.customPersistentMenu, undefined);
+    let closeLabel = 'Cancel';
+    try {
+        closeLabel = options.filter(opt => opt.closeLabel !== undefined)[0]
+            .closeLabel;
+    }
+    catch (e) { }
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref, role: constants_1.ROLES.PERSISTENT_MENU }, { children: isComponentVisible && CustomPersistentMenu ? ((0, jsx_runtime_1.jsx)(CustomPersistentMenu, { onClick: onClick, options: options })) : ((0, jsx_runtime_1.jsxs)(ButtonsContainer, { children: [Object.values(options).map((e, i) => {
+                    return (e.label && ((0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ onClick: onClick, url: e.url, target: e.target, webview: e.webview, payload: e.payload }, { children: e.label }), i)));
+                }), (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ onClick: onClick, bottomRadius: borderRadius }, { children: closeLabel }))] })) })));
+};
+exports.OpenedPersistentMenu = OpenedPersistentMenu;
+const PersistentMenu = ({ onClick, persistentMenu }) => {
+    const { getThemeProperty } = (0, react_1.useContext)(contexts_1.WebchatContext);
+    const persistentMenuOptions = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.persistentMenu, persistentMenu);
+    const CustomMenuButton = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.customMenuButton, undefined);
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: persistentMenuOptions ? ((0, jsx_runtime_1.jsx)(conditional_animation_1.ConditionalAnimation, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ role: constants_1.ROLES.PERSISTENT_MENU_ICON, onClick: onClick }, { children: CustomMenuButton ? (0, jsx_runtime_1.jsx)(CustomMenuButton, {}) : (0, jsx_runtime_1.jsx)(common_1.Icon, { src: menuButton_svg_1.default }) })) })) : null }));
+};
+exports.PersistentMenu = PersistentMenu;
+exports.default = exports.OpenedPersistentMenu;
+//# sourceMappingURL=persistent-menu.js.map

package/lib/cjs/webchat/components/persistent-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"persistent-menu.js","sourceRoot":"src/","sources":["webchat/components/persistent-menu.jsx"],"names":[],"mappings":"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"}

package/lib/cjs/webchat/components/send-button.d.ts

@@ -0,0 +1,3 @@
+export function SendButton({ onClick }: {
+    onClick: any;
+}): JSX.Element;

package/lib/cjs/webchat/components/send-button.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SendButton = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importStar(require("react"));
+const send_button_svg_1 = tslib_1.__importDefault(require("../../assets/send-button.svg"));
+const constants_1 = require("../../constants");
+const contexts_1 = require("../../contexts");
+const conditional_animation_1 = require("../components/conditional-animation");
+const common_1 = require("./common");
+const SendButton = ({ onClick }) => {
+    const { getThemeProperty } = (0, react_1.useContext)(contexts_1.WebchatContext);
+    const sendButtonEnabled = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.enableSendButton, true);
+    const CustomSendButton = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.customSendButton, undefined);
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: sendButtonEnabled || CustomSendButton ? ((0, jsx_runtime_1.jsx)(conditional_animation_1.ConditionalAnimation, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ onClick: onClick, role: constants_1.ROLES.SEND_BUTTON_ICON }, { children: CustomSendButton ? ((0, jsx_runtime_1.jsx)(CustomSendButton, {})) : ((0, jsx_runtime_1.jsx)(common_1.Icon, { src: send_button_svg_1.default })) })) })) : null }));
+};
+exports.SendButton = SendButton;
+//# sourceMappingURL=send-button.js.map

package/lib/cjs/webchat/components/send-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"send-button.js","sourceRoot":"src/","sources":["webchat/components/send-button.jsx"],"names":[],"mappings":";;;;;AAAA,uDAAyC;AAEzC,2FAAyD;AACzD,+CAAgD;AAChD,6CAA+C;AAC/C,+EAA0E;AAC1E,qCAA+B;AAExB,MAAM,UAAU,GAAG,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;IACxC,MAAM,EAAE,gBAAgB,EAAE,GAAG,IAAA,kBAAU,EAAC,yBAAc,CAAC,CAAA;IAEvD,MAAM,iBAAiB,GAAG,gBAAgB,CACxC,mBAAO,CAAC,iBAAiB,CAAC,gBAAgB,EAC1C,IAAI,CACL,CAAA;IAED,MAAM,gBAAgB,GAAG,gBAAgB,CACvC,mBAAO,CAAC,iBAAiB,CAAC,gBAAgB,EAC1C,SAAS,CACV,CAAA;IAED,OAAO,CACL,2DACG,iBAAiB,IAAI,gBAAgB,CAAC,CAAC,CAAC,CACvC,uBAAC,4CAAoB,cACnB,8CAAK,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,iBAAK,CAAC,gBAAgB,gBAChD,gBAAgB,CAAC,CAAC,CAAC,CAClB,uBAAC,gBAAgB,KAAG,CACrB,CAAC,CAAC,CAAC,CACF,uBAAC,aAAI,IAAC,GAAG,EAAE,yBAAc,GAAI,CAC9B,IACG,GACe,CACxB,CAAC,CAAC,CAAC,IAAI,GACP,CACJ,CAAA;AACH,CAAC,CAAA;AA5BY,QAAA,UAAU,cA4BtB"}

package/lib/cjs/webchat/components/styled-scrollbar.d.ts

@@ -0,0 +1 @@
+export const StyledScrollbar: any;

package/lib/cjs/webchat/components/styled-scrollbar.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledScrollbar = void 0;
+const tslib_1 = require("tslib");
+require("simplebar/dist/simplebar.css");
+require("./styled-scrollbar.scss");
+const simplebar_react_1 = tslib_1.__importDefault(require("simplebar-react"));
+const styled_components_1 = tslib_1.__importStar(require("styled-components"));
+const constants_1 = require("../../constants");
+exports.StyledScrollbar = (0, styled_components_1.default)(simplebar_react_1.default) `
+  ${props => props.ismessagescontainer &&
+    (0, styled_components_1.css) `
+      display: flex;
+      flex-direction: column;
+      overflow-y: auto;
+      overflow-x: hidden;
+    `}
+  & .simplebar-scrollbar::before {
+    background-color: ${({ scrollbar }) => scrollbar && scrollbar.thumb && scrollbar.thumb.color
+    ? scrollbar.thumb.color
+    : `${constants_1.COLORS.GRAY}`};
+    background-image: ${({ scrollbar }) => scrollbar && scrollbar.thumb && scrollbar.thumb.bgcolor
+    ? scrollbar.thumb.bgcolor
+    : `${constants_1.COLORS.GRAY}`};
+    border-radius: ${({ scrollbar }) => scrollbar && scrollbar.thumb && scrollbar.thumb.border
+    ? scrollbar.thumb.border
+    : '20px'};
+  }
+  & .simplebar-track .simplebar-scrollbar.simplebar-visible::before {
+    opacity: ${({ scrollbar }) => scrollbar && !scrollbar.enable
+    ? '0'
+    : scrollbar && scrollbar.thumb && scrollbar.thumb.opacity
+        ? scrollbar.thumb.opacity
+        : '0.75'};
+  }
+  & .simplebar-track {
+    background-color: ${({ scrollbar }) => scrollbar &&
+    scrollbar.track &&
+    scrollbar.track.color &&
+    !(scrollbar && !scrollbar.enable)
+    ? scrollbar.track.color
+    : constants_1.COLORS.TRANSPARENT};
+    background-image: ${({ scrollbar }) => scrollbar &&
+    scrollbar.track &&
+    scrollbar.track.bgcolor &&
+    !(scrollbar && !scrollbar.enable)
+    ? scrollbar.track.bgcolor
+    : constants_1.COLORS.TRANSPARENT};
+    border-radius: ${({ scrollbar }) => scrollbar && scrollbar.track && scrollbar.track.border
+    ? scrollbar.track.border
+    : '20px'};
+  }
+`;
+//# sourceMappingURL=styled-scrollbar.js.map

package/lib/cjs/webchat/components/styled-scrollbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled-scrollbar.js","sourceRoot":"src/","sources":["webchat/components/styled-scrollbar.jsx"],"names":[],"mappings":";;;;AAAA,wCAAqC;AACrC,mCAAgC;AAEhC,8EAAuC;AACvC,+EAA+C;AAE/C,+CAAwC;AAE3B,QAAA,eAAe,GAAG,IAAA,2BAAM,EAAC,yBAAS,CAAC,CAAA;IAC5C,KAAK,CAAC,EAAE,CACR,KAAK,CAAC,mBAAmB;IACzB,IAAA,uBAAG,EAAA;;;;;KAKF;;wBAEmB,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CACpC,SAAS,IAAI,SAAS,CAAC,KAAK,IAAI,SAAS,CAAC,KAAK,CAAC,KAAK;IACnD,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,KAAK;IACvB,CAAC,CAAC,GAAG,kBAAM,CAAC,IAAI,EAAE;wBACF,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CACpC,SAAS,IAAI,SAAS,CAAC,KAAK,IAAI,SAAS,CAAC,KAAK,CAAC,OAAO;IACrD,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO;IACzB,CAAC,CAAC,GAAG,kBAAM,CAAC,IAAI,EAAE;qBACL,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CACjC,SAAS,IAAI,SAAS,CAAC,KAAK,IAAI,SAAS,CAAC,KAAK,CAAC,MAAM;IACpD,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM;IACxB,CAAC,CAAC,MAAM;;;eAGD,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAC3B,SAAS,IAAI,CAAC,SAAS,CAAC,MAAM;IAC5B,CAAC,CAAC,GAAG;IACL,CAAC,CAAC,SAAS,IAAI,SAAS,CAAC,KAAK,IAAI,SAAS,CAAC,KAAK,CAAC,OAAO;QACzD,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO;QACzB,CAAC,CAAC,MAAM;;;wBAGQ,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CACpC,SAAS;IACT,SAAS,CAAC,KAAK;IACf,SAAS,CAAC,KAAK,CAAC,KAAK;IACrB,CAAC,CAAC,SAAS,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC;IAC/B,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,KAAK;IACvB,CAAC,CAAC,kBAAM,CAAC,WAAW;wBACJ,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CACpC,SAAS;IACT,SAAS,CAAC,KAAK;IACf,SAAS,CAAC,KAAK,CAAC,OAAO;IACvB,CAAC,CAAC,SAAS,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC;IAC/B,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO;IACzB,CAAC,CAAC,kBAAM,CAAC,WAAW;qBACP,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CACjC,SAAS,IAAI,SAAS,CAAC,KAAK,IAAI,SAAS,CAAC,KAAK,CAAC,MAAM;IACpD,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM;IACxB,CAAC,CAAC,MAAM;;CAEf,CAAA"}

package/lib/cjs/webchat/components/typing-indicator.d.ts

@@ -0,0 +1 @@
+export function TypingIndicator(props: any): JSX.Element;

package/lib/cjs/webchat/components/typing-indicator.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TypingIndicator = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("./typing-indicator.scss");
+const react_1 = tslib_1.__importDefault(require("react"));
+const constants_1 = require("../../constants");
+const TypingIndicator = props => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ role: constants_1.ROLES.TYPING_INDICATOR, className: 'typing-indicator', style: { backgroundColor: constants_1.COLORS.SEASHELL_WHITE } }, { children: [(0, jsx_runtime_1.jsx)("span", {}), (0, jsx_runtime_1.jsx)("span", {}), (0, jsx_runtime_1.jsx)("span", {})] })));
+exports.TypingIndicator = TypingIndicator;
+//# sourceMappingURL=typing-indicator.js.map

package/lib/cjs/webchat/components/typing-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"typing-indicator.js","sourceRoot":"src/","sources":["webchat/components/typing-indicator.jsx"],"names":[],"mappings":";;;;;AAAA,mCAAgC;AAEhC,0DAAyB;AAEzB,+CAA+C;AAExC,MAAM,eAAe,GAAG,KAAK,CAAC,EAAE,CAAC,CACtC,+CACE,IAAI,EAAE,iBAAK,CAAC,gBAAgB,EAC5B,SAAS,EAAC,kBAAkB,EAC5B,KAAK,EAAE,EAAE,eAAe,EAAE,kBAAM,CAAC,cAAc,EAAE,iBAEjD,kCAAQ,EACR,kCAAQ,EACR,kCAAQ,KACJ,CACP,CAAA;AAVY,QAAA,eAAe,mBAU3B"}

package/lib/cjs/webchat/devices/device-adapter.d.ts

@@ -0,0 +1,12 @@
+export class DeviceAdapter {
+    currentDevice: any;
+    init(host: any): void;
+    webchatResizer: WebchatResizer | undefined;
+    scrollbarController: ScrollbarController | undefined;
+    getCurrentDevice(): any;
+    onFocus(host: any): void;
+    onBlur(): void;
+    fontSize(defaultFontSize?: number): number | "initial";
+}
+import { WebchatResizer } from './webchat-resizer';
+import { ScrollbarController } from './scrollbar-controller';

package/lib/cjs/webchat/devices/device-adapter.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DeviceAdapter = void 0;
+const dom_1 = require("../../util/dom");
+const _1 = require(".");
+const scrollbar_controller_1 = require("./scrollbar-controller");
+const webchat_resizer_1 = require("./webchat-resizer");
+class DeviceAdapter {
+    constructor() {
+        this.currentDevice = this.getCurrentDevice();
+    }
+    init(host) {
+        this.webchatResizer = new webchat_resizer_1.WebchatResizer(this.currentDevice, host);
+        this.scrollbarController = new scrollbar_controller_1.ScrollbarController(this.currentDevice, host);
+        this.scrollbarController.handleScrollEvents();
+    }
+    getCurrentDevice() {
+        // navigator.platform deprecated. Ref: (https://erikmartinjordan.com/navigator-platform-deprecated-alternative)
+        if (navigator.userAgentData)
+            return navigator.userAgentData.platform;
+        return navigator.platform;
+    }
+    onFocus(host) {
+        if (this.currentDevice !== _1.DEVICES.MOBILE.IPHONE) {
+            (0, dom_1.scrollToBottom)({ host, timeout: 800 });
+            return;
+        }
+        setTimeout(() => {
+            // Place onFocus logic to be run the last on the queue of asynchronous events to give enough time to init method to be called. Ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop#zero_delays
+            this.webchatResizer.onFocus(() => this.scrollbarController.handleOnTouchMoveEvents());
+        }, 0);
+    }
+    onBlur() {
+        if (this.currentDevice !== _1.DEVICES.MOBILE.IPHONE)
+            return;
+        this.webchatResizer.onBlur();
+        this.scrollbarController.handleOnTouchMoveEvents();
+    }
+    fontSize(defaultFontSize = 14) {
+        if (this.currentDevice !== _1.DEVICES.MOBILE.IPHONE)
+            return defaultFontSize;
+        // Disabling auto-zoom on input (iPhone devices): https://stackoverflow.com/a/25614477, https://stackoverflow.com/a/6394497
+        return 'initial';
+    }
+}
+exports.DeviceAdapter = DeviceAdapter;
+//# sourceMappingURL=device-adapter.js.map

package/lib/cjs/webchat/devices/device-adapter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"device-adapter.js","sourceRoot":"src/","sources":["webchat/devices/device-adapter.js"],"names":[],"mappings":";;;AAAA,wCAA+C;AAC/C,wBAA2B;AAC3B,iEAA4D;AAC5D,uDAAkD;AAElD,MAAa,aAAa;IACxB;QACE,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAA;IAC9C,CAAC;IAED,IAAI,CAAC,IAAI;QACP,IAAI,CAAC,cAAc,GAAG,IAAI,gCAAc,CAAC,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,CAAA;QAClE,IAAI,CAAC,mBAAmB,GAAG,IAAI,0CAAmB,CAAC,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,CAAA;QAC5E,IAAI,CAAC,mBAAmB,CAAC,kBAAkB,EAAE,CAAA;IAC/C,CAAC;IAED,gBAAgB;QACd,+GAA+G;QAC/G,IAAI,SAAS,CAAC,aAAa;YAAE,OAAO,SAAS,CAAC,aAAa,CAAC,QAAQ,CAAA;QACpE,OAAO,SAAS,CAAC,QAAQ,CAAA;IAC3B,CAAC;IAED,OAAO,CAAC,IAAI;QACV,IAAI,IAAI,CAAC,aAAa,KAAK,UAAO,CAAC,MAAM,CAAC,MAAM,EAAE;YAChD,IAAA,oBAAc,EAAC,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,CAAA;YACtC,OAAM;SACP;QACD,UAAU,CAAC,GAAG,EAAE;YACd,iNAAiN;YACjN,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,GAAG,EAAE,CAC/B,IAAI,CAAC,mBAAmB,CAAC,uBAAuB,EAAE,CACnD,CAAA;QACH,CAAC,EAAE,CAAC,CAAC,CAAA;IACP,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,aAAa,KAAK,UAAO,CAAC,MAAM,CAAC,MAAM;YAAE,OAAM;QACxD,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE,CAAA;QAC5B,IAAI,CAAC,mBAAmB,CAAC,uBAAuB,EAAE,CAAA;IACpD,CAAC;IAED,QAAQ,CAAC,eAAe,GAAG,EAAE;QAC3B,IAAI,IAAI,CAAC,aAAa,KAAK,UAAO,CAAC,MAAM,CAAC,MAAM;YAAE,OAAO,eAAe,CAAA;QACxE,2HAA2H;QAC3H,OAAO,SAAS,CAAA;IAClB,CAAC;CACF;AAzCD,sCAyCC"}

package/lib/cjs/webchat/devices/index.d.ts

@@ -0,0 +1,11 @@
+export const DEVICES: Readonly<{
+    MOBILE: {
+        IPHONE: string;
+        ANDROID: string;
+        WEBOS: string;
+        BLACKBERRY: string;
+        WINDOWS_PHONE: string;
+    };
+}>;
+export function isDevice(deviceName: any): boolean;
+export function isMobileDevice(): boolean;

package/lib/cjs/webchat/devices/index.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isMobileDevice = exports.isDevice = exports.DEVICES = void 0;
+exports.DEVICES = Object.freeze({
+    MOBILE: {
+        IPHONE: 'iPhone',
+        ANDROID: 'Android',
+        WEBOS: 'webOS',
+        BLACKBERRY: 'BlackBerry',
+        WINDOWS_PHONE: 'Windows Phone',
+    },
+});
+const isDevice = deviceName => {
+    // https://stackoverflow.com/questions/19877924/what-is-the-list-of-possible-values-for-navigator-platform-as-of-today
+    return (!!navigator.platform &&
+        navigator.platform.toLowerCase().includes(deviceName.toLowerCase()));
+};
+exports.isDevice = isDevice;
+const isMobileDevice = () => {
+    return Object.values(exports.DEVICES.MOBILE).some(deviceName => (0, exports.isDevice)(deviceName));
+};
+exports.isMobileDevice = isMobileDevice;
+//# sourceMappingURL=index.js.map

package/lib/cjs/webchat/devices/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"src/","sources":["webchat/devices/index.js"],"names":[],"mappings":";;;AAAa,QAAA,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC;IACnC,MAAM,EAAE;QACN,MAAM,EAAE,QAAQ;QAChB,OAAO,EAAE,SAAS;QAClB,KAAK,EAAE,OAAO;QACd,UAAU,EAAE,YAAY;QACxB,aAAa,EAAE,eAAe;KAC/B;CACF,CAAC,CAAA;AAEK,MAAM,QAAQ,GAAG,UAAU,CAAC,EAAE;IACnC,sHAAsH;IACtH,OAAO,CACL,CAAC,CAAC,SAAS,CAAC,QAAQ;QACpB,SAAS,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC,CACpE,CAAA;AACH,CAAC,CAAA;AANY,QAAA,QAAQ,YAMpB;AAEM,MAAM,cAAc,GAAG,GAAG,EAAE;IACjC,OAAO,MAAM,CAAC,MAAM,CAAC,eAAO,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,CAAC,IAAA,gBAAQ,EAAC,UAAU,CAAC,CAAC,CAAA;AAC/E,CAAC,CAAA;AAFY,QAAA,cAAc,kBAE1B"}

package/lib/cjs/webchat/devices/scrollbar-controller.d.ts

@@ -0,0 +1,12 @@
+export class ScrollbarController {
+    constructor(currentDevice: any, host: any);
+    currentDevice: any;
+    webchat: any;
+    handleScrollEvents(): void;
+    hasScrollbar(): boolean;
+    handleOnMouseOverEvents(e: any): void;
+    toggleOnMouseWheelEvents(): void;
+    handleOnTouchMoveEvents(e: any): void;
+    toggleOnTouchMoveEvents(): void;
+    limitScrollBoundaries(): void;
+}

package/lib/cjs/webchat/devices/scrollbar-controller.js

@@ -0,0 +1,103 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScrollbarController = void 0;
+const dom_1 = require("../../util/dom");
+const _1 = require(".");
+const debounced = (delay, fn) => {
+    let timerId;
+    return function (...args) {
+        if (timerId) {
+            clearTimeout(timerId);
+        }
+        timerId = setTimeout(() => {
+            fn(...args);
+            timerId = null;
+        }, delay);
+    };
+};
+const stopAtScrollLimit = element => {
+    if (element.scrollTop === 0)
+        element.scrollTop = 1;
+    if (element.scrollHeight - element.scrollTop === element.clientHeight)
+        element.scrollTop -= 1;
+};
+class ScrollbarController {
+    constructor(currentDevice, host) {
+        this.currentDevice = currentDevice;
+        this.webchat = (0, dom_1.getWebchatElement)(host);
+    }
+    handleScrollEvents() {
+        /*
+          It handles scroll events for Mobile/Desktop.
+          "ontouchmove" is the phone equivalent for "onmouseover"
+        */
+        if ((0, _1.isMobileDevice)()) {
+            if (this.currentDevice !== _1.DEVICES.MOBILE.IPHONE)
+                return;
+            this.limitScrollBoundaries();
+            this.webchat.ontouchstart = e => {
+                this.handleOnTouchMoveEvents(e);
+            };
+            this.webchat.ontouchmove = e => {
+                this.handleOnTouchMoveEvents(e);
+            };
+        }
+        else {
+            this.webchat.onmouseover = e => this.handleOnMouseOverEvents(e);
+        }
+    }
+    hasScrollbar() {
+        const scrollableArea = (0, dom_1.getScrollableArea)(this.webchat);
+        const isScrollable = scrollableArea.visible.clientHeight - scrollableArea.full.clientHeight < 0;
+        return isScrollable;
+    }
+    handleOnMouseOverEvents(e) {
+        let target = e.currentTarget;
+        while (target) {
+            this.toggleOnMouseWheelEvents();
+            target = target.parentNode;
+        }
+    }
+    toggleOnMouseWheelEvents() {
+        const scrollableContent = (0, dom_1.getScrollableContent)(this.webchat);
+        if (this.hasScrollbar()) {
+            scrollableContent.onmousewheel = {};
+            return;
+        }
+        scrollableContent.onmousewheel = e => e.preventDefault();
+    }
+    handleOnTouchMoveEvents(e) {
+        this.toggleOnTouchMoveEvents();
+    }
+    toggleOnTouchMoveEvents() {
+        if (this.hasScrollbar()) {
+            this.webchat.ontouchmove = {};
+            this.webchat.ontouchstart = {};
+            return;
+        }
+        this.webchat.ontouchmove = e => {
+            if (e.target === e.currentTarget)
+                e.preventDefault();
+        };
+    }
+    limitScrollBoundaries() {
+        if (this.currentDevice !== _1.DEVICES.MOBILE.IPHONE)
+            return;
+        /*
+          It adds a bounce effect when top or bottom limits of the scrollbar are reached for iOS,
+          as an alternative of overscroll-behavior (https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior)
+        */
+        const frame = (0, dom_1.getScrollableArea)(this.webchat).visible;
+        const dStopAtScrollLimit = debounced(100, stopAtScrollLimit);
+        if (frame) {
+            if (window.addEventListener) {
+                frame.addEventListener('scroll', () => dStopAtScrollLimit(frame), true);
+            }
+            else if (window.attachEvent) {
+                frame.attachEvent('scroll', () => dStopAtScrollLimit(frame));
+            }
+        }
+    }
+}
+exports.ScrollbarController = ScrollbarController;
+//# sourceMappingURL=scrollbar-controller.js.map

package/lib/cjs/webchat/devices/scrollbar-controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrollbar-controller.js","sourceRoot":"src/","sources":["webchat/devices/scrollbar-controller.js"],"names":[],"mappings":"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"}

package/lib/cjs/webchat/devices/webchat-resizer.d.ts

@@ -0,0 +1,9 @@
+export class WebchatResizer {
+    constructor(currentDevice: any, host: any);
+    currentDevice: any;
+    host: any;
+    webchat: any;
+    onFocus(onKeyboardShownFn: any): void;
+    onBlur(): void;
+    setWebchatElementHeight(newHeight: any): void;
+}

package/lib/cjs/webchat/devices/webchat-resizer.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WebchatResizer = void 0;
+const dom_1 = require("../../util/dom");
+const _1 = require(".");
+class WebchatResizer {
+    constructor(currentDevice, host) {
+        this.currentDevice = currentDevice;
+        this.host = host;
+        this.webchat = (0, dom_1.getWebchatElement)(host);
+    }
+    onFocus(onKeyboardShownFn) {
+        if (this.currentDevice !== _1.DEVICES.MOBILE.IPHONE)
+            return;
+        /*
+          Based on Tip #4 from https://blog.opendigerati.com/the-eccentric-ways-of-ios-safari-with-the-keyboard-b5aa3f34228d,
+          taking window.innerHeight as the amount of pixels the virtual keyboard adds
+        */
+        const waitUntilKeyboardIsShown = 400;
+        const calculateNewWebchatElementHeight = () => {
+            const webchatHeight = this.webchat.clientHeight;
+            // Some iOS versions keep track of this height with VisualViewport API: https://stackoverflow.com/a/59056851
+            const keyboardOffset = (window.visualViewport && window.visualViewport.height) ||
+                window.innerHeight;
+            let newWebchatPercentualHeight = keyboardOffset / webchatHeight;
+            const toTwoDecimal = toRound => Math.round(toRound * 100) / 100;
+            newWebchatPercentualHeight =
+                toTwoDecimal(newWebchatPercentualHeight) * 100;
+            return newWebchatPercentualHeight;
+        };
+        setTimeout(() => {
+            this.setWebchatElementHeight(`${calculateNewWebchatElementHeight()}%`);
+            (0, dom_1.scrollToBottom)(this.host);
+            onKeyboardShownFn();
+        }, waitUntilKeyboardIsShown);
+    }
+    onBlur() {
+        if (this.currentDevice !== _1.DEVICES.MOBILE.IPHONE)
+            return;
+        this.setWebchatElementHeight('100%');
+    }
+    setWebchatElementHeight(newHeight) {
+        this.webchat.style.height = newHeight;
+    }
+}
+exports.WebchatResizer = WebchatResizer;
+//# sourceMappingURL=webchat-resizer.js.map

package/lib/cjs/webchat/devices/webchat-resizer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"webchat-resizer.js","sourceRoot":"src/","sources":["webchat/devices/webchat-resizer.js"],"names":[],"mappings":";;;AAAA,wCAAkE;AAClE,wBAA2B;AAE3B,MAAa,cAAc;IACzB,YAAY,aAAa,EAAE,IAAI;QAC7B,IAAI,CAAC,aAAa,GAAG,aAAa,CAAA;QAClC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA;QAChB,IAAI,CAAC,OAAO,GAAG,IAAA,uBAAiB,EAAC,IAAI,CAAC,CAAA;IACxC,CAAC;IAED,OAAO,CAAC,iBAAiB;QACvB,IAAI,IAAI,CAAC,aAAa,KAAK,UAAO,CAAC,MAAM,CAAC,MAAM;YAAE,OAAM;QACxD;;;UAGE;QACF,MAAM,wBAAwB,GAAG,GAAG,CAAA;QACpC,MAAM,gCAAgC,GAAG,GAAG,EAAE;YAC5C,MAAM,aAAa,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY,CAAA;YAC/C,4GAA4G;YAC5G,MAAM,cAAc,GAClB,CAAC,MAAM,CAAC,cAAc,IAAI,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC;gBACvD,MAAM,CAAC,WAAW,CAAA;YACpB,IAAI,0BAA0B,GAAG,cAAc,GAAG,aAAa,CAAA;YAC/D,MAAM,YAAY,GAAG,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC,GAAG,GAAG,CAAA;YAC/D,0BAA0B;gBACxB,YAAY,CAAC,0BAA0B,CAAC,GAAG,GAAG,CAAA;YAChD,OAAO,0BAA0B,CAAA;QACnC,CAAC,CAAA;QACD,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,CAAC,uBAAuB,CAAC,GAAG,gCAAgC,EAAE,GAAG,CAAC,CAAA;YACtE,IAAA,oBAAc,EAAC,IAAI,CAAC,IAAI,CAAC,CAAA;YACzB,iBAAiB,EAAE,CAAA;QACrB,CAAC,EAAE,wBAAwB,CAAC,CAAA;IAC9B,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,aAAa,KAAK,UAAO,CAAC,MAAM,CAAC,MAAM;YAAE,OAAM;QACxD,IAAI,CAAC,uBAAuB,CAAC,MAAM,CAAC,CAAA;IACtC,CAAC;IAED,uBAAuB,CAAC,SAAS;QAC/B,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,SAAS,CAAA;IACvC,CAAC;CACF;AAzCD,wCAyCC"}

package/lib/cjs/webchat/header.d.ts

@@ -0,0 +1,3 @@
+export function DefaultHeader(props: any): JSX.Element;
+export function WebchatHeader(props: any): JSX.Element;
+export const StyledWebchatHeader: any;

package/lib/cjs/webchat/header.js

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledWebchatHeader = exports.WebchatHeader = exports.DefaultHeader = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const framer_motion_1 = require("framer-motion");
+const react_1 = tslib_1.__importStar(require("react"));
+const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+const constants_1 = require("../constants");
+const contexts_1 = require("../contexts");
+const environment_1 = require("../util/environment");
+const react_2 = require("../util/react");
+const Header = styled_components_1.default.div `
+  display: flex;
+  background: linear-gradient(
+    90deg,
+    ${constants_1.COLORS.BLEACHED_CEDAR_PURPLE} 0%,
+    ${props => props.color} 100%
+  );
+  height: 55px;
+  border-radius: ${constants_1.WEBCHAT.DEFAULTS.BORDER_RADIUS_TOP_CORNERS};
+  z-index: 2;
+`;
+const ImageContainer = styled_components_1.default.div `
+  padding: 10px;
+  align-items: center;
+`;
+const Image = styled_components_1.default.img `
+  width: 32px;
+  border-radius: 50%;
+`;
+const TextContainer = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex: 1 1 auto;
+`;
+const Title = styled_components_1.default.div `
+  display: flex;
+  font-family: inherit;
+  font-size: 15px;
+  font-weight: bold;
+  color: ${constants_1.COLORS.SOLID_WHITE};
+`;
+const Subtitle = styled_components_1.default.div `
+  display: flex;
+  font-family: inherit;
+  font-size: 11px;
+  color: ${constants_1.COLORS.SOLID_WHITE};
+`;
+const CloseHeader = styled_components_1.default.div `
+  padding: 0px 16px;
+  cursor: pointer;
+  color: ${constants_1.COLORS.SOLID_WHITE};
+  font-family: inherit;
+  font-size: 36px;
+`;
+const DefaultHeader = props => {
+    const { getThemeProperty } = props;
+    const animationsEnabled = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.enableAnimations, true);
+    const headerImage = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.headerImage, getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.brandImage, constants_1.WEBCHAT.DEFAULTS.LOGO));
+    const headerTitle = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.headerTitle, constants_1.WEBCHAT.DEFAULTS.TITLE);
+    const headerSubtitle = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.headerSubtitle, '');
+    return ((0, jsx_runtime_1.jsxs)(Header, Object.assign({ role: constants_1.ROLES.HEADER, color: props.color, style: Object.assign({}, getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.headerStyle)) }, { children: [headerImage && ((0, jsx_runtime_1.jsx)(ImageContainer, { children: (0, jsx_runtime_1.jsx)(Image, { src: (0, environment_1.resolveImage)(headerImage) }) })), (0, jsx_runtime_1.jsxs)(TextContainer, Object.assign({ ml: headerImage ? '0px' : '16px' }, { children: [(0, jsx_runtime_1.jsx)(Title, Object.assign({ mb: headerSubtitle ? '6px' : '0px' }, { children: headerTitle })), (0, jsx_runtime_1.jsx)(Subtitle, { children: headerSubtitle })] })), (0, jsx_runtime_1.jsx)(react_2.ConditionalWrapper, Object.assign({ condition: animationsEnabled, wrapper: children => ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, Object.assign({ whileHover: { scale: 1.2 } }, { children: children }))) }, { children: (0, jsx_runtime_1.jsx)(CloseHeader, Object.assign({ onClick: props.onCloseClick }, { children: "\u2A2F" })) }))] })));
+};
+exports.DefaultHeader = DefaultHeader;
+const WebchatHeader = props => {
+    const { webchatState, getThemeProperty } = (0, react_1.useContext)(contexts_1.WebchatContext);
+    const handleCloseWebchat = event => {
+        props.onCloseClick(event.target.value);
+    };
+    const CustomHeader = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.customHeader);
+    if (CustomHeader) {
+        return (0, jsx_runtime_1.jsx)(CustomHeader, { onCloseClick: handleCloseWebchat });
+    }
+    return ((0, jsx_runtime_1.jsx)(exports.DefaultHeader, { webchatState: webchatState, getThemeProperty: getThemeProperty, color: getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.brandColor, constants_1.COLORS.BOTONIC_BLUE), onCloseClick: handleCloseWebchat }));
+};
+exports.WebchatHeader = WebchatHeader;
+exports.StyledWebchatHeader = (0, styled_components_1.default)(exports.WebchatHeader) `
+  border-radius: 8px 8px 0px 0px;
+  box-shadow: ${constants_1.COLORS.PIGEON_POST_BLUE_ALPHA_0_5} 0px 2px 5px;
+  height: 36px;
+  flex: none;
+`;
+//# sourceMappingURL=header.js.map

package/lib/cjs/webchat/header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.js","sourceRoot":"src/","sources":["webchat/header.jsx"],"names":[],"mappings":"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"}