pds-dev-kit-web-test 0.0.3 → 0.0.4

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_DynamicDesktopNavBar = 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_Dropdown = exports.D_DesktopTabBar = exports.D_DesktopHeadlessModal = exports.D_DesktopHeaderBar = exports.D_DesktopBasicModal = 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; } });
@@ -39,11 +40,11 @@ Object.defineProperty(exports, "D_Chip", { enumerable: true, get: function () {
 Object.defineProperty(exports, "D_ContextMenu", { enumerable: true, get: function () { return components_1.ContextMenu; } });
 Object.defineProperty(exports, "D_ContextMenuItem", { enumerable: true, get: function () { return components_1.ContextMenuItem; } });
 Object.defineProperty(exports, "D_DesktopAlertDialog", { enumerable: true, get: function () { return components_1.DesktopAlertDialog; } });
-Object.defineProperty(exports, "D_DesktopBasicModal", { enumerable: true, get: function () { return components_1.DesktopBasicModal; } });
 Object.defineProperty(exports, "D_DesktopHeaderBar", { enumerable: true, get: function () { return components_1.DesktopHeaderBar; } });
-Object.defineProperty(exports, "D_DesktopHeadlessModal", { enumerable: true, get: function () { return components_1.DesktopHeadlessModal; } });
 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; } });
@@ -65,4 +66,8 @@ 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_DynamicDesktopNavBar", { enumerable: true, get: function () { return components_1.DynamicDesktopNavBar; } });
+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; } });
+Object.defineProperty(exports, "D_DesktopHeadlessModal", { enumerable: true, get: function () { return panels_1.DesktopHeadlessModal; } });

package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/ContentsContainer.d.ts

@@ -2,7 +2,7 @@ import { MutableRefObject } from 'react';
 export declare type ContentsContainerProps = {
     content1?: JSX.Element;
     content2?: JSX.Element;
-    layoutType: 'WTA_1' | 'WTA_2' | 'WTA_3' | 'WTB_1' | 'WTC_1' | 'WTD_1' | 'WTD_2' | 'WTD_3' | 'WTD_4' | 'WTD_5' | 'WTD_6' | 'WTE_1' | 'WTF_1' | 'WTF_2' | 'WTF_3' | 'WTF_4' | 'WTF_5' | 'WTF_6' | 'WTG_1' | 'WTH_1' | 'WTH_2' | 'WTH_3' | 'WTI_1' | 'WTI_2' | 'WTJ_1' | 'WTK_1' | 'WTK_2' | 'WTK_3' | 'WTL_1' | 'WTM_1' | 'WTM_2' | 'WTN_1' | 'WTN_2' | 'WTN_3' | 'WTO_1' | 'WTP_1' | 'WTQ_1' | 'WTS_1';
+    layoutType: 'WTA_1' | 'WTA_2' | 'WTA_3' | 'WTB_1' | 'WTC_1' | 'WTD_1' | 'WTD_2' | 'WTD_3' | 'WTD_4' | 'WTD_5' | 'WTD_6' | 'WTE_1' | 'WTF_1' | 'WTF_2' | 'WTF_3' | 'WTF_4' | 'WTF_5' | 'WTF_6' | 'WTG_1' | 'WTH_1' | 'WTH_2' | 'WTH_3' | 'WTI_1' | 'WTI_2' | 'WTJ_1' | 'WTK_1' | 'WTK_2' | 'WTK_3' | 'WTL_1' | 'WTM_1' | 'WTM_2' | 'WTN_1' | 'WTN_2' | 'WTN_3' | 'WTO_1' | 'WTP_1' | 'WTQ_1' | 'WTS_1' | 'WTS_2';
     containerColor?: string;
     areaColor?: string;
     container1Ref?: MutableRefObject<HTMLDivElement | null>;

package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/ContentsContainer.js

@@ -45,7 +45,8 @@ var ContentsContainer = function (_a) {
         WTO_1: (react_1.default.createElement(variation_1.WTO, { layoutType: "WTO_1", content1: content1, containerColor: containerColor, areaColor: areaColor })),
         WTP_1: (react_1.default.createElement(variation_1.WTP, { layoutType: "WTP_1", content1: content1, containerColor: containerColor, areaColor: areaColor })),
         WTQ_1: (react_1.default.createElement(variation_1.WTQ, { layoutType: "WTQ_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        WTS_1: (react_1.default.createElement(variation_1.WTS, { layoutType: "WTS_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref }))
+        WTS_1: (react_1.default.createElement(variation_1.WTS, { layoutType: "WTS_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref })),
+        WTS_2: (react_1.default.createElement(variation_1.WTS, { layoutType: "WTS_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref }))
     }[layoutType]));
 };
 exports.default = ContentsContainer;

package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTS.d.ts

@@ -2,7 +2,7 @@ import { MutableRefObject } from 'react';
 export declare type WTSProps = {
     content1?: JSX.Element;
     content2?: JSX.Element;
-    layoutType: 'WTS_1';
+    layoutType: 'WTS_1' | 'WTS_2';
     containerColor?: string;
     areaColor?: string;
     container1Ref?: MutableRefObject<HTMLDivElement | null>;

package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTS.js

@@ -3,12 +3,31 @@ 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 = __importDefault(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
+var styled_components_1 = __importStar(require("styled-components"));
 var hybrid_1 = require("../../../../../../hybrid");
 var WTS = function (_a) {
     var content1 = _a.content1, content2 = _a.content2, containerColor = _a.containerColor, areaColor = _a.areaColor, layoutType = _a.layoutType, container1Ref = _a.container1Ref;
@@ -30,12 +49,17 @@ var S_ContentsArea1 = styled_components_1.default.div(templateObject_2 || (templ
     var areaColor = _a.areaColor;
     return "background-color: " + areaColor;
 });
-var S_ContentsArea2 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-left: 24px;\n  padding-right: 24px;\n  padding-top: 24px;\n  max-width: 1400px;\n  min-width: 1200px;\n  width: 100%;\n  ", ";\n"], ["\n  box-sizing: border-box;\n  padding-left: 24px;\n  padding-right: 24px;\n  padding-top: 24px;\n  max-width: 1400px;\n  min-width: 1200px;\n  width: 100%;\n  ", ";\n"])), function (_a) {
+var WTS_1ContentsArea2 = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding-bottom: 88px;\n  padding-left: 24px;\n  padding-right: 24px;\n  padding-top: 24px;\n  max-width: 1400px;\n  min-width: 1200px;\n"], ["\n  padding-bottom: 88px;\n  padding-left: 24px;\n  padding-right: 24px;\n  padding-top: 24px;\n  max-width: 1400px;\n  min-width: 1200px;\n"])));
+var WTS_2ContentsArea2 = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding-bottom: 88px;\n  padding-top: 24px;\n  width: 960px;\n"], ["\n  padding-bottom: 88px;\n  padding-top: 24px;\n  width: 960px;\n"])));
+var S_ContentsArea2 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  box-sizing: border-box;\n  width: 100%;\n  ", ";\n  ", ";\n"], ["\n  box-sizing: border-box;\n  width: 100%;\n  ", ";\n  ", ";\n"])), function (_a) {
+    var layoutType = _a.layoutType;
+    return ({ WTS_1: WTS_1ContentsArea2, WTS_2: WTS_2ContentsArea2 }[layoutType]);
+}, function (_a) {
     var areaColor = _a.areaColor;
     return "background-color: " + areaColor;
 });
 // TODO: 철학에 위배되지만, 히어로 배너를 쓰지 않을 경우를 위해 임시로 제거 상태. 추후 조치 필요
-var S_Content1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  /* min-height: 480px; */\n"], ["\n  /* min-height: 480px; */\n"])));
-var S_Content2 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
+var S_Content1 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  /* min-height: 480px; */\n"], ["\n  /* min-height: 480px; */\n"])));
+var S_Content2 = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
 exports.default = WTS;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/src/desktop/layout/LayoutWT/ContainersBox/ContainersBox.d.ts

@@ -1,6 +1,6 @@
 import React, { MutableRefObject } from 'react';
 export declare type ContainersBoxProps = {
-    layoutType: 'WTA_1' | 'WTA_2' | 'WTA_3' | 'WTB_1' | 'WTC_1' | 'WTD_1' | 'WTD_2' | 'WTD_3' | 'WTD_4' | 'WTD_5' | 'WTD_6' | 'WTE_1' | 'WTF_1' | 'WTF_2' | 'WTF_3' | 'WTF_4' | 'WTF_5' | 'WTF_6' | 'WTG_1' | 'WTH_1' | 'WTH_2' | 'WTH_3' | 'WTI_1' | 'WTI_2' | 'WTJ_1' | 'WTK_1' | 'WTK_2' | 'WTK_3' | 'WTL_1' | 'WTM_1' | 'WTM_2' | 'WTN_1' | 'WTN_2' | 'WTN_3' | 'WTO_1' | 'WTP_1' | 'WTQ_1' | 'WTS_1';
+    layoutType: 'WTA_1' | 'WTA_2' | 'WTA_3' | 'WTB_1' | 'WTC_1' | 'WTD_1' | 'WTD_2' | 'WTD_3' | 'WTD_4' | 'WTD_5' | 'WTD_6' | 'WTE_1' | 'WTF_1' | 'WTF_2' | 'WTF_3' | 'WTF_4' | 'WTF_5' | 'WTF_6' | 'WTG_1' | 'WTH_1' | 'WTH_2' | 'WTH_3' | 'WTI_1' | 'WTI_2' | 'WTJ_1' | 'WTK_1' | 'WTK_2' | 'WTK_3' | 'WTL_1' | 'WTM_1' | 'WTM_2' | 'WTN_1' | 'WTN_2' | 'WTN_3' | 'WTO_1' | 'WTP_1' | 'WTQ_1' | 'WTS_1' | 'WTS_2';
     pageMenuContent?: JSX.Element;
     tabMenuContent?: JSX.Element;
     subMenuContent?: JSX.Element;

package/dist/src/desktop/layout/LayoutWT/ContainersBox/ContainersBox.js

@@ -70,7 +70,8 @@ var ContainersBox = function (_a) {
             WTO_1: react_1.default.createElement(react_1.default.Fragment, null),
             WTP_1: react_1.default.createElement(react_1.default.Fragment, null),
             WTQ_1: react_1.default.createElement(react_1.default.Fragment, null),
-            WTS_1: react_1.default.createElement(react_1.default.Fragment, null)
+            WTS_1: react_1.default.createElement(react_1.default.Fragment, null),
+            WTS_2: react_1.default.createElement(react_1.default.Fragment, null)
         }[layoutType],
         react_1.default.createElement(S_RightBox, null,
             {
@@ -111,7 +112,8 @@ var ContainersBox = function (_a) {
                 WTO_1: (react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuType: "top_page_menu", pageMenuContent: pageMenuContent, containerColor: containerColor, areaColor: areaColor })),
                 WTP_1: react_1.default.createElement(react_1.default.Fragment, null),
                 WTQ_1: react_1.default.createElement(react_1.default.Fragment, null),
-                WTS_1: react_1.default.createElement(react_1.default.Fragment, null)
+                WTS_1: react_1.default.createElement(react_1.default.Fragment, null),
+                WTS_2: react_1.default.createElement(react_1.default.Fragment, null)
             }[layoutType],
             {
                 WTA_1: react_1.default.createElement(react_1.default.Fragment, null),
@@ -151,7 +153,8 @@ var ContainersBox = function (_a) {
                 WTO_1: react_1.default.createElement(react_1.default.Fragment, null),
                 WTP_1: react_1.default.createElement(react_1.default.Fragment, null),
                 WTQ_1: react_1.default.createElement(react_1.default.Fragment, null),
-                WTS_1: react_1.default.createElement(react_1.default.Fragment, null)
+                WTS_1: react_1.default.createElement(react_1.default.Fragment, null),
+                WTS_2: react_1.default.createElement(react_1.default.Fragment, null)
             }[layoutType],
             react_1.default.createElement(S_BottomWrapper, { layoutType: layoutType },
                 {
@@ -192,7 +195,8 @@ var ContainersBox = function (_a) {
                     WTO_1: (react_1.default.createElement(Containers_1.SubMenuContainer, { subMenuType: "left_sub_menu", subMenuContent: subMenuContent })),
                     WTP_1: (react_1.default.createElement(Containers_1.SubMenuContainer, { subMenuType: "left_sub_menu", subMenuContent: subMenuContent })),
                     WTQ_1: '',
-                    WTS_1: ''
+                    WTS_1: '',
+                    WTS_2: ''
                 }[layoutType],
                 react_1.default.createElement(Containers_1.ContentsContainer, { layoutType: layoutType, content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref })))));
 };

package/dist/src/desktop/{components → panels}/DesktopBasicModal/DesktopBasicModal.js

@@ -30,8 +30,7 @@ var react_1 = __importStar(require("react"));
 var react_dom_1 = __importDefault(require("react-dom"));
 var styled_components_1 = __importStar(require("styled-components"));
 var hybrid_1 = require("../../../hybrid");
-var MainButton_1 = require("../MainButton");
-var TextLabel_1 = require("../TextLabel");
+var components_1 = require("../../components");
 function DesktopBasicModal(_a) {
     var titleText = _a.titleText, contentText = _a.contentText, _b = _a.bodySpacingMode, bodySpacingMode = _b === void 0 ? 'use' : _b, _c = _a.bodyOverflowType, bodyOverflowType = _c === void 0 ? 'auto' : _c, _d = _a.btnMode, btnMode = _d === void 0 ? 'mbtn_amount2' : _d, mBtn1Text = _a.mBtn1Text, mBtn2Text = _a.mBtn2Text, mBtn3Text = _a.mBtn3Text, _e = _a.mBtn1State, mBtn1State = _e === void 0 ? 'normal' : _e, _f = _a.mBtn2State, mBtn2State = _f === void 0 ? 'normal' : _f, _g = _a.mBtn3State, mBtn3State = _g === void 0 ? 'normal' : _g, _h = _a.mBtn1Type, mBtn1Type = _h === void 0 ? 'button' : _h, _j = _a.mBtn2Type, mBtn2Type = _j === void 0 ? 'button' : _j, _k = _a.mBtn3Type, mBtn3Type = _k === void 0 ? 'button' : _k, onClickMBtn1 = _a.onClickMBtn1, onClickMBtn2 = _a.onClickMBtn2, onClickMBtn3 = _a.onClickMBtn3, _l = _a.size, size = _l === void 0 ? 'large' : _l, children = _a.children;
     var container = (0, react_1.useState)(function () {
@@ -56,16 +55,16 @@ function DesktopBasicModal(_a) {
         react_1.default.createElement(S_ModalOverlay, null),
         react_1.default.createElement(S_ModalWrapper, { size: size },
             react_1.default.createElement(S_Header, null,
-                react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "headingBold" })),
+                react_1.default.createElement(components_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "headingBold" })),
             react_1.default.createElement(S_Body, { bodySpacingMode: bodySpacingMode, bodyOverflowType: bodyOverflowType },
-                contentText && (react_1.default.createElement(TextLabel_1.TextLabel, { text: contentText, colorTheme: "sysTextSecondary", styleTheme: "subTitleRegular" })),
+                contentText && (react_1.default.createElement(components_1.TextLabel, { text: contentText, colorTheme: "sysTextSecondary", styleTheme: "subTitleRegular" })),
                 children && children),
             react_1.default.createElement(hybrid_1.Divider, null),
             react_1.default.createElement(S_Footer, null,
-                react_1.default.createElement(S_Left, null, btn3Mode.includes(btnMode) && mBtn3Text && (react_1.default.createElement(MainButton_1.MainButton, { styleTheme: "secondary", text: mBtn3Text, state: mBtn3State, type: mBtn3Type, size: "medium", onClick: onClickMBtn3 }))),
+                react_1.default.createElement(S_Left, null, btn3Mode.includes(btnMode) && mBtn3Text && (react_1.default.createElement(components_1.MainButton, { styleTheme: "secondary", text: mBtn3Text, state: mBtn3State, type: mBtn3Type, size: "medium", onClick: onClickMBtn3 }))),
                 react_1.default.createElement(S_Right, null,
-                    react_1.default.createElement(S_Btn2Wrapper, null, btn2Mode.includes(btnMode) && mBtn2Text && (react_1.default.createElement(MainButton_1.MainButton, { styleTheme: "secondary", text: mBtn2Text, state: mBtn2State, type: mBtn2Type, size: "medium", onClick: onClickMBtn2 }))),
-                    btn1Mode.includes(btnMode) && mBtn1Text && (react_1.default.createElement(MainButton_1.MainButton, { text: mBtn1Text, state: mBtn1State, type: mBtn1Type, size: "medium", onClick: onClickMBtn1 })))))), container);
+                    react_1.default.createElement(S_Btn2Wrapper, null, btn2Mode.includes(btnMode) && mBtn2Text && (react_1.default.createElement(components_1.MainButton, { styleTheme: "secondary", text: mBtn2Text, state: mBtn2State, type: mBtn2Type, size: "medium", onClick: onClickMBtn2 }))),
+                    btn1Mode.includes(btnMode) && mBtn1Text && (react_1.default.createElement(components_1.MainButton, { text: mBtn1Text, state: mBtn1State, type: mBtn1Type, size: "medium", onClick: onClickMBtn1 })))))), container);
 }
 var S_ModalOverlay = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n"], ["\n  background-color: ", ";\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/desktop/{components → 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/{components → 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/desktop/panels/index.d.ts

@@ -0,0 +1,3 @@
+import { DesktopBasicModal } from './DesktopBasicModal';
+import { DesktopHeadlessModal } from './DesktopHeadlessModal';
+export { DesktopBasicModal, DesktopHeadlessModal };

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DesktopHeadlessModal = exports.DesktopBasicModal = void 0;
+var DesktopBasicModal_1 = require("./DesktopBasicModal");
+Object.defineProperty(exports, "DesktopBasicModal", { enumerable: true, get: function () { return DesktopBasicModal_1.DesktopBasicModal; } });
+var DesktopHeadlessModal_1 = require("./DesktopHeadlessModal");
+Object.defineProperty(exports, "DesktopHeadlessModal", { enumerable: true, get: function () { return DesktopHeadlessModal_1.DesktopHeadlessModal; } });

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

@@ -32,31 +32,34 @@ function Divider(_a) {
     var _b = _a.displayType, displayType = _b === void 0 ? 'line' : _b, _c = _a.direction, direction = _c === void 0 ? 'horizontal' : _c, height = _a.height, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'none' : _d;
     return (react_1.default.createElement(S_Divider, { displayType: displayType, "$height": height, "$direction": direction, colorTheme: colorTheme }));
 }
-var horizontal = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: ", ";\n  width: 100%;\n"], ["\n  height: ", ";\n  width: 100%;\n"])), function (_a) {
+var horizontal = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: ", ";\n  background-color: ", ";\n  width: 100%;\n"], ["\n  height: ", ";\n  background-color: ", ";\n  width: 100%;\n"])), function (_a) {
     var displayType = _a.displayType;
     return displayType &&
         {
             line: '1px',
             area: '16px'
         }[displayType];
+}, function (_a) {
+    var displayType = _a.displayType, theme = _a.theme;
+    return displayType &&
+        {
+            line: theme.ui_cpnt_divider,
+            area: theme.ui_cpnt_divider_area
+        }[displayType];
 });
 var vertical = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: inline-block;\n  height: ", ";\n  width: 1px;\n"], ["\n  display: inline-block;\n  height: ", ";\n  width: 1px;\n"])), function (_a) {
     var $height = _a.$height;
     return ($height ? $height + "px" : '100%');
 });
-var S_Divider = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  ", ";\n  ", ";\n  ", ";\n"])), function (_a) {
-    var colorTheme = _a.colorTheme, theme = _a.theme;
-    return colorTheme &&
-        {
-            none: "background-color: " + theme.ui_cpnt_divider + ";",
-            divider1: "background-color: " + theme.ui_cpnt_divider_white_opacity30 + ";"
-        }[colorTheme];
-}, function (_a) {
+var S_Divider = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", ";\n  ", ";\n  ", "\n"], ["\n  ", ";\n  ", ";\n  ", "\n"])), function (_a) {
     var $direction = _a.$direction;
     return $direction === 'horizontal' && horizontal;
 }, function (_a) {
     var $direction = _a.$direction, displayType = _a.displayType;
     return $direction === 'vertical' && displayType === 'line' && vertical;
+}, function (_a) {
+    var colorTheme = _a.colorTheme, theme = _a.theme;
+    return colorTheme === 'divider1' && "background-color: " + theme.ui_cpnt_divider_white_opacity30 + ";";
 });
 exports.default = Divider;
 var templateObject_1, templateObject_2, templateObject_3;

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

@@ -4,14 +4,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
-var common_1 = require("../../../common");
+var styled_components_1 = require("styled-components");
 var fill_1 = __importDefault(require("../../../common/assets/icons/fill"));
 var line_1 = __importDefault(require("../../../common/assets/icons/line"));
 var Icon = function (_a) {
     var _b = _a.iconName, iconName = _b === void 0 ? 'ic_unavailable' : _b, _c = _a.size, size = _c === void 0 ? 24 : _c, _d = _a.colorKey, colorKey = _d === void 0 ? 'ui_cpnt_icon_sys_grey_01' : _d, _e = _a.fillType, fillType = _e === void 0 ? 'line' : _e;
+    var theme = (0, styled_components_1.useTheme)();
     var SelectedIcon = fillType === 'line'
         ? line_1.default[iconName] || fill_1.default[iconName]
         : fill_1.default[iconName] || line_1.default[iconName];
-    return (react_1.default.createElement(SelectedIcon, { color: (0, common_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK', window.PdsUtils ? window.PdsUtils.palette : {})[colorKey], size: size, style: { minWidth: size, minHeight: size } }));
+    return (react_1.default.createElement(SelectedIcon, { color: theme[colorKey], size: size, style: { minWidth: size, minHeight: size } }));
 };
 exports.default = Icon;

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/common/components/TextFieldBase/TextFieldBase.js

@@ -151,7 +151,7 @@ function TextFieldBase(_a) {
         textAreaRef.current.style.height = textAreaRef.current.scrollHeight + "px";
     }, []);
     function deleteValue() {
-        setValue(name, '');
+        setValue(name, '', { shouldDirty: true });
     }
     // NOTE: input의 type이 number일때, e나 E의 경우 숫자로 취급되어 입력이 가능하지만, publ의 기획상 막아야하기 때문에 생성한 함수
     var preventEKeyword = function (e) {

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

@@ -35,7 +35,7 @@ var S_CardGroups = styled_components_1.default.div(templateObject_1 || (template
     return theme.boxShadow.elevation2 + ", 0 0 0 2px " + theme.ui_cpnt_card_selected_border + " inset";
 });
 var S_ImageIconModeBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  div {\n    border-radius: 16px 16px 0 0;\n  }\n"], ["\n  div {\n    border-radius: 16px 16px 0 0;\n  }\n"])));
-var S_Content = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  padding: ", "; ;\n"], ["\n  display: flex;\n  flex-direction: column;\n  padding: ", "; ;\n"])), function (_a) {
+var S_Content = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  padding: ", "; ;\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  padding: ", "; ;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingD;
 });