pds-dev-kit-web 0.5.7 → 0.5.11

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

@@ -694,9 +694,9 @@
         "str_325": "채널 기본 정보",
         "str_326": "채널의 제목은 최소 4자, 최대 20자까지 입력할 수 있습니다.",
         "str_327": "채널 커버 이미지",
-        "str_328": "채널 커버 이미지는 모바일 웹 및 PC 웹에서 세로형으로 표시, 사용할 수 있는 이미지입니다.",
-        "str_329": "채널의 브랜드나 이미지를 표현할 수 있는 배경으로 사용됩니다.",
-        "str_330": "최대 1080x1920, 최대 2MB, JPG 및 PNG 형식으로 업로드 할 수 있습니다.",
+        "str_328": "채널 커버 이미지는 모바일 웹 및 PC 웹에서 가로형으로 표시, 사용할 수 있는 이미지입니다.",
+        "str_329": "채널 아이덴티티를 포함하는 대상이 좌측에 위치한 이미지를 권장합니다.",
+        "str_330": "최대 1920x1080, 최대 2MB, JPG 및 PNG 형식으로 업로드 할 수 있습니다.",
         "str_331": "채널 아이콘 이미지는 정사각형으로 업로드 되어 메뉴 등에서 채널의 아이콘 역할을 할 수 있습니다.",
         "str_332": "채널을 인식할 수 있도록 돕는 이미지여야 합니다.",
         "str_333": "최대 512x512, 최대 1MB, JPG 및 PNG 형식으로 업로드 할 수 있습니다.",
@@ -1769,7 +1769,7 @@
         "str_848": "국제전화번호용 할당",
         "str_849": "국제전화번호용 할당",
         "str_850": "국제전화번호용 할당",
-        "str_851": "구독자 1명 당 구독료\n₩{{price}}일 때",
+        "str_851": "구독자 1명 당 구독료\n₩{{price}}일 때,",
         "str_852": "구독자 1명 당 기대 수익 ₩{{price}}",
         "str_853": "기준 통화 설정",
         "str_854": "채널 내에서 결제가 이루어지는 모든 상황에서 기준이 되는 통화를 설정합니다.",
@@ -1811,7 +1811,7 @@
         "str_886": "1 최대 20개를 설치할 수 있으며, publ팀에 신청 시 한도를 해제합니다.\n2 회사와 용역계약 및 하도급 계약을 통해 정산하며, 특정 기간 내에 (14일~30일) 비즈니스를 시작하지 않으면 채널이 삭제될 수 있습니다.\n3 publ Store는 publ 팀이 자체적으로 운영, 관리하는 스토어로 상품관리 및 주문 관리 등을 대행합니다.",
         "str_887": "1 최대 20개를 설치할 수 있으며, publ팀에 신청 시 한도를 해제합니다.\n2 publ 표준 네이티브 앱을 클론하여 스토어에 독립적으로 출시할 수 있는 브랜디드 모바일 앱입니다.\n3 고객사 전용으로 사용할 수 있는 pApp을 개발하여 이용할 수 있게 제공합니다. 제3자가 사용할 수 없습니다.",
         "str_papp_vodp_btn_home": "홈",
-        "str_papp_vodp_btn_series": "시리즈",
+        "str_papp_vodp_btn_series": "작품",
         "str_papp_vodp_btn_series_bookmark": "내가 찜한 목록",
         "str_890": "내용은 최소 2자, 최대 2048자까지 입력할 수 있습니다.",
         "str_891": "표시 제목은 최소 2자, 최대 8자까지 입력할 수 있습니다. (공백, 특수문자 불가)",
@@ -2605,7 +2605,7 @@
         "str_papp_promotion_page_id": "아웃링크",
         "str_papp_promotion_page_name": "아웃링크",
         "str_pam_lpc": "LPC pAM",
-        "str_pam_lpc_landing_post": "랜딩 게시글",
+        "str_pam_lpc_post_landing": "랜딩 게시글",
         "str_pam_lpc_comment": "댓글",
         "str_pam_lpc_label": "라벨",
         "str_1457": "결제하기 버튼을 누르시면 추후 $t(str_refund)이 불가할 수 있습니다.",
@@ -2739,7 +2739,7 @@
         "str_pay_recipient": "발행대상",
         "str_pay_namespace": "네임스페이스",
         "str_1558": "게시글을 작성해 보세요.",
-        "str_1559": "{{subsProdName}} (판매 중단)",
+        "str_1559": "(판매 중단) {{subsProdName}}",
         "str_1560": "$t(str_papp_vods_episode) 관리",
         "str_1561": "$t(str_papp_vods_series) 관리",
         "str_1562": "$t(str_settings)",
@@ -2819,7 +2819,7 @@
         "str_papp_photobook_post": "게시글",
         "str_papp_photobook_comment": "댓글",
         "str_post_title": "게시글 제목",
-        "str_1587": "게시글 제목은 최소 1자, 최대 200자까지 입력할 수 있습니다.",
+        "str_1587": "게시글 제목은 최소 1자, 최대 100자까지 입력할 수 있습니다.",
         "str_1588": "게시글의 제목을 입력해주세요.",
         "str_1589": "이미지를 업로드 해주세요.",
         "str_1590": "연결할 링크를 입력해주세요.",
@@ -2878,7 +2878,7 @@
         "str_url_to_switch_to": "전환할 아웃링크 URL*",
         "str_1619": "https://",
         "str_image_preview": "아웃링크 이미지 미리보기",
-        "str_1620": "아웃링크 이미지는 모든 비율의 이미지를 업로드 할수 있습니다.\n이미지의 너비는 적어도 768px이상을 권장합니다.\n파일은 최대 30MB까지 업로드 가능합니다.",
+        "str_1620": "아웃링크 이미지의 너비는 적어도 768px이상을 권장하며, 파일은 최대 30MB까지 업로드 가능합니다.\n해당 이미지는 메인 화면 전면에 표시됩니다.",
         "str_1621": "아이디는 최소 4자 이상, 20자 이하의 영문과 숫자, 언더스코어(_)로 입력할 수 있습니다.\n아이디는 한 번 생성한 후 변경할 수 없습니다.",
         "str_1622": "비밀번호는 최소 8자 이상, 30자까지 입력할 수 있습니다. 비밀번호는 영어 대소문자, 숫자, 1개 이상의 특수문자를 반드시 포함해 주세요.",
         "str_1623": "아웃링크를 관리할 제목을 입력해주세요.",
@@ -3119,13 +3119,47 @@
         "str_1813": "설명 ",
         "str_err_1814": "최고 $t(str_manager)에 의해 비밀번호가 변경되었습니다. 변경된 비밀번호로 다시 로그인해 주세요. ({{errCode}})",
         "str_err_1815": "최고 $t(str_manager)에 의해 삭제된 계정입니다. 다른 계정으로 접속하거나 최고 $t(str_manager)에게 문의하세요. ({{errCode}})",
-        "str_1816": "구독자 1명 당 구독료\nUSD$ {{price}}일 때",
+        "str_1816": "구독자 1명 당 구독료\nUSD$ {{price}}일 때,",
         "str_1817": "1명 당 기대 수익",
         "str_1818": "비즈니스를 시작하려는 국가",
         "str_1819": "비즈니스의 대상이 되는 국가를 선택하세요. 선택 값에 따라 채널 내에서 결제 시에 기준이 되는 통화가 달라집니다. 대한민국을 선택하면 기준 통화를 대한민국 원으로 설정합니다. 글로벌을 선택하면 기준통화를 미국 달러로 설정합니다.",
         "str_1820": "글로벌",
         "str_fm_price_kr": "₩{{amount}}",
         "str_1821": "수익",
-        "str_1822": "*$t(str_867) 제외"
+        "str_1822": "*$t(str_867) 제외",
+        "str_1823": "답변 삭제",
+        "str_1824": "지금 구독을 해지하여도 {{expiredDate}}까지 계속 구독 항목을 이용할 수 있습니다.",
+        "str_not_now": "지금 안 함",
+        "str_1825": "이용 방법",
+        "str_1826": "본 서비스는 아래의 방법으로 이용할 수 있습니다.",
+        "str_1827": "플랫폼별 이용 안내",
+        "str_1828": "iOS 앱/안드로이드 앱/모바일 웹브라우저/PC 웹브라우저에서 이용할 수 있습니다.\nPC 웹브라우저 기준 Chrome 91 이상/Safari 13 이상, 모바일 웹브라우저 기준 Chrome(for Android) 94 이상/Safari(on iOS) 13.1 이상의 버전에서 서비스 이용에 불편함이 없도록 작동될 것을 보증합니다.",
+        "str_1829": "환불 안내",
+        "str_1830": "본 서비스는 다음의 경우 환불이 불가하니 구매 전 확인 부탁드립니다.\n1. 상품을 구매한지 7일(청약철회 기간)이 지난 경우\n2. 상품을 구매한지 7일(청약철회 기간)이 지나지 않았지만, 서비스를 이용한 경우\n3. 채널이 발행한 쿠폰이나, 이벤트 등을 통해 무상으로 유료 서비스 이용권을 받은 경우\n4. 회원이 서비스 이용으로부터 얻은 이익에 해당하는 공제 대상 금액이 회원이 실제로 결제한 금액을 초과한 경우\n5. 회원이 직접 결제하지 않은 경우",
+        "str_1831": "기타 안내",
+        "str_1832": "미성년자의 경우, 법정대리인이 구매에 동의하지 않은 경우 본인 또는 법정대리인이 구매를 취소할 수 있습니다.",
+        "str_1833": "서비스 제공자 정보",
+        "str_1834": "상호명 : {{companyName}}\n대표자 : {{businessRepresentativeName}}\n연락처 : {{email}}",
+        "str_1835": "대표자 : {{businessRepresentativeName}}\n연락처 : {{email}}",
+        "str_1836": "결제 불가",
+        "str_pg_title_papp_inquiry_board_posts": "1:1 문의 게시판",
+        "str_papp_card_news_id": "카드 뉴스",
+        "str_papp_card_news_name": "카드 뉴스",
+        "str_papp_card_news_board": "게시판",
+        "str_papp_card_news_post": "게시글",
+        "str_papp_card_news_comment": "댓글",
+        "str_papp_card_news_like": "좋아요",
+        "str_1837": "이 pApp은 모바일에서 지원하지 않습니다.\n데스크탑으로 접속해주세요.",
+        "str_papp_card_news_dislike": "싫어요",
+        "str_err_1838": "제목은 최소 1자, 최대 100자까지 입력할 수 있습니다.",
+        "str_err_1839": "전환 버튼 문구는 최대 20자까지 입력할 수 있습니다.",
+        "str_pam_community_post_qna": "질의응답 게시글",
+        "str_err_1840": "이미지는 최대 30MB까지 업로드 할 수 있습니다.({{errCode}})",
+        "str_str_papp_vod_vr_id": "OTT형 VR VOD",
+        "str_str_papp_vod_vr_name": "OTT형 VR VOD",
+        "str_1841": "아웃링크의 수정 기록 내역이 없습니다.",
+        "str_err_1842": "형식에 맞지 않는 URL 주소입니다.",
+        "str_str_pam_community_post_story": "피드형 게시글",
+        "str_str_pam_community_post_plain": "기본 게시글"
     }
 }

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

@@ -121,5 +121,7 @@
     "sys_component_base_black_opacity50": "black/opacity50",
     "sys_component_base_card": "darkgrey50",
     "sys_cpnt_textlabel_sys_brand_primary_opacity50": "blue500/opacity50",
-    "sys_widget_green_01": "darkgreen500"
+    "sys_widget_green_01": "darkgreen500",
+    "sys_component_base_black_opacity30": "black/opacity30",
+    "sys_area_background": "darkgrey50/opacity65"
 }

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

@@ -121,5 +121,7 @@
     "sys_component_base_black_opacity50": "black/opacity50",
     "sys_component_base_card": "white",
     "sys_cpnt_textlabel_sys_brand_primary_opacity50": "blue500/opacity50",
-    "sys_widget_green_01": "green500"
+    "sys_widget_green_01": "green500",
+    "sys_component_base_black_opacity30": "black/opacity30",
+    "sys_area_background": "darkgrey50/opacity65"
 }

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

@@ -444,5 +444,7 @@
     "ui_cpnt_textlabel_sys_brand_primary_opacity50": "sys_cpnt_textlabel_sys_brand_primary_opacity50",
     "ui_cpnt_progressbar_01": "sys_widget_green_01",
     "ui_cpnt_progressbar_02": "sys_widget_grey_04",
-    "ui_36": "sys_component_base_black_opacity80"
+    "ui_36": "sys_component_base_black_opacity80",
+    "ui_37": "sys_component_base_black_opacity30",
+    "ui_39": "sys_area_background"
 }

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

@@ -1,4 +1,59 @@
 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;
+        opacity50: string;
+    };
     readonly PaletteColor_light: {
         sys_container_background_01: string;
         sys_container_background_02: string;
@@ -123,6 +178,8 @@ declare const colorSet: {
         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;
     };
     readonly PaletteColor_Dark: {
         sys_container_background_01: string;
@@ -248,61 +305,8 @@ declare const colorSet: {
         sys_component_base_card: string;
         sys_cpnt_textlabel_sys_brand_primary_opacity50: string;
         sys_widget_green_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;
-        opacity50: string;
+        sys_component_base_black_opacity30: string;
+        sys_area_background: string;
     };
     readonly UIColor: {
         ui_cpnt_button_fill_base_primary: string;
@@ -751,6 +755,8 @@ declare const colorSet: {
         ui_cpnt_progressbar_01: string;
         ui_cpnt_progressbar_02: string;
         ui_36: string;
+        ui_37: string;
+        ui_39: string;
     };
 };
 export default colorSet;

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

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

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

@@ -445,4 +445,6 @@ export interface UITheme {
     ui_cpnt_progressbar_01: string;
     ui_cpnt_progressbar_02: string;
     ui_36: string;
+    ui_37: string;
+    ui_39: string;
 }

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

@@ -30,7 +30,8 @@ var styled_components_1 = __importStar(require("styled-components"));
 var components_1 = require("../../common/components");
 var IconButton_1 = require("../IconButton");
 function TextField(_a) {
-    var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, validation = _a.validation, _b = _a.validationPoint, validationPoint = _b === void 0 ? 'onBlur' : _b, _c = _a.preventBlankMode, preventBlankMode = _c === void 0 ? 'none' : _c, _d = _a.size, size = _d === void 0 ? 'large' : _d, _e = _a.textLineType, textLineType = _e === void 0 ? 'single' : _e, _f = _a.multiRows, multiRows = _f === void 0 ? 8 : _f, _g = _a.autoMinRows, autoMinRows = _g === void 0 ? 8 : _g, autoMaxRows = _a.autoMaxRows, _h = _a.inputType, inputType = _h === void 0 ? 'text' : _h, _j = _a.state, state = _j === void 0 ? 'normal' : _j, iBtn1IconName = _a.iBtn1IconName, _k = _a.iBtn1IconFillType, iBtn1IconFillType = _k === void 0 ? 'line' : _k, iBtn2IconName = _a.iBtn2IconName, _l = _a.iBtn2IconFillType, iBtn2IconFillType = _l === void 0 ? 'line' : _l, _m = _a.colorTheme, colorTheme = _m === void 0 ? 'none' : _m, max = _a.max, maxLength = _a.maxLength, min = _a.min, onBlur = _a.onBlur, onChange = _a.onChange, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onFocus = _a.onFocus, onKeyUp = _a.onKeyUp, onTarget = _a.onTarget;
+    var _b;
+    var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, validation = _a.validation, _c = _a.validationPoint, validationPoint = _c === void 0 ? 'onBlur' : _c, _d = _a.preventBlankMode, preventBlankMode = _d === void 0 ? 'none' : _d, _e = _a.size, size = _e === void 0 ? 'large' : _e, _f = _a.textLineType, textLineType = _f === void 0 ? 'single' : _f, _g = _a.multiRows, multiRows = _g === void 0 ? 8 : _g, _h = _a.autoMinRows, autoMinRows = _h === void 0 ? 8 : _h, autoMaxRows = _a.autoMaxRows, _j = _a.inputType, inputType = _j === void 0 ? 'text' : _j, _k = _a.state, state = _k === void 0 ? 'normal' : _k, iBtn1IconName = _a.iBtn1IconName, _l = _a.iBtn1IconFillType, iBtn1IconFillType = _l === void 0 ? 'line' : _l, iBtn2IconName = _a.iBtn2IconName, _m = _a.iBtn2IconFillType, iBtn2IconFillType = _m === void 0 ? 'line' : _m, _o = _a.colorTheme, colorTheme = _o === void 0 ? 'none' : _o, max = _a.max, maxLength = _a.maxLength, min = _a.min, onBlur = _a.onBlur, onChange = _a.onChange, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onFocus = _a.onFocus, onKeyUp = _a.onKeyUp, onTarget = _a.onTarget;
     var iconThemeColorNoneObj = {
         normal: 'ui_cpnt_button_icon_default',
         read_only: 'ui_cpnt_button_icon_default',
@@ -42,9 +43,9 @@ function TextField(_a) {
         disabled: 'ui_cpnt_textfield_icon_darktheme_disabled'
     };
     var t = (0, react_i18next_1.useTranslation)('translation').t;
-    var _o = (0, react_1.useState)(false), isFocused = _o[0], setIsFocused = _o[1];
-    var _p = (0, react_hook_form_1.useFormContext)(), register = _p.register, trigger = _p.trigger, errors = _p.formState.errors;
-    var _q = register(name, validation), validateOnChange = _q.onChange, validateOnBlur = _q.onBlur;
+    var _p = (0, react_1.useState)(false), isFocused = _p[0], setIsFocused = _p[1];
+    var _q = (0, react_hook_form_1.useFormContext)(), register = _q.register, trigger = _q.trigger, errors = _q.formState.errors;
+    var _r = register(name, validation), validateOnChange = _r.onChange, validateOnBlur = _r.onBlur;
     var isError = Object.keys(errors).some(function (error) { return error === name; });
     function handleFocus() {
         if (state !== 'read_only') {
@@ -107,7 +108,7 @@ function TextField(_a) {
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(S_TextFieldWrapper, { size: size, textLineType: textLineType, isFocused: isFocused, isError: isError, state: state, colorTheme: colorTheme }, S_TextField()),
-        errors[name] && react_1.default.createElement(S_Error, null, t(errors[name].message))));
+        ((_b = errors[name]) === null || _b === void 0 ? void 0 : _b.message) && react_1.default.createElement(S_Error, null, t(errors[name].message))));
 }
 var multi = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: auto;\n  padding: 14px;\n"], ["\n  height: auto;\n  padding: 14px;\n"])));
 var auto = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: auto;\n  padding-bottom: ", "px;\n  padding-top: ", "px;\n"], ["\n  height: auto;\n  padding-bottom: ", "px;\n  padding-top: ", "px;\n"])), function (_a) {
@@ -230,7 +231,7 @@ var S_TextFieldWrapper = styled_components_1.default.div(templateObject_12 || (t
         }[state];
 });
 var S_IconBox = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
-var S_Error = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-top: ", ";\n"], ["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-top: ", ";\n"])), function (_a) {
+var S_Error = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-top: ", ";\n  text-align: left;\n"], ["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-top: ", ";\n  text-align: left;\n"])), function (_a) {
     var theme = _a.theme, colorTheme = _a.colorTheme;
     return colorTheme === 'none'
         ? theme.ui_cpnt_textfield_text_error

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

@@ -247,7 +247,7 @@ var colorOverrideStyle = (0, styled_components_1.css)(templateObject_28 || (temp
     var colorOverride = _a.colorOverride;
     return colorOverride && common_1.uiColors[colorOverride];
 });
-var ellipsisStyle = (0, styled_components_1.css)(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n  -webkit-line-clamp: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  word-break: keep-all;\n"], ["\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n  -webkit-line-clamp: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  word-break: keep-all;\n"])), function (_a) {
+var ellipsisStyle = (0, styled_components_1.css)(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n  -webkit-line-clamp: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n"], ["\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n  -webkit-line-clamp: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])), function (_a) {
     var lineLimit = _a.lineLimit;
     return lineLimit;
 });

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

@@ -30,7 +30,7 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var ImageView = function (_a) {
     var src = _a.src, _b = _a.shapeType, shapeType = _b === void 0 ? 'round' : _b, _c = _a.radius, radius = _c === void 0 ? 8 : _c, width = _a.width, height = _a.height, noImageHeight = _a.noImageHeight, noImageWidth = _a.noImageWidth, _d = _a.ratio, ratio = _d === void 0 ? 'auto' : _d, _e = _a.scaleType, scaleType = _e === void 0 ? 'none' : _e, _f = _a.borderMode, borderMode = _f === void 0 ? 'none' : _f, _g = _a.backgroundFillMode, backgroundFillMode = _g === void 0 ? 'none' : _g;
-    return (react_1.default.createElement(react_1.default.Fragment, null, ratio === 'auto' ? (react_1.default.createElement(S_AutoImageViewWrapper, { "$height": height, "$width": width, noImageHeight: noImageHeight, noImageWidth: noImageWidth, borderMode: borderMode, shapeType: shapeType, radius: radius, backgroundFillMode: backgroundFillMode }, src && (react_1.default.createElement(S_AutoImageView, { src: src, "$height": height, "$width": width, scaleType: scaleType })))) : (react_1.default.createElement(S_RatioImageViewWrapper, { "$width": width, borderMode: borderMode, shapeType: shapeType, radius: radius, backgroundFillMode: backgroundFillMode },
+    return (react_1.default.createElement(react_1.default.Fragment, null, ratio === 'auto' ? (react_1.default.createElement(S_AutoImageViewWrapper, { "$height": height, "$width": width, noImageHeight: noImageHeight, noImageWidth: noImageWidth, borderMode: borderMode, shapeType: shapeType, radius: radius, backgroundFillMode: backgroundFillMode, "$src": src }, src && (react_1.default.createElement(S_AutoImageView, { src: src, "$height": height, "$width": width, scaleType: scaleType })))) : (react_1.default.createElement(S_RatioImageViewWrapper, { "$width": width, borderMode: borderMode, shapeType: shapeType, radius: radius, backgroundFillMode: backgroundFillMode },
         react_1.default.createElement(S_RatioImageView, { "$src": src, scaleType: scaleType, ratio: ratio })))));
 };
 var wrapperStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  box-sizing: border-box;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  ", ";\n  ", ";\n  ", ";\n"])), function (_a) {
@@ -82,36 +82,36 @@ var S_RatioImageView = styled_components_1.default.div(templateObject_3 || (temp
         }[ratio];
 });
 var onlyWidthWrapperStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  min-height: ", ";\n  min-width: ", ";\n  height: ", ";\n  width: ", ";\n  ", ";\n"], ["\n  min-height: ", ";\n  min-width: ", ";\n  height: ", ";\n  width: ", ";\n  ", ";\n"])), function (_a) {
-    var noImageHeight = _a.noImageHeight;
-    return (noImageHeight ? noImageHeight + "px" : 'auto');
+    var noImageHeight = _a.noImageHeight, $src = _a.$src;
+    return !$src && noImageHeight ? noImageHeight + "px" : 'auto';
 }, function (_a) {
     var $width = _a.$width;
     return ($width === 'responsive' ? '100%' : $width + "px");
 }, function (_a) {
-    var noImageHeight = _a.noImageHeight;
-    return (noImageHeight ? noImageHeight + "px" : 'auto');
+    var noImageHeight = _a.noImageHeight, $src = _a.$src;
+    return (!$src && noImageHeight ? noImageHeight + "px" : 'auto');
 }, function (_a) {
     var $width = _a.$width;
     return ($width === 'responsive' ? '100%' : $width + "px");
 }, function (_a) {
-    var theme = _a.theme, noImageHeight = _a.noImageHeight, src = _a.src;
-    return !src && noImageHeight ? "background-color: " + theme.ui_temp_grey_04 : '';
+    var theme = _a.theme, noImageHeight = _a.noImageHeight, $src = _a.$src;
+    return !$src && noImageHeight ? "background-color: " + theme.ui_temp_grey_04 : '';
 });
 var onlyHeightWrapperStyle = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  min-height: ", ";\n  min-width: ", ";\n  height: ", ";\n  width: ", ";\n  ", ";\n"], ["\n  min-height: ", ";\n  min-width: ", ";\n  height: ", ";\n  width: ", ";\n  ", ";\n"])), function (_a) {
     var $height = _a.$height;
     return ($height === 'responsive' ? '100%' : $height + "px");
 }, function (_a) {
-    var noImageWidth = _a.noImageWidth;
-    return (noImageWidth ? noImageWidth + "px" : 'auto');
+    var noImageWidth = _a.noImageWidth, $src = _a.$src;
+    return (!$src && noImageWidth ? noImageWidth + "px" : 'auto');
 }, function (_a) {
     var $height = _a.$height;
     return ($height === 'responsive' ? '100%' : $height + "px");
 }, function (_a) {
-    var noImageWidth = _a.noImageWidth;
-    return (noImageWidth ? noImageWidth + "px" : 'auto');
+    var noImageWidth = _a.noImageWidth, $src = _a.$src;
+    return (!$src && noImageWidth ? noImageWidth + "px" : 'auto');
 }, function (_a) {
-    var theme = _a.theme, noImageWidth = _a.noImageWidth, src = _a.src;
-    return !src && noImageWidth ? "background-color: " + theme.ui_temp_grey_04 : '';
+    var theme = _a.theme, noImageWidth = _a.noImageWidth, $src = _a.$src;
+    return !$src && noImageWidth ? "background-color: " + theme.ui_temp_grey_04 : '';
 });
 var bothWrapperStyle = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  min-height: ", ";\n  height: ", ";\n  min-width: ", ";\n  width: ", ";\n  ", ";\n"], ["\n  min-height: ", ";\n  height: ", ";\n  min-width: ", ";\n  width: ", ";\n  ", ";\n"])), function (_a) {
     var $height = _a.$height;
@@ -126,8 +126,8 @@ var bothWrapperStyle = (0, styled_components_1.css)(templateObject_6 || (templat
     var $width = _a.$width;
     return ($width === 'responsive' ? '100%' : $width + "px");
 }, function (_a) {
-    var theme = _a.theme, src = _a.src;
-    return (!src ? "background-color: " + theme.ui_temp_grey_04 : '');
+    var theme = _a.theme, $src = _a.$src;
+    return (!$src ? "background-color: " + theme.ui_temp_grey_04 : '');
 });
 var onlyWidthStyle = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: 100%;\n  height: auto;\n"], ["\n  width: 100%;\n  height: auto;\n"])));
 var onlyHeightStyle = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  width: auto;\n  height: 100%;\n"], ["\n  width: auto;\n  height: 100%;\n"])));

package/dist/src/mobile/components/MobileHeaderBar/MobileHeaderBar.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { FillIconNameKeys, LineIconNameKeys } from '../../../common';
+import { FillIconNameKeys, LineIconNameKeys, UiColors } from '../../../common';
 declare type Props = {
     titleType?: 'text' | 'profile' | 'image';
     titleText?: string;
@@ -7,13 +7,19 @@ declare type Props = {
     displayType?: 'none' | 'ibtn_amount1' | 'ibtn_amount2';
     iBtn1IconName?: FillIconNameKeys | LineIconNameKeys;
     iBtn1IconFillType?: 'fill' | 'line';
+    iBtn1IconColorKey?: UiColors;
     iBtn2IconName?: FillIconNameKeys | LineIconNameKeys;
     iBtn2IconFillType?: 'fill' | 'line';
+    iBtn2IconColorKey?: UiColors;
     dividerType?: 'none' | 'solid';
     imageSrc?: string;
+    iBtn1State?: 'normal' | 'disabled';
+    iBtn1Type?: 'submit' | 'reset' | 'button';
+    iBtn2State?: 'normal' | 'disabled';
+    iBtn2Type?: 'submit' | 'reset' | 'button';
     onClickLeftBtn?: () => void;
     onClickIBtn1?: () => void;
     onClickIBtn2?: () => void;
 };
-declare function MobileHeaderBar({ titleType, titleText, leftBtnMode, displayType, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, dividerType, imageSrc, onClickLeftBtn, onClickIBtn1, onClickIBtn2 }: Props): JSX.Element;
+declare function MobileHeaderBar({ titleType, titleText, leftBtnMode, displayType, iBtn1IconName, iBtn1IconFillType, iBtn1IconColorKey, iBtn2IconName, iBtn2IconFillType, iBtn2IconColorKey, dividerType, imageSrc, iBtn1State, iBtn1Type, iBtn2State, iBtn2Type, onClickLeftBtn, onClickIBtn1, onClickIBtn2 }: Props): JSX.Element;
 export default MobileHeaderBar;

package/dist/src/mobile/components/MobileHeaderBar/MobileHeaderBar.js

@@ -13,7 +13,7 @@ var hybrid_1 = require("../../../hybrid");
 var IconButton_1 = require("../IconButton");
 var TextLabel_1 = require("../TextLabel");
 function MobileHeaderBar(_a) {
-    var _b = _a.titleType, titleType = _b === void 0 ? 'text' : _b, titleText = _a.titleText, _c = _a.leftBtnMode, leftBtnMode = _c === void 0 ? 'back' : _c, _d = _a.displayType, displayType = _d === void 0 ? 'none' : _d, iBtn1IconName = _a.iBtn1IconName, _e = _a.iBtn1IconFillType, iBtn1IconFillType = _e === void 0 ? 'line' : _e, iBtn2IconName = _a.iBtn2IconName, _f = _a.iBtn2IconFillType, iBtn2IconFillType = _f === void 0 ? 'line' : _f, _g = _a.dividerType, dividerType = _g === void 0 ? 'none' : _g, imageSrc = _a.imageSrc, onClickLeftBtn = _a.onClickLeftBtn, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2;
+    var _b = _a.titleType, titleType = _b === void 0 ? 'text' : _b, titleText = _a.titleText, _c = _a.leftBtnMode, leftBtnMode = _c === void 0 ? 'back' : _c, _d = _a.displayType, displayType = _d === void 0 ? 'none' : _d, iBtn1IconName = _a.iBtn1IconName, _e = _a.iBtn1IconFillType, iBtn1IconFillType = _e === void 0 ? 'line' : _e, _f = _a.iBtn1IconColorKey, iBtn1IconColorKey = _f === void 0 ? 'ui_cpnt_button_icon_enabled' : _f, iBtn2IconName = _a.iBtn2IconName, _g = _a.iBtn2IconFillType, iBtn2IconFillType = _g === void 0 ? 'line' : _g, _h = _a.iBtn2IconColorKey, iBtn2IconColorKey = _h === void 0 ? 'ui_cpnt_button_icon_enabled' : _h, _j = _a.dividerType, dividerType = _j === void 0 ? 'none' : _j, imageSrc = _a.imageSrc, _k = _a.iBtn1State, iBtn1State = _k === void 0 ? 'normal' : _k, _l = _a.iBtn1Type, iBtn1Type = _l === void 0 ? 'button' : _l, _m = _a.iBtn2State, iBtn2State = _m === void 0 ? 'normal' : _m, _o = _a.iBtn2Type, iBtn2Type = _o === void 0 ? 'button' : _o, onClickLeftBtn = _a.onClickLeftBtn, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2;
     var getLeftIconName = function () {
         switch (leftBtnMode) {
             case 'back':
@@ -57,8 +57,8 @@ function MobileHeaderBar(_a) {
             return react_1.default.createElement("div", null);
         }
         return (react_1.default.createElement(S_IBtnBox, null,
-            displayType === 'ibtn_amount2' && iBtn2IconName && (react_1.default.createElement(IconButton_1.IconButton, { iconSize: 24, baseSize: "large", iconName: iBtn2IconName, fillType: "fill", onClick: onClickIBtn2, iconFillType: iBtn2IconFillType, iconColorKey: "ui_cpnt_button_icon_enabled", baseColorKey: "ui_cpnt_button_fill_base_transparent" })),
-            (displayType === 'ibtn_amount1' || displayType === 'ibtn_amount2') && iBtn1IconName && (react_1.default.createElement(IconButton_1.IconButton, { iconSize: 24, baseSize: "large", iconName: iBtn1IconName, fillType: "fill", onClick: onClickIBtn1, iconFillType: iBtn1IconFillType, iconColorKey: "ui_cpnt_button_icon_enabled", baseColorKey: "ui_cpnt_button_fill_base_transparent" }))));
+            displayType === 'ibtn_amount2' && iBtn2IconName && (react_1.default.createElement(IconButton_1.IconButton, { iconSize: 24, baseSize: "large", iconName: iBtn2IconName, fillType: "fill", onClick: onClickIBtn2, iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey, baseColorKey: "ui_cpnt_button_fill_base_transparent", type: iBtn2Type, state: iBtn2State })),
+            (displayType === 'ibtn_amount1' || displayType === 'ibtn_amount2') && iBtn1IconName && (react_1.default.createElement(IconButton_1.IconButton, { iconSize: 24, baseSize: "large", iconName: iBtn1IconName, fillType: "fill", onClick: onClickIBtn1, iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, baseColorKey: "ui_cpnt_button_fill_base_transparent", type: iBtn1Type, state: iBtn1State }))));
     };
     return (react_1.default.createElement(S_MobileHeaderBar, { hasBorder: dividerType === 'solid', expand: titleType === 'profile' },
         react_1.default.createElement(S_ButtonWrapper, null,

package/dist/src/mobile/components/TextField/TextField.js

@@ -30,7 +30,8 @@ var styled_components_1 = __importStar(require("styled-components"));
 var components_1 = require("../../common/components");
 var IconButton_1 = require("../IconButton");
 function TextField(_a) {
-    var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, validation = _a.validation, _b = _a.validationPoint, validationPoint = _b === void 0 ? 'onBlur' : _b, _c = _a.preventBlankMode, preventBlankMode = _c === void 0 ? 'none' : _c, _d = _a.size, size = _d === void 0 ? 'large' : _d, _e = _a.textLineType, textLineType = _e === void 0 ? 'single' : _e, _f = _a.multiRows, multiRows = _f === void 0 ? 8 : _f, _g = _a.autoMinRows, autoMinRows = _g === void 0 ? 8 : _g, autoMaxRows = _a.autoMaxRows, _h = _a.inputType, inputType = _h === void 0 ? 'text' : _h, _j = _a.state, state = _j === void 0 ? 'normal' : _j, iBtn1IconName = _a.iBtn1IconName, _k = _a.iBtn1IconFillType, iBtn1IconFillType = _k === void 0 ? 'line' : _k, iBtn2IconName = _a.iBtn2IconName, _l = _a.iBtn2IconFillType, iBtn2IconFillType = _l === void 0 ? 'line' : _l, _m = _a.colorTheme, colorTheme = _m === void 0 ? 'none' : _m, max = _a.max, maxLength = _a.maxLength, min = _a.min, onBlur = _a.onBlur, onChange = _a.onChange, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onFocus = _a.onFocus, onKeyUp = _a.onKeyUp, onTarget = _a.onTarget;
+    var _b;
+    var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, validation = _a.validation, _c = _a.validationPoint, validationPoint = _c === void 0 ? 'onBlur' : _c, _d = _a.preventBlankMode, preventBlankMode = _d === void 0 ? 'none' : _d, _e = _a.size, size = _e === void 0 ? 'large' : _e, _f = _a.textLineType, textLineType = _f === void 0 ? 'single' : _f, _g = _a.multiRows, multiRows = _g === void 0 ? 8 : _g, _h = _a.autoMinRows, autoMinRows = _h === void 0 ? 8 : _h, autoMaxRows = _a.autoMaxRows, _j = _a.inputType, inputType = _j === void 0 ? 'text' : _j, _k = _a.state, state = _k === void 0 ? 'normal' : _k, iBtn1IconName = _a.iBtn1IconName, _l = _a.iBtn1IconFillType, iBtn1IconFillType = _l === void 0 ? 'line' : _l, iBtn2IconName = _a.iBtn2IconName, _m = _a.iBtn2IconFillType, iBtn2IconFillType = _m === void 0 ? 'line' : _m, _o = _a.colorTheme, colorTheme = _o === void 0 ? 'none' : _o, max = _a.max, maxLength = _a.maxLength, min = _a.min, onBlur = _a.onBlur, onChange = _a.onChange, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onFocus = _a.onFocus, onKeyUp = _a.onKeyUp, onTarget = _a.onTarget;
     var iconThemeColorNoneObj = {
         normal: 'ui_cpnt_button_icon_default',
         read_only: 'ui_cpnt_button_icon_default',
@@ -42,9 +43,9 @@ function TextField(_a) {
         disabled: 'ui_cpnt_textfield_icon_darktheme_disabled'
     };
     var t = (0, react_i18next_1.useTranslation)('translation').t;
-    var _o = (0, react_1.useState)(false), isFocused = _o[0], setIsFocused = _o[1];
-    var _p = (0, react_hook_form_1.useFormContext)(), register = _p.register, trigger = _p.trigger, errors = _p.formState.errors;
-    var _q = register(name, validation), validateOnChange = _q.onChange, validateOnBlur = _q.onBlur;
+    var _p = (0, react_1.useState)(false), isFocused = _p[0], setIsFocused = _p[1];
+    var _q = (0, react_hook_form_1.useFormContext)(), register = _q.register, trigger = _q.trigger, errors = _q.formState.errors;
+    var _r = register(name, validation), validateOnChange = _r.onChange, validateOnBlur = _r.onBlur;
     var isError = Object.keys(errors).some(function (error) { return error === name; });
     function handleFocus() {
         if (state !== 'read_only') {
@@ -107,7 +108,7 @@ function TextField(_a) {
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(S_TextFieldWrapper, { size: size, textLineType: textLineType, isFocused: isFocused, isError: isError, state: state, colorTheme: colorTheme }, S_TextField()),
-        errors[name] && react_1.default.createElement(S_Error, null, t(errors[name].message))));
+        ((_b = errors[name]) === null || _b === void 0 ? void 0 : _b.message) && react_1.default.createElement(S_Error, null, t(errors[name].message))));
 }
 var multi = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: auto;\n  padding: 14px;\n"], ["\n  height: auto;\n  padding: 14px;\n"])));
 var auto = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: auto;\n  padding-bottom: ", "px;\n  padding-top: ", "px;\n"], ["\n  height: auto;\n  padding-bottom: ", "px;\n  padding-top: ", "px;\n"])), function (_a) {
@@ -230,7 +231,7 @@ var S_TextFieldWrapper = styled_components_1.default.div(templateObject_12 || (t
         }[state];
 });
 var S_IconBox = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
-var S_Error = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-top: ", ";\n"], ["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-top: ", ";\n"])), function (_a) {
+var S_Error = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-top: ", ";\n  text-align: left;\n"], ["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-top: ", ";\n  text-align: left;\n"])), function (_a) {
     var theme = _a.theme, colorTheme = _a.colorTheme;
     return colorTheme === 'none'
         ? theme.ui_cpnt_textfield_text_error

package/dist/src/mobile/components/TextLabel/TextLabel.js

@@ -247,7 +247,7 @@ var colorOverrideStyle = (0, styled_components_1.css)(templateObject_28 || (temp
     var colorOverride = _a.colorOverride;
     return colorOverride && common_1.uiColors[colorOverride];
 });
-var ellipsisStyle = (0, styled_components_1.css)(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n  -webkit-line-clamp: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  word-break: keep-all;\n"], ["\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n  -webkit-line-clamp: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  word-break: keep-all;\n"])), function (_a) {
+var ellipsisStyle = (0, styled_components_1.css)(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n  -webkit-line-clamp: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n"], ["\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n  -webkit-line-clamp: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])), function (_a) {
     var lineLimit = _a.lineLimit;
     return lineLimit;
 });

package/dist/src/mobile/layout/LayoutMF/Containers/ContentsContainer/variation/MFA.js

@@ -22,7 +22,7 @@ var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (t
     var containerColor = _a.containerColor;
     return "background-color: " + containerColor;
 });
-var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  max-width: 768px;\n  min-width: 360px;\n  padding-bottom: 88px;\n  ", ";\n"], ["\n  max-width: 768px;\n  min-width: 360px;\n  padding-bottom: 88px;\n  ", ";\n"])), function (_a) {
+var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: 0 auto;\n  max-width: 768px;\n  min-width: 360px;\n  padding-bottom: 88px;\n  ", ";\n"], ["\n  margin: 0 auto;\n  max-width: 768px;\n  min-width: 360px;\n  padding-bottom: 88px;\n  ", ";\n"])), function (_a) {
     var areaColor = _a.areaColor;
     return "background-color: " + areaColor;
 });

package/dist/src/mobile/layout/LayoutMF/Containers/ContentsContainer/variation/MFB.js

@@ -40,11 +40,11 @@ var S_ContentsContainer2 = styled_components_1.default.div(templateObject_3 || (
     var containerColor = _a.containerColor;
     return "background-color: " + containerColor;
 });
-var S_ContentsArea1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  max-width: 768px;\n  min-width: 360px;\n  height: 100%;\n  ", ";\n"], ["\n  max-width: 768px;\n  min-width: 360px;\n  height: 100%;\n  ", ";\n"])), function (_a) {
+var S_ContentsArea1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin: 0 auto;\n  max-width: 768px;\n  min-width: 360px;\n  height: 100%;\n  ", ";\n"], ["\n  margin: 0 auto;\n  max-width: 768px;\n  min-width: 360px;\n  height: 100%;\n  ", ";\n"])), function (_a) {
     var areaColor = _a.areaColor;
     return "background-color: " + areaColor;
 });
-var S_ContentsArea2 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  max-width: 768px;\n  min-width: 360px;\n  padding-bottom: 88px;\n  ", ";\n"], ["\n  max-width: 768px;\n  min-width: 360px;\n  padding-bottom: 88px;\n  ", ";\n"])), function (_a) {
+var S_ContentsArea2 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin: 0 auto;\n  max-width: 768px;\n  min-width: 360px;\n  padding-bottom: 88px;\n  ", ";\n"], ["\n  margin: 0 auto;\n  max-width: 768px;\n  min-width: 360px;\n  padding-bottom: 88px;\n  ", ";\n"])), function (_a) {
     var areaColor = _a.areaColor;
     return "background-color: " + areaColor;
 });

package/dist/src/mobile/layout/LayoutMF/Containers/ContentsContainer/variation/MFD.js

@@ -22,7 +22,7 @@ var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (t
     var containerColor = _a.containerColor;
     return "background-color: " + containerColor;
 });
-var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  max-width: 768px;\n  min-width: 360px;\n  height: 100%;\n  ", ";\n"], ["\n  max-width: 768px;\n  min-width: 360px;\n  height: 100%;\n  ", ";\n"])), function (_a) {
+var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: 0 auto;\n  max-width: 768px;\n  min-width: 360px;\n  height: 100%;\n  ", ";\n"], ["\n  margin: 0 auto;\n  max-width: 768px;\n  min-width: 360px;\n  height: 100%;\n  ", ";\n"])), function (_a) {
     var areaColor = _a.areaColor;
     return "background-color: " + areaColor;
 });

package/dist/src/mobile/layout/LayoutMF/Containers/ContentsContainer/variation/MFE.js

@@ -40,11 +40,11 @@ var S_ContentsContainer2 = styled_components_1.default.div(templateObject_3 || (
     var containerColor = _a.containerColor;
     return "background-color: " + containerColor;
 });
-var S_ContentsArea1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  max-width: 768px;\n  min-width: 360px;\n  height: 100%;\n  ", ";\n"], ["\n  max-width: 768px;\n  min-width: 360px;\n  height: 100%;\n  ", ";\n"])), function (_a) {
+var S_ContentsArea1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin: 0 auto;\n  max-width: 768px;\n  min-width: 360px;\n  height: 100%;\n  ", ";\n"], ["\n  margin: 0 auto;\n  max-width: 768px;\n  min-width: 360px;\n  height: 100%;\n  ", ";\n"])), function (_a) {
     var areaColor = _a.areaColor;
     return "background-color: " + areaColor;
 });
-var S_ContentsArea2 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  max-width: 768px;\n  min-width: 360px;\n  padding-bottom: 88px;\n  height: 100%;\n  ", ";\n"], ["\n  max-width: 768px;\n  min-width: 360px;\n  padding-bottom: 88px;\n  height: 100%;\n  ", ";\n"])), function (_a) {
+var S_ContentsArea2 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin: 0 auto;\n  max-width: 768px;\n  min-width: 360px;\n  padding-bottom: 88px;\n  height: 100%;\n  ", ";\n"], ["\n  margin: 0 auto;\n  max-width: 768px;\n  min-width: 360px;\n  padding-bottom: 88px;\n  height: 100%;\n  ", ";\n"])), function (_a) {
     var areaColor = _a.areaColor;
     return "background-color: " + areaColor;
 });