@eturnity/eturnity_reusable_components 8.34.0-EPDM-13618.2 → 8.34.0-EPDM-16204.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.
Files changed (21) hide show
  1. package/dist/main.es199.js +4 -6
  2. package/dist/main.es348.js +4 -4
  3. package/dist/main.es559.js +1 -1
  4. package/dist/main.es708.js +1 -1
  5. package/dist/main.es8.js +66 -103
  6. package/package.json +1 -1
  7. package/src/assets/svgIcons/electricity_tariff.svg +2 -2
  8. package/src/assets/svgIcons/suitcase.svg +2 -2
  9. package/src/assets/theme.js +63 -90
  10. package/src/components/buttons/mainButton/MainButton.stories.js +0 -6
  11. package/src/components/buttons/mainButton/index.vue +1 -9
  12. package/src/components/dropdown/Dropdown.stories.js +39 -111
  13. package/src/components/dropdown/index.vue +21 -30
  14. package/src/components/progressBar/index.vue +56 -28
  15. package/src/components/sideMenu/index.vue +27 -23
  16. package/src/components/tables/mainTable/index.vue +1 -2
  17. package/src/components/dropdown/defaultProps.js +0 -7
  18. package/src/components/dropdown/dropdown.spec.js +0 -55
  19. package/src/components/progressBar/ProgressBar.stories.js +0 -62
  20. package/src/components/progressBar/defaultProps.js +0 -5
  21. package/src/components/progressBar/progressBar.spec.js +0 -52
package/dist/main.es199.js CHANGED
@@ -2,15 +2,13 @@ import "./main.es3.js";
2
2
  import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
3
3
  const _hoisted_1 = {
4
4
  xmlns: "http://www.w3.org/2000/svg",
5
- width: "10",
6
- height: "18",
5
+ width: "13",
6
+ height: "13",
7
7
  fill: "none"
8
8
  };
9
9
  const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
10
- fill: "#263238",
11
- "fill-rule": "evenodd",
12
- d: "M9.367 9.334A.2.2 0 0 0 9.218 9h-3.05L8.299.785c.052-.202-.201-.339-.342-.184L.634 8.666A.2.2 0 0 0 .782 9h3.05l-2.13 8.215c-.053.202.2.34.341.184z",
13
- "clip-rule": "evenodd"
10
+ fill: "#000",
11
+ d: "M8.513 1c.551 0 1 .448 1 1V4.44q.076-.012.154-.013h2.23c.552 0 1 .449 1 1V12a1 1 0 0 1-1 1h-3.23v-.014q-.075.013-.155.014h-2.23l-.103-.005-.051-.008V13h-3.23l-.103-.005A1 1 0 0 1 1.897 12v-.69a1.5 1.5 0 0 0 1-.295V12h2.23V8h-.94l.332-1h.609q.079 0 .154.012V2a1 1 0 0 1 .898-.995L6.282 1zM6.281 12h2.23V2h-2.23zm3.385 0h2.23V5.428h-2.23zM1.525.657a.5.5 0 0 1 .95.316l-1.28 3.842h2.027a.7.7 0 0 1 .665.921L2.474 9.973a.5.5 0 0 1-.949-.316l1.28-3.842H.777a.7.7 0 0 1-.664-.92z"
14
12
  }, null, -1);
15
13
  const _hoisted_3 = [
16
14
  _hoisted_2
package/dist/main.es348.js CHANGED
@@ -2,13 +2,13 @@ import "./main.es3.js";
2
2
  import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
3
3
  const _hoisted_1 = {
4
4
  xmlns: "http://www.w3.org/2000/svg",
5
- width: "16",
6
- height: "15",
5
+ width: "14",
6
+ height: "13",
7
7
  fill: "none"
8
8
  };
9
9
  const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
10
- fill: "#263238",
11
- d: "M25.6 16.15h-2.1v-1.4c0-.777-.623-1.4-1.4-1.4h-4.2c-.777 0-1.4.623-1.4 1.4v1.4h-2.1c-.777 0-1.4.623-1.4 1.4v7.7c0 .777.623 1.4 1.4 1.4h11.2c.777 0 1.4-.623 1.4-1.4v-7.7c0-.777-.623-1.4-1.4-1.4m-7.7-1.4h4.2v1.4h-4.2zm7.7 7H14.4v-4.2h11.2z"
10
+ fill: "#000",
11
+ d: "M8 0a2 2 0 0 1 2 2v1h2.5l.153.008A1.5 1.5 0 0 1 14 4.5v7a1.5 1.5 0 0 1-1.347 1.492L12.5 13h-11a1.5 1.5 0 0 1-1.492-1.347L0 11.5v-7A1.5 1.5 0 0 1 1.5 3H4V2a2 2 0 0 1 2-2zM1.5 4a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.5-.5zM6 1a1 1 0 0 0-1 1v1h4V2a1 1 0 0 0-1-1z"
12
12
  }, null, -1);
13
13
  const _hoisted_3 = [
14
14
  _hoisted_2
package/dist/main.es559.js CHANGED
@@ -1,4 +1,4 @@
1
- const __vite_glob_0_172 = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxMCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik05LjM2NjUyIDkuMzM0NDVDOS40ODMyIDkuMjA1OTUgOS4zOTIwMyA5IDkuMjE4NDUgOUg2LjE2NzY3TDguMjk4OTYgMC43ODUyODlDOC4zNTE0MyAwLjU4MzA3MyA4LjA5Nzc1IDAuNDQ1OTUgNy45NTczMSAwLjYwMDYxTDAuNjMzNzg0IDguNjY1NTVDMC41MTcwOTYgOC43OTQwNSAwLjYwODI3MSA5IDAuNzgxODQ3IDlIMy44MzI2M0wxLjcwMTM0IDE3LjIxNDdDMS42NDg4NyAxNy40MTY5IDEuOTAyNTUgMTcuNTU0MSAyLjA0Mjk5IDE3LjM5OTRMOS4zNjY1MiA5LjMzNDQ1WiIgZmlsbD0iIzI2MzIzOCIvPgo8L3N2Zz4K";
1
+ const __vite_glob_0_172 = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTMiIGhlaWdodD0iMTMiIHZpZXdCb3g9IjAgMCAxMyAxMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTguNTEyNSAwLjk5OTYzNkM5LjA2NDMgMS4wMDAwNiA5LjUxMjI5IDEuNDQ3NzkgOS41MTI1IDEuOTk5NjRWNC40NDEwNEM5LjU2MjU3IDQuNDMzMzIgOS42MTQ1NyA0LjQyODM1IDkuNjY2OCA0LjQyODM1SDExLjg5NzNDMTIuNDQ5IDQuNDI4OCAxMi44OTcxIDQuODc2NTIgMTIuODk3MyA1LjQyODM1VjExLjk5OTZDMTIuODk3MSAxMi41NTE1IDEyLjQ0OTEgMTIuOTk5MiAxMS44OTczIDEyLjk5OTZIOC42NjY4VjEyLjk4NkM4LjYxNjU2IDEyLjk5MzggOC41NjQ5MiAxMi45OTk2IDguNTEyNSAxMi45OTk2SDYuMjgyMDNMNi4xNzk1IDEyLjk5NDhDNi4xNjIyOSAxMi45OTMgNi4xNDQ2OCAxMi45ODk2IDYuMTI3NzQgMTIuOTg2OVYxMi45OTk2SDIuODk3MjdMMi43OTQ3MyAxMi45OTQ4QzIuMjkwNjQgMTIuOTQzNCAxLjg5NzMzIDEyLjUxNzMgMS44OTcyNyAxMS45OTk2VjExLjMwOTJDMi4yNTk4NCAxMS4zMzQzIDIuNjEzODYgMTEuMjI2NSAyLjg5NzI3IDExLjAxNTNWMTEuOTk5Nkg1LjEyNzc0VjcuOTk5NjRINC4xODYzM0w0LjUxOTM0IDYuOTk5NjRINS4xMjc3NEM1LjE4MDExIDYuOTk5NjggNS4yMzE4NCA3LjAwNDU0IDUuMjgyMDMgNy4wMTIzM1YxLjk5OTY0QzUuMjgyMjMgMS40ODIxMyA1LjY3NTQ5IDEuMDU1ODQgNi4xNzk1IDEuMDA0NTJMNi4yODIwMyAwLjk5OTYzNkg4LjUxMjVaTTYuMjgyMDMgMTEuOTk5Nkg4LjUxMjVWMS45OTk2NEg2LjI4MjAzVjExLjk5OTZaTTkuNjY2OCAxMS45OTk2SDExLjg5NzNWNS40MjgzNUg5LjY2NjhWMTEuOTk5NlpNMS41MjUyIDAuNjU2ODYyQzEuNjEyNTIgMC4zOTQ5MDkgMS44OTYwNiAwLjI1MzE3MSAyLjE1ODAxIDAuMzQwNDU2QzIuNDE5OTggMC40Mjc3OCAyLjU2MTc0IDAuNzExMjk3IDIuNDc0NDIgMC45NzMyNjhMMS4xOTQxNCA0LjgxNTA3SDMuMjIyNDZDMy43MDAwMiA0LjgxNTE2IDQuMDM3MjMgNS4yODI4OCAzLjg4NjUzIDUuNzM1OTZMMi40NzQ0MiA5Ljk3MzI3QzIuMzg2OTUgMTAuMjM1IDIuMTAzNDYgMTAuMzc3IDEuODQxNjEgMTAuMjg5N0MxLjU3OTc5IDEwLjIwMjQgMS40MzgxMyA5LjkxODcxIDEuNTI1MiA5LjY1Njg2TDIuODA1NDcgNS44MTUwN0gwLjc3NzE1MkMwLjI5OTgxNyA1LjgxNDg2IC0wLjAzNzI5MzEgNS4zNDcwOCAwLjExMzA5IDQuODk0MTdMMS41MjUyIDAuNjU2ODYyWiIgZmlsbD0iYmxhY2siLz4KPC9zdmc+Cg==";
2
2
  export {
3
3
  __vite_glob_0_172 as default
4
4
  };
package/dist/main.es708.js CHANGED
@@ -1,4 +1,4 @@
1
- const __vite_glob_0_321 = "data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjE1IiB2aWV3Ym94PSIxMiAxMiAxNiAxNSIgd2lkdGg9IjE2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMjUuNiAxNi4xNUgyMy41VjE0Ljc1QzIzLjUgMTMuOTczIDIyLjg3NyAxMy4zNSAyMi4xIDEzLjM1SDE3LjlDMTcuMTIzIDEzLjM1IDE2LjUgMTMuOTczIDE2LjUgMTQuNzVWMTYuMTVIMTQuNEMxMy42MjMgMTYuMTUgMTMgMTYuNzczIDEzIDE3LjU1VjI1LjI1QzEzIDI2LjAyNyAxMy42MjMgMjYuNjUgMTQuNCAyNi42NUgyNS42QzI2LjM3NyAyNi42NSAyNyAyNi4wMjcgMjcgMjUuMjVWMTcuNTVDMjcgMTYuNzczIDI2LjM3NyAxNi4xNSAyNS42IDE2LjE1Wk0xNy45IDE0Ljc1SDIyLjFWMTYuMTVIMTcuOVYxNC43NVpNMjUuNiAyMS43NUgxNC40VjE3LjU1SDE2LjVIMTcuOUgyMi4xSDIzLjVIMjUuNlYyMS43NVoiIGZpbGw9IiMyNjMyMzgiPjwvcGF0aD4KPC9zdmc+Cg==";
1
+ const __vite_glob_0_321 = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTMiIHZpZXdCb3g9IjAgMCAxNCAxMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTggMEM5LjEwNDU3IDMuMjIxMzNlLTA4IDEwIDAuODk1NDMxIDEwIDJWM0gxMi41TDEyLjY1MzMgMy4wMDc4MUMxMy40MDk3IDMuMDg0NjEgMTQgMy43MjMzNCAxNCA0LjVWMTEuNUMxNCAxMi4yNzY3IDEzLjQwOTcgMTIuOTE1NCAxMi42NTMzIDEyLjk5MjJMMTIuNSAxM0gxLjVDMC43MjMzMzYgMTMgMC4wODQ2MDk3IDEyLjQwOTcgMC4wMDc4MTI1IDExLjY1MzNMMCAxMS41VjQuNUMwIDMuNjcxNTcgMC42NzE1NzMgMyAxLjUgM0g0VjJDNCAwLjg5NTQzMSA0Ljg5NTQzIDMuMjIxMjhlLTA4IDYgMEg4Wk0xLjUgNEMxLjIyMzg2IDQgMSA0LjIyMzg2IDEgNC41VjExLjVDMSAxMS43NzYxIDEuMjIzODYgMTIgMS41IDEySDEyLjVDMTIuNzc2MSAxMiAxMyAxMS43NzYxIDEzIDExLjVWNC41QzEzIDQuMjIzODYgMTIuNzc2MSA0IDEyLjUgNEgxLjVaTTYgMUM1LjQ0NzcyIDEgNSAxLjQ0NzcyIDUgMlYzSDlWMkM5IDEuNDQ3NzIgOC41NTIyOCAxIDggMUg2WiIgZmlsbD0iYmxhY2siLz4KPC9zdmc+Cg==";
2
2
  export {
3
3
  __vite_glob_0_321 as default
4
4
  };
package/dist/main.es8.js CHANGED
@@ -26,6 +26,8 @@ const theme = (() => {
26
26
  red2: "#de5959",
27
27
  red3: "#FFCCCC",
28
28
  red4: "#FF9A9A",
29
+ red6: "#FFEBEB",
30
+ red5: "#CC4545",
29
31
  pureRed: "#ff0000",
30
32
  darkRed: "#d00000",
31
33
  cornellRed: "#a52019",
@@ -67,6 +69,8 @@ const theme = (() => {
67
69
  purple4: "#D0D6F5",
68
70
  purple5: "#533181",
69
71
  purple6: "#6F20DC",
72
+ purple7: "#F5EEFF",
73
+ purple8: "#B17BFA",
70
74
  orange: "#ffc338",
71
75
  disabled: "#dfe1e1",
72
76
  transparentWhite2: "#ffffff32",
@@ -179,35 +183,9 @@ const theme = (() => {
179
183
  900: "#331111"
180
184
  }
181
185
  };
182
- const chartGradients = {
183
- simple: {
184
- from: semanticColors.purple[500],
185
- to: semanticColors.purple[400]
186
- },
187
- stacked: [{
188
- from: "#F5EDFF",
189
- to: "#DEC5FF"
190
- }, {
191
- from: "#CAA2FF",
192
- to: "#F2E8FF"
193
- }, {
194
- from: "#B987FC",
195
- to: "#904AEF"
196
- }, {
197
- from: "#8B40F2",
198
- to: "#4A1394"
199
- }, {
200
- from: "#6A05F2",
201
- to: "#4905A5"
202
- }, {
203
- from: "#5402C3",
204
- to: "#2B0362"
205
- }]
206
- };
207
186
  return {
208
187
  colors,
209
188
  semanticColors,
210
- chartGradients,
211
189
  fonts: {
212
190
  mainFont: '"Figtree", sans-serif'
213
191
  },
@@ -226,18 +204,6 @@ const theme = (() => {
226
204
  boxShadow: {
227
205
  card: "0px 2px 8px 2px rgba(0, 0, 0, 0.15)"
228
206
  },
229
- progressBar: {
230
- light: {
231
- fillColor: semanticColors.purple[500],
232
- backgroundColor: semanticColors.grey[200],
233
- labelColor: semanticColors.grey[700]
234
- },
235
- dark: {
236
- fillColor: colors.white,
237
- backgroundColor: semanticColors.grey[700],
238
- labelColor: semanticColors.grey[200]
239
- }
240
- },
241
207
  mainButton: {
242
208
  light: {
243
209
  // theme
@@ -435,29 +401,27 @@ const theme = (() => {
435
401
  backgroundColor: semanticColors.grey[300],
436
402
  borderColor: ""
437
403
  }
438
- }
439
- },
440
- protag: {
441
- main: {
404
+ },
405
+ tertiary: {
442
406
  default: {
443
- backgroundColor: semanticColors.yellow[300],
407
+ backgroundColor: "transparent",
444
408
  textColor: semanticColors.teal[800],
445
- borderColor: "transparent"
409
+ borderColor: semanticColors.teal[100]
446
410
  },
447
411
  hover: {
448
- backgroundColor: semanticColors.yellow[300],
412
+ backgroundColor: semanticColors.grey[200],
449
413
  textColor: semanticColors.teal[800],
450
- borderColor: ""
414
+ borderColor: semanticColors.teal[100]
451
415
  },
452
416
  active: {
453
- backgroundColor: semanticColors.yellow[300],
417
+ backgroundColor: semanticColors.grey[400],
454
418
  textColor: semanticColors.teal[800],
455
- borderColor: ""
419
+ borderColor: semanticColors.teal[100]
456
420
  },
457
421
  disabled: {
458
- backgroundColor: semanticColors.yellow[300],
459
- textColor: semanticColors.teal[400],
460
- borderColor: ""
422
+ textColor: semanticColors.grey[600],
423
+ backgroundColor: semanticColors.grey[500],
424
+ borderColor: semanticColors.grey[800]
461
425
  }
462
426
  }
463
427
  },
@@ -484,6 +448,54 @@ const theme = (() => {
484
448
  borderColor: ""
485
449
  }
486
450
  }
451
+ },
452
+ protag: {
453
+ main: {
454
+ default: {
455
+ backgroundColor: semanticColors.yellow[200],
456
+ textColor: semanticColors.teal[800],
457
+ borderColor: ""
458
+ },
459
+ hover: {
460
+ backgroundColor: semanticColors.yellow[200],
461
+ textColor: semanticColors.teal[800],
462
+ borderColor: ""
463
+ },
464
+ active: {
465
+ backgroundColor: semanticColors.yellow[200],
466
+ textColor: semanticColors.teal[800],
467
+ borderColor: ""
468
+ },
469
+ disabled: {
470
+ backgroundColor: semanticColors.yellow[200],
471
+ textColor: semanticColors.teal[400],
472
+ borderColor: ""
473
+ }
474
+ }
475
+ },
476
+ freeTrialTag: {
477
+ main: {
478
+ default: {
479
+ backgroundColor: semanticColors.blue[200],
480
+ textColor: semanticColors.teal[800],
481
+ borderColor: ""
482
+ },
483
+ hover: {
484
+ backgroundColor: semanticColors.blue[200],
485
+ textColor: semanticColors.teal[800],
486
+ borderColor: ""
487
+ },
488
+ active: {
489
+ backgroundColor: semanticColors.blue[200],
490
+ textColor: semanticColors.teal[800],
491
+ borderColor: ""
492
+ },
493
+ disabled: {
494
+ backgroundColor: semanticColors.blue[200],
495
+ textColor: semanticColors.teal[400],
496
+ borderColor: ""
497
+ }
498
+ }
487
499
  }
488
500
  },
489
501
  dark: {
@@ -635,55 +647,6 @@ const theme = (() => {
635
647
  }
636
648
  }
637
649
  },
638
- tertiary: {
639
- // type
640
- main: {
641
- // variant: this is the default variant
642
- default: {
643
- backgroundColor: "transparent",
644
- textColor: semanticColors.purple[50],
645
- borderColor: semanticColors.teal[500]
646
- },
647
- hover: {
648
- backgroundColor: semanticColors.teal[600],
649
- textColor: semanticColors.purple[50],
650
- borderColor: semanticColors.teal[400]
651
- },
652
- active: {
653
- backgroundColor: semanticColors.teal[700],
654
- textColor: semanticColors.purple[50],
655
- borderColor: semanticColors.teal[300]
656
- },
657
- disabled: {
658
- textColor: semanticColors.grey[600],
659
- backgroundColor: semanticColors.grey[500],
660
- borderColor: semanticColors.grey[800]
661
- }
662
- },
663
- cancel: {
664
- // variant
665
- default: {
666
- backgroundColor: semanticColors.teal[200],
667
- textColor: semanticColors.red[400],
668
- borderColor: semanticColors.teal[500]
669
- },
670
- hover: {
671
- backgroundColor: semanticColors.red[700],
672
- textColor: semanticColors.red[700],
673
- borderColor: semanticColors.teal[400]
674
- },
675
- active: {
676
- backgroundColor: semanticColors.red[600],
677
- textColor: semanticColors.red[200],
678
- borderColor: semanticColors.teal[300]
679
- },
680
- disabled: {
681
- textColor: semanticColors.grey[600],
682
- backgroundColor: semanticColors.grey[500],
683
- borderColor: semanticColors.grey[800]
684
- }
685
- }
686
- },
687
650
  ghost: {
688
651
  // type
689
652
  main: {
@@ -775,9 +738,9 @@ const theme = (() => {
775
738
  iconWidth: "26px"
776
739
  },
777
740
  tiny: {
778
- padding: "2px 5px",
779
- fontSize: "10px",
780
- iconWidth: "18px"
741
+ padding: "3px 5px",
742
+ fontSize: "11px",
743
+ iconWidth: "14px"
781
744
  }
782
745
  }
783
746
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@eturnity/eturnity_reusable_components",
3
- "version": "8.34.0-EPDM-13618.2",
3
+ "version": "8.34.0-EPDM-16204.1",
4
4
  "files": [
5
5
  "dist",
6
6
  "src"
package/src/assets/svgIcons/electricity_tariff.svg CHANGED
@@ -1,3 +1,3 @@
1
- <svg width="10" height="18" viewBox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path fill-rule="evenodd" clip-rule="evenodd" d="M9.36652 9.33445C9.4832 9.20595 9.39203 9 9.21845 9H6.16767L8.29896 0.785289C8.35143 0.583073 8.09775 0.44595 7.95731 0.60061L0.633784 8.66555C0.517096 8.79405 0.608271 9 0.781847 9H3.83263L1.70134 17.2147C1.64887 17.4169 1.90255 17.5541 2.04299 17.3994L9.36652 9.33445Z" fill="#263238"/>
1
+ <svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M8.5125 0.999636C9.0643 1.00006 9.51229 1.44779 9.5125 1.99964V4.44104C9.56257 4.43332 9.61457 4.42835 9.6668 4.42835H11.8973C12.449 4.4288 12.8971 4.87652 12.8973 5.42835V11.9996C12.8971 12.5515 12.4491 12.9992 11.8973 12.9996H8.6668V12.986C8.61656 12.9938 8.56492 12.9996 8.5125 12.9996H6.28203L6.1795 12.9948C6.16229 12.993 6.14468 12.9896 6.12774 12.9869V12.9996H2.89727L2.79473 12.9948C2.29064 12.9434 1.89733 12.5173 1.89727 11.9996V11.3092C2.25984 11.3343 2.61386 11.2265 2.89727 11.0153V11.9996H5.12774V7.99964H4.18633L4.51934 6.99964H5.12774C5.18011 6.99968 5.23184 7.00454 5.28203 7.01233V1.99964C5.28223 1.48213 5.67549 1.05584 6.1795 1.00452L6.28203 0.999636H8.5125ZM6.28203 11.9996H8.5125V1.99964H6.28203V11.9996ZM9.6668 11.9996H11.8973V5.42835H9.6668V11.9996ZM1.5252 0.656862C1.61252 0.394909 1.89606 0.253171 2.15801 0.340456C2.41998 0.42778 2.56174 0.711297 2.47442 0.973268L1.19414 4.81507H3.22246C3.70002 4.81516 4.03723 5.28288 3.88653 5.73596L2.47442 9.97327C2.38695 10.235 2.10346 10.377 1.84161 10.2897C1.57979 10.2024 1.43813 9.91871 1.5252 9.65686L2.80547 5.81507H0.777152C0.299817 5.81486 -0.0372931 5.34708 0.11309 4.89417L1.5252 0.656862Z" fill="black"/>
3
3
  </svg>
package/src/assets/svgIcons/suitcase.svg CHANGED
@@ -1,3 +1,3 @@
1
- <svg fill="none" height="15" viewbox="12 12 16 15" width="16" xmlns="http://www.w3.org/2000/svg">
2
- <path d="M25.6 16.15H23.5V14.75C23.5 13.973 22.877 13.35 22.1 13.35H17.9C17.123 13.35 16.5 13.973 16.5 14.75V16.15H14.4C13.623 16.15 13 16.773 13 17.55V25.25C13 26.027 13.623 26.65 14.4 26.65H25.6C26.377 26.65 27 26.027 27 25.25V17.55C27 16.773 26.377 16.15 25.6 16.15ZM17.9 14.75H22.1V16.15H17.9V14.75ZM25.6 21.75H14.4V17.55H16.5H17.9H22.1H23.5H25.6V21.75Z" fill="#263238"></path>
1
+ <svg width="14" height="13" viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M8 0C9.10457 3.22133e-08 10 0.895431 10 2V3H12.5L12.6533 3.00781C13.4097 3.08461 14 3.72334 14 4.5V11.5C14 12.2767 13.4097 12.9154 12.6533 12.9922L12.5 13H1.5C0.723336 13 0.0846097 12.4097 0.0078125 11.6533L0 11.5V4.5C0 3.67157 0.671573 3 1.5 3H4V2C4 0.895431 4.89543 3.22128e-08 6 0H8ZM1.5 4C1.22386 4 1 4.22386 1 4.5V11.5C1 11.7761 1.22386 12 1.5 12H12.5C12.7761 12 13 11.7761 13 11.5V4.5C13 4.22386 12.7761 4 12.5 4H1.5ZM6 1C5.44772 1 5 1.44772 5 2V3H9V2C9 1.44772 8.55228 1 8 1H6Z" fill="black"/>
3
3
  </svg>
package/src/assets/theme.js CHANGED
@@ -26,6 +26,8 @@ const theme = (() => {
26
26
  red2: '#de5959',
27
27
  red3: '#FFCCCC',
28
28
  red4: '#FF9A9A',
29
+ red6: '#FFEBEB',
30
+ red5: '#CC4545',
29
31
  pureRed: '#ff0000',
30
32
  darkRed: '#d00000',
31
33
  cornellRed: '#a52019',
@@ -66,6 +68,8 @@ const theme = (() => {
66
68
  purple4: '#D0D6F5',
67
69
  purple5: '#533181',
68
70
  purple6: '#6F20DC',
71
+ purple7: '#F5EEFF',
72
+ purple8: '#B17BFA',
69
73
  orange: '#ffc338',
70
74
  disabled: '#dfe1e1',
71
75
  transparentWhite2: '#ffffff32',
@@ -180,25 +184,9 @@ const theme = (() => {
180
184
  },
181
185
  }
182
186
 
183
- const chartGradients = {
184
- simple: {
185
- from: semanticColors.purple[500],
186
- to: semanticColors.purple[400],
187
- },
188
- stacked: [
189
- { from: '#F5EDFF', to: '#DEC5FF' },
190
- { from: '#CAA2FF', to: '#F2E8FF' },
191
- { from: '#B987FC', to: '#904AEF' },
192
- { from: '#8B40F2', to: '#4A1394' },
193
- { from: '#6A05F2', to: '#4905A5' },
194
- { from: '#5402C3', to: '#2B0362' },
195
- ],
196
- }
197
-
198
187
  return {
199
188
  colors,
200
189
  semanticColors,
201
- chartGradients,
202
190
  fonts: {
203
191
  mainFont: '"Figtree", sans-serif',
204
192
  },
@@ -217,18 +205,6 @@ const theme = (() => {
217
205
  boxShadow: {
218
206
  card: '0px 2px 8px 2px rgba(0, 0, 0, 0.15)',
219
207
  },
220
- progressBar: {
221
- light: {
222
- fillColor: semanticColors.purple[500],
223
- backgroundColor: semanticColors.grey[200],
224
- labelColor: semanticColors.grey[700],
225
- },
226
- dark: {
227
- fillColor: colors.white,
228
- backgroundColor: semanticColors.grey[700],
229
- labelColor: semanticColors.grey[200],
230
- },
231
- },
232
208
  mainButton: {
233
209
  light: {
234
210
  // theme
@@ -427,28 +403,26 @@ const theme = (() => {
427
403
  borderColor: '',
428
404
  },
429
405
  },
430
- },
431
- protag: {
432
- main: {
406
+ tertiary: {
433
407
  default: {
434
- backgroundColor: semanticColors.yellow[300],
408
+ backgroundColor: 'transparent',
435
409
  textColor: semanticColors.teal[800],
436
- borderColor: 'transparent',
410
+ borderColor: semanticColors.teal[100],
437
411
  },
438
412
  hover: {
439
- backgroundColor: semanticColors.yellow[300],
413
+ backgroundColor: semanticColors.grey[200],
440
414
  textColor: semanticColors.teal[800],
441
- borderColor: '',
415
+ borderColor: semanticColors.teal[100],
442
416
  },
443
417
  active: {
444
- backgroundColor: semanticColors.yellow[300],
418
+ backgroundColor: semanticColors.grey[400],
445
419
  textColor: semanticColors.teal[800],
446
- borderColor: '',
420
+ borderColor: semanticColors.teal[100],
447
421
  },
448
422
  disabled: {
449
- backgroundColor: semanticColors.yellow[300],
450
- textColor: semanticColors.teal[400],
451
- borderColor: '',
423
+ textColor: semanticColors.grey[600],
424
+ backgroundColor: semanticColors.grey[500],
425
+ borderColor: semanticColors.grey[800],
452
426
  },
453
427
  },
454
428
  },
@@ -476,153 +450,152 @@ const theme = (() => {
476
450
  },
477
451
  },
478
452
  },
479
- },
480
- dark: {
481
- // theme
482
- primary: {
483
- // type
453
+ protag: {
484
454
  main: {
485
- // variant: this is the default variant
486
455
  default: {
487
- backgroundColor: colors.white,
456
+ backgroundColor: semanticColors.yellow[200],
488
457
  textColor: semanticColors.teal[800],
489
458
  borderColor: '',
490
459
  },
491
460
  hover: {
492
- backgroundColor: semanticColors.purple[100],
461
+ backgroundColor: semanticColors.yellow[200],
493
462
  textColor: semanticColors.teal[800],
494
463
  borderColor: '',
495
464
  },
496
465
  active: {
497
- backgroundColor: semanticColors.purple[100],
466
+ backgroundColor: semanticColors.yellow[200],
498
467
  textColor: semanticColors.teal[800],
499
468
  borderColor: '',
500
469
  },
501
470
  disabled: {
502
- textColor: semanticColors.grey[800],
503
- backgroundColor: semanticColors.grey[400],
471
+ backgroundColor: semanticColors.yellow[200],
472
+ textColor: semanticColors.teal[400],
504
473
  borderColor: '',
505
474
  },
506
475
  },
507
- cancel: {
508
- // variant
476
+ },
477
+ freeTrialTag: {
478
+ main: {
509
479
  default: {
510
- backgroundColor: semanticColors.red[400],
480
+ backgroundColor: semanticColors.blue[200],
511
481
  textColor: semanticColors.teal[800],
512
482
  borderColor: '',
513
483
  },
514
484
  hover: {
515
- backgroundColor: semanticColors.red[100],
485
+ backgroundColor: semanticColors.blue[200],
516
486
  textColor: semanticColors.teal[800],
517
487
  borderColor: '',
518
488
  },
519
489
  active: {
520
- backgroundColor: semanticColors.red[200],
490
+ backgroundColor: semanticColors.blue[200],
521
491
  textColor: semanticColors.teal[800],
522
492
  borderColor: '',
523
493
  },
524
494
  disabled: {
525
- backgroundColor: semanticColors.grey[300],
526
- textColor: semanticColors.grey[800],
495
+ backgroundColor: semanticColors.blue[200],
496
+ textColor: semanticColors.teal[400],
527
497
  borderColor: '',
528
498
  },
529
499
  },
530
500
  },
531
- secondary: {
501
+ },
502
+ dark: {
503
+ // theme
504
+ primary: {
532
505
  // type
533
506
  main: {
534
507
  // variant: this is the default variant
535
508
  default: {
536
- backgroundColor: semanticColors.teal[800],
537
- textColor: semanticColors.purple[50],
509
+ backgroundColor: colors.white,
510
+ textColor: semanticColors.teal[800],
538
511
  borderColor: '',
539
512
  },
540
513
  hover: {
541
- backgroundColor: semanticColors.teal[600],
542
- textColor: semanticColors.purple[50],
514
+ backgroundColor: semanticColors.purple[100],
515
+ textColor: semanticColors.teal[800],
543
516
  borderColor: '',
544
517
  },
545
518
  active: {
546
- backgroundColor: semanticColors.teal[700],
547
- textColor: semanticColors.purple[50],
519
+ backgroundColor: semanticColors.purple[100],
520
+ textColor: semanticColors.teal[800],
548
521
  borderColor: '',
549
522
  },
550
523
  disabled: {
551
- textColor: semanticColors.grey[600],
552
- backgroundColor: semanticColors.grey[500],
524
+ textColor: semanticColors.grey[800],
525
+ backgroundColor: semanticColors.grey[400],
553
526
  borderColor: '',
554
527
  },
555
528
  },
556
529
  cancel: {
557
530
  // variant
558
531
  default: {
559
- backgroundColor: semanticColors.red[800],
560
- textColor: semanticColors.red[400],
532
+ backgroundColor: semanticColors.red[400],
533
+ textColor: semanticColors.teal[800],
561
534
  borderColor: '',
562
535
  },
563
536
  hover: {
564
- backgroundColor: semanticColors.red[700],
565
- textColor: semanticColors.red[300],
537
+ backgroundColor: semanticColors.red[100],
538
+ textColor: semanticColors.teal[800],
566
539
  borderColor: '',
567
540
  },
568
541
  active: {
569
- backgroundColor: semanticColors.red[600],
570
- textColor: semanticColors.red[200],
542
+ backgroundColor: semanticColors.red[200],
543
+ textColor: semanticColors.teal[800],
571
544
  borderColor: '',
572
545
  },
573
546
  disabled: {
574
- textColor: semanticColors.grey[600],
575
- backgroundColor: semanticColors.grey[500],
547
+ backgroundColor: semanticColors.grey[300],
548
+ textColor: semanticColors.grey[800],
576
549
  borderColor: '',
577
550
  },
578
551
  },
579
552
  },
580
- tertiary: {
553
+ secondary: {
581
554
  // type
582
555
  main: {
583
556
  // variant: this is the default variant
584
557
  default: {
585
- backgroundColor: 'transparent',
558
+ backgroundColor: semanticColors.teal[800],
586
559
  textColor: semanticColors.purple[50],
587
- borderColor: semanticColors.teal[500],
560
+ borderColor: '',
588
561
  },
589
562
  hover: {
590
563
  backgroundColor: semanticColors.teal[600],
591
564
  textColor: semanticColors.purple[50],
592
- borderColor: semanticColors.teal[400],
565
+ borderColor: '',
593
566
  },
594
567
  active: {
595
568
  backgroundColor: semanticColors.teal[700],
596
569
  textColor: semanticColors.purple[50],
597
- borderColor: semanticColors.teal[300],
570
+ borderColor: '',
598
571
  },
599
572
  disabled: {
600
573
  textColor: semanticColors.grey[600],
601
574
  backgroundColor: semanticColors.grey[500],
602
- borderColor: semanticColors.grey[800],
575
+ borderColor: '',
603
576
  },
604
577
  },
605
578
  cancel: {
606
579
  // variant
607
580
  default: {
608
- backgroundColor: semanticColors.teal[200],
581
+ backgroundColor: semanticColors.red[800],
609
582
  textColor: semanticColors.red[400],
610
- borderColor: semanticColors.teal[500],
583
+ borderColor: '',
611
584
  },
612
585
  hover: {
613
586
  backgroundColor: semanticColors.red[700],
614
- textColor: semanticColors.red[700],
615
- borderColor: semanticColors.teal[400],
587
+ textColor: semanticColors.red[300],
588
+ borderColor: '',
616
589
  },
617
590
  active: {
618
591
  backgroundColor: semanticColors.red[600],
619
592
  textColor: semanticColors.red[200],
620
- borderColor: semanticColors.teal[300],
593
+ borderColor: '',
621
594
  },
622
595
  disabled: {
623
596
  textColor: semanticColors.grey[600],
624
597
  backgroundColor: semanticColors.grey[500],
625
- borderColor: semanticColors.grey[800],
598
+ borderColor: '',
626
599
  },
627
600
  },
628
601
  },
@@ -766,9 +739,9 @@ const theme = (() => {
766
739
  iconWidth: '26px',
767
740
  },
768
741
  tiny: {
769
- padding: '2px 5px',
770
- fontSize: '10px',
771
- iconWidth: '18px',
742
+ padding: '3px 5px',
743
+ fontSize: '11px',
744
+ iconWidth: '14px',
772
745
  },
773
746
  },
774
747
  },
package/src/components/buttons/mainButton/MainButton.stories.js CHANGED
@@ -104,12 +104,6 @@ WithIcon.args = {
104
104
  appTheme: 'light',
105
105
  }
106
106
 
107
- export const WithIconLast = Template.bind({})
108
- WithIconLast.args = {
109
- ...WithIcon.args,
110
- iconLast: true,
111
- }
112
-
113
107
  export const Disabled = Template.bind({})
114
108
  Disabled.args = {
115
109
  type: 'primary',