@bikdotai/bik-component-library 0.0.10 → 0.0.11-beta.1

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.
@@ -1,5 +1,4 @@
1
1
  /// <reference types="react" />
2
- import 'bootstrap/dist/css/bootstrap.min.css';
3
2
  export interface ProgressBarProps {
4
3
  completed: number;
5
4
  isAnimated: boolean;
@@ -1,636 +1,4 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("styled-components"),o=require("../../constants/Theme.js");function a(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}const i=a(t).default.div`
2
- :root {
3
- --toastify-color-light: #fff;
4
- --toastify-color-dark: #121212;
5
- --toastify-color-info: #3498db;
6
- --toastify-color-success: #07bc0c;
7
- --toastify-color-warning: #f1c40f;
8
- --toastify-color-error: #e74c3c;
9
- --toastify-color-transparent: #ffffffb3;
10
- --toastify-icon-color-info: var(--toastify-color-info);
11
- --toastify-icon-color-success: var(--toastify-color-success);
12
- --toastify-icon-color-warning: var(--toastify-color-warning);
13
- --toastify-icon-color-error: var(--toastify-color-error);
14
- --toastify-toast-width: 320px;
15
- --toastify-toast-background: #fff;
16
- --toastify-toast-min-height: 64px;
17
- --toastify-toast-max-height: 800px;
18
- --toastify-font-family: sans-serif;
19
- --toastify-z-index: 9999;
20
- --toastify-text-color-light: #757575;
21
- --toastify-text-color-dark: #fff;
22
- --toastify-text-color-info: #fff;
23
- --toastify-text-color-success: #fff;
24
- --toastify-text-color-warning: #fff;
25
- --toastify-text-color-error: #fff;
26
- --toastify-spinner-color: #616161;
27
- --toastify-spinner-color-empty-area: #e0e0e0;
28
- --toastify-color-progress-light: linear-gradient(
29
- 90deg,
30
- #4cd964,
31
- #5ac8fa,
32
- #007aff,
33
- #34aadc,
34
- #5856d6,
35
- #ff2d55
36
- );
37
- --toastify-color-progress-dark: #bb86fc;
38
- --toastify-color-progress-info: var(--toastify-color-info);
39
- --toastify-color-progress-success: var(--toastify-color-success);
40
- --toastify-color-progress-warning: var(--toastify-color-warning);
41
- --toastify-color-progress-error: var(--toastify-color-error);
42
- }
43
- .Toastify__toast-container {
44
- box-sizing: border-box;
45
- color: #fff;
46
- padding: 4px;
47
- position: fixed;
48
- -webkit-transform: translateZ(var(--toastify-z-index));
49
- width: var(--toastify-toast-width);
50
- z-index: var(--toastify-z-index);
51
- }
52
- .Toastify__toast-container--top-left {
53
- left: 1em;
54
- top: 1em;
55
- }
56
- .Toastify__toast-container--top-center {
57
- left: 50%;
58
- top: 1em;
59
- transform: translateX(-50%);
60
- }
61
- .Toastify__toast-container--top-right {
62
- right: 1em;
63
- top: 1em;
64
- }
65
- .Toastify__toast-container--bottom-left {
66
- bottom: 1em;
67
- left: 1em;
68
- }
69
- .Toastify__toast-container--bottom-center {
70
- bottom: 1em;
71
- left: 50%;
72
- transform: translateX(-50%);
73
- }
74
- .Toastify__toast-container--bottom-right {
75
- bottom: 1em;
76
- right: 1em;
77
- }
78
- @media only screen and (max-width: 480px) {
79
- .Toastify__toast-container {
80
- left: 0;
81
- margin: 0;
82
- padding: 0;
83
- width: 100vw;
84
- }
85
- .Toastify__toast-container--top-center,
86
- .Toastify__toast-container--top-left,
87
- .Toastify__toast-container--top-right {
88
- top: 0;
89
- transform: translateX(0);
90
- }
91
- .Toastify__toast-container--bottom-center,
92
- .Toastify__toast-container--bottom-left,
93
- .Toastify__toast-container--bottom-right {
94
- bottom: 0;
95
- transform: translateX(0);
96
- }
97
- .Toastify__toast-container--rtl {
98
- left: auto;
99
- right: 0;
100
- }
101
- }
102
- .Toastify__toast {
103
- -ms-flex-pack: justify;
104
- border-radius: 4px;
105
- box-shadow: 0 1px 10px 0 #0000001a, 0 2px 15px 0 #0000000d;
106
- box-sizing: border-box;
107
- cursor: default;
108
- direction: ltr;
109
- display: -ms-flexbox;
110
- display: flex;
111
- font-family: var(--toastify-font-family);
112
- justify-content: space-between;
113
- margin-bottom: 1rem;
114
- max-height: var(--toastify-toast-max-height);
115
- min-height: var(--toastify-toast-min-height);
116
- overflow: hidden;
117
- padding: 8px;
118
- position: relative;
119
- z-index: 0;
120
- }
121
- .Toastify__toast--rtl {
122
- direction: rtl;
123
- }
124
- .Toastify__toast--close-on-click {
125
- cursor: pointer;
126
- }
127
- .Toastify__toast-body {
128
- -ms-flex-align: center;
129
- align-items: center;
130
- display: -ms-flexbox;
131
- display: flex;
132
- -ms-flex: 1 1 auto;
133
- flex: 1 1 auto;
134
- margin: auto 0;
135
- padding: 6px;
136
- }
137
- .Toastify__toast-body > div:last-child {
138
- -ms-flex: 1;
139
- flex: 1;
140
- word-break: break-word;
141
- }
142
- .Toastify__toast-icon {
143
- -webkit-margin-end: 10px;
144
- -ms-flex-negative: 0;
145
- display: -ms-flexbox;
146
- display: flex;
147
- flex-shrink: 0;
148
- margin-inline-end: 10px;
149
- width: 20px;
150
- }
151
- .Toastify--animate {
152
- animation-duration: 0.7s;
153
- animation-fill-mode: both;
154
- }
155
- .Toastify--animate-icon {
156
- animation-duration: 0.3s;
157
- animation-fill-mode: both;
158
- }
159
- @media only screen and (max-width: 480px) {
160
- .Toastify__toast {
161
- border-radius: 0;
162
- margin-bottom: 0;
163
- }
164
- }
165
- .Toastify__toast-theme--dark {
166
- background: var(--toastify-color-dark);
167
- color: var(--toastify-text-color-dark);
168
- }
169
- .Toastify__toast-theme--colored.Toastify__toast--default,
170
- .Toastify__toast-theme--light {
171
- background: var(--toastify-color-light);
172
- color: var(--toastify-text-color-light);
173
- }
174
- .Toastify__toast-theme--colored.Toastify__toast--info {
175
- background: var(--toastify-color-info);
176
- color: var(--toastify-text-color-info);
177
- }
178
- .Toastify__toast-theme--colored.Toastify__toast--success {
179
- background: var(--toastify-color-success);
180
- color: var(--toastify-text-color-success);
181
- }
182
- .Toastify__toast-theme--colored.Toastify__toast--warning {
183
- background: var(--toastify-color-warning);
184
- color: var(--toastify-text-color-warning);
185
- }
186
- .Toastify__toast-theme--colored.Toastify__toast--error {
187
- background: var(--toastify-color-error);
188
- color: var(--toastify-text-color-error);
189
- }
190
- .Toastify__progress-bar-theme--light {
191
- background: var(--toastify-color-progress-light);
192
- }
193
- .Toastify__progress-bar-theme--dark {
194
- background: var(--toastify-color-progress-dark);
195
- }
196
- .Toastify__progress-bar--info {
197
- background: var(--toastify-color-progress-info);
198
- }
199
- .Toastify__progress-bar--success {
200
- background: var(--toastify-color-progress-success);
201
- }
202
- .Toastify__progress-bar--warning {
203
- background: var(--toastify-color-progress-warning);
204
- }
205
- .Toastify__progress-bar--error {
206
- background: var(--toastify-color-progress-error);
207
- }
208
- .Toastify__progress-bar-theme--colored.Toastify__progress-bar--error,
209
- .Toastify__progress-bar-theme--colored.Toastify__progress-bar--info,
210
- .Toastify__progress-bar-theme--colored.Toastify__progress-bar--success,
211
- .Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning {
212
- background: var(--toastify-color-transparent);
213
- }
214
- .Toastify__close-button {
215
- -ms-flex-item-align: start;
216
- align-self: flex-start;
217
- background: #0000;
218
- border: none;
219
- color: #fff;
220
- cursor: pointer;
221
- opacity: 0.7;
222
- outline: none;
223
- padding: 0;
224
- transition: 0.3s ease;
225
- }
226
- .Toastify__close-button--light {
227
- color: #000;
228
- opacity: 0.3;
229
- }
230
- .Toastify__close-button > svg {
231
- fill: currentColor;
232
- height: 16px;
233
- width: 14px;
234
- }
235
- .Toastify__close-button:focus,
236
- .Toastify__close-button:hover {
237
- opacity: 1;
238
- }
239
- @keyframes Toastify__trackProgress {
240
- 0% {
241
- transform: scaleX(1);
242
- }
243
- to {
244
- transform: scaleX(0);
245
- }
246
- }
247
- .Toastify__progress-bar {
248
- bottom: 0;
249
- height: 5px;
250
- left: 0;
251
- opacity: 0.7;
252
- position: absolute;
253
- transform-origin: left;
254
- width: 100%;
255
- z-index: var(--toastify-z-index);
256
- }
257
- .Toastify__progress-bar--animated {
258
- animation: Toastify__trackProgress linear 1 forwards;
259
- }
260
- .Toastify__progress-bar--controlled {
261
- transition: transform 0.2s;
262
- }
263
- .Toastify__progress-bar--rtl {
264
- left: auto;
265
- right: 0;
266
- transform-origin: right;
267
- }
268
- .Toastify__spinner {
269
- animation: Toastify__spin 0.65s linear infinite;
270
- border: 2px solid;
271
- border-color: var(--toastify-spinner-color-empty-area);
272
- border-radius: 100%;
273
- border-right-color: var(--toastify-spinner-color);
274
- box-sizing: border-box;
275
- height: 20px;
276
- width: 20px;
277
- }
278
- @keyframes Toastify__bounceInRight {
279
- 0%,
280
- 60%,
281
- 75%,
282
- 90%,
283
- to {
284
- animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
285
- }
286
- 0% {
287
- opacity: 0;
288
- transform: translate3d(3000px, 0, 0);
289
- }
290
- 60% {
291
- opacity: 1;
292
- transform: translate3d(-25px, 0, 0);
293
- }
294
- 75% {
295
- transform: translate3d(10px, 0, 0);
296
- }
297
- 90% {
298
- transform: translate3d(-5px, 0, 0);
299
- }
300
- to {
301
- transform: none;
302
- }
303
- }
304
- @keyframes Toastify__bounceOutRight {
305
- 20% {
306
- opacity: 1;
307
- transform: translate3d(-20px, 0, 0);
308
- }
309
- to {
310
- opacity: 0;
311
- transform: translate3d(2000px, 0, 0);
312
- }
313
- }
314
- @keyframes Toastify__bounceInLeft {
315
- 0%,
316
- 60%,
317
- 75%,
318
- 90%,
319
- to {
320
- animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
321
- }
322
- 0% {
323
- opacity: 0;
324
- transform: translate3d(-3000px, 0, 0);
325
- }
326
- 60% {
327
- opacity: 1;
328
- transform: translate3d(25px, 0, 0);
329
- }
330
- 75% {
331
- transform: translate3d(-10px, 0, 0);
332
- }
333
- 90% {
334
- transform: translate3d(5px, 0, 0);
335
- }
336
- to {
337
- transform: none;
338
- }
339
- }
340
- @keyframes Toastify__bounceOutLeft {
341
- 20% {
342
- opacity: 1;
343
- transform: translate3d(20px, 0, 0);
344
- }
345
- to {
346
- opacity: 0;
347
- transform: translate3d(-2000px, 0, 0);
348
- }
349
- }
350
- @keyframes Toastify__bounceInUp {
351
- 0%,
352
- 60%,
353
- 75%,
354
- 90%,
355
- to {
356
- animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
357
- }
358
- 0% {
359
- opacity: 0;
360
- transform: translate3d(0, 3000px, 0);
361
- }
362
- 60% {
363
- opacity: 1;
364
- transform: translate3d(0, -20px, 0);
365
- }
366
- 75% {
367
- transform: translate3d(0, 10px, 0);
368
- }
369
- 90% {
370
- transform: translate3d(0, -5px, 0);
371
- }
372
- to {
373
- transform: translateZ(0);
374
- }
375
- }
376
- @keyframes Toastify__bounceOutUp {
377
- 20% {
378
- transform: translate3d(0, -10px, 0);
379
- }
380
- 40%,
381
- 45% {
382
- opacity: 1;
383
- transform: translate3d(0, 20px, 0);
384
- }
385
- to {
386
- opacity: 0;
387
- transform: translate3d(0, -2000px, 0);
388
- }
389
- }
390
- @keyframes Toastify__bounceInDown {
391
- 0%,
392
- 60%,
393
- 75%,
394
- 90%,
395
- to {
396
- animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
397
- }
398
- 0% {
399
- opacity: 0;
400
- transform: translate3d(0, -3000px, 0);
401
- }
402
- 60% {
403
- opacity: 1;
404
- transform: translate3d(0, 25px, 0);
405
- }
406
- 75% {
407
- transform: translate3d(0, -10px, 0);
408
- }
409
- 90% {
410
- transform: translate3d(0, 5px, 0);
411
- }
412
- to {
413
- transform: none;
414
- }
415
- }
416
- @keyframes Toastify__bounceOutDown {
417
- 20% {
418
- transform: translate3d(0, 10px, 0);
419
- }
420
- 40%,
421
- 45% {
422
- opacity: 1;
423
- transform: translate3d(0, -20px, 0);
424
- }
425
- to {
426
- opacity: 0;
427
- transform: translate3d(0, 2000px, 0);
428
- }
429
- }
430
- .Toastify__bounce-enter--bottom-left,
431
- .Toastify__bounce-enter--top-left {
432
- animation-name: Toastify__bounceInLeft;
433
- }
434
- .Toastify__bounce-enter--bottom-right,
435
- .Toastify__bounce-enter--top-right {
436
- animation-name: Toastify__bounceInRight;
437
- }
438
- .Toastify__bounce-enter--top-center {
439
- animation-name: Toastify__bounceInDown;
440
- }
441
- .Toastify__bounce-enter--bottom-center {
442
- animation-name: Toastify__bounceInUp;
443
- }
444
- .Toastify__bounce-exit--bottom-left,
445
- .Toastify__bounce-exit--top-left {
446
- animation-name: Toastify__bounceOutLeft;
447
- }
448
- .Toastify__bounce-exit--bottom-right,
449
- .Toastify__bounce-exit--top-right {
450
- animation-name: Toastify__bounceOutRight;
451
- }
452
- .Toastify__bounce-exit--top-center {
453
- animation-name: Toastify__bounceOutUp;
454
- }
455
- .Toastify__bounce-exit--bottom-center {
456
- animation-name: Toastify__bounceOutDown;
457
- }
458
- @keyframes Toastify__zoomIn {
459
- 0% {
460
- opacity: 0;
461
- transform: scale3d(0.3, 0.3, 0.3);
462
- }
463
- 50% {
464
- opacity: 1;
465
- }
466
- }
467
- @keyframes Toastify__zoomOut {
468
- 0% {
469
- opacity: 1;
470
- }
471
- 50% {
472
- opacity: 0;
473
- transform: scale3d(0.3, 0.3, 0.3);
474
- }
475
- to {
476
- opacity: 0;
477
- }
478
- }
479
- .Toastify__zoom-enter {
480
- animation-name: Toastify__zoomIn;
481
- }
482
- .Toastify__zoom-exit {
483
- animation-name: Toastify__zoomOut;
484
- }
485
- @keyframes Toastify__flipIn {
486
- 0% {
487
- animation-timing-function: ease-in;
488
- opacity: 0;
489
- transform: perspective(400px) rotateX(90deg);
490
- }
491
- 40% {
492
- animation-timing-function: ease-in;
493
- transform: perspective(400px) rotateX(-20deg);
494
- }
495
- 60% {
496
- opacity: 1;
497
- transform: perspective(400px) rotateX(10deg);
498
- }
499
- 80% {
500
- transform: perspective(400px) rotateX(-5deg);
501
- }
502
- to {
503
- transform: perspective(400px);
504
- }
505
- }
506
- @keyframes Toastify__flipOut {
507
- 0% {
508
- transform: perspective(400px);
509
- }
510
- 30% {
511
- opacity: 1;
512
- transform: perspective(400px) rotateX(-20deg);
513
- }
514
- to {
515
- opacity: 0;
516
- transform: perspective(400px) rotateX(90deg);
517
- }
518
- }
519
- .Toastify__flip-enter {
520
- animation-name: Toastify__flipIn;
521
- }
522
- .Toastify__flip-exit {
523
- animation-name: Toastify__flipOut;
524
- }
525
- @keyframes Toastify__slideInRight {
526
- 0% {
527
- transform: translate3d(110%, 0, 0);
528
- visibility: visible;
529
- }
530
- to {
531
- transform: translateZ(0);
532
- }
533
- }
534
- @keyframes Toastify__slideInLeft {
535
- 0% {
536
- transform: translate3d(-110%, 0, 0);
537
- visibility: visible;
538
- }
539
- to {
540
- transform: translateZ(0);
541
- }
542
- }
543
- @keyframes Toastify__slideInUp {
544
- 0% {
545
- transform: translate3d(0, 110%, 0);
546
- visibility: visible;
547
- }
548
- to {
549
- transform: translateZ(0);
550
- }
551
- }
552
- @keyframes Toastify__slideInDown {
553
- 0% {
554
- transform: translate3d(0, -110%, 0);
555
- visibility: visible;
556
- }
557
- to {
558
- transform: translateZ(0);
559
- }
560
- }
561
- @keyframes Toastify__slideOutRight {
562
- 0% {
563
- transform: translateZ(0);
564
- }
565
- to {
566
- transform: translate3d(110%, 0, 0);
567
- visibility: hidden;
568
- }
569
- }
570
- @keyframes Toastify__slideOutLeft {
571
- 0% {
572
- transform: translateZ(0);
573
- }
574
- to {
575
- transform: translate3d(-110%, 0, 0);
576
- visibility: hidden;
577
- }
578
- }
579
- @keyframes Toastify__slideOutDown {
580
- 0% {
581
- transform: translateZ(0);
582
- }
583
- to {
584
- transform: translate3d(0, 500px, 0);
585
- visibility: hidden;
586
- }
587
- }
588
- @keyframes Toastify__slideOutUp {
589
- 0% {
590
- transform: translateZ(0);
591
- }
592
- to {
593
- transform: translate3d(0, -500px, 0);
594
- visibility: hidden;
595
- }
596
- }
597
- .Toastify__slide-enter--bottom-left,
598
- .Toastify__slide-enter--top-left {
599
- animation-name: Toastify__slideInLeft;
600
- }
601
- .Toastify__slide-enter--bottom-right,
602
- .Toastify__slide-enter--top-right {
603
- animation-name: Toastify__slideInRight;
604
- }
605
- .Toastify__slide-enter--top-center {
606
- animation-name: Toastify__slideInDown;
607
- }
608
- .Toastify__slide-enter--bottom-center {
609
- animation-name: Toastify__slideInUp;
610
- }
611
- .Toastify__slide-exit--bottom-left,
612
- .Toastify__slide-exit--top-left {
613
- animation-name: Toastify__slideOutLeft;
614
- }
615
- .Toastify__slide-exit--bottom-right,
616
- .Toastify__slide-exit--top-right {
617
- animation-name: Toastify__slideOutRight;
618
- }
619
- .Toastify__slide-exit--top-center {
620
- animation-name: Toastify__slideOutUp;
621
- }
622
- .Toastify__slide-exit--bottom-center {
623
- animation-name: Toastify__slideOutDown;
624
- }
625
- @keyframes Toastify__spin {
626
- 0% {
627
- transform: rotate(0deg);
628
- }
629
- to {
630
- transform: rotate(1turn);
631
- }
632
- }
633
-
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("styled-components"),o=require("../../constants/Theme.js");function e(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}const i=e(t).default.div`
634
2
  --toastify-color-light: #fff;
635
3
  --toastify-color-dark: #121212;
636
4
  --toastify-color-info: ${o.COLORS.background.inverse};
@@ -14,3 +14,4 @@ export * from './components/image-compress';
14
14
  export * from './components/TypographyStyle';
15
15
  export * from './components/button';
16
16
  export * from './components/progress-bar';
17
+ export * from './constants/Theme';
@@ -1,5 +1,4 @@
1
1
  /// <reference types="react" />
2
- import 'bootstrap/dist/css/bootstrap.min.css';
3
2
  export interface ProgressBarProps {
4
3
  completed: number;
5
4
  isAnimated: boolean;