@alfalab/core-components-circular-progress-bar 3.0.1 → 3.0.2

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.
package/Component.js CHANGED
@@ -38,7 +38,7 @@ var __assign = function () {
38
38
  return __assign.apply(this, arguments);
39
39
  };
40
40
 
41
- var styles = {"component":"circular-progress-bar__component_1sqfo","svg":"circular-progress-bar__svg_1sqfo","title":"circular-progress-bar__title_1sqfo","subtitle":"circular-progress-bar__subtitle_1sqfo","labelWrapper":"circular-progress-bar__labelWrapper_1sqfo","label":"circular-progress-bar__label_1sqfo","typography":"circular-progress-bar__typography_1sqfo","xxl":"circular-progress-bar__xxl_1sqfo","xl":"circular-progress-bar__xl_1sqfo","l":"circular-progress-bar__l_1sqfo","m":"circular-progress-bar__m_1sqfo","s":"circular-progress-bar__s_1sqfo","xs":"circular-progress-bar__xs_1sqfo","backgroundCircle":"circular-progress-bar__backgroundCircle_1sqfo","progressCircle":"circular-progress-bar__progressCircle_1sqfo","positive":"circular-progress-bar__positive_1sqfo","negative":"circular-progress-bar__negative_1sqfo","stroke":"circular-progress-bar__stroke_1sqfo","bg-positive":"circular-progress-bar__bg-positive_1sqfo","bg-negative":"circular-progress-bar__bg-negative_1sqfo","iconWrapper":"circular-progress-bar__iconWrapper_1sqfo","icon-tertiary":"circular-progress-bar__icon-tertiary_1sqfo","icon-positive":"circular-progress-bar__icon-positive_1sqfo","icon-negative":"circular-progress-bar__icon-negative_1sqfo","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_1sqfo","icon-primary":"circular-progress-bar__icon-primary_1sqfo","icon-secondary":"circular-progress-bar__icon-secondary_1sqfo","icon":"circular-progress-bar__icon_1sqfo"};
41
+ var styles = {"component":"circular-progress-bar__component_1b78s","svg":"circular-progress-bar__svg_1b78s","title":"circular-progress-bar__title_1b78s","subtitle":"circular-progress-bar__subtitle_1b78s","labelWrapper":"circular-progress-bar__labelWrapper_1b78s","label":"circular-progress-bar__label_1b78s","typography":"circular-progress-bar__typography_1b78s","xxl":"circular-progress-bar__xxl_1b78s","xl":"circular-progress-bar__xl_1b78s","l":"circular-progress-bar__l_1b78s","m":"circular-progress-bar__m_1b78s","s":"circular-progress-bar__s_1b78s","xs":"circular-progress-bar__xs_1b78s","backgroundCircle":"circular-progress-bar__backgroundCircle_1b78s","progressCircle":"circular-progress-bar__progressCircle_1b78s","positive":"circular-progress-bar__positive_1b78s","negative":"circular-progress-bar__negative_1b78s","stroke":"circular-progress-bar__stroke_1b78s","bg-positive":"circular-progress-bar__bg-positive_1b78s","bg-negative":"circular-progress-bar__bg-negative_1b78s","iconWrapper":"circular-progress-bar__iconWrapper_1b78s","icon-tertiary":"circular-progress-bar__icon-tertiary_1b78s","icon-positive":"circular-progress-bar__icon-positive_1b78s","icon-negative":"circular-progress-bar__icon-negative_1b78s","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_1b78s","icon-primary":"circular-progress-bar__icon-primary_1b78s","icon-secondary":"circular-progress-bar__icon-secondary_1b78s","icon":"circular-progress-bar__icon_1b78s"};
42
42
  require('./index.css')
43
43
 
44
44
  var SIZES = {
package/esm/Component.js CHANGED
@@ -29,7 +29,7 @@ var __assign = function () {
29
29
  return __assign.apply(this, arguments);
30
30
  };
31
31
 
32
- var styles = {"component":"circular-progress-bar__component_1sqfo","svg":"circular-progress-bar__svg_1sqfo","title":"circular-progress-bar__title_1sqfo","subtitle":"circular-progress-bar__subtitle_1sqfo","labelWrapper":"circular-progress-bar__labelWrapper_1sqfo","label":"circular-progress-bar__label_1sqfo","typography":"circular-progress-bar__typography_1sqfo","xxl":"circular-progress-bar__xxl_1sqfo","xl":"circular-progress-bar__xl_1sqfo","l":"circular-progress-bar__l_1sqfo","m":"circular-progress-bar__m_1sqfo","s":"circular-progress-bar__s_1sqfo","xs":"circular-progress-bar__xs_1sqfo","backgroundCircle":"circular-progress-bar__backgroundCircle_1sqfo","progressCircle":"circular-progress-bar__progressCircle_1sqfo","positive":"circular-progress-bar__positive_1sqfo","negative":"circular-progress-bar__negative_1sqfo","stroke":"circular-progress-bar__stroke_1sqfo","bg-positive":"circular-progress-bar__bg-positive_1sqfo","bg-negative":"circular-progress-bar__bg-negative_1sqfo","iconWrapper":"circular-progress-bar__iconWrapper_1sqfo","icon-tertiary":"circular-progress-bar__icon-tertiary_1sqfo","icon-positive":"circular-progress-bar__icon-positive_1sqfo","icon-negative":"circular-progress-bar__icon-negative_1sqfo","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_1sqfo","icon-primary":"circular-progress-bar__icon-primary_1sqfo","icon-secondary":"circular-progress-bar__icon-secondary_1sqfo","icon":"circular-progress-bar__icon_1sqfo"};
32
+ var styles = {"component":"circular-progress-bar__component_1b78s","svg":"circular-progress-bar__svg_1b78s","title":"circular-progress-bar__title_1b78s","subtitle":"circular-progress-bar__subtitle_1b78s","labelWrapper":"circular-progress-bar__labelWrapper_1b78s","label":"circular-progress-bar__label_1b78s","typography":"circular-progress-bar__typography_1b78s","xxl":"circular-progress-bar__xxl_1b78s","xl":"circular-progress-bar__xl_1b78s","l":"circular-progress-bar__l_1b78s","m":"circular-progress-bar__m_1b78s","s":"circular-progress-bar__s_1b78s","xs":"circular-progress-bar__xs_1b78s","backgroundCircle":"circular-progress-bar__backgroundCircle_1b78s","progressCircle":"circular-progress-bar__progressCircle_1b78s","positive":"circular-progress-bar__positive_1b78s","negative":"circular-progress-bar__negative_1b78s","stroke":"circular-progress-bar__stroke_1b78s","bg-positive":"circular-progress-bar__bg-positive_1b78s","bg-negative":"circular-progress-bar__bg-negative_1b78s","iconWrapper":"circular-progress-bar__iconWrapper_1b78s","icon-tertiary":"circular-progress-bar__icon-tertiary_1b78s","icon-positive":"circular-progress-bar__icon-positive_1b78s","icon-negative":"circular-progress-bar__icon-negative_1b78s","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_1b78s","icon-primary":"circular-progress-bar__icon-primary_1b78s","icon-secondary":"circular-progress-bar__icon-secondary_1b78s","icon":"circular-progress-bar__icon_1b78s"};
33
33
  require('./index.css')
34
34
 
35
35
  var SIZES = {
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 6yca2 */
1
+ /* hash: 1q57u */
2
2
  :root {
3
3
  --color-light-bg-tertiary: #e7e9eb;
4
4
  --color-light-graphic-negative: #f15045;
@@ -34,28 +34,28 @@
34
34
  --circular-progress-bar-font-family: var(--font-family-system);
35
35
  --circular-progress-bar-font-weight: 600;
36
36
  }
37
- .circular-progress-bar__component_1sqfo {
37
+ .circular-progress-bar__component_1b78s {
38
38
  position: relative;
39
39
  display: flex;
40
40
  justify-content: center;
41
41
  align-items: center;
42
42
  }
43
- .circular-progress-bar__svg_1sqfo {
43
+ .circular-progress-bar__svg_1b78s {
44
44
  display: block;
45
45
  width: 100%;
46
46
  }
47
- .circular-progress-bar__title_1sqfo,
48
- .circular-progress-bar__subtitle_1sqfo {
47
+ .circular-progress-bar__title_1b78s,
48
+ .circular-progress-bar__subtitle_1b78s {
49
49
  overflow: hidden;
50
50
  word-break: break-word;
51
51
  white-space: nowrap;
52
52
  text-overflow: ellipsis;
53
53
  margin: 0 6px;
54
54
  }
55
- .circular-progress-bar__subtitle_1sqfo {
55
+ .circular-progress-bar__subtitle_1b78s {
56
56
  max-height: 40px;
57
57
  }
58
- .circular-progress-bar__labelWrapper_1sqfo {
58
+ .circular-progress-bar__labelWrapper_1b78s {
59
59
  text-align: center;
60
60
  position: absolute;
61
61
  top: 50%;
@@ -63,150 +63,150 @@
63
63
  width: 100%;
64
64
  transform: translate(-50%, -50%)
65
65
  }
66
- .circular-progress-bar__labelWrapper_1sqfo.circular-progress-bar__label_1sqfo {
66
+ .circular-progress-bar__labelWrapper_1b78s.circular-progress-bar__label_1b78s {
67
67
  display: flex;
68
68
  align-items: center;
69
69
  justify-content: center;
70
70
  }
71
- .circular-progress-bar__typography_1sqfo {
71
+ .circular-progress-bar__typography_1b78s {
72
72
  font-feature-settings: 'ss01';
73
73
  font-weight: var(--circular-progress-bar-font-weight);
74
74
  font-family: var(--circular-progress-bar-font-family);
75
75
  }
76
- .circular-progress-bar__xxl_1sqfo {
76
+ .circular-progress-bar__xxl_1b78s {
77
77
  width: 144px;
78
78
  height: 144px
79
79
  }
80
- .circular-progress-bar__xxl_1sqfo .circular-progress-bar__labelWrapper_1sqfo {
80
+ .circular-progress-bar__xxl_1b78s .circular-progress-bar__labelWrapper_1b78s {
81
81
  max-width: 128px;
82
82
  }
83
- .circular-progress-bar__xxl_1sqfo .circular-progress-bar__title_1sqfo {
83
+ .circular-progress-bar__xxl_1b78s .circular-progress-bar__title_1b78s {
84
84
  max-height: 32px;
85
85
  }
86
- .circular-progress-bar__xl_1sqfo {
86
+ .circular-progress-bar__xl_1b78s {
87
87
  width: 128px;
88
88
  height: 128px
89
89
  }
90
- .circular-progress-bar__xl_1sqfo .circular-progress-bar__labelWrapper_1sqfo {
90
+ .circular-progress-bar__xl_1b78s .circular-progress-bar__labelWrapper_1b78s {
91
91
  max-width: 108px;
92
92
  }
93
- .circular-progress-bar__xl_1sqfo .circular-progress-bar__title_1sqfo {
93
+ .circular-progress-bar__xl_1b78s .circular-progress-bar__title_1b78s {
94
94
  max-height: 32px;
95
95
  }
96
- .circular-progress-bar__l_1sqfo {
96
+ .circular-progress-bar__l_1b78s {
97
97
  width: 80px;
98
98
  height: 80px
99
99
  }
100
- .circular-progress-bar__l_1sqfo .circular-progress-bar__labelWrapper_1sqfo {
100
+ .circular-progress-bar__l_1b78s .circular-progress-bar__labelWrapper_1b78s {
101
101
  max-width: 64px;
102
102
  }
103
- .circular-progress-bar__l_1sqfo .circular-progress-bar__title_1sqfo {
103
+ .circular-progress-bar__l_1b78s .circular-progress-bar__title_1b78s {
104
104
  max-height: 24px;
105
105
  }
106
- .circular-progress-bar__m_1sqfo {
106
+ .circular-progress-bar__m_1b78s {
107
107
  width: 64px;
108
108
  height: 64px
109
109
  }
110
- .circular-progress-bar__m_1sqfo .circular-progress-bar__labelWrapper_1sqfo {
110
+ .circular-progress-bar__m_1b78s .circular-progress-bar__labelWrapper_1b78s {
111
111
  max-width: 48px;
112
112
  }
113
- .circular-progress-bar__m_1sqfo .circular-progress-bar__title_1sqfo {
113
+ .circular-progress-bar__m_1b78s .circular-progress-bar__title_1b78s {
114
114
  max-height: 16px;
115
115
  margin: 0;
116
116
  }
117
- .circular-progress-bar__s_1sqfo {
117
+ .circular-progress-bar__s_1b78s {
118
118
  width: 48px;
119
119
  height: 48px
120
120
  }
121
- .circular-progress-bar__s_1sqfo .circular-progress-bar__labelWrapper_1sqfo {
121
+ .circular-progress-bar__s_1b78s .circular-progress-bar__labelWrapper_1b78s {
122
122
  max-width: 40px;
123
123
  }
124
- .circular-progress-bar__s_1sqfo .circular-progress-bar__title_1sqfo {
124
+ .circular-progress-bar__s_1b78s .circular-progress-bar__title_1b78s {
125
125
  max-height: 16px;
126
126
  margin: 0;
127
127
  }
128
- .circular-progress-bar__xs_1sqfo {
128
+ .circular-progress-bar__xs_1b78s {
129
129
  width: 24px;
130
130
  height: 24px
131
131
  }
132
- .circular-progress-bar__xs_1sqfo .circular-progress-bar__labelWrapper_1sqfo {
132
+ .circular-progress-bar__xs_1b78s .circular-progress-bar__labelWrapper_1b78s {
133
133
  max-width: 24px;
134
134
  }
135
- .circular-progress-bar__backgroundCircle_1sqfo,
136
- .circular-progress-bar__progressCircle_1sqfo {
135
+ .circular-progress-bar__backgroundCircle_1b78s,
136
+ .circular-progress-bar__progressCircle_1b78s {
137
137
  width: 100%;
138
138
  height: 100%;
139
139
  fill: transparent;
140
140
  }
141
- .circular-progress-bar__positive_1sqfo {
141
+ .circular-progress-bar__positive_1b78s {
142
142
  stroke: var(--circular-progress-bar-positive-color);
143
143
  }
144
- .circular-progress-bar__negative_1sqfo {
144
+ .circular-progress-bar__negative_1b78s {
145
145
  stroke: var(--circular-progress-bar-negative-color);
146
146
  }
147
- .circular-progress-bar__backgroundCircle_1sqfo {
147
+ .circular-progress-bar__backgroundCircle_1b78s {
148
148
  stroke: var(--circular-progress-bar-bg-color)
149
149
  }
150
- .circular-progress-bar__backgroundCircle_1sqfo.circular-progress-bar__stroke_1sqfo {
150
+ .circular-progress-bar__backgroundCircle_1b78s.circular-progress-bar__stroke_1b78s {
151
151
  stroke: transparent;
152
152
  }
153
- .circular-progress-bar__progressCircle_1sqfo {
153
+ .circular-progress-bar__progressCircle_1b78s {
154
154
  stroke-linecap: round
155
155
  }
156
- .circular-progress-bar__progressCircle_1sqfo.circular-progress-bar__bg-positive_1sqfo {
156
+ .circular-progress-bar__progressCircle_1b78s.circular-progress-bar__bg-positive_1b78s {
157
157
  fill: var(--circular-progress-bar-positive-color);
158
158
  }
159
- .circular-progress-bar__progressCircle_1sqfo.circular-progress-bar__bg-negative_1sqfo {
159
+ .circular-progress-bar__progressCircle_1b78s.circular-progress-bar__bg-negative_1b78s {
160
160
  fill: var(--circular-progress-bar-negative-color);
161
161
  }
162
- .circular-progress-bar__iconWrapper_1sqfo {
162
+ .circular-progress-bar__iconWrapper_1b78s {
163
163
  display: flex;
164
164
  align-items: center;
165
165
  justify-content: center
166
166
  }
167
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__xxl_1sqfo {
167
+ .circular-progress-bar__iconWrapper_1b78s.circular-progress-bar__xxl_1b78s {
168
168
  max-width: 64px;
169
169
  max-height: 64px;
170
170
  }
171
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__xl_1sqfo {
171
+ .circular-progress-bar__iconWrapper_1b78s.circular-progress-bar__xl_1b78s {
172
172
  max-width: 64px;
173
173
  max-height: 64px;
174
174
  }
175
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__l_1sqfo {
175
+ .circular-progress-bar__iconWrapper_1b78s.circular-progress-bar__l_1b78s {
176
176
  max-width: 48px;
177
177
  max-height: 48px;
178
178
  }
179
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__m_1sqfo {
179
+ .circular-progress-bar__iconWrapper_1b78s.circular-progress-bar__m_1b78s {
180
180
  max-width: 36px;
181
181
  max-height: 36px;
182
182
  }
183
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__s_1sqfo {
183
+ .circular-progress-bar__iconWrapper_1b78s.circular-progress-bar__s_1b78s {
184
184
  max-width: 24px;
185
185
  max-height: 24px;
186
186
  }
187
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__xs_1sqfo {
187
+ .circular-progress-bar__iconWrapper_1b78s.circular-progress-bar__xs_1b78s {
188
188
  max-width: 16px;
189
189
  max-height: 16px;
190
190
  }
191
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__icon-tertiary_1sqfo {
191
+ .circular-progress-bar__iconWrapper_1b78s.circular-progress-bar__icon-tertiary_1b78s {
192
192
  color: var(--color-light-graphic-tertiary);
193
193
  }
194
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__icon-positive_1sqfo {
194
+ .circular-progress-bar__iconWrapper_1b78s.circular-progress-bar__icon-positive_1b78s {
195
195
  color: var(--color-light-graphic-positive);
196
196
  }
197
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__icon-negative_1sqfo {
197
+ .circular-progress-bar__iconWrapper_1b78s.circular-progress-bar__icon-negative_1b78s {
198
198
  color: var(--color-light-graphic-negative);
199
199
  }
200
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__icon-primary-inverted_1sqfo {
200
+ .circular-progress-bar__iconWrapper_1b78s.circular-progress-bar__icon-primary-inverted_1b78s {
201
201
  color: var(--color-light-graphic-primary-inverted);
202
202
  }
203
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__icon-primary_1sqfo {
203
+ .circular-progress-bar__iconWrapper_1b78s.circular-progress-bar__icon-primary_1b78s {
204
204
  color: var(--color-light-graphic-primary);
205
205
  }
206
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__icon-secondary_1sqfo {
206
+ .circular-progress-bar__iconWrapper_1b78s.circular-progress-bar__icon-secondary_1b78s {
207
207
  color: var(--color-light-graphic-secondary);
208
208
  }
209
- .circular-progress-bar__icon_1sqfo {
209
+ .circular-progress-bar__icon_1b78s {
210
210
  width: 100%;
211
211
  height: 100%;
212
212
  }
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 6yca2 */
1
+ /* hash: 1q57u */
2
2
  :root {
3
3
  --color-light-bg-tertiary: #e7e9eb;
4
4
  --color-light-graphic-negative: #f15045;
@@ -34,28 +34,28 @@
34
34
  --circular-progress-bar-font-family: var(--font-family-system);
35
35
  --circular-progress-bar-font-weight: 600;
36
36
  }
37
- .circular-progress-bar__component_1sqfo {
37
+ .circular-progress-bar__component_1b78s {
38
38
  position: relative;
39
39
  display: flex;
40
40
  justify-content: center;
41
41
  align-items: center;
42
42
  }
43
- .circular-progress-bar__svg_1sqfo {
43
+ .circular-progress-bar__svg_1b78s {
44
44
  display: block;
45
45
  width: 100%;
46
46
  }
47
- .circular-progress-bar__title_1sqfo,
48
- .circular-progress-bar__subtitle_1sqfo {
47
+ .circular-progress-bar__title_1b78s,
48
+ .circular-progress-bar__subtitle_1b78s {
49
49
  overflow: hidden;
50
50
  word-break: break-word;
51
51
  white-space: nowrap;
52
52
  text-overflow: ellipsis;
53
53
  margin: 0 6px;
54
54
  }
55
- .circular-progress-bar__subtitle_1sqfo {
55
+ .circular-progress-bar__subtitle_1b78s {
56
56
  max-height: 40px;
57
57
  }
58
- .circular-progress-bar__labelWrapper_1sqfo {
58
+ .circular-progress-bar__labelWrapper_1b78s {
59
59
  text-align: center;
60
60
  position: absolute;
61
61
  top: 50%;
@@ -63,150 +63,150 @@
63
63
  width: 100%;
64
64
  transform: translate(-50%, -50%)
65
65
  }
66
- .circular-progress-bar__labelWrapper_1sqfo.circular-progress-bar__label_1sqfo {
66
+ .circular-progress-bar__labelWrapper_1b78s.circular-progress-bar__label_1b78s {
67
67
  display: flex;
68
68
  align-items: center;
69
69
  justify-content: center;
70
70
  }
71
- .circular-progress-bar__typography_1sqfo {
71
+ .circular-progress-bar__typography_1b78s {
72
72
  font-feature-settings: 'ss01';
73
73
  font-weight: var(--circular-progress-bar-font-weight);
74
74
  font-family: var(--circular-progress-bar-font-family);
75
75
  }
76
- .circular-progress-bar__xxl_1sqfo {
76
+ .circular-progress-bar__xxl_1b78s {
77
77
  width: 144px;
78
78
  height: 144px
79
79
  }
80
- .circular-progress-bar__xxl_1sqfo .circular-progress-bar__labelWrapper_1sqfo {
80
+ .circular-progress-bar__xxl_1b78s .circular-progress-bar__labelWrapper_1b78s {
81
81
  max-width: 128px;
82
82
  }
83
- .circular-progress-bar__xxl_1sqfo .circular-progress-bar__title_1sqfo {
83
+ .circular-progress-bar__xxl_1b78s .circular-progress-bar__title_1b78s {
84
84
  max-height: 32px;
85
85
  }
86
- .circular-progress-bar__xl_1sqfo {
86
+ .circular-progress-bar__xl_1b78s {
87
87
  width: 128px;
88
88
  height: 128px
89
89
  }
90
- .circular-progress-bar__xl_1sqfo .circular-progress-bar__labelWrapper_1sqfo {
90
+ .circular-progress-bar__xl_1b78s .circular-progress-bar__labelWrapper_1b78s {
91
91
  max-width: 108px;
92
92
  }
93
- .circular-progress-bar__xl_1sqfo .circular-progress-bar__title_1sqfo {
93
+ .circular-progress-bar__xl_1b78s .circular-progress-bar__title_1b78s {
94
94
  max-height: 32px;
95
95
  }
96
- .circular-progress-bar__l_1sqfo {
96
+ .circular-progress-bar__l_1b78s {
97
97
  width: 80px;
98
98
  height: 80px
99
99
  }
100
- .circular-progress-bar__l_1sqfo .circular-progress-bar__labelWrapper_1sqfo {
100
+ .circular-progress-bar__l_1b78s .circular-progress-bar__labelWrapper_1b78s {
101
101
  max-width: 64px;
102
102
  }
103
- .circular-progress-bar__l_1sqfo .circular-progress-bar__title_1sqfo {
103
+ .circular-progress-bar__l_1b78s .circular-progress-bar__title_1b78s {
104
104
  max-height: 24px;
105
105
  }
106
- .circular-progress-bar__m_1sqfo {
106
+ .circular-progress-bar__m_1b78s {
107
107
  width: 64px;
108
108
  height: 64px
109
109
  }
110
- .circular-progress-bar__m_1sqfo .circular-progress-bar__labelWrapper_1sqfo {
110
+ .circular-progress-bar__m_1b78s .circular-progress-bar__labelWrapper_1b78s {
111
111
  max-width: 48px;
112
112
  }
113
- .circular-progress-bar__m_1sqfo .circular-progress-bar__title_1sqfo {
113
+ .circular-progress-bar__m_1b78s .circular-progress-bar__title_1b78s {
114
114
  max-height: 16px;
115
115
  margin: 0;
116
116
  }
117
- .circular-progress-bar__s_1sqfo {
117
+ .circular-progress-bar__s_1b78s {
118
118
  width: 48px;
119
119
  height: 48px
120
120
  }
121
- .circular-progress-bar__s_1sqfo .circular-progress-bar__labelWrapper_1sqfo {
121
+ .circular-progress-bar__s_1b78s .circular-progress-bar__labelWrapper_1b78s {
122
122
  max-width: 40px;
123
123
  }
124
- .circular-progress-bar__s_1sqfo .circular-progress-bar__title_1sqfo {
124
+ .circular-progress-bar__s_1b78s .circular-progress-bar__title_1b78s {
125
125
  max-height: 16px;
126
126
  margin: 0;
127
127
  }
128
- .circular-progress-bar__xs_1sqfo {
128
+ .circular-progress-bar__xs_1b78s {
129
129
  width: 24px;
130
130
  height: 24px
131
131
  }
132
- .circular-progress-bar__xs_1sqfo .circular-progress-bar__labelWrapper_1sqfo {
132
+ .circular-progress-bar__xs_1b78s .circular-progress-bar__labelWrapper_1b78s {
133
133
  max-width: 24px;
134
134
  }
135
- .circular-progress-bar__backgroundCircle_1sqfo,
136
- .circular-progress-bar__progressCircle_1sqfo {
135
+ .circular-progress-bar__backgroundCircle_1b78s,
136
+ .circular-progress-bar__progressCircle_1b78s {
137
137
  width: 100%;
138
138
  height: 100%;
139
139
  fill: transparent;
140
140
  }
141
- .circular-progress-bar__positive_1sqfo {
141
+ .circular-progress-bar__positive_1b78s {
142
142
  stroke: var(--circular-progress-bar-positive-color);
143
143
  }
144
- .circular-progress-bar__negative_1sqfo {
144
+ .circular-progress-bar__negative_1b78s {
145
145
  stroke: var(--circular-progress-bar-negative-color);
146
146
  }
147
- .circular-progress-bar__backgroundCircle_1sqfo {
147
+ .circular-progress-bar__backgroundCircle_1b78s {
148
148
  stroke: var(--circular-progress-bar-bg-color)
149
149
  }
150
- .circular-progress-bar__backgroundCircle_1sqfo.circular-progress-bar__stroke_1sqfo {
150
+ .circular-progress-bar__backgroundCircle_1b78s.circular-progress-bar__stroke_1b78s {
151
151
  stroke: transparent;
152
152
  }
153
- .circular-progress-bar__progressCircle_1sqfo {
153
+ .circular-progress-bar__progressCircle_1b78s {
154
154
  stroke-linecap: round
155
155
  }
156
- .circular-progress-bar__progressCircle_1sqfo.circular-progress-bar__bg-positive_1sqfo {
156
+ .circular-progress-bar__progressCircle_1b78s.circular-progress-bar__bg-positive_1b78s {
157
157
  fill: var(--circular-progress-bar-positive-color);
158
158
  }
159
- .circular-progress-bar__progressCircle_1sqfo.circular-progress-bar__bg-negative_1sqfo {
159
+ .circular-progress-bar__progressCircle_1b78s.circular-progress-bar__bg-negative_1b78s {
160
160
  fill: var(--circular-progress-bar-negative-color);
161
161
  }
162
- .circular-progress-bar__iconWrapper_1sqfo {
162
+ .circular-progress-bar__iconWrapper_1b78s {
163
163
  display: flex;
164
164
  align-items: center;
165
165
  justify-content: center
166
166
  }
167
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__xxl_1sqfo {
167
+ .circular-progress-bar__iconWrapper_1b78s.circular-progress-bar__xxl_1b78s {
168
168
  max-width: 64px;
169
169
  max-height: 64px;
170
170
  }
171
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__xl_1sqfo {
171
+ .circular-progress-bar__iconWrapper_1b78s.circular-progress-bar__xl_1b78s {
172
172
  max-width: 64px;
173
173
  max-height: 64px;
174
174
  }
175
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__l_1sqfo {
175
+ .circular-progress-bar__iconWrapper_1b78s.circular-progress-bar__l_1b78s {
176
176
  max-width: 48px;
177
177
  max-height: 48px;
178
178
  }
179
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__m_1sqfo {
179
+ .circular-progress-bar__iconWrapper_1b78s.circular-progress-bar__m_1b78s {
180
180
  max-width: 36px;
181
181
  max-height: 36px;
182
182
  }
183
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__s_1sqfo {
183
+ .circular-progress-bar__iconWrapper_1b78s.circular-progress-bar__s_1b78s {
184
184
  max-width: 24px;
185
185
  max-height: 24px;
186
186
  }
187
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__xs_1sqfo {
187
+ .circular-progress-bar__iconWrapper_1b78s.circular-progress-bar__xs_1b78s {
188
188
  max-width: 16px;
189
189
  max-height: 16px;
190
190
  }
191
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__icon-tertiary_1sqfo {
191
+ .circular-progress-bar__iconWrapper_1b78s.circular-progress-bar__icon-tertiary_1b78s {
192
192
  color: var(--color-light-graphic-tertiary);
193
193
  }
194
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__icon-positive_1sqfo {
194
+ .circular-progress-bar__iconWrapper_1b78s.circular-progress-bar__icon-positive_1b78s {
195
195
  color: var(--color-light-graphic-positive);
196
196
  }
197
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__icon-negative_1sqfo {
197
+ .circular-progress-bar__iconWrapper_1b78s.circular-progress-bar__icon-negative_1b78s {
198
198
  color: var(--color-light-graphic-negative);
199
199
  }
200
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__icon-primary-inverted_1sqfo {
200
+ .circular-progress-bar__iconWrapper_1b78s.circular-progress-bar__icon-primary-inverted_1b78s {
201
201
  color: var(--color-light-graphic-primary-inverted);
202
202
  }
203
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__icon-primary_1sqfo {
203
+ .circular-progress-bar__iconWrapper_1b78s.circular-progress-bar__icon-primary_1b78s {
204
204
  color: var(--color-light-graphic-primary);
205
205
  }
206
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__icon-secondary_1sqfo {
206
+ .circular-progress-bar__iconWrapper_1b78s.circular-progress-bar__icon-secondary_1b78s {
207
207
  color: var(--color-light-graphic-secondary);
208
208
  }
209
- .circular-progress-bar__icon_1sqfo {
209
+ .circular-progress-bar__icon_1b78s {
210
210
  width: 100%;
211
211
  height: 100%;
212
212
  }
@@ -2,7 +2,7 @@ import cn from 'classnames';
2
2
  import React, { useMemo } from 'react';
3
3
  import { Typography } from '@alfalab/core-components-typography/modern';
4
4
 
5
- var styles = {"component":"circular-progress-bar__component_1sqfo","svg":"circular-progress-bar__svg_1sqfo","title":"circular-progress-bar__title_1sqfo","subtitle":"circular-progress-bar__subtitle_1sqfo","labelWrapper":"circular-progress-bar__labelWrapper_1sqfo","label":"circular-progress-bar__label_1sqfo","typography":"circular-progress-bar__typography_1sqfo","xxl":"circular-progress-bar__xxl_1sqfo","xl":"circular-progress-bar__xl_1sqfo","l":"circular-progress-bar__l_1sqfo","m":"circular-progress-bar__m_1sqfo","s":"circular-progress-bar__s_1sqfo","xs":"circular-progress-bar__xs_1sqfo","backgroundCircle":"circular-progress-bar__backgroundCircle_1sqfo","progressCircle":"circular-progress-bar__progressCircle_1sqfo","positive":"circular-progress-bar__positive_1sqfo","negative":"circular-progress-bar__negative_1sqfo","stroke":"circular-progress-bar__stroke_1sqfo","bg-positive":"circular-progress-bar__bg-positive_1sqfo","bg-negative":"circular-progress-bar__bg-negative_1sqfo","iconWrapper":"circular-progress-bar__iconWrapper_1sqfo","icon-tertiary":"circular-progress-bar__icon-tertiary_1sqfo","icon-positive":"circular-progress-bar__icon-positive_1sqfo","icon-negative":"circular-progress-bar__icon-negative_1sqfo","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_1sqfo","icon-primary":"circular-progress-bar__icon-primary_1sqfo","icon-secondary":"circular-progress-bar__icon-secondary_1sqfo","icon":"circular-progress-bar__icon_1sqfo"};
5
+ var styles = {"component":"circular-progress-bar__component_1b78s","svg":"circular-progress-bar__svg_1b78s","title":"circular-progress-bar__title_1b78s","subtitle":"circular-progress-bar__subtitle_1b78s","labelWrapper":"circular-progress-bar__labelWrapper_1b78s","label":"circular-progress-bar__label_1b78s","typography":"circular-progress-bar__typography_1b78s","xxl":"circular-progress-bar__xxl_1b78s","xl":"circular-progress-bar__xl_1b78s","l":"circular-progress-bar__l_1b78s","m":"circular-progress-bar__m_1b78s","s":"circular-progress-bar__s_1b78s","xs":"circular-progress-bar__xs_1b78s","backgroundCircle":"circular-progress-bar__backgroundCircle_1b78s","progressCircle":"circular-progress-bar__progressCircle_1b78s","positive":"circular-progress-bar__positive_1b78s","negative":"circular-progress-bar__negative_1b78s","stroke":"circular-progress-bar__stroke_1b78s","bg-positive":"circular-progress-bar__bg-positive_1b78s","bg-negative":"circular-progress-bar__bg-negative_1b78s","iconWrapper":"circular-progress-bar__iconWrapper_1b78s","icon-tertiary":"circular-progress-bar__icon-tertiary_1b78s","icon-positive":"circular-progress-bar__icon-positive_1b78s","icon-negative":"circular-progress-bar__icon-negative_1b78s","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_1b78s","icon-primary":"circular-progress-bar__icon-primary_1b78s","icon-secondary":"circular-progress-bar__icon-secondary_1b78s","icon":"circular-progress-bar__icon_1b78s"};
6
6
  require('./index.css')
7
7
 
8
8
  const SIZES = {
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 6yca2 */
1
+ /* hash: 1q57u */
2
2
  :root {
3
3
  --color-light-bg-tertiary: #e7e9eb;
4
4
  --color-light-graphic-negative: #f15045;
@@ -34,28 +34,28 @@
34
34
  --circular-progress-bar-font-family: var(--font-family-system);
35
35
  --circular-progress-bar-font-weight: 600;
36
36
  }
37
- .circular-progress-bar__component_1sqfo {
37
+ .circular-progress-bar__component_1b78s {
38
38
  position: relative;
39
39
  display: flex;
40
40
  justify-content: center;
41
41
  align-items: center;
42
42
  }
43
- .circular-progress-bar__svg_1sqfo {
43
+ .circular-progress-bar__svg_1b78s {
44
44
  display: block;
45
45
  width: 100%;
46
46
  }
47
- .circular-progress-bar__title_1sqfo,
48
- .circular-progress-bar__subtitle_1sqfo {
47
+ .circular-progress-bar__title_1b78s,
48
+ .circular-progress-bar__subtitle_1b78s {
49
49
  overflow: hidden;
50
50
  word-break: break-word;
51
51
  white-space: nowrap;
52
52
  text-overflow: ellipsis;
53
53
  margin: 0 6px;
54
54
  }
55
- .circular-progress-bar__subtitle_1sqfo {
55
+ .circular-progress-bar__subtitle_1b78s {
56
56
  max-height: 40px;
57
57
  }
58
- .circular-progress-bar__labelWrapper_1sqfo {
58
+ .circular-progress-bar__labelWrapper_1b78s {
59
59
  text-align: center;
60
60
  position: absolute;
61
61
  top: 50%;
@@ -63,150 +63,150 @@
63
63
  width: 100%;
64
64
  transform: translate(-50%, -50%)
65
65
  }
66
- .circular-progress-bar__labelWrapper_1sqfo.circular-progress-bar__label_1sqfo {
66
+ .circular-progress-bar__labelWrapper_1b78s.circular-progress-bar__label_1b78s {
67
67
  display: flex;
68
68
  align-items: center;
69
69
  justify-content: center;
70
70
  }
71
- .circular-progress-bar__typography_1sqfo {
71
+ .circular-progress-bar__typography_1b78s {
72
72
  font-feature-settings: 'ss01';
73
73
  font-weight: var(--circular-progress-bar-font-weight);
74
74
  font-family: var(--circular-progress-bar-font-family);
75
75
  }
76
- .circular-progress-bar__xxl_1sqfo {
76
+ .circular-progress-bar__xxl_1b78s {
77
77
  width: 144px;
78
78
  height: 144px
79
79
  }
80
- .circular-progress-bar__xxl_1sqfo .circular-progress-bar__labelWrapper_1sqfo {
80
+ .circular-progress-bar__xxl_1b78s .circular-progress-bar__labelWrapper_1b78s {
81
81
  max-width: 128px;
82
82
  }
83
- .circular-progress-bar__xxl_1sqfo .circular-progress-bar__title_1sqfo {
83
+ .circular-progress-bar__xxl_1b78s .circular-progress-bar__title_1b78s {
84
84
  max-height: 32px;
85
85
  }
86
- .circular-progress-bar__xl_1sqfo {
86
+ .circular-progress-bar__xl_1b78s {
87
87
  width: 128px;
88
88
  height: 128px
89
89
  }
90
- .circular-progress-bar__xl_1sqfo .circular-progress-bar__labelWrapper_1sqfo {
90
+ .circular-progress-bar__xl_1b78s .circular-progress-bar__labelWrapper_1b78s {
91
91
  max-width: 108px;
92
92
  }
93
- .circular-progress-bar__xl_1sqfo .circular-progress-bar__title_1sqfo {
93
+ .circular-progress-bar__xl_1b78s .circular-progress-bar__title_1b78s {
94
94
  max-height: 32px;
95
95
  }
96
- .circular-progress-bar__l_1sqfo {
96
+ .circular-progress-bar__l_1b78s {
97
97
  width: 80px;
98
98
  height: 80px
99
99
  }
100
- .circular-progress-bar__l_1sqfo .circular-progress-bar__labelWrapper_1sqfo {
100
+ .circular-progress-bar__l_1b78s .circular-progress-bar__labelWrapper_1b78s {
101
101
  max-width: 64px;
102
102
  }
103
- .circular-progress-bar__l_1sqfo .circular-progress-bar__title_1sqfo {
103
+ .circular-progress-bar__l_1b78s .circular-progress-bar__title_1b78s {
104
104
  max-height: 24px;
105
105
  }
106
- .circular-progress-bar__m_1sqfo {
106
+ .circular-progress-bar__m_1b78s {
107
107
  width: 64px;
108
108
  height: 64px
109
109
  }
110
- .circular-progress-bar__m_1sqfo .circular-progress-bar__labelWrapper_1sqfo {
110
+ .circular-progress-bar__m_1b78s .circular-progress-bar__labelWrapper_1b78s {
111
111
  max-width: 48px;
112
112
  }
113
- .circular-progress-bar__m_1sqfo .circular-progress-bar__title_1sqfo {
113
+ .circular-progress-bar__m_1b78s .circular-progress-bar__title_1b78s {
114
114
  max-height: 16px;
115
115
  margin: 0;
116
116
  }
117
- .circular-progress-bar__s_1sqfo {
117
+ .circular-progress-bar__s_1b78s {
118
118
  width: 48px;
119
119
  height: 48px
120
120
  }
121
- .circular-progress-bar__s_1sqfo .circular-progress-bar__labelWrapper_1sqfo {
121
+ .circular-progress-bar__s_1b78s .circular-progress-bar__labelWrapper_1b78s {
122
122
  max-width: 40px;
123
123
  }
124
- .circular-progress-bar__s_1sqfo .circular-progress-bar__title_1sqfo {
124
+ .circular-progress-bar__s_1b78s .circular-progress-bar__title_1b78s {
125
125
  max-height: 16px;
126
126
  margin: 0;
127
127
  }
128
- .circular-progress-bar__xs_1sqfo {
128
+ .circular-progress-bar__xs_1b78s {
129
129
  width: 24px;
130
130
  height: 24px
131
131
  }
132
- .circular-progress-bar__xs_1sqfo .circular-progress-bar__labelWrapper_1sqfo {
132
+ .circular-progress-bar__xs_1b78s .circular-progress-bar__labelWrapper_1b78s {
133
133
  max-width: 24px;
134
134
  }
135
- .circular-progress-bar__backgroundCircle_1sqfo,
136
- .circular-progress-bar__progressCircle_1sqfo {
135
+ .circular-progress-bar__backgroundCircle_1b78s,
136
+ .circular-progress-bar__progressCircle_1b78s {
137
137
  width: 100%;
138
138
  height: 100%;
139
139
  fill: transparent;
140
140
  }
141
- .circular-progress-bar__positive_1sqfo {
141
+ .circular-progress-bar__positive_1b78s {
142
142
  stroke: var(--circular-progress-bar-positive-color);
143
143
  }
144
- .circular-progress-bar__negative_1sqfo {
144
+ .circular-progress-bar__negative_1b78s {
145
145
  stroke: var(--circular-progress-bar-negative-color);
146
146
  }
147
- .circular-progress-bar__backgroundCircle_1sqfo {
147
+ .circular-progress-bar__backgroundCircle_1b78s {
148
148
  stroke: var(--circular-progress-bar-bg-color)
149
149
  }
150
- .circular-progress-bar__backgroundCircle_1sqfo.circular-progress-bar__stroke_1sqfo {
150
+ .circular-progress-bar__backgroundCircle_1b78s.circular-progress-bar__stroke_1b78s {
151
151
  stroke: transparent;
152
152
  }
153
- .circular-progress-bar__progressCircle_1sqfo {
153
+ .circular-progress-bar__progressCircle_1b78s {
154
154
  stroke-linecap: round
155
155
  }
156
- .circular-progress-bar__progressCircle_1sqfo.circular-progress-bar__bg-positive_1sqfo {
156
+ .circular-progress-bar__progressCircle_1b78s.circular-progress-bar__bg-positive_1b78s {
157
157
  fill: var(--circular-progress-bar-positive-color);
158
158
  }
159
- .circular-progress-bar__progressCircle_1sqfo.circular-progress-bar__bg-negative_1sqfo {
159
+ .circular-progress-bar__progressCircle_1b78s.circular-progress-bar__bg-negative_1b78s {
160
160
  fill: var(--circular-progress-bar-negative-color);
161
161
  }
162
- .circular-progress-bar__iconWrapper_1sqfo {
162
+ .circular-progress-bar__iconWrapper_1b78s {
163
163
  display: flex;
164
164
  align-items: center;
165
165
  justify-content: center
166
166
  }
167
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__xxl_1sqfo {
167
+ .circular-progress-bar__iconWrapper_1b78s.circular-progress-bar__xxl_1b78s {
168
168
  max-width: 64px;
169
169
  max-height: 64px;
170
170
  }
171
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__xl_1sqfo {
171
+ .circular-progress-bar__iconWrapper_1b78s.circular-progress-bar__xl_1b78s {
172
172
  max-width: 64px;
173
173
  max-height: 64px;
174
174
  }
175
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__l_1sqfo {
175
+ .circular-progress-bar__iconWrapper_1b78s.circular-progress-bar__l_1b78s {
176
176
  max-width: 48px;
177
177
  max-height: 48px;
178
178
  }
179
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__m_1sqfo {
179
+ .circular-progress-bar__iconWrapper_1b78s.circular-progress-bar__m_1b78s {
180
180
  max-width: 36px;
181
181
  max-height: 36px;
182
182
  }
183
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__s_1sqfo {
183
+ .circular-progress-bar__iconWrapper_1b78s.circular-progress-bar__s_1b78s {
184
184
  max-width: 24px;
185
185
  max-height: 24px;
186
186
  }
187
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__xs_1sqfo {
187
+ .circular-progress-bar__iconWrapper_1b78s.circular-progress-bar__xs_1b78s {
188
188
  max-width: 16px;
189
189
  max-height: 16px;
190
190
  }
191
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__icon-tertiary_1sqfo {
191
+ .circular-progress-bar__iconWrapper_1b78s.circular-progress-bar__icon-tertiary_1b78s {
192
192
  color: var(--color-light-graphic-tertiary);
193
193
  }
194
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__icon-positive_1sqfo {
194
+ .circular-progress-bar__iconWrapper_1b78s.circular-progress-bar__icon-positive_1b78s {
195
195
  color: var(--color-light-graphic-positive);
196
196
  }
197
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__icon-negative_1sqfo {
197
+ .circular-progress-bar__iconWrapper_1b78s.circular-progress-bar__icon-negative_1b78s {
198
198
  color: var(--color-light-graphic-negative);
199
199
  }
200
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__icon-primary-inverted_1sqfo {
200
+ .circular-progress-bar__iconWrapper_1b78s.circular-progress-bar__icon-primary-inverted_1b78s {
201
201
  color: var(--color-light-graphic-primary-inverted);
202
202
  }
203
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__icon-primary_1sqfo {
203
+ .circular-progress-bar__iconWrapper_1b78s.circular-progress-bar__icon-primary_1b78s {
204
204
  color: var(--color-light-graphic-primary);
205
205
  }
206
- .circular-progress-bar__iconWrapper_1sqfo.circular-progress-bar__icon-secondary_1sqfo {
206
+ .circular-progress-bar__iconWrapper_1b78s.circular-progress-bar__icon-secondary_1b78s {
207
207
  color: var(--color-light-graphic-secondary);
208
208
  }
209
- .circular-progress-bar__icon_1sqfo {
209
+ .circular-progress-bar__icon_1b78s {
210
210
  width: 100%;
211
211
  height: 100%;
212
212
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-circular-progress-bar",
3
- "version": "3.0.1",
3
+ "version": "3.0.2",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -14,7 +14,7 @@
14
14
  "directory": "dist"
15
15
  },
16
16
  "dependencies": {
17
- "@alfalab/core-components-typography": "^3.0.1",
17
+ "@alfalab/core-components-typography": "^3.0.2",
18
18
  "classnames": "^2.3.1"
19
19
  },
20
20
  "peerDependencies": {