pds-dev-kit-web 1.4.3 → 1.4.6

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

@@ -28,21 +28,23 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
+var hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
 function HorizontalFormGroup(_a) {
     var labelText = _a.labelText, captionText = _a.captionText, inputForm = _a.inputForm, _b = _a.labelAlignType, labelAlignType = _b === void 0 ? 'center' : _b, labelTopSpacing = _a.labelTopSpacing;
     return (react_1.default.createElement(S_HorizontalFormGroupBox, { labelAlignType: labelAlignType },
         react_1.default.createElement(S_LabelWrapper, { labelAlignType: labelAlignType, labelTopSpacing: labelTopSpacing }, labelAlignType === 'center' ? (react_1.default.createElement(TextLabel_1.TextLabel, { text: labelText, styleTheme: "body2Bold", ellipsisMode: "use", lineLimit: 2 })) : (react_1.default.createElement(TextLabel_1.TextLabel, { text: labelText, styleTheme: "body2Bold" }))),
         react_1.default.createElement(S_InputFormWrapper, null, inputForm),
-        react_1.default.createElement(S_CaptionWrapper, null,
-            react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, styleTheme: "caption1Regular" }))));
+        captionText && (react_1.default.createElement(S_CaptionWrapper, null,
+            react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b" }),
+            react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, styleTheme: "caption1Regular" })))));
 }
 var centerArea = "\n'label inputForm'\n'.     caption'";
 var topArea = "\n'label inputForm'\n'label caption'";
 var small = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-top: 5px;\n"], ["\n  margin-top: 5px;\n"])));
 var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-top: 10px;\n"], ["\n  margin-top: 10px;\n"])));
 var large = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-top: 14px;\n"], ["\n  margin-top: 14px;\n"])));
-var S_HorizontalFormGroupBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: grid;\n  gap: ", ";\n  grid-template-columns: 112px max-content;\n  grid-template-rows: auto 1fr;\n  grid-template-areas: ", ";\n"], ["\n  display: grid;\n  gap: ", ";\n  grid-template-columns: 112px max-content;\n  grid-template-rows: auto 1fr;\n  grid-template-areas: ", ";\n"])), function (_a) {
+var S_HorizontalFormGroupBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: grid;\n  grid-column-gap: ", ";\n  grid-template-columns: 112px auto;\n  grid-template-rows: auto 1fr;\n  grid-template-areas: ", ";\n"], ["\n  display: grid;\n  grid-column-gap: ", ";\n  grid-template-columns: 112px auto;\n  grid-template-rows: auto 1fr;\n  grid-template-areas: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
 }, function (_a) {

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.d.ts

@@ -7,7 +7,7 @@ export declare type TextButtonProps = {
     fontWeight?: 'bold' | 'regular';
     type?: 'submit' | 'reset' | 'button';
     state?: 'normal' | 'disabled';
-    colorTheme?: 'none' | 'red' | 'grey_01';
+    colorTheme?: 'none' | 'red' | 'grey_01' | 'white';
     onClick?: (...args: any) => any;
 };
 declare function TextButton({ text, size, responsiveMode, fontWeight, type, state, colorTheme, onClick, ...rest }: TextButtonProps): JSX.Element;

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

@@ -61,7 +61,8 @@ var textStyle = {
 var textColor = {
     none: 'usrTextBrandPrimary',
     red: 'sysTextError',
-    grey_01: 'sysTextPrimary'
+    grey_01: 'sysTextPrimary',
+    white: 'sysTextWhite'
 };
 function TextButton(_a) {
     var text = _a.text, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, fontWeight = _a.fontWeight, _d = _a.type, type = _d === void 0 ? 'button' : _d, _e = _a.state, state = _e === void 0 ? 'normal' : _e, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'none' : _f, onClick = _a.onClick, rest = __rest(_a, ["text", "size", "responsiveMode", "fontWeight", "type", "state", "colorTheme", "onClick"]);

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

@@ -6,7 +6,7 @@ declare type UploadTextButtonProps = {
     responsiveMode?: 'none' | 'use';
     fontWeight?: 'bold' | 'regular';
     state?: 'normal' | 'disabled';
-    colorTheme?: 'none' | 'red' | 'grey_01';
+    colorTheme?: 'none' | 'red' | 'grey_01' | 'white';
     accept?: string;
     multipleMode?: 'none' | 'use';
     onClick?: (e: React.ChangeEvent<HTMLInputElement>) => void;

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

@@ -39,7 +39,8 @@ var textStyle = {
 var textColor = {
     none: 'usrTextBrandPrimary',
     red: 'sysTextError',
-    grey_01: 'sysTextPrimary'
+    grey_01: 'sysTextPrimary',
+    white: 'sysTextWhite'
 };
 function UploadTextButton(_a) {
     var text = _a.text, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, fontWeight = _a.fontWeight, _d = _a.state, state = _d === void 0 ? 'normal' : _d, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'none' : _e, _f = _a.accept, accept = _f === void 0 ? '*' : _f, _g = _a.multipleMode, multipleMode = _g === void 0 ? 'none' : _g, onClick = _a.onClick;

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';
@@ -38,4 +38,4 @@ import { UploadMainButton } from './UploadMainButton';
 import { UploadTextButton } from './UploadTextButton';
 import { UserDesktopNavBar } from './UserDesktopNavBar';
 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 };

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.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");

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 } 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 };
 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_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_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 = 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; } });

package/dist/src/desktop/panels/DesktopHeadlessModal/DesktopHeadlessModal.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
-declare type DesktopBasicModalProps = {
+declare type DesktopHeadlessModalProps = {
     body: React.ReactNode;
     size?: 'large' | 'medium' | 'small' | 'rlarge';
     dimmedClickCloseMode?: 'use' | 'none';
     scrollVisibleType?: 'hidden' | 'moving' | 'visible';
     onClose?: () => void;
 };
-declare function DesktopBasicModal({ body, size, dimmedClickCloseMode, scrollVisibleType, onClose }: DesktopBasicModalProps): React.ReactPortal;
-export default DesktopBasicModal;
+declare function DesktopHeadlessModal({ body, size, dimmedClickCloseMode, scrollVisibleType, onClose }: DesktopHeadlessModalProps): React.ReactPortal;
+export default DesktopHeadlessModal;

package/dist/src/desktop/panels/DesktopHeadlessModal/DesktopHeadlessModal.js

@@ -29,11 +29,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var react_dom_1 = __importDefault(require("react-dom"));
 var styled_components_1 = __importStar(require("styled-components"));
-function DesktopBasicModal(_a) {
+function DesktopHeadlessModal(_a) {
     var body = _a.body, _b = _a.size, size = _b === void 0 ? 'rlarge' : _b, _c = _a.dimmedClickCloseMode, dimmedClickCloseMode = _c === void 0 ? 'none' : _c, _d = _a.scrollVisibleType, scrollVisibleType = _d === void 0 ? 'hidden' : _d, onClose = _a.onClose;
     var container = (0, react_1.useState)(function () {
         var modalRoot = document.createElement('div');
-        modalRoot.setAttribute('id', 'DesktopBasicModal');
+        modalRoot.setAttribute('id', 'DesktopHeadlessModal');
         return modalRoot;
     })[0];
     var targetRef = (0, react_1.useRef)(null);
@@ -117,5 +117,5 @@ var S_Body = styled_components_1.default.div(templateObject_5 || (templateObject
     var scrollVisibleType = _a.scrollVisibleType;
     return scrollVisibleType === 'moving' && scrollVisible;
 });
-exports.default = DesktopBasicModal;
+exports.default = DesktopHeadlessModal;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 declare type SwitchProps = {
+    name: string;
     status?: 'off' | 'on';
     state?: 'normal' | 'disabled';
-    name: string;
     onClick?: (status: boolean) => void;
 };
-declare function Switch({ status, state, name, onClick }: SwitchProps): JSX.Element;
+declare function Switch({ name, status, state, onClick }: SwitchProps): JSX.Element;
 export default Switch;

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

@@ -3,48 +3,19 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
+var 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, name = _a.name, onClick = _a.onClick;
-    var _d = (0, react_1.useState)(false), checked = _d[0], setChecked = _d[1];
+    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) {
-        setChecked(e.target.checked);
         onClick && onClick(e.target.checked);
     };
-    (0, react_1.useEffect)(function () {
-        if (status === 'off') {
-            setChecked(false);
-        }
-        if (status === 'on') {
-            setChecked(true);
-        }
-    }, [status]);
     return (react_1.default.createElement(S_Switch, null,
-        react_1.default.createElement(S_Input, { type: "checkbox", hidden: true, id: name, checked: checked, disabled: state === 'disabled', onChange: handleChange }),
+        react_1.default.createElement(S_Input, { type: "checkbox", hidden: true, id: name, checked: status === 'on', disabled: state === 'disabled', onChange: handleChange }),
         react_1.default.createElement(S_Label, { htmlFor: name, disabled: state === 'disabled' })));
 }
 var S_Switch = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  width: 56px;\n  height: 32px;\n"], ["\n  position: relative;\n  width: 56px;\n  height: 32px;\n"])));

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

@@ -28,21 +28,23 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
+var hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
 function HorizontalFormGroup(_a) {
     var labelText = _a.labelText, captionText = _a.captionText, inputForm = _a.inputForm, _b = _a.labelAlignType, labelAlignType = _b === void 0 ? 'center' : _b, labelTopSpacing = _a.labelTopSpacing;
     return (react_1.default.createElement(S_HorizontalFormGroupBox, { labelAlignType: labelAlignType },
         react_1.default.createElement(S_LabelWrapper, { labelAlignType: labelAlignType, labelTopSpacing: labelTopSpacing }, labelAlignType === 'center' ? (react_1.default.createElement(TextLabel_1.TextLabel, { text: labelText, styleTheme: "body2Bold", ellipsisMode: "use", lineLimit: 2 })) : (react_1.default.createElement(TextLabel_1.TextLabel, { text: labelText, styleTheme: "body2Bold" }))),
         react_1.default.createElement(S_InputFormWrapper, null, inputForm),
-        react_1.default.createElement(S_CaptionWrapper, null,
-            react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, styleTheme: "caption1Regular" }))));
+        captionText && (react_1.default.createElement(S_CaptionWrapper, null,
+            react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b" }),
+            react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, styleTheme: "caption1Regular" })))));
 }
 var centerArea = "\n'label inputForm'\n'.     caption'";
 var topArea = "\n'label inputForm'\n'label caption'";
 var small = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-top: 5px;\n"], ["\n  margin-top: 5px;\n"])));
 var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-top: 10px;\n"], ["\n  margin-top: 10px;\n"])));
 var large = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-top: 14px;\n"], ["\n  margin-top: 14px;\n"])));
-var S_HorizontalFormGroupBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: grid;\n  gap: ", ";\n  grid-template-columns: 112px max-content;\n  grid-template-rows: auto 1fr;\n  grid-template-areas: ", ";\n"], ["\n  display: grid;\n  gap: ", ";\n  grid-template-columns: 112px max-content;\n  grid-template-rows: auto 1fr;\n  grid-template-areas: ", ";\n"])), function (_a) {
+var S_HorizontalFormGroupBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: grid;\n  grid-column-gap: ", ";\n  grid-template-columns: 112px auto;\n  grid-template-rows: auto 1fr;\n  grid-template-areas: ", ";\n"], ["\n  display: grid;\n  grid-column-gap: ", ";\n  grid-template-columns: 112px auto;\n  grid-template-rows: auto 1fr;\n  grid-template-areas: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
 }, function (_a) {

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;

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

@@ -11,8 +11,20 @@ var react_1 = __importDefault(require("react"));
 var react_router_dom_1 = require("react-router-dom");
 var styled_components_1 = __importDefault(require("styled-components"));
 var TextLabel_1 = require("../TextLabel");
+var mobileTabBarThemes = {
+    none: {
+        activeTextColor: 'usrTextBrandPrimary',
+        inActiveTextColor: 'sysTextTertiary',
+        activeIndicatorBorderColor: 'ui_cpnt_tabbar_border_active_indicator_primary'
+    },
+    grey_01: {
+        activeTextColor: 'sysTextPrimary',
+        inActiveTextColor: 'sysTextTertiary',
+        activeIndicatorBorderColor: 'ui_cpnt_tabbar_border_active_indicator'
+    }
+};
 function MobileTabBar(_a) {
-    var itemArray = _a.itemArray, textArray = _a.textArray;
+    var itemArray = _a.itemArray, _b = _a.colorTheme, colorTheme = _b === void 0 ? 'none' : _b, textArray = _a.textArray;
     var history = (0, react_router_dom_1.useHistory)();
     var pathname = (0, react_router_dom_1.useLocation)().pathname;
     if (itemArray) {
@@ -21,8 +33,10 @@ function MobileTabBar(_a) {
                 item.onClick();
             }
         };
-        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, onClick: function () { return handleClickTabItem_1(item); } },
-            react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: "body2Bold", colorTheme: item.isActive ? 'usrTextBrandPrimary' : 'sysTextTertiary', singleLineMode: "use" }))); })));
+        return (react_1.default.createElement(S_TabBar, null, itemArray.map(function (item, index) { return (react_1.default.createElement(S_TabWrapper, { key: index, colorTheme: colorTheme, isActive: item.isActive, onClick: function () { return handleClickTabItem_1(item); } },
+            react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: "body2Bold", colorTheme: item.isActive
+                    ? mobileTabBarThemes[colorTheme].activeTextColor
+                    : mobileTabBarThemes[colorTheme].inActiveTextColor, singleLineMode: "use" }))); })));
     }
     if (textArray) {
         var handleClick_1 = function (value) {
@@ -30,7 +44,7 @@ function MobileTabBar(_a) {
                 history.push(value.path);
             }
         };
-        return (react_1.default.createElement(S_TabBar, null, textArray.map(function (value) { return (react_1.default.createElement(S_TabWrapper, { key: value.path, isActive: pathname === value.path, onClick: function () { return handleClick_1(value); } },
+        return (react_1.default.createElement(S_TabBar, null, textArray.map(function (value) { return (react_1.default.createElement(S_TabWrapper, { key: value.path, colorTheme: colorTheme, isActive: pathname === value.path, onClick: function () { return handleClick_1(value); } },
             react_1.default.createElement(TextLabel_1.TextLabel, { text: value.title, textAlign: "center", styleTheme: "body2Bold", colorTheme: pathname === value.path ? 'usrTextBrandPrimary' : 'sysTextTertiary', singleLineMode: "use" }))); })));
     }
     return react_1.default.createElement(react_1.default.Fragment, null);
@@ -42,8 +56,8 @@ var S_TabWrapper = styled_components_1.default.div(templateObject_1 || (template
     var theme = _a.theme;
     return theme.spacing.spacingD;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_tabbar_border_active_indicator_primary;
+    var colorTheme = _a.colorTheme, theme = _a.theme;
+    return theme[mobileTabBarThemes[colorTheme].activeIndicatorBorderColor];
 }, function (_a) {
     var isActive = _a.isActive;
     return !isActive && "display: none;";

package/dist/src/mobile/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;