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

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

@@ -3,6 +3,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -22,11 +33,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importStar(require("styled-components"));
 var components_1 = require("../../../common/components");
 var styles_1 = require("../../../common/styles");
@@ -42,9 +50,23 @@ function UploadMainButton(_a) {
         }
         e.target.value = '';
     };
+    var isLineColorTheme = colorTheme.includes('line');
+    var isPrimaryColorTheme = colorTheme.includes('primary');
+    var isSecondaryColorTheme = colorTheme.includes('secondary');
+    var lineColorThemeTextColor = function () {
+        if (colorTheme === 'line1') {
+            return 'ui_cpnt_button_text_error';
+        }
+        if (colorTheme === 'line2') {
+            return 'ui_cpnt_button_text_primary';
+        }
+        if (colorTheme === 'line3') {
+            return 'ui_cpnt_button_text_darktheme_enabled';
+        }
+    };
     var submittingProgressColor = function () {
-        if (fillType === 'line' && colorTheme !== 'none' && state !== 'disabled') {
-            return types_1.textThemeColorLines[colorTheme];
+        if (fillType === 'line' && isLineColorTheme && state !== 'disabled') {
+            return lineColorThemeTextColor();
         }
         if (fillType === 'fill') {
             return 'ui_cpnt_textlabel_usr_brandonprimary';
@@ -53,73 +75,107 @@ function UploadMainButton(_a) {
             return 'ui_cpnt_textlabel_sys_primary';
         }
         if (styleTheme === 'primary') {
+            if (colorTheme === 'primary1') {
+                return 'ui_cpnt_textlabel_usr_brandprimary';
+            }
             return 'ui_cpnt_textlabel_usr_brandonprimary';
         }
         if (styleTheme === 'secondary') {
+            if (colorTheme === 'secondary1') {
+                return 'ui_cpnt_textlabel_sys_white';
+            }
             return 'ui_cpnt_textlabel_usr_brandprimary';
         }
         return 'ui_cpnt_textlabel_usr_brandonprimary';
     };
-    var selectTextThemeColor = function () {
+    var textColor = function () {
+        if (fillType === 'fill') {
+            return 'usrTextBrandOnPrimary';
+        }
+        if (fillType === 'line') {
+            return 'sysTextPrimary';
+        }
+        if (styleTheme === 'primary') {
+            if (colorTheme === 'primary1') {
+                return 'usrTextBrandPrimary';
+            }
+            return 'usrTextBrandOnPrimary';
+        }
+        if (styleTheme === 'secondary') {
+            if (colorTheme === 'secondary1') {
+                return 'sysTextWhite';
+            }
+            return 'usrTextBrandPrimary';
+        }
+        return 'usrTextBrandOnPrimary';
+    };
+    var textColorOverride = function () {
         if (colorTheme === 'line3' && state === 'disabled') {
             return 'ui_cpnt_button_text_darktheme_disabled';
         }
-        if (fillType === 'line' && colorTheme !== 'none' && state !== 'disabled') {
-            return types_1.textThemeColorLines[colorTheme];
+        if (fillType === 'line' && isLineColorTheme && state !== 'disabled') {
+            return lineColorThemeTextColor();
+        }
+        if (styleTheme === 'secondary' && colorTheme === 'secondary1' && state === 'disabled') {
+            return 'ui_cpnt_button_text_secondary_variation_disabled';
         }
         return undefined;
     };
+    var lineColorThemeIconColor = function () {
+        if (colorTheme === 'line1') {
+            return 'ui_cpnt_button_icon_error';
+        }
+        if (colorTheme === 'line2') {
+            return 'ui_cpnt_button_icon_primary';
+        }
+        if (colorTheme === 'line3') {
+            return 'ui_cpnt_button_icon_darktheme_enabled';
+        }
+    };
+    var primaryColorThemeIconColor = function () {
+        if (colorTheme === 'primary1') {
+            return 'ui_cpnt_button_icon_primary';
+        }
+    };
+    var secondaryColorThemeIconColor = function () {
+        if (colorTheme === 'secondary1') {
+            return 'ui_cpnt_button_icon_on_primary';
+        }
+    };
     var iconColor = function () {
         if (state === 'disabled') {
             if (colorTheme === 'line3') {
                 return 'ui_cpnt_button_icon_darktheme_disabled';
             }
+            if (styleTheme === 'secondary' && colorTheme === 'secondary1') {
+                return 'ui_cpnt_button_icon_secondary_variation_disabled';
+            }
             return 'ui_cpnt_button_icon_disabled';
         }
-        if (fillType === 'line' && colorTheme !== 'none') {
-            return types_1.iconColorThemeLineColors[colorTheme];
+        if (fillType === 'line' && isLineColorTheme) {
+            return lineColorThemeIconColor();
         }
         if (fillType) {
             return types_1.iconFillTypeColors[fillType];
         }
-        if (styleTheme) {
-            return types_1.iconStyleThemeColors[styleTheme];
-        }
-    };
-    var textColor = function () {
-        if (fillType === 'fill') {
-            return 'usrTextBrandOnPrimary';
-        }
-        if (fillType === 'line') {
-            return 'sysTextPrimary';
+        if (styleTheme === 'primary' && isPrimaryColorTheme) {
+            return primaryColorThemeIconColor();
         }
-        if (styleTheme === 'primary') {
-            return 'usrTextBrandOnPrimary';
+        if (styleTheme === 'secondary' && isSecondaryColorTheme) {
+            return secondaryColorThemeIconColor();
         }
-        if (styleTheme === 'secondary') {
-            return 'usrTextBrandPrimary';
+        if (styleTheme) {
+            return types_1.iconStyleThemeColors[styleTheme];
         }
-        return 'usrTextBrandOnPrimary';
     };
     var UploadMainButtonVariation = function () {
         if (isLoading) {
-            return (react_1.default.createElement(S_LoadingUploadMainButton, { shapeType: shapeType, size: size, responsiveMode: responsiveMode, colorTheme: "none", disabled: true },
-                react_1.default.createElement("input", { type: "file", hidden: true, disabled: true, accept: accept, multiple: multipleMode === 'use' })));
+            return ((0, jsx_runtime_1.jsx)(S_LoadingUploadMainButton, __assign({ shapeType: shapeType, size: size, responsiveMode: responsiveMode, colorTheme: "none", disabled: true }, { children: (0, jsx_runtime_1.jsx)("input", { type: "file", hidden: true, disabled: true, accept: accept, multiple: multipleMode === 'use' }, void 0) }), void 0));
         }
         if (isSubmitting) {
-            return (react_1.default.createElement(S_SubmittingUploadMainButton, { shapeType: shapeType, fillType: fillType, styleTheme: styleTheme, size: size, responsiveMode: responsiveMode, colorTheme: colorTheme, disabled: false, isSubmitting: true },
-                react_1.default.createElement("input", { type: "file", hidden: true, disabled: true, accept: accept, multiple: multipleMode === 'use' }),
-                react_1.default.createElement(components_1.CircularProgress, { colorKey: submittingProgressColor(), size: size === 'rlarge' ? 'large' : size })));
+            return ((0, jsx_runtime_1.jsxs)(S_SubmittingUploadMainButton, __assign({ shapeType: shapeType, fillType: fillType, styleTheme: styleTheme, size: size, responsiveMode: responsiveMode, colorTheme: colorTheme, disabled: false, isSubmitting: true }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "file", hidden: true, disabled: true, accept: accept, multiple: multipleMode === 'use' }, void 0), (0, jsx_runtime_1.jsx)(components_1.CircularProgress, { colorKey: submittingProgressColor(), size: size === 'rlarge' ? 'large' : size }, void 0)] }), void 0));
         }
-        return (react_1.default.createElement(S_UploadMainButton, { "x-pds-name": "UploadMainButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", shapeType: shapeType, fillType: fillType, styleTheme: styleTheme, size: size, responsiveMode: responsiveMode, fontWeight: fontWeight, colorTheme: colorTheme, disabled: state === 'disabled' },
-            react_1.default.createElement("input", { type: "file", hidden: true, disabled: state === 'disabled', accept: accept, multiple: multipleMode === 'use', onChange: handleClick }),
-            size !== 'xsmall' && iconMode === 'left' && (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType }),
-                react_1.default.createElement(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }))),
-            react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: types_1.textStyles[size], singleLineMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor(), colorOverride: selectTextThemeColor(), ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }),
-            size !== 'xsmall' && iconMode === 'right' && (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }),
-                react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType })))));
+        return ((0, jsx_runtime_1.jsxs)(S_UploadMainButton, __assign({ "x-pds-name": "UploadMainButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", shapeType: shapeType, fillType: fillType, styleTheme: styleTheme, size: size, responsiveMode: responsiveMode, fontWeight: fontWeight, colorTheme: colorTheme, disabled: state === 'disabled' }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "file", hidden: true, disabled: state === 'disabled', accept: accept, multiple: multipleMode === 'use', onChange: handleClick }, void 0), size !== 'xsmall' && iconMode === 'left' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }, void 0)] }, void 0)), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: types_1.textStyles[size], singleLineMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor(), colorOverride: textColorOverride(), ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }, void 0), size !== 'xsmall' && iconMode === 'right' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType }, void 0)] }, void 0))] }), void 0));
     };
     return UploadMainButtonVariation();
 }
@@ -183,12 +239,12 @@ var line2 = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 =
     var theme = _a.theme;
     return theme.ui_cpnt_button_line_border_primary;
 });
-var line3 = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  border: solid 1px ", ";\n  background-color: ", ";\n\n  &:hover:not([disabled]) {\n    background-color: ", ";\n  }\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n"], ["\n  border: solid 1px ", ";\n  background-color: ", ";\n\n  &:hover:not([disabled]) {\n    background-color: ", ";\n  }\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n"])), function (_a) {
+var line3 = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  background-color: ", ";\n  border: solid 1px ", ";\n\n  &:hover:not([disabled]) {\n    background-color: ", ";\n  }\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n"], ["\n  background-color: ", ";\n  border: solid 1px ", ";\n\n  &:hover:not([disabled]) {\n    background-color: ", ";\n  }\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.ui_cpnt_button_line_border_darktheme_enabled;
+    return theme.ui_cpnt_button_line_base_darktheme_default;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.ui_cpnt_button_line_base_darktheme_default;
+    return theme.ui_cpnt_button_line_border_darktheme_enabled;
 }, function (_a) {
     var theme = _a.theme, isSubmitting = _a.isSubmitting;
     return !isSubmitting && theme.ui_cpnt_button_line_base_darktheme_hover;
@@ -207,7 +263,7 @@ var lineDisabled = (0, styled_components_1.css)(templateObject_11 || (templateOb
         ? theme.ui_cpnt_button_line_border_darktheme_disabled
         : theme.ui_cpnt_button_line_border_disabled;
 });
-var line = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  background-color: ", ";\n\n  &:hover:not([disabled]) {\n    background-color: ", ";\n  }\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n\n  &::before {\n    content: '';\n    display: none;\n  }\n  ", "\n\n  ", ";\n  ", "\n"], ["\n  background-color: ", ";\n\n  &:hover:not([disabled]) {\n    background-color: ", ";\n  }\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n\n  &::before {\n    content: '';\n    display: none;\n  }\n  ", "\n\n  ", ";\n  ", "\n"])), function (_a) {
+var line = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  background-color: ", ";\n\n  &:hover:not([disabled]) {\n    background-color: ", ";\n  }\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n\n  &::before {\n    content: '';\n    display: none;\n  }\n  ", "\n\n  ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n\n  &:hover:not([disabled]) {\n    background-color: ", ";\n  }\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n\n  &::before {\n    content: '';\n    display: none;\n  }\n  ", "\n\n  ", ";\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_button_line_base_default;
 }, function (_a) {
@@ -218,7 +274,18 @@ var line = (0, styled_components_1.css)(templateObject_12 || (templateObject_12
     return !isSubmitting && theme.ui_cpnt_button_line_base_pressed;
 }, transitionStyle_1.ButtonTransition, function (_a) {
     var colorTheme = _a.colorTheme;
-    return colorTheme && { none: none, line1: line1, line2: line2, line3: line3 }[colorTheme];
+    if (colorTheme === 'none') {
+        return none;
+    }
+    if (colorTheme === 'line1') {
+        return line1;
+    }
+    if (colorTheme === 'line2') {
+        return line2;
+    }
+    if (colorTheme === 'line3') {
+        return line3;
+    }
 }, function (_a) {
     var disabled = _a.disabled;
     return disabled && lineDisabled;
@@ -227,7 +294,11 @@ var primaryDisabled = (0, styled_components_1.css)(templateObject_13 || (templat
     var theme = _a.theme;
     return theme.ui_cpnt_button_fill_base_disabled;
 });
-var primary = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:hover:not([disabled])::before {\n    background-color: ", ";\n  }\n\n  &:active:not([disabled])::before {\n    background-color: ", ";\n  }\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:hover:not([disabled])::before {\n    background-color: ", ";\n  }\n\n  &:active:not([disabled])::before {\n    background-color: ", ";\n  }\n\n  ", "\n"])), function (_a) {
+var primary1 = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_primary_variation_base_enabled;
+});
+var primary = (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:hover:not([disabled])::before {\n    background-color: ", ";\n  }\n\n  &:active:not([disabled])::before {\n    background-color: ", ";\n  }\n\n  ", "\n  ", "\n"], ["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:hover:not([disabled])::before {\n    background-color: ", ";\n  }\n\n  &:active:not([disabled])::before {\n    background-color: ", ";\n  }\n\n  ", "\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_button_fill_base_primary;
 }, transitionStyle_1.ButtonTransition, function (_a) {
@@ -236,28 +307,51 @@ var primary = (0, styled_components_1.css)(templateObject_14 || (templateObject_
 }, function (_a) {
     var theme = _a.theme, isSubmitting = _a.isSubmitting;
     return !isSubmitting && theme.ui_cpnt_button_fill_on_base_pressed;
+}, function (_a) {
+    var colorTheme = _a.colorTheme;
+    return colorTheme === 'primary1' && primary1;
 }, function (_a) {
     var disabled = _a.disabled;
     return disabled && primaryDisabled;
 });
-var secondaryDisabled = (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+var secondary1Disabled = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_secondary_variation_base_default;
+});
+var secondaryDisabled = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  background-color: ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_button_line_base_hover;
+}, function (_a) {
+    var colorTheme = _a.colorTheme;
+    return colorTheme === 'secondary1' && secondary1Disabled;
 });
-var secondary = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:hover:not([disabled])::before {\n    background-color: ", ";\n  }\n\n  &:active:not([disabled])::before {\n    background-color: ", ";\n  }\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:hover:not([disabled])::before {\n    background-color: ", ";\n  }\n\n  &:active:not([disabled])::before {\n    background-color: ", ";\n  }\n\n  ", "\n"])), function (_a) {
+var secondary1 = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  background-color: ", ";\n\n  &:hover:not([disabled]) {\n    background-color: ", ";\n  }\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n\n  &::before {\n    content: '';\n    display: none;\n  }\n\n  ", "\n"], ["\n  background-color: ", ";\n\n  &:hover:not([disabled]) {\n    background-color: ", ";\n  }\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n\n  &::before {\n    content: '';\n    display: none;\n  }\n\n  ", "\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_secondary_variation_base_default;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_secondary_variation_base_hover;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_secondary_variation_base_pressed;
+}, transitionStyle_1.ButtonTransition);
+var secondary = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:hover:not([disabled])::before {\n    background-color: ", ";\n  }\n\n  &:active:not([disabled])::before {\n    background-color: ", ";\n  }\n\n  ", "\n  ", "\n"], ["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:hover:not([disabled])::before {\n    background-color: ", ";\n  }\n\n  &:active:not([disabled])::before {\n    background-color: ", ";\n  }\n\n  ", "\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_button_line_base_hover;
 }, transitionStyle_1.ButtonTransition, function (_a) {
     var theme = _a.theme, isSubmitting = _a.isSubmitting;
-    return !isSubmitting && theme.ui_transition_test_main_button_secondary_hover;
+    return !isSubmitting && theme.ui_cpnt_button_secondary_on_base_hover;
 }, function (_a) {
     var theme = _a.theme, isSubmitting = _a.isSubmitting;
-    return !isSubmitting && theme.ui_transition_test_main_button_secondary_active;
+    return !isSubmitting && theme.ui_cpnt_button_secondary_on_base_pressed;
+}, function (_a) {
+    var colorTheme = _a.colorTheme;
+    return colorTheme === 'secondary1' && secondary1;
 }, function (_a) {
     var disabled = _a.disabled;
     return disabled && secondaryDisabled;
 });
-var S_UploadMainButton = styled_components_1.default.label(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n\n  & > div {\n    font-weight: ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n\n  & > div {\n    font-weight: ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n  ", ";\n"])), function (_a) {
+var S_UploadMainButton = styled_components_1.default.label(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n\n  & > div {\n    font-weight: ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n\n  & > div {\n    font-weight: ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n  ", ";\n"])), function (_a) {
     var disabled = _a.disabled;
     return (disabled ? 'default' : 'pointer');
 }, function (_a) {
@@ -280,7 +374,7 @@ var S_UploadMainButton = styled_components_1.default.label(templateObject_17 ||
     var responsiveMode = _a.responsiveMode;
     return responsiveMode === 'use' && 'width: 100%';
 });
-var S_LoadingUploadMainButton = (0, styled_components_1.default)(S_UploadMainButton)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.skeletonLoadingStyle);
-var S_SubmittingUploadMainButton = (0, styled_components_1.default)(S_UploadMainButton)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  cursor: default;\n"], ["\n  cursor: default;\n"])));
+var S_LoadingUploadMainButton = (0, styled_components_1.default)(S_UploadMainButton)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.skeletonLoadingStyle);
+var S_SubmittingUploadMainButton = (0, styled_components_1.default)(S_UploadMainButton)(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  cursor: default;\n"], ["\n  cursor: default;\n"])));
 exports.default = UploadMainButton;
-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;
+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;

package/dist/src/desktop/components/UploadMainButton/types.d.ts

@@ -5,11 +5,6 @@ export declare const textStyles: {
     readonly small: "caption1Bold";
     readonly xsmall: "caption1Regular";
 };
-export declare const textThemeColorLines: {
-    readonly line1: "ui_cpnt_button_text_error";
-    readonly line2: "ui_cpnt_button_text_primary";
-    readonly line3: "ui_cpnt_button_text_darktheme_enabled";
-};
 export declare const iconFillTypeColors: {
     readonly fill: "ui_cpnt_button_icon_on_primary";
     readonly line: "ui_cpnt_button_icon_enabled";
@@ -18,8 +13,3 @@ export declare const iconStyleThemeColors: {
     readonly primary: "ui_cpnt_button_icon_on_primary";
     readonly secondary: "ui_cpnt_button_icon_primary";
 };
-export declare const iconColorThemeLineColors: {
-    readonly line1: "ui_cpnt_button_icon_error";
-    readonly line2: "ui_cpnt_button_icon_primary";
-    readonly line3: "ui_cpnt_button_icon_darktheme_enabled";
-};

package/dist/src/desktop/components/UploadMainButton/types.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.iconColorThemeLineColors = exports.iconStyleThemeColors = exports.iconFillTypeColors = exports.textThemeColorLines = exports.textStyles = void 0;
+exports.iconStyleThemeColors = exports.iconFillTypeColors = exports.textStyles = void 0;
 exports.textStyles = {
     rlarge: 'body1Bold',
     large: 'body1Bold',
@@ -8,11 +8,6 @@ exports.textStyles = {
     small: 'caption1Bold',
     xsmall: 'caption1Regular'
 };
-exports.textThemeColorLines = {
-    line1: 'ui_cpnt_button_text_error',
-    line2: 'ui_cpnt_button_text_primary',
-    line3: 'ui_cpnt_button_text_darktheme_enabled'
-};
 exports.iconFillTypeColors = {
     fill: 'ui_cpnt_button_icon_on_primary',
     line: 'ui_cpnt_button_icon_enabled'
@@ -21,8 +16,3 @@ exports.iconStyleThemeColors = {
     primary: 'ui_cpnt_button_icon_on_primary',
     secondary: 'ui_cpnt_button_icon_primary'
 };
-exports.iconColorThemeLineColors = {
-    line1: 'ui_cpnt_button_icon_error',
-    line2: 'ui_cpnt_button_icon_primary',
-    line3: 'ui_cpnt_button_icon_darktheme_enabled'
-};

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

@@ -1,12 +1,12 @@
-import React from 'react';
-import { PDSTextType } from '../../../common';
+/// <reference types="react" />
+import type { PDSTextType } from '../../../common';
 declare type UploadTextButtonProps = {
     text?: PDSTextType;
     size?: 'rlarge' | 'large' | 'medium' | 'small' | 'xsmall';
     responsiveMode?: 'none' | 'use';
     fontWeight?: 'bold' | 'regular';
     state?: 'normal' | 'disabled';
-    colorTheme?: 'none' | 'red' | 'grey_01' | 'white';
+    colorTheme?: 'none' | 'red' | 'grey_01' | 'white' | 'white2';
     accept?: string;
     multipleMode?: 'none' | 'use';
     onClick?: (e: React.ChangeEvent<HTMLInputElement>) => void;

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

@@ -3,6 +3,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -22,11 +33,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importStar(require("styled-components"));
 var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
 var TextLabel_1 = require("../TextLabel");
@@ -41,7 +49,8 @@ var textColor = {
     none: 'usrTextBrandPrimary',
     red: 'sysTextError',
     grey_01: 'sysTextPrimary',
-    white: 'sysTextWhite'
+    white: 'sysTextWhite',
+    white2: 'sysTextWhite'
 };
 function UploadTextButton(_a) {
     var text = _a.text, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, fontWeight = _a.fontWeight, _d = _a.state, state = _d === void 0 ? 'normal' : _d, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'none' : _e, _f = _a.accept, accept = _f === void 0 ? '*' : _f, _g = _a.multipleMode, multipleMode = _g === void 0 ? 'none' : _g, onClick = _a.onClick;
@@ -51,9 +60,7 @@ function UploadTextButton(_a) {
         }
         e.target.value = '';
     };
-    return (react_1.default.createElement(S_UploadTextButton, { "x-pds-name": "UploadTextButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, responsiveMode: responsiveMode, fontWeight: fontWeight, disabled: state === 'disabled' },
-        react_1.default.createElement("input", { type: "file", hidden: true, disabled: state === 'disabled', accept: accept, multiple: multipleMode === 'use', onChange: handleClick }),
-        react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor[colorTheme], singleLineMode: "use", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })));
+    return ((0, jsx_runtime_1.jsxs)(S_UploadTextButton, __assign({ "x-pds-name": "UploadTextButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, responsiveMode: responsiveMode, fontWeight: fontWeight, disabled: state === 'disabled', colorTheme: colorTheme }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "file", hidden: true, disabled: state === 'disabled', accept: accept, multiple: multipleMode === 'use', onChange: handleClick }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor[colorTheme], singleLineMode: "use", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }, void 0)] }), void 0));
 }
 var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 14px;\n  height: 48px;\n  width: ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"], ["\n  border-radius: 14px;\n  height: 48px;\n  width: ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"])), function (_a) {
     var size = _a.size;
@@ -62,18 +69,47 @@ var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 =
 var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 14px;\n  height: 40px;\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n"], ["\n  border-radius: 14px;\n  height: 40px;\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n"])));
 var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-radius: 10px;\n  height: 32px;\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"], ["\n  border-radius: 10px;\n  height: 32px;\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"])));
 var xsmall = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border-radius: 8px;\n  height: 24px;\n\n  & > div {\n    height: 24px;\n    line-height: 24px;\n  }\n"], ["\n  border-radius: 8px;\n  height: 24px;\n\n  & > div {\n    height: 24px;\n    line-height: 24px;\n  }\n"])));
-var S_UploadTextButton = styled_components_1.default.label(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n  padding: 0 ", ";\n\n  ", "\n\n  &:hover:not([disabled]) {\n    background-color: ", ";\n  }\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n\n  & > div {\n    font-weight: ", ";\n  }\n\n  ", ";\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n  padding: 0 ", ";\n\n  ", "\n\n  &:hover:not([disabled]) {\n    background-color: ", ";\n  }\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n\n  & > div {\n    font-weight: ", ";\n  }\n\n  ", ";\n  ", ";\n"])), function (_a) {
+var colorThemeDefault = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  &:hover:not([disabled]) {\n    background-color: ", ";\n  }\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n"], ["\n  &:hover:not([disabled]) {\n    background-color: ", ";\n  }\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_line_base_hover;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_line_base_pressed;
+});
+var colorThemeWhite = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  &:hover:not([disabled]) {\n    background-color: ", ";\n  }\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n"], ["\n  &:hover:not([disabled]) {\n    background-color: ", ";\n  }\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_white_base_hover;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_white_base_pressed;
+});
+var colorThemeWhite2 = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  &:hover:not([disabled]) {\n    background-color: ", ";\n  }\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n"], ["\n  &:hover:not([disabled]) {\n    background-color: ", ";\n  }\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_textbutton_white_variation_base_hover;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_textbutton_white_variation_base_pressed;
+});
+var S_UploadTextButton = styled_components_1.default.label(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n  padding: 0 ", ";\n\n  ", "\n\n  ", ";\n\n  & > div {\n    font-weight: ", ";\n  }\n\n  ", ";\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n  padding: 0 ", ";\n\n  ", "\n\n  ", ";\n\n  & > div {\n    font-weight: ", ";\n  }\n\n  ", ";\n  ", ";\n"])), function (_a) {
     var disabled = _a.disabled;
     return (disabled ? 'default' : 'pointer');
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
 }, transitionStyle_1.ButtonTransition, function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_button_line_base_hover;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_button_line_base_pressed;
+    var colorTheme = _a.colorTheme;
+    switch (colorTheme) {
+        case 'none':
+        case 'red':
+        case 'grey_01':
+            return colorThemeDefault;
+        case 'white':
+            return colorThemeWhite;
+        case 'white2':
+            return colorThemeWhite2;
+        default:
+            return colorThemeDefault;
+    }
 }, function (_a) {
     var theme = _a.theme, fontWeight = _a.fontWeight;
     return fontWeight &&
@@ -96,4 +132,4 @@ var S_UploadTextButton = styled_components_1.default.label(templateObject_5 || (
     return responsiveMode === 'use' && 'width: 100%';
 });
 exports.default = UploadTextButton;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { PDSTextType, PDSValueOption } from '../../../common';
+import type { PDSTextType, PDSValueOption } from '../../../common';
 declare type Props = {
     logoImageSrc?: string;
     titleText?: PDSTextType;

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

@@ -3,30 +3,23 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var react_router_dom_1 = require("react-router-dom");
 var styled_components_1 = __importDefault(require("styled-components"));
 var hybrid_1 = require("../../../hybrid");
@@ -70,23 +63,9 @@ function UserDesktopNavBar(_a) {
             onClickLoginInfo();
         }
     };
-    return (react_1.default.createElement(S_UserDesktopNavBar, { "x-pds-name": "UserDesktopNavBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop" },
-        react_1.default.createElement(S_NavBar, null,
-            logoImageSrc ? (react_1.default.createElement(S_Logo, { src: logoImageSrc, onClick: handleClickLogo, cursor: onClickLogo ? 'pointer' : 'default' })) : (react_1.default.createElement(S_TextWrapper, { onClick: handleClickLogo, cursor: onClickLogo ? 'pointer' : 'default' },
-                react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, singleLineMode: "use", styleTheme: "headingBold", colorTheme: "sysTextPrimary", ellipsisMode: "use", lineLimit: 1 }))),
-            menuMode === 'center_text' && (react_1.default.createElement(S_pApps, null,
-                visibleTexts.map(function (option) { return (react_1.default.createElement(S_VisiblePAppWrapper, { key: option.value, onClick: function () { return handleClick(option); } }, currentPathName.includes(option.value) ? (react_1.default.createElement(TextLabel_1.TextLabel, { text: option.text, styleTheme: "body1Bold", colorTheme: "sysTextPrimary", singleLineMode: "use" })) : (react_1.default.createElement(TextLabel_1.TextLabel, { text: option.text, styleTheme: "body1Regular", colorTheme: "sysTextSecondary", singleLineMode: "use" })))); }),
-                hiddenTexts.length > 0 && (react_1.default.createElement(S_MorePApps, null,
-                    react_1.default.createElement(S_IconButtonWrapper, { onClick: function () { return setIsContextMenuOpen(!isContextMenuOpen); } },
-                        react_1.default.createElement(IconButton_1.IconButton, { fillType: "fill", baseSize: "medium", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: 24, iconName: "ic_more", iconColorKey: "ui_cpnt_button_icon_default", shapeType: "rectangle", iconFillType: "fill" })),
-                    react_1.default.createElement(S_ContextMenuWrapper, null, isContextMenuOpen && (react_1.default.createElement(ContextMenu_1.ContextMenu, null, hiddenTexts.map(function (option) { return (react_1.default.createElement(ContextMenuItem_1.ContextMenuItem, { key: option.value, size: "medium", option: option, onClick: handleClick })); })))))))),
-            react_1.default.createElement(S_ProfileWrapper, null,
-                loginInfoMode === 'profile' && (react_1.default.createElement(S_ImageViewWrapper, { onClick: handleClickLoginInfo, cursor: onClickLoginInfo ? 'pointer' : 'default' },
-                    react_1.default.createElement(hybrid_1.ImageView, { src: userImageSrc, shapeType: "circular", width: 32, ratio: "1_1", scaleType: "cover", borderMode: "use" }))),
-                loginInfoMode === 'button' && (react_1.default.createElement(MainButton_1.MainButton, { size: "small", styleTheme: "secondary", text: mBtnText, onClick: handleClickLoginInfo })))),
-        dividerType === 'solid' && react_1.default.createElement(hybrid_1.Divider, null)));
+    return ((0, jsx_runtime_1.jsxs)(S_UserDesktopNavBar, __assign({ "x-pds-name": "UserDesktopNavBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [(0, jsx_runtime_1.jsxs)(S_NavBar, { children: [logoImageSrc ? ((0, jsx_runtime_1.jsx)(S_Logo, { src: logoImageSrc, onClick: handleClickLogo, cursor: onClickLogo ? 'pointer' : 'default' }, void 0)) : ((0, jsx_runtime_1.jsx)(S_TextWrapper, __assign({ onClick: handleClickLogo, cursor: onClickLogo ? 'pointer' : 'default' }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, singleLineMode: "use", styleTheme: "headingBold", colorTheme: "sysTextPrimary", ellipsisMode: "use", lineLimit: 1 }, void 0) }), void 0)), menuMode === 'center_text' && ((0, jsx_runtime_1.jsxs)(S_pApps, { children: [visibleTexts.map(function (option) { return ((0, jsx_runtime_1.jsx)(S_VisiblePAppWrapper, __assign({ onClick: function () { return handleClick(option); } }, { children: currentPathName.includes(option.value) ? ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: option.text, styleTheme: "body1Bold", colorTheme: "sysTextPrimary", singleLineMode: "use" }, void 0)) : ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: option.text, styleTheme: "body1Regular", colorTheme: "sysTextSecondary", singleLineMode: "use" }, void 0)) }), option.value)); }), hiddenTexts.length > 0 && ((0, jsx_runtime_1.jsxs)(S_MorePApps, { children: [(0, jsx_runtime_1.jsx)(S_IconButtonWrapper, __assign({ onClick: function () { return setIsContextMenuOpen(!isContextMenuOpen); } }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "medium", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: 24, iconName: "ic_more", iconColorKey: "ui_cpnt_button_icon_default", shapeType: "rectangle", iconFillType: "fill" }, void 0) }), void 0), (0, jsx_runtime_1.jsx)(S_ContextMenuWrapper, { children: isContextMenuOpen && ((0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { children: hiddenTexts.map(function (option) { return ((0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { size: "medium", option: option, onClick: handleClick }, option.value)); }) }, void 0)) }, void 0)] }, void 0))] }, void 0)), (0, jsx_runtime_1.jsxs)(S_ProfileWrapper, { children: [loginInfoMode === 'profile' && ((0, jsx_runtime_1.jsx)(S_ImageViewWrapper, __assign({ onClick: handleClickLoginInfo, cursor: onClickLoginInfo ? 'pointer' : 'default' }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { src: userImageSrc, shapeType: "circular", width: 32, ratio: "1_1", scaleType: "cover", borderMode: "use" }, void 0) }), void 0)), loginInfoMode === 'button' && ((0, jsx_runtime_1.jsx)(MainButton_1.MainButton, { size: "small", styleTheme: "secondary", text: mBtnText, onClick: handleClickLoginInfo }, void 0))] }, void 0)] }, void 0), dividerType === 'solid' && (0, jsx_runtime_1.jsx)(hybrid_1.Divider, {}, void 0)] }), void 0));
 }
-var S_UserDesktopNavBar = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 64px;\n  background-color: ", ";\n  min-width: 1200px;\n"], ["\n  height: 64px;\n  background-color: ", ";\n  min-width: 1200px;\n"])), function (_a) {
+var S_UserDesktopNavBar = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 64px;\n  min-width: 1200px;\n"], ["\n  background-color: ", ";\n  height: 64px;\n  min-width: 1200px;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_userdesktopnavbar_base_area;
 });
@@ -107,7 +86,7 @@ var S_NavBar = styled_components_1.default.div(templateObject_6 || (templateObje
 var S_pApps = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n"], ["\n  align-items: center;\n  display: flex;\n"])));
 var S_ContextMenuWrapper = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  left: 0;\n  position: absolute;\n  z-index: 2;\n\n  @media only screen and (max-width: 960px) {\n    left: unset;\n    right: 0;\n  }\n"], ["\n  left: 0;\n  position: absolute;\n  z-index: 2;\n\n  @media only screen and (max-width: 960px) {\n    left: unset;\n    right: 0;\n  }\n"])));
 var S_IconButtonWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject([""], [""])));
-var S_VisiblePAppWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  margin-right: ", ";\n  cursor: pointer;\n"], ["\n  margin-right: ", ";\n  cursor: pointer;\n"])), function (_a) {
+var S_VisiblePAppWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  cursor: pointer;\n  margin-right: ", ";\n"], ["\n  cursor: pointer;\n  margin-right: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingE;
 });