pds-dev-kit-web 0.3.42 → 0.3.46

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

@@ -310,7 +310,7 @@
         "str_papp_scommunity_dislike": "$t(str_dislike)",
         "str_pg_title_papp_vod_vodposts": "VOD 목록",
         "str_pg_title_papp_vod_vodpostdetail": "VOD 상세",
-        "str_pg_title_papp_scommunity_posts": "소셜 게시판",
+        "str_pg_title_papp_scommunity_posts": "피드형 게시판",
         "str_pg_title_papp_scommunity_post_detail": "게시글 상세",
         "str_pg_title_papp_scommunity_create_txt_img": "게시글 작성",
         "str_73": "$t(str_comment) 입력..",
@@ -324,7 +324,7 @@
         "str_78": "간략히 보기",
         "str_79": "게시물 게시가 완료되었습니다.",
         "str_delete": "삭제",
-        "str_edit": "수정",
+        "str_edit": "편집",
         "str_papp_scommunity_seller_option_comment_active": "$t(str_comment) 활성화",
         "str_papp_scommunity_seller_option_comment_inactive": "$t(str_comment) 비활성화",
         "str_papp_scommunity_label": "$t(str_label)",
@@ -605,7 +605,7 @@
         "str_259": "시작하기",
         "str_260": "채널에서 판매할 구독상품을 생성합니다.\n여러개의 상품을 만들어 신규 회원에게 할인 혜택을 제공하거나,\n단골 고객들이 이탈하지 않도록 해 보세요.",
         "str_261": "구독상품 기능 알아보기",
-        "str_262": "기본 정보를 입력해주세요",
+        "str_262": "기본 정보를 입력해 주세요.",
         "str_subs_product_title": "구독상품 제목",
         "str_263": "구독상품에 붙일 제목을 입력해주세요. 사용자에게는 표시되지 않습니다.",
         "str_264": "구독상품 제목 입력",
@@ -1968,7 +1968,7 @@
         "str_err_1016": "$t(str_nickname)은 특수문자를 제외하고 입력해 주세요.",
         "str_err_1017": "너무 짧습니다.",
         "str_err_1018": "$t(str_nickname)은 최소 2자, 최대 12자까지 입력 가능합니다.",
-        "str_err_1019": "이미 사용중인 아이디입니다.",
+        "str_err_1019": "이미 사용 중인 아이디입니다.",
         "str_err_1020": "$t(str_password)가 일치하지 않습니다.",
         "str_err_1021": "회원가입이 완료되었습니다.",
         "str_err_1022": "존재하지 않는 계정입니다.",
@@ -2568,8 +2568,8 @@
         "str_1456": "내용을 입력하세요.",
         "str_papp_event_live_chat_room_enter": "입장하기",
         "str_papp_event_live_event_upcoming": "예정된 이벤트",
-        "str_papp_promotion_page_id": "프로모션 페이지 pApp",
-        "str_papp_promotion_page_name": "프로모션 페이지 pApp",
+        "str_papp_promotion_page_id": "아웃링크 pApp",
+        "str_papp_promotion_page_name": "아웃링크 pApp",
         "str_pam_lpc": "LPC pAM",
         "str_pam_lpc_landing_post": "랜딩 게시글",
         "str_pam_lpc_comment": "댓글",
@@ -2673,8 +2673,8 @@
         "str_1542": "누적 접속자 수",
         "str_1543": "$t(str_papp_event_live_broadcast) 송출 정보",
         "str_1544": "시간대 설정",
-        "str_1545": "날짜(YYYY-MM-DD)",
-        "str_1546": "시간(HH:MM:SS)",
+        "str_1545": "날짜",
+        "str_1546": "시간",
         "str_1547": "날짜 선택",
         "str_1548": "시",
         "str_1549": "분",
@@ -2699,9 +2699,9 @@
         "str_pay_namespace": "네임스페이스",
         "str_1558": "게시글을 작성해 보세요.",
         "str_1559": "{{subsProdName}} (판매 중단)",
-        "str_1560": "$t(str_papp_vods_episode)관리",
-        "str_1561": "$t(str_papp_vods_series)관리",
-        "str_1562": "$t(str_settings)관리",
+        "str_1560": "$t(str_papp_vods_episode) 관리",
+        "str_1561": "$t(str_papp_vods_series) 관리",
+        "str_1562": "$t(str_settings)",
         "str_pg_title_vods_post_detail_info": "세부 설정",
         "str_pg_title_vods_episode_subtitle": "자막 설정",
         "str_papp_freeboardp_id": "커뮤니티 플러스",
@@ -2776,6 +2776,105 @@
         "str_papp_photobook_id": "포토북",
         "str_papp_photobook_board": "게시판",
         "str_papp_photobook_post": "게시글",
-        "str_papp_photobook_comment": "댓글"
+        "str_papp_photobook_comment": "댓글",
+        "str_post_title": "게시글 제목",
+        "str_1587": "게시글 제목은 최소 1자, 최대 200자까지 입력할 수 있습니다.",
+        "str_1588": "게시글의 제목을 입력해주세요.",
+        "str_1589": "이미지를 업로드 해주세요.",
+        "str_1590": "연결할 링크를 입력해주세요.",
+        "str_1591": "버튼 문구 1",
+        "str_1592": "최대 20글자까지 입력 가능합니다.",
+        "str_err_1593": "이미지는 최대 1개 업로드할 수 있습니다.({{errCode}})",
+        "str_err_1594": "내용은 최소 1자, 최대 200자까지 입력할 수 있습니다.",
+        "str_err_1595": "유효하지 않은 URL 주소입니다.",
+        "str_1596": "좋아요",
+        "str_1597": "댓글",
+        "str_1598": "{{appropriateAge}} |",
+        "str_pg_title_papp_photobook_posts": "포토북",
+        "str_1599": "좋아요",
+        "str_1600": "댓글",
+        "str_pg_title_photobook_posts": "게시글 목록",
+        "str_photobook_post": "게시글",
+        "str_papp_photobook_like": "좋아요",
+        "str_papp_photobook_dislike": "싫어요",
+        "str_pg_title_operator_manage": "운영자 관리",
+        "str_pg_title_operator_list": "운영자 목록",
+        "str_1601": "유형",
+        "str_1602": "콘텐츠 운영자",
+        "str_1603": "채널 운영자",
+        "str_1604": "아직 생성된 운영자 계정이 없습니다.",
+        "str_pg_title_papp_photobook_create_post": "게시글 작성",
+        "str_1605": "제목을 입력해주세요.",
+        "str_err_1606": "제목은 최소 1자, 최대 50자까지 입력할 수 있습니다.",
+        "str_err_1607": "내용은 최대 120자까지 입력할 수 있습니다.",
+        "str_1608": "이미지 첨부",
+        "str_1609": "이미지는 최대 10개 업로드 할 수 있고, 이미지 파일 당 최대 10MB까지 가능합니다.",
+        "str_pg_title_photobook_post_settings": "설정",
+        "str_1610": "운영자 계정 삭제",
+        "str_1611": "정말 운영자 계정을 삭제하시겠습니까?\n삭제된 계정은 복구될 수 없습니다.",
+        "str_pg_title_photobook_post_detail_info": "세부 정보",
+        "str_pg_title_photobook_comment_manage": "$t(str_comment) 관리",
+        "str_pg_title_papp_photobook_post_update": "게시글 수정",
+        "str_pg_title_papp_photobook_post_detail": "게시글 상세",
+        "str_create_operator_account": "운영자 계정 생성",
+        "str_create_operator_account_step_1": "시작하기",
+        "str_create_operator_account_step_2": "운영자 유형 선택",
+        "str_create_operator_account_step_3": "기본 정보 입력",
+        "str_create_operator_account_step_4": "관리 권한 부여",
+        "str_1612": "운영자 유형을 선택해 주세요.",
+        "str_operator_type": "운영자 유형",
+        "str_1613": "운영자 유형에 따라 관리 권한 범위가 달라집니다.\n역할에 알맞게 운영자 유형을 선택하세요. 한 번 설정한 운영자 유형은 이후 변경할 수 없습니다.",
+        "str_1614": "셀러가 허용한 범위에 한하여 채널의 전반적인 관리를 할 수 있는 운영자입니다.",
+        "str_1615": "채널의 pApp 콘텐츠와 관련된 영역에서 관리 권한을 행사할 수 있는 운영자입니다. 채널 운영자에 비해 제한적인 권한을 갖습니다.",
+        "str_outlink_papp_title_outlink": "아웃링크",
+        "str_outlink_papp_modification_record": "수정 기록",
+        "str_outlink_papp_setting": "설정",
+        "str_outlink_papp_settingposts": "$t(str_pg_title_papp_outlink)설정",
+        "str_outlink_papp_management_title_require": "아웃링크 관리용 제목*",
+        "str_1617": "새 아웃링크 1",
+        "str_outlink_papp_switch_button_phrase": "전환 버튼 문구*",
+        "str_1618": "버튼 문구 1",
+        "str_outlink_papp_outlink_url_to_switch_to": "전환할 아웃링크 URL*",
+        "str_1619": "https://",
+        "str_outlink_papp_image_preview": "아웃링크 이미지 미리보기",
+        "str_1620": "아웃링크 이미지는 모든 비율의 이미지를 업로드 할수 있습니다.\n이미지의 너비는 적어도 768px이상을 권장합니다.\n파일은 최대 30MB로 저장됩니다.",
+        "str_1621": "아이디는 최소 4자 이상, 20자 이하의 영문과 숫자, 언더스코어(_)로 입력할 수 있습니다.\n아이디는 한 번 생성한 후 변경할 수 없습니다.",
+        "str_1622": "비밀번호는 최소 8자 이상, 30자까지 입력할 수 있습니다.\n비밀번호는 영어 대소문자, 숫자, 1개 이상의 특수문자를 반드시 포함해 주세요.",
+        "str_1623": "아웃링크를 관리할 제목을 입력해주세요.",
+        "str_1624": "외부화면으로 이동하기 위한 버튼에 삽입되는 문구입니다. 최대 20자까지 입력할 수 있습니다.",
+        "str_1625": "버튼에 들어갈 문구를 입력해주세요.",
+        "str_1626": "전환될 외부 URL 주소를 입력하는 란입니다.",
+        "str_1627": "URL 주소를 입력해주세요.",
+        "str_err_1628": "유효하지 않은 주소입니다.",
+        "str_err_1629": "아이디는 최소 4자, 최대 20자까지 입력할 수 있습니다.",
+        "str_err_1630": "아이디는 영문과 숫자, 언더스코어(_)로 입력할 수 있습니다.",
+        "str_1631": "비밀번호는 최소 8자 이상, 30자까지 입력할 수 있습니다.\n비밀번호는 영어 대소문자, 숫자, 1개 이상의 특수문자를 반드시 포함해 주세요.",
+        "str_1632": "아이디 입력",
+        "str_1633": "프로필 정보",
+        "str_1634": "프로필 이미지는 정사각형으로 업로드 되어, 메뉴에서 채널의 프로필 역할을 할 수 있습니다.\n채널 프로필로 인식할 수 있도록 돕는 이미지여야 합니다.\n이미지는 JPG, JPEG 및 PNG 형식으로 업로드 할 수 있습니다.",
+        "str_1635": "닉네임은 채널에서 표시되는 이름입니다.\n닉네임은 국문과 영문으로 띄어쓰기 및 특수문자 없이 최소 2자부터 최대 12자까지 입력할 수 있습니다.",
+        "str_1636": "정보를 표시하기에 적합한 나이가 아닙니다.",
+        "str_outlink_papp_record": "기록",
+        "str_outlink_papp_management_title": "아웃링크 관리용 제목",
+        "str_outlink_papp_editdate": "수정한 날짜",
+        "str_outlink_papp_link_switched_counts": "링크 전환수",
+        "str_outlink_papp_link_url": "아웃링크 주소",
+        "str_err_1637": "이미 사용 중인 아이디입니다. 새로운 아이디를 입력해 주세요. ({{errCode}})",
+        "str_create_operator_account_step_5": "운영자 계정 생성 완료!",
+        "str_1638": "관리 권한을 부여해 주세요.",
+        "str_1639": "새 $t(str_papp_vods_series) 추가",
+        "str_1640": "$t(str_papp_vods_series) 추가",
+        "str_1641": "공개 상태의 $t(str_papp_vods_series)만 구독자에게 표시됩니다.",
+        "str_1642": "$t(str_papp_vods_series) 정보",
+        "str_1643": "설명",
+        "str_1644": "설명을 입력해주세요.",
+        "str_1645": "설명은 최소 2자, 최대 5000자까지 입력할 수 있습니다.",
+        "str_1646": "아직 추가된 $t(str_papp_vods_series)가 없습니다.\n[새 $t(str_papp_vods_series) 추가]버튼을 눌러서 작품을 추가해보세요.",
+        "str_1647": "[에피소드 추가] 버튼을 눌러 $t(str_papp_vods_series)에 에피소드를 추가하세요.",
+        "str_err_1648": "설명은 최소 2자, 최대 5000자까지 입력할 수 있습니다.",
+        "str_pg_title_promotion_post": "아웃링크",
+        "str_pg_title_promotion_post_settings": "설정",
+        "str_pg_title_promotion_post_history": "기록",
+        "str_papp_promotion_post_setting": "아웃링크 설정"
     }
 }

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

@@ -430,5 +430,11 @@
     "ui_cpnt_button_icon_darktheme_default": "sys_widget_grey_darktheme_02",
     "ui_cpnt_button_icon_darktheme_primary": "usr_widget_brand_primary_darktheme_01",
     "ui_cpnt_button_text_darktheme_default": "sys_text_grey_darktheme_02",
-    "ui_cpnt_button_text_darktheme_primary": "usr_text_brand_primary_darktheme_01"
+    "ui_cpnt_button_text_darktheme_primary": "usr_text_brand_primary_darktheme_01",
+    "ui_35": "black",
+    "ui_cpnt_button_fill_base_black_opacity50": "sys_component_base_black_opacity50",
+    "ui_cpnt_sheet_base_white": "sys_component_base_white",
+    "ui_cpnt_sheet_base_black": "sys_component_base_black",
+    "ui_cpnt_sheet_base_01": "sys_component_base_02",
+    "ui_cpnt_sheet_base_02": "sys_component_base_01"
 }

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

@@ -1,58 +1,4 @@
 declare const colorSet: {
-    readonly SemanticColor: {
-        blue500: string;
-        blue700: string;
-        blue300: string;
-        green700: string;
-        green500: string;
-        green300: string;
-        red500: string;
-        grey900: string;
-        grey500: string;
-        grey400: string;
-        grey100: string;
-        grey50: string;
-        white: string;
-        black: string;
-        darkblue500: string;
-        grey950: string;
-        darkgrey900: string;
-        darkgrey500: string;
-        darkgrey400: string;
-        darkgrey100: string;
-        darkgrey50: string;
-        darkred500: string;
-        darkgreen700: string;
-        orange500: string;
-        darkorange500: string;
-        opacity00: string;
-        opacity20: string;
-        opacity30: string;
-        opacity65: string;
-        darkgreen500: string;
-        grey70: string;
-        navy500: string;
-        lightgreen500: string;
-        pink500: string;
-        darkgrey70: string;
-        darknavy500: string;
-        darkpink500: string;
-        darklightgreen500: string;
-        opacity10: string;
-        grey600: string;
-        darkgrey600: string;
-        skyblue500: string;
-        skyblue300: string;
-        pink300: string;
-        lightpink500: string;
-        darkblue300: string;
-        darkblue700: string;
-        darkgreen300: string;
-        darkskyblue500: string;
-        navy100: string;
-        darknavy100: string;
-        opacity80: string;
-    };
     readonly PaletteColor_light: {
         sys_container_background_01: string;
         sys_container_background_02: string;
@@ -174,6 +120,60 @@ declare const colorSet: {
         usr_widget_brand_primary_darktheme_01: string;
         usr_text_brand_primary_darktheme_01: string;
     };
+    readonly SemanticColor: {
+        blue500: string;
+        blue700: string;
+        blue300: string;
+        green700: string;
+        green500: string;
+        green300: string;
+        red500: string;
+        grey900: string;
+        grey500: string;
+        grey400: string;
+        grey100: string;
+        grey50: string;
+        white: string;
+        black: string;
+        darkblue500: string;
+        grey950: string;
+        darkgrey900: string;
+        darkgrey500: string;
+        darkgrey400: string;
+        darkgrey100: string;
+        darkgrey50: string;
+        darkred500: string;
+        darkgreen700: string;
+        orange500: string;
+        darkorange500: string;
+        opacity00: string;
+        opacity20: string;
+        opacity30: string;
+        opacity65: string;
+        darkgreen500: string;
+        grey70: string;
+        navy500: string;
+        lightgreen500: string;
+        pink500: string;
+        darkgrey70: string;
+        darknavy500: string;
+        darkpink500: string;
+        darklightgreen500: string;
+        opacity10: string;
+        grey600: string;
+        darkgrey600: string;
+        skyblue500: string;
+        skyblue300: string;
+        pink300: string;
+        lightpink500: string;
+        darkblue300: string;
+        darkblue700: string;
+        darkgreen300: string;
+        darkskyblue500: string;
+        navy100: string;
+        darknavy100: string;
+        opacity80: string;
+    };
     readonly PaletteColor_Dark: {
         sys_container_background_01: string;
         sys_container_background_02: string;
@@ -728,6 +728,12 @@ declare const colorSet: {
         ui_cpnt_button_icon_darktheme_primary: string;
         ui_cpnt_button_text_darktheme_default: string;
         ui_cpnt_button_text_darktheme_primary: string;
+        ui_35: string;
+        ui_cpnt_button_fill_base_black_opacity50: string;
+        ui_cpnt_sheet_base_white: string;
+        ui_cpnt_sheet_base_black: string;
+        ui_cpnt_sheet_base_01: string;
+        ui_cpnt_sheet_base_02: string;
     };
 };
 export default colorSet;

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

@@ -4,13 +4,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 SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
 var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
 var UIColor_json_1 = __importDefault(require("./UIColor.json"));
 var colorSet = {
-    SemanticColor: SemanticColor_json_1.default,
     PaletteColor_light: PaletteColor_light_json_1.default,
+    SemanticColor: SemanticColor_json_1.default,
     PaletteColor_Dark: PaletteColor_Dark_json_1.default,
     UIColor: UIColor_json_1.default
 };

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

@@ -431,4 +431,10 @@ export interface UITheme {
     ui_cpnt_button_icon_darktheme_primary: string;
     ui_cpnt_button_text_darktheme_default: string;
     ui_cpnt_button_text_darktheme_primary: string;
+    ui_35: string;
+    ui_cpnt_button_fill_base_black_opacity50: string;
+    ui_cpnt_sheet_base_white: string;
+    ui_cpnt_sheet_base_black: string;
+    ui_cpnt_sheet_base_01: string;
+    ui_cpnt_sheet_base_02: string;
 }

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare type HeroProps = {
+    heroText: string;
+    leadText?: string;
+    leadTextColorTheme?: 'normal' | 'emphasis';
+};
+declare function Hero({ heroText, leadText, leadTextColorTheme }: HeroProps): JSX.Element;
+export default Hero;

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

@@ -0,0 +1,18 @@
+"use strict";
+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 hybrid_1 = require("../../../hybrid");
+var TextLabel_1 = require("../TextLabel");
+function Hero(_a) {
+    var heroText = _a.heroText, leadText = _a.leadText, _b = _a.leadTextColorTheme, leadTextColorTheme = _b === void 0 ? 'normal' : _b;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_h" }),
+        react_1.default.createElement(TextLabel_1.TextLabel, { styleTheme: "displayBold", colorTheme: "sysTextPrimary", text: heroText }),
+        leadText && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_f" }),
+            react_1.default.createElement(TextLabel_1.TextLabel, { styleTheme: "leadParaRegular", colorTheme: leadTextColorTheme === 'emphasis' ? 'sysTextPrimary' : 'sysTextSecondary', text: leadText })))));
+}
+exports.default = Hero;

package/dist/src/desktop/components/Hero/index.d.ts

@@ -0,0 +1 @@
+export { default as Hero } from './Hero';

package/dist/src/desktop/components/Hero/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Hero = void 0;
+var Hero_1 = require("./Hero");
+Object.defineProperty(exports, "Hero", { enumerable: true, get: function () { return __importDefault(Hero_1).default; } });

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export declare type StatusBlockProps = {
+    text?: string;
+    size?: 'large' | 'medium' | 'small';
+    state?: 'basic' | 'standby' | 'proceeding' | 'cancel' | 'end' | 'error';
+    width?: number | 'responsive';
+};
+export declare type StyleProps = {
+    $width?: number | 'responsive';
+};
+declare function StatusBlock({ text, size, state, width }: StatusBlockProps): JSX.Element;
+export default StatusBlock;

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

@@ -0,0 +1,88 @@
+"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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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 = __importStar(require("styled-components"));
+var TextLabel_1 = require("../TextLabel");
+function StatusBlock(_a) {
+    var text = _a.text, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.state, state = _c === void 0 ? 'basic' : _c, _d = _a.width, width = _d === void 0 ? 'responsive' : _d;
+    var textLabelStyleThemeObj = {
+        large: 'body1Bold',
+        medium: 'body1Bold',
+        small: 'body2Bold'
+    };
+    return (react_1.default.createElement(S_StatusBlock, { size: size, state: state, "$width": width },
+        react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textLabelStyleThemeObj[size], textAlign: "center", singleLineMode: "use", colorTheme: "sysTextWhite" })));
+}
+var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 8px;\n  height: 48px;\n"], ["\n  border-radius: 8px;\n  height: 48px;\n"])));
+var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 8px;\n  height: 40px;\n"], ["\n  border-radius: 8px;\n  height: 40px;\n"])));
+var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-radius: 8px;\n  height: 32px;\n"], ["\n  border-radius: 8px;\n  height: 32px;\n"])));
+var basic = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_statusblock_basic;
+});
+var standby = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_statusblock_standby;
+});
+var proceeding = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_statusblock_proceeding;
+});
+var cancel = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_statusblock_cancel;
+});
+var end = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_statusblock_end;
+});
+var error = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_statusblock_error;
+});
+var S_StatusBlock = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  width: ", ";\n\n  ", "\n  ", ";\n\n  & > div {\n    width: 100%;\n  }\n"], ["\n  align-items: center;\n  display: flex;\n  width: ", ";\n\n  ", "\n  ", ";\n\n  & > div {\n    width: 100%;\n  }\n"])), function (_a) {
+    var $width = _a.$width;
+    return ($width === 'responsive' ? '100%' : $width + "px");
+}, function (_a) {
+    var size = _a.size;
+    return size && { large: large, medium: medium, small: small }[size];
+}, function (_a) {
+    var state = _a.state;
+    return state &&
+        {
+            basic: basic,
+            standby: standby,
+            proceeding: proceeding,
+            cancel: cancel,
+            end: end,
+            error: error
+        }[state];
+});
+exports.default = StatusBlock;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;

package/dist/src/desktop/components/StatusBlock/index.d.ts

@@ -0,0 +1 @@
+export { default as StatusBlock } from './StatusBlock';

package/dist/src/desktop/components/StatusBlock/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatusBlock = void 0;
+var StatusBlock_1 = require("./StatusBlock");
+Object.defineProperty(exports, "StatusBlock", { enumerable: true, get: function () { return __importDefault(StatusBlock_1).default; } });

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

@@ -1,2 +1,4 @@
+import { Hero } from './Hero';
+import { StatusBlock } from './StatusBlock';
 import { TextLabel } from './TextLabel';
-export { TextLabel };
+export { Hero, StatusBlock, TextLabel };

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

@@ -1,5 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextLabel = void 0;
+exports.TextLabel = exports.StatusBlock = exports.Hero = void 0;
+var Hero_1 = require("./Hero");
+Object.defineProperty(exports, "Hero", { enumerable: true, get: function () { return Hero_1.Hero; } });
+var StatusBlock_1 = require("./StatusBlock");
+Object.defineProperty(exports, "StatusBlock", { enumerable: true, get: function () { return StatusBlock_1.StatusBlock; } });
 var TextLabel_1 = require("./TextLabel");
 Object.defineProperty(exports, "TextLabel", { enumerable: true, get: function () { return TextLabel_1.TextLabel; } });

package/dist/src/desktop/index.d.ts

@@ -9,5 +9,5 @@ import { LayoutWT } from './layout/LayoutWT';
 import { GlobalMenuContainer as WTGlobalMenuContainer } from './layout/LayoutWT/Containers';
 import { ContainersBox as WTContainersBox } from './layout/LayoutWT/ContainersBox';
 export { LayoutWT, WTGlobalMenuContainer, WTContainersBox };
-import { TextLabel as D_TextLabel } from './components';
-export { D_TextLabel };
+import { Hero as D_Hero, StatusBlock as D_StatusBlock, TextLabel as D_TextLabel } from './components';
+export { D_Hero, D_StatusBlock, D_TextLabel };

package/dist/src/desktop/index.js

@@ -2,7 +2,7 @@
 /* eslint-disable import/order */
 /* eslint-disable import/first */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.D_TextLabel = exports.WTContainersBox = exports.WTGlobalMenuContainer = exports.LayoutWT = exports.WSContainersBox = exports.WSGlobalMenuContainer = exports.LayoutWS = exports.WFContainersBox = exports.LayoutWF = void 0;
+exports.D_TextLabel = exports.D_StatusBlock = exports.D_Hero = exports.WTContainersBox = exports.WTGlobalMenuContainer = exports.LayoutWT = exports.WSContainersBox = exports.WSGlobalMenuContainer = exports.LayoutWS = exports.WFContainersBox = exports.LayoutWF = void 0;
 // layoutWF
 var LayoutWF_1 = require("./layout/LayoutWF");
 Object.defineProperty(exports, "LayoutWF", { enumerable: true, get: function () { return LayoutWF_1.LayoutWF; } });
@@ -24,4 +24,6 @@ var ContainersBox_3 = require("./layout/LayoutWT/ContainersBox");
 Object.defineProperty(exports, "WTContainersBox", { enumerable: true, get: function () { return ContainersBox_3.ContainersBox; } });
 // components
 var components_1 = require("./components");
+Object.defineProperty(exports, "D_Hero", { enumerable: true, get: function () { return components_1.Hero; } });
+Object.defineProperty(exports, "D_StatusBlock", { enumerable: true, get: function () { return components_1.StatusBlock; } });
 Object.defineProperty(exports, "D_TextLabel", { enumerable: true, get: function () { return components_1.TextLabel; } });

package/dist/src/hybrid/components/Divider/Divider.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare type DividerProps = {
+    displayType?: 'line' | 'area';
+    direction?: 'vertical' | 'horizontal';
+    height?: number;
+};
+declare function Divider({ displayType, direction, height }: DividerProps): JSX.Element;
+export default Divider;

package/dist/src/hybrid/components/Divider/Divider.js

@@ -0,0 +1,58 @@
+"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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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 = __importStar(require("styled-components"));
+function Divider(_a) {
+    var _b = _a.displayType, displayType = _b === void 0 ? 'line' : _b, _c = _a.direction, direction = _c === void 0 ? 'horizontal' : _c, height = _a.height;
+    return react_1.default.createElement(S_Divider, { displayType: displayType, "$height": height, "$direction": direction });
+}
+var horizontal = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: ", ";\n  width: 100%;\n"], ["\n  height: ", ";\n  width: 100%;\n"])), function (_a) {
+    var displayType = _a.displayType;
+    return displayType &&
+        {
+            line: '1px',
+            area: '16px'
+        }[displayType];
+});
+var vertical = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: inline-block;\n  height: ", ";\n  width: 1px;\n"], ["\n  display: inline-block;\n  height: ", ";\n  width: 1px;\n"])), function (_a) {
+    var $height = _a.$height;
+    return ($height ? $height + "px" : '100%');
+});
+var S_Divider = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  ", ";\n  ", ";\n"], ["\n  background-color: ", ";\n  ", ";\n  ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_divider;
+}, function (_a) {
+    var $direction = _a.$direction;
+    return $direction === 'horizontal' && horizontal;
+}, function (_a) {
+    var $direction = _a.$direction, displayType = _a.displayType;
+    return $direction === 'vertical' && displayType === 'line' && vertical;
+});
+exports.default = Divider;
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/src/hybrid/components/Divider/index.d.ts

@@ -0,0 +1 @@
+export { default as Divider } from './Divider';

package/dist/src/hybrid/components/Divider/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Divider = void 0;
+var Divider_1 = require("./Divider");
+Object.defineProperty(exports, "Divider", { enumerable: true, get: function () { return __importDefault(Divider_1).default; } });