trepur_components 0.2.35 → 0.2.38

package/dist/components/Accordion/index.js

@@ -27,9 +27,8 @@ const Accordion = _ref => {
     id: id
   }, {
     className: classes
-  }), items && items.map((item, i) => {
+  }), items && items.map(item => {
     return /*#__PURE__*/_react.default.createElement(_Collapsible.default, {
-      key: item.id + '_' + i,
       id: item.id,
       title: item.title,
       subtitle: item.subtitle,

package/dist/components/AlertBar/index.js

@@ -1,15 +1,13 @@
 "use strict";
 
-require("core-js/modules/es.object.assign.js");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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 _react = _interopRequireDefault(require("react"));
 
 var _Icon = _interopRequireDefault(require("../Icon"));
 
@@ -17,10 +15,6 @@ 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); }
-
-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 => {
@@ -63,15 +57,15 @@ const AlertBar = _ref => {
     type: rightIcon,
     onClick: () => closeAlertBar()
   }) : null;
-  const [styles, setStyles] = (0, _react.useState)({
+  const styles = {
     'color': textColor
-  });
-  const [leftIconStyles, setLeftIconStyles] = (0, _react.useState)({
+  };
+  const leftIconStyles = {
     'color': leftIconColor
-  });
-  const [rightIconStyles, setRightIconStyles] = (0, _react.useState)({
+  };
+  const rightIconStyles = {
     'color': rightIconColor
-  });
+  };
   return /*#__PURE__*/_react.default.createElement("div", _extends({}, id ? {
     id: id
   } : {

package/dist/components/Breadcrumbs/index.js

@@ -25,8 +25,7 @@ const Breadcrumbs = _ref => {
     className: classList
   }, links && links.map((link, i) => {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-      className: "flex",
-      key: i
+      className: "flex"
     }, /*#__PURE__*/_react.default.createElement("li", {
       className: "h-8"
     }, i + 1 >= linksLength ? /*#__PURE__*/_react.default.createElement("p", {

package/dist/components/BreadcrumbsBordered/index.js

@@ -46,7 +46,6 @@ const Breadcrumbs = _ref => {
     }
 
     return /*#__PURE__*/_react.default.createElement(_BreadcrumbsItem.default, {
-      key: i,
       classes: margin,
       name: link.name,
       link: link.link,

package/dist/components/BreadcrumbsItem/index.js

@@ -77,7 +77,7 @@ const BreadcrumbsItem = _ref => {
       setStyles({
         'backgroundColor': bgColor ? bgColor : 'grey',
         'color': textColor ? textColor : 'black',
-        'border-color': borderColor ? borderColor : 'white'
+        'borderColor': borderColor ? borderColor : 'white'
       });
       setHoverStyles({
         'backgroundColor': 'transparent',

package/dist/components/Button/index.js

@@ -15,6 +15,8 @@ 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); }

package/dist/components/Card/index.js

@@ -1,13 +1,13 @@
 "use strict";
 
-require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/es.object.assign.js");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
-require("core-js/modules/es.object.assign.js");
+require("core-js/modules/web.dom-collections.iterator.js");
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -17,6 +17,8 @@ require("../index.css");
 
 var _Video = _interopRequireDefault(require("../Video"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -81,41 +83,68 @@ const Card = _ref => {
     buttonDisabled,
     onHover
   } = _ref;
-  // const [showHoverButtons, setShowHoverButtons] = useState(false)
+  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 = 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 += cardClasses ? cardClasses : '';
-  let imageClassList = 'w-full ';
-  imageClassList += !cardImageBelowTitle ? roundedImage : '';
-  imageClassList += cardImageClass;
+  let contentWrapperClass = 'px-3 order-3';
+  const titleWrapperClass = (0, _classnames.default)({
+    [orderClass]: orderClass
+  }, 'pt-3');
+  const cardTitleClasses = (0, _classnames.default)({
+    [cardTitleFont]: cardTitleFont
+  }, cardTitlePosition, 'font-medium text-md text-grey');
+  const cardSubTitleClassList = (0, _classnames.default)({
+    [cardSubTitleClass]: cardSubTitleClass
+  }, 'font-light text-sm text-grey');
+  const cardDescriptionClassList = (0, _classnames.default)({
+    [cardDescriptionClass]: cardDescriptionClass
+  }, 'font-extraLight text-xs text-light-grey');
+  const classList = (0, _classnames.default)({
+    [border]: border,
+    [roundedCard]: roundedCard,
+    [cardClasses]: cardClasses
+  }, 'flex flex-col ');
+  const imageClassList = (0, _classnames.default)({
+    [roundedImage]: !cardImageBelowTitle,
+    [cardImageClass]: cardImageClass
+  }, ' w-full object-cover h-full ');
+  const videoClassList = (0, _classnames.default)({
+    [roundedImage]: !cardImageBelowTitle,
+    [videoClasses]: videoClasses
+  }, ' w-full object-cover h-full ');
+  const cardExtraTextClassList = (0, _classnames.default)({
+    [cardExtraTextClass]: cardExtraTextClass,
+    ['pb-4']: !cardHasCta
+  }, 'w-full object-cover h-full font-extraLight text-xs text-light-grey');
+  const imageWrapperClassList = (0, _classnames.default)({
+    [' order-2']: cardImageBelowTitle,
+    ["".concat(roundedImage, " order-1")]: !cardImageBelowTitle
+  }, ' h-64 overflow-hidden object-cover ');
+
+  const toggleHover = isHovering => {
+    onHover && isHovering ? setShowHoverButtons(true) : setShowHoverButtons(false);
+  };
+
   return /*#__PURE__*/_react.default.createElement("div", _extends({
     key: cardId
   }, cardId && {
     id: cardId
   }, {
-    className: classList // {...(onHover && {onMouseEnter: () => setShowHoverButtons(true)})}
-    // {...(onHover && {onMouseLeave: () => setShowHoverButtons(false)})}
-
+    className: classList,
+    onMouseEnter: () => toggleHover(true),
+    onMouseLeave: () => toggleHover(false)
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "card-content flex flex-1 flex-col"
   }, mp4File || webmFile || ogvFile ? /*#__PURE__*/_react.default.createElement("div", {
-    className: roundedImage && roundedImage
+    className: imageWrapperClassList
   }, /*#__PURE__*/_react.default.createElement(_Video.default, _extends({
     id: videoId,
-    classes: videoClasses,
+    classes: videoClassList,
     autoPlay: autoPlay,
     muted: muted
   }, poster && {
@@ -132,24 +161,51 @@ const Card = _ref => {
     withControls: withControls,
     withPoster: withPoster
   }))) : cardImage && /*#__PURE__*/_react.default.createElement("div", {
-    className: roundedImage
+    className: imageWrapperClassList
   }, /*#__PURE__*/_react.default.createElement("img", {
     className: imageClassList,
     src: cardImage,
     alt: cardAltText
-  })), /*#__PURE__*/_react.default.createElement("div", null, cardTitle && /*#__PURE__*/_react.default.createElement("div", {
+  })), !showHoverButtons ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: cardImageBelowTitle ? 'order-1' : 'order-3'
+  }, cardTitle && /*#__PURE__*/_react.default.createElement("div", {
     className: titleWrapperClass
   }, /*#__PURE__*/_react.default.createElement("h1", {
     className: cardTitleClasses
-  }, cardTitle)), /*#__PURE__*/_react.default.createElement("div", {
+  }, cardTitle))), /*#__PURE__*/_react.default.createElement("div", {
     className: contentWrapperClass
   }, 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)))), cardHasCta && /*#__PURE__*/_react.default.createElement("div", {
+    className: cardSubTitleClassList
+  }, cardSubTitle), cardDescription && /*#__PURE__*/_react.default.createElement("p", {
+    className: cardDescriptionClassList
+  }, cardDescription), cardExtraText && /*#__PURE__*/_react.default.createElement("p", {
+    className: cardExtraTextClassList
+  }, cardExtraText))) : /*#__PURE__*/_react.default.createElement("div", {
+    className: "flex p-2 order-last h-24"
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    buttonType: "icon",
+    buttonUrl: "/",
+    buttonCenterIcon: "heart",
+    buttonBgColor: "white",
+    buttonTextColor: "black",
+    buttonBorderColor: "black",
+    buttonHoverBgColor: "black",
+    buttonHoverTextColor: "white",
+    buttonHoverBorderColor: "black",
+    buttonBordered: true,
+    buttonClasses: "mt-8",
+    iconSize: 1,
+    iconHollow: true
+  }), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    buttonClasses: "ml-2 w-full mt-8",
+    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(_Button.default, _extends({
     buttonId: buttonId,

package/dist/components/Carousel/index.js

@@ -79,9 +79,9 @@ const Carousel = _ref => {
     centerPadding
   } = _ref;
   const slider = (0, _react.useRef)(null);
-  let previousArrowClassList = 'absolute z-10 -left-12 text-red top-2/4 ';
+  let previousArrowClassList = 'absolute z-10 -left-12 top-2/4 ';
   previousArrowClassList += previousArrowClasses ? previousArrowClasses : '';
-  let nextArrowClassList = 'absolute z-10 -right-12 text-red top-2/4 ';
+  let nextArrowClassList = 'absolute z-10 -right-12 top-2/4 ';
   nextArrowClassList += nextArrowClasses ? nextArrowClasses : '';
 
   const NextArrow = () => {

package/dist/components/Form/index.js

@@ -49,7 +49,6 @@ const Form = _ref => {
   }), components && components.map(component => {
     if (component.type === 'Input') {
       return /*#__PURE__*/_react.default.createElement(_Input.default, {
-        key: i,
         classes: component.classes,
         label: component.label,
         placeholder: component.placeholder,
@@ -58,7 +57,6 @@ const Form = _ref => {
       });
     } else if (component.type === 'Button') {
       return /*#__PURE__*/_react.default.createElement(_Button.default, {
-        key: i,
         type: component.htmlType,
         onClick: onClick,
         classes: component.classes,

package/dist/components/FyreCard/index.js

@@ -57,15 +57,15 @@ const FyreCard = _ref => {
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "flex justify-end"
   }, /*#__PURE__*/_react.default.createElement(_Button.default, _extends({
-    ctaText: ctaText,
+    buttonText: ctaText,
     buttonType: buttonType,
-    url: url,
-    bgColor: buttonBgColor,
-    textColor: buttonTextColor,
+    buttonUrl: url,
+    buttonBgColor: buttonBgColor,
+    buttonTextColor: buttonTextColor,
     borderColor: buttonBorderColor,
-    hoverBgColor: hoverButtonBgColor,
-    hoverTextColor: hoverButtonTextColor,
-    hoverBorderColor: hoverButtonBorderColor
+    buttonHoverBgColor: hoverButtonBgColor,
+    buttonHoverTextColor: hoverButtonTextColor,
+    buttonHoverBorderColor: hoverButtonBorderColor
   }, buttonDesign && {
     buttonDesign: buttonDesign
   })))));

package/dist/components/InformationIcon/index.css

@@ -0,0 +1,5 @@
+#wrapper:hover div {
+    margin: 5px;
+    margin-bottom: 5px;
+    font-size: 24px
+}

package/dist/components/InformationIcon/index.js

@@ -15,6 +15,8 @@ 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); }
@@ -43,7 +45,7 @@ const InformationIcon = _ref => {
   let loaded = (0, _react.useRef)(false);
   let imageClassList = 'mx-auto pt-2 ';
   imageClassList += imageClasses ? imageClasses : '';
-  let classList = 'hover:scale-110 transform transition duration-500 flex flex-col w-64 ';
+  let classList = 'flex flex-col my-6 mx-8 ';
   classList += bordered ? 'border ' : '';
   classList += rounded ? 'rounded-2xl ' : '';
   classList += classes ? classes : '';
@@ -103,7 +105,10 @@ const InformationIcon = _ref => {
   }; //-----------------------------------
 
 
-  return /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    id: "wrapper",
+    className: "h-48"
+  }, /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
     id: id
   }, {
     style: styles,
@@ -119,7 +124,7 @@ const InformationIcon = _ref => {
     className: numberClasses
   }, number), /*#__PURE__*/_react.default.createElement("p", {
     className: textClasses
-  }, text));
+  }, text)));
 };
 
 var _default = InformationIcon;

package/dist/components/Nav/index.js

@@ -140,7 +140,7 @@ const Nav = _ref => {
     className: mobileClassList,
     style: {
       'backgroundColor': bgColor,
-      'border-color': borderBottomColor
+      'borderColor': borderBottomColor
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
     id: "nav-collapse-btn-wrapper",
@@ -184,7 +184,7 @@ const Nav = _ref => {
     className: desktopClassList,
     style: {
       'backgroundColor': bgColor,
-      'border-color': borderBottomColor
+      'borderColor': borderBottomColor
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: 'flex ' + firstRowClasses

package/dist/components/TextAndTitle/index.js

@@ -26,15 +26,18 @@ const TextAndTitle = _ref => {
     titleBold,
     bgColor,
     textColor,
-    titleColor
+    titleColor,
+    textCenter,
+    titleCenter
   } = _ref;
+  let classList = classes ? classes : '';
   let titleClassList = 'text-2xl ';
   titleClassList += titleBold ? 'font-bold ' : '';
+  titleClassList += titleCenter ? 'text-center ' : '';
   titleClassList += titleClasses ? titleClasses : '';
   let textClassList = '';
-  textClassList += textClasses ? textClasses : '';
-  let classList = 'text-center ';
-  classList += classes ? classes : ''; //---------- Styling ---------------
+  textClassList += textCenter ? 'text-center ' : '';
+  textClassList += textClasses ? textClasses : ''; //---------- Styling ---------------
 
   const textStyles = {
     'backgroundColor': bgColor,

package/dist/components/Tubestops/index.css

@@ -2,7 +2,7 @@
 .tubestop.flex-col.none-reverse .status-flow-item:not(:first-child):before {
   @apply absolute;
   @apply block;
-  @apply bg-brand-border;
+  
   content: "";
   width: 1px;
   height: 100%;
@@ -13,7 +13,7 @@
 .tubestop.flex-col.none-reverse .status-flow-item:not(:last-child):after {
   @apply absolute;
   @apply block;
-  @apply bg-brand-border;
+ 
   content: "";
   width: 1px;
   height: 100%;
@@ -25,7 +25,7 @@
 .tubestop.flex-col.reverse .status-flow-item:not(:first-child):before {
   @apply absolute;
   @apply block;
-  @apply bg-brand-border;
+
   content: "";
   width: 1px;
   height: 100%;
@@ -36,7 +36,7 @@
 .tubestop.flex-col.reverse .status-flow-item:not(:last-child):after {
   @apply absolute;
   @apply block;
-  @apply bg-brand-border;
+
   content: "";
   width: 1px;
   height: 100%;
@@ -48,7 +48,7 @@
 .tubestop.flex-row.none-reverse .status-flow-item:not(:first-child):after {
   @apply absolute;
   @apply block;
-  @apply bg-brand-border;
+
   content: "";
   width: 100%;
   height: 1px;
@@ -60,7 +60,7 @@
   .status-flow-item:not(:first-child):after {
   @apply absolute;
   @apply block;
-  @apply bg-brand-border;
+
   content: "";
   width: 100%;
   height: 1px;
@@ -72,7 +72,7 @@
 .tubestop.flex-row.reverse .status-flow-item:not(:first-child):after {
   @apply absolute;
   @apply block;
-  @apply bg-brand-border;
+
   content: "";
   width: 100%;
   height: 1px;
@@ -83,7 +83,7 @@
 .tubestop.flex-row.reverse .status-flow-item:not(:first-child):after {
   @apply absolute;
   @apply block;
-  @apply bg-brand-border;
+
   content: "";
   width: 100%;
   height: 1px;

package/dist/components/index.css

@@ -3,6 +3,62 @@
 @tailwind utilities;
 @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css");
 
+@font-face {
+  font-family: "Sora";
+  src: url("../../fonts/Sora/static/Sora-Thin.ttf") format("truetype");
+  font-weight: 100;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Sora";
+  src: url("../../fonts/Sora/static/Sora-ExtraLight.ttf") format("truetype");
+  font-weight: 200;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Sora";
+  src: url("../../fonts/Sora/static/Sora-Light.ttf") format("truetype");
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Sora";
+  src: url("../../fonts/Sora/static/Sora-Regular.ttf") format("truetype");
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Sora";
+  src: url("../../fonts/Sora/static/Sora-Medium.ttf") format("truetype");
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Sora";
+  src: url("../../fonts/Sora/static/Sora-SemiBold.ttf") format("truetype");
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Sora";
+  src: url("../../fonts/Sora/static/Sora-Bold.ttf") format("truetype");
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Sora";
+  src: url("../../fonts/Sora/static/Sora-ExtraBold.ttf") format("truetype");
+  font-weight: 800;
+  font-style: normal;
+}
+
 .slick-track {
   display: flex !important;
 }

package/dist/index.js

@@ -284,4 +284,6 @@ var _UserIcon = _interopRequireDefault(require("./components/UserIcon"));
 
 var _Video = _interopRequireDefault(require("./components/Video"));
 
+require("../fonts/Sora/static/Sora-Bold.ttf");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/typography/index.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+require("../components/index.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const Fonts = _ref => {
+  let {} = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", {
+    className: "font-regular text-xs"
+  }, "This text is xs"), /*#__PURE__*/_react.default.createElement("p", {
+    className: "font-regular text-sm"
+  }, "This text is sm"), /*#__PURE__*/_react.default.createElement("p", {
+    className: "font-regular text-md"
+  }, "This text is md"), /*#__PURE__*/_react.default.createElement("p", {
+    className: "font-regular text-lg"
+  }, "This text is lg"), /*#__PURE__*/_react.default.createElement("p", {
+    className: "font-regular text-xl"
+  }, "This text is xl"), /*#__PURE__*/_react.default.createElement("p", {
+    className: "font-regular text-2xl"
+  }, "This text is 2xl"), /*#__PURE__*/_react.default.createElement("p", {
+    className: "font-regular text-3xl"
+  }, "This text is 3xl"), /*#__PURE__*/_react.default.createElement("p", {
+    className: "font-regular text-4xl"
+  }, "This text is 4xl"), /*#__PURE__*/_react.default.createElement("p", {
+    className: "text-md font-thin"
+  }, "This font is thin"), /*#__PURE__*/_react.default.createElement("p", {
+    className: "text-md font-extraLight"
+  }, "This font is extra light"), /*#__PURE__*/_react.default.createElement("p", {
+    className: "text-md font-light"
+  }, "This font is light"), /*#__PURE__*/_react.default.createElement("p", {
+    className: "text-md font-regular"
+  }, "This font is regular"), /*#__PURE__*/_react.default.createElement("p", {
+    className: "text-md font-medium"
+  }, "This font is medium"), /*#__PURE__*/_react.default.createElement("p", {
+    className: "text-md font-semiBold"
+  }, "This font is semi bold"), /*#__PURE__*/_react.default.createElement("p", {
+    className: "text-md font-bold"
+  }, "This font is bold"), /*#__PURE__*/_react.default.createElement("p", {
+    className: "text-md font-extraBold"
+  }, "This font is extra bold"));
+};
+
+var _default = Fonts;
+exports.default = _default;

package/package.json

@@ -2,7 +2,7 @@
   "name": "trepur_components",
   "description": "component lib",
   "author": "trepur_ttenneb",
-  "version": "0.2.35",
+  "version": "0.2.38",
   "private": false,
   "keywords": [
     "react",
@@ -20,8 +20,9 @@
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.3",
     "@testing-library/user-event": "^13.5.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "classnames": "^2.3.1",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
     "react-scripts": "5.0.0",
     "react-slick": "^0.28.1",
     "slick-carousel": "^1.8.1",