pds-dev-kit-web 0.4.0 → 0.5.1

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

@@ -30,8 +30,8 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var common_1 = require("../../../common");
 function TextLabel(_a) {
-    var text = _a.text, _b = _a.textAlign, textAlign = _b === void 0 ? 'left' : _b, _c = _a.styleTheme, styleTheme = _c === void 0 ? 'body2Bold' : _c, colorOverride = _a.colorOverride, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'sysTextPrimary' : _d, _e = _a.underline, underline = _e === void 0 ? 'none' : _e, _f = _a.singleLineMode, singleLineMode = _f === void 0 ? 'none' : _f, _g = _a.ellipsisMode, ellipsisMode = _g === void 0 ? 'none' : _g, lineLimit = _a.lineLimit;
-    return (react_1.default.createElement(S_TextLabel, { textAlign: textAlign, styleTheme: styleTheme, colorOverride: colorOverride, colorTheme: colorTheme, underline: underline, singleLineMode: singleLineMode, ellipsisMode: ellipsisMode, lineLimit: lineLimit }, text));
+    var text = _a.text, _b = _a.textAlign, textAlign = _b === void 0 ? 'left' : _b, _c = _a.styleTheme, styleTheme = _c === void 0 ? 'body2Bold' : _c, colorOverride = _a.colorOverride, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'sysTextPrimary' : _d, _e = _a.underline, underline = _e === void 0 ? 'none' : _e, _f = _a.singleLineMode, singleLineMode = _f === void 0 ? 'none' : _f, _g = _a.ellipsisMode, ellipsisMode = _g === void 0 ? 'none' : _g, lineLimit = _a.lineLimit, _h = _a.btnMode, btnMode = _h === void 0 ? 'none' : _h;
+    return (react_1.default.createElement(S_TextLabel, { textAlign: textAlign, styleTheme: styleTheme, colorOverride: colorOverride, colorTheme: colorTheme, underline: underline, singleLineMode: singleLineMode, ellipsisMode: ellipsisMode, lineLimit: lineLimit, btnMode: btnMode }, text));
 }
 var displayBold = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"], ["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"])), function (_a) {
     var theme = _a.theme;
@@ -251,7 +251,7 @@ var ellipsisStyle = (0, styled_components_1.css)(templateObject_29 || (templateO
     var lineLimit = _a.lineLimit;
     return lineLimit;
 });
-var S_TextLabel = styled_components_1.default.div(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n  box-sizing: border-box;\n  text-align: ", ";\n  text-decoration: ", ";\n  white-space: pre-wrap;\n  word-break: break-all;\n\n  ", ";\n\n  ", ";\n\n  line-height: ", ";\n\n  ", ";\n\n  ", ";\n"], ["\n  box-sizing: border-box;\n  text-align: ", ";\n  text-decoration: ", ";\n  white-space: pre-wrap;\n  word-break: break-all;\n\n  ", ";\n\n  ", ";\n\n  line-height: ", ";\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
+var S_TextLabel = styled_components_1.default.div(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n  box-sizing: border-box;\n  text-align: ", ";\n  text-decoration: ", ";\n  white-space: pre-wrap;\n  word-break: break-all;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"], ["\n  box-sizing: border-box;\n  text-align: ", ";\n  text-decoration: ", ";\n  white-space: pre-wrap;\n  word-break: break-all;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
     var textAlign = _a.textAlign;
     return textAlign;
 }, function (_a) {
@@ -296,7 +296,10 @@ var S_TextLabel = styled_components_1.default.div(templateObject_30 || (template
         }[colorTheme];
 }, function (_a) {
     var singleLineMode = _a.singleLineMode, theme = _a.theme;
-    return singleLineMode === 'use' && theme.mobileLineHeight.singleLine;
+    return singleLineMode === 'use' && "line-height: " + theme.desktopLineHeight.singleLine;
+}, function (_a) {
+    var btnMode = _a.btnMode, theme = _a.theme;
+    return btnMode === 'use' && "line-height: " + theme.desktopLineHeight.btn;
 }, function (_a) {
     var ellipsisMode = _a.ellipsisMode, lineLimit = _a.lineLimit;
     return ellipsisMode === 'use' && lineLimit && ellipsisStyle;

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { FillIconNameKeys, LineIconNameKeys, UiColors } from '../../../common';
+export declare type UploadIconButtonProps = {
+    fillType?: 'fill' | 'line';
+    shapeType?: 'circular' | 'rectangle';
+    baseSize?: 'xxlarge' | 'large' | 'medium' | 'small' | 'xsmall';
+    baseColorKey?: UiColors;
+    borderColorKey?: UiColors;
+    iconSize?: 12 | 16 | 20 | 24 | 48 | 72;
+    iconFillType?: 'fill' | 'line';
+    iconName: FillIconNameKeys | LineIconNameKeys;
+    iconColorKey?: UiColors;
+    shadow?: 'hidden' | 'visible';
+    colorTheme?: 'none' | 'line1' | 'line2';
+    state?: 'normal' | 'disabled';
+    accept?: string;
+    multipleMode?: 'none' | 'use';
+    onClick?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+};
+declare function UploadIconButton({ fillType, shapeType, baseSize, baseColorKey, borderColorKey, iconSize, iconFillType, iconName, iconColorKey, shadow, colorTheme, state, accept, multipleMode, onClick }: UploadIconButtonProps): JSX.Element;
+export default UploadIconButton;

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

@@ -0,0 +1,138 @@
+"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 common_1 = require("../../../common");
+var hybrid_1 = require("../../../hybrid");
+var types_1 = require("./types");
+function UploadIconButton(_a) {
+    var _b = _a.fillType, fillType = _b === void 0 ? 'fill' : _b, _c = _a.shapeType, shapeType = _c === void 0 ? 'rectangle' : _c, _d = _a.baseSize, baseSize = _d === void 0 ? 'small' : _d, baseColorKey = _a.baseColorKey, borderColorKey = _a.borderColorKey, _e = _a.iconSize, iconSize = _e === void 0 ? 24 : _e, _f = _a.iconFillType, iconFillType = _f === void 0 ? 'line' : _f, _g = _a.iconName, iconName = _g === void 0 ? 'ic_upload' : _g, iconColorKey = _a.iconColorKey, _h = _a.shadow, shadow = _h === void 0 ? 'hidden' : _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 IconColorSelect = function () {
+        if (state === 'disabled') {
+            return 'ui_cpnt_button_icon_disabled';
+        }
+        if (colorTheme !== 'none' && fillType === 'line') {
+            return types_1.iconThemeColorLineColors[colorTheme];
+        }
+        if (iconColorKey) {
+            return iconColorKey;
+        }
+        return types_1.iconStateColors[fillType];
+    };
+    return (react_1.default.createElement(S_UploadIconButton, { fillType: fillType, shapeType: shapeType, baseSize: baseSize, baseColorKey: baseColorKey, borderColorKey: borderColorKey, shadow: shadow, colorTheme: colorTheme, isDisabled: state === 'disabled' },
+        react_1.default.createElement("input", { type: "file", hidden: true, disabled: state === 'disabled', accept: accept, multiple: multipleMode === 'use', onChange: onClick }),
+        react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: iconSize, colorKey: IconColorSelect(), fillType: iconFillType })));
+}
+var fillDisabled = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme, baseColorKey = _a.baseColorKey;
+    return baseColorKey === 'ui_cpnt_button_fill_base_transparent'
+        ? ''
+        : theme.ui_cpnt_button_fill_base_disabled;
+});
+var fill = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n\n  &:active:not([disabled]) {\n    background-image: ", ";\n  }\n\n  ", ";\n"], ["\n  background-color: ", ";\n\n  &:active:not([disabled]) {\n    background-image: ", ";\n  }\n\n  ", ";\n"])), function (_a) {
+    var theme = _a.theme, baseColorKey = _a.baseColorKey;
+    return baseColorKey ? common_1.uiColors[baseColorKey] : theme.ui_cpnt_button_fill_base_primary;
+}, function (_a) {
+    var theme = _a.theme, baseColorKey = _a.baseColorKey;
+    return baseColorKey === 'ui_cpnt_button_fill_base_transparent'
+        ? ''
+        : "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 isDisabled = _a.isDisabled;
+    return isDisabled && fillDisabled;
+});
+var line1ColorTheme = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-color: ", ";\n"], ["\n  border-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_line_border_error;
+});
+var line2ColorTheme = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border-color: ", ";\n"], ["\n  border-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_line_border_primary;
+});
+var lineDisabled = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  border-color: ", ";\n  background-color: ", ";\n"], ["\n  border-color: ", ";\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_line_border_disabled;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_line_base_default;
+});
+var line = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: ", ";\n  border-color: ", ";\n\n  ", ";\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n\n  ", ";\n"], ["\n  background-color: ", ";\n  border-color: ", ";\n\n  ", ";\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n\n  ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_line_base_default;
+}, function (_a) {
+    var theme = _a.theme, borderColorKey = _a.borderColorKey;
+    return borderColorKey ? common_1.uiColors[borderColorKey] : theme.ui_cpnt_button_line_border_enabled;
+}, function (_a) {
+    var colorTheme = _a.colorTheme;
+    switch (colorTheme) {
+        case 'line1':
+            return line1ColorTheme;
+        case 'line2':
+            return line2ColorTheme;
+        default:
+            return '';
+    }
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_line_base_pressed;
+}, function (_a) {
+    var isDisabled = _a.isDisabled;
+    return isDisabled && lineDisabled;
+});
+var xxlarge = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  height: 96px;\n  width: 96px;\n"], ["\n  height: 96px;\n  width: 96px;\n"])));
+var large = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  height: 48px;\n  width: 48px;\n"], ["\n  height: 48px;\n  width: 48px;\n"])));
+var medium = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  height: 40px;\n  width: 40px;\n"], ["\n  height: 40px;\n  width: 40px;\n"])));
+var small = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  height: 32px;\n  width: 32px;\n"], ["\n  height: 32px;\n  width: 32px;\n"])));
+var xsmall = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  height: 24px;\n  width: 24px;\n"], ["\n  height: 24px;\n  width: 24px;\n"])));
+var S_UploadIconButton = styled_components_1.default.label(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  border-radius: ", ";\n  box-shadow: ", ";\n  display: inline-flex;\n  justify-content: center;\n\n  ", ";\n\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  border-radius: ", ";\n  box-shadow: ", ";\n  display: inline-flex;\n  justify-content: center;\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
+    var shapeType = _a.shapeType;
+    return shapeType === 'circular' && '50%';
+}, function (_a) {
+    var theme = _a.theme, shadow = _a.shadow;
+    return shadow === 'visible' && theme.boxShadow.elevation2;
+}, function (_a) {
+    var fillType = _a.fillType;
+    return fillType &&
+        {
+            fill: fill,
+            line: line
+        }[fillType];
+}, function (_a) {
+    var baseSize = _a.baseSize;
+    return baseSize &&
+        {
+            xxlarge: xxlarge,
+            large: large,
+            medium: medium,
+            small: small,
+            xsmall: xsmall
+        }[baseSize];
+});
+exports.default = UploadIconButton;
+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;

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

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

package/dist/src/mobile/components/UploadIconButton/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.UploadIconButton = void 0;
+var UploadIconButton_1 = require("./UploadIconButton");
+Object.defineProperty(exports, "UploadIconButton", { enumerable: true, get: function () { return __importDefault(UploadIconButton_1).default; } });

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

@@ -0,0 +1,8 @@
+export declare const iconStateColors: {
+    readonly fill: "ui_cpnt_button_icon_on_primary";
+    readonly line: "ui_cpnt_button_icon_enabled";
+};
+export declare const iconThemeColorLineColors: {
+    readonly line1: "ui_cpnt_button_icon_error";
+    readonly line2: "ui_cpnt_button_icon_primary";
+};

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.iconThemeColorLineColors = exports.iconStateColors = void 0;
+exports.iconStateColors = {
+    fill: 'ui_cpnt_button_icon_on_primary',
+    line: 'ui_cpnt_button_icon_enabled'
+};
+exports.iconThemeColorLineColors = {
+    line1: 'ui_cpnt_button_icon_error',
+    line2: 'ui_cpnt_button_icon_primary'
+};

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { FillIconNameKeys, LineIconNameKeys } from '../../../common';
+declare type UploadMainButtonProps = {
+    text?: string;
+    fillType?: 'fill' | 'line';
+    size?: 'large' | 'medium' | 'small' | 'xsmall' | 'rlarge';
+    fontWeight?: 'bold' | 'regular';
+    iconMode?: 'none' | 'left' | 'right';
+    iconFillType?: 'fill' | 'line';
+    iconName?: FillIconNameKeys | LineIconNameKeys;
+    colorTheme?: 'none' | 'line1' | 'line2' | 'line3';
+    state?: 'normal' | 'disabled';
+    accept?: string;
+    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;
+export default UploadMainButton;

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

@@ -0,0 +1,161 @@
+"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.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 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];
+        }
+        return types_1.iconFillTypeColors[fillType];
+    };
+    return (react_1.default.createElement(S_UploadMainButton, { fillType: fillType, size: size, 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: onClick }),
+        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], btnMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : types_1.textColors[fillType], 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  border-radius: 24px;\n  height: 48px;\n  min-width: 96px;\n  padding: 0 ", ";\n  width: ", ";\n"], ["\n  border-radius: 24px;\n  height: 48px;\n  min-width: 96px;\n  padding: 0 ", ";\n  width: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+}, 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: 20px;\n  height: 40px;\n  padding: 0 ", ";\n"], ["\n  border-radius: 20px;\n  height: 40px;\n  padding: 0 ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+});
+var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-radius: 16px;\n  height: 32px;\n  padding: 0 ", ";\n"], ["\n  border-radius: 16px;\n  height: 32px;\n  padding: 0 ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingD;
+});
+var xsmall = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border-radius: 12px;\n  height: 24px;\n  padding: 0 ", ";\n"], ["\n  border-radius: 12px;\n  height: 24px;\n  padding: 0 ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingD;
+});
+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 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 theme = _a.theme, fontWeight = _a.fontWeight;
+    return fontWeight &&
+        {
+            bold: theme.fontWeight.bold,
+            regular: theme.fontWeight.normal
+        }[fontWeight];
+}, 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];
+});
+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/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 textColors: {
+    readonly fill: "usrTextBrandOnPrimary";
+    readonly line: "sysTextPrimary";
+};
+export declare const iconFillTypeColors: {
+    readonly fill: "ui_cpnt_button_icon_on_primary";
+    readonly line: "ui_cpnt_button_icon_enabled";
+};
+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.iconFillTypeColors = exports.textColors = 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.textColors = {
+    fill: 'usrTextBrandOnPrimary',
+    line: 'sysTextPrimary'
+};
+exports.iconFillTypeColors = {
+    fill: 'ui_cpnt_button_icon_on_primary',
+    line: 'ui_cpnt_button_icon_enabled'
+};
+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,12 @@
+import React from 'react';
+declare type UploadTextButtonProps = {
+    text?: string;
+    size?: 'rlarge' | 'large' | 'medium' | 'small' | 'xsmall';
+    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;
+export default UploadTextButton;

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

@@ -0,0 +1,77 @@
+"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'
+};
+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;
+    return (react_1.default.createElement(S_UploadTextButton, { size: size, fontWeight: fontWeight, disabled: state === 'disabled' },
+        react_1.default.createElement("input", { type: "file", hidden: true, disabled: state === 'disabled', accept: accept, multiple: multipleMode === 'use', onChange: onClick }),
+        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  width: ", ";\n"], ["\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  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 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];
+});
+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

@@ -1,4 +1,23 @@
+import { BlogTextField } from './BlogTextField';
+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 { IconButton } from './IconButton';
+import { ImageSlide } from './ImageSlide';
+import { MainButton } from './MainButton';
+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';
-export { IconButton, StatusBlock, TextLabel };
+import { UploadIconButton } from './UploadIconButton';
+import { UploadMainButton } from './UploadMainButton';
+import { UploadTextButton } from './UploadTextButton';
+export { BlogTextField, Card, CardList, Checkbox, Chip, ContextMenu, ContextMenuItem, IconButton, ImageSlide, MainButton, MobileHeaderBar, MobileTabBar, Radio, ReactionButton, Select, StatusBlock, TextButton, TextField, TextLabel, UploadIconButton, UploadMainButton, UploadTextButton };