trepur_components 0.3.25 → 0.3.28

package/dist/components/Button/index.js

@@ -52,7 +52,8 @@ const buttonProps = {
   target: _propTypes.default.string,
   leftIcon: _propTypes.default.shape(_Icon.iconProps),
   rightIcon: _propTypes.default.shape(_Icon.iconProps),
-  centerIcon: _propTypes.default.shape(_Icon.iconProps)
+  centerIcon: _propTypes.default.shape(_Icon.iconProps),
+  ariaLabel: _propTypes.default.string
 };
 exports.buttonProps = buttonProps;
 
@@ -120,6 +121,8 @@ const Button = _ref => {
     className: classList,
     type: "button",
     "aria-busy": buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.isLoading
+  }, (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.ariaLabel) && {
+    "aria-label": buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.ariaLabel
   }, (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.onClick) && {
     onClick: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.onClick
   }, (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.disabled) && {

package/dist/components/Carousel/index.js

@@ -11,8 +11,6 @@ require("core-js/modules/web.dom-collections.iterator.js");
 
 var _react = _interopRequireWildcard(require("react"));
 
-require("keen-slider/keen-slider.min.css");
-
 var _react2 = require("keen-slider/react");
 
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -152,6 +150,7 @@ const Carousel = _ref => {
 
         (_instanceRef$current11 = instanceRef.current) === null || _instanceRef$current11 === void 0 ? void 0 : _instanceRef$current11.moveToIdx(idx);
       },
+      "aria-label": "".concat(id, "_item_").concat(idx),
       className: dotClasses + (currentSlide === idx ? " active ".concat(dots === null || dots === void 0 ? void 0 : dots.activeColours) : " ".concat(dots === null || dots === void 0 ? void 0 : dots.colours))
     });
   })));

package/dist/components/Nav/index.js

@@ -15,12 +15,56 @@ var _Icon = _interopRequireDefault(require("../Icon"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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); }
 
 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; }
+
+const burgerMenuBtnProps = {
+  bgColor: _propTypes.default.string,
+  color: _propTypes.default.string,
+  hoverBgColor: _propTypes.default.string,
+  hoverColor: _propTypes.default.string,
+  activeBgColor: _propTypes.default.string
+};
+const navProps = {
+  id: _propTypes.default.string,
+  classes: _propTypes.default.string,
+  firstRow: _propTypes.default.array,
+  firstRowClasses: _propTypes.default.string,
+  secondRow: _propTypes.default.array,
+  secondRowClasses: _propTypes.default.string,
+  thirdRow: _propTypes.default.array,
+  thirdRowClasses: _propTypes.default.string,
+  mobileItems: _propTypes.default.object,
+  bgColor: _propTypes.default.string,
+  burgerMenuBtn: burgerMenuBtnProps,
+  mobileBgColor: _propTypes.default.string,
+  asSideBar: _propTypes.default.bool,
+  mobileNavCloseColor: _propTypes.default.string,
+  sideBarWidth: _propTypes.default.string,
+  dropdownNavHeight: _propTypes.default.string,
+  mobileLogo: _propTypes.default.string,
+  mobileLogoBannerClasses: _propTypes.default.string,
+  mobileNavLogoLink: _propTypes.default.string,
+  fixedTop: _propTypes.default.bool,
+  mobileClasses: _propTypes.default.string,
+  borderBottom: _propTypes.default.bool,
+  borderBottomColor: _propTypes.default.string,
+  closeMobileIconProps: _propTypes.default.string,
+  rowHeight: _propTypes.default.string,
+  getNavStatus: _propTypes.default.func
+};
+
 const Nav = _ref => {
   let {
     id,
@@ -33,11 +77,8 @@ const Nav = _ref => {
     thirdRowClasses,
     mobileItems,
     bgColor,
+    burgerMenuBtn,
     mobileBgColor,
-    mobileNavButtonBgColor,
-    mobileNavButtonColor,
-    hoverMobileNavButtonBgColor,
-    hoverMobileNavButtonColor,
     asSideBar,
     mobileNavCloseColor,
     sideBarWidth,
@@ -50,7 +91,8 @@ const Nav = _ref => {
     borderBottom,
     borderBottomColor,
     closeMobileIconProps,
-    rowHeight
+    rowHeight,
+    getNavStatus
   } = _ref;
   const [showSideNav, setShowSideNav] = (0, _react.useState)(false);
   const [showDropdownNav, setShowDropdownNav] = (0, _react.useState)(false);
@@ -65,14 +107,14 @@ const Nav = _ref => {
     [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
+    [burgerMenuBtn === null || burgerMenuBtn === void 0 ? void 0 : burgerMenuBtn.bgColor]: burgerMenuBtn === null || burgerMenuBtn === void 0 ? void 0 : burgerMenuBtn.bgColor,
+    'bg-white': !(burgerMenuBtn !== null && burgerMenuBtn !== void 0 && burgerMenuBtn.bgColor),
+    [burgerMenuBtn === null || burgerMenuBtn === void 0 ? void 0 : burgerMenuBtn.color]: burgerMenuBtn === null || burgerMenuBtn === void 0 ? void 0 : burgerMenuBtn.color,
+    'text-black': !(burgerMenuBtn !== null && burgerMenuBtn !== void 0 && burgerMenuBtn.color),
+    [burgerMenuBtn === null || burgerMenuBtn === void 0 ? void 0 : burgerMenuBtn.hoverBgColor]: burgerMenuBtn === null || burgerMenuBtn === void 0 ? void 0 : burgerMenuBtn.hoverBgColor,
+    'hover:bg-black': !(burgerMenuBtn !== null && burgerMenuBtn !== void 0 && burgerMenuBtn.hoverBgColor),
+    [burgerMenuBtn === null || burgerMenuBtn === void 0 ? void 0 : burgerMenuBtn.hoverColor]: burgerMenuBtn === null || burgerMenuBtn === void 0 ? void 0 : burgerMenuBtn.hoverColor,
+    'hover:text-white': !(burgerMenuBtn !== null && burgerMenuBtn !== void 0 && burgerMenuBtn.hoverColor)
   });
   const sideNavClasses = (0, _classnames.default)({
     [mobileBgColor]: mobileBgColor,
@@ -105,6 +147,28 @@ const Nav = _ref => {
     'fixed w-full z-50 top-0 mt-0': fixedTop,
     'border-b': borderBottom
   }, "hidden md:block items-center justify-between sm:items-stretch text-center");
+
+  const openMenu = () => {
+    getNavStatus({
+      asSideBar: asSideBar,
+      open: true
+    });
+
+    if (asSideBar) {
+      setShowSideNav(true);
+    } else {
+      setShowDropdownNav(!showDropdownNav);
+    }
+  };
+
+  const closeMenu = () => {
+    getNavStatus({
+      asSideBar: asSideBar,
+      open: false
+    });
+    setShowSideNav(false);
+  };
+
   return /*#__PURE__*/_react.default.createElement("nav", {
     id: id,
     className: classes
@@ -115,9 +179,10 @@ const Nav = _ref => {
     id: "nav-collapse-btn-wrapper",
     className: "absolute inset-y-0 left-2 flex items-center"
   }, /*#__PURE__*/_react.default.createElement("button", {
-    onClick: asSideBar ? () => setShowSideNav(true) : () => setShowDropdownNav(!showDropdownNav),
+    onClick: openMenu,
     type: "button",
     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-label": "open navigation",
     "aria-controls": "mobile-menu",
     "aria-expanded": "false"
   }, /*#__PURE__*/_react.default.createElement("svg", {
@@ -205,7 +270,7 @@ const Nav = _ref => {
   }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     iconProps: {
       classes: closeMobileIconProps === null || closeMobileIconProps === void 0 ? void 0 : closeMobileIconProps.classes,
-      onClick: () => setShowSideNav(false),
+      onClick: closeMenu,
       type: closeMobileIconProps === null || closeMobileIconProps === void 0 ? void 0 : closeMobileIconProps.type,
       size: closeMobileIconProps === null || closeMobileIconProps === void 0 ? void 0 : closeMobileIconProps.size
     }
@@ -230,5 +295,8 @@ const Nav = _ref => {
   }))));
 };
 
+Nav.propTypes = {
+  navProps: _propTypes.default.shape(_objectSpread({}, navProps))
+};
 var _default = Nav;
 exports.default = _default;

package/dist/components/NavItem/index.js

@@ -1,7 +1,5 @@
 "use strict";
 
-require("core-js/modules/web.dom-collections.iterator.js");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,7 +7,7 @@ exports.navItemProps = exports.default = void 0;
 
 require("core-js/modules/es.object.assign.js");
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -17,10 +15,6 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-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); }
-
-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; }
@@ -36,23 +30,36 @@ const navItemProps = {
   name: _propTypes.default.string,
   url: _propTypes.default.string,
   onClick: _propTypes.default.func,
-  borderColor: _propTypes.default.string,
-  textColor: _propTypes.default.string,
-  bgColor: _propTypes.default.string,
-  hoverBorderColor: _propTypes.default.string,
-  hoverTextColor: _propTypes.default.string,
-  hoverBgColor: _propTypes.default.string,
   bordered: _propTypes.default.bool,
   rounded: _propTypes.default.bool,
   underlineOnHover: _propTypes.default.bool,
   isActive: _propTypes.default.bool,
-  activeBorderColor: _propTypes.default.string,
-  activeTextColor: _propTypes.default.string,
-  activeBgColor: _propTypes.default.string
+  default: _propTypes.default.shape({
+    borderColor: _propTypes.default.string,
+    textColor: _propTypes.default.string,
+    bgColor: _propTypes.default.string
+  }),
+  hover: _propTypes.default.shape({
+    borderColor: _propTypes.default.string,
+    textColor: _propTypes.default.string,
+    bgColor: _propTypes.default.string
+  }),
+  focus: _propTypes.default.shape({
+    borderColor: _propTypes.default.string,
+    textColor: _propTypes.default.string,
+    bgColor: _propTypes.default.string
+  }),
+  active: _propTypes.default.shape({
+    borderColor: _propTypes.default.string,
+    textColor: _propTypes.default.string,
+    bgColor: _propTypes.default.string
+  })
 };
 exports.navItemProps = navItemProps;
 
 const NavItem = _ref => {
+  var _navItemProps$default, _navItemProps$default2, _navItemProps$default3, _navItemProps$default4, _navItemProps$default5, _navItemProps$default6, _navItemProps$default7, _navItemProps$default8, _navItemProps$default9, _navItemProps$active, _navItemProps$active2, _navItemProps$active3, _navItemProps$active4, _navItemProps$active5, _navItemProps$active6, _navItemProps$active7, _navItemProps$active8, _navItemProps$active9, _navItemProps$hover, _navItemProps$hover2, _navItemProps$hover3, _navItemProps$hover4, _navItemProps$hover5, _navItemProps$hover6, _navItemProps$hover7, _navItemProps$hover8, _navItemProps$hover9, _navItemProps$focus, _navItemProps$focus2, _navItemProps$focus3, _navItemProps$focus4, _navItemProps$focus5, _navItemProps$focus6, _navItemProps$focus7, _navItemProps$focus8, _navItemProps$focus9;
+
   let {
     navItemProps
   } = _ref;
@@ -68,28 +75,36 @@ const NavItem = _ref => {
     [navItemProps.linkClasses]: navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.linkClasses
   }, 'px-4 mx-2 mb-4 text-center whitespace-nowrap');
   const styleClasses = (0, _classnames.default)({
-    [navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.bgColor]: navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.bgColor,
-    'bg-black': !(navItemProps !== null && navItemProps !== void 0 && navItemProps.bgColor),
-    [navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.textColor]: navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.textColor,
-    'text-white': !(navItemProps !== null && navItemProps !== void 0 && navItemProps.textColor),
-    [navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.borderColor]: navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.borderColor,
-    'border-black': !(navItemProps !== null && navItemProps !== void 0 && navItemProps.borderColor)
+    [navItemProps === null || navItemProps === void 0 ? void 0 : (_navItemProps$default = navItemProps.default) === null || _navItemProps$default === void 0 ? void 0 : _navItemProps$default.bgColor]: navItemProps === null || navItemProps === void 0 ? void 0 : (_navItemProps$default2 = navItemProps.default) === null || _navItemProps$default2 === void 0 ? void 0 : _navItemProps$default2.bgColor,
+    'bg-black': !(navItemProps !== null && navItemProps !== void 0 && (_navItemProps$default3 = navItemProps.default) !== null && _navItemProps$default3 !== void 0 && _navItemProps$default3.bgColor),
+    [navItemProps === null || navItemProps === void 0 ? void 0 : (_navItemProps$default4 = navItemProps.default) === null || _navItemProps$default4 === void 0 ? void 0 : _navItemProps$default4.textColor]: navItemProps === null || navItemProps === void 0 ? void 0 : (_navItemProps$default5 = navItemProps.default) === null || _navItemProps$default5 === void 0 ? void 0 : _navItemProps$default5.textColor,
+    'text-white': !(navItemProps !== null && navItemProps !== void 0 && (_navItemProps$default6 = navItemProps.default) !== null && _navItemProps$default6 !== void 0 && _navItemProps$default6.textColor),
+    [navItemProps === null || navItemProps === void 0 ? void 0 : (_navItemProps$default7 = navItemProps.default) === null || _navItemProps$default7 === void 0 ? void 0 : _navItemProps$default7.borderColor]: navItemProps === null || navItemProps === void 0 ? void 0 : (_navItemProps$default8 = navItemProps.default) === null || _navItemProps$default8 === void 0 ? void 0 : _navItemProps$default8.borderColor,
+    'border-black': !(navItemProps !== null && navItemProps !== void 0 && (_navItemProps$default9 = navItemProps.default) !== null && _navItemProps$default9 !== void 0 && _navItemProps$default9.borderColor)
   });
   const activeStyleClasses = (0, _classnames.default)({
-    [navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.activeBgColor]: navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.activeBgColor,
-    'bg-blue': !(navItemProps !== null && navItemProps !== void 0 && navItemProps.activeBgColor),
-    [navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.activeTextColor]: navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.activeTextColor,
-    'text-white': !(navItemProps !== null && navItemProps !== void 0 && navItemProps.activeTextColor),
-    [navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.activeBorderColor]: navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.activeBorderColor,
-    'border-blue': !(navItemProps !== null && navItemProps !== void 0 && navItemProps.activeBorderColor)
+    [navItemProps === null || navItemProps === void 0 ? void 0 : (_navItemProps$active = navItemProps.active) === null || _navItemProps$active === void 0 ? void 0 : _navItemProps$active.bgColor]: navItemProps === null || navItemProps === void 0 ? void 0 : (_navItemProps$active2 = navItemProps.active) === null || _navItemProps$active2 === void 0 ? void 0 : _navItemProps$active2.bgColor,
+    'bg-blue': !(navItemProps !== null && navItemProps !== void 0 && (_navItemProps$active3 = navItemProps.active) !== null && _navItemProps$active3 !== void 0 && _navItemProps$active3.bgColor),
+    [navItemProps === null || navItemProps === void 0 ? void 0 : (_navItemProps$active4 = navItemProps.active) === null || _navItemProps$active4 === void 0 ? void 0 : _navItemProps$active4.textColor]: navItemProps === null || navItemProps === void 0 ? void 0 : (_navItemProps$active5 = navItemProps.active) === null || _navItemProps$active5 === void 0 ? void 0 : _navItemProps$active5.textColor,
+    'text-white': !(navItemProps !== null && navItemProps !== void 0 && (_navItemProps$active6 = navItemProps.active) !== null && _navItemProps$active6 !== void 0 && _navItemProps$active6.textColor),
+    [navItemProps === null || navItemProps === void 0 ? void 0 : (_navItemProps$active7 = navItemProps.active) === null || _navItemProps$active7 === void 0 ? void 0 : _navItemProps$active7.borderColor]: navItemProps === null || navItemProps === void 0 ? void 0 : (_navItemProps$active8 = navItemProps.active) === null || _navItemProps$active8 === void 0 ? void 0 : _navItemProps$active8.borderColor,
+    'border-blue': !(navItemProps !== null && navItemProps !== void 0 && (_navItemProps$active9 = navItemProps.active) !== null && _navItemProps$active9 !== void 0 && _navItemProps$active9.borderColor)
   });
   const hoverStyles = (0, _classnames.default)({
-    [navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.hoverBgColor]: navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.hoverBgColor,
-    'hover:bg-white': !(navItemProps !== null && navItemProps !== void 0 && navItemProps.hoverBgColor),
-    [navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.hoverTextColor]: navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.hoverTextColor,
-    'hover:text-black': !(navItemProps !== null && navItemProps !== void 0 && navItemProps.hoverTextColor),
-    [navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.hoverBorderColor]: navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.hoverBorderColor,
-    'hover:border-black': !(navItemProps !== null && navItemProps !== void 0 && navItemProps.hoverBorderColor)
+    [navItemProps === null || navItemProps === void 0 ? void 0 : (_navItemProps$hover = navItemProps.hover) === null || _navItemProps$hover === void 0 ? void 0 : _navItemProps$hover.bgColor]: navItemProps === null || navItemProps === void 0 ? void 0 : (_navItemProps$hover2 = navItemProps.hover) === null || _navItemProps$hover2 === void 0 ? void 0 : _navItemProps$hover2.bgColor,
+    'hover:bg-white': !(navItemProps !== null && navItemProps !== void 0 && (_navItemProps$hover3 = navItemProps.hover) !== null && _navItemProps$hover3 !== void 0 && _navItemProps$hover3.bgColor),
+    [navItemProps === null || navItemProps === void 0 ? void 0 : (_navItemProps$hover4 = navItemProps.hover) === null || _navItemProps$hover4 === void 0 ? void 0 : _navItemProps$hover4.textColor]: navItemProps === null || navItemProps === void 0 ? void 0 : (_navItemProps$hover5 = navItemProps.hover) === null || _navItemProps$hover5 === void 0 ? void 0 : _navItemProps$hover5.textColor,
+    'hover:text-black': !(navItemProps !== null && navItemProps !== void 0 && (_navItemProps$hover6 = navItemProps.hover) !== null && _navItemProps$hover6 !== void 0 && _navItemProps$hover6.textColor),
+    [navItemProps === null || navItemProps === void 0 ? void 0 : (_navItemProps$hover7 = navItemProps.hover) === null || _navItemProps$hover7 === void 0 ? void 0 : _navItemProps$hover7.borderColor]: navItemProps === null || navItemProps === void 0 ? void 0 : (_navItemProps$hover8 = navItemProps.hover) === null || _navItemProps$hover8 === void 0 ? void 0 : _navItemProps$hover8.borderColor,
+    'hover:border-black': !(navItemProps !== null && navItemProps !== void 0 && (_navItemProps$hover9 = navItemProps.hover) !== null && _navItemProps$hover9 !== void 0 && _navItemProps$hover9.borderColor)
+  });
+  const focusStyles = (0, _classnames.default)({
+    [navItemProps === null || navItemProps === void 0 ? void 0 : (_navItemProps$focus = navItemProps.focus) === null || _navItemProps$focus === void 0 ? void 0 : _navItemProps$focus.bgColor]: navItemProps === null || navItemProps === void 0 ? void 0 : (_navItemProps$focus2 = navItemProps.focus) === null || _navItemProps$focus2 === void 0 ? void 0 : _navItemProps$focus2.bgColor,
+    'focus:bg-white': !(navItemProps !== null && navItemProps !== void 0 && (_navItemProps$focus3 = navItemProps.focus) !== null && _navItemProps$focus3 !== void 0 && _navItemProps$focus3.bgColor),
+    [navItemProps === null || navItemProps === void 0 ? void 0 : (_navItemProps$focus4 = navItemProps.focus) === null || _navItemProps$focus4 === void 0 ? void 0 : _navItemProps$focus4.textColor]: navItemProps === null || navItemProps === void 0 ? void 0 : (_navItemProps$focus5 = navItemProps.focus) === null || _navItemProps$focus5 === void 0 ? void 0 : _navItemProps$focus5.textColor,
+    'focus:text-black': !(navItemProps !== null && navItemProps !== void 0 && (_navItemProps$focus6 = navItemProps.focus) !== null && _navItemProps$focus6 !== void 0 && _navItemProps$focus6.textColor),
+    [navItemProps === null || navItemProps === void 0 ? void 0 : (_navItemProps$focus7 = navItemProps.focus) === null || _navItemProps$focus7 === void 0 ? void 0 : _navItemProps$focus7.borderColor]: navItemProps === null || navItemProps === void 0 ? void 0 : (_navItemProps$focus8 = navItemProps.focus) === null || _navItemProps$focus8 === void 0 ? void 0 : _navItemProps$focus8.borderColor,
+    'focus:border-black': !(navItemProps !== null && navItemProps !== void 0 && (_navItemProps$focus9 = navItemProps.focus) !== null && _navItemProps$focus9 !== void 0 && _navItemProps$focus9.borderColor)
   });
   const styles = (0, _classnames.default)({
     [activeStyleClasses]: navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.isActive,
@@ -102,7 +117,7 @@ const NavItem = _ref => {
   }), /*#__PURE__*/_react.default.createElement("a", {
     href: navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.url
   }, /*#__PURE__*/_react.default.createElement("li", {
-    className: "".concat(linkClassList, " ").concat(hoverStyles, " ").concat(styles),
+    className: "".concat(linkClassList, " ").concat(styles, " ").concat(hoverStyles, " ").concat(focusStyles),
     onClick: navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.onClick
   }, navItemProps === null || navItemProps === void 0 ? void 0 : navItemProps.name)));
 };

package/dist/components/Timeline/index.css

@@ -131,5 +131,3 @@
   left: -8%;
   z-index: -1;
 } */
-
-/*# sourceMappingURL=index.css.map */

package/dist/components/Tubestops/index.css

@@ -1,97 +1,92 @@
 /* Vertical */
 .tubestop.flex-col.none-reverse .status-flow-item:not(:first-child):before {
-  
-  position: absolute;
-  
-  display: block;
+  @apply absolute;
+  @apply block;
   
   content: "";
   width: 1px;
   height: 100%;
   left: 7px;
-  top: -100%
+  top: -100%;
 }
 
 .tubestop.flex-col.none-reverse .status-flow-item:not(:last-child):after {
-  
-  position: absolute;
-  
-  display: block;
+  @apply absolute;
+  @apply block;
  
   content: "";
   width: 1px;
   height: 100%;
   left: 7px;
-  top: 40%
+  top: 40%;
 }
 
 /* reverse */
 .tubestop.flex-col.reverse .status-flow-item:not(:first-child):before {
-  
-  position: absolute;
-  
-  display: block;
+  @apply absolute;
+  @apply block;
 
   content: "";
   width: 1px;
   height: 100%;
   right: 7px;
-  top: -100%
+  top: -100%;
 }
 
 .tubestop.flex-col.reverse .status-flow-item:not(:last-child):after {
-  
-  position: absolute;
-  
-  display: block;
+  @apply absolute;
+  @apply block;
 
   content: "";
   width: 1px;
   height: 100%;
   right: 7px;
-  top: 40%
+  top: 40%;
 }
 
 /* Horizontal */
 .tubestop.flex-row.none-reverse .status-flow-item:not(:first-child):after {
-  
-  position: absolute;
-  
-  display: block;
+  @apply absolute;
+  @apply block;
 
   content: "";
   width: 100%;
   height: 1px;
   left: -50%;
-  bottom: 7px
+  bottom: 7px;
 }
 
 .tubestop.flex-row-reverse.none-reverse
   .status-flow-item:not(:first-child):after {
-  
-  position: absolute;
-  
-  display: block;
+  @apply absolute;
+  @apply block;
 
   content: "";
   width: 100%;
   height: 1px;
   right: -50%;
-  top: 7px
+  top: 7px;
 }
 
 /*reverse*/
 .tubestop.flex-row.reverse .status-flow-item:not(:first-child):after {
+  @apply absolute;
+  @apply block;
+
+  content: "";
+  width: 100%;
+  height: 1px;
   left: -50%;
   bottom: 7px;
-  position: absolute;
-  display: block;
+}
+
+.tubestop.flex-row.reverse .status-flow-item:not(:first-child):after {
+  @apply absolute;
+  @apply block;
 
   content: "";
   width: 100%;
   height: 1px;
   right: -50%;
-  top: 7px
+  top: 7px;
 }
-
-/*# sourceMappingURL=index.css.map */

package/package.json

@@ -2,7 +2,7 @@
   "name": "trepur_components",
   "description": "component lib",
   "author": "trepur_ttenneb",
-  "version": "0.3.25",
+  "version": "0.3.28",
   "private": false,
   "keywords": [
     "react",
@@ -30,27 +30,12 @@
   },
   "scripts": {
     "compile:css": "postcss src/**/*.css --base src/lib/components --dir dist/components -m --verbose",
-    "build": "NODE_ENV=production babel src/lib --out-dir dist --ignore src/**/*.stories.js --copy-files --no-copy-ignored  && rm -rf dist/utils dist/assets  && rm -rf dist/typography && npm run compile:css",
+    "build": "NODE_ENV=production babel src/lib --out-dir dist --ignore src/**/*.stories.js --copy-files --no-copy-ignored  && rm -rf dist/utils dist/assets  && rm -rf dist/typography",
+    "build-new": "NODE_ENV=production babel src/lib --out-dir dist --ignore src/**/*.stories.js --copy-files --no-copy-ignored  && rm -rf dist/utils dist/assets  && rm -rf dist/typography && npm run compile:css",
     "eject": "react-scripts eject",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook -s public"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ],
-    "overrides": [
-      {
-        "files": [
-          "**/*.stories.*"
-        ],
-        "rules": {
-          "import/no-anonymous-default-export": "off"
-        }
-      }
-    ]
-  },
   "browserslist": {
     "production": [
       ">0.2%",
@@ -64,8 +49,7 @@
     ]
   },
   "devDependencies": {
-    "@babel/cli": "^7.17.6",
-    "@babel/core": "^7.17.5",
+    "@babel/cli": "^7.18.10",
     "@babel/preset-env": "^7.16.11",
     "@storybook/addon-actions": "^6.4.19",
     "@storybook/addon-essentials": "^6.4.19",
@@ -78,7 +62,6 @@
     "@storybook/react": "^6.4.19",
     "@storybook/testing-library": "0.0.9",
     "autoprefixer": "^10.4.2",
-    "babel-cli": "^6.26.0",
     "babel-plugin-module-resolver": "^4.1.0",
     "postcss": "^8.4.16",
     "tailwindcss": "^3.0.23",