trepur_components 0.2.9 → 0.2.12

package/dist/components/Accordion/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 _Collapsible = _interopRequireDefault(require("../Collapsible"));
@@ -13,15 +15,23 @@ 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 Accordion = _ref => {
   let {
+    id,
+    classes,
     items
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement("div", null, items && items.map(item => {
+  return /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
+    id: id
+  }, {
+    className: classes
+  }), items && items.map(item => {
     return /*#__PURE__*/_react.default.createElement(_Collapsible.default, {
+      id: item.id,
       title: item.title,
       subtitle: item.subtitle,
-      content: item.content,
       icon: item.icon,
       borderTop: item.showTopBorder,
       borderBottom: item.showBottomBorder,
@@ -38,7 +48,7 @@ const Accordion = _ref => {
       borderBottom: item.borderBottom,
       iconSize: item.iconSize,
       isDropdown: true
-    });
+    }, item.children);
   }));
 };
 

package/dist/components/AlertBar/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
+require("core-js/modules/es.object.assign.js");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -19,8 +21,12 @@ 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 AlertBar = _ref => {
   let {
+    id,
+    classes,
     type,
     text,
     leftIcon,
@@ -33,6 +39,9 @@ const AlertBar = _ref => {
   if (type === 'success') bgColor = 'bg-brand-success';
   if (type === 'warning') bgColor = 'bg-brand-warning';
   if (type === 'error') bgColor = 'bg-brand-error';
+  let classList = 'w-parent flex text-center h-8 ';
+  classList += bgColor ? bgColor : '';
+  classList += classes ? classes : '';
   let iconLeft = leftIcon ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
     type: leftIcon
   }) : null;
@@ -48,9 +57,11 @@ const AlertBar = _ref => {
   const [rightIconStyles, setRightIconStyles] = (0, _react.useState)({
     'color': rightIconColor
   });
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: 'w-parent flex text-center h-8 ' + bgColor
-  }, leftIcon && /*#__PURE__*/_react.default.createElement("span", {
+  return /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
+    id: id
+  }, {
+    className: classList
+  }), leftIcon && /*#__PURE__*/_react.default.createElement("span", {
     style: leftIconStyles,
     className: "pt-1 left-5 pl-8"
   }, iconLeft), /*#__PURE__*/_react.default.createElement("h3", {

package/dist/components/Breadcrumbs/index.js

@@ -13,13 +13,16 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const Breadcrumbs = _ref => {
   let {
-    className,
+    id,
+    classes,
     links
   } = _ref;
   const linksLength = Object.keys(links).length;
-  let classes = className + ' flex py-2 px-8 ';
+  let classList = 'flex py-2 px-8 ';
+  classList += classes ? classes : '';
   return /*#__PURE__*/_react.default.createElement("ul", {
-    className: classes
+    id: id,
+    className: classList
   }, links && links.map((link, i) => {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
       className: "flex"
@@ -32,11 +35,11 @@ const Breadcrumbs = _ref => {
     }, /*#__PURE__*/_react.default.createElement("a", {
       className: "text-social-facebook hover:underline",
       href: link.link
-    }, link.name)))), i + 1 < linksLength ? /*#__PURE__*/_react.default.createElement("li", {
+    }, link.name)))), i + 1 < linksLength && /*#__PURE__*/_react.default.createElement("li", {
       className: "h-8"
     }, /*#__PURE__*/_react.default.createElement("p", {
       className: "py-1"
-    }, "\xA0 > \xA0")) : null);
+    }, "\xA0 > \xA0")));
   }));
 };
 

package/dist/components/BreadcrumbsBordered/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 _BreadcrumbsItem = _interopRequireDefault(require("../BreadcrumbsItem"));
@@ -13,9 +15,12 @@ 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 Breadcrumbs = _ref => {
   let {
-    className,
+    id,
+    classes,
     links,
     textColor,
     bgColor,
@@ -25,11 +30,13 @@ const Breadcrumbs = _ref => {
     hoverBorderColor
   } = _ref;
   const linksLength = Object.keys(links).length;
-  let classProp = className ? className : '';
-  let classes = 'flex ' + classProp;
-  return /*#__PURE__*/_react.default.createElement("ul", {
-    className: classes
-  }, links && links.map((link, i) => {
+  let classList = 'flex ';
+  classList += classes ? classes : '';
+  return /*#__PURE__*/_react.default.createElement("ul", _extends({}, id && {
+    id: id
+  }, {
+    className: classList
+  }), links && links.map((link, i) => {
     let margin = i === 0 ? ' mr-3' : ' mx-3';
     let first = i === 0 ? true : false;
     let bType = 'standard';
@@ -39,7 +46,7 @@ const Breadcrumbs = _ref => {
     }
 
     return /*#__PURE__*/_react.default.createElement(_BreadcrumbsItem.default, {
-      classNames: margin,
+      classes: margin,
       name: link.name,
       link: link.link,
       type: bType,

package/dist/components/BreadcrumbsItem/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
+require("core-js/modules/es.object.assign.js");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -17,9 +19,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 BreadcrumbsItem = _ref => {
   let {
-    classNames,
+    id,
+    classes,
+    divClasses,
     name,
     link,
     type,
@@ -31,10 +37,14 @@ const BreadcrumbsItem = _ref => {
     hoverBgColor,
     hoverBorderColor
   } = _ref;
-  //---------- Styling ---------------
+  let classList = 'item ';
+  classList += classes ? classes : '';
+  let divClassList = 'bc-item px-4 h-8 ';
+  divClassList += divClasses; //---------- Styling ---------------
+
   const [styles, setStyles] = (0, _react.useState)({
     'background-color': bgColor ? bgColor : 'gray',
-    color: textColor ? textColor : 'black',
+    'color': textColor ? textColor : 'black',
     'borderColor': borderColor ? borderColor : 'white'
   });
   const [hoverStyles, setHoverStyles] = (0, _react.useState)({
@@ -51,7 +61,7 @@ const BreadcrumbsItem = _ref => {
     if (isHovering) {
       setStyles({
         'background-color': hoverBgColor ? hoverBgColor : 'black',
-        color: hoverTextColor ? hoverTextColor : 'white',
+        'color': hoverTextColor ? hoverTextColor : 'white',
         'borderColor': hoverBorderColor ? hoverBorderColor : 'white'
       });
       setHoverStyles({
@@ -66,7 +76,7 @@ const BreadcrumbsItem = _ref => {
     } else {
       setStyles({
         'background-color': bgColor ? bgColor : 'grey',
-        color: textColor ? textColor : 'black',
+        'color': textColor ? textColor : 'black',
         'border-color': borderColor ? borderColor : 'white'
       });
       setHoverStyles({
@@ -82,10 +92,12 @@ const BreadcrumbsItem = _ref => {
   }; //-----------------------------------
 
 
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
+    id: id
+  }, {
     key: name,
-    className: "item"
-  }, type === 'link' ? firstItem ? /*#__PURE__*/_react.default.createElement("a", {
+    className: classList
+  }), type === 'link' ? firstItem ? /*#__PURE__*/_react.default.createElement("a", {
     onMouseOver: () => setHoverState(true),
     onMouseOut: () => setHoverState(false),
     style: styles,
@@ -95,7 +107,7 @@ const BreadcrumbsItem = _ref => {
     className: "list-none"
   }, /*#__PURE__*/_react.default.createElement("div", {
     style: styles,
-    className: 'bc-item px-4 h-8 ' + classNames
+    className: divClassList
   }, /*#__PURE__*/_react.default.createElement("p", {
     className: !firstItem ? 'text-center  pt-1' : 'text-center pt-1'
   }, name, /*#__PURE__*/_react.default.createElement("span", {
@@ -111,7 +123,7 @@ const BreadcrumbsItem = _ref => {
     className: "list-none"
   }, /*#__PURE__*/_react.default.createElement("div", {
     style: styles,
-    className: 'bc-item px-4 h-8 ' + classNames
+    className: divClassList
   }, /*#__PURE__*/_react.default.createElement("p", {
     className: !firstItem ? 'text-center  pt-1' : 'text-center pt-1'
   }, /*#__PURE__*/_react.default.createElement("span", {
@@ -129,7 +141,7 @@ const BreadcrumbsItem = _ref => {
     style: styles,
     onMouseOver: () => setHoverState(true),
     onMouseOut: () => setHoverState(false),
-    className: 'bc-item px-4 h-8 ' + classNames
+    className: divClassList
   }, /*#__PURE__*/_react.default.createElement("p", {
     className: "text-center pt-1"
   }, name, /*#__PURE__*/_react.default.createElement("span", {
@@ -141,7 +153,7 @@ const BreadcrumbsItem = _ref => {
     style: styles,
     onMouseOver: () => setHoverState(true),
     onMouseOut: () => setHoverState(false),
-    className: 'bc-item px-4 h-8 ' + classNames
+    className: divClassList
   }, /*#__PURE__*/_react.default.createElement("p", {
     className: "text-center pt-1"
   }, /*#__PURE__*/_react.default.createElement("span", {

package/dist/components/Button/index.js

@@ -27,8 +27,9 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 const Button = _ref => {
   let {
+    id,
+    classes,
     ctaText,
-    className,
     onClick,
     buttonLeftIcon,
     buttonRightIcon,
@@ -44,18 +45,19 @@ const Button = _ref => {
     buttonType,
     buttonDesign
   } = _ref;
-  let classNames = className ? className : '';
-  let padding = buttonType === 'social' ? ' px-4 py-3 ' : ' px-8 ';
-  let externalPadding = buttonType === 'external' ? ' py-3 ' : ' py-2 ';
-  let standardClasses = 'rounded-lg text-black border-2 border-black border-gray-300 transition-background-color duration-500 transform ' + padding + externalPadding + classNames;
-  let slideClasses = 'btn px-8 text-white border-2 bg-gray hover:bg-brand-primary hover:text-black ' + padding + externalPadding + classNames;
-  let classes;
+  let padding = buttonType === 'social' ? 'px-4 py-3 ' : 'px-8 ';
+  let externalPadding = buttonType === 'external' ? 'py-3 ' : 'py-2 ';
+  let standardClasses = ' rounded-lg text-black border-2 border-black border-gray-300 transition-background-color duration-500 transform ';
+  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 : '';
   const design = buttonDesign ? buttonDesign : 'standard';
 
   if (design === 'standard') {
-    classes = standardClasses;
+    classList += standardClasses;
   } else if (design === 'slide') {
-    classes = slideClasses;
+    classList += slideClasses;
   }
 
   let iconLeft = buttonLeftIcon && /*#__PURE__*/_react.default.createElement(_Icon.default, {
@@ -100,40 +102,48 @@ const Button = _ref => {
 
 
   if (buttonType === 'external') {
-    return /*#__PURE__*/_react.default.createElement("a", {
+    return /*#__PURE__*/_react.default.createElement("a", _extends({}, id && {
+      id: id
+    }, {
       href: url,
       target: "_blank",
       rel: "noreferrer"
-    }, /*#__PURE__*/_react.default.createElement("button", {
+    }), /*#__PURE__*/_react.default.createElement("button", {
       style: styles,
       onMouseOver: () => setHoverState(true),
       onMouseOut: () => setHoverState(false),
-      className: classes
+      className: classList
     }, buttonLeftIcon && iconLeft, hovering ? hoverCtaText ? hoverCtaText : ctaText : ctaText, buttonRightIcon && iconRight));
   } else if (buttonType === 'internal') {
-    return /*#__PURE__*/_react.default.createElement("a", {
+    return /*#__PURE__*/_react.default.createElement("a", _extends({}, id && {
+      id: id
+    }, {
       href: url,
       rel: "noreferrer"
-    }, /*#__PURE__*/_react.default.createElement("button", {
+    }), /*#__PURE__*/_react.default.createElement("button", {
       style: styles,
       onMouseOver: () => setHoverState(true),
       onMouseOut: () => setHoverState(false),
-      className: classes
+      className: classList
     }, buttonLeftIcon && iconLeft, hovering ? hoverCtaText ? hoverCtaText : ctaText : ctaText, buttonRightIcon && iconRight));
   } else if (buttonType === 'social') {
-    return /*#__PURE__*/_react.default.createElement("a", {
+    return /*#__PURE__*/_react.default.createElement("a", _extends({}, id && {
+      id: id
+    }, {
       href: url,
       target: "_blank",
       rel: "noreferrer"
-    }, /*#__PURE__*/_react.default.createElement("button", {
+    }), /*#__PURE__*/_react.default.createElement("button", {
       style: styles,
       onMouseOver: () => setHoverState(true),
       onMouseOut: () => setHoverState(false),
-      className: classes
+      className: classList
     }, buttonCenterIcon && iconCenter));
   }
 
-  return /*#__PURE__*/_react.default.createElement("button", _extends({
+  return /*#__PURE__*/_react.default.createElement("button", _extends({}, id && {
+    id: id
+  }, {
     style: styles,
     onMouseOver: () => setHoverState(true),
     onMouseOut: () => setHoverState(false)
@@ -141,7 +151,7 @@ const Button = _ref => {
     onClick: onClick
   }, {
     href: url,
-    className: classes
+    className: classList
   }), buttonLeftIcon && iconLeft, hovering ? hoverCtaText ? hoverCtaText : ctaText : ctaText, buttonRightIcon && iconRight);
 };
 

package/dist/components/Card/index.js

@@ -24,6 +24,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 const Card = _ref => {
   let {
     id,
+    classes,
     title,
     image,
     subTitle,
@@ -39,14 +40,13 @@ const Card = _ref => {
     subTitleClass,
     extraTextClass,
     descriptionClass,
-    classNames,
     altText,
     buttonType,
     rounded,
     bordered,
     url,
     videoId,
-    videoClassNames,
+    videoClasses,
     autoPlay,
     muted,
     poster,
@@ -66,33 +66,37 @@ const Card = _ref => {
     hoverButtonBorderColor
   } = _ref;
   let orderClass = imageBelowTitle ? ' order-first ' : '';
-  let titleWrapperClass = ' p-3 ' + orderClass;
-  let contentWrapperClass = ' px-3 ';
-  let btnClass = ' w-full p-3 ';
+  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 classList = 'flex flex-col ';
-  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 + titleFont;
-  let classes = classNames ? classNames : '';
-  let imageClassList = ' w-full ';
-  imageClassList += imageBelowTitle && imageBelowTitle ? '' : roundedImage;
-  classList += border + classes;
-  classList += roundedCard;
+  classList += border ? border : '';
+  classList += roundedCard ? roundedCard : '';
+  classList += classes ? classes : '';
+  let imageClassList = 'w-full ';
+  imageClassList += !imageBelowTitle ? roundedImage : '';
   imageClassList += imageClass;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    key: id,
-    id: id,
+  return /*#__PURE__*/_react.default.createElement("div", _extends({
+    key: id
+  }, id && {
+    id: id
+  }, {
     className: classList
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }), /*#__PURE__*/_react.default.createElement("div", {
     className: "card-content flex flex-1 flex-col"
   }, mp4File || webmFile || ogvFile ? /*#__PURE__*/_react.default.createElement("div", {
-    className: roundedImage
+    className: roundedImage && roundedImage
   }, /*#__PURE__*/_react.default.createElement(_Video.default, _extends({
     id: videoId,
-    classNames: videoClassNames,
+    classes: videoClasses,
     autoPlay: autoPlay,
     muted: muted
   }, poster && {
@@ -129,7 +133,7 @@ const Card = _ref => {
   }, extraText))), hasCta && /*#__PURE__*/_react.default.createElement("div", {
     className: btnClass
   }, /*#__PURE__*/_react.default.createElement(_index.default, _extends({
-    className: "w-full",
+    classes: "w-full",
     ctaText: ctaText,
     buttonType: buttonType,
     url: url,

package/dist/components/CardWithTopImage/index.css

@@ -1,3 +1,3 @@
-#wrapper {
+.w-full.px-4 {
   filter: drop-shadow(0 4px 8px rgb(154, 154, 154));
 }

package/dist/components/CardWithTopImage/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 _index = _interopRequireDefault(require("../Image/index"));
@@ -15,12 +17,15 @@ 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 CardWithTopImage = _ref => {
   let {
     id,
+    classes,
+    imageWrapperClasses,
     image,
     imageClass,
-    classNames,
     altText,
     roundedCard,
     roundedImage,
@@ -30,25 +35,26 @@ const CardWithTopImage = _ref => {
     hoverBgColor,
     children
   } = _ref;
-  let classes = 'w-full px-4 ';
-  classes += classNames ? classNames : '';
-  let cardBordered = bordered ? ' border border-grey border-opacity-100 ' : '';
-  let cardRounded = roundedCard ? ' rounded-2xl ' : '';
-  let imageRounded = roundedImage ? ' rounded-full ' : '';
-  let cardShadow = shadow ? '  ' : '';
-  let imageWrapperClasses = '';
-  const imageClasses = 'flex mx-auto w-24 bg-white p-4 ' + imageRounded;
-  const contentClasses = 'pt-12 px-4 h-96 -mt-12 bg-white ' + cardShadow + cardRounded + cardBordered;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    id: 'wrapper',
-    className: classes
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  let classList = 'w-full px-4 ';
+  classList += classes ? classes : '';
+  let imageWrapperClassList = imageWrapperClasses && imageWrapperClasses;
+  let imageClasses = 'flex mx-auto w-24 bg-white p-4 ';
+  imageClasses += roundedImage ? 'rounded-full ' : '';
+  let contentClasses = 'pt-12 px-4 h-auto pb-16 -mt-12 bg-white ';
+  contentClasses += shadow ? ' ' : '';
+  contentClasses += roundedCard ? 'rounded-2xl ' : '';
+  contentClasses += bordered ? 'border border-grey border-opacity-100 ' : '';
+  return /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
+    id: id
+  }, {
+    className: classList
+  }), /*#__PURE__*/_react.default.createElement("div", {
     id: "image",
-    classNames: imageWrapperClasses
+    className: imageWrapperClassList
   }, /*#__PURE__*/_react.default.createElement(_index.default, {
     altText: altText,
     image: image,
-    classNames: imageClasses
+    classes: imageClasses
   })), /*#__PURE__*/_react.default.createElement("div", {
     id: "content",
     className: contentClasses

package/dist/components/Carousel/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 _reactSlick = _interopRequireDefault(require("react-slick"));
@@ -19,9 +21,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); }
+
 //https://react-slick.neostack.com/docs/api/
 const Carousel = _ref => {
   let {
+    id,
+    classes,
     slides,
     dots,
     infinite,
@@ -42,9 +48,11 @@ const Carousel = _ref => {
     autoplay: autoplay,
     autoplaySpeed: autoplaySpeed
   };
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "mx-8"
-  }, /*#__PURE__*/_react.default.createElement(_reactSlick.default, settings, slides && slides.map(slide => {
+  return /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
+    id: id
+  }, {
+    className: classes
+  }), /*#__PURE__*/_react.default.createElement(_reactSlick.default, settings, slides && slides.map(slide => {
     return slide;
   })));
 };

package/dist/components/ChevronCard/index.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 ChevronCard = _ref => {
+  let {
+    id,
+    classes
+  } = _ref;
+  let classList = 'flex border-l border-t border-b h-20 w-32 z-10 bg-white ';
+  classList += classes ? classes : '';
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
+    id: id
+  }, {
+    className: 'flex'
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: 'border-l border-t border-b h-20 w-32 z-10 bg-white'
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    id: "chevronLeft",
+    className: 'border h-14 w-14 -ml-7 mt-3 rotate-45'
+  })), /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
+    id: id
+  }, {
+    className: "flex-col my-8"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: 'border-l border-t border-r h-32 w-20 z-20 bg-white'
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    id: "chevronLeft",
+    className: 'border h-14 w-14 -mt-7 ml-3 rotate-45 z-0'
+  })), /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
+    id: id
+  }, {
+    className: "flex-col my-16"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: 'border h-14 w-14 -mb-7 ml-3 rotate-45 z-0'
+  }), /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
+    id: id
+  }, {
+    className: 'border-l border-b border-r h-32 w-20 z-20 bg-white'
+  }))), /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
+    id: id
+  }, {
+    className: "flex"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: 'border h-14 w-14 -mr-7 mt-3 rotate-45'
+  }), /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
+    id: id
+  }, {
+    className: 'border-r border-t border-b h-20 w-32 z-10 bg-white'
+  }))));
+};
+
+var _default = ChevronCard;
+exports.default = _default;