pds-dev-kit-web 1.9.10 → 1.9.12

package/dist/index.d.ts

@@ -8,13 +8,14 @@ export * from './src/common/styles/movement/transitionStyle';
 export { Form };
 import { Divider, Icon, ImageView, LinearProgress, LottieIcon, Spacing, Switch } from './src/hybrid';
 export { Divider, Icon, ImageView, LinearProgress, LottieIcon, Spacing, Switch };
-import { LayoutWF, WFContainersBox, LayoutWH, WHContainersBox, LayoutWS, WSGlobalMenuContainer, WSContainersBox, LayoutWT, WTGlobalMenuContainer, WTContainersBox, 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_ReactionButton, D_Select, D_StatusBlock, D_TextButton, D_TextField, D_TextLabel, D_UploadIconButton, D_UploadMainButton, D_UploadTextButton, D_UserDesktopNavBar, D_UserDesktopTabBar, D_UserDesktopSideTab, D_AnnotationSheet, D_ContentSheet, D_DesktopBasicModal, D_DesktopHeadlessModal, D_SectionSheet } from './src/desktop';
+import { LayoutWF, WFContainersBox, LayoutWH, WHContainersBox, LayoutWS, WSGlobalMenuContainer, WSContainersBox, LayoutWT, WTGlobalMenuContainer, WTContainersBox, 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_ReactionButton, D_Select, D_StatusBlock, D_TextButton, D_TextField, D_TextLabel, D_UploadIconButton, D_UploadMainButton, D_UploadTextButton, D_UserDesktopNavBar, D_UserDesktopTabBar, D_UserDesktopSideTab, D_AnnotationSheet, D_ContentSheet, D_DesktopBasicModal, D_DesktopHeadlessModal, D_DesktopTutorialModal, DesktopTutorialModalInfoType, D_SectionSheet } from './src/desktop';
 export { LayoutWF, WFContainersBox };
 export { LayoutWH, WHContainersBox };
 export { LayoutWS, WSGlobalMenuContainer, WSContainersBox };
 export { LayoutWT, WTGlobalMenuContainer, WTContainersBox };
 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_ReactionButton, D_Select, D_StatusBlock, D_TextButton, D_TextField, D_TextLabel, D_UploadIconButton, D_UploadMainButton, D_UploadTextButton, D_UserDesktopNavBar, D_UserDesktopTabBar, D_UserDesktopSideTab };
-export { D_AnnotationSheet, D_ContentSheet, D_DesktopBasicModal, D_DesktopHeadlessModal, D_SectionSheet };
+export { D_AnnotationSheet, D_ContentSheet, D_DesktopBasicModal, D_DesktopHeadlessModal, D_DesktopTutorialModal, D_SectionSheet };
+export type { DesktopTutorialModalInfoType };
 import { LayoutMF, MFContainersBox, LayoutMM, MMNavigationContainer, MMContainersBox, LayoutMP, MPNavigationContainer, MPTabContainer, MPContainersBox, LayoutMS, MSNavigationContainer, MSContainersBox, M_BasicChatListItem, M_BasicFormGroup, M_BasicList, M_BasicListItem, M_BlogTextField, M_BodyTextGroup, M_Card, M_CardList, M_ChatBubbleListItem, M_ChatList, M_Checkbox, M_Chip, M_ContextMenu, M_ContextMenuItem, M_Dropdown, M_FloatingActionButton, M_HorizontalFormGroup, M_IconButton, M_ImageSlide, M_LottieReactionButton, M_MainButton, M_MobileAlertDialog, M_MobileHeaderBar, M_MobileTabBar, M_Radio, M_ReactionButton, M_Select, M_StatusBlock, M_TextButton, M_TextField, M_TextLabel, M_UploadIconButton, M_UploadMainButton, M_UploadTextButton, M_AnnotationSheet, M_ContentSheet, M_MobileBasicModal, M_SectionSheet } from './src/mobile';
 export { LayoutMF, MFContainersBox };
 export { LayoutMM, MMNavigationContainer, MMContainersBox };

package/dist/index.js

@@ -11,8 +11,8 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 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 = exports.Switch = exports.Spacing = exports.LottieIcon = exports.LinearProgress = exports.ImageView = exports.Icon = exports.Divider = exports.Form = exports.theme = exports.customTheme = exports.uiColors = exports.spacing = exports.boxShadow = exports.mobileEditorLineHeight = exports.mobileEditorFontSize = exports.mobileLineHeight = exports.mobileFontSize = exports.desktopEditorLineHeight = exports.desktopEditorFontSize = exports.desktopLineHeight = exports.desktopFontSize = exports.fontWeight = void 0;
-exports.M_BlogTextField = exports.M_BasicListItem = exports.M_BasicList = exports.M_BasicFormGroup = exports.M_BasicChatListItem = exports.MSContainersBox = exports.MSNavigationContainer = exports.LayoutMS = exports.MPContainersBox = exports.MPTabContainer = exports.MPNavigationContainer = exports.LayoutMP = exports.MMContainersBox = exports.MMNavigationContainer = exports.LayoutMM = exports.MFContainersBox = exports.LayoutMF = 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 = exports.D_TextLabel = exports.D_TextField = exports.D_TextButton = exports.D_StatusBlock = exports.D_Select = exports.D_ReactionButton = 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 = void 0;
-exports.DynamicLayout = exports.M_SectionSheet = exports.M_MobileBasicModal = exports.M_ContentSheet = exports.M_AnnotationSheet = exports.M_UploadTextButton = exports.M_UploadMainButton = exports.M_UploadIconButton = exports.M_TextLabel = exports.M_TextField = exports.M_TextButton = exports.M_StatusBlock = exports.M_Select = exports.M_ReactionButton = exports.M_Radio = exports.M_MobileTabBar = exports.M_MobileHeaderBar = exports.M_MobileAlertDialog = exports.M_MainButton = exports.M_LottieReactionButton = exports.M_ImageSlide = exports.M_IconButton = exports.M_HorizontalFormGroup = exports.M_FloatingActionButton = exports.M_Dropdown = exports.M_ContextMenuItem = exports.M_ContextMenu = exports.M_Chip = exports.M_Checkbox = exports.M_ChatList = exports.M_ChatBubbleListItem = exports.M_CardList = exports.M_Card = exports.M_BodyTextGroup = void 0;
+exports.M_BasicListItem = exports.M_BasicList = exports.M_BasicFormGroup = exports.M_BasicChatListItem = exports.MSContainersBox = exports.MSNavigationContainer = exports.LayoutMS = exports.MPContainersBox = exports.MPTabContainer = exports.MPNavigationContainer = exports.LayoutMP = exports.MMContainersBox = exports.MMNavigationContainer = exports.LayoutMM = exports.MFContainersBox = exports.LayoutMF = 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 = exports.D_TextLabel = exports.D_TextField = exports.D_TextButton = exports.D_StatusBlock = exports.D_Select = exports.D_ReactionButton = 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 = void 0;
+exports.DynamicLayout = exports.M_SectionSheet = exports.M_MobileBasicModal = exports.M_ContentSheet = exports.M_AnnotationSheet = exports.M_UploadTextButton = exports.M_UploadMainButton = exports.M_UploadIconButton = exports.M_TextLabel = exports.M_TextField = exports.M_TextButton = exports.M_StatusBlock = exports.M_Select = exports.M_ReactionButton = exports.M_Radio = exports.M_MobileTabBar = exports.M_MobileHeaderBar = exports.M_MobileAlertDialog = exports.M_MainButton = exports.M_LottieReactionButton = exports.M_ImageSlide = exports.M_IconButton = exports.M_HorizontalFormGroup = exports.M_FloatingActionButton = exports.M_Dropdown = exports.M_ContextMenuItem = exports.M_ContextMenu = exports.M_Chip = exports.M_Checkbox = exports.M_ChatList = exports.M_ChatBubbleListItem = exports.M_CardList = exports.M_Card = exports.M_BodyTextGroup = exports.M_BlogTextField = void 0;
 /* eslint-disable import/order */
 /* eslint-disable import/first */
 // common
@@ -109,6 +109,7 @@ Object.defineProperty(exports, "D_AnnotationSheet", { enumerable: true, get: fun
 Object.defineProperty(exports, "D_ContentSheet", { enumerable: true, get: function () { return desktop_1.D_ContentSheet; } });
 Object.defineProperty(exports, "D_DesktopBasicModal", { enumerable: true, get: function () { return desktop_1.D_DesktopBasicModal; } });
 Object.defineProperty(exports, "D_DesktopHeadlessModal", { enumerable: true, get: function () { return desktop_1.D_DesktopHeadlessModal; } });
+Object.defineProperty(exports, "D_DesktopTutorialModal", { enumerable: true, get: function () { return desktop_1.D_DesktopTutorialModal; } });
 Object.defineProperty(exports, "D_SectionSheet", { enumerable: true, get: function () { return desktop_1.D_SectionSheet; } });
 // mobile
 var mobile_1 = require("./src/mobile");

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

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

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

@@ -0,0 +1,36 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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 BookingExtension = function (_a) {
+    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
+    return (react_1.default.createElement("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest),
+        react_1.default.createElement("g", { fill: "none", fillRule: "evenodd" },
+            react_1.default.createElement("path", { fill: color, d: "M13.9607,8 C15.3377,8 16.4537,9.116 16.4537,10.493 L16.4537,18.124 C16.4537,19.501 15.3377,20.617 13.9607,20.617 L4.0307,20.617 C2.6537,20.617 1.5367,19.501 1.5367,18.124 L1.5367,10.493 C1.5367,9.116 2.6537,8 4.0307,8 L13.9607,8 Z M14.9537,11.633 L3.0367,11.633 L3.0367,18.124 C3.0367,18.672 3.4827,19.117 4.0307,19.117 L13.9607,19.117 C14.5087,19.117 14.9537,18.672 14.9537,18.124 L14.9537,11.633 Z M5.0458,17.0816 C5.4578,17.0816 5.7918,17.4166 5.7918,17.8286 C5.7918,18.2406 5.4578,18.5746 5.0458,18.5746 C4.6338,18.5746 4.2998,18.2406 4.2998,17.8286 C4.2998,17.4166 4.6338,17.0816 5.0458,17.0816 Z M7.675,17.0816 C8.087,17.0816 8.421,17.4166 8.421,17.8286 C8.421,18.2406 8.087,18.5746 7.675,18.5746 C7.263,18.5746 6.929,18.2406 6.929,17.8286 C6.929,17.4166 7.263,17.0816 7.675,17.0816 Z M5.0458,14.749 C5.4578,14.749 5.7918,15.084 5.7918,15.496 C5.7918,15.908 5.4578,16.242 5.0458,16.242 C4.6338,16.242 4.2998,15.908 4.2998,15.496 C4.2998,15.084 4.6338,14.749 5.0458,14.749 Z M7.675,14.749 C8.087,14.749 8.421,15.084 8.421,15.496 C8.421,15.908 8.087,16.242 7.675,16.242 C7.263,16.242 6.929,15.908 6.929,15.496 C6.929,15.084 7.263,14.749 7.675,14.749 Z M10.3044,14.749 L10.4056269,14.7558299 C10.7697472,14.8053681 11.0504,15.1183333 11.0504,15.496 C11.0504,15.908 10.7164,16.242 10.3044,16.242 L10.2031731,16.2351898 C9.83905278,16.1857917 9.5584,15.8736667 9.5584,15.496 C9.5584,15.084 9.8924,14.749 10.3044,14.749 Z M12.9337,14.749 C13.3457,14.749 13.6797,15.084 13.6797,15.496 C13.6797,15.908 13.3457,16.242 12.9337,16.242 C12.5217,16.242 12.1877,15.908 12.1877,15.496 C12.1877,15.084 12.5217,14.749 12.9337,14.749 Z M7.675,12.4163 C8.087,12.4163 8.421,12.7513 8.421,13.1633 C8.421,13.5753 8.087,13.9093 7.675,13.9093 C7.263,13.9093 6.929,13.5753 6.929,13.1633 C6.929,12.7513 7.263,12.4163 7.675,12.4163 Z M10.3044,12.4163 L10.4056269,12.4231299 C10.7697472,12.4726681 11.0504,12.7856333 11.0504,13.1633 C11.0504,13.5753 10.7164,13.9093 10.3044,13.9093 L10.2031731,13.9024898 C9.83905278,13.8530917 9.5584,13.5409667 9.5584,13.1633 C9.5584,12.7513 9.8924,12.4163 10.3044,12.4163 Z M12.9337,12.4163 C13.3457,12.4163 13.6797,12.7513 13.6797,13.1633 C13.6797,13.5753 13.3457,13.9093 12.9337,13.9093 C12.5217,13.9093 12.1877,13.5753 12.1877,13.1633 C12.1877,12.7513 12.5217,12.4163 12.9337,12.4163 Z" }),
+            react_1.default.createElement("path", { stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M15.8327,6.2368 L22.3407,6.2368 M19.0869,2.9826 L19.0869,9.4906" }))));
+};
+exports.default = BookingExtension;

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

@@ -18,6 +18,7 @@ declare const lineIcons: {
     readonly ic_bell_notification: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_booking: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_booking_completed: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_booking_extension: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_booking_history: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_booking_papp: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_booking_ticket: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;

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

@@ -21,6 +21,7 @@ var Bell_1 = __importDefault(require("./Bell"));
 var BellNotification_1 = __importDefault(require("./BellNotification"));
 var Booking_1 = __importDefault(require("./Booking"));
 var BookingCompleted_1 = __importDefault(require("./BookingCompleted"));
+var BookingExtension_1 = __importDefault(require("./BookingExtension"));
 var BookingHistory_1 = __importDefault(require("./BookingHistory"));
 var BookingPapp_1 = __importDefault(require("./BookingPapp"));
 var BookingTicket_1 = __importDefault(require("./BookingTicket"));
@@ -214,6 +215,7 @@ var lineIcons = {
     ic_bell_notification: BellNotification_1.default,
     ic_booking: Booking_1.default,
     ic_booking_completed: BookingCompleted_1.default,
+    ic_booking_extension: BookingExtension_1.default,
     ic_booking_history: BookingHistory_1.default,
     ic_booking_papp: BookingPapp_1.default,
     ic_booking_ticket: BookingTicket_1.default,

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

@@ -726,5 +726,12 @@
     "ui_cpnt_sheet_border_07": "sys_border_line_04",
     "ui_cpnt_sheet_base_14": "sys_cpnt_sheet_base_09",
     "ui_cpnt_sheet_base_15": "sys_cpnt_sheet_base_10",
-    "ui_cpnt_tutorialmodal_sidetab_default": "sys_component_base_white_opacity00"
+    "ui_cpnt_tutorialmodal_sidetab_default": "sys_component_base_white_opacity00",
+    "ui_cpnt_tutorialmodal_info_base": "sys_component_base_06",
+    "ui_domain_record_card_status_1": "sys_component_base_green",
+    "ui_domain_record_card_status_2": "sys_component_base_orange",
+    "ui_domain_record_card_status_3": "sys_component_base_red",
+    "ui_domain_record_card_status_4": "sys_component_base_grey",
+    "ui_cpnt_button_fill_base_tutorialmodal": "sys_component_base_black_opacity30",
+    "ui_cpnt_toolbar_base": "sys_component_base_white_opacity00"
 }

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

@@ -1,4 +1,102 @@
 declare const colorSet: {
+    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;
+    };
     readonly PaletteColor_light: {
         sys_container_background_01: string;
         sys_container_background_02: string;
@@ -1002,104 +1100,13 @@ declare const colorSet: {
         ui_cpnt_sheet_base_14: string;
         ui_cpnt_sheet_base_15: string;
         ui_cpnt_tutorialmodal_sidetab_default: 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;
+        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;
     };
     readonly PaletteColor_Dark: {
         sys_container_background_01: string;

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

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

@@ -727,4 +727,11 @@ export interface UITheme {
     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/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/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/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/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;

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

@@ -0,0 +1 @@
+export { default as SideTab } from './SideTab';

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

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SideTab = void 0;
+var SideTab_1 = require("./SideTab");
+Object.defineProperty(exports, "SideTab", { enumerable: true, get: function () { return __importDefault(SideTab_1).default; } });

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

@@ -0,0 +1,2 @@
+import { SideTab } from './SideTab';
+export { SideTab };

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SideTab = void 0;
+var SideTab_1 = require("./SideTab");
+Object.defineProperty(exports, "SideTab", { enumerable: true, get: function () { return SideTab_1.SideTab; } });