trepur_components 0.2.74 → 0.3.2

package/dist/components/InformationIcon/index.js

@@ -1,18 +1,22 @@
 "use strict";
 
-require("core-js/modules/es.object.assign.js");
+require("core-js/modules/web.dom-collections.iterator.js");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.informationIconProps = exports.default = void 0;
 
-require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/es.object.assign.js");
 
 var _react = _interopRequireWildcard(require("react"));
 
 var _Icon = _interopRequireDefault(require("../Icon"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
 require("../index.css");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -21,37 +25,66 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+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; }
+
 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); }
 
+const informationIconProps = {
+  id: _propTypes.default.string,
+  classes: _propTypes.default.string,
+  imageClasses: _propTypes.default.string,
+  type: _propTypes.default.string,
+  size: _propTypes.default.number,
+  text: _propTypes.default.string,
+  number: _propTypes.default.number,
+  bordered: _propTypes.default.bool,
+  rounded: _propTypes.default.bool,
+  bgColor: _propTypes.default.string,
+  textColor: _propTypes.default.string,
+  hoverTextColor: _propTypes.default.string,
+  hoverBgColor: _propTypes.default.string,
+  withAnimation: _propTypes.default.bool
+};
+exports.informationIconProps = informationIconProps;
+
 const InformationIcon = _ref => {
   let {
-    id,
-    classes,
-    imageClasses,
-    type,
-    size,
-    text,
-    number,
-    bordered,
-    rounded,
-    bgColor,
-    textColor,
-    hoverTextColor,
-    hoverBgColor,
-    withAnimation
+    informationIconProps
   } = _ref;
   let loaded = (0, _react.useRef)(false);
-  let imageClassList = 'mx-auto pt-2 ';
-  imageClassList += imageClasses ? imageClasses : '';
-  const wrapperClasses = 'h-96 flex items-center justify-center text-center py-12 hover:py-0 ease-out duration-300';
-  let classList = 'flex flex-col items-center justify-center text-center w-full h-full mx-12 my-12 ease-out duration-300 hover:m-0 hover:text-sm ';
-  classList += bordered ? 'border ' : '';
-  classList += rounded ? 'rounded-2xl ' : '';
-  classList += classes ? classes : '';
-  const numberClass = number !== null ? 'text-lg' : '';
-  const numberClasses = 'text-center ' + numberClass;
-  const textClass = number === null ? ' text-lg ' : '';
-  const textClasses = 'h-24 flex items-center justify-center text-center px-2 text-md md:text-lg  ' + textClass;
+  (0, _react.useEffect)(() => {
+    const element = document.getElementById((informationIconProps === null || informationIconProps === void 0 ? void 0 : informationIconProps.id) + '_number');
+    let observer = new IntersectionObserver((entries, observer) => {
+      entries.forEach(entry => {
+        if (entry.intersectionRatio >= 0.1 && loaded.current == false) {
+          loaded.current = true;
+          counterAnimation(document.getElementById((informationIconProps === null || informationIconProps === void 0 ? void 0 : informationIconProps.id) + '_number'), 0, informationIconProps === null || informationIconProps === void 0 ? void 0 : informationIconProps.number, 3000);
+        }
+      });
+    }, {
+      threshold: 1
+    });
+    (informationIconProps === null || informationIconProps === void 0 ? void 0 : informationIconProps.withAnimation) && observer.observe(element);
+  }, []);
+  if (informationIconProps == undefined) return;
+  const wrapperClasses = "h-96 flex items-center text-center \n        py-12 hover:py-0 ease-out duration-300";
+  const classList = (0, _classnames.default)({
+    [informationIconProps.classes]: informationIconProps === null || informationIconProps === void 0 ? void 0 : informationIconProps.classes,
+    'border': informationIconProps === null || informationIconProps === void 0 ? void 0 : informationIconProps.bordered,
+    'rounded-2xl': informationIconProps === null || informationIconProps === void 0 ? void 0 : informationIconProps.rounded,
+    [informationIconProps.textColor]: informationIconProps === null || informationIconProps === void 0 ? void 0 : informationIconProps.textColor,
+    [informationIconProps.bgColor]: informationIconProps === null || informationIconProps === void 0 ? void 0 : informationIconProps.bgColor,
+    'text-black': !(informationIconProps !== null && informationIconProps !== void 0 && informationIconProps.textColor),
+    'bg-white': !(informationIconProps !== null && informationIconProps !== void 0 && informationIconProps.bgColor),
+    [informationIconProps.hoverTextColor]: informationIconProps === null || informationIconProps === void 0 ? void 0 : informationIconProps.hoverTextColor,
+    [informationIconProps.hoverBgColor]: informationIconProps === null || informationIconProps === void 0 ? void 0 : informationIconProps.hoverBgColor,
+    'hover:text-white': !(informationIconProps !== null && informationIconProps !== void 0 && informationIconProps.hoverTextColor),
+    'hover:bg-black': !(informationIconProps !== null && informationIconProps !== void 0 && informationIconProps.hoverBgColor)
+  }, "flex flex-col justify-center w-full h-full items-center\n        mx-12 my-12 ease-out duration-300 hover:m-0 text-lg hover:text-xl");
 
   const counterAnimation = (obj, start, end, duration) => {
     let startTimestamp = null;
@@ -69,62 +102,21 @@ const InformationIcon = _ref => {
     window.requestAnimationFrame(step);
   };
 
-  (0, _react.useEffect)(() => {
-    const element = document.getElementById(id + '_number');
-    let observer = new IntersectionObserver((entries, observer) => {
-      entries.forEach(entry => {
-        if (entry.intersectionRatio >= 0.1 && loaded.current == false) {
-          loaded.current = true;
-          counterAnimation(document.getElementById(id + '_number'), 0, number, 3000);
-        } else {}
-      });
-    }, {
-      threshold: 1
-    });
-    withAnimation && observer.observe(element);
-  }, []); //---------- Styling ---------------
-
-  const [styles, setStyles] = (0, _react.useState)({
-    'backgroundColor': bgColor ? bgColor : 'white',
-    color: textColor ? textColor : 'black'
-  });
-
-  const setHoverState = isHovering => {
-    if (isHovering) {
-      setStyles({
-        'backgroundColor': hoverBgColor ? hoverBgColor : 'white',
-        color: hoverTextColor ? hoverTextColor : 'black'
-      });
-    } else {
-      setStyles({
-        'backgroundColor': bgColor ? bgColor : 'white',
-        color: textColor ? textColor : 'black'
-      });
-    }
-  }; //-----------------------------------
-
-
-  return /*#__PURE__*/_react.default.createElement("div", {
-    id: "wrapper",
-    className: wrapperClasses
-  }, /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
-    id: id
+  return /*#__PURE__*/_react.default.createElement("div", _extends({}, (informationIconProps === null || informationIconProps === void 0 ? void 0 : informationIconProps.id) && {
+    id: informationIconProps.id
   }, {
-    style: styles,
-    className: classList,
-    onMouseOver: () => setHoverState(true),
-    onMouseOut: () => setHoverState(false)
-  }), type && /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    type: type,
-    size: size,
-    classes: imageClassList
-  }), number && /*#__PURE__*/_react.default.createElement("p", {
-    id: id + '_number',
-    className: numberClasses
-  }, number), /*#__PURE__*/_react.default.createElement("p", {
-    className: textClasses
-  }, text)));
+    className: wrapperClasses
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: classList
+  }, (informationIconProps === null || informationIconProps === void 0 ? void 0 : informationIconProps.iconProps) && /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    iconProps: informationIconProps.iconProps
+  }), (informationIconProps === null || informationIconProps === void 0 ? void 0 : informationIconProps.number) && /*#__PURE__*/_react.default.createElement("p", {
+    id: (informationIconProps === null || informationIconProps === void 0 ? void 0 : informationIconProps.id) + '_number'
+  }, informationIconProps === null || informationIconProps === void 0 ? void 0 : informationIconProps.number), /*#__PURE__*/_react.default.createElement("p", null, informationIconProps === null || informationIconProps === void 0 ? void 0 : informationIconProps.text)));
 };
 
+InformationIcon.propTypes = {
+  informationIconProps: _propTypes.default.shape(_objectSpread({}, informationIconProps))
+};
 var _default = InformationIcon;
 exports.default = _default;

package/dist/components/Input/index.js

@@ -3,91 +3,112 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.inputProps = exports.default = void 0;
 
 require("core-js/modules/es.object.assign.js");
 
 var _react = _interopRequireDefault(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
 require("../index.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; }
+
 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); }
 
+const inputProps = {
+  id: _propTypes.default.string,
+  classes: _propTypes.default.string,
+  labelClasses: _propTypes.default.string,
+  inputClasses: _propTypes.default.string,
+  autoComplete: _propTypes.default.bool,
+  disabled: _propTypes.default.bool,
+  formId: _propTypes.default.string,
+  height: _propTypes.default.string,
+  maxLength: _propTypes.default.string,
+  minLength: _propTypes.default.string,
+  pattern: _propTypes.default.string,
+  required: _propTypes.default.bool,
+  readOnly: _propTypes.default.bool,
+  label: _propTypes.default.string,
+  type: _propTypes.default.string,
+  name: _propTypes.default.string,
+  placeholder: _propTypes.default.string,
+  bold: _propTypes.default.bool,
+  onChange: _propTypes.default.func,
+  onBlur: _propTypes.default.func,
+  onFocus: _propTypes.default.func,
+  hasValidation: _propTypes.default.bool,
+  errors: _propTypes.default.string,
+  value: _propTypes.default.string
+};
+exports.inputProps = inputProps;
+
 const Input = _ref => {
   let {
-    id,
-    classes,
-    labelClasses,
-    inputClasses,
-    autoComplete,
-    disabled,
-    formId,
-    height,
-    maxLength,
-    minLength,
-    pattern,
-    required,
-    readOnly,
-    label,
-    type,
-    name,
-    placeholder,
-    bold,
-    onChange,
-    onBlur,
-    onFocus,
-    hasValidation,
-    errors,
-    value
+    inputProps
   } = _ref;
-  let classList = 'flex flex-col ';
-  classList += classes ? classes : '';
-  let labelClassList = 'w-auto ';
-  labelClassList += bold ? 'font-bold ' : '';
-  labelClassList += labelClasses ? labelClasses : '';
-  let inputClassList = 'border px-2 rounded-md ';
-  inputClassList += inputClasses ? inputClasses : '';
-  return /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
-    id: id
+  if (inputProps == undefined) return;
+  const classList = (0, _classnames.default)({
+    [inputProps.classes]: inputProps === null || inputProps === void 0 ? void 0 : inputProps.classes
+  }, "flex flex-col");
+  const labelClassList = (0, _classnames.default)({
+    'font-bold': inputProps === null || inputProps === void 0 ? void 0 : inputProps.bold,
+    [inputProps.labelClasses]: inputProps === null || inputProps === void 0 ? void 0 : inputProps.labelClasses
+  }, "w-auto");
+  const inputClassList = (0, _classnames.default)({
+    [inputProps.inputClasses]: inputProps === null || inputProps === void 0 ? void 0 : inputProps.inputClasses
+  }, "border px-2 rounded-md");
+  return /*#__PURE__*/_react.default.createElement("div", _extends({}, (inputProps === null || inputProps === void 0 ? void 0 : inputProps.id) && {
+    id: inputProps.id
   }, {
     className: classList
-  }), label && /*#__PURE__*/_react.default.createElement("label", {
-    id: "label-".concat(id),
+  }), (inputProps === null || inputProps === void 0 ? void 0 : inputProps.label) && /*#__PURE__*/_react.default.createElement("label", {
+    id: "label-".concat(inputProps === null || inputProps === void 0 ? void 0 : inputProps.id),
     className: labelClassList,
-    htmlFor: "input-".concat(id)
-  }, /*#__PURE__*/_react.default.createElement("p", null, label, " ", required && /*#__PURE__*/_react.default.createElement("span", {
+    htmlFor: "input-".concat(inputProps === null || inputProps === void 0 ? void 0 : inputProps.id)
+  }, /*#__PURE__*/_react.default.createElement("p", null, inputProps === null || inputProps === void 0 ? void 0 : inputProps.label, (inputProps === null || inputProps === void 0 ? void 0 : inputProps.required) && /*#__PURE__*/_react.default.createElement("span", {
     className: "text-red"
   }, "*"))), /*#__PURE__*/_react.default.createElement("input", {
-    id: "input-".concat(id),
+    id: "input-".concat(inputProps === null || inputProps === void 0 ? void 0 : inputProps.id),
     className: inputClassList,
-    autoComplete: autoComplete,
-    disabled: disabled,
-    form: formId,
-    height: height,
-    maxLength: maxLength,
-    minLength: minLength,
-    pattern: pattern,
-    required: required,
-    readOnly: readOnly,
-    type: type,
-    name: name,
-    value: value,
-    placeholder: placeholder,
-    onChange: onChange,
-    onBlur: onBlur,
-    onFocus: onFocus
-  }), hasValidation && /*#__PURE__*/_react.default.createElement("div", {
-    id: "".concat(id, "-errors")
-  }, errors && errors.map((error, i) => {
+    autoComplete: inputProps === null || inputProps === void 0 ? void 0 : inputProps.autoComplete,
+    disabled: inputProps === null || inputProps === void 0 ? void 0 : inputProps.disabled,
+    form: inputProps === null || inputProps === void 0 ? void 0 : inputProps.formId,
+    height: inputProps === null || inputProps === void 0 ? void 0 : inputProps.height,
+    maxLength: inputProps === null || inputProps === void 0 ? void 0 : inputProps.maxLength,
+    minLength: inputProps === null || inputProps === void 0 ? void 0 : inputProps.minLength,
+    pattern: inputProps === null || inputProps === void 0 ? void 0 : inputProps.pattern,
+    required: inputProps === null || inputProps === void 0 ? void 0 : inputProps.required,
+    readOnly: inputProps === null || inputProps === void 0 ? void 0 : inputProps.readOnly,
+    type: inputProps === null || inputProps === void 0 ? void 0 : inputProps.type,
+    name: inputProps === null || inputProps === void 0 ? void 0 : inputProps.name,
+    value: inputProps === null || inputProps === void 0 ? void 0 : inputProps.value,
+    placeholder: inputProps === null || inputProps === void 0 ? void 0 : inputProps.placeholder,
+    onChange: inputProps === null || inputProps === void 0 ? void 0 : inputProps.onChange,
+    onBlur: inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur,
+    onFocus: inputProps === null || inputProps === void 0 ? void 0 : inputProps.onFocus
+  }), (inputProps === null || inputProps === void 0 ? void 0 : inputProps.hasValidation) && /*#__PURE__*/_react.default.createElement("div", {
+    id: "".concat(inputProps === null || inputProps === void 0 ? void 0 : inputProps.id, "-errors")
+  }, (inputProps === null || inputProps === void 0 ? void 0 : inputProps.errors) && (inputProps === null || inputProps === void 0 ? void 0 : inputProps.errors.map((error, i) => {
     return /*#__PURE__*/_react.default.createElement("p", {
       key: "error_msg_".concat(i + 0),
-      className: "text-red text-sm",
-      key: i
+      className: "text-red text-sm"
     }, error);
-  })));
+  }))));
 };
 
+Input.propTypes = {
+  inputProps: _propTypes.default.shape(_objectSpread({}, inputProps))
+};
 var _default = Input;
 exports.default = _default;

package/dist/components/Nav/index.js

@@ -13,6 +13,8 @@ var _Column = _interopRequireDefault(require("../Column"));
 
 var _Icon = _interopRequireDefault(require("../Icon"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 require("../index.css");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -50,107 +52,72 @@ const Nav = _ref => {
     borderBottom,
     borderBottomColor
   } = _ref;
-  //---------- Styling ---------------
-  const [styles, setStyles] = (0, _react.useState)({
-    'backgroundColor': mobileNavButtonBgColor ? mobileNavButtonBgColor : 'white',
-    color: mobileNavButtonColor ? mobileNavButtonColor : 'black'
+  const [showSideNav, setShowSideNav] = (0, _react.useState)(false);
+  const [showDropdownNav, setShowDropdownNav] = (0, _react.useState)(false);
+  const navRowHeight = 'h-16';
+  const firstRowClassList = (0, _classnames.default)({
+    [firstRowClasses]: firstRowClasses
+  }, 'flex');
+  const secondRowClassList = (0, _classnames.default)({
+    [secondRowClasses]: secondRowClasses
+  }, 'flex');
+  const thirdRowClassList = (0, _classnames.default)({
+    [thirdRowClasses]: thirdRowClasses
+  }, 'flex');
+  const styles = (0, _classnames.default)({
+    [mobileNavButtonBgColor]: mobileNavButtonBgColor,
+    'bg-white': !mobileNavButtonBgColor,
+    [mobileNavButtonColor]: mobileNavButtonColor,
+    'text-black': !mobileNavButtonColor,
+    [hoverMobileNavButtonBgColor]: hoverMobileNavButtonBgColor,
+    'hover:bg-black': !hoverMobileNavButtonBgColor,
+    [hoverMobileNavButtonColor]: hoverMobileNavButtonColor,
+    'hover:text-white': !hoverMobileNavButtonColor
   });
-
-  const setHoverState = isHovering => {
-    if (isHovering) {
-      setStyles({
-        'backgroundColor': hoverMobileNavButtonBgColor ? hoverMobileNavButtonBgColor : 'black',
-        color: hoverMobileNavButtonColor ? hoverMobileNavButtonColor : 'white'
-      });
-    } else {
-      setStyles({
-        'backgroundColor': mobileNavButtonBgColor ? mobileNavButtonBgColor : 'white',
-        color: mobileNavButtonColor ? mobileNavButtonColor : 'black'
-      });
-    }
-  };
-
-  const [sideNavWidth, setSideNavWidth] = (0, _react.useState)({
-    'width': '0px',
-    'backgroundColor': mobileBgColor ? mobileBgColor : bgColor
+  const sideNavClasses = (0, _classnames.default)({
+    [mobileBgColor]: mobileBgColor,
+    'bg-white': !mobileBgColor,
+    'w-0': !showSideNav,
+    ["w-".concat(sideBarWidth)]: showSideNav
+  }, "z-50 shadow-inner shaddow-lg lg:hidden pt-20 \n        fixed top-0 left-0 z-1 overflow-hidden h-full\n        duration-700");
+  const dropdownNavClasses = (0, _classnames.default)({
+    [mobileBgColor]: mobileBgColor,
+    [bgColor]: !mobileBgColor && bgColor,
+    'bg-white': !mobileBgColor && !bgColor,
+    'h-0': !showDropdownNav,
+    ["h-".concat(dropdownNavHeight)]: showDropdownNav
+  }, 'z-50 lg:hidden duration-500 overflow-hidden');
+  const logoImageClassList = (0, _classnames.default)({
+    [mobileLogoBannerClasses]: mobileLogoBannerClasses
+  }, 'h-16 w-auto');
+  const mobileClassList = (0, _classnames.default)({
+    'fixed w-full z-50 top-0 mt-0': fixedTop,
+    'border-b': borderBottom,
+    [mobileClasses]: mobileClasses
+  }, 'flex items-center lg:hidden py-2');
+  const colors = (0, _classnames.default)({
+    [bgColor]: bgColor,
+    'bg-blue': !bgColor,
+    [borderBottomColor]: borderBottomColor,
+    'border-b-social-facebook': !borderBottomColor
   });
-
-  const openSideNav = () => {
-    setSideNavWidth({
-      'width': "".concat(sideBarWidth),
-      'backgroundColor': mobileBgColor ? mobileBgColor : bgColor,
-      'paddingRight': '10px'
-    });
-  };
-
-  const closeSideNav = () => {
-    setSideNavWidth({
-      'width': '0px',
-      'backgroundColor': mobileBgColor ? mobileBgColor : bgColor
-    });
-  };
-
-  const [navDropdownNavHeight, setDropdownNavHeight] = (0, _react.useState)({
-    'heigth': '0px',
-    'backgroundColor': mobileBgColor ? mobileBgColor : bgColor
-  });
-
-  const openDropdownNav = () => {
-    setDropdownNavHeight({
-      'height': "".concat(dropdownNavHeight, "px"),
-      'backgroundColor': mobileBgColor ? mobileBgColor : bgColor
-    });
-  };
-
-  const closeDropdownNav = () => {
-    setDropdownNavHeight({
-      'height': '0px',
-      'backgroundColor': mobileBgColor ? mobileBgColor : bgColor
-    });
-  };
-
-  const [mobileMenuState, setmobileMenuState] = (0, _react.useState)(false);
-
-  const toggleDropdownNav = () => {
-    if (mobileMenuState) {
-      closeDropdownNav();
-    } else {
-      openDropdownNav();
-    }
-
-    setmobileMenuState(!mobileMenuState);
-  }; //-----------------------------------
-
-
-  let logoImageClassList = "h-16 w-auto ";
-  logoImageClassList += mobileLogoBannerClasses ? mobileLogoBannerClasses : '';
-  let mobileClassList = "flex items-center lg:hidden py-2";
-  mobileClassList += mobileClasses ? " ".concat(mobileClasses) : '';
-  mobileClassList += fixedTop ? ' fixed w-full z-50 top-0 mt-0' : '';
-  mobileClassList += borderBottom ? ' border-b' : '';
-  let desktopClassList = 'hidden lg:block items-center justify-between sm:items-stretch text-center';
-  desktopClassList += fixedTop ? ' fixed w-full z-50 top-0 mt-0' : '';
-  desktopClassList += borderBottom ? ' border-b border-rose-500' : '';
+  const desktopClassList = (0, _classnames.default)({
+    'fixed w-full z-50 top-0 mt-0': fixedTop,
+    'border-b': borderBottom
+  }, 'hidden lg:block items-center justify-between sm:items-stretch text-center');
   return /*#__PURE__*/_react.default.createElement("nav", {
     id: id,
     className: classes
   }, /*#__PURE__*/_react.default.createElement("div", {
     id: "sm-nav",
-    className: mobileClassList,
-    style: {
-      'backgroundColor': bgColor,
-      'borderColor': borderBottomColor
-    }
+    className: "".concat(mobileClassList, " ").concat(colors)
   }, /*#__PURE__*/_react.default.createElement("div", {
     id: "nav-collapse-btn-wrapper",
     className: "absolute inset-y-0 left-2 flex items-center"
   }, /*#__PURE__*/_react.default.createElement("button", {
-    style: styles,
-    onMouseOver: () => setHoverState(true),
-    onMouseOut: () => setHoverState(false),
-    onClick: asSideBar ? () => openSideNav() : () => toggleDropdownNav(),
+    onClick: asSideBar ? () => setShowSideNav(true) : () => setShowDropdownNav(!showDropdownNav),
     type: "button",
-    className: "inline-flex items-center justify-center p-2 rounded-md focus:ring-2 focus:ring-inset focus:ring-white",
+    className: "inline-flex items-center justify-center \n                            p-2 rounded-md focus:ring-2 focus:ring-inset \n                            focus:ring-white ".concat(styles),
     "aria-controls": "mobile-menu",
     "aria-expanded": "false"
   }, /*#__PURE__*/_react.default.createElement("svg", {
@@ -178,59 +145,60 @@ const Nav = _ref => {
   }, /*#__PURE__*/_react.default.createElement("img", {
     className: logoImageClassList,
     src: mobileLogo,
-    alt: " Logo "
+    alt: "Logo"
   }))), /*#__PURE__*/_react.default.createElement("div", {
-    className: desktopClassList,
-    style: {
-      'backgroundColor': bgColor,
-      'borderColor': borderBottomColor
-    }
+    className: "".concat(desktopClassList, " ").concat(colors)
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: 'flex ' + firstRowClasses
+    className: firstRowClassList
   }, firstRow && firstRow.map((rowItem, i) => {
     return /*#__PURE__*/_react.default.createElement(_Column.default, {
       key: "row_item_1.".concat(i),
-      classes: rowItem.columnClasses ? "".concat(rowItem.columnClasses, " h-16") : 'h-16',
-      sm: rowItem.smColumnWidth,
-      md: rowItem.columnWidth,
-      lg: rowItem.lgColumnWidth,
-      xl: rowItem.xlColumnWidth
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: rowItem.classes
-    }, rowItem.component));
+      columnProps: {
+        classes: "".concat(navRowHeight, " ").concat(rowItem.columnClasses),
+        sm: rowItem.smColumnWidth,
+        md: rowItem.columnWidth,
+        lg: rowItem.lgColumnWidth,
+        xl: rowItem.xlColumnWidth,
+        children: rowItem.component
+      }
+    });
   })), /*#__PURE__*/_react.default.createElement("div", {
-    className: 'flex ' + secondRowClasses
+    className: secondRowClassList
   }, secondRow && secondRow.map((rowItem, i) => {
     return /*#__PURE__*/_react.default.createElement(_Column.default, {
       key: "row_item_2.".concat(i),
-      classes: "h-16",
-      sm: rowItem.smColumnWidth,
-      md: rowItem.columnWidth,
-      lg: rowItem.lgColumnWidth,
-      xl: rowItem.xlColumnWidth
-    }, rowItem.component);
+      columnProps: {
+        classes: "".concat(navRowHeight, " ").concat(rowItem.columnClasses),
+        sm: rowItem.smColumnWidth,
+        md: rowItem.columnWidth,
+        lg: rowItem.lgColumnWidth,
+        xl: rowItem.xlColumnWidth,
+        children: rowItem.component
+      }
+    });
   })), /*#__PURE__*/_react.default.createElement("div", {
-    className: 'flex ' + thirdRowClasses
+    className: thirdRowClassList
   }, thirdRow && thirdRow.map((rowItem, i) => {
     return /*#__PURE__*/_react.default.createElement(_Column.default, {
       key: "row_item_3.".concat(i),
-      classes: "h-16",
-      sm: rowItem.smColumnWidth,
-      md: rowItem.columnWidth,
-      lg: rowItem.lgColumnWidth,
-      xl: rowItem.xlColumnWidth
-    }, rowItem.component);
+      columnProps: {
+        classes: "".concat(navRowHeight, " ").concat(rowItem.columnClasses),
+        sm: rowItem.smColumnWidth,
+        md: rowItem.columnWidth,
+        lg: rowItem.lgColumnWidth,
+        xl: rowItem.xlColumnWidth,
+        children: rowItem.component
+      }
+    });
   }))), asSideBar ? /*#__PURE__*/_react.default.createElement("div", {
-    style: sideNavWidth,
-    className: "z-50 shadow-inner shaddow-lg lg:hidden pt-20 fixed top-0 left-0 z-1 overflow-hidden h-full w-0 duration-700"
+    className: sideNavClasses
   }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    style: {
-      'color': mobileNavCloseColor
-    },
-    classes: "absolute top-7 left-7",
-    onClick: () => closeSideNav(),
-    type: "times",
-    size: "2"
+    iconProps: {
+      classes: 'absolute top-7 left-7',
+      onClick: () => setShowSideNav(false),
+      type: 'times',
+      size: 2
+    }
   }), mobileItems && mobileItems.map((item, i) => {
     return /*#__PURE__*/_react.default.createElement("div", {
       key: "mobile_item_".concat(i),
@@ -241,8 +209,7 @@ const Nav = _ref => {
 
   /* dropdown */
   _react.default.createElement("div", {
-    style: navDropdownNavHeight,
-    className: "z-50 lg:hidden duration-500 overflow-hidden h-0",
+    className: dropdownNavClasses,
     id: "mobile-menu"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "px-2 pt-2 pb-3 space-y-1"