@alfalab/core-components-circular-progress-bar 5.0.6 → 5.0.7-alfasans

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 (46) hide show
  1. package/Component.d.ts +4 -3
  2. package/Component.js.map +1 -1
  3. package/consts.d.ts +5 -0
  4. package/consts.js +5 -0
  5. package/consts.js.map +1 -1
  6. package/cssm/Component.d.ts +4 -3
  7. package/cssm/Component.js.map +1 -1
  8. package/cssm/consts.d.ts +5 -0
  9. package/cssm/consts.js +5 -0
  10. package/cssm/consts.js.map +1 -1
  11. package/cssm/index.module.css +7 -0
  12. package/cssm/types/component-size.d.ts +1 -1
  13. package/esm/Component.d.ts +4 -3
  14. package/esm/Component.js.map +1 -1
  15. package/esm/consts.d.ts +5 -0
  16. package/esm/consts.js +5 -0
  17. package/esm/consts.js.map +1 -1
  18. package/esm/index.css +58 -51
  19. package/esm/index.module.css.js +1 -1
  20. package/esm/index.module.css.js.map +1 -1
  21. package/esm/types/component-size.d.ts +1 -1
  22. package/index.css +58 -51
  23. package/index.module.css.js +1 -1
  24. package/index.module.css.js.map +1 -1
  25. package/modern/Component.d.ts +4 -3
  26. package/modern/Component.js.map +1 -1
  27. package/modern/consts.d.ts +5 -0
  28. package/modern/consts.js +5 -0
  29. package/modern/consts.js.map +1 -1
  30. package/modern/index.css +58 -51
  31. package/modern/index.module.css.js +1 -1
  32. package/modern/index.module.css.js.map +1 -1
  33. package/modern/types/component-size.d.ts +1 -1
  34. package/moderncssm/Component.d.ts +4 -3
  35. package/moderncssm/Component.js.map +1 -1
  36. package/moderncssm/consts.d.ts +5 -0
  37. package/moderncssm/consts.js +5 -0
  38. package/moderncssm/consts.js.map +1 -1
  39. package/moderncssm/index.module.css +9 -0
  40. package/moderncssm/types/component-size.d.ts +1 -1
  41. package/package.json +5 -5
  42. package/src/Component.tsx +4 -3
  43. package/src/consts.ts +5 -0
  44. package/src/index.module.css +9 -0
  45. package/src/types/component-size.ts +1 -1
  46. package/types/component-size.d.ts +1 -1
package/esm/consts.d.ts CHANGED
@@ -5,6 +5,7 @@ export declare const SIZES: {
5
5
  l: number;
6
6
  xl: number;
7
7
  xxl: number;
8
+ 16: number;
8
9
  24: number;
9
10
  48: number;
10
11
  64: number;
@@ -20,6 +21,7 @@ export declare const STROKE: {
20
21
  l: number;
21
22
  xl: number;
22
23
  xxl: number;
24
+ 16: number;
23
25
  24: number;
24
26
  48: number;
25
27
  64: number;
@@ -35,6 +37,7 @@ export declare const VIEW_TITLE: {
35
37
  readonly l: "xsmall";
36
38
  readonly xl: "medium";
37
39
  readonly xxl: "medium";
40
+ readonly 16: "small";
38
41
  readonly 24: "small";
39
42
  readonly 48: "small";
40
43
  readonly 64: "small";
@@ -50,6 +53,7 @@ export declare const VIEW_TEXT: {
50
53
  readonly l: "secondary-large";
51
54
  readonly xl: "secondary-large";
52
55
  readonly xxl: "secondary-large";
56
+ readonly 16: "secondary-small";
53
57
  readonly 24: "secondary-small";
54
58
  readonly 48: "secondary-small";
55
59
  readonly 64: "secondary-large";
@@ -66,6 +70,7 @@ export declare const SIZE_TO_CLASSNAME_MAP: {
66
70
  l: string;
67
71
  xl: string;
68
72
  xxl: string;
73
+ 16: string;
69
74
  24: string;
70
75
  48: string;
71
76
  64: string;
package/esm/consts.js CHANGED
@@ -5,6 +5,7 @@ var SIZES = {
5
5
  l: 80,
6
6
  xl: 128,
7
7
  xxl: 144,
8
+ 16: 16,
8
9
  24: 24,
9
10
  48: 48,
10
11
  64: 64,
@@ -20,6 +21,7 @@ var STROKE = {
20
21
  l: 8,
21
22
  xl: 10,
22
23
  xxl: 12,
24
+ 16: 2,
23
25
  24: 4,
24
26
  48: 4,
25
27
  64: 6,
@@ -35,6 +37,7 @@ var VIEW_TITLE = {
35
37
  l: 'xsmall',
36
38
  xl: 'medium',
37
39
  xxl: 'medium',
40
+ 16: 'small',
38
41
  24: 'small',
39
42
  48: 'small',
40
43
  64: 'small',
@@ -50,6 +53,7 @@ var VIEW_TEXT = {
50
53
  l: 'secondary-large',
51
54
  xl: 'secondary-large',
52
55
  xxl: 'secondary-large',
56
+ 16: 'secondary-small',
53
57
  24: 'secondary-small',
54
58
  48: 'secondary-small',
55
59
  64: 'secondary-large',
@@ -66,6 +70,7 @@ var SIZE_TO_CLASSNAME_MAP = {
66
70
  l: 'size-80',
67
71
  xl: 'size-128',
68
72
  xxl: 'size-144',
73
+ 16: 'size-16',
69
74
  24: 'size-24',
70
75
  48: 'size-48',
71
76
  64: 'size-64',
package/esm/consts.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"consts.js","sources":["../src/consts.ts"],"sourcesContent":["export const SIZES = {\n xs: 24,\n s: 48,\n m: 64,\n l: 80,\n xl: 128,\n xxl: 144,\n 24: 24,\n 48: 48,\n 64: 64,\n 80: 80,\n 96: 96,\n 128: 128,\n 144: 144,\n};\n\nexport const STROKE = {\n xs: 4,\n s: 4,\n m: 6,\n l: 8,\n xl: 10,\n xxl: 12,\n 24: 4,\n 48: 4,\n 64: 6,\n 80: 8,\n 96: 8,\n 128: 10,\n 144: 12,\n};\n\nexport const VIEW_TITLE = {\n xs: 'small',\n s: 'small',\n m: 'small',\n l: 'xsmall',\n xl: 'medium',\n xxl: 'medium',\n 24: 'small',\n 48: 'small',\n 64: 'small',\n 80: 'xsmall',\n 96: 'xsmall',\n 128: 'medium',\n 144: 'medium',\n} as const;\n\nexport const VIEW_TEXT = {\n xs: 'secondary-small',\n s: 'secondary-small',\n m: 'secondary-large',\n l: 'secondary-large',\n xl: 'secondary-large',\n xxl: 'secondary-large',\n 24: 'secondary-small',\n 48: 'secondary-small',\n 64: 'secondary-large',\n 80: 'secondary-large',\n 96: 'secondary-large',\n 128: 'secondary-large',\n 144: 'secondary-large',\n} as const;\n\nexport const TYPOGRAPHY_COLOR = ['primary', 'secondary', 'tertiary', 'positive', 'negative'];\n\nexport const SIZE_TO_CLASSNAME_MAP = {\n xs: 'size-24',\n s: 'size-48',\n m: 'size-64',\n l: 'size-80',\n xl: 'size-128',\n xxl: 'size-144',\n 24: 'size-24',\n 48: 'size-48',\n 64: 'size-64',\n 80: 'size-80',\n 96: 'size-96',\n 128: 'size-128',\n 144: 'size-144',\n};\n\nexport const MAX_PROGRESS_VALUE = 100;\n\nexport const MIN_TIMER_VALUE = 0;\nexport const MAX_TIMER_VALUE = 3599;\n"],"names":[],"mappings":"AAAa,IAAA,KAAK,GAAG;AACjB,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,CAAC,EAAE,EAAE;AACL,IAAA,CAAC,EAAE,EAAE;AACL,IAAA,CAAC,EAAE,EAAE;AACL,IAAA,EAAE,EAAE,GAAG;AACP,IAAA,GAAG,EAAE,GAAG;AACR,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,GAAG,EAAE,GAAG;AACR,IAAA,GAAG,EAAE,GAAG;;AAGC,IAAA,MAAM,GAAG;AAClB,IAAA,EAAE,EAAE,CAAC;AACL,IAAA,CAAC,EAAE,CAAC;AACJ,IAAA,CAAC,EAAE,CAAC;AACJ,IAAA,CAAC,EAAE,CAAC;AACJ,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,GAAG,EAAE,EAAE;AACP,IAAA,EAAE,EAAE,CAAC;AACL,IAAA,EAAE,EAAE,CAAC;AACL,IAAA,EAAE,EAAE,CAAC;AACL,IAAA,EAAE,EAAE,CAAC;AACL,IAAA,EAAE,EAAE,CAAC;AACL,IAAA,GAAG,EAAE,EAAE;AACP,IAAA,GAAG,EAAE,EAAE;;AAGE,IAAA,UAAU,GAAG;AACtB,IAAA,EAAE,EAAE,OAAO;AACX,IAAA,CAAC,EAAE,OAAO;AACV,IAAA,CAAC,EAAE,OAAO;AACV,IAAA,CAAC,EAAE,QAAQ;AACX,IAAA,EAAE,EAAE,QAAQ;AACZ,IAAA,GAAG,EAAE,QAAQ;AACb,IAAA,EAAE,EAAE,OAAO;AACX,IAAA,EAAE,EAAE,OAAO;AACX,IAAA,EAAE,EAAE,OAAO;AACX,IAAA,EAAE,EAAE,QAAQ;AACZ,IAAA,EAAE,EAAE,QAAQ;AACZ,IAAA,GAAG,EAAE,QAAQ;AACb,IAAA,GAAG,EAAE,QAAQ;;AAGJ,IAAA,SAAS,GAAG;AACrB,IAAA,EAAE,EAAE,iBAAiB;AACrB,IAAA,CAAC,EAAE,iBAAiB;AACpB,IAAA,CAAC,EAAE,iBAAiB;AACpB,IAAA,CAAC,EAAE,iBAAiB;AACpB,IAAA,EAAE,EAAE,iBAAiB;AACrB,IAAA,GAAG,EAAE,iBAAiB;AACtB,IAAA,EAAE,EAAE,iBAAiB;AACrB,IAAA,EAAE,EAAE,iBAAiB;AACrB,IAAA,EAAE,EAAE,iBAAiB;AACrB,IAAA,EAAE,EAAE,iBAAiB;AACrB,IAAA,EAAE,EAAE,iBAAiB;AACrB,IAAA,GAAG,EAAE,iBAAiB;AACtB,IAAA,GAAG,EAAE,iBAAiB;;AAGnB,IAAM,gBAAgB,GAAG,CAAC,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU;AAE9E,IAAA,qBAAqB,GAAG;AACjC,IAAA,EAAE,EAAE,SAAS;AACb,IAAA,CAAC,EAAE,SAAS;AACZ,IAAA,CAAC,EAAE,SAAS;AACZ,IAAA,CAAC,EAAE,SAAS;AACZ,IAAA,EAAE,EAAE,UAAU;AACd,IAAA,GAAG,EAAE,UAAU;AACf,IAAA,EAAE,EAAE,SAAS;AACb,IAAA,EAAE,EAAE,SAAS;AACb,IAAA,EAAE,EAAE,SAAS;AACb,IAAA,EAAE,EAAE,SAAS;AACb,IAAA,EAAE,EAAE,SAAS;AACb,IAAA,GAAG,EAAE,UAAU;AACf,IAAA,GAAG,EAAE,UAAU;;AAGZ,IAAM,kBAAkB,GAAG;AAE3B,IAAM,eAAe,GAAG;AACxB,IAAM,eAAe,GAAG;;;;"}
1
+ {"version":3,"file":"consts.js","sources":["../src/consts.ts"],"sourcesContent":["export const SIZES = {\n xs: 24,\n s: 48,\n m: 64,\n l: 80,\n xl: 128,\n xxl: 144,\n 16: 16,\n 24: 24,\n 48: 48,\n 64: 64,\n 80: 80,\n 96: 96,\n 128: 128,\n 144: 144,\n};\n\nexport const STROKE = {\n xs: 4,\n s: 4,\n m: 6,\n l: 8,\n xl: 10,\n xxl: 12,\n 16: 2,\n 24: 4,\n 48: 4,\n 64: 6,\n 80: 8,\n 96: 8,\n 128: 10,\n 144: 12,\n};\n\nexport const VIEW_TITLE = {\n xs: 'small',\n s: 'small',\n m: 'small',\n l: 'xsmall',\n xl: 'medium',\n xxl: 'medium',\n 16: 'small',\n 24: 'small',\n 48: 'small',\n 64: 'small',\n 80: 'xsmall',\n 96: 'xsmall',\n 128: 'medium',\n 144: 'medium',\n} as const;\n\nexport const VIEW_TEXT = {\n xs: 'secondary-small',\n s: 'secondary-small',\n m: 'secondary-large',\n l: 'secondary-large',\n xl: 'secondary-large',\n xxl: 'secondary-large',\n 16: 'secondary-small',\n 24: 'secondary-small',\n 48: 'secondary-small',\n 64: 'secondary-large',\n 80: 'secondary-large',\n 96: 'secondary-large',\n 128: 'secondary-large',\n 144: 'secondary-large',\n} as const;\n\nexport const TYPOGRAPHY_COLOR = ['primary', 'secondary', 'tertiary', 'positive', 'negative'];\n\nexport const SIZE_TO_CLASSNAME_MAP = {\n xs: 'size-24',\n s: 'size-48',\n m: 'size-64',\n l: 'size-80',\n xl: 'size-128',\n xxl: 'size-144',\n 16: 'size-16',\n 24: 'size-24',\n 48: 'size-48',\n 64: 'size-64',\n 80: 'size-80',\n 96: 'size-96',\n 128: 'size-128',\n 144: 'size-144',\n};\n\nexport const MAX_PROGRESS_VALUE = 100;\n\nexport const MIN_TIMER_VALUE = 0;\nexport const MAX_TIMER_VALUE = 3599;\n"],"names":[],"mappings":"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"}
package/esm/index.css CHANGED
@@ -19,35 +19,35 @@
19
19
  --circular-progress-bar-positive-color: var(--color-light-status-positive);
20
20
  --circular-progress-bar-negative-color: var(--color-light-status-negative);
21
21
  }
22
- .circular-progress-bar__component_1sri8 {
22
+ .circular-progress-bar__component_1l6t3 {
23
23
  position: relative;
24
24
  display: flex;
25
25
  justify-content: center;
26
26
  align-items: center;
27
27
  border-radius: var(--border-radius-pill);
28
28
  }
29
- .circular-progress-bar__component_1sri8.circular-progress-bar__bg-positive_1sri8 {
29
+ .circular-progress-bar__component_1l6t3.circular-progress-bar__bg-positive_1l6t3 {
30
30
  background: var(--circular-progress-bar-positive-color);
31
31
  }
32
- .circular-progress-bar__component_1sri8.circular-progress-bar__bg-negative_1sri8 {
32
+ .circular-progress-bar__component_1l6t3.circular-progress-bar__bg-negative_1l6t3 {
33
33
  background: var(--circular-progress-bar-negative-color);
34
34
  }
35
- .circular-progress-bar__svg_1sri8 {
35
+ .circular-progress-bar__svg_1l6t3 {
36
36
  display: block;
37
37
  width: 100%;
38
38
  }
39
- .circular-progress-bar__title_1sri8,
40
- .circular-progress-bar__subtitle_1sri8 {
39
+ .circular-progress-bar__title_1l6t3,
40
+ .circular-progress-bar__subtitle_1l6t3 {
41
41
  overflow: hidden;
42
42
  word-break: break-word;
43
43
  white-space: nowrap;
44
44
  text-overflow: ellipsis;
45
45
  margin: var(--gap-0) var(--gap-6);
46
46
  }
47
- .circular-progress-bar__subtitle_1sri8 {
47
+ .circular-progress-bar__subtitle_1l6t3 {
48
48
  max-height: 40px;
49
49
  }
50
- .circular-progress-bar__labelWrapper_1sri8 {
50
+ .circular-progress-bar__labelWrapper_1l6t3 {
51
51
  text-align: center;
52
52
  position: absolute;
53
53
  top: 50%;
@@ -55,153 +55,160 @@
55
55
  width: 100%;
56
56
  transform: translate(-50%, -50%);
57
57
  }
58
- .circular-progress-bar__labelWrapper_1sri8.circular-progress-bar__label_1sri8 {
58
+ .circular-progress-bar__labelWrapper_1l6t3.circular-progress-bar__label_1l6t3 {
59
59
  display: flex;
60
60
  align-items: center;
61
61
  justify-content: center;
62
62
  }
63
- .circular-progress-bar__size-144_1sri8 {
63
+ .circular-progress-bar__size-144_1l6t3 {
64
64
  width: 144px;
65
65
  height: 144px;
66
66
  }
67
- .circular-progress-bar__size-144_1sri8 .circular-progress-bar__labelWrapper_1sri8 {
67
+ .circular-progress-bar__size-144_1l6t3 .circular-progress-bar__labelWrapper_1l6t3 {
68
68
  max-width: 128px;
69
69
  }
70
- .circular-progress-bar__size-144_1sri8 .circular-progress-bar__title_1sri8 {
70
+ .circular-progress-bar__size-144_1l6t3 .circular-progress-bar__title_1l6t3 {
71
71
  max-height: 32px;
72
72
  }
73
- .circular-progress-bar__size-128_1sri8 {
73
+ .circular-progress-bar__size-128_1l6t3 {
74
74
  width: 128px;
75
75
  height: 128px;
76
76
  }
77
- .circular-progress-bar__size-128_1sri8 .circular-progress-bar__labelWrapper_1sri8 {
77
+ .circular-progress-bar__size-128_1l6t3 .circular-progress-bar__labelWrapper_1l6t3 {
78
78
  max-width: 108px;
79
79
  }
80
- .circular-progress-bar__size-128_1sri8 .circular-progress-bar__title_1sri8 {
80
+ .circular-progress-bar__size-128_1l6t3 .circular-progress-bar__title_1l6t3 {
81
81
  max-height: 32px;
82
82
  }
83
- .circular-progress-bar__size-96_1sri8 {
83
+ .circular-progress-bar__size-96_1l6t3 {
84
84
  width: 96px;
85
85
  height: 96px;
86
86
  }
87
- .circular-progress-bar__size-96_1sri8 .circular-progress-bar__labelWrapper_1sri8 {
87
+ .circular-progress-bar__size-96_1l6t3 .circular-progress-bar__labelWrapper_1l6t3 {
88
88
  max-width: 64px;
89
89
  }
90
- .circular-progress-bar__size-96_1sri8 .circular-progress-bar__title_1sri8 {
90
+ .circular-progress-bar__size-96_1l6t3 .circular-progress-bar__title_1l6t3 {
91
91
  max-height: 20px;
92
92
  }
93
- .circular-progress-bar__size-80_1sri8 {
93
+ .circular-progress-bar__size-80_1l6t3 {
94
94
  width: 80px;
95
95
  height: 80px;
96
96
  }
97
- .circular-progress-bar__size-80_1sri8 .circular-progress-bar__labelWrapper_1sri8 {
97
+ .circular-progress-bar__size-80_1l6t3 .circular-progress-bar__labelWrapper_1l6t3 {
98
98
  max-width: 64px;
99
99
  }
100
- .circular-progress-bar__size-80_1sri8 .circular-progress-bar__title_1sri8 {
100
+ .circular-progress-bar__size-80_1l6t3 .circular-progress-bar__title_1l6t3 {
101
101
  max-height: 24px;
102
102
  }
103
- .circular-progress-bar__size-64_1sri8 {
103
+ .circular-progress-bar__size-64_1l6t3 {
104
104
  width: 64px;
105
105
  height: 64px;
106
106
  }
107
- .circular-progress-bar__size-64_1sri8 .circular-progress-bar__labelWrapper_1sri8 {
107
+ .circular-progress-bar__size-64_1l6t3 .circular-progress-bar__labelWrapper_1l6t3 {
108
108
  max-width: 48px;
109
109
  }
110
- .circular-progress-bar__size-64_1sri8 .circular-progress-bar__title_1sri8 {
110
+ .circular-progress-bar__size-64_1l6t3 .circular-progress-bar__title_1l6t3 {
111
111
  max-height: 16px;
112
112
  margin: var(--gap-0);
113
113
  }
114
- .circular-progress-bar__size-48_1sri8 {
114
+ .circular-progress-bar__size-48_1l6t3 {
115
115
  width: 48px;
116
116
  height: 48px;
117
117
  }
118
- .circular-progress-bar__size-48_1sri8 .circular-progress-bar__labelWrapper_1sri8 {
118
+ .circular-progress-bar__size-48_1l6t3 .circular-progress-bar__labelWrapper_1l6t3 {
119
119
  max-width: 40px;
120
120
  }
121
- .circular-progress-bar__size-48_1sri8 .circular-progress-bar__title_1sri8 {
121
+ .circular-progress-bar__size-48_1l6t3 .circular-progress-bar__title_1l6t3 {
122
122
  max-height: 16px;
123
123
  margin: var(--gap-0);
124
124
  }
125
- .circular-progress-bar__size-24_1sri8 {
125
+ .circular-progress-bar__size-24_1l6t3 {
126
126
  width: 24px;
127
127
  height: 24px;
128
128
  }
129
- .circular-progress-bar__size-24_1sri8 .circular-progress-bar__labelWrapper_1sri8 {
129
+ .circular-progress-bar__size-24_1l6t3 .circular-progress-bar__labelWrapper_1l6t3 {
130
130
  max-width: 24px;
131
131
  }
132
- .circular-progress-bar__backgroundCircle_1sri8,
133
- .circular-progress-bar__progressCircle_1sri8 {
132
+ .circular-progress-bar__size-16_1l6t3 {
133
+ width: 16px;
134
+ height: 16px;
135
+ }
136
+ .circular-progress-bar__size-16_1l6t3 .circular-progress-bar__labelWrapper_1l6t3 {
137
+ max-width: 16px;
138
+ }
139
+ .circular-progress-bar__backgroundCircle_1l6t3,
140
+ .circular-progress-bar__progressCircle_1l6t3 {
134
141
  width: 100%;
135
142
  height: 100%;
136
143
  fill: transparent;
137
144
  }
138
- .circular-progress-bar__positive_1sri8 {
145
+ .circular-progress-bar__positive_1l6t3 {
139
146
  stroke: var(--circular-progress-bar-positive-color);
140
147
  }
141
- .circular-progress-bar__negative_1sri8 {
148
+ .circular-progress-bar__negative_1l6t3 {
142
149
  stroke: var(--circular-progress-bar-negative-color);
143
150
  }
144
- .circular-progress-bar__backgroundCircle_1sri8 {
151
+ .circular-progress-bar__backgroundCircle_1l6t3 {
145
152
  stroke: var(--circular-progress-bar-stroke-color);
146
153
  }
147
- .circular-progress-bar__backgroundCircle_1sri8.circular-progress-bar__stroke_1sri8 {
154
+ .circular-progress-bar__backgroundCircle_1l6t3.circular-progress-bar__stroke_1l6t3 {
148
155
  stroke: transparent;
149
156
  }
150
- .circular-progress-bar__progressCircle_1sri8 {
157
+ .circular-progress-bar__progressCircle_1l6t3 {
151
158
  stroke-linecap: round;
152
159
  }
153
- .circular-progress-bar__iconWrapper_1sri8 {
160
+ .circular-progress-bar__iconWrapper_1l6t3 {
154
161
  display: flex;
155
162
  align-items: center;
156
163
  justify-content: center;
157
164
  }
158
- .circular-progress-bar__iconWrapper_1sri8.circular-progress-bar__size-144_1sri8 {
165
+ .circular-progress-bar__iconWrapper_1l6t3.circular-progress-bar__size-144_1l6t3 {
159
166
  max-width: 64px;
160
167
  max-height: 64px;
161
168
  }
162
- .circular-progress-bar__iconWrapper_1sri8.circular-progress-bar__size-128_1sri8 {
169
+ .circular-progress-bar__iconWrapper_1l6t3.circular-progress-bar__size-128_1l6t3 {
163
170
  max-width: 64px;
164
171
  max-height: 64px;
165
172
  }
166
- .circular-progress-bar__iconWrapper_1sri8.circular-progress-bar__size-96_1sri8 {
173
+ .circular-progress-bar__iconWrapper_1l6t3.circular-progress-bar__size-96_1l6t3 {
167
174
  max-width: 48px;
168
175
  max-height: 48px;
169
176
  }
170
- .circular-progress-bar__iconWrapper_1sri8.circular-progress-bar__size-80_1sri8 {
177
+ .circular-progress-bar__iconWrapper_1l6t3.circular-progress-bar__size-80_1l6t3 {
171
178
  max-width: 48px;
172
179
  max-height: 48px;
173
180
  }
174
- .circular-progress-bar__iconWrapper_1sri8.circular-progress-bar__size-64_1sri8 {
181
+ .circular-progress-bar__iconWrapper_1l6t3.circular-progress-bar__size-64_1l6t3 {
175
182
  max-width: 36px;
176
183
  max-height: 36px;
177
184
  }
178
- .circular-progress-bar__iconWrapper_1sri8.circular-progress-bar__size-48_1sri8 {
185
+ .circular-progress-bar__iconWrapper_1l6t3.circular-progress-bar__size-48_1l6t3 {
179
186
  max-width: 24px;
180
187
  max-height: 24px;
181
188
  }
182
- .circular-progress-bar__iconWrapper_1sri8.circular-progress-bar__size-24_1sri8 {
189
+ .circular-progress-bar__iconWrapper_1l6t3.circular-progress-bar__size-24_1l6t3 {
183
190
  max-width: 16px;
184
191
  max-height: 16px;
185
192
  }
186
- .circular-progress-bar__iconWrapper_1sri8.circular-progress-bar__icon-tertiary_1sri8 {
193
+ .circular-progress-bar__iconWrapper_1l6t3.circular-progress-bar__icon-tertiary_1l6t3 {
187
194
  color: var(--color-light-neutral-500);
188
195
  }
189
- .circular-progress-bar__iconWrapper_1sri8.circular-progress-bar__icon-positive_1sri8 {
196
+ .circular-progress-bar__iconWrapper_1l6t3.circular-progress-bar__icon-positive_1l6t3 {
190
197
  color: var(--color-light-status-positive);
191
198
  }
192
- .circular-progress-bar__iconWrapper_1sri8.circular-progress-bar__icon-negative_1sri8 {
199
+ .circular-progress-bar__iconWrapper_1l6t3.circular-progress-bar__icon-negative_1l6t3 {
193
200
  color: var(--color-light-status-negative);
194
201
  }
195
- .circular-progress-bar__iconWrapper_1sri8.circular-progress-bar__icon-primary-inverted_1sri8 {
202
+ .circular-progress-bar__iconWrapper_1l6t3.circular-progress-bar__icon-primary-inverted_1l6t3 {
196
203
  color: var(--color-light-neutral-translucent-1300-inverted);
197
204
  }
198
- .circular-progress-bar__iconWrapper_1sri8.circular-progress-bar__icon-primary_1sri8 {
205
+ .circular-progress-bar__iconWrapper_1l6t3.circular-progress-bar__icon-primary_1l6t3 {
199
206
  color: var(--color-light-neutral-translucent-1300);
200
207
  }
201
- .circular-progress-bar__iconWrapper_1sri8.circular-progress-bar__icon-secondary_1sri8 {
208
+ .circular-progress-bar__iconWrapper_1l6t3.circular-progress-bar__icon-secondary_1l6t3 {
202
209
  color: var(--color-light-neutral-700);
203
210
  }
204
- .circular-progress-bar__icon_1sri8 {
211
+ .circular-progress-bar__icon_1l6t3 {
205
212
  width: 100%;
206
213
  height: 100%;
207
214
  }
package/esm/index.module.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import './index.css';
2
2
 
3
- var styles = {"component":"circular-progress-bar__component_1sri8","bg-positive":"circular-progress-bar__bg-positive_1sri8","bg-negative":"circular-progress-bar__bg-negative_1sri8","svg":"circular-progress-bar__svg_1sri8","title":"circular-progress-bar__title_1sri8","subtitle":"circular-progress-bar__subtitle_1sri8","labelWrapper":"circular-progress-bar__labelWrapper_1sri8","label":"circular-progress-bar__label_1sri8","size-144":"circular-progress-bar__size-144_1sri8","size-128":"circular-progress-bar__size-128_1sri8","size-96":"circular-progress-bar__size-96_1sri8","size-80":"circular-progress-bar__size-80_1sri8","size-64":"circular-progress-bar__size-64_1sri8","size-48":"circular-progress-bar__size-48_1sri8","size-24":"circular-progress-bar__size-24_1sri8","backgroundCircle":"circular-progress-bar__backgroundCircle_1sri8","progressCircle":"circular-progress-bar__progressCircle_1sri8","positive":"circular-progress-bar__positive_1sri8","negative":"circular-progress-bar__negative_1sri8","stroke":"circular-progress-bar__stroke_1sri8","iconWrapper":"circular-progress-bar__iconWrapper_1sri8","icon-tertiary":"circular-progress-bar__icon-tertiary_1sri8","icon-positive":"circular-progress-bar__icon-positive_1sri8","icon-negative":"circular-progress-bar__icon-negative_1sri8","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_1sri8","icon-primary":"circular-progress-bar__icon-primary_1sri8","icon-secondary":"circular-progress-bar__icon-secondary_1sri8","icon":"circular-progress-bar__icon_1sri8"};
3
+ var styles = {"component":"circular-progress-bar__component_1l6t3","bg-positive":"circular-progress-bar__bg-positive_1l6t3","bg-negative":"circular-progress-bar__bg-negative_1l6t3","svg":"circular-progress-bar__svg_1l6t3","title":"circular-progress-bar__title_1l6t3","subtitle":"circular-progress-bar__subtitle_1l6t3","labelWrapper":"circular-progress-bar__labelWrapper_1l6t3","label":"circular-progress-bar__label_1l6t3","size-144":"circular-progress-bar__size-144_1l6t3","size-128":"circular-progress-bar__size-128_1l6t3","size-96":"circular-progress-bar__size-96_1l6t3","size-80":"circular-progress-bar__size-80_1l6t3","size-64":"circular-progress-bar__size-64_1l6t3","size-48":"circular-progress-bar__size-48_1l6t3","size-24":"circular-progress-bar__size-24_1l6t3","size-16":"circular-progress-bar__size-16_1l6t3","backgroundCircle":"circular-progress-bar__backgroundCircle_1l6t3","progressCircle":"circular-progress-bar__progressCircle_1l6t3","positive":"circular-progress-bar__positive_1l6t3","negative":"circular-progress-bar__negative_1l6t3","stroke":"circular-progress-bar__stroke_1l6t3","iconWrapper":"circular-progress-bar__iconWrapper_1l6t3","icon-tertiary":"circular-progress-bar__icon-tertiary_1l6t3","icon-positive":"circular-progress-bar__icon-positive_1l6t3","icon-negative":"circular-progress-bar__icon-negative_1l6t3","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_1l6t3","icon-primary":"circular-progress-bar__icon-primary_1l6t3","icon-secondary":"circular-progress-bar__icon-secondary_1l6t3","icon":"circular-progress-bar__icon_1l6t3"};
4
4
 
5
5
  export { styles as default };
6
6
  //# sourceMappingURL=index.module.css.js.map
package/esm/index.module.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n:root {\n /* stroke */\n --circular-progress-bar-stroke-color: var(--color-light-neutral-translucent-300);\n\n /* positive */\n --circular-progress-bar-positive-color: var(--color-light-status-positive);\n\n /* negative */\n --circular-progress-bar-negative-color: var(--color-light-status-negative);\n}\n\n.component {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: var(--border-radius-pill);\n\n &.bg-positive {\n background: var(--circular-progress-bar-positive-color);\n }\n\n &.bg-negative {\n background: var(--circular-progress-bar-negative-color);\n }\n}\n\n.svg {\n display: block;\n width: 100%;\n}\n\n.title,\n.subtitle {\n overflow: hidden;\n word-break: break-word;\n white-space: nowrap;\n text-overflow: ellipsis;\n margin: var(--gap-0) var(--gap-6);\n}\n\n.subtitle {\n max-height: 40px;\n}\n\n.labelWrapper {\n text-align: center;\n position: absolute;\n top: 50%;\n left: 50%;\n width: 100%;\n transform: translate(-50%, -50%);\n\n &.label {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n}\n\n.size-144 {\n width: 144px;\n height: 144px;\n\n & .labelWrapper {\n max-width: 128px;\n }\n\n & .title {\n max-height: 32px;\n }\n}\n\n.size-128 {\n width: 128px;\n height: 128px;\n\n & .labelWrapper {\n max-width: 108px;\n }\n\n & .title {\n max-height: 32px;\n }\n}\n\n.size-96 {\n width: 96px;\n height: 96px;\n\n & .labelWrapper {\n max-width: 64px;\n }\n\n & .title {\n max-height: 20px;\n }\n}\n\n.size-80 {\n width: 80px;\n height: 80px;\n\n & .labelWrapper {\n max-width: 64px;\n }\n\n & .title {\n max-height: 24px;\n }\n}\n\n.size-64 {\n width: 64px;\n height: 64px;\n\n & .labelWrapper {\n max-width: 48px;\n }\n\n & .title {\n max-height: 16px;\n margin: var(--gap-0);\n }\n}\n\n.size-48 {\n width: 48px;\n height: 48px;\n\n & .labelWrapper {\n max-width: 40px;\n }\n\n & .title {\n max-height: 16px;\n margin: var(--gap-0);\n }\n}\n\n.size-24 {\n width: 24px;\n height: 24px;\n\n & .labelWrapper {\n max-width: 24px;\n }\n}\n\n.backgroundCircle,\n.progressCircle {\n width: 100%;\n height: 100%;\n fill: transparent;\n}\n\n.positive {\n stroke: var(--circular-progress-bar-positive-color);\n}\n\n.negative {\n stroke: var(--circular-progress-bar-negative-color);\n}\n\n.backgroundCircle {\n stroke: var(--circular-progress-bar-stroke-color);\n\n &.stroke {\n stroke: transparent;\n }\n}\n\n.progressCircle {\n stroke-linecap: round;\n}\n\n.iconWrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n\n &.size-144 {\n max-width: 64px;\n max-height: 64px;\n }\n\n &.size-128 {\n max-width: 64px;\n max-height: 64px;\n }\n\n &.size-96 {\n max-width: 48px;\n max-height: 48px;\n }\n\n &.size-80 {\n max-width: 48px;\n max-height: 48px;\n }\n\n &.size-64 {\n max-width: 36px;\n max-height: 36px;\n }\n\n &.size-48 {\n max-width: 24px;\n max-height: 24px;\n }\n\n &.size-24 {\n max-width: 16px;\n max-height: 16px;\n }\n\n &.icon-tertiary {\n color: var(--color-light-neutral-500);\n }\n\n &.icon-positive {\n color: var(--color-light-status-positive);\n }\n\n &.icon-negative {\n color: var(--color-light-status-negative);\n }\n\n &.icon-primary-inverted {\n color: var(--color-light-neutral-translucent-1300-inverted);\n }\n\n &.icon-primary {\n color: var(--color-light-neutral-translucent-1300);\n }\n\n &.icon-secondary {\n color: var(--color-light-neutral-700);\n }\n}\n\n.icon {\n width: 100%;\n height: 100%;\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,WAAW,CAAC,wCAAwC,CAAC,aAAa,CAAC,0CAA0C,CAAC,aAAa,CAAC,0CAA0C,CAAC,KAAK,CAAC,kCAAkC,CAAC,OAAO,CAAC,oCAAoC,CAAC,UAAU,CAAC,uCAAuC,CAAC,cAAc,CAAC,2CAA2C,CAAC,OAAO,CAAC,oCAAoC,CAAC,UAAU,CAAC,uCAAuC,CAAC,UAAU,CAAC,uCAAuC,CAAC,SAAS,CAAC,sCAAsC,CAAC,SAAS,CAAC,sCAAsC,CAAC,SAAS,CAAC,sCAAsC,CAAC,SAAS,CAAC,sCAAsC,CAAC,SAAS,CAAC,sCAAsC,CAAC,kBAAkB,CAAC,+CAA+C,CAAC,gBAAgB,CAAC,6CAA6C,CAAC,UAAU,CAAC,uCAAuC,CAAC,UAAU,CAAC,uCAAuC,CAAC,QAAQ,CAAC,qCAAqC,CAAC,aAAa,CAAC,0CAA0C,CAAC,eAAe,CAAC,4CAA4C,CAAC,eAAe,CAAC,4CAA4C,CAAC,eAAe,CAAC,4CAA4C,CAAC,uBAAuB,CAAC,oDAAoD,CAAC,cAAc,CAAC,2CAA2C,CAAC,gBAAgB,CAAC,6CAA6C,CAAC,MAAM,CAAC,mCAAmC,CAAC;;;;"}
1
+ {"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n:root {\n /* stroke */\n --circular-progress-bar-stroke-color: var(--color-light-neutral-translucent-300);\n\n /* positive */\n --circular-progress-bar-positive-color: var(--color-light-status-positive);\n\n /* negative */\n --circular-progress-bar-negative-color: var(--color-light-status-negative);\n}\n\n.component {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: var(--border-radius-pill);\n\n &.bg-positive {\n background: var(--circular-progress-bar-positive-color);\n }\n\n &.bg-negative {\n background: var(--circular-progress-bar-negative-color);\n }\n}\n\n.svg {\n display: block;\n width: 100%;\n}\n\n.title,\n.subtitle {\n overflow: hidden;\n word-break: break-word;\n white-space: nowrap;\n text-overflow: ellipsis;\n margin: var(--gap-0) var(--gap-6);\n}\n\n.subtitle {\n max-height: 40px;\n}\n\n.labelWrapper {\n text-align: center;\n position: absolute;\n top: 50%;\n left: 50%;\n width: 100%;\n transform: translate(-50%, -50%);\n\n &.label {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n}\n\n.size-144 {\n width: 144px;\n height: 144px;\n\n & .labelWrapper {\n max-width: 128px;\n }\n\n & .title {\n max-height: 32px;\n }\n}\n\n.size-128 {\n width: 128px;\n height: 128px;\n\n & .labelWrapper {\n max-width: 108px;\n }\n\n & .title {\n max-height: 32px;\n }\n}\n\n.size-96 {\n width: 96px;\n height: 96px;\n\n & .labelWrapper {\n max-width: 64px;\n }\n\n & .title {\n max-height: 20px;\n }\n}\n\n.size-80 {\n width: 80px;\n height: 80px;\n\n & .labelWrapper {\n max-width: 64px;\n }\n\n & .title {\n max-height: 24px;\n }\n}\n\n.size-64 {\n width: 64px;\n height: 64px;\n\n & .labelWrapper {\n max-width: 48px;\n }\n\n & .title {\n max-height: 16px;\n margin: var(--gap-0);\n }\n}\n\n.size-48 {\n width: 48px;\n height: 48px;\n\n & .labelWrapper {\n max-width: 40px;\n }\n\n & .title {\n max-height: 16px;\n margin: var(--gap-0);\n }\n}\n\n.size-24 {\n width: 24px;\n height: 24px;\n\n & .labelWrapper {\n max-width: 24px;\n }\n}\n\n.size-16 {\n width: 16px;\n height: 16px;\n\n & .labelWrapper {\n max-width: 16px;\n }\n}\n\n.backgroundCircle,\n.progressCircle {\n width: 100%;\n height: 100%;\n fill: transparent;\n}\n\n.positive {\n stroke: var(--circular-progress-bar-positive-color);\n}\n\n.negative {\n stroke: var(--circular-progress-bar-negative-color);\n}\n\n.backgroundCircle {\n stroke: var(--circular-progress-bar-stroke-color);\n\n &.stroke {\n stroke: transparent;\n }\n}\n\n.progressCircle {\n stroke-linecap: round;\n}\n\n.iconWrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n\n &.size-144 {\n max-width: 64px;\n max-height: 64px;\n }\n\n &.size-128 {\n max-width: 64px;\n max-height: 64px;\n }\n\n &.size-96 {\n max-width: 48px;\n max-height: 48px;\n }\n\n &.size-80 {\n max-width: 48px;\n max-height: 48px;\n }\n\n &.size-64 {\n max-width: 36px;\n max-height: 36px;\n }\n\n &.size-48 {\n max-width: 24px;\n max-height: 24px;\n }\n\n &.size-24 {\n max-width: 16px;\n max-height: 16px;\n }\n\n &.icon-tertiary {\n color: var(--color-light-neutral-500);\n }\n\n &.icon-positive {\n color: var(--color-light-status-positive);\n }\n\n &.icon-negative {\n color: var(--color-light-status-negative);\n }\n\n &.icon-primary-inverted {\n color: var(--color-light-neutral-translucent-1300-inverted);\n }\n\n &.icon-primary {\n color: var(--color-light-neutral-translucent-1300);\n }\n\n &.icon-secondary {\n color: var(--color-light-neutral-700);\n }\n}\n\n.icon {\n width: 100%;\n height: 100%;\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,WAAW,CAAC,wCAAwC,CAAC,aAAa,CAAC,0CAA0C,CAAC,aAAa,CAAC,0CAA0C,CAAC,KAAK,CAAC,kCAAkC,CAAC,OAAO,CAAC,oCAAoC,CAAC,UAAU,CAAC,uCAAuC,CAAC,cAAc,CAAC,2CAA2C,CAAC,OAAO,CAAC,oCAAoC,CAAC,UAAU,CAAC,uCAAuC,CAAC,UAAU,CAAC,uCAAuC,CAAC,SAAS,CAAC,sCAAsC,CAAC,SAAS,CAAC,sCAAsC,CAAC,SAAS,CAAC,sCAAsC,CAAC,SAAS,CAAC,sCAAsC,CAAC,SAAS,CAAC,sCAAsC,CAAC,SAAS,CAAC,sCAAsC,CAAC,kBAAkB,CAAC,+CAA+C,CAAC,gBAAgB,CAAC,6CAA6C,CAAC,UAAU,CAAC,uCAAuC,CAAC,UAAU,CAAC,uCAAuC,CAAC,QAAQ,CAAC,qCAAqC,CAAC,aAAa,CAAC,0CAA0C,CAAC,eAAe,CAAC,4CAA4C,CAAC,eAAe,CAAC,4CAA4C,CAAC,eAAe,CAAC,4CAA4C,CAAC,uBAAuB,CAAC,oDAAoD,CAAC,cAAc,CAAC,2CAA2C,CAAC,gBAAgB,CAAC,6CAA6C,CAAC,MAAM,CAAC,mCAAmC,CAAC;;;;"}
package/esm/types/component-size.d.ts CHANGED
@@ -1 +1 @@
1
- export type ComponentSize = 24 | 48 | 64 | 80 | 128 | 144;
1
+ export type ComponentSize = 16 | 24 | 48 | 64 | 80 | 128 | 144;
package/index.css CHANGED
@@ -19,35 +19,35 @@
19
19
  --circular-progress-bar-positive-color: var(--color-light-status-positive);
20
20
  --circular-progress-bar-negative-color: var(--color-light-status-negative);
21
21
  }
22
- .circular-progress-bar__component_1sri8 {
22
+ .circular-progress-bar__component_1l6t3 {
23
23
  position: relative;
24
24
  display: flex;
25
25
  justify-content: center;
26
26
  align-items: center;
27
27
  border-radius: var(--border-radius-pill);
28
28
  }
29
- .circular-progress-bar__component_1sri8.circular-progress-bar__bg-positive_1sri8 {
29
+ .circular-progress-bar__component_1l6t3.circular-progress-bar__bg-positive_1l6t3 {
30
30
  background: var(--circular-progress-bar-positive-color);
31
31
  }
32
- .circular-progress-bar__component_1sri8.circular-progress-bar__bg-negative_1sri8 {
32
+ .circular-progress-bar__component_1l6t3.circular-progress-bar__bg-negative_1l6t3 {
33
33
  background: var(--circular-progress-bar-negative-color);
34
34
  }
35
- .circular-progress-bar__svg_1sri8 {
35
+ .circular-progress-bar__svg_1l6t3 {
36
36
  display: block;
37
37
  width: 100%;
38
38
  }
39
- .circular-progress-bar__title_1sri8,
40
- .circular-progress-bar__subtitle_1sri8 {
39
+ .circular-progress-bar__title_1l6t3,
40
+ .circular-progress-bar__subtitle_1l6t3 {
41
41
  overflow: hidden;
42
42
  word-break: break-word;
43
43
  white-space: nowrap;
44
44
  text-overflow: ellipsis;
45
45
  margin: var(--gap-0) var(--gap-6);
46
46
  }
47
- .circular-progress-bar__subtitle_1sri8 {
47
+ .circular-progress-bar__subtitle_1l6t3 {
48
48
  max-height: 40px;
49
49
  }
50
- .circular-progress-bar__labelWrapper_1sri8 {
50
+ .circular-progress-bar__labelWrapper_1l6t3 {
51
51
  text-align: center;
52
52
  position: absolute;
53
53
  top: 50%;
@@ -55,153 +55,160 @@
55
55
  width: 100%;
56
56
  transform: translate(-50%, -50%);
57
57
  }
58
- .circular-progress-bar__labelWrapper_1sri8.circular-progress-bar__label_1sri8 {
58
+ .circular-progress-bar__labelWrapper_1l6t3.circular-progress-bar__label_1l6t3 {
59
59
  display: flex;
60
60
  align-items: center;
61
61
  justify-content: center;
62
62
  }
63
- .circular-progress-bar__size-144_1sri8 {
63
+ .circular-progress-bar__size-144_1l6t3 {
64
64
  width: 144px;
65
65
  height: 144px;
66
66
  }
67
- .circular-progress-bar__size-144_1sri8 .circular-progress-bar__labelWrapper_1sri8 {
67
+ .circular-progress-bar__size-144_1l6t3 .circular-progress-bar__labelWrapper_1l6t3 {
68
68
  max-width: 128px;
69
69
  }
70
- .circular-progress-bar__size-144_1sri8 .circular-progress-bar__title_1sri8 {
70
+ .circular-progress-bar__size-144_1l6t3 .circular-progress-bar__title_1l6t3 {
71
71
  max-height: 32px;
72
72
  }
73
- .circular-progress-bar__size-128_1sri8 {
73
+ .circular-progress-bar__size-128_1l6t3 {
74
74
  width: 128px;
75
75
  height: 128px;
76
76
  }
77
- .circular-progress-bar__size-128_1sri8 .circular-progress-bar__labelWrapper_1sri8 {
77
+ .circular-progress-bar__size-128_1l6t3 .circular-progress-bar__labelWrapper_1l6t3 {
78
78
  max-width: 108px;
79
79
  }
80
- .circular-progress-bar__size-128_1sri8 .circular-progress-bar__title_1sri8 {
80
+ .circular-progress-bar__size-128_1l6t3 .circular-progress-bar__title_1l6t3 {
81
81
  max-height: 32px;
82
82
  }
83
- .circular-progress-bar__size-96_1sri8 {
83
+ .circular-progress-bar__size-96_1l6t3 {
84
84
  width: 96px;
85
85
  height: 96px;
86
86
  }
87
- .circular-progress-bar__size-96_1sri8 .circular-progress-bar__labelWrapper_1sri8 {
87
+ .circular-progress-bar__size-96_1l6t3 .circular-progress-bar__labelWrapper_1l6t3 {
88
88
  max-width: 64px;
89
89
  }
90
- .circular-progress-bar__size-96_1sri8 .circular-progress-bar__title_1sri8 {
90
+ .circular-progress-bar__size-96_1l6t3 .circular-progress-bar__title_1l6t3 {
91
91
  max-height: 20px;
92
92
  }
93
- .circular-progress-bar__size-80_1sri8 {
93
+ .circular-progress-bar__size-80_1l6t3 {
94
94
  width: 80px;
95
95
  height: 80px;
96
96
  }
97
- .circular-progress-bar__size-80_1sri8 .circular-progress-bar__labelWrapper_1sri8 {
97
+ .circular-progress-bar__size-80_1l6t3 .circular-progress-bar__labelWrapper_1l6t3 {
98
98
  max-width: 64px;
99
99
  }
100
- .circular-progress-bar__size-80_1sri8 .circular-progress-bar__title_1sri8 {
100
+ .circular-progress-bar__size-80_1l6t3 .circular-progress-bar__title_1l6t3 {
101
101
  max-height: 24px;
102
102
  }
103
- .circular-progress-bar__size-64_1sri8 {
103
+ .circular-progress-bar__size-64_1l6t3 {
104
104
  width: 64px;
105
105
  height: 64px;
106
106
  }
107
- .circular-progress-bar__size-64_1sri8 .circular-progress-bar__labelWrapper_1sri8 {
107
+ .circular-progress-bar__size-64_1l6t3 .circular-progress-bar__labelWrapper_1l6t3 {
108
108
  max-width: 48px;
109
109
  }
110
- .circular-progress-bar__size-64_1sri8 .circular-progress-bar__title_1sri8 {
110
+ .circular-progress-bar__size-64_1l6t3 .circular-progress-bar__title_1l6t3 {
111
111
  max-height: 16px;
112
112
  margin: var(--gap-0);
113
113
  }
114
- .circular-progress-bar__size-48_1sri8 {
114
+ .circular-progress-bar__size-48_1l6t3 {
115
115
  width: 48px;
116
116
  height: 48px;
117
117
  }
118
- .circular-progress-bar__size-48_1sri8 .circular-progress-bar__labelWrapper_1sri8 {
118
+ .circular-progress-bar__size-48_1l6t3 .circular-progress-bar__labelWrapper_1l6t3 {
119
119
  max-width: 40px;
120
120
  }
121
- .circular-progress-bar__size-48_1sri8 .circular-progress-bar__title_1sri8 {
121
+ .circular-progress-bar__size-48_1l6t3 .circular-progress-bar__title_1l6t3 {
122
122
  max-height: 16px;
123
123
  margin: var(--gap-0);
124
124
  }
125
- .circular-progress-bar__size-24_1sri8 {
125
+ .circular-progress-bar__size-24_1l6t3 {
126
126
  width: 24px;
127
127
  height: 24px;
128
128
  }
129
- .circular-progress-bar__size-24_1sri8 .circular-progress-bar__labelWrapper_1sri8 {
129
+ .circular-progress-bar__size-24_1l6t3 .circular-progress-bar__labelWrapper_1l6t3 {
130
130
  max-width: 24px;
131
131
  }
132
- .circular-progress-bar__backgroundCircle_1sri8,
133
- .circular-progress-bar__progressCircle_1sri8 {
132
+ .circular-progress-bar__size-16_1l6t3 {
133
+ width: 16px;
134
+ height: 16px;
135
+ }
136
+ .circular-progress-bar__size-16_1l6t3 .circular-progress-bar__labelWrapper_1l6t3 {
137
+ max-width: 16px;
138
+ }
139
+ .circular-progress-bar__backgroundCircle_1l6t3,
140
+ .circular-progress-bar__progressCircle_1l6t3 {
134
141
  width: 100%;
135
142
  height: 100%;
136
143
  fill: transparent;
137
144
  }
138
- .circular-progress-bar__positive_1sri8 {
145
+ .circular-progress-bar__positive_1l6t3 {
139
146
  stroke: var(--circular-progress-bar-positive-color);
140
147
  }
141
- .circular-progress-bar__negative_1sri8 {
148
+ .circular-progress-bar__negative_1l6t3 {
142
149
  stroke: var(--circular-progress-bar-negative-color);
143
150
  }
144
- .circular-progress-bar__backgroundCircle_1sri8 {
151
+ .circular-progress-bar__backgroundCircle_1l6t3 {
145
152
  stroke: var(--circular-progress-bar-stroke-color);
146
153
  }
147
- .circular-progress-bar__backgroundCircle_1sri8.circular-progress-bar__stroke_1sri8 {
154
+ .circular-progress-bar__backgroundCircle_1l6t3.circular-progress-bar__stroke_1l6t3 {
148
155
  stroke: transparent;
149
156
  }
150
- .circular-progress-bar__progressCircle_1sri8 {
157
+ .circular-progress-bar__progressCircle_1l6t3 {
151
158
  stroke-linecap: round;
152
159
  }
153
- .circular-progress-bar__iconWrapper_1sri8 {
160
+ .circular-progress-bar__iconWrapper_1l6t3 {
154
161
  display: flex;
155
162
  align-items: center;
156
163
  justify-content: center;
157
164
  }
158
- .circular-progress-bar__iconWrapper_1sri8.circular-progress-bar__size-144_1sri8 {
165
+ .circular-progress-bar__iconWrapper_1l6t3.circular-progress-bar__size-144_1l6t3 {
159
166
  max-width: 64px;
160
167
  max-height: 64px;
161
168
  }
162
- .circular-progress-bar__iconWrapper_1sri8.circular-progress-bar__size-128_1sri8 {
169
+ .circular-progress-bar__iconWrapper_1l6t3.circular-progress-bar__size-128_1l6t3 {
163
170
  max-width: 64px;
164
171
  max-height: 64px;
165
172
  }
166
- .circular-progress-bar__iconWrapper_1sri8.circular-progress-bar__size-96_1sri8 {
173
+ .circular-progress-bar__iconWrapper_1l6t3.circular-progress-bar__size-96_1l6t3 {
167
174
  max-width: 48px;
168
175
  max-height: 48px;
169
176
  }
170
- .circular-progress-bar__iconWrapper_1sri8.circular-progress-bar__size-80_1sri8 {
177
+ .circular-progress-bar__iconWrapper_1l6t3.circular-progress-bar__size-80_1l6t3 {
171
178
  max-width: 48px;
172
179
  max-height: 48px;
173
180
  }
174
- .circular-progress-bar__iconWrapper_1sri8.circular-progress-bar__size-64_1sri8 {
181
+ .circular-progress-bar__iconWrapper_1l6t3.circular-progress-bar__size-64_1l6t3 {
175
182
  max-width: 36px;
176
183
  max-height: 36px;
177
184
  }
178
- .circular-progress-bar__iconWrapper_1sri8.circular-progress-bar__size-48_1sri8 {
185
+ .circular-progress-bar__iconWrapper_1l6t3.circular-progress-bar__size-48_1l6t3 {
179
186
  max-width: 24px;
180
187
  max-height: 24px;
181
188
  }
182
- .circular-progress-bar__iconWrapper_1sri8.circular-progress-bar__size-24_1sri8 {
189
+ .circular-progress-bar__iconWrapper_1l6t3.circular-progress-bar__size-24_1l6t3 {
183
190
  max-width: 16px;
184
191
  max-height: 16px;
185
192
  }
186
- .circular-progress-bar__iconWrapper_1sri8.circular-progress-bar__icon-tertiary_1sri8 {
193
+ .circular-progress-bar__iconWrapper_1l6t3.circular-progress-bar__icon-tertiary_1l6t3 {
187
194
  color: var(--color-light-neutral-500);
188
195
  }
189
- .circular-progress-bar__iconWrapper_1sri8.circular-progress-bar__icon-positive_1sri8 {
196
+ .circular-progress-bar__iconWrapper_1l6t3.circular-progress-bar__icon-positive_1l6t3 {
190
197
  color: var(--color-light-status-positive);
191
198
  }
192
- .circular-progress-bar__iconWrapper_1sri8.circular-progress-bar__icon-negative_1sri8 {
199
+ .circular-progress-bar__iconWrapper_1l6t3.circular-progress-bar__icon-negative_1l6t3 {
193
200
  color: var(--color-light-status-negative);
194
201
  }
195
- .circular-progress-bar__iconWrapper_1sri8.circular-progress-bar__icon-primary-inverted_1sri8 {
202
+ .circular-progress-bar__iconWrapper_1l6t3.circular-progress-bar__icon-primary-inverted_1l6t3 {
196
203
  color: var(--color-light-neutral-translucent-1300-inverted);
197
204
  }
198
- .circular-progress-bar__iconWrapper_1sri8.circular-progress-bar__icon-primary_1sri8 {
205
+ .circular-progress-bar__iconWrapper_1l6t3.circular-progress-bar__icon-primary_1l6t3 {
199
206
  color: var(--color-light-neutral-translucent-1300);
200
207
  }
201
- .circular-progress-bar__iconWrapper_1sri8.circular-progress-bar__icon-secondary_1sri8 {
208
+ .circular-progress-bar__iconWrapper_1l6t3.circular-progress-bar__icon-secondary_1l6t3 {
202
209
  color: var(--color-light-neutral-700);
203
210
  }
204
- .circular-progress-bar__icon_1sri8 {
211
+ .circular-progress-bar__icon_1l6t3 {
205
212
  width: 100%;
206
213
  height: 100%;
207
214
  }