pds-dev-kit-web-test 2.5.706 → 2.5.708

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

@@ -1,43 +1,59 @@
 "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 __makeTemplateObject = this && this.__makeTemplateObject || function (cooked, raw) {
+  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;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
+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];
     }
-    Object.defineProperty(o, k2, desc);
-}) : (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;
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var __createBinding = this && this.__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
 });
-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 __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;
 };
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importStar(require("styled-components"));
 var components_1 = require("../../../common/components");
@@ -47,330 +63,456 @@ 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, isLoading = _a.isLoading, isSubmitting = _a.isSubmitting, onClick = _a.onClick;
-    var handleClick = function (e) {
-        if (onClick) {
-            onClick(e);
-        }
-        e.target.value = '';
-    };
-    var isLineColorTheme = colorTheme.includes('line');
-    var isPrimaryColorTheme = colorTheme.includes('primary');
-    var isSecondaryColorTheme = colorTheme.includes('secondary');
-    var lineColorThemeTextColor = function () {
-        if (colorTheme === 'line1') {
-            return 'ui_cpnt_button_text_error';
-        }
-        if (colorTheme === 'line2') {
-            return 'ui_cpnt_button_text_primary';
-        }
-        if (colorTheme === 'line3') {
-            return 'ui_cpnt_button_text_darktheme_enabled';
-        }
-    };
-    var submittingProgressColor = function () {
-        if (fillType === 'line' && isLineColorTheme && state !== 'disabled') {
-            return lineColorThemeTextColor();
-        }
-        if (fillType === 'fill') {
-            return 'ui_cpnt_textlabel_usr_brandonprimary';
-        }
-        if (fillType === 'line') {
-            return 'ui_cpnt_textlabel_sys_primary';
-        }
-        if (styleTheme === 'primary') {
-            if (colorTheme === 'primary1') {
-                return 'ui_cpnt_textlabel_usr_brandprimary';
-            }
-            return 'ui_cpnt_textlabel_usr_brandonprimary';
-        }
-        if (styleTheme === 'secondary') {
-            if (colorTheme === 'secondary1') {
-                return 'ui_cpnt_textlabel_sys_white';
-            }
-            return 'ui_cpnt_textlabel_usr_brandprimary';
-        }
-        return 'ui_cpnt_textlabel_usr_brandonprimary';
-    };
-    var textColor = function () {
-        if (fillType === 'fill') {
-            return 'usrTextBrandOnPrimary';
-        }
-        if (fillType === 'line') {
-            return 'sysTextPrimary';
-        }
-        if (styleTheme === 'primary') {
-            if (colorTheme === 'primary1') {
-                return 'usrTextBrandPrimary';
-            }
-            return 'usrTextBrandOnPrimary';
-        }
-        if (styleTheme === 'secondary') {
-            if (colorTheme === 'secondary1') {
-                return 'sysTextWhite';
-            }
-            return 'usrTextBrandPrimary';
-        }
-        return 'usrTextBrandOnPrimary';
-    };
-    var textColorOverride = function () {
-        if (colorTheme === 'line3' && state === 'disabled') {
-            return 'ui_cpnt_button_text_darktheme_disabled';
-        }
-        if (fillType === 'line' && isLineColorTheme && state !== 'disabled') {
-            return lineColorThemeTextColor();
-        }
-        if (styleTheme === 'secondary' && colorTheme === 'secondary1' && state === 'disabled') {
-            return 'ui_cpnt_button_text_secondary_variation_disabled';
-        }
-        return undefined;
-    };
-    var lineColorThemeIconColor = function () {
-        if (colorTheme === 'line1') {
-            return 'ui_cpnt_button_icon_error';
-        }
-        if (colorTheme === 'line2') {
-            return 'ui_cpnt_button_icon_primary';
-        }
-        if (colorTheme === 'line3') {
-            return 'ui_cpnt_button_icon_darktheme_enabled';
-        }
-    };
-    var primaryColorThemeIconColor = function () {
-        if (colorTheme === 'primary1') {
-            return 'ui_cpnt_button_icon_primary';
-        }
-    };
-    var secondaryColorThemeIconColor = function () {
-        if (colorTheme === 'secondary1') {
-            return 'ui_cpnt_button_icon_on_primary';
-        }
-    };
-    var iconColor = function () {
-        if (state === 'disabled') {
-            if (colorTheme === 'line3') {
-                return 'ui_cpnt_button_icon_darktheme_disabled';
-            }
-            if (styleTheme === 'secondary' && colorTheme === 'secondary1') {
-                return 'ui_cpnt_button_icon_secondary_variation_disabled';
-            }
-            return 'ui_cpnt_button_icon_disabled';
-        }
-        if (fillType === 'line' && isLineColorTheme) {
-            return lineColorThemeIconColor();
-        }
-        if (fillType) {
-            return types_1.iconFillTypeColors[fillType];
-        }
-        if (styleTheme === 'primary' && isPrimaryColorTheme) {
-            return primaryColorThemeIconColor();
-        }
-        if (styleTheme === 'secondary' && isSecondaryColorTheme) {
-            return secondaryColorThemeIconColor();
-        }
-        if (styleTheme) {
-            return types_1.iconStyleThemeColors[styleTheme];
-        }
-    };
-    var UploadMainButtonVariation = function () {
-        if (isLoading) {
-            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' }) })));
-        }
-        if (isSubmitting) {
-            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' }), (0, jsx_runtime_1.jsx)(components_1.CircularProgress, { colorKey: submittingProgressColor(), size: size === 'rlarge' ? 'large' : size })] })));
-        }
-        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 }), 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 }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" })] })), (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" }), 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" }), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType })] }))] })));
-    };
-    return UploadMainButtonVariation();
+  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,
+    isLoading = _a.isLoading,
+    isSubmitting = _a.isSubmitting,
+    onClick = _a.onClick;
+  var handleClick = function (e) {
+    if (onClick) {
+      onClick(e);
+    }
+    e.target.value = '';
+  };
+  var isLineColorTheme = colorTheme.includes('line');
+  var isPrimaryColorTheme = colorTheme.includes('primary');
+  var isSecondaryColorTheme = colorTheme.includes('secondary');
+  var lineColorThemeTextColor = function () {
+    if (colorTheme === 'line1') {
+      return 'ui_cpnt_button_text_error';
+    }
+    if (colorTheme === 'line2') {
+      return 'ui_cpnt_button_text_primary';
+    }
+    if (colorTheme === 'line3') {
+      return 'ui_cpnt_button_text_darktheme_enabled';
+    }
+  };
+  var submittingProgressColor = function () {
+    if (fillType === 'line' && isLineColorTheme && state !== 'disabled') {
+      return lineColorThemeTextColor();
+    }
+    if (fillType === 'fill') {
+      return 'ui_cpnt_textlabel_usr_brandonprimary';
+    }
+    if (fillType === 'line') {
+      return 'ui_cpnt_textlabel_sys_primary';
+    }
+    if (styleTheme === 'primary') {
+      if (colorTheme === 'primary1') {
+        return 'ui_cpnt_textlabel_usr_brandprimary';
+      }
+      return 'ui_cpnt_textlabel_usr_brandonprimary';
+    }
+    if (styleTheme === 'secondary') {
+      if (colorTheme === 'secondary1') {
+        return 'ui_cpnt_textlabel_sys_white';
+      }
+      return 'ui_cpnt_textlabel_usr_brandprimary';
+    }
+    return 'ui_cpnt_textlabel_usr_brandonprimary';
+  };
+  var textColor = function () {
+    if (fillType === 'fill') {
+      return 'usrTextBrandOnPrimary';
+    }
+    if (fillType === 'line') {
+      return 'sysTextPrimary';
+    }
+    if (styleTheme === 'primary') {
+      if (colorTheme === 'primary1') {
+        return 'usrTextBrandPrimary';
+      }
+      return 'usrTextBrandOnPrimary';
+    }
+    if (styleTheme === 'secondary') {
+      if (colorTheme === 'secondary1') {
+        return 'sysTextWhite';
+      }
+      return 'usrTextBrandPrimary';
+    }
+    return 'usrTextBrandOnPrimary';
+  };
+  var textColorOverride = function () {
+    if (colorTheme === 'line3' && state === 'disabled') {
+      return 'ui_cpnt_button_text_darktheme_disabled';
+    }
+    if (fillType === 'line' && isLineColorTheme && state !== 'disabled') {
+      return lineColorThemeTextColor();
+    }
+    if (styleTheme === 'secondary' && colorTheme === 'secondary1' && state === 'disabled') {
+      return 'ui_cpnt_button_text_secondary_variation_disabled';
+    }
+    return undefined;
+  };
+  var lineColorThemeIconColor = function () {
+    if (colorTheme === 'line1') {
+      return 'ui_cpnt_button_icon_error';
+    }
+    if (colorTheme === 'line2') {
+      return 'ui_cpnt_button_icon_primary';
+    }
+    if (colorTheme === 'line3') {
+      return 'ui_cpnt_button_icon_darktheme_enabled';
+    }
+  };
+  var primaryColorThemeIconColor = function () {
+    if (colorTheme === 'primary1') {
+      return 'ui_cpnt_button_icon_primary';
+    }
+  };
+  var secondaryColorThemeIconColor = function () {
+    if (colorTheme === 'secondary1') {
+      return 'ui_cpnt_button_icon_on_primary';
+    }
+  };
+  var iconColor = function () {
+    if (state === 'disabled') {
+      if (colorTheme === 'line3') {
+        return 'ui_cpnt_button_icon_darktheme_disabled';
+      }
+      if (styleTheme === 'secondary' && colorTheme === 'secondary1') {
+        return 'ui_cpnt_button_icon_secondary_variation_disabled';
+      }
+      return 'ui_cpnt_button_icon_disabled';
+    }
+    if (fillType === 'line' && isLineColorTheme) {
+      return lineColorThemeIconColor();
+    }
+    if (fillType) {
+      return types_1.iconFillTypeColors[fillType];
+    }
+    if (styleTheme === 'primary' && isPrimaryColorTheme) {
+      return primaryColorThemeIconColor();
+    }
+    if (styleTheme === 'secondary' && isSecondaryColorTheme) {
+      return secondaryColorThemeIconColor();
+    }
+    if (styleTheme) {
+      return types_1.iconStyleThemeColors[styleTheme];
+    }
+  };
+  var UploadMainButtonVariation = function () {
+    if (isLoading) {
+      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'
+        })
+      }));
+    }
+    if (isSubmitting) {
+      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'
+        }), (0, jsx_runtime_1.jsx)(components_1.CircularProgress, {
+          colorKey: submittingProgressColor(),
+          size: size === 'rlarge' ? 'large' : size
+        })]
+      }));
+    }
+    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
+      }), 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
+        }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, {
+          size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a',
+          spacingType: "width"
+        })]
+      }), (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"
+      }), 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"
+        }), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, {
+          iconName: iconName,
+          size: size === 'large' || size === 'rlarge' ? 20 : 16,
+          colorKey: iconColor(),
+          fillType: iconFillType
+        })]
+      })]
+    }));
+  };
+  return UploadMainButtonVariation();
 }
 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  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"], ["\n  height: 48px;\n  min-width: 96px;\n  padding: 0 ", ";\n  ", "\n  ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingE;
+  var theme = _a.theme;
+  return theme.spacing.spacingE;
 }, function (_a) {
-    var shapeType = _a.shapeType;
-    return shapeType === 'round' && 'border-radius: 14px;';
+  var shapeType = _a.shapeType;
+  return shapeType === 'round' && 'border-radius: 14px;';
 }, function (_a) {
-    var size = _a.size;
-    return size === 'rlarge' && 'width: 100%';
+  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  min-width: 64px;\n  padding: 0 ", ";\n  ", "\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n"], ["\n  height: 40px;\n  min-width: 64px;\n  padding: 0 ", ";\n  ", "\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingE;
+  var theme = _a.theme;
+  return theme.spacing.spacingE;
 }, function (_a) {
-    var shapeType = _a.shapeType;
-    return shapeType === 'round' && 'border-radius: 14px;';
+  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  min-width: 48px;\n  padding: 0 ", ";\n  ", "\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"], ["\n  height: 32px;\n  min-width: 48px;\n  padding: 0 ", ";\n  ", "\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingD;
+  var theme = _a.theme;
+  return theme.spacing.spacingD;
 }, function (_a) {
-    var shapeType = _a.shapeType;
-    return shapeType === 'round' && 'border-radius: 10px;';
+  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  min-width: 48px;\n  padding: 0 ", ";\n  ", "\n\n  & > div {\n    height: 24px;\n    line-height: 24px;\n  }\n"], ["\n  height: 24px;\n  min-width: 48px;\n  padding: 0 ", ";\n  ", "\n\n  & > div {\n    height: 24px;\n    line-height: 24px;\n  }\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingD;
+  var theme = _a.theme;
+  return theme.spacing.spacingD;
 }, function (_a) {
-    var shapeType = _a.shapeType;
-    return shapeType === 'round' && 'border-radius: 8px;';
+  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 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  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:active:not([disabled])::before {\n    background-color: ", ";\n  }\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:active:not([disabled])::before {\n    background-color: ", ";\n  }\n\n  ", "\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_button_fill_base_primary;
+  var theme = _a.theme;
+  return theme.ui_cpnt_button_fill_base_primary;
 }, transitionStyle_1.ButtonTransition, function (_a) {
-    var theme = _a.theme, isSubmitting = _a.isSubmitting;
-    return !isSubmitting && theme.ui_cpnt_button_fill_on_base_pressed;
+  var theme = _a.theme,
+    isSubmitting = _a.isSubmitting;
+  return !isSubmitting && theme.ui_cpnt_button_fill_on_base_pressed;
 }, function (_a) {
-    var disabled = _a.disabled;
-    return disabled && fillDisabled;
+  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 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 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 theme = _a.theme;
+  return theme.ui_cpnt_button_line_border_primary;
 });
 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_base_darktheme_default;
+  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_border_darktheme_enabled;
+  var theme = _a.theme;
+  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;
+  var theme = _a.theme,
+    isSubmitting = _a.isSubmitting;
+  return !isSubmitting && 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;
+  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 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  &::before {\n    content: '';\n    display: none;\n  }\n  ", "\n\n  ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n\n  &::before {\n    content: '';\n    display: none;\n  }\n  ", "\n\n  ", ";\n\n  ", "\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_button_line_base_default;
+  var theme = _a.theme;
+  return theme.ui_cpnt_button_line_base_default;
 }, function (_a) {
-    var theme = _a.theme, isSubmitting = _a.isSubmitting;
-    return !isSubmitting && theme.ui_cpnt_button_line_base_pressed;
+  var theme = _a.theme,
+    isSubmitting = _a.isSubmitting;
+  return !isSubmitting && theme.ui_cpnt_button_line_base_pressed;
 }, transitionStyle_1.ButtonTransition, function (_a) {
-    var colorTheme = _a.colorTheme;
-    if (colorTheme === 'none') {
-        return none;
-    }
-    if (colorTheme === 'line1') {
-        return line1;
-    }
-    if (colorTheme === 'line2') {
-        return line2;
-    }
-    if (colorTheme === 'line3') {
-        return line3;
-    }
+  var colorTheme = _a.colorTheme;
+  if (colorTheme === 'none') {
+    return none;
+  }
+  if (colorTheme === 'line1') {
+    return line1;
+  }
+  if (colorTheme === 'line2') {
+    return line2;
+  }
+  if (colorTheme === 'line3') {
+    return line3;
+  }
 }, function (_a) {
-    var disabled = _a.disabled;
-    return disabled && lineDisabled;
+  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 theme = _a.theme;
+  return theme.ui_cpnt_button_fill_base_disabled;
 });
 var primary1 = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_button_primary_variation_base_enabled;
+  var theme = _a.theme;
+  return theme.ui_cpnt_button_primary_variation_base_enabled;
 });
 var primary = (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:active:not([disabled])::before {\n    background-color: ", ";\n  }\n\n  ", "\n  ", "\n"], ["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:active:not([disabled])::before {\n    background-color: ", ";\n  }\n\n  ", "\n  ", "\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_button_fill_base_primary;
+  var theme = _a.theme;
+  return theme.ui_cpnt_button_fill_base_primary;
 }, transitionStyle_1.ButtonTransition, function (_a) {
-    var theme = _a.theme, isSubmitting = _a.isSubmitting;
-    return !isSubmitting && theme.ui_cpnt_button_fill_on_base_pressed;
+  var theme = _a.theme,
+    isSubmitting = _a.isSubmitting;
+  return !isSubmitting && theme.ui_cpnt_button_fill_on_base_pressed;
 }, function (_a) {
-    var colorTheme = _a.colorTheme;
-    return colorTheme === 'primary1' && primary1;
+  var colorTheme = _a.colorTheme;
+  return colorTheme === 'primary1' && primary1;
 }, function (_a) {
-    var disabled = _a.disabled;
-    return disabled && primaryDisabled;
+  var disabled = _a.disabled;
+  return disabled && primaryDisabled;
 });
 var secondary1Disabled = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_button_secondary_variation_base_default;
+  var theme = _a.theme;
+  return theme.ui_cpnt_button_secondary_variation_base_default;
 });
 var secondary2Disabled = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_button_fill_base_on_sheet;
+  var theme = _a.theme;
+  return theme.ui_cpnt_button_fill_base_on_sheet;
 });
 var secondaryDisabled = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  background-color: ", ";\n\n  ", "\n  ", "\n"], ["\n  background-color: ", ";\n\n  ", "\n  ", "\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_button_line_base_hover;
+  var theme = _a.theme;
+  return theme.ui_cpnt_button_line_base_hover;
 }, function (_a) {
-    var colorTheme = _a.colorTheme;
-    return colorTheme === 'secondary1' && secondary1Disabled;
+  var colorTheme = _a.colorTheme;
+  return colorTheme === 'secondary1' && secondary1Disabled;
 }, function (_a) {
-    var colorTheme = _a.colorTheme;
-    return colorTheme === 'secondary2' && secondary2Disabled;
+  var colorTheme = _a.colorTheme;
+  return colorTheme === 'secondary2' && secondary2Disabled;
 });
 var secondary1 = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  background-color: ", ";\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n\n  &::before {\n    content: '';\n    display: none;\n  }\n\n  ", "\n"], ["\n  background-color: ", ";\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n\n  &::before {\n    content: '';\n    display: none;\n  }\n\n  ", "\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_button_secondary_variation_base_default;
+  var theme = _a.theme;
+  return theme.ui_cpnt_button_secondary_variation_base_default;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_button_secondary_variation_base_pressed;
+  var theme = _a.theme;
+  return theme.ui_cpnt_button_secondary_variation_base_pressed;
 }, transitionStyle_1.ButtonTransition);
 var secondary2 = (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_button_fill_base_on_sheet;
+  var theme = _a.theme;
+  return theme.ui_cpnt_button_fill_base_on_sheet;
 });
 var secondary = (0, styled_components_1.css)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:active:not([disabled])::before {\n    background-color: ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n"], ["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:active:not([disabled])::before {\n    background-color: ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_button_line_base_hover;
+  var theme = _a.theme;
+  return theme.ui_cpnt_button_line_base_hover;
 }, transitionStyle_1.ButtonTransition, function (_a) {
-    var theme = _a.theme, isSubmitting = _a.isSubmitting;
-    return !isSubmitting && theme.ui_cpnt_button_secondary_on_base_pressed;
+  var theme = _a.theme,
+    isSubmitting = _a.isSubmitting;
+  return !isSubmitting && theme.ui_cpnt_button_secondary_on_base_pressed;
 }, function (_a) {
-    var colorTheme = _a.colorTheme;
-    return colorTheme === 'secondary1' && secondary1;
+  var colorTheme = _a.colorTheme;
+  return colorTheme === 'secondary1' && secondary1;
 }, function (_a) {
-    var colorTheme = _a.colorTheme;
-    return colorTheme === 'secondary2' && secondary2;
+  var colorTheme = _a.colorTheme;
+  return colorTheme === 'secondary2' && secondary2;
 }, function (_a) {
-    var disabled = _a.disabled;
-    return disabled && secondaryDisabled;
+  var disabled = _a.disabled;
+  return disabled && secondaryDisabled;
 });
 var S_UploadMainButton = styled_components_1.default.label(templateObject_22 || (templateObject_22 = __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];
+  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];
+  var styleTheme = _a.styleTheme;
+  return styleTheme && {
+    primary: primary,
+    secondary: secondary
+  }[styleTheme];
 }, function (_a) {
-    var fillType = _a.fillType;
-    return fillType && { fill: fill, line: line }[fillType];
+  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];
+  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%';
+  var responsiveMode = _a.responsiveMode;
+  return responsiveMode === 'use' && 'width: 100%';
 });
 var S_LoadingUploadMainButton = (0, styled_components_1.default)(S_UploadMainButton)(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.skeletonLoadingStyle);
 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, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
+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, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23;