pds-dev-kit-web 0.6.0 → 0.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/src/common/styles/colorSet/PaletteColor_Dark.json +2 -1
- package/dist/src/common/styles/colorSet/PaletteColor_light.json +2 -1
- package/dist/src/common/styles/colorSet/UIColor.json +2 -1
- package/dist/src/common/styles/colorSet/index.d.ts +130 -127
- package/dist/src/common/styles/colorSet/index.js +3 -3
- package/dist/src/common/styles/colorSet/ui-type.d.ts +1 -0
- package/dist/src/desktop/components/TextField/TextField.js +29 -16
- package/dist/src/hybrid/components/Divider/Divider.d.ts +2 -1
- package/dist/src/hybrid/components/Divider/Divider.js +9 -5
- package/dist/src/mobile/components/TextField/TextField.js +29 -16
- package/package.json +1 -1
|
@@ -123,5 +123,6 @@
|
|
|
123
123
|
"sys_cpnt_textlabel_sys_brand_primary_opacity50": "blue500/opacity50",
|
|
124
124
|
"sys_widget_green_01": "darkgreen500",
|
|
125
125
|
"sys_component_base_black_opacity30": "black/opacity30",
|
|
126
|
-
"sys_area_background": "darkgrey50/opacity65"
|
|
126
|
+
"sys_area_background": "darkgrey50/opacity65",
|
|
127
|
+
"sys_border_white_opacity30": "white/opacity30"
|
|
127
128
|
}
|
|
@@ -123,5 +123,6 @@
|
|
|
123
123
|
"sys_cpnt_textlabel_sys_brand_primary_opacity50": "blue500/opacity50",
|
|
124
124
|
"sys_widget_green_01": "green500",
|
|
125
125
|
"sys_component_base_black_opacity30": "black/opacity30",
|
|
126
|
-
"sys_area_background": "darkgrey50/opacity65"
|
|
126
|
+
"sys_area_background": "darkgrey50/opacity65",
|
|
127
|
+
"sys_border_white_opacity30": "white/opacity30"
|
|
127
128
|
}
|
|
@@ -446,5 +446,6 @@
|
|
|
446
446
|
"ui_cpnt_progressbar_02": "sys_widget_grey_04",
|
|
447
447
|
"ui_36": "sys_component_base_black_opacity80",
|
|
448
448
|
"ui_37": "sys_component_base_black_opacity30",
|
|
449
|
-
"ui_39": "sys_area_background"
|
|
449
|
+
"ui_39": "sys_area_background",
|
|
450
|
+
"ui_cpnt_divider_white_opacity30": "sys_border_white_opacity30"
|
|
450
451
|
}
|
|
@@ -180,133 +180,7 @@ declare const colorSet: {
|
|
|
180
180
|
sys_widget_green_01: string;
|
|
181
181
|
sys_component_base_black_opacity30: string;
|
|
182
182
|
sys_area_background: string;
|
|
183
|
-
|
|
184
|
-
readonly PaletteColor_light: {
|
|
185
|
-
sys_container_background_01: string;
|
|
186
|
-
sys_container_background_02: string;
|
|
187
|
-
sys_container_background_03: string;
|
|
188
|
-
sys_background_dimmed: string;
|
|
189
|
-
sys_text_grey_01: string;
|
|
190
|
-
sys_text_grey_02: string;
|
|
191
|
-
sys_text_grey_03: string;
|
|
192
|
-
sys_text_white: string;
|
|
193
|
-
sys_text_brand_primary: string;
|
|
194
|
-
sys_text_error_01: string;
|
|
195
|
-
sys_widget_grey_01: string;
|
|
196
|
-
sys_widget_grey_02: string;
|
|
197
|
-
sys_widget_grey_03: string;
|
|
198
|
-
sys_widget_primary_01: string;
|
|
199
|
-
sys_widget_error_01: string;
|
|
200
|
-
sys_widget_warning_01: string;
|
|
201
|
-
sys_widget_success_01: string;
|
|
202
|
-
sys_widget_white: string;
|
|
203
|
-
sys_border_area_01: string;
|
|
204
|
-
sys_border_line_01: string;
|
|
205
|
-
sys_border_line_02: string;
|
|
206
|
-
sys_border_line_03: string;
|
|
207
|
-
sys_border_line_04: string;
|
|
208
|
-
sys_border_line_05: string;
|
|
209
|
-
sys_component_base_01: string;
|
|
210
|
-
sys_component_base_02: string;
|
|
211
|
-
sys_component_base_03: string;
|
|
212
|
-
sys_component_base_red: string;
|
|
213
|
-
sys_component_base_white: string;
|
|
214
|
-
sys_component_base_white_opacity00: string;
|
|
215
|
-
sys_on_base_white_opacity00: string;
|
|
216
|
-
sys_on_base_white_opacity30: string;
|
|
217
|
-
sys_on_base_black_opacity20: string;
|
|
218
|
-
usr_brand_primary: string;
|
|
219
|
-
usr_brand_secondary: string;
|
|
220
|
-
usr_brand_secondary_variant: string;
|
|
221
|
-
usr_background: string;
|
|
222
|
-
usr_surface: string;
|
|
223
|
-
usr_border: string;
|
|
224
|
-
usr_on_brand_primary: string;
|
|
225
|
-
usr_on_brand_secondary: string;
|
|
226
|
-
usr_on_background: string;
|
|
227
|
-
usr_on_surface: string;
|
|
228
|
-
sys_widget_status_active_01: string;
|
|
229
|
-
sys_text_success_01: string;
|
|
230
|
-
sys_widget_grey_04: string;
|
|
231
|
-
sys_text_active: string;
|
|
232
|
-
sys_component_base_blue: string;
|
|
233
|
-
sys_on_base_black_opacity65: string;
|
|
234
|
-
sys_component_base_04: string;
|
|
235
|
-
sys_component_base_black: string;
|
|
236
|
-
sys_component_base_black_opacity00: string;
|
|
237
|
-
usr_text_brand_secondary_variant: string;
|
|
238
|
-
usr_text_brand_primary: string;
|
|
239
|
-
usr_text_brand_on_primary: string;
|
|
240
|
-
sys_text_brand_secondary_variant: string;
|
|
241
|
-
sys_component_base_navy: string;
|
|
242
|
-
sys_widget_lightgreen: string;
|
|
243
|
-
sys_border_line_06: string;
|
|
244
|
-
sys_background_dimmed_20: string;
|
|
245
|
-
sys_widget_pink: string;
|
|
246
|
-
sys_widget_primary_opacity20: string;
|
|
247
|
-
sys_widget_secondary_variant_01: string;
|
|
248
|
-
usr_component_base_brand_primary_opacity10: string;
|
|
249
|
-
sys_temp_grey_01: string;
|
|
250
|
-
sys_temp_grey_02: string;
|
|
251
|
-
sys_temp_grey_03: string;
|
|
252
|
-
sys_temp_grey_04: string;
|
|
253
|
-
sys_temp_grey_05: string;
|
|
254
|
-
sys_temp_white: string;
|
|
255
|
-
sys_temp_primary_01: string;
|
|
256
|
-
sys_temp_secondary_01: string;
|
|
257
|
-
sys_temp_red: string;
|
|
258
|
-
sys_temp_white_opacity_00: string;
|
|
259
|
-
sys_temp_dimmed: string;
|
|
260
|
-
sys_temp_black: string;
|
|
261
|
-
sys_temp_primary_02: string;
|
|
262
|
-
sys_temp_primary_03: string;
|
|
263
|
-
sys_temp_secondary_02: string;
|
|
264
|
-
sys_temp_lightgreen_01: string;
|
|
265
|
-
sys_text_grey_04: string;
|
|
266
|
-
sys_papp_post_social_background: string;
|
|
267
|
-
sys_papp_post_notice_background: string;
|
|
268
|
-
sys_papp_post_free_background: string;
|
|
269
|
-
sys_papp_vod_background: string;
|
|
270
|
-
sys_papp_vodplus_background: string;
|
|
271
|
-
sys_papp_live_background: string;
|
|
272
|
-
sys_selcontrols_base_off_disabled: string;
|
|
273
|
-
sys_selcontrols_base_on_disabled: string;
|
|
274
|
-
sys_component_base_blue_opacity10: string;
|
|
275
|
-
sys_component_base_05: string;
|
|
276
|
-
sys_background_dimmed_65: string;
|
|
277
|
-
sys_temp_grey_06: string;
|
|
278
|
-
sys_on_base_white_opacity10: string;
|
|
279
|
-
sys_on_base_black_opacity10: string;
|
|
280
|
-
sys_component_base_05_opacity00: string;
|
|
281
|
-
sys_papp_post_notice_link: string;
|
|
282
|
-
sys_component_base_navy_light: string;
|
|
283
|
-
sys_component_base_orange: string;
|
|
284
|
-
sys_component_base_grey: string;
|
|
285
|
-
sys_component_base_black_opacity80: string;
|
|
286
|
-
sys_text_darkgrey_02: string;
|
|
287
|
-
sys_border_line_darktheme_01: string;
|
|
288
|
-
sys_border_line_darktheme_02: string;
|
|
289
|
-
sys_component_base_darktheme_01: string;
|
|
290
|
-
sys_component_base_darktheme_02: string;
|
|
291
|
-
sys_component_base_darktheme_03: string;
|
|
292
|
-
sys_text_grey_darktheme_01: string;
|
|
293
|
-
sys_text_grey_darktheme_02: string;
|
|
294
|
-
sys_text_grey_darktheme_03: string;
|
|
295
|
-
sys_widget_grey_darktheme_01: string;
|
|
296
|
-
sys_widget_grey_darktheme_02: string;
|
|
297
|
-
sys_widget_grey_darktheme_03: string;
|
|
298
|
-
sys_component_base_green: string;
|
|
299
|
-
sys_text_error_darktheme_01: string;
|
|
300
|
-
sys_border_line_darktheme_03: string;
|
|
301
|
-
sys_border_line_darktheme_04: string;
|
|
302
|
-
usr_widget_brand_primary_darktheme_01: string;
|
|
303
|
-
usr_text_brand_primary_darktheme_01: string;
|
|
304
|
-
sys_component_base_black_opacity50: string;
|
|
305
|
-
sys_component_base_card: string;
|
|
306
|
-
sys_cpnt_textlabel_sys_brand_primary_opacity50: string;
|
|
307
|
-
sys_widget_green_01: string;
|
|
308
|
-
sys_component_base_black_opacity30: string;
|
|
309
|
-
sys_area_background: string;
|
|
183
|
+
sys_border_white_opacity30: string;
|
|
310
184
|
};
|
|
311
185
|
readonly UIColor: {
|
|
312
186
|
ui_cpnt_button_fill_base_primary: string;
|
|
@@ -757,6 +631,135 @@ declare const colorSet: {
|
|
|
757
631
|
ui_36: string;
|
|
758
632
|
ui_37: string;
|
|
759
633
|
ui_39: string;
|
|
634
|
+
ui_cpnt_divider_white_opacity30: string;
|
|
635
|
+
};
|
|
636
|
+
readonly PaletteColor_light: {
|
|
637
|
+
sys_container_background_01: string;
|
|
638
|
+
sys_container_background_02: string;
|
|
639
|
+
sys_container_background_03: string;
|
|
640
|
+
sys_background_dimmed: string;
|
|
641
|
+
sys_text_grey_01: string;
|
|
642
|
+
sys_text_grey_02: string;
|
|
643
|
+
sys_text_grey_03: string;
|
|
644
|
+
sys_text_white: string;
|
|
645
|
+
sys_text_brand_primary: string;
|
|
646
|
+
sys_text_error_01: string;
|
|
647
|
+
sys_widget_grey_01: string;
|
|
648
|
+
sys_widget_grey_02: string;
|
|
649
|
+
sys_widget_grey_03: string;
|
|
650
|
+
sys_widget_primary_01: string;
|
|
651
|
+
sys_widget_error_01: string;
|
|
652
|
+
sys_widget_warning_01: string;
|
|
653
|
+
sys_widget_success_01: string;
|
|
654
|
+
sys_widget_white: string;
|
|
655
|
+
sys_border_area_01: string;
|
|
656
|
+
sys_border_line_01: string;
|
|
657
|
+
sys_border_line_02: string;
|
|
658
|
+
sys_border_line_03: string;
|
|
659
|
+
sys_border_line_04: string;
|
|
660
|
+
sys_border_line_05: string;
|
|
661
|
+
sys_component_base_01: string;
|
|
662
|
+
sys_component_base_02: string;
|
|
663
|
+
sys_component_base_03: string;
|
|
664
|
+
sys_component_base_red: string;
|
|
665
|
+
sys_component_base_white: string;
|
|
666
|
+
sys_component_base_white_opacity00: string;
|
|
667
|
+
sys_on_base_white_opacity00: string;
|
|
668
|
+
sys_on_base_white_opacity30: string;
|
|
669
|
+
sys_on_base_black_opacity20: string;
|
|
670
|
+
usr_brand_primary: string;
|
|
671
|
+
usr_brand_secondary: string;
|
|
672
|
+
usr_brand_secondary_variant: string;
|
|
673
|
+
usr_background: string;
|
|
674
|
+
usr_surface: string;
|
|
675
|
+
usr_border: string;
|
|
676
|
+
usr_on_brand_primary: string;
|
|
677
|
+
usr_on_brand_secondary: string;
|
|
678
|
+
usr_on_background: string;
|
|
679
|
+
usr_on_surface: string;
|
|
680
|
+
sys_widget_status_active_01: string;
|
|
681
|
+
sys_text_success_01: string;
|
|
682
|
+
sys_widget_grey_04: string;
|
|
683
|
+
sys_text_active: string;
|
|
684
|
+
sys_component_base_blue: string;
|
|
685
|
+
sys_on_base_black_opacity65: string;
|
|
686
|
+
sys_component_base_04: string;
|
|
687
|
+
sys_component_base_black: string;
|
|
688
|
+
sys_component_base_black_opacity00: string;
|
|
689
|
+
usr_text_brand_secondary_variant: string;
|
|
690
|
+
usr_text_brand_primary: string;
|
|
691
|
+
usr_text_brand_on_primary: string;
|
|
692
|
+
sys_text_brand_secondary_variant: string;
|
|
693
|
+
sys_component_base_navy: string;
|
|
694
|
+
sys_widget_lightgreen: string;
|
|
695
|
+
sys_border_line_06: string;
|
|
696
|
+
sys_background_dimmed_20: string;
|
|
697
|
+
sys_widget_pink: string;
|
|
698
|
+
sys_widget_primary_opacity20: string;
|
|
699
|
+
sys_widget_secondary_variant_01: string;
|
|
700
|
+
usr_component_base_brand_primary_opacity10: string;
|
|
701
|
+
sys_temp_grey_01: string;
|
|
702
|
+
sys_temp_grey_02: string;
|
|
703
|
+
sys_temp_grey_03: string;
|
|
704
|
+
sys_temp_grey_04: string;
|
|
705
|
+
sys_temp_grey_05: string;
|
|
706
|
+
sys_temp_white: string;
|
|
707
|
+
sys_temp_primary_01: string;
|
|
708
|
+
sys_temp_secondary_01: string;
|
|
709
|
+
sys_temp_red: string;
|
|
710
|
+
sys_temp_white_opacity_00: string;
|
|
711
|
+
sys_temp_dimmed: string;
|
|
712
|
+
sys_temp_black: string;
|
|
713
|
+
sys_temp_primary_02: string;
|
|
714
|
+
sys_temp_primary_03: string;
|
|
715
|
+
sys_temp_secondary_02: string;
|
|
716
|
+
sys_temp_lightgreen_01: string;
|
|
717
|
+
sys_text_grey_04: string;
|
|
718
|
+
sys_papp_post_social_background: string;
|
|
719
|
+
sys_papp_post_notice_background: string;
|
|
720
|
+
sys_papp_post_free_background: string;
|
|
721
|
+
sys_papp_vod_background: string;
|
|
722
|
+
sys_papp_vodplus_background: string;
|
|
723
|
+
sys_papp_live_background: string;
|
|
724
|
+
sys_selcontrols_base_off_disabled: string;
|
|
725
|
+
sys_selcontrols_base_on_disabled: string;
|
|
726
|
+
sys_component_base_blue_opacity10: string;
|
|
727
|
+
sys_component_base_05: string;
|
|
728
|
+
sys_background_dimmed_65: string;
|
|
729
|
+
sys_temp_grey_06: string;
|
|
730
|
+
sys_on_base_white_opacity10: string;
|
|
731
|
+
sys_on_base_black_opacity10: string;
|
|
732
|
+
sys_component_base_05_opacity00: string;
|
|
733
|
+
sys_papp_post_notice_link: string;
|
|
734
|
+
sys_component_base_navy_light: string;
|
|
735
|
+
sys_component_base_orange: string;
|
|
736
|
+
sys_component_base_grey: string;
|
|
737
|
+
sys_component_base_black_opacity80: string;
|
|
738
|
+
sys_text_darkgrey_02: string;
|
|
739
|
+
sys_border_line_darktheme_01: string;
|
|
740
|
+
sys_border_line_darktheme_02: string;
|
|
741
|
+
sys_component_base_darktheme_01: string;
|
|
742
|
+
sys_component_base_darktheme_02: string;
|
|
743
|
+
sys_component_base_darktheme_03: string;
|
|
744
|
+
sys_text_grey_darktheme_01: string;
|
|
745
|
+
sys_text_grey_darktheme_02: string;
|
|
746
|
+
sys_text_grey_darktheme_03: string;
|
|
747
|
+
sys_widget_grey_darktheme_01: string;
|
|
748
|
+
sys_widget_grey_darktheme_02: string;
|
|
749
|
+
sys_widget_grey_darktheme_03: string;
|
|
750
|
+
sys_component_base_green: string;
|
|
751
|
+
sys_text_error_darktheme_01: string;
|
|
752
|
+
sys_border_line_darktheme_03: string;
|
|
753
|
+
sys_border_line_darktheme_04: string;
|
|
754
|
+
usr_widget_brand_primary_darktheme_01: string;
|
|
755
|
+
usr_text_brand_primary_darktheme_01: string;
|
|
756
|
+
sys_component_base_black_opacity50: string;
|
|
757
|
+
sys_component_base_card: string;
|
|
758
|
+
sys_cpnt_textlabel_sys_brand_primary_opacity50: string;
|
|
759
|
+
sys_widget_green_01: string;
|
|
760
|
+
sys_component_base_black_opacity30: string;
|
|
761
|
+
sys_area_background: string;
|
|
762
|
+
sys_border_white_opacity30: string;
|
|
760
763
|
};
|
|
761
764
|
};
|
|
762
765
|
export default colorSet;
|
|
@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
6
6
|
/* eslint-disable import/order */
|
|
7
7
|
var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
|
|
8
8
|
var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
|
|
9
|
-
var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
|
|
10
9
|
var UIColor_json_1 = __importDefault(require("./UIColor.json"));
|
|
10
|
+
var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
|
|
11
11
|
var colorSet = {
|
|
12
12
|
SemanticColor: SemanticColor_json_1.default,
|
|
13
13
|
PaletteColor_Dark: PaletteColor_Dark_json_1.default,
|
|
14
|
-
|
|
15
|
-
|
|
14
|
+
UIColor: UIColor_json_1.default,
|
|
15
|
+
PaletteColor_light: PaletteColor_light_json_1.default
|
|
16
16
|
};
|
|
17
17
|
exports.default = colorSet;
|
|
@@ -117,12 +117,25 @@ function TextField(_a) {
|
|
|
117
117
|
}[colorTheme], iconFillType: iBtn1IconFillType === 'fill' ? 'fill' : 'line', state: state === 'disabled' ? 'disabled' : 'normal', onClick: handleClickIBtn1 })))));
|
|
118
118
|
}
|
|
119
119
|
};
|
|
120
|
-
return (react_1.default.createElement(
|
|
120
|
+
return (react_1.default.createElement(S_TextFieldBox, { size: size, responsiveMode: responsiveMode },
|
|
121
121
|
react_1.default.createElement(S_TextFieldWrapper, { size: size, responsiveMode: responsiveMode, textLineType: textLineType, isFocused: isFocused, isError: isError, state: state, colorTheme: colorTheme }, S_TextField()),
|
|
122
122
|
((_b = errors[name]) === null || _b === void 0 ? void 0 : _b.message) && react_1.default.createElement(S_Error, null, t(errors[name].message))));
|
|
123
123
|
}
|
|
124
|
-
var
|
|
125
|
-
var
|
|
124
|
+
var S_TextFieldBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", ";\n ", ";\n"], ["\n ", ";\n ", ";\n"])), function (_a) {
|
|
125
|
+
var size = _a.size;
|
|
126
|
+
return size &&
|
|
127
|
+
{
|
|
128
|
+
small: 'width: 188px;',
|
|
129
|
+
medium: 'width: 188px;',
|
|
130
|
+
large: 'width: 432px;',
|
|
131
|
+
rlarge: 'width: 100%'
|
|
132
|
+
}[size];
|
|
133
|
+
}, function (_a) {
|
|
134
|
+
var responsiveMode = _a.responsiveMode;
|
|
135
|
+
return responsiveMode === 'use' && 'width: 100%';
|
|
136
|
+
});
|
|
137
|
+
var multi = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: auto;\n padding: 14px;\n"], ["\n height: auto;\n padding: 14px;\n"])));
|
|
138
|
+
var auto = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height: auto;\n padding-bottom: ", "px;\n padding-top: ", "px;\n"], ["\n height: auto;\n padding-bottom: ", "px;\n padding-top: ", "px;\n"])), function (_a) {
|
|
126
139
|
var theme = _a.theme;
|
|
127
140
|
return (46 -
|
|
128
141
|
Number(theme.desktopFontSize.form2.substring(0, 2)) * Number(theme.desktopLineHeight.form2)) /
|
|
@@ -133,21 +146,21 @@ var auto = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 =
|
|
|
133
146
|
Number(theme.desktopFontSize.form2.substring(0, 2)) * Number(theme.desktopLineHeight.form2)) /
|
|
134
147
|
2;
|
|
135
148
|
});
|
|
136
|
-
var small = (0, styled_components_1.css)(
|
|
149
|
+
var small = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n width: 188px;\n"], ["\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n width: 188px;\n"])), function (_a) {
|
|
137
150
|
var theme = _a.theme;
|
|
138
151
|
return theme.spacing.spacingC;
|
|
139
152
|
}, function (_a) {
|
|
140
153
|
var theme = _a.theme;
|
|
141
154
|
return theme.spacing.spacingC;
|
|
142
155
|
});
|
|
143
|
-
var medium = (0, styled_components_1.css)(
|
|
156
|
+
var medium = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n height: 40px;\n padding-left: ", ";\n padding-right: ", ";\n width: 188px;\n"], ["\n height: 40px;\n padding-left: ", ";\n padding-right: ", ";\n width: 188px;\n"])), function (_a) {
|
|
144
157
|
var theme = _a.theme;
|
|
145
158
|
return theme.spacing.spacingC;
|
|
146
159
|
}, function (_a) {
|
|
147
160
|
var theme = _a.theme;
|
|
148
161
|
return theme.spacing.spacingC;
|
|
149
162
|
});
|
|
150
|
-
var large = (0, styled_components_1.css)(
|
|
163
|
+
var large = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n height: 48px;\n padding-left: ", ";\n padding-right: ", ";\n width: ", ";\n ", "\n ", "\n"], ["\n height: 48px;\n padding-left: ", ";\n padding-right: ", ";\n width: ", ";\n ", "\n ", "\n"])), function (_a) {
|
|
151
164
|
var theme = _a.theme;
|
|
152
165
|
return theme.spacing.spacingD;
|
|
153
166
|
}, function (_a) {
|
|
@@ -163,7 +176,7 @@ var large = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 =
|
|
|
163
176
|
var textLineType = _a.textLineType;
|
|
164
177
|
return textLineType === 'auto' && auto;
|
|
165
178
|
});
|
|
166
|
-
var normal = (0, styled_components_1.css)(
|
|
179
|
+
var normal = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n background-color: ", ";\n border: solid 1px\n ", ";\n"], ["\n background-color: ", ";\n border: solid 1px\n ", ";\n"])), function (_a) {
|
|
167
180
|
var theme = _a.theme;
|
|
168
181
|
return theme.ui_cpnt_textfield_base_normal;
|
|
169
182
|
}, function (_a) {
|
|
@@ -174,21 +187,21 @@ var normal = (0, styled_components_1.css)(templateObject_6 || (templateObject_6
|
|
|
174
187
|
return theme.ui_cpnt_textfield_border_focus;
|
|
175
188
|
return theme.ui_cpnt_textfield_border_normal;
|
|
176
189
|
});
|
|
177
|
-
var read_only = (0, styled_components_1.css)(
|
|
190
|
+
var read_only = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n background-color: ", ";\n border: solid 1px ", ";\n"], ["\n background-color: ", ";\n border: solid 1px ", ";\n"])), function (_a) {
|
|
178
191
|
var theme = _a.theme;
|
|
179
192
|
return theme.ui_cpnt_textfield_base_disabled;
|
|
180
193
|
}, function (_a) {
|
|
181
194
|
var theme = _a.theme;
|
|
182
195
|
return theme.ui_cpnt_textfield_border_normal;
|
|
183
196
|
});
|
|
184
|
-
var disabled = (0, styled_components_1.css)(
|
|
197
|
+
var disabled = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n background-color: ", ";\n border: solid 1px ", ";\n"], ["\n background-color: ", ";\n border: solid 1px ", ";\n"])), function (_a) {
|
|
185
198
|
var theme = _a.theme;
|
|
186
199
|
return theme.ui_cpnt_textfield_base_disabled;
|
|
187
200
|
}, function (_a) {
|
|
188
201
|
var theme = _a.theme;
|
|
189
202
|
return theme.ui_cpnt_textfield_border_normal;
|
|
190
203
|
});
|
|
191
|
-
var dark_normal = (0, styled_components_1.css)(
|
|
204
|
+
var dark_normal = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n background-color: ", ";\n border: solid 1px\n ", ";\n"], ["\n background-color: ", ";\n border: solid 1px\n ", ";\n"])), function (_a) {
|
|
192
205
|
var theme = _a.theme;
|
|
193
206
|
return theme.ui_cpnt_textfield_base_normal;
|
|
194
207
|
}, function (_a) {
|
|
@@ -199,21 +212,21 @@ var dark_normal = (0, styled_components_1.css)(templateObject_9 || (templateObje
|
|
|
199
212
|
return theme.ui_cpnt_textfield_border_darktheme_focus;
|
|
200
213
|
return theme.ui_cpnt_textfield_border_darktheme_normal;
|
|
201
214
|
});
|
|
202
|
-
var dark_read_only = (0, styled_components_1.css)(
|
|
215
|
+
var dark_read_only = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n background-color: ", ";\n border: solid 1px ", ";\n"], ["\n background-color: ", ";\n border: solid 1px ", ";\n"])), function (_a) {
|
|
203
216
|
var theme = _a.theme;
|
|
204
217
|
return theme.ui_cpnt_textfield_base_darktheme_disabled;
|
|
205
218
|
}, function (_a) {
|
|
206
219
|
var theme = _a.theme;
|
|
207
220
|
return theme.ui_cpnt_textfield_border_darktheme_normal;
|
|
208
221
|
});
|
|
209
|
-
var dark_disabled = (0, styled_components_1.css)(
|
|
222
|
+
var dark_disabled = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n background-color: ", ";\n border: solid 1px ", ";\n"], ["\n background-color: ", ";\n border: solid 1px ", ";\n"])), function (_a) {
|
|
210
223
|
var theme = _a.theme;
|
|
211
224
|
return theme.ui_cpnt_textfield_base_darktheme_disabled;
|
|
212
225
|
}, function (_a) {
|
|
213
226
|
var theme = _a.theme;
|
|
214
227
|
return theme.ui_cpnt_textfield_border_darktheme_normal;
|
|
215
228
|
});
|
|
216
|
-
var S_TextFieldWrapper = styled_components_1.default.div(
|
|
229
|
+
var S_TextFieldWrapper = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n align-items: center;\n border-radius: 8px;\n box-sizing: border-box;\n display: flex;\n ", ";\n ", ";\n ", ";\n ", ";\n"], ["\n align-items: center;\n border-radius: 8px;\n box-sizing: border-box;\n display: flex;\n ", ";\n ", ";\n ", ";\n ", ";\n"])), function (_a) {
|
|
217
230
|
var size = _a.size;
|
|
218
231
|
return size &&
|
|
219
232
|
{
|
|
@@ -244,8 +257,8 @@ var S_TextFieldWrapper = styled_components_1.default.div(templateObject_12 || (t
|
|
|
244
257
|
var responsiveMode = _a.responsiveMode;
|
|
245
258
|
return responsiveMode === 'use' && 'width: 100%';
|
|
246
259
|
});
|
|
247
|
-
var S_IconBox = styled_components_1.default.div(
|
|
248
|
-
var S_Error = styled_components_1.default.div(
|
|
260
|
+
var S_IconBox = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
261
|
+
var S_Error = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n margin-top: ", ";\n text-align: left;\n"], ["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n margin-top: ", ";\n text-align: left;\n"])), function (_a) {
|
|
249
262
|
var theme = _a.theme, colorTheme = _a.colorTheme;
|
|
250
263
|
return colorTheme === 'none'
|
|
251
264
|
? theme.ui_cpnt_textfield_text_error
|
|
@@ -264,4 +277,4 @@ var S_Error = styled_components_1.default.div(templateObject_14 || (templateObje
|
|
|
264
277
|
return theme.spacing.spacingA;
|
|
265
278
|
});
|
|
266
279
|
exports.default = TextField;
|
|
267
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14;
|
|
280
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;
|
|
@@ -3,6 +3,7 @@ export declare type DividerProps = {
|
|
|
3
3
|
displayType?: 'line' | 'area';
|
|
4
4
|
direction?: 'vertical' | 'horizontal';
|
|
5
5
|
height?: number;
|
|
6
|
+
colorTheme?: 'none' | 'divider1';
|
|
6
7
|
};
|
|
7
|
-
declare function Divider({ displayType, direction, height }: DividerProps): JSX.Element;
|
|
8
|
+
declare function Divider({ displayType, direction, height, colorTheme }: DividerProps): JSX.Element;
|
|
8
9
|
export default Divider;
|
|
@@ -29,8 +29,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
29
29
|
var react_1 = __importDefault(require("react"));
|
|
30
30
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
31
31
|
function Divider(_a) {
|
|
32
|
-
var _b = _a.displayType, displayType = _b === void 0 ? 'line' : _b, _c = _a.direction, direction = _c === void 0 ? 'horizontal' : _c, height = _a.height;
|
|
33
|
-
return react_1.default.createElement(S_Divider, { displayType: displayType, "$height": height, "$direction": direction });
|
|
32
|
+
var _b = _a.displayType, displayType = _b === void 0 ? 'line' : _b, _c = _a.direction, direction = _c === void 0 ? 'horizontal' : _c, height = _a.height, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'none' : _d;
|
|
33
|
+
return (react_1.default.createElement(S_Divider, { displayType: displayType, "$height": height, "$direction": direction, colorTheme: colorTheme }));
|
|
34
34
|
}
|
|
35
35
|
var horizontal = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: ", ";\n width: 100%;\n"], ["\n height: ", ";\n width: 100%;\n"])), function (_a) {
|
|
36
36
|
var displayType = _a.displayType;
|
|
@@ -44,9 +44,13 @@ var vertical = (0, styled_components_1.css)(templateObject_2 || (templateObject_
|
|
|
44
44
|
var $height = _a.$height;
|
|
45
45
|
return ($height ? $height + "px" : '100%');
|
|
46
46
|
});
|
|
47
|
-
var S_Divider = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n
|
|
48
|
-
var theme = _a.theme;
|
|
49
|
-
return
|
|
47
|
+
var S_Divider = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", ";\n ", ";\n ", ";\n"], ["\n ", ";\n ", ";\n ", ";\n"])), function (_a) {
|
|
48
|
+
var colorTheme = _a.colorTheme, theme = _a.theme;
|
|
49
|
+
return colorTheme &&
|
|
50
|
+
{
|
|
51
|
+
none: "background-color: " + theme.ui_cpnt_divider + ";",
|
|
52
|
+
divider1: "background-color: " + theme.ui_cpnt_divider_white_opacity30 + ";"
|
|
53
|
+
}[colorTheme];
|
|
50
54
|
}, function (_a) {
|
|
51
55
|
var $direction = _a.$direction;
|
|
52
56
|
return $direction === 'horizontal' && horizontal;
|
|
@@ -117,12 +117,25 @@ function TextField(_a) {
|
|
|
117
117
|
}[colorTheme], iconFillType: iBtn1IconFillType === 'fill' ? 'fill' : 'line', state: state === 'disabled' ? 'disabled' : 'normal', onClick: handleClickIBtn1 })))));
|
|
118
118
|
}
|
|
119
119
|
};
|
|
120
|
-
return (react_1.default.createElement(
|
|
120
|
+
return (react_1.default.createElement(S_TextFieldBox, { size: size, responsiveMode: responsiveMode },
|
|
121
121
|
react_1.default.createElement(S_TextFieldWrapper, { size: size, responsiveMode: responsiveMode, textLineType: textLineType, isFocused: isFocused, isError: isError, state: state, colorTheme: colorTheme }, S_TextField()),
|
|
122
122
|
((_b = errors[name]) === null || _b === void 0 ? void 0 : _b.message) && react_1.default.createElement(S_Error, null, t(errors[name].message))));
|
|
123
123
|
}
|
|
124
|
-
var
|
|
125
|
-
var
|
|
124
|
+
var S_TextFieldBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", ";\n ", ";\n"], ["\n ", ";\n ", ";\n"])), function (_a) {
|
|
125
|
+
var size = _a.size;
|
|
126
|
+
return size &&
|
|
127
|
+
{
|
|
128
|
+
small: 'width: 188px;',
|
|
129
|
+
medium: 'width: 188px;',
|
|
130
|
+
large: 'width: 432px;',
|
|
131
|
+
rlarge: 'width: 100%'
|
|
132
|
+
}[size];
|
|
133
|
+
}, function (_a) {
|
|
134
|
+
var responsiveMode = _a.responsiveMode;
|
|
135
|
+
return responsiveMode === 'use' && 'width: 100%';
|
|
136
|
+
});
|
|
137
|
+
var multi = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: auto;\n padding: 14px;\n"], ["\n height: auto;\n padding: 14px;\n"])));
|
|
138
|
+
var auto = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height: auto;\n padding-bottom: ", "px;\n padding-top: ", "px;\n"], ["\n height: auto;\n padding-bottom: ", "px;\n padding-top: ", "px;\n"])), function (_a) {
|
|
126
139
|
var theme = _a.theme;
|
|
127
140
|
return (46 -
|
|
128
141
|
Number(theme.desktopFontSize.form2.substring(0, 2)) * Number(theme.desktopLineHeight.form2)) /
|
|
@@ -133,21 +146,21 @@ var auto = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 =
|
|
|
133
146
|
Number(theme.desktopFontSize.form2.substring(0, 2)) * Number(theme.desktopLineHeight.form2)) /
|
|
134
147
|
2;
|
|
135
148
|
});
|
|
136
|
-
var small = (0, styled_components_1.css)(
|
|
149
|
+
var small = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n width: 188px;\n"], ["\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n width: 188px;\n"])), function (_a) {
|
|
137
150
|
var theme = _a.theme;
|
|
138
151
|
return theme.spacing.spacingC;
|
|
139
152
|
}, function (_a) {
|
|
140
153
|
var theme = _a.theme;
|
|
141
154
|
return theme.spacing.spacingC;
|
|
142
155
|
});
|
|
143
|
-
var medium = (0, styled_components_1.css)(
|
|
156
|
+
var medium = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n height: 40px;\n padding-left: ", ";\n padding-right: ", ";\n width: 188px;\n"], ["\n height: 40px;\n padding-left: ", ";\n padding-right: ", ";\n width: 188px;\n"])), function (_a) {
|
|
144
157
|
var theme = _a.theme;
|
|
145
158
|
return theme.spacing.spacingC;
|
|
146
159
|
}, function (_a) {
|
|
147
160
|
var theme = _a.theme;
|
|
148
161
|
return theme.spacing.spacingC;
|
|
149
162
|
});
|
|
150
|
-
var large = (0, styled_components_1.css)(
|
|
163
|
+
var large = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n height: 48px;\n padding-left: ", ";\n padding-right: ", ";\n width: ", ";\n ", "\n ", "\n"], ["\n height: 48px;\n padding-left: ", ";\n padding-right: ", ";\n width: ", ";\n ", "\n ", "\n"])), function (_a) {
|
|
151
164
|
var theme = _a.theme;
|
|
152
165
|
return theme.spacing.spacingD;
|
|
153
166
|
}, function (_a) {
|
|
@@ -163,7 +176,7 @@ var large = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 =
|
|
|
163
176
|
var textLineType = _a.textLineType;
|
|
164
177
|
return textLineType === 'auto' && auto;
|
|
165
178
|
});
|
|
166
|
-
var normal = (0, styled_components_1.css)(
|
|
179
|
+
var normal = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n background-color: ", ";\n border: solid 1px\n ", ";\n"], ["\n background-color: ", ";\n border: solid 1px\n ", ";\n"])), function (_a) {
|
|
167
180
|
var theme = _a.theme;
|
|
168
181
|
return theme.ui_cpnt_textfield_base_normal;
|
|
169
182
|
}, function (_a) {
|
|
@@ -174,21 +187,21 @@ var normal = (0, styled_components_1.css)(templateObject_6 || (templateObject_6
|
|
|
174
187
|
return theme.ui_cpnt_textfield_border_focus;
|
|
175
188
|
return theme.ui_cpnt_textfield_border_normal;
|
|
176
189
|
});
|
|
177
|
-
var read_only = (0, styled_components_1.css)(
|
|
190
|
+
var read_only = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n background-color: ", ";\n border: solid 1px ", ";\n"], ["\n background-color: ", ";\n border: solid 1px ", ";\n"])), function (_a) {
|
|
178
191
|
var theme = _a.theme;
|
|
179
192
|
return theme.ui_cpnt_textfield_base_disabled;
|
|
180
193
|
}, function (_a) {
|
|
181
194
|
var theme = _a.theme;
|
|
182
195
|
return theme.ui_cpnt_textfield_border_normal;
|
|
183
196
|
});
|
|
184
|
-
var disabled = (0, styled_components_1.css)(
|
|
197
|
+
var disabled = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n background-color: ", ";\n border: solid 1px ", ";\n"], ["\n background-color: ", ";\n border: solid 1px ", ";\n"])), function (_a) {
|
|
185
198
|
var theme = _a.theme;
|
|
186
199
|
return theme.ui_cpnt_textfield_base_disabled;
|
|
187
200
|
}, function (_a) {
|
|
188
201
|
var theme = _a.theme;
|
|
189
202
|
return theme.ui_cpnt_textfield_border_normal;
|
|
190
203
|
});
|
|
191
|
-
var dark_normal = (0, styled_components_1.css)(
|
|
204
|
+
var dark_normal = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n background-color: ", ";\n border: solid 1px\n ", ";\n"], ["\n background-color: ", ";\n border: solid 1px\n ", ";\n"])), function (_a) {
|
|
192
205
|
var theme = _a.theme;
|
|
193
206
|
return theme.ui_cpnt_textfield_base_normal;
|
|
194
207
|
}, function (_a) {
|
|
@@ -199,21 +212,21 @@ var dark_normal = (0, styled_components_1.css)(templateObject_9 || (templateObje
|
|
|
199
212
|
return theme.ui_cpnt_textfield_border_darktheme_focus;
|
|
200
213
|
return theme.ui_cpnt_textfield_border_darktheme_normal;
|
|
201
214
|
});
|
|
202
|
-
var dark_read_only = (0, styled_components_1.css)(
|
|
215
|
+
var dark_read_only = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n background-color: ", ";\n border: solid 1px ", ";\n"], ["\n background-color: ", ";\n border: solid 1px ", ";\n"])), function (_a) {
|
|
203
216
|
var theme = _a.theme;
|
|
204
217
|
return theme.ui_cpnt_textfield_base_darktheme_disabled;
|
|
205
218
|
}, function (_a) {
|
|
206
219
|
var theme = _a.theme;
|
|
207
220
|
return theme.ui_cpnt_textfield_border_darktheme_normal;
|
|
208
221
|
});
|
|
209
|
-
var dark_disabled = (0, styled_components_1.css)(
|
|
222
|
+
var dark_disabled = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n background-color: ", ";\n border: solid 1px ", ";\n"], ["\n background-color: ", ";\n border: solid 1px ", ";\n"])), function (_a) {
|
|
210
223
|
var theme = _a.theme;
|
|
211
224
|
return theme.ui_cpnt_textfield_base_darktheme_disabled;
|
|
212
225
|
}, function (_a) {
|
|
213
226
|
var theme = _a.theme;
|
|
214
227
|
return theme.ui_cpnt_textfield_border_darktheme_normal;
|
|
215
228
|
});
|
|
216
|
-
var S_TextFieldWrapper = styled_components_1.default.div(
|
|
229
|
+
var S_TextFieldWrapper = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n align-items: center;\n border-radius: 8px;\n box-sizing: border-box;\n display: flex;\n ", ";\n ", ";\n ", ";\n ", ";\n"], ["\n align-items: center;\n border-radius: 8px;\n box-sizing: border-box;\n display: flex;\n ", ";\n ", ";\n ", ";\n ", ";\n"])), function (_a) {
|
|
217
230
|
var size = _a.size;
|
|
218
231
|
return size &&
|
|
219
232
|
{
|
|
@@ -244,8 +257,8 @@ var S_TextFieldWrapper = styled_components_1.default.div(templateObject_12 || (t
|
|
|
244
257
|
var responsiveMode = _a.responsiveMode;
|
|
245
258
|
return responsiveMode === 'use' && 'width: 100%';
|
|
246
259
|
});
|
|
247
|
-
var S_IconBox = styled_components_1.default.div(
|
|
248
|
-
var S_Error = styled_components_1.default.div(
|
|
260
|
+
var S_IconBox = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
261
|
+
var S_Error = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n margin-top: ", ";\n text-align: left;\n"], ["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n margin-top: ", ";\n text-align: left;\n"])), function (_a) {
|
|
249
262
|
var theme = _a.theme, colorTheme = _a.colorTheme;
|
|
250
263
|
return colorTheme === 'none'
|
|
251
264
|
? theme.ui_cpnt_textfield_text_error
|
|
@@ -264,4 +277,4 @@ var S_Error = styled_components_1.default.div(templateObject_14 || (templateObje
|
|
|
264
277
|
return theme.spacing.spacingA;
|
|
265
278
|
});
|
|
266
279
|
exports.default = TextField;
|
|
267
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14;
|
|
280
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;
|