pds-dev-kit-web-test 0.0.2 → 0.0.5

package/dist/index.d.ts

@@ -5,11 +5,11 @@ export { theme };
 export { Form };
 import { Divider, Icon, ImageView, Spacing, Switch } from './src/hybrid';
 export { Divider, Icon, ImageView, Spacing, Switch };
-import { LayoutWF, WFContainersBox, LayoutWS, WSGlobalMenuContainer, WSContainersBox, LayoutWT, WTGlobalMenuContainer, WTContainersBox, D_AdminList, D_AdminListHeader, D_AdminListItem, D_BasicFormGroup, D_BasicList, D_BasicListItem, D_BlogTextField, D_BodyTextGroup, D_Card, D_CardList, D_Checkbox, D_Chip, D_ContextMenu, D_ContextMenuItem, D_DesktopAlertDialog, D_DesktopBasicModal, D_DesktopHeaderBar, D_DesktopHeadlessModal, D_DesktopTabBar, D_Dropdown, D_EditApplyTextField, D_FilterBar, D_FloatingActionButton, D_Hero, D_HorizontalFormGroup, D_IconButton, D_ImageSlide, 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_DynamicDesktopNavBar } from './src/desktop';
+import { LayoutWF, WFContainersBox, LayoutWS, WSGlobalMenuContainer, WSContainersBox, LayoutWT, WTGlobalMenuContainer, WTContainersBox, D_AdminList, D_AdminListHeader, D_AdminListItem, D_BasicFormGroup, D_BasicList, D_BasicListItem, D_BlogTextField, D_BodyTextGroup, D_Card, D_CardList, D_Checkbox, D_Chip, D_ContextMenu, D_ContextMenuItem, D_DesktopAlertDialog, D_DesktopBasicModal, D_DesktopHeaderBar, D_DesktopHeadlessModal, D_DesktopTabBar, D_Dropdown, D_DynamicDesktopNavBar, D_DynamicDesktopNavBarTemplates, D_EditApplyTextField, D_FilterBar, D_FloatingActionButton, D_Hero, D_HorizontalFormGroup, D_IconButton, D_ImageSlide, 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 } from './src/desktop';
 export { LayoutWF, WFContainersBox };
 export { LayoutWS, WSGlobalMenuContainer, WSContainersBox };
 export { LayoutWT, WTGlobalMenuContainer, WTContainersBox };
-export { D_AdminList, D_AdminListHeader, D_AdminListItem, D_BasicFormGroup, D_BasicList, D_BasicListItem, D_BlogTextField, D_BodyTextGroup, D_Card, D_CardList, D_Checkbox, D_Chip, D_ContextMenu, D_ContextMenuItem, D_DesktopAlertDialog, D_DesktopBasicModal, D_DesktopHeaderBar, D_DesktopHeadlessModal, D_DesktopTabBar, D_Dropdown, D_EditApplyTextField, D_FilterBar, D_FloatingActionButton, D_Hero, D_HorizontalFormGroup, D_IconButton, D_ImageSlide, 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_DynamicDesktopNavBar };
+export { D_AdminList, D_AdminListHeader, D_AdminListItem, D_BasicFormGroup, D_BasicList, D_BasicListItem, D_BlogTextField, D_BodyTextGroup, D_Card, D_CardList, D_Checkbox, D_Chip, D_ContextMenu, D_ContextMenuItem, D_DesktopAlertDialog, D_DesktopBasicModal, D_DesktopHeaderBar, D_DesktopHeadlessModal, D_DesktopTabBar, D_Dropdown, D_EditApplyTextField, D_FilterBar, D_FloatingActionButton, D_Hero, D_HorizontalFormGroup, D_IconButton, D_ImageSlide, 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_DynamicDesktopNavBar, D_UserDesktopSideTab, D_DynamicDesktopNavBarTemplates };
 import { LayoutMF, MFContainersBox, LayoutMM, MMNavigationContainer, MMContainersBox, LayoutMP, MPNavigationContainer, MPTabContainer, MPContainersBox, LayoutMS, MSNavigationContainer, MSContainersBox, M_BasicFormGroup, M_BasicList, M_BasicListItem, M_BlogTextField, M_BodyTextGroup, M_Card, M_CardList, M_Checkbox, M_Chip, M_ContextMenu, M_ContextMenuItem, M_Dropdown, M_HorizontalFormGroup, M_IconButton, M_ImageSlide, M_MainButton, M_MobileAlertDialog, M_MobileBasicModal, M_MobileHeaderBar, M_MobileTabBar, M_Radio, M_ReactionButton, M_Select, M_StatusBlock, M_TextButton, M_TextField, M_TextLabel, M_UploadIconButton, M_UploadMainButton, M_UploadTextButton } from './src/mobile';
 export { LayoutMF, MFContainersBox };
 export { LayoutMM, MMNavigationContainer, MMContainersBox };

package/dist/index.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.D_IconButton = exports.D_HorizontalFormGroup = exports.D_Hero = exports.D_FloatingActionButton = exports.D_FilterBar = exports.D_EditApplyTextField = exports.D_Dropdown = exports.D_DesktopTabBar = exports.D_DesktopHeadlessModal = exports.D_DesktopHeaderBar = exports.D_DesktopBasicModal = exports.D_DesktopAlertDialog = exports.D_ContextMenuItem = exports.D_ContextMenu = exports.D_Chip = exports.D_Checkbox = exports.D_CardList = exports.D_Card = exports.D_BodyTextGroup = exports.D_BlogTextField = exports.D_BasicListItem = exports.D_BasicList = exports.D_BasicFormGroup = exports.D_AdminListItem = exports.D_AdminListHeader = exports.D_AdminList = exports.WTContainersBox = exports.WTGlobalMenuContainer = exports.LayoutWT = exports.WSContainersBox = exports.WSGlobalMenuContainer = exports.LayoutWS = exports.WFContainersBox = exports.LayoutWF = exports.Switch = exports.Spacing = exports.ImageView = exports.Icon = exports.Divider = exports.Form = exports.theme = exports.customTheme = exports.uiColors = exports.spacing = exports.boxShadow = exports.mobileLineHeight = exports.mobileFontSize = exports.desktopLineHeight = exports.desktopFontSize = exports.fontWeight = void 0;
-exports.M_ReactionButton = exports.M_Radio = exports.M_MobileTabBar = exports.M_MobileHeaderBar = exports.M_MobileBasicModal = exports.M_MobileAlertDialog = exports.M_MainButton = exports.M_ImageSlide = exports.M_IconButton = exports.M_HorizontalFormGroup = exports.M_Dropdown = exports.M_ContextMenuItem = exports.M_ContextMenu = exports.M_Chip = exports.M_Checkbox = exports.M_CardList = exports.M_Card = exports.M_BodyTextGroup = exports.M_BlogTextField = exports.M_BasicListItem = exports.M_BasicList = exports.M_BasicFormGroup = 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_DynamicDesktopNavBar = 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_ImageSlide = void 0;
-exports.M_UploadTextButton = exports.M_UploadMainButton = exports.M_UploadIconButton = exports.M_TextLabel = exports.M_TextField = exports.M_TextButton = exports.M_StatusBlock = exports.M_Select = void 0;
+exports.M_MobileTabBar = exports.M_MobileHeaderBar = exports.M_MobileBasicModal = exports.M_MobileAlertDialog = exports.M_MainButton = exports.M_ImageSlide = exports.M_IconButton = exports.M_HorizontalFormGroup = exports.M_Dropdown = exports.M_ContextMenuItem = exports.M_ContextMenu = exports.M_Chip = exports.M_Checkbox = exports.M_CardList = exports.M_Card = exports.M_BodyTextGroup = exports.M_BlogTextField = exports.M_BasicListItem = exports.M_BasicList = exports.M_BasicFormGroup = 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_DynamicDesktopNavBarTemplates = exports.D_UserDesktopSideTab = exports.D_DynamicDesktopNavBar = 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_ImageSlide = void 0;
+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 = void 0;
 /* eslint-disable import/order */
 /* eslint-disable import/first */
 // common
@@ -55,6 +55,8 @@ Object.defineProperty(exports, "D_DesktopHeaderBar", { enumerable: true, get: fu
 Object.defineProperty(exports, "D_DesktopHeadlessModal", { enumerable: true, get: function () { return desktop_1.D_DesktopHeadlessModal; } });
 Object.defineProperty(exports, "D_DesktopTabBar", { enumerable: true, get: function () { return desktop_1.D_DesktopTabBar; } });
 Object.defineProperty(exports, "D_Dropdown", { enumerable: true, get: function () { return desktop_1.D_Dropdown; } });
+Object.defineProperty(exports, "D_DynamicDesktopNavBar", { enumerable: true, get: function () { return desktop_1.D_DynamicDesktopNavBar; } });
+Object.defineProperty(exports, "D_DynamicDesktopNavBarTemplates", { enumerable: true, get: function () { return desktop_1.D_DynamicDesktopNavBarTemplates; } });
 Object.defineProperty(exports, "D_EditApplyTextField", { enumerable: true, get: function () { return desktop_1.D_EditApplyTextField; } });
 Object.defineProperty(exports, "D_FilterBar", { enumerable: true, get: function () { return desktop_1.D_FilterBar; } });
 Object.defineProperty(exports, "D_FloatingActionButton", { enumerable: true, get: function () { return desktop_1.D_FloatingActionButton; } });
@@ -76,7 +78,7 @@ Object.defineProperty(exports, "D_UploadMainButton", { enumerable: true, get: fu
 Object.defineProperty(exports, "D_UploadTextButton", { enumerable: true, get: function () { return desktop_1.D_UploadTextButton; } });
 Object.defineProperty(exports, "D_UserDesktopNavBar", { enumerable: true, get: function () { return desktop_1.D_UserDesktopNavBar; } });
 Object.defineProperty(exports, "D_UserDesktopTabBar", { enumerable: true, get: function () { return desktop_1.D_UserDesktopTabBar; } });
-Object.defineProperty(exports, "D_DynamicDesktopNavBar", { enumerable: true, get: function () { return desktop_1.D_DynamicDesktopNavBar; } });
+Object.defineProperty(exports, "D_UserDesktopSideTab", { enumerable: true, get: function () { return desktop_1.D_UserDesktopSideTab; } });
 // mobile
 var mobile_1 = require("./src/mobile");
 Object.defineProperty(exports, "LayoutMF", { enumerable: true, get: function () { return mobile_1.LayoutMF; } });

package/dist/src/common/assets/icons/fill/CheckboxOn.d.ts

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

package/dist/src/common/assets/icons/fill/CheckboxOn.js

@@ -1,12 +1,34 @@
 "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 CheckboxOn = function (_a) {
-    var color = _a.color, size = _a.size;
-    return (react_1.default.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24" },
+    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: "M18.461,-0.0003 L5.538,-0.0003 C2.479,-0.0003 -1.77635684e-14,2.4797 -1.77635684e-14,5.5387 L-1.77635684e-14,18.4617 C-1.77635684e-14,21.5207 2.479,23.9997 5.538,23.9997 L18.461,23.9997 C21.52,23.9997 24,21.5207 24,18.4617 L24,5.5387 C24,2.4797 21.52,-0.0003 18.461,-0.0003" }),
             react_1.default.createElement("path", { fill: "#FFF", d: "M19.624,7.6977 L11.173,18.7717 C11.009,18.9877 10.756,19.1167 10.485,19.1247 C10.476,19.1257 10.467,19.1257 10.458,19.1257 C10.197,19.1257 9.948,19.0117 9.776,18.8137 L4.409,12.5877 C4.084,12.2117 4.126,11.6427 4.503,11.3187 C4.881,10.9937 5.448,11.0367 5.772,11.4117 L10.416,16.7977 L18.193,6.6057 C18.494,6.2107 19.06,6.1347 19.455,6.4367 C19.85,6.7377 19.926,7.3027 19.624,7.6977" }))));

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

@@ -8,7 +8,7 @@ declare const fillIcons: {
     readonly ic_chat_counseling: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_chat_crm: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_checkbox_indeterminate: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
-    readonly ic_checkbox_on: ({ color, size }: import("../IconType").default) => JSX.Element;
+    readonly ic_checkbox_on: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_cloud_download: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_delete: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_downloaded: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;

package/dist/src/common/components/Navigations/ContextTextLabelNav.js

@@ -9,7 +9,7 @@ var NavLink_1 = __importDefault(require("./NavLink"));
 function TextLabelNav(_a, ref) {
     var to = _a.to, text = _a.text, openNewTab = _a.openNewTab, _b = _a.isActive, isActive = _b === void 0 ? false : _b, _c = _a.preventLineChange, preventLineChange = _c === void 0 ? false : _c;
     return preventLineChange ? (react_1.default.createElement(NavLink_1.default, { ref: ref, to: to, openNewTab: openNewTab, style: { width: 'max-content' } },
-        react_1.default.createElement(desktop_1.D_TextLabel, { text: text, styleTheme: isActive ? 'body2Bold' : 'body2Regular', ellipsisMode: "use", lineLimit: 1 }))) : (react_1.default.createElement(NavLink_1.default, { ref: ref, to: to, openNewTab: openNewTab },
-        react_1.default.createElement(desktop_1.D_TextLabel, { text: text, styleTheme: isActive ? 'body2Bold' : 'body2Regular' })));
+        react_1.default.createElement(desktop_1.D_TextLabel, { text: text, styleTheme: "form2Regular", ellipsisMode: "use", lineLimit: 1 }))) : (react_1.default.createElement(NavLink_1.default, { ref: ref, to: to, openNewTab: openNewTab },
+        react_1.default.createElement(desktop_1.D_TextLabel, { text: text, styleTheme: "form2Regular" })));
 }
 exports.default = TextLabelNav;

package/dist/src/common/components/Navigations/index.d.ts

@@ -1,2 +1,4 @@
 export { default as NavLink } from './NavLink';
 export { default as Navs } from './Navs';
+export { default as ContextTextLabelNav } from './ContextTextLabelNav';
+export { default as TextLabelNav } from './TextLabelNav';

package/dist/src/common/components/Navigations/index.js

@@ -3,8 +3,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Navs = exports.NavLink = void 0;
+exports.TextLabelNav = exports.ContextTextLabelNav = exports.Navs = exports.NavLink = void 0;
 var NavLink_1 = require("./NavLink");
 Object.defineProperty(exports, "NavLink", { enumerable: true, get: function () { return __importDefault(NavLink_1).default; } });
 var Navs_1 = require("./Navs");
 Object.defineProperty(exports, "Navs", { enumerable: true, get: function () { return __importDefault(Navs_1).default; } });
+var ContextTextLabelNav_1 = require("./ContextTextLabelNav");
+Object.defineProperty(exports, "ContextTextLabelNav", { enumerable: true, get: function () { return __importDefault(ContextTextLabelNav_1).default; } });
+var TextLabelNav_1 = require("./TextLabelNav");
+Object.defineProperty(exports, "TextLabelNav", { enumerable: true, get: function () { return __importDefault(TextLabelNav_1).default; } });

package/dist/src/common/decorators/withFormProvider.js

@@ -22,7 +22,10 @@ var react_hook_form_1 = require("react-hook-form");
 var components_1 = require("../components");
 var withFormProvider = function (storyFn) {
     var methods = (0, react_hook_form_1.useForm)({ mode: 'onChange' });
+    var handleSubmit = function (data) {
+        console.log('submit success', data);
+    };
     return (react_1.default.createElement(react_hook_form_1.FormProvider, __assign({}, methods),
-        react_1.default.createElement(components_1.Form, { onSubmit: function () { } }, storyFn())));
+        react_1.default.createElement(components_1.Form, { onSubmit: methods.handleSubmit(handleSubmit) }, storyFn())));
 };
 exports.withFormProvider = withFormProvider;

package/dist/src/common/styles/ToneTest/ToneTest.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare function ToneTest(): JSX.Element;
+export default ToneTest;

package/dist/src/common/styles/ToneTest/ToneTest.js

@@ -0,0 +1,397 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_router_dom_1 = require("react-router-dom");
+var styled_components_1 = require("styled-components");
+var desktop_1 = require("../../../desktop");
+var components_1 = require("../../../desktop/components");
+var hybrid_1 = require("../../../hybrid");
+var theme_1 = require("../theme");
+var mocks = [
+    {
+        conversionLinkSrc: 'https://www.naver.com/',
+        iconSrc: '',
+        menuItemType: 'WEB_LINK',
+        name: 'Default VOD',
+        iconName: 'ic_language',
+        pAppCode: 'C00001',
+        parsedNodes: [
+            {
+                conversionLinkSrc: '',
+                iconSrc: '',
+                menuItemType: 'NAV_P_APP',
+                name: 'Timeline is Timeline but Timeline',
+                pAppCode: 'A00001',
+                parsedNodes: [],
+                type: 'GENERAL_NODE',
+                visibilityLevel: 'SUBSCRIBER'
+            },
+            {
+                conversionLinkSrc: '',
+                iconSrc: '',
+                menuItemType: 'NAV_P_APP',
+                name: 'Notice',
+                pAppCode: 'A00002',
+                parsedNodes: [],
+                type: 'GENERAL_NODE',
+                visibilityLevel: 'SUBSCRIBER'
+            }
+        ],
+        type: 'GENERAL_NODE',
+        visibilityLevel: 'SUBSCRIBER'
+    },
+    {
+        conversionLinkSrc: '',
+        iconSrc: '',
+        iconName: 'ic_chat',
+        menuItemType: 'NAV_P_APP',
+        name: 'Free Board',
+        pAppCode: 'A00003',
+        parsedNodes: [
+            {
+                conversionLinkSrc: '',
+                iconSrc: '',
+                menuItemType: 'NAV_P_APP',
+                name: 'Event Live',
+                pAppCode: 'C00005',
+                parsedNodes: [],
+                type: 'GENERAL_NODE',
+                visibilityLevel: 'SUBSCRIBER'
+            },
+            {
+                conversionLinkSrc: '',
+                iconSrc: '',
+                menuItemType: 'NAV_P_APP',
+                name: 'Polleeee',
+                pAppCode: 'A00007',
+                parsedNodes: [],
+                type: 'GENERAL_NODE',
+                visibilityLevel: 'SUBSCRIBER'
+            }
+        ],
+        type: 'GENERAL_NODE',
+        visibilityLevel: 'SUBSCRIBER'
+    },
+    {
+        conversionLinkSrc: '',
+        iconSrc: '',
+        iconName: 'ic_camera',
+        menuItemType: 'NAV_P_APP',
+        name: 'Class VOD',
+        pAppCode: 'C00007',
+        parsedNodes: [
+            {
+                conversionLinkSrc: '',
+                iconSrc: '',
+                menuItemType: 'NAV_P_APP',
+                name: '이것은30자팹네임입니다.팹팹팹팹팹팹팹팹팹팹팹팹팹팹팹팹팹',
+                pAppCode: 'C00006',
+                parsedNodes: [],
+                type: 'GENERAL_NODE',
+                visibilityLevel: 'SUBSCRIBER'
+            },
+            {
+                conversionLinkSrc: '',
+                iconSrc: '',
+                menuItemType: 'NAV_P_APP',
+                name: 'Inquiry Board',
+                pAppCode: 'A00005',
+                parsedNodes: [],
+                type: 'GENERAL_NODE',
+                visibilityLevel: 'SUBSCRIBER'
+            }
+        ],
+        type: 'GENERAL_NODE',
+        visibilityLevel: 'SUBSCRIBER'
+    },
+    {
+        conversionLinkSrc: '',
+        iconSrc: '',
+        menuItemType: 'NAV_P_APP',
+        name: 'Welcome Page',
+        pAppCode: 'B00006',
+        parsedNodes: [],
+        type: 'GENERAL_NODE',
+        visibilityLevel: 'SUBSCRIBER'
+    },
+    {
+        conversionLinkSrc: '',
+        iconSrc: '',
+        menuItemType: 'NAV_P_APP',
+        name: 'Photobook',
+        pAppCode: 'B00005',
+        parsedNodes: [
+            {
+                conversionLinkSrc: '',
+                iconSrc: '',
+                menuItemType: 'NAV_P_APP',
+                name: 'Book a consultation',
+                pAppCode: 'E00001',
+                parsedNodes: [],
+                type: 'GENERAL_NODE',
+                visibilityLevel: 'SUBSCRIBER'
+            }
+        ],
+        type: 'GENERAL_NODE',
+        visibilityLevel: 'SUBSCRIBER'
+    },
+    {
+        conversionLinkSrc: '',
+        iconSrc: '',
+        menuItemType: 'NAV_P_APP',
+        name: 'OTT Type VOD',
+        pAppCode: 'C00002',
+        parsedNodes: [],
+        type: 'GENERAL_NODE',
+        visibilityLevel: 'SUBSCRIBER'
+    },
+    {
+        conversionLinkSrc: '',
+        iconSrc: '',
+        menuItemType: 'NAV_P_APP',
+        name: 'Outlink pApp',
+        pAppCode: 'B00002',
+        parsedNodes: [
+            {
+                conversionLinkSrc: '',
+                iconSrc: '',
+                menuItemType: 'NAV_P_APP',
+                name: 'OTT Type VR VOD',
+                pAppCode: 'C00013',
+                parsedNodes: [],
+                type: 'GENERAL_NODE',
+                visibilityLevel: 'SUBSCRIBER'
+            }
+        ],
+        type: 'GENERAL_NODE',
+        visibilityLevel: 'SUBSCRIBER'
+    },
+    {
+        conversionLinkSrc: '',
+        iconSrc: '',
+        menuItemType: 'NAV_P_APP',
+        name: 'Outlink pApp',
+        pAppCode: 'B00002',
+        parsedNodes: [
+            {
+                conversionLinkSrc: '',
+                iconSrc: '',
+                menuItemType: 'NAV_P_APP',
+                name: 'OTT Type VR VOD',
+                pAppCode: 'C00013',
+                parsedNodes: [],
+                type: 'GENERAL_NODE',
+                visibilityLevel: 'SUBSCRIBER'
+            }
+        ],
+        type: 'GENERAL_NODE',
+        visibilityLevel: 'SUBSCRIBER'
+    },
+    {
+        conversionLinkSrc: '',
+        iconSrc: '',
+        menuItemType: 'NAV_P_APP',
+        name: 'Outlink pApp',
+        pAppCode: 'B00002',
+        parsedNodes: [
+            {
+                conversionLinkSrc: '',
+                iconSrc: '',
+                menuItemType: 'NAV_P_APP',
+                name: 'OTT Type VR VOD',
+                pAppCode: 'C00013',
+                parsedNodes: [],
+                type: 'GENERAL_NODE',
+                visibilityLevel: 'SUBSCRIBER'
+            }
+        ],
+        type: 'GENERAL_NODE',
+        visibilityLevel: 'SUBSCRIBER'
+    },
+    {
+        conversionLinkSrc: '',
+        iconSrc: '',
+        menuItemType: 'NAV_P_APP',
+        name: 'Outlink pApp',
+        pAppCode: 'B00002',
+        parsedNodes: [
+            {
+                conversionLinkSrc: '',
+                iconSrc: '',
+                menuItemType: 'NAV_P_APP',
+                name: 'OTT Type VR VOD',
+                pAppCode: 'C00013',
+                parsedNodes: [],
+                type: 'GENERAL_NODE',
+                visibilityLevel: 'SUBSCRIBER'
+            }
+        ],
+        type: 'GENERAL_NODE',
+        visibilityLevel: 'SUBSCRIBER'
+    },
+    {
+        conversionLinkSrc: '',
+        iconSrc: '',
+        menuItemType: 'NAV_P_APP',
+        name: 'Outlink pApp',
+        pAppCode: 'B00002',
+        parsedNodes: [
+            {
+                conversionLinkSrc: '',
+                iconSrc: '',
+                menuItemType: 'NAV_P_APP',
+                name: 'OTT Type VR VOD',
+                pAppCode: 'C00013',
+                parsedNodes: [],
+                type: 'GENERAL_NODE',
+                visibilityLevel: 'SUBSCRIBER'
+            }
+        ],
+        type: 'GENERAL_NODE',
+        visibilityLevel: 'SUBSCRIBER'
+    },
+    {
+        conversionLinkSrc: '',
+        iconSrc: '',
+        menuItemType: 'NAV_P_APP',
+        name: 'Outlink pApp',
+        pAppCode: 'B00002',
+        parsedNodes: [
+            {
+                conversionLinkSrc: '',
+                iconSrc: '',
+                menuItemType: 'NAV_P_APP',
+                name: 'OTT Type VR VOD',
+                pAppCode: 'C00013',
+                parsedNodes: [],
+                type: 'GENERAL_NODE',
+                visibilityLevel: 'SUBSCRIBER'
+            }
+        ],
+        type: 'GENERAL_NODE',
+        visibilityLevel: 'SUBSCRIBER'
+    },
+    {
+        conversionLinkSrc: '',
+        iconSrc: '',
+        menuItemType: 'NAV_P_APP',
+        name: 'Outlink pApp',
+        pAppCode: 'B00002',
+        parsedNodes: [
+            {
+                conversionLinkSrc: '',
+                iconSrc: '',
+                menuItemType: 'NAV_P_APP',
+                name: 'OTT Type VR VOD',
+                pAppCode: 'C00013',
+                parsedNodes: [],
+                type: 'GENERAL_NODE',
+                visibilityLevel: 'SUBSCRIBER'
+            }
+        ],
+        type: 'GENERAL_NODE',
+        visibilityLevel: 'SUBSCRIBER'
+    },
+    {
+        conversionLinkSrc: '',
+        iconSrc: '',
+        menuItemType: 'NAV_P_APP',
+        name: 'Outlink pApp',
+        pAppCode: 'B00002',
+        parsedNodes: [
+            {
+                conversionLinkSrc: '',
+                iconSrc: '',
+                menuItemType: 'NAV_P_APP',
+                name: 'OTT Type VR VOD',
+                pAppCode: 'C00013',
+                parsedNodes: [],
+                type: 'GENERAL_NODE',
+                visibilityLevel: 'SUBSCRIBER'
+            }
+        ],
+        type: 'GENERAL_NODE',
+        visibilityLevel: 'SUBSCRIBER'
+    },
+    {
+        conversionLinkSrc: '',
+        iconSrc: '',
+        menuItemType: 'NAV_P_APP',
+        name: 'Outlink pApp',
+        pAppCode: 'B00002',
+        parsedNodes: [
+            {
+                conversionLinkSrc: '',
+                iconSrc: '',
+                menuItemType: 'NAV_P_APP',
+                name: 'OTT Type VR VOD',
+                pAppCode: 'C00013',
+                parsedNodes: [],
+                type: 'GENERAL_NODE',
+                visibilityLevel: 'SUBSCRIBER'
+            }
+        ],
+        type: 'GENERAL_NODE',
+        visibilityLevel: 'SUBSCRIBER'
+    }
+];
+function ToneTest() {
+    var _a = (0, react_1.useState)('LIGHT'), customTone = _a[0], setTone = _a[1];
+    var changeTone = function () {
+        if (customTone === 'LIGHT') {
+            setTone('DARK');
+        }
+        else {
+            setTone('LIGHT');
+        }
+    };
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(react_router_dom_1.BrowserRouter, null,
+            react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d" }),
+            react_1.default.createElement(components_1.MainButton, { iconName: "ic_arrow_round_left", text: "Toggle Tone", onClick: changeTone, styleTheme: "secondary" }),
+            react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d" }),
+            react_1.default.createElement(components_1.TextLabel, { text: "\uC774\uACF3\uC740 toggled\uB41C tone\uC744 \uB530\uB974\uB294 \uBD80\uBD84\uC785\uB2C8\uB2E4." }),
+            react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d" }),
+            react_1.default.createElement(styled_components_1.ThemeProvider, { theme: (0, theme_1.themeByGivenTone)(customTone) },
+                react_1.default.createElement(desktop_1.D_DynamicDesktopNavBar, { isPreview: true, brandLogo: {
+                        src: 'http://i.imgur.com/zVKjblJ.png',
+                        text: 'PEPSI',
+                        href: '/'
+                    }, userProfile: {
+                        src: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSL5qfISvgI8p95f3w5lZN9XNwYh1mRiIqEaQ&usqp=CAU',
+                        href: '/'
+                    }, primaryMenus: mocks, secondaryMenus: mocks, template: "W1_0005", basePath: "/channels/invitation" })),
+            react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_e" }),
+            react_1.default.createElement(hybrid_1.Divider, null),
+            react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d" }),
+            react_1.default.createElement(components_1.TextLabel, { text: "\uC774\uACF3\uC740 \uAE30\uBCF8 tone\uC744 \uB530\uB974\uB294 \uBD80\uBD84\uC785\uB2C8\uB2E4." }),
+            react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d" }),
+            react_1.default.createElement(desktop_1.D_DynamicDesktopNavBar, { isPreview: true, brandLogo: {
+                    src: 'http://i.imgur.com/zVKjblJ.png',
+                    text: 'PEPSI',
+                    href: '/'
+                }, userProfile: {
+                    src: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSL5qfISvgI8p95f3w5lZN9XNwYh1mRiIqEaQ&usqp=CAU',
+                    href: '/'
+                }, primaryMenus: mocks, secondaryMenus: mocks, template: "W1_0005", basePath: "/channels/invitation" }))));
+}
+exports.default = ToneTest;

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

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

package/dist/src/common/styles/ToneTest/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.ToneTest = void 0;
+var ToneTest_1 = require("./ToneTest");
+Object.defineProperty(exports, "ToneTest", { enumerable: true, get: function () { return __importDefault(ToneTest_1).default; } });

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

@@ -9,8 +9,8 @@
     "grey900": "#1e1e20",
     "grey500": "#68686b",
     "grey400": "#aaaab1",
-    "grey100": "#e8eaed",
-    "grey50": "#f5f6f8",
+    "grey100": "#e3e5e9",
+    "grey50": "#eff0f3",
     "white": "#ffffff",
     "black": "#000000",
     "darkblue500": "#586cff",
@@ -29,7 +29,7 @@
     "opacity30": "4D",
     "opacity65": "A6",
     "darkgreen500": "#0ce1a8",
-    "grey70": "#eff0f3",
+    "grey70": "#eaebef",
     "navy500": "#313349",
     "lightgreen500": "#32d64c",
     "pink500": "#FB3A63",
@@ -52,7 +52,8 @@
     "darknavy100": "#7A82B2",
     "opacity80": "CC",
     "opacity50": "80",
-    "grey30": "#f8f9fa",
+    "grey30": "#f5f5f8",
     "opacity95": "F2",
-    "darkgrey30": "#1d1d1e"
+    "darkgrey30": "#1d1d1e",
+    "opacity40": "66"
 }

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

@@ -359,9 +359,9 @@
     "ui_papp_live_background": "sys_papp_live_background",
     "ui_community_pagination_base_area": "sys_component_base_02",
     "ui_cpnt_contextmenu_border": "sys_border_line_01",
-    "ui_profile_image_border": "sys_border_line_07",
-    "ui_cpnt_alertdialog_border": "sys_border_line_01",
-    "ui_cpnt_modal_border": "sys_border_line_01",
+    "ui_profile_image_border": "sys_border_line_09",
+    "ui_cpnt_alertdialog_border": "sys_border_line_09",
+    "ui_cpnt_modal_border": "sys_border_line_09",
     "ui_cpnt_card_border": "sys_border_line_01",
     "ui_cpnt_overlay_border": "sys_border_line_01",
     "ui_cpnt_datatable_base_selected": "sys_component_base_blue_opacity10",
@@ -508,5 +508,10 @@
     "ui_cpnt_dropdown_border_darktheme_disabled": "sys_border_line_darktheme_06",
     "ui_cpnt_select_border_darktheme_disabled": "sys_border_line_darktheme_06",
     "ui_cpnt_dropdown_text_white_disabled": "sys_text_grey_03",
-    "ui_cpnt_select_base_darktheme_normal": "sys_component_base_darktheme_01"
+    "ui_cpnt_select_base_darktheme_normal": "sys_component_base_darktheme_01",
+    "ui_hero_title_text": "sys_text_white",
+    "ui_hero_description_text": "sys_text_white",
+    "ui_cpnt_divider_area": "sys_border_area_01",
+    "ui_cpnt_button_white_base_hover": "sys_component_base_darktheme_01",
+    "ui_cpnt_button_white_base_pressed": "sys_component_base_darktheme_03"
 }