pds-dev-kit-web 1.3.28 → 1.4.0

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

@@ -115,8 +115,8 @@ function BasicListItem(_a) {
                 (displayType === 'ibtn_amount1' ||
                     displayType === 'ibtn_amount2' ||
                     displayType === 'ibtn_text') && (react_1.default.createElement(react_1.default.Fragment, null,
-                    displayType === 'ibtn_amount2' && (react_1.default.createElement(S_IconWrapper, null, iBtn2IconName && (react_1.default.createElement(IconButton_1.IconButton, { iconName: iBtn2IconName, iconFillType: iBtn2IconFillType, baseSize: "medium", iconSize: 20, shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleIBtn2Click })))),
-                    react_1.default.createElement(S_IconWrapper, null, iBtn1IconName && (react_1.default.createElement(IconButton_1.IconButton, { iconName: iBtn1IconName, iconFillType: iBtn1IconFillType, baseSize: "medium", iconSize: 20, shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleIBtn1Click }))))),
+                    displayType === 'ibtn_amount2' && (react_1.default.createElement(S_IconWrapper, null, iBtn2IconName && (react_1.default.createElement(IconButton_1.IconButton, { iconName: iBtn2IconName, iconFillType: iBtn2IconFillType, baseSize: "medium", iconSize: 20, shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleIBtn2Click, iconColorKey: "ui_cpnt_button_icon_default" })))),
+                    react_1.default.createElement(S_IconWrapper, null, iBtn1IconName && (react_1.default.createElement(IconButton_1.IconButton, { iconName: iBtn1IconName, iconFillType: iBtn1IconFillType, baseSize: "medium", iconSize: 20, shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleIBtn1Click, iconColorKey: "ui_cpnt_button_icon_default" }))))),
                 displayType === 'mbtn' && (react_1.default.createElement(react_1.default.Fragment, null,
                     react_1.default.createElement(MainButton_1.MainButton, { text: mBtnText, fillType: mBtnFillType, size: "small", onClick: handleMBtnClick }),
                     react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))),
@@ -168,7 +168,7 @@ var S_RightBox = styled_components_1.default.div(templateObject_9 || (templateOb
     var displayType = _a.displayType;
     return (displayType === 'text' ? '40px' : 'auto');
 });
-var S_SwitchWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-end;\n  min-width: 68px;\n  min-height: 32px;\n  position: relative;\n  right: 54px;\n"], ["\n  display: flex;\n  justify-content: flex-end;\n  min-width: 68px;\n  min-height: 32px;\n  position: relative;\n  right: 54px;\n"])));
+var S_SwitchWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-end;\n  min-width: 68px;\n  min-height: 32px;\n  position: relative;\n  right: 0;\n"], ["\n  display: flex;\n  justify-content: flex-end;\n  min-width: 68px;\n  min-height: 32px;\n  position: relative;\n  right: 0;\n"])));
 var S_DividerWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  width: calc(100% - 24px);\n"], ["\n  width: calc(100% - 24px);\n"])));
 exports.default = BasicListItem;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;

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

@@ -81,17 +81,20 @@ var rlarge = (0, styled_components_1.css)(templateObject_3 || (templateObject_3
 });
 var normal = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.ui_cpnt_textfield_base_normal;
+    return theme.ui_cpnt_blogtextfield_base_01;
 });
 var read_only = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.ui_cpnt_textfield_base_disabled;
+    return theme.ui_cpnt_blogtextfield_base_01;
 });
 var disabled = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.ui_cpnt_textfield_base_disabled;
+    return theme.ui_cpnt_blogtextfield_base_01;
 });
-var S_BlogTextFieldWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-items: center;\n  box-sizing: border-box;\n  border: 1px solid transparent;\n  display: flex;\n  ", ";\n  ", ";\n"], ["\n  align-items: center;\n  box-sizing: border-box;\n  border: 1px solid transparent;\n  display: flex;\n  ", ";\n  ", ";\n"])), function (_a) {
+var S_BlogTextFieldWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-items: center;\n  box-sizing: border-box;\n  border: 1px solid transparent;\n  cursor: ", ";\n  display: flex;\n  ", ";\n  ", ";\n"], ["\n  align-items: center;\n  box-sizing: border-box;\n  border: 1px solid transparent;\n  cursor: ", ";\n  display: flex;\n  ", ";\n  ", ";\n"])), function (_a) {
+    var state = _a.state;
+    return (state === 'disabled' ? 'not-allowed' : 'text');
+}, function (_a) {
     var size = _a.size;
     return size &&
         {

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

@@ -13,7 +13,7 @@ function ContextMenu(_a) {
     var children = _a.children, _b = _a.autoWidthMode, autoWidthMode = _b === void 0 ? 'none' : _b, maxHeight = _a.maxHeight;
     return (react_1.default.createElement(S_ContextMenu, { autoWidth: autoWidthMode === 'use', maxHeight: maxHeight }, children));
 }
-var S_ContextMenu = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-shadow: ", ";\n  list-style: none;\n  margin: 0;\n  min-width: 128px;\n  overflow-y: auto;\n  padding: ", " 0;\n  position: relative;\n  vertical-align: baseline;\n  width: ", ";\n  z-index: 3;\n\n  ", ";\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-shadow: ", ";\n  list-style: none;\n  margin: 0;\n  min-width: 128px;\n  overflow-y: auto;\n  padding: ", " 0;\n  position: relative;\n  vertical-align: baseline;\n  width: ", ";\n  z-index: 3;\n\n  ", ";\n"])), function (_a) {
+var S_ContextMenu = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 14px;\n  box-shadow: ", ";\n  list-style: none;\n  margin: 0;\n  min-width: 128px;\n  overflow-y: auto;\n  padding: ", " 0;\n  position: relative;\n  vertical-align: baseline;\n  width: ", ";\n  z-index: 3;\n\n  max-height: ", ";\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 14px;\n  box-shadow: ", ";\n  list-style: none;\n  margin: 0;\n  min-width: 128px;\n  overflow-y: auto;\n  padding: ", " 0;\n  position: relative;\n  vertical-align: baseline;\n  width: ", ";\n  z-index: 3;\n\n  max-height: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_contextmenu_base;
 }, function (_a) {
@@ -30,7 +30,7 @@ var S_ContextMenu = styled_components_1.default.ul(templateObject_1 || (template
     return (autoWidth ? 'inherit' : 'auto');
 }, function (_a) {
     var maxHeight = _a.maxHeight;
-    return maxHeight && { maxHeight: maxHeight + "px" };
+    return (maxHeight ? maxHeight + "px" : 'none');
 });
 exports.default = ContextMenu;
 var templateObject_1;

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

@@ -8,9 +8,15 @@ declare type DesktopAlertDialogProps = {
     tBtn1Text?: PDSTextType;
     tBtn2Text?: PDSTextType;
     tBtn3Text?: PDSTextType;
+    tBtn1State?: 'normal' | 'disabled';
+    tBtn2State?: 'normal' | 'disabled';
+    tBtn3State?: 'normal' | 'disabled';
+    tBtn1Type?: 'button' | 'submit';
+    tBtn2Type?: 'button' | 'submit';
+    tBtn3Type?: 'button' | 'submit';
     onClickTBtn1?: () => any;
     onClickTBtn2?: () => any;
     onClickTBtn3?: () => any;
 };
-declare function DesktopAlertDialog({ iconMode, titleText, contentText, btnMode, tBtn1Text, tBtn2Text, tBtn3Text, onClickTBtn1, onClickTBtn2, onClickTBtn3 }: DesktopAlertDialogProps): React.ReactPortal;
+declare function DesktopAlertDialog({ iconMode, titleText, contentText, btnMode, tBtn1Text, tBtn2Text, tBtn3Text, tBtn1State, tBtn2State, tBtn3State, tBtn1Type, tBtn2Type, tBtn3Type, onClickTBtn1, onClickTBtn2, onClickTBtn3 }: DesktopAlertDialogProps): React.ReactPortal;
 export default DesktopAlertDialog;

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

@@ -33,7 +33,7 @@ var hybrid_1 = require("../../../hybrid");
 var TextButton_1 = require("../TextButton");
 var TextLabel_1 = require("../TextLabel");
 function DesktopAlertDialog(_a) {
-    var _b = _a.iconMode, iconMode = _b === void 0 ? 'none' : _b, titleText = _a.titleText, contentText = _a.contentText, _c = _a.btnMode, btnMode = _c === void 0 ? 'tbtn_amount1' : _c, tBtn1Text = _a.tBtn1Text, tBtn2Text = _a.tBtn2Text, tBtn3Text = _a.tBtn3Text, onClickTBtn1 = _a.onClickTBtn1, onClickTBtn2 = _a.onClickTBtn2, onClickTBtn3 = _a.onClickTBtn3;
+    var _b = _a.iconMode, iconMode = _b === void 0 ? 'none' : _b, titleText = _a.titleText, contentText = _a.contentText, _c = _a.btnMode, btnMode = _c === void 0 ? 'tbtn_amount1' : _c, tBtn1Text = _a.tBtn1Text, tBtn2Text = _a.tBtn2Text, tBtn3Text = _a.tBtn3Text, _d = _a.tBtn1State, tBtn1State = _d === void 0 ? 'normal' : _d, _e = _a.tBtn2State, tBtn2State = _e === void 0 ? 'normal' : _e, _f = _a.tBtn3State, tBtn3State = _f === void 0 ? 'normal' : _f, _g = _a.tBtn1Type, tBtn1Type = _g === void 0 ? 'button' : _g, _h = _a.tBtn2Type, tBtn2Type = _h === void 0 ? 'button' : _h, _j = _a.tBtn3Type, tBtn3Type = _j === void 0 ? 'button' : _j, onClickTBtn1 = _a.onClickTBtn1, onClickTBtn2 = _a.onClickTBtn2, onClickTBtn3 = _a.onClickTBtn3;
     var container = (0, react_1.useState)(function () {
         var modalRoot = document.createElement('div');
         modalRoot.setAttribute('id', 'DesktopAlertDialog');
@@ -72,11 +72,11 @@ function DesktopAlertDialog(_a) {
                     titleText && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c" }),
                     contentText && (react_1.default.createElement(TextLabel_1.TextLabel, { text: contentText, colorTheme: "sysTextPrimary", styleTheme: "body1Regular" })))),
             react_1.default.createElement(S_Footer, null,
-                btn3Mode.includes(btnMode) && tBtn3Text && (react_1.default.createElement(TextButton_1.TextButton, { text: tBtn3Text, size: "large", onClick: onClickTBtn3 })),
+                btn3Mode.includes(btnMode) && tBtn3Text && (react_1.default.createElement(TextButton_1.TextButton, { text: tBtn3Text, state: tBtn3State, type: tBtn3Type, size: "large", onClick: onClickTBtn3, colorTheme: "grey_01" })),
                 react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),
-                btn2Mode.includes(btnMode) && tBtn2Text && (react_1.default.createElement(TextButton_1.TextButton, { text: tBtn2Text, size: "large", onClick: onClickTBtn2 })),
+                btn2Mode.includes(btnMode) && tBtn2Text && (react_1.default.createElement(TextButton_1.TextButton, { text: tBtn2Text, state: tBtn2State, type: tBtn2Type, size: "large", onClick: onClickTBtn2, colorTheme: "grey_01" })),
                 react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),
-                btn1Mode.includes(btnMode) && tBtn1Text && (react_1.default.createElement(TextButton_1.TextButton, { text: tBtn1Text, size: "large", onClick: onClickTBtn1 }))))), container);
+                btn1Mode.includes(btnMode) && tBtn1Text && (react_1.default.createElement(TextButton_1.TextButton, { text: tBtn1Text, state: tBtn1State, type: tBtn1Type, size: "large", onClick: onClickTBtn1 }))))), container);
 }
 var S_UpperBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  margin: ", ";\n"], ["\n  display: flex;\n  margin: ", ";\n"])), function (_a) {
     var theme = _a.theme;
@@ -88,7 +88,7 @@ var S_ModalOverlay = styled_components_1.default.div(templateObject_4 || (templa
     var theme = _a.theme;
     return theme.ui_cpnt_alertdialog_dimmed;
 });
-var S_ModalWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 16px;\n  box-shadow: ", ";\n  position: fixed;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: auto;\n  min-width: 480px;\n  max-width: 560px;\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 16px;\n  box-shadow: ", ";\n  position: fixed;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: auto;\n  min-width: 480px;\n  max-width: 560px;\n"])), function (_a) {
+var S_ModalWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  position: fixed;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: auto;\n  min-width: 480px;\n  max-width: 560px;\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  position: fixed;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: auto;\n  min-width: 480px;\n  max-width: 560px;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_alertdialog_base;
 }, function (_a) {

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

@@ -40,12 +40,14 @@ function DesktopHeaderBar(_a) {
         }
     };
     var mBtnElement = function (text, state, handleClick) {
-        return size === 'xlarge' && (react_1.default.createElement(MainButton_1.MainButton, { text: text, size: "small", fillType: "line", onClick: handleClick, state: state }));
+        return size === 'xlarge' && (react_1.default.createElement(MainButton_1.MainButton, { text: text, size: "small", styleTheme: "secondary", onClick: handleClick, state: state }));
     };
     var mBtnFillElement = function (text, state, handleClick) {
         return size === 'xlarge' && (react_1.default.createElement(MainButton_1.MainButton, { text: text, size: "small", onClick: handleClick, state: state }));
     };
-    var iconButtonElement = function (iconName, handleClick) { return (react_1.default.createElement(IconButton_1.IconButton, { fillType: "fill", baseSize: "large", iconSize: 24, shapeType: "rectangle", iconName: iconName, iconFillType: "line", onClick: handleClick, iconColorKey: "ui_cpnt_button_icon_enabled", baseColorKey: "ui_cpnt_button_fill_base_transparent" })); };
+    var iconButtonElement = function (iconName, handleClick) { return (react_1.default.createElement(IconButton_1.IconButton, { fillType: "fill", baseSize: "large", iconSize: 24, shapeType: "rectangle", iconName: iconName, iconFillType: "line", onClick: handleClick, iconColorKey: iconName === 'ic_help_window'
+            ? 'ui_cpnt_button_icon_disabled'
+            : 'ui_cpnt_button_icon_enabled', baseColorKey: "ui_cpnt_button_fill_base_transparent" })); };
     var leftDisplayMode = function () {
         switch (leftDisplayType) {
             case 'icon': {

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

@@ -5,7 +5,7 @@ declare type DropDownValues = PDSValueOption & {
     state?: 'normal' | 'disabled';
 };
 declare type Props = {
-    colorTheme?: 'none' | 'dark';
+    colorTheme?: 'none' | 'dark' | 'white';
     defaultValue?: PDSValueOption;
     hintText?: TFunctionResult;
     maxHeightItemNumber?: number;

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

@@ -59,12 +59,18 @@ function Dropdown(_a) {
     };
     var getIconColorKey = function () {
         if (colorTheme === 'dark') {
-            if (state === 'disabled') {
+            if (state === 'disabled' || state === 'read_only') {
                 return 'ui_cpnt_dropdown_text_darktheme_disabled';
             }
             return 'ui_cpnt_dropdown_icon_darktheme_default';
         }
-        if (state === 'disabled') {
+        if (colorTheme === 'white') {
+            if (state === 'disabled' || state === 'read_only') {
+                return 'ui_cpnt_dropdown_icon_02';
+            }
+            return 'ui_cpnt_dropdown_icon_white_default';
+        }
+        if (state === 'disabled' || state === 'read_only') {
             return 'ui_cpnt_dropdown_icon_02';
         }
         return 'ui_cpnt_dropdown_icon_01';
@@ -74,28 +80,53 @@ function Dropdown(_a) {
             if (isFocused) {
                 return 'sysTextPrimary';
             }
-            if (state === 'normal' || state === 'read_only') {
-                return 'sysTextSecondary';
+            if (state === 'normal') {
+                return 'sysTextPrimary';
+            }
+            if (state === 'read_only') {
+                return 'sysTextTertiary';
             }
             if (state === 'disabled') {
                 return 'sysTextTertiary';
             }
             return 'sysTextPrimary';
         }
+        if (colorTheme === 'white') {
+            if (state === 'disabled') {
+                return 'sysTextTertiary';
+            }
+        }
     };
-    var getDarkTextColor = function () {
+    var getTextColorOverride = function () {
         if (colorTheme === 'dark') {
             if (isFocused) {
                 return 'ui_cpnt_dropdown_text_darktheme_enabled';
             }
-            if (state === 'normal' || state === 'read_only') {
+            if (state === 'normal') {
                 return 'ui_cpnt_dropdown_text_darktheme_hint';
             }
+            if (state === 'read_only') {
+                return 'ui_cpnt_dropdown_text_darktheme_readonly';
+            }
             if (state === 'disabled') {
                 return 'ui_cpnt_dropdown_text_darktheme_disabled';
             }
             return 'ui_cpnt_dropdown_text_darktheme_enabled';
         }
+        if (colorTheme === 'white') {
+            if (isFocused) {
+                return 'ui_cpnt_dropdown_text_white_enabled';
+            }
+            if (state === 'normal') {
+                return 'ui_cpnt_dropdown_text_white_hint';
+            }
+            if (state === 'read_only') {
+                return 'ui_cpnt_dropdown_text_white_readonly';
+            }
+            if (state !== 'disabled') {
+                return 'ui_cpnt_dropdown_text_white_disabled';
+            }
+        }
     };
     var maxHeight = (0, react_1.useMemo)(function () {
         if (size === 'small') {
@@ -109,7 +140,7 @@ function Dropdown(_a) {
     return (react_1.default.createElement(S_Dropdown, { className: "container", size: size, tabIndex: 0, onBlur: handleBlur, responsiveMode: responsiveMode },
         react_1.default.createElement(S_Select, { size: size, onClick: handleClick, isFocused: isFocused, state: state, colorTheme: colorTheme, responsiveMode: responsiveMode },
             react_1.default.createElement(S_TextLabel, null,
-                react_1.default.createElement(TextLabel_1.TextLabel, { text: (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.text) || hintText, styleTheme: "form2Regular", singleLineMode: "use", colorTheme: getTextColorTheme(), colorOverride: getDarkTextColor() })),
+                react_1.default.createElement(TextLabel_1.TextLabel, { text: (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.text) || hintText, styleTheme: "form2Regular", singleLineMode: "use", colorTheme: getTextColorTheme(), colorOverride: getTextColorOverride() })),
             react_1.default.createElement(hybrid_1.Icon, { size: 16, fillType: "line", iconName: isFocused ? 'ic_arrow_up' : 'ic_arrow_down', colorKey: getIconColorKey() }),
             react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" })),
         isFocused && (react_1.default.createElement(S_ContextMenuWrapper, null,
@@ -126,7 +157,7 @@ var large = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 =
     var responsiveMode = _a.responsiveMode;
     return (responsiveMode === 'use' ? '100%' : '432px');
 });
-var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 32px;\n  width: ", ";\n"], ["\n  height: 32px;\n  width: ", ";\n"])), function (_a) {
+var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-radius: 10px;\n  height: 32px;\n  width: ", ";\n"], ["\n  border-radius: 10px;\n  height: 32px;\n  width: ", ";\n"])), function (_a) {
     var responsiveMode = _a.responsiveMode;
     return (responsiveMode === 'use' ? '100%' : '188px');
 });
@@ -138,32 +169,100 @@ var S_Dropdown = styled_components_1.default.div(templateObject_4 || (templateOb
             small: small
         }[size];
 });
-var S_Select = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  box-sizing: border-box;\n  background-color: ", ";\n  border: 1px solid\n    ", ";\n  border-radius: 8px;\n  color: ", ";\n  cursor: pointer;\n  display: flex;\n  justify-content: space-between;\n\n  ", ";\n"], ["\n  align-items: center;\n  box-sizing: border-box;\n  background-color: ", ";\n  border: 1px solid\n    ", ";\n  border-radius: 8px;\n  color: ", ";\n  cursor: pointer;\n  display: flex;\n  justify-content: space-between;\n\n  ", ";\n"])), function (_a) {
-    var state = _a.state, colorTheme = _a.colorTheme, theme = _a.theme;
+var colorThemeBackgroundReadOnly = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
+    var colorTheme = _a.colorTheme, theme = _a.theme;
+    switch (colorTheme) {
+        case 'dark':
+            return theme.ui_cpnt_dropdown_base_darktheme_disabled;
+        case 'white':
+            return theme.ui_cpnt_dropdown_base_white_disabled;
+        case 'none':
+            return theme.ui_cpnt_dropdown_base_disabled;
+    }
+});
+var colorThemeBackgroundDisabled = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
+    var colorTheme = _a.colorTheme, theme = _a.theme;
+    switch (colorTheme) {
+        case 'dark':
+            return theme.ui_cpnt_dropdown_base_darktheme_disabled;
+        case 'white':
+            return theme.ui_cpnt_dropdown_base_white_disabled;
+        case 'none':
+            return theme.ui_cpnt_dropdown_base_disabled;
+    }
+});
+var colorThemeBackgroundNormal = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
+    var colorTheme = _a.colorTheme, theme = _a.theme;
+    switch (colorTheme) {
+        case 'dark':
+            return theme.ui_cpnt_dropdown_base_darktheme_normal;
+        case 'white':
+            return theme.ui_cpnt_dropdown_base_white_normal;
+        case 'none':
+            return theme.ui_cpnt_dropdown_base_normal;
+    }
+});
+var colorThemeBorderWhite = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
+    var state = _a.state, theme = _a.theme;
     switch (state) {
         case 'disabled':
         case 'read_only':
-            return colorTheme === 'none'
-                ? theme.ui_cpnt_dropdown_base_disabled
-                : theme.ui_cpnt_dropdown_base_darktheme_disabled;
+            return theme.ui_cpnt_dropdown_border_white_disabled;
         case 'normal':
-            return theme.ui_cpnt_dropdown_base_normal;
+            return theme.ui_cpnt_dropdown_border_white_normal;
+    }
+});
+var colorThemeBorderDark = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
+    var state = _a.state, theme = _a.theme;
+    switch (state) {
+        case 'disabled':
+        case 'read_only':
+            return theme.ui_cpnt_dropdown_border_darktheme_disabled;
+        case 'normal':
+            return theme.ui_cpnt_dropdown_border_darktheme_normal;
+    }
+});
+var borderColor = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
+    var state = _a.state, theme = _a.theme;
+    switch (state) {
+        case 'disabled':
+            return theme.ui_cpnt_dropdown_border_disabled;
+        case 'read_only':
+            return theme.ui_cpnt_dropdown_border_disabled;
+        case 'normal':
+            return theme.ui_cpnt_dropdown_border_normal;
+    }
+});
+var S_Select = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  align-items: center;\n  box-sizing: border-box;\n  background-color: ", ";\n  border: 2px solid\n    ", ";\n  border-radius: 14px;\n  cursor: ", ";\n  display: flex;\n  justify-content: space-between;\n\n  ", ";\n"], ["\n  align-items: center;\n  box-sizing: border-box;\n  background-color: ", ";\n  border: 2px solid\n    ", ";\n  border-radius: 14px;\n  cursor: ", ";\n  display: flex;\n  justify-content: space-between;\n\n  ", ";\n"])), function (_a) {
+    var state = _a.state;
+    switch (state) {
+        case 'disabled':
+            return colorThemeBackgroundDisabled;
+        case 'read_only':
+            return colorThemeBackgroundReadOnly;
+        case 'normal':
+            return colorThemeBackgroundNormal;
     }
 }, function (_a) {
     var theme = _a.theme, isFocused = _a.isFocused, colorTheme = _a.colorTheme;
     switch (colorTheme) {
         case 'none':
-            return isFocused
-                ? theme.ui_cpnt_dropdown_border_focus
-                : theme.ui_cpnt_dropdown_border_normal;
+            return isFocused ? theme.ui_cpnt_dropdown_border_focus : borderColor;
         case 'dark':
-            return isFocused
-                ? theme.ui_cpnt_dropdown_border_darktheme_focus
-                : theme.ui_cpnt_dropdown_border_darktheme_normal;
+            return isFocused ? theme.ui_cpnt_dropdown_border_darktheme_focus : colorThemeBorderDark;
+        case 'white':
+            return isFocused ? theme.ui_cpnt_dropdown_border_white_focus : colorThemeBorderWhite;
     }
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_dropdown_text_hint;
+    var state = _a.state;
+    switch (state) {
+        case 'disabled':
+            return 'not-allowed';
+        case 'read_only':
+            return 'auto';
+        case 'normal':
+            return 'pointer';
+    }
 }, function (_a) {
     var size = _a.size;
     return size &&
@@ -172,9 +271,9 @@ var S_Select = styled_components_1.default.div(templateObject_5 || (templateObje
             small: small
         }[size];
 });
-var S_ContextMenuWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: block;\n  margin-top: ", ";\n  position: absolute;\n  width: inherit;\n"], ["\n  display: block;\n  margin-top: ", ";\n  position: absolute;\n  width: inherit;\n"])), function (_a) {
+var S_ContextMenuWrapper = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  display: block;\n  margin-top: ", ";\n  position: absolute;\n  width: inherit;\n"], ["\n  display: block;\n  margin-top: ", ";\n  position: absolute;\n  width: inherit;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
 });
 exports.default = Dropdown;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+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;

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import { BrandLogo, UserProfile } from './blocks';
+import { DynamicDesktopTemplateType } from './templates/types';
+import { ParsedNode } from './types';
+declare type BrandLogo = {
+    src: string;
+    text: string;
+    href: string;
+};
+declare type UserProfile = {
+    src: string;
+    href: string;
+};
+export declare type Props = {
+    isPreview?: boolean;
+    brandLogo: BrandLogo;
+    userProfile: UserProfile;
+    primaryMenus: ParsedNode[];
+    secondaryMenus: ParsedNode[] | null;
+    template: DynamicDesktopTemplateType;
+    basePath: string;
+};
+export declare const BasePathContext: React.Context<{
+    basePath: string;
+}>;
+declare function DynamicDesktopNavBar({ isPreview, template, brandLogo, primaryMenus, secondaryMenus, userProfile, basePath }: Props): JSX.Element;
+export default DynamicDesktopNavBar;

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

@@ -0,0 +1,70 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BasePathContext = void 0;
+var react_1 = __importStar(require("react"));
+var react_router_dom_1 = require("react-router-dom");
+var styled_components_1 = __importDefault(require("styled-components"));
+var BoxLayout_1 = require("../../../common/components/BoxLayout");
+var blocks_1 = require("./blocks");
+exports.BasePathContext = (0, react_1.createContext)({
+    basePath: ''
+});
+function DynamicDesktopNavBar(_a) {
+    var _b = _a.isPreview, isPreview = _b === void 0 ? false : _b, template = _a.template, brandLogo = _a.brandLogo, primaryMenus = _a.primaryMenus, secondaryMenus = _a.secondaryMenus, userProfile = _a.userProfile, basePath = _a.basePath;
+    var gridStyle = template.gridStyle, gridTemplate = template.gridTemplate, showSecondaryMenu = template.showSecondaryMenu, primaryMenuOptions = template.primaryMenuOptions, secondaryMenuOptions = template.secondaryMenuOptions, userProfileOptions = template.userProfileOptions;
+    var slicedPrimaryMenus = (0, react_1.useMemo)(function () { return primaryMenus === null || primaryMenus === void 0 ? void 0 : primaryMenus.slice(0, primaryMenuOptions.maxLength); }, [primaryMenus, primaryMenuOptions]);
+    var slicedSecondaryMenus = (0, react_1.useMemo)(function () { var _a; return (_a = secondaryMenus === null || secondaryMenus === void 0 ? void 0 : secondaryMenus.slice(0, secondaryMenuOptions.maxLength)) !== null && _a !== void 0 ? _a : []; }, [secondaryMenus, secondaryMenuOptions]);
+    return (react_1.default.createElement(exports.BasePathContext.Provider, { value: { basePath: basePath } },
+        react_1.default.createElement(react_router_dom_1.BrowserRouter, { basename: basePath },
+            react_1.default.createElement(S_DynamicDesktopNavBar, { isPreview: isPreview },
+                react_1.default.createElement(S_Grid, { className: "DynamicDesktopNavBarGrid", gridTemplate: gridTemplate, style: gridStyle },
+                    react_1.default.createElement(blocks_1.BrandLogo, { to: brandLogo.href, logoSrc: brandLogo.src, fallbackText: brandLogo.text }),
+                    react_1.default.createElement(blocks_1.PrimaryMenu, { menus: slicedPrimaryMenus, showMenuAsIcon: primaryMenuOptions.showMenuAsIcon, style: primaryMenuOptions.style }),
+                    showSecondaryMenu && (react_1.default.createElement(blocks_1.SecondaryMenu, { menus: slicedSecondaryMenus, showMenuAsIcon: secondaryMenuOptions.showMenuAsIcon, style: secondaryMenuOptions.style })),
+                    react_1.default.createElement(blocks_1.UserProfile, { src: userProfile.src, to: userProfile.href, style: userProfileOptions.style }))))));
+}
+var S_Grid = (0, styled_components_1.default)(BoxLayout_1.Grid)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  justify-items: center;\n  gap: 24px;\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  align-items: center;\n  justify-items: center;\n  gap: 24px;\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
+    var 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 theme = _a.theme;
+    return theme.ui_menu_background;
+}, function (_a) {
+    var isPreview = _a.isPreview;
+    return (isPreview ? '1100px' : '1200px');
+}, function (_a) {
+    var isPreview = _a.isPreview;
+    return (isPreview ? 'none' : 'auto');
+});
+exports.default = DynamicDesktopNavBar;
+var templateObject_1, templateObject_2;

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { CSSProperties } from 'styled-components';
+declare type Props = {
+    to: string;
+    logoSrc: string;
+    fallbackText: string;
+    style?: CSSProperties;
+};
+declare function BrandLogo({ to, logoSrc, fallbackText, style }: Props): JSX.Element;
+export default BrandLogo;

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

@@ -0,0 +1,20 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var LogoNav_1 = __importDefault(require("../components/LogoNav"));
+function BrandLogo(_a) {
+    var to = _a.to, logoSrc = _a.logoSrc, fallbackText = _a.fallbackText, style = _a.style;
+    return (react_1.default.createElement(S_BrandLogo, { style: style },
+        react_1.default.createElement(LogoNav_1.default, { to: to, logoSrc: logoSrc, fallbackText: fallbackText })));
+}
+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;
+var templateObject_1;

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { CSSProperties } from 'styled-components';
+import { ParsedNode } from '../types';
+declare type Props = {
+    menus: ParsedNode[];
+    showMenuAsIcon: boolean;
+    style?: CSSProperties;
+};
+declare function PrimaryMenu({ menus, showMenuAsIcon, style }: Props): JSX.Element;
+export default PrimaryMenu;