@stokr/components-library 2.3.65-beta.3 → 2.3.65-beta.4

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.
Files changed (10) hide show
  1. package/dist/components/Modal/SideModal.js +82 -0
  2. package/dist/components/Modal/SideModal.stories.js +342 -0
  3. package/dist/components/Modal/SideModal.styles.js +21 -0
  4. package/dist/components/StatusTag/StatusTag.js +168 -0
  5. package/dist/components/StatusTag/StatusTag.stories.js +262 -0
  6. package/dist/components/StatusTag/StatusTag.styles.js +37 -0
  7. package/dist/index.js +22 -0
  8. package/dist/static/images/document-icon.svg +3 -0
  9. package/dist/static/images/sent-icon.svg +10 -0
  10. package/package.json +1 -1
package/dist/components/Modal/SideModal.js ADDED
@@ -0,0 +1,82 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = exports.SideModal = void 0;
7
+ var _react = _interopRequireWildcard(require("react"));
8
+ var _reactDom = require("react-dom");
9
+ var _SideModal = require("./SideModal.styles");
10
+ var _Modal = require("./Modal.styles");
11
+ const _excluded = ["children", "isOpen", "onClose", "width", "minWidth", "className", "containerStyle", "closeOnDimmerClick", "showCloseButton"];
12
+ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
13
+ function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
14
+ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
15
+ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
16
+ const SideModal = _ref => {
17
+ let {
18
+ children,
19
+ isOpen,
20
+ onClose,
21
+ width = 40,
22
+ minWidth = 400,
23
+ className,
24
+ containerStyle,
25
+ closeOnDimmerClick = true,
26
+ showCloseButton = true
27
+ } = _ref,
28
+ props = _objectWithoutProperties(_ref, _excluded);
29
+ const [isVisible, setIsVisible] = (0, _react.useState)(false);
30
+ (0, _react.useEffect)(() => {
31
+ // Disable scroll on background when modal is open
32
+ if (isOpen) {
33
+ document.body.style.overflow = 'hidden';
34
+ // Small delay to trigger animation
35
+ setTimeout(() => setIsVisible(true), 10);
36
+ } else {
37
+ document.body.style.overflow = 'unset';
38
+ setIsVisible(false);
39
+ }
40
+ return () => {
41
+ document.body.style.overflow = 'unset';
42
+ };
43
+ }, [isOpen]);
44
+
45
+ // Handle escape key
46
+ (0, _react.useEffect)(() => {
47
+ const handleEscape = e => {
48
+ if (e.key === 'Escape' && isOpen) {
49
+ onClose();
50
+ }
51
+ };
52
+ if (isOpen) {
53
+ document.addEventListener('keydown', handleEscape);
54
+ }
55
+ return () => {
56
+ document.removeEventListener('keydown', handleEscape);
57
+ };
58
+ }, [isOpen, onClose]);
59
+ const handleDimmerClick = e => {
60
+ if (closeOnDimmerClick && e.target === e.currentTarget) {
61
+ onClose();
62
+ }
63
+ };
64
+ if (!isOpen) return null;
65
+ const modalContent = /*#__PURE__*/_react.default.createElement(_SideModal.SideModalRoot, _extends({
66
+ className: className,
67
+ style: containerStyle
68
+ }, props), /*#__PURE__*/_react.default.createElement(_SideModal.Dimmer, {
69
+ onClick: handleDimmerClick,
70
+ isVisible: isVisible
71
+ }, /*#__PURE__*/_react.default.createElement(_SideModal.SideModalBox, {
72
+ width: width,
73
+ minWidth: minWidth,
74
+ isVisible: isVisible,
75
+ onClick: e => e.stopPropagation()
76
+ }, showCloseButton && /*#__PURE__*/_react.default.createElement(_Modal.ModalClose, {
77
+ onClick: onClose
78
+ }), children)));
79
+ return /*#__PURE__*/(0, _reactDom.createPortal)(modalContent, document.body);
80
+ };
81
+ exports.SideModal = SideModal;
82
+ var _default = exports.default = SideModal;
package/dist/components/Modal/SideModal.stories.js ADDED
@@ -0,0 +1,342 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = exports.WithoutCloseButton = exports.WithContent = exports.NoDimmerClose = exports.LongContent = exports.DifferentWidths = exports.Basic = void 0;
7
+ var _react = _interopRequireWildcard(require("react"));
8
+ var _SideModal = _interopRequireDefault(require("./SideModal"));
9
+ var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
10
+ var _Button = _interopRequireDefault(require("../Button/Button.styles"));
11
+ var _global = _interopRequireDefault(require("../../styles/global"));
12
+ var _colors = _interopRequireDefault(require("../../styles/colors"));
13
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
14
+ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
15
+ var _default = exports.default = {
16
+ title: 'Components Library/Modal/SideModal',
17
+ component: _SideModal.default,
18
+ decorators: [Story => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(Story, null))],
19
+ argTypes: {
20
+ isOpen: {
21
+ control: 'boolean',
22
+ description: 'Controls modal visibility'
23
+ },
24
+ width: {
25
+ control: {
26
+ type: 'range',
27
+ min: 20,
28
+ max: 90,
29
+ step: 5
30
+ },
31
+ description: 'Width as percentage of screen',
32
+ defaultValue: 40
33
+ },
34
+ minWidth: {
35
+ control: 'number',
36
+ description: 'Minimum width in pixels',
37
+ defaultValue: 400
38
+ },
39
+ closeOnDimmerClick: {
40
+ control: 'boolean',
41
+ description: 'Close modal when clicking dimmed area',
42
+ defaultValue: true
43
+ },
44
+ showCloseButton: {
45
+ control: 'boolean',
46
+ description: 'Show close button',
47
+ defaultValue: true
48
+ }
49
+ }
50
+ }; // Basic example
51
+ const Basic = () => {
52
+ const [isOpen, setIsOpen] = (0, _react.useState)(false);
53
+ return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
54
+ onClick: () => setIsOpen(true)
55
+ }, "Open Side Modal"), /*#__PURE__*/_react.default.createElement(_SideModal.default, {
56
+ isOpen: isOpen,
57
+ onClose: () => setIsOpen(false)
58
+ }, /*#__PURE__*/_react.default.createElement("div", {
59
+ style: {
60
+ padding: '40px'
61
+ }
62
+ }, /*#__PURE__*/_react.default.createElement("h2", {
63
+ style: {
64
+ marginBottom: '20px'
65
+ }
66
+ }, "Basic Side Modal"), /*#__PURE__*/_react.default.createElement("p", {
67
+ style: {
68
+ marginBottom: '16px',
69
+ lineHeight: '1.6'
70
+ }
71
+ }, "This is a basic side modal that slides in from the right. It takes 40% of the screen width by default."), /*#__PURE__*/_react.default.createElement("p", {
72
+ style: {
73
+ marginBottom: '16px',
74
+ lineHeight: '1.6'
75
+ }
76
+ }, "You can close it by clicking the X button, clicking outside, or pressing Escape."), /*#__PURE__*/_react.default.createElement(_Button.default, {
77
+ onClick: () => setIsOpen(false)
78
+ }, "Close Modal"))));
79
+ };
80
+
81
+ // Different widths
82
+ exports.Basic = Basic;
83
+ const DifferentWidths = () => {
84
+ const [isOpen30, setIsOpen30] = (0, _react.useState)(false);
85
+ const [isOpen40, setIsOpen40] = (0, _react.useState)(false);
86
+ const [isOpen60, setIsOpen60] = (0, _react.useState)(false);
87
+ return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
88
+ style: {
89
+ display: 'flex',
90
+ flexDirection: 'column',
91
+ gap: '16px'
92
+ }
93
+ }, /*#__PURE__*/_react.default.createElement(_Button.default, {
94
+ onClick: () => setIsOpen30(true)
95
+ }, "Open 30% Width"), /*#__PURE__*/_react.default.createElement(_Button.default, {
96
+ onClick: () => setIsOpen40(true)
97
+ }, "Open 40% Width"), /*#__PURE__*/_react.default.createElement(_Button.default, {
98
+ onClick: () => setIsOpen60(true)
99
+ }, "Open 60% Width")), /*#__PURE__*/_react.default.createElement(_SideModal.default, {
100
+ isOpen: isOpen30,
101
+ onClose: () => setIsOpen30(false),
102
+ width: 30,
103
+ minWidth: 300
104
+ }, /*#__PURE__*/_react.default.createElement("div", {
105
+ style: {
106
+ padding: '40px'
107
+ }
108
+ }, /*#__PURE__*/_react.default.createElement("h2", null, "30% Width Modal"), /*#__PURE__*/_react.default.createElement("p", null, "This modal takes 30% of the screen width."))), /*#__PURE__*/_react.default.createElement(_SideModal.default, {
109
+ isOpen: isOpen40,
110
+ onClose: () => setIsOpen40(false),
111
+ width: 40,
112
+ minWidth: 400
113
+ }, /*#__PURE__*/_react.default.createElement("div", {
114
+ style: {
115
+ padding: '40px'
116
+ }
117
+ }, /*#__PURE__*/_react.default.createElement("h2", null, "40% Width Modal"), /*#__PURE__*/_react.default.createElement("p", null, "This modal takes 40% of the screen width (default)."))), /*#__PURE__*/_react.default.createElement(_SideModal.default, {
118
+ isOpen: isOpen60,
119
+ onClose: () => setIsOpen60(false),
120
+ width: 60,
121
+ minWidth: 500
122
+ }, /*#__PURE__*/_react.default.createElement("div", {
123
+ style: {
124
+ padding: '40px'
125
+ }
126
+ }, /*#__PURE__*/_react.default.createElement("h2", null, "60% Width Modal"), /*#__PURE__*/_react.default.createElement("p", null, "This modal takes 60% of the screen width."))));
127
+ };
128
+
129
+ // With content example (like payout details)
130
+ exports.DifferentWidths = DifferentWidths;
131
+ const WithContent = () => {
132
+ const [isOpen, setIsOpen] = (0, _react.useState)(false);
133
+ return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
134
+ onClick: () => setIsOpen(true)
135
+ }, "View Payout Details"), /*#__PURE__*/_react.default.createElement(_SideModal.default, {
136
+ isOpen: isOpen,
137
+ onClose: () => setIsOpen(false)
138
+ }, /*#__PURE__*/_react.default.createElement("div", {
139
+ style: {
140
+ padding: '40px'
141
+ }
142
+ }, /*#__PURE__*/_react.default.createElement("h1", {
143
+ style: {
144
+ fontSize: '24px',
145
+ fontWeight: 'bold',
146
+ marginBottom: '8px',
147
+ textTransform: 'uppercase'
148
+ }
149
+ }, "PAYOUT DETAILS"), /*#__PURE__*/_react.default.createElement("p", {
150
+ style: {
151
+ color: _colors.default.grey2,
152
+ marginBottom: '32px'
153
+ }
154
+ }, "View all payout information here."), /*#__PURE__*/_react.default.createElement("div", {
155
+ style: {
156
+ marginBottom: '32px'
157
+ }
158
+ }, /*#__PURE__*/_react.default.createElement("h3", {
159
+ style: {
160
+ marginBottom: '16px',
161
+ fontSize: '16px'
162
+ }
163
+ }, "Status"), /*#__PURE__*/_react.default.createElement("div", {
164
+ style: {
165
+ display: 'flex',
166
+ flexDirection: 'column',
167
+ gap: '16px'
168
+ }
169
+ }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
170
+ style: {
171
+ display: 'flex',
172
+ alignItems: 'center',
173
+ gap: '8px'
174
+ }
175
+ }, /*#__PURE__*/_react.default.createElement("span", {
176
+ style: {
177
+ color: _colors.default.freshGreen
178
+ }
179
+ }, "\u2713"), /*#__PURE__*/_react.default.createElement("span", {
180
+ style: {
181
+ fontWeight: 'bold'
182
+ }
183
+ }, "Initiated"), /*#__PURE__*/_react.default.createElement("span", {
184
+ style: {
185
+ color: _colors.default.grey2,
186
+ fontSize: '12px'
187
+ }
188
+ }, "12. AUG 2025 11:57")), /*#__PURE__*/_react.default.createElement("p", {
189
+ style: {
190
+ color: _colors.default.grey2,
191
+ fontSize: '14px',
192
+ marginLeft: '24px'
193
+ }
194
+ }, "Awaiting receipt of your funds.")))), /*#__PURE__*/_react.default.createElement("div", {
195
+ style: {
196
+ backgroundColor: _colors.default.grey3,
197
+ padding: '20px',
198
+ borderRadius: '8px',
199
+ marginBottom: '24px'
200
+ }
201
+ }, /*#__PURE__*/_react.default.createElement("div", {
202
+ style: {
203
+ marginBottom: '16px'
204
+ }
205
+ }, /*#__PURE__*/_react.default.createElement("label", {
206
+ style: {
207
+ color: _colors.default.grey2,
208
+ fontSize: '12px'
209
+ }
210
+ }, "Amount"), /*#__PURE__*/_react.default.createElement("div", {
211
+ style: {
212
+ display: 'flex',
213
+ alignItems: 'center',
214
+ gap: '8px'
215
+ }
216
+ }, /*#__PURE__*/_react.default.createElement("span", {
217
+ style: {
218
+ fontSize: '20px',
219
+ fontWeight: 'bold'
220
+ }
221
+ }, "13.23145 BTC"))), /*#__PURE__*/_react.default.createElement("div", {
222
+ style: {
223
+ marginBottom: '16px'
224
+ }
225
+ }, /*#__PURE__*/_react.default.createElement("label", {
226
+ style: {
227
+ color: _colors.default.grey2,
228
+ fontSize: '12px'
229
+ }
230
+ }, "Wallet address"), /*#__PURE__*/_react.default.createElement("div", {
231
+ style: {
232
+ fontWeight: 'bold'
233
+ }
234
+ }, "GAYiyo[...]LGXg")), /*#__PURE__*/_react.default.createElement("div", {
235
+ style: {
236
+ marginBottom: '16px'
237
+ }
238
+ }, /*#__PURE__*/_react.default.createElement("label", {
239
+ style: {
240
+ color: _colors.default.grey2,
241
+ fontSize: '12px'
242
+ }
243
+ }, "Period"), /*#__PURE__*/_react.default.createElement("div", {
244
+ style: {
245
+ fontWeight: 'bold'
246
+ }
247
+ }, "01.10.2025. - 31.11.2025.")), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("label", {
248
+ style: {
249
+ color: _colors.default.grey2,
250
+ fontSize: '12px'
251
+ }
252
+ }, "Type"), /*#__PURE__*/_react.default.createElement("div", {
253
+ style: {
254
+ fontWeight: 'bold'
255
+ }
256
+ }, "Interest"))), /*#__PURE__*/_react.default.createElement("div", {
257
+ style: {
258
+ backgroundColor: _colors.default.grey3,
259
+ padding: '20px',
260
+ borderRadius: '8px',
261
+ marginBottom: '24px'
262
+ }
263
+ }, /*#__PURE__*/_react.default.createElement("p", {
264
+ style: {
265
+ color: _colors.default.grey2,
266
+ fontSize: '14px',
267
+ marginBottom: '8px'
268
+ }
269
+ }, "To modify payout details or cancel this transaction, contact our support team at", ' ', /*#__PURE__*/_react.default.createElement("a", {
270
+ href: "mailto:support@stokr.io",
271
+ style: {
272
+ color: _colors.default.blue,
273
+ textDecoration: 'none'
274
+ }
275
+ }, "support@stokr.io"), ".")), /*#__PURE__*/_react.default.createElement(_Button.default, {
276
+ onClick: () => setIsOpen(false)
277
+ }, "Close"))));
278
+ };
279
+
280
+ // Without close button
281
+ exports.WithContent = WithContent;
282
+ const WithoutCloseButton = () => {
283
+ const [isOpen, setIsOpen] = (0, _react.useState)(false);
284
+ return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
285
+ onClick: () => setIsOpen(true)
286
+ }, "Open Modal (No Close Button)"), /*#__PURE__*/_react.default.createElement(_SideModal.default, {
287
+ isOpen: isOpen,
288
+ onClose: () => setIsOpen(false),
289
+ showCloseButton: false
290
+ }, /*#__PURE__*/_react.default.createElement("div", {
291
+ style: {
292
+ padding: '40px'
293
+ }
294
+ }, /*#__PURE__*/_react.default.createElement("h2", null, "Modal Without Close Button"), /*#__PURE__*/_react.default.createElement("p", null, "This modal doesn't have a close button. You can only close it by:"), /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement("li", null, "Clicking outside (on the dimmed area)"), /*#__PURE__*/_react.default.createElement("li", null, "Pressing Escape key"), /*#__PURE__*/_react.default.createElement("li", null, "Using the close button below")), /*#__PURE__*/_react.default.createElement(_Button.default, {
295
+ onClick: () => setIsOpen(false)
296
+ }, "Close Modal"))));
297
+ };
298
+
299
+ // Don't close on dimmer click
300
+ exports.WithoutCloseButton = WithoutCloseButton;
301
+ const NoDimmerClose = () => {
302
+ const [isOpen, setIsOpen] = (0, _react.useState)(false);
303
+ return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
304
+ onClick: () => setIsOpen(true)
305
+ }, "Open Modal (No Dimmer Close)"), /*#__PURE__*/_react.default.createElement(_SideModal.default, {
306
+ isOpen: isOpen,
307
+ onClose: () => setIsOpen(false),
308
+ closeOnDimmerClick: false
309
+ }, /*#__PURE__*/_react.default.createElement("div", {
310
+ style: {
311
+ padding: '40px'
312
+ }
313
+ }, /*#__PURE__*/_react.default.createElement("h2", null, "Modal That Doesn't Close on Dimmer Click"), /*#__PURE__*/_react.default.createElement("p", null, "This modal won't close when you click outside. You must use the close button or Escape key."), /*#__PURE__*/_react.default.createElement(_Button.default, {
314
+ onClick: () => setIsOpen(false)
315
+ }, "Close Modal"))));
316
+ };
317
+
318
+ // Long content (scrollable)
319
+ exports.NoDimmerClose = NoDimmerClose;
320
+ const LongContent = () => {
321
+ const [isOpen, setIsOpen] = (0, _react.useState)(false);
322
+ return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
323
+ onClick: () => setIsOpen(true)
324
+ }, "Open Modal with Long Content"), /*#__PURE__*/_react.default.createElement(_SideModal.default, {
325
+ isOpen: isOpen,
326
+ onClose: () => setIsOpen(false)
327
+ }, /*#__PURE__*/_react.default.createElement("div", {
328
+ style: {
329
+ padding: '40px'
330
+ }
331
+ }, /*#__PURE__*/_react.default.createElement("h2", null, "Long Content Modal"), /*#__PURE__*/_react.default.createElement("p", null, "This modal has scrollable content:"), Array.from({
332
+ length: 50
333
+ }, (_, i) => /*#__PURE__*/_react.default.createElement("p", {
334
+ key: i,
335
+ style: {
336
+ marginBottom: '16px'
337
+ }
338
+ }, "This is paragraph ", i + 1, ". The modal should be scrollable when content exceeds the viewport height.")), /*#__PURE__*/_react.default.createElement(_Button.default, {
339
+ onClick: () => setIsOpen(false)
340
+ }, "Close Modal"))));
341
+ };
342
+ exports.LongContent = LongContent;
package/dist/components/Modal/SideModal.styles.js ADDED
@@ -0,0 +1,21 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.SideModalRoot = exports.SideModalBox = exports.Dimmer = void 0;
7
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
8
+ var _colors = _interopRequireDefault(require("../../styles/colors"));
9
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
10
+ const SideModalRoot = exports.SideModalRoot = _styledComponents.default.div.withConfig({
11
+ displayName: "SideModalstyles__SideModalRoot",
12
+ componentId: "sc-f9ztpn-0"
13
+ })(["position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;"]);
14
+ const Dimmer = exports.Dimmer = _styledComponents.default.div.withConfig({
15
+ displayName: "SideModalstyles__Dimmer",
16
+ componentId: "sc-f9ztpn-1"
17
+ })(["position:absolute;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.5);display:flex;justify-content:flex-end;align-items:stretch;opacity:", ";transition:opacity 0.3s ease-in-out;pointer-events:", ";"], props => props.isVisible ? 1 : 0, props => props.isVisible ? 'auto' : 'none');
18
+ const SideModalBox = exports.SideModalBox = _styledComponents.default.div.withConfig({
19
+ displayName: "SideModalstyles__SideModalBox",
20
+ componentId: "sc-f9ztpn-2"
21
+ })(["position:relative;width:", "%;min-width:", "px;max-width:90%;height:100%;background-color:", ";box-shadow:-2px 0 8px rgba(0,0,0,0.15);display:flex;flex-direction:column;overflow-y:auto;transform:translateX(", ");transition:transform 0.3s ease-in-out;z-index:1;pointer-events:auto;@media (max-width:768px){width:90%;min-width:90%;max-width:90%;}"], props => props.width, props => props.minWidth, _colors.default.white, props => props.isVisible ? '0' : '100%');
package/dist/components/StatusTag/StatusTag.js ADDED
@@ -0,0 +1,168 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = exports.StatusTag = void 0;
7
+ var _react = _interopRequireDefault(require("react"));
8
+ var _InfoIcon = _interopRequireDefault(require("../InfoIcon/InfoIcon"));
9
+ var _Icon = require("../Icon/Icon.style");
10
+ var _checkIcon = require("../../static/images/check-icon.svg");
11
+ var _crossIcon = require("../../static/images/cross-icon.svg");
12
+ var _sentIcon = require("../../static/images/sent-icon.svg");
13
+ var _documentIcon = require("../../static/images/document-icon.svg");
14
+ var _colors = _interopRequireDefault(require("../../styles/colors"));
15
+ var _StatusTag = require("./StatusTag.styles");
16
+ const _excluded = ["variant", "icon", "text", "tooltip", "tooltipProps", "iconColor", "hoverColor", "disableHoverColor", "minWidth", "className", "containerStyle", "iconStyle", "textStyle", "onClick", "center"];
17
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
18
+ function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
19
+ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
20
+ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
21
+ const PaidIcon = _ref => {
22
+ let {
23
+ iconColor,
24
+ hoverColor,
25
+ disableHoverColor
26
+ } = _ref;
27
+ return /*#__PURE__*/_react.default.createElement(_StatusTag.PaidIconWrapper, {
28
+ iconColor: iconColor,
29
+ hoverColor: hoverColor,
30
+ disableHoverColor: disableHoverColor
31
+ }, /*#__PURE__*/_react.default.createElement(_checkIcon.ReactComponent, null));
32
+ };
33
+ const DeclinedIcon = _ref2 => {
34
+ let {
35
+ iconColor,
36
+ hoverColor,
37
+ disableHoverColor
38
+ } = _ref2;
39
+ return /*#__PURE__*/_react.default.createElement(_StatusTag.DeclinedIconWrapper, {
40
+ iconColor: iconColor,
41
+ hoverColor: hoverColor,
42
+ disableHoverColor: disableHoverColor
43
+ }, /*#__PURE__*/_react.default.createElement(_crossIcon.ReactComponent, null));
44
+ };
45
+
46
+ // Variant configuration - maps variant to icon and colors only
47
+ const variantConfig = {
48
+ pending: {
49
+ icon: /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
50
+ icon: _Icon.iconsMap.inProgress,
51
+ size: 12
52
+ }),
53
+ iconColor: _colors.default.grey2,
54
+ hoverColor: _colors.default.warningOrange,
55
+ disableHoverColor: false
56
+ },
57
+ initiated: {
58
+ icon: /*#__PURE__*/_react.default.createElement(_sentIcon.ReactComponent, {
59
+ width: 12,
60
+ height: 12
61
+ }),
62
+ iconColor: _colors.default.grey2,
63
+ hoverColor: _colors.default.blue,
64
+ disableHoverColor: false
65
+ },
66
+ confirmed: {
67
+ icon: /*#__PURE__*/_react.default.createElement(_documentIcon.ReactComponent, {
68
+ width: 12,
69
+ height: 12
70
+ }),
71
+ iconColor: _colors.default.grey2,
72
+ hoverColor: _colors.default.blue,
73
+ disableHoverColor: false
74
+ },
75
+ declined: {
76
+ icon: (iconColor, hoverColor, disableHoverColor) => /*#__PURE__*/_react.default.createElement(DeclinedIcon, {
77
+ iconColor: iconColor,
78
+ hoverColor: hoverColor,
79
+ disableHoverColor: disableHoverColor
80
+ }),
81
+ iconColor: _colors.default.grey2,
82
+ hoverColor: _colors.default.darkRed,
83
+ disableHoverColor: false
84
+ },
85
+ paid: {
86
+ icon: (iconColor, hoverColor, disableHoverColor) => /*#__PURE__*/_react.default.createElement(PaidIcon, {
87
+ iconColor: iconColor,
88
+ hoverColor: hoverColor,
89
+ disableHoverColor: disableHoverColor
90
+ }),
91
+ iconColor: _colors.default.grey2,
92
+ hoverColor: _colors.default.freshGreen,
93
+ disableHoverColor: false
94
+ }
95
+ };
96
+ const StatusTag = _ref3 => {
97
+ var _variantData$disableH;
98
+ let {
99
+ variant,
100
+ icon,
101
+ text,
102
+ tooltip,
103
+ tooltipProps,
104
+ iconColor,
105
+ hoverColor,
106
+ disableHoverColor,
107
+ minWidth,
108
+ className,
109
+ containerStyle,
110
+ iconStyle,
111
+ textStyle,
112
+ onClick,
113
+ center
114
+ } = _ref3,
115
+ props = _objectWithoutProperties(_ref3, _excluded);
116
+ // If variant is provided, use its configuration (but allow overrides)
117
+ const variantData = variant ? variantConfig[variant] : null;
118
+
119
+ // Determine colors - variant config can be overridden by props
120
+ const finalIconColor = iconColor !== undefined ? iconColor : (variantData === null || variantData === void 0 ? void 0 : variantData.iconColor) || _colors.default.grey2;
121
+ const finalHoverColor = hoverColor !== undefined ? hoverColor : variantData === null || variantData === void 0 ? void 0 : variantData.hoverColor;
122
+ const finalDisableHoverColor = disableHoverColor !== undefined ? disableHoverColor : (_variantData$disableH = variantData === null || variantData === void 0 ? void 0 : variantData.disableHoverColor) !== null && _variantData$disableH !== void 0 ? _variantData$disableH : false;
123
+
124
+ // Determine which icon to use - handle function icons (for paid/declined)
125
+ let finalIcon = null;
126
+ if (icon) {
127
+ finalIcon = icon;
128
+ } else if (variantData !== null && variantData !== void 0 && variantData.icon) {
129
+ if (typeof variantData.icon === 'function') {
130
+ // Icon is a function (paid/declined) - pass color props
131
+ finalIcon = variantData.icon(finalIconColor, finalHoverColor, finalDisableHoverColor);
132
+ } else {
133
+ // Icon is a React element (pending/initiated/confirmed)
134
+ finalIcon = variantData.icon;
135
+ }
136
+ }
137
+ const content = /*#__PURE__*/_react.default.createElement(_StatusTag.StatusTagContainer, _extends({
138
+ className: className,
139
+ style: containerStyle,
140
+ onClick: onClick,
141
+ hasClick: !!onClick
142
+ }, props), /*#__PURE__*/_react.default.createElement(_StatusTag.StatusTagWrapper, {
143
+ minWidth: minWidth,
144
+ center: center
145
+ }, finalIcon && /*#__PURE__*/_react.default.createElement(_StatusTag.IconWrapper, {
146
+ iconColor: finalIconColor,
147
+ hoverColor: finalHoverColor,
148
+ disableHoverColor: finalDisableHoverColor,
149
+ style: iconStyle,
150
+ isCustomIcon: typeof (variantData === null || variantData === void 0 ? void 0 : variantData.icon) === 'function'
151
+ }, finalIcon), text && /*#__PURE__*/_react.default.createElement(_StatusTag.StatusText, {
152
+ style: textStyle
153
+ }, text)));
154
+
155
+ // Wrap with InfoIcon tooltip if tooltip is provided
156
+ if (tooltip) {
157
+ return /*#__PURE__*/_react.default.createElement(_InfoIcon.default, _extends({
158
+ title: tooltip,
159
+ position: "top",
160
+ noIcon: true,
161
+ noMarginLeft: true,
162
+ noMarginRight: true
163
+ }, tooltipProps), content);
164
+ }
165
+ return content;
166
+ };
167
+ exports.StatusTag = StatusTag;
168
+ var _default = exports.default = StatusTag;
package/dist/components/StatusTag/StatusTag.stories.js ADDED
@@ -0,0 +1,262 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = exports.WithTooltips = exports.WithHoverColor = exports.UsingChildren = exports.TableUniformity = exports.Default = exports.CustomIcon = exports.Clickable = exports.AllVariants = exports.AllStatesInRow = void 0;
7
+ var _react = _interopRequireDefault(require("react"));
8
+ var _StatusTag = _interopRequireDefault(require("./StatusTag"));
9
+ var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
10
+ var _Icon = require("../Icon/Icon.style");
11
+ var _colors = _interopRequireDefault(require("../../styles/colors"));
12
+ var _global = _interopRequireDefault(require("../../styles/global"));
13
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
14
+ var _default = exports.default = {
15
+ title: 'Components Library/StatusTag',
16
+ component: _StatusTag.default,
17
+ decorators: [Story => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(Story, null))],
18
+ argTypes: {
19
+ variant: {
20
+ control: {
21
+ type: 'select'
22
+ },
23
+ options: ['pending', 'initiated', 'confirmed', 'declined', 'paid', null],
24
+ description: 'Built-in variant (uses default icon and colors)'
25
+ },
26
+ text: {
27
+ control: 'text',
28
+ description: 'Text to display next to the icon'
29
+ },
30
+ icon: {
31
+ control: false,
32
+ description: 'Custom icon component (overrides variant icon)'
33
+ },
34
+ tooltip: {
35
+ control: 'text',
36
+ description: 'Tooltip text (uses InfoIcon)'
37
+ },
38
+ iconColor: {
39
+ control: 'color',
40
+ description: 'Default icon color (defaults to grey)'
41
+ },
42
+ hoverColor: {
43
+ control: 'color',
44
+ description: 'Icon color on hover'
45
+ },
46
+ disableHoverColor: {
47
+ control: 'boolean',
48
+ description: 'Disable hover color change (for pre-colored icons)',
49
+ defaultValue: false
50
+ },
51
+ minWidth: {
52
+ control: 'text',
53
+ description: 'Minimum width (for table uniformity)'
54
+ },
55
+ onClick: {
56
+ action: 'clicked',
57
+ description: 'Click handler'
58
+ }
59
+ }
60
+ }; // Default example
61
+ const Default = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
62
+ variant: "pending",
63
+ text: "Pending"
64
+ }));
65
+
66
+ // All variants
67
+ exports.Default = Default;
68
+ const AllVariants = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
69
+ style: {
70
+ display: 'flex',
71
+ flexDirection: 'column',
72
+ gap: '16px'
73
+ }
74
+ }, /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
75
+ variant: "pending",
76
+ text: "Pending"
77
+ }), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
78
+ variant: "initiated",
79
+ text: "Initiated"
80
+ }), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
81
+ variant: "confirmed",
82
+ text: "Confirmed"
83
+ }), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
84
+ variant: "declined",
85
+ text: "Declined"
86
+ }), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
87
+ variant: "paid",
88
+ text: "Paid"
89
+ })));
90
+
91
+ // Using children instead of text prop
92
+ exports.AllVariants = AllVariants;
93
+ const UsingChildren = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
94
+ style: {
95
+ display: 'flex',
96
+ flexDirection: 'column',
97
+ gap: '16px'
98
+ }
99
+ }, /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
100
+ variant: "pending"
101
+ }, "Pending"), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
102
+ variant: "initiated"
103
+ }, "Initiated"), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
104
+ variant: "paid"
105
+ }, "Paid")));
106
+
107
+ // With hover color change
108
+ exports.UsingChildren = UsingChildren;
109
+ const WithHoverColor = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
110
+ style: {
111
+ display: 'flex',
112
+ flexDirection: 'column',
113
+ gap: '16px'
114
+ }
115
+ }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", {
116
+ style: {
117
+ marginBottom: '8px',
118
+ fontSize: '14px'
119
+ }
120
+ }, "Pending (hover to see color change)"), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
121
+ variant: "pending",
122
+ text: "Pending"
123
+ })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", {
124
+ style: {
125
+ marginBottom: '8px',
126
+ fontSize: '14px'
127
+ }
128
+ }, "Custom hover color"), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
129
+ variant: "pending",
130
+ text: "Custom Hover",
131
+ hoverColor: _colors.default.blue
132
+ }))));
133
+
134
+ // Custom icon
135
+ exports.WithHoverColor = WithHoverColor;
136
+ const CustomIcon = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
137
+ style: {
138
+ display: 'flex',
139
+ flexDirection: 'column',
140
+ gap: '16px'
141
+ }
142
+ }, /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
143
+ icon: /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
144
+ icon: _Icon.iconsMap.check,
145
+ size: 12
146
+ }),
147
+ text: "Custom Icon",
148
+ hoverColor: _colors.default.freshGreen
149
+ }), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
150
+ icon: /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
151
+ icon: _Icon.iconsMap.warning,
152
+ size: 12
153
+ }),
154
+ text: "Warning",
155
+ hoverColor: _colors.default.warningOrange
156
+ })));
157
+
158
+ // With tooltips
159
+ exports.CustomIcon = CustomIcon;
160
+ const WithTooltips = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
161
+ style: {
162
+ display: 'flex',
163
+ flexDirection: 'column',
164
+ gap: '16px'
165
+ }
166
+ }, /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
167
+ variant: "pending",
168
+ text: "Pending",
169
+ tooltip: "This transaction is awaiting confirmation"
170
+ }), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
171
+ variant: "initiated",
172
+ text: "Initiated",
173
+ tooltip: "Transaction has been initiated and is in progress"
174
+ }), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
175
+ variant: "paid",
176
+ text: "Paid",
177
+ tooltip: "Payment has been successfully completed"
178
+ })));
179
+
180
+ // Table uniformity
181
+ exports.WithTooltips = WithTooltips;
182
+ const TableUniformity = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
183
+ style: {
184
+ display: 'flex',
185
+ flexDirection: 'column',
186
+ gap: '8px'
187
+ }
188
+ }, /*#__PURE__*/_react.default.createElement("h4", {
189
+ style: {
190
+ marginBottom: '8px',
191
+ fontSize: '14px'
192
+ }
193
+ }, "All tags with same minWidth (for table columns)"), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
194
+ variant: "pending",
195
+ text: "Pending",
196
+ minWidth: "120px",
197
+ center: true
198
+ }), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
199
+ variant: "initiated",
200
+ text: "Initiated",
201
+ minWidth: "120px",
202
+ center: true
203
+ }), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
204
+ variant: "confirmed",
205
+ text: "Confirmed",
206
+ minWidth: "120px",
207
+ center: true
208
+ }), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
209
+ variant: "declined",
210
+ text: "Declined",
211
+ minWidth: "120px",
212
+ center: true
213
+ }), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
214
+ variant: "paid",
215
+ text: "Paid",
216
+ minWidth: "120px",
217
+ center: true
218
+ })));
219
+
220
+ // Clickable
221
+ exports.TableUniformity = TableUniformity;
222
+ const Clickable = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
223
+ style: {
224
+ display: 'flex',
225
+ flexDirection: 'column',
226
+ gap: '16px'
227
+ }
228
+ }, /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
229
+ variant: "pending",
230
+ text: "Clickable Pending",
231
+ onClick: () => alert('Clicked!')
232
+ }), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
233
+ variant: "paid",
234
+ text: "Clickable Paid",
235
+ onClick: () => alert('Paid clicked!')
236
+ })));
237
+
238
+ // All states in a row
239
+ exports.Clickable = Clickable;
240
+ const AllStatesInRow = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
241
+ style: {
242
+ display: 'flex',
243
+ flexWrap: 'wrap',
244
+ gap: '12px'
245
+ }
246
+ }, /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
247
+ variant: "pending",
248
+ text: "Pending"
249
+ }), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
250
+ variant: "initiated",
251
+ text: "Initiated"
252
+ }), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
253
+ variant: "confirmed",
254
+ text: "Confirmed"
255
+ }), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
256
+ variant: "declined",
257
+ text: "Declined"
258
+ }), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
259
+ variant: "paid",
260
+ text: "Paid"
261
+ })));
262
+ exports.AllStatesInRow = AllStatesInRow;
package/dist/components/StatusTag/StatusTag.styles.js ADDED
@@ -0,0 +1,37 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.StatusText = exports.StatusTagWrapper = exports.StatusTagContainer = exports.PaidIconWrapper = exports.IconWrapper = exports.DeclinedIconWrapper = void 0;
7
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
8
+ var _colors = _interopRequireDefault(require("../../styles/colors"));
9
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
10
+ const StatusTagContainer = exports.StatusTagContainer = _styledComponents.default.div.withConfig({
11
+ displayName: "StatusTagstyles__StatusTagContainer",
12
+ componentId: "sc-24azs1-0"
13
+ })(["display:inline-flex;cursor:", ";transition:opacity 0.2s ease;&:hover{opacity:", ";}"], props => props.hasClick ? 'pointer' : 'default', props => props.hasClick ? 0.8 : 1);
14
+ const StatusTagWrapper = exports.StatusTagWrapper = _styledComponents.default.div.withConfig({
15
+ displayName: "StatusTagstyles__StatusTagWrapper",
16
+ componentId: "sc-24azs1-1"
17
+ })(["display:flex;align-items:center;gap:6px;padding:6px 10px;background-color:transparent;border:1px solid ", ";border-radius:4px;white-space:nowrap;min-width:", ";justify-content:", ";"], _colors.default.lightGrey, props => props.minWidth || 'auto', props => props.center ? 'center' : 'flex-start');
18
+ const IconWrapper = exports.IconWrapper = _styledComponents.default.div.withConfig({
19
+ displayName: "StatusTagstyles__IconWrapper",
20
+ componentId: "sc-24azs1-2"
21
+ })(["display:flex;align-items:center;justify-content:center;flex-shrink:0;width:12px;height:12px;color:", ";transition:color 0.2s ease;svg{width:100%;height:100%;display:block;}", " ", ""], props => props.iconColor || _colors.default.grey2, props => !props.isCustomIcon && "\n svg path,\n svg circle,\n svg rect,\n svg line {\n ".concat(!props.disableHoverColor ? "fill: currentColor;" : '', "\n }\n "), props => !props.disableHoverColor && props.hoverColor && "\n ".concat(StatusTagContainer, ":hover & {\n color: ").concat(props.hoverColor, ";\n }\n "));
22
+ const StatusText = exports.StatusText = _styledComponents.default.span.withConfig({
23
+ displayName: "StatusTagstyles__StatusText",
24
+ componentId: "sc-24azs1-3"
25
+ })(["font-size:12px;font-weight:600;line-height:18px;color:", ";letter-spacing:0.6px;"], _colors.default.black);
26
+
27
+ // Paid icon wrapper (check + green circle)
28
+ const PaidIconWrapper = exports.PaidIconWrapper = _styledComponents.default.div.withConfig({
29
+ displayName: "StatusTagstyles__PaidIconWrapper",
30
+ componentId: "sc-24azs1-4"
31
+ })(["width:12px;height:12px;border-radius:50%;background-color:", ";display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background-color 0.2s ease;svg{width:8px;height:8px;}svg path{stroke:", ";}", ""], props => props.iconColor || _colors.default.grey2, _colors.default.white, props => !props.disableHoverColor && props.hoverColor && "\n ".concat(StatusTagContainer, ":hover & {\n background-color: ").concat(props.hoverColor, ";\n }\n "));
32
+
33
+ // Declined icon wrapper (cross + red circle)
34
+ const DeclinedIconWrapper = exports.DeclinedIconWrapper = _styledComponents.default.div.withConfig({
35
+ displayName: "StatusTagstyles__DeclinedIconWrapper",
36
+ componentId: "sc-24azs1-5"
37
+ })(["width:12px;height:12px;border-radius:50%;background-color:", ";display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background-color 0.2s ease;svg{width:6px;height:6px;}svg path{stroke:", ";}", ""], props => props.iconColor || _colors.default.grey2, _colors.default.white, props => !props.disableHoverColor && props.hoverColor && "\n ".concat(StatusTagContainer, ":hover & {\n background-color: ").concat(props.hoverColor, ";\n }\n "));
package/dist/index.js CHANGED
@@ -608,6 +608,17 @@ Object.keys(_NewVentureModal).forEach(function (key) {
608
608
  }
609
609
  });
610
610
  });
611
+ var _SideModal = require("./components/Modal/SideModal");
612
+ Object.keys(_SideModal).forEach(function (key) {
613
+ if (key === "default" || key === "__esModule") return;
614
+ if (key in exports && exports[key] === _SideModal[key]) return;
615
+ Object.defineProperty(exports, key, {
616
+ enumerable: true,
617
+ get: function () {
618
+ return _SideModal[key];
619
+ }
620
+ });
621
+ });
611
622
  var _MultiProgressBar = require("./components/MultiProgressBar/MultiProgressBar");
612
623
  Object.keys(_MultiProgressBar).forEach(function (key) {
613
624
  if (key === "default" || key === "__esModule") return;
@@ -1443,4 +1454,15 @@ Object.keys(_TimelineStep).forEach(function (key) {
1443
1454
  return _TimelineStep[key];
1444
1455
  }
1445
1456
  });
1457
+ });
1458
+ var _StatusTag = require("./components/StatusTag/StatusTag");
1459
+ Object.keys(_StatusTag).forEach(function (key) {
1460
+ if (key === "default" || key === "__esModule") return;
1461
+ if (key in exports && exports[key] === _StatusTag[key]) return;
1462
+ Object.defineProperty(exports, key, {
1463
+ enumerable: true,
1464
+ get: function () {
1465
+ return _StatusTag[key];
1466
+ }
1467
+ });
1446
1468
  });
package/dist/static/images/document-icon.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M2.08578 1.58578C1.5 2.17157 1.5 3.11438 1.5 5V7C1.5 8.8856 1.5 9.82845 2.08578 10.4142C2.67157 11 3.61438 11 5.5 11H6.5C8.3856 11 9.32845 11 9.9142 10.4142C10.5 9.82845 10.5 8.8856 10.5 7V5C10.5 3.11438 10.5 2.17157 9.9142 1.58578C9.32845 1 8.3856 1 6.5 1H5.5C3.61438 1 2.67157 1 2.08578 1.58578ZM4 4.625C3.7929 4.625 3.625 4.79289 3.625 5C3.625 5.2071 3.7929 5.375 4 5.375H8C8.2071 5.375 8.375 5.2071 8.375 5C8.375 4.79289 8.2071 4.625 8 4.625H4ZM4 6.625C3.7929 6.625 3.625 6.7929 3.625 7C3.625 7.2071 3.7929 7.375 4 7.375H6.5C6.7071 7.375 6.875 7.2071 6.875 7C6.875 6.7929 6.7071 6.625 6.5 6.625H4Z" fill="#0050CA"/>
3
+ </svg>
package/dist/static/images/sent-icon.svg ADDED
@@ -0,0 +1,10 @@
1
+ <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <g clip-path="url(#clip0_4481_24713)">
3
+ <path d="M11.9389 0.491782C11.8855 0.44493 11.8095 0.43406 11.7451 0.463943L0.103795 5.8728C0.0411228 5.90193 0.000764077 5.96446 1.07135e-05 6.03356C-0.00074265 6.10265 0.0382887 6.16604 0.100352 6.1965L3.39481 7.81329C3.45522 7.84296 3.52726 7.83625 3.58121 7.79593L6.78433 5.40188L4.26975 7.98843C4.23388 8.02534 4.21558 8.07589 4.21953 8.12719L4.46989 11.3878C4.47545 11.46 4.52389 11.5218 4.59273 11.5444C4.61113 11.5505 4.63004 11.5534 4.64873 11.5534C4.69999 11.5534 4.74986 11.5314 4.78455 11.4912L6.53314 9.46498L8.69475 10.4978C8.74168 10.5202 8.79599 10.5212 8.84367 10.5004C8.89135 10.4797 8.92765 10.4393 8.94322 10.3897L11.9918 0.680374C12.0131 0.612571 11.9923 0.538634 11.9389 0.491782Z" fill="#0050CA"/>
4
+ </g>
5
+ <defs>
6
+ <clipPath id="clip0_4481_24713">
7
+ <rect width="12" height="12" fill="white"/>
8
+ </clipPath>
9
+ </defs>
10
+ </svg>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stokr/components-library",
3
- "version": "2.3.65-beta.3",
3
+ "version": "2.3.65-beta.4",
4
4
  "description": "STOKR - Components Library",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",