@zohodesk/components 1.0.0-temp-199.20 → 1.0.0-temp-248

package/README.md

@@ -2,6 +2,16 @@
 
 Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development across projects.
 
+# 1.5.7 
+- **InputFieldline**  
+ - changed the handling of conditional logic for padding and size properties.
+
+- **TextBoxIcon**  
+ - added support for `InputFieldLineProps` via the customProps object.
+
+- **Select**  
+ - Removed the size prop from InputFieldLine usage, as it is unused.
+
 # 1.5.6
 
 - **ListItemWithRadio, ListItemWithCheckBox**

package/es/ListItem/ListItem.module.css

@@ -1,4 +1,3 @@
-/* css:lineheight-validation:ignore */
 .varClass {
   /* listitem default variables */
   --listitem_font_size: var(--zd_font_size13);
@@ -16,14 +15,9 @@
 
   /* listitem tick icon default variables */
   --listitem_tickicon_color: var(--zdt_listitem_default_tickicon);
-
-  /* multiLine value for list item */
-  --listitem_multiline_lineheight: 1.5385;
-}
-[dir=ltr] .varClass {
+}[dir=ltr] .varClass {
   --listitem_avatar_margin: 0 var(--zd_size15) 0 0;
-}
-[dir=rtl] .varClass {
+}[dir=rtl] .varClass {
   --listitem_avatar_margin: 0 0 0 var(--zd_size15);
 }
 .list {
@@ -82,9 +76,8 @@
 [dir=rtl] .beforeChild{
   margin-left: var(--zd_size10) ;
 }
-/* css:lineheight-validation:ignore */
 .value, .multiLineValue {
-  line-height: var(--listitem_multiline_lineheight);
+  line-height: 1.5385;
 }
 .multiLineValue,.multiLine{
  composes: lineClamp from '../common/common.module.css';
@@ -130,8 +123,7 @@
 .lhsBox_medium,
 .lhsBox_large{
   composes: varClass;
-  /* --listitem_doubleline_content_height: calc(var(--listitem_font_size) * 2 ); */
-  --listitem_doubleline_content_height: calc((var(--listitem_font_size) * var(--listitem_multiline_lineheight)) * 2 );
+  --listitem_doubleline_content_height: calc(var(--listitem_font_size) * 2 );
   height: 100% ;
   composes: dflex alignVertical from '../common/common.module.css';
 }

package/es/MultiSelect/AdvancedGroupMultiSelect.js

@@ -889,12 +889,8 @@ class AdvancedGroupMultiSelect extends React.Component {
       autoComplete,
       getTargetRef,
       isFocus,
-      limit,
-      customProps
+      limit
     } = this.props;
-    const {
-      SuggestionsProps = {}
-    } = customProps;
     let {
       clearText = MULTISELECT_I18N_KEYS.clearText,
       limitReachedMessage = MULTISELECT_I18N_KEYS.limitReachedMessage
@@ -1063,7 +1059,7 @@ class AdvancedGroupMultiSelect extends React.Component {
           a11y: {
             role: 'heading'
           }
-        })), /*#__PURE__*/React.createElement(Suggestions, { ...SuggestionsProps,
+        })), /*#__PURE__*/React.createElement(Suggestions, {
           suggestions: suggestions,
           selectedOptions: selectedOptionIds,
           getRef: this.suggestionItemRef,

package/es/MultiSelect/MultiSelect.js

@@ -1095,9 +1095,9 @@ export class MultiSelectComponent extends React.Component {
       isLoading,
       selectAllText,
       needSelectAll,
+      customProps,
       isVirtualizerEnabled,
-      limit,
-      customProps
+      limit
     } = this.props;
     const {
       selectedOptions,

package/es/MultiSelect/Suggestions.js

@@ -193,23 +193,18 @@ export default class Suggestions extends React.PureComponent {
       htmlId,
       a11y,
       getVirtualizerPublicMethods,
-      setVirtualizerContainerRefFunction,
-      customClass
+      setVirtualizerContainerRefFunction
     } = this.props;
     const {
       ariaParentRole,
       ariaMultiselectable
     } = a11y;
-    const {
-      containerClass = ''
-    } = customClass;
     return /*#__PURE__*/React.createElement(Container, {
       isCover: false,
       role: ariaParentRole,
       id: htmlId,
       tabindex: "0",
-      "aria-multiselectable": ariaMultiselectable,
-      className: containerClass
+      "aria-multiselectable": ariaMultiselectable
     }, /*#__PURE__*/React.createElement(Box, {
       dataId: `${dataId}`,
       className: className ? className : ''

package/es/MultiSelect/props/defaultProps.js

@@ -38,7 +38,6 @@ export const AdvancedGroupMultiSelect_defaultProps = {
   palette: 'default',
   isLoading: false,
   dataSelectorId: 'advancedGroupMultiSelect',
-  customProps: {},
   allowValueFallback: true
 };
 export const AdvancedMultiSelect_defaultProps = {
@@ -170,6 +169,5 @@ export const SelectedOptions_defaultProps = {
 export const Suggestions_defaultProps = {
   a11y: {},
   isVirtualizerEnabled: false,
-  customClass: {},
   needMultiLineText: false
 };

package/es/MultiSelect/props/propTypes.js

@@ -114,8 +114,7 @@ export const MultiSelect_propTypes = {
   setAriaId: PropTypes.string,
   ariaErrorId: PropTypes.string,
   customProps: PropTypes.shape({
-    TextBoxIconProps: PropTypes.object,
-    SuggestionsProps: PropTypes.object
+    TextBoxIconProps: PropTypes.object
   }),
   isFocus: PropTypes.bool,
   allowValueFallback: PropTypes.bool,
@@ -200,11 +199,7 @@ export const Suggestions_propTypes = {
   })),
   renderBeforeChildren: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
   limit: PropTypes.number,
-  limitReachedMessage: PropTypes.string,
-  customClass: PropTypes.shape({
-    containerClass: PropTypes.string
-  }),
-  needMultiLineText: PropTypes.bool
+  limitReachedMessage: PropTypes.string
 };
 export const AdvancedGroupMultiSelect_propTypes = {
   animationStyle: PropTypes.string,
@@ -278,10 +273,7 @@ export const AdvancedGroupMultiSelect_propTypes = {
   dataSelectorId: PropTypes.string,
   isFocus: PropTypes.bool,
   allowValueFallback: PropTypes.bool,
-  limit: PropTypes.number,
-  customProps: PropTypes.shape({
-    SuggestionsProps: PropTypes.object
-  })
+  limit: PropTypes.number
 };
 export const AdvancedMultiSelect_propTypes = { ...MultiSelect_propTypes,
   selectedOptionDetails: PropTypes.string,

package/es/Select/GroupSelect.js

@@ -623,7 +623,7 @@ export class GroupSelectComponent extends PureComponent {
     let {
       TextBoxIconProps = {},
       TextBoxProps = {},
-      SuggestionsProps = {}
+      SuggestionsProps
     } = customProps;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${iconOnHover && (isReadOnly || isDisabled) ? style.iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? style.iconOnHoverStyle : ''}`,

package/es/Select/Select.js

@@ -835,7 +835,8 @@ export class SelectComponent extends Component {
       TextBoxProps = {},
       DropdownSearchTextBoxProps = {},
       SuggestionsProps = {},
-      TextBoxIconProps = {}
+      TextBoxIconProps = {},
+      InputFieldLineProps = {}
     } = customProps;
     const inputFieldLineA11yAttributes = this.getInputFieldLineA11y({
       setAriaId,
@@ -855,14 +856,15 @@ export class SelectComponent extends Component {
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`
     }, isRenderable(renderCustomSelectedValue) ? /*#__PURE__*/React.createElement(InputFieldLine, {
-      isActive: isPopupReady,
       border: needBorder ? 'bottom' : 'none',
+      hasPadding: true,
+      ...InputFieldLineProps,
+      isActive: isPopupReady,
       size: size,
       borderColor: borderColor,
       isDisabled: isDisabled,
       isReadOnly: isReadOnly,
       onKeyDown: this.handleKeyDown,
-      hasPadding: true,
       a11yAttributes: inputFieldLineA11yAttributes
     }, renderNode(renderCustomSelectedValue, {
       isDisabled,

package/es/Select/SelectWithAvatar.js

@@ -169,8 +169,8 @@ class SelectWithAvatarComponent extends SelectComponent {
       needEffect,
       isLoading,
       dataSelectorId,
-      getTargetRef,
-      customProps
+      customProps,
+      getTargetRef
     } = this.props;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
@@ -195,7 +195,7 @@ class SelectWithAvatarComponent extends SelectComponent {
     let {
       TextBoxProps,
       DropdownSearchTextBoxProps,
-      SuggestionsProps = {}
+      SuggestionsProps
     } = customProps;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.wrapper}  ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''} ${className ? className : ''}`,

package/es/Select/SelectWithIcon.js

@@ -357,8 +357,7 @@ class SelectWithIcon extends Component {
       htmlId,
       isLoading,
       dataSelectorId,
-      customProps,
-      customClass
+      customProps
     } = this.props;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
@@ -376,11 +375,8 @@ class SelectWithIcon extends Component {
       TextBoxProps = {},
       DropdownSearchTextBoxProps = {},
       TextBoxIconProps = {},
-      ListItemProps = {}
+      ListItemProps
     } = customProps;
-    const {
-      dropBoxClass = ''
-    } = customClass;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''}`,
       "data-title": isDisabled ? title : null,
@@ -477,10 +473,7 @@ class SelectWithIcon extends Component {
         size: boxSize,
         isPadding: false,
         isResponsivePadding: true,
-        alignBox: "row",
-        customClass: {
-          customDropBox: dropBoxClass
-        }
+        alignBox: "row"
       }, isLoading ? /*#__PURE__*/React.createElement(Container, {
         align: "both",
         className: style.loader

package/es/Select/__tests__/Select.spec.js

@@ -962,6 +962,11 @@ describe('Select snapshot - ', () => {
         },
         listItemProps: {
           'data-custom-listitem-attr': 'true'
+        },
+        InputFieldLineProps: {
+          tagAttributes: {
+            'data-custom-attr': 'true'
+          }
         }
       }
     }));

package/es/Select/props/defaultProps.js

@@ -102,8 +102,7 @@ export const SelectWithAvatar_defaultProps = {
   i18nKeys: {},
   customProps: {},
   needEffect: true,
-  isLoading: false,
-  customProps: {}
+  isLoading: false
 };
 export const SelectWithIcon_defaultProps = {
   isReadOnly: false,
@@ -132,6 +131,5 @@ export const SelectWithIcon_defaultProps = {
   isLoading: false,
   isAbsolutePositioningNeeded: true,
   isRestrictScroll: false,
-  customProps: {},
-  customClass: {}
+  customProps: {}
 };

package/es/Select/props/propTypes.js

@@ -87,7 +87,8 @@ export const Select_propTypes = {
     TextBoxIconProps: PropTypes.object,
     DropdownSearchTextBoxProps: PropTypes.object,
     listItemProps: PropTypes.object,
-    SuggestionsProps: PropTypes.object
+    SuggestionsProps: PropTypes.object,
+    InputFieldLineProps: PropTypes.object
   }),
   isLoading: PropTypes.bool,
   dataSelectorId: PropTypes.string,
@@ -186,8 +187,7 @@ export const GroupSelect_propTypes = {
   isDefaultSelectValue: PropTypes.bool,
   customProps: PropTypes.shape({
     TextBoxProps: PropTypes.object,
-    TextBoxIconProps: PropTypes.object,
-    SuggestionsProps: PropTypes.object
+    TextBoxIconProps: PropTypes.object
   }),
   allowValueFallback: PropTypes.bool
 };
@@ -250,10 +250,7 @@ export const SelectWithAvatar_propTypes = { ...Select_propTypes,
   htmlId: PropTypes.string,
   needEffect: PropTypes.bool,
   isLoading: PropTypes.bool,
-  dataSelectorId: PropTypes.string,
-  customProps: PropTypes.shape({
-    SuggestionsProps: PropTypes.object
-  })
+  dataSelectorId: PropTypes.string
 };
 export const SelectWithIcon_propTypes = {
   animationStyle: PropTypes.oneOf(['default', 'bounce']),
@@ -318,10 +315,6 @@ export const SelectWithIcon_propTypes = {
     TextBoxProps: PropTypes.object,
     DropdownSearchTextBoxProps: PropTypes.object,
     SuggestionsProps: PropTypes.object,
-    TextBoxIconProps: PropTypes.object,
-    ListItemProps: PropTypes.object
-  }),
-  customClass: PropTypes.shape({
-    dropBoxClass: PropTypes.string
+    TextBoxIconProps: PropTypes.object
   })
 };

package/es/TextBoxIcon/TextBoxIcon.js

@@ -130,7 +130,6 @@ export default class TextBoxIcon extends React.Component {
     return /*#__PURE__*/React.createElement(InputFieldLine, {
       isActive: isActive || isFocus,
       border: needBorder ? 'bottom' : 'none',
-      size: size,
       borderColor: borderColor,
       hasEffect: needEffect,
       isDisabled: isDisabled,

package/es/common/common.module.css

@@ -501,7 +501,7 @@
 }
 .lineClamp {
   composes: wbreak clamp;
-  -webkit-line-clamp: var(--line-clamp, 3);
+  -webkit-line-clamp: var(--line-clamp,2);
 }
 
 .offSelection {

package/es/shared/InputFieldLine/InputFieldLine.js

@@ -36,7 +36,8 @@ function InputFieldLine(props) {
     dataId: dataId,
     onClick: onClick,
     onKeyDown: onKeyDown,
-    className: `${style.varClass} ${style.customContainer} ${hasPadding ? style[size] : ''} ${borderClass} ${isDisabled ? style.disabled : isReadOnly ? hasEffect ? style.effect : style.readonly : style.effect} ${border !== 'none' ? `${borderColorClass} ${style.hasBorder}` : ''} ${isActive && !(isDisabled || isReadOnly) ? style.active : ''}  ${customClass}`
+    scroll: !!size ? 'vertical' : undefined,
+    className: `${style.varClass} ${style.customContainer} ${!!size ? style[size] : ''} ${hasPadding ? style[`padding_${size}`] : ''} ${borderClass} ${isDisabled ? style.disabled : isReadOnly ? hasEffect ? style.effect : style.readonly : style.effect} ${border !== 'none' ? `${borderColorClass} ${style.hasBorder}` : ''} ${isActive && !(isDisabled || isReadOnly) ? style.active : ''}  ${customClass}`
   }, children);
 }
 

package/es/shared/InputFieldLine/InputFieldLine.module.css

@@ -6,12 +6,12 @@
 }
 
 .customContainer {
-    composes: oflowy from '../../common/common.module.css';
     cursor: var(--local_cursor);
     border-color: var(--local_inputFieldLine_border_color);
 }
 
-.disabled,.readonly {
+.disabled,
+.readonly {
     --local_cursor: not-allowed;
 }
 
@@ -57,28 +57,34 @@
     border-style: solid;
 }
 
+.padding_small,
+.padding_xmedium {
+    --local_padding: var(--zd_size3);
+}
+
+.padding_medium,
+.padding_large {
+    --local_padding: var(--zd_size8);
+}
+
 .xmedium {
     min-height: var(--zd_size30) ;
-    --local_padding: var(--zd_size3);
 }
 
 .small {
     max-height: var(--zd_size200) ;
-    --local_padding: var(--zd_size3);
 }
 
 .medium {
     max-height: var(--zd_size350) ;
-    --local_padding: var(--zd_size8);
 }
 
 .large {
     max-height: var(--zd_size400) ;
-    --local_padding: var(--zd_size8);
 }
 
 .border_bottom {
-    border-width:  0 0 var(--local_inputFieldLine_border_width) 0;
+    border-width: 0 0 var(--local_inputFieldLine_border_width) 0;
     padding-bottom: var(--local_padding);
 }
 

package/es/v1/DropBox/DropBoxElement/DropBoxElement.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import useDropboxPosCalc from "../../../DropBox/DropBoxElement/useDropboxPosCalc";
 import cssJSLogic from "../../../DropBox/DropBoxElement/css/cssJSLogic";
-import { positionMapping } from "../../../DropBox/DropBoxPositionMapping.js";
+import { positionMapping } from '@zohodesk/dotkit/es/react/components/Popup/utils/positioning';
 import { DropBoxElementDefaultProps } from "./props/defaultProps";
 import { DropBoxElementPropTypes } from "./props/propTypes";
 import { mergeStyle } from '@zohodesk/utils';

package/lib/ListItem/ListItem.module.css

@@ -1,4 +1,3 @@
-/* css:lineheight-validation:ignore */
 .varClass {
   /* listitem default variables */
   --listitem_font_size: var(--zd_font_size13);
@@ -16,14 +15,9 @@
 
   /* listitem tick icon default variables */
   --listitem_tickicon_color: var(--zdt_listitem_default_tickicon);
-
-  /* multiLine value for list item */
-  --listitem_multiline_lineheight: 1.5385;
-}
-[dir=ltr] .varClass {
+}[dir=ltr] .varClass {
   --listitem_avatar_margin: 0 var(--zd_size15) 0 0;
-}
-[dir=rtl] .varClass {
+}[dir=rtl] .varClass {
   --listitem_avatar_margin: 0 0 0 var(--zd_size15);
 }
 .list {
@@ -82,9 +76,8 @@
 [dir=rtl] .beforeChild{
   margin-left: var(--zd_size10) ;
 }
-/* css:lineheight-validation:ignore */
 .value, .multiLineValue {
-  line-height: var(--listitem_multiline_lineheight);
+  line-height: 1.5385;
 }
 .multiLineValue,.multiLine{
  composes: lineClamp from '../common/common.module.css';
@@ -130,8 +123,7 @@
 .lhsBox_medium,
 .lhsBox_large{
   composes: varClass;
-  /* --listitem_doubleline_content_height: calc(var(--listitem_font_size) * 2 ); */
-  --listitem_doubleline_content_height: calc((var(--listitem_font_size) * var(--listitem_multiline_lineheight)) * 2 );
+  --listitem_doubleline_content_height: calc(var(--listitem_font_size) * 2 );
   height: 100% ;
   composes: dflex alignVertical from '../common/common.module.css';
 }

package/lib/MultiSelect/AdvancedGroupMultiSelect.js

@@ -55,8 +55,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-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); }
-
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -981,10 +979,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
           autoComplete = _this$props9.autoComplete,
           getTargetRef = _this$props9.getTargetRef,
           isFocus = _this$props9.isFocus,
-          limit = _this$props9.limit,
-          customProps = _this$props9.customProps;
-      var _customProps$Suggesti = customProps.SuggestionsProps,
-          SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti;
+          limit = _this$props9.limit;
       var _i18nKeys = i18nKeys,
           _i18nKeys$clearText = _i18nKeys.clearText,
           clearText = _i18nKeys$clearText === void 0 ? _constants.MULTISELECT_I18N_KEYS.clearText : _i18nKeys$clearText,
@@ -1150,7 +1145,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
             a11y: {
               role: 'heading'
             }
-          })), /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({}, SuggestionsProps, {
+          })), /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
             suggestions: suggestions,
             selectedOptions: selectedOptionIds,
             getRef: _this5.suggestionItemRef,
@@ -1165,7 +1160,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
             limit: limit,
             limitReachedMessage: limitReachedMessage,
             dataId: "".concat(dataId, "_Options")
-          })));
+          }));
         }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
           options: revampedGroups,
           searchString: searchStr,

package/lib/MultiSelect/MultiSelect.js

@@ -1171,9 +1171,9 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           isLoading = _this$props15.isLoading,
           selectAllText = _this$props15.selectAllText,
           needSelectAll = _this$props15.needSelectAll,
+          customProps = _this$props15.customProps,
           isVirtualizerEnabled = _this$props15.isVirtualizerEnabled,
-          limit = _this$props15.limit,
-          customProps = _this$props15.customProps;
+          limit = _this$props15.limit;
       var _this$state9 = this.state,
           selectedOptions = _this$state9.selectedOptions,
           searchStr = _this$state9.searchStr,

package/lib/MultiSelect/Suggestions.js

@@ -247,19 +247,15 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
           htmlId = _this$props2.htmlId,
           a11y = _this$props2.a11y,
           getVirtualizerPublicMethods = _this$props2.getVirtualizerPublicMethods,
-          setVirtualizerContainerRefFunction = _this$props2.setVirtualizerContainerRefFunction,
-          customClass = _this$props2.customClass;
+          setVirtualizerContainerRefFunction = _this$props2.setVirtualizerContainerRefFunction;
       var ariaParentRole = a11y.ariaParentRole,
           ariaMultiselectable = a11y.ariaMultiselectable;
-      var _customClass$containe = customClass.containerClass,
-          containerClass = _customClass$containe === void 0 ? '' : _customClass$containe;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         isCover: false,
         role: ariaParentRole,
         id: htmlId,
         tabindex: "0",
-        "aria-multiselectable": ariaMultiselectable,
-        className: containerClass
+        "aria-multiselectable": ariaMultiselectable
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         dataId: "".concat(dataId),
         className: className ? className : ''

package/lib/MultiSelect/props/defaultProps.js

@@ -46,7 +46,6 @@ var AdvancedGroupMultiSelect_defaultProps = {
   palette: 'default',
   isLoading: false,
   dataSelectorId: 'advancedGroupMultiSelect',
-  customProps: {},
   allowValueFallback: true
 };
 exports.AdvancedGroupMultiSelect_defaultProps = AdvancedGroupMultiSelect_defaultProps;
@@ -185,7 +184,6 @@ exports.SelectedOptions_defaultProps = SelectedOptions_defaultProps;
 var Suggestions_defaultProps = {
   a11y: {},
   isVirtualizerEnabled: false,
-  customClass: {},
   needMultiLineText: false
 };
 exports.Suggestions_defaultProps = Suggestions_defaultProps;

package/lib/MultiSelect/props/propTypes.js

@@ -133,8 +133,7 @@ var MultiSelect_propTypes = {
   setAriaId: _propTypes["default"].string,
   ariaErrorId: _propTypes["default"].string,
   customProps: _propTypes["default"].shape({
-    TextBoxIconProps: _propTypes["default"].object,
-    SuggestionsProps: _propTypes["default"].object
+    TextBoxIconProps: _propTypes["default"].object
   }),
   isFocus: _propTypes["default"].bool,
   allowValueFallback: _propTypes["default"].bool,
@@ -190,8 +189,7 @@ var SelectedOptions_propTypes = {
   limit: _propTypes["default"].number
 };
 exports.SelectedOptions_propTypes = SelectedOptions_propTypes;
-
-var Suggestions_propTypes = _defineProperty({
+var Suggestions_propTypes = {
   a11y: _propTypes["default"].shape({
     ariaParentRole: _propTypes["default"].string,
     ariaMultiselectable: _propTypes["default"].bool
@@ -225,12 +223,8 @@ var Suggestions_propTypes = _defineProperty({
   })),
   renderBeforeChildren: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].node]),
   limit: _propTypes["default"].number,
-  limitReachedMessage: _propTypes["default"].string,
-  customClass: _propTypes["default"].shape({
-    containerClass: _propTypes["default"].string
-  })
-}, "needMultiLineText", _propTypes["default"].bool);
-
+  limitReachedMessage: _propTypes["default"].string
+};
 exports.Suggestions_propTypes = Suggestions_propTypes;
 var AdvancedGroupMultiSelect_propTypes = (_AdvancedGroupMultiSe = {
   animationStyle: _propTypes["default"].string,
@@ -301,9 +295,7 @@ var AdvancedGroupMultiSelect_propTypes = (_AdvancedGroupMultiSe = {
   needToCloseOnSelect: _propTypes["default"].func,
   searchStr: _propTypes["default"].string,
   children: _propTypes["default"].node
-}, _defineProperty(_AdvancedGroupMultiSe, "dataSelectorId", _propTypes["default"].string), _defineProperty(_AdvancedGroupMultiSe, "isFocus", _propTypes["default"].bool), _defineProperty(_AdvancedGroupMultiSe, "allowValueFallback", _propTypes["default"].bool), _defineProperty(_AdvancedGroupMultiSe, "limit", _propTypes["default"].number), _defineProperty(_AdvancedGroupMultiSe, "customProps", _propTypes["default"].shape({
-  SuggestionsProps: _propTypes["default"].object
-})), _AdvancedGroupMultiSe);
+}, _defineProperty(_AdvancedGroupMultiSe, "dataSelectorId", _propTypes["default"].string), _defineProperty(_AdvancedGroupMultiSe, "isFocus", _propTypes["default"].bool), _defineProperty(_AdvancedGroupMultiSe, "allowValueFallback", _propTypes["default"].bool), _defineProperty(_AdvancedGroupMultiSe, "limit", _propTypes["default"].number), _AdvancedGroupMultiSe);
 exports.AdvancedGroupMultiSelect_propTypes = AdvancedGroupMultiSelect_propTypes;
 
 var AdvancedMultiSelect_propTypes = _objectSpread(_objectSpread({}, MultiSelect_propTypes), {}, {

package/lib/Select/GroupSelect.js

@@ -700,8 +700,7 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
           TextBoxIconProps = _customProps$TextBoxI === void 0 ? {} : _customProps$TextBoxI,
           _customProps$TextBoxP = customProps.TextBoxProps,
           TextBoxProps = _customProps$TextBoxP === void 0 ? {} : _customProps$TextBoxP,
-          _customProps$Suggesti = customProps.SuggestionsProps,
-          SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti;
+          SuggestionsProps = customProps.SuggestionsProps;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_SelectModule["default"].container, " ").concat(_SelectModule["default"]["box_".concat(size)], " ").concat(isReadOnly ? _SelectModule["default"].readonly : '', " ").concat(borderColor === 'transparent' ? _SelectModule["default"].transparentContainer : '', " ").concat(iconOnHover && (isReadOnly || isDisabled) ? _SelectModule["default"].iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? _SelectModule["default"].iconOnHoverStyle : ''),
         "data-id": dataIdSlctComp,

package/lib/Select/Select.js

@@ -885,7 +885,9 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           _customProps$Suggesti = customProps.SuggestionsProps,
           SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti,
           _customProps$TextBoxI = customProps.TextBoxIconProps,
-          TextBoxIconProps = _customProps$TextBoxI === void 0 ? {} : _customProps$TextBoxI;
+          TextBoxIconProps = _customProps$TextBoxI === void 0 ? {} : _customProps$TextBoxI,
+          _customProps$InputFie = customProps.InputFieldLineProps,
+          InputFieldLineProps = _customProps$InputFie === void 0 ? {} : _customProps$InputFie;
       var inputFieldLineA11yAttributes = this.getInputFieldLineA11y({
         setAriaId: setAriaId,
         isReadOnly: isReadOnly,
@@ -903,17 +905,18 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
         ref: getTargetRef,
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
         "data-test-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId)
-      }, (0, _utils.isRenderable)(renderCustomSelectedValue) ? /*#__PURE__*/_react["default"].createElement(_InputFieldLine["default"], {
-        isActive: isPopupReady,
+      }, (0, _utils.isRenderable)(renderCustomSelectedValue) ? /*#__PURE__*/_react["default"].createElement(_InputFieldLine["default"], _extends({
         border: needBorder ? 'bottom' : 'none',
+        hasPadding: true
+      }, InputFieldLineProps, {
+        isActive: isPopupReady,
         size: size,
         borderColor: borderColor,
         isDisabled: isDisabled,
         isReadOnly: isReadOnly,
         onKeyDown: this.handleKeyDown,
-        hasPadding: true,
         a11yAttributes: inputFieldLineA11yAttributes
-      }, (0, _utils.renderNode)(renderCustomSelectedValue, {
+      }), (0, _utils.renderNode)(renderCustomSelectedValue, {
         isDisabled: isDisabled,
         isPopupOpen: isPopupOpen,
         isReadOnly: isReadOnly,

package/lib/Select/SelectWithAvatar.js

@@ -221,8 +221,8 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           needEffect = _this$props.needEffect,
           isLoading = _this$props.isLoading,
           dataSelectorId = _this$props.dataSelectorId,
-          getTargetRef = _this$props.getTargetRef,
-          customProps = _this$props.customProps;
+          customProps = _this$props.customProps,
+          getTargetRef = _this$props.getTargetRef;
       i18nKeys = Object.assign({}, i18nKeys, {
         emptyText: i18nKeys.emptyText || emptyMessage,
         searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
@@ -245,8 +245,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
       var ariaErrorId = this.getNextAriaId();
       var TextBoxProps = customProps.TextBoxProps,
           DropdownSearchTextBoxProps = customProps.DropdownSearchTextBoxProps,
-          _customProps$Suggesti = customProps.SuggestionsProps,
-          SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti;
+          SuggestionsProps = customProps.SuggestionsProps;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_MultiSelectModule["default"].wrapper, "  ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(isReadOnly ? _MultiSelectModule["default"].readOnly : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : '', " ").concat(className ? className : ''),
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),

package/lib/Select/SelectWithIcon.js

@@ -431,8 +431,7 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
           htmlId = _this$props7.htmlId,
           isLoading = _this$props7.isLoading,
           dataSelectorId = _this$props7.dataSelectorId,
-          customProps = _this$props7.customProps,
-          customClass = _this$props7.customClass;
+          customProps = _this$props7.customProps;
       i18nKeys = Object.assign({}, i18nKeys, {
         emptyText: i18nKeys.emptyText || emptyMessage,
         searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
@@ -450,10 +449,7 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
           DropdownSearchTextBoxProps = _customProps$Dropdown === void 0 ? {} : _customProps$Dropdown,
           _customProps$TextBoxI = customProps.TextBoxIconProps,
           TextBoxIconProps = _customProps$TextBoxI === void 0 ? {} : _customProps$TextBoxI,
-          _customProps$ListItem = customProps.ListItemProps,
-          ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem;
-      var _customClass$dropBoxC = customClass.dropBoxClass,
-          dropBoxClass = _customClass$dropBoxC === void 0 ? '' : _customClass$dropBoxC;
+          ListItemProps = customProps.ListItemProps;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_SelectModule["default"].container, " ").concat(_SelectModule["default"]["box_".concat(size)], " ").concat(isReadOnly ? _SelectModule["default"].readonly : '', " ").concat(borderColor === 'transparent' ? _SelectModule["default"].transparentContainer : ''),
         "data-title": isDisabled ? title : null,
@@ -546,10 +542,7 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
           size: boxSize,
           isPadding: false,
           isResponsivePadding: true,
-          alignBox: "row",
-          customClass: {
-            customDropBox: dropBoxClass
-          }
+          alignBox: "row"
         }, isLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
           align: "both",
           className: _SelectModule["default"].loader

package/lib/Select/__tests__/Select.spec.js

@@ -1203,6 +1203,11 @@ describe('Select snapshot - ', function () {
         },
         listItemProps: {
           'data-custom-listitem-attr': 'true'
+        },
+        InputFieldLineProps: {
+          tagAttributes: {
+            'data-custom-attr': 'true'
+          }
         }
       }
     })),

package/lib/Select/props/defaultProps.js

@@ -91,8 +91,7 @@ var GroupSelect_defaultProps = {
   allowValueFallback: true
 };
 exports.GroupSelect_defaultProps = GroupSelect_defaultProps;
-
-var SelectWithAvatar_defaultProps = _defineProperty({
+var SelectWithAvatar_defaultProps = {
   animationStyle: 'bounce',
   defaultDropBoxPosition: 'bottom',
   dropBoxSize: 'small',
@@ -118,8 +117,7 @@ var SelectWithAvatar_defaultProps = _defineProperty({
   customProps: {},
   needEffect: true,
   isLoading: false
-}, "customProps", {});
-
+};
 exports.SelectWithAvatar_defaultProps = SelectWithAvatar_defaultProps;
 var SelectWithIcon_defaultProps = (_SelectWithIcon_defau = {
   isReadOnly: false,
@@ -130,5 +128,5 @@ var SelectWithIcon_defaultProps = (_SelectWithIcon_defau = {
   needListBorder: false,
   needSearch: false,
   boxSize: 'default'
-}, _defineProperty(_SelectWithIcon_defau, "needListBorder", false), _defineProperty(_SelectWithIcon_defau, "needCloseOnSelect", true), _defineProperty(_SelectWithIcon_defau, "borderColor", 'default'), _defineProperty(_SelectWithIcon_defau, "needTick", true), _defineProperty(_SelectWithIcon_defau, "searchBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "size", 'medium'), _defineProperty(_SelectWithIcon_defau, "searchFields", []), _defineProperty(_SelectWithIcon_defau, "textBoxSize", 'medium'), _defineProperty(_SelectWithIcon_defau, "textBoxVariant", 'default'), _defineProperty(_SelectWithIcon_defau, "dataId", 'selectWithIcon'), _defineProperty(_SelectWithIcon_defau, "dataSelectorId", 'selectWithIcon'), _defineProperty(_SelectWithIcon_defau, "dropBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "needIcon", true), _defineProperty(_SelectWithIcon_defau, "iconSize", '14'), _defineProperty(_SelectWithIcon_defau, "i18nKeys", {}), _defineProperty(_SelectWithIcon_defau, "isLoading", false), _defineProperty(_SelectWithIcon_defau, "isAbsolutePositioningNeeded", true), _defineProperty(_SelectWithIcon_defau, "isRestrictScroll", false), _defineProperty(_SelectWithIcon_defau, "customProps", {}), _defineProperty(_SelectWithIcon_defau, "customClass", {}), _SelectWithIcon_defau);
+}, _defineProperty(_SelectWithIcon_defau, "needListBorder", false), _defineProperty(_SelectWithIcon_defau, "needCloseOnSelect", true), _defineProperty(_SelectWithIcon_defau, "borderColor", 'default'), _defineProperty(_SelectWithIcon_defau, "needTick", true), _defineProperty(_SelectWithIcon_defau, "searchBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "size", 'medium'), _defineProperty(_SelectWithIcon_defau, "searchFields", []), _defineProperty(_SelectWithIcon_defau, "textBoxSize", 'medium'), _defineProperty(_SelectWithIcon_defau, "textBoxVariant", 'default'), _defineProperty(_SelectWithIcon_defau, "dataId", 'selectWithIcon'), _defineProperty(_SelectWithIcon_defau, "dataSelectorId", 'selectWithIcon'), _defineProperty(_SelectWithIcon_defau, "dropBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "needIcon", true), _defineProperty(_SelectWithIcon_defau, "iconSize", '14'), _defineProperty(_SelectWithIcon_defau, "i18nKeys", {}), _defineProperty(_SelectWithIcon_defau, "isLoading", false), _defineProperty(_SelectWithIcon_defau, "isAbsolutePositioningNeeded", true), _defineProperty(_SelectWithIcon_defau, "isRestrictScroll", false), _defineProperty(_SelectWithIcon_defau, "customProps", {}), _SelectWithIcon_defau);
 exports.SelectWithIcon_defaultProps = SelectWithIcon_defaultProps;

package/lib/Select/props/propTypes.js

@@ -103,7 +103,8 @@ var Select_propTypes = {
     TextBoxIconProps: _propTypes["default"].object,
     DropdownSearchTextBoxProps: _propTypes["default"].object,
     listItemProps: _propTypes["default"].object,
-    SuggestionsProps: _propTypes["default"].object
+    SuggestionsProps: _propTypes["default"].object,
+    InputFieldLineProps: _propTypes["default"].object
   }),
   isLoading: _propTypes["default"].bool,
   dataSelectorId: _propTypes["default"].string,
@@ -203,8 +204,7 @@ var GroupSelect_propTypes = {
   isDefaultSelectValue: _propTypes["default"].bool,
   customProps: _propTypes["default"].shape({
     TextBoxProps: _propTypes["default"].object,
-    TextBoxIconProps: _propTypes["default"].object,
-    SuggestionsProps: _propTypes["default"].object
+    TextBoxIconProps: _propTypes["default"].object
   }),
   allowValueFallback: _propTypes["default"].bool
 };
@@ -269,10 +269,7 @@ var SelectWithAvatar_propTypes = _objectSpread(_objectSpread({}, Select_propType
   htmlId: _propTypes["default"].string,
   needEffect: _propTypes["default"].bool,
   isLoading: _propTypes["default"].bool,
-  dataSelectorId: _propTypes["default"].string,
-  customProps: _propTypes["default"].shape({
-    SuggestionsProps: _propTypes["default"].object
-  })
+  dataSelectorId: _propTypes["default"].string
 });
 
 exports.SelectWithAvatar_propTypes = SelectWithAvatar_propTypes;
@@ -339,11 +336,7 @@ var SelectWithIcon_propTypes = {
     TextBoxProps: _propTypes["default"].object,
     DropdownSearchTextBoxProps: _propTypes["default"].object,
     SuggestionsProps: _propTypes["default"].object,
-    TextBoxIconProps: _propTypes["default"].object,
-    ListItemProps: _propTypes["default"].object
-  }),
-  customClass: _propTypes["default"].shape({
-    dropBoxClass: _propTypes["default"].string
+    TextBoxIconProps: _propTypes["default"].object
   })
 };
 exports.SelectWithIcon_propTypes = SelectWithIcon_propTypes;

package/lib/TextBoxIcon/TextBoxIcon.js

@@ -176,7 +176,6 @@ var TextBoxIcon = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/_react["default"].createElement(_InputFieldLine["default"], {
         isActive: isActive || isFocus,
         border: needBorder ? 'bottom' : 'none',
-        size: size,
         borderColor: borderColor,
         hasEffect: needEffect,
         isDisabled: isDisabled,

package/lib/common/common.module.css

@@ -501,7 +501,7 @@
 }
 .lineClamp {
   composes: wbreak clamp;
-  -webkit-line-clamp: var(--line-clamp, 3);
+  -webkit-line-clamp: var(--line-clamp,2);
 }
 
 .offSelection {

package/lib/shared/InputFieldLine/InputFieldLine.js

@@ -47,7 +47,8 @@ function InputFieldLine(props) {
     dataId: dataId,
     onClick: onClick,
     onKeyDown: onKeyDown,
-    className: "".concat(_InputFieldLineModule["default"].varClass, " ").concat(_InputFieldLineModule["default"].customContainer, " ").concat(hasPadding ? _InputFieldLineModule["default"][size] : '', " ").concat(borderClass, " ").concat(isDisabled ? _InputFieldLineModule["default"].disabled : isReadOnly ? hasEffect ? _InputFieldLineModule["default"].effect : _InputFieldLineModule["default"].readonly : _InputFieldLineModule["default"].effect, " ").concat(border !== 'none' ? "".concat(borderColorClass, " ").concat(_InputFieldLineModule["default"].hasBorder) : '', " ").concat(isActive && !(isDisabled || isReadOnly) ? _InputFieldLineModule["default"].active : '', "  ").concat(customClass)
+    scroll: !!size ? 'vertical' : undefined,
+    className: "".concat(_InputFieldLineModule["default"].varClass, " ").concat(_InputFieldLineModule["default"].customContainer, " ").concat(!!size ? _InputFieldLineModule["default"][size] : '', " ").concat(hasPadding ? _InputFieldLineModule["default"]["padding_".concat(size)] : '', " ").concat(borderClass, " ").concat(isDisabled ? _InputFieldLineModule["default"].disabled : isReadOnly ? hasEffect ? _InputFieldLineModule["default"].effect : _InputFieldLineModule["default"].readonly : _InputFieldLineModule["default"].effect, " ").concat(border !== 'none' ? "".concat(borderColorClass, " ").concat(_InputFieldLineModule["default"].hasBorder) : '', " ").concat(isActive && !(isDisabled || isReadOnly) ? _InputFieldLineModule["default"].active : '', "  ").concat(customClass)
   }), children);
 }
 

package/lib/shared/InputFieldLine/InputFieldLine.module.css

@@ -6,12 +6,12 @@
 }
 
 .customContainer {
-    composes: oflowy from '../../common/common.module.css';
     cursor: var(--local_cursor);
     border-color: var(--local_inputFieldLine_border_color);
 }
 
-.disabled,.readonly {
+.disabled,
+.readonly {
     --local_cursor: not-allowed;
 }
 
@@ -57,28 +57,34 @@
     border-style: solid;
 }
 
+.padding_small,
+.padding_xmedium {
+    --local_padding: var(--zd_size3);
+}
+
+.padding_medium,
+.padding_large {
+    --local_padding: var(--zd_size8);
+}
+
 .xmedium {
     min-height: var(--zd_size30) ;
-    --local_padding: var(--zd_size3);
 }
 
 .small {
     max-height: var(--zd_size200) ;
-    --local_padding: var(--zd_size3);
 }
 
 .medium {
     max-height: var(--zd_size350) ;
-    --local_padding: var(--zd_size8);
 }
 
 .large {
     max-height: var(--zd_size400) ;
-    --local_padding: var(--zd_size8);
 }
 
 .border_bottom {
-    border-width:  0 0 var(--local_inputFieldLine_border_width) 0;
+    border-width: 0 0 var(--local_inputFieldLine_border_width) 0;
     padding-bottom: var(--local_padding);
 }
 

package/lib/v1/DropBox/DropBoxElement/DropBoxElement.js

@@ -11,7 +11,7 @@ var _useDropboxPosCalc2 = _interopRequireDefault(require("../../../DropBox/DropB
 
 var _cssJSLogic2 = _interopRequireDefault(require("../../../DropBox/DropBoxElement/css/cssJSLogic"));
 
-var _DropBoxPositionMapping = require("../../../DropBox/DropBoxPositionMapping.js");
+var _positioning = require("@zohodesk/dotkit/es/react/components/Popup/utils/positioning");
 
 var _defaultProps = require("./props/defaultProps");
 
@@ -74,13 +74,13 @@ function DropBoxElement(props) {
       ariaMultiselectable = a11y.ariaMultiselectable,
       ariaLabelledby = a11y.ariaLabelledby;
   boxPosition = boxPosition && boxPosition != 'undefined' ? boxPosition : 'bottomCenter';
-  var boxDirection = _DropBoxPositionMapping.positionMapping[boxPosition].direction;
+  var boxDirection = _positioning.positionMapping[boxPosition].direction;
 
   if (isAbsolute) {
-    arrowPosition = arrowPosition ? arrowPosition : _DropBoxPositionMapping.positionMapping[boxPosition].arrowPosition;
-    boxPosition = _DropBoxPositionMapping.positionMapping[boxPosition].positionStyle;
+    arrowPosition = arrowPosition ? arrowPosition : _positioning.positionMapping[boxPosition].arrowPosition;
+    boxPosition = _positioning.positionMapping[boxPosition].positionStyle;
   } else {
-    arrowPosition = _DropBoxPositionMapping.positionMapping[boxPosition].arrowPosition;
+    arrowPosition = _positioning.positionMapping[boxPosition].arrowPosition;
   }
 
   var _useDropboxPosCalc = (0, _useDropboxPosCalc2["default"])(props),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-temp-199.20",
+  "version": "1.0.0-temp-248",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -39,7 +39,7 @@
     "build:css:umd": "npm run clean &&  npm run init && react-cli build:css:umd",
     "coverage": "react-cli coverage",
     "prepare": "npm run init &&  npm run css:build ",
-    "prepublishOnly": "node prePublish.js && npm run css:review && npm run review:props ",
+    "prepublishOnly": "node prePublish.js && npm run download_only && npm run css:review && npm run review:props ",
     "postpublish": "node postPublish.js",
     "report": "react-cli publish:report",
     "test": "react-cli test",
@@ -80,7 +80,7 @@
     "@zohodesk-private/react-prop-validator": "1.2.3",
     "@zohodesk/a11y": "2.3.8",
     "@zohodesk/docstool": "1.0.0-alpha-2",
-    "@zohodesk/dotkit": "1.0.5",
+    "@zohodesk/dotkit": "1.0.6",
     "@zohodesk/hooks": "2.0.6",
     "@zohodesk/icons": "1.1.6",
     "@zohodesk/layout": "3.1.0",
@@ -110,7 +110,7 @@
     "@zohodesk/utils": "1.3.16",
     "@zohodesk/a11y": "2.3.8",
     "@zohodesk/layout": "3.1.0",
-    "@zohodesk/dotkit": "1.0.5",
+    "@zohodesk/dotkit": "1.0.6",
     "color": "4.2.3"
   }
 }