pds-dev-kit-web-test 2.7.453 → 2.7.455

package/dist/src/desktop/layout/LayoutWT/ContainersBox/ContainersBox.d.ts

@@ -1,7 +1,7 @@
 import type { UiColors } from '../../../../common';
 import type { MutableRefObject } from 'react';
 export type ContainersBoxProps = {
-    layoutType: 'WTA_1' | 'WTA_2' | 'WTA_3' | 'WTB_1' | 'WTC_1' | 'WTD_1' | 'WTD_2' | 'WTD_3' | 'WTD_4' | 'WTD_5' | 'WTD_6' | 'WTE_1' | 'WTF_1' | 'WTF_2' | 'WTF_3' | 'WTF_4' | 'WTF_5' | 'WTF_6' | 'WTG_1' | 'WTH_1' | 'WTH_2' | 'WTH_3' | 'WTI_1' | 'WTI_2' | 'WTJ_1' | 'WTK_1' | 'WTK_2' | 'WTK_3' | 'WTK_4' | 'WTL_1' | 'WTM_1' | 'WTM_2' | 'WTM_3' | 'WTN_1' | 'WTN_2' | 'WTN_3' | 'WTO_1' | 'WTP_1' | 'WTP_2' | 'WTQ_1' | 'WTS_1' | 'WTS_2' | 'WTT_1' | 'WTT_2' | 'WTU_1' | 'WTV_1' | 'WTW_1' | 'WTX_1';
+    layoutType: 'WTA_1' | 'WTA_2' | 'WTA_3' | 'WTB_1' | 'WTC_1' | 'WTD_1' | 'WTD_2' | 'WTD_3' | 'WTD_4' | 'WTD_5' | 'WTD_6' | 'WTE_1' | 'WTF_1' | 'WTF_2' | 'WTF_3' | 'WTF_4' | 'WTF_5' | 'WTF_6' | 'WTG_1' | 'WTH_1' | 'WTH_2' | 'WTH_3' | 'WTI_1' | 'WTI_2' | 'WTJ_1' | 'WTK_1' | 'WTK_2' | 'WTK_3' | 'WTK_4' | 'WTL_1' | 'WTM_1' | 'WTM_2' | 'WTM_3' | 'WTN_1' | 'WTN_2' | 'WTN_3' | 'WTO_1' | 'WTP_1' | 'WTP_2' | 'WTQ_1' | 'WTS_1' | 'WTS_2' | 'WTT_1' | 'WTT_2' | 'WTU_1' | 'WTU_2' | 'WTV_1' | 'WTW_1' | 'WTX_1';
     pageMenuContent?: JSX.Element;
     tabMenuContent?: JSX.Element;
     subMenuContent?: JSX.Element;

package/dist/src/desktop/layout/LayoutWT/ContainersBox/ContainersBox.js

@@ -89,6 +89,7 @@ var ContainersBox = function (_a) {
                 WTT_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
                 WTT_2: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
                 WTU_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
+                WTU_2: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
                 WTV_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
                 WTW_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
                 WTX_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})
@@ -138,6 +139,7 @@ var ContainersBox = function (_a) {
                         WTT_1: ((0, jsx_runtime_1.jsx)(Containers_1.PageMenuContainer, { pageMenuType: "top_page_menu", pageMenuContent: pageMenuContent, containerColor: containerColor, areaColor: areaColor })),
                         WTT_2: ((0, jsx_runtime_1.jsx)(Containers_1.PageMenuContainer, { pageMenuType: "top_page_menu", pageMenuContent: pageMenuContent, containerColor: containerColor, areaColor: areaColor })),
                         WTU_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
+                        WTU_2: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
                         WTV_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
                         WTW_1: ((0, jsx_runtime_1.jsx)(Containers_1.PageMenuContainer, { pageMenuType: "top_page_menu", pageMenuContent: pageMenuContent, containerColor: containerColor, areaColor: areaColor })),
                         WTX_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})
@@ -187,6 +189,7 @@ var ContainersBox = function (_a) {
                         WTT_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
                         WTT_2: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
                         WTU_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
+                        WTU_2: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
                         WTV_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
                         WTW_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
                         WTX_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})
@@ -236,6 +239,7 @@ var ContainersBox = function (_a) {
                                 WTT_1: '',
                                 WTT_2: '',
                                 WTU_1: '',
+                                WTU_2: '',
                                 WTV_1: '',
                                 WTW_1: '',
                                 WTX_1: ''

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

@@ -138,7 +138,7 @@ function ChatBubbleListItem(_a) {
         }
         setIsContextMenuOpen(false);
     };
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_ChatBubbleListItem, __assign({ "x-pds-name": "ChatBubbleListItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", isMe: isMe }, { children: [hasLeftSpacing ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isProfileImageShow ? ((0, jsx_runtime_1.jsx)(S_ImageViewWrapper, __assign({ isOtherAvatarImpact: styleTheme === 'other_avatar_impact', colorTheme: colorTheme }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: styleTheme === 'other_avatar_impact' ? 36 : 38 }) }))) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" })) })) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [isTitleTextShow && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: titleTextColorTheme }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" })] })), (0, jsx_runtime_1.jsxs)(S_ChatBubbleBox, __assign({ isMe: isMe }, { children: [(0, jsx_runtime_1.jsxs)(S_ChatBubbleWrapper, __assign({ isMe: isMe }, { children: [(0, jsx_runtime_1.jsxs)(S_BubbleWrapper, { children: [isMe && ((0, jsx_runtime_1.jsxs)(S_Box, { children: [downloadIBtnMode === 'use' && (0, jsx_runtime_1.jsx)("div", { style: { height: '32px', width: '1px' } }), (0, jsx_runtime_1.jsx)(S_DownloadIconWrapper, __assign({ isMe: isMe }, { children: downloadIBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { shapeType: "circular", iconFillType: "fill", baseColorKey: "ui_cpnt_list_chatbubble_download_button_base", iconColorKey: "ui_cpnt_button_icon_white", iconSize: 16, iconName: "ic_download", onClick: onClickDownloadIBtn })) })), (0, jsx_runtime_1.jsxs)(S_TimeWrapper, __assign({ isMe: isMe }, { children: [labelText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: labelText, styleTheme: "caption2Bold", colorTheme: "sysTextTertiary" })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" }))] }))] })), (0, jsx_runtime_1.jsx)(ChatBubble_1.default, __assign({ colorTheme: colorTheme, tailType: chatBubbleTailType[styleTheme] }, { children: children })), !isMe && ((0, jsx_runtime_1.jsxs)(S_Box, { children: [downloadIBtnMode === 'use' && (0, jsx_runtime_1.jsx)("div", { style: { height: '32px', width: '1px' } }), (0, jsx_runtime_1.jsx)(S_DownloadIconWrapper, __assign({ isMe: isMe }, { children: downloadIBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { shapeType: "circular", iconFillType: "fill", baseColorKey: "ui_cpnt_list_chatbubble_download_button_base", iconColorKey: "ui_cpnt_button_icon_white", iconSize: 16, iconName: "ic_download", onClick: onClickDownloadIBtn })) })), (0, jsx_runtime_1.jsxs)(S_TimeWrapper, __assign({ isMe: isMe }, { children: [labelText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: labelText, styleTheme: "caption2Bold", colorTheme: "sysTextTertiary" })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" }))] }))] }))] }), (0, jsx_runtime_1.jsx)(components_1.ReactionRow, { isMe: isMe, downloadIBtnMode: downloadIBtnMode, reactionBtnMode: reactionBtnMode, reactionBtnText: reactionBtnText, reactionArray: reactionArray, reactionBubblePosition: reactionBubblePosition, onClickReactionBtn: onClickReactionBtn })] })), hoverMode === 'use' && !isMe && ((0, jsx_runtime_1.jsx)(S_SeeMoreButton, __assign({ isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef }, { children: (0, jsx_runtime_1.jsx)(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 }) })))] }))] }), (0, jsx_runtime_1.jsx)(Popup_1.PopupProvider, { children: (0, jsx_runtime_1.jsx)(Popup_1.Popup, __assign({ targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "top-end", wrapperHeight: rect === null || rect === void 0 ? void 0 : rect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { children: contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return ((0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, onClick: handleContextMenuItemClick, state: contextMenuState }, el.value)); }) }) })) })] })) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_ChatBubbleListItem, __assign({ "x-pds-name": "ChatBubbleListItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", isMe: isMe }, { children: [hasLeftSpacing ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isProfileImageShow ? ((0, jsx_runtime_1.jsx)(S_ImageViewWrapper, __assign({ isOtherAvatarImpact: styleTheme === 'other_avatar_impact', colorTheme: colorTheme }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: styleTheme === 'other_avatar_impact' ? 36 : 38 }) }))) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" })) })) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [isTitleTextShow && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: titleTextColorTheme }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" })] })), (0, jsx_runtime_1.jsxs)(S_ChatBubbleBox, __assign({ isMe: isMe }, { children: [(0, jsx_runtime_1.jsxs)(S_ChatBubbleWrapper, __assign({ isMe: isMe }, { children: [(0, jsx_runtime_1.jsxs)(S_BubbleWrapper, { children: [isMe && ((0, jsx_runtime_1.jsxs)(S_Box, __assign({ hasBottomElement: !!labelText || !!timeMode }, { children: [(0, jsx_runtime_1.jsx)(S_DownloadIconWrapper, __assign({ isMe: isMe }, { children: downloadIBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { shapeType: "circular", iconFillType: "fill", baseColorKey: "ui_cpnt_list_chatbubble_download_button_base", iconColorKey: "ui_cpnt_button_icon_white", iconSize: 16, iconName: "ic_download", onClick: onClickDownloadIBtn })) })), (0, jsx_runtime_1.jsxs)(S_TimeWrapper, __assign({ isMe: isMe }, { children: [labelText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: labelText, styleTheme: "caption2Bold", colorTheme: "sysTextTertiary" })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" }))] }))] }))), (0, jsx_runtime_1.jsx)(ChatBubble_1.default, __assign({ colorTheme: colorTheme, tailType: chatBubbleTailType[styleTheme] }, { children: children })), !isMe && ((0, jsx_runtime_1.jsxs)(S_Box, __assign({ hasBottomElement: !!labelText || !!timeMode }, { children: [(0, jsx_runtime_1.jsx)(S_DownloadIconWrapper, __assign({ isMe: isMe }, { children: downloadIBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { shapeType: "circular", iconFillType: "fill", baseColorKey: "ui_cpnt_list_chatbubble_download_button_base", iconColorKey: "ui_cpnt_button_icon_white", iconSize: 16, iconName: "ic_download", onClick: onClickDownloadIBtn })) })), (0, jsx_runtime_1.jsxs)(S_TimeWrapper, __assign({ isMe: isMe }, { children: [labelText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: labelText, styleTheme: "caption2Bold", colorTheme: "sysTextTertiary" })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" }))] }))] })))] }), (0, jsx_runtime_1.jsx)(components_1.ReactionRow, { isMe: isMe, downloadIBtnMode: downloadIBtnMode, reactionBtnMode: reactionBtnMode, reactionBtnText: reactionBtnText, reactionArray: reactionArray, reactionBubblePosition: reactionBubblePosition, onClickReactionBtn: onClickReactionBtn })] })), hoverMode === 'use' && !isMe && ((0, jsx_runtime_1.jsx)(S_SeeMoreButton, __assign({ isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef }, { children: (0, jsx_runtime_1.jsx)(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 }) })))] }))] }), (0, jsx_runtime_1.jsx)(Popup_1.PopupProvider, { children: (0, jsx_runtime_1.jsx)(Popup_1.Popup, __assign({ targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "top-end", wrapperHeight: rect === null || rect === void 0 ? void 0 : rect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { children: contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return ((0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, onClick: handleContextMenuItemClick, state: contextMenuState }, el.value)); }) }) })) })] })) }));
 }
 var MyChatBubbleListItem = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-right: ", ";\n"], ["\n  margin-right: ", ";\n"])), function (_a) {
     var theme = _a.theme;
@@ -164,14 +164,17 @@ var S_ImageViewWrapper = styled_components_1.default.div(templateObject_5 || (te
     return (isOtherAvatarImpact ? ImageViewBrandPrimary : ImageViewDefault);
 });
 var S_RightBox = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
-var S_DownloadIconWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin-left: ", ";\n  margin-right: ", ";\n"], ["\n  margin-left: ", ";\n  margin-right: ", ";\n"])), function (_a) {
+var S_DownloadIconWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  margin-left: ", ";\n  margin-right: ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  margin-left: ", ";\n  margin-right: ", ";\n"])), function (_a) {
     var isMe = _a.isMe, theme = _a.theme;
     return !isMe && theme.spacing.spacingB;
 }, function (_a) {
     var isMe = _a.isMe, theme = _a.theme;
     return isMe && theme.spacing.spacingB;
 });
-var S_Box = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n"])));
+var S_Box = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: ", ";\n"])), function (_a) {
+    var hasBottomElement = _a.hasBottomElement;
+    return (hasBottomElement ? 'space-between' : 'center');
+});
 var S_ChatBubbleBox = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n\n  ", ";\n"], ["\n  display: flex;\n  justify-content: space-between;\n\n  ", ";\n"])), function (_a) {
     var isMe = _a.isMe;
     return isMe && MyChatBubble;
@@ -181,7 +184,7 @@ var S_ChatBubbleWrapper = styled_components_1.default.div(templateObject_11 || (
     var isMe = _a.isMe;
     return isMe && 'flex-end';
 });
-var S_TimeWrapper = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  align-items: ", ";\n  align-self: ", ";\n  display: flex;\n  flex-direction: column;\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  align-items: ", ";\n  align-self: ", ";\n  display: flex;\n  flex-direction: column;\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
+var S_TimeWrapper = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  align-items: ", ";\n  align-self: ", ";\n  display: flex;\n  flex-direction: column;\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"], ["\n  align-items: ", ";\n  align-self: ", ";\n  display: flex;\n  flex-direction: column;\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"])), function (_a) {
     var isMe = _a.isMe;
     return isMe && 'flex-end';
 }, function (_a) {
@@ -193,6 +196,9 @@ var S_TimeWrapper = styled_components_1.default.div(templateObject_12 || (templa
 }, function (_a) {
     var isMe = _a.isMe, theme = _a.theme;
     return isMe && theme.spacing.spacingA;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingA;
 });
 var S_SeeMoreButton = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  height: 24px;\n  justify-content: right;\n  margin-top: ", ";\n  min-width: 48px;\n  opacity: ", ";\n  padding-right: ", ";\n  position: relative;\n  width: 48px;\n\n  ", ":hover & {\n    opacity: ", ";\n  }\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  height: 24px;\n  justify-content: right;\n  margin-top: ", ";\n  min-width: 48px;\n  opacity: ", ";\n  padding-right: ", ";\n  position: relative;\n  width: 48px;\n\n  ", ":hover & {\n    opacity: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme;

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

@@ -11,7 +11,7 @@ type Props = {
     name: Path<IFormValues>;
     hintText?: PDSTextType;
     defaultAmount?: number;
-    size?: 'large' | 'rlarge';
+    size?: 'large' | 'rlarge' | 'medium' | 'small';
     responsiveMode?: 'none' | 'use';
     state?: 'normal' | 'read_only' | 'disabled';
     dropdownState?: 'normal' | 'read_only';
@@ -28,6 +28,7 @@ type Props = {
     useDotBadge?: 'none' | 'use';
     deleteBtnMode?: 'none' | 'use';
     minPriceAmount?: string | number;
+    onExChange?: (e: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => void;
     onChange?: (value: string) => void;
     onBlur?: (e: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement>) => void;
     onFocus?: (e: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement>) => void;
@@ -39,5 +40,5 @@ type Props = {
         displayValue: string;
     }) => void;
 } & Omit<Partial<TextFieldBaseProps>, 'textAlign' | 'preventBlankMode' | 'enterSubmitMode' | 'multiRows' | 'colorTheme'>;
-declare function PriceTextField({ name, hintText, defaultAmount, colorTheme, size, fontWeight, hintTextFontWeight, responsiveMode, state, dropdownState, customWidth, baseCurrency, currencies, decimalPlaces, exchangeRates, textAlign, validation, useRequiredValidation, useDotBadge, deleteBtnMode, minPriceAmount, onChange, onBlur, onFocus, onTarget, onCurrencyChange, onValueChange }: Props): JSX.Element;
+declare function PriceTextField({ name, hintText, defaultAmount, colorTheme, size, fontWeight, hintTextFontWeight, responsiveMode, state, dropdownState, customWidth, baseCurrency, currencies, decimalPlaces, exchangeRates, textAlign, validation, useRequiredValidation, useDotBadge, deleteBtnMode, minPriceAmount, onChange, onExChange, onBlur, onFocus, onTarget, onCurrencyChange, onValueChange }: Props): JSX.Element;
 export default PriceTextField;

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

@@ -66,7 +66,7 @@ exports.DEFAULT_DECIMAL_PLACES = {
 function PriceTextField(_a) {
     var _b;
     var _c;
-    var name = _a.name, hintText = _a.hintText, defaultAmount = _a.defaultAmount, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'none' : _d, _e = _a.size, size = _e === void 0 ? 'large' : _e, _f = _a.fontWeight, fontWeight = _f === void 0 ? 'bold' : _f, _g = _a.hintTextFontWeight, hintTextFontWeight = _g === void 0 ? 'normal' : _g, _h = _a.responsiveMode, responsiveMode = _h === void 0 ? 'none' : _h, _j = _a.state, state = _j === void 0 ? 'normal' : _j, _k = _a.dropdownState, dropdownState = _k === void 0 ? 'normal' : _k, customWidth = _a.customWidth, _l = _a.baseCurrency, baseCurrency = _l === void 0 ? pricing_1.CurrencyCode.KRW : _l, _m = _a.currencies, currencies = _m === void 0 ? [pricing_1.CurrencyCode.KRW, pricing_1.CurrencyCode.USD] : _m, _o = _a.decimalPlaces, decimalPlaces = _o === void 0 ? exports.DEFAULT_DECIMAL_PLACES : _o, _p = _a.exchangeRates, exchangeRates = _p === void 0 ? (_b = {}, _b[pricing_1.CurrencyCode.KRW] = 1300, _b[pricing_1.CurrencyCode.USD] = 1, _b) : _p, _q = _a.textAlign, textAlign = _q === void 0 ? 'right' : _q, validation = _a.validation, _r = _a.useRequiredValidation, useRequiredValidation = _r === void 0 ? 'use' : _r, _s = _a.useDotBadge, useDotBadge = _s === void 0 ? 'use' : _s, _t = _a.deleteBtnMode, deleteBtnMode = _t === void 0 ? 'use' : _t, minPriceAmount = _a.minPriceAmount, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, onTarget = _a.onTarget, onCurrencyChange = _a.onCurrencyChange, onValueChange = _a.onValueChange;
+    var name = _a.name, hintText = _a.hintText, defaultAmount = _a.defaultAmount, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'none' : _d, _e = _a.size, size = _e === void 0 ? 'large' : _e, _f = _a.fontWeight, fontWeight = _f === void 0 ? 'bold' : _f, _g = _a.hintTextFontWeight, hintTextFontWeight = _g === void 0 ? 'normal' : _g, _h = _a.responsiveMode, responsiveMode = _h === void 0 ? 'none' : _h, _j = _a.state, state = _j === void 0 ? 'normal' : _j, _k = _a.dropdownState, dropdownState = _k === void 0 ? 'normal' : _k, customWidth = _a.customWidth, _l = _a.baseCurrency, baseCurrency = _l === void 0 ? pricing_1.CurrencyCode.KRW : _l, _m = _a.currencies, currencies = _m === void 0 ? [pricing_1.CurrencyCode.KRW, pricing_1.CurrencyCode.USD] : _m, _o = _a.decimalPlaces, decimalPlaces = _o === void 0 ? exports.DEFAULT_DECIMAL_PLACES : _o, _p = _a.exchangeRates, exchangeRates = _p === void 0 ? (_b = {}, _b[pricing_1.CurrencyCode.KRW] = 1300, _b[pricing_1.CurrencyCode.USD] = 1, _b) : _p, _q = _a.textAlign, textAlign = _q === void 0 ? 'right' : _q, validation = _a.validation, _r = _a.useRequiredValidation, useRequiredValidation = _r === void 0 ? 'use' : _r, _s = _a.useDotBadge, useDotBadge = _s === void 0 ? 'use' : _s, _t = _a.deleteBtnMode, deleteBtnMode = _t === void 0 ? 'use' : _t, minPriceAmount = _a.minPriceAmount, onChange = _a.onChange, onExChange = _a.onExChange, onBlur = _a.onBlur, onFocus = _a.onFocus, onTarget = _a.onTarget, onCurrencyChange = _a.onCurrencyChange, onValueChange = _a.onValueChange;
     var t = (0, react_i18next_1.useTranslation)('translation').t;
     var _u = (0, react_1.useState)(defaultAmount ? String(defaultAmount) : ''), baseCurrencyValue = _u[0], setBaseCurrencyValue = _u[1];
     var _v = (0, react_1.useState)(baseCurrency), selectedCurrency = _v[0], setSelectedCurrency = _v[1];
@@ -307,6 +307,9 @@ function PriceTextField(_a) {
                 }, 0);
             }
         }
+        if (onExChange) {
+            onExChange(e);
+        }
     };
     var handleBlur = function (e) {
         setIsInputFocused(false);
@@ -423,8 +426,8 @@ function PriceTextField(_a) {
                                             policy_1.DEFAULT_CURRENCY_PRICE_POLICIES[baseCurrency].minPayment.amount,
                                         currency: baseCurrency
                                     })
-                                }), value: displayValue, textAlign: textAlign, validation: finalValidation, textLineType: "single", inputType: "text", inputMode: "decimal", preventBlankMode: "all", enterSubmitMode: "none", state: isInputReadOnly ? 'read_only' : state, colorTheme: colorTheme, textSize: "form2", textWeight: fontWeight === 'bold' ? 'bold' : 'normal', hintTextWeight: hintTextFontWeight === 'bold' ? 'bold' : 'normal', fieldPaddingRight: size === 'large' || size === 'rlarge' ? 12 : undefined, deleteIconMode: deleteBtnMode, deleteIconSize: size === 'large' || size === 'rlarge' ? 20 : 16, deleteIconColor: deleteIconColor, isFocused: isInputFocused, suffixTextRightSpacingMode: size === 'large' || size === 'rlarge' ? 'use' : 'none', onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, onTarget: handleTarget, onDelete: handleDelete }) })), (0, jsx_runtime_1.jsx)(S_DropdownWrapper, __assign({ ref: dropdownRef, inputSize: size, onClick: handleDropdownClick, onBlur: handleDropdownBlur, tabIndex: 0, isFocused: isDropdownFocused, state: dropdownState, isError: Boolean(isError) }, { children: (0, jsx_runtime_1.jsxs)(S_Select, __assign({ inputSize: size }, { children: [useDotBadge === 'use' && selectedCurrency === baseCurrency && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(S_Badge, {}), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: selectedCurrency, styleTheme: "form2Bold", singleLineMode: "use", colorTheme: "sysTextPrimary", ellipsisMode: "use", customFontWeight: "bold", colorOverride: getDropdownTextColorKey(), lineLimit: 1 }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, fillType: "line", iconName: isDropdownFocused ? 'ic_arrow_up' : 'ic_arrow_down', colorKey: getArrowIconColorKey() })] })) }))] })), isDropdownFocused &&
-                (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(S_ContextMenuWrapper, __assign({ ref: contextMenuRef, contextMenuPositionCss: contextMenuPositionCss }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, __assign({ autoWidthMode: "use", customWidth: getDropdownContextMenuCustomWidth() }, { children: currencyOptions.map(function (el) { return ((0, jsx_runtime_1.jsx)("div", __assign({ onMouseDown: function () { return handleCurrencySelect(el); } }, { children: (0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, size: "large", isSelected: selectedCurrency === el.currency, state: el.state, displayType: "text_only" }) }), el.value)); }) })) })), document.body), ((_c = (0, types_1.getErrorByName)(errors, name)) === null || _c === void 0 ? void 0 : _c.message) && state === 'normal' && ((0, jsx_runtime_1.jsx)(S_Error, { children: (0, types_1.getErrorByName)(errors, name).message }))] })));
+                                }), value: displayValue, textAlign: textAlign, validation: finalValidation, textLineType: "single", inputType: "text", inputMode: "decimal", preventBlankMode: "all", enterSubmitMode: "none", state: isInputReadOnly ? 'read_only' : state, colorTheme: colorTheme, textSize: "form2", textWeight: fontWeight === 'bold' ? 'bold' : 'normal', hintTextWeight: hintTextFontWeight === 'bold' ? 'bold' : 'normal', fieldPaddingRight: 12, deleteIconMode: deleteBtnMode, deleteIconSize: size === 'large' || size === 'rlarge' ? 20 : 16, deleteIconColor: deleteIconColor, isFocused: isInputFocused, suffixTextRightSpacingMode: size === 'large' || size === 'rlarge' ? 'use' : 'none', onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, onTarget: handleTarget, onDelete: handleDelete }) })), (0, jsx_runtime_1.jsx)(S_DropdownWrapper, __assign({ ref: dropdownRef, inputSize: size, onClick: handleDropdownClick, onBlur: handleDropdownBlur, tabIndex: 0, isFocused: isDropdownFocused, state: dropdownState, isError: Boolean(isError) }, { children: (0, jsx_runtime_1.jsxs)(S_Select, __assign({ inputSize: size }, { children: [useDotBadge === 'use' && selectedCurrency === baseCurrency && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(S_Badge, {}), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: selectedCurrency, styleTheme: "form2Bold", singleLineMode: "use", colorTheme: "sysTextPrimary", ellipsisMode: "use", customFontWeight: "bold", colorOverride: getDropdownTextColorKey(), lineLimit: 1 }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, fillType: "line", iconName: isDropdownFocused ? 'ic_arrow_up' : 'ic_arrow_down', colorKey: getArrowIconColorKey() })] })) }))] })), isDropdownFocused &&
+                (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(S_ContextMenuWrapper, __assign({ ref: contextMenuRef, contextMenuPositionCss: contextMenuPositionCss }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, __assign({ autoWidthMode: "use", customWidth: getDropdownContextMenuCustomWidth() }, { children: currencyOptions.map(function (el) { return ((0, jsx_runtime_1.jsx)("div", __assign({ onMouseDown: function () { return handleCurrencySelect(el); } }, { children: (0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, size: size === 'rlarge' ? 'large' : size, isSelected: selectedCurrency === el.currency, state: el.state, displayType: "text_only" }) }), el.value)); }) })) })), document.body), ((_c = (0, types_1.getErrorByName)(errors, name)) === null || _c === void 0 ? void 0 : _c.message) && state === 'normal' && ((0, jsx_runtime_1.jsx)(S_Error, { children: (0, types_1.getErrorByName)(errors, name).message }))] })));
 }
 var S_PriceTextField = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  ", ";\n  ", "\n"], ["\n  ", ";\n  ", ";\n  ", "\n"])), function (_a) {
     var inputSize = _a.inputSize;
@@ -534,7 +537,7 @@ var S_TextFieldBaseWrapper = styled_components_1.default.div(templateObject_12 |
     var state = _a.state, theme = _a.theme;
     return state === 'normal' && (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      &:hover {\n        background-color: ", ";\n      }\n\n      &:active {\n        background-color: ", ";\n      }\n    "], ["\n      &:hover {\n        background-color: ", ";\n      }\n\n      &:active {\n        background-color: ", ";\n      }\n    "])), theme.ui_cpnt_textfield_base_hover, theme.ui_cpnt_textfield_base_pressed);
 });
-var S_DropdownWrapper = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-radius: ", ";\n\n  cursor: ", ";\n\n  display: flex;\n  height: 100%;\n  min-width: 50px;\n  outline: none;\n\n  padding: 0 ", ";\n\n  ", "\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-radius: ", ";\n\n  cursor: ", ";\n\n  display: flex;\n  height: 100%;\n  min-width: 50px;\n  outline: none;\n\n  padding: 0 ", ";\n\n  ", "\n"])), function (_a) {
+var S_DropdownWrapper = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-radius: ", ";\n\n  cursor: ", ";\n\n  display: flex;\n  height: 100%;\n  min-width: 50px;\n  outline: none;\n\n  padding: 0\n    ", ";\n\n  ", "\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-radius: ", ";\n\n  cursor: ", ";\n\n  display: flex;\n  height: 100%;\n  min-width: 50px;\n  outline: none;\n\n  padding: 0\n    ", ";\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme, state = _a.state;
     if (state === 'disabled' || state === 'read_only') {
         return theme.ui_cpnt_textfield_base_disabled;
@@ -564,8 +567,10 @@ var S_DropdownWrapper = styled_components_1.default.div(templateObject_14 || (te
             return 'pointer';
     }
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingD;
+    var theme = _a.theme, inputSize = _a.inputSize;
+    return inputSize === 'small' || inputSize === 'medium'
+        ? theme.spacing.spacingB
+        : theme.spacing.spacingD;
 }, function (_a) {
     var state = _a.state, theme = _a.theme;
     return state === 'normal' && (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n      &:hover {\n        background-color: ", ";\n      }\n\n      &:active {\n        background-color: ", ";\n      }\n    "], ["\n      &:hover {\n        background-color: ", ";\n      }\n\n      &:active {\n        background-color: ", ";\n      }\n    "])), theme.ui_cpnt_textfield_base_hover, theme.ui_cpnt_textfield_base_pressed);

package/dist/src/sub/DynamicLayout/CompositionEditor/CompositionEditor.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { TypeOfCompositionAction } from '../compositionActionTypes';
 import type { CustomSectionShortcutKeysType, IComposition, PlaceRestrictionType } from '../types';
-import type { Layout } from 'publ-echo-test/dist/lib/GridLayoutEditor/types';
+import type { Layout } from 'publ-echo/dist/lib/GridLayoutEditor/types';
 export type LayoutsType = {
     sm: Layout;
     lg: Layout;

package/dist/src/sub/DynamicLayout/CompositionEditor/CompositionEditor.js

@@ -52,9 +52,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable @typescript-eslint/no-unused-vars */
-var publ_echo_test_1 = require("publ-echo-test");
-var group_1 = require("publ-echo-test/dist/lib/GridLayoutEditor/group");
-var renderHelpers_1 = require("publ-echo-test/dist/lib/GridLayoutEditor/utils/renderHelpers");
+var publ_echo_1 = require("publ-echo");
+var group_1 = require("publ-echo/dist/lib/GridLayoutEditor/group");
+var renderHelpers_1 = require("publ-echo/dist/lib/GridLayoutEditor/utils/renderHelpers");
 var react_1 = __importStar(require("react"));
 var react_i18next_1 = require("react-i18next");
 var ErrorBoundary_1 = require("../../DynamicLayout/components/Section/ErrorBoundary");
@@ -71,7 +71,7 @@ var group_2 = require("../sections/CustomSection/newUtils/group");
 var util_1 = require("../sections/CustomSection/util");
 var parseSectionPadding_1 = __importDefault(require("../sections/CustomSection/util/layoutPropParsers/parseSectionPadding"));
 var parseCompositionPlacement_1 = __importDefault(require("../sections/CustomSection/util/parseCompositionPlacement"));
-var Responsive = (0, publ_echo_test_1.WidthProvider)(publ_echo_test_1.ResponsiveGridEditor);
+var Responsive = (0, publ_echo_1.WidthProvider)(publ_echo_1.ResponsiveGridEditor);
 var CompositionEditor = (0, react_1.forwardRef)(function CompositionEditorCanvas(props, ref) {
     var _a, _b, _c, _d;
     var _e = props.editorProps, device = _e.device, shortcutKeyMode = _e.shortcutKeyMode, placementRestriction = _e.placementRestriction, compositionActionHandler = _e.compositionActionHandler;

package/dist/src/sub/DynamicLayout/CompositionRenderer/Composition.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { CB_ALL_CODES } from '../sections/CustomSection/types';
 import type { IComposition } from '../types';
-import type { Layout } from 'publ-echo-test/dist/lib/GridLayoutEditor/types';
+import type { Layout } from 'publ-echo/dist/lib/GridLayoutEditor/types';
 export type LayoutsType = {
     sm: Layout;
     lg: Layout;

package/dist/src/sub/DynamicLayout/CompositionRenderer/Composition.js

@@ -42,32 +42,25 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-/* eslint-disable @typescript-eslint/no-unused-vars */
 var react_1 = __importStar(require("react"));
 var react_i18next_1 = require("react-i18next");
 var ErrorBoundary_1 = require("../../DynamicLayout/components/Section/ErrorBoundary");
 var dynamicLayoutContext_1 = require("../../DynamicLayout/dynamicLayoutContext");
 var styled_components_1 = __importDefault(require("styled-components"));
-require("../components");
-require("../components/Section/components/CustomSectionBackground");
 var gleStyles_1 = require("../gleStyles");
 var useResizableObserver_1 = require("../sections/CustomSection/hooks/useResizableObserver");
 var types_1 = require("../sections/CustomSection/types");
 var util_1 = require("../sections/CustomSection/util");
 var parseSectionPadding_1 = __importDefault(require("../sections/CustomSection/util/layoutPropParsers/parseSectionPadding"));
 var parseCompositionPlacement_1 = __importDefault(require("../sections/CustomSection/util/parseCompositionPlacement"));
-require("../sections/CustomSection/util/stylePropParsers/parseStylePropBorder");
-require("../sections/CustomSection/util/stylePropParsers/parseStylePropShadow");
-require("../sections/CustomSection/util/stylePropParsers/types");
 var groupUtils_1 = __importDefault(require("../utils/groupUtils"));
 var CompositionBackground_1 = __importDefault(require("./CompositionBackground"));
-require("./FlexGridItemForCCB");
-var Composition = (0, react_1.forwardRef)(function CustomSection(props, ref) {
+var Composition = (0, react_1.forwardRef)(function CustomSection(props) {
     var _a, _b, _c, _d;
-    var _e = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _e.device, editingSectionId = _e.editingSectionId, mode = _e.mode, shortcutKeyMode = _e.shortcutKeyMode, sectionActionHandler = _e.sectionActionHandler, queryData = _e.queryData;
+    var _e = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _e.device, editingSectionId = _e.editingSectionId, mode = _e.mode, shortcutKeyMode = _e.shortcutKeyMode, sectionActionHandler = _e.sectionActionHandler;
     var componentBlocks = props.componentBlocks, jsonProperties = props.jsonProperties, ccbCode = props.ccbCode;
     var pedigree = jsonProperties === null || jsonProperties === void 0 ? void 0 : jsonProperties.pedigree;
-    var _f = jsonProperties, _g = _f.data, CB_PLACEMENT_PROP_COMPOSITION = _g.CB_PLACEMENT_PROP_COMPOSITION, CB_LAYOUT_PROP_PADDING = _g.CB_LAYOUT_PROP_PADDING, CB_STYLE_PROP_SHADOW = _g.CB_STYLE_PROP_SHADOW, CB_STYLE_PROP_BORDER = _g.CB_STYLE_PROP_BORDER, zOrders = _f.zOrders;
+    var _f = jsonProperties, _g = _f.data, CB_PLACEMENT_PROP_COMPOSITION = _g.CB_PLACEMENT_PROP_COMPOSITION, CB_LAYOUT_PROP_PADDING = _g.CB_LAYOUT_PROP_PADDING, zOrders = _f.zOrders;
     var layouts = (0, util_1.parsePlacement)(componentBlocks !== null && componentBlocks !== void 0 ? componentBlocks : [], zOrders);
     var isMobile = device === 'MOBILE';
     var isEditMode = mode === 'EDIT';
@@ -84,10 +77,8 @@ var Composition = (0, react_1.forwardRef)(function CustomSection(props, ref) {
     (0, react_1.useEffect)(function () {
         if (editingSectionId !== props.id) {
             setSelectedCB(null);
-            // breakGroupCB();
         }
     }, [editingSectionId]);
-    // NOTE: 추후에 event를 외부에서 전달받게하거나, 아예 상태를 끌어올리거나 해야합니다.
     (0, react_1.useLayoutEffect)(function () {
         if (props.id !== editingSectionId) {
             return;
@@ -117,14 +108,6 @@ var Composition = (0, react_1.forwardRef)(function CustomSection(props, ref) {
             if (!selectedCB || selectedCB === 'BULK') {
                 return;
             }
-            // makeCollisionGroup(selectedCB);
-            // sectionActionHandler &&
-            //   sectionActionHandler({
-            //     type: '@CUSTOMSECTION/BLOCK_CLICKED',
-            //     payload: {
-            //      block:
-            //     }
-            //   });
             setSelectedCB('BULK');
         }
     }, [selectedCB, shortcutKeyMode, sectionActionHandler, setSelectedCB]);
@@ -144,30 +127,8 @@ var Composition = (0, react_1.forwardRef)(function CustomSection(props, ref) {
         if (!isEditMode) {
             return;
         }
-        // setSelectedCB(null);
-        // sectionActionHandler &&
-        //   sectionActionHandler({
-        //     type: '@CUSTOMSECTION/SECTION_CLICKED',
-        //     payload: {
-        //       sectionId: props.id
-        //     }
-        //   });
     };
     var padding = (0, parseSectionPadding_1.default)(CB_LAYOUT_PROP_PADDING, device);
-    // const shadowStyles = parseStylePropShadow(
-    //   {
-    //     name: CB_STYLE_PROP_KEYS.CB_STYLE_PROP_SHADOW,
-    //     specs: MOCK_SHADOW
-    //   },
-    //   device
-    // );
-    // const borderStyles = parseStylePropBorder(
-    //   {
-    //     name: CB_STYLE_PROP_KEYS.CB_STYLE_PROP_BORDER,
-    //     specs: MOCK_BORDER as any
-    //   },
-    //   device
-    // );
     var rowHeight = (function () {
         if (!size.width) {
             return 50;
@@ -179,40 +140,12 @@ var Composition = (0, react_1.forwardRef)(function CustomSection(props, ref) {
         var cellWidth = size.width / cols;
         return cellWidth * 0.56;
     })();
-    // TODO: 폰트사이즈 작업 필요.
-    var baseFontSize = (function () {
-        if (!size.width) {
-            return 16;
-        }
-        // const responsiveFontMode =
-        //   !!props.jsonProperties?.CB_CONTENT_PROP_COMPOSITION
-        //     ?.CB_CONTENT_PROP_COMPOSITION_SPEC_VARIABLEROOTFONTSIZE;
-        var responsiveFontMode = true;
-        if (device === 'MOBILE') {
-            if (responsiveFontMode) {
-                return size.width * 0.0421;
-            }
-            if (size.width < 327) {
-                return Math.max(getDefensiveFontSize(device, size.width), 14);
-            }
-            return 16;
-        }
-        if (responsiveFontMode) {
-            return size.width * 0.0133;
-        }
-        if (size.width < 1200) {
-            return Math.max(getDefensiveFontSize(device, size.width), 16);
-        }
-        return 16;
-    })();
     var i18n = (0, react_i18next_1.useTranslation)('translation').i18n;
     return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(dynamicLayoutContext_1.dynamicLayoutContext.Provider, __assign({ value: {
                 device: device
             } }, { children: (0, jsx_runtime_1.jsx)(gleStyles_1.S_gleStyles, __assign({ strKeys: { str_grid_height_variable: i18n.t('str_grid_height_variable') }, isEditMode: isEditMode, style: {
                     width: '100%',
                     height: '100%',
-                    // ...shadowStyles.style,
-                    // ...borderStyles.style,
                     overflow: 'hidden'
                 } }, { children: (0, jsx_runtime_1.jsx)(S_COMPOSITIONWrapper, __assign({ ref: gleRef, "x-dlayout-section-type": "NO_NAME", onClick: onClickSection, style: {
                         width: '100%',
@@ -228,20 +161,9 @@ var Composition = (0, react_1.forwardRef)(function CustomSection(props, ref) {
                         } }, { children: (0, jsx_runtime_1.jsx)(GridContainer, __assign({ className: "composition-container", "data-cols": cols, "data-rows": rows, "data-row-height": rowHeight, "data-col-width": "10px", ref: containerRef, cols: cols, rowHeight: rowHeight, sectionRow: rows, "data-wrapper-paddingT": padding.top, "data-wrapper-paddingB": padding.bottom, "data-wrapper-paddingL": padding.left, "data-wrapper-paddingR": padding.right, style: {
                                 width: customSectionStyles.width,
                                 maxWidth: customSectionStyles.maxWidth
-                                // minWidth: isMobile ? GLE_MIN_WIDTH_MOBILE_PX : GLE_MIN_WIDTH_DESKTOP_PX,
-                                // fontSize: `${baseFontSize}px`
-                            } }, { children: pedigree.children.map(function (child) { return ((0, jsx_runtime_1.jsx)(groupUtils_1.default, { block: child, rowHeight: rowHeight, layoutItems: layouts[device === 'DESKTOP' ? 'lg' : 'sm'], cbs: props.componentBlocks, device: device, selectedRows: [], 
-                                // pinnedGBs={pinnedGBs}
-                                // onToggleGBPinned={onToggleGBPinned}
-                                isEditMode: false }, child.blockId)); }) })) })) })) })) })) }));
+                            } }, { children: pedigree.children.map(function (child) { return ((0, jsx_runtime_1.jsx)(groupUtils_1.default, { block: child, rowHeight: rowHeight, layoutItems: layouts[device === 'DESKTOP' ? 'lg' : 'sm'], cbs: props.componentBlocks, device: device, selectedRows: [], isEditMode: false }, child.blockId)); }) })) })) })) })) })) }));
 });
 var GridContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid; /* Space between grid items */\n  gap: 10px;\n  grid-auto-rows: minmax(", ", auto);\n  grid-template-columns: repeat(", ", 1fr);\n  grid-template-rows: repeat(\n    ", ",\n    minmax(", ", auto)\n  );\n  /* height: 100%; */\n  padding: 10px 10px;\n  width: 100%;\n\n  * {\n    box-sizing: border-box;\n  }\n"], ["\n  display: grid; /* Space between grid items */\n  gap: 10px;\n  grid-auto-rows: minmax(", ", auto);\n  grid-template-columns: repeat(", ", 1fr);\n  grid-template-rows: repeat(\n    ", ",\n    minmax(", ", auto)\n  );\n  /* height: 100%; */\n  padding: 10px 10px;\n  width: 100%;\n\n  * {\n    box-sizing: border-box;\n  }\n"])), function (props) { return "".concat(props.rowHeight, "px"); }, function (props) { return props.cols; }, function (props) { return props.sectionRow; }, function (props) { return "".concat(props.rowHeight, "px"); });
 var S_COMPOSITIONWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
 exports.default = react_1.default.memo(Composition);
-function getDefensiveFontSize(device, width) {
-    if (device === 'MOBILE') {
-        return width * (0.0000868 * width + 0.0202);
-    }
-    return width * (0.0000246 * width - 0.01618);
-}
 var templateObject_1, templateObject_2;

package/dist/src/sub/DynamicLayout/CompositionRenderer/FlexGridItem.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { ComponentBlock } from '../sections/CustomSection/types';
 import type { CB_PLACEMENT_PROP_SPECS, Device } from '../sections/CustomSection/util/types';
-import type { Block } from 'publ-echo-test/dist/lib/GridLayoutEditor/group';
+import type { Block } from 'publ-echo/dist/lib/GridLayoutEditor/group';
 type Props = {
     cb: ComponentBlock;
     index: number;

package/dist/src/sub/DynamicLayout/CompositionRenderer/FlexGridItemForCCB.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { ComponentBlock } from '../sections/CustomSection/types';
 import type { Device } from '../sections/CustomSection/util/types';
-import type { Block } from 'publ-echo-test/dist/lib/GridLayoutEditor/group';
+import type { Block } from 'publ-echo/dist/lib/GridLayoutEditor/group';
 type Props = {
     cb: ComponentBlock;
     index: number;

package/dist/src/sub/DynamicLayout/CompositionRenderer/index.d.ts

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

package/dist/src/sub/DynamicLayout/CompositionRenderer/index.js

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

package/dist/src/sub/DynamicLayout/GridAutoRowEditor/GridAutoRowEditorForComposition.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { IComposition } from '../types';
-import type { Layout } from 'publ-echo-test/dist/lib/GridLayoutEditor/types';
+import type { Layout } from 'publ-echo/dist/lib/GridLayoutEditor/types';
 export type LayoutsType = {
     sm: Layout;
     lg: Layout;

package/dist/src/sub/DynamicLayout/GridAutoRowEditor/GridAutoRowEditorForComposition.js

@@ -43,8 +43,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable @typescript-eslint/no-unused-vars */
-require("publ-echo-test/dist/lib/GridLayoutEditor/utils/renderHelpers");
 require("publ-echo/dist/lib/GridItem/OutsideClickHandler");
+require("publ-echo/dist/lib/GridLayoutEditor/utils/renderHelpers");
 var react_1 = __importStar(require("react"));
 var react_i18next_1 = require("react-i18next");
 var ErrorBoundary_1 = require("../../DynamicLayout/components/Section/ErrorBoundary");

package/dist/src/sub/DynamicLayout/GridAutoRowEditor/GridAutoRowEditorForDL.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { ISection } from '../types';
-import type { Layout } from 'publ-echo-test/dist/lib/GridLayoutEditor/types';
+import type { Layout } from 'publ-echo/dist/lib/GridLayoutEditor/types';
 export type LayoutsType = {
     sm: Layout;
     lg: Layout;

package/dist/src/sub/DynamicLayout/GridAutoRowEditor/GridAutoRowEditorForDL.js

@@ -52,9 +52,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable @typescript-eslint/no-unused-vars */
-var group_1 = require("publ-echo-test/dist/lib/GridLayoutEditor/group");
-var renderHelpers_1 = require("publ-echo-test/dist/lib/GridLayoutEditor/utils/renderHelpers");
 require("publ-echo/dist/lib/GridItem/OutsideClickHandler");
+var group_1 = require("publ-echo/dist/lib/GridLayoutEditor/group");
+var renderHelpers_1 = require("publ-echo/dist/lib/GridLayoutEditor/utils/renderHelpers");
 var react_1 = __importStar(require("react"));
 var ErrorBoundary_1 = require("../../DynamicLayout/components/Section/ErrorBoundary");
 var dynamicLayoutContext_1 = require("../../DynamicLayout/dynamicLayoutContext");

package/dist/src/sub/DynamicLayout/components/Section/components/CustomSectionBackground.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { type CSSProperties } from 'styled-components';
+import type { CSSProperties } from 'styled-components';
 declare function CustomSectionBackground({ isMobile }: {
     isMobile?: boolean;
 }): JSX.Element;

package/dist/src/sub/DynamicLayout/compositionActionTypes.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import type { Layout } from 'publ-echo-test/dist/lib';
-import type { ResizeEventType } from 'publ-echo-test/dist/lib/GridItem/types';
-import type { ComponentBlock, GroupBlock } from 'publ-echo-test/dist/lib/GridLayoutEditor/group';
-import type { LayoutItem, Layouts } from 'publ-echo-test/dist/lib/GridLayoutEditor/types';
+import type { Layout } from 'publ-echo/dist/lib';
+import type { ResizeEventType } from 'publ-echo/dist/lib/GridItem/types';
+import type { ComponentBlock, GroupBlock } from 'publ-echo/dist/lib/GridLayoutEditor/group';
+import type { LayoutItem, Layouts } from 'publ-echo/dist/lib/GridLayoutEditor/types';
 export type TypeOfCompositionAction = ActionMap<ActionHandlerPayload>[keyof ActionMap<ActionHandlerPayload>];
 export type PayloadCBType = {
     type: ComponentBlock['type'];

package/dist/src/sub/DynamicLayout/mocks.js

@@ -12,8 +12,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MOCK_SECTIONS = void 0;
 var mock_componentBlocks_1 = require("./mock_componentBlocks");
 var mock_contentsCarousel_1 = require("./mock_contentsCarousel");
-require("./mock_contentsList");
-require("./mock_slideBanner");
 exports.MOCK_SECTIONS = [
     {
         administrativeTitle: 'Daily Pages',

package/dist/src/sub/DynamicLayout/sectionActionTypes.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import type { Layout } from 'publ-echo-test/dist/lib';
-import type { ResizeEventType } from 'publ-echo-test/dist/lib/GridItem/types';
-import type { ComponentBlock, GroupBlock } from 'publ-echo-test/dist/lib/GridLayoutEditor/group';
-import type { LayoutItem, Layouts } from 'publ-echo-test/dist/lib/GridLayoutEditor/types';
+import type { Layout } from 'publ-echo/dist/lib';
+import type { ResizeEventType } from 'publ-echo/dist/lib/GridItem/types';
+import type { ComponentBlock, GroupBlock } from 'publ-echo/dist/lib/GridLayoutEditor/group';
+import type { LayoutItem, Layouts } from 'publ-echo/dist/lib/GridLayoutEditor/types';
 export type TypeOfSectionAction = ActionMap<ActionHandlerPayload>[keyof ActionMap<ActionHandlerPayload>];
 export type PayloadCBType = {
     type: ComponentBlock['type'];

package/dist/src/sub/DynamicLayout/sections/CustomSection/CustomSection.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { ISection } from '../../types';
-import type { Layout } from 'publ-echo-test/dist/lib/GridLayoutEditor/types';
+import type { Layout } from 'publ-echo/dist/lib/GridLayoutEditor/types';
 export type LayoutsType = {
     sm: Layout;
     lg: Layout;

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

@@ -51,9 +51,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-var publ_echo_test_1 = require("publ-echo-test");
-var group_1 = require("publ-echo-test/dist/lib/GridLayoutEditor/group");
-var renderHelpers_1 = require("publ-echo-test/dist/lib/GridLayoutEditor/utils/renderHelpers");
+var publ_echo_1 = require("publ-echo");
+var group_1 = require("publ-echo/dist/lib/GridLayoutEditor/group");
+var renderHelpers_1 = require("publ-echo/dist/lib/GridLayoutEditor/utils/renderHelpers");
 var react_1 = __importStar(require("react"));
 var react_i18next_1 = require("react-i18next");
 var ErrorBoundary_1 = require("../../../DynamicLayout/components/Section/ErrorBoundary");
@@ -67,7 +67,7 @@ var clsx_1 = require("./newUtils/clsx");
 var group_2 = require("./newUtils/group");
 var util_1 = require("./util");
 var parseSectionPadding_1 = __importDefault(require("./util/layoutPropParsers/parseSectionPadding"));
-var Responsive = (0, publ_echo_test_1.WidthProvider)(publ_echo_test_1.ResponsiveGridEditor);
+var Responsive = (0, publ_echo_1.WidthProvider)(publ_echo_1.ResponsiveGridEditor);
 var GRID_CELL_MIN = 24;
 var DESKTOP_GRID_COLS = 24;
 var MOBILE_GRID_COLS = 8;