@zohodesk/components 1.0.0-alpha-260 → 1.0.0-alpha-262

package/README.md

@@ -32,6 +32,22 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 1.0.0-alpha-262
+
+- **ListItem, ListItemWithAvatar, ListItemWithCheckbox, ListItemWithIcon, ListItemWithRadio**  - Added New Prop `needMultiLineText`
+
+- **MultiSelect, MultiSelectWithAvatar** - `keepSelectedOptions` prop added. When this prop is true, it won't remove selected items from the dropdown instead it highlights each selected item with tick mark.
+
+- **MultiSelectWithAvatar** - `customProps` support.
+
+# 1.0.0-alpha-261
+
+- **Tab,Tabs** - Removed offsection property from css.
+
+- compileClassNames , mergeStyle utils added.
+
+- index  export object fixed.
+
 # 1.0.0-alpha-260
 
 - **TextBoxIcon** - OnClear Focus in TextBox issue Resolved.

package/es/DateTime/DateTimePopupHeader.js

@@ -5,7 +5,7 @@ import React, { PureComponent } from 'react';
 
 /** ** Components *** */
 import { Container, Box } from '../Layout';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 import Heading from '../Heading/Heading';
 
 /** ** CSS *** */

package/es/DateTime/DateWidget.js

@@ -7,7 +7,7 @@ import datetime from '@zohodesk/datetimejs';
 /**** Components ****/
 import DateTime from './DateTime';
 import Popup from '../Popup/Popup';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 import { Container } from '../Layout';
 import TextBoxIcon from '../TextBoxIcon/TextBoxIcon';
 

package/es/DateTime/YearView.js

@@ -6,7 +6,7 @@ import { YearView_defaultProps } from './props/defaultProps';
 /**** Components ****/
 import { Virtualizer } from '@zohodesk/virtualizer';
 import { Container, Box } from '../Layout';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 import Heading from '../Heading/Heading';
 /**** CSS ****/
 import style from './YearView.module.css';

package/es/DateTime/index.js

@@ -1 +1 @@
-export { default as DateWidget } from './DateWidget.js';
+export { default as DateWidget } from './DateWidget';

package/es/DropBox/DropBox.module.css

@@ -65,7 +65,6 @@
 }
 .xxlarge {
   width: var(--zd_size364);
-  max-width: var(--zd_size364);
 }
 .default {
   width: 100%;

package/es/DropDown/index.js

@@ -0,0 +1,7 @@
+export { default as DropDown } from './DropDown';
+export { DropDownTarget } from './DropDown';
+export { DropDownItemContainer } from './DropDown';
+export { default as DropDownHeading } from './DropDownHeading';
+export { default as DropDownItem } from './DropDownItem';
+export { default as DropDownSearch } from './DropDownSearch';
+export { default as DropDownSeparator } from './DropDownSeparator';

package/es/Layout/index.js

@@ -1,11 +1,11 @@
 export { default as Container } from './Container';
 export { default as Box } from './Box';
-let Layout = {
-  docs: {
-    componentGroup: 'Layout',
-    folderName: 'Style Guide',
-    external: true,
-    description: ' '
-  }
-};
-export { Layout };
+// let Layout = {
+//   docs: {
+//     componentGroup: 'Layout',
+//     folderName: 'Style Guide',
+//     external: true,
+//     description: ' '
+//   }
+// };
+// export { Layout };

package/es/ListItem/ListItem.js

@@ -6,7 +6,7 @@ import ListContainer from './ListContainer';
 import { ListItemDefaultProps } from './props/defaultProps';
 import { ListItem_Props } from './props/propTypes';
 /**** Components ****/
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 /**** CSS ****/
 import style from './ListItem.module.css';
 export default class ListItem extends React.Component {
@@ -64,7 +64,8 @@ export default class ListItem extends React.Component {
       dataSelectorId,
       a11y,
       customClass,
-      customProps
+      customProps,
+      needMultiLineText
     } = this.props;
     let {
       ListItemProps = {},
@@ -104,7 +105,7 @@ export default class ListItem extends React.Component {
     }, ContainerProps), value ? /*#__PURE__*/React.createElement(Box, {
       shrink: true,
       adjust: true,
-      className: style.value
+      className: needMultiLineText ? style.multiLineValue : style.value
     }, value) : null, children ? /*#__PURE__*/React.createElement(Box, {
       shrink: true,
       adjust: true,

package/es/ListItem/ListItem.module.css

@@ -74,6 +74,11 @@
 .children {
   composes: dotted from '../common/common.module.css';
 }
+.multiLineValue{
+  word-break: break-word;
+  line-height: var(--zd_size18);
+  composes: clamp from '../common/common.module.css'
+}
 .iconBox {
   width: var(--zd_size20);
   text-align: center;

package/es/ListItem/ListItemWithAvatar.js

@@ -9,7 +9,7 @@ import { ListItemWithAvatar_Props } from './props/propTypes';
 /**** Components ****/
 import Avatar from '../Avatar/Avatar';
 import AvatarTeam from '../AvatarTeam/AvatarTeam';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 /**** CSS ****/
 import style from './ListItem.module.css';
 export default class ListItemWithAvatar extends React.PureComponent {
@@ -69,7 +69,8 @@ export default class ListItemWithAvatar extends React.PureComponent {
       avatarPalette,
       a11y,
       customClass,
-      customProps
+      customProps,
+      needMultiLineText
     } = this.props;
     let {
       ListItemProps = {},
@@ -130,7 +131,7 @@ export default class ListItemWithAvatar extends React.PureComponent {
       flexible: true,
       shrink: true,
       "data-title": isDisabled ? null : title,
-      className: style.value
+      className: needMultiLineText ? style.multiLineValue : style.value
     }, value) : null, needTick && active ? /*#__PURE__*/React.createElement(Box, {
       className: style.tickIcon,
       "aria-hidden": ariaHidden,

package/es/ListItem/ListItemWithCheckBox.js

@@ -55,7 +55,8 @@ export default class ListItemWithCheckBox extends React.Component {
       disableTitle,
       a11y,
       customClass,
-      customProps
+      customProps,
+      needMultiLineText
     } = this.props;
     let {
       ListItemProps = {},
@@ -98,7 +99,7 @@ export default class ListItemWithCheckBox extends React.Component {
       flexible: true,
       shrink: true,
       "data-title": isDisabled ? null : title,
-      className: style.value
+      className: needMultiLineText ? style.multiLineValue : style.value
     }, value));
   }
 }

package/es/ListItem/ListItemWithIcon.js

@@ -2,7 +2,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 /**** Libraries ****/
 import React from 'react';
 import { Box } from '../Layout';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 import ListContainer from './ListContainer';
 import { ListItemWithIconDefaultProps } from './props/defaultProps';
 import { ListItemWithIcon_Props } from './props/propTypes';
@@ -65,7 +65,8 @@ export default class ListItemWithIcon extends React.Component {
       disableTitle,
       a11y,
       customClass,
-      customProps
+      customProps,
+      needMultiLineText
     } = this.props;
     let {
       ListItemProps = {},
@@ -110,7 +111,7 @@ export default class ListItemWithIcon extends React.Component {
     }) : null, value && /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       shrink: true,
-      className: style.value,
+      className: needMultiLineText ? style.multiLineValue : style.value,
       "data-title": isDisabled ? null : title,
       dataId: `${dataIdString}_Text`
     }, value), needTick && active ? /*#__PURE__*/React.createElement(Box, {

package/es/ListItem/ListItemWithRadio.js

@@ -56,7 +56,8 @@ export default class ListItemWithRadio extends React.Component {
       disableTitle,
       a11y,
       customClass,
-      customProps
+      customProps,
+      needMultiLineText
     } = this.props;
     let {
       ListItemProps = {},
@@ -100,7 +101,7 @@ export default class ListItemWithRadio extends React.Component {
       flexible: true,
       shrink: true,
       "data-title": disableTitle ? null : title,
-      className: style.value
+      className: needMultiLineText ? style.multiLineValue : style.value
     }, value));
   }
 }

package/es/ListItem/index.js

@@ -0,0 +1,6 @@
+export { default as ListContainer } from './ListContainer';
+export { default as ListItem } from './ListItem';
+export { default as ListItemWithAvatar } from './ListItemWithAvatar';
+export { default as ListItemWithCheckBox } from './ListItemWithCheckBox';
+export { default as ListItemWithIcon } from './ListItemWithIcon';
+export { default as ListItemWithRadio } from './ListItemWithRadio';

package/es/ListItem/props/defaultProps.js

@@ -11,7 +11,8 @@ export const ListContainerDefaultProps = {
   a11y: {},
   customClass: '',
   customProps: {},
-  dataSelectorId: 'listContainer'
+  dataSelectorId: 'listContainer',
+  needMultiLineText: false
 };
 export const ListItemDefaultProps = {
   active: false,
@@ -27,7 +28,8 @@ export const ListItemDefaultProps = {
   a11y: {},
   customClass: {},
   customProps: {},
-  dataSelectorId: 'listItem'
+  dataSelectorId: 'listItem',
+  needMultiLineText: false
 };
 export const ListItemWithAvatarDefaultProps = {
   active: false,
@@ -44,7 +46,8 @@ export const ListItemWithAvatarDefaultProps = {
   a11y: {},
   customClass: {},
   customProps: {},
-  dataSelectorId: 'listItemWithAvatar'
+  dataSelectorId: 'listItemWithAvatar',
+  needMultiLineText: false
 };
 export const ListItemWithCheckBoxDefaultProps = {
   active: false,
@@ -57,7 +60,8 @@ export const ListItemWithCheckBoxDefaultProps = {
   a11y: {},
   customClass: {},
   customProps: {},
-  dataSelectorId: 'listItemWithCheckBox'
+  dataSelectorId: 'listItemWithCheckBox',
+  needMultiLineText: false
 };
 export const ListItemWithIconDefaultProps = {
   active: false,
@@ -73,7 +77,8 @@ export const ListItemWithIconDefaultProps = {
   a11y: {},
   customClass: '',
   customProps: {},
-  dataSelectorId: 'listItemWithIcon'
+  dataSelectorId: 'listItemWithIcon',
+  needMultiLineText: false
 };
 export const ListItemWithRadioDefaultProps = {
   active: false,
@@ -87,5 +92,6 @@ export const ListItemWithRadioDefaultProps = {
   a11y: {},
   customClass: {},
   customProps: {},
-  dataSelectorId: 'listItemWithRadio'
+  dataSelectorId: 'listItemWithRadio',
+  needMultiLineText: false
 };

package/es/ListItem/props/propTypes.js

@@ -24,7 +24,8 @@ export const ListContainer_Props = {
     ariaSelected: PropTypes.bool
   }),
   customClass: PropTypes.string,
-  customProps: PropTypes.object
+  customProps: PropTypes.object,
+  needMultiLineText: PropTypes.bool
 };
 export const ListItem_Props = {
   active: PropTypes.bool,
@@ -53,6 +54,7 @@ export const ListItem_Props = {
     role: PropTypes.string,
     ariaSelected: PropTypes.bool
   }),
+  needMultiLineText: PropTypes.bool,
   customClass: PropTypes.shape({
     customListItem: PropTypes.string,
     customTickIcon: PropTypes.string
@@ -97,6 +99,7 @@ export const ListItemWithAvatar_Props = {
     customAvatar: PropTypes.string,
     customAvatarTeam: PropTypes.string
   }),
+  needMultiLineText: PropTypes.bool,
   customProps: PropTypes.shape({
     ListItemProps: PropTypes.object
   })
@@ -123,6 +126,7 @@ export const ListItemWithCheckBox_Props = {
     role: PropTypes.string,
     ariaSelected: PropTypes.bool
   }),
+  needMultiLineText: PropTypes.bool,
   customClass: PropTypes.shape({
     customListItem: PropTypes.string,
     customCheckBox: PropTypes.string,
@@ -156,6 +160,7 @@ export const ListItemWithIcon_Props = {
     ariaSelected: PropTypes.bool,
     ariaHidden: PropTypes.bool
   }),
+  needMultiLineText: PropTypes.bool,
   customClass: PropTypes.string,
   customProps: PropTypes.shape({
     ListItemProps: PropTypes.object
@@ -183,6 +188,7 @@ export const ListItemWithRadio_Props = {
     role: PropTypes.string,
     ariaSelected: PropTypes.bool
   }),
+  needMultiLineText: PropTypes.bool,
   customClass: PropTypes.shape({
     customListItem: PropTypes.string,
     customRadio: PropTypes.string,

package/es/MultiSelect/AdvancedGroupMultiSelect.js

@@ -17,7 +17,7 @@ import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
 import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
 
 /**** Icons ****/
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 /**** CSS ****/
 import style from './MultiSelect.module.css';
 

package/es/MultiSelect/AdvancedMultiSelect.js

@@ -14,7 +14,7 @@ import Popup from '../Popup/Popup';
 import TextBoxIcon from '../TextBoxIcon/TextBoxIcon';
 import { Container, Box } from '../Layout';
 import Card, { CardContent, CardHeader, CardFooter } from '../Card/Card';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 import { getUniqueId } from '../Provider/IdProvider';
 import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
 import { ResponsiveReceiver } from '../Responsive/CustomResponsive';

package/es/MultiSelect/MultiSelect.js

@@ -18,7 +18,7 @@ import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
 import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
 import Loader from '@zohodesk/svg/lib/Loader/Loader';
 /**** Icons ****/
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 /**** CSS ****/
 import style from './MultiSelect.module.css';
 
@@ -249,7 +249,8 @@ export class MultiSelectComponent extends React.Component {
     } = this.state;
     const {
       selectedOptions,
-      needLocalSearch
+      needLocalSearch,
+      keepSelectedOptions
     } = this.props;
     const {
       suggestions,
@@ -258,7 +259,8 @@ export class MultiSelectComponent extends React.Component {
       options,
       selectedOptions,
       searchStr: getSearchString(searchStr),
-      needSearch: needLocalSearch
+      needSearch: needLocalSearch,
+      keepSelectedOptions
     });
     this.suggestionsOrder = suggestionIds;
     return suggestions;
@@ -450,7 +452,8 @@ export class MultiSelectComponent extends React.Component {
   handleSelectOption(option, value, index, e) {
     const {
       selectedOptions,
-      isSearchClearOnSelect
+      isSearchClearOnSelect,
+      keepSelectedOptions
     } = this.props;
     const {
       searchStr
@@ -458,7 +461,15 @@ export class MultiSelectComponent extends React.Component {
     if (searchStr.trim() != '' && isSearchClearOnSelect) {
       this.handleSearch('');
     }
-    this.handleChange([...selectedOptions, option], e);
+    if (keepSelectedOptions && selectedOptions.indexOf(option) != -1) {
+      let newSelectedOptions = selectedOptions.filter(id => {
+        return id != option;
+      });
+      this.handleChange(newSelectedOptions, e);
+    } else {
+      this.handleChange([...selectedOptions, option], e);
+    }
+
     // e && e.stopPropagation && this.handlePopupClose(e);
   }
 
@@ -841,7 +852,8 @@ export class MultiSelectComponent extends React.Component {
       highLightedSelectOptions,
       options,
       isFetchingOptions,
-      isActive
+      isActive,
+      selectedOptionIds
     } = this.state;
     const suggestions = this.handleFilterSuggestions();
     const setAriaId = this.getNextAriaId();
@@ -985,6 +997,7 @@ export class MultiSelectComponent extends React.Component {
         needBorder: false,
         dataId: `${dataId}_Options`,
         palette: palette,
+        selectedOptions: selectedOptionIds,
         a11y: {
           role: 'option'
         }

package/es/MultiSelect/MultiSelectWithAvatar.js

@@ -1,3 +1,4 @@
+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 { MultiSelectWithAvatar_propTypes } from './props/propTypes';
@@ -20,7 +21,7 @@ import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
 import Loader from '@zohodesk/svg/lib/Loader/Loader';
 
 /**** Icons ****/
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 /**** CSS ****/
 import style from './MultiSelect.module.css';
 
@@ -99,8 +100,14 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       customChildrenClass,
       isBoxPaddingNeed,
       needEffect,
-      isLoading
+      isLoading,
+      keepSelectedOptions,
+      customProps
     } = this.props;
+    let {
+      TextBoxProps = {},
+      SuggestionsProps = {}
+    } = customProps;
     const {
       clearText = 'Clear all'
     } = i18nKeys;
@@ -119,7 +126,8 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       highLightedSelectOptions,
       options,
       isFetchingOptions,
-      isActive
+      isActive,
+      selectedOptionIds
     } = this.state;
     const suggestions = this.handleFilterSuggestions();
     const setAriaId = this.getNextAriaId();
@@ -183,7 +191,10 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       customClass: {
         customTBoxWrap: style.custmInputWrapper
       },
-      autoComplete: false
+      autoComplete: false,
+      customProps: {
+        TextBoxProps: TextBoxProps
+      }
     }, /*#__PURE__*/React.createElement(Container, {
       isCover: false,
       alignBox: "row",
@@ -245,7 +256,8 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
         shrink: true,
         customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',
         eleRef: this.suggestionContainerRef
-      }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, {
+      }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, _extends({
+        needTick: keepSelectedOptions,
         suggestions: suggestions,
         getRef: this.suggestionItemRef,
         hoverOption: hoverOption,
@@ -254,10 +266,11 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
         needBorder: false,
         dataId: `${dataId}_Options`,
         palette: palette,
+        selectedOptions: selectedOptionIds,
         a11y: {
           role: 'option'
         }
-      }) : /*#__PURE__*/React.createElement(EmptyState, {
+      }, SuggestionsProps)) : /*#__PURE__*/React.createElement(EmptyState, {
         isLoading: isFetchingOptions,
         options: options,
         searchString: searchStr,

package/es/MultiSelect/index.js

@@ -0,0 +1,4 @@
+export { default as MultiSelect } from './MultiSelect';
+export { default as MultiSelectWithAvatar } from './MultiSelectWithAvatar';
+export { default as AdvancedMultiSelect } from './AdvancedMultiSelect';
+export { default as AdvancedGroupMultiSelect } from './AdvancedGroupMultiSelect';

package/es/MultiSelect/props/defaultProps.js

@@ -106,7 +106,8 @@ export const MultiSelect_defaultProps = {
   needEffect: true,
   boxSize: 'default',
   isLoading: false,
-  dataSelectorId: 'multiSelect'
+  dataSelectorId: 'multiSelect',
+  keepSelectedOptions: false
 };
 export const MultiSelectHeader_defaultProps = {
   dataId: 'MultiSelectHeader'
@@ -138,7 +139,9 @@ export const MultiSelectWithAvatar_defaultProps = {
   isSearchClearOnSelect: true,
   needEffect: true,
   isLoading: false,
-  dataSelectorId: 'multiSelectWithAvatar'
+  dataSelectorId: 'multiSelectWithAvatar',
+  keepSelectedOptions: false,
+  customProps: {}
 };
 export const SelectedOptions_defaultProps = {
   size: 'medium'

package/es/MultiSelect/props/propTypes.js

@@ -239,7 +239,8 @@ export const MultiSelect_propTypes = {
   needEffect: PropTypes.bool,
   boxSize: PropTypes.string,
   isLoading: PropTypes.bool,
-  dataSelectorId: PropTypes.string
+  dataSelectorId: PropTypes.string,
+  keepSelectedOptions: PropTypes.bool
 };
 export const MultiSelectHeader_propTypes = {
   dataId: PropTypes.string,
@@ -294,6 +295,11 @@ export const MultiSelectWithAvatar_propTypes = {
   htmlId: PropTypes.string,
   isBoxPaddingNeed: PropTypes.bool,
   needEffect: PropTypes.bool,
+  keepSelectedOptions: PropTypes.bool,
+  customProps: PropTypes.shape({
+    SuggestionsProps: PropTypes.object,
+    DropBoxProps: PropTypes.object
+  }),
   /**** Popup props ****/
   isPopupOpen: PropTypes.bool,
   isPopupReady: PropTypes.bool,

package/es/PopOver/index.js

@@ -0,0 +1,3 @@
+export { default as PopOver } from './PopOver';
+export { PopOverTarget } from './PopOver';
+export { PopOverContainer } from './PopOver';

package/es/Provider/IdProvider.js

@@ -51,10 +51,11 @@ export function getUniqueId(Component, prefix) {
     callback
   });
 }
-let Provider = {
-  docs: {
-    componentGroup: 'Provider',
-    folderName: 'Functions'
-  }
-};
-export { Provider };
+
+// let Provider = {
+//   docs: {
+//     componentGroup: 'Provider',
+//     folderName: 'Functions'
+//   }
+// };
+// export { Provider };

package/es/Provider/index.js

@@ -0,0 +1,4 @@
+export { getLibraryConfig, setLibraryConfig } from './Config';
+export { default as LibraryContextProvider } from './LibraryContext';
+export { removeGlobalZIndexPrefix, setInitialZIndex, useZIndex, getZIndex } from './ZindexProvider';
+export { setGlobalIdPrefix, removeGlobalIdPrefix, useUniqueId, getUniqueId } from './IdProvider';

package/es/Responsive/index.js

@@ -1,8 +1,11 @@
-export * from './Responsive';
-let Responsive = {
-  docs: {
-    componentGroup: 'Layout',
-    folderName: 'Style Guide'
-  }
-};
-export { Responsive };
+export { ResponsiveSender as CustomResponsiveSender, ResponsiveReceiver as CustomResponsiveReceiver, useResponsiveReceiver as useCustomResponsiveReceiver } from './CustomResponsive';
+export { ResponsiveSender, ResponsiveReceiver, useResponsiveReceiver } from './Responsive';
+export { default as ResizeComponent } from './ResizeComponent';
+
+// let Responsive = {
+//   docs: {
+//     componentGroup: 'Layout',
+//     folderName: 'Style Guide'
+//   }
+// };
+// export { Responsive };

package/es/Select/GroupSelect.js

@@ -10,7 +10,7 @@ import Textbox from '../TextBox/TextBox';
 import Card, { CardHeader, CardContent, CardFooter } from '../Card/Card';
 import Suggestions from '../MultiSelect/Suggestions';
 import EmptyState from '../MultiSelect/EmptyState';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 import Loader from '@zohodesk/svg/lib/Loader/Loader';
 import DropDownHeading from '../DropDown/DropDownHeading';
 import { Container, Box } from '../Layout';

package/es/Select/Select.js

@@ -12,7 +12,7 @@ import Card, { CardHeader, CardContent, CardFooter } from '../Card/Card';
 import Suggestions from '../MultiSelect/Suggestions';
 import EmptyState from '../MultiSelect/EmptyState';
 import { getUniqueId } from '../Provider/IdProvider';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
 import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
 import Loader from '@zohodesk/svg/lib/Loader/Loader';

package/es/Select/SelectWithIcon.js

@@ -4,7 +4,7 @@ import { SelectWithIcon_propTypes } from './props/propTypes';
 /**** Components ****/
 import Popup from '../Popup/Popup';
 import TextBoxIcon from '../TextBoxIcon/TextBoxIcon';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 import ListItemWithIcon from '../ListItem/ListItemWithIcon';
 import Card, { CardHeader, CardContent } from '../Card/Card';
 import EmptyState from '../MultiSelect/EmptyState';

package/es/Select/index.js

@@ -0,0 +1,4 @@
+export { default as Select } from './Select';
+export { default as GroupSelect } from './GroupSelect';
+export { default as SelectWithAvatar } from './SelectWithAvatar';
+export { default as SelectWithIcon } from './SelectWithIcon';