pds-dev-kit-web-test 0.0.1 → 0.0.4

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

@@ -25,15 +25,14 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
-var common_1 = require("../../../common");
 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;
-    var _m = (0, react_1.useState)(false), isTooltipOpen = _m[0], setIsTooltipOpen = _m[1];
+    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;
+    var _o = (0, react_1.useState)(false), isTooltipOpen = _o[0], setIsTooltipOpen = _o[1];
     var handleTooltipToggle = function (value) {
         setIsTooltipOpen(value);
     };
-    return (react_1.default.createElement(S_TextLabel, { textAlign: textAlign, styleTheme: styleTheme, colorOverride: colorOverride, colorTheme: colorTheme, singleLineMode: singleLineMode, ellipsisMode: ellipsisMode, lineLimit: lineLimit, userSelectMode: userSelectMode, customFontSize: customFontSize, customFontWeight: customFontWeight, textDecorationType: textDecorationType, bulletPointMode: bulletPointMode },
+    return (react_1.default.createElement(S_TextLabel, { textAlign: textAlign, styleTheme: styleTheme, colorOverride: colorOverride, colorTheme: colorTheme, singleLineMode: singleLineMode, ellipsisMode: ellipsisMode, lineLimit: lineLimit, userSelectMode: userSelectMode, customFontSize: customFontSize, customFontWeight: customFontWeight, textDecorationType: textDecorationType, bulletPointMode: bulletPointMode, wordBreak: wordBreak },
         text,
         requirementMode === 'use' && (react_1.default.createElement(S_AfterTextBox, { styleTheme: styleTheme },
             react_1.default.createElement(S_IconWrapper, null,
@@ -261,9 +260,8 @@ var customFontStyle = (0, styled_components_1.css)(templateObject_28 || (templat
     return customFontWeight === 'bold' ? theme.fontWeight.bold : theme.fontWeight.normal;
 });
 var colorOverrideStyle = (0, styled_components_1.css)(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
-    var colorOverride = _a.colorOverride;
-    return colorOverride &&
-        (0, common_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK', window.PdsUtils ? window.PdsUtils.palette : {})[colorOverride];
+    var colorOverride = _a.colorOverride, theme = _a.theme;
+    return colorOverride && theme[colorOverride];
 });
 var ellipsisStyle = (0, styled_components_1.css)(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n  -webkit-line-clamp: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n"], ["\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n  -webkit-line-clamp: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])), function (_a) {
     var lineLimit = _a.lineLimit;
@@ -275,9 +273,18 @@ var tooltipLeftTop = (0, styled_components_1.css)(templateObject_33 || (template
 var tooltipLeftBottom = (0, styled_components_1.css)(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n  right: 0;\n  top: 20px;\n"], ["\n  right: 0;\n  top: 20px;\n"])));
 var tooltipRightTop = (0, styled_components_1.css)(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n  left: 0;\n  bottom: 20px;\n"], ["\n  left: 0;\n  bottom: 20px;\n"])));
 var tooltipRightBottom = (0, styled_components_1.css)(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n  left: 0;\n  top: 20px;\n"], ["\n  left: 0;\n  top: 20px;\n"])));
-var S_TextLabel = styled_components_1.default.div(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n  box-sizing: border-box;\n  text-align: ", ";\n  white-space: pre-wrap;\n  word-break: keep-all;\n  overflow-wrap: break-word;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"], ["\n  box-sizing: border-box;\n  text-align: ", ";\n  white-space: pre-wrap;\n  word-break: keep-all;\n  overflow-wrap: break-word;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
+var S_TextLabel = styled_components_1.default.div(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n  box-sizing: border-box;\n  text-align: ", ";\n  white-space: pre-wrap;\n  word-break: ", ";\n  overflow-wrap: break-word;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"], ["\n  box-sizing: border-box;\n  text-align: ", ";\n  white-space: pre-wrap;\n  word-break: ", ";\n  overflow-wrap: break-word;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
     var textAlign = _a.textAlign;
     return textAlign;
+}, function (_a) {
+    var wordBreak = _a.wordBreak;
+    return wordBreak &&
+        {
+            normal: 'normal',
+            break_all: 'break-all',
+            keep_all: 'keep-all',
+            break_word: 'break-word'
+        }[wordBreak];
 }, function (_a) {
     var styleTheme = _a.styleTheme;
     return styleTheme &&

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

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

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

@@ -0,0 +1,385 @@
+"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 styled_components_1 = require("styled-components");
+var __1 = require("../..");
+var theme_1 = require("../../../common/styles/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];
+    function changeTone() {
+        if (customTone === 'LIGHT') {
+            setTone('DARK');
+        }
+        else {
+            setTone('LIGHT');
+        }
+    }
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(styled_components_1.ThemeProvider, { theme: (0, theme_1.themeByGivenTone)(customTone) },
+            react_1.default.createElement(__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("button", { type: "button", onClick: changeTone }, "tone change"),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement(__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/desktop/components/ToneTest/index.d.ts

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

package/dist/src/desktop/components/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/desktop/components/UploadIconButton/UploadIconButton.js

@@ -28,7 +28,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
-var common_1 = require("../../../common");
 var hybrid_1 = require("../../../hybrid");
 var types_1 = require("./types");
 function UploadIconButton(_a) {
@@ -62,9 +61,7 @@ var fillDisabled = (0, styled_components_1.css)(templateObject_1 || (templateObj
 });
 var fill = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n\n  &:hover:not([disabled]) {\n    ", "\n  }\n\n  &:active:not([disabled]) {\n    background-image: ", ";\n  }\n\n  ", ";\n"], ["\n  background-color: ", ";\n\n  &:hover:not([disabled]) {\n    ", "\n  }\n\n  &:active:not([disabled]) {\n    background-image: ", ";\n  }\n\n  ", ";\n"])), function (_a) {
     var theme = _a.theme, baseColorKey = _a.baseColorKey;
-    return baseColorKey
-        ? (0, common_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK', window.PdsUtils ? window.PdsUtils.palette : {})[baseColorKey]
-        : theme.ui_cpnt_button_fill_base_primary;
+    return baseColorKey ? theme[baseColorKey] : theme.ui_cpnt_button_fill_base_primary;
 }, function (_a) {
     var theme = _a.theme, baseColorKey = _a.baseColorKey;
     return baseColorKey === 'ui_cpnt_button_fill_base_transparent'
@@ -99,9 +96,7 @@ var line = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 =
     return theme.ui_cpnt_button_line_base_default;
 }, function (_a) {
     var theme = _a.theme, borderColorKey = _a.borderColorKey;
-    return borderColorKey
-        ? (0, common_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK', window.PdsUtils ? window.PdsUtils.palette : {})[borderColorKey]
-        : theme.ui_cpnt_button_line_border_enabled;
+    return borderColorKey ? theme[borderColorKey] : theme.ui_cpnt_button_line_border_enabled;
 }, function (_a) {
     var colorTheme = _a.colorTheme;
     switch (colorTheme) {
@@ -127,7 +122,7 @@ var large = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 =
 var medium = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  height: 40px;\n  width: 40px;\n"], ["\n  height: 40px;\n  width: 40px;\n"])));
 var small = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  height: 32px;\n  width: 32px;\n"], ["\n  height: 32px;\n  width: 32px;\n"])));
 var xsmall = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  height: 24px;\n  width: 24px;\n"], ["\n  height: 24px;\n  width: 24px;\n"])));
-var S_UploadIconButton = styled_components_1.default.label(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  border-radius: ", ";\n  box-shadow: ", ";\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n\n  ", ";\n\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  border-radius: ", ";\n  box-shadow: ", ";\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
+var S_UploadIconButton = styled_components_1.default.label(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  border-radius: ", ";\n  box-sizing: border-box;\n  box-shadow: ", ";\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n\n  ", ";\n\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  border-radius: ", ";\n  box-sizing: border-box;\n  box-shadow: ", ";\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
     var shapeType = _a.shapeType;
     return shapeType === 'circular' && '50%';
 }, 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';
+    colorTheme?: 'none' | 'red' | 'grey_01' | 'white';
     accept?: string;
     multipleMode?: 'none' | 'use';
     onClick?: (e: React.ChangeEvent<HTMLInputElement>) => void;

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

@@ -39,7 +39,8 @@ var textStyle = {
 var textColor = {
     none: 'usrTextBrandPrimary',
     red: 'sysTextError',
-    grey_01: 'sysTextPrimary'
+    grey_01: 'sysTextPrimary',
+    white: '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;

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

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

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

@@ -0,0 +1,36 @@
+"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 TextLabel_1 = require("../TextLabel");
+function UserDesktopSideTab(_a) {
+    var itemArray = _a.itemArray;
+    var handleClickTabItem = function (item, e) {
+        if (item.onClick) {
+            item.onClick(e);
+        }
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, 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(TextLabel_1.TextLabel, { text: item.title, lineLimit: 1, ellipsisMode: "use", styleTheme: "headingBold", colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use", wordBreak: "break_all" })));
+    })));
+}
+var S_TabWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  cursor: pointer;\n  display: flex;\n  height: 56px;\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  cursor: pointer;\n  display: flex;\n  height: 56px;\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_userdesktopsidetab_base_area;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingD;
+});
+exports.default = UserDesktopSideTab;
+var templateObject_1;

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

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

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

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

@@ -35,12 +35,12 @@ function UserDesktopTabBar(_a) {
     var history = (0, react_router_dom_1.useHistory)();
     var pathname = (0, react_router_dom_1.useLocation)().pathname;
     if (itemArray) {
-        var handleClickTabItem_1 = function (item) {
+        var handleClickTabItem_1 = function (item, e) {
             if (item.onClick) {
-                item.onClick();
+                item.onClick(e);
             }
         };
-        return (react_1.default.createElement(S_TabBar, null, itemArray.map(function (item, index) { return (react_1.default.createElement(S_TabWrapper, { key: index, isActive: item.isActive, styleTheme: styleTheme, text: item.title, onClick: function () { return handleClickTabItem_1(item); } },
+        return (react_1.default.createElement(S_TabBar, null, itemArray.map(function (item, index) { return (react_1.default.createElement(S_TabWrapper, { key: index, isActive: item.isActive, styleTheme: styleTheme, text: item.title, onClick: function (e) { return handleClickTabItem_1(item, e); } },
             react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: item.isActive ? 'body2Bold' : 'body2Regular', colorTheme: item.isActive ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }))); })));
     }
     if (textArray) {

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

@@ -13,12 +13,10 @@ import { Chip } from './Chip';
 import { ContextMenu } from './ContextMenu';
 import { ContextMenuItem } from './ContextMenuItem';
 import { DesktopAlertDialog } from './DesktopAlertDialog';
-import { DesktopBasicModal } from './DesktopBasicModal';
 import { DesktopHeaderBar } from './DesktopHeaderBar';
-import { DesktopHeadlessModal } from './DesktopHeadlessModal';
 import { DesktopTabBar } from './DesktopTabBar';
 import { Dropdown } from './Dropdown';
-import { DynamicDesktopNavBar } from './DynamicDesktopNavBar';
+import { DynamicDesktopNavBar, DynamicDesktopNavBarTemplates } from './DynamicDesktopNavBar';
 import { EditApplyTextField } from './EditApplyTextField';
 import { FilterBar } from './FilterBar';
 import { FloatingActionButton } from './FloatingActionButton';
@@ -39,5 +37,6 @@ import { UploadIconButton } from './UploadIconButton';
 import { UploadMainButton } from './UploadMainButton';
 import { UploadTextButton } from './UploadTextButton';
 import { UserDesktopNavBar } from './UserDesktopNavBar';
+import { UserDesktopSideTab } from './UserDesktopSideTab';
 import { UserDesktopTabBar } from './UserDesktopTabBar';
-export { AdminList, AdminListHeader, AdminListItem, BasicFormGroup, BasicList, BasicListItem, BlogTextField, BodyTextGroup, Card, CardList, Checkbox, Chip, ContextMenu, ContextMenuItem, DesktopAlertDialog, DesktopBasicModal, DesktopHeaderBar, DesktopHeadlessModal, DesktopTabBar, Dropdown, EditApplyTextField, FilterBar, FloatingActionButton, Hero, HorizontalFormGroup, IconButton, ImageSlide, MainButton, PageTitleTextGroup, Radio, ReactionButton, Select, StatusBlock, TextButton, TextField, TextLabel, UploadIconButton, UploadMainButton, UploadTextButton, UserDesktopNavBar, UserDesktopTabBar, DynamicDesktopNavBar };
+export { AdminList, AdminListHeader, AdminListItem, BasicFormGroup, BasicList, BasicListItem, BlogTextField, BodyTextGroup, Card, CardList, Checkbox, Chip, ContextMenu, ContextMenuItem, DesktopAlertDialog, DesktopHeaderBar, DesktopTabBar, Dropdown, DynamicDesktopNavBar, DynamicDesktopNavBarTemplates, EditApplyTextField, FilterBar, FloatingActionButton, Hero, HorizontalFormGroup, IconButton, ImageSlide, MainButton, PageTitleTextGroup, Radio, ReactionButton, Select, StatusBlock, TextButton, TextField, TextLabel, UploadIconButton, UploadMainButton, UploadTextButton, UserDesktopNavBar, UserDesktopTabBar, UserDesktopSideTab };