pds-dev-kit-web-test 2.5.198 → 2.5.200

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

@@ -118,8 +118,10 @@ declare const colorSet: {
         darkgrey20: string;
         grey300: string;
         darkgrey300: string;
+        yellow500: string;
+        darkyellow500: string;
     };
-    readonly PaletteColor_Dark: {
+    readonly PaletteColor_light: {
         sys_container_background_01: string;
         sys_container_background_02: string;
         sys_container_background_03: string;
@@ -480,8 +482,13 @@ declare const colorSet: {
         sys_cpnt_sheet_base_15: string;
         sys_cpnt_sheet_base_16: string;
         sys_cpnt_sheet_base_17: string;
+        sys_component_base_47: string;
+        sys_cpnt_editor_undefined: string;
+        sys_cpnt_slider_track_active_undefined: string;
+        sys_cpnt_slider_thumb_normal_undefined: string;
+        sys_cpnt_editor_buttongroup_undefined: string;
     };
-    readonly PaletteColor_light: {
+    readonly PaletteColor_Dark: {
         sys_container_background_01: string;
         sys_container_background_02: string;
         sys_container_background_03: string;
@@ -842,6 +849,11 @@ declare const colorSet: {
         sys_cpnt_sheet_base_15: string;
         sys_cpnt_sheet_base_16: string;
         sys_cpnt_sheet_base_17: string;
+        sys_component_base_47: string;
+        sys_cpnt_editor_undefined: string;
+        sys_cpnt_slider_track_active_undefined: string;
+        sys_cpnt_slider_thumb_normal_undefined: string;
+        sys_cpnt_editor_buttongroup_undefined: string;
     };
     readonly UIColor: {
         ui_cpnt_button_fill_base_primary: string;
@@ -1711,6 +1723,17 @@ declare const colorSet: {
         ui_126: string;
         ui_127: string;
         ui_128: string;
+        ui_cpnt_sheet_base_27: string;
+        ui_cpnt_editor_colorpicker_undefined: string;
+        ui_cpnt_slider_track_active_undefined: string;
+        ui_cpnt_slider_thumb_normal_undefined: string;
+        ui_cpnt_editor_buttongroup_undefined: string;
+        ui_cpnt_editor_thumbpreview_undefined: string;
+        ui_cpnt_dropdown_text_darktheme_hinttext: string;
+        ui_cpnt_select_dropdown_border_error: string;
+        ui_cpnt_select_dropdown_text_error: string;
+        ui_cpnt_select_dropdown_text_darktheme_error: string;
+        ui_cpnt_select_dropdown_border_darktheme_error: string;
     };
 };
 export default colorSet;

package/dist/src/common/styles/colorSet/index.js

@@ -5,13 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 /* eslint-disable import/order */
 var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
-var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
 var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
+var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
 var UIColor_json_1 = __importDefault(require("./UIColor.json"));
 var colorSet = {
     SemanticColor: SemanticColor_json_1.default,
-    PaletteColor_Dark: PaletteColor_Dark_json_1.default,
     PaletteColor_light: PaletteColor_light_json_1.default,
+    PaletteColor_Dark: PaletteColor_Dark_json_1.default,
     UIColor: UIColor_json_1.default
 };
 exports.default = colorSet;

package/dist/src/common/styles/colorSet/ui-type.d.ts

@@ -866,4 +866,15 @@ export interface UITheme {
     ui_126: string;
     ui_127: string;
     ui_128: string;
+    ui_cpnt_sheet_base_27: string;
+    ui_cpnt_editor_colorpicker_undefined: string;
+    ui_cpnt_slider_track_active_undefined: string;
+    ui_cpnt_slider_thumb_normal_undefined: string;
+    ui_cpnt_editor_buttongroup_undefined: string;
+    ui_cpnt_editor_thumbpreview_undefined: string;
+    ui_cpnt_dropdown_text_darktheme_hinttext: string;
+    ui_cpnt_select_dropdown_border_error: string;
+    ui_cpnt_select_dropdown_text_error: string;
+    ui_cpnt_select_dropdown_text_darktheme_error: string;
+    ui_cpnt_select_dropdown_border_darktheme_error: string;
 }

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

@@ -1,6 +1,7 @@
 import type { PDSIconType } from './icon';
 import type { IconCaseTooltipPositionType } from './systemUI';
 import type { PDSTextType } from './text';
+import type { UiColors } from './uiColors';
 import type { ForwardedRef } from 'react';
 export type PDSValueOption = {
     text: PDSTextType;
@@ -10,6 +11,8 @@ export type PDSTabItemOption = {
     title: PDSTextType;
     isActive: boolean;
     onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    disabled?: boolean;
+    tooltipText?: PDSTextType;
 };
 export type ContextMenuItemValueOption = {
     text?: PDSTextType;
@@ -38,6 +41,7 @@ export type BasicButtonGroupValueOption = {
     tooltipText?: PDSTextType;
     tooltipPosition?: IconCaseTooltipPositionType;
     iconColorTheme?: 'none' | 'red';
+    backgroundColorTheme?: UiColors;
     onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     onMouseDown?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 };
@@ -46,6 +50,7 @@ export type SegmentedButtonGroupValueOption = Pick<PDSValueOption, 'value'> & {
     iconFillType?: 'fill' | 'line';
     state?: 'normal' | 'disabled';
     iconColorTheme?: 'none' | 'red';
+    backgroundColorTheme?: UiColors;
     tooltipText?: PDSTextType;
     tooltipPosition?: IconCaseTooltipPositionType;
 };

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

@@ -1,3 +1,9 @@
 export interface IFormValues {
     [key: string]: string;
 }
+/**
+ * 중첩된 객체 구조에서 점(.)으로 구분된 경로를 통해 에러 객체를 조회합니다
+ */
+export declare const getErrorByName: (errors: {
+    [x: string]: any;
+}, name: string) => any;

package/dist/src/common/types/form.js

@@ -1,2 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.getErrorByName = void 0;
+/**
+ * 중첩된 객체 구조에서 점(.)으로 구분된 경로를 통해 에러 객체를 조회합니다
+ */
+var getErrorByName = function (errors, name) {
+    return name.split('.').reduce(function (errors, property) { return errors && errors[property]; }, errors);
+};
+exports.getErrorByName = getErrorByName;

package/dist/src/desktop/common/components/TextFieldBase/TextFieldBase.d.ts

@@ -11,11 +11,12 @@ export type TextFieldBaseProps = {
     };
     preventBlankMode?: 'none' | 'trim' | 'all';
     enterSubmitMode?: 'none' | 'use';
-    textLineType: 'single' | 'multi' | 'auto';
+    textLineType?: 'single' | 'multi' | 'auto';
     multiRows?: number;
     autoMinRows?: number;
     autoMaxRows?: number;
     inputType?: string;
+    inputMode?: string;
     state?: 'normal' | 'read_only' | 'disabled';
     colorTheme?: 'none' | 'dark' | 'transparent';
     min?: number;
@@ -46,5 +47,5 @@ export type TextFieldBaseProps = {
     inputRef?: any;
     [x: string]: any;
 } & Record<string, any>;
-declare function TextFieldBase({ name, hintText, defaultText, textAlign, validation, preventBlankMode, enterSubmitMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, state, colorTheme, min, max, maxLength, textSize, textWeight, fieldPaddingRight, fieldPaddingLeft, fieldHeight, deleteIconMode, deleteIconSize, deleteIconColor, suffixText, suffixTextRightSpacingMode, isFocused, autoComplete, stepperMode, stepperRightSpacing, innerSpinButtonSize, step, onBlur, onChange, onFocus, onKeyDown, onKeyUp, onTarget, inputRef, ...rest }: TextFieldBaseProps): JSX.Element;
+declare function TextFieldBase({ name, hintText, defaultText, textAlign, validation, preventBlankMode, enterSubmitMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, inputMode, state, colorTheme, min, max, maxLength, textSize, textWeight, fieldPaddingRight, fieldPaddingLeft, fieldHeight, deleteIconMode, deleteIconSize, deleteIconColor, suffixText, suffixTextRightSpacingMode, isFocused, autoComplete, stepperMode, stepperRightSpacing, innerSpinButtonSize, step, onBlur, onChange, onFocus, onKeyDown, onKeyUp, onTarget, inputRef, ...rest }: TextFieldBaseProps): JSX.Element;
 export default TextFieldBase;

package/dist/src/desktop/common/components/TextFieldBase/TextFieldBase.js

@@ -61,7 +61,7 @@ var common_1 = require("../../../../common");
 var IconButton_1 = require("../../../components/IconButton");
 var constants_1 = require("./constants");
 function TextFieldBase(_a) {
-    var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, _b = _a.textAlign, textAlign = _b === void 0 ? 'left' : _b, validation = _a.validation, _c = _a.preventBlankMode, preventBlankMode = _c === void 0 ? 'none' : _c, _d = _a.enterSubmitMode, enterSubmitMode = _d === void 0 ? 'none' : _d, _e = _a.textLineType, textLineType = _e === void 0 ? 'single' : _e, multiRows = _a.multiRows, autoMinRows = _a.autoMinRows, autoMaxRows = _a.autoMaxRows, _f = _a.inputType, inputType = _f === void 0 ? 'text' : _f, _g = _a.state, state = _g === void 0 ? 'normal' : _g, _h = _a.colorTheme, colorTheme = _h === void 0 ? 'none' : _h, min = _a.min, max = _a.max, _j = _a.maxLength, maxLength = _j === void 0 ? Infinity : _j, _k = _a.textSize, textSize = _k === void 0 ? 'form2' : _k, _l = _a.textWeight, textWeight = _l === void 0 ? 'normal' : _l, fieldPaddingRight = _a.fieldPaddingRight, fieldPaddingLeft = _a.fieldPaddingLeft, _m = _a.fieldHeight, fieldHeight = _m === void 0 ? 48 : _m, _o = _a.deleteIconMode, deleteIconMode = _o === void 0 ? 'use' : _o, _p = _a.deleteIconSize, deleteIconSize = _p === void 0 ? 20 : _p, _q = _a.deleteIconColor, deleteIconColor = _q === void 0 ? 'ui_cpnt_button_icon_disabled' : _q, suffixText = _a.suffixText, _r = _a.suffixTextRightSpacingMode, suffixTextRightSpacingMode = _r === void 0 ? 'none' : _r, isFocused = _a.isFocused, _s = _a.autoComplete, autoComplete = _s === void 0 ? 'on' : _s, _t = _a.stepperMode, stepperMode = _t === void 0 ? 'none' : _t, _u = _a.stepperRightSpacing, stepperRightSpacing = _u === void 0 ? 1 : _u, _v = _a.innerSpinButtonSize, innerSpinButtonSize = _v === void 0 ? 16 : _v, step = _a.step, onBlur = _a.onBlur, onChange = _a.onChange, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown, onKeyUp = _a.onKeyUp, onTarget = _a.onTarget, inputRef = _a.inputRef, rest = __rest(_a, ["name", "hintText", "defaultText", "textAlign", "validation", "preventBlankMode", "enterSubmitMode", "textLineType", "multiRows", "autoMinRows", "autoMaxRows", "inputType", "state", "colorTheme", "min", "max", "maxLength", "textSize", "textWeight", "fieldPaddingRight", "fieldPaddingLeft", "fieldHeight", "deleteIconMode", "deleteIconSize", "deleteIconColor", "suffixText", "suffixTextRightSpacingMode", "isFocused", "autoComplete", "stepperMode", "stepperRightSpacing", "innerSpinButtonSize", "step", "onBlur", "onChange", "onFocus", "onKeyDown", "onKeyUp", "onTarget", "inputRef"]);
+    var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, _b = _a.textAlign, textAlign = _b === void 0 ? 'left' : _b, validation = _a.validation, _c = _a.preventBlankMode, preventBlankMode = _c === void 0 ? 'none' : _c, _d = _a.enterSubmitMode, enterSubmitMode = _d === void 0 ? 'none' : _d, _e = _a.textLineType, textLineType = _e === void 0 ? 'single' : _e, multiRows = _a.multiRows, autoMinRows = _a.autoMinRows, autoMaxRows = _a.autoMaxRows, _f = _a.inputType, inputType = _f === void 0 ? 'text' : _f, inputMode = _a.inputMode, _g = _a.state, state = _g === void 0 ? 'normal' : _g, _h = _a.colorTheme, colorTheme = _h === void 0 ? 'none' : _h, min = _a.min, max = _a.max, _j = _a.maxLength, maxLength = _j === void 0 ? Infinity : _j, _k = _a.textSize, textSize = _k === void 0 ? 'form2' : _k, _l = _a.textWeight, textWeight = _l === void 0 ? 'normal' : _l, fieldPaddingRight = _a.fieldPaddingRight, fieldPaddingLeft = _a.fieldPaddingLeft, _m = _a.fieldHeight, fieldHeight = _m === void 0 ? 48 : _m, _o = _a.deleteIconMode, deleteIconMode = _o === void 0 ? 'use' : _o, _p = _a.deleteIconSize, deleteIconSize = _p === void 0 ? 20 : _p, _q = _a.deleteIconColor, deleteIconColor = _q === void 0 ? 'ui_cpnt_button_icon_disabled' : _q, suffixText = _a.suffixText, _r = _a.suffixTextRightSpacingMode, suffixTextRightSpacingMode = _r === void 0 ? 'none' : _r, isFocused = _a.isFocused, _s = _a.autoComplete, autoComplete = _s === void 0 ? 'on' : _s, _t = _a.stepperMode, stepperMode = _t === void 0 ? 'none' : _t, _u = _a.stepperRightSpacing, stepperRightSpacing = _u === void 0 ? 1 : _u, _v = _a.innerSpinButtonSize, innerSpinButtonSize = _v === void 0 ? 16 : _v, step = _a.step, onBlur = _a.onBlur, onChange = _a.onChange, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown, onKeyUp = _a.onKeyUp, onTarget = _a.onTarget, inputRef = _a.inputRef, rest = __rest(_a, ["name", "hintText", "defaultText", "textAlign", "validation", "preventBlankMode", "enterSubmitMode", "textLineType", "multiRows", "autoMinRows", "autoMaxRows", "inputType", "inputMode", "state", "colorTheme", "min", "max", "maxLength", "textSize", "textWeight", "fieldPaddingRight", "fieldPaddingLeft", "fieldHeight", "deleteIconMode", "deleteIconSize", "deleteIconColor", "suffixText", "suffixTextRightSpacingMode", "isFocused", "autoComplete", "stepperMode", "stepperRightSpacing", "innerSpinButtonSize", "step", "onBlur", "onChange", "onFocus", "onKeyDown", "onKeyUp", "onTarget", "inputRef"]);
     var _w = (0, react_hook_form_1.useFormContext)(), register = _w.register, setValue = _w.setValue, getValues = _w.getValues, clearErrors = _w.clearErrors;
     var timeout;
     var suffixTextRef = (0, react_1.useRef)(null);
@@ -104,6 +104,28 @@ function TextFieldBase(_a) {
             checkMaxLength(e);
         }
     }
+    function handleKeyPress(e) {
+        if (textLineType === 'single' && inputType === 'number' && inputMode === 'numeric') {
+            handleNumericKeypress(e);
+        }
+    }
+    /**
+     * 제어키(31 이하) 또는 숫자(0-9)만 입력 허용하는 키보드 이벤트 핸들러
+     * 제어키 예시: Backspace(8), Tab(9), Enter(13)
+     */
+    var handleNumericKeypress = function (e) {
+        // 제어키(31 이하)는 허용
+        var CONTROL_KEY_CODE = 31;
+        var code = e.which || e.keyCode;
+        if (code <= CONTROL_KEY_CODE) {
+            return;
+        }
+        // 숫자가 아니면 이벤트 중단
+        var char = String.fromCharCode(code);
+        if (!/^\d*$/.test(char)) {
+            e.preventDefault();
+        }
+    };
     function handleChange(e) {
         // NOTE: preventBlankMode는 input에만 적용 가능
         // NOTE: preventBlankMode === 'all'일 경우에는 무조건 onChange 시점에 적용
@@ -113,6 +135,13 @@ function TextFieldBase(_a) {
                 e.target.value = value.replace(/ /g, '');
             }
         }
+        // 숫자만 필터링
+        if (textLineType === 'single' && inputType === 'number' && inputMode === 'numeric') {
+            var value = e.target.value;
+            if (!/^\d*$/.test(value)) {
+                e.target.value = value.replace(/\D/g, '');
+            }
+        }
         if (onChange) {
             onChange(e);
         }
@@ -197,7 +226,7 @@ function TextFieldBase(_a) {
     }
     var S_TextFieldBase = function () {
         if (textLineType === 'single') {
-            return ((0, jsx_runtime_1.jsxs)(S_InputWrapper, { children: [stepperMode === 'use' && ((0, jsx_runtime_1.jsxs)(S_IconBox, __assign({ innerSpinButtonSize: innerSpinButtonSize, isFocused: isFocused, stepperRightSpacing: stepperRightSpacing }, { children: [(0, jsx_runtime_1.jsx)(components_2.Icon, { iconName: "ic_arrow_up_stepper", fillType: "fill", size: innerSpinButtonSize }), (0, jsx_runtime_1.jsx)(components_2.Icon, { iconName: "ic_arrow_down_stepper", fillType: "fill", size: innerSpinButtonSize })] }))), (0, jsx_runtime_1.jsx)(S_Input, __assign({}, register(name, validation), rest, { name: name, defaultValue: defaultText, placeholder: hintText, textAlign: textAlign, type: inputType, state: state, readOnly: state === 'read_only', disabled: state === 'disabled', maxLength: maxLength, textSize: textSize, textWeight: textWeight, fieldPaddingRight: fieldPaddingRight, fieldPaddingLeft: fieldPaddingLeft, colorTheme: colorTheme, min: min, max: max, autoComplete: autoComplete, stepperMode: stepperMode, innerSpinButtonSize: innerSpinButtonSize, step: step, deleteIconMode: deleteIconMode, suffixText: suffixText, suffixTextWidth: suffixTextWidth, stepperRightSpacing: stepperRightSpacing, isFocused: isFocused, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, ref: function (e) {
+            return ((0, jsx_runtime_1.jsxs)(S_InputWrapper, { children: [stepperMode === 'use' && ((0, jsx_runtime_1.jsxs)(S_IconBox, __assign({ innerSpinButtonSize: innerSpinButtonSize, isFocused: isFocused, stepperRightSpacing: stepperRightSpacing }, { children: [(0, jsx_runtime_1.jsx)(components_2.Icon, { iconName: "ic_arrow_up_stepper", fillType: "fill", size: innerSpinButtonSize }), (0, jsx_runtime_1.jsx)(components_2.Icon, { iconName: "ic_arrow_down_stepper", fillType: "fill", size: innerSpinButtonSize })] }))), (0, jsx_runtime_1.jsx)(S_Input, __assign({}, register(name, validation), rest, { name: name, defaultValue: defaultText, placeholder: hintText, textAlign: textAlign, type: inputType, inputMode: inputMode, state: state, readOnly: state === 'read_only', disabled: state === 'disabled', maxLength: maxLength, textSize: textSize, textWeight: textWeight, fieldPaddingRight: fieldPaddingRight, fieldPaddingLeft: fieldPaddingLeft, colorTheme: colorTheme, min: min, max: max, autoComplete: autoComplete, stepperMode: stepperMode, innerSpinButtonSize: innerSpinButtonSize, step: step, deleteIconMode: deleteIconMode, suffixText: suffixText, suffixTextWidth: suffixTextWidth, stepperRightSpacing: stepperRightSpacing, isFocused: isFocused, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onKeyPress: handleKeyPress, ref: function (e) {
                             ref(e);
                             if (inputRef) {
                                 inputRef.current = e;
@@ -205,7 +234,7 @@ function TextFieldBase(_a) {
                         } })), (deleteIconMode === 'use' || suffixText) && ((0, jsx_runtime_1.jsxs)(S_RightBox, __assign({ deleteIconMode: deleteIconMode, stepperMode: stepperMode, suffixText: suffixText, innerSpinButtonSize: innerSpinButtonSize }, { children: [deleteIconMode === 'use' && ((0, jsx_runtime_1.jsx)(S_IconButtonWrapper, __assign({ innerSpinButtonSize: innerSpinButtonSize, deleteIconMode: deleteIconMode, stepperMode: stepperMode, suffixText: suffixText, isFocused: isFocused, suffixTextWidth: suffixTextWidth, stepperRightSpacing: stepperRightSpacing }, { children: isFocused && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: "ic_delete", baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: deleteIconSize, iconColorKey: deleteIconColor, iconFillType: "fill", state: state === 'disabled' ? 'disabled' : 'normal', tabIndex: -1, onMouseDown: deleteValue })) }))), suffixText && ((0, jsx_runtime_1.jsxs)(S_SuffixTextBox, __assign({ ref: suffixTextRef }, { children: [(0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: suffixText, styleTheme: "caption1Bold", colorTheme: "sysTextTertiary", colorOverride: stepperMode === 'use' && isFocused ? 'ui_106' : undefined, textAlign: "right", singleLineMode: "use" }), suffixTextRightSpacingMode === 'use' && ((0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_b", spacingType: "width" }))] })))] })))] }));
         }
         if (textLineType === 'multi') {
-            return ((0, jsx_runtime_1.jsx)(S_Multi, __assign({}, register(name, validation), rest, { name: name, defaultValue: defaultText, placeholder: hintText, textAlign: textAlign, state: state, readOnly: state === 'read_only' && true, disabled: state === 'disabled' && true, maxLength: maxLength, rows: multiRows, textSize: textSize, textWeight: textWeight, fieldPaddingRight: fieldPaddingRight, fieldPaddingLeft: fieldPaddingLeft, colorTheme: colorTheme, autoComplete: autoComplete, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, ref: function (e) {
+            return ((0, jsx_runtime_1.jsx)(S_Multi, __assign({}, register(name, validation), rest, { name: name, defaultValue: defaultText, placeholder: hintText, textAlign: textAlign, state: state, readOnly: state === 'read_only' && true, disabled: state === 'disabled' && true, maxLength: maxLength, rows: multiRows, textSize: textSize, textWeight: textWeight, fieldPaddingRight: fieldPaddingRight, fieldPaddingLeft: fieldPaddingLeft, colorTheme: colorTheme, autoComplete: autoComplete, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onKeyPress: handleKeyPress, ref: function (e) {
                     ref(e);
                     if (inputRef) {
                         inputRef.current = e;
@@ -213,7 +242,7 @@ function TextFieldBase(_a) {
                 } })));
         }
         if (textLineType === 'auto') {
-            return ((0, jsx_runtime_1.jsx)(S_Auto, __assign({}, refRest, rest, { name: name, defaultValue: defaultText, placeholder: hintText, textAlign: textAlign, autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, state: state, readOnly: state === 'read_only' && true, disabled: state === 'disabled' && true, maxLength: maxLength, textSize: textSize, textWeight: textWeight, fieldPaddingRight: fieldPaddingRight, fieldPaddingLeft: fieldPaddingLeft, fieldHeight: fieldHeight, colorTheme: colorTheme, autoComplete: autoComplete, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, ref: function (e) {
+            return ((0, jsx_runtime_1.jsx)(S_Auto, __assign({}, refRest, rest, { name: name, defaultValue: defaultText, placeholder: hintText, textAlign: textAlign, autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, state: state, readOnly: state === 'read_only' && true, disabled: state === 'disabled' && true, maxLength: maxLength, textSize: textSize, textWeight: textWeight, fieldPaddingRight: fieldPaddingRight, fieldPaddingLeft: fieldPaddingLeft, fieldHeight: fieldHeight, colorTheme: colorTheme, autoComplete: autoComplete, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onKeyPress: handleKeyPress, ref: function (e) {
                     ref(e);
                     if (textAreaRef) {
                         textAreaRef.current = e;

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

@@ -93,7 +93,7 @@ function BasicButtonGroup(_a) {
         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", ref: tooltipPositionTargetRef }, { 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, tooltipText = _a.tooltipText, _d = _a.tooltipPosition, tooltipPosition = _d === void 0 ? 'bottom' : _d, _e = _a.iconColorTheme, iconColorTheme = _e === void 0 ? 'none' : _e;
+            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, tooltipText = _a.tooltipText, _d = _a.tooltipPosition, tooltipPosition = _d === void 0 ? 'bottom' : _d, _e = _a.iconColorTheme, iconColorTheme = _e === void 0 ? 'none' : _e, _f = _a.backgroundColorTheme, backgroundColorTheme = _f === void 0 ? 'ui_cpnt_basicbuttongroup_base_default' : _f;
             var tooltipPositionCss = (0, SystemUIPositionGenerator_1.hoverTypeSystemUICssGenerator)({
                 baseSize: constants_1.ICON_BUTTON_SIZE[size],
                 sizeOffset: tooltipSizeOffset,
@@ -103,11 +103,9 @@ function BasicButtonGroup(_a) {
                     : "center_".concat(tooltipPosition)
             });
             var isHoveredButton = index === hoveredButtonIndex;
-            return ((0, jsx_runtime_1.jsxs)(S_BasicButton, __assign({ size: size, onClick: function (e) { return onClick && onClick(e); }, onMouseDown: function (e) { return onMouseDown && onMouseDown(e); }, onPointerEnter: function () { return setHoveredButtonIndex(index); }, onPointerLeave: function () { return setHoveredButtonIndex(null); }, disabled: state === 'disabled' || buttonState === 'disabled' }, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'small' ? 20 : 24, fillType: iconFillType, colorKey: getColorKey(buttonState, iconColorTheme) }), tooltipText &&
+            return ((0, jsx_runtime_1.jsxs)(S_BasicButton, __assign({ size: size, onClick: function (e) { return onClick && onClick(e); }, onMouseDown: function (e) { return onMouseDown && onMouseDown(e); }, onPointerEnter: function () { return setHoveredButtonIndex(index); }, onPointerLeave: function () { return setHoveredButtonIndex(null); }, disabled: state === 'disabled' || buttonState === 'disabled', backgroundColorTheme: backgroundColorTheme }, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'small' ? 20 : 24, fillType: iconFillType, colorKey: getColorKey(buttonState, iconColorTheme) }), tooltipText &&
                         isHoveredButton &&
-                        (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(S_TooltipWrapper, __assign({ className: "TooltipWrapper", ref: tooltipRef, tooltipPositionCss: tooltipPositionCss, size: size }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: tooltipText, colorOverride: "ui_cpnt_textlabel_button_tooltip", styleTheme: "caption2Regular", colorTheme: "sysTextSecondary" }) })), 
-                        // document.getElementById('tooltip-root') as HTMLElement
-                        document.body)] }), iconName + index));
+                        (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(S_TooltipWrapper, __assign({ className: "TooltipWrapper", ref: tooltipRef, tooltipPositionCss: tooltipPositionCss, size: size }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: tooltipText, colorOverride: "ui_cpnt_textlabel_button_tooltip", styleTheme: "caption2Regular", colorTheme: "sysTextSecondary" }) })), document.getElementById('tooltip-root'))] }), iconName + index));
         }) })));
 }
 var S_BasicButtonGroup = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  width: max-content;\n\n  & > button:not(:last-child) {\n    margin-right: ", ";\n  }\n"], ["\n  align-items: center;\n  display: flex;\n  width: max-content;\n\n  & > button:not(:last-child) {\n    margin-right: ", ";\n  }\n"])), function (_a) {
@@ -118,8 +116,10 @@ var large = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 =
 var medium = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-radius: 12px;\n  height: 40px;\n  width: 40px;\n"], ["\n  border-radius: 12px;\n  height: 40px;\n  width: 40px;\n"])));
 var small = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border-radius: 10px;\n  height: 32px;\n  width: 32px;\n"], ["\n  border-radius: 10px;\n  height: 32px;\n  width: 32px;\n"])));
 var S_BasicButton = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border: none;\n  display: inline-flex;\n  justify-content: center;\n  position: relative;\n\n  ", ";\n\n  &::before {\n    background-color: transparent;\n    border-radius: inherit;\n    content: '';\n    height: 100%;\n    left: 0;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n\n  &:hover:enabled:before {\n    background-color: ", ";\n  }\n\n  &:active:enabled:before {\n    background-color: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    cursor: default;\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border: none;\n  display: inline-flex;\n  justify-content: center;\n  position: relative;\n\n  ", ";\n\n  &::before {\n    background-color: transparent;\n    border-radius: inherit;\n    content: '';\n    height: 100%;\n    left: 0;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n\n  &:hover:enabled:before {\n    background-color: ", ";\n  }\n\n  &:active:enabled:before {\n    background-color: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    cursor: default;\n  }\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_basicbuttongroup_base_default;
+    var theme = _a.theme, backgroundColorTheme = _a.backgroundColorTheme;
+    return backgroundColorTheme
+        ? theme[backgroundColorTheme]
+        : theme.ui_cpnt_basicbuttongroup_base_default;
 }, function (_a) {
     var size = _a.size;
     return size && { large: large, medium: medium, small: small }[size];

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

@@ -53,7 +53,7 @@ function DesktopAlertDialog(_a) {
     var btn3Mode = ['tbtn_amount3'];
     var icon = function () {
         if (iconMode !== 'none') {
-            return ((0, jsx_runtime_1.jsxs)(S_IconWrapper, { children: [iconMode === 'success' && ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_success", size: 72, colorKey: "ui_cpnt_alertdialog_icon_success" })), iconMode === 'error' && ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_error", size: 72, colorKey: "ui_cpnt_alertdialog_icon_error" })), iconMode === 'warning' && ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_warning", size: 72, colorKey: "ui_cpnt_alertdialog_icon_warning" })), iconMode === 'information' && ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_information", size: 72, colorKey: "ui_cpnt_alertdialog_icon_information" }))] }));
+            return ((0, jsx_runtime_1.jsxs)("div", { children: [iconMode === 'success' && ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_success", size: 72, colorKey: "ui_cpnt_alertdialog_icon_success" })), iconMode === 'error' && ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_error", size: 72, colorKey: "ui_cpnt_alertdialog_icon_error" })), iconMode === 'warning' && ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_warning", size: 72, colorKey: "ui_cpnt_alertdialog_icon_warning" })), iconMode === 'information' && ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_information", size: 72, colorKey: "ui_cpnt_alertdialog_icon_information" }))] }));
         }
     };
     return react_dom_1.default.createPortal((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(S_ModalOverlay, {}), (0, jsx_runtime_1.jsxs)(S_ModalWrapper, __assign({ "x-pds-name": "DesktopAlertDialog", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [(0, jsx_runtime_1.jsxs)(S_UpperBox, { children: [icon(), iconMode !== 'none' && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" }), (0, jsx_runtime_1.jsxs)(S_TextBox, { children: [titleText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "leadParaBold" })), titleText && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_c" }), contentText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: contentText, colorTheme: "sysTextPrimary", styleTheme: "body1Regular" }))] })] }), (0, jsx_runtime_1.jsxs)(S_Footer, { children: [btn3Mode.includes(btnMode) && tBtn3Text && ((0, jsx_runtime_1.jsx)(TextButton_1.TextButton, { text: tBtn3Text, state: tBtn3State, type: tBtn3Type, size: "large", onClick: onClickTBtn3, colorTheme: "grey_01" })), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), btn2Mode.includes(btnMode) && tBtn2Text && ((0, jsx_runtime_1.jsx)(TextButton_1.TextButton, { text: tBtn2Text, state: tBtn2State, type: tBtn2Type, size: "large", onClick: onClickTBtn2, colorTheme: "grey_01" })), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), btn1Mode.includes(btnMode) && tBtn1Text && ((0, jsx_runtime_1.jsx)(TextButton_1.TextButton, { text: tBtn1Text, state: tBtn1State, type: tBtn1Type, size: "large", onClick: onClickTBtn1, onKeyDown: function (e) { return handleKeyDown(e); } }))] })] }))] }), container);
@@ -62,13 +62,12 @@ var S_UpperBox = styled_components_1.default.div(templateObject_1 || (templateOb
     var theme = _a.theme;
     return theme.spacing.spacingE;
 });
-var S_IconWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""])));
-var S_TextBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
-var S_ModalOverlay = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n\n  ", "\n"], ["\n  background-color: ", ";\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n\n  ", "\n"])), function (_a) {
+var S_TextBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
+var S_ModalOverlay = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n\n  ", "\n"], ["\n  background-color: ", ";\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_alertdialog_dimmed;
 }, animationStyle_1.dialogOverlayOnAni);
-var S_ModalWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  left: 50%;\n  max-width: 560px;\n  min-width: 480px;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: auto;\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  left: 50%;\n  max-width: 560px;\n  min-width: 480px;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: auto;\n\n  ", "\n"])), function (_a) {
+var S_ModalWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  left: 50%;\n  max-width: 560px;\n  min-width: 480px;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: auto;\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  left: 50%;\n  max-width: 560px;\n  min-width: 480px;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: auto;\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_alertdialog_base;
 }, function (_a) {
@@ -78,18 +77,18 @@ var S_ModalWrapper = styled_components_1.default.div(templateObject_5 || (templa
     var theme = _a.theme;
     return theme.boxShadow.elevation5;
 }, animationStyle_1.dialogOnAni);
-var S_Footer = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  justify-content: flex-end;\n\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  justify-content: flex-end;\n\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"])), function (_a) {
+var S_Footer = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  justify-content: flex-end;\n  padding: ", " ", "\n    ", " ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  justify-content: flex-end;\n  padding: ", " ", "\n    ", " ", ";\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingD;
+    return theme.spacing.spacingC;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingE;
+    return theme.spacing.spacingD;
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingD;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingC;
+    return theme.spacing.spacingE;
 });
 exports.default = DesktopAlertDialog;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -60,23 +60,23 @@ function DesktopTabBar(_a) {
         };
         var textLabel_1 = function (item, isSubText) {
             if (isSubText) {
-                return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: "caption1Bold", colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextTertiary', singleLineMode: "use" }));
+                return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, __assign({ text: item.title, textAlign: "center", styleTheme: "caption1Bold", colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextTertiary', singleLineMode: "use" }, (item.tooltipText && { tooltipText: item.tooltipText }))));
             }
             if (styleTheme === 'content_black') {
-                return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: item.isActive ? 'caption1Bold' : 'caption1Regular', colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use" }));
+                return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, __assign({ text: item.title, textAlign: "center", styleTheme: item.isActive ? 'caption1Bold' : 'caption1Regular', colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use" }, (item.tooltipText && { tooltipText: item.tooltipText }))));
             }
             if (styleTheme === 'content') {
-                return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: item.isActive ? 'caption1Bold' : 'caption1Regular', colorTheme: item.isActive ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }));
+                return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, __assign({ text: item.title, textAlign: "center", styleTheme: item.isActive ? 'caption1Bold' : 'caption1Regular', colorTheme: item.isActive ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }, (item.tooltipText && { tooltipText: item.tooltipText }))));
             }
             if (styleTheme === 'main') {
-                return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: "leadParaBold", colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextTertiary', singleLineMode: "use", letterSpacing: "-0.04em" }));
+                return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, __assign({ text: item.title, textAlign: "center", styleTheme: "leadParaBold", colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextTertiary', singleLineMode: "use", letterSpacing: "-0.04em" }, (item.tooltipText && { tooltipText: item.tooltipText }))));
             }
         };
-        return ((0, jsx_runtime_1.jsxs)(S_TabBarBox, __assign({ "x-pds-name": "DesktopTabBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [(0, jsx_runtime_1.jsx)(S_MainTabBarSpace, __assign({ styleTheme: styleTheme, isSubTabBarActivated: isSubTabBarActivated }, { children: itemArray.map(function (item) { return ((0, jsx_runtime_1.jsxs)(S_MainTabItemBox, __assign({ styleTheme: styleTheme }, { children: [(0, jsx_runtime_1.jsxs)(S_MainTabItemWrapper, __assign({ text: item.title, styleTheme: styleTheme, isActive: item.isActive, onClick: function (e) { return handelClickTabItem_1(item, e); } }, { children: [textLabel_1(item, false), item.iconMode === 'use' && item.iconName && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Spacing_1.default, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(Icon_1.default, { size: styleTheme === 'main' ? 20 : 16, iconName: item.iconName || 'ic_unavailable', fillType: item.iconFillType || 'line', colorKey: item.isActive
+        return ((0, jsx_runtime_1.jsxs)(S_TabBarBox, __assign({ "x-pds-name": "DesktopTabBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [(0, jsx_runtime_1.jsx)(S_MainTabBarSpace, __assign({ styleTheme: styleTheme, isSubTabBarActivated: isSubTabBarActivated }, { children: itemArray.map(function (item) { return ((0, jsx_runtime_1.jsxs)(S_MainTabItemBox, __assign({ styleTheme: styleTheme }, { children: [(0, jsx_runtime_1.jsxs)(S_MainTabItemWrapper, __assign({ text: item.title, styleTheme: styleTheme, isActive: item.isActive, onClick: function (e) { return !item.disabled && handelClickTabItem_1(item, e); }, disabled: item.disabled }, { children: [textLabel_1(item, false), item.iconMode === 'use' && item.iconName && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Spacing_1.default, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(Icon_1.default, { size: styleTheme === 'main' ? 20 : 16, iconName: item.iconName || 'ic_unavailable', fillType: item.iconFillType || 'line', colorKey: item.isActive
                                                     ? styleTheme === 'content'
                                                         ? 'ui_cpnt_textlabel_usr_brandprimary'
                                                         : 'ui_cpnt_textlabel_sys_primary'
-                                                    : 'ui_cpnt_textlabel_sys_tertiary' })] }))] })), item.isActive && item.subArray && ((0, jsx_runtime_1.jsx)(S_SubTabBarWrapper, { children: item.subArray.map(function (subItem) { return ((0, jsx_runtime_1.jsx)(S_SubTabItemWrapper, __assign({ text: subItem.title, styleTheme: styleTheme, onClick: function (e) { return handelClickTabItem_1(subItem, e); } }, { children: textLabel_1(subItem, true) }), subItem.title)); }) }))] }), item.title)); }) })), isSubTabBarActivated && (0, jsx_runtime_1.jsx)(S_SubTabBarSpace, { styleTheme: styleTheme })] })));
+                                                    : 'ui_cpnt_textlabel_sys_tertiary' })] }))] })), item.isActive && item.subArray && ((0, jsx_runtime_1.jsx)(S_SubTabBarWrapper, { children: item.subArray.map(function (subItem) { return ((0, jsx_runtime_1.jsx)(S_SubTabItemWrapper, __assign({ text: subItem.title, styleTheme: styleTheme, disabled: subItem.disabled, onClick: function (e) { return !subItem.disabled && handelClickTabItem_1(subItem, e); } }, { children: textLabel_1(subItem, true) }), subItem.title)); }) }))] }), item.title)); }) })), isSubTabBarActivated && (0, jsx_runtime_1.jsx)(S_SubTabBarSpace, { styleTheme: styleTheme })] })));
     }
     if (textArray) {
         var isSubTabBarActivated = textArray.some(function (item) { return pathname.includes(item.path) && item.subArray; });
@@ -158,7 +158,10 @@ var S_MainTabItemBox = styled_components_1.default.div(templateObject_5 || (temp
     var theme = _a.theme, styleTheme = _a.styleTheme;
     return styleTheme === 'main' ? '20px' : theme.spacing.spacingD;
 });
-var S_MainTabItemWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: flex-end;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  height: 100%;\n  padding: 0 ", ";\n  ", "\n  ", "\n  & > [x-pds-name=\"TextLabel\"] {\n    padding-bottom: ", ";\n  }\n  & > svg {\n    padding-bottom: ", ";\n  }\n"], ["\n  align-items: flex-end;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  height: 100%;\n  padding: 0 ", ";\n  ", "\n  ", "\n  & > [x-pds-name=\"TextLabel\"] {\n    padding-bottom: ", ";\n  }\n  & > svg {\n    padding-bottom: ", ";\n  }\n"])), function (_a) {
+var S_MainTabItemWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: flex-end;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  height: 100%;\n  padding: 0 ", ";\n  ", "\n  ", "\n  & > [x-pds-name=\"TextLabel\"] {\n    padding-bottom: ", ";\n  }\n  & > svg {\n    padding-bottom: ", ";\n  }\n"], ["\n  align-items: flex-end;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  height: 100%;\n  padding: 0 ", ";\n  ", "\n  ", "\n  & > [x-pds-name=\"TextLabel\"] {\n    padding-bottom: ", ";\n  }\n  & > svg {\n    padding-bottom: ", ";\n  }\n"])), function (_a) {
+    var disabled = _a.disabled;
+    return (disabled ? 'default' : 'pointer');
+}, function (_a) {
     var theme = _a.theme, styleTheme = _a.styleTheme;
     return (styleTheme === 'main' ? 0 : theme.spacing.spacingA);
 }, tabIndicator, textOffset, function (_a) {
@@ -179,7 +182,10 @@ var S_SubTabBarSpace = styled_components_1.default.div(templateObject_8 || (temp
     var styleTheme = _a.styleTheme;
     return (styleTheme === 'main' ? '26px' : '32px');
 });
-var S_SubTabItemWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  margin-right: ", ";\n  ", ";\n  ", ";\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  ", "\n"], ["\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  margin-right: ", ";\n  ", ";\n  ", ";\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  ", "\n"])), function (_a) {
+var S_SubTabItemWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  align-items: center;\n  cursor: ", ";\n  display: flex;\n  justify-content: center;\n  margin-right: ", ";\n  ", ";\n  ", ";\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  ", "\n"], ["\n  align-items: center;\n  cursor: ", ";\n  display: flex;\n  justify-content: center;\n  margin-right: ", ";\n  ", ";\n  ", ";\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  ", "\n"])), function (_a) {
+    var disabled = _a.disabled;
+    return (disabled ? 'default' : 'pointer');
+}, function (_a) {
     var theme = _a.theme, styleTheme = _a.styleTheme;
     return styleTheme === 'main' ? theme.spacing.spacingD : theme.spacing.spacingE;
 }, function (_a) {

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

@@ -178,10 +178,14 @@ function Dropdown(_a) {
     };
     var getTextColorTheme = function () {
         if (colorTheme === 'none') {
-            if (isFocused) {
-                return 'sysTextPrimary';
-            }
             if (state === 'normal') {
+                var isHintTextShow = !(selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.text) && !(value === null || value === void 0 ? void 0 : value.text) && !(defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.text) && !!hintText;
+                if (isHintTextShow) {
+                    return 'sysTextSecondary';
+                }
+                if (isFocused) {
+                    return 'sysTextPrimary';
+                }
                 return 'sysTextPrimary';
             }
             if (state === 'read_only') {
@@ -200,10 +204,14 @@ function Dropdown(_a) {
     };
     var getTextColorOverride = function () {
         if (colorTheme === 'dark') {
-            if (isFocused) {
-                return 'ui_cpnt_dropdown_text_darktheme_enabled';
-            }
             if (state === 'normal') {
+                var isHintTextShow = !(selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.text) && !(value === null || value === void 0 ? void 0 : value.text) && !(defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.text) && !!hintText;
+                if (isHintTextShow) {
+                    return 'ui_cpnt_dropdown_text_darktheme_hinttext';
+                }
+                if (isFocused) {
+                    return 'ui_cpnt_dropdown_text_darktheme_enabled';
+                }
                 return 'ui_cpnt_dropdown_text_darktheme_hint';
             }
             if (state === 'read_only') {

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

@@ -12,6 +12,7 @@ type UserProfile = {
     src: string;
     href: string;
     leftIconButton?: React.ReactNode;
+    leftIconButton2?: React.ReactNode;
     overrideUserProfile?: React.ReactNode;
 };
 export type Props = {

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

@@ -93,7 +93,7 @@ function DynamicDesktopNavBar(_a) {
     function handleClickInternalMenuItemNav(url) {
         dispatch({ type: 'INTERNAL_CLICKED', payload: { clickedURL: url } });
     }
-    return ((0, jsx_runtime_1.jsx)(exports.BasePathContext.Provider, __assign({ value: { basePath: basePath, activeMode: state.mode, handleClickInternalMenuItemNav: handleClickInternalMenuItemNav } }, { children: colorTheme === 'transparent' ? ((0, jsx_runtime_1.jsx)(styled_components_1.ThemeProvider, __assign({ theme: __assign(__assign(__assign({}, theme), (0, theme_1.themeByGivenTone)('DARK')), { ui_menu_background: theme.ui_menu_background_transparent, ui_menu_button_base: theme.ui_menu_button_base_transparent }) }, { children: (0, jsx_runtime_1.jsx)(S_DynamicDesktopNavBar, __assign({ "x-pds-name": "DynamicDesktopNavBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop", isFixedWidth: isFixedWidth, isPreview: isPreview, navBarHeight: navBarHeight }, { children: (0, jsx_runtime_1.jsxs)(S_Grid, __assign({ className: "DynamicDesktopNavBarGrid", gridTemplate: gridTemplate, style: style }, { children: [(0, jsx_runtime_1.jsx)(blocks_1.BrandLogo, { to: brandLogo.href, logoSrc: brandLogo.src, fallbackText: brandLogo.text, isCenteredLogo: isCenteredLogo }), (0, jsx_runtime_1.jsx)(blocks_1.PrimaryMenu, { menus: slicedPrimaryMenus, showMenuAsIcon: primaryMenuOptions.showMenuAsIcon, style: primaryMenuOptions.style }), showSecondaryMenu && ((0, jsx_runtime_1.jsx)(blocks_1.SecondaryMenu, { menus: slicedSecondaryMenus, showMenuAsIcon: secondaryMenuOptions.showMenuAsIcon, style: secondaryMenuOptions.style })), (0, jsx_runtime_1.jsx)(blocks_1.UserProfile, { ref: profileArea, src: userProfile.src, to: userProfile.href, leftIconButton: userProfile.leftIconButton, overrideUserProfile: userProfile.overrideUserProfile, style: userProfileOptions.style })] })) })) }))) : ((0, jsx_runtime_1.jsx)(S_DynamicDesktopNavBar, __assign({ "x-pds-name": "DynamicDesktopNavBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop", isPreview: isPreview, isFixedWidth: isFixedWidth, navBarHeight: navBarHeight }, { children: (0, jsx_runtime_1.jsxs)(S_Grid, __assign({ className: "DynamicDesktopNavBarGrid", gridTemplate: gridTemplate, style: style }, { children: [(0, jsx_runtime_1.jsx)(blocks_1.BrandLogo, { to: brandLogo.href, logoSrc: brandLogo.src, fallbackText: brandLogo.text, isCenteredLogo: isCenteredLogo }), (0, jsx_runtime_1.jsx)(blocks_1.PrimaryMenu, { menus: slicedPrimaryMenus, showMenuAsIcon: primaryMenuOptions.showMenuAsIcon, style: primaryMenuOptions.style }), showSecondaryMenu && ((0, jsx_runtime_1.jsx)(blocks_1.SecondaryMenu, { menus: slicedSecondaryMenus, showMenuAsIcon: secondaryMenuOptions.showMenuAsIcon, style: secondaryMenuOptions.style })), (0, jsx_runtime_1.jsx)(blocks_1.UserProfile, { ref: profileArea, src: userProfile.src, to: userProfile.href, leftIconButton: userProfile.leftIconButton, overrideUserProfile: userProfile.overrideUserProfile, style: userProfileOptions.style })] })) }))) })));
+    return ((0, jsx_runtime_1.jsx)(exports.BasePathContext.Provider, __assign({ value: { basePath: basePath, activeMode: state.mode, handleClickInternalMenuItemNav: handleClickInternalMenuItemNav } }, { children: colorTheme === 'transparent' ? ((0, jsx_runtime_1.jsx)(styled_components_1.ThemeProvider, __assign({ theme: __assign(__assign(__assign({}, theme), (0, theme_1.themeByGivenTone)('DARK')), { ui_menu_background: theme.ui_menu_background_transparent, ui_menu_button_base: theme.ui_menu_button_base_transparent }) }, { children: (0, jsx_runtime_1.jsx)(S_DynamicDesktopNavBar, __assign({ "x-pds-name": "DynamicDesktopNavBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop", isFixedWidth: isFixedWidth, isPreview: isPreview, navBarHeight: navBarHeight }, { children: (0, jsx_runtime_1.jsxs)(S_Grid, __assign({ className: "DynamicDesktopNavBarGrid", gridTemplate: gridTemplate, style: style }, { children: [(0, jsx_runtime_1.jsx)(blocks_1.BrandLogo, { to: brandLogo.href, logoSrc: brandLogo.src, fallbackText: brandLogo.text, isCenteredLogo: isCenteredLogo }), (0, jsx_runtime_1.jsx)(blocks_1.PrimaryMenu, { menus: slicedPrimaryMenus, showMenuAsIcon: primaryMenuOptions.showMenuAsIcon, style: primaryMenuOptions.style }), showSecondaryMenu && ((0, jsx_runtime_1.jsx)(blocks_1.SecondaryMenu, { menus: slicedSecondaryMenus, showMenuAsIcon: secondaryMenuOptions.showMenuAsIcon, style: secondaryMenuOptions.style })), (0, jsx_runtime_1.jsx)(blocks_1.UserProfile, { ref: profileArea, src: userProfile.src, to: userProfile.href, leftIconButton: userProfile.leftIconButton, leftIconButton2: userProfile.leftIconButton2, overrideUserProfile: userProfile.overrideUserProfile, style: userProfileOptions.style })] })) })) }))) : ((0, jsx_runtime_1.jsx)(S_DynamicDesktopNavBar, __assign({ "x-pds-name": "DynamicDesktopNavBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop", isPreview: isPreview, isFixedWidth: isFixedWidth, navBarHeight: navBarHeight }, { children: (0, jsx_runtime_1.jsxs)(S_Grid, __assign({ className: "DynamicDesktopNavBarGrid", gridTemplate: gridTemplate, style: style }, { children: [(0, jsx_runtime_1.jsx)(blocks_1.BrandLogo, { to: brandLogo.href, logoSrc: brandLogo.src, fallbackText: brandLogo.text, isCenteredLogo: isCenteredLogo }), (0, jsx_runtime_1.jsx)(blocks_1.PrimaryMenu, { menus: slicedPrimaryMenus, showMenuAsIcon: primaryMenuOptions.showMenuAsIcon, style: primaryMenuOptions.style }), showSecondaryMenu && ((0, jsx_runtime_1.jsx)(blocks_1.SecondaryMenu, { menus: slicedSecondaryMenus, showMenuAsIcon: secondaryMenuOptions.showMenuAsIcon, style: secondaryMenuOptions.style })), (0, jsx_runtime_1.jsx)(blocks_1.UserProfile, { ref: profileArea, src: userProfile.src, to: userProfile.href, leftIconButton: userProfile.leftIconButton, leftIconButton2: userProfile.leftIconButton2, overrideUserProfile: userProfile.overrideUserProfile, style: userProfileOptions.style })] })) }))) })));
 }
 var S_Grid = (0, styled_components_1.default)(BoxLayout_1.Grid)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  grid-column-gap: 24px;\n  justify-items: center;\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  align-items: center;\n  grid-column-gap: 24px;\n  justify-items: center;\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/desktop/components/DynamicDesktopNavBar/blocks/UserProfile.d.ts

@@ -4,6 +4,7 @@ type Props = {
     src: string;
     to: string;
     leftIconButton?: React.ReactNode;
+    leftIconButton2?: React.ReactNode;
     overrideUserProfile?: React.ReactNode;
     style?: CSSProperties;
 };

package/dist/src/desktop/components/DynamicDesktopNavBar/blocks/UserProfile.js

@@ -24,8 +24,8 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var Navigations_1 = require("../../../../common/components/Navigations");
 var hybrid_1 = require("../../../../hybrid");
 function UserProfile(_a, ref) {
-    var src = _a.src, to = _a.to, overrideUserProfile = _a.overrideUserProfile, leftIconButton = _a.leftIconButton, style = _a.style;
-    return ((0, jsx_runtime_1.jsx)(S_UserProfile, __assign({ style: style, ref: ref }, { children: overrideUserProfile ? ((0, jsx_runtime_1.jsx)(S_OverrideUserProfile, { children: overrideUserProfile })) : ((0, jsx_runtime_1.jsxs)(S_ImageViewWrapper, { children: [leftIconButton && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [leftIconButton, (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(Navigations_1.NavLink, __assign({ to: to }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { width: 32, ratio: "1_1", scaleType: "cover", shapeType: "circular", src: src, borderMode: "use" }) }))] })) })));
+    var src = _a.src, to = _a.to, overrideUserProfile = _a.overrideUserProfile, leftIconButton = _a.leftIconButton, leftIconButton2 = _a.leftIconButton2, style = _a.style;
+    return ((0, jsx_runtime_1.jsx)(S_UserProfile, __assign({ style: style, ref: ref }, { children: overrideUserProfile ? ((0, jsx_runtime_1.jsx)(S_OverrideUserProfile, { children: overrideUserProfile })) : ((0, jsx_runtime_1.jsxs)(S_ImageViewWrapper, { children: [leftIconButton2 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [leftIconButton2, (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })] })), leftIconButton && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [leftIconButton, (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(Navigations_1.NavLink, __assign({ to: to }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { width: 32, ratio: "1_1", scaleType: "cover", shapeType: "circular", src: src, borderMode: "use" }) }))] })) })));
 }
 var S_UserProfile = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  grid-area: USER_PROFILE;\n  justify-content: flex-end;\n"], ["\n  display: flex;\n  grid-area: USER_PROFILE;\n  justify-content: flex-end;\n"])));
 var S_OverrideUserProfile = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: max-content;\n"], ["\n  width: max-content;\n"])));

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

@@ -112,7 +112,7 @@ function SegmentedButtonGroup(_a) {
         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", selectionType: selectionType, ref: tooltipPositionTargetRef }, { children: valueArray.map(function (_a, index) {
-            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, tooltipText = _a.tooltipText, _d = _a.tooltipPosition, tooltipPosition = _d === void 0 ? 'bottom' : _d, _e = _a.iconColorTheme, iconColorTheme = _e === void 0 ? 'none' : _e;
+            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, tooltipText = _a.tooltipText, _d = _a.tooltipPosition, tooltipPosition = _d === void 0 ? 'bottom' : _d, _e = _a.iconColorTheme, iconColorTheme = _e === void 0 ? 'none' : _e, _f = _a.backgroundColorTheme, backgroundColorTheme = _f === void 0 ? 'ui_cpnt_segmentedbuttongroup_base_default' : _f;
             var tooltipPositionCss = (0, SystemUIPositionGenerator_1.hoverTypeSystemUICssGenerator)({
                 baseSize: constants_1.ICON_BUTTON_SIZE[size],
                 sizeOffset: tooltipSizeOffset,
@@ -122,7 +122,7 @@ function SegmentedButtonGroup(_a) {
                     : "center_".concat(tooltipPosition)
             });
             var isCurrentButton = index === currentButtonIndex;
-            return ((0, jsx_runtime_1.jsxs)(S_BasicButton, __assign({ size: size, onClick: function () { return handleClick(currentButtonValue); }, onMouseDown: function () { return handleMouseDown(currentButtonValue); }, disabled: state === 'disabled' || buttonState === 'disabled', selectionType: selectionType, isSelected: checkSelection(currentButtonValue), onPointerEnter: function () { return setCurrentButtonIndex(index); }, onPointerLeave: function () { return setCurrentButtonIndex(null); } }, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'small' ? 20 : 24, fillType: iconFillType, colorKey: getIconColorKey(checkSelection(currentButtonValue), state === 'disabled' || buttonState === 'disabled', iconColorTheme) }), tooltipText &&
+            return ((0, jsx_runtime_1.jsxs)(S_BasicButton, __assign({ size: size, onClick: function () { return handleClick(currentButtonValue); }, onMouseDown: function () { return handleMouseDown(currentButtonValue); }, disabled: state === 'disabled' || buttonState === 'disabled', selectionType: selectionType, isSelected: checkSelection(currentButtonValue), backgroundColorTheme: backgroundColorTheme, onPointerEnter: function () { return setCurrentButtonIndex(index); }, onPointerLeave: function () { return setCurrentButtonIndex(null); } }, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'small' ? 20 : 24, fillType: iconFillType, colorKey: getIconColorKey(checkSelection(currentButtonValue), state === 'disabled' || buttonState === 'disabled', iconColorTheme) }), tooltipText &&
                         isCurrentButton &&
                         (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(S_TooltipWrapper, __assign({ className: "TooltipWrapper", ref: tooltipRef, tooltipPositionCss: tooltipPositionCss, size: size }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: tooltipText, colorOverride: "ui_cpnt_textlabel_button_tooltip", styleTheme: "caption2Regular", colorTheme: "sysTextSecondary" }) })), document.body)] }), String(currentButtonValue)));
         }) })));
@@ -180,10 +180,12 @@ var small = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 =
     return selectionType === 'single' && '10px';
 });
 var S_BasicButton = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border: none;\n  display: inline-flex;\n  justify-content: center;\n  position: relative;\n\n  ", ";\n\n  &::before {\n    background-color: transparent;\n    border-radius: inherit;\n    content: '';\n    height: 100%;\n    left: 0;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n\n  &:hover:enabled:before {\n    background-color: ", ";\n  }\n\n  &:active:enabled:before {\n    background-color: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    cursor: default;\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border: none;\n  display: inline-flex;\n  justify-content: center;\n  position: relative;\n\n  ", ";\n\n  &::before {\n    background-color: transparent;\n    border-radius: inherit;\n    content: '';\n    height: 100%;\n    left: 0;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n\n  &:hover:enabled:before {\n    background-color: ", ";\n  }\n\n  &:active:enabled:before {\n    background-color: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    cursor: default;\n  }\n"])), function (_a) {
-    var isSelected = _a.isSelected, theme = _a.theme;
-    return isSelected
-        ? theme.ui_cpnt_segmentedbuttongroup_base_selected
-        : theme.ui_cpnt_segmentedbuttongroup_base_default;
+    var isSelected = _a.isSelected, backgroundColorTheme = _a.backgroundColorTheme, theme = _a.theme;
+    if (isSelected)
+        return theme.ui_cpnt_segmentedbuttongroup_base_selected;
+    if (backgroundColorTheme)
+        return theme[backgroundColorTheme];
+    return theme.ui_cpnt_segmentedbuttongroup_base_default;
 }, function (_a) {
     var size = _a.size;
     return size && { large: large, medium: medium, small: small }[size];

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

@@ -1,10 +1,12 @@
-import type { PDSTextType } from '../../../common';
+import { Path } from 'react-hook-form';
+import type { IFormValues, PDSTextType } from '../../../common';
 import type { SelectHTMLAttributes } from 'react';
 type SelectOption = {
     text: string;
     value: SelectHTMLAttributes<HTMLSelectElement>['value'];
 };
 type SelectProps = {
+    name?: Path<IFormValues>;
     hintText?: PDSTextType;
     defaultValue?: SelectOption;
     value?: SelectOption['value'];
@@ -14,7 +16,10 @@ type SelectProps = {
     state?: 'normal' | 'read_only' | 'disabled';
     colorTheme?: 'none' | 'dark';
     customWidth?: string;
+    validation?: {
+        [key: string]: any;
+    };
     onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
 };
-declare function Select({ hintText, defaultValue, value, valueArray, size, responsiveMode, state, colorTheme, customWidth, onChange }: SelectProps): JSX.Element;
+declare function Select({ name, hintText, defaultValue, value, valueArray, size, responsiveMode, state, colorTheme, customWidth, validation, onChange }: SelectProps): JSX.Element;
 export default Select;