@zohodesk/components 1.0.0-temp-248.1 → 1.0.0-temp-199.21

package/lib/Select/__tests__/__snapshots__/SelectWithIcon.spec.js.snap

@@ -30,7 +30,7 @@ exports[`SelectWithIcon rendering the defult props 1`] = `
           data-test-id="boxComponent"
         >
           <div
-            class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container input iconSelect  flex rowdir"
+            class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input iconSelect  flex rowdir"
             data-selector-id="textBoxIcon"
           >
             <div

package/lib/Select/props/defaultProps.js

@@ -91,7 +91,8 @@ var GroupSelect_defaultProps = {
   allowValueFallback: true
 };
 exports.GroupSelect_defaultProps = GroupSelect_defaultProps;
-var SelectWithAvatar_defaultProps = {
+
+var SelectWithAvatar_defaultProps = _defineProperty({
   animationStyle: 'bounce',
   defaultDropBoxPosition: 'bottom',
   dropBoxSize: 'small',
@@ -117,7 +118,8 @@ var SelectWithAvatar_defaultProps = {
   customProps: {},
   needEffect: true,
   isLoading: false
-};
+}, "customProps", {});
+
 exports.SelectWithAvatar_defaultProps = SelectWithAvatar_defaultProps;
 var SelectWithIcon_defaultProps = (_SelectWithIcon_defau = {
   isReadOnly: false,
@@ -128,5 +130,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", {}), _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", {}), _defineProperty(_SelectWithIcon_defau, "customClass", {}), _SelectWithIcon_defau);
 exports.SelectWithIcon_defaultProps = SelectWithIcon_defaultProps;

package/lib/Select/props/propTypes.js

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

package/lib/TextBoxIcon/TextBoxIcon.js

@@ -176,6 +176,7 @@ 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/TextBoxIcon/__tests__/__snapshots__/TextBoxIcon.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`TextBoxIcon component Should be render children 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -55,7 +55,7 @@ exports[`TextBoxIcon component Should be render children 1`] = `
 exports[`TextBoxIcon component Should be render htmlId  1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -95,7 +95,7 @@ exports[`TextBoxIcon component Should be render htmlId  1`] = `
 exports[`TextBoxIcon component Should be render iconOnHover is true , iconOnHover, isDisabled is false  1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container  iconOnHoverStyle flex rowdir"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container  iconOnHoverStyle flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -134,7 +134,7 @@ exports[`TextBoxIcon component Should be render iconOnHover is true , iconOnHove
 exports[`TextBoxIcon component Should be render iconOnHover is true , iconOnHover, isDisabled is true  1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom disabled borderColor_default hasBorder    container  iconOnHoverReadonly flex rowdir"
+    class="varClass customContainer  border_bottom disabled borderColor_default hasBorder    container  iconOnHoverReadonly flex rowdir"
     data-selector-id="textBoxIcon"
     data-title=""
   >
@@ -176,7 +176,7 @@ exports[`TextBoxIcon component Should be render iconOnHover is true , iconOnHove
 exports[`TextBoxIcon component Should be render iconRotated is true 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -228,7 +228,7 @@ exports[`TextBoxIcon component Should be render iconRotated is true 1`] = `
 exports[`TextBoxIcon component Should be render id 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -268,7 +268,7 @@ exports[`TextBoxIcon component Should be render id 1`] = `
 exports[`TextBoxIcon component Should be render isClickable is true 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -307,7 +307,7 @@ exports[`TextBoxIcon component Should be render isClickable is true 1`] = `
 exports[`TextBoxIcon component Should be render isDisabled is true 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom disabled borderColor_default hasBorder    container   flex rowdir"
+    class="varClass customContainer  border_bottom disabled borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
     data-title=""
   >
@@ -348,7 +348,7 @@ exports[`TextBoxIcon component Should be render isDisabled is true 1`] = `
 exports[`TextBoxIcon component Should be render isFocus is true   1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder active   container   flex rowdir"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder active   container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -387,7 +387,7 @@ exports[`TextBoxIcon component Should be render isFocus is true   1`] = `
 exports[`TextBoxIcon component Should be render isReadOnly is true , needEffect is false 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom readonly borderColor_default hasBorder    container   flex rowdir"
+    class="varClass customContainer  border_bottom readonly borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -427,7 +427,7 @@ exports[`TextBoxIcon component Should be render isReadOnly is true , needEffect
 exports[`TextBoxIcon component Should be render isReadOnly is true 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -467,7 +467,7 @@ exports[`TextBoxIcon component Should be render isReadOnly is true 1`] = `
 exports[`TextBoxIcon component Should be render name 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -507,7 +507,7 @@ exports[`TextBoxIcon component Should be render name 1`] = `
 exports[`TextBoxIcon component Should be render needBorder is false 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer    effect     container   flex rowdir"
+    class="varClass customContainer   effect     container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -546,7 +546,7 @@ exports[`TextBoxIcon component Should be render needBorder is false 1`] = `
 exports[`TextBoxIcon component Should be render needEffect is false 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom readonly borderColor_default hasBorder    container   flex rowdir"
+    class="varClass customContainer  border_bottom readonly borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -586,7 +586,7 @@ exports[`TextBoxIcon component Should be render needEffect is false 1`] = `
 exports[`TextBoxIcon component Should be render needReadOnlyStyle is false 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -625,7 +625,7 @@ exports[`TextBoxIcon component Should be render needReadOnlyStyle is false 1`] =
 exports[`TextBoxIcon component Should be render placeholder 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -665,7 +665,7 @@ exports[`TextBoxIcon component Should be render placeholder 1`] = `
 exports[`TextBoxIcon component Should be render showClearIcon is true 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -729,7 +729,7 @@ exports[`TextBoxIcon component Should be render showClearIcon is true 1`] = `
 exports[`TextBoxIcon component Should be render title 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom disabled borderColor_default hasBorder    container   flex rowdir"
+    class="varClass customContainer  border_bottom disabled borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
     data-title="TextBoxIconTitle"
   >
@@ -770,7 +770,7 @@ exports[`TextBoxIcon component Should be render title 1`] = `
 exports[`TextBoxIcon component Should be render value is number 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -809,7 +809,7 @@ exports[`TextBoxIcon component Should be render value is number 1`] = `
 exports[`TextBoxIcon component Should be render value is string and length greater than 1 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -873,7 +873,7 @@ exports[`TextBoxIcon component Should be render value is string and length great
 exports[`TextBoxIcon component Should be render value is string and length less than 1 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -912,7 +912,7 @@ exports[`TextBoxIcon component Should be render value is string and length less
 exports[`TextBoxIcon component Should be render with dataSelectorId 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon_data_selector_id"
   >
     <div
@@ -951,7 +951,7 @@ exports[`TextBoxIcon component Should be render with dataSelectorId 1`] = `
 exports[`TextBoxIcon component Should be render with the basic set of default props 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -990,7 +990,7 @@ exports[`TextBoxIcon component Should be render with the basic set of default pr
 exports[`TextBoxIcon component Should render Varient - default 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -1029,7 +1029,7 @@ exports[`TextBoxIcon component Should render Varient - default 1`] = `
 exports[`TextBoxIcon component Should render Varient - primary 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -1068,7 +1068,7 @@ exports[`TextBoxIcon component Should render Varient - primary 1`] = `
 exports[`TextBoxIcon component Should render Varient - secondary 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -1107,7 +1107,7 @@ exports[`TextBoxIcon component Should render Varient - secondary 1`] = `
 exports[`TextBoxIcon component Should render borderColor - default 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -1146,7 +1146,7 @@ exports[`TextBoxIcon component Should render borderColor - default 1`] = `
 exports[`TextBoxIcon component Should render borderColor - error 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_error hasBorder    container   flex rowdir"
+    class="varClass customContainer  border_bottom effect borderColor_error hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -1185,7 +1185,7 @@ exports[`TextBoxIcon component Should render borderColor - error 1`] = `
 exports[`TextBoxIcon component Should render borderColor - transparent 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_transparent hasBorder    container   flex rowdir"
+    class="varClass customContainer  border_bottom effect borderColor_transparent hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -1224,7 +1224,7 @@ exports[`TextBoxIcon component Should render borderColor - transparent 1`] = `
 exports[`TextBoxIcon component Should render size  - medium 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -1263,7 +1263,7 @@ exports[`TextBoxIcon component Should render size  - medium 1`] = `
 exports[`TextBoxIcon component Should render size  - small 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -1302,7 +1302,7 @@ exports[`TextBoxIcon component Should render size  - small 1`] = `
 exports[`TextBoxIcon component Should render size  - xmedium 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -1341,7 +1341,7 @@ exports[`TextBoxIcon component Should render size  - xmedium 1`] = `
 exports[`TextBoxIcon component Should render size  - xsmall 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -1380,7 +1380,7 @@ exports[`TextBoxIcon component Should render size  - xsmall 1`] = `
 exports[`TextBoxIcon component Should render type  - number 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -1419,7 +1419,7 @@ exports[`TextBoxIcon component Should render type  - number 1`] = `
 exports[`TextBoxIcon component Should render type  - password 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -1458,7 +1458,7 @@ exports[`TextBoxIcon component Should render type  - password 1`] = `
 exports[`TextBoxIcon component Should render type  - text 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -1497,7 +1497,7 @@ exports[`TextBoxIcon component Should render type  - text 1`] = `
 exports[`TextBoxIcon component rendering the Custom Props 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -1537,7 +1537,7 @@ exports[`TextBoxIcon component rendering the Custom Props 1`] = `
 exports[`TextBoxIcon component rendering the Custom class 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container customTBoxWrapTextBoxIcon  flex rowdir"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container customTBoxWrapTextBoxIcon  flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div
@@ -1576,7 +1576,7 @@ exports[`TextBoxIcon component rendering the Custom class 1`] = `
 exports[`TextBoxIcon component rendering the i18n value 1`] = `
 <DocumentFragment>
   <div
-    class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container   flex rowdir"
+    class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
     data-selector-id="textBoxIcon"
   >
     <div

package/lib/common/common.module.css

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

package/lib/shared/InputFieldLine/InputFieldLine.js

@@ -47,8 +47,7 @@ function InputFieldLine(props) {
     dataId: dataId,
     onClick: onClick,
     onKeyDown: onKeyDown,
-    scroll: !!size ? 'vertical' : undefined,
-    className: "".concat(_InputFieldLineModule["default"].varClass, " ").concat(_InputFieldLineModule["default"].customContainer, " ").concat(!!size ? _InputFieldLineModule["default"][size] : '', " ").concat(hasPadding && !!size ? _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)
+    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)
   }), 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,34 +57,28 @@
     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);
 }