pds-dev-kit-web 0.5.1 → 0.5.5

package/dist/src/common/styles/colorSet/UIColor.json

@@ -443,5 +443,6 @@
     "ui_list_progress_shape_base": "sys_widget_grey_04",
     "ui_cpnt_textlabel_sys_brand_primary_opacity50": "sys_cpnt_textlabel_sys_brand_primary_opacity50",
     "ui_cpnt_progressbar_01": "sys_widget_green_01",
-    "ui_cpnt_progressbar_02": "sys_widget_grey_04"
+    "ui_cpnt_progressbar_02": "sys_widget_grey_04",
+    "ui_36": "sys_component_base_black_opacity80"
 }

package/dist/src/common/styles/colorSet/index.d.ts

@@ -1,5 +1,5 @@
 declare const colorSet: {
-    readonly PaletteColor_Dark: {
+    readonly PaletteColor_light: {
         sys_container_background_01: string;
         sys_container_background_02: string;
         sys_container_background_03: string;
@@ -124,62 +124,7 @@ declare const colorSet: {
         sys_cpnt_textlabel_sys_brand_primary_opacity50: string;
         sys_widget_green_01: string;
     };
-    readonly SemanticColor: {
-        blue500: string;
-        blue700: string;
-        blue300: string;
-        green700: string;
-        green500: string;
-        green300: string;
-        red500: string;
-        grey900: string;
-        grey500: string;
-        grey400: string;
-        grey100: string;
-        grey50: string;
-        white: string;
-        black: string;
-        darkblue500: string;
-        grey950: string;
-        darkgrey900: string;
-        darkgrey500: string;
-        darkgrey400: string;
-        darkgrey100: string;
-        darkgrey50: string;
-        darkred500: string;
-        darkgreen700: string;
-        orange500: string;
-        darkorange500: string;
-        opacity00: string;
-        opacity20: string;
-        opacity30: string;
-        opacity65: string;
-        darkgreen500: string;
-        grey70: string;
-        navy500: string;
-        lightgreen500: string;
-        pink500: string;
-        darkgrey70: string;
-        darknavy500: string;
-        darkpink500: string;
-        darklightgreen500: string;
-        opacity10: string;
-        grey600: string;
-        darkgrey600: string;
-        skyblue500: string;
-        skyblue300: string;
-        pink300: string;
-        lightpink500: string;
-        darkblue300: string;
-        darkblue700: string;
-        darkgreen300: string;
-        darkskyblue500: string;
-        navy100: string;
-        darknavy100: string;
-        opacity80: string;
-        opacity50: string;
-    };
-    readonly PaletteColor_light: {
+    readonly PaletteColor_Dark: {
         sys_container_background_01: string;
         sys_container_background_02: string;
         sys_container_background_03: string;
@@ -304,6 +249,61 @@ declare const colorSet: {
         sys_cpnt_textlabel_sys_brand_primary_opacity50: string;
         sys_widget_green_01: string;
     };
+    readonly SemanticColor: {
+        blue500: string;
+        blue700: string;
+        blue300: string;
+        green700: string;
+        green500: string;
+        green300: string;
+        red500: string;
+        grey900: string;
+        grey500: string;
+        grey400: string;
+        grey100: string;
+        grey50: string;
+        white: string;
+        black: string;
+        darkblue500: string;
+        grey950: string;
+        darkgrey900: string;
+        darkgrey500: string;
+        darkgrey400: string;
+        darkgrey100: string;
+        darkgrey50: string;
+        darkred500: string;
+        darkgreen700: string;
+        orange500: string;
+        darkorange500: string;
+        opacity00: string;
+        opacity20: string;
+        opacity30: string;
+        opacity65: string;
+        darkgreen500: string;
+        grey70: string;
+        navy500: string;
+        lightgreen500: string;
+        pink500: string;
+        darkgrey70: string;
+        darknavy500: string;
+        darkpink500: string;
+        darklightgreen500: string;
+        opacity10: string;
+        grey600: string;
+        darkgrey600: string;
+        skyblue500: string;
+        skyblue300: string;
+        pink300: string;
+        lightpink500: string;
+        darkblue300: string;
+        darkblue700: string;
+        darkgreen300: string;
+        darkskyblue500: string;
+        navy100: string;
+        darknavy100: string;
+        opacity80: string;
+        opacity50: string;
+    };
     readonly UIColor: {
         ui_cpnt_button_fill_base_primary: string;
         ui_cpnt_button_fill_base_default: string;
@@ -750,6 +750,7 @@ declare const colorSet: {
         ui_cpnt_textlabel_sys_brand_primary_opacity50: string;
         ui_cpnt_progressbar_01: string;
         ui_cpnt_progressbar_02: string;
+        ui_36: string;
     };
 };
 export default colorSet;

package/dist/src/common/styles/colorSet/index.js

@@ -4,14 +4,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 /* eslint-disable import/order */
+var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
 var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
 var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
-var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
 var UIColor_json_1 = __importDefault(require("./UIColor.json"));
 var colorSet = {
+    PaletteColor_light: PaletteColor_light_json_1.default,
     PaletteColor_Dark: PaletteColor_Dark_json_1.default,
     SemanticColor: SemanticColor_json_1.default,
-    PaletteColor_light: PaletteColor_light_json_1.default,
     UIColor: UIColor_json_1.default
 };
 exports.default = colorSet;

package/dist/src/common/styles/colorSet/ui-type.d.ts

@@ -444,4 +444,5 @@ export interface UITheme {
     ui_cpnt_textlabel_sys_brand_primary_opacity50: string;
     ui_cpnt_progressbar_01: string;
     ui_cpnt_progressbar_02: string;
+    ui_36: string;
 }

package/dist/src/hybrid/components/ImageView/ImageView.js

@@ -30,8 +30,7 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var ImageView = function (_a) {
     var src = _a.src, _b = _a.shapeType, shapeType = _b === void 0 ? 'round' : _b, _c = _a.radius, radius = _c === void 0 ? 8 : _c, width = _a.width, height = _a.height, noImageHeight = _a.noImageHeight, noImageWidth = _a.noImageWidth, _d = _a.ratio, ratio = _d === void 0 ? 'auto' : _d, _e = _a.scaleType, scaleType = _e === void 0 ? 'none' : _e, _f = _a.borderMode, borderMode = _f === void 0 ? 'none' : _f, _g = _a.backgroundFillMode, backgroundFillMode = _g === void 0 ? 'none' : _g;
-    return (react_1.default.createElement(react_1.default.Fragment, null, ratio === 'auto' ? (react_1.default.createElement(S_AutoImageViewWrapper, { "$height": height, "$width": width, noImageHeight: noImageHeight, noImageWidth: noImageWidth, borderMode: borderMode, shapeType: shapeType, radius: radius, backgroundFillMode: backgroundFillMode },
-        react_1.default.createElement(S_AutoImageView, { src: src, "$height": height, "$width": width, scaleType: scaleType }))) : (react_1.default.createElement(S_RatioImageViewWrapper, { "$width": width, borderMode: borderMode, shapeType: shapeType, radius: radius, backgroundFillMode: backgroundFillMode },
+    return (react_1.default.createElement(react_1.default.Fragment, null, ratio === 'auto' ? (react_1.default.createElement(S_AutoImageViewWrapper, { "$height": height, "$width": width, noImageHeight: noImageHeight, noImageWidth: noImageWidth, borderMode: borderMode, shapeType: shapeType, radius: radius, backgroundFillMode: backgroundFillMode }, src && (react_1.default.createElement(S_AutoImageView, { src: src, "$height": height, "$width": width, scaleType: scaleType })))) : (react_1.default.createElement(S_RatioImageViewWrapper, { "$width": width, borderMode: borderMode, shapeType: shapeType, radius: radius, backgroundFillMode: backgroundFillMode },
         react_1.default.createElement(S_RatioImageView, { "$src": src, scaleType: scaleType, ratio: ratio })))));
 };
 var wrapperStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  box-sizing: border-box;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  ", ";\n  ", ";\n  ", ";\n"])), function (_a) {
@@ -95,8 +94,8 @@ var onlyWidthWrapperStyle = (0, styled_components_1.css)(templateObject_4 || (te
     var $width = _a.$width;
     return ($width === 'responsive' ? '100%' : $width + "px");
 }, function (_a) {
-    var theme = _a.theme, noImageHeight = _a.noImageHeight;
-    return noImageHeight ? "background-color: " + theme.ui_temp_grey_04 : '';
+    var theme = _a.theme, noImageHeight = _a.noImageHeight, src = _a.src;
+    return !src && noImageHeight ? "background-color: " + theme.ui_temp_grey_04 : '';
 });
 var onlyHeightWrapperStyle = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  min-height: ", ";\n  min-width: ", ";\n  height: ", ";\n  width: ", ";\n  ", ";\n"], ["\n  min-height: ", ";\n  min-width: ", ";\n  height: ", ";\n  width: ", ";\n  ", ";\n"])), function (_a) {
     var $height = _a.$height;
@@ -111,10 +110,10 @@ var onlyHeightWrapperStyle = (0, styled_components_1.css)(templateObject_5 || (t
     var noImageWidth = _a.noImageWidth;
     return (noImageWidth ? noImageWidth + "px" : 'auto');
 }, function (_a) {
-    var theme = _a.theme, noImageWidth = _a.noImageWidth;
-    return noImageWidth ? "background-color: " + theme.ui_temp_grey_04 : '';
+    var theme = _a.theme, noImageWidth = _a.noImageWidth, src = _a.src;
+    return !src && noImageWidth ? "background-color: " + theme.ui_temp_grey_04 : '';
 });
-var bothWrapperStyle = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  min-height: ", ";\n  height: ", ";\n  min-width: ", ";\n  width: ", ";\n"], ["\n  min-height: ", ";\n  height: ", ";\n  min-width: ", ";\n  width: ", ";\n"])), function (_a) {
+var bothWrapperStyle = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  min-height: ", ";\n  height: ", ";\n  min-width: ", ";\n  width: ", ";\n  ", ";\n"], ["\n  min-height: ", ";\n  height: ", ";\n  min-width: ", ";\n  width: ", ";\n  ", ";\n"])), function (_a) {
     var $height = _a.$height;
     return ($height === 'responsive' ? '100%' : $height + "px");
 }, function (_a) {
@@ -126,6 +125,9 @@ var bothWrapperStyle = (0, styled_components_1.css)(templateObject_6 || (templat
 }, function (_a) {
     var $width = _a.$width;
     return ($width === 'responsive' ? '100%' : $width + "px");
+}, function (_a) {
+    var theme = _a.theme, src = _a.src;
+    return (!src ? "background-color: " + theme.ui_temp_grey_04 : '');
 });
 var onlyWidthStyle = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: 100%;\n  height: auto;\n"], ["\n  width: 100%;\n  height: auto;\n"])));
 var onlyHeightStyle = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  width: auto;\n  height: 100%;\n"], ["\n  width: auto;\n  height: 100%;\n"])));

package/dist/src/mobile/layout/LayoutMP/Containers/ContentsContainer/variation/MPA.js

@@ -15,17 +15,17 @@ var MPA = function (_a) {
         react_1.default.createElement(S_ContentsArea, { areaColor: areaColor },
             react_1.default.createElement(S_Content1, null, content1))));
 };
-var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  min-width: 360px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  height: 100%;\n  ", ";\n"], ["\n  background-color: ", ";\n  min-width: 360px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  height: 100%;\n  ", ";\n"])), function (_a) {
+var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 100%;\n  min-width: 360px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"], ["\n  background-color: ", ";\n  height: 100%;\n  min-width: 360px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_m_contentscontainer01_background;
 }, function (_a) {
     var containerColor = _a.containerColor;
     return "background-color: " + containerColor;
 });
-var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  max-width: 768px;\n  min-width: 360px;\n  padding-bottom: 88px;\n  ", ";\n"], ["\n  max-width: 768px;\n  min-width: 360px;\n  padding-bottom: 88px;\n  ", ";\n"])), function (_a) {
+var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  /* TODO: infinity scroll\uC744 \uC704\uD574 \uC784\uC2DC\uB85C height: 100%;\uD55C \uC0C1\uD0DC. \uD574\uB2F9 \uC0C1\uD0DC\uC5D0\uC11C\uB294 padding-bottom\uC774 \uBB34\uC2DC\uB418\uACE0 \uC788\uC73C\uBBC0\uB85C 2/8 \uC774\uD6C4 \uD574\uACB0 \uD544\uC694 */\n  height: 100%;\n  max-width: 768px;\n  min-width: 360px;\n  padding-bottom: 88px;\n  ", ";\n"], ["\n  /* TODO: infinity scroll\uC744 \uC704\uD574 \uC784\uC2DC\uB85C height: 100%;\uD55C \uC0C1\uD0DC. \uD574\uB2F9 \uC0C1\uD0DC\uC5D0\uC11C\uB294 padding-bottom\uC774 \uBB34\uC2DC\uB418\uACE0 \uC788\uC73C\uBBC0\uB85C 2/8 \uC774\uD6C4 \uD574\uACB0 \uD544\uC694 */\n  height: 100%;\n  max-width: 768px;\n  min-width: 360px;\n  padding-bottom: 88px;\n  ", ";\n"])), function (_a) {
     var areaColor = _a.areaColor;
     return "background-color: " + areaColor;
 });
-var S_Content1 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
+var S_Content1 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  /* TODO: infinity scroll\uC744 \uC704\uD574 \uC784\uC2DC\uB85C height: 100%;\uD55C \uC0C1\uD0DC. \uD574\uB2F9 \uC0C1\uD0DC\uC5D0\uC11C\uB294 padding-bottom\uC774 \uBB34\uC2DC\uB418\uACE0 \uC788\uC73C\uBBC0\uB85C 2/8 \uC774\uD6C4 \uD574\uACB0 \uD544\uC694 */\n  height: 100%;\n"], ["\n  /* TODO: infinity scroll\uC744 \uC704\uD574 \uC784\uC2DC\uB85C height: 100%;\uD55C \uC0C1\uD0DC. \uD574\uB2F9 \uC0C1\uD0DC\uC5D0\uC11C\uB294 padding-bottom\uC774 \uBB34\uC2DC\uB418\uACE0 \uC788\uC73C\uBBC0\uB85C 2/8 \uC774\uD6C4 \uD574\uACB0 \uD544\uC694 */\n  height: 100%;\n"])));
 exports.default = MPA;
 var templateObject_1, templateObject_2, templateObject_3;

package/dist/src/mobile/layout/LayoutMP/Containers/ContentsContainer/variation/MPB.js

@@ -15,17 +15,17 @@ var MPB = function (_a) {
         react_1.default.createElement(S_ContentsArea, { areaColor: areaColor },
             react_1.default.createElement(S_Content1, null, content1))));
 };
-var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  min-width: 360px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  height: 100%;\n  ", ";\n"], ["\n  background-color: ", ";\n  min-width: 360px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  height: 100%;\n  ", ";\n"])), function (_a) {
+var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 100%;\n  min-width: 360px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"], ["\n  background-color: ", ";\n  height: 100%;\n  min-width: 360px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_m_contentscontainer01_background;
 }, function (_a) {
     var containerColor = _a.containerColor;
     return "background-color: " + containerColor;
 });
-var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  max-width: 768px;\n  min-width: 360px;\n  padding-bottom: 88px;\n  ", ";\n"], ["\n  max-width: 768px;\n  min-width: 360px;\n  padding-bottom: 88px;\n  ", ";\n"])), function (_a) {
+var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  /* TODO: infinity scroll\uC744 \uC704\uD574 \uC784\uC2DC\uB85C height: 100%;\uD55C \uC0C1\uD0DC. \uD574\uB2F9 \uC0C1\uD0DC\uC5D0\uC11C\uB294 padding-bottom\uC774 \uBB34\uC2DC\uB418\uACE0 \uC788\uC73C\uBBC0\uB85C 2/8 \uC774\uD6C4 \uD574\uACB0 \uD544\uC694 */\n  height: 100%;\n  max-width: 768px;\n  min-width: 360px;\n  padding-bottom: 88px;\n  ", ";\n"], ["\n  /* TODO: infinity scroll\uC744 \uC704\uD574 \uC784\uC2DC\uB85C height: 100%;\uD55C \uC0C1\uD0DC. \uD574\uB2F9 \uC0C1\uD0DC\uC5D0\uC11C\uB294 padding-bottom\uC774 \uBB34\uC2DC\uB418\uACE0 \uC788\uC73C\uBBC0\uB85C 2/8 \uC774\uD6C4 \uD574\uACB0 \uD544\uC694 */\n  height: 100%;\n  max-width: 768px;\n  min-width: 360px;\n  padding-bottom: 88px;\n  ", ";\n"])), function (_a) {
     var areaColor = _a.areaColor;
     return "background-color: " + areaColor;
 });
-var S_Content1 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
+var S_Content1 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  /* TODO: infinity scroll\uC744 \uC704\uD574 \uC784\uC2DC\uB85C height: 100%;\uD55C \uC0C1\uD0DC. \uD574\uB2F9 \uC0C1\uD0DC\uC5D0\uC11C\uB294 padding-bottom\uC774 \uBB34\uC2DC\uB418\uACE0 \uC788\uC73C\uBBC0\uB85C 2/8 \uC774\uD6C4 \uD574\uACB0 \uD544\uC694 */\n  height: 100%;\n"], ["\n  /* TODO: infinity scroll\uC744 \uC704\uD574 \uC784\uC2DC\uB85C height: 100%;\uD55C \uC0C1\uD0DC. \uD574\uB2F9 \uC0C1\uD0DC\uC5D0\uC11C\uB294 padding-bottom\uC774 \uBB34\uC2DC\uB418\uACE0 \uC788\uC73C\uBBC0\uB85C 2/8 \uC774\uD6C4 \uD574\uACB0 \uD544\uC694 */\n  height: 100%;\n"])));
 exports.default = MPB;
 var templateObject_1, templateObject_2, templateObject_3;

package/dist/src/mobile/layout/LayoutMP/Containers/ContentsContainer/variation/MPC.js

@@ -33,14 +33,14 @@ var S_ContentsContainer1 = styled_components_1.default.div(templateObject_2 || (
     var containerColor = _a.containerColor;
     return "background-color: " + containerColor;
 });
-var S_ContentsContainer2 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  flex: 1;\n  min-width: 360px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  height: 100%;\n  ", ";\n"], ["\n  background-color: ", ";\n  flex: 1;\n  min-width: 360px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  height: 100%;\n  ", ";\n"])), function (_a) {
+var S_ContentsContainer2 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  flex: 1;\n  height: 100%;\n  min-width: 360px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"], ["\n  background-color: ", ";\n  flex: 1;\n  height: 100%;\n  min-width: 360px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_m_contentscontainer02_background;
 }, function (_a) {
     var containerColor = _a.containerColor;
     return "background-color: " + containerColor;
 });
-var S_ContentsArea1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  max-width: 768px;\n  min-width: 360px;\n  height: 100%;\n  ", ";\n"], ["\n  max-width: 768px;\n  min-width: 360px;\n  height: 100%;\n  ", ";\n"])), function (_a) {
+var S_ContentsArea1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 100%;\n  max-width: 768px;\n  min-width: 360px;\n  ", ";\n"], ["\n  height: 100%;\n  max-width: 768px;\n  min-width: 360px;\n  ", ";\n"])), function (_a) {
     var areaColor = _a.areaColor;
     return "background-color: " + areaColor;
 });

package/dist/src/mobile/layout/LayoutMP/Containers/ContentsContainer/variation/MPD.js

@@ -15,14 +15,14 @@ var MPD = function (_a) {
         react_1.default.createElement(S_ContentsArea, { areaColor: areaColor },
             react_1.default.createElement(S_Content1, null, content1))));
 };
-var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  min-width: 360px;\n  height: 100%;\n  ", ";\n"], ["\n  background-color: ", ";\n  min-width: 360px;\n  height: 100%;\n  ", ";\n"])), function (_a) {
+var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 100%;\n  min-width: 360px;\n  ", ";\n"], ["\n  background-color: ", ";\n  height: 100%;\n  min-width: 360px;\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_m_contentscontainer01_background;
 }, function (_a) {
     var containerColor = _a.containerColor;
     return "background-color: " + containerColor;
 });
-var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  max-width: 768px;\n  min-width: 360px;\n  height: 100%;\n  ", ";\n"], ["\n  max-width: 768px;\n  min-width: 360px;\n  height: 100%;\n  ", ";\n"])), function (_a) {
+var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 100%;\n  max-width: 768px;\n  min-width: 360px;\n  ", ";\n"], ["\n  height: 100%;\n  max-width: 768px;\n  min-width: 360px;\n  ", ";\n"])), function (_a) {
     var areaColor = _a.areaColor;
     return "background-color: " + areaColor;
 });

package/dist/src/mobile/layout/LayoutMP/Containers/ContentsContainer/variation/MPE.js

@@ -15,14 +15,14 @@ var MPE = function (_a) {
         react_1.default.createElement(S_ContentsArea, { areaColor: areaColor },
             react_1.default.createElement(S_Content1, null, content1))));
 };
-var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  min-width: 360px;\n  height: 100%;\n  ", ";\n"], ["\n  background-color: ", ";\n  min-width: 360px;\n  height: 100%;\n  ", ";\n"])), function (_a) {
+var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 100%;\n  min-width: 360px;\n  ", ";\n"], ["\n  background-color: ", ";\n  height: 100%;\n  min-width: 360px;\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_m_contentscontainer01_background;
 }, function (_a) {
     var containerColor = _a.containerColor;
     return "background-color: " + containerColor;
 });
-var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  max-width: 768px;\n  min-width: 360px;\n  height: 100%;\n  ", ";\n"], ["\n  max-width: 768px;\n  min-width: 360px;\n  height: 100%;\n  ", ";\n"])), function (_a) {
+var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 100%;\n  max-width: 768px;\n  min-width: 360px;\n  ", ";\n"], ["\n  height: 100%;\n  max-width: 768px;\n  min-width: 360px;\n  ", ";\n"])), function (_a) {
     var areaColor = _a.areaColor;
     return "background-color: " + areaColor;
 });

package/dist/src/mobile/layout/LayoutMP/Containers/ContentsContainer/variation/MPF.js

@@ -33,18 +33,18 @@ var S_ContentsContainer1 = styled_components_1.default.div(templateObject_2 || (
     var containerColor = _a.containerColor;
     return "background-color: " + containerColor;
 });
-var S_ContentsContainer2 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  flex: 1;\n  min-width: 360px;\n  height: 100%;\n  ", ";\n"], ["\n  background-color: ", ";\n  flex: 1;\n  min-width: 360px;\n  height: 100%;\n  ", ";\n"])), function (_a) {
+var S_ContentsContainer2 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  flex: 1;\n  height: 100%;\n  min-width: 360px;\n  ", ";\n"], ["\n  background-color: ", ";\n  flex: 1;\n  height: 100%;\n  min-width: 360px;\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_m_contentscontainer02_background;
 }, function (_a) {
     var containerColor = _a.containerColor;
     return "background-color: " + containerColor;
 });
-var S_ContentsArea1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  max-width: 768px;\n  min-width: 360px;\n  height: 100%;\n  ", ";\n"], ["\n  max-width: 768px;\n  min-width: 360px;\n  height: 100%;\n  ", ";\n"])), function (_a) {
+var S_ContentsArea1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 100%;\n  max-width: 768px;\n  min-width: 360px;\n  ", ";\n"], ["\n  height: 100%;\n  max-width: 768px;\n  min-width: 360px;\n  ", ";\n"])), function (_a) {
     var areaColor = _a.areaColor;
     return "background-color: " + areaColor;
 });
-var S_ContentsArea2 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  max-width: 768px;\n  min-width: 360px;\n  padding-bottom: 88px;\n  height: 100%;\n  ", ";\n"], ["\n  max-width: 768px;\n  min-width: 360px;\n  padding-bottom: 88px;\n  height: 100%;\n  ", ";\n"])), function (_a) {
+var S_ContentsArea2 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: 100%;\n  max-width: 768px;\n  min-width: 360px;\n  padding-bottom: 88px;\n  ", ";\n"], ["\n  height: 100%;\n  max-width: 768px;\n  min-width: 360px;\n  padding-bottom: 88px;\n  ", ";\n"])), function (_a) {
     var areaColor = _a.areaColor;
     return "background-color: " + areaColor;
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web",
-  "version": "0.5.1",
+  "version": "0.5.5",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",
@@ -21,7 +21,7 @@
     "i18next-browser-languagedetector": "^6.1.2",
     "i18next-intervalplural-postprocessor": "^3.0.0",
     "nuka-carousel": "^4.8.4",
-    "react-hook-form": "^7.22.5",
+    "react-hook-form": "^7.7.1",
     "react-i18next": "^11.12.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",