pds-dev-kit-web 2.1.14 → 2.1.16

package/dist/src/common/styles/colorSet/PaletteColor_Dark.json

@@ -160,7 +160,7 @@
     "sys_background_dimmed_02": "black/opacity65",
     "sys_border_line_08": "darkgrey500",
     "sys_component_base_06": "darkgrey50",
-    "sys_component_base_07": "darkgrey70",
+    "sys_component_base_07": "darkgrey80",
     "sys_border_line_09": "darkgrey50",
     "sys_component_base_darktheme_04": "black/opacity00",
     "sys_border_line_10": "darkgrey50",

package/dist/src/common/styles/colorSet/index.d.ts

@@ -119,7 +119,7 @@ declare const colorSet: {
         grey300: string;
         darkgrey300: string;
     };
-    readonly PaletteColor_Dark: {
+    readonly PaletteColor_light: {
         sys_container_background_01: string;
         sys_container_background_02: string;
         sys_container_background_03: string;
@@ -464,7 +464,7 @@ declare const colorSet: {
         sys_sw_sidebar_item_text_disabled: string;
         sys_text_grey_05: string;
     };
-    readonly PaletteColor_light: {
+    readonly PaletteColor_Dark: {
         sys_container_background_01: string;
         sys_container_background_02: string;
         sys_container_background_03: string;

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_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.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 colorSet = {
     SemanticColor: SemanticColor_json_1.default,
-    PaletteColor_Dark: PaletteColor_Dark_json_1.default,
     PaletteColor_light: PaletteColor_light_json_1.default,
+    PaletteColor_Dark: PaletteColor_Dark_json_1.default,
     UIColor: UIColor_json_1.default
 };
 exports.default = colorSet;

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

@@ -15,11 +15,12 @@ declare type DesktopHeaderBarProps = {
     mBtnState?: 'normal' | 'disabled';
     mBtn2State?: 'normal' | 'disabled';
     dividerType?: 'none' | 'solid';
+    styleTheme?: 'type_a' | 'type_b';
     onClickLeftBtn?: () => void;
     onClickLeft2Btn?: () => void;
     onClickRightBtn?: () => void;
     onClickRightBtn2?: () => void;
     onClickRightBtn3?: () => void;
 };
-declare function DesktopHeaderBar({ text, size, leftDisplayType, iconName, leftBtn2Mode, leftBtn2Text, rightBtnMode, rightBtn2Mode, rightBtn3Mode, mBtnText, mBtn2Text, mBtnState, mBtn2State, dividerType, onClickLeftBtn, onClickLeft2Btn, onClickRightBtn, onClickRightBtn2, onClickRightBtn3 }: DesktopHeaderBarProps): JSX.Element;
+declare function DesktopHeaderBar({ text, size, leftDisplayType, iconName, leftBtn2Mode, leftBtn2Text, rightBtnMode, rightBtn2Mode, rightBtn3Mode, mBtnText, mBtn2Text, mBtnState, mBtn2State, dividerType, styleTheme, onClickLeftBtn, onClickLeft2Btn, onClickRightBtn, onClickRightBtn2, onClickRightBtn3 }: DesktopHeaderBarProps): JSX.Element;
 export default DesktopHeaderBar;

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

@@ -26,7 +26,7 @@ var MainButton_1 = require("../MainButton");
 var TextButton_1 = require("../TextButton");
 var TextLabel_1 = require("../TextLabel");
 function DesktopHeaderBar(_a) {
-    var text = _a.text, _b = _a.size, size = _b === void 0 ? 'xlarge' : _b, _c = _a.leftDisplayType, leftDisplayType = _c === void 0 ? 'text' : _c, iconName = _a.iconName, leftBtn2Mode = _a.leftBtn2Mode, leftBtn2Text = _a.leftBtn2Text, _d = _a.rightBtnMode, rightBtnMode = _d === void 0 ? 'none' : _d, _e = _a.rightBtn2Mode, rightBtn2Mode = _e === void 0 ? 'none' : _e, _f = _a.rightBtn3Mode, rightBtn3Mode = _f === void 0 ? 'none' : _f, mBtnText = _a.mBtnText, mBtn2Text = _a.mBtn2Text, _g = _a.mBtnState, mBtnState = _g === void 0 ? 'normal' : _g, _h = _a.mBtn2State, mBtn2State = _h === void 0 ? 'normal' : _h, _j = _a.dividerType, dividerType = _j === void 0 ? 'none' : _j, onClickLeftBtn = _a.onClickLeftBtn, onClickLeft2Btn = _a.onClickLeft2Btn, onClickRightBtn = _a.onClickRightBtn, onClickRightBtn2 = _a.onClickRightBtn2, onClickRightBtn3 = _a.onClickRightBtn3;
+    var text = _a.text, _b = _a.size, size = _b === void 0 ? 'xlarge' : _b, _c = _a.leftDisplayType, leftDisplayType = _c === void 0 ? 'text' : _c, iconName = _a.iconName, leftBtn2Mode = _a.leftBtn2Mode, leftBtn2Text = _a.leftBtn2Text, _d = _a.rightBtnMode, rightBtnMode = _d === void 0 ? 'none' : _d, _e = _a.rightBtn2Mode, rightBtn2Mode = _e === void 0 ? 'none' : _e, _f = _a.rightBtn3Mode, rightBtn3Mode = _f === void 0 ? 'none' : _f, mBtnText = _a.mBtnText, mBtn2Text = _a.mBtn2Text, _g = _a.mBtnState, mBtnState = _g === void 0 ? 'normal' : _g, _h = _a.mBtn2State, mBtn2State = _h === void 0 ? 'normal' : _h, _j = _a.dividerType, dividerType = _j === void 0 ? 'none' : _j, _k = _a.styleTheme, styleTheme = _k === void 0 ? 'type_a' : _k, onClickLeftBtn = _a.onClickLeftBtn, onClickLeft2Btn = _a.onClickLeft2Btn, onClickRightBtn = _a.onClickRightBtn, onClickRightBtn2 = _a.onClickRightBtn2, onClickRightBtn3 = _a.onClickRightBtn3;
     var isLastButtonIcon = rightBtnMode === 'close' ||
         rightBtnMode === 'help_window' ||
         (rightBtnMode === 'none' && rightBtn2Mode === 'help_window') ||
@@ -81,7 +81,7 @@ function DesktopHeaderBar(_a) {
     var leftButton2Mode = function () {
         switch (leftBtn2Mode) {
             case 'mbtn': {
-                return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(MainButton_1.MainButton, { styleTheme: "secondary", size: "xsmall", text: leftBtn2Text, onClick: handleClickLeft2Btn }, void 0)] }, void 0));
+                return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: styleTheme === 'type_a' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(MainButton_1.MainButton, { styleTheme: "secondary", size: "xsmall", text: leftBtn2Text, onClick: handleClickLeft2Btn }, void 0)] }, void 0)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { shapeType: "round", baseSize: "xsmall", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconFillType: "fill", iconSize: 16, iconName: "ic_light_bulb", iconColorKey: "ui_cpnt_button_icon_primary", fillType: "fill", onClick: handleClickLeft2Btn }, void 0)] }, void 0)) }, void 0));
             }
             case 'tbtn': {
                 return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(TextButton_1.TextButton, { size: "xsmall", text: leftBtn2Text, onClick: handleClickLeft2Btn }, void 0)] }, void 0));
@@ -136,26 +136,54 @@ function DesktopHeaderBar(_a) {
             }
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(S_DesktopHeaderBar, __assign({ "x-pds-name": "DesktopHeaderBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, hasDivider: dividerType === 'solid', hasBackIcon: leftDisplayType === 'back' }, { children: [(0, jsx_runtime_1.jsxs)(S_LeftDisplayBox, { children: [leftDisplayMode(), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "body1Bold", singleLineMode: "use", colorTheme: "sysTextPrimary" }, void 0), leftButton2Mode()] }, void 0), (0, jsx_runtime_1.jsxs)(S_ButtonBox, __assign({ isLastButtonIcon: isLastButtonIcon }, { children: [rightButton3Mode(), rightButton2Mode(), rightButtonMode()] }), void 0)] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)(S_DesktopHeaderBar, __assign({ "x-pds-name": "DesktopHeaderBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, hasDivider: dividerType === 'solid', hasBackIcon: leftDisplayType === 'back', styleTheme: styleTheme }, { children: [(0, jsx_runtime_1.jsxs)(S_LeftDisplayBox, __assign({ styleTheme: styleTheme }, { children: [styleTheme === 'type_a' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [leftDisplayMode(), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, singleLineMode: "use", customFontWeight: "bold", colorTheme: "sysTextPrimary" }, void 0)] }, void 0)) : ((0, jsx_runtime_1.jsxs)(S_TypeBText, __assign({ hasBackIcon: leftDisplayType === 'back', onClick: function () {
+                            if (leftDisplayType === 'back') {
+                                handleClickLeftBtn();
+                            }
+                            return;
+                        } }, { children: [leftDisplayType === 'back' && ((0, jsx_runtime_1.jsx)(S_Icon, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_arrow_left", fillType: "line", colorKey: "ui_cpnt_button_icon_enabled" }, void 0) }, void 0)), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: String(text).toUpperCase(), singleLineMode: "use", customFontWeight: "bold", customFontSize: "14px", colorTheme: "sysTextPrimary", letterSpacing: "0.15em" }, void 0)] }), void 0)), leftButton2Mode()] }), void 0), (0, jsx_runtime_1.jsxs)(S_ButtonBox, __assign({ isLastButtonIcon: isLastButtonIcon }, { children: [rightButton3Mode(), rightButton2Mode(), rightButtonMode()] }), void 0)] }), void 0));
 }
-var S_DesktopHeaderBar = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-bottom: ", ";\n  box-sizing: border-box;\n  display: flex;\n  height: ", ";\n  justify-content: space-between;\n  padding-left: ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-bottom: ", ";\n  box-sizing: border-box;\n  display: flex;\n  height: ", ";\n  justify-content: space-between;\n  padding-left: ", ";\n"])), function (_a) {
+var S_TypeBText = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  ", ";\n"])), function (_a) {
+    var hasBackIcon = _a.hasBackIcon;
+    return hasBackIcon && "cursor: pointer";
+});
+var S_Icon = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  display: flex;\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingC;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingB;
+});
+var S_DesktopHeaderBar = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: ", ";\n  background-color: ", ";\n  border-bottom: ", ";\n  box-sizing: border-box;\n  display: flex;\n  height: 48px;\n  justify-content: space-between;\n  padding-left: ", ";\n  ", ";\n  ", ";\n"], ["\n  align-items: ", ";\n  background-color: ", ";\n  border-bottom: ", ";\n  box-sizing: border-box;\n  display: flex;\n  height: 48px;\n  justify-content: space-between;\n  padding-left: ", ";\n  ", ";\n  ", ";\n"])), function (_a) {
+    var styleTheme = _a.styleTheme;
+    return (styleTheme === 'type_a' ? 'center' : 'end');
+}, function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_headerbar_base_area;
 }, function (_a) {
     var theme = _a.theme, hasDivider = _a.hasDivider;
     return hasDivider && "1px solid " + theme.ui_cpnt_divider;
-}, function (_a) {
-    var size = _a.size;
-    return (size === 'xlarge' ? '64px' : '48px');
 }, function (_a) {
     var hasBackIcon = _a.hasBackIcon, theme = _a.theme;
     return hasBackIcon ? theme.spacing.spacingC : theme.spacing.spacingE;
+}, function (_a) {
+    var styleTheme = _a.styleTheme;
+    return styleTheme === 'type_b' && "border-width: 0px;";
+}, function (_a) {
+    var styleTheme = _a.styleTheme;
+    return styleTheme === 'type_b' && "-webkit-box-align: end;";
 });
-var S_LeftDisplayBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  margin-right: ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  margin-right: ", ";\n"])), function (_a) {
+var S_LeftDisplayBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  margin-right: ", ";\n  ", ";\n  ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  margin-right: ", ";\n  ", ";\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingD;
+}, function (_a) {
+    var styleTheme = _a.styleTheme;
+    return styleTheme === 'type_b' && "min-height: 24px;";
+}, function (_a) {
+    var styleTheme = _a.styleTheme;
+    return styleTheme === 'type_b' && "margin-bottom: 4px;";
 });
-var S_ButtonBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  margin-right: ", ";\n\n  & > :not(:last-child) {\n    margin-right: ", ";\n  }\n"], ["\n  align-items: center;\n  display: flex;\n  margin-right: ", ";\n\n  & > :not(:last-child) {\n    margin-right: ", ";\n  }\n"])), function (_a) {
+var S_ButtonBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  margin-right: ", ";\n\n  & > :not(:last-child) {\n    margin-right: ", ";\n  }\n"], ["\n  align-items: center;\n  display: flex;\n  margin-right: ", ";\n\n  & > :not(:last-child) {\n    margin-right: ", ";\n  }\n"])), function (_a) {
     var isLastButtonIcon = _a.isLastButtonIcon, theme = _a.theme;
     return isLastButtonIcon ? theme.spacing.spacingB : theme.spacing.spacingE;
 }, function (_a) {
@@ -163,4 +191,4 @@ var S_ButtonBox = styled_components_1.default.div(templateObject_3 || (templateO
     return theme.spacing.spacingB;
 });
 exports.default = DesktopHeaderBar;
-var templateObject_1, templateObject_2, templateObject_3;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -13,7 +13,7 @@ declare type TextObj = {
 };
 declare type DesktopTabBarProps = {
     itemArray?: ItemArray[];
-    styleTheme?: 'main' | 'content';
+    styleTheme?: 'main' | 'content' | 'content_black';
     /** @deprecated v1.5 해당 필드 대신 itemArray를 사용하세요. */
     textArray?: TextObj[];
 };

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

@@ -51,16 +51,19 @@ function DesktopTabBar(_a) {
         };
         var textLabel_1 = function (item, isSubText) {
             if (isSubText) {
+                return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: "caption1Bold", colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextTertiary', singleLineMode: "use" }, void 0));
+            }
+            if (styleTheme === 'content_black') {
                 return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: item.isActive ? 'caption1Bold' : 'caption1Regular', colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use" }, void 0));
             }
             if (styleTheme === 'content') {
-                return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: item.isActive ? 'caption1Bold' : 'caption1Regular', colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use" }, void 0));
+                return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: item.isActive ? 'caption1Bold' : 'caption1Regular', colorTheme: item.isActive ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }, void 0));
             }
             if (styleTheme === 'main') {
-                return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: item.isActive ? 'caption1Bold' : 'caption1Regular', colorTheme: item.isActive ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }, void 0));
+                return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: "leadParaBold", colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextTertiary', singleLineMode: "use", letterSpacing: "-0.04em" }, void 0));
             }
         };
-        return ((0, jsx_runtime_1.jsxs)(S_TabBarBox, __assign({ "x-pds-name": "DesktopTabBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [(0, jsx_runtime_1.jsx)(S_MainTabBarSpace, { children: itemArray.map(function (item) { return ((0, jsx_runtime_1.jsxs)(S_MainTabItemBox, { children: [(0, jsx_runtime_1.jsx)(S_MainTabItemWrapper, __assign({ text: item.title, styleTheme: styleTheme, isActive: item.isActive, onClick: function (e) { return handelClickTabItem_1(item, e); } }, { children: textLabel_1(item, false) }), void 0), item.isActive && item.subArray && ((0, jsx_runtime_1.jsx)(S_SubTabBarWrapper, { children: item.subArray.map(function (subItem) { return ((0, jsx_runtime_1.jsx)(S_SubTabItemWrapper, __assign({ text: subItem.title, onClick: function (e) { return handelClickTabItem_1(subItem, e); } }, { children: textLabel_1(subItem, true) }), subItem.title)); }) }, void 0))] }, item.title)); }) }, void 0), isSubTabBarActivated && (0, jsx_runtime_1.jsx)(S_SubTabBarSpace, {}, void 0)] }), void 0));
+        return ((0, jsx_runtime_1.jsxs)(S_TabBarBox, __assign({ "x-pds-name": "DesktopTabBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [(0, jsx_runtime_1.jsx)(S_MainTabBarSpace, __assign({ styleTheme: styleTheme, isSubTabBarActivated: isSubTabBarActivated }, { children: itemArray.map(function (item) { return ((0, jsx_runtime_1.jsxs)(S_MainTabItemBox, __assign({ styleTheme: styleTheme }, { children: [(0, jsx_runtime_1.jsx)(S_MainTabItemWrapper, __assign({ text: item.title, styleTheme: styleTheme, isActive: item.isActive, onClick: function (e) { return handelClickTabItem_1(item, e); } }, { children: textLabel_1(item, false) }), void 0), item.isActive && item.subArray && ((0, jsx_runtime_1.jsx)(S_SubTabBarWrapper, { children: item.subArray.map(function (subItem) { return ((0, jsx_runtime_1.jsx)(S_SubTabItemWrapper, __assign({ text: subItem.title, styleTheme: styleTheme, onClick: function (e) { return handelClickTabItem_1(subItem, e); } }, { children: textLabel_1(subItem, true) }), subItem.title)); }) }, void 0))] }), item.title)); }) }), void 0), isSubTabBarActivated && (0, jsx_runtime_1.jsx)(S_SubTabBarSpace, { styleTheme: styleTheme }, void 0)] }), void 0));
     }
     if (textArray) {
         var isSubTabBarActivated = textArray.some(function (item) { return pathname.includes(item.path) && item.subArray; });
@@ -71,13 +74,16 @@ function DesktopTabBar(_a) {
         };
         var textLabel_2 = function (item, isSubText) {
             if (isSubText) {
+                return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: "caption1Bold", colorTheme: pathname.includes(item.path) ? 'usrTextBrandPrimary' : 'sysTextTertiary', singleLineMode: "use" }, void 0));
+            }
+            if (styleTheme === 'content_black') {
                 return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: pathname.includes(item.path) ? 'caption1Bold' : 'caption1Regular', colorTheme: pathname.includes(item.path) ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use" }, void 0));
             }
             if (styleTheme === 'content') {
-                return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: pathname.includes(item.path) ? 'caption1Bold' : 'caption1Regular', colorTheme: pathname.includes(item.path) ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use" }, void 0));
+                return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: pathname.includes(item.path) ? 'caption1Bold' : 'caption1Regular', colorTheme: pathname.includes(item.path) ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }, void 0));
             }
             if (styleTheme === 'main') {
-                return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: pathname.includes(item.path) ? 'caption1Bold' : 'caption1Regular', colorTheme: pathname.includes(item.path) ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }, void 0));
+                return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: "caption1Bold", colorTheme: pathname.includes(item.path) ? 'usrTextBrandPrimary' : 'sysTextTertiary', singleLineMode: "use" }, void 0));
             }
         };
         return ((0, jsx_runtime_1.jsxs)(S_TabBarBox, __assign({ "x-pds-name": "DesktopTabBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [(0, jsx_runtime_1.jsx)(S_MainTabBarSpace, { children: textArray.map(function (item) { return ((0, jsx_runtime_1.jsxs)(S_MainTabItemBox, { children: [(0, jsx_runtime_1.jsx)(S_MainTabItemWrapper, __assign({ isActive: pathname.includes(item.path), styleTheme: styleTheme, text: item.title, onClick: function () { return handleClick_1(item); } }, { children: textLabel_2(item, false) }), void 0), pathname.includes(item.path) && item.subArray && ((0, jsx_runtime_1.jsx)(S_SubTabBarWrapper, { children: item.subArray.map(function (subItem) { return ((0, jsx_runtime_1.jsx)(S_SubTabItemWrapper, __assign({ text: subItem.title, onClick: function () { return handleClick_1(subItem); } }, { children: textLabel_2(subItem, true) }), subItem.title)); }) }, void 0))] }, item.path)); }) }, void 0), isSubTabBarActivated && (0, jsx_runtime_1.jsx)(S_SubTabBarSpace, {}, void 0)] }), void 0));
@@ -85,21 +91,38 @@ function DesktopTabBar(_a) {
     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
 }
 var S_TabBarBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
-var S_MainTabBarSpace = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  height: 40px;\n  padding-left: ", ";\n"], ["\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  height: 40px;\n  padding-left: ", ";\n"])), function (_a) {
+var S_MainTabBarSpace = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  ", ";\n  ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  height: ", ";\n  padding-left: ", ";\n  ", ";\n  ", ";\n"], ["\n  background-color: ", ";\n  ", ";\n  ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  height: ", ";\n  padding-left: ", ";\n  ", ";\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_tabbar_base_area;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_divider;
+    var styleTheme = _a.styleTheme, isSubTabBarActivated = _a.isSubTabBarActivated;
+    return !isSubTabBarActivated && styleTheme === 'main' && "border-bottom: 1px solid #EFF0F3;";
+}, function (_a) {
+    var styleTheme = _a.styleTheme, theme = _a.theme;
+    return styleTheme !== 'main' && "border-bottom: 1px solid " + theme.ui_cpnt_divider + ";";
+}, function (_a) {
+    var styleTheme = _a.styleTheme;
+    return (styleTheme === 'main' ? '52px' : '40px');
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingE;
+}, function (_a) {
+    var styleTheme = _a.styleTheme;
+    return styleTheme === 'main' && "align-items: flex-start";
+}, function (_a) {
+    var styleTheme = _a.styleTheme;
+    return styleTheme === 'main' && "padding-top: 4px";
 });
-var tabIndicator = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  &::after {\n    background-color: ", ";\n    bottom: -1px;\n    content: '';\n    height: 2px;\n    left: 0px;\n    position: absolute;\n    width: 100%;\n    ", ";\n  }\n"], ["\n  &::after {\n    background-color: ", ";\n    bottom: -1px;\n    content: '';\n    height: 2px;\n    left: 0px;\n    position: absolute;\n    width: 100%;\n    ", ";\n  }\n"])), function (_a) {
+var tabIndicator = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  &::after {\n    background-color: ", ";\n    bottom: -1px;\n    content: '';\n    height: ", ";\n    left: 0px;\n    position: absolute;\n    width: 100%;\n    ", ";\n  }\n"], ["\n  &::after {\n    background-color: ", ";\n    bottom: -1px;\n    content: '';\n    height: ", ";\n    left: 0px;\n    position: absolute;\n    width: 100%;\n    ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme, styleTheme = _a.styleTheme;
-    return styleTheme === 'content'
+    return styleTheme === 'content_black'
         ? theme.ui_cpnt_tabbar_border_active_indicator
-        : theme.ui_cpnt_tabbar_border_active_indicator_primary;
+        : styleTheme === 'content'
+            ? theme.ui_cpnt_tabbar_border_active_indicator_primary
+            : theme.ui_cpnt_tabbar_border_active_indicator;
+}, function (_a) {
+    var styleTheme = _a.styleTheme;
+    return (styleTheme === 'main' ? '3px' : '2px');
 }, function (_a) {
     var isActive = _a.isActive;
     return !isActive && "display: none;";
@@ -119,27 +142,36 @@ var textOffset = (0, styled_components_1.css)(templateObject_4 || (templateObjec
     return theme.fontWeight.bold;
 });
 var S_MainTabItemBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-right: ", ";\n  position: relative;\n\n  &:last-child {\n    margin-right: 0;\n  }\n"], ["\n  margin-right: ", ";\n  position: relative;\n\n  &:last-child {\n    margin-right: 0;\n  }\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingD;
+    var theme = _a.theme, styleTheme = _a.styleTheme;
+    return styleTheme === 'main' ? '20px' : theme.spacing.spacingD;
 });
-var S_MainTabItemWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: flex-end;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  height: 100%;\n  padding: 0 ", ";\n  padding-bottom: ", ";\n\n  ", "\n  ", "\n"], ["\n  align-items: flex-end;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  height: 100%;\n  padding: 0 ", ";\n  padding-bottom: ", ";\n\n  ", "\n  ", "\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingA;
+var S_MainTabItemWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: flex-end;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  height: 100%;\n  padding: 0 ", ";\n  padding-bottom: ", ";\n  ", "\n  ", "\n"], ["\n  align-items: flex-end;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  height: 100%;\n  padding: 0 ", ";\n  padding-bottom: ", ";\n  ", "\n  ", "\n"])), function (_a) {
+    var theme = _a.theme, styleTheme = _a.styleTheme;
+    return (styleTheme === 'main' ? 0 : theme.spacing.spacingA);
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingB;
+    var theme = _a.theme, styleTheme = _a.styleTheme;
+    return styleTheme === 'main' ? theme.spacing.spacingA : theme.spacing.spacingB;
 }, tabIndicator, textOffset);
 var S_SubTabBarWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  bottom: -33px;\n  display: flex;\n  height: 32px;\n  left: 0px;\n  position: absolute;\n  width: max-content;\n"], ["\n  bottom: -33px;\n  display: flex;\n  height: 32px;\n  left: 0px;\n  position: absolute;\n  width: max-content;\n"])));
-var S_SubTabBarSpace = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 32px;\n"], ["\n  background-color: ", ";\n  height: 32px;\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_tabbar_base_area_sub;
+var S_SubTabBarSpace = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  background-color: ", ";\n  ", ";\n  height: ", ";\n"], ["\n  background-color: ", ";\n  ", ";\n  height: ", ";\n"])), function (_a) {
+    var theme = _a.theme, styleTheme = _a.styleTheme;
+    return styleTheme !== 'main' && theme.ui_cpnt_tabbar_base_area_sub;
+}, function (_a) {
+    var styleTheme = _a.styleTheme;
+    return styleTheme === 'main' && "border-bottom: 1px solid #EFF0F3;";
+}, function (_a) {
+    var styleTheme = _a.styleTheme;
+    return (styleTheme === 'main' ? '26px' : '32px');
 });
-var S_SubTabItemWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  margin-right: ", ";\n  padding: 0 ", ";\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  ", "\n"], ["\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  margin-right: ", ";\n  padding: 0 ", ";\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  ", "\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingE;
+var S_SubTabItemWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  margin-right: ", ";\n  ", ";\n  ", ";\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  ", "\n"], ["\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  margin-right: ", ";\n  ", ";\n  ", ";\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  ", "\n"])), function (_a) {
+    var theme = _a.theme, styleTheme = _a.styleTheme;
+    return styleTheme === 'main' ? theme.spacing.spacingD : theme.spacing.spacingE;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingA;
+    var theme = _a.theme, styleTheme = _a.styleTheme;
+    return styleTheme !== 'main' && "padding: 0 " + theme.spacing.spacingA + ";";
+}, function (_a) {
+    var theme = _a.theme, styleTheme = _a.styleTheme;
+    return styleTheme === 'main' && "padding-top: " + theme.spacing.spacingA + ";";
 }, textOffset);
 exports.default = DesktopTabBar;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

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

@@ -125,7 +125,7 @@ var ContainersBox = function (_a) {
                         large: (0, jsx_runtime_1.jsx)(Containers_1.StepContainer, { stepType: "step_1152", stepContent: stepContent }, void 0)
                     }[wizardContainerWidthType] }, void 0))] }), void 0) }), void 0));
 };
-var wizardBackgroundStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-image: url('https://publ-statics.s3.ap-northeast-2.amazonaws.com/pds_layout_background_gradient.jpg');\n  background-repeat: no-repeat;\n  background-size: cover;\n  display: flex;\n  justify-content: center;\n"], ["\n  align-items: center;\n  background-image: url('https://publ-statics.s3.ap-northeast-2.amazonaws.com/pds_layout_background_gradient.jpg');\n  background-repeat: no-repeat;\n  background-size: cover;\n  display: flex;\n  justify-content: center;\n"])));
+var wizardBackgroundStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: hsla(242, 100%, 74%, 1);\n  background-image: radial-gradient(at 42% 41%, hsla(202, 100%, 61%, 0.62) 0, transparent 50%),\n    radial-gradient(at 97% 5%, hsla(261, 100%, 40%, 0.49) 0, transparent 50%),\n    radial-gradient(at 88% 41%, hsla(319, 65%, 78%, 0.44) 0, transparent 50%),\n    radial-gradient(at 19% 83%, hsla(157, 100%, 63%, 0.5) 0, transparent 50%),\n    radial-gradient(at 5% 3%, hsla(231, 100%, 61%, 1) 0, transparent 50%),\n    radial-gradient(at 98% 68%, hsla(189, 92%, 78%, 0.58) 0, transparent 50%),\n    radial-gradient(at 40% 90%, hsla(240, 100%, 61%, 0.65) 0, transparent 50%),\n    radial-gradient(at 64% 67%, hsla(166, 100%, 42%, 0.77) 0, transparent 50%),\n    radial-gradient(at 100% 100%, hsla(164, 100%, 52%, 1) 0, transparent 50%);\n  background-repeat: no-repeat;\n  background-size: cover;\n  display: flex;\n  justify-content: center;\n"], ["\n  align-items: center;\n  background-color: hsla(242, 100%, 74%, 1);\n  background-image: radial-gradient(at 42% 41%, hsla(202, 100%, 61%, 0.62) 0, transparent 50%),\n    radial-gradient(at 97% 5%, hsla(261, 100%, 40%, 0.49) 0, transparent 50%),\n    radial-gradient(at 88% 41%, hsla(319, 65%, 78%, 0.44) 0, transparent 50%),\n    radial-gradient(at 19% 83%, hsla(157, 100%, 63%, 0.5) 0, transparent 50%),\n    radial-gradient(at 5% 3%, hsla(231, 100%, 61%, 1) 0, transparent 50%),\n    radial-gradient(at 98% 68%, hsla(189, 92%, 78%, 0.58) 0, transparent 50%),\n    radial-gradient(at 40% 90%, hsla(240, 100%, 61%, 0.65) 0, transparent 50%),\n    radial-gradient(at 64% 67%, hsla(166, 100%, 42%, 0.77) 0, transparent 50%),\n    radial-gradient(at 100% 100%, hsla(164, 100%, 52%, 1) 0, transparent 50%);\n  background-repeat: no-repeat;\n  background-size: cover;\n  display: flex;\n  justify-content: center;\n"])));
 var wizardContainersBoxStyle = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  justify-content: center;\n"], ["\n  justify-content: center;\n"])));
 var wizardCenterBoxStyle = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex: none;\n"], ["\n  flex: none;\n"])));
 var S_Wrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n\n  ", "\n"])), function (_a) {

package/dist/src/sub/DynamicLayout/DynamicLayout.js

@@ -35,6 +35,7 @@ function DynamicLayout(_a) {
             isPreview: isPreview,
             navigationHandler: navigationHandler,
             sectionActionHandler: sectionActionHandler,
+            editingSectionId: editingSectionId,
             programmedSectionComponents: programmedSectionComponents
         } }, { children: [mode === 'EDIT' && onClickEditSection && ((0, jsx_runtime_1.jsx)(EditModeSectionMatcher_1.EditModeSectionMatcher, { editingSectionId: editingSectionId, scrollDownTargetSectionId: scrollDownTargetSectionId, filteredSortedSection: filteredSortedSection, onClickEditSection: onClickEditSection }, void 0)), mode !== 'EDIT' &&
                 (iframeSection ? ((0, jsx_runtime_1.jsx)(SectionMatcher_1.SectionMatcher, __assign({}, iframeSection), iframeSection.id)) : (filteredSortedSection.map(function (section) { return (0, jsx_runtime_1.jsx)(SectionMatcher_1.SectionMatcher, __assign({}, section), section.id); })))] }), void 0));

package/dist/src/sub/DynamicLayout/components/ComponentBlocks/Image/Image.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare type ImagePropTypes = {
+    imageSrc: string;
+    viewType?: 'fit' | 'fill';
+    imagePosition?: 'left-top' | 'left-center' | 'left-bottom' | 'center-top' | 'center-center' | 'center-bottom' | 'right-top' | 'right-center' | 'right-bottom';
+};
+declare const Image: import("react").ForwardRefExoticComponent<ImagePropTypes & import("react").RefAttributes<HTMLImageElement>>;
+export default Image;

package/dist/src/sub/DynamicLayout/components/ComponentBlocks/Image/Image.js

@@ -0,0 +1,46 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var styled_components_1 = __importDefault(require("styled-components"));
+var Image = (0, react_1.forwardRef)(function (_a, ref) {
+    var imageSrc = _a.imageSrc, _b = _a.viewType, viewType = _b === void 0 ? 'fit' : _b, _c = _a.imagePosition, imagePosition = _c === void 0 ? 'center-center' : _c;
+    return (0, jsx_runtime_1.jsx)(S_Image, { ref: ref, src: imageSrc, viewType: viewType, imagePosition: imagePosition }, void 0);
+});
+var S_Image = styled_components_1.default.img(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: ", ";\n  object-fit: ", ";\n  object-fit: ", ";\n  width: ", ";\n"], ["\n  height: ", ";\n  object-fit: ", ";\n  object-fit: ", ";\n  width: ", ";\n"])), function (_a) {
+    var viewType = _a.viewType;
+    return (viewType === 'fit' ? 'auto' : '100%');
+}, function (_a) {
+    var viewType = _a.viewType;
+    switch (viewType) {
+        case 'fit':
+            return 'contain';
+        case 'fill':
+            return 'cover';
+        default:
+            return 'contain';
+    }
+}, function (_a) {
+    var viewType = _a.viewType;
+    switch (viewType) {
+        case 'fit':
+            return 'contain';
+        case 'fill':
+            return 'cover';
+        default:
+            return 'contain';
+    }
+}, function (_a) {
+    var viewType = _a.viewType;
+    return (viewType === 'fit' ? 'auto' : '100%');
+});
+exports.default = Image;
+Image.displayName = 'Image';
+var templateObject_1;

package/dist/src/sub/DynamicLayout/components/ComponentBlocks/Image/index.d.ts

@@ -0,0 +1,2 @@
+import Image, { ImagePropTypes } from './Image';
+export { Image, ImagePropTypes };

package/dist/src/sub/DynamicLayout/components/ComponentBlocks/Image/index.js

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

package/dist/src/sub/DynamicLayout/components/ComponentBlocks/RichText/RichText.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare type RichTextPropTypes = {
+    text: string;
+};
+declare function RichText({ text }: RichTextPropTypes): JSX.Element;
+export default RichText;

package/dist/src/sub/DynamicLayout/components/ComponentBlocks/RichText/RichText.js

@@ -0,0 +1,24 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = __importDefault(require("styled-components"));
+function RichText(_a) {
+    var text = _a.text;
+    return (0, jsx_runtime_1.jsx)(S_RichText, { dangerouslySetInnerHTML: { __html: text } }, void 0);
+}
+var S_RichText = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  line-height: 1.5;\n  text-align: left;\n  white-space: pre-wrap;\n  width: 100%;\n  word-break: break-word;\n\n  a {\n    color: ", ";\n  }\n\n  img {\n    width: 100%;\n  }\n\n  figure {\n    margin: 0;\n    max-width: 100%;\n\n    img {\n      width: 100%;\n    }\n  }\n\n  blockquote {\n    border-left: 4px solid ", ";\n    margin: 4px;\n    padding: 4px;\n\n    p {\n      font-style: oblique;\n      margin: 0;\n    }\n  }\n\n  iframe {\n    border: none;\n  }\n"], ["\n  line-height: 1.5;\n  text-align: left;\n  white-space: pre-wrap;\n  width: 100%;\n  word-break: break-word;\n\n  a {\n    color: ", ";\n  }\n\n  img {\n    width: 100%;\n  }\n\n  figure {\n    margin: 0;\n    max-width: 100%;\n\n    img {\n      width: 100%;\n    }\n  }\n\n  blockquote {\n    border-left: 4px solid ", ";\n    margin: 4px;\n    padding: 4px;\n\n    p {\n      font-style: oblique;\n      margin: 0;\n    }\n  }\n\n  iframe {\n    border: none;\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_papp_post_notice_link;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_98;
+});
+exports.default = RichText;
+var templateObject_1;

package/dist/src/sub/DynamicLayout/components/ComponentBlocks/RichText/index.d.ts

@@ -0,0 +1,2 @@
+import RichText, { RichTextPropTypes } from './RichText';
+export { RichText, RichTextPropTypes };

package/dist/src/sub/DynamicLayout/components/ComponentBlocks/RichText/index.js

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

package/dist/src/sub/DynamicLayout/components/ComponentBlocks/Text/Text.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export declare type TextPropTypes = {
+    text: string;
+    fontFamilyName?: 'Pretendard' | 'sans-serif' | 'serif';
+    fontWeight?: number;
+    fontSize?: number;
+    lineHeight?: number;
+    letterSpacing?: number;
+    textColor?: string;
+    textAlign?: 'left' | 'center' | 'right';
+};
+declare const Text: import("react").ForwardRefExoticComponent<TextPropTypes & import("react").RefAttributes<HTMLParagraphElement>>;
+export default Text;

package/dist/src/sub/DynamicLayout/components/ComponentBlocks/Text/Text.js

@@ -0,0 +1,63 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var styled_components_1 = __importDefault(require("styled-components"));
+var Text = (0, react_1.forwardRef)(function (_a, ref) {
+    var text = _a.text, _b = _a.letterSpacing, letterSpacing = _b === void 0 ? 0 : _b, _c = _a.lineHeight, lineHeight = _c === void 0 ? 1.3 : _c, _d = _a.textAlign, textAlign = _d === void 0 ? 'left' : _d, args = __rest(_a, ["text", "letterSpacing", "lineHeight", "textAlign"]);
+    return ((0, jsx_runtime_1.jsx)(S_Text, __assign({ ref: ref, letterSpacing: letterSpacing, lineHeight: lineHeight, textAlign: textAlign }, args, { children: text }), void 0));
+});
+var S_Text = styled_components_1.default.p(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: auto;\n  letter-spacing: ", "em;\n  line-height: ", ";\n  margin: 0;\n  text-align: ", ";\n  width: auto;\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  height: auto;\n  letter-spacing: ", "em;\n  line-height: ", ";\n  margin: 0;\n  text-align: ", ";\n  width: auto;\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n"])), function (_a) {
+    var letterSpacing = _a.letterSpacing;
+    return letterSpacing;
+}, function (_a) {
+    var lineHeight = _a.lineHeight;
+    return lineHeight;
+}, function (_a) {
+    var textAlign = _a.textAlign;
+    return textAlign;
+}, function (_a) {
+    var fontFamilyName = _a.fontFamilyName;
+    return fontFamilyName && "font-family: " + fontFamilyName;
+}, function (_a) {
+    var fontWeight = _a.fontWeight;
+    return fontWeight && "font-weight: " + fontWeight;
+}, function (_a) {
+    var fontSize = _a.fontSize;
+    return fontSize && "font-size: " + fontSize + "px";
+}, function (_a) {
+    var textColor = _a.textColor;
+    return textColor && "color: " + textColor;
+});
+exports.default = Text;
+Text.displayName = 'Text';
+var templateObject_1;

package/dist/src/sub/DynamicLayout/components/ComponentBlocks/Text/index.d.ts

@@ -0,0 +1,2 @@
+import Text, { TextPropTypes } from './Text';
+export { Text, TextPropTypes };

package/dist/src/sub/DynamicLayout/components/ComponentBlocks/Text/index.js

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