pds-dev-kit-web-test 0.1.10 → 0.2.0

package/dist/src/desktop/layout/LayoutWS/Containers/ContentsContainer/variation/WSI.js

@@ -0,0 +1,117 @@
+"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 __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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = __importStar(require("styled-components"));
+var components_1 = require("../../../../../../common/components");
+var scrollbarStyle_1 = require("../../../../../../common/styles/scroll/scrollbarStyle");
+var WSI = function (_a) {
+    var content1 = _a.content1, content2 = _a.content2, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2, overrideContainer1ColorKey = _a.overrideContainer1ColorKey, overrideContainer2ColorKey = _a.overrideContainer2ColorKey;
+    return ((0, jsx_runtime_1.jsxs)(S_Box, { children: [(0, jsx_runtime_1.jsx)(S_ContentsContainer1, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WSI", layoutType: layoutType, containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {}, void 0)) : ((0, jsx_runtime_1.jsx)(S_ContentsArea1, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WSI", 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": "WSI", layoutType: layoutType }, { children: content1 }), void 0) }), void 0)) }), void 0), (0, jsx_runtime_1.jsx)(S_ContentsContainer2, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WSI", layoutType: layoutType, containerColor: containerColor, overrideContainer2ColorKey: overrideContainer2ColorKey }, { children: isLoadingContainer2 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {}, void 0)) : ((0, jsx_runtime_1.jsx)(S_ContentsArea2, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WSI", layoutType: layoutType, areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content2, __assign({ "x-pds-name": "Content2", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WSI", layoutType: layoutType }, { children: content2 }), void 0) }), void 0)) }), void 0)] }, void 0));
+};
+var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
+    return overrideContainer1ColorKey && theme[overrideContainer1ColorKey];
+});
+var overrideStyleContainer2 = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme, overrideContainer2ColorKey = _a.overrideContainer2ColorKey;
+    return overrideContainer2ColorKey && theme[overrideContainer2ColorKey];
+});
+var S_Box = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  height: 100%;\n"], ["\n  display: flex;\n  height: 100%;\n"])));
+var WSI_1Container1Style = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  overflow-x: hidden;\n  overflow-y: auto;\n  width: 720px;\n"], ["\n  overflow-x: hidden;\n  overflow-y: auto;\n  width: 720px;\n"])));
+var S_ContentsContainer1 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  ", ";\n  ", ";\n\n  ", "\n  ", "\n"], ["\n  background-color: ", ";\n  ", ";\n  ", ";\n\n  ", "\n  ", "\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_contentscontainer01_background;
+}, function (_a) {
+    var layoutType = _a.layoutType;
+    return ({
+        WSI_1: WSI_1Container1Style
+    }[layoutType]);
+}, function (_a) {
+    var containerColor = _a.containerColor;
+    return "background-color: " + containerColor;
+}, scrollbarStyle_1.scrollbarStyle, overrideStyleContainer1);
+var WSI_1Container2Style = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  flex: 1;\n  height: 100%;\n"], ["\n  flex: 1;\n  height: 100%;\n"])));
+var S_ContentsContainer2 = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background-color: ", ";\n  border-left: 1px solid ", ";\n  ", ";\n  ", ";\n\n  ", "\n  ", "\n"], ["\n  background-color: ", ";\n  border-left: 1px solid ", ";\n  ", ";\n  ", ";\n\n  ", "\n  ", "\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_contentscontainer02_background;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_container_divider;
+}, function (_a) {
+    var layoutType = _a.layoutType;
+    return ({
+        WSI_1: WSI_1Container2Style
+    }[layoutType]);
+}, function (_a) {
+    var containerColor = _a.containerColor;
+    return "background-color: " + containerColor;
+}, scrollbarStyle_1.scrollbarStyle, overrideStyleContainer2);
+var WSI_1Area1Style = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  padding-bottom: 88px;\n  padding-left: 24px;\n  padding-right: 24px;\n"], ["\n  padding-bottom: 88px;\n  padding-left: 24px;\n  padding-right: 24px;\n"])));
+var S_ContentsArea1 = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-top: 24px;\n  ", ";\n  ", ";\n"], ["\n  box-sizing: border-box;\n  padding-top: 24px;\n  ", ";\n  ", ";\n"])), function (_a) {
+    var layoutType = _a.layoutType;
+    return ({
+        WSI_1: WSI_1Area1Style
+    }[layoutType]);
+}, function (_a) {
+    var areaColor = _a.areaColor;
+    return "background-color: " + areaColor;
+});
+var WSI_1Area2Style = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  height: 100%;\n  padding-top: 24px;\n  width: 240px;\n"], ["\n  height: 100%;\n  padding-top: 24px;\n  width: 240px;\n"])));
+var S_ContentsArea2 = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  box-sizing: border-box;\n  ", ";\n  ", ";\n"], ["\n  box-sizing: border-box;\n  ", ";\n  ", ";\n"])), function (_a) {
+    var layoutType = _a.layoutType;
+    return ({
+        WSI_1: WSI_1Area2Style
+    }[layoutType]);
+}, function (_a) {
+    var areaColor = _a.areaColor;
+    return "background-color: " + areaColor;
+});
+var S_Content1 = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
+    var layoutType = _a.layoutType;
+    return ({
+        WSI_1: ''
+    }[layoutType]);
+});
+var WSI_1Content2Style = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  height: 100%;\n  overflow: hidden;\n"], ["\n  height: 100%;\n  overflow: hidden;\n"])));
+var S_Content2 = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
+    var layoutType = _a.layoutType;
+    return ({
+        WSI_1: WSI_1Content2Style
+    }[layoutType]);
+});
+exports.default = WSI;
+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/LayoutWS/Containers/ContentsContainer/variation/index.d.ts

@@ -6,3 +6,4 @@ export { default as WSE } from './WSE';
 export { default as WSF } from './WSF';
 export { default as WSG } from './WSG';
 export { default as WSH } from './WSH';
+export { default as WSI } from './WSI';

package/dist/src/desktop/layout/LayoutWS/Containers/ContentsContainer/variation/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.WSH = exports.WSG = exports.WSF = exports.WSE = exports.WSD = exports.WSC = exports.WSB = exports.WSA = void 0;
+exports.WSI = exports.WSH = exports.WSG = exports.WSF = exports.WSE = exports.WSD = exports.WSC = exports.WSB = exports.WSA = void 0;
 var WSA_1 = require("./WSA");
 Object.defineProperty(exports, "WSA", { enumerable: true, get: function () { return __importDefault(WSA_1).default; } });
 var WSB_1 = require("./WSB");
@@ -20,3 +20,5 @@ var WSG_1 = require("./WSG");
 Object.defineProperty(exports, "WSG", { enumerable: true, get: function () { return __importDefault(WSG_1).default; } });
 var WSH_1 = require("./WSH");
 Object.defineProperty(exports, "WSH", { enumerable: true, get: function () { return __importDefault(WSH_1).default; } });
+var WSI_1 = require("./WSI");
+Object.defineProperty(exports, "WSI", { enumerable: true, get: function () { return __importDefault(WSI_1).default; } });

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { UiColors } from '../../../../common';
 export declare type ContainersBoxProps = {
-    layoutType: 'WSA_1' | 'WSB_1' | 'WSB_2' | 'WSC_1' | 'WSD_1' | 'WSE_1' | 'WSF_1' | 'WSF_2' | 'WSF_3' | 'WSF_4' | 'WSF_5' | 'WSF_6' | 'WSF_7' | 'WSG_1' | 'WSG_2' | 'WSG_3' | 'WSG_4' | 'WSG_5' | 'WSH_1';
+    layoutType: 'WSA_1' | 'WSB_1' | 'WSB_2' | 'WSC_1' | 'WSD_1' | 'WSE_1' | 'WSF_1' | 'WSF_2' | 'WSF_3' | 'WSF_4' | 'WSF_5' | 'WSF_6' | 'WSF_7' | 'WSG_1' | 'WSG_2' | 'WSG_3' | 'WSG_4' | 'WSG_5' | 'WSH_1' | 'WSI_1';
     pageMenuContent?: JSX.Element;
     tabMenuContent?: JSX.Element;
     content1?: JSX.Element;

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

@@ -39,7 +39,7 @@ var styled_components_1 = __importStar(require("styled-components"));
 var components_1 = require("../../../../../../common/components");
 var WTA = 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)(S_ContentsContainer, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WTA", layoutType: layoutType, containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {}, void 0)) : ((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": "WTA", 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": "WTA" }, { children: content1 }), void 0) }), void 0)) }), void 0));
+    return ((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": "WTA", layoutType: layoutType, containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(S_ContentsArea, __assign({ layoutType: layoutType, areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {}, void 0) }), void 0)) : ((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": "WTA", 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": "WTA" }, { children: content1 }), void 0) }), void 0)) }), void 0));
 };
 var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var theme = _a.theme, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;

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

@@ -39,7 +39,7 @@ var styled_components_1 = __importStar(require("styled-components"));
 var components_1 = require("../../../../../../common/components");
 var WTK = function (_a) {
     var content1 = _a.content1, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, overrideContainer1ColorKey = _a.overrideContainer1ColorKey, container1Ref = _a.container1Ref;
-    return ((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": "WTK", layoutType: layoutType, containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey, ref: container1Ref }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {}, void 0)) : ((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": "WTK", 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": "WTK", layoutType: layoutType }, { children: content1 }), void 0) }), void 0)) }), void 0));
+    return ((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": "WTK", layoutType: layoutType, containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey, ref: container1Ref }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(S_ContentsArea, __assign({ layoutType: layoutType, areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {}, void 0) }), void 0)) : ((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": "WTK", 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": "WTK", layoutType: layoutType }, { children: content1 }), void 0) }), void 0)) }), void 0));
 };
 var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var theme = _a.theme, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;

package/dist/src/mobile/common/components/TextFieldBase/TextFieldBase.d.ts

@@ -30,6 +30,9 @@ export declare type TextFieldBaseProps = {
     deleteIconColor?: UiColors;
     isFocused?: boolean;
     autoComplete?: string;
+    stepperMode?: 'none' | 'use';
+    innerSpinButtonSize?: 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72;
+    step?: number;
     onBlur?: (e: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement>) => void;
     onChange?: (e: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => void;
     onFocus?: (e: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement>) => void;
@@ -38,5 +41,5 @@ export declare type TextFieldBaseProps = {
     onTarget?: () => void;
     [x: string]: any;
 } & Record<string, any>;
-declare function TextFieldBase({ name, hintText, defaultText, textAlign, validation, preventBlankMode, enterSubmitMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, state, colorTheme, min, max, maxLength, textSize, textWeight, textPadding, fieldHeight, deleteIconMode, deleteIconSize, deleteIconColor, isFocused, autoComplete, onBlur, onChange, onFocus, onKeyDown, onKeyUp, onTarget, ...rest }: TextFieldBaseProps): JSX.Element;
+declare function TextFieldBase({ name, hintText, defaultText, textAlign, validation, preventBlankMode, enterSubmitMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, state, colorTheme, min, max, maxLength, textSize, textWeight, textPadding, fieldHeight, deleteIconMode, deleteIconSize, deleteIconColor, isFocused, autoComplete, stepperMode, innerSpinButtonSize, step, onBlur, onChange, onFocus, onKeyDown, onKeyUp, onTarget, ...rest }: TextFieldBaseProps): JSX.Element;
 export default TextFieldBase;

package/dist/src/mobile/common/components/TextFieldBase/TextFieldBase.js

@@ -46,15 +46,18 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable better-styled-components/sort-declarations-alphabetically */
 /* eslint-disable react/jsx-no-bind */
 var react_1 = require("react");
 var react_hook_form_1 = require("react-hook-form");
+var components_1 = require("../../../../hybrid/components");
 var styled_components_1 = __importStar(require("styled-components"));
 var common_1 = require("../../../../common");
 var IconButton_1 = require("../../../components/IconButton");
+var constants_1 = require("./constants");
 function TextFieldBase(_a) {
-    var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, _b = _a.textAlign, textAlign = _b === void 0 ? 'left' : _b, validation = _a.validation, _c = _a.preventBlankMode, preventBlankMode = _c === void 0 ? 'none' : _c, _d = _a.enterSubmitMode, enterSubmitMode = _d === void 0 ? 'none' : _d, _e = _a.textLineType, textLineType = _e === void 0 ? 'single' : _e, multiRows = _a.multiRows, autoMinRows = _a.autoMinRows, autoMaxRows = _a.autoMaxRows, _f = _a.inputType, inputType = _f === void 0 ? 'text' : _f, _g = _a.state, state = _g === void 0 ? 'normal' : _g, _h = _a.colorTheme, colorTheme = _h === void 0 ? 'none' : _h, min = _a.min, max = _a.max, _j = _a.maxLength, maxLength = _j === void 0 ? Infinity : _j, _k = _a.textSize, textSize = _k === void 0 ? 'form2' : _k, _l = _a.textWeight, textWeight = _l === void 0 ? 'normal' : _l, textPadding = _a.textPadding, _m = _a.fieldHeight, fieldHeight = _m === void 0 ? 48 : _m, _o = _a.deleteIconMode, deleteIconMode = _o === void 0 ? 'use' : _o, _p = _a.deleteIconSize, deleteIconSize = _p === void 0 ? 20 : _p, _q = _a.deleteIconColor, deleteIconColor = _q === void 0 ? 'ui_cpnt_button_icon_disabled' : _q, isFocused = _a.isFocused, _r = _a.autoComplete, autoComplete = _r === void 0 ? 'on' : _r, onBlur = _a.onBlur, onChange = _a.onChange, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown, onKeyUp = _a.onKeyUp, onTarget = _a.onTarget, rest = __rest(_a, ["name", "hintText", "defaultText", "textAlign", "validation", "preventBlankMode", "enterSubmitMode", "textLineType", "multiRows", "autoMinRows", "autoMaxRows", "inputType", "state", "colorTheme", "min", "max", "maxLength", "textSize", "textWeight", "textPadding", "fieldHeight", "deleteIconMode", "deleteIconSize", "deleteIconColor", "isFocused", "autoComplete", "onBlur", "onChange", "onFocus", "onKeyDown", "onKeyUp", "onTarget"]);
-    var _s = (0, react_hook_form_1.useFormContext)(), register = _s.register, setValue = _s.setValue, getValues = _s.getValues, clearErrors = _s.clearErrors;
+    var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, _b = _a.textAlign, textAlign = _b === void 0 ? 'left' : _b, validation = _a.validation, _c = _a.preventBlankMode, preventBlankMode = _c === void 0 ? 'none' : _c, _d = _a.enterSubmitMode, enterSubmitMode = _d === void 0 ? 'none' : _d, _e = _a.textLineType, textLineType = _e === void 0 ? 'single' : _e, multiRows = _a.multiRows, autoMinRows = _a.autoMinRows, autoMaxRows = _a.autoMaxRows, _f = _a.inputType, inputType = _f === void 0 ? 'text' : _f, _g = _a.state, state = _g === void 0 ? 'normal' : _g, _h = _a.colorTheme, colorTheme = _h === void 0 ? 'none' : _h, min = _a.min, max = _a.max, _j = _a.maxLength, maxLength = _j === void 0 ? Infinity : _j, _k = _a.textSize, textSize = _k === void 0 ? 'form2' : _k, _l = _a.textWeight, textWeight = _l === void 0 ? 'normal' : _l, textPadding = _a.textPadding, _m = _a.fieldHeight, fieldHeight = _m === void 0 ? 48 : _m, _o = _a.deleteIconMode, deleteIconMode = _o === void 0 ? 'use' : _o, _p = _a.deleteIconSize, deleteIconSize = _p === void 0 ? 20 : _p, _q = _a.deleteIconColor, deleteIconColor = _q === void 0 ? 'ui_cpnt_button_icon_disabled' : _q, isFocused = _a.isFocused, _r = _a.autoComplete, autoComplete = _r === void 0 ? 'on' : _r, _s = _a.stepperMode, stepperMode = _s === void 0 ? 'none' : _s, innerSpinButtonSize = _a.innerSpinButtonSize, step = _a.step, onBlur = _a.onBlur, onChange = _a.onChange, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown, onKeyUp = _a.onKeyUp, onTarget = _a.onTarget, rest = __rest(_a, ["name", "hintText", "defaultText", "textAlign", "validation", "preventBlankMode", "enterSubmitMode", "textLineType", "multiRows", "autoMinRows", "autoMaxRows", "inputType", "state", "colorTheme", "min", "max", "maxLength", "textSize", "textWeight", "textPadding", "fieldHeight", "deleteIconMode", "deleteIconSize", "deleteIconColor", "isFocused", "autoComplete", "stepperMode", "innerSpinButtonSize", "step", "onBlur", "onChange", "onFocus", "onKeyDown", "onKeyUp", "onTarget"]);
+    var _t = (0, react_hook_form_1.useFormContext)(), register = _t.register, setValue = _t.setValue, getValues = _t.getValues, clearErrors = _t.clearErrors;
     var timeout;
     (0, react_1.useEffect)(function () {
         return function () { return clearTimeout(timeout); };
@@ -116,7 +119,7 @@ function TextFieldBase(_a) {
         }
     }
     var textAreaRef = (0, react_1.useRef)(null);
-    var _t = register(name, validation), ref = _t.ref, refRest = __rest(_t, ["ref"]);
+    var _u = register(name, validation), ref = _u.ref, refRest = __rest(_u, ["ref"]);
     (0, react_1.useEffect)(function () {
         if (textAreaRef === null || textAreaRef.current === null) {
             return;
@@ -177,7 +180,7 @@ function TextFieldBase(_a) {
     }
     var S_TextFieldBase = function () {
         if (textLineType === 'single') {
-            return ((0, jsx_runtime_1.jsxs)(S_InputWrapper, { children: [(0, jsx_runtime_1.jsx)(S_Input, __assign({}, register(name, validation), rest, { name: name, defaultValue: defaultText, placeholder: hintText, textAlign: textAlign, type: inputType, state: state, readOnly: state === 'read_only', disabled: state === 'disabled', maxLength: maxLength, textSize: textSize, textWeight: textWeight, textPadding: textPadding, colorTheme: colorTheme, min: min, max: max, autoComplete: autoComplete, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, ref: ref }), void 0), deleteIconMode === 'use' && isFocused && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: "ic_delete", baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: deleteIconSize, iconColorKey: deleteIconColor, iconFillType: "fill", state: state === 'disabled' ? 'disabled' : 'normal', tabIndex: -1, onMouseDown: deleteValue }, void 0))] }, void 0));
+            return ((0, jsx_runtime_1.jsxs)(S_InputWrapper, { children: [(0, jsx_runtime_1.jsx)(S_Input, __assign({}, register(name, validation), rest, { name: name, defaultValue: defaultText, placeholder: hintText, textAlign: textAlign, type: inputType, state: state, readOnly: state === 'read_only', disabled: state === 'disabled', maxLength: maxLength, textSize: textSize, textWeight: textWeight, textPadding: textPadding, colorTheme: colorTheme, min: min, max: max, autoComplete: autoComplete, stepperMode: stepperMode, innerSpinButtonSize: innerSpinButtonSize, step: step, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, ref: ref }), void 0), stepperMode === 'use' && ((0, jsx_runtime_1.jsxs)(S_IconBox, __assign({ innerSpinButtonSize: innerSpinButtonSize }, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_up", fillType: "fill", size: innerSpinButtonSize }, void 0), (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_down", fillType: "fill", size: innerSpinButtonSize }, void 0)] }), void 0)), deleteIconMode === 'use' && isFocused && stepperMode === 'none' && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: "ic_delete", baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: deleteIconSize, iconColorKey: deleteIconColor, iconFillType: "fill", state: state === 'disabled' ? 'disabled' : 'normal', tabIndex: -1, onMouseDown: deleteValue }, void 0))] }, void 0));
         }
         if (textLineType === 'multi') {
             return ((0, jsx_runtime_1.jsx)(S_Multi, __assign({}, register(name, validation), rest, { name: name, defaultValue: defaultText, placeholder: hintText, textAlign: textAlign, state: state, readOnly: state === 'read_only' && true, disabled: state === 'disabled' && true, maxLength: maxLength, rows: multiRows, textSize: textSize, textWeight: textWeight, textPadding: textPadding, colorTheme: colorTheme, autoComplete: autoComplete, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, ref: ref }), void 0));
@@ -191,7 +194,7 @@ function TextFieldBase(_a) {
     };
     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: S_TextFieldBase() }, void 0);
 }
-var S_InputWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  width: 100%;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  width: 100%;\n"])));
+var S_InputWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  position: relative;\n  width: 100%;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  position: relative;\n  width: 100%;\n"])));
 var read_only = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
     var theme = _a.theme, colorTheme = _a.colorTheme;
     return colorTheme &&
@@ -210,7 +213,7 @@ var disabled = (0, styled_components_1.css)(templateObject_3 || (templateObject_
             transparent: theme.ui_cpnt_textfield_text_colortheme_transparent_disabled
         }[colorTheme];
 });
-var basicStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  color: ", ";\n  display: inline-flex;\n  font-size: ", ";\n  font-weight: ", ";\n  height: 100%;\n  justify-content: center;\n  line-height: ", ";\n  outline: 0;\n  overflow: hidden;\n  padding: 0;\n  text-align: ", ";\n  width: 100%;\n  &::placeholder {\n    color: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    line-height: ", ";\n  }\n\n  ", ";\n  ", "\n"], ["\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  color: ", ";\n  display: inline-flex;\n  font-size: ", ";\n  font-weight: ", ";\n  height: 100%;\n  justify-content: center;\n  line-height: ", ";\n  outline: 0;\n  overflow: hidden;\n  padding: 0;\n  text-align: ", ";\n  width: 100%;\n  &::placeholder {\n    color: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    line-height: ", ";\n  }\n\n  ", ";\n  ", "\n"])), function (_a) {
+var basicStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  color: ", ";\n  display: inline-flex;\n  font-size: ", ";\n  font-weight: ", ";\n  height: 100%;\n  justify-content: center;\n  line-height: ", ";\n  outline: 0;\n  overflow: hidden;\n  padding: 0;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  text-align: ", ";\n  width: 100%;\n  &::placeholder {\n    color: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    line-height: ", ";\n  }\n\n  ", ";\n  ", "\n"], ["\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  color: ", ";\n  display: inline-flex;\n  font-size: ", ";\n  font-weight: ", ";\n  height: 100%;\n  justify-content: center;\n  line-height: ", ";\n  outline: 0;\n  overflow: hidden;\n  padding: 0;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  text-align: ", ";\n  width: 100%;\n  &::placeholder {\n    color: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    line-height: ", ";\n  }\n\n  ", ";\n  ", "\n"])), function (_a) {
     var theme = _a.theme, colorTheme = _a.colorTheme;
     return colorTheme &&
         {
@@ -259,11 +262,33 @@ var basicStyle = (0, styled_components_1.css)(templateObject_4 || (templateObjec
     var textPadding = _a.textPadding;
     return textPadding && "padding: " + textPadding;
 });
-var S_Input = styled_components_1.default.input(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n  line-height: ", ";\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  ::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"], ["\n  ", "\n  line-height: ", ";\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  ::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"])), basicStyle, function (_a) {
+var inputInnerSpinButtonStyle = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  -webkit-appearance: none;\n  cursor: pointer;\n  height: ", ";\n  margin-left: ", ";\n  opacity: 1;\n  width: ", ";\n"], ["\n  -webkit-appearance: none;\n  cursor: pointer;\n  height: ", ";\n  margin-left: ", ";\n  opacity: 1;\n  width: ", ";\n"])), function (_a) {
+    var innerSpinButtonSize = _a.innerSpinButtonSize;
+    return innerSpinButtonSize && innerSpinButtonSize * 2 + "px";
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingB;
+}, function (_a) {
+    var innerSpinButtonSize = _a.innerSpinButtonSize;
+    return innerSpinButtonSize && innerSpinButtonSize + "px";
+});
+var S_Input = styled_components_1.default.input(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", "\n  line-height: ", ";\n  z-index: 20;\n\n  ::-webkit-inner-spin-button {\n    ", "\n  }\n  ::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"], ["\n  ", "\n  line-height: ", ";\n  z-index: 20;\n\n  ::-webkit-inner-spin-button {\n    ", "\n  }\n  ::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"])), basicStyle, function (_a) {
     var theme = _a.theme;
     return theme.desktopLineHeight.singleLine;
+}, function (_a) {
+    var stepperMode = _a.stepperMode, type = _a.type;
+    return stepperMode === 'use' && type === 'number'
+        ? inputInnerSpinButtonStyle
+        : '-webkit-appearance: none; margin: 0;';
+});
+var S_IconBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n  height: ", ";\n  justify-content: center;\n  position: absolute;\n  right: ", "px;\n  width: ", ";\n  z-index: 1;\n"], ["\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n  height: ", ";\n  justify-content: center;\n  position: absolute;\n  right: ", "px;\n  width: ", ";\n  z-index: 1;\n"])), function (_a) {
+    var innerSpinButtonSize = _a.innerSpinButtonSize;
+    return innerSpinButtonSize && innerSpinButtonSize * 2 + "px";
+}, constants_1.PIXEL_FOR_ICONS_CENTER, function (_a) {
+    var innerSpinButtonSize = _a.innerSpinButtonSize;
+    return innerSpinButtonSize && innerSpinButtonSize + "px";
 });
-var S_Auto = styled_components_1.default.textarea(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", "\n  display: block;\n  overflow-y: auto;\n  resize: none;\n  ", "\n  ", ";\n"], ["\n  ", "\n  display: block;\n  overflow-y: auto;\n  resize: none;\n  ", "\n  ", ";\n"])), basicStyle, function (_a) {
+var S_Auto = styled_components_1.default.textarea(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  ", "\n  display: block;\n  overflow-y: auto;\n  resize: none;\n  ", "\n  ", ";\n"], ["\n  ", "\n  display: block;\n  overflow-y: auto;\n  resize: none;\n  ", "\n  ", ";\n"])), basicStyle, function (_a) {
     var autoMaxRows = _a.autoMaxRows, textSize = _a.textSize, fieldHeight = _a.fieldHeight;
     return autoMaxRows &&
         fieldHeight &&
@@ -278,6 +303,6 @@ var S_Auto = styled_components_1.default.textarea(templateObject_6 || (templateO
             Number(common_1.desktopLineHeight[textSize]) *
             autoMinRows + "px;";
 });
-var S_Multi = styled_components_1.default.textarea(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", "\n  display: block;\n  overflow-y: auto;\n  resize: none;\n"], ["\n  ", "\n  display: block;\n  overflow-y: auto;\n  resize: none;\n"])), basicStyle);
+var S_Multi = styled_components_1.default.textarea(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  ", "\n  display: block;\n  overflow-y: auto;\n  resize: none;\n"], ["\n  ", "\n  display: block;\n  overflow-y: auto;\n  resize: none;\n"])), basicStyle);
 exports.default = TextFieldBase;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

package/dist/src/mobile/common/components/TextFieldBase/constants.d.ts

@@ -0,0 +1 @@
+export declare const PIXEL_FOR_ICONS_CENTER = 1;

package/dist/src/mobile/common/components/TextFieldBase/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PIXEL_FOR_ICONS_CENTER = void 0;
+exports.PIXEL_FOR_ICONS_CENTER = 1;

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

@@ -71,7 +71,7 @@ function MobileHeaderBar(_a) {
                 return ((0, jsx_runtime_1.jsxs)(S_ProfileWrapper, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { src: imageSrc, shapeType: "circular", width: 40, ratio: "1_1", scaleType: "cover", borderMode: "use" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "caption1Regular", singleLineMode: "use", wordBreak: "break_all", ellipsisMode: "use", lineLimit: 1 }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }, void 0)] }, void 0));
             }
             case 'image': {
-                return ((0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { src: imageSrc, shapeType: "rectangle", height: 32, scaleType: "cover", width: 160 }, void 0));
+                return ((0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { src: imageSrc, shapeType: "rectangle", height: 32, scaleType: "contain", width: 160 }, void 0));
             }
         }
     };

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

@@ -32,6 +32,8 @@ export declare type TextFieldProps = {
     min?: number;
     customWidth?: string;
     autoComplete?: string;
+    numberStepperMode?: 'none' | 'use';
+    numberStep?: number;
     onBlur?: (e: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement>) => void;
     onChange?: (e: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => void;
     onClickIBtn1?: () => void;
@@ -41,5 +43,5 @@ export declare type TextFieldProps = {
     onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement> | React.KeyboardEvent<HTMLTextAreaElement>) => void;
     onTarget?: () => void;
 };
-declare function TextField({ name, hintText, defaultText, textAlign, prefixText, suffixText, validation, validationPoint, preventBlankMode, enterSubmitMode, size, responsiveMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, state, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, colorTheme, max, maxLength, min, customWidth, autoComplete, onBlur, onChange, onClickIBtn1, onClickIBtn2, onFocus, onKeyUp, onKeyDown, onTarget }: TextFieldProps): JSX.Element;
+declare function TextField({ name, hintText, defaultText, textAlign, prefixText, suffixText, validation, validationPoint, preventBlankMode, enterSubmitMode, size, responsiveMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, state, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, colorTheme, max, maxLength, min, customWidth, autoComplete, numberStepperMode, numberStep, onBlur, onChange, onClickIBtn1, onClickIBtn2, onFocus, onKeyUp, onKeyDown, onTarget }: TextFieldProps): JSX.Element;
 export default TextField;

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

@@ -46,7 +46,7 @@ var IconButton_1 = require("../IconButton");
 var TextLabel_1 = require("../TextLabel");
 function TextField(_a) {
     var _b;
-    var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, _c = _a.textAlign, textAlign = _c === void 0 ? 'left' : _c, prefixText = _a.prefixText, suffixText = _a.suffixText, validation = _a.validation, _d = _a.validationPoint, validationPoint = _d === void 0 ? 'onBlur' : _d, _e = _a.preventBlankMode, preventBlankMode = _e === void 0 ? 'none' : _e, _f = _a.enterSubmitMode, enterSubmitMode = _f === void 0 ? 'none' : _f, _g = _a.size, size = _g === void 0 ? 'large' : _g, _h = _a.responsiveMode, responsiveMode = _h === void 0 ? 'none' : _h, _j = _a.textLineType, textLineType = _j === void 0 ? 'single' : _j, _k = _a.multiRows, multiRows = _k === void 0 ? 8 : _k, _l = _a.autoMinRows, autoMinRows = _l === void 0 ? 8 : _l, autoMaxRows = _a.autoMaxRows, _m = _a.inputType, inputType = _m === void 0 ? 'text' : _m, _o = _a.state, state = _o === void 0 ? 'normal' : _o, iBtn1IconName = _a.iBtn1IconName, _p = _a.iBtn1IconFillType, iBtn1IconFillType = _p === void 0 ? 'line' : _p, iBtn2IconName = _a.iBtn2IconName, _q = _a.iBtn2IconFillType, iBtn2IconFillType = _q === void 0 ? 'line' : _q, _r = _a.colorTheme, colorTheme = _r === void 0 ? 'none' : _r, max = _a.max, maxLength = _a.maxLength, min = _a.min, customWidth = _a.customWidth, _s = _a.autoComplete, autoComplete = _s === void 0 ? 'on' : _s, onBlur = _a.onBlur, onChange = _a.onChange, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onFocus = _a.onFocus, onKeyUp = _a.onKeyUp, onKeyDown = _a.onKeyDown, onTarget = _a.onTarget;
+    var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, _c = _a.textAlign, textAlign = _c === void 0 ? 'left' : _c, prefixText = _a.prefixText, suffixText = _a.suffixText, validation = _a.validation, _d = _a.validationPoint, validationPoint = _d === void 0 ? 'onBlur' : _d, _e = _a.preventBlankMode, preventBlankMode = _e === void 0 ? 'none' : _e, _f = _a.enterSubmitMode, enterSubmitMode = _f === void 0 ? 'none' : _f, _g = _a.size, size = _g === void 0 ? 'large' : _g, _h = _a.responsiveMode, responsiveMode = _h === void 0 ? 'none' : _h, _j = _a.textLineType, textLineType = _j === void 0 ? 'single' : _j, _k = _a.multiRows, multiRows = _k === void 0 ? 8 : _k, _l = _a.autoMinRows, autoMinRows = _l === void 0 ? 8 : _l, autoMaxRows = _a.autoMaxRows, _m = _a.inputType, inputType = _m === void 0 ? 'text' : _m, _o = _a.state, state = _o === void 0 ? 'normal' : _o, iBtn1IconName = _a.iBtn1IconName, _p = _a.iBtn1IconFillType, iBtn1IconFillType = _p === void 0 ? 'line' : _p, iBtn2IconName = _a.iBtn2IconName, _q = _a.iBtn2IconFillType, iBtn2IconFillType = _q === void 0 ? 'line' : _q, _r = _a.colorTheme, colorTheme = _r === void 0 ? 'none' : _r, max = _a.max, maxLength = _a.maxLength, min = _a.min, customWidth = _a.customWidth, _s = _a.autoComplete, autoComplete = _s === void 0 ? 'on' : _s, _t = _a.numberStepperMode, numberStepperMode = _t === void 0 ? 'none' : _t, numberStep = _a.numberStep, onBlur = _a.onBlur, onChange = _a.onChange, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onFocus = _a.onFocus, onKeyUp = _a.onKeyUp, onKeyDown = _a.onKeyDown, onTarget = _a.onTarget;
     var basicThemeIconColors = {
         normal: 'ui_cpnt_button_icon_default',
         read_only: 'ui_cpnt_button_icon_default',
@@ -62,9 +62,9 @@ function TextField(_a) {
         read_only: 'ui_cpnt_textfield_icon_colortheme_transparent_readonly',
         disabled: 'ui_cpnt_textfield_icon_colortheme_transparent_disabled'
     };
-    var _t = (0, react_1.useState)(false), isFocused = _t[0], setIsFocused = _t[1];
-    var _u = (0, react_hook_form_1.useFormContext)(), register = _u.register, trigger = _u.trigger, errors = _u.formState.errors;
-    var _v = register(name, validation), validateOnChange = _v.onChange, validateOnBlur = _v.onBlur;
+    var _u = (0, react_1.useState)(false), isFocused = _u[0], setIsFocused = _u[1];
+    var _v = (0, react_hook_form_1.useFormContext)(), register = _v.register, trigger = _v.trigger, errors = _v.formState.errors;
+    var _w = register(name, validation), validateOnChange = _w.onChange, validateOnBlur = _w.onBlur;
     var isError = Object.keys(errors).some(function (error) { return error === name; });
     var handleClickIBtn1 = function () {
         if (onClickIBtn1) {
@@ -136,7 +136,7 @@ function TextField(_a) {
                     break;
                 }
             }
-            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [prefixText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: prefixText, styleTheme: "caption1Bold", colorTheme: "sysTextTertiary", singleLineMode: "use" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0)] }, void 0)), (0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, textAlign: textAlign, validation: validation, preventBlankMode: preventBlankMode, enterSubmitMode: enterSubmitMode, textLineType: "single", inputType: inputType, state: state, colorTheme: colorTheme, min: min, max: max, maxLength: maxLength, textSize: "form2", textWeight: "normal", deleteIconMode: "use", deleteIconSize: size === 'large' || size === 'rlarge' ? 20 : 16, deleteIconColor: deleteIconColor, isFocused: isFocused, autoComplete: autoComplete, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown }, void 0), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [suffixText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: suffixText, styleTheme: "caption1Bold", colorTheme: "sysTextTertiary", textAlign: "right", singleLineMode: "use" }, void 0), size === 'large' ? ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0)) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }, void 0))] }, void 0)), iBtn2IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iBtn2IconName, baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: size === 'large' || size === 'rlarge' ? 20 : 16, iconColorKey: colorTheme &&
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [prefixText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: prefixText, styleTheme: "caption1Bold", colorTheme: "sysTextTertiary", singleLineMode: "use" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0)] }, void 0)), (0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, textAlign: inputType === 'number' && numberStepperMode === 'use' ? 'right' : textAlign, validation: validation, preventBlankMode: preventBlankMode, enterSubmitMode: enterSubmitMode, textLineType: "single", inputType: inputType, state: state, colorTheme: colorTheme, min: min, max: max, maxLength: maxLength, textSize: "form2", textWeight: "normal", deleteIconMode: "use", deleteIconSize: size === 'large' || size === 'rlarge' ? 20 : 16, deleteIconColor: deleteIconColor, isFocused: isFocused, autoComplete: autoComplete, stepperMode: inputType === 'number' && numberStepperMode === 'use' ? 'use' : 'none', innerSpinButtonSize: size === 'small' ? 12 : 16, step: numberStep, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown }, void 0), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [suffixText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: suffixText, styleTheme: "caption1Bold", colorTheme: "sysTextTertiary", textAlign: "right", singleLineMode: "use" }, void 0), size === 'large' ? ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0)) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }, void 0))] }, void 0)), iBtn2IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iBtn2IconName, baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: size === 'large' || size === 'rlarge' ? 20 : 16, iconColorKey: colorTheme &&
                                     {
                                         none: basicThemeIconColors[state],
                                         dark: darkThemeIconColors[state],

package/dist/src/sub/AdminList/ToolBar/ToolBar.js

@@ -73,7 +73,7 @@ function ToolBar(_a) {
             onClickIBtn3();
         }
     };
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_ToolBarBox, { children: [(0, jsx_runtime_1.jsx)(S_FilterBox, { children: isShowSearchField ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: searchMode === 'use' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_3.Spacing, { size: "spacing_e", spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(react_hook_form_1.FormProvider, __assign({}, methods, { children: (0, jsx_runtime_1.jsx)(components_1.Form, __assign({ onSubmit: handleSubmit(onSubmit) }, { children: (0, jsx_runtime_1.jsx)(SearchField_1.default, { name: "searchField", hintText: searchFieldHintText, defaultText: searchFieldDefaultText, onClickArrowIBtn: handleArrowIBtnClick, onClickSearchIBtn: handleSearchIBtnClick, customWidth: "424px" }, void 0) }), void 0) }), void 0)] }, void 0)) }, void 0)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [searchMode === 'use' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_3.Spacing, { size: "spacing_d", spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(S_SearchIconWrapper, { children: (0, jsx_runtime_1.jsx)(components_2.IconButton, { fillType: "fill", baseSize: "small", iconSize: 24, shapeType: "rectangle", iconName: "ic_search", iconFillType: "fill", iconColorKey: "ui_cpnt_list_icon_01", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleSearchFieldShowIBtnClick }, void 0) }, void 0)] }, void 0)), chipMode === 'use' && chipTextArray && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_3.Spacing, { size: "spacing_d", spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(ChipList_1.default, { textArray: chipTextArray, value: chipValue, onClickChip: handleChipClick }, void 0)] }, void 0))] }, void 0)) }, void 0), (0, jsx_runtime_1.jsx)(S_IconButtonBox, { children: iBtnMode !== 'none' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [iBtnMode === 'iBtn_amount3' && iBtn3IconName && ((0, jsx_runtime_1.jsx)(components_2.IconButton, { fillType: "fill", baseSize: "medium", iconSize: 24, shapeType: "rectangle", iconName: iBtn3IconName, iconFillType: iBtn3IconFillType, iconColorKey: "ui_cpnt_list_icon_01", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleIBtn3Click }, void 0)), (iBtnMode === 'iBtn_amount2' || iBtnMode === 'iBtn_amount3') && iBtn2IconName && ((0, jsx_runtime_1.jsx)(components_2.IconButton, { fillType: "fill", baseSize: "medium", iconSize: 24, shapeType: "rectangle", iconName: iBtn2IconName, iconFillType: iBtn2IconFillType, iconColorKey: "ui_cpnt_list_icon_01", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleIBtn2Click }, void 0)), iBtn1IconName && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_2.IconButton, { fillType: "fill", baseSize: "medium", iconSize: 24, shapeType: "rectangle", iconName: iBtn1IconName, iconFillType: iBtn1IconFillType, iconColorKey: "ui_cpnt_list_icon_01", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleIBtn1Click }, void 0), (0, jsx_runtime_1.jsx)(components_3.Spacing, { size: "spacing_d", spacingType: "width" }, void 0)] }, void 0))] }, void 0)) }, void 0)] }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_ToolBarBox, { children: [(0, jsx_runtime_1.jsx)(S_FilterBox, { children: isShowSearchField ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: searchMode === 'use' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_3.Spacing, { size: "spacing_e", spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(react_hook_form_1.FormProvider, __assign({}, methods, { children: (0, jsx_runtime_1.jsx)(components_1.Form, __assign({ onSubmit: handleSubmit(onSubmit) }, { children: (0, jsx_runtime_1.jsx)(SearchField_1.default, { name: "searchField", hintText: searchFieldHintText, defaultText: searchFieldDefaultText, onClickArrowIBtn: handleArrowIBtnClick, onClickSearchIBtn: handleSearchIBtnClick, customWidth: "424px" }, void 0) }), void 0) }), void 0)] }, void 0)) }, void 0)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [searchMode === 'use' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_3.Spacing, { size: "spacing_d", spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(S_SearchIconWrapper, { children: (0, jsx_runtime_1.jsx)(components_2.IconButton, { fillType: "fill", baseSize: "small", iconSize: 24, shapeType: "rectangle", iconName: "ic_search", iconFillType: "fill", iconColorKey: "ui_cpnt_list_icon_01", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleSearchFieldShowIBtnClick }, void 0) }, void 0)] }, void 0)), chipMode === 'use' && chipTextArray && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_3.Spacing, { size: searchMode === 'use' ? 'spacing_d' : 'spacing_e', spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(ChipList_1.default, { textArray: chipTextArray, value: chipValue, onClickChip: handleChipClick }, void 0)] }, void 0))] }, void 0)) }, void 0), (0, jsx_runtime_1.jsx)(S_IconButtonBox, { children: iBtnMode !== 'none' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [iBtnMode === 'iBtn_amount3' && iBtn3IconName && ((0, jsx_runtime_1.jsx)(components_2.IconButton, { fillType: "fill", baseSize: "medium", iconSize: 24, shapeType: "rectangle", iconName: iBtn3IconName, iconFillType: iBtn3IconFillType, iconColorKey: "ui_cpnt_list_icon_01", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleIBtn3Click }, void 0)), (iBtnMode === 'iBtn_amount2' || iBtnMode === 'iBtn_amount3') && iBtn2IconName && ((0, jsx_runtime_1.jsx)(components_2.IconButton, { fillType: "fill", baseSize: "medium", iconSize: 24, shapeType: "rectangle", iconName: iBtn2IconName, iconFillType: iBtn2IconFillType, iconColorKey: "ui_cpnt_list_icon_01", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleIBtn2Click }, void 0)), iBtn1IconName && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_2.IconButton, { fillType: "fill", baseSize: "medium", iconSize: 24, shapeType: "rectangle", iconName: iBtn1IconName, iconFillType: iBtn1IconFillType, iconColorKey: "ui_cpnt_list_icon_01", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleIBtn1Click }, void 0), (0, jsx_runtime_1.jsx)(components_3.Spacing, { size: "spacing_d", spacingType: "width" }, void 0)] }, void 0))] }, void 0)) }, void 0)] }, void 0) }, void 0));
 }
 var S_ToolBarBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: flex-start;\n  display: flex;\n  justify-content: space-between;\n  min-height: 40px;\n"], ["\n  align-items: flex-start;\n  display: flex;\n  justify-content: space-between;\n  min-height: 40px;\n"])));
 var S_FilterBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));

package/dist/src/sub/DynamicLayout/DynamicLayout.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import type { DynamicLayoutProps } from './types';
-declare function DynamicLayout({ device, mode, isPreview, sections, scrollDownTargetSectionId, editingSectionId, navigationHandler, sectionActionHandler, onClickEditSection }: DynamicLayoutProps): JSX.Element;
+declare function DynamicLayout({ device, mode, isPreview, sections, scrollDownTargetSectionId, editingSectionId, navigationHandler, sectionActionHandler, onClickEditSection, programmedSectionComponents }: DynamicLayoutProps): JSX.Element;
 export default DynamicLayout;

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

@@ -25,11 +25,18 @@ var EditModeSectionMatcher_1 = require("./components/EditModeSectionMatcher");
 var SectionMatcher_1 = require("./components/SectionMatcher");
 var dynamicLayoutContext_1 = require("./dynamicLayoutContext");
 function DynamicLayout(_a) {
-    var device = _a.device, _b = _a.mode, mode = _b === void 0 ? 'NORMAL' : _b, isPreview = _a.isPreview, sections = _a.sections, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, editingSectionId = _a.editingSectionId, navigationHandler = _a.navigationHandler, sectionActionHandler = _a.sectionActionHandler, onClickEditSection = _a.onClickEditSection;
+    var device = _a.device, _b = _a.mode, mode = _b === void 0 ? 'NORMAL' : _b, isPreview = _a.isPreview, sections = _a.sections, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, editingSectionId = _a.editingSectionId, navigationHandler = _a.navigationHandler, sectionActionHandler = _a.sectionActionHandler, onClickEditSection = _a.onClickEditSection, programmedSectionComponents = _a.programmedSectionComponents;
     var filteredSortedSection = __spreadArray([], sections, true).filter(function (section) { return section.display; })
         .sort(function (a, b) { return a.order - b.order; });
     var iframeSection = filteredSortedSection.find(function (section) { return section.manifest.schema === 'EXP_IFRAME' && section.display; });
-    return ((0, jsx_runtime_1.jsxs)(dynamicLayoutContext_1.dynamicLayoutContext.Provider, __assign({ value: { device: device, mode: mode, isPreview: isPreview, navigationHandler: navigationHandler, sectionActionHandler: sectionActionHandler } }, { children: [mode === 'EDIT' && onClickEditSection && ((0, jsx_runtime_1.jsx)(EditModeSectionMatcher_1.EditModeSectionMatcher, { editingSectionId: editingSectionId, scrollDownTargetSectionId: scrollDownTargetSectionId, filteredSortedSection: filteredSortedSection, onClickEditSection: onClickEditSection }, void 0)), mode !== 'EDIT' &&
+    return ((0, jsx_runtime_1.jsxs)(dynamicLayoutContext_1.dynamicLayoutContext.Provider, __assign({ value: {
+            device: device,
+            mode: mode,
+            isPreview: isPreview,
+            navigationHandler: navigationHandler,
+            sectionActionHandler: sectionActionHandler,
+            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));
 }
 exports.default = DynamicLayout;

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare type RichTextPropTypes = {
+    text: string;
+    style: React.CSSProperties;
+};
+declare function RichText({ text, style }: 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, style = _a.style;
+    return (0, jsx_runtime_1.jsx)(S_RichText, { style: style, dangerouslySetInnerHTML: { __html: text } }, void 0);
+}
+var S_RichText = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  /* NOTE: \uAD1C\uCC2E\uC740\uC9C0? */\n  height: 100%;\n  line-height: 1.5;\n  /* NOTE: \uAD1C\uCC2E\uC740\uC9C0? */\n  overflow: hidden;\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    /* NOTE: \uAD1C\uCC2E\uC740\uC9C0? */\n    width: 100%;\n  }\n"], ["\n  /* NOTE: \uAD1C\uCC2E\uC740\uC9C0? */\n  height: 100%;\n  line-height: 1.5;\n  /* NOTE: \uAD1C\uCC2E\uC740\uC9C0? */\n  overflow: hidden;\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    /* NOTE: \uAD1C\uCC2E\uC740\uC9C0? */\n    width: 100%;\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 from './RichText';
+export { RichText };

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

@@ -0,0 +1,78 @@
+/// <reference types="react" />
+declare const customChrome: {
+    readonly noheader: "noheader";
+    readonly nofooter: "nofooter";
+    readonly noborders: "noborders";
+    readonly noscrollbar: "noscrollbar";
+    readonly transparent: "transparent";
+};
+declare type TwitterTimelinePropTypes = {
+    /**
+     * 임베드할 트위터 유저의 id 값 입니다.
+     */
+    userId: string;
+    /**
+     * 임베드시 보여줄 트윗의 개수입니다. 최소 1에서 20까지 설정할 수 있습니다.
+     */
+    tweetLimit?: number;
+    /**
+     * 다른 트윗 또는 계정에 대한 답글 트윗 표시 여부를 결정합니다.
+     */
+    showReplies?: boolean;
+    /**
+     * 임베드할 트위터 타임라인의 컬러 theme 입니다.
+     */
+    theme?: 'dark' | 'light';
+    /**
+     * 렌더링된 위젯에 지정된 아리아 예의 동작을 적용합니다. 새 트윗이 타임라인 상단에 추가되어 화면 리더에 영향을 줄 수 있습니다.
+     *
+     * @types polite: 변경 사항이 있지만 사용자의 작업을 방해하지 않는다는 의미입니다. 즉, 변경 사항이 있을 때 스크린 리더는 사용자 작업을 중단하지 않고 알립니다.
+     *
+     * @types assertive: 변경 사항이 즉시 사용자에게 알려져야 함을 의미합니다. 이 속성 값은 사용자 작업을 방해할 수 있으므로 신중하게 사용해야 합니다.
+     *
+     * @types rude: 변경 사항이 사용자의 작업을 방해하거나 중단할 수 있음을 나타냅니다. 이 값은 더욱 강력한 우선순위를 가지며, 사용자의 작업을 더 강제로 중단시킬 수 있습니다.
+     */
+    ariaPolite?: 'polite' | 'assertive' | 'rude';
+    /**
+     * 타임라인과 사이트의 임베드된 페이지를 맞춤 추천 및 맞춤 광고 등의 목적으로 사용할지 여부를 결정합니다.
+     */
+    dnt?: boolean;
+    /**
+     * 임베드할 트위터 타임라인 위젯의 디자인 요소 표시를 결정합니다.
+     *
+     * @types noheader: 위젯의 헤더를 숨깁니다.
+     *
+     * @types nofooter: 위젯의 푸터를 숨깁니다.
+     *
+     * @types noborders: 위젯 영역을 둘러싼 테두리와 트윗을 구분하는 테두리를 포함하여 위젯 내의 모든 테두리를 제거합니다.
+     *
+     * @types noscrollbar: 기본 타임라인 스크롤바(표시된 경우)를 자르고 숨깁니다. 표준 사용자 인터페이스 구성 요소를 숨기면 웹사이트의 접근성에 영향을 줄 수 있다는 점을 고려하세요.
+     *
+     * @types transparent: 위젯의 배경색을 제거합니다.
+     */
+    customChrome?: (keyof typeof customChrome)[];
+    /**
+     * 임베드할 트위터 타임라인 위젯의 너비를 결정합니다. 최소 너비 180픽셀, 최대 너비 520픽셀로 상위 요소의 너비에 맞게 자동으로 조정됩니다.
+     */
+    width?: number;
+    /**
+     * 임베드할 트위터 타임라인 위젯의 높이를 결정합니다.
+     */
+    height?: number;
+    /**
+     * 트위터 스크립트가 로드 되기 전 혹은 로드 실패시 보여지는 컴포넌트입니다.
+     * a 태그 내부에 들어가기 때문에 로딩과는 다른 용도로 사용됩니다.
+     */
+    fallback?: React.ReactNode;
+};
+/**
+ * 트위터의 Profile Timeline 임베드 컴포넌트입니다.
+ *
+ * Profile Timeline 가이드: https://developer.twitter.com/en/docs/twitter-for-websites/timelines/guides/profile-timeline
+ *
+ * Parameter Reference: https://developer.twitter.com/en/docs/twitter-for-websites/timelines/guides/parameter-reference
+ *
+ * 트위터 표시 요구 약관: https://developer.twitter.com/en/developer-terms/display-requirements
+ */
+declare function TwitterTimeline({ userId, tweetLimit, showReplies, theme, ariaPolite, dnt, customChrome, width, height, fallback }: TwitterTimelinePropTypes): JSX.Element;
+export default TwitterTimeline;