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

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

@@ -3,32 +3,14 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
-var styled_components_1 = __importStar(require("styled-components"));
+var styled_components_1 = __importDefault(require("styled-components"));
 var components_1 = require("../../../../../../common/components");
+var scrollbarStyle_1 = require("../../../../../../common/styles/scroll/scrollbarStyle");
 var WFL = function (_a) {
     var content1 = _a.content1, content2 = _a.content2, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2, overrideContainer1ColorKey = _a.overrideContainer1ColorKey, overrideContainer2ColorKey = _a.overrideContainer2ColorKey;
     return (react_1.default.createElement(S_Box, null,
@@ -37,34 +19,30 @@ var WFL = function (_a) {
         react_1.default.createElement(S_ContentsContainer2, { "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFL", containerColor: containerColor, overrideContainer2ColorKey: overrideContainer2ColorKey }, isLoadingContainer2 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea2, { "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFL", areaColor: areaColor },
             react_1.default.createElement(S_Content2, { "x-pds-name": "Content2", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WFL" }, 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 {\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 {\n    display: block;\n    width: 10px;\n  }\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_container_scroll;
-});
-var S_Box = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  height: 60vh;\n  max-height: 640px;\n"], ["\n  display: flex;\n  height: 60vh;\n  max-height: 640px;\n"])));
-var S_ContentsContainer1 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  width: 480px;\n  box-sizing: border-box;\n  padding: 0 24px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  border-radius: 24px 0 0 24px;\n\n  ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  width: 480px;\n  box-sizing: border-box;\n  padding: 0 24px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  border-radius: 24px 0 0 24px;\n\n  ", ";\n\n  ", "\n"])), function (_a) {
+var S_Box = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  height: 60vh;\n  max-height: 640px;\n"], ["\n  display: flex;\n  height: 60vh;\n  max-height: 640px;\n"])));
+var S_ContentsContainer1 = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  width: 480px;\n  box-sizing: border-box;\n  padding: 0 48px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  border-radius: 24px 0 0 24px;\n\n  ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  width: 480px;\n  box-sizing: border-box;\n  padding: 0 48px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  border-radius: 24px 0 0 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);
-var S_ContentsContainer2 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 100%;\n  width: 672px;\n  border-radius: 0 24px 24px 0;\n  overflow: hidden;\n\n  ", ";\n"], ["\n  background-color: ", ";\n  height: 100%;\n  width: 672px;\n  border-radius: 0 24px 24px 0;\n  overflow: hidden;\n\n  ", ";\n"])), function (_a) {
+}, scrollbarStyle_1.scrollbarStyle);
+var S_ContentsContainer2 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 100%;\n  width: 672px;\n  border-radius: 0 24px 24px 0;\n  overflow: hidden;\n\n  ", ";\n"], ["\n  background-color: ", ";\n  height: 100%;\n  width: 672px;\n  border-radius: 0 24px 24px 0;\n  overflow: hidden;\n\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_wizard_contentscontainer02_background;
 }, function (_a) {
     var containerColor = _a.containerColor;
     return "background-color: " + containerColor;
 });
-var S_ContentsArea1 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-bottom: 88px;\n\n  ", ";\n"], ["\n  box-sizing: border-box;\n  padding-bottom: 88px;\n\n  ", ";\n"])), function (_a) {
+var S_ContentsArea1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-bottom: 64px;\n\n  ", ";\n"], ["\n  box-sizing: border-box;\n  padding-bottom: 64px;\n\n  ", ";\n"])), function (_a) {
     var areaColor = _a.areaColor;
     return "background-color: " + areaColor;
 });
-var S_ContentsArea2 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  height: 100%;\n\n  ", ";\n"], ["\n  height: 100%;\n\n  ", ";\n"])), function (_a) {
+var S_ContentsArea2 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: 100%;\n\n  ", ";\n"], ["\n  height: 100%;\n\n  ", ";\n"])), function (_a) {
     var areaColor = _a.areaColor;
     return "background-color: " + areaColor;
 });
-var S_Content1 = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
-var S_Content2 = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  height: 100%;\n  overflow: hidden;\n"], ["\n  height: 100%;\n  overflow: hidden;\n"])));
+var S_Content1 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
+var S_Content2 = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  height: 100%;\n  overflow: hidden;\n"], ["\n  height: 100%;\n  overflow: hidden;\n"])));
 exports.default = WFL;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/src/desktop/layout/LayoutWS/Containers/ContentsContainer/variation/WSA.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 WSA = function (_a) {
     var 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": "WSA", containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, 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": "WSA", areaColor: areaColor },
@@ -38,13 +39,13 @@ var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_1 || (
     var theme = _a.theme, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
     return overrideContainer1ColorKey && theme[overrideContainer1ColorKey];
 });
-var S_ContentsContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  padding-left: 24px;\n  padding-right: 24px;\n  ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  padding-left: 24px;\n  padding-right: 24px;\n  ", ";\n\n  ", "\n"])), function (_a) {
+var S_ContentsContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  padding-left: 24px;\n  padding-right: 24px;\n  ", ";\n\n  ", "\n  ", "\n"], ["\n  background-color: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  padding-left: 24px;\n  padding-right: 24px;\n  ", ";\n\n  ", "\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_contentscontainer01_background;
 }, function (_a) {
     var containerColor = _a.containerColor;
     return "background-color: " + containerColor;
-}, overrideStyleContainer1);
+}, scrollbarStyle_1.scrollbarStyle, overrideStyleContainer1);
 var S_ContentsArea = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  box-sizing: border-box;\n  min-width: 912px;\n  padding-bottom: 88px;\n  padding-top: 24px;\n  ", ";\n"], ["\n  box-sizing: border-box;\n  min-width: 912px;\n  padding-bottom: 88px;\n  padding-top: 24px;\n  ", ";\n"])), function (_a) {
     var areaColor = _a.areaColor;
     return "background-color: " + areaColor;

package/dist/src/desktop/layout/LayoutWS/Containers/ContentsContainer/variation/WSD.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 WSD = function (_a) {
     var 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": "WSD", containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, 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": "WSD", areaColor: areaColor },
@@ -38,13 +39,13 @@ var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_1 || (
     var theme = _a.theme, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
     return overrideContainer1ColorKey && theme[overrideContainer1ColorKey];
 });
-var S_ContentsContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  padding-left: 24px;\n  ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  padding-left: 24px;\n  ", ";\n\n  ", "\n"])), function (_a) {
+var S_ContentsContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  padding-left: 24px;\n  ", ";\n\n  ", "\n  ", "\n"], ["\n  background-color: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  padding-left: 24px;\n  ", ";\n\n  ", "\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_contentscontainer01_background;
 }, function (_a) {
     var containerColor = _a.containerColor;
     return "background-color: " + containerColor;
-}, overrideStyleContainer1);
+}, scrollbarStyle_1.scrollbarStyle, overrideStyleContainer1);
 var S_ContentsArea = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  box-sizing: border-box;\n  max-width: 720px;\n  min-width: 512px;\n  padding-bottom: 88px;\n  padding-top: 24px;\n  width: 53%;\n  ", ";\n"], ["\n  box-sizing: border-box;\n  max-width: 720px;\n  min-width: 512px;\n  padding-bottom: 88px;\n  padding-top: 24px;\n  width: 53%;\n  ", ";\n"])), function (_a) {
     var areaColor = _a.areaColor;
     return "background-color: " + areaColor;

package/dist/src/desktop/layout/LayoutWS/Containers/ContentsContainer/variation/WSE.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 WSE = 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": "WSE", containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, 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": "WSE", areaColor: areaColor },
@@ -39,13 +40,13 @@ var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_1 || (
     var theme = _a.theme, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
     return overrideContainer1ColorKey && theme[overrideContainer1ColorKey];
 });
-var S_ContentsContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  padding-left: 24px;\n  padding-right: 24px;\n  ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  padding-left: 24px;\n  padding-right: 24px;\n  ", ";\n\n  ", "\n"])), function (_a) {
+var S_ContentsContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  padding-left: 24px;\n  padding-right: 24px;\n  ", ";\n\n  ", "\n  ", "\n"], ["\n  background-color: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  padding-left: 24px;\n  padding-right: 24px;\n  ", ";\n\n  ", "\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_contentscontainer01_background;
 }, function (_a) {
     var containerColor = _a.containerColor;
     return "background-color: " + containerColor;
-}, overrideStyleContainer1);
+}, scrollbarStyle_1.scrollbarStyle, overrideStyleContainer1);
 var S_ContentsArea = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  padding-bottom: 88px;\n  padding-top: 24px;\n  ", ";\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  padding-bottom: 88px;\n  padding-top: 24px;\n  ", ";\n"])), function (_a) {
     var areaColor = _a.areaColor;
     return "background-color: " + areaColor;

package/dist/src/desktop/layout/LayoutWS/Containers/ContentsContainer/variation/WSF.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 WSF = function (_a) {
     var content1 = _a.content1, content2 = _a.content2, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2, overrideContainer1ColorKey = _a.overrideContainer1ColorKey, overrideContainer2ColorKey = _a.overrideContainer2ColorKey;
     return (react_1.default.createElement(S_Box, null,
@@ -46,7 +47,7 @@ var overrideStyleContainer2 = (0, styled_components_1.css)(templateObject_2 || (
     return overrideContainer2ColorKey && theme[overrideContainer2ColorKey];
 });
 var S_Box = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  height: 100%;\n"], ["\n  display: flex;\n  height: 100%;\n"])));
-var S_ContentsContainer1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: ", ";\n  min-width: 480px;\n  width: 50%;\n  ", ";\n  ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  min-width: 480px;\n  width: 50%;\n  ", ";\n  ", ";\n\n  ", "\n"])), function (_a) {
+var S_ContentsContainer1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: ", ";\n  min-width: 480px;\n  width: 50%;\n  ", ";\n  ", ";\n\n  ", "\n  ", "\n"], ["\n  background-color: ", ";\n  min-width: 480px;\n  width: 50%;\n  ", ";\n  ", ";\n\n  ", "\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_contentscontainer01_background;
 }, function (_a) {
@@ -63,8 +64,8 @@ var S_ContentsContainer1 = styled_components_1.default.div(templateObject_4 || (
 }, function (_a) {
     var containerColor = _a.containerColor;
     return "background-color: " + containerColor;
-}, overrideStyleContainer1);
-var S_ContentsContainer2 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  border-left: 1px solid ", ";\n  flex-grow: 1;\n  min-width: 480px;\n  ", ";\n  ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  border-left: 1px solid ", ";\n  flex-grow: 1;\n  min-width: 480px;\n  ", ";\n  ", ";\n\n  ", "\n"])), function (_a) {
+}, scrollbarStyle_1.scrollbarStyle, overrideStyleContainer1);
+var S_ContentsContainer2 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  border-left: 1px solid ", ";\n  flex-grow: 1;\n  min-width: 480px;\n  ", ";\n  ", ";\n\n  ", "\n  ", "\n"], ["\n  background-color: ", ";\n  border-left: 1px solid ", ";\n  flex-grow: 1;\n  min-width: 480px;\n  ", ";\n  ", ";\n\n  ", "\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_contentscontainer02_background;
 }, function (_a) {
@@ -84,7 +85,7 @@ var S_ContentsContainer2 = styled_components_1.default.div(templateObject_5 || (
 }, function (_a) {
     var containerColor = _a.containerColor;
     return "background-color: " + containerColor;
-}, overrideStyleContainer2);
+}, scrollbarStyle_1.scrollbarStyle, overrideStyleContainer2);
 var S_ContentsArea1 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-top: 24px;\n  ", ";\n  ", ";\n"], ["\n  box-sizing: border-box;\n  padding-top: 24px;\n  ", ";\n  ", ";\n"])), function (_a) {
     var layoutType = _a.layoutType;
     return ({

package/dist/src/desktop/layout/LayoutWS/Containers/ContentsContainer/variation/WSG.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 WSG = function (_a) {
     var content1 = _a.content1, content2 = _a.content2, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2, overrideContainer1ColorKey = _a.overrideContainer1ColorKey, overrideContainer2ColorKey = _a.overrideContainer2ColorKey;
     return (react_1.default.createElement(S_Box, null,
@@ -46,7 +47,7 @@ var overrideStyleContainer2 = (0, styled_components_1.css)(templateObject_2 || (
     return overrideContainer2ColorKey && theme[overrideContainer2ColorKey];
 });
 var S_Box = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  height: 100%;\n"], ["\n  display: flex;\n  height: 100%;\n"])));
-var S_ContentsContainer1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: ", ";\n  min-width: 480px;\n  width: 50%;\n  ", ";\n  ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  min-width: 480px;\n  width: 50%;\n  ", ";\n  ", ";\n\n  ", "\n"])), function (_a) {
+var S_ContentsContainer1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: ", ";\n  min-width: 480px;\n  width: 50%;\n  ", ";\n  ", ";\n\n  ", "\n  ", "\n"], ["\n  background-color: ", ";\n  min-width: 480px;\n  width: 50%;\n  ", ";\n  ", ";\n\n  ", "\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_contentscontainer01_background;
 }, function (_a) {
@@ -61,8 +62,8 @@ var S_ContentsContainer1 = styled_components_1.default.div(templateObject_4 || (
 }, function (_a) {
     var containerColor = _a.containerColor;
     return "background-color: " + containerColor;
-}, overrideStyleContainer1);
-var S_ContentsContainer2 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  border-left: 1px solid ", ";\n  min-width: 480px;\n  width: 50%;\n  ", ";\n  ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  border-left: 1px solid ", ";\n  min-width: 480px;\n  width: 50%;\n  ", ";\n  ", ";\n\n  ", "\n"])), function (_a) {
+}, scrollbarStyle_1.scrollbarStyle, overrideStyleContainer1);
+var S_ContentsContainer2 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  border-left: 1px solid ", ";\n  min-width: 480px;\n  width: 50%;\n  ", ";\n  ", ";\n\n  ", "\n  ", "\n"], ["\n  background-color: ", ";\n  border-left: 1px solid ", ";\n  min-width: 480px;\n  width: 50%;\n  ", ";\n  ", ";\n\n  ", "\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_contentscontainer02_background;
 }, function (_a) {
@@ -80,7 +81,7 @@ var S_ContentsContainer2 = styled_components_1.default.div(templateObject_5 || (
 }, function (_a) {
     var containerColor = _a.containerColor;
     return "background-color: " + containerColor;
-}, overrideStyleContainer2);
+}, scrollbarStyle_1.scrollbarStyle, overrideStyleContainer2);
 var S_ContentsArea1 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-top: 24px;\n  ", ";\n  ", ";\n"], ["\n  box-sizing: border-box;\n  padding-top: 24px;\n  ", ";\n  ", ";\n"])), function (_a) {
     var layoutType = _a.layoutType;
     return ({

package/dist/src/desktop/panels/DesktopBasicModal/DesktopBasicModal.d.ts

@@ -4,7 +4,7 @@ declare type DesktopBasicModalProps = {
     titleText: PDSTextType;
     contentText?: PDSTextType;
     bodySpacingMode?: 'none' | 'use';
-    bodyOverflowType?: 'auto' | 'visible';
+    bodyOverflowType?: 'auto' | 'visible' | 'overlay';
     btnMode?: 'mbtn_amount1' | 'mbtn_amount2' | 'mbtn_amount3';
     mBtn1Text: PDSTextType;
     mBtn2Text?: PDSTextType;
@@ -16,10 +16,11 @@ declare type DesktopBasicModalProps = {
     mBtn2Type?: 'button' | 'submit';
     mBtn3Type?: 'button' | 'submit';
     size?: 'large' | 'medium' | 'small' | 'rlarge';
+    scrollVisibleType?: 'hidden' | 'visible';
     onClickMBtn1?: () => void;
     onClickMBtn2?: () => void;
     onClickMBtn3?: () => void;
     children?: React.ReactNode;
 };
-declare function DesktopBasicModal({ titleText, contentText, bodySpacingMode, bodyOverflowType, btnMode, mBtn1Text, mBtn2Text, mBtn3Text, mBtn1State, mBtn2State, mBtn3State, mBtn1Type, mBtn2Type, mBtn3Type, onClickMBtn1, onClickMBtn2, onClickMBtn3, size, children }: DesktopBasicModalProps): React.ReactPortal;
+declare function DesktopBasicModal({ titleText, contentText, bodySpacingMode, bodyOverflowType, btnMode, mBtn1Text, mBtn2Text, mBtn3Text, mBtn1State, mBtn2State, mBtn3State, mBtn1Type, mBtn2Type, mBtn3Type, onClickMBtn1, onClickMBtn2, onClickMBtn3, size, scrollVisibleType, children }: DesktopBasicModalProps): React.ReactPortal;
 export default DesktopBasicModal;

package/dist/src/desktop/panels/DesktopBasicModal/DesktopBasicModal.js

@@ -29,10 +29,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var react_dom_1 = __importDefault(require("react-dom"));
 var styled_components_1 = __importStar(require("styled-components"));
-var hybrid_1 = require("../../../hybrid");
+var animationStyle_1 = require("../../../common/styles/movement/animationStyle");
+var scrollbarStyle_1 = require("../../../common/styles/scroll/scrollbarStyle");
 var components_1 = require("../../components");
 function DesktopBasicModal(_a) {
-    var titleText = _a.titleText, contentText = _a.contentText, _b = _a.bodySpacingMode, bodySpacingMode = _b === void 0 ? 'use' : _b, _c = _a.bodyOverflowType, bodyOverflowType = _c === void 0 ? 'auto' : _c, _d = _a.btnMode, btnMode = _d === void 0 ? 'mbtn_amount2' : _d, mBtn1Text = _a.mBtn1Text, mBtn2Text = _a.mBtn2Text, mBtn3Text = _a.mBtn3Text, _e = _a.mBtn1State, mBtn1State = _e === void 0 ? 'normal' : _e, _f = _a.mBtn2State, mBtn2State = _f === void 0 ? 'normal' : _f, _g = _a.mBtn3State, mBtn3State = _g === void 0 ? 'normal' : _g, _h = _a.mBtn1Type, mBtn1Type = _h === void 0 ? 'button' : _h, _j = _a.mBtn2Type, mBtn2Type = _j === void 0 ? 'button' : _j, _k = _a.mBtn3Type, mBtn3Type = _k === void 0 ? 'button' : _k, onClickMBtn1 = _a.onClickMBtn1, onClickMBtn2 = _a.onClickMBtn2, onClickMBtn3 = _a.onClickMBtn3, _l = _a.size, size = _l === void 0 ? 'large' : _l, children = _a.children;
+    var titleText = _a.titleText, contentText = _a.contentText, _b = _a.bodySpacingMode, bodySpacingMode = _b === void 0 ? 'use' : _b, _c = _a.bodyOverflowType, bodyOverflowType = _c === void 0 ? 'overlay' : _c, _d = _a.btnMode, btnMode = _d === void 0 ? 'mbtn_amount2' : _d, mBtn1Text = _a.mBtn1Text, mBtn2Text = _a.mBtn2Text, mBtn3Text = _a.mBtn3Text, _e = _a.mBtn1State, mBtn1State = _e === void 0 ? 'normal' : _e, _f = _a.mBtn2State, mBtn2State = _f === void 0 ? 'normal' : _f, _g = _a.mBtn3State, mBtn3State = _g === void 0 ? 'normal' : _g, _h = _a.mBtn1Type, mBtn1Type = _h === void 0 ? 'button' : _h, _j = _a.mBtn2Type, mBtn2Type = _j === void 0 ? 'button' : _j, _k = _a.mBtn3Type, mBtn3Type = _k === void 0 ? 'button' : _k, onClickMBtn1 = _a.onClickMBtn1, onClickMBtn2 = _a.onClickMBtn2, onClickMBtn3 = _a.onClickMBtn3, _l = _a.size, size = _l === void 0 ? 'large' : _l, _m = _a.scrollVisibleType, scrollVisibleType = _m === void 0 ? 'visible' : _m, children = _a.children;
     var container = (0, react_1.useState)(function () {
         var modalRoot = document.createElement('div');
         modalRoot.setAttribute('id', 'DesktopBasicModal');
@@ -56,21 +57,22 @@ function DesktopBasicModal(_a) {
         react_1.default.createElement(S_ModalWrapper, { "x-pds-name": "DesktopBasicModal", "x-pds-element-type": "panel", "x-pds-device-type": "desktop", size: size },
             react_1.default.createElement(S_Header, null,
                 react_1.default.createElement(components_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "headingBold" })),
-            react_1.default.createElement(S_Body, { bodySpacingMode: bodySpacingMode, bodyOverflowType: bodyOverflowType },
+            react_1.default.createElement(S_Body, { bodySpacingMode: bodySpacingMode, bodyOverflowType: bodyOverflowType, scrollVisibleType: scrollVisibleType },
                 contentText && (react_1.default.createElement(components_1.TextLabel, { text: contentText, colorTheme: "sysTextSecondary", styleTheme: "subTitleRegular" })),
                 children && children),
-            react_1.default.createElement(hybrid_1.Divider, null),
             react_1.default.createElement(S_Footer, null,
                 react_1.default.createElement(S_Left, null, btn3Mode.includes(btnMode) && mBtn3Text && (react_1.default.createElement(components_1.MainButton, { styleTheme: "secondary", text: mBtn3Text, state: mBtn3State, type: mBtn3Type, size: "medium", onClick: onClickMBtn3 }))),
                 react_1.default.createElement(S_Right, null,
                     react_1.default.createElement(S_Btn2Wrapper, null, btn2Mode.includes(btnMode) && mBtn2Text && (react_1.default.createElement(components_1.MainButton, { styleTheme: "secondary", text: mBtn2Text, state: mBtn2State, type: mBtn2Type, size: "medium", onClick: onClickMBtn2 }))),
                     btn1Mode.includes(btnMode) && mBtn1Text && (react_1.default.createElement(components_1.MainButton, { text: mBtn1Text, state: mBtn1State, type: mBtn1Type, size: "medium", onClick: onClickMBtn1 })))))), container);
 }
-var S_ModalOverlay = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n"], ["\n  background-color: ", ";\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n"])), function (_a) {
+var scrollInvisible = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ::-webkit-scrollbar {\n    display: none;\n  }\n"], ["\n  ::-webkit-scrollbar {\n    display: none;\n  }\n"])));
+var S_ModalOverlay = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n\n  ", "\n"], ["\n  background-color: ", ";\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_modal_dimmed;
-});
-var S_ModalWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  left: 50%;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: ", ";\n  ", ";\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  left: 50%;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: ", ";\n  ", ";\n"])), function (_a) {
+}, animationStyle_1.modalOverlayOnAni);
+var rlarge = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  min-width: 960px;\n  max-width: 1400px;\n"], ["\n  min-width: 960px;\n  max-width: 1400px;\n"])));
+var S_ModalWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  left: 50%;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: ", ";\n  ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  left: 50%;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: ", ";\n  ", ";\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_modal_base;
 }, function (_a) {
@@ -85,23 +87,23 @@ var S_ModalWrapper = styled_components_1.default.div(templateObject_2 || (templa
         large: '960px',
         medium: '688px',
         small: '400px',
-        rlarge: '60vw'
+        rlarge: '80vw'
     };
     return size && sizes[size];
 }, function (_a) {
     var size = _a.size;
-    return size === 'rlarge' && 'min-width: 960px;';
-});
-var S_Left = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-right: ", ";\n"], ["\n  margin-right: ", ";\n"])), function (_a) {
+    return size === 'rlarge' && rlarge;
+}, animationStyle_1.modalOnAni);
+var S_Left = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-right: ", ";\n"], ["\n  margin-right: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
 });
-var S_Btn2Wrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-right: ", ";\n"], ["\n  margin-right: ", ";\n"])), function (_a) {
+var S_Btn2Wrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin-right: ", ";\n"], ["\n  margin-right: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
 });
-var S_Right = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
-var S_Header = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-top: ", ";\n"], ["\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-top: ", ";\n"])), function (_a) {
+var S_Right = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+var S_Header = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-top: ", ";\n"], ["\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-top: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingE;
 }, function (_a) {
@@ -114,7 +116,7 @@ var S_Header = styled_components_1.default.div(templateObject_6 || (templateObje
     var theme = _a.theme;
     return theme.spacing.spacingE;
 });
-var S_Body = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  flex: 1;\n  max-height: 50vh;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n  overflow: ", ";\n\n  ", "\n"], ["\n  flex: 1;\n  max-height: 50vh;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n  overflow: ", ";\n\n  ", "\n"])), function (_a) {
+var S_Body = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  flex: 1;\n  max-height: 60vh;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n  overflow: ", ";\n\n  ", "\n\n  ", "\n"], ["\n  flex: 1;\n  max-height: 60vh;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n  overflow: ", ";\n\n  ", "\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingF;
 }, function (_a) {
@@ -129,11 +131,23 @@ var S_Body = styled_components_1.default.div(templateObject_8 || (templateObject
 }, function (_a) {
     var bodyOverflowType = _a.bodyOverflowType;
     return bodyOverflowType;
+}, function (_a) {
+    var scrollVisibleType = _a.scrollVisibleType, bodyOverflowType = _a.bodyOverflowType;
+    return bodyOverflowType !== 'visible' &&
+        scrollVisibleType &&
+        {
+            moving: scrollInvisible,
+            visible: scrollbarStyle_1.scrollbarStyle,
+            hidden: scrollInvisible
+        }[scrollVisibleType];
 }, function (_a) {
     var bodySpacingMode = _a.bodySpacingMode;
-    return bodySpacingMode === 'none' && (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      padding-bottom: 0;\n      padding-left: 0;\n      padding-right: 0;\n    "], ["\n      padding-bottom: 0;\n      padding-left: 0;\n      padding-right: 0;\n    "])));
+    return bodySpacingMode === 'none' && (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      padding-bottom: 0;\n      padding-left: 0;\n      padding-right: 0;\n    "], ["\n      padding-bottom: 0;\n      padding-left: 0;\n      padding-right: 0;\n    "])));
 });
-var S_Footer = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"], ["\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"])), function (_a) {
+var S_Footer = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  box-sizing: border-box;\n  border-top: 1px solid ", ";\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"], ["\n  box-sizing: border-box;\n  border-top: 1px solid ", ";\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_modal_border;
+}, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingD;
 }, function (_a) {
@@ -147,4 +161,4 @@ var S_Footer = styled_components_1.default.div(templateObject_9 || (templateObje
     return theme.spacing.spacingD;
 });
 exports.default = DesktopBasicModal;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;

package/dist/src/desktop/panels/DesktopHeadlessModal/DesktopHeadlessModal.js

@@ -29,8 +29,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var react_dom_1 = __importDefault(require("react-dom"));
 var styled_components_1 = __importStar(require("styled-components"));
+var animationStyle_1 = require("../../../common/styles/movement/animationStyle");
+var scrollbarStyle_1 = require("../../../common/styles/scroll/scrollbarStyle");
 function DesktopHeadlessModal(_a) {
-    var body = _a.body, _b = _a.size, size = _b === void 0 ? 'rlarge' : _b, _c = _a.dimmedClickCloseMode, dimmedClickCloseMode = _c === void 0 ? 'none' : _c, _d = _a.scrollVisibleType, scrollVisibleType = _d === void 0 ? 'hidden' : _d, onClose = _a.onClose;
+    var body = _a.body, _b = _a.size, size = _b === void 0 ? 'rlarge' : _b, _c = _a.dimmedClickCloseMode, dimmedClickCloseMode = _c === void 0 ? 'none' : _c, _d = _a.scrollVisibleType, scrollVisibleType = _d === void 0 ? 'visible' : _d, onClose = _a.onClose;
     var container = (0, react_1.useState)(function () {
         var modalRoot = document.createElement('div');
         modalRoot.setAttribute('id', 'DesktopHeadlessModal');
@@ -74,11 +76,11 @@ function DesktopHeadlessModal(_a) {
         react_1.default.createElement(S_ModalWrapper, { size: size },
             react_1.default.createElement(S_Body, { ref: targetRef, scrollVisibleType: scrollVisibleType }, body && body))), container);
 }
-var S_ModalOverlay = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n"], ["\n  background-color: ", ";\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n"])), function (_a) {
+var S_ModalOverlay = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n\n  ", "\n"], ["\n  background-color: ", ";\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_modal_dimmed;
-});
-var S_ModalWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  display: flex;\n  left: 50%;\n  max-height: 80vh;\n  min-width: ", ";\n  pointer-events: auto;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: ", ";\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  display: flex;\n  left: 50%;\n  max-height: 80vh;\n  min-width: ", ";\n  pointer-events: auto;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: ", ";\n"])), function (_a) {
+}, animationStyle_1.modalOverlayOnAni);
+var S_ModalWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  display: flex;\n  left: 50%;\n  max-height: 80vh;\n  min-width: ", ";\n  pointer-events: auto;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  display: flex;\n  left: 50%;\n  max-height: 80vh;\n  min-width: ", ";\n  pointer-events: auto;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: ", ";\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_modal_base;
 }, function (_a) {
@@ -99,23 +101,19 @@ var S_ModalWrapper = styled_components_1.default.div(templateObject_2 || (templa
         rlarge: '60vw'
     };
     return sizes[size];
-});
-var scrollVisible = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    border-radius: 3px;\n  }\n\n  ::-webkit-scrollbar {\n    display: block;\n    width: 6px;\n  }\n"], ["\n  ::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    border-radius: 3px;\n  }\n\n  ::-webkit-scrollbar {\n    display: block;\n    width: 6px;\n  }\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_modal_border;
-});
-var scrollInvisible = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ::-webkit-scrollbar {\n    display: none;\n  }\n"], ["\n  ::-webkit-scrollbar {\n    display: none;\n  }\n"])));
-var S_Body = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  overflow: auto;\n  overflow-y: overlay;\n  width: 100%;\n\n  ", "\n\n  &.scrollMoving {\n    ", "\n  }\n"], ["\n  overflow: auto;\n  overflow-y: overlay;\n  width: 100%;\n\n  ", "\n\n  &.scrollMoving {\n    ", "\n  }\n"])), function (_a) {
+}, animationStyle_1.modalOnAni);
+var scrollInvisible = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ::-webkit-scrollbar {\n    display: none;\n  }\n"], ["\n  ::-webkit-scrollbar {\n    display: none;\n  }\n"])));
+var S_Body = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  overflow: auto;\n  overflow-y: overlay;\n  width: 100%;\n\n  ", "\n\n  &.scrollMoving {\n    ", "\n  }\n"], ["\n  overflow: auto;\n  overflow-y: overlay;\n  width: 100%;\n\n  ", "\n\n  &.scrollMoving {\n    ", "\n  }\n"])), function (_a) {
     var scrollVisibleType = _a.scrollVisibleType;
     return scrollVisibleType &&
         {
             moving: scrollInvisible,
-            visible: scrollVisible,
+            visible: scrollbarStyle_1.scrollbarWithPaddingStyle,
             hidden: scrollInvisible
         }[scrollVisibleType];
 }, function (_a) {
     var scrollVisibleType = _a.scrollVisibleType;
-    return scrollVisibleType === 'moving' && scrollVisible;
+    return scrollVisibleType === 'moving' && scrollbarStyle_1.scrollbarWithPaddingStyle;
 });
 exports.default = DesktopHeadlessModal;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -25,6 +25,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
+var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
 var hybrid_1 = require("../../../hybrid");
 var ContextMenu_1 = require("../ContextMenu");
 var ContextMenuItem_1 = require("../ContextMenuItem");
@@ -270,7 +271,21 @@ var borderColor = (0, styled_components_1.css)(templateObject_10 || (templateObj
             return theme.ui_cpnt_dropdown_border_normal;
     }
 });
-var S_Select = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border: 2px solid\n    ", ";\n  border-radius: 14px;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: space-between;\n\n  ", ";\n\n  ", "\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border: 2px solid\n    ", ";\n  border-radius: 14px;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: space-between;\n\n  ", ";\n\n  ", "\n"])), function (_a) {
+var backgroundActiveColor = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
+    var colorTheme = _a.colorTheme, theme = _a.theme;
+    switch (colorTheme) {
+        case 'none':
+            return theme.ui_cpnt_textfield_base_pressed;
+        case 'dark':
+            return theme.ui_cpnt_dropdown_base_pressed_darktheme;
+        case 'white':
+            return theme.ui_cpnt_dropdown_base_pressed_white;
+        default:
+            return theme.ui_cpnt_textfield_base_pressed;
+    }
+});
+var normalActionColor = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  &:active {\n    background-color: ", ";\n  }\n"], ["\n  &:active {\n    background-color: ", ";\n  }\n"])), backgroundActiveColor);
+var S_Select = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border: 2px solid\n    ", ";\n  border-radius: 14px;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: space-between;\n\n  ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border: 2px solid\n    ", ";\n  border-radius: 14px;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: space-between;\n\n  ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_a) {
     var state = _a.state;
     switch (state) {
         case 'disabled':
@@ -300,10 +315,13 @@ var S_Select = styled_components_1.default.div(templateObject_11 || (templateObj
 }, function (_a) {
     var customWidth = _a.customWidth;
     return customWidth && "width: " + customWidth + ";";
+}, transitionStyle_1.InputTransition, function (_a) {
+    var state = _a.state;
+    return state === 'normal' && normalActionColor;
 });
-var S_ContextMenuWrapper = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  display: block;\n  margin-top: ", ";\n  position: absolute;\n  width: inherit;\n"], ["\n  display: block;\n  margin-top: ", ";\n  position: absolute;\n  width: inherit;\n"])), function (_a) {
+var S_ContextMenuWrapper = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  display: block;\n  margin-top: ", ";\n  position: absolute;\n  width: inherit;\n"], ["\n  display: block;\n  margin-top: ", ";\n  position: absolute;\n  width: inherit;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
 });
 exports.default = Dropdown;
-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;
+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/mobile/components/FloatingActionButton/FloatingActionButton.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 hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
 function FloatingActionButton(_a) {
@@ -64,15 +65,15 @@ var disabled = (0, styled_components_1.css)(templateObject_3 || (templateObject_
     var theme = _a.theme;
     return theme.ui_cpnt_button_fill_base_disabled;
 });
-var floatingActionButtonStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: fixed;\n  right: 24px;\n  bottom: 24px;\n  background-color: ", ";\n  border: none;\n  box-sizing: border-box;\n  box-shadow: ", ";\n  z-index: 101;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: fixed;\n  right: 24px;\n  bottom: 24px;\n  background-color: ", ";\n  border: none;\n  box-sizing: border-box;\n  box-shadow: ", ";\n  z-index: 101;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", ";\n"])), function (_a) {
+var floatingActionButtonStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: fixed;\n  right: 24px;\n  bottom: 24px;\n  background-color: ", ";\n  border: none;\n  box-sizing: border-box;\n  box-shadow: ", ";\n  z-index: 101;\n\n  &:focus {\n    outline: none;\n  }\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:active:enabled::before {\n    background-color: ", ";\n  }\n\n  ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: fixed;\n  right: 24px;\n  bottom: 24px;\n  background-color: ", ";\n  border: none;\n  box-sizing: border-box;\n  box-shadow: ", ";\n  z-index: 101;\n\n  &:focus {\n    outline: none;\n  }\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:active:enabled::before {\n    background-color: ", ";\n  }\n\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_button_fill_base_primary;
 }, function (_a) {
     var theme = _a.theme;
     return theme.boxShadow.elevation3;
-}, function (_a) {
+}, transitionStyle_1.ButtonTransition, function (_a) {
     var theme = _a.theme;
-    return "background-image: linear-gradient(\n    to top,\n    " + theme.ui_cpnt_button_fill_on_base_pressed + ",\n    " + theme.ui_cpnt_button_fill_on_base_pressed + "\n  );";
+    return theme.ui_cpnt_button_fill_on_base_pressed;
 }, function (_a) {
     var state = _a.state;
     return state === 'disable' && disabled;

package/dist/src/mobile/components/IconButton/IconButton.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 hybrid_1 = require("../../../hybrid");
 function IconButton(_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, iconName = _a.iconName, iconColorKey = _a.iconColorKey, _g = _a.shadow, shadow = _g === void 0 ? 'hidden' : _g, _h = _a.colorTheme, colorTheme = _h === void 0 ? 'none' : _h, _j = _a.type, type = _j === void 0 ? 'button' : _j, _k = _a.state, state = _k === void 0 ? 'normal' : _k, tabIndex = _a.tabIndex, onClick = _a.onClick, onMouseDown = _a.onMouseDown;
@@ -73,14 +74,14 @@ var fillDisabled = (0, styled_components_1.css)(templateObject_1 || (templateObj
         ? ''
         : theme.ui_cpnt_button_fill_base_disabled;
 });
-var fill = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", ";\n"], ["\n  background-color: ", ";\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", ";\n"])), function (_a) {
+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    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    ", "\n  }\n\n  &:active:enabled::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    ", "\n  }\n\n  &:active:enabled::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;
-}, function (_a) {
+}, transitionStyle_1.ButtonTransition, function (_a) {
     var theme = _a.theme, baseColorKey = _a.baseColorKey;
     return baseColorKey === 'ui_cpnt_button_fill_base_transparent'
         ? ''
-        : "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  );";
+        : theme.ui_cpnt_button_fill_on_base_pressed;
 }, function (_a) {
     var state = _a.state;
     return state === 'disabled' && fillDisabled;
@@ -92,7 +93,7 @@ var lineDisabled = (0, styled_components_1.css)(templateObject_3 || (templateObj
     var theme = _a.theme;
     return theme.ui_cpnt_button_line_border_disabled;
 });
-var line = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: ", ";\n  border-color: ", ";\n\n  ", ";\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", ";\n"], ["\n  background-color: ", ";\n  border-color: ", ";\n\n  ", ";\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", ";\n"])), function (_a) {
+var line = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: ", ";\n  border-color: ", ";\n\n  ", ";\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", "\n\n  ", ";\n"], ["\n  background-color: ", ";\n  border-color: ", ";\n\n  ", ";\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", "\n\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_button_line_base_default;
 }, function (_a) {
@@ -111,7 +112,7 @@ var line = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 =
 }, function (_a) {
     var theme = _a.theme;
     return "background-color: " + theme.ui_cpnt_button_line_base_pressed + "\n  ;";
-}, function (_a) {
+}, transitionStyle_1.ButtonTransition, function (_a) {
     var state = _a.state;
     return state === 'disabled' && lineDisabled;
 });