pds-dev-kit-web 1.4.4 → 1.4.7

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

@@ -20,6 +20,7 @@ export declare const TEMPLATES_DATA: {
         secondaryMenuOptions: {
             showMenuAsIcon: boolean;
             maxLength: number;
+            style: {};
         };
     };
     W1_0002: {
@@ -36,8 +37,11 @@ export declare const TEMPLATES_DATA: {
         secondaryMenuOptions: {
             showMenuAsIcon: boolean;
             maxLength: number;
+            style: {};
+        };
+        userProfileOptions: {
+            style: {};
         };
-        userProfileOptions: {};
     };
     W1_0003: {
         gridTemplate: string;
@@ -55,7 +59,9 @@ export declare const TEMPLATES_DATA: {
             maxLength: number;
             style: {};
         };
-        userProfileOptions: {};
+        userProfileOptions: {
+            style: {};
+        };
     };
     W1_0004: {
         gridTemplate: string;
@@ -73,8 +79,11 @@ export declare const TEMPLATES_DATA: {
         secondaryMenuOptions: {
             showMenuAsIcon: boolean;
             maxLength: number;
+            style: {};
+        };
+        userProfileOptions: {
+            style: {};
         };
-        userProfileOptions: {};
     };
     W1_0005: {
         gridTemplate: string;
@@ -96,6 +105,8 @@ export declare const TEMPLATES_DATA: {
                 justifyContent: string;
             };
         };
-        userProfileOptions: {};
+        userProfileOptions: {
+            style: {};
+        };
     };
 };

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

@@ -22,7 +22,8 @@ exports.TEMPLATES_DATA = {
         },
         secondaryMenuOptions: {
             showMenuAsIcon: false,
-            maxLength: 0
+            maxLength: 0,
+            style: {}
         }
     },
     W1_0002: {
@@ -38,9 +39,12 @@ exports.TEMPLATES_DATA = {
         },
         secondaryMenuOptions: {
             showMenuAsIcon: false,
-            maxLength: 0
+            maxLength: 0,
+            style: {}
         },
-        userProfileOptions: {}
+        userProfileOptions: {
+            style: {}
+        }
     },
     W1_0003: {
         gridTemplate: 'BRAND_LOGO PRIMARY_MENU SECONDARY_MENU USER_PROFILE',
@@ -58,7 +62,9 @@ exports.TEMPLATES_DATA = {
             maxLength: 3,
             style: {}
         },
-        userProfileOptions: {}
+        userProfileOptions: {
+            style: {}
+        }
     },
     W1_0004: {
         gridTemplate: 'BRAND_LOGO PRIMARY_MENU USER_PROFILE',
@@ -75,19 +81,22 @@ exports.TEMPLATES_DATA = {
         },
         secondaryMenuOptions: {
             showMenuAsIcon: false,
-            maxLength: 0
+            maxLength: 0,
+            style: {}
         },
-        userProfileOptions: {}
+        userProfileOptions: {
+            style: {}
+        }
     },
     W1_0005: {
-        gridTemplate: 'BRAND_LOGO SECONDARY_MENU PRIMARY_MENU USER_PROFILE',
+        gridTemplate: 'BRAND_LOGO PRIMARY_MENU SECONDARY_MENU USER_PROFILE',
         gridStyle: {
-            gridTemplateColumns: 'max-content max-content auto max-content'
+            gridTemplateColumns: 'max-content auto max-content max-content'
         },
         showSecondaryMenu: true,
         primaryMenuOptions: {
             showMenuAsIcon: false,
-            maxLength: 5,
+            maxLength: 99,
             style: {
                 justifyContent: 'flex-end'
             }
@@ -96,9 +105,11 @@ exports.TEMPLATES_DATA = {
             showMenuAsIcon: true,
             maxLength: 3,
             style: {
-                justifyContent: 'flex-start'
+                justifyContent: 'flex-end'
             }
         },
-        userProfileOptions: {}
+        userProfileOptions: {
+            style: {}
+        }
     }
 };

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

@@ -1,2 +1,2 @@
-export { default as MenuDesignTemplates } from './MenuDesignTemplates';
+export { default as DynamicDesktopNavBarTemplates } from './DynamicDesktopNavBarTemplates';
 export * from './types';

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

@@ -13,7 +13,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MenuDesignTemplates = void 0;
-var MenuDesignTemplates_1 = require("./MenuDesignTemplates");
-Object.defineProperty(exports, "MenuDesignTemplates", { enumerable: true, get: function () { return __importDefault(MenuDesignTemplates_1).default; } });
+exports.DynamicDesktopNavBarTemplates = void 0;
+var DynamicDesktopNavBarTemplates_1 = require("./DynamicDesktopNavBarTemplates");
+Object.defineProperty(exports, "DynamicDesktopNavBarTemplates", { enumerable: true, get: function () { return __importDefault(DynamicDesktopNavBarTemplates_1).default; } });
 __exportStar(require("./types"), exports);

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

@@ -39,9 +39,9 @@ function StatusBlock(_a) {
     return (react_1.default.createElement(S_StatusBlock, { size: size, state: state, "$width": width },
         react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textLabelStyleThemeObj[size], textAlign: "center", singleLineMode: "use", colorTheme: "sysTextWhite" })));
 }
-var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 8px;\n  height: 48px;\n"], ["\n  border-radius: 8px;\n  height: 48px;\n"])));
-var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 8px;\n  height: 40px;\n"], ["\n  border-radius: 8px;\n  height: 40px;\n"])));
-var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-radius: 8px;\n  height: 32px;\n"], ["\n  border-radius: 8px;\n  height: 32px;\n"])));
+var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 14px;\n  height: 48px;\n"], ["\n  border-radius: 14px;\n  height: 48px;\n"])));
+var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 14px;\n  height: 40px;\n"], ["\n  border-radius: 14px;\n  height: 40px;\n"])));
+var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-radius: 10px;\n  height: 32px;\n"], ["\n  border-radius: 10px;\n  height: 32px;\n"])));
 var basic = (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_statusblock_basic;

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

@@ -71,7 +71,7 @@ function TextButton(_a) {
             onClick();
         }
     };
-    return (react_1.default.createElement(S_Button, __assign({}, rest, { size: size, responsiveMode: responsiveMode, onClick: handleClick, type: type, fontWeight: fontWeight, disabled: state === 'disabled', state: state }),
+    return (react_1.default.createElement(S_Button, __assign({}, rest, { size: size, responsiveMode: responsiveMode, onClick: handleClick, type: type, fontWeight: fontWeight, disabled: state === 'disabled', state: state, colorTheme: colorTheme }),
         react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor[colorTheme], singleLineMode: "use" })));
 }
 var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 14px;\n  height: 48px;\n  ", ";\n"], ["\n  border-radius: 14px;\n  height: 48px;\n  ", ";\n"])), function (_a) {
@@ -85,11 +85,15 @@ var S_Button = styled_components_1.default.button(templateObject_5 || (templateO
     var state = _a.state;
     return (state === 'normal' ? 'pointer' : 'default');
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_button_line_base_hover;
+    var theme = _a.theme, colorTheme = _a.colorTheme;
+    return colorTheme === 'white'
+        ? theme.ui_cpnt_button_white_base_hover
+        : theme.ui_cpnt_button_line_base_hover;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_button_line_base_pressed;
+    var theme = _a.theme, colorTheme = _a.colorTheme;
+    return colorTheme === 'white'
+        ? theme.ui_cpnt_button_white_base_pressed
+        : theme.ui_cpnt_button_line_base_pressed;
 }, function (_a) {
     var size = _a.size;
     return size &&

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { PDSTabItemOption } from '../../../common/types';
+export declare type ItemType = PDSTabItemOption;
+declare type UserDesktopSideTabProps = {
+    itemArray: ItemType[];
+};
+declare function UserDesktopSideTab({ itemArray }: UserDesktopSideTabProps): JSX.Element;
+export default UserDesktopSideTab;

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

@@ -0,0 +1,36 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var TextLabel_1 = require("../TextLabel");
+function UserDesktopSideTab(_a) {
+    var itemArray = _a.itemArray;
+    var handleClickTabItem = function (item, e) {
+        if (item.onClick) {
+            item.onClick(e);
+        }
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null, itemArray.map(function (item, index) {
+        return (react_1.default.createElement(S_TabWrapper, { key: index, onClick: function (e) { return handleClickTabItem(item, e); } },
+            react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, lineLimit: 1, ellipsisMode: "use", styleTheme: "headingBold", colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use", wordBreak: "break_all" })));
+    })));
+}
+var S_TabWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  cursor: pointer;\n  display: flex;\n  height: 56px;\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  cursor: pointer;\n  display: flex;\n  height: 56px;\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_userdesktopsidetab_base_area;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingD;
+});
+exports.default = UserDesktopSideTab;
+var templateObject_1;

package/dist/src/desktop/components/UserDesktopSideTab/index.d.ts

@@ -0,0 +1 @@
+export { default as UserDesktopSideTab } from './UserDesktopSideTab';

package/dist/src/desktop/components/UserDesktopSideTab/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UserDesktopSideTab = void 0;
+var UserDesktopSideTab_1 = require("./UserDesktopSideTab");
+Object.defineProperty(exports, "UserDesktopSideTab", { enumerable: true, get: function () { return __importDefault(UserDesktopSideTab_1).default; } });

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

@@ -35,12 +35,12 @@ function UserDesktopTabBar(_a) {
     var history = (0, react_router_dom_1.useHistory)();
     var pathname = (0, react_router_dom_1.useLocation)().pathname;
     if (itemArray) {
-        var handleClickTabItem_1 = function (item) {
+        var handleClickTabItem_1 = function (item, e) {
             if (item.onClick) {
-                item.onClick();
+                item.onClick(e);
             }
         };
-        return (react_1.default.createElement(S_TabBar, null, itemArray.map(function (item, index) { return (react_1.default.createElement(S_TabWrapper, { key: index, isActive: item.isActive, styleTheme: styleTheme, text: item.title, onClick: function () { return handleClickTabItem_1(item); } },
+        return (react_1.default.createElement(S_TabBar, null, itemArray.map(function (item, index) { return (react_1.default.createElement(S_TabWrapper, { key: index, isActive: item.isActive, styleTheme: styleTheme, text: item.title, onClick: function (e) { return handleClickTabItem_1(item, e); } },
             react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: item.isActive ? 'body2Bold' : 'body2Regular', colorTheme: item.isActive ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }))); })));
     }
     if (textArray) {

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

@@ -16,7 +16,7 @@ import { DesktopAlertDialog } from './DesktopAlertDialog';
 import { DesktopHeaderBar } from './DesktopHeaderBar';
 import { DesktopTabBar } from './DesktopTabBar';
 import { Dropdown } from './Dropdown';
-import { DynamicDesktopNavBar } from './DynamicDesktopNavBar';
+import { DynamicDesktopNavBar, DynamicDesktopNavBarTemplates } from './DynamicDesktopNavBar';
 import { EditApplyTextField } from './EditApplyTextField';
 import { FilterBar } from './FilterBar';
 import { FloatingActionButton } from './FloatingActionButton';
@@ -37,5 +37,6 @@ import { UploadIconButton } from './UploadIconButton';
 import { UploadMainButton } from './UploadMainButton';
 import { UploadTextButton } from './UploadTextButton';
 import { UserDesktopNavBar } from './UserDesktopNavBar';
+import { UserDesktopSideTab } from './UserDesktopSideTab';
 import { UserDesktopTabBar } from './UserDesktopTabBar';
-export { AdminList, AdminListHeader, AdminListItem, BasicFormGroup, BasicList, BasicListItem, BlogTextField, BodyTextGroup, Card, CardList, Checkbox, Chip, ContextMenu, ContextMenuItem, DesktopAlertDialog, DesktopHeaderBar, DesktopTabBar, Dropdown, DynamicDesktopNavBar, EditApplyTextField, FilterBar, FloatingActionButton, Hero, HorizontalFormGroup, IconButton, ImageSlide, MainButton, PageTitleTextGroup, Radio, ReactionButton, Select, StatusBlock, TextButton, TextField, TextLabel, UploadIconButton, UploadMainButton, UploadTextButton, UserDesktopNavBar, UserDesktopTabBar };
+export { AdminList, AdminListHeader, AdminListItem, BasicFormGroup, BasicList, BasicListItem, BlogTextField, BodyTextGroup, Card, CardList, Checkbox, Chip, ContextMenu, ContextMenuItem, DesktopAlertDialog, DesktopHeaderBar, DesktopTabBar, Dropdown, DynamicDesktopNavBar, DynamicDesktopNavBarTemplates, EditApplyTextField, FilterBar, FloatingActionButton, Hero, HorizontalFormGroup, IconButton, ImageSlide, MainButton, PageTitleTextGroup, Radio, ReactionButton, Select, StatusBlock, TextButton, TextField, TextLabel, UploadIconButton, UploadMainButton, UploadTextButton, UserDesktopNavBar, UserDesktopTabBar, UserDesktopSideTab };

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UserDesktopTabBar = exports.UserDesktopNavBar = exports.UploadTextButton = exports.UploadMainButton = exports.UploadIconButton = exports.TextLabel = exports.TextField = exports.TextButton = exports.StatusBlock = exports.Select = exports.ReactionButton = exports.Radio = exports.PageTitleTextGroup = exports.MainButton = exports.ImageSlide = exports.IconButton = exports.HorizontalFormGroup = exports.Hero = exports.FloatingActionButton = exports.FilterBar = exports.EditApplyTextField = exports.DynamicDesktopNavBar = exports.Dropdown = exports.DesktopTabBar = exports.DesktopHeaderBar = exports.DesktopAlertDialog = exports.ContextMenuItem = exports.ContextMenu = exports.Chip = exports.Checkbox = exports.CardList = exports.Card = exports.BodyTextGroup = exports.BlogTextField = exports.BasicListItem = exports.BasicList = exports.BasicFormGroup = exports.AdminListItem = exports.AdminListHeader = exports.AdminList = void 0;
+exports.UserDesktopSideTab = exports.UserDesktopTabBar = exports.UserDesktopNavBar = exports.UploadTextButton = exports.UploadMainButton = exports.UploadIconButton = exports.TextLabel = exports.TextField = exports.TextButton = exports.StatusBlock = exports.Select = exports.ReactionButton = exports.Radio = exports.PageTitleTextGroup = exports.MainButton = exports.ImageSlide = exports.IconButton = exports.HorizontalFormGroup = exports.Hero = exports.FloatingActionButton = exports.FilterBar = exports.EditApplyTextField = exports.DynamicDesktopNavBarTemplates = exports.DynamicDesktopNavBar = exports.Dropdown = exports.DesktopTabBar = exports.DesktopHeaderBar = exports.DesktopAlertDialog = exports.ContextMenuItem = exports.ContextMenu = exports.Chip = exports.Checkbox = exports.CardList = exports.Card = exports.BodyTextGroup = exports.BlogTextField = exports.BasicListItem = exports.BasicList = exports.BasicFormGroup = exports.AdminListItem = exports.AdminListHeader = exports.AdminList = void 0;
 var AdminList_1 = require("./AdminList");
 Object.defineProperty(exports, "AdminList", { enumerable: true, get: function () { return AdminList_1.AdminList; } });
 var AdminListHeader_1 = require("./AdminListHeader");
@@ -39,6 +39,7 @@ var Dropdown_1 = require("./Dropdown");
 Object.defineProperty(exports, "Dropdown", { enumerable: true, get: function () { return Dropdown_1.Dropdown; } });
 var DynamicDesktopNavBar_1 = require("./DynamicDesktopNavBar");
 Object.defineProperty(exports, "DynamicDesktopNavBar", { enumerable: true, get: function () { return DynamicDesktopNavBar_1.DynamicDesktopNavBar; } });
+Object.defineProperty(exports, "DynamicDesktopNavBarTemplates", { enumerable: true, get: function () { return DynamicDesktopNavBar_1.DynamicDesktopNavBarTemplates; } });
 var EditApplyTextField_1 = require("./EditApplyTextField");
 Object.defineProperty(exports, "EditApplyTextField", { enumerable: true, get: function () { return EditApplyTextField_1.EditApplyTextField; } });
 var FilterBar_1 = require("./FilterBar");
@@ -79,5 +80,7 @@ var UploadTextButton_1 = require("./UploadTextButton");
 Object.defineProperty(exports, "UploadTextButton", { enumerable: true, get: function () { return UploadTextButton_1.UploadTextButton; } });
 var UserDesktopNavBar_1 = require("./UserDesktopNavBar");
 Object.defineProperty(exports, "UserDesktopNavBar", { enumerable: true, get: function () { return UserDesktopNavBar_1.UserDesktopNavBar; } });
+var UserDesktopSideTab_1 = require("./UserDesktopSideTab");
+Object.defineProperty(exports, "UserDesktopSideTab", { enumerable: true, get: function () { return UserDesktopSideTab_1.UserDesktopSideTab; } });
 var UserDesktopTabBar_1 = require("./UserDesktopTabBar");
 Object.defineProperty(exports, "UserDesktopTabBar", { enumerable: true, get: function () { return UserDesktopTabBar_1.UserDesktopTabBar; } });

package/dist/src/desktop/index.d.ts

@@ -9,7 +9,7 @@ import { LayoutWT } from './layout/LayoutWT';
 import { GlobalMenuContainer as WTGlobalMenuContainer } from './layout/LayoutWT/Containers';
 import { ContainersBox as WTContainersBox } from './layout/LayoutWT/ContainersBox';
 export { LayoutWT, WTGlobalMenuContainer, WTContainersBox };
-import { AdminList as D_AdminList, AdminListHeader as D_AdminListHeader, AdminListItem as D_AdminListItem, BasicFormGroup as D_BasicFormGroup, BasicList as D_BasicList, BasicListItem as D_BasicListItem, BlogTextField as D_BlogTextField, BodyTextGroup as D_BodyTextGroup, Card as D_Card, CardList as D_CardList, Checkbox as D_Checkbox, Chip as D_Chip, ContextMenu as D_ContextMenu, ContextMenuItem as D_ContextMenuItem, DesktopAlertDialog as D_DesktopAlertDialog, DesktopHeaderBar as D_DesktopHeaderBar, DesktopTabBar as D_DesktopTabBar, Dropdown as D_Dropdown, DynamicDesktopNavBar as D_DynamicDesktopNavBar, EditApplyTextField as D_EditApplyTextField, FilterBar as D_FilterBar, FloatingActionButton as D_FloatingActionButton, Hero as D_Hero, HorizontalFormGroup as D_HorizontalFormGroup, IconButton as D_IconButton, ImageSlide as D_ImageSlide, MainButton as D_MainButton, PageTitleTextGroup as D_PageTitleTextGroup, Radio as D_Radio, ReactionButton as D_ReactionButton, Select as D_Select, StatusBlock as D_StatusBlock, TextButton as D_TextButton, TextField as D_TextField, TextLabel as D_TextLabel, UploadIconButton as D_UploadIconButton, UploadMainButton as D_UploadMainButton, UploadTextButton as D_UploadTextButton, UserDesktopNavBar as D_UserDesktopNavBar, UserDesktopTabBar as D_UserDesktopTabBar } from './components';
-export { D_AdminList, D_AdminListHeader, D_AdminListItem, D_BasicFormGroup, D_BasicList, D_BasicListItem, D_BlogTextField, D_BodyTextGroup, D_Card, D_CardList, D_Checkbox, D_Chip, D_ContextMenu, D_ContextMenuItem, D_DesktopAlertDialog, D_DesktopHeaderBar, D_DesktopTabBar, D_Dropdown, D_DynamicDesktopNavBar, D_EditApplyTextField, D_FilterBar, D_FloatingActionButton, D_Hero, D_HorizontalFormGroup, D_IconButton, D_ImageSlide, D_MainButton, D_PageTitleTextGroup, D_Radio, D_Select, D_ReactionButton, D_StatusBlock, D_TextButton, D_TextField, D_TextLabel, D_UploadIconButton, D_UploadMainButton, D_UploadTextButton, D_UserDesktopNavBar, D_UserDesktopTabBar };
+import { AdminList as D_AdminList, AdminListHeader as D_AdminListHeader, AdminListItem as D_AdminListItem, BasicFormGroup as D_BasicFormGroup, BasicList as D_BasicList, BasicListItem as D_BasicListItem, BlogTextField as D_BlogTextField, BodyTextGroup as D_BodyTextGroup, Card as D_Card, CardList as D_CardList, Checkbox as D_Checkbox, Chip as D_Chip, ContextMenu as D_ContextMenu, ContextMenuItem as D_ContextMenuItem, DesktopAlertDialog as D_DesktopAlertDialog, DesktopHeaderBar as D_DesktopHeaderBar, DesktopTabBar as D_DesktopTabBar, Dropdown as D_Dropdown, DynamicDesktopNavBar as D_DynamicDesktopNavBar, DynamicDesktopNavBarTemplates as D_DynamicDesktopNavBarTemplates, EditApplyTextField as D_EditApplyTextField, FilterBar as D_FilterBar, FloatingActionButton as D_FloatingActionButton, Hero as D_Hero, HorizontalFormGroup as D_HorizontalFormGroup, IconButton as D_IconButton, ImageSlide as D_ImageSlide, MainButton as D_MainButton, PageTitleTextGroup as D_PageTitleTextGroup, Radio as D_Radio, ReactionButton as D_ReactionButton, Select as D_Select, StatusBlock as D_StatusBlock, TextButton as D_TextButton, TextField as D_TextField, TextLabel as D_TextLabel, UploadIconButton as D_UploadIconButton, UploadMainButton as D_UploadMainButton, UploadTextButton as D_UploadTextButton, UserDesktopNavBar as D_UserDesktopNavBar, UserDesktopTabBar as D_UserDesktopTabBar, UserDesktopSideTab as D_UserDesktopSideTab } from './components';
+export { D_AdminList, D_AdminListHeader, D_AdminListItem, D_BasicFormGroup, D_BasicList, D_BasicListItem, D_BlogTextField, D_BodyTextGroup, D_Card, D_CardList, D_Checkbox, D_Chip, D_ContextMenu, D_ContextMenuItem, D_DesktopAlertDialog, D_DesktopHeaderBar, D_DesktopTabBar, D_Dropdown, D_DynamicDesktopNavBar, D_DynamicDesktopNavBarTemplates, D_EditApplyTextField, D_FilterBar, D_FloatingActionButton, D_Hero, D_HorizontalFormGroup, D_IconButton, D_ImageSlide, D_MainButton, D_PageTitleTextGroup, D_Radio, D_Select, D_ReactionButton, D_StatusBlock, D_TextButton, D_TextField, D_TextLabel, D_UploadIconButton, D_UploadMainButton, D_UploadTextButton, D_UserDesktopNavBar, D_UserDesktopTabBar, D_UserDesktopSideTab };
 import { DesktopBasicModal as D_DesktopBasicModal, DesktopHeadlessModal as D_DesktopHeadlessModal } from './panels';
 export { D_DesktopBasicModal, D_DesktopHeadlessModal };

package/dist/src/desktop/index.js

@@ -2,7 +2,8 @@
 /* eslint-disable import/order */
 /* eslint-disable import/first */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.D_DesktopHeadlessModal = exports.D_DesktopBasicModal = exports.D_UserDesktopTabBar = exports.D_UserDesktopNavBar = exports.D_UploadTextButton = exports.D_UploadMainButton = exports.D_UploadIconButton = exports.D_TextLabel = exports.D_TextField = exports.D_TextButton = exports.D_StatusBlock = exports.D_ReactionButton = exports.D_Select = exports.D_Radio = exports.D_PageTitleTextGroup = exports.D_MainButton = exports.D_ImageSlide = exports.D_IconButton = exports.D_HorizontalFormGroup = exports.D_Hero = exports.D_FloatingActionButton = exports.D_FilterBar = exports.D_EditApplyTextField = exports.D_DynamicDesktopNavBar = exports.D_Dropdown = exports.D_DesktopTabBar = exports.D_DesktopHeaderBar = exports.D_DesktopAlertDialog = exports.D_ContextMenuItem = exports.D_ContextMenu = exports.D_Chip = exports.D_Checkbox = exports.D_CardList = exports.D_Card = exports.D_BodyTextGroup = exports.D_BlogTextField = exports.D_BasicListItem = exports.D_BasicList = exports.D_BasicFormGroup = exports.D_AdminListItem = exports.D_AdminListHeader = exports.D_AdminList = exports.WTContainersBox = exports.WTGlobalMenuContainer = exports.LayoutWT = exports.WSContainersBox = exports.WSGlobalMenuContainer = exports.LayoutWS = exports.WFContainersBox = exports.LayoutWF = void 0;
+exports.D_UserDesktopSideTab = exports.D_UserDesktopTabBar = exports.D_UserDesktopNavBar = exports.D_UploadTextButton = exports.D_UploadMainButton = exports.D_UploadIconButton = exports.D_TextLabel = exports.D_TextField = exports.D_TextButton = exports.D_StatusBlock = exports.D_ReactionButton = exports.D_Select = exports.D_Radio = exports.D_PageTitleTextGroup = exports.D_MainButton = exports.D_ImageSlide = exports.D_IconButton = exports.D_HorizontalFormGroup = exports.D_Hero = exports.D_FloatingActionButton = exports.D_FilterBar = exports.D_EditApplyTextField = exports.D_DynamicDesktopNavBarTemplates = exports.D_DynamicDesktopNavBar = exports.D_Dropdown = exports.D_DesktopTabBar = exports.D_DesktopHeaderBar = exports.D_DesktopAlertDialog = exports.D_ContextMenuItem = exports.D_ContextMenu = exports.D_Chip = exports.D_Checkbox = exports.D_CardList = exports.D_Card = exports.D_BodyTextGroup = exports.D_BlogTextField = exports.D_BasicListItem = exports.D_BasicList = exports.D_BasicFormGroup = exports.D_AdminListItem = exports.D_AdminListHeader = exports.D_AdminList = exports.WTContainersBox = exports.WTGlobalMenuContainer = exports.LayoutWT = exports.WSContainersBox = exports.WSGlobalMenuContainer = exports.LayoutWS = exports.WFContainersBox = exports.LayoutWF = void 0;
+exports.D_DesktopHeadlessModal = exports.D_DesktopBasicModal = void 0;
 // layoutWF
 var LayoutWF_1 = require("./layout/LayoutWF");
 Object.defineProperty(exports, "LayoutWF", { enumerable: true, get: function () { return LayoutWF_1.LayoutWF; } });
@@ -43,6 +44,7 @@ Object.defineProperty(exports, "D_DesktopHeaderBar", { enumerable: true, get: fu
 Object.defineProperty(exports, "D_DesktopTabBar", { enumerable: true, get: function () { return components_1.DesktopTabBar; } });
 Object.defineProperty(exports, "D_Dropdown", { enumerable: true, get: function () { return components_1.Dropdown; } });
 Object.defineProperty(exports, "D_DynamicDesktopNavBar", { enumerable: true, get: function () { return components_1.DynamicDesktopNavBar; } });
+Object.defineProperty(exports, "D_DynamicDesktopNavBarTemplates", { enumerable: true, get: function () { return components_1.DynamicDesktopNavBarTemplates; } });
 Object.defineProperty(exports, "D_EditApplyTextField", { enumerable: true, get: function () { return components_1.EditApplyTextField; } });
 Object.defineProperty(exports, "D_FilterBar", { enumerable: true, get: function () { return components_1.FilterBar; } });
 Object.defineProperty(exports, "D_FloatingActionButton", { enumerable: true, get: function () { return components_1.FloatingActionButton; } });
@@ -64,6 +66,7 @@ Object.defineProperty(exports, "D_UploadMainButton", { enumerable: true, get: fu
 Object.defineProperty(exports, "D_UploadTextButton", { enumerable: true, get: function () { return components_1.UploadTextButton; } });
 Object.defineProperty(exports, "D_UserDesktopNavBar", { enumerable: true, get: function () { return components_1.UserDesktopNavBar; } });
 Object.defineProperty(exports, "D_UserDesktopTabBar", { enumerable: true, get: function () { return components_1.UserDesktopTabBar; } });
+Object.defineProperty(exports, "D_UserDesktopSideTab", { enumerable: true, get: function () { return components_1.UserDesktopSideTab; } });
 // panels
 var panels_1 = require("./panels");
 Object.defineProperty(exports, "D_DesktopBasicModal", { enumerable: true, get: function () { return panels_1.DesktopBasicModal; } });

package/dist/src/hybrid/components/Switch/Switch.d.ts

@@ -1,10 +1,9 @@
 /// <reference types="react" />
 declare type SwitchProps = {
+    name: string;
     status?: 'off' | 'on';
     state?: 'normal' | 'disabled';
     onClick?: (status: boolean) => void;
-    /** @deprecated v1.6 react-hook-form을 사용하지 않아 불필요합니다. */
-    name?: string;
 };
-declare function Switch({ status, state, onClick, name }: SwitchProps): JSX.Element;
+declare function Switch({ name, status, state, onClick }: SwitchProps): JSX.Element;
 export default Switch;

package/dist/src/hybrid/components/Switch/Switch.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 function Switch(_a) {
-    var _b = _a.status, status = _b === void 0 ? 'off' : _b, _c = _a.state, state = _c === void 0 ? 'normal' : _c, onClick = _a.onClick, _d = _a.name, name = _d === void 0 ? 'switch' : _d;
+    var name = _a.name, _b = _a.status, status = _b === void 0 ? 'off' : _b, _c = _a.state, state = _c === void 0 ? 'normal' : _c, onClick = _a.onClick;
     var handleChange = function (e) {
         onClick && onClick(e.target.checked);
     };

package/dist/src/mobile/components/BasicListItem/BasicListItem.d.ts

@@ -25,6 +25,9 @@ export declare type BasicListItemProps = {
     checkboxId?: number | string;
     radioId?: string;
     radioValue?: string;
+    switchName?: string;
+    switchState?: 'normal' | 'disabled';
+    switchStatus?: 'off' | 'on';
     onClick?: () => void;
     onClickIBtn1?: () => void;
     onClickIBtn2?: () => void;
@@ -40,5 +43,5 @@ export declare type StyleProps = {
     imageIconMode?: 'none' | 'image' | 'icon';
     displayType?: 'none' | 'text' | 'ibtn_text' | 'ibtn_amount1' | 'ibtn_amount2' | 'mbtn' | 'switch';
 };
-declare function BasicListItem({ selectionMode, titleText, titleTextColorTheme, descText, badgeMode, badgeStatus, imageIconMode, imageShapeType, imageSrc, iconName, iconFillType, displayType, captionText, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, mBtnFillType, mBtnText, dividerType, titleFontWeight, checkboxId, radioId, radioValue, onClick, onClickRadio, onClickSwitch, onClickIBtn1, onClickIBtn2, onClickMBtn }: BasicListItemProps): JSX.Element;
+declare function BasicListItem({ selectionMode, titleText, titleTextColorTheme, descText, badgeMode, badgeStatus, imageIconMode, imageShapeType, imageSrc, iconName, iconFillType, displayType, captionText, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, mBtnFillType, mBtnText, dividerType, titleFontWeight, checkboxId, radioId, radioValue, switchName, switchState, switchStatus, onClick, onClickRadio, onClickSwitch, onClickIBtn1, onClickIBtn2, onClickMBtn }: BasicListItemProps): JSX.Element;
 export default BasicListItem;

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

@@ -17,7 +17,7 @@ var MainButton_1 = require("../MainButton");
 var Radio_1 = require("../Radio");
 var TextLabel_1 = require("../TextLabel");
 function BasicListItem(_a) {
-    var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'none' : _b, titleText = _a.titleText, _c = _a.titleTextColorTheme, titleTextColorTheme = _c === void 0 ? 'none' : _c, descText = _a.descText, _d = _a.badgeMode, badgeMode = _d === void 0 ? 'none' : _d, _e = _a.badgeStatus, badgeStatus = _e === void 0 ? 'inactive' : _e, _f = _a.imageIconMode, imageIconMode = _f === void 0 ? 'none' : _f, _g = _a.imageShapeType, imageShapeType = _g === void 0 ? 'round' : _g, imageSrc = _a.imageSrc, iconName = _a.iconName, _h = _a.iconFillType, iconFillType = _h === void 0 ? 'line' : _h, _j = _a.displayType, displayType = _j === void 0 ? 'none' : _j, captionText = _a.captionText, iBtn1IconName = _a.iBtn1IconName, _k = _a.iBtn1IconFillType, iBtn1IconFillType = _k === void 0 ? 'line' : _k, iBtn2IconName = _a.iBtn2IconName, _l = _a.iBtn2IconFillType, iBtn2IconFillType = _l === void 0 ? 'line' : _l, _m = _a.mBtnFillType, mBtnFillType = _m === void 0 ? 'fill' : _m, mBtnText = _a.mBtnText, _o = _a.dividerType, dividerType = _o === void 0 ? 'none' : _o, _p = _a.titleFontWeight, titleFontWeight = _p === void 0 ? 'regular' : _p, checkboxId = _a.checkboxId, radioId = _a.radioId, radioValue = _a.radioValue, onClick = _a.onClick, onClickRadio = _a.onClickRadio, onClickSwitch = _a.onClickSwitch, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onClickMBtn = _a.onClickMBtn;
+    var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'none' : _b, titleText = _a.titleText, _c = _a.titleTextColorTheme, titleTextColorTheme = _c === void 0 ? 'none' : _c, descText = _a.descText, _d = _a.badgeMode, badgeMode = _d === void 0 ? 'none' : _d, _e = _a.badgeStatus, badgeStatus = _e === void 0 ? 'inactive' : _e, _f = _a.imageIconMode, imageIconMode = _f === void 0 ? 'none' : _f, _g = _a.imageShapeType, imageShapeType = _g === void 0 ? 'round' : _g, imageSrc = _a.imageSrc, iconName = _a.iconName, _h = _a.iconFillType, iconFillType = _h === void 0 ? 'line' : _h, _j = _a.displayType, displayType = _j === void 0 ? 'none' : _j, captionText = _a.captionText, iBtn1IconName = _a.iBtn1IconName, _k = _a.iBtn1IconFillType, iBtn1IconFillType = _k === void 0 ? 'line' : _k, iBtn2IconName = _a.iBtn2IconName, _l = _a.iBtn2IconFillType, iBtn2IconFillType = _l === void 0 ? 'line' : _l, _m = _a.mBtnFillType, mBtnFillType = _m === void 0 ? 'fill' : _m, mBtnText = _a.mBtnText, _o = _a.dividerType, dividerType = _o === void 0 ? 'none' : _o, _p = _a.titleFontWeight, titleFontWeight = _p === void 0 ? 'regular' : _p, checkboxId = _a.checkboxId, radioId = _a.radioId, radioValue = _a.radioValue, switchName = _a.switchName, _q = _a.switchState, switchState = _q === void 0 ? 'normal' : _q, _r = _a.switchStatus, switchStatus = _r === void 0 ? 'off' : _r, onClick = _a.onClick, onClickRadio = _a.onClickRadio, onClickSwitch = _a.onClickSwitch, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onClickMBtn = _a.onClickMBtn;
     var methods = (0, react_hook_form_1.useFormContext)();
     var isSelected = methods === null || methods === void 0 ? void 0 : methods.watch((checkboxId === null || checkboxId === void 0 ? void 0 : checkboxId.toString()) || '');
     var handleCheckBoxClick = function (e) {
@@ -107,10 +107,10 @@ function BasicListItem(_a) {
                     captionText && (react_1.default.createElement(react_1.default.Fragment, null,
                         react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a" }),
                         react_1.default.createElement(S_TextWrapper, null,
-                            react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular", textAlign: "right", singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 })))))),
+                            react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, colorTheme: "sysTextTertiary", styleTheme: "caption1Regular", textAlign: "right", singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 })))))),
             react_1.default.createElement(S_RightBox, { displayType: displayType },
                 (displayType === 'text' || displayType === 'ibtn_text') && (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(TextLabel_1.TextLabel, { text: descText, colorTheme: "sysTextTertiary", styleTheme: "caption1Regular", singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 }),
+                    react_1.default.createElement(TextLabel_1.TextLabel, { text: descText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular", singleLineMode: "use", ellipsisMode: "use", lineLimit: 1 }),
                     react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))),
                 (displayType === 'ibtn_amount1' ||
                     displayType === 'ibtn_amount2' ||
@@ -120,8 +120,8 @@ function BasicListItem(_a) {
                 displayType === 'mbtn' && (react_1.default.createElement(react_1.default.Fragment, null,
                     react_1.default.createElement(MainButton_1.MainButton, { text: mBtnText, fillType: mBtnFillType, size: "small", onMouseDown: handleMBtnClick }),
                     react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))),
-                displayType === 'switch' && (react_1.default.createElement(S_SwitchWrapper, null,
-                    react_1.default.createElement(hybrid_1.Switch, { name: "BLI_SWITCH", onClick: handleSwitchClick }),
+                displayType === 'switch' && switchName && (react_1.default.createElement(S_SwitchWrapper, null,
+                    react_1.default.createElement(hybrid_1.Switch, { name: switchName, onClick: handleSwitchClick, state: switchState, status: switchStatus }),
                     react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }))))),
         react_1.default.createElement(S_DividerWrapper, null, dividerType === 'solid' && react_1.default.createElement(hybrid_1.Divider, { direction: "horizontal", displayType: "line" }))));
 }

package/dist/src/mobile/components/Chip/Chip.js

@@ -28,6 +28,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
+var hybrid_1 = require("../../../hybrid");
 var Icon_1 = require("../../../hybrid/components/Icon");
 var TextLabel_1 = require("../TextLabel");
 function Chip(_a) {
@@ -56,10 +57,12 @@ function Chip(_a) {
         switch (displayType) {
             case 'category_choice':
                 return (react_1.default.createElement(S_CategoryChoiceChip, { isActive: isActive, onClick: handleClickChip },
-                    !isActive && (react_1.default.createElement(S_CategoryIconWrapper, { isActive: isActive },
-                        react_1.default.createElement(Icon_1.Icon, { size: 16, fillType: "line", iconName: "ic_filter", colorKey: "ui_cpnt_chip_line_icon_01" }))),
+                    !isActive && (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement(Icon_1.Icon, { size: 16, fillType: "line", iconName: "ic_filter", colorKey: "ui_cpnt_chip_line_icon_01" }),
+                        react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }))),
                     react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextPrimary' }),
-                    isActive && (react_1.default.createElement(S_CategoryIconWrapper, { isActive: isActive },
+                    isActive && (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }),
                         react_1.default.createElement(Icon_1.Icon, { size: 12, fillType: "line", iconName: "ic_xmark", colorKey: "ui_cpnt_chip_fill_icon_active_01" })))));
             case 'information':
                 return (react_1.default.createElement(S_InfoChip, { onClick: handleClickChip },
@@ -98,11 +101,7 @@ var S_CategoryChoiceChip = styled_components_1.default.div(templateObject_1 || (
     var theme = _a.theme, isActive = _a.isActive;
     return isActive ? '' : "border: 1px solid " + theme.ui_cpnt_chip_line_border_01;
 });
-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 : "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  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 S_InfoChip = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __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) {
@@ -112,7 +111,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  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"], ["\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"])), function (_a) {
+var S_RemovableChip = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __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"], ["\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"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_chip_fill_base_inactive;
 }, function (_a) {
@@ -122,11 +121,11 @@ var S_RemovableChip = styled_components_1.default.div(templateObject_4 || (templ
     var theme = _a.theme;
     return theme.spacing.spacingC;
 });
-var S_XIconWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-left: ", ";\n"], ["\n  margin-left: ", ";\n"])), function (_a) {
+var S_XIconWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-left: ", ";\n"], ["\n  margin-left: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
 });
-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"], ["\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"])), function (_a) {
+var S_FilterSingleChip = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __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"], ["\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"])), 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) {
@@ -136,23 +135,23 @@ var S_FilterSingleChip = styled_components_1.default.div(templateObject_6 || (te
     var theme = _a.theme;
     return theme.spacing.spacingC;
 });
-var S_FilterIconWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin-right: ", ";\n"], ["\n  margin-right: ", ";\n"])), function (_a) {
+var S_FilterIconWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin-right: ", ";\n"], ["\n  margin-right: ", ";\n"])), function (_a) {
     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  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 S_LabelChip = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __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  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 S_TimeChip = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __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) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
 });
-var S_ChipWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: inline-block;\n  vertical-align: bottom;\n"], ["\n  display: inline-block;\n  vertical-align: bottom;\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
+var S_ChipWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: inline-block;\n  vertical-align: bottom;\n"], ["\n  display: inline-block;\n  vertical-align: bottom;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

package/dist/src/mobile/components/ContextMenuItem/ContextMenuItem.js

@@ -47,7 +47,7 @@ function ContextMenuItem(_a) {
         textColorTheme = 'sysTextPrimary';
     }
     if (!isSelected && state === 'normal') {
-        textColorTheme = 'sysTextSecondary';
+        textColorTheme = 'sysTextPrimary';
     }
     if (state === 'disabled') {
         textColorTheme = 'sysTextTertiary';

package/dist/src/mobile/components/MobileTabBar/MobileTabBar.d.ts

@@ -1,13 +1,15 @@
 /// <reference types="react" />
 import { PDSTabItemOption, PDSTextType } from '../../../common/types';
+declare type MobileTabBarColorThemeType = 'none' | 'grey_01';
 declare type TextObj = {
     path: string;
     title: PDSTextType;
 };
 declare type MobileTabBarProps = {
     itemArray?: PDSTabItemOption[];
+    colorTheme?: MobileTabBarColorThemeType;
     /** @deprecated v1.5 해당 필드 대신 itemArray를 사용하세요. */
     textArray?: TextObj[];
 };
-declare function MobileTabBar({ itemArray, textArray }: MobileTabBarProps): JSX.Element;
+declare function MobileTabBar({ itemArray, colorTheme, textArray }: MobileTabBarProps): JSX.Element;
 export default MobileTabBar;