@mohamed-karawia/library 0.1.14 → 0.1.18

package/dist/stories/Chat/Chat.js

@@ -15,58 +15,35 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _fakeData = require("../Reusable Components/fakeData");
-
-var _ReusableHeader = _interopRequireDefault(require("../Reusable Components/ReusableHeader/ReusableHeader"));
-
 var _ReusableList = _interopRequireDefault(require("../Reusable Components/ReusableList/ReusableList"));
 
 var _RichTextInput = _interopRequireDefault(require("../Common Inputs/RichTextInput/RichTextInput"));
 
 var _templateObject;
 
-var _excluded = ["data", "title", "titleColor", "headerBackground", "headerPadding", "cardBackgroundColor", "cardTitleColor", "textColor", "users"];
+var _excluded = ["data", "users", "title", "backgroundColor"];
 
 var Chat = function Chat(_ref) {
   var data = _ref.data,
-      title = _ref.title,
-      titleColor = _ref.titleColor,
-      headerBackground = _ref.headerBackground,
-      headerPadding = _ref.headerPadding,
-      cardBackgroundColor = _ref.cardBackgroundColor,
-      cardTitleColor = _ref.cardTitleColor,
-      textColor = _ref.textColor,
       users = _ref.users,
+      title = _ref.title,
+      backgroundColor = _ref.backgroundColor,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(Container, {
-    cardBackgroundColor: cardBackgroundColor
-  }, /*#__PURE__*/_react.default.createElement(_ReusableHeader.default, {
-    title: title,
-    titleColor: titleColor,
-    controls: _fakeData.controls,
-    controlsStyles: {
-      iconColor: 'white',
-      maxIcons: 4,
-      dropdownBackground: 'white'
-    },
-    headerBackground: headerBackground,
-    padding: headerPadding
-  }), /*#__PURE__*/_react.default.createElement(_ReusableList.default, {
+    backgroundColor: backgroundColor
+  }, /*#__PURE__*/_react.default.createElement(_ReusableList.default, Object.assign({
+    listTitle: title || 'Chat',
     type: "flat",
     data: data,
-    cardStyle: "card-style-8",
-    customCardStyles: {
-      cardBackgroundColor: cardBackgroundColor,
-      cardTitleColor: cardTitleColor,
-      cardDescriptionColor: textColor
-    }
-  }), /*#__PURE__*/_react.default.createElement(_RichTextInput.default, {
+    cardStyle: "card-style-8"
+  }, props)), /*#__PURE__*/_react.default.createElement(_RichTextInput.default, {
     users: users
   }));
 };
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    background-color: ", ";\n    width: 100%;\n    padding: 15px 0;\n"])), function (cardBackgroundColor) {
-  return cardBackgroundColor;
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n    background-color: ", ";\n"])), function (_ref2) {
+  var backgroundColor = _ref2.backgroundColor;
+  return backgroundColor || 'transparent';
 });
 
 Chat.defaultProps = {

package/dist/stories/Common Inputs/EditorComponent/EditorComponent.js

@@ -17,7 +17,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _reactEditorJs = _interopRequireDefault(require("react-editor-js"));
+var _reactEditorJs = require("react-editor-js");
 
 var _constants = require("./constants");
 
@@ -30,6 +30,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var EditorComponent = function EditorComponent(props) {
   var _instanceRef = (0, _react.useRef)(null);
 
+  var ReactEditorJS = (0, _reactEditorJs.createReactEditorJS)();
+
   function handleSave() {
     return _handleSave.apply(this, arguments);
   }
@@ -58,7 +60,7 @@ var EditorComponent = function EditorComponent(props) {
     return _handleSave.apply(this, arguments);
   }
 
-  return /*#__PURE__*/_react.default.createElement(Container, props, /*#__PURE__*/_react.default.createElement(_reactEditorJs.default, {
+  return /*#__PURE__*/_react.default.createElement(Container, props, /*#__PURE__*/_react.default.createElement(ReactEditorJS, {
     instanceRef: function instanceRef(instance) {
       return _instanceRef.current = instance;
     },

package/dist/stories/Enrollment/Admin/CreateForm/CreateForm.js

@@ -77,7 +77,7 @@ var AddQuestion = function AddQuestion(props) {
   }));
 };
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n     padding: 10px;\n     background-color: 'white';\n     display: flex;\n     flex-direction: column;\n     \n     &(:first-child){\n         align-self: center;\n     }\n"])));
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n     padding: 10px;\n     background-color: 'white';\n     display: flex;\n     flex-direction: column;\n     \n     &(:first-child){\n         align-self: center;\n     }\n"])));
 
 var _default = AddQuestion;
 exports.default = _default;

package/dist/stories/Enrollment/Admin/DetailedForm/DetailedForm.js

@@ -30,43 +30,31 @@ var DetailedForm = function DetailedForm(_ref) {
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
   var onAccept = function onAccept() {
-    alert('Form Accepted');
+    props.onAccept();
   };
 
   var onDecline = function onDecline() {
-    alert('Form Declined');
+    props.onDecline();
   };
 
-  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(User, null, /*#__PURE__*/_react.default.createElement(_CardStyle.default, {
+  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(User, null, /*#__PURE__*/_react.default.createElement(_CardStyle.default, Object.assign({
     title: userName,
-    img: userImg,
-    cardImageRadius: "100"
-  })), /*#__PURE__*/_react.default.createElement(_ReusableList.default, {
-    listTitle: "Form",
+    img: userImg
+  }, props.userHeaderStyles))), /*#__PURE__*/_react.default.createElement(_ReusableList.default, Object.assign({
+    listTitle: props.title || "Form",
     data: questions,
     type: "flat",
-    cardStyle: "card-style-3",
-    headerStyles: {
-      padding: 10,
-      headerBackground: '#FE1744',
-      titleColor: '#ffff',
-      controlsStyles: {
-        dropdownBackground: 'black',
-        dropdownFontColor: 'white',
-        dropdownItemHoverColor: '#FE1744'
-      }
-    },
-    customCardStyles: {
-      cardPadding: 10
-    }
-  }), /*#__PURE__*/_react.default.createElement(Buttons, null, /*#__PURE__*/_react.default.createElement(Accept, {
+    cardStyle: "card-style-3"
+  }, props)), /*#__PURE__*/_react.default.createElement(Buttons, null, /*#__PURE__*/_react.default.createElement(Accept, {
     onClick: onAccept
   }, "Accept"), /*#__PURE__*/_react.default.createElement(Decline, {
     onClick: onDecline
   }, "Decline")));
 };
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    background-color: white;\n    padding: 10px 0;\n    width: 100%;\n"])));
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    background-color: ", ";\n    padding: 10px 0;\n    width: 100%;\n"])), function (props) {
+  return props.backgroundColor || 'transparent';
+});
 
 var User = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\n"])));
 

package/dist/stories/Enrollment/Admin/ViewForms/ViewForms.js

@@ -18,27 +18,12 @@ var _excluded = ["data"];
 var ViewForms = function ViewForms(_ref) {
   var data = _ref.data,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return /*#__PURE__*/_react.default.createElement(_ReusableList.default, {
-    listTitle: "Submitted Form",
+  return /*#__PURE__*/_react.default.createElement(_ReusableList.default, Object.assign({
+    listTitle: props.title || "Submitted Forms",
     data: data,
     cardStyle: "card-style-9",
-    type: "sectioned",
-    sectionHeaderStyles: {
-      cardTitleColor: 'white',
-      cardBackgroundColor: 'black',
-      cardPadding: 10
-    },
-    headerStyles: {
-      padding: 10,
-      headerBackground: '#FE1744',
-      titleColor: '#ffff',
-      controlsStyles: {
-        dropdownBackground: 'black',
-        dropdownFontColor: 'white',
-        dropdownItemHoverColor: '#FE1744'
-      }
-    }
-  });
+    type: "sectioned"
+  }, props));
 };
 
 ViewForms.defaultProps = {};

package/dist/stories/Enrollment/Guest/FillForm/FillForm.js

@@ -25,13 +25,6 @@ var FillForm = function FillForm(_ref) {
   var sections = _ref.sections,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
-  // const initialValues = {
-  //     question0: '',
-  //     question1: '',
-  //     question2: '',
-  //     question3: '',
-  //     question4: '',
-  // }
   var onCreate = function onCreate(values) {
     console.log(values);
   };
@@ -40,21 +33,15 @@ var FillForm = function FillForm(_ref) {
     console.log('Canceled');
   };
 
-  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_ReusableForm.default // initialValues={initialValues}
-  , {
-    formTitle: "Join Community Form",
+  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_ReusableForm.default, Object.assign({
+    formTitle: props.formTitle || 'Join Community Form',
     sections: sections,
     saveBtnText: props.saveBtnText,
     cancelBtnText: props.cancelBtnText,
     saveHandler: onCreate,
     cancelHandler: cancelHandler,
-    headerStyles: {
-      padding: 10,
-      headerBackground: 'black',
-      titleColor: '#ffff'
-    },
-    bodyRowGap: 10
-  }));
+    bodyRowGap: props.bodyRowGap || 10
+  }, props)));
 };
 
 var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n"])));

package/dist/stories/Events/Event/Event.js

@@ -50,7 +50,7 @@ var Event = function Event(_ref) {
 
 var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n    font-family: sans-serif;\n    background-color: ", ";\n"])), function (_ref2) {
   var backgroundColor = _ref2.backgroundColor;
-  return backgroundColor;
+  return backgroundColor || 'transparent';
 });
 
 var CoverWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n    height: 300px;\n"])));

package/dist/stories/Events/EventsList/EventsList.js

@@ -86,7 +86,7 @@ var EventsList = function EventsList(_ref) {
   };
 
   return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_ReusableList.default, Object.assign({
-    listTitle: "My Events",
+    listTitle: props.title || "My Events",
     data: events,
     type: "flat",
     cardStyle: "card-style-11",
@@ -104,8 +104,8 @@ var EventsList = function EventsList(_ref) {
       return /*#__PURE__*/_react.default.createElement("div", null);
     }
   }, /*#__PURE__*/_react.default.createElement(_CreateEvent.default, {
-    saveBtnText: "Create",
-    cancelBtnText: "Cancel",
+    saveBtnText: props.saveBtnText || 'Create',
+    cancelBtnText: props.cancelBtnText || "Cancel",
     saveHandler: onAddFolder,
     cancelHandler: cancelHandler
   })));

package/dist/stories/Library/Folders/Folders.js

@@ -83,15 +83,11 @@ var Folders = function Folders(_ref) {
     setShowModal(false);
   };
 
-  console.log(props);
   return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_Gallery.default, Object.assign({
-    galleryTitle: "Your Folders",
+    galleryTitle: props.title || "Your Folders",
     data: folders,
     type: "flat",
     cardStyle: "card-style-10",
-    columnsNumber: columnsNumber,
-    galleryColumnGap: columnGap,
-    galleryRowGap: rowGap,
     galleryControls: galleryControls,
     iconClicked: onIconClicked,
     cardClicked: cardClicked,
@@ -114,7 +110,7 @@ var Folders = function Folders(_ref) {
   })));
 };
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\n"])));
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    background-color: transparent;\n"])));
 
 Folders.defaultProps = {};
 var _default = Folders;

package/dist/stories/Library/Notes/Notes.js

@@ -86,7 +86,7 @@ var Notes = function Notes(_ref) {
   };
 
   return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_ReusableList.default, Object.assign({
-    listTitle: "My Notes",
+    listTitle: props.title || "My Notes",
     data: notes,
     type: "flat",
     cardStyle: "card-style-11",
@@ -104,8 +104,8 @@ var Notes = function Notes(_ref) {
       return /*#__PURE__*/_react.default.createElement("div", null);
     }
   }, /*#__PURE__*/_react.default.createElement(_CreateFolder.default, {
-    saveBtnText: "Create",
-    cancelBtnText: "Cancel",
+    saveBtnText: props.saveBtnText || "Create",
+    cancelBtnText: props.cancelBtnText || "Cancel",
     saveHandler: onAddFolder,
     cancelHandler: cancelHandler
   })));

package/dist/stories/Library/ViewNote/ViewNote.js

@@ -7,20 +7,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _EditorComponent = _interopRequireDefault(require("../../Common Inputs/EditorComponent/EditorComponent"));
 
-var ViewNote = function ViewNote() {
-  var data = {
-    blocks: [{
-      type: "header",
-      data: {
-        text: "New Note",
-        level: 1
-      }
-    }]
-  };
+var _excluded = ["data"];
+
+var ViewNote = function ViewNote(_ref) {
+  var data = _ref.data,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_EditorComponent.default, {
     data: data
   });

package/dist/stories/Music Album/ViewAlbum/ViewAlbum.js

@@ -80,7 +80,7 @@ var ViewAlbum = function ViewAlbum(_ref) {
   };
 
   return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_ReusableList.default, Object.assign({
-    listTitle: "My Album",
+    listTitle: props.title || "My Album",
     data: album,
     cardStyle: "card-style-7",
     type: "flat",
@@ -90,14 +90,7 @@ var ViewAlbum = function ViewAlbum(_ref) {
     iconClicked: onIconClicked,
     listControls: listControls,
     cardControls: cardControls,
-    cardIconClicked: cardIconClicked,
-    customCardStyles: {
-      cardBackgroundColor: cardBackgroundColor,
-      cardTitleColor: songTitleColor,
-      controlsStyles: {
-        iconColor: 'black'
-      }
-    }
+    cardIconClicked: cardIconClicked
   }, props)), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {
     modalIsOpen: showModal,
     closeModal: function closeModal() {
@@ -109,15 +102,13 @@ var ViewAlbum = function ViewAlbum(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_AddSong.default, {
     saveHandler: onAddSong,
     cancelHandler: cancelHandler,
-    saveBtnText: "Create",
-    cancelBtnText: "Cancel"
+    saveBtnText: props.saveBtnText || "Create",
+    cancelBtnText: props.cancelBtnText || "Cancel"
   })));
 };
 
 var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n"])));
 
-ViewAlbum.defaultProps = {
-  cardBackgroundColor: 'white'
-};
+ViewAlbum.defaultProps = {};
 var _default = ViewAlbum;
 exports.default = _default;

package/dist/stories/Music Album/ViewAlbums/ViewAlbums.js

@@ -27,7 +27,7 @@ var _ai = require("react-icons/ai");
 
 var _templateObject;
 
-var _excluded = ["albums", "cardBackgroundColor", "albumTitleColor", "descColor"];
+var _excluded = ["albums", "albumTitleColor", "descColor"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -46,13 +46,11 @@ var galleryControls = [{
 
 var ViewAlbums = function ViewAlbums(_ref) {
   var albums = _ref.albums,
-      cardBackgroundColor = _ref.cardBackgroundColor,
       albumTitleColor = _ref.albumTitleColor,
       descColor = _ref.descColor,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var cardStyles = {
     darkOnHover: true,
-    cardBackgroundColor: cardBackgroundColor,
     cardTitleColor: albumTitleColor,
     descColor: descColor,
     controlsStyles: {
@@ -101,18 +99,14 @@ var ViewAlbums = function ViewAlbums(_ref) {
   };
 
   return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_Gallery.default, Object.assign({
-    galleryTitle: props.title,
+    galleryTitle: props.title || 'musicAlbums',
     data: albums,
     type: "flat",
     cardStyle: "card-style-6",
-    columnsNumber: 3,
-    galleryColumnGap: 10,
-    galleryRowGap: 20,
     galleryControls: galleryControls,
     iconClicked: onHeaderIconClicked,
     cardControls: cardControls,
-    cardIconClicked: cardIconClicked,
-    customCardStyles: cardStyles
+    cardIconClicked: cardIconClicked
   }, props)), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {
     modalIsOpen: showModal,
     closeModal: function closeModal() {
@@ -124,12 +118,12 @@ var ViewAlbums = function ViewAlbums(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_CreateMusicAlbum.default, {
     saveHandler: onAddAlbum,
     cancelHandler: cancelHandler,
-    saveBtnText: "Create",
-    cancelBtnText: "Cancel"
+    saveBtnText: props.saveBtnText || "Create",
+    cancelBtnText: props.cancelBtnText || "Cancel"
   })));
 };
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\n"])));
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n"])));
 
 ViewAlbums.defaultProps = {
   cardBackgroundColor: 'white'

package/dist/stories/Navbar/Navbar.js

@@ -25,21 +25,13 @@ var _CustomAutoComplete = _interopRequireDefault(require("../Common Inputs/Custo
 
 var _BaseMaterial = _interopRequireDefault(require("../Containers/BaseMaterial"));
 
-var _homeSvgrepoCom = _interopRequireDefault(require("../assets/home-svgrepo-com.svg"));
+var _ai = require("react-icons/ai");
 
-var _compassSvgrepoCom = _interopRequireDefault(require("../assets/compass-svgrepo-com.svg"));
+var _md = require("react-icons/md");
 
-var _addSvgrepoCom = _interopRequireDefault(require("../assets/add-svgrepo-com.svg"));
+var _bi = require("react-icons/bi");
 
-var _basketSvgrepoCom = _interopRequireDefault(require("../assets/basket-svgrepo-com.svg"));
-
-var _bellSvgrepoCom = _interopRequireDefault(require("../assets/bell-svgrepo-com.svg"));
-
-var _medalSvgrepoCom = _interopRequireDefault(require("../assets/medal-svgrepo-com.svg"));
-
-var _settingsSvgrepoCom = _interopRequireDefault(require("../assets/settings-svgrepo-com.svg"));
-
-var _searchSvgrepoCom = _interopRequireDefault(require("../assets/search-svgrepo-com.svg"));
+var _io = require("react-icons/io5");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 
@@ -132,18 +124,12 @@ var Navbar = function Navbar(_ref) {
   };
   return /*#__PURE__*/_react.default.createElement(_BaseMaterial.default, null, /*#__PURE__*/_react.default.createElement(NavBar, {
     color: navbarColor
-  }, /*#__PURE__*/_react.default.createElement(UniverseContainer, null, /*#__PURE__*/_react.default.createElement(IconContainer, {
+  }, /*#__PURE__*/_react.default.createElement(UniverseContainer, null, /*#__PURE__*/_react.default.createElement(IconContainer, null, /*#__PURE__*/_react.default.createElement(_ai.AiFillHome, {
     size: iconSize,
     color: iconBackgroundColor
-  }, /*#__PURE__*/_react.default.createElement(Icon, {
-    src: _homeSvgrepoCom.default,
-    size: iconSize
-  })), /*#__PURE__*/_react.default.createElement(IconContainer, {
+  })), /*#__PURE__*/_react.default.createElement(IconContainer, null, /*#__PURE__*/_react.default.createElement(_md.MdAddBox, {
     size: iconSize,
     color: iconBackgroundColor
-  }, /*#__PURE__*/_react.default.createElement(Icon, {
-    src: _addSvgrepoCom.default,
-    size: iconSize
   })), /*#__PURE__*/_react.default.createElement("div", {
     style: {
       width: '200px'
@@ -153,27 +139,17 @@ var Navbar = function Navbar(_ref) {
     styles: {
       color: 'blue'
     }
-  }))), /*#__PURE__*/_react.default.createElement(DiscoverContainer, null, /*#__PURE__*/_react.default.createElement(IconContainer, {
+  }))), /*#__PURE__*/_react.default.createElement(DiscoverContainer, null, /*#__PURE__*/_react.default.createElement(IconContainer, null, /*#__PURE__*/_react.default.createElement(_ai.AiFillCompass, {
     size: iconSize,
     color: iconBackgroundColor
-  }, /*#__PURE__*/_react.default.createElement(Icon, {
-    src: _compassSvgrepoCom.default,
-    size: iconSize
-  })), /*#__PURE__*/_react.default.createElement(IconContainer, {
+  })), /*#__PURE__*/_react.default.createElement(IconContainer, null, /*#__PURE__*/_react.default.createElement(_bi.BiMedal, {
     size: iconSize,
     color: iconBackgroundColor
-  }, /*#__PURE__*/_react.default.createElement(Icon, {
-    src: _medalSvgrepoCom.default,
-    size: iconSize
-  })), /*#__PURE__*/_react.default.createElement(IconContainer, {
+  })), /*#__PURE__*/_react.default.createElement(IconContainer, null, /*#__PURE__*/_react.default.createElement(_io.IoBasketSharp, {
     size: iconSize,
     color: iconBackgroundColor
-  }, /*#__PURE__*/_react.default.createElement(Icon, {
-    src: _basketSvgrepoCom.default,
-    size: iconSize
-  }))), /*#__PURE__*/_react.default.createElement(SearchContainer, null, /*#__PURE__*/_react.default.createElement(SearchBar, null, /*#__PURE__*/_react.default.createElement(Icon, {
-    src: _searchSvgrepoCom.default,
-    size: iconSize
+  }))), /*#__PURE__*/_react.default.createElement(SearchContainer, null, /*#__PURE__*/_react.default.createElement(SearchBar, null, /*#__PURE__*/_react.default.createElement(_ai.AiOutlineSearch, {
+    color: iconBackgroundColor
   }), /*#__PURE__*/_react.default.createElement(_formik.Formik, {
     initialValues: initialValues,
     onSubmit: function onSubmit(values) {
@@ -223,18 +199,12 @@ var Navbar = function Navbar(_ref) {
       }
     },
     menuIsOpen: menuOpen
-  })), /*#__PURE__*/_react.default.createElement(UserName, null, "illo")), /*#__PURE__*/_react.default.createElement(SettingsContainer, null, /*#__PURE__*/_react.default.createElement(IconContainer, {
+  })), /*#__PURE__*/_react.default.createElement(UserName, null, "illo")), /*#__PURE__*/_react.default.createElement(SettingsContainer, null, /*#__PURE__*/_react.default.createElement(IconContainer, null, /*#__PURE__*/_react.default.createElement(_ai.AiFillSetting, {
     size: iconSize,
     color: iconBackgroundColor
-  }, /*#__PURE__*/_react.default.createElement(Icon, {
-    src: _settingsSvgrepoCom.default,
-    size: iconSize
-  })), /*#__PURE__*/_react.default.createElement(IconContainer, {
+  })), /*#__PURE__*/_react.default.createElement(IconContainer, null, /*#__PURE__*/_react.default.createElement(_ai.AiFillBell, {
     size: iconSize,
     color: iconBackgroundColor
-  }, /*#__PURE__*/_react.default.createElement(Icon, {
-    src: _bellSvgrepoCom.default,
-    size: iconSize
   }))))));
 };
 
@@ -257,7 +227,7 @@ var UniverseContainer = (0, _styledComponents.default)('div')({
   'justify-content': 'flex-start'
 });
 
-var IconContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 0 0 auto;\n  width: ", ";\n  height: ", ";\n  display: flex;\n  align-items: center;\n  margin-left: 0px;\n  margin-right: 4px;\n  border-radius: 20px;\n  flex-direction: row;\n  justify-content: center;\n  background-color: ", ";\n"])), function (props) {
+var IconContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 0 0 auto;\n  \n  \n  display: flex;\n  align-items: center;\n  margin-left: 0px;\n  margin-right: 4px;\n  border-radius: 20px;\n  flex-direction: row;\n  justify-content: center;\n\n  & svg {\n    width: ", ";\n  };\n  height: ", ";\n  fill: ", ";\n"])), function (props) {
   return props.size === 'sm' ? '30px' : props.size === 'md' ? '35px' : props.size === 'lg' ? '40px' : '30px';
 }, function (props) {
   return props.size === 'sm' ? '30px' : props.size === 'md' ? '35px' : props.size === 'lg' ? '40px' : '30px';

package/dist/stories/Pages/Chat/Chat.js

@@ -81,7 +81,19 @@ var Chat = function Chat(_ref) {
     hideTitle: true
   }, /*#__PURE__*/_react.default.createElement(_Chat.default, {
     data: data,
-    users: users
+    users: users,
+    title: 'Chat',
+    headerStyles: {
+      padding: 10,
+      headerBackground: '#00ADC4',
+      titleColor: '#ffff',
+      controlsStyles: {
+        iconSize: 25
+      }
+    },
+    customCardStyles: {
+      cardTitleColor: '#00ADC4'
+    }
   }))), /*#__PURE__*/_react.default.createElement(_Right.default, null)));
 };
 

package/dist/stories/Pages/Enrollment/DetailedForm/DetailedForm.js

@@ -88,7 +88,25 @@ var DetailedForm = function DetailedForm(props) {
   }, /*#__PURE__*/_react.default.createElement(_DetailedForm.default, {
     userName: "User Name",
     userImg: "https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png",
-    questions: questions
+    questions: questions,
+    headerStyles: {
+      padding: 10,
+      headerBackground: '#FE1744',
+      titleColor: '#ffff',
+      controlsStyles: {
+        dropdownBackground: 'black',
+        dropdownFontColor: 'white',
+        dropdownItemHoverColor: '#FE1744'
+      }
+    },
+    userHeaderStyles: {
+      cardBackgroundColor: '#FE1744',
+      cardImageRadius: "100",
+      cardTitleColor: 'white'
+    },
+    customCardStyles: {
+      cardPadding: 10
+    }
   }))), /*#__PURE__*/_react.default.createElement(_Right.default, null)));
 };
 

package/dist/stories/Pages/Enrollment/FillForm/FillForm.js

@@ -92,9 +92,15 @@ var FillForm = function FillForm(props) {
     discription: "Lorem ipsum dolor sit amet consectetur.",
     hideTitle: true
   }, /*#__PURE__*/_react.default.createElement(_FillForm.default, {
+    formTitle: "Community Form",
     sections: sections,
     saveBtnText: 'Submit',
-    cancelBtnText: "Cancel"
+    cancelBtnText: "Cancel",
+    headerStyles: {
+      padding: 10,
+      headerBackground: 'black',
+      titleColor: '#ffff'
+    }
   }))), /*#__PURE__*/_react.default.createElement(_Right.default, null)));
 };