pds-dev-kit-web 0.3.4 → 0.3.5

package/dist/src/common/services/i18n/resources/ko.json

@@ -598,7 +598,7 @@
         "str_create_subs_product": "구독상품 생성",
         "str_create_subs_product_step_1": "시작하기",
         "str_create_subs_product_step_2": "기본 정보 입력",
-        "str_create_subs_product_step_3": "구독상품 가격 정하기",
+        "str_create_subs_product_step_3": "구독상품 가격 입력",
         "str_create_subs_product_step_4": "결제 정보 입력",
         "str_259": "시작하기",
         "str_260": "채널에서 판매할 구독상품을 생성합니다.\n여러개의 상품을 만들어 신규 회원에게 할인 혜택을 제공하거나,\n단골 고객들이 이탈하지 않도록 해 보세요.",
@@ -838,7 +838,7 @@
         "str_354": "만료 기간 선택",
         "str_papp_vod_seller_noti_title_vod_uploading": "VOD 업로드",
         "str_papp_vod_seller_noti_desc_vod_uploading_bulk": "모든 파일 업로드 중 ...",
-        "str_papp_vod_seller_noti_content_vod_uploading": "{{uploadPercentage}} 업로드 됨",
+        "str_papp_vod_seller_noti_content_vod_uploading": "{{uploadPercentage}}% 업로드 됨",
         "str_papp_vod_seller_noti_desc_vod_uploading_single": "파일 업로드 중 ...",
         "str_duplicated_email": "이미 존재하는 이메일 계정입니다. \n 다시 한번 확인해주세요.",
         "str_papp_cbooking_seller_noti_title_evt_start_soon": "상담 시간 임박",
@@ -890,7 +890,7 @@
         "str_383": "구독상품 수정",
         "str_384": "기본 정보를 수정해 주세요.",
         "str_modify_sp_step_1": "기본 정보 수정",
-        "str_modify_sp_step_2": "구독상품 가격 수정하기",
+        "str_modify_sp_step_2": "구독상품 가격 수정",
         "str_modify_sp_step_3": "표시용 문구 수정",
         "str_388": "해당 부분은 수정이 불가합니다.",
         "str_389": "구독상품 수정이 완료되었습니다.",
@@ -1707,6 +1707,7 @@
         "str_language_settings": "$t(str_language) $t(str_settings)",
         "str_deactivate": "비활성화",
         "str_791": "국제 전화번호용 할당",
+        "str_update_profile_info": "프로필 정보 수정",
         "str_792": "국제 전화번호용 할당",
         "str_793": "국제 전화번호용 할당",
         "str_798": "국제 전화번호용 할당",
@@ -1934,7 +1935,7 @@
         "str_public_alert_dialog": "게시글이 공개되었습니다.\n(공개된 게시글은 구독자에게 표시됩니다.)",
         "str_private_alert_dialog": "게시글이 비공개되었습니다.\n(비공개된 게시글은 구독자에게 표시되지 않습니다.)",
         "str_987": "영상은 mp4, mov, mkv, m4v 포맷의 파일로 업로드할 수 있습니다.",
-        "str_err_988": "내용은 최소 2자, 최대 1024자까지 입력할 수 있습니다.",
+        "str_err_988": "내용은 최소 2자, 최대 5000자까지 입력할 수 있습니다.",
         "str_err_989": "이미지는 최대 10개까지 업로드할 수 있습니다.({{errCode}})",
         "str_err_990": "이미지는 최대 10MB까지 업로드 할 수 있습니다.({{errCode}})",
         "str_err_991": "영상은 최대 1분 분량까지 업로드할 수 있습니다.({{errCode}})",
@@ -1942,7 +1943,7 @@
         "str_err_993": "유효하지 않은 youTube 주소입니다.",
         "str_994": "셀러에 의해 비공개된 게시글입니다. 다른 게시글을 선택해 주세요.",
         "str_995": "비공개 게시글",
-        "str_err_996": "내용은 최소 2자, 최대 2000자까지 입력할 수 있습니다.",
+        "str_err_996": "내용은 최소 2자, 최대 5000자까지 입력할 수 있습니다.",
         "str_err_997": "셀러에 의해 삭제된 배너입니다. 다른 배너를 선택해 주세요.({{errCode}})",
         "str_err_998": "썸네일 이미지는 16:9 비율로 업로드 할 수 있습니다.({{errCode}})",
         "str_err_999": "이메일과 비밀번호를 다시 확인해 주세요. ({{errCode}})",
@@ -2166,7 +2167,7 @@
         "str_1197": "$t(str_channel_title)을 입력해 주세요",
         "str_pg_title_episode_subtitle": "자막 설정",
         "str_1198": "연령등급 라벨",
-        "str_1200": "정보를 표시하기에 적합한 나이가 아닙니다",
+        "str_1200": "정보를 표시하기에 적합한 나이가 아닙니다.",
         "str_1201": "정보 및 콘텐츠를 표시하기에 적합한 나이가 아닙니다.\n다시 본인 인증을 수행하고 싶으시다면, 하단의 [본인 인증] 버튼을 눌러주세요.",
         "str_1202": "구독자에게 보여질 연령제한 표시입니다.\n작품 라벨 관리에서 추가하신 연령 제한 라벨을 선택해주세요.",
         "str_1203": "연령등급 라벨을 선택해주세요.",
@@ -2437,7 +2438,7 @@
         "str_all_channel_subscriptions": "모든 채널 구독 내역",
         "str_1397": "프로필ID가 복사되었습니다.",
         "str_1398": "영상을 제공할 수 있는 가장 높은 화질을 설정합니다.",
-        "str_err_1399": "영상 준비 도중 오류가 발생하였습니다. 해당 영상을 삭제하신 후 다시 업로드해 주세요.",
+        "str_err_1399": "영상 파일 처리 도중 오류가 발생하였습니다.\n해당 영상을 삭제하신 후 다시 업로드해 주세요.",
         "str_1400": "1. 개인정보를 제공받는 자 : 상품 및 서비스 판매자\n2. 제공하는 개인정보 항목 : 이름, 회원 아이디(이메일), 상품 구매정보, 결제수단",
         "str_1401": "채널 소개",
         "str_1402": "$t(str_order)자 이름",
@@ -2449,7 +2450,7 @@
         "str_event_location_detail_c1": "$t(str_papp_vod_id)",
         "str_event_location_detail_c2": "$t(str_papp_vodp_id)",
         "str_event_location_detail_e1": "$t(str_papp_cbooking_id)",
-        "str_str_msg_type_system_subs_prod_create": "{{performer}} ({{performer_name}})가 {{location}}에서 {{resource_name}}({{resource_title}})을(를) {{action}}하였습니다.",
+        "str_msg_type_system_subs_prod_create": "{{performer}} ({{performer_name}})가 {{location}}에서 {{resource_name}}({{resource_title}})을(를) {{action}}하였습니다.",
         "str_err_1403": "$t(str_link)에는 반드시 1개 이상의 $t(str_subs_product)이 연결되어 있어야 합니다. ({{errCode}})",
         "str_event_action_create": "생성",
         "str_event_action_update": "변경",
@@ -2472,6 +2473,39 @@
         "str_1409": "채널 생성 중단",
         "str_pg_title_papp_scommunity_post_update": "게시글 수정",
         "str_pg_title_papp_freeboard_post_update": "게시글 수정",
-        "str_resolution_auto": "자동"
+        "str_resolution_auto": "자동",
+        "str_1412": "표시용 문구를 수정해 주세요.",
+        "str_1413": "구독상품 생성 중단",
+        "str_papp_vodp_episode_list": "에피소드 목록",
+        "str_pam_sls_live_chat_msg": "라이브 채팅 메세지",
+        "str_pam_sls_broadcast_recording": "방송 녹화",
+        "str_pam_sls_broadcast_history": "방송 기록",
+        "str_pam_sls_live_chat_room": "라이브 채팅방",
+        "str_pam_sls_live_chat_banned_user": "라이브 채팅방에서 차단된 구독자",
+        "str_err_1414": "링크 키워드는 영문으로만 입력 가능합니다.",
+        "str_pam_sls_live_status_create": "방송 예약",
+        "str_pam_sls_live_status_standby": "방송 대기",
+        "str_pam_sls_live_status_onair": "방송중",
+        "str_pam_sls_live_status_end": "방송 종료",
+        "str_pam_sls_live_status_canceled": "방송 취소",
+        "str_1415": "처리 중...",
+        "str_1416": "자막이 성공적으로 업로드되었습니다.\n처리가 완료되면 영상에 표시됩니다. ",
+        "str_event_resource_general_ch_profile": "채널 프로필",
+        "str_event_resource_general_ch_profile_nick": "프로필 닉네임",
+        "str_event_resource_general_ch_profile_img": "프로필 이미지",
+        "str_event_resource_general_ch_info": "채널 정보",
+        "str_event_resource_general_ch_setting": "채널 설정",
+        "str_event_resource_general_ch_plan": "채널 플랜",
+        "str_event_resource_general_ch_link": "채널 링크",
+        "str_event_resource_general_subs_prod": "구독상품",
+        "str_event_resource_papp_post": "게시글",
+        "str_event_resource_papp_comment": "댓글",
+        "str_event_resource_papp_series": "시리즈",
+        "str_event_resource_papp_episode": "에피소드",
+        "str_msg_type_seller_subs_prod_create": "{{resource_name}}({{resource_title}})을(를) {{action}}하였습니다.",
+        "str_1417": "구독 주문 목록이 존재하지 않습니다.",
+        "str_1418": "본인인증 안내",
+        "str_err_1420": "자막 파일에 오류가 있습니다.",
+        "str_err_1422": "자막 파일 처리 도중 오류가 발생하였습니다.\n해당 파일을 삭제하신 후 다시 업로드해 주세요."
     }
 }

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

@@ -49,7 +49,7 @@
     "sys_text_active": "darkgreen700",
     "sys_component_base_blue": "darkblue500",
     "sys_on_base_black_opacity65": "blackopacity65",
-    "sys_component_base_04": "",
+    "sys_component_base_04": "darkgrey70",
     "sys_component_base_black": "black",
     "sys_component_base_black_opacity00": "blackopacity00",
     "ui_cpnt_editorsidebar_text_disabled": "sys_text_grey_02",
@@ -58,9 +58,12 @@
     "usr_text_brand_primary": "darkblue500",
     "usr_text_brand_on_primary": "grey900",
     "sys_text_brand_secondary_variant": "darkgreen700",
-    "sys_component_base_navy": "",
-    "sys_widget_lightgreen": "",
-    "sys_border_line_06": "",
+    "sys_component_base_navy": "darynavy500",
+    "sys_widget_lightgreen": "darklightgreen500",
+    "sys_border_line_06": "darklightgreen500",
     "sys_background_dimmed_20": "blackopacity20",
-    "sys_widget_pink": ""
+    "sys_widget_pink": "darkpink500",
+    "sys_widget_primary_opacity20": "blue500opacity20",
+    "sys_widget_secondary_variant_01": "darkgreen700",
+    "usr_component_base_brand_primary_opacity10": "blue500opacity10"
 }

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

@@ -62,5 +62,8 @@
     "sys_widget_lightgreen": "lightgreen500",
     "sys_border_line_06": "lightgreen500",
     "sys_background_dimmed_20": "blackopacity20",
-    "sys_widget_pink": "pink500"
+    "sys_widget_pink": "pink500",
+    "sys_widget_primary_opacity20": "blue500opacity20",
+    "sys_widget_secondary_variant_01": "green700",
+    "usr_component_base_brand_primary_opacity10": "blue500opacity10"
 }

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

@@ -32,5 +32,10 @@
     "grey70": "#F2F2F2",
     "navy500": "#313349",
     "lightgreen500": "#32d64c",
-    "pink500": "#FB3A63"
+    "pink500": "#FB3A63",
+    "darkgrey70": "#303032",
+    "darknavy500": "#282A3C",
+    "darkpink500": "#ED3058",
+    "darklightgreen500": "#24C43D",
+    "opacity10": "1A"
 }

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

@@ -9,7 +9,7 @@
     "ui_cpnt_button_line_base_hover": "sys_component_base_01",
     "ui_cpnt_button_line_border_default": "sys_border_line_01",
     "ui_cpnt_button_line_border_enabled": "sys_border_line_02",
-    "ui_cpnt_button_line_border_disabled": "sys_border_line_02",
+    "ui_cpnt_button_line_border_disabled": "sys_border_line_01",
     "ui_cpnt_button_line_border_primary": "usr_brand_primary",
     "ui_cpnt_button_text_primary": "usr_brand_primary",
     "ui_cpnt_button_text_on_primary": "usr_on_brand_primary",
@@ -147,9 +147,9 @@
     "ui_cpnt_selcontrols_text_disabled": "sys_text_grey_03",
     "ui_cpnt_selcontrols_text_default": "sys_text_grey_02",
     "ui_cpnt_selcontrols_icon_on_base_hover": "sys_on_base_white_opacity30",
-    "ui_cpnt_contextmenu_base_normal": "sys_component_base_white_opacity00",
-    "ui_cpnt_contextmenu_base_hover": "sys_component_base_01",
-    "ui_cpnt_contextmenu_base_selected": "sys_component_base_01",
+    "ui_cpnt_contextmenu_menu_base_normal": "sys_component_base_white_opacity00",
+    "ui_cpnt_contextmenu_menu_base_hover": "sys_component_base_01",
+    "ui_cpnt_contextmenu_menu_base_selected": "sys_component_base_01",
     "ui_cpnt_contextmenu_text": "sys_text_grey_01",
     "ui_cpnt_selcontrols_base_off": "sys_widget_grey_03",
     "ui_cpnt_selcontrols_base_on": "sys_widget_lightgreen",
@@ -226,7 +226,7 @@
     "ui_cpnt_modal_body_base": "sys_component_base_01",
     "ui_cpnt_modal_header_icon_02": "sys_widget_grey_02",
     "ui_cpnt_selectcard_base_selected": "sys_component_base_blue",
-    "ui_cpnt_selectcard_base_default": "sys_component_base_02",
+    "ui_cpnt_selectcard_base_default": "sys_component_base_01",
     "ui_cpnt_selectcard_icon_default": "sys_widget_grey_01",
     "ui_cpnt_selectcard_icon_selected": "sys_widget_white",
     "ui_cpnt_selectcard_text_01": "sys_text_grey_01",
@@ -302,5 +302,32 @@
     "ui_cpnt_list_text_body": "sys_text_grey_02",
     "ui_cpnt_card_icon_background_01": "sys_widget_primary_01",
     "ui_cpnt_card_icon_background_02": "sys_widget_pink",
-    "ui_cpnt_card_icon_background_03": "sys_widget_success_01"
+    "ui_cpnt_card_icon_background_03": "sys_widget_success_01",
+    "ui_cpnt_bannerslide_gradient_1": "sys_component_base_black",
+    "ui_cpnt_bannerslide_gradient_2": "sys_component_base_black_opacity00",
+    "ui_cpnt_modal_gradient_1": "sys_component_base_black_opacity00",
+    "ui_cpnt_modal_gradient_2": "sys_component_base_black",
+    "ui_cpnt_list_icon_04": "sys_widget_white",
+    "ui_cpnt_list_thumbnail_border": "sys_border_line_01",
+    "ui_cpnt_list_thumbnail_gradient_1": "sys_component_base_black",
+    "ui_cpnt_list_thumbnail_gradient_2": "sys_component_base_black_opacity00",
+    "ui_cpnt_list_base_area_active": "sys_component_base_01",
+    "ui_cpnt_contextmenu_base": "sys_component_base_02",
+    "ui_cpnt_videoplayer_gradient_1": "sys_component_base_black",
+    "ui_cpnt_videoplayer_gradient_2": "sys_component_base_black_opacity00",
+    "ui_cpnt_videoplayer_overlay": "sys_component_base_black_opacity50",
+    "ui_globalmenucontainer_background": "sys_container_background_01",
+    "ui_pagemenucontainer_background": "sys_container_background_01",
+    "ui_submenucontainer_background": "sys_container_background_01",
+    "ui_tabmenucontainer_background": "sys_container_background_01",
+    "ui_contentscontainer01_background": "sys_container_background_01",
+    "ui_contentscontainer02_background": "sys_container_background_01",
+    "ui_cpnt_bannerslide_icon_01": "sys_widget_white",
+    "ui_cpnt_card_shadow": "sys_widget_primary_opacity20",
+    "ui_cpnt_bannerslide_pagination_active": "sys_widget_white",
+    "ui_cpnt_bannerslide_pagination_inactive": "sys_widget_grey_02",
+    "ui_cpnt_icon_usr_brandprimary": "usr_brand_primary",
+    "ui_container_divider": "sys_border_line_01",
+    "ui_area_divider": "sys_border_line_01",
+    "ui_cpnt_list_base_area_seller": "usr_component_base_brand_primary_opacity10"
 }

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

@@ -64,6 +64,9 @@ declare const colorSet: {
         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;
     };
     readonly PaletteColor_Dark: {
         sys_container_background_01: string;
@@ -130,6 +133,9 @@ declare const colorSet: {
         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;
     };
     readonly SemanticColor: {
         blue500: string;
@@ -166,6 +172,11 @@ declare const colorSet: {
         navy500: string;
         lightgreen500: string;
         pink500: string;
+        darkgrey70: string;
+        darknavy500: string;
+        darkpink500: string;
+        darklightgreen500: string;
+        opacity10: string;
     };
     readonly UIColor: {
         ui_cpnt_button_fill_base_primary: string;
@@ -316,9 +327,9 @@ declare const colorSet: {
         ui_cpnt_selcontrols_text_disabled: string;
         ui_cpnt_selcontrols_text_default: string;
         ui_cpnt_selcontrols_icon_on_base_hover: string;
-        ui_cpnt_contextmenu_base_normal: string;
-        ui_cpnt_contextmenu_base_hover: string;
-        ui_cpnt_contextmenu_base_selected: string;
+        ui_cpnt_contextmenu_menu_base_normal: string;
+        ui_cpnt_contextmenu_menu_base_hover: string;
+        ui_cpnt_contextmenu_menu_base_selected: string;
         ui_cpnt_contextmenu_text: string;
         ui_cpnt_selcontrols_base_off: string;
         ui_cpnt_selcontrols_base_on: string;
@@ -472,6 +483,33 @@ declare const colorSet: {
         ui_cpnt_card_icon_background_01: string;
         ui_cpnt_card_icon_background_02: string;
         ui_cpnt_card_icon_background_03: string;
+        ui_cpnt_bannerslide_gradient_1: string;
+        ui_cpnt_bannerslide_gradient_2: string;
+        ui_cpnt_modal_gradient_1: string;
+        ui_cpnt_modal_gradient_2: string;
+        ui_cpnt_list_icon_04: string;
+        ui_cpnt_list_thumbnail_border: string;
+        ui_cpnt_list_thumbnail_gradient_1: string;
+        ui_cpnt_list_thumbnail_gradient_2: string;
+        ui_cpnt_list_base_area_active: string;
+        ui_cpnt_contextmenu_base: string;
+        ui_cpnt_videoplayer_gradient_1: string;
+        ui_cpnt_videoplayer_gradient_2: string;
+        ui_cpnt_videoplayer_overlay: string;
+        ui_globalmenucontainer_background: string;
+        ui_pagemenucontainer_background: string;
+        ui_submenucontainer_background: string;
+        ui_tabmenucontainer_background: string;
+        ui_contentscontainer01_background: string;
+        ui_contentscontainer02_background: string;
+        ui_cpnt_bannerslide_icon_01: string;
+        ui_cpnt_card_shadow: string;
+        ui_cpnt_bannerslide_pagination_active: string;
+        ui_cpnt_bannerslide_pagination_inactive: string;
+        ui_cpnt_icon_usr_brandprimary: string;
+        ui_container_divider: string;
+        ui_area_divider: string;
+        ui_cpnt_list_base_area_seller: string;
     };
 };
 export default colorSet;

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

@@ -147,9 +147,9 @@ export interface UITheme {
     ui_cpnt_selcontrols_text_disabled: string;
     ui_cpnt_selcontrols_text_default: string;
     ui_cpnt_selcontrols_icon_on_base_hover: string;
-    ui_cpnt_contextmenu_base_normal: string;
-    ui_cpnt_contextmenu_base_hover: string;
-    ui_cpnt_contextmenu_base_selected: string;
+    ui_cpnt_contextmenu_menu_base_normal: string;
+    ui_cpnt_contextmenu_menu_base_hover: string;
+    ui_cpnt_contextmenu_menu_base_selected: string;
     ui_cpnt_contextmenu_text: string;
     ui_cpnt_selcontrols_base_off: string;
     ui_cpnt_selcontrols_base_on: string;
@@ -303,4 +303,31 @@ export interface UITheme {
     ui_cpnt_card_icon_background_01: string;
     ui_cpnt_card_icon_background_02: string;
     ui_cpnt_card_icon_background_03: string;
+    ui_cpnt_bannerslide_gradient_1: string;
+    ui_cpnt_bannerslide_gradient_2: string;
+    ui_cpnt_modal_gradient_1: string;
+    ui_cpnt_modal_gradient_2: string;
+    ui_cpnt_list_icon_04: string;
+    ui_cpnt_list_thumbnail_border: string;
+    ui_cpnt_list_thumbnail_gradient_1: string;
+    ui_cpnt_list_thumbnail_gradient_2: string;
+    ui_cpnt_list_base_area_active: string;
+    ui_cpnt_contextmenu_base: string;
+    ui_cpnt_videoplayer_gradient_1: string;
+    ui_cpnt_videoplayer_gradient_2: string;
+    ui_cpnt_videoplayer_overlay: string;
+    ui_globalmenucontainer_background: string;
+    ui_pagemenucontainer_background: string;
+    ui_submenucontainer_background: string;
+    ui_tabmenucontainer_background: string;
+    ui_contentscontainer01_background: string;
+    ui_contentscontainer02_background: string;
+    ui_cpnt_bannerslide_icon_01: string;
+    ui_cpnt_card_shadow: string;
+    ui_cpnt_bannerslide_pagination_active: string;
+    ui_cpnt_bannerslide_pagination_inactive: string;
+    ui_cpnt_icon_usr_brandprimary: string;
+    ui_container_divider: string;
+    ui_area_divider: string;
+    ui_cpnt_list_base_area_seller: string;
 }

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

@@ -3,7 +3,7 @@ export declare type ContentsContainerProps = {
     stepContent?: JSX.Element;
     content1?: JSX.Element;
     content2?: JSX.Element;
-    layoutType: 'WFA_1' | 'WFB_1' | 'WFC_1' | 'WFD_1' | 'WFD_2' | 'WFE_1';
+    layoutType: 'WFA_1' | 'WFB_1' | 'WFC_1' | 'WFD_1' | 'WFD_2' | 'WFE_1' | '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';
     containerColor?: string;
     areaColor?: string;
 };

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

@@ -13,7 +13,23 @@ var ContentsContainer = function (_a) {
         WFC_1: react_1.default.createElement(variation_1.WFC, { content1: content1, containerColor: containerColor, areaColor: areaColor }),
         WFD_1: (react_1.default.createElement(variation_1.WFD, { layoutType: "WFD_1", content1: content1, containerColor: containerColor, areaColor: areaColor })),
         WFD_2: (react_1.default.createElement(variation_1.WFD, { layoutType: "WFD_2", content1: content1, containerColor: containerColor, areaColor: areaColor })),
-        WFE_1: (react_1.default.createElement(variation_1.WFE, { stepContent: stepContent, content1: content1, containerColor: containerColor, areaColor: areaColor }))
+        WFE_1: (react_1.default.createElement(variation_1.WFE, { stepContent: stepContent, content1: content1, containerColor: containerColor, areaColor: areaColor })),
+        WFF_1: react_1.default.createElement(variation_1.WFF, { content1: content1, containerColor: containerColor, areaColor: areaColor }),
+        WFG_1: (react_1.default.createElement(variation_1.WFG, { layoutType: "WFG_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
+        WFG_2: (react_1.default.createElement(variation_1.WFG, { layoutType: "WFG_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
+        WFG_3: (react_1.default.createElement(variation_1.WFG, { layoutType: "WFG_3", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
+        WFG_4: (react_1.default.createElement(variation_1.WFG, { layoutType: "WFG_4", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
+        WFG_5: (react_1.default.createElement(variation_1.WFG, { layoutType: "WFG_5", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
+        WFG_6: (react_1.default.createElement(variation_1.WFG, { layoutType: "WFG_6", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
+        WFH_1: react_1.default.createElement(variation_1.WFH, { content1: content1, containerColor: containerColor, areaColor: areaColor }),
+        WFI_1: (react_1.default.createElement(variation_1.WFI, { layoutType: "WFI_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
+        WFI_2: (react_1.default.createElement(variation_1.WFI, { layoutType: "WFI_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
+        WFI_3: (react_1.default.createElement(variation_1.WFI, { layoutType: "WFI_3", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
+        WFI_4: (react_1.default.createElement(variation_1.WFI, { layoutType: "WFI_4", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
+        WFI_5: (react_1.default.createElement(variation_1.WFI, { layoutType: "WFI_5", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
+        WFI_6: (react_1.default.createElement(variation_1.WFI, { layoutType: "WFI_6", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
+        WFJ_1: react_1.default.createElement(variation_1.WFJ, { content1: content1, containerColor: containerColor, areaColor: areaColor }),
+        WFK_1: (react_1.default.createElement(variation_1.WFK, { content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor }))
     }[layoutType]));
 };
 exports.default = ContentsContainer;

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

@@ -17,7 +17,10 @@ var WFA = function (_a) {
         react_1.default.createElement(S_ContentsArea, { areaColor: areaColor },
             react_1.default.createElement(S_Content1, null, content1))));
 };
-var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: flex-start;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  min-width: 1200px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"], ["\n  align-items: flex-start;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  min-width: 1200px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"])), function (_a) {
+var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  min-width: 1200px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"], ["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  min-width: 1200px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_contentscontainer01_background;
+}, function (_a) {
     var containerColor = _a.containerColor;
     return "background-color: " + containerColor;
 });

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

@@ -18,7 +18,10 @@ var WFB = function (_a) {
             react_1.default.createElement(S_Content1, null, content1),
             react_1.default.createElement(S_Content2, null, content2))));
 };
-var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: flex-start;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  min-width: 1200px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"], ["\n  align-items: flex-start;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  min-width: 1200px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"])), function (_a) {
+var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  min-width: 1200px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"], ["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  min-width: 1200px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_contentscontainer01_background;
+}, function (_a) {
     var containerColor = _a.containerColor;
     return "background-color: " + containerColor;
 });

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

@@ -15,7 +15,10 @@ var WFC = function (_a) {
         react_1.default.createElement(S_ContentsArea, { areaColor: areaColor },
             react_1.default.createElement(S_Content1, null, content1))));
 };
-var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"], ["\n  box-sizing: border-box;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"])), function (_a) {
+var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"], ["\n  background-color: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_contentscontainer01_background;
+}, function (_a) {
     var containerColor = _a.containerColor;
     return "background-color: " + containerColor;
 });

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

@@ -15,7 +15,10 @@ var WFD = function (_a) {
         react_1.default.createElement(S_ContentsArea, { layoutType: layoutType, areaColor: areaColor },
             react_1.default.createElement(S_Content1, { layoutType: layoutType }, content1))));
 };
-var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  ", ";\n  ", ";\n"], ["\n  box-sizing: border-box;\n  ", ";\n  ", ";\n"])), function (_a) {
+var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  box-sizing: border-box;\n  ", ";\n  ", ";\n"], ["\n  background-color: ", ";\n  box-sizing: border-box;\n  ", ";\n  ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_contentscontainer01_background;
+}, function (_a) {
     var layoutType = _a.layoutType;
     return ({
         WFD_1: 'height: 100%;',

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

@@ -17,7 +17,10 @@ var WFE = function (_a) {
         react_1.default.createElement(S_ContentsArea, { areaColor: areaColor },
             react_1.default.createElement(S_Content1, null, content1))));
 };
-var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: flex-start;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  min-width: 1200px;\n  ", ";\n"], ["\n  align-items: flex-start;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  min-width: 1200px;\n  ", ";\n"])), function (_a) {
+var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  min-width: 1200px;\n  ", ";\n"], ["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  min-width: 1200px;\n  ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_contentscontainer01_background;
+}, function (_a) {
     var containerColor = _a.containerColor;
     return "background-color: " + containerColor;
 });

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare type WFFProps = {
+    content1?: JSX.Element;
+    containerColor?: string;
+    areaColor?: string;
+};
+declare const WFF: ({ content1, containerColor, areaColor }: WFFProps) => JSX.Element;
+export default WFF;

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

@@ -0,0 +1,31 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var WFF = function (_a) {
+    var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor;
+    return (react_1.default.createElement(S_ContentsContainer, { containerColor: containerColor },
+        react_1.default.createElement(S_ContentsArea, { areaColor: areaColor },
+            react_1.default.createElement(S_Content1, null, content1))));
+};
+var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  padding-left: 24px;\n  ", ";\n"], ["\n  background-color: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  padding-left: 24px;\n  ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_contentscontainer01_background;
+}, function (_a) {
+    var containerColor = _a.containerColor;
+    return "background-color: " + containerColor;
+});
+var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  max-width: 720px;\n  min-width: 512px;\n  padding-bottom: 88px;\n  padding-top: 24px;\n  width: 53%;\n  ", ";\n"], ["\n  box-sizing: border-box;\n  max-width: 720px;\n  min-width: 512px;\n  padding-bottom: 88px;\n  padding-top: 24px;\n  width: 53%;\n  ", ";\n"])), function (_a) {
+    var areaColor = _a.areaColor;
+    return "background-color: " + areaColor;
+});
+var S_Content1 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 100%;\n"], ["\n  height: 100%;\n"])));
+exports.default = WFF;
+var templateObject_1, templateObject_2, templateObject_3;

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export declare type WFGProps = {
+    content1?: JSX.Element;
+    content2?: JSX.Element;
+    layoutType: 'WFG_1' | 'WFG_2' | 'WFG_3' | 'WFG_4' | 'WFG_5' | 'WFG_6';
+    containerColor?: string;
+    areaColor?: string;
+};
+declare const WFG: ({ content1, content2, layoutType, containerColor, areaColor }: WFGProps) => JSX.Element;
+export default WFG;