@zohodesk/components 1.0.0-alpha-239 → 1.0.0-alpha-240

package/lib/Select/SelectWithAvatar.js

@@ -15,8 +15,6 @@ var _Select = require("./Select");
 
 var _Popup = _interopRequireDefault(require("../Popup/Popup"));
 
-var _DropBox = _interopRequireDefault(require("../DropBox/DropBox"));
-
 var _Tag = _interopRequireDefault(require("../Tag/Tag"));
 
 var _TextBox = _interopRequireDefault(require("../TextBox/TextBox"));
@@ -35,6 +33,10 @@ var _DropDownHeading = _interopRequireDefault(require("../DropDown/DropDownHeadi
 
 var _IdProvider = require("../Provider/IdProvider");
 
+var _ResponsiveDropBox = _interopRequireDefault(require("../ResponsiveDropBox/ResponsiveDropBox"));
+
+var _CustomResponsive = require("../Responsive/CustomResponsive");
+
 var _MultiSelectModule = _interopRequireDefault(require("../MultiSelect/MultiSelect.module.css"));
 
 var _SelectModule = _interopRequireDefault(require("./Select.module.css"));
@@ -151,9 +153,21 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
         this.handleKeyDown(e);
       }
     }
+  }, {
+    key: "responsiveFunc",
+    value: function responsiveFunc(_ref2) {
+      var mediaQueryOR = _ref2.mediaQueryOR;
+      return {
+        tabletMode: mediaQueryOR([{
+          maxWidth: 700
+        }])
+      };
+    }
   }, {
     key: "render",
     value: function render() {
+      var _this2 = this;
+
       var _this$props = this.props,
           dropBoxSize = _this$props.dropBoxSize,
           emptyMessage = _this$props.emptyMessage,
@@ -202,10 +216,10 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           options = _this$state.options;
       var suggestions = this.handleFilterSuggestions();
 
-      var _ref2 = this.normalizedFormatOptions[selectedId] || {},
-          id = _ref2.id,
-          text = _ref2.value,
-          photoURL = _ref2.photoURL;
+      var _ref3 = this.normalizedFormatOptions[selectedId] || {},
+          id = _ref3.id,
+          text = _ref3.value,
+          photoURL = _ref3.photoURL;
 
       var setAriaId = this.getNextAriaId();
       var ariaErrorId = this.getNextAriaId();
@@ -265,71 +279,82 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
         borderColor: borderColor,
         htmlId: htmlId,
         autoComplete: false
-      }))), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/_react["default"].createElement(_DropBox["default"], {
-        animationStyle: animationStyle,
-        boxPosition: position || "".concat(defaultDropBoxPosition, "Center"),
-        getRef: getContainerRef,
-        isActive: isPopupReady,
-        isAnimate: true,
-        isArrow: false,
-        onClick: removeClose,
-        needResponsive: needResponsive,
-        isPadding: false
-      }, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
-        onScroll: this.handleScroll
-      }, needSearch ? /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_SelectModule["default"].search, " ").concat(_SelectModule["default"][size])
-      }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
-        inputRef: this.searchInputRef,
-        maxLength: maxLength,
-        onChange: this.handleSearch,
-        onKeyDown: this.handleKeyDown,
-        placeHolder: searchBoxPlaceHolder,
-        size: searchBoxSize,
-        value: searchStr,
-        onClear: this.handleClearSearch,
-        dataId: "".concat(dataId, "_search"),
-        a11y: {
-          ariaAutocomplete: 'list',
-          ariaControls: setAriaId,
-          ariaDescribedby: ariaErrorId
-        },
-        autoComplete: false
-      }))) : null, /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
-        customClass: dropBoxSize ? _MultiSelectModule["default"][dropBoxSize] : '',
-        eleRef: this.suggestionContainerRef
-      }, groupName ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: _MultiSelectModule["default"].title
-      }, /*#__PURE__*/_react["default"].createElement(_DropDownHeading["default"], {
-        text: groupName,
-        a11y: {
-          role: 'heading'
-        }
-      })) : null, suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
-        activeId: selectedId,
-        suggestions: suggestions,
-        getRef: this.suggestionItemRef,
-        hoverOption: hoverIndex,
-        onClick: this.handleChange,
-        onMouseEnter: this.handleMouseEnter,
-        needTick: true,
-        needBorder: false,
-        selectedOptions: [selectedId],
-        className: _SelectModule["default"].listItemContainer,
-        htmlId: setAriaId,
-        a11y: {
-          ariaParentRole: 'listbox',
-          role: 'option'
-        }
-      }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
-        isLoading: isFetchingOptions,
-        options: options,
-        searchString: searchStr,
-        suggestions: suggestions,
-        dataId: dataId,
-        i18nKeys: i18nKeys,
-        htmlId: ariaErrorId
-      })))) : null);
+      }))), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
+        query: this.responsiveFunc,
+        responsiveId: "Helmet"
+      }, function (_ref4) {
+        var tabletMode = _ref4.tabletMode;
+        return /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], {
+          animationStyle: animationStyle,
+          boxPosition: position || "".concat(defaultDropBoxPosition, "Center"),
+          getRef: getContainerRef,
+          isActive: isPopupReady,
+          isAnimate: true,
+          isArrow: false,
+          onClick: removeClose,
+          needResponsive: needResponsive,
+          isPadding: false,
+          isResponsivePadding: true,
+          alignBox: "row"
+        }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+          flexible: true
+        }, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+          onScroll: _this2.handleScroll
+        }, needSearch ? /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement("div", {
+          className: "".concat(_SelectModule["default"].search, " ").concat(_SelectModule["default"][size])
+        }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
+          inputRef: _this2.searchInputRef,
+          maxLength: maxLength,
+          onChange: _this2.handleSearch,
+          onKeyDown: _this2.handleKeyDown,
+          placeHolder: searchBoxPlaceHolder,
+          size: searchBoxSize,
+          value: searchStr,
+          onClear: _this2.handleClearSearch,
+          dataId: "".concat(dataId, "_search"),
+          a11y: {
+            ariaAutocomplete: 'list',
+            ariaControls: setAriaId,
+            ariaDescribedby: ariaErrorId
+          },
+          autoComplete: false
+        }))) : null, /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
+          shrink: true,
+          customClass: !tabletMode && dropBoxSize ? _MultiSelectModule["default"][dropBoxSize] : '',
+          eleRef: _this2.suggestionContainerRef
+        }, groupName ? /*#__PURE__*/_react["default"].createElement("div", {
+          className: _MultiSelectModule["default"].title
+        }, /*#__PURE__*/_react["default"].createElement(_DropDownHeading["default"], {
+          text: groupName,
+          a11y: {
+            role: 'heading'
+          }
+        })) : null, suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+          activeId: selectedId,
+          suggestions: suggestions,
+          getRef: _this2.suggestionItemRef,
+          hoverOption: hoverIndex,
+          onClick: _this2.handleChange,
+          onMouseEnter: _this2.handleMouseEnter,
+          needTick: true,
+          needBorder: false,
+          selectedOptions: [selectedId],
+          className: _SelectModule["default"].listItemContainer,
+          htmlId: setAriaId,
+          a11y: {
+            ariaParentRole: 'listbox',
+            role: 'option'
+          }
+        }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
+          isLoading: isFetchingOptions,
+          options: options,
+          searchString: searchStr,
+          suggestions: suggestions,
+          dataId: dataId,
+          i18nKeys: i18nKeys,
+          htmlId: ariaErrorId
+        })))));
+      }) : null);
     }
   }]);
 

package/lib/Select/SelectWithIcon.js

@@ -17,8 +17,6 @@ var _TextBoxIcon = _interopRequireDefault(require("../TextBoxIcon/TextBoxIcon"))
 
 var _Icon = _interopRequireDefault(require("@zohodesk/icons/lib/Icon"));
 
-var _DropBox = _interopRequireDefault(require("../DropBox/DropBox"));
-
 var _ListItemWithIcon = _interopRequireDefault(require("../ListItem/ListItemWithIcon"));
 
 var _Card = _interopRequireWildcard(require("../Card/Card"));
@@ -29,6 +27,10 @@ var _Layout = require("../Layout");
 
 var _IdProvider = require("../Provider/IdProvider");
 
+var _ResponsiveDropBox = _interopRequireDefault(require("../ResponsiveDropBox/ResponsiveDropBox"));
+
+var _CustomResponsive = require("../Responsive/CustomResponsive");
+
 var _Common = require("../utils/Common.js");
 
 var _SelectModule = _interopRequireDefault(require("./Select.module.css"));
@@ -294,6 +296,16 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
         isNextOptions && getNextOptions && getNextOptions(e);
       }
     }
+  }, {
+    key: "responsiveFunc",
+    value: function responsiveFunc(_ref) {
+      var mediaQueryOR = _ref.mediaQueryOR;
+      return {
+        tabletMode: mediaQueryOR([{
+          maxWidth: 700
+        }])
+      };
+    }
   }, {
     key: "render",
     value: function render() {
@@ -408,80 +420,91 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         name: "ZD-down",
         size: "7"
-      })))))), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/_react["default"].createElement(_DropBox["default"], {
-        animationStyle: animationStyle,
-        boxPosition: position,
-        isActive: isPopupReady,
-        isAnimate: true,
-        isArrow: false,
-        onClick: removeClose,
-        getRef: getContainerRef,
-        needResponsive: needResponsive,
-        dataId: "".concat(dataId, "_suggestions"),
-        size: boxSize,
-        isPadding: false
-      }, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
-        onScroll: this.handleScroll,
-        htmlId: setAriaId,
-        a11y: {
-          role: 'listbox'
-        }
-      }, needSearch ? /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_SelectModule["default"].search, " ").concat(_SelectModule["default"][size])
-      }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
-        onClear: this.onSearchClear,
-        onChange: this.onSearch,
-        placeHolder: searchBoxPlaceHolder,
-        value: searchValue,
-        maxLength: maxLength,
-        onKeyDown: this.handleKeyDown,
-        inputRef: this.searchInputRef,
-        size: searchBoxSize,
-        dataId: "".concat(dataId, "_search"),
-        a11y: {
-          ariaDescribedby: ariaErrorId
-        },
-        autoComplete: false
-      }))) : null, /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
-        customClass: "".concat(_SelectModule["default"].dropBoxList, " ").concat(dropBoxSize ? _SelectModule["default"][dropBoxSize] : ''),
-        eleRef: this.scrollContentRef
-      }, options.length ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, options.map(function (options, i) {
-        var iconName = options.iconName,
-            iconSize = options.iconSize,
-            iconColor = options.iconColor;
-        return /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], {
-          key: options[idKey],
-          value: options[valueKey],
-          size: "medium",
-          onClick: _this4.handleChange,
-          id: options[idKey],
-          index: i,
-          title: options[valueKey],
-          palette: "default",
-          dataId: options[idKey],
-          iconName: iconName,
-          iconSize: iconSize,
-          iconClass: iconColor,
-          active: selectedId === options[idKey],
-          needBorder: needListBorder,
-          needTick: needTick,
-          onMouseEnter: _this4.handleMouseEnter,
-          highlight: selectedIndex === i,
-          getRef: _this4.itemRef,
+      })))))), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
+        query: this.responsiveFunc,
+        responsiveId: "Helmet"
+      }, function (_ref2) {
+        var tabletMode = _ref2.tabletMode;
+        return /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], {
+          animationStyle: animationStyle,
+          boxPosition: position,
+          isActive: isPopupReady,
+          isAnimate: true,
+          isArrow: false,
+          onClick: removeClose,
+          getRef: getContainerRef,
+          needResponsive: needResponsive,
+          dataId: "".concat(dataId, "_suggestions"),
+          size: boxSize,
+          isPadding: false,
+          isResponsivePadding: true,
+          alignBox: "row"
+        }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+          flexible: true
+        }, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+          onScroll: _this4.handleScroll,
+          htmlId: setAriaId,
           a11y: {
-            role: 'option',
-            ariaSelected: selectedId === options[idKey]
+            role: 'listbox'
           }
-        });
-      })) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
-        isLoading: isFetchingOptions,
-        options: options,
-        searchString: searchValue,
-        suggestions: options,
-        dataId: dataId,
-        i18nKeys: i18nKeys,
-        htmlId: ariaErrorId
-      })))) : null);
+        }, needSearch ? /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement("div", {
+          className: "".concat(_SelectModule["default"].search, " ").concat(_SelectModule["default"][size])
+        }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
+          onClear: _this4.onSearchClear,
+          onChange: _this4.onSearch,
+          placeHolder: searchBoxPlaceHolder,
+          value: searchValue,
+          maxLength: maxLength,
+          onKeyDown: _this4.handleKeyDown,
+          inputRef: _this4.searchInputRef,
+          size: searchBoxSize,
+          dataId: "".concat(dataId, "_search"),
+          a11y: {
+            ariaDescribedby: ariaErrorId
+          },
+          autoComplete: false
+        }))) : null, /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
+          customClass: "".concat(tabletMode ? _SelectModule["default"].responsivedropBoxList : _SelectModule["default"].dropBoxList, " ").concat(!tabletMode && dropBoxSize ? _SelectModule["default"][dropBoxSize] : ''),
+          shrink: true,
+          eleRef: _this4.scrollContentRef
+        }, options.length ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, options.map(function (options, i) {
+          var iconName = options.iconName,
+              iconSize = options.iconSize,
+              iconColor = options.iconColor;
+          return /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], {
+            key: options[idKey],
+            value: options[valueKey],
+            size: "medium",
+            onClick: _this4.handleChange,
+            id: options[idKey],
+            index: i,
+            title: options[valueKey],
+            palette: "default",
+            dataId: options[idKey],
+            iconName: iconName,
+            iconSize: iconSize,
+            iconClass: iconColor,
+            active: selectedId === options[idKey],
+            needBorder: needListBorder,
+            needTick: needTick,
+            onMouseEnter: _this4.handleMouseEnter,
+            highlight: selectedIndex === i,
+            getRef: _this4.itemRef,
+            a11y: {
+              role: 'option',
+              ariaSelected: selectedId === options[idKey]
+            }
+          });
+        })) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
+          isLoading: isFetchingOptions,
+          options: options,
+          searchString: searchValue,
+          suggestions: options,
+          dataId: dataId,
+          i18nKeys: i18nKeys,
+          htmlId: ariaErrorId
+        })))));
+      }) : null);
     }
   }]);
 

package/lib/Tab/Tabs.js

@@ -17,8 +17,6 @@ var _Layout = require("../Layout");
 
 var _Tab = _interopRequireDefault(require("./Tab"));
 
-var _DropBox = _interopRequireDefault(require("../DropBox/DropBox"));
-
 var _ResizeObserver = _interopRequireDefault(require("../Responsive/ResizeObserver"));
 
 var _ListItem = _interopRequireDefault(require("../ListItem/ListItem"));
@@ -29,6 +27,10 @@ var _TabsModule = _interopRequireDefault(require("./Tabs.module.css"));
 
 var _Popup = _interopRequireDefault(require("../Popup/Popup"));
 
+var _ResponsiveDropBox = _interopRequireDefault(require("../ResponsiveDropBox/ResponsiveDropBox"));
+
+var _CustomResponsive = require("../Responsive/CustomResponsive");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": 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); }
@@ -446,6 +448,16 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
       boxPosition = boxPosition ? boxPosition : popupPosition;
       togglePopup(e, boxPosition);
     }
+  }, {
+    key: "responsiveFunc",
+    value: function responsiveFunc(_ref) {
+      var mediaQueryOR = _ref.mediaQueryOR;
+      return {
+        tabletMode: mediaQueryOR([{
+          maxWidth: 700
+        }])
+      };
+    }
   }, {
     key: "renderTabs",
     value: function renderTabs(mainTabs, moreTabs, isVirtual) {
@@ -523,50 +535,61 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
       }, MoreButtonProps), /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         name: iconName,
         size: iconSize
-      })), isPopupOpen && /*#__PURE__*/_react["default"].createElement(_DropBox["default"], _extends({
-        isActive: isPopupReady,
-        isAnimate: true,
-        size: "medium",
-        customClass: {
-          customDropBoxWrap: "".concat(moreContainerClass, " ").concat(popupClass)
-        },
-        boxPosition: position,
-        getRef: getContainerRef,
-        isBoxPaddingNeed: true,
-        isArrow: false
-      }, DropBoxProps), getCustomDropBoxHeaderPlaceHolder && getCustomDropBoxHeaderPlaceHolder(this.props), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_TabsModule["default"].menuBox, " ").concat(moreBoxClass),
-        onScroll: this.onScroll
-      }, _react["default"].Children.map(moreTabs, function (child) {
-        if (!child) {
-          return null;
-        }
-
-        var _child$props = child.props,
-            text = _child$props.text,
-            id = _child$props.id,
-            title = _child$props.title,
-            isLink = _child$props.isLink,
-            href = _child$props.href,
-            children = _child$props.children,
-            dataId = _child$props.dataId;
-        var value = text ? text : showTitleInMoreOptions ? title : null;
-        return /*#__PURE__*/_react["default"].isValidElement(child) && /*#__PURE__*/_react["default"].createElement(_ListItem["default"], _extends({
-          key: id,
-          value: value,
-          onClick: _this8.moreTabSelect,
-          id: id,
-          title: title || text,
-          isLink: isLink,
-          href: href,
-          autoHover: true,
+      })), isPopupOpen && /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
+        query: this.responsiveFunc,
+        responsiveId: "Helmet"
+      }, function (_ref2) {
+        var tabletMode = _ref2.tabletMode;
+        return /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], _extends({
+          isActive: isPopupReady,
+          isAnimate: true,
+          size: "medium",
           customClass: {
-            customListItem: menuItemClass
+            customDropBoxWrap: "".concat(moreContainerClass, " ").concat(popupClass)
           },
-          target: "self",
-          dataId: "".concat(dataId, "_Tab")
-        }, ListItemProps), !showTitleInMoreOptions ? children : null);
-      })))) : null);
+          boxPosition: position,
+          getRef: getContainerRef,
+          isBoxPaddingNeed: true,
+          isArrow: false
+        }, DropBoxProps, {
+          isResponsivePadding: true
+        }), getCustomDropBoxHeaderPlaceHolder && getCustomDropBoxHeaderPlaceHolder(_this8.props), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+          flexible: true,
+          shrink: true,
+          scroll: "vertical",
+          className: "".concat(tabletMode ? '' : _TabsModule["default"].menuBox, " ").concat(moreBoxClass),
+          onScroll: _this8.onScroll
+        }, _react["default"].Children.map(moreTabs, function (child) {
+          if (!child) {
+            return null;
+          }
+
+          var _child$props = child.props,
+              text = _child$props.text,
+              id = _child$props.id,
+              title = _child$props.title,
+              isLink = _child$props.isLink,
+              href = _child$props.href,
+              children = _child$props.children,
+              dataId = _child$props.dataId;
+          var value = text ? text : showTitleInMoreOptions ? title : null;
+          return /*#__PURE__*/_react["default"].isValidElement(child) && /*#__PURE__*/_react["default"].createElement(_ListItem["default"], _extends({
+            key: id,
+            value: value,
+            onClick: _this8.moreTabSelect,
+            id: id,
+            title: title || text,
+            isLink: isLink,
+            href: href,
+            autoHover: true,
+            customClass: {
+              customListItem: menuItemClass
+            },
+            target: "self",
+            dataId: "".concat(dataId, "_Tab")
+          }, ListItemProps), !showTitleInMoreOptions ? children : null);
+        })));
+      })) : null);
     }
   }, {
     key: "render",

package/lib/Tab/Tabs.module.css

@@ -118,13 +118,14 @@
 }
 .menuBox {
   max-height: var(--zd_size220);
-  composes: oflowy from '../common/common.module.css';
 }
 
+
 [dir=ltr] .bottomRightToLeft, [dir=ltr] .topRightToLeft, [dir=ltr] .bottomCenterToLeft {
   right: calc(var(--tab_position_gap) * -1);
 }
 
+
 [dir=rtl] .bottomRightToLeft, [dir=rtl] .topRightToLeft, [dir=rtl] .bottomCenterToLeft {
   left: calc(var(--tab_position_gap) * -1);
 }

package/lib/index.js

@@ -154,7 +154,8 @@ var _exportNames = {
   FocusScope__default: true,
   FocusRing: true,
   FocusRing__default: true,
-  LightNightMode__AlternativeColors: true
+  LightNightMode__AlternativeColors: true,
+  ResponsiveDropBox: true
 };
 Object.defineProperty(exports, "Accordion", {
   enumerable: true,
@@ -786,6 +787,12 @@ Object.defineProperty(exports, "ReactDOM", {
     return _reactDom["default"];
   }
 });
+Object.defineProperty(exports, "ResponsiveDropBox", {
+  enumerable: true,
+  get: function get() {
+    return _ResponsiveDropBox["default"];
+  }
+});
 Object.defineProperty(exports, "Responsive__Custom", {
   enumerable: true,
   get: function get() {
@@ -1409,4 +1416,6 @@ var _FocusRing__default = _interopRequireDefault(require("./beta/FocusRing/docs/
 
 var _AlternativeColors = _interopRequireDefault(require("./LightNightMode/docs/AlternativeColors.docs"));
 
+var _ResponsiveDropBox = _interopRequireDefault(require("./ResponsiveDropBox/ResponsiveDropBox"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-alpha-239",
+  "version": "1.0.0-alpha-240",
   "main": "lib/index.js",
   "module": "es/index.js",
   "jsnext:main": "es/index.js",
@@ -58,8 +58,8 @@
     "react-sortable-hoc": "^0.8.3"
   },
   "react-cli": {
-    "preprocessor": {
-      "runner": "preprocess/index.js"
+    "preprocess": {
+      "runner": "./preprocess/index.js"
     },
     "docs": {
       "disableES5Transpile": true,