@zohodesk/components 1.0.0-temp-256 → 1.0.0-temp-257.1

package/lib/DropDown/DropDown.js

@@ -13,6 +13,8 @@ var _propTypes = require("./props/propTypes");
 
 var _defaultProps = require("./props/defaultProps");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _DropDownModule = _interopRequireDefault(require("./DropDown.module.css"));
 
 var _PopOver = _interopRequireWildcard(require("../PopOver/PopOver"));
@@ -154,7 +156,7 @@ var DropDownItemContainer = /*#__PURE__*/function (_React$Component4) {
           children = _this$props.children,
           dataId = _this$props.dataId;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: _DropDownModule["default"].listGroup,
+        className: (0, _cssUtility.cn)(_DropDownModule["default"].listGroup),
         onScroll: this.onScroll,
         ref: this.getRef,
         "data-id": dataId,

package/lib/DropDown/DropDownHeading.js

@@ -13,6 +13,8 @@ var _propTypes = require("./props/propTypes");
 
 var _defaultProps = require("./props/defaultProps");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _DropDownHeadingModule = _interopRequireDefault(require("./DropDownHeading.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -66,7 +68,7 @@ var DropDownHeading = /*#__PURE__*/function (_React$Component) {
           ariaLabelledby = a11y.ariaLabelledby,
           ariaLabel = a11y.ariaLabel;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_DropDownHeadingModule["default"][palette], " ").concat(customClass),
+        className: (0, _cssUtility.cn)("".concat(_DropDownHeadingModule["default"][palette], " ").concat(customClass)),
         "data-title": title,
         role: role,
         "aria-labelledby": ariaLabelledby,

package/lib/DropDown/DropDownItem.js

@@ -13,6 +13,8 @@ var _propTypes = require("./props/propTypes");
 
 var _defaultProps = require("./props/defaultProps");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _DropDownItemModule = _interopRequireDefault(require("./DropDownItem.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -101,20 +103,20 @@ var DropDownItem = /*#__PURE__*/function (_React$Component) {
           _this$props4$customCl = _this$props4.customClass,
           customClass = _this$props4$customCl === void 0 ? '' : _this$props4$customCl;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_DropDownItemModule["default"].list, " ").concat(customClass, " ").concat(active ? _DropDownItemModule["default"].listActive : hightlight ? _DropDownItemModule["default"].listHover : '', " ").concat(children && children[1] ? _DropDownItemModule["default"].padding : ''),
+        className: (0, _cssUtility.cn)("".concat(_DropDownItemModule["default"].list, "  ").concat(active ? _DropDownItemModule["default"].listActive : hightlight ? _DropDownItemModule["default"].listHover : '', " ").concat(children && children[1] ? _DropDownItemModule["default"].padding : '', " ").concat(customClass)),
         onClick: this.onClick,
         onMouseOver: this.onHover,
         ref: this.getRef,
         "data-id": dataId,
         "data-test-id": dataId
       }, children && children[0] ? /*#__PURE__*/_react["default"].createElement("span", {
-        className: _DropDownItemModule["default"].children
+        className: (0, _cssUtility.cn)(_DropDownItemModule["default"].children)
       }, " ", children[0], " ") : children !== undefined ? /*#__PURE__*/_react["default"].createElement("span", {
-        className: _DropDownItemModule["default"].children
+        className: (0, _cssUtility.cn)(_DropDownItemModule["default"].children)
       }, " ", children, " ") : null, value ? /*#__PURE__*/_react["default"].createElement("span", {
-        className: _DropDownItemModule["default"].value
+        className: (0, _cssUtility.cn)(_DropDownItemModule["default"].value)
       }, value) : '', children && children[1] ? /*#__PURE__*/_react["default"].createElement("span", {
-        className: _DropDownItemModule["default"].user
+        className: (0, _cssUtility.cn)(_DropDownItemModule["default"].user)
       }, " ", children[1], " ") : '');
     }
   }]);

package/lib/DropDown/DropDownSearch.js

@@ -15,6 +15,8 @@ var _defaultProps = require("./props/defaultProps");
 
 var _TextBox = _interopRequireDefault(require("../TextBox/TextBox"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _DropDownSearchModule = _interopRequireDefault(require("./DropDownSearch.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -90,7 +92,7 @@ var DropDownSearch = /*#__PURE__*/function (_React$Component) {
           _customClass$customTe = customClass.customTextBox,
           customTextBox = _customClass$customTe === void 0 ? '' : _customClass$customTe;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_DropDownSearchModule["default"].search, " ").concat(_DropDownSearchModule["default"]["".concat(size, "Search")], " ").concat(searchClass),
+        className: (0, _cssUtility.cn)("".concat(_DropDownSearchModule["default"].search, " ").concat(_DropDownSearchModule["default"]["".concat(size, "Search")], " ").concat(searchClass)),
         "data-id": dataId,
         "data-test-id": dataId
       }, /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {

package/lib/DropDown/DropDownSeparator.js

@@ -11,6 +11,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = require("./props/propTypes");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _DropDownSeparatorModule = _interopRequireDefault(require("./DropDownSeparator.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -52,7 +54,7 @@ var DropDownSeparator = /*#__PURE__*/function (_React$Component) {
       var _this$props$customCla = this.props.customClass,
           customClass = _this$props$customCla === void 0 ? '' : _this$props$customCla;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_DropDownSeparatorModule["default"].separator, " ").concat(customClass)
+        className: (0, _cssUtility.cn)("".concat(_DropDownSeparatorModule["default"].separator, " ").concat(customClass))
       });
     }
   }]);

package/lib/DropDown/__tests__/__snapshots__/DropDown.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`DropDown rendering the defult props 1`] = `
 <DocumentFragment>
@@ -31,13 +31,13 @@ exports[`DropDown rendering the defult props 1`] = `
         tabindex="-1"
       >
         <div
-          class="flex rowdir"
+          class="flex row"
           data-id="containerComponent"
           data-selector-id="container"
           data-test-id="containerComponent"
         >
           <div
-            class="grow basis shrinkOn scrolly"
+            class="flexible basis_zero shrink scroll_vertical"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"

package/lib/DropDown/__tests__/__snapshots__/DropDownHeading.spec.js.snap

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`DropDownHeading rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="light "
+    class="light"
     data-id="DropDownHeading"
     data-selector-id="dropdownHeading"
     data-test-id="DropDownHeading"

package/lib/DropDown/__tests__/__snapshots__/DropDownItem.spec.js.snap

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`DropDownItem rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="list   "
+    class="list"
     data-id="dropDwnItemContainer"
     data-test-id="dropDwnItemContainer"
   />

package/lib/DropDown/__tests__/__snapshots__/DropDownSearch.spec.js.snap

@@ -1,14 +1,14 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`DropDownSearch rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="search mediumSearch "
+    class="search mediumSearch"
     data-id="DropDownSearch"
     data-test-id="DropDownSearch"
   >
     <input
-      class="  container medium  default border effect  borderColor_default  "
+      class="container medium default border effect borderColor_default"
       data-id="textBox"
       data-selector-id="textBox"
       data-test-id="textBox"

package/lib/DropDown/__tests__/__snapshots__/DropDownSeparator.spec.js.snap

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`DropDownSeparator rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="separator "
+    class="separator"
   />
 </DocumentFragment>
 `;

package/lib/Heading/__tests__/__snapshots__/Heading.spec.js.snap

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Heading Should render whiteSpace of Heading - break-spaces 1`] = `
 <DocumentFragment>
   <h1
-    class="reset whiteSpace_breakSpaces "
+    class="reset whiteSpace_breakSpaces"
     data-title-wrap="break-spaces"
   />
 </DocumentFragment>
@@ -12,7 +12,7 @@ exports[`Heading Should render whiteSpace of Heading - break-spaces 1`] = `
 exports[`Heading Should render whiteSpace of Heading - normal 1`] = `
 <DocumentFragment>
   <h1
-    class="reset whiteSpace_normal "
+    class="reset whiteSpace_normal"
     data-title-wrap="normal"
   />
 </DocumentFragment>
@@ -21,7 +21,7 @@ exports[`Heading Should render whiteSpace of Heading - normal 1`] = `
 exports[`Heading Should render whiteSpace of Heading - nowrap 1`] = `
 <DocumentFragment>
   <h1
-    class="reset whiteSpace_nowrap "
+    class="reset whiteSpace_nowrap"
     data-title-wrap="nowrap"
   />
 </DocumentFragment>
@@ -30,7 +30,7 @@ exports[`Heading Should render whiteSpace of Heading - nowrap 1`] = `
 exports[`Heading Should render whiteSpace of Heading - pre 1`] = `
 <DocumentFragment>
   <h1
-    class="reset whiteSpace_pre "
+    class="reset whiteSpace_pre"
     data-title-wrap="pre"
   />
 </DocumentFragment>
@@ -39,7 +39,7 @@ exports[`Heading Should render whiteSpace of Heading - pre 1`] = `
 exports[`Heading Should render whiteSpace of Heading - pre-line 1`] = `
 <DocumentFragment>
   <h1
-    class="reset whiteSpace_preLine "
+    class="reset whiteSpace_preLine"
     data-title-wrap="pre-line"
   />
 </DocumentFragment>
@@ -48,7 +48,7 @@ exports[`Heading Should render whiteSpace of Heading - pre-line 1`] = `
 exports[`Heading Should render whiteSpace of Heading - pre-wrap 1`] = `
 <DocumentFragment>
   <h1
-    class="reset whiteSpace_preWrap "
+    class="reset whiteSpace_preWrap"
     data-title-wrap="pre-wrap"
   />
 </DocumentFragment>
@@ -57,7 +57,7 @@ exports[`Heading Should render whiteSpace of Heading - pre-wrap 1`] = `
 exports[`Heading rendering the defult props 1`] = `
 <DocumentFragment>
   <h1
-    class="reset  "
+    class="reset"
   />
 </DocumentFragment>
 `;

package/lib/Label/Label.js

@@ -17,6 +17,8 @@ var _Flex = _interopRequireDefault(require("@zohodesk/layout/es/Flex/Flex"));
 
 var _utils = require("@zohodesk/utils");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _LabelModule = _interopRequireDefault(require("./Label.module.css"));
 
 var _LabelColorsModule = _interopRequireDefault(require("./LabelColors.module.css"));
@@ -82,7 +84,7 @@ var Label = /*#__PURE__*/function (_React$Component) {
       var tabIndex = a11y.tabIndex;
 
       var labelElement = /*#__PURE__*/_react["default"].createElement("label", {
-        className: "".concat(_LabelModule["default"].label, " ").concat(_LabelModule["default"][type], " ").concat(_LabelModule["default"][size], " ").concat(_LabelColorsModule["default"][palette], " ").concat(_LabelModule["default"]["font_".concat(variant)], "\n          ").concat(clipped ? _LabelModule["default"].dotted : '', " ").concat(onClick ? _LabelModule["default"].pointer : _LabelModule["default"].cursor, " ").concat(customClass, " "),
+        className: (0, _cssUtility.cn)("".concat(_LabelModule["default"].label, " ").concat(_LabelModule["default"][type], " ").concat(_LabelModule["default"][size], " ").concat(_LabelColorsModule["default"][palette], " ").concat(_LabelModule["default"]["font_".concat(variant)], "\n          ").concat(clipped ? _LabelModule["default"].dotted : '', " ").concat(onClick ? _LabelModule["default"].pointer : _LabelModule["default"].cursor, " ").concat(customClass)),
         htmlFor: htmlFor,
         "data-title": title,
         "data-id": dataId,

package/lib/Label/__tests__/__snapshots__/Label.spec.js.snap

@@ -1,10 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Label rendering the Id 1`] = `
 <DocumentFragment>
   <label
-    class="label title medium default font_default
-           cursor  "
+    class="label title medium default font_default cursor"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -18,8 +17,7 @@ exports[`Label rendering the Id 1`] = `
 exports[`Label rendering the clipped is true 1`] = `
 <DocumentFragment>
   <label
-    class="label title medium default font_default
-          dotted cursor  "
+    class="label title medium default font_default dotted cursor"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -32,8 +30,7 @@ exports[`Label rendering the clipped is true 1`] = `
 exports[`Label rendering the customClass 1`] = `
 <DocumentFragment>
   <label
-    class="label title medium default font_default
-           cursor LabelCustomClass "
+    class="label title medium default font_default cursor LabelCustomClass"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -46,8 +43,7 @@ exports[`Label rendering the customClass 1`] = `
 exports[`Label rendering the defult props 1`] = `
 <DocumentFragment>
   <label
-    class="label title medium default font_default
-           cursor  "
+    class="label title medium default font_default cursor"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -60,8 +56,7 @@ exports[`Label rendering the defult props 1`] = `
 exports[`Label rendering the htmlFor 1`] = `
 <DocumentFragment>
   <label
-    class="label title medium default font_default
-           cursor  "
+    class="label title medium default font_default cursor"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -75,8 +70,7 @@ exports[`Label rendering the htmlFor 1`] = `
 exports[`Label rendering the onClick prop with asFragment and toMatchSnapshot 1`] = `
 <DocumentFragment>
   <label
-    class="label title medium default font_default
-           pointer  "
+    class="label title medium default font_default pointer"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -89,8 +83,7 @@ exports[`Label rendering the onClick prop with asFragment and toMatchSnapshot 1`
 exports[`Label rendering the palette of- danger 1`] = `
 <DocumentFragment>
   <label
-    class="label title medium danger font_default
-           cursor  "
+    class="label title medium danger font_default cursor"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -103,8 +96,7 @@ exports[`Label rendering the palette of- danger 1`] = `
 exports[`Label rendering the palette of- dark 1`] = `
 <DocumentFragment>
   <label
-    class="label title medium dark font_default
-           cursor  "
+    class="label title medium dark font_default cursor"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -117,8 +109,7 @@ exports[`Label rendering the palette of- dark 1`] = `
 exports[`Label rendering the palette of- default 1`] = `
 <DocumentFragment>
   <label
-    class="label title medium default font_default
-           cursor  "
+    class="label title medium default font_default cursor"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -131,8 +122,7 @@ exports[`Label rendering the palette of- default 1`] = `
 exports[`Label rendering the palette of- disable 1`] = `
 <DocumentFragment>
   <label
-    class="label title medium disable font_default
-           cursor  "
+    class="label title medium disable font_default cursor"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -145,8 +135,7 @@ exports[`Label rendering the palette of- disable 1`] = `
 exports[`Label rendering the palette of- mandatory 1`] = `
 <DocumentFragment>
   <label
-    class="label title medium mandatory font_default
-           cursor  "
+    class="label title medium mandatory font_default cursor"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -159,8 +148,7 @@ exports[`Label rendering the palette of- mandatory 1`] = `
 exports[`Label rendering the palette of- primary 1`] = `
 <DocumentFragment>
   <label
-    class="label title medium primary font_default
-           cursor  "
+    class="label title medium primary font_default cursor"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -173,8 +161,7 @@ exports[`Label rendering the palette of- primary 1`] = `
 exports[`Label rendering the palette of- secondary 1`] = `
 <DocumentFragment>
   <label
-    class="label title medium secondary font_default
-           cursor  "
+    class="label title medium secondary font_default cursor"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -187,8 +174,7 @@ exports[`Label rendering the palette of- secondary 1`] = `
 exports[`Label rendering the size of- large 1`] = `
 <DocumentFragment>
   <label
-    class="label title large default font_default
-           cursor  "
+    class="label title large default font_default cursor"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -201,8 +187,7 @@ exports[`Label rendering the size of- large 1`] = `
 exports[`Label rendering the size of- medium 1`] = `
 <DocumentFragment>
   <label
-    class="label title medium default font_default
-           cursor  "
+    class="label title medium default font_default cursor"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -215,8 +200,7 @@ exports[`Label rendering the size of- medium 1`] = `
 exports[`Label rendering the size of- small 1`] = `
 <DocumentFragment>
   <label
-    class="label title small default font_default
-           cursor  "
+    class="label title small default font_default cursor"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -229,8 +213,7 @@ exports[`Label rendering the size of- small 1`] = `
 exports[`Label rendering the size of- xsmall 1`] = `
 <DocumentFragment>
   <label
-    class="label title xsmall default font_default
-           cursor  "
+    class="label title xsmall default font_default cursor"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -243,8 +226,7 @@ exports[`Label rendering the size of- xsmall 1`] = `
 exports[`Label rendering the title 1`] = `
 <DocumentFragment>
   <label
-    class="label title medium default font_default
-           cursor  "
+    class="label title medium default font_default cursor"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -258,8 +240,7 @@ exports[`Label rendering the title 1`] = `
 exports[`Label rendering the type of- subtitle 1`] = `
 <DocumentFragment>
   <label
-    class="label subtitle medium default font_default
-           cursor  "
+    class="label subtitle medium default font_default cursor"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -272,8 +253,7 @@ exports[`Label rendering the type of- subtitle 1`] = `
 exports[`Label rendering the type of- title 1`] = `
 <DocumentFragment>
   <label
-    class="label title medium default font_default
-           cursor  "
+    class="label title medium default font_default cursor"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -286,8 +266,7 @@ exports[`Label rendering the type of- title 1`] = `
 exports[`Label rendering the variant of- default 1`] = `
 <DocumentFragment>
   <label
-    class="label title medium default font_default
-           cursor  "
+    class="label title medium default font_default cursor"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -300,8 +279,7 @@ exports[`Label rendering the variant of- default 1`] = `
 exports[`Label rendering the variant of- primary 1`] = `
 <DocumentFragment>
   <label
-    class="label title medium default font_primary
-           cursor  "
+    class="label title medium default font_primary cursor"
     data-id="label"
     data-selector-id="label"
     data-test-id="label"
@@ -320,8 +298,7 @@ exports[`Label rendering with customProps - containerProps & rightPlaceholderNod
     style="gap: 6px;"
   >
     <label
-      class="label title large danger font_default
-           cursor  "
+      class="label title large danger font_default cursor"
       data-id="label"
       data-selector-id="label"
       data-test-id="label"
@@ -353,8 +330,7 @@ exports[`Label rendering with renderRightPlaceholderNode 1`] = `
     data-test-id="flex"
   >
     <label
-      class="label title medium default font_default
-           cursor  "
+      class="label title medium default font_default cursor"
       data-id="label"
       data-selector-id="label"
       data-test-id="label"

package/lib/Layout/Box.js

@@ -3,126 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = Box;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = require("./props/propTypes");
-
-var _defaultProps = require("./props/defaultProps");
-
-var _utils = require("./utils");
-
-var _LayoutModule = _interopRequireDefault(require("./Layout.module.css"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-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; }
-
-/* eslint-disable  react/no-unused-prop-types*/
-function getBoxClassNames(props) {
-  var hidden = props.hidden,
-      className = props.className,
-      flexible = props.flexible,
-      adjust = props.adjust,
-      isFirst = props.isFirst,
-      isLast = props.isLast,
-      shrink = props.shrink,
-      column = props.column,
-      align = props.align,
-      scroll = props.scroll,
-      preventParentScroll = props.preventParentScroll;
-  var modificators = [className];
-
-  if (flexible && !adjust) {
-    modificators.push((0, _utils.getClass)(_LayoutModule["default"], 'grow'));
-    modificators.push((0, _utils.getClass)(_LayoutModule["default"], 'basis'));
-  } else if (flexible && adjust) {
-    modificators.push((0, _utils.getClass)(_LayoutModule["default"], 'grow'));
-  }
-
-  if (isFirst) {
-    modificators.push((0, _utils.getClass)(_LayoutModule["default"], 'first'));
-  }
-
-  if (isLast) {
-    modificators.push((0, _utils.getClass)(_LayoutModule["default"], 'last'));
-  }
-
-  if (adjust) {
-    modificators.push((0, _utils.getClass)(_LayoutModule["default"], 'basisAuto'));
-  }
-
-  if (shrink) {
-    modificators.push((0, _utils.getClass)(_LayoutModule["default"], 'shrinkOn'));
-  } else {
-    modificators.push((0, _utils.getClass)(_LayoutModule["default"], 'shrinkOff'));
-  }
-
-  if (hidden) {
-    hidden.forEach(function (key) {
-      modificators.push((0, _utils.getClass)(_LayoutModule["default"], "hidden-screen-".concat(key)));
-    });
-  }
-
-  if (column) {
-    modificators.push((0, _utils.getClass)(_LayoutModule["default"], "col-".concat(column)));
-  }
-
-  if (align) {
-    var alignClassMapping = {
-      start: 'selfStart',
-      end: 'selfEnd',
-      center: 'selfCenter'
-    };
-    var alignClass = alignClassMapping[align];
-    modificators.push((0, _utils.getClass)(_LayoutModule["default"], alignClass));
-  }
-
-  if (scroll) {
-    var scrollClassMapping = {
-      horizontal: 'scrollx',
-      vertical: 'scrolly',
-      both: 'scrollboth',
-      none: 'scrollnone'
-    };
-    var scrollClass = scrollClassMapping[scroll];
-    modificators.push((0, _utils.getClass)(_LayoutModule["default"], scrollClass));
-  }
-
-  if (preventParentScroll) {
-    var ParentScrollClassMapping = {
-      horizontal: 'preventScrollBubbleX',
-      vertical: 'preventScrollBubbleY',
-      both: 'preventScrollBubbleBoth'
-    };
-    var parentScrollClass = ParentScrollClassMapping[preventParentScroll];
-    modificators.push((0, _utils.getClass)(_LayoutModule["default"], parentScrollClass));
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _Box["default"];
   }
+});
 
-  return modificators;
-}
-
-function getBoxProps(props) {
-  return (0, _utils.createProps)(_propTypes.BoxProps, props, getBoxClassNames(props));
-}
-
-function Box(props) {
-  var tagName = props.tagName;
-  var componentProps = (0, _utils.setProps)(_objectSpread({}, getBoxProps(props)), props, {
-    isScrollAttribute: 'data-scroll',
-    eleRef: 'ref',
-    dataId: 'data-id',
-    testId: 'data-test-id',
-    tourId: 'data-tour',
-    dataSelectorId: 'data-selector-id'
-  });
-  return /*#__PURE__*/_react["default"].createElement(tagName, componentProps);
-}
+var _Box = _interopRequireDefault(require("@zohodesk/layout/es/Flex/Box"));
 
-Box.propTypes = _propTypes.BoxProps;
-Box.defaultProps = _defaultProps.BoxDefaultProps;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }