pds-dev-kit-web 1.4.2 → 1.4.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 (32) hide show
  1. package/dist/src/common/styles/colorSet/UIColor.json +3 -3
  2. package/dist/src/common/styles/colorSet/index.d.ts +231 -231
  3. package/dist/src/common/styles/colorSet/index.js +5 -5
  4. package/dist/src/desktop/components/AdminList/BulkActionBar.js +3 -3
  5. package/dist/src/desktop/components/AdminList/HeaderRow.js +1 -1
  6. package/dist/src/desktop/components/AdminListItem/AdminListItem.js +18 -19
  7. package/dist/src/desktop/components/BasicListItem/BasicListItem.d.ts +4 -1
  8. package/dist/src/desktop/components/BasicListItem/BasicListItem.js +5 -5
  9. package/dist/src/desktop/components/ContextMenuItem/ContextMenuItem.js +1 -1
  10. package/dist/src/desktop/components/HorizontalFormGroup/HorizontalFormGroup.js +5 -3
  11. package/dist/src/desktop/components/StatusBlock/StatusBlock.js +3 -3
  12. package/dist/src/desktop/components/TextButton/TextButton.d.ts +1 -1
  13. package/dist/src/desktop/components/TextButton/TextButton.js +2 -1
  14. package/dist/src/desktop/components/UploadTextButton/UploadTextButton.d.ts +1 -1
  15. package/dist/src/desktop/components/UploadTextButton/UploadTextButton.js +2 -1
  16. package/dist/src/desktop/panels/DesktopHeadlessModal/DesktopHeadlessModal.d.ts +3 -3
  17. package/dist/src/desktop/panels/DesktopHeadlessModal/DesktopHeadlessModal.js +3 -3
  18. package/dist/src/hybrid/components/Switch/Switch.d.ts +2 -2
  19. package/dist/src/hybrid/components/Switch/Switch.js +3 -32
  20. package/dist/src/mobile/components/BasicListItem/BasicListItem.d.ts +4 -1
  21. package/dist/src/mobile/components/BasicListItem/BasicListItem.js +5 -5
  22. package/dist/src/mobile/components/ContextMenuItem/ContextMenuItem.js +1 -1
  23. package/dist/src/mobile/components/HorizontalFormGroup/HorizontalFormGroup.js +5 -3
  24. package/dist/src/mobile/components/MobileTabBar/MobileTabBar.d.ts +3 -1
  25. package/dist/src/mobile/components/MobileTabBar/MobileTabBar.js +20 -6
  26. package/dist/src/mobile/components/StatusBlock/StatusBlock.js +3 -3
  27. package/dist/src/mobile/components/TextButton/TextButton.d.ts +1 -1
  28. package/dist/src/mobile/components/TextButton/TextButton.js +2 -1
  29. package/dist/src/mobile/components/UploadTextButton/UploadTextButton.d.ts +1 -1
  30. package/dist/src/mobile/components/UploadTextButton/UploadTextButton.js +2 -1
  31. package/package.json +1 -1
  32. package/release-note.md +23 -13
package/dist/src/common/styles/colorSet/UIColor.json CHANGED
@@ -359,9 +359,9 @@
359
359
  "ui_papp_live_background": "sys_papp_live_background",
360
360
  "ui_community_pagination_base_area": "sys_component_base_02",
361
361
  "ui_cpnt_contextmenu_border": "sys_border_line_01",
362
- "ui_profile_image_border": "sys_border_line_07",
363
- "ui_cpnt_alertdialog_border": "sys_border_line_01",
364
- "ui_cpnt_modal_border": "sys_border_line_01",
362
+ "ui_profile_image_border": "sys_border_line_09",
363
+ "ui_cpnt_alertdialog_border": "sys_border_line_09",
364
+ "ui_cpnt_modal_border": "sys_border_line_09",
365
365
  "ui_cpnt_card_border": "sys_border_line_01",
366
366
  "ui_cpnt_overlay_border": "sys_border_line_01",
367
367
  "ui_cpnt_datatable_base_selected": "sys_component_base_blue_opacity10",
package/dist/src/common/styles/colorSet/index.d.ts CHANGED
@@ -1,235 +1,4 @@
1
1
  declare const colorSet: {
2
- readonly SemanticColor: {
3
- blue500: string;
4
- blue700: string;
5
- blue300: string;
6
- green700: string;
7
- green500: string;
8
- green300: string;
9
- red500: string;
10
- grey900: string;
11
- grey500: string;
12
- grey400: string;
13
- grey100: string;
14
- grey50: string;
15
- white: string;
16
- black: string;
17
- darkblue500: string;
18
- grey950: string;
19
- darkgrey900: string;
20
- darkgrey500: string;
21
- darkgrey400: string;
22
- darkgrey100: string;
23
- darkgrey50: string;
24
- darkred500: string;
25
- darkgreen700: string;
26
- orange500: string;
27
- darkorange500: string;
28
- opacity00: string;
29
- opacity20: string;
30
- opacity30: string;
31
- opacity65: string;
32
- darkgreen500: string;
33
- grey70: string;
34
- navy500: string;
35
- lightgreen500: string;
36
- pink500: string;
37
- darkgrey70: string;
38
- darknavy500: string;
39
- darkpink500: string;
40
- darklightgreen500: string;
41
- opacity10: string;
42
- grey600: string;
43
- darkgrey600: string;
44
- skyblue500: string;
45
- skyblue300: string;
46
- pink300: string;
47
- lightpink500: string;
48
- darkblue300: string;
49
- darkblue700: string;
50
- darkgreen300: string;
51
- darkskyblue500: string;
52
- navy100: string;
53
- darknavy100: string;
54
- opacity80: string;
55
- opacity50: string;
56
- grey30: string;
57
- opacity95: string;
58
- darkgrey30: string;
59
- opacity40: string;
60
- };
61
- readonly PaletteColor_light: {
62
- sys_container_background_01: string;
63
- sys_container_background_02: string;
64
- sys_container_background_03: string;
65
- sys_background_dimmed: string;
66
- sys_text_grey_01: string;
67
- sys_text_grey_02: string;
68
- sys_text_grey_03: string;
69
- sys_text_white: string;
70
- sys_text_brand_primary: string;
71
- sys_text_error_01: string;
72
- sys_widget_grey_01: string;
73
- sys_widget_grey_02: string;
74
- sys_widget_grey_03: string;
75
- sys_widget_primary_01: string;
76
- sys_widget_error_01: string;
77
- sys_widget_warning_01: string;
78
- sys_widget_success_01: string;
79
- sys_widget_white: string;
80
- sys_border_area_01: string;
81
- sys_border_line_01: string;
82
- sys_border_line_02: string;
83
- sys_border_line_03: string;
84
- sys_border_line_04: string;
85
- sys_border_line_05: string;
86
- sys_component_base_01: string;
87
- sys_component_base_02: string;
88
- sys_component_base_03: string;
89
- sys_component_base_red: string;
90
- sys_component_base_white: string;
91
- sys_component_base_white_opacity00: string;
92
- sys_on_base_white_opacity00: string;
93
- sys_on_base_white_opacity30: string;
94
- sys_on_base_black_opacity20: string;
95
- usr_brand_primary: string;
96
- usr_brand_secondary: string;
97
- usr_brand_secondary_variant: string;
98
- usr_background: string;
99
- usr_surface: string;
100
- usr_border: string;
101
- usr_on_brand_primary: string;
102
- usr_on_brand_secondary: string;
103
- usr_on_background: string;
104
- usr_on_surface: string;
105
- sys_widget_status_active_01: string;
106
- sys_text_success_01: string;
107
- sys_widget_grey_04: string;
108
- sys_text_active: string;
109
- sys_component_base_blue: string;
110
- sys_on_base_black_opacity65: string;
111
- sys_component_base_04: string;
112
- sys_component_base_black: string;
113
- sys_component_base_black_opacity00: string;
114
- usr_text_brand_secondary_variant: string;
115
- usr_text_brand_primary: string;
116
- usr_text_brand_on_primary: string;
117
- sys_text_brand_secondary_variant: string;
118
- sys_component_base_navy: string;
119
- sys_widget_lightgreen: string;
120
- sys_border_line_06: string;
121
- sys_background_dimmed_20: string;
122
- sys_widget_pink: string;
123
- sys_widget_primary_opacity20: string;
124
- sys_widget_secondary_variant_01: string;
125
- usr_component_base_brand_primary_opacity10: string;
126
- sys_temp_grey_01: string;
127
- sys_temp_grey_02: string;
128
- sys_temp_grey_03: string;
129
- sys_temp_grey_04: string;
130
- sys_temp_grey_05: string;
131
- sys_temp_white: string;
132
- sys_temp_primary_01: string;
133
- sys_temp_secondary_01: string;
134
- sys_temp_red: string;
135
- sys_temp_white_opacity_00: string;
136
- sys_temp_dimmed: string;
137
- sys_temp_black: string;
138
- sys_temp_primary_02: string;
139
- sys_temp_primary_03: string;
140
- sys_temp_secondary_02: string;
141
- sys_temp_lightgreen_01: string;
142
- sys_text_grey_04: string;
143
- sys_papp_post_social_background: string;
144
- sys_papp_post_notice_background: string;
145
- sys_papp_post_free_background: string;
146
- sys_papp_vod_background: string;
147
- sys_papp_vodplus_background: string;
148
- sys_papp_live_background: string;
149
- sys_selcontrols_base_off_disabled: string;
150
- sys_selcontrols_base_on_disabled: string;
151
- sys_component_base_blue_opacity10: string;
152
- sys_component_base_05: string;
153
- sys_background_dimmed_65: string;
154
- sys_temp_grey_06: string;
155
- sys_on_base_white_opacity10: string;
156
- sys_on_base_black_opacity10: string;
157
- sys_component_base_05_opacity00: string;
158
- sys_papp_post_notice_link: string;
159
- sys_component_base_navy_light: string;
160
- sys_component_base_orange: string;
161
- sys_component_base_grey: string;
162
- sys_component_base_black_opacity80: string;
163
- sys_text_darkgrey_02: string;
164
- sys_border_line_darktheme_01: string;
165
- sys_border_line_darktheme_02: string;
166
- sys_component_base_darktheme_01: string;
167
- sys_component_base_darktheme_02: string;
168
- sys_component_base_darktheme_03: string;
169
- sys_text_grey_darktheme_01: string;
170
- sys_text_grey_darktheme_02: string;
171
- sys_text_grey_darktheme_03: string;
172
- sys_widget_grey_darktheme_01: string;
173
- sys_widget_grey_darktheme_02: string;
174
- sys_widget_grey_darktheme_03: string;
175
- sys_component_base_green: string;
176
- sys_text_error_darktheme_01: string;
177
- sys_border_line_darktheme_03: string;
178
- sys_border_line_darktheme_04: string;
179
- usr_widget_brand_primary_darktheme_01: string;
180
- usr_text_brand_primary_darktheme_01: string;
181
- sys_component_base_black_opacity50: string;
182
- sys_component_base_card: string;
183
- sys_cpnt_textlabel_sys_brand_primary_opacity50: string;
184
- sys_widget_green_01: string;
185
- sys_component_base_black_opacity30: string;
186
- sys_area_background: string;
187
- sys_border_white_opacity30: string;
188
- sys_container_background_wt: string;
189
- sys_channeldesc_grey_03: string;
190
- sys_channeldesc_border_grey_03: string;
191
- sys_gradient_base_01: string;
192
- sys_gradient_base_01_opacity00: string;
193
- sys_channeldesc_background: string;
194
- sys_channeldesc_bottomsheet_base: string;
195
- sys_channeldesc_bottomsheet_border: string;
196
- sys_channeldesc_contents_base: string;
197
- sys_channeldesc_dimmed: string;
198
- sys_gradient_base_01_opacity50: string;
199
- sys_gradient_base_01_opacity75: string;
200
- sys_gradient_base_01_opacity40: string;
201
- sys_widget_black: string;
202
- usr_temp_primary_01: string;
203
- sys_cpnt_sheet_base_02_opacity50: string;
204
- usr_menu_primarymenu_main: string;
205
- usr_menu_primarymenu_sub: string;
206
- usr_menu_secondarymenu_main: string;
207
- usr_menu_secondarymenu_sub: string;
208
- usr_menu_hover: string;
209
- usr_menu_active: string;
210
- usr_menu_background: string;
211
- sys_cpnt_base_white_opacity50: string;
212
- sys_widget_dark_01: string;
213
- usr_menu_background_gradient_opacity00: string;
214
- sys_border_line_white: string;
215
- sys_component_base_white_opacity10: string;
216
- sys_cpnt_sheet_base_01: string;
217
- sys_component_base_white_opacity20: string;
218
- sys_border_line_07: string;
219
- sys_border_line_white_opacity50: string;
220
- sys_background_dimmed_02: string;
221
- sys_border_line_08: string;
222
- sys_component_base_06: string;
223
- sys_component_base_07: string;
224
- sys_border_line_09: string;
225
- sys_component_base_darktheme_04: string;
226
- sys_border_line_10: string;
227
- sys_component_base_darktheme_05: string;
228
- sys_border_line_darktheme_05: string;
229
- sys_component_base_darktheme_06: string;
230
- sys_border_line_darktheme_06: string;
231
- sys_border_line_darktheme_07: string;
232
- };
233
2
  readonly PaletteColor_Dark: {
234
3
  sys_container_background_01: string;
235
4
  sys_container_background_02: string;
@@ -917,5 +686,236 @@ declare const colorSet: {
917
686
  ui_hero_description_text: string;
918
687
  ui_cpnt_divider_area: string;
919
688
  };
689
+ readonly SemanticColor: {
690
+ blue500: string;
691
+ blue700: string;
692
+ blue300: string;
693
+ green700: string;
694
+ green500: string;
695
+ green300: string;
696
+ red500: string;
697
+ grey900: string;
698
+ grey500: string;
699
+ grey400: string;
700
+ grey100: string;
701
+ grey50: string;
702
+ white: string;
703
+ black: string;
704
+ darkblue500: string;
705
+ grey950: string;
706
+ darkgrey900: string;
707
+ darkgrey500: string;
708
+ darkgrey400: string;
709
+ darkgrey100: string;
710
+ darkgrey50: string;
711
+ darkred500: string;
712
+ darkgreen700: string;
713
+ orange500: string;
714
+ darkorange500: string;
715
+ opacity00: string;
716
+ opacity20: string;
717
+ opacity30: string;
718
+ opacity65: string;
719
+ darkgreen500: string;
720
+ grey70: string;
721
+ navy500: string;
722
+ lightgreen500: string;
723
+ pink500: string;
724
+ darkgrey70: string;
725
+ darknavy500: string;
726
+ darkpink500: string;
727
+ darklightgreen500: string;
728
+ opacity10: string;
729
+ grey600: string;
730
+ darkgrey600: string;
731
+ skyblue500: string;
732
+ skyblue300: string;
733
+ pink300: string;
734
+ lightpink500: string;
735
+ darkblue300: string;
736
+ darkblue700: string;
737
+ darkgreen300: string;
738
+ darkskyblue500: string;
739
+ navy100: string;
740
+ darknavy100: string;
741
+ opacity80: string;
742
+ opacity50: string;
743
+ grey30: string;
744
+ opacity95: string;
745
+ darkgrey30: string;
746
+ opacity40: string;
747
+ };
748
+ readonly PaletteColor_light: {
749
+ sys_container_background_01: string;
750
+ sys_container_background_02: string;
751
+ sys_container_background_03: string;
752
+ sys_background_dimmed: string;
753
+ sys_text_grey_01: string;
754
+ sys_text_grey_02: string;
755
+ sys_text_grey_03: string;
756
+ sys_text_white: string;
757
+ sys_text_brand_primary: string;
758
+ sys_text_error_01: string;
759
+ sys_widget_grey_01: string;
760
+ sys_widget_grey_02: string;
761
+ sys_widget_grey_03: string;
762
+ sys_widget_primary_01: string;
763
+ sys_widget_error_01: string;
764
+ sys_widget_warning_01: string;
765
+ sys_widget_success_01: string;
766
+ sys_widget_white: string;
767
+ sys_border_area_01: string;
768
+ sys_border_line_01: string;
769
+ sys_border_line_02: string;
770
+ sys_border_line_03: string;
771
+ sys_border_line_04: string;
772
+ sys_border_line_05: string;
773
+ sys_component_base_01: string;
774
+ sys_component_base_02: string;
775
+ sys_component_base_03: string;
776
+ sys_component_base_red: string;
777
+ sys_component_base_white: string;
778
+ sys_component_base_white_opacity00: string;
779
+ sys_on_base_white_opacity00: string;
780
+ sys_on_base_white_opacity30: string;
781
+ sys_on_base_black_opacity20: string;
782
+ usr_brand_primary: string;
783
+ usr_brand_secondary: string;
784
+ usr_brand_secondary_variant: string;
785
+ usr_background: string;
786
+ usr_surface: string;
787
+ usr_border: string;
788
+ usr_on_brand_primary: string;
789
+ usr_on_brand_secondary: string;
790
+ usr_on_background: string;
791
+ usr_on_surface: string;
792
+ sys_widget_status_active_01: string;
793
+ sys_text_success_01: string;
794
+ sys_widget_grey_04: string;
795
+ sys_text_active: string;
796
+ sys_component_base_blue: string;
797
+ sys_on_base_black_opacity65: string;
798
+ sys_component_base_04: string;
799
+ sys_component_base_black: string;
800
+ sys_component_base_black_opacity00: string;
801
+ usr_text_brand_secondary_variant: string;
802
+ usr_text_brand_primary: string;
803
+ usr_text_brand_on_primary: string;
804
+ sys_text_brand_secondary_variant: string;
805
+ sys_component_base_navy: string;
806
+ sys_widget_lightgreen: string;
807
+ sys_border_line_06: string;
808
+ sys_background_dimmed_20: string;
809
+ sys_widget_pink: string;
810
+ sys_widget_primary_opacity20: string;
811
+ sys_widget_secondary_variant_01: string;
812
+ usr_component_base_brand_primary_opacity10: string;
813
+ sys_temp_grey_01: string;
814
+ sys_temp_grey_02: string;
815
+ sys_temp_grey_03: string;
816
+ sys_temp_grey_04: string;
817
+ sys_temp_grey_05: string;
818
+ sys_temp_white: string;
819
+ sys_temp_primary_01: string;
820
+ sys_temp_secondary_01: string;
821
+ sys_temp_red: string;
822
+ sys_temp_white_opacity_00: string;
823
+ sys_temp_dimmed: string;
824
+ sys_temp_black: string;
825
+ sys_temp_primary_02: string;
826
+ sys_temp_primary_03: string;
827
+ sys_temp_secondary_02: string;
828
+ sys_temp_lightgreen_01: string;
829
+ sys_text_grey_04: string;
830
+ sys_papp_post_social_background: string;
831
+ sys_papp_post_notice_background: string;
832
+ sys_papp_post_free_background: string;
833
+ sys_papp_vod_background: string;
834
+ sys_papp_vodplus_background: string;
835
+ sys_papp_live_background: string;
836
+ sys_selcontrols_base_off_disabled: string;
837
+ sys_selcontrols_base_on_disabled: string;
838
+ sys_component_base_blue_opacity10: string;
839
+ sys_component_base_05: string;
840
+ sys_background_dimmed_65: string;
841
+ sys_temp_grey_06: string;
842
+ sys_on_base_white_opacity10: string;
843
+ sys_on_base_black_opacity10: string;
844
+ sys_component_base_05_opacity00: string;
845
+ sys_papp_post_notice_link: string;
846
+ sys_component_base_navy_light: string;
847
+ sys_component_base_orange: string;
848
+ sys_component_base_grey: string;
849
+ sys_component_base_black_opacity80: string;
850
+ sys_text_darkgrey_02: string;
851
+ sys_border_line_darktheme_01: string;
852
+ sys_border_line_darktheme_02: string;
853
+ sys_component_base_darktheme_01: string;
854
+ sys_component_base_darktheme_02: string;
855
+ sys_component_base_darktheme_03: string;
856
+ sys_text_grey_darktheme_01: string;
857
+ sys_text_grey_darktheme_02: string;
858
+ sys_text_grey_darktheme_03: string;
859
+ sys_widget_grey_darktheme_01: string;
860
+ sys_widget_grey_darktheme_02: string;
861
+ sys_widget_grey_darktheme_03: string;
862
+ sys_component_base_green: string;
863
+ sys_text_error_darktheme_01: string;
864
+ sys_border_line_darktheme_03: string;
865
+ sys_border_line_darktheme_04: string;
866
+ usr_widget_brand_primary_darktheme_01: string;
867
+ usr_text_brand_primary_darktheme_01: string;
868
+ sys_component_base_black_opacity50: string;
869
+ sys_component_base_card: string;
870
+ sys_cpnt_textlabel_sys_brand_primary_opacity50: string;
871
+ sys_widget_green_01: string;
872
+ sys_component_base_black_opacity30: string;
873
+ sys_area_background: string;
874
+ sys_border_white_opacity30: string;
875
+ sys_container_background_wt: string;
876
+ sys_channeldesc_grey_03: string;
877
+ sys_channeldesc_border_grey_03: string;
878
+ sys_gradient_base_01: string;
879
+ sys_gradient_base_01_opacity00: string;
880
+ sys_channeldesc_background: string;
881
+ sys_channeldesc_bottomsheet_base: string;
882
+ sys_channeldesc_bottomsheet_border: string;
883
+ sys_channeldesc_contents_base: string;
884
+ sys_channeldesc_dimmed: string;
885
+ sys_gradient_base_01_opacity50: string;
886
+ sys_gradient_base_01_opacity75: string;
887
+ sys_gradient_base_01_opacity40: string;
888
+ sys_widget_black: string;
889
+ usr_temp_primary_01: string;
890
+ sys_cpnt_sheet_base_02_opacity50: string;
891
+ usr_menu_primarymenu_main: string;
892
+ usr_menu_primarymenu_sub: string;
893
+ usr_menu_secondarymenu_main: string;
894
+ usr_menu_secondarymenu_sub: string;
895
+ usr_menu_hover: string;
896
+ usr_menu_active: string;
897
+ usr_menu_background: string;
898
+ sys_cpnt_base_white_opacity50: string;
899
+ sys_widget_dark_01: string;
900
+ usr_menu_background_gradient_opacity00: string;
901
+ sys_border_line_white: string;
902
+ sys_component_base_white_opacity10: string;
903
+ sys_cpnt_sheet_base_01: string;
904
+ sys_component_base_white_opacity20: string;
905
+ sys_border_line_07: string;
906
+ sys_border_line_white_opacity50: string;
907
+ sys_background_dimmed_02: string;
908
+ sys_border_line_08: string;
909
+ sys_component_base_06: string;
910
+ sys_component_base_07: string;
911
+ sys_border_line_09: string;
912
+ sys_component_base_darktheme_04: string;
913
+ sys_border_line_10: string;
914
+ sys_component_base_darktheme_05: string;
915
+ sys_border_line_darktheme_05: string;
916
+ sys_component_base_darktheme_06: string;
917
+ sys_border_line_darktheme_06: string;
918
+ sys_border_line_darktheme_07: string;
919
+ };
920
920
  };
921
921
  export default colorSet;
package/dist/src/common/styles/colorSet/index.js CHANGED
@@ -4,14 +4,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  /* eslint-disable import/order */
7
- var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
8
- var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
9
7
  var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
10
8
  var UIColor_json_1 = __importDefault(require("./UIColor.json"));
9
+ var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
10
+ var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
11
11
  var colorSet = {
12
- SemanticColor: SemanticColor_json_1.default,
13
- PaletteColor_light: PaletteColor_light_json_1.default,
14
12
  PaletteColor_Dark: PaletteColor_Dark_json_1.default,
15
- UIColor: UIColor_json_1.default
13
+ UIColor: UIColor_json_1.default,
14
+ SemanticColor: SemanticColor_json_1.default,
15
+ PaletteColor_light: PaletteColor_light_json_1.default
16
16
  };
17
17
  exports.default = colorSet;
package/dist/src/desktop/components/AdminList/BulkActionBar.js CHANGED
@@ -37,13 +37,13 @@ function BulkActionBar(_a) {
37
37
  react_1.default.createElement(Dropdown_1.Dropdown, { valueArray: dropdown3ValueArray, defaultValue: dropdown3DefaultText, onChange: onChangeDropdown3, size: "small", colorTheme: "dark" }))))),
38
38
  tBtnMode !== 'none' && (react_1.default.createElement(react_1.default.Fragment, null,
39
39
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),
40
- react_1.default.createElement(TextButton_1.TextButton, { size: "small", text: tBtn1Text, onClick: onClickTBtn1, colorTheme: "grey_01" }),
40
+ react_1.default.createElement(TextButton_1.TextButton, { size: "small", text: tBtn1Text, onClick: onClickTBtn1, colorTheme: "white" }),
41
41
  (tBtnMode === 'tbtn_amount2' || tBtnMode === 'tbtn_amount3') && (react_1.default.createElement(react_1.default.Fragment, null,
42
42
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),
43
- react_1.default.createElement(TextButton_1.TextButton, { size: "small", text: tBtn2Text, onClick: onClickTBtn2, colorTheme: "grey_01" }))),
43
+ react_1.default.createElement(TextButton_1.TextButton, { size: "small", text: tBtn2Text, onClick: onClickTBtn2, colorTheme: "white" }))),
44
44
  tBtnMode === 'tbtn_amount3' && (react_1.default.createElement(react_1.default.Fragment, null,
45
45
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),
46
- react_1.default.createElement(TextButton_1.TextButton, { size: "small", text: tBtn3Text, onClick: onClickTBtn3, colorTheme: "grey_01" }))))),
46
+ react_1.default.createElement(TextButton_1.TextButton, { size: "small", text: tBtn3Text, onClick: onClickTBtn3, colorTheme: "white" }))))),
47
47
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_e", spacingType: "width" })));
48
48
  }
49
49
  var S_BulkActionBar = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n box-sizing: border-box;\n display: flex;\n height: 56px;\n min-height: 56px;\n"], ["\n align-items: center;\n background-color: ", ";\n box-sizing: border-box;\n display: flex;\n height: 56px;\n min-height: 56px;\n"])), function (_a) {
package/dist/src/desktop/components/AdminList/HeaderRow.js CHANGED
@@ -72,7 +72,7 @@ var S_HeaderRow = styled_components_1.default.div(templateObject_4 || (templateO
72
72
  return theme.ui_cpnt_divider;
73
73
  });
74
74
  var S_CheckBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 40px;\n justify-content: center;\n width: 40px;\n"], ["\n align-items: center;\n display: flex;\n height: 40px;\n justify-content: center;\n width: 40px;\n"])));
75
- var S_FlexColumn = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n flex: 1;\n"], ["\n flex: 1;\n"])));
75
+ var S_FlexColumn = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n flex: 1;\n min-width: 80px;\n"], ["\n flex: 1;\n min-width: 80px;\n"])));
76
76
  var S_Column = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n padding-left: ", ";\n padding-right: ", ";\n\n ", ";\n"], ["\n padding-left: ", ";\n padding-right: ", ";\n\n ", ";\n"])), function (_a) {
77
77
  var theme = _a.theme;
78
78
  return theme.spacing.spacingC;
package/dist/src/desktop/components/AdminListItem/AdminListItem.js CHANGED
@@ -126,9 +126,9 @@ function AdminListItem(_a) {
126
126
  react_1.default.createElement(S_ImageColumn, { rowSize: rowSize },
127
127
  column2Type === 'image_text' && (rowSize === 'high' || rowSize === 'medium') && (react_1.default.createElement(S_ImageWrapper, { rowSize: rowSize },
128
128
  react_1.default.createElement(hybrid_1.ImageView, { src: imageSrc, shapeType: imageShapeType, width: imageShapeType === 'circular' ? 64 : 120, ratio: imageRatio, scaleType: "cover", radius: imageShapeType === 'round' ? imageRadius : undefined }))),
129
- (rowSize === 'low' || rowSize === 'medium') && (react_1.default.createElement(S_Column, null,
129
+ (rowSize === 'low' || rowSize === 'medium') && (react_1.default.createElement(S_RowTextWrapper, null,
130
130
  react_1.default.createElement(TextLabel_1.TextLabel, { text: column2Text, styleTheme: "body2Bold", colorTheme: "sysTextPrimary", ellipsisMode: "use", lineLimit: 2 }))),
131
- rowSize === 'high' && (react_1.default.createElement(S_TextWrapper, { ref: contentRef, hasScroll: hasScroll },
131
+ rowSize === 'high' && (react_1.default.createElement(S_HighTextWrapper, { ref: contentRef, hasScroll: hasScroll },
132
132
  react_1.default.createElement(TextLabel_1.TextLabel, { text: column2Text, styleTheme: "body2Bold", colorTheme: "sysTextPrimary" })))),
133
133
  column3Text && (react_1.default.createElement(S_Column, { columnSize: column3TextWidth },
134
134
  react_1.default.createElement(TextLabel_1.TextLabel, { text: column3Text, styleTheme: column3TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column3TextStyleTheme) }))),
@@ -188,28 +188,27 @@ var S_ImageWrapper = styled_components_1.default.div(templateObject_15 || (templ
188
188
  var rowSize = _a.rowSize;
189
189
  return rowSize === 'high' && (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 100%;\n "], ["\n align-items: center;\n display: flex;\n height: 100%;\n "])));
190
190
  });
191
- var S_ImageColumn = styled_components_1.default.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n flex: 1;\n overflow: auto;\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n\n ", "\n"], ["\n flex: 1;\n overflow: auto;\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n\n ", "\n"])), function (_a) {
192
- var theme = _a.theme, rowSize = _a.rowSize;
193
- return (rowSize === 'high' || rowSize === 'medium') && theme.spacing.spacingC;
194
- }, function (_a) {
195
- var theme = _a.theme;
196
- return theme.spacing.spacingC;
197
- }, function (_a) {
191
+ var S_ImageColumn = styled_components_1.default.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n flex: 1;\n min-width: 80px;\n overflow: auto;\n padding: ", ";\n\n ", "\n"], ["\n flex: 1;\n min-width: 80px;\n overflow: auto;\n padding: ", ";\n\n ", "\n"])), function (_a) {
198
192
  var theme = _a.theme;
199
193
  return theme.spacing.spacingC;
200
- }, function (_a) {
201
- var theme = _a.theme, rowSize = _a.rowSize;
202
- return (rowSize === 'high' || rowSize === 'medium') && theme.spacing.spacingC;
203
194
  }, function (_a) {
204
195
  var rowSize = _a.rowSize;
205
196
  return rowSize === 'high'
206
197
  ? (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n height: 200px;\n "], ["\n box-sizing: border-box;\n display: flex;\n height: 200px;\n "]))) : (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n "], ["\n align-items: center;\n display: flex;\n "])));
207
198
  });
208
- var S_TextWrapper = styled_components_1.default.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n height: 100%;\n overflow: auto;\n\n ", "\n"], ["\n height: 100%;\n overflow: auto;\n\n ", "\n"])), function (_a) {
199
+ var S_HighTextWrapper = styled_components_1.default.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n height: 100%;\n overflow: auto;\n\n ", "\n"], ["\n height: 100%;\n overflow: auto;\n\n ", "\n"])), function (_a) {
209
200
  var hasScroll = _a.hasScroll;
210
201
  return !hasScroll && (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n "], ["\n align-items: center;\n display: flex;\n "])));
211
202
  });
212
- var S_Column = styled_components_1.default.div(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n overflow: auto;\n padding: ", ";\n\n ", ";\n ", ";\n"], ["\n align-items: center;\n display: flex;\n overflow: auto;\n padding: ", ";\n\n ", ";\n ", ";\n"])), function (_a) {
203
+ var S_RowTextWrapper = styled_components_1.default.div(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n overflow: auto;\n\n ", ";\n ", ";\n"], ["\n align-items: center;\n display: flex;\n overflow: auto;\n\n ", ";\n ", ";\n"])), function (_a) {
204
+ var columnSize = _a.columnSize;
205
+ return columnSize &&
206
+ { small: smallColumnWidth, medium: mediumColumnWidth, large: largeColumnWidth }[columnSize];
207
+ }, function (_a) {
208
+ var quickActionBtnType = _a.quickActionBtnType;
209
+ return quickActionBtnType && { fix: fixedColumn, hover: hoverColumn }[quickActionBtnType];
210
+ });
211
+ var S_Column = styled_components_1.default.div(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n overflow: auto;\n padding: ", ";\n\n ", ";\n ", ";\n"], ["\n align-items: center;\n display: flex;\n overflow: auto;\n padding: ", ";\n\n ", ";\n ", ";\n"])), function (_a) {
213
212
  var theme = _a.theme;
214
213
  return theme.spacing.spacingC;
215
214
  }, function (_a) {
@@ -220,16 +219,16 @@ var S_Column = styled_components_1.default.div(templateObject_21 || (templateObj
220
219
  var quickActionBtnType = _a.quickActionBtnType;
221
220
  return quickActionBtnType && { fix: fixedColumn, hover: hoverColumn }[quickActionBtnType];
222
221
  });
223
- var S_SelectionColumn = styled_components_1.default.div(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n padding-bottom: ", ";\n padding-top: ", ";\n"], ["\n align-items: center;\n display: flex;\n padding-bottom: ", ";\n padding-top: ", ";\n"])), function (_a) {
222
+ var S_SelectionColumn = styled_components_1.default.div(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n padding-bottom: ", ";\n padding-top: ", ";\n"], ["\n align-items: center;\n display: flex;\n padding-bottom: ", ";\n padding-top: ", ";\n"])), function (_a) {
224
223
  var theme = _a.theme, rowSize = _a.rowSize;
225
224
  return (rowSize === 'high' || rowSize === 'medium') && theme.spacing.spacingC;
226
225
  }, function (_a) {
227
226
  var theme = _a.theme, rowSize = _a.rowSize;
228
227
  return (rowSize === 'high' || rowSize === 'medium') && theme.spacing.spacingC;
229
228
  });
230
- var hoverAdminListItem = (0, styled_components_1.css)(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n align-items: center;\n position: relative;\n"], ["\n align-items: center;\n position: relative;\n"])));
231
- var fixedAdminListItem = (0, styled_components_1.css)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n justify-content: space-between;\n"], ["\n justify-content: space-between;\n"])));
232
- var S_AdminListItem = styled_components_1.default.div(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n padding-left: ", ";\n\n ", ";\n ", "\n\n :hover {\n background-color: ", ";\n\n ", " {\n display: ", ";\n visibility: visible;\n }\n }\n\n &:last-child {\n margin-bottom: 88px;\n }\n"], ["\n background-color: ", ";\n display: flex;\n padding-left: ", ";\n\n ", ";\n ", "\n\n :hover {\n background-color: ", ";\n\n ", " {\n display: ", ";\n visibility: visible;\n }\n }\n\n &:last-child {\n margin-bottom: 88px;\n }\n"])), function (_a) {
229
+ var hoverAdminListItem = (0, styled_components_1.css)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n align-items: center;\n position: relative;\n"], ["\n align-items: center;\n position: relative;\n"])));
230
+ var fixedAdminListItem = (0, styled_components_1.css)(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n justify-content: space-between;\n"], ["\n justify-content: space-between;\n"])));
231
+ var S_AdminListItem = styled_components_1.default.div(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n padding-left: ", ";\n\n ", ";\n ", "\n\n :hover {\n background-color: ", ";\n\n ", " {\n display: ", ";\n visibility: visible;\n }\n }\n\n &:last-child {\n margin-bottom: 88px;\n }\n"], ["\n background-color: ", ";\n display: flex;\n padding-left: ", ";\n\n ", ";\n ", "\n\n :hover {\n background-color: ", ";\n\n ", " {\n display: ", ";\n visibility: visible;\n }\n }\n\n &:last-child {\n margin-bottom: 88px;\n }\n"])), function (_a) {
233
232
  var theme = _a.theme, isSelected = _a.isSelected;
234
233
  return isSelected ? theme.ui_cpnt_datatable_base_selected : theme.ui_cpnt_datatable_base_default;
235
234
  }, function (_a) {
@@ -250,4 +249,4 @@ var S_AdminListItem = styled_components_1.default.div(templateObject_25 || (temp
250
249
  return quickActionBtnType === 'hover' && 'flex';
251
250
  });
252
251
  exports.default = AdminListItem;
253
- 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, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25;
252
+ 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, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26;
package/dist/src/desktop/components/BasicListItem/BasicListItem.d.ts CHANGED
@@ -25,6 +25,9 @@ export declare type BasicListItemProps = {
25
25
  checkboxId?: string | number;
26
26
  radioId?: string;
27
27
  radioValue?: string;
28
+ switchName?: string;
29
+ switchState?: 'normal' | 'disabled';
30
+ switchStatus?: 'off' | 'on';
28
31
  onClick?: () => void;
29
32
  onClickIBtn1?: () => void;
30
33
  onClickIBtn2?: () => void;
@@ -40,5 +43,5 @@ export declare type StyleProps = {
40
43
  imageIconMode?: 'none' | 'image' | 'icon';
41
44
  displayType?: 'none' | 'text' | 'ibtn_text' | 'ibtn_amount1' | 'ibtn_amount2' | 'mbtn' | 'switch';
42
45
  };
43
- declare function BasicListItem({ selectionMode, titleText, titleTextColorTheme, descText, badgeMode, badgeStatus, imageIconMode, imageShapeType, imageSrc, iconName, iconFillType, displayType, captionText, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, mBtnFillType, mBtnText, dividerType, titleFontWeight, checkboxId, radioId, radioValue, onClick, onClickIBtn1, onClickIBtn2, onClickMBtn, onClickRadio, onClickSwitch }: BasicListItemProps): JSX.Element;
46
+ declare function BasicListItem({ selectionMode, titleText, titleTextColorTheme, descText, badgeMode, badgeStatus, imageIconMode, imageShapeType, imageSrc, iconName, iconFillType, displayType, captionText, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, mBtnFillType, mBtnText, dividerType, titleFontWeight, checkboxId, radioId, radioValue, switchName, switchState, switchStatus, onClick, onClickIBtn1, onClickIBtn2, onClickMBtn, onClickRadio, onClickSwitch }: BasicListItemProps): JSX.Element;
44
47
  export default BasicListItem;
package/dist/src/desktop/components/BasicListItem/BasicListItem.js CHANGED
@@ -17,7 +17,7 @@ var MainButton_1 = require("../MainButton");
17
17
  var Radio_1 = require("../Radio");
18
18
  var TextLabel_1 = require("../TextLabel");
19
19
  function BasicListItem(_a) {
20
- var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'none' : _b, titleText = _a.titleText, _c = _a.titleTextColorTheme, titleTextColorTheme = _c === void 0 ? 'none' : _c, descText = _a.descText, _d = _a.badgeMode, badgeMode = _d === void 0 ? 'none' : _d, _e = _a.badgeStatus, badgeStatus = _e === void 0 ? 'inactive' : _e, _f = _a.imageIconMode, imageIconMode = _f === void 0 ? 'none' : _f, _g = _a.imageShapeType, imageShapeType = _g === void 0 ? 'round' : _g, imageSrc = _a.imageSrc, iconName = _a.iconName, _h = _a.iconFillType, iconFillType = _h === void 0 ? 'line' : _h, _j = _a.displayType, displayType = _j === void 0 ? 'none' : _j, captionText = _a.captionText, iBtn1IconName = _a.iBtn1IconName, _k = _a.iBtn1IconFillType, iBtn1IconFillType = _k === void 0 ? 'line' : _k, iBtn2IconName = _a.iBtn2IconName, _l = _a.iBtn2IconFillType, iBtn2IconFillType = _l === void 0 ? 'line' : _l, _m = _a.mBtnFillType, mBtnFillType = _m === void 0 ? 'fill' : _m, mBtnText = _a.mBtnText, _o = _a.dividerType, dividerType = _o === void 0 ? 'none' : _o, _p = _a.titleFontWeight, titleFontWeight = _p === void 0 ? 'regular' : _p, checkboxId = _a.checkboxId, radioId = _a.radioId, radioValue = _a.radioValue, onClick = _a.onClick, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onClickMBtn = _a.onClickMBtn, onClickRadio = _a.onClickRadio, onClickSwitch = _a.onClickSwitch;
20
+ var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'none' : _b, titleText = _a.titleText, _c = _a.titleTextColorTheme, titleTextColorTheme = _c === void 0 ? 'none' : _c, descText = _a.descText, _d = _a.badgeMode, badgeMode = _d === void 0 ? 'none' : _d, _e = _a.badgeStatus, badgeStatus = _e === void 0 ? 'inactive' : _e, _f = _a.imageIconMode, imageIconMode = _f === void 0 ? 'none' : _f, _g = _a.imageShapeType, imageShapeType = _g === void 0 ? 'round' : _g, imageSrc = _a.imageSrc, iconName = _a.iconName, _h = _a.iconFillType, iconFillType = _h === void 0 ? 'line' : _h, _j = _a.displayType, displayType = _j === void 0 ? 'none' : _j, captionText = _a.captionText, iBtn1IconName = _a.iBtn1IconName, _k = _a.iBtn1IconFillType, iBtn1IconFillType = _k === void 0 ? 'line' : _k, iBtn2IconName = _a.iBtn2IconName, _l = _a.iBtn2IconFillType, iBtn2IconFillType = _l === void 0 ? 'line' : _l, _m = _a.mBtnFillType, mBtnFillType = _m === void 0 ? 'fill' : _m, mBtnText = _a.mBtnText, _o = _a.dividerType, dividerType = _o === void 0 ? 'none' : _o, _p = _a.titleFontWeight, titleFontWeight = _p === void 0 ? 'regular' : _p, checkboxId = _a.checkboxId, radioId = _a.radioId, radioValue = _a.radioValue, switchName = _a.switchName, _q = _a.switchState, switchState = _q === void 0 ? 'normal' : _q, _r = _a.switchStatus, switchStatus = _r === void 0 ? 'off' : _r, onClick = _a.onClick, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onClickMBtn = _a.onClickMBtn, onClickRadio = _a.onClickRadio, onClickSwitch = _a.onClickSwitch;
21
21
  var methods = (0, react_hook_form_1.useFormContext)();
22
22
  var isSelected = methods === null || methods === void 0 ? void 0 : methods.watch((checkboxId === null || checkboxId === void 0 ? void 0 : checkboxId.toString()) || '');
23
23
  var handleCheckBoxClick = function (e) {
@@ -107,10 +107,10 @@ function BasicListItem(_a) {
107
107
  captionText && (react_1.default.createElement(react_1.default.Fragment, null,
108
108
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a" }),
109
109
  react_1.default.createElement(S_TextWrapper, null,
110
- react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular", textAlign: "right", singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 })))))),
110
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, colorTheme: "sysTextTertiary", styleTheme: "caption1Regular", textAlign: "right", singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 })))))),
111
111
  react_1.default.createElement(S_RightBox, { displayType: displayType },
112
112
  (displayType === 'text' || displayType === 'ibtn_text') && (react_1.default.createElement(react_1.default.Fragment, null,
113
- react_1.default.createElement(TextLabel_1.TextLabel, { text: descText, colorTheme: "sysTextTertiary", styleTheme: "caption1Regular", singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 }),
113
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: descText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular", singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 }),
114
114
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))),
115
115
  (displayType === 'ibtn_amount1' ||
116
116
  displayType === 'ibtn_amount2' ||
@@ -120,8 +120,8 @@ function BasicListItem(_a) {
120
120
  displayType === 'mbtn' && (react_1.default.createElement(react_1.default.Fragment, null,
121
121
  react_1.default.createElement(MainButton_1.MainButton, { text: mBtnText, fillType: mBtnFillType, size: "small", onClick: handleMBtnClick }),
122
122
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))),
123
- displayType === 'switch' && (react_1.default.createElement(S_SwitchWrapper, null,
124
- react_1.default.createElement(hybrid_1.Switch, { name: "BLI_SWITCH", onClick: handleSwitchClick }),
123
+ displayType === 'switch' && switchName && (react_1.default.createElement(S_SwitchWrapper, null,
124
+ react_1.default.createElement(hybrid_1.Switch, { name: switchName, onClick: handleSwitchClick, state: switchState, status: switchStatus }),
125
125
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))))),
126
126
  react_1.default.createElement(S_DividerWrapper, null, dividerType === 'solid' && react_1.default.createElement(hybrid_1.Divider, { direction: "horizontal", displayType: "line" }))));
127
127
  }
package/dist/src/desktop/components/ContextMenuItem/ContextMenuItem.js CHANGED
@@ -47,7 +47,7 @@ function ContextMenuItem(_a) {
47
47
  textColorTheme = 'sysTextPrimary';
48
48
  }
49
49
  if (!isSelected && state === 'normal') {
50
- textColorTheme = 'sysTextSecondary';
50
+ textColorTheme = 'sysTextPrimary';
51
51
  }
52
52
  if (state === 'disabled') {
53
53
  textColorTheme = 'sysTextTertiary';
package/dist/src/desktop/components/HorizontalFormGroup/HorizontalFormGroup.js CHANGED
@@ -28,21 +28,23 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
28
28
  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
+ var hybrid_1 = require("../../../hybrid");
31
32
  var TextLabel_1 = require("../TextLabel");
32
33
  function HorizontalFormGroup(_a) {
33
34
  var labelText = _a.labelText, captionText = _a.captionText, inputForm = _a.inputForm, _b = _a.labelAlignType, labelAlignType = _b === void 0 ? 'center' : _b, labelTopSpacing = _a.labelTopSpacing;
34
35
  return (react_1.default.createElement(S_HorizontalFormGroupBox, { labelAlignType: labelAlignType },
35
36
  react_1.default.createElement(S_LabelWrapper, { labelAlignType: labelAlignType, labelTopSpacing: labelTopSpacing }, labelAlignType === 'center' ? (react_1.default.createElement(TextLabel_1.TextLabel, { text: labelText, styleTheme: "body2Bold", ellipsisMode: "use", lineLimit: 2 })) : (react_1.default.createElement(TextLabel_1.TextLabel, { text: labelText, styleTheme: "body2Bold" }))),
36
37
  react_1.default.createElement(S_InputFormWrapper, null, inputForm),
37
- react_1.default.createElement(S_CaptionWrapper, null,
38
- react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, styleTheme: "caption1Regular" }))));
38
+ captionText && (react_1.default.createElement(S_CaptionWrapper, null,
39
+ react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b" }),
40
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, styleTheme: "caption1Regular" })))));
39
41
  }
40
42
  var centerArea = "\n'label inputForm'\n'. caption'";
41
43
  var topArea = "\n'label inputForm'\n'label caption'";
42
44
  var small = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
43
45
  var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n margin-top: 10px;\n"], ["\n margin-top: 10px;\n"])));
44
46
  var large = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin-top: 14px;\n"], ["\n margin-top: 14px;\n"])));
45
- var S_HorizontalFormGroupBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: grid;\n gap: ", ";\n grid-template-columns: 112px max-content;\n grid-template-rows: auto 1fr;\n grid-template-areas: ", ";\n"], ["\n display: grid;\n gap: ", ";\n grid-template-columns: 112px max-content;\n grid-template-rows: auto 1fr;\n grid-template-areas: ", ";\n"])), function (_a) {
47
+ var S_HorizontalFormGroupBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: grid;\n grid-column-gap: ", ";\n grid-template-columns: 112px auto;\n grid-template-rows: auto 1fr;\n grid-template-areas: ", ";\n"], ["\n display: grid;\n grid-column-gap: ", ";\n grid-template-columns: 112px auto;\n grid-template-rows: auto 1fr;\n grid-template-areas: ", ";\n"])), function (_a) {
46
48
  var theme = _a.theme;
47
49
  return theme.spacing.spacingB;
48
50
  }, function (_a) {
package/dist/src/desktop/components/StatusBlock/StatusBlock.js CHANGED
@@ -39,9 +39,9 @@ function StatusBlock(_a) {
39
39
  return (react_1.default.createElement(S_StatusBlock, { size: size, state: state, "$width": width },
40
40
  react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textLabelStyleThemeObj[size], textAlign: "center", singleLineMode: "use", colorTheme: "sysTextWhite" })));
41
41
  }
42
- var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 8px;\n height: 48px;\n"], ["\n border-radius: 8px;\n height: 48px;\n"])));
43
- var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border-radius: 8px;\n height: 40px;\n"], ["\n border-radius: 8px;\n height: 40px;\n"])));
44
- var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border-radius: 8px;\n height: 32px;\n"], ["\n border-radius: 8px;\n height: 32px;\n"])));
42
+ var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 14px;\n height: 48px;\n"], ["\n border-radius: 14px;\n height: 48px;\n"])));
43
+ var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border-radius: 14px;\n height: 40px;\n"], ["\n border-radius: 14px;\n height: 40px;\n"])));
44
+ var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border-radius: 10px;\n height: 32px;\n"], ["\n border-radius: 10px;\n height: 32px;\n"])));
45
45
  var basic = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
46
46
  var theme = _a.theme;
47
47
  return theme.ui_cpnt_statusblock_basic;
package/dist/src/desktop/components/TextButton/TextButton.d.ts CHANGED
@@ -7,7 +7,7 @@ export declare type TextButtonProps = {
7
7
  fontWeight?: 'bold' | 'regular';
8
8
  type?: 'submit' | 'reset' | 'button';
9
9
  state?: 'normal' | 'disabled';
10
- colorTheme?: 'none' | 'red' | 'grey_01';
10
+ colorTheme?: 'none' | 'red' | 'grey_01' | 'white';
11
11
  onClick?: (...args: any) => any;
12
12
  };
13
13
  declare function TextButton({ text, size, responsiveMode, fontWeight, type, state, colorTheme, onClick, ...rest }: TextButtonProps): JSX.Element;
package/dist/src/desktop/components/TextButton/TextButton.js CHANGED
@@ -61,7 +61,8 @@ var textStyle = {
61
61
  var textColor = {
62
62
  none: 'usrTextBrandPrimary',
63
63
  red: 'sysTextError',
64
- grey_01: 'sysTextPrimary'
64
+ grey_01: 'sysTextPrimary',
65
+ white: 'sysTextWhite'
65
66
  };
66
67
  function TextButton(_a) {
67
68
  var text = _a.text, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, fontWeight = _a.fontWeight, _d = _a.type, type = _d === void 0 ? 'button' : _d, _e = _a.state, state = _e === void 0 ? 'normal' : _e, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'none' : _f, onClick = _a.onClick, rest = __rest(_a, ["text", "size", "responsiveMode", "fontWeight", "type", "state", "colorTheme", "onClick"]);
package/dist/src/desktop/components/UploadTextButton/UploadTextButton.d.ts CHANGED
@@ -6,7 +6,7 @@ declare type UploadTextButtonProps = {
6
6
  responsiveMode?: 'none' | 'use';
7
7
  fontWeight?: 'bold' | 'regular';
8
8
  state?: 'normal' | 'disabled';
9
- colorTheme?: 'none' | 'red' | 'grey_01';
9
+ colorTheme?: 'none' | 'red' | 'grey_01' | 'white';
10
10
  accept?: string;
11
11
  multipleMode?: 'none' | 'use';
12
12
  onClick?: (e: React.ChangeEvent<HTMLInputElement>) => void;
package/dist/src/desktop/components/UploadTextButton/UploadTextButton.js CHANGED
@@ -39,7 +39,8 @@ var textStyle = {
39
39
  var textColor = {
40
40
  none: 'usrTextBrandPrimary',
41
41
  red: 'sysTextError',
42
- grey_01: 'sysTextPrimary'
42
+ grey_01: 'sysTextPrimary',
43
+ white: 'sysTextWhite'
43
44
  };
44
45
  function UploadTextButton(_a) {
45
46
  var text = _a.text, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, fontWeight = _a.fontWeight, _d = _a.state, state = _d === void 0 ? 'normal' : _d, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'none' : _e, _f = _a.accept, accept = _f === void 0 ? '*' : _f, _g = _a.multipleMode, multipleMode = _g === void 0 ? 'none' : _g, onClick = _a.onClick;
package/dist/src/desktop/panels/DesktopHeadlessModal/DesktopHeadlessModal.d.ts CHANGED
@@ -1,10 +1,10 @@
1
1
  import React from 'react';
2
- declare type DesktopBasicModalProps = {
2
+ declare type DesktopHeadlessModalProps = {
3
3
  body: React.ReactNode;
4
4
  size?: 'large' | 'medium' | 'small' | 'rlarge';
5
5
  dimmedClickCloseMode?: 'use' | 'none';
6
6
  scrollVisibleType?: 'hidden' | 'moving' | 'visible';
7
7
  onClose?: () => void;
8
8
  };
9
- declare function DesktopBasicModal({ body, size, dimmedClickCloseMode, scrollVisibleType, onClose }: DesktopBasicModalProps): React.ReactPortal;
10
- export default DesktopBasicModal;
9
+ declare function DesktopHeadlessModal({ body, size, dimmedClickCloseMode, scrollVisibleType, onClose }: DesktopHeadlessModalProps): React.ReactPortal;
10
+ export default DesktopHeadlessModal;
package/dist/src/desktop/panels/DesktopHeadlessModal/DesktopHeadlessModal.js CHANGED
@@ -29,11 +29,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
29
29
  var react_1 = __importStar(require("react"));
30
30
  var react_dom_1 = __importDefault(require("react-dom"));
31
31
  var styled_components_1 = __importStar(require("styled-components"));
32
- function DesktopBasicModal(_a) {
32
+ function DesktopHeadlessModal(_a) {
33
33
  var body = _a.body, _b = _a.size, size = _b === void 0 ? 'rlarge' : _b, _c = _a.dimmedClickCloseMode, dimmedClickCloseMode = _c === void 0 ? 'none' : _c, _d = _a.scrollVisibleType, scrollVisibleType = _d === void 0 ? 'hidden' : _d, onClose = _a.onClose;
34
34
  var container = (0, react_1.useState)(function () {
35
35
  var modalRoot = document.createElement('div');
36
- modalRoot.setAttribute('id', 'DesktopBasicModal');
36
+ modalRoot.setAttribute('id', 'DesktopHeadlessModal');
37
37
  return modalRoot;
38
38
  })[0];
39
39
  var targetRef = (0, react_1.useRef)(null);
@@ -117,5 +117,5 @@ var S_Body = styled_components_1.default.div(templateObject_5 || (templateObject
117
117
  var scrollVisibleType = _a.scrollVisibleType;
118
118
  return scrollVisibleType === 'moving' && scrollVisible;
119
119
  });
120
- exports.default = DesktopBasicModal;
120
+ exports.default = DesktopHeadlessModal;
121
121
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
package/dist/src/hybrid/components/Switch/Switch.d.ts CHANGED
@@ -1,9 +1,9 @@
1
1
  /// <reference types="react" />
2
2
  declare type SwitchProps = {
3
+ name: string;
3
4
  status?: 'off' | 'on';
4
5
  state?: 'normal' | 'disabled';
5
- name: string;
6
6
  onClick?: (status: boolean) => void;
7
7
  };
8
- declare function Switch({ status, state, name, onClick }: SwitchProps): JSX.Element;
8
+ declare function Switch({ name, status, state, onClick }: SwitchProps): JSX.Element;
9
9
  export default Switch;
package/dist/src/hybrid/components/Switch/Switch.js CHANGED
@@ -3,48 +3,19 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
3
3
  if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
4
  return cooked;
5
5
  };
6
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
7
- if (k2 === undefined) k2 = k;
8
- Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
- Object.defineProperty(o, "default", { enumerable: true, value: v });
15
- }) : function(o, v) {
16
- o["default"] = v;
17
- });
18
- var __importStar = (this && this.__importStar) || function (mod) {
19
- if (mod && mod.__esModule) return mod;
20
- var result = {};
21
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
- __setModuleDefault(result, mod);
23
- return result;
24
- };
25
6
  var __importDefault = (this && this.__importDefault) || function (mod) {
26
7
  return (mod && mod.__esModule) ? mod : { "default": mod };
27
8
  };
28
9
  Object.defineProperty(exports, "__esModule", { value: true });
29
- var react_1 = __importStar(require("react"));
10
+ var react_1 = __importDefault(require("react"));
30
11
  var styled_components_1 = __importDefault(require("styled-components"));
31
12
  function Switch(_a) {
32
- var _b = _a.status, status = _b === void 0 ? 'off' : _b, _c = _a.state, state = _c === void 0 ? 'normal' : _c, name = _a.name, onClick = _a.onClick;
33
- var _d = (0, react_1.useState)(false), checked = _d[0], setChecked = _d[1];
13
+ var name = _a.name, _b = _a.status, status = _b === void 0 ? 'off' : _b, _c = _a.state, state = _c === void 0 ? 'normal' : _c, onClick = _a.onClick;
34
14
  var handleChange = function (e) {
35
- setChecked(e.target.checked);
36
15
  onClick && onClick(e.target.checked);
37
16
  };
38
- (0, react_1.useEffect)(function () {
39
- if (status === 'off') {
40
- setChecked(false);
41
- }
42
- if (status === 'on') {
43
- setChecked(true);
44
- }
45
- }, [status]);
46
17
  return (react_1.default.createElement(S_Switch, null,
47
- react_1.default.createElement(S_Input, { type: "checkbox", hidden: true, id: name, checked: checked, disabled: state === 'disabled', onChange: handleChange }),
18
+ react_1.default.createElement(S_Input, { type: "checkbox", hidden: true, id: name, checked: status === 'on', disabled: state === 'disabled', onChange: handleChange }),
48
19
  react_1.default.createElement(S_Label, { htmlFor: name, disabled: state === 'disabled' })));
49
20
  }
50
21
  var S_Switch = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n width: 56px;\n height: 32px;\n"], ["\n position: relative;\n width: 56px;\n height: 32px;\n"])));
package/dist/src/mobile/components/BasicListItem/BasicListItem.d.ts CHANGED
@@ -25,6 +25,9 @@ export declare type BasicListItemProps = {
25
25
  checkboxId?: number | string;
26
26
  radioId?: string;
27
27
  radioValue?: string;
28
+ switchName?: string;
29
+ switchState?: 'normal' | 'disabled';
30
+ switchStatus?: 'off' | 'on';
28
31
  onClick?: () => void;
29
32
  onClickIBtn1?: () => void;
30
33
  onClickIBtn2?: () => void;
@@ -40,5 +43,5 @@ export declare type StyleProps = {
40
43
  imageIconMode?: 'none' | 'image' | 'icon';
41
44
  displayType?: 'none' | 'text' | 'ibtn_text' | 'ibtn_amount1' | 'ibtn_amount2' | 'mbtn' | 'switch';
42
45
  };
43
- declare function BasicListItem({ selectionMode, titleText, titleTextColorTheme, descText, badgeMode, badgeStatus, imageIconMode, imageShapeType, imageSrc, iconName, iconFillType, displayType, captionText, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, mBtnFillType, mBtnText, dividerType, titleFontWeight, checkboxId, radioId, radioValue, onClick, onClickRadio, onClickSwitch, onClickIBtn1, onClickIBtn2, onClickMBtn }: BasicListItemProps): JSX.Element;
46
+ declare function BasicListItem({ selectionMode, titleText, titleTextColorTheme, descText, badgeMode, badgeStatus, imageIconMode, imageShapeType, imageSrc, iconName, iconFillType, displayType, captionText, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, mBtnFillType, mBtnText, dividerType, titleFontWeight, checkboxId, radioId, radioValue, switchName, switchState, switchStatus, onClick, onClickRadio, onClickSwitch, onClickIBtn1, onClickIBtn2, onClickMBtn }: BasicListItemProps): JSX.Element;
44
47
  export default BasicListItem;
package/dist/src/mobile/components/BasicListItem/BasicListItem.js CHANGED
@@ -17,7 +17,7 @@ var MainButton_1 = require("../MainButton");
17
17
  var Radio_1 = require("../Radio");
18
18
  var TextLabel_1 = require("../TextLabel");
19
19
  function BasicListItem(_a) {
20
- var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'none' : _b, titleText = _a.titleText, _c = _a.titleTextColorTheme, titleTextColorTheme = _c === void 0 ? 'none' : _c, descText = _a.descText, _d = _a.badgeMode, badgeMode = _d === void 0 ? 'none' : _d, _e = _a.badgeStatus, badgeStatus = _e === void 0 ? 'inactive' : _e, _f = _a.imageIconMode, imageIconMode = _f === void 0 ? 'none' : _f, _g = _a.imageShapeType, imageShapeType = _g === void 0 ? 'round' : _g, imageSrc = _a.imageSrc, iconName = _a.iconName, _h = _a.iconFillType, iconFillType = _h === void 0 ? 'line' : _h, _j = _a.displayType, displayType = _j === void 0 ? 'none' : _j, captionText = _a.captionText, iBtn1IconName = _a.iBtn1IconName, _k = _a.iBtn1IconFillType, iBtn1IconFillType = _k === void 0 ? 'line' : _k, iBtn2IconName = _a.iBtn2IconName, _l = _a.iBtn2IconFillType, iBtn2IconFillType = _l === void 0 ? 'line' : _l, _m = _a.mBtnFillType, mBtnFillType = _m === void 0 ? 'fill' : _m, mBtnText = _a.mBtnText, _o = _a.dividerType, dividerType = _o === void 0 ? 'none' : _o, _p = _a.titleFontWeight, titleFontWeight = _p === void 0 ? 'regular' : _p, checkboxId = _a.checkboxId, radioId = _a.radioId, radioValue = _a.radioValue, onClick = _a.onClick, onClickRadio = _a.onClickRadio, onClickSwitch = _a.onClickSwitch, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onClickMBtn = _a.onClickMBtn;
20
+ var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'none' : _b, titleText = _a.titleText, _c = _a.titleTextColorTheme, titleTextColorTheme = _c === void 0 ? 'none' : _c, descText = _a.descText, _d = _a.badgeMode, badgeMode = _d === void 0 ? 'none' : _d, _e = _a.badgeStatus, badgeStatus = _e === void 0 ? 'inactive' : _e, _f = _a.imageIconMode, imageIconMode = _f === void 0 ? 'none' : _f, _g = _a.imageShapeType, imageShapeType = _g === void 0 ? 'round' : _g, imageSrc = _a.imageSrc, iconName = _a.iconName, _h = _a.iconFillType, iconFillType = _h === void 0 ? 'line' : _h, _j = _a.displayType, displayType = _j === void 0 ? 'none' : _j, captionText = _a.captionText, iBtn1IconName = _a.iBtn1IconName, _k = _a.iBtn1IconFillType, iBtn1IconFillType = _k === void 0 ? 'line' : _k, iBtn2IconName = _a.iBtn2IconName, _l = _a.iBtn2IconFillType, iBtn2IconFillType = _l === void 0 ? 'line' : _l, _m = _a.mBtnFillType, mBtnFillType = _m === void 0 ? 'fill' : _m, mBtnText = _a.mBtnText, _o = _a.dividerType, dividerType = _o === void 0 ? 'none' : _o, _p = _a.titleFontWeight, titleFontWeight = _p === void 0 ? 'regular' : _p, checkboxId = _a.checkboxId, radioId = _a.radioId, radioValue = _a.radioValue, switchName = _a.switchName, _q = _a.switchState, switchState = _q === void 0 ? 'normal' : _q, _r = _a.switchStatus, switchStatus = _r === void 0 ? 'off' : _r, onClick = _a.onClick, onClickRadio = _a.onClickRadio, onClickSwitch = _a.onClickSwitch, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onClickMBtn = _a.onClickMBtn;
21
21
  var methods = (0, react_hook_form_1.useFormContext)();
22
22
  var isSelected = methods === null || methods === void 0 ? void 0 : methods.watch((checkboxId === null || checkboxId === void 0 ? void 0 : checkboxId.toString()) || '');
23
23
  var handleCheckBoxClick = function (e) {
@@ -107,10 +107,10 @@ function BasicListItem(_a) {
107
107
  captionText && (react_1.default.createElement(react_1.default.Fragment, null,
108
108
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a" }),
109
109
  react_1.default.createElement(S_TextWrapper, null,
110
- react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular", textAlign: "right", singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 })))))),
110
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, colorTheme: "sysTextTertiary", styleTheme: "caption1Regular", textAlign: "right", singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 })))))),
111
111
  react_1.default.createElement(S_RightBox, { displayType: displayType },
112
112
  (displayType === 'text' || displayType === 'ibtn_text') && (react_1.default.createElement(react_1.default.Fragment, null,
113
- react_1.default.createElement(TextLabel_1.TextLabel, { text: descText, colorTheme: "sysTextTertiary", styleTheme: "caption1Regular", singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 }),
113
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: descText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular", singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 }),
114
114
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))),
115
115
  (displayType === 'ibtn_amount1' ||
116
116
  displayType === 'ibtn_amount2' ||
@@ -120,8 +120,8 @@ function BasicListItem(_a) {
120
120
  displayType === 'mbtn' && (react_1.default.createElement(react_1.default.Fragment, null,
121
121
  react_1.default.createElement(MainButton_1.MainButton, { text: mBtnText, fillType: mBtnFillType, size: "small", onMouseDown: handleMBtnClick }),
122
122
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))),
123
- displayType === 'switch' && (react_1.default.createElement(S_SwitchWrapper, null,
124
- react_1.default.createElement(hybrid_1.Switch, { name: "BLI_SWITCH", onClick: handleSwitchClick }),
123
+ displayType === 'switch' && switchName && (react_1.default.createElement(S_SwitchWrapper, null,
124
+ react_1.default.createElement(hybrid_1.Switch, { name: switchName, onClick: handleSwitchClick, state: switchState, status: switchStatus }),
125
125
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))))),
126
126
  react_1.default.createElement(S_DividerWrapper, null, dividerType === 'solid' && react_1.default.createElement(hybrid_1.Divider, { direction: "horizontal", displayType: "line" }))));
127
127
  }
package/dist/src/mobile/components/ContextMenuItem/ContextMenuItem.js CHANGED
@@ -47,7 +47,7 @@ function ContextMenuItem(_a) {
47
47
  textColorTheme = 'sysTextPrimary';
48
48
  }
49
49
  if (!isSelected && state === 'normal') {
50
- textColorTheme = 'sysTextSecondary';
50
+ textColorTheme = 'sysTextPrimary';
51
51
  }
52
52
  if (state === 'disabled') {
53
53
  textColorTheme = 'sysTextTertiary';
package/dist/src/mobile/components/HorizontalFormGroup/HorizontalFormGroup.js CHANGED
@@ -28,21 +28,23 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
28
28
  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
+ var hybrid_1 = require("../../../hybrid");
31
32
  var TextLabel_1 = require("../TextLabel");
32
33
  function HorizontalFormGroup(_a) {
33
34
  var labelText = _a.labelText, captionText = _a.captionText, inputForm = _a.inputForm, _b = _a.labelAlignType, labelAlignType = _b === void 0 ? 'center' : _b, labelTopSpacing = _a.labelTopSpacing;
34
35
  return (react_1.default.createElement(S_HorizontalFormGroupBox, { labelAlignType: labelAlignType },
35
36
  react_1.default.createElement(S_LabelWrapper, { labelAlignType: labelAlignType, labelTopSpacing: labelTopSpacing }, labelAlignType === 'center' ? (react_1.default.createElement(TextLabel_1.TextLabel, { text: labelText, styleTheme: "body2Bold", ellipsisMode: "use", lineLimit: 2 })) : (react_1.default.createElement(TextLabel_1.TextLabel, { text: labelText, styleTheme: "body2Bold" }))),
36
37
  react_1.default.createElement(S_InputFormWrapper, null, inputForm),
37
- react_1.default.createElement(S_CaptionWrapper, null,
38
- react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, styleTheme: "caption1Regular" }))));
38
+ captionText && (react_1.default.createElement(S_CaptionWrapper, null,
39
+ react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b" }),
40
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, styleTheme: "caption1Regular" })))));
39
41
  }
40
42
  var centerArea = "\n'label inputForm'\n'. caption'";
41
43
  var topArea = "\n'label inputForm'\n'label caption'";
42
44
  var small = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
43
45
  var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n margin-top: 10px;\n"], ["\n margin-top: 10px;\n"])));
44
46
  var large = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin-top: 14px;\n"], ["\n margin-top: 14px;\n"])));
45
- var S_HorizontalFormGroupBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: grid;\n gap: ", ";\n grid-template-columns: 112px max-content;\n grid-template-rows: auto 1fr;\n grid-template-areas: ", ";\n"], ["\n display: grid;\n gap: ", ";\n grid-template-columns: 112px max-content;\n grid-template-rows: auto 1fr;\n grid-template-areas: ", ";\n"])), function (_a) {
47
+ var S_HorizontalFormGroupBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: grid;\n grid-column-gap: ", ";\n grid-template-columns: 112px auto;\n grid-template-rows: auto 1fr;\n grid-template-areas: ", ";\n"], ["\n display: grid;\n grid-column-gap: ", ";\n grid-template-columns: 112px auto;\n grid-template-rows: auto 1fr;\n grid-template-areas: ", ";\n"])), function (_a) {
46
48
  var theme = _a.theme;
47
49
  return theme.spacing.spacingB;
48
50
  }, function (_a) {
package/dist/src/mobile/components/MobileTabBar/MobileTabBar.d.ts CHANGED
@@ -1,13 +1,15 @@
1
1
  /// <reference types="react" />
2
2
  import { PDSTabItemOption, PDSTextType } from '../../../common/types';
3
+ declare type MobileTabBarColorThemeType = 'none' | 'grey_01';
3
4
  declare type TextObj = {
4
5
  path: string;
5
6
  title: PDSTextType;
6
7
  };
7
8
  declare type MobileTabBarProps = {
8
9
  itemArray?: PDSTabItemOption[];
10
+ colorTheme?: MobileTabBarColorThemeType;
9
11
  /** @deprecated v1.5 해당 필드 대신 itemArray를 사용하세요. */
10
12
  textArray?: TextObj[];
11
13
  };
12
- declare function MobileTabBar({ itemArray, textArray }: MobileTabBarProps): JSX.Element;
14
+ declare function MobileTabBar({ itemArray, colorTheme, textArray }: MobileTabBarProps): JSX.Element;
13
15
  export default MobileTabBar;
package/dist/src/mobile/components/MobileTabBar/MobileTabBar.js CHANGED
@@ -11,8 +11,20 @@ var react_1 = __importDefault(require("react"));
11
11
  var react_router_dom_1 = require("react-router-dom");
12
12
  var styled_components_1 = __importDefault(require("styled-components"));
13
13
  var TextLabel_1 = require("../TextLabel");
14
+ var mobileTabBarThemes = {
15
+ none: {
16
+ activeTextColor: 'usrTextBrandPrimary',
17
+ inActiveTextColor: 'sysTextTertiary',
18
+ activeIndicatorBorderColor: 'ui_cpnt_tabbar_border_active_indicator_primary'
19
+ },
20
+ grey_01: {
21
+ activeTextColor: 'sysTextPrimary',
22
+ inActiveTextColor: 'sysTextTertiary',
23
+ activeIndicatorBorderColor: 'ui_cpnt_tabbar_border_active_indicator'
24
+ }
25
+ };
14
26
  function MobileTabBar(_a) {
15
- var itemArray = _a.itemArray, textArray = _a.textArray;
27
+ var itemArray = _a.itemArray, _b = _a.colorTheme, colorTheme = _b === void 0 ? 'none' : _b, textArray = _a.textArray;
16
28
  var history = (0, react_router_dom_1.useHistory)();
17
29
  var pathname = (0, react_router_dom_1.useLocation)().pathname;
18
30
  if (itemArray) {
@@ -21,8 +33,10 @@ function MobileTabBar(_a) {
21
33
  item.onClick();
22
34
  }
23
35
  };
24
- return (react_1.default.createElement(S_TabBar, null, itemArray.map(function (item, index) { return (react_1.default.createElement(S_TabWrapper, { key: index, isActive: item.isActive, onClick: function () { return handleClickTabItem_1(item); } },
25
- react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: "body2Bold", colorTheme: item.isActive ? 'usrTextBrandPrimary' : 'sysTextTertiary', singleLineMode: "use" }))); })));
36
+ return (react_1.default.createElement(S_TabBar, null, itemArray.map(function (item, index) { return (react_1.default.createElement(S_TabWrapper, { key: index, colorTheme: colorTheme, isActive: item.isActive, onClick: function () { return handleClickTabItem_1(item); } },
37
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: "body2Bold", colorTheme: item.isActive
38
+ ? mobileTabBarThemes[colorTheme].activeTextColor
39
+ : mobileTabBarThemes[colorTheme].inActiveTextColor, singleLineMode: "use" }))); })));
26
40
  }
27
41
  if (textArray) {
28
42
  var handleClick_1 = function (value) {
@@ -30,7 +44,7 @@ function MobileTabBar(_a) {
30
44
  history.push(value.path);
31
45
  }
32
46
  };
33
- return (react_1.default.createElement(S_TabBar, null, textArray.map(function (value) { return (react_1.default.createElement(S_TabWrapper, { key: value.path, isActive: pathname === value.path, onClick: function () { return handleClick_1(value); } },
47
+ return (react_1.default.createElement(S_TabBar, null, textArray.map(function (value) { return (react_1.default.createElement(S_TabWrapper, { key: value.path, colorTheme: colorTheme, isActive: pathname === value.path, onClick: function () { return handleClick_1(value); } },
34
48
  react_1.default.createElement(TextLabel_1.TextLabel, { text: value.title, textAlign: "center", styleTheme: "body2Bold", colorTheme: pathname === value.path ? 'usrTextBrandPrimary' : 'sysTextTertiary', singleLineMode: "use" }))); })));
35
49
  }
36
50
  return react_1.default.createElement(react_1.default.Fragment, null);
@@ -42,8 +56,8 @@ var S_TabWrapper = styled_components_1.default.div(templateObject_1 || (template
42
56
  var theme = _a.theme;
43
57
  return theme.spacing.spacingD;
44
58
  }, function (_a) {
45
- var theme = _a.theme;
46
- return theme.ui_cpnt_tabbar_border_active_indicator_primary;
59
+ var colorTheme = _a.colorTheme, theme = _a.theme;
60
+ return theme[mobileTabBarThemes[colorTheme].activeIndicatorBorderColor];
47
61
  }, function (_a) {
48
62
  var isActive = _a.isActive;
49
63
  return !isActive && "display: none;";
package/dist/src/mobile/components/StatusBlock/StatusBlock.js CHANGED
@@ -39,9 +39,9 @@ function StatusBlock(_a) {
39
39
  return (react_1.default.createElement(S_StatusBlock, { size: size, state: state, "$width": width },
40
40
  react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textLabelStyleThemeObj[size], textAlign: "center", singleLineMode: "use", colorTheme: "sysTextWhite" })));
41
41
  }
42
- var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 8px;\n height: 48px;\n"], ["\n border-radius: 8px;\n height: 48px;\n"])));
43
- var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border-radius: 8px;\n height: 40px;\n"], ["\n border-radius: 8px;\n height: 40px;\n"])));
44
- var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border-radius: 8px;\n height: 32px;\n"], ["\n border-radius: 8px;\n height: 32px;\n"])));
42
+ var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 14px;\n height: 48px;\n"], ["\n border-radius: 14px;\n height: 48px;\n"])));
43
+ var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border-radius: 14px;\n height: 40px;\n"], ["\n border-radius: 14px;\n height: 40px;\n"])));
44
+ var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border-radius: 10px;\n height: 32px;\n"], ["\n border-radius: 10px;\n height: 32px;\n"])));
45
45
  var basic = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
46
46
  var theme = _a.theme;
47
47
  return theme.ui_cpnt_statusblock_basic;
package/dist/src/mobile/components/TextButton/TextButton.d.ts CHANGED
@@ -7,7 +7,7 @@ export declare type TextButtonProps = {
7
7
  fontWeight?: 'bold' | 'regular';
8
8
  type?: 'submit' | 'reset' | 'button';
9
9
  state?: 'normal' | 'disabled';
10
- colorTheme?: 'none' | 'red' | 'grey_01';
10
+ colorTheme?: 'none' | 'red' | 'grey_01' | 'white';
11
11
  onClick?: (...args: any) => any;
12
12
  };
13
13
  declare function TextButton({ text, size, responsiveMode, fontWeight, type, state, colorTheme, onClick, ...rest }: TextButtonProps): JSX.Element;
package/dist/src/mobile/components/TextButton/TextButton.js CHANGED
@@ -61,7 +61,8 @@ var textStyle = {
61
61
  var textColor = {
62
62
  none: 'usrTextBrandPrimary',
63
63
  red: 'sysTextError',
64
- grey_01: 'sysTextPrimary'
64
+ grey_01: 'sysTextPrimary',
65
+ white: 'sysTextWhite'
65
66
  };
66
67
  function TextButton(_a) {
67
68
  var text = _a.text, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, fontWeight = _a.fontWeight, _d = _a.type, type = _d === void 0 ? 'button' : _d, _e = _a.state, state = _e === void 0 ? 'normal' : _e, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'none' : _f, onClick = _a.onClick, rest = __rest(_a, ["text", "size", "responsiveMode", "fontWeight", "type", "state", "colorTheme", "onClick"]);
package/dist/src/mobile/components/UploadTextButton/UploadTextButton.d.ts CHANGED
@@ -6,7 +6,7 @@ declare type UploadTextButtonProps = {
6
6
  responsiveMode?: 'none' | 'use';
7
7
  fontWeight?: 'bold' | 'regular';
8
8
  state?: 'normal' | 'disabled';
9
- colorTheme?: 'none' | 'red' | 'grey_01';
9
+ colorTheme?: 'none' | 'red' | 'grey_01' | 'white';
10
10
  accept?: string;
11
11
  multipleMode?: 'none' | 'use';
12
12
  onClick?: (e: React.ChangeEvent<HTMLInputElement>) => void;
package/dist/src/mobile/components/UploadTextButton/UploadTextButton.js CHANGED
@@ -39,7 +39,8 @@ var textStyle = {
39
39
  var textColor = {
40
40
  none: 'usrTextBrandPrimary',
41
41
  red: 'sysTextError',
42
- grey_01: 'sysTextPrimary'
42
+ grey_01: 'sysTextPrimary',
43
+ white: 'sysTextWhite'
43
44
  };
44
45
  function UploadTextButton(_a) {
45
46
  var text = _a.text, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, fontWeight = _a.fontWeight, _d = _a.state, state = _d === void 0 ? 'normal' : _d, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'none' : _e, _f = _a.accept, accept = _f === void 0 ? '*' : _f, _g = _a.multipleMode, multipleMode = _g === void 0 ? 'none' : _g, onClick = _a.onClick;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web",
3
- "version": "1.4.2",
3
+ "version": "1.4.5",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,16 +1,26 @@
1
1
  # PDS-DEV-KIT-WEB Release Notes
2
- ## [v1.4.2]
3
-
4
- ### Component
5
- * 전체 컴포넌트
6
- * flex와 gap이 함께 쓰이는 부분 제거
7
- * 기획서에서 명시된 크기와 다르게 표현되고 있는 부분들에 box-sizing: border-box 부여
8
- * 모바일용 컴포넌트
9
- * hover와 cursor 관련 이벤트 제거
10
- * Checkbox (CheckboxOn icon)
11
- * Checkbox icon이 찌그러지지 않도록 수정
12
- * Divider
13
- * displayType이 ‘area’일 경우 ui_cpnt_divider_area부여
2
+ ## [v1.4.5]
14
3
 
15
4
  ### Color
16
- * 컬러 키 값 22.06.07 15시 04분 기준 싱크
5
+ * AdminList
6
+ * HeaderRow column2에 min-width:80px 부여
7
+ * AdminListItem
8
+ * column2에 min-width:80px 부여
9
+ * column2에 text만 있을때 좌측 간격 HeaderRow와 맞도록 수정
10
+ * BasicListItem
11
+ * descText의 색상 sysTextTertiary에서 sysTextSecondary로 변경
12
+ * captionText의 색상 sysTextSecondary에서 sysTextTertiary로 변경
13
+ * displayType이 switch일때 사용할 prop 추가
14
+ * switchName
15
+ * switchState
16
+ * switchStatus
17
+ * ContextMenuItem
18
+ * 기본 상태일때 텍스트 색상 sysTextSecondary에서 sysTextPrimary로 변경
19
+ * MobileTabBar
20
+ * colorTheme prop 추가
21
+ * StatusBlock
22
+ * border-radius 변경
23
+ * large, medium : 14px
24
+ * small : 10px
25
+ * Switch
26
+ * name prop deprecated 처리 철회