trepur_components 0.2.9 → 0.2.12

package/dist/components/NavItem/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
+require("core-js/modules/es.object.assign.js");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -15,10 +17,13 @@ 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); }
+
 const NavItem = _ref => {
   let {
-    classNames,
-    linkClassNames,
+    id,
+    classes,
+    linkClasses,
     name,
     url,
     onClick,
@@ -32,8 +37,10 @@ const NavItem = _ref => {
     rounded,
     underlineOnHover
   } = _ref;
-  let linkClasses = linkClassNames ? linkClassNames : '';
-  const underline = underlineOnHover ? ' hover:underline' : ''; //---------- Styling ---------------
+  let classList = 'w-auto list-none ';
+  classList += classes ? classes : '';
+  let linkClassList = linkClasses && linkClasses;
+  const underline = underlineOnHover && ' hover:underline'; //---------- Styling ---------------
 
   const [styles, setStyles] = (0, _react.useState)({
     'backgroundColor': bgColor ? bgColor : 'white',
@@ -60,16 +67,18 @@ const NavItem = _ref => {
 
   let borderClass = bordered ? ' border ' : '';
   let round = rounded ? ' rounded-lg ' : '';
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: 'w-auto list-none ' + classNames
-  }, /*#__PURE__*/_react.default.createElement("a", {
+  return /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
+    id: id
+  }, {
+    className: classList
+  }), /*#__PURE__*/_react.default.createElement("a", {
     href: url
   }, /*#__PURE__*/_react.default.createElement("li", {
     style: styles,
     onMouseOver: () => setHoverState(true),
     onMouseOut: () => setHoverState(false),
     key: name,
-    className: "px-4 mx-2 mb-4 text-center " + linkClasses + borderClass + round + underline,
+    className: 'px-4 mx-2 mb-4 text-center ' + linkClassList + borderClass + round + underline,
     onClick: onClick
   }, name)));
 };

package/dist/components/NewsCard/index.js

@@ -23,6 +23,8 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 const NewsCard = _ref => {
   let {
+    id,
+    classes,
     title,
     content,
     image,
@@ -39,14 +41,19 @@ const NewsCard = _ref => {
     rounded,
     boldTitle
   } = _ref;
-  const roundedClasses = rounded ? 'rounded-lg' : '';
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: 'border flex p-2 ' + roundedClasses
-  }, /*#__PURE__*/_react.default.createElement(_Column.default, {
+  const roundedClasses = rounded && 'rounded-lg';
+  let classList = 'border flex p-2 ';
+  classList += classes ? classes : '';
+  classList += roundedClasses;
+  return /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
+    id: id
+  }, {
+    className: classList
+  }), /*#__PURE__*/_react.default.createElement(_Column.default, {
     sm: 4,
     md: 2
   }, /*#__PURE__*/_react.default.createElement(_Image.default, {
-    classNames: roundedClasses,
+    classes: roundedClasses,
     image: image
   })), /*#__PURE__*/_react.default.createElement(_Column.default, {
     sm: 1

package/dist/components/Profile/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
+require("core-js/modules/es.object.assign.js");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -15,14 +17,17 @@ 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); }
+
 const Profile = _ref => {
   let {
+    id,
+    classes,
     profileLinks,
     alignment,
     userImage,
     imageHeight,
     imageWidth,
-    classNames,
     rounded,
     bordered
   } = _ref;
@@ -33,18 +38,22 @@ const Profile = _ref => {
   const width = imageWidth && 'w-' + imageWidth;
   const round = rounded ? 'rounded-full' : '';
   const border = bordered ? 'border' : '';
-  const classes = 'object-cover ' + width + ' ' + height + ' ' + round + ' ' + border;
+  let classList = 'object-cover ';
+  classList += classes ? classes : '';
+  classList += ' ' + width + ' ' + height + ' ' + round + ' ' + border;
   const [profileState, setProfileState] = (0, _react.useState)(false);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: 'text-center ' + classNames
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
+    id: id
+  }, {
+    className: 'text-center ' + classList
+  }), /*#__PURE__*/_react.default.createElement("div", {
     className: "hidden sm:inline-flex  inset-y-0 " + profileAlignment
   }, /*#__PURE__*/_react.default.createElement("button", {
     onClick: () => setProfileState(!profileState),
     type: "button",
     className: "bg-gray-800 flex rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
   }, /*#__PURE__*/_react.default.createElement("img", {
-    className: classes,
+    className: classList,
     src: userImage,
     alt: ""
   })))), profileState && /*#__PURE__*/_react.default.createElement("div", {

package/dist/components/Row/index.js

@@ -17,17 +17,18 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 const Row = _ref => {
   let {
-    className,
-    children,
     id,
+    classes,
+    children,
     bordered
   } = _ref;
-  let classes = 'flex flex-wrap ' + className;
-  classes += bordered ? ' border' : '';
-  return /*#__PURE__*/_react.default.createElement("div", _extends({
-    className: classes
-  }, id && {
+  let classList = 'flex flex-wrap ';
+  classList += bordered ? ' border ' : '';
+  classList += classes ? classes : '';
+  return /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
     id: id
+  }, {
+    className: classList
   }), children);
 };
 

package/dist/components/Search/index.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+require("core-js/modules/es.object.assign.js");
+
 var _react = _interopRequireDefault(require("react"));
 
 var _Icon = _interopRequireDefault(require("../Icon"));
@@ -15,16 +17,20 @@ require("../index.css");
 
 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); }
+
 const Search = _ref => {
   let {
-    className,
+    id,
+    classes,
     onChange,
     placeholder,
     text,
     leftIcon,
     rightIcon
   } = _ref;
-  let classes = className ? className + ' flex' : 'flex';
+  let classList = 'flex ';
+  classList += classes ? classes : '';
   let iconLeft = leftIcon ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
     type: leftIcon
   }) : null;
@@ -33,10 +39,11 @@ const Search = _ref => {
     type: rightIcon
   }) : null;
   const onChangeFunc = onChange ? e => onChange(e.target.value) : null;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    id: "search",
-    className: classes
-  }, /*#__PURE__*/_react.default.createElement(_Column.default, {
+  return /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
+    id: id
+  }, {
+    className: classList
+  }), /*#__PURE__*/_react.default.createElement(_Column.default, {
     md: 2
   }, text && /*#__PURE__*/_react.default.createElement("h2", {
     className: "font-base-lg py-2 pr-4"

package/dist/components/StarRating/index.js

@@ -23,19 +23,22 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 const StarRating = _ref => {
   let {
+    id,
+    classes,
     stars = 5,
     size,
-    className,
     iconClasses
   } = _ref;
-  let classList = 'flex ' + className;
+  let classList = 'flex ';
+  classList += classes ? classes : classes;
+  let iconClassList = iconClasses ? iconClasses : '';
 
   const getStars = () => {
     const starsArr = [];
 
     for (var i = 0; i < stars; i++) {
       starsArr.push( /*#__PURE__*/_react.default.createElement(_Icon.default, _extends({
-        className: "".concat(iconClasses, " checked"),
+        className: "".concat(iconClassList, " checked"),
         type: "star"
       }, size && {
         size: size
@@ -50,7 +53,7 @@ const StarRating = _ref => {
 
     for (var i = 0; i < 5 - stars; i++) {
       starsArr.push( /*#__PURE__*/_react.default.createElement(_Icon.default, _extends({
-        className: "".concat(iconClasses, " unchecked"),
+        className: "".concat(iconClassList, " unchecked"),
         type: "star"
       }, size && {
         size: size
@@ -65,9 +68,11 @@ const StarRating = _ref => {
     return starArray;
   };
 
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
+    id: id
+  }, {
     className: classList
-  }, getAllStars());
+  }), getAllStars());
 };
 
 var _default = StarRating;

package/dist/components/Testimonial/index.js

@@ -5,16 +5,21 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+require("core-js/modules/es.object.assign.js");
+
 var _react = _interopRequireDefault(require("react"));
 
 require("../index.css");
 
 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); }
+
 const Testimonial = _ref => {
   let {
-    classNames,
-    imageClassNames,
+    id,
+    classes,
+    imageClasses,
     image,
     altText,
     text,
@@ -28,19 +33,21 @@ const Testimonial = _ref => {
     bgColor,
     textColor
   } = _ref;
-  const classes = classNames + ' text-center';
-  const imageClasses = imageClassNames + ' mx-auto rounded-full w-32 h-32'; //---------- Styling ---------------
+  const classList = classes + ' text-center';
+  const imageClassList = imageClasses + ' mx-auto rounded-full w-32 h-32'; //---------- Styling ---------------
 
   const styles = {
     'background-color': bgColor,
     'color': textColor
   }; //-----------------------------------
 
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
+    id: id
+  }, {
     style: styles,
-    className: classes
-  }, /*#__PURE__*/_react.default.createElement("img", {
-    className: imageClasses,
+    className: classList
+  }), /*#__PURE__*/_react.default.createElement("img", {
+    className: imageClassList,
     src: image,
     alt: altText
   }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", {

package/dist/components/TextAndTitle/index.js

@@ -5,26 +5,31 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+require("core-js/modules/es.object.assign.js");
+
 var _react = _interopRequireDefault(require("react"));
 
 require("../index.css");
 
 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); }
+
 const TextAndTitle = _ref => {
   let {
-    classNames,
+    id,
+    classes,
+    titleClasses,
+    textClasses,
     text,
     title,
     bgColor,
     textColor,
-    titleColor,
-    titleClass,
-    textClass
+    titleColor
   } = _ref;
-  const titleClasses = titleClass + ' text-2xl';
-  const textClasses = textClass + '';
-  const classes = classNames + ' text-center'; //---------- Styling ---------------
+  const titleClassList = titleClasses && titleClasses + ' text-2xl';
+  const textClassList = textClasses && textClasses;
+  const classList = classes + ' text-center'; //---------- Styling ---------------
 
   const textStyles = {
     'background-color': bgColor,
@@ -35,14 +40,16 @@ const TextAndTitle = _ref => {
     'color': titleColor
   }; //-----------------------------------
 
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: classes
-  }, /*#__PURE__*/_react.default.createElement("p", {
+  return /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
+    id: id
+  }, {
+    className: classList
+  }), /*#__PURE__*/_react.default.createElement("p", {
     style: titleStyles,
-    className: titleClasses
+    className: titleClassList
   }, title), /*#__PURE__*/_react.default.createElement("p", {
     style: textStyles,
-    className: textClasses
+    className: textClassList
   }, text));
 };
 

package/dist/components/Timeline/index.css

@@ -43,6 +43,50 @@
   z-index: -1;
 }
 
+/* V - collapse*/
+#circle.vertical.collapse:before {
+  position: absolute;
+  display: block;
+  border-left: 1px solid #31a3dd;
+  content: "";
+  height: 50%;
+  top: 0%;
+  left: 8.2%;
+  z-index: -1;
+}
+
+#circle.vertical.collapse:after {
+  position: absolute;
+  display: block;
+  border-left: 1px solid #31a3dd;
+  content: "";
+  height: 50%;
+  bottom: 0%;
+  left: 8.2%;
+  z-index: -1;
+}
+
+#first-circle.vertical.collapse:after {
+  position: absolute;
+  display: block;
+  border-left: 1px solid #31a3dd;
+  content: "";
+  height: 50%;
+  bottom: 0%;
+  left: 8.2%;
+  z-index: -1;
+}
+
+#last-circle.vertical.collapse:before {
+  position: absolute;
+  display: block;
+  border-left: 1px solid #31a3dd;
+  content: "";
+  height: 50%;
+  top: 0%;
+  left: 8.2%;
+  z-index: -1;
+}
 /* Horizontal */
 #circle.horizontal:before {
   position: absolute;

package/dist/components/Timeline/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
+require("core-js/modules/es.object.assign.js");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,8 +11,6 @@ require("core-js/modules/es.array.reverse.js");
 
 var _react = _interopRequireDefault(require("react"));
 
-var _CardWithTopImage = _interopRequireDefault(require("../CardWithTopImage"));
-
 var _Column = _interopRequireDefault(require("../Column"));
 
 var _Image = _interopRequireDefault(require("../Image"));
@@ -23,8 +23,13 @@ require("./index.css");
 
 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); }
+
 const Timeline = _ref => {
   let {
+    id,
+    classes,
+    imageClasses,
     isHorizontal,
     items,
     reverse,
@@ -32,27 +37,32 @@ const Timeline = _ref => {
     useImages,
     horizontalComponentClasses
   } = _ref;
-  const wrapperClasses = 'w-full list-none overflow-x-auto pb-4';
+  const isSm = window.innerWidth < 768;
+  let classList = 'w-full list-none overflow-x-auto pb-4 ';
+  classList += classes ? classes : '';
   let ulClasses = 'timeline status-flow relative list-none pl-0 flex ';
-  let liClasses = 'my-0 status-flow-item relative flex flex-auto flex-row leading-tight ';
+  let liClasses = 'status-flow-item relative flex flex-auto flex-row leading-tight ';
   liClasses += textCenter ? 'text-center ' : '';
   ulClasses += !reverse ? isHorizontal ? 'flex-row none-reverse justify-between' : 'flex-col none-reverse' : isHorizontal ? 'flex-row reverse justify-between' : 'flex-col reverse';
   liClasses += !reverse ? isHorizontal ? 'items-center flex-col justify-between' : 'flex-row none-reverse' : isHorizontal ? 'items-center flex-col-reverse' : ' flex-row-reverse';
   let padding;
   padding = !reverse ? isHorizontal ? 'pb-2' : 'pl-4' : isHorizontal ? 'pt-2' : 'pr-4';
-  let imageCircle = 'my-16 text-center mx-auto rounded-full border bg-black ';
+  let imageClassList = 'my-16 text-center mx-auto rounded-full border bg-black ';
+  imageClassList += imageClasses ? imageClasses : '';
   let circle = 'w-4 h-4 my-16 text-center mx-auto rounded-full border bg-black ';
-  circle += isHorizontal ? 'horizontal' : 'vertical';
-  return /*#__PURE__*/_react.default.createElement(_Column.default, {
-    sm: 12,
-    id: "timeline_container",
-    className: wrapperClasses
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  circle += isHorizontal ? isSm ? 'horizontal collapse' : 'horizontal' : isSm ? 'vertical collapse' : 'vertical';
+  return /*#__PURE__*/_react.default.createElement(_Column.default, _extends({
+    sm: 12
+  }, id && {
+    id: id
+  }, {
+    className: classList
+  }), /*#__PURE__*/_react.default.createElement("div", {
     className: ulClasses
   }, items && items.map((item, i) => {
     let before;
     if (i % 2 === 0) before = true;else before = false;
-    let a = isHorizontal ? '' : i === 0 ? '' : ' ';
+    let a = isHorizontal && isHorizontal ? '' : i === 0 ? '' : ' ';
     let circlePos;
 
     if (items.length - 1 > 0) {
@@ -62,48 +72,47 @@ const Timeline = _ref => {
     if (isHorizontal) {
       return /*#__PURE__*/_react.default.createElement(_Column.default, {
         id: "timeline-item",
-        className: liClasses + ' py-4 ' + a
+        classes: liClasses + ' py-4 mb-8 ' + a
       }, /*#__PURE__*/_react.default.createElement(_Row.default, {
-        className: horizontalComponentClasses
+        classes: horizontalComponentClasses
       }, before && item.component), /*#__PURE__*/_react.default.createElement(_Row.default, null, useImages ? /*#__PURE__*/_react.default.createElement("div", {
         id: circlePos,
         className: isHorizontal ? 'horizontal py-0 my-0' : 'vertical'
       }, /*#__PURE__*/_react.default.createElement(_Image.default, {
-        classNames: imageCircle,
-        image: item.logo,
-        width: 20,
-        height: 20
+        classes: imageClassList,
+        image: item.logo
       })) : /*#__PURE__*/_react.default.createElement("p", {
         id: circlePos,
         className: circle
       })), /*#__PURE__*/_react.default.createElement(_Row.default, {
-        className: horizontalComponentClasses
+        classes: horizontalComponentClasses
       }, !before && item.component));
     } else {
       return /*#__PURE__*/_react.default.createElement(_Row.default, {
         id: "timeline-item",
-        className: liClasses + ' py-4 ' + a
-      }, /*#__PURE__*/_react.default.createElement(_Column.default, {
-        sm: 5,
-        className: "text-center my-auto"
+        classes: liClasses + ' py-4 ' + a
+      }, !isSm && /*#__PURE__*/_react.default.createElement(_Column.default, {
+        sm: "5",
+        classes: "text-center my-auto"
       }, before && item.component), /*#__PURE__*/_react.default.createElement(_Column.default, {
         id: "circle-wrapper",
         sm: 2,
-        className: "my-auto"
+        classes: "my-auto"
       }, useImages ? /*#__PURE__*/_react.default.createElement("div", {
         id: circlePos,
-        className: isHorizontal ? 'horizontal' : 'vertical'
+        className: isSm ? 'vertical collapse' : 'vertical'
       }, /*#__PURE__*/_react.default.createElement(_Image.default, {
-        classNames: imageCircle,
-        image: item.logo,
-        width: 20,
-        height: 20
+        classes: imageClassList,
+        image: item.logo
       })) : /*#__PURE__*/_react.default.createElement("p", {
         id: circlePos,
         className: circle
-      })), /*#__PURE__*/_react.default.createElement(_Column.default, {
-        sm: 5,
-        className: "text-center my-auto"
+      })), isSm && /*#__PURE__*/_react.default.createElement(_Column.default, {
+        sm: "10",
+        classes: "text-center my-auto"
+      }, item.component), !isSm && /*#__PURE__*/_react.default.createElement(_Column.default, {
+        sm: "5",
+        classes: "text-center my-auto"
       }, !before && item.component));
     }
   })));

package/dist/components/Tubestops/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
+require("core-js/modules/es.object.assign.js");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -17,15 +19,20 @@ var _Column = _interopRequireDefault(require("../Column"));
 
 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); }
+
 const Tubestops = _ref => {
   let {
+    id,
+    classes,
     isHorizontal,
     items,
     reverse,
     textCenter,
     logo
   } = _ref;
-  const wrapperClasses = 'w-full list-none';
+  let classList = 'w-full list-none';
+  classList = classes ? classes : '';
   let ulClasses = 'tubestop status-flow relative list-none pl-0 flex ';
   let liClasses = 'mb-0 status-flow-item relative flex flex-auto flex-row leading-tight ';
   liClasses += textCenter ? 'text-center ' : '';
@@ -34,11 +41,12 @@ const Tubestops = _ref => {
   let padding;
   padding = !reverse ? isHorizontal ? 'pb-2' : 'pl-4' : isHorizontal ? 'pt-2' : 'pr-4';
   const circle = 'w-4 h-4 rounded-full bg-black z-10';
-  return /*#__PURE__*/_react.default.createElement(_Column.default, {
+  return /*#__PURE__*/_react.default.createElement(_Column.default, _extends({}, id && {
+    id: id
+  }, {
     md: 4,
-    id: "timeline_container",
-    className: wrapperClasses
-  }, /*#__PURE__*/_react.default.createElement("ul", {
+    className: classList
+  }), /*#__PURE__*/_react.default.createElement("ul", {
     className: ulClasses
   }, items && items.map((item, i) => {
     let a = isHorizontal ? i === 0 ? '' : '' : i === 0 ? '' : 'my-12';