pds-dev-kit-web 2.1.5 → 2.1.7

package/dist/src/common/types/components.d.ts

@@ -10,17 +10,24 @@ export declare type PDSTabItemOption = {
     isActive: boolean;
     onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
 };
-export declare type DropdownValueOption = {
+export declare type ContextMenuItemValueOption = {
     text?: PDSTextType;
     value: string | number | null | boolean;
     iconName?: FillIconNameKeys | LineIconNameKeys;
     iconFillType?: 'fill' | 'line';
+};
+export declare type DropdownValueOption = ContextMenuItemValueOption & {
     state?: 'normal' | 'disabled';
 };
+export declare type AdminListDropdownValueOption = {
+    text: DropdownValueOption['text'];
+    value: DropdownValueOption['value'];
+};
 export declare type BasicButtonGroupValueOption = {
     iconName: FillIconNameKeys | LineIconNameKeys;
     iconFillType?: 'fill' | 'line';
     state?: 'normal' | 'disabled';
+    iconColorTheme?: 'none' | 'red';
     onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     onMouseDown?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 };

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { PDSValueOption } from '../../../common';
+import type { AdminListDropdownValueOption } from '../../../common';
 import type { TFunctionResult } from 'i18next';
 declare type ColumnWidthType = 'small' | 'medium' | 'large' | 'xlarge';
 declare type Props = {
@@ -23,18 +23,18 @@ declare type Props = {
     column10HeaderText?: TFunctionResult;
     column10Width?: ColumnWidthType;
     dropdownMode?: 'none' | 'dropdown_amount1' | 'dropdown_amount2' | 'dropdown_amount3';
-    dropdown1Value?: PDSValueOption;
-    dropdown2Value?: PDSValueOption;
-    dropdown3Value?: PDSValueOption;
-    dropdown1DefaultText?: PDSValueOption;
-    dropdown2DefaultText?: PDSValueOption;
-    dropdown3DefaultText?: PDSValueOption;
+    dropdown1Value?: AdminListDropdownValueOption;
+    dropdown2Value?: AdminListDropdownValueOption;
+    dropdown3Value?: AdminListDropdownValueOption;
+    dropdown1DefaultText?: AdminListDropdownValueOption;
+    dropdown2DefaultText?: AdminListDropdownValueOption;
+    dropdown3DefaultText?: AdminListDropdownValueOption;
     dropdown1HintText?: TFunctionResult;
     dropdown2HintText?: TFunctionResult;
     dropdown3HintText?: TFunctionResult;
-    dropdown1ValueArray?: PDSValueOption[];
-    dropdown2ValueArray?: PDSValueOption[];
-    dropdown3ValueArray?: PDSValueOption[];
+    dropdown1ValueArray?: AdminListDropdownValueOption[];
+    dropdown2ValueArray?: AdminListDropdownValueOption[];
+    dropdown3ValueArray?: AdminListDropdownValueOption[];
     quickActionBtnMode?: 'none' | 'btn_amount1' | 'btn_amount2' | 'btn_amount3';
     quickActionBtn1Text?: TFunctionResult;
     quickActionBtn2Text?: TFunctionResult;
@@ -49,9 +49,9 @@ declare type Props = {
     scrollVisibleType?: 'moving' | 'hidden' | 'visible';
     headerRowCheckboxName?: string;
     flexibleHideInfoMode?: 'use' | 'none';
-    onChangeDropdown1?: (value: PDSValueOption) => void;
-    onChangeDropdown2?: (value: PDSValueOption) => void;
-    onChangeDropdown3?: (value: PDSValueOption) => void;
+    onChangeDropdown1?: (value: AdminListDropdownValueOption) => void;
+    onChangeDropdown2?: (value: AdminListDropdownValueOption) => void;
+    onChangeDropdown3?: (value: AdminListDropdownValueOption) => void;
     onClickTBtn1?: () => void;
     onClickTBtn2?: () => void;
     onClickTBtn3?: () => void;

package/dist/src/desktop/components/AdminList/BulkActionBar.d.ts

@@ -1,28 +1,28 @@
 /// <reference types="react" />
-import type { PDSValueOption } from '../../../common';
+import type { AdminListDropdownValueOption } from '../../../common/types';
 import type { TFunctionResult } from 'i18next';
 declare type Props = {
     itemCount?: number;
     dropdownMode: 'none' | 'dropdown_amount1' | 'dropdown_amount2' | 'dropdown_amount3';
-    dropdown1Value?: PDSValueOption;
-    dropdown2Value?: PDSValueOption;
-    dropdown3Value?: PDSValueOption;
-    dropdown1DefaultText?: PDSValueOption;
-    dropdown2DefaultText?: PDSValueOption;
-    dropdown3DefaultText?: PDSValueOption;
+    dropdown1Value?: AdminListDropdownValueOption;
+    dropdown2Value?: AdminListDropdownValueOption;
+    dropdown3Value?: AdminListDropdownValueOption;
+    dropdown1DefaultText?: AdminListDropdownValueOption;
+    dropdown2DefaultText?: AdminListDropdownValueOption;
+    dropdown3DefaultText?: AdminListDropdownValueOption;
     dropdown1HintText?: TFunctionResult;
     dropdown2HintText?: TFunctionResult;
     dropdown3HintText?: TFunctionResult;
-    dropdown1ValueArray?: PDSValueOption[];
-    dropdown2ValueArray?: PDSValueOption[];
-    dropdown3ValueArray?: PDSValueOption[];
+    dropdown1ValueArray?: AdminListDropdownValueOption[];
+    dropdown2ValueArray?: AdminListDropdownValueOption[];
+    dropdown3ValueArray?: AdminListDropdownValueOption[];
     tBtnMode?: 'none' | 'tbtn_amount1' | 'tbtn_amount2' | 'tbtn_amount3';
     tBtn1Text?: TFunctionResult;
     tBtn2Text?: TFunctionResult;
     tBtn3Text?: TFunctionResult;
-    onChangeDropdown1?: (value: PDSValueOption) => void;
-    onChangeDropdown2?: (value: PDSValueOption) => void;
-    onChangeDropdown3?: (value: PDSValueOption) => void;
+    onChangeDropdown1?: (value: AdminListDropdownValueOption) => void;
+    onChangeDropdown2?: (value: AdminListDropdownValueOption) => void;
+    onChangeDropdown3?: (value: AdminListDropdownValueOption) => void;
     onClickTBtn1?: () => void;
     onClickTBtn2?: () => void;
     onClickTBtn3?: () => void;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { PDSValueOption } from '../../../common';
+import type { AdminListDropdownValueOption } from '../../../common';
 import type { TFunctionResult } from 'i18next';
 declare type Props = {
     headerBarSize?: 'regular' | 'small';
@@ -8,9 +8,9 @@ declare type Props = {
     totalPage?: number;
     contentText?: TFunctionResult;
     filterBar?: React.ReactNode;
-    dropdownTextArray?: PDSValueOption[];
-    dropdownDefaultValue?: PDSValueOption;
-    onChangeCount?: (option: PDSValueOption) => void;
+    dropdownTextArray?: AdminListDropdownValueOption[];
+    dropdownDefaultValue?: AdminListDropdownValueOption;
+    onChangeCount?: (option: AdminListDropdownValueOption) => void;
     onClickNextButton?: () => void;
     onClickPrevButton?: () => void;
     /** @deprecated v1.5 totalPage를 받아오기 때문에 deprecated 될 예정입니다. */

package/dist/src/desktop/components/AdminListHeader/HeaderBar.d.ts

@@ -1,14 +1,14 @@
 /// <reference types="react" />
-import type { PDSValueOption } from '../../../common';
+import type { AdminListDropdownValueOption } from '../../../common/types';
 import type { TFunctionResult } from 'i18next';
 declare type Props = {
     titleText?: TFunctionResult;
     size?: 'regular' | 'small';
     currentPage?: number;
     totalPage?: number;
-    dropdownTextArray: PDSValueOption[];
-    dropdownDefaultValue?: PDSValueOption;
-    onChangeDropdown?: (option: PDSValueOption) => void;
+    dropdownTextArray: AdminListDropdownValueOption[];
+    dropdownDefaultValue?: AdminListDropdownValueOption;
+    onChangeDropdown?: (option: AdminListDropdownValueOption) => void;
     onClickIBtn1?: () => void;
     onClickIBtn2?: () => void;
 };

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

@@ -39,11 +39,18 @@ var components_1 = require("../../../hybrid/components");
 var styled_components_1 = __importStar(require("styled-components"));
 function BasicButtonGroup(_a) {
     var _b = _a.size, size = _b === void 0 ? 'medium' : _b, valueArray = _a.valueArray, _c = _a.state, state = _c === void 0 ? 'normal' : _c;
+    var getColorKey = function (buttonState, iconColorTheme) {
+        if (state === 'disabled' || buttonState === 'disabled') {
+            return 'ui_cpnt_button_icon_disabled';
+        }
+        if (iconColorTheme === 'red') {
+            return 'ui_cpnt_button_icon_error';
+        }
+        return 'ui_cpnt_button_icon_enabled';
+    };
     return ((0, jsx_runtime_1.jsx)(S_BasicButtonGroup, __assign({ "x-pds-name": "BasicButtonGroup", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: valueArray.map(function (_a, index) {
-            var iconName = _a.iconName, _b = _a.iconFillType, iconFillType = _b === void 0 ? 'line' : _b, _c = _a.state, buttonState = _c === void 0 ? 'normal' : _c, onClick = _a.onClick, onMouseDown = _a.onMouseDown;
-            return ((0, jsx_runtime_1.jsx)(S_BasicButton, __assign({ size: size, onClick: function (e) { return onClick && onClick(e); }, onMouseDown: function (e) { return onMouseDown && onMouseDown(e); }, disabled: state === 'disabled' || buttonState === 'disabled' }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'small' ? 20 : 24, iconFillType: iconFillType, colorKey: state === 'disabled' || buttonState === 'disabled'
-                        ? 'ui_cpnt_button_icon_disabled'
-                        : 'ui_cpnt_button_icon_enabled' }, void 0) }), iconName + index));
+            var iconName = _a.iconName, _b = _a.iconFillType, iconFillType = _b === void 0 ? 'line' : _b, _c = _a.state, buttonState = _c === void 0 ? 'normal' : _c, _d = _a.iconColorTheme, iconColorTheme = _d === void 0 ? 'none' : _d, onClick = _a.onClick, onMouseDown = _a.onMouseDown;
+            return ((0, jsx_runtime_1.jsx)(S_BasicButton, __assign({ size: size, onClick: function (e) { return onClick && onClick(e); }, onMouseDown: function (e) { return onMouseDown && onMouseDown(e); }, disabled: state === 'disabled' || buttonState === 'disabled' }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'small' ? 20 : 24, iconFillType: iconFillType, colorKey: getColorKey(buttonState, iconColorTheme) }, void 0) }), iconName + index));
         }) }), void 0));
 }
 var S_BasicButtonGroup = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: max-content;\n\n  & > button:not(:last-child) {\n    margin-right: ", ";\n  }\n"], ["\n  width: max-content;\n\n  & > button:not(:last-child) {\n    margin-right: ", ";\n  }\n"])), function (_a) {

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

@@ -1,13 +1,13 @@
 /// <reference types="react" />
-import type { PDSTextType, PDSValueOption } from '../../../common';
-import type { DropdownValueOption } from '../../../common/types';
+import type { PDSTextType } from '../../../common';
+import type { ContextMenuItemValueOption } from '../../../common/types';
 export declare type ContextMenuItemProps = {
-    option?: PDSValueOption | DropdownValueOption;
+    option?: ContextMenuItemValueOption;
     size?: 'large' | 'medium' | 'small';
     isSelected?: boolean;
     state?: 'normal' | 'disabled';
     displayType?: 'text_only' | 'icon_only' | 'icon_text';
-    onClick?: (value: PDSValueOption | DropdownValueOption | string | number | boolean) => void;
+    onClick?: (value: ContextMenuItemValueOption | string | number | boolean) => void;
     /** @deprecated option 필드를 대신 사용하세요. */
     text?: PDSTextType;
     /** @deprecated option 필드를 대신 사용하세요. */

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

@@ -39,7 +39,7 @@ var components_1 = require("../../../hybrid/components");
 var styled_components_1 = __importStar(require("styled-components"));
 var TextLabel_1 = require("../TextLabel");
 function ContextMenuItem(_a) {
-    var option = _a.option, _b = _a.size, size = _b === void 0 ? 'small' : _b, _c = _a.isSelected, isSelected = _c === void 0 ? false : _c, _d = _a.state, state = _d === void 0 ? 'normal' : _d, displayType = _a.displayType, onClick = _a.onClick, text = _a.text, value = _a.value;
+    var option = _a.option, _b = _a.size, size = _b === void 0 ? 'small' : _b, _c = _a.isSelected, isSelected = _c === void 0 ? false : _c, _d = _a.state, state = _d === void 0 ? 'normal' : _d, _e = _a.displayType, displayType = _e === void 0 ? 'text_only' : _e, onClick = _a.onClick, text = _a.text, value = _a.value;
     var handleClick = function () {
         if (state === 'disabled') {
             return;

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

@@ -4,7 +4,7 @@ export declare type IconButtonProps = {
     tooltipText?: PDSTextType;
     tooltipPosition?: 'left_top' | 'left_bottom' | 'center_top' | 'center_bottom' | 'right_top' | 'right_bottom';
     fillType?: 'fill' | 'line';
-    shapeType?: 'circular' | 'rectangle';
+    shapeType?: 'circular' | 'rectangle' | 'round';
     baseSize?: 'xxlarge' | 'large' | 'medium' | 'small' | 'xsmall';
     baseColorKey?: UiColors;
     borderColorKey?: UiColors;

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

@@ -143,20 +143,25 @@ var large = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 =
 var medium = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  height: 40px;\n  width: 40px;\n"], ["\n  height: 40px;\n  width: 40px;\n"])));
 var small = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  height: 32px;\n  width: 32px;\n"], ["\n  height: 32px;\n  width: 32px;\n"])));
 var xsmall = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  height: 24px;\n  width: 24px;\n"], ["\n  height: 24px;\n  width: 24px;\n"])));
-var line1ColorTheme = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  border-color: ", ";\n"], ["\n  border-color: ", ";\n"])), function (_a) {
+var roundStyle = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  border-radius: ", ";\n"], ["\n  border-radius: ", ";\n"])), function (_a) {
+    var baseSize = _a.baseSize;
+    return baseSize &&
+        { xxlarge: '24px', large: '14px', medium: '12px', small: '10px', xsmall: '8px' }[baseSize];
+});
+var line1ColorTheme = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  border-color: ", ";\n"], ["\n  border-color: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_button_line_border_error;
 });
-var line2ColorTheme = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  border-color: ", ";\n"], ["\n  border-color: ", ";\n"])), function (_a) {
+var line2ColorTheme = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  border-color: ", ";\n"], ["\n  border-color: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_button_line_border_primary;
 });
-var iconButtonStyle = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  justify-content: center;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  justify-content: center;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n"])), function (_a) {
+var iconButtonStyle = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  justify-content: center;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  justify-content: center;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n"])), function (_a) {
     var state = _a.state;
     return (state === 'normal' ? 'pointer' : 'default');
 }, function (_a) {
     var shapeType = _a.shapeType;
-    return shapeType && { circular: 'border-radius: 50%', rectangle: '' }[shapeType];
+    return shapeType && { circular: 'border-radius: 50%', rectangle: '', round: roundStyle }[shapeType];
 }, function (_a) {
     var theme = _a.theme, shadow = _a.shadow;
     return shadow === 'visible' && "box-shadow: " + theme.boxShadow.elevation2;
@@ -178,8 +183,8 @@ var iconButtonStyle = (0, styled_components_1.css)(templateObject_12 || (templat
             xsmall: xsmall
         }[baseSize];
 });
-var S_IconButton = styled_components_1.default.button(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), iconButtonStyle);
-var tooltipPositionSpacing = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
+var S_IconButton = styled_components_1.default.button(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), iconButtonStyle);
+var tooltipPositionSpacing = (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
     var baseSize = _a.baseSize;
     return baseSize &&
         {
@@ -190,13 +195,13 @@ var tooltipPositionSpacing = (0, styled_components_1.css)(templateObject_14 || (
             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 tooltipLeftTop = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  bottom: ", ";\n  right: 0;\n"], ["\n  bottom: ", ";\n  right: 0;\n"])), tooltipPositionSpacing);
+var tooltipLeftBottom = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  right: 0;\n  top: ", ";\n"], ["\n  right: 0;\n  top: ", ";\n"])), tooltipPositionSpacing);
+var tooltipCenterTop = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  bottom: ", ";\n"], ["\n  bottom: ", ";\n"])), tooltipPositionSpacing);
+var tooltipCenterBottom = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  top: ", ";\n"], ["\n  top: ", ";\n"])), tooltipPositionSpacing);
+var tooltipRightTop = (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  bottom: ", ";\n  left: 0;\n"], ["\n  bottom: ", ";\n  left: 0;\n"])), tooltipPositionSpacing);
+var tooltipRightBottom = (0, styled_components_1.css)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  left: 0;\n  top: ", ";\n"], ["\n  left: 0;\n  top: ", ";\n"])), tooltipPositionSpacing);
+var S_TooltipWrapper = styled_components_1.default.div(templateObject_22 || (templateObject_22 = __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) {
@@ -221,4 +226,4 @@ var S_TooltipWrapper = styled_components_1.default.div(templateObject_21 || (tem
         }[tooltipPosition];
 });
 exports.default = IconButton;
-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, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22;

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

@@ -4,6 +4,7 @@ declare type SegmentedButtonGroupValueOption = Pick<PDSValueOption, 'value'> & {
     iconName: FillIconNameKeys | LineIconNameKeys;
     iconFillType?: 'fill' | 'line';
     state?: 'normal' | 'disabled';
+    iconColorTheme?: 'none' | 'red';
 };
 export declare type SegmentedButtonGroupProps = {
     size?: 'large' | 'medium' | 'small';

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

@@ -55,18 +55,21 @@ function SegmentedButtonGroup(_a) {
         }
         return value === currentButtonValue;
     };
-    var getIconColorKey = function (isSelected, isDisabled) {
+    var getIconColorKey = function (isSelected, isDisabled, iconColorTheme) {
         if (isDisabled) {
             return 'ui_cpnt_button_icon_disabled';
         }
         if (isSelected) {
             return 'ui_cpnt_button_icon_white';
         }
+        if (iconColorTheme === 'red') {
+            return 'ui_cpnt_button_icon_error';
+        }
         return 'ui_cpnt_button_icon_enabled';
     };
     return ((0, jsx_runtime_1.jsx)(S_SegmentedButtonGroupGroups, __assign({ "x-pds-name": "SegmentedButtonGroup", "x-pds-element-type": "component", "x-pds-device-type": "desktop", selectedType: selectedType }, { children: valueArray.map(function (_a) {
-            var currentButtonValue = _a.value, iconName = _a.iconName, _b = _a.iconFillType, iconFillType = _b === void 0 ? 'line' : _b, _c = _a.state, buttonState = _c === void 0 ? 'normal' : _c;
-            return ((0, jsx_runtime_1.jsx)(S_BasicButton, __assign({ size: size, onClick: function () { return handleClick(currentButtonValue); }, onMouseDown: function () { return handleMouseDown(currentButtonValue); }, disabled: state === 'disabled' || buttonState === 'disabled', selectedType: selectedType, isSelected: checkSelection(currentButtonValue) }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'small' ? 20 : 24, iconFillType: iconFillType, colorKey: getIconColorKey(checkSelection(currentButtonValue), state === 'disabled' || buttonState === 'disabled') }, void 0) }), String(currentButtonValue)));
+            var currentButtonValue = _a.value, iconName = _a.iconName, _b = _a.iconFillType, iconFillType = _b === void 0 ? 'line' : _b, _c = _a.state, buttonState = _c === void 0 ? 'normal' : _c, _d = _a.iconColorTheme, iconColorTheme = _d === void 0 ? 'none' : _d;
+            return ((0, jsx_runtime_1.jsx)(S_BasicButton, __assign({ size: size, onClick: function () { return handleClick(currentButtonValue); }, onMouseDown: function () { return handleMouseDown(currentButtonValue); }, disabled: state === 'disabled' || buttonState === 'disabled', selectedType: selectedType, isSelected: checkSelection(currentButtonValue) }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'small' ? 20 : 24, iconFillType: iconFillType, colorKey: getIconColorKey(checkSelection(currentButtonValue), state === 'disabled' || buttonState === 'disabled', iconColorTheme) }, void 0) }), String(currentButtonValue)));
         }) }), void 0));
 }
 var S_SegmentedButtonGroupGroups = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: max-content;\n\n  & > button:not(:last-child) {\n    margin-right: ", ";\n  }\n"], ["\n  width: max-content;\n\n  & > button:not(:last-child) {\n    margin-right: ", ";\n  }\n"])), function (_a) {

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

@@ -137,7 +137,7 @@ function Slider(_a, ref) {
         }
         inputRef.current = node;
     };
-    return ((0, jsx_runtime_1.jsxs)(S_SliderBox, __assign({ "x-pds-name": "Slider", "x-pds-element-type": "component", "x-pds-device-type": "mobile" }, { children: [prefixText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: prefixText, styleTheme: "caption2Bold", colorTheme: state === 'normal' ? 'sysTextSecondary' : 'sysTextTertiary', singleLineMode: "use", textAlign: "right" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { spacingType: "width", size: "spacing_b" }, void 0)] }, void 0)), (0, jsx_runtime_1.jsx)(S_SliderWrapper, __assign({ customWidth: customWidth, responsiveMode: responsiveMode }, { children: (0, jsx_runtime_1.jsxs)(S_Slider, __assign({ customWidth: customWidth, isDisabled: state === 'disabled', responsiveMode: responsiveMode, thumbPercentage: defaultThumbPercentage, onMouseDown: handleMouseDown }, { children: [(0, jsx_runtime_1.jsx)(S_Track, { ref: trackRef, thumbPercentage: defaultThumbPercentage, isDisabled: state === 'disabled' }, void 0), (0, jsx_runtime_1.jsxs)(S_Thumb, __assign({ ref: thumbRef, thumbPercentage: defaultThumbPercentage, isDragging: isDragging, isDisabled: state === 'disabled' }, { children: [(0, jsx_runtime_1.jsx)(S_Range, { ref: handleRangeRef, type: "range", name: name, min: min, max: max, step: step, defaultValue: defaultValue, onInput: handleChange, onClick: handleClick }, void 0), tooltipText && isTooltipVisible && ((0, jsx_runtime_1.jsx)(S_Tooltip, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: tooltipText, styleTheme: "caption2Regular", colorOverride: "ui_cpnt_textlabel_button_tooltip", singleLineMode: "use" }, void 0) }, void 0))] }), void 0)] }), void 0) }), void 0), suffixText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { spacingType: "width", size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: suffixText, styleTheme: "caption2Bold", colorTheme: state === 'normal' ? 'sysTextSecondary' : 'sysTextTertiary', singleLineMode: "use" }, void 0)] }, void 0))] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)(S_SliderBox, __assign({ "x-pds-name": "Slider", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [prefixText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: prefixText, styleTheme: "caption2Bold", colorTheme: state === 'normal' ? 'sysTextSecondary' : 'sysTextTertiary', singleLineMode: "use", textAlign: "right" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { spacingType: "width", size: "spacing_b" }, void 0)] }, void 0)), (0, jsx_runtime_1.jsx)(S_SliderWrapper, __assign({ customWidth: customWidth, responsiveMode: responsiveMode }, { children: (0, jsx_runtime_1.jsxs)(S_Slider, __assign({ customWidth: customWidth, isDisabled: state === 'disabled', responsiveMode: responsiveMode, thumbPercentage: defaultThumbPercentage, onMouseDown: handleMouseDown }, { children: [(0, jsx_runtime_1.jsx)(S_Track, { ref: trackRef, thumbPercentage: defaultThumbPercentage, isDisabled: state === 'disabled' }, void 0), (0, jsx_runtime_1.jsxs)(S_Thumb, __assign({ ref: thumbRef, thumbPercentage: defaultThumbPercentage, isDragging: isDragging, isDisabled: state === 'disabled' }, { children: [(0, jsx_runtime_1.jsx)(S_Range, { ref: handleRangeRef, type: "range", name: name, min: min, max: max, step: step, defaultValue: defaultValue, onInput: handleChange, onClick: handleClick }, void 0), tooltipText && isTooltipVisible && ((0, jsx_runtime_1.jsx)(S_Tooltip, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: tooltipText, styleTheme: "caption2Regular", colorOverride: "ui_cpnt_textlabel_button_tooltip", singleLineMode: "use" }, void 0) }, void 0))] }), void 0)] }), void 0) }), void 0), suffixText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { spacingType: "width", size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: suffixText, styleTheme: "caption2Bold", colorTheme: state === 'normal' ? 'sysTextSecondary' : 'sysTextTertiary', singleLineMode: "use" }, void 0)] }, void 0))] }), void 0));
 }
 var S_SliderBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n"], ["\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n"])));
 var S_SliderWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  position: relative;\n  width: ", ";\n"], ["\n  display: flex;\n  position: relative;\n  width: ", ";\n"])), function (_a) {

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

@@ -34,6 +34,7 @@ export declare type TextFieldProps = {
     autoComplete?: string;
     numberStepperMode?: 'none' | 'use';
     numberStep?: number;
+    deleteBtnMode?: 'none' | 'use';
     onBlur?: (e: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement>) => void;
     onChange?: (e: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => void;
     onClickIBtn1?: () => void;
@@ -43,5 +44,5 @@ export declare type TextFieldProps = {
     onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement> | React.KeyboardEvent<HTMLTextAreaElement>) => void;
     onTarget?: () => void;
 };
-declare function TextField({ name, hintText, defaultText, textAlign, prefixText, suffixText, validation, validationPoint, preventBlankMode, enterSubmitMode, size, responsiveMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, state, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, colorTheme, max, maxLength, min, customWidth, autoComplete, numberStepperMode, numberStep, 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, state, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, colorTheme, max, maxLength, min, customWidth, autoComplete, numberStepperMode, numberStep, deleteBtnMode, onBlur, onChange, onClickIBtn1, onClickIBtn2, onFocus, onKeyUp, onKeyDown, onTarget }: TextFieldProps): JSX.Element;
 export default TextField;

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

@@ -46,7 +46,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, _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, _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, 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, _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, _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.deleteBtnMode, deleteBtnMode = _u === void 0 ? 'use' : _u, 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',
@@ -62,9 +62,9 @@ function TextField(_a) {
         read_only: 'ui_cpnt_textfield_icon_colortheme_transparent_readonly',
         disabled: 'ui_cpnt_textfield_icon_colortheme_transparent_disabled'
     };
-    var _u = (0, react_1.useState)(false), isFocused = _u[0], setIsFocused = _u[1];
-    var _v = (0, react_hook_form_1.useFormContext)(), register = _v.register, trigger = _v.trigger, errors = _v.formState.errors;
-    var _w = register(name, validation), validateOnChange = _w.onChange, validateOnBlur = _w.onBlur;
+    var _v = (0, react_1.useState)(false), isFocused = _v[0], setIsFocused = _v[1];
+    var _w = (0, react_hook_form_1.useFormContext)(), register = _w.register, trigger = _w.trigger, errors = _w.formState.errors;
+    var _x = register(name, validation), validateOnChange = _x.onChange, validateOnBlur = _x.onBlur;
     var isError = Object.keys(errors).some(function (error) { return error === name; });
     var handleClickIBtn1 = function () {
         if (onClickIBtn1) {
@@ -136,7 +136,7 @@ function TextField(_a) {
                     break;
                 }
             }
-            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" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0)] }, void 0)), (0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, textAlign: inputType === 'number' && numberStepperMode === 'use' ? 'right' : textAlign, validation: validation, preventBlankMode: preventBlankMode, enterSubmitMode: enterSubmitMode, textLineType: "single", inputType: inputType, state: state, colorTheme: colorTheme, min: min, max: max, maxLength: maxLength, textSize: "form2", textWeight: "normal", deleteIconMode: "use", deleteIconSize: size === 'large' || size === 'rlarge' ? 20 : 16, deleteIconColor: deleteIconColor, isFocused: isFocused, autoComplete: autoComplete, stepperMode: inputType === 'number' && numberStepperMode === 'use' ? 'use' : 'none', innerSpinButtonSize: size === 'small' ? 12 : 16, step: numberStep, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown }, void 0), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [suffixText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: suffixText, styleTheme: "caption1Bold", colorTheme: "sysTextTertiary", textAlign: "right", singleLineMode: "use" }, void 0), size === 'large' ? ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0)) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }, void 0))] }, void 0)), 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: colorTheme &&
+            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" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0)] }, void 0)), (0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, textAlign: inputType === 'number' && numberStepperMode === 'use' ? 'right' : textAlign, validation: validation, preventBlankMode: preventBlankMode, enterSubmitMode: enterSubmitMode, textLineType: "single", inputType: inputType, state: state, colorTheme: colorTheme, min: min, max: max, maxLength: maxLength, textSize: "form2", textWeight: "normal", deleteIconMode: deleteBtnMode, deleteIconSize: size === 'large' || size === 'rlarge' ? 20 : 16, deleteIconColor: deleteIconColor, isFocused: isFocused, autoComplete: autoComplete, stepperMode: inputType === 'number' && numberStepperMode === 'use' ? 'use' : 'none', innerSpinButtonSize: size === 'small' ? 12 : 16, step: numberStep, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown }, void 0), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [suffixText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: suffixText, styleTheme: "caption1Bold", colorTheme: "sysTextTertiary", textAlign: "right", singleLineMode: "use" }, void 0), size === 'large' ? ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0)) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }, void 0))] }, void 0)), 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: colorTheme &&
                                     {
                                         none: basicThemeIconColors[state],
                                         dark: darkThemeIconColors[state],

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

@@ -395,31 +395,19 @@ var S_AfterTextBox = styled_components_1.default.div(templateObject_41 || (templ
     }
 });
 var S_IconWrapper = styled_components_1.default.div(templateObject_42 || (templateObject_42 = __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_43 || (templateObject_43 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  max-width: 320px;\n  overflow-wrap: break-word;\n  padding: ", ";\n  position: absolute;\n  text-align: left;\n  white-space: pre-wrap;\n  width: max-content;\n  word-break: keep-all;\n  z-index: 400;\n\n  ", ";\n\n  ", ";\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  max-width: 320px;\n  overflow-wrap: break-word;\n  padding: ", ";\n  position: absolute;\n  text-align: left;\n  white-space: pre-wrap;\n  width: max-content;\n  word-break: keep-all;\n  z-index: 400;\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
+var S_TooltipWrapper = styled_components_1.default.div(templateObject_43 || (templateObject_43 = __makeTemplateObject(["\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  max-width: 320px;\n  overflow-wrap: break-word;\n  padding: ", ";\n  position: absolute;\n  text-align: left;\n  white-space: pre-wrap;\n  width: max-content;\n  word-break: keep-all;\n  z-index: 400;\n  ", "\n\n  ", ";\n\n  ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  display: flex;\n  justify-content: center;\n  max-width: 320px;\n  overflow-wrap: break-word;\n  padding: ", ";\n  position: absolute;\n  text-align: left;\n  white-space: pre-wrap;\n  width: max-content;\n  word-break: keep-all;\n  z-index: 400;\n  ", "\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.ui_cpnt_contextmenu_base;
+    return theme.ui_cpnt_button_tooltip_base;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.ui_cpnt_contextmenu_border;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.boxShadow.elevation2;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_textlabel_sys_secondary;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.desktopFontSize.caption2;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.fontWeight.normal;
+    return theme.spacing.spacingA;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.desktopLineHeight.caption2;
+    return theme.ui_cpnt_textlabel_button_tooltip;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingC;
-}, function (_a) {
+    return theme.spacing.spacingA + " " + theme.spacing.spacingB;
+}, caption2Regular, function (_a) {
     var isTooltipOpen = _a.isTooltipOpen;
     return !isTooltipOpen && 'display: none';
 }, function (_a) {

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

@@ -2,7 +2,7 @@
 import type { FillIconNameKeys, LineIconNameKeys, PDSTextType, UiColors } from '../../../common';
 export declare type UploadIconButtonProps = {
     fillType?: 'fill' | 'line';
-    shapeType?: 'circular' | 'rectangle';
+    shapeType?: 'circular' | 'rectangle' | 'round';
     baseSize?: 'xxlarge' | 'large' | 'medium' | 'small' | 'xsmall';
     baseColorKey?: UiColors;
     borderColorKey?: UiColors;

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

@@ -137,15 +137,20 @@ var large = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 =
 var medium = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  height: 40px;\n  width: 40px;\n"], ["\n  height: 40px;\n  width: 40px;\n"])));
 var small = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  height: 32px;\n  width: 32px;\n"], ["\n  height: 32px;\n  width: 32px;\n"])));
 var xsmall = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  height: 24px;\n  width: 24px;\n"], ["\n  height: 24px;\n  width: 24px;\n"])));
-var S_UploadIconButton = styled_components_1.default.label(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  border-radius: ", ";\n  box-shadow: ", ";\n  box-sizing: border-box;\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n\n  ", ";\n\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  border-radius: ", ";\n  box-shadow: ", ";\n  box-sizing: border-box;\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
-    var shapeType = _a.shapeType;
-    return shapeType === 'circular' && '50%';
-}, function (_a) {
+var roundStyle = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  border-radius: ", ";\n"], ["\n  border-radius: ", ";\n"])), function (_a) {
+    var baseSize = _a.baseSize;
+    return baseSize &&
+        { xxlarge: '24px', large: '14px', medium: '12px', small: '10px', xsmall: '8px' }[baseSize];
+});
+var S_UploadIconButton = styled_components_1.default.label(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n  ", ";\n\n  ", ";\n\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n  ", ";\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
     var theme = _a.theme, shadow = _a.shadow;
     return shadow === 'visible' && theme.boxShadow.elevation2;
 }, function (_a) {
     var isDisabled = _a.isDisabled;
     return (isDisabled ? 'default' : 'pointer');
+}, function (_a) {
+    var shapeType = _a.shapeType;
+    return shapeType && { circular: 'border-radius: 50%', rectangle: '', round: roundStyle }[shapeType];
 }, function (_a) {
     var fillType = _a.fillType;
     return fillType &&
@@ -164,7 +169,7 @@ var S_UploadIconButton = styled_components_1.default.label(templateObject_12 ||
             xsmall: xsmall
         }[baseSize];
 });
-var tooltipPositionSpacing = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
+var tooltipPositionSpacing = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
     var baseSize = _a.baseSize;
     return baseSize &&
         {
@@ -175,13 +180,13 @@ var tooltipPositionSpacing = (0, styled_components_1.css)(templateObject_13 || (
             xsmall: constants_1.TOOLTIP_POSITION_SPACING.xsmall
         }[baseSize];
 });
-var tooltipLeftTop = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  bottom: ", ";\n  right: 0;\n"], ["\n  bottom: ", ";\n  right: 0;\n"])), tooltipPositionSpacing);
-var tooltipLeftBottom = (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  right: 0;\n  top: ", ";\n"], ["\n  right: 0;\n  top: ", ";\n"])), tooltipPositionSpacing);
-var tooltipCenterTop = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  bottom: ", ";\n"], ["\n  bottom: ", ";\n"])), tooltipPositionSpacing);
-var tooltipCenterBottom = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  top: ", ";\n"], ["\n  top: ", ";\n"])), tooltipPositionSpacing);
-var tooltipRightTop = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  bottom: ", ";\n  left: 0;\n"], ["\n  bottom: ", ";\n  left: 0;\n"])), tooltipPositionSpacing);
-var tooltipRightBottom = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  left: 0;\n  top: ", ";\n"], ["\n  left: 0;\n  top: ", ";\n"])), tooltipPositionSpacing);
-var S_TooltipWrapper = styled_components_1.default.div(templateObject_20 || (templateObject_20 = __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 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) {
@@ -206,4 +211,4 @@ var S_TooltipWrapper = styled_components_1.default.div(templateObject_20 || (tem
         }[tooltipPosition];
 });
 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;
+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;

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

@@ -39,11 +39,18 @@ var components_1 = require("../../../hybrid/components");
 var styled_components_1 = __importStar(require("styled-components"));
 function BasicButtonGroup(_a) {
     var _b = _a.size, size = _b === void 0 ? 'medium' : _b, valueArray = _a.valueArray, _c = _a.state, state = _c === void 0 ? 'normal' : _c;
+    var getColorKey = function (buttonState, iconColorTheme) {
+        if (state === 'disabled' || buttonState === 'disabled') {
+            return 'ui_cpnt_button_icon_disabled';
+        }
+        if (iconColorTheme === 'red') {
+            return 'ui_cpnt_button_icon_error';
+        }
+        return 'ui_cpnt_button_icon_enabled';
+    };
     return ((0, jsx_runtime_1.jsx)(S_BasicButtonGroup, __assign({ "x-pds-name": "BasicButtonGroup", "x-pds-element-type": "component", "x-pds-device-type": "mobile" }, { children: valueArray.map(function (_a, index) {
-            var iconName = _a.iconName, _b = _a.iconFillType, iconFillType = _b === void 0 ? 'line' : _b, _c = _a.state, buttonState = _c === void 0 ? 'normal' : _c, onClick = _a.onClick, onMouseDown = _a.onMouseDown;
-            return ((0, jsx_runtime_1.jsx)(S_BasicButton, __assign({ size: size, onClick: function (e) { return onClick && onClick(e); }, onMouseDown: function (e) { return onMouseDown && onMouseDown(e); }, disabled: state === 'disabled' || buttonState === 'disabled' }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'small' ? 20 : 24, iconFillType: iconFillType, colorKey: state === 'disabled' || buttonState === 'disabled'
-                        ? 'ui_cpnt_button_icon_disabled'
-                        : 'ui_cpnt_button_icon_enabled' }, void 0) }), iconName + index));
+            var iconName = _a.iconName, _b = _a.iconFillType, iconFillType = _b === void 0 ? 'line' : _b, _c = _a.state, buttonState = _c === void 0 ? 'normal' : _c, _d = _a.iconColorTheme, iconColorTheme = _d === void 0 ? 'none' : _d, onClick = _a.onClick, onMouseDown = _a.onMouseDown;
+            return ((0, jsx_runtime_1.jsx)(S_BasicButton, __assign({ size: size, onClick: function (e) { return onClick && onClick(e); }, onMouseDown: function (e) { return onMouseDown && onMouseDown(e); }, disabled: state === 'disabled' || buttonState === 'disabled' }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'small' ? 20 : 24, iconFillType: iconFillType, colorKey: getColorKey(buttonState, iconColorTheme) }, void 0) }), iconName + index));
         }) }), void 0));
 }
 var S_BasicButtonGroup = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: max-content;\n\n  & > button:not(:last-child) {\n    margin-right: ", ";\n  }\n"], ["\n  width: max-content;\n\n  & > button:not(:last-child) {\n    margin-right: ", ";\n  }\n"])), function (_a) {

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

@@ -1,13 +1,13 @@
 /// <reference types="react" />
-import type { PDSTextType, PDSValueOption } from '../../../common';
-import type { DropdownValueOption } from '../../../common/types';
+import type { PDSTextType } from '../../../common';
+import type { ContextMenuItemValueOption } from '../../../common/types';
 export declare type ContextMenuItemProps = {
-    option?: PDSValueOption | DropdownValueOption;
+    option?: ContextMenuItemValueOption;
     size?: 'large' | 'medium' | 'small';
     isSelected?: boolean;
     state?: 'normal' | 'disabled';
     displayType?: 'text_only' | 'icon_only' | 'icon_text';
-    onClick?: (value: PDSValueOption | DropdownValueOption | string | number | boolean) => void;
+    onClick?: (value: ContextMenuItemValueOption | string | number | boolean) => void;
     /** @deprecated option 필드를 대신 사용하세요. */
     text?: PDSTextType;
     /** @deprecated option 필드를 대신 사용하세요. */