pds-dev-kit-web-test 0.2.54 → 0.3.0

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

@@ -41,40 +41,37 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var react_dom_1 = require("react-dom");
+var systemUI_1 = require("../../../common/styles/systemUI");
+var SystemUIPositionGenerator_1 = require("../../../common/utils/SystemUIPositionGenerator");
 var styled_components_1 = __importStar(require("styled-components"));
 var hybrid_1 = require("../../../hybrid");
 function TextLabel(_a) {
-    var text = _a.text, tooltipText = _a.tooltipText, _b = _a.tooltipPosition, tooltipPosition = _b === void 0 ? 'right_bottom' : _b, _c = _a.tooltipIconColorKey, tooltipIconColorKey = _c === void 0 ? 'ui_cpnt_icon_sys_grey_03' : _c, _d = _a.textAlign, textAlign = _d === void 0 ? 'left' : _d, _e = _a.styleTheme, styleTheme = _e === void 0 ? 'body2Bold' : _e, colorOverride = _a.colorOverride, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'sysTextPrimary' : _f, _g = _a.singleLineMode, singleLineMode = _g === void 0 ? 'none' : _g, _h = _a.ellipsisMode, ellipsisMode = _h === void 0 ? 'none' : _h, lineLimit = _a.lineLimit, _j = _a.userSelectMode, userSelectMode = _j === void 0 ? 'none' : _j, customFontSize = _a.customFontSize, customFontWeight = _a.customFontWeight, _k = _a.textDecorationType, textDecorationType = _k === void 0 ? 'none' : _k, _l = _a.requirementMode, requirementMode = _l === void 0 ? 'none' : _l, _m = _a.bulletPointMode, bulletPointMode = _m === void 0 ? 'none' : _m, wordBreak = _a.wordBreak, letterSpacing = _a.letterSpacing;
+    var text = _a.text, tooltipText = _a.tooltipText, _b = _a.tooltipPosition, tooltipPosition = _b === void 0 ? 'bottom' : _b, _c = _a.tooltipIconColorKey, tooltipIconColorKey = _c === void 0 ? 'ui_cpnt_icon_sys_grey_03' : _c, _d = _a.textAlign, textAlign = _d === void 0 ? 'left' : _d, _e = _a.styleTheme, styleTheme = _e === void 0 ? 'body2Bold' : _e, colorOverride = _a.colorOverride, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'sysTextPrimary' : _f, _g = _a.singleLineMode, singleLineMode = _g === void 0 ? 'none' : _g, _h = _a.ellipsisMode, ellipsisMode = _h === void 0 ? 'none' : _h, lineLimit = _a.lineLimit, _j = _a.userSelectMode, userSelectMode = _j === void 0 ? 'none' : _j, customFontSize = _a.customFontSize, customFontWeight = _a.customFontWeight, _k = _a.textDecorationType, textDecorationType = _k === void 0 ? 'none' : _k, _l = _a.requirementMode, requirementMode = _l === void 0 ? 'none' : _l, _m = _a.bulletPointMode, bulletPointMode = _m === void 0 ? 'none' : _m, wordBreak = _a.wordBreak, letterSpacing = _a.letterSpacing;
     var _o = (0, react_1.useState)(false), isTooltipOpen = _o[0], setIsTooltipOpen = _o[1];
+    var tooltipPositionTargetRef = (0, react_1.useRef)(null);
+    var tooltipRef = (0, react_1.useRef)(null);
     var _p = (0, react_1.useState)(null), tooltipSizeOffset = _p[0], setTooltipSizeOffset = _p[1];
     var _q = (0, react_1.useState)(null), tooltipPositionOffset = _q[0], setTooltipPositionOffset = _q[1];
-    var tooltipRef = (0, react_1.useRef)(null);
-    var tooltipPositionTargetRef = (0, react_1.useRef)(null);
-    var handleTooltipOpen = function () {
-        setIsTooltipOpen(true);
-    };
-    var handleTooltipClose = function () {
-        setIsTooltipOpen(false);
-    };
     /**
-     * @when : isTooltipOpen이 변경되었을 때
+     * @when : 화면진입 시, dependency 변경되었을 때
      * @expected : tooltipPositionTargetRef, tooltipRef 의 위치를 업데이트합니다.
      * @clear :
      */
     (0, react_1.useEffect)(function () {
-        if (tooltipPositionTargetRef.current) {
-            var _a = tooltipPositionTargetRef.current.getBoundingClientRect(), top_1 = _a.top, right = _a.right, left = _a.left, bottom = _a.bottom;
-            setTooltipPositionOffset({
-                top: top_1 + window.scrollY,
-                right: right + window.scrollX,
-                bottom: bottom + window.scrollY,
-                left: left + window.scrollX
-            });
+        if (!tooltipPositionTargetRef.current || !tooltipText) {
+            return;
         }
         if (!isTooltipOpen && tooltipRef.current) {
             setTooltipSizeOffset(null);
             return;
         }
+        var _a = tooltipPositionTargetRef.current.getBoundingClientRect(), top = _a.top, right = _a.right, left = _a.left, bottom = _a.bottom;
+        setTooltipPositionOffset({
+            top: top + window.scrollY,
+            right: right + window.scrollX,
+            bottom: bottom + window.scrollY,
+            left: left + window.scrollX
+        });
         if (tooltipRef.current) {
             setTooltipSizeOffset({
                 height: tooltipRef.current.offsetHeight,
@@ -82,34 +79,22 @@ function TextLabel(_a) {
             });
         }
     }, [isTooltipOpen]);
-    var tooltipPositionCss = getTooltipPositionCss(tooltipSizeOffset, tooltipPositionOffset, tooltipPosition);
-    return ((0, jsx_runtime_1.jsxs)(S_TextLabel, __assign({ "x-pds-name": "TextLabel", "x-pds-element-type": "component", "x-pds-device-type": "desktop", textAlign: textAlign, styleTheme: styleTheme, colorOverride: colorOverride, colorTheme: colorTheme, singleLineMode: singleLineMode, ellipsisMode: ellipsisMode, lineLimit: lineLimit, userSelectMode: userSelectMode, customFontSize: customFontSize, customFontWeight: customFontWeight, textDecorationType: textDecorationType, bulletPointMode: bulletPointMode, wordBreak: wordBreak, "$letterSpacing": letterSpacing }, { children: [text, requirementMode === 'use' && ((0, jsx_runtime_1.jsx)(S_AfterTextBox, __assign({ styleTheme: styleTheme }, { children: (0, jsx_runtime_1.jsx)(S_IconWrapper, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_requirement", size: 16, fillType: "line", colorKey: "ui_cpnt_icon_sys_error_01" }) }) }))), tooltipText && ((0, jsx_runtime_1.jsxs)(S_AfterTextBox, __assign({ styleTheme: styleTheme, ref: tooltipPositionTargetRef }, { children: [(0, jsx_runtime_1.jsx)(S_IconWrapper, __assign({ onMouseEnter: handleTooltipOpen, onMouseLeave: handleTooltipClose }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_question", size: 16, fillType: "fill", colorKey: tooltipIconColorKey }) })), (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(S_TooltipWrapper, __assign({ className: "TooltipWrapper", ref: tooltipRef, isTooltipOpen: isTooltipOpen, tooltipPosition: tooltipPosition, tooltipPositionCss: tooltipPositionCss, onMouseEnter: handleTooltipOpen, onMouseLeave: handleTooltipClose }, { children: "".concat(tooltipText) })), document.body)] })))] })));
-}
-function getTooltipPositionCss(size, position, positionType) {
-    if (!size || !position) {
-        return '';
-    }
-    var left = position.left, bottom = position.bottom, top = position.top;
-    var width = size.width, height = size.height;
-    var leftValue = left - width + 16;
-    var bottomValue = bottom + 4;
-    var topValue = top - height - 4;
-    var isOverLeft = leftValue < 0;
-    var isOverRight = window.innerWidth < left + width;
-    var isOverBottom = window.innerHeight < bottomValue + height;
-    var isOverTop = topValue < 0;
-    switch (positionType) {
-        case 'left_bottom':
-            return "\n      left: ".concat(isOverLeft ? 5 : leftValue, "px;\n      ").concat(isOverBottom ? 'bottom: 5px;' : "top: ".concat(bottomValue, "px;"));
-        case 'left_top':
-            return "\n      left: ".concat(isOverLeft ? 5 : leftValue, "px;\n      top: ").concat(isOverTop ? 5 : topValue, "px;");
-        case 'right_bottom':
-            return "\n      ".concat(isOverRight ? 'right: 5px;' : "left: ".concat(isOverRight ? 5 : left, "px;"), "\n      ").concat(isOverBottom ? 'bottom: 5px;' : "top: ".concat(bottomValue, "px;"));
-        case 'right_top':
-            return "\n      ".concat(isOverRight ? 'right: 5px;' : "left: ".concat(isOverRight ? 5 : left, "px;"), "\n      top: ").concat(isOverTop ? 5 : topValue, "px;");
-        default:
-            return '';
-    }
+    var tooltipPositionCss = (0, SystemUIPositionGenerator_1.hoverTypeSystemUICssGenerator)({
+        baseSize: 16,
+        sizeOffset: tooltipSizeOffset,
+        positionOffset: tooltipPositionOffset,
+        systemUIPosition: tooltipPosition.includes('_')
+            ? tooltipPosition
+            : "right_".concat(tooltipPosition),
+        distance: 4
+    });
+    var handleTooltipOpen = function () {
+        setIsTooltipOpen(true);
+    };
+    var handleTooltipClose = function () {
+        setIsTooltipOpen(false);
+    };
+    return ((0, jsx_runtime_1.jsxs)(S_TextLabel, __assign({ "x-pds-name": "TextLabel", "x-pds-element-type": "component", "x-pds-device-type": "desktop", textAlign: textAlign, styleTheme: styleTheme, colorOverride: colorOverride, colorTheme: colorTheme, singleLineMode: singleLineMode, ellipsisMode: ellipsisMode, lineLimit: lineLimit, userSelectMode: userSelectMode, customFontSize: customFontSize, customFontWeight: customFontWeight, textDecorationType: textDecorationType, bulletPointMode: bulletPointMode, wordBreak: wordBreak, "$letterSpacing": letterSpacing }, { children: [text, requirementMode === 'use' && ((0, jsx_runtime_1.jsx)(S_AfterTextBox, __assign({ styleTheme: styleTheme }, { children: (0, jsx_runtime_1.jsx)(S_IconWrapper, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_requirement", size: 16, fillType: "line", colorKey: "ui_cpnt_icon_sys_error_01" }) }) }))), tooltipText && ((0, jsx_runtime_1.jsx)(S_AfterTextBox, __assign({ styleTheme: styleTheme }, { children: (0, jsx_runtime_1.jsxs)(S_IconWrapper, __assign({ ref: tooltipPositionTargetRef, onPointerEnter: handleTooltipOpen, onPointerLeave: handleTooltipClose }, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_question", size: 16, fillType: "fill", colorKey: tooltipIconColorKey }), isTooltipOpen && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(S_TooltipWrapper, __assign({ className: "TooltipWrapper", ref: tooltipRef, tooltipPositionCss: tooltipPositionCss }, { children: tooltipText })), document.body) }))] })) })))] })));
 }
 var displayBold = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
     var theme = _a.theme;
@@ -508,24 +493,9 @@ var S_AfterTextBox = styled_components_1.default.div(templateObject_51 || (templ
         }[styleTheme];
 });
 var S_IconWrapper = styled_components_1.default.div(templateObject_52 || (templateObject_52 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 16px;\n  height: 100%;\n  justify-content: center;\n  width: 16px;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 16px;\n  height: 100%;\n  justify-content: center;\n  width: 16px;\n"])));
-var S_TooltipWrapper = styled_components_1.default.div(templateObject_53 || (templateObject_53 = __makeTemplateObject(["\n  ", "\n  align-items: center;\n  background-color: ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  display: flex;\n  justify-content: center;\n  line-height: 1.2;\n  max-width: 240px;\n  overflow-wrap: break-word;\n  padding: ", ";\n  position: fixed;\n  text-align: left;\n  white-space: pre-wrap;\n  width: max-content;\n  word-break: keep-all;\n  z-index: 400;\n\n  ", ";\n  ", ";\n"], ["\n  ", "\n  align-items: center;\n  background-color: ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  display: flex;\n  justify-content: center;\n  line-height: 1.2;\n  max-width: 240px;\n  overflow-wrap: break-word;\n  padding: ", ";\n  position: fixed;\n  text-align: left;\n  white-space: pre-wrap;\n  width: max-content;\n  word-break: keep-all;\n  z-index: 400;\n\n  ", ";\n  ", ";\n"])), caption2Regular, function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_button_tooltip_base;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingA;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_textlabel_button_tooltip;
-}, function (_a) {
-    var theme = _a.theme;
-    return "".concat(theme.spacing.spacingA, " ").concat(theme.spacing.spacingB);
-}, function (_a) {
-    var isTooltipOpen = _a.isTooltipOpen;
-    return !isTooltipOpen && 'display: none';
-}, function (_a) {
+var S_TooltipWrapper = styled_components_1.default.div(templateObject_53 || (templateObject_53 = __makeTemplateObject(["\n  ", "\n\n  ", ";\n"], ["\n  ", "\n\n  ", ";\n"])), systemUI_1.TooltipWrapperStyle, function (_a) {
     var tooltipPositionCss = _a.tooltipPositionCss;
-    return tooltipPositionCss && tooltipPositionCss;
+    return tooltipPositionCss;
 });
 exports.default = TextLabel;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44, templateObject_45, templateObject_46, templateObject_47, templateObject_48, templateObject_49, templateObject_50, templateObject_51, templateObject_52, templateObject_53;

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import type { FillIconNameKeys, LineIconNameKeys, PDSTextType, UiColors } from '../../../common';
+import type { IconCaseTooltipPositionType } from '../../../common/types/systemUI';
 export type UploadIconButtonProps = {
     fillType?: 'fill' | 'line';
     shapeType?: 'circular' | 'rectangle' | 'round';
@@ -16,7 +17,8 @@ export type UploadIconButtonProps = {
     accept?: string;
     multipleMode?: 'none' | 'use';
     tooltipText?: PDSTextType;
-    tooltipPosition?: 'left_top' | 'left_bottom' | 'center_top' | 'center_bottom' | 'right_top' | 'right_bottom';
+    /** @deprecated 'left_top', 'left_bottom', 'right_top', 'right_bottom' will replace 'top' or 'bottom' */
+    tooltipPosition?: IconCaseTooltipPositionType;
     onClick?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 };
 declare function UploadIconButton({ fillType, shapeType, baseSize, baseColorKey, borderColorKey, iconSize, iconFillType, iconName, iconColorKey, shadow, colorTheme, state, accept, multipleMode, tooltipText, tooltipPosition, onClick }: UploadIconButtonProps): JSX.Element;

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

@@ -40,15 +40,56 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
+var react_dom_1 = require("react-dom");
+var systemUI_1 = require("../../../common/styles/systemUI");
+var SystemUIPositionGenerator_1 = require("../../../common/utils/SystemUIPositionGenerator");
 var styled_components_1 = __importStar(require("styled-components"));
 var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
 var hybrid_1 = require("../../../hybrid");
-var constants_1 = require("../IconButton/constants");
-var TextLabel_1 = require("../TextLabel");
+var constants_1 = require("./constants");
 var types_1 = require("./types");
 function UploadIconButton(_a) {
-    var _b = _a.fillType, fillType = _b === void 0 ? 'fill' : _b, _c = _a.shapeType, shapeType = _c === void 0 ? 'rectangle' : _c, _d = _a.baseSize, baseSize = _d === void 0 ? 'small' : _d, baseColorKey = _a.baseColorKey, borderColorKey = _a.borderColorKey, _e = _a.iconSize, iconSize = _e === void 0 ? 24 : _e, _f = _a.iconFillType, iconFillType = _f === void 0 ? 'line' : _f, _g = _a.iconName, iconName = _g === void 0 ? 'ic_upload' : _g, iconColorKey = _a.iconColorKey, _h = _a.shadow, shadow = _h === void 0 ? 'hidden' : _h, _j = _a.colorTheme, colorTheme = _j === void 0 ? 'none' : _j, _k = _a.state, state = _k === void 0 ? 'normal' : _k, _l = _a.accept, accept = _l === void 0 ? '*' : _l, _m = _a.multipleMode, multipleMode = _m === void 0 ? 'none' : _m, tooltipText = _a.tooltipText, _o = _a.tooltipPosition, tooltipPosition = _o === void 0 ? 'center_bottom' : _o, onClick = _a.onClick;
+    var _b = _a.fillType, fillType = _b === void 0 ? 'fill' : _b, _c = _a.shapeType, shapeType = _c === void 0 ? 'rectangle' : _c, _d = _a.baseSize, baseSize = _d === void 0 ? 'small' : _d, baseColorKey = _a.baseColorKey, borderColorKey = _a.borderColorKey, _e = _a.iconSize, iconSize = _e === void 0 ? 24 : _e, _f = _a.iconFillType, iconFillType = _f === void 0 ? 'line' : _f, _g = _a.iconName, iconName = _g === void 0 ? 'ic_upload' : _g, iconColorKey = _a.iconColorKey, _h = _a.shadow, shadow = _h === void 0 ? 'hidden' : _h, _j = _a.colorTheme, colorTheme = _j === void 0 ? 'none' : _j, _k = _a.state, state = _k === void 0 ? 'normal' : _k, _l = _a.accept, accept = _l === void 0 ? '*' : _l, _m = _a.multipleMode, multipleMode = _m === void 0 ? 'none' : _m, tooltipText = _a.tooltipText, _o = _a.tooltipPosition, tooltipPosition = _o === void 0 ? 'bottom' : _o, onClick = _a.onClick;
     var _p = (0, react_1.useState)(false), isTooltipOpen = _p[0], setIsTooltipOpen = _p[1];
+    var tooltipPositionTargetRef = (0, react_1.useRef)(null);
+    var tooltipRef = (0, react_1.useRef)(null);
+    var _q = (0, react_1.useState)(null), tooltipSizeOffset = _q[0], setTooltipSizeOffset = _q[1];
+    var _r = (0, react_1.useState)(null), tooltipPositionOffset = _r[0], setTooltipPositionOffset = _r[1];
+    /**
+     * @when : 화면진입 시, dependency 변경되었을 때
+     * @expected : tooltipPositionTargetRef, tooltipRef 의 위치를 업데이트합니다.
+     * @clear :
+     */
+    (0, react_1.useEffect)(function () {
+        if (!tooltipPositionTargetRef.current || !tooltipText) {
+            return;
+        }
+        if (!isTooltipOpen && tooltipRef.current) {
+            setTooltipSizeOffset(null);
+            return;
+        }
+        var _a = tooltipPositionTargetRef.current.getBoundingClientRect(), top = _a.top, right = _a.right, left = _a.left, bottom = _a.bottom;
+        setTooltipPositionOffset({
+            top: top + window.scrollY,
+            right: right + window.scrollX,
+            bottom: bottom + window.scrollY,
+            left: left + window.scrollX
+        });
+        if (tooltipRef.current) {
+            setTooltipSizeOffset({
+                height: tooltipRef.current.offsetHeight,
+                width: tooltipRef.current.offsetWidth
+            });
+        }
+    }, [isTooltipOpen]);
+    var tooltipPositionCss = (0, SystemUIPositionGenerator_1.hoverTypeSystemUICssGenerator)({
+        baseSize: constants_1.ICON_BUTTON_SIZE[baseSize],
+        sizeOffset: tooltipSizeOffset,
+        positionOffset: tooltipPositionOffset,
+        systemUIPosition: tooltipPosition.includes('_')
+            ? tooltipPosition
+            : "center_".concat(tooltipPosition)
+    });
     var handleTooltipToggle = function (value) {
         setIsTooltipOpen(value);
     };
@@ -70,7 +111,7 @@ function UploadIconButton(_a) {
         }
         return types_1.iconStateColors[fillType];
     };
-    return ((0, jsx_runtime_1.jsxs)(S_UploadIconButton, __assign({ "x-pds-name": "UploadIconButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", fillType: fillType, shapeType: shapeType, baseSize: baseSize, baseColorKey: baseColorKey, borderColorKey: borderColorKey, shadow: shadow, colorTheme: colorTheme, isDisabled: state === 'disabled', onPointerEnter: function () { return tooltipText && handleTooltipToggle(true); }, onPointerLeave: function () { return tooltipText && handleTooltipToggle(false); } }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "file", hidden: true, disabled: state === 'disabled', accept: accept, multiple: multipleMode === 'use', onChange: handleClick }), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: iconName, size: iconSize, colorKey: IconColorSelect(), fillType: iconFillType }), tooltipText && isTooltipOpen && ((0, jsx_runtime_1.jsx)(S_TooltipWrapper, __assign({ className: "TooltipWrapper", isTooltipOpen: isTooltipOpen, tooltipPosition: tooltipPosition, baseSize: baseSize }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: tooltipText, colorOverride: "ui_cpnt_textlabel_button_tooltip", styleTheme: "caption2Regular", colorTheme: "sysTextSecondary" }) })))] })));
+    return ((0, jsx_runtime_1.jsxs)(S_UploadIconButton, __assign({ "x-pds-name": "UploadIconButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", ref: tooltipPositionTargetRef, fillType: fillType, shapeType: shapeType, baseSize: baseSize, baseColorKey: baseColorKey, borderColorKey: borderColorKey, shadow: shadow, colorTheme: colorTheme, isDisabled: state === 'disabled', onPointerEnter: function () { return tooltipText && handleTooltipToggle(true); }, onPointerLeave: function () { return tooltipText && handleTooltipToggle(false); } }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "file", hidden: true, disabled: state === 'disabled', accept: accept, multiple: multipleMode === 'use', onChange: handleClick }), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: iconName, size: iconSize, colorKey: IconColorSelect(), fillType: iconFillType }), isTooltipOpen && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(S_TooltipWrapper, __assign({ className: "TooltipWrapper", ref: tooltipRef, tooltipPositionCss: tooltipPositionCss }, { children: tooltipText })), document.body) }))] })));
 }
 var fillDisabled = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n\n  &:hover:not([disabled])::before {\n    background-color: unset;\n  }\n\n  &:active:not([disabled])::before {\n    background-color: unset;\n  }\n"], ["\n  background-color: ", ";\n\n  &:hover:not([disabled])::before {\n    background-color: unset;\n  }\n\n  &:active:not([disabled])::before {\n    background-color: unset;\n  }\n"])), function (_a) {
     var theme = _a.theme, baseColorKey = _a.baseColorKey;
@@ -173,46 +214,9 @@ var S_UploadIconButton = styled_components_1.default.label(templateObject_13 ||
             xsmall: xsmall
         }[baseSize];
 });
-var tooltipPositionSpacing = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
-    var baseSize = _a.baseSize;
-    return baseSize &&
-        {
-            xxlarge: constants_1.TOOLTIP_POSITION_SPACING.xxlarge,
-            large: constants_1.TOOLTIP_POSITION_SPACING.large,
-            medium: constants_1.TOOLTIP_POSITION_SPACING.medium,
-            small: constants_1.TOOLTIP_POSITION_SPACING.small,
-            xsmall: constants_1.TOOLTIP_POSITION_SPACING.xsmall
-        }[baseSize];
-});
-var tooltipLeftTop = (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  bottom: ", ";\n  right: 0;\n"], ["\n  bottom: ", ";\n  right: 0;\n"])), tooltipPositionSpacing);
-var tooltipLeftBottom = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  right: 0;\n  top: ", ";\n"], ["\n  right: 0;\n  top: ", ";\n"])), tooltipPositionSpacing);
-var tooltipCenterTop = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  bottom: ", ";\n"], ["\n  bottom: ", ";\n"])), tooltipPositionSpacing);
-var tooltipCenterBottom = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  top: ", ";\n"], ["\n  top: ", ";\n"])), tooltipPositionSpacing);
-var tooltipRightTop = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  bottom: ", ";\n  left: 0;\n"], ["\n  bottom: ", ";\n  left: 0;\n"])), tooltipPositionSpacing);
-var tooltipRightBottom = (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  left: 0;\n  top: ", ";\n"], ["\n  left: 0;\n  top: ", ";\n"])), tooltipPositionSpacing);
-var S_TooltipWrapper = styled_components_1.default.div(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  padding: ", ";\n  position: absolute;\n  width: max-content;\n  z-index: 400;\n\n  ", ";\n\n  ", "\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  padding: ", ";\n  position: absolute;\n  width: max-content;\n  z-index: 400;\n\n  ", ";\n\n  ", "\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_button_tooltip_base;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingA;
-}, function (_a) {
-    var theme = _a.theme;
-    return "".concat(theme.spacing.spacingA, " ").concat(theme.spacing.spacingB);
-}, function (_a) {
-    var isTooltipOpen = _a.isTooltipOpen;
-    return !isTooltipOpen && 'display: none';
-}, function (_a) {
-    var tooltipPosition = _a.tooltipPosition;
-    return tooltipPosition &&
-        {
-            left_top: tooltipLeftTop,
-            left_bottom: tooltipLeftBottom,
-            center_top: tooltipCenterTop,
-            center_bottom: tooltipCenterBottom,
-            right_top: tooltipRightTop,
-            right_bottom: tooltipRightBottom
-        }[tooltipPosition];
+var S_TooltipWrapper = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  ", "\n\n  ", ";\n"], ["\n  ", "\n\n  ", ";\n"])), systemUI_1.TooltipWrapperStyle, function (_a) {
+    var tooltipPositionCss = _a.tooltipPositionCss;
+    return tooltipPositionCss;
 });
 exports.default = UploadIconButton;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14;

package/dist/src/desktop/components/UploadIconButton/constants.d.ts

@@ -0,0 +1,7 @@
+export declare const ICON_BUTTON_SIZE: {
+    xxlarge: number;
+    large: number;
+    medium: number;
+    small: number;
+    xsmall: number;
+};

package/dist/src/desktop/components/UploadIconButton/constants.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ICON_BUTTON_SIZE = void 0;
+exports.ICON_BUTTON_SIZE = {
+    xxlarge: 96,
+    large: 48,
+    medium: 40,
+    small: 32,
+    xsmall: 24
+};

package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/ContentsContainer.d.ts

@@ -3,7 +3,7 @@ import type { MutableRefObject } from 'react';
 export type ContentsContainerProps = {
     content1?: JSX.Element;
     content2?: JSX.Element;
-    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';
+    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';
     containerColor?: string;
     areaColor?: string;
     isLoadingContainer1?: boolean;

package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/ContentsContainer.js

@@ -50,7 +50,8 @@ var ContentsContainer = function (_a) {
             WTT_1: ((0, jsx_runtime_1.jsx)(variation_1.WTT, { layoutType: "WTT_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref, isLoadingContainer1: isLoadingContainer1, overrideContainer1ColorKey: overrideContainer1ColorKey })),
             WTT_2: ((0, jsx_runtime_1.jsx)(variation_1.WTT, { layoutType: "WTT_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref, isLoadingContainer1: isLoadingContainer1, overrideContainer1ColorKey: overrideContainer1ColorKey })),
             WTU_1: ((0, jsx_runtime_1.jsx)(variation_1.WTU, { layoutType: "WTU_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey })),
-            WTV_1: ((0, jsx_runtime_1.jsx)(variation_1.WTV, { layoutType: "WTV_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey }))
+            WTV_1: ((0, jsx_runtime_1.jsx)(variation_1.WTV, { layoutType: "WTV_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey })),
+            WTW_1: ((0, jsx_runtime_1.jsx)(variation_1.WTW, { layoutType: "WTW_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey }))
         }[layoutType] }));
 };
 exports.default = ContentsContainer;

package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTW.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import type { UiColors } from '../../../../../../common';
+export type WTWProps = {
+    content1?: JSX.Element;
+    content2?: JSX.Element;
+    layoutType?: 'WTW_1';
+    containerColor?: string;
+    areaColor?: string;
+    isLoadingContainer1?: boolean;
+    isLoadingContainer2?: boolean;
+    overrideContainer1ColorKey?: UiColors;
+    overrideContainer2ColorKey?: UiColors;
+};
+export type StyleProps = {
+    $contentsArea2Width?: number;
+};
+declare const WTW: ({ content1, content2, layoutType, containerColor, areaColor, isLoadingContainer1, isLoadingContainer2, overrideContainer1ColorKey, overrideContainer2ColorKey }: WTWProps) => JSX.Element;
+export default WTW;

package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTW.js

@@ -0,0 +1,112 @@
+"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 __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var styled_components_1 = __importStar(require("styled-components"));
+var components_1 = require("../../../../../../common/components");
+var WTW = function (_a) {
+    var _b, _c;
+    var content1 = _a.content1, content2 = _a.content2, _d = _a.layoutType, layoutType = _d === void 0 ? 'WTW_1' : _d, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2, overrideContainer1ColorKey = _a.overrideContainer1ColorKey, overrideContainer2ColorKey = _a.overrideContainer2ColorKey;
+    var contentsArea2Ref = (0, react_1.useRef)(null);
+    var _e = (0, react_1.useState)((_c = (_b = contentsArea2Ref.current) === null || _b === void 0 ? void 0 : _b.offsetWidth) !== null && _c !== void 0 ? _c : 720), contentsArea2Width = _e[0], setContentsArea2Width = _e[1];
+    var handleResize = function () {
+        if (contentsArea2Ref === null || contentsArea2Ref.current === null) {
+            return;
+        }
+        setContentsArea2Width(contentsArea2Ref.current.offsetWidth);
+    };
+    /**
+      @when : 브라우저 화면 사이즈가 변경될 때
+      @expected : contentsArea2의 너비를 contentsArea2Width에 저장합니다.
+      @clear : 이벤트 등록을 해제합니다.
+    */
+    (0, react_1.useEffect)(function () {
+        window.addEventListener('resize', handleResize);
+        return function () {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)(S_Box, { children: [(0, jsx_runtime_1.jsx)(S_ContentsContainer1, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WTW", layoutType: layoutType, containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey, "$contentsArea2Width": contentsArea2Width }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {})) : ((0, jsx_runtime_1.jsx)(S_ContentsArea1, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WTW", layoutType: layoutType, areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WTW", layoutType: layoutType }, { children: content1 })) }))) })), (0, jsx_runtime_1.jsx)(S_ContentsContainer2, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WTW", layoutType: layoutType, containerColor: containerColor, overrideContainer2ColorKey: overrideContainer2ColorKey, "$contentsArea2Width": contentsArea2Width }, { children: isLoadingContainer2 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {})) : ((0, jsx_runtime_1.jsx)(S_ContentsArea2, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WTW", layoutType: layoutType, areaColor: areaColor, ref: contentsArea2Ref }, { children: (0, jsx_runtime_1.jsx)(S_Content2, __assign({ "x-pds-name": "Content2", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WTW", layoutType: layoutType }, { children: content2 })) }))) }))] }));
+};
+var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
+    return overrideContainer1ColorKey && theme[overrideContainer1ColorKey];
+});
+var overrideStyleContainer2 = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme, overrideContainer2ColorKey = _a.overrideContainer2ColorKey;
+    return overrideContainer2ColorKey && theme[overrideContainer2ColorKey];
+});
+var S_Box = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  height: 100%;\n"], ["\n  display: flex;\n  height: 100%;\n"])));
+var S_ContentsContainer1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  justify-content: flex-end;\n  margin: 0;\n  overflow-x: hidden;\n  overflow-y: auto;\n  width: ", ";\n  ", ";\n\n  ", "\n"], ["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  justify-content: flex-end;\n  margin: 0;\n  overflow-x: hidden;\n  overflow-y: auto;\n  width: ", ";\n  ", ";\n\n  ", "\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_contentscontainer01_background;
+}, function (_a) {
+    var $contentsArea2Width = _a.$contentsArea2Width;
+    return "calc(50% - (".concat($contentsArea2Width, "px - 480px) / 2)");
+}, function (_a) {
+    var containerColor = _a.containerColor;
+    return "background-color: ".concat(containerColor);
+}, overrideStyleContainer1);
+var S_ContentsContainer2 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  border-left: 1px solid ", ";\n  height: 100%;\n  width: ", ";\n  ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  border-left: 1px solid ", ";\n  height: 100%;\n  width: ", ";\n  ", ";\n\n  ", "\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_contentscontainer02_background;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_container_divider;
+}, function (_a) {
+    var $contentsArea2Width = _a.$contentsArea2Width;
+    return "calc(50% + (".concat($contentsArea2Width, "px - 480px) / 2)");
+}, function (_a) {
+    var containerColor = _a.containerColor;
+    return "background-color: ".concat(containerColor);
+}, overrideStyleContainer2);
+var S_ContentsArea1 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  box-sizing: border-box;\n  max-width: 480px;\n  padding-bottom: 88px;\n  padding-left: 24px;\n  padding-right: 24px;\n  width: 480px;\n  ", ";\n"], ["\n  box-sizing: border-box;\n  max-width: 480px;\n  padding-bottom: 88px;\n  padding-left: 24px;\n  padding-right: 24px;\n  width: 480px;\n  ", ";\n"])), function (_a) {
+    var areaColor = _a.areaColor;
+    return "background-color: ".concat(areaColor);
+});
+var S_ContentsArea2 = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  height: 100%;\n  max-width: 920px;\n  min-width: 720px;\n  width: 60%;\n  ", ";\n"], ["\n  height: 100%;\n  max-width: 920px;\n  min-width: 720px;\n  width: 60%;\n  ", ";\n"])), function (_a) {
+    var areaColor = _a.areaColor;
+    return "background-color: ".concat(areaColor);
+});
+var S_Content1 = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
+var S_Content2 = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  height: 100%;\n  overflow: hidden;\n"], ["\n  height: 100%;\n  overflow: hidden;\n"])));
+exports.default = WTW;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/index.d.ts

@@ -19,3 +19,4 @@ export { default as WTS } from './WTS';
 export { default as WTT } from './WTT';
 export { default as WTU } from './WTU';
 export { default as WTV } from './WTV';
+export { default as WTW } from './WTW';

package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.WTV = exports.WTU = exports.WTT = exports.WTS = exports.WTQ = exports.WTP = exports.WTO = exports.WTN = exports.WTM = exports.WTL = exports.WTK = exports.WTJ = exports.WTI = exports.WTH = exports.WTG = exports.WTF = exports.WTE = exports.WTD = exports.WTC = exports.WTB = exports.WTA = void 0;
+exports.WTW = exports.WTV = exports.WTU = exports.WTT = exports.WTS = exports.WTQ = exports.WTP = exports.WTO = exports.WTN = exports.WTM = exports.WTL = exports.WTK = exports.WTJ = exports.WTI = exports.WTH = exports.WTG = exports.WTF = exports.WTE = exports.WTD = exports.WTC = exports.WTB = exports.WTA = void 0;
 var WTA_1 = require("./WTA");
 Object.defineProperty(exports, "WTA", { enumerable: true, get: function () { return __importDefault(WTA_1).default; } });
 var WTB_1 = require("./WTB");
@@ -46,3 +46,5 @@ var WTU_1 = require("./WTU");
 Object.defineProperty(exports, "WTU", { enumerable: true, get: function () { return __importDefault(WTU_1).default; } });
 var WTV_1 = require("./WTV");
 Object.defineProperty(exports, "WTV", { enumerable: true, get: function () { return __importDefault(WTV_1).default; } });
+var WTW_1 = require("./WTW");
+Object.defineProperty(exports, "WTW", { enumerable: true, get: function () { return __importDefault(WTW_1).default; } });

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';
+    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';
     pageMenuContent?: JSX.Element;
     tabMenuContent?: JSX.Element;
     subMenuContent?: JSX.Element;

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

@@ -89,7 +89,8 @@ 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, {}),
-                WTV_1: (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, {})
             }[layoutType], (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [{
                         WTA_1: ((0, jsx_runtime_1.jsx)(Containers_1.PageMenuContainer, { pageMenuType: "top_page_menu_mobile_480", pageMenuContent: pageMenuContent, containerColor: containerColor, areaColor: areaColor })),
                         WTA_2: ((0, jsx_runtime_1.jsx)(Containers_1.PageMenuContainer, { pageMenuType: "top_page_menu_mobile_600", pageMenuContent: pageMenuContent, containerColor: containerColor, areaColor: areaColor })),
@@ -136,7 +137,8 @@ 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, {}),
-                        WTV_1: (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 }))
                     }[layoutType], {
                         WTA_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
                         WTA_2: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
@@ -183,7 +185,8 @@ 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, {}),
-                        WTV_1: (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, {})
                     }[layoutType], (0, jsx_runtime_1.jsxs)(S_BottomWrapper, __assign({ layoutType: layoutType }, { children: [{
                                 WTA_1: '',
                                 WTA_2: '',
@@ -230,7 +233,8 @@ var ContainersBox = function (_a) {
                                 WTT_1: '',
                                 WTT_2: '',
                                 WTU_1: '',
-                                WTV_1: ''
+                                WTV_1: '',
+                                WTW_1: ''
                             }[layoutType], (0, jsx_runtime_1.jsx)(Containers_1.ContentsContainer, { layoutType: layoutType, content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey, container1Ref: container1Ref })] }))] })] }));
 };
 var S_ContainersBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: flex-start;\n  display: flex;\n  height: 100%;\n"], ["\n  align-items: flex-start;\n  display: flex;\n  height: 100%;\n"])));

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

@@ -10,10 +10,11 @@ var line_1 = __importDefault(require("../../../common/assets/icons/line"));
 var Icon = function (_a) {
     var _b = _a.iconName, iconName = _b === void 0 ? 'ic_unavailable' : _b, _c = _a.size, size = _c === void 0 ? 24 : _c, _d = _a.colorKey, colorKey = _d === void 0 ? 'ui_cpnt_icon_sys_grey_01' : _d, _e = _a.fillType, fillType = _e === void 0 ? 'line' : _e;
     var theme = (0, styled_components_1.useTheme)();
+    var isFixedSize = iconName.includes('_20') || iconName.includes('_32') || iconName.includes('_40');
     var DefaultIcon = line_1.default.ic_unavailable;
     var SelectedIcon = fillType === 'line'
         ? line_1.default[iconName] || fill_1.default[iconName]
         : fill_1.default[iconName] || line_1.default[iconName];
-    return SelectedIcon ? ((0, jsx_runtime_1.jsx)(SelectedIcon, { "x-pds-name": "Icon", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", color: theme[colorKey], size: size, style: { minWidth: size, minHeight: size } })) : ((0, jsx_runtime_1.jsx)(DefaultIcon, { "x-pds-name": "Icon", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", color: theme[colorKey], size: size, style: { minWidth: size, minHeight: size } }));
+    return SelectedIcon ? ((0, jsx_runtime_1.jsx)(SelectedIcon, { "x-pds-name": "Icon", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", color: theme[colorKey], size: size, style: isFixedSize ? undefined : { minWidth: size, minHeight: size } })) : ((0, jsx_runtime_1.jsx)(DefaultIcon, { "x-pds-name": "Icon", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", color: theme[colorKey], size: size, style: isFixedSize ? undefined : { minWidth: size, minHeight: size } }));
 };
 exports.default = Icon;

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import { PlacementTypes } from './Popup';
 import type { PDSTextType, PDSValueOption } from '../../../common';
 type Props = {
     titleText?: PDSTextType;
@@ -9,9 +8,8 @@ type Props = {
     hoverMode?: 'none' | 'use';
     contextMenuOptionArray?: PDSValueOption[];
     contextMenuState?: 'normal' | 'disabled';
-    colorTheme?: 'seller' | 'seller_transparent' | 'subscriber' | 'subscriber_transparent' | 'secondary_transparent_grey' | 'white_transparent_grey';
-    contextMenuPosition?: PlacementTypes;
+    colorTheme?: 'seller' | 'seller_transparent' | 'subscriber' | 'subscriber_transparent' | 'secondary_transparent_grey' | 'white_transparent_grey' | 'brand_primary_solid' | 'brand_primary_translucent' | 'secondary_transparent' | 'white_transparent';
     onClickContextMenuItem?: (option: PDSValueOption) => void;
 };
-declare function BasicChatListItem({ titleText, contentText, leftImageMode, imageSrc, hoverMode, contextMenuOptionArray, contextMenuPosition, onClickContextMenuItem, contextMenuState, colorTheme }: Props): JSX.Element;
+declare function BasicChatListItem({ titleText, contentText, leftImageMode, imageSrc, hoverMode, contextMenuOptionArray, onClickContextMenuItem, contextMenuState, colorTheme }: Props): JSX.Element;
 export default BasicChatListItem;