@zohodesk/components 1.0.0-temp-134 → 1.0.0-temp-136

package/README.md

@@ -32,6 +32,12 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 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,
+      isMultiLineNeeded
     } = 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: isMultiLineNeeded ? style.multiLineValue : style.value
     }, value) : null, children ? /*#__PURE__*/React.createElement(Box, {
       shrink: true,
       adjust: true,

package/es/ListItem/ListItem.module.css

@@ -74,6 +74,10 @@
 .children {
   composes: dotted from '../common/common.module.css';
 }
+.multiLineValue{
+  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,
+      isMultiLineNeeded
     } = 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: isMultiLineNeeded ? 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,
+      isMultiLineNeeded
     } = 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: isMultiLineNeeded ? 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,
+      isMultiLineNeeded
     } = 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: isMultiLineNeeded ? 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,
+      isMultiLineNeeded
     } = 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: isMultiLineNeeded ? 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',
+  isMultiLineNeeded: false
 };
 export const ListItemDefaultProps = {
   active: false,
@@ -27,7 +28,8 @@ export const ListItemDefaultProps = {
   a11y: {},
   customClass: {},
   customProps: {},
-  dataSelectorId: 'listItem'
+  dataSelectorId: 'listItem',
+  isMultiLineNeeded: false
 };
 export const ListItemWithAvatarDefaultProps = {
   active: false,
@@ -44,7 +46,8 @@ export const ListItemWithAvatarDefaultProps = {
   a11y: {},
   customClass: {},
   customProps: {},
-  dataSelectorId: 'listItemWithAvatar'
+  dataSelectorId: 'listItemWithAvatar',
+  isMultiLineNeeded: false
 };
 export const ListItemWithCheckBoxDefaultProps = {
   active: false,
@@ -57,7 +60,8 @@ export const ListItemWithCheckBoxDefaultProps = {
   a11y: {},
   customClass: {},
   customProps: {},
-  dataSelectorId: 'listItemWithCheckBox'
+  dataSelectorId: 'listItemWithCheckBox',
+  isMultiLineNeeded: false
 };
 export const ListItemWithIconDefaultProps = {
   active: false,
@@ -73,7 +77,8 @@ export const ListItemWithIconDefaultProps = {
   a11y: {},
   customClass: '',
   customProps: {},
-  dataSelectorId: 'listItemWithIcon'
+  dataSelectorId: 'listItemWithIcon',
+  isMultiLineNeeded: false
 };
 export const ListItemWithRadioDefaultProps = {
   active: false,
@@ -87,5 +92,6 @@ export const ListItemWithRadioDefaultProps = {
   a11y: {},
   customClass: {},
   customProps: {},
-  dataSelectorId: 'listItemWithRadio'
+  dataSelectorId: 'listItemWithRadio',
+  isMultiLineNeeded: false
 };

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,8 +249,7 @@ export class MultiSelectComponent extends React.Component {
     } = this.state;
     const {
       selectedOptions,
-      needLocalSearch,
-      isNeedTick
+      needLocalSearch
     } = this.props;
     const {
       suggestions,
@@ -259,8 +258,7 @@ export class MultiSelectComponent extends React.Component {
       options,
       selectedOptions,
       searchStr: getSearchString(searchStr),
-      needSearch: needLocalSearch,
-      isNeedTick
+      needSearch: needLocalSearch
     });
     this.suggestionsOrder = suggestionIds;
     return suggestions;
@@ -452,8 +450,7 @@ export class MultiSelectComponent extends React.Component {
   handleSelectOption(option, value, index, e) {
     const {
       selectedOptions,
-      isSearchClearOnSelect,
-      isNeedTick
+      isSearchClearOnSelect
     } = this.props;
     const {
       searchStr
@@ -461,15 +458,7 @@ export class MultiSelectComponent extends React.Component {
     if (searchStr.trim() != '' && isSearchClearOnSelect) {
       this.handleSearch('');
     }
-    if (isNeedTick && selectedOptions.indexOf(option) != -1) {
-      let newSelectedOptions = selectedOptions.filter(id => {
-        return id != option;
-      });
-      this.handleChange(newSelectedOptions, e);
-    } else {
-      this.handleChange([...selectedOptions, option], e);
-    }
-
+    this.handleChange([...selectedOptions, option], e);
     // e && e.stopPropagation && this.handlePopupClose(e);
   }
 
@@ -852,8 +841,7 @@ export class MultiSelectComponent extends React.Component {
       highLightedSelectOptions,
       options,
       isFetchingOptions,
-      isActive,
-      selectedOptionIds
+      isActive
     } = this.state;
     const suggestions = this.handleFilterSuggestions();
     const setAriaId = this.getNextAriaId();
@@ -997,7 +985,6 @@ export class MultiSelectComponent extends React.Component {
         needBorder: false,
         dataId: `${dataId}_Options`,
         palette: palette,
-        selectedOptions: selectedOptionIds,
         a11y: {
           role: 'option'
         }

package/es/MultiSelect/MultiSelectWithAvatar.js

@@ -1,4 +1,3 @@
-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';
@@ -21,7 +20,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';
 
@@ -100,14 +99,8 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       customChildrenClass,
       isBoxPaddingNeed,
       needEffect,
-      isLoading,
-      isNeedTick,
-      customProps
+      isLoading
     } = this.props;
-    let {
-      TextBoxProps = {},
-      SuggestionsProps = {}
-    } = customProps;
     const {
       clearText = 'Clear all'
     } = i18nKeys;
@@ -126,8 +119,7 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       highLightedSelectOptions,
       options,
       isFetchingOptions,
-      isActive,
-      selectedOptionIds
+      isActive
     } = this.state;
     const suggestions = this.handleFilterSuggestions();
     const setAriaId = this.getNextAriaId();
@@ -191,10 +183,7 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       customClass: {
         customTBoxWrap: style.custmInputWrapper
       },
-      autoComplete: false,
-      customProps: {
-        TextBoxProps: TextBoxProps
-      }
+      autoComplete: false
     }, /*#__PURE__*/React.createElement(Container, {
       isCover: false,
       alignBox: "row",
@@ -256,8 +245,7 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
         shrink: true,
         customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',
         eleRef: this.suggestionContainerRef
-      }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, _extends({
-        needTick: isNeedTick,
+      }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, {
         suggestions: suggestions,
         getRef: this.suggestionItemRef,
         hoverOption: hoverOption,
@@ -266,11 +254,10 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
         needBorder: false,
         dataId: `${dataId}_Options`,
         palette: palette,
-        selectedOptions: selectedOptionIds,
         a11y: {
           role: 'option'
         }
-      }, SuggestionsProps)) : /*#__PURE__*/React.createElement(EmptyState, {
+      }) : /*#__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,8 +106,7 @@ export const MultiSelect_defaultProps = {
   needEffect: true,
   boxSize: 'default',
   isLoading: false,
-  dataSelectorId: 'multiSelect',
-  isNeedTick: false
+  dataSelectorId: 'multiSelect'
 };
 export const MultiSelectHeader_defaultProps = {
   dataId: 'MultiSelectHeader'
@@ -139,9 +138,7 @@ export const MultiSelectWithAvatar_defaultProps = {
   isSearchClearOnSelect: true,
   needEffect: true,
   isLoading: false,
-  dataSelectorId: 'multiSelectWithAvatar',
-  isNeedTick: false,
-  customProps: {}
+  dataSelectorId: 'multiSelectWithAvatar'
 };
 export const SelectedOptions_defaultProps = {
   size: 'medium'

package/es/MultiSelect/props/propTypes.js

@@ -239,8 +239,7 @@ export const MultiSelect_propTypes = {
   needEffect: PropTypes.bool,
   boxSize: PropTypes.string,
   isLoading: PropTypes.bool,
-  dataSelectorId: PropTypes.string,
-  isNeedTick: PropTypes.bool
+  dataSelectorId: PropTypes.string
 };
 export const MultiSelectHeader_propTypes = {
   dataId: PropTypes.string,
@@ -295,11 +294,6 @@ export const MultiSelectWithAvatar_propTypes = {
   htmlId: PropTypes.string,
   isBoxPaddingNeed: PropTypes.bool,
   needEffect: PropTypes.bool,
-  isNeedTick: 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';

package/es/Tab/Tab.module.css

@@ -1,6 +1,5 @@
 .tab {
   text-transform: uppercase;
-  composes: offSelection from '../common/common.module.css';
   letter-spacing: 0.6px;
   text-decoration: none;
   cursor: pointer;

package/es/Tab/Tabs.js

@@ -15,7 +15,7 @@ import { remConvert, getTotalDimension, cs, bind, throttle } from '../utils/Comm
 import { Box, Container } from '../Layout';
 import ResizeObserver from '../Responsive/ResizeObserver';
 import ListItem from '../ListItem/ListItem';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 import tabsStyle from './Tabs.module.css';
 import Popup from '../Popup/Popup';
 import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';

package/es/Tab/Tabs.module.css

@@ -1,6 +1,5 @@
 .tab {
   position: relative;
-  composes: offSelection from '../common/common.module.css';
   z-index: 1;
   --tab_position_gap: var(--zd_size22);
 }

package/es/Tag/Tag.js

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 import Avatar from '../Avatar/Avatar';
 import { Container } from '../Layout';
 import Button from '../semantic/Button/Button';

package/es/TextBoxIcon/TextBoxIcon.js

@@ -4,7 +4,7 @@ import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 import TextBox from '../TextBox/TextBox';
 import { Container, Box } from '../Layout';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 import btnStyle from '../semantic/Button/semanticButton.module.css';
 import style from './TextBoxIcon.module.css';
 /* eslint-disable react/forbid-component-props */

package/es/VelocityAnimation/index.js

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