pds-dev-kit-web 2.1.24 → 2.1.26

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

@@ -829,5 +829,9 @@
     "ui_sw_sidebar_label_icon_normal_02": "sys_sw_sidebar_label_icon_normal_02",
     "ui_104": "sys_text_black_02",
     "ui_sw_sidebar_item_text_disabled": "sys_sw_sidebar_item_text_disabled",
-    "ui_106": "sys_text_grey_05"
+    "ui_106": "sys_text_grey_05",
+    "ui_cpnt_modalwithtab_leftside_base": "sys_component_base_06",
+    "ui_cpnt_modalwithtab_sidetab_default": "sys_component_base_white_opacity00",
+    "ui_cpnt_modalwithtab_sidetab_hover": "sys_component_base_01",
+    "ui_cpnt_modalwithtab_sidetab_pressed": "sys_component_base_04"
 }

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

@@ -119,352 +119,7 @@ declare const colorSet: {
         grey300: string;
         darkgrey300: string;
     };
-    readonly PaletteColor_light: {
-        sys_container_background_01: string;
-        sys_container_background_02: string;
-        sys_container_background_03: string;
-        sys_background_dimmed: string;
-        sys_text_grey_01: string;
-        sys_text_grey_02: string;
-        sys_text_grey_03: string;
-        sys_text_white: string;
-        sys_text_brand_primary: string;
-        sys_text_error_01: string;
-        sys_widget_grey_01: string;
-        sys_widget_grey_02: string;
-        sys_widget_grey_03: string;
-        sys_widget_primary_01: string;
-        sys_widget_error_01: string;
-        sys_widget_warning_01: string;
-        sys_widget_success_01: string;
-        sys_widget_white: string;
-        sys_border_area_01: string;
-        sys_border_line_01: string;
-        sys_border_line_02: string;
-        sys_border_line_03: string;
-        sys_border_line_04: string;
-        sys_border_line_05: string;
-        sys_component_base_01: string;
-        sys_component_base_02: string;
-        sys_component_base_03: string;
-        sys_component_base_red: string;
-        sys_component_base_white: string;
-        sys_component_base_white_opacity00: string;
-        sys_on_base_white_opacity00: string;
-        sys_on_base_white_opacity30: string;
-        sys_on_base_black_opacity20: string;
-        usr_brand_primary: string;
-        usr_brand_secondary: string;
-        usr_brand_secondary_variant: string;
-        usr_background: string;
-        usr_surface: string;
-        usr_border: string;
-        usr_on_brand_primary: string;
-        usr_on_brand_secondary: string;
-        usr_on_background: string;
-        usr_on_surface: string;
-        sys_widget_status_active_01: string;
-        sys_text_success_01: string;
-        sys_widget_grey_04: string;
-        sys_text_active: string;
-        sys_component_base_blue: string;
-        sys_on_base_black_opacity65: string;
-        sys_component_base_04: string;
-        sys_component_base_black: string;
-        sys_component_base_black_opacity00: string;
-        usr_text_brand_secondary_variant: string;
-        usr_text_brand_primary: string;
-        usr_text_brand_on_primary: string;
-        sys_text_brand_secondary_variant: string;
-        sys_component_base_navy: string;
-        sys_widget_lightgreen: string;
-        sys_border_line_06: string;
-        sys_background_dimmed_20: string;
-        sys_widget_pink: string;
-        sys_widget_primary_opacity20: string;
-        sys_widget_secondary_variant_01: string;
-        usr_component_base_brand_primary_opacity10: string;
-        sys_temp_grey_01: string;
-        sys_temp_grey_02: string;
-        sys_temp_grey_03: string;
-        sys_temp_grey_04: string;
-        sys_temp_grey_05: string;
-        sys_temp_white: string;
-        sys_temp_primary_01: string;
-        sys_temp_secondary_01: string;
-        sys_temp_red: string;
-        sys_temp_white_opacity_00: string;
-        sys_temp_dimmed: string;
-        sys_temp_black: string;
-        sys_temp_primary_02: string;
-        sys_temp_primary_03: string;
-        sys_temp_secondary_02: string;
-        sys_temp_lightgreen_01: string;
-        sys_text_grey_04: string;
-        sys_papp_post_social_background: string;
-        sys_papp_post_notice_background: string;
-        sys_papp_post_free_background: string;
-        sys_papp_vod_background: string;
-        sys_papp_vodplus_background: string;
-        sys_papp_live_background: string;
-        sys_selcontrols_base_off_disabled: string;
-        sys_selcontrols_base_on_disabled: string;
-        sys_component_base_blue_opacity10: string;
-        sys_component_base_05: string;
-        sys_background_dimmed_65: string;
-        sys_temp_grey_06: string;
-        sys_on_base_white_opacity10: string;
-        sys_on_base_black_opacity10: string;
-        sys_component_base_05_opacity00: string;
-        sys_papp_post_notice_link: string;
-        sys_component_base_navy_light: string;
-        sys_component_base_orange: string;
-        sys_component_base_grey: string;
-        sys_component_base_black_opacity80: string;
-        sys_text_darkgrey_02: string;
-        sys_border_line_darktheme_01: string;
-        sys_border_line_darktheme_02: string;
-        sys_component_base_darktheme_01: string;
-        sys_component_base_darktheme_02: string;
-        sys_component_base_darktheme_03: string;
-        sys_text_grey_darktheme_01: string;
-        sys_text_grey_darktheme_02: string;
-        sys_text_grey_darktheme_03: string;
-        sys_widget_grey_darktheme_01: string;
-        sys_widget_grey_darktheme_02: string;
-        sys_widget_grey_darktheme_03: string;
-        sys_component_base_green: string;
-        sys_text_error_darktheme_01: string;
-        sys_border_line_darktheme_03: string;
-        sys_border_line_darktheme_04: string;
-        usr_widget_brand_primary_darktheme_01: string;
-        usr_text_brand_primary_darktheme_01: string;
-        sys_component_base_black_opacity50: string;
-        sys_component_base_card: string;
-        sys_cpnt_textlabel_sys_brand_primary_opacity50: string;
-        sys_widget_green_01: string;
-        sys_component_base_black_opacity30: string;
-        sys_area_background: string;
-        sys_border_white_opacity30: string;
-        sys_container_background_wt: string;
-        sys_channeldesc_grey_03: string;
-        sys_channeldesc_border_grey_03: string;
-        sys_gradient_base_01: string;
-        sys_gradient_base_01_opacity00: string;
-        sys_channeldesc_background: string;
-        sys_channeldesc_bottomsheet_base: string;
-        sys_channeldesc_bottomsheet_border: string;
-        sys_channeldesc_contents_base: string;
-        sys_channeldesc_dimmed: string;
-        sys_gradient_base_01_opacity50: string;
-        sys_gradient_base_01_opacity75: string;
-        sys_gradient_base_01_opacity40: string;
-        sys_widget_black: string;
-        usr_temp_primary_01: string;
-        sys_cpnt_sheet_base_02_opacity50: string;
-        usr_menu_primarymenu_main: string;
-        usr_menu_primarymenu_sub: string;
-        usr_menu_secondarymenu_main: string;
-        usr_menu_secondarymenu_sub: string;
-        usr_menu_hover: string;
-        usr_menu_active: string;
-        usr_menu_background: string;
-        sys_cpnt_base_white_opacity50: string;
-        sys_widget_dark_01: string;
-        usr_menu_background_gradient_opacity00: string;
-        sys_border_line_white: string;
-        sys_component_base_white_opacity10: string;
-        sys_cpnt_sheet_base_01: string;
-        sys_component_base_white_opacity20: string;
-        sys_border_line_07: string;
-        sys_border_line_white_opacity50: string;
-        sys_background_dimmed_02: string;
-        sys_border_line_08: string;
-        sys_component_base_06: string;
-        sys_component_base_07: string;
-        sys_border_line_09: string;
-        sys_component_base_darktheme_04: string;
-        sys_border_line_10: string;
-        sys_component_base_darktheme_05: string;
-        sys_border_line_darktheme_05: string;
-        sys_component_base_darktheme_06: string;
-        sys_border_line_darktheme_06: string;
-        sys_border_line_darktheme_07: string;
-        sys_border_line_11: string;
-        sys_base_dimmed_01: string;
-        sys_kakao: string;
-        sys_border_line_12: string;
-        sys_component_base_08: string;
-        sys_text_social_login_01: string;
-        sys_text_social_login_02: string;
-        sys_papp_livechat_link: string;
-        sys_text_lighttone_grey_01: string;
-        sys_widget_lighttone_primary_01: string;
-        sys_text_lighttone_grey_02: string;
-        sys_component_base_09: string;
-        sys_component_base_darktheme_opacity20: string;
-        sys_component_base_darktheme_disabled_opacity20: string;
-        sys_border_white_opacity00: string;
-        sys_border_line_darktheme_07_opacity00: string;
-        sys_border_line_darktheme_02_opacity20: string;
-        sys_border_line_darktheme_03_opacity20: string;
-        sys_border_line_darktheme_07_opacity20: string;
-        sys_component_base_grey_02_opacity80: string;
-        sys_component_base_10: string;
-        sys_component_pastel_base_01: string;
-        sys_component_pastel_base_02: string;
-        sys_component_pastel_base_03: string;
-        sys_component_pastel_base_04: string;
-        sys_component_pastel_base_05: string;
-        sys_component_base_11: string;
-        sys_loading_skeleton_01: string;
-        sys_loading_skeleton_02: string;
-        sys_loading_linear_bar: string;
-        sys_loading_linear_base: string;
-        sys_loading_three_bar: string;
-        sys_widget_grey_05: string;
-        sys_menu_background_transparent: string;
-        sys_container_background_04: string;
-        sys_menu_button_base: string;
-        sys_background_dimmed_03: string;
-        sys_cpnt_sheet_base_03: string;
-        sys_dimmed_gradient_01: string;
-        sys_dimmed_gradient_02: string;
-        sys_border_line_13: string;
-        sys_component_base_12: string;
-        sys_border_line_14: string;
-        sys_component_base_13: string;
-        sys_component_base_14: string;
-        sys_component_base_15: string;
-        sys_component_base_16: string;
-        sys_component_base_17: string;
-        sys_widget_red_01: string;
-        sys_widget_orange_01: string;
-        sys_text_warning_01: string;
-        sys_component_base_18: string;
-        sys_cpnt_sheet_base_04: string;
-        sys_cpnt_sheet_base_05: string;
-        sys_cpnt_sheet_base_06: string;
-        sys_facebook: string;
-        sys_component_base_19: string;
-        sys_cpnt_pagination_dot_01: string;
-        sys_cpnt_pagination_dot_02: string;
-        sys_component_base_white_opacity50: string;
-        sys_component_base_20: string;
-        sys_component_base_22: string;
-        sys_component_base_21: string;
-        sys_component_border_white_opacity20: string;
-        sys_component_base_23: string;
-        sys_component_base_darkgreen: string;
-        sys_component_base_24: string;
-        sys_border_line_15: string;
-        sys_border_line_16: string;
-        sys_component_base_hover_01: string;
-        sys_component_on_base_01: string;
-        sys_component_on_base_02: string;
-        sys_component_on_base_03: string;
-        sys_component_on_base_04: string;
-        sys_component_on_base_05: string;
-        sys_component_base_hover_02: string;
-        sys_component_base_pressed_01: string;
-        sys_widget_white_02: string;
-        sys_component_base_hover_03: string;
-        sys_component_base_pressed_02: string;
-        sys_component_base_25: string;
-        sys_editor_base_pages: string;
-        sys_editor_base_papp: string;
-        sys_text_black: string;
-        sys_component_base_26: string;
-        sys_component_base_27: string;
-        sys_component_base_28: string;
-        sys_widget_sidebar_label_text: string;
-        sys_component_base_hover_darktheme: string;
-        sys_component_base_pressed_darktheme: string;
-        sys_component_base_hover_white: string;
-        sys_component_base_pressed_white: string;
-        sys_component_base_hover_transparent: string;
-        sys_component_base_pressed_transparent: string;
-        sys_text_white_opacity_01: string;
-        sys_component_base_hover_04: string;
-        sys_component_base_pressed_03: string;
-        sys_cpnt_sheet_base_07: string;
-        sys_cpnt_sheet_base_08: string;
-        sys_cpnt_sheet_base_09: string;
-        sys_cpnt_sheet_base_10: string;
-        sys_component_base_29: string;
-        sys_storyboard_group_base_grey01: string;
-        sys_storyboard_group_base_blue01: string;
-        sys_storyboard_group_base_red01: string;
-        sys_storyboard_group_base_green01: string;
-        sys_storyboard_card_base_blue01: string;
-        sys_storyboard_card_base_red01: string;
-        sys_storyboard_card_base_green01: string;
-        sys_brand_secondary_variant: string;
-        sys_button_tooltip_base: string;
-        sys_text_button_tooltip: string;
-        sys_membership_button_base: string;
-        sys_membership_item_membership_base: string;
-        sys_membership_item_price_product_base: string;
-        sys_component_base_30: string;
-        sys_component_base_31: string;
-        sys_component_base_32: string;
-        sys_component_base_33: string;
-        sys_component_base_34: string;
-        sys_component_base_35: string;
-        sys_component_base_36: string;
-        sys_component_base_37: string;
-        sys_component_base_38: string;
-        sys_plan_base_01: string;
-        sys_plan_base_02: string;
-        sys_plan_base_03: string;
-        sys_text_warning_02: string;
-        sys_component_base_39: string;
-        sys_component_base_40: string;
-        sys_component_base_41: string;
-        sys_cpnt_slider_track: string;
-        sys_cpnt_slider_track_active: string;
-        sys_cpnt_slider_thumb_normal: string;
-        sys_cpnt_slider_thumb_disabled: string;
-        sys_cpnt_slider_thumb_hover_circle: string;
-        sys_cpnt_slider_thumb_pressed_circle: string;
-        sys_cpnt_slider_track_disabled: string;
-        sys_component_base_42: string;
-        sys_component_base_43: string;
-        sys_icon_grey_darktheme_01: string;
-        sys_icon_grey_darktheme_02: string;
-        sys_icon_grey_darktheme_03: string;
-        sys_widget_grey_01_opacity_50: string;
-        sys_editor_layout_header: string;
-        sys_editor_layout_navigation_panel: string;
-        sys_editor_layout_canvas_area: string;
-        sys_editor_layout_control_panel: string;
-        sys_editor_layout_property_panel: string;
-        sys_editor_layout_navigation_panel_section_item_area_normal: string;
-        sys_component_base_44: string;
-        sys_sw_sidebar_base: string;
-        sys_sw_sidebar_label_text_normal: string;
-        sys_sw_sidebar_item_text_normal: string;
-        sys_sw_sidebar_item_text_selected: string;
-        sys_sw_sidebar_label_icon_normal_01: string;
-        sys_sw_sidebar_item_icon_normal: string;
-        sys_sw_sidebar_item_icon_selected: string;
-        sys_sw_sidebar_badge_base_01: string;
-        sys_sw_sidebar_badge_base_02: string;
-        sys_sw_sidebar_badge_text_01: string;
-        sys_sw_sidebar_badge_text_02: string;
-        sys_sw_sidebar_divider: string;
-        sys_sw_sidebar_label_base_normal: string;
-        sys_sw_sidebar_label_base_hover: string;
-        sys_sw_sidebar_label_base_pressed: string;
-        sys_sw_sidebar_item_base_normal: string;
-        sys_sw_sidebar_item_base_hover: string;
-        sys_sw_sidebar_item_base_pressed: string;
-        sys_sw_sidebar_label_icon_normal_02: string;
-        sys_text_black_02: string;
-        sys_sw_sidebar_item_text_disabled: string;
-        sys_text_grey_05: string;
-    };
-    readonly PaletteColor_Dark: {
+    readonly PaletteColor_Dark: {
         sys_container_background_01: string;
         sys_container_background_02: string;
         sys_container_background_03: string;
@@ -1641,6 +1296,355 @@ declare const colorSet: {
         ui_104: string;
         ui_sw_sidebar_item_text_disabled: string;
         ui_106: string;
+        ui_cpnt_modalwithtab_leftside_base: string;
+        ui_cpnt_modalwithtab_sidetab_default: string;
+        ui_cpnt_modalwithtab_sidetab_hover: string;
+        ui_cpnt_modalwithtab_sidetab_pressed: string;
+    };
+    readonly PaletteColor_light: {
+        sys_container_background_01: string;
+        sys_container_background_02: string;
+        sys_container_background_03: string;
+        sys_background_dimmed: string;
+        sys_text_grey_01: string;
+        sys_text_grey_02: string;
+        sys_text_grey_03: string;
+        sys_text_white: string;
+        sys_text_brand_primary: string;
+        sys_text_error_01: string;
+        sys_widget_grey_01: string;
+        sys_widget_grey_02: string;
+        sys_widget_grey_03: string;
+        sys_widget_primary_01: string;
+        sys_widget_error_01: string;
+        sys_widget_warning_01: string;
+        sys_widget_success_01: string;
+        sys_widget_white: string;
+        sys_border_area_01: string;
+        sys_border_line_01: string;
+        sys_border_line_02: string;
+        sys_border_line_03: string;
+        sys_border_line_04: string;
+        sys_border_line_05: string;
+        sys_component_base_01: string;
+        sys_component_base_02: string;
+        sys_component_base_03: string;
+        sys_component_base_red: string;
+        sys_component_base_white: string;
+        sys_component_base_white_opacity00: string;
+        sys_on_base_white_opacity00: string;
+        sys_on_base_white_opacity30: string;
+        sys_on_base_black_opacity20: string;
+        usr_brand_primary: string;
+        usr_brand_secondary: string;
+        usr_brand_secondary_variant: string;
+        usr_background: string;
+        usr_surface: string;
+        usr_border: string;
+        usr_on_brand_primary: string;
+        usr_on_brand_secondary: string;
+        usr_on_background: string;
+        usr_on_surface: string;
+        sys_widget_status_active_01: string;
+        sys_text_success_01: string;
+        sys_widget_grey_04: string;
+        sys_text_active: string;
+        sys_component_base_blue: string;
+        sys_on_base_black_opacity65: string;
+        sys_component_base_04: string;
+        sys_component_base_black: string;
+        sys_component_base_black_opacity00: string;
+        usr_text_brand_secondary_variant: string;
+        usr_text_brand_primary: string;
+        usr_text_brand_on_primary: string;
+        sys_text_brand_secondary_variant: string;
+        sys_component_base_navy: string;
+        sys_widget_lightgreen: string;
+        sys_border_line_06: string;
+        sys_background_dimmed_20: string;
+        sys_widget_pink: string;
+        sys_widget_primary_opacity20: string;
+        sys_widget_secondary_variant_01: string;
+        usr_component_base_brand_primary_opacity10: string;
+        sys_temp_grey_01: string;
+        sys_temp_grey_02: string;
+        sys_temp_grey_03: string;
+        sys_temp_grey_04: string;
+        sys_temp_grey_05: string;
+        sys_temp_white: string;
+        sys_temp_primary_01: string;
+        sys_temp_secondary_01: string;
+        sys_temp_red: string;
+        sys_temp_white_opacity_00: string;
+        sys_temp_dimmed: string;
+        sys_temp_black: string;
+        sys_temp_primary_02: string;
+        sys_temp_primary_03: string;
+        sys_temp_secondary_02: string;
+        sys_temp_lightgreen_01: string;
+        sys_text_grey_04: string;
+        sys_papp_post_social_background: string;
+        sys_papp_post_notice_background: string;
+        sys_papp_post_free_background: string;
+        sys_papp_vod_background: string;
+        sys_papp_vodplus_background: string;
+        sys_papp_live_background: string;
+        sys_selcontrols_base_off_disabled: string;
+        sys_selcontrols_base_on_disabled: string;
+        sys_component_base_blue_opacity10: string;
+        sys_component_base_05: string;
+        sys_background_dimmed_65: string;
+        sys_temp_grey_06: string;
+        sys_on_base_white_opacity10: string;
+        sys_on_base_black_opacity10: string;
+        sys_component_base_05_opacity00: string;
+        sys_papp_post_notice_link: string;
+        sys_component_base_navy_light: string;
+        sys_component_base_orange: string;
+        sys_component_base_grey: string;
+        sys_component_base_black_opacity80: string;
+        sys_text_darkgrey_02: string;
+        sys_border_line_darktheme_01: string;
+        sys_border_line_darktheme_02: string;
+        sys_component_base_darktheme_01: string;
+        sys_component_base_darktheme_02: string;
+        sys_component_base_darktheme_03: string;
+        sys_text_grey_darktheme_01: string;
+        sys_text_grey_darktheme_02: string;
+        sys_text_grey_darktheme_03: string;
+        sys_widget_grey_darktheme_01: string;
+        sys_widget_grey_darktheme_02: string;
+        sys_widget_grey_darktheme_03: string;
+        sys_component_base_green: string;
+        sys_text_error_darktheme_01: string;
+        sys_border_line_darktheme_03: string;
+        sys_border_line_darktheme_04: string;
+        usr_widget_brand_primary_darktheme_01: string;
+        usr_text_brand_primary_darktheme_01: string;
+        sys_component_base_black_opacity50: string;
+        sys_component_base_card: string;
+        sys_cpnt_textlabel_sys_brand_primary_opacity50: string;
+        sys_widget_green_01: string;
+        sys_component_base_black_opacity30: string;
+        sys_area_background: string;
+        sys_border_white_opacity30: string;
+        sys_container_background_wt: string;
+        sys_channeldesc_grey_03: string;
+        sys_channeldesc_border_grey_03: string;
+        sys_gradient_base_01: string;
+        sys_gradient_base_01_opacity00: string;
+        sys_channeldesc_background: string;
+        sys_channeldesc_bottomsheet_base: string;
+        sys_channeldesc_bottomsheet_border: string;
+        sys_channeldesc_contents_base: string;
+        sys_channeldesc_dimmed: string;
+        sys_gradient_base_01_opacity50: string;
+        sys_gradient_base_01_opacity75: string;
+        sys_gradient_base_01_opacity40: string;
+        sys_widget_black: string;
+        usr_temp_primary_01: string;
+        sys_cpnt_sheet_base_02_opacity50: string;
+        usr_menu_primarymenu_main: string;
+        usr_menu_primarymenu_sub: string;
+        usr_menu_secondarymenu_main: string;
+        usr_menu_secondarymenu_sub: string;
+        usr_menu_hover: string;
+        usr_menu_active: string;
+        usr_menu_background: string;
+        sys_cpnt_base_white_opacity50: string;
+        sys_widget_dark_01: string;
+        usr_menu_background_gradient_opacity00: string;
+        sys_border_line_white: string;
+        sys_component_base_white_opacity10: string;
+        sys_cpnt_sheet_base_01: string;
+        sys_component_base_white_opacity20: string;
+        sys_border_line_07: string;
+        sys_border_line_white_opacity50: string;
+        sys_background_dimmed_02: string;
+        sys_border_line_08: string;
+        sys_component_base_06: string;
+        sys_component_base_07: string;
+        sys_border_line_09: string;
+        sys_component_base_darktheme_04: string;
+        sys_border_line_10: string;
+        sys_component_base_darktheme_05: string;
+        sys_border_line_darktheme_05: string;
+        sys_component_base_darktheme_06: string;
+        sys_border_line_darktheme_06: string;
+        sys_border_line_darktheme_07: string;
+        sys_border_line_11: string;
+        sys_base_dimmed_01: string;
+        sys_kakao: string;
+        sys_border_line_12: string;
+        sys_component_base_08: string;
+        sys_text_social_login_01: string;
+        sys_text_social_login_02: string;
+        sys_papp_livechat_link: string;
+        sys_text_lighttone_grey_01: string;
+        sys_widget_lighttone_primary_01: string;
+        sys_text_lighttone_grey_02: string;
+        sys_component_base_09: string;
+        sys_component_base_darktheme_opacity20: string;
+        sys_component_base_darktheme_disabled_opacity20: string;
+        sys_border_white_opacity00: string;
+        sys_border_line_darktheme_07_opacity00: string;
+        sys_border_line_darktheme_02_opacity20: string;
+        sys_border_line_darktheme_03_opacity20: string;
+        sys_border_line_darktheme_07_opacity20: string;
+        sys_component_base_grey_02_opacity80: string;
+        sys_component_base_10: string;
+        sys_component_pastel_base_01: string;
+        sys_component_pastel_base_02: string;
+        sys_component_pastel_base_03: string;
+        sys_component_pastel_base_04: string;
+        sys_component_pastel_base_05: string;
+        sys_component_base_11: string;
+        sys_loading_skeleton_01: string;
+        sys_loading_skeleton_02: string;
+        sys_loading_linear_bar: string;
+        sys_loading_linear_base: string;
+        sys_loading_three_bar: string;
+        sys_widget_grey_05: string;
+        sys_menu_background_transparent: string;
+        sys_container_background_04: string;
+        sys_menu_button_base: string;
+        sys_background_dimmed_03: string;
+        sys_cpnt_sheet_base_03: string;
+        sys_dimmed_gradient_01: string;
+        sys_dimmed_gradient_02: string;
+        sys_border_line_13: string;
+        sys_component_base_12: string;
+        sys_border_line_14: string;
+        sys_component_base_13: string;
+        sys_component_base_14: string;
+        sys_component_base_15: string;
+        sys_component_base_16: string;
+        sys_component_base_17: string;
+        sys_widget_red_01: string;
+        sys_widget_orange_01: string;
+        sys_text_warning_01: string;
+        sys_component_base_18: string;
+        sys_cpnt_sheet_base_04: string;
+        sys_cpnt_sheet_base_05: string;
+        sys_cpnt_sheet_base_06: string;
+        sys_facebook: string;
+        sys_component_base_19: string;
+        sys_cpnt_pagination_dot_01: string;
+        sys_cpnt_pagination_dot_02: string;
+        sys_component_base_white_opacity50: string;
+        sys_component_base_20: string;
+        sys_component_base_22: string;
+        sys_component_base_21: string;
+        sys_component_border_white_opacity20: string;
+        sys_component_base_23: string;
+        sys_component_base_darkgreen: string;
+        sys_component_base_24: string;
+        sys_border_line_15: string;
+        sys_border_line_16: string;
+        sys_component_base_hover_01: string;
+        sys_component_on_base_01: string;
+        sys_component_on_base_02: string;
+        sys_component_on_base_03: string;
+        sys_component_on_base_04: string;
+        sys_component_on_base_05: string;
+        sys_component_base_hover_02: string;
+        sys_component_base_pressed_01: string;
+        sys_widget_white_02: string;
+        sys_component_base_hover_03: string;
+        sys_component_base_pressed_02: string;
+        sys_component_base_25: string;
+        sys_editor_base_pages: string;
+        sys_editor_base_papp: string;
+        sys_text_black: string;
+        sys_component_base_26: string;
+        sys_component_base_27: string;
+        sys_component_base_28: string;
+        sys_widget_sidebar_label_text: string;
+        sys_component_base_hover_darktheme: string;
+        sys_component_base_pressed_darktheme: string;
+        sys_component_base_hover_white: string;
+        sys_component_base_pressed_white: string;
+        sys_component_base_hover_transparent: string;
+        sys_component_base_pressed_transparent: string;
+        sys_text_white_opacity_01: string;
+        sys_component_base_hover_04: string;
+        sys_component_base_pressed_03: string;
+        sys_cpnt_sheet_base_07: string;
+        sys_cpnt_sheet_base_08: string;
+        sys_cpnt_sheet_base_09: string;
+        sys_cpnt_sheet_base_10: string;
+        sys_component_base_29: string;
+        sys_storyboard_group_base_grey01: string;
+        sys_storyboard_group_base_blue01: string;
+        sys_storyboard_group_base_red01: string;
+        sys_storyboard_group_base_green01: string;
+        sys_storyboard_card_base_blue01: string;
+        sys_storyboard_card_base_red01: string;
+        sys_storyboard_card_base_green01: string;
+        sys_brand_secondary_variant: string;
+        sys_button_tooltip_base: string;
+        sys_text_button_tooltip: string;
+        sys_membership_button_base: string;
+        sys_membership_item_membership_base: string;
+        sys_membership_item_price_product_base: string;
+        sys_component_base_30: string;
+        sys_component_base_31: string;
+        sys_component_base_32: string;
+        sys_component_base_33: string;
+        sys_component_base_34: string;
+        sys_component_base_35: string;
+        sys_component_base_36: string;
+        sys_component_base_37: string;
+        sys_component_base_38: string;
+        sys_plan_base_01: string;
+        sys_plan_base_02: string;
+        sys_plan_base_03: string;
+        sys_text_warning_02: string;
+        sys_component_base_39: string;
+        sys_component_base_40: string;
+        sys_component_base_41: string;
+        sys_cpnt_slider_track: string;
+        sys_cpnt_slider_track_active: string;
+        sys_cpnt_slider_thumb_normal: string;
+        sys_cpnt_slider_thumb_disabled: string;
+        sys_cpnt_slider_thumb_hover_circle: string;
+        sys_cpnt_slider_thumb_pressed_circle: string;
+        sys_cpnt_slider_track_disabled: string;
+        sys_component_base_42: string;
+        sys_component_base_43: string;
+        sys_icon_grey_darktheme_01: string;
+        sys_icon_grey_darktheme_02: string;
+        sys_icon_grey_darktheme_03: string;
+        sys_widget_grey_01_opacity_50: string;
+        sys_editor_layout_header: string;
+        sys_editor_layout_navigation_panel: string;
+        sys_editor_layout_canvas_area: string;
+        sys_editor_layout_control_panel: string;
+        sys_editor_layout_property_panel: string;
+        sys_editor_layout_navigation_panel_section_item_area_normal: string;
+        sys_component_base_44: string;
+        sys_sw_sidebar_base: string;
+        sys_sw_sidebar_label_text_normal: string;
+        sys_sw_sidebar_item_text_normal: string;
+        sys_sw_sidebar_item_text_selected: string;
+        sys_sw_sidebar_label_icon_normal_01: string;
+        sys_sw_sidebar_item_icon_normal: string;
+        sys_sw_sidebar_item_icon_selected: string;
+        sys_sw_sidebar_badge_base_01: string;
+        sys_sw_sidebar_badge_base_02: string;
+        sys_sw_sidebar_badge_text_01: string;
+        sys_sw_sidebar_badge_text_02: string;
+        sys_sw_sidebar_divider: string;
+        sys_sw_sidebar_label_base_normal: string;
+        sys_sw_sidebar_label_base_hover: string;
+        sys_sw_sidebar_label_base_pressed: string;
+        sys_sw_sidebar_item_base_normal: string;
+        sys_sw_sidebar_item_base_hover: string;
+        sys_sw_sidebar_item_base_pressed: string;
+        sys_sw_sidebar_label_icon_normal_02: string;
+        sys_text_black_02: string;
+        sys_sw_sidebar_item_text_disabled: string;
+        sys_text_grey_05: string;
     };
 };
 export default colorSet;

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

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

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

@@ -830,4 +830,8 @@ export interface UITheme {
     ui_104: string;
     ui_sw_sidebar_item_text_disabled: string;
     ui_106: string;
+    ui_cpnt_modalwithtab_leftside_base: string;
+    ui_cpnt_modalwithtab_sidetab_default: string;
+    ui_cpnt_modalwithtab_sidetab_hover: string;
+    ui_cpnt_modalwithtab_sidetab_pressed: string;
 }

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

@@ -40,15 +40,76 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
+var react_dom_1 = require("react-dom");
 var styled_components_1 = __importStar(require("styled-components"));
 var hybrid_1 = require("../../../hybrid");
 function TextLabel(_a) {
     var text = _a.text, tooltipText = _a.tooltipText, _b = _a.tooltipPosition, tooltipPosition = _b === void 0 ? 'right_bottom' : _b, _c = _a.tooltipIconColorKey, tooltipIconColorKey = _c === void 0 ? 'ui_cpnt_icon_sys_grey_03' : _c, _d = _a.textAlign, textAlign = _d === void 0 ? 'left' : _d, _e = _a.styleTheme, styleTheme = _e === void 0 ? 'body2Bold' : _e, colorOverride = _a.colorOverride, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'sysTextPrimary' : _f, _g = _a.singleLineMode, singleLineMode = _g === void 0 ? 'none' : _g, _h = _a.ellipsisMode, ellipsisMode = _h === void 0 ? 'none' : _h, lineLimit = _a.lineLimit, _j = _a.userSelectMode, userSelectMode = _j === void 0 ? 'none' : _j, customFontSize = _a.customFontSize, customFontWeight = _a.customFontWeight, _k = _a.textDecorationType, textDecorationType = _k === void 0 ? 'none' : _k, _l = _a.requirementMode, requirementMode = _l === void 0 ? 'none' : _l, _m = _a.bulletPointMode, bulletPointMode = _m === void 0 ? 'none' : _m, _o = _a.wordBreak, wordBreak = _o === void 0 ? 'keep_all' : _o, letterSpacing = _a.letterSpacing;
     var _p = (0, react_1.useState)(false), isTooltipOpen = _p[0], setIsTooltipOpen = _p[1];
-    var handleTooltipToggle = function (value) {
-        setIsTooltipOpen(value);
+    var _q = (0, react_1.useState)(null), tooltipSizeOffset = _q[0], setTooltipSizeOffset = _q[1];
+    var _r = (0, react_1.useState)(null), tooltipPositionOffset = _r[0], setTooltipPositionOffset = _r[1];
+    var tooltipRef = (0, react_1.useRef)(null);
+    var tooltipPositionTargetRef = (0, react_1.useRef)(null);
+    var handleTooltipOpen = function () {
+        setIsTooltipOpen(true);
     };
-    return ((0, jsx_runtime_1.jsxs)(S_TextLabel, __assign({ "x-pds-name": "TextLabel", "x-pds-element-type": "component", "x-pds-device-type": "desktop", textAlign: textAlign, styleTheme: styleTheme, colorOverride: colorOverride, colorTheme: colorTheme, singleLineMode: singleLineMode, ellipsisMode: ellipsisMode, lineLimit: lineLimit, userSelectMode: userSelectMode, customFontSize: customFontSize, customFontWeight: customFontWeight, textDecorationType: textDecorationType, bulletPointMode: bulletPointMode, wordBreak: wordBreak, "$letterSpacing": letterSpacing }, { children: [text, requirementMode === 'use' && ((0, jsx_runtime_1.jsx)(S_AfterTextBox, __assign({ styleTheme: styleTheme }, { children: (0, jsx_runtime_1.jsx)(S_IconWrapper, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_requirement", size: 16, fillType: "line", colorKey: "ui_cpnt_icon_sys_error_01" }) }) }))), tooltipText && ((0, jsx_runtime_1.jsxs)(S_AfterTextBox, __assign({ styleTheme: styleTheme }, { children: [(0, jsx_runtime_1.jsx)(S_IconWrapper, __assign({ onMouseEnter: function () { return handleTooltipToggle(true); }, onMouseLeave: function () { return handleTooltipToggle(false); } }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_question", size: 16, fillType: "fill", colorKey: tooltipIconColorKey }) })), (0, jsx_runtime_1.jsx)(S_TooltipWrapper, __assign({ className: "TooltipWrapper", isTooltipOpen: isTooltipOpen, tooltipPosition: tooltipPosition }, { children: "".concat(tooltipText) }))] })))] })));
+    var handleTooltipClose = function () {
+        setIsTooltipOpen(false);
+    };
+    /**
+     * @when : isTooltipOpen이 변경되었을 때
+     * @expected : tooltipPositionTargetRef, tooltipRef 의 위치를 업데이트합니다.
+     * @clear :
+     */
+    (0, react_1.useEffect)(function () {
+        if (tooltipPositionTargetRef.current) {
+            var _a = tooltipPositionTargetRef.current.getBoundingClientRect(), top_1 = _a.top, right = _a.right, left = _a.left, bottom = _a.bottom;
+            setTooltipPositionOffset({
+                top: top_1 + window.scrollY,
+                right: right + window.scrollX,
+                bottom: bottom + window.scrollY,
+                left: left + window.scrollX
+            });
+        }
+        if (!isTooltipOpen && tooltipRef.current) {
+            setTooltipSizeOffset(null);
+            return;
+        }
+        if (tooltipRef.current) {
+            setTooltipSizeOffset({
+                height: tooltipRef.current.offsetHeight,
+                width: tooltipRef.current.offsetWidth
+            });
+        }
+    }, [isTooltipOpen]);
+    var tooltipPositionCss = getTooltipPositionCss(tooltipSizeOffset, tooltipPositionOffset, tooltipPosition);
+    return ((0, jsx_runtime_1.jsxs)(S_TextLabel, __assign({ "x-pds-name": "TextLabel", "x-pds-element-type": "component", "x-pds-device-type": "desktop", textAlign: textAlign, styleTheme: styleTheme, colorOverride: colorOverride, colorTheme: colorTheme, singleLineMode: singleLineMode, ellipsisMode: ellipsisMode, lineLimit: lineLimit, userSelectMode: userSelectMode, customFontSize: customFontSize, customFontWeight: customFontWeight, textDecorationType: textDecorationType, bulletPointMode: bulletPointMode, wordBreak: wordBreak, "$letterSpacing": letterSpacing }, { children: [text, requirementMode === 'use' && ((0, jsx_runtime_1.jsx)(S_AfterTextBox, __assign({ styleTheme: styleTheme }, { children: (0, jsx_runtime_1.jsx)(S_IconWrapper, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_requirement", size: 16, fillType: "line", colorKey: "ui_cpnt_icon_sys_error_01" }) }) }))), tooltipText && ((0, jsx_runtime_1.jsxs)(S_AfterTextBox, __assign({ styleTheme: styleTheme, ref: tooltipPositionTargetRef }, { children: [(0, jsx_runtime_1.jsx)(S_IconWrapper, __assign({ onMouseEnter: handleTooltipOpen, onMouseLeave: handleTooltipClose }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_question", size: 16, fillType: "fill", colorKey: tooltipIconColorKey }) })), (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(S_TooltipWrapper, __assign({ className: "TooltipWrapper", ref: tooltipRef, isTooltipOpen: isTooltipOpen, tooltipPosition: tooltipPosition, tooltipPositionCss: tooltipPositionCss, onMouseEnter: handleTooltipOpen, onMouseLeave: handleTooltipClose }, { children: "".concat(tooltipText) })), document.body)] })))] })));
+}
+function getTooltipPositionCss(size, position, positionType) {
+    if (!size || !position) {
+        return '';
+    }
+    var left = position.left, bottom = position.bottom, top = position.top;
+    var width = size.width, height = size.height;
+    var leftValue = left - width + 16;
+    var bottomValue = bottom + 4;
+    var topValue = top - height - 4;
+    var isOverLeft = leftValue < 0;
+    var isOverRight = window.innerWidth < left + width;
+    var isOverBottom = window.innerHeight < bottomValue + height;
+    var isOverTop = topValue < 0;
+    switch (positionType) {
+        case 'left_bottom':
+            return "\n      left: ".concat(isOverLeft ? 5 : leftValue, "px;\n      ").concat(isOverBottom ? 'bottom: 5px;' : "top: ".concat(bottomValue, "px;"));
+        case 'left_top':
+            return "\n      left: ".concat(isOverLeft ? 5 : leftValue, "px;\n      top: ").concat(isOverTop ? 5 : topValue, "px;");
+        case 'right_bottom':
+            return "\n      ".concat(isOverRight ? 'right: 5px;' : "left: ".concat(isOverRight ? 5 : left, "px;"), "\n      ").concat(isOverBottom ? 'bottom: 5px;' : "top: ".concat(bottomValue, "px;"));
+        case 'right_top':
+            return "\n      ".concat(isOverRight ? 'right: 5px;' : "left: ".concat(isOverRight ? 5 : left, "px;"), "\n      top: ").concat(isOverTop ? 5 : topValue, "px;");
+        default:
+            return '';
+    }
 }
 var displayBold = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
     var theme = _a.theme;
@@ -315,11 +376,7 @@ var ellipsisStyle = (0, styled_components_1.css)(templateObject_35 || (templateO
 });
 var userSelectModeStyle = (0, styled_components_1.css)(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n  -khtml-user-select: none;\n  -moz-user-select: -moz-none;\n  -ms-user-select: none;\n  -webkit-user-select: none;\n  user-select: none;\n"], ["\n  -khtml-user-select: none;\n  -moz-user-select: -moz-none;\n  -ms-user-select: none;\n  -webkit-user-select: none;\n  user-select: none;\n"])));
 var bulletPointModeStyle = (0, styled_components_1.css)(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n  padding-left: 16px;\n  ::before {\n    content: '\u2022';\n    left: 0;\n    position: absolute;\n    width: 16px;\n  }\n"], ["\n  padding-left: 16px;\n  ::before {\n    content: '\u2022';\n    left: 0;\n    position: absolute;\n    width: 16px;\n  }\n"])));
-var tooltipLeftTop = (0, styled_components_1.css)(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n  bottom: 20px;\n  right: 0;\n"], ["\n  bottom: 20px;\n  right: 0;\n"])));
-var tooltipLeftBottom = (0, styled_components_1.css)(templateObject_39 || (templateObject_39 = __makeTemplateObject(["\n  right: 0;\n  top: 20px;\n"], ["\n  right: 0;\n  top: 20px;\n"])));
-var tooltipRightTop = (0, styled_components_1.css)(templateObject_40 || (templateObject_40 = __makeTemplateObject(["\n  bottom: 20px;\n  left: 0;\n"], ["\n  bottom: 20px;\n  left: 0;\n"])));
-var tooltipRightBottom = (0, styled_components_1.css)(templateObject_41 || (templateObject_41 = __makeTemplateObject(["\n  left: 0;\n  top: 20px;\n"], ["\n  left: 0;\n  top: 20px;\n"])));
-var S_TextLabel = styled_components_1.default.div(templateObject_42 || (templateObject_42 = __makeTemplateObject(["\n  box-sizing: border-box;\n  overflow-wrap: break-word;\n  text-align: ", ";\n  white-space: pre-wrap;\n  word-break: ", ";\n\n  ", ";\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"], ["\n  box-sizing: border-box;\n  overflow-wrap: break-word;\n  text-align: ", ";\n  white-space: pre-wrap;\n  word-break: ", ";\n\n  ", ";\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
+var S_TextLabel = styled_components_1.default.div(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n  box-sizing: border-box;\n  overflow-wrap: break-word;\n  text-align: ", ";\n  white-space: pre-wrap;\n  word-break: ", ";\n\n  ", ";\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"], ["\n  box-sizing: border-box;\n  overflow-wrap: break-word;\n  text-align: ", ";\n  white-space: pre-wrap;\n  word-break: ", ";\n\n  ", ";\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
     var textAlign = _a.textAlign;
     return textAlign;
 }, function (_a) {
@@ -404,19 +461,19 @@ var S_TextLabel = styled_components_1.default.div(templateObject_42 || (template
     var bulletPointMode = _a.bulletPointMode;
     return bulletPointMode === 'use' && bulletPointModeStyle;
 });
-var displayAfterTextBox = (0, styled_components_1.css)(templateObject_43 || (templateObject_43 = __makeTemplateObject(["\n  margin-bottom: 5px;\n"], ["\n  margin-bottom: 5px;\n"])));
-var headingAfterTextBox = (0, styled_components_1.css)(templateObject_44 || (templateObject_44 = __makeTemplateObject(["\n  margin-bottom: 3px;\n"], ["\n  margin-bottom: 3px;\n"])));
-var wizardPageTitleAfterTextBox = (0, styled_components_1.css)(templateObject_45 || (templateObject_45 = __makeTemplateObject(["\n  margin-bottom: 7px;\n"], ["\n  margin-bottom: 7px;\n"])));
-var leadParaAfterTextBox = (0, styled_components_1.css)(templateObject_46 || (templateObject_46 = __makeTemplateObject(["\n  margin-bottom: 3px;\n"], ["\n  margin-bottom: 3px;\n"])));
-var subTitleAfterTextBox = (0, styled_components_1.css)(templateObject_47 || (templateObject_47 = __makeTemplateObject(["\n  margin-bottom: 3px;\n"], ["\n  margin-bottom: 3px;\n"])));
-var body1AfterTextBox = (0, styled_components_1.css)(templateObject_48 || (templateObject_48 = __makeTemplateObject(["\n  margin-bottom: 2px;\n"], ["\n  margin-bottom: 2px;\n"])));
-var body2AfterTextBox = (0, styled_components_1.css)(templateObject_49 || (templateObject_49 = __makeTemplateObject(["\n  margin-bottom: 3px;\n"], ["\n  margin-bottom: 3px;\n"])));
-var caption1AfterTextBox = (0, styled_components_1.css)(templateObject_50 || (templateObject_50 = __makeTemplateObject(["\n  margin-bottom: 3px;\n"], ["\n  margin-bottom: 3px;\n"])));
-var caption2AfterTextBox = (0, styled_components_1.css)(templateObject_51 || (templateObject_51 = __makeTemplateObject(["\n  margin-bottom: 3px;\n"], ["\n  margin-bottom: 3px;\n"])));
-var form1AfterTextBox = (0, styled_components_1.css)(templateObject_52 || (templateObject_52 = __makeTemplateObject(["\n  margin-bottom: 3px;\n"], ["\n  margin-bottom: 3px;\n"])));
-var form2AfterTextBox = (0, styled_components_1.css)(templateObject_53 || (templateObject_53 = __makeTemplateObject(["\n  margin-bottom: 2px;\n"], ["\n  margin-bottom: 2px;\n"])));
-var blog1RAfterTextBox = (0, styled_components_1.css)(templateObject_54 || (templateObject_54 = __makeTemplateObject(["\n  margin-bottom: 3px;\n"], ["\n  margin-bottom: 3px;\n"])));
-var S_AfterTextBox = styled_components_1.default.div(templateObject_55 || (templateObject_55 = __makeTemplateObject(["\n  display: inline-block;\n  margin-left: ", ";\n  position: relative;\n  vertical-align: middle;\n\n  ", ";\n"], ["\n  display: inline-block;\n  margin-left: ", ";\n  position: relative;\n  vertical-align: middle;\n\n  ", ";\n"])), function (_a) {
+var displayAfterTextBox = (0, styled_components_1.css)(templateObject_39 || (templateObject_39 = __makeTemplateObject(["\n  margin-bottom: 5px;\n"], ["\n  margin-bottom: 5px;\n"])));
+var headingAfterTextBox = (0, styled_components_1.css)(templateObject_40 || (templateObject_40 = __makeTemplateObject(["\n  margin-bottom: 3px;\n"], ["\n  margin-bottom: 3px;\n"])));
+var wizardPageTitleAfterTextBox = (0, styled_components_1.css)(templateObject_41 || (templateObject_41 = __makeTemplateObject(["\n  margin-bottom: 7px;\n"], ["\n  margin-bottom: 7px;\n"])));
+var leadParaAfterTextBox = (0, styled_components_1.css)(templateObject_42 || (templateObject_42 = __makeTemplateObject(["\n  margin-bottom: 3px;\n"], ["\n  margin-bottom: 3px;\n"])));
+var subTitleAfterTextBox = (0, styled_components_1.css)(templateObject_43 || (templateObject_43 = __makeTemplateObject(["\n  margin-bottom: 3px;\n"], ["\n  margin-bottom: 3px;\n"])));
+var body1AfterTextBox = (0, styled_components_1.css)(templateObject_44 || (templateObject_44 = __makeTemplateObject(["\n  margin-bottom: 2px;\n"], ["\n  margin-bottom: 2px;\n"])));
+var body2AfterTextBox = (0, styled_components_1.css)(templateObject_45 || (templateObject_45 = __makeTemplateObject(["\n  margin-bottom: 3px;\n"], ["\n  margin-bottom: 3px;\n"])));
+var caption1AfterTextBox = (0, styled_components_1.css)(templateObject_46 || (templateObject_46 = __makeTemplateObject(["\n  margin-bottom: 3px;\n"], ["\n  margin-bottom: 3px;\n"])));
+var caption2AfterTextBox = (0, styled_components_1.css)(templateObject_47 || (templateObject_47 = __makeTemplateObject(["\n  margin-bottom: 3px;\n"], ["\n  margin-bottom: 3px;\n"])));
+var form1AfterTextBox = (0, styled_components_1.css)(templateObject_48 || (templateObject_48 = __makeTemplateObject(["\n  margin-bottom: 3px;\n"], ["\n  margin-bottom: 3px;\n"])));
+var form2AfterTextBox = (0, styled_components_1.css)(templateObject_49 || (templateObject_49 = __makeTemplateObject(["\n  margin-bottom: 2px;\n"], ["\n  margin-bottom: 2px;\n"])));
+var blog1RAfterTextBox = (0, styled_components_1.css)(templateObject_50 || (templateObject_50 = __makeTemplateObject(["\n  margin-bottom: 3px;\n"], ["\n  margin-bottom: 3px;\n"])));
+var S_AfterTextBox = styled_components_1.default.div(templateObject_51 || (templateObject_51 = __makeTemplateObject(["\n  display: inline-block;\n  margin-left: ", ";\n  position: relative;\n  vertical-align: middle;\n\n  ", ";\n"], ["\n  display: inline-block;\n  margin-left: ", ";\n  position: relative;\n  vertical-align: middle;\n\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingA;
 }, function (_a) {
@@ -445,8 +502,8 @@ var S_AfterTextBox = styled_components_1.default.div(templateObject_55 || (templ
             blog1Regular: blog1RAfterTextBox
         }[styleTheme];
 });
-var S_IconWrapper = styled_components_1.default.div(templateObject_56 || (templateObject_56 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 16px;\n  height: 100%;\n  justify-content: center;\n  width: 16px;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 16px;\n  height: 100%;\n  justify-content: center;\n  width: 16px;\n"])));
-var S_TooltipWrapper = styled_components_1.default.div(templateObject_57 || (templateObject_57 = __makeTemplateObject(["\n  ", "\n  align-items: center;\n  background-color: ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  display: flex;\n  justify-content: center;\n  line-height: 1.2;\n  max-width: 240px;\n  overflow-wrap: break-word;\n  padding: ", ";\n  position: absolute;\n  text-align: left;\n  white-space: pre-wrap;\n  width: max-content;\n  word-break: keep-all;\n  z-index: 400;\n\n  ", ";\n\n  ", ";\n"], ["\n  ", "\n  align-items: center;\n  background-color: ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  display: flex;\n  justify-content: center;\n  line-height: 1.2;\n  max-width: 240px;\n  overflow-wrap: break-word;\n  padding: ", ";\n  position: absolute;\n  text-align: left;\n  white-space: pre-wrap;\n  width: max-content;\n  word-break: keep-all;\n  z-index: 400;\n\n  ", ";\n\n  ", ";\n"])), caption2Regular, function (_a) {
+var S_IconWrapper = styled_components_1.default.div(templateObject_52 || (templateObject_52 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 16px;\n  height: 100%;\n  justify-content: center;\n  width: 16px;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 16px;\n  height: 100%;\n  justify-content: center;\n  width: 16px;\n"])));
+var S_TooltipWrapper = styled_components_1.default.div(templateObject_53 || (templateObject_53 = __makeTemplateObject(["\n  ", "\n  align-items: center;\n  background-color: ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  display: flex;\n  justify-content: center;\n  line-height: 1.2;\n  max-width: 240px;\n  overflow-wrap: break-word;\n  padding: ", ";\n  position: fixed;\n  text-align: left;\n  white-space: pre-wrap;\n  width: max-content;\n  word-break: keep-all;\n  z-index: 400;\n\n  ", ";\n  ", ";\n"], ["\n  ", "\n  align-items: center;\n  background-color: ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  display: flex;\n  justify-content: center;\n  line-height: 1.2;\n  max-width: 240px;\n  overflow-wrap: break-word;\n  padding: ", ";\n  position: fixed;\n  text-align: left;\n  white-space: pre-wrap;\n  width: max-content;\n  word-break: keep-all;\n  z-index: 400;\n\n  ", ";\n  ", ";\n"])), caption2Regular, function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_button_tooltip_base;
 }, function (_a) {
@@ -462,14 +519,8 @@ var S_TooltipWrapper = styled_components_1.default.div(templateObject_57 || (tem
     var isTooltipOpen = _a.isTooltipOpen;
     return !isTooltipOpen && 'display: none';
 }, function (_a) {
-    var tooltipPosition = _a.tooltipPosition;
-    return tooltipPosition &&
-        {
-            left_top: tooltipLeftTop,
-            left_bottom: tooltipLeftBottom,
-            right_top: tooltipRightTop,
-            right_bottom: tooltipRightBottom
-        }[tooltipPosition];
+    var tooltipPositionCss = _a.tooltipPositionCss;
+    return tooltipPositionCss && tooltipPositionCss;
 });
 exports.default = TextLabel;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44, templateObject_45, templateObject_46, templateObject_47, templateObject_48, templateObject_49, templateObject_50, templateObject_51, templateObject_52, templateObject_53, templateObject_54, templateObject_55, templateObject_56, templateObject_57;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44, templateObject_45, templateObject_46, templateObject_47, templateObject_48, templateObject_49, templateObject_50, templateObject_51, templateObject_52, templateObject_53;

package/dist/src/sub/DynamicLayout/sections/CustomSection/CustomSection.js

@@ -172,7 +172,7 @@ function CustomSection(props) {
         if (device === 'MOBILE') {
             var cellWidth_1 = width / MOBILE_GRID_COLS;
             setRowHeight(cellWidth_1 * 0.56);
-            baseFontSize !== 14 && setBaseFontSize(14);
+            baseFontSize !== 16 && setBaseFontSize(16);
             return;
         }
         var cellWidth = width / DESKTOP_GRID_COLS;

package/package.json

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

package/release-note.md

@@ -1,9 +1,9 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v2.1.24]
+## [v2.1.26]
 ## daily|https://design.storybook.publ.biz/
 
-### sub
-* DynamicLayout - custom section
-    * Responsive mode 추가
-    * font-size em, mobile 기준폰트 14px
-    * button 여백 스펙 변경
+### Component
+* TextLabel
+    * tooltip 사용시 tooltip이 측정 영역에 갇히거나 window 화면 밖으로 튀어나가지 않을 수 있도록 강화
+### Color
+* 컬러 키 값 23.08.22 17시 25분 기준 싱크