pds-dev-kit-web 1.9.14 → 1.9.16

package/dist/src/GlobalStyle.js

@@ -5,7 +5,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var styled_components_1 = require("styled-components");
-var GlobalStyle = (0, styled_components_1.createGlobalStyle)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-jp.css');\n  \n  html {\n    height: 100%;\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n    width: 100%;\n  }\n\n  body {\n    font-family: Pretendard JP, -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    height: 100%;\n    margin: 0;\n    -ms-overflow-style: none; /* IE and Edge */\n    scrollbar-width: none; /* Firefox */\n    width: 100%;\n  }\n\n  body::-webkit-scrollbar {\n    display: none; /* Chrome, Safari, Opera */\n  }\n\n  #root {\n    height: 100%;\n    width: 100%;\n  }\n\n  div, span, textarea, ul {\n    font-family: Pretendard JP, -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n    font-stretch: normal;\n    font-style: normal;\n    letter-spacing: normal;\n    -ms-overflow-style: none; /* IE and Edge */\n    scrollbar-width: none; /* Firefox */\n  }\n\n  div::-webkit-scrollbar, span::-webkit-scrollbar, textarea::-webkit-scrollbar, ul::-webkit-scrollbar {\n    display: none; /* Chrome, Safari, Opera */\n  }\n\n  input {\n    font-family: Pretendard JP, -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n    font-stretch: normal;\n    font-style: normal;\n    letter-spacing: normal;\n  }\n\n  a,\n  [type='checkbox'],\n  [type='radio'] {\n    color: inherit;\n    -webkit-tap-highlight-color: rgba(26, 26, 26, 0.301961);\n    text-decoration: none;\n  }\n\n  code {\n    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;\n  }\n\n  button {\n    cursor: pointer;\n    font-family: inherit;\n    outline: none;\n  }\n\ninput:-webkit-autofill,\ninput:-webkit-autofill:hover,\ninput:-webkit-autofill:focus,\ninput:-webkit-autofill:active {\n  -webkit-text-fill-color: ", " !important;\n  transition: background-color 9999s ease-in-out 0s !important;\n}\n"], ["\n  @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-jp.css');\n  \n  html {\n    height: 100%;\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n    width: 100%;\n  }\n\n  body {\n    font-family: Pretendard JP, -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    height: 100%;\n    margin: 0;\n    -ms-overflow-style: none; /* IE and Edge */\n    scrollbar-width: none; /* Firefox */\n    width: 100%;\n  }\n\n  body::-webkit-scrollbar {\n    display: none; /* Chrome, Safari, Opera */\n  }\n\n  #root {\n    height: 100%;\n    width: 100%;\n  }\n\n  div, span, textarea, ul {\n    font-family: Pretendard JP, -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n    font-stretch: normal;\n    font-style: normal;\n    letter-spacing: normal;\n    -ms-overflow-style: none; /* IE and Edge */\n    scrollbar-width: none; /* Firefox */\n  }\n\n  div::-webkit-scrollbar, span::-webkit-scrollbar, textarea::-webkit-scrollbar, ul::-webkit-scrollbar {\n    display: none; /* Chrome, Safari, Opera */\n  }\n\n  input {\n    font-family: Pretendard JP, -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n    font-stretch: normal;\n    font-style: normal;\n    letter-spacing: normal;\n  }\n\n  a,\n  [type='checkbox'],\n  [type='radio'] {\n    color: inherit;\n    -webkit-tap-highlight-color: rgba(26, 26, 26, 0.301961);\n    text-decoration: none;\n  }\n\n  code {\n    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;\n  }\n\n  button {\n    cursor: pointer;\n    font-family: inherit;\n    outline: none;\n  }\n\ninput:-webkit-autofill,\ninput:-webkit-autofill:hover,\ninput:-webkit-autofill:focus,\ninput:-webkit-autofill:active {\n  -webkit-text-fill-color: ", " !important;\n  transition: background-color 9999s ease-in-out 0s !important;\n}\n"])), function (_a) {
+var GlobalStyle = (0, styled_components_1.createGlobalStyle)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\nhtml {\n    height: 100%;\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n    width: 100%;\n  }\n\n  body {\n    font-family: Pretendard JP, -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    height: 100%;\n    margin: 0;\n    -ms-overflow-style: none; /* IE and Edge */\n    scrollbar-width: none; /* Firefox */\n    width: 100%;\n  }\n\n  body::-webkit-scrollbar {\n    display: none; /* Chrome, Safari, Opera */\n  }\n\n  #root {\n    height: 100%;\n    width: 100%;\n  }\n\n  div, span, textarea, ul {\n    font-family: Pretendard JP, -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n    font-stretch: normal;\n    font-style: normal;\n    letter-spacing: normal;\n    -ms-overflow-style: none; /* IE and Edge */\n    scrollbar-width: none; /* Firefox */\n  }\n\n  div::-webkit-scrollbar, span::-webkit-scrollbar, textarea::-webkit-scrollbar, ul::-webkit-scrollbar {\n    display: none; /* Chrome, Safari, Opera */\n  }\n\n  input {\n    font-family: Pretendard JP, -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n    font-stretch: normal;\n    font-style: normal;\n    letter-spacing: normal;\n  }\n\n  a,\n  [type='checkbox'],\n  [type='radio'] {\n    color: inherit;\n    -webkit-tap-highlight-color: rgba(26, 26, 26, 0.301961);\n    text-decoration: none;\n  }\n\n  code {\n    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;\n  }\n\n  button {\n    cursor: pointer;\n    font-family: inherit;\n    outline: none;\n  }\n\ninput:-webkit-autofill,\ninput:-webkit-autofill:hover,\ninput:-webkit-autofill:focus,\ninput:-webkit-autofill:active {\n  -webkit-text-fill-color: ", " !important;\n  transition: background-color 9999s ease-in-out 0s !important;\n}\n"], ["\nhtml {\n    height: 100%;\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n    width: 100%;\n  }\n\n  body {\n    font-family: Pretendard JP, -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    height: 100%;\n    margin: 0;\n    -ms-overflow-style: none; /* IE and Edge */\n    scrollbar-width: none; /* Firefox */\n    width: 100%;\n  }\n\n  body::-webkit-scrollbar {\n    display: none; /* Chrome, Safari, Opera */\n  }\n\n  #root {\n    height: 100%;\n    width: 100%;\n  }\n\n  div, span, textarea, ul {\n    font-family: Pretendard JP, -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n    font-stretch: normal;\n    font-style: normal;\n    letter-spacing: normal;\n    -ms-overflow-style: none; /* IE and Edge */\n    scrollbar-width: none; /* Firefox */\n  }\n\n  div::-webkit-scrollbar, span::-webkit-scrollbar, textarea::-webkit-scrollbar, ul::-webkit-scrollbar {\n    display: none; /* Chrome, Safari, Opera */\n  }\n\n  input {\n    font-family: Pretendard JP, -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n    font-stretch: normal;\n    font-style: normal;\n    letter-spacing: normal;\n  }\n\n  a,\n  [type='checkbox'],\n  [type='radio'] {\n    color: inherit;\n    -webkit-tap-highlight-color: rgba(26, 26, 26, 0.301961);\n    text-decoration: none;\n  }\n\n  code {\n    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;\n  }\n\n  button {\n    cursor: pointer;\n    font-family: inherit;\n    outline: none;\n  }\n\ninput:-webkit-autofill,\ninput:-webkit-autofill:hover,\ninput:-webkit-autofill:focus,\ninput:-webkit-autofill:active {\n  -webkit-text-fill-color: ", " !important;\n  transition: background-color 9999s ease-in-out 0s !important;\n}\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_textfield_text_typed;
 });

package/dist/src/common/components/Navigations/ContextTextLabelNav.d.ts

@@ -2,11 +2,10 @@
 import { ForwardedRefType } from '../../types';
 declare type Props = {
     to: string;
-    isActive?: boolean;
     text: string;
     openNewTab: boolean;
     preventLineChange?: boolean;
     onClick?: () => void;
 };
-declare function ContextTextLabelNav({ to, text, openNewTab, isActive, preventLineChange, onClick }: Props, ref: ForwardedRefType<HTMLAnchorElement>): JSX.Element;
+declare function ContextTextLabelNav({ to, text, openNewTab, preventLineChange, onClick }: Props, ref: ForwardedRefType<HTMLAnchorElement>): JSX.Element;
 export default ContextTextLabelNav;

package/dist/src/common/components/Navigations/ContextTextLabelNav.js

@@ -9,7 +9,7 @@ var hybrid_1 = require("../../../hybrid");
 var BoxLayout_1 = require("../BoxLayout");
 var NavLink_1 = __importDefault(require("./NavLink"));
 function ContextTextLabelNav(_a, ref) {
-    var to = _a.to, text = _a.text, openNewTab = _a.openNewTab, _b = _a.isActive, isActive = _b === void 0 ? false : _b, _c = _a.preventLineChange, preventLineChange = _c === void 0 ? false : _c, onClick = _a.onClick;
+    var to = _a.to, text = _a.text, openNewTab = _a.openNewTab, _b = _a.preventLineChange, preventLineChange = _b === void 0 ? false : _b, onClick = _a.onClick;
     return preventLineChange ? (react_1.default.createElement(NavLink_1.default, { onClick: onClick, ref: ref, to: to, openNewTab: openNewTab, style: { minWidth: '100%', width: 'max-content' } },
         react_1.default.createElement(BoxLayout_1.Row, null,
             react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" }),

package/dist/src/common/decorators/withFormProvider.js

@@ -23,6 +23,7 @@ var components_1 = require("../components");
 var withFormProvider = function (storyFn) {
     var methods = (0, react_hook_form_1.useForm)({ mode: 'onChange' });
     var handleSubmit = function (data) {
+        // eslint-disable-next-line no-console
         console.log('submit success', data);
     };
     return (react_1.default.createElement(react_hook_form_1.FormProvider, __assign({}, methods),

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

@@ -5,6 +5,7 @@ export declare type TextFieldBaseProps = {
     name: Path<IFormValues>;
     hintText?: PDSTextType;
     defaultText?: PDSTextType;
+    textAlign?: 'left' | 'center' | 'right';
     validation?: {
         [key: string]: any;
     };
@@ -38,5 +39,5 @@ export declare type TextFieldBaseProps = {
     inputRef?: any;
     [x: string]: any;
 } & Record<string, any>;
-declare function TextFieldBase({ name, hintText, defaultText, 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, inputRef, ...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, onBlur, onChange, onFocus, onKeyDown, onKeyUp, onTarget, inputRef, ...rest }: TextFieldBaseProps): JSX.Element;
 export default TextFieldBase;

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

@@ -52,8 +52,8 @@ var styled_components_1 = __importStar(require("styled-components"));
 var common_1 = require("../../../../common");
 var IconButton_1 = require("../../../components/IconButton");
 function TextFieldBase(_a) {
-    var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, validation = _a.validation, _b = _a.preventBlankMode, preventBlankMode = _b === void 0 ? 'none' : _b, _c = _a.enterSubmitMode, enterSubmitMode = _c === void 0 ? 'none' : _c, _d = _a.textLineType, textLineType = _d === void 0 ? 'single' : _d, multiRows = _a.multiRows, autoMinRows = _a.autoMinRows, autoMaxRows = _a.autoMaxRows, _e = _a.inputType, inputType = _e === void 0 ? 'text' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, _g = _a.colorTheme, colorTheme = _g === void 0 ? 'none' : _g, min = _a.min, max = _a.max, _h = _a.maxLength, maxLength = _h === void 0 ? Infinity : _h, _j = _a.textSize, textSize = _j === void 0 ? 'form2' : _j, _k = _a.textWeight, textWeight = _k === void 0 ? 'normal' : _k, textPadding = _a.textPadding, _l = _a.fieldHeight, fieldHeight = _l === void 0 ? 48 : _l, _m = _a.deleteIconMode, deleteIconMode = _m === void 0 ? 'use' : _m, _o = _a.deleteIconSize, deleteIconSize = _o === void 0 ? 20 : _o, _p = _a.deleteIconColor, deleteIconColor = _p === void 0 ? 'ui_cpnt_button_icon_disabled' : _p, isFocused = _a.isFocused, _q = _a.autoComplete, autoComplete = _q === void 0 ? 'on' : _q, onBlur = _a.onBlur, onChange = _a.onChange, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown, onKeyUp = _a.onKeyUp, onTarget = _a.onTarget, inputRef = _a.inputRef, rest = __rest(_a, ["name", "hintText", "defaultText", "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", "inputRef"]);
-    var _r = (0, react_hook_form_1.useFormContext)(), register = _r.register, setValue = _r.setValue, getValues = _r.getValues, clearErrors = _r.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, onBlur = _a.onBlur, onChange = _a.onChange, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown, onKeyUp = _a.onKeyUp, onTarget = _a.onTarget, inputRef = _a.inputRef, 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", "inputRef"]);
+    var _s = (0, react_hook_form_1.useFormContext)(), register = _s.register, setValue = _s.setValue, getValues = _s.getValues, clearErrors = _s.clearErrors;
     var timeout;
     (0, react_1.useEffect)(function () {
         return function () { return clearTimeout(timeout); };
@@ -115,7 +115,7 @@ function TextFieldBase(_a) {
         }
     }
     var textAreaRef = (0, react_1.useRef)(null);
-    var _s = register(name, validation), ref = _s.ref, refRest = __rest(_s, ["ref"]);
+    var _t = register(name, validation), ref = _t.ref, refRest = __rest(_t, ["ref"]);
     (0, react_1.useEffect)(function () {
         if (textAreaRef === null || textAreaRef.current === null) {
             return;
@@ -177,7 +177,7 @@ function TextFieldBase(_a) {
     var S_TextFieldBase = function () {
         if (textLineType === 'single') {
             return (react_1.default.createElement(S_InputWrapper, null,
-                react_1.default.createElement(S_Input, __assign({}, register(name, validation), rest, { name: name, defaultValue: defaultText, placeholder: hintText, 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: function (e) {
+                react_1.default.createElement(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: function (e) {
                         ref(e);
                         if (inputRef) {
                             inputRef.current = e;
@@ -186,7 +186,7 @@ function TextFieldBase(_a) {
                 deleteIconMode === 'use' && isFocused && (react_1.default.createElement(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 }))));
         }
         if (textLineType === 'multi') {
-            return (react_1.default.createElement(S_Multi, __assign({}, register(name, validation), rest, { name: name, defaultValue: defaultText, placeholder: hintText, 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: function (e) {
+            return (react_1.default.createElement(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: function (e) {
                     ref(e);
                     if (inputRef) {
                         inputRef.current = e;
@@ -194,7 +194,7 @@ function TextFieldBase(_a) {
                 } })));
         }
         if (textLineType === 'auto') {
-            return (react_1.default.createElement(S_Auto, __assign({}, refRest, rest, { name: name, defaultValue: defaultText, autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, placeholder: hintText, state: state, readOnly: state === 'read_only' && true, disabled: state === 'disabled' && true, maxLength: maxLength, textSize: textSize, textWeight: textWeight, textPadding: textPadding, fieldHeight: fieldHeight, colorTheme: colorTheme, autoComplete: autoComplete, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, ref: function (e) {
+            return (react_1.default.createElement(S_Auto, __assign({}, refRest, rest, { name: name, defaultValue: defaultText, placeholder: hintText, textAlign: textAlign, autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, state: state, readOnly: state === 'read_only' && true, disabled: state === 'disabled' && true, maxLength: maxLength, textSize: textSize, textWeight: textWeight, textPadding: textPadding, fieldHeight: fieldHeight, colorTheme: colorTheme, autoComplete: autoComplete, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, ref: function (e) {
                     ref(e);
                     if (textAreaRef) {
                         textAreaRef.current = e;
@@ -226,7 +226,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  display: inline-flex;\n  justify-content: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  color: ", ";\n  cursor: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  height: 100%;\n  line-height: ", ";\n  outline: 0;\n  overflow: hidden;\n  padding: 0;\n  width: 100%;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  &::placeholder {\n    color: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    line-height: ", ";\n  }\n\n  ", ";\n  ", "\n"], ["\n  display: inline-flex;\n  justify-content: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  color: ", ";\n  cursor: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  height: 100%;\n  line-height: ", ";\n  outline: 0;\n  overflow: hidden;\n  padding: 0;\n  width: 100%;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\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  display: inline-flex;\n  justify-content: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  color: ", ";\n  cursor: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  text-align: ", ";\n  height: 100%;\n  line-height: ", ";\n  outline: 0;\n  overflow: hidden;\n  padding: 0;\n  width: 100%;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  &::placeholder {\n    color: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    line-height: ", ";\n  }\n\n  ", ";\n  ", "\n"], ["\n  display: inline-flex;\n  justify-content: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  color: ", ";\n  cursor: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  text-align: ", ";\n  height: 100%;\n  line-height: ", ";\n  outline: 0;\n  overflow: hidden;\n  padding: 0;\n  width: 100%;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\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 &&
         {
@@ -243,6 +243,9 @@ var basicStyle = (0, styled_components_1.css)(templateObject_4 || (templateObjec
 }, function (_a) {
     var textWeight = _a.textWeight;
     return common_1.fontWeight[textWeight];
+}, function (_a) {
+    var textAlign = _a.textAlign;
+    return textAlign;
 }, function (_a) {
     var textSize = _a.textSize;
     return common_1.desktopLineHeight[textSize];

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

@@ -31,7 +31,11 @@ var defaultPaginationTextArray = [
     }
 ];
 function AdminListHeader(_a) {
-    var _b = _a.headerBarSize, headerBarSize = _b === void 0 ? 'regular' : _b, headerBarTitleText = _a.headerBarTitleText, _c = _a.itemCountUnit, itemCountUnit = _c === void 0 ? 15 : _c, _d = _a.currentPage, currentPage = _d === void 0 ? 1 : _d, _e = _a.totalPage, totalPage = _e === void 0 ? 1 : _e, contentText = _a.contentText, filterBar = _a.filterBar, _f = _a.dropdownTextArray, dropdownTextArray = _f === void 0 ? defaultPaginationTextArray : _f, dropdownDefaultValue = _a.dropdownDefaultValue, onChangeCount = _a.onChangeCount, onClickNextButton = _a.onClickNextButton, onClickPrevButton = _a.onClickPrevButton;
+    var _b = _a.headerBarSize, headerBarSize = _b === void 0 ? 'regular' : _b, headerBarTitleText = _a.headerBarTitleText, 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _c = _a.itemCountUnit, 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    itemCountUnit = _c === void 0 ? 15 : _c, _d = _a.currentPage, currentPage = _d === void 0 ? 1 : _d, _e = _a.totalPage, totalPage = _e === void 0 ? 1 : _e, contentText = _a.contentText, filterBar = _a.filterBar, _f = _a.dropdownTextArray, dropdownTextArray = _f === void 0 ? defaultPaginationTextArray : _f, dropdownDefaultValue = _a.dropdownDefaultValue, onChangeCount = _a.onChangeCount, onClickNextButton = _a.onClickNextButton, onClickPrevButton = _a.onClickPrevButton;
     return (react_1.default.createElement(S_AdminListHeader, { "x-pds-name": "AdminListHeader", "x-pds-element-type": "component", "x-pds-device-type": "desktop" },
         react_1.default.createElement(HeaderBar_1.default, { titleText: headerBarTitleText, size: headerBarSize, currentPage: currentPage, totalPage: totalPage, dropdownTextArray: dropdownTextArray, dropdownDefaultValue: dropdownDefaultValue, onChangeDropdown: onChangeCount, onClickIBtn1: onClickNextButton, onClickIBtn2: onClickPrevButton }),
         headerBarTitleText && !contentText && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d" }),

package/dist/src/desktop/components/DynamicDesktopNavBar/components/MenuItemNav/components/InternalLinkMenuItemNav.js

@@ -56,7 +56,7 @@ function InternalLinkMenuItemNav(_a) {
             return (react_1.default.createElement(IconNav_1.default, { onClick: onClickNav, to: internalPath, iconName: menu.iconName, openNewTab: false }));
         }
     }
-    return isContextMenu ? (react_1.default.createElement(Navigations_1.ContextTextLabelNav, { onClick: onClickNav, isActive: isActive, preventLineChange: true, openNewTab: false, to: internalPath, text: menu.name })) : (react_1.default.createElement(Navigations_1.TextLabelNav, { onClick: onClickNav, isActive: isActive, preventLineChange: true, openNewTab: false, to: internalPath, text: menu.name }));
+    return isContextMenu ? (react_1.default.createElement(Navigations_1.ContextTextLabelNav, { onClick: onClickNav, preventLineChange: true, openNewTab: false, to: internalPath, text: menu.name })) : (react_1.default.createElement(Navigations_1.TextLabelNav, { onClick: onClickNav, isActive: isActive, preventLineChange: true, openNewTab: false, to: internalPath, text: menu.name }));
 }
 function getInternalLink(basePath, url) {
     var _a = new URL(url), pathname = _a.pathname, search = _a.search;

package/dist/src/desktop/components/DynamicDesktopNavBar/components/MenuItemNav/components/PAppMenuItemNav.js

@@ -46,6 +46,6 @@ function PAppMenuItemNav(_a) {
             return (react_1.default.createElement(IconNav_1.default, { to: basePath + "/" + menu.pAppCode, iconName: menu.iconName, openNewTab: false }));
         }
     }
-    return isContextMenu ? (react_1.default.createElement(Navigations_1.ContextTextLabelNav, { isActive: isActive, preventLineChange: true, openNewTab: false, to: basePath + "/" + menu.pAppCode, text: menu.name })) : (react_1.default.createElement(Navigations_1.TextLabelNav, { isActive: isActive, preventLineChange: true, openNewTab: false, to: basePath + "/" + menu.pAppCode, text: menu.name }));
+    return isContextMenu ? (react_1.default.createElement(Navigations_1.ContextTextLabelNav, { preventLineChange: true, openNewTab: false, to: basePath + "/" + menu.pAppCode, text: menu.name })) : (react_1.default.createElement(Navigations_1.TextLabelNav, { isActive: isActive, preventLineChange: true, openNewTab: false, to: basePath + "/" + menu.pAppCode, text: menu.name }));
 }
 exports.default = PAppMenuItemNav;

package/dist/src/desktop/components/DynamicDesktopNavBar/components/MenuItemNav/components/PageMenuItemNav.js

@@ -46,6 +46,6 @@ function PageMenuItemNav(_a) {
             return (react_1.default.createElement(IconNav_1.default, { to: basePath + "/pages/" + menu.slug, iconName: menu.iconName, openNewTab: false }));
         }
     }
-    return isContextMenu ? (react_1.default.createElement(Navigations_1.ContextTextLabelNav, { isActive: isActive, preventLineChange: true, openNewTab: false, to: basePath + "/pages/" + menu.slug, text: menu.name })) : (react_1.default.createElement(Navigations_1.TextLabelNav, { isActive: isActive, preventLineChange: true, openNewTab: false, to: basePath + "/pages/" + menu.slug, text: menu.name }));
+    return isContextMenu ? (react_1.default.createElement(Navigations_1.ContextTextLabelNav, { preventLineChange: true, openNewTab: false, to: basePath + "/pages/" + menu.slug, text: menu.name })) : (react_1.default.createElement(Navigations_1.TextLabelNav, { isActive: isActive, preventLineChange: true, openNewTab: false, to: basePath + "/pages/" + menu.slug, text: menu.name }));
 }
 exports.default = PageMenuItemNav;

package/dist/src/desktop/components/DynamicDesktopNavBar/utils.js

@@ -12,6 +12,7 @@ function getSearchExceptGivenName(search, name) {
         return paramsInString ? "?" + paramsInString : '';
     }
     catch (err) {
+        // eslint-disable-next-line no-console
         console.error(err);
         return '';
     }

package/dist/src/desktop/components/PageTitleTextGroup/CompoundButton.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { FillIconNameKeys, LineIconNameKeys, PDSTextType } from '../../../common';
+declare type Props = {
+    iconName?: FillIconNameKeys | LineIconNameKeys;
+    iconFillType?: 'fill' | 'line';
+    titleText: PDSTextType;
+    contentText: PDSTextType;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    onMouseDown?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+};
+declare function CompoundButton({ iconName, iconFillType, titleText, contentText, onClick, onMouseDown }: Props): JSX.Element;
+export default CompoundButton;

package/dist/src/desktop/components/PageTitleTextGroup/CompoundButton.js

@@ -0,0 +1,71 @@
+"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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importStar(require("styled-components"));
+var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
+var hybrid_1 = require("../../../hybrid");
+var TextLabel_1 = require("../TextLabel");
+function CompoundButton(_a) {
+    var iconName = _a.iconName, iconFillType = _a.iconFillType, titleText = _a.titleText, contentText = _a.contentText, onClick = _a.onClick, onMouseDown = _a.onMouseDown;
+    var handleClick = function (e) {
+        if (onClick) {
+            onClick(e);
+        }
+    };
+    var handleMouseDown = function (e) {
+        if (onMouseDown) {
+            onMouseDown(e);
+        }
+    };
+    return (react_1.default.createElement(S_CompoundButtonWrapper, { onClick: handleClick, onMouseDown: handleMouseDown },
+        iconName && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, fillType: iconFillType, size: 24 }),
+            react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }))),
+        titleText && contentText && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, singleLineMode: "use", lineLimit: 1, wordBreak: "break_all" }),
+            react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" }),
+            react_1.default.createElement(TextLabel_1.TextLabel, { text: contentText, styleTheme: "body2Bold", singleLineMode: "use", colorTheme: "sysTextSecondary", lineLimit: 1, wordBreak: "break_all" })))));
+}
+var size = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 40px;\n  padding: 0 ", ";\n  border-radius: 12px;\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n"], ["\n  height: 40px;\n  padding: 0 ", ";\n  border-radius: 12px;\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+});
+var style = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:hover:enabled::before {\n    background-color: ", ";\n  }\n\n  &:active:enabled::before {\n    background-color: ", ";\n  }\n"], ["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:hover:enabled::before {\n    background-color: ", ";\n  }\n\n  &:active:enabled::before {\n    background-color: ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_line_base_hover;
+}, transitionStyle_1.ButtonTransition, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_secondary_on_base_hover;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_secondary_on_base_pressed;
+});
+var S_CompoundButtonWrapper = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: inline-flex;\n  justify-content: center;\n  min-width: max-content;\n\n  ", "\n  ", "\n\n  &:focus {\n    outline: none;\n  }\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: inline-flex;\n  justify-content: center;\n  min-width: max-content;\n\n  ", "\n  ", "\n\n  &:focus {\n    outline: none;\n  }\n"])), style, size);
+exports.default = CompoundButton;
+var templateObject_1, templateObject_2, templateObject_3;

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

@@ -1,10 +1,16 @@
 /// <reference types="react" />
-import { PDSTextType } from '../../../common';
+import { FillIconNameKeys, LineIconNameKeys, PDSTextType } from '../../../common';
 declare type PageTitleTextGroupProps = {
     titleText: PDSTextType;
-    displayType?: 'normal' | 'edit_btn';
+    tooltipText?: PDSTextType;
+    compoundBtnIconName?: FillIconNameKeys | LineIconNameKeys;
+    compoundBtnIconFillType?: 'fill' | 'line';
+    compoundBtnTitleText?: PDSTextType;
+    compoundBtnContentText?: PDSTextType;
+    displayType?: 'normal' | 'edit_btn' | 'compound_btn';
     btn1State?: 'normal' | 'disabled';
     onClickBtn1?: () => void;
+    onClickCompoundBtn?: () => void;
 };
-declare function PageTitleTextGroup({ titleText, displayType, btn1State, onClickBtn1 }: PageTitleTextGroupProps): JSX.Element;
+declare function PageTitleTextGroup({ titleText, tooltipText, compoundBtnIconName, compoundBtnIconFillType, compoundBtnTitleText, compoundBtnContentText, displayType, btn1State, onClickBtn1, onClickCompoundBtn }: PageTitleTextGroupProps): JSX.Element;
 export default PageTitleTextGroup;

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

@@ -12,17 +12,33 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var hybrid_1 = require("../../../hybrid");
 var IconButton_1 = require("../IconButton");
 var TextLabel_1 = require("../TextLabel");
+var CompoundButton_1 = __importDefault(require("./CompoundButton"));
 function PageTitleTextGroup(_a) {
-    var titleText = _a.titleText, _b = _a.displayType, displayType = _b === void 0 ? 'normal' : _b, _c = _a.btn1State, btn1State = _c === void 0 ? 'normal' : _c, onClickBtn1 = _a.onClickBtn1;
+    var titleText = _a.titleText, tooltipText = _a.tooltipText, compoundBtnIconName = _a.compoundBtnIconName, compoundBtnIconFillType = _a.compoundBtnIconFillType, compoundBtnTitleText = _a.compoundBtnTitleText, compoundBtnContentText = _a.compoundBtnContentText, _b = _a.displayType, displayType = _b === void 0 ? 'normal' : _b, _c = _a.btn1State, btn1State = _c === void 0 ? 'normal' : _c, onClickBtn1 = _a.onClickBtn1, onClickCompoundBtn = _a.onClickCompoundBtn;
+    var handleClickBtn1 = function () {
+        if (onClickBtn1) {
+            onClickBtn1();
+        }
+    };
+    var handleClickCompoundBtn = function () {
+        if (onClickCompoundBtn) {
+            onClickCompoundBtn();
+        }
+    };
     return (react_1.default.createElement(S_PageTitleTextGroup, { "x-pds-name": "PageTitleTextGroup", "x-pds-element-type": "component", "x-pds-device-type": "desktop" },
-        react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: "headingBold" }),
+        react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: "headingBold", tooltipText: tooltipText }),
         displayType === 'edit_btn' && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),
-            react_1.default.createElement(IconButton_1.IconButton, { baseSize: "medium", iconSize: 20, iconName: "ic_edit", iconFillType: "fill", iconColorKey: "ui_cpnt_button_icon_primary", baseColorKey: "ui_cpnt_button_fill_base_transparent", state: btn1State, onClick: onClickBtn1 })))));
+            react_1.default.createElement(IconButton_1.IconButton, { baseSize: "medium", iconSize: 20, iconName: "ic_edit", iconFillType: "fill", iconColorKey: "ui_cpnt_button_icon_primary", baseColorKey: "ui_cpnt_button_fill_base_transparent", state: btn1State, onClick: handleClickBtn1 }))),
+        displayType === 'compound_btn' && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" }),
+            react_1.default.createElement(S_CompoundButtonWrapper, null,
+                react_1.default.createElement(CompoundButton_1.default, { iconName: compoundBtnIconName, iconFillType: compoundBtnIconFillType, titleText: compoundBtnTitleText, contentText: compoundBtnContentText, onClick: handleClickCompoundBtn }))))));
 }
-var S_PageTitleTextGroup = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  display: flex;\n  height: 40px;\n"], ["\n  align-items: center;\n  background-color: ", ";\n  display: flex;\n  height: 40px;\n"])), function (_a) {
+var S_PageTitleTextGroup = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  display: flex;\n  min-height: 40px;\n"], ["\n  align-items: center;\n  background-color: ", ";\n  display: flex;\n  min-height: 40px;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_textgroup_base_area;
 });
+var S_CompoundButtonWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-left: auto;\n  margin-bottom: auto;\n"], ["\n  margin-left: auto;\n  margin-bottom: auto;\n"])));
 exports.default = PageTitleTextGroup;
-var templateObject_1;
+var templateObject_1, templateObject_2;

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

@@ -5,6 +5,7 @@ export declare type TextFieldProps = {
     name: Path<IFormValues>;
     hintText?: PDSTextType;
     defaultText?: PDSTextType;
+    textAlign?: 'left' | 'center' | 'right';
     prefixText?: PDSTextType;
     suffixText?: PDSTextType;
     validation?: {
@@ -40,5 +41,5 @@ export declare type TextFieldProps = {
     onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement> | React.KeyboardEvent<HTMLTextAreaElement>) => void;
     onTarget?: () => void;
 };
-declare function TextField({ name, hintText, defaultText, 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, onBlur, onChange, onClickIBtn1, onClickIBtn2, onFocus, onKeyUp, onKeyDown, onTarget }: TextFieldProps): JSX.Element;
 export default TextField;

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

@@ -34,7 +34,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, prefixText = _a.prefixText, suffixText = _a.suffixText, validation = _a.validation, _c = _a.validationPoint, validationPoint = _c === void 0 ? 'onBlur' : _c, _d = _a.preventBlankMode, preventBlankMode = _d === void 0 ? 'none' : _d, _e = _a.enterSubmitMode, enterSubmitMode = _e === void 0 ? 'none' : _e, _f = _a.size, size = _f === void 0 ? 'large' : _f, _g = _a.responsiveMode, responsiveMode = _g === void 0 ? 'none' : _g, _h = _a.textLineType, textLineType = _h === void 0 ? 'single' : _h, _j = _a.multiRows, multiRows = _j === void 0 ? 8 : _j, _k = _a.autoMinRows, autoMinRows = _k === void 0 ? 8 : _k, autoMaxRows = _a.autoMaxRows, _l = _a.inputType, inputType = _l === void 0 ? 'text' : _l, _m = _a.state, state = _m === void 0 ? 'normal' : _m, iBtn1IconName = _a.iBtn1IconName, _o = _a.iBtn1IconFillType, iBtn1IconFillType = _o === void 0 ? 'line' : _o, iBtn2IconName = _a.iBtn2IconName, _p = _a.iBtn2IconFillType, iBtn2IconFillType = _p === void 0 ? 'line' : _p, _q = _a.colorTheme, colorTheme = _q === void 0 ? 'none' : _q, max = _a.max, maxLength = _a.maxLength, min = _a.min, customWidth = _a.customWidth, _r = _a.autoComplete, autoComplete = _r === void 0 ? 'on' : _r, 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, 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',
@@ -50,9 +50,9 @@ function TextField(_a) {
         read_only: 'ui_cpnt_textfield_icon_colortheme_transparent_readonly',
         disabled: 'ui_cpnt_textfield_icon_colortheme_transparent_disabled'
     };
-    var _s = (0, react_1.useState)(false), isFocused = _s[0], setIsFocused = _s[1];
-    var _t = (0, react_hook_form_1.useFormContext)(), register = _t.register, trigger = _t.trigger, errors = _t.formState.errors;
-    var _u = register(name, validation), validateOnChange = _u.onChange, validateOnBlur = _u.onBlur;
+    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 isError = Object.keys(errors).some(function (error) { return error === name; });
     var handleClickIBtn1 = function () {
         if (onClickIBtn1) {
@@ -107,10 +107,10 @@ function TextField(_a) {
     }
     var S_TextField = function () {
         if (textLineType === 'multi') {
-            return (react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, textLineType: "multi", multiRows: multiRows, state: state, colorTheme: colorTheme, maxLength: maxLength, textSize: "form2", textWeight: "normal", autoComplete: autoComplete, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown }));
+            return (react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, textAlign: textAlign, validation: validation, textLineType: "multi", multiRows: multiRows, state: state, colorTheme: colorTheme, maxLength: maxLength, textSize: "form2", textWeight: "normal", autoComplete: autoComplete, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown }));
         }
         if (textLineType === 'auto') {
-            return (react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, textLineType: "auto", autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, state: state, colorTheme: colorTheme, maxLength: maxLength, textSize: "form2", textWeight: "normal", autoComplete: autoComplete, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown }));
+            return (react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, textAlign: textAlign, validation: validation, textLineType: "auto", autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, state: state, colorTheme: colorTheme, maxLength: maxLength, textSize: "form2", textWeight: "normal", autoComplete: autoComplete, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown }));
         }
         if (textLineType === 'single') {
             var deleteIconColor = 'ui_cpnt_button_icon_disabled';
@@ -128,7 +128,7 @@ function TextField(_a) {
                 prefixText && (react_1.default.createElement(react_1.default.Fragment, null,
                     react_1.default.createElement(TextLabel_1.TextLabel, { text: prefixText, styleTheme: "caption1Bold", colorTheme: "sysTextTertiary", singleLineMode: "use" }),
                     react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }))),
-                react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, 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 }),
+                react_1.default.createElement(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 }),
                 react_1.default.createElement(S_RightBox, null,
                     suffixText && (react_1.default.createElement(react_1.default.Fragment, null,
                         react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),

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

@@ -391,7 +391,7 @@ var S_AfterTextBox = styled_components_1.default.div(templateObject_41 || (templ
     }
 });
 var S_IconWrapper = styled_components_1.default.div(templateObject_42 || (templateObject_42 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n"])));
-var S_TooltipWrapper = styled_components_1.default.div(templateObject_43 || (templateObject_43 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  max-width: 320px;\n  overflow-wrap: break-word;\n  padding: ", ";\n  position: absolute;\n  text-align: left;\n  white-space: pre-wrap;\n  width: max-content;\n  word-break: keep-all;\n  z-index: 4;\n\n  ", ";\n\n  ", ";\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  max-width: 320px;\n  overflow-wrap: break-word;\n  padding: ", ";\n  position: absolute;\n  text-align: left;\n  white-space: pre-wrap;\n  width: max-content;\n  word-break: keep-all;\n  z-index: 4;\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
+var S_TooltipWrapper = styled_components_1.default.div(templateObject_43 || (templateObject_43 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  max-width: 320px;\n  overflow-wrap: break-word;\n  padding: ", ";\n  position: absolute;\n  text-align: left;\n  white-space: pre-wrap;\n  width: max-content;\n  word-break: keep-all;\n  z-index: 400;\n\n  ", ";\n\n  ", ";\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  max-width: 320px;\n  overflow-wrap: break-word;\n  padding: ", ";\n  position: absolute;\n  text-align: left;\n  white-space: pre-wrap;\n  width: max-content;\n  word-break: keep-all;\n  z-index: 400;\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_contextmenu_base;
 }, function (_a) {

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

@@ -75,7 +75,7 @@ function DesktopTutorialModal(_a) {
                     react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_i" }))),
             react_1.default.createElement(S_RightPanel, null, infoArray
                 .filter(function (data, index) { return selectedItem === "" + data.sideTabTitleText + index; })
-                .map(function (data) { return (react_1.default.createElement(react_1.default.Fragment, null,
+                .map(function (data, index) { return (react_1.default.createElement("div", { key: "" + data.sideTabTitleText + index },
                 react_1.default.createElement(hybrid_1.ImageView, { src: data.imageSrc, shapeType: "rectangle", width: "responsive", ratio: "16_9", scaleType: "cover", backgroundFillMode: "use" }),
                 react_1.default.createElement(S_InfoBox, null,
                     react_1.default.createElement(components_1.TextLabel, { text: data.infoTitleText ? data.infoTitleText : data.sideTabTitleText, styleTheme: "subTitleBold" }),

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

@@ -5,6 +5,7 @@ export declare type TextFieldBaseProps = {
     name: Path<IFormValues>;
     hintText?: PDSTextType;
     defaultText?: PDSTextType;
+    textAlign?: 'left' | 'center' | 'right';
     validation?: {
         [key: string]: any;
     };
@@ -37,5 +38,5 @@ export declare type TextFieldBaseProps = {
     onTarget?: () => void;
     [x: string]: any;
 } & Record<string, any>;
-declare function TextFieldBase({ name, hintText, defaultText, 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, onBlur, onChange, onFocus, onKeyDown, onKeyUp, onTarget, ...rest }: TextFieldBaseProps): JSX.Element;
 export default TextFieldBase;

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

@@ -52,8 +52,8 @@ var styled_components_1 = __importStar(require("styled-components"));
 var common_1 = require("../../../../common");
 var IconButton_1 = require("../../../components/IconButton");
 function TextFieldBase(_a) {
-    var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, validation = _a.validation, _b = _a.preventBlankMode, preventBlankMode = _b === void 0 ? 'none' : _b, _c = _a.enterSubmitMode, enterSubmitMode = _c === void 0 ? 'none' : _c, _d = _a.textLineType, textLineType = _d === void 0 ? 'single' : _d, multiRows = _a.multiRows, autoMinRows = _a.autoMinRows, autoMaxRows = _a.autoMaxRows, _e = _a.inputType, inputType = _e === void 0 ? 'text' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, _g = _a.colorTheme, colorTheme = _g === void 0 ? 'none' : _g, min = _a.min, max = _a.max, _h = _a.maxLength, maxLength = _h === void 0 ? Infinity : _h, _j = _a.textSize, textSize = _j === void 0 ? 'form2' : _j, _k = _a.textWeight, textWeight = _k === void 0 ? 'normal' : _k, textPadding = _a.textPadding, _l = _a.fieldHeight, fieldHeight = _l === void 0 ? 48 : _l, _m = _a.deleteIconMode, deleteIconMode = _m === void 0 ? 'use' : _m, _o = _a.deleteIconSize, deleteIconSize = _o === void 0 ? 20 : _o, _p = _a.deleteIconColor, deleteIconColor = _p === void 0 ? 'ui_cpnt_button_icon_disabled' : _p, isFocused = _a.isFocused, _q = _a.autoComplete, autoComplete = _q === void 0 ? 'on' : _q, onBlur = _a.onBlur, onChange = _a.onChange, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown, onKeyUp = _a.onKeyUp, onTarget = _a.onTarget, rest = __rest(_a, ["name", "hintText", "defaultText", "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 _r = (0, react_hook_form_1.useFormContext)(), register = _r.register, setValue = _r.setValue, getValues = _r.getValues, clearErrors = _r.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, 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 timeout;
     (0, react_1.useEffect)(function () {
         return function () { return clearTimeout(timeout); };
@@ -115,7 +115,7 @@ function TextFieldBase(_a) {
         }
     }
     var textAreaRef = (0, react_1.useRef)(null);
-    var _s = register(name, validation), ref = _s.ref, refRest = __rest(_s, ["ref"]);
+    var _t = register(name, validation), ref = _t.ref, refRest = __rest(_t, ["ref"]);
     (0, react_1.useEffect)(function () {
         if (textAreaRef === null || textAreaRef.current === null) {
             return;
@@ -177,14 +177,14 @@ function TextFieldBase(_a) {
     var S_TextFieldBase = function () {
         if (textLineType === 'single') {
             return (react_1.default.createElement(S_InputWrapper, null,
-                react_1.default.createElement(S_Input, __assign({}, register(name, validation), rest, { name: name, defaultValue: defaultText, placeholder: hintText, 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 })),
+                react_1.default.createElement(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 })),
                 deleteIconMode === 'use' && isFocused && (react_1.default.createElement(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 }))));
         }
         if (textLineType === 'multi') {
-            return (react_1.default.createElement(S_Multi, __assign({}, register(name, validation), rest, { name: name, defaultValue: defaultText, placeholder: hintText, 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 })));
+            return (react_1.default.createElement(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 })));
         }
         if (textLineType === 'auto') {
-            return (react_1.default.createElement(S_Auto, __assign({}, refRest, rest, { name: name, defaultValue: defaultText, autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, placeholder: hintText, state: state, readOnly: state === 'read_only' && true, disabled: state === 'disabled' && true, maxLength: maxLength, textSize: textSize, textWeight: textWeight, textPadding: textPadding, fieldHeight: fieldHeight, colorTheme: colorTheme, autoComplete: autoComplete, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, ref: function (e) {
+            return (react_1.default.createElement(S_Auto, __assign({}, refRest, rest, { name: name, defaultValue: defaultText, placeholder: hintText, textAlign: textAlign, autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, state: state, readOnly: state === 'read_only' && true, disabled: state === 'disabled' && true, maxLength: maxLength, textSize: textSize, textWeight: textWeight, textPadding: textPadding, fieldHeight: fieldHeight, colorTheme: colorTheme, autoComplete: autoComplete, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, ref: function (e) {
                     ref(e);
                     textAreaRef.current = e;
                 }, onInput: handleResizeHeight })));
@@ -211,7 +211,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  display: inline-flex;\n  justify-content: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  height: 100%;\n  line-height: ", ";\n  outline: 0;\n  overflow: hidden;\n  padding: 0;\n  width: 100%;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  &::placeholder {\n    color: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    line-height: ", ";\n  }\n\n  ", ";\n  ", "\n"], ["\n  display: inline-flex;\n  justify-content: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  height: 100%;\n  line-height: ", ";\n  outline: 0;\n  overflow: hidden;\n  padding: 0;\n  width: 100%;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\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  display: inline-flex;\n  justify-content: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  text-align: ", ";\n  height: 100%;\n  line-height: ", ";\n  outline: 0;\n  overflow: hidden;\n  padding: 0;\n  width: 100%;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  &::placeholder {\n    color: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    line-height: ", ";\n  }\n\n  ", ";\n  ", "\n"], ["\n  display: inline-flex;\n  justify-content: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  text-align: ", ";\n  height: 100%;\n  line-height: ", ";\n  outline: 0;\n  overflow: hidden;\n  padding: 0;\n  width: 100%;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\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 &&
         {
@@ -225,6 +225,9 @@ var basicStyle = (0, styled_components_1.css)(templateObject_4 || (templateObjec
 }, function (_a) {
     var textWeight = _a.textWeight;
     return common_1.fontWeight[textWeight];
+}, function (_a) {
+    var textAlign = _a.textAlign;
+    return textAlign;
 }, function (_a) {
     var textSize = _a.textSize;
     return common_1.desktopLineHeight[textSize];

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

@@ -5,6 +5,7 @@ export declare type TextFieldProps = {
     name: Path<IFormValues>;
     hintText?: PDSTextType;
     defaultText?: PDSTextType;
+    textAlign?: 'left' | 'center' | 'right';
     prefixText?: PDSTextType;
     suffixText?: PDSTextType;
     validation?: {
@@ -40,5 +41,5 @@ export declare type TextFieldProps = {
     onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement> | React.KeyboardEvent<HTMLTextAreaElement>) => void;
     onTarget?: () => void;
 };
-declare function TextField({ name, hintText, defaultText, 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, onBlur, onChange, onClickIBtn1, onClickIBtn2, onFocus, onKeyUp, onKeyDown, onTarget }: TextFieldProps): JSX.Element;
 export default TextField;