pds-dev-kit-web 2.0.13 → 2.0.14

package/dist/src/common/assets/icons/line/DottedCircle.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type IconType from '../IconType';
+declare const DottedCircle: ({ color, size, ...rest }: IconType) => JSX.Element;
+export default DottedCircle;

package/dist/src/common/assets/icons/line/DottedCircle.js

@@ -0,0 +1,30 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var DottedCircle = function (_a) {
+    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsx)("g", __assign({ stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd" }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M7.7033,4.2616 C7.4343,4.2616 7.1743,4.1166 7.0393,3.8626 C6.8463,3.4956 6.9853,3.0426 7.3513,2.8486 C8.3203,2.3356 9.3453,1.9856 10.3983,1.8076 C10.8053,1.7346 11.1933,2.0126 11.2623,2.4216 C11.3313,2.8296 11.0573,3.2166 10.6483,3.2856 C9.7543,3.4376 8.8813,3.7366 8.0533,4.1746 C7.9413,4.2336 7.8213,4.2616 7.7033,4.2616 M16.3203,4.2736 C16.2023,4.2736 16.0823,4.2446 15.9703,4.1866 C15.1343,3.7426 14.2613,3.4416 13.3763,3.2886 C12.9683,3.2186 12.6943,2.8306 12.7643,2.4226 C12.8353,2.0146 13.2203,1.7446 13.6303,1.8106 C14.6723,1.9906 15.6963,2.3426 16.6723,2.8606 C17.0383,3.0546 17.1783,3.5086 16.9843,3.8746 C16.8493,4.1286 16.5893,4.2736 16.3203,4.2736 M20.5003,8.4246 C20.2273,8.4246 19.9643,8.2756 19.8313,8.0146 C19.4153,7.1976 18.8713,6.4496 18.2153,5.7926 C17.9233,5.4996 17.9233,5.0246 18.2163,4.7326 C18.5093,4.4386 18.9843,4.4396 19.2773,4.7326 C20.0443,5.5006 20.6803,6.3756 21.1683,7.3346 C21.3563,7.7036 21.2093,8.1556 20.8403,8.3426 C20.7313,8.3986 20.6153,8.4246 20.5003,8.4246 M3.5233,8.4306 C3.4043,8.4306 3.2843,8.4026 3.1713,8.3426 C2.8063,8.1476 2.6673,7.6936 2.8623,7.3276 C3.3643,6.3856 4.0073,5.5196 4.7743,4.7546 C5.0673,4.4626 5.5413,4.4616 5.8343,4.7566 C6.1273,5.0496 6.1263,5.5246 5.8333,5.8176 C5.1723,6.4766 4.6183,7.2216 4.1863,8.0326 C4.0513,8.2856 3.7913,8.4306 3.5233,8.4306 M2.5433,14.2276 C2.1843,14.2276 1.8663,13.9686 1.8053,13.6016 C1.7163,13.0766 1.6713,12.5406 1.6713,12.0096 C1.6713,11.4646 1.7183,10.9116 1.8123,10.3686 C1.8833,9.9616 2.2753,9.6926 2.6793,9.7576 C3.0873,9.8276 3.3613,10.2166 3.2903,10.6246 C3.2113,11.0826 3.1713,11.5486 3.1713,12.0096 C3.1713,12.4576 3.2093,12.9096 3.2843,13.3536 C3.3523,13.7616 3.0773,14.1486 2.6693,14.2166 C2.6263,14.2246 2.5853,14.2276 2.5433,14.2276 M21.4173,14.2436 C21.3783,14.2436 21.3393,14.2406 21.2993,14.2356 C20.8903,14.1706 20.6113,13.7856 20.6753,13.3766 C20.7473,12.9236 20.7833,12.4596 20.7843,11.9986 C20.7843,11.5406 20.7483,11.0796 20.6773,10.6276 C20.6123,10.2186 20.8923,9.8346 21.3013,9.7706 C21.7093,9.7136 22.0943,9.9866 22.1593,10.3956 C22.2423,10.9236 22.2843,11.4636 22.2843,11.9986 C22.2833,12.5376 22.2413,13.0796 22.1573,13.6116 C22.0993,13.9806 21.7803,14.2436 21.4173,14.2436 M5.2453,19.4756 C5.0433,19.4756 4.8413,19.3946 4.6933,19.2336 C3.9433,18.4186 3.3213,17.5486 2.8463,16.6466 C2.6523,16.2806 2.7933,15.8256 3.1593,15.6336 C3.5263,15.4386 3.9793,15.5796 4.1723,15.9476 C4.5883,16.7346 5.1343,17.4976 5.7973,18.2176 C6.0773,18.5226 6.0573,18.9966 5.7533,19.2776 C5.6093,19.4096 5.4273,19.4756 5.2453,19.4756 M18.7263,19.4956 C18.5373,19.4956 18.3493,19.4266 18.2063,19.2856 C17.9123,18.9976 17.8963,18.5356 18.1823,18.2406 C18.1923,18.2296 18.2223,18.1996 18.2323,18.1906 C18.8673,17.5556 19.4113,16.8086 19.8283,15.9896 C20.0163,15.6196 20.4683,15.4736 20.8373,15.6616 C21.2063,15.8496 21.3523,16.3016 21.1643,16.6706 C20.6753,17.6296 20.0383,18.5046 19.2713,19.2716 C19.1223,19.4206 18.9243,19.4956 18.7263,19.4956 M10.4873,22.1626 C10.4473,22.1626 10.4073,22.1596 10.3673,22.1536 C9.2973,21.9816 8.2683,21.6456 7.3093,21.1546 C6.9413,20.9646 6.7953,20.5126 6.9843,20.1446 C7.1733,19.7746 7.6253,19.6316 7.9943,19.8186 C8.8123,20.2386 9.6913,20.5256 10.6053,20.6726 C11.0143,20.7386 11.2923,21.1226 11.2263,21.5326 C11.1673,21.9006 10.8483,22.1626 10.4873,22.1626 M13.4673,22.1706 C13.1033,22.1706 12.7843,21.9066 12.7263,21.5346 C12.6633,21.1256 12.9433,20.7426 13.3533,20.6796 C14.2673,20.5376 15.1473,20.2556 15.9673,19.8396 C16.3363,19.6546 16.7883,19.8006 16.9753,20.1696 C17.1623,20.5386 17.0153,20.9906 16.6453,21.1776 C15.6843,21.6646 14.6533,21.9956 13.5823,22.1616 C13.5443,22.1676 13.5053,22.1706 13.4673,22.1706", fill: color }, void 0) }), void 0) }), void 0));
+};
+exports.default = DottedCircle;

package/dist/src/common/assets/icons/line/index.d.ts

@@ -52,6 +52,7 @@ declare const lineIcons: {
     readonly ic_device_app: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_device_desktop: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_device_mobile: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_dotted_circle: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_download: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_dynamic_layout: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_edit: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;

package/dist/src/common/assets/icons/line/index.js

@@ -55,6 +55,7 @@ var Developer_1 = __importDefault(require("./Developer"));
 var DeviceApp_1 = __importDefault(require("./DeviceApp"));
 var DeviceDesktop_1 = __importDefault(require("./DeviceDesktop"));
 var DeviceMobile_1 = __importDefault(require("./DeviceMobile"));
+var DottedCircle_1 = __importDefault(require("./DottedCircle"));
 var Download_1 = __importDefault(require("./Download"));
 var DynamicLayout_1 = __importDefault(require("./DynamicLayout"));
 var Edit_1 = __importDefault(require("./Edit"));
@@ -259,6 +260,7 @@ var lineIcons = {
     ic_device_app: DeviceApp_1.default,
     ic_device_desktop: DeviceDesktop_1.default,
     ic_device_mobile: DeviceMobile_1.default,
+    ic_dotted_circle: DottedCircle_1.default,
     ic_download: Download_1.default,
     ic_dynamic_layout: DynamicLayout_1.default,
     ic_edit: Edit_1.default,

package/dist/src/common/styles/colorSet/PaletteColor_Dark.json

@@ -279,7 +279,7 @@
     "sys_storyboard_card_base_red01": "red30",
     "sys_storyboard_card_base_green01": "green50",
     "sys_brand_secondary_variant": "darkgreen700",
-    "sys_button_tooltip_base": "white/opacity50",
+    "sys_button_tooltip_base": "white/opacity65",
     "sys_text_button_tooltip": "grey900",
     "sys_membership_button_base": "white/opacity20",
     "sys_membership_item_membership_base": "darkgrey50",
@@ -299,5 +299,17 @@
     "sys_text_warning_02": "darkbrown500",
     "sys_component_base_39": "darkyellow300",
     "sys_component_base_40": "darkorange50",
-    "sys_component_base_41": "darkskyblue100"
+    "sys_component_base_41": "darkskyblue100",
+    "sys_cpnt_slider_track": "darkgrey100",
+    "sys_cpnt_slider_track_active": "darkgrey900",
+    "sys_cpnt_slider_thumb_normal": "darkgrey900",
+    "sys_cpnt_slider_thumb_disabled": "darkgrey400",
+    "sys_cpnt_slider_thumb_hover_circle": "darkgrey900/opacity10",
+    "sys_cpnt_slider_thumb_pressed_circle": "darkgrey900/opacity20",
+    "sys_cpnt_slider_track_disabled": "darkgrey400",
+    "sys_component_base_42": "darkorange30",
+    "sys_component_base_43": "darkblue30",
+    "sys_icon_grey_darktheme_01": "darkgrey900",
+    "sys_icon_grey_darktheme_02": "darkgrey500",
+    "sys_icon_grey_darktheme_03": "darkgrey400"
 }

package/dist/src/common/styles/colorSet/PaletteColor_light.json

@@ -299,5 +299,17 @@
     "sys_text_warning_02": "brown500",
     "sys_component_base_39": "yellow300",
     "sys_component_base_40": "orange50",
-    "sys_component_base_41": "skyblue100"
+    "sys_component_base_41": "skyblue100",
+    "sys_cpnt_slider_track": "grey100",
+    "sys_cpnt_slider_track_active": "grey900",
+    "sys_cpnt_slider_thumb_normal": "grey900",
+    "sys_cpnt_slider_thumb_disabled": "grey400",
+    "sys_cpnt_slider_thumb_hover_circle": "grey900/opacity10",
+    "sys_cpnt_slider_thumb_pressed_circle": "grey900/opacity20",
+    "sys_cpnt_slider_track_disabled": "grey400",
+    "sys_component_base_42": "orange30",
+    "sys_component_base_43": "blue30",
+    "sys_icon_grey_darktheme_01": "darkgrey900",
+    "sys_icon_grey_darktheme_02": "darkgrey500",
+    "sys_icon_grey_darktheme_03": "darkgrey400"
 }

package/dist/src/common/styles/colorSet/UIColor.json

@@ -769,5 +769,30 @@
     "ui_cpnt_sheet_base_20": "sys_component_base_39",
     "ui_cpnt_sheet_base_21": "sys_component_base_32",
     "ui_cpnt_sheet_base_22": "sys_component_base_40",
-    "ui_cpnt_sheet_base_23": "sys_component_base_41"
+    "ui_cpnt_sheet_base_23": "sys_component_base_41",
+    "ui_cpnt_slider_track": "sys_cpnt_slider_track",
+    "ui_cpnt_slider_track_active": "sys_cpnt_slider_track_active",
+    "ui_cpnt_slider_thumb_normal": "sys_cpnt_slider_thumb_normal",
+    "ui_cpnt_slider_thumb_disabled": "sys_cpnt_slider_thumb_disabled",
+    "ui_cpnt_slider_thumb_hover_circle": "sys_cpnt_slider_thumb_hover_circle",
+    "ui_cpnt_slider_thumb_pressed_circle": "sys_cpnt_slider_thumb_pressed_circle",
+    "ui_cpnt_slider_track_disabled": "sys_cpnt_slider_track_disabled",
+    "ui_cpnt_basicbuttongroup_base_default": "sys_component_base_01",
+    "ui_cpnt_basicbuttongroup_on_base_hover": "sys_component_on_base_01",
+    "ui_cpnt_basicbuttongroup_on_base_pressed": "sys_component_on_base_02",
+    "ui_cpnt_basicbuttongroup_base_disabled": "sys_component_base_03",
+    "ui_cpnt_segmentedbuttongroup_base_default": "sys_component_base_01",
+    "ui_cpnt_segmentedbuttongroup_on_base_hover": "sys_component_on_base_01",
+    "ui_cpnt_segmentedbuttongroup_on_base_pressed": "sys_component_on_base_02",
+    "ui_cpnt_segmentedbuttongroup_base_disabled": "sys_component_base_03",
+    "ui_cpnt_segmentedbuttongroup_base_selected": "usr_brand_primary",
+    "ui_cpnt_sheet_base_24": "sys_component_base_42",
+    "ui_cpnt_sheet_base_25": "sys_component_base_11",
+    "ui_cpnt_sheet_base_26": "sys_component_base_43",
+    "ui_cpnt_dropdown_display_icon_normal": "sys_widget_grey_01",
+    "ui_cpnt_dropdown_display_icon_disabled": "sys_widget_grey_03",
+    "ui_cpnt_dropdown_display_icon_darktheme_enabled": "sys_icon_grey_darktheme_01",
+    "ui_cpnt_dropdown_display_icon_darktheme_disabled": "sys_icon_grey_darktheme_03",
+    "ui_cpnt_dropdown_display_icon_white_enabled": "sys_widget_white",
+    "ui_cpnt_dropdown_display_icon_white_disabled": "sys_widget_grey_03"
 }

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

@@ -117,7 +117,7 @@ declare const colorSet: {
         grey20: string;
         darkgrey20: string;
     };
-    readonly PaletteColor_Dark: {
+    readonly PaletteColor_light: {
         sys_container_background_01: string;
         sys_container_background_02: string;
         sys_container_background_03: string;
@@ -419,8 +419,20 @@ declare const colorSet: {
         sys_component_base_39: string;
         sys_component_base_40: string;
         sys_component_base_41: string;
+        sys_cpnt_slider_track: string;
+        sys_cpnt_slider_track_active: string;
+        sys_cpnt_slider_thumb_normal: string;
+        sys_cpnt_slider_thumb_disabled: string;
+        sys_cpnt_slider_thumb_hover_circle: string;
+        sys_cpnt_slider_thumb_pressed_circle: string;
+        sys_cpnt_slider_track_disabled: string;
+        sys_component_base_42: string;
+        sys_component_base_43: string;
+        sys_icon_grey_darktheme_01: string;
+        sys_icon_grey_darktheme_02: string;
+        sys_icon_grey_darktheme_03: string;
     };
-    readonly PaletteColor_light: {
+    readonly PaletteColor_Dark: {
         sys_container_background_01: string;
         sys_container_background_02: string;
         sys_container_background_03: string;
@@ -722,6 +734,18 @@ declare const colorSet: {
         sys_component_base_39: string;
         sys_component_base_40: string;
         sys_component_base_41: string;
+        sys_cpnt_slider_track: string;
+        sys_cpnt_slider_track_active: string;
+        sys_cpnt_slider_thumb_normal: string;
+        sys_cpnt_slider_thumb_disabled: string;
+        sys_cpnt_slider_thumb_hover_circle: string;
+        sys_cpnt_slider_thumb_pressed_circle: string;
+        sys_cpnt_slider_track_disabled: string;
+        sys_component_base_42: string;
+        sys_component_base_43: string;
+        sys_icon_grey_darktheme_01: string;
+        sys_icon_grey_darktheme_02: string;
+        sys_icon_grey_darktheme_03: string;
     };
     readonly UIColor: {
         ui_cpnt_button_fill_base_primary: string;
@@ -1495,6 +1519,31 @@ declare const colorSet: {
         ui_cpnt_sheet_base_21: string;
         ui_cpnt_sheet_base_22: string;
         ui_cpnt_sheet_base_23: string;
+        ui_cpnt_slider_track: string;
+        ui_cpnt_slider_track_active: string;
+        ui_cpnt_slider_thumb_normal: string;
+        ui_cpnt_slider_thumb_disabled: string;
+        ui_cpnt_slider_thumb_hover_circle: string;
+        ui_cpnt_slider_thumb_pressed_circle: string;
+        ui_cpnt_slider_track_disabled: string;
+        ui_cpnt_basicbuttongroup_base_default: string;
+        ui_cpnt_basicbuttongroup_on_base_hover: string;
+        ui_cpnt_basicbuttongroup_on_base_pressed: string;
+        ui_cpnt_basicbuttongroup_base_disabled: string;
+        ui_cpnt_segmentedbuttongroup_base_default: string;
+        ui_cpnt_segmentedbuttongroup_on_base_hover: string;
+        ui_cpnt_segmentedbuttongroup_on_base_pressed: string;
+        ui_cpnt_segmentedbuttongroup_base_disabled: string;
+        ui_cpnt_segmentedbuttongroup_base_selected: string;
+        ui_cpnt_sheet_base_24: string;
+        ui_cpnt_sheet_base_25: string;
+        ui_cpnt_sheet_base_26: string;
+        ui_cpnt_dropdown_display_icon_normal: string;
+        ui_cpnt_dropdown_display_icon_disabled: string;
+        ui_cpnt_dropdown_display_icon_darktheme_enabled: string;
+        ui_cpnt_dropdown_display_icon_darktheme_disabled: string;
+        ui_cpnt_dropdown_display_icon_white_enabled: string;
+        ui_cpnt_dropdown_display_icon_white_disabled: 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

@@ -770,4 +770,29 @@ export interface UITheme {
     ui_cpnt_sheet_base_21: string;
     ui_cpnt_sheet_base_22: string;
     ui_cpnt_sheet_base_23: string;
+    ui_cpnt_slider_track: string;
+    ui_cpnt_slider_track_active: string;
+    ui_cpnt_slider_thumb_normal: string;
+    ui_cpnt_slider_thumb_disabled: string;
+    ui_cpnt_slider_thumb_hover_circle: string;
+    ui_cpnt_slider_thumb_pressed_circle: string;
+    ui_cpnt_slider_track_disabled: string;
+    ui_cpnt_basicbuttongroup_base_default: string;
+    ui_cpnt_basicbuttongroup_on_base_hover: string;
+    ui_cpnt_basicbuttongroup_on_base_pressed: string;
+    ui_cpnt_basicbuttongroup_base_disabled: string;
+    ui_cpnt_segmentedbuttongroup_base_default: string;
+    ui_cpnt_segmentedbuttongroup_on_base_hover: string;
+    ui_cpnt_segmentedbuttongroup_on_base_pressed: string;
+    ui_cpnt_segmentedbuttongroup_base_disabled: string;
+    ui_cpnt_segmentedbuttongroup_base_selected: string;
+    ui_cpnt_sheet_base_24: string;
+    ui_cpnt_sheet_base_25: string;
+    ui_cpnt_sheet_base_26: string;
+    ui_cpnt_dropdown_display_icon_normal: string;
+    ui_cpnt_dropdown_display_icon_disabled: string;
+    ui_cpnt_dropdown_display_icon_darktheme_enabled: string;
+    ui_cpnt_dropdown_display_icon_darktheme_disabled: string;
+    ui_cpnt_dropdown_display_icon_white_enabled: string;
+    ui_cpnt_dropdown_display_icon_white_disabled: string;
 }

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

@@ -30,6 +30,9 @@ export declare type TextFieldBaseProps = {
     deleteIconColor?: UiColors;
     isFocused?: boolean;
     autoComplete?: string;
+    stepperMode?: 'none' | 'use';
+    innerSpinButtonSize?: 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72;
+    step?: number;
     onBlur?: (e: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement>) => void;
     onChange?: (e: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => void;
     onFocus?: (e: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement>) => void;
@@ -39,5 +42,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, 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, textPadding, fieldHeight, deleteIconMode, deleteIconSize, deleteIconColor, isFocused, autoComplete, stepperMode, 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

@@ -46,15 +46,18 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable better-styled-components/sort-declarations-alphabetically */
 /* 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 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, 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", "onBlur", "onChange", "onFocus", "onKeyDown", "onKeyUp", "onTarget", "inputRef"]);
-    var _s = (0, react_hook_form_1.useFormContext)(), register = _s.register, setValue = _s.setValue, getValues = _s.getValues, clearErrors = _s.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, 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 timeout;
     (0, react_1.useEffect)(function () {
         return function () { return clearTimeout(timeout); };
@@ -116,7 +119,7 @@ function TextFieldBase(_a) {
         }
     }
     var textAreaRef = (0, react_1.useRef)(null);
-    var _t = register(name, validation), ref = _t.ref, refRest = __rest(_t, ["ref"]);
+    var _u = register(name, validation), ref = _u.ref, refRest = __rest(_u, ["ref"]);
     (0, react_1.useEffect)(function () {
         if (textAreaRef === null || textAreaRef.current === null) {
             return;
@@ -177,12 +180,12 @@ 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, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, ref: function (e) {
+            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) {
                             ref(e);
                             if (inputRef) {
                                 inputRef.current = e;
                             }
-                        } }), void 0), deleteIconMode === 'use' && 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));
+                        } }), 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));
         }
         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) {
@@ -206,7 +209,7 @@ 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  width: 100%;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  width: 100%;\n"])));
+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 theme = _a.theme, colorTheme = _a.colorTheme;
     return colorTheme &&
@@ -225,7 +228,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  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\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  text-align: ", ";\n  width: 100%;\n  &::placeholder {\n    color: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    line-height: ", ";\n  }\n\n  ", ";\n  ", "\n"], ["\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\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  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_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 theme = _a.theme, colorTheme = _a.colorTheme;
     return colorTheme &&
         {
@@ -277,11 +280,33 @@ var basicStyle = (0, styled_components_1.css)(templateObject_4 || (templateObjec
     var textPadding = _a.textPadding;
     return textPadding && "padding: " + textPadding + ";";
 });
-var S_Input = styled_components_1.default.input(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n  flex: 1;\n  line-height: ", ";\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  ::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"], ["\n  ", "\n  flex: 1;\n  line-height: ", ";\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  ::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"])), basicStyle, function (_a) {
+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 innerSpinButtonSize = _a.innerSpinButtonSize;
+    return innerSpinButtonSize && innerSpinButtonSize * 2 + "px";
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingB;
+}, 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 theme = _a.theme;
     return theme.desktopLineHeight.singleLine;
+}, function (_a) {
+    var stepperMode = _a.stepperMode, type = _a.type;
+    return stepperMode === 'use' && type === 'number'
+        ? 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_6 || (templateObject_6 = __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_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 autoMaxRows = _a.autoMaxRows, textSize = _a.textSize, fieldHeight = _a.fieldHeight;
     return autoMaxRows &&
         fieldHeight &&
@@ -296,6 +321,6 @@ var S_Auto = styled_components_1.default.textarea(templateObject_6 || (templateO
             Number(common_1.desktopLineHeight[textSize]) *
             autoMinRows + "px;";
 });
-var S_Multi = styled_components_1.default.textarea(templateObject_7 || (templateObject_7 = __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_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);
 exports.default = TextFieldBase;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

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

@@ -0,0 +1 @@
+export declare const PIXEL_FOR_ICONS_CENTER = 1;

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

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

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

@@ -1,6 +1,8 @@
 /// <reference types="react" />
-import type { FillIconNameKeys, LineIconNameKeys, UiColors } from '../../../common';
+import type { FillIconNameKeys, LineIconNameKeys, PDSTextType, UiColors } from '../../../common';
 export declare type IconButtonProps = {
+    tooltipText?: PDSTextType;
+    tooltipPosition?: 'left_top' | 'left_bottom' | 'center_top' | 'center_bottom' | 'right_top' | 'right_bottom';
     fillType?: 'fill' | 'line';
     shapeType?: 'circular' | 'rectangle';
     baseSize?: 'xxlarge' | 'large' | 'medium' | 'small' | 'xsmall';
@@ -18,5 +20,5 @@ export declare type IconButtonProps = {
     onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     onMouseDown?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 };
-declare function IconButton({ fillType, shapeType, baseSize, baseColorKey, borderColorKey, iconSize, iconFillType, iconName, iconColorKey, shadow, colorTheme, type, state, tabIndex, onClick, onMouseDown }: IconButtonProps): JSX.Element;
+declare function IconButton({ tooltipText, tooltipPosition, fillType, shapeType, baseSize, baseColorKey, borderColorKey, iconSize, iconFillType, iconName, iconColorKey, shadow, colorTheme, type, state, tabIndex, onClick, onMouseDown }: IconButtonProps): JSX.Element;
 export default IconButton;

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

@@ -35,11 +35,18 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var styled_components_1 = __importStar(require("styled-components"));
 var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
 var hybrid_1 = require("../../../hybrid");
+var TextLabel_1 = require("../TextLabel");
+var constants_1 = require("./constants");
 function IconButton(_a) {
-    var _b = _a.fillType, fillType = _b === void 0 ? 'fill' : _b, _c = _a.shapeType, shapeType = _c === void 0 ? 'rectangle' : _c, _d = _a.baseSize, baseSize = _d === void 0 ? 'small' : _d, baseColorKey = _a.baseColorKey, borderColorKey = _a.borderColorKey, _e = _a.iconSize, iconSize = _e === void 0 ? 24 : _e, _f = _a.iconFillType, iconFillType = _f === void 0 ? 'line' : _f, iconName = _a.iconName, iconColorKey = _a.iconColorKey, _g = _a.shadow, shadow = _g === void 0 ? 'hidden' : _g, _h = _a.colorTheme, colorTheme = _h === void 0 ? 'none' : _h, _j = _a.type, type = _j === void 0 ? 'button' : _j, _k = _a.state, state = _k === void 0 ? 'normal' : _k, tabIndex = _a.tabIndex, onClick = _a.onClick, onMouseDown = _a.onMouseDown;
+    var tooltipText = _a.tooltipText, _b = _a.tooltipPosition, tooltipPosition = _b === void 0 ? 'center_bottom' : _b, _c = _a.fillType, fillType = _c === void 0 ? 'fill' : _c, _d = _a.shapeType, shapeType = _d === void 0 ? 'rectangle' : _d, _e = _a.baseSize, baseSize = _e === void 0 ? 'small' : _e, baseColorKey = _a.baseColorKey, borderColorKey = _a.borderColorKey, _f = _a.iconSize, iconSize = _f === void 0 ? 24 : _f, _g = _a.iconFillType, iconFillType = _g === void 0 ? 'line' : _g, iconName = _a.iconName, iconColorKey = _a.iconColorKey, _h = _a.shadow, shadow = _h === void 0 ? 'hidden' : _h, _j = _a.colorTheme, colorTheme = _j === void 0 ? 'none' : _j, _k = _a.type, type = _k === void 0 ? 'button' : _k, _l = _a.state, state = _l === void 0 ? 'normal' : _l, tabIndex = _a.tabIndex, onClick = _a.onClick, onMouseDown = _a.onMouseDown;
+    var _m = (0, react_1.useState)(false), isTooltipOpen = _m[0], setIsTooltipOpen = _m[1];
+    var handleTooltipToggle = function (value) {
+        setIsTooltipOpen(value);
+    };
     var handleClick = function (e) {
         if (onClick) {
             onClick(e);
@@ -73,7 +80,7 @@ function IconButton(_a) {
         }
         return iconStateColorObj[fillType];
     };
-    return ((0, jsx_runtime_1.jsx)(S_IconButton, __assign({ "x-pds-name": "IconButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", fillType: fillType, shapeType: shapeType, baseSize: baseSize, baseColorKey: baseColorKey, borderColorKey: borderColorKey, shadow: shadow, colorTheme: colorTheme, type: type, state: state, disabled: state === 'disabled', tabIndex: tabIndex, onClick: handleClick, onMouseDown: handleMouseDown }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: iconName, size: iconSize, colorKey: IconColorSelect(), fillType: iconFillType }, void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsxs)(S_IconButton, __assign({ "x-pds-name": "IconButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", fillType: fillType, shapeType: shapeType, baseSize: baseSize, baseColorKey: baseColorKey, borderColorKey: borderColorKey, shadow: shadow, colorTheme: colorTheme, type: type, state: state, disabled: state === 'disabled', tabIndex: tabIndex, onClick: handleClick, onMouseDown: handleMouseDown, onMouseEnter: function () { return tooltipText && handleTooltipToggle(true); }, onMouseLeave: function () { return tooltipText && handleTooltipToggle(false); } }, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: iconName, size: iconSize, colorKey: IconColorSelect(), fillType: iconFillType }, void 0), tooltipText && isTooltipOpen && ((0, jsx_runtime_1.jsx)(S_TooltipWrapper, __assign({ className: "TooltipWrapper", isTooltipOpen: isTooltipOpen, tooltipPosition: tooltipPosition, baseSize: baseSize }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: tooltipText, colorOverride: "ui_cpnt_textlabel_button_tooltip", styleTheme: "caption2Regular", colorTheme: "sysTextSecondary" }, void 0) }), void 0))] }), void 0));
 }
 var fillDisabled = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var theme = _a.theme, baseColorKey = _a.baseColorKey;
@@ -81,7 +88,7 @@ var fillDisabled = (0, styled_components_1.css)(templateObject_1 || (templateObj
         ? ''
         : theme.ui_cpnt_button_fill_base_disabled;
 });
-var fill = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    ", "\n  }\n\n  &:hover:enabled::before {\n    background-color: ", ";\n  }\n\n  &:active:enabled::before {\n    background-color: ", ";\n  }\n\n  ", ";\n"], ["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    ", "\n  }\n\n  &:hover:enabled::before {\n    background-color: ", ";\n  }\n\n  &:active:enabled::before {\n    background-color: ", ";\n  }\n\n  ", ";\n"])), function (_a) {
+var fill = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    background-color: transparent;\n    border-radius: inherit;\n    content: '';\n    height: 100%;\n    position: absolute;\n    width: 100%;\n    ", "\n  }\n\n  &:hover:enabled::before {\n    background-color: ", ";\n  }\n\n  &:active:enabled::before {\n    background-color: ", ";\n  }\n\n  ", ";\n"], ["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    background-color: transparent;\n    border-radius: inherit;\n    content: '';\n    height: 100%;\n    position: absolute;\n    width: 100%;\n    ", "\n  }\n\n  &:hover:enabled::before {\n    background-color: ", ";\n  }\n\n  &:active:enabled::before {\n    background-color: ", ";\n  }\n\n  ", ";\n"])), function (_a) {
     var theme = _a.theme, baseColorKey = _a.baseColorKey;
     return baseColorKey ? theme[baseColorKey] : theme.ui_cpnt_button_fill_base_primary;
 }, transitionStyle_1.ButtonTransition, function (_a) {
@@ -172,5 +179,46 @@ var iconButtonStyle = (0, styled_components_1.css)(templateObject_12 || (templat
         }[baseSize];
 });
 var S_IconButton = styled_components_1.default.button(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), iconButtonStyle);
+var tooltipPositionSpacing = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
+    var baseSize = _a.baseSize;
+    return baseSize &&
+        {
+            xxlarge: constants_1.TOOLTIP_POSITION_SPACING.xxlarge,
+            large: constants_1.TOOLTIP_POSITION_SPACING.large,
+            medium: constants_1.TOOLTIP_POSITION_SPACING.medium,
+            small: constants_1.TOOLTIP_POSITION_SPACING.small,
+            xsmall: constants_1.TOOLTIP_POSITION_SPACING.xsmall
+        }[baseSize];
+});
+var tooltipLeftTop = (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  bottom: ", ";\n  right: 0;\n"], ["\n  bottom: ", ";\n  right: 0;\n"])), tooltipPositionSpacing);
+var tooltipLeftBottom = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  right: 0;\n  top: ", ";\n"], ["\n  right: 0;\n  top: ", ";\n"])), tooltipPositionSpacing);
+var tooltipCenterTop = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  bottom: ", ";\n"], ["\n  bottom: ", ";\n"])), tooltipPositionSpacing);
+var tooltipCenterBottom = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  top: ", ";\n"], ["\n  top: ", ";\n"])), tooltipPositionSpacing);
+var tooltipRightTop = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  bottom: ", ";\n  left: 0;\n"], ["\n  bottom: ", ";\n  left: 0;\n"])), tooltipPositionSpacing);
+var tooltipRightBottom = (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  left: 0;\n  top: ", ";\n"], ["\n  left: 0;\n  top: ", ";\n"])), tooltipPositionSpacing);
+var S_TooltipWrapper = styled_components_1.default.div(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  padding: ", ";\n  position: absolute;\n  width: max-content;\n  z-index: 400;\n\n  ", ";\n\n  ", "\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  padding: ", ";\n  position: absolute;\n  width: max-content;\n  z-index: 400;\n\n  ", ";\n\n  ", "\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_tooltip_base;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingA;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingA + " " + theme.spacing.spacingB;
+}, function (_a) {
+    var isTooltipOpen = _a.isTooltipOpen;
+    return !isTooltipOpen && 'display: none';
+}, function (_a) {
+    var tooltipPosition = _a.tooltipPosition;
+    return tooltipPosition &&
+        {
+            left_top: tooltipLeftTop,
+            left_bottom: tooltipLeftBottom,
+            center_top: tooltipCenterTop,
+            center_bottom: tooltipCenterBottom,
+            right_top: tooltipRightTop,
+            right_bottom: tooltipRightBottom
+        }[tooltipPosition];
+});
 exports.default = IconButton;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21;

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

@@ -0,0 +1,15 @@
+export declare const ICON_BUTTON_SIZE: {
+    xxlarge: number;
+    large: number;
+    medium: number;
+    small: number;
+    xsmall: number;
+};
+export declare const ICON_BUTTON_TOOLTIP_SPACING = 8;
+export declare const TOOLTIP_POSITION_SPACING: {
+    xxlarge: string;
+    large: string;
+    medium: string;
+    small: string;
+    xsmall: string;
+};

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

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TOOLTIP_POSITION_SPACING = exports.ICON_BUTTON_TOOLTIP_SPACING = exports.ICON_BUTTON_SIZE = void 0;
+exports.ICON_BUTTON_SIZE = {
+    xxlarge: 96,
+    large: 48,
+    medium: 40,
+    small: 32,
+    xsmall: 24
+};
+exports.ICON_BUTTON_TOOLTIP_SPACING = 8;
+// NOTE - iconSize 크기에 따라 위치를 이동시켜주고, iconButtonSize에 간격까지 8px을 추가해준 값입니다.(IconButton과 tooltip의 간격)
+exports.TOOLTIP_POSITION_SPACING = {
+    xxlarge: "calc(" + exports.ICON_BUTTON_SIZE.xxlarge + "px + " + exports.ICON_BUTTON_TOOLTIP_SPACING + "px)",
+    large: "calc(" + exports.ICON_BUTTON_SIZE.large + "px + " + exports.ICON_BUTTON_TOOLTIP_SPACING + "px)",
+    medium: "calc(" + exports.ICON_BUTTON_SIZE.medium + "px + " + exports.ICON_BUTTON_TOOLTIP_SPACING + "px)",
+    small: "calc(" + exports.ICON_BUTTON_SIZE.small + "px + " + exports.ICON_BUTTON_TOOLTIP_SPACING + "px)",
+    xsmall: "calc(" + exports.ICON_BUTTON_SIZE.xsmall + "px + " + exports.ICON_BUTTON_TOOLTIP_SPACING + "px)"
+};

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

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