pds-dev-kit-web-test 2.3.17 → 2.4.0

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

@@ -1,222 +0,0 @@
-"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 __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]; } };
-    }
-    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;
-});
-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 });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var react_dom_1 = require("react-dom");
-var systemUI_1 = require("../../../common/styles/systemUI");
-var SystemUIPositionGenerator_1 = require("../../../common/utils/SystemUIPositionGenerator");
-var styled_components_1 = __importStar(require("styled-components"));
-var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
-var hybrid_1 = require("../../../hybrid");
-var constants_1 = require("./constants");
-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, tooltipText = _a.tooltipText, _o = _a.tooltipPosition, tooltipPosition = _o === void 0 ? 'bottom' : _o, onClick = _a.onClick;
-    var _p = (0, react_1.useState)(false), isTooltipOpen = _p[0], setIsTooltipOpen = _p[1];
-    var tooltipPositionTargetRef = (0, react_1.useRef)(null);
-    var tooltipRef = (0, react_1.useRef)(null);
-    var _q = (0, react_1.useState)(null), tooltipSizeOffset = _q[0], setTooltipSizeOffset = _q[1];
-    var _r = (0, react_1.useState)(null), tooltipPositionOffset = _r[0], setTooltipPositionOffset = _r[1];
-    /**
-     * @when : 화면진입 시, dependency 변경되었을 때
-     * @expected : tooltipPositionTargetRef, tooltipRef 의 위치를 업데이트합니다.
-     * @clear :
-     */
-    (0, react_1.useEffect)(function () {
-        if (!tooltipPositionTargetRef.current || !tooltipText) {
-            return;
-        }
-        if (!isTooltipOpen && tooltipRef.current) {
-            setTooltipSizeOffset(null);
-            return;
-        }
-        var _a = tooltipPositionTargetRef.current.getBoundingClientRect(), top = _a.top, right = _a.right, left = _a.left, bottom = _a.bottom;
-        setTooltipPositionOffset({
-            top: top + window.scrollY,
-            right: right + window.scrollX,
-            bottom: bottom + window.scrollY,
-            left: left + window.scrollX
-        });
-        if (tooltipRef.current) {
-            setTooltipSizeOffset({
-                height: tooltipRef.current.offsetHeight,
-                width: tooltipRef.current.offsetWidth
-            });
-        }
-    }, [isTooltipOpen]);
-    var tooltipPositionCss = (0, SystemUIPositionGenerator_1.hoverTypeSystemUICssGenerator)({
-        baseSize: constants_1.ICON_BUTTON_SIZE[baseSize],
-        sizeOffset: tooltipSizeOffset,
-        positionOffset: tooltipPositionOffset,
-        systemUIPosition: tooltipPosition.includes('_')
-            ? tooltipPosition
-            : "center_".concat(tooltipPosition)
-    });
-    var handleTooltipToggle = function (value) {
-        setIsTooltipOpen(value);
-    };
-    var handleClick = function (e) {
-        if (onClick) {
-            onClick(e);
-        }
-        e.target.value = '';
-    };
-    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 ((0, jsx_runtime_1.jsxs)(S_UploadIconButton, __assign({ "x-pds-name": "UploadIconButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", ref: tooltipPositionTargetRef, fillType: fillType, shapeType: shapeType, baseSize: baseSize, baseColorKey: baseColorKey, borderColorKey: borderColorKey, shadow: shadow, colorTheme: colorTheme, isDisabled: state === 'disabled', onPointerEnter: function () { return tooltipText && handleTooltipToggle(true); }, onPointerLeave: function () { return tooltipText && handleTooltipToggle(false); } }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "file", hidden: true, disabled: state === 'disabled', accept: accept, multiple: multipleMode === 'use', onChange: handleClick }), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: iconName, size: iconSize, colorKey: IconColorSelect(), fillType: iconFillType }), isTooltipOpen && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(S_TooltipWrapper, __assign({ className: "TooltipWrapper", ref: tooltipRef, tooltipPositionCss: tooltipPositionCss }, { children: tooltipText })), document.body) }))] })));
-}
-var fillDisabled = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n\n  &:hover:not([disabled])::before {\n    background-color: unset;\n  }\n\n  &:active:not([disabled])::before {\n    background-color: unset;\n  }\n"], ["\n  background-color: ", ";\n\n  &:hover:not([disabled])::before {\n    background-color: unset;\n  }\n\n  &:active:not([disabled])::before {\n    background-color: unset;\n  }\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  border: none;\n  position: relative;\n\n  &::before {\n    background-color: transparent;\n    border-radius: inherit;\n    content: '';\n    height: 100%;\n    position: absolute;\n    width: 100%;\n    ", "\n  }\n\n  &:hover:not([disabled])::before {\n    background-color: ", ";\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    background-color: transparent;\n    border-radius: inherit;\n    content: '';\n    height: 100%;\n    position: absolute;\n    width: 100%;\n    ", "\n  }\n\n  &:hover:not([disabled])::before {\n    background-color: ", ";\n  }\n\n  &:active:not([disabled])::before {\n    background-color: ", ";\n  }\n\n  ", ";\n"])), function (_a) {
-    var theme = _a.theme, baseColorKey = _a.baseColorKey;
-    return baseColorKey ? theme[baseColorKey] : theme.ui_cpnt_button_fill_base_primary;
-}, transitionStyle_1.ButtonTransition, function (_a) {
-    var theme = _a.theme, baseColorKey = _a.baseColorKey;
-    return baseColorKey === 'ui_cpnt_button_fill_base_transparent'
-        ? ''
-        : theme.ui_cpnt_button_fill_on_base_hover;
-}, function (_a) {
-    var theme = _a.theme, baseColorKey = _a.baseColorKey;
-    return baseColorKey === 'ui_cpnt_button_fill_base_transparent'
-        ? ''
-        : theme.ui_cpnt_button_fill_on_base_pressed;
-}, 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  background-color: ", ";\n  border-color: ", ";\n\n  &:hover:not([disabled]) {\n    background-color: unset;\n  }\n\n  &:active:not([disabled]) {\n    background-color: unset;\n  }\n"], ["\n  background-color: ", ";\n  border-color: ", ";\n\n  &:hover:not([disabled]) {\n    background-color: unset;\n  }\n\n  &:active:not([disabled]) {\n    background-color: unset;\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_border_disabled;
-});
-var line = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: ", ";\n  border-color: ", ";\n\n  ", ";\n\n  &:hover:not([disabled]) {\n    background-color: ", ";\n  }\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n\n  ", "\n\n  ", ";\n"], ["\n  background-color: ", ";\n  border-color: ", ";\n\n  ", ";\n\n  &:hover:not([disabled]) {\n    background-color: ", ";\n  }\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\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, borderColorKey = _a.borderColorKey;
-    return borderColorKey ? theme[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_hover;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_button_line_base_pressed;
-}, transitionStyle_1.ButtonTransition, 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 roundStyle = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  border-radius: ", ";\n"], ["\n  border-radius: ", ";\n"])), function (_a) {
-    var baseSize = _a.baseSize;
-    return baseSize &&
-        { xxlarge: '24px', large: '14px', medium: '12px', small: '10px', xsmall: '8px' }[baseSize];
-});
-var S_UploadIconButton = 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-shadow: ", ";\n  box-sizing: border-box;\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n  ", ";\n\n  ", ";\n\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n  ", ";\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
-    var theme = _a.theme, shadow = _a.shadow;
-    return shadow === 'visible' && theme.boxShadow.elevation2;
-}, function (_a) {
-    var isDisabled = _a.isDisabled;
-    return (isDisabled ? 'default' : 'pointer');
-}, function (_a) {
-    var shapeType = _a.shapeType;
-    return shapeType && { circular: 'border-radius: 50%', rectangle: '', round: roundStyle }[shapeType];
-}, 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];
-});
-var S_TooltipWrapper = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  ", "\n\n  ", ";\n"], ["\n  ", "\n\n  ", ";\n"])), systemUI_1.TooltipWrapperStyle, function (_a) {
-    var tooltipPositionCss = _a.tooltipPositionCss;
-    return tooltipPositionCss;
-});
-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, templateObject_13, templateObject_14;

package/dist/src/desktop/components/UploadIconButton/constants.js

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ICON_BUTTON_SIZE = void 0;
-exports.ICON_BUTTON_SIZE = {
-    xxlarge: 96,
-    large: 48,
-    medium: 40,
-    small: 32,
-    xsmall: 24
-};

package/dist/src/desktop/components/UploadIconButton/index.js

@@ -1,8 +0,0 @@
-"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/desktop/components/UploadIconButton/types.js

@@ -1,11 +0,0 @@
-"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/desktop/components/UploadMainButton/UploadMainButton.js

@@ -1,384 +0,0 @@
-"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 __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]; } };
-    }
-    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;
-});
-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 });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var styled_components_1 = __importStar(require("styled-components"));
-var components_1 = require("../../../common/components");
-var styles_1 = require("../../../common/styles");
-var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
-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_SubmittingUploadMainButton, __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": "desktop", 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;
-}, 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  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;
-}, 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  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;
-}, 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  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;
-}, 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  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  &:hover:not([disabled])::before {\n    background-color: ", ";\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  &:hover:not([disabled])::before {\n    background-color: ", ";\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;
-}, transitionStyle_1.ButtonTransition, function (_a) {
-    var theme = _a.theme, isSubmitting = _a.isSubmitting;
-    return !isSubmitting && theme.ui_cpnt_button_fill_on_base_hover;
-}, function (_a) {
-    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 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  background-color: ", ";\n  border: solid 1px ", ";\n\n  &:hover:not([disabled]) {\n    background-color: ", ";\n  }\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n"], ["\n  background-color: ", ";\n  border: solid 1px ", ";\n\n  &:hover:not([disabled]) {\n    background-color: ", ";\n  }\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;
-}, function (_a) {
-    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_hover;
-}, function (_a) {
-    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;
-}, 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  &:hover:not([disabled]) {\n    background-color: ", ";\n  }\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  &:hover:not([disabled]) {\n    background-color: ", ";\n  }\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;
-}, function (_a) {
-    var theme = _a.theme, isSubmitting = _a.isSubmitting;
-    return !isSubmitting && theme.ui_cpnt_button_line_base_hover;
-}, function (_a) {
-    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;
-    }
-}, 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 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 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  &:hover:not([disabled])::before {\n    background-color: ", ";\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  &:hover:not([disabled])::before {\n    background-color: ", ";\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;
-}, transitionStyle_1.ButtonTransition, function (_a) {
-    var theme = _a.theme, isSubmitting = _a.isSubmitting;
-    return !isSubmitting && theme.ui_cpnt_button_fill_on_base_hover;
-}, function (_a) {
-    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;
-}, function (_a) {
-    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 secondaryDisabled = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  background-color: ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n\n  ", "\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_button_line_base_hover;
-}, function (_a) {
-    var colorTheme = _a.colorTheme;
-    return colorTheme === 'secondary1' && secondary1Disabled;
-});
-var secondary1 = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  background-color: ", ";\n\n  &:hover:not([disabled]) {\n    background-color: ", ";\n  }\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  &:hover:not([disabled]) {\n    background-color: ", ";\n  }\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;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_button_secondary_variation_base_hover;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_button_secondary_variation_base_pressed;
-}, transitionStyle_1.ButtonTransition);
-var secondary = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __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  &:hover:not([disabled])::before {\n    background-color: ", ";\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  &:hover:not([disabled])::before {\n    background-color: ", ";\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_line_base_hover;
-}, transitionStyle_1.ButtonTransition, function (_a) {
-    var theme = _a.theme, isSubmitting = _a.isSubmitting;
-    return !isSubmitting && theme.ui_cpnt_button_secondary_on_base_hover;
-}, function (_a) {
-    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;
-}, function (_a) {
-    var disabled = _a.disabled;
-    return disabled && secondaryDisabled;
-});
-var S_UploadMainButton = styled_components_1.default.label(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n\n  & > div {\n    font-weight: ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n\n  & > div {\n    font-weight: ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n  ", ";\n"])), function (_a) {
-    var disabled = _a.disabled;
-    return (disabled ? 'default' : 'pointer');
-}, 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%';
-});
-var S_LoadingUploadMainButton = (0, styled_components_1.default)(S_UploadMainButton)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.skeletonLoadingStyle);
-var S_SubmittingUploadMainButton = (0, styled_components_1.default)(S_UploadMainButton)(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  cursor: default;\n"], ["\n  cursor: default;\n"])));
-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;