pds-dev-kit-web-test 0.2.28 → 0.2.30

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

@@ -57,18 +57,18 @@ function DesktopHeaderBar(_a) {
         }
     };
     var mBtnElement = function (text, state, handleClick) {
-        return size === 'xlarge' && ((0, jsx_runtime_1.jsx)(MainButton_1.MainButton, { text: text, size: "small", styleTheme: "secondary", onClick: handleClick, state: state }, void 0));
+        return size === 'xlarge' && ((0, jsx_runtime_1.jsx)(MainButton_1.MainButton, { text: text, size: "small", styleTheme: "secondary", onClick: handleClick, state: state }));
     };
     var mBtnFillElement = function (text, state, handleClick) {
-        return size === 'xlarge' && ((0, jsx_runtime_1.jsx)(MainButton_1.MainButton, { text: text, size: "small", onClick: handleClick, state: state }, void 0));
+        return size === 'xlarge' && ((0, jsx_runtime_1.jsx)(MainButton_1.MainButton, { text: text, size: "small", onClick: handleClick, state: state }));
     };
     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" }, void 0)); };
+            : 'ui_cpnt_button_icon_enabled', baseColorKey: "ui_cpnt_button_fill_base_transparent" })); };
     var leftDisplayMode = function () {
         switch (leftDisplayType) {
             case 'icon': {
-                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));
+                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" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" })] }));
             }
             case 'back': {
                 return iconButtonElement('ic_arrow_left', handleClickLeftBtn);
@@ -81,10 +81,10 @@ function DesktopHeaderBar(_a) {
     var leftButton2Mode = function () {
         switch (leftBtn2Mode) {
             case 'mbtn': {
-                return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: styleTheme === 'type_a' ? ((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)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { shapeType: "round", baseSize: "xsmall", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconFillType: "fill", iconSize: 16, iconName: "ic_light_bulb", iconColorKey: "ui_cpnt_button_icon_primary", fillType: "fill", onClick: handleClickLeft2Btn }, void 0)] }, void 0)) }, void 0));
+                return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: styleTheme === 'type_a' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" }), (0, jsx_runtime_1.jsx)(MainButton_1.MainButton, { styleTheme: "secondary", size: "xsmall", text: leftBtn2Text, onClick: handleClickLeft2Btn })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { shapeType: "round", baseSize: "xsmall", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconFillType: "fill", iconSize: 16, iconName: "ic_light_bulb", iconColorKey: "ui_cpnt_button_icon_primary", fillType: "fill", onClick: handleClickLeft2Btn })] })) }));
             }
             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));
+                return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" }), (0, jsx_runtime_1.jsx)(TextButton_1.TextButton, { size: "xsmall", text: leftBtn2Text, onClick: handleClickLeft2Btn })] }));
             }
             case 'none': {
                 return;
@@ -136,12 +136,12 @@ function DesktopHeaderBar(_a) {
             }
         }
     };
-    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', styleTheme: styleTheme }, { children: [(0, jsx_runtime_1.jsxs)(S_LeftDisplayBox, __assign({ styleTheme: styleTheme }, { children: [styleTheme === 'type_a' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [leftDisplayMode(), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, singleLineMode: "use", customFontWeight: "bold", colorTheme: "sysTextPrimary" }, void 0)] }, void 0)) : ((0, jsx_runtime_1.jsxs)(S_TypeBText, __assign({ hasBackIcon: leftDisplayType === 'back', onClick: function () {
+    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', styleTheme: styleTheme }, { children: [(0, jsx_runtime_1.jsxs)(S_LeftDisplayBox, __assign({ styleTheme: styleTheme }, { children: [styleTheme === 'type_a' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [leftDisplayMode(), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, singleLineMode: "use", customFontWeight: "bold", colorTheme: "sysTextPrimary" })] })) : ((0, jsx_runtime_1.jsxs)(S_TypeBText, __assign({ hasBackIcon: leftDisplayType === 'back', onClick: function () {
                             if (leftDisplayType === 'back') {
                                 handleClickLeftBtn();
                             }
                             return;
-                        } }, { children: [leftDisplayType === 'back' && ((0, jsx_runtime_1.jsx)(S_Icon, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_arrow_left", fillType: "line", colorKey: "ui_cpnt_button_icon_enabled" }, void 0) }, void 0)), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: String(text).toUpperCase(), singleLineMode: "use", customFontWeight: "bold", customFontSize: "14px", colorTheme: "sysTextPrimary", letterSpacing: "0.15em" }, void 0)] }), void 0)), leftButton2Mode()] }), void 0), (0, jsx_runtime_1.jsxs)(S_ButtonBox, __assign({ isLastButtonIcon: isLastButtonIcon }, { children: [rightButton3Mode(), rightButton2Mode(), rightButtonMode()] }), void 0)] }), void 0));
+                        } }, { children: [leftDisplayType === 'back' && ((0, jsx_runtime_1.jsx)(S_Icon, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_arrow_left", fillType: "line", colorKey: "ui_cpnt_button_icon_enabled" }) })), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: String(text).toUpperCase(), singleLineMode: "use", customFontWeight: "bold", customFontSize: "14px", colorTheme: "sysTextPrimary", letterSpacing: "0.15em" })] }))), leftButton2Mode()] })), (0, jsx_runtime_1.jsxs)(S_ButtonBox, __assign({ isLastButtonIcon: isLastButtonIcon }, { children: [rightButton3Mode(), rightButton2Mode(), rightButtonMode()] }))] })));
 }
 var S_TypeBText = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  ", ";\n"])), function (_a) {
     var hasBackIcon = _a.hasBackIcon;
@@ -162,7 +162,7 @@ var S_DesktopHeaderBar = styled_components_1.default.div(templateObject_3 || (te
     return theme.ui_cpnt_headerbar_base_area;
 }, function (_a) {
     var theme = _a.theme, hasDivider = _a.hasDivider;
-    return hasDivider && "1px solid " + theme.ui_cpnt_divider;
+    return hasDivider && "1px solid ".concat(theme.ui_cpnt_divider);
 }, function (_a) {
     var hasBackIcon = _a.hasBackIcon, theme = _a.theme;
     return hasBackIcon ? theme.spacing.spacingC : theme.spacing.spacingE;

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

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 import type { PDSTabItemOption, PDSTextType } from '../../../common/types';
-declare type ItemArray = PDSTabItemOption & {
+type ItemArray = PDSTabItemOption & {
     subArray?: PDSTabItemOption[];
 };
-declare type TextObj = {
+type TextObj = {
     title: PDSTextType;
     path: string;
     subArray?: {
@@ -11,7 +11,7 @@ declare type TextObj = {
         path: string;
     }[];
 };
-declare type DesktopTabBarProps = {
+type DesktopTabBarProps = {
     itemArray?: ItemArray[];
     styleTheme?: 'main' | 'content' | 'content_black';
     /** @deprecated v1.5 해당 필드 대신 itemArray를 사용하세요. */

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

@@ -16,7 +16,11 @@ var __assign = (this && this.__assign) || function () {
 };
 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]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -51,19 +55,19 @@ function DesktopTabBar(_a) {
         };
         var textLabel_1 = function (item, isSubText) {
             if (isSubText) {
-                return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: "caption1Bold", colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextTertiary', singleLineMode: "use" }, void 0));
+                return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: "caption1Bold", colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextTertiary', singleLineMode: "use" }));
             }
             if (styleTheme === 'content_black') {
-                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));
+                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" }));
             }
             if (styleTheme === 'content') {
-                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 ((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" }));
             }
             if (styleTheme === 'main') {
-                return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: "leadParaBold", colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextTertiary', singleLineMode: "use", letterSpacing: "-0.04em" }, void 0));
+                return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: "leadParaBold", colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextTertiary', singleLineMode: "use", letterSpacing: "-0.04em" }));
             }
         };
-        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, __assign({ styleTheme: styleTheme, isSubTabBarActivated: isSubTabBarActivated }, { children: itemArray.map(function (item) { return ((0, jsx_runtime_1.jsxs)(S_MainTabItemBox, __assign({ styleTheme: styleTheme }, { 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, styleTheme: styleTheme, 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, { styleTheme: styleTheme }, void 0)] }), void 0));
+        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, __assign({ styleTheme: styleTheme, isSubTabBarActivated: isSubTabBarActivated }, { children: itemArray.map(function (item) { return ((0, jsx_runtime_1.jsxs)(S_MainTabItemBox, __assign({ styleTheme: styleTheme }, { 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) })), 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, styleTheme: styleTheme, onClick: function (e) { return handelClickTabItem_1(subItem, e); } }, { children: textLabel_1(subItem, true) }), subItem.title)); }) }))] }), item.title)); }) })), isSubTabBarActivated && (0, jsx_runtime_1.jsx)(S_SubTabBarSpace, { styleTheme: styleTheme })] })));
     }
     if (textArray) {
         var isSubTabBarActivated = textArray.some(function (item) { return pathname.includes(item.path) && item.subArray; });
@@ -74,21 +78,21 @@ function DesktopTabBar(_a) {
         };
         var textLabel_2 = function (item, isSubText) {
             if (isSubText) {
-                return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: "caption1Bold", colorTheme: pathname.includes(item.path) ? 'usrTextBrandPrimary' : 'sysTextTertiary', singleLineMode: "use" }, void 0));
+                return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: "caption1Bold", colorTheme: pathname.includes(item.path) ? 'usrTextBrandPrimary' : 'sysTextTertiary', singleLineMode: "use" }));
             }
             if (styleTheme === 'content_black') {
-                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));
+                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" }));
             }
             if (styleTheme === 'content') {
-                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 ((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" }));
             }
             if (styleTheme === 'main') {
-                return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: "caption1Bold", colorTheme: pathname.includes(item.path) ? 'usrTextBrandPrimary' : 'sysTextTertiary', singleLineMode: "use" }, void 0));
+                return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: "caption1Bold", colorTheme: pathname.includes(item.path) ? 'usrTextBrandPrimary' : 'sysTextTertiary', singleLineMode: "use" }));
             }
         };
-        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 ((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) })), 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)); }) }))] }, item.path)); }) }), isSubTabBarActivated && (0, jsx_runtime_1.jsx)(S_SubTabBarSpace, {})] })));
     }
-    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
 }
 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  ", ";\n  ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  height: ", ";\n  padding-left: ", ";\n  ", ";\n  ", ";\n"], ["\n  background-color: ", ";\n  ", ";\n  ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  height: ", ";\n  padding-left: ", ";\n  ", ";\n  ", ";\n"])), function (_a) {
@@ -99,7 +103,7 @@ var S_MainTabBarSpace = styled_components_1.default.div(templateObject_2 || (tem
     return !isSubTabBarActivated && styleTheme === 'main' && "border-bottom: 1px solid #EFF0F3;";
 }, function (_a) {
     var styleTheme = _a.styleTheme, theme = _a.theme;
-    return styleTheme !== 'main' && "border-bottom: 1px solid " + theme.ui_cpnt_divider + ";";
+    return styleTheme !== 'main' && "border-bottom: 1px solid ".concat(theme.ui_cpnt_divider, ";");
 }, function (_a) {
     var styleTheme = _a.styleTheme;
     return (styleTheme === 'main' ? '52px' : '40px');
@@ -130,13 +134,13 @@ var tabIndicator = (0, styled_components_1.css)(templateObject_3 || (templateObj
 // NOTE: Tab item 활성화 시 text에 bold가 적용되는데, 이때 font-family에 따라 text 영역의 너비가 변경되어 시각적 변동을 일으키는 문제를 해결하기 위한 처리입니다.
 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 + "'";
+    return "'".concat(text, "'");
 }, function (_a) {
     var theme = _a.theme;
     return theme.fontWeight.normal;
 }, function (_a) {
     var text = _a.text;
-    return "'" + text + "'";
+    return "'".concat(text, "'");
 }, function (_a) {
     var theme = _a.theme;
     return theme.fontWeight.bold;
@@ -168,10 +172,10 @@ var S_SubTabItemWrapper = styled_components_1.default.div(templateObject_9 || (t
     return styleTheme === 'main' ? theme.spacing.spacingD : theme.spacing.spacingE;
 }, function (_a) {
     var theme = _a.theme, styleTheme = _a.styleTheme;
-    return styleTheme !== 'main' && "padding: 0 " + theme.spacing.spacingA + ";";
+    return styleTheme !== 'main' && "padding: 0 ".concat(theme.spacing.spacingA, ";");
 }, function (_a) {
     var theme = _a.theme, styleTheme = _a.styleTheme;
-    return styleTheme === 'main' && "padding-top: " + theme.spacing.spacingA + ";";
+    return styleTheme === 'main' && "padding-top: ".concat(theme.spacing.spacingA, ";");
 }, textOffset);
 exports.default = DesktopTabBar;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { PDSTextType } from '../../../common';
 import type { DropdownValueOption } from '../../../common/types';
-declare type Props = {
+type Props = {
     colorTheme?: 'none' | 'dark' | 'white';
     hintText?: PDSTextType;
     maxHeightItemNumber?: number;

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

@@ -16,7 +16,11 @@ var __assign = (this && this.__assign) || function () {
 };
 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]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -190,7 +194,7 @@ function Dropdown(_a) {
         var LARGE_HEIGHT = 48;
         return LARGE_HEIGHT * maxHeightItemNumber;
     }, [size, maxHeightItemNumber]);
-    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, displayType: displayType }, { children: [(0, jsx_runtime_1.jsxs)(S_Select, __assign({ size: size, onClick: handleClick, isFocused: isFocused, state: state, colorTheme: colorTheme, responsiveMode: responsiveMode, customWidth: customWidth, displayType: displayType }, { children: [(0, jsx_runtime_1.jsxs)(S_TextLabel, __assign({ size: size, responsiveMode: responsiveMode, displayType: displayType }, { children: [(displayType === 'icon_only' || displayType === 'icon_text') && (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.iconName) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: size === 'small' ? 20 : 24, iconName: selectedValue.iconName, fillType: selectedValue.iconFillType, colorKey: getIconColorKey() }, void 0), displayType === 'icon_text' && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0)] }, void 0)), (displayType === 'text_only' || displayType === 'icon_text') && ((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: fontWeight === 'bold' ? 'form2Bold' : '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: getArrowIconColorKey() }, void 0)] }), void 0), isFocused && ((0, jsx_runtime_1.jsx)(S_ContextMenuWrapper, __assign({ displayType: displayType }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, __assign({ autoWidthMode: "use", maxHeight: maxHeight, customWidth: getCustomWidth() }, { 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, displayType: displayType }, void 0) }, el.value)); }) }), void 0) }), void 0))] }), void 0));
+    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, displayType: displayType }, { children: [(0, jsx_runtime_1.jsxs)(S_Select, __assign({ size: size, onClick: handleClick, isFocused: isFocused, state: state, colorTheme: colorTheme, responsiveMode: responsiveMode, customWidth: customWidth, displayType: displayType }, { children: [(0, jsx_runtime_1.jsxs)(S_TextLabel, __assign({ size: size, responsiveMode: responsiveMode, displayType: displayType }, { children: [(displayType === 'icon_only' || displayType === 'icon_text') && (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.iconName) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: size === 'small' ? 20 : 24, iconName: selectedValue.iconName, fillType: selectedValue.iconFillType, colorKey: getIconColorKey() }), displayType === 'icon_text' && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })] })), (displayType === 'text_only' || displayType === 'icon_text') && ((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: fontWeight === 'bold' ? 'form2Bold' : 'form2Regular', singleLineMode: "use", colorTheme: getTextColorTheme(), colorOverride: getTextColorOverride(), ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }))] })), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, fillType: "line", iconName: isFocused ? 'ic_arrow_up' : 'ic_arrow_down', colorKey: getArrowIconColorKey() })] })), isFocused && ((0, jsx_runtime_1.jsx)(S_ContextMenuWrapper, __assign({ displayType: displayType }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, __assign({ autoWidthMode: "use", maxHeight: maxHeight, customWidth: getCustomWidth() }, { 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, displayType: displayType }) }, el.value)); }) })) })))] })));
 }
 var S_TextLabel = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  padding-right: ", ";\n\n  ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  padding-right: ", ";\n\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
@@ -244,7 +248,7 @@ var S_Dropdown = styled_components_1.default.div(templateObject_5 || (templateOb
         }[size];
 }, function (_a) {
     var customWidth = _a.customWidth;
-    return customWidth && "width: " + customWidth + ";";
+    return customWidth && "width: ".concat(customWidth, ";");
 });
 var colorThemeBackgroundReadOnly = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
     var colorTheme = _a.colorTheme, theme = _a.theme;
@@ -383,7 +387,7 @@ var S_Select = styled_components_1.default.div(templateObject_15 || (templateObj
         }[size];
 }, function (_a) {
     var customWidth = _a.customWidth;
-    return customWidth && "width: " + customWidth + ";";
+    return customWidth && "width: ".concat(customWidth, ";");
 }, transitionStyle_1.InputTransition, function (_a) {
     var state = _a.state;
     return state === 'normal' && normalActionColor;

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

@@ -3,18 +3,18 @@ import { BrandLogo, UserProfile } from './blocks';
 import { ActiveModeTypes } from './reducer';
 import { TemplateNamesType } from './templates';
 import type { ParsedNode } from './types';
-declare type BrandLogo = {
+type BrandLogo = {
     src: string;
     text: string;
     href: string;
 };
-declare type UserProfile = {
+type UserProfile = {
     src: string;
     href: string;
     leftIconButton?: React.ReactNode;
     overrideUserProfile?: React.ReactNode;
 };
-export declare type Props = {
+export type Props = {
     isPreview?: boolean;
     brandLogo: BrandLogo;
     userProfile: UserProfile;
@@ -24,7 +24,7 @@ export declare type Props = {
     basePath: string;
     colorTheme?: 'none' | 'transparent';
 };
-declare type ContextProp = {
+type ContextProp = {
     basePath: string;
     activeMode: ActiveModeTypes;
     handleClickInternalMenuItemNav: (url: string) => void;

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

@@ -16,7 +16,11 @@ var __assign = (this && this.__assign) || function () {
 };
 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]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -76,7 +80,7 @@ function DynamicDesktopNavBar(_a) {
     function handleClickInternalMenuItemNav(url) {
         dispatch({ type: 'INTERNAL_CLICKED', payload: { clickedURL: url } });
     }
-    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));
+    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 }), (0, jsx_runtime_1.jsx)(blocks_1.PrimaryMenu, { menus: slicedPrimaryMenus, showMenuAsIcon: primaryMenuOptions.showMenuAsIcon, style: primaryMenuOptions.style }), showSecondaryMenu && ((0, jsx_runtime_1.jsx)(blocks_1.SecondaryMenu, { menus: slicedSecondaryMenus, showMenuAsIcon: secondaryMenuOptions.showMenuAsIcon, style: secondaryMenuOptions.style })), (0, jsx_runtime_1.jsx)(blocks_1.UserProfile, { src: userProfile.src, to: userProfile.href, leftIconButton: userProfile.leftIconButton, overrideUserProfile: userProfile.overrideUserProfile, style: userProfileOptions.style })] })) })) }))) : ((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 }), (0, jsx_runtime_1.jsx)(blocks_1.PrimaryMenu, { menus: slicedPrimaryMenus, showMenuAsIcon: primaryMenuOptions.showMenuAsIcon, style: primaryMenuOptions.style }), showSecondaryMenu && ((0, jsx_runtime_1.jsx)(blocks_1.SecondaryMenu, { menus: slicedSecondaryMenus, showMenuAsIcon: secondaryMenuOptions.showMenuAsIcon, style: secondaryMenuOptions.style })), (0, jsx_runtime_1.jsx)(blocks_1.UserProfile, { src: userProfile.src, to: userProfile.href, leftIconButton: userProfile.leftIconButton, overrideUserProfile: userProfile.overrideUserProfile, style: userProfileOptions.style })] })) }))) })));
 }
 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;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { CSSProperties } from 'styled-components';
-declare type Props = {
+type Props = {
     to: string;
     logoSrc: string;
     fallbackText: string;

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

@@ -23,7 +23,7 @@ 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 ((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));
+    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 }) })));
 }
 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,7 +1,7 @@
 /// <reference types="react" />
 import { CSSProperties } from 'styled-components';
 import type { ParsedNode } from '../types';
-declare type Props = {
+type Props = {
     menus: ParsedNode[];
     showMenuAsIcon: boolean;
     style?: CSSProperties;

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

@@ -69,17 +69,17 @@ function PrimaryMenu(_a) {
                 behavior: 'smooth'
             });
     };
-    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));
+    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 }) }) })), (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)); }) })), 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 }) }) }))] })));
 }
 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%)";
+    return "linear-gradient(to left, ".concat(theme.ui_menu_background, " 10%, ").concat(theme.ui_cpnt_pg_gradient_02, " 90%)");
 });
 var S_LeftButtonWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  left: 0;\n  position: absolute;\n\n  &::after {\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  left: 0;\n  position: absolute;\n\n  &::after {\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 right, " + theme.ui_menu_background + " 20%, " + theme.ui_cpnt_pg_gradient_02 + " 80%)";
+    return "linear-gradient(to right, ".concat(theme.ui_menu_background, " 20%, ").concat(theme.ui_cpnt_pg_gradient_02, " 80%)");
 });
 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;

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

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

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

@@ -23,7 +23,7 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var MenuItemNav_1 = require("../components/MenuItemNav");
 function SecondaryMenu(_a) {
     var menus = _a.menus, showMenuAsIcon = _a.showMenuAsIcon, style = _a.style;
-    return ((0, jsx_runtime_1.jsx)(S_Main_SecondaryMenu, __assign({ style: style }, { children: menus.map(function (menu, index) { return ((0, jsx_runtime_1.jsx)(MenuItemNav_1.MenuItemNav, { menu: menu, showMenuAsIcon: showMenuAsIcon }, index)); }) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(S_Main_SecondaryMenu, __assign({ style: style }, { children: menus.map(function (menu, index) { return ((0, jsx_runtime_1.jsx)(MenuItemNav_1.MenuItemNav, { menu: menu, showMenuAsIcon: showMenuAsIcon }, index)); }) })));
 }
 var S_Main_SecondaryMenu = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  grid-area: SECONDARY_MENU;\n"], ["\n  display: flex;\n  grid-area: SECONDARY_MENU;\n"])));
 exports.default = SecondaryMenu;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { CSSProperties } from 'styled-components';
-declare type Props = {
+type Props = {
     src: string;
     to: string;
     leftIconButton?: React.ReactNode;

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

@@ -24,7 +24,7 @@ var Navigations_1 = require("../../../../common/components/Navigations");
 var hybrid_1 = require("../../../../hybrid");
 function UserProfile(_a) {
     var src = _a.src, to = _a.to, overrideUserProfile = _a.overrideUserProfile, leftIconButton = _a.leftIconButton, style = _a.style;
-    return ((0, jsx_runtime_1.jsx)(S_UserProfile, __assign({ style: style }, { children: overrideUserProfile ? (overrideUserProfile) : ((0, jsx_runtime_1.jsxs)(S_ImageViewWrapper, { children: [leftIconButton && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [leftIconButton, (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0)] }, void 0)), (0, jsx_runtime_1.jsx)(Navigations_1.NavLink, __assign({ to: to }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { width: 32, ratio: "1_1", scaleType: "cover", shapeType: "circular", src: src, borderMode: "use" }, void 0) }), void 0)] }, void 0)) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(S_UserProfile, __assign({ style: style }, { children: overrideUserProfile ? (overrideUserProfile) : ((0, jsx_runtime_1.jsxs)(S_ImageViewWrapper, { children: [leftIconButton && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [leftIconButton, (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(Navigations_1.NavLink, __assign({ to: to }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { width: 32, ratio: "1_1", scaleType: "cover", shapeType: "circular", src: src, borderMode: "use" }) }))] })) })));
 }
 var S_UserProfile = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  grid-area: USER_PROFILE;\n  justify-content: flex-end;\n"], ["\n  display: flex;\n  grid-area: USER_PROFILE;\n  justify-content: flex-end;\n"])));
 var S_ImageViewWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n"], ["\n  align-items: center;\n  display: flex;\n"])));

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

@@ -1,11 +1,11 @@
 /// <reference types="react" />
 import type { ParsedNode } from '../../types';
-export declare type ContextMenuItemProps = {
+export type ContextMenuItemProps = {
     size?: 'large' | 'medium' | 'small';
     isSelected?: boolean;
     children: React.ReactNode;
 };
-declare type Props = {
+type Props = {
     menu: ParsedNode;
 };
 declare function ContextMenuItemNavBox({ menu }: Props): JSX.Element;

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

@@ -27,7 +27,7 @@ var PAppMenuItemNav_1 = __importDefault(require("../MenuItemNav/components/PAppM
 var WebMenuItemNav_1 = __importDefault(require("../MenuItemNav/components/WebMenuItemNav"));
 function ContextMenuItemNavBox(_a) {
     var menu = _a.menu;
-    return ((0, jsx_runtime_1.jsxs)(S_ContextMenuItem, { children: [menu.menuItemType === 'NAV_P_APP' && menu.pAppCode && ((0, jsx_runtime_1.jsx)(PAppMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { pAppCode: menu.pAppCode }), isContextMenu: true }, void 0)), menu.menuItemType === 'WEB_LINK' && menu.conversionLinkSrc && ((0, jsx_runtime_1.jsx)(WebMenuItemNav_1.default, { openNewTab: true, isContextMenu: true, menu: __assign(__assign({}, menu), { conversionLinkSrc: menu.conversionLinkSrc }) }, void 0)), menu.menuItemType === 'INTERNAL_LINK' && menu.conversionLinkSrc && ((0, jsx_runtime_1.jsx)(InternalLinkMenuItemNav_1.default, { isContextMenu: true, menu: __assign(__assign({}, menu), { conversionLinkSrc: menu.conversionLinkSrc }) }, void 0)), menu.menuItemType === 'DISPLAY_ONLY' && ((0, jsx_runtime_1.jsx)(DisplayOnlyMenuItemNav_1.default, { isContextMenu: true, menu: __assign(__assign({}, menu), { conversionLinkSrc: '' }) }, void 0)), menu.menuItemType === 'NAV_PAGE' && menu.slug && ((0, jsx_runtime_1.jsx)(PageMenuItemNav_1.default, { isContextMenu: true, menu: __assign(__assign({}, menu), { slug: menu.slug }) }, void 0))] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(S_ContextMenuItem, { children: [menu.menuItemType === 'NAV_P_APP' && menu.pAppCode && ((0, jsx_runtime_1.jsx)(PAppMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { pAppCode: menu.pAppCode }), isContextMenu: true })), menu.menuItemType === 'WEB_LINK' && menu.conversionLinkSrc && ((0, jsx_runtime_1.jsx)(WebMenuItemNav_1.default, { openNewTab: true, isContextMenu: true, menu: __assign(__assign({}, menu), { conversionLinkSrc: menu.conversionLinkSrc }) })), menu.menuItemType === 'INTERNAL_LINK' && menu.conversionLinkSrc && ((0, jsx_runtime_1.jsx)(InternalLinkMenuItemNav_1.default, { isContextMenu: true, menu: __assign(__assign({}, menu), { conversionLinkSrc: menu.conversionLinkSrc }) })), menu.menuItemType === 'DISPLAY_ONLY' && ((0, jsx_runtime_1.jsx)(DisplayOnlyMenuItemNav_1.default, { isContextMenu: true, menu: __assign(__assign({}, menu), { conversionLinkSrc: '' }) })), menu.menuItemType === 'NAV_PAGE' && menu.slug && ((0, jsx_runtime_1.jsx)(PageMenuItemNav_1.default, { isContextMenu: true, menu: __assign(__assign({}, menu), { slug: menu.slug }) }))] }));
 }
 var S_ContextMenuItem = styled_components_1.default.li(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  cursor: pointer;\n  display: flex;\n  height: 32px;\n\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  cursor: pointer;\n  display: flex;\n  height: 32px;\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-declare type ContextTypes = {
+type ContextTypes = {
     parentRef: any;
     children: React.ReactNode;
 };

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

@@ -48,7 +48,7 @@ function ContextMenuNavs(_a) {
             return;
         }
     }, [parentRef, contextRef]);
-    return ((0, jsx_runtime_1.jsx)(S_AbsoluteWrapper, __assign({ ref: contextCallbackRef, style: { top: position.top, left: position.left } }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { children: children }, void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(S_AbsoluteWrapper, __assign({ ref: contextCallbackRef, style: { top: position.top, left: position.left } }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { children: 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"])));
 exports.default = ContextMenuNavs;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { PDSIconType } from '../../../../common';
-declare type Props = {
+type Props = {
     to: string;
     iconName: PDSIconType;
     openNewTab: boolean;

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

@@ -16,6 +16,6 @@ var __1 = require("../../..");
 var Navigations_1 = require("../../../../common/components/Navigations");
 function IconNav(_a) {
     var to = _a.to, iconName = _a.iconName, openNewTab = _a.openNewTab, onClick = _a.onClick;
-    return ((0, jsx_runtime_1.jsx)(Navigations_1.NavLink, __assign({ onClick: onClick, to: to, openNewTab: openNewTab }, { children: (0, jsx_runtime_1.jsx)(__1.D_IconButton, { fillType: "fill", baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconName: iconName, iconFillType: "line", iconColorKey: "ui_menu_primarymenu_main", shapeType: "rectangle", iconSize: 24 }, void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(Navigations_1.NavLink, __assign({ onClick: onClick, to: to, openNewTab: openNewTab }, { children: (0, jsx_runtime_1.jsx)(__1.D_IconButton, { fillType: "fill", baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconName: iconName, iconFillType: "line", iconColorKey: "ui_menu_primarymenu_main", shapeType: "rectangle", iconSize: 24 }) })));
 }
 exports.default = IconNav;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-declare type Props = {
+type Props = {
     to: string;
     openNewTab: boolean;
     iconSrc: string;

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

@@ -24,7 +24,7 @@ var Navigations_1 = require("../../../../common/components/Navigations");
 var hybrid_1 = require("../../../../hybrid");
 function ImageIconNav(_a) {
     var to = _a.to, openNewTab = _a.openNewTab, iconSrc = _a.iconSrc, onClick = _a.onClick;
-    return ((0, jsx_runtime_1.jsx)(Navigations_1.NavLink, __assign({ openNewTab: openNewTab, to: to, onClick: onClick }, { children: (0, jsx_runtime_1.jsx)(S_IconWrapper, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { width: 24, ratio: "1_1", scaleType: "contain", src: iconSrc, shapeType: "rectangle" }, void 0) }, void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(Navigations_1.NavLink, __assign({ openNewTab: openNewTab, to: to, onClick: onClick }, { children: (0, jsx_runtime_1.jsx)(S_IconWrapper, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { width: 24, ratio: "1_1", scaleType: "contain", src: iconSrc, shapeType: "rectangle" }) }) })));
 }
 var S_IconWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 48px;\n  justify-content: center;\n  width: 48px;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 48px;\n  justify-content: center;\n  width: 48px;\n"])));
 exports.default = ImageIconNav;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-declare type Props = {
+type Props = {
     to: string;
     logoSrc: string;
     fallbackText: string;

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

@@ -24,7 +24,7 @@ var __1 = require("../../..");
 var NavLink_1 = __importDefault(require("../../../../common/components/Navigations/NavLink"));
 function LogoNav(_a) {
     var to = _a.to, logoSrc = _a.logoSrc, fallbackText = _a.fallbackText;
-    return ((0, jsx_runtime_1.jsx)(NavLink_1.default, __assign({ to: to }, { children: (0, jsx_runtime_1.jsx)(S_Box, { children: logoSrc ? ((0, jsx_runtime_1.jsx)(S_Logo, { src: logoSrc }, void 0)) : ((0, jsx_runtime_1.jsx)(__1.D_TextLabel, { text: fallbackText, styleTheme: "headingBold", ellipsisMode: "use", lineLimit: 1 }, void 0)) }, void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(NavLink_1.default, __assign({ to: to }, { children: (0, jsx_runtime_1.jsx)(S_Box, { children: logoSrc ? ((0, jsx_runtime_1.jsx)(S_Logo, { src: logoSrc })) : ((0, jsx_runtime_1.jsx)(__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  align-items: center;\n  display: flex;\n  height: 48px;\n  width: 180px;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 48px;\n  width: 180px;\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"])));

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

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

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

@@ -39,7 +39,7 @@ function MenuItemNav(_a) {
     var handleMouseOut = (0, react_1.useCallback)(function () {
         setIsContextOpen(false);
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(S_Box, __assign({ ref: ref, onMouseOver: handleMouseOver, onMouseLeave: handleMouseOut, onWheel: handleMouseOut, showMenuAsIcon: showMenuAsIcon, type: menu.menuItemType }, { children: [menu.menuItemType === 'NAV_P_APP' && menu.pAppCode && ((0, jsx_runtime_1.jsx)(PAppMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { pAppCode: menu.pAppCode }), showMenuAsIcon: showMenuAsIcon }, void 0)), menu.menuItemType === 'WEB_LINK' && menu.conversionLinkSrc && ((0, jsx_runtime_1.jsx)(WebMenuItemNav_1.default, { openNewTab: true, menu: __assign(__assign({}, menu), { conversionLinkSrc: menu.conversionLinkSrc }), showMenuAsIcon: showMenuAsIcon }, void 0)), menu.menuItemType === 'INTERNAL_LINK' && menu.conversionLinkSrc && ((0, jsx_runtime_1.jsx)(InternalLinkMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { conversionLinkSrc: menu.conversionLinkSrc }), showMenuAsIcon: showMenuAsIcon }, void 0)), menu.menuItemType === 'NAV_PAGE' && menu.slug && ((0, jsx_runtime_1.jsx)(PageMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { slug: menu.slug }), showMenuAsIcon: showMenuAsIcon }, void 0)), menu.menuItemType === 'DISPLAY_ONLY' && ((0, jsx_runtime_1.jsx)(DisplayOnlyMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { conversionLinkSrc: '' }), showMenuAsIcon: showMenuAsIcon }, void 0)), isContextOpen && menu.parsedNodes.length > 0 && ((0, jsx_runtime_1.jsx)(ContextMenuNavs_1.ContextMenuNavs, __assign({ parentRef: ref }, { children: menu.parsedNodes.map(function (nav, index) { return ((0, jsx_runtime_1.jsx)(ContextMenuNavs_1.ContextMenuItemNav, { menu: nav }, index)); }) }), void 0))] }), void 0), showMenuAsIcon ? ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { spacingType: "width", size: "spacing_b" }, void 0)) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { spacingType: "width", size: "spacing_f" }, void 0))] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(S_Box, __assign({ ref: ref, onMouseOver: handleMouseOver, onMouseLeave: handleMouseOut, onWheel: handleMouseOut, showMenuAsIcon: showMenuAsIcon, type: menu.menuItemType }, { children: [menu.menuItemType === 'NAV_P_APP' && menu.pAppCode && ((0, jsx_runtime_1.jsx)(PAppMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { pAppCode: menu.pAppCode }), showMenuAsIcon: showMenuAsIcon })), menu.menuItemType === 'WEB_LINK' && menu.conversionLinkSrc && ((0, jsx_runtime_1.jsx)(WebMenuItemNav_1.default, { openNewTab: true, menu: __assign(__assign({}, menu), { conversionLinkSrc: menu.conversionLinkSrc }), showMenuAsIcon: showMenuAsIcon })), menu.menuItemType === 'INTERNAL_LINK' && menu.conversionLinkSrc && ((0, jsx_runtime_1.jsx)(InternalLinkMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { conversionLinkSrc: menu.conversionLinkSrc }), showMenuAsIcon: showMenuAsIcon })), menu.menuItemType === 'NAV_PAGE' && menu.slug && ((0, jsx_runtime_1.jsx)(PageMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { slug: menu.slug }), showMenuAsIcon: showMenuAsIcon })), menu.menuItemType === 'DISPLAY_ONLY' && ((0, jsx_runtime_1.jsx)(DisplayOnlyMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { conversionLinkSrc: '' }), showMenuAsIcon: showMenuAsIcon })), isContextOpen && menu.parsedNodes.length > 0 && ((0, jsx_runtime_1.jsx)(ContextMenuNavs_1.ContextMenuNavs, __assign({ parentRef: ref }, { children: menu.parsedNodes.map(function (nav, index) { return ((0, jsx_runtime_1.jsx)(ContextMenuNavs_1.ContextMenuItemNav, { menu: nav }, index)); }) })))] })), showMenuAsIcon ? ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { spacingType: "width", size: "spacing_b" })) : ((0, jsx_runtime_1.jsx)(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: ", ";\n  display: flex;\n"], ["\n  align-items: center;\n  cursor: ", ";\n  display: flex;\n"])), function (_a) {
     var type = _a.type;

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

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 import type { ParsedNode } from '../../../types';
-declare type WithRequired<T, K extends keyof T> = T & {
+type WithRequired<T, K extends keyof T> = T & {
     [P in K]-?: T[P];
 };
-declare type Props = {
+type Props = {
     menu: WithRequired<ParsedNode, 'conversionLinkSrc'>;
     showMenuAsIcon?: boolean;
     isContextMenu?: boolean;