pds-dev-kit-web 1.4.33 → 1.4.36

package/dist/index.d.ts

@@ -5,14 +5,14 @@ export { theme };
 export { Form };
 import { Divider, Icon, ImageView, Spacing, Switch } from './src/hybrid';
 export { Divider, Icon, ImageView, Spacing, Switch };
-import { LayoutWF, WFContainersBox, LayoutWS, WSGlobalMenuContainer, WSContainersBox, LayoutWT, WTGlobalMenuContainer, WTContainersBox, D_AdminList, D_AdminListHeader, D_AdminListItem, D_BasicChatListItem, D_BasicFormGroup, D_BasicList, D_BasicListItem, D_BlogTextField, D_BodyTextGroup, D_Card, D_CardList, D_ChatList, D_Checkbox, D_Chip, D_ContextMenu, D_ContextMenuItem, D_DesktopAlertDialog, D_DesktopBasicModal, D_DesktopHeaderBar, D_DesktopHeadlessModal, D_DesktopTabBar, D_Dropdown, D_DynamicDesktopNavBar, D_DynamicDesktopNavBarTemplates, D_EditApplyTextField, D_FilterBar, D_FloatingActionButton, D_Hero, D_HorizontalFormGroup, D_IconButton, D_ImageSlide, D_MainButton, D_PageTitleTextGroup, D_Radio, D_ReactionButton, D_Select, D_StatusBlock, D_TextButton, D_TextField, D_TextLabel, D_UploadIconButton, D_UploadMainButton, D_UploadTextButton, D_UserDesktopNavBar, D_UserDesktopTabBar, D_UserDesktopSideTab } from './src/desktop';
+import { LayoutWF, WFContainersBox, LayoutWS, WSGlobalMenuContainer, WSContainersBox, LayoutWT, WTGlobalMenuContainer, WTContainersBox, D_AdminList, D_AdminListHeader, D_AdminListItem, D_BasicChatListItem, D_BasicFormGroup, D_BasicList, D_BasicListItem, D_BlogTextField, D_BodyTextGroup, D_Card, D_CardList, D_ChatBubbleListItem, D_ChatList, D_Checkbox, D_Chip, D_ContextMenu, D_ContextMenuItem, D_DesktopAlertDialog, D_DesktopBasicModal, D_DesktopHeaderBar, D_DesktopHeadlessModal, D_DesktopTabBar, D_Dropdown, D_DynamicDesktopNavBar, D_DynamicDesktopNavBarTemplates, D_EditApplyTextField, D_FilterBar, D_FloatingActionButton, D_Hero, D_HorizontalFormGroup, D_IconButton, D_ImageSlide, D_MainButton, D_PageTitleTextGroup, D_Radio, D_ReactionButton, D_Select, D_StatusBlock, D_TextButton, D_TextField, D_TextLabel, D_UploadIconButton, D_UploadMainButton, D_UploadTextButton, D_UserDesktopNavBar, D_UserDesktopTabBar, D_UserDesktopSideTab } from './src/desktop';
 export { LayoutWF, WFContainersBox };
 export { LayoutWS, WSGlobalMenuContainer, WSContainersBox };
 export { LayoutWT, WTGlobalMenuContainer, WTContainersBox };
-export { D_AdminList, D_AdminListHeader, D_AdminListItem, D_BasicChatListItem, D_BasicFormGroup, D_BasicList, D_BasicListItem, D_BlogTextField, D_BodyTextGroup, D_Card, D_CardList, D_ChatList, D_Checkbox, D_Chip, D_ContextMenu, D_ContextMenuItem, D_DesktopAlertDialog, D_DesktopBasicModal, D_DesktopHeaderBar, D_DesktopHeadlessModal, D_DesktopTabBar, D_Dropdown, D_EditApplyTextField, D_FilterBar, D_FloatingActionButton, D_Hero, D_HorizontalFormGroup, D_IconButton, D_ImageSlide, D_MainButton, D_PageTitleTextGroup, D_Radio, D_ReactionButton, D_Select, D_StatusBlock, D_TextButton, D_TextField, D_TextLabel, D_UploadIconButton, D_UploadMainButton, D_UploadTextButton, D_UserDesktopNavBar, D_UserDesktopTabBar, D_DynamicDesktopNavBar, D_UserDesktopSideTab, D_DynamicDesktopNavBarTemplates };
-import { LayoutMF, MFContainersBox, LayoutMM, MMNavigationContainer, MMContainersBox, LayoutMP, MPNavigationContainer, MPTabContainer, MPContainersBox, LayoutMS, MSNavigationContainer, MSContainersBox, M_BasicChatListItem, M_BasicFormGroup, M_BasicList, M_BasicListItem, M_BlogTextField, M_BodyTextGroup, M_Card, M_CardList, M_ChatList, M_Checkbox, M_Chip, M_ContextMenu, M_ContextMenuItem, M_Dropdown, M_HorizontalFormGroup, M_IconButton, M_ImageSlide, M_MainButton, M_MobileAlertDialog, M_MobileBasicModal, M_MobileHeaderBar, M_MobileTabBar, M_Radio, M_ReactionButton, M_Select, M_StatusBlock, M_TextButton, M_TextField, M_TextLabel, M_UploadIconButton, M_UploadMainButton, M_UploadTextButton } from './src/mobile';
+export { D_AdminList, D_AdminListHeader, D_AdminListItem, D_BasicChatListItem, D_BasicFormGroup, D_BasicList, D_BasicListItem, D_BlogTextField, D_BodyTextGroup, D_Card, D_CardList, D_ChatBubbleListItem, D_ChatList, D_Checkbox, D_Chip, D_ContextMenu, D_ContextMenuItem, D_DesktopAlertDialog, D_DesktopBasicModal, D_DesktopHeaderBar, D_DesktopHeadlessModal, D_DesktopTabBar, D_Dropdown, D_EditApplyTextField, D_FilterBar, D_FloatingActionButton, D_Hero, D_HorizontalFormGroup, D_IconButton, D_ImageSlide, D_MainButton, D_PageTitleTextGroup, D_Radio, D_ReactionButton, D_Select, D_StatusBlock, D_TextButton, D_TextField, D_TextLabel, D_UploadIconButton, D_UploadMainButton, D_UploadTextButton, D_UserDesktopNavBar, D_UserDesktopTabBar, D_DynamicDesktopNavBar, D_UserDesktopSideTab, D_DynamicDesktopNavBarTemplates };
+import { LayoutMF, MFContainersBox, LayoutMM, MMNavigationContainer, MMContainersBox, LayoutMP, MPNavigationContainer, MPTabContainer, MPContainersBox, LayoutMS, MSNavigationContainer, MSContainersBox, M_BasicChatListItem, M_BasicFormGroup, M_BasicList, M_BasicListItem, M_BlogTextField, M_BodyTextGroup, M_Card, M_CardList, M_ChatBubbleListItem, M_ChatList, M_Checkbox, M_Chip, M_ContextMenu, M_ContextMenuItem, M_Dropdown, M_HorizontalFormGroup, M_IconButton, M_ImageSlide, M_MainButton, M_MobileAlertDialog, M_MobileBasicModal, M_MobileHeaderBar, M_MobileTabBar, M_Radio, M_ReactionButton, M_Select, M_StatusBlock, M_TextButton, M_TextField, M_TextLabel, M_UploadIconButton, M_UploadMainButton, M_UploadTextButton } from './src/mobile';
 export { LayoutMF, MFContainersBox };
 export { LayoutMM, MMNavigationContainer, MMContainersBox };
 export { LayoutMP, MPNavigationContainer, MPTabContainer, MPContainersBox };
 export { LayoutMS, MSNavigationContainer, MSContainersBox };
-export { M_BasicChatListItem, M_BasicFormGroup, M_BasicList, M_BasicListItem, M_BlogTextField, M_BodyTextGroup, M_Card, M_CardList, M_ChatList, M_Checkbox, M_Chip, M_ContextMenu, M_ContextMenuItem, M_Dropdown, M_HorizontalFormGroup, M_IconButton, M_ImageSlide, M_MainButton, M_MobileAlertDialog, M_MobileBasicModal, M_MobileHeaderBar, M_MobileTabBar, M_Radio, M_ReactionButton, M_Select, M_StatusBlock, M_TextButton, M_TextField, M_TextLabel, M_UploadIconButton, M_UploadMainButton, M_UploadTextButton };
+export { M_BasicChatListItem, M_BasicFormGroup, M_BasicList, M_BasicListItem, M_BlogTextField, M_BodyTextGroup, M_Card, M_CardList, M_ChatBubbleListItem, M_ChatList, M_Checkbox, M_Chip, M_ContextMenu, M_ContextMenuItem, M_Dropdown, M_HorizontalFormGroup, M_IconButton, M_ImageSlide, M_MainButton, M_MobileAlertDialog, M_MobileBasicModal, M_MobileHeaderBar, M_MobileTabBar, M_Radio, M_ReactionButton, M_Select, M_StatusBlock, M_TextButton, M_TextField, M_TextLabel, M_UploadIconButton, M_UploadMainButton, M_UploadTextButton };

package/dist/index.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.D_Hero = exports.D_FloatingActionButton = exports.D_FilterBar = exports.D_EditApplyTextField = exports.D_Dropdown = exports.D_DesktopTabBar = exports.D_DesktopHeadlessModal = exports.D_DesktopHeaderBar = exports.D_DesktopBasicModal = exports.D_DesktopAlertDialog = exports.D_ContextMenuItem = exports.D_ContextMenu = exports.D_Chip = exports.D_Checkbox = exports.D_ChatList = exports.D_CardList = exports.D_Card = exports.D_BodyTextGroup = exports.D_BlogTextField = exports.D_BasicListItem = exports.D_BasicList = exports.D_BasicFormGroup = exports.D_BasicChatListItem = exports.D_AdminListItem = exports.D_AdminListHeader = exports.D_AdminList = exports.WTContainersBox = exports.WTGlobalMenuContainer = exports.LayoutWT = exports.WSContainersBox = exports.WSGlobalMenuContainer = exports.LayoutWS = exports.WFContainersBox = exports.LayoutWF = exports.Switch = exports.Spacing = exports.ImageView = exports.Icon = exports.Divider = exports.Form = exports.theme = exports.customTheme = exports.uiColors = exports.spacing = exports.boxShadow = exports.mobileLineHeight = exports.mobileFontSize = exports.desktopLineHeight = exports.desktopFontSize = exports.fontWeight = void 0;
-exports.M_MainButton = exports.M_ImageSlide = exports.M_IconButton = exports.M_HorizontalFormGroup = exports.M_Dropdown = exports.M_ContextMenuItem = exports.M_ContextMenu = exports.M_Chip = exports.M_Checkbox = exports.M_ChatList = exports.M_CardList = exports.M_Card = exports.M_BodyTextGroup = exports.M_BlogTextField = exports.M_BasicListItem = exports.M_BasicList = exports.M_BasicFormGroup = exports.M_BasicChatListItem = exports.MSContainersBox = exports.MSNavigationContainer = exports.LayoutMS = exports.MPContainersBox = exports.MPTabContainer = exports.MPNavigationContainer = exports.LayoutMP = exports.MMContainersBox = exports.MMNavigationContainer = exports.LayoutMM = exports.MFContainersBox = exports.LayoutMF = exports.D_DynamicDesktopNavBarTemplates = exports.D_UserDesktopSideTab = exports.D_DynamicDesktopNavBar = exports.D_UserDesktopTabBar = exports.D_UserDesktopNavBar = exports.D_UploadTextButton = exports.D_UploadMainButton = exports.D_UploadIconButton = exports.D_TextLabel = exports.D_TextField = exports.D_TextButton = exports.D_StatusBlock = exports.D_Select = exports.D_ReactionButton = exports.D_Radio = exports.D_PageTitleTextGroup = exports.D_MainButton = exports.D_ImageSlide = exports.D_IconButton = exports.D_HorizontalFormGroup = void 0;
-exports.M_UploadTextButton = exports.M_UploadMainButton = exports.M_UploadIconButton = exports.M_TextLabel = exports.M_TextField = exports.M_TextButton = exports.M_StatusBlock = exports.M_Select = exports.M_ReactionButton = exports.M_Radio = exports.M_MobileTabBar = exports.M_MobileHeaderBar = exports.M_MobileBasicModal = exports.M_MobileAlertDialog = void 0;
+exports.D_FloatingActionButton = exports.D_FilterBar = exports.D_EditApplyTextField = exports.D_Dropdown = exports.D_DesktopTabBar = exports.D_DesktopHeadlessModal = exports.D_DesktopHeaderBar = exports.D_DesktopBasicModal = exports.D_DesktopAlertDialog = exports.D_ContextMenuItem = exports.D_ContextMenu = exports.D_Chip = exports.D_Checkbox = exports.D_ChatList = exports.D_ChatBubbleListItem = exports.D_CardList = exports.D_Card = exports.D_BodyTextGroup = exports.D_BlogTextField = exports.D_BasicListItem = exports.D_BasicList = exports.D_BasicFormGroup = exports.D_BasicChatListItem = exports.D_AdminListItem = exports.D_AdminListHeader = exports.D_AdminList = exports.WTContainersBox = exports.WTGlobalMenuContainer = exports.LayoutWT = exports.WSContainersBox = exports.WSGlobalMenuContainer = exports.LayoutWS = exports.WFContainersBox = exports.LayoutWF = exports.Switch = exports.Spacing = exports.ImageView = exports.Icon = exports.Divider = exports.Form = exports.theme = exports.customTheme = exports.uiColors = exports.spacing = exports.boxShadow = exports.mobileLineHeight = exports.mobileFontSize = exports.desktopLineHeight = exports.desktopFontSize = exports.fontWeight = void 0;
+exports.M_IconButton = exports.M_HorizontalFormGroup = exports.M_Dropdown = exports.M_ContextMenuItem = exports.M_ContextMenu = exports.M_Chip = exports.M_Checkbox = exports.M_ChatList = exports.M_ChatBubbleListItem = exports.M_CardList = exports.M_Card = exports.M_BodyTextGroup = exports.M_BlogTextField = exports.M_BasicListItem = exports.M_BasicList = exports.M_BasicFormGroup = exports.M_BasicChatListItem = exports.MSContainersBox = exports.MSNavigationContainer = exports.LayoutMS = exports.MPContainersBox = exports.MPTabContainer = exports.MPNavigationContainer = exports.LayoutMP = exports.MMContainersBox = exports.MMNavigationContainer = exports.LayoutMM = exports.MFContainersBox = exports.LayoutMF = exports.D_DynamicDesktopNavBarTemplates = exports.D_UserDesktopSideTab = exports.D_DynamicDesktopNavBar = exports.D_UserDesktopTabBar = exports.D_UserDesktopNavBar = exports.D_UploadTextButton = exports.D_UploadMainButton = exports.D_UploadIconButton = exports.D_TextLabel = exports.D_TextField = exports.D_TextButton = exports.D_StatusBlock = exports.D_Select = exports.D_ReactionButton = exports.D_Radio = exports.D_PageTitleTextGroup = exports.D_MainButton = exports.D_ImageSlide = exports.D_IconButton = exports.D_HorizontalFormGroup = exports.D_Hero = void 0;
+exports.M_UploadTextButton = exports.M_UploadMainButton = exports.M_UploadIconButton = exports.M_TextLabel = exports.M_TextField = exports.M_TextButton = exports.M_StatusBlock = exports.M_Select = exports.M_ReactionButton = exports.M_Radio = exports.M_MobileTabBar = exports.M_MobileHeaderBar = exports.M_MobileBasicModal = exports.M_MobileAlertDialog = exports.M_MainButton = exports.M_ImageSlide = void 0;
 /* eslint-disable import/order */
 /* eslint-disable import/first */
 // common
@@ -46,6 +46,7 @@ Object.defineProperty(exports, "D_BlogTextField", { enumerable: true, get: funct
 Object.defineProperty(exports, "D_BodyTextGroup", { enumerable: true, get: function () { return desktop_1.D_BodyTextGroup; } });
 Object.defineProperty(exports, "D_Card", { enumerable: true, get: function () { return desktop_1.D_Card; } });
 Object.defineProperty(exports, "D_CardList", { enumerable: true, get: function () { return desktop_1.D_CardList; } });
+Object.defineProperty(exports, "D_ChatBubbleListItem", { enumerable: true, get: function () { return desktop_1.D_ChatBubbleListItem; } });
 Object.defineProperty(exports, "D_ChatList", { enumerable: true, get: function () { return desktop_1.D_ChatList; } });
 Object.defineProperty(exports, "D_Checkbox", { enumerable: true, get: function () { return desktop_1.D_Checkbox; } });
 Object.defineProperty(exports, "D_Chip", { enumerable: true, get: function () { return desktop_1.D_Chip; } });
@@ -103,6 +104,7 @@ Object.defineProperty(exports, "M_BlogTextField", { enumerable: true, get: funct
 Object.defineProperty(exports, "M_BodyTextGroup", { enumerable: true, get: function () { return mobile_1.M_BodyTextGroup; } });
 Object.defineProperty(exports, "M_Card", { enumerable: true, get: function () { return mobile_1.M_Card; } });
 Object.defineProperty(exports, "M_CardList", { enumerable: true, get: function () { return mobile_1.M_CardList; } });
+Object.defineProperty(exports, "M_ChatBubbleListItem", { enumerable: true, get: function () { return mobile_1.M_ChatBubbleListItem; } });
 Object.defineProperty(exports, "M_ChatList", { enumerable: true, get: function () { return mobile_1.M_ChatList; } });
 Object.defineProperty(exports, "M_Checkbox", { enumerable: true, get: function () { return mobile_1.M_Checkbox; } });
 Object.defineProperty(exports, "M_Chip", { enumerable: true, get: function () { return mobile_1.M_Chip; } });

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

@@ -175,5 +175,6 @@
     "sys_border_line_12": "grey100",
     "sys_component_base_08": "white",
     "sys_text_social_login_01": "grey900",
-    "sys_text_social_login_02": "grey900"
+    "sys_text_social_login_02": "grey900",
+    "sys_papp_livechat_link": "darkskyblue500"
 }

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

@@ -175,5 +175,6 @@
     "sys_border_line_12": "grey100",
     "sys_component_base_08": "black",
     "sys_text_social_login_01": "white",
-    "sys_text_social_login_02": "grey900"
+    "sys_text_social_login_02": "grey900",
+    "sys_papp_livechat_link": "skyblue500"
 }

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

@@ -527,5 +527,18 @@
     "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_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"
 }

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

@@ -1,65 +1,5 @@
 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;
-        grey30: string;
-        opacity95: string;
-        darkgrey30: string;
-        opacity40: string;
-        kakaoyellow: string;
-    };
-    readonly PaletteColor_light: {
+    readonly PaletteColor_Dark: {
         sys_container_background_01: string;
         sys_container_background_02: string;
         sys_container_background_03: string;
@@ -237,8 +177,9 @@ declare const colorSet: {
         sys_component_base_08: string;
         sys_text_social_login_01: string;
         sys_text_social_login_02: string;
+        sys_papp_livechat_link: string;
     };
-    readonly PaletteColor_Dark: {
+    readonly PaletteColor_light: {
         sys_container_background_01: string;
         sys_container_background_02: string;
         sys_container_background_03: string;
@@ -416,6 +357,67 @@ declare const colorSet: {
         sys_component_base_08: string;
         sys_text_social_login_01: string;
         sys_text_social_login_02: string;
+        sys_papp_livechat_link: 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;
+        grey30: string;
+        opacity95: string;
+        darkgrey30: string;
+        opacity40: string;
+        kakaoyellow: string;
     };
     readonly UIColor: {
         ui_cpnt_button_fill_base_primary: string;
@@ -947,6 +949,19 @@ declare const colorSet: {
         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;
     };
 };
 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 PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.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,
+    PaletteColor_light: PaletteColor_light_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

@@ -528,4 +528,17 @@ export interface UITheme {
     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;
 }

package/dist/src/desktop/components/ChatBubbleListItem/ChatBubble.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare type ChatBubbleProps = {
+    colorTheme?: 'my' | 'seller' | 'subscriber';
+    tailType?: 'none' | 'left_top' | 'right_top';
+    children?: React.ReactNode;
+};
+declare function ChatBubble({ colorTheme, tailType, children }: ChatBubbleProps): JSX.Element;
+export default ChatBubble;

package/dist/src/desktop/components/ChatBubbleListItem/ChatBubble.js

@@ -0,0 +1,76 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importStar(require("styled-components"));
+var backgroundColorTheme = {
+    my: 'ui_cpnt_list_chatbubble_base_area_my',
+    seller: 'ui_cpnt_list_chatbubble_base_area_seller',
+    subscriber: 'ui_cpnt_list_chatbubble_base_area_subscriber'
+};
+function ChatBubble(_a) {
+    var _b = _a.colorTheme, colorTheme = _b === void 0 ? 'seller' : _b, _c = _a.tailType, tailType = _c === void 0 ? 'left_top' : _c, children = _a.children;
+    return (react_1.default.createElement(S_ChatBubbleWrapper, null,
+        react_1.default.createElement(S_Tail, { width: "8", height: "11", viewBox: "0 0 8 11", tailType: tailType, colorTheme: colorTheme },
+            react_1.default.createElement("path", { d: "M1107,336.800385 C1107,341.257979 1107.46413,342.87441 1108.33566,344.50404 C1108.99708,345.740772 1109.89313,346.775532 1110.99903,347.583527 L1111,347.618755 L1110.99894,347.618755 C1108.35845,347.618755 1105.83748,347.107028 1103.52979,346.177337 C1104.54074,345.507794 1105.3496,344.61519 1105.93147,343.527194 C1106.6287,342.22349 1107,340.8866 1107,337.582996 L1107,337.582996 Z", transform: "rotate(180 555.765 173.81)" })),
+        react_1.default.createElement(S_ChatBubble, { colorTheme: colorTheme }, children)));
+}
+var none = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: none;\n"], ["\n  display: none;\n"])));
+var left_top = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  left: -4px;\n  top: 0;\n"], ["\n  left: -4px;\n  top: 0;\n"])));
+var right_top = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  transform: scaleX(-1);\n  right: -4px;\n  top: 0;\n"], ["\n  transform: scaleX(-1);\n  right: -4px;\n  top: 0;\n"])));
+var S_ChatBubbleWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: inline-block;\n  position: relative;\n"], ["\n  display: inline-block;\n  position: relative;\n"])));
+var S_ChatBubble = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-top: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n\n  background-color: ", ";\n  border-radius: 8px;\n  position: relative;\n  max-width: 960px;\n  min-width: 32px;\n"], ["\n  box-sizing: border-box;\n  padding-top: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n\n  background-color: ", ";\n  border-radius: 8px;\n  position: relative;\n  max-width: 960px;\n  min-width: 32px;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingB;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingC;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingB;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingC;
+}, function (_a) {
+    var colorTheme = _a.colorTheme, theme = _a.theme;
+    return colorTheme && theme[backgroundColorTheme[colorTheme]];
+});
+var S_Tail = styled_components_1.default.svg(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: absolute;\n  fill: ", ";\n\n  ", ";\n"], ["\n  position: absolute;\n  fill: ", ";\n\n  ", ";\n"])), function (_a) {
+    var colorTheme = _a.colorTheme, theme = _a.theme;
+    return colorTheme && theme[backgroundColorTheme[colorTheme]];
+}, function (_a) {
+    var tailType = _a.tailType;
+    return tailType &&
+        {
+            none: none,
+            left_top: left_top,
+            right_top: right_top
+        }[tailType];
+});
+exports.default = ChatBubble;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { PDSTextType, PDSValueOption } from '../../../common';
+export declare type ChatBubbleListItemProps = {
+    titleText?: PDSTextType;
+    imageMode?: 'none' | 'use';
+    imageSrc?: string;
+    hoverMode?: 'none' | 'use';
+    styleTheme?: 'seller_tail' | 'seller' | 'subscriber_tail' | 'subscriber' | 'my_tail' | 'my';
+    timeMode?: 'none' | 'use';
+    timeText?: PDSTextType;
+    contextMenuOptionArray?: PDSValueOption[];
+    contextMenuState?: 'normal' | 'disabled';
+    children?: React.ReactNode;
+    onClickContextMenuItem?: (option: PDSValueOption) => void;
+};
+declare function ChatBubbleListItem({ titleText, imageMode, imageSrc, hoverMode, styleTheme, timeMode, timeText, contextMenuOptionArray, contextMenuState, children, onClickContextMenuItem }: ChatBubbleListItemProps): JSX.Element;
+export default ChatBubbleListItem;

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

@@ -0,0 +1,160 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var styled_components_1 = __importStar(require("styled-components"));
+var hybrid_1 = require("../../../hybrid");
+var ContextMenu_1 = require("../ContextMenu");
+var ContextMenuItem_1 = require("../ContextMenuItem");
+var IconButton_1 = require("../IconButton");
+var TextLabel_1 = require("../TextLabel");
+var ChatBubble_1 = __importDefault(require("./ChatBubble"));
+var Popup_1 = require("./Popup");
+var ChatBubbleColorTheme = {
+    seller_tail: 'seller',
+    seller: 'seller',
+    subscriber_tail: 'subscriber',
+    subscriber: 'subscriber',
+    my_tail: 'my',
+    my: 'my'
+};
+var ChatBubbleTailType = {
+    seller_tail: 'left_top',
+    seller: 'none',
+    subscriber_tail: 'left_top',
+    subscriber: 'none',
+    my_tail: 'right_top',
+    my: 'none'
+};
+function ChatBubbleListItem(_a) {
+    var titleText = _a.titleText, _b = _a.imageMode, imageMode = _b === void 0 ? 'use' : _b, imageSrc = _a.imageSrc, _c = _a.hoverMode, hoverMode = _c === void 0 ? 'use' : _c, _d = _a.styleTheme, styleTheme = _d === void 0 ? 'seller_tail' : _d, _e = _a.timeMode, timeMode = _e === void 0 ? 'use' : _e, timeText = _a.timeText, contextMenuOptionArray = _a.contextMenuOptionArray, _f = _a.contextMenuState, contextMenuState = _f === void 0 ? 'normal' : _f, children = _a.children, onClickContextMenuItem = _a.onClickContextMenuItem;
+    var isMy = styleTheme.includes('my');
+    var isSeller = styleTheme.includes('seller');
+    var isTail = styleTheme.includes('tail');
+    var _g = (0, react_1.useState)(false), isContextMenuOpen = _g[0], setIsContextMenuOpen = _g[1];
+    var contextMenuRef = (0, react_1.useRef)(null);
+    var chatBody = document.querySelector('#chatMessageBox');
+    var rect = chatBody === null || chatBody === void 0 ? void 0 : chatBody.getBoundingClientRect();
+    /**
+     * @when contextMenu가 열려 있을 때
+     * @expected ChatList body의 스크롤을 숨기고, contextMenu의 외부를 클릭하면 contextMenu가 닫히도록 합니다.
+     * @clear document의 클릭 이벤트를 제거합니다.
+     */
+    (0, react_1.useEffect)(function () {
+        // NOTE pop up 개념이 생기기 전까지의 임시 조치 방법입니다.
+        if (!chatBody) {
+            return;
+        }
+        chatBody.style.overflowY = isContextMenuOpen ? 'hidden' : 'auto';
+    }, [isContextMenuOpen, chatBody]);
+    var handleMoreButtonClick = function (e) {
+        e.stopPropagation();
+        setIsContextMenuOpen(function (prev) { return !prev; });
+    };
+    var handleContextMenuItemClick = function (option) {
+        if (onClickContextMenuItem) {
+            onClickContextMenuItem(option);
+        }
+        setIsContextMenuOpen(false);
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(S_ChatBubbleListItem, { hoverMode: hoverMode, isMy: isMy, imageMode: imageMode },
+            imageMode === 'use' && (react_1.default.createElement(react_1.default.Fragment, null, isTail && !isMy ? (react_1.default.createElement(S_ImageViewWrapper, { isSeller: isSeller },
+                react_1.default.createElement(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: 40 }))) : (react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" })))),
+            react_1.default.createElement(S_RightBox, null,
+                isTail && !isMy && (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: isSeller ? 'usrTextBrandPrimary' : 'sysTextPrimary' }),
+                    react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b" }))),
+                react_1.default.createElement(S_ChatBubbleBox, null,
+                    react_1.default.createElement(S_ChatBubbleWrapper, { isMy: isMy },
+                        timeMode === 'use' && timeText && isMy && (react_1.default.createElement(S_TimeWrapper, null,
+                            react_1.default.createElement(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" }),
+                            react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }))),
+                        react_1.default.createElement(ChatBubble_1.default, { colorTheme: ChatBubbleColorTheme[styleTheme], tailType: ChatBubbleTailType[styleTheme] }, children),
+                        timeMode === 'use' && timeText && !isMy && (react_1.default.createElement(S_TimeWrapper, null,
+                            react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }),
+                            react_1.default.createElement(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" })))),
+                    hoverMode === 'use' && !isMy && (react_1.default.createElement(S_SeeMoreButton, { isContextMenuOpen: isContextMenuOpen, ref: contextMenuRef },
+                        react_1.default.createElement(IconButton_1.IconButton, { fillType: "fill", baseSize: "xsmall", iconFillType: "fill", iconSize: 20, iconName: "ic_more", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: "ui_cpnt_button_icon_enabled", onClick: handleMoreButtonClick }))))),
+            react_1.default.createElement(Popup_1.PopupProvider, null,
+                react_1.default.createElement(Popup_1.Popup, { targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "v-auto", wrapperHeight: rect === null || rect === void 0 ? void 0 : rect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } },
+                    react_1.default.createElement(ContextMenu_1.ContextMenu, null, contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return (react_1.default.createElement(ContextMenuItem_1.ContextMenuItem, { key: el.value, option: el, onClick: handleContextMenuItemClick, state: contextMenuState })); })))))));
+}
+var S_SeeMoreButton = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  width: 48px;\n  height: 24px;\n  min-width: 48px;\n  padding-right: ", ";\n  margin-top: ", ";\n  position: relative;\n  visibility: ", ";\n  display: flex;\n  justify-content: right;\n"], ["\n  box-sizing: border-box;\n  width: 48px;\n  height: 24px;\n  min-width: 48px;\n  padding-right: ", ";\n  margin-top: ", ";\n  position: relative;\n  visibility: ", ";\n  display: flex;\n  justify-content: right;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingB;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingB;
+}, function (_a) {
+    var isContextMenuOpen = _a.isContextMenuOpen;
+    return (isContextMenuOpen ? 'visible' : 'hidden');
+});
+var MyChatBubbleListItem = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-right: ", ";\n"], ["\n  margin-right: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingA;
+});
+var NoImageChatBubbleListItem = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-left: ", ";\n"], ["\n  margin-left: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingA;
+});
+var S_ChatBubbleListItem = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  height: fit-content;\n  max-width: 100%;\n\n  :hover {\n    ", " {\n      visibility: ", ";\n    }\n  }\n\n  ", ";\n  ", ";\n"], ["\n  display: flex;\n  height: fit-content;\n  max-width: 100%;\n\n  :hover {\n    ", " {\n      visibility: ", ";\n    }\n  }\n\n  ", ";\n  ", ";\n"])), S_SeeMoreButton, function (_a) {
+    var hoverMode = _a.hoverMode;
+    return hoverMode === 'use' && 'visible';
+}, function (_a) {
+    var isMy = _a.isMy;
+    return isMy && MyChatBubbleListItem;
+}, function (_a) {
+    var imageMode = _a.imageMode;
+    return imageMode === 'none' && NoImageChatBubbleListItem;
+});
+var ImageViewSeller = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  box-shadow: 0 0 0 2px ", " inset;\n"], ["\n  box-shadow: 0 0 0 2px ", " inset;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_profile_image_border_brandprimary;
+});
+var ImageViewDefault = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  box-shadow: 0 0 0 1px ", " inset;\n"], ["\n  box-shadow: 0 0 0 1px ", " inset;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_profile_image_border;
+});
+var S_ImageViewWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  border-radius: 50%;\n  height: fit-content;\n  min-width: fit-content;\n  width: fit-content;\n  margin-right: ", ";\n  position: relative;\n\n  &::after {\n    content: '';\n    box-sizing: border-box;\n    border-radius: 50%;\n    height: 100%;\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    ", ";\n  }\n"], ["\n  border-radius: 50%;\n  height: fit-content;\n  min-width: fit-content;\n  width: fit-content;\n  margin-right: ", ";\n  position: relative;\n\n  &::after {\n    content: '';\n    box-sizing: border-box;\n    border-radius: 50%;\n    height: 100%;\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingB;
+}, function (_a) {
+    var isSeller = _a.isSeller;
+    return (isSeller ? ImageViewSeller : ImageViewDefault);
+});
+var S_RightBox = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
+var S_ChatBubbleBox = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n"], ["\n  display: flex;\n  justify-content: space-between;\n"])));
+var MyChatBubble = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  justify-content: end;\n"], ["\n  justify-content: end;\n"])));
+var S_ChatBubbleWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  flex: 1;\n  display: flex;\n\n  ", ";\n"], ["\n  flex: 1;\n  display: flex;\n\n  ", ";\n"])), function (_a) {
+    var isMy = _a.isMy;
+    return isMy && MyChatBubble;
+});
+var S_TimeWrapper = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  align-self: end;\n  display: flex;\n"], ["\n  align-self: end;\n  display: flex;\n"])));
+exports.default = ChatBubbleListItem;
+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;

package/dist/src/desktop/components/ChatBubbleListItem/Popup.d.ts

@@ -0,0 +1,19 @@
+import React, { MutableRefObject } from 'react';
+declare type Props = {
+    targetRef: MutableRefObject<HTMLElement | null>;
+    isOpen: boolean;
+    onClickOutside?: () => void;
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    placement: string;
+    wrapperHeight?: number;
+    children: React.ReactNode;
+};
+declare function Popup({ targetRef, isOpen, onClickOutside, onClick, placement, wrapperHeight, children }: Props): JSX.Element;
+/**
+ * 팝업 루트 프로바이더
+ * 팝업을 사용하기 위해서는 팝업 프로바이더가 상위 컴포넌트로 있어야 합니다.
+ */
+declare function PopupProvider({ children }: {
+    children: React.ReactNode;
+}): JSX.Element;
+export { PopupProvider, Popup };