pds-dev-kit-web 1.9.22 → 1.9.23

package/dist/src/common/styles/colorSet/index.js

@@ -5,13 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 /* eslint-disable import/order */
 var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
+var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
 var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
 var UIColor_json_1 = __importDefault(require("./UIColor.json"));
-var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
 var colorSet = {
     SemanticColor: SemanticColor_json_1.default,
+    PaletteColor_light: PaletteColor_light_json_1.default,
     PaletteColor_Dark: PaletteColor_Dark_json_1.default,
-    UIColor: UIColor_json_1.default,
-    PaletteColor_light: PaletteColor_light_json_1.default
+    UIColor: UIColor_json_1.default
 };
 exports.default = colorSet;

package/dist/src/common/styles/colorSet/ui-type.d.ts

@@ -743,4 +743,5 @@ export interface UITheme {
     ui_94: string;
     ui_95: string;
     ui_cpnt_icon_sys_brandsecondary_variant: string;
+    ui_96: string;
 }

package/dist/src/common/styles/movement/animationStyle.js

@@ -7,12 +7,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.modalOverlayOffAni = exports.modalOverlayOnAni = exports.modalOffAni = exports.modalOnAni = exports.dialogOverlayOffAni = exports.dialogOverlayOnAni = exports.dialogOffAni = exports.dialogOnAni = void 0;
 var styled_components_1 = require("styled-components");
 var keyframes_1 = require("./keyframes");
-exports.dialogOnAni = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  animation: ", " 0.2s ease-in-out both, ", " 0.2s ease-in-out both;\n  transform-origin: 0 0;\n"], ["\n  animation: ", " 0.2s ease-in-out both, ", " 0.2s ease-in-out both;\n  transform-origin: 0 0;\n"])), keyframes_1.scaleBounceInIncludeTranslate, keyframes_1.fadeIn);
-exports.dialogOffAni = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  animation: ", " 0.2s ease-in-out both,\n    ", " 0.2s ease-in-out both;\n  transform-origin: 0 0;\n"], ["\n  animation: ", " 0.2s ease-in-out both,\n    ", " 0.2s ease-in-out both;\n  transform-origin: 0 0;\n"])), keyframes_1.scaleBounceOutIncludeTranslate, keyframes_1.fadeOut);
-exports.dialogOverlayOnAni = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  animation: ", " 0.2s ease-in-out both;\n"], ["\n  animation: ", " 0.2s ease-in-out both;\n"])), keyframes_1.fadeIn);
-exports.dialogOverlayOffAni = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  animation: ", " 0.2s ease-in-out both;\n"], ["\n  animation: ", " 0.2s ease-in-out both;\n"])), keyframes_1.fadeOut);
-exports.modalOnAni = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  animation: ", " 0.2s ease-in-out both,\n    ", " 0.2s ease-in-out both;\n  transform-origin: 0 0;\n"], ["\n  animation: ", " 0.2s ease-in-out both,\n    ", " 0.2s ease-in-out both;\n  transform-origin: 0 0;\n"])), keyframes_1.scaleBounceInIncludeTranslate02, keyframes_1.fadeIn);
-exports.modalOffAni = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  animation: ", " 0.2s ease-in-out both,\n    ", " 0.2s ease-in-out both;\n  transform-origin: 0 0;\n"], ["\n  animation: ", " 0.2s ease-in-out both,\n    ", " 0.2s ease-in-out both;\n  transform-origin: 0 0;\n"])), keyframes_1.scaleBounceOutIncludeTranslate02, keyframes_1.fadeOut);
-exports.modalOverlayOnAni = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  animation: ", " 0.2s ease-in-out both;\n"], ["\n  animation: ", " 0.2s ease-in-out both;\n"])), keyframes_1.fadeIn);
-exports.modalOverlayOffAni = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  animation: ", " 0.2s ease-in-out both;\n"], ["\n  animation: ", " 0.2s ease-in-out both;\n"])), keyframes_1.fadeOut);
+exports.dialogOnAni = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  animation: ", " 0.2s ease-in-out, ", " 0.2s ease-in-out;\n  transform-origin: 0 0;\n"], ["\n  animation: ", " 0.2s ease-in-out, ", " 0.2s ease-in-out;\n  transform-origin: 0 0;\n"])), keyframes_1.scaleBounceInIncludeTranslate, keyframes_1.fadeIn);
+exports.dialogOffAni = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  animation: ", " 0.2s ease-in-out, ", " 0.2s ease-in-out;\n  transform-origin: 0 0;\n"], ["\n  animation: ", " 0.2s ease-in-out, ", " 0.2s ease-in-out;\n  transform-origin: 0 0;\n"])), keyframes_1.scaleBounceOutIncludeTranslate, keyframes_1.fadeOut);
+exports.dialogOverlayOnAni = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  animation: ", " 0.2s ease-in-out;\n"], ["\n  animation: ", " 0.2s ease-in-out;\n"])), keyframes_1.fadeIn);
+exports.dialogOverlayOffAni = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  animation: ", " 0.2s ease-in-out;\n"], ["\n  animation: ", " 0.2s ease-in-out;\n"])), keyframes_1.fadeOut);
+exports.modalOnAni = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  animation: ", " 0.2s ease-in-out, ", " 0.2s ease-in-out;\n  transform-origin: 0 0;\n"], ["\n  animation: ", " 0.2s ease-in-out, ", " 0.2s ease-in-out;\n  transform-origin: 0 0;\n"])), keyframes_1.scaleBounceInIncludeTranslate02, keyframes_1.fadeIn);
+exports.modalOffAni = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  animation: ", " 0.2s ease-in-out, ", " 0.2s ease-in-out;\n  transform-origin: 0 0;\n"], ["\n  animation: ", " 0.2s ease-in-out, ", " 0.2s ease-in-out;\n  transform-origin: 0 0;\n"])), keyframes_1.scaleBounceOutIncludeTranslate02, keyframes_1.fadeOut);
+exports.modalOverlayOnAni = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  animation: ", " 0.2s ease-in-out;\n"], ["\n  animation: ", " 0.2s ease-in-out;\n"])), keyframes_1.fadeIn);
+exports.modalOverlayOffAni = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  animation: ", " 0.2s ease-in-out;\n"], ["\n  animation: ", " 0.2s ease-in-out;\n"])), keyframes_1.fadeOut);
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

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

@@ -3,7 +3,7 @@ import type { UiColors } from '../../../../../common';
 export declare type ContentsContainerProps = {
     content1?: JSX.Element;
     content2?: JSX.Element;
-    layoutType: 'WFA_1' | 'WFA_2' | 'WFB_1' | 'WFC_1' | 'WFD_1' | 'WFD_2' | 'WFE_1' | 'WFE_2' | 'WFE_3' | 'WFE_4' | 'WFF_1' | 'WFG_1' | 'WFG_2' | 'WFG_3' | 'WFG_4' | 'WFG_5' | 'WFG_6' | 'WFH_1' | 'WFI_1' | 'WFI_2' | 'WFI_3' | 'WFI_4' | 'WFI_5' | 'WFI_6' | 'WFJ_1' | 'WFK_1' | 'WFL_1' | 'WFL_2' | 'WFL_3' | 'WFL_4';
+    layoutType: 'WFA_1' | 'WFA_2' | 'WFA_3' | 'WFA_4' | 'WFB_1' | 'WFC_1' | 'WFD_1' | 'WFD_2' | 'WFE_1' | 'WFE_2' | 'WFE_3' | 'WFE_4' | 'WFF_1' | 'WFG_1' | 'WFG_2' | 'WFG_3' | 'WFG_4' | 'WFG_5' | 'WFG_6' | 'WFH_1' | 'WFI_1' | 'WFI_2' | 'WFI_3' | 'WFI_4' | 'WFI_5' | 'WFI_6' | 'WFJ_1' | 'WFK_1' | 'WFL_1' | 'WFL_2' | 'WFL_3' | 'WFL_4';
     containerColor?: string;
     areaColor?: string;
     isLoadingContainer1?: boolean;

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

@@ -7,6 +7,8 @@ var ContentsContainer = function (_a) {
     return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: {
             WFA_1: ((0, jsx_runtime_1.jsx)(variation_1.WFA, { layoutType: "WFA_1", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, overrideContainer1ColorKey: overrideContainer1ColorKey }, void 0)),
             WFA_2: ((0, jsx_runtime_1.jsx)(variation_1.WFA, { layoutType: "WFA_2", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, overrideContainer1ColorKey: overrideContainer1ColorKey }, void 0)),
+            WFA_3: ((0, jsx_runtime_1.jsx)(variation_1.WFA, { layoutType: "WFA_3", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, overrideContainer1ColorKey: overrideContainer1ColorKey }, void 0)),
+            WFA_4: ((0, jsx_runtime_1.jsx)(variation_1.WFA, { layoutType: "WFA_4", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, overrideContainer1ColorKey: overrideContainer1ColorKey }, void 0)),
             WFB_1: ((0, jsx_runtime_1.jsx)(variation_1.WFB, { content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, overrideContainer1ColorKey: overrideContainer1ColorKey }, void 0)),
             WFC_1: ((0, jsx_runtime_1.jsx)(variation_1.WFC, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, overrideContainer1ColorKey: overrideContainer1ColorKey }, void 0)),
             WFD_1: ((0, jsx_runtime_1.jsx)(variation_1.WFD, { layoutType: "WFD_1", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, overrideContainer1ColorKey: overrideContainer1ColorKey }, void 0)),

package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFA.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { UiColors } from '../../../../../../common';
 export declare type WFAProps = {
-    layoutType: 'WFA_1' | 'WFA_2';
+    layoutType: 'WFA_1' | 'WFA_2' | 'WFA_3' | 'WFA_4';
     content1?: JSX.Element;
     containerColor?: string;
     areaColor?: string;

package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFA.js

@@ -35,36 +35,87 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var styled_components_1 = __importStar(require("styled-components"));
 var components_1 = require("../../../../../../common/components");
 var scrollbarStyle_1 = require("../../../../../../common/styles/scroll/scrollbarStyle");
 var WFA = function (_a) {
     var content1 = _a.content1, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(S_ContentsContainer, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFA", layoutType: layoutType, containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {}, void 0)) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(S_ContentsArea, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFA", layoutType: layoutType, areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFA" }, { children: content1 }), void 0) }), void 0) }, void 0)) }), void 0) }, void 0));
+    var _b = (0, react_1.useState)(false), hasScroll = _b[0], setHasScroll = _b[1];
+    var contentRef = (0, react_1.useRef)(null);
+    var handleResize = function () {
+        if (!contentRef || !contentRef.current)
+            return;
+        var _a = contentRef.current, scrollHeight = _a.scrollHeight, clientHeight = _a.clientHeight;
+        var isTextClamped = scrollHeight > clientHeight;
+        setHasScroll(isTextClamped);
+    };
+    /**
+      @when : 헤딩 레이아웃이 적용된 화면에 진입했을때
+      @expected : clientHeight와 scrollHeight를 감지하여 hasScroll의 상태를 업데이트 합니다.
+      @clear : -
+    */
+    (0, react_1.useEffect)(function () {
+        handleResize();
+    }, []);
+    /**
+      @when : 브라우저 화면 사이즈가 변경될 때
+      @expected : clientHeight와 scrollHeight를 감지하여 hasScroll의 상태를 업데이트 합니다.
+      @clear : 이벤트 등록을 해제합니다.
+    */
+    (0, react_1.useEffect)(function () {
+        window.addEventListener('resize', handleResize);
+        return function () {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(S_ContentsContainer, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFA", layoutType: layoutType, containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey, hasScroll: hasScroll, ref: contentRef }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {}, void 0)) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(S_ContentsArea, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFA", layoutType: layoutType, areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFA" }, { children: content1 }), void 0) }), void 0) }, void 0)) }), void 0) }, void 0));
 };
-var WFA_1AreaStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 432px;\n"], ["\n  width: 432px;\n"])));
-var WFA_2AreaStyle = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 608px;\n"], ["\n  width: 608px;\n"])));
-var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+var WFA_1ContainerStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: flex-start;\n"], ["\n  align-items: flex-start;\n"])));
+var WFA_2ContainerStyle = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: flex-start;\n"], ["\n  align-items: flex-start;\n"])));
+var WFA_3ContainerStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: flex-start;\n  ", "\n"], ["\n  align-items: flex-start;\n  ", "\n"])), function (_a) {
+    var hasScroll = _a.hasScroll;
+    return !hasScroll && (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      align-items: center;\n    "], ["\n      align-items: center;\n    "])));
+});
+var WFA_4ContainerStyle = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: flex-start;\n  ", "\n"], ["\n  align-items: flex-start;\n  ", "\n"])), function (_a) {
+    var hasScroll = _a.hasScroll;
+    return !hasScroll && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      align-items: center;\n    "], ["\n      align-items: center;\n    "])));
+});
+var WFA_1AreaStyle = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: 432px;\n"], ["\n  width: 432px;\n"])));
+var WFA_2AreaStyle = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  width: 608px;\n"], ["\n  width: 608px;\n"])));
+var WFA_3AreaStyle = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  width: 432px;\n"], ["\n  width: 432px;\n"])));
+var WFA_4AreaStyle = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  width: 608px;\n"], ["\n  width: 608px;\n"])));
+var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var theme = _a.theme, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
     return overrideContainer1ColorKey && theme[overrideContainer1ColorKey];
 });
-var S_ContentsContainer = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: flex-start;\n  background-color: ", ";\n  border-radius: 24px;\n  display: flex;\n  height: 60vh;\n  justify-content: center;\n  max-height: 640px;\n  overflow-x: hidden;\n  overflow-y: overlay;\n  width: 864px;\n  ", ";\n\n  ", "\n  ", "\n"], ["\n  align-items: flex-start;\n  background-color: ", ";\n  border-radius: 24px;\n  display: flex;\n  height: 60vh;\n  justify-content: center;\n  max-height: 640px;\n  overflow-x: hidden;\n  overflow-y: overlay;\n  width: 864px;\n  ", ";\n\n  ", "\n  ", "\n"])), function (_a) {
+var S_ContentsContainer = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 24px;\n  display: flex;\n  height: 60vh;\n  justify-content: center;\n  max-height: 640px;\n  overflow-x: hidden;\n  overflow-y: overlay;\n  width: 864px;\n  ", ";\n  ", ";\n\n  ", "\n  ", "\n"], ["\n  background-color: ", ";\n  border-radius: 24px;\n  display: flex;\n  height: 60vh;\n  justify-content: center;\n  max-height: 640px;\n  overflow-x: hidden;\n  overflow-y: overlay;\n  width: 864px;\n  ", ";\n  ", ";\n\n  ", "\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_wizard_contentscontainer01_background;
+}, function (_a) {
+    var layoutType = _a.layoutType;
+    return ({
+        WFA_1: WFA_1ContainerStyle,
+        WFA_2: WFA_2ContainerStyle,
+        WFA_3: WFA_3ContainerStyle,
+        WFA_4: WFA_4ContainerStyle
+    }[layoutType]);
 }, function (_a) {
     var containerColor = _a.containerColor;
     return "background-color: " + containerColor;
 }, scrollbarStyle_1.scrollbarWithPaddingStyle, overrideStyleContainer1);
-var S_ContentsArea = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-bottom: 64px;\n  padding-top: 64px;\n\n  ", ";\n  ", ";\n"], ["\n  box-sizing: border-box;\n  padding-bottom: 64px;\n  padding-top: 64px;\n\n  ", ";\n  ", ";\n"])), function (_a) {
+var S_ContentsArea = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-bottom: 64px;\n  padding-top: 64px;\n\n  ", ";\n  ", ";\n"], ["\n  box-sizing: border-box;\n  padding-bottom: 64px;\n  padding-top: 64px;\n\n  ", ";\n  ", ";\n"])), function (_a) {
     var layoutType = _a.layoutType;
     return ({
         WFA_1: WFA_1AreaStyle,
-        WFA_2: WFA_2AreaStyle
+        WFA_2: WFA_2AreaStyle,
+        WFA_3: WFA_3AreaStyle,
+        WFA_4: WFA_4AreaStyle
     }[layoutType]);
 }, function (_a) {
     var areaColor = _a.areaColor;
     return "background-color: " + areaColor;
 });
-var S_Content1 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
+var S_Content1 = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
 exports.default = WFA;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { UiColors } from '../../../../common';
 export declare type ContainersBoxProps = {
-    layoutType: 'WFA_1' | 'WFA_2' | 'WFB_1' | 'WFC_1' | 'WFD_1' | 'WFD_2' | 'WFE_1' | 'WFE_2' | 'WFE_3' | 'WFE_4' | 'WFF_1' | 'WFG_1' | 'WFG_2' | 'WFG_3' | 'WFG_4' | 'WFG_5' | 'WFG_6' | 'WFH_1' | 'WFI_1' | 'WFI_2' | 'WFI_3' | 'WFI_4' | 'WFI_5' | 'WFI_6' | 'WFJ_1' | 'WFK_1' | 'WFL_1' | 'WFL_2' | 'WFL_3' | 'WFL_4';
+    layoutType: 'WFA_1' | 'WFA_2' | 'WFA_3' | 'WFA_4' | 'WFB_1' | 'WFC_1' | 'WFD_1' | 'WFD_2' | 'WFE_1' | 'WFE_2' | 'WFE_3' | 'WFE_4' | 'WFF_1' | 'WFG_1' | 'WFG_2' | 'WFG_3' | 'WFG_4' | 'WFG_5' | 'WFG_6' | 'WFH_1' | 'WFI_1' | 'WFI_2' | 'WFI_3' | 'WFI_4' | 'WFI_5' | 'WFI_6' | 'WFJ_1' | 'WFK_1' | 'WFL_1' | 'WFL_2' | 'WFL_3' | 'WFL_4';
     pageMenuContent?: JSX.Element;
     subMenuContent?: JSX.Element;
     tabMenuContent?: JSX.Element;

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

@@ -57,6 +57,8 @@ var ContainersBox = function (_a) {
                     }[wizardContainerWidthType]) : ((0, jsx_runtime_1.jsx)(Containers_1.PageMenuContainer, { pageMenuContent: pageMenuContent }, void 0)) }, void 0)), (0, jsx_runtime_1.jsxs)(S_CenterBox, __assign({ isWizardLayout: isWizardLayout }, { children: [{
                             WFA_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
                             WFA_2: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
+                            WFA_3: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
+                            WFA_4: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
                             WFB_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
                             WFC_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
                             WFD_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
@@ -88,6 +90,8 @@ var ContainersBox = function (_a) {
                         }[layoutType], (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [{
                                     WFA_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
                                     WFA_2: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
+                                    WFA_3: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
+                                    WFA_4: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
                                     WFB_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
                                     WFC_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),
                                     WFD_1: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web",
-  "version": "1.9.22",
+  "version": "1.9.23",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",

package/release-note.md

@@ -1,7 +1,11 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v1.9.22]
+## [v1.9.23]
 
+### common
+* animationStyle
+    * animation시에 부여되어있던 animation-fill-mode 옵션 제거 (DesktopAlertDialog, MobileAlertDialog, DesktopBasicModal, DesktopHeadlessModal, DesktopTutorialModal, MobileBasicModal에 영향)
 ### Layout
-* WFL_3 생성
-* WFL_4 생성
-* WTP_2 생성
+* WFA_3 생성
+* WFA_4 생성
+### Color
+* 컬러 키 값 23.03.14 14시 20분 기준 싱크