@zohodesk/components 1.0.0-alpha-255 → 1.0.0-alpha-257

package/lib/Avatar/Avatar.js

@@ -158,11 +158,11 @@ var Avatar = /*#__PURE__*/function (_React$Component) {
       initial = initial || this.getInitialByFullName(name);
       var isInvalidImageList = Avatar.invalidImageURLs.indexOf(src) !== -1;
       var isValidImageList = Avatar.validImageURLs.indexOf(src) !== -1;
-      var border = borderOnHover || onClick;
-      var borderStyle = (!src || src && isInvalidImageList || !isValidImageList) && needBorder ? "".concat(_AvatarModule["default"].border, " ").concat(borderOnActive ? _AvatarModule["default"].borderOnActive : border ? _AvatarModule["default"].borderOnHover : '', " ") : '';
       var showAvatar = src && !isInvalidImageList;
-      var showInitial = !showAvatar || showAvatar && !isValidImageList;
+      var showInitial = !showAvatar || showAvatar && isInvalidImageList;
       var showAlternateAvatar = alternateSrc ? showInitial : false;
+      var border = borderOnHover || onClick;
+      var borderStyle = (!src || !showAvatar || showInitial) && needBorder ? "".concat(_AvatarModule["default"].border, " ").concat(borderOnActive ? _AvatarModule["default"].borderOnActive : border ? _AvatarModule["default"].borderOnHover : '', " ") : '';
       borderStyle = showAlternateAvatar ? '' : borderStyle;
       return /*#__PURE__*/_react["default"].createElement("div", _extends({
         className: "".concat(_AvatarModule["default"].avatar, " ").concat(_AvatarModule["default"][size], " ").concat((0, _AvatarSize["default"])(size), " ").concat(_AvatarModule["default"][shapeStyle], " ").concat(_AvatarModule["default"][palette], " ").concat(textStyle, " ").concat(borderStyle, " ").concat(customClass ? customClass : ''),
@@ -192,9 +192,9 @@ Avatar.defaultProps = _defaultProps.defaultProps;
 Avatar.propTypes = _propTypes.propTypes;
 Avatar.invalidImageURLs = [];
 Avatar.validImageURLs = [];
-if (false) {
-  Avatar.docs = {
-    componentGroup: 'Avatar Group',
-    folderName: 'Style Guide'
-  };
-}
+// if (__DOCS__) {
+//   Avatar.docs = {
+//     componentGroup: 'Avatar Group',
+//     folderName: 'Style Guide'
+//   };
+// }

package/lib/AvatarTeam/AvatarTeam.js

@@ -90,10 +90,11 @@ var AvatarTeam = /*#__PURE__*/function (_React$Component) {
 exports["default"] = AvatarTeam;
 AvatarTeam.defaultProps = _defaultProps.defaultProps;
 AvatarTeam.propTypes = _propTypes.propTypes;
-if (false) {
-  AvatarTeam.docs = {
-    componentGroup: 'Avatar Group',
-    folderName: 'Style Guide',
-    external: true
-  };
-}
+
+// if (__DOCS__) {
+//   AvatarTeam.docs = {
+//     componentGroup: 'Avatar Group',
+//     folderName: 'Style Guide',
+//     external: true
+//   };
+// }

package/lib/Button/Button.js

@@ -84,9 +84,10 @@ var Button = /*#__PURE__*/function (_React$Component) {
 exports["default"] = Button;
 Button.defaultProps = _defaultProps.defaultProps;
 Button.propTypes = _propTypes.propTypes;
-if (false) {
-  Button.docs = {
-    componentGroup: 'Form Elements',
-    folderName: 'Style Guide'
-  };
-}
+
+// if (__DOCS__) {
+//   Button.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide'
+//   };
+// }

package/lib/Button/Button.module.css

@@ -24,23 +24,26 @@
   /* button success status default variable */
   --button_success_border_color: var(--zdt_button_success_default_border);
 }
-.default {
+.native {
   composes: varClass;
-  transition: all var(--zd_transition2) ease 0s;
+  /* transition: all var(--zd_transition2) ease 0s; */
   letter-spacing: var(--button_letter_spacing);
   opacity: var(--button_opacity);
+  transition-property: background-color, color, border; 
+  transition-duration: var(--zd_transition2); 
+  transition-timing-function: ease;
   border: 0;
   cursor: var(--button_cursor);
 }
 
-.default:disabled {
+.native:disabled {
   pointer-events: none;
   --button_cursor: not-allowed;
   --button_opacity: 0.4;
 }
 
 .container {
-  composes: default;
+  composes: native;
   composes: dotted from '../common/common.module.css';
   position: relative;
   font-size: var(--button_font_size);

package/lib/Button/props/defaultProps.js

@@ -17,6 +17,7 @@ var defaultProps = {
   size: 'medium',
   status: 'none',
   text: 'Button',
-  customClass: {}
+  customClass: {},
+  customProps: {}
 };
 exports.defaultProps = defaultProps;

package/lib/Button/props/propTypes.js

@@ -25,6 +25,7 @@ var propTypes = {
     customButton: _propTypes["default"].string,
     customStatus: _propTypes["default"].string,
     customStatusSize: _propTypes["default"].string
-  })
+  }),
+  customProps: _propTypes["default"].object
 };
 exports.propTypes = propTypes;

package/lib/Buttongroup/Buttongroup.js

@@ -55,15 +55,18 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 exports["default"] = Buttongroup;
 Buttongroup.defaultProps = _defaultProps.defaultProps;
 Buttongroup.propTypes = _propTypes.propTypes;
-if (false) {
-  Buttongroup.docs = {
-    componentGroup: 'Molecule',
-    folderName: 'Style Guide',
-    external: false,
-    description: ' ',
-    images: [{
-      view: 'http://zsupport-tech-1.tsi.zohocorpin.com:8080/ui/general/ButtonGroup/v1/ButtonGroup.png',
-      psd: 'http://zsupport-tech-1.tsi.zohocorpin.com:8080/ui/general/ButtonGroup/v1/ButtonGroup.psd'
-    }]
-  };
-}
+
+// if (__DOCS__) {
+//   Buttongroup.docs = {
+//     componentGroup: 'Molecule',
+//     folderName: 'Style Guide',
+//     external: false,
+//     description: ' ',
+//     images: [
+//       {
+//         view: 'http://zsupport-tech-1.tsi.zohocorpin.com:8080/ui/general/ButtonGroup/v1/ButtonGroup.png',
+//         psd: 'http://zsupport-tech-1.tsi.zohocorpin.com:8080/ui/general/ButtonGroup/v1/ButtonGroup.psd'
+//       }
+//     ]
+//   };
+// }

package/lib/Card/Card.js

@@ -265,14 +265,15 @@ var Card = /*#__PURE__*/function (_Component3) {
 exports["default"] = Card;
 Card.propTypes = _propTypes.Card_propTypes;
 Card.defaultProps = _defaultProps.Card_defaultProps;
-if (false) {
-  Card.docs = {
-    componentGroup: 'Template',
-    folderName: 'Style Guide',
-    external: true,
-    description: ' '
-  };
-}
+
+// if (__DOCS__) {
+//   Card.docs = {
+//     componentGroup: 'Template',
+//     folderName: 'Style Guide',
+//     external: true,
+//     description: ' '
+//   };
+// }
 var CardFooter = /*#__PURE__*/function (_Component4) {
   _inherits(CardFooter, _Component4);
   var _super4 = _createSuper(CardFooter);

package/lib/CheckBox/CheckBox.js

@@ -175,9 +175,10 @@ var CheckBox = /*#__PURE__*/function (_React$Component) {
 exports["default"] = CheckBox;
 CheckBox.defaultProps = _defaultProps.defaultProps;
 CheckBox.propTypes = _propTypes.propTypes;
-if (false) {
-  CheckBox.docs = {
-    componentGroup: 'Form Elements',
-    folderName: 'Style Guide'
-  };
-}
+
+// if (__DOCS__) {
+//   CheckBox.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide'
+//   };
+// }

package/lib/DateTime/DateWidget.js

@@ -906,7 +906,9 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
         targetOffset = _this$props11.targetOffset,
         isRestrictScroll = _this$props11.isRestrictScroll,
         dropBoxPortalId = _this$props11.dropBoxPortalId,
-        a11y = _this$props11.a11y;
+        a11y = _this$props11.a11y,
+        boxSize = _this$props11.boxSize,
+        onError = _this$props11.onError;
       var _this$state5 = this.state,
         _this$state5$selected = _this$state5.selected,
         value = _this$state5$selected === void 0 ? '' : _this$state5$selected,
@@ -991,7 +993,9 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
         positionsOffset: positionsOffset,
         targetOffset: targetOffset,
         isRestrictScroll: isRestrictScroll,
-        dropBoxPortalId: dropBoxPortalId
+        dropBoxPortalId: dropBoxPortalId,
+        boxSize: boxSize,
+        onError: onError
       }));
     }
   }]);
@@ -1003,15 +1007,15 @@ var DateWidget = (0, _Popup["default"])(DateWidgetComponent);
 DateWidget.defaultProps = DateWidgetComponent.defaultProps;
 
 // eslint-disable-next-line no-undef
-if (false) {
-  DateWidgetComponent.docs = {
-    componentGroup: 'Form Elements',
-    folderName: 'Style Guide',
-    external: true,
-    description: ' '
-  };
-  // eslint-disable-next-line react/forbid-foreign-prop-types
-  DateWidget.propTypes = DateWidgetComponent.propTypes;
-}
+// if (__DOCS__) {
+//   DateWidgetComponent.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide',
+//     external: true,
+//     description: ' '
+//   };
+//   // eslint-disable-next-line react/forbid-foreign-prop-types
+//   DateWidget.propTypes = DateWidgetComponent.propTypes;
+// }
 var _default = DateWidget;
 exports["default"] = _default;

package/lib/DateTime/props/propTypes.js

@@ -131,7 +131,9 @@ var DateWidget_propTypes = {
   is24Hour: _propTypes["default"].bool,
   isHideCurrentYear: _propTypes["default"].bool,
   onFocus: _propTypes["default"].func,
-  onBlur: _propTypes["default"].func
+  onBlur: _propTypes["default"].func,
+  boxSize: _propTypes["default"].string,
+  onError: _propTypes["default"].func
 };
 exports.DateWidget_propTypes = DateWidget_propTypes;
 var YearView_propTypes = {

package/lib/DropBox/DropBox.js

@@ -276,11 +276,11 @@ exports["default"] = DropBox;
 DropBox.propTypes = _propTypes.propTypes;
 DropBox.contextType = _LibraryContextInit["default"];
 DropBox.defaultProps = _defaultProps.defaultProps;
-if (false) {
-  DropBox.docs = {
-    componentGroup: 'Atom',
-    folderName: 'Style Guide',
-    external: true,
-    description: ' '
-  };
-}
+// if (__DOCS__) {
+//   DropBox.docs = {
+//     componentGroup: 'Atom',
+//     folderName: 'Style Guide',
+//     external: true,
+//     description: ' '
+//   };
+// }

package/lib/DropDown/DropDown.js

@@ -41,12 +41,13 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 }(_react["default"].Component);
 exports["default"] = DropDown;
 DropDown.propTypes = _propTypes.DropDown_propTypes;
-if (false) {
-  DropDown.docs = {
-    componentGroup: 'Form Elements',
-    folderName: 'Style Guide'
-  };
-}
+
+// if (__DOCS__) {
+//   DropDown.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide'
+//   };
+// }
 var DropDownTarget = /*#__PURE__*/function (_React$Component2) {
   _inherits(DropDownTarget, _React$Component2);
   var _super2 = _createSuper(DropDownTarget);

package/lib/DropDown/DropDownHeading.js

@@ -58,9 +58,10 @@ var DropDownHeading = /*#__PURE__*/function (_React$Component) {
 exports["default"] = DropDownHeading;
 DropDownHeading.propTypes = _propTypes.DropDownHeading_propTypes;
 DropDownHeading.defaultProps = _defaultProps.DropDownHeading_defaultProps;
-if (false) {
-  DropDownHeading.docs = {
-    componentGroup: 'Form Elements',
-    folderName: 'Style Guide'
-  };
-}
+
+// if (__DOCS__) {
+//   DropDownHeading.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide'
+//   };
+// }

package/lib/Heading/Heading.js

@@ -56,9 +56,10 @@ var Heading = /*#__PURE__*/function (_React$Component) {
 exports["default"] = Heading;
 Heading.propTypes = _propTypes.propTypes;
 Heading.defaultProps = _defaultProps.defaultProps;
-if (false) {
-  Heading.docs = {
-    folderName: 'Style Guide',
-    componentGroup: 'Accessibility'
-  };
-}
+
+// if (__DOCS__) {
+//   Heading.docs = {
+//     folderName: 'Style Guide',
+//     componentGroup: 'Accessibility'
+//   };
+// }

package/lib/Label/Label.js

@@ -59,9 +59,10 @@ var Label = /*#__PURE__*/function (_React$Component) {
 exports["default"] = Label;
 Label.defaultProps = _defaultProps.defaultProps;
 Label.propTypes = _propTypes.propTypes;
-if (false) {
-  Label.docs = {
-    componentGroup: 'Form Elements',
-    folderName: 'Style Guide'
-  };
-}
+
+// if (__DOCS__) {
+//   Label.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide'
+//   };
+// }

package/lib/ListItem/ListContainer.js

@@ -86,11 +86,10 @@ var ListContainer = function ListContainer(props) {
 };
 ListContainer.defaultProps = _defaultProps.ListContainerDefaultProps;
 ListContainer.propTypes = _propTypes.ListContainer_Props;
-var _default = ListContainer;
-exports["default"] = _default;
-if (false) {
-  ListContainer.docs = {
-    componentGroup: 'Molecule',
-    folderName: 'Style Guide'
-  };
-}
+var _default = ListContainer; // if (__DOCS__) {
+//   ListContainer.docs = {
+//     componentGroup: 'Molecule',
+//     folderName: 'Style Guide'
+//   };
+// }
+exports["default"] = _default;

package/lib/ListItem/ListItem.js

@@ -145,9 +145,10 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
 exports["default"] = ListItem;
 ListItem.defaultProps = _defaultProps.ListItemDefaultProps;
 ListItem.propTypes = _propTypes.ListItem_Props;
-if (false) {
-  ListItem.docs = {
-    componentGroup: 'Molecule',
-    folderName: 'Style Guide'
-  };
-}
+
+// if (__DOCS__) {
+//   ListItem.docs = {
+//     componentGroup: 'Molecule',
+//     folderName: 'Style Guide'
+//   };
+// }

package/lib/ListItem/ListItemWithAvatar.js

@@ -167,9 +167,9 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
 exports["default"] = ListItemWithAvatar;
 ListItemWithAvatar.defaultProps = _defaultProps.ListItemWithAvatarDefaultProps;
 ListItemWithAvatar.propTypes = _propTypes.ListItemWithAvatar_Props;
-if (false) {
-  ListItemWithAvatar.docs = {
-    componentGroup: 'Molecule',
-    folderName: 'Style Guide'
-  };
-}
+// if (__DOCS__) {
+//   ListItemWithAvatar.docs = {
+//     componentGroup: 'Molecule',
+//     folderName: 'Style Guide'
+//   };
+// }

package/lib/ListItem/ListItemWithCheckBox.js

@@ -133,9 +133,9 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
 exports["default"] = ListItemWithCheckBox;
 ListItemWithCheckBox.defaultProps = _defaultProps.ListItemWithCheckBoxDefaultProps;
 ListItemWithCheckBox.propTypes = _propTypes.ListItemWithCheckBox_Props;
-if (false) {
-  ListItemWithCheckBox.docs = {
-    componentGroup: 'Molecule',
-    folderName: 'Style Guide'
-  };
-}
+// if (__DOCS__) {
+//   ListItemWithCheckBox.docs = {
+//     componentGroup: 'Molecule',
+//     folderName: 'Style Guide'
+//   };
+// }

package/lib/ListItem/ListItemWithIcon.js

@@ -150,9 +150,10 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
 exports["default"] = ListItemWithIcon;
 ListItemWithIcon.defaultProps = _defaultProps.ListItemWithIconDefaultProps;
 ListItemWithIcon.propTypes = _propTypes.ListItemWithIcon_Props;
-if (false) {
-  ListItemWithIcon.docs = {
-    componentGroup: 'Molecule',
-    folderName: 'Style Guide'
-  };
-}
+
+// if (__DOCS__) {
+//   ListItemWithIcon.docs = {
+//     componentGroup: 'Molecule',
+//     folderName: 'Style Guide'
+//   };
+// }

package/lib/ListItem/ListItemWithRadio.js

@@ -135,9 +135,10 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
 exports["default"] = ListItemWithRadio;
 ListItemWithRadio.defaultProps = _defaultProps.ListItemWithRadioDefaultProps;
 ListItemWithRadio.propTypes = _propTypes.ListItemWithRadio_Props;
-if (false) {
-  ListItemWithRadio.docs = {
-    componentGroup: 'Molecule',
-    folderName: 'Style Guide'
-  };
-}
+
+// if (__DOCS__) {
+//   ListItemWithRadio.docs = {
+//     componentGroup: 'Molecule',
+//     folderName: 'Style Guide'
+//   };
+// }

package/lib/Modal/Modal.js

@@ -164,11 +164,12 @@ var Modal = /*#__PURE__*/function (_React$Component) {
 exports["default"] = Modal;
 Modal.defaultProps = _defaultProps.defaultProps;
 Modal.propTypes = _propTypes.propTypes;
-if (false) {
-  Modal.docs = {
-    componentGroup: 'Atom',
-    folderName: 'Style Guide',
-    external: false,
-    description: ' '
-  };
-}
+
+// if (__DOCS__) {
+//   Modal.docs = {
+//     componentGroup: 'Atom',
+//     folderName: 'Style Guide',
+//     external: false,
+//     description: ' '
+//   };
+// }

package/lib/MultiSelect/AdvancedGroupMultiSelect.js

@@ -1022,11 +1022,11 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
 }(_react["default"].Component);
 AdvancedGroupMultiSelect.defaultProps = _defaultProps.AdvancedGroupMultiSelect_defaultProps;
 AdvancedGroupMultiSelect.propTypes = _propTypes.AdvancedGroupMultiSelect_propTypes;
-if (false) {
-  AdvancedGroupMultiSelect.docs = {
-    componentGroup: 'Form Elements',
-    folderName: 'Style Guide'
-  };
-}
+// if (__DOCS__) {
+//   AdvancedGroupMultiSelect.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide'
+//   };
+// }
 var _default = (0, _Popup["default"])(AdvancedGroupMultiSelect);
 exports["default"] = _default;

package/lib/MultiSelect/AdvancedMultiSelect.js

@@ -540,13 +540,14 @@ AdvancedMultiSelectComponent.defaultProps = _defaultProps.AdvancedMultiSelect_de
 AdvancedMultiSelectComponent.displayName = 'AdvancedMultiSelect';
 var AdvancedMultiSelect = (0, _Popup["default"])(AdvancedMultiSelectComponent);
 AdvancedMultiSelect.defaultProps = AdvancedMultiSelectComponent.defaultProps;
-if (false) {
-  AdvancedMultiSelectComponent.docs = {
-    componentGroup: 'Form Elements',
-    folderName: 'Style Guide'
-  };
-  // eslint-disable-next-line react/forbid-foreign-prop-types
-  AdvancedMultiSelect.propTypes = AdvancedMultiSelectComponent.propTypes;
-}
+
+// if (__DOCS__) {
+//   AdvancedMultiSelectComponent.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide'
+//   };
+//   // eslint-disable-next-line react/forbid-foreign-prop-types
+//   AdvancedMultiSelect.propTypes = AdvancedMultiSelectComponent.propTypes;
+// }
 var _default = AdvancedMultiSelect;
 exports["default"] = _default;

package/lib/MultiSelect/MultiSelect.js

@@ -1032,12 +1032,13 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
 exports.MultiSelectComponent = MultiSelectComponent;
 MultiSelectComponent.propTypes = _propTypes.MultiSelect_propTypes;
 MultiSelectComponent.defaultProps = _defaultProps.MultiSelect_defaultProps;
-if (false) {
-  MultiSelectComponent.docs = {
-    componentGroup: 'Form Elements',
-    folderName: 'Style Guide'
-  };
-}
+
+// if (__DOCS__) {
+//   MultiSelectComponent.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide'
+//   };
+// }
 MultiSelectComponent.displayName = 'MultiSelect';
 var MultiSelect = (0, _Popup["default"])(MultiSelectComponent);
 MultiSelect.propTypes = MultiSelectComponent.propTypes;

package/lib/MultiSelect/MultiSelectWithAvatar.js

@@ -292,13 +292,14 @@ MultiSelectWithAvatarComponent.defaultProps = _defaultProps.MultiSelectWithAvata
 MultiSelectWithAvatarComponent.displayName = 'MultiSelectWithAvatar';
 var MultiSelectWithAvatar = (0, _Popup["default"])(MultiSelectWithAvatarComponent);
 MultiSelectWithAvatar.defaultProps = MultiSelectWithAvatarComponent.defaultProps;
-if (false) {
-  MultiSelectWithAvatarComponent.docs = {
-    componentGroup: 'Form Elements',
-    folderName: 'Style Guide'
-  };
-  // eslint-disable-next-line react/forbid-foreign-prop-types
-  MultiSelectWithAvatar.propTypes = MultiSelectWithAvatarComponent.propTypes;
-}
+
+// if (__DOCS__) {
+//   MultiSelectWithAvatarComponent.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide'
+//   };
+//   // eslint-disable-next-line react/forbid-foreign-prop-types
+//   MultiSelectWithAvatar.propTypes = MultiSelectWithAvatarComponent.propTypes;
+// }
 var _default = MultiSelectWithAvatar;
 exports["default"] = _default;

package/lib/PopOver/PopOver.js

@@ -130,14 +130,14 @@ var PopOver = /*#__PURE__*/function (_React$Component) {
 }(_react["default"].Component);
 PopOver.defaultProps = _defaultProps.PopOver_defaultProps;
 PopOver.propTypes = _propTypes.PopOver_propTypes;
-if (false) {
-  PopOver.docs = {
-    componentGroup: 'Form Elements',
-    folderName: 'Style Guide',
-    description: ' ',
-    external: true
-  };
-}
+// if (__DOCS__) {
+//   PopOver.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide',
+//     description: ' ',
+//     external: true
+//   };
+// }
 var _default = (0, _Popup["default"])(PopOver);
 exports["default"] = _default;
 var PopOverTarget = /*#__PURE__*/function (_React$Component2) {

package/lib/Radio/Radio.js

@@ -138,9 +138,9 @@ var Radio = /*#__PURE__*/function (_React$Component) {
 exports["default"] = Radio;
 Radio.defaultProps = _defaultProps.defaultProps;
 Radio.propTypes = _propTypes.propTypes;
-if (false) {
-  Radio.docs = {
-    componentGroup: 'Form Elements',
-    folderName: 'Style Guide'
-  };
-}
+// if (__DOCS__) {
+//   Radio.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide'
+//   };
+// }