pds-dev-kit-web-test 2.5.595 → 2.5.596

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

@@ -19,78 +19,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var MultilingualModal_1 = __importDefault(require("../../panels/MultilingualModal"));
-var components_1 = require("../../../hybrid/components");
 var styled_components_1 = __importDefault(require("styled-components"));
-var IconButton_1 = require("../IconButton");
+var hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
 function BasicFormGroup(_a) {
-    var _b = _a.titleStyleTheme, titleStyleTheme = _b === void 0 ? 'subTitleBold' : _b, _c = _a.headerSize, headerSize = _c === void 0 ? 'rlarge' : _c, titleText = _a.titleText, descText = _a.descText, captionText = _a.captionText, inputForm = _a.inputForm, _d = _a.titleRequirementMode, titleRequirementMode = _d === void 0 ? 'none' : _d, _e = _a.multilingualBtnMode, multilingualBtnMode = _e === void 0 ? 'none' : _e, _f = _a.multilingualBtnState, multilingualBtnState = _f === void 0 ? 'normal' : _f, multilingualConfig = _a.multilingualConfig, richEditorConfig = _a.richEditorConfig;
-    var _g = (0, react_1.useState)(false), isMultiLanguageModalOpen = _g[0], setIsMultiLanguageModalOpen = _g[1];
-    var _h = (0, react_1.useState)(false), hasMultilingualValues = _h[0], setHasMultilingualValues = _h[1];
-    var _j = (0, react_1.useState)(function () {
-        return JSON.stringify((multilingualConfig === null || multilingualConfig === void 0 ? void 0 : multilingualConfig.initialValues) || {});
-    }), hiddenInputValue = _j[0], setHiddenInputValue = _j[1];
-    // hiddenInput의 값이 있는지 확인하는 함수
-    var checkMultilingualValues = function () {
-        try {
-            var values = JSON.parse(hiddenInputValue || '{}');
-            var hasValues = Object.values(values).some(function (value) { return value && value.toString().trim() !== ''; });
-            setHasMultilingualValues(hasValues);
-        }
-        catch (_a) {
-            setHasMultilingualValues(false);
-        }
-    };
-    // initialValues가 변경될 때 hiddenInputValue 업데이트
-    (0, react_1.useEffect)(function () {
-        var newValue = JSON.stringify((multilingualConfig === null || multilingualConfig === void 0 ? void 0 : multilingualConfig.initialValues) || {});
-        setHiddenInputValue(newValue);
-    }, [multilingualConfig === null || multilingualConfig === void 0 ? void 0 : multilingualConfig.initialValues]);
-    // hiddenInputValue가 변경될 때마다 체크
-    (0, react_1.useEffect)(function () {
-        checkMultilingualValues();
-    }, [hiddenInputValue]);
-    var handleLanguageButtonClick = function () {
-        // TinyEditor 모드일 때는 모달을 열지 않고 onTinyEditorAction 실행
-        if ((multilingualConfig === null || multilingualConfig === void 0 ? void 0 : multilingualConfig.textFieldLineType) === 'tinyeditor') {
-            if (multilingualConfig.onTinyEditorAction) {
-                multilingualConfig.onTinyEditorAction();
-            }
-            return;
-        }
-        setIsMultiLanguageModalOpen(true);
-    };
-    var handleLanguageModalClose = function () {
-        setIsMultiLanguageModalOpen(false);
-    };
-    var handleHiddenInputUpdate = function (newValue) {
-        setHiddenInputValue(newValue);
-    };
-    return ((0, jsx_runtime_1.jsxs)("div", __assign({ "x-pds-name": "BasicFormGroup", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [titleText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(S_TitleTextWrapper, __assign({ "$headerSize": headerSize }, { children: [(0, jsx_runtime_1.jsxs)(S_TitleText, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: titleStyleTheme, colorTheme: "sysTextPrimary" }), titleRequirementMode === 'use' && ((0, jsx_runtime_1.jsx)(S_IconWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_requirement", size: 16, fillType: "line", colorKey: "ui_cpnt_icon_sys_error_01" }) }))] }), multilingualBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(S_MultilingualButtonWrapper, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconFillType: "line", iconName: "ic_translate", baseSize: "small", shapeType: "round", baseColorKey: "ui_cpnt_button_fill_base_default", iconColorKey: hasMultilingualValues
-                                        ? 'ui_cpnt_button_icon_primary'
-                                        : 'ui_cpnt_icon_sys_grey_02', state: multilingualBtnState, onClick: multilingualBtnState === 'normal' ? handleLanguageButtonClick : undefined }) }))] })), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" })] })), multilingualBtnMode === 'use' && multilingualConfig && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "hidden", id: "hiddenInput_".concat(multilingualConfig.hiddenInputId), name: multilingualConfig.hiddenInputId, value: hiddenInputValue }), (0, jsx_runtime_1.jsx)(MultilingualModal_1.default, { isOpen: isMultiLanguageModalOpen, onClose: handleLanguageModalClose, config: multilingualConfig, richEditorConfig: richEditorConfig, onHiddenInputUpdate: handleHiddenInputUpdate })] })), descText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: descText, styleTheme: "caption1Regular", colorTheme: "sysTextSecondary" }), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_d" })] })), inputForm, captionText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: captionText, styleTheme: "caption1Regular", colorTheme: "sysTextPrimary" })] }))] })));
+    var _b = _a.titleStyleTheme, titleStyleTheme = _b === void 0 ? 'subTitleBold' : _b, titleText = _a.titleText, descText = _a.descText, captionText = _a.captionText, inputForm = _a.inputForm, _c = _a.titleRequirementMode, titleRequirementMode = _c === void 0 ? 'none' : _c;
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ "x-pds-name": "BasicFormGroup", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [titleText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(S_TitleTextWrapper, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: titleStyleTheme, colorTheme: "sysTextPrimary" }), titleRequirementMode === 'use' && ((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" }) }))] }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" })] })), descText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: descText, styleTheme: "caption1Regular", colorTheme: "sysTextSecondary" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" })] })), inputForm, captionText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: captionText, styleTheme: "caption1Regular", colorTheme: "sysTextPrimary" })] }))] })));
 }
-var S_TitleTextWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  justify-content: space-between;\n  width: ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  justify-content: space-between;\n  width: ", ";\n"])), function (_a) {
-    var $headerSize = _a.$headerSize;
-    if ($headerSize === 'small')
-        return '188px';
-    if ($headerSize === 'medium')
-        return '188px';
-    if ($headerSize === 'large')
-        return '432px';
-    if ($headerSize === 'rlarge')
-        return '100%';
-});
-var S_TitleText = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n"], ["\n  align-items: center;\n  display: flex;\n"])));
-var S_IconWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  height: 16px;\n  justify-content: center;\n  padding: 0 ", ";\n  width: 16px;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  height: 16px;\n  justify-content: center;\n  padding: 0 ", ";\n  width: 16px;\n"])), function (_a) {
+var S_TitleTextWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n"], ["\n  align-items: center;\n  display: flex;\n"])));
+var S_IconWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  height: 16px;\n  justify-content: center;\n  padding: 0 ", ";\n  width: 16px;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  height: 16px;\n  justify-content: center;\n  padding: 0 ", ";\n  width: 16px;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingA;
 });
-var S_MultilingualButtonWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  margin-left: ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  margin-left: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingB;
-});
 exports.default = BasicFormGroup;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1, templateObject_2;

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

@@ -1,9 +1,7 @@
 /// <reference types="react" />
 import type { PDSTextType } from '../../../common';
-import type { MultilingualConfig } from '../../../common/types';
 type BodyTextGroupProps = {
     titleStyleTheme?: 'headingBold' | 'leadParaBold' | 'subTitleBold';
-    headerSize?: 'small' | 'medium' | 'large' | 'rlarge';
     titleText: PDSTextType;
     descText?: PDSTextType;
     contentText?: PDSTextType;
@@ -11,9 +9,6 @@ type BodyTextGroupProps = {
     descTextWordBreak?: 'normal' | 'break_all' | 'keep_all' | 'break_word';
     contentTextWordBreak?: 'normal' | 'break_all' | 'keep_all' | 'break_word';
     contentFontWeight?: 'regular' | 'bold';
-    multilingualBtnMode?: 'use' | 'none';
-    multilingualBtnState?: 'normal' | 'disabled';
-    multilingualConfig?: MultilingualConfig;
 };
-declare function BodyTextGroup({ titleStyleTheme, headerSize, titleText, descText, contentText, titleTextWordBreak, descTextWordBreak, contentTextWordBreak, contentFontWeight, multilingualBtnMode, multilingualBtnState, multilingualConfig }: BodyTextGroupProps): JSX.Element;
+declare function BodyTextGroup({ titleStyleTheme, titleText, descText, contentText, titleTextWordBreak, descTextWordBreak, contentTextWordBreak, contentFontWeight }: BodyTextGroupProps): JSX.Element;
 export default BodyTextGroup;

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

@@ -1,8 +1,4 @@
 "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++) {
@@ -14,76 +10,12 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var panels_1 = require("../../panels");
-var styled_components_1 = __importDefault(require("styled-components"));
 var hybrid_1 = require("../../../hybrid");
-var IconButton_1 = require("../IconButton");
 var TextLabel_1 = require("../TextLabel");
 function BodyTextGroup(_a) {
-    var _b = _a.titleStyleTheme, titleStyleTheme = _b === void 0 ? 'subTitleBold' : _b, _c = _a.headerSize, headerSize = _c === void 0 ? 'rlarge' : _c, titleText = _a.titleText, descText = _a.descText, contentText = _a.contentText, _d = _a.titleTextWordBreak, titleTextWordBreak = _d === void 0 ? 'keep_all' : _d, _e = _a.descTextWordBreak, descTextWordBreak = _e === void 0 ? 'keep_all' : _e, _f = _a.contentTextWordBreak, contentTextWordBreak = _f === void 0 ? 'keep_all' : _f, _g = _a.contentFontWeight, contentFontWeight = _g === void 0 ? 'regular' : _g, _h = _a.multilingualBtnMode, multilingualBtnMode = _h === void 0 ? 'none' : _h, _j = _a.multilingualBtnState, multilingualBtnState = _j === void 0 ? 'normal' : _j, multilingualConfig = _a.multilingualConfig;
-    var _k = (0, react_1.useState)(false), isMultiLanguageModalOpen = _k[0], setIsMultiLanguageModalOpen = _k[1];
-    var _l = (0, react_1.useState)(false), hasMultilingualValues = _l[0], setHasMultilingualValues = _l[1];
-    var _m = (0, react_1.useState)(function () {
-        return JSON.stringify((multilingualConfig === null || multilingualConfig === void 0 ? void 0 : multilingualConfig.initialValues) || {});
-    }), hiddenInputValue = _m[0], setHiddenInputValue = _m[1];
-    // hiddenInput의 값이 있는지 확인하는 함수
-    var checkMultilingualValues = function () {
-        try {
-            var values = JSON.parse(hiddenInputValue || '{}');
-            var hasValues = Object.values(values).some(function (value) { return value && value.toString().trim() !== ''; });
-            setHasMultilingualValues(hasValues);
-        }
-        catch (_a) {
-            setHasMultilingualValues(false);
-        }
-    };
-    // initialValues가 변경될 때 hiddenInputValue 업데이트
-    (0, react_1.useEffect)(function () {
-        var newValue = JSON.stringify((multilingualConfig === null || multilingualConfig === void 0 ? void 0 : multilingualConfig.initialValues) || {});
-        setHiddenInputValue(newValue);
-    }, [multilingualConfig === null || multilingualConfig === void 0 ? void 0 : multilingualConfig.initialValues]);
-    // hiddenInputValue가 변경될 때마다 체크
-    (0, react_1.useEffect)(function () {
-        checkMultilingualValues();
-    }, [hiddenInputValue]);
-    var handleLanguageButtonClick = function () {
-        // TinyEditor 모드일 때는 모달을 열지 않고 onTinyEditorAction 실행
-        if ((multilingualConfig === null || multilingualConfig === void 0 ? void 0 : multilingualConfig.textFieldLineType) === 'tinyeditor') {
-            if (multilingualConfig.onTinyEditorAction) {
-                multilingualConfig.onTinyEditorAction();
-            }
-            return;
-        }
-        setIsMultiLanguageModalOpen(true);
-    };
-    var handleLanguageModalClose = function () {
-        setIsMultiLanguageModalOpen(false);
-    };
-    var handleHiddenInputUpdate = function (newValue) {
-        setHiddenInputValue(newValue);
-    };
-    return ((0, jsx_runtime_1.jsxs)("div", __assign({ "x-pds-name": "BodyTextGroup", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [(0, jsx_runtime_1.jsxs)(S_TitleTextWrapper, __assign({ "$headerSize": headerSize }, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, wordBreak: titleTextWordBreak, styleTheme: titleStyleTheme, colorTheme: "sysTextPrimary" }), multilingualBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(S_MultilingualButtonWrapper, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconFillType: "line", iconName: "ic_translate", baseSize: "small", shapeType: "round", baseColorKey: "ui_cpnt_button_fill_base_default", iconColorKey: hasMultilingualValues ? 'ui_cpnt_button_icon_primary' : 'ui_cpnt_icon_sys_grey_02', state: multilingualBtnState, onClick: multilingualBtnState === 'normal' ? handleLanguageButtonClick : undefined }) }))] })), multilingualBtnMode === 'use' && multilingualConfig && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "hidden", id: "hiddenInput_".concat(multilingualConfig.hiddenInputId), name: multilingualConfig.hiddenInputId, value: hiddenInputValue }), (0, jsx_runtime_1.jsx)(panels_1.MultilingualModal, { isOpen: isMultiLanguageModalOpen, onClose: handleLanguageModalClose, config: multilingualConfig, onHiddenInputUpdate: handleHiddenInputUpdate })] })), descText && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: descText, wordBreak: descTextWordBreak, styleTheme: "caption1Regular", colorTheme: "sysTextSecondary" })] })), contentText && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: contentText, wordBreak: contentTextWordBreak, styleTheme: contentFontWeight === 'regular' ? 'body2Regular' : 'body2Bold', colorTheme: "sysTextPrimary" })] }))] })));
+    var _b = _a.titleStyleTheme, titleStyleTheme = _b === void 0 ? 'subTitleBold' : _b, titleText = _a.titleText, descText = _a.descText, contentText = _a.contentText, _c = _a.titleTextWordBreak, titleTextWordBreak = _c === void 0 ? 'keep_all' : _c, _d = _a.descTextWordBreak, descTextWordBreak = _d === void 0 ? 'keep_all' : _d, _e = _a.contentTextWordBreak, contentTextWordBreak = _e === void 0 ? 'keep_all' : _e, _f = _a.contentFontWeight, contentFontWeight = _f === void 0 ? 'regular' : _f;
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ "x-pds-name": "BodyTextGroup", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, wordBreak: titleTextWordBreak, styleTheme: titleStyleTheme, colorTheme: "sysTextPrimary" }), descText && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: descText, wordBreak: descTextWordBreak, styleTheme: "caption1Regular", colorTheme: "sysTextSecondary" })] })), contentText && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: contentText, wordBreak: contentTextWordBreak, styleTheme: contentFontWeight === 'regular' ? 'body2Regular' : 'body2Bold', colorTheme: "sysTextPrimary" })] }))] })));
 }
-var S_TitleTextWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  justify-content: space-between;\n  width: ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  justify-content: space-between;\n  width: ", ";\n"])), function (_a) {
-    var $headerSize = _a.$headerSize;
-    if ($headerSize === 'small')
-        return '188px';
-    if ($headerSize === 'medium')
-        return '188px';
-    if ($headerSize === 'large')
-        return '432px';
-    if ($headerSize === 'rlarge')
-        return '100%';
-});
-var S_MultilingualButtonWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  margin-left: ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  margin-left: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingB;
-});
 exports.default = BodyTextGroup;
-var templateObject_1, templateObject_2;

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

@@ -9,7 +9,8 @@ export type ChatBubbleListItemProps = {
     colorTheme?: ColorThemeType;
     timeMode?: 'none' | 'use';
     timeText?: PDSTextType;
-    labelText?: PDSTextType;
+    countMode?: 'none' | 'use';
+    countText?: PDSTextType;
     contextMenuOptionArray?: PDSValueOption[];
     contextMenuState?: 'normal' | 'disabled';
     children?: React.ReactNode;
@@ -17,5 +18,5 @@ export type ChatBubbleListItemProps = {
     onClickContextMenuItem?: (option: PDSValueOption) => void;
     onClickDownloadIBtn?: () => void;
 };
-declare function ChatBubbleListItem({ titleText, imageSrc, hoverMode, styleTheme, colorTheme, timeMode, timeText, labelText, contextMenuOptionArray, contextMenuState, children, downloadIBtnMode, onClickContextMenuItem, onClickDownloadIBtn }: ChatBubbleListItemProps): JSX.Element;
+declare function ChatBubbleListItem({ titleText, imageSrc, hoverMode, styleTheme, colorTheme, timeMode, timeText, countMode, countText, contextMenuOptionArray, contextMenuState, children, downloadIBtnMode, onClickContextMenuItem, onClickDownloadIBtn }: ChatBubbleListItemProps): JSX.Element;
 export default ChatBubbleListItem;

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

@@ -68,8 +68,8 @@ var profileImageBorderColorTheme = {
     transparent: 'ui_cpnt_list_chatbubble_base_transparent'
 };
 function ChatBubbleListItem(_a) {
-    var titleText = _a.titleText, imageSrc = _a.imageSrc, _b = _a.hoverMode, hoverMode = _b === void 0 ? 'use' : _b, styleTheme = _a.styleTheme, _c = _a.colorTheme, colorTheme = _c === void 0 ? 'grey' : _c, _d = _a.timeMode, timeMode = _d === void 0 ? 'use' : _d, timeText = _a.timeText, labelText = _a.labelText, contextMenuOptionArray = _a.contextMenuOptionArray, _e = _a.contextMenuState, contextMenuState = _e === void 0 ? 'normal' : _e, children = _a.children, _f = _a.downloadIBtnMode, downloadIBtnMode = _f === void 0 ? 'none' : _f, onClickContextMenuItem = _a.onClickContextMenuItem, onClickDownloadIBtn = _a.onClickDownloadIBtn;
-    var _g = (0, react_1.useState)(false), isContextMenuOpen = _g[0], setIsContextMenuOpen = _g[1];
+    var titleText = _a.titleText, imageSrc = _a.imageSrc, _b = _a.hoverMode, hoverMode = _b === void 0 ? 'use' : _b, styleTheme = _a.styleTheme, _c = _a.colorTheme, colorTheme = _c === void 0 ? 'grey' : _c, _d = _a.timeMode, timeMode = _d === void 0 ? 'use' : _d, timeText = _a.timeText, _e = _a.countMode, countMode = _e === void 0 ? 'none' : _e, countText = _a.countText, contextMenuOptionArray = _a.contextMenuOptionArray, _f = _a.contextMenuState, contextMenuState = _f === void 0 ? 'normal' : _f, children = _a.children, _g = _a.downloadIBtnMode, downloadIBtnMode = _g === void 0 ? 'none' : _g, onClickContextMenuItem = _a.onClickContextMenuItem, onClickDownloadIBtn = _a.onClickDownloadIBtn;
+    var _h = (0, react_1.useState)(false), isContextMenuOpen = _h[0], setIsContextMenuOpen = _h[1];
     var contextMenuRef = (0, react_1.useRef)(null);
     var chatBody = document.querySelector('#chatMessageBox');
     var rect = chatBody === null || chatBody === void 0 ? void 0 : chatBody.getBoundingClientRect();
@@ -80,21 +80,26 @@ function ChatBubbleListItem(_a) {
         styleTheme === 'other_avatar' ||
         styleTheme === 'other_avatar_sub';
     var titleTextColorTheme = 'sysTextPrimary';
+    var countTextColorTheme = 'sysTextPrimary';
     switch (colorTheme) {
         case 'grey': {
             titleTextColorTheme = 'sysTextPrimary';
+            countTextColorTheme = 'sysTextPrimary';
             break;
         }
         case 'brand_primary': {
             titleTextColorTheme = 'usrTextBrandPrimary';
+            countTextColorTheme = 'sysTextPrimary';
             break;
         }
         case 'translucent_white': {
             titleTextColorTheme = 'sysTextBlack';
+            countTextColorTheme = 'sysTextPrimary';
             break;
         }
         case 'translucent_black': {
             titleTextColorTheme = 'sysTextWhite';
+            countTextColorTheme = 'sysTextPrimary';
         }
     }
     /**
@@ -135,7 +140,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": "desktop", 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, { children: [(0, jsx_runtime_1.jsxs)(S_ChatBubbleWrapper, __assign({ isMe: isMe }, { 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" }))] }))] }))] })), 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": "desktop", 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, { children: [(0, jsx_runtime_1.jsxs)(S_ChatBubbleWrapper, __assign({ isMe: isMe }, { 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: [countMode === 'use' && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: countText, styleTheme: "caption2Regular", colorTheme: countTextColorTheme })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }), (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: [countMode === 'use' && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: countText, styleTheme: "caption2Regular", colorTheme: countTextColorTheme })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" })] }))] }))] }))] })), 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;

package/dist/src/desktop/components/ChatList/Body.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { Props as ChatListProps } from './ChatList';
-declare const Body: React.ForwardRefExoticComponent<Pick<ChatListProps, "children" | "scrollVisibleType" | "bodySpacingMode" | "bodyMBtnText" | "bodyChildren"> & {
+declare const Body: React.ForwardRefExoticComponent<Pick<ChatListProps, "children" | "scrollVisibleType" | "bodyMBtnText" | "bodySpacingMode" | "bodyChildren"> & {
     isSubmitted: boolean;
     callBackAfterScrollToBottom: () => void;
 } & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,4 +1,4 @@
-import type { PDSIconType, PDSTextType } from '../../../common';
+import type { PDSTextType } from '../../../common';
 import type React from 'react';
 export type TextButtonProps = {
     text?: PDSTextType;
@@ -7,12 +7,9 @@ export type TextButtonProps = {
     fontWeight?: 'bold' | 'regular';
     type?: 'submit' | 'reset' | 'button';
     state?: 'normal' | 'disabled';
-    iconMode?: 'none' | 'left' | 'right';
-    iconFillType?: 'fill' | 'line';
-    iconName?: PDSIconType;
-    colorTheme?: 'none' | 'red' | 'grey_01' | 'grey2' | 'grey3' | 'white' | 'white2';
+    colorTheme?: 'none' | 'red' | 'grey_01' | 'grey2' | 'white' | 'white2';
     onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     onKeyDown?: (e: React.KeyboardEvent<HTMLButtonElement>) => void;
 };
-declare function TextButton({ text, size, responsiveMode, fontWeight, type, state, iconMode, iconFillType, iconName, colorTheme, onClick, onKeyDown, ...rest }: TextButtonProps): JSX.Element;
+declare function TextButton({ text, size, responsiveMode, fontWeight, type, state, colorTheme, onClick, onKeyDown, ...rest }: TextButtonProps): JSX.Element;
 export default TextButton;

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

@@ -51,7 +51,6 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var components_1 = require("../../../hybrid/components");
 var styled_components_1 = __importStar(require("styled-components"));
 var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
 var TextLabel_1 = require("../TextLabel");
@@ -67,66 +66,11 @@ var textColor = {
     red: 'sysTextError',
     grey_01: 'sysTextPrimary',
     grey2: 'sysTextSecondary',
-    grey3: undefined,
     white: 'sysTextWhite',
     white2: 'sysTextWhite'
 };
-var iconColor = {
-    none: 'ui_cpnt_button_icon_primary',
-    red: 'ui_cpnt_button_icon_error',
-    grey_01: 'ui_cpnt_button_icon_enabled',
-    grey2: 'ui_cpnt_button_icon_default',
-    grey3: 'ui_141',
-    white: 'ui_cpnt_sidebar_icon_01',
-    white2: 'ui_cpnt_sidebar_icon_01'
-};
-var textDisabledColor = {
-    none: 'sysTextTertiary',
-    red: 'sysTextTertiary',
-    grey_01: 'sysTextTertiary',
-    grey2: 'sysTextTertiary',
-    grey3: undefined,
-    white: 'sysTextTertiary',
-    white2: 'sysTextTertiary'
-};
-var overrideTextColor = {
-    none: undefined,
-    red: undefined,
-    grey_01: undefined,
-    grey2: undefined,
-    grey3: 'ui_141',
-    white: undefined,
-    white2: undefined
-};
-var overrideTextDisabledColor = {
-    none: undefined,
-    red: undefined,
-    grey_01: undefined,
-    grey2: undefined,
-    grey3: 'ui_142',
-    white: undefined,
-    white2: undefined
-};
-var backgroundHoverColor = {
-    none: 'ui_cpnt_button_line_base_hover',
-    red: 'ui_cpnt_button_line_base_hover',
-    grey_01: 'ui_cpnt_button_line_base_hover',
-    grey2: 'ui_cpnt_button_line_base_hover',
-    grey3: 'ui_143',
-    white: 'ui_cpnt_button_white_base_hover',
-    white2: 'ui_cpnt_textbutton_white_variation_base_hover'
-};
-var backgroundPressedColor = {
-    none: 'ui_cpnt_button_line_base_pressed',
-    red: 'ui_cpnt_button_line_base_pressed',
-    grey_01: 'ui_cpnt_button_line_base_pressed',
-    grey2: 'ui_cpnt_button_line_base_pressed',
-    grey3: 'ui_144',
-    white: 'ui_cpnt_button_white_base_pressed',
-    white2: 'ui_cpnt_textbutton_white_variation_base_pressed'
-};
 function TextButton(_a) {
-    var text = _a.text, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, fontWeight = _a.fontWeight, _d = _a.type, type = _d === void 0 ? 'button' : _d, _e = _a.state, state = _e === void 0 ? 'normal' : _e, _f = _a.iconMode, iconMode = _f === void 0 ? 'none' : _f, _g = _a.iconFillType, iconFillType = _g === void 0 ? 'line' : _g, iconName = _a.iconName, _h = _a.colorTheme, colorTheme = _h === void 0 ? 'none' : _h, onClick = _a.onClick, onKeyDown = _a.onKeyDown, rest = __rest(_a, ["text", "size", "responsiveMode", "fontWeight", "type", "state", "iconMode", "iconFillType", "iconName", "colorTheme", "onClick", "onKeyDown"]);
+    var text = _a.text, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, fontWeight = _a.fontWeight, _d = _a.type, type = _d === void 0 ? 'button' : _d, _e = _a.state, state = _e === void 0 ? 'normal' : _e, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'none' : _f, onClick = _a.onClick, onKeyDown = _a.onKeyDown, rest = __rest(_a, ["text", "size", "responsiveMode", "fontWeight", "type", "state", "colorTheme", "onClick", "onKeyDown"]);
     var buttonRef = (0, react_1.useRef)(null);
     /**
      * @when keydown 이벤트가 있을 때만
@@ -144,9 +88,7 @@ function TextButton(_a) {
             onClick(e);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(S_Button, __assign({ ref: buttonRef, "x-pds-name": "TextButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, rest, { size: size, responsiveMode: responsiveMode, onClick: handleClick, onKeyDown: onKeyDown, type: type, fontWeight: fontWeight, disabled: state === 'disabled', state: state, hoverColor: backgroundHoverColor[colorTheme], pressedColor: backgroundPressedColor[colorTheme] }, { children: [size !== 'xsmall' && iconMode === 'left' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: state === 'disabled' ? 'ui_cpnt_button_text_disabled' : iconColor[colorTheme], fillType: iconFillType }), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? textDisabledColor[colorTheme] : textColor[colorTheme], colorOverride: state === 'disabled'
-                    ? overrideTextDisabledColor[colorTheme]
-                    : overrideTextColor[colorTheme], singleLineMode: "use", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }), size !== 'xsmall' && iconMode === 'right' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }), (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: state === 'disabled' ? 'ui_cpnt_button_text_disabled' : iconColor[colorTheme], fillType: iconFillType })] }))] })));
+    return ((0, jsx_runtime_1.jsx)(S_Button, __assign({ ref: buttonRef, "x-pds-name": "TextButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, rest, { size: size, responsiveMode: responsiveMode, onClick: handleClick, onKeyDown: onKeyDown, type: type, fontWeight: fontWeight, disabled: state === 'disabled', state: state, colorTheme: colorTheme }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor[colorTheme], singleLineMode: "use", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }) })));
 }
 var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 14px;\n  height: 48px;\n\n  ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"], ["\n  border-radius: 14px;\n  height: 48px;\n\n  ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"])), function (_a) {
     var size = _a.size;
@@ -155,15 +97,46 @@ var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 =
 var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 14px;\n  height: 40px;\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n"], ["\n  border-radius: 14px;\n  height: 40px;\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n"])));
 var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-radius: 10px;\n  height: 32px;\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"], ["\n  border-radius: 10px;\n  height: 32px;\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"])));
 var xsmall = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border-radius: 8px;\n  height: 24px;\n\n  & > div {\n    height: 24px;\n    line-height: 24px;\n  }\n"], ["\n  border-radius: 8px;\n  height: 24px;\n\n  & > div {\n    height: 24px;\n    line-height: 24px;\n  }\n"])));
-var S_Button = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  justify-content: center;\n  padding-left: 8px;\n  padding-right: 8px;\n\n  ", "\n\n  &:hover:enabled {\n    background-color: ", ";\n  }\n\n  &:active:enabled {\n    background-color: ", ";\n  }\n\n  ", ";\n\n  & > div {\n    ", ";\n  }\n\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  justify-content: center;\n  padding-left: 8px;\n  padding-right: 8px;\n\n  ", "\n\n  &:hover:enabled {\n    background-color: ", ";\n  }\n\n  &:active:enabled {\n    background-color: ", ";\n  }\n\n  ", ";\n\n  & > div {\n    ", ";\n  }\n\n  ", ";\n"])), function (_a) {
+var colorThemeDefault = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  &:hover:enabled {\n    background-color: ", ";\n  }\n\n  &:active:enabled {\n    background-color: ", ";\n  }\n"], ["\n  &:hover:enabled {\n    background-color: ", ";\n  }\n\n  &:active:enabled {\n    background-color: ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_line_base_hover;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_line_base_pressed;
+});
+var colorThemeWhite = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  &:hover:enabled {\n    background-color: ", ";\n  }\n\n  &:active:enabled {\n    background-color: ", ";\n  }\n"], ["\n  &:hover:enabled {\n    background-color: ", ";\n  }\n\n  &:active:enabled {\n    background-color: ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_white_base_hover;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_white_base_pressed;
+});
+var colorThemeWhite2 = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  &:hover:enabled {\n    background-color: ", ";\n  }\n\n  &:active:enabled {\n    background-color: ", ";\n  }\n"], ["\n  &:hover:enabled {\n    background-color: ", ";\n  }\n\n  &:active:enabled {\n    background-color: ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_textbutton_white_variation_base_hover;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_textbutton_white_variation_base_pressed;
+});
+var S_Button = styled_components_1.default.button(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  justify-content: center;\n  padding-left: 8px;\n  padding-right: 8px;\n\n  ", "\n\n  ", ";\n\n  ", ";\n\n  & > div {\n    ", ";\n  }\n\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  justify-content: center;\n  padding-left: 8px;\n  padding-right: 8px;\n\n  ", "\n\n  ", ";\n\n  ", ";\n\n  & > div {\n    ", ";\n  }\n\n  ", ";\n"])), function (_a) {
     var state = _a.state;
     return (state === 'normal' ? 'pointer' : 'default');
 }, transitionStyle_1.ButtonTransition, function (_a) {
-    var hoverColor = _a.hoverColor, theme = _a.theme;
-    return theme[hoverColor];
-}, function (_a) {
-    var pressedColor = _a.pressedColor, theme = _a.theme;
-    return theme[pressedColor];
+    var colorTheme = _a.colorTheme;
+    switch (colorTheme) {
+        case 'none':
+        case 'red':
+        case 'grey_01':
+            return colorThemeDefault;
+        case 'grey2':
+            return colorThemeDefault;
+        case 'white':
+            return colorThemeWhite;
+        case 'white2':
+            return colorThemeWhite2;
+        default:
+            return colorThemeDefault;
+    }
 }, function (_a) {
     var size = _a.size;
     return size &&
@@ -186,4 +159,4 @@ var S_Button = styled_components_1.default.button(templateObject_5 || (templateO
     return responsiveMode === 'use' && 'width: 100%';
 });
 exports.default = TextButton;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

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

@@ -18,10 +18,9 @@ export type TextFieldProps = {
     numberStepperMode?: 'none' | 'use';
     numberStep?: number;
     fontWeight?: 'bold' | 'regular';
-    hintTextFontWeight?: 'normal' | 'bold';
     deleteBtnMode?: 'none' | 'use';
     onClickIBtn1?: () => void;
     onClickIBtn2?: () => void;
 } & Partial<TextFieldBaseProps>;
-declare function TextField({ name, hintText, defaultText, textAlign, prefixText, suffixText, validation, validationPoint, preventBlankMode, enterSubmitMode, size, responsiveMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, inputMode, state, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, overrideIBtn1IconColorKey, overrideIBtn2IconColorKey, colorTheme, max, maxLength, min, customWidth, autoComplete, numberStepperMode, numberStep, fontWeight, hintTextFontWeight, deleteBtnMode, onBlur, onChange, onClickIBtn1, onClickIBtn2, onFocus, onKeyUp, onKeyDown, onTarget }: TextFieldProps): JSX.Element;
+declare function TextField({ name, hintText, defaultText, textAlign, prefixText, suffixText, validation, validationPoint, preventBlankMode, enterSubmitMode, size, responsiveMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, inputMode, state, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, overrideIBtn1IconColorKey, overrideIBtn2IconColorKey, colorTheme, max, maxLength, min, customWidth, autoComplete, numberStepperMode, numberStep, fontWeight, deleteBtnMode, onBlur, onChange, onClickIBtn1, onClickIBtn2, onFocus, onKeyUp, onKeyDown, onTarget }: TextFieldProps): JSX.Element;
 export default TextField;

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

@@ -51,7 +51,7 @@ var IconButton_1 = require("../IconButton");
 var TextLabel_1 = require("../TextLabel");
 function TextField(_a) {
     var _b;
-    var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, _c = _a.textAlign, textAlign = _c === void 0 ? 'left' : _c, prefixText = _a.prefixText, suffixText = _a.suffixText, validation = _a.validation, _d = _a.validationPoint, validationPoint = _d === void 0 ? 'onBlur' : _d, _e = _a.preventBlankMode, preventBlankMode = _e === void 0 ? 'none' : _e, _f = _a.enterSubmitMode, enterSubmitMode = _f === void 0 ? 'none' : _f, _g = _a.size, size = _g === void 0 ? 'large' : _g, _h = _a.responsiveMode, responsiveMode = _h === void 0 ? 'none' : _h, _j = _a.textLineType, textLineType = _j === void 0 ? 'single' : _j, _k = _a.multiRows, multiRows = _k === void 0 ? 8 : _k, _l = _a.autoMinRows, autoMinRows = _l === void 0 ? 8 : _l, autoMaxRows = _a.autoMaxRows, _m = _a.inputType, inputType = _m === void 0 ? 'text' : _m, inputMode = _a.inputMode, _o = _a.state, state = _o === void 0 ? 'normal' : _o, iBtn1IconName = _a.iBtn1IconName, _p = _a.iBtn1IconFillType, iBtn1IconFillType = _p === void 0 ? 'line' : _p, iBtn2IconName = _a.iBtn2IconName, _q = _a.iBtn2IconFillType, iBtn2IconFillType = _q === void 0 ? 'line' : _q, overrideIBtn1IconColorKey = _a.overrideIBtn1IconColorKey, overrideIBtn2IconColorKey = _a.overrideIBtn2IconColorKey, _r = _a.colorTheme, colorTheme = _r === void 0 ? 'none' : _r, max = _a.max, maxLength = _a.maxLength, min = _a.min, customWidth = _a.customWidth, _s = _a.autoComplete, autoComplete = _s === void 0 ? 'on' : _s, _t = _a.numberStepperMode, numberStepperMode = _t === void 0 ? 'none' : _t, numberStep = _a.numberStep, _u = _a.fontWeight, fontWeight = _u === void 0 ? 'regular' : _u, _v = _a.hintTextFontWeight, hintTextFontWeight = _v === void 0 ? 'normal' : _v, _w = _a.deleteBtnMode, deleteBtnMode = _w === void 0 ? 'use' : _w, onBlur = _a.onBlur, onChange = _a.onChange, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onFocus = _a.onFocus, onKeyUp = _a.onKeyUp, onKeyDown = _a.onKeyDown, onTarget = _a.onTarget;
+    var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, _c = _a.textAlign, textAlign = _c === void 0 ? 'left' : _c, prefixText = _a.prefixText, suffixText = _a.suffixText, validation = _a.validation, _d = _a.validationPoint, validationPoint = _d === void 0 ? 'onBlur' : _d, _e = _a.preventBlankMode, preventBlankMode = _e === void 0 ? 'none' : _e, _f = _a.enterSubmitMode, enterSubmitMode = _f === void 0 ? 'none' : _f, _g = _a.size, size = _g === void 0 ? 'large' : _g, _h = _a.responsiveMode, responsiveMode = _h === void 0 ? 'none' : _h, _j = _a.textLineType, textLineType = _j === void 0 ? 'single' : _j, _k = _a.multiRows, multiRows = _k === void 0 ? 8 : _k, _l = _a.autoMinRows, autoMinRows = _l === void 0 ? 8 : _l, autoMaxRows = _a.autoMaxRows, _m = _a.inputType, inputType = _m === void 0 ? 'text' : _m, inputMode = _a.inputMode, _o = _a.state, state = _o === void 0 ? 'normal' : _o, iBtn1IconName = _a.iBtn1IconName, _p = _a.iBtn1IconFillType, iBtn1IconFillType = _p === void 0 ? 'line' : _p, iBtn2IconName = _a.iBtn2IconName, _q = _a.iBtn2IconFillType, iBtn2IconFillType = _q === void 0 ? 'line' : _q, overrideIBtn1IconColorKey = _a.overrideIBtn1IconColorKey, overrideIBtn2IconColorKey = _a.overrideIBtn2IconColorKey, _r = _a.colorTheme, colorTheme = _r === void 0 ? 'none' : _r, max = _a.max, maxLength = _a.maxLength, min = _a.min, customWidth = _a.customWidth, _s = _a.autoComplete, autoComplete = _s === void 0 ? 'on' : _s, _t = _a.numberStepperMode, numberStepperMode = _t === void 0 ? 'none' : _t, numberStep = _a.numberStep, _u = _a.fontWeight, fontWeight = _u === void 0 ? 'regular' : _u, _v = _a.deleteBtnMode, deleteBtnMode = _v === void 0 ? 'use' : _v, onBlur = _a.onBlur, onChange = _a.onChange, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onFocus = _a.onFocus, onKeyUp = _a.onKeyUp, onKeyDown = _a.onKeyDown, onTarget = _a.onTarget;
     var basicThemeIconColors = {
         normal: 'ui_cpnt_button_icon_default',
         read_only: 'ui_cpnt_button_icon_default',
@@ -67,9 +67,9 @@ function TextField(_a) {
         read_only: 'ui_cpnt_textfield_icon_colortheme_transparent_readonly',
         disabled: 'ui_cpnt_textfield_icon_colortheme_transparent_disabled'
     };
-    var _x = (0, react_1.useState)(false), isFocused = _x[0], setIsFocused = _x[1];
-    var _y = (0, react_hook_form_1.useFormContext)(), register = _y.register, trigger = _y.trigger, errors = _y.formState.errors;
-    var _z = register(name, validation), validateOnChange = _z.onChange, validateOnBlur = _z.onBlur;
+    var _w = (0, react_1.useState)(false), isFocused = _w[0], setIsFocused = _w[1];
+    var _x = (0, react_hook_form_1.useFormContext)(), register = _x.register, trigger = _x.trigger, errors = _x.formState.errors;
+    var _y = register(name, validation), validateOnChange = _y.onChange, validateOnBlur = _y.onBlur;
     var isError = (0, types_1.getErrorByName)(errors, name);
     var handleClickIBtn1 = function () {
         if (onClickIBtn1) {
@@ -135,7 +135,7 @@ function TextField(_a) {
             }
         }
         if (textLineType === 'multi') {
-            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, textAlign: textAlign, validation: validation, textLineType: "multi", multiRows: multiRows, state: state, colorTheme: colorTheme, maxLength: maxLength, textSize: "form2", textWeight: fontWeight === 'bold' ? 'bold' : 'normal', hintTextWeight: hintTextFontWeight === 'bold' ? 'bold' : 'normal', autoComplete: autoComplete, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown }), (0, jsx_runtime_1.jsxs)(S_RightBox_Multi, { children: [iBtn2IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iBtn2IconName, baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: size === 'large' || size === 'rlarge' ? 20 : 16, iconColorKey: overrideIBtn2IconColorKey ||
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, textAlign: textAlign, validation: validation, textLineType: "multi", multiRows: multiRows, state: state, colorTheme: colorTheme, maxLength: maxLength, textSize: "form2", textWeight: fontWeight === 'bold' ? 'bold' : 'normal', autoComplete: autoComplete, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown }), (0, jsx_runtime_1.jsxs)(S_RightBox_Multi, { children: [iBtn2IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iBtn2IconName, baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: size === 'large' || size === 'rlarge' ? 20 : 16, iconColorKey: overrideIBtn2IconColorKey ||
                                     (colorTheme &&
                                         {
                                             none: basicThemeIconColors[state],
@@ -150,7 +150,7 @@ function TextField(_a) {
                                         }[colorTheme]), iconFillType: iBtn1IconFillType === 'fill' ? 'fill' : 'line', state: state === 'disabled' ? 'disabled' : 'normal', onClick: handleClickIBtn1 }))] })] }));
         }
         if (textLineType === 'auto') {
-            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, textAlign: textAlign, validation: validation, textLineType: "auto", autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, state: state, colorTheme: colorTheme, maxLength: maxLength, textSize: "form2", textWeight: fontWeight === 'bold' ? 'bold' : 'normal', hintTextWeight: hintTextFontWeight === 'bold' ? 'bold' : 'normal', autoComplete: autoComplete, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown }), (0, jsx_runtime_1.jsxs)(S_RightBox_Auto, { children: [iBtn2IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iBtn2IconName, baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: size === 'large' || size === 'rlarge' ? 20 : 16, iconColorKey: overrideIBtn2IconColorKey ||
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, textAlign: textAlign, validation: validation, textLineType: "auto", autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, state: state, colorTheme: colorTheme, maxLength: maxLength, textSize: "form2", textWeight: fontWeight === 'bold' ? 'bold' : 'normal', autoComplete: autoComplete, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown }), (0, jsx_runtime_1.jsxs)(S_RightBox_Auto, { children: [iBtn2IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iBtn2IconName, baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: size === 'large' || size === 'rlarge' ? 20 : 16, iconColorKey: overrideIBtn2IconColorKey ||
                                     (colorTheme &&
                                         {
                                             none: basicThemeIconColors[state],
@@ -165,7 +165,7 @@ function TextField(_a) {
                                         }[colorTheme]), iconFillType: iBtn1IconFillType === 'fill' ? 'fill' : 'line', state: state === 'disabled' ? 'disabled' : 'normal', onClick: handleClickIBtn1 }))] })] }));
         }
         if (textLineType === 'single') {
-            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [prefixText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: prefixText, styleTheme: "caption1Bold", colorTheme: "sysTextTertiary", singleLineMode: "use" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, textAlign: textAlign, validation: validation, preventBlankMode: preventBlankMode, enterSubmitMode: enterSubmitMode, textLineType: "single", inputType: inputType, inputMode: inputMode, state: state, colorTheme: colorTheme, min: min, max: max, maxLength: maxLength, textSize: "form2", textWeight: fontWeight === 'bold' ? 'bold' : 'normal', hintTextWeight: hintTextFontWeight === 'bold' ? 'bold' : 'normal', fieldPaddingRight: size === 'large' || size === 'rlarge' ? 8 : undefined, deleteIconMode: deleteBtnMode, deleteIconSize: size === 'large' || size === 'rlarge' ? 20 : 16, deleteIconColor: deleteIconColor, isFocused: isFocused, autoComplete: autoComplete, stepperMode: inputType === 'number' && numberStepperMode === 'use' ? 'use' : 'none', stepperRightSpacing: size === 'large' || size === 'rlarge' ? 1 : -4, innerSpinButtonSize: size === 'small' ? 12 : 16, step: numberStep, suffixText: suffixText, suffixTextRightSpacingMode: size === 'large' || size === 'rlarge' ? 'use' : 'none', onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown }), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [iBtn2IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iBtn2IconName, baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: size === 'large' || size === 'rlarge' ? 20 : 16, iconColorKey: overrideIBtn2IconColorKey ||
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [prefixText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: prefixText, styleTheme: "caption1Bold", colorTheme: "sysTextTertiary", singleLineMode: "use" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, textAlign: textAlign, validation: validation, preventBlankMode: preventBlankMode, enterSubmitMode: enterSubmitMode, textLineType: "single", inputType: inputType, inputMode: inputMode, state: state, colorTheme: colorTheme, min: min, max: max, maxLength: maxLength, textSize: "form2", textWeight: fontWeight === 'bold' ? 'bold' : 'normal', fieldPaddingRight: size === 'large' || size === 'rlarge' ? 8 : undefined, deleteIconMode: deleteBtnMode, deleteIconSize: size === 'large' || size === 'rlarge' ? 20 : 16, deleteIconColor: deleteIconColor, isFocused: isFocused, autoComplete: autoComplete, stepperMode: inputType === 'number' && numberStepperMode === 'use' ? 'use' : 'none', stepperRightSpacing: size === 'large' || size === 'rlarge' ? 1 : -4, innerSpinButtonSize: size === 'small' ? 12 : 16, step: numberStep, suffixText: suffixText, suffixTextRightSpacingMode: size === 'large' || size === 'rlarge' ? 'use' : 'none', onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown }), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [iBtn2IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iBtn2IconName, baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: size === 'large' || size === 'rlarge' ? 20 : 16, iconColorKey: overrideIBtn2IconColorKey ||
                                     (colorTheme &&
                                         {
                                             none: basicThemeIconColors[state],

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { PDSTextType, UiColors, TextLabelStyleThemeType, TextLabelColorThemeType } from '../../../common';
+import type { PDSTextType, UiColors } from '../../../common';
 import type { TextCaseTooltipPositionType } from '../../../common/types/systemUI';
 export type TextLabelProps = {
     text: PDSTextType;
@@ -8,9 +8,9 @@ export type TextLabelProps = {
     tooltipPosition?: TextCaseTooltipPositionType;
     tooltipIconColorKey?: UiColors;
     textAlign?: 'left' | 'center' | 'right';
-    styleTheme?: TextLabelStyleThemeType;
+    styleTheme?: 'displayBold' | 'wizardPageTitleBold' | 'headingBold' | 'leadParaBold' | 'leadParaRegular' | 'subTitleBold' | 'subTitleRegular' | 'body1Bold' | 'body1Regular' | 'body2Bold' | 'body2Regular' | 'caption1Bold' | 'caption1Regular' | 'caption2Bold' | 'caption2Regular' | 'form1Regular' | 'form1Bold' | 'form2Regular' | 'form2Bold' | 'blog1Regular';
     colorOverride?: UiColors;
-    colorTheme?: TextLabelColorThemeType;
+    colorTheme?: 'sysTextPrimary' | 'sysTextSecondary' | 'sysTextTertiary' | 'sysTextWhite' | 'sysTextBlack' | 'sysTextError' | 'sysTextWarning' | 'sysTextBrandPrimary' | 'sysTextBrandSeconVariant' | 'usrTextBrandPrimary' | 'usrTextBrandSeconVariant' | 'usrTextBrandOnPrimary';
     singleLineMode?: 'none' | 'use';
     ellipsisMode?: 'none' | 'use';
     lineLimit?: number;

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

@@ -6,7 +6,7 @@ type UploadTextButtonProps = {
     responsiveMode?: 'none' | 'use';
     fontWeight?: 'bold' | 'regular';
     state?: 'normal' | 'disabled';
-    colorTheme?: 'none' | 'red' | 'grey_01' | 'grey2' | 'grey3' | 'white' | 'white2';
+    colorTheme?: 'none' | 'red' | 'grey_01' | 'grey2' | 'white' | 'white2';
     accept?: string;
     multipleMode?: 'none' | 'use';
     onClick?: (e: React.ChangeEvent<HTMLInputElement>) => void;