pds-dev-kit-web-test 0.1.3 → 0.1.5

package/dist/src/mobile/components/UploadIconButton/UploadIconButton.stories.js

@@ -0,0 +1,105 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var UploadIconButton_1 = __importDefault(require("./UploadIconButton"));
+exports.default = {
+    title: 'mobile/components/UploadIconButton',
+    component: UploadIconButton_1.default,
+    parameters: {
+        docs: {
+            description: {
+                component: 'mobile환경에 최적화 된 UploadIconButton 컴포넌트'
+            }
+        }
+    },
+    argTypes: {
+        fillType: {
+            description: '디자인 표현이 선형인지, 면인지를 의미합니다.',
+            control: { type: 'inline-radio' }
+        },
+        shapeType: {
+            description: '버튼의 외관 형태를 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        baseSize: {
+            description: '버튼의 크기를 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        baseColorKey: {
+            description: '배경 컬러입니다. (fillType이 fill일때만 적용됩니다.)(ui_cpnt_button_fill_base_transparent값이 들어올 경우, hover와 active관련 색상 변경이 무시됩니다.)',
+            control: { type: 'text' }
+        },
+        borderColorKey: {
+            description: '라인의 컬러입니다. (지금 사용하지 않습니다.)(fillType이 line일때만 적용됩니다.)',
+            control: { type: 'text' }
+        },
+        iconSize: {
+            description: '아이콘의 크기를 결정합니다.',
+            control: { type: 'inline-radio', options: [12, 16, 20, 24, 48, 72] }
+        },
+        iconFillType: {
+            description: '아이콘의 형태를 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        iconName: {
+            description: '아이콘 이름을 의미합니다. 사용할 수 있는 아이콘은 미리 정해져있습니다.',
+            control: { type: 'select' }
+        },
+        iconColorKey: {
+            description: '아이콘 컬러를 설정합니다.',
+            control: { type: 'text' }
+        },
+        shadow: {
+            description: '그림자 유무를 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        colorTheme: {
+            description: '컬러의 프리셋 테마입니다. fillType을 고려하여 만들어졌지만, 코드에서 예외처리를 하지 않습니다. 예를 들어, Line fillType에 최적화된 컬러테마를 Fill fillType에 적용한 것은 그냥 사람이 잘못한 것입니다.',
+            control: { type: 'inline-radio' }
+        },
+        state: {
+            description: '버튼 활성화 상태를 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        accept: {
+            description: '특정 확장자 혹은 타입의 파일만 선택할 수 있습니다.',
+            control: { type: 'text' }
+        },
+        multipleMode: {
+            description: '복수 혹은 단수의 파일 선택 여부를 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        onClick: {
+            description: '파일 탐색기에서 파일 선택을 결정한 시점에 이벤트를 부여합니다.',
+            action: 'onClick'
+        }
+    }
+};
+var Template = function (args) { return (0, jsx_runtime_1.jsx)(UploadIconButton_1.default, __assign({}, args), void 0); };
+exports.Default = Template.bind({});
+exports.Default.args = {
+    fillType: 'fill',
+    shapeType: 'rectangle',
+    baseSize: 'small',
+    iconSize: 24,
+    iconFillType: 'line',
+    shadow: 'hidden',
+    colorTheme: 'none',
+    state: 'normal',
+    multipleMode: 'none'
+};

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

@@ -1,5 +1,5 @@
-import React from 'react';
-import { FillIconNameKeys, LineIconNameKeys, PDSTextType } from '../../../common';
+/// <reference types="react" />
+import type { FillIconNameKeys, LineIconNameKeys, PDSTextType } from '../../../common';
 declare type UploadMainButtonProps = {
     text?: PDSTextType;
     shapeType?: 'round' | 'rectangle';

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

@@ -3,6 +3,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -22,11 +33,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importStar(require("styled-components"));
 var components_1 = require("../../../common/components");
 var styles_1 = require("../../../common/styles");
@@ -162,23 +170,12 @@ function UploadMainButton(_a) {
     };
     var UploadMainButtonVariation = function () {
         if (isLoading) {
-            return (react_1.default.createElement(S_LoadingUploadMainButton, { shapeType: shapeType, size: size, responsiveMode: responsiveMode, colorTheme: "none", disabled: true },
-                react_1.default.createElement("input", { type: "file", hidden: true, disabled: true, accept: accept, multiple: multipleMode === 'use' })));
+            return ((0, jsx_runtime_1.jsx)(S_LoadingUploadMainButton, __assign({ shapeType: shapeType, size: size, responsiveMode: responsiveMode, colorTheme: "none", disabled: true }, { children: (0, jsx_runtime_1.jsx)("input", { type: "file", hidden: true, disabled: true, accept: accept, multiple: multipleMode === 'use' }, void 0) }), void 0));
         }
         if (isSubmitting) {
-            return (react_1.default.createElement(S_UploadMainButton, { shapeType: shapeType, fillType: fillType, styleTheme: styleTheme, size: size, responsiveMode: responsiveMode, colorTheme: colorTheme, disabled: false, isSubmitting: true },
-                react_1.default.createElement("input", { type: "file", hidden: true, disabled: true, accept: accept, multiple: multipleMode === 'use' }),
-                react_1.default.createElement(components_1.CircularProgress, { colorKey: submittingProgressColor(), size: size === 'rlarge' ? 'large' : size })));
+            return ((0, jsx_runtime_1.jsxs)(S_UploadMainButton, __assign({ shapeType: shapeType, fillType: fillType, styleTheme: styleTheme, size: size, responsiveMode: responsiveMode, colorTheme: colorTheme, disabled: false, isSubmitting: true }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "file", hidden: true, disabled: true, accept: accept, multiple: multipleMode === 'use' }, void 0), (0, jsx_runtime_1.jsx)(components_1.CircularProgress, { colorKey: submittingProgressColor(), size: size === 'rlarge' ? 'large' : size }, void 0)] }), void 0));
         }
-        return (react_1.default.createElement(S_UploadMainButton, { "x-pds-name": "UploadMainButton", "x-pds-element-type": "component", "x-pds-device-type": "mobile", shapeType: shapeType, fillType: fillType, styleTheme: styleTheme, 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 }),
-                react_1.default.createElement(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }))),
-            react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: types_1.textStyles[size], singleLineMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor(), colorOverride: textColorOverride(), ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }),
-            size !== 'xsmall' && iconMode === 'right' && (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }),
-                react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType })))));
+        return ((0, jsx_runtime_1.jsxs)(S_UploadMainButton, __assign({ "x-pds-name": "UploadMainButton", "x-pds-element-type": "component", "x-pds-device-type": "mobile", shapeType: shapeType, fillType: fillType, styleTheme: styleTheme, size: size, responsiveMode: responsiveMode, fontWeight: fontWeight, colorTheme: colorTheme, disabled: state === 'disabled' }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "file", hidden: true, disabled: state === 'disabled', accept: accept, multiple: multipleMode === 'use', onChange: handleClick }, void 0), size !== 'xsmall' && iconMode === 'left' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }, void 0)] }, void 0)), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: types_1.textStyles[size], singleLineMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor(), colorOverride: textColorOverride(), ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }, void 0), size !== 'xsmall' && iconMode === 'right' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType }, void 0)] }, void 0))] }), void 0));
     };
     return UploadMainButtonVariation();
 }
@@ -239,12 +236,12 @@ var line2 = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 =
     var theme = _a.theme;
     return theme.ui_cpnt_button_line_border_primary;
 });
-var line3 = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  border: solid 1px ", ";\n  background-color: ", ";\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n"], ["\n  border: solid 1px ", ";\n  background-color: ", ";\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n"])), function (_a) {
+var line3 = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  background-color: ", ";\n  border: solid 1px ", ";\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n"], ["\n  background-color: ", ";\n  border: solid 1px ", ";\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.ui_cpnt_button_line_border_darktheme_enabled;
+    return theme.ui_cpnt_button_line_base_darktheme_default;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.ui_cpnt_button_line_base_darktheme_default;
+    return theme.ui_cpnt_button_line_border_darktheme_enabled;
 }, function (_a) {
     var theme = _a.theme, isSubmitting = _a.isSubmitting;
     return !isSubmitting && theme.ui_cpnt_button_line_base_darktheme_pressed;

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

@@ -0,0 +1,5 @@
+import UploadMainButton from './UploadMainButton';
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<typeof UploadMainButton>;
+export default _default;
+export declare const Default: ComponentStory<typeof UploadMainButton>;

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

@@ -0,0 +1,117 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var UploadMainButton_1 = __importDefault(require("./UploadMainButton"));
+exports.default = {
+    title: 'mobile/components/UploadMainButton',
+    component: UploadMainButton_1.default,
+    parameters: {
+        docs: {
+            description: {
+                component: 'mobile환경에 최적화 된 UploadMainButton 컴포넌트'
+            }
+        }
+    },
+    argTypes: {
+        text: {
+            description: '표시할 텍스트 값입니다.',
+            control: { type: 'text' }
+        },
+        shapeType: {
+            description: '버튼의 외관 형태를 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        fillType: {
+            description: '디자인 표현이 선형인지, 면인지를 의미합니다.',
+            control: { type: 'inline-radio' }
+        },
+        styleTheme: {
+            description: '외형의 프리셋 테마입니다.',
+            control: { type: 'inline-radio' }
+        },
+        size: {
+            description: '크기를 결정합니다. 단순히 요소의 width, height 뿐만 아니라 텍스트 크기, 아이콘 크기 등이 다 포함됩니다.',
+            control: { type: 'inline-radio' }
+        },
+        responsiveMode: {
+            description: '너비의 100% 여부를 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        fontWeight: {
+            description: '텍스트의 굵기를 의미합니다. 사용하면, size에 따라 부여되어있던 font-weight는 무시됩니다.',
+            control: { type: 'inline-radio' }
+        },
+        iconMode: {
+            description: '아이콘 유무와 위치를 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        iconFillType: {
+            description: '아이콘의 형태를 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        iconName: {
+            description: '아이콘 이름을 의미합니다. 사용할 수 있는 아이콘은 미리 정해져있습니다.',
+            control: { type: 'text' }
+        },
+        colorTheme: {
+            description: '컬러의 프리셋 테마입니다.',
+            control: { type: 'inline-radio' }
+        },
+        state: {
+            description: '버튼 활성화 상태를 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        accept: {
+            description: '특정 확장자 혹은 타입의 파일만 선택할 수 있습니다.',
+            control: { type: 'text' }
+        },
+        multipleMode: {
+            description: '복수 혹은 단수의 파일 선택 여부를 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        isLoading: {
+            description: '로딩 상태 여부를 결정합니다.',
+            control: { type: 'boolean' }
+        },
+        isSubmitting: {
+            description: '제출 상태 ui 노출 여부를 결정합니다.',
+            control: { type: 'boolean' }
+        },
+        onClick: {
+            description: '파일 탐색기에서 파일 선택을 결정한 시점에 이벤트를 부여합니다.',
+            action: 'onClick'
+        }
+    }
+};
+var Template = function (args) {
+    return (0, jsx_runtime_1.jsx)(UploadMainButton_1.default, __assign({}, args), void 0);
+};
+exports.Default = Template.bind({});
+exports.Default.args = {
+    text: 'UploadMainButton',
+    shapeType: 'round',
+    styleTheme: 'primary',
+    size: 'large',
+    responsiveMode: 'none',
+    iconMode: 'none',
+    iconFillType: 'line',
+    iconName: 'ic_upload',
+    colorTheme: 'none',
+    state: 'normal',
+    multipleMode: 'none'
+};

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

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

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

@@ -3,6 +3,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -22,11 +33,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importStar(require("styled-components"));
 var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
 var TextLabel_1 = require("../TextLabel");
@@ -52,9 +60,7 @@ function UploadTextButton(_a) {
         }
         e.target.value = '';
     };
-    return (react_1.default.createElement(S_UploadTextButton, { "x-pds-name": "UploadTextButton", "x-pds-element-type": "component", "x-pds-device-type": "mobile", size: size, responsiveMode: responsiveMode, fontWeight: fontWeight, disabled: state === 'disabled', colorTheme: colorTheme },
-        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' : textColor[colorTheme], singleLineMode: "use", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })));
+    return ((0, jsx_runtime_1.jsxs)(S_UploadTextButton, __assign({ "x-pds-name": "UploadTextButton", "x-pds-element-type": "component", "x-pds-device-type": "mobile", size: size, responsiveMode: responsiveMode, fontWeight: fontWeight, disabled: state === 'disabled', colorTheme: colorTheme }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "file", hidden: true, disabled: state === 'disabled', accept: accept, multiple: multipleMode === 'use', onChange: handleClick }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor[colorTheme], singleLineMode: "use", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }, void 0)] }), void 0));
 }
 var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 14px;\n  height: 48px;\n  width: ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"], ["\n  border-radius: 14px;\n  height: 48px;\n  width: ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"])), function (_a) {
     var size = _a.size;

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

@@ -0,0 +1,5 @@
+import UploadTextButton from './UploadTextButton';
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<typeof UploadTextButton>;
+export default _default;
+export declare const Default: ComponentStory<typeof UploadTextButton>;

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

@@ -0,0 +1,78 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var UploadTextButton_1 = __importDefault(require("./UploadTextButton"));
+exports.default = {
+    title: 'mobile/components/UploadTextButton',
+    component: UploadTextButton_1.default,
+    parameters: {
+        docs: {
+            description: {
+                component: 'mobile환경에 최적화 된 UploadTextButton 컴포넌트'
+            }
+        }
+    },
+    argTypes: {
+        text: {
+            description: '표시할 텍스트 값입니다.',
+            control: { type: 'text' }
+        },
+        size: {
+            description: '크기를 결정합니다. 단순히 요소의 width, height 뿐만 아니라 텍스트 크기, 아이콘 크기 등이 다 포함됩니다.',
+            control: { type: 'inline-radio' }
+        },
+        responsiveMode: {
+            description: '너비의 100% 여부를 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        fontWeight: {
+            description: '크기를 결정합니다. 단순히 요소의 width, height 뿐만 아니라 텍스트 크기, 아이콘 크기 등이 다 포함됩니다.',
+            control: { type: 'inline-radio' }
+        },
+        state: {
+            description: '상태를 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        colorTheme: {
+            description: '컬러의 프리셋 테마입니다.',
+            control: { type: 'inline-radio' }
+        },
+        accept: {
+            description: '특정 확장자 혹은 타입의 파일만 선택할 수 있습니다.',
+            control: { type: 'text' }
+        },
+        multipleMode: {
+            description: '복수 혹은 단수의 파일 선택 여부를 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        onClick: {
+            description: '파일 탐색기에서 파일 선택을 결정한 시점에 이벤트를 부여합니다.',
+            action: 'onClick'
+        }
+    }
+};
+var Template = function (args) { return (0, jsx_runtime_1.jsx)(UploadTextButton_1.default, __assign({}, args), void 0); };
+exports.Default = Template.bind({});
+exports.Default.args = {
+    text: 'UploadTextButton',
+    size: 'large',
+    responsiveMode: 'none',
+    state: 'normal',
+    colorTheme: 'none',
+    multipleMode: 'none'
+};

package/dist/src/mobile/index.d.ts

@@ -1,19 +1,13 @@
-import { LayoutMF } from './layout/LayoutMF';
-import { ContainersBox as MFContainersBox } from './layout/LayoutMF/ContainersBox';
-export { LayoutMF, MFContainersBox };
-import { LayoutMM } from './layout/LayoutMM';
-import { NavigationContainer as MMNavigationContainer } from './layout/LayoutMM/Containers';
-import { ContainersBox as MMContainersBox } from './layout/LayoutMM/ContainersBox';
-export { LayoutMM, MMNavigationContainer, MMContainersBox };
-import { LayoutMP } from './layout/LayoutMP';
-import { NavigationContainer as MPNavigationContainer, TabContainer as MPTabContainer } from './layout/LayoutMP/Containers';
-import { ContainersBox as MPContainersBox } from './layout/LayoutMP/ContainersBox';
-export { LayoutMP, MPNavigationContainer, MPTabContainer, MPContainersBox };
-import { LayoutMS } from './layout/LayoutMS';
-import { NavigationContainer as MSNavigationContainer } from './layout/LayoutMS/Containers';
-import { ContainersBox as MSContainersBox } from './layout/LayoutMS/ContainersBox';
-export { LayoutMS, MSNavigationContainer, MSContainersBox };
-import { BasicChatListItem as M_BasicChatListItem, BasicFormGroup as M_BasicFormGroup, BasicList as M_BasicList, BasicListItem as M_BasicListItem, BlogTextField as M_BlogTextField, BodyTextGroup as M_BodyTextGroup, Card as M_Card, CardList as M_CardList, ChatBubbleListItem as M_ChatBubbleListItem, ChatList as M_ChatList, Checkbox as M_Checkbox, Chip as M_Chip, ContextMenu as M_ContextMenu, ContextMenuItem as M_ContextMenuItem, Dropdown as M_Dropdown, FloatingActionButton as M_FloatingActionButton, HorizontalFormGroup as M_HorizontalFormGroup, IconButton as M_IconButton, ImageSlide as M_ImageSlide, LottieReactionButton as M_LottieReactionButton, MainButton as M_MainButton, MobileAlertDialog as M_MobileAlertDialog, MobileHeaderBar as M_MobileHeaderBar, MobileTabBar as M_MobileTabBar, Radio as M_Radio, ReactionButton as M_ReactionButton, Select as M_Select, StatusBlock as M_StatusBlock, TextButton as M_TextButton, TextField as M_TextField, TextLabel as M_TextLabel, UploadIconButton as M_UploadIconButton, UploadMainButton as M_UploadMainButton, UploadTextButton as M_UploadTextButton } from './components';
-export { M_BasicChatListItem, M_BasicFormGroup, M_BasicList, M_BasicListItem, M_BlogTextField, M_BodyTextGroup, M_Card, M_CardList, M_ChatBubbleListItem, M_ChatList, M_Checkbox, M_Chip, M_ContextMenu, M_ContextMenuItem, M_Dropdown, M_FloatingActionButton, M_HorizontalFormGroup, M_IconButton, M_ImageSlide, M_LottieReactionButton, M_MainButton, M_MobileAlertDialog, M_MobileHeaderBar, M_MobileTabBar, M_Radio, M_ReactionButton, M_Select, M_StatusBlock, M_TextButton, M_TextField, M_TextLabel, M_UploadIconButton, M_UploadMainButton, M_UploadTextButton };
-import { AnnotationSheet as M_AnnotationSheet, ContentSheet as M_ContentSheet, MobileBasicModal as M_MobileBasicModal, SectionSheet as M_SectionSheet } from './panels';
-export { M_AnnotationSheet, M_ContentSheet, M_MobileBasicModal, M_SectionSheet };
+export { LayoutMF } from './layout/LayoutMF';
+export { ContainersBox as MFContainersBox } from './layout/LayoutMF/ContainersBox';
+export { LayoutMM } from './layout/LayoutMM';
+export { NavigationContainer as MMNavigationContainer } from './layout/LayoutMM/Containers';
+export { ContainersBox as MMContainersBox } from './layout/LayoutMM/ContainersBox';
+export { LayoutMP } from './layout/LayoutMP';
+export { NavigationContainer as MPNavigationContainer, TabContainer as MPTabContainer } from './layout/LayoutMP/Containers';
+export { ContainersBox as MPContainersBox } from './layout/LayoutMP/ContainersBox';
+export { LayoutMS } from './layout/LayoutMS';
+export { NavigationContainer as MSNavigationContainer } from './layout/LayoutMS/Containers';
+export { ContainersBox as MSContainersBox } from './layout/LayoutMS/ContainersBox';
+export { BasicChatListItem as M_BasicChatListItem, BasicFormGroup as M_BasicFormGroup, BasicList as M_BasicList, BasicListItem as M_BasicListItem, BlogTextField as M_BlogTextField, BodyTextGroup as M_BodyTextGroup, Card as M_Card, CardList as M_CardList, ChatBubbleListItem as M_ChatBubbleListItem, ChatList as M_ChatList, Checkbox as M_Checkbox, Chip as M_Chip, ContextMenu as M_ContextMenu, ContextMenuItem as M_ContextMenuItem, Dropdown as M_Dropdown, FloatingActionButton as M_FloatingActionButton, HorizontalFormGroup as M_HorizontalFormGroup, IconButton as M_IconButton, ImageSlide as M_ImageSlide, LottieReactionButton as M_LottieReactionButton, MainButton as M_MainButton, MobileAlertDialog as M_MobileAlertDialog, MobileHeaderBar as M_MobileHeaderBar, MobileTabBar as M_MobileTabBar, Radio as M_Radio, ReactionButton as M_ReactionButton, Select as M_Select, StatusBlock as M_StatusBlock, TextButton as M_TextButton, TextField as M_TextField, TextLabel as M_TextLabel, UploadIconButton as M_UploadIconButton, UploadMainButton as M_UploadMainButton, UploadTextButton as M_UploadTextButton } from './components';
+export { AnnotationSheet as M_AnnotationSheet, ContentSheet as M_ContentSheet, MobileBasicModal as M_MobileBasicModal, SectionSheet as M_SectionSheet } from './panels';

package/dist/src/mobile/index.js

@@ -1,6 +1,4 @@
 "use strict";
-/* eslint-disable import/order */
-/* eslint-disable import/first */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.M_SectionSheet = exports.M_MobileBasicModal = exports.M_ContentSheet = exports.M_AnnotationSheet = exports.M_UploadTextButton = exports.M_UploadMainButton = exports.M_UploadIconButton = exports.M_TextLabel = exports.M_TextField = exports.M_TextButton = exports.M_StatusBlock = exports.M_Select = exports.M_ReactionButton = exports.M_Radio = exports.M_MobileTabBar = exports.M_MobileHeaderBar = exports.M_MobileAlertDialog = exports.M_MainButton = exports.M_LottieReactionButton = exports.M_ImageSlide = exports.M_IconButton = exports.M_HorizontalFormGroup = exports.M_FloatingActionButton = exports.M_Dropdown = exports.M_ContextMenuItem = exports.M_ContextMenu = exports.M_Chip = exports.M_Checkbox = exports.M_ChatList = exports.M_ChatBubbleListItem = exports.M_CardList = exports.M_Card = exports.M_BodyTextGroup = exports.M_BlogTextField = exports.M_BasicListItem = exports.M_BasicList = exports.M_BasicFormGroup = exports.M_BasicChatListItem = exports.MSContainersBox = exports.MSNavigationContainer = exports.LayoutMS = exports.MPContainersBox = exports.MPTabContainer = exports.MPNavigationContainer = exports.LayoutMP = exports.MMContainersBox = exports.MMNavigationContainer = exports.LayoutMM = exports.MFContainersBox = exports.LayoutMF = void 0;
 // layoutMF

package/dist/src/mobile/layout/LayoutMF/Containers/ContentsContainer/ContentsContainer.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { UiColors } from '../../../../../common';
+import type { UiColors } from '../../../../../common';
 export declare type ContentsContainerProps = {
     content1?: JSX.Element;
     content2?: JSX.Element;

package/dist/src/mobile/layout/LayoutMF/Containers/ContentsContainer/ContentsContainer.js

@@ -1,20 +1,17 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 var variation_1 = require("./variation");
 var ContentsContainer = function (_a) {
     var content1 = _a.content1, content2 = _a.content2, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2, overrideContainer1ColorKey = _a.overrideContainer1ColorKey, overrideContainer2ColorKey = _a.overrideContainer2ColorKey;
-    return (react_1.default.createElement(react_1.default.Fragment, null, {
-        MFA_1: (react_1.default.createElement(variation_1.MFA, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, overrideContainer1ColorKey: overrideContainer1ColorKey })),
-        MFB_1: (react_1.default.createElement(variation_1.MFB, { layoutType: "MFB_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey })),
-        MFB_2: (react_1.default.createElement(variation_1.MFB, { layoutType: "MFB_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey })),
-        MFC_1: (react_1.default.createElement(variation_1.MFC, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, overrideContainer1ColorKey: overrideContainer1ColorKey })),
-        MFD_1: (react_1.default.createElement(variation_1.MFD, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, overrideContainer1ColorKey: overrideContainer1ColorKey })),
-        MFE_1: (react_1.default.createElement(variation_1.MFE, { layoutType: "MFE_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey })),
-        MFE_2: (react_1.default.createElement(variation_1.MFE, { layoutType: "MFE_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey }))
-    }[layoutType]));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: {
+            MFA_1: ((0, jsx_runtime_1.jsx)(variation_1.MFA, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, overrideContainer1ColorKey: overrideContainer1ColorKey }, void 0)),
+            MFB_1: ((0, jsx_runtime_1.jsx)(variation_1.MFB, { layoutType: "MFB_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey }, void 0)),
+            MFB_2: ((0, jsx_runtime_1.jsx)(variation_1.MFB, { layoutType: "MFB_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey }, void 0)),
+            MFC_1: ((0, jsx_runtime_1.jsx)(variation_1.MFC, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, overrideContainer1ColorKey: overrideContainer1ColorKey }, void 0)),
+            MFD_1: ((0, jsx_runtime_1.jsx)(variation_1.MFD, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, overrideContainer1ColorKey: overrideContainer1ColorKey }, void 0)),
+            MFE_1: ((0, jsx_runtime_1.jsx)(variation_1.MFE, { layoutType: "MFE_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey }, void 0)),
+            MFE_2: ((0, jsx_runtime_1.jsx)(variation_1.MFE, { layoutType: "MFE_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey }, void 0))
+        }[layoutType] }, void 0));
 };
 exports.default = ContentsContainer;

package/dist/src/mobile/layout/LayoutMF/Containers/ContentsContainer/variation/MFA.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { UiColors } from '../../../../../../common';
+import type { UiColors } from '../../../../../../common';
 export declare type MFAProps = {
     content1?: JSX.Element;
     containerColor?: string;

package/dist/src/mobile/layout/LayoutMF/Containers/ContentsContainer/variation/MFA.js

@@ -3,6 +3,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -22,23 +33,19 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importStar(require("styled-components"));
 var components_1 = require("../../../../../../common/components");
 var MFA = function (_a) {
     var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
-    return (react_1.default.createElement(S_ContentsContainer, { "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MFA", containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea, { "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MFA", areaColor: areaColor },
-        react_1.default.createElement(S_Content1, { "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MFA" }, content1)))));
+    return ((0, jsx_runtime_1.jsx)(S_ContentsContainer, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MFA", containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {}, void 0)) : ((0, jsx_runtime_1.jsx)(S_ContentsArea, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MFA", areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "mobile", "x-pds-layout-type": "MFA" }, { children: content1 }), void 0) }), void 0)) }), void 0));
 };
 var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var theme = _a.theme, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
     return overrideContainer1ColorKey && theme[overrideContainer1ColorKey];
 });
-var S_ContentsContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  min-width: 360px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  height: 100%;\n  ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  min-width: 360px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  height: 100%;\n  ", ";\n\n  ", "\n"])), function (_a) {
+var S_ContentsContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 100%;\n  min-width: 360px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  height: 100%;\n  min-width: 360px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_m_contentscontainer01_background;
 }, function (_a) {

package/dist/src/mobile/layout/LayoutMF/Containers/ContentsContainer/variation/MFB.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { UiColors } from '../../../../../../common';
+import type { UiColors } from '../../../../../../common';
 export declare type MFBProps = {
     content1?: JSX.Element;
     content2?: JSX.Element;