pds-dev-kit-web 1.9.0-beta.4 → 1.9.0-beta.6

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

@@ -30,6 +30,7 @@ var react_1 = __importDefault(require("react"));
 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");
@@ -41,9 +42,23 @@ function UploadMainButton(_a) {
         }
         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' && colorTheme !== 'none' && state !== 'disabled') {
-            return types_1.textThemeColorLines[colorTheme];
+        if (fillType === 'line' && isLineColorTheme && state !== 'disabled') {
+            return lineColorThemeTextColor();
         }
         if (fillType === 'fill') {
             return 'ui_cpnt_textlabel_usr_brandonprimary';
@@ -52,53 +67,98 @@ function UploadMainButton(_a) {
             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 selectTextThemeColor = function () {
+    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' && colorTheme !== 'none' && state !== 'disabled') {
-            return types_1.textThemeColorLines[colorTheme];
+        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' && colorTheme !== 'none') {
-            return types_1.iconColorThemeLineColors[colorTheme];
+        if (fillType === 'line' && isLineColorTheme) {
+            return lineColorThemeIconColor();
         }
         if (fillType) {
             return types_1.iconFillTypeColors[fillType];
         }
-        if (styleTheme) {
-            return types_1.iconStyleThemeColors[styleTheme];
+        if (styleTheme === 'primary' && isPrimaryColorTheme) {
+            return primaryColorThemeIconColor();
         }
-    };
-    var textColor = function () {
-        if (fillType === 'fill') {
-            return 'usrTextBrandOnPrimary';
+        if (styleTheme === 'secondary' && isSecondaryColorTheme) {
+            return secondaryColorThemeIconColor();
         }
-        if (fillType === 'line') {
-            return 'sysTextPrimary';
-        }
-        if (styleTheme === 'primary') {
-            return 'usrTextBrandOnPrimary';
-        }
-        if (styleTheme === 'secondary') {
-            return 'usrTextBrandPrimary';
+        if (styleTheme) {
+            return types_1.iconStyleThemeColors[styleTheme];
         }
-        return 'usrTextBrandOnPrimary';
     };
     var UploadMainButtonVariation = function () {
         if (isLoading) {
@@ -115,7 +175,7 @@ function UploadMainButton(_a) {
             size !== 'xsmall' && iconMode === 'left' && (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType }),
                 react_1.default.createElement(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }))),
-            react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: types_1.textStyles[size], singleLineMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor(), colorOverride: selectTextThemeColor(), ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }),
+            react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: types_1.textStyles[size], singleLineMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor(), colorOverride: textColorOverride(), ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }),
             size !== 'xsmall' && iconMode === 'right' && (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }),
                 react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType })))));
@@ -157,17 +217,15 @@ var fillDisabled = (0, styled_components_1.css)(templateObject_5 || (templateObj
     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  &:hover:not([disabled]) {\n    background-image: ", ";\n  }\n\n  &:active:not([disabled]) {\n    background-image: ", ";\n  }\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: none;\n\n  &:hover:not([disabled]) {\n    background-image: ", ";\n  }\n\n  &:active:not([disabled]) {\n    background-image: ", ";\n  }\n\n  ", "\n"])), function (_a) {
+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;
-}, function (_a) {
+}, transitionStyle_1.ButtonTransition, function (_a) {
     var theme = _a.theme, isSubmitting = _a.isSubmitting;
-    return !isSubmitting &&
-        "linear-gradient(\n      to top,\n      " + theme.ui_cpnt_button_fill_on_base_hover + ",\n      " + theme.ui_cpnt_button_fill_on_base_hover + "\n    )";
+    return !isSubmitting && theme.ui_cpnt_button_fill_on_base_hover;
 }, function (_a) {
     var theme = _a.theme, isSubmitting = _a.isSubmitting;
-    return !isSubmitting &&
-        "linear-gradient(\n      to top,\n      " + theme.ui_cpnt_button_fill_on_base_pressed + ",\n      " + theme.ui_cpnt_button_fill_on_base_pressed + "\n    )";
+    return !isSubmitting && theme.ui_cpnt_button_fill_on_base_pressed;
 }, function (_a) {
     var disabled = _a.disabled;
     return disabled && fillDisabled;
@@ -208,7 +266,7 @@ var lineDisabled = (0, styled_components_1.css)(templateObject_11 || (templateOb
         ? 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  ", ";\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  ", ";\n  ", "\n"])), function (_a) {
+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) {
@@ -217,9 +275,20 @@ var line = (0, styled_components_1.css)(templateObject_12 || (templateObject_12
 }, function (_a) {
     var theme = _a.theme, isSubmitting = _a.isSubmitting;
     return !isSubmitting && theme.ui_cpnt_button_line_base_pressed;
-}, function (_a) {
+}, transitionStyle_1.ButtonTransition, function (_a) {
     var colorTheme = _a.colorTheme;
-    return colorTheme && { none: none, line1: line1, line2: line2, line3: line3 }[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;
@@ -228,41 +297,64 @@ var primaryDisabled = (0, styled_components_1.css)(templateObject_13 || (templat
     var theme = _a.theme;
     return theme.ui_cpnt_button_fill_base_disabled;
 });
-var primary = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n\n  &:hover:not([disabled]) {\n    ", "\n  }\n\n  &:active:not([disabled]) {\n    ", "\n  }\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: none;\n\n  &:hover:not([disabled]) {\n    ", "\n  }\n\n  &:active:not([disabled]) {\n    ", "\n  }\n\n  ", "\n"])), function (_a) {
+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;
-}, function (_a) {
+}, transitionStyle_1.ButtonTransition, function (_a) {
     var theme = _a.theme, isSubmitting = _a.isSubmitting;
-    return !isSubmitting &&
-        "background-image: linear-gradient(\n    to top,\n    " + theme.ui_cpnt_button_fill_on_base_hover + ",\n    " + theme.ui_cpnt_button_fill_on_base_hover + "\n  );";
+    return !isSubmitting && theme.ui_cpnt_button_fill_on_base_hover;
 }, function (_a) {
     var theme = _a.theme, isSubmitting = _a.isSubmitting;
-    return !isSubmitting &&
-        "background-image: linear-gradient(\n    to top,\n    " + theme.ui_cpnt_button_fill_on_base_pressed + ",\n    " + theme.ui_cpnt_button_fill_on_base_pressed + "\n  );";
+    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 secondaryDisabled = (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+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_line_base_hover;
+    return theme.ui_cpnt_button_secondary_variation_base_default;
 });
-var secondary = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n\n  &:hover:not([disabled]) {\n    ", "\n  }\n\n  &:active:not([disabled]) {\n    ", "\n  }\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: none;\n\n  &:hover:not([disabled]) {\n    ", "\n  }\n\n  &:active:not([disabled]) {\n    ", "\n  }\n\n  ", "\n"])), function (_a) {
+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 &&
-        "background-image: linear-gradient(\n    to top,\n    " + theme.ui_cpnt_button_fill_on_base_hover + ",\n    " + theme.ui_cpnt_button_fill_on_base_hover + "\n  );";
+    return !isSubmitting && theme.ui_cpnt_button_secondary_on_base_hover;
 }, function (_a) {
     var theme = _a.theme, isSubmitting = _a.isSubmitting;
-    return !isSubmitting &&
-        "background-image: linear-gradient(\n    to top,\n    " + theme.ui_cpnt_button_fill_on_base_pressed + ",\n    " + theme.ui_cpnt_button_fill_on_base_pressed + "\n  );";
+    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_17 || (templateObject_17 = __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 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) {
@@ -285,7 +377,7 @@ var S_UploadMainButton = styled_components_1.default.label(templateObject_17 ||
     var responsiveMode = _a.responsiveMode;
     return responsiveMode === 'use' && 'width: 100%';
 });
-var S_LoadingUploadMainButton = (0, styled_components_1.default)(S_UploadMainButton)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.skeletonLoadingStyle);
-var S_SubmittingUploadMainButton = (0, styled_components_1.default)(S_UploadMainButton)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  cursor: default;\n"], ["\n  cursor: default;\n"])));
+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;
+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;

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

@@ -5,11 +5,6 @@ export declare const textStyles: {
     readonly small: "caption1Bold";
     readonly xsmall: "caption1Regular";
 };
-export declare const textThemeColorLines: {
-    readonly line1: "ui_cpnt_button_text_error";
-    readonly line2: "ui_cpnt_button_text_primary";
-    readonly line3: "ui_cpnt_button_text_darktheme_enabled";
-};
 export declare const iconFillTypeColors: {
     readonly fill: "ui_cpnt_button_icon_on_primary";
     readonly line: "ui_cpnt_button_icon_enabled";
@@ -18,8 +13,3 @@ export declare const iconStyleThemeColors: {
     readonly primary: "ui_cpnt_button_icon_on_primary";
     readonly secondary: "ui_cpnt_button_icon_primary";
 };
-export declare const iconColorThemeLineColors: {
-    readonly line1: "ui_cpnt_button_icon_error";
-    readonly line2: "ui_cpnt_button_icon_primary";
-    readonly line3: "ui_cpnt_button_icon_darktheme_enabled";
-};

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

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

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

@@ -28,6 +28,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
+var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
 var TextLabel_1 = require("../TextLabel");
 var textStyle = {
     rlarge: 'body1Bold',
@@ -61,13 +62,13 @@ var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 =
 var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 14px;\n  height: 40px;\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n"], ["\n  border-radius: 14px;\n  height: 40px;\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n"])));
 var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-radius: 10px;\n  height: 32px;\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"], ["\n  border-radius: 10px;\n  height: 32px;\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"])));
 var xsmall = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border-radius: 8px;\n  height: 24px;\n\n  & > div {\n    height: 24px;\n    line-height: 24px;\n  }\n"], ["\n  border-radius: 8px;\n  height: 24px;\n\n  & > div {\n    height: 24px;\n    line-height: 24px;\n  }\n"])));
-var S_UploadTextButton = styled_components_1.default.label(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n  padding: 0 ", ";\n\n  &:hover:not([disabled]) {\n    background-color: ", ";\n  }\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n\n  & > div {\n    font-weight: ", ";\n  }\n\n  ", ";\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n  padding: 0 ", ";\n\n  &:hover:not([disabled]) {\n    background-color: ", ";\n  }\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n\n  & > div {\n    font-weight: ", ";\n  }\n\n  ", ";\n  ", ";\n"])), function (_a) {
+var S_UploadTextButton = styled_components_1.default.label(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n  padding: 0 ", ";\n\n  ", "\n\n  &:hover:not([disabled]) {\n    background-color: ", ";\n  }\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n\n  & > div {\n    font-weight: ", ";\n  }\n\n  ", ";\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n  padding: 0 ", ";\n\n  ", "\n\n  &:hover:not([disabled]) {\n    background-color: ", ";\n  }\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n\n  & > div {\n    font-weight: ", ";\n  }\n\n  ", ";\n  ", ";\n"])), function (_a) {
     var disabled = _a.disabled;
     return (disabled ? 'default' : 'pointer');
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
-}, function (_a) {
+}, transitionStyle_1.ButtonTransition, function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_button_line_base_hover;
 }, function (_a) {

package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFA.js

@@ -29,6 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var components_1 = require("../../../../../../common/components");
+var scrollbarStyle_1 = require("../../../../../../common/styles/scroll/scrollbarStyle");
 var WFA = function (_a) {
     var content1 = _a.content1, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
     return (react_1.default.createElement(react_1.default.Fragment, null,
@@ -36,24 +37,20 @@ var WFA = function (_a) {
             react_1.default.createElement(S_ContentsArea, { "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFA", layoutType: layoutType, areaColor: areaColor },
                 react_1.default.createElement(S_Content1, { "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFA" }, content1)))))));
 };
-var scrollVisible = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    background-clip: padding-box;\n    border-radius: 5px;\n    border: 2px solid transparent;\n  }\n\n  ::-webkit-scrollbar-track {\n    margin-top: 24px;\n    margin-bottom: 24px;\n  }\n\n  ::-webkit-scrollbar {\n    display: block;\n    width: 10px;\n  }\n"], ["\n  ::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    background-clip: padding-box;\n    border-radius: 5px;\n    border: 2px solid transparent;\n  }\n\n  ::-webkit-scrollbar-track {\n    margin-top: 24px;\n    margin-bottom: 24px;\n  }\n\n  ::-webkit-scrollbar {\n    display: block;\n    width: 10px;\n  }\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_container_scroll;
-});
-var WFA_1AreaStyle = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 432px;\n"], ["\n  width: 432px;\n"])));
-var WFA_2AreaStyle = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 608px;\n"], ["\n  width: 608px;\n"])));
-var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+var WFA_1AreaStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 432px;\n"], ["\n  width: 432px;\n"])));
+var WFA_2AreaStyle = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 608px;\n"], ["\n  width: 608px;\n"])));
+var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var theme = _a.theme, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
     return overrideContainer1ColorKey && theme[overrideContainer1ColorKey];
 });
-var S_ContentsContainer = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  height: 60vh;\n  max-height: 640px;\n  justify-content: center;\n  width: 864px;\n  overflow-x: hidden;\n  overflow-y: overlay;\n  border-radius: 24px;\n  ", ";\n\n  ", "\n  ", "\n"], ["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  height: 60vh;\n  max-height: 640px;\n  justify-content: center;\n  width: 864px;\n  overflow-x: hidden;\n  overflow-y: overlay;\n  border-radius: 24px;\n  ", ";\n\n  ", "\n  ", "\n"])), function (_a) {
+var S_ContentsContainer = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  height: 60vh;\n  max-height: 640px;\n  justify-content: center;\n  width: 864px;\n  overflow-x: hidden;\n  overflow-y: overlay;\n  border-radius: 24px;\n  ", ";\n\n  ", "\n  ", "\n"], ["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  height: 60vh;\n  max-height: 640px;\n  justify-content: center;\n  width: 864px;\n  overflow-x: hidden;\n  overflow-y: overlay;\n  border-radius: 24px;\n  ", ";\n\n  ", "\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_wizard_contentscontainer01_background;
 }, function (_a) {
     var containerColor = _a.containerColor;
     return "background-color: " + containerColor;
-}, scrollVisible, overrideStyleContainer1);
-var S_ContentsArea = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-top: 80px;\n  padding-bottom: 88px;\n\n  ", ";\n  ", ";\n"], ["\n  box-sizing: border-box;\n  padding-top: 80px;\n  padding-bottom: 88px;\n\n  ", ";\n  ", ";\n"])), function (_a) {
+}, scrollbarStyle_1.scrollbarWithPaddingStyle, overrideStyleContainer1);
+var S_ContentsArea = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-top: 64px;\n  padding-bottom: 64px;\n\n  ", ";\n  ", ";\n"], ["\n  box-sizing: border-box;\n  padding-top: 64px;\n  padding-bottom: 64px;\n\n  ", ";\n  ", ";\n"])), function (_a) {
     var layoutType = _a.layoutType;
     return ({
         WFA_1: WFA_1AreaStyle,
@@ -63,6 +60,6 @@ var S_ContentsArea = styled_components_1.default.div(templateObject_6 || (templa
     var areaColor = _a.areaColor;
     return "background-color: " + areaColor;
 });
-var S_Content1 = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
+var S_Content1 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
 exports.default = WFA;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFB.js

@@ -29,6 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var components_1 = require("../../../../../../common/components");
+var scrollbarStyle_1 = require("../../../../../../common/styles/scroll/scrollbarStyle");
 var WFB = function (_a) {
     var content1 = _a.content1, content2 = _a.content2, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
     return (react_1.default.createElement(S_ContentsContainer, { "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFB", containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(react_1.default.Fragment, null,
@@ -36,26 +37,22 @@ var WFB = function (_a) {
             react_1.default.createElement(S_Content1, { "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFB" }, content1),
             react_1.default.createElement(S_Content2, { "x-pds-name": "Content2", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFB" }, content2))))));
 };
-var scrollVisible = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    background-clip: padding-box;\n    border-radius: 5px;\n    border: 2px solid transparent;\n  }\n\n  ::-webkit-scrollbar-track {\n    margin-top: 24px;\n    margin-bottom: 24px;\n  }\n\n  ::-webkit-scrollbar {\n    display: block;\n    width: 10px;\n  }\n"], ["\n  ::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    background-clip: padding-box;\n    border-radius: 5px;\n    border: 2px solid transparent;\n  }\n\n  ::-webkit-scrollbar-track {\n    margin-top: 24px;\n    margin-bottom: 24px;\n  }\n\n  ::-webkit-scrollbar {\n    display: block;\n    width: 10px;\n  }\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_container_scroll;
-});
-var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var theme = _a.theme, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
     return overrideContainer1ColorKey && theme[overrideContainer1ColorKey];
 });
-var S_ContentsContainer = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  height: 60vh;\n  max-height: 640px;\n  justify-content: center;\n  width: 864px;\n  overflow-x: hidden;\n  overflow-y: overlay;\n  border-radius: 24px;\n  ", ";\n\n  ", "\n  ", "\n"], ["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  height: 60vh;\n  max-height: 640px;\n  justify-content: center;\n  width: 864px;\n  overflow-x: hidden;\n  overflow-y: overlay;\n  border-radius: 24px;\n  ", ";\n\n  ", "\n  ", "\n"])), function (_a) {
+var S_ContentsContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  height: 60vh;\n  max-height: 640px;\n  justify-content: center;\n  width: 864px;\n  overflow-x: hidden;\n  overflow-y: overlay;\n  border-radius: 24px;\n  ", ";\n\n  ", "\n  ", "\n"], ["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  height: 60vh;\n  max-height: 640px;\n  justify-content: center;\n  width: 864px;\n  overflow-x: hidden;\n  overflow-y: overlay;\n  border-radius: 24px;\n  ", ";\n\n  ", "\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_wizard_contentscontainer01_background;
 }, function (_a) {
     var containerColor = _a.containerColor;
     return "background-color: " + containerColor;
-}, scrollVisible, overrideStyleContainer1);
-var S_ContentsArea = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  margin: 0 48px;\n  padding-top: 80px;\n  padding-bottom: 88px;\n  width: 100%;\n  ", ";\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  margin: 0 48px;\n  padding-top: 80px;\n  padding-bottom: 88px;\n  width: 100%;\n  ", ";\n"])), function (_a) {
+}, scrollbarStyle_1.scrollbarWithPaddingStyle, overrideStyleContainer1);
+var S_ContentsArea = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  margin: 0 48px;\n  padding-top: 64px;\n  padding-bottom: 64px;\n  width: 100%;\n  ", ";\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  margin: 0 48px;\n  padding-top: 64px;\n  padding-bottom: 64px;\n  width: 100%;\n  ", ";\n"])), function (_a) {
     var areaColor = _a.areaColor;
     return "background-color: " + areaColor;
 });
-var S_Content1 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 360px;\n"], ["\n  width: 360px;\n"])));
-var S_Content2 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin-left: 48px;\n  width: 360px;\n"], ["\n  margin-left: 48px;\n  width: 360px;\n"])));
+var S_Content1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 360px;\n"], ["\n  width: 360px;\n"])));
+var S_Content2 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-left: 48px;\n  width: 360px;\n"], ["\n  margin-left: 48px;\n  width: 360px;\n"])));
 exports.default = WFB;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFE.js

@@ -29,31 +29,28 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var components_1 = require("../../../../../../common/components");
+var scrollbarStyle_1 = require("../../../../../../common/styles/scroll/scrollbarStyle");
 var WFE = function (_a) {
     var layoutType = _a.layoutType, content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
     return (react_1.default.createElement(S_ContentsContainer, { "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFE", layoutType: layoutType, containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(S_ContentsArea, { "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFE", layoutType: layoutType, areaColor: areaColor },
             react_1.default.createElement(S_Content1, { "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFE", layoutType: layoutType }, content1))))));
 };
-var scrollVisible = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    background-clip: padding-box;\n    border-radius: 5px;\n    border: 2px solid transparent;\n  }\n\n  ::-webkit-scrollbar-track {\n    margin-top: 24px;\n    margin-bottom: 24px;\n  }\n\n  ::-webkit-scrollbar {\n    display: block;\n    width: 10px;\n  }\n"], ["\n  ::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    background-clip: padding-box;\n    border-radius: 5px;\n    border: 2px solid transparent;\n  }\n\n  ::-webkit-scrollbar-track {\n    margin-top: 24px;\n    margin-bottom: 24px;\n  }\n\n  ::-webkit-scrollbar {\n    display: block;\n    width: 10px;\n  }\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_container_scroll;
-});
-var WFE_1ContainerStyle = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  overflow: hidden;\n  border-radius: 24px;\n  width: 864px;\n"], ["\n  overflow: hidden;\n  border-radius: 24px;\n  width: 864px;\n"])));
-var WFE_2ContainerStyle = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  overflow-x: hidden;\n  overflow-y: auto;\n  border-radius: 24px;\n  width: 864px;\n"], ["\n  overflow-x: hidden;\n  overflow-y: auto;\n  border-radius: 24px;\n  width: 864px;\n"])));
-var WFE_3ContainerStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  overflow: hidden;\n  border-radius: 24px;\n  width: 1152px;\n"], ["\n  overflow: hidden;\n  border-radius: 24px;\n  width: 1152px;\n"])));
-var WFE_4ContainerStyle = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  overflow-x: hidden;\n  overflow-y: auto;\n  border-radius: 24px;\n  width: 1152px;\n"], ["\n  overflow-x: hidden;\n  overflow-y: auto;\n  border-radius: 24px;\n  width: 1152px;\n"])));
-var WFE_1AreaStyle = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  height: 100%;\n"], ["\n  height: 100%;\n"])));
-var WFE_2AreaStyle = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-top: 24px;\n  padding-bottom: 88px;\n"], ["\n  box-sizing: border-box;\n  padding-top: 24px;\n  padding-bottom: 88px;\n"])));
-var WFE_3AreaStyle = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  height: 100%;\n"], ["\n  height: 100%;\n"])));
-var WFE_4AreaStyle = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-top: 24px;\n  padding-bottom: 88px;\n"], ["\n  box-sizing: border-box;\n  padding-top: 24px;\n  padding-bottom: 88px;\n"])));
-var WFE_1Content1Style = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  height: 100%;\n  overflow: hidden;\n"], ["\n  height: 100%;\n  overflow: hidden;\n"])));
-var WFE_3Content1Style = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  height: 100%;\n  overflow: hidden;\n"], ["\n  height: 100%;\n  overflow: hidden;\n"])));
-var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+var WFE_1ContainerStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  overflow: hidden;\n  border-radius: 24px;\n  width: 864px;\n"], ["\n  overflow: hidden;\n  border-radius: 24px;\n  width: 864px;\n"])));
+var WFE_2ContainerStyle = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  overflow-x: hidden;\n  overflow-y: auto;\n  border-radius: 24px;\n  width: 864px;\n"], ["\n  overflow-x: hidden;\n  overflow-y: auto;\n  border-radius: 24px;\n  width: 864px;\n"])));
+var WFE_3ContainerStyle = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  overflow: hidden;\n  border-radius: 24px;\n  width: 1152px;\n"], ["\n  overflow: hidden;\n  border-radius: 24px;\n  width: 1152px;\n"])));
+var WFE_4ContainerStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  overflow-x: hidden;\n  overflow-y: auto;\n  border-radius: 24px;\n  width: 1152px;\n"], ["\n  overflow-x: hidden;\n  overflow-y: auto;\n  border-radius: 24px;\n  width: 1152px;\n"])));
+var WFE_1AreaStyle = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: 100%;\n"], ["\n  height: 100%;\n"])));
+var WFE_2AreaStyle = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-top: 24px;\n"], ["\n  box-sizing: border-box;\n  padding-top: 24px;\n"])));
+var WFE_3AreaStyle = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  height: 100%;\n"], ["\n  height: 100%;\n"])));
+var WFE_4AreaStyle = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-top: 24px;\n"], ["\n  box-sizing: border-box;\n  padding-top: 24px;\n"])));
+var WFE_1Content1Style = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  height: 100%;\n  overflow: hidden;\n"], ["\n  height: 100%;\n  overflow: hidden;\n"])));
+var WFE_3Content1Style = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  height: 100%;\n  overflow: hidden;\n"], ["\n  height: 100%;\n  overflow: hidden;\n"])));
+var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var theme = _a.theme, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
     return overrideContainer1ColorKey && theme[overrideContainer1ColorKey];
 });
-var S_ContentsContainer = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  justify-content: center;\n  height: 60vh;\n  max-height: 640px;\n\n  ", ";\n  ", ";\n\n  ", "\n  ", "\n"], ["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  justify-content: center;\n  height: 60vh;\n  max-height: 640px;\n\n  ", ";\n  ", ";\n\n  ", "\n  ", "\n"])), function (_a) {
+var S_ContentsContainer = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  justify-content: center;\n  height: 60vh;\n  max-height: 640px;\n\n  ", ";\n  ", ";\n\n  ", "\n  ", "\n"], ["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  justify-content: center;\n  height: 60vh;\n  max-height: 640px;\n\n  ", ";\n  ", ";\n\n  ", "\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_wizard_contentscontainer01_background;
 }, function (_a) {
@@ -67,8 +64,8 @@ var S_ContentsContainer = styled_components_1.default.div(templateObject_13 || (
 }, function (_a) {
     var containerColor = _a.containerColor;
     return "background-color: " + containerColor;
-}, scrollVisible, overrideStyleContainer1);
-var S_ContentsArea = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  box-sizing: border-box;\n  width: 100%;\n\n  ", ";\n  ", ";\n"], ["\n  box-sizing: border-box;\n  width: 100%;\n\n  ", ";\n  ", ";\n"])), function (_a) {
+}, scrollbarStyle_1.scrollbarWithPaddingStyle, overrideStyleContainer1);
+var S_ContentsArea = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  box-sizing: border-box;\n  width: 100%;\n\n  ", ";\n  ", ";\n"], ["\n  box-sizing: border-box;\n  width: 100%;\n\n  ", ";\n  ", ";\n"])), function (_a) {
     var layoutType = _a.layoutType;
     return ({
         WFE_1: WFE_1AreaStyle,
@@ -80,7 +77,7 @@ var S_ContentsArea = styled_components_1.default.div(templateObject_14 || (templ
     var areaColor = _a.areaColor;
     return "background-color: " + areaColor;
 });
-var S_Content1 = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
+var S_Content1 = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
     var layoutType = _a.layoutType;
     return ({
         WFE_1: WFE_1Content1Style,
@@ -90,4 +87,4 @@ var S_Content1 = styled_components_1.default.div(templateObject_15 || (templateO
     }[layoutType]);
 });
 exports.default = WFE;
-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;
+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;