trepur_components 0.3.27 → 0.3.30

package/dist/components/AlertBar/index.js

@@ -2,16 +2,14 @@
 
 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 = exports.alertBarProps = void 0;
 
-require("core-js/modules/es.array.includes.js");
+require("core-js/modules/web.dom-collections.iterator.js");
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _Icon = _interopRequireWildcard(require("../Icon"));
 
@@ -19,12 +17,12 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 
 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; }
@@ -53,17 +51,25 @@ const AlertBar = _ref => {
     alertBarProps
   } = _ref;
   if (alertBarProps == undefined) return;
+  const [alertBarStatus, setAlertBarStatus] = (0, _react.useState)({
+    status: 'open',
+    display: true
+  });
   const bgColor = (0, _classnames.default)({
-    'bg-brand-success': (alertBarProps === null || alertBarProps === void 0 ? void 0 : alertBarProps.type) === 'success',
-    'bg-brand-warning': (alertBarProps === null || alertBarProps === void 0 ? void 0 : alertBarProps.type) === 'warning',
-    'bg-brand-error': (alertBarProps === null || alertBarProps === void 0 ? void 0 : alertBarProps.type) === 'error',
-    'bg-brand-info-light': (alertBarProps === null || alertBarProps === void 0 ? void 0 : alertBarProps.type) === 'info',
-    'bg-brand-info-light': !['success', 'warning', 'error', 'info'].includes(alertBarProps === null || alertBarProps === void 0 ? void 0 : alertBarProps.type)
+    'bg-success': (alertBarProps === null || alertBarProps === void 0 ? void 0 : alertBarProps.type) === 'success',
+    'bg-warning': (alertBarProps === null || alertBarProps === void 0 ? void 0 : alertBarProps.type) === 'warning',
+    'bg-error': (alertBarProps === null || alertBarProps === void 0 ? void 0 : alertBarProps.type) === 'error',
+    'bg-info-light': (alertBarProps === null || alertBarProps === void 0 ? void 0 : alertBarProps.type) === 'info'
+  });
+  const alertBarState = (0, _classnames.default)({
+    'opacity-100': alertBarStatus.state === 'open',
+    'opacity-0': alertBarStatus.state === 'closed',
+    'hidden': alertBarStatus.display === false
   });
   const classList = (0, _classnames.default)({
     [bgColor]: bgColor,
     [alertBarProps.classes]: (alertBarProps === null || alertBarProps === void 0 ? void 0 : alertBarProps.classes) !== undefined
-  }, 'w-parent flex rounded-md');
+  }, "w-parent flex py-2 transition-opactiy duration-700 ".concat(alertBarState));
   const textClassList = (0, _classnames.default)({
     'text-center': alertBarProps === null || alertBarProps === void 0 ? void 0 : alertBarProps.textCenter,
     'pl-4': !(alertBarProps !== null && alertBarProps !== void 0 && alertBarProps.textCenter),
@@ -78,7 +84,14 @@ const AlertBar = _ref => {
   }, 'pt-3 pl-8');
 
   const closeAlertBar = () => {
-    document.getElementById(alertBarProps !== null && alertBarProps !== void 0 && alertBarProps.id ? alertBarProps === null || alertBarProps === void 0 ? void 0 : alertBarProps.id : 'alertBar').classList.add('hidden'); // alertBarProps?.onDismissClick && alertBarProps?.onDismissClick
+    setAlertBarStatus({
+      state: 'closed',
+      display: alertBarStatus.display
+    });
+    setTimeout(() => setAlertBarStatus({
+      state: 'closed',
+      display: false
+    }), 700);
   };
 
   alertBarProps.dismissIcon = _objectSpread(_objectSpread({}, alertBarProps === null || alertBarProps === void 0 ? void 0 : alertBarProps.dismissIcon), {}, {

package/dist/components/Breadcrumbs/index.js

@@ -49,7 +49,7 @@ const Breadcrumbs = _ref => {
     }, link.name) : /*#__PURE__*/_react.default.createElement("p", {
       className: "px-1 py-1"
     }, /*#__PURE__*/_react.default.createElement("a", {
-      className: "text-social-facebook hover:underline",
+      className: "text-facebook hover:underline",
       href: link.href
     }, link.name)))), i + 1 < linksLength && /*#__PURE__*/_react.default.createElement("li", {
       className: "h-8"

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

@@ -150,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/Collapsible/index.js

@@ -47,16 +47,32 @@ const collapsibleProps = {
   contentBgColor: _propTypes.default.string,
   contentTextColor: _propTypes.default.string,
   showBottomLine: _propTypes.default.bool,
-  iconProps: _propTypes.default.object,
-  children: _propTypes.default.any
+  iconProps: _propTypes.default.object
 };
 exports.collapsibleProps = collapsibleProps;
 
 const Collapsible = _ref => {
   let {
-    collapsibleProps
+    collapsibleProps,
+    children
   } = _ref;
   const [expanded, setExpanded] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    var coll = document.getElementsByClassName("collapsible");
+    var i;
+
+    for (i = 0; i < coll.length; i++) {
+      coll[i].addEventListener("click", function () {
+        var content = this.nextElementSibling;
+
+        if (content.style.maxHeight === '0px') {
+          content.style.maxHeight = content.scrollHeight + "px";
+        } else {
+          content.style.maxHeight = '0px';
+        }
+      });
+    }
+  });
   if (collapsibleProps == undefined) return;
   const titleBold = collapsibleProps !== null && collapsibleProps !== void 0 && collapsibleProps.boldTitle ? 'text-bold' : '';
   const padding = (0, _classnames.default)({
@@ -69,7 +85,7 @@ const Collapsible = _ref => {
   const borders = (0, _classnames.default)({
     'border-b': collapsibleProps === null || collapsibleProps === void 0 ? void 0 : collapsibleProps.borderBottom,
     'border-t': collapsibleProps === null || collapsibleProps === void 0 ? void 0 : collapsibleProps.borderTop,
-    [collapsibleProps.textColor]: collapsibleProps === null || collapsibleProps === void 0 ? void 0 : collapsibleProps.textColor,
+    [collapsibleProps === null || collapsibleProps === void 0 ? void 0 : collapsibleProps.textColor]: collapsibleProps === null || collapsibleProps === void 0 ? void 0 : collapsibleProps.textColor,
     [collapsibleProps.bgColor]: collapsibleProps === null || collapsibleProps === void 0 ? void 0 : collapsibleProps.bgColor,
     'text-white': !(collapsibleProps !== null && collapsibleProps !== void 0 && collapsibleProps.textColor),
     'bg-light-grey': !collapsibleProps.bgColor,
@@ -77,22 +93,39 @@ const Collapsible = _ref => {
     [collapsibleProps.hoverBgColor]: collapsibleProps === null || collapsibleProps === void 0 ? void 0 : collapsibleProps.hoverBgColor,
     'hover:text-white': !(collapsibleProps !== null && collapsibleProps !== void 0 && collapsibleProps.hoverTextColor),
     'hover:bg-light-grey': !collapsibleProps.hoverBgColor
-  }, 'w-auto flex text-center');
+  }, ' w-auto flex text-center collapsible');
   const contentWrapperClasses = (0, _classnames.default)({
     'border-b': collapsibleProps === null || collapsibleProps === void 0 ? void 0 : collapsibleProps.showBottomLine,
     [collapsibleProps.contentBgColor]: collapsibleProps === null || collapsibleProps === void 0 ? void 0 : collapsibleProps.contentBgColor,
     'bg-light-grey': !(collapsibleProps !== null && collapsibleProps !== void 0 && collapsibleProps.contentBgColor),
     [collapsibleProps.contentTextColor]: collapsibleProps === null || collapsibleProps === void 0 ? void 0 : collapsibleProps.contentTextColor,
-    'text-white': collapsibleProps === null || collapsibleProps === void 0 ? void 0 : collapsibleProps.contentTextColor
-  }, 'expandable w-auto');
+    'text-white': !(collapsibleProps !== null && collapsibleProps !== void 0 && collapsibleProps.contentTextColor),
+    'max-h-max my-2': expanded,
+    'max-h-0': !expanded
+  }, 'w-auto overflow-hidden px-4');
+
+  const expandItem = e => {
+    const content = e.currentTarget.nextElementSibling;
+
+    if (!expanded) {
+      content.style.maxHeight = "".concat(content.scrollHeight, "px");
+    } else {
+      content.style.maxHeight = '0px';
+    }
+
+    setExpanded(!expanded);
+  };
+
   return /*#__PURE__*/_react.default.createElement("div", _extends({}, (collapsibleProps === null || collapsibleProps === void 0 ? void 0 : collapsibleProps.id) && {
     id: collapsibleProps.id
   }, {
     className: collapsibleProps === null || collapsibleProps === void 0 ? void 0 : collapsibleProps.classes
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    onClick: () => setExpanded(!expanded),
+  }), /*#__PURE__*/_react.default.createElement("div", _extends({}, (collapsibleProps === null || collapsibleProps === void 0 ? void 0 : collapsibleProps.id) && {
+    id: collapsibleProps === null || collapsibleProps === void 0 ? void 0 : collapsibleProps.id
+  }, {
+    onClick: e => expandItem(e),
     className: borders
-  }, (collapsibleProps === null || collapsibleProps === void 0 ? void 0 : collapsibleProps.iconProps) && /*#__PURE__*/_react.default.createElement("div", {
+  }), (collapsibleProps === null || collapsibleProps === void 0 ? void 0 : collapsibleProps.iconProps) && /*#__PURE__*/_react.default.createElement("div", {
     className: "pl-4 text-left ".concat(padding, " ").concat(textSubstitutePadding)
   }, /*#__PURE__*/_react.default.createElement(_index.default, {
     iconProps: collapsibleProps === null || collapsibleProps === void 0 ? void 0 : collapsibleProps.iconProps
@@ -110,9 +143,12 @@ const Collapsible = _ref => {
     iconProps: {
       type: 'chevron-down'
     }
-  })))), (collapsibleProps === null || collapsibleProps === void 0 ? void 0 : collapsibleProps.isDropdown) && expanded && /*#__PURE__*/_react.default.createElement("div", {
-    className: contentWrapperClasses
-  }, collapsibleProps === null || collapsibleProps === void 0 ? void 0 : collapsibleProps.children));
+  })))), (collapsibleProps === null || collapsibleProps === void 0 ? void 0 : collapsibleProps.isDropdown) && /*#__PURE__*/_react.default.createElement("div", {
+    className: contentWrapperClasses,
+    style: {
+      'transition': 'max-height 0.2s ease-out'
+    }
+  }, children));
 };
 
 Collapsible.propTypes = {

package/dist/components/Greeting/index.js

@@ -0,0 +1,69 @@
+"use strict";
+
+require("core-js/modules/es.object.assign.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("core-js/modules/es.parse-int.js");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+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 ? Object.assign.bind() : 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 greetingProps = {
+  id: _propTypes.default.string,
+  classes: _propTypes.default.string,
+  morningMessage: _propTypes.default.string,
+  afternoonMessage: _propTypes.default.string,
+  eveningMessage: _propTypes.default.string
+};
+
+const Greeting = _ref => {
+  let {
+    greetingProps
+  } = _ref;
+  const today = new Date();
+  const hours = ('0' + today.getHours()).slice(-2);
+  const minutes = ('0' + today.getMinutes()).slice(-2);
+  const seconds = ('0' + today.getSeconds()).slice(-2);
+  const time = parseInt("".concat(hours).concat(minutes).concat(seconds));
+  let message;
+
+  if (time < 120000) {
+    message = (greetingProps === null || greetingProps === void 0 ? void 0 : greetingProps.morningMessage) || 'Good morning';
+  } else if (time > 115959 && time < 170000) {
+    message = (greetingProps === null || greetingProps === void 0 ? void 0 : greetingProps.afternoonMessage) || 'Good afternoon';
+  } else if (time > 165959) {
+    message = (greetingProps === null || greetingProps === void 0 ? void 0 : greetingProps.afternoonMessage) || 'Good evening';
+  }
+
+  const classList = (0, _classnames.default)({
+    [greetingProps === null || greetingProps === void 0 ? void 0 : greetingProps.classes]: greetingProps === null || greetingProps === void 0 ? void 0 : greetingProps.classes
+  });
+  return /*#__PURE__*/_react.default.createElement("p", _extends({}, (greetingProps === null || greetingProps === void 0 ? void 0 : greetingProps.id) && {
+    id: greetingProps.id
+  }, {
+    className: classList
+  }), message);
+};
+
+Greeting.propTypes = {
+  greetingProps: _propTypes.default.shape(_objectSpread({}, greetingProps))
+};
+var _default = Greeting;
+exports.default = _default;

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,
@@ -66,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,
@@ -100,7 +141,7 @@ const Nav = _ref => {
     [bgColor]: bgColor,
     'bg-blue': !bgColor,
     [borderBottomColor]: borderBottomColor,
-    'border-b-social-facebook': !borderBottomColor
+    'border-b-facebook': !borderBottomColor
   });
   const desktopClassList = (0, _classnames.default)({
     'fixed w-full z-50 top-0 mt-0': fixedTop,
@@ -141,6 +182,7 @@ const Nav = _ref => {
     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", {
@@ -253,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/StarRating/index.js

@@ -62,7 +62,7 @@ const StarRating = _ref => {
           classes: "".concat(iconClassList, " checked"),
           type: 'star',
           size: starRatingProps === null || starRatingProps === void 0 ? void 0 : (_starRatingProps$icon2 = starRatingProps.iconProps) === null || _starRatingProps$icon2 === void 0 ? void 0 : _starRatingProps$icon2.size,
-          colour: 'text-brand-gold'
+          colour: 'text-gold'
         }
       }));
     }
@@ -83,7 +83,7 @@ const StarRating = _ref => {
           classes: "".concat(iconClassList, " unchecked opacity-30 gold"),
           type: 'star',
           size: starRatingProps === null || starRatingProps === void 0 ? void 0 : (_starRatingProps$icon3 = starRatingProps.iconProps) === null || _starRatingProps$icon3 === void 0 ? void 0 : _starRatingProps$icon3.size,
-          colour: 'text-brand-gold'
+          colour: 'text-gold'
         }
       }));
     }

package/dist/components/TextAndTitle/index.js

@@ -125,7 +125,7 @@ const TextAndTitle = _ref => {
     [textAndTitleProps.titleColor]: textAndTitleProps === null || textAndTitleProps === void 0 ? void 0 : textAndTitleProps.titleColor,
     'text-black': !(textAndTitleProps !== null && textAndTitleProps !== void 0 && textAndTitleProps.titleColor),
     [borderClasses]: (textAndTitleProps === null || textAndTitleProps === void 0 ? void 0 : textAndTitleProps.withLiveUpdates) && !isInEditingMode
-  }, 'text-md sm:text-lg');
+  }, 'text-md sm:text-lg, break-words');
   const textClassList = (0, _classnames.default)({
     'text-center': textAndTitleProps === null || textAndTitleProps === void 0 ? void 0 : textAndTitleProps.textCenter,
     [textAndTitleProps.textClasses]: textAndTitleProps === null || textAndTitleProps === void 0 ? void 0 : textAndTitleProps.textClasses,
@@ -181,10 +181,10 @@ const TextAndTitle = _ref => {
     'hover:border-black hover:border-dashed': (textAndTitleProps === null || textAndTitleProps === void 0 ? void 0 : textAndTitleProps.withLiveUpdates) && !isInEditingMode
   }, 'border-2 border-transparent');
   const titleWrapperClassList = (0, _classnames.default)({
-    'md:w-1/2 md:text-center px-8': textAndTitleProps === null || textAndTitleProps === void 0 ? void 0 : textAndTitleProps.isHorizontal
+    'md:w-1/2 md:text-center md:px-8': textAndTitleProps === null || textAndTitleProps === void 0 ? void 0 : textAndTitleProps.isHorizontal
   });
   const textWrapperClassList = (0, _classnames.default)({
-    'md:w-1/2 md:text-center md:py-8 px-8': textAndTitleProps === null || textAndTitleProps === void 0 ? void 0 : textAndTitleProps.isHorizontal
+    'md:w-1/2 md:text-center md:py-8 md:px-8': textAndTitleProps === null || textAndTitleProps === void 0 ? void 0 : textAndTitleProps.isHorizontal
   });
   return /*#__PURE__*/_react.default.createElement("div", _extends({}, (textAndTitleProps === null || textAndTitleProps === void 0 ? void 0 : textAndTitleProps.id) && {
     id: textAndTitleProps.id

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.27",
+  "version": "0.3.30",
   "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",