@zohodesk/dot 1.2.4 → 1.3.0

package/es/v1/form/fields/PhoneField/PhoneField.js

@@ -1,189 +1,161 @@
 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, { PureComponent } from 'react';
+import React, { memo, useState, useRef } from 'react';
 import { defaultProps } from '../../../../form/fields/PhoneField/props/defaultProps';
 import { propTypes } from '../../../../form/fields/PhoneField/props/propTypes';
 /**** Components ****/
 
 import { Icon } from '@zohodesk/icons';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { Container, Box } from '@zohodesk/components/es/v1/Layout';
 import TextBoxField from '../TextBoxField/TextBoxField';
 import Link from '../../../Link/Link';
 /**** CSS ****/
 
 import style from '../../../../form/fields/Fields.module.css';
 import { formatPhoneUrl } from '../../../../utils/General';
-export default class PhoneField extends PureComponent {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isActive: false
-    };
-    this.handleChange = this.handleChange.bind(this);
-    this.handleGetRef = this.handleGetRef.bind(this);
-    this.focusInput = this.focusInput.bind(this);
-    this.onFocus = this.onFocus.bind(this);
-    this.onBlur = this.onBlur.bind(this);
+
+function PhoneField(props) {
+  let {
+    labelName,
+    id,
+    textBoxSize,
+    textBoxVariant,
+    textBoxType,
+    isMandatory,
+    validationMessage,
+    maxLength,
+    isReadOnly,
+    value,
+    errorType,
+    isDisabled,
+    title,
+    onBlur,
+    dataId,
+    dataSelectorId,
+    onKeyDown,
+    placeHolder,
+    infoText,
+    isTelephony,
+    providerName,
+    ticketId,
+    contactId,
+    borderColor,
+    fieldSize,
+    labelPalette,
+    labelCustomClass,
+    i18nKeys,
+    onCall,
+    ePhiData,
+    type,
+    onFocus,
+    onChange,
+    getRef,
+    customProps
+  } = props;
+  const {
+    TextBoxFieldProps = {},
+    LinkProps = {}
+  } = customProps;
+  const [isActive, setActive] = useState(false);
+  const textBoxElem = useRef(null);
+  let {
+    callTitle
+  } = i18nKeys;
+  let callBackparam = {
+    contact_id: contactId ? contactId : '',
+    request_id: ticketId,
+    activity_id: '',
+    entity_module: 'Requests'
+  };
+  let phoneValue = value;
+
+  if (isActive) {
+    phoneValue = value;
+  } else {
+    phoneValue = formatPhoneUrl(value);
   }
 
-  handleChange(id, value) {
-    let {
-      onChange
-    } = this.props;
+  function handleChange(id, value) {
     onChange && onChange(id, value);
   }
 
-  handleGetRef(el) {
-    let {
-      getRef,
-      id
-    } = this.props;
-    this.textBoxElem = el;
+  function handleGetRef(el) {
+    textBoxElem.current = el;
     getRef && getRef(el, id);
   }
 
-  focusInput(e) {
-    this.textBoxElem.focus();
+  function focusInput(e) {
+    textBoxElem.current.focus();
   }
 
-  onFocus() {
-    let {
-      onFocus
-    } = this.props;
-    this.setState({
-      isActive: true
-    });
+  function handleFocus() {
+    setActive(true);
     onFocus && onFocus();
   }
 
-  onBlur() {
-    let {
-      onBlur
-    } = this.props;
-    this.setState({
-      isActive: false
-    });
+  function handleBlur() {
+    setActive(false);
     onBlur && onBlur();
   }
 
-  render() {
-    let {
-      labelName,
-      id,
-      textBoxSize,
-      textBoxVariant,
-      textBoxType,
-      isMandatory,
-      validationMessage,
-      maxLength,
-      isReadOnly,
-      value,
-      errorType,
-      isDisabled,
-      title,
-      onBlur,
-      dataId,
-      dataSelectorId,
-      onKeyDown,
-      placeHolder,
-      infoText,
-      isTelephony,
-      providerName,
-      ticketId,
-      contactId,
-      borderColor,
-      fieldSize,
-      labelPalette,
-      labelCustomClass,
-      i18nKeys,
-      onCall,
-      ePhiData,
-      type,
-      customProps
-    } = this.props;
-    const {
-      TextBoxFieldProps = {},
-      LinkProps = {}
-    } = customProps;
-    let {
-      isActive
-    } = this.state;
-    let {
-      callTitle
-    } = i18nKeys;
-    let callBackparam = {
-      contact_id: contactId ? contactId : '',
-      request_id: ticketId,
-      activity_id: '',
-      entity_module: 'Requests'
-    };
-    let phoneValue = value;
+  return /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    className: `${style.container} ${isDisabled ? style.disabled : ''}`,
+    "data-title": isDisabled ? title : null,
+    dataSelectorId: dataSelectorId
+  }, /*#__PURE__*/React.createElement(Box, {
+    flexible: true
+  }, /*#__PURE__*/React.createElement(TextBoxField, _extends({
+    labelName: labelName,
+    id: id,
+    palette: isMandatory ? 'mandatory' : 'default',
+    onClick: focusInput,
+    infoText: infoText,
+    type: textBoxType,
+    textBoxVariant: textBoxVariant,
+    size: textBoxSize,
+    maxLength: maxLength,
+    isReadOnly: isReadOnly,
+    getRef: handleGetRef,
+    value: phoneValue,
+    onChange: handleChange,
+    dataId: dataId,
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    onKeyDown: onKeyDown,
+    placeHolder: placeHolder,
+    validationMessage: validationMessage,
+    borderColor: borderColor,
+    isDisabled: isDisabled,
+    fieldSize: fieldSize,
+    isMandatory: isMandatory,
+    labelPalette: labelPalette,
+    labelCustomClass: labelCustomClass,
+    errorType: errorType,
+    ePhiData: ePhiData
+  }, TextBoxFieldProps))), /*#__PURE__*/React.createElement(Box, null, isTelephony && value ? /*#__PURE__*/React.createElement(Link, _extends({
+    className: style.phoneIcon,
+    callfrom: "phone",
+    pbxname: providerName,
+    phonenum: value,
+    module: "RequestDetailsView",
+    title: callTitle,
+    callBackParam: JSON.stringify(callBackparam),
+    callto: 'RequestPhoneNumber',
+    href: true,
+    onClick: onCall,
+    type: type
+  }, LinkProps), /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-GN-phone",
+    size: "14"
+  })) : null));
+} // const MomoizedPhoneField = memo(PhoneField);
+// export default MomoizedPhoneField;
+// MomoizedPhoneField.propTypes = propTypes;
+// MomoizedPhoneField.defaultProps = defaultProps;
 
-    if (isActive) {
-      phoneValue = value;
-    } else {
-      phoneValue = formatPhoneUrl(value);
-    }
-
-    return /*#__PURE__*/React.createElement(Container, {
-      alignBox: "row",
-      className: `${style.container} ${isDisabled ? style.disabled : ''}`,
-      "data-title": isDisabled ? title : null,
-      dataSelectorId: dataSelectorId
-    }, /*#__PURE__*/React.createElement(Box, {
-      flexible: true
-    }, /*#__PURE__*/React.createElement(TextBoxField, _extends({
-      labelName: labelName,
-      id: id,
-      palette: isMandatory ? 'mandatory' : 'default',
-      onClick: this.focusInput,
-      infoText: infoText,
-      type: textBoxType,
-      textBoxVariant: textBoxVariant,
-      size: textBoxSize,
-      maxLength: maxLength,
-      isReadOnly: isReadOnly,
-      getRef: this.handleGetRef,
-      value: phoneValue,
-      onChange: this.handleChange,
-      dataId: dataId,
-      onBlur: this.onBlur,
-      onFocus: this.onFocus,
-      onKeyDown: onKeyDown,
-      placeHolder: placeHolder,
-      validationMessage: validationMessage,
-      borderColor: borderColor,
-      isDisabled: isDisabled,
-      fieldSize: fieldSize,
-      isMandatory: isMandatory,
-      labelPalette: labelPalette,
-      labelCustomClass: labelCustomClass,
-      errorType: errorType,
-      ePhiData: ePhiData
-    }, TextBoxFieldProps))), /*#__PURE__*/React.createElement(Box, null, isTelephony && value ? /*#__PURE__*/React.createElement(Link, _extends({
-      className: style.phoneIcon,
-      callfrom: "phone",
-      pbxname: providerName,
-      phonenum: value,
-      module: "RequestDetailsView",
-      title: callTitle,
-      callBackParam: JSON.stringify(callBackparam),
-      callto: 'RequestPhoneNumber',
-      href: true,
-      onClick: onCall,
-      type: type
-    }, LinkProps), /*#__PURE__*/React.createElement(Icon, {
-      name: "ZD-GN-phone",
-      size: "14"
-    })) : null));
-  }
 
-}
 PhoneField.propTypes = propTypes;
-PhoneField.defaultProps = defaultProps; // if (__DOCS__) {
-//   PhoneField.docs = {
-//     componentGroup: 'Form Fields',
-//     folderName: 'General'
-//   };
-// }
+PhoneField.defaultProps = defaultProps;
+export default PhoneField;

package/es/v1/form/fields/RadioField/RadioField.js

@@ -6,8 +6,8 @@ import { defaultProps } from '../../../../form/fields/RadioField/props/defaultPr
 import { propTypes } from '../../../../form/fields/RadioField/props/propTypes';
 /**** Components ****/
 
-import Label from '@zohodesk/components/lib/Label/Label';
-import Radio from '@zohodesk/components/lib/Radio/Radio';
+import Label from '@zohodesk/components/es/v1/Label/Label';
+import Radio from '@zohodesk/components/es/v1/Radio/Radio';
 import ValidationMessage from '../ValidationMessage/ValidationMessage';
 /** Css */
 

package/es/v1/form/fields/SelectField/SelectField.js

@@ -6,10 +6,10 @@ import { defaultProps } from '../../../../form/fields/SelectField/props/defaultP
 import { propTypes } from '../../../../form/fields/SelectField/props/propTypes';
 /**** Components ****/
 
-import Label from '@zohodesk/components/lib/Label/Label';
-import Select from '@zohodesk/components/lib/Select/Select';
+import Label from '@zohodesk/components/es/v1/Label/Label';
+import Select from '@zohodesk/components/es/v1/Select/Select';
 import ValidationMessage from '../ValidationMessage/ValidationMessage';
-import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
+import { getUniqueId } from '@zohodesk/components/es/v1/Provider/IdProvider';
 import FieldContainer from '../FieldContainer/FieldContainer';
 /**** props ****/
 

package/es/v1/form/fields/TagsMultiSelect/TagsMultiSelect.js

@@ -1,18 +1,18 @@
 import React from 'react';
 import { defaultProps } from '../../../../form/fields/TagsMultiSelect/props/defaultProps';
 import { propTypes } from '../../../../form/fields/TagsMultiSelect/props/propTypes';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
-import Tag from '@zohodesk/components/lib/Tag/Tag';
-import TextBoxIcon from '@zohodesk/components/lib/TextBoxIcon/TextBoxIcon';
+import { Container, Box } from '@zohodesk/components/es/v1/Layout';
+import Tag from '@zohodesk/components/es/v1/Tag/Tag';
+import TextBoxIcon from '@zohodesk/components/es/v1/TextBoxIcon/TextBoxIcon';
 import EmptySearch from '@zohodesk/svg/lib/emptystate/version3/EmptySearch';
-import ListItem from '@zohodesk/components/lib/ListItem/ListItem';
+import ListItem from '@zohodesk/components/es/v1/ListItem/ListItem';
 import Loader from '@zohodesk/svg/lib/Loader/Loader';
-import DropDownSeparator from '@zohodesk/components/lib/DropDown/DropDownSeparator';
+import DropDownSeparator from '@zohodesk/components/es/v1/DropDown/DropDownSeparator';
 import CommonEmptyState from '../../../emptystate/CommonEmptyState/CommonEmptyState';
-import ResponsiveDropBox from '@zohodesk/components/lib/ResponsiveDropBox/ResponsiveDropBox';
-import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
+import ResponsiveDropBox from '@zohodesk/components/es/v1/ResponsiveDropBox/ResponsiveDropBox';
+import { ResponsiveReceiver } from '@zohodesk/components/es/v1/Responsive/CustomResponsive';
 import { stopBubbling } from '../../../../utils/General';
-import { scrollTo, findScrollEnd } from '@zohodesk/components/lib/utils/Common.js';
+import { scrollTo, findScrollEnd } from '@zohodesk/components/es/utils/Common.js';
 import style from '../../../../form/fields/TagsMultiSelect/TagsMultiSelect.module.css';
 export default class TagsMultiSelect extends React.Component {
   constructor(props) {

package/es/v1/form/fields/TagsMultiSelectField/TagsMultiSelectField.js

@@ -3,9 +3,9 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React, { useState, useEffect } from 'react';
 import { defaultProps } from '../../../../form/fields/TagsMultiSelectField/props/defaultProps';
 import { propTypes } from '../../../../form/fields/TagsMultiSelectField/props/propTypes';
-import { Box } from '@zohodesk/components/lib/Layout';
-import Label from '@zohodesk/components/lib/Label/Label';
-import Popup from '@zohodesk/components/lib/Popup/Popup';
+import { Box } from '@zohodesk/components/es/v1/Layout';
+import Label from '@zohodesk/components/es/v1/Label/Label';
+import Popup from '@zohodesk/components/es/v1/Popup/Popup';
 import ValidationMessage from '../ValidationMessage/ValidationMessage';
 import TagsMultiSelect from '../TagsMultiSelect/TagsMultiSelect';
 import FieldContainer from '../FieldContainer/FieldContainer';
@@ -249,9 +249,12 @@ const TagsMultiSelectField = props => {
   }, ValidationMessageProps)));
 };
 
-export default Popup(TagsMultiSelectField);
 TagsMultiSelectField.propTypes = propTypes;
-TagsMultiSelectField.defaultProps = defaultProps; // if (__DOCS__) {
+TagsMultiSelectField.defaultProps = defaultProps;
+const TagsMultiSelectField_Component = Popup(TagsMultiSelectField);
+TagsMultiSelectField_Component.defaultProps = TagsMultiSelectField.defaultProps;
+TagsMultiSelectField_Component.propTypes = TagsMultiSelectField.propTypes;
+export default TagsMultiSelectField_Component; // if (__DOCS__) {
 //   TagsMultiSelectField.docs = {
 //     componentGroup: 'TagsMultiSelectField'
 //   };

package/es/v1/form/fields/TextBoxField/TextBoxField.js

@@ -6,10 +6,10 @@ import { defaultProps } from '../../../../form/fields/TextBoxField/props/default
 import { propTypes } from '../../../../form/fields/TextBoxField/props/propTypes';
 /**** Components ****/
 
-import Label from '@zohodesk/components/lib/Label/Label';
-import TextBoxIcon from '@zohodesk/components/lib/TextBoxIcon/TextBoxIcon';
+import Label from '@zohodesk/components/es/v1/Label/Label';
+import TextBoxIcon from '@zohodesk/components/es/v1/TextBoxIcon/TextBoxIcon';
 import ValidationMessage from '../ValidationMessage/ValidationMessage';
-import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
+import { getUniqueId } from '@zohodesk/components/es/v1/Provider/IdProvider';
 import FieldContainer from '../FieldContainer/FieldContainer';
 /**** CSS ****/
 

package/es/v1/form/fields/TextEditor/TextEditor.js

@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 import { defaultProps } from '../../../../form/fields/TextEditor/props/defaultProps';
 import { propTypes } from '../../../../form/fields/TextEditor/props/propTypes';
 import selectn from 'selectn';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { Container, Box } from '@zohodesk/components/es/v1/Layout';
 /***** Methods *****/
 
 import { bind, editorContentValidate, fixEncoding, isFileNameSizeInvalid, isImageFormat, triggerKeyup, getRichEditorContent, changeContent, validateEditorContentOnInsertHtml, loadResource } from '../../../../utils/editorUtils'; //import './ZohoDeskEditor_Init';

package/es/v1/form/fields/TextEditorField/TextEditorField.js

@@ -6,7 +6,7 @@ import { defaultProps } from '../../../../form/fields/TextEditorField/props/defa
 import { propTypes } from '../../../../form/fields/TextEditorField/props/propTypes';
 /**** Components ****/
 
-import Label from '@zohodesk/components/lib/Label/Label';
+import Label from '@zohodesk/components/es/v1/Label/Label';
 import ValidationMessage from '../ValidationMessage/ValidationMessage';
 import TextEditorWrapper from '../TextEditorWrapper/TextEditorWrapper';
 import FieldContainer from '../FieldContainer/FieldContainer';

package/es/v1/form/fields/TextEditorWrapper/TextEditorWrapper.js

@@ -6,10 +6,10 @@ import { propTypes } from '../../../../form/fields/TextEditorWrapper/props/propT
 /**** Components ****/
 
 import TextEditor from '../TextEditor/TextEditor';
-import Textarea from '@zohodesk/components/lib/Textarea/Textarea';
-import VelocityAnimationGroup from '@zohodesk/components/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
+import Textarea from '@zohodesk/components/es/v1/Textarea/Textarea';
+import VelocityAnimationGroup from '@zohodesk/components/es/v1/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
 import { editorContentValidate } from '../../../../utils/editorUtils';
-import style from './TextEditorWrapper.module.css';
+import style from './../../../../form/fields/TextEditorWrapper/TextEditorWrapper.module.css';
 /* eslint-disable react/no-deprecated */
 
 export default class TextEditorWrapper extends Component {

package/es/v1/form/fields/TextareaField/TextareaField.js

@@ -6,10 +6,10 @@ import { defaultProps } from '../../../../form/fields/TextareaField/props/defaul
 import { propTypes } from '../../../../form/fields/TextareaField/props/propTypes';
 /**** Components ****/
 
-import Label from '@zohodesk/components/lib/Label/Label';
-import Textarea from '@zohodesk/components/lib/Textarea/Textarea';
+import Label from '@zohodesk/components/es/v1/Label/Label';
+import Textarea from '@zohodesk/components/es/v1/Textarea/Textarea';
 import ValidationMessage from '../ValidationMessage/ValidationMessage';
-import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
+import { getUniqueId } from '@zohodesk/components/es/v1/Provider/IdProvider';
 import FieldContainer from '../FieldContainer/FieldContainer';
 /**** CSS ****/
 

package/es/v1/form/fields/ValidationMessage/ValidationMessage.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { defaultProps } from '../../../../form/fields/ValidationMessage/props/defaultProps';
 import { propTypes } from '../../../../form/fields/ValidationMessage/props/propTypes';
-import Label from '@zohodesk/components/lib/Label/Label';
-import colors from '@zohodesk/components/lib/Label/LabelColors.module.css';
+import Label from '@zohodesk/components/es/v1/Label/Label';
+import colors from '@zohodesk/components/es/Label/LabelColors.module.css';
 import style from '../../../../form/fields/ValidationMessage/ValidationMessage.module.css';
 import { Icon } from '@zohodesk/icons';
 export default class ValidationMessage extends React.Component {

package/es/v1/layout/SetupDetailLayout/SetupDetailLayout.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { SetupDetailLayout_defaultProps, SetupHeader_defaultProps, SetupContent_defaultProps, SetupFooter_defaultProps } from '../../../layout/SetupDetailLayout/props/defaultProps';
 import { SetupDetailLayout_propTypes, SetupHeader_propTypes, SetupContent_propTypes, SetupFooter_propTypes } from '../../../layout/SetupDetailLayout/props/propTypes';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { Container, Box } from '@zohodesk/components/es/v1/Layout';
 import { Icon } from '@zohodesk/icons';
 import style from '../../../layout/SetupDetailLayout/SetupDetailLayout.module.css';
 export default class SetupDetailLayout extends React.Component {

package/es/v1/layout/SubtabLayout/SubtabLayout.js

@@ -3,8 +3,8 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React from 'react';
 import { SubtabHeader_propTypes, SubtabFooter_propTypes, SubtabContent_propTypes, SubtabLayout_propTypes } from '../../../layout/SubtabLayout/props/propTypes';
 import { SubtabHeader_defaultProps, SubtabFooter_defaultProps, SubtabContent_defaultProps, SubtabLayout_defaultProps } from '../../../layout/SubtabLayout/props/defaultProps';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
-import { Card, CardHeader, CardContent } from '@zohodesk/components/lib/Card';
+import { Container, Box } from '@zohodesk/components/es/v1/Layout';
+import { Card, CardHeader, CardContent } from '@zohodesk/components/es/v1/Card';
 import PlusIcon from '../../PlusIcon/PlusIcon';
 import style from '../../../layout/SubtabLayout/SubtabLayout.module.css';
 export class SubtabHeader extends React.Component {

package/es/v1/list/AvatarFlip/AvatarFlip.js

@@ -1,71 +1,68 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { defaultProps } from '../../../list/AvatarFlip/props/defaultProps';
 import { propTypes } from '../../../list/AvatarFlip/props/propTypes';
 import FlipCard from '../../FlipCard/FlipCard';
 import style from '../../../list/AvatarFlip/AvatarFlip.module.css';
-export default class AvatarFlip extends Component {
-  render() {
-    let {
-      id,
-      action,
-      name,
-      isChecked,
-      onChange,
-      noNeedFlip,
-      size,
-      onClick,
-      isPaidUser,
-      isPortalUser,
-      channel,
-      src,
-      icon,
-      initial,
-      dataId,
-      className,
-      palette,
-      textPalette,
-      customTextClass,
-      frontClass,
-      needTitle,
-      tourId,
-      iconSize,
-      isFilledCheckbox,
-      channelTitle,
-      customProps
-    } = this.props;
-    return /*#__PURE__*/React.createElement(FlipCard, {
-      id: id,
-      action: action,
-      name: name,
-      initial: initial,
-      isChecked: isChecked,
-      onChange: onChange,
-      noNeedFlip: noNeedFlip,
-      size: size,
-      onClick: onClick,
-      isPaidUser: isPaidUser,
-      isPortalUser: isPortalUser,
-      channel: channel,
-      src: src,
-      icon: icon,
-      iconSize: iconSize,
-      iconClass: `${style.iconStyle}`,
-      dataId: dataId,
-      ticListContainer: "tic-list-filp-cont",
-      ticList: "tic-list-filp",
-      className: className,
-      palette: palette,
-      textPalette: textPalette,
-      customTextClass: customTextClass,
-      frontClass: frontClass,
-      needTitle: needTitle,
-      tourId: tourId,
-      isFilledCheckbox: isFilledCheckbox,
-      channelTitle: channelTitle,
-      customProps: customProps
-    });
-  }
-
+export default function AvatarFlip(props) {
+  let {
+    id,
+    action,
+    name,
+    isChecked,
+    onChange,
+    noNeedFlip,
+    size,
+    onClick,
+    isPaidUser,
+    isPortalUser,
+    channel,
+    src,
+    icon,
+    initial,
+    dataId,
+    className,
+    palette,
+    textPalette,
+    customTextClass,
+    frontClass,
+    needTitle,
+    tourId,
+    iconSize,
+    isFilledCheckbox,
+    channelTitle,
+    customProps
+  } = props;
+  return /*#__PURE__*/React.createElement(FlipCard, {
+    id: id,
+    action: action,
+    name: name,
+    initial: initial,
+    isChecked: isChecked,
+    onChange: onChange,
+    noNeedFlip: noNeedFlip,
+    size: size,
+    onClick: onClick,
+    isPaidUser: isPaidUser,
+    isPortalUser: isPortalUser,
+    channel: channel,
+    src: src,
+    icon: icon,
+    iconSize: iconSize,
+    iconClass: `${style.iconStyle}`,
+    dataId: dataId,
+    ticListContainer: "tic-list-filp-cont",
+    ticList: "tic-list-filp",
+    className: className,
+    palette: palette,
+    textPalette: textPalette,
+    customTextClass: customTextClass,
+    frontClass: frontClass,
+    needTitle: needTitle,
+    tourId: tourId,
+    isFilledCheckbox: isFilledCheckbox,
+    channelTitle: channelTitle,
+    customProps: customProps
+  });
 }
 AvatarFlip.propTypes = propTypes;
 AvatarFlip.defaultProps = defaultProps; // if (__DOCS__) {