pds-dev-kit-web-test 0.0.1

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

@@ -0,0 +1,238 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importStar(require("styled-components"));
+var hybrid_1 = require("../../../hybrid");
+var TextLabel_1 = require("../TextLabel");
+var types_1 = require("./types");
+function UploadMainButton(_a) {
+    var text = _a.text, _b = _a.shapeType, shapeType = _b === void 0 ? 'round' : _b, fillType = _a.fillType, _c = _a.styleTheme, styleTheme = _c === void 0 ? 'primary' : _c, _d = _a.size, size = _d === void 0 ? 'large' : _d, _e = _a.responsiveMode, responsiveMode = _e === void 0 ? 'none' : _e, fontWeight = _a.fontWeight, _f = _a.iconMode, iconMode = _f === void 0 ? 'none' : _f, _g = _a.iconFillType, iconFillType = _g === void 0 ? 'line' : _g, _h = _a.iconName, iconName = _h === void 0 ? 'ic_upload' : _h, _j = _a.colorTheme, colorTheme = _j === void 0 ? 'none' : _j, _k = _a.state, state = _k === void 0 ? 'normal' : _k, _l = _a.accept, accept = _l === void 0 ? '*' : _l, _m = _a.multipleMode, multipleMode = _m === void 0 ? 'none' : _m, onClick = _a.onClick;
+    var handleClick = function (e) {
+        if (onClick) {
+            onClick(e);
+        }
+    };
+    var selectTextThemeColor = function () {
+        if (colorTheme === 'line3' && state === 'disabled') {
+            return 'ui_cpnt_button_text_darktheme_disabled';
+        }
+        if (fillType === 'line' && colorTheme !== 'none' && state !== 'disabled') {
+            return types_1.textThemeColorLines[colorTheme];
+        }
+        return undefined;
+    };
+    var iconColor = function () {
+        if (state === 'disabled') {
+            if (colorTheme === 'line3') {
+                return 'ui_cpnt_button_icon_darktheme_disabled';
+            }
+            return 'ui_cpnt_button_icon_disabled';
+        }
+        if (fillType === 'line' && colorTheme !== 'none') {
+            return types_1.iconColorThemeLineColors[colorTheme];
+        }
+        if (fillType) {
+            return types_1.iconFillTypeColors[fillType];
+        }
+        if (styleTheme) {
+            return types_1.iconStyleThemeColors[styleTheme];
+        }
+    };
+    var textColor = function () {
+        if (fillType === 'fill') {
+            return 'usrTextBrandOnPrimary';
+        }
+        if (fillType === 'line') {
+            return 'sysTextPrimary';
+        }
+        if (styleTheme === 'primary') {
+            return 'usrTextBrandOnPrimary';
+        }
+        if (styleTheme === 'secondary') {
+            return 'usrTextBrandPrimary';
+        }
+        return 'usrTextBrandOnPrimary';
+    };
+    return (react_1.default.createElement(S_UploadMainButton, { 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: selectTextThemeColor() }),
+        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 })))));
+}
+var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 48px;\n  min-width: 96px;\n  padding: 0 ", ";\n  ", "\n  ", ";\n"], ["\n  height: 48px;\n  min-width: 96px;\n  padding: 0 ", ";\n  ", "\n  ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+}, function (_a) {
+    var shapeType = _a.shapeType;
+    return shapeType === 'round' && 'border-radius: 14px;';
+}, function (_a) {
+    var size = _a.size;
+    return size === 'rlarge' && 'width: 100%';
+});
+var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 40px;\n  padding: 0 ", ";\n  ", "\n"], ["\n  height: 40px;\n  padding: 0 ", ";\n  ", "\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+}, function (_a) {
+    var shapeType = _a.shapeType;
+    return shapeType === 'round' && 'border-radius: 14px;';
+});
+var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 32px;\n  padding: 0 ", ";\n  ", "\n"], ["\n  height: 32px;\n  padding: 0 ", ";\n  ", "\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingD;
+}, function (_a) {
+    var shapeType = _a.shapeType;
+    return shapeType === 'round' && 'border-radius: 10px;';
+});
+var xsmall = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 24px;\n  padding: 0 ", ";\n  ", "\n"], ["\n  height: 24px;\n  padding: 0 ", ";\n  ", "\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingD;
+}, function (_a) {
+    var shapeType = _a.shapeType;
+    return shapeType === 'round' && 'border-radius: 8px;';
+});
+var fillDisabled = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_fill_base_disabled;
+});
+var fill = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n\n  &:active:not([disabled]) {\n    background-image: ", ";\n  }\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: none;\n\n  &:active:not([disabled]) {\n    background-image: ", ";\n  }\n\n  ", "\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_fill_base_primary;
+}, function (_a) {
+    var theme = _a.theme;
+    return "linear-gradient(\n      to top,\n      " + theme.ui_cpnt_button_fill_on_base_pressed + ",\n      " + theme.ui_cpnt_button_fill_on_base_pressed + "\n    )";
+}, function (_a) {
+    var disabled = _a.disabled;
+    return disabled && fillDisabled;
+});
+var none = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  border: solid 1px ", ";\n"], ["\n  border: solid 1px ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_line_border_enabled;
+});
+var line1 = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  border: solid 1px ", ";\n"], ["\n  border: solid 1px ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_line_border_error;
+});
+var line2 = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  border: solid 1px ", ";\n"], ["\n  border: solid 1px ", ";\n"])), function (_a) {
+    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 theme = _a.theme;
+    return theme.ui_cpnt_button_line_border_darktheme_enabled;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_line_base_darktheme_default;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_line_base_darktheme_pressed;
+});
+var lineDisabled = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  background-color: ", ";\n  border: solid 1px\n    ", ";\n"], ["\n  background-color: ", ";\n  border: solid 1px\n    ", ";\n"])), function (_a) {
+    var theme = _a.theme, colorTheme = _a.colorTheme;
+    return colorTheme === 'line3'
+        ? theme.ui_cpnt_button_line_base_darktheme_default
+        : theme.ui_cpnt_button_line_base_default;
+}, function (_a) {
+    var theme = _a.theme, colorTheme = _a.colorTheme;
+    return colorTheme === 'line3'
+        ? theme.ui_cpnt_button_line_border_darktheme_disabled
+        : theme.ui_cpnt_button_line_border_disabled;
+});
+var line = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  background-color: ", ";\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n\n  ", ";\n  ", "\n"], ["\n  background-color: ", ";\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n\n  ", ";\n  ", "\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_line_base_default;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_line_base_pressed;
+}, function (_a) {
+    var colorTheme = _a.colorTheme;
+    return colorTheme && { none: none, line1: line1, line2: line2, line3: line3 }[colorTheme];
+}, function (_a) {
+    var disabled = _a.disabled;
+    return disabled && lineDisabled;
+});
+var primaryDisabled = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_fill_base_disabled;
+});
+var primary = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n\n  &:hover:enabled {\n    ", "\n  }\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: none;\n\n  &:hover:enabled {\n    ", "\n  }\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", "\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_fill_base_primary;
+}, function (_a) {
+    var theme = _a.theme;
+    return "background-image: linear-gradient(\n    to top,\n    " + theme.ui_cpnt_button_fill_on_base_hover + ",\n    " + theme.ui_cpnt_button_fill_on_base_hover + "\n  );";
+}, function (_a) {
+    var theme = _a.theme;
+    return "background-image: linear-gradient(\n    to top,\n    " + theme.ui_cpnt_button_fill_on_base_pressed + ",\n    " + theme.ui_cpnt_button_fill_on_base_pressed + "\n  );";
+}, function (_a) {
+    var disabled = _a.disabled;
+    return disabled && primaryDisabled;
+});
+var secondaryDisabled = (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_line_base_hover;
+});
+var secondary = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n\n  &:hover:enabled {\n    ", "\n  }\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: none;\n\n  &:hover:enabled {\n    ", "\n  }\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", "\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_line_base_hover;
+}, function (_a) {
+    var theme = _a.theme;
+    return "background-image: linear-gradient(\n    to top,\n    " + theme.ui_cpnt_button_fill_on_base_hover + ",\n    " + theme.ui_cpnt_button_fill_on_base_hover + "\n  );";
+}, function (_a) {
+    var theme = _a.theme;
+    return "background-image: linear-gradient(\n    to top,\n    " + theme.ui_cpnt_button_fill_on_base_pressed + ",\n    " + theme.ui_cpnt_button_fill_on_base_pressed + "\n  );";
+}, function (_a) {
+    var disabled = _a.disabled;
+    return disabled && secondaryDisabled;
+});
+var S_UploadMainButton = styled_components_1.default.label(templateObject_17 || (templateObject_17 = __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"], ["\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"])), function (_a) {
+    var theme = _a.theme, fontWeight = _a.fontWeight;
+    return fontWeight &&
+        {
+            bold: theme.fontWeight.bold,
+            regular: theme.fontWeight.normal
+        }[fontWeight];
+}, function (_a) {
+    var styleTheme = _a.styleTheme;
+    return styleTheme && { primary: primary, secondary: secondary }[styleTheme];
+}, function (_a) {
+    var fillType = _a.fillType;
+    return fillType && { fill: fill, line: line }[fillType];
+}, 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, templateObject_14, templateObject_15, templateObject_16, templateObject_17;

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

@@ -0,0 +1 @@
+export { default as UploadMainButton } from './UploadMainButton';

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

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UploadMainButton = void 0;
+var UploadMainButton_1 = require("./UploadMainButton");
+Object.defineProperty(exports, "UploadMainButton", { enumerable: true, get: function () { return __importDefault(UploadMainButton_1).default; } });

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

@@ -0,0 +1,25 @@
+export declare const textStyles: {
+    readonly rlarge: "body1Bold";
+    readonly large: "body1Bold";
+    readonly medium: "body2Bold";
+    readonly small: "caption1Bold";
+    readonly xsmall: "caption1Regular";
+};
+export declare const textThemeColorLines: {
+    readonly line1: "ui_cpnt_button_text_error";
+    readonly line2: "ui_cpnt_button_text_primary";
+    readonly line3: "ui_cpnt_button_text_darktheme_enabled";
+};
+export declare const iconFillTypeColors: {
+    readonly fill: "ui_cpnt_button_icon_on_primary";
+    readonly line: "ui_cpnt_button_icon_enabled";
+};
+export declare const iconStyleThemeColors: {
+    readonly primary: "ui_cpnt_button_icon_on_primary";
+    readonly secondary: "ui_cpnt_button_icon_primary";
+};
+export declare const iconColorThemeLineColors: {
+    readonly line1: "ui_cpnt_button_icon_error";
+    readonly line2: "ui_cpnt_button_icon_primary";
+    readonly line3: "ui_cpnt_button_icon_darktheme_enabled";
+};

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

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.iconColorThemeLineColors = exports.iconStyleThemeColors = exports.iconFillTypeColors = exports.textThemeColorLines = exports.textStyles = void 0;
+exports.textStyles = {
+    rlarge: 'body1Bold',
+    large: 'body1Bold',
+    medium: 'body2Bold',
+    small: 'caption1Bold',
+    xsmall: 'caption1Regular'
+};
+exports.textThemeColorLines = {
+    line1: 'ui_cpnt_button_text_error',
+    line2: 'ui_cpnt_button_text_primary',
+    line3: 'ui_cpnt_button_text_darktheme_enabled'
+};
+exports.iconFillTypeColors = {
+    fill: 'ui_cpnt_button_icon_on_primary',
+    line: 'ui_cpnt_button_icon_enabled'
+};
+exports.iconStyleThemeColors = {
+    primary: 'ui_cpnt_button_icon_on_primary',
+    secondary: 'ui_cpnt_button_icon_primary'
+};
+exports.iconColorThemeLineColors = {
+    line1: 'ui_cpnt_button_icon_error',
+    line2: 'ui_cpnt_button_icon_primary',
+    line3: 'ui_cpnt_button_icon_darktheme_enabled'
+};

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

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

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

@@ -0,0 +1,90 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importStar(require("styled-components"));
+var TextLabel_1 = require("../TextLabel");
+var textStyle = {
+    rlarge: 'body1Bold',
+    large: 'body1Bold',
+    medium: 'body2Bold',
+    small: 'caption1Bold',
+    xsmall: 'caption1Regular'
+};
+var textColor = {
+    none: 'usrTextBrandPrimary',
+    red: 'sysTextError',
+    grey_01: 'sysTextPrimary'
+};
+function UploadTextButton(_a) {
+    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.colorTheme, colorTheme = _e === void 0 ? 'none' : _e, _f = _a.accept, accept = _f === void 0 ? '*' : _f, _g = _a.multipleMode, multipleMode = _g === void 0 ? 'none' : _g, onClick = _a.onClick;
+    var handleClick = function (e) {
+        if (onClick) {
+            onClick(e);
+        }
+    };
+    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' : textColor[colorTheme], singleLineMode: "use" })));
+}
+var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 14px;\n  height: 48px;\n  width: ", ";\n"], ["\n  border-radius: 14px;\n  height: 48px;\n  width: ", ";\n"])), function (_a) {
+    var size = _a.size;
+    return size === 'rlarge' && '100%';
+});
+var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 14px;\n  height: 40px;\n"], ["\n  border-radius: 14px;\n  height: 40px;\n"])));
+var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-radius: 10px;\n  height: 32px;\n"], ["\n  border-radius: 10px;\n  height: 32px;\n"])));
+var xsmall = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border-radius: 8px;\n  height: 24px;\n"], ["\n  border-radius: 8px;\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  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  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) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_line_base_pressed;
+}, function (_a) {
+    var theme = _a.theme, fontWeight = _a.fontWeight;
+    return fontWeight &&
+        {
+            bold: theme.fontWeight.bold,
+            regular: theme.fontWeight.normal
+        }[fontWeight];
+}, function (_a) {
+    var size = _a.size;
+    return size &&
+        {
+            rlarge: large,
+            large: large,
+            medium: medium,
+            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/mobile/components/UploadTextButton/index.d.ts

@@ -0,0 +1 @@
+export { default as UploadTextButton } from './UploadTextButton';

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

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UploadTextButton = void 0;
+var UploadTextButton_1 = require("./UploadTextButton");
+Object.defineProperty(exports, "UploadTextButton", { enumerable: true, get: function () { return __importDefault(UploadTextButton_1).default; } });

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

@@ -0,0 +1,31 @@
+import { BasicFormGroup } from './BasicFormGroup';
+import { BasicList } from './BasicList';
+import { BasicListItem } from './BasicListItem';
+import { BlogTextField } from './BlogTextField';
+import { BodyTextGroup } from './BodyTextGroup';
+import { Card } from './Card';
+import { CardList } from './CardList';
+import { Checkbox } from './Checkbox';
+import { Chip } from './Chip';
+import { ContextMenu } from './ContextMenu';
+import { ContextMenuItem } from './ContextMenuItem';
+import { Dropdown } from './Dropdown';
+import { HorizontalFormGroup } from './HorizontalFormGroup';
+import { IconButton } from './IconButton';
+import { ImageSlide } from './ImageSlide';
+import { MainButton } from './MainButton';
+import { MobileAlertDialog } from './MobileAlertDialog';
+import { MobileBasicModal } from './MobileBasicModal';
+import { MobileHeaderBar } from './MobileHeaderBar';
+import { MobileTabBar } from './MobileTabBar';
+import { Radio } from './Radio';
+import { ReactionButton } from './ReactionButton';
+import { Select } from './Select';
+import { StatusBlock } from './StatusBlock';
+import { TextButton } from './TextButton';
+import { TextField } from './TextField';
+import { TextLabel } from './TextLabel';
+import { UploadIconButton } from './UploadIconButton';
+import { UploadMainButton } from './UploadMainButton';
+import { UploadTextButton } from './UploadTextButton';
+export { BasicFormGroup, BasicList, BasicListItem, BlogTextField, BodyTextGroup, Card, CardList, Checkbox, Chip, ContextMenu, ContextMenuItem, Dropdown, HorizontalFormGroup, IconButton, ImageSlide, MainButton, MobileAlertDialog, MobileBasicModal, MobileHeaderBar, MobileTabBar, Radio, ReactionButton, Select, StatusBlock, TextButton, TextField, TextLabel, UploadIconButton, UploadMainButton, UploadTextButton };

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

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UploadTextButton = exports.UploadMainButton = exports.UploadIconButton = exports.TextLabel = exports.TextField = exports.TextButton = exports.StatusBlock = exports.Select = exports.ReactionButton = exports.Radio = exports.MobileTabBar = exports.MobileHeaderBar = exports.MobileBasicModal = exports.MobileAlertDialog = exports.MainButton = exports.ImageSlide = exports.IconButton = exports.HorizontalFormGroup = exports.Dropdown = exports.ContextMenuItem = exports.ContextMenu = exports.Chip = exports.Checkbox = exports.CardList = exports.Card = exports.BodyTextGroup = exports.BlogTextField = exports.BasicListItem = exports.BasicList = exports.BasicFormGroup = void 0;
+var BasicFormGroup_1 = require("./BasicFormGroup");
+Object.defineProperty(exports, "BasicFormGroup", { enumerable: true, get: function () { return BasicFormGroup_1.BasicFormGroup; } });
+var BasicList_1 = require("./BasicList");
+Object.defineProperty(exports, "BasicList", { enumerable: true, get: function () { return BasicList_1.BasicList; } });
+var BasicListItem_1 = require("./BasicListItem");
+Object.defineProperty(exports, "BasicListItem", { enumerable: true, get: function () { return BasicListItem_1.BasicListItem; } });
+var BlogTextField_1 = require("./BlogTextField");
+Object.defineProperty(exports, "BlogTextField", { enumerable: true, get: function () { return BlogTextField_1.BlogTextField; } });
+var BodyTextGroup_1 = require("./BodyTextGroup");
+Object.defineProperty(exports, "BodyTextGroup", { enumerable: true, get: function () { return BodyTextGroup_1.BodyTextGroup; } });
+var Card_1 = require("./Card");
+Object.defineProperty(exports, "Card", { enumerable: true, get: function () { return Card_1.Card; } });
+var CardList_1 = require("./CardList");
+Object.defineProperty(exports, "CardList", { enumerable: true, get: function () { return CardList_1.CardList; } });
+var Checkbox_1 = require("./Checkbox");
+Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return Checkbox_1.Checkbox; } });
+var Chip_1 = require("./Chip");
+Object.defineProperty(exports, "Chip", { enumerable: true, get: function () { return Chip_1.Chip; } });
+var ContextMenu_1 = require("./ContextMenu");
+Object.defineProperty(exports, "ContextMenu", { enumerable: true, get: function () { return ContextMenu_1.ContextMenu; } });
+var ContextMenuItem_1 = require("./ContextMenuItem");
+Object.defineProperty(exports, "ContextMenuItem", { enumerable: true, get: function () { return ContextMenuItem_1.ContextMenuItem; } });
+var Dropdown_1 = require("./Dropdown");
+Object.defineProperty(exports, "Dropdown", { enumerable: true, get: function () { return Dropdown_1.Dropdown; } });
+var HorizontalFormGroup_1 = require("./HorizontalFormGroup");
+Object.defineProperty(exports, "HorizontalFormGroup", { enumerable: true, get: function () { return HorizontalFormGroup_1.HorizontalFormGroup; } });
+var IconButton_1 = require("./IconButton");
+Object.defineProperty(exports, "IconButton", { enumerable: true, get: function () { return IconButton_1.IconButton; } });
+var ImageSlide_1 = require("./ImageSlide");
+Object.defineProperty(exports, "ImageSlide", { enumerable: true, get: function () { return ImageSlide_1.ImageSlide; } });
+var MainButton_1 = require("./MainButton");
+Object.defineProperty(exports, "MainButton", { enumerable: true, get: function () { return MainButton_1.MainButton; } });
+var MobileAlertDialog_1 = require("./MobileAlertDialog");
+Object.defineProperty(exports, "MobileAlertDialog", { enumerable: true, get: function () { return MobileAlertDialog_1.MobileAlertDialog; } });
+var MobileBasicModal_1 = require("./MobileBasicModal");
+Object.defineProperty(exports, "MobileBasicModal", { enumerable: true, get: function () { return MobileBasicModal_1.MobileBasicModal; } });
+var MobileHeaderBar_1 = require("./MobileHeaderBar");
+Object.defineProperty(exports, "MobileHeaderBar", { enumerable: true, get: function () { return MobileHeaderBar_1.MobileHeaderBar; } });
+var MobileTabBar_1 = require("./MobileTabBar");
+Object.defineProperty(exports, "MobileTabBar", { enumerable: true, get: function () { return MobileTabBar_1.MobileTabBar; } });
+var Radio_1 = require("./Radio");
+Object.defineProperty(exports, "Radio", { enumerable: true, get: function () { return Radio_1.Radio; } });
+var ReactionButton_1 = require("./ReactionButton");
+Object.defineProperty(exports, "ReactionButton", { enumerable: true, get: function () { return ReactionButton_1.ReactionButton; } });
+var Select_1 = require("./Select");
+Object.defineProperty(exports, "Select", { enumerable: true, get: function () { return Select_1.Select; } });
+var StatusBlock_1 = require("./StatusBlock");
+Object.defineProperty(exports, "StatusBlock", { enumerable: true, get: function () { return StatusBlock_1.StatusBlock; } });
+var TextButton_1 = require("./TextButton");
+Object.defineProperty(exports, "TextButton", { enumerable: true, get: function () { return TextButton_1.TextButton; } });
+var TextField_1 = require("./TextField");
+Object.defineProperty(exports, "TextField", { enumerable: true, get: function () { return TextField_1.TextField; } });
+var TextLabel_1 = require("./TextLabel");
+Object.defineProperty(exports, "TextLabel", { enumerable: true, get: function () { return TextLabel_1.TextLabel; } });
+var UploadIconButton_1 = require("./UploadIconButton");
+Object.defineProperty(exports, "UploadIconButton", { enumerable: true, get: function () { return UploadIconButton_1.UploadIconButton; } });
+var UploadMainButton_1 = require("./UploadMainButton");
+Object.defineProperty(exports, "UploadMainButton", { enumerable: true, get: function () { return UploadMainButton_1.UploadMainButton; } });
+var UploadTextButton_1 = require("./UploadTextButton");
+Object.defineProperty(exports, "UploadTextButton", { enumerable: true, get: function () { return UploadTextButton_1.UploadTextButton; } });

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

@@ -0,0 +1,17 @@
+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 { 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, Checkbox as M_Checkbox, Chip as M_Chip, ContextMenu as M_ContextMenu, ContextMenuItem as M_ContextMenuItem, Dropdown as M_Dropdown, HorizontalFormGroup as M_HorizontalFormGroup, IconButton as M_IconButton, ImageSlide as M_ImageSlide, MainButton as M_MainButton, MobileAlertDialog as M_MobileAlertDialog, MobileBasicModal as M_MobileBasicModal, 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_BasicFormGroup, M_BasicList, M_BasicListItem, M_BlogTextField, M_BodyTextGroup, M_Card, M_CardList, M_Checkbox, M_Chip, M_ContextMenu, M_ContextMenuItem, M_Dropdown, M_HorizontalFormGroup, M_IconButton, M_ImageSlide, M_MainButton, M_MobileAlertDialog, M_MobileBasicModal, M_MobileHeaderBar, M_MobileTabBar, M_Radio, M_ReactionButton, M_Select, M_StatusBlock, M_TextButton, M_TextField, M_TextLabel, M_UploadIconButton, M_UploadMainButton, M_UploadTextButton };

package/dist/src/mobile/index.js

@@ -0,0 +1,64 @@
+"use strict";
+/* eslint-disable import/order */
+/* eslint-disable import/first */
+Object.defineProperty(exports, "__esModule", { value: true });
+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_MobileBasicModal = exports.M_MobileAlertDialog = exports.M_MainButton = exports.M_ImageSlide = exports.M_IconButton = exports.M_HorizontalFormGroup = exports.M_Dropdown = exports.M_ContextMenuItem = exports.M_ContextMenu = exports.M_Chip = exports.M_Checkbox = exports.M_CardList = exports.M_Card = exports.M_BodyTextGroup = exports.M_BlogTextField = exports.M_BasicListItem = exports.M_BasicList = exports.M_BasicFormGroup = 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
+var LayoutMF_1 = require("./layout/LayoutMF");
+Object.defineProperty(exports, "LayoutMF", { enumerable: true, get: function () { return LayoutMF_1.LayoutMF; } });
+var ContainersBox_1 = require("./layout/LayoutMF/ContainersBox");
+Object.defineProperty(exports, "MFContainersBox", { enumerable: true, get: function () { return ContainersBox_1.ContainersBox; } });
+// layoutMM
+var LayoutMM_1 = require("./layout/LayoutMM");
+Object.defineProperty(exports, "LayoutMM", { enumerable: true, get: function () { return LayoutMM_1.LayoutMM; } });
+var Containers_1 = require("./layout/LayoutMM/Containers");
+Object.defineProperty(exports, "MMNavigationContainer", { enumerable: true, get: function () { return Containers_1.NavigationContainer; } });
+var ContainersBox_2 = require("./layout/LayoutMM/ContainersBox");
+Object.defineProperty(exports, "MMContainersBox", { enumerable: true, get: function () { return ContainersBox_2.ContainersBox; } });
+// layoutMP
+var LayoutMP_1 = require("./layout/LayoutMP");
+Object.defineProperty(exports, "LayoutMP", { enumerable: true, get: function () { return LayoutMP_1.LayoutMP; } });
+var Containers_2 = require("./layout/LayoutMP/Containers");
+Object.defineProperty(exports, "MPNavigationContainer", { enumerable: true, get: function () { return Containers_2.NavigationContainer; } });
+Object.defineProperty(exports, "MPTabContainer", { enumerable: true, get: function () { return Containers_2.TabContainer; } });
+var ContainersBox_3 = require("./layout/LayoutMP/ContainersBox");
+Object.defineProperty(exports, "MPContainersBox", { enumerable: true, get: function () { return ContainersBox_3.ContainersBox; } });
+// layoutMS
+var LayoutMS_1 = require("./layout/LayoutMS");
+Object.defineProperty(exports, "LayoutMS", { enumerable: true, get: function () { return LayoutMS_1.LayoutMS; } });
+var Containers_3 = require("./layout/LayoutMS/Containers");
+Object.defineProperty(exports, "MSNavigationContainer", { enumerable: true, get: function () { return Containers_3.NavigationContainer; } });
+var ContainersBox_4 = require("./layout/LayoutMS/ContainersBox");
+Object.defineProperty(exports, "MSContainersBox", { enumerable: true, get: function () { return ContainersBox_4.ContainersBox; } });
+// components
+var components_1 = require("./components");
+Object.defineProperty(exports, "M_BasicFormGroup", { enumerable: true, get: function () { return components_1.BasicFormGroup; } });
+Object.defineProperty(exports, "M_BasicList", { enumerable: true, get: function () { return components_1.BasicList; } });
+Object.defineProperty(exports, "M_BasicListItem", { enumerable: true, get: function () { return components_1.BasicListItem; } });
+Object.defineProperty(exports, "M_BlogTextField", { enumerable: true, get: function () { return components_1.BlogTextField; } });
+Object.defineProperty(exports, "M_BodyTextGroup", { enumerable: true, get: function () { return components_1.BodyTextGroup; } });
+Object.defineProperty(exports, "M_Card", { enumerable: true, get: function () { return components_1.Card; } });
+Object.defineProperty(exports, "M_CardList", { enumerable: true, get: function () { return components_1.CardList; } });
+Object.defineProperty(exports, "M_Checkbox", { enumerable: true, get: function () { return components_1.Checkbox; } });
+Object.defineProperty(exports, "M_Chip", { enumerable: true, get: function () { return components_1.Chip; } });
+Object.defineProperty(exports, "M_ContextMenu", { enumerable: true, get: function () { return components_1.ContextMenu; } });
+Object.defineProperty(exports, "M_ContextMenuItem", { enumerable: true, get: function () { return components_1.ContextMenuItem; } });
+Object.defineProperty(exports, "M_Dropdown", { enumerable: true, get: function () { return components_1.Dropdown; } });
+Object.defineProperty(exports, "M_HorizontalFormGroup", { enumerable: true, get: function () { return components_1.HorizontalFormGroup; } });
+Object.defineProperty(exports, "M_IconButton", { enumerable: true, get: function () { return components_1.IconButton; } });
+Object.defineProperty(exports, "M_ImageSlide", { enumerable: true, get: function () { return components_1.ImageSlide; } });
+Object.defineProperty(exports, "M_MainButton", { enumerable: true, get: function () { return components_1.MainButton; } });
+Object.defineProperty(exports, "M_MobileAlertDialog", { enumerable: true, get: function () { return components_1.MobileAlertDialog; } });
+Object.defineProperty(exports, "M_MobileBasicModal", { enumerable: true, get: function () { return components_1.MobileBasicModal; } });
+Object.defineProperty(exports, "M_MobileHeaderBar", { enumerable: true, get: function () { return components_1.MobileHeaderBar; } });
+Object.defineProperty(exports, "M_MobileTabBar", { enumerable: true, get: function () { return components_1.MobileTabBar; } });
+Object.defineProperty(exports, "M_Radio", { enumerable: true, get: function () { return components_1.Radio; } });
+Object.defineProperty(exports, "M_ReactionButton", { enumerable: true, get: function () { return components_1.ReactionButton; } });
+Object.defineProperty(exports, "M_Select", { enumerable: true, get: function () { return components_1.Select; } });
+Object.defineProperty(exports, "M_StatusBlock", { enumerable: true, get: function () { return components_1.StatusBlock; } });
+Object.defineProperty(exports, "M_TextButton", { enumerable: true, get: function () { return components_1.TextButton; } });
+Object.defineProperty(exports, "M_TextField", { enumerable: true, get: function () { return components_1.TextField; } });
+Object.defineProperty(exports, "M_TextLabel", { enumerable: true, get: function () { return components_1.TextLabel; } });
+Object.defineProperty(exports, "M_UploadIconButton", { enumerable: true, get: function () { return components_1.UploadIconButton; } });
+Object.defineProperty(exports, "M_UploadMainButton", { enumerable: true, get: function () { return components_1.UploadMainButton; } });
+Object.defineProperty(exports, "M_UploadTextButton", { enumerable: true, get: function () { return components_1.UploadTextButton; } });

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export declare type ContentsContainerProps = {
+    content1?: JSX.Element;
+    content2?: JSX.Element;
+    layoutType: 'MFA_1' | 'MFB_1' | 'MFB_2' | 'MFC_1' | 'MFD_1' | 'MFE_1' | 'MFE_2';
+    containerColor?: string;
+    areaColor?: string;
+};
+declare const ContentsContainer: ({ content1, content2, layoutType, containerColor, areaColor }: ContentsContainerProps) => JSX.Element;
+export default ContentsContainer;