pds-dev-kit-web-test 0.2.0-beta.0 → 0.2.0

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

@@ -3,18 +3,30 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+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 __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 jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
 var hybrid_1 = require("../../../hybrid");
 var IconButton_1 = require("../IconButton");
 var MainButton_1 = require("../MainButton");
+var TextButton_1 = require("../TextButton");
 var TextLabel_1 = require("../TextLabel");
 function DesktopHeaderBar(_a) {
-    var text = _a.text, _b = _a.size, size = _b === void 0 ? 'xlarge' : _b, _c = _a.leftDisplayType, leftDisplayType = _c === void 0 ? 'text' : _c, iconName = _a.iconName, _d = _a.rightBtnMode, rightBtnMode = _d === void 0 ? 'none' : _d, _e = _a.rightBtn2Mode, rightBtn2Mode = _e === void 0 ? 'none' : _e, _f = _a.rightBtn3Mode, rightBtn3Mode = _f === void 0 ? 'none' : _f, mBtnText = _a.mBtnText, mBtn2Text = _a.mBtn2Text, _g = _a.mBtnState, mBtnState = _g === void 0 ? 'normal' : _g, _h = _a.mBtn2State, mBtn2State = _h === void 0 ? 'normal' : _h, _j = _a.dividerType, dividerType = _j === void 0 ? 'none' : _j, onClickLeftBtn = _a.onClickLeftBtn, onClickRightBtn = _a.onClickRightBtn, onClickRightBtn2 = _a.onClickRightBtn2, onClickRightBtn3 = _a.onClickRightBtn3;
+    var text = _a.text, _b = _a.size, size = _b === void 0 ? 'xlarge' : _b, _c = _a.leftDisplayType, leftDisplayType = _c === void 0 ? 'text' : _c, iconName = _a.iconName, leftBtn2Mode = _a.leftBtn2Mode, leftBtn2Text = _a.leftBtn2Text, _d = _a.rightBtnMode, rightBtnMode = _d === void 0 ? 'none' : _d, _e = _a.rightBtn2Mode, rightBtn2Mode = _e === void 0 ? 'none' : _e, _f = _a.rightBtn3Mode, rightBtn3Mode = _f === void 0 ? 'none' : _f, mBtnText = _a.mBtnText, mBtn2Text = _a.mBtn2Text, _g = _a.mBtnState, mBtnState = _g === void 0 ? 'normal' : _g, _h = _a.mBtn2State, mBtn2State = _h === void 0 ? 'normal' : _h, _j = _a.dividerType, dividerType = _j === void 0 ? 'none' : _j, onClickLeftBtn = _a.onClickLeftBtn, onClickLeft2Btn = _a.onClickLeft2Btn, onClickRightBtn = _a.onClickRightBtn, onClickRightBtn2 = _a.onClickRightBtn2, onClickRightBtn3 = _a.onClickRightBtn3;
     var isLastButtonIcon = rightBtnMode === 'close' ||
         rightBtnMode === 'help_window' ||
         (rightBtnMode === 'none' && rightBtn2Mode === 'help_window') ||
@@ -24,6 +36,11 @@ function DesktopHeaderBar(_a) {
             onClickLeftBtn();
         }
     };
+    var handleClickLeft2Btn = function () {
+        if (onClickLeft2Btn) {
+            onClickLeft2Btn();
+        }
+    };
     var handleClickRightBtn = function () {
         if (onClickRightBtn) {
             onClickRightBtn();
@@ -40,20 +57,18 @@ function DesktopHeaderBar(_a) {
         }
     };
     var mBtnElement = function (text, state, handleClick) {
-        return size === 'xlarge' && (react_1.default.createElement(MainButton_1.MainButton, { text: text, size: "small", styleTheme: "secondary", onClick: handleClick, state: state }));
+        return size === 'xlarge' && ((0, jsx_runtime_1.jsx)(MainButton_1.MainButton, { text: text, size: "small", styleTheme: "secondary", onClick: handleClick, state: state }, void 0));
     };
     var mBtnFillElement = function (text, state, handleClick) {
-        return size === 'xlarge' && (react_1.default.createElement(MainButton_1.MainButton, { text: text, size: "small", onClick: handleClick, state: state }));
+        return size === 'xlarge' && ((0, jsx_runtime_1.jsx)(MainButton_1.MainButton, { text: text, size: "small", onClick: handleClick, state: state }, void 0));
     };
-    var iconButtonElement = function (iconName, handleClick) { return (react_1.default.createElement(IconButton_1.IconButton, { fillType: "fill", baseSize: "large", iconSize: 24, shapeType: "rectangle", iconName: iconName, iconFillType: "line", onClick: handleClick, iconColorKey: iconName === 'ic_help_window'
+    var iconButtonElement = function (iconName, handleClick) { return ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "large", iconSize: 24, shapeType: "rectangle", iconName: iconName, iconFillType: "line", onClick: handleClick, iconColorKey: iconName === 'ic_help_window'
             ? 'ui_cpnt_button_icon_disabled'
-            : 'ui_cpnt_button_icon_enabled', baseColorKey: "ui_cpnt_button_fill_base_transparent" })); };
+            : 'ui_cpnt_button_icon_enabled', baseColorKey: "ui_cpnt_button_fill_base_transparent" }, void 0)); };
     var leftDisplayMode = function () {
         switch (leftDisplayType) {
             case 'icon': {
-                return (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, colorKey: "ui_cpnt_headerbar_icon" }),
-                    react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" })));
+                return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: iconName, colorKey: "ui_cpnt_headerbar_icon" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }, void 0)] }, void 0));
             }
             case 'back': {
                 return iconButtonElement('ic_arrow_left', handleClickLeftBtn);
@@ -63,6 +78,19 @@ function DesktopHeaderBar(_a) {
             }
         }
     };
+    var leftButton2Mode = function () {
+        switch (leftBtn2Mode) {
+            case 'mbtn': {
+                return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(MainButton_1.MainButton, { styleTheme: "secondary", size: "xsmall", text: leftBtn2Text, onClick: handleClickLeft2Btn }, void 0)] }, void 0));
+            }
+            case 'tbtn': {
+                return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(TextButton_1.TextButton, { size: "xsmall", text: leftBtn2Text, onClick: handleClickLeft2Btn }, void 0)] }, void 0));
+            }
+            case 'none': {
+                return;
+            }
+        }
+    };
     var rightButton3Mode = function () {
         switch (rightBtn3Mode) {
             case 'help_window': {
@@ -108,14 +136,7 @@ function DesktopHeaderBar(_a) {
             }
         }
     };
-    return (react_1.default.createElement(S_DesktopHeaderBar, { "x-pds-name": "DesktopHeaderBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, hasDivider: dividerType === 'solid', hasBackIcon: leftDisplayType === 'back' },
-        react_1.default.createElement(S_LeftDisplayBox, null,
-            leftDisplayMode(),
-            react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "body1Bold", singleLineMode: "use", colorTheme: "sysTextPrimary" })),
-        react_1.default.createElement(S_ButtonBox, { isLastButtonIcon: isLastButtonIcon },
-            rightButton3Mode(),
-            rightButton2Mode(),
-            rightButtonMode())));
+    return ((0, jsx_runtime_1.jsxs)(S_DesktopHeaderBar, __assign({ "x-pds-name": "DesktopHeaderBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, hasDivider: dividerType === 'solid', hasBackIcon: leftDisplayType === 'back' }, { children: [(0, jsx_runtime_1.jsxs)(S_LeftDisplayBox, { children: [leftDisplayMode(), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "body1Bold", singleLineMode: "use", colorTheme: "sysTextPrimary" }, void 0), leftButton2Mode()] }, void 0), (0, jsx_runtime_1.jsxs)(S_ButtonBox, __assign({ isLastButtonIcon: isLastButtonIcon }, { children: [rightButton3Mode(), rightButton2Mode(), rightButtonMode()] }), void 0)] }), void 0));
 }
 var S_DesktopHeaderBar = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-bottom: ", ";\n  box-sizing: border-box;\n  display: flex;\n  height: ", ";\n  justify-content: space-between;\n  padding-left: ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-bottom: ", ";\n  box-sizing: border-box;\n  display: flex;\n  height: ", ";\n  justify-content: space-between;\n  padding-left: ", ";\n"])), function (_a) {
     var theme = _a.theme;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { PDSTabItemOption, PDSTextType } from '../../../common/types';
+import type { PDSTabItemOption, PDSTextType } from '../../../common/types';
 declare type ItemArray = PDSTabItemOption & {
     subArray?: PDSTabItemOption[];
 };

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

@@ -3,6 +3,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+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 __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]; } });
@@ -22,11 +33,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-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 jsx_runtime_1 = require("react/jsx-runtime");
 var react_router_dom_1 = require("react-router-dom");
 var styled_components_1 = __importStar(require("styled-components"));
 var TextLabel_1 = require("../TextLabel");
@@ -43,20 +51,16 @@ function DesktopTabBar(_a) {
         };
         var textLabel_1 = function (item, isSubText) {
             if (isSubText) {
-                return (react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: item.isActive ? 'caption1Bold' : 'caption1Regular', colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use" }));
+                return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: item.isActive ? 'caption1Bold' : 'caption1Regular', colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use" }, void 0));
             }
             if (styleTheme === 'content') {
-                return (react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: item.isActive ? 'caption1Bold' : 'caption1Regular', colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use" }));
+                return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: item.isActive ? 'caption1Bold' : 'caption1Regular', colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use" }, void 0));
             }
             if (styleTheme === 'main') {
-                return (react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: item.isActive ? 'caption1Bold' : 'caption1Regular', colorTheme: item.isActive ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }));
+                return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: item.isActive ? 'caption1Bold' : 'caption1Regular', colorTheme: item.isActive ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }, void 0));
             }
         };
-        return (react_1.default.createElement(S_TabBarBox, { "x-pds-name": "DesktopTabBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop" },
-            react_1.default.createElement(S_MainTabBarSpace, null, itemArray.map(function (item) { return (react_1.default.createElement(S_MainTabItemBox, { key: item.title },
-                react_1.default.createElement(S_MainTabItemWrapper, { text: item.title, styleTheme: styleTheme, isActive: item.isActive, onClick: function (e) { return handelClickTabItem_1(item, e); } }, textLabel_1(item, false)),
-                item.isActive && item.subArray && (react_1.default.createElement(S_SubTabBarWrapper, null, item.subArray.map(function (subItem) { return (react_1.default.createElement(S_SubTabItemWrapper, { key: subItem.title, text: subItem.title, onClick: function (e) { return handelClickTabItem_1(subItem, e); } }, textLabel_1(subItem, true))); }))))); })),
-            isSubTabBarActivated && react_1.default.createElement(S_SubTabBarSpace, null)));
+        return ((0, jsx_runtime_1.jsxs)(S_TabBarBox, __assign({ "x-pds-name": "DesktopTabBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [(0, jsx_runtime_1.jsx)(S_MainTabBarSpace, { children: itemArray.map(function (item) { return ((0, jsx_runtime_1.jsxs)(S_MainTabItemBox, { children: [(0, jsx_runtime_1.jsx)(S_MainTabItemWrapper, __assign({ text: item.title, styleTheme: styleTheme, isActive: item.isActive, onClick: function (e) { return handelClickTabItem_1(item, e); } }, { children: textLabel_1(item, false) }), void 0), item.isActive && item.subArray && ((0, jsx_runtime_1.jsx)(S_SubTabBarWrapper, { children: item.subArray.map(function (subItem) { return ((0, jsx_runtime_1.jsx)(S_SubTabItemWrapper, __assign({ text: subItem.title, onClick: function (e) { return handelClickTabItem_1(subItem, e); } }, { children: textLabel_1(subItem, true) }), subItem.title)); }) }, void 0))] }, item.title)); }) }, void 0), isSubTabBarActivated && (0, jsx_runtime_1.jsx)(S_SubTabBarSpace, {}, void 0)] }), void 0));
     }
     if (textArray) {
         var isSubTabBarActivated = textArray.some(function (item) { return pathname.includes(item.path) && item.subArray; });
@@ -67,25 +71,21 @@ function DesktopTabBar(_a) {
         };
         var textLabel_2 = function (item, isSubText) {
             if (isSubText) {
-                return (react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: pathname.includes(item.path) ? 'caption1Bold' : 'caption1Regular', colorTheme: pathname.includes(item.path) ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use" }));
+                return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: pathname.includes(item.path) ? 'caption1Bold' : 'caption1Regular', colorTheme: pathname.includes(item.path) ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use" }, void 0));
             }
             if (styleTheme === 'content') {
-                return (react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: pathname.includes(item.path) ? 'caption1Bold' : 'caption1Regular', colorTheme: pathname.includes(item.path) ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use" }));
+                return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: pathname.includes(item.path) ? 'caption1Bold' : 'caption1Regular', colorTheme: pathname.includes(item.path) ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use" }, void 0));
             }
             if (styleTheme === 'main') {
-                return (react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: pathname.includes(item.path) ? 'caption1Bold' : 'caption1Regular', colorTheme: pathname.includes(item.path) ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }));
+                return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: pathname.includes(item.path) ? 'caption1Bold' : 'caption1Regular', colorTheme: pathname.includes(item.path) ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }, void 0));
             }
         };
-        return (react_1.default.createElement(S_TabBarBox, { "x-pds-name": "DesktopTabBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop" },
-            react_1.default.createElement(S_MainTabBarSpace, null, textArray.map(function (item) { return (react_1.default.createElement(S_MainTabItemBox, { key: item.path },
-                react_1.default.createElement(S_MainTabItemWrapper, { isActive: pathname.includes(item.path), styleTheme: styleTheme, text: item.title, onClick: function () { return handleClick_1(item); } }, textLabel_2(item, false)),
-                pathname.includes(item.path) && item.subArray && (react_1.default.createElement(S_SubTabBarWrapper, null, item.subArray.map(function (subItem) { return (react_1.default.createElement(S_SubTabItemWrapper, { key: subItem.title, text: subItem.title, onClick: function () { return handleClick_1(subItem); } }, textLabel_2(subItem, true))); }))))); })),
-            isSubTabBarActivated && react_1.default.createElement(S_SubTabBarSpace, null)));
+        return ((0, jsx_runtime_1.jsxs)(S_TabBarBox, __assign({ "x-pds-name": "DesktopTabBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [(0, jsx_runtime_1.jsx)(S_MainTabBarSpace, { children: textArray.map(function (item) { return ((0, jsx_runtime_1.jsxs)(S_MainTabItemBox, { children: [(0, jsx_runtime_1.jsx)(S_MainTabItemWrapper, __assign({ isActive: pathname.includes(item.path), styleTheme: styleTheme, text: item.title, onClick: function () { return handleClick_1(item); } }, { children: textLabel_2(item, false) }), void 0), pathname.includes(item.path) && item.subArray && ((0, jsx_runtime_1.jsx)(S_SubTabBarWrapper, { children: item.subArray.map(function (subItem) { return ((0, jsx_runtime_1.jsx)(S_SubTabItemWrapper, __assign({ text: subItem.title, onClick: function () { return handleClick_1(subItem); } }, { children: textLabel_2(subItem, true) }), subItem.title)); }) }, void 0))] }, item.path)); }) }, void 0), isSubTabBarActivated && (0, jsx_runtime_1.jsx)(S_SubTabBarSpace, {}, void 0)] }), void 0));
     }
-    return react_1.default.createElement(react_1.default.Fragment, null);
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
 }
 var S_TabBarBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
-var S_MainTabBarSpace = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  padding-left: ", ";\n  height: 40px;\n"], ["\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  padding-left: ", ";\n  height: 40px;\n"])), function (_a) {
+var S_MainTabBarSpace = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  height: 40px;\n  padding-left: ", ";\n"], ["\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  height: 40px;\n  padding-left: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_tabbar_base_area;
 }, function (_a) {
@@ -95,7 +95,7 @@ var S_MainTabBarSpace = styled_components_1.default.div(templateObject_2 || (tem
     var theme = _a.theme;
     return theme.spacing.spacingE;
 });
-var tabIndicator = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  &::after {\n    background-color: ", ";\n    bottom: -1px;\n    left: 0px;\n    content: '';\n    height: 2px;\n    position: absolute;\n    width: 100%;\n    ", ";\n  }\n"], ["\n  &::after {\n    background-color: ", ";\n    bottom: -1px;\n    left: 0px;\n    content: '';\n    height: 2px;\n    position: absolute;\n    width: 100%;\n    ", ";\n  }\n"])), function (_a) {
+var tabIndicator = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  &::after {\n    background-color: ", ";\n    bottom: -1px;\n    content: '';\n    height: 2px;\n    left: 0px;\n    position: absolute;\n    width: 100%;\n    ", ";\n  }\n"], ["\n  &::after {\n    background-color: ", ";\n    bottom: -1px;\n    content: '';\n    height: 2px;\n    left: 0px;\n    position: absolute;\n    width: 100%;\n    ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme, styleTheme = _a.styleTheme;
     return styleTheme === 'content'
         ? theme.ui_cpnt_tabbar_border_active_indicator
@@ -105,7 +105,10 @@ var tabIndicator = (0, styled_components_1.css)(templateObject_3 || (templateObj
     return !isActive && "display: none;";
 });
 // NOTE: Tab item 활성화 시 text에 bold가 적용되는데, 이때 font-family에 따라 text 영역의 너비가 변경되어 시각적 변동을 일으키는 문제를 해결하기 위한 처리입니다.
-var textOffset = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  & > div::before {\n    font-weight: ", ";\n    display: block;\n    content: ", ";\n    height: 0;\n    overflow: hidden;\n    visibility: hidden;\n  }\n\n  & > div::after {\n    font-weight: ", ";\n    display: block;\n    content: ", ";\n    height: 0;\n    overflow: hidden;\n    visibility: hidden;\n  }\n"], ["\n  & > div::before {\n    font-weight: ", ";\n    display: block;\n    content: ", ";\n    height: 0;\n    overflow: hidden;\n    visibility: hidden;\n  }\n\n  & > div::after {\n    font-weight: ", ";\n    display: block;\n    content: ", ";\n    height: 0;\n    overflow: hidden;\n    visibility: hidden;\n  }\n"])), function (_a) {
+var textOffset = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  & > div::before {\n    content: ", ";\n    display: block;\n    font-weight: ", ";\n    height: 0;\n    overflow: hidden;\n    visibility: hidden;\n  }\n\n  & > div::after {\n    content: ", ";\n    display: block;\n    font-weight: ", ";\n    height: 0;\n    overflow: hidden;\n    visibility: hidden;\n  }\n"], ["\n  & > div::before {\n    content: ", ";\n    display: block;\n    font-weight: ", ";\n    height: 0;\n    overflow: hidden;\n    visibility: hidden;\n  }\n\n  & > div::after {\n    content: ", ";\n    display: block;\n    font-weight: ", ";\n    height: 0;\n    overflow: hidden;\n    visibility: hidden;\n  }\n"])), function (_a) {
+    var text = _a.text;
+    return "'" + text + "'";
+}, function (_a) {
     var theme = _a.theme;
     return theme.fontWeight.normal;
 }, function (_a) {
@@ -114,27 +117,24 @@ var textOffset = (0, styled_components_1.css)(templateObject_4 || (templateObjec
 }, function (_a) {
     var theme = _a.theme;
     return theme.fontWeight.bold;
-}, function (_a) {
-    var text = _a.text;
-    return "'" + text + "'";
 });
 var S_MainTabItemBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-right: ", ";\n  position: relative;\n\n  &:last-child {\n    margin-right: 0;\n  }\n"], ["\n  margin-right: ", ";\n  position: relative;\n\n  &:last-child {\n    margin-right: 0;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingD;
 });
-var S_MainTabItemWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: flex-end;\n  display: flex;\n  height: 100%;\n  box-sizing: border-box;\n  padding: 0 ", ";\n  padding-bottom: ", ";\n  cursor: pointer;\n\n  ", "\n  ", "\n"], ["\n  align-items: flex-end;\n  display: flex;\n  height: 100%;\n  box-sizing: border-box;\n  padding: 0 ", ";\n  padding-bottom: ", ";\n  cursor: pointer;\n\n  ", "\n  ", "\n"])), function (_a) {
+var S_MainTabItemWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: flex-end;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  height: 100%;\n  padding: 0 ", ";\n  padding-bottom: ", ";\n\n  ", "\n  ", "\n"], ["\n  align-items: flex-end;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  height: 100%;\n  padding: 0 ", ";\n  padding-bottom: ", ";\n\n  ", "\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingA;
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
 }, tabIndicator, textOffset);
-var S_SubTabBarWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: max-content;\n  position: absolute;\n  bottom: -33px;\n  left: 0px;\n  height: 32px;\n  display: flex;\n"], ["\n  width: max-content;\n  position: absolute;\n  bottom: -33px;\n  left: 0px;\n  height: 32px;\n  display: flex;\n"])));
-var S_SubTabBarSpace = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  height: 32px;\n  background-color: ", ";\n"], ["\n  height: 32px;\n  background-color: ", ";\n"])), function (_a) {
+var S_SubTabBarWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  bottom: -33px;\n  display: flex;\n  height: 32px;\n  left: 0px;\n  position: absolute;\n  width: max-content;\n"], ["\n  bottom: -33px;\n  display: flex;\n  height: 32px;\n  left: 0px;\n  position: absolute;\n  width: max-content;\n"])));
+var S_SubTabBarSpace = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 32px;\n"], ["\n  background-color: ", ";\n  height: 32px;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_tabbar_base_area_sub;
 });
-var S_SubTabItemWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  display: flex;\n  margin-right: ", ";\n  padding: 0 ", ";\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  ", "\n"], ["\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  display: flex;\n  margin-right: ", ";\n  padding: 0 ", ";\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  ", "\n"])), function (_a) {
+var S_SubTabItemWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  margin-right: ", ";\n  padding: 0 ", ";\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  ", "\n"], ["\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  margin-right: ", ";\n  padding: 0 ", ";\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingE;
 }, function (_a) {

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

@@ -1,12 +1,11 @@
 /// <reference types="react" />
-import { TFunctionResult } from 'i18next';
-import { PDSValueOption } from '../../../common';
+import type { PDSTextType, PDSValueOption } from '../../../common';
 declare type DropDownValues = PDSValueOption & {
     state?: 'normal' | 'disabled';
 };
 declare type Props = {
     colorTheme?: 'none' | 'dark' | 'white';
-    hintText?: TFunctionResult;
+    hintText?: PDSTextType;
     maxHeightItemNumber?: number;
     defaultValue?: PDSValueOption;
     value?: PDSValueOption | null;

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

@@ -3,6 +3,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+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 __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]; } });
@@ -23,7 +34,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var styled_components_1 = __importStar(require("styled-components"));
 var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
 var hybrid_1 = require("../../../hybrid");
@@ -164,15 +176,7 @@ function Dropdown(_a) {
         var LARGE_HEIGHT = 48;
         return LARGE_HEIGHT * maxHeightItemNumber;
     }, [size, maxHeightItemNumber]);
-    return (react_1.default.createElement(S_Dropdown, { "x-pds-name": "Dropdown", "x-pds-element-type": "component", "x-pds-device-type": "desktop", className: "container", size: size, tabIndex: 0, onBlur: handleBlur, responsiveMode: responsiveMode, customWidth: customWidth },
-        react_1.default.createElement(S_Select, { size: size, onClick: handleClick, isFocused: isFocused, state: state, colorTheme: colorTheme, responsiveMode: responsiveMode, customWidth: customWidth },
-            react_1.default.createElement(S_TextLabel, { size: size, responsiveMode: responsiveMode },
-                react_1.default.createElement(TextLabel_1.TextLabel, { text: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.text) || (value === null || value === void 0 ? void 0 : value.text) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.text) || hintText, styleTheme: "form2Regular", singleLineMode: "use", colorTheme: getTextColorTheme(), colorOverride: getTextColorOverride(), ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })),
-            react_1.default.createElement(hybrid_1.Icon, { size: 16, fillType: "line", iconName: isFocused ? 'ic_arrow_up' : 'ic_arrow_down', colorKey: getIconColorKey() }),
-            react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" })),
-        isFocused && (react_1.default.createElement(S_ContextMenuWrapper, null,
-            react_1.default.createElement(ContextMenu_1.ContextMenu, { autoWidthMode: "use", maxHeight: maxHeight, customWidth: customWidth }, valueArray.map(function (el) { return (react_1.default.createElement(react_1.Fragment, { key: el.value },
-                react_1.default.createElement(ContextMenuItem_1.ContextMenuItem, { option: el, size: size, isSelected: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.value) === el.value, onClick: handleClickOption, state: el.state }))); }))))));
+    return ((0, jsx_runtime_1.jsxs)(S_Dropdown, __assign({ "x-pds-name": "Dropdown", "x-pds-element-type": "component", "x-pds-device-type": "desktop", className: "container", size: size, tabIndex: 0, onBlur: handleBlur, responsiveMode: responsiveMode, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsxs)(S_Select, __assign({ size: size, onClick: handleClick, isFocused: isFocused, state: state, colorTheme: colorTheme, responsiveMode: responsiveMode, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ size: size, responsiveMode: responsiveMode }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.text) || (value === null || value === void 0 ? void 0 : value.text) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.text) || hintText, styleTheme: "form2Regular", singleLineMode: "use", colorTheme: getTextColorTheme(), colorOverride: getTextColorOverride(), ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }, void 0) }), void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, fillType: "line", iconName: isFocused ? 'ic_arrow_up' : 'ic_arrow_down', colorKey: getIconColorKey() }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" }, void 0)] }), void 0), isFocused && ((0, jsx_runtime_1.jsx)(S_ContextMenuWrapper, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, __assign({ autoWidthMode: "use", maxHeight: maxHeight, customWidth: customWidth }, { children: valueArray.map(function (el) { return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, size: size, isSelected: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.value) === el.value, onClick: handleClickOption, state: el.state }, void 0) }, el.value)); }) }), void 0) }, void 0))] }), void 0));
 }
 var S_TextLabel = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex: 1;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  ", ";\n"], ["\n  flex: 1;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
@@ -271,14 +275,34 @@ var borderColor = (0, styled_components_1.css)(templateObject_10 || (templateObj
             return theme.ui_cpnt_dropdown_border_normal;
     }
 });
-var normal_transition = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n"], ["\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_transition_test_text_field_hover;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.ui_transition_test_text_field_active;
+var backgroundHoverColor = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
+    var colorTheme = _a.colorTheme, theme = _a.theme;
+    switch (colorTheme) {
+        case 'none':
+            return theme.ui_cpnt_textfield_base_hover;
+        case 'dark':
+            return theme.ui_cpnt_dropdown_base_hover_darktheme;
+        case 'white':
+            return theme.ui_cpnt_dropdown_base_hover_white;
+        default:
+            return theme.ui_cpnt_textfield_base_hover;
+    }
+});
+var backgroundActiveColor = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
+    var colorTheme = _a.colorTheme, theme = _a.theme;
+    switch (colorTheme) {
+        case 'none':
+            return theme.ui_cpnt_textfield_base_pressed;
+        case 'dark':
+            return theme.ui_cpnt_dropdown_base_pressed_darktheme;
+        case 'white':
+            return theme.ui_cpnt_dropdown_base_pressed_white;
+        default:
+            return theme.ui_cpnt_textfield_base_pressed;
+    }
 });
-var S_Select = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  align-items: center;\n  box-sizing: border-box;\n  background-color: ", ";\n  border: 2px solid\n    ", ";\n  border-radius: 14px;\n  cursor: ", ";\n  display: flex;\n  justify-content: space-between;\n\n  ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  align-items: center;\n  box-sizing: border-box;\n  background-color: ", ";\n  border: 2px solid\n    ", ";\n  border-radius: 14px;\n  cursor: ", ";\n  display: flex;\n  justify-content: space-between;\n\n  ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_a) {
+var normalActionColor = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n"], ["\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n"])), backgroundHoverColor, backgroundActiveColor);
+var S_Select = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border: 2px solid\n    ", ";\n  border-radius: 14px;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  justify-content: space-between;\n\n  ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border: 2px solid\n    ", ";\n  border-radius: 14px;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  justify-content: space-between;\n\n  ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_a) {
     var state = _a.state;
     switch (state) {
         case 'disabled':
@@ -318,13 +342,13 @@ var S_Select = styled_components_1.default.div(templateObject_12 || (templateObj
 }, function (_a) {
     var customWidth = _a.customWidth;
     return customWidth && "width: " + customWidth + ";";
-}, transitionStyle_1.TextFieldTransition, function (_a) {
+}, transitionStyle_1.InputTransition, function (_a) {
     var state = _a.state;
-    return state === 'normal' && normal_transition;
+    return state === 'normal' && normalActionColor;
 });
-var S_ContextMenuWrapper = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  display: block;\n  margin-top: ", ";\n  position: absolute;\n  width: inherit;\n"], ["\n  display: block;\n  margin-top: ", ";\n  position: absolute;\n  width: inherit;\n"])), function (_a) {
+var S_ContextMenuWrapper = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  display: block;\n  margin-top: ", ";\n  position: absolute;\n  width: inherit;\n"], ["\n  display: block;\n  margin-top: ", ";\n  position: absolute;\n  width: inherit;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
 });
 exports.default = Dropdown;
-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;
+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;

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

@@ -1,8 +1,8 @@
-import React from 'react';
+/// <reference types="react" />
 import { BrandLogo, UserProfile } from './blocks';
 import { ActiveModeTypes } from './reducer';
 import { TemplateNamesType } from './templates';
-import { ParsedNode } from './types';
+import type { ParsedNode } from './types';
 declare type BrandLogo = {
     src: string;
     text: string;
@@ -29,6 +29,6 @@ declare type ContextProp = {
     activeMode: ActiveModeTypes;
     handleClickInternalMenuItemNav: (url: string) => void;
 };
-export declare const BasePathContext: React.Context<ContextProp>;
+export declare const BasePathContext: import("react").Context<ContextProp>;
 declare function DynamicDesktopNavBar({ isPreview, template, brandLogo, primaryMenus, secondaryMenus, userProfile, basePath, colorTheme }: Props): JSX.Element;
 export default DynamicDesktopNavBar;

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

@@ -35,7 +35,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BasePathContext = void 0;
-var react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var react_router_dom_1 = require("react-router-dom");
 var styled_components_1 = __importStar(require("styled-components"));
 var BoxLayout_1 = require("../../../common/components/BoxLayout");
@@ -75,20 +76,9 @@ function DynamicDesktopNavBar(_a) {
     function handleClickInternalMenuItemNav(url) {
         dispatch({ type: 'INTERNAL_CLICKED', payload: { clickedURL: url } });
     }
-    return (react_1.default.createElement(exports.BasePathContext.Provider, { value: { basePath: basePath, activeMode: state.mode, handleClickInternalMenuItemNav: handleClickInternalMenuItemNav } }, colorTheme === 'transparent' ? (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: __assign(__assign(__assign({}, theme), (0, theme_1.themeByGivenTone)('DARK')), { ui_menu_background: theme.ui_menu_background_transparent, ui_menu_button_base: theme.ui_menu_button_base_transparent }) },
-        react_1.default.createElement(S_DynamicDesktopNavBar, { "x-pds-name": "DynamicDesktopNavBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop", isPreview: isPreview },
-            react_1.default.createElement(S_Grid, { className: "DynamicDesktopNavBarGrid", gridTemplate: gridTemplate, style: gridStyle },
-                react_1.default.createElement(blocks_1.BrandLogo, { to: brandLogo.href, logoSrc: brandLogo.src, fallbackText: brandLogo.text }),
-                react_1.default.createElement(blocks_1.PrimaryMenu, { menus: slicedPrimaryMenus, showMenuAsIcon: primaryMenuOptions.showMenuAsIcon, style: primaryMenuOptions.style }),
-                showSecondaryMenu && (react_1.default.createElement(blocks_1.SecondaryMenu, { menus: slicedSecondaryMenus, showMenuAsIcon: secondaryMenuOptions.showMenuAsIcon, style: secondaryMenuOptions.style })),
-                react_1.default.createElement(blocks_1.UserProfile, { src: userProfile.src, to: userProfile.href, leftIconButton: userProfile.leftIconButton, overrideUserProfile: userProfile.overrideUserProfile, style: userProfileOptions.style }))))) : (react_1.default.createElement(S_DynamicDesktopNavBar, { "x-pds-name": "DynamicDesktopNavBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop", isPreview: isPreview },
-        react_1.default.createElement(S_Grid, { className: "DynamicDesktopNavBarGrid", gridTemplate: gridTemplate, style: gridStyle },
-            react_1.default.createElement(blocks_1.BrandLogo, { to: brandLogo.href, logoSrc: brandLogo.src, fallbackText: brandLogo.text }),
-            react_1.default.createElement(blocks_1.PrimaryMenu, { menus: slicedPrimaryMenus, showMenuAsIcon: primaryMenuOptions.showMenuAsIcon, style: primaryMenuOptions.style }),
-            showSecondaryMenu && (react_1.default.createElement(blocks_1.SecondaryMenu, { menus: slicedSecondaryMenus, showMenuAsIcon: secondaryMenuOptions.showMenuAsIcon, style: secondaryMenuOptions.style })),
-            react_1.default.createElement(blocks_1.UserProfile, { src: userProfile.src, to: userProfile.href, leftIconButton: userProfile.leftIconButton, overrideUserProfile: userProfile.overrideUserProfile, style: userProfileOptions.style }))))));
+    return ((0, jsx_runtime_1.jsx)(exports.BasePathContext.Provider, __assign({ value: { basePath: basePath, activeMode: state.mode, handleClickInternalMenuItemNav: handleClickInternalMenuItemNav } }, { children: colorTheme === 'transparent' ? ((0, jsx_runtime_1.jsx)(styled_components_1.ThemeProvider, __assign({ theme: __assign(__assign(__assign({}, theme), (0, theme_1.themeByGivenTone)('DARK')), { ui_menu_background: theme.ui_menu_background_transparent, ui_menu_button_base: theme.ui_menu_button_base_transparent }) }, { children: (0, jsx_runtime_1.jsx)(S_DynamicDesktopNavBar, __assign({ "x-pds-name": "DynamicDesktopNavBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop", isPreview: isPreview }, { children: (0, jsx_runtime_1.jsxs)(S_Grid, __assign({ className: "DynamicDesktopNavBarGrid", gridTemplate: gridTemplate, style: gridStyle }, { children: [(0, jsx_runtime_1.jsx)(blocks_1.BrandLogo, { to: brandLogo.href, logoSrc: brandLogo.src, fallbackText: brandLogo.text }, void 0), (0, jsx_runtime_1.jsx)(blocks_1.PrimaryMenu, { menus: slicedPrimaryMenus, showMenuAsIcon: primaryMenuOptions.showMenuAsIcon, style: primaryMenuOptions.style }, void 0), showSecondaryMenu && ((0, jsx_runtime_1.jsx)(blocks_1.SecondaryMenu, { menus: slicedSecondaryMenus, showMenuAsIcon: secondaryMenuOptions.showMenuAsIcon, style: secondaryMenuOptions.style }, void 0)), (0, jsx_runtime_1.jsx)(blocks_1.UserProfile, { src: userProfile.src, to: userProfile.href, leftIconButton: userProfile.leftIconButton, overrideUserProfile: userProfile.overrideUserProfile, style: userProfileOptions.style }, void 0)] }), void 0) }), void 0) }), void 0)) : ((0, jsx_runtime_1.jsx)(S_DynamicDesktopNavBar, __assign({ "x-pds-name": "DynamicDesktopNavBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop", isPreview: isPreview }, { children: (0, jsx_runtime_1.jsxs)(S_Grid, __assign({ className: "DynamicDesktopNavBarGrid", gridTemplate: gridTemplate, style: gridStyle }, { children: [(0, jsx_runtime_1.jsx)(blocks_1.BrandLogo, { to: brandLogo.href, logoSrc: brandLogo.src, fallbackText: brandLogo.text }, void 0), (0, jsx_runtime_1.jsx)(blocks_1.PrimaryMenu, { menus: slicedPrimaryMenus, showMenuAsIcon: primaryMenuOptions.showMenuAsIcon, style: primaryMenuOptions.style }, void 0), showSecondaryMenu && ((0, jsx_runtime_1.jsx)(blocks_1.SecondaryMenu, { menus: slicedSecondaryMenus, showMenuAsIcon: secondaryMenuOptions.showMenuAsIcon, style: secondaryMenuOptions.style }, void 0)), (0, jsx_runtime_1.jsx)(blocks_1.UserProfile, { src: userProfile.src, to: userProfile.href, leftIconButton: userProfile.leftIconButton, overrideUserProfile: userProfile.overrideUserProfile, style: userProfileOptions.style }, void 0)] }), void 0) }), void 0)) }), void 0));
 }
-var S_Grid = (0, styled_components_1.default)(BoxLayout_1.Grid)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  justify-items: center;\n  gap: 24px;\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  align-items: center;\n  justify-items: center;\n  gap: 24px;\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
+var S_Grid = (0, styled_components_1.default)(BoxLayout_1.Grid)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  gap: 24px;\n  justify-items: center;\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  align-items: center;\n  gap: 24px;\n  justify-items: center;\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingE;
 }, function (_a) {

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

@@ -3,17 +3,27 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+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 __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 jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
 var LogoNav_1 = __importDefault(require("../components/LogoNav"));
 function BrandLogo(_a) {
     var to = _a.to, logoSrc = _a.logoSrc, fallbackText = _a.fallbackText, style = _a.style;
-    return (react_1.default.createElement(S_BrandLogo, { style: style },
-        react_1.default.createElement(LogoNav_1.default, { to: to, logoSrc: logoSrc, fallbackText: fallbackText })));
+    return ((0, jsx_runtime_1.jsx)(S_BrandLogo, __assign({ style: style }, { children: (0, jsx_runtime_1.jsx)(LogoNav_1.default, { to: to, logoSrc: logoSrc, fallbackText: fallbackText }, void 0) }), void 0));
 }
 var S_BrandLogo = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  grid-area: BRAND_LOGO;\n"], ["\n  display: flex;\n  grid-area: BRAND_LOGO;\n"])));
 exports.default = BrandLogo;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { CSSProperties } from 'styled-components';
-import { ParsedNode } from '../types';
+import type { ParsedNode } from '../types';
 declare type Props = {
     menus: ParsedNode[];
     showMenuAsIcon: boolean;

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

@@ -3,30 +3,23 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-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;
+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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var smoothscroll_polyfill_1 = __importDefault(require("smoothscroll-polyfill"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var __1 = require("../../..");
@@ -76,17 +69,10 @@ function PrimaryMenu(_a) {
                 behavior: 'smooth'
             });
     };
-    return (react_1.default.createElement(S_PrimaryMenuBox, { style: style },
-        isOverflow && !isScrollBoxStart && (react_1.default.createElement(S_LeftButtonWrapper, null,
-            react_1.default.createElement(S_ButtonWrapper, null,
-                react_1.default.createElement(__1.D_IconButton, { fillType: "fill", baseSize: "medium", baseColorKey: "ui_menu_background", iconName: "ic_arrow_left", iconFillType: "line", iconColorKey: "ui_cpnt_button_icon_default", shapeType: "circular", iconSize: 20, onClick: onClickLeftButton })))),
-        react_1.default.createElement(S_Main_PrimaryMenu, { onScroll: function () { return trigger(); }, ref: primaryCallbackRef }, menus.map(function (menu, index) { return (react_1.default.createElement(MenuItemNav_1.MenuItemNav, { key: index, menu: menu, showMenuAsIcon: showMenuAsIcon })); })),
-        isOverflow && !isScrollBoxEnd && (react_1.default.createElement(S_RightButtonWrapper, null,
-            react_1.default.createElement(S_ButtonWrapper, null,
-                react_1.default.createElement(__1.D_IconButton, { fillType: "fill", baseSize: "medium", baseColorKey: "ui_menu_background", iconName: "ic_arrow_right", iconFillType: "line", iconColorKey: "ui_cpnt_button_icon_default", shapeType: "circular", iconSize: 20, onClick: onClickRightButton }))))));
+    return ((0, jsx_runtime_1.jsxs)(S_PrimaryMenuBox, __assign({ style: style }, { children: [isOverflow && !isScrollBoxStart && ((0, jsx_runtime_1.jsx)(S_LeftButtonWrapper, { children: (0, jsx_runtime_1.jsx)(S_ButtonWrapper, { children: (0, jsx_runtime_1.jsx)(__1.D_IconButton, { fillType: "fill", baseSize: "medium", baseColorKey: "ui_menu_background", iconName: "ic_arrow_left", iconFillType: "line", iconColorKey: "ui_cpnt_button_icon_default", shapeType: "circular", iconSize: 20, onClick: onClickLeftButton }, void 0) }, void 0) }, void 0)), (0, jsx_runtime_1.jsx)(S_Main_PrimaryMenu, __assign({ onScroll: function () { return trigger(); }, ref: primaryCallbackRef }, { children: menus.map(function (menu, index) { return ((0, jsx_runtime_1.jsx)(MenuItemNav_1.MenuItemNav, { menu: menu, showMenuAsIcon: showMenuAsIcon }, index)); }) }), void 0), isOverflow && !isScrollBoxEnd && ((0, jsx_runtime_1.jsx)(S_RightButtonWrapper, { children: (0, jsx_runtime_1.jsx)(S_ButtonWrapper, { children: (0, jsx_runtime_1.jsx)(__1.D_IconButton, { fillType: "fill", baseSize: "medium", baseColorKey: "ui_menu_background", iconName: "ic_arrow_right", iconFillType: "line", iconColorKey: "ui_cpnt_button_icon_default", shapeType: "circular", iconSize: 20, onClick: onClickRightButton }, void 0) }, void 0) }, void 0))] }), void 0));
 }
-var S_Main_PrimaryMenu = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  grid-area: PRIMARY_MENU;\n  overflow-x: auto;\n  width: max-content;\n  overscroll-behavior-y: none;\n\n  & > div:first-child {\n    margin-left: 32px;\n  }\n"], ["\n  display: flex;\n  grid-area: PRIMARY_MENU;\n  overflow-x: auto;\n  width: max-content;\n  overscroll-behavior-y: none;\n\n  & > div:first-child {\n    margin-left: 32px;\n  }\n"])));
-var S_PrimaryMenuBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  overflow-x: hidden;\n  overflow-y: hidden;\n  width: 100%;\n  max-width: 100%;\n  max-height: 100%;\n  position: relative;\n  height: 48px;\n"], ["\n  display: flex;\n  overflow-x: hidden;\n  overflow-y: hidden;\n  width: 100%;\n  max-width: 100%;\n  max-height: 100%;\n  position: relative;\n  height: 48px;\n"])));
+var S_Main_PrimaryMenu = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  grid-area: PRIMARY_MENU;\n  overflow-x: auto;\n  overscroll-behavior-y: none;\n  width: max-content;\n\n  & > div:first-child {\n    margin-left: 32px;\n  }\n"], ["\n  display: flex;\n  grid-area: PRIMARY_MENU;\n  overflow-x: auto;\n  overscroll-behavior-y: none;\n  width: max-content;\n\n  & > div:first-child {\n    margin-left: 32px;\n  }\n"])));
+var S_PrimaryMenuBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  height: 48px;\n  max-height: 100%;\n  max-width: 100%;\n  overflow-x: hidden;\n  overflow-y: hidden;\n  position: relative;\n  width: 100%;\n"], ["\n  display: flex;\n  height: 48px;\n  max-height: 100%;\n  max-width: 100%;\n  overflow-x: hidden;\n  overflow-y: hidden;\n  position: relative;\n  width: 100%;\n"])));
 var S_RightButtonWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  position: absolute;\n  right: 0;\n\n  &::before {\n    background: ", ";\n    content: '';\n    display: block;\n    height: 100%;\n    pointer-events: none;\n    width: 50px;\n  }\n"], ["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  position: absolute;\n  right: 0;\n\n  &::before {\n    background: ", ";\n    content: '';\n    display: block;\n    height: 100%;\n    pointer-events: none;\n    width: 50px;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return "linear-gradient(to left, " + theme.ui_menu_background + " 10%, " + theme.ui_cpnt_pg_gradient_02 + " 90%)";
@@ -95,7 +81,7 @@ var S_LeftButtonWrapper = styled_components_1.default.div(templateObject_4 || (t
     var theme = _a.theme;
     return "linear-gradient(to right, " + theme.ui_menu_background + " 20%, " + theme.ui_cpnt_pg_gradient_02 + " 80%)";
 });
-var S_ButtonWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 50px;\n  display: flex;\n  align-items: center;\n\n  & > button {\n    background-color: ", ";\n\n    * path {\n      stroke: ", ";\n    }\n  }\n"], ["\n  background-color: ", ";\n  height: 50px;\n  display: flex;\n  align-items: center;\n\n  & > button {\n    background-color: ", ";\n\n    * path {\n      stroke: ", ";\n    }\n  }\n"])), function (_a) {
+var S_ButtonWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  display: flex;\n  height: 50px;\n\n  & > button {\n    background-color: ", ";\n\n    * path {\n      stroke: ", ";\n    }\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  display: flex;\n  height: 50px;\n\n  & > button {\n    background-color: ", ";\n\n    * path {\n      stroke: ", ";\n    }\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_menu_background;
 }, function (_a) {

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { CSSProperties } from 'styled-components';
-import { ParsedNode } from '../types';
+import type { ParsedNode } from '../types';
 declare type Props = {
     menus: ParsedNode[];
     showMenuAsIcon: boolean;