pds-dev-kit-web-test 0.1.1 → 0.1.2

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

@@ -712,4 +712,26 @@ export interface UITheme {
     ui_create_ch_step_prev: string;
     ui_editor_preview_editing: string;
     ui_cpnt_icon_sys_black: string;
+    ui_cpnt_textbutton_white_variation_base_hover: string;
+    ui_cpnt_textbutton_white_variation_base_pressed: string;
+    ui_74: string;
+    ui_cpnt_help_window: string;
+    ui_cpnt_tutorialmodal_sidetab_hover: string;
+    ui_cpnt_tutorialmodal_sidetab_pressed: string;
+    ui_cpnt_sheet_base_12: string;
+    ui_cpnt_sheet_base_13: string;
+    ui_cpnt_sheet_border_05: string;
+    ui_cpnt_sheet_border_06: string;
+    ui_75: string;
+    ui_cpnt_sheet_border_07: string;
+    ui_cpnt_sheet_base_14: string;
+    ui_cpnt_sheet_base_15: string;
+    ui_cpnt_tutorialmodal_sidetab_default: string;
+    ui_cpnt_tutorialmodal_info_base: string;
+    ui_domain_record_card_status_1: string;
+    ui_domain_record_card_status_2: string;
+    ui_domain_record_card_status_3: string;
+    ui_domain_record_card_status_4: string;
+    ui_cpnt_button_fill_base_tutorialmodal: string;
+    ui_cpnt_toolbar_base: string;
 }

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

@@ -88,7 +88,9 @@ function TextFieldBase(_a) {
         // NOTE: preventBlankMode === 'all'일 경우에는 무조건 onChange 시점에 적용
         if (textLineType === 'single' && preventBlankMode === 'all') {
             var value = e.target.value;
-            e.target.value = value.replace(/ /g, '');
+            if (value != null) {
+                e.target.value = value.replace(/ /g, '');
+            }
         }
         if (onChange) {
             onChange(e);
@@ -98,7 +100,9 @@ function TextFieldBase(_a) {
         // NOTE: preventBlankMode는 input에만 적용 가능
         // NOTE: preventBlankMode === 'trim'일 경우에는 무조건 onBlur 시점에 적용
         if (textLineType === 'single' && preventBlankMode === 'trim') {
-            setValue(name, e.target.value.replace(/^\s+|\s+$/gm, ''));
+            if (e.target.value != null) {
+                setValue(name, e.target.value.replace(/^\s+|\s+$/gm, ''));
+            }
         }
         if (onBlur && onTarget) {
             var relatedTarget = e.relatedTarget;

package/dist/src/desktop/components/AdminList/BulkActionBar.js

@@ -20,8 +20,7 @@ function BulkActionBar(_a) {
     return (react_1.default.createElement(S_BulkActionBar, null,
         react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_e", spacingType: "width" }),
         react_1.default.createElement(TextLabel_1.TextLabel, { text: t('str_n_selected', {
-                itemSelected: itemCount,
-                defaultValue: '{{itemSelected}}개 선택됨'
+                itemSelected: itemCount
             }), styleTheme: "body2Bold", colorTheme: "sysTextWhite" }),
         react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_e", spacingType: "width" }),
         react_1.default.createElement(hybrid_1.Divider, { direction: "vertical", height: 16 }),

package/dist/src/desktop/components/AdminListHeader/HeaderBar.js

@@ -46,7 +46,7 @@ function HeaderBar(_a) {
             react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: size === 'regular' ? 'headingBold' : 'body1Bold' })),
         react_1.default.createElement(S_HeaderControl, null,
             react_1.default.createElement(S_ListCount, null,
-                react_1.default.createElement(TextLabel_1.TextLabel, { text: t('str_rows_per_page', '목록 개수'), styleTheme: "caption1Regular" }),
+                react_1.default.createElement(TextLabel_1.TextLabel, { text: t('str_rows_per_page'), styleTheme: "caption1Regular" }),
                 react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),
                 react_1.default.createElement(Dropdown_1.Dropdown, { customWidth: "88px", size: "small", valueArray: dropdownTextArray, onChange: handleDropdown, defaultValue: dropdownDefaultValue !== null && dropdownDefaultValue !== void 0 ? dropdownDefaultValue : dropdownTextArray[0] })),
             react_1.default.createElement(S_Page, null,

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

@@ -5,6 +5,8 @@ declare type DesktopHeaderBarProps = {
     size?: 'xlarge' | 'large';
     leftDisplayType?: 'text' | 'icon' | 'back';
     iconName?: FillIconNameKeys | LineIconNameKeys;
+    leftBtn2Mode?: 'none' | 'mbtn' | 'tbtn';
+    leftBtn2Text?: PDSTextType;
     rightBtnMode?: 'none' | 'close' | 'mbtn' | 'mbtn_fill' | 'help_window';
     rightBtn2Mode?: 'none' | 'mbtn' | 'mbtn_fill' | 'help_window';
     rightBtn3Mode?: 'none' | 'help_window';
@@ -14,9 +16,10 @@ declare type DesktopHeaderBarProps = {
     mBtn2State?: 'normal' | 'disabled';
     dividerType?: 'none' | 'solid';
     onClickLeftBtn?: () => void;
+    onClickLeft2Btn?: () => void;
     onClickRightBtn?: () => void;
     onClickRightBtn2?: () => void;
     onClickRightBtn3?: () => void;
 };
-declare function DesktopHeaderBar({ text, size, leftDisplayType, iconName, rightBtnMode, rightBtn2Mode, rightBtn3Mode, mBtnText, mBtn2Text, mBtnState, mBtn2State, dividerType, onClickLeftBtn, onClickRightBtn, onClickRightBtn2, onClickRightBtn3 }: DesktopHeaderBarProps): JSX.Element;
+declare function DesktopHeaderBar({ text, size, leftDisplayType, iconName, leftBtn2Mode, leftBtn2Text, rightBtnMode, rightBtn2Mode, rightBtn3Mode, mBtnText, mBtn2Text, mBtnState, mBtn2State, dividerType, onClickLeftBtn, onClickLeft2Btn, onClickRightBtn, onClickRightBtn2, onClickRightBtn3 }: DesktopHeaderBarProps): JSX.Element;
 export default DesktopHeaderBar;

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

@@ -12,9 +12,10 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var hybrid_1 = require("../../../hybrid");
 var IconButton_1 = require("../IconButton");
 var MainButton_1 = require("../MainButton");
+var TextButton_1 = require("../TextButton");
 var TextLabel_1 = require("../TextLabel");
 function DesktopHeaderBar(_a) {
-    var text = _a.text, _b = _a.size, size = _b === void 0 ? 'xlarge' : _b, _c = _a.leftDisplayType, leftDisplayType = _c === void 0 ? 'text' : _c, iconName = _a.iconName, _d = _a.rightBtnMode, rightBtnMode = _d === void 0 ? 'none' : _d, _e = _a.rightBtn2Mode, rightBtn2Mode = _e === void 0 ? 'none' : _e, _f = _a.rightBtn3Mode, rightBtn3Mode = _f === void 0 ? 'none' : _f, mBtnText = _a.mBtnText, mBtn2Text = _a.mBtn2Text, _g = _a.mBtnState, mBtnState = _g === void 0 ? 'normal' : _g, _h = _a.mBtn2State, mBtn2State = _h === void 0 ? 'normal' : _h, _j = _a.dividerType, dividerType = _j === void 0 ? 'none' : _j, onClickLeftBtn = _a.onClickLeftBtn, onClickRightBtn = _a.onClickRightBtn, onClickRightBtn2 = _a.onClickRightBtn2, onClickRightBtn3 = _a.onClickRightBtn3;
+    var text = _a.text, _b = _a.size, size = _b === void 0 ? 'xlarge' : _b, _c = _a.leftDisplayType, leftDisplayType = _c === void 0 ? 'text' : _c, iconName = _a.iconName, leftBtn2Mode = _a.leftBtn2Mode, leftBtn2Text = _a.leftBtn2Text, _d = _a.rightBtnMode, rightBtnMode = _d === void 0 ? 'none' : _d, _e = _a.rightBtn2Mode, rightBtn2Mode = _e === void 0 ? 'none' : _e, _f = _a.rightBtn3Mode, rightBtn3Mode = _f === void 0 ? 'none' : _f, mBtnText = _a.mBtnText, mBtn2Text = _a.mBtn2Text, _g = _a.mBtnState, mBtnState = _g === void 0 ? 'normal' : _g, _h = _a.mBtn2State, mBtn2State = _h === void 0 ? 'normal' : _h, _j = _a.dividerType, dividerType = _j === void 0 ? 'none' : _j, onClickLeftBtn = _a.onClickLeftBtn, onClickLeft2Btn = _a.onClickLeft2Btn, onClickRightBtn = _a.onClickRightBtn, onClickRightBtn2 = _a.onClickRightBtn2, onClickRightBtn3 = _a.onClickRightBtn3;
     var isLastButtonIcon = rightBtnMode === 'close' ||
         rightBtnMode === 'help_window' ||
         (rightBtnMode === 'none' && rightBtn2Mode === 'help_window') ||
@@ -24,6 +25,11 @@ function DesktopHeaderBar(_a) {
             onClickLeftBtn();
         }
     };
+    var handleClickLeft2Btn = function () {
+        if (onClickLeft2Btn) {
+            onClickLeft2Btn();
+        }
+    };
     var handleClickRightBtn = function () {
         if (onClickRightBtn) {
             onClickRightBtn();
@@ -63,6 +69,23 @@ function DesktopHeaderBar(_a) {
             }
         }
     };
+    var leftButton2Mode = function () {
+        switch (leftBtn2Mode) {
+            case 'mbtn': {
+                return (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" }),
+                    react_1.default.createElement(MainButton_1.MainButton, { styleTheme: "secondary", size: "xsmall", text: leftBtn2Text, onClick: handleClickLeft2Btn })));
+            }
+            case 'tbtn': {
+                return (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" }),
+                    react_1.default.createElement(TextButton_1.TextButton, { size: "xsmall", text: leftBtn2Text, onClick: handleClickLeft2Btn })));
+            }
+            case 'none': {
+                return;
+            }
+        }
+    };
     var rightButton3Mode = function () {
         switch (rightBtn3Mode) {
             case 'help_window': {
@@ -111,7 +134,8 @@ function DesktopHeaderBar(_a) {
     return (react_1.default.createElement(S_DesktopHeaderBar, { "x-pds-name": "DesktopHeaderBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, hasDivider: dividerType === 'solid', hasBackIcon: leftDisplayType === 'back' },
         react_1.default.createElement(S_LeftDisplayBox, null,
             leftDisplayMode(),
-            react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "body1Bold", singleLineMode: "use", colorTheme: "sysTextPrimary" })),
+            react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "body1Bold", singleLineMode: "use", colorTheme: "sysTextPrimary" }),
+            leftButton2Mode()),
         react_1.default.createElement(S_ButtonBox, { isLastButtonIcon: isLastButtonIcon },
             rightButton3Mode(),
             rightButton2Mode(),

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

@@ -102,10 +102,12 @@ function EditApplyTextField(_a) {
      */
     function checkBlankMode() {
         if (textLineType === 'single' && preventBlankMode === 'trim') {
-            setValue(name, currentValue.replace(/^\s+|\s+$/gm, ''));
-            setPrevValue(currentValue.replace(/^\s+|\s+$/gm, ''));
-            if (getInputValue) {
-                getInputValue([name, currentValue.replace(/^\s+|\s+$/gm, '')]);
+            if (currentValue != null) {
+                setValue(name, currentValue.replace(/^\s+|\s+$/gm, ''));
+                setPrevValue(currentValue.replace(/^\s+|\s+$/gm, ''));
+                if (getInputValue) {
+                    getInputValue([name, currentValue.replace(/^\s+|\s+$/gm, '')]);
+                }
             }
         }
         if (preventBlankMode !== 'trim') {

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

@@ -7,7 +7,7 @@ export declare type TextButtonProps = {
     fontWeight?: 'bold' | 'regular';
     type?: 'submit' | 'reset' | 'button';
     state?: 'normal' | 'disabled';
-    colorTheme?: 'none' | 'red' | 'grey_01' | 'white';
+    colorTheme?: 'none' | 'red' | 'grey_01' | 'white' | 'white2';
     onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 };
 declare function TextButton({ text, size, responsiveMode, fontWeight, type, state, colorTheme, onClick, ...rest }: TextButtonProps): JSX.Element;

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

@@ -63,7 +63,8 @@ var textColor = {
     none: 'usrTextBrandPrimary',
     red: 'sysTextError',
     grey_01: 'sysTextPrimary',
-    white: 'sysTextWhite'
+    white: 'sysTextWhite',
+    white2: 'sysTextWhite'
 };
 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.colorTheme, colorTheme = _f === void 0 ? 'none' : _f, onClick = _a.onClick, rest = __rest(_a, ["text", "size", "responsiveMode", "fontWeight", "type", "state", "colorTheme", "onClick"]);
@@ -82,19 +83,44 @@ var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 =
 var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 14px;\n  height: 40px;\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n"], ["\n  border-radius: 14px;\n  height: 40px;\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n"])));
 var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-radius: 10px;\n  height: 32px;\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"], ["\n  border-radius: 10px;\n  height: 32px;\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"])));
 var xsmall = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border-radius: 8px;\n  height: 24px;\n\n  & > div {\n    height: 24px;\n    line-height: 24px;\n  }\n"], ["\n  border-radius: 8px;\n  height: 24px;\n\n  & > div {\n    height: 24px;\n    line-height: 24px;\n  }\n"])));
-var S_Button = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  justify-content: center;\n  padding-left: 8px;\n  padding-right: 8px;\n\n  ", "\n\n  &:hover:enabled {\n    background-color: ", ";\n  }\n  &:active:enabled {\n    background-color: ", ";\n  }\n  ", ";\n\n  & > div {\n    ", ";\n  }\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  justify-content: center;\n  padding-left: 8px;\n  padding-right: 8px;\n\n  ", "\n\n  &:hover:enabled {\n    background-color: ", ";\n  }\n  &:active:enabled {\n    background-color: ", ";\n  }\n  ", ";\n\n  & > div {\n    ", ";\n  }\n  ", ";\n"])), function (_a) {
+var colorThemeDefault = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  &:hover:enabled {\n    background-color: ", ";\n  }\n  &:active:enabled {\n    background-color: ", ";\n  }\n"], ["\n  &:hover:enabled {\n    background-color: ", ";\n  }\n  &:active:enabled {\n    background-color: ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_line_base_hover;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_line_base_pressed;
+});
+var colorThemeWhite = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  &:hover:enabled {\n    background-color: ", ";\n  }\n  &:active:enabled {\n    background-color: ", ";\n  }\n"], ["\n  &:hover:enabled {\n    background-color: ", ";\n  }\n  &:active:enabled {\n    background-color: ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_white_base_hover;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_white_base_pressed;
+});
+var colorThemeWhite2 = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  &:hover:enabled {\n    background-color: ", ";\n  }\n  &:active:enabled {\n    background-color: ", ";\n  }\n"], ["\n  &:hover:enabled {\n    background-color: ", ";\n  }\n  &:active:enabled {\n    background-color: ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_textbutton_white_variation_base_hover;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_textbutton_white_variation_base_pressed;
+});
+var S_Button = styled_components_1.default.button(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  justify-content: center;\n  padding-left: 8px;\n  padding-right: 8px;\n\n  ", "\n\n  ", ";\n\n  ", ";\n\n  & > div {\n    ", ";\n  }\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  justify-content: center;\n  padding-left: 8px;\n  padding-right: 8px;\n\n  ", "\n\n  ", ";\n\n  ", ";\n\n  & > div {\n    ", ";\n  }\n  ", ";\n"])), function (_a) {
     var state = _a.state;
     return (state === 'normal' ? 'pointer' : 'default');
 }, transitionStyle_1.ButtonTransition, function (_a) {
-    var theme = _a.theme, colorTheme = _a.colorTheme;
-    return colorTheme === 'white'
-        ? theme.ui_cpnt_button_white_base_hover
-        : theme.ui_cpnt_button_line_base_hover;
-}, function (_a) {
-    var theme = _a.theme, colorTheme = _a.colorTheme;
-    return colorTheme === 'white'
-        ? theme.ui_cpnt_button_white_base_pressed
-        : theme.ui_cpnt_button_line_base_pressed;
+    var colorTheme = _a.colorTheme;
+    switch (colorTheme) {
+        case 'none':
+        case 'red':
+        case 'grey_01':
+            return colorThemeDefault;
+        case 'white':
+            return colorThemeWhite;
+        case 'white2':
+            return colorThemeWhite2;
+        default:
+            return colorThemeDefault;
+    }
 }, function (_a) {
     var size = _a.size;
     return size &&
@@ -117,4 +143,4 @@ var S_Button = styled_components_1.default.button(templateObject_5 || (templateO
     return responsiveMode === 'use' && 'width: 100%';
 });
 exports.default = TextButton;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

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

@@ -35,7 +35,8 @@ export declare type TextFieldProps = {
     onClickIBtn2?: () => void;
     onFocus?: (e: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement>) => void;
     onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement> | React.KeyboardEvent<HTMLTextAreaElement>) => void;
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement> | React.KeyboardEvent<HTMLTextAreaElement>) => void;
     onTarget?: () => void;
 };
-declare function TextField({ name, hintText, defaultText, validation, validationPoint, preventBlankMode, enterSubmitMode, size, responsiveMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, state, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, colorTheme, max, maxLength, min, customWidth, autoComplete, onBlur, onChange, onClickIBtn1, onClickIBtn2, onFocus, onKeyUp, onTarget }: TextFieldProps): JSX.Element;
+declare function TextField({ name, hintText, defaultText, validation, validationPoint, preventBlankMode, enterSubmitMode, size, responsiveMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, state, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, colorTheme, max, maxLength, min, customWidth, autoComplete, onBlur, onChange, onClickIBtn1, onClickIBtn2, onFocus, onKeyUp, onKeyDown, onTarget }: TextFieldProps): JSX.Element;
 export default TextField;

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

@@ -32,7 +32,7 @@ var components_1 = require("../../common/components");
 var IconButton_1 = require("../IconButton");
 function TextField(_a) {
     var _b;
-    var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, validation = _a.validation, _c = _a.validationPoint, validationPoint = _c === void 0 ? 'onBlur' : _c, _d = _a.preventBlankMode, preventBlankMode = _d === void 0 ? 'none' : _d, _e = _a.enterSubmitMode, enterSubmitMode = _e === void 0 ? 'none' : _e, _f = _a.size, size = _f === void 0 ? 'large' : _f, _g = _a.responsiveMode, responsiveMode = _g === void 0 ? 'none' : _g, _h = _a.textLineType, textLineType = _h === void 0 ? 'single' : _h, _j = _a.multiRows, multiRows = _j === void 0 ? 8 : _j, _k = _a.autoMinRows, autoMinRows = _k === void 0 ? 8 : _k, autoMaxRows = _a.autoMaxRows, _l = _a.inputType, inputType = _l === void 0 ? 'text' : _l, _m = _a.state, state = _m === void 0 ? 'normal' : _m, iBtn1IconName = _a.iBtn1IconName, _o = _a.iBtn1IconFillType, iBtn1IconFillType = _o === void 0 ? 'line' : _o, iBtn2IconName = _a.iBtn2IconName, _p = _a.iBtn2IconFillType, iBtn2IconFillType = _p === void 0 ? 'line' : _p, _q = _a.colorTheme, colorTheme = _q === void 0 ? 'none' : _q, max = _a.max, maxLength = _a.maxLength, min = _a.min, customWidth = _a.customWidth, _r = _a.autoComplete, autoComplete = _r === void 0 ? 'on' : _r, onBlur = _a.onBlur, onChange = _a.onChange, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onFocus = _a.onFocus, onKeyUp = _a.onKeyUp, onTarget = _a.onTarget;
+    var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, validation = _a.validation, _c = _a.validationPoint, validationPoint = _c === void 0 ? 'onBlur' : _c, _d = _a.preventBlankMode, preventBlankMode = _d === void 0 ? 'none' : _d, _e = _a.enterSubmitMode, enterSubmitMode = _e === void 0 ? 'none' : _e, _f = _a.size, size = _f === void 0 ? 'large' : _f, _g = _a.responsiveMode, responsiveMode = _g === void 0 ? 'none' : _g, _h = _a.textLineType, textLineType = _h === void 0 ? 'single' : _h, _j = _a.multiRows, multiRows = _j === void 0 ? 8 : _j, _k = _a.autoMinRows, autoMinRows = _k === void 0 ? 8 : _k, autoMaxRows = _a.autoMaxRows, _l = _a.inputType, inputType = _l === void 0 ? 'text' : _l, _m = _a.state, state = _m === void 0 ? 'normal' : _m, iBtn1IconName = _a.iBtn1IconName, _o = _a.iBtn1IconFillType, iBtn1IconFillType = _o === void 0 ? 'line' : _o, iBtn2IconName = _a.iBtn2IconName, _p = _a.iBtn2IconFillType, iBtn2IconFillType = _p === void 0 ? 'line' : _p, _q = _a.colorTheme, colorTheme = _q === void 0 ? 'none' : _q, max = _a.max, maxLength = _a.maxLength, min = _a.min, customWidth = _a.customWidth, _r = _a.autoComplete, autoComplete = _r === void 0 ? 'on' : _r, onBlur = _a.onBlur, onChange = _a.onChange, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onFocus = _a.onFocus, onKeyUp = _a.onKeyUp, onKeyDown = _a.onKeyDown, onTarget = _a.onTarget;
     var basicThemeIconColors = {
         normal: 'ui_cpnt_button_icon_default',
         read_only: 'ui_cpnt_button_icon_default',
@@ -80,6 +80,11 @@ function TextField(_a) {
             onKeyUp(e);
         }
     }
+    function handleKeyDown(e) {
+        if (onKeyDown) {
+            onKeyDown(e);
+        }
+    }
     function handleChange(e) {
         if (validationPoint === 'onChange') {
             validateOnChange(e);
@@ -100,10 +105,10 @@ function TextField(_a) {
     }
     var S_TextField = function () {
         if (textLineType === 'multi') {
-            return (react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, textLineType: "multi", multiRows: multiRows, state: state, colorTheme: colorTheme, maxLength: maxLength, textSize: "form2", textWeight: "normal", autoComplete: autoComplete, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp }));
+            return (react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, textLineType: "multi", multiRows: multiRows, state: state, colorTheme: colorTheme, maxLength: maxLength, textSize: "form2", textWeight: "normal", autoComplete: autoComplete, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown }));
         }
         if (textLineType === 'auto') {
-            return (react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, textLineType: "auto", autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, state: state, colorTheme: colorTheme, maxLength: maxLength, textSize: "form2", textWeight: "normal", autoComplete: autoComplete, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp }));
+            return (react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, textLineType: "auto", autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, state: state, colorTheme: colorTheme, maxLength: maxLength, textSize: "form2", textWeight: "normal", autoComplete: autoComplete, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown }));
         }
         if (textLineType === 'single') {
             var deleteIconColor = 'ui_cpnt_button_icon_disabled';
@@ -118,7 +123,7 @@ function TextField(_a) {
                 }
             }
             return (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, preventBlankMode: preventBlankMode, enterSubmitMode: enterSubmitMode, textLineType: "single", inputType: inputType, state: state, colorTheme: colorTheme, min: min, max: max, maxLength: maxLength, textSize: "form2", textWeight: "normal", deleteIconMode: "use", deleteIconSize: size === 'large' || size === 'rlarge' ? 20 : 16, deleteIconColor: deleteIconColor, isFocused: isFocused, autoComplete: autoComplete, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp }),
+                react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, preventBlankMode: preventBlankMode, enterSubmitMode: enterSubmitMode, textLineType: "single", inputType: inputType, state: state, colorTheme: colorTheme, min: min, max: max, maxLength: maxLength, textSize: "form2", textWeight: "normal", deleteIconMode: "use", deleteIconSize: size === 'large' || size === 'rlarge' ? 20 : 16, deleteIconColor: deleteIconColor, isFocused: isFocused, autoComplete: autoComplete, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown }),
                 react_1.default.createElement(S_IconBox, null,
                     iBtn2IconName && (react_1.default.createElement(IconButton_1.IconButton, { iconName: iBtn2IconName, baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: size === 'large' || size === 'rlarge' ? 20 : 16, iconColorKey: colorTheme &&
                             {

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

@@ -4,6 +4,7 @@ export declare type TextLabelProps = {
     text: PDSTextType;
     tooltipText?: PDSTextType;
     tooltipPosition?: 'left_top' | 'left_bottom' | 'right_top' | 'right_bottom';
+    tooltipIconColorKey?: UiColors;
     textAlign?: 'left' | 'center' | 'right';
     styleTheme?: 'displayBold' | 'wizardPageTitleBold' | 'headingBold' | 'leadParaBold' | 'leadParaRegular' | 'subTitleBold' | 'subTitleRegular' | 'body1Bold' | 'body1Regular' | 'body2Bold' | 'body2Regular' | 'caption1Bold' | 'caption1Regular' | 'caption2Bold' | 'caption2Regular' | 'form1Regular' | 'form2Regular' | 'blog1Regular';
     colorOverride?: UiColors;
@@ -37,5 +38,5 @@ export declare type TextStyleProps = {
     wordBreak?: 'normal' | 'break_all' | 'keep_all' | 'break_word';
     $letterSpacing?: string;
 };
-declare function TextLabel({ text, tooltipText, tooltipPosition, textAlign, styleTheme, colorOverride, colorTheme, singleLineMode, ellipsisMode, lineLimit, userSelectMode, customFontSize, customFontWeight, textDecorationType, requirementMode, bulletPointMode, wordBreak, letterSpacing }: TextLabelProps): JSX.Element;
+declare function TextLabel({ text, tooltipText, tooltipPosition, tooltipIconColorKey, textAlign, styleTheme, colorOverride, colorTheme, singleLineMode, ellipsisMode, lineLimit, userSelectMode, customFontSize, customFontWeight, textDecorationType, requirementMode, bulletPointMode, wordBreak, letterSpacing }: TextLabelProps): JSX.Element;
 export default TextLabel;

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

@@ -27,8 +27,8 @@ var react_1 = __importStar(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var hybrid_1 = require("../../../hybrid");
 function TextLabel(_a) {
-    var text = _a.text, tooltipText = _a.tooltipText, _b = _a.tooltipPosition, tooltipPosition = _b === void 0 ? 'right_bottom' : _b, _c = _a.textAlign, textAlign = _c === void 0 ? 'left' : _c, _d = _a.styleTheme, styleTheme = _d === void 0 ? 'body2Bold' : _d, colorOverride = _a.colorOverride, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'sysTextPrimary' : _e, _f = _a.singleLineMode, singleLineMode = _f === void 0 ? 'none' : _f, _g = _a.ellipsisMode, ellipsisMode = _g === void 0 ? 'none' : _g, lineLimit = _a.lineLimit, _h = _a.userSelectMode, userSelectMode = _h === void 0 ? 'none' : _h, customFontSize = _a.customFontSize, customFontWeight = _a.customFontWeight, _j = _a.textDecorationType, textDecorationType = _j === void 0 ? 'none' : _j, _k = _a.requirementMode, requirementMode = _k === void 0 ? 'none' : _k, _l = _a.bulletPointMode, bulletPointMode = _l === void 0 ? 'none' : _l, _m = _a.wordBreak, wordBreak = _m === void 0 ? 'keep_all' : _m, letterSpacing = _a.letterSpacing;
-    var _o = (0, react_1.useState)(false), isTooltipOpen = _o[0], setIsTooltipOpen = _o[1];
+    var text = _a.text, tooltipText = _a.tooltipText, _b = _a.tooltipPosition, tooltipPosition = _b === void 0 ? 'right_bottom' : _b, _c = _a.tooltipIconColorKey, tooltipIconColorKey = _c === void 0 ? 'ui_cpnt_icon_sys_grey_03' : _c, _d = _a.textAlign, textAlign = _d === void 0 ? 'left' : _d, _e = _a.styleTheme, styleTheme = _e === void 0 ? 'body2Bold' : _e, colorOverride = _a.colorOverride, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'sysTextPrimary' : _f, _g = _a.singleLineMode, singleLineMode = _g === void 0 ? 'none' : _g, _h = _a.ellipsisMode, ellipsisMode = _h === void 0 ? 'none' : _h, lineLimit = _a.lineLimit, _j = _a.userSelectMode, userSelectMode = _j === void 0 ? 'none' : _j, customFontSize = _a.customFontSize, customFontWeight = _a.customFontWeight, _k = _a.textDecorationType, textDecorationType = _k === void 0 ? 'none' : _k, _l = _a.requirementMode, requirementMode = _l === void 0 ? 'none' : _l, _m = _a.bulletPointMode, bulletPointMode = _m === void 0 ? 'none' : _m, _o = _a.wordBreak, wordBreak = _o === void 0 ? 'keep_all' : _o, letterSpacing = _a.letterSpacing;
+    var _p = (0, react_1.useState)(false), isTooltipOpen = _p[0], setIsTooltipOpen = _p[1];
     var handleTooltipToggle = function (value) {
         setIsTooltipOpen(value);
     };
@@ -39,7 +39,7 @@ function TextLabel(_a) {
                 react_1.default.createElement(hybrid_1.Icon, { iconName: "ic_requirement", size: 16, fillType: "line", colorKey: "ui_cpnt_icon_sys_error_01" })))),
         tooltipText && (react_1.default.createElement(S_AfterTextBox, { styleTheme: styleTheme },
             react_1.default.createElement(S_IconWrapper, { onMouseEnter: function () { return handleTooltipToggle(true); }, onMouseLeave: function () { return handleTooltipToggle(false); } },
-                react_1.default.createElement(hybrid_1.Icon, { iconName: "ic_question", size: 16, fillType: "fill", colorKey: "ui_cpnt_icon_sys_grey_03" })),
+                react_1.default.createElement(hybrid_1.Icon, { iconName: "ic_question", size: 16, fillType: "fill", colorKey: tooltipIconColorKey })),
             react_1.default.createElement(S_TooltipWrapper, { className: "TooltipWrapper", isTooltipOpen: isTooltipOpen, tooltipPosition: tooltipPosition }, "" + tooltipText)))));
 }
 var displayBold = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"], ["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"])), function (_a) {

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

@@ -6,7 +6,7 @@ declare type UploadTextButtonProps = {
     responsiveMode?: 'none' | 'use';
     fontWeight?: 'bold' | 'regular';
     state?: 'normal' | 'disabled';
-    colorTheme?: 'none' | 'red' | 'grey_01' | 'white';
+    colorTheme?: 'none' | 'red' | 'grey_01' | 'white' | 'white2';
     accept?: string;
     multipleMode?: 'none' | 'use';
     onClick?: (e: React.ChangeEvent<HTMLInputElement>) => void;

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

@@ -41,7 +41,8 @@ var textColor = {
     none: 'usrTextBrandPrimary',
     red: 'sysTextError',
     grey_01: 'sysTextPrimary',
-    white: 'sysTextWhite'
+    white: 'sysTextWhite',
+    white2: 'sysTextWhite'
 };
 function UploadTextButton(_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.state, state = _d === void 0 ? 'normal' : _d, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'none' : _e, _f = _a.accept, accept = _f === void 0 ? '*' : _f, _g = _a.multipleMode, multipleMode = _g === void 0 ? 'none' : _g, onClick = _a.onClick;
@@ -51,7 +52,7 @@ function UploadTextButton(_a) {
         }
         e.target.value = '';
     };
-    return (react_1.default.createElement(S_UploadTextButton, { "x-pds-name": "UploadTextButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, responsiveMode: responsiveMode, fontWeight: fontWeight, disabled: state === 'disabled' },
+    return (react_1.default.createElement(S_UploadTextButton, { "x-pds-name": "UploadTextButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, responsiveMode: responsiveMode, fontWeight: fontWeight, disabled: state === 'disabled', colorTheme: colorTheme },
         react_1.default.createElement("input", { type: "file", hidden: true, disabled: state === 'disabled', accept: accept, multiple: multipleMode === 'use', onChange: handleClick }),
         react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor[colorTheme], singleLineMode: "use", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })));
 }
@@ -62,18 +63,47 @@ var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 =
 var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 14px;\n  height: 40px;\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n"], ["\n  border-radius: 14px;\n  height: 40px;\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n"])));
 var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-radius: 10px;\n  height: 32px;\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"], ["\n  border-radius: 10px;\n  height: 32px;\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"])));
 var xsmall = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border-radius: 8px;\n  height: 24px;\n\n  & > div {\n    height: 24px;\n    line-height: 24px;\n  }\n"], ["\n  border-radius: 8px;\n  height: 24px;\n\n  & > div {\n    height: 24px;\n    line-height: 24px;\n  }\n"])));
-var S_UploadTextButton = styled_components_1.default.label(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n  padding: 0 ", ";\n\n  ", "\n\n  &:hover:not([disabled]) {\n    background-color: ", ";\n  }\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n\n  & > div {\n    font-weight: ", ";\n  }\n\n  ", ";\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n  padding: 0 ", ";\n\n  ", "\n\n  &:hover:not([disabled]) {\n    background-color: ", ";\n  }\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n\n  & > div {\n    font-weight: ", ";\n  }\n\n  ", ";\n  ", ";\n"])), function (_a) {
+var colorThemeDefault = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  &:hover:not([disabled]) {\n    background-color: ", ";\n  }\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n"], ["\n  &:hover:not([disabled]) {\n    background-color: ", ";\n  }\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_line_base_hover;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_line_base_pressed;
+});
+var colorThemeWhite = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  &:hover:not([disabled]) {\n    background-color: ", ";\n  }\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n"], ["\n  &:hover:not([disabled]) {\n    background-color: ", ";\n  }\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_white_base_hover;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_white_base_pressed;
+});
+var colorThemeWhite2 = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  &:hover:not([disabled]) {\n    background-color: ", ";\n  }\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n"], ["\n  &:hover:not([disabled]) {\n    background-color: ", ";\n  }\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_textbutton_white_variation_base_hover;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_textbutton_white_variation_base_pressed;
+});
+var S_UploadTextButton = styled_components_1.default.label(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n  padding: 0 ", ";\n\n  ", "\n\n  ", ";\n\n  & > div {\n    font-weight: ", ";\n  }\n\n  ", ";\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n  padding: 0 ", ";\n\n  ", "\n\n  ", ";\n\n  & > div {\n    font-weight: ", ";\n  }\n\n  ", ";\n  ", ";\n"])), function (_a) {
     var disabled = _a.disabled;
     return (disabled ? 'default' : 'pointer');
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
 }, transitionStyle_1.ButtonTransition, function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_button_line_base_hover;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_button_line_base_pressed;
+    var colorTheme = _a.colorTheme;
+    switch (colorTheme) {
+        case 'none':
+        case 'red':
+        case 'grey_01':
+            return colorThemeDefault;
+        case 'white':
+            return colorThemeWhite;
+        case 'white2':
+            return colorThemeWhite2;
+        default:
+            return colorThemeDefault;
+    }
 }, function (_a) {
     var theme = _a.theme, fontWeight = _a.fontWeight;
     return fontWeight &&
@@ -96,4 +126,4 @@ var S_UploadTextButton = styled_components_1.default.label(templateObject_5 || (
     return responsiveMode === 'use' && 'width: 100%';
 });
 exports.default = UploadTextButton;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/dist/src/desktop/index.d.ts

@@ -14,5 +14,6 @@ import { ContainersBox as WTContainersBox } from './layout/LayoutWT/ContainersBo
 export { LayoutWT, WTGlobalMenuContainer, WTContainersBox };
 import { AdminList as D_AdminList, AdminListHeader as D_AdminListHeader, AdminListItem as D_AdminListItem, BasicChatListItem as D_BasicChatListItem, BasicFormGroup as D_BasicFormGroup, BasicList as D_BasicList, BasicListItem as D_BasicListItem, BlogTextField as D_BlogTextField, BodyTextGroup as D_BodyTextGroup, Card as D_Card, CardList as D_CardList, ChatBubbleListItem as D_ChatBubbleListItem, ChatList as D_ChatList, Checkbox as D_Checkbox, Chip as D_Chip, ContextMenu as D_ContextMenu, ContextMenuItem as D_ContextMenuItem, DesktopAlertDialog as D_DesktopAlertDialog, DesktopHeaderBar as D_DesktopHeaderBar, DesktopTabBar as D_DesktopTabBar, Dropdown as D_Dropdown, DynamicDesktopNavBar as D_DynamicDesktopNavBar, DynamicDesktopNavBarTemplates as D_DynamicDesktopNavBarTemplates, EditApplyTextField as D_EditApplyTextField, FilterBar as D_FilterBar, FloatingActionButton as D_FloatingActionButton, Hero as D_Hero, HorizontalFormGroup as D_HorizontalFormGroup, IconButton as D_IconButton, ImageSlide as D_ImageSlide, LottieReactionButton as D_LottieReactionButton, MainButton as D_MainButton, PageTitleTextGroup as D_PageTitleTextGroup, Radio as D_Radio, ReactionButton as D_ReactionButton, Select as D_Select, StatusBlock as D_StatusBlock, TextButton as D_TextButton, TextField as D_TextField, TextLabel as D_TextLabel, UploadIconButton as D_UploadIconButton, UploadMainButton as D_UploadMainButton, UploadTextButton as D_UploadTextButton, UserDesktopNavBar as D_UserDesktopNavBar, UserDesktopTabBar as D_UserDesktopTabBar, UserDesktopSideTab as D_UserDesktopSideTab } from './components';
 export { D_AdminList, D_AdminListHeader, D_AdminListItem, D_BasicChatListItem, D_BasicFormGroup, D_BasicList, D_BasicListItem, D_BlogTextField, D_BodyTextGroup, D_Card, D_CardList, D_ChatBubbleListItem, D_ChatList, D_Checkbox, D_Chip, D_ContextMenu, D_ContextMenuItem, D_DesktopAlertDialog, D_DesktopHeaderBar, D_DesktopTabBar, D_Dropdown, D_DynamicDesktopNavBar, D_DynamicDesktopNavBarTemplates, D_EditApplyTextField, D_FilterBar, D_FloatingActionButton, D_Hero, D_HorizontalFormGroup, D_IconButton, D_ImageSlide, D_LottieReactionButton, D_MainButton, D_PageTitleTextGroup, D_Radio, D_Select, D_ReactionButton, D_StatusBlock, D_TextButton, D_TextField, D_TextLabel, D_UploadIconButton, D_UploadMainButton, D_UploadTextButton, D_UserDesktopNavBar, D_UserDesktopTabBar, D_UserDesktopSideTab };
-import { AnnotationSheet as D_AnnotationSheet, ContentSheet as D_ContentSheet, DesktopBasicModal as D_DesktopBasicModal, DesktopHeadlessModal as D_DesktopHeadlessModal, SectionSheet as D_SectionSheet } from './panels';
-export { D_AnnotationSheet, D_ContentSheet, D_DesktopBasicModal, D_DesktopHeadlessModal, D_SectionSheet };
+import { AnnotationSheet as D_AnnotationSheet, ContentSheet as D_ContentSheet, DesktopBasicModal as D_DesktopBasicModal, DesktopHeadlessModal as D_DesktopHeadlessModal, DesktopTutorialModal as D_DesktopTutorialModal, DesktopTutorialModalInfoType, SectionSheet as D_SectionSheet } from './panels';
+export { D_AnnotationSheet, D_ContentSheet, D_DesktopBasicModal, D_DesktopHeadlessModal, D_DesktopTutorialModal, D_SectionSheet };
+export { DesktopTutorialModalInfoType };

package/dist/src/desktop/index.js

@@ -3,7 +3,7 @@
 /* eslint-disable import/first */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.D_TextLabel = exports.D_TextField = exports.D_TextButton = exports.D_StatusBlock = exports.D_ReactionButton = exports.D_Select = exports.D_Radio = exports.D_PageTitleTextGroup = exports.D_MainButton = exports.D_LottieReactionButton = exports.D_ImageSlide = exports.D_IconButton = exports.D_HorizontalFormGroup = exports.D_Hero = exports.D_FloatingActionButton = exports.D_FilterBar = exports.D_EditApplyTextField = exports.D_DynamicDesktopNavBarTemplates = exports.D_DynamicDesktopNavBar = exports.D_Dropdown = exports.D_DesktopTabBar = exports.D_DesktopHeaderBar = exports.D_DesktopAlertDialog = exports.D_ContextMenuItem = exports.D_ContextMenu = exports.D_Chip = exports.D_Checkbox = exports.D_ChatList = exports.D_ChatBubbleListItem = exports.D_CardList = exports.D_Card = exports.D_BodyTextGroup = exports.D_BlogTextField = exports.D_BasicListItem = exports.D_BasicList = exports.D_BasicFormGroup = exports.D_BasicChatListItem = exports.D_AdminListItem = exports.D_AdminListHeader = exports.D_AdminList = exports.WTContainersBox = exports.WTGlobalMenuContainer = exports.LayoutWT = exports.WSContainersBox = exports.WSGlobalMenuContainer = exports.LayoutWS = exports.WHContainersBox = exports.LayoutWH = exports.WFContainersBox = exports.LayoutWF = void 0;
-exports.D_SectionSheet = exports.D_DesktopHeadlessModal = exports.D_DesktopBasicModal = exports.D_ContentSheet = exports.D_AnnotationSheet = exports.D_UserDesktopSideTab = exports.D_UserDesktopTabBar = exports.D_UserDesktopNavBar = exports.D_UploadTextButton = exports.D_UploadMainButton = exports.D_UploadIconButton = void 0;
+exports.D_SectionSheet = exports.D_DesktopTutorialModal = exports.D_DesktopHeadlessModal = exports.D_DesktopBasicModal = exports.D_ContentSheet = exports.D_AnnotationSheet = exports.D_UserDesktopSideTab = exports.D_UserDesktopTabBar = exports.D_UserDesktopNavBar = exports.D_UploadTextButton = exports.D_UploadMainButton = exports.D_UploadIconButton = void 0;
 // layoutWF
 var LayoutWF_1 = require("./layout/LayoutWF");
 Object.defineProperty(exports, "LayoutWF", { enumerable: true, get: function () { return LayoutWF_1.LayoutWF; } });
@@ -82,4 +82,5 @@ Object.defineProperty(exports, "D_AnnotationSheet", { enumerable: true, get: fun
 Object.defineProperty(exports, "D_ContentSheet", { enumerable: true, get: function () { return panels_1.ContentSheet; } });
 Object.defineProperty(exports, "D_DesktopBasicModal", { enumerable: true, get: function () { return panels_1.DesktopBasicModal; } });
 Object.defineProperty(exports, "D_DesktopHeadlessModal", { enumerable: true, get: function () { return panels_1.DesktopHeadlessModal; } });
+Object.defineProperty(exports, "D_DesktopTutorialModal", { enumerable: true, get: function () { return panels_1.DesktopTutorialModal; } });
 Object.defineProperty(exports, "D_SectionSheet", { enumerable: true, get: function () { return panels_1.SectionSheet; } });

package/dist/src/desktop/layout/LayoutWF/ContainersBox/ContainersBox.js

@@ -42,8 +42,6 @@ var ContainersBox = function (_a) {
         ? 'large'
         : 'small';
     return (react_1.default.createElement(S_Wrapper, { isWizardLayout: isWizardLayout },
-        react_1.default.createElement(S_VideoWrapper, null,
-            react_1.default.createElement(S_Video, { autoPlay: true, muted: true, playsInline: true, loop: true, src: "https://wp-s3-publ-landing.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/07/03200435/AdobeStock_478805549.mp4" })),
         react_1.default.createElement(S_ContainersBox, { isWizardLayout: isWizardLayout },
             pageMenuContent && (react_1.default.createElement(S_TopWrapper, null, isWizardLayout ? ({
                 small: (react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuType: "wizard_page_menu_864", pageMenuContent: pageMenuContent })),
@@ -121,23 +119,21 @@ var ContainersBox = function (_a) {
 var wizardBackgroundStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-image: url('https://publ-statics.s3.ap-northeast-2.amazonaws.com/pds_layout_background_gradient.jpg');\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-repeat: no-repeat;\n  background-size: cover;\n"], ["\n  background-image: url('https://publ-statics.s3.ap-northeast-2.amazonaws.com/pds_layout_background_gradient.jpg');\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-repeat: no-repeat;\n  background-size: cover;\n"])));
 var wizardContainersBoxStyle = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  justify-content: center;\n"], ["\n  justify-content: center;\n"])));
 var wizardCenterBoxStyle = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex: none;\n"], ["\n  flex: none;\n"])));
-var S_Wrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  position: relative;\n\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  position: relative;\n\n  ", "\n"])), function (_a) {
+var S_Wrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n\n  ", "\n"])), function (_a) {
     var isWizardLayout = _a.isWizardLayout;
     return isWizardLayout && wizardBackgroundStyle;
 });
-var S_VideoWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n"])));
-var S_Video = styled_components_1.default.video(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n"], ["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n"])));
-var S_ContainersBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  position: relative;\n  z-index: 1;\n\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  position: relative;\n  z-index: 1;\n\n  ", "\n"])), function (_a) {
+var S_ContainersBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n\n  ", "\n"])), function (_a) {
     var isWizardLayout = _a.isWizardLayout;
     return isWizardLayout && wizardContainersBoxStyle;
 });
-var S_TopWrapper = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
-var S_CenterBox = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  flex: 1;\n  overflow: hidden;\n  align-items: flex-start;\n  display: flex;\n\n  ", "\n"], ["\n  flex: 1;\n  overflow: hidden;\n  align-items: flex-start;\n  display: flex;\n\n  ", "\n"])), function (_a) {
+var S_TopWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
+var S_CenterBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  flex: 1;\n  overflow: hidden;\n  align-items: flex-start;\n  display: flex;\n\n  ", "\n"], ["\n  flex: 1;\n  overflow: hidden;\n  align-items: flex-start;\n  display: flex;\n\n  ", "\n"])), function (_a) {
     var isWizardLayout = _a.isWizardLayout;
     return isWizardLayout && wizardCenterBoxStyle;
 });
-var S_RightBox = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  height: 100%;\n  max-width: 100%;\n"], ["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  height: 100%;\n  max-width: 100%;\n"])));
-var S_ContentsWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  flex: 1;\n  overflow: hidden;\n"], ["\n  flex: 1;\n  overflow: hidden;\n"])));
-var S_BottomWrapper = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
+var S_RightBox = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  height: 100%;\n  max-width: 100%;\n"], ["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  height: 100%;\n  max-width: 100%;\n"])));
+var S_ContentsWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  flex: 1;\n  overflow: hidden;\n"], ["\n  flex: 1;\n  overflow: hidden;\n"])));
+var S_BottomWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
 exports.default = ContainersBox;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;

package/dist/src/desktop/panels/DesktopTutorialModal/Components/SideTab/SideTab.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { PDSTabItemOption } from '../../../../../common/types';
+export declare type ItemType = PDSTabItemOption;
+declare type SideTabProps = {
+    itemArray: ItemType[];
+};
+declare function SideTab({ itemArray }: SideTabProps): JSX.Element;
+export default SideTab;

package/dist/src/desktop/panels/DesktopTutorialModal/Components/SideTab/SideTab.js

@@ -0,0 +1,48 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var components_1 = require("../../../../components");
+function SideTab(_a) {
+    var itemArray = _a.itemArray;
+    var handleClickTabItem = function (item, e) {
+        if (item.onClick) {
+            item.onClick(e);
+        }
+    };
+    return (react_1.default.createElement("div", null, itemArray.map(function (item, index) {
+        return (react_1.default.createElement(S_TabWrapper, { key: index, onClick: function (e) { return handleClickTabItem(item, e); } },
+            react_1.default.createElement(components_1.TextLabel, { text: item.title, styleTheme: item.isActive ? 'subTitleBold' : 'subTitleRegular', colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextSecondary' })));
+    })));
+}
+var S_TabWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  background-color: ", ";\n  cursor: pointer;\n  padding-top: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n"], ["\n  box-sizing: border-box;\n  background-color: ", ";\n  cursor: pointer;\n  padding-top: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_tutorialmodal_sidetab_default;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingB;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingB;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_tutorialmodal_sidetab_hover;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_tutorialmodal_sidetab_pressed;
+});
+exports.default = SideTab;
+var templateObject_1;