pds-dev-kit-web 1.4.3 → 1.4.6

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_DynamicDesktopNavBar, 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 } 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 } 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_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_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_DynamicDesktopNavBarTemplates = 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 = void 0;
 /* eslint-disable import/order */
 /* eslint-disable import/first */
 // common
@@ -56,6 +56,7 @@ Object.defineProperty(exports, "D_DesktopHeadlessModal", { enumerable: true, get
 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; } });

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/desktop/components/AdminList/BulkActionBar.js

@@ -37,13 +37,13 @@ function BulkActionBar(_a) {
                 react_1.default.createElement(Dropdown_1.Dropdown, { valueArray: dropdown3ValueArray, defaultValue: dropdown3DefaultText, onChange: onChangeDropdown3, size: "small", colorTheme: "dark" }))))),
         tBtnMode !== 'none' && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),
-            react_1.default.createElement(TextButton_1.TextButton, { size: "small", text: tBtn1Text, onClick: onClickTBtn1, colorTheme: "grey_01" }),
+            react_1.default.createElement(TextButton_1.TextButton, { size: "small", text: tBtn1Text, onClick: onClickTBtn1, colorTheme: "white" }),
             (tBtnMode === 'tbtn_amount2' || tBtnMode === 'tbtn_amount3') && (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),
-                react_1.default.createElement(TextButton_1.TextButton, { size: "small", text: tBtn2Text, onClick: onClickTBtn2, colorTheme: "grey_01" }))),
+                react_1.default.createElement(TextButton_1.TextButton, { size: "small", text: tBtn2Text, onClick: onClickTBtn2, colorTheme: "white" }))),
             tBtnMode === 'tbtn_amount3' && (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),
-                react_1.default.createElement(TextButton_1.TextButton, { size: "small", text: tBtn3Text, onClick: onClickTBtn3, colorTheme: "grey_01" }))))),
+                react_1.default.createElement(TextButton_1.TextButton, { size: "small", text: tBtn3Text, onClick: onClickTBtn3, colorTheme: "white" }))))),
         react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_e", spacingType: "width" })));
 }
 var S_BulkActionBar = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  height: 56px;\n  min-height: 56px;\n"], ["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  height: 56px;\n  min-height: 56px;\n"])), function (_a) {

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

@@ -72,7 +72,7 @@ var S_HeaderRow = styled_components_1.default.div(templateObject_4 || (templateO
     return theme.ui_cpnt_divider;
 });
 var S_CheckBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 40px;\n  justify-content: center;\n  width: 40px;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 40px;\n  justify-content: center;\n  width: 40px;\n"])));
-var S_FlexColumn = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
+var S_FlexColumn = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  flex: 1;\n  min-width: 80px;\n"], ["\n  flex: 1;\n  min-width: 80px;\n"])));
 var S_Column = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  padding-left: ", ";\n  padding-right: ", ";\n\n  ", ";\n"], ["\n  padding-left: ", ";\n  padding-right: ", ";\n\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingC;

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

@@ -126,9 +126,9 @@ function AdminListItem(_a) {
         react_1.default.createElement(S_ImageColumn, { rowSize: rowSize },
             column2Type === 'image_text' && (rowSize === 'high' || rowSize === 'medium') && (react_1.default.createElement(S_ImageWrapper, { rowSize: rowSize },
                 react_1.default.createElement(hybrid_1.ImageView, { src: imageSrc, shapeType: imageShapeType, width: imageShapeType === 'circular' ? 64 : 120, ratio: imageRatio, scaleType: "cover", radius: imageShapeType === 'round' ? imageRadius : undefined }))),
-            (rowSize === 'low' || rowSize === 'medium') && (react_1.default.createElement(S_Column, null,
+            (rowSize === 'low' || rowSize === 'medium') && (react_1.default.createElement(S_RowTextWrapper, null,
                 react_1.default.createElement(TextLabel_1.TextLabel, { text: column2Text, styleTheme: "body2Bold", colorTheme: "sysTextPrimary", ellipsisMode: "use", lineLimit: 2 }))),
-            rowSize === 'high' && (react_1.default.createElement(S_TextWrapper, { ref: contentRef, hasScroll: hasScroll },
+            rowSize === 'high' && (react_1.default.createElement(S_HighTextWrapper, { ref: contentRef, hasScroll: hasScroll },
                 react_1.default.createElement(TextLabel_1.TextLabel, { text: column2Text, styleTheme: "body2Bold", colorTheme: "sysTextPrimary" })))),
         column3Text && (react_1.default.createElement(S_Column, { columnSize: column3TextWidth },
             react_1.default.createElement(TextLabel_1.TextLabel, { text: column3Text, styleTheme: column3TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column3TextStyleTheme) }))),
@@ -188,28 +188,27 @@ var S_ImageWrapper = styled_components_1.default.div(templateObject_15 || (templ
     var rowSize = _a.rowSize;
     return rowSize === 'high' && (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n      align-items: center;\n      display: flex;\n      height: 100%;\n    "], ["\n      align-items: center;\n      display: flex;\n      height: 100%;\n    "])));
 });
-var S_ImageColumn = styled_components_1.default.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  flex: 1;\n  overflow: auto;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n\n  ", "\n"], ["\n  flex: 1;\n  overflow: auto;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n\n  ", "\n"])), function (_a) {
-    var theme = _a.theme, rowSize = _a.rowSize;
-    return (rowSize === 'high' || rowSize === 'medium') && theme.spacing.spacingC;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingC;
-}, function (_a) {
+var S_ImageColumn = styled_components_1.default.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  flex: 1;\n  min-width: 80px;\n  overflow: auto;\n  padding: ", ";\n\n  ", "\n"], ["\n  flex: 1;\n  min-width: 80px;\n  overflow: auto;\n  padding: ", ";\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingC;
-}, function (_a) {
-    var theme = _a.theme, rowSize = _a.rowSize;
-    return (rowSize === 'high' || rowSize === 'medium') && theme.spacing.spacingC;
 }, function (_a) {
     var rowSize = _a.rowSize;
     return rowSize === 'high'
         ? (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n          box-sizing: border-box;\n          display: flex;\n          height: 200px;\n        "], ["\n          box-sizing: border-box;\n          display: flex;\n          height: 200px;\n        "]))) : (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n          align-items: center;\n          display: flex;\n        "], ["\n          align-items: center;\n          display: flex;\n        "])));
 });
-var S_TextWrapper = styled_components_1.default.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  height: 100%;\n  overflow: auto;\n\n  ", "\n"], ["\n  height: 100%;\n  overflow: auto;\n\n  ", "\n"])), function (_a) {
+var S_HighTextWrapper = styled_components_1.default.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  height: 100%;\n  overflow: auto;\n\n  ", "\n"], ["\n  height: 100%;\n  overflow: auto;\n\n  ", "\n"])), function (_a) {
     var hasScroll = _a.hasScroll;
     return !hasScroll && (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n      align-items: center;\n      display: flex;\n    "], ["\n      align-items: center;\n      display: flex;\n    "])));
 });
-var S_Column = styled_components_1.default.div(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  overflow: auto;\n  padding: ", ";\n\n  ", ";\n  ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  overflow: auto;\n  padding: ", ";\n\n  ", ";\n  ", ";\n"])), function (_a) {
+var S_RowTextWrapper = styled_components_1.default.div(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  overflow: auto;\n\n  ", ";\n  ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  overflow: auto;\n\n  ", ";\n  ", ";\n"])), function (_a) {
+    var columnSize = _a.columnSize;
+    return columnSize &&
+        { small: smallColumnWidth, medium: mediumColumnWidth, large: largeColumnWidth }[columnSize];
+}, function (_a) {
+    var quickActionBtnType = _a.quickActionBtnType;
+    return quickActionBtnType && { fix: fixedColumn, hover: hoverColumn }[quickActionBtnType];
+});
+var S_Column = styled_components_1.default.div(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  overflow: auto;\n  padding: ", ";\n\n  ", ";\n  ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  overflow: auto;\n  padding: ", ";\n\n  ", ";\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingC;
 }, function (_a) {
@@ -220,16 +219,16 @@ var S_Column = styled_components_1.default.div(templateObject_21 || (templateObj
     var quickActionBtnType = _a.quickActionBtnType;
     return quickActionBtnType && { fix: fixedColumn, hover: hoverColumn }[quickActionBtnType];
 });
-var S_SelectionColumn = styled_components_1.default.div(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  padding-bottom: ", ";\n  padding-top: ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  padding-bottom: ", ";\n  padding-top: ", ";\n"])), function (_a) {
+var S_SelectionColumn = styled_components_1.default.div(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  padding-bottom: ", ";\n  padding-top: ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  padding-bottom: ", ";\n  padding-top: ", ";\n"])), function (_a) {
     var theme = _a.theme, rowSize = _a.rowSize;
     return (rowSize === 'high' || rowSize === 'medium') && theme.spacing.spacingC;
 }, function (_a) {
     var theme = _a.theme, rowSize = _a.rowSize;
     return (rowSize === 'high' || rowSize === 'medium') && theme.spacing.spacingC;
 });
-var hoverAdminListItem = (0, styled_components_1.css)(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  align-items: center;\n  position: relative;\n"], ["\n  align-items: center;\n  position: relative;\n"])));
-var fixedAdminListItem = (0, styled_components_1.css)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n  justify-content: space-between;\n"], ["\n  justify-content: space-between;\n"])));
-var S_AdminListItem = styled_components_1.default.div(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n  background-color: ", ";\n  display: flex;\n  padding-left: ", ";\n\n  ", ";\n  ", "\n\n  :hover {\n    background-color: ", ";\n\n    ", " {\n      display: ", ";\n      visibility: visible;\n    }\n  }\n\n  &:last-child {\n    margin-bottom: 88px;\n  }\n"], ["\n  background-color: ", ";\n  display: flex;\n  padding-left: ", ";\n\n  ", ";\n  ", "\n\n  :hover {\n    background-color: ", ";\n\n    ", " {\n      display: ", ";\n      visibility: visible;\n    }\n  }\n\n  &:last-child {\n    margin-bottom: 88px;\n  }\n"])), function (_a) {
+var hoverAdminListItem = (0, styled_components_1.css)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n  align-items: center;\n  position: relative;\n"], ["\n  align-items: center;\n  position: relative;\n"])));
+var fixedAdminListItem = (0, styled_components_1.css)(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n  justify-content: space-between;\n"], ["\n  justify-content: space-between;\n"])));
+var S_AdminListItem = styled_components_1.default.div(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n  background-color: ", ";\n  display: flex;\n  padding-left: ", ";\n\n  ", ";\n  ", "\n\n  :hover {\n    background-color: ", ";\n\n    ", " {\n      display: ", ";\n      visibility: visible;\n    }\n  }\n\n  &:last-child {\n    margin-bottom: 88px;\n  }\n"], ["\n  background-color: ", ";\n  display: flex;\n  padding-left: ", ";\n\n  ", ";\n  ", "\n\n  :hover {\n    background-color: ", ";\n\n    ", " {\n      display: ", ";\n      visibility: visible;\n    }\n  }\n\n  &:last-child {\n    margin-bottom: 88px;\n  }\n"])), function (_a) {
     var theme = _a.theme, isSelected = _a.isSelected;
     return isSelected ? theme.ui_cpnt_datatable_base_selected : theme.ui_cpnt_datatable_base_default;
 }, function (_a) {
@@ -250,4 +249,4 @@ var S_AdminListItem = styled_components_1.default.div(templateObject_25 || (temp
     return quickActionBtnType === 'hover' && 'flex';
 });
 exports.default = AdminListItem;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26;

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

@@ -25,6 +25,9 @@ export declare type BasicListItemProps = {
     checkboxId?: string | number;
     radioId?: string;
     radioValue?: string;
+    switchName?: string;
+    switchState?: 'normal' | 'disabled';
+    switchStatus?: 'off' | 'on';
     onClick?: () => void;
     onClickIBtn1?: () => void;
     onClickIBtn2?: () => void;
@@ -40,5 +43,5 @@ export declare type StyleProps = {
     imageIconMode?: 'none' | 'image' | 'icon';
     displayType?: 'none' | 'text' | 'ibtn_text' | 'ibtn_amount1' | 'ibtn_amount2' | 'mbtn' | 'switch';
 };
-declare function BasicListItem({ selectionMode, titleText, titleTextColorTheme, descText, badgeMode, badgeStatus, imageIconMode, imageShapeType, imageSrc, iconName, iconFillType, displayType, captionText, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, mBtnFillType, mBtnText, dividerType, titleFontWeight, checkboxId, radioId, radioValue, onClick, onClickIBtn1, onClickIBtn2, onClickMBtn, onClickRadio, onClickSwitch }: BasicListItemProps): JSX.Element;
+declare function BasicListItem({ selectionMode, titleText, titleTextColorTheme, descText, badgeMode, badgeStatus, imageIconMode, imageShapeType, imageSrc, iconName, iconFillType, displayType, captionText, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, mBtnFillType, mBtnText, dividerType, titleFontWeight, checkboxId, radioId, radioValue, switchName, switchState, switchStatus, onClick, onClickIBtn1, onClickIBtn2, onClickMBtn, onClickRadio, onClickSwitch }: BasicListItemProps): JSX.Element;
 export default BasicListItem;

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

@@ -17,7 +17,7 @@ var MainButton_1 = require("../MainButton");
 var Radio_1 = require("../Radio");
 var TextLabel_1 = require("../TextLabel");
 function BasicListItem(_a) {
-    var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'none' : _b, titleText = _a.titleText, _c = _a.titleTextColorTheme, titleTextColorTheme = _c === void 0 ? 'none' : _c, descText = _a.descText, _d = _a.badgeMode, badgeMode = _d === void 0 ? 'none' : _d, _e = _a.badgeStatus, badgeStatus = _e === void 0 ? 'inactive' : _e, _f = _a.imageIconMode, imageIconMode = _f === void 0 ? 'none' : _f, _g = _a.imageShapeType, imageShapeType = _g === void 0 ? 'round' : _g, imageSrc = _a.imageSrc, iconName = _a.iconName, _h = _a.iconFillType, iconFillType = _h === void 0 ? 'line' : _h, _j = _a.displayType, displayType = _j === void 0 ? 'none' : _j, captionText = _a.captionText, iBtn1IconName = _a.iBtn1IconName, _k = _a.iBtn1IconFillType, iBtn1IconFillType = _k === void 0 ? 'line' : _k, iBtn2IconName = _a.iBtn2IconName, _l = _a.iBtn2IconFillType, iBtn2IconFillType = _l === void 0 ? 'line' : _l, _m = _a.mBtnFillType, mBtnFillType = _m === void 0 ? 'fill' : _m, mBtnText = _a.mBtnText, _o = _a.dividerType, dividerType = _o === void 0 ? 'none' : _o, _p = _a.titleFontWeight, titleFontWeight = _p === void 0 ? 'regular' : _p, checkboxId = _a.checkboxId, radioId = _a.radioId, radioValue = _a.radioValue, onClick = _a.onClick, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onClickMBtn = _a.onClickMBtn, onClickRadio = _a.onClickRadio, onClickSwitch = _a.onClickSwitch;
+    var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'none' : _b, titleText = _a.titleText, _c = _a.titleTextColorTheme, titleTextColorTheme = _c === void 0 ? 'none' : _c, descText = _a.descText, _d = _a.badgeMode, badgeMode = _d === void 0 ? 'none' : _d, _e = _a.badgeStatus, badgeStatus = _e === void 0 ? 'inactive' : _e, _f = _a.imageIconMode, imageIconMode = _f === void 0 ? 'none' : _f, _g = _a.imageShapeType, imageShapeType = _g === void 0 ? 'round' : _g, imageSrc = _a.imageSrc, iconName = _a.iconName, _h = _a.iconFillType, iconFillType = _h === void 0 ? 'line' : _h, _j = _a.displayType, displayType = _j === void 0 ? 'none' : _j, captionText = _a.captionText, iBtn1IconName = _a.iBtn1IconName, _k = _a.iBtn1IconFillType, iBtn1IconFillType = _k === void 0 ? 'line' : _k, iBtn2IconName = _a.iBtn2IconName, _l = _a.iBtn2IconFillType, iBtn2IconFillType = _l === void 0 ? 'line' : _l, _m = _a.mBtnFillType, mBtnFillType = _m === void 0 ? 'fill' : _m, mBtnText = _a.mBtnText, _o = _a.dividerType, dividerType = _o === void 0 ? 'none' : _o, _p = _a.titleFontWeight, titleFontWeight = _p === void 0 ? 'regular' : _p, checkboxId = _a.checkboxId, radioId = _a.radioId, radioValue = _a.radioValue, switchName = _a.switchName, _q = _a.switchState, switchState = _q === void 0 ? 'normal' : _q, _r = _a.switchStatus, switchStatus = _r === void 0 ? 'off' : _r, onClick = _a.onClick, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onClickMBtn = _a.onClickMBtn, onClickRadio = _a.onClickRadio, onClickSwitch = _a.onClickSwitch;
     var methods = (0, react_hook_form_1.useFormContext)();
     var isSelected = methods === null || methods === void 0 ? void 0 : methods.watch((checkboxId === null || checkboxId === void 0 ? void 0 : checkboxId.toString()) || '');
     var handleCheckBoxClick = function (e) {
@@ -107,10 +107,10 @@ function BasicListItem(_a) {
                     captionText && (react_1.default.createElement(react_1.default.Fragment, null,
                         react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a" }),
                         react_1.default.createElement(S_TextWrapper, null,
-                            react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular", textAlign: "right", singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 })))))),
+                            react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, colorTheme: "sysTextTertiary", styleTheme: "caption1Regular", textAlign: "right", singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 })))))),
             react_1.default.createElement(S_RightBox, { displayType: displayType },
                 (displayType === 'text' || displayType === 'ibtn_text') && (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(TextLabel_1.TextLabel, { text: descText, colorTheme: "sysTextTertiary", styleTheme: "caption1Regular", singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 }),
+                    react_1.default.createElement(TextLabel_1.TextLabel, { text: descText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular", singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 }),
                     react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))),
                 (displayType === 'ibtn_amount1' ||
                     displayType === 'ibtn_amount2' ||
@@ -120,8 +120,8 @@ function BasicListItem(_a) {
                 displayType === 'mbtn' && (react_1.default.createElement(react_1.default.Fragment, null,
                     react_1.default.createElement(MainButton_1.MainButton, { text: mBtnText, fillType: mBtnFillType, size: "small", onClick: handleMBtnClick }),
                     react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))),
-                displayType === 'switch' && (react_1.default.createElement(S_SwitchWrapper, null,
-                    react_1.default.createElement(hybrid_1.Switch, { name: "BLI_SWITCH", onClick: handleSwitchClick }),
+                displayType === 'switch' && switchName && (react_1.default.createElement(S_SwitchWrapper, null,
+                    react_1.default.createElement(hybrid_1.Switch, { name: switchName, onClick: handleSwitchClick, state: switchState, status: switchStatus }),
                     react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))))),
         react_1.default.createElement(S_DividerWrapper, null, dividerType === 'solid' && react_1.default.createElement(hybrid_1.Divider, { direction: "horizontal", displayType: "line" }))));
 }

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

@@ -47,7 +47,7 @@ function ContextMenuItem(_a) {
         textColorTheme = 'sysTextPrimary';
     }
     if (!isSelected && state === 'normal') {
-        textColorTheme = 'sysTextSecondary';
+        textColorTheme = 'sysTextPrimary';
     }
     if (state === 'disabled') {
         textColorTheme = 'sysTextTertiary';

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { BrandLogo, UserProfile } from './blocks';
-import { DynamicDesktopTemplateType } from './templates/types';
+import { TemplateNamesType } from './templates';
 import { ParsedNode } from './types';
 declare type BrandLogo = {
     src: string;
@@ -17,7 +17,7 @@ export declare type Props = {
     userProfile: UserProfile;
     primaryMenus: ParsedNode[];
     secondaryMenus: ParsedNode[] | null;
-    template: DynamicDesktopTemplateType;
+    template: TemplateNamesType;
     basePath: string;
 };
 export declare const BasePathContext: React.Context<{

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

@@ -32,12 +32,13 @@ var react_router_dom_1 = require("react-router-dom");
 var styled_components_1 = __importDefault(require("styled-components"));
 var BoxLayout_1 = require("../../../common/components/BoxLayout");
 var blocks_1 = require("./blocks");
+var templates_1 = require("./templates");
 exports.BasePathContext = (0, react_1.createContext)({
     basePath: ''
 });
 function DynamicDesktopNavBar(_a) {
     var _b = _a.isPreview, isPreview = _b === void 0 ? false : _b, template = _a.template, brandLogo = _a.brandLogo, primaryMenus = _a.primaryMenus, secondaryMenus = _a.secondaryMenus, userProfile = _a.userProfile, basePath = _a.basePath;
-    var gridStyle = template.gridStyle, gridTemplate = template.gridTemplate, showSecondaryMenu = template.showSecondaryMenu, primaryMenuOptions = template.primaryMenuOptions, secondaryMenuOptions = template.secondaryMenuOptions, userProfileOptions = template.userProfileOptions;
+    var _c = templates_1.DynamicDesktopNavBarTemplates.getTemplate(template), gridStyle = _c.gridStyle, gridTemplate = _c.gridTemplate, showSecondaryMenu = _c.showSecondaryMenu, primaryMenuOptions = _c.primaryMenuOptions, secondaryMenuOptions = _c.secondaryMenuOptions, userProfileOptions = _c.userProfileOptions;
     var slicedPrimaryMenus = (0, react_1.useMemo)(function () { return primaryMenus === null || primaryMenus === void 0 ? void 0 : primaryMenus.slice(0, primaryMenuOptions.maxLength); }, [primaryMenus, primaryMenuOptions]);
     var slicedSecondaryMenus = (0, react_1.useMemo)(function () { var _a; return (_a = secondaryMenus === null || secondaryMenus === void 0 ? void 0 : secondaryMenus.slice(0, secondaryMenuOptions.maxLength)) !== null && _a !== void 0 ? _a : []; }, [secondaryMenus, secondaryMenuOptions]);
     return (react_1.default.createElement(exports.BasePathContext.Provider, { value: { basePath: basePath } },

package/dist/src/desktop/components/DynamicDesktopNavBar/components/ContextMenuNavs/ContextMenuItemNav.js

@@ -44,8 +44,8 @@ var WebMenuItemNav_1 = __importDefault(require("../MenuItemNav/components/WebMen
 function ContextMenuItemNavBox(_a) {
     var menu = _a.menu;
     return (react_1.default.createElement(S_ContextMenuItem, { size: "small" },
-        menu.menuItemType === 'NAV_P_APP' && menu.pAppCode && (react_1.default.createElement(PAppMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { pAppCode: menu.pAppCode }) })),
-        menu.menuItemType === 'WEB_LINK' && menu.conversionLinkSrc && (react_1.default.createElement(WebMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { conversionLinkSrc: menu.conversionLinkSrc }) }))));
+        menu.menuItemType === 'NAV_P_APP' && menu.pAppCode && (react_1.default.createElement(PAppMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { pAppCode: menu.pAppCode }), isContextMenu: true })),
+        menu.menuItemType === 'WEB_LINK' && menu.conversionLinkSrc && (react_1.default.createElement(WebMenuItemNav_1.default, { isContextMenu: true, menu: __assign(__assign({}, menu), { conversionLinkSrc: menu.conversionLinkSrc }) }))));
 }
 var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 48px;\n  padding: 0 ", ";\n"], ["\n  height: 48px;\n  padding: 0 ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/desktop/components/DynamicDesktopNavBar/components/ContextMenuNavs/ContextMenuNavs.js

@@ -31,17 +31,31 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var ContextMenu_1 = require("../../../ContextMenu");
 function ContextMenuNavs(_a) {
     var parentRef = _a.parentRef, children = _a.children;
-    var contextRef = (0, react_1.useRef)(null);
-    var _b = (0, react_1.useState)({ top: 0, left: 0 }), position = _b[0], setPosition = _b[1];
+    var _b = (0, react_1.useState)(null), contextRef = _b[0], setContextRef = _b[1];
+    var contextCallbackRef = (0, react_1.useCallback)(function (node) {
+        if (!node) {
+            return;
+        }
+        setContextRef(node);
+    }, []);
+    var _c = (0, react_1.useState)({ top: 0, left: 0 }), position = _c[0], setPosition = _c[1];
     (0, react_1.useLayoutEffect)(function () {
         if (!parentRef.current) {
             return;
         }
         var PARENT_HEIGHT = 48;
         var _a = parentRef.current.getBoundingClientRect(), top = _a.top, left = _a.left;
-        setPosition({ top: top + PARENT_HEIGHT, left: left });
-    }, [parentRef]);
-    return (react_1.default.createElement(S_AbsoluteWrapper, { ref: contextRef, style: { top: position.top, left: position.left } },
+        if (!contextRef) {
+            setPosition({ top: top + PARENT_HEIGHT, left: left });
+            return;
+        }
+        var contextBound = contextRef.getBoundingClientRect();
+        if (contextRef.getBoundingClientRect().right > window.innerWidth) {
+            setPosition({ top: top + PARENT_HEIGHT, left: window.innerWidth - contextBound.width });
+            return;
+        }
+    }, [parentRef, contextRef]);
+    return (react_1.default.createElement(S_AbsoluteWrapper, { ref: contextCallbackRef, style: { top: position.top, left: position.left } },
         react_1.default.createElement(ContextMenu_1.ContextMenu, null, children)));
 }
 var S_AbsoluteWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: fixed;\n\n  /* NOTE: contents layer */\n  z-index: 90;\n"], ["\n  position: fixed;\n\n  /* NOTE: contents layer */\n  z-index: 90;\n"])));

package/dist/src/desktop/components/DynamicDesktopNavBar/components/LogoNav.js

@@ -17,6 +17,6 @@ function LogoNav(_a) {
         react_1.default.createElement(S_Box, null, logoSrc ? (react_1.default.createElement(S_Logo, { src: logoSrc })) : (react_1.default.createElement(__1.D_TextLabel, { text: fallbackText, styleTheme: "headingBold", ellipsisMode: "use", lineLimit: 1 })))));
 }
 var S_Box = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 48px;\n  width: 180px;\n  display: flex;\n  align-items: center;\n"], ["\n  height: 48px;\n  width: 180px;\n  display: flex;\n  align-items: center;\n"])));
-var S_Logo = styled_components_1.default.img(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  max-height: 100%;\n  object-fit: contain;\n  object-position: left;\n"], ["\n  max-height: 100%;\n  object-fit: contain;\n  object-position: left;\n"])));
+var S_Logo = styled_components_1.default.img(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  max-height: 100%;\n  max-width: 100%;\n  object-fit: contain;\n  object-position: left;\n"], ["\n  max-height: 100%;\n  max-width: 100%;\n  object-fit: contain;\n  object-position: left;\n"])));
 exports.default = LogoNav;
 var templateObject_1, templateObject_2;

package/dist/src/desktop/components/DynamicDesktopNavBar/components/MenuItemNav/MenuItemNav.js

@@ -54,11 +54,12 @@ function MenuItemNav(_a) {
     var handleMouseOut = (0, react_1.useCallback)(function () {
         setIsContextOpen(false);
     }, []);
-    return (react_1.default.createElement(S_Box, { ref: ref, onMouseOver: handleMouseOver, onMouseLeave: handleMouseOut, onWheel: handleMouseOut, showMenuAsIcon: showMenuAsIcon },
-        menu.menuItemType === 'NAV_P_APP' && menu.pAppCode && (react_1.default.createElement(PAppMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { pAppCode: menu.pAppCode }), showMenuAsIcon: showMenuAsIcon })),
-        menu.menuItemType === 'WEB_LINK' && menu.conversionLinkSrc && (react_1.default.createElement(WebMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { conversionLinkSrc: menu.conversionLinkSrc }), showMenuAsIcon: showMenuAsIcon })),
-        showMenuAsIcon ? (react_1.default.createElement(hybrid_1.Spacing, { spacingType: "width", size: "spacing_b" })) : (react_1.default.createElement(hybrid_1.Spacing, { spacingType: "width", size: "spacing_f" })),
-        isContextOpen && menu.parsedNodes.length > 0 && (react_1.default.createElement(ContextMenuNavs_1.ContextMenuNavs, { parentRef: ref }, menu.parsedNodes.map(function (nav, index) { return (react_1.default.createElement(ContextMenuNavs_1.ContextMenuItemNav, { key: index, menu: nav })); })))));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(S_Box, { ref: ref, onMouseOver: handleMouseOver, onMouseLeave: handleMouseOut, onWheel: handleMouseOut, showMenuAsIcon: showMenuAsIcon },
+            menu.menuItemType === 'NAV_P_APP' && menu.pAppCode && (react_1.default.createElement(PAppMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { pAppCode: menu.pAppCode }), showMenuAsIcon: showMenuAsIcon })),
+            menu.menuItemType === 'WEB_LINK' && menu.conversionLinkSrc && (react_1.default.createElement(WebMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { conversionLinkSrc: menu.conversionLinkSrc }), showMenuAsIcon: showMenuAsIcon })),
+            isContextOpen && menu.parsedNodes.length > 0 && (react_1.default.createElement(ContextMenuNavs_1.ContextMenuNavs, { parentRef: ref }, menu.parsedNodes.map(function (nav, index) { return (react_1.default.createElement(ContextMenuNavs_1.ContextMenuItemNav, { key: index, menu: nav })); })))),
+        showMenuAsIcon ? (react_1.default.createElement(hybrid_1.Spacing, { spacingType: "width", size: "spacing_b" })) : (react_1.default.createElement(hybrid_1.Spacing, { spacingType: "width", size: "spacing_f" }))));
 }
 var S_Box = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n"], ["\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n"])));
 exports.default = MenuItemNav;

package/dist/src/desktop/components/DynamicDesktopNavBar/components/MenuItemNav/components/PAppMenuItemNav.d.ts

@@ -6,6 +6,7 @@ declare type WithRequired<T, K extends keyof T> = T & {
 declare type Props = {
     menu: WithRequired<ParsedNode, 'pAppCode'>;
     showMenuAsIcon?: boolean;
+    isContextMenu?: boolean;
 };
-declare function PAppMenuItemNav({ menu, showMenuAsIcon }: Props): JSX.Element;
+declare function PAppMenuItemNav({ menu, showMenuAsIcon, isContextMenu }: Props): JSX.Element;
 export default PAppMenuItemNav;

package/dist/src/desktop/components/DynamicDesktopNavBar/components/MenuItemNav/components/PAppMenuItemNav.js

@@ -24,12 +24,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var react_router_dom_1 = require("react-router-dom");
-var TextLabelNav_1 = __importDefault(require("../../../../../../common/components/Navigations/TextLabelNav"));
+var Navigations_1 = require("../../../../../../common/components/Navigations");
 var DynamicDesktopNavBar_1 = require("../../../DynamicDesktopNavBar");
 var IconNav_1 = __importDefault(require("../../IconNav"));
 var ImageIconNav_1 = __importDefault(require("../../ImageIconNav"));
 function PAppMenuItemNav(_a) {
-    var menu = _a.menu, showMenuAsIcon = _a.showMenuAsIcon;
+    var menu = _a.menu, showMenuAsIcon = _a.showMenuAsIcon, _b = _a.isContextMenu, isContextMenu = _b === void 0 ? false : _b;
     var basePath = (0, react_1.useContext)(DynamicDesktopNavBar_1.BasePathContext).basePath;
     var match = (0, react_router_dom_1.useRouteMatch)("" + basePath);
     var activeMatch = (0, react_router_dom_1.useRouteMatch)(basePath + "/:activeKey");
@@ -44,6 +44,6 @@ function PAppMenuItemNav(_a) {
             return react_1.default.createElement(IconNav_1.default, { to: "/" + menu.pAppCode, iconName: menu.iconName });
         }
     }
-    return (react_1.default.createElement(TextLabelNav_1.default, { isActive: isActive, preventLineChange: true, openNewTab: false, to: "/" + menu.pAppCode, text: menu.name }));
+    return isContextMenu ? (react_1.default.createElement(Navigations_1.ContextTextLabelNav, { isActive: isActive, preventLineChange: true, openNewTab: false, to: "/" + menu.pAppCode, text: menu.name })) : (react_1.default.createElement(Navigations_1.TextLabelNav, { isActive: isActive, preventLineChange: true, openNewTab: false, to: "/" + menu.pAppCode, text: menu.name }));
 }
 exports.default = PAppMenuItemNav;

package/dist/src/desktop/components/DynamicDesktopNavBar/components/MenuItemNav/components/WebMenuItemNav.d.ts

@@ -6,6 +6,7 @@ declare type WithRequired<T, K extends keyof T> = T & {
 declare type Props = {
     menu: WithRequired<ParsedNode, 'conversionLinkSrc'>;
     showMenuAsIcon?: boolean;
+    isContextMenu?: boolean;
 };
-declare function WebMenuItemNav({ menu, showMenuAsIcon }: Props): JSX.Element;
+declare function WebMenuItemNav({ menu, showMenuAsIcon, isContextMenu }: Props): JSX.Element;
 export default WebMenuItemNav;

package/dist/src/desktop/components/DynamicDesktopNavBar/components/MenuItemNav/components/WebMenuItemNav.js

@@ -4,11 +4,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
-var TextLabelNav_1 = __importDefault(require("../../../../../../common/components/Navigations/TextLabelNav"));
+var Navigations_1 = require("../../../../../../common/components/Navigations");
 var IconNav_1 = __importDefault(require("../../IconNav"));
 var ImageIconNav_1 = __importDefault(require("../../ImageIconNav"));
 function WebMenuItemNav(_a) {
-    var menu = _a.menu, showMenuAsIcon = _a.showMenuAsIcon;
+    var menu = _a.menu, showMenuAsIcon = _a.showMenuAsIcon, isContextMenu = _a.isContextMenu;
     if (showMenuAsIcon) {
         if (menu.iconSrc) {
             return react_1.default.createElement(ImageIconNav_1.default, { to: menu.conversionLinkSrc, iconSrc: menu.iconSrc, openNewTab: true });
@@ -17,6 +17,6 @@ function WebMenuItemNav(_a) {
             return react_1.default.createElement(IconNav_1.default, { to: "/" + menu.pAppCode, iconName: menu.iconName });
         }
     }
-    return react_1.default.createElement(TextLabelNav_1.default, { preventLineChange: true, openNewTab: true, to: menu.conversionLinkSrc, text: menu.name });
+    return isContextMenu ? (react_1.default.createElement(Navigations_1.ContextTextLabelNav, { preventLineChange: true, openNewTab: true, to: menu.conversionLinkSrc, text: menu.name })) : (react_1.default.createElement(Navigations_1.TextLabelNav, { preventLineChange: true, openNewTab: true, to: menu.conversionLinkSrc, text: menu.name }));
 }
 exports.default = WebMenuItemNav;

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

@@ -1 +1,2 @@
 export { default as DynamicDesktopNavBar } from './DynamicDesktopNavBar';
+export { DynamicDesktopNavBarTemplates } from './templates';

package/dist/src/desktop/components/DynamicDesktopNavBar/index.js

@@ -3,6 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DynamicDesktopNavBar = void 0;
+exports.DynamicDesktopNavBarTemplates = exports.DynamicDesktopNavBar = void 0;
 var DynamicDesktopNavBar_1 = require("./DynamicDesktopNavBar");
 Object.defineProperty(exports, "DynamicDesktopNavBar", { enumerable: true, get: function () { return __importDefault(DynamicDesktopNavBar_1).default; } });
+var templates_1 = require("./templates");
+Object.defineProperty(exports, "DynamicDesktopNavBarTemplates", { enumerable: true, get: function () { return templates_1.DynamicDesktopNavBarTemplates; } });

package/dist/src/desktop/components/DynamicDesktopNavBar/templates/{MenuDesignTemplates.d.ts → DynamicDesktopNavBarTemplates.d.ts}

@@ -1,5 +1,5 @@
 import { TemplateNamesType } from './types';
-declare class MenuDesignTemplates {
+declare class DynamicDesktopNavBarTemplates {
     private static data;
     private static names;
     static getNames(): Record<"W1_0001" | "W1_0002" | "W1_0003" | "W1_0004" | "W1_0005", "W1_0001" | "W1_0002" | "W1_0003" | "W1_0004" | "W1_0005">;
@@ -24,6 +24,7 @@ declare class MenuDesignTemplates {
         secondaryMenuOptions: {
             showMenuAsIcon: boolean;
             maxLength: number;
+            style: {};
         };
     } | {
         gridTemplate: string;
@@ -39,8 +40,11 @@ declare class MenuDesignTemplates {
         secondaryMenuOptions: {
             showMenuAsIcon: boolean;
             maxLength: number;
+            style: {};
+        };
+        userProfileOptions: {
+            style: {};
         };
-        userProfileOptions: {};
     } | {
         gridTemplate: string;
         gridStyle: {
@@ -57,7 +61,9 @@ declare class MenuDesignTemplates {
             maxLength: number;
             style: {};
         };
-        userProfileOptions: {};
+        userProfileOptions: {
+            style: {};
+        };
     } | {
         gridTemplate: string;
         gridStyle: {
@@ -74,8 +80,11 @@ declare class MenuDesignTemplates {
         secondaryMenuOptions: {
             showMenuAsIcon: boolean;
             maxLength: number;
+            style: {};
+        };
+        userProfileOptions: {
+            style: {};
         };
-        userProfileOptions: {};
     } | {
         gridTemplate: string;
         gridStyle: {
@@ -96,7 +105,9 @@ declare class MenuDesignTemplates {
                 justifyContent: string;
             };
         };
-        userProfileOptions: {};
+        userProfileOptions: {
+            style: {};
+        };
     };
 }
-export default MenuDesignTemplates;
+export default DynamicDesktopNavBarTemplates;

package/dist/src/desktop/components/DynamicDesktopNavBar/templates/{MenuDesignTemplates.js → DynamicDesktopNavBarTemplates.js}

@@ -12,20 +12,20 @@ var __assign = (this && this.__assign) || function () {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var constants_1 = require("./constants");
-var MenuDesignTemplates = /** @class */ (function () {
-    function MenuDesignTemplates() {
+var DynamicDesktopNavBarTemplates = /** @class */ (function () {
+    function DynamicDesktopNavBarTemplates() {
     }
-    MenuDesignTemplates.getNames = function () {
-        return MenuDesignTemplates.names;
+    DynamicDesktopNavBarTemplates.getNames = function () {
+        return DynamicDesktopNavBarTemplates.names;
     };
-    MenuDesignTemplates.getTemplate = function (name) {
-        return MenuDesignTemplates.data[name];
+    DynamicDesktopNavBarTemplates.getTemplate = function (name) {
+        return DynamicDesktopNavBarTemplates.data[name];
     };
-    MenuDesignTemplates.data = constants_1.TEMPLATES_DATA;
-    MenuDesignTemplates.names = (Object.keys(constants_1.TEMPLATES_DATA).reduce(function (acc, cur) {
+    DynamicDesktopNavBarTemplates.data = constants_1.TEMPLATES_DATA;
+    DynamicDesktopNavBarTemplates.names = (Object.keys(constants_1.TEMPLATES_DATA).reduce(function (acc, cur) {
         var _a;
         return (__assign(__assign({}, acc), (_a = {}, _a[cur] = cur, _a)));
     }, {}));
-    return MenuDesignTemplates;
+    return DynamicDesktopNavBarTemplates;
 }());
-exports.default = MenuDesignTemplates;
+exports.default = DynamicDesktopNavBarTemplates;