@zohoim/chat-components 0.0.1-cx

package/es/ReplyBubbleContent/ReplyBubbleContent.js

@@ -0,0 +1,61 @@
+/** ** Libraries *** */
+import React from 'react';
+/** ** Hooks *** */
+
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+/** ** Constants *** */
+
+import replyBubbleContentDefaultProps from './props/defaultProps';
+import replyBubbleContentPropTypes from './props/propTypes';
+/** ** Methods *** */
+
+import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
+import cssJSLogic from './css/cssJSLogic';
+/** ** Styles *** */
+
+import style from './css/ReplyBubbleContent.module.css';
+/** ** Components *** */
+
+import { Container, Box } from '@zohodesk/components/es/Layout';
+export default function ReplyBubbleContent(props) {
+  const {
+    customStyle,
+    senderName,
+    renderIcon,
+    renderMessage,
+    isFailed,
+    onClick
+  } = props;
+  /* External CSS Customization */
+
+  const newStyle = useMergeStyle(style, customStyle);
+  /* css classnames added based on logic */
+
+  const {
+    replyBubbleContentClass
+  } = cssJSLogic({
+    isFailed
+  }, newStyle);
+  const icon = renderHandler(renderIcon)();
+  const messageContent = renderHandler(renderMessage)();
+  return /*#__PURE__*/React.createElement(Container, {
+    align: "vertical",
+    alignBox: "row",
+    className: replyBubbleContentClass,
+    isCover: false,
+    onClick: onClick
+  }, icon ? /*#__PURE__*/React.createElement(Box, {
+    className: newStyle.iconWrapper
+  }, /*#__PURE__*/React.createElement(Container, {
+    align: "both"
+  }, icon)) : null, /*#__PURE__*/React.createElement(Box, {
+    flexible: true
+  }, /*#__PURE__*/React.createElement(Box, {
+    className: newStyle.name
+  }, senderName), messageContent ? /*#__PURE__*/React.createElement(Box, {
+    className: newStyle.messageWrapper
+  }, messageContent) : null));
+}
+ReplyBubbleContent.propTypes = replyBubbleContentPropTypes;
+ReplyBubbleContent.defaultProps = replyBubbleContentDefaultProps;
+ReplyBubbleContent.displayName = 'ReplyBubbleContent';

package/es/ReplyBubbleContent/css/ReplyBubbleContent.module.css

@@ -0,0 +1,75 @@
+.replyBubbleContent {
+  position: relative;
+  background-color: var(--imlib_chat_components_replyBubbleContent_bg_color);
+  border: 1px solid var(--imlib_chat_components_replyBubbleContent_border_color);
+  border-radius: 3px;
+  margin: var(--zd_size5) 0 ;
+  cursor: pointer;
+}[dir=ltr] .replyBubbleContent {
+  padding: var(--zd_size10) var(--zd_size10) var(--zd_size10) var(--zd_size20) ;
+}[dir=rtl] .replyBubbleContent {
+  padding: var(--zd_size10) var(--zd_size20) var(--zd_size10) var(--zd_size10) ;
+}
+
+.failedReplyBubbleContent{
+  background-color: var(--imlib_chat_components_replyBubbleContent_bg_color_failed);
+  border-color: var(--imlib_chat_components_replyBubbleContent_border_color_failed);
+}
+
+.replyBubbleContent::after {
+  content: '';
+  width: var(--zd_size2) ;
+  display: block;
+  position: absolute;
+  top: var(--zd_size10) ;
+  bottom: var(--zd_size10) ;
+  background-color: var(--imlib_chat_components_replyBubbleContent_line_color);
+  border-radius: 30px;
+}
+
+[dir=ltr] .replyBubbleContent::after {
+  left: var(--zd_size10) ;
+}
+
+[dir=rtl] .replyBubbleContent::after {
+  right: var(--zd_size10) ;
+}
+
+.failedReplyBubbleContent::after{
+  background-color: var(--imlib_chat_components_replyBubbleContent_line_color_failed);
+}
+
+.name {
+  color: var(--imlib_chat_components_replyBubbleContent_sender_color);
+  font-size: var(--zd_font_size15) ;
+  line-height: 1.5;
+  composes: dotted from "../../css/common.module.css";
+  font-family: var(--zd_semibold);
+}
+
+.failedReplyBubbleContent .name{
+  color: var(--imlib_chat_components_replyBubbleContent_sender_color_failed);
+}
+
+[dir=ltr] .iconWrapper {
+  margin-right: var(--zd_size10) ;
+}
+
+[dir=rtl] .iconWrapper {
+  margin-left: var(--zd_size10) ;
+}
+
+.messageWrapper {
+  color: var(--imlib_chat_components_replyBubbleContent_content_color);
+  font-size: var(--zd_font_size13) ;
+  line-height: 1.5;
+  -webkit-line-clamp: 2;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  word-break: break-word;
+  overflow: hidden;
+}
+
+.failedReplyBubbleContent .messageWrapper{ 
+  color: var(--imlib_chat_components_replyBubbleContent_content_color_failed);
+}

package/es/ReplyBubbleContent/css/cssJSLogic.js

@@ -0,0 +1,13 @@
+import { compileClassNames } from '@zohodesk/utils';
+export default function cssJSLogic(props, style) {
+  const {
+    isFailed
+  } = props;
+  const replyBubbleContentClass = compileClassNames({
+    [style.replyBubbleContent]: true,
+    [style.failedReplyBubbleContent]: isFailed
+  });
+  return {
+    replyBubbleContentClass
+  };
+}

package/es/ReplyBubbleContent/index.js

@@ -0,0 +1 @@
+export { default as ReplyBubbleContent } from './ReplyBubbleContent';

package/es/ReplyBubbleContent/props/defaultProps.js

@@ -0,0 +1,6 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+const replyBubbleContentDefaultProps = {
+  customStyle: dummyObject
+};
+export default replyBubbleContentDefaultProps;

package/es/ReplyBubbleContent/props/propTypes.js

@@ -0,0 +1,11 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const replyBubbleContentPropTypes = {
+  renderIcon: PropTypes.func.isRequired,
+  renderMessage: PropTypes.func.isRequired,
+  senderName: PropTypes.string.isRequired,
+  customStyle: PropTypes.object,
+  isFailed: PropTypes.bool,
+  onClick: PropTypes.func
+};
+export default replyBubbleContentPropTypes;

package/es/ReplyBubbleHeader/ReplyBubbleHeader.js

@@ -0,0 +1,74 @@
+/** ** Libraries *** */
+import React, { useMemo, useCallback } from 'react';
+/** ** Hooks *** */
+
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+/** ** Constants *** */
+
+import replyBubbleHeaderDefaultProps from './props/defaultProps';
+import replyBubbleHeaderPropTypes from './props/propTypes';
+/** ** Styles *** */
+
+import style from './css/ReplyBubbleHeader.module.css';
+/** ** Components *** */
+
+import { Container, Box } from '@zohodesk/components/es/Layout';
+/** ** Icons *** */
+
+import ReplyIcon from '@zohodesk/icon/es/general/Reply';
+/** ** Methods *** */
+
+import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
+import cssJSLogic from './css/cssJSLogic';
+export default function ReplyBubbleHeader(props) {
+  const {
+    customStyle,
+    replyText,
+    dateTimeDetails,
+    renderCustomReplyIcon,
+    isFailed
+  } = props;
+  const {
+    displayDateTime,
+    tooltip
+  } = dateTimeDetails;
+  /* External CSS Customization */
+
+  const newStyle = useMergeStyle(style, customStyle);
+  const iconStyle = useMemo(() => ({
+    base: newStyle.replyIcon
+  }), [newStyle.replyIcon]);
+  /* css classnames added based on logic */
+
+  const {
+    replyBubbleHeaderClass
+  } = cssJSLogic({
+    isFailed
+  }, newStyle);
+  const renderIcon = useCallback(() => {
+    const customIcon = renderHandler(renderCustomReplyIcon)();
+    return customIcon || /*#__PURE__*/React.createElement(ReplyIcon, {
+      customStyle: iconStyle
+    });
+  }, [iconStyle, renderCustomReplyIcon]);
+  return /*#__PURE__*/React.createElement(Container, {
+    align: "vertical",
+    alignBox: "row",
+    className: replyBubbleHeaderClass
+  }, renderIcon(), /*#__PURE__*/React.createElement(Box, {
+    flexible: true
+  }, /*#__PURE__*/React.createElement(Container, {
+    align: "between",
+    alignBox: "row"
+  }, /*#__PURE__*/React.createElement(Box, {
+    className: newStyle.replyText,
+    flexible: true
+  }, replyText), /*#__PURE__*/React.createElement(Box, {
+    className: newStyle.time,
+    "data-title": tooltip,
+    flexible: true
+  }, displayDateTime))));
+}
+ReplyBubbleHeader.propTypes = replyBubbleHeaderPropTypes;
+ReplyBubbleHeader.defaultProps = replyBubbleHeaderDefaultProps;
+ReplyBubbleHeader.displayName = 'ReplyBubbleHeader';

package/es/ReplyBubbleHeader/css/ReplyBubbleHeader.module.css

@@ -0,0 +1,44 @@
+.replyIcon {
+  display: flex;
+  flex-shrink: 0;
+  width: var(--zd_size20)  !important;
+  height: var(--zd_size20)  !important;
+  cursor: default;
+}[dir=ltr] .replyIcon {
+  margin-right: var(--zd_size5) ;
+}[dir=rtl] .replyIcon {
+  margin-left: var(--zd_size5) ;
+}
+
+.replyText {
+  font-size: var(--zd_font_size14) ;
+  color: var(--imlib_chat_components_replyBubbleHeader_text_color);
+}
+
+[dir=ltr] .replyText {
+  margin-right: var(--zd_size5) ;
+}
+
+[dir=rtl] .replyText {
+  margin-left: var(--zd_size5) ;
+}
+
+.failedReplyBubbleHeader .replyText {
+  color: var(--imlib_chat_components_replyBubbleHeader_text_color_failed);
+}
+
+.replyText,
+.time {
+  composes: dotted from '../../css/common.module.css';
+  max-width: max-content;
+}
+
+.time {
+  font-size: var(--zd_font_size11) ;
+  letter-spacing: 0.4px;
+  color: var(--imlib_chat_components_replyBubbleHeader_time_color);
+}
+
+.failedReplyBubbleHeader .time {
+  color: var(--imlib_chat_components_replyBubbleHeader_time_color_failed);
+}

package/es/ReplyBubbleHeader/css/cssJSLogic.js

@@ -0,0 +1,12 @@
+import { compileClassNames } from '@zohodesk/utils';
+export default function cssJSLogic(props, style) {
+  const {
+    isFailed
+  } = props;
+  const replyBubbleHeaderClass = compileClassNames({
+    [style.failedReplyBubbleHeader]: isFailed
+  });
+  return {
+    replyBubbleHeaderClass
+  };
+}

package/es/ReplyBubbleHeader/index.js

@@ -0,0 +1 @@
+export { default as ReplyBubbleHeader } from './ReplyBubbleHeader';

package/es/ReplyBubbleHeader/props/defaultProps.js

@@ -0,0 +1,7 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+const replyBubbleHeaderDefaultProps = {
+  customStyle: dummyObject,
+  dateTimeDetails: dummyObject
+};
+export default replyBubbleHeaderDefaultProps;

package/es/ReplyBubbleHeader/props/propTypes.js

@@ -0,0 +1,13 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const replyBubbleHeaderPropTypes = {
+  replyText: PropTypes.string.isRequired,
+  customStyle: PropTypes.object,
+  dateTimeDetails: PropTypes.shape({
+    displayDateTime: PropTypes.string,
+    tooltip: PropTypes.string
+  }),
+  renderCustomReplyIcon: PropTypes.func,
+  isFailed: PropTypes.bool
+};
+export default replyBubbleHeaderPropTypes;

package/es/TextBubble/TextBubble.js

@@ -0,0 +1,49 @@
+/** ** Libraries *** */
+import React, { Fragment } from 'react';
+/** ** Hooks *** */
+
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+/** ** Constants *** */
+
+import textBubbleDefaultProps from './props/defaultProps';
+import textBubblePropTypes from './props/propTypes';
+/** ** Styles *** */
+
+import style from './css/TextBubble.module.css';
+/** ** Methods *** */
+
+import cssJSLogic from './css/cssJSLogic';
+export default function TextBubble(props) {
+  const {
+    customStyle,
+    moreText,
+    message,
+    onClickMore,
+    isFailed
+  } = props;
+  /* External CSS Customization */
+
+  const newStyle = useMergeStyle(style, customStyle);
+  /* css classnames added based on logic */
+
+  const {
+    textBubbleClass,
+    moreTextClass
+  } = cssJSLogic({
+    isFailed
+  }, newStyle);
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("span", {
+    className: textBubbleClass // eslint-disable-next-line react/no-danger, @zohodesk/zsecurity/no-unsecure-html
+    ,
+    dangerouslySetInnerHTML: {
+      // __html: HTMLPurifier.sanitize(message)
+      __html: message
+    }
+  }), moreText ? /*#__PURE__*/React.createElement("div", {
+    className: moreTextClass,
+    onClick: onClickMore
+  }, moreText) : null);
+}
+TextBubble.propTypes = textBubblePropTypes;
+TextBubble.defaultProps = textBubbleDefaultProps;
+TextBubble.displayName = 'TextBubble';

package/es/TextBubble/css/TextBubble.module.css

@@ -0,0 +1,35 @@
+.textBubble {
+  /* Use this class name for css customisation */
+  color: var(--imlib_chat_components_textBubble_text_color);
+}
+
+.failedTextBubble {
+  color: var(--imlib_chat_components_textBubble_text_color_failed);
+}
+
+.moreText {
+  color: var(--imlib_chat_components_textBubble_see_more_color);
+  cursor: pointer;
+}
+
+.moreText:hover {
+  text-decoration: underline;
+}
+
+.failedMoreText {
+  color: var(--imlib_chat_components_textBubble_see_more_color_failed);
+}
+
+.textBubble a {
+  color: var(--imlib_chat_components_textBubble_url_color);
+  word-break: break-word;
+}
+
+.textBubble a:hover {
+  text-decoration: underline !important;
+  /* !important for Desk css overwrite */
+}
+
+.failedTextBubble a {
+  color: var(--imlib_chat_components_textBubble_url_color_failed);
+}

package/es/TextBubble/css/cssJSLogic.js

@@ -0,0 +1,18 @@
+import { compileClassNames } from '@zohodesk/utils';
+export default function cssJSLogic(props, style) {
+  const {
+    isFailed
+  } = props;
+  const textBubbleClass = compileClassNames({
+    [style.textBubble]: true,
+    [style.failedTextBubble]: isFailed
+  });
+  const moreTextClass = compileClassNames({
+    [style.moreText]: true,
+    [style.failedMoreText]: isFailed
+  });
+  return {
+    textBubbleClass,
+    moreTextClass
+  };
+}

package/es/TextBubble/index.js

@@ -0,0 +1 @@
+export { default as TextBubble } from './TextBubble';

package/es/TextBubble/props/defaultProps.js

@@ -0,0 +1,6 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+const textBubbleDefaultProps = {
+  customStyle: dummyObject
+};
+export default textBubbleDefaultProps;

package/es/TextBubble/props/propTypes.js

@@ -0,0 +1,10 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const textBubblePropTypes = {
+  message: PropTypes.string.isRequired,
+  customStyle: PropTypes.object,
+  moreText: PropTypes.string,
+  onClickMore: PropTypes.func,
+  isFailed: PropTypes.bool
+};
+export default textBubblePropTypes;

package/es/Theme/ThemeAssets.js

@@ -0,0 +1,78 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+import '@zohodesk/components/lib/common/boxShadow.module.css';
+/* component pkg - default mode, themes */
+
+import '@zohodesk/components/assets/Appearance/light/themes/blue/blue_CTA_LightTheme.module.css';
+import '@zohodesk/components/assets/Appearance/light/themes/blue/blue_CTA_LightModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/light/themes/green/green_CTA_LightTheme.module.css';
+import '@zohodesk/components/assets/Appearance/light/themes/green/green_CTA_LightModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/light/themes/orange/orange_CTA_LightTheme.module.css';
+import '@zohodesk/components/assets/Appearance/light/themes/orange/orange_CTA_LightModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/light/themes/red/red_CTA_LightTheme.module.css';
+import '@zohodesk/components/assets/Appearance/light/themes/red/red_CTA_LightModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/light/themes/yellow/yellow_CTA_LightTheme.module.css';
+import '@zohodesk/components/assets/Appearance/light/themes/yellow/yellow_CTA_LightModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/light/themes/blue/blue_ComponentTheme_LightTheme.module.css';
+import '@zohodesk/components/assets/Appearance/light/themes/green/green_ComponentTheme_LightTheme.module.css';
+import '@zohodesk/components/assets/Appearance/light/themes/orange/orange_ComponentTheme_LightTheme.module.css';
+import '@zohodesk/components/assets/Appearance/light/themes/red/red_ComponentTheme_LightTheme.module.css';
+import '@zohodesk/components/assets/Appearance/light/themes/yellow/yellow_ComponentTheme_LightTheme.module.css';
+import '@zohodesk/components/assets/Appearance/light/mode/Component_LightMode.module.css';
+import '@zohodesk/components/assets/Contrast/lightContrastLightness.module.css';
+/* component pkg - dark mode, themes */
+
+import '@zohodesk/components/assets/Appearance/dark/themes/blue/blue_CTA_DarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/blue/blue_CTA_DarkModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/green/green_CTA_DarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/green/green_CTA_DarkModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/orange/orange_CTA_DarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/orange/orange_CTA_DarkModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/red/red_CTA_DarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/red/red_CTA_DarkModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/yellow/yellow_CTA_DarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/yellow/yellow_CTA_DarkModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/blue/blue_ComponentTheme_DarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/green/green_ComponentTheme_DarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/orange/orange_ComponentTheme_DarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/red/red_ComponentTheme_DarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/yellow/yellow_ComponentTheme_DarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/mode/Component_DarkMode.module.css';
+import '@zohodesk/components/assets/Contrast/darkContrastLightness.module.css';
+/* component pkg - pure dark mode, themes */
+
+import '@zohodesk/components/assets/Appearance/pureDark/themes/blue/blue_CTA_PureDarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/blue/blue_CTA_PureDarkModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/green/green_CTA_PureDarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/green/green_CTA_PureDarkModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/orange/orange_CTA_PureDarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/orange/orange_CTA_PureDarkModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/red/red_CTA_PureDarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/red/red_CTA_PureDarkModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/yellow/yellow_CTA_PureDarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/yellow/yellow_CTA_PureDarkModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/blue/blue_ComponentTheme_PureDarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/green/green_ComponentTheme_PureDarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/orange/orange_ComponentTheme_PureDarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/red/red_ComponentTheme_PureDarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/yellow/yellow_ComponentTheme_PureDarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/mode/Component_PureDarkMode.module.css';
+import '@zohodesk/components/assets/Contrast/pureDarkContrastLightness.module.css';
+/** ** Desk Components Assets *** */
+
+import '@zohodesk/variables/assets/colorVariables.module.css';
+import '@zohodesk/variables/assets/dotVariables.module.css';
+import '@zohodesk/variables/assets/sizeVariables.module.css';
+import '@zohodesk/variables/assets/fontsizeVariables.module.css';
+import '@zohodesk/variables/lib/fontFamilyVariables.module.css';
+import '@zohodesk/variables/assets/transitionVariables.module.css';
+import '@zohodesk/variables/assets/no_transitionVariables.module.css';
+export default function DeskAssets(props) {
+  const {
+    children
+  } = props;
+  return children || null;
+}
+DeskAssets.propTypes = {
+  children: PropTypes.node
+};

package/es/Theme/ThemeWrapper.js

@@ -0,0 +1,88 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/** ** Libraries *** */
+import React, { useMemo, useCallback } from 'react';
+/** ** Constants *** */
+
+import themeWrapperPropTypes from './props/propTypes';
+import themeWrapperDefaultProps from './props/defaultProps';
+import { styleTagId } from './constants';
+import { MSG_ACTION_POPUP_PORTAL } from '../constants';
+/** ** Components *** */
+
+import ThemeAssets from './ThemeAssets';
+import TooltipWrapper from './TooltipWrapper';
+import { Container } from '@zohodesk/components/es/Layout';
+/** ** Methods *** */
+
+import getThemeConfigurations from './utils/getThemeConfigurations';
+import getCustomizedCssVariables from './utils/getCustomizedCssVariables';
+import getWrapperDivProps from './utils/getWrapperDivProps';
+/** ** Fonts *** */
+
+import '../Fonts/puviFont.module.css';
+export default function ThemeWrapper(props) {
+  const {
+    children,
+    needThemeAssets,
+    needTooltip,
+    themeConfigurations: propThemeConfigurations,
+    mode: propMode,
+    theme: propTheme,
+    modeKey,
+    themeKey,
+    tooltipCustomStyle
+  } = props;
+  /** ** containerRef for Tooltip *** */
+
+  const containerRef = React.useRef(null);
+  const getContainerRef = useCallback(() => containerRef.current, []);
+  /** ** ThemeConfigurations Handling  *** */
+
+  const {
+    themeConfigurations,
+    mode,
+    theme
+  } = getThemeConfigurations({
+    mode: propMode,
+    theme: propTheme
+  });
+  const configurations = propThemeConfigurations || themeConfigurations;
+  /** ** Style Handling  *** */
+
+  const selector = `#${styleTagId}`;
+  const prefix = '--imlib_';
+  const configuration = useMemo(() => [configurations], [configurations]);
+  const customizedVariables = useMemo(() => getCustomizedCssVariables(configuration, prefix), [configuration, prefix]);
+  const wrapperDivProps = getWrapperDivProps({
+    modeKey,
+    themeKey,
+    mode,
+    theme
+  });
+  /** ** Children Render Functions   *** */
+
+  const renderPortal = useCallback(() => /*#__PURE__*/React.createElement("div", {
+    "data-portal": MSG_ACTION_POPUP_PORTAL
+  }), []);
+  const renderStyle = useCallback(() => /*#__PURE__*/React.createElement("style", {
+    id: "zoho-im-variables"
+  }, `${selector}{${customizedVariables}}`), [selector, customizedVariables]);
+  const renderAssets = useCallback(() => /*#__PURE__*/React.createElement(React.Fragment, null, needThemeAssets ? /*#__PURE__*/React.createElement(ThemeAssets, null) : null, needTooltip ? /*#__PURE__*/React.createElement(TooltipWrapper, {
+    containerRef: containerRef.current,
+    customStyle: tooltipCustomStyle,
+    getContainerRef: getContainerRef
+  }) : null), [getContainerRef, needTooltip, needThemeAssets, tooltipCustomStyle]);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    id: styleTagId
+  }, wrapperDivProps, {
+    style: {
+      width: '100%',
+      height: '100%'
+    }
+  }), renderStyle(), /*#__PURE__*/React.createElement(Container, {
+    eleRef: containerRef
+  }, children), renderPortal(), renderAssets());
+}
+ThemeWrapper.propTypes = themeWrapperPropTypes;
+ThemeWrapper.defaultProps = themeWrapperDefaultProps;