pds-dev-kit-web-test 0.1.4 → 0.1.6

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

@@ -3,6 +3,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     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]; } });
@@ -22,11 +33,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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 jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importStar(require("styled-components"));
 var numberHelper_1 = require("../../../common/utils/numberHelper");
 var hybrid_1 = require("../../../hybrid");
@@ -85,15 +93,9 @@ function ReactionButton(_a) {
             return value;
         return (0, numberHelper_1.formatCompactNumber)(value);
     };
-    return (react_1.default.createElement(S_ReactionButton, { "x-pds-name": "ReactionButton", "x-pds-element-type": "component", "x-pds-device-type": "mobile", onClick: handleClick, onMouseDown: handleMouseDown },
-        react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),
-        react_1.default.createElement(hybrid_1.Icon, { size: 20, fillType: "fill", iconName: iconName, colorKey: colorTheme === 'none' ? IconColorByStatus() : IconColorByColorByTheme() }),
-        displayType === 'icon_text' && (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(TextLabel_1.TextLabel, { text: convertTextFormatHelper(text), styleTheme: "body2Bold", singleLineMode: "use", colorTheme: TextLabelColorBySelect(), colorOverride: TextLabelColorByByColorTheme() }))),
-        react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })));
+    return ((0, jsx_runtime_1.jsxs)(S_ReactionButton, __assign({ "x-pds-name": "ReactionButton", "x-pds-element-type": "component", "x-pds-device-type": "mobile", onClick: handleClick, onMouseDown: handleMouseDown }, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 20, fillType: "fill", iconName: iconName, colorKey: colorTheme === 'none' ? IconColorByStatus() : IconColorByColorByTheme() }, void 0), displayType === 'icon_text' && ((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: convertTextFormatHelper(text), styleTheme: "body2Bold", singleLineMode: "use", colorTheme: TextLabelColorBySelect(), colorOverride: TextLabelColorByByColorTheme() }, void 0)] }, void 0)), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0)] }), void 0));
 }
-var ReactionButtonStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  border-radius: 8px;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  padding: 0;\n  height: 32px;\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  border-radius: 8px;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  padding: 0;\n  height: 32px;\n"])));
+var ReactionButtonStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  border-radius: 8px;\n  box-sizing: border-box;\n  display: flex;\n  height: 32px;\n  justify-content: center;\n  padding: 0;\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  border-radius: 8px;\n  box-sizing: border-box;\n  display: flex;\n  height: 32px;\n  justify-content: center;\n  padding: 0;\n"])));
 var S_ReactionButton = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), ReactionButtonStyle);
 exports.default = ReactionButton;
 var templateObject_1, templateObject_2;

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

@@ -1,5 +1,5 @@
-import React, { SelectHTMLAttributes } from 'react';
-import { PDSTextType } from '../../../common';
+import type { PDSTextType } from '../../../common';
+import type { SelectHTMLAttributes } from 'react';
 declare type SelectOption = {
     text: string;
     value: SelectHTMLAttributes<HTMLSelectElement>['value'];

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

@@ -3,6 +3,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     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]; } });
@@ -22,11 +33,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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 jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importStar(require("styled-components"));
 var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
 var hybrid_1 = require("../../../hybrid");
@@ -51,12 +59,7 @@ function Select(_a) {
         }
         return 'ui_cpnt_select_icon_01';
     };
-    return (react_1.default.createElement(S_Box, { "x-pds-name": "Select", "x-pds-element-type": "component", "x-pds-device-type": "mobile", size: size, responsiveMode: responsiveMode, tabIndex: 0, customWidth: customWidth },
-        react_1.default.createElement(S_Icon_Wrapper, { state: state },
-            react_1.default.createElement(hybrid_1.Icon, { size: 16, fillType: "line", iconName: "ic_arrow_down", colorKey: getIconColorKey() })),
-        react_1.default.createElement(S_Select, { disabled: state === 'disabled' || state === 'read_only', state: state, colorTheme: colorTheme, onChange: handleChange, defaultValue: (_b = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) !== null && _b !== void 0 ? _b : HINT, value: value || undefined },
-            hintText && (react_1.default.createElement("option", { disabled: true, value: HINT }, hintText)),
-            valueArray.map(function (el) { return (react_1.default.createElement("option", { key: el.value, value: el.value }, el.text)); }))));
+    return ((0, jsx_runtime_1.jsxs)(S_Box, __assign({ "x-pds-name": "Select", "x-pds-element-type": "component", "x-pds-device-type": "mobile", size: size, responsiveMode: responsiveMode, tabIndex: 0, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsx)(S_Icon_Wrapper, __assign({ state: state }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, fillType: "line", iconName: "ic_arrow_down", colorKey: getIconColorKey() }, void 0) }), void 0), (0, jsx_runtime_1.jsxs)(S_Select, __assign({ disabled: state === 'disabled' || state === 'read_only', state: state, colorTheme: colorTheme, onChange: handleChange, defaultValue: (_b = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) !== null && _b !== void 0 ? _b : HINT, value: value || undefined }, { children: [hintText && ((0, jsx_runtime_1.jsx)("option", __assign({ disabled: true, value: HINT }, { children: hintText }), void 0)), valueArray.map(function (el) { return ((0, jsx_runtime_1.jsx)("option", __assign({ value: el.value }, { children: el.text }), el.value)); })] }), void 0)] }), void 0));
 }
 var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 48px;\n  width: 432px;\n"], ["\n  height: 48px;\n  width: 432px;\n"])));
 var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 40px;\n  width: 188px;\n"], ["\n  height: 40px;\n  width: 188px;\n"])));
@@ -121,7 +124,7 @@ var backgroundActiveColor = (0, styled_components_1.css)(templateObject_8 || (te
     }
 });
 var normalActionColor = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  &:active {\n    background-color: ", ";\n  }\n"], ["\n  &:active {\n    background-color: ", ";\n  }\n"])), backgroundActiveColor);
-var S_Select = styled_components_1.default.select(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  appearance: none;\n  background-color: ", ";\n  border: 2px solid ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  font-family: inherit;\n  font-size: ", ";\n  height: 100%;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: 100%;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n  -webkit-line-clamp: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  word-break: break-all;\n\n  :disabled {\n    background-color: ", ";\n    border: 2px solid ", ";\n    color: ", ";\n    opacity: 1;\n  }\n\n  :focus {\n    border: 2px solid ", " !important;\n    color: ", ";\n    outline: 0 !important;\n    outline-offset: 0 !important;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  appearance: none;\n  background-color: ", ";\n  border: 2px solid ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  font-family: inherit;\n  font-size: ", ";\n  height: 100%;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: 100%;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n  -webkit-line-clamp: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  word-break: break-all;\n\n  :disabled {\n    background-color: ", ";\n    border: 2px solid ", ";\n    color: ", ";\n    opacity: 1;\n  }\n\n  :focus {\n    border: 2px solid ", " !important;\n    color: ", ";\n    outline: 0 !important;\n    outline-offset: 0 !important;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_a) {
+var S_Select = styled_components_1.default.select(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 1;\n  appearance: none;\n  background-color: ", ";\n  border: 2px solid ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  display: -webkit-box;\n  font-family: inherit;\n  font-size: ", ";\n  height: 100%;\n  overflow: hidden;\n  padding-left: ", ";\n  padding-right: ", ";\n  text-overflow: ellipsis;\n  width: 100%;\n  word-break: break-all;\n\n  :disabled {\n    background-color: ", ";\n    border: 2px solid ", ";\n    color: ", ";\n    opacity: 1;\n  }\n\n  :focus {\n    border: 2px solid ", " !important;\n    color: ", ";\n    outline: 0 !important;\n    outline-offset: 0 !important;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 1;\n  appearance: none;\n  background-color: ", ";\n  border: 2px solid ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  display: -webkit-box;\n  font-family: inherit;\n  font-size: ", ";\n  height: 100%;\n  overflow: hidden;\n  padding-left: ", ";\n  padding-right: ", ";\n  text-overflow: ellipsis;\n  width: 100%;\n  word-break: break-all;\n\n  :disabled {\n    background-color: ", ";\n    border: 2px solid ", ";\n    color: ", ";\n    opacity: 1;\n  }\n\n  :focus {\n    border: 2px solid ", " !important;\n    color: ", ";\n    outline: 0 !important;\n    outline-offset: 0 !important;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_select_base_normal;
 }, function (_a) {

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { PDSTextType } from '../../../common';
+import type { PDSTextType } from '../../../common';
 export declare type StatusBlockProps = {
     text?: PDSTextType;
     size?: 'large' | 'medium' | 'small';

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

@@ -3,6 +3,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     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]; } });
@@ -22,11 +33,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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 jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importStar(require("styled-components"));
 var TextLabel_1 = require("../TextLabel");
 function StatusBlock(_a) {
@@ -36,8 +44,7 @@ function StatusBlock(_a) {
         medium: 'body1Bold',
         small: 'body2Bold'
     };
-    return (react_1.default.createElement(S_StatusBlock, { "x-pds-name": "StatusBlock", "x-pds-element-type": "component", "x-pds-device-type": "mobile", size: size, state: state, "$width": width },
-        react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textLabelStyleThemeObj[size], textAlign: "center", singleLineMode: "use", colorTheme: "sysTextWhite", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })));
+    return ((0, jsx_runtime_1.jsx)(S_StatusBlock, __assign({ "x-pds-name": "StatusBlock", "x-pds-element-type": "component", "x-pds-device-type": "mobile", size: size, state: state, "$width": width }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: textLabelStyleThemeObj[size], textAlign: "center", singleLineMode: "use", colorTheme: "sysTextWhite", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }, void 0) }), void 0));
 }
 var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 14px;\n  height: 48px;\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"], ["\n  border-radius: 14px;\n  height: 48px;\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"])));
 var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 14px;\n  height: 40px;\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n"], ["\n  border-radius: 14px;\n  height: 40px;\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n"])));

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

@@ -1,5 +1,5 @@
-import React from 'react';
-import { PDSTextType } from '../../../common';
+/// <reference types="react" />
+import type { PDSTextType } from '../../../common';
 export declare type TextButtonProps = {
     text?: PDSTextType;
     size?: 'rlarge' | 'large' | 'medium' | 'small' | 'xsmall';

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

@@ -44,11 +44,8 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-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 jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importStar(require("styled-components"));
 var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
 var TextLabel_1 = require("../TextLabel");
@@ -73,8 +70,7 @@ function TextButton(_a) {
             onClick(e);
         }
     };
-    return (react_1.default.createElement(S_Button, __assign({ "x-pds-name": "TextButton", "x-pds-element-type": "component", "x-pds-device-type": "mobile" }, rest, { size: size, responsiveMode: responsiveMode, onClick: handleClick, type: type, fontWeight: fontWeight, disabled: state === 'disabled', colorTheme: colorTheme }),
-        react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor[colorTheme], singleLineMode: "use" })));
+    return ((0, jsx_runtime_1.jsx)(S_Button, __assign({ "x-pds-name": "TextButton", "x-pds-element-type": "component", "x-pds-device-type": "mobile" }, rest, { size: size, responsiveMode: responsiveMode, onClick: handleClick, type: type, fontWeight: fontWeight, disabled: state === 'disabled', colorTheme: colorTheme }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor[colorTheme], singleLineMode: "use" }, void 0) }), void 0));
 }
 var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 14px;\n  height: 48px;\n  ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"], ["\n  border-radius: 14px;\n  height: 48px;\n  ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"])), function (_a) {
     var size = _a.size;

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

@@ -1,10 +1,13 @@
-import React from 'react';
+/// <reference types="react" />
 import { Path } from 'react-hook-form';
-import { FillIconNameKeys, IFormValues, LineIconNameKeys, PDSTextType } from '../../../common';
+import type { FillIconNameKeys, IFormValues, LineIconNameKeys, PDSTextType } from '../../../common';
 export declare type TextFieldProps = {
     name: Path<IFormValues>;
     hintText?: PDSTextType;
     defaultText?: PDSTextType;
+    textAlign?: 'left' | 'center' | 'right';
+    prefixText?: PDSTextType;
+    suffixText?: PDSTextType;
     validation?: {
         [key: string]: any;
     };
@@ -38,5 +41,5 @@ export declare type TextFieldProps = {
     onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement> | React.KeyboardEvent<HTMLTextAreaElement>) => void;
     onTarget?: () => void;
 };
-declare function TextField({ name, hintText, defaultText, 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/mobile/components/TextField/TextField.js

@@ -3,6 +3,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     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]; } });
@@ -23,16 +34,19 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable react/jsx-no-bind */
-var react_1 = __importStar(require("react"));
+var react_1 = require("react");
 var react_hook_form_1 = require("react-hook-form");
 var styled_components_1 = __importStar(require("styled-components"));
 var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
+var hybrid_1 = require("../../../hybrid");
 var components_1 = require("../../common/components");
 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, 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',
@@ -48,9 +62,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) {
@@ -105,10 +119,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 ((0, jsx_runtime_1.jsx)(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 }, void 0));
         }
         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 ((0, jsx_runtime_1.jsx)(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 }, void 0));
         }
         if (textLineType === 'single') {
             var deleteIconColor = 'ui_cpnt_button_icon_disabled';
@@ -122,26 +136,20 @@ function TextField(_a) {
                     break;
                 }
             }
-            return (react_1.default.createElement(react_1.default.Fragment, null,
-                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(S_IconBox, null,
-                    iBtn2IconName && (react_1.default.createElement(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],
-                                transparent: transparentThemeIconColors[state]
-                            }[colorTheme], iconFillType: iBtn2IconFillType === 'fill' ? 'fill' : 'line', state: state === 'disabled' ? 'disabled' : 'normal', onClick: handleClickIBtn2 })),
-                    iBtn1IconName && (react_1.default.createElement(IconButton_1.IconButton, { iconName: iBtn1IconName, 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],
-                                transparent: transparentThemeIconColors[state]
-                            }[colorTheme], iconFillType: iBtn1IconFillType === 'fill' ? 'fill' : 'line', state: state === 'disabled' ? 'disabled' : 'normal', onClick: handleClickIBtn1 })))));
+            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 &&
+                                    {
+                                        none: basicThemeIconColors[state],
+                                        dark: darkThemeIconColors[state],
+                                        transparent: transparentThemeIconColors[state]
+                                    }[colorTheme], iconFillType: iBtn2IconFillType === 'fill' ? 'fill' : 'line', state: state === 'disabled' ? 'disabled' : 'normal', onClick: handleClickIBtn2 }, void 0)), iBtn1IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iBtn1IconName, 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],
+                                        transparent: transparentThemeIconColors[state]
+                                    }[colorTheme], iconFillType: iBtn1IconFillType === 'fill' ? 'fill' : 'line', state: state === 'disabled' ? 'disabled' : 'normal', onClick: handleClickIBtn1 }, void 0))] }, void 0)] }, void 0));
         }
     };
-    return (react_1.default.createElement(S_TextFieldBox, { "x-pds-name": "TextField", "x-pds-element-type": "component", "x-pds-device-type": "mobile", size: size, responsiveMode: responsiveMode, customWidth: customWidth },
-        react_1.default.createElement(S_TextFieldWrapper, { size: size, responsiveMode: responsiveMode, textLineType: textLineType, isFocused: isFocused, isError: isError, state: state, colorTheme: colorTheme, customWidth: customWidth }, S_TextField()),
-        ((_b = errors[name]) === null || _b === void 0 ? void 0 : _b.message) && state === 'normal' && (react_1.default.createElement(S_Error, { colorTheme: colorTheme }, errors[name].message))));
+    return ((0, jsx_runtime_1.jsxs)(S_TextFieldBox, __assign({ "x-pds-name": "TextField", "x-pds-element-type": "component", "x-pds-device-type": "mobile", size: size, responsiveMode: responsiveMode, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsx)(S_TextFieldWrapper, __assign({ size: size, responsiveMode: responsiveMode, textLineType: textLineType, isFocused: isFocused, isError: isError, state: state, colorTheme: colorTheme, customWidth: customWidth }, { children: S_TextField() }), void 0), ((_b = errors[name]) === null || _b === void 0 ? void 0 : _b.message) && state === 'normal' && ((0, jsx_runtime_1.jsx)(S_Error, __assign({ colorTheme: colorTheme }, { children: errors[name].message }), void 0))] }), void 0));
 }
 var S_TextFieldBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  ", ";\n  ", "\n"], ["\n  ", ";\n  ", ";\n  ", "\n"])), function (_a) {
     var size = _a.size;
@@ -328,7 +336,7 @@ var S_TextFieldWrapper = styled_components_1.default.div(templateObject_18 || (t
     var customWidth = _a.customWidth;
     return customWidth && "width: " + customWidth + ";";
 });
-var S_IconBox = styled_components_1.default.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+var S_RightBox = styled_components_1.default.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n"], ["\n  align-items: center;\n  display: flex;\n"])));
 var S_Error = styled_components_1.default.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-top: ", ";\n  text-align: left;\n  white-space: pre-wrap;\n"], ["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-top: ", ";\n  text-align: left;\n  white-space: pre-wrap;\n"])), function (_a) {
     var theme = _a.theme, colorTheme = _a.colorTheme;
     switch (colorTheme) {

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { PDSTextType, UiColors } from '../../../common';
+import type { PDSTextType, UiColors } from '../../../common';
 export declare type TextLabelProps = {
     text: PDSTextType;
     textAlign?: 'left' | 'center' | 'right';