@zohodesk/dot 1.2.4 → 1.3.0

package/es/v1/errorstate/Inconvenience/Inconvenience.js

@@ -1,86 +1,59 @@
 import React from 'react';
-import { defaultProps } from '../../../errorstate/Inconvenience/props/defaultProps';
-import { propTypes } from '../../../errorstate/Inconvenience/props/propTypes';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
-import LinkText from '../LinkText/LinkText';
-import InconvenienceSVG from '@zohodesk/svg/lib/errorstate/version1/EmptyInconvenience';
-import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
-import commonStyle from '../../../errorstate/EmptyStates.module.css';
-import style from '../../../errorstate/Inconvenience/Inconvenience.module.css';
-export default class Inconvenience extends React.Component {
-  constructor(props) {
-    super(props);
-    this.responsiveFunc = this.responsiveFunc.bind(this);
-  }
-
-  responsiveFunc(_ref) {
-    let {
-      mediaQueryOR
-    } = _ref;
-    return {
-      tablet: mediaQueryOR([{
-        minWidth: 481,
-        maxWidth: 768
-      }]),
-      uptoMobile: mediaQueryOR([{
-        maxWidth: 480
-      }])
-    };
-  }
-
-  render() {
-    let {
-      title,
-      subtitle,
-      description,
-      urlText,
-      url,
-      onClick,
-      dataId,
-      customClass
-    } = this.props;
-    return /*#__PURE__*/React.createElement(ResponsiveReceiver, {
-      query: this.responsiveFunc
-    }, _ref2 => {
-      let {
-        tablet,
-        uptoMobile
-      } = _ref2;
-      return /*#__PURE__*/React.createElement(Container, {
-        className: `${uptoMobile || tablet ? commonStyle.tabletContainer : commonStyle.container} ${customClass}`,
-        dataId: dataId,
-        scroll: "vertical"
-      }, /*#__PURE__*/React.createElement(Box, {
-        className: commonStyle.top
-      }, title ? /*#__PURE__*/React.createElement("div", {
-        className: uptoMobile ? commonStyle.mobileTitle : tablet ? commonStyle.tabletTitle : commonStyle.title
-      }, title) : null, subtitle ? /*#__PURE__*/React.createElement("div", {
-        className: uptoMobile ? commonStyle.mobileSubTitle : tablet ? commonStyle.tabletSubTitle : commonStyle.subtitle
-      }, subtitle) : null), /*#__PURE__*/React.createElement(Box, {
-        className: `${style.imageContainer} ${uptoMobile ? commonStyle.mobileImageContainer : tablet ? commonStyle.tabletImageContainer : commonStyle.imageContainer}`
-      }, /*#__PURE__*/React.createElement(InconvenienceSVG, {
-        isFluid: true,
-        dataId: `${dataId}_svg`
-      })), /*#__PURE__*/React.createElement(Box, {
-        className: `${uptoMobile || tablet ? '' : commonStyle.footerWidth} ${commonStyle.footer}`
-      }, /*#__PURE__*/React.createElement("div", {
-        className: uptoMobile || tablet ? commonStyle.tabletBtmText : commonStyle.btmText
-      }, description), /*#__PURE__*/React.createElement(LinkText, {
-        text: urlText,
-        href: url,
-        onClick: onClick,
-        dataId: `${dataId}_link`,
-        customClass: uptoMobile || tablet ? commonStyle.tabletBtmText : ''
-      })));
+import { defaultProps } from '../../../version2/errorstate/Inconvenience/props/defaultProps';
+import { propTypes } from '../../../version2/errorstate/Inconvenience/props/propTypes';
+import { Container } from '@zohodesk/components/es/v1/Layout';
+import ErrorInconvenience from '@zohodesk/svg/lib/v1/errorstate/version3/ErrorInconvenience';
+import Button from '@zohodesk/components/es/v1/Button/Button';
+import CommonEmptyState from '../../emptystate/CommonEmptyState/CommonEmptyState';
+import style from '../../../version2/errorstate/V2_ErrorStates.module.css';
+export default function Inconvenience(props) {
+  function errorInconvenience() {
+    return /*#__PURE__*/React.createElement(ErrorInconvenience, {
+      className: style.errorSvg
     });
   }
 
+  let {
+    title,
+    description,
+    isButtonNeeded,
+    className,
+    isFluid,
+    dataId,
+    buttonText,
+    onButtonClick,
+    urlText,
+    url,
+    onClick,
+    urlTarget,
+    size
+  } = props;
+  return /*#__PURE__*/React.createElement(Container, {
+    scroll: "vertical",
+    className: `${style.container} ${style[size]}`
+  }, /*#__PURE__*/React.createElement(CommonEmptyState, {
+    title: title,
+    description: description,
+    getEmptyState: errorInconvenience,
+    className: `${style.errorState} ${className}`,
+    isFluid: isFluid,
+    dataId: dataId,
+    linkUrl: url,
+    linkText: urlText,
+    onUrlClick: onClick,
+    linkTarget: urlTarget,
+    customClass: {
+      titleClass: style.title,
+      descriptionClass: style.desc
+    }
+  }, isButtonNeeded ? /*#__PURE__*/React.createElement(Button, {
+    palette: "primaryFilled",
+    text: buttonText,
+    customClass: {
+      customButton: style.errorBtn
+    },
+    onClick: onButtonClick
+  }) : null));
 }
 Inconvenience.propTypes = propTypes;
-Inconvenience.defaultProps = defaultProps;
-
-if (false) {
-  Inconvenience.docs = {
-    componentGroup: 'errorStates'
-  };
-}
+Inconvenience.defaultProps = defaultProps;

package/es/v1/{version2/errorstate → errorstate}/OopsSomethingMiss/OopsSomethingMiss.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import { defaultProps } from '../../../../version2/errorstate/OopsSomethingMiss/props/defaultProps';
-import { propTypes } from '../../../../version2/errorstate/OopsSomethingMiss/props/propTypes';
-import { Container } from '@zohodesk/components/lib/Layout';
+import { defaultProps } from '../../../version2/errorstate/OopsSomethingMiss/props/defaultProps';
+import { propTypes } from '../../../version2/errorstate/OopsSomethingMiss/props/propTypes';
+import { Container } from '@zohodesk/components/es/v1/Layout';
 import ErrorOopsSomethingMiss from '@zohodesk/svg/lib/v1/errorstate/version3/ErrorOopsSomethingMiss';
-import Button from '@zohodesk/components/lib/Button/Button';
-import CommonEmptyState from '../../../emptystate/CommonEmptyState/CommonEmptyState';
-import style from '../../../../version2/errorstate/V2_ErrorStates.module.css';
+import Button from '@zohodesk/components/es/v1/Button/Button';
+import CommonEmptyState from '../../emptystate/CommonEmptyState/CommonEmptyState';
+import style from '../../../version2/errorstate/V2_ErrorStates.module.css';
 export default function OopsSomethingMiss(props) {
   function errorOopsSomethingMiss() {
     return /*#__PURE__*/React.createElement(ErrorOopsSomethingMiss, {

package/es/v1/{version2/errorstate → errorstate}/UnableToProcessRequest/UnableToProcessRequest.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import { defaultProps } from '../../../../version2/errorstate/UnableToProcessRequest/props/defaultProps';
-import { propTypes } from '../../../../version2/errorstate/UnableToProcessRequest/props/propTypes';
-import { Container } from '@zohodesk/components/lib/Layout';
+import { defaultProps } from '../../../version2/errorstate/UnableToProcessRequest/props/defaultProps';
+import { propTypes } from '../../../version2/errorstate/UnableToProcessRequest/props/propTypes';
+import { Container } from '@zohodesk/components/es/v1/Layout';
 import ErrorUnableToProcessRequest from '@zohodesk/svg/lib/v1/errorstate/version3/ErrorUnableToProcessRequest';
-import Button from '@zohodesk/components/lib/Button/Button';
-import CommonEmptyState from '../../../emptystate/CommonEmptyState/CommonEmptyState';
-import style from '../../../../version2/errorstate/V2_ErrorStates.module.css';
+import Button from '@zohodesk/components/es/v1/Button/Button';
+import CommonEmptyState from '../../emptystate/CommonEmptyState/CommonEmptyState';
+import style from '../../../version2/errorstate/V2_ErrorStates.module.css';
 export default function UnableToProcessRequest(props) {
   function errorUnableToProcess() {
     return /*#__PURE__*/React.createElement(ErrorUnableToProcessRequest, {

package/es/v1/errorstate/UnauthorizedLogin/UnauthorizedLogin.js

@@ -1,80 +1,61 @@
 import React from 'react';
-import { defaultProps } from '../../../errorstate/UnauthorizedLogin/props/defaultProps';
-import { propTypes } from '../../../errorstate/UnauthorizedLogin/props/propTypes';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
-import LinkText from '../LinkText/LinkText';
-import UnauthorizedLoginSVG from '@zohodesk/svg/lib/errorstate/version1/UnauthorizedLogin';
-import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
-import commonStyle from '../../../errorstate/EmptyStates.module.css';
-import style from '../../../errorstate/UnauthorizedLogin/UnauthorizedLogin.module.css';
-export default class UnauthorizedLogin extends React.Component {
-  constructor(props) {
-    super(props);
-    this.responsiveFunc = this.responsiveFunc.bind(this);
-  }
-
-  responsiveFunc(_ref) {
-    let {
-      mediaQueryOR
-    } = _ref;
-    return {
-      tablet: mediaQueryOR([{
-        minWidth: 481,
-        maxWidth: 768
-      }]),
-      uptoMobile: mediaQueryOR([{
-        maxWidth: 480
-      }])
-    };
-  }
-
-  render() {
-    let {
-      title,
-      subtitle,
-      description,
-      urlText,
-      url,
-      onClick,
-      dataId,
-      customClass
-    } = this.props;
-    return /*#__PURE__*/React.createElement(ResponsiveReceiver, {
-      query: this.responsiveFunc
-    }, _ref2 => {
-      let {
-        tablet,
-        uptoMobile
-      } = _ref2;
-      return /*#__PURE__*/React.createElement(Container, {
-        className: `${uptoMobile || tablet ? commonStyle.tabletContainer : commonStyle.container} ${customClass}`,
-        dataId: dataId,
-        scroll: "vertical"
-      }, /*#__PURE__*/React.createElement(Box, {
-        className: commonStyle.top
-      }, title ? /*#__PURE__*/React.createElement("div", {
-        className: uptoMobile ? commonStyle.mobileTitle : tablet ? commonStyle.tabletTitle : commonStyle.title
-      }, title) : null, subtitle ? /*#__PURE__*/React.createElement("div", {
-        className: uptoMobile ? commonStyle.mobileSubTitle : tablet ? commonStyle.tabletSubTitle : commonStyle.subtitle
-      }, subtitle) : null), /*#__PURE__*/React.createElement(Box, {
-        className: `${style.imageContainer} ${uptoMobile ? commonStyle.mobileImageContainer : commonStyle.tabletImageContainer}`
-      }, /*#__PURE__*/React.createElement(UnauthorizedLoginSVG, {
-        isFluid: true,
-        dataId: `${dataId}_svg`
-      })), /*#__PURE__*/React.createElement(Box, {
-        className: `${uptoMobile || tablet ? '' : commonStyle.footerWidth} ${commonStyle.footer}`
-      }, /*#__PURE__*/React.createElement("div", {
-        className: uptoMobile || tablet ? commonStyle.tabletBtmText : commonStyle.btmText
-      }, description), /*#__PURE__*/React.createElement(LinkText, {
-        text: urlText,
-        href: url,
-        onClick: onClick,
-        dataId: `${dataId}_link`,
-        customClass: uptoMobile || tablet ? commonStyle.tabletBtmText : ''
-      })));
+import { defaultProps } from '../../../version2/errorstate/UnauthorizedLogin/props/defaultProps';
+import { propTypes } from '../../../version2/errorstate/UnauthorizedLogin/props/propTypes';
+import { Container } from '@zohodesk/components/es/v1/Layout';
+import ErrorUnauthorizedLogin from '@zohodesk/svg/lib/v1/errorstate/version3/ErrorUnauthorizedLogin';
+import Button from '@zohodesk/components/es/v1/Button/Button';
+import CommonEmptyState from '../../emptystate/CommonEmptyState/CommonEmptyState';
+import style from '../../../version2/errorstate/V2_ErrorStates.module.css';
+export default function UnauthorizedLogin(props) {
+  function errorUnauthorizedLogin() {
+    return /*#__PURE__*/React.createElement(ErrorUnauthorizedLogin, {
+      className: style.errorSvg
     });
   }
 
+  let {
+    title,
+    description,
+    isButtonNeeded,
+    className,
+    isFluid,
+    dataId,
+    buttonText,
+    buttonPalette,
+    onButtonClick,
+    urlText,
+    url,
+    onClick,
+    urlTarget,
+    size
+  } = props;
+  return /*#__PURE__*/React.createElement(Container, {
+    scroll: "vertical",
+    className: `${style.container} ${style[size]}`
+  }, /*#__PURE__*/React.createElement(CommonEmptyState, {
+    title: title,
+    description: description,
+    getEmptyState: errorUnauthorizedLogin,
+    className: `${style.errorState} ${className}`,
+    isFluid: isFluid,
+    dataId: dataId,
+    linkUrl: url,
+    linkText: urlText,
+    onUrlClick: onClick,
+    linkTarget: urlTarget,
+    customClass: {
+      titleClass: style.title,
+      descriptionClass: style.desc
+    }
+  }, isButtonNeeded ? /*#__PURE__*/React.createElement(Button, {
+    palette: buttonPalette,
+    text: buttonText,
+    customClass: {
+      customButton: style.errorBtn
+    },
+    onClick: onButtonClick,
+    dataId: `${dataId}_button`
+  }) : null));
 }
 UnauthorizedLogin.propTypes = propTypes;
 UnauthorizedLogin.defaultProps = defaultProps; // if (__DOCS__) {

package/es/v1/{version2/errorstate → errorstate}/UrlNotFound/UrlNotFound.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import { defaultProps } from '../../../../version2/errorstate/UrlNotFound/props/defaultProps';
-import { propTypes } from '../../../../version2/errorstate/UrlNotFound/props/propTypes';
-import { Container } from '@zohodesk/components/lib/Layout';
+import { defaultProps } from '../../../version2/errorstate/UrlNotFound/props/defaultProps';
+import { propTypes } from '../../../version2/errorstate/UrlNotFound/props/propTypes';
+import { Container } from '@zohodesk/components/es/v1/Layout';
 import ErrorUrlNotFound from '@zohodesk/svg/lib/v1/errorstate/version3/ErrorUrlNotFound';
-import Button from '@zohodesk/components/lib/Button/Button';
-import CommonEmptyState from '../../../emptystate/CommonEmptyState/CommonEmptyState';
-import style from '../../../../version2/errorstate/V2_ErrorStates.module.css';
+import Button from '@zohodesk/components/es/v1/Button/Button';
+import CommonEmptyState from '../../emptystate/CommonEmptyState/CommonEmptyState';
+import style from '../../../version2/errorstate/V2_ErrorStates.module.css';
 export default function UrlNotFound(props) {
   function errorUrlNotFound() {
     return /*#__PURE__*/React.createElement(ErrorUrlNotFound, {

package/es/v1/{version2/errorstate → errorstate}/WillBeRightBack/WillBeRightBack.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import { defaultProps } from '../../../../version2/errorstate/WillBeRightBack/props/defaultProps';
-import { propTypes } from '../../../../version2/errorstate/WillBeRightBack/props/propTypes';
-import { Container } from '@zohodesk/components/lib/Layout';
+import { defaultProps } from '../../../version2/errorstate/WillBeRightBack/props/defaultProps';
+import { propTypes } from '../../../version2/errorstate/WillBeRightBack/props/propTypes';
+import { Container } from '@zohodesk/components/es/v1/Layout';
 import ErrorWillBeRightBack from '@zohodesk/svg/lib/v1/errorstate/version3/ErrorWillBeRightBack';
-import Button from '@zohodesk/components/lib/Button/Button';
-import CommonEmptyState from '../../../emptystate/CommonEmptyState/CommonEmptyState';
-import style from '../../../../version2/errorstate/V2_ErrorStates.module.css';
+import Button from '@zohodesk/components/es/v1/Button/Button';
+import CommonEmptyState from '../../emptystate/CommonEmptyState/CommonEmptyState';
+import style from '../../../version2/errorstate/V2_ErrorStates.module.css';
 export default function WillBeRightBack(props) {
   function errorWillBeRightBack() {
     return /*#__PURE__*/React.createElement(ErrorWillBeRightBack, {

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

@@ -1,141 +1,125 @@
 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 } from 'react';
 import { defaultProps } from '../../../../form/fields/CheckBoxField/props/defaultProps';
 import { propTypes } from '../../../../form/fields/CheckBoxField/props/propTypes';
 /**** Components ****/
 
-import Label from '@zohodesk/components/lib/Label/Label';
-import CheckBox from '@zohodesk/components/lib/CheckBox/CheckBox';
+import Label from '@zohodesk/components/es/v1/Label/Label';
+import CheckBox from '@zohodesk/components/es/v1/CheckBox/CheckBox';
 import ValidationMessage from '../ValidationMessage/ValidationMessage';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { Container, Box } from '@zohodesk/components/es/v1/Layout';
 import FieldContainer from '../FieldContainer/FieldContainer';
 /**** CSS ****/
 
 import style from '../../../../form/fields/Fields.module.css';
-export default class CheckBoxField extends PureComponent {
-  constructor(props) {
-    super(props);
-    this.handleChange = this.handleChange.bind(this);
-    this.handleGetRef = this.handleGetRef.bind(this);
-    this.handleLabelClick = this.handleLabelClick.bind(this);
-  }
 
-  handleChange(value) {
-    let {
-      id,
-      onChange
-    } = this.props;
+function CheckBoxField(props) {
+  let {
+    labelName,
+    id,
+    isMandatory,
+    validationMessage,
+    validationPalette,
+    isReadOnly,
+    checked,
+    errorType,
+    isDisabled,
+    title,
+    dataId,
+    dataSelectorId,
+    validationRuleMessage,
+    validationRulePalette,
+    infoText,
+    fieldSize,
+    labelPalette,
+    labelCustomClass,
+    direction,
+    lineClamp,
+    isLocked,
+    lockedInfoText,
+    customProps,
+    renderLabelProps,
+    getRef,
+    onChange
+  } = props;
+  const {
+    LabelProps = {},
+    CheckBoxProps = {},
+    ValidationMessageProps1 = {},
+    ValidationMessageProps2 = {}
+  } = customProps;
+  let removeEvent = isDisabled || isReadOnly;
+  let isDirectCol = direction === 'column';
+  let labelElement = /*#__PURE__*/React.createElement(FieldContainer, {
+    isLocked: isLocked,
+    lockedInfoText: lockedInfoText,
+    infoText: infoText,
+    renderProps: renderLabelProps
+  }, /*#__PURE__*/React.createElement(Label, _extends({
+    text: labelName,
+    id: id,
+    size: fieldSize === 'small' ? 'small' : 'medium',
+    palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
+    infoText: infoText,
+    customClass: `${!isDirectCol ? style.checkboxText : ''} ${!isDirectCol ? style[`lineClamp_${lineClamp}`] : ''} ${isReadOnly || isDisabled ? style.cbTextReadonly : style.cbTextPointer} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
+    title: labelName,
+    onClick: !removeEvent ? handleLabelClick : null,
+    variant: isDirectCol ? 'default' : 'primary',
+    dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
+  }, LabelProps)));
+
+  function handleChange(value) {
     onChange && onChange(id, value);
   }
 
-  handleGetRef(el) {
-    let {
-      getRef,
-      id
-    } = this.props;
+  function handleGetRef(el) {
     getRef && getRef(el, id);
   }
 
-  handleLabelClick() {
-    let {
-      checked
-    } = this.props;
-    this.handleChange(!checked);
+  function handleLabelClick() {
+    handleChange(!checked);
   }
 
-  render() {
-    let {
-      labelName,
-      id,
-      isMandatory,
-      validationMessage,
-      validationPalette,
-      isReadOnly,
-      checked,
-      errorType,
-      isDisabled,
-      title,
-      dataId,
-      dataSelectorId,
-      validationRuleMessage,
-      validationRulePalette,
-      infoText,
-      fieldSize,
-      labelPalette,
-      labelCustomClass,
-      direction,
-      lineClamp,
-      isLocked,
-      lockedInfoText,
-      customProps,
-      renderLabelProps
-    } = this.props;
-    const {
-      LabelProps = {},
-      CheckBoxProps = {},
-      ValidationMessageProps1 = {},
-      ValidationMessageProps2 = {}
-    } = customProps;
-    let removeEvent = isDisabled || isReadOnly;
-    let isDirectCol = direction === 'column';
-    let labelElement = /*#__PURE__*/React.createElement(FieldContainer, {
-      isLocked: isLocked,
-      lockedInfoText: lockedInfoText,
-      infoText: infoText,
-      renderProps: renderLabelProps
-    }, /*#__PURE__*/React.createElement(Label, _extends({
-      text: labelName,
-      id: id,
-      size: fieldSize === 'small' ? 'small' : 'medium',
-      palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-      infoText: infoText,
-      customClass: `${!isDirectCol ? style.checkboxText : ''} ${!isDirectCol ? style[`lineClamp_${lineClamp}`] : ''} ${isReadOnly || isDisabled ? style.cbTextReadonly : style.cbTextPointer} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
-      title: labelName,
-      onClick: !removeEvent ? this.handleLabelClick : null,
-      variant: isDirectCol ? 'default' : 'primary',
-      dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
-    }, LabelProps)));
-    return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
-      "data-title": isDisabled ? title : null,
-      "data-selector-id": dataSelectorId
-    }, isDirectCol && labelElement, /*#__PURE__*/React.createElement("div", {
-      className: `${isDirectCol ? style.fieldContainer : style.checkboxFieldContainer} ${isDirectCol && labelName ? style[`fieldMargin_${fieldSize}`] : ''}`
-    }, /*#__PURE__*/React.createElement(Container, {
-      alignBox: "row",
-      isCover: false,
-      align: "top"
-    }, /*#__PURE__*/React.createElement(Box, {
-      className: isDirectCol ? style.checkbox : style.checkboxRow
-    }, /*#__PURE__*/React.createElement(CheckBox, _extends({
-      id: id,
-      onChange: this.handleChange,
-      disabled: removeEvent,
-      checked: checked,
-      getRef: this.handleGetRef,
-      dataId: dataId
-    }, CheckBoxProps))), !isDirectCol && /*#__PURE__*/React.createElement(Box, {
-      flexible: true
-    }, labelElement)), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
-      text: validationMessage,
-      palette: validationPalette,
-      type: errorType,
-      dataId: `${dataId}_ValidationMessage`
-    }, ValidationMessageProps1)), validationRuleMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
-      text: validationRuleMessage,
-      palette: validationRulePalette,
-      type: errorType,
-      dataId: `${dataId}_ValidationRuleMessage`
-    }, ValidationMessageProps2))));
-  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
+    "data-title": isDisabled ? title : null,
+    "data-selector-id": dataSelectorId
+  }, isDirectCol && labelElement, /*#__PURE__*/React.createElement("div", {
+    className: `${isDirectCol ? style.fieldContainer : style.checkboxFieldContainer} ${isDirectCol && labelName ? style[`fieldMargin_${fieldSize}`] : ''}`
+  }, /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    isCover: false,
+    align: "top"
+  }, /*#__PURE__*/React.createElement(Box, {
+    className: isDirectCol ? style.checkbox : style.checkboxRow
+  }, /*#__PURE__*/React.createElement(CheckBox, _extends({
+    id: id,
+    onChange: handleChange,
+    disabled: removeEvent,
+    checked: checked,
+    getRef: handleGetRef,
+    dataId: dataId
+  }, CheckBoxProps))), !isDirectCol && /*#__PURE__*/React.createElement(Box, {
+    flexible: true
+  }, labelElement)), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
+    text: validationMessage,
+    palette: validationPalette,
+    type: errorType,
+    dataId: `${dataId}_ValidationMessage`
+  }, ValidationMessageProps1)), validationRuleMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
+    text: validationRuleMessage,
+    palette: validationRulePalette,
+    type: errorType,
+    dataId: `${dataId}_ValidationRuleMessage`
+  }, ValidationMessageProps2))));
+} // const MomoizedCheckBoxField = memo(CheckBoxField);
+// export default MomoizedCheckBoxField;
+// MomoizedCheckBoxField.propTypes = propTypes;
+// MomoizedCheckBoxField.defaultProps = defaultProps;
+
 
-}
 CheckBoxField.propTypes = propTypes;
-CheckBoxField.defaultProps = defaultProps; // if (__DOCS__) {
-//   CheckBoxField.docs = {
-//     componentGroup: 'Form Fields',
-//     folderName: 'General'
-//   };
-// }
+CheckBoxField.defaultProps = defaultProps;
+export default CheckBoxField;