@alfalab/core-components-circular-progress-bar 3.6.4 → 3.6.5

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 (10) hide show
  1. package/Component.js +3 -3
  2. package/cssm/Component.js +2 -2
  3. package/esm/Component.js +4 -4
  4. package/esm/index.css +49 -49
  5. package/index.css +49 -49
  6. package/modern/Component.js +5 -5
  7. package/modern/index.css +49 -49
  8. package/moderncssm/Component.js +4 -4
  9. package/package.json +4 -3
  10. package/src/Component.tsx +7 -7
package/Component.js CHANGED
@@ -13,7 +13,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
13
13
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
14
14
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
15
15
 
16
- var styles = {"component":"circular-progress-bar__component_m7bt1","bg-positive":"circular-progress-bar__bg-positive_m7bt1","bg-negative":"circular-progress-bar__bg-negative_m7bt1","svg":"circular-progress-bar__svg_m7bt1","title":"circular-progress-bar__title_m7bt1","subtitle":"circular-progress-bar__subtitle_m7bt1","labelWrapper":"circular-progress-bar__labelWrapper_m7bt1","label":"circular-progress-bar__label_m7bt1","typography":"circular-progress-bar__typography_m7bt1","size-144":"circular-progress-bar__size-144_m7bt1","size-128":"circular-progress-bar__size-128_m7bt1","size-80":"circular-progress-bar__size-80_m7bt1","size-64":"circular-progress-bar__size-64_m7bt1","size-48":"circular-progress-bar__size-48_m7bt1","size-24":"circular-progress-bar__size-24_m7bt1","backgroundCircle":"circular-progress-bar__backgroundCircle_m7bt1","progressCircle":"circular-progress-bar__progressCircle_m7bt1","positive":"circular-progress-bar__positive_m7bt1","negative":"circular-progress-bar__negative_m7bt1","stroke":"circular-progress-bar__stroke_m7bt1","iconWrapper":"circular-progress-bar__iconWrapper_m7bt1","icon-tertiary":"circular-progress-bar__icon-tertiary_m7bt1","icon-positive":"circular-progress-bar__icon-positive_m7bt1","icon-negative":"circular-progress-bar__icon-negative_m7bt1","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_m7bt1","icon-primary":"circular-progress-bar__icon-primary_m7bt1","icon-secondary":"circular-progress-bar__icon-secondary_m7bt1","icon":"circular-progress-bar__icon_m7bt1"};
16
+ var styles = {"component":"circular-progress-bar__component_y3sny","bg-positive":"circular-progress-bar__bg-positive_y3sny","bg-negative":"circular-progress-bar__bg-negative_y3sny","svg":"circular-progress-bar__svg_y3sny","title":"circular-progress-bar__title_y3sny","subtitle":"circular-progress-bar__subtitle_y3sny","labelWrapper":"circular-progress-bar__labelWrapper_y3sny","label":"circular-progress-bar__label_y3sny","typography":"circular-progress-bar__typography_y3sny","size-144":"circular-progress-bar__size-144_y3sny","size-128":"circular-progress-bar__size-128_y3sny","size-80":"circular-progress-bar__size-80_y3sny","size-64":"circular-progress-bar__size-64_y3sny","size-48":"circular-progress-bar__size-48_y3sny","size-24":"circular-progress-bar__size-24_y3sny","backgroundCircle":"circular-progress-bar__backgroundCircle_y3sny","progressCircle":"circular-progress-bar__progressCircle_y3sny","positive":"circular-progress-bar__positive_y3sny","negative":"circular-progress-bar__negative_y3sny","stroke":"circular-progress-bar__stroke_y3sny","iconWrapper":"circular-progress-bar__iconWrapper_y3sny","icon-tertiary":"circular-progress-bar__icon-tertiary_y3sny","icon-positive":"circular-progress-bar__icon-positive_y3sny","icon-negative":"circular-progress-bar__icon-negative_y3sny","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_y3sny","icon-primary":"circular-progress-bar__icon-primary_y3sny","icon-secondary":"circular-progress-bar__icon-secondary_y3sny","icon":"circular-progress-bar__icon_y3sny"};
17
17
  require('./index.css')
18
18
 
19
19
  /**
@@ -52,11 +52,11 @@ var CircularProgressBar = function (_a) {
52
52
  ? contentColor
53
53
  : undefined;
54
54
  var renderTitleString = function () {
55
- return consts.SIZES[size] > 64 ? (React__default.default.createElement(coreComponentsTypography.Typography.TitleMobile, { className: cn__default.default(styles.typography, styles.title), color: isCompleteTextColor ? completeTextColor : typographyContentColor, tag: 'div', font: 'system', view: consts.VIEW_TITLE[size], style: tslib.__assign({}, (!typographyContentColor && { color: contentColor })) }, titleContent)) : (React__default.default.createElement(coreComponentsTypography.Typography.Text, { className: styles.title, color: isCompleteTextColor ? completeTextColor : typographyContentColor, tag: 'div', weight: 'bold', view: consts.VIEW_TEXT[size], style: tslib.__assign({}, (!typographyContentColor && { color: contentColor })) }, titleContent));
55
+ return consts.SIZES[size] > 64 ? (React__default.default.createElement(coreComponentsTypography.TitleMobile, { className: cn__default.default(styles.typography, styles.title), color: isCompleteTextColor ? completeTextColor : typographyContentColor, tag: 'div', font: 'system', view: consts.VIEW_TITLE[size], style: tslib.__assign({}, (!typographyContentColor && { color: contentColor })) }, titleContent)) : (React__default.default.createElement(coreComponentsTypography.Text, { className: styles.title, color: isCompleteTextColor ? completeTextColor : typographyContentColor, tag: 'div', weight: 'bold', view: consts.VIEW_TEXT[size], style: tslib.__assign({}, (!typographyContentColor && { color: contentColor })) }, titleContent));
56
56
  };
57
57
  var renderTitle = function () { return (typeof title === 'string' ? renderTitleString() : titleContent); };
58
58
  var renderSubTitle = function () {
59
- return typeof subtitle === 'string' ? (React__default.default.createElement(coreComponentsTypography.Typography.Text, { tag: 'div', className: styles.subtitle, color: isCompleteTextColor ? completeTextColor : typographyContentColor, view: 'primary-small', style: tslib.__assign({}, (!typographyContentColor && { color: contentColor })) }, subtitleContent)) : (subtitleContent);
59
+ return typeof subtitle === 'string' ? (React__default.default.createElement(coreComponentsTypography.Text, { tag: 'div', className: styles.subtitle, color: isCompleteTextColor ? completeTextColor : typographyContentColor, view: 'primary-small', style: tslib.__assign({}, (!typographyContentColor && { color: contentColor })) }, subtitleContent)) : (subtitleContent);
60
60
  };
61
61
  var renderIcon = function () {
62
62
  var _a;
package/cssm/Component.js CHANGED
@@ -51,11 +51,11 @@ var CircularProgressBar = function (_a) {
51
51
  ? contentColor
52
52
  : undefined;
53
53
  var renderTitleString = function () {
54
- return consts.SIZES[size] > 64 ? (React__default.default.createElement(coreComponentsTypography.Typography.TitleMobile, { className: cn__default.default(styles__default.default.typography, styles__default.default.title), color: isCompleteTextColor ? completeTextColor : typographyContentColor, tag: 'div', font: 'system', view: consts.VIEW_TITLE[size], style: tslib.__assign({}, (!typographyContentColor && { color: contentColor })) }, titleContent)) : (React__default.default.createElement(coreComponentsTypography.Typography.Text, { className: styles__default.default.title, color: isCompleteTextColor ? completeTextColor : typographyContentColor, tag: 'div', weight: 'bold', view: consts.VIEW_TEXT[size], style: tslib.__assign({}, (!typographyContentColor && { color: contentColor })) }, titleContent));
54
+ return consts.SIZES[size] > 64 ? (React__default.default.createElement(coreComponentsTypography.TitleMobile, { className: cn__default.default(styles__default.default.typography, styles__default.default.title), color: isCompleteTextColor ? completeTextColor : typographyContentColor, tag: 'div', font: 'system', view: consts.VIEW_TITLE[size], style: tslib.__assign({}, (!typographyContentColor && { color: contentColor })) }, titleContent)) : (React__default.default.createElement(coreComponentsTypography.Text, { className: styles__default.default.title, color: isCompleteTextColor ? completeTextColor : typographyContentColor, tag: 'div', weight: 'bold', view: consts.VIEW_TEXT[size], style: tslib.__assign({}, (!typographyContentColor && { color: contentColor })) }, titleContent));
55
55
  };
56
56
  var renderTitle = function () { return (typeof title === 'string' ? renderTitleString() : titleContent); };
57
57
  var renderSubTitle = function () {
58
- return typeof subtitle === 'string' ? (React__default.default.createElement(coreComponentsTypography.Typography.Text, { tag: 'div', className: styles__default.default.subtitle, color: isCompleteTextColor ? completeTextColor : typographyContentColor, view: 'primary-small', style: tslib.__assign({}, (!typographyContentColor && { color: contentColor })) }, subtitleContent)) : (subtitleContent);
58
+ return typeof subtitle === 'string' ? (React__default.default.createElement(coreComponentsTypography.Text, { tag: 'div', className: styles__default.default.subtitle, color: isCompleteTextColor ? completeTextColor : typographyContentColor, view: 'primary-small', style: tslib.__assign({}, (!typographyContentColor && { color: contentColor })) }, subtitleContent)) : (subtitleContent);
59
59
  };
60
60
  var renderIcon = function () {
61
61
  var _a;
package/esm/Component.js CHANGED
@@ -1,10 +1,10 @@
1
1
  import { __assign } from 'tslib';
2
2
  import React, { useMemo } from 'react';
3
3
  import cn from 'classnames';
4
- import { Typography } from '@alfalab/core-components-typography/esm';
4
+ import { Text, TitleMobile } from '@alfalab/core-components-typography/esm';
5
5
  import { STROKE, SIZES, TYPOGRAPHY_COLOR, SIZE_TO_CLASSNAME_MAP, VIEW_TITLE, VIEW_TEXT } from './consts.js';
6
6
 
7
- var styles = {"component":"circular-progress-bar__component_m7bt1","bg-positive":"circular-progress-bar__bg-positive_m7bt1","bg-negative":"circular-progress-bar__bg-negative_m7bt1","svg":"circular-progress-bar__svg_m7bt1","title":"circular-progress-bar__title_m7bt1","subtitle":"circular-progress-bar__subtitle_m7bt1","labelWrapper":"circular-progress-bar__labelWrapper_m7bt1","label":"circular-progress-bar__label_m7bt1","typography":"circular-progress-bar__typography_m7bt1","size-144":"circular-progress-bar__size-144_m7bt1","size-128":"circular-progress-bar__size-128_m7bt1","size-80":"circular-progress-bar__size-80_m7bt1","size-64":"circular-progress-bar__size-64_m7bt1","size-48":"circular-progress-bar__size-48_m7bt1","size-24":"circular-progress-bar__size-24_m7bt1","backgroundCircle":"circular-progress-bar__backgroundCircle_m7bt1","progressCircle":"circular-progress-bar__progressCircle_m7bt1","positive":"circular-progress-bar__positive_m7bt1","negative":"circular-progress-bar__negative_m7bt1","stroke":"circular-progress-bar__stroke_m7bt1","iconWrapper":"circular-progress-bar__iconWrapper_m7bt1","icon-tertiary":"circular-progress-bar__icon-tertiary_m7bt1","icon-positive":"circular-progress-bar__icon-positive_m7bt1","icon-negative":"circular-progress-bar__icon-negative_m7bt1","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_m7bt1","icon-primary":"circular-progress-bar__icon-primary_m7bt1","icon-secondary":"circular-progress-bar__icon-secondary_m7bt1","icon":"circular-progress-bar__icon_m7bt1"};
7
+ var styles = {"component":"circular-progress-bar__component_y3sny","bg-positive":"circular-progress-bar__bg-positive_y3sny","bg-negative":"circular-progress-bar__bg-negative_y3sny","svg":"circular-progress-bar__svg_y3sny","title":"circular-progress-bar__title_y3sny","subtitle":"circular-progress-bar__subtitle_y3sny","labelWrapper":"circular-progress-bar__labelWrapper_y3sny","label":"circular-progress-bar__label_y3sny","typography":"circular-progress-bar__typography_y3sny","size-144":"circular-progress-bar__size-144_y3sny","size-128":"circular-progress-bar__size-128_y3sny","size-80":"circular-progress-bar__size-80_y3sny","size-64":"circular-progress-bar__size-64_y3sny","size-48":"circular-progress-bar__size-48_y3sny","size-24":"circular-progress-bar__size-24_y3sny","backgroundCircle":"circular-progress-bar__backgroundCircle_y3sny","progressCircle":"circular-progress-bar__progressCircle_y3sny","positive":"circular-progress-bar__positive_y3sny","negative":"circular-progress-bar__negative_y3sny","stroke":"circular-progress-bar__stroke_y3sny","iconWrapper":"circular-progress-bar__iconWrapper_y3sny","icon-tertiary":"circular-progress-bar__icon-tertiary_y3sny","icon-positive":"circular-progress-bar__icon-positive_y3sny","icon-negative":"circular-progress-bar__icon-negative_y3sny","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_y3sny","icon-primary":"circular-progress-bar__icon-primary_y3sny","icon-secondary":"circular-progress-bar__icon-secondary_y3sny","icon":"circular-progress-bar__icon_y3sny"};
8
8
  require('./index.css')
9
9
 
10
10
  /**
@@ -43,11 +43,11 @@ var CircularProgressBar = function (_a) {
43
43
  ? contentColor
44
44
  : undefined;
45
45
  var renderTitleString = function () {
46
- return SIZES[size] > 64 ? (React.createElement(Typography.TitleMobile, { className: cn(styles.typography, styles.title), color: isCompleteTextColor ? completeTextColor : typographyContentColor, tag: 'div', font: 'system', view: VIEW_TITLE[size], style: __assign({}, (!typographyContentColor && { color: contentColor })) }, titleContent)) : (React.createElement(Typography.Text, { className: styles.title, color: isCompleteTextColor ? completeTextColor : typographyContentColor, tag: 'div', weight: 'bold', view: VIEW_TEXT[size], style: __assign({}, (!typographyContentColor && { color: contentColor })) }, titleContent));
46
+ return SIZES[size] > 64 ? (React.createElement(TitleMobile, { className: cn(styles.typography, styles.title), color: isCompleteTextColor ? completeTextColor : typographyContentColor, tag: 'div', font: 'system', view: VIEW_TITLE[size], style: __assign({}, (!typographyContentColor && { color: contentColor })) }, titleContent)) : (React.createElement(Text, { className: styles.title, color: isCompleteTextColor ? completeTextColor : typographyContentColor, tag: 'div', weight: 'bold', view: VIEW_TEXT[size], style: __assign({}, (!typographyContentColor && { color: contentColor })) }, titleContent));
47
47
  };
48
48
  var renderTitle = function () { return (typeof title === 'string' ? renderTitleString() : titleContent); };
49
49
  var renderSubTitle = function () {
50
- return typeof subtitle === 'string' ? (React.createElement(Typography.Text, { tag: 'div', className: styles.subtitle, color: isCompleteTextColor ? completeTextColor : typographyContentColor, view: 'primary-small', style: __assign({}, (!typographyContentColor && { color: contentColor })) }, subtitleContent)) : (subtitleContent);
50
+ return typeof subtitle === 'string' ? (React.createElement(Text, { tag: 'div', className: styles.subtitle, color: isCompleteTextColor ? completeTextColor : typographyContentColor, view: 'primary-small', style: __assign({}, (!typographyContentColor && { color: contentColor })) }, subtitleContent)) : (subtitleContent);
51
51
  };
52
52
  var renderIcon = function () {
53
53
  var _a;
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: xl6fk */
1
+ /* hash: 12ouv */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-neutral-500: #babbc2;
@@ -42,135 +42,135 @@
42
42
  /* theme */
43
43
  --circular-progress-bar-font-family: var(--font-family-system);
44
44
  --circular-progress-bar-font-weight: 600;
45
- } .circular-progress-bar__component_m7bt1 {
45
+ } .circular-progress-bar__component_y3sny {
46
46
  position: relative;
47
47
  display: flex;
48
48
  justify-content: center;
49
49
  align-items: center;
50
50
  border-radius: var(--border-radius-pill)
51
- } .circular-progress-bar__component_m7bt1.circular-progress-bar__bg-positive_m7bt1 {
51
+ } .circular-progress-bar__component_y3sny.circular-progress-bar__bg-positive_y3sny {
52
52
  background: var(--circular-progress-bar-positive-color);
53
- } .circular-progress-bar__component_m7bt1.circular-progress-bar__bg-negative_m7bt1 {
53
+ } .circular-progress-bar__component_y3sny.circular-progress-bar__bg-negative_y3sny {
54
54
  background: var(--circular-progress-bar-negative-color);
55
- } .circular-progress-bar__svg_m7bt1 {
55
+ } .circular-progress-bar__svg_y3sny {
56
56
  display: block;
57
57
  width: 100%;
58
- } .circular-progress-bar__title_m7bt1,
59
- .circular-progress-bar__subtitle_m7bt1 {
58
+ } .circular-progress-bar__title_y3sny,
59
+ .circular-progress-bar__subtitle_y3sny {
60
60
  overflow: hidden;
61
61
  word-break: break-word;
62
62
  white-space: nowrap;
63
63
  text-overflow: ellipsis;
64
64
  margin: var(--gap-0) 6px;
65
- } .circular-progress-bar__subtitle_m7bt1 {
65
+ } .circular-progress-bar__subtitle_y3sny {
66
66
  max-height: 40px;
67
- } .circular-progress-bar__labelWrapper_m7bt1 {
67
+ } .circular-progress-bar__labelWrapper_y3sny {
68
68
  text-align: center;
69
69
  position: absolute;
70
70
  top: 50%;
71
71
  left: 50%;
72
72
  width: 100%;
73
73
  transform: translate(-50%, -50%)
74
- } .circular-progress-bar__labelWrapper_m7bt1.circular-progress-bar__label_m7bt1 {
74
+ } .circular-progress-bar__labelWrapper_y3sny.circular-progress-bar__label_y3sny {
75
75
  display: flex;
76
76
  align-items: center;
77
77
  justify-content: center;
78
- } .circular-progress-bar__typography_m7bt1 {
78
+ } .circular-progress-bar__typography_y3sny {
79
79
  font-feature-settings: 'ss01';
80
80
  font-weight: var(--circular-progress-bar-font-weight);
81
81
  font-family: var(--circular-progress-bar-font-family);
82
- } .circular-progress-bar__size-144_m7bt1 {
82
+ } .circular-progress-bar__size-144_y3sny {
83
83
  width: 144px;
84
84
  height: 144px
85
- } .circular-progress-bar__size-144_m7bt1 .circular-progress-bar__labelWrapper_m7bt1 {
85
+ } .circular-progress-bar__size-144_y3sny .circular-progress-bar__labelWrapper_y3sny {
86
86
  max-width: 128px;
87
- } .circular-progress-bar__size-144_m7bt1 .circular-progress-bar__title_m7bt1 {
87
+ } .circular-progress-bar__size-144_y3sny .circular-progress-bar__title_y3sny {
88
88
  max-height: 32px;
89
- } .circular-progress-bar__size-128_m7bt1 {
89
+ } .circular-progress-bar__size-128_y3sny {
90
90
  width: 128px;
91
91
  height: 128px
92
- } .circular-progress-bar__size-128_m7bt1 .circular-progress-bar__labelWrapper_m7bt1 {
92
+ } .circular-progress-bar__size-128_y3sny .circular-progress-bar__labelWrapper_y3sny {
93
93
  max-width: 108px;
94
- } .circular-progress-bar__size-128_m7bt1 .circular-progress-bar__title_m7bt1 {
94
+ } .circular-progress-bar__size-128_y3sny .circular-progress-bar__title_y3sny {
95
95
  max-height: 32px;
96
- } .circular-progress-bar__size-80_m7bt1 {
96
+ } .circular-progress-bar__size-80_y3sny {
97
97
  width: 80px;
98
98
  height: 80px
99
- } .circular-progress-bar__size-80_m7bt1 .circular-progress-bar__labelWrapper_m7bt1 {
99
+ } .circular-progress-bar__size-80_y3sny .circular-progress-bar__labelWrapper_y3sny {
100
100
  max-width: 64px;
101
- } .circular-progress-bar__size-80_m7bt1 .circular-progress-bar__title_m7bt1 {
101
+ } .circular-progress-bar__size-80_y3sny .circular-progress-bar__title_y3sny {
102
102
  max-height: 24px;
103
- } .circular-progress-bar__size-64_m7bt1 {
103
+ } .circular-progress-bar__size-64_y3sny {
104
104
  width: 64px;
105
105
  height: 64px
106
- } .circular-progress-bar__size-64_m7bt1 .circular-progress-bar__labelWrapper_m7bt1 {
106
+ } .circular-progress-bar__size-64_y3sny .circular-progress-bar__labelWrapper_y3sny {
107
107
  max-width: 48px;
108
- } .circular-progress-bar__size-64_m7bt1 .circular-progress-bar__title_m7bt1 {
108
+ } .circular-progress-bar__size-64_y3sny .circular-progress-bar__title_y3sny {
109
109
  max-height: 16px;
110
110
  margin: var(--gap-0);
111
- } .circular-progress-bar__size-48_m7bt1 {
111
+ } .circular-progress-bar__size-48_y3sny {
112
112
  width: 48px;
113
113
  height: 48px
114
- } .circular-progress-bar__size-48_m7bt1 .circular-progress-bar__labelWrapper_m7bt1 {
114
+ } .circular-progress-bar__size-48_y3sny .circular-progress-bar__labelWrapper_y3sny {
115
115
  max-width: 40px;
116
- } .circular-progress-bar__size-48_m7bt1 .circular-progress-bar__title_m7bt1 {
116
+ } .circular-progress-bar__size-48_y3sny .circular-progress-bar__title_y3sny {
117
117
  max-height: 16px;
118
118
  margin: var(--gap-0);
119
- } .circular-progress-bar__size-24_m7bt1 {
119
+ } .circular-progress-bar__size-24_y3sny {
120
120
  width: 24px;
121
121
  height: 24px
122
- } .circular-progress-bar__size-24_m7bt1 .circular-progress-bar__labelWrapper_m7bt1 {
122
+ } .circular-progress-bar__size-24_y3sny .circular-progress-bar__labelWrapper_y3sny {
123
123
  max-width: 24px;
124
- } .circular-progress-bar__backgroundCircle_m7bt1,
125
- .circular-progress-bar__progressCircle_m7bt1 {
124
+ } .circular-progress-bar__backgroundCircle_y3sny,
125
+ .circular-progress-bar__progressCircle_y3sny {
126
126
  width: 100%;
127
127
  height: 100%;
128
128
  fill: transparent;
129
- } .circular-progress-bar__positive_m7bt1 {
129
+ } .circular-progress-bar__positive_y3sny {
130
130
  stroke: var(--circular-progress-bar-positive-color);
131
- } .circular-progress-bar__negative_m7bt1 {
131
+ } .circular-progress-bar__negative_y3sny {
132
132
  stroke: var(--circular-progress-bar-negative-color);
133
- } .circular-progress-bar__backgroundCircle_m7bt1 {
133
+ } .circular-progress-bar__backgroundCircle_y3sny {
134
134
  stroke: var(--circular-progress-bar-stroke-color)
135
- } .circular-progress-bar__backgroundCircle_m7bt1.circular-progress-bar__stroke_m7bt1 {
135
+ } .circular-progress-bar__backgroundCircle_y3sny.circular-progress-bar__stroke_y3sny {
136
136
  stroke: transparent;
137
- } .circular-progress-bar__progressCircle_m7bt1 {
137
+ } .circular-progress-bar__progressCircle_y3sny {
138
138
  stroke-linecap: round;
139
- } .circular-progress-bar__iconWrapper_m7bt1 {
139
+ } .circular-progress-bar__iconWrapper_y3sny {
140
140
  display: flex;
141
141
  align-items: center;
142
142
  justify-content: center
143
- } .circular-progress-bar__iconWrapper_m7bt1.circular-progress-bar__size-144_m7bt1 {
143
+ } .circular-progress-bar__iconWrapper_y3sny.circular-progress-bar__size-144_y3sny {
144
144
  max-width: 64px;
145
145
  max-height: 64px;
146
- } .circular-progress-bar__iconWrapper_m7bt1.circular-progress-bar__size-128_m7bt1 {
146
+ } .circular-progress-bar__iconWrapper_y3sny.circular-progress-bar__size-128_y3sny {
147
147
  max-width: 64px;
148
148
  max-height: 64px;
149
- } .circular-progress-bar__iconWrapper_m7bt1.circular-progress-bar__size-80_m7bt1 {
149
+ } .circular-progress-bar__iconWrapper_y3sny.circular-progress-bar__size-80_y3sny {
150
150
  max-width: 48px;
151
151
  max-height: 48px;
152
- } .circular-progress-bar__iconWrapper_m7bt1.circular-progress-bar__size-64_m7bt1 {
152
+ } .circular-progress-bar__iconWrapper_y3sny.circular-progress-bar__size-64_y3sny {
153
153
  max-width: 36px;
154
154
  max-height: 36px;
155
- } .circular-progress-bar__iconWrapper_m7bt1.circular-progress-bar__size-48_m7bt1 {
155
+ } .circular-progress-bar__iconWrapper_y3sny.circular-progress-bar__size-48_y3sny {
156
156
  max-width: 24px;
157
157
  max-height: 24px;
158
- } .circular-progress-bar__iconWrapper_m7bt1.circular-progress-bar__size-24_m7bt1 {
158
+ } .circular-progress-bar__iconWrapper_y3sny.circular-progress-bar__size-24_y3sny {
159
159
  max-width: 16px;
160
160
  max-height: 16px;
161
- } .circular-progress-bar__iconWrapper_m7bt1.circular-progress-bar__icon-tertiary_m7bt1 {
161
+ } .circular-progress-bar__iconWrapper_y3sny.circular-progress-bar__icon-tertiary_y3sny {
162
162
  color: var(--color-light-neutral-500);
163
- } .circular-progress-bar__iconWrapper_m7bt1.circular-progress-bar__icon-positive_m7bt1 {
163
+ } .circular-progress-bar__iconWrapper_y3sny.circular-progress-bar__icon-positive_y3sny {
164
164
  color: var(--color-light-status-positive);
165
- } .circular-progress-bar__iconWrapper_m7bt1.circular-progress-bar__icon-negative_m7bt1 {
165
+ } .circular-progress-bar__iconWrapper_y3sny.circular-progress-bar__icon-negative_y3sny {
166
166
  color: var(--color-light-status-negative);
167
- } .circular-progress-bar__iconWrapper_m7bt1.circular-progress-bar__icon-primary-inverted_m7bt1 {
167
+ } .circular-progress-bar__iconWrapper_y3sny.circular-progress-bar__icon-primary-inverted_y3sny {
168
168
  color: var(--color-light-neutral-translucent-1300-inverted);
169
- } .circular-progress-bar__iconWrapper_m7bt1.circular-progress-bar__icon-primary_m7bt1 {
169
+ } .circular-progress-bar__iconWrapper_y3sny.circular-progress-bar__icon-primary_y3sny {
170
170
  color: var(--color-light-neutral-translucent-1300);
171
- } .circular-progress-bar__iconWrapper_m7bt1.circular-progress-bar__icon-secondary_m7bt1 {
171
+ } .circular-progress-bar__iconWrapper_y3sny.circular-progress-bar__icon-secondary_y3sny {
172
172
  color: var(--color-light-neutral-700);
173
- } .circular-progress-bar__icon_m7bt1 {
173
+ } .circular-progress-bar__icon_y3sny {
174
174
  width: 100%;
175
175
  height: 100%;
176
176
  }
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: xl6fk */
1
+ /* hash: 12ouv */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-neutral-500: #babbc2;
@@ -42,135 +42,135 @@
42
42
  /* theme */
43
43
  --circular-progress-bar-font-family: var(--font-family-system);
44
44
  --circular-progress-bar-font-weight: 600;
45
- } .circular-progress-bar__component_m7bt1 {
45
+ } .circular-progress-bar__component_y3sny {
46
46
  position: relative;
47
47
  display: flex;
48
48
  justify-content: center;
49
49
  align-items: center;
50
50
  border-radius: var(--border-radius-pill)
51
- } .circular-progress-bar__component_m7bt1.circular-progress-bar__bg-positive_m7bt1 {
51
+ } .circular-progress-bar__component_y3sny.circular-progress-bar__bg-positive_y3sny {
52
52
  background: var(--circular-progress-bar-positive-color);
53
- } .circular-progress-bar__component_m7bt1.circular-progress-bar__bg-negative_m7bt1 {
53
+ } .circular-progress-bar__component_y3sny.circular-progress-bar__bg-negative_y3sny {
54
54
  background: var(--circular-progress-bar-negative-color);
55
- } .circular-progress-bar__svg_m7bt1 {
55
+ } .circular-progress-bar__svg_y3sny {
56
56
  display: block;
57
57
  width: 100%;
58
- } .circular-progress-bar__title_m7bt1,
59
- .circular-progress-bar__subtitle_m7bt1 {
58
+ } .circular-progress-bar__title_y3sny,
59
+ .circular-progress-bar__subtitle_y3sny {
60
60
  overflow: hidden;
61
61
  word-break: break-word;
62
62
  white-space: nowrap;
63
63
  text-overflow: ellipsis;
64
64
  margin: var(--gap-0) 6px;
65
- } .circular-progress-bar__subtitle_m7bt1 {
65
+ } .circular-progress-bar__subtitle_y3sny {
66
66
  max-height: 40px;
67
- } .circular-progress-bar__labelWrapper_m7bt1 {
67
+ } .circular-progress-bar__labelWrapper_y3sny {
68
68
  text-align: center;
69
69
  position: absolute;
70
70
  top: 50%;
71
71
  left: 50%;
72
72
  width: 100%;
73
73
  transform: translate(-50%, -50%)
74
- } .circular-progress-bar__labelWrapper_m7bt1.circular-progress-bar__label_m7bt1 {
74
+ } .circular-progress-bar__labelWrapper_y3sny.circular-progress-bar__label_y3sny {
75
75
  display: flex;
76
76
  align-items: center;
77
77
  justify-content: center;
78
- } .circular-progress-bar__typography_m7bt1 {
78
+ } .circular-progress-bar__typography_y3sny {
79
79
  font-feature-settings: 'ss01';
80
80
  font-weight: var(--circular-progress-bar-font-weight);
81
81
  font-family: var(--circular-progress-bar-font-family);
82
- } .circular-progress-bar__size-144_m7bt1 {
82
+ } .circular-progress-bar__size-144_y3sny {
83
83
  width: 144px;
84
84
  height: 144px
85
- } .circular-progress-bar__size-144_m7bt1 .circular-progress-bar__labelWrapper_m7bt1 {
85
+ } .circular-progress-bar__size-144_y3sny .circular-progress-bar__labelWrapper_y3sny {
86
86
  max-width: 128px;
87
- } .circular-progress-bar__size-144_m7bt1 .circular-progress-bar__title_m7bt1 {
87
+ } .circular-progress-bar__size-144_y3sny .circular-progress-bar__title_y3sny {
88
88
  max-height: 32px;
89
- } .circular-progress-bar__size-128_m7bt1 {
89
+ } .circular-progress-bar__size-128_y3sny {
90
90
  width: 128px;
91
91
  height: 128px
92
- } .circular-progress-bar__size-128_m7bt1 .circular-progress-bar__labelWrapper_m7bt1 {
92
+ } .circular-progress-bar__size-128_y3sny .circular-progress-bar__labelWrapper_y3sny {
93
93
  max-width: 108px;
94
- } .circular-progress-bar__size-128_m7bt1 .circular-progress-bar__title_m7bt1 {
94
+ } .circular-progress-bar__size-128_y3sny .circular-progress-bar__title_y3sny {
95
95
  max-height: 32px;
96
- } .circular-progress-bar__size-80_m7bt1 {
96
+ } .circular-progress-bar__size-80_y3sny {
97
97
  width: 80px;
98
98
  height: 80px
99
- } .circular-progress-bar__size-80_m7bt1 .circular-progress-bar__labelWrapper_m7bt1 {
99
+ } .circular-progress-bar__size-80_y3sny .circular-progress-bar__labelWrapper_y3sny {
100
100
  max-width: 64px;
101
- } .circular-progress-bar__size-80_m7bt1 .circular-progress-bar__title_m7bt1 {
101
+ } .circular-progress-bar__size-80_y3sny .circular-progress-bar__title_y3sny {
102
102
  max-height: 24px;
103
- } .circular-progress-bar__size-64_m7bt1 {
103
+ } .circular-progress-bar__size-64_y3sny {
104
104
  width: 64px;
105
105
  height: 64px
106
- } .circular-progress-bar__size-64_m7bt1 .circular-progress-bar__labelWrapper_m7bt1 {
106
+ } .circular-progress-bar__size-64_y3sny .circular-progress-bar__labelWrapper_y3sny {
107
107
  max-width: 48px;
108
- } .circular-progress-bar__size-64_m7bt1 .circular-progress-bar__title_m7bt1 {
108
+ } .circular-progress-bar__size-64_y3sny .circular-progress-bar__title_y3sny {
109
109
  max-height: 16px;
110
110
  margin: var(--gap-0);
111
- } .circular-progress-bar__size-48_m7bt1 {
111
+ } .circular-progress-bar__size-48_y3sny {
112
112
  width: 48px;
113
113
  height: 48px
114
- } .circular-progress-bar__size-48_m7bt1 .circular-progress-bar__labelWrapper_m7bt1 {
114
+ } .circular-progress-bar__size-48_y3sny .circular-progress-bar__labelWrapper_y3sny {
115
115
  max-width: 40px;
116
- } .circular-progress-bar__size-48_m7bt1 .circular-progress-bar__title_m7bt1 {
116
+ } .circular-progress-bar__size-48_y3sny .circular-progress-bar__title_y3sny {
117
117
  max-height: 16px;
118
118
  margin: var(--gap-0);
119
- } .circular-progress-bar__size-24_m7bt1 {
119
+ } .circular-progress-bar__size-24_y3sny {
120
120
  width: 24px;
121
121
  height: 24px
122
- } .circular-progress-bar__size-24_m7bt1 .circular-progress-bar__labelWrapper_m7bt1 {
122
+ } .circular-progress-bar__size-24_y3sny .circular-progress-bar__labelWrapper_y3sny {
123
123
  max-width: 24px;
124
- } .circular-progress-bar__backgroundCircle_m7bt1,
125
- .circular-progress-bar__progressCircle_m7bt1 {
124
+ } .circular-progress-bar__backgroundCircle_y3sny,
125
+ .circular-progress-bar__progressCircle_y3sny {
126
126
  width: 100%;
127
127
  height: 100%;
128
128
  fill: transparent;
129
- } .circular-progress-bar__positive_m7bt1 {
129
+ } .circular-progress-bar__positive_y3sny {
130
130
  stroke: var(--circular-progress-bar-positive-color);
131
- } .circular-progress-bar__negative_m7bt1 {
131
+ } .circular-progress-bar__negative_y3sny {
132
132
  stroke: var(--circular-progress-bar-negative-color);
133
- } .circular-progress-bar__backgroundCircle_m7bt1 {
133
+ } .circular-progress-bar__backgroundCircle_y3sny {
134
134
  stroke: var(--circular-progress-bar-stroke-color)
135
- } .circular-progress-bar__backgroundCircle_m7bt1.circular-progress-bar__stroke_m7bt1 {
135
+ } .circular-progress-bar__backgroundCircle_y3sny.circular-progress-bar__stroke_y3sny {
136
136
  stroke: transparent;
137
- } .circular-progress-bar__progressCircle_m7bt1 {
137
+ } .circular-progress-bar__progressCircle_y3sny {
138
138
  stroke-linecap: round;
139
- } .circular-progress-bar__iconWrapper_m7bt1 {
139
+ } .circular-progress-bar__iconWrapper_y3sny {
140
140
  display: flex;
141
141
  align-items: center;
142
142
  justify-content: center
143
- } .circular-progress-bar__iconWrapper_m7bt1.circular-progress-bar__size-144_m7bt1 {
143
+ } .circular-progress-bar__iconWrapper_y3sny.circular-progress-bar__size-144_y3sny {
144
144
  max-width: 64px;
145
145
  max-height: 64px;
146
- } .circular-progress-bar__iconWrapper_m7bt1.circular-progress-bar__size-128_m7bt1 {
146
+ } .circular-progress-bar__iconWrapper_y3sny.circular-progress-bar__size-128_y3sny {
147
147
  max-width: 64px;
148
148
  max-height: 64px;
149
- } .circular-progress-bar__iconWrapper_m7bt1.circular-progress-bar__size-80_m7bt1 {
149
+ } .circular-progress-bar__iconWrapper_y3sny.circular-progress-bar__size-80_y3sny {
150
150
  max-width: 48px;
151
151
  max-height: 48px;
152
- } .circular-progress-bar__iconWrapper_m7bt1.circular-progress-bar__size-64_m7bt1 {
152
+ } .circular-progress-bar__iconWrapper_y3sny.circular-progress-bar__size-64_y3sny {
153
153
  max-width: 36px;
154
154
  max-height: 36px;
155
- } .circular-progress-bar__iconWrapper_m7bt1.circular-progress-bar__size-48_m7bt1 {
155
+ } .circular-progress-bar__iconWrapper_y3sny.circular-progress-bar__size-48_y3sny {
156
156
  max-width: 24px;
157
157
  max-height: 24px;
158
- } .circular-progress-bar__iconWrapper_m7bt1.circular-progress-bar__size-24_m7bt1 {
158
+ } .circular-progress-bar__iconWrapper_y3sny.circular-progress-bar__size-24_y3sny {
159
159
  max-width: 16px;
160
160
  max-height: 16px;
161
- } .circular-progress-bar__iconWrapper_m7bt1.circular-progress-bar__icon-tertiary_m7bt1 {
161
+ } .circular-progress-bar__iconWrapper_y3sny.circular-progress-bar__icon-tertiary_y3sny {
162
162
  color: var(--color-light-neutral-500);
163
- } .circular-progress-bar__iconWrapper_m7bt1.circular-progress-bar__icon-positive_m7bt1 {
163
+ } .circular-progress-bar__iconWrapper_y3sny.circular-progress-bar__icon-positive_y3sny {
164
164
  color: var(--color-light-status-positive);
165
- } .circular-progress-bar__iconWrapper_m7bt1.circular-progress-bar__icon-negative_m7bt1 {
165
+ } .circular-progress-bar__iconWrapper_y3sny.circular-progress-bar__icon-negative_y3sny {
166
166
  color: var(--color-light-status-negative);
167
- } .circular-progress-bar__iconWrapper_m7bt1.circular-progress-bar__icon-primary-inverted_m7bt1 {
167
+ } .circular-progress-bar__iconWrapper_y3sny.circular-progress-bar__icon-primary-inverted_y3sny {
168
168
  color: var(--color-light-neutral-translucent-1300-inverted);
169
- } .circular-progress-bar__iconWrapper_m7bt1.circular-progress-bar__icon-primary_m7bt1 {
169
+ } .circular-progress-bar__iconWrapper_y3sny.circular-progress-bar__icon-primary_y3sny {
170
170
  color: var(--color-light-neutral-translucent-1300);
171
- } .circular-progress-bar__iconWrapper_m7bt1.circular-progress-bar__icon-secondary_m7bt1 {
171
+ } .circular-progress-bar__iconWrapper_y3sny.circular-progress-bar__icon-secondary_y3sny {
172
172
  color: var(--color-light-neutral-700);
173
- } .circular-progress-bar__icon_m7bt1 {
173
+ } .circular-progress-bar__icon_y3sny {
174
174
  width: 100%;
175
175
  height: 100%;
176
176
  }
package/modern/Component.js CHANGED
@@ -1,9 +1,9 @@
1
1
  import React, { useMemo } from 'react';
2
2
  import cn from 'classnames';
3
- import { Typography } from '@alfalab/core-components-typography/modern';
3
+ import { Text, TitleMobile } from '@alfalab/core-components-typography/modern';
4
4
  import { STROKE, SIZES, TYPOGRAPHY_COLOR, SIZE_TO_CLASSNAME_MAP, VIEW_TITLE, VIEW_TEXT } from './consts.js';
5
5
 
6
- const styles = {"component":"circular-progress-bar__component_m7bt1","bg-positive":"circular-progress-bar__bg-positive_m7bt1","bg-negative":"circular-progress-bar__bg-negative_m7bt1","svg":"circular-progress-bar__svg_m7bt1","title":"circular-progress-bar__title_m7bt1","subtitle":"circular-progress-bar__subtitle_m7bt1","labelWrapper":"circular-progress-bar__labelWrapper_m7bt1","label":"circular-progress-bar__label_m7bt1","typography":"circular-progress-bar__typography_m7bt1","size-144":"circular-progress-bar__size-144_m7bt1","size-128":"circular-progress-bar__size-128_m7bt1","size-80":"circular-progress-bar__size-80_m7bt1","size-64":"circular-progress-bar__size-64_m7bt1","size-48":"circular-progress-bar__size-48_m7bt1","size-24":"circular-progress-bar__size-24_m7bt1","backgroundCircle":"circular-progress-bar__backgroundCircle_m7bt1","progressCircle":"circular-progress-bar__progressCircle_m7bt1","positive":"circular-progress-bar__positive_m7bt1","negative":"circular-progress-bar__negative_m7bt1","stroke":"circular-progress-bar__stroke_m7bt1","iconWrapper":"circular-progress-bar__iconWrapper_m7bt1","icon-tertiary":"circular-progress-bar__icon-tertiary_m7bt1","icon-positive":"circular-progress-bar__icon-positive_m7bt1","icon-negative":"circular-progress-bar__icon-negative_m7bt1","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_m7bt1","icon-primary":"circular-progress-bar__icon-primary_m7bt1","icon-secondary":"circular-progress-bar__icon-secondary_m7bt1","icon":"circular-progress-bar__icon_m7bt1"};
6
+ const styles = {"component":"circular-progress-bar__component_y3sny","bg-positive":"circular-progress-bar__bg-positive_y3sny","bg-negative":"circular-progress-bar__bg-negative_y3sny","svg":"circular-progress-bar__svg_y3sny","title":"circular-progress-bar__title_y3sny","subtitle":"circular-progress-bar__subtitle_y3sny","labelWrapper":"circular-progress-bar__labelWrapper_y3sny","label":"circular-progress-bar__label_y3sny","typography":"circular-progress-bar__typography_y3sny","size-144":"circular-progress-bar__size-144_y3sny","size-128":"circular-progress-bar__size-128_y3sny","size-80":"circular-progress-bar__size-80_y3sny","size-64":"circular-progress-bar__size-64_y3sny","size-48":"circular-progress-bar__size-48_y3sny","size-24":"circular-progress-bar__size-24_y3sny","backgroundCircle":"circular-progress-bar__backgroundCircle_y3sny","progressCircle":"circular-progress-bar__progressCircle_y3sny","positive":"circular-progress-bar__positive_y3sny","negative":"circular-progress-bar__negative_y3sny","stroke":"circular-progress-bar__stroke_y3sny","iconWrapper":"circular-progress-bar__iconWrapper_y3sny","icon-tertiary":"circular-progress-bar__icon-tertiary_y3sny","icon-positive":"circular-progress-bar__icon-positive_y3sny","icon-negative":"circular-progress-bar__icon-negative_y3sny","icon-primary-inverted":"circular-progress-bar__icon-primary-inverted_y3sny","icon-primary":"circular-progress-bar__icon-primary_y3sny","icon-secondary":"circular-progress-bar__icon-secondary_y3sny","icon":"circular-progress-bar__icon_y3sny"};
7
7
  require('./index.css')
8
8
 
9
9
  /**
@@ -39,13 +39,13 @@ const CircularProgressBar = ({ value, view = 'positive', size = 64, className, d
39
39
  const typographyContentColor = TYPOGRAPHY_COLOR.includes(contentColor)
40
40
  ? contentColor
41
41
  : undefined;
42
- const renderTitleString = () => SIZES[size] > 64 ? (React.createElement(Typography.TitleMobile, { className: cn(styles.typography, styles.title), color: isCompleteTextColor ? completeTextColor : typographyContentColor, tag: 'div', font: 'system', view: VIEW_TITLE[size], style: {
42
+ const renderTitleString = () => SIZES[size] > 64 ? (React.createElement(TitleMobile, { className: cn(styles.typography, styles.title), color: isCompleteTextColor ? completeTextColor : typographyContentColor, tag: 'div', font: 'system', view: VIEW_TITLE[size], style: {
43
43
  ...(!typographyContentColor && { color: contentColor }),
44
- } }, titleContent)) : (React.createElement(Typography.Text, { className: styles.title, color: isCompleteTextColor ? completeTextColor : typographyContentColor, tag: 'div', weight: 'bold', view: VIEW_TEXT[size], style: {
44
+ } }, titleContent)) : (React.createElement(Text, { className: styles.title, color: isCompleteTextColor ? completeTextColor : typographyContentColor, tag: 'div', weight: 'bold', view: VIEW_TEXT[size], style: {
45
45
  ...(!typographyContentColor && { color: contentColor }),
46
46
  } }, titleContent));
47
47
  const renderTitle = () => (typeof title === 'string' ? renderTitleString() : titleContent);
48
- const renderSubTitle = () => typeof subtitle === 'string' ? (React.createElement(Typography.Text, { tag: 'div', className: styles.subtitle, color: isCompleteTextColor ? completeTextColor : typographyContentColor, view: 'primary-small', style: {
48
+ const renderSubTitle = () => typeof subtitle === 'string' ? (React.createElement(Text, { tag: 'div', className: styles.subtitle, color: isCompleteTextColor ? completeTextColor : typographyContentColor, view: 'primary-small', style: {
49
49
  ...(!typographyContentColor && { color: contentColor }),
50
50
  } }, subtitleContent)) : (subtitleContent);
51
51
  const renderIcon = () => (React.createElement("span", { className: cn(styles.iconWrapper, styles[SIZE_TO_CLASSNAME_MAP[size]], styles.tertiary, styles[`icon-${contentColor}`], {
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: xl6fk */
1
+ /* hash: 12ouv */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-neutral-500: #babbc2;
@@ -42,135 +42,135 @@
42
42
  /* theme */
43
43
  --circular-progress-bar-font-family: var(--font-family-system);
44
44
  --circular-progress-bar-font-weight: 600;
45
- } .circular-progress-bar__component_m7bt1 {
45
+ } .circular-progress-bar__component_y3sny {
46
46
  position: relative;
47
47
  display: flex;
48
48
  justify-content: center;
49
49
  align-items: center;
50
50
  border-radius: var(--border-radius-pill)
51
- } .circular-progress-bar__component_m7bt1.circular-progress-bar__bg-positive_m7bt1 {
51
+ } .circular-progress-bar__component_y3sny.circular-progress-bar__bg-positive_y3sny {
52
52
  background: var(--circular-progress-bar-positive-color);
53
- } .circular-progress-bar__component_m7bt1.circular-progress-bar__bg-negative_m7bt1 {
53
+ } .circular-progress-bar__component_y3sny.circular-progress-bar__bg-negative_y3sny {
54
54
  background: var(--circular-progress-bar-negative-color);
55
- } .circular-progress-bar__svg_m7bt1 {
55
+ } .circular-progress-bar__svg_y3sny {
56
56
  display: block;
57
57
  width: 100%;
58
- } .circular-progress-bar__title_m7bt1,
59
- .circular-progress-bar__subtitle_m7bt1 {
58
+ } .circular-progress-bar__title_y3sny,
59
+ .circular-progress-bar__subtitle_y3sny {
60
60
  overflow: hidden;
61
61
  word-break: break-word;
62
62
  white-space: nowrap;
63
63
  text-overflow: ellipsis;
64
64
  margin: var(--gap-0) 6px;
65
- } .circular-progress-bar__subtitle_m7bt1 {
65
+ } .circular-progress-bar__subtitle_y3sny {
66
66
  max-height: 40px;
67
- } .circular-progress-bar__labelWrapper_m7bt1 {
67
+ } .circular-progress-bar__labelWrapper_y3sny {
68
68
  text-align: center;
69
69
  position: absolute;
70
70
  top: 50%;
71
71
  left: 50%;
72
72
  width: 100%;
73
73
  transform: translate(-50%, -50%)
74
- } .circular-progress-bar__labelWrapper_m7bt1.circular-progress-bar__label_m7bt1 {
74
+ } .circular-progress-bar__labelWrapper_y3sny.circular-progress-bar__label_y3sny {
75
75
  display: flex;
76
76
  align-items: center;
77
77
  justify-content: center;
78
- } .circular-progress-bar__typography_m7bt1 {
78
+ } .circular-progress-bar__typography_y3sny {
79
79
  font-feature-settings: 'ss01';
80
80
  font-weight: var(--circular-progress-bar-font-weight);
81
81
  font-family: var(--circular-progress-bar-font-family);
82
- } .circular-progress-bar__size-144_m7bt1 {
82
+ } .circular-progress-bar__size-144_y3sny {
83
83
  width: 144px;
84
84
  height: 144px
85
- } .circular-progress-bar__size-144_m7bt1 .circular-progress-bar__labelWrapper_m7bt1 {
85
+ } .circular-progress-bar__size-144_y3sny .circular-progress-bar__labelWrapper_y3sny {
86
86
  max-width: 128px;
87
- } .circular-progress-bar__size-144_m7bt1 .circular-progress-bar__title_m7bt1 {
87
+ } .circular-progress-bar__size-144_y3sny .circular-progress-bar__title_y3sny {
88
88
  max-height: 32px;
89
- } .circular-progress-bar__size-128_m7bt1 {
89
+ } .circular-progress-bar__size-128_y3sny {
90
90
  width: 128px;
91
91
  height: 128px
92
- } .circular-progress-bar__size-128_m7bt1 .circular-progress-bar__labelWrapper_m7bt1 {
92
+ } .circular-progress-bar__size-128_y3sny .circular-progress-bar__labelWrapper_y3sny {
93
93
  max-width: 108px;
94
- } .circular-progress-bar__size-128_m7bt1 .circular-progress-bar__title_m7bt1 {
94
+ } .circular-progress-bar__size-128_y3sny .circular-progress-bar__title_y3sny {
95
95
  max-height: 32px;
96
- } .circular-progress-bar__size-80_m7bt1 {
96
+ } .circular-progress-bar__size-80_y3sny {
97
97
  width: 80px;
98
98
  height: 80px
99
- } .circular-progress-bar__size-80_m7bt1 .circular-progress-bar__labelWrapper_m7bt1 {
99
+ } .circular-progress-bar__size-80_y3sny .circular-progress-bar__labelWrapper_y3sny {
100
100
  max-width: 64px;
101
- } .circular-progress-bar__size-80_m7bt1 .circular-progress-bar__title_m7bt1 {
101
+ } .circular-progress-bar__size-80_y3sny .circular-progress-bar__title_y3sny {
102
102
  max-height: 24px;
103
- } .circular-progress-bar__size-64_m7bt1 {
103
+ } .circular-progress-bar__size-64_y3sny {
104
104
  width: 64px;
105
105
  height: 64px
106
- } .circular-progress-bar__size-64_m7bt1 .circular-progress-bar__labelWrapper_m7bt1 {
106
+ } .circular-progress-bar__size-64_y3sny .circular-progress-bar__labelWrapper_y3sny {
107
107
  max-width: 48px;
108
- } .circular-progress-bar__size-64_m7bt1 .circular-progress-bar__title_m7bt1 {
108
+ } .circular-progress-bar__size-64_y3sny .circular-progress-bar__title_y3sny {
109
109
  max-height: 16px;
110
110
  margin: var(--gap-0);
111
- } .circular-progress-bar__size-48_m7bt1 {
111
+ } .circular-progress-bar__size-48_y3sny {
112
112
  width: 48px;
113
113
  height: 48px
114
- } .circular-progress-bar__size-48_m7bt1 .circular-progress-bar__labelWrapper_m7bt1 {
114
+ } .circular-progress-bar__size-48_y3sny .circular-progress-bar__labelWrapper_y3sny {
115
115
  max-width: 40px;
116
- } .circular-progress-bar__size-48_m7bt1 .circular-progress-bar__title_m7bt1 {
116
+ } .circular-progress-bar__size-48_y3sny .circular-progress-bar__title_y3sny {
117
117
  max-height: 16px;
118
118
  margin: var(--gap-0);
119
- } .circular-progress-bar__size-24_m7bt1 {
119
+ } .circular-progress-bar__size-24_y3sny {
120
120
  width: 24px;
121
121
  height: 24px
122
- } .circular-progress-bar__size-24_m7bt1 .circular-progress-bar__labelWrapper_m7bt1 {
122
+ } .circular-progress-bar__size-24_y3sny .circular-progress-bar__labelWrapper_y3sny {
123
123
  max-width: 24px;
124
- } .circular-progress-bar__backgroundCircle_m7bt1,
125
- .circular-progress-bar__progressCircle_m7bt1 {
124
+ } .circular-progress-bar__backgroundCircle_y3sny,
125
+ .circular-progress-bar__progressCircle_y3sny {
126
126
  width: 100%;
127
127
  height: 100%;
128
128
  fill: transparent;
129
- } .circular-progress-bar__positive_m7bt1 {
129
+ } .circular-progress-bar__positive_y3sny {
130
130
  stroke: var(--circular-progress-bar-positive-color);
131
- } .circular-progress-bar__negative_m7bt1 {
131
+ } .circular-progress-bar__negative_y3sny {
132
132
  stroke: var(--circular-progress-bar-negative-color);
133
- } .circular-progress-bar__backgroundCircle_m7bt1 {
133
+ } .circular-progress-bar__backgroundCircle_y3sny {
134
134
  stroke: var(--circular-progress-bar-stroke-color)
135
- } .circular-progress-bar__backgroundCircle_m7bt1.circular-progress-bar__stroke_m7bt1 {
135
+ } .circular-progress-bar__backgroundCircle_y3sny.circular-progress-bar__stroke_y3sny {
136
136
  stroke: transparent;
137
- } .circular-progress-bar__progressCircle_m7bt1 {
137
+ } .circular-progress-bar__progressCircle_y3sny {
138
138
  stroke-linecap: round;
139
- } .circular-progress-bar__iconWrapper_m7bt1 {
139
+ } .circular-progress-bar__iconWrapper_y3sny {
140
140
  display: flex;
141
141
  align-items: center;
142
142
  justify-content: center
143
- } .circular-progress-bar__iconWrapper_m7bt1.circular-progress-bar__size-144_m7bt1 {
143
+ } .circular-progress-bar__iconWrapper_y3sny.circular-progress-bar__size-144_y3sny {
144
144
  max-width: 64px;
145
145
  max-height: 64px;
146
- } .circular-progress-bar__iconWrapper_m7bt1.circular-progress-bar__size-128_m7bt1 {
146
+ } .circular-progress-bar__iconWrapper_y3sny.circular-progress-bar__size-128_y3sny {
147
147
  max-width: 64px;
148
148
  max-height: 64px;
149
- } .circular-progress-bar__iconWrapper_m7bt1.circular-progress-bar__size-80_m7bt1 {
149
+ } .circular-progress-bar__iconWrapper_y3sny.circular-progress-bar__size-80_y3sny {
150
150
  max-width: 48px;
151
151
  max-height: 48px;
152
- } .circular-progress-bar__iconWrapper_m7bt1.circular-progress-bar__size-64_m7bt1 {
152
+ } .circular-progress-bar__iconWrapper_y3sny.circular-progress-bar__size-64_y3sny {
153
153
  max-width: 36px;
154
154
  max-height: 36px;
155
- } .circular-progress-bar__iconWrapper_m7bt1.circular-progress-bar__size-48_m7bt1 {
155
+ } .circular-progress-bar__iconWrapper_y3sny.circular-progress-bar__size-48_y3sny {
156
156
  max-width: 24px;
157
157
  max-height: 24px;
158
- } .circular-progress-bar__iconWrapper_m7bt1.circular-progress-bar__size-24_m7bt1 {
158
+ } .circular-progress-bar__iconWrapper_y3sny.circular-progress-bar__size-24_y3sny {
159
159
  max-width: 16px;
160
160
  max-height: 16px;
161
- } .circular-progress-bar__iconWrapper_m7bt1.circular-progress-bar__icon-tertiary_m7bt1 {
161
+ } .circular-progress-bar__iconWrapper_y3sny.circular-progress-bar__icon-tertiary_y3sny {
162
162
  color: var(--color-light-neutral-500);
163
- } .circular-progress-bar__iconWrapper_m7bt1.circular-progress-bar__icon-positive_m7bt1 {
163
+ } .circular-progress-bar__iconWrapper_y3sny.circular-progress-bar__icon-positive_y3sny {
164
164
  color: var(--color-light-status-positive);
165
- } .circular-progress-bar__iconWrapper_m7bt1.circular-progress-bar__icon-negative_m7bt1 {
165
+ } .circular-progress-bar__iconWrapper_y3sny.circular-progress-bar__icon-negative_y3sny {
166
166
  color: var(--color-light-status-negative);
167
- } .circular-progress-bar__iconWrapper_m7bt1.circular-progress-bar__icon-primary-inverted_m7bt1 {
167
+ } .circular-progress-bar__iconWrapper_y3sny.circular-progress-bar__icon-primary-inverted_y3sny {
168
168
  color: var(--color-light-neutral-translucent-1300-inverted);
169
- } .circular-progress-bar__iconWrapper_m7bt1.circular-progress-bar__icon-primary_m7bt1 {
169
+ } .circular-progress-bar__iconWrapper_y3sny.circular-progress-bar__icon-primary_y3sny {
170
170
  color: var(--color-light-neutral-translucent-1300);
171
- } .circular-progress-bar__iconWrapper_m7bt1.circular-progress-bar__icon-secondary_m7bt1 {
171
+ } .circular-progress-bar__iconWrapper_y3sny.circular-progress-bar__icon-secondary_y3sny {
172
172
  color: var(--color-light-neutral-700);
173
- } .circular-progress-bar__icon_m7bt1 {
173
+ } .circular-progress-bar__icon_y3sny {
174
174
  width: 100%;
175
175
  height: 100%;
176
176
  }
package/moderncssm/Component.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import React, { useMemo } from 'react';
2
2
  import cn from 'classnames';
3
- import { Typography } from '@alfalab/core-components-typography/moderncssm';
3
+ import { Text, TitleMobile } from '@alfalab/core-components-typography/moderncssm';
4
4
  import { STROKE, SIZES, TYPOGRAPHY_COLOR, SIZE_TO_CLASSNAME_MAP, VIEW_TITLE, VIEW_TEXT } from './consts.js';
5
5
  import styles from './index.module.css';
6
6
 
@@ -37,13 +37,13 @@ const CircularProgressBar = ({ value, view = 'positive', size = 64, className, d
37
37
  const typographyContentColor = TYPOGRAPHY_COLOR.includes(contentColor)
38
38
  ? contentColor
39
39
  : undefined;
40
- const renderTitleString = () => SIZES[size] > 64 ? (React.createElement(Typography.TitleMobile, { className: cn(styles.typography, styles.title), color: isCompleteTextColor ? completeTextColor : typographyContentColor, tag: 'div', font: 'system', view: VIEW_TITLE[size], style: {
40
+ const renderTitleString = () => SIZES[size] > 64 ? (React.createElement(TitleMobile, { className: cn(styles.typography, styles.title), color: isCompleteTextColor ? completeTextColor : typographyContentColor, tag: 'div', font: 'system', view: VIEW_TITLE[size], style: {
41
41
  ...(!typographyContentColor && { color: contentColor }),
42
- } }, titleContent)) : (React.createElement(Typography.Text, { className: styles.title, color: isCompleteTextColor ? completeTextColor : typographyContentColor, tag: 'div', weight: 'bold', view: VIEW_TEXT[size], style: {
42
+ } }, titleContent)) : (React.createElement(Text, { className: styles.title, color: isCompleteTextColor ? completeTextColor : typographyContentColor, tag: 'div', weight: 'bold', view: VIEW_TEXT[size], style: {
43
43
  ...(!typographyContentColor && { color: contentColor }),
44
44
  } }, titleContent));
45
45
  const renderTitle = () => (typeof title === 'string' ? renderTitleString() : titleContent);
46
- const renderSubTitle = () => typeof subtitle === 'string' ? (React.createElement(Typography.Text, { tag: 'div', className: styles.subtitle, color: isCompleteTextColor ? completeTextColor : typographyContentColor, view: 'primary-small', style: {
46
+ const renderSubTitle = () => typeof subtitle === 'string' ? (React.createElement(Text, { tag: 'div', className: styles.subtitle, color: isCompleteTextColor ? completeTextColor : typographyContentColor, view: 'primary-small', style: {
47
47
  ...(!typographyContentColor && { color: contentColor }),
48
48
  } }, subtitleContent)) : (subtitleContent);
49
49
  const renderIcon = () => (React.createElement("span", { className: cn(styles.iconWrapper, styles[SIZE_TO_CLASSNAME_MAP[size]], styles.tertiary, styles[`icon-${contentColor}`], {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-circular-progress-bar",
3
- "version": "3.6.4",
3
+ "version": "3.6.5",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -10,9 +10,10 @@
10
10
  "access": "public",
11
11
  "directory": "dist"
12
12
  },
13
+ "sideEffects": false,
13
14
  "dependencies": {
14
- "@alfalab/core-components-typography": "^4.11.0",
15
- "classnames": "^2.3.1",
15
+ "@alfalab/core-components-typography": "^4.11.1",
16
+ "classnames": "^2.5.1",
16
17
  "tslib": "^2.4.0"
17
18
  },
18
19
  "peerDependencies": {
package/src/Component.tsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import React, { ElementType, ReactNode, useMemo } from 'react';
2
2
  import cn from 'classnames';
3
3
 
4
- import { Typography } from '@alfalab/core-components-typography';
4
+ import { Text, TitleMobile } from '@alfalab/core-components-typography';
5
5
 
6
6
  import {
7
7
  SIZE_TO_CLASSNAME_MAP,
@@ -197,7 +197,7 @@ export const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
197
197
 
198
198
  const renderTitleString = () =>
199
199
  SIZES[size] > 64 ? (
200
- <Typography.TitleMobile
200
+ <TitleMobile
201
201
  className={cn(styles.typography, styles.title)}
202
202
  color={isCompleteTextColor ? completeTextColor : typographyContentColor}
203
203
  tag='div'
@@ -208,9 +208,9 @@ export const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
208
208
  }}
209
209
  >
210
210
  {titleContent}
211
- </Typography.TitleMobile>
211
+ </TitleMobile>
212
212
  ) : (
213
- <Typography.Text
213
+ <Text
214
214
  className={styles.title}
215
215
  color={isCompleteTextColor ? completeTextColor : typographyContentColor}
216
216
  tag='div'
@@ -221,14 +221,14 @@ export const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
221
221
  }}
222
222
  >
223
223
  {titleContent}
224
- </Typography.Text>
224
+ </Text>
225
225
  );
226
226
 
227
227
  const renderTitle = () => (typeof title === 'string' ? renderTitleString() : titleContent);
228
228
 
229
229
  const renderSubTitle = () =>
230
230
  typeof subtitle === 'string' ? (
231
- <Typography.Text
231
+ <Text
232
232
  tag='div'
233
233
  className={styles.subtitle}
234
234
  color={isCompleteTextColor ? completeTextColor : typographyContentColor}
@@ -238,7 +238,7 @@ export const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
238
238
  }}
239
239
  >
240
240
  {subtitleContent}
241
- </Typography.Text>
241
+ </Text>
242
242
  ) : (
243
243
  subtitleContent
244
244
  );