trepur_components 0.3.21 → 0.3.24

package/dist/components/Jumbotron/index.js

@@ -13,7 +13,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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); }
+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 Jumbotron = _ref => {
   let {

package/dist/components/NavItem/index.js

@@ -27,7 +27,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 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); }
+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 navItemProps = {
   id: _propTypes.default.string,

package/dist/components/NewsCard/index.js

@@ -17,7 +17,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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); }
+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 NewsCard = _ref => {
   let {

package/dist/components/Profile/index.js

@@ -21,7 +21,7 @@ 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 _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); }
+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 Profile = _ref => {
   let {

package/dist/components/Row/index.js

@@ -21,7 +21,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 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); }
+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 rowProps = {
   id: _propTypes.default.string,

package/dist/components/Search/index.js

@@ -15,7 +15,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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); }
+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 Search = _ref => {
   let {

package/dist/components/SocialBlock/index.js

@@ -29,7 +29,7 @@ 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 _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); }
+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; }
 

package/dist/components/StarRating/index.js

@@ -17,8 +17,6 @@ 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; }
@@ -27,7 +25,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 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); }
+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 starRatingProps = {
   id: _propTypes.default.string,
@@ -58,12 +56,13 @@ const StarRating = _ref => {
       var _starRatingProps$icon2;
 
       starsArr.push( /*#__PURE__*/_react.default.createElement(_Icon.default, {
-        key: "unchecked_star_".concat(i + 0),
+        key: "checked_star_".concat(i + 0),
         iconProps: {
-          id: "unchecked-".concat(i),
+          id: "checked-".concat(i),
           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
+          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'
         }
       }));
     }
@@ -78,12 +77,13 @@ const StarRating = _ref => {
       var _starRatingProps$icon3;
 
       starsArr.push( /*#__PURE__*/_react.default.createElement(_Icon.default, {
-        key: "checked_star_".concat(i + 0),
+        key: "unchecked_star_".concat(i + 0),
         iconProps: {
-          id: "checked-".concat(i),
-          classes: "".concat(iconClassList, " unchecked"),
+          id: "unchecked-".concat(i),
+          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
+          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'
         }
       }));
     }

package/dist/components/Testimonial/index.js

@@ -15,7 +15,7 @@ var _Image = _interopRequireDefault(require("../Image"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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); }
+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 Testimonial = _ref => {
   let {

package/dist/components/TextAndTitle/index.js

@@ -33,7 +33,7 @@ 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 _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); }
+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; }
 

package/dist/components/TextArea/index.js

@@ -21,7 +21,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 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); }
+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 textAreaProps = {
   id: _propTypes.default.string,

package/dist/components/Timeline/index.css

@@ -1,5 +1,5 @@
 /* Vertical */
-#circle.vertical:before {
+/* #circle.vertical:before {
   position: absolute;
   display: block;
   border-left: 1px solid #31a3dd;
@@ -41,10 +41,10 @@
   top: 0%;
   left: 49.9%;
   z-index: -1;
-}
+} */
 
 /* V - collapse*/
-#circle.vertical.collapse:before {
+/* #circle.vertical.collapse:before {
   position: absolute;
   display: block;
   border-left: 1px solid #31a3dd;
@@ -86,9 +86,9 @@
   top: 0%;
   left: 8.2%;
   z-index: -1;
-}
+} */
 /* Horizontal */
-#circle.horizontal:before {
+/* #circle.horizontal:before {
   position: absolute;
   display: block;
   border-top: 1px solid #31a3dd;
@@ -130,4 +130,6 @@
   top: 50%;
   left: -8%;
   z-index: -1;
-}
+} */
+
+/*# sourceMappingURL=index.css.map */

package/dist/components/Timeline/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/components/Timeline/index.css"],"names":[],"mappings":"AAAA,aAAa;AACb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;;AAEH,gBAAgB;AAChB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,eAAe;AACf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG","file":"index.css","sourcesContent":["/* Vertical */\n/* #circle.vertical:before {\n  position: absolute;\n  display: block;\n  border-left: 1px solid #31a3dd;\n  content: \"\";\n  height: 50%;\n  top: 0%;\n  left: 49.9%;\n  z-index: -1;\n}\n\n#circle.vertical:after {\n  position: absolute;\n  display: block;\n  border-left: 1px solid #31a3dd;\n  content: \"\";\n  height: 50%;\n  bottom: 0%;\n  left: 49.9%;\n  z-index: -1;\n}\n\n#first-circle.vertical:after {\n  position: absolute;\n  display: block;\n  border-left: 1px solid #31a3dd;\n  content: \"\";\n  height: 50%;\n  bottom: 0%;\n  left: 49.9%;\n  z-index: -1;\n}\n\n#last-circle.vertical:before {\n  position: absolute;\n  display: block;\n  border-left: 1px solid #31a3dd;\n  content: \"\";\n  height: 50%;\n  top: 0%;\n  left: 49.9%;\n  z-index: -1;\n} */\n\n/* V - collapse*/\n/* #circle.vertical.collapse:before {\n  position: absolute;\n  display: block;\n  border-left: 1px solid #31a3dd;\n  content: \"\";\n  height: 50%;\n  top: 0%;\n  left: 8.2%;\n  z-index: -1;\n}\n\n#circle.vertical.collapse:after {\n  position: absolute;\n  display: block;\n  border-left: 1px solid #31a3dd;\n  content: \"\";\n  height: 50%;\n  bottom: 0%;\n  left: 8.2%;\n  z-index: -1;\n}\n\n#first-circle.vertical.collapse:after {\n  position: absolute;\n  display: block;\n  border-left: 1px solid #31a3dd;\n  content: \"\";\n  height: 50%;\n  bottom: 0%;\n  left: 8.2%;\n  z-index: -1;\n}\n\n#last-circle.vertical.collapse:before {\n  position: absolute;\n  display: block;\n  border-left: 1px solid #31a3dd;\n  content: \"\";\n  height: 50%;\n  top: 0%;\n  left: 8.2%;\n  z-index: -1;\n} */\n/* Horizontal */\n/* #circle.horizontal:before {\n  position: absolute;\n  display: block;\n  border-top: 1px solid #31a3dd;\n  content: \"\";\n  width: 70%;\n  top: 50%;\n  left: -8%;\n  z-index: -1;\n}\n\n#circle.horizontal:after {\n  position: absolute;\n  display: block;\n  border-top: 1px solid #31a3dd;\n  content: \"\";\n  width: 70%;\n  top: 50%;\n  right: -12%;\n  z-index: -1;\n}\n\n#first-circle.horizontal:after {\n  position: absolute;\n  display: block;\n  border-top: 1px solid #31a3dd;\n  content: \"\";\n  width: 60%;\n  top: 50%;\n  right: -12%;\n  z-index: -1;\n}\n\n#last-circle.horizontal:before {\n  position: absolute;\n  display: block;\n  border-top: 1px solid #31a3dd;\n  content: \"\";\n  width: 55%;\n  top: 50%;\n  left: -8%;\n  z-index: -1;\n} */\n"]}

package/dist/components/Timeline/index.js

@@ -17,8 +17,6 @@ var _Column = _interopRequireDefault(require("../Column"));
 
 var _Row = _interopRequireDefault(require("../Row"));
 
-require("./index.css");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const Timeline = _ref => {
@@ -60,6 +58,86 @@ const Timeline = _ref => {
     'vertical collapse': !isHorizontal && isSm,
     'vertical': !isHorizontal && !isSm
   }, 'w-4 h-4 my-16 text-center mx-auto rounded-full border bg-black');
+  const circleVerticalBefore = {
+    'position': 'absolute',
+    'display': 'block',
+    'border-left': '1px solid #31a3dd',
+    'content': '""',
+    'height': '50%',
+    'top': '0%',
+    'left': '49.9%',
+    'z-index': '-1'
+  };
+  const circleVerticalCollapseBefore = {
+    'position': ' absolute',
+    'display': ' block',
+    'border-left': ' 1px solid #31a3dd',
+    'content': ' ""',
+    'height': ' 50%',
+    'top': ' 0%',
+    'left': ' 8.2%',
+    'z-index': ' -1'
+  };
+  const lastCircleVerticalBefore = {
+    'position': 'absolute',
+    'display': 'block',
+    'border-left': '1px solid #31a3dd',
+    'content': '""',
+    'height': '50%',
+    'top': '0%',
+    'left': '49.9%',
+    'z-index': '-1'
+  };
+  const lastCircleVerticalCollapseBefore = {
+    'position': ' absolute',
+    'display': ' block',
+    'border-left': ' 1px solid #31a3dd',
+    'content': ' ""',
+    'height': ' 50%',
+    'top': ' 0%',
+    'left': ' 8.2%',
+    'z-index': ' -1'
+  };
+  const circleVerticalAfter = {
+    'position': 'absolute',
+    'display': 'block',
+    'border-left': '1px solid #31a3dd',
+    'content': '""',
+    'height': '50%',
+    'bottom': '0%',
+    'left': '49.9%',
+    'z-index': '-1'
+  };
+  const firstCircleVerticalAfter = {
+    'position': 'absolute',
+    'display': 'block',
+    'border-left': '1px solid #31a3dd',
+    'content': '""',
+    'height': '50%',
+    'bottom': '0%',
+    'left': '49.9%',
+    'z-index': '-1'
+  };
+  const circleVerticalCollapseAfter = {
+    'position': 'absolute',
+    'display': 'block',
+    'border-left': '1px solid #31a3dd',
+    'content': '""',
+    'height': '50%',
+    'bottom': '0%',
+    'left': '8.2%',
+    'z-index': '-1'
+  };
+  const firstCircleVerticalCollapseAfter = {
+    'position': 'absolute',
+    'display': 'block',
+    'border-left': '1px solid #31a3dd',
+    'content': '""',
+    'height': '50%',
+    'bottom': '0%',
+    'left': '8.2%',
+    'z-index': '-1'
+  };
   return /*#__PURE__*/_react.default.createElement(_Column.default, {
     columnProps: {
       sm: 12,
@@ -77,6 +155,30 @@ const Timeline = _ref => {
       if (i === 0) circlePos = 'first-circle';else if (i === items.length - 1) circlePos = 'last-circle';else circlePos = "circle";
     }
 
+    let verticalCircleStylesBefore;
+
+    if (circlePos === 'circle' && isSm) {
+      verticalCircleStylesBefore = circleVerticalCollapseBefore;
+    } else if (circlePos === 'circle' && !isSm) {
+      verticalCircleStylesBefore = circleVerticalBefore;
+    } else if (circlePos === 'last-circle' && isSm) {
+      verticalCircleStylesBefore = lastCircleVerticalCollapseBefore;
+    } else if (circlePos === 'last-circle' && !isSm) {
+      verticalCircleStylesBefore = lastCircleVerticalBefore;
+    }
+
+    let verticalCircleStylesAfter;
+
+    if (circlePos === 'circle' && isSm) {
+      verticalCircleStylesAfter = circleVerticalCollapseAfter;
+    } else if (circlePos === 'circle' && !isSm) {
+      verticalCircleStylesAfter = circleVerticalAfter;
+    } else if (circlePos === 'first-circle' && isSm) {
+      verticalCircleStylesAfter = firstCircleVerticalCollapseAfter;
+    } else if (circlePos === 'first-circle' && !isSm) {
+      verticalCircleStylesAfter = firstCircleVerticalAfter;
+    }
+
     if (isHorizontal) {
       return /*#__PURE__*/_react.default.createElement(_Column.default, {
         key: "horizontal_col_".concat(i + 0),
@@ -127,13 +229,17 @@ const Timeline = _ref => {
       }, useImages ? /*#__PURE__*/_react.default.createElement("div", {
         id: circlePos,
         className: isSm ? 'vertical collapse' : 'vertical'
-      }, /*#__PURE__*/_react.default.createElement(_Image.default, {
+      }, /*#__PURE__*/_react.default.createElement("span", {
+        style: verticalCircleStylesBefore
+      }), /*#__PURE__*/_react.default.createElement(_Image.default, {
         imageProps: {
           classes: imageClassList,
           title: item.logoTitle,
           image: item.logo,
           altText: "".concat(item.logoAltText, " center logo")
         }
+      }), /*#__PURE__*/_react.default.createElement("span", {
+        style: verticalCircleStylesAfter
       })) : /*#__PURE__*/_react.default.createElement("p", {
         id: circlePos,
         className: circle

package/dist/components/Tubestops/index.css

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

package/dist/components/Tubestops/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/components/Tubestops/index.css"],"names":[],"mappings":"AAAA,aAAa;AAEX;;EAAA,kBAAe;;EACf,cAAY;;EAEZ,WAAW;EACX,UAAU;EACV,YAAY;EACZ,SAAS;EACT;AAPe;;AAWf;;EAAA,kBAAe;;EACf,cAAY;;EAEZ,WAAW;EACX,UAAU;EACV,YAAY;EACZ,SAAS;EACT;AAPe;;AAUjB,YAAY;AAEV;;EAAA,kBAAe;;EACf,cAAY;;EAEZ,WAAW;EACX,UAAU;EACV,YAAY;EACZ,UAAU;EACV;AAPe;;AAWf;;EAAA,kBAAe;;EACf,cAAY;;EAEZ,WAAW;EACX,UAAU;EACV,YAAY;EACZ,UAAU;EACV;AAPe;;AAUjB,eAAe;AAEb;;EAAA,kBAAe;;EACf,cAAY;;EAEZ,WAAW;EACX,WAAW;EACX,WAAW;EACX,UAAU;EACV;AAPe;;AAYf;;;EAAA,kBAAe;;EACf,cAAY;;EAEZ,WAAW;EACX,WAAW;EACX,WAAW;EACX,WAAW;EACX;AAPe;;AAUjB,UAAU;AAER;EAMA,UAAU;EACV,WAAW;EAIX,kBAAe;EACf,cAAY;;EAEZ,WAAW;EACX,WAAW;EACX,WAAW;EACX,WAAW;EACX;AAlBe","file":"index.css","sourcesContent":["/* Vertical */\n.tubestop.flex-col.none-reverse .status-flow-item:not(:first-child):before {\n  @apply absolute;\n  @apply block;\n  \n  content: \"\";\n  width: 1px;\n  height: 100%;\n  left: 7px;\n  top: -100%;\n}\n\n.tubestop.flex-col.none-reverse .status-flow-item:not(:last-child):after {\n  @apply absolute;\n  @apply block;\n \n  content: \"\";\n  width: 1px;\n  height: 100%;\n  left: 7px;\n  top: 40%;\n}\n\n/* reverse */\n.tubestop.flex-col.reverse .status-flow-item:not(:first-child):before {\n  @apply absolute;\n  @apply block;\n\n  content: \"\";\n  width: 1px;\n  height: 100%;\n  right: 7px;\n  top: -100%;\n}\n\n.tubestop.flex-col.reverse .status-flow-item:not(:last-child):after {\n  @apply absolute;\n  @apply block;\n\n  content: \"\";\n  width: 1px;\n  height: 100%;\n  right: 7px;\n  top: 40%;\n}\n\n/* Horizontal */\n.tubestop.flex-row.none-reverse .status-flow-item:not(:first-child):after {\n  @apply absolute;\n  @apply block;\n\n  content: \"\";\n  width: 100%;\n  height: 1px;\n  left: -50%;\n  bottom: 7px;\n}\n\n.tubestop.flex-row-reverse.none-reverse\n  .status-flow-item:not(:first-child):after {\n  @apply absolute;\n  @apply block;\n\n  content: \"\";\n  width: 100%;\n  height: 1px;\n  right: -50%;\n  top: 7px;\n}\n\n/*reverse*/\n.tubestop.flex-row.reverse .status-flow-item:not(:first-child):after {\n  @apply absolute;\n  @apply block;\n\n  content: \"\";\n  width: 100%;\n  height: 1px;\n  left: -50%;\n  bottom: 7px;\n}\n\n.tubestop.flex-row.reverse .status-flow-item:not(:first-child):after {\n  @apply absolute;\n  @apply block;\n\n  content: \"\";\n  width: 100%;\n  height: 1px;\n  right: -50%;\n  top: 7px;\n}\n"]}

package/dist/components/UserIcon/index.js

@@ -17,7 +17,7 @@ var _Image = _interopRequireDefault(require("../Image"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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); }
+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 UserIcon = _ref => {
   let {