pds-dev-kit-web-test 0.0.6 → 0.0.9

package/dist/src/common/components/Navigations/ContextTextLabelNav.js

@@ -5,11 +5,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var desktop_1 = require("../../../desktop");
+var hybrid_1 = require("../../../hybrid");
+var BoxLayout_1 = require("../BoxLayout");
 var NavLink_1 = __importDefault(require("./NavLink"));
-function TextLabelNav(_a, ref) {
-    var to = _a.to, text = _a.text, openNewTab = _a.openNewTab, _b = _a.isActive, isActive = _b === void 0 ? false : _b, _c = _a.preventLineChange, preventLineChange = _c === void 0 ? false : _c;
-    return preventLineChange ? (react_1.default.createElement(NavLink_1.default, { ref: ref, to: to, openNewTab: openNewTab, style: { width: 'max-content' } },
-        react_1.default.createElement(desktop_1.D_TextLabel, { text: text, styleTheme: "form2Regular", ellipsisMode: "use", lineLimit: 1 }))) : (react_1.default.createElement(NavLink_1.default, { ref: ref, to: to, openNewTab: openNewTab },
+function ContextTextLabelNav(_a, ref) {
+    var to = _a.to, text = _a.text, openNewTab = _a.openNewTab, _b = _a.isActive, isActive = _b === void 0 ? false : _b, _c = _a.preventLineChange, preventLineChange = _c === void 0 ? false : _c, onClick = _a.onClick;
+    return preventLineChange ? (react_1.default.createElement(NavLink_1.default, { onClick: onClick, ref: ref, to: to, openNewTab: openNewTab, style: { minWidth: '100%', width: 'max-content' } },
+        react_1.default.createElement(BoxLayout_1.Row, null,
+            react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" }),
+            react_1.default.createElement(desktop_1.D_TextLabel, { text: text, styleTheme: "form2Regular", ellipsisMode: "use", lineLimit: 1 }),
+            react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" })))) : (react_1.default.createElement(NavLink_1.default, { onClick: onClick, ref: ref, to: to, openNewTab: openNewTab },
         react_1.default.createElement(desktop_1.D_TextLabel, { text: text, styleTheme: "form2Regular" })));
 }
-exports.default = TextLabelNav;
+exports.default = ContextTextLabelNav;

package/dist/src/common/hooks/useDetectOverflow.js

@@ -30,7 +30,7 @@ function useDetectOverflow(ref, detectOnResize) {
         else {
             setIsScrollBoxStart(false);
         }
-        if (Math.ceil(ref.node.scrollLeft + ref.node.clientWidth) === ref.node.scrollWidth) {
+        if (Math.abs(ref.node.scrollLeft + ref.node.clientWidth - ref.node.scrollWidth) <= 5) {
             setIsScrollBoxEnd(true);
         }
         else {

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

@@ -173,5 +173,8 @@
     "sys_base_dimmed_01": "black/opacity30",
     "sys_kakao": "kakaoyellow",
     "sys_border_line_12": "grey100",
-    "sys_component_base_08": "white"
+    "sys_component_base_08": "white",
+    "sys_text_social_login_01": "grey900",
+    "sys_text_social_login_02": "grey900",
+    "sys_papp_livechat_link": "darkskyblue500"
 }

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

@@ -173,5 +173,8 @@
     "sys_base_dimmed_01": "white/opacity30",
     "sys_kakao": "kakaoyellow",
     "sys_border_line_12": "grey100",
-    "sys_component_base_08": "black"
+    "sys_component_base_08": "black",
+    "sys_text_social_login_01": "white",
+    "sys_text_social_login_02": "grey900",
+    "sys_papp_livechat_link": "skyblue500"
 }

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

@@ -523,5 +523,24 @@
     "ui_45": "sys_component_base_08",
     "ui_46": "sys_base_dimmed_01",
     "ui_47": "sys_kakao",
-    "ui_cpnt_sheet_base_03": "sys_component_base_white_opacity00"
+    "ui_cpnt_sheet_base_03": "sys_component_base_white_opacity00",
+    "ui_48": "sys_text_social_login_01",
+    "ui_49": "sys_text_social_login_02",
+    "ui_50": "sys_text_white",
+    "ui_51": "sys_background_dimmed_65",
+    "ui_cpnt_list_text_caption_03": "sys_text_grey_darktheme_03",
+    "ui_cpnt_list_chatbubble_base_area": "sys_component_base_01",
+    "ui_cpnt_list_chatbubble_base_area_my": "sys_component_base_01",
+    "ui_cpnt_list_chatbubble_text_my": "sys_text_grey_01",
+    "ui_papp_livechat_link": "sys_papp_livechat_link",
+    "ui_cpnt_list_chatbubble_base_area_seller_color": "usr_brand_primary",
+    "ui_cpnt_list_chatbubble_text_seller_color": "usr_on_brand_primary",
+    "ui_cpnt_list_chatbubble_base_area_subscriber": "sys_component_base_01",
+    "ui_cpnt_list_chatbubble_text_subscriber": "sys_text_grey_01",
+    "ui_cpnt_list_chatbubble_base_area_my_color": "usr_brand_primary",
+    "ui_cpnt_list_chatbubble_text_my_color": "usr_on_brand_primary",
+    "ui_cpnt_list_chatbubble_base_area_seller": "usr_brand_primary",
+    "ui_cpnt_list_chatbubble_text_seller": "usr_on_brand_primary",
+    "ui_52": "sys_widget_success_01",
+    "ui_cpnt_imageview_dimmed": "sys_on_base_black_opacity65"
 }

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

@@ -235,183 +235,9 @@ declare const colorSet: {
         sys_kakao: string;
         sys_border_line_12: string;
         sys_component_base_08: string;
-    };
-    readonly PaletteColor_Dark: {
-        sys_container_background_01: string;
-        sys_container_background_02: string;
-        sys_container_background_03: string;
-        sys_background_dimmed: string;
-        sys_text_grey_01: string;
-        sys_text_grey_02: string;
-        sys_text_grey_03: string;
-        sys_text_white: string;
-        sys_text_brand_primary: string;
-        sys_text_error_01: string;
-        sys_widget_grey_01: string;
-        sys_widget_grey_02: string;
-        sys_widget_grey_03: string;
-        sys_widget_primary_01: string;
-        sys_widget_error_01: string;
-        sys_widget_warning_01: string;
-        sys_widget_success_01: string;
-        sys_widget_white: string;
-        sys_border_area_01: string;
-        sys_border_line_01: string;
-        sys_border_line_02: string;
-        sys_border_line_03: string;
-        sys_border_line_04: string;
-        sys_border_line_05: string;
-        sys_component_base_01: string;
-        sys_component_base_02: string;
-        sys_component_base_03: string;
-        sys_component_base_red: string;
-        sys_component_base_white: string;
-        sys_component_base_white_opacity00: string;
-        sys_on_base_white_opacity00: string;
-        sys_on_base_white_opacity30: string;
-        sys_on_base_black_opacity20: string;
-        usr_brand_primary: string;
-        usr_brand_secondary: string;
-        usr_brand_secondary_variant: string;
-        usr_background: string;
-        usr_surface: string;
-        usr_border: string;
-        usr_on_brand_primary: string;
-        usr_on_brand_secondary: string;
-        usr_on_background: string;
-        usr_on_surface: string;
-        sys_widget_status_active_01: string;
-        sys_text_success_01: string;
-        sys_widget_grey_04: string;
-        sys_text_active: string;
-        sys_component_base_blue: string;
-        sys_on_base_black_opacity65: string;
-        sys_component_base_04: string;
-        sys_component_base_black: string;
-        sys_component_base_black_opacity00: string;
-        usr_text_brand_secondary_variant: string;
-        usr_text_brand_primary: string;
-        usr_text_brand_on_primary: string;
-        sys_text_brand_secondary_variant: string;
-        sys_component_base_navy: string;
-        sys_widget_lightgreen: string;
-        sys_border_line_06: string;
-        sys_background_dimmed_20: string;
-        sys_widget_pink: string;
-        sys_widget_primary_opacity20: string;
-        sys_widget_secondary_variant_01: string;
-        usr_component_base_brand_primary_opacity10: string;
-        sys_temp_grey_01: string;
-        sys_temp_grey_02: string;
-        sys_temp_grey_03: string;
-        sys_temp_grey_04: string;
-        sys_temp_grey_05: string;
-        sys_temp_white: string;
-        sys_temp_primary_01: string;
-        sys_temp_secondary_01: string;
-        sys_temp_red: string;
-        sys_temp_white_opacity_00: string;
-        sys_temp_dimmed: string;
-        sys_temp_black: string;
-        sys_temp_primary_02: string;
-        sys_temp_primary_03: string;
-        sys_temp_secondary_02: string;
-        sys_temp_lightgreen_01: string;
-        sys_text_grey_04: string;
-        sys_papp_post_social_background: string;
-        sys_papp_post_notice_background: string;
-        sys_papp_post_free_background: string;
-        sys_papp_vod_background: string;
-        sys_papp_vodplus_background: string;
-        sys_papp_live_background: string;
-        sys_selcontrols_base_off_disabled: string;
-        sys_selcontrols_base_on_disabled: string;
-        sys_component_base_blue_opacity10: string;
-        sys_component_base_05: string;
-        sys_background_dimmed_65: string;
-        sys_temp_grey_06: string;
-        sys_on_base_white_opacity10: string;
-        sys_on_base_black_opacity10: string;
-        sys_component_base_05_opacity00: string;
-        sys_papp_post_notice_link: string;
-        sys_component_base_navy_light: string;
-        sys_component_base_orange: string;
-        sys_component_base_grey: string;
-        sys_component_base_black_opacity80: string;
-        sys_text_darkgrey_02: string;
-        sys_border_line_darktheme_01: string;
-        sys_border_line_darktheme_02: string;
-        sys_component_base_darktheme_01: string;
-        sys_component_base_darktheme_02: string;
-        sys_component_base_darktheme_03: string;
-        sys_text_grey_darktheme_01: string;
-        sys_text_grey_darktheme_02: string;
-        sys_text_grey_darktheme_03: string;
-        sys_widget_grey_darktheme_01: string;
-        sys_widget_grey_darktheme_02: string;
-        sys_widget_grey_darktheme_03: string;
-        sys_component_base_green: string;
-        sys_text_error_darktheme_01: string;
-        sys_border_line_darktheme_03: string;
-        sys_border_line_darktheme_04: string;
-        usr_widget_brand_primary_darktheme_01: string;
-        usr_text_brand_primary_darktheme_01: string;
-        sys_component_base_black_opacity50: string;
-        sys_component_base_card: string;
-        sys_cpnt_textlabel_sys_brand_primary_opacity50: string;
-        sys_widget_green_01: string;
-        sys_component_base_black_opacity30: string;
-        sys_area_background: string;
-        sys_border_white_opacity30: string;
-        sys_container_background_wt: string;
-        sys_channeldesc_grey_03: string;
-        sys_channeldesc_border_grey_03: string;
-        sys_gradient_base_01: string;
-        sys_gradient_base_01_opacity00: string;
-        sys_channeldesc_background: string;
-        sys_channeldesc_bottomsheet_base: string;
-        sys_channeldesc_bottomsheet_border: string;
-        sys_channeldesc_contents_base: string;
-        sys_channeldesc_dimmed: string;
-        sys_gradient_base_01_opacity50: string;
-        sys_gradient_base_01_opacity75: string;
-        sys_gradient_base_01_opacity40: string;
-        sys_widget_black: string;
-        usr_temp_primary_01: string;
-        sys_cpnt_sheet_base_02_opacity50: string;
-        usr_menu_primarymenu_main: string;
-        usr_menu_primarymenu_sub: string;
-        usr_menu_secondarymenu_main: string;
-        usr_menu_secondarymenu_sub: string;
-        usr_menu_hover: string;
-        usr_menu_active: string;
-        usr_menu_background: string;
-        sys_cpnt_base_white_opacity50: string;
-        sys_widget_dark_01: string;
-        usr_menu_background_gradient_opacity00: string;
-        sys_border_line_white: string;
-        sys_component_base_white_opacity10: string;
-        sys_cpnt_sheet_base_01: string;
-        sys_component_base_white_opacity20: string;
-        sys_border_line_07: string;
-        sys_border_line_white_opacity50: string;
-        sys_background_dimmed_02: string;
-        sys_border_line_08: string;
-        sys_component_base_06: string;
-        sys_component_base_07: string;
-        sys_border_line_09: string;
-        sys_component_base_darktheme_04: string;
-        sys_border_line_10: string;
-        sys_component_base_darktheme_05: string;
-        sys_border_line_darktheme_05: string;
-        sys_component_base_darktheme_06: string;
-        sys_border_line_darktheme_06: string;
-        sys_border_line_darktheme_07: string;
-        sys_border_line_11: string;
-        sys_base_dimmed_01: string;
-        sys_kakao: string;
-        sys_border_line_12: string;
-        sys_component_base_08: string;
+        sys_text_social_login_01: string;
+        sys_text_social_login_02: string;
+        sys_papp_livechat_link: string;
     };
     readonly UIColor: {
         ui_cpnt_button_fill_base_primary: string;
@@ -939,6 +765,205 @@ declare const colorSet: {
         ui_46: string;
         ui_47: string;
         ui_cpnt_sheet_base_03: string;
+        ui_48: string;
+        ui_49: string;
+        ui_50: string;
+        ui_51: string;
+        ui_cpnt_list_text_caption_03: string;
+        ui_cpnt_list_chatbubble_base_area: string;
+        ui_cpnt_list_chatbubble_base_area_my: string;
+        ui_cpnt_list_chatbubble_text_my: string;
+        ui_papp_livechat_link: string;
+        ui_cpnt_list_chatbubble_base_area_seller_color: string;
+        ui_cpnt_list_chatbubble_text_seller_color: string;
+        ui_cpnt_list_chatbubble_base_area_subscriber: string;
+        ui_cpnt_list_chatbubble_text_subscriber: string;
+        ui_cpnt_list_chatbubble_base_area_my_color: string;
+        ui_cpnt_list_chatbubble_text_my_color: string;
+        ui_cpnt_list_chatbubble_base_area_seller: string;
+        ui_cpnt_list_chatbubble_text_seller: string;
+        ui_52: string;
+        ui_cpnt_imageview_dimmed: string;
+    };
+    readonly PaletteColor_Dark: {
+        sys_container_background_01: string;
+        sys_container_background_02: string;
+        sys_container_background_03: string;
+        sys_background_dimmed: string;
+        sys_text_grey_01: string;
+        sys_text_grey_02: string;
+        sys_text_grey_03: string;
+        sys_text_white: string;
+        sys_text_brand_primary: string;
+        sys_text_error_01: string;
+        sys_widget_grey_01: string;
+        sys_widget_grey_02: string;
+        sys_widget_grey_03: string;
+        sys_widget_primary_01: string;
+        sys_widget_error_01: string;
+        sys_widget_warning_01: string;
+        sys_widget_success_01: string;
+        sys_widget_white: string;
+        sys_border_area_01: string;
+        sys_border_line_01: string;
+        sys_border_line_02: string;
+        sys_border_line_03: string;
+        sys_border_line_04: string;
+        sys_border_line_05: string;
+        sys_component_base_01: string;
+        sys_component_base_02: string;
+        sys_component_base_03: string;
+        sys_component_base_red: string;
+        sys_component_base_white: string;
+        sys_component_base_white_opacity00: string;
+        sys_on_base_white_opacity00: string;
+        sys_on_base_white_opacity30: string;
+        sys_on_base_black_opacity20: string;
+        usr_brand_primary: string;
+        usr_brand_secondary: string;
+        usr_brand_secondary_variant: string;
+        usr_background: string;
+        usr_surface: string;
+        usr_border: string;
+        usr_on_brand_primary: string;
+        usr_on_brand_secondary: string;
+        usr_on_background: string;
+        usr_on_surface: string;
+        sys_widget_status_active_01: string;
+        sys_text_success_01: string;
+        sys_widget_grey_04: string;
+        sys_text_active: string;
+        sys_component_base_blue: string;
+        sys_on_base_black_opacity65: string;
+        sys_component_base_04: string;
+        sys_component_base_black: string;
+        sys_component_base_black_opacity00: string;
+        usr_text_brand_secondary_variant: string;
+        usr_text_brand_primary: string;
+        usr_text_brand_on_primary: string;
+        sys_text_brand_secondary_variant: string;
+        sys_component_base_navy: string;
+        sys_widget_lightgreen: string;
+        sys_border_line_06: string;
+        sys_background_dimmed_20: string;
+        sys_widget_pink: string;
+        sys_widget_primary_opacity20: string;
+        sys_widget_secondary_variant_01: string;
+        usr_component_base_brand_primary_opacity10: string;
+        sys_temp_grey_01: string;
+        sys_temp_grey_02: string;
+        sys_temp_grey_03: string;
+        sys_temp_grey_04: string;
+        sys_temp_grey_05: string;
+        sys_temp_white: string;
+        sys_temp_primary_01: string;
+        sys_temp_secondary_01: string;
+        sys_temp_red: string;
+        sys_temp_white_opacity_00: string;
+        sys_temp_dimmed: string;
+        sys_temp_black: string;
+        sys_temp_primary_02: string;
+        sys_temp_primary_03: string;
+        sys_temp_secondary_02: string;
+        sys_temp_lightgreen_01: string;
+        sys_text_grey_04: string;
+        sys_papp_post_social_background: string;
+        sys_papp_post_notice_background: string;
+        sys_papp_post_free_background: string;
+        sys_papp_vod_background: string;
+        sys_papp_vodplus_background: string;
+        sys_papp_live_background: string;
+        sys_selcontrols_base_off_disabled: string;
+        sys_selcontrols_base_on_disabled: string;
+        sys_component_base_blue_opacity10: string;
+        sys_component_base_05: string;
+        sys_background_dimmed_65: string;
+        sys_temp_grey_06: string;
+        sys_on_base_white_opacity10: string;
+        sys_on_base_black_opacity10: string;
+        sys_component_base_05_opacity00: string;
+        sys_papp_post_notice_link: string;
+        sys_component_base_navy_light: string;
+        sys_component_base_orange: string;
+        sys_component_base_grey: string;
+        sys_component_base_black_opacity80: string;
+        sys_text_darkgrey_02: string;
+        sys_border_line_darktheme_01: string;
+        sys_border_line_darktheme_02: string;
+        sys_component_base_darktheme_01: string;
+        sys_component_base_darktheme_02: string;
+        sys_component_base_darktheme_03: string;
+        sys_text_grey_darktheme_01: string;
+        sys_text_grey_darktheme_02: string;
+        sys_text_grey_darktheme_03: string;
+        sys_widget_grey_darktheme_01: string;
+        sys_widget_grey_darktheme_02: string;
+        sys_widget_grey_darktheme_03: string;
+        sys_component_base_green: string;
+        sys_text_error_darktheme_01: string;
+        sys_border_line_darktheme_03: string;
+        sys_border_line_darktheme_04: string;
+        usr_widget_brand_primary_darktheme_01: string;
+        usr_text_brand_primary_darktheme_01: string;
+        sys_component_base_black_opacity50: string;
+        sys_component_base_card: string;
+        sys_cpnt_textlabel_sys_brand_primary_opacity50: string;
+        sys_widget_green_01: string;
+        sys_component_base_black_opacity30: string;
+        sys_area_background: string;
+        sys_border_white_opacity30: string;
+        sys_container_background_wt: string;
+        sys_channeldesc_grey_03: string;
+        sys_channeldesc_border_grey_03: string;
+        sys_gradient_base_01: string;
+        sys_gradient_base_01_opacity00: string;
+        sys_channeldesc_background: string;
+        sys_channeldesc_bottomsheet_base: string;
+        sys_channeldesc_bottomsheet_border: string;
+        sys_channeldesc_contents_base: string;
+        sys_channeldesc_dimmed: string;
+        sys_gradient_base_01_opacity50: string;
+        sys_gradient_base_01_opacity75: string;
+        sys_gradient_base_01_opacity40: string;
+        sys_widget_black: string;
+        usr_temp_primary_01: string;
+        sys_cpnt_sheet_base_02_opacity50: string;
+        usr_menu_primarymenu_main: string;
+        usr_menu_primarymenu_sub: string;
+        usr_menu_secondarymenu_main: string;
+        usr_menu_secondarymenu_sub: string;
+        usr_menu_hover: string;
+        usr_menu_active: string;
+        usr_menu_background: string;
+        sys_cpnt_base_white_opacity50: string;
+        sys_widget_dark_01: string;
+        usr_menu_background_gradient_opacity00: string;
+        sys_border_line_white: string;
+        sys_component_base_white_opacity10: string;
+        sys_cpnt_sheet_base_01: string;
+        sys_component_base_white_opacity20: string;
+        sys_border_line_07: string;
+        sys_border_line_white_opacity50: string;
+        sys_background_dimmed_02: string;
+        sys_border_line_08: string;
+        sys_component_base_06: string;
+        sys_component_base_07: string;
+        sys_border_line_09: string;
+        sys_component_base_darktheme_04: string;
+        sys_border_line_10: string;
+        sys_component_base_darktheme_05: string;
+        sys_border_line_darktheme_05: string;
+        sys_component_base_darktheme_06: string;
+        sys_border_line_darktheme_06: string;
+        sys_border_line_darktheme_07: string;
+        sys_border_line_11: string;
+        sys_base_dimmed_01: string;
+        sys_kakao: string;
+        sys_border_line_12: string;
+        sys_component_base_08: string;
+        sys_text_social_login_01: string;
+        sys_text_social_login_02: string;
+        sys_papp_livechat_link: string;
     };
 };
 export default colorSet;

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

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

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

@@ -524,4 +524,23 @@ export interface UITheme {
     ui_46: string;
     ui_47: string;
     ui_cpnt_sheet_base_03: string;
+    ui_48: string;
+    ui_49: string;
+    ui_50: string;
+    ui_51: string;
+    ui_cpnt_list_text_caption_03: string;
+    ui_cpnt_list_chatbubble_base_area: string;
+    ui_cpnt_list_chatbubble_base_area_my: string;
+    ui_cpnt_list_chatbubble_text_my: string;
+    ui_papp_livechat_link: string;
+    ui_cpnt_list_chatbubble_base_area_seller_color: string;
+    ui_cpnt_list_chatbubble_text_seller_color: string;
+    ui_cpnt_list_chatbubble_base_area_subscriber: string;
+    ui_cpnt_list_chatbubble_text_subscriber: string;
+    ui_cpnt_list_chatbubble_base_area_my_color: string;
+    ui_cpnt_list_chatbubble_text_my_color: string;
+    ui_cpnt_list_chatbubble_base_area_seller: string;
+    ui_cpnt_list_chatbubble_text_seller: string;
+    ui_52: string;
+    ui_cpnt_imageview_dimmed: string;
 }

package/dist/src/common/styles/theme.js

@@ -18,10 +18,10 @@ exports.fontWeight = {
     bold: '700'
 };
 exports.desktopFontSize = {
-    displayHeading: '40px',
-    heading: '24px',
-    leadParagraph: '20px',
-    subtitle: '18px',
+    displayHeading: '44px',
+    heading: '28px',
+    leadParagraph: '24px',
+    subtitle: '22px',
     body1: '18px',
     body2: '16px',
     caption1: '14px',
@@ -45,10 +45,10 @@ exports.desktopLineHeight = {
     singleLine: '1'
 };
 exports.mobileFontSize = {
-    displayHeading: '32px',
-    heading: '24px',
-    leadParagraph: '20px',
-    subtitle: '18px',
+    displayHeading: '36px',
+    heading: '28px',
+    leadParagraph: '24px',
+    subtitle: '22px',
     body1: '18px',
     body2: '16px',
     caption1: '14px',

package/dist/src/desktop/common/components/TextFieldBase/TextFieldBase.d.ts

@@ -28,6 +28,7 @@ export declare type TextFieldBaseProps = {
     deleteIconSize?: 12 | 16 | 20 | 24;
     deleteIconColor?: UiColors;
     isFocused?: boolean;
+    autoComplete?: string;
     onBlur?: (e: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement>) => void;
     onChange?: (e: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => void;
     onFocus?: (e: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement>) => void;
@@ -37,5 +38,5 @@ export declare type TextFieldBaseProps = {
     inputRef?: any;
     [x: string]: any;
 } & Record<string, any>;
-declare function TextFieldBase({ name, hintText, defaultText, validation, preventBlankMode, enterSubmitMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, state, colorTheme, min, max, maxLength, textSize, textWeight, textPadding, fieldHeight, deleteIconMode, deleteIconSize, deleteIconColor, isFocused, onBlur, onChange, onFocus, onKeyDown, onKeyUp, onTarget, inputRef, ...rest }: TextFieldBaseProps): JSX.Element;
+declare function TextFieldBase({ name, hintText, defaultText, validation, preventBlankMode, enterSubmitMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, state, colorTheme, min, max, maxLength, textSize, textWeight, textPadding, fieldHeight, deleteIconMode, deleteIconSize, deleteIconColor, isFocused, autoComplete, onBlur, onChange, onFocus, onKeyDown, onKeyUp, onTarget, inputRef, ...rest }: TextFieldBaseProps): JSX.Element;
 export default TextFieldBase;

package/dist/src/desktop/common/components/TextFieldBase/TextFieldBase.js

@@ -52,8 +52,8 @@ var styled_components_1 = __importStar(require("styled-components"));
 var common_1 = require("../../../../common");
 var IconButton_1 = require("../../../components/IconButton");
 function TextFieldBase(_a) {
-    var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, validation = _a.validation, _b = _a.preventBlankMode, preventBlankMode = _b === void 0 ? 'none' : _b, _c = _a.enterSubmitMode, enterSubmitMode = _c === void 0 ? 'none' : _c, _d = _a.textLineType, textLineType = _d === void 0 ? 'single' : _d, multiRows = _a.multiRows, autoMinRows = _a.autoMinRows, autoMaxRows = _a.autoMaxRows, _e = _a.inputType, inputType = _e === void 0 ? 'text' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, _g = _a.colorTheme, colorTheme = _g === void 0 ? 'none' : _g, min = _a.min, max = _a.max, _h = _a.maxLength, maxLength = _h === void 0 ? Infinity : _h, _j = _a.textSize, textSize = _j === void 0 ? 'form2' : _j, _k = _a.textWeight, textWeight = _k === void 0 ? 'normal' : _k, textPadding = _a.textPadding, _l = _a.fieldHeight, fieldHeight = _l === void 0 ? 48 : _l, _m = _a.deleteIconMode, deleteIconMode = _m === void 0 ? 'use' : _m, _o = _a.deleteIconSize, deleteIconSize = _o === void 0 ? 20 : _o, _p = _a.deleteIconColor, deleteIconColor = _p === void 0 ? 'ui_cpnt_button_icon_disabled' : _p, isFocused = _a.isFocused, onBlur = _a.onBlur, onChange = _a.onChange, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown, onKeyUp = _a.onKeyUp, onTarget = _a.onTarget, inputRef = _a.inputRef, rest = __rest(_a, ["name", "hintText", "defaultText", "validation", "preventBlankMode", "enterSubmitMode", "textLineType", "multiRows", "autoMinRows", "autoMaxRows", "inputType", "state", "colorTheme", "min", "max", "maxLength", "textSize", "textWeight", "textPadding", "fieldHeight", "deleteIconMode", "deleteIconSize", "deleteIconColor", "isFocused", "onBlur", "onChange", "onFocus", "onKeyDown", "onKeyUp", "onTarget", "inputRef"]);
-    var _q = (0, react_hook_form_1.useFormContext)(), register = _q.register, setValue = _q.setValue, getValues = _q.getValues, clearErrors = _q.clearErrors;
+    var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, validation = _a.validation, _b = _a.preventBlankMode, preventBlankMode = _b === void 0 ? 'none' : _b, _c = _a.enterSubmitMode, enterSubmitMode = _c === void 0 ? 'none' : _c, _d = _a.textLineType, textLineType = _d === void 0 ? 'single' : _d, multiRows = _a.multiRows, autoMinRows = _a.autoMinRows, autoMaxRows = _a.autoMaxRows, _e = _a.inputType, inputType = _e === void 0 ? 'text' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, _g = _a.colorTheme, colorTheme = _g === void 0 ? 'none' : _g, min = _a.min, max = _a.max, _h = _a.maxLength, maxLength = _h === void 0 ? Infinity : _h, _j = _a.textSize, textSize = _j === void 0 ? 'form2' : _j, _k = _a.textWeight, textWeight = _k === void 0 ? 'normal' : _k, textPadding = _a.textPadding, _l = _a.fieldHeight, fieldHeight = _l === void 0 ? 48 : _l, _m = _a.deleteIconMode, deleteIconMode = _m === void 0 ? 'use' : _m, _o = _a.deleteIconSize, deleteIconSize = _o === void 0 ? 20 : _o, _p = _a.deleteIconColor, deleteIconColor = _p === void 0 ? 'ui_cpnt_button_icon_disabled' : _p, isFocused = _a.isFocused, _q = _a.autoComplete, autoComplete = _q === void 0 ? 'on' : _q, onBlur = _a.onBlur, onChange = _a.onChange, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown, onKeyUp = _a.onKeyUp, onTarget = _a.onTarget, inputRef = _a.inputRef, rest = __rest(_a, ["name", "hintText", "defaultText", "validation", "preventBlankMode", "enterSubmitMode", "textLineType", "multiRows", "autoMinRows", "autoMaxRows", "inputType", "state", "colorTheme", "min", "max", "maxLength", "textSize", "textWeight", "textPadding", "fieldHeight", "deleteIconMode", "deleteIconSize", "deleteIconColor", "isFocused", "autoComplete", "onBlur", "onChange", "onFocus", "onKeyDown", "onKeyUp", "onTarget", "inputRef"]);
+    var _r = (0, react_hook_form_1.useFormContext)(), register = _r.register, setValue = _r.setValue, getValues = _r.getValues, clearErrors = _r.clearErrors;
     var timeout;
     (0, react_1.useEffect)(function () {
         return function () { return clearTimeout(timeout); };
@@ -111,7 +111,7 @@ function TextFieldBase(_a) {
         }
     }
     var textAreaRef = (0, react_1.useRef)(null);
-    var _r = register(name, validation), ref = _r.ref, refRest = __rest(_r, ["ref"]);
+    var _s = register(name, validation), ref = _s.ref, refRest = __rest(_s, ["ref"]);
     (0, react_1.useEffect)(function () {
         if (textAreaRef === null || textAreaRef.current === null) {
             return;
@@ -173,7 +173,7 @@ function TextFieldBase(_a) {
     var S_TextFieldBase = function () {
         if (textLineType === 'single') {
             return (react_1.default.createElement(S_InputWrapper, null,
-                react_1.default.createElement(S_Input, __assign({}, register(name, validation), rest, { name: name, defaultValue: defaultText, placeholder: hintText, type: inputType, state: state, readOnly: state === 'read_only', disabled: state === 'disabled', maxLength: maxLength, textSize: textSize, textWeight: textWeight, textPadding: textPadding, colorTheme: colorTheme, min: min, max: max, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, ref: function (e) {
+                react_1.default.createElement(S_Input, __assign({}, register(name, validation), rest, { name: name, defaultValue: defaultText, placeholder: hintText, type: inputType, state: state, readOnly: state === 'read_only', disabled: state === 'disabled', maxLength: maxLength, textSize: textSize, textWeight: textWeight, textPadding: textPadding, colorTheme: colorTheme, min: min, max: max, autoComplete: autoComplete, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, ref: function (e) {
                         ref(e);
                         if (inputRef) {
                             inputRef.current = e;
@@ -182,7 +182,7 @@ function TextFieldBase(_a) {
                 deleteIconMode === 'use' && isFocused && (react_1.default.createElement(IconButton_1.IconButton, { iconName: "ic_delete", baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: deleteIconSize, iconColorKey: deleteIconColor, iconFillType: "fill", state: state === 'disabled' ? 'disabled' : 'normal', tabIndex: -1, onMouseDown: deleteValue }))));
         }
         if (textLineType === 'multi') {
-            return (react_1.default.createElement(S_Multi, __assign({}, register(name, validation), rest, { name: name, defaultValue: defaultText, placeholder: hintText, state: state, readOnly: state === 'read_only' && true, disabled: state === 'disabled' && true, maxLength: maxLength, rows: multiRows, textSize: textSize, textWeight: textWeight, textPadding: textPadding, colorTheme: colorTheme, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, ref: function (e) {
+            return (react_1.default.createElement(S_Multi, __assign({}, register(name, validation), rest, { name: name, defaultValue: defaultText, placeholder: hintText, state: state, readOnly: state === 'read_only' && true, disabled: state === 'disabled' && true, maxLength: maxLength, rows: multiRows, textSize: textSize, textWeight: textWeight, textPadding: textPadding, colorTheme: colorTheme, autoComplete: autoComplete, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, ref: function (e) {
                     ref(e);
                     if (inputRef) {
                         inputRef.current = e;
@@ -190,7 +190,7 @@ function TextFieldBase(_a) {
                 } })));
         }
         if (textLineType === 'auto') {
-            return (react_1.default.createElement(S_Auto, __assign({}, refRest, rest, { name: name, defaultValue: defaultText, autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, placeholder: hintText, state: state, readOnly: state === 'read_only' && true, disabled: state === 'disabled' && true, maxLength: maxLength, textSize: textSize, textWeight: textWeight, textPadding: textPadding, fieldHeight: fieldHeight, colorTheme: colorTheme, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, ref: function (e) {
+            return (react_1.default.createElement(S_Auto, __assign({}, refRest, rest, { name: name, defaultValue: defaultText, autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, placeholder: hintText, state: state, readOnly: state === 'read_only' && true, disabled: state === 'disabled' && true, maxLength: maxLength, textSize: textSize, textWeight: textWeight, textPadding: textPadding, fieldHeight: fieldHeight, colorTheme: colorTheme, autoComplete: autoComplete, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, ref: function (e) {
                     ref(e);
                     if (textAreaRef) {
                         textAreaRef.current = e;