pds-dev-kit-web 1.3.28 → 1.4.2

package/dist/src/desktop/components/AdminList/BulkActionBar.d.ts

@@ -10,16 +10,16 @@ declare type Props = {
     dropdown1ValueArray?: PDSValueOption[];
     dropdown2ValueArray?: PDSValueOption[];
     dropdown3ValueArray?: PDSValueOption[];
-    mBtnMode: 'none' | 'mbtn_amount1' | 'mbtn_amount2' | 'mbtn_amount3';
-    mBtn1Text?: TFunctionResult;
-    mBtn2Text?: TFunctionResult;
-    mBtn3Text?: TFunctionResult;
+    tBtnMode?: 'none' | 'tbtn_amount1' | 'tbtn_amount2' | 'tbtn_amount3';
+    tBtn1Text?: TFunctionResult;
+    tBtn2Text?: TFunctionResult;
+    tBtn3Text?: TFunctionResult;
     onChangeDropdown1?: (value: PDSValueOption) => void;
     onChangeDropdown2?: (value: PDSValueOption) => void;
     onChangeDropdown3?: (value: PDSValueOption) => void;
-    onClickMBtn1?: () => void;
-    onClickMBtn2?: () => void;
-    onClickMBtn3?: () => void;
+    onClickTBtn1?: () => void;
+    onClickTBtn2?: () => void;
+    onClickTBtn3?: () => void;
 };
-declare function BulkActionBar({ itemCount, dropdownMode, dropdown1DefaultText, dropdown2DefaultText, dropdown3DefaultText, dropdown1ValueArray, dropdown2ValueArray, dropdown3ValueArray, mBtnMode, mBtn1Text, mBtn2Text, mBtn3Text, onChangeDropdown1, onChangeDropdown2, onChangeDropdown3, onClickMBtn1, onClickMBtn2, onClickMBtn3 }: Props): JSX.Element;
+declare function BulkActionBar({ itemCount, dropdownMode, dropdown1DefaultText, dropdown2DefaultText, dropdown3DefaultText, dropdown1ValueArray, dropdown2ValueArray, dropdown3ValueArray, tBtnMode, tBtn1Text, tBtn2Text, tBtn3Text, onChangeDropdown1, onChangeDropdown2, onChangeDropdown3, onClickTBtn1, onClickTBtn2, onClickTBtn3 }: Props): JSX.Element;
 export default BulkActionBar;

package/dist/src/desktop/components/AdminList/BulkActionBar.js

@@ -12,10 +12,10 @@ var react_i18next_1 = require("react-i18next");
 var styled_components_1 = __importDefault(require("styled-components"));
 var hybrid_1 = require("../../../hybrid");
 var Dropdown_1 = require("../Dropdown");
-var MainButton_1 = require("../MainButton");
+var TextButton_1 = require("../TextButton");
 var TextLabel_1 = require("../TextLabel");
 function BulkActionBar(_a) {
-    var _b = _a.itemCount, itemCount = _b === void 0 ? 1 : _b, _c = _a.dropdownMode, dropdownMode = _c === void 0 ? 'dropdown_amount1' : _c, dropdown1DefaultText = _a.dropdown1DefaultText, dropdown2DefaultText = _a.dropdown2DefaultText, dropdown3DefaultText = _a.dropdown3DefaultText, dropdown1ValueArray = _a.dropdown1ValueArray, dropdown2ValueArray = _a.dropdown2ValueArray, dropdown3ValueArray = _a.dropdown3ValueArray, _d = _a.mBtnMode, mBtnMode = _d === void 0 ? 'mbtn_amount1' : _d, mBtn1Text = _a.mBtn1Text, mBtn2Text = _a.mBtn2Text, mBtn3Text = _a.mBtn3Text, onChangeDropdown1 = _a.onChangeDropdown1, onChangeDropdown2 = _a.onChangeDropdown2, onChangeDropdown3 = _a.onChangeDropdown3, onClickMBtn1 = _a.onClickMBtn1, onClickMBtn2 = _a.onClickMBtn2, onClickMBtn3 = _a.onClickMBtn3;
+    var _b = _a.itemCount, itemCount = _b === void 0 ? 1 : _b, _c = _a.dropdownMode, dropdownMode = _c === void 0 ? 'dropdown_amount1' : _c, dropdown1DefaultText = _a.dropdown1DefaultText, dropdown2DefaultText = _a.dropdown2DefaultText, dropdown3DefaultText = _a.dropdown3DefaultText, dropdown1ValueArray = _a.dropdown1ValueArray, dropdown2ValueArray = _a.dropdown2ValueArray, dropdown3ValueArray = _a.dropdown3ValueArray, tBtnMode = _a.tBtnMode, tBtn1Text = _a.tBtn1Text, tBtn2Text = _a.tBtn2Text, tBtn3Text = _a.tBtn3Text, onChangeDropdown1 = _a.onChangeDropdown1, onChangeDropdown2 = _a.onChangeDropdown2, onChangeDropdown3 = _a.onChangeDropdown3, onClickTBtn1 = _a.onClickTBtn1, onClickTBtn2 = _a.onClickTBtn2, onClickTBtn3 = _a.onClickTBtn3;
     var t = (0, react_i18next_1.useTranslation)('translation').t;
     return (react_1.default.createElement(S_BulkActionBar, null,
         react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_e", spacingType: "width" }),
@@ -35,15 +35,15 @@ function BulkActionBar(_a) {
             dropdownMode === 'dropdown_amount3' && dropdown3ValueArray && (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),
                 react_1.default.createElement(Dropdown_1.Dropdown, { valueArray: dropdown3ValueArray, defaultValue: dropdown3DefaultText, onChange: onChangeDropdown3, size: "small", colorTheme: "dark" }))))),
-        mBtnMode !== 'none' && (react_1.default.createElement(react_1.default.Fragment, null,
+        tBtnMode !== 'none' && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),
-            react_1.default.createElement(MainButton_1.MainButton, { size: "small", fillType: "line", text: mBtn1Text, onClick: onClickMBtn1, colorTheme: "line3" }),
-            (mBtnMode === 'mbtn_amount2' || mBtnMode === 'mbtn_amount3') && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(TextButton_1.TextButton, { size: "small", text: tBtn1Text, onClick: onClickTBtn1, colorTheme: "grey_01" }),
+            (tBtnMode === 'tbtn_amount2' || tBtnMode === 'tbtn_amount3') && (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),
-                react_1.default.createElement(MainButton_1.MainButton, { size: "small", fillType: "line", text: mBtn2Text, onClick: onClickMBtn2, colorTheme: "line3" }))),
-            mBtnMode === 'mbtn_amount3' && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(TextButton_1.TextButton, { size: "small", text: tBtn2Text, onClick: onClickTBtn2, colorTheme: "grey_01" }))),
+            tBtnMode === 'tbtn_amount3' && (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),
-                react_1.default.createElement(MainButton_1.MainButton, { size: "small", fillType: "line", text: mBtn3Text, onClick: onClickMBtn3, colorTheme: "line3" }))))),
+                react_1.default.createElement(TextButton_1.TextButton, { size: "small", text: tBtn3Text, onClick: onClickTBtn3, colorTheme: "grey_01" }))))),
         react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_e", spacingType: "width" })));
 }
 var S_BulkActionBar = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  height: 56px;\n  min-height: 56px;\n"], ["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  height: 56px;\n  min-height: 56px;\n"])), function (_a) {

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

@@ -38,7 +38,7 @@ function AdminListHeader(_a) {
         headerBarTitleText && contentText && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b" }),
         contentText && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(S_ContentTextWrapper, null,
-                react_1.default.createElement(TextLabel_1.TextLabel, { text: contentText, styleTheme: "caption1Regular", colorTheme: "sysTextTertiary" })),
+                react_1.default.createElement(TextLabel_1.TextLabel, { text: contentText, styleTheme: "caption1Regular", colorTheme: "sysTextSecondary" })),
             react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d" }))),
         filterBar && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(S_FilterBarWrapper, null, filterBar),

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/Chip/Chip.js

@@ -85,7 +85,7 @@ function Chip(_a) {
     return react_1.default.createElement(S_ChipWrapper, null, chipType());
 }
 exports.default = Chip;
-var S_CategoryChoiceChip = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 16px;\n  box-sizing: border-box;\n  background-color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 32px;\n  padding-left: ", ";\n  padding-right: ", ";\n  gap: 4px;\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n  ", ";\n"], ["\n  border-radius: 16px;\n  box-sizing: border-box;\n  background-color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 32px;\n  padding-left: ", ";\n  padding-right: ", ";\n  gap: 4px;\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n  ", ";\n"])), function (_a) {
+var S_CategoryChoiceChip = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 16px;\n  box-sizing: border-box;\n  background-color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 32px;\n  padding-left: ", ";\n  padding-right: ", ";\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n  ", ";\n"], ["\n  border-radius: 16px;\n  box-sizing: border-box;\n  background-color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 32px;\n  padding-left: ", ";\n  padding-right: ", ";\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n  ", ";\n"])), function (_a) {
     var theme = _a.theme, isActive = _a.isActive;
     return isActive ? theme.ui_cpnt_chip_fill_base_active_01 : '';
 }, function (_a) {
@@ -103,11 +103,9 @@ var S_CategoryChoiceChip = styled_components_1.default.div(templateObject_1 || (
 });
 var S_CategoryIconWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
     var theme = _a.theme, isActive = _a.isActive;
-    return isActive
-        ? "margin-left: " + theme.spacing.spacingA + "px"
-        : "margin-right: " + theme.spacing.spacingA + "px";
+    return isActive ? "margin-left: " + theme.spacing.spacingA : "margin-right: " + theme.spacing.spacingA;
 });
-var S_InfoChip = styled_components_1.default.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 12px;\n  display: flex;\n  height: 24px;\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 12px;\n  display: flex;\n  height: 24px;\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
+var S_InfoChip = styled_components_1.default.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 12px;\n  box-sizing: border-box;\n  display: flex;\n  height: 24px;\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 12px;\n  box-sizing: border-box;\n  display: flex;\n  height: 24px;\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_chip_fill_base_inactive;
 }, function (_a) {
@@ -117,7 +115,7 @@ var S_InfoChip = styled_components_1.default.span(templateObject_3 || (templateO
     var theme = _a.theme;
     return theme.spacing.spacingC;
 });
-var S_RemovableChip = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 16px;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n  cursor: pointer;\n"], ["\n  background-color: ", ";\n  border-radius: 16px;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n  cursor: pointer;\n"])), function (_a) {
+var S_RemovableChip = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 16px;\n  box-sizing: border-box;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n  cursor: pointer;\n"], ["\n  background-color: ", ";\n  border-radius: 16px;\n  box-sizing: border-box;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n  cursor: pointer;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_chip_fill_base_inactive;
 }, function (_a) {
@@ -131,7 +129,7 @@ var S_XIconWrapper = styled_components_1.default.div(templateObject_5 || (templa
     var theme = _a.theme;
     return theme.spacing.spacingB;
 });
-var S_FilterSingleChip = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  border-radius: 16px;\n  background-color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 32px;\n  padding-left: ", ";\n  padding-right: ", ";\n  cursor: pointer;\n"], ["\n  border-radius: 16px;\n  background-color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 32px;\n  padding-left: ", ";\n  padding-right: ", ";\n  cursor: pointer;\n"])), function (_a) {
+var S_FilterSingleChip = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 16px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 32px;\n  padding-left: ", ";\n  padding-right: ", ";\n  cursor: pointer;\n"], ["\n  background-color: ", ";\n  border-radius: 16px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 32px;\n  padding-left: ", ";\n  padding-right: ", ";\n  cursor: pointer;\n"])), function (_a) {
     var theme = _a.theme, isActive = _a.isActive;
     return isActive ? theme.ui_cpnt_chip_fill_base_active_01 : theme.ui_cpnt_chip_fill_base_inactive;
 }, function (_a) {
@@ -145,14 +143,14 @@ var S_FilterIconWrapper = styled_components_1.default.div(templateObject_7 || (t
     var theme = _a.theme;
     return theme.spacing.spacingA;
 });
-var S_LabelChip = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  border: 1px solid ", ";\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 20px;\n  padding: 0 ", ";\n"], ["\n  border: 1px solid ", ";\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 20px;\n  padding: 0 ", ";\n"])), function (_a) {
+var S_LabelChip = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  border: 1px solid ", ";\n  border-radius: 10px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 20px;\n  padding: 0 ", ";\n"], ["\n  border: 1px solid ", ";\n  border-radius: 10px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 20px;\n  padding: 0 ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_chip_line_border_01;
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
 });
-var S_TimeChip = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 10px;\n  height: 20px;\n  padding: 0 ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  background-color: ", ";\n  border-radius: 10px;\n  height: 20px;\n  padding: 0 ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_a) {
+var S_TimeChip = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 10px;\n  box-sizing: border-box;\n  height: 20px;\n  padding: 0 ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  background-color: ", ";\n  border-radius: 10px;\n  box-sizing: border-box;\n  height: 20px;\n  padding: 0 ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_chip_base_playtime;
 }, function (_a) {

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-sizing: border-box;\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-sizing: border-box;\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/ContextMenuItem/ContextMenuItem.js

@@ -67,7 +67,7 @@ var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 =
     var theme = _a.theme;
     return theme.spacing.spacingD;
 });
-var S_ContextMenuItem = styled_components_1.default.li(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  cursor: pointer;\n  display: flex;\n\n  ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  cursor: pointer;\n  display: flex;\n\n  ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  ", ";\n"])), function (_a) {
+var S_ContextMenuItem = styled_components_1.default.li(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n\n  ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n\n  ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  ", ";\n"])), function (_a) {
     var theme = _a.theme, selected = _a.selected;
     return selected
         ? theme.ui_cpnt_contextmenu_menu_base_selected

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-sizing: border-box;\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-sizing: border-box;\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;