trepur_components 0.2.37 → 0.2.40

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -27,9 +27,8 @@ const Accordion = _ref => {
27
27
  id: id
28
28
  }, {
29
29
  className: classes
30
- }), items && items.map((item, i) => {
30
+ }), items && items.map(item => {
31
31
  return /*#__PURE__*/_react.default.createElement(_Collapsible.default, {
32
- key: item.id + '_' + i,
33
32
  id: item.id,
34
33
  title: item.title,
35
34
  subtitle: item.subtitle,
@@ -1,15 +1,13 @@
1
1
  "use strict";
2
2
 
3
- require("core-js/modules/es.object.assign.js");
4
-
5
3
  Object.defineProperty(exports, "__esModule", {
6
4
  value: true
7
5
  });
8
6
  exports.default = void 0;
9
7
 
10
- require("core-js/modules/web.dom-collections.iterator.js");
8
+ require("core-js/modules/es.object.assign.js");
11
9
 
12
- var _react = _interopRequireWildcard(require("react"));
10
+ var _react = _interopRequireDefault(require("react"));
13
11
 
14
12
  var _Icon = _interopRequireDefault(require("../Icon"));
15
13
 
@@ -17,10 +15,6 @@ require("../index.css");
17
15
 
18
16
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
19
17
 
20
- 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); }
21
-
22
- 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; }
23
-
24
18
  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); }
25
19
 
26
20
  const AlertBar = _ref => {
@@ -63,15 +57,15 @@ const AlertBar = _ref => {
63
57
  type: rightIcon,
64
58
  onClick: () => closeAlertBar()
65
59
  }) : null;
66
- const [styles, setStyles] = (0, _react.useState)({
60
+ const styles = {
67
61
  'color': textColor
68
- });
69
- const [leftIconStyles, setLeftIconStyles] = (0, _react.useState)({
62
+ };
63
+ const leftIconStyles = {
70
64
  'color': leftIconColor
71
- });
72
- const [rightIconStyles, setRightIconStyles] = (0, _react.useState)({
65
+ };
66
+ const rightIconStyles = {
73
67
  'color': rightIconColor
74
- });
68
+ };
75
69
  return /*#__PURE__*/_react.default.createElement("div", _extends({}, id ? {
76
70
  id: id
77
71
  } : {
@@ -25,8 +25,7 @@ const Breadcrumbs = _ref => {
25
25
  className: classList
26
26
  }, links && links.map((link, i) => {
27
27
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
28
- className: "flex",
29
- key: i
28
+ className: "flex"
30
29
  }, /*#__PURE__*/_react.default.createElement("li", {
31
30
  className: "h-8"
32
31
  }, i + 1 >= linksLength ? /*#__PURE__*/_react.default.createElement("p", {
@@ -46,7 +46,6 @@ const Breadcrumbs = _ref => {
46
46
  }
47
47
 
48
48
  return /*#__PURE__*/_react.default.createElement(_BreadcrumbsItem.default, {
49
- key: i,
50
49
  classes: margin,
51
50
  name: link.name,
52
51
  link: link.link,
@@ -77,7 +77,7 @@ const BreadcrumbsItem = _ref => {
77
77
  setStyles({
78
78
  'backgroundColor': bgColor ? bgColor : 'grey',
79
79
  'color': textColor ? textColor : 'black',
80
- 'border-color': borderColor ? borderColor : 'white'
80
+ 'borderColor': borderColor ? borderColor : 'white'
81
81
  });
82
82
  setHoverStyles({
83
83
  'backgroundColor': 'transparent',
@@ -15,6 +15,8 @@ var _Icon = _interopRequireDefault(require("../Icon"));
15
15
 
16
16
  require("../index.css");
17
17
 
18
+ require("./index.css");
19
+
18
20
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
19
21
 
20
22
  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); }
@@ -17,6 +17,8 @@ require("../index.css");
17
17
 
18
18
  var _Video = _interopRequireDefault(require("../Video"));
19
19
 
20
+ var _classnames = _interopRequireDefault(require("classnames"));
21
+
20
22
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
21
23
 
22
24
  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); }
@@ -83,24 +85,46 @@ const Card = _ref => {
83
85
  } = _ref;
84
86
  const [showHoverButtons, setShowHoverButtons] = (0, _react.useState)(false);
85
87
  let orderClass = cardImageBelowTitle ? ' order-first ' : '';
86
- let titleWrapperClass = 'p-3 ';
87
- titleWrapperClass += orderClass ? orderClass : '';
88
- let contentWrapperClass = 'px-3 ';
89
88
  let btnClass = 'w-full p-3 ';
90
89
  let border = cardBordered ? 'border border-grey border-opacity-100 ' : '';
91
90
  let cardTitleFont = cardTitleBold ? 'font-bold' : '';
92
91
  let cardTitlePosition = cardTitleLeft ? 'text-left ' : cardTitleRight ? 'text-right ' : 'text-center ';
93
92
  let roundedImage = cardRounded ? 'rounded-t-2xl ' : '';
94
93
  let roundedCard = cardRounded ? 'rounded-2xl ' : '';
95
- let cardTitleClasses = cardTitlePosition;
96
- cardTitleClasses += cardTitleFont ? cardTitleFont : '';
97
- let classList = 'flex flex-col ';
98
- classList += border ? border : '';
99
- classList += roundedCard ? roundedCard : '';
100
- classList += cardClasses ? cardClasses : '';
101
- let imageClassList = 'w-full ';
102
- imageClassList += !cardImageBelowTitle ? roundedImage : '';
103
- imageClassList += cardImageClass;
94
+ let contentWrapperClass = 'px-3 order-3';
95
+ const titleWrapperClass = (0, _classnames.default)({
96
+ [orderClass]: orderClass
97
+ }, 'pt-3');
98
+ const cardTitleClasses = (0, _classnames.default)({
99
+ [cardTitleFont]: cardTitleFont
100
+ }, cardTitlePosition, 'font-medium text-md text-grey');
101
+ const cardSubTitleClassList = (0, _classnames.default)({
102
+ [cardSubTitleClass]: cardSubTitleClass
103
+ }, 'font-light text-sm text-grey');
104
+ const cardDescriptionClassList = (0, _classnames.default)({
105
+ [cardDescriptionClass]: cardDescriptionClass
106
+ }, 'font-extraLight text-xs text-light-grey');
107
+ const classList = (0, _classnames.default)({
108
+ [border]: border,
109
+ [roundedCard]: roundedCard,
110
+ [cardClasses]: cardClasses
111
+ }, 'flex flex-col ');
112
+ const imageClassList = (0, _classnames.default)({
113
+ [roundedImage]: !cardImageBelowTitle,
114
+ [cardImageClass]: cardImageClass
115
+ }, ' w-full object-cover h-full ');
116
+ const videoClassList = (0, _classnames.default)({
117
+ [roundedImage]: !cardImageBelowTitle,
118
+ [videoClasses]: videoClasses
119
+ }, ' w-full object-cover h-full ');
120
+ const cardExtraTextClassList = (0, _classnames.default)({
121
+ [cardExtraTextClass]: cardExtraTextClass,
122
+ ['pb-4']: !cardHasCta
123
+ }, 'w-full object-cover h-full font-extraLight text-xs text-light-grey');
124
+ const imageWrapperClassList = (0, _classnames.default)({
125
+ [' order-2']: cardImageBelowTitle,
126
+ ["".concat(roundedImage, " order-1")]: !cardImageBelowTitle
127
+ }, ' h-64 overflow-hidden object-cover ');
104
128
 
105
129
  const toggleHover = isHovering => {
106
130
  onHover && isHovering ? setShowHoverButtons(true) : setShowHoverButtons(false);
@@ -117,10 +141,10 @@ const Card = _ref => {
117
141
  }), /*#__PURE__*/_react.default.createElement("div", {
118
142
  className: "card-content flex flex-1 flex-col"
119
143
  }, mp4File || webmFile || ogvFile ? /*#__PURE__*/_react.default.createElement("div", {
120
- className: roundedImage && roundedImage
144
+ className: imageWrapperClassList
121
145
  }, /*#__PURE__*/_react.default.createElement(_Video.default, _extends({
122
146
  id: videoId,
123
- classes: videoClasses,
147
+ classes: videoClassList,
124
148
  autoPlay: autoPlay,
125
149
  muted: muted
126
150
  }, poster && {
@@ -137,25 +161,27 @@ const Card = _ref => {
137
161
  withControls: withControls,
138
162
  withPoster: withPoster
139
163
  }))) : cardImage && /*#__PURE__*/_react.default.createElement("div", {
140
- className: roundedImage
164
+ className: imageWrapperClassList
141
165
  }, /*#__PURE__*/_react.default.createElement("img", {
142
166
  className: imageClassList,
143
167
  src: cardImage,
144
168
  alt: cardAltText
145
- })), !showHoverButtons ? /*#__PURE__*/_react.default.createElement("div", null, cardTitle && /*#__PURE__*/_react.default.createElement("div", {
169
+ })), !showHoverButtons ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
170
+ className: cardImageBelowTitle ? 'order-1' : 'order-3'
171
+ }, cardTitle && /*#__PURE__*/_react.default.createElement("div", {
146
172
  className: titleWrapperClass
147
173
  }, /*#__PURE__*/_react.default.createElement("h1", {
148
174
  className: cardTitleClasses
149
- }, cardTitle)), /*#__PURE__*/_react.default.createElement("div", {
175
+ }, cardTitle))), /*#__PURE__*/_react.default.createElement("div", {
150
176
  className: contentWrapperClass
151
177
  }, cardSubTitle && /*#__PURE__*/_react.default.createElement("h2", {
152
- className: cardSubTitleClass && cardSubTitleClass
153
- }, cardSubTitle), cardDescription && /*#__PURE__*/_react.default.createElement("h6", {
154
- className: cardDescriptionClass && cardDescriptionClass
155
- }, cardDescription), cardExtraText && /*#__PURE__*/_react.default.createElement("h2", {
156
- className: cardExtraTextClass && cardExtraTextClass
157
- }, cardExtraText))) : /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
158
- className: "flex pt-2"
178
+ className: cardSubTitleClassList
179
+ }, cardSubTitle), cardDescription && /*#__PURE__*/_react.default.createElement("p", {
180
+ className: cardDescriptionClassList
181
+ }, cardDescription), cardExtraText && /*#__PURE__*/_react.default.createElement("p", {
182
+ className: cardExtraTextClassList
183
+ }, cardExtraText))) : /*#__PURE__*/_react.default.createElement("div", {
184
+ className: "flex p-2 order-last h-24"
159
185
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
160
186
  buttonType: "icon",
161
187
  buttonUrl: "/",
@@ -167,10 +193,11 @@ const Card = _ref => {
167
193
  buttonHoverTextColor: "white",
168
194
  buttonHoverBorderColor: "black",
169
195
  buttonBordered: true,
196
+ buttonClasses: "mt-8",
170
197
  iconSize: 1,
171
198
  iconHollow: true
172
199
  }), /*#__PURE__*/_react.default.createElement(_Button.default, {
173
- buttonClasses: "ml-2 w-full",
200
+ buttonClasses: "ml-2 w-full mt-8",
174
201
  buttonText: "Add to basket",
175
202
  buttonBordered: true,
176
203
  buttonRounded: false,
@@ -178,7 +205,7 @@ const Card = _ref => {
178
205
  buttonBgColor: "#2f4848",
179
206
  buttonBorderColor: "#2f4848",
180
207
  buttonTextColor: "white"
181
- })))), cardHasCta && /*#__PURE__*/_react.default.createElement("div", {
208
+ }))), cardHasCta && /*#__PURE__*/_react.default.createElement("div", {
182
209
  className: btnClass
183
210
  }, /*#__PURE__*/_react.default.createElement(_Button.default, _extends({
184
211
  buttonId: buttonId,
@@ -79,9 +79,9 @@ const Carousel = _ref => {
79
79
  centerPadding
80
80
  } = _ref;
81
81
  const slider = (0, _react.useRef)(null);
82
- let previousArrowClassList = 'absolute z-10 -left-12 text-red top-2/4 ';
82
+ let previousArrowClassList = 'absolute z-10 -left-12 top-2/4 ';
83
83
  previousArrowClassList += previousArrowClasses ? previousArrowClasses : '';
84
- let nextArrowClassList = 'absolute z-10 -right-12 text-red top-2/4 ';
84
+ let nextArrowClassList = 'absolute z-10 -right-12 top-2/4 ';
85
85
  nextArrowClassList += nextArrowClasses ? nextArrowClasses : '';
86
86
 
87
87
  const NextArrow = () => {
@@ -57,15 +57,15 @@ const FyreCard = _ref => {
57
57
  })), /*#__PURE__*/_react.default.createElement("div", {
58
58
  className: "flex justify-end"
59
59
  }, /*#__PURE__*/_react.default.createElement(_Button.default, _extends({
60
- ctaText: ctaText,
60
+ buttonText: ctaText,
61
61
  buttonType: buttonType,
62
- url: url,
63
- bgColor: buttonBgColor,
64
- textColor: buttonTextColor,
62
+ buttonUrl: url,
63
+ buttonBgColor: buttonBgColor,
64
+ buttonTextColor: buttonTextColor,
65
65
  borderColor: buttonBorderColor,
66
- hoverBgColor: hoverButtonBgColor,
67
- hoverTextColor: hoverButtonTextColor,
68
- hoverBorderColor: hoverButtonBorderColor
66
+ buttonHoverBgColor: hoverButtonBgColor,
67
+ buttonHoverTextColor: hoverButtonTextColor,
68
+ buttonHoverBorderColor: hoverButtonBorderColor
69
69
  }, buttonDesign && {
70
70
  buttonDesign: buttonDesign
71
71
  })))));
@@ -0,0 +1,5 @@
1
+ #wrapper:hover div {
2
+ margin: 5px;
3
+ margin-bottom: 5px;
4
+ font-size: 24px
5
+ }
@@ -15,6 +15,8 @@ var _Icon = _interopRequireDefault(require("../Icon"));
15
15
 
16
16
  require("../index.css");
17
17
 
18
+ require("./index.css");
19
+
18
20
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
19
21
 
20
22
  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 => {
43
45
  let loaded = (0, _react.useRef)(false);
44
46
  let imageClassList = 'mx-auto pt-2 ';
45
47
  imageClassList += imageClasses ? imageClasses : '';
46
- let classList = 'hover:scale-110 transform transition duration-500 flex flex-col w-64 ';
48
+ let classList = 'flex flex-col my-6 mx-8 ';
47
49
  classList += bordered ? 'border ' : '';
48
50
  classList += rounded ? 'rounded-2xl ' : '';
49
51
  classList += classes ? classes : '';
@@ -103,7 +105,10 @@ const InformationIcon = _ref => {
103
105
  }; //-----------------------------------
104
106
 
105
107
 
106
- return /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
108
+ return /*#__PURE__*/_react.default.createElement("div", {
109
+ id: "wrapper",
110
+ className: "h-48"
111
+ }, /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
107
112
  id: id
108
113
  }, {
109
114
  style: styles,
@@ -119,7 +124,7 @@ const InformationIcon = _ref => {
119
124
  className: numberClasses
120
125
  }, number), /*#__PURE__*/_react.default.createElement("p", {
121
126
  className: textClasses
122
- }, text));
127
+ }, text)));
123
128
  };
124
129
 
125
130
  var _default = InformationIcon;
@@ -140,7 +140,7 @@ const Nav = _ref => {
140
140
  className: mobileClassList,
141
141
  style: {
142
142
  'backgroundColor': bgColor,
143
- 'border-color': borderBottomColor
143
+ 'borderColor': borderBottomColor
144
144
  }
145
145
  }, /*#__PURE__*/_react.default.createElement("div", {
146
146
  id: "nav-collapse-btn-wrapper",
@@ -184,7 +184,7 @@ const Nav = _ref => {
184
184
  className: desktopClassList,
185
185
  style: {
186
186
  'backgroundColor': bgColor,
187
- 'border-color': borderBottomColor
187
+ 'borderColor': borderBottomColor
188
188
  }
189
189
  }, /*#__PURE__*/_react.default.createElement("div", {
190
190
  className: 'flex ' + firstRowClasses
@@ -26,15 +26,18 @@ const TextAndTitle = _ref => {
26
26
  titleBold,
27
27
  bgColor,
28
28
  textColor,
29
- titleColor
29
+ titleColor,
30
+ textCenter,
31
+ titleCenter
30
32
  } = _ref;
33
+ let classList = classes ? classes : '';
31
34
  let titleClassList = 'text-2xl ';
32
35
  titleClassList += titleBold ? 'font-bold ' : '';
36
+ titleClassList += titleCenter ? 'text-center ' : '';
33
37
  titleClassList += titleClasses ? titleClasses : '';
34
38
  let textClassList = '';
35
- textClassList += textClasses ? textClasses : '';
36
- let classList = 'text-center ';
37
- classList += classes ? classes : ''; //---------- Styling ---------------
39
+ textClassList += textCenter ? 'text-center ' : '';
40
+ textClassList += textClasses ? textClasses : ''; //---------- Styling ---------------
38
41
 
39
42
  const textStyles = {
40
43
  'backgroundColor': bgColor,
@@ -2,7 +2,7 @@
2
2
  .tubestop.flex-col.none-reverse .status-flow-item:not(:first-child):before {
3
3
  @apply absolute;
4
4
  @apply block;
5
- @apply bg-brand-border;
5
+
6
6
  content: "";
7
7
  width: 1px;
8
8
  height: 100%;
@@ -13,7 +13,7 @@
13
13
  .tubestop.flex-col.none-reverse .status-flow-item:not(:last-child):after {
14
14
  @apply absolute;
15
15
  @apply block;
16
- @apply bg-brand-border;
16
+
17
17
  content: "";
18
18
  width: 1px;
19
19
  height: 100%;
@@ -25,7 +25,7 @@
25
25
  .tubestop.flex-col.reverse .status-flow-item:not(:first-child):before {
26
26
  @apply absolute;
27
27
  @apply block;
28
- @apply bg-brand-border;
28
+
29
29
  content: "";
30
30
  width: 1px;
31
31
  height: 100%;
@@ -36,7 +36,7 @@
36
36
  .tubestop.flex-col.reverse .status-flow-item:not(:last-child):after {
37
37
  @apply absolute;
38
38
  @apply block;
39
- @apply bg-brand-border;
39
+
40
40
  content: "";
41
41
  width: 1px;
42
42
  height: 100%;
@@ -48,7 +48,7 @@
48
48
  .tubestop.flex-row.none-reverse .status-flow-item:not(:first-child):after {
49
49
  @apply absolute;
50
50
  @apply block;
51
- @apply bg-brand-border;
51
+
52
52
  content: "";
53
53
  width: 100%;
54
54
  height: 1px;
@@ -60,7 +60,7 @@
60
60
  .status-flow-item:not(:first-child):after {
61
61
  @apply absolute;
62
62
  @apply block;
63
- @apply bg-brand-border;
63
+
64
64
  content: "";
65
65
  width: 100%;
66
66
  height: 1px;
@@ -72,7 +72,7 @@
72
72
  .tubestop.flex-row.reverse .status-flow-item:not(:first-child):after {
73
73
  @apply absolute;
74
74
  @apply block;
75
- @apply bg-brand-border;
75
+
76
76
  content: "";
77
77
  width: 100%;
78
78
  height: 1px;
@@ -83,7 +83,7 @@
83
83
  .tubestop.flex-row.reverse .status-flow-item:not(:first-child):after {
84
84
  @apply absolute;
85
85
  @apply block;
86
- @apply bg-brand-border;
86
+
87
87
  content: "";
88
88
  width: 100%;
89
89
  height: 1px;
@@ -3,6 +3,62 @@
3
3
  @tailwind utilities;
4
4
  @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css");
5
5
 
6
+ @font-face {
7
+ font-family: "Sora";
8
+ src: url("../../fonts/Sora/static/Sora-Thin.ttf") format("truetype");
9
+ font-weight: 100;
10
+ font-style: normal;
11
+ }
12
+
13
+ @font-face {
14
+ font-family: "Sora";
15
+ src: url("../../fonts/Sora/static/Sora-ExtraLight.ttf") format("truetype");
16
+ font-weight: 200;
17
+ font-style: normal;
18
+ }
19
+
20
+ @font-face {
21
+ font-family: "Sora";
22
+ src: url("../../fonts/Sora/static/Sora-Light.ttf") format("truetype");
23
+ font-weight: 300;
24
+ font-style: normal;
25
+ }
26
+
27
+ @font-face {
28
+ font-family: "Sora";
29
+ src: url("../../fonts/Sora/static/Sora-Regular.ttf") format("truetype");
30
+ font-weight: 400;
31
+ font-style: normal;
32
+ }
33
+
34
+ @font-face {
35
+ font-family: "Sora";
36
+ src: url("../../fonts/Sora/static/Sora-Medium.ttf") format("truetype");
37
+ font-weight: 500;
38
+ font-style: normal;
39
+ }
40
+
41
+ @font-face {
42
+ font-family: "Sora";
43
+ src: url("../../fonts/Sora/static/Sora-SemiBold.ttf") format("truetype");
44
+ font-weight: 600;
45
+ font-style: normal;
46
+ }
47
+
48
+ @font-face {
49
+ font-family: "Sora";
50
+ src: url("../../fonts/Sora/static/Sora-Bold.ttf") format("truetype");
51
+ font-weight: 700;
52
+ font-style: normal;
53
+ }
54
+
55
+ @font-face {
56
+ font-family: "Sora";
57
+ src: url("../../fonts/Sora/static/Sora-ExtraBold.ttf") format("truetype");
58
+ font-weight: 800;
59
+ font-style: normal;
60
+ }
61
+
6
62
  .slick-track {
7
63
  display: flex !important;
8
64
  }
package/dist/index.js CHANGED
@@ -284,4 +284,6 @@ var _UserIcon = _interopRequireDefault(require("./components/UserIcon"));
284
284
 
285
285
  var _Video = _interopRequireDefault(require("./components/Video"));
286
286
 
287
+ require("../fonts/Sora/static/Sora-Bold.ttf");
288
+
287
289
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -0,0 +1,52 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ var _react = _interopRequireDefault(require("react"));
9
+
10
+ require("../components/index.css");
11
+
12
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
+
14
+ const Fonts = _ref => {
15
+ let {} = _ref;
16
+ return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", {
17
+ className: "font-regular text-xs"
18
+ }, "This text is xs"), /*#__PURE__*/_react.default.createElement("p", {
19
+ className: "font-regular text-sm"
20
+ }, "This text is sm"), /*#__PURE__*/_react.default.createElement("p", {
21
+ className: "font-regular text-md"
22
+ }, "This text is md"), /*#__PURE__*/_react.default.createElement("p", {
23
+ className: "font-regular text-lg"
24
+ }, "This text is lg"), /*#__PURE__*/_react.default.createElement("p", {
25
+ className: "font-regular text-xl"
26
+ }, "This text is xl"), /*#__PURE__*/_react.default.createElement("p", {
27
+ className: "font-regular text-2xl"
28
+ }, "This text is 2xl"), /*#__PURE__*/_react.default.createElement("p", {
29
+ className: "font-regular text-3xl"
30
+ }, "This text is 3xl"), /*#__PURE__*/_react.default.createElement("p", {
31
+ className: "font-regular text-4xl"
32
+ }, "This text is 4xl"), /*#__PURE__*/_react.default.createElement("p", {
33
+ className: "text-md font-thin"
34
+ }, "This font is thin"), /*#__PURE__*/_react.default.createElement("p", {
35
+ className: "text-md font-extraLight"
36
+ }, "This font is extra light"), /*#__PURE__*/_react.default.createElement("p", {
37
+ className: "text-md font-light"
38
+ }, "This font is light"), /*#__PURE__*/_react.default.createElement("p", {
39
+ className: "text-md font-regular"
40
+ }, "This font is regular"), /*#__PURE__*/_react.default.createElement("p", {
41
+ className: "text-md font-medium"
42
+ }, "This font is medium"), /*#__PURE__*/_react.default.createElement("p", {
43
+ className: "text-md font-semiBold"
44
+ }, "This font is semi bold"), /*#__PURE__*/_react.default.createElement("p", {
45
+ className: "text-md font-bold"
46
+ }, "This font is bold"), /*#__PURE__*/_react.default.createElement("p", {
47
+ className: "text-md font-extraBold"
48
+ }, "This font is extra bold"));
49
+ };
50
+
51
+ var _default = Fonts;
52
+ exports.default = _default;
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "trepur_components",
3
3
  "description": "component lib",
4
4
  "author": "trepur_ttenneb",
5
- "version": "0.2.37",
5
+ "version": "0.2.40",
6
6
  "private": false,
7
7
  "keywords": [
8
8
  "react",
@@ -20,8 +20,9 @@
20
20
  "@testing-library/jest-dom": "^5.16.2",
21
21
  "@testing-library/react": "^12.1.3",
22
22
  "@testing-library/user-event": "^13.5.0",
23
- "react": "^17.0.2",
24
- "react-dom": "^17.0.2",
23
+ "classnames": "^2.3.1",
24
+ "react": "^18.1.0",
25
+ "react-dom": "^18.1.0",
25
26
  "react-scripts": "5.0.0",
26
27
  "react-slick": "^0.28.1",
27
28
  "slick-carousel": "^1.8.1",