@zohodesk/components 1.0.0-temp-70 → 1.0.0-temp-71

package/lib/LightNightMode/docs/AlternativeColors.docs.js

@@ -71,10 +71,7 @@ var AlternativeColors = /*#__PURE__*/function (_React$Component) {
       }, "Light Mode Colors"), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
         flexible: true,
         className: _docStyleModule["default"].rgt
-      }, "Alternate Night Mode Colors"), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
-        flexible: true,
-        className: _docStyleModule["default"].rgt
-      }, "Alternate Pure Dark Mode Colors")), /*#__PURE__*/_react["default"].createElement(_Container["default"], {
+      }, "Alternate Night Mode Colors")), /*#__PURE__*/_react["default"].createElement(_Container["default"], {
         alignBox: "row",
         className: _docStyleModule["default"].content
       }, /*#__PURE__*/_react["default"].createElement(_Box["default"], {
@@ -117,25 +114,6 @@ var AlternativeColors = /*#__PURE__*/function (_React$Component) {
             },
             "data-title": "Copy ".concat(clrValue)
           }, clrValue));
-        })), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
-          flexible: true,
-          className: _docStyleModule["default"].rgt
-        }, index.equalPureDarkColors.toString().split(", ").map(function (clrValue, j) {
-          return /*#__PURE__*/_react["default"].createElement("div", {
-            className: _docStyleModule["default"].nestedDiv,
-            key: j
-          }, /*#__PURE__*/_react["default"].createElement("span", {
-            style: {
-              backgroundColor: "".concat(clrValue)
-            },
-            className: "".concat(_docStyleModule["default"].rect, " ").concat(_docStyleModule["default"].gold)
-          }), /*#__PURE__*/_react["default"].createElement("span", {
-            className: _docStyleModule["default"].colorvalue,
-            onClick: function onClick() {
-              return navigator.clipboard.writeText(clrValue);
-            },
-            "data-title": "Copy ".concat(clrValue)
-          }, clrValue));
         })));
       })))));
     }

package/lib/ListItem/ListContainer.js

@@ -9,16 +9,14 @@ exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _Layout = require("../Layout");
 
 var _CssProvider = _interopRequireDefault(require("../Provider/CssProvider"));
 
 var _ListItemModule = _interopRequireDefault(require("./ListItem.module.css"));
 
-var _defaultProps = require("./props/defaultProps");
-
-var _propTypes = require("./props/propTypes");
-
 var _CustomResponsive = require("../Responsive/CustomResponsive");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -53,19 +51,16 @@ var ListContainer = function ListContainer(props) {
       onMouseOver = props.onMouseOver,
       eleRef = props.eleRef;
   var responsiveFunc = (0, _react.useCallback)(function (_ref) {
-    var mediaQueryOR = _ref.mediaQueryOR,
-        isTouchDevice = _ref.isTouchDevice;
+    var mediaQueryOR = _ref.mediaQueryOR;
     return {
       mobileToTab: mediaQueryOR([{
         maxWidth: 700
-      }]),
-      isTouchDevice: isTouchDevice
+      }])
     };
   }, []);
 
   var _useResponsiveReceive = (0, _CustomResponsive.useResponsiveReceiver)('Helmet', responsiveFunc),
-      mobileToTab = _useResponsiveReceive.mobileToTab,
-      isTouchDevice = _useResponsiveReceive.isTouchDevice;
+      mobileToTab = _useResponsiveReceive.mobileToTab;
 
   var role = a11y.role,
       ariaSelected = a11y.ariaSelected;
@@ -90,7 +85,7 @@ var ListContainer = function ListContainer(props) {
     isCover: false,
     align: "vertical",
     alignBox: "row",
-    className: "".concat(_ListItemModule["default"].list, " ").concat(_ListItemModule["default"][size], " ").concat(mobileToTab && isTouchDevice ? _ListItemModule["default"].responsiveHeight : '', " ").concat(_ListItemModule["default"][palette], " ").concat(active ? _ListItemModule["default"]["active".concat(palette)] : highlight && !isDisabled ? _ListItemModule["default"]["".concat(palette, "Hover")] : '', " ").concat(autoHover && !isDisabled ? _ListItemModule["default"]["".concat(palette, "Effect")] : '', " ").concat(needTick ? _ListItemModule["default"]["".concat(size, "withTick")] : '', " ").concat(isDisabled ? (0, _CssProvider["default"])('isDisable') : '', " ").concat(needBorder ? active ? _ListItemModule["default"].activewithBorder : _ListItemModule["default"].withBorder : '', " ").concat(customClass),
+    className: "".concat(_ListItemModule["default"].list, "  ").concat(mobileToTab ? _ListItemModule["default"].responsiveHeight : '', " ").concat(_ListItemModule["default"][size], " ").concat(_ListItemModule["default"][palette], " ").concat(active ? _ListItemModule["default"]["active".concat(palette)] : highlight && !isDisabled ? _ListItemModule["default"]["".concat(palette, "Hover")] : '', " ").concat(autoHover && !isDisabled ? _ListItemModule["default"]["".concat(palette, "Effect")] : '', " ").concat(needTick ? _ListItemModule["default"]["".concat(size, "withTick")] : '', " ").concat(isDisabled ? (0, _CssProvider["default"])('isDisable') : '', " ").concat(needBorder ? active ? _ListItemModule["default"].activewithBorder : _ListItemModule["default"].withBorder : '', " ").concat(customClass),
     dataId: dataId,
     onClick: !isDisabled && onClick,
     onMouseEnter: onMouseEnter,
@@ -101,10 +96,48 @@ var ListContainer = function ListContainer(props) {
   }, options, customProps), children);
 };
 
-ListContainer.defaultProps = _defaultProps.ListContainerDefaultProps;
-ListContainer.propTypes = _propTypes.ListContainer_Props;
+ListContainer.defaultProps = {
+  active: false,
+  autoHover: false,
+  highlight: false,
+  needTick: false,
+  palette: 'default',
+  size: 'medium',
+  isLink: false,
+  target: 'blank',
+  needBorder: true,
+  a11y: {},
+  customClass: '',
+  customProps: {}
+};
 var _default = ListContainer;
 exports["default"] = _default;
+ListContainer.propTypes = {
+  active: _propTypes["default"].bool,
+  autoHover: _propTypes["default"].bool,
+  children: _propTypes["default"].node,
+  dataId: _propTypes["default"].string,
+  disableTitle: _propTypes["default"].string,
+  highlight: _propTypes["default"].bool,
+  href: _propTypes["default"].string,
+  isDisabled: _propTypes["default"].bool,
+  isLink: _propTypes["default"].bool,
+  needBorder: _propTypes["default"].bool,
+  needTick: _propTypes["default"].bool,
+  onClick: _propTypes["default"].func,
+  onMouseEnter: _propTypes["default"].func,
+  onMouseOver: _propTypes["default"].func,
+  palette: _propTypes["default"].oneOf(['default', 'primary', 'secondary', 'dark']),
+  size: _propTypes["default"].oneOf(['small', 'medium', 'large']),
+  target: _propTypes["default"].oneOf(['blank', 'self']),
+  title: _propTypes["default"].string,
+  a11y: _propTypes["default"].shape({
+    role: _propTypes["default"].string,
+    ariaSelected: _propTypes["default"].bool
+  }),
+  customClass: _propTypes["default"].string,
+  customProps: _propTypes["default"].object
+};
 
 if (false) {
   ListContainer.docs = {

package/lib/ListItem/ListItem.js

@@ -9,14 +9,12 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _Layout = require("../Layout");
 
 var _ListContainer = _interopRequireDefault(require("./ListContainer"));
 
-var _defaultProps = require("./props/defaultProps");
-
-var _propTypes = require("./props/propTypes");
-
 var _Icon = _interopRequireDefault(require("@zohodesk/icons/lib/Icon"));
 
 var _ListItemModule = _interopRequireDefault(require("./ListItem.module.css"));
@@ -137,7 +135,7 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
         autoHover: autoHover,
         needTick: needTick,
         needBorder: needBorder,
-        customClass: customListItem,
+        customClass: "".concat(customListItem),
         dataId: dataIdString,
         isLink: isLink,
         href: href,
@@ -171,8 +169,55 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
 }(_react["default"].Component);
 
 exports["default"] = ListItem;
-ListItem.defaultProps = _defaultProps.ListItemDefaultProps;
-ListItem.propTypes = _propTypes.ListItem_Props;
+ListItem.defaultProps = {
+  active: false,
+  autoHover: false,
+  highlight: false,
+  id: '',
+  needTick: false,
+  palette: 'default',
+  size: 'medium',
+  isLink: false,
+  target: 'blank',
+  needBorder: true,
+  a11y: {},
+  customClass: {},
+  customProps: {}
+};
+ListItem.propTypes = {
+  active: _propTypes["default"].bool,
+  autoHover: _propTypes["default"].bool,
+  children: _propTypes["default"].node,
+  dataId: _propTypes["default"].string,
+  disableTitle: _propTypes["default"].string,
+  getRef: _propTypes["default"].func,
+  highlight: _propTypes["default"].bool,
+  href: _propTypes["default"].string,
+  id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  index: _propTypes["default"].number,
+  isDisabled: _propTypes["default"].bool,
+  isLink: _propTypes["default"].bool,
+  needBorder: _propTypes["default"].bool,
+  needTick: _propTypes["default"].bool,
+  onClick: _propTypes["default"].func,
+  onMouseEnter: _propTypes["default"].func,
+  palette: _propTypes["default"].oneOf(['default', 'primary', 'secondary', 'dark']),
+  size: _propTypes["default"].oneOf(['small', 'medium', 'large']),
+  target: _propTypes["default"].oneOf(['blank', 'self']),
+  title: _propTypes["default"].string,
+  value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]).isRequired,
+  a11y: _propTypes["default"].shape({
+    role: _propTypes["default"].string,
+    ariaSelected: _propTypes["default"].bool
+  }),
+  customClass: _propTypes["default"].shape({
+    customListItem: _propTypes["default"].string,
+    customTickIcon: _propTypes["default"].string
+  }),
+  customProps: _propTypes["default"].shape({
+    ListItemProps: _propTypes["default"].object
+  })
+};
 
 if (false) {
   ListItem.docs = {

package/lib/ListItem/ListItem.module.css

@@ -106,30 +106,26 @@
 }
 
 .defaultHover,
-.defaultEffect:hover
-/* .defaultEffect:focus  */
-{
+.defaultEffect:hover,
+.defaultEffect:focus {
   --listitem_bg_color: var(--zdt_listitem_highlight_bg);
 }
 .primaryHover,
-.primaryEffect:hover
-/* .primaryEffect:focus */
- {
+.primaryEffect:hover,
+.primaryEffect:focus {
   --listitem_bg_color: var(--zdt_listitem_primary_bg);
   --listitem_highlight_bg_color: var(--zdt_listitem_primary_bg);
 }
 .secondaryHover,
-.secondaryEffect:hover
-/* .secondaryEffect:focus  */
-{
+.secondaryEffect:hover,
+.secondaryEffect:focus {
   --listitem_bg_color: var(--zdt_listitem_secondary_bg);
   --listitem_highlight_bg_color: var(--zdt_listitem_secondary_bg);
   --listitem_text_color: var(--zdt_listitem_secondary_text);
 }
 .darkHover,
-.darkEffect:hover
-/* .darkEffect:focus */
- {
+.darkEffect:hover,
+.darkEffect:focus {
   --listitem_bg_color: var(--zdt_listitem_dark_effect_bg);
   --listitem_highlight_bg_color: var(--zdt_listitem_dark_effect_bg);
 }
@@ -188,10 +184,10 @@
 [dir=ltr] .mediumwithTick {
   --listitem_padding: var(--zd_size9) var(--zd_size39) var(--zd_size9)
     var(--zd_size20)
-    /*rtl: var(--zd_size9) var(--zd_size20) var(--zd_size9) var(--zd_size39)*/;
+    /*rtl: var(--zd_size9) var(--zd_size20) var(--zd_size9) var(--zd_size30)*/;
 }
 [dir=rtl] .mediumwithTick {
-  --listitem_padding: var(--zd_size9) var(--zd_size20) var(--zd_size9) var(--zd_size39);
+  --listitem_padding: var(--zd_size9) var(--zd_size20) var(--zd_size9) var(--zd_size30);
 }
 [dir=ltr] .largewithTick {
   --listitem_padding: var(--zd_size10) var(--zd_size39) var(--zd_size10)
@@ -202,8 +198,13 @@
   --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size39);
 }
 .responsiveHeight {
-  --listitem_min_height: var(--zd_size45);
-  font-size: var(--zd_font_size15);
-  padding-top: var(--zd_size10);
-  padding-bottom: var(--zd_size10);
+  --listitem_height: var(--zd_size45);
+}
+[dir=ltr] .responsiveHeight {
+  --listitem_padding: var(--zd_size10) var(--zd_size3) var(--zd_size10)
+    var(--zd_size20)
+    /*rtl: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3)*/;
+}
+[dir=rtl] .responsiveHeight {
+  --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3);
 }

package/lib/ListItem/ListItemWithAvatar.js

@@ -9,14 +9,12 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _Layout = require("../Layout");
 
 var _ListContainer = _interopRequireDefault(require("./ListContainer"));
 
-var _defaultProps = require("./props/defaultProps");
-
-var _propTypes = require("./props/propTypes");
-
 var _Avatar = _interopRequireDefault(require("../Avatar/Avatar"));
 
 var _AvatarTeam = _interopRequireDefault(require("../AvatarTeam/AvatarTeam"));
@@ -25,8 +23,12 @@ var _Icon = _interopRequireDefault(require("@zohodesk/icons/lib/Icon"));
 
 var _ListItemModule = _interopRequireDefault(require("./ListItem.module.css"));
 
+var _ListItemWithAvatar$p;
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _extends() { _extends = Object.assign || 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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -145,7 +147,7 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
         autoHover: autoHover,
         needTick: needTick,
         needBorder: needBorder,
-        customClass: customListItem,
+        customClass: "".concat(customListItem),
         dataId: "".concat(dataIdString, "_ListItemWithAvatar"),
         onClick: this.handleClick,
         onMouseEnter: this.handleMouseEnter,
@@ -195,8 +197,37 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
 }(_react["default"].PureComponent);
 
 exports["default"] = ListItemWithAvatar;
-ListItemWithAvatar.defaultProps = _defaultProps.ListItemWithAvatarDefaultProps;
-ListItemWithAvatar.propTypes = _propTypes.ListItemWithAvatar_Props;
+ListItemWithAvatar.defaultProps = {
+  active: false,
+  autoHover: false,
+  highlight: false,
+  isTeam: false,
+  needTick: false,
+  palette: 'default',
+  size: 'medium',
+  value: 'List',
+  dataId: 'listAvatar',
+  needBorder: true,
+  needAvatarTitle: true,
+  a11y: {},
+  customClass: {},
+  customProps: {}
+};
+ListItemWithAvatar.propTypes = (_ListItemWithAvatar$p = {
+  active: _propTypes["default"].bool,
+  autoHover: _propTypes["default"].bool,
+  avatarPalette: _propTypes["default"].string
+}, _defineProperty(_ListItemWithAvatar$p, "avatarPalette", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar$p, "dataId", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar$p, "disableTitle", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar$p, "getRef", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar$p, "highlight", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar$p, "id", _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])), _defineProperty(_ListItemWithAvatar$p, "imgSrc", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar$p, "index", _propTypes["default"].number), _defineProperty(_ListItemWithAvatar$p, "initial", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar$p, "isDisabled", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar$p, "isTeam", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar$p, "name", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar$p, "needAvatarTitle", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar$p, "needBorder", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar$p, "needTick", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar$p, "onClick", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar$p, "onMouseEnter", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar$p, "palette", _propTypes["default"].oneOf(['dark'])), _defineProperty(_ListItemWithAvatar$p, "size", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar$p, "title", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar$p, "value", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar$p, "a11y", _propTypes["default"].shape({
+  role: _propTypes["default"].string,
+  ariaSelected: _propTypes["default"].bool,
+  ariaHidden: _propTypes["default"].bool
+})), _defineProperty(_ListItemWithAvatar$p, "customClass", _propTypes["default"].shape({
+  customListItem: _propTypes["default"].string,
+  customAvatar: _propTypes["default"].string,
+  customAvatarTeam: _propTypes["default"].string
+})), _defineProperty(_ListItemWithAvatar$p, "customProps", _propTypes["default"].shape({
+  ListItemProps: _propTypes["default"].object
+})), _ListItemWithAvatar$p);
 
 if (false) {
   ListItemWithAvatar.docs = {

package/lib/ListItem/ListItemWithCheckBox.js

@@ -9,11 +9,9 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _ListContainer = _interopRequireDefault(require("./ListContainer"));
-
-var _defaultProps = require("./props/defaultProps");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _propTypes = require("./props/propTypes");
+var _ListContainer = _interopRequireDefault(require("./ListContainer"));
 
 var _CheckBox = _interopRequireDefault(require("../CheckBox/CheckBox"));
 
@@ -127,7 +125,7 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
         isDisabled: isDisabled,
         active: active,
         autoHover: autoHover,
-        customClass: customListItem,
+        customClass: "".concat(customListItem),
         dataId: "".concat(dataId ? dataId : value, "_ListItemWithCheckBox"),
         onClick: this.onClick,
         onMouseOver: this.onHover,
@@ -159,8 +157,45 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
 }(_react["default"].Component);
 
 exports["default"] = ListItemWithCheckBox;
-ListItemWithCheckBox.defaultProps = _defaultProps.ListItemWithCheckBoxDefaultProps;
-ListItemWithCheckBox.propTypes = _propTypes.ListItemWithCheckBox_Props;
+ListItemWithCheckBox.defaultProps = {
+  active: false,
+  autoHover: false,
+  checked: false,
+  highlight: false,
+  palette: 'default',
+  size: 'medium',
+  value: 'List',
+  a11y: {},
+  customClass: {},
+  customProps: {}
+};
+ListItemWithCheckBox.propTypes = {
+  active: _propTypes["default"].bool,
+  autoHover: _propTypes["default"].bool,
+  checked: _propTypes["default"].bool,
+  dataId: _propTypes["default"].string,
+  disableTitle: _propTypes["default"].string,
+  getRef: _propTypes["default"].func,
+  highlight: _propTypes["default"].bool,
+  id: _propTypes["default"].string,
+  index: _propTypes["default"].string,
+  isDisabled: _propTypes["default"].bool,
+  onClick: _propTypes["default"].func,
+  onHover: _propTypes["default"].func,
+  palette: _propTypes["default"].string,
+  size: _propTypes["default"].string,
+  title: _propTypes["default"].string,
+  value: _propTypes["default"].string,
+  a11y: _propTypes["default"].shape({
+    role: _propTypes["default"].string,
+    ariaSelected: _propTypes["default"].bool
+  }),
+  customClass: _propTypes["default"].shape({
+    customListItem: _propTypes["default"].string,
+    customCheckBox: _propTypes["default"].string,
+    customLabel: _propTypes["default"].string
+  })
+};
 
 if (false) {
   ListItemWithCheckBox.docs = {

package/lib/ListItem/ListItemWithIcon.js

@@ -9,16 +9,14 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _Layout = require("../Layout");
 
 var _Icon = _interopRequireDefault(require("@zohodesk/icons/lib/Icon"));
 
 var _ListContainer = _interopRequireDefault(require("./ListContainer"));
 
-var _defaultProps = require("./props/defaultProps");
-
-var _propTypes = require("./props/propTypes");
-
 var _ListItemModule = _interopRequireDefault(require("./ListItem.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -134,7 +132,7 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
         autoHover: autoHover,
         needTick: needTick,
         needBorder: needBorder,
-        customClass: customClass,
+        customClass: "".concat(customClass),
         dataId: dataIdString,
         isLink: isLink,
         href: href,
@@ -176,8 +174,52 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
 }(_react["default"].Component);
 
 exports["default"] = ListItemWithIcon;
-ListItemWithIcon.defaultProps = _defaultProps.ListItemWithIconDefaultProps;
-ListItemWithIcon.propTypes = _propTypes.ListItemWithIcon_Props;
+ListItemWithIcon.defaultProps = {
+  active: false,
+  autoHover: false,
+  highlight: false,
+  iconName: '',
+  iconSize: '10',
+  needTick: false,
+  palette: 'default',
+  size: 'medium',
+  value: 'List',
+  needBorder: true,
+  a11y: {},
+  customClass: '',
+  customProps: {}
+};
+ListItemWithIcon.propTypes = {
+  active: _propTypes["default"].bool,
+  autoHover: _propTypes["default"].bool,
+  dataId: _propTypes["default"].string,
+  disableTitle: _propTypes["default"].string,
+  getRef: _propTypes["default"].func,
+  highlight: _propTypes["default"].bool,
+  iconClass: _propTypes["default"].string,
+  iconName: _propTypes["default"].string,
+  iconSize: _propTypes["default"].string,
+  id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  index: _propTypes["default"].number,
+  isDisabled: _propTypes["default"].bool,
+  needBorder: _propTypes["default"].bool,
+  needTick: _propTypes["default"].bool,
+  onClick: _propTypes["default"].func,
+  onMouseEnter: _propTypes["default"].func,
+  palette: _propTypes["default"].string,
+  size: _propTypes["default"].string,
+  title: _propTypes["default"].string,
+  value: _propTypes["default"].string,
+  a11y: _propTypes["default"].shape({
+    role: _propTypes["default"].string,
+    ariaSelected: _propTypes["default"].bool,
+    ariaHidden: _propTypes["default"].bool
+  }),
+  customClass: _propTypes["default"].string,
+  customProps: _propTypes["default"].shape({
+    ListItemProps: _propTypes["default"].object
+  })
+};
 
 if (false) {
   ListItemWithIcon.docs = {

package/lib/ListItem/ListItemWithRadio.js

@@ -9,16 +9,14 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _Radio = _interopRequireDefault(require("../Radio/Radio"));
 
 var _Layout = require("../Layout");
 
 var _ListContainer = _interopRequireDefault(require("./ListContainer"));
 
-var _defaultProps = require("./props/defaultProps");
-
-var _propTypes = require("./props/propTypes");
-
 var _ListItemModule = _interopRequireDefault(require("./ListItem.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -128,7 +126,7 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
         isDisabled: isDisabled,
         active: active,
         autoHover: autoHover,
-        customClass: customListItem,
+        customClass: "".concat(customListItem),
         dataId: dataId,
         onClick: this.onClick,
         onMouseOver: this.onHover,
@@ -161,8 +159,46 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
 }(_react["default"].Component);
 
 exports["default"] = ListItemWithRadio;
-ListItemWithRadio.defaultProps = _defaultProps.ListItemWithRadioDefaultProps;
-ListItemWithRadio.propTypes = _propTypes.ListItemWithRadio_Props;
+ListItemWithRadio.defaultProps = {
+  active: false,
+  autoHover: false,
+  checked: false,
+  highlight: false,
+  palette: 'default',
+  size: 'medium',
+  value: 'List',
+  dataId: 'listItemWithRadioComp',
+  a11y: {},
+  customClass: {},
+  customProps: {}
+};
+ListItemWithRadio.propTypes = {
+  active: _propTypes["default"].bool,
+  autoHover: _propTypes["default"].bool,
+  checked: _propTypes["default"].bool,
+  dataId: _propTypes["default"].string,
+  disableTitle: _propTypes["default"].string,
+  getRef: _propTypes["default"].func,
+  highlight: _propTypes["default"].bool,
+  id: _propTypes["default"].string,
+  index: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  isDisabled: _propTypes["default"].bool,
+  onClick: _propTypes["default"].func,
+  onHover: _propTypes["default"].func,
+  palette: _propTypes["default"].string,
+  size: _propTypes["default"].string,
+  title: _propTypes["default"].string,
+  value: _propTypes["default"].string,
+  a11y: _propTypes["default"].shape({
+    role: _propTypes["default"].string,
+    ariaSelected: _propTypes["default"].bool
+  }),
+  customClass: _propTypes["default"].shape({
+    customListItem: _propTypes["default"].string,
+    customRadio: _propTypes["default"].string,
+    customRadioWrap: _propTypes["default"].string
+  })
+};
 
 if (false) {
   ListItemWithRadio.docs = {

package/lib/Modal/Modal.js

@@ -11,9 +11,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactDom = _interopRequireDefault(require("react-dom"));
 
-var _defaultProps = require("./props/defaultProps");
-
-var _propTypes = require("./props/propTypes");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _AppContainerModule = _interopRequireDefault(require("../AppContainer/AppContainer.module.css"));
 
@@ -201,8 +199,14 @@ var Modal = /*#__PURE__*/function (_React$Component) {
 }(_react["default"].Component);
 
 exports["default"] = Modal;
-Modal.defaultProps = _defaultProps.defaultProps;
-Modal.propTypes = _propTypes.propTypes;
+Modal.defaultProps = {
+  portalId: 'portal1'
+};
+Modal.propTypes = {
+  autoZIndexNeeded: _propTypes["default"].bool,
+  children: _propTypes["default"].node,
+  portalId: _propTypes["default"].string
+};
 
 if (false) {
   Modal.docs = {