@zohodesk/dot 1.2.3 → 1.3.0-temp-158

package/es/v1/list/status/StatusListItem/StatusListItem.js

@@ -1,122 +1,97 @@
 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 from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
+import React, { useRef } from 'react';
+import { defaultProps } from '../../../../list/status/StatusListItem/props/defaultProps';
+import { propTypes } from '../../../../list/status/StatusListItem/props/propTypes';
+import { Container, Box } from '@zohodesk/components/es/v1/Layout';
 /**** Components ****/
 
 import { Icon } from '@zohodesk/icons';
-import CssProvider from '@zohodesk/components/lib/Provider/CssProvider';
+import CssProvider from '@zohodesk/components/es/v1/Provider/CssProvider';
 /**** CSS ****/
 
-import style from './StatusListItem.module.css';
-export default class StatusListItem extends React.Component {
-  constructor(props) {
-    super(props);
-    this.handleClick = this.handleClick.bind(this);
-    this.getRef = this.getRef.bind(this);
-    this.handleMouseEnter = this.handleMouseEnter.bind(this);
+import style from '../../../../list/status/StatusListItem/StatusListItem.module.css';
+export default function StatusListItem(props) {
+  let {
+    size,
+    active,
+    highlight,
+    value,
+    autoHover,
+    palette,
+    title,
+    disableTitle,
+    needTick,
+    isLink,
+    href,
+    target,
+    needBorder,
+    isDisabled,
+    bulletColor,
+    a11y,
+    needMultiLineText,
+    index,
+    getRef,
+    id,
+    onClick,
+    onMouseEnter
+  } = props;
+  let options = {};
+  let {
+    role,
+    ariaSelected,
+    ariaHidden = true
+  } = a11y;
+
+  if (isLink) {
+    options.href = href;
+    options.target = `_${target}`;
   }
 
-  getRef(ele) {
-    this.ele = ele;
-    let {
-      index,
-      getRef,
-      id
-    } = this.props;
-    getRef && getRef(ele, index, id);
+  const element = useRef(null);
+
+  function getReference(ele) {
+    element.current = ele;
+    getRef && getRef(element.current, index, id);
   }
 
-  handleClick(e) {
-    let {
-      onClick,
-      id,
-      value,
-      index
-    } = this.props;
+  function handleClick(e) {
     onClick && onClick(id, value, index, e);
   }
 
-  handleMouseEnter(e) {
-    let {
-      onMouseEnter,
-      id,
-      value,
-      index
-    } = this.props;
+  function handleMouseEnter(e) {
     onMouseEnter && onMouseEnter(id, value, index, e);
   }
 
-  render() {
-    let {
-      size,
-      active,
-      highlight,
-      value,
-      autoHover,
-      palette,
-      title,
-      disableTitle,
-      needTick,
-      isLink,
-      href,
-      target,
-      needBorder,
-      isDisabled,
-      bulletColor,
-      a11y,
-      needMultiLineText
-    } = this.props;
-    let options = {};
-    let {
-      role,
-      ariaSelected,
-      ariaHidden = true
-    } = a11y;
-
-    if (isLink) {
-      options.href = href;
-      options.target = `_${target}`;
-    }
-
-    return /*#__PURE__*/React.createElement(Container, _extends({
-      role: role,
-      "aria-selected": ariaSelected,
-      isCover: false,
-      align: "baseline",
-      alignBox: "row",
-      className: `${style.list} ${style[size]} ${style[palette]} ${active ? style.active : highlight && !isDisabled ? style.hover : ''} ${autoHover && !isDisabled ? style.effect : ''} ${needTick ? style.withTick : ''} ${isDisabled ? CssProvider('isDisable') : ''} ${needBorder ? style.withBorder : ''}`,
-      dataId: String(value).replace("'", '_'),
-      onClick: !isDisabled && this.handleClick,
-      onMouseEnter: this.handleMouseEnter,
-      eleRef: this.getRef,
-      tagName: isLink ? 'a' : 'li',
-      "data-title": isDisabled ? disableTitle : null,
-      tabindex: isDisabled ? '-1' : '0'
-    }, options), /*#__PURE__*/React.createElement(Box, {
-      className: `${style.statusType} ${style[bulletColor]}`
-    }), /*#__PURE__*/React.createElement(Box, {
-      "data-title": isDisabled ? null : title,
-      flexible: true,
-      shrink: true,
-      className: needMultiLineText ? style.multiLineValue : style.value
-    }, value), needTick && active ? /*#__PURE__*/React.createElement("div", {
-      className: style.tickIcon,
-      "aria-hidden": ariaHidden
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: "ZD-ticknew",
-      size: "8"
-    })) : null);
-  }
-
+  return /*#__PURE__*/React.createElement(Container, _extends({
+    role: role,
+    "aria-selected": ariaSelected,
+    isCover: false,
+    align: "baseline",
+    alignBox: "row",
+    className: `${style.list} ${style[size]} ${style[palette]} ${active ? style.active : highlight && !isDisabled ? style.hover : ''} ${autoHover && !isDisabled ? style.effect : ''} ${needTick ? style.withTick : ''} ${isDisabled ? CssProvider('isDisable') : ''} ${needBorder ? style.withBorder : ''}`,
+    dataId: String(value).replace("'", '_'),
+    onClick: !isDisabled && handleClick,
+    onMouseEnter: handleMouseEnter,
+    eleRef: getReference,
+    tagName: isLink ? 'a' : 'li',
+    "data-title": isDisabled ? disableTitle : null,
+    tabindex: isDisabled ? '-1' : '0'
+  }, options), /*#__PURE__*/React.createElement(Box, {
+    className: `${style.statusType} ${style[bulletColor]}`
+  }), /*#__PURE__*/React.createElement(Box, {
+    "data-title": isDisabled ? null : title,
+    flexible: true,
+    shrink: true,
+    className: needMultiLineText ? style.multiLineValue : style.value
+  }, value), needTick && active ? /*#__PURE__*/React.createElement("div", {
+    className: style.tickIcon,
+    "aria-hidden": ariaHidden
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-ticknew",
+    size: "8"
+  })) : null);
 }
 StatusListItem.defaultProps = defaultProps;
-StatusListItem.propTypes = propTypes; // if (__DOCS__) {
-//   StatusListItem.docs = {
-//     componentGroup: 'StatusListItem',
-//     folderName: 'List'
-//   };
-// }
+StatusListItem.propTypes = propTypes;

package/es/v1/lookup/EmptyPage/EmptyPage.js

@@ -1,5 +1,5 @@
 /*** Libraries ***/
-import React, { Component } from 'react';
+import React from 'react';
 import { defaultProps } from '../../../lookup/EmptyPage/props/defaultProps';
 import { propTypes } from '../../../lookup/EmptyPage/props/propTypes';
 import EmptySearch from '@zohodesk/svg/lib/emptystate/version3/EmptySearch';
@@ -9,13 +9,13 @@ import EmptyProducts from '@zohodesk/svg/lib/emptystate/version3/EmptyProducts';
 /*** CSS ***/
 
 import style from '../../../lookup/EmptyPage/LookupEmptyPage.module.css';
-export default class EmptyPage extends Component {
-  constructor(props) {
-    super(props);
-    this.renderEmptyState = this.renderEmptyState.bind();
-  }
+export default function EmptyPage(props) {
+  let {
+    type,
+    title
+  } = props;
 
-  renderEmptyState(type) {
+  function renderEmptyState(type) {
     switch (type) {
       case 'search':
         return /*#__PURE__*/React.createElement(EmptySearch, {
@@ -42,24 +42,13 @@ export default class EmptyPage extends Component {
     }
   }
 
-  render() {
-    let {
-      type,
-      title
-    } = this.props;
-    return /*#__PURE__*/React.createElement("div", {
-      className: style.container,
-      "data-id": `empty_${type}`,
-      "data-test-id": `empty_${type}`
-    }, this.renderEmptyState(type), /*#__PURE__*/React.createElement("div", {
-      className: style.contentDiv
-    }, title));
-  }
-
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.container,
+    "data-id": `empty_${type}`,
+    "data-test-id": `empty_${type}`
+  }, renderEmptyState(type), /*#__PURE__*/React.createElement("div", {
+    className: style.contentDiv
+  }, title));
 }
 EmptyPage.propTypes = propTypes;
-EmptyPage.defaultProps = defaultProps; // if (__DOCS__) {
-//   EmptyPage.docs = {
-//     componentGroup: 'Lookup'
-//   };
-// }
+EmptyPage.defaultProps = defaultProps;

package/es/v1/lookup/Lookup/Lookup.js

@@ -1,11 +1,12 @@
 /*** Libraries ***/
-import React, { useRef, useCallback } from 'react';
+import React, { useRef, useCallback, useEffect } from 'react';
+import { useEffectCallOnlyAfterState } from '@zohodesk/hooks';
 import { defaultProps } from '../../../lookup/Lookup/props/defaultProps';
 import { propTypes } from '../../../lookup/Lookup/props/propTypes';
 /*** Components ***/
 
 import FreezeLayer from '../../../FreezeLayer/FreezeLayer';
-import { Container } from '@zohodesk/components/lib/Layout';
+import { Container } from '@zohodesk/components/es/v1/Layout';
 import FocusScope from '@zohodesk/a11y/es/FocusScope/FocusScope';
 /*** CSS ***/
 
@@ -40,17 +41,17 @@ export default function Lookup(props) {
     focusScopeProps = {}
   } = customProps;
   const {
-    autoFocus = true,
-    restoreFocus = true,
-    needArrowLoop = false,
-    needTabLoop = true,
-    enableEnterAction = false
+    needAutoFocus = true,
+    needRestoreFocus = true,
+    needListNavigation = false,
+    needFocusLoop = true,
+    needEnterAction = false
   } = focusScopeProps;
   const createRef = useRef(null);
   const handleKeyDown = useCallback(e => {
     onKeyDown && onKeyDown(e);
   }, [onKeyDown]);
-  useEffect(() => {
+  useEffectCallOnlyAfterState(() => {
     if (isActive) {
       document.addEventListener('keydown', handleKeyDown);
     } else {
@@ -90,13 +91,13 @@ export default function Lookup(props) {
     className: style.container,
     dataId: "fldValue"
   }, needFocusScope ? /*#__PURE__*/React.createElement(FocusScope, {
-    needTabLoop: needTabLoop,
-    needArrowLoop: needArrowLoop,
+    needFocusLoop: needFocusLoop,
+    needListNavigation: needListNavigation,
     elementRef: createRef,
-    autoFocus: autoFocus,
-    restoreFocus: restoreFocus,
+    needAutoFocus: needAutoFocus,
+    needRestoreFocus: needRestoreFocus,
     onClose: onClose,
-    enableEnterAction: enableEnterAction
+    needEnterAction: needEnterAction
   }, content) : content));
 }
 Lookup.propTypes = propTypes;

package/es/v1/lookup/Section/Section.js

@@ -1,25 +1,19 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { propTypes } from '../../../lookup/Section/props/propTypes';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { Container, Box } from '@zohodesk/components/es/v1/Layout';
 import style from '../../../lookup/Section/LookupSection.module.css';
-export default class Section extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    let {
-      alignBox,
-      className
-    } = this.props;
-    return /*#__PURE__*/React.createElement(Container, {
-      "data-drag-container": "true",
-      alignBox: alignBox,
-      className: `${style.section} ${className ? className : ''}`
-    }, /*#__PURE__*/React.createElement(Box, {
-      flexible: true
-    }, this.props.children));
-  }
-
+export default function Section(props) {
+  let {
+    alignBox,
+    className,
+    children
+  } = props;
+  return /*#__PURE__*/React.createElement(Container, {
+    "data-drag-container": "true",
+    alignBox: alignBox,
+    className: `${style.section} ${className ? className : ''}`
+  }, /*#__PURE__*/React.createElement(Box, {
+    flexible: true
+  }, children));
 }
 Section.propTypes = propTypes;

package/es/v1/lookup/header/ModuleHeader/ModuleHeader.js

@@ -7,7 +7,7 @@ import { propTypes } from '../../../../lookup/header/ModuleHeader/props/propType
 import Title from '../Title/Title';
 import Close from '../Close/Close';
 import Search from '../Search/Search';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { Container, Box } from '@zohodesk/components/es/v1/Layout';
 /*** CSS ***/
 
 import commonStyle from '../../../../lookup/header/lookupHeaderCommon.module.css';

package/es/v1/lookup/header/Search/Search.js

@@ -8,13 +8,13 @@ import { SearchUI_defaultProps } from '../../../../lookup/header/Search/props/de
 import { Search_propTypes, SearchUI_propTypes } from '../../../../lookup/header/Search/props/propTypes';
 /** * Components ** */
 
-import TextBoxIcon from '@zohodesk/components/lib/TextBoxIcon/TextBoxIcon';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
+import TextBoxIcon from '@zohodesk/components/es/v1/TextBoxIcon/TextBoxIcon';
+import { Container, Box } from '@zohodesk/components/es/v1/Layout';
 import { Icon } from '@zohodesk/icons';
 import ToggleDropDown from '../../../../dropdown/ToggleDropDown/ToggleDropDown';
 /** * Methods ** */
 
-import { debounce } from '@zohodesk/components/lib/utils/debounce';
+import { debounce } from '@zohodesk/components/es/utils/debounce';
 import { cancelBubblingEffect } from '@zohodesk/components/es/utils/Common';
 /** * CSS ** */
 

package/es/v1/lookup/header/TicketHeader/TicketHeader.js

@@ -8,7 +8,7 @@ import Title from '../Title/Title';
 import Close from '../Close/Close';
 import Search from '../Search/Search';
 import ViewDropDown from '../../../../lookup/header/ViewDropDown/ViewDropDown';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { Container, Box } from '@zohodesk/components/es/v1/Layout';
 /*** CSS ***/
 
 import commonStyle from '../../../../lookup/header/lookupHeaderCommon.module.css';

package/es/v1/lookup/header/ViewDropDown/ViewDropDown.js

@@ -4,17 +4,17 @@ import { defaultProps } from '../../../../lookup/header/ViewDropDown/props/defau
 import { propTypes } from '../../../../lookup/header/ViewDropDown/props/propTypes';
 /**** Components ****/
 
-import { SelectComponent } from '@zohodesk/components/lib/Select/Select';
-import Popup from '@zohodesk/components/lib/Popup/Popup';
-import ListItem from '@zohodesk/components/lib/ListItem/ListItem';
-import DropDownSearch from '@zohodesk/components/lib/DropDown/DropDownSearch';
-import { Card, CardHeader, CardContent } from '@zohodesk/components/lib/Card';
-import ResponsiveDropBox from '@zohodesk/components/lib/ResponsiveDropBox/ResponsiveDropBox';
-import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
+import { SelectComponent } from '@zohodesk/components/es/v1/Select/Select';
+import Popup from '@zohodesk/components/es/v1/Popup/Popup';
+import ListItem from '@zohodesk/components/es/v1/ListItem/ListItem';
+import DropDownSearch from '@zohodesk/components/es/v1/DropDown/DropDownSearch';
+import { Card, CardHeader, CardContent } from '@zohodesk/components/es/v1/Card';
+import ResponsiveDropBox from '@zohodesk/components/es/v1/ResponsiveDropBox/ResponsiveDropBox';
+import { ResponsiveReceiver } from '@zohodesk/components/es/v1/Responsive/CustomResponsive';
 /**** Icons ****/
 
 import { Icon } from '@zohodesk/icons';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { Container, Box } from '@zohodesk/components/es/v1/Layout';
 import Loader from '@zohodesk/svg/lib/Loader/Loader';
 import style from '../../../../lookup/header/ViewDropDown/ViewDropDown.module.css';
 /* eslint-disable react/forbid-component-props */
@@ -165,7 +165,8 @@ class DropDown extends SelectComponent {
 DropDown.propTypes = propTypes;
 DropDown.defaultProps = defaultProps;
 const ViewDropDown = Popup(DropDown);
-ViewDropDown.defaultProps = DropDown.defaultProps; // if (__DOCS__) {
+ViewDropDown.defaultProps = DropDown.defaultProps;
+ViewDropDown.propTypes = DropDown.propTypes; // if (__DOCS__) {
 //   DropDown.docs = {
 //     componentGroup: 'Lookup'
 //   };

package/es/v1/{version2/notification → notification}/DesktopNotification/DesktopNotification.js

@@ -1,15 +1,15 @@
 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); }
 
 import React, { useState } from 'react';
-import { defaultProps } from '../../../../version2/notification/DesktopNotification/props/defaultProps';
-import { propTypes, DesktopNotificationUI_propTypes } from '../../../../version2/notification/DesktopNotification/props/propTypes';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
-import { useZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
+import { defaultProps } from '../../../version2/notification/DesktopNotification/props/defaultProps';
+import { propTypes, DesktopNotificationUI_propTypes } from '../../../version2/notification/DesktopNotification/props/propTypes';
+import { Container, Box } from '@zohodesk/components/es/v1/Layout';
+import { useZIndex } from '@zohodesk/components/es/v1/Provider/ZindexProvider';
 import AutoClose from '../../../actions/AutoClose';
-import Button from '@zohodesk/components/lib/Button/Button';
+import Button from '@zohodesk/components/es/v1/Button/Button';
 import FormAction from '../../../FormAction/FormAction';
 import DesktopNotificationHeader from '../DesktopNotificationHeader/DesktopNotificationHeader';
-import style from '../../../../version2/notification/DesktopNotification/DesktopNotification.module.css';
+import style from '../../../version2/notification/DesktopNotification/DesktopNotification.module.css';
 let buttonPaletteObject = {
   success: {
     buttonPalette: 'successFilled'

package/es/v1/{version2/notification → notification}/DesktopNotificationHeader/DesktopNotificationHeader.js

@@ -1,10 +1,10 @@
 import React, { Component } from 'react';
-import { defaultProps } from '../../../../version2/notification/DesktopNotificationHeader/props/defaultProps';
-import { propTypes } from '../../../../version2/notification/DesktopNotificationHeader/props/propTypes';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
-import AlertClose from '../../AlertClose/AlertClose';
-import AlertIcons from '../../alertIcons/AlertIcons';
-import style from '../../../../version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.module.css';
+import { defaultProps } from '../../../version2/notification/DesktopNotificationHeader/props/defaultProps';
+import { propTypes } from '../../../version2/notification/DesktopNotificationHeader/props/propTypes';
+import { Container, Box } from '@zohodesk/components/es/v1/Layout';
+import AlertClose from '../../alert/AlertClose/AlertClose';
+import AlertIcons from '../../alert/alertIcons/AlertIcons';
+import style from '../../../version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.module.css';
 export default function DesktopNotificationHeader(props) {
   let {
     onClose,

package/es/v1/setup/header/Button/Button.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { defaultProps } from '../../../../setup/header/Button/props/defaultProps';
 import { propTypes } from '../../../../setup/header/Button/props/propTypes';
-import GenButton from '@zohodesk/components/lib/Button/Button';
+import GenButton from '@zohodesk/components/es/v1/Button/Button';
 import style from '../../../../setup/header/Button/HeaderButton.module.css';
 export default class Button extends React.Component {
   constructor(props) {

package/es/v1/setup/header/Link/Link.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { defaultProps } from '../../../../setup/header/Link/props/defaultProps';
 import { propTypes } from '../../../../setup/header/Link/props/propTypes';
 import { Icon } from '@zohodesk/icons';
-import { Box } from '@zohodesk/components/lib/Layout';
+import { Box } from '@zohodesk/components/es/v1/Layout';
 import ExternalLink from '../../../ExternalLink/ExternalLink';
 import style from '../../../../setup/header/Link/HeaderLink.module.css';
 export default class Link extends React.Component {

package/es/v1/setup/header/Search/Search.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { defaultProps } from '../../../../setup/header/Search/props/defaultProps';
 import { propTypes } from '../../../../setup/header/Search/props/propTypes';
 import { Icon } from '@zohodesk/icons';
-import TextBox from '@zohodesk/components/lib/TextBox/TextBox';
+import TextBox from '@zohodesk/components/es/v1/TextBox/TextBox';
 import style from '../../../../setup/header/Search/Search.module.css';
 export default class Search extends React.Component {
   constructor(props) {

package/es/v1/setup/table/Table/Table.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { defaultProps } from '../../../../setup/table/Table/props/defaultProps';
 import { propTypes } from '../../../../setup/table/Table/props/propTypes';
-import { Container } from '@zohodesk/components/lib/Layout';
+import { Container } from '@zohodesk/components/es/v1/Layout';
 export default function Table(props) {
   let {
     children,

package/es/v1/setup/table/TableBody/TableBody.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { defaultProps } from '../../../../setup/table/TableBody/props/defaultProps';
 import { propTypes } from '../../../../setup/table/TableBody/props/propTypes';
-import { Box } from '@zohodesk/components/lib/Layout';
+import { Box } from '@zohodesk/components/es/v1/Layout';
 export default function TableBody(props) {
   let {
     children,

package/es/v1/setup/table/TableData/TableData.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { defaultProps } from '../../../../setup/table/TableData/props/defaultProps';
 import { propTypes } from '../../../../setup/table/TableData/props/propTypes';
-import { Box } from '@zohodesk/components/lib/Layout';
+import { Box } from '@zohodesk/components/es/v1/Layout';
 import style from '../../../../setup/table/TableData/SetupTableData.module.css';
 export default function TableData(props) {
   let {

package/es/v1/setup/table/TableHead/TableHead.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { defaultProps } from '../../../../setup/table/TableHead/props/defaultProps';
 import { propTypes } from '../../../../setup/table/TableHead/props/propTypes';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { Container, Box } from '@zohodesk/components/es/v1/Layout';
 import style from '../../../../setup/table/TableHead/SetupTableHead.module.css';
 export default function TableHead(props) {
   let {

package/es/v1/setup/table/TableRow/TableRow.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { defaultProps } from '../../../../setup/table/TableRow/props/defaultProps';
 import { propTypes } from '../../../../setup/table/TableRow/props/propTypes';
-import { Container } from '@zohodesk/components/lib/Layout';
+import { Container } from '@zohodesk/components/es/v1/Layout';
 import style from '../../../../setup/table/TableRow/SetupTableRow.module.css';
 export default function TableRow(props) {
   let {

package/es/v1/svg/PlusIcon.js

@@ -1,32 +1,25 @@
 import React from 'react';
 import { PlusIcon_defaultProps } from '../../svg/props/defaultProps';
 import { PlusIcon_propTypes } from '../../svg/props/propTypes';
-import SVG from '@zohodesk/svg/lib/SVG/SVG';
-export default class PlusIcon extends React.Component {
-  render() {
-    let {
-      isRender,
-      isSymbol,
-      className
-    } = this.props;
-    return /*#__PURE__*/React.createElement(SVG, {
-      viewBox: "0 0 32 32",
-      name: "PlusIcon",
-      isRender: isRender,
-      isSymbol: isSymbol,
-      className: className
-    }, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
-      style: {
-        fill: '#767d89'
-      },
-      d: "M16,2.7c0.4,0,0.7,0.1,0.9,0.4s0.4,0.6,0.4,0.9v10.7H28c0.4,0,0.7,0.1,0.9,0.4c0.3,0.3,0.4,0.6,0.4,0.9 c0,0.4-0.1,0.7-0.4,0.9c-0.3,0.3-0.6,0.4-0.9,0.4H17.3V28c0,0.4-0.1,0.7-0.4,0.9c-0.3,0.3-0.6,0.4-0.9,0.4c-0.4,0-0.7-0.1-0.9-0.4 c-0.3-0.3-0.4-0.6-0.4-0.9V17.3H4c-0.4,0-0.7-0.1-0.9-0.4S2.7,16.4,2.7,16s0.1-0.7,0.4-0.9c0.3-0.3,0.6-0.4,0.9-0.4h10.7V4 c0-0.4,0.1-0.7,0.4-0.9C15.3,2.8,15.6,2.7,16,2.7z"
-    })));
-  }
-
+import SVG from '@zohodesk/svg/lib/v1/SVG/SVG';
+export default function PlusIcon(props) {
+  let {
+    isRender,
+    isSymbol,
+    className
+  } = props;
+  return /*#__PURE__*/React.createElement(SVG, {
+    viewBox: "0 0 32 32",
+    name: "PlusIcon",
+    isRender: isRender,
+    isSymbol: isSymbol,
+    className: className
+  }, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
+    style: {
+      fill: '#767d89'
+    },
+    d: "M16,2.7c0.4,0,0.7,0.1,0.9,0.4s0.4,0.6,0.4,0.9v10.7H28c0.4,0,0.7,0.1,0.9,0.4c0.3,0.3,0.4,0.6,0.4,0.9 c0,0.4-0.1,0.7-0.4,0.9c-0.3,0.3-0.6,0.4-0.9,0.4H17.3V28c0,0.4-0.1,0.7-0.4,0.9c-0.3,0.3-0.6,0.4-0.9,0.4c-0.4,0-0.7-0.1-0.9-0.4 c-0.3-0.3-0.4-0.6-0.4-0.9V17.3H4c-0.4,0-0.7-0.1-0.9-0.4S2.7,16.4,2.7,16s0.1-0.7,0.4-0.9c0.3-0.3,0.6-0.4,0.9-0.4h10.7V4 c0-0.4,0.1-0.7,0.4-0.9C15.3,2.8,15.6,2.7,16,2.7z"
+  })));
 }
 PlusIcon.propTypes = PlusIcon_propTypes;
-PlusIcon.defaultProps = PlusIcon_defaultProps; // if (__DOCS__) {
-//   PlusIcon.docs = {
-//     componentGroup: 'SVG'
-//   };
-// }
+PlusIcon.defaultProps = PlusIcon_defaultProps;