pds-dev-kit-web-test 0.3.6 → 0.3.8

package/dist/src/common/styles/colorSet/index.js

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 /* eslint-disable import/order */
 var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
 var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
-var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
 var UIColor_json_1 = __importDefault(require("./UIColor.json"));
+var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
 var colorSet = {
     SemanticColor: SemanticColor_json_1.default,
     PaletteColor_Dark: PaletteColor_Dark_json_1.default,
-    PaletteColor_light: PaletteColor_light_json_1.default,
-    UIColor: UIColor_json_1.default
+    UIColor: UIColor_json_1.default,
+    PaletteColor_light: PaletteColor_light_json_1.default
 };
 exports.default = colorSet;

package/dist/src/common/styles/colorSet/ui-type.d.ts

@@ -840,4 +840,5 @@ export interface UITheme {
     ui_108: string;
     ui_110: string;
     ui_contentscontainer03_background: string;
+    ui_contents_dimmed: string;
 }

package/dist/src/common/types/components.d.ts

@@ -21,6 +21,11 @@ export type ContextMenuItemValueOption = {
 export type DropdownValueOption = ContextMenuItemValueOption & {
     state?: 'normal' | 'disabled';
 };
+export type DropdownGroupInfo = {
+    key: string;
+    values: DropdownValueOption['value'][];
+    title?: PDSTextType;
+};
 export type AdminListDropdownValueOption = {
     text: DropdownValueOption['text'];
     value: DropdownValueOption['value'];

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

@@ -79,26 +79,26 @@ function ChatBubbleListItem(_a) {
         styleTheme === 'other_avatar' ||
         styleTheme === 'other_avatar_sub';
     var titleTextColorTheme = 'sysTextPrimary';
-    var countTextColorTheme = 'sysTextBrandPrimary';
+    var countTextColorTheme = 'sysTextPrimary';
     switch (colorTheme) {
         case 'grey': {
             titleTextColorTheme = 'sysTextPrimary';
-            countTextColorTheme = 'sysTextBrandPrimary';
+            countTextColorTheme = 'sysTextPrimary';
             break;
         }
         case 'brand_primary': {
             titleTextColorTheme = 'usrTextBrandPrimary';
-            countTextColorTheme = 'sysTextBrandPrimary';
+            countTextColorTheme = 'sysTextPrimary';
             break;
         }
         case 'translucent_white': {
             titleTextColorTheme = 'sysTextBlack';
-            countTextColorTheme = 'sysTextTertiary';
+            countTextColorTheme = 'sysTextPrimary';
             break;
         }
         case 'translucent_black': {
             titleTextColorTheme = 'sysTextWhite';
-            countTextColorTheme = 'sysTextTertiary';
+            countTextColorTheme = 'sysTextPrimary';
         }
     }
     /**

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

@@ -1,7 +1,10 @@
 /// <reference types="react" />
-import type { PDSTabItemOption, PDSTextType } from '../../../common/types';
+import type { FillIconNameKeys, LineIconNameKeys, PDSTabItemOption, PDSTextType } from '../../../common/types';
 type ItemArray = PDSTabItemOption & {
     subArray?: PDSTabItemOption[];
+    iconMode?: 'none' | 'use';
+    iconName?: FillIconNameKeys | LineIconNameKeys;
+    iconFillType?: 'line' | 'fill';
 };
 type TextObj = {
     title: PDSTextType;

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

@@ -37,9 +37,14 @@ 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 jsx_runtime_1 = require("react/jsx-runtime");
 var react_router_dom_1 = require("react-router-dom");
+var Icon_1 = __importDefault(require("../../../hybrid/components/Icon/Icon"));
+var Spacing_1 = __importDefault(require("../../../hybrid/components/Spacing/Spacing"));
 var styled_components_1 = __importStar(require("styled-components"));
 var TextLabel_1 = require("../TextLabel");
 function DesktopTabBar(_a) {
@@ -67,7 +72,11 @@ function DesktopTabBar(_a) {
                 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) })), 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 })] })));
+        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.jsxs)(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.iconMode === 'use' && item.iconName && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Spacing_1.default, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(Icon_1.default, { size: styleTheme === 'main' ? 20 : 16, iconName: item.iconName || 'ic_unavailable', fillType: item.iconFillType || 'line', colorKey: item.isActive
+                                                    ? styleTheme === 'content'
+                                                        ? 'ui_cpnt_textlabel_usr_brandprimary'
+                                                        : 'ui_cpnt_textlabel_sys_primary'
+                                                    : 'ui_cpnt_textlabel_sys_tertiary' })] }))] })), 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; });
@@ -149,13 +158,16 @@ var S_MainTabItemBox = styled_components_1.default.div(templateObject_5 || (temp
     var theme = _a.theme, styleTheme = _a.styleTheme;
     return styleTheme === 'main' ? '20px' : theme.spacing.spacingD;
 });
-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  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"])), 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  ", "\n  ", "\n  & > [x-pds-name=\"TextLabel\"] {\n    padding-bottom: ", ";\n  }\n  & > svg {\n    padding-bottom: ", ";\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  ", "\n  ", "\n  & > [x-pds-name=\"TextLabel\"] {\n    padding-bottom: ", ";\n  }\n  & > svg {\n    padding-bottom: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme, styleTheme = _a.styleTheme;
     return (styleTheme === 'main' ? 0 : theme.spacing.spacingA);
-}, function (_a) {
+}, tabIndicator, textOffset, function (_a) {
     var theme = _a.theme, styleTheme = _a.styleTheme;
     return styleTheme === 'main' ? theme.spacing.spacingA : theme.spacing.spacingB;
-}, tabIndicator, textOffset);
+}, function (_a) {
+    var theme = _a.theme, styleTheme = _a.styleTheme;
+    return styleTheme === 'main' ? theme.spacing.spacingA : '7px';
+});
 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  ", ";\n  height: ", ";\n"], ["\n  background-color: ", ";\n  ", ";\n  height: ", ";\n"])), function (_a) {
     var theme = _a.theme, styleTheme = _a.styleTheme;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { PDSTextType } from '../../../common';
-import type { DropdownValueOption } from '../../../common/types';
+import type { DropdownGroupInfo, DropdownValueOption } from '../../../common/types';
 type Props = {
     colorTheme?: 'none' | 'dark' | 'white';
     hintText?: PDSTextType;
@@ -14,7 +14,8 @@ type Props = {
     customWidth?: string;
     displayType?: 'text_only' | 'icon_only' | 'icon_text';
     fontWeight?: 'bold' | 'regular';
+    groupInfoArray?: DropdownGroupInfo[];
     onChange?: (option: DropdownValueOption) => void;
 };
-declare function Dropdown({ colorTheme, value, defaultValue, hintText, maxHeightItemNumber, responsiveMode, size, state, valueArray, customWidth, displayType, fontWeight, onChange }: Props): JSX.Element;
+declare function Dropdown({ colorTheme, value, defaultValue, hintText, maxHeightItemNumber, responsiveMode, size, state, valueArray, customWidth, displayType, fontWeight, groupInfoArray, onChange }: Props): JSX.Element;
 export default Dropdown;

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

@@ -57,7 +57,7 @@ function Dropdown(_a) {
     // selectionMode = 'single',
     _e = _a.size, 
     // selectionMode = 'single',
-    size = _e === void 0 ? 'large' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, valueArray = _a.valueArray, customWidth = _a.customWidth, _g = _a.displayType, displayType = _g === void 0 ? 'text_only' : _g, _h = _a.fontWeight, fontWeight = _h === void 0 ? 'regular' : _h, onChange = _a.onChange;
+    size = _e === void 0 ? 'large' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, valueArray = _a.valueArray, customWidth = _a.customWidth, _g = _a.displayType, displayType = _g === void 0 ? 'text_only' : _g, _h = _a.fontWeight, fontWeight = _h === void 0 ? 'regular' : _h, groupInfoArray = _a.groupInfoArray, onChange = _a.onChange;
     var _j = (0, react_1.useState)(false), isFocused = _j[0], setIsFocused = _j[1];
     var _k = (0, react_1.useState)(null), selectedValue = _k[0], setSelectedValue = _k[1];
     var _l = (0, react_1.useState)(null), contextMenuSizeOffset = _l[0], setContextMenuSizeOffset = _l[1];
@@ -132,6 +132,9 @@ function Dropdown(_a) {
     };
     var handleClickOption = function (option) {
         setIsFocused(false);
+        if (option.state === 'disabled') {
+            return;
+        }
         if (value === undefined) {
             setSelectedValue(option);
         }
@@ -235,10 +238,112 @@ function Dropdown(_a) {
         var LARGE_HEIGHT = 48;
         return LARGE_HEIGHT * maxHeightItemNumber;
     }, [size, maxHeightItemNumber]);
+    var resultByGroup = {};
+    if (groupInfoArray) {
+        groupInfoArray.forEach(function (groupInfo) {
+            var _a;
+            var currentGroupResult = [];
+            (_a = groupInfo.values) === null || _a === void 0 ? void 0 : _a.forEach(function (value) {
+                var matchingObject = valueArray.find(function (item) { return item.value === value; });
+                if (matchingObject) {
+                    currentGroupResult.push(matchingObject);
+                }
+            });
+            resultByGroup[groupInfo.key] = currentGroupResult;
+        });
+    }
     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", ref: dropdownRef, 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, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(S_ContextMenuWrapper, __assign({ ref: contextMenuRef, contextMenuPositionCss: contextMenuPositionCss }, { 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)("div", __assign({ onMouseDown: function () { return handleClickOption(el); } }, { 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, state: el.state, displayType: displayType }) }), el.value)); }) })) })), document.body)] })));
+                (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(S_ContextMenuWrapper, __assign({ ref: contextMenuRef, contextMenuPositionCss: contextMenuPositionCss }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, __assign({ autoWidthMode: "use", maxHeight: maxHeight, customWidth: getCustomWidth() }, { children: groupInfoArray
+                            ? Object.keys(resultByGroup).map(function (key) {
+                                var _a, _b, _c;
+                                return ((0, jsx_runtime_1.jsxs)(S_Group, __assign({ size: size, hasGroupTitle: Boolean((_a = groupInfoArray.find(function (groupInfo) { return groupInfo.key === key; })) === null || _a === void 0 ? void 0 : _a.title) }, { children: [((_b = groupInfoArray.find(function (groupInfo) { return groupInfo.key === key; })) === null || _b === void 0 ? void 0 : _b.title) && ((0, jsx_runtime_1.jsx)(S_Wrapper, __assign({ size: size }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: (_c = groupInfoArray.find(function (groupInfo) { return groupInfo.key === key; })) === null || _c === void 0 ? void 0 : _c.title, colorTheme: "sysTextSecondary", styleTheme: "caption1Bold", letterSpacing: "0.15em" }) }))), resultByGroup[key].map(function (el) { return ((0, jsx_runtime_1.jsx)("div", __assign({ onMouseDown: function () { return handleClickOption(el); } }, { 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, state: el.state, displayType: displayType }) }), el.value)); })] }), key));
+                            })
+                            : valueArray.map(function (el) { return ((0, jsx_runtime_1.jsx)("div", __assign({ onMouseDown: function () { return handleClickOption(el); } }, { 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, state: el.state, displayType: displayType }) }), el.value)); }) })) })), document.body)] })));
 }
-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 largeGroupTitle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+});
+var mediumGroupTitle = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingD;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingD;
+});
+var smallGroupTitle = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingD;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingD;
+});
+var largeGroupDivider = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  left: ", ";\n  right: ", ";\n"], ["\n  left: ", ";\n  right: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+});
+var mediumGroupDivider = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  left: ", ";\n  right: ", ";\n"], ["\n  left: ", ";\n  right: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingD;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingD;
+});
+var smallGroupDivider = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  left: ", ";\n  right: ", ";\n"], ["\n  left: ", ";\n  right: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingD;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingD;
+});
+var S_Group = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: relative;\n\n  &:not(:last-child) {\n    padding-bottom: ", ";\n  }\n\n  &:not(:first-child) {\n    padding-top: ", ";\n    ", ";\n\n    &:after {\n      background-color: ", ";\n      content: '';\n      height: 1px;\n      position: absolute;\n      top: 0;\n\n      ", ";\n    }\n  }\n"], ["\n  position: relative;\n\n  &:not(:last-child) {\n    padding-bottom: ", ";\n  }\n\n  &:not(:first-child) {\n    padding-top: ", ";\n    ", ";\n\n    &:after {\n      background-color: ", ";\n      content: '';\n      height: 1px;\n      position: absolute;\n      top: 0;\n\n      ", ";\n    }\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingB;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingA;
+}, function (_a) {
+    var theme = _a.theme, hasGroupTitle = _a.hasGroupTitle;
+    return hasGroupTitle
+        ? "padding-top: ".concat(theme.spacing.spacingA)
+        : "padding-top: ".concat(theme.spacing.spacingB);
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_divider;
+}, function (_a) {
+    var size = _a.size;
+    return size &&
+        {
+            large: largeGroupDivider,
+            medium: mediumGroupDivider,
+            small: smallGroupDivider
+        }[size];
+});
+var S_Wrapper = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  padding-bottom: ", ";\n\n  ", ":first-child & {\n    padding-top: ", ";\n  }\n\n  ", ":not(:first-child) > & {\n    padding-top: ", ";\n  }\n\n  ", ";\n"], ["\n  padding-bottom: ", ";\n\n  ", ":first-child & {\n    padding-top: ", ";\n  }\n\n  ", ":not(:first-child) > & {\n    padding-top: ", ";\n  }\n\n  ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingC;
+}, S_Group, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingA;
+}, S_Group, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingC;
+}, function (_a) {
+    var size = _a.size;
+    return size &&
+        {
+            large: largeGroupTitle,
+            medium: mediumGroupTitle,
+            small: smallGroupTitle
+        }[size];
+});
+var S_TextLabel = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __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;
     return theme.spacing.spacingB;
 }, function (_a) {
@@ -250,7 +355,7 @@ var S_TextLabel = styled_components_1.default.div(templateObject_1 || (templateO
             small: small
         }[size];
 });
-var large = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 48px;\n  width: ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"], ["\n  height: 48px;\n  width: ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"])), function (_a) {
+var large = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  height: 48px;\n  width: ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"], ["\n  height: 48px;\n  width: ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"])), function (_a) {
     var displayType = _a.displayType, responsiveMode = _a.responsiveMode;
     if (responsiveMode === 'use') {
         return '100%';
@@ -260,7 +365,7 @@ var large = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 =
     }
     return '432px';
 });
-var medium = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-radius: 12px;\n  height: 40px;\n  width: ", ";\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n"], ["\n  border-radius: 12px;\n  height: 40px;\n  width: ", ";\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n"])), function (_a) {
+var medium = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  border-radius: 12px;\n  height: 40px;\n  width: ", ";\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n"], ["\n  border-radius: 12px;\n  height: 40px;\n  width: ", ";\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n"])), function (_a) {
     var displayType = _a.displayType, responsiveMode = _a.responsiveMode;
     if (responsiveMode === 'use') {
         return '100%';
@@ -270,7 +375,7 @@ var medium = (0, styled_components_1.css)(templateObject_3 || (templateObject_3
     }
     return '188px';
 });
-var small = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border-radius: 10px;\n  height: 32px;\n  width: ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"], ["\n  border-radius: 10px;\n  height: 32px;\n  width: ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"])), function (_a) {
+var small = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  border-radius: 10px;\n  height: 32px;\n  width: ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"], ["\n  border-radius: 10px;\n  height: 32px;\n  width: ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"])), function (_a) {
     var displayType = _a.displayType, responsiveMode = _a.responsiveMode;
     if (responsiveMode === 'use') {
         return '100%';
@@ -280,7 +385,7 @@ var small = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 =
     }
     return '188px';
 });
-var S_Dropdown = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: inline-block;\n  outline: none;\n  position: relative;\n\n  ", ";\n\n  ", "\n"], ["\n  display: inline-block;\n  outline: none;\n  position: relative;\n\n  ", ";\n\n  ", "\n"])), function (_a) {
+var S_Dropdown = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  display: inline-block;\n  outline: none;\n  position: relative;\n\n  ", ";\n\n  ", "\n"], ["\n  display: inline-block;\n  outline: none;\n  position: relative;\n\n  ", ";\n\n  ", "\n"])), function (_a) {
     var size = _a.size;
     return size &&
         {
@@ -292,7 +397,7 @@ var S_Dropdown = styled_components_1.default.div(templateObject_5 || (templateOb
     var customWidth = _a.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 colorThemeBackgroundReadOnly = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
     var colorTheme = _a.colorTheme, theme = _a.theme;
     switch (colorTheme) {
         case 'dark':
@@ -303,7 +408,7 @@ var colorThemeBackgroundReadOnly = (0, styled_components_1.css)(templateObject_6
             return theme.ui_cpnt_dropdown_base_disabled;
     }
 });
-var colorThemeBackgroundDisabled = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
+var colorThemeBackgroundDisabled = (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
     var colorTheme = _a.colorTheme, theme = _a.theme;
     switch (colorTheme) {
         case 'dark':
@@ -314,7 +419,7 @@ var colorThemeBackgroundDisabled = (0, styled_components_1.css)(templateObject_7
             return theme.ui_cpnt_dropdown_base_disabled;
     }
 });
-var colorThemeBackgroundNormal = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
+var colorThemeBackgroundNormal = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
     var colorTheme = _a.colorTheme, theme = _a.theme;
     switch (colorTheme) {
         case 'dark':
@@ -325,7 +430,7 @@ var colorThemeBackgroundNormal = (0, styled_components_1.css)(templateObject_8 |
             return theme.ui_cpnt_dropdown_base_normal;
     }
 });
-var colorThemeBorderWhite = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
+var colorThemeBorderWhite = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
     var state = _a.state, theme = _a.theme;
     switch (state) {
         case 'disabled':
@@ -335,7 +440,7 @@ var colorThemeBorderWhite = (0, styled_components_1.css)(templateObject_9 || (te
             return theme.ui_cpnt_dropdown_border_white_normal;
     }
 });
-var colorThemeBorderDark = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
+var colorThemeBorderDark = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
     var state = _a.state, theme = _a.theme;
     switch (state) {
         case 'disabled':
@@ -345,7 +450,7 @@ var colorThemeBorderDark = (0, styled_components_1.css)(templateObject_10 || (te
             return theme.ui_cpnt_dropdown_border_darktheme_normal;
     }
 });
-var borderColor = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
+var borderColor = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
     var state = _a.state, theme = _a.theme;
     switch (state) {
         case 'disabled':
@@ -356,7 +461,7 @@ var borderColor = (0, styled_components_1.css)(templateObject_11 || (templateObj
             return theme.ui_cpnt_dropdown_border_normal;
     }
 });
-var backgroundHoverColor = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
+var backgroundHoverColor = (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
     var colorTheme = _a.colorTheme, theme = _a.theme;
     switch (colorTheme) {
         case 'none':
@@ -369,7 +474,7 @@ var backgroundHoverColor = (0, styled_components_1.css)(templateObject_12 || (te
             return theme.ui_cpnt_textfield_base_hover;
     }
 });
-var backgroundActiveColor = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
+var backgroundActiveColor = (0, styled_components_1.css)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
     var colorTheme = _a.colorTheme, theme = _a.theme;
     switch (colorTheme) {
         case 'none':
@@ -382,8 +487,8 @@ var backgroundActiveColor = (0, styled_components_1.css)(templateObject_13 || (t
             return theme.ui_cpnt_textfield_base_pressed;
     }
 });
-var normalActionColor = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __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_15 || (templateObject_15 = __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  padding-left: ", ";\n  padding-right: ", ";\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  padding-left: ", ";\n  padding-right: ", ";\n\n  ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_a) {
+var normalActionColor = (0, styled_components_1.css)(templateObject_22 || (templateObject_22 = __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_23 || (templateObject_23 = __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  padding-left: ", ";\n  padding-right: ", ";\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  padding-left: ", ";\n  padding-right: ", ";\n\n  ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_a) {
     var state = _a.state;
     switch (state) {
         case 'disabled':
@@ -434,9 +539,9 @@ var S_Select = styled_components_1.default.div(templateObject_15 || (templateObj
     var state = _a.state;
     return state === 'normal' && normalActionColor;
 });
-var S_ContextMenuWrapper = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  display: block;\n  position: absolute;\n\n  ", ";\n"], ["\n  display: block;\n  position: absolute;\n\n  ", ";\n"])), function (_a) {
+var S_ContextMenuWrapper = styled_components_1.default.div(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n  display: block;\n  position: absolute;\n\n  ", ";\n"], ["\n  display: block;\n  position: absolute;\n\n  ", ";\n"])), function (_a) {
     var contextMenuPositionCss = _a.contextMenuPositionCss;
     return contextMenuPositionCss;
 });
 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, templateObject_14, templateObject_15, templateObject_16;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24;

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

@@ -59,12 +59,25 @@ exports.BasePathContext = (0, react_1.createContext)({
     }
 });
 function DynamicDesktopNavBar(_a) {
-    var _b = _a.isPreview, isPreview = _b === void 0 ? false : _b, template = _a.template, brandLogo = _a.brandLogo, primaryMenus = _a.primaryMenus, secondaryMenus = _a.secondaryMenus, userProfile = _a.userProfile, basePath = _a.basePath, _c = _a.colorTheme, colorTheme = _c === void 0 ? 'none' : _c;
-    var _d = templates_1.DynamicDesktopNavBarTemplates.getTemplate(template), gridStyle = _d.gridStyle, gridTemplate = _d.gridTemplate, showSecondaryMenu = _d.showSecondaryMenu, primaryMenuOptions = _d.primaryMenuOptions, secondaryMenuOptions = _d.secondaryMenuOptions, userProfileOptions = _d.userProfileOptions;
-    var _e = (0, react_1.useReducer)(reducer_1.default, reducer_1.defaultValue), state = _e[0], dispatch = _e[1];
+    var _b;
+    var _c = _a.isPreview, isPreview = _c === void 0 ? false : _c, template = _a.template, brandLogo = _a.brandLogo, primaryMenus = _a.primaryMenus, secondaryMenus = _a.secondaryMenus, userProfile = _a.userProfile, basePath = _a.basePath, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'none' : _d;
+    var _e = templates_1.DynamicDesktopNavBarTemplates.getTemplate(template), gridStyle = _e.gridStyle, gridTemplate = _e.gridTemplate, showSecondaryMenu = _e.showSecondaryMenu, primaryMenuOptions = _e.primaryMenuOptions, secondaryMenuOptions = _e.secondaryMenuOptions, userProfileOptions = _e.userProfileOptions;
+    var _f = (0, react_1.useReducer)(reducer_1.default, reducer_1.defaultValue), state = _f[0], dispatch = _f[1];
     var location = (0, react_router_dom_1.useLocation)();
     var prevLocation = (0, hooks_1.usePrevious)(location.pathname + location.search);
     var theme = (0, styled_components_1.useTheme)();
+    var profileArea = (0, react_1.useRef)(null);
+    var userProfileAreaWidth = ((_b = profileArea === null || profileArea === void 0 ? void 0 : profileArea.current) === null || _b === void 0 ? void 0 : _b.offsetWidth) || 0;
+    var GRID_GAP = 24;
+    var gridStyleMarginLeft = "".concat(userProfileAreaWidth + GRID_GAP, "px");
+    var style = template === 'W1_0011' ? __assign(__assign({}, gridStyle), { marginLeft: gridStyleMarginLeft }) : gridStyle;
+    var isFixedWidth = template === 'W1_0006' ||
+        template === 'W1_0007' ||
+        template === 'W1_0008' ||
+        template === 'W1_0009' ||
+        template === 'W1_0010';
+    var isCenteredLogo = template === 'W1_0011';
+    var navBarHeight = '63px';
     (0, react_1.useEffect)(function () {
         var currentSearch = (0, utils_1.getSearchExceptGivenName)(location.search, 'from');
         var currentLocation = location.pathname + currentSearch;
@@ -80,18 +93,24 @@ 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 }), (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 })] })) }))) })));
+    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", isFixedWidth: isFixedWidth, isPreview: isPreview, navBarHeight: navBarHeight }, { children: (0, jsx_runtime_1.jsxs)(S_Grid, __assign({ className: "DynamicDesktopNavBarGrid", gridTemplate: gridTemplate, style: style }, { children: [(0, jsx_runtime_1.jsx)(blocks_1.BrandLogo, { to: brandLogo.href, logoSrc: brandLogo.src, fallbackText: brandLogo.text, isCenteredLogo: isCenteredLogo }), (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, { ref: profileArea, 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, isFixedWidth: isFixedWidth, navBarHeight: navBarHeight }, { children: (0, jsx_runtime_1.jsxs)(S_Grid, __assign({ className: "DynamicDesktopNavBarGrid", gridTemplate: gridTemplate, style: style }, { children: [(0, jsx_runtime_1.jsx)(blocks_1.BrandLogo, { to: brandLogo.href, logoSrc: brandLogo.src, fallbackText: brandLogo.text, isCenteredLogo: isCenteredLogo }), (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, { ref: profileArea, 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 S_Grid = (0, styled_components_1.default)(BoxLayout_1.Grid)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  grid-column-gap: 24px;\n  justify-items: center;\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  align-items: center;\n  grid-column-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) {
     var theme = _a.theme;
     return theme.spacing.spacingE;
 });
-var S_DynamicDesktopNavBar = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  display: flex;\n  height: 63px;\n  min-width: ", ";\n\n  * {\n    box-sizing: border-box;\n  }\n\n  a:active {\n    pointer-events: ", ";\n  }\n"], ["\n  background-color: ", ";\n  display: flex;\n  height: 63px;\n  min-width: ", ";\n\n  * {\n    box-sizing: border-box;\n  }\n\n  a:active {\n    pointer-events: ", ";\n  }\n"])), function (_a) {
+var S_DynamicDesktopNavBar = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  display: flex;\n  height: ", ";\n  justify-content: ", ";\n  min-width: ", ";\n\n  * {\n    box-sizing: border-box;\n  }\n\n  a:active {\n    pointer-events: ", ";\n  }\n"], ["\n  background-color: ", ";\n  display: flex;\n  height: ", ";\n  justify-content: ", ";\n  min-width: ", ";\n\n  * {\n    box-sizing: border-box;\n  }\n\n  a:active {\n    pointer-events: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_menu_background;
+}, function (_a) {
+    var navBarHeight = _a.navBarHeight;
+    return navBarHeight;
+}, function (_a) {
+    var isFixedWidth = _a.isFixedWidth;
+    return isFixedWidth && 'center';
 }, function (_a) {
     var isPreview = _a.isPreview;
     return (isPreview ? '1100px' : '1200px');

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

@@ -4,7 +4,8 @@ type Props = {
     to: string;
     logoSrc: string;
     fallbackText: string;
+    isCenteredLogo: boolean;
     style?: CSSProperties;
 };
-declare function BrandLogo({ to, logoSrc, fallbackText, style }: Props): JSX.Element;
+declare function BrandLogo({ to, logoSrc, fallbackText, isCenteredLogo, style }: Props): JSX.Element;
 export default BrandLogo;

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

@@ -22,8 +22,8 @@ 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 ((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 to = _a.to, logoSrc = _a.logoSrc, fallbackText = _a.fallbackText, isCenteredLogo = _a.isCenteredLogo, 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, isCenteredLogo: isCenteredLogo }) })));
 }
 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/UserProfile.d.ts

@@ -7,5 +7,5 @@ type Props = {
     overrideUserProfile?: React.ReactNode;
     style?: CSSProperties;
 };
-declare function UserProfile({ src, to, overrideUserProfile, leftIconButton, style }: Props): JSX.Element;
-export default UserProfile;
+declare const _default: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;
+export default _default;

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

@@ -19,14 +19,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var styled_components_1 = __importDefault(require("styled-components"));
 var Navigations_1 = require("../../../../common/components/Navigations");
 var hybrid_1 = require("../../../../hybrid");
-function UserProfile(_a) {
+function UserProfile(_a, ref) {
     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" })] })), (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" }) }))] })) })));
+    return ((0, jsx_runtime_1.jsx)(S_UserProfile, __assign({ style: style, ref: ref }, { children: overrideUserProfile ? ((0, jsx_runtime_1.jsx)(S_OverrideUserProfile, { children: 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"])));
-exports.default = UserProfile;
-var templateObject_1, templateObject_2;
+var S_OverrideUserProfile = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: max-content;\n"], ["\n  width: max-content;\n"])));
+var S_ImageViewWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n"], ["\n  align-items: center;\n  display: flex;\n"])));
+exports.default = (0, react_1.forwardRef)(UserProfile);
+var templateObject_1, templateObject_2, templateObject_3;

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

@@ -3,6 +3,7 @@ type Props = {
     to: string;
     logoSrc: string;
     fallbackText: string;
+    isCenteredLogo: boolean;
 };
-declare function LogoNav({ to, logoSrc, fallbackText }: Props): JSX.Element;
+declare function LogoNav({ to, logoSrc, fallbackText, isCenteredLogo }: Props): JSX.Element;
 export default LogoNav;

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

@@ -23,10 +23,19 @@ var styled_components_1 = __importDefault(require("styled-components"));
 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 })) : ((0, jsx_runtime_1.jsx)(__1.D_TextLabel, { text: fallbackText, styleTheme: "headingBold", ellipsisMode: "use", lineLimit: 1 })) }) })));
+    var to = _a.to, logoSrc = _a.logoSrc, fallbackText = _a.fallbackText, isCenteredLogo = _a.isCenteredLogo;
+    return ((0, jsx_runtime_1.jsx)(NavLink_1.default, __assign({ to: to }, { children: (0, jsx_runtime_1.jsx)(S_Box, __assign({ isCenteredLogo: isCenteredLogo }, { 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_Box = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 48px;\n  justify-content: ", ";\n  max-width: ", ";\n  width: ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  height: 48px;\n  justify-content: ", ";\n  max-width: ", ";\n  width: ", ";\n"])), function (_a) {
+    var isCenteredLogo = _a.isCenteredLogo;
+    return isCenteredLogo && 'center';
+}, function (_a) {
+    var isCenteredLogo = _a.isCenteredLogo;
+    return isCenteredLogo && '180px';
+}, function (_a) {
+    var isCenteredLogo = _a.isCenteredLogo;
+    return (isCenteredLogo ? 'max-content' : '180px');
+});
 var S_Logo = styled_components_1.default.img(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  max-height: 100%;\n  max-width: 100%;\n  object-fit: contain;\n  object-position: left;\n"], ["\n  max-height: 100%;\n  max-width: 100%;\n  object-fit: contain;\n  object-position: left;\n"])));
 exports.default = LogoNav;
 var templateObject_1, templateObject_2;