pds-dev-kit-web-test 0.2.23 → 0.2.24

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

@@ -6,12 +6,12 @@ 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 UIColor_json_1 = __importDefault(require("./UIColor.json"));
+var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
 var colorSet = {
     SemanticColor: SemanticColor_json_1.default,
     PaletteColor_Dark: PaletteColor_Dark_json_1.default,
-    PaletteColor_light: PaletteColor_light_json_1.default,
-    UIColor: UIColor_json_1.default
+    UIColor: UIColor_json_1.default,
+    PaletteColor_light: PaletteColor_light_json_1.default
 };
 exports.default = colorSet;

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

@@ -796,4 +796,38 @@ export interface UITheme {
     ui_cpnt_dropdown_display_icon_white_enabled: string;
     ui_cpnt_dropdown_display_icon_white_disabled: string;
     ui_98: string;
+    ui_99: string;
+    ui_100: string;
+    ui_101: string;
+    ui_102: string;
+    ui_editor_layout_header: string;
+    ui_editor_layout_navigation_panel: string;
+    ui_editor_layout_canvas_area: string;
+    ui_editor_layout_control_panel: string;
+    ui_editor_layout_property_panel: string;
+    ui_editor_layout_navigation_panel_section_item_area_normal: string;
+    ui_editor_scroll_bar: string;
+    ui_editor_scroll_track: string;
+    ui_sw_sidebar_base: string;
+    ui_sw_sidebar_label_text_normal: string;
+    ui_sw_sidebar_item_text_normal: string;
+    ui_sw_sidebar_item_text_selected: string;
+    ui_sw_sidebar_label_icon_normal_01: string;
+    ui_sw_sidebar_item_icon_normal: string;
+    ui_sw_sidebar_item_icon_selected: string;
+    ui_sw_sidebar_badge_base_01: string;
+    ui_sw_sidebar_badge_base_02: string;
+    ui_sw_sidebar_badge_text_01: string;
+    ui_sw_sidebar_badge_text_02: string;
+    ui_sw_sidebar_divider: string;
+    ui_sw_sidebar_label_base_normal: string;
+    ui_sw_sidebar_label_base_hover: string;
+    ui_sw_sidebar_label_base_pressed: string;
+    ui_sw_sidebar_item_base_normal: string;
+    ui_sw_sidebar_item_base_hover: string;
+    ui_sw_sidebar_item_base_pressed: string;
+    ui_sw_sidebar_label_icon_normal_02: string;
+    ui_104: string;
+    ui_sw_sidebar_item_text_disabled: string;
+    ui_106: string;
 }

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

@@ -1,3 +1,4 @@
+import type { FillIconNameKeys, LineIconNameKeys } from './icon';
 import type { PDSTextType } from './text';
 import type { ForwardedRef } from 'react';
 export declare type PDSValueOption = {
@@ -9,4 +10,36 @@ export declare type PDSTabItemOption = {
     isActive: boolean;
     onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
 };
+export declare type ContextMenuItemValueOption = {
+    text?: PDSTextType;
+    value: string | number | null | boolean;
+    iconName?: FillIconNameKeys | LineIconNameKeys;
+    iconFillType?: 'fill' | 'line';
+    fontWeight?: 'bold' | 'regular';
+};
+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';
+    tooltipText?: PDSTextType;
+    tooltipPosition?: 'left_top' | 'left_bottom' | 'center_top' | 'center_bottom' | 'right_top' | 'right_bottom';
+    iconColorTheme?: 'none' | 'red';
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    onMouseDown?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+};
+export declare type SegmentedButtonGroupValueOption = Pick<PDSValueOption, 'value'> & {
+    iconName: FillIconNameKeys | LineIconNameKeys;
+    iconFillType?: 'fill' | 'line';
+    state?: 'normal' | 'disabled';
+    iconColorTheme?: 'none' | 'red';
+    tooltipText?: PDSTextType;
+    tooltipPosition?: 'left_top' | 'left_bottom' | 'center_top' | 'center_bottom' | 'right_top' | 'right_bottom';
+};
 export declare type ForwardedRefType<T> = ForwardedRef<T | null>;

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

@@ -23,14 +23,18 @@ export declare type TextFieldBaseProps = {
     maxLength?: number;
     textSize: DesktopFontSize;
     textWeight: FontWeight;
-    fieldPadding?: string;
+    fieldPaddingRight?: number;
+    fieldPaddingLeft?: number;
     fieldHeight?: number;
     deleteIconMode?: 'none' | 'use';
     deleteIconSize?: 12 | 16 | 20 | 24;
     deleteIconColor?: UiColors;
+    suffixText?: PDSTextType;
+    suffixTextRightSpacingMode?: 'none' | 'use';
     isFocused?: boolean;
     autoComplete?: string;
     stepperMode?: 'none' | 'use';
+    stepperRightSpacing?: number;
     innerSpinButtonSize?: 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72;
     step?: number;
     onBlur?: (e: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement>) => void;
@@ -42,5 +46,5 @@ export declare 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, textPadding, fieldHeight, deleteIconMode, deleteIconSize, deleteIconColor, isFocused, autoComplete, stepperMode, 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, 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

@@ -50,15 +50,28 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable react/jsx-no-bind */
 var react_1 = require("react");
 var react_hook_form_1 = require("react-hook-form");
-var components_1 = require("../../../../hybrid/components");
+var components_1 = require("../../../components");
+var components_2 = require("../../../../hybrid/components");
 var styled_components_1 = __importStar(require("styled-components"));
 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, textPadding = _a.textPadding, _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, isFocused = _a.isFocused, _r = _a.autoComplete, autoComplete = _r === void 0 ? 'on' : _r, _s = _a.stepperMode, stepperMode = _s === void 0 ? 'none' : _s, innerSpinButtonSize = _a.innerSpinButtonSize, 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", "textPadding", "fieldHeight", "deleteIconMode", "deleteIconSize", "deleteIconColor", "isFocused", "autoComplete", "stepperMode", "innerSpinButtonSize", "step", "onBlur", "onChange", "onFocus", "onKeyDown", "onKeyUp", "onTarget", "inputRef"]);
-    var _t = (0, react_hook_form_1.useFormContext)(), register = _t.register, setValue = _t.setValue, getValues = _t.getValues, clearErrors = _t.clearErrors;
+    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 _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);
+    var _x = (0, react_1.useState)(0), suffixTextWidth = _x[0], setSuffixTextWidth = _x[1];
+    // NOTE suffixText가 변할때마다 suffixText가 차지하는 너비를 알아내어 suffixTextWidth에 담는다.
+    (0, react_1.useEffect)(function () {
+        var calculateDivWidth = function () {
+            if (suffixTextRef.current) {
+                var width = suffixTextRef.current.offsetWidth;
+                setSuffixTextWidth(width);
+            }
+        };
+        calculateDivWidth();
+    }, [suffixText]);
     (0, react_1.useEffect)(function () {
         return function () { return clearTimeout(timeout); };
     }, []);
@@ -119,7 +132,7 @@ function TextFieldBase(_a) {
         }
     }
     var textAreaRef = (0, react_1.useRef)(null);
-    var _u = register(name, validation), ref = _u.ref, refRest = __rest(_u, ["ref"]);
+    var _y = register(name, validation), ref = _y.ref, refRest = __rest(_y, ["ref"]);
     (0, react_1.useEffect)(function () {
         if (textAreaRef === null || textAreaRef.current === null) {
             return;
@@ -180,15 +193,15 @@ function TextFieldBase(_a) {
     }
     var S_TextFieldBase = function () {
         if (textLineType === 'single') {
-            return ((0, jsx_runtime_1.jsxs)(S_InputWrapper, { children: [(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, textPadding: textPadding, colorTheme: colorTheme, min: min, max: max, autoComplete: autoComplete, stepperMode: stepperMode, innerSpinButtonSize: innerSpinButtonSize, step: step, 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 }, void 0), (0, jsx_runtime_1.jsx)(components_2.Icon, { iconName: "ic_arrow_down_stepper", fillType: "fill", size: innerSpinButtonSize }, void 0)] }), void 0)), (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) {
                             ref(e);
                             if (inputRef) {
                                 inputRef.current = e;
                             }
-                        } }), void 0), stepperMode === 'use' && ((0, jsx_runtime_1.jsxs)(S_IconBox, __assign({ innerSpinButtonSize: innerSpinButtonSize }, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_up", fillType: "fill", size: innerSpinButtonSize }, void 0), (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_down", fillType: "fill", size: innerSpinButtonSize }, void 0)] }), void 0)), deleteIconMode === 'use' && isFocused && stepperMode === 'none' && ((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 }, void 0))] }, void 0));
+                        } }), void 0), (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 }, void 0)) }), void 0)), 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" }, void 0), (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" }, void 0), suffixTextRightSpacingMode === 'use' && ((0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_b", spacingType: "width" }, void 0))] }), void 0))] }), void 0))] }, void 0));
         }
         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, textPadding: textPadding, 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, ref: function (e) {
                     ref(e);
                     if (inputRef) {
                         inputRef.current = e;
@@ -196,7 +209,7 @@ function TextFieldBase(_a) {
                 } }), void 0));
         }
         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, textPadding: textPadding, 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, ref: function (e) {
                     ref(e);
                     if (textAreaRef) {
                         textAreaRef.current = e;
@@ -209,8 +222,54 @@ function TextFieldBase(_a) {
     };
     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: S_TextFieldBase() }, void 0);
 }
-var S_InputWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  position: relative;\n  width: 100%;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  position: relative;\n  width: 100%;\n"])));
-var read_only = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
+var stepper_and_delete_style = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  right: ", ";\n"], ["\n  position: absolute;\n  right: ", ";\n"])), function (_a) {
+    var innerSpinButtonSize = _a.innerSpinButtonSize, stepperRightSpacing = _a.stepperRightSpacing;
+    return innerSpinButtonSize && stepperRightSpacing && innerSpinButtonSize + stepperRightSpacing + "px";
+});
+var S_IconButtonWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", ";\n\n  ", "\n"], ["\n  ", ";\n\n  ", "\n"])), function (_a) {
+    var deleteIconMode = _a.deleteIconMode, stepperMode = _a.stepperMode, suffixText = _a.suffixText;
+    return deleteIconMode === 'use' && stepperMode === 'use' && !suffixText && stepper_and_delete_style;
+}, function (_a) {
+    var innerSpinButtonSize = _a.innerSpinButtonSize, deleteIconMode = _a.deleteIconMode, stepperMode = _a.stepperMode, suffixText = _a.suffixText, isFocused = _a.isFocused, suffixTextWidth = _a.suffixTextWidth, stepperRightSpacing = _a.stepperRightSpacing;
+    if (deleteIconMode === 'use' && stepperMode === 'use' && suffixText && stepperRightSpacing) {
+        if (isFocused) {
+            if (innerSpinButtonSize) {
+                if (innerSpinButtonSize + constants_1.DELETE_BUTTON_BASE_SIZE > suffixTextWidth) {
+                    return "margin-right: " + (innerSpinButtonSize - suffixTextWidth + stepperRightSpacing) + "px;";
+                }
+                return;
+            }
+            return;
+        }
+        return;
+    }
+    return;
+});
+var S_RightBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: ", ";\n  height: 100%;\n  display: flex;\n  align-items: center;\n  right: 0;\n"], ["\n  position: ", ";\n  height: 100%;\n  display: flex;\n  align-items: center;\n  right: 0;\n"])), function (_a) {
+    var deleteIconMode = _a.deleteIconMode, stepperMode = _a.stepperMode, suffixText = _a.suffixText;
+    if ((deleteIconMode === 'use' && stepperMode === 'use' && suffixText) ||
+        (deleteIconMode === 'use' && stepperMode === 'use') ||
+        stepperMode === 'use') {
+        return 'absolute';
+    }
+    return 'relative';
+});
+var S_IconBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n  height: ", ";\n  justify-content: center;\n  position: absolute;\n  right: ", ";\n  width: ", ";\n  visibility: hidden;\n\n  ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n  height: ", ";\n  justify-content: center;\n  position: absolute;\n  right: ", ";\n  width: ", ";\n  visibility: hidden;\n\n  ", ";\n"])), function (_a) {
+    var innerSpinButtonSize = _a.innerSpinButtonSize;
+    return innerSpinButtonSize && innerSpinButtonSize * 2 + "px";
+}, function (_a) {
+    var stepperRightSpacing = _a.stepperRightSpacing;
+    return stepperRightSpacing && stepperRightSpacing + "px";
+}, function (_a) {
+    var innerSpinButtonSize = _a.innerSpinButtonSize;
+    return innerSpinButtonSize && innerSpinButtonSize + "px";
+}, function (_a) {
+    var isFocused = _a.isFocused;
+    return isFocused && 'visibility: visible;';
+});
+var S_SuffixTextBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+var S_InputWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  position: relative;\n  width: 100%;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  position: relative;\n  width: 100%;\n"])));
+var read_only = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
     var theme = _a.theme, colorTheme = _a.colorTheme;
     return colorTheme &&
         {
@@ -219,7 +278,7 @@ var read_only = (0, styled_components_1.css)(templateObject_2 || (templateObject
             transparent: theme.ui_cpnt_textfield_text_colortheme_transparent_readonly
         }[colorTheme];
 });
-var disabled = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: ", ";\n  pointer-events: none;\n"], ["\n  color: ", ";\n  pointer-events: none;\n"])), function (_a) {
+var disabled = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  color: ", ";\n  pointer-events: none;\n"], ["\n  color: ", ";\n  pointer-events: none;\n"])), function (_a) {
     var theme = _a.theme, colorTheme = _a.colorTheme;
     return colorTheme &&
         {
@@ -228,7 +287,7 @@ var disabled = (0, styled_components_1.css)(templateObject_3 || (templateObject_
             transparent: theme.ui_cpnt_textfield_text_colortheme_transparent_disabled
         }[colorTheme];
 });
-var basicStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  color: ", ";\n  cursor: ", ";\n  display: inline-flex;\n  font-size: ", ";\n  font-weight: ", ";\n  height: 100%;\n  justify-content: center;\n  line-height: ", ";\n  outline: 0;\n  overflow: hidden;\n  padding: 0;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  text-align: ", ";\n  width: 100%;\n  &::placeholder {\n    color: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    line-height: ", ";\n  }\n\n  ", ";\n  ", "\n"], ["\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  color: ", ";\n  cursor: ", ";\n  display: inline-flex;\n  font-size: ", ";\n  font-weight: ", ";\n  height: 100%;\n  justify-content: center;\n  line-height: ", ";\n  outline: 0;\n  overflow: hidden;\n  padding: 0;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  text-align: ", ";\n  width: 100%;\n  &::placeholder {\n    color: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    line-height: ", ";\n  }\n\n  ", ";\n  ", "\n"])), function (_a) {
+var basicStyle = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  color: ", ";\n  cursor: ", ";\n  display: inline-flex;\n  font-size: ", ";\n  font-weight: ", ";\n  height: 100%;\n  justify-content: center;\n  line-height: ", ";\n  outline: 0;\n  overflow: hidden;\n  padding: 0;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  text-align: ", ";\n  width: 100%;\n  &::placeholder {\n    color: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    line-height: ", ";\n  }\n\n  ", ";\n  ", "\n  ", "\n\n  ", "\n"], ["\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  color: ", ";\n  cursor: ", ";\n  display: inline-flex;\n  font-size: ", ";\n  font-weight: ", ";\n  height: 100%;\n  justify-content: center;\n  line-height: ", ";\n  outline: 0;\n  overflow: hidden;\n  padding: 0;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  text-align: ", ";\n  width: 100%;\n  &::placeholder {\n    color: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    line-height: ", ";\n  }\n\n  ", ";\n  ", "\n  ", "\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme, colorTheme = _a.colorTheme;
     return colorTheme &&
         {
@@ -277,10 +336,105 @@ var basicStyle = (0, styled_components_1.css)(templateObject_4 || (templateObjec
             disabled: disabled
         }[state];
 }, function (_a) {
-    var textPadding = _a.textPadding;
-    return textPadding && "padding: " + textPadding + ";";
+    var fieldPaddingRight = _a.fieldPaddingRight;
+    return fieldPaddingRight && "padding-right: " + fieldPaddingRight + "px;";
+}, function (_a) {
+    var fieldPaddingLeft = _a.fieldPaddingLeft;
+    return fieldPaddingLeft && "padding-left: " + fieldPaddingLeft + "px;";
+}, function (_a) {
+    var deleteIconMode = _a.deleteIconMode, stepperMode = _a.stepperMode, suffixText = _a.suffixText;
+    if (deleteIconMode === 'use' && stepperMode === 'use' && suffixText) {
+        return delete_stepper_suffix;
+    }
+    if (deleteIconMode === 'use' && stepperMode === 'use' && !suffixText) {
+        return delete_stepper;
+    }
+    if (deleteIconMode === 'none' && stepperMode === 'use' && suffixText) {
+        return stepper_suffix;
+    }
+    if (deleteIconMode === 'none' && stepperMode === 'use' && !suffixText) {
+        return stepper;
+    }
+    return;
 });
-var inputInnerSpinButtonStyle = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  -webkit-appearance: none;\n  cursor: pointer;\n  height: ", ";\n  margin-left: ", ";\n  opacity: 1;\n  width: ", ";\n"], ["\n  -webkit-appearance: none;\n  cursor: pointer;\n  height: ", ";\n  margin-left: ", ";\n  opacity: 1;\n  width: ", ";\n"])), function (_a) {
+var delete_stepper_suffix = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  padding-right: ", ";\n"], ["\n  padding-right: ", ";\n"])), function (_a) {
+    var innerSpinButtonSize = _a.innerSpinButtonSize, fieldPaddingRight = _a.fieldPaddingRight, isFocused = _a.isFocused, suffixTextWidth = _a.suffixTextWidth, stepperRightSpacing = _a.stepperRightSpacing;
+    if (innerSpinButtonSize && stepperRightSpacing) {
+        if (isFocused) {
+            if (innerSpinButtonSize + constants_1.DELETE_BUTTON_BASE_SIZE + stepperRightSpacing <
+                constants_1.DELETE_BUTTON_BASE_SIZE + suffixTextWidth) {
+                if (fieldPaddingRight) {
+                    return constants_1.DELETE_BUTTON_BASE_SIZE + suffixTextWidth + fieldPaddingRight + "px";
+                }
+                return constants_1.DELETE_BUTTON_BASE_SIZE + suffixTextWidth + "px";
+            }
+            if (fieldPaddingRight) {
+                return constants_1.DELETE_BUTTON_BASE_SIZE + innerSpinButtonSize + fieldPaddingRight + stepperRightSpacing + "px";
+            }
+            return constants_1.DELETE_BUTTON_BASE_SIZE + innerSpinButtonSize + stepperRightSpacing + "px";
+        }
+        if (fieldPaddingRight) {
+            return suffixTextWidth + fieldPaddingRight + "px";
+        }
+        return suffixTextWidth + "px";
+    }
+    return;
+});
+var delete_stepper = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  padding-right: ", ";\n"], ["\n  padding-right: ", ";\n"])), function (_a) {
+    var innerSpinButtonSize = _a.innerSpinButtonSize, fieldPaddingRight = _a.fieldPaddingRight, isFocused = _a.isFocused, stepperRightSpacing = _a.stepperRightSpacing;
+    if (innerSpinButtonSize && stepperRightSpacing) {
+        if (isFocused) {
+            if (fieldPaddingRight) {
+                return innerSpinButtonSize + constants_1.DELETE_BUTTON_BASE_SIZE + fieldPaddingRight + stepperRightSpacing + "px";
+            }
+            return innerSpinButtonSize + constants_1.DELETE_BUTTON_BASE_SIZE + stepperRightSpacing + "px";
+        }
+        if (fieldPaddingRight) {
+            return fieldPaddingRight + "px";
+        }
+        return;
+    }
+    return;
+});
+var stepper_suffix = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  padding-right: ", ";\n"], ["\n  padding-right: ", ";\n"])), function (_a) {
+    var innerSpinButtonSize = _a.innerSpinButtonSize, fieldPaddingRight = _a.fieldPaddingRight, isFocused = _a.isFocused, suffixTextWidth = _a.suffixTextWidth, stepperRightSpacing = _a.stepperRightSpacing;
+    if (innerSpinButtonSize && stepperRightSpacing) {
+        if (isFocused) {
+            if (innerSpinButtonSize + stepperRightSpacing < suffixTextWidth) {
+                if (fieldPaddingRight) {
+                    return suffixTextWidth + fieldPaddingRight + "px";
+                }
+                return suffixTextWidth + "px";
+            }
+            if (fieldPaddingRight) {
+                return innerSpinButtonSize + stepperRightSpacing + fieldPaddingRight + "px";
+            }
+            return innerSpinButtonSize + stepperRightSpacing + "px";
+        }
+        if (fieldPaddingRight) {
+            return suffixTextWidth + fieldPaddingRight + "px";
+        }
+        return suffixTextWidth + "px";
+    }
+    return;
+});
+var stepper = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  padding-right: ", ";\n"], ["\n  padding-right: ", ";\n"])), function (_a) {
+    var innerSpinButtonSize = _a.innerSpinButtonSize, fieldPaddingRight = _a.fieldPaddingRight, isFocused = _a.isFocused, stepperRightSpacing = _a.stepperRightSpacing;
+    if (innerSpinButtonSize && stepperRightSpacing) {
+        if (isFocused) {
+            if (fieldPaddingRight) {
+                return innerSpinButtonSize + stepperRightSpacing + fieldPaddingRight + "px";
+            }
+            return innerSpinButtonSize + stepperRightSpacing + "px";
+        }
+        if (fieldPaddingRight) {
+            return fieldPaddingRight + "px";
+        }
+        return;
+    }
+    return;
+});
+var inputInnerSpinButtonStyle = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  -webkit-appearance: none;\n  z-index: 1;\n  cursor: pointer;\n  height: ", ";\n  margin-left: ", ";\n  opacity: 1;\n  width: ", ";\n  position: absolute;\n  right: ", ";\n  top: calc(\n    50% - ", "\n  );\n"], ["\n  -webkit-appearance: none;\n  z-index: 1;\n  cursor: pointer;\n  height: ", ";\n  margin-left: ", ";\n  opacity: 1;\n  width: ", ";\n  position: absolute;\n  right: ", ";\n  top: calc(\n    50% - ", "\n  );\n"])), function (_a) {
     var innerSpinButtonSize = _a.innerSpinButtonSize;
     return innerSpinButtonSize && innerSpinButtonSize * 2 + "px";
 }, function (_a) {
@@ -289,24 +443,23 @@ var inputInnerSpinButtonStyle = (0, styled_components_1.css)(templateObject_5 ||
 }, function (_a) {
     var innerSpinButtonSize = _a.innerSpinButtonSize;
     return innerSpinButtonSize && innerSpinButtonSize + "px";
+}, function (_a) {
+    var stepperRightSpacing = _a.stepperRightSpacing;
+    return stepperRightSpacing && stepperRightSpacing + "px";
+}, function (_a) {
+    var innerSpinButtonSize = _a.innerSpinButtonSize;
+    return innerSpinButtonSize && innerSpinButtonSize + "px";
 });
-var S_Input = styled_components_1.default.input(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", "\n  flex: 1;\n  line-height: ", ";\n  z-index: 20;\n\n  ::-webkit-inner-spin-button {\n    ", "\n  }\n  ::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"], ["\n  ", "\n  flex: 1;\n  line-height: ", ";\n  z-index: 20;\n\n  ::-webkit-inner-spin-button {\n    ", "\n  }\n  ::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"])), basicStyle, function (_a) {
+var S_Input = styled_components_1.default.input(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  ", "\n  flex: 1;\n  line-height: ", ";\n  position: relative;\n\n  ::-webkit-inner-spin-button {\n    ", "\n  }\n  ::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"], ["\n  ", "\n  flex: 1;\n  line-height: ", ";\n  position: relative;\n\n  ::-webkit-inner-spin-button {\n    ", "\n  }\n  ::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"])), basicStyle, function (_a) {
     var theme = _a.theme;
     return theme.desktopLineHeight.singleLine;
 }, function (_a) {
-    var stepperMode = _a.stepperMode, type = _a.type;
-    return stepperMode === 'use' && type === 'number'
+    var stepperMode = _a.stepperMode, type = _a.type, isFocused = _a.isFocused;
+    return stepperMode === 'use' && type === 'number' && isFocused
         ? inputInnerSpinButtonStyle
         : '-webkit-appearance: none; margin: 0;';
 });
-var S_IconBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n  height: ", ";\n  justify-content: center;\n  position: absolute;\n  right: ", "px;\n  width: ", ";\n  z-index: 1;\n"], ["\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n  height: ", ";\n  justify-content: center;\n  position: absolute;\n  right: ", "px;\n  width: ", ";\n  z-index: 1;\n"])), function (_a) {
-    var innerSpinButtonSize = _a.innerSpinButtonSize;
-    return innerSpinButtonSize && innerSpinButtonSize * 2 + "px";
-}, constants_1.PIXEL_FOR_ICONS_CENTER, function (_a) {
-    var innerSpinButtonSize = _a.innerSpinButtonSize;
-    return innerSpinButtonSize && innerSpinButtonSize + "px";
-});
-var S_Auto = styled_components_1.default.textarea(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  ", "\n  display: block;\n  overflow-y: auto;\n  resize: none;\n  ", "\n  ", ";\n"], ["\n  ", "\n  display: block;\n  overflow-y: auto;\n  resize: none;\n  ", "\n  ", ";\n"])), basicStyle, function (_a) {
+var S_Auto = styled_components_1.default.textarea(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  ", "\n  display: block;\n  overflow-y: auto;\n  resize: none;\n  ", "\n  ", ";\n"], ["\n  ", "\n  display: block;\n  overflow-y: auto;\n  resize: none;\n  ", "\n  ", ";\n"])), basicStyle, function (_a) {
     var autoMaxRows = _a.autoMaxRows, textSize = _a.textSize, fieldHeight = _a.fieldHeight;
     return autoMaxRows &&
         fieldHeight &&
@@ -321,6 +474,6 @@ var S_Auto = styled_components_1.default.textarea(templateObject_8 || (templateO
             Number(common_1.desktopLineHeight[textSize]) *
             autoMinRows + "px;";
 });
-var S_Multi = styled_components_1.default.textarea(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  ", "\n  display: block;\n  overflow-y: auto;\n  resize: none;\n"], ["\n  ", "\n  display: block;\n  overflow-y: auto;\n  resize: none;\n"])), basicStyle);
+var S_Multi = styled_components_1.default.textarea(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  ", "\n  display: block;\n  overflow-y: auto;\n  resize: none;\n"], ["\n  ", "\n  display: block;\n  overflow-y: auto;\n  resize: none;\n"])), basicStyle);
 exports.default = TextFieldBase;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
+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;

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

@@ -1 +1,2 @@
 export declare const PIXEL_FOR_ICONS_CENTER = 1;
+export declare const DELETE_BUTTON_BASE_SIZE = 32;

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

@@ -1,4 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PIXEL_FOR_ICONS_CENTER = void 0;
+exports.DELETE_BUTTON_BASE_SIZE = exports.PIXEL_FOR_ICONS_CENTER = void 0;
 exports.PIXEL_FOR_ICONS_CENTER = 1;
+exports.DELETE_BUTTON_BASE_SIZE = 32;

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.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { BasicButtonGroupValueOption } from '../../../common/types';
+export declare type BasicButtonGroupProps = {
+    size?: 'large' | 'medium' | 'small';
+    valueArray: BasicButtonGroupValueOption[];
+    state?: 'normal' | 'disabled';
+};
+declare function BasicButtonGroup({ size, valueArray, state }: BasicButtonGroupProps): JSX.Element;
+export default BasicButtonGroup;