trepur_components 0.2.30 → 0.2.33

package/dist/components/Button/index.js

@@ -1,7 +1,5 @@
 "use strict";
 
-require("core-js/modules/es.object.assign.js");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,14 +7,14 @@ exports.default = void 0;
 
 require("core-js/modules/web.dom-collections.iterator.js");
 
+require("core-js/modules/es.object.assign.js");
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _Icon = _interopRequireDefault(require("../Icon"));
 
 require("../index.css");
 
-require("./index.css");
-
 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); }
@@ -27,37 +25,39 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 const Button = _ref => {
   let {
-    id,
-    classes,
-    ctaText,
-    onClick,
+    buttonId,
+    buttonClasses,
+    buttonText,
+    buttonOnClick,
     buttonLeftIcon,
     buttonRightIcon,
     buttonCenterIcon,
+    iconHollow,
     buttonBgColor,
     buttonTextColor,
     buttonBorderColor,
-    hoverButtonBgColor,
-    hoverButtonTextColor,
-    hoverButtonBorderColor,
-    hoverCtaText,
-    type,
-    url,
+    buttonHoverBgColor,
+    buttonHoverTextColor,
+    buttonHoverBorderColor,
+    buttonHoverText,
     buttonType,
+    buttonUrl,
     buttonDesign,
-    border,
-    rounded,
-    iconBrand
+    buttonBordered,
+    buttonRounded,
+    buttonIconBrand,
+    buttonDisabled,
+    iconSize
   } = _ref;
-  let padding = buttonType === 'social' ? 'px-1 py-1 ' : 'px-8 ';
+  let padding = buttonType === 'social' ? 'px-1 py-1 ' : buttonType === 'icon' ? 'px-3 ' : 'px-8 ';
   let externalPadding = buttonType === 'external' ? 'py-3 ' : 'py-2 ';
-  let borderClassList = border ? 'border-2 ' : '';
-  let roundedClassList = rounded ? 'rounded-full ' : '';
+  let borderClassList = buttonBordered ? 'border-2 ' : '';
+  let roundedClassList = buttonRounded ? 'rounded-full ' : '';
   let standardClasses = ' rounded-lg text-black transition-background-color duration-500 transform ' + borderClassList + roundedClassList;
   let slideClasses = ' btn px-8 text-white border-2 bg-gray hover:bg-brand-primary hover:text-black ';
   let classList = padding;
   classList += externalPadding;
-  classList += classes ? classes : '';
+  classList += buttonClasses ? buttonClasses : '';
   const design = buttonDesign ? buttonDesign : 'standard';
 
   if (design === 'standard') {
@@ -66,29 +66,39 @@ const Button = _ref => {
     classList += slideClasses;
   }
 
-  const iconClassList = iconBrand ? 'fa-brands' : '';
+  const iconClassList = buttonIconBrand ? 'fa-brands' : '';
 
-  let iconLeft = buttonLeftIcon && /*#__PURE__*/_react.default.createElement(_Icon.default, {
+  let iconLeft = buttonLeftIcon && /*#__PURE__*/_react.default.createElement(_Icon.default, _extends({
     classes: "pr-2",
     type: buttonLeftIcon
-  });
+  }, iconHollow && {
+    hollow: iconHollow
+  }));
 
-  let iconRight = buttonRightIcon && /*#__PURE__*/_react.default.createElement(_Icon.default, {
+  let iconRight = buttonRightIcon && /*#__PURE__*/_react.default.createElement(_Icon.default, _extends({
     classes: "pl-2",
     type: buttonRightIcon
-  });
+  }, iconHollow && {
+    hollow: iconHollow
+  }));
 
-  let iconCenter = buttonCenterIcon && /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    size: "3",
+  let iconCenter = buttonCenterIcon && /*#__PURE__*/_react.default.createElement(_Icon.default, _extends({
+    size: iconSize,
     classes: iconClassList,
     type: buttonCenterIcon
-  }); //---------- Styling ---------------
+  }, iconHollow && {
+    hollow: iconHollow
+  })); //---------- Styling ---------------
 
 
-  const [styles, setStyles] = (0, _react.useState)({
+  const [styles, setStyles] = (0, _react.useState)(!buttonDisabled ? {
     'backgroundColor': buttonBgColor ? buttonBgColor : 'white',
     color: buttonTextColor ? buttonTextColor : 'black',
     'borderColor': buttonBorderColor ? buttonBorderColor : 'black'
+  } : {
+    'backgroundColor': 'white',
+    color: 'grey',
+    'borderColor': 'grey'
   });
   const [hovering, setHovering] = (0, _react.useState)(false);
 
@@ -96,9 +106,9 @@ const Button = _ref => {
     if (isHovering) {
       setHovering(true);
       setStyles({
-        'backgroundColor': hoverButtonBgColor ? hoverButtonBgColor : 'black',
-        color: hoverButtonTextColor ? hoverButtonTextColor : 'white',
-        'borderColor': hoverButtonBorderColor ? hoverButtonBorderColor : 'black'
+        'backgroundColor': buttonHoverBgColor ? buttonHoverBgColor : 'black',
+        color: buttonHoverTextColor ? buttonHoverTextColor : 'white',
+        'borderColor': buttonHoverBorderColor ? buttonHoverBorderColor : 'black'
       });
     } else {
       setHovering(false);
@@ -112,80 +122,101 @@ const Button = _ref => {
 
 
   if (buttonType === 'external') {
-    return /*#__PURE__*/_react.default.createElement("a", _extends({}, id && {
-      id: id
-    }, {
-      href: url,
+    return /*#__PURE__*/_react.default.createElement("a", {
       target: "_blank",
-      rel: "noreferrer"
-    }), /*#__PURE__*/_react.default.createElement("button", {
+      href: buttonUrl
+    }, /*#__PURE__*/_react.default.createElement("button", _extends({}, buttonId && {
+      id: buttonId
+    }, {
+      className: classList,
       style: styles,
-      type: type,
+      type: "button",
       onMouseOver: () => setHoverState(true),
-      onMouseOut: () => setHoverState(false),
-      className: classList
-    }, buttonLeftIcon && iconLeft, hovering ? hoverCtaText ? hoverCtaText : ctaText : ctaText, buttonRightIcon && iconRight));
+      onMouseOut: () => setHoverState(false)
+    }, buttonOnClick && {
+      onClick: buttonOnClick
+    }, buttonDisabled && {
+      disabled: buttonDisabled
+    }), buttonLeftIcon && iconLeft, hovering ? buttonHoverText ? buttonHoverText : buttonText : buttonText, buttonRightIcon && iconRight));
   } else if (buttonType === 'internal') {
-    return /*#__PURE__*/_react.default.createElement("a", _extends({}, id && {
-      id: id
+    return /*#__PURE__*/_react.default.createElement("a", {
+      href: buttonUrl
+    }, /*#__PURE__*/_react.default.createElement("button", _extends({}, buttonId && {
+      id: buttonId
     }, {
-      href: url,
-      rel: "noreferrer"
-    }), /*#__PURE__*/_react.default.createElement("button", {
+      className: classList,
       style: styles,
-      type: type,
+      type: "button",
       onMouseOver: () => setHoverState(true),
-      onMouseOut: () => setHoverState(false),
-      className: classList
-    }, buttonLeftIcon && iconLeft, hovering ? hoverCtaText ? hoverCtaText : ctaText : ctaText, buttonRightIcon && iconRight));
+      onMouseOut: () => setHoverState(false)
+    }, buttonOnClick && {
+      onClick: buttonOnClick
+    }, buttonDisabled && {
+      disabled: buttonDisabled
+    }), buttonLeftIcon && iconLeft, hovering ? buttonHoverText ? buttonHoverText : buttonText : buttonText, buttonRightIcon && iconRight));
   } else if (buttonType === 'social') {
-    return /*#__PURE__*/_react.default.createElement("a", _extends({}, id && {
-      id: id
+    return /*#__PURE__*/_react.default.createElement("button", _extends({}, buttonId && {
+      id: buttonId
     }, {
-      href: url,
-      target: "_blank",
-      rel: "noreferrer"
-    }), /*#__PURE__*/_react.default.createElement("button", {
+      className: classList,
       style: styles,
-      type: type,
+      type: "button",
       onMouseOver: () => setHoverState(true),
-      onMouseOut: () => setHoverState(false),
-      className: classList
-    }, buttonCenterIcon && iconCenter));
+      onMouseOut: () => setHoverState(false)
+    }, buttonOnClick && {
+      onClick: buttonOnClick
+    }, buttonDisabled && {
+      disabled: buttonDisabled
+    }), buttonCenterIcon && iconCenter);
+  } else if (buttonType === 'icon') {
+    return /*#__PURE__*/_react.default.createElement("button", _extends({}, buttonId && {
+      id: buttonId
+    }, {
+      className: classList,
+      style: styles,
+      type: "button",
+      onMouseOver: () => setHoverState(true),
+      onMouseOut: () => setHoverState(false)
+    }, buttonOnClick && {
+      onClick: buttonOnClick
+    }, buttonDisabled && {
+      disabled: buttonDisabled
+    }), buttonCenterIcon && iconCenter);
   } else if (buttonType === 'loading') {
-    return /*#__PURE__*/_react.default.createElement("a", _extends({}, id && {
-      id: id
+    return /*#__PURE__*/_react.default.createElement("button", _extends({}, buttonId && {
+      id: buttonId
     }, {
-      href: url,
-      target: "_blank",
-      rel: "noreferrer"
-    }), /*#__PURE__*/_react.default.createElement("button", {
+      className: 'flex ' + classList,
+      type: "button",
       style: styles,
-      type: type,
+      type: buttonType,
       onMouseOver: () => setHoverState(true),
-      onMouseOut: () => setHoverState(false),
-      className: 'flex ' + classList
-    }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      onMouseOut: () => setHoverState(false)
+    }, buttonOnClick && {
+      onClick: buttonOnClick
+    }, buttonDisabled && {
+      disabled: buttonDisabled
+    }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
       type: "spinner",
       animation: "pulse"
     })), /*#__PURE__*/_react.default.createElement("p", {
       className: "pl-3"
-    }, "Loading")));
+    }, "Loading"));
   }
 
-  return /*#__PURE__*/_react.default.createElement("button", _extends({}, id && {
-    id: id
+  return /*#__PURE__*/_react.default.createElement("button", _extends({}, buttonId && {
+    id: buttonId
   }, {
-    type: type,
+    className: classList,
     style: styles,
+    type: "button",
     onMouseOver: () => setHoverState(true),
     onMouseOut: () => setHoverState(false)
-  }, onClick && {
-    onClick: onClick
-  }, {
-    href: url,
-    className: classList
-  }), buttonLeftIcon && iconLeft, hovering ? hoverCtaText ? hoverCtaText : ctaText : ctaText, buttonRightIcon && iconRight);
+  }, buttonOnClick && {
+    onClick: buttonOnClick
+  }, buttonDisabled && {
+    disabled: buttonDisabled
+  }), buttonLeftIcon && iconLeft, hovering ? buttonHoverText ? buttonHoverText : buttonText : buttonText, buttonRightIcon && iconRight);
 };
 
 var _default = Button;

package/dist/components/Card/index.js

@@ -7,9 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-require("core-js/modules/es.symbol.description.js");
+require("core-js/modules/web.dom-collections.iterator.js");
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _index = _interopRequireDefault(require("../Button/index"));
 
@@ -19,32 +19,33 @@ var _Video = _interopRequireDefault(require("../Video"));
 
 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 _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 Card = _ref => {
   let {
-    id,
-    classes,
-    title,
-    image,
-    subTitle,
-    description,
-    extraText,
-    hasCta,
-    ctaText,
-    imageBelowTitle,
-    titleLeft,
-    titleRight,
-    titleBold,
-    imageClass,
-    subTitleClass,
-    extraTextClass,
-    descriptionClass,
-    altText,
-    buttonType,
-    rounded,
-    bordered,
-    url,
+    cardId,
+    cardClasses,
+    cardTitle,
+    cardImage,
+    cardSubTitle,
+    cardDescription,
+    cardExtraText,
+    cardHasCta,
+    cardImageBelowTitle,
+    cardTitleLeft,
+    cardTitleRight,
+    cardTitleBold,
+    cardImageClass,
+    cardSubTitleClass,
+    cardExtraTextClass,
+    cardDescriptionClass,
+    cardAltText,
+    cardRounded,
+    cardBordered,
     videoId,
     videoClasses,
     autoPlay,
@@ -57,40 +58,59 @@ const Card = _ref => {
     videoWidth,
     withControls,
     withPoster,
-    buttonDesign,
+    buttonId,
+    buttonClasses,
+    buttonText,
+    buttonOnClick,
+    buttonLeftIcon,
+    buttonRightIcon,
+    buttonCenterIcon,
     buttonBgColor,
     buttonTextColor,
     buttonBorderColor,
+    buttonHoverBgColor,
+    buttonHoverTextColor,
+    buttonHoverBorderColor,
+    buttonHoverText,
+    buttonType,
+    buttonUrl,
+    buttonDesign,
     buttonBordered,
-    hoverButtonBgColor,
-    hoverButtonTextColor,
-    hoverButtonBorderColor
+    buttonRounded,
+    buttonIconBrand,
+    buttonDisabled,
+    onHover = false
   } = _ref;
-  let orderClass = imageBelowTitle ? ' order-first ' : '';
+  const [showHoverButtons, setShowHoverButtons] = (0, _react.useState)(false);
+  let orderClass = cardImageBelowTitle ? ' order-first ' : '';
   let titleWrapperClass = 'p-3 ';
   titleWrapperClass += orderClass ? orderClass : '';
   let contentWrapperClass = 'px-3 ';
   let btnClass = 'w-full p-3 ';
-  let border = bordered ? 'border border-grey border-opacity-100 ' : '';
-  let titleFont = titleBold ? 'font-bold' : '';
-  let titlePosition = titleLeft ? 'text-left ' : titleRight ? 'text-right ' : 'text-center ';
-  let roundedImage = rounded ? 'rounded-t-2xl ' : '';
-  let roundedCard = rounded ? 'rounded-2xl ' : '';
-  let titleClasses = titlePosition;
-  titleClasses += titleFont ? titleFont : '';
+  let border = cardBordered ? 'border border-grey border-opacity-100 ' : '';
+  let cardTitleFont = cardTitleBold ? 'font-bold' : '';
+  let cardTitlePosition = cardTitleLeft ? 'text-left ' : cardTitleRight ? 'text-right ' : 'text-center ';
+  let roundedImage = cardRounded ? 'rounded-t-2xl ' : '';
+  let roundedCard = cardRounded ? 'rounded-2xl ' : '';
+  let cardTitleClasses = cardTitlePosition;
+  cardTitleClasses += cardTitleFont ? cardTitleFont : '';
   let classList = 'flex flex-col ';
   classList += border ? border : '';
   classList += roundedCard ? roundedCard : '';
-  classList += classes ? classes : '';
+  classList += cardClasses ? cardClasses : '';
   let imageClassList = 'w-full ';
-  imageClassList += !imageBelowTitle ? roundedImage : '';
-  imageClassList += imageClass;
+  imageClassList += !cardImageBelowTitle ? roundedImage : '';
+  imageClassList += cardImageClass;
   return /*#__PURE__*/_react.default.createElement("div", _extends({
-    key: id
-  }, id && {
-    id: id
+    key: cardId
+  }, cardId && {
+    id: cardId
   }, {
     className: classList
+  }, onHover && {
+    onMouseEnter: () => setShowHoverButtons(true)
+  }, onHover && {
+    onMouseLeave: () => setShowHoverButtons(false)
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "card-content flex flex-1 flex-col"
   }, mp4File || webmFile || ogvFile ? /*#__PURE__*/_react.default.createElement("div", {
@@ -113,40 +133,79 @@ const Card = _ref => {
     width: videoWidth,
     withControls: withControls,
     withPoster: withPoster
-  }))) : image && /*#__PURE__*/_react.default.createElement("div", {
+  }))) : cardImage && /*#__PURE__*/_react.default.createElement("div", {
     className: roundedImage
   }, /*#__PURE__*/_react.default.createElement("img", {
     className: imageClassList,
-    src: image,
-    alt: altText
-  })), title && /*#__PURE__*/_react.default.createElement("div", {
+    src: cardImage,
+    alt: cardAltText
+  })), !showHoverButtons ? /*#__PURE__*/_react.default.createElement("div", null, cardTitle && /*#__PURE__*/_react.default.createElement("div", {
     className: titleWrapperClass
   }, /*#__PURE__*/_react.default.createElement("h1", {
-    className: titleClasses
-  }, title)), /*#__PURE__*/_react.default.createElement("div", {
+    className: cardTitleClasses
+  }, cardTitle)), /*#__PURE__*/_react.default.createElement("div", {
     className: contentWrapperClass
-  }, subTitle && /*#__PURE__*/_react.default.createElement("h2", {
-    className: subTitleClass && subTitleClass
-  }, subTitle), description && /*#__PURE__*/_react.default.createElement("h6", {
-    className: descriptionClass && descriptionClass
-  }, description), extraText && /*#__PURE__*/_react.default.createElement("h2", {
-    className: extraTextClass && extraTextClass
-  }, extraText))), hasCta && /*#__PURE__*/_react.default.createElement("div", {
+  }, cardSubTitle && /*#__PURE__*/_react.default.createElement("h2", {
+    className: cardSubTitleClass && cardSubTitleClass
+  }, cardSubTitle), cardDescription && /*#__PURE__*/_react.default.createElement("h6", {
+    className: cardDescriptionClass && cardDescriptionClass
+  }, cardDescription), cardExtraText && /*#__PURE__*/_react.default.createElement("h2", {
+    className: cardExtraTextClass && cardExtraTextClass
+  }, cardExtraText))) : /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "flex pt-2"
+  }, /*#__PURE__*/_react.default.createElement(_index.default, {
+    buttonType: "icon",
+    buttonUrl: "/",
+    buttonCenterIcon: "heart",
+    buttonBgColor: "white",
+    buttonTextColor: "black",
+    buttonBorderColor: "black",
+    buttonHoverBgColor: "black",
+    buttonHoverTextColor: "white",
+    buttonHoverBorderColor: "black",
+    buttonBordered: true,
+    iconSize: 1,
+    iconHollow: true
+  }), /*#__PURE__*/_react.default.createElement(_index.default, {
+    buttonClasses: "ml-2 w-full",
+    buttonText: "Add to basket",
+    buttonBordered: true,
+    buttonRounded: false,
+    buttonDisabled: false,
+    buttonBgColor: "#2f4848",
+    buttonBorderColor: "#2f4848",
+    buttonTextColor: "white"
+  })))), cardHasCta && /*#__PURE__*/_react.default.createElement("div", {
     className: btnClass
   }, /*#__PURE__*/_react.default.createElement(_index.default, _extends({
-    classes: "w-full",
-    ctaText: ctaText,
+    buttonId: buttonId,
+    buttonClasses: buttonClasses + ' w-full',
+    buttonText: buttonText,
     buttonType: buttonType,
-    url: url,
-    border: buttonBordered,
-    bgColor: buttonBgColor,
-    textColor: buttonTextColor,
-    borderColor: buttonBorderColor,
-    hoverBgColor: hoverButtonBgColor,
-    hoverTextColor: hoverButtonTextColor,
-    hoverBorderColor: hoverButtonBorderColor
+    buttonUrl: buttonUrl,
+    buttonBordered: buttonBordered,
+    buttonBgColor: buttonBgColor,
+    buttonTextColor: buttonTextColor,
+    buttonBorderColor: buttonBorderColor,
+    buttonHoverBgColor: buttonHoverBgColor,
+    buttonHoverTextColor: buttonHoverTextColor,
+    buttonHoverBorderColor: buttonHoverBorderColor
   }, buttonDesign && {
     buttonDesign: buttonDesign
+  }, buttonDisabled && {
+    buttonDisabled
+  }, {
+    buttonOnClick: buttonOnClick,
+    buttonLeftIcon: buttonLeftIcon,
+    buttonRightIcon: buttonRightIcon,
+    buttonCenterIcon: buttonCenterIcon,
+    buttonHoverBgColor: buttonHoverBgColor,
+    buttonHoverTextColor: buttonHoverTextColor,
+    buttonHoverBorderColor: buttonHoverBorderColor,
+    buttonHoverText: buttonHoverText,
+    buttonUrl: buttonUrl,
+    buttonRounded: buttonRounded,
+    buttonIconBrand: buttonIconBrand
   }))));
 };
 

package/dist/components/Carousel/index.js

@@ -73,6 +73,7 @@ const Carousel = _ref => {
     previousArrowIcon,
     previousArrowIconSize,
     dotStyles,
+    dotWrapperStyles,
     sliderSettingsClasses,
     centerMode,
     centerPadding
@@ -83,7 +84,7 @@ const Carousel = _ref => {
   let nextArrowClassList = 'absolute z-10 -right-12 text-red top-2/4 ';
   nextArrowClassList += nextArrowClasses ? nextArrowClasses : '';
 
-  const SampleNextArrow = () => {
+  const NextArrow = () => {
     return /*#__PURE__*/_react.default.createElement("div", {
       id: "ArrowNext",
       className: nextArrowClassList,
@@ -99,7 +100,7 @@ const Carousel = _ref => {
     }));
   };
 
-  const SamplePrevArrow = () => {
+  const PrevArrow = () => {
     return /*#__PURE__*/_react.default.createElement("div", {
       id: "ArrowPrev",
       className: previousArrowClassList,
@@ -124,8 +125,8 @@ const Carousel = _ref => {
     slidesToScroll: slidesToScroll,
     autoplay: autoplay,
     autoplaySpeed: autoplaySpeed,
-    nextArrow: /*#__PURE__*/_react.default.createElement(SampleNextArrow, null),
-    prevArrow: /*#__PURE__*/_react.default.createElement(SamplePrevArrow, null),
+    nextArrow: /*#__PURE__*/_react.default.createElement(NextArrow, null),
+    prevArrow: /*#__PURE__*/_react.default.createElement(PrevArrow, null),
     className: sliderSettingsClasses,
     centerMode: centerMode,
     centerPadding: centerPadding,
@@ -166,8 +167,10 @@ const Carousel = _ref => {
       }
     }],
     appendDots: dots => /*#__PURE__*/_react.default.createElement("div", {
+      style: _objectSpread({}, dotWrapperStyles)
+    }, /*#__PURE__*/_react.default.createElement("ul", {
       style: _objectSpread({}, dotStyles)
-    }, /*#__PURE__*/_react.default.createElement("ul", null, dots))
+    }, dots))
   };
   return /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
     id: id

package/dist/components/Column/index.js

@@ -19,7 +19,6 @@ const Column = _ref => {
   let {
     id,
     classes,
-    xs,
     sm,
     md,
     lg,

package/dist/components/Icon/index.js

@@ -26,13 +26,15 @@ const Icon = _ref => {
     onClick,
     style,
     animation,
-    reverse
+    reverse,
+    hollow
   } = _ref;
   if (!type) return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
   let classList = "fa fa-".concat(type, " ");
   classList += size ? "fa-".concat(size, "x ") : '';
   classList += animation ? "fa-".concat(animation, " ") : '';
   classList += reverse ? ' fa-spin-reverse ' : '';
+  classList += hollow ? ' fa-regular ' : '';
   classList += classes ? classes : '';
   return /*#__PURE__*/_react.default.createElement("span", _extends({}, id && {
     id: id

package/dist/components/Nav/index.js

@@ -45,7 +45,11 @@ const Nav = _ref => {
     dropdownNavHeight,
     mobileLogo,
     mobileLogoBannerClasses,
-    mobileNavLogoLink
+    mobileNavLogoLink,
+    fixedTop,
+    mobileClasses,
+    borderBottom,
+    borderBottomColor
   } = _ref;
   //---------- Styling ---------------
   const [styles, setStyles] = (0, _react.useState)({
@@ -121,15 +125,23 @@ const Nav = _ref => {
 
   let logoImageClassList = "h-16 w-auto ";
   logoImageClassList += mobileLogoBannerClasses ? mobileLogoBannerClasses : '';
+  let mobileClassList = "flex items-center lg:hidden py-2";
+  mobileClassList += mobileClasses ? " ".concat(mobileClasses) : '';
+  mobileClassList += fixedTop ? ' fixed w-full z-50 top-0 mt-0' : '';
+  mobileClassList += borderBottom ? ' border-b' : '';
+  let desktopClassList = 'hidden lg:block items-center justify-between sm:items-stretch text-center';
+  desktopClassList += fixedTop ? ' fixed w-full z-50 top-0 mt-0' : '';
+  desktopClassList += borderBottom ? ' border-b border-rose-500' : '';
   return /*#__PURE__*/_react.default.createElement("nav", {
     id: id,
-    className: classes,
+    className: classes
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    id: "sm-nav",
+    className: mobileClassList,
     style: {
-      'background-color': bgColor
+      'background-color': bgColor,
+      'border-color': borderBottomColor
     }
-  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
-    id: "sm-nav",
-    className: "relative flex items-center lg:hidden py-2"
   }, /*#__PURE__*/_react.default.createElement("div", {
     id: "nav-collapse-btn-wrapper",
     className: "absolute inset-y-0 left-2 flex items-center"
@@ -169,7 +181,11 @@ const Nav = _ref => {
     src: mobileLogo,
     alt: " Logo "
   }))), /*#__PURE__*/_react.default.createElement("div", {
-    className: 'hidden lg:block items-center justify-between sm:items-stretch text-center '
+    className: desktopClassList,
+    style: {
+      'background-color': bgColor,
+      'border-color': borderBottomColor
+    }
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: 'flex ' + firstRowClasses
   }, firstRow && firstRow.map(rowItem => {
@@ -202,7 +218,7 @@ const Nav = _ref => {
       lg: rowItem.lgColumnWidth,
       xl: rowItem.xlColumnWidth
     }, rowItem.component);
-  })))), asSideBar ? /*#__PURE__*/_react.default.createElement("div", {
+  }))), asSideBar ? /*#__PURE__*/_react.default.createElement("div", {
     style: sideNavWidth,
     className: "z-50 shadow-inner shaddow-lg lg:hidden pt-20 fixed top-0 left-0 z-1 overflow-hidden h-full w-0 duration-700"
   }, /*#__PURE__*/_react.default.createElement(_Icon.default, {

package/package.json

@@ -2,7 +2,7 @@
   "name": "trepur_components",
   "description": "component lib",
   "author": "trepur_ttenneb",
-  "version": "0.2.30",
+  "version": "0.2.33",
   "private": false,
   "keywords": [
     "react",