pds-dev-kit-web 0.5.19 → 0.5.20

package/dist/src/common/assets/icons/line/Lock.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import IconType from '../IconType';
+declare const Lock: ({ color, size, ...rest }: IconType) => JSX.Element;
+export default Lock;

package/dist/src/common/assets/icons/line/Lock.js

@@ -0,0 +1,36 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var Lock = function (_a) {
+    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
+    return (react_1.default.createElement("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest),
+        react_1.default.createElement("g", { fill: "none", fillRule: "evenodd" },
+            react_1.default.createElement("path", { fill: color, d: "M17.7974,7.3889 C19.6204,7.3889 21.0974,8.8659 21.0974,10.6889 L21.0974,10.6889 L21.0974,19.4609 C21.0974,21.2829 19.6204,22.7609 17.7974,22.7609 L17.7974,22.7609 L6.2024,22.7609 C4.3804,22.7609 2.9024,21.2829 2.9024,19.4609 L2.9024,19.4609 L2.9024,10.6889 C2.9024,8.8659 4.3804,7.3889 6.2024,7.3889 L6.2024,7.3889 Z M17.7974,8.8889 L6.2024,8.8889 C5.2104,8.8889 4.4024,9.6959 4.4024,10.6889 L4.4024,10.6889 L4.4024,19.4609 C4.4024,20.4529 5.2104,21.2609 6.2024,21.2609 L6.2024,21.2609 L17.7974,21.2609 C18.7894,21.2609 19.5974,20.4529 19.5974,19.4609 L19.5974,19.4609 L19.5974,10.6889 C19.5974,9.6959 18.7894,8.8889 17.7974,8.8889 L17.7974,8.8889 Z M11.9999,11.446 C13.1489,11.446 14.0809,12.378 14.0809,13.527 C14.0809,14.3428254 13.611038,15.0492516 12.9272537,15.3903389 L12.9272,18.3147 C12.9272,18.7347 12.5862,19.0757 12.1662,19.0757 L11.8342,19.0757 C11.4132,19.0757 11.0732,18.7347 11.0732,18.3147 L11.0725463,15.3903389 C10.388762,15.0492516 9.9189,14.3428254 9.9189,13.527 C9.9189,12.378 10.8509,11.446 11.9999,11.446 Z" }),
+            react_1.default.createElement("path", { stroke: color, strokeWidth: "1.5", d: "M7.4784,7.999 L7.4784,6.075 C7.4784,3.603 9.2904,1.6 11.5264,1.6 L12.4734,1.6 C14.7094,1.6 16.5214,3.603 16.5214,6.075 L16.5214,7.999" }))));
+};
+exports.default = Lock;

package/dist/src/common/assets/icons/line/index.d.ts

@@ -48,6 +48,7 @@ declare const lineIcons: {
     readonly ic_live_concert: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_live_event: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_live_personal: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_lock: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_menu: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_mic_off: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_mic_on: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;

package/dist/src/common/assets/icons/line/index.js

@@ -51,6 +51,7 @@ var LiveCommerce_1 = __importDefault(require("./LiveCommerce"));
 var LiveConcert_1 = __importDefault(require("./LiveConcert"));
 var LiveEvent_1 = __importDefault(require("./LiveEvent"));
 var LivePersonal_1 = __importDefault(require("./LivePersonal"));
+var Lock_1 = __importDefault(require("./Lock"));
 var Menu_1 = __importDefault(require("./Menu"));
 var MicOff_1 = __importDefault(require("./MicOff"));
 var MicOn_1 = __importDefault(require("./MicOn"));
@@ -174,6 +175,7 @@ var lineIcons = {
     ic_live_concert: LiveConcert_1.default,
     ic_live_event: LiveEvent_1.default,
     ic_live_personal: LivePersonal_1.default,
+    ic_lock: Lock_1.default,
     ic_menu: Menu_1.default,
     ic_mic_off: MicOff_1.default,
     ic_mic_on: MicOn_1.default,

package/dist/src/common/styles/ui-colors.js

@@ -27,7 +27,7 @@ function buildCascadedColors(lowLevel, highLevel, override) {
 // 서버로부터 해당 채널에서 커스텀으로 설정한 팔레트 가져오기
 // from server (원래는 비동기)
 var channelSettings = {
-    tone: 'dark',
+    tone: 'light',
     customPalette: {
         usr_good_job: '#999999'
     }

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

@@ -29,7 +29,7 @@ export declare type TextFieldBaseProps = {
     isFocused?: boolean;
     onBlur?: (e: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement>) => void;
     onChange?: (e: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => void;
-    onFocus?: () => void;
+    onFocus?: (e: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement>) => void;
     onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement> | React.KeyboardEvent<HTMLTextAreaElement>) => void;
     onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement> | React.KeyboardEvent<HTMLTextAreaElement>) => void;
     onTarget?: () => void;

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

@@ -58,17 +58,12 @@ function TextFieldBase(_a) {
     (0, react_1.useEffect)(function () {
         return function () { return clearTimeout(timeout); };
     }, []);
-    function handleFocus() {
+    function handleFocus(e) {
         if (onFocus) {
-            onFocus();
+            onFocus(e);
         }
         clearErrors(name);
     }
-    function handleTarget() {
-        if (onTarget) {
-            onTarget();
-        }
-    }
     function handleKeyDown(e) {
         if (onKeyDown) {
             onKeyDown(e);
@@ -175,14 +170,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, onFocus: handleFocus, onTarget: handleTarget, 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, 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, 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', 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, onFocus: handleFocus, onTarget: handleTarget, 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, state: state, readOnly: state === 'read_only' && true, disabled: state === 'disabled' && true, maxLength: maxLength, rows: multiRows, textSize: textSize, textWeight: textWeight, textPadding: textPadding, colorTheme: colorTheme, 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, onFocus: handleFocus, onTarget: handleTarget, 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, 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, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, ref: function (e) {
                     ref(e);
                     textAreaRef.current = e;
                 }, onInput: handleResizeHeight })));
@@ -246,7 +241,7 @@ var S_Input = styled_components_1.default.input(templateObject_5 || (templateObj
     var theme = _a.theme;
     return theme.desktopLineHeight.singleLine;
 });
-var S_Auto = styled_components_1.default.textarea(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", "\n  resize: none;\n  ", "\n  ", ";\n"], ["\n  ", "\n  resize: none;\n  ", "\n  ", ";\n"])), basicStyle, function (_a) {
+var S_Auto = styled_components_1.default.textarea(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", "\n  display: block;\n  overflow-y: auto;\n  resize: none;\n  ", "\n  ", ";\n"], ["\n  ", "\n  display: block;\n  overflow-y: auto;\n  resize: none;\n  ", "\n  ", ";\n"])), basicStyle, function (_a) {
     var autoMaxRows = _a.autoMaxRows, textSize = _a.textSize, fieldHeight = _a.fieldHeight;
     return autoMaxRows &&
         fieldHeight &&

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

@@ -10,6 +10,7 @@ export declare type EditApplyTextFieldProps = {
     };
     preventBlankMode?: 'none' | 'trim' | 'all';
     size?: 'xlarge' | 'large' | 'rlarge';
+    responsiveMode?: 'none' | 'use';
     textLineType?: 'single' | 'multi' | 'auto';
     multiRows?: number;
     autoMinRows?: number;
@@ -23,8 +24,8 @@ export declare type EditApplyTextFieldProps = {
     onBlur?: (e: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement>) => void;
     onChange?: (e: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => void;
     onClickSubmitBtn?: (...args: any) => any;
-    onFocus?: () => void;
+    onFocus?: (e: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement>) => void;
     onTarget?: () => void;
 };
-declare function EditApplyTextField({ name, hintText, defaultText, validation, preventBlankMode, size, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, state, max, maxLength, min, getInputValue, onBlur, onChange, onClickSubmitBtn, onFocus, onTarget }: EditApplyTextFieldProps): JSX.Element;
+declare function EditApplyTextField({ name, hintText, defaultText, validation, preventBlankMode, size, responsiveMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, state, max, maxLength, min, getInputValue, onBlur, onChange, onClickSubmitBtn, onFocus, onTarget }: EditApplyTextFieldProps): JSX.Element;
 export default EditApplyTextField;

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

@@ -32,12 +32,12 @@ var components_1 = require("../../common/components");
 var IconButton_1 = require("../IconButton");
 function EditApplyTextField(_a) {
     var _b;
-    var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, validation = _a.validation, _c = _a.preventBlankMode, preventBlankMode = _c === void 0 ? 'none' : _c, _d = _a.size, size = _d === void 0 ? 'large' : _d, _e = _a.textLineType, textLineType = _e === void 0 ? 'single' : _e, _f = _a.multiRows, multiRows = _f === void 0 ? 8 : _f, _g = _a.autoMinRows, autoMinRows = _g === void 0 ? 8 : _g, autoMaxRows = _a.autoMaxRows, _h = _a.inputType, inputType = _h === void 0 ? 'text' : _h, _j = _a.state, state = _j === void 0 ? 'normal' : _j, max = _a.max, maxLength = _a.maxLength, min = _a.min, getInputValue = _a.getInputValue, onBlur = _a.onBlur, onChange = _a.onChange, onClickSubmitBtn = _a.onClickSubmitBtn, onFocus = _a.onFocus, onTarget = _a.onTarget;
+    var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, validation = _a.validation, _c = _a.preventBlankMode, preventBlankMode = _c === void 0 ? 'none' : _c, _d = _a.size, size = _d === void 0 ? 'large' : _d, _e = _a.responsiveMode, responsiveMode = _e === void 0 ? 'none' : _e, _f = _a.textLineType, textLineType = _f === void 0 ? 'single' : _f, _g = _a.multiRows, multiRows = _g === void 0 ? 8 : _g, _h = _a.autoMinRows, autoMinRows = _h === void 0 ? 8 : _h, autoMaxRows = _a.autoMaxRows, _j = _a.inputType, inputType = _j === void 0 ? 'text' : _j, _k = _a.state, state = _k === void 0 ? 'normal' : _k, max = _a.max, maxLength = _a.maxLength, min = _a.min, getInputValue = _a.getInputValue, onBlur = _a.onBlur, onChange = _a.onChange, onClickSubmitBtn = _a.onClickSubmitBtn, onFocus = _a.onFocus, onTarget = _a.onTarget;
     var t = (0, react_i18next_1.useTranslation)('translation').t;
-    var _k = (0, react_hook_form_1.useFormContext)(), register = _k.register, setValue = _k.setValue, trigger = _k.trigger, watch = _k.watch, errors = _k.formState.errors;
-    var _l = (0, react_1.useState)(false), isFocused = _l[0], setIsFocused = _l[1];
-    var _m = (0, react_1.useState)(false), isOpen = _m[0], setIsOpen = _m[1];
-    var _o = (0, react_1.useState)(), prevValue = _o[0], setPrevValue = _o[1];
+    var _l = (0, react_hook_form_1.useFormContext)(), register = _l.register, setValue = _l.setValue, trigger = _l.trigger, watch = _l.watch, errors = _l.formState.errors;
+    var _m = (0, react_1.useState)(false), isFocused = _m[0], setIsFocused = _m[1];
+    var _o = (0, react_1.useState)(false), isOpen = _o[0], setIsOpen = _o[1];
+    var _p = (0, react_1.useState)(), prevValue = _p[0], setPrevValue = _p[1];
     var currentValue = watch(name);
     var validateOnChange = register(name, validation).onChange;
     var isError = Object.keys(errors).some(function (error) { return error === name; });
@@ -46,13 +46,13 @@ function EditApplyTextField(_a) {
             setPrevValue(defaultText);
         }
     }, [defaultText]);
-    function handleFocus() {
+    function handleFocus(e) {
         if (state !== 'read_only') {
             setIsFocused(true);
             setIsOpen(true);
         }
         if (onFocus) {
-            onFocus();
+            onFocus(e);
         }
     }
     function handleTarget() {
@@ -121,17 +121,17 @@ function EditApplyTextField(_a) {
         }
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(S_EditApplyTextFieldWrapper, { size: size },
+        react_1.default.createElement(S_EditApplyTextFieldWrapper, { size: size, responsiveMode: responsiveMode },
             react_1.default.createElement(S_EditApplyTextField, null,
-                react_1.default.createElement(S_S_TextFieldBaseWrapper, { size: size, textLineType: textLineType, isFocused: isFocused, isError: isError, state: state }, S_TextFieldBase()),
+                react_1.default.createElement(S_S_TextFieldBaseWrapper, { size: size, responsiveMode: responsiveMode, textLineType: textLineType, isFocused: isFocused, isError: isError, state: state }, S_TextFieldBase()),
                 isOpen === true && (react_1.default.createElement(S_ButtonBox, null,
                     react_1.default.createElement(IconButton_1.IconButton, { iconName: "ic_xmark", fillType: "fill", baseSize: "small", iconSize: 16, shapeType: "circular", shadow: "visible", iconColorKey: "ui_cpnt_button_icon_enabled", baseColorKey: "ui_cpnt_button_fill_base_white", onMouseDown: handleCancel }),
                     react_1.default.createElement(IconButton_1.IconButton, { iconName: "ic_check", fillType: "fill", baseSize: "small", iconSize: 16, shapeType: "circular", shadow: "visible", iconColorKey: "ui_cpnt_button_icon_on_primary", baseColorKey: "ui_cpnt_button_fill_base_primary", onMouseDown: handleSubmit, state: isError === true ? 'disabled' : 'normal' })))),
             ((_b = errors[name]) === null || _b === void 0 ? void 0 : _b.message) && (react_1.default.createElement(S_Error, { isFocused: isFocused }, t(errors[name].message))))));
 }
 var S_EditApplyTextFieldWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", ";\n"], ["\n  width: ", ";\n"])), function (_a) {
-    var size = _a.size;
-    return (size === 'rlarge' ? '100%' : '432px');
+    var size = _a.size, responsiveMode = _a.responsiveMode;
+    return size === 'rlarge' || responsiveMode === 'use' ? '100%' : '432px';
 });
 var S_EditApplyTextField = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
 var multi = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: auto;\n  padding: 14px;\n"], ["\n  height: auto;\n  padding: 14px;\n"])));
@@ -146,12 +146,15 @@ var auto = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 =
         Number(theme.desktopFontSize.form2.substring(0, 2)) * Number(theme.desktopLineHeight.form2)) /
         2;
 });
-var xlarge = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: 56px;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: 432px;\n  ", "\n  ", "\n"], ["\n  height: 56px;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: 432px;\n  ", "\n  ", "\n"])), function (_a) {
+var xlarge = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: 56px;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: ", ";\n  ", "\n  ", "\n"], ["\n  height: 56px;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: ", ";\n  ", "\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
+}, function (_a) {
+    var responsiveMode = _a.responsiveMode;
+    return (responsiveMode === 'use' ? '100%' : '432px');
 }, function (_a) {
     var textLineType = _a.textLineType;
     return textLineType === 'multi' && multi;
@@ -166,8 +169,8 @@ var large = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 =
     var theme = _a.theme;
     return theme.spacing.spacingD;
 }, function (_a) {
-    var size = _a.size;
-    return (size === 'rlarge' ? '100%' : '432px');
+    var size = _a.size, responsiveMode = _a.responsiveMode;
+    return size === 'rlarge' || responsiveMode === 'use' ? '100%' : '432px';
 }, function (_a) {
     var textLineType = _a.textLineType;
     return textLineType === 'multi' && multi;

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

@@ -4,6 +4,7 @@ export declare type MainButtonProps = {
     text?: PDSTextType;
     fillType?: 'fill' | 'line';
     size?: 'large' | 'medium' | 'small' | 'xsmall' | 'rlarge';
+    responsiveMode?: 'none' | 'use';
     fontWeight?: 'bold' | 'regular';
     iconMode?: 'none' | 'left' | 'right';
     iconFillType?: 'fill' | 'line';
@@ -14,5 +15,5 @@ export declare type MainButtonProps = {
     onClick?: (...args: any) => any;
     onMouseDown?: (...args: any) => any;
 };
-declare function MainButton({ text, fillType, size, fontWeight, iconMode, iconFillType, iconName, colorTheme, type, state, onClick, onMouseDown }: MainButtonProps): JSX.Element;
+declare function MainButton({ text, fillType, size, responsiveMode, fontWeight, iconMode, iconFillType, iconName, colorTheme, type, state, onClick, onMouseDown }: MainButtonProps): JSX.Element;
 export default MainButton;

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

@@ -37,7 +37,7 @@ var TextLabel_1 = require("../TextLabel");
 // borderColorKey?: string;
 // shadow?: 'hidden' | 'visible';
 function MainButton(_a) {
-    var text = _a.text, _b = _a.fillType, fillType = _b === void 0 ? 'fill' : _b, _c = _a.size, size = _c === void 0 ? 'large' : _c, fontWeight = _a.fontWeight, _d = _a.iconMode, iconMode = _d === void 0 ? 'none' : _d, _e = _a.iconFillType, iconFillType = _e === void 0 ? 'line' : _e, iconName = _a.iconName, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'none' : _f, _g = _a.type, type = _g === void 0 ? 'button' : _g, _h = _a.state, state = _h === void 0 ? 'normal' : _h, onClick = _a.onClick, onMouseDown = _a.onMouseDown;
+    var text = _a.text, _b = _a.fillType, fillType = _b === void 0 ? 'fill' : _b, _c = _a.size, size = _c === void 0 ? 'large' : _c, _d = _a.responsiveMode, responsiveMode = _d === void 0 ? 'none' : _d, fontWeight = _a.fontWeight, _e = _a.iconMode, iconMode = _e === void 0 ? 'none' : _e, _f = _a.iconFillType, iconFillType = _f === void 0 ? 'line' : _f, iconName = _a.iconName, _g = _a.colorTheme, colorTheme = _g === void 0 ? 'none' : _g, _h = _a.type, type = _h === void 0 ? 'button' : _h, _j = _a.state, state = _j === void 0 ? 'normal' : _j, onClick = _a.onClick, onMouseDown = _a.onMouseDown;
     var handleClick = function () {
         if (onClick) {
             onClick();
@@ -94,7 +94,7 @@ function MainButton(_a) {
         }
         return iconFillTypeColorObj[fillType];
     };
-    return (react_1.default.createElement(S_Button, { fillType: fillType, size: size, fontWeight: fontWeight, colorTheme: colorTheme, type: type, state: state, disabled: state === 'disabled', onClick: handleClick, onMouseDown: handleMouseDown },
+    return (react_1.default.createElement(S_Button, { fillType: fillType, size: size, responsiveMode: responsiveMode, fontWeight: fontWeight, colorTheme: colorTheme, type: type, state: state, disabled: state === 'disabled', onClick: handleClick, onMouseDown: handleMouseDown },
         size !== 'xsmall' && iconMode === 'left' && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType }),
             react_1.default.createElement(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }))),
@@ -179,7 +179,7 @@ var line = (0, styled_components_1.css)(templateObject_12 || (templateObject_12
     var state = _a.state;
     return state === 'disabled' && lineDisabled;
 });
-var S_Button = styled_components_1.default.button(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n\n  &:focus {\n    outline: none;\n  }\n  ", "\n  ", "\n\n  & > div {\n    ", ";\n  }\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n\n  &:focus {\n    outline: none;\n  }\n  ", "\n  ", "\n\n  & > div {\n    ", ";\n  }\n"])), function (_a) {
+var S_Button = styled_components_1.default.button(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n\n  &:focus {\n    outline: none;\n  }\n  ", "\n  ", "\n  ", ";\n\n  & > div {\n    ", ";\n  }\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n\n  &:focus {\n    outline: none;\n  }\n  ", "\n  ", "\n  ", ";\n\n  & > div {\n    ", ";\n  }\n"])), function (_a) {
     var state = _a.state;
     return (state === 'normal' ? 'pointer' : 'default');
 }, function (_a) {
@@ -188,6 +188,9 @@ var S_Button = styled_components_1.default.button(templateObject_13 || (template
 }, function (_a) {
     var size = _a.size;
     return size && { large: large, medium: medium, small: small, xsmall: xsmall, rlarge: large }[size];
+}, function (_a) {
+    var responsiveMode = _a.responsiveMode;
+    return responsiveMode === 'use' && 'width: 100%';
 }, function (_a) {
     var theme = _a.theme, fontWeight = _a.fontWeight;
     return fontWeight &&

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

@@ -9,9 +9,10 @@ declare type SelectProps = {
     defaultValue?: Value;
     valueArray: Value[];
     size?: 'large' | 'medium' | 'small' | 'rlarge';
+    responsiveMode?: 'none' | 'use';
     state?: 'normal' | 'read_only' | 'disabled';
     onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
     colorTheme?: 'none' | 'dark';
 };
-declare function Select({ hintText, defaultValue, valueArray, size, state, onChange, colorTheme }: SelectProps): JSX.Element;
+declare function Select({ hintText, defaultValue, valueArray, size, responsiveMode, state, onChange, colorTheme }: SelectProps): JSX.Element;
 export default Select;

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

@@ -27,8 +27,8 @@ var react_1 = __importStar(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var hybrid_1 = require("../../../hybrid");
 function Select(_a) {
-    var hintText = _a.hintText, defaultValue = _a.defaultValue, valueArray = _a.valueArray, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.state, state = _c === void 0 ? 'normal' : _c, onChange = _a.onChange, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'none' : _d;
-    var _e = (0, react_1.useState)(false), isFocused = _e[0], setIsFocused = _e[1];
+    var hintText = _a.hintText, defaultValue = _a.defaultValue, valueArray = _a.valueArray, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, _d = _a.state, state = _d === void 0 ? 'normal' : _d, onChange = _a.onChange, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'none' : _e;
+    var _f = (0, react_1.useState)(false), isFocused = _f[0], setIsFocused = _f[1];
     var handleClick = function () { return setIsFocused(true); };
     var handleBlur = function () { return setIsFocused(false); };
     var handleChange = function (e) {
@@ -53,7 +53,7 @@ function Select(_a) {
             return 'ui_cpnt_select_icon_01';
         }
     };
-    return (react_1.default.createElement(S_Box, { size: size, onClick: handleClick, onBlur: handleBlur, tabIndex: 0 },
+    return (react_1.default.createElement(S_Box, { size: size, responsiveMode: responsiveMode, onClick: handleClick, onBlur: handleBlur, tabIndex: 0 },
         react_1.default.createElement(S_Icon, { size: 16, fillType: "line", iconName: isFocused ? 'ic_arrow_up' : 'ic_arrow_down', colorKey: getIconColorKey() }),
         react_1.default.createElement(S_Select, { disabled: state === 'disabled' || state === 'read_only', defaultValue: (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) || '', state: state, colorTheme: colorTheme, onChange: handleChange },
             react_1.default.createElement("option", { disabled: true, value: (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) || '' }, (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.text) || hintText),
@@ -87,7 +87,7 @@ var dark = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 =
     var theme = _a.theme;
     return theme.ui_cpnt_select_text_darktheme_enabled;
 });
-var S_Box = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: relative;\n  z-index: 0;\n\n  ", "\n"], ["\n  position: relative;\n  z-index: 0;\n\n  ", "\n"])), function (_a) {
+var S_Box = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: relative;\n  z-index: 0;\n\n  ", "\n  ", ";\n"], ["\n  position: relative;\n  z-index: 0;\n\n  ", "\n  ", ";\n"])), function (_a) {
     var size = _a.size;
     return size &&
         {
@@ -96,6 +96,9 @@ var S_Box = styled_components_1.default.div(templateObject_6 || (templateObject_
             small: small,
             rlarge: rlarge
         }[size];
+}, function (_a) {
+    var responsiveMode = _a.responsiveMode;
+    return responsiveMode === 'use' && 'width: 100%';
 });
 var S_Icon = (0, styled_components_1.default)(hybrid_1.Icon)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: absolute;\n  right: ", ";\n  top: 50%;\n  transform: translateY(-50%);\n  z-index: 2;\n"], ["\n  position: absolute;\n  right: ", ";\n  top: 50%;\n  transform: translateY(-50%);\n  z-index: 2;\n"])), function (_a) {
     var theme = _a.theme;

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

@@ -3,10 +3,11 @@ import { PDSTextType } from '../../../common';
 export declare type TextButtonProps = {
     text?: PDSTextType;
     size?: 'rlarge' | 'large' | 'medium' | 'small' | 'xsmall';
+    responsiveMode?: 'none' | 'use';
     fontWeight?: 'bold' | 'regular';
     type?: 'submit' | 'reset' | 'button';
     state?: 'normal' | 'disabled';
     onClick?: (...args: any) => any;
 };
-declare function TextButton({ text, size, fontWeight, type, state, onClick, ...rest }: TextButtonProps): JSX.Element;
+declare function TextButton({ text, size, responsiveMode, fontWeight, type, state, onClick, ...rest }: TextButtonProps): JSX.Element;
 export default TextButton;

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

@@ -54,7 +54,7 @@ var TextLabel_1 = require("../TextLabel");
 // NOTE : 기획상 아직 사용하지 않는 props
 // colorTheme?: 'none';
 function TextButton(_a) {
-    var text = _a.text, _b = _a.size, size = _b === void 0 ? 'large' : _b, fontWeight = _a.fontWeight, _c = _a.type, type = _c === void 0 ? 'button' : _c, _d = _a.state, state = _d === void 0 ? 'normal' : _d, onClick = _a.onClick, rest = __rest(_a, ["text", "size", "fontWeight", "type", "state", "onClick"]);
+    var text = _a.text, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, fontWeight = _a.fontWeight, _d = _a.type, type = _d === void 0 ? 'button' : _d, _e = _a.state, state = _e === void 0 ? 'normal' : _e, onClick = _a.onClick, rest = __rest(_a, ["text", "size", "responsiveMode", "fontWeight", "type", "state", "onClick"]);
     var handleClick = function () {
         if (onClick) {
             onClick();
@@ -67,7 +67,7 @@ function TextButton(_a) {
         small: 'caption1Bold',
         xsmall: 'caption1Regular'
     };
-    return (react_1.default.createElement(S_Button, __assign({}, rest, { size: size, onClick: handleClick, type: type, fontWeight: fontWeight, disabled: state === 'disabled' }),
+    return (react_1.default.createElement(S_Button, __assign({}, rest, { size: size, responsiveMode: responsiveMode, onClick: handleClick, type: type, fontWeight: fontWeight, disabled: state === 'disabled' }),
         react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : 'usrTextBrandPrimary', btnMode: "use" })));
 }
 var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 48px;\n  ", ";\n"], ["\n  height: 48px;\n  ", ";\n"])), function (_a) {
@@ -77,7 +77,7 @@ var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 =
 var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 40px;\n"], ["\n  height: 40px;\n"])));
 var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 32px;\n"], ["\n  height: 32px;\n"])));
 var xsmall = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 24px;\n"], ["\n  height: 24px;\n"])));
-var S_Button = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  border-radius: 8px;\n  cursor: ", ";\n  display: flex;\n  justify-content: center;\n  padding-left: 8px;\n  padding-right: 8px;\n\n  &:hover:enabled {\n    background-color: ", ";\n  }\n  &:active:enabled {\n    background-color: ", ";\n  }\n  ", ";\n\n  & > div {\n    ", ";\n  }\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  border-radius: 8px;\n  cursor: ", ";\n  display: flex;\n  justify-content: center;\n  padding-left: 8px;\n  padding-right: 8px;\n\n  &:hover:enabled {\n    background-color: ", ";\n  }\n  &:active:enabled {\n    background-color: ", ";\n  }\n  ", ";\n\n  & > div {\n    ", ";\n  }\n"])), function (_a) {
+var S_Button = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  border-radius: 8px;\n  cursor: ", ";\n  display: flex;\n  justify-content: center;\n  padding-left: 8px;\n  padding-right: 8px;\n\n  &:hover:enabled {\n    background-color: ", ";\n  }\n  &:active:enabled {\n    background-color: ", ";\n  }\n  ", ";\n\n  & > div {\n    ", ";\n  }\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  border-radius: 8px;\n  cursor: ", ";\n  display: flex;\n  justify-content: center;\n  padding-left: 8px;\n  padding-right: 8px;\n\n  &:hover:enabled {\n    background-color: ", ";\n  }\n  &:active:enabled {\n    background-color: ", ";\n  }\n  ", ";\n\n  & > div {\n    ", ";\n  }\n  ", ";\n"])), function (_a) {
     var state = _a.state;
     return (state === 'normal' ? 'pointer' : 'default');
 }, function (_a) {
@@ -103,6 +103,9 @@ var S_Button = styled_components_1.default.button(templateObject_5 || (templateO
             bold: "font-weight: " + theme.fontWeight.bold,
             regular: "font-weight: " + theme.fontWeight.normal
         }[fontWeight];
+}, function (_a) {
+    var responsiveMode = _a.responsiveMode;
+    return responsiveMode === 'use' && 'width: 100%';
 });
 exports.default = TextButton;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -11,6 +11,7 @@ export declare type TextFieldProps = {
     validationPoint?: 'onChange' | 'onBlur';
     preventBlankMode?: 'none' | 'trim' | 'all';
     size?: 'small' | 'medium' | 'large' | 'rlarge';
+    responsiveMode?: 'none' | 'use';
     textLineType?: 'single' | 'multi' | 'auto';
     multiRows?: number;
     autoMinRows?: number;
@@ -29,9 +30,9 @@ export declare type TextFieldProps = {
     onChange?: (e: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => void;
     onClickIBtn1?: () => void;
     onClickIBtn2?: () => void;
-    onFocus?: () => void;
+    onFocus?: (e: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement>) => void;
     onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement> | React.KeyboardEvent<HTMLTextAreaElement>) => void;
     onTarget?: () => void;
 };
-declare function TextField({ name, hintText, defaultText, validation, validationPoint, preventBlankMode, size, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, state, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, colorTheme, max, maxLength, min, onBlur, onChange, onClickIBtn1, onClickIBtn2, onFocus, onKeyUp, onTarget }: TextFieldProps): JSX.Element;
+declare function TextField({ name, hintText, defaultText, validation, validationPoint, preventBlankMode, size, responsiveMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, state, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, colorTheme, max, maxLength, min, onBlur, onChange, onClickIBtn1, onClickIBtn2, onFocus, onKeyUp, onTarget }: TextFieldProps): JSX.Element;
 export default TextField;

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

@@ -32,7 +32,7 @@ var components_1 = require("../../common/components");
 var IconButton_1 = require("../IconButton");
 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.size, size = _e === void 0 ? 'large' : _e, _f = _a.textLineType, textLineType = _f === void 0 ? 'single' : _f, _g = _a.multiRows, multiRows = _g === void 0 ? 8 : _g, _h = _a.autoMinRows, autoMinRows = _h === void 0 ? 8 : _h, autoMaxRows = _a.autoMaxRows, _j = _a.inputType, inputType = _j === void 0 ? 'text' : _j, _k = _a.state, state = _k === void 0 ? 'normal' : _k, iBtn1IconName = _a.iBtn1IconName, _l = _a.iBtn1IconFillType, iBtn1IconFillType = _l === void 0 ? 'line' : _l, iBtn2IconName = _a.iBtn2IconName, _m = _a.iBtn2IconFillType, iBtn2IconFillType = _m === void 0 ? 'line' : _m, _o = _a.colorTheme, colorTheme = _o === void 0 ? 'none' : _o, max = _a.max, maxLength = _a.maxLength, min = _a.min, onBlur = _a.onBlur, onChange = _a.onChange, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onFocus = _a.onFocus, onKeyUp = _a.onKeyUp, onTarget = _a.onTarget;
+    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.size, size = _e === void 0 ? 'large' : _e, _f = _a.responsiveMode, responsiveMode = _f === void 0 ? 'none' : _f, _g = _a.textLineType, textLineType = _g === void 0 ? 'single' : _g, _h = _a.multiRows, multiRows = _h === void 0 ? 8 : _h, _j = _a.autoMinRows, autoMinRows = _j === void 0 ? 8 : _j, autoMaxRows = _a.autoMaxRows, _k = _a.inputType, inputType = _k === void 0 ? 'text' : _k, _l = _a.state, state = _l === void 0 ? 'normal' : _l, iBtn1IconName = _a.iBtn1IconName, _m = _a.iBtn1IconFillType, iBtn1IconFillType = _m === void 0 ? 'line' : _m, iBtn2IconName = _a.iBtn2IconName, _o = _a.iBtn2IconFillType, iBtn2IconFillType = _o === void 0 ? 'line' : _o, _p = _a.colorTheme, colorTheme = _p === void 0 ? 'none' : _p, max = _a.max, maxLength = _a.maxLength, min = _a.min, onBlur = _a.onBlur, onChange = _a.onChange, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onFocus = _a.onFocus, onKeyUp = _a.onKeyUp, onTarget = _a.onTarget;
     var iconThemeColorNoneObj = {
         normal: 'ui_cpnt_button_icon_default',
         read_only: 'ui_cpnt_button_icon_default',
@@ -44,9 +44,9 @@ function TextField(_a) {
         disabled: 'ui_cpnt_textfield_icon_darktheme_disabled'
     };
     var t = (0, react_i18next_1.useTranslation)('translation').t;
-    var _p = (0, react_1.useState)(false), isFocused = _p[0], setIsFocused = _p[1];
-    var _q = (0, react_hook_form_1.useFormContext)(), register = _q.register, trigger = _q.trigger, errors = _q.formState.errors;
-    var _r = register(name, validation), validateOnChange = _r.onChange, validateOnBlur = _r.onBlur;
+    var _q = (0, react_1.useState)(false), isFocused = _q[0], setIsFocused = _q[1];
+    var _r = (0, react_hook_form_1.useFormContext)(), register = _r.register, trigger = _r.trigger, errors = _r.formState.errors;
+    var _s = register(name, validation), validateOnChange = _s.onChange, validateOnBlur = _s.onBlur;
     var isError = Object.keys(errors).some(function (error) { return error === name; });
     var handleClickIBtn1 = function () {
         if (onClickIBtn1) {
@@ -58,12 +58,12 @@ function TextField(_a) {
             onClickIBtn2();
         }
     };
-    function handleFocus() {
+    function handleFocus(e) {
         if (state !== 'read_only') {
             setIsFocused(true);
         }
         if (onFocus) {
-            onFocus();
+            onFocus(e);
         }
     }
     function handleTarget() {
@@ -117,8 +117,8 @@ function TextField(_a) {
                             }[colorTheme], iconFillType: iBtn1IconFillType === 'fill' ? 'fill' : 'line', state: state === 'disabled' ? 'disabled' : 'normal', onClick: handleClickIBtn1 })))));
         }
     };
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(S_TextFieldWrapper, { size: size, textLineType: textLineType, isFocused: isFocused, isError: isError, state: state, colorTheme: colorTheme }, S_TextField()),
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(S_TextFieldWrapper, { size: size, responsiveMode: responsiveMode, textLineType: textLineType, isFocused: isFocused, isError: isError, state: state, colorTheme: colorTheme }, S_TextField()),
         ((_b = errors[name]) === null || _b === void 0 ? void 0 : _b.message) && react_1.default.createElement(S_Error, null, t(errors[name].message))));
 }
 var multi = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: auto;\n  padding: 14px;\n"], ["\n  height: auto;\n  padding: 14px;\n"])));
@@ -213,7 +213,7 @@ var dark_disabled = (0, styled_components_1.css)(templateObject_11 || (templateO
     var theme = _a.theme;
     return theme.ui_cpnt_textfield_border_darktheme_normal;
 });
-var S_TextFieldWrapper = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  align-items: center;\n  border-radius: 8px;\n  box-sizing: border-box;\n  display: flex;\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  align-items: center;\n  border-radius: 8px;\n  box-sizing: border-box;\n  display: flex;\n  ", ";\n  ", ";\n  ", ";\n"])), function (_a) {
+var S_TextFieldWrapper = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  align-items: center;\n  border-radius: 8px;\n  box-sizing: border-box;\n  display: flex;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  align-items: center;\n  border-radius: 8px;\n  box-sizing: border-box;\n  display: flex;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n"])), function (_a) {
     var size = _a.size;
     return size &&
         {
@@ -240,6 +240,9 @@ var S_TextFieldWrapper = styled_components_1.default.div(templateObject_12 || (t
             read_only: dark_read_only,
             disabled: dark_disabled
         }[state];
+}, function (_a) {
+    var responsiveMode = _a.responsiveMode;
+    return responsiveMode === 'use' && 'width: 100%';
 });
 var S_IconBox = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
 var S_Error = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-top: ", ";\n  text-align: left;\n"], ["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-top: ", ";\n  text-align: left;\n"])), function (_a) {

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

@@ -4,6 +4,7 @@ declare type UploadMainButtonProps = {
     text?: PDSTextType;
     fillType?: 'fill' | 'line';
     size?: 'large' | 'medium' | 'small' | 'xsmall' | 'rlarge';
+    responsiveMode?: 'none' | 'use';
     fontWeight?: 'bold' | 'regular';
     iconMode?: 'none' | 'left' | 'right';
     iconFillType?: 'fill' | 'line';
@@ -14,5 +15,5 @@ declare type UploadMainButtonProps = {
     multipleMode?: 'none' | 'use';
     onClick?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 };
-declare function UploadMainButton({ text, fillType, size, fontWeight, iconMode, iconFillType, iconName, colorTheme, state, accept, multipleMode, onClick }: UploadMainButtonProps): JSX.Element;
+declare function UploadMainButton({ text, fillType, size, responsiveMode, fontWeight, iconMode, iconFillType, iconName, colorTheme, state, accept, multipleMode, onClick }: UploadMainButtonProps): JSX.Element;
 export default UploadMainButton;

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

@@ -32,7 +32,7 @@ var hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
 var types_1 = require("./types");
 function UploadMainButton(_a) {
-    var text = _a.text, _b = _a.fillType, fillType = _b === void 0 ? 'fill' : _b, _c = _a.size, size = _c === void 0 ? 'large' : _c, fontWeight = _a.fontWeight, _d = _a.iconMode, iconMode = _d === void 0 ? 'none' : _d, _e = _a.iconFillType, iconFillType = _e === void 0 ? 'line' : _e, _f = _a.iconName, iconName = _f === void 0 ? 'ic_upload' : _f, _g = _a.colorTheme, colorTheme = _g === void 0 ? 'none' : _g, _h = _a.state, state = _h === void 0 ? 'normal' : _h, _j = _a.accept, accept = _j === void 0 ? '*' : _j, _k = _a.multipleMode, multipleMode = _k === void 0 ? 'none' : _k, onClick = _a.onClick;
+    var text = _a.text, _b = _a.fillType, fillType = _b === void 0 ? 'fill' : _b, _c = _a.size, size = _c === void 0 ? 'large' : _c, _d = _a.responsiveMode, responsiveMode = _d === void 0 ? 'none' : _d, fontWeight = _a.fontWeight, _e = _a.iconMode, iconMode = _e === void 0 ? 'none' : _e, _f = _a.iconFillType, iconFillType = _f === void 0 ? 'line' : _f, _g = _a.iconName, iconName = _g === void 0 ? 'ic_upload' : _g, _h = _a.colorTheme, colorTheme = _h === void 0 ? 'none' : _h, _j = _a.state, state = _j === void 0 ? 'normal' : _j, _k = _a.accept, accept = _k === void 0 ? '*' : _k, _l = _a.multipleMode, multipleMode = _l === void 0 ? 'none' : _l, onClick = _a.onClick;
     var handleClick = function (e) {
         if (onClick) {
             onClick(e);
@@ -59,7 +59,7 @@ function UploadMainButton(_a) {
         }
         return types_1.iconFillTypeColors[fillType];
     };
-    return (react_1.default.createElement(S_UploadMainButton, { fillType: fillType, size: size, fontWeight: fontWeight, colorTheme: colorTheme, disabled: state === 'disabled' },
+    return (react_1.default.createElement(S_UploadMainButton, { fillType: fillType, size: size, responsiveMode: responsiveMode, fontWeight: fontWeight, colorTheme: colorTheme, disabled: state === 'disabled' },
         react_1.default.createElement("input", { type: "file", hidden: true, disabled: state === 'disabled', accept: accept, multiple: multipleMode === 'use', onChange: handleClick }),
         size !== 'xsmall' && iconMode === 'left' && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType }),
@@ -157,7 +157,7 @@ var line = (0, styled_components_1.css)(templateObject_12 || (templateObject_12
     var disabled = _a.disabled;
     return disabled && lineDisabled;
 });
-var S_UploadMainButton = styled_components_1.default.label(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n\n  & > div {\n    font-weight: ", ";\n  }\n\n  ", "\n  ", "\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n\n  & > div {\n    font-weight: ", ";\n  }\n\n  ", "\n  ", "\n"])), function (_a) {
+var S_UploadMainButton = styled_components_1.default.label(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n\n  & > div {\n    font-weight: ", ";\n  }\n\n  ", "\n  ", "\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n\n  & > div {\n    font-weight: ", ";\n  }\n\n  ", "\n  ", "\n  ", ";\n"])), function (_a) {
     var disabled = _a.disabled;
     return (disabled ? 'default' : 'pointer');
 }, function (_a) {
@@ -173,6 +173,9 @@ var S_UploadMainButton = styled_components_1.default.label(templateObject_13 ||
 }, function (_a) {
     var size = _a.size;
     return size && { large: large, medium: medium, small: small, xsmall: xsmall, rlarge: large }[size];
+}, function (_a) {
+    var responsiveMode = _a.responsiveMode;
+    return responsiveMode === 'use' && 'width: 100%';
 });
 exports.default = UploadMainButton;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;

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

@@ -3,11 +3,12 @@ import { PDSTextType } from '../../../common';
 declare type UploadTextButtonProps = {
     text?: PDSTextType;
     size?: 'rlarge' | 'large' | 'medium' | 'small' | 'xsmall';
+    responsiveMode?: 'none' | 'use';
     fontWeight?: 'bold' | 'regular';
     state?: 'normal' | 'disabled';
     accept?: string;
     multipleMode?: 'none' | 'use';
     onClick?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 };
-declare function UploadTextButton({ text, size, fontWeight, state, accept, multipleMode, onClick }: UploadTextButtonProps): JSX.Element;
+declare function UploadTextButton({ text, size, responsiveMode, fontWeight, state, accept, multipleMode, onClick }: UploadTextButtonProps): JSX.Element;
 export default UploadTextButton;

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

@@ -37,13 +37,13 @@ var textStyle = {
     xsmall: 'caption1Regular'
 };
 function UploadTextButton(_a) {
-    var text = _a.text, _b = _a.size, size = _b === void 0 ? 'large' : _b, fontWeight = _a.fontWeight, _c = _a.state, state = _c === void 0 ? 'normal' : _c, _d = _a.accept, accept = _d === void 0 ? '*' : _d, _e = _a.multipleMode, multipleMode = _e === void 0 ? 'none' : _e, onClick = _a.onClick;
+    var text = _a.text, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, fontWeight = _a.fontWeight, _d = _a.state, state = _d === void 0 ? 'normal' : _d, _e = _a.accept, accept = _e === void 0 ? '*' : _e, _f = _a.multipleMode, multipleMode = _f === void 0 ? 'none' : _f, onClick = _a.onClick;
     var handleClick = function (e) {
         if (onClick) {
             onClick(e);
         }
     };
-    return (react_1.default.createElement(S_UploadTextButton, { size: size, fontWeight: fontWeight, disabled: state === 'disabled' },
+    return (react_1.default.createElement(S_UploadTextButton, { size: size, responsiveMode: responsiveMode, fontWeight: fontWeight, disabled: state === 'disabled' },
         react_1.default.createElement("input", { type: "file", hidden: true, disabled: state === 'disabled', accept: accept, multiple: multipleMode === 'use', onChange: handleClick }),
         react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : 'usrTextBrandPrimary', btnMode: "use" })));
 }
@@ -54,7 +54,7 @@ var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 =
 var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 40px;\n"], ["\n  height: 40px;\n"])));
 var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 32px;\n"], ["\n  height: 32px;\n"])));
 var xsmall = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 24px;\n"], ["\n  height: 24px;\n"])));
-var S_UploadTextButton = styled_components_1.default.label(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  border-radius: 8px;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n  padding: 0 ", ";\n\n  &:hover:not([disabled]) {\n    background-color: ", ";\n  }\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n\n  & > div {\n    font-weight: ", ";\n  }\n\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  border-radius: 8px;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n  padding: 0 ", ";\n\n  &:hover:not([disabled]) {\n    background-color: ", ";\n  }\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n\n  & > div {\n    font-weight: ", ";\n  }\n\n  ", ";\n"])), function (_a) {
+var S_UploadTextButton = styled_components_1.default.label(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  border-radius: 8px;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n  padding: 0 ", ";\n\n  &:hover:not([disabled]) {\n    background-color: ", ";\n  }\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n\n  & > div {\n    font-weight: ", ";\n  }\n\n  ", ";\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  border-radius: 8px;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n  padding: 0 ", ";\n\n  &:hover:not([disabled]) {\n    background-color: ", ";\n  }\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n\n  & > div {\n    font-weight: ", ";\n  }\n\n  ", ";\n  ", ";\n"])), function (_a) {
     var disabled = _a.disabled;
     return (disabled ? 'default' : 'pointer');
 }, function (_a) {
@@ -83,6 +83,9 @@ var S_UploadTextButton = styled_components_1.default.label(templateObject_5 || (
             small: small,
             xsmall: xsmall
         }[size];
+}, function (_a) {
+    var responsiveMode = _a.responsiveMode;
+    return responsiveMode === 'use' && 'width: 100%';
 });
 exports.default = UploadTextButton;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/src/hybrid/components/Icon/Icon.d.ts

@@ -11,5 +11,5 @@ export declare type IconProps = {
     colorKey?: UiColors;
     fillType?: 'line' | 'fill';
 } & Record<string, any>;
-declare const Icon: ({ iconName, size, colorKey, fillType, ...rest }: IconProps) => JSX.Element;
+declare const Icon: ({ iconName, size, colorKey, fillType }: IconProps) => JSX.Element;
 export default Icon;

package/dist/src/hybrid/components/Icon/Icon.js

@@ -1,26 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -30,10 +8,10 @@ var fill_1 = __importDefault(require("../../../common/assets/icons/fill"));
 var line_1 = __importDefault(require("../../../common/assets/icons/line"));
 var ui_colors_1 = require("../../../common/styles/ui-colors");
 var Icon = function (_a) {
-    var _b = _a.iconName, iconName = _b === void 0 ? 'ic_unavailable' : _b, _c = _a.size, size = _c === void 0 ? 24 : _c, _d = _a.colorKey, colorKey = _d === void 0 ? 'ui_cpnt_icon_sys_grey_01' : _d, _e = _a.fillType, fillType = _e === void 0 ? 'line' : _e, rest = __rest(_a, ["iconName", "size", "colorKey", "fillType"]);
+    var _b = _a.iconName, iconName = _b === void 0 ? 'ic_unavailable' : _b, _c = _a.size, size = _c === void 0 ? 24 : _c, _d = _a.colorKey, colorKey = _d === void 0 ? 'ui_cpnt_icon_sys_grey_01' : _d, _e = _a.fillType, fillType = _e === void 0 ? 'line' : _e;
     var SelectedIcon = fillType === 'line'
         ? line_1.default[iconName] || fill_1.default[iconName]
         : fill_1.default[iconName] || line_1.default[iconName];
-    return react_1.default.createElement(SelectedIcon, __assign({ color: ui_colors_1.uiColors[colorKey], size: size }, rest));
+    return react_1.default.createElement(SelectedIcon, { color: ui_colors_1.uiColors[colorKey], size: size });
 };
 exports.default = Icon;

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

@@ -29,7 +29,7 @@ export declare type TextFieldBaseProps = {
     isFocused?: boolean;
     onBlur?: (e: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement>) => void;
     onChange?: (e: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => void;
-    onFocus?: () => void;
+    onFocus?: (e: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement>) => void;
     onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement> | React.KeyboardEvent<HTMLTextAreaElement>) => void;
     onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement> | React.KeyboardEvent<HTMLTextAreaElement>) => void;
     onTarget?: () => void;

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

@@ -58,17 +58,12 @@ function TextFieldBase(_a) {
     (0, react_1.useEffect)(function () {
         return function () { return clearTimeout(timeout); };
     }, []);
-    function handleFocus() {
+    function handleFocus(e) {
         if (onFocus) {
-            onFocus();
+            onFocus(e);
         }
         clearErrors(name);
     }
-    function handleTarget() {
-        if (onTarget) {
-            onTarget();
-        }
-    }
     function handleKeyDown(e) {
         if (onKeyDown) {
             onKeyDown(e);
@@ -175,14 +170,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, onFocus: handleFocus, onTarget: handleTarget, 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, 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, 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', 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, onFocus: handleFocus, onTarget: handleTarget, 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, state: state, readOnly: state === 'read_only' && true, disabled: state === 'disabled' && true, maxLength: maxLength, rows: multiRows, textSize: textSize, textWeight: textWeight, textPadding: textPadding, colorTheme: colorTheme, 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, onFocus: handleFocus, onTarget: handleTarget, 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, 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, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, ref: function (e) {
                     ref(e);
                     textAreaRef.current = e;
                 }, onInput: handleResizeHeight })));
@@ -246,7 +241,7 @@ var S_Input = styled_components_1.default.input(templateObject_5 || (templateObj
     var theme = _a.theme;
     return theme.desktopLineHeight.singleLine;
 });
-var S_Auto = styled_components_1.default.textarea(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", "\n  resize: none;\n  ", "\n  ", ";\n"], ["\n  ", "\n  resize: none;\n  ", "\n  ", ";\n"])), basicStyle, function (_a) {
+var S_Auto = styled_components_1.default.textarea(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", "\n  display: block;\n  overflow-y: auto;\n  resize: none;\n  ", "\n  ", ";\n"], ["\n  ", "\n  display: block;\n  overflow-y: auto;\n  resize: none;\n  ", "\n  ", ";\n"])), basicStyle, function (_a) {
     var autoMaxRows = _a.autoMaxRows, textSize = _a.textSize, fieldHeight = _a.fieldHeight;
     return autoMaxRows &&
         fieldHeight &&

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

@@ -17,7 +17,7 @@ export declare type BlogTextFieldProps = {
     };
     onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
     onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
-    onFocus?: () => void;
+    onFocus?: (e: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement>) => void;
     onTarget?: () => void;
 };
 declare function BlogTextField({ hintText, defaultText, size, textLineType, multiRows, autoMinRows, autoMaxRows, state, maxLength, name, validation, onBlur, onChange, onFocus, onTarget }: BlogTextFieldProps): JSX.Element;

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

@@ -32,9 +32,9 @@ var styled_components_1 = __importStar(require("styled-components"));
 var components_1 = require("../../common/components");
 function BlogTextField(_a) {
     var hintText = _a.hintText, defaultText = _a.defaultText, _b = _a.size, size = _b === void 0 ? 'rlarge' : _b, _c = _a.textLineType, textLineType = _c === void 0 ? 'auto' : _c, _d = _a.multiRows, multiRows = _d === void 0 ? 8 : _d, _e = _a.autoMinRows, autoMinRows = _e === void 0 ? 8 : _e, autoMaxRows = _a.autoMaxRows, _f = _a.state, state = _f === void 0 ? 'normal' : _f, maxLength = _a.maxLength, name = _a.name, validation = _a.validation, onBlur = _a.onBlur, onChange = _a.onChange, onFocus = _a.onFocus, onTarget = _a.onTarget;
-    function handleFocus() {
+    function handleFocus(e) {
         if (onFocus) {
-            onFocus();
+            onFocus(e);
         }
     }
     function handleBlur(e) {

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

@@ -4,6 +4,7 @@ export declare type MainButtonProps = {
     text?: PDSTextType;
     fillType?: 'fill' | 'line';
     size?: 'large' | 'medium' | 'small' | 'xsmall' | 'rlarge';
+    responsiveMode?: 'none' | 'use';
     fontWeight?: 'bold' | 'regular';
     iconMode?: 'none' | 'left' | 'right';
     iconFillType?: 'fill' | 'line';
@@ -14,5 +15,5 @@ export declare type MainButtonProps = {
     onClick?: (...args: any) => any;
     onMouseDown?: (...args: any) => any;
 };
-declare function MainButton({ text, fillType, size, fontWeight, iconMode, iconFillType, iconName, colorTheme, type, state, onClick, onMouseDown }: MainButtonProps): JSX.Element;
+declare function MainButton({ text, fillType, size, responsiveMode, fontWeight, iconMode, iconFillType, iconName, colorTheme, type, state, onClick, onMouseDown }: MainButtonProps): JSX.Element;
 export default MainButton;

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

@@ -37,7 +37,7 @@ var TextLabel_1 = require("../TextLabel");
 // borderColorKey?: string;
 // shadow?: 'hidden' | 'visible';
 function MainButton(_a) {
-    var text = _a.text, _b = _a.fillType, fillType = _b === void 0 ? 'fill' : _b, _c = _a.size, size = _c === void 0 ? 'large' : _c, fontWeight = _a.fontWeight, _d = _a.iconMode, iconMode = _d === void 0 ? 'none' : _d, _e = _a.iconFillType, iconFillType = _e === void 0 ? 'line' : _e, iconName = _a.iconName, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'none' : _f, _g = _a.type, type = _g === void 0 ? 'button' : _g, _h = _a.state, state = _h === void 0 ? 'normal' : _h, onClick = _a.onClick, onMouseDown = _a.onMouseDown;
+    var text = _a.text, _b = _a.fillType, fillType = _b === void 0 ? 'fill' : _b, _c = _a.size, size = _c === void 0 ? 'large' : _c, _d = _a.responsiveMode, responsiveMode = _d === void 0 ? 'none' : _d, fontWeight = _a.fontWeight, _e = _a.iconMode, iconMode = _e === void 0 ? 'none' : _e, _f = _a.iconFillType, iconFillType = _f === void 0 ? 'line' : _f, iconName = _a.iconName, _g = _a.colorTheme, colorTheme = _g === void 0 ? 'none' : _g, _h = _a.type, type = _h === void 0 ? 'button' : _h, _j = _a.state, state = _j === void 0 ? 'normal' : _j, onClick = _a.onClick, onMouseDown = _a.onMouseDown;
     var handleClick = function () {
         if (onClick) {
             onClick();
@@ -94,7 +94,7 @@ function MainButton(_a) {
         }
         return iconFillTypeColorObj[fillType];
     };
-    return (react_1.default.createElement(S_Button, { fillType: fillType, size: size, fontWeight: fontWeight, colorTheme: colorTheme, type: type, state: state, disabled: state === 'disabled', onClick: handleClick, onMouseDown: handleMouseDown },
+    return (react_1.default.createElement(S_Button, { fillType: fillType, size: size, responsiveMode: responsiveMode, fontWeight: fontWeight, colorTheme: colorTheme, type: type, state: state, disabled: state === 'disabled', onClick: handleClick, onMouseDown: handleMouseDown },
         size !== 'xsmall' && iconMode === 'left' && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType }),
             react_1.default.createElement(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }))),
@@ -170,7 +170,7 @@ var line = (0, styled_components_1.css)(templateObject_12 || (templateObject_12
     var state = _a.state;
     return state === 'disabled' && lineDisabled;
 });
-var S_Button = styled_components_1.default.button(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  cursor: ", ";\n  display: flex;\n  justify-content: center;\n\n  &:focus {\n    outline: none;\n  }\n\n  ", "\n  ", "\n\n  & > div {\n    ", ";\n  }\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  cursor: ", ";\n  display: flex;\n  justify-content: center;\n\n  &:focus {\n    outline: none;\n  }\n\n  ", "\n  ", "\n\n  & > div {\n    ", ";\n  }\n"])), function (_a) {
+var S_Button = styled_components_1.default.button(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  cursor: ", ";\n  display: flex;\n  justify-content: center;\n\n  &:focus {\n    outline: none;\n  }\n\n  ", "\n  ", "\n  ", ";\n\n  & > div {\n    ", ";\n  }\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  cursor: ", ";\n  display: flex;\n  justify-content: center;\n\n  &:focus {\n    outline: none;\n  }\n\n  ", "\n  ", "\n  ", ";\n\n  & > div {\n    ", ";\n  }\n"])), function (_a) {
     var state = _a.state;
     return (state === 'normal' ? 'pointer' : 'default');
 }, function (_a) {
@@ -179,6 +179,9 @@ var S_Button = styled_components_1.default.button(templateObject_13 || (template
 }, function (_a) {
     var size = _a.size;
     return size && { large: large, medium: medium, small: small, xsmall: xsmall, rlarge: large }[size];
+}, function (_a) {
+    var responsiveMode = _a.responsiveMode;
+    return responsiveMode === 'use' && 'width: 100%';
 }, function (_a) {
     var theme = _a.theme, fontWeight = _a.fontWeight;
     return fontWeight &&

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

@@ -9,9 +9,10 @@ declare type SelectProps = {
     defaultValue?: Value;
     valueArray: Value[];
     size?: 'large' | 'medium' | 'small' | 'rlarge';
+    responsiveMode?: 'none' | 'use';
     state?: 'normal' | 'read_only' | 'disabled';
     onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
     colorTheme?: 'none' | 'dark';
 };
-declare function Select({ hintText, defaultValue, valueArray, size, state, onChange, colorTheme }: SelectProps): JSX.Element;
+declare function Select({ hintText, defaultValue, valueArray, size, responsiveMode, state, onChange, colorTheme }: SelectProps): JSX.Element;
 export default Select;

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

@@ -27,8 +27,8 @@ var react_1 = __importStar(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var hybrid_1 = require("../../../hybrid");
 function Select(_a) {
-    var hintText = _a.hintText, defaultValue = _a.defaultValue, valueArray = _a.valueArray, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.state, state = _c === void 0 ? 'normal' : _c, onChange = _a.onChange, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'none' : _d;
-    var _e = (0, react_1.useState)(false), isFocused = _e[0], setIsFocused = _e[1];
+    var hintText = _a.hintText, defaultValue = _a.defaultValue, valueArray = _a.valueArray, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, _d = _a.state, state = _d === void 0 ? 'normal' : _d, onChange = _a.onChange, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'none' : _e;
+    var _f = (0, react_1.useState)(false), isFocused = _f[0], setIsFocused = _f[1];
     var handleClick = function () { return setIsFocused(true); };
     var handleBlur = function () { return setIsFocused(false); };
     var handleChange = function (e) {
@@ -49,7 +49,7 @@ function Select(_a) {
         }
         return 'ui_cpnt_select_icon_01';
     };
-    return (react_1.default.createElement(S_Box, { size: size, onClick: handleClick, onBlur: handleBlur, tabIndex: 0 },
+    return (react_1.default.createElement(S_Box, { size: size, responsiveMode: responsiveMode, onClick: handleClick, onBlur: handleBlur, tabIndex: 0 },
         react_1.default.createElement(S_Icon, { size: 16, fillType: "line", iconName: isFocused ? 'ic_arrow_up' : 'ic_arrow_down', colorKey: getIconColorKey() }),
         react_1.default.createElement(S_Select, { disabled: state === 'disabled' || state === 'read_only', defaultValue: (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) || '', state: state, colorTheme: colorTheme, onChange: handleChange },
             react_1.default.createElement("option", { disabled: true, value: (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) || '' }, (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.text) || hintText),
@@ -83,7 +83,7 @@ var dark = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 =
     var theme = _a.theme;
     return theme.ui_cpnt_select_text_darktheme_enabled;
 });
-var S_Box = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: relative;\n  z-index: 0;\n\n  ", "\n"], ["\n  position: relative;\n  z-index: 0;\n\n  ", "\n"])), function (_a) {
+var S_Box = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: relative;\n  z-index: 0;\n\n  ", "\n  ", ";\n"], ["\n  position: relative;\n  z-index: 0;\n\n  ", "\n  ", ";\n"])), function (_a) {
     var size = _a.size;
     return size &&
         {
@@ -92,6 +92,9 @@ var S_Box = styled_components_1.default.div(templateObject_6 || (templateObject_
             small: small,
             rlarge: rlarge
         }[size];
+}, function (_a) {
+    var responsiveMode = _a.responsiveMode;
+    return responsiveMode === 'use' && 'width: 100%';
 });
 var S_Icon = (0, styled_components_1.default)(hybrid_1.Icon)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: absolute;\n  right: ", ";\n  top: 50%;\n  transform: translateY(-50%);\n  z-index: 2;\n"], ["\n  position: absolute;\n  right: ", ";\n  top: 50%;\n  transform: translateY(-50%);\n  z-index: 2;\n"])), function (_a) {
     var theme = _a.theme;

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

@@ -3,10 +3,11 @@ import { PDSTextType } from '../../../common';
 export declare type TextButtonProps = {
     text?: PDSTextType;
     size?: 'rlarge' | 'large' | 'medium' | 'small' | 'xsmall';
+    responsiveMode?: 'none' | 'use';
     fontWeight?: 'bold' | 'regular';
     type?: 'submit' | 'reset' | 'button';
     state?: 'normal' | 'disabled';
     onClick?: (...args: any) => any;
 };
-declare function TextButton({ text, size, fontWeight, type, state, onClick, ...rest }: TextButtonProps): JSX.Element;
+declare function TextButton({ text, size, responsiveMode, fontWeight, type, state, onClick, ...rest }: TextButtonProps): JSX.Element;
 export default TextButton;

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

@@ -54,7 +54,7 @@ var TextLabel_1 = require("../TextLabel");
 // NOTE : 기획상 아직 사용하지 않는 props
 // colorTheme?: 'none';
 function TextButton(_a) {
-    var text = _a.text, _b = _a.size, size = _b === void 0 ? 'large' : _b, fontWeight = _a.fontWeight, _c = _a.type, type = _c === void 0 ? 'button' : _c, _d = _a.state, state = _d === void 0 ? 'normal' : _d, onClick = _a.onClick, rest = __rest(_a, ["text", "size", "fontWeight", "type", "state", "onClick"]);
+    var text = _a.text, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, fontWeight = _a.fontWeight, _d = _a.type, type = _d === void 0 ? 'button' : _d, _e = _a.state, state = _e === void 0 ? 'normal' : _e, onClick = _a.onClick, rest = __rest(_a, ["text", "size", "responsiveMode", "fontWeight", "type", "state", "onClick"]);
     var handleClick = function () {
         if (onClick) {
             onClick();
@@ -67,7 +67,7 @@ function TextButton(_a) {
         small: 'caption1Bold',
         xsmall: 'caption1Regular'
     };
-    return (react_1.default.createElement(S_Button, __assign({}, rest, { size: size, onClick: handleClick, type: type, fontWeight: fontWeight, disabled: state === 'disabled' }),
+    return (react_1.default.createElement(S_Button, __assign({}, rest, { size: size, responsiveMode: responsiveMode, onClick: handleClick, type: type, fontWeight: fontWeight, disabled: state === 'disabled' }),
         react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : 'usrTextBrandPrimary', btnMode: "use" })));
 }
 var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 48px;\n  ", ";\n"], ["\n  height: 48px;\n  ", ";\n"])), function (_a) {
@@ -77,7 +77,7 @@ var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 =
 var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 40px;\n"], ["\n  height: 40px;\n"])));
 var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 32px;\n"], ["\n  height: 32px;\n"])));
 var xsmall = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 24px;\n"], ["\n  height: 24px;\n"])));
-var S_Button = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  border-radius: 8px;\n  cursor: ", ";\n  display: flex;\n  justify-content: center;\n  padding-left: 8px;\n  padding-right: 8px;\n\n  &:active:enabled {\n    background-color: ", ";\n  }\n  ", ";\n\n  & > div {\n    ", ";\n  }\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  border-radius: 8px;\n  cursor: ", ";\n  display: flex;\n  justify-content: center;\n  padding-left: 8px;\n  padding-right: 8px;\n\n  &:active:enabled {\n    background-color: ", ";\n  }\n  ", ";\n\n  & > div {\n    ", ";\n  }\n"])), function (_a) {
+var S_Button = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  border-radius: 8px;\n  cursor: ", ";\n  display: flex;\n  justify-content: center;\n  padding-left: 8px;\n  padding-right: 8px;\n\n  &:active:enabled {\n    background-color: ", ";\n  }\n  ", ";\n\n  & > div {\n    ", ";\n  }\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  border-radius: 8px;\n  cursor: ", ";\n  display: flex;\n  justify-content: center;\n  padding-left: 8px;\n  padding-right: 8px;\n\n  &:active:enabled {\n    background-color: ", ";\n  }\n  ", ";\n\n  & > div {\n    ", ";\n  }\n  ", ";\n"])), function (_a) {
     var state = _a.state;
     return (state === 'normal' ? 'pointer' : 'default');
 }, function (_a) {
@@ -100,6 +100,9 @@ var S_Button = styled_components_1.default.button(templateObject_5 || (templateO
             bold: "font-weight: " + theme.fontWeight.bold,
             regular: "font-weight: " + theme.fontWeight.normal
         }[fontWeight];
+}, function (_a) {
+    var responsiveMode = _a.responsiveMode;
+    return responsiveMode === 'use' && 'width: 100%';
 });
 exports.default = TextButton;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -11,6 +11,7 @@ export declare type TextFieldProps = {
     validationPoint?: 'onChange' | 'onBlur';
     preventBlankMode?: 'none' | 'trim' | 'all';
     size?: 'small' | 'medium' | 'large' | 'rlarge';
+    responsiveMode?: 'none' | 'use';
     textLineType?: 'single' | 'multi' | 'auto';
     multiRows?: number;
     autoMinRows?: number;
@@ -29,9 +30,9 @@ export declare type TextFieldProps = {
     onChange?: (e: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => void;
     onClickIBtn1?: () => void;
     onClickIBtn2?: () => void;
-    onFocus?: () => void;
+    onFocus?: (e: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement>) => void;
     onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement> | React.KeyboardEvent<HTMLTextAreaElement>) => void;
     onTarget?: () => void;
 };
-declare function TextField({ name, hintText, defaultText, validation, validationPoint, preventBlankMode, size, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, state, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, colorTheme, max, maxLength, min, onBlur, onChange, onClickIBtn1, onClickIBtn2, onFocus, onKeyUp, onTarget }: TextFieldProps): JSX.Element;
+declare function TextField({ name, hintText, defaultText, validation, validationPoint, preventBlankMode, size, responsiveMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, state, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, colorTheme, max, maxLength, min, onBlur, onChange, onClickIBtn1, onClickIBtn2, onFocus, onKeyUp, onTarget }: TextFieldProps): JSX.Element;
 export default TextField;

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

@@ -32,7 +32,7 @@ var components_1 = require("../../common/components");
 var IconButton_1 = require("../IconButton");
 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.size, size = _e === void 0 ? 'large' : _e, _f = _a.textLineType, textLineType = _f === void 0 ? 'single' : _f, _g = _a.multiRows, multiRows = _g === void 0 ? 8 : _g, _h = _a.autoMinRows, autoMinRows = _h === void 0 ? 8 : _h, autoMaxRows = _a.autoMaxRows, _j = _a.inputType, inputType = _j === void 0 ? 'text' : _j, _k = _a.state, state = _k === void 0 ? 'normal' : _k, iBtn1IconName = _a.iBtn1IconName, _l = _a.iBtn1IconFillType, iBtn1IconFillType = _l === void 0 ? 'line' : _l, iBtn2IconName = _a.iBtn2IconName, _m = _a.iBtn2IconFillType, iBtn2IconFillType = _m === void 0 ? 'line' : _m, _o = _a.colorTheme, colorTheme = _o === void 0 ? 'none' : _o, max = _a.max, maxLength = _a.maxLength, min = _a.min, onBlur = _a.onBlur, onChange = _a.onChange, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onFocus = _a.onFocus, onKeyUp = _a.onKeyUp, onTarget = _a.onTarget;
+    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.size, size = _e === void 0 ? 'large' : _e, _f = _a.responsiveMode, responsiveMode = _f === void 0 ? 'none' : _f, _g = _a.textLineType, textLineType = _g === void 0 ? 'single' : _g, _h = _a.multiRows, multiRows = _h === void 0 ? 8 : _h, _j = _a.autoMinRows, autoMinRows = _j === void 0 ? 8 : _j, autoMaxRows = _a.autoMaxRows, _k = _a.inputType, inputType = _k === void 0 ? 'text' : _k, _l = _a.state, state = _l === void 0 ? 'normal' : _l, iBtn1IconName = _a.iBtn1IconName, _m = _a.iBtn1IconFillType, iBtn1IconFillType = _m === void 0 ? 'line' : _m, iBtn2IconName = _a.iBtn2IconName, _o = _a.iBtn2IconFillType, iBtn2IconFillType = _o === void 0 ? 'line' : _o, _p = _a.colorTheme, colorTheme = _p === void 0 ? 'none' : _p, max = _a.max, maxLength = _a.maxLength, min = _a.min, onBlur = _a.onBlur, onChange = _a.onChange, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onFocus = _a.onFocus, onKeyUp = _a.onKeyUp, onTarget = _a.onTarget;
     var iconThemeColorNoneObj = {
         normal: 'ui_cpnt_button_icon_default',
         read_only: 'ui_cpnt_button_icon_default',
@@ -44,9 +44,9 @@ function TextField(_a) {
         disabled: 'ui_cpnt_textfield_icon_darktheme_disabled'
     };
     var t = (0, react_i18next_1.useTranslation)('translation').t;
-    var _p = (0, react_1.useState)(false), isFocused = _p[0], setIsFocused = _p[1];
-    var _q = (0, react_hook_form_1.useFormContext)(), register = _q.register, trigger = _q.trigger, errors = _q.formState.errors;
-    var _r = register(name, validation), validateOnChange = _r.onChange, validateOnBlur = _r.onBlur;
+    var _q = (0, react_1.useState)(false), isFocused = _q[0], setIsFocused = _q[1];
+    var _r = (0, react_hook_form_1.useFormContext)(), register = _r.register, trigger = _r.trigger, errors = _r.formState.errors;
+    var _s = register(name, validation), validateOnChange = _s.onChange, validateOnBlur = _s.onBlur;
     var isError = Object.keys(errors).some(function (error) { return error === name; });
     var handleClickIBtn1 = function () {
         if (onClickIBtn1) {
@@ -58,12 +58,12 @@ function TextField(_a) {
             onClickIBtn2();
         }
     };
-    function handleFocus() {
+    function handleFocus(e) {
         if (state !== 'read_only') {
             setIsFocused(true);
         }
         if (onFocus) {
-            onFocus();
+            onFocus(e);
         }
     }
     function handleTarget() {
@@ -117,8 +117,8 @@ function TextField(_a) {
                             }[colorTheme], iconFillType: iBtn1IconFillType === 'fill' ? 'fill' : 'line', state: state === 'disabled' ? 'disabled' : 'normal', onClick: handleClickIBtn1 })))));
         }
     };
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(S_TextFieldWrapper, { size: size, textLineType: textLineType, isFocused: isFocused, isError: isError, state: state, colorTheme: colorTheme }, S_TextField()),
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(S_TextFieldWrapper, { size: size, responsiveMode: responsiveMode, textLineType: textLineType, isFocused: isFocused, isError: isError, state: state, colorTheme: colorTheme }, S_TextField()),
         ((_b = errors[name]) === null || _b === void 0 ? void 0 : _b.message) && react_1.default.createElement(S_Error, null, t(errors[name].message))));
 }
 var multi = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: auto;\n  padding: 14px;\n"], ["\n  height: auto;\n  padding: 14px;\n"])));
@@ -213,7 +213,7 @@ var dark_disabled = (0, styled_components_1.css)(templateObject_11 || (templateO
     var theme = _a.theme;
     return theme.ui_cpnt_textfield_border_darktheme_normal;
 });
-var S_TextFieldWrapper = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  align-items: center;\n  border-radius: 8px;\n  box-sizing: border-box;\n  display: flex;\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  align-items: center;\n  border-radius: 8px;\n  box-sizing: border-box;\n  display: flex;\n  ", ";\n  ", ";\n  ", ";\n"])), function (_a) {
+var S_TextFieldWrapper = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  align-items: center;\n  border-radius: 8px;\n  box-sizing: border-box;\n  display: flex;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  align-items: center;\n  border-radius: 8px;\n  box-sizing: border-box;\n  display: flex;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n"])), function (_a) {
     var size = _a.size;
     return size &&
         {
@@ -240,6 +240,9 @@ var S_TextFieldWrapper = styled_components_1.default.div(templateObject_12 || (t
             read_only: dark_read_only,
             disabled: dark_disabled
         }[state];
+}, function (_a) {
+    var responsiveMode = _a.responsiveMode;
+    return responsiveMode === 'use' && 'width: 100%';
 });
 var S_IconBox = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
 var S_Error = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-top: ", ";\n  text-align: left;\n"], ["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-top: ", ";\n  text-align: left;\n"])), function (_a) {

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

@@ -4,6 +4,7 @@ declare type UploadMainButtonProps = {
     text?: PDSTextType;
     fillType?: 'fill' | 'line';
     size?: 'large' | 'medium' | 'small' | 'xsmall' | 'rlarge';
+    responsiveMode?: 'none' | 'use';
     fontWeight?: 'bold' | 'regular';
     iconMode?: 'none' | 'left' | 'right';
     iconFillType?: 'fill' | 'line';
@@ -14,5 +15,5 @@ declare type UploadMainButtonProps = {
     multipleMode?: 'none' | 'use';
     onClick?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 };
-declare function UploadMainButton({ text, fillType, size, fontWeight, iconMode, iconFillType, iconName, colorTheme, state, accept, multipleMode, onClick }: UploadMainButtonProps): JSX.Element;
+declare function UploadMainButton({ text, fillType, size, responsiveMode, fontWeight, iconMode, iconFillType, iconName, colorTheme, state, accept, multipleMode, onClick }: UploadMainButtonProps): JSX.Element;
 export default UploadMainButton;

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

@@ -32,7 +32,7 @@ var hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
 var types_1 = require("./types");
 function UploadMainButton(_a) {
-    var text = _a.text, _b = _a.fillType, fillType = _b === void 0 ? 'fill' : _b, _c = _a.size, size = _c === void 0 ? 'large' : _c, fontWeight = _a.fontWeight, _d = _a.iconMode, iconMode = _d === void 0 ? 'none' : _d, _e = _a.iconFillType, iconFillType = _e === void 0 ? 'line' : _e, _f = _a.iconName, iconName = _f === void 0 ? 'ic_upload' : _f, _g = _a.colorTheme, colorTheme = _g === void 0 ? 'none' : _g, _h = _a.state, state = _h === void 0 ? 'normal' : _h, _j = _a.accept, accept = _j === void 0 ? '*' : _j, _k = _a.multipleMode, multipleMode = _k === void 0 ? 'none' : _k, onClick = _a.onClick;
+    var text = _a.text, _b = _a.fillType, fillType = _b === void 0 ? 'fill' : _b, _c = _a.size, size = _c === void 0 ? 'large' : _c, _d = _a.responsiveMode, responsiveMode = _d === void 0 ? 'none' : _d, fontWeight = _a.fontWeight, _e = _a.iconMode, iconMode = _e === void 0 ? 'none' : _e, _f = _a.iconFillType, iconFillType = _f === void 0 ? 'line' : _f, _g = _a.iconName, iconName = _g === void 0 ? 'ic_upload' : _g, _h = _a.colorTheme, colorTheme = _h === void 0 ? 'none' : _h, _j = _a.state, state = _j === void 0 ? 'normal' : _j, _k = _a.accept, accept = _k === void 0 ? '*' : _k, _l = _a.multipleMode, multipleMode = _l === void 0 ? 'none' : _l, onClick = _a.onClick;
     var handleClick = function (e) {
         if (onClick) {
             onClick(e);
@@ -59,7 +59,7 @@ function UploadMainButton(_a) {
         }
         return types_1.iconFillTypeColors[fillType];
     };
-    return (react_1.default.createElement(S_UploadMainButton, { fillType: fillType, size: size, fontWeight: fontWeight, colorTheme: colorTheme, disabled: state === 'disabled' },
+    return (react_1.default.createElement(S_UploadMainButton, { fillType: fillType, size: size, responsiveMode: responsiveMode, fontWeight: fontWeight, colorTheme: colorTheme, disabled: state === 'disabled' },
         react_1.default.createElement("input", { type: "file", hidden: true, disabled: state === 'disabled', accept: accept, multiple: multipleMode === 'use', onChange: handleClick }),
         size !== 'xsmall' && iconMode === 'left' && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType }),
@@ -148,7 +148,7 @@ var line = (0, styled_components_1.css)(templateObject_12 || (templateObject_12
     var disabled = _a.disabled;
     return disabled && lineDisabled;
 });
-var S_UploadMainButton = styled_components_1.default.label(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  display: inline-flex;\n  justify-content: center;\n\n  & > div {\n    font-weight: ", ";\n  }\n\n  ", "\n  ", "\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  display: inline-flex;\n  justify-content: center;\n\n  & > div {\n    font-weight: ", ";\n  }\n\n  ", "\n  ", "\n"])), function (_a) {
+var S_UploadMainButton = styled_components_1.default.label(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  display: inline-flex;\n  justify-content: center;\n\n  & > div {\n    font-weight: ", ";\n  }\n\n  ", "\n  ", "\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  display: inline-flex;\n  justify-content: center;\n\n  & > div {\n    font-weight: ", ";\n  }\n\n  ", "\n  ", "\n  ", ";\n"])), function (_a) {
     var theme = _a.theme, fontWeight = _a.fontWeight;
     return fontWeight &&
         {
@@ -161,6 +161,9 @@ var S_UploadMainButton = styled_components_1.default.label(templateObject_13 ||
 }, function (_a) {
     var size = _a.size;
     return size && { large: large, medium: medium, small: small, xsmall: xsmall, rlarge: large }[size];
+}, function (_a) {
+    var responsiveMode = _a.responsiveMode;
+    return responsiveMode === 'use' && 'width: 100%';
 });
 exports.default = UploadMainButton;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;

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

@@ -3,11 +3,12 @@ import { PDSTextType } from '../../../common';
 declare type UploadTextButtonProps = {
     text?: PDSTextType;
     size?: 'rlarge' | 'large' | 'medium' | 'small' | 'xsmall';
+    responsiveMode?: 'none' | 'use';
     fontWeight?: 'bold' | 'regular';
     state?: 'normal' | 'disabled';
     accept?: string;
     multipleMode?: 'none' | 'use';
     onClick?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 };
-declare function UploadTextButton({ text, size, fontWeight, state, accept, multipleMode, onClick }: UploadTextButtonProps): JSX.Element;
+declare function UploadTextButton({ text, size, responsiveMode, fontWeight, state, accept, multipleMode, onClick }: UploadTextButtonProps): JSX.Element;
 export default UploadTextButton;

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

@@ -37,13 +37,13 @@ var textStyle = {
     xsmall: 'caption1Regular'
 };
 function UploadTextButton(_a) {
-    var text = _a.text, _b = _a.size, size = _b === void 0 ? 'large' : _b, fontWeight = _a.fontWeight, _c = _a.state, state = _c === void 0 ? 'normal' : _c, _d = _a.accept, accept = _d === void 0 ? '*' : _d, _e = _a.multipleMode, multipleMode = _e === void 0 ? 'none' : _e, onClick = _a.onClick;
+    var text = _a.text, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, fontWeight = _a.fontWeight, _d = _a.state, state = _d === void 0 ? 'normal' : _d, _e = _a.accept, accept = _e === void 0 ? '*' : _e, _f = _a.multipleMode, multipleMode = _f === void 0 ? 'none' : _f, onClick = _a.onClick;
     var handleClick = function (e) {
         if (onClick) {
             onClick(e);
         }
     };
-    return (react_1.default.createElement(S_UploadTextButton, { size: size, fontWeight: fontWeight, disabled: state === 'disabled' },
+    return (react_1.default.createElement(S_UploadTextButton, { size: size, responsiveMode: responsiveMode, fontWeight: fontWeight, disabled: state === 'disabled' },
         react_1.default.createElement("input", { type: "file", hidden: true, disabled: state === 'disabled', accept: accept, multiple: multipleMode === 'use', onChange: handleClick }),
         react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : 'usrTextBrandPrimary', btnMode: "use" })));
 }
@@ -54,7 +54,7 @@ var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 =
 var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 40px;\n"], ["\n  height: 40px;\n"])));
 var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 32px;\n"], ["\n  height: 32px;\n"])));
 var xsmall = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 24px;\n"], ["\n  height: 24px;\n"])));
-var S_UploadTextButton = styled_components_1.default.label(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  border-radius: 8px;\n  box-sizing: border-box;\n  display: inline-flex;\n  justify-content: center;\n  padding: 0 ", ";\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n\n  & > div {\n    font-weight: ", ";\n  }\n\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  border-radius: 8px;\n  box-sizing: border-box;\n  display: inline-flex;\n  justify-content: center;\n  padding: 0 ", ";\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n\n  & > div {\n    font-weight: ", ";\n  }\n\n  ", ";\n"])), function (_a) {
+var S_UploadTextButton = styled_components_1.default.label(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  border-radius: 8px;\n  box-sizing: border-box;\n  display: inline-flex;\n  justify-content: center;\n  padding: 0 ", ";\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n\n  & > div {\n    font-weight: ", ";\n  }\n\n  ", ";\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  border-radius: 8px;\n  box-sizing: border-box;\n  display: inline-flex;\n  justify-content: center;\n  padding: 0 ", ";\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n\n  & > div {\n    font-weight: ", ";\n  }\n\n  ", ";\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
 }, function (_a) {
@@ -77,6 +77,9 @@ var S_UploadTextButton = styled_components_1.default.label(templateObject_5 || (
             small: small,
             xsmall: xsmall
         }[size];
+}, function (_a) {
+    var responsiveMode = _a.responsiveMode;
+    return responsiveMode === 'use' && 'width: 100%';
 });
 exports.default = UploadTextButton;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/package.json

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