@alfalab/core-components-circular-progress-bar 4.0.0 → 4.1.0-snapshot-92b8690

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 (42) hide show
  1. package/dynamic-mixins/Component.d.ts +143 -0
  2. package/dynamic-mixins/Component.js +121 -0
  3. package/dynamic-mixins/Component.js.map +1 -0
  4. package/dynamic-mixins/consts.d.ts +79 -0
  5. package/dynamic-mixins/consts.js +94 -0
  6. package/dynamic-mixins/consts.js.map +1 -0
  7. package/dynamic-mixins/index.css +163 -0
  8. package/dynamic-mixins/index.d.ts +2 -0
  9. package/dynamic-mixins/index.js +10 -0
  10. package/dynamic-mixins/index.js.map +1 -0
  11. package/dynamic-mixins/index.module.css.js +8 -0
  12. package/dynamic-mixins/index.module.css.js.map +1 -0
  13. package/dynamic-mixins/shared/index.d.ts +1 -0
  14. package/dynamic-mixins/shared/index.js +10 -0
  15. package/dynamic-mixins/shared/index.js.map +1 -0
  16. package/dynamic-mixins/types/component-size.d.ts +1 -0
  17. package/dynamic-mixins/types/component-size.js +3 -0
  18. package/dynamic-mixins/types/component-size.js.map +1 -0
  19. package/dynamic-mixins/types/typography-color.d.ts +1 -0
  20. package/dynamic-mixins/types/typography-color.js +3 -0
  21. package/dynamic-mixins/types/typography-color.js.map +1 -0
  22. package/dynamic-mixins/use-timer.d.ts +1 -0
  23. package/dynamic-mixins/use-timer.js +35 -0
  24. package/dynamic-mixins/use-timer.js.map +1 -0
  25. package/dynamic-mixins/utils/get-circular-progress-bar-test-ids.d.ts +7 -0
  26. package/dynamic-mixins/utils/get-circular-progress-bar-test-ids.js +18 -0
  27. package/dynamic-mixins/utils/get-circular-progress-bar-test-ids.js.map +1 -0
  28. package/dynamic-mixins/utils/is-typography-color.d.ts +2 -0
  29. package/dynamic-mixins/utils/is-typography-color.js +12 -0
  30. package/dynamic-mixins/utils/is-typography-color.js.map +1 -0
  31. package/esm/index.css +52 -52
  32. package/esm/index.module.css.js +1 -1
  33. package/esm/index.module.css.js.map +1 -1
  34. package/index.css +52 -52
  35. package/index.module.css.js +1 -1
  36. package/index.module.css.js.map +1 -1
  37. package/modern/index.css +52 -52
  38. package/modern/index.module.css.js +1 -1
  39. package/modern/index.module.css.js.map +1 -1
  40. package/moderncssm/index.module.css +2 -0
  41. package/package.json +5 -5
  42. package/src/index.module.css +1 -1
package/index.css CHANGED
@@ -19,145 +19,145 @@
19
19
  --circular-progress-bar-negative-color: var(--color-light-status-negative);
20
20
  --circular-progress-bar-font-family: var(--font-family-system);
21
21
  --circular-progress-bar-font-weight: 600;
22
- } .circular-progress-bar__component_1cscl {
22
+ } .circular-progress-bar__component_1fmyz {
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
- } .circular-progress-bar__component_1cscl.circular-progress-bar__bg-positive_1cscl {
28
+ } .circular-progress-bar__component_1fmyz.circular-progress-bar__bg-positive_1fmyz {
29
29
  background: var(--circular-progress-bar-positive-color);
30
- } .circular-progress-bar__component_1cscl.circular-progress-bar__bg-negative_1cscl {
30
+ } .circular-progress-bar__component_1fmyz.circular-progress-bar__bg-negative_1fmyz {
31
31
  background: var(--circular-progress-bar-negative-color);
32
- } .circular-progress-bar__svg_1cscl {
32
+ } .circular-progress-bar__svg_1fmyz {
33
33
  display: block;
34
34
  width: 100%;
35
- } .circular-progress-bar__title_1cscl,
36
- .circular-progress-bar__subtitle_1cscl {
35
+ } .circular-progress-bar__title_1fmyz,
36
+ .circular-progress-bar__subtitle_1fmyz {
37
37
  overflow: hidden;
38
38
  word-break: break-word;
39
39
  white-space: nowrap;
40
40
  text-overflow: ellipsis;
41
41
  margin: var(--gap-0) 6px;
42
- } .circular-progress-bar__subtitle_1cscl {
42
+ } .circular-progress-bar__subtitle_1fmyz {
43
43
  max-height: 40px;
44
- } .circular-progress-bar__labelWrapper_1cscl {
44
+ } .circular-progress-bar__labelWrapper_1fmyz {
45
45
  text-align: center;
46
46
  position: absolute;
47
47
  top: 50%;
48
48
  left: 50%;
49
49
  width: 100%;
50
50
  transform: translate(-50%, -50%)
51
- } .circular-progress-bar__labelWrapper_1cscl.circular-progress-bar__label_1cscl {
51
+ } .circular-progress-bar__labelWrapper_1fmyz.circular-progress-bar__label_1fmyz {
52
52
  display: flex;
53
53
  align-items: center;
54
54
  justify-content: center;
55
- } .circular-progress-bar__typography_1cscl {
55
+ } .circular-progress-bar__typography_1fmyz {
56
56
  font-feature-settings: 'ss01';
57
57
  font-weight: var(--circular-progress-bar-font-weight);
58
58
  font-family: var(--circular-progress-bar-font-family);
59
- } .circular-progress-bar__size-144_1cscl {
59
+ } .circular-progress-bar__size-144_1fmyz {
60
60
  width: 144px;
61
61
  height: 144px
62
- } .circular-progress-bar__size-144_1cscl .circular-progress-bar__labelWrapper_1cscl {
62
+ } .circular-progress-bar__size-144_1fmyz .circular-progress-bar__labelWrapper_1fmyz {
63
63
  max-width: 128px;
64
- } .circular-progress-bar__size-144_1cscl .circular-progress-bar__title_1cscl {
64
+ } .circular-progress-bar__size-144_1fmyz .circular-progress-bar__title_1fmyz {
65
65
  max-height: 32px;
66
- } .circular-progress-bar__size-128_1cscl {
66
+ } .circular-progress-bar__size-128_1fmyz {
67
67
  width: 128px;
68
68
  height: 128px
69
- } .circular-progress-bar__size-128_1cscl .circular-progress-bar__labelWrapper_1cscl {
69
+ } .circular-progress-bar__size-128_1fmyz .circular-progress-bar__labelWrapper_1fmyz {
70
70
  max-width: 108px;
71
- } .circular-progress-bar__size-128_1cscl .circular-progress-bar__title_1cscl {
71
+ } .circular-progress-bar__size-128_1fmyz .circular-progress-bar__title_1fmyz {
72
72
  max-height: 32px;
73
- } .circular-progress-bar__size-96_1cscl {
73
+ } .circular-progress-bar__size-96_1fmyz {
74
74
  width: 96px;
75
75
  height: 96px
76
- } .circular-progress-bar__size-96_1cscl .circular-progress-bar__labelWrapper_1cscl {
76
+ } .circular-progress-bar__size-96_1fmyz .circular-progress-bar__labelWrapper_1fmyz {
77
77
  max-width: 64px;
78
- } .circular-progress-bar__size-96_1cscl .circular-progress-bar__title_1cscl {
78
+ } .circular-progress-bar__size-96_1fmyz .circular-progress-bar__title_1fmyz {
79
79
  max-height: 20px;
80
- } .circular-progress-bar__size-80_1cscl {
80
+ } .circular-progress-bar__size-80_1fmyz {
81
81
  width: 80px;
82
82
  height: 80px
83
- } .circular-progress-bar__size-80_1cscl .circular-progress-bar__labelWrapper_1cscl {
83
+ } .circular-progress-bar__size-80_1fmyz .circular-progress-bar__labelWrapper_1fmyz {
84
84
  max-width: 64px;
85
- } .circular-progress-bar__size-80_1cscl .circular-progress-bar__title_1cscl {
85
+ } .circular-progress-bar__size-80_1fmyz .circular-progress-bar__title_1fmyz {
86
86
  max-height: 24px;
87
- } .circular-progress-bar__size-64_1cscl {
87
+ } .circular-progress-bar__size-64_1fmyz {
88
88
  width: 64px;
89
89
  height: 64px
90
- } .circular-progress-bar__size-64_1cscl .circular-progress-bar__labelWrapper_1cscl {
90
+ } .circular-progress-bar__size-64_1fmyz .circular-progress-bar__labelWrapper_1fmyz {
91
91
  max-width: 48px;
92
- } .circular-progress-bar__size-64_1cscl .circular-progress-bar__title_1cscl {
92
+ } .circular-progress-bar__size-64_1fmyz .circular-progress-bar__title_1fmyz {
93
93
  max-height: 16px;
94
94
  margin: var(--gap-0);
95
- } .circular-progress-bar__size-48_1cscl {
95
+ } .circular-progress-bar__size-48_1fmyz {
96
96
  width: 48px;
97
97
  height: 48px
98
- } .circular-progress-bar__size-48_1cscl .circular-progress-bar__labelWrapper_1cscl {
98
+ } .circular-progress-bar__size-48_1fmyz .circular-progress-bar__labelWrapper_1fmyz {
99
99
  max-width: 40px;
100
- } .circular-progress-bar__size-48_1cscl .circular-progress-bar__title_1cscl {
100
+ } .circular-progress-bar__size-48_1fmyz .circular-progress-bar__title_1fmyz {
101
101
  max-height: 16px;
102
102
  margin: var(--gap-0);
103
- } .circular-progress-bar__size-24_1cscl {
103
+ } .circular-progress-bar__size-24_1fmyz {
104
104
  width: 24px;
105
105
  height: 24px
106
- } .circular-progress-bar__size-24_1cscl .circular-progress-bar__labelWrapper_1cscl {
106
+ } .circular-progress-bar__size-24_1fmyz .circular-progress-bar__labelWrapper_1fmyz {
107
107
  max-width: 24px;
108
- } .circular-progress-bar__backgroundCircle_1cscl,
109
- .circular-progress-bar__progressCircle_1cscl {
108
+ } .circular-progress-bar__backgroundCircle_1fmyz,
109
+ .circular-progress-bar__progressCircle_1fmyz {
110
110
  width: 100%;
111
111
  height: 100%;
112
112
  fill: transparent;
113
- } .circular-progress-bar__positive_1cscl {
113
+ } .circular-progress-bar__positive_1fmyz {
114
114
  stroke: var(--circular-progress-bar-positive-color);
115
- } .circular-progress-bar__negative_1cscl {
115
+ } .circular-progress-bar__negative_1fmyz {
116
116
  stroke: var(--circular-progress-bar-negative-color);
117
- } .circular-progress-bar__backgroundCircle_1cscl {
117
+ } .circular-progress-bar__backgroundCircle_1fmyz {
118
118
  stroke: var(--circular-progress-bar-stroke-color)
119
- } .circular-progress-bar__backgroundCircle_1cscl.circular-progress-bar__stroke_1cscl {
119
+ } .circular-progress-bar__backgroundCircle_1fmyz.circular-progress-bar__stroke_1fmyz {
120
120
  stroke: transparent;
121
- } .circular-progress-bar__progressCircle_1cscl {
121
+ } .circular-progress-bar__progressCircle_1fmyz {
122
122
  stroke-linecap: round;
123
- } .circular-progress-bar__iconWrapper_1cscl {
123
+ } .circular-progress-bar__iconWrapper_1fmyz {
124
124
  display: flex;
125
125
  align-items: center;
126
126
  justify-content: center
127
- } .circular-progress-bar__iconWrapper_1cscl.circular-progress-bar__size-144_1cscl {
127
+ } .circular-progress-bar__iconWrapper_1fmyz.circular-progress-bar__size-144_1fmyz {
128
128
  max-width: 64px;
129
129
  max-height: 64px;
130
- } .circular-progress-bar__iconWrapper_1cscl.circular-progress-bar__size-128_1cscl {
130
+ } .circular-progress-bar__iconWrapper_1fmyz.circular-progress-bar__size-128_1fmyz {
131
131
  max-width: 64px;
132
132
  max-height: 64px;
133
- } .circular-progress-bar__iconWrapper_1cscl.circular-progress-bar__size-96_1cscl {
133
+ } .circular-progress-bar__iconWrapper_1fmyz.circular-progress-bar__size-96_1fmyz {
134
134
  max-width: 48px;
135
135
  max-height: 48px;
136
- } .circular-progress-bar__iconWrapper_1cscl.circular-progress-bar__size-80_1cscl {
136
+ } .circular-progress-bar__iconWrapper_1fmyz.circular-progress-bar__size-80_1fmyz {
137
137
  max-width: 48px;
138
138
  max-height: 48px;
139
- } .circular-progress-bar__iconWrapper_1cscl.circular-progress-bar__size-64_1cscl {
139
+ } .circular-progress-bar__iconWrapper_1fmyz.circular-progress-bar__size-64_1fmyz {
140
140
  max-width: 36px;
141
141
  max-height: 36px;
142
- } .circular-progress-bar__iconWrapper_1cscl.circular-progress-bar__size-48_1cscl {
142
+ } .circular-progress-bar__iconWrapper_1fmyz.circular-progress-bar__size-48_1fmyz {
143
143
  max-width: 24px;
144
144
  max-height: 24px;
145
- } .circular-progress-bar__iconWrapper_1cscl.circular-progress-bar__size-24_1cscl {
145
+ } .circular-progress-bar__iconWrapper_1fmyz.circular-progress-bar__size-24_1fmyz {
146
146
  max-width: 16px;
147
147
  max-height: 16px;
148
- } .circular-progress-bar__iconWrapper_1cscl.circular-progress-bar__icon-tertiary_1cscl {
148
+ } .circular-progress-bar__iconWrapper_1fmyz.circular-progress-bar__icon-tertiary_1fmyz {
149
149
  color: var(--color-light-neutral-500);
150
- } .circular-progress-bar__iconWrapper_1cscl.circular-progress-bar__icon-positive_1cscl {
150
+ } .circular-progress-bar__iconWrapper_1fmyz.circular-progress-bar__icon-positive_1fmyz {
151
151
  color: var(--color-light-status-positive);
152
- } .circular-progress-bar__iconWrapper_1cscl.circular-progress-bar__icon-negative_1cscl {
152
+ } .circular-progress-bar__iconWrapper_1fmyz.circular-progress-bar__icon-negative_1fmyz {
153
153
  color: var(--color-light-status-negative);
154
- } .circular-progress-bar__iconWrapper_1cscl.circular-progress-bar__icon-primary-inverted_1cscl {
154
+ } .circular-progress-bar__iconWrapper_1fmyz.circular-progress-bar__icon-primary-inverted_1fmyz {
155
155
  color: var(--color-light-neutral-translucent-1300-inverted);
156
- } .circular-progress-bar__iconWrapper_1cscl.circular-progress-bar__icon-primary_1cscl {
156
+ } .circular-progress-bar__iconWrapper_1fmyz.circular-progress-bar__icon-primary_1fmyz {
157
157
  color: var(--color-light-neutral-translucent-1300);
158
- } .circular-progress-bar__iconWrapper_1cscl.circular-progress-bar__icon-secondary_1cscl {
158
+ } .circular-progress-bar__iconWrapper_1fmyz.circular-progress-bar__icon-secondary_1fmyz {
159
159
  color: var(--color-light-neutral-700);
160
- } .circular-progress-bar__icon_1cscl {
160
+ } .circular-progress-bar__icon_1fmyz {
161
161
  width: 100%;
162
162
  height: 100%;
163
163
  }
package/index.module.css.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  require('./index.css');
4
4
 
5
- var styles = {"component":"circular-progress-bar__component_1cscl","bg-positive":"circular-progress-bar__bg-positive_1cscl","bg-negative":"circular-progress-bar__bg-negative_1cscl","svg":"circular-progress-bar__svg_1cscl","title":"circular-progress-bar__title_1cscl","subtitle":"circular-progress-bar__subtitle_1cscl","labelWrapper":"circular-progress-bar__labelWrapper_1cscl","label":"circular-progress-bar__label_1cscl","typography":"circular-progress-bar__typography_1cscl","size-144":"circular-progress-bar__size-144_1cscl","size-128":"circular-progress-bar__size-128_1cscl","size-96":"circular-progress-bar__size-96_1cscl","size-80":"circular-progress-bar__size-80_1cscl","size-64":"circular-progress-bar__size-64_1cscl","size-48":"circular-progress-bar__size-48_1cscl","size-24":"circular-progress-bar__size-24_1cscl","backgroundCircle":"circular-progress-bar__backgroundCircle_1cscl","progressCircle":"circular-progress-bar__progressCircle_1cscl","positive":"circular-progress-bar__positive_1cscl","negative":"circular-progress-bar__negative_1cscl","stroke":"circular-progress-bar__stroke_1cscl","iconWrapper":"circular-progress-bar__iconWrapper_1cscl","icon-tertiary":"circular-progress-bar__icon-tertiary_1cscl","icon-positive":"circular-progress-bar__icon-positive_1cscl","icon-negative":"circular-progress-bar__icon-negative_1cscl","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_1cscl","icon-primary":"circular-progress-bar__icon-primary_1cscl","icon-secondary":"circular-progress-bar__icon-secondary_1cscl","icon":"circular-progress-bar__icon_1cscl"};
5
+ var styles = {"component":"circular-progress-bar__component_1fmyz","bg-positive":"circular-progress-bar__bg-positive_1fmyz","bg-negative":"circular-progress-bar__bg-negative_1fmyz","svg":"circular-progress-bar__svg_1fmyz","title":"circular-progress-bar__title_1fmyz","subtitle":"circular-progress-bar__subtitle_1fmyz","labelWrapper":"circular-progress-bar__labelWrapper_1fmyz","label":"circular-progress-bar__label_1fmyz","typography":"circular-progress-bar__typography_1fmyz","size-144":"circular-progress-bar__size-144_1fmyz","size-128":"circular-progress-bar__size-128_1fmyz","size-96":"circular-progress-bar__size-96_1fmyz","size-80":"circular-progress-bar__size-80_1fmyz","size-64":"circular-progress-bar__size-64_1fmyz","size-48":"circular-progress-bar__size-48_1fmyz","size-24":"circular-progress-bar__size-24_1fmyz","backgroundCircle":"circular-progress-bar__backgroundCircle_1fmyz","progressCircle":"circular-progress-bar__progressCircle_1fmyz","positive":"circular-progress-bar__positive_1fmyz","negative":"circular-progress-bar__negative_1fmyz","stroke":"circular-progress-bar__stroke_1fmyz","iconWrapper":"circular-progress-bar__iconWrapper_1fmyz","icon-tertiary":"circular-progress-bar__icon-tertiary_1fmyz","icon-positive":"circular-progress-bar__icon-positive_1fmyz","icon-negative":"circular-progress-bar__icon-negative_1fmyz","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_1fmyz","icon-primary":"circular-progress-bar__icon-primary_1fmyz","icon-secondary":"circular-progress-bar__icon-secondary_1fmyz","icon":"circular-progress-bar__icon_1fmyz"};
6
6
 
7
7
  module.exports = styles;
8
8
  //# sourceMappingURL=index.module.css.js.map
package/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 /* theme */\n --circular-progress-bar-font-family: var(--font-family-system);\n --circular-progress-bar-font-weight: 600;\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) 6px;\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.typography {\n font-feature-settings: 'ss01';\n font-weight: var(--circular-progress-bar-font-weight);\n font-family: var(--circular-progress-bar-font-family);\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,YAAY,CAAC,yCAAyC,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/no-dynamic-mixins-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 /* theme */\n --circular-progress-bar-font-family: var(--font-family-system);\n --circular-progress-bar-font-weight: 600;\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) 6px;\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.typography {\n font-feature-settings: 'ss01';\n font-weight: var(--circular-progress-bar-font-weight);\n font-family: var(--circular-progress-bar-font-family);\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,YAAY,CAAC,yCAAyC,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;;;;"}
package/modern/index.css CHANGED
@@ -19,145 +19,145 @@
19
19
  --circular-progress-bar-negative-color: var(--color-light-status-negative);
20
20
  --circular-progress-bar-font-family: var(--font-family-system);
21
21
  --circular-progress-bar-font-weight: 600;
22
- } .circular-progress-bar__component_1cscl {
22
+ } .circular-progress-bar__component_1fmyz {
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
- } .circular-progress-bar__component_1cscl.circular-progress-bar__bg-positive_1cscl {
28
+ } .circular-progress-bar__component_1fmyz.circular-progress-bar__bg-positive_1fmyz {
29
29
  background: var(--circular-progress-bar-positive-color);
30
- } .circular-progress-bar__component_1cscl.circular-progress-bar__bg-negative_1cscl {
30
+ } .circular-progress-bar__component_1fmyz.circular-progress-bar__bg-negative_1fmyz {
31
31
  background: var(--circular-progress-bar-negative-color);
32
- } .circular-progress-bar__svg_1cscl {
32
+ } .circular-progress-bar__svg_1fmyz {
33
33
  display: block;
34
34
  width: 100%;
35
- } .circular-progress-bar__title_1cscl,
36
- .circular-progress-bar__subtitle_1cscl {
35
+ } .circular-progress-bar__title_1fmyz,
36
+ .circular-progress-bar__subtitle_1fmyz {
37
37
  overflow: hidden;
38
38
  word-break: break-word;
39
39
  white-space: nowrap;
40
40
  text-overflow: ellipsis;
41
41
  margin: var(--gap-0) 6px;
42
- } .circular-progress-bar__subtitle_1cscl {
42
+ } .circular-progress-bar__subtitle_1fmyz {
43
43
  max-height: 40px;
44
- } .circular-progress-bar__labelWrapper_1cscl {
44
+ } .circular-progress-bar__labelWrapper_1fmyz {
45
45
  text-align: center;
46
46
  position: absolute;
47
47
  top: 50%;
48
48
  left: 50%;
49
49
  width: 100%;
50
50
  transform: translate(-50%, -50%)
51
- } .circular-progress-bar__labelWrapper_1cscl.circular-progress-bar__label_1cscl {
51
+ } .circular-progress-bar__labelWrapper_1fmyz.circular-progress-bar__label_1fmyz {
52
52
  display: flex;
53
53
  align-items: center;
54
54
  justify-content: center;
55
- } .circular-progress-bar__typography_1cscl {
55
+ } .circular-progress-bar__typography_1fmyz {
56
56
  font-feature-settings: 'ss01';
57
57
  font-weight: var(--circular-progress-bar-font-weight);
58
58
  font-family: var(--circular-progress-bar-font-family);
59
- } .circular-progress-bar__size-144_1cscl {
59
+ } .circular-progress-bar__size-144_1fmyz {
60
60
  width: 144px;
61
61
  height: 144px
62
- } .circular-progress-bar__size-144_1cscl .circular-progress-bar__labelWrapper_1cscl {
62
+ } .circular-progress-bar__size-144_1fmyz .circular-progress-bar__labelWrapper_1fmyz {
63
63
  max-width: 128px;
64
- } .circular-progress-bar__size-144_1cscl .circular-progress-bar__title_1cscl {
64
+ } .circular-progress-bar__size-144_1fmyz .circular-progress-bar__title_1fmyz {
65
65
  max-height: 32px;
66
- } .circular-progress-bar__size-128_1cscl {
66
+ } .circular-progress-bar__size-128_1fmyz {
67
67
  width: 128px;
68
68
  height: 128px
69
- } .circular-progress-bar__size-128_1cscl .circular-progress-bar__labelWrapper_1cscl {
69
+ } .circular-progress-bar__size-128_1fmyz .circular-progress-bar__labelWrapper_1fmyz {
70
70
  max-width: 108px;
71
- } .circular-progress-bar__size-128_1cscl .circular-progress-bar__title_1cscl {
71
+ } .circular-progress-bar__size-128_1fmyz .circular-progress-bar__title_1fmyz {
72
72
  max-height: 32px;
73
- } .circular-progress-bar__size-96_1cscl {
73
+ } .circular-progress-bar__size-96_1fmyz {
74
74
  width: 96px;
75
75
  height: 96px
76
- } .circular-progress-bar__size-96_1cscl .circular-progress-bar__labelWrapper_1cscl {
76
+ } .circular-progress-bar__size-96_1fmyz .circular-progress-bar__labelWrapper_1fmyz {
77
77
  max-width: 64px;
78
- } .circular-progress-bar__size-96_1cscl .circular-progress-bar__title_1cscl {
78
+ } .circular-progress-bar__size-96_1fmyz .circular-progress-bar__title_1fmyz {
79
79
  max-height: 20px;
80
- } .circular-progress-bar__size-80_1cscl {
80
+ } .circular-progress-bar__size-80_1fmyz {
81
81
  width: 80px;
82
82
  height: 80px
83
- } .circular-progress-bar__size-80_1cscl .circular-progress-bar__labelWrapper_1cscl {
83
+ } .circular-progress-bar__size-80_1fmyz .circular-progress-bar__labelWrapper_1fmyz {
84
84
  max-width: 64px;
85
- } .circular-progress-bar__size-80_1cscl .circular-progress-bar__title_1cscl {
85
+ } .circular-progress-bar__size-80_1fmyz .circular-progress-bar__title_1fmyz {
86
86
  max-height: 24px;
87
- } .circular-progress-bar__size-64_1cscl {
87
+ } .circular-progress-bar__size-64_1fmyz {
88
88
  width: 64px;
89
89
  height: 64px
90
- } .circular-progress-bar__size-64_1cscl .circular-progress-bar__labelWrapper_1cscl {
90
+ } .circular-progress-bar__size-64_1fmyz .circular-progress-bar__labelWrapper_1fmyz {
91
91
  max-width: 48px;
92
- } .circular-progress-bar__size-64_1cscl .circular-progress-bar__title_1cscl {
92
+ } .circular-progress-bar__size-64_1fmyz .circular-progress-bar__title_1fmyz {
93
93
  max-height: 16px;
94
94
  margin: var(--gap-0);
95
- } .circular-progress-bar__size-48_1cscl {
95
+ } .circular-progress-bar__size-48_1fmyz {
96
96
  width: 48px;
97
97
  height: 48px
98
- } .circular-progress-bar__size-48_1cscl .circular-progress-bar__labelWrapper_1cscl {
98
+ } .circular-progress-bar__size-48_1fmyz .circular-progress-bar__labelWrapper_1fmyz {
99
99
  max-width: 40px;
100
- } .circular-progress-bar__size-48_1cscl .circular-progress-bar__title_1cscl {
100
+ } .circular-progress-bar__size-48_1fmyz .circular-progress-bar__title_1fmyz {
101
101
  max-height: 16px;
102
102
  margin: var(--gap-0);
103
- } .circular-progress-bar__size-24_1cscl {
103
+ } .circular-progress-bar__size-24_1fmyz {
104
104
  width: 24px;
105
105
  height: 24px
106
- } .circular-progress-bar__size-24_1cscl .circular-progress-bar__labelWrapper_1cscl {
106
+ } .circular-progress-bar__size-24_1fmyz .circular-progress-bar__labelWrapper_1fmyz {
107
107
  max-width: 24px;
108
- } .circular-progress-bar__backgroundCircle_1cscl,
109
- .circular-progress-bar__progressCircle_1cscl {
108
+ } .circular-progress-bar__backgroundCircle_1fmyz,
109
+ .circular-progress-bar__progressCircle_1fmyz {
110
110
  width: 100%;
111
111
  height: 100%;
112
112
  fill: transparent;
113
- } .circular-progress-bar__positive_1cscl {
113
+ } .circular-progress-bar__positive_1fmyz {
114
114
  stroke: var(--circular-progress-bar-positive-color);
115
- } .circular-progress-bar__negative_1cscl {
115
+ } .circular-progress-bar__negative_1fmyz {
116
116
  stroke: var(--circular-progress-bar-negative-color);
117
- } .circular-progress-bar__backgroundCircle_1cscl {
117
+ } .circular-progress-bar__backgroundCircle_1fmyz {
118
118
  stroke: var(--circular-progress-bar-stroke-color)
119
- } .circular-progress-bar__backgroundCircle_1cscl.circular-progress-bar__stroke_1cscl {
119
+ } .circular-progress-bar__backgroundCircle_1fmyz.circular-progress-bar__stroke_1fmyz {
120
120
  stroke: transparent;
121
- } .circular-progress-bar__progressCircle_1cscl {
121
+ } .circular-progress-bar__progressCircle_1fmyz {
122
122
  stroke-linecap: round;
123
- } .circular-progress-bar__iconWrapper_1cscl {
123
+ } .circular-progress-bar__iconWrapper_1fmyz {
124
124
  display: flex;
125
125
  align-items: center;
126
126
  justify-content: center
127
- } .circular-progress-bar__iconWrapper_1cscl.circular-progress-bar__size-144_1cscl {
127
+ } .circular-progress-bar__iconWrapper_1fmyz.circular-progress-bar__size-144_1fmyz {
128
128
  max-width: 64px;
129
129
  max-height: 64px;
130
- } .circular-progress-bar__iconWrapper_1cscl.circular-progress-bar__size-128_1cscl {
130
+ } .circular-progress-bar__iconWrapper_1fmyz.circular-progress-bar__size-128_1fmyz {
131
131
  max-width: 64px;
132
132
  max-height: 64px;
133
- } .circular-progress-bar__iconWrapper_1cscl.circular-progress-bar__size-96_1cscl {
133
+ } .circular-progress-bar__iconWrapper_1fmyz.circular-progress-bar__size-96_1fmyz {
134
134
  max-width: 48px;
135
135
  max-height: 48px;
136
- } .circular-progress-bar__iconWrapper_1cscl.circular-progress-bar__size-80_1cscl {
136
+ } .circular-progress-bar__iconWrapper_1fmyz.circular-progress-bar__size-80_1fmyz {
137
137
  max-width: 48px;
138
138
  max-height: 48px;
139
- } .circular-progress-bar__iconWrapper_1cscl.circular-progress-bar__size-64_1cscl {
139
+ } .circular-progress-bar__iconWrapper_1fmyz.circular-progress-bar__size-64_1fmyz {
140
140
  max-width: 36px;
141
141
  max-height: 36px;
142
- } .circular-progress-bar__iconWrapper_1cscl.circular-progress-bar__size-48_1cscl {
142
+ } .circular-progress-bar__iconWrapper_1fmyz.circular-progress-bar__size-48_1fmyz {
143
143
  max-width: 24px;
144
144
  max-height: 24px;
145
- } .circular-progress-bar__iconWrapper_1cscl.circular-progress-bar__size-24_1cscl {
145
+ } .circular-progress-bar__iconWrapper_1fmyz.circular-progress-bar__size-24_1fmyz {
146
146
  max-width: 16px;
147
147
  max-height: 16px;
148
- } .circular-progress-bar__iconWrapper_1cscl.circular-progress-bar__icon-tertiary_1cscl {
148
+ } .circular-progress-bar__iconWrapper_1fmyz.circular-progress-bar__icon-tertiary_1fmyz {
149
149
  color: var(--color-light-neutral-500);
150
- } .circular-progress-bar__iconWrapper_1cscl.circular-progress-bar__icon-positive_1cscl {
150
+ } .circular-progress-bar__iconWrapper_1fmyz.circular-progress-bar__icon-positive_1fmyz {
151
151
  color: var(--color-light-status-positive);
152
- } .circular-progress-bar__iconWrapper_1cscl.circular-progress-bar__icon-negative_1cscl {
152
+ } .circular-progress-bar__iconWrapper_1fmyz.circular-progress-bar__icon-negative_1fmyz {
153
153
  color: var(--color-light-status-negative);
154
- } .circular-progress-bar__iconWrapper_1cscl.circular-progress-bar__icon-primary-inverted_1cscl {
154
+ } .circular-progress-bar__iconWrapper_1fmyz.circular-progress-bar__icon-primary-inverted_1fmyz {
155
155
  color: var(--color-light-neutral-translucent-1300-inverted);
156
- } .circular-progress-bar__iconWrapper_1cscl.circular-progress-bar__icon-primary_1cscl {
156
+ } .circular-progress-bar__iconWrapper_1fmyz.circular-progress-bar__icon-primary_1fmyz {
157
157
  color: var(--color-light-neutral-translucent-1300);
158
- } .circular-progress-bar__iconWrapper_1cscl.circular-progress-bar__icon-secondary_1cscl {
158
+ } .circular-progress-bar__iconWrapper_1fmyz.circular-progress-bar__icon-secondary_1fmyz {
159
159
  color: var(--color-light-neutral-700);
160
- } .circular-progress-bar__icon_1cscl {
160
+ } .circular-progress-bar__icon_1fmyz {
161
161
  width: 100%;
162
162
  height: 100%;
163
163
  }
package/modern/index.module.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import './index.css';
2
2
 
3
- const styles = {"component":"circular-progress-bar__component_1cscl","bg-positive":"circular-progress-bar__bg-positive_1cscl","bg-negative":"circular-progress-bar__bg-negative_1cscl","svg":"circular-progress-bar__svg_1cscl","title":"circular-progress-bar__title_1cscl","subtitle":"circular-progress-bar__subtitle_1cscl","labelWrapper":"circular-progress-bar__labelWrapper_1cscl","label":"circular-progress-bar__label_1cscl","typography":"circular-progress-bar__typography_1cscl","size-144":"circular-progress-bar__size-144_1cscl","size-128":"circular-progress-bar__size-128_1cscl","size-96":"circular-progress-bar__size-96_1cscl","size-80":"circular-progress-bar__size-80_1cscl","size-64":"circular-progress-bar__size-64_1cscl","size-48":"circular-progress-bar__size-48_1cscl","size-24":"circular-progress-bar__size-24_1cscl","backgroundCircle":"circular-progress-bar__backgroundCircle_1cscl","progressCircle":"circular-progress-bar__progressCircle_1cscl","positive":"circular-progress-bar__positive_1cscl","negative":"circular-progress-bar__negative_1cscl","stroke":"circular-progress-bar__stroke_1cscl","iconWrapper":"circular-progress-bar__iconWrapper_1cscl","icon-tertiary":"circular-progress-bar__icon-tertiary_1cscl","icon-positive":"circular-progress-bar__icon-positive_1cscl","icon-negative":"circular-progress-bar__icon-negative_1cscl","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_1cscl","icon-primary":"circular-progress-bar__icon-primary_1cscl","icon-secondary":"circular-progress-bar__icon-secondary_1cscl","icon":"circular-progress-bar__icon_1cscl"};
3
+ const styles = {"component":"circular-progress-bar__component_1fmyz","bg-positive":"circular-progress-bar__bg-positive_1fmyz","bg-negative":"circular-progress-bar__bg-negative_1fmyz","svg":"circular-progress-bar__svg_1fmyz","title":"circular-progress-bar__title_1fmyz","subtitle":"circular-progress-bar__subtitle_1fmyz","labelWrapper":"circular-progress-bar__labelWrapper_1fmyz","label":"circular-progress-bar__label_1fmyz","typography":"circular-progress-bar__typography_1fmyz","size-144":"circular-progress-bar__size-144_1fmyz","size-128":"circular-progress-bar__size-128_1fmyz","size-96":"circular-progress-bar__size-96_1fmyz","size-80":"circular-progress-bar__size-80_1fmyz","size-64":"circular-progress-bar__size-64_1fmyz","size-48":"circular-progress-bar__size-48_1fmyz","size-24":"circular-progress-bar__size-24_1fmyz","backgroundCircle":"circular-progress-bar__backgroundCircle_1fmyz","progressCircle":"circular-progress-bar__progressCircle_1fmyz","positive":"circular-progress-bar__positive_1fmyz","negative":"circular-progress-bar__negative_1fmyz","stroke":"circular-progress-bar__stroke_1fmyz","iconWrapper":"circular-progress-bar__iconWrapper_1fmyz","icon-tertiary":"circular-progress-bar__icon-tertiary_1fmyz","icon-positive":"circular-progress-bar__icon-positive_1fmyz","icon-negative":"circular-progress-bar__icon-negative_1fmyz","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_1fmyz","icon-primary":"circular-progress-bar__icon-primary_1fmyz","icon-secondary":"circular-progress-bar__icon-secondary_1fmyz","icon":"circular-progress-bar__icon_1fmyz"};
4
4
 
5
5
  export { styles as default };
6
6
  //# sourceMappingURL=index.module.css.js.map
package/modern/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 /* theme */\n --circular-progress-bar-font-family: var(--font-family-system);\n --circular-progress-bar-font-weight: 600;\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) 6px;\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.typography {\n font-feature-settings: 'ss01';\n font-weight: var(--circular-progress-bar-font-weight);\n font-family: var(--circular-progress-bar-font-family);\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,eAAe,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,YAAY,CAAC,yCAAyC,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/no-dynamic-mixins-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 /* theme */\n --circular-progress-bar-font-family: var(--font-family-system);\n --circular-progress-bar-font-weight: 600;\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) 6px;\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.typography {\n font-feature-settings: 'ss01';\n font-weight: var(--circular-progress-bar-font-weight);\n font-family: var(--circular-progress-bar-font-family);\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,eAAe,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,YAAY,CAAC,yCAAyC,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;;;;"}
package/moderncssm/index.module.css CHANGED
@@ -1,3 +1,5 @@
1
+
2
+
1
3
  :root {
2
4
  --circular-progress-bar-stroke-color: var(--color-light-neutral-translucent-300);
3
5
  --circular-progress-bar-positive-color: var(--color-light-status-positive);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-circular-progress-bar",
3
- "version": "4.0.0",
3
+ "version": "4.1.0-snapshot-92b8690",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -10,8 +10,8 @@
10
10
  "main": "index.js",
11
11
  "module": "./esm/index.js",
12
12
  "dependencies": {
13
- "@alfalab/core-components-shared": "^1.0.0",
14
- "@alfalab/core-components-typography": "^5.0.0",
13
+ "@alfalab/core-components-shared": "1.1.0-snapshot-92b8690",
14
+ "@alfalab/core-components-typography": "5.1.0-snapshot-92b8690",
15
15
  "classnames": "^2.5.1",
16
16
  "tslib": "^2.4.0"
17
17
  },
@@ -23,6 +23,6 @@
23
23
  "access": "public",
24
24
  "directory": "dist"
25
25
  },
26
- "themesVersion": "14.0.0",
27
- "varsVersion": "10.0.0"
26
+ "themesVersion": "14.1.0-snapshot-92b8690",
27
+ "varsVersion": "10.1.0-snapshot-92b8690"
28
28
  }
package/src/index.module.css CHANGED
@@ -1,4 +1,4 @@
1
- @import '@alfalab/core-components-vars/src/index.css';
1
+ @import '@alfalab/core-components-vars/src/no-dynamic-mixins-index.css';
2
2
 
3
3
  :root {
4
4
  /* stroke */