pds-dev-kit-web 1.9.20 → 1.9.22

package/dist/src/common/styles/colorSet/PaletteColor_Dark.json

@@ -277,5 +277,6 @@
     "sys_storyboard_group_base_green01": "green10",
     "sys_storyboard_card_base_blue01": "blue30",
     "sys_storyboard_card_base_red01": "red30",
-    "sys_storyboard_card_base_green01": "green50"
+    "sys_storyboard_card_base_green01": "green50",
+    "sys_brand_secondary_variant": "darkgreen700"
 }

package/dist/src/common/styles/colorSet/PaletteColor_light.json

@@ -277,5 +277,6 @@
     "sys_storyboard_group_base_green01": "green10",
     "sys_storyboard_card_base_blue01": "blue30",
     "sys_storyboard_card_base_red01": "red30",
-    "sys_storyboard_card_base_green01": "green50"
+    "sys_storyboard_card_base_green01": "green50",
+    "sys_brand_secondary_variant": "green700"
 }

package/dist/src/common/styles/colorSet/UIColor.json

@@ -741,5 +741,6 @@
     "ui_92": "sys_storyboard_group_base_green01",
     "ui_93": "sys_storyboard_card_base_blue01",
     "ui_94": "sys_storyboard_card_base_red01",
-    "ui_95": "sys_storyboard_card_base_green01"
+    "ui_95": "sys_storyboard_card_base_green01",
+    "ui_cpnt_icon_sys_brandsecondary_variant": "sys_brand_secondary_variant"
 }

package/dist/src/common/styles/colorSet/index.d.ts

@@ -102,288 +102,7 @@ declare const colorSet: {
         blue30: string;
         red30: string;
     };
-    readonly PaletteColor_light: {
-        sys_container_background_01: string;
-        sys_container_background_02: string;
-        sys_container_background_03: string;
-        sys_background_dimmed: string;
-        sys_text_grey_01: string;
-        sys_text_grey_02: string;
-        sys_text_grey_03: string;
-        sys_text_white: string;
-        sys_text_brand_primary: string;
-        sys_text_error_01: string;
-        sys_widget_grey_01: string;
-        sys_widget_grey_02: string;
-        sys_widget_grey_03: string;
-        sys_widget_primary_01: string;
-        sys_widget_error_01: string;
-        sys_widget_warning_01: string;
-        sys_widget_success_01: string;
-        sys_widget_white: string;
-        sys_border_area_01: string;
-        sys_border_line_01: string;
-        sys_border_line_02: string;
-        sys_border_line_03: string;
-        sys_border_line_04: string;
-        sys_border_line_05: string;
-        sys_component_base_01: string;
-        sys_component_base_02: string;
-        sys_component_base_03: string;
-        sys_component_base_red: string;
-        sys_component_base_white: string;
-        sys_component_base_white_opacity00: string;
-        sys_on_base_white_opacity00: string;
-        sys_on_base_white_opacity30: string;
-        sys_on_base_black_opacity20: string;
-        usr_brand_primary: string;
-        usr_brand_secondary: string;
-        usr_brand_secondary_variant: string;
-        usr_background: string;
-        usr_surface: string;
-        usr_border: string;
-        usr_on_brand_primary: string;
-        usr_on_brand_secondary: string;
-        usr_on_background: string;
-        usr_on_surface: string;
-        sys_widget_status_active_01: string;
-        sys_text_success_01: string;
-        sys_widget_grey_04: string;
-        sys_text_active: string;
-        sys_component_base_blue: string;
-        sys_on_base_black_opacity65: string;
-        sys_component_base_04: string;
-        sys_component_base_black: string;
-        sys_component_base_black_opacity00: string;
-        usr_text_brand_secondary_variant: string;
-        usr_text_brand_primary: string;
-        usr_text_brand_on_primary: string;
-        sys_text_brand_secondary_variant: string;
-        sys_component_base_navy: string;
-        sys_widget_lightgreen: string;
-        sys_border_line_06: string;
-        sys_background_dimmed_20: string;
-        sys_widget_pink: string;
-        sys_widget_primary_opacity20: string;
-        sys_widget_secondary_variant_01: string;
-        usr_component_base_brand_primary_opacity10: string;
-        sys_temp_grey_01: string;
-        sys_temp_grey_02: string;
-        sys_temp_grey_03: string;
-        sys_temp_grey_04: string;
-        sys_temp_grey_05: string;
-        sys_temp_white: string;
-        sys_temp_primary_01: string;
-        sys_temp_secondary_01: string;
-        sys_temp_red: string;
-        sys_temp_white_opacity_00: string;
-        sys_temp_dimmed: string;
-        sys_temp_black: string;
-        sys_temp_primary_02: string;
-        sys_temp_primary_03: string;
-        sys_temp_secondary_02: string;
-        sys_temp_lightgreen_01: string;
-        sys_text_grey_04: string;
-        sys_papp_post_social_background: string;
-        sys_papp_post_notice_background: string;
-        sys_papp_post_free_background: string;
-        sys_papp_vod_background: string;
-        sys_papp_vodplus_background: string;
-        sys_papp_live_background: string;
-        sys_selcontrols_base_off_disabled: string;
-        sys_selcontrols_base_on_disabled: string;
-        sys_component_base_blue_opacity10: string;
-        sys_component_base_05: string;
-        sys_background_dimmed_65: string;
-        sys_temp_grey_06: string;
-        sys_on_base_white_opacity10: string;
-        sys_on_base_black_opacity10: string;
-        sys_component_base_05_opacity00: string;
-        sys_papp_post_notice_link: string;
-        sys_component_base_navy_light: string;
-        sys_component_base_orange: string;
-        sys_component_base_grey: string;
-        sys_component_base_black_opacity80: string;
-        sys_text_darkgrey_02: string;
-        sys_border_line_darktheme_01: string;
-        sys_border_line_darktheme_02: string;
-        sys_component_base_darktheme_01: string;
-        sys_component_base_darktheme_02: string;
-        sys_component_base_darktheme_03: string;
-        sys_text_grey_darktheme_01: string;
-        sys_text_grey_darktheme_02: string;
-        sys_text_grey_darktheme_03: string;
-        sys_widget_grey_darktheme_01: string;
-        sys_widget_grey_darktheme_02: string;
-        sys_widget_grey_darktheme_03: string;
-        sys_component_base_green: string;
-        sys_text_error_darktheme_01: string;
-        sys_border_line_darktheme_03: string;
-        sys_border_line_darktheme_04: string;
-        usr_widget_brand_primary_darktheme_01: string;
-        usr_text_brand_primary_darktheme_01: string;
-        sys_component_base_black_opacity50: string;
-        sys_component_base_card: string;
-        sys_cpnt_textlabel_sys_brand_primary_opacity50: string;
-        sys_widget_green_01: string;
-        sys_component_base_black_opacity30: string;
-        sys_area_background: string;
-        sys_border_white_opacity30: string;
-        sys_container_background_wt: string;
-        sys_channeldesc_grey_03: string;
-        sys_channeldesc_border_grey_03: string;
-        sys_gradient_base_01: string;
-        sys_gradient_base_01_opacity00: string;
-        sys_channeldesc_background: string;
-        sys_channeldesc_bottomsheet_base: string;
-        sys_channeldesc_bottomsheet_border: string;
-        sys_channeldesc_contents_base: string;
-        sys_channeldesc_dimmed: string;
-        sys_gradient_base_01_opacity50: string;
-        sys_gradient_base_01_opacity75: string;
-        sys_gradient_base_01_opacity40: string;
-        sys_widget_black: string;
-        usr_temp_primary_01: string;
-        sys_cpnt_sheet_base_02_opacity50: string;
-        usr_menu_primarymenu_main: string;
-        usr_menu_primarymenu_sub: string;
-        usr_menu_secondarymenu_main: string;
-        usr_menu_secondarymenu_sub: string;
-        usr_menu_hover: string;
-        usr_menu_active: string;
-        usr_menu_background: string;
-        sys_cpnt_base_white_opacity50: string;
-        sys_widget_dark_01: string;
-        usr_menu_background_gradient_opacity00: string;
-        sys_border_line_white: string;
-        sys_component_base_white_opacity10: string;
-        sys_cpnt_sheet_base_01: string;
-        sys_component_base_white_opacity20: string;
-        sys_border_line_07: string;
-        sys_border_line_white_opacity50: string;
-        sys_background_dimmed_02: string;
-        sys_border_line_08: string;
-        sys_component_base_06: string;
-        sys_component_base_07: string;
-        sys_border_line_09: string;
-        sys_component_base_darktheme_04: string;
-        sys_border_line_10: string;
-        sys_component_base_darktheme_05: string;
-        sys_border_line_darktheme_05: string;
-        sys_component_base_darktheme_06: string;
-        sys_border_line_darktheme_06: string;
-        sys_border_line_darktheme_07: string;
-        sys_border_line_11: string;
-        sys_base_dimmed_01: string;
-        sys_kakao: string;
-        sys_border_line_12: string;
-        sys_component_base_08: string;
-        sys_text_social_login_01: string;
-        sys_text_social_login_02: string;
-        sys_papp_livechat_link: string;
-        sys_text_lighttone_grey_01: string;
-        sys_widget_lighttone_primary_01: string;
-        sys_text_lighttone_grey_02: string;
-        sys_component_base_09: string;
-        sys_component_base_darktheme_opacity20: string;
-        sys_component_base_darktheme_disabled_opacity20: string;
-        sys_border_white_opacity00: string;
-        sys_border_line_darktheme_07_opacity00: string;
-        sys_border_line_darktheme_02_opacity20: string;
-        sys_border_line_darktheme_03_opacity20: string;
-        sys_border_line_darktheme_07_opacity20: string;
-        sys_component_base_grey_02_opacity80: string;
-        sys_component_base_10: string;
-        sys_component_pastel_base_01: string;
-        sys_component_pastel_base_02: string;
-        sys_component_pastel_base_03: string;
-        sys_component_pastel_base_04: string;
-        sys_component_pastel_base_05: string;
-        sys_component_base_11: string;
-        sys_loading_skeleton_01: string;
-        sys_loading_skeleton_02: string;
-        sys_loading_linear_bar: string;
-        sys_loading_linear_base: string;
-        sys_loading_three_bar: string;
-        sys_widget_grey_05: string;
-        sys_menu_background_transparent: string;
-        sys_container_background_04: string;
-        sys_menu_button_base: string;
-        sys_background_dimmed_03: string;
-        sys_cpnt_sheet_base_03: string;
-        sys_dimmed_gradient_01: string;
-        sys_dimmed_gradient_02: string;
-        sys_border_line_13: string;
-        sys_component_base_12: string;
-        sys_border_line_14: string;
-        sys_component_base_13: string;
-        sys_component_base_14: string;
-        sys_component_base_15: string;
-        sys_component_base_16: string;
-        sys_component_base_17: string;
-        sys_widget_red_01: string;
-        sys_widget_orange_01: string;
-        sys_text_warning_01: string;
-        sys_component_base_18: string;
-        sys_cpnt_sheet_base_04: string;
-        sys_cpnt_sheet_base_05: string;
-        sys_cpnt_sheet_base_06: string;
-        sys_facebook: string;
-        sys_component_base_19: string;
-        sys_cpnt_pagination_dot_01: string;
-        sys_cpnt_pagination_dot_02: string;
-        sys_component_base_white_opacity50: string;
-        sys_component_base_20: string;
-        sys_component_base_22: string;
-        sys_component_base_21: string;
-        sys_component_border_white_opacity20: string;
-        sys_component_base_23: string;
-        sys_component_base_darkgreen: string;
-        sys_component_base_24: string;
-        sys_border_line_15: string;
-        sys_border_line_16: string;
-        sys_component_base_hover_01: string;
-        sys_component_on_base_01: string;
-        sys_component_on_base_02: string;
-        sys_component_on_base_03: string;
-        sys_component_on_base_04: string;
-        sys_component_on_base_05: string;
-        sys_component_base_hover_02: string;
-        sys_component_base_pressed_01: string;
-        sys_widget_white_02: string;
-        sys_component_base_hover_03: string;
-        sys_component_base_pressed_02: string;
-        sys_component_base_25: string;
-        sys_editor_base_pages: string;
-        sys_editor_base_papp: string;
-        sys_text_black: string;
-        sys_component_base_26: string;
-        sys_component_base_27: string;
-        sys_component_base_28: string;
-        sys_widget_sidebar_label_text: string;
-        sys_component_base_hover_darktheme: string;
-        sys_component_base_pressed_darktheme: string;
-        sys_component_base_hover_white: string;
-        sys_component_base_pressed_white: string;
-        sys_component_base_hover_transparent: string;
-        sys_component_base_pressed_transparent: string;
-        sys_text_white_opacity_01: string;
-        sys_component_base_hover_04: string;
-        sys_component_base_pressed_03: string;
-        sys_cpnt_sheet_base_07: string;
-        sys_cpnt_sheet_base_08: string;
-        sys_cpnt_sheet_base_09: string;
-        sys_cpnt_sheet_base_10: string;
-        sys_component_base_29: string;
-        sys_storyboard_group_base_grey01: string;
-        sys_storyboard_group_base_blue01: string;
-        sys_storyboard_group_base_red01: string;
-        sys_storyboard_group_base_green01: string;
-        sys_storyboard_card_base_blue01: string;
-        sys_storyboard_card_base_red01: string;
-        sys_storyboard_card_base_green01: string;
-    };
-    readonly PaletteColor_Dark: {
+    readonly PaletteColor_Dark: {
         sys_container_background_01: string;
         sys_container_background_02: string;
         sys_container_background_03: string;
@@ -663,6 +382,7 @@ declare const colorSet: {
         sys_storyboard_card_base_blue01: string;
         sys_storyboard_card_base_red01: string;
         sys_storyboard_card_base_green01: string;
+        sys_brand_secondary_variant: string;
     };
     readonly UIColor: {
         ui_cpnt_button_fill_base_primary: string;
@@ -1408,6 +1128,289 @@ declare const colorSet: {
         ui_93: string;
         ui_94: string;
         ui_95: string;
+        ui_cpnt_icon_sys_brandsecondary_variant: string;
+    };
+    readonly PaletteColor_light: {
+        sys_container_background_01: string;
+        sys_container_background_02: string;
+        sys_container_background_03: string;
+        sys_background_dimmed: string;
+        sys_text_grey_01: string;
+        sys_text_grey_02: string;
+        sys_text_grey_03: string;
+        sys_text_white: string;
+        sys_text_brand_primary: string;
+        sys_text_error_01: string;
+        sys_widget_grey_01: string;
+        sys_widget_grey_02: string;
+        sys_widget_grey_03: string;
+        sys_widget_primary_01: string;
+        sys_widget_error_01: string;
+        sys_widget_warning_01: string;
+        sys_widget_success_01: string;
+        sys_widget_white: string;
+        sys_border_area_01: string;
+        sys_border_line_01: string;
+        sys_border_line_02: string;
+        sys_border_line_03: string;
+        sys_border_line_04: string;
+        sys_border_line_05: string;
+        sys_component_base_01: string;
+        sys_component_base_02: string;
+        sys_component_base_03: string;
+        sys_component_base_red: string;
+        sys_component_base_white: string;
+        sys_component_base_white_opacity00: string;
+        sys_on_base_white_opacity00: string;
+        sys_on_base_white_opacity30: string;
+        sys_on_base_black_opacity20: string;
+        usr_brand_primary: string;
+        usr_brand_secondary: string;
+        usr_brand_secondary_variant: string;
+        usr_background: string;
+        usr_surface: string;
+        usr_border: string;
+        usr_on_brand_primary: string;
+        usr_on_brand_secondary: string;
+        usr_on_background: string;
+        usr_on_surface: string;
+        sys_widget_status_active_01: string;
+        sys_text_success_01: string;
+        sys_widget_grey_04: string;
+        sys_text_active: string;
+        sys_component_base_blue: string;
+        sys_on_base_black_opacity65: string;
+        sys_component_base_04: string;
+        sys_component_base_black: string;
+        sys_component_base_black_opacity00: string;
+        usr_text_brand_secondary_variant: string;
+        usr_text_brand_primary: string;
+        usr_text_brand_on_primary: string;
+        sys_text_brand_secondary_variant: string;
+        sys_component_base_navy: string;
+        sys_widget_lightgreen: string;
+        sys_border_line_06: string;
+        sys_background_dimmed_20: string;
+        sys_widget_pink: string;
+        sys_widget_primary_opacity20: string;
+        sys_widget_secondary_variant_01: string;
+        usr_component_base_brand_primary_opacity10: string;
+        sys_temp_grey_01: string;
+        sys_temp_grey_02: string;
+        sys_temp_grey_03: string;
+        sys_temp_grey_04: string;
+        sys_temp_grey_05: string;
+        sys_temp_white: string;
+        sys_temp_primary_01: string;
+        sys_temp_secondary_01: string;
+        sys_temp_red: string;
+        sys_temp_white_opacity_00: string;
+        sys_temp_dimmed: string;
+        sys_temp_black: string;
+        sys_temp_primary_02: string;
+        sys_temp_primary_03: string;
+        sys_temp_secondary_02: string;
+        sys_temp_lightgreen_01: string;
+        sys_text_grey_04: string;
+        sys_papp_post_social_background: string;
+        sys_papp_post_notice_background: string;
+        sys_papp_post_free_background: string;
+        sys_papp_vod_background: string;
+        sys_papp_vodplus_background: string;
+        sys_papp_live_background: string;
+        sys_selcontrols_base_off_disabled: string;
+        sys_selcontrols_base_on_disabled: string;
+        sys_component_base_blue_opacity10: string;
+        sys_component_base_05: string;
+        sys_background_dimmed_65: string;
+        sys_temp_grey_06: string;
+        sys_on_base_white_opacity10: string;
+        sys_on_base_black_opacity10: string;
+        sys_component_base_05_opacity00: string;
+        sys_papp_post_notice_link: string;
+        sys_component_base_navy_light: string;
+        sys_component_base_orange: string;
+        sys_component_base_grey: string;
+        sys_component_base_black_opacity80: string;
+        sys_text_darkgrey_02: string;
+        sys_border_line_darktheme_01: string;
+        sys_border_line_darktheme_02: string;
+        sys_component_base_darktheme_01: string;
+        sys_component_base_darktheme_02: string;
+        sys_component_base_darktheme_03: string;
+        sys_text_grey_darktheme_01: string;
+        sys_text_grey_darktheme_02: string;
+        sys_text_grey_darktheme_03: string;
+        sys_widget_grey_darktheme_01: string;
+        sys_widget_grey_darktheme_02: string;
+        sys_widget_grey_darktheme_03: string;
+        sys_component_base_green: string;
+        sys_text_error_darktheme_01: string;
+        sys_border_line_darktheme_03: string;
+        sys_border_line_darktheme_04: string;
+        usr_widget_brand_primary_darktheme_01: string;
+        usr_text_brand_primary_darktheme_01: string;
+        sys_component_base_black_opacity50: string;
+        sys_component_base_card: string;
+        sys_cpnt_textlabel_sys_brand_primary_opacity50: string;
+        sys_widget_green_01: string;
+        sys_component_base_black_opacity30: string;
+        sys_area_background: string;
+        sys_border_white_opacity30: string;
+        sys_container_background_wt: string;
+        sys_channeldesc_grey_03: string;
+        sys_channeldesc_border_grey_03: string;
+        sys_gradient_base_01: string;
+        sys_gradient_base_01_opacity00: string;
+        sys_channeldesc_background: string;
+        sys_channeldesc_bottomsheet_base: string;
+        sys_channeldesc_bottomsheet_border: string;
+        sys_channeldesc_contents_base: string;
+        sys_channeldesc_dimmed: string;
+        sys_gradient_base_01_opacity50: string;
+        sys_gradient_base_01_opacity75: string;
+        sys_gradient_base_01_opacity40: string;
+        sys_widget_black: string;
+        usr_temp_primary_01: string;
+        sys_cpnt_sheet_base_02_opacity50: string;
+        usr_menu_primarymenu_main: string;
+        usr_menu_primarymenu_sub: string;
+        usr_menu_secondarymenu_main: string;
+        usr_menu_secondarymenu_sub: string;
+        usr_menu_hover: string;
+        usr_menu_active: string;
+        usr_menu_background: string;
+        sys_cpnt_base_white_opacity50: string;
+        sys_widget_dark_01: string;
+        usr_menu_background_gradient_opacity00: string;
+        sys_border_line_white: string;
+        sys_component_base_white_opacity10: string;
+        sys_cpnt_sheet_base_01: string;
+        sys_component_base_white_opacity20: string;
+        sys_border_line_07: string;
+        sys_border_line_white_opacity50: string;
+        sys_background_dimmed_02: string;
+        sys_border_line_08: string;
+        sys_component_base_06: string;
+        sys_component_base_07: string;
+        sys_border_line_09: string;
+        sys_component_base_darktheme_04: string;
+        sys_border_line_10: string;
+        sys_component_base_darktheme_05: string;
+        sys_border_line_darktheme_05: string;
+        sys_component_base_darktheme_06: string;
+        sys_border_line_darktheme_06: string;
+        sys_border_line_darktheme_07: string;
+        sys_border_line_11: string;
+        sys_base_dimmed_01: string;
+        sys_kakao: string;
+        sys_border_line_12: string;
+        sys_component_base_08: string;
+        sys_text_social_login_01: string;
+        sys_text_social_login_02: string;
+        sys_papp_livechat_link: string;
+        sys_text_lighttone_grey_01: string;
+        sys_widget_lighttone_primary_01: string;
+        sys_text_lighttone_grey_02: string;
+        sys_component_base_09: string;
+        sys_component_base_darktheme_opacity20: string;
+        sys_component_base_darktheme_disabled_opacity20: string;
+        sys_border_white_opacity00: string;
+        sys_border_line_darktheme_07_opacity00: string;
+        sys_border_line_darktheme_02_opacity20: string;
+        sys_border_line_darktheme_03_opacity20: string;
+        sys_border_line_darktheme_07_opacity20: string;
+        sys_component_base_grey_02_opacity80: string;
+        sys_component_base_10: string;
+        sys_component_pastel_base_01: string;
+        sys_component_pastel_base_02: string;
+        sys_component_pastel_base_03: string;
+        sys_component_pastel_base_04: string;
+        sys_component_pastel_base_05: string;
+        sys_component_base_11: string;
+        sys_loading_skeleton_01: string;
+        sys_loading_skeleton_02: string;
+        sys_loading_linear_bar: string;
+        sys_loading_linear_base: string;
+        sys_loading_three_bar: string;
+        sys_widget_grey_05: string;
+        sys_menu_background_transparent: string;
+        sys_container_background_04: string;
+        sys_menu_button_base: string;
+        sys_background_dimmed_03: string;
+        sys_cpnt_sheet_base_03: string;
+        sys_dimmed_gradient_01: string;
+        sys_dimmed_gradient_02: string;
+        sys_border_line_13: string;
+        sys_component_base_12: string;
+        sys_border_line_14: string;
+        sys_component_base_13: string;
+        sys_component_base_14: string;
+        sys_component_base_15: string;
+        sys_component_base_16: string;
+        sys_component_base_17: string;
+        sys_widget_red_01: string;
+        sys_widget_orange_01: string;
+        sys_text_warning_01: string;
+        sys_component_base_18: string;
+        sys_cpnt_sheet_base_04: string;
+        sys_cpnt_sheet_base_05: string;
+        sys_cpnt_sheet_base_06: string;
+        sys_facebook: string;
+        sys_component_base_19: string;
+        sys_cpnt_pagination_dot_01: string;
+        sys_cpnt_pagination_dot_02: string;
+        sys_component_base_white_opacity50: string;
+        sys_component_base_20: string;
+        sys_component_base_22: string;
+        sys_component_base_21: string;
+        sys_component_border_white_opacity20: string;
+        sys_component_base_23: string;
+        sys_component_base_darkgreen: string;
+        sys_component_base_24: string;
+        sys_border_line_15: string;
+        sys_border_line_16: string;
+        sys_component_base_hover_01: string;
+        sys_component_on_base_01: string;
+        sys_component_on_base_02: string;
+        sys_component_on_base_03: string;
+        sys_component_on_base_04: string;
+        sys_component_on_base_05: string;
+        sys_component_base_hover_02: string;
+        sys_component_base_pressed_01: string;
+        sys_widget_white_02: string;
+        sys_component_base_hover_03: string;
+        sys_component_base_pressed_02: string;
+        sys_component_base_25: string;
+        sys_editor_base_pages: string;
+        sys_editor_base_papp: string;
+        sys_text_black: string;
+        sys_component_base_26: string;
+        sys_component_base_27: string;
+        sys_component_base_28: string;
+        sys_widget_sidebar_label_text: string;
+        sys_component_base_hover_darktheme: string;
+        sys_component_base_pressed_darktheme: string;
+        sys_component_base_hover_white: string;
+        sys_component_base_pressed_white: string;
+        sys_component_base_hover_transparent: string;
+        sys_component_base_pressed_transparent: string;
+        sys_text_white_opacity_01: string;
+        sys_component_base_hover_04: string;
+        sys_component_base_pressed_03: string;
+        sys_cpnt_sheet_base_07: string;
+        sys_cpnt_sheet_base_08: string;
+        sys_cpnt_sheet_base_09: string;
+        sys_cpnt_sheet_base_10: string;
+        sys_component_base_29: string;
+        sys_storyboard_group_base_grey01: string;
+        sys_storyboard_group_base_blue01: string;
+        sys_storyboard_group_base_red01: string;
+        sys_storyboard_group_base_green01: string;
+        sys_storyboard_card_base_blue01: string;
+        sys_storyboard_card_base_red01: string;
+        sys_storyboard_card_base_green01: string;
+        sys_brand_secondary_variant: string;
     };
 };
 export default colorSet;

package/dist/src/common/styles/colorSet/index.js

@@ -5,13 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 /* eslint-disable import/order */
 var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
-var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
 var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
 var UIColor_json_1 = __importDefault(require("./UIColor.json"));
+var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
 var colorSet = {
     SemanticColor: SemanticColor_json_1.default,
-    PaletteColor_light: PaletteColor_light_json_1.default,
     PaletteColor_Dark: PaletteColor_Dark_json_1.default,
-    UIColor: UIColor_json_1.default
+    UIColor: UIColor_json_1.default,
+    PaletteColor_light: PaletteColor_light_json_1.default
 };
 exports.default = colorSet;

package/dist/src/common/styles/colorSet/ui-type.d.ts

@@ -742,4 +742,5 @@ export interface UITheme {
     ui_93: string;
     ui_94: string;
     ui_95: string;
+    ui_cpnt_icon_sys_brandsecondary_variant: string;
 }

package/dist/src/desktop/components/AdminList/AdminList.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { PDSValueOption } from '../../../common';
 import type { TFunctionResult } from 'i18next';
-declare type ColumnWidthType = 'small' | 'medium' | 'large';
+declare type ColumnWidthType = 'small' | 'medium' | 'large' | 'xlarge';
 declare type Props = {
     selectionMode?: 'none' | 'single' | 'multi';
     headerRowMode?: 'none' | 'use';

package/dist/src/desktop/components/AdminList/HeaderRow.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { TFunctionResult } from 'i18next';
-declare type ColumnWidthType = 'small' | 'medium' | 'large';
+declare type ColumnWidthType = 'small' | 'medium' | 'large' | 'xlarge';
 declare type Props = {
     selectionMode: 'none' | 'single' | 'multi';
     column2HeaderText?: TFunctionResult;

package/dist/src/desktop/components/AdminList/HeaderRow.js

@@ -48,8 +48,9 @@ function HeaderRow(_a) {
 var small = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 56px;\n"], ["\n  width: 56px;\n"])));
 var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 80px;\n"], ["\n  width: 80px;\n"])));
 var large = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 144px;\n"], ["\n  width: 144px;\n"])));
-var flexibleHideColumnStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  @media only screen and (max-width: 1400px) {\n    .hidableColumn {\n      display: none;\n    }\n  }\n"], ["\n  @media only screen and (max-width: 1400px) {\n    .hidableColumn {\n      display: none;\n    }\n  }\n"])));
-var S_HeaderRow = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  height: 48px;\n\n  ", "\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  height: 48px;\n\n  ", "\n"])), function (_a) {
+var xlarge = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 240px;\n"], ["\n  width: 240px;\n"])));
+var flexibleHideColumnStyle = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  @media only screen and (max-width: 1400px) {\n    .hidableColumn {\n      display: none;\n    }\n  }\n"], ["\n  @media only screen and (max-width: 1400px) {\n    .hidableColumn {\n      display: none;\n    }\n  }\n"])));
+var S_HeaderRow = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  height: 48px;\n\n  ", "\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  height: 48px;\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_list_base_area;
 }, function (_a) {
@@ -59,9 +60,9 @@ var S_HeaderRow = styled_components_1.default.div(templateObject_5 || (templateO
     var flexibleHideInfoMode = _a.flexibleHideInfoMode;
     return flexibleHideInfoMode === 'use' && flexibleHideColumnStyle;
 });
-var S_CheckBox = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __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"])));
-var S_FlexColumn = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  flex: 1;\n  min-width: 80px;\n"], ["\n  flex: 1;\n  min-width: 80px;\n"])));
-var S_Column = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  padding-left: ", ";\n  padding-right: ", ";\n\n  ", ";\n"], ["\n  padding-left: ", ";\n  padding-right: ", ";\n\n  ", ";\n"])), function (_a) {
+var S_CheckBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __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"])));
+var S_FlexColumn = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  flex: 1;\n  min-width: 80px;\n"], ["\n  flex: 1;\n  min-width: 80px;\n"])));
+var S_Column = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  padding-left: ", ";\n  padding-right: ", ";\n\n  ", ";\n"], ["\n  padding-left: ", ";\n  padding-right: ", ";\n\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingC;
 }, function (_a) {
@@ -69,15 +70,15 @@ var S_Column = styled_components_1.default.div(templateObject_8 || (templateObje
     return theme.spacing.spacingC;
 }, function (_a) {
     var columnSize = _a.columnSize;
-    return columnSize && { small: small, medium: medium, large: large }[columnSize];
+    return columnSize && { small: small, medium: medium, large: large, xlarge: xlarge }[columnSize];
 });
-var S_QuickActionButtonBox = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  display: flex;\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
+var S_QuickActionButtonBox = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  display: flex;\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingC;
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingE;
 });
-var S_EmptyDiv = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  height: 100%;\n  width: 56px;\n"], ["\n  height: 100%;\n  width: 56px;\n"])));
+var S_EmptyDiv = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  height: 100%;\n  width: 56px;\n"], ["\n  height: 100%;\n  width: 56px;\n"])));
 exports.default = HeaderRow;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;

package/dist/src/desktop/components/AdminListItem/AdminListItem.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { PDSTextType } from '../../../common';
 import type { TFunctionResult } from 'i18next';
-declare type ColumnWidthType = 'small' | 'medium' | 'large';
+declare type ColumnWidthType = 'small' | 'medium' | 'large' | 'xlarge';
 declare type ColumnTextType = 'normal' | 'active' | 'active2' | 'inactive' | 'report' | 'report2';
 export declare type AdminListItemProps = {
     rowSize?: 'high' | 'medium' | 'low';

package/dist/src/desktop/components/AdminListItem/AdminListItem.js

@@ -161,17 +161,18 @@ var lowRow = (0, styled_components_1.css)(templateObject_3 || (templateObject_3
 var smallColumnWidth = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 56px;\n"], ["\n  width: 56px;\n"])));
 var mediumColumnWidth = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 80px;\n"], ["\n  width: 80px;\n"])));
 var largeColumnWidth = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  width: 144px;\n"], ["\n  width: 144px;\n"])));
-var fixedColumn = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n"], ["\n  align-items: center;\n  display: flex;\n"])));
-var hoverColumn = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  height: 100%;\n"], ["\n  height: 100%;\n"])));
-var hoverQuickActionBtnBox = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  display: none;\n  height: 100%;\n  position: absolute;\n  right: 0;\n"], ["\n  align-items: center;\n  background-color: ", ";\n  display: none;\n  height: 100%;\n  position: absolute;\n  right: 0;\n"])), function (_a) {
+var xlargeColumnWidth = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: 240px;\n"], ["\n  width: 240px;\n"])));
+var fixedColumn = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n"], ["\n  align-items: center;\n  display: flex;\n"])));
+var hoverColumn = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  height: 100%;\n"], ["\n  height: 100%;\n"])));
+var hoverQuickActionBtnBox = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  display: none;\n  height: 100%;\n  position: absolute;\n  right: 0;\n"], ["\n  align-items: center;\n  background-color: ", ";\n  display: none;\n  height: 100%;\n  position: absolute;\n  right: 0;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_datatable_textbutton_base_02;
 });
-var fixedQuickActionBtnBox = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  display: flex;\n  visibility: hidden;\n"], ["\n  align-items: center;\n  background-color: ", ";\n  display: flex;\n  visibility: hidden;\n"])), function (_a) {
+var fixedQuickActionBtnBox = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  display: flex;\n  visibility: hidden;\n"], ["\n  align-items: center;\n  background-color: ", ";\n  display: flex;\n  visibility: hidden;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_datatable_textbutton_base_01;
 });
-var S_QuickActionButtonBox = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  padding-left: ", ";\n  padding-right: ", ";\n\n  ", ";\n"], ["\n  padding-left: ", ";\n  padding-right: ", ";\n\n  ", ";\n"])), function (_a) {
+var S_QuickActionButtonBox = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  padding-left: ", ";\n  padding-right: ", ";\n\n  ", ";\n"], ["\n  padding-left: ", ";\n  padding-right: ", ";\n\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingC;
 }, function (_a) {
@@ -182,60 +183,73 @@ var S_QuickActionButtonBox = styled_components_1.default.div(templateObject_11 |
     return quickActionBtnType &&
         { fix: fixedQuickActionBtnBox, hover: hoverQuickActionBtnBox }[quickActionBtnType];
 });
-var S_QuickActionButton = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  align-items: center;\n  cursor: ", ";\n  display: flex;\n  height: 56px;\n  justify-content: center;\n  width: 56px;\n"], ["\n  align-items: center;\n  cursor: ", ";\n  display: flex;\n  height: 56px;\n  justify-content: center;\n  width: 56px;\n"])), function (_a) {
+var S_QuickActionButton = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  align-items: center;\n  cursor: ", ";\n  display: flex;\n  height: 56px;\n  justify-content: center;\n  width: 56px;\n"], ["\n  align-items: center;\n  cursor: ", ";\n  display: flex;\n  height: 56px;\n  justify-content: center;\n  width: 56px;\n"])), function (_a) {
     var disabled = _a.disabled;
     return (disabled ? 'default' : 'pointer');
 });
-var S_Selection = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __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"])));
-var S_ImageWrapper = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  margin-right: ", ";\n\n  ", "\n"], ["\n  margin-right: ", ";\n\n  ", "\n"])), function (_a) {
+var S_Selection = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __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"])));
+var S_ImageWrapper = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  margin-right: ", ";\n\n  ", "\n"], ["\n  margin-right: ", ";\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingD;
 }, function (_a) {
     var rowSize = _a.rowSize;
-    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    "])));
+    return rowSize === 'high' && (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n      align-items: center;\n      display: flex;\n      height: 100%;\n    "], ["\n      align-items: center;\n      display: flex;\n      height: 100%;\n    "])));
 });
-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) {
+var S_ImageColumn = styled_components_1.default.div(templateObject_19 || (templateObject_19 = __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) {
     var theme = _a.theme;
     return theme.spacing.spacingC;
 }, function (_a) {
     var rowSize = _a.rowSize;
     return rowSize === 'high'
-        ? (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        "])));
+        ? (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __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_18 || (templateObject_18 = __makeTemplateObject(["\n          align-items: center;\n          display: flex;\n        "], ["\n          align-items: center;\n          display: flex;\n        "])));
 });
-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) {
+var S_HighTextWrapper = styled_components_1.default.div(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  height: 100%;\n  overflow: auto;\n\n  ", "\n"], ["\n  height: 100%;\n  overflow: auto;\n\n  ", "\n"])), function (_a) {
     var hasScroll = _a.hasScroll;
-    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    "])));
+    return !hasScroll && (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n      align-items: center;\n      display: flex;\n    "], ["\n      align-items: center;\n      display: flex;\n    "])));
 });
-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) {
+var S_RowTextWrapper = styled_components_1.default.div(templateObject_22 || (templateObject_22 = __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) {
     var columnSize = _a.columnSize;
     return columnSize &&
-        { small: smallColumnWidth, medium: mediumColumnWidth, large: largeColumnWidth }[columnSize];
+        {
+            small: smallColumnWidth,
+            medium: mediumColumnWidth,
+            large: largeColumnWidth,
+            xlarge: xlargeColumnWidth
+        }[columnSize];
 }, function (_a) {
     var quickActionBtnType = _a.quickActionBtnType;
     return quickActionBtnType && { fix: fixedColumn, hover: hoverColumn }[quickActionBtnType];
 });
-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) {
+var S_Column = styled_components_1.default.div(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  display: flex;\n  height: auto;\n  max-height: 100%;\n  overflow: auto;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  ", ";\n  ", ";\n"], ["\n  display: flex;\n  height: auto;\n  max-height: 100%;\n  overflow: auto;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  ", ";\n  ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingC;
+}, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingC;
 }, function (_a) {
     var columnSize = _a.columnSize;
     return columnSize &&
-        { small: smallColumnWidth, medium: mediumColumnWidth, large: largeColumnWidth }[columnSize];
+        {
+            small: smallColumnWidth,
+            medium: mediumColumnWidth,
+            large: largeColumnWidth,
+            xlarge: xlargeColumnWidth
+        }[columnSize];
 }, function (_a) {
     var quickActionBtnType = _a.quickActionBtnType;
     return quickActionBtnType && { fix: fixedColumn, hover: hoverColumn }[quickActionBtnType];
 });
-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) {
+var S_SelectionColumn = styled_components_1.default.div(templateObject_24 || (templateObject_24 = __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) {
     var theme = _a.theme, rowSize = _a.rowSize;
     return (rowSize === 'high' || rowSize === 'medium') && theme.spacing.spacingC;
 }, function (_a) {
     var theme = _a.theme, rowSize = _a.rowSize;
     return (rowSize === 'high' || rowSize === 'medium') && theme.spacing.spacingC;
 });
-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"])));
-var fixedAdminListItem = (0, styled_components_1.css)(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n  justify-content: space-between;\n"], ["\n  justify-content: space-between;\n"])));
-var flexibleHideColumnStyle = (0, styled_components_1.css)(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n  @media only screen and (max-width: 1400px) {\n    .hidableColumn {\n      display: none;\n    }\n  }\n"], ["\n  @media only screen and (max-width: 1400px) {\n    .hidableColumn {\n      display: none;\n    }\n  }\n"])));
-var S_AdminListItem = styled_components_1.default.div(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n  background-color: ", ";\n  display: flex;\n  padding-left: ", ";\n\n  ", "\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  ", "\n"], ["\n  background-color: ", ";\n  display: flex;\n  padding-left: ", ";\n\n  ", "\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  ", "\n"])), function (_a) {
+var hoverAdminListItem = (0, styled_components_1.css)(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n  align-items: center;\n  position: relative;\n"], ["\n  align-items: center;\n  position: relative;\n"])));
+var fixedAdminListItem = (0, styled_components_1.css)(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n  justify-content: space-between;\n"], ["\n  justify-content: space-between;\n"])));
+var flexibleHideColumnStyle = (0, styled_components_1.css)(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n  @media only screen and (max-width: 1400px) {\n    .hidableColumn {\n      display: none;\n    }\n  }\n"], ["\n  @media only screen and (max-width: 1400px) {\n    .hidableColumn {\n      display: none;\n    }\n  }\n"])));
+var S_AdminListItem = styled_components_1.default.div(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  display: flex;\n  padding-left: ", ";\n\n  ", "\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  ", "\n"], ["\n  align-items: center;\n  background-color: ", ";\n  display: flex;\n  padding-left: ", ";\n\n  ", "\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  ", "\n"])), function (_a) {
     var theme = _a.theme, isSelected = _a.isSelected;
     return isSelected ? theme.ui_cpnt_datatable_base_selected : theme.ui_cpnt_datatable_base_default;
 }, function (_a) {
@@ -259,4 +273,4 @@ var S_AdminListItem = styled_components_1.default.div(templateObject_27 || (temp
     return flexibleHideInfoMode === 'use' && flexibleHideColumnStyle;
 });
 exports.default = AdminListItem;
-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, templateObject_27;
+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, templateObject_27, templateObject_28;

package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/ContentsContainer.d.ts

@@ -3,7 +3,7 @@ import type { UiColors } from '../../../../../common';
 export declare type ContentsContainerProps = {
     content1?: JSX.Element;
     content2?: JSX.Element;
-    layoutType: 'WFA_1' | 'WFA_2' | 'WFB_1' | 'WFC_1' | 'WFD_1' | 'WFD_2' | 'WFE_1' | 'WFE_2' | 'WFE_3' | 'WFE_4' | 'WFF_1' | 'WFG_1' | 'WFG_2' | 'WFG_3' | 'WFG_4' | 'WFG_5' | 'WFG_6' | 'WFH_1' | 'WFI_1' | 'WFI_2' | 'WFI_3' | 'WFI_4' | 'WFI_5' | 'WFI_6' | 'WFJ_1' | 'WFK_1' | 'WFL_1' | 'WFL_2';
+    layoutType: 'WFA_1' | 'WFA_2' | 'WFB_1' | 'WFC_1' | 'WFD_1' | 'WFD_2' | 'WFE_1' | 'WFE_2' | 'WFE_3' | 'WFE_4' | 'WFF_1' | 'WFG_1' | 'WFG_2' | 'WFG_3' | 'WFG_4' | 'WFG_5' | 'WFG_6' | 'WFH_1' | 'WFI_1' | 'WFI_2' | 'WFI_3' | 'WFI_4' | 'WFI_5' | 'WFI_6' | 'WFJ_1' | 'WFK_1' | 'WFL_1' | 'WFL_2' | 'WFL_3' | 'WFL_4';
     containerColor?: string;
     areaColor?: string;
     isLoadingContainer1?: boolean;

package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/ContentsContainer.js

@@ -32,7 +32,9 @@ var ContentsContainer = function (_a) {
             WFJ_1: ((0, jsx_runtime_1.jsx)(variation_1.WFJ, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, overrideContainer1ColorKey: overrideContainer1ColorKey }, void 0)),
             WFK_1: ((0, jsx_runtime_1.jsx)(variation_1.WFK, { content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey }, void 0)),
             WFL_1: ((0, jsx_runtime_1.jsx)(variation_1.WFL, { layoutType: "WFL_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey }, void 0)),
-            WFL_2: ((0, jsx_runtime_1.jsx)(variation_1.WFL, { layoutType: "WFL_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey }, void 0))
+            WFL_2: ((0, jsx_runtime_1.jsx)(variation_1.WFL, { layoutType: "WFL_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey }, void 0)),
+            WFL_3: ((0, jsx_runtime_1.jsx)(variation_1.WFL, { layoutType: "WFL_3", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey }, void 0)),
+            WFL_4: ((0, jsx_runtime_1.jsx)(variation_1.WFL, { layoutType: "WFL_4", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey }, void 0))
         }[layoutType] }, void 0));
 };
 exports.default = ContentsContainer;

package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFL.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { UiColors } from '../../../../../../common';
 export declare type WFLProps = {
-    layoutType: 'WFL_1' | 'WFL_2';
+    layoutType: 'WFL_1' | 'WFL_2' | 'WFL_3' | 'WFL_4';
     content1?: JSX.Element;
     content2?: JSX.Element;
     containerColor?: string;

package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFL.js

@@ -42,38 +42,76 @@ var WFL = function (_a) {
     var layoutType = _a.layoutType, content1 = _a.content1, content2 = _a.content2, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2, overrideContainer1ColorKey = _a.overrideContainer1ColorKey, overrideContainer2ColorKey = _a.overrideContainer2ColorKey;
     return ((0, jsx_runtime_1.jsxs)(S_Box, { children: [(0, jsx_runtime_1.jsx)(S_ContentsContainer1, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFL", layoutType: layoutType, containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {}, void 0)) : ((0, jsx_runtime_1.jsx)(S_ContentsArea1, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFL", layoutType: layoutType, areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFL", layoutType: layoutType }, { children: content1 }), void 0) }), void 0)) }), void 0), (0, jsx_runtime_1.jsx)(S_ContentsContainer2, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFL", layoutType: layoutType, containerColor: containerColor, overrideContainer2ColorKey: overrideContainer2ColorKey }, { children: isLoadingContainer2 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {}, void 0)) : ((0, jsx_runtime_1.jsx)(S_ContentsArea2, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFL", layoutType: layoutType, areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content2, __assign({ "x-pds-name": "Content2", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFL", layoutType: layoutType }, { children: content2 }), void 0) }), void 0)) }), void 0)] }, void 0));
 };
-var WFL_1ContainerStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 0 48px;\n"], ["\n  padding: 0 48px;\n"])));
-var WFL_2ContainerStyle = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 0 24px;\n"], ["\n  padding: 0 24px;\n"])));
-var S_Box = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  height: 60vh;\n  max-height: 640px;\n"], ["\n  display: flex;\n  height: 60vh;\n  max-height: 640px;\n"])));
-var S_ContentsContainer1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 24px 0 0 24px;\n  box-sizing: border-box;\n  overflow-x: hidden;\n  overflow-y: auto;\n  width: 480px;\n\n  ", ";\n  ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  border-radius: 24px 0 0 24px;\n  box-sizing: border-box;\n  overflow-x: hidden;\n  overflow-y: auto;\n  width: 480px;\n\n  ", ";\n  ", ";\n\n  ", "\n"])), function (_a) {
+var WFL_1Container1Style = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 0 48px;\n"], ["\n  padding: 0 48px;\n"])));
+var WFL_2Container1Style = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 0 24px;\n"], ["\n  padding: 0 24px;\n"])));
+var WFL_3Container1Style = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding: 0 48px;\n"], ["\n  padding: 0 48px;\n"])));
+var WFL_4Container1Style = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding: 0 24px;\n"], ["\n  padding: 0 24px;\n"])));
+var WFL_1Container2Style = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: 100%;\n  overflow: hidden;\n"], ["\n  height: 100%;\n  overflow: hidden;\n"])));
+var WFL_2Container2Style = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  height: 100%;\n  overflow: hidden;\n"], ["\n  height: 100%;\n  overflow: hidden;\n"])));
+var WFL_3Container2Style = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  overflow-x: hidden;\n  overflow-y: auto;\n"], ["\n  overflow-x: hidden;\n  overflow-y: auto;\n"])));
+var WFL_4Container2Style = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  overflow-x: hidden;\n  overflow-y: auto;\n"], ["\n  overflow-x: hidden;\n  overflow-y: auto;\n"])));
+var WFL_1Area2Style = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  height: 100%;\n"], ["\n  height: 100%;\n"])));
+var WFL_2Area2Style = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  height: 100%;\n"], ["\n  height: 100%;\n"])));
+var WFL_3Area2Style = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  padding-bottom: 64px;\n"], ["\n  padding-bottom: 64px;\n"])));
+var WFL_4Area2Style = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  padding-bottom: 64px;\n"], ["\n  padding-bottom: 64px;\n"])));
+var WFL_1Content2Style = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  height: 100%;\n  overflow: hidden;\n"], ["\n  height: 100%;\n  overflow: hidden;\n"])));
+var WFL_2Content2Style = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  height: 100%;\n  overflow: hidden;\n"], ["\n  height: 100%;\n  overflow: hidden;\n"])));
+var S_Box = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  display: flex;\n  height: 60vh;\n  max-height: 640px;\n"], ["\n  display: flex;\n  height: 60vh;\n  max-height: 640px;\n"])));
+var S_ContentsContainer1 = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 24px 0 0 24px;\n  box-sizing: border-box;\n  overflow-x: hidden;\n  overflow-y: auto;\n  width: 480px;\n\n  ", ";\n  ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  border-radius: 24px 0 0 24px;\n  box-sizing: border-box;\n  overflow-x: hidden;\n  overflow-y: auto;\n  width: 480px;\n\n  ", ";\n  ", ";\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_wizard_contentscontainer01_background;
 }, function (_a) {
     var layoutType = _a.layoutType;
     return ({
-        WFL_1: WFL_1ContainerStyle,
-        WFL_2: WFL_2ContainerStyle
+        WFL_1: WFL_1Container1Style,
+        WFL_2: WFL_2Container1Style,
+        WFL_3: WFL_3Container1Style,
+        WFL_4: WFL_4Container1Style
     }[layoutType]);
 }, function (_a) {
     var containerColor = _a.containerColor;
     return "background-color: " + containerColor;
 }, scrollbarStyle_1.scrollbarStyle);
-var S_ContentsContainer2 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 0 24px 24px 0;\n  height: 100%;\n  overflow: hidden;\n  width: 672px;\n\n  ", ";\n"], ["\n  background-color: ", ";\n  border-radius: 0 24px 24px 0;\n  height: 100%;\n  overflow: hidden;\n  width: 672px;\n\n  ", ";\n"])), function (_a) {
+var S_ContentsContainer2 = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 0 24px 24px 0;\n  width: 672px;\n\n  ", ";\n  ", ";\n"], ["\n  background-color: ", ";\n  border-radius: 0 24px 24px 0;\n  width: 672px;\n\n  ", ";\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_wizard_contentscontainer02_background;
+}, function (_a) {
+    var layoutType = _a.layoutType;
+    return ({
+        WFL_1: WFL_1Container2Style,
+        WFL_2: WFL_2Container2Style,
+        WFL_3: WFL_3Container2Style,
+        WFL_4: WFL_4Container2Style
+    }[layoutType]);
 }, function (_a) {
     var containerColor = _a.containerColor;
     return "background-color: " + containerColor;
 });
-var S_ContentsArea1 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-bottom: 64px;\n\n  ", ";\n"], ["\n  box-sizing: border-box;\n  padding-bottom: 64px;\n\n  ", ";\n"])), function (_a) {
+var S_ContentsArea1 = styled_components_1.default.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-bottom: 64px;\n\n  ", ";\n"], ["\n  box-sizing: border-box;\n  padding-bottom: 64px;\n\n  ", ";\n"])), function (_a) {
     var areaColor = _a.areaColor;
     return "background-color: " + areaColor;
 });
-var S_ContentsArea2 = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  height: 100%;\n\n  ", ";\n"], ["\n  height: 100%;\n\n  ", ";\n"])), function (_a) {
+var S_ContentsArea2 = styled_components_1.default.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  box-sizing: border-box;\n\n  ", ";\n  ", ";\n"], ["\n  box-sizing: border-box;\n\n  ", ";\n  ", ";\n"])), function (_a) {
+    var layoutType = _a.layoutType;
+    return ({
+        WFL_1: WFL_1Area2Style,
+        WFL_2: WFL_2Area2Style,
+        WFL_3: WFL_3Area2Style,
+        WFL_4: WFL_4Area2Style
+    }[layoutType]);
+}, function (_a) {
     var areaColor = _a.areaColor;
     return "background-color: " + areaColor;
 });
-var S_Content1 = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
-var S_Content2 = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  height: 100%;\n  overflow: hidden;\n"], ["\n  height: 100%;\n  overflow: hidden;\n"])));
+var S_Content1 = styled_components_1.default.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
+var S_Content2 = styled_components_1.default.div(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
+    var layoutType = _a.layoutType;
+    return ({
+        WFL_1: WFL_1Content2Style,
+        WFL_2: WFL_2Content2Style,
+        WFL_3: '',
+        WFL_4: ''
+    }[layoutType]);
+});
 exports.default = WFL;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
+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;

package/dist/src/desktop/layout/LayoutWF/ContainersBox/ContainersBox.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { UiColors } from '../../../../common';
 export declare type ContainersBoxProps = {
-    layoutType: 'WFA_1' | 'WFA_2' | 'WFB_1' | 'WFC_1' | 'WFD_1' | 'WFD_2' | 'WFE_1' | 'WFE_2' | 'WFE_3' | 'WFE_4' | 'WFF_1' | 'WFG_1' | 'WFG_2' | 'WFG_3' | 'WFG_4' | 'WFG_5' | 'WFG_6' | 'WFH_1' | 'WFI_1' | 'WFI_2' | 'WFI_3' | 'WFI_4' | 'WFI_5' | 'WFI_6' | 'WFJ_1' | 'WFK_1' | 'WFL_1' | 'WFL_2';
+    layoutType: 'WFA_1' | 'WFA_2' | 'WFB_1' | 'WFC_1' | 'WFD_1' | 'WFD_2' | 'WFE_1' | 'WFE_2' | 'WFE_3' | 'WFE_4' | 'WFF_1' | 'WFG_1' | 'WFG_2' | 'WFG_3' | 'WFG_4' | 'WFG_5' | 'WFG_6' | 'WFH_1' | 'WFI_1' | 'WFI_2' | 'WFI_3' | 'WFI_4' | 'WFI_5' | 'WFI_6' | 'WFJ_1' | 'WFK_1' | 'WFL_1' | 'WFL_2' | 'WFL_3' | 'WFL_4';
     pageMenuContent?: JSX.Element;
     subMenuContent?: JSX.Element;
     tabMenuContent?: JSX.Element;

package/dist/src/desktop/layout/LayoutWF/ContainersBox/ContainersBox.js

@@ -46,7 +46,9 @@ var ContainersBox = function (_a) {
     var wizardContainerWidthType = layoutType === 'WFE_3' ||
         layoutType === 'WFE_4' ||
         layoutType === 'WFL_1' ||
-        layoutType === 'WFL_2'
+        layoutType === 'WFL_2' ||
+        layoutType === 'WFL_3' ||
+        layoutType === 'WFL_4'
         ? 'large'
         : 'small';
     return ((0, jsx_runtime_1.jsx)(S_Wrapper, __assign({ isWizardLayout: isWizardLayout }, { children: (0, jsx_runtime_1.jsxs)(S_ContainersBox, __assign({ isWizardLayout: isWizardLayout }, { children: [pageMenuContent && ((0, jsx_runtime_1.jsx)(S_TopWrapper, { children: isWizardLayout ? ({
@@ -80,7 +82,9 @@ var ContainersBox = function (_a) {
                             WFJ_1: (0, jsx_runtime_1.jsx)(Containers_1.SubMenuContainer, { subMenuContent: subMenuContent }, void 0),
                             WFK_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
                             WFL_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
-                            WFL_2: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0)
+                            WFL_2: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
+                            WFL_3: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
+                            WFL_4: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0)
                         }[layoutType], (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [{
                                     WFA_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
                                     WFA_2: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
@@ -109,7 +113,9 @@ var ContainersBox = function (_a) {
                                     WFJ_1: (0, jsx_runtime_1.jsx)(Containers_1.TabMenuContainer, { tabMenuType: "tab_menu", tabMenuContent: tabMenuContent }, void 0),
                                     WFK_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
                                     WFL_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
-                                    WFL_2: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0)
+                                    WFL_2: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
+                                    WFL_3: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
+                                    WFL_4: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0)
                                 }[layoutType], (0, jsx_runtime_1.jsx)(S_ContentsWrapper, { children: (0, jsx_runtime_1.jsx)(Containers_1.ContentsContainer, { layoutType: layoutType, content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey }, void 0) }, void 0)] }, void 0)] }), void 0), isWizardLayout && ((0, jsx_runtime_1.jsx)(S_BottomWrapper, { children: {
                         small: (0, jsx_runtime_1.jsx)(Containers_1.StepContainer, { stepType: "step_864", stepContent: stepContent }, void 0),
                         large: (0, jsx_runtime_1.jsx)(Containers_1.StepContainer, { stepType: "step_1152", stepContent: stepContent }, void 0)

package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/ContentsContainer.d.ts

@@ -3,7 +3,7 @@ import type { MutableRefObject } from 'react';
 export declare type ContentsContainerProps = {
     content1?: JSX.Element;
     content2?: JSX.Element;
-    layoutType: 'WTA_1' | 'WTA_2' | 'WTA_3' | 'WTB_1' | 'WTC_1' | 'WTD_1' | 'WTD_2' | 'WTD_3' | 'WTD_4' | 'WTD_5' | 'WTD_6' | 'WTE_1' | 'WTF_1' | 'WTF_2' | 'WTF_3' | 'WTF_4' | 'WTF_5' | 'WTF_6' | 'WTG_1' | 'WTH_1' | 'WTH_2' | 'WTH_3' | 'WTI_1' | 'WTI_2' | 'WTJ_1' | 'WTK_1' | 'WTK_2' | 'WTK_3' | 'WTK_4' | 'WTL_1' | 'WTM_1' | 'WTM_2' | 'WTM_3' | 'WTN_1' | 'WTN_2' | 'WTN_3' | 'WTO_1' | 'WTP_1' | 'WTQ_1' | 'WTS_1' | 'WTS_2' | 'WTT_1' | 'WTT_2' | 'WTU_1';
+    layoutType: 'WTA_1' | 'WTA_2' | 'WTA_3' | 'WTB_1' | 'WTC_1' | 'WTD_1' | 'WTD_2' | 'WTD_3' | 'WTD_4' | 'WTD_5' | 'WTD_6' | 'WTE_1' | 'WTF_1' | 'WTF_2' | 'WTF_3' | 'WTF_4' | 'WTF_5' | 'WTF_6' | 'WTG_1' | 'WTH_1' | 'WTH_2' | 'WTH_3' | 'WTI_1' | 'WTI_2' | 'WTJ_1' | 'WTK_1' | 'WTK_2' | 'WTK_3' | 'WTK_4' | 'WTL_1' | 'WTM_1' | 'WTM_2' | 'WTM_3' | 'WTN_1' | 'WTN_2' | 'WTN_3' | 'WTO_1' | 'WTP_1' | 'WTP_2' | 'WTQ_1' | 'WTS_1' | 'WTS_2' | 'WTT_1' | 'WTT_2' | 'WTU_1';
     containerColor?: string;
     areaColor?: string;
     isLoadingContainer1?: boolean;

package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/ContentsContainer.js

@@ -43,6 +43,7 @@ var ContentsContainer = function (_a) {
             WTN_3: ((0, jsx_runtime_1.jsx)(variation_1.WTN, { layoutType: "WTN_3", content1: content1, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref, isLoadingContainer1: isLoadingContainer1, overrideContainer1ColorKey: overrideContainer1ColorKey }, void 0)),
             WTO_1: ((0, jsx_runtime_1.jsx)(variation_1.WTO, { layoutType: "WTO_1", content1: content1, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref, isLoadingContainer1: isLoadingContainer1, overrideContainer1ColorKey: overrideContainer1ColorKey }, void 0)),
             WTP_1: ((0, jsx_runtime_1.jsx)(variation_1.WTP, { layoutType: "WTP_1", content1: content1, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref, isLoadingContainer1: isLoadingContainer1, overrideContainer1ColorKey: overrideContainer1ColorKey }, void 0)),
+            WTP_2: ((0, jsx_runtime_1.jsx)(variation_1.WTP, { layoutType: "WTP_2", content1: content1, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref, isLoadingContainer1: isLoadingContainer1, overrideContainer1ColorKey: overrideContainer1ColorKey }, void 0)),
             WTQ_1: ((0, jsx_runtime_1.jsx)(variation_1.WTQ, { layoutType: "WTQ_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey }, void 0)),
             WTS_1: ((0, jsx_runtime_1.jsx)(variation_1.WTS, { layoutType: "WTS_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref, isLoadingContainer1: isLoadingContainer1, overrideContainer1ColorKey: overrideContainer1ColorKey }, void 0)),
             WTS_2: ((0, jsx_runtime_1.jsx)(variation_1.WTS, { layoutType: "WTS_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref, isLoadingContainer1: isLoadingContainer1, overrideContainer1ColorKey: overrideContainer1ColorKey }, void 0)),

package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTP.d.ts

@@ -2,7 +2,7 @@ import type { UiColors } from '../../../../../../common';
 import type { MutableRefObject } from 'react';
 export declare type WTPProps = {
     content1?: JSX.Element;
-    layoutType: 'WTP_1';
+    layoutType: 'WTP_1' | 'WTP_2';
     containerColor?: string;
     areaColor?: string;
     isLoadingContainer1?: boolean;

package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTP.js

@@ -52,15 +52,17 @@ var S_ContentsContainer = styled_components_1.default.div(templateObject_2 || (t
     var containerColor = _a.containerColor;
     return "background-color: " + containerColor;
 }, overrideStyleContainer1);
-var S_ContentsArea = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-bottom: 88px;\n\n  ", ";\n  ", ";\n"], ["\n  box-sizing: border-box;\n  padding-bottom: 88px;\n\n  ", ";\n  ", ";\n"])), function (_a) {
+var WTP_1AreaStyle = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding-bottom: 88px;\n"], ["\n  padding-bottom: 88px;\n"])));
+var S_ContentsArea = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  box-sizing: border-box;\n  width: 664px;\n\n  ", ";\n  ", ";\n"], ["\n  box-sizing: border-box;\n  width: 664px;\n\n  ", ";\n  ", ";\n"])), function (_a) {
     var layoutType = _a.layoutType;
     return ({
-        WTP_1: 'width: 664px;'
+        WTP_1: WTP_1AreaStyle,
+        WTP_2: ''
     }[layoutType]);
 }, function (_a) {
     var areaColor = _a.areaColor;
     return "background-color: " + areaColor;
 });
-var S_Content1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
+var S_Content1 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
 exports.default = WTP;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/src/desktop/layout/LayoutWT/ContainersBox/ContainersBox.d.ts

@@ -1,7 +1,7 @@
 import type { UiColors } from '../../../../common';
 import type { MutableRefObject } from 'react';
 export declare type ContainersBoxProps = {
-    layoutType: 'WTA_1' | 'WTA_2' | 'WTA_3' | 'WTB_1' | 'WTC_1' | 'WTD_1' | 'WTD_2' | 'WTD_3' | 'WTD_4' | 'WTD_5' | 'WTD_6' | 'WTE_1' | 'WTF_1' | 'WTF_2' | 'WTF_3' | 'WTF_4' | 'WTF_5' | 'WTF_6' | 'WTG_1' | 'WTH_1' | 'WTH_2' | 'WTH_3' | 'WTI_1' | 'WTI_2' | 'WTJ_1' | 'WTK_1' | 'WTK_2' | 'WTK_3' | 'WTK_4' | 'WTL_1' | 'WTM_1' | 'WTM_2' | 'WTM_3' | 'WTN_1' | 'WTN_2' | 'WTN_3' | 'WTO_1' | 'WTP_1' | 'WTQ_1' | 'WTS_1' | 'WTS_2' | 'WTT_1' | 'WTT_2' | 'WTU_1';
+    layoutType: 'WTA_1' | 'WTA_2' | 'WTA_3' | 'WTB_1' | 'WTC_1' | 'WTD_1' | 'WTD_2' | 'WTD_3' | 'WTD_4' | 'WTD_5' | 'WTD_6' | 'WTE_1' | 'WTF_1' | 'WTF_2' | 'WTF_3' | 'WTF_4' | 'WTF_5' | 'WTF_6' | 'WTG_1' | 'WTH_1' | 'WTH_2' | 'WTH_3' | 'WTI_1' | 'WTI_2' | 'WTJ_1' | 'WTK_1' | 'WTK_2' | 'WTK_3' | 'WTK_4' | 'WTL_1' | 'WTM_1' | 'WTM_2' | 'WTM_3' | 'WTN_1' | 'WTN_2' | 'WTN_3' | 'WTO_1' | 'WTP_1' | 'WTP_2' | 'WTQ_1' | 'WTS_1' | 'WTS_2' | 'WTT_1' | 'WTT_2' | 'WTU_1';
     pageMenuContent?: JSX.Element;
     tabMenuContent?: JSX.Element;
     subMenuContent?: JSX.Element;

package/dist/src/desktop/layout/LayoutWT/ContainersBox/ContainersBox.js

@@ -78,6 +78,7 @@ var ContainersBox = function (_a) {
                 WTN_3: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
                 WTO_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
                 WTP_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
+                WTP_2: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
                 WTQ_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
                 WTS_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
                 WTS_2: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
@@ -123,6 +124,7 @@ var ContainersBox = function (_a) {
                         WTN_3: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
                         WTO_1: ((0, jsx_runtime_1.jsx)(Containers_1.PageMenuContainer, { pageMenuType: "top_page_menu", pageMenuContent: pageMenuContent, containerColor: containerColor, areaColor: areaColor }, void 0)),
                         WTP_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
+                        WTP_2: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
                         WTQ_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
                         WTS_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
                         WTS_2: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
@@ -168,6 +170,7 @@ var ContainersBox = function (_a) {
                         WTN_3: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
                         WTO_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
                         WTP_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
+                        WTP_2: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
                         WTQ_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
                         WTS_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
                         WTS_2: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
@@ -213,6 +216,7 @@ var ContainersBox = function (_a) {
                                 WTN_3: '',
                                 WTO_1: ((0, jsx_runtime_1.jsx)(Containers_1.SubMenuContainer, { subMenuType: "left_sub_menu", subMenuContent: subMenuContent, containerColor: containerColor, areaColor: areaColor }, void 0)),
                                 WTP_1: ((0, jsx_runtime_1.jsx)(Containers_1.SubMenuContainer, { subMenuType: "left_sub_menu", subMenuContent: subMenuContent, containerColor: containerColor, areaColor: areaColor }, void 0)),
+                                WTP_2: ((0, jsx_runtime_1.jsx)(Containers_1.SubMenuContainer, { subMenuType: "left_sub_menu", subMenuContent: subMenuContent, containerColor: containerColor, areaColor: areaColor }, void 0)),
                                 WTQ_1: '',
                                 WTS_1: '',
                                 WTS_2: '',
@@ -226,7 +230,7 @@ var S_RightBox = styled_components_1.default.div(templateObject_2 || (templateOb
 var flexStyle = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
 var S_BottomWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  flex: 1;\n  height: 100%;\n  overflow: hidden;\n  ", ";\n"], ["\n  flex: 1;\n  height: 100%;\n  overflow: hidden;\n  ", ";\n"])), function (_a) {
     var layoutType = _a.layoutType;
-    return (layoutType === 'WTO_1' || layoutType === 'WTP_1') && flexStyle;
+    return (layoutType === 'WTO_1' || layoutType === 'WTP_1' || layoutType === 'WTP_2') && flexStyle;
 });
 exports.default = ContainersBox;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web",
-  "version": "1.9.20",
+  "version": "1.9.22",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",

package/release-note.md

@@ -1,5 +1,7 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v1.9.20]
+## [v1.9.22]
 
-### Color
-* 컬러 키 값 23.03.09 19시 50분 기준 싱크
+### Layout
+* WFL_3 생성
+* WFL_4 생성
+* WTP_2 생성