pds-dev-kit-web 2.2.260 → 2.2.262-beta.0

package/dist/src/common/services/i18n/resources/en.json

@@ -103,6 +103,7 @@
         "str_9070": "If Spanish is not entered, members will see the content in English.",
         "str_upload": "Upload",
         "str_delete": "Delete",
+        "str_9617": "Select year",
         "str_reaction": "Reaction"
     }
 }

package/dist/src/common/services/i18n/resources/es.json

@@ -103,6 +103,7 @@
         "str_9070": "Si no ingresa en español, se mostrará a los miembros en inglés.",
         "str_upload": "Subir",
         "str_delete": "borrar",
+        "str_9617": "Seleccionar año",
         "str_reaction": "Reaction"
     }
 }

package/dist/src/common/services/i18n/resources/fil.json

@@ -96,6 +96,7 @@
         "str_friendly_currency_dollar": "dolyar",
         "str_upload": "Upload",
         "str_delete": "Tanggalin",
+        "str_9617": "Pumili ng taon",
         "str_reaction": "Reaction"
     }
 }

package/dist/src/common/services/i18n/resources/index.d.ts

@@ -105,6 +105,7 @@ declare const locale: {
             str_9070: string;
             str_upload: string;
             str_delete: string;
+            str_9617: string;
             str_reaction: string;
         };
     };
@@ -213,6 +214,7 @@ declare const locale: {
             str_9070: string;
             str_upload: string;
             str_delete: string;
+            str_9617: string;
             str_reaction: string;
         };
     };
@@ -321,6 +323,7 @@ declare const locale: {
             str_9070: string;
             str_upload: string;
             str_delete: string;
+            str_9617: string;
             str_reaction: string;
         };
     };
@@ -429,6 +432,7 @@ declare const locale: {
             str_9070: string;
             str_upload: string;
             str_delete: string;
+            str_9617: string;
             str_reaction: string;
         };
     };
@@ -537,6 +541,7 @@ declare const locale: {
             str_9070: string;
             str_upload: string;
             str_delete: string;
+            str_9617: string;
             str_reaction: string;
         };
     };
@@ -645,6 +650,7 @@ declare const locale: {
             str_9070: string;
             str_upload: string;
             str_delete: string;
+            str_9617: string;
             str_reaction: string;
         };
     };
@@ -746,6 +752,7 @@ declare const locale: {
             str_friendly_currency_dollar: string;
             str_upload: string;
             str_delete: string;
+            str_9617: string;
             str_reaction: string;
         };
     };

package/dist/src/common/services/i18n/resources/ja.json

@@ -103,6 +103,7 @@
         "str_9070": "スペイン語を入力しないと、会員に英語で表示されます。",
         "str_upload": "アップロード",
         "str_delete": "削除",
+        "str_9617": "年を選択",
         "str_reaction": "Reaction"
     }
 }

package/dist/src/common/services/i18n/resources/ko.json

@@ -104,6 +104,7 @@
         "str_9070": "스페인어를 입력하지 않을 경우, 회원에게 영어로 보여집니다.",
         "str_upload": "업로드",
         "str_delete": "삭제",
+        "str_9617": "연도 선택",
         "str_reaction": "반응"
     }
 }

package/dist/src/common/services/i18n/resources/zh-cn.json

@@ -103,6 +103,7 @@
         "str_9070": "如果您不输入西班牙语，它将以英文显示给会员。",
         "str_upload": "上传",
         "str_delete": "删除",
+        "str_9617": "选择年份",
         "str_reaction": "Reaction"
     }
 }

package/dist/src/common/services/i18n/resources/zh-tw.json

@@ -103,6 +103,7 @@
         "str_9070": "如果您不輸入西班牙語，則以英文顯示給會員。",
         "str_upload": "上傳",
         "str_delete": "刪除",
+        "str_9617": "選擇年份",
         "str_reaction": "Reaction"
     }
 }

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

@@ -379,6 +379,5 @@
     "sys_component_border_01": "grey100/opacity50",
     "sys_widget_grey_08": "grey400",
     "sys_on_base_hover_01": "black/opacity05",
-    "sys_on_base_pressed_01": "black/opacity10",
-    "usr_usr_brand_secondary_opacity50": "darkgreen500/opacity50"
+    "sys_on_base_pressed_01": "black/opacity10"
 }

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

@@ -379,6 +379,5 @@
     "sys_component_border_01": "grey100/opacity50",
     "sys_widget_grey_08": "darkgrey500",
     "sys_on_base_hover_01": "white/opacity10",
-    "sys_on_base_pressed_01": "white/opacity20",
-    "usr_usr_brand_secondary_opacity50": "green500/opacity50"
+    "sys_on_base_pressed_01": "white/opacity20"
 }

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

@@ -910,6 +910,5 @@
     "ui_cpnt_message_reaction_base_02": "sys_component_pastel_base_02",
     "ui_cpnt_message_reaction_base_03": "sys_component_pastel_base_03",
     "ui_cpnt_message_reaction_base_04": "sys_component_pastel_base_04",
-    "ui_cpnt_message_reaction_base_05": "sys_component_pastel_base_05",
-    "ui_145": "usr_brand_secondary_opacity50"
+    "ui_cpnt_message_reaction_base_05": "sys_component_pastel_base_05"
 }

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

@@ -1,5 +1,129 @@
 declare const colorSet: {
-    readonly PaletteColor_Dark: {
+    readonly SemanticColor: {
+        blue500: string;
+        blue700: string;
+        blue300: string;
+        green700: string;
+        green500: string;
+        green300: string;
+        red500: string;
+        grey900: string;
+        grey500: string;
+        grey400: string;
+        grey100: string;
+        grey50: string;
+        white: string;
+        black: string;
+        darkblue500: string;
+        grey950: string;
+        darkgrey900: string;
+        darkgrey500: string;
+        darkgrey400: string;
+        darkgrey100: string;
+        darkgrey50: string;
+        darkred500: string;
+        darkgreen700: string;
+        orange500: string;
+        darkorange500: string;
+        opacity00: string;
+        opacity20: string;
+        opacity30: string;
+        opacity65: string;
+        darkgreen500: string;
+        grey70: string;
+        navy500: string;
+        lightgreen500: string;
+        pink500: string;
+        darkgrey70: string;
+        darknavy500: string;
+        darkpink500: string;
+        darklightgreen500: string;
+        opacity10: string;
+        grey600: string;
+        darkgrey600: string;
+        skyblue500: string;
+        skyblue300: string;
+        pink300: string;
+        lightpink500: string;
+        darkblue300: string;
+        darkblue700: string;
+        darkgreen300: string;
+        darkskyblue500: string;
+        navy100: string;
+        darknavy100: string;
+        opacity80: string;
+        opacity50: string;
+        grey30: string;
+        opacity95: string;
+        darkgrey30: string;
+        opacity40: string;
+        kakaoyellow: string;
+        pastelblue500: string;
+        pastelpink500: string;
+        pastelorange500: string;
+        pastelgreen500: string;
+        pastelpurple500: string;
+        darkpastelblue500: string;
+        darkpastelpink500: string;
+        darkpastelorange500: string;
+        darkpastelgreen500: string;
+        darkpastelpurple500: string;
+        green30: string;
+        darkgreen30: string;
+        orange50: string;
+        darkorange50: string;
+        orange30: string;
+        darkorange30: string;
+        green50: string;
+        darkgreen50: string;
+        opacity90: string;
+        facebookblue: string;
+        opacity05: string;
+        opacity15: string;
+        grey80: string;
+        grey200: string;
+        darkgrey80: string;
+        darkgrey200: string;
+        opacity70: string;
+        opacity60: string;
+        skyblue100: string;
+        green100: string;
+        darkgreen100: string;
+        darkskyblue100: string;
+        opacity25: string;
+        opacity35: string;
+        grey10: string;
+        darkgrey10: string;
+        blue50: string;
+        darkblue50: string;
+        blue10: string;
+        red10: string;
+        green10: string;
+        blue30: string;
+        red30: string;
+        orange300: string;
+        darkorange300: string;
+        darkpink300: string;
+        pastelblue300: string;
+        darkpastelblue300: string;
+        softpurple500: string;
+        darksoftpurple500: string;
+        coolpink500: string;
+        darkcoolpink500: string;
+        brown500: string;
+        darkbrown500: string;
+        yellow300: string;
+        darkyellow300: string;
+        grey20: string;
+        darkgrey20: string;
+        grey300: string;
+        darkgrey300: string;
+        yellow500: string;
+        darkyellow500: string;
+        grey450: string;
+        darkgrey450: string;
+    };
+    readonly PaletteColor_light: {
         sys_container_background_01: string;
         sys_container_background_02: string;
         sys_container_background_03: string;
@@ -381,133 +505,8 @@ declare const colorSet: {
         sys_widget_grey_08: string;
         sys_on_base_hover_01: string;
         sys_on_base_pressed_01: string;
-        usr_usr_brand_secondary_opacity50: string;
     };
-    readonly SemanticColor: {
-        blue500: string;
-        blue700: string;
-        blue300: string;
-        green700: string;
-        green500: string;
-        green300: string;
-        red500: string;
-        grey900: string;
-        grey500: string;
-        grey400: string;
-        grey100: string;
-        grey50: string;
-        white: string;
-        black: string;
-        darkblue500: string;
-        grey950: string;
-        darkgrey900: string;
-        darkgrey500: string;
-        darkgrey400: string;
-        darkgrey100: string;
-        darkgrey50: string;
-        darkred500: string;
-        darkgreen700: string;
-        orange500: string;
-        darkorange500: string;
-        opacity00: string;
-        opacity20: string;
-        opacity30: string;
-        opacity65: string;
-        darkgreen500: string;
-        grey70: string;
-        navy500: string;
-        lightgreen500: string;
-        pink500: string;
-        darkgrey70: string;
-        darknavy500: string;
-        darkpink500: string;
-        darklightgreen500: string;
-        opacity10: string;
-        grey600: string;
-        darkgrey600: string;
-        skyblue500: string;
-        skyblue300: string;
-        pink300: string;
-        lightpink500: string;
-        darkblue300: string;
-        darkblue700: string;
-        darkgreen300: string;
-        darkskyblue500: string;
-        navy100: string;
-        darknavy100: string;
-        opacity80: string;
-        opacity50: string;
-        grey30: string;
-        opacity95: string;
-        darkgrey30: string;
-        opacity40: string;
-        kakaoyellow: string;
-        pastelblue500: string;
-        pastelpink500: string;
-        pastelorange500: string;
-        pastelgreen500: string;
-        pastelpurple500: string;
-        darkpastelblue500: string;
-        darkpastelpink500: string;
-        darkpastelorange500: string;
-        darkpastelgreen500: string;
-        darkpastelpurple500: string;
-        green30: string;
-        darkgreen30: string;
-        orange50: string;
-        darkorange50: string;
-        orange30: string;
-        darkorange30: string;
-        green50: string;
-        darkgreen50: string;
-        opacity90: string;
-        facebookblue: string;
-        opacity05: string;
-        opacity15: string;
-        grey80: string;
-        grey200: string;
-        darkgrey80: string;
-        darkgrey200: string;
-        opacity70: string;
-        opacity60: string;
-        skyblue100: string;
-        green100: string;
-        darkgreen100: string;
-        darkskyblue100: string;
-        opacity25: string;
-        opacity35: string;
-        grey10: string;
-        darkgrey10: string;
-        blue50: string;
-        darkblue50: string;
-        blue10: string;
-        red10: string;
-        green10: string;
-        blue30: string;
-        red30: string;
-        orange300: string;
-        darkorange300: string;
-        darkpink300: string;
-        pastelblue300: string;
-        darkpastelblue300: string;
-        softpurple500: string;
-        darksoftpurple500: string;
-        coolpink500: string;
-        darkcoolpink500: string;
-        brown500: string;
-        darkbrown500: string;
-        yellow300: string;
-        darkyellow300: string;
-        grey20: string;
-        darkgrey20: string;
-        grey300: string;
-        darkgrey300: string;
-        yellow500: string;
-        darkyellow500: string;
-        grey450: string;
-        darkgrey450: string;
-    };
-    readonly PaletteColor_light: {
+    readonly PaletteColor_Dark: {
         sys_container_background_01: string;
         sys_container_background_02: string;
         sys_container_background_03: string;
@@ -889,7 +888,6 @@ declare const colorSet: {
         sys_widget_grey_08: string;
         sys_on_base_hover_01: string;
         sys_on_base_pressed_01: string;
-        usr_usr_brand_secondary_opacity50: string;
     };
     readonly UIColor: {
         ui_cpnt_button_fill_base_primary: string;
@@ -1804,7 +1802,6 @@ declare const colorSet: {
         ui_cpnt_message_reaction_base_03: string;
         ui_cpnt_message_reaction_base_04: string;
         ui_cpnt_message_reaction_base_05: string;
-        ui_145: string;
     };
 };
 export default colorSet;

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

@@ -4,14 +4,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 /* eslint-disable import/order */
-var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
 var SemanticColor_json_1 = __importDefault(require("./SemanticColor.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 = {
-    PaletteColor_Dark: PaletteColor_Dark_json_1.default,
     SemanticColor: SemanticColor_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

@@ -911,5 +911,4 @@ export interface UITheme {
     ui_cpnt_message_reaction_base_03: string;
     ui_cpnt_message_reaction_base_04: string;
     ui_cpnt_message_reaction_base_05: string;
-    ui_145: string;
 }

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

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

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

@@ -71,16 +71,14 @@ var textColor = {
     white: 'sysTextWhite',
     white2: 'sysTextWhite'
 };
-var getIconColor = function (overrideColorKey) {
-    return ({
-        none: overrideColorKey ? overrideColorKey : 'ui_cpnt_button_icon_primary',
-        red: overrideColorKey ? overrideColorKey : 'ui_cpnt_button_icon_error',
-        grey_01: overrideColorKey ? overrideColorKey : 'ui_cpnt_button_icon_enabled',
-        grey2: overrideColorKey ? overrideColorKey : 'ui_cpnt_button_icon_default',
-        grey3: overrideColorKey ? overrideColorKey : 'ui_141',
-        white: overrideColorKey ? overrideColorKey : 'ui_cpnt_sidebar_icon_01',
-        white2: overrideColorKey ? overrideColorKey : 'ui_cpnt_sidebar_icon_01'
-    });
+var iconColor = {
+    none: 'ui_cpnt_button_icon_primary',
+    red: 'ui_cpnt_button_icon_error',
+    grey_01: 'ui_cpnt_button_icon_enabled',
+    grey2: 'ui_cpnt_button_icon_default',
+    grey3: 'ui_141',
+    white: 'ui_cpnt_sidebar_icon_01',
+    white2: 'ui_cpnt_sidebar_icon_01'
 };
 var textDisabledColor = {
     none: 'sysTextTertiary',
@@ -91,16 +89,14 @@ var textDisabledColor = {
     white: 'sysTextTertiary',
     white2: 'sysTextTertiary'
 };
-var getOverrideTextColor = function (overrideColorKey) {
-    return ({
-        none: overrideColorKey,
-        red: overrideColorKey,
-        grey_01: overrideColorKey,
-        grey2: overrideColorKey,
-        grey3: overrideColorKey ? overrideColorKey : 'ui_141',
-        white: overrideColorKey,
-        white2: overrideColorKey
-    });
+var overrideTextColor = {
+    none: undefined,
+    red: undefined,
+    grey_01: undefined,
+    grey2: undefined,
+    grey3: 'ui_141',
+    white: undefined,
+    white2: undefined
 };
 var overrideTextDisabledColor = {
     none: undefined,
@@ -130,7 +126,7 @@ var backgroundPressedColor = {
     white2: 'ui_cpnt_textbutton_white_variation_base_pressed'
 };
 function TextButton(_a) {
-    var text = _a.text, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, fontWeight = _a.fontWeight, _d = _a.type, type = _d === void 0 ? 'button' : _d, _e = _a.state, state = _e === void 0 ? 'normal' : _e, _f = _a.iconMode, iconMode = _f === void 0 ? 'none' : _f, _g = _a.iconFillType, iconFillType = _g === void 0 ? 'line' : _g, iconName = _a.iconName, _h = _a.colorTheme, colorTheme = _h === void 0 ? 'none' : _h, overrideColorKey = _a.overrideColorKey, onClick = _a.onClick, onKeyDown = _a.onKeyDown, rest = __rest(_a, ["text", "size", "responsiveMode", "fontWeight", "type", "state", "iconMode", "iconFillType", "iconName", "colorTheme", "overrideColorKey", "onClick", "onKeyDown"]);
+    var text = _a.text, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, fontWeight = _a.fontWeight, _d = _a.type, type = _d === void 0 ? 'button' : _d, _e = _a.state, state = _e === void 0 ? 'normal' : _e, _f = _a.iconMode, iconMode = _f === void 0 ? 'none' : _f, _g = _a.iconFillType, iconFillType = _g === void 0 ? 'line' : _g, iconName = _a.iconName, _h = _a.colorTheme, colorTheme = _h === void 0 ? 'none' : _h, onClick = _a.onClick, onKeyDown = _a.onKeyDown, rest = __rest(_a, ["text", "size", "responsiveMode", "fontWeight", "type", "state", "iconMode", "iconFillType", "iconName", "colorTheme", "onClick", "onKeyDown"]);
     var buttonRef = (0, react_1.useRef)(null);
     /**
      * @when keydown 이벤트가 있을 때만
@@ -148,13 +144,9 @@ function TextButton(_a) {
             onClick(e);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(S_Button, __assign({ ref: buttonRef, "x-pds-name": "TextButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, rest, { size: size, responsiveMode: responsiveMode, onClick: handleClick, onKeyDown: onKeyDown, type: type, fontWeight: fontWeight, disabled: state === 'disabled', state: state, hoverColor: backgroundHoverColor[colorTheme], pressedColor: backgroundPressedColor[colorTheme] }, { children: [size !== 'xsmall' && iconMode === 'left' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: state === 'disabled'
-                            ? 'ui_cpnt_button_text_disabled'
-                            : getIconColor(overrideColorKey)[colorTheme], fillType: iconFillType }), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? textDisabledColor[colorTheme] : textColor[colorTheme], colorOverride: state === 'disabled'
+    return ((0, jsx_runtime_1.jsxs)(S_Button, __assign({ ref: buttonRef, "x-pds-name": "TextButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, rest, { size: size, responsiveMode: responsiveMode, onClick: handleClick, onKeyDown: onKeyDown, type: type, fontWeight: fontWeight, disabled: state === 'disabled', state: state, hoverColor: backgroundHoverColor[colorTheme], pressedColor: backgroundPressedColor[colorTheme] }, { children: [size !== 'xsmall' && iconMode === 'left' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: state === 'disabled' ? 'ui_cpnt_button_text_disabled' : iconColor[colorTheme], fillType: iconFillType }), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? textDisabledColor[colorTheme] : textColor[colorTheme], colorOverride: state === 'disabled'
                     ? overrideTextDisabledColor[colorTheme]
-                    : getOverrideTextColor(overrideColorKey)[colorTheme], singleLineMode: "use", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }), size !== 'xsmall' && iconMode === 'right' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }), (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: state === 'disabled'
-                            ? 'ui_cpnt_button_text_disabled'
-                            : getIconColor(overrideColorKey)[colorTheme], fillType: iconFillType })] }))] })));
+                    : overrideTextColor[colorTheme], singleLineMode: "use", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }), size !== 'xsmall' && iconMode === 'right' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }), (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: state === 'disabled' ? 'ui_cpnt_button_text_disabled' : iconColor[colorTheme], fillType: iconFillType })] }))] })));
 }
 var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 14px;\n  height: 48px;\n\n  ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"], ["\n  border-radius: 14px;\n  height: 48px;\n\n  ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"])), function (_a) {
     var size = _a.size;

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

@@ -10,7 +10,8 @@ type Props = {
     startOfWeek?: 'sunday' | 'monday';
     quickActionMode?: 'use' | 'none';
     quickActionBtnText?: PDSTextType;
+    quickNavigationMode?: 'use' | 'none';
     onChange?: (val1: string, val2?: string) => void;
 };
-declare const DatePicker: ({ id, type, date, endDate, minDate, maxDate, startOfWeek, quickActionMode, quickActionBtnText, onChange }: Props) => JSX.Element;
+declare const DatePicker: ({ id, type, date, endDate, minDate, maxDate, startOfWeek, quickActionMode, quickActionBtnText, quickNavigationMode, onChange }: Props) => JSX.Element;
 export default DatePicker;

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

@@ -50,13 +50,44 @@ var styled_components_1 = __importStar(require("styled-components"));
 var TextLabel_1 = require("../TextLabel");
 var DatePickerHeader_1 = __importDefault(require("./DatePickerHeader"));
 var Day_1 = __importDefault(require("./Day"));
+var MonthPicker_1 = __importDefault(require("./MonthPicker"));
+var YearPicker_1 = __importDefault(require("./YearPicker"));
 var DatePicker = function (_a) {
-    var id = _a.id, type = _a.type, date = _a.date, endDate = _a.endDate, minDate = _a.minDate, maxDate = _a.maxDate, _b = _a.startOfWeek, startOfWeek = _b === void 0 ? 'sunday' : _b, _c = _a.quickActionMode, quickActionMode = _c === void 0 ? 'none' : _c, quickActionBtnText = _a.quickActionBtnText, onChange = _a.onChange;
+    var id = _a.id, type = _a.type, date = _a.date, endDate = _a.endDate, minDate = _a.minDate, maxDate = _a.maxDate, _b = _a.startOfWeek, startOfWeek = _b === void 0 ? 'sunday' : _b, _c = _a.quickActionMode, quickActionMode = _c === void 0 ? 'none' : _c, quickActionBtnText = _a.quickActionBtnText, _d = _a.quickNavigationMode, quickNavigationMode = _d === void 0 ? 'none' : _d, onChange = _a.onChange;
     var t = (0, react_i18next_1.useTranslation)().t;
     var startDate = date || dateHelper_1.DateHelper.formatDate(new Date());
-    var _d = (0, react_1.useState)(function () {
+    var _e = (0, react_1.useState)(function () {
         return dateHelper_1.DateHelper.startOfMonth(dateHelper_1.DateHelper.parseDate(startDate));
-    }), currentMonth = _d[0], setCurrentMonth = _d[1];
+    }), currentMonth = _e[0], setCurrentMonth = _e[1];
+    // 연도/월 선택 상태 관리
+    var _f = (0, react_1.useState)(false), showYearPicker = _f[0], setShowYearPicker = _f[1];
+    var _g = (0, react_1.useState)(false), showMonthPicker = _g[0], setShowMonthPicker = _g[1];
+    // Picker 외부 클릭 감지용 ref
+    var yearPickerRef = (0, react_1.useRef)(null);
+    var monthPickerRef = (0, react_1.useRef)(null);
+    var isEventInside = function (ref, node) {
+        if (!ref.current || !node)
+            return false;
+        return ref.current.contains(node);
+    };
+    // Picker 외부 클릭 시 닫기
+    (0, react_1.useEffect)(function () {
+        if (!showYearPicker && !showMonthPicker)
+            return;
+        var handleDocumentClick = function (event) {
+            var target = event.target;
+            var isClickInsideYearPicker = isEventInside(yearPickerRef, target);
+            var isClickInsideMonthPicker = isEventInside(monthPickerRef, target);
+            if (!isClickInsideYearPicker && !isClickInsideMonthPicker) {
+                setShowYearPicker(false);
+                setShowMonthPicker(false);
+            }
+        };
+        document.addEventListener('mousedown', handleDocumentClick);
+        return function () {
+            document.removeEventListener('mousedown', handleDocumentClick);
+        };
+    }, [showYearPicker, showMonthPicker]);
     var isPrevButtonDisabled = (0, react_1.useMemo)(function () {
         if (!minDate)
             return false;
@@ -98,6 +129,33 @@ var DatePicker = function (_a) {
         var startOfCurrentMonth = dateHelper_1.DateHelper.startOfMonth(today);
         setCurrentMonth(startOfCurrentMonth);
     };
+    // 헤더 타이틀 클릭 핸들러
+    var handleHeaderTitleClick = function () {
+        setShowYearPicker(true);
+    };
+    // 연도 선택 핸들러
+    var handleYearSelect = function (year) {
+        var newDate = new Date(year, currentMonth.getMonth(), 1);
+        setCurrentMonth(newDate);
+        setShowYearPicker(false);
+        setShowMonthPicker(true);
+    };
+    // 월 선택 핸들러
+    var handleMonthSelect = function (year, month) {
+        var newDate = new Date(year, month - 1, 1);
+        setCurrentMonth(newDate);
+        setShowMonthPicker(false);
+    };
+    // 연도 선택기에서 월 선택기로 돌아가기
+    var handleBackToYear = function () {
+        setShowMonthPicker(false);
+        setShowYearPicker(true);
+    };
+    // 선택기 닫기
+    var handleClosePickers = function () {
+        setShowYearPicker(false);
+        setShowMonthPicker(false);
+    };
     var calendarDates = (0, react_1.useMemo)(function () { return dateHelper_1.DateHelper.getCalendarDates(currentMonth, startOfWeek); }, [currentMonth, startOfWeek]);
     var days = [
         t('str_3893'),
@@ -108,11 +166,11 @@ var DatePicker = function (_a) {
         t('str_3891'),
         t('str_3892')
     ];
-    return ((0, jsx_runtime_1.jsxs)(CalendarContainer, __assign({ id: id }, { children: [(0, jsx_runtime_1.jsx)(DatePickerHeader_1.default, { headerTitle: t('str_35', {
-                    year: currentMonth.getFullYear(),
-                    month: String(currentMonth.getMonth() + 1)
-                }), textButtonText: quickActionMode === 'use' ? quickActionBtnText : undefined, isTextButtonDisabled: currentMonth.getFullYear() === new Date().getFullYear() &&
-                    currentMonth.getMonth() === new Date().getMonth(), isPrevButtonDisabled: isPrevButtonDisabled, isNextButtonDisabled: isNextButtonDisabled, onClickPrevButton: function () { return setCurrentMonth(function (prev) { return dateHelper_1.DateHelper.addMonths(prev, -1); }); }, onClickNextButton: function () { return setCurrentMonth(function (prev) { return dateHelper_1.DateHelper.addMonths(prev, 1); }); }, onClickTextButton: handleQuickActionButtonClick }), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_a" }), (0, jsx_runtime_1.jsxs)(S_MonthContainer, { children: [(0, jsx_runtime_1.jsx)(S_DayOfWeekContainer, __assign({ id: "weeks" }, { children: days
+    return ((0, jsx_runtime_1.jsxs)(CalendarContainer, __assign({ id: id }, { children: [(0, jsx_runtime_1.jsxs)(S_HeaderContainer, { children: [(0, jsx_runtime_1.jsx)(DatePickerHeader_1.default, { headerTitle: t('str_35', {
+                            year: currentMonth.getFullYear(),
+                            month: String(currentMonth.getMonth() + 1)
+                        }), textButtonText: quickActionMode === 'use' ? quickActionBtnText : undefined, isTextButtonDisabled: currentMonth.getFullYear() === new Date().getFullYear() &&
+                            currentMonth.getMonth() === new Date().getMonth(), isPrevButtonDisabled: isPrevButtonDisabled, isNextButtonDisabled: isNextButtonDisabled, onClickPrevButton: function () { return setCurrentMonth(function (prev) { return dateHelper_1.DateHelper.addMonths(prev, -1); }); }, onClickNextButton: function () { return setCurrentMonth(function (prev) { return dateHelper_1.DateHelper.addMonths(prev, 1); }); }, onClickTextButton: handleQuickActionButtonClick, onHeaderTitleClick: handleHeaderTitleClick, isHeaderTitleClickable: quickNavigationMode === 'use' }), showYearPicker && ((0, jsx_runtime_1.jsx)("div", __assign({ ref: yearPickerRef }, { children: (0, jsx_runtime_1.jsx)(YearPicker_1.default, { currentYear: currentMonth.getFullYear(), minDate: minDate, maxDate: maxDate, onYearSelect: handleYearSelect, onClose: handleClosePickers }) }))), showMonthPicker && ((0, jsx_runtime_1.jsx)("div", __assign({ ref: monthPickerRef }, { children: (0, jsx_runtime_1.jsx)(MonthPicker_1.default, { currentYear: currentMonth.getFullYear(), currentMonth: currentMonth.getMonth() + 1, minDate: minDate, maxDate: maxDate, onMonthSelect: handleMonthSelect, onClose: handleClosePickers, onBackToYear: handleBackToYear }) })))] }), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_a" }), (0, jsx_runtime_1.jsxs)(S_MonthContainer, { children: [(0, jsx_runtime_1.jsx)(S_DayOfWeekContainer, __assign({ id: "weeks" }, { children: days
                             .slice(startOfWeek === 'monday' ? 1 : 0)
                             .concat(startOfWeek === 'monday' ? [t('str_3893')] : [])
                             .map(function (day) { return ((0, jsx_runtime_1.jsx)(S_DayOfWeek, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: day, styleTheme: "caption2Bold", colorTheme: "sysTextSecondary", textAlign: "center" }) }, "".concat(id, "_").concat(day))); }) })), (0, jsx_runtime_1.jsx)(S_Grid, { children: calendarDates.map(function (d) {
@@ -127,30 +185,31 @@ var DatePicker = function (_a) {
                         }) })] })] })));
 };
 var CalendarContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n"])));
-var S_MonthContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  padding: 0 ", ";\n"], ["\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  padding: 0 ", ";\n"])), function (_a) {
+var S_HeaderContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
+var S_MonthContainer = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  padding: 0 ", ";\n"], ["\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  padding: 0 ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingD;
 });
-var S_DayOfWeekContainer = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  display: grid;\n  grid-template-columns: repeat(7, minmax(32px, 120px));\n  grid-template-rows: minmax(25px, 32px);\n  justify-items: center;\n"], ["\n  align-items: center;\n  display: grid;\n  grid-template-columns: repeat(7, minmax(32px, 120px));\n  grid-template-rows: minmax(25px, 32px);\n  justify-items: center;\n"])));
-var S_DayOfWeek = styled_components_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  box-sizing: border-box;\n  color: ", ";\n  display: flex;\n  justify-content: center;\n"], ["\n  align-items: center;\n  background-color: transparent;\n  box-sizing: border-box;\n  color: ", ";\n  display: flex;\n  justify-content: center;\n"])), function (_a) {
+var S_DayOfWeekContainer = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  display: grid;\n  grid-template-columns: repeat(7, minmax(32px, 120px));\n  grid-template-rows: minmax(25px, 32px);\n  justify-items: center;\n"], ["\n  align-items: center;\n  display: grid;\n  grid-template-columns: repeat(7, minmax(32px, 120px));\n  grid-template-rows: minmax(25px, 32px);\n  justify-items: center;\n"])));
+var S_DayOfWeek = styled_components_1.default.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  box-sizing: border-box;\n  color: ", ";\n  display: flex;\n  justify-content: center;\n"], ["\n  align-items: center;\n  background-color: transparent;\n  box-sizing: border-box;\n  color: ", ";\n  display: flex;\n  justify-content: center;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_textlabel_sys_primary;
 });
-var S_Grid = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  display: grid;\n  flex: 1;\n  grid-row-gap: 2px;\n  grid-template-columns: repeat(7, minmax(32px, 120px));\n  grid-template-rows: repeat(6, minmax(25px, 32px));\n  justify-items: center;\n"], ["\n  align-items: center;\n  display: grid;\n  flex: 1;\n  grid-row-gap: 2px;\n  grid-template-columns: repeat(7, minmax(32px, 120px));\n  grid-template-rows: repeat(6, minmax(25px, 32px));\n  justify-items: center;\n"])));
-var S_CellWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  position: relative;\n  width: 100%;\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  position: relative;\n  width: 100%;\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_a) {
+var S_Grid = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: center;\n  display: grid;\n  flex: 1;\n  grid-row-gap: 2px;\n  grid-template-columns: repeat(7, minmax(32px, 120px));\n  grid-template-rows: repeat(6, minmax(25px, 32px));\n  justify-items: center;\n"], ["\n  align-items: center;\n  display: grid;\n  flex: 1;\n  grid-row-gap: 2px;\n  grid-template-columns: repeat(7, minmax(32px, 120px));\n  grid-template-rows: repeat(6, minmax(25px, 32px));\n  justify-items: center;\n"])));
+var S_CellWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  position: relative;\n  width: 100%;\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  position: relative;\n  width: 100%;\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_a) {
     var isRange = _a.isRange, isStart = _a.isStart, isEnd = _a.isEnd, isValidRange = _a.isValidRange, theme = _a.theme;
     return isValidRange &&
-        (isRange || (isStart && !isEnd) || (isEnd && !isStart)) && (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      background: ", "20;\n    "], ["\n      background: ", "20;\n    "])), theme.ui_cpnt_calendar_status_a);
+        (isRange || (isStart && !isEnd) || (isEnd && !isStart)) && (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      background: ", "20;\n    "], ["\n      background: ", "20;\n    "])), theme.ui_cpnt_calendar_status_a);
 }, function (_a) {
     var isStart = _a.isStart, isEnd = _a.isEnd, isValidRange = _a.isValidRange, theme = _a.theme;
     return isValidRange &&
         isEnd &&
-        !isStart && (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      background: linear-gradient(\n        to right,\n        ", "20 50%,\n        transparent 50%\n      );\n    "], ["\n      background: linear-gradient(\n        to right,\n        ", "20 50%,\n        transparent 50%\n      );\n    "])), theme.ui_cpnt_calendar_status_a);
+        !isStart && (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      background: linear-gradient(\n        to right,\n        ", "20 50%,\n        transparent 50%\n      );\n    "], ["\n      background: linear-gradient(\n        to right,\n        ", "20 50%,\n        transparent 50%\n      );\n    "])), theme.ui_cpnt_calendar_status_a);
 }, function (_a) {
     var isStart = _a.isStart, isEnd = _a.isEnd, isValidRange = _a.isValidRange, theme = _a.theme;
     return isValidRange &&
         isStart &&
-        !isEnd && (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      background: linear-gradient(\n        to left,\n        ", "20 50%,\n        transparent 50%\n      );\n    "], ["\n      background: linear-gradient(\n        to left,\n        ", "20 50%,\n        transparent 50%\n      );\n    "])), theme.ui_cpnt_calendar_status_a);
+        !isEnd && (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      background: linear-gradient(\n        to left,\n        ", "20 50%,\n        transparent 50%\n      );\n    "], ["\n      background: linear-gradient(\n        to left,\n        ", "20 50%,\n        transparent 50%\n      );\n    "])), theme.ui_cpnt_calendar_status_a);
 });
 exports.default = DatePicker;
-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;

package/dist/src/mobile/components/DatePicker/DatePickerHeader.d.ts

@@ -9,6 +9,8 @@ type Props = {
     onClickPrevButton: () => void;
     onClickNextButton: () => void;
     onClickTextButton: () => void;
+    onHeaderTitleClick?: () => void;
+    isHeaderTitleClickable?: boolean;
 };
-declare function DatePickerHeader({ headerTitle, textButtonText, isTextButtonDisabled, isPrevButtonDisabled, isNextButtonDisabled, onClickPrevButton, onClickNextButton, onClickTextButton }: Props): JSX.Element;
+declare function DatePickerHeader({ headerTitle, textButtonText, isTextButtonDisabled, isPrevButtonDisabled, isNextButtonDisabled, onClickPrevButton, onClickNextButton, onClickTextButton, onHeaderTitleClick, isHeaderTitleClickable }: Props): JSX.Element;
 export default DatePickerHeader;

package/dist/src/mobile/components/DatePicker/DatePickerHeader.js

@@ -3,6 +3,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -13,8 +24,8 @@ var IconButton_1 = require("../IconButton");
 var TextButton_1 = require("../TextButton");
 var TextLabel_1 = require("../TextLabel");
 function DatePickerHeader(_a) {
-    var headerTitle = _a.headerTitle, textButtonText = _a.textButtonText, isTextButtonDisabled = _a.isTextButtonDisabled, isPrevButtonDisabled = _a.isPrevButtonDisabled, isNextButtonDisabled = _a.isNextButtonDisabled, onClickPrevButton = _a.onClickPrevButton, onClickNextButton = _a.onClickNextButton, onClickTextButton = _a.onClickTextButton;
-    return ((0, jsx_runtime_1.jsxs)(S_HeaderContainer, { children: [(0, jsx_runtime_1.jsx)(S_LeftIconWrapper, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { onClick: onClickPrevButton, iconName: "ic_arrow_left", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: 16, baseSize: "medium", state: isPrevButtonDisabled ? 'disabled' : 'normal' }) }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: headerTitle, textAlign: "center" }), (0, jsx_runtime_1.jsx)(S_RightIconWrapper, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { onClick: onClickNextButton, iconName: "ic_arrow_right", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: 16, baseSize: "medium", state: isNextButtonDisabled ? 'disabled' : 'normal' }) }), textButtonText && ((0, jsx_runtime_1.jsx)(S_TextButtonWrapper, { children: (0, jsx_runtime_1.jsx)(TextButton_1.TextButton, { text: textButtonText, size: "xsmall", fontWeight: "bold", onClick: onClickTextButton, state: isTextButtonDisabled ? 'disabled' : 'normal' }) }))] }));
+    var headerTitle = _a.headerTitle, textButtonText = _a.textButtonText, isTextButtonDisabled = _a.isTextButtonDisabled, isPrevButtonDisabled = _a.isPrevButtonDisabled, isNextButtonDisabled = _a.isNextButtonDisabled, onClickPrevButton = _a.onClickPrevButton, onClickNextButton = _a.onClickNextButton, onClickTextButton = _a.onClickTextButton, onHeaderTitleClick = _a.onHeaderTitleClick, _b = _a.isHeaderTitleClickable, isHeaderTitleClickable = _b === void 0 ? false : _b;
+    return ((0, jsx_runtime_1.jsxs)(S_HeaderContainer, { children: [(0, jsx_runtime_1.jsx)(S_LeftIconWrapper, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { onClick: onClickPrevButton, iconName: "ic_arrow_left", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: 16, baseSize: "medium", state: isPrevButtonDisabled ? 'disabled' : 'normal' }) }), (0, jsx_runtime_1.jsx)(S_HeaderTitleWrapper, __assign({ onClick: isHeaderTitleClickable ? onHeaderTitleClick : undefined, isClickable: isHeaderTitleClickable }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: headerTitle, textAlign: "center" }) })), (0, jsx_runtime_1.jsx)(S_RightIconWrapper, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { onClick: onClickNextButton, iconName: "ic_arrow_right", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: 16, baseSize: "medium", state: isNextButtonDisabled ? 'disabled' : 'normal' }) }), textButtonText && ((0, jsx_runtime_1.jsx)(S_TextButtonWrapper, { children: (0, jsx_runtime_1.jsx)(TextButton_1.TextButton, { text: textButtonText, size: "xsmall", fontWeight: "bold", onClick: onClickTextButton, state: isTextButtonDisabled ? 'disabled' : 'normal' }) }))] }));
 }
 var S_HeaderContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  justify-items: center;\n  margin: 0 ", ";\n  position: relative;\n"], ["\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  justify-items: center;\n  margin: 0 ", ";\n  position: relative;\n"])), function (_a) {
     var theme = _a.theme;
@@ -22,6 +33,14 @@ var S_HeaderContainer = styled_components_1.default.div(templateObject_1 || (tem
 });
 var S_TextButtonWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: auto 0;\n  position: absolute;\n  right: 0;\n"], ["\n  margin: auto 0;\n  position: absolute;\n  right: 0;\n"])));
 var S_LeftIconWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  grid-column: 1 / 2;\n  height: auto;\n  width: auto;\n"], ["\n  align-items: center;\n  display: flex;\n  grid-column: 1 / 2;\n  height: auto;\n  width: auto;\n"])));
-var S_RightIconWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  grid-column: 3 / 4;\n  height: auto;\n  width: auto;\n"], ["\n  align-items: center;\n  display: flex;\n  grid-column: 3 / 4;\n  height: auto;\n  width: auto;\n"])));
+var S_HeaderTitleWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border-radius: 4px;\n  cursor: ", ";\n  padding: 4px 8px;\n  transition: background-color 0.2s ease;\n\n  ", "\n"], ["\n  border-radius: 4px;\n  cursor: ", ";\n  padding: 4px 8px;\n  transition: background-color 0.2s ease;\n\n  ", "\n"])), function (_a) {
+    var isClickable = _a.isClickable;
+    return (isClickable ? 'pointer' : 'default');
+}, function (_a) {
+    var isClickable = _a.isClickable, theme = _a.theme;
+    return isClickable &&
+        "\n    &:hover {\n      background-color: ".concat(theme.ui_cpnt_button_fill_base_transparent, ";\n    }\n  ");
+});
+var S_RightIconWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  grid-column: 3 / 4;\n  height: auto;\n  width: auto;\n"], ["\n  align-items: center;\n  display: flex;\n  grid-column: 3 / 4;\n  height: auto;\n  width: auto;\n"])));
 exports.default = DatePickerHeader;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/src/mobile/components/DatePicker/MonthPicker.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+type Props = {
+    currentYear: number;
+    currentMonth: number;
+    minDate?: string;
+    maxDate?: string;
+    onMonthSelect: (year: number, month: number) => void;
+    onClose: () => void;
+    onBackToYear: () => void;
+};
+declare function MonthPicker({ currentYear, currentMonth, minDate, maxDate, onMonthSelect, onClose, onBackToYear }: Props): JSX.Element;
+export default MonthPicker;

package/dist/src/mobile/components/DatePicker/MonthPicker.js

@@ -0,0 +1,133 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_i18next_1 = require("react-i18next");
+var dateHelper_1 = require("../../../common/utils/dateHelper");
+var styled_components_1 = __importDefault(require("styled-components"));
+var IconButton_1 = require("../IconButton");
+var TextLabel_1 = require("../TextLabel");
+// Constants
+var MONTH_KEYS = [
+    'str_month_january',
+    'str_month_february',
+    'str_month_march',
+    'str_month_april',
+    'str_month_may',
+    'str_month_june',
+    'str_month_july',
+    'str_month_august',
+    'str_month_september',
+    'str_month_october',
+    'str_month_november',
+    'str_month_december'
+];
+var MONTHS_COUNT = 12;
+var GRID_COLUMNS = 3;
+function MonthPicker(_a) {
+    var currentYear = _a.currentYear, currentMonth = _a.currentMonth, minDate = _a.minDate, maxDate = _a.maxDate, onMonthSelect = _a.onMonthSelect, onClose = _a.onClose, onBackToYear = _a.onBackToYear;
+    var t = (0, react_i18next_1.useTranslation)().t;
+    // Generate months array (1-12)
+    var months = (0, react_1.useMemo)(function () { return Array.from({ length: MONTHS_COUNT }, function (_, i) { return i + 1; }); }, []);
+    var getMonthStringKey = (0, react_1.useCallback)(function (monthNumber) {
+        return MONTH_KEYS[monthNumber - 1] || MONTH_KEYS[0];
+    }, []);
+    // Helper function to compare dates for disabled state
+    var isDateOutOfRange = (0, react_1.useCallback)(function (targetDate, compareDate, isMinDate) {
+        var targetYear = targetDate.getFullYear();
+        var targetMonth = targetDate.getMonth();
+        var compareYear = compareDate.getFullYear();
+        var compareMonth = compareDate.getMonth();
+        if (isMinDate) {
+            return (targetYear < compareYear || (targetYear === compareYear && targetMonth < compareMonth));
+        }
+        return targetYear > compareYear || (targetYear === compareYear && targetMonth > compareMonth);
+    }, []);
+    var isMonthDisabled = (0, react_1.useCallback)(function (month) {
+        if (!minDate && !maxDate)
+            return false;
+        var targetDate = new Date(currentYear, month - 1, 1);
+        if (minDate) {
+            var minDateObj = dateHelper_1.DateHelper.parseDate(minDate);
+            if (isDateOutOfRange(targetDate, minDateObj, true)) {
+                return true;
+            }
+        }
+        if (maxDate) {
+            var maxDateObj = dateHelper_1.DateHelper.parseDate(maxDate);
+            if (isDateOutOfRange(targetDate, maxDateObj, false)) {
+                return true;
+            }
+        }
+        return false;
+    }, [currentYear, minDate, maxDate, isDateOutOfRange]);
+    var handleMonthClick = (0, react_1.useCallback)(function (month) {
+        if (isMonthDisabled(month))
+            return;
+        onMonthSelect(currentYear, month);
+        onClose();
+    }, [currentYear, isMonthDisabled, onMonthSelect, onClose]);
+    // Helper function to get color theme for month text
+    var getTextColorTheme = (0, react_1.useCallback)(function (isDisabled, isSelected) {
+        if (isDisabled)
+            return 'sysTextTertiary';
+        if (isSelected)
+            return 'sysTextWhite';
+        return 'sysTextPrimary';
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)(S_MonthPickerContainer, { children: [(0, jsx_runtime_1.jsxs)(S_Header, { children: [(0, jsx_runtime_1.jsx)(S_BackButton, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { onClick: onBackToYear, iconName: "ic_arrow_left", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: 20, baseSize: "medium" }) }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: currentYear.toString(), textAlign: "center" }), (0, jsx_runtime_1.jsx)(S_CloseButton, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { onClick: onClose, iconName: "ic_xmark", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: 20, baseSize: "small" }) })] }), (0, jsx_runtime_1.jsx)(S_MonthGrid, { children: months.map(function (month) {
+                    var isDisabled = isMonthDisabled(month);
+                    var isSelected = month === currentMonth;
+                    return ((0, jsx_runtime_1.jsx)(S_MonthItem, __assign({ isSelected: isSelected, isDisabled: isDisabled, onClick: function () { return handleMonthClick(month); } }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: t(getMonthStringKey(month)), textAlign: "center", colorTheme: getTextColorTheme(isDisabled, isSelected) }) }), month));
+                }) })] }));
+}
+var S_MonthPickerContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 16px;\n  box-shadow: ", ";\n  left: 50%;\n  min-width: 280px;\n  padding: 16px;\n  padding-top: ", ";\n  position: absolute;\n  top: 100%;\n  transform: translateX(-50%);\n  z-index: 1000;\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 16px;\n  box-shadow: ", ";\n  left: 50%;\n  min-width: 280px;\n  padding: 16px;\n  padding-top: ", ";\n  position: absolute;\n  top: 100%;\n  transform: translateX(-50%);\n  z-index: 1000;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_fill_base_white;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_card_base;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.boxShadow.elevation4;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingA;
+});
+var S_Header = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 16px;\n"], ["\n  align-items: center;\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 16px;\n"])));
+var S_BackButton = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n"], ["\n  align-items: center;\n  display: flex;\n"])));
+var S_CloseButton = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n"], ["\n  align-items: center;\n  display: flex;\n"])));
+var S_MonthGrid = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: grid;\n  gap: 8px;\n  grid-template-columns: repeat(", ", 1fr);\n"], ["\n  display: grid;\n  gap: 8px;\n  grid-template-columns: repeat(", ", 1fr);\n"])), GRID_COLUMNS);
+var S_MonthItem = styled_components_1.default.button(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: center;\n  background: ", ";\n  border: 1px solid ", ";\n  border-radius: 12px;\n  cursor: ", ";\n  display: flex;\n  height: 40px;\n  justify-content: center;\n  padding: 8px;\n  transition: all 0.2s ease;\n\n  &:hover {\n    background: ", ";\n  }\n"], ["\n  align-items: center;\n  background: ", ";\n  border: 1px solid ", ";\n  border-radius: 12px;\n  cursor: ", ";\n  display: flex;\n  height: 40px;\n  justify-content: center;\n  padding: 8px;\n  transition: all 0.2s ease;\n\n  &:hover {\n    background: ", ";\n  }\n"])), function (_a) {
+    var isSelected = _a.isSelected, theme = _a.theme;
+    return isSelected ? theme.ui_cpnt_calendar_status_a : 'transparent';
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_card_base;
+}, function (_a) {
+    var isDisabled = _a.isDisabled;
+    return (isDisabled ? 'not-allowed' : 'pointer');
+}, function (_a) {
+    var isSelected = _a.isSelected, theme = _a.theme;
+    return isSelected ? theme.ui_cpnt_calendar_status_a : theme.ui_cpnt_button_fill_base_transparent;
+});
+exports.default = MonthPicker;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/dist/src/mobile/components/DatePicker/YearPicker.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+type Props = {
+    currentYear: number;
+    minDate?: string;
+    maxDate?: string;
+    onYearSelect: (year: number) => void;
+    onClose: () => void;
+};
+declare function YearPicker({ currentYear, minDate, maxDate, onYearSelect, onClose }: Props): JSX.Element;
+export default YearPicker;

package/dist/src/mobile/components/DatePicker/YearPicker.js

@@ -0,0 +1,73 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_i18next_1 = require("react-i18next");
+var dateHelper_1 = require("../../../common/utils/dateHelper");
+var styled_components_1 = __importDefault(require("styled-components"));
+var IconButton_1 = require("../IconButton");
+var TextLabel_1 = require("../TextLabel");
+function YearPicker(_a) {
+    var currentYear = _a.currentYear, minDate = _a.minDate, maxDate = _a.maxDate, onYearSelect = _a.onYearSelect, onClose = _a.onClose;
+    var t = (0, react_i18next_1.useTranslation)('translation').t;
+    var years = (0, react_1.useMemo)(function () {
+        var minYear = minDate ? dateHelper_1.DateHelper.parseDate(minDate).getFullYear() : currentYear - 10;
+        var maxYear = maxDate ? dateHelper_1.DateHelper.parseDate(maxDate).getFullYear() : currentYear + 10;
+        var yearList = [];
+        for (var year = minYear; year <= maxYear; year += 1) {
+            yearList.push(year);
+        }
+        return yearList;
+    }, [currentYear, minDate, maxDate]);
+    var handleYearClick = function (year) {
+        onYearSelect(year);
+    };
+    return ((0, jsx_runtime_1.jsxs)(S_YearPickerContainer, { children: [(0, jsx_runtime_1.jsxs)(S_Header, { children: [(0, jsx_runtime_1.jsx)(S_Title, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: t('str_9617'), textAlign: "center" }) }), (0, jsx_runtime_1.jsx)(S_CloseButton, __assign({ onClick: onClose }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: "ic_xmark", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: 20, baseSize: "small" }) }))] }), (0, jsx_runtime_1.jsx)(S_YearGrid, { children: years.map(function (year) { return ((0, jsx_runtime_1.jsx)(S_YearItem, __assign({ isSelected: year === currentYear, onClick: function () { return handleYearClick(year); } }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: year.toString(), textAlign: "center", colorTheme: year === currentYear ? 'sysTextWhite' : 'sysTextPrimary' }) }), year)); }) })] }));
+}
+var S_YearPickerContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 16px;\n  box-shadow: ", ";\n  left: 50%;\n  min-width: 280px;\n  padding: 16px;\n  padding-top: ", ";\n  position: absolute;\n  top: 100%;\n  transform: translateX(-50%);\n  z-index: 1000;\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 16px;\n  box-shadow: ", ";\n  left: 50%;\n  min-width: 280px;\n  padding: 16px;\n  padding-top: ", ";\n  position: absolute;\n  top: 100%;\n  transform: translateX(-50%);\n  z-index: 1000;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_fill_base_white;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_card_base;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.boxShadow.elevation4;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingA;
+});
+var S_Header = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 40px;\n  justify-content: center;\n  margin-bottom: 16px;\n  position: relative;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 40px;\n  justify-content: center;\n  margin-bottom: 16px;\n  position: relative;\n"])));
+var S_CloseButton = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n  position: absolute;\n  right: 0;\n  top: 50%;\n  transform: translateY(-50%);\n"], ["\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n  position: absolute;\n  right: 0;\n  top: 50%;\n  transform: translateY(-50%);\n"])));
+var S_Title = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  left: 50%;\n  position: absolute;\n  transform: translateX(-50%);\n"], ["\n  left: 50%;\n  position: absolute;\n  transform: translateX(-50%);\n"])));
+var S_YearGrid = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: grid;\n  gap: 8px;\n  grid-template-columns: repeat(3, 1fr);\n  max-height: 200px;\n  overflow-y: auto;\n"], ["\n  display: grid;\n  gap: 8px;\n  grid-template-columns: repeat(3, 1fr);\n  max-height: 200px;\n  overflow-y: auto;\n"])));
+var S_YearItem = styled_components_1.default.button(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: center;\n  background: ", ";\n  border: 1px solid ", ";\n  border-radius: 12px;\n  cursor: pointer;\n  display: flex;\n  height: 40px;\n  justify-content: center;\n  padding: 8px;\n  transition: all 0.2s ease;\n\n  &:hover {\n    background: ", ";\n  }\n"], ["\n  align-items: center;\n  background: ", ";\n  border: 1px solid ", ";\n  border-radius: 12px;\n  cursor: pointer;\n  display: flex;\n  height: 40px;\n  justify-content: center;\n  padding: 8px;\n  transition: all 0.2s ease;\n\n  &:hover {\n    background: ", ";\n  }\n"])), function (_a) {
+    var isSelected = _a.isSelected, theme = _a.theme;
+    return isSelected ? theme.ui_cpnt_calendar_status_a : 'transparent';
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_card_base;
+}, function (_a) {
+    var isSelected = _a.isSelected, theme = _a.theme;
+    return isSelected ? theme.ui_cpnt_calendar_status_a : theme.ui_cpnt_button_fill_base_transparent;
+});
+exports.default = YearPicker;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/dist/src/mobile/components/DatePicker/index.d.ts

@@ -1 +1,3 @@
 export { default as DatePicker } from './DatePicker';
+export { default as YearPicker } from './YearPicker';
+export { default as MonthPicker } from './MonthPicker';

package/dist/src/mobile/components/DatePicker/index.js

@@ -3,6 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DatePicker = void 0;
+exports.MonthPicker = exports.YearPicker = exports.DatePicker = void 0;
 var DatePicker_1 = require("./DatePicker");
 Object.defineProperty(exports, "DatePicker", { enumerable: true, get: function () { return __importDefault(DatePicker_1).default; } });
+var YearPicker_1 = require("./YearPicker");
+Object.defineProperty(exports, "YearPicker", { enumerable: true, get: function () { return __importDefault(YearPicker_1).default; } });
+var MonthPicker_1 = require("./MonthPicker");
+Object.defineProperty(exports, "MonthPicker", { enumerable: true, get: function () { return __importDefault(MonthPicker_1).default; } });

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { PDSIconType, PDSTextType, UiColors } from '../../../common';
+import type { PDSIconType, PDSTextType } from '../../../common';
 export type TextButtonProps = {
     text?: PDSTextType;
     size?: 'rlarge' | 'large' | 'medium' | 'small' | 'xsmall';
@@ -11,8 +11,7 @@ export type TextButtonProps = {
     iconFillType?: 'fill' | 'line';
     iconName?: PDSIconType;
     colorTheme?: 'none' | 'red' | 'grey_01' | 'grey2' | 'grey3' | 'white' | 'white2';
-    overrideColorKey?: UiColors;
     onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 };
-declare function TextButton({ text, size, responsiveMode, fontWeight, type, state, iconMode, iconFillType, iconName, colorTheme, overrideColorKey, onClick, ...rest }: TextButtonProps): JSX.Element;
+declare function TextButton({ text, size, responsiveMode, fontWeight, type, state, iconMode, iconFillType, iconName, colorTheme, onClick, ...rest }: TextButtonProps): JSX.Element;
 export default TextButton;

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

@@ -70,16 +70,14 @@ var textColor = {
     white: 'sysTextWhite',
     white2: 'sysTextWhite'
 };
-var getIconColor = function (overrideColorKey) {
-    return ({
-        none: overrideColorKey ? overrideColorKey : 'ui_cpnt_button_icon_primary',
-        red: overrideColorKey ? overrideColorKey : 'ui_cpnt_button_icon_error',
-        grey_01: overrideColorKey ? overrideColorKey : 'ui_cpnt_button_icon_enabled',
-        grey2: overrideColorKey ? overrideColorKey : 'ui_cpnt_button_icon_default',
-        grey3: overrideColorKey ? overrideColorKey : 'ui_141',
-        white: overrideColorKey ? overrideColorKey : 'ui_cpnt_sidebar_icon_01',
-        white2: overrideColorKey ? overrideColorKey : 'ui_cpnt_sidebar_icon_01'
-    });
+var iconColor = {
+    none: 'ui_cpnt_button_icon_primary',
+    red: 'ui_cpnt_button_icon_error',
+    grey_01: 'ui_cpnt_button_icon_enabled',
+    grey2: 'ui_cpnt_button_icon_default',
+    grey3: 'ui_141',
+    white: 'ui_cpnt_sidebar_icon_01',
+    white2: 'ui_cpnt_sidebar_icon_01'
 };
 var textDisabledColor = {
     none: 'sysTextTertiary',
@@ -90,16 +88,14 @@ var textDisabledColor = {
     white: 'sysTextTertiary',
     white2: 'sysTextTertiary'
 };
-var getOverrideTextColor = function (overrideColorKey) {
-    return ({
-        none: overrideColorKey,
-        red: overrideColorKey,
-        grey_01: overrideColorKey,
-        grey2: overrideColorKey,
-        grey3: overrideColorKey ? overrideColorKey : 'ui_141',
-        white: overrideColorKey,
-        white2: overrideColorKey
-    });
+var overrideTextColor = {
+    none: undefined,
+    red: undefined,
+    grey_01: undefined,
+    grey2: undefined,
+    grey3: 'ui_141',
+    white: undefined,
+    white2: undefined
 };
 var overrideTextDisabledColor = {
     none: undefined,
@@ -120,19 +116,15 @@ var backgroundPressedColor = {
     white2: 'ui_cpnt_textbutton_white_variation_base_pressed'
 };
 function TextButton(_a) {
-    var text = _a.text, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, fontWeight = _a.fontWeight, _d = _a.type, type = _d === void 0 ? 'button' : _d, _e = _a.state, state = _e === void 0 ? 'normal' : _e, _f = _a.iconMode, iconMode = _f === void 0 ? 'none' : _f, _g = _a.iconFillType, iconFillType = _g === void 0 ? 'line' : _g, iconName = _a.iconName, _h = _a.colorTheme, colorTheme = _h === void 0 ? 'none' : _h, overrideColorKey = _a.overrideColorKey, onClick = _a.onClick, rest = __rest(_a, ["text", "size", "responsiveMode", "fontWeight", "type", "state", "iconMode", "iconFillType", "iconName", "colorTheme", "overrideColorKey", "onClick"]);
+    var text = _a.text, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, fontWeight = _a.fontWeight, _d = _a.type, type = _d === void 0 ? 'button' : _d, _e = _a.state, state = _e === void 0 ? 'normal' : _e, _f = _a.iconMode, iconMode = _f === void 0 ? 'none' : _f, _g = _a.iconFillType, iconFillType = _g === void 0 ? 'line' : _g, iconName = _a.iconName, _h = _a.colorTheme, colorTheme = _h === void 0 ? 'none' : _h, onClick = _a.onClick, rest = __rest(_a, ["text", "size", "responsiveMode", "fontWeight", "type", "state", "iconMode", "iconFillType", "iconName", "colorTheme", "onClick"]);
     var handleClick = function (e) {
         if (onClick) {
             onClick(e);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(S_Button, __assign({ "x-pds-name": "TextButton", "x-pds-element-type": "component", "x-pds-device-type": "mobile" }, rest, { size: size, responsiveMode: responsiveMode, onClick: handleClick, type: type, fontWeight: fontWeight, disabled: state === 'disabled', pressedColor: backgroundPressedColor[colorTheme] }, { children: [size !== 'xsmall' && iconMode === 'left' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: state === 'disabled'
-                            ? 'ui_cpnt_button_text_disabled'
-                            : getIconColor(overrideColorKey)[colorTheme], fillType: iconFillType }), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? textDisabledColor[colorTheme] : textColor[colorTheme], colorOverride: state === 'disabled'
+    return ((0, jsx_runtime_1.jsxs)(S_Button, __assign({ "x-pds-name": "TextButton", "x-pds-element-type": "component", "x-pds-device-type": "mobile" }, rest, { size: size, responsiveMode: responsiveMode, onClick: handleClick, type: type, fontWeight: fontWeight, disabled: state === 'disabled', pressedColor: backgroundPressedColor[colorTheme] }, { children: [size !== 'xsmall' && iconMode === 'left' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: state === 'disabled' ? 'ui_cpnt_button_text_disabled' : iconColor[colorTheme], fillType: iconFillType }), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? textDisabledColor[colorTheme] : textColor[colorTheme], colorOverride: state === 'disabled'
                     ? overrideTextDisabledColor[colorTheme]
-                    : getOverrideTextColor(overrideColorKey)[colorTheme], singleLineMode: "use" }), size !== 'xsmall' && iconMode === 'right' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }), (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: state === 'disabled'
-                            ? 'ui_cpnt_button_text_disabled'
-                            : getIconColor(overrideColorKey)[colorTheme], fillType: iconFillType })] }))] })));
+                    : overrideTextColor[colorTheme], singleLineMode: "use" }), size !== 'xsmall' && iconMode === 'right' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }), (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: state === 'disabled' ? 'ui_cpnt_button_text_disabled' : iconColor[colorTheme], fillType: iconFillType })] }))] })));
 }
 var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 14px;\n  height: 48px;\n  ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"], ["\n  border-radius: 14px;\n  height: 48px;\n  ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"])), function (_a) {
     var size = _a.size;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web",
-  "version": "2.2.260",
+  "version": "2.2.262-beta.0",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",

package/release-note.md

@@ -1,8 +1,7 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v2.2.260]
+## [v2.2.262-beta.0]
 ## daily|https://design.storybook.publ.biz/
 
 ### 업데이트 사항
 
-* ui_145 color 추가
-
+* [PDS-1345] DatePicker 컴포넌트에 퀵 이동 제공