pds-dev-kit-web 2.2.160 → 2.2.162

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

@@ -308,7 +308,7 @@
     "ui_cpnt_card_icon_background_03": "sys_widget_success_01",
     "ui_cpnt_bannerslide_gradient_1": "sys_component_base_05",
     "ui_cpnt_bannerslide_gradient_2": "sys_component_base_05_opacity00",
-    "ui_cpnt_videoplayer_gradient_1": "sys_component_base_black_opacity50",
+    "ui_cpnt_modal_gradient_1": "sys_component_base_black_opacity00",
     "ui_cpnt_modal_gradient_2": "sys_component_base_black",
     "ui_cpnt_list_icon_04": "sys_widget_white",
     "ui_cpnt_list_thumbnail_border": "sys_border_line_01",
@@ -316,6 +316,7 @@
     "ui_cpnt_list_thumbnail_gradient_2": "sys_component_base_black_opacity00",
     "ui_cpnt_list_base_area_active": "sys_component_base_01",
     "ui_cpnt_contextmenu_base": "sys_component_base_02",
+    "ui_cpnt_videoplayer_gradient_1": "sys_component_base_black_opacity50",
     "ui_cpnt_videoplayer_gradient_2": "sys_component_base_black_opacity00",
     "ui_cpnt_videoplayer_overlay": "sys_component_base_black_opacity50",
     "ui_globalmenucontainer_background": "sys_container_background_01",
@@ -888,10 +889,13 @@
     "ui_135": "sys_widget_grey_01",
     "ui_136": "sys_component_base_18",
     "ui_137": "sys_component_base_50",
-    "ui_cpnt_modal_gradient_1": "sys_component_base_black_opacity00",
     "ui_138": "sys_cpnt_sheet_base_12",
     "ui_139": "sys_dimmed_01",
     "ui_cpnt_sheet_base_29": "sys_cpnt_sheet_base_51",
     "ui_cpnt_sheet_base_30": "sys_cpnt_sheet_base_52",
-    "ui_cpnt_sheet_base_31": "sys_cpnt_sheet_base_53"
+    "ui_cpnt_sheet_base_31": "sys_cpnt_sheet_base_53",
+    "ui_cpnt_selcontrols_icon_white": "sys_widget_white",
+    "ui_cpnt_selcontrols_text_white": "sys_text_white",
+    "ui_cpnt_selcontrols_icon_grey_01": "sys_widget_grey_01",
+    "ui_cpnt_selcontrols_text_grey_01": "sys_text_grey_01"
 }

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

@@ -123,7 +123,7 @@ declare const colorSet: {
         grey450: string;
         darkgrey450: string;
     };
-    readonly PaletteColor_Dark: {
+    readonly PaletteColor_light: {
         sys_container_background_01: string;
         sys_container_background_02: string;
         sys_container_background_03: string;
@@ -500,7 +500,7 @@ declare const colorSet: {
         sys_cpnt_sheet_base_52: string;
         sys_cpnt_sheet_base_53: string;
     };
-    readonly PaletteColor_light: {
+    readonly PaletteColor_Dark: {
         sys_container_background_01: string;
         sys_container_background_02: string;
         sys_container_background_03: string;
@@ -1187,7 +1187,7 @@ declare const colorSet: {
         ui_cpnt_card_icon_background_03: string;
         ui_cpnt_bannerslide_gradient_1: string;
         ui_cpnt_bannerslide_gradient_2: string;
-        ui_cpnt_videoplayer_gradient_1: string;
+        ui_cpnt_modal_gradient_1: string;
         ui_cpnt_modal_gradient_2: string;
         ui_cpnt_list_icon_04: string;
         ui_cpnt_list_thumbnail_border: string;
@@ -1195,6 +1195,7 @@ declare const colorSet: {
         ui_cpnt_list_thumbnail_gradient_2: string;
         ui_cpnt_list_base_area_active: string;
         ui_cpnt_contextmenu_base: string;
+        ui_cpnt_videoplayer_gradient_1: string;
         ui_cpnt_videoplayer_gradient_2: string;
         ui_cpnt_videoplayer_overlay: string;
         ui_globalmenucontainer_background: string;
@@ -1767,12 +1768,15 @@ declare const colorSet: {
         ui_135: string;
         ui_136: string;
         ui_137: string;
-        ui_cpnt_modal_gradient_1: string;
         ui_138: string;
         ui_139: string;
         ui_cpnt_sheet_base_29: string;
         ui_cpnt_sheet_base_30: string;
         ui_cpnt_sheet_base_31: string;
+        ui_cpnt_selcontrols_icon_white: string;
+        ui_cpnt_selcontrols_text_white: string;
+        ui_cpnt_selcontrols_icon_grey_01: string;
+        ui_cpnt_selcontrols_text_grey_01: 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

@@ -308,7 +308,7 @@ export interface UITheme {
     ui_cpnt_card_icon_background_03: string;
     ui_cpnt_bannerslide_gradient_1: string;
     ui_cpnt_bannerslide_gradient_2: string;
-    ui_cpnt_videoplayer_gradient_1: string;
+    ui_cpnt_modal_gradient_1: string;
     ui_cpnt_modal_gradient_2: string;
     ui_cpnt_list_icon_04: string;
     ui_cpnt_list_thumbnail_border: string;
@@ -316,6 +316,7 @@ export interface UITheme {
     ui_cpnt_list_thumbnail_gradient_2: string;
     ui_cpnt_list_base_area_active: string;
     ui_cpnt_contextmenu_base: string;
+    ui_cpnt_videoplayer_gradient_1: string;
     ui_cpnt_videoplayer_gradient_2: string;
     ui_cpnt_videoplayer_overlay: string;
     ui_globalmenucontainer_background: string;
@@ -888,10 +889,13 @@ export interface UITheme {
     ui_135: string;
     ui_136: string;
     ui_137: string;
-    ui_cpnt_modal_gradient_1: string;
     ui_138: string;
     ui_139: string;
     ui_cpnt_sheet_base_29: string;
     ui_cpnt_sheet_base_30: string;
     ui_cpnt_sheet_base_31: string;
+    ui_cpnt_selcontrols_icon_white: string;
+    ui_cpnt_selcontrols_text_white: string;
+    ui_cpnt_selcontrols_icon_grey_01: string;
+    ui_cpnt_selcontrols_text_grey_01: string;
 }

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

@@ -1,12 +1,14 @@
 /// <reference types="react" />
 import { Path } from 'react-hook-form';
 import type { IFormValues, PDSTextType } from '../../../common';
+type ColorTheme = 'none' | 'white' | 'grey1';
 type CheckboxProps = {
     text?: PDSTextType;
     fontWeight?: 'bold' | 'regular';
     state?: 'normal' | 'disabled';
     name: Path<IFormValues>;
+    colorTheme?: ColorTheme;
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 };
-declare function Checkbox({ text, fontWeight, state, name, onChange }: CheckboxProps): JSX.Element;
+declare function Checkbox({ text, fontWeight, state, name, colorTheme, onChange }: CheckboxProps): JSX.Element;
 export default Checkbox;

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

@@ -24,7 +24,7 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
 function Checkbox(_a) {
-    var text = _a.text, _b = _a.fontWeight, fontWeight = _b === void 0 ? 'regular' : _b, _c = _a.state, state = _c === void 0 ? 'normal' : _c, name = _a.name, onChange = _a.onChange;
+    var text = _a.text, _b = _a.fontWeight, fontWeight = _b === void 0 ? 'regular' : _b, _c = _a.state, state = _c === void 0 ? 'normal' : _c, name = _a.name, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'none' : _d, onChange = _a.onChange;
     var register = (0, react_hook_form_1.useFormContext)().register;
     var checkboxFormRegister = register(name);
     var isChecked = (0, react_hook_form_1.useWatch)({ name: name });
@@ -34,10 +34,24 @@ function Checkbox(_a) {
             onChange(e);
         }
     };
+    var colorThemeSet = {
+        none: {
+            iconColorkey: 'ui_cpnt_selcontrols_icon_default',
+            textColorKey: 'ui_cpnt_selcontrols_text_default'
+        },
+        white: {
+            iconColorkey: 'ui_cpnt_selcontrols_icon_white',
+            textColorKey: 'ui_cpnt_selcontrols_text_white'
+        },
+        grey1: {
+            iconColorkey: 'ui_cpnt_selcontrols_icon_grey_01',
+            textColorKey: 'ui_cpnt_selcontrols_text_grey_01'
+        }
+    };
     var icon = function () {
         switch (state) {
             case 'normal': {
-                return isChecked ? ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_on", fillType: "fill", colorKey: "ui_cpnt_selcontrols_icon_primary" })) : ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_off", fillType: "line", colorKey: "ui_cpnt_selcontrols_icon_default" }));
+                return isChecked ? ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_on", fillType: "fill", colorKey: "ui_cpnt_selcontrols_icon_primary" })) : ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_off", fillType: "line", colorKey: colorThemeSet[colorTheme].iconColorkey }));
             }
             case 'disabled': {
                 return isChecked ? ((0, jsx_runtime_1.jsxs)(S_OverrideIconWrapper, { children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_on", fillType: "fill", colorKey: "ui_cpnt_selcontrols_icon_primary" }) }), (0, jsx_runtime_1.jsx)(S_OverrideIcon, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_on", fillType: "fill", colorKey: "ui_cpnt_selcontrols_icon_on_base_hover" }) })] })) : ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_off", fillType: "line", colorKey: "ui_cpnt_selcontrols_icon_disabled" }));
@@ -45,7 +59,7 @@ function Checkbox(_a) {
         }
     };
     return ((0, jsx_runtime_1.jsx)(S_Checkbox, __assign({ "x-pds-name": "Checkbox", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: (0, jsx_runtime_1.jsxs)(S_Label, __assign({ htmlFor: name, isDisabled: state === 'disabled' }, { children: [icon(), text && ((0, jsx_runtime_1.jsx)(S_TextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: fontWeight === 'regular' ? 'body2Regular' : 'body2Bold', colorOverride: state === 'normal'
-                            ? 'ui_cpnt_selcontrols_text_default'
+                            ? colorThemeSet[colorTheme].textColorKey
                             : 'ui_cpnt_selcontrols_text_disabled' }) })), (0, jsx_runtime_1.jsx)("input", __assign({ hidden: true, type: "checkbox" }, checkboxFormRegister, { id: name, disabled: state === 'disabled', onChange: handleChange }))] })) })));
 }
 var S_Checkbox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 24px;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 24px;\n"])));

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

@@ -1,12 +1,14 @@
 /// <reference types="react" />
 import { Path } from 'react-hook-form';
 import type { IFormValues, PDSTextType } from '../../../common';
+type ColorTheme = 'none' | 'white' | 'grey1';
 type CheckboxProps = {
     text?: PDSTextType;
     fontWeight?: 'bold' | 'regular';
     state?: 'normal' | 'disabled';
     name: Path<IFormValues>;
+    colorTheme?: ColorTheme;
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 };
-declare function Checkbox({ text, fontWeight, state, name, onChange }: CheckboxProps): JSX.Element;
+declare function Checkbox({ text, fontWeight, state, name, colorTheme, onChange }: CheckboxProps): JSX.Element;
 export default Checkbox;

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

@@ -24,7 +24,7 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
 function Checkbox(_a) {
-    var text = _a.text, _b = _a.fontWeight, fontWeight = _b === void 0 ? 'regular' : _b, _c = _a.state, state = _c === void 0 ? 'normal' : _c, name = _a.name, onChange = _a.onChange;
+    var text = _a.text, _b = _a.fontWeight, fontWeight = _b === void 0 ? 'regular' : _b, _c = _a.state, state = _c === void 0 ? 'normal' : _c, name = _a.name, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'none' : _d, onChange = _a.onChange;
     var register = (0, react_hook_form_1.useFormContext)().register;
     var checkboxFormRegister = register(name);
     var isChecked = (0, react_hook_form_1.useWatch)({ name: name });
@@ -34,10 +34,24 @@ function Checkbox(_a) {
             onChange(e);
         }
     };
+    var colorThemeSet = {
+        none: {
+            iconColorkey: 'ui_cpnt_selcontrols_icon_default',
+            textColorKey: 'ui_cpnt_selcontrols_text_default'
+        },
+        white: {
+            iconColorkey: 'ui_cpnt_selcontrols_icon_white',
+            textColorKey: 'ui_cpnt_selcontrols_text_white'
+        },
+        grey1: {
+            iconColorkey: 'ui_cpnt_selcontrols_icon_grey_01',
+            textColorKey: 'ui_cpnt_selcontrols_text_grey_01'
+        }
+    };
     var icon = function () {
         switch (state) {
             case 'normal': {
-                return isChecked ? ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_on", fillType: "fill", colorKey: "ui_cpnt_selcontrols_icon_primary" })) : ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_off", fillType: "line", colorKey: "ui_cpnt_selcontrols_icon_default" }));
+                return isChecked ? ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_on", fillType: "fill", colorKey: "ui_cpnt_selcontrols_icon_primary" })) : ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_off", fillType: "line", colorKey: colorThemeSet[colorTheme].iconColorkey }));
             }
             case 'disabled': {
                 return isChecked ? ((0, jsx_runtime_1.jsxs)(S_OverrideIconWrapper, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_on", fillType: "fill", colorKey: "ui_cpnt_selcontrols_icon_primary" }), (0, jsx_runtime_1.jsx)(S_OverrideIcon, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_on", fillType: "fill", colorKey: "ui_cpnt_selcontrols_icon_on_base_hover" }) })] })) : ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_off", fillType: "line", colorKey: "ui_cpnt_selcontrols_icon_disabled" }));
@@ -45,7 +59,7 @@ function Checkbox(_a) {
         }
     };
     return ((0, jsx_runtime_1.jsx)(S_Checkbox, __assign({ "x-pds-name": "Checkbox", "x-pds-element-type": "component", "x-pds-device-type": "mobile" }, { children: (0, jsx_runtime_1.jsxs)(S_Label, __assign({ htmlFor: name }, { children: [icon(), text && ((0, jsx_runtime_1.jsx)(S_TextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: fontWeight === 'regular' ? 'body2Regular' : 'body2Bold', colorOverride: state === 'normal'
-                            ? 'ui_cpnt_selcontrols_text_default'
+                            ? colorThemeSet[colorTheme].textColorKey
                             : 'ui_cpnt_selcontrols_text_disabled' }) })), (0, jsx_runtime_1.jsx)("input", __assign({ hidden: true, type: "checkbox" }, checkboxFormRegister, { id: name, disabled: state === 'disabled', onChange: handleChange }))] })) })));
 }
 var S_Checkbox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 24px;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 24px;\n"])));

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

@@ -57,6 +57,22 @@ var DatePicker = function (_a) {
     var _d = (0, react_1.useState)(function () {
         return dateHelper_1.DateHelper.startOfMonth(dateHelper_1.DateHelper.parseDate(startDate));
     }), currentMonth = _d[0], setCurrentMonth = _d[1];
+    var isPrevButtonDisabled = (0, react_1.useMemo)(function () {
+        if (!minDate)
+            return false;
+        var parsedMinDate = dateHelper_1.DateHelper.parseDate(minDate);
+        return (currentMonth.getFullYear() < parsedMinDate.getFullYear() ||
+            (currentMonth.getFullYear() === parsedMinDate.getFullYear() &&
+                currentMonth.getMonth() <= parsedMinDate.getMonth()));
+    }, [currentMonth, minDate]);
+    var isNextButtonDisabled = (0, react_1.useMemo)(function () {
+        if (!maxDate)
+            return false;
+        var parsedMaxDate = dateHelper_1.DateHelper.parseDate(maxDate);
+        return (currentMonth.getFullYear() > parsedMaxDate.getFullYear() ||
+            (currentMonth.getFullYear() === parsedMaxDate.getFullYear() &&
+                currentMonth.getMonth() >= parsedMaxDate.getMonth()));
+    }, [currentMonth, maxDate]);
     var handleDateClick = function (target) {
         if (!onChange)
             return;
@@ -95,7 +111,8 @@ var DatePicker = function (_a) {
     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.getMonth() === new Date().getMonth(), 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
+                }), 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
                             .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) {

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

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

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

@@ -13,8 +13,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, 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" }) }), (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" }) }), 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;
+    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 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;

package/package.json

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

package/release-note.md

@@ -1,6 +1,6 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v2.2.160]
+## [v2.2.162]
 ## daily|https://design.storybook.publ.biz/
 
 ### 업데이트 사항
-* [PDS-1294] ios에서 호버 이벤트 랜더링 안되는 이슈 해결
+* [PDS-1296]Checkbox 컴포넌트에 colorTheme prop 추가 건