pds-dev-kit-web 1.3.14 → 1.3.17

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

@@ -28,10 +28,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 /* eslint-disable react/jsx-no-bind */
 var react_1 = __importDefault(require("react"));
+var react_hook_form_1 = require("react-hook-form");
 var styled_components_1 = __importStar(require("styled-components"));
 var components_1 = require("../../common/components");
 function BlogTextField(_a) {
     var hintText = _a.hintText, defaultText = _a.defaultText, _b = _a.size, size = _b === void 0 ? 'rlarge' : _b, _c = _a.textLineType, textLineType = _c === void 0 ? 'auto' : _c, _d = _a.multiRows, multiRows = _d === void 0 ? 8 : _d, _e = _a.autoMinRows, autoMinRows = _e === void 0 ? 8 : _e, autoMaxRows = _a.autoMaxRows, _f = _a.state, state = _f === void 0 ? 'normal' : _f, _g = _a.spacingMode, spacingMode = _g === void 0 ? 'use' : _g, maxLength = _a.maxLength, name = _a.name, validation = _a.validation, onBlur = _a.onBlur, onChange = _a.onChange, onFocus = _a.onFocus, onTarget = _a.onTarget;
+    var register = (0, react_hook_form_1.useFormContext)().register;
+    var validateOnChange = register(name, validation).onChange;
     function handleFocus(e) {
         if (onFocus) {
             onFocus(e);
@@ -48,16 +51,17 @@ function BlogTextField(_a) {
         }
     }
     function handleChange(e) {
+        validateOnChange(e);
         if (onChange) {
             onChange(e);
         }
     }
     var S_BlogTextField = function () {
         if (textLineType === 'multi') {
-            return (react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, textLineType: "multi", multiRows: multiRows, state: state, maxLength: maxLength, textSize: "form1", textWeight: "normal", onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur }));
+            return (react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, textLineType: "multi", multiRows: multiRows, state: state, maxLength: maxLength, textSize: "form1", textWeight: "normal", onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, validationPoint: "onChange" }));
         }
         if (textLineType === 'auto') {
-            return (react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, textLineType: "auto", autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, state: state, maxLength: maxLength, textSize: "form1", textWeight: "normal", onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur }));
+            return (react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, textLineType: "auto", autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, state: state, maxLength: maxLength, textSize: "form1", textWeight: "normal", onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, validationPoint: "onChange" }));
         }
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,

package/dist/src/desktop/components/ContextMenu/ContextMenu.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 declare type ContextMenuProps = {
     children: React.ReactNode;
     autoWidthMode?: 'none' | 'use';
+    maxHeight?: number;
 };
-declare function ContextMenu({ children, autoWidthMode }: ContextMenuProps): JSX.Element;
+declare function ContextMenu({ children, autoWidthMode, maxHeight }: ContextMenuProps): JSX.Element;
 export default ContextMenu;

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

@@ -10,10 +10,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 function ContextMenu(_a) {
-    var children = _a.children, _b = _a.autoWidthMode, autoWidthMode = _b === void 0 ? 'none' : _b;
-    return react_1.default.createElement(S_ContextMenu, { autoWidth: autoWidthMode === 'use' }, children);
+    var children = _a.children, _b = _a.autoWidthMode, autoWidthMode = _b === void 0 ? 'none' : _b, maxHeight = _a.maxHeight;
+    return (react_1.default.createElement(S_ContextMenu, { autoWidth: autoWidthMode === 'use', maxHeight: maxHeight }, children));
 }
-var S_ContextMenu = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-shadow: ", ";\n  list-style: none;\n  margin: 0;\n  min-width: 128px;\n  overflow-y: auto;\n  padding: ", " 0;\n  position: relative;\n  vertical-align: baseline;\n  width: ", ";\n  z-index: 3;\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-shadow: ", ";\n  list-style: none;\n  margin: 0;\n  min-width: 128px;\n  overflow-y: auto;\n  padding: ", " 0;\n  position: relative;\n  vertical-align: baseline;\n  width: ", ";\n  z-index: 3;\n"])), function (_a) {
+var S_ContextMenu = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-shadow: ", ";\n  list-style: none;\n  margin: 0;\n  min-width: 128px;\n  overflow-y: auto;\n  padding: ", " 0;\n  position: relative;\n  vertical-align: baseline;\n  width: ", ";\n  z-index: 3;\n\n  ", ";\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-shadow: ", ";\n  list-style: none;\n  margin: 0;\n  min-width: 128px;\n  overflow-y: auto;\n  padding: ", " 0;\n  position: relative;\n  vertical-align: baseline;\n  width: ", ";\n  z-index: 3;\n\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_contextmenu_base;
 }, function (_a) {
@@ -28,6 +28,9 @@ var S_ContextMenu = styled_components_1.default.ul(templateObject_1 || (template
 }, function (_a) {
     var autoWidth = _a.autoWidth;
     return (autoWidth ? 'inherit' : 'auto');
+}, function (_a) {
+    var maxHeight = _a.maxHeight;
+    return maxHeight && { maxHeight: maxHeight + "px" };
 });
 exports.default = ContextMenu;
 var templateObject_1;

package/dist/src/desktop/components/ContextMenuItem/ContextMenuItem.d.ts

@@ -4,11 +4,12 @@ export declare type ContextMenuItemProps = {
     option?: PDSValueOption;
     size?: 'large' | 'medium' | 'small';
     isSelected?: boolean;
+    state?: 'normal' | 'disabled';
     onClick?: (value: PDSValueOption | string | number | boolean) => void;
     /** @deprecated option 필드를 대신 사용하세요. */
     text?: PDSTextType;
     /** @deprecated option 필드를 대신 사용하세요. */
     value?: string | number | boolean;
 };
-declare function ContextMenuItem({ option, size, isSelected, onClick, text, value }: ContextMenuItemProps): JSX.Element;
+declare function ContextMenuItem({ option, size, isSelected, state, onClick, text, value }: ContextMenuItemProps): JSX.Element;
 export default ContextMenuItem;

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

@@ -30,8 +30,11 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var TextLabel_1 = require("../TextLabel");
 function ContextMenuItem(_a) {
-    var option = _a.option, _b = _a.size, size = _b === void 0 ? 'small' : _b, _c = _a.isSelected, isSelected = _c === void 0 ? false : _c, onClick = _a.onClick, text = _a.text, value = _a.value;
+    var option = _a.option, _b = _a.size, size = _b === void 0 ? 'small' : _b, _c = _a.isSelected, isSelected = _c === void 0 ? false : _c, _d = _a.state, state = _d === void 0 ? 'normal' : _d, onClick = _a.onClick, text = _a.text, value = _a.value;
     var handleClick = function () {
+        if (state === 'disabled') {
+            return;
+        }
         if (onClick && option) {
             onClick(option);
         }
@@ -39,8 +42,18 @@ function ContextMenuItem(_a) {
             onClick(value);
         }
     };
-    return (react_1.default.createElement(S_ContextMenuItem, { size: size, onClick: handleClick, selected: isSelected },
-        react_1.default.createElement(TextLabel_1.TextLabel, { text: (option === null || option === void 0 ? void 0 : option.text) || text, styleTheme: "form2Regular", singleLineMode: "use" })));
+    var textColorTheme;
+    if (isSelected) {
+        textColorTheme = 'sysTextPrimary';
+    }
+    if (!isSelected && state === 'normal') {
+        textColorTheme = 'sysTextSecondary';
+    }
+    if (state === 'disabled') {
+        textColorTheme = 'sysTextTertiary';
+    }
+    return (react_1.default.createElement(S_ContextMenuItem, { size: size, onClick: handleClick, selected: isSelected, disabled: state === 'disabled' },
+        react_1.default.createElement(TextLabel_1.TextLabel, { text: (option === null || option === void 0 ? void 0 : option.text) || text, styleTheme: "form2Regular", singleLineMode: "use", colorTheme: textColorTheme })));
 }
 var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 48px;\n  padding: 0 ", ";\n"], ["\n  height: 48px;\n  padding: 0 ", ";\n"])), function (_a) {
     var theme = _a.theme;
@@ -54,7 +67,7 @@ var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 =
     var theme = _a.theme;
     return theme.spacing.spacingD;
 });
-var S_ContextMenuItem = styled_components_1.default.li(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  cursor: pointer;\n  display: flex;\n\n  ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  cursor: pointer;\n  display: flex;\n\n  ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (_a) {
+var S_ContextMenuItem = styled_components_1.default.li(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  cursor: pointer;\n  display: flex;\n\n  ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  cursor: pointer;\n  display: flex;\n\n  ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  ", ";\n"])), function (_a) {
     var theme = _a.theme, selected = _a.selected;
     return selected
         ? theme.ui_cpnt_contextmenu_menu_base_selected
@@ -65,6 +78,11 @@ var S_ContextMenuItem = styled_components_1.default.li(templateObject_4 || (temp
 }, function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_contextmenu_menu_base_hover;
+}, function (_a) {
+    var disabled = _a.disabled;
+    return disabled && {
+        cursor: 'not-allowed'
+    };
 });
 exports.default = ContextMenuItem;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/src/desktop/components/Dropdown/Dropdown.d.ts

@@ -1,15 +1,20 @@
 /// <reference types="react" />
 import { TFunctionResult } from 'i18next';
 import { PDSValueOption } from '../../../common';
+declare type DropDownValues = PDSValueOption & {
+    state?: 'normal' | 'disabled';
+};
 declare type Props = {
-    size?: 'large' | 'small';
-    hintText?: TFunctionResult;
+    colorTheme?: 'none' | 'dark';
     defaultValue?: PDSValueOption;
-    valueArray: PDSValueOption[];
+    hintText?: TFunctionResult;
+    maxHeightItemNumber?: number;
+    responsiveMode?: 'none' | 'use';
     selectionMode?: 'single' | 'multi';
+    size?: 'large' | 'small';
     state?: 'normal' | 'read_only' | 'disabled';
-    colorTheme?: 'none' | 'dark';
+    valueArray: DropDownValues[];
     onChange?: (option: PDSValueOption) => void;
 };
-declare function Dropdown({ size, hintText, defaultValue, valueArray, selectionMode, state, colorTheme, onChange }: Props): JSX.Element;
+declare function Dropdown({ colorTheme, defaultValue, hintText, maxHeightItemNumber, responsiveMode, selectionMode, size, state, valueArray, onChange }: Props): JSX.Element;
 export default Dropdown;

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

@@ -31,9 +31,9 @@ var ContextMenuItem_1 = require("../ContextMenuItem");
 var TextLabel_1 = require("../TextLabel");
 // TODO: selectionMode의 multi 기능 구현 추가 필요
 function Dropdown(_a) {
-    var _b = _a.size, size = _b === void 0 ? 'large' : _b, hintText = _a.hintText, defaultValue = _a.defaultValue, valueArray = _a.valueArray, _c = _a.selectionMode, selectionMode = _c === void 0 ? 'single' : _c, _d = _a.state, state = _d === void 0 ? 'normal' : _d, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'none' : _e, onChange = _a.onChange;
-    var _f = (0, react_1.useState)(false), isFocused = _f[0], setIsFocused = _f[1];
-    var _g = (0, react_1.useState)(defaultValue), selectedOption = _g[0], setSelectedOption = _g[1];
+    var _b = _a.colorTheme, colorTheme = _b === void 0 ? 'none' : _b, defaultValue = _a.defaultValue, hintText = _a.hintText, _c = _a.maxHeightItemNumber, maxHeightItemNumber = _c === void 0 ? 5 : _c, _d = _a.responsiveMode, responsiveMode = _d === void 0 ? 'none' : _d, _e = _a.selectionMode, selectionMode = _e === void 0 ? 'single' : _e, _f = _a.size, size = _f === void 0 ? 'large' : _f, _g = _a.state, state = _g === void 0 ? 'normal' : _g, valueArray = _a.valueArray, onChange = _a.onChange;
+    var _h = (0, react_1.useState)(false), isFocused = _h[0], setIsFocused = _h[1];
+    var _j = (0, react_1.useState)(defaultValue), selectedOption = _j[0], setSelectedOption = _j[1];
     (0, react_1.useEffect)(function () {
         if (defaultValue) {
             setSelectedOption(defaultValue);
@@ -97,14 +97,23 @@ function Dropdown(_a) {
             return 'ui_cpnt_dropdown_text_darktheme_enabled';
         }
     };
-    return (react_1.default.createElement(S_Dropdown, { className: "container", size: size, tabIndex: 0, onBlur: handleBlur },
-        react_1.default.createElement(S_Select, { size: size, onClick: handleClick, isFocused: isFocused, state: state, colorTheme: colorTheme },
+    var maxHeight = (0, react_1.useMemo)(function () {
+        if (size === 'small') {
+            var SMALL_HEIGHT = 32;
+            return SMALL_HEIGHT * maxHeightItemNumber;
+        }
+        // NOTE: 사이즈가 large인 경우입니다.
+        var LARGE_HEIGHT = 48;
+        return LARGE_HEIGHT * maxHeightItemNumber;
+    }, [size, maxHeightItemNumber]);
+    return (react_1.default.createElement(S_Dropdown, { className: "container", size: size, tabIndex: 0, onBlur: handleBlur, responsiveMode: responsiveMode },
+        react_1.default.createElement(S_Select, { size: size, onClick: handleClick, isFocused: isFocused, state: state, colorTheme: colorTheme, responsiveMode: responsiveMode },
             react_1.default.createElement(S_TextLabel, null,
                 react_1.default.createElement(TextLabel_1.TextLabel, { text: (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.text) || hintText, styleTheme: "form2Regular", singleLineMode: "use", colorTheme: getTextColorTheme(), colorOverride: getDarkTextColor() })),
             react_1.default.createElement(hybrid_1.Icon, { size: 16, fillType: "line", iconName: isFocused ? 'ic_arrow_up' : 'ic_arrow_down', colorKey: getIconColorKey() }),
             react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" })),
         isFocused && (react_1.default.createElement(S_ContextMenuWrapper, null,
-            react_1.default.createElement(ContextMenu_1.ContextMenu, { autoWidthMode: "use" }, valueArray.map(function (el) { return (react_1.default.createElement(ContextMenuItem_1.ContextMenuItem, { key: el.value, option: el, size: size, isSelected: el.value === (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value), onClick: handleClickOption })); }))))));
+            react_1.default.createElement(ContextMenu_1.ContextMenu, { autoWidthMode: "use", maxHeight: maxHeight }, valueArray.map(function (el) { return (react_1.default.createElement(ContextMenuItem_1.ContextMenuItem, { key: el.value, option: el, size: size, isSelected: el.value === (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value), onClick: handleClickOption, state: el.state })); }))))));
 }
 var S_TextLabel = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex: 1;\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  flex: 1;\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
     var theme = _a.theme;
@@ -113,9 +122,15 @@ var S_TextLabel = styled_components_1.default.div(templateObject_1 || (templateO
     var theme = _a.theme;
     return theme.spacing.spacingB;
 });
-var large = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 48px;\n  width: 432px;\n"], ["\n  height: 48px;\n  width: 432px;\n"])));
-var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 32px;\n  width: 188px;\n"], ["\n  height: 32px;\n  width: 188px;\n"])));
-var S_Dropdown = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: inline-block;\n  position: relative;\n\n  ", "\n"], ["\n  display: inline-block;\n  position: relative;\n\n  ", "\n"])), function (_a) {
+var large = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 48px;\n  width: ", ";\n"], ["\n  height: 48px;\n  width: ", ";\n"])), function (_a) {
+    var responsiveMode = _a.responsiveMode;
+    return (responsiveMode === 'use' ? '100%' : '432px');
+});
+var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 32px;\n  width: ", ";\n"], ["\n  height: 32px;\n  width: ", ";\n"])), function (_a) {
+    var responsiveMode = _a.responsiveMode;
+    return (responsiveMode === 'use' ? '100%' : '188px');
+});
+var S_Dropdown = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: inline-block;\n  position: relative;\n\n  ", ";\n"], ["\n  display: inline-block;\n  position: relative;\n\n  ", ";\n"])), function (_a) {
     var size = _a.size;
     return size &&
         {
@@ -123,7 +138,7 @@ var S_Dropdown = styled_components_1.default.div(templateObject_4 || (templateOb
             small: small
         }[size];
 });
-var S_Select = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  box-sizing: border-box;\n  background-color: ", ";\n  border: 1px solid\n    ", ";\n  border-radius: 8px;\n  color: ", ";\n  cursor: pointer;\n  display: flex;\n  justify-content: space-between;\n\n  ", "\n"], ["\n  align-items: center;\n  box-sizing: border-box;\n  background-color: ", ";\n  border: 1px solid\n    ", ";\n  border-radius: 8px;\n  color: ", ";\n  cursor: pointer;\n  display: flex;\n  justify-content: space-between;\n\n  ", "\n"])), function (_a) {
+var S_Select = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  box-sizing: border-box;\n  background-color: ", ";\n  border: 1px solid\n    ", ";\n  border-radius: 8px;\n  color: ", ";\n  cursor: pointer;\n  display: flex;\n  justify-content: space-between;\n\n  ", ";\n"], ["\n  align-items: center;\n  box-sizing: border-box;\n  background-color: ", ";\n  border: 1px solid\n    ", ";\n  border-radius: 8px;\n  color: ", ";\n  cursor: pointer;\n  display: flex;\n  justify-content: space-between;\n\n  ", ";\n"])), function (_a) {
     var state = _a.state, colorTheme = _a.colorTheme, theme = _a.theme;
     switch (state) {
         case 'disabled':

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

@@ -24,7 +24,7 @@ function FilterBar(_a) {
     };
     var renderingTextField = function () {
         if (displayType === 'filterchips_searchfield' || displayType === 'searchfield') {
-            return name && react_1.default.createElement(TextField_1.TextField, { name: name, size: "small", hintText: hintText });
+            return (name && (react_1.default.createElement(TextField_1.TextField, { name: name, size: "small", hintText: hintText, enterSubmitMode: "use", validationPoint: "onChange" })));
         }
     };
     return (react_1.default.createElement(S_FilterBarBox, null,

package/dist/src/desktop/components/IconButton/IconButton.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { FillIconNameKeys, LineIconNameKeys, UiColors } from '../../../common';
 export declare type IconButtonProps = {
     fillType?: 'fill' | 'line';
@@ -14,8 +14,8 @@ export declare type IconButtonProps = {
     colorTheme?: 'none' | 'line1' | 'line2';
     type?: 'submit' | 'reset' | 'button';
     state?: 'normal' | 'disabled';
-    onClick?: (...args: any) => any;
-    onMouseDown?: (...args: any) => any;
+    onClick?: () => any;
+    onMouseDown?: (e: React.MouseEvent<HTMLButtonElement>) => any;
 };
 declare function IconButton({ fillType, shapeType, baseSize, baseColorKey, borderColorKey, iconSize, iconFillType, iconName, iconColorKey, shadow, colorTheme, type, state, onClick, onMouseDown }: IconButtonProps): JSX.Element;
 export default IconButton;

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

@@ -37,9 +37,9 @@ function IconButton(_a) {
             onClick();
         }
     };
-    var handleMouseDown = function () {
+    var handleMouseDown = function (e) {
         if (onMouseDown) {
-            onMouseDown();
+            onMouseDown(e);
         }
     };
     var iconStateColorObj = {

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

@@ -270,7 +270,7 @@ var tooltipLeftTop = (0, styled_components_1.css)(templateObject_32 || (template
 var tooltipLeftBottom = (0, styled_components_1.css)(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n  right: 0;\n  top: 20px;\n"], ["\n  right: 0;\n  top: 20px;\n"])));
 var tooltipRightTop = (0, styled_components_1.css)(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n  left: 0;\n  bottom: 20px;\n"], ["\n  left: 0;\n  bottom: 20px;\n"])));
 var tooltipRightBottom = (0, styled_components_1.css)(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n  left: 0;\n  top: 20px;\n"], ["\n  left: 0;\n  top: 20px;\n"])));
-var S_TextLabel = styled_components_1.default.div(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n  box-sizing: border-box;\n  text-align: ", ";\n  white-space: pre-wrap;\n  word-break: keep-all;\n  overflow-wrap: break-word;\n  hyphens: auto;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"], ["\n  box-sizing: border-box;\n  text-align: ", ";\n  white-space: pre-wrap;\n  word-break: keep-all;\n  overflow-wrap: break-word;\n  hyphens: auto;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
+var S_TextLabel = styled_components_1.default.div(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n  box-sizing: border-box;\n  text-align: ", ";\n  white-space: pre-wrap;\n  word-break: keep-all;\n  overflow-wrap: break-word;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"], ["\n  box-sizing: border-box;\n  text-align: ", ";\n  white-space: pre-wrap;\n  word-break: keep-all;\n  overflow-wrap: break-word;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
     var textAlign = _a.textAlign;
     return textAlign;
 }, function (_a) {
@@ -352,7 +352,7 @@ var S_TooltipBox = styled_components_1.default.div(templateObject_37 || (templat
     }
 });
 var S_IconWrapper = styled_components_1.default.div(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n"])));
-var S_TooltipWrapper = styled_components_1.default.div(templateObject_39 || (templateObject_39 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  hyphens: auto;\n  line-height: ", ";\n  max-width: 320px;\n  overflow-wrap: break-word;\n  padding: ", ";\n  position: absolute;\n  text-align: left;\n  white-space: pre-wrap;\n  width: max-content;\n  word-break: keep-all;\n\n  ", ";\n\n  ", ";\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  hyphens: auto;\n  line-height: ", ";\n  max-width: 320px;\n  overflow-wrap: break-word;\n  padding: ", ";\n  position: absolute;\n  text-align: left;\n  white-space: pre-wrap;\n  width: max-content;\n  word-break: keep-all;\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
+var S_TooltipWrapper = styled_components_1.default.div(templateObject_39 || (templateObject_39 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  max-width: 320px;\n  overflow-wrap: break-word;\n  padding: ", ";\n  position: absolute;\n  text-align: left;\n  white-space: pre-wrap;\n  width: max-content;\n  word-break: keep-all;\n\n  ", ";\n\n  ", ";\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  max-width: 320px;\n  overflow-wrap: break-word;\n  padding: ", ";\n  position: absolute;\n  text-align: left;\n  white-space: pre-wrap;\n  width: max-content;\n  word-break: keep-all;\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_contextmenu_base;
 }, function (_a) {

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

@@ -30,7 +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, "$src": src }, 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 },
+    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": src }, 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) {
@@ -40,10 +40,10 @@ var wrapperStyle = (0, styled_components_1.css)(templateObject_1 || (templateObj
     var borderMode = _a.borderMode, theme = _a.theme;
     return borderMode === 'use' && "border: 1px solid " + theme.ui_profile_image_border;
 }, function (_a) {
-    var shapeType = _a.shapeType, radius = _a.radius;
+    var shapeType = _a.shapeType, $radius = _a.$radius;
     return shapeType &&
         {
-            round: "border-radius: " + radius + "px",
+            round: "border-radius: " + $radius + "px",
             circular: 'border-radius: 50%',
             rectangle: ''
         }[shapeType];

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

@@ -28,10 +28,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 /* eslint-disable react/jsx-no-bind */
 var react_1 = __importDefault(require("react"));
+var react_hook_form_1 = require("react-hook-form");
 var styled_components_1 = __importStar(require("styled-components"));
 var components_1 = require("../../common/components");
 function BlogTextField(_a) {
     var hintText = _a.hintText, defaultText = _a.defaultText, _b = _a.size, size = _b === void 0 ? 'rlarge' : _b, _c = _a.textLineType, textLineType = _c === void 0 ? 'auto' : _c, _d = _a.multiRows, multiRows = _d === void 0 ? 8 : _d, _e = _a.autoMinRows, autoMinRows = _e === void 0 ? 8 : _e, autoMaxRows = _a.autoMaxRows, _f = _a.state, state = _f === void 0 ? 'normal' : _f, _g = _a.spacingMode, spacingMode = _g === void 0 ? 'use' : _g, maxLength = _a.maxLength, name = _a.name, validation = _a.validation, onBlur = _a.onBlur, onChange = _a.onChange, onFocus = _a.onFocus, onTarget = _a.onTarget;
+    var register = (0, react_hook_form_1.useFormContext)().register;
+    var validateOnChange = register(name, validation).onChange;
     function handleFocus(e) {
         if (onFocus) {
             onFocus(e);
@@ -48,16 +51,17 @@ function BlogTextField(_a) {
         }
     }
     function handleChange(e) {
+        validateOnChange(e);
         if (onChange) {
             onChange(e);
         }
     }
     var S_BlogTextField = function () {
         if (textLineType === 'multi') {
-            return (react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, textLineType: "multi", multiRows: multiRows, state: state, maxLength: maxLength, textSize: "form1", textWeight: "normal", onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur }));
+            return (react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, textLineType: "multi", multiRows: multiRows, state: state, maxLength: maxLength, textSize: "form1", textWeight: "normal", onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, validationPoint: "onChange" }));
         }
         if (textLineType === 'auto') {
-            return (react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, textLineType: "auto", autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, state: state, maxLength: maxLength, textSize: "form1", textWeight: "normal", onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur }));
+            return (react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, textLineType: "auto", autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, state: state, maxLength: maxLength, textSize: "form1", textWeight: "normal", onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, validationPoint: "onChange" }));
         }
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,

package/dist/src/mobile/components/ContextMenuItem/ContextMenuItem.d.ts

@@ -4,11 +4,12 @@ export declare type ContextMenuItemProps = {
     option?: PDSValueOption;
     size?: 'large' | 'medium' | 'small';
     isSelected?: boolean;
+    state?: 'normal' | 'disabled';
     onClick?: (value: PDSValueOption | string | number | boolean) => void;
     /** @deprecated option 필드를 대신 사용하세요. */
     text?: PDSTextType;
     /** @deprecated option 필드를 대신 사용하세요. */
     value?: string | number | boolean;
 };
-declare function ContextMenuItem({ option, size, isSelected, onClick, text, value }: ContextMenuItemProps): JSX.Element;
+declare function ContextMenuItem({ option, size, isSelected, state, onClick, text, value }: ContextMenuItemProps): JSX.Element;
 export default ContextMenuItem;

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

@@ -30,8 +30,11 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var TextLabel_1 = require("../TextLabel");
 function ContextMenuItem(_a) {
-    var option = _a.option, _b = _a.size, size = _b === void 0 ? 'small' : _b, _c = _a.isSelected, isSelected = _c === void 0 ? false : _c, onClick = _a.onClick, text = _a.text, value = _a.value;
+    var option = _a.option, _b = _a.size, size = _b === void 0 ? 'small' : _b, _c = _a.isSelected, isSelected = _c === void 0 ? false : _c, _d = _a.state, state = _d === void 0 ? 'normal' : _d, onClick = _a.onClick, text = _a.text, value = _a.value;
     var handleClick = function () {
+        if (state === 'disabled') {
+            return;
+        }
         if (onClick && option) {
             onClick(option);
         }
@@ -39,8 +42,18 @@ function ContextMenuItem(_a) {
             onClick(value);
         }
     };
-    return (react_1.default.createElement(S_ContextMenuItem, { size: size, onClick: handleClick, selected: isSelected },
-        react_1.default.createElement(TextLabel_1.TextLabel, { text: (option === null || option === void 0 ? void 0 : option.text) || text, styleTheme: "form2Regular", singleLineMode: "use" })));
+    var textColorTheme;
+    if (isSelected) {
+        textColorTheme = 'sysTextPrimary';
+    }
+    if (!isSelected && state === 'normal') {
+        textColorTheme = 'sysTextSecondary';
+    }
+    if (state === 'disabled') {
+        textColorTheme = 'sysTextTertiary';
+    }
+    return (react_1.default.createElement(S_ContextMenuItem, { size: size, onClick: handleClick, selected: isSelected, disabled: state === 'disabled' },
+        react_1.default.createElement(TextLabel_1.TextLabel, { text: (option === null || option === void 0 ? void 0 : option.text) || text, styleTheme: "form2Regular", singleLineMode: "use", colorTheme: textColorTheme })));
 }
 var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 48px;\n  padding: 0 ", ";\n"], ["\n  height: 48px;\n  padding: 0 ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/mobile/components/Dropdown/Dropdown.d.ts

@@ -2,14 +2,15 @@
 import { TFunctionResult } from 'i18next';
 import { PDSValueOption } from '../../../common';
 declare type Props = {
-    size?: 'large' | 'small';
-    hintText?: TFunctionResult;
+    colorTheme?: 'none' | 'dark';
     defaultValue?: PDSValueOption;
-    valueArray: PDSValueOption[];
+    hintText?: TFunctionResult;
+    responsiveMode?: 'none' | 'use';
     selectionMode?: 'single' | 'multi';
+    size?: 'large' | 'small';
     state?: 'normal' | 'read_only' | 'disabled';
-    colorTheme?: 'none' | 'dark';
+    valueArray: PDSValueOption[];
     onChange?: (option: PDSValueOption) => void;
 };
-declare function Dropdown({ size, hintText, defaultValue, valueArray, selectionMode, state, colorTheme, onChange }: Props): JSX.Element;
+declare function Dropdown({ colorTheme, defaultValue, hintText, responsiveMode, selectionMode, size, state, valueArray, onChange }: Props): JSX.Element;
 export default Dropdown;

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

@@ -31,9 +31,9 @@ var ContextMenuItem_1 = require("../ContextMenuItem");
 var TextLabel_1 = require("../TextLabel");
 // TODO: selectionMode의 multi 기능 구현 추가 필요
 function Dropdown(_a) {
-    var _b = _a.size, size = _b === void 0 ? 'large' : _b, hintText = _a.hintText, defaultValue = _a.defaultValue, valueArray = _a.valueArray, _c = _a.selectionMode, selectionMode = _c === void 0 ? 'single' : _c, _d = _a.state, state = _d === void 0 ? 'normal' : _d, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'none' : _e, onChange = _a.onChange;
-    var _f = (0, react_1.useState)(false), isFocused = _f[0], setIsFocused = _f[1];
-    var _g = (0, react_1.useState)(defaultValue), selectedOption = _g[0], setSelectedOption = _g[1];
+    var _b = _a.colorTheme, colorTheme = _b === void 0 ? 'none' : _b, defaultValue = _a.defaultValue, hintText = _a.hintText, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, _d = _a.selectionMode, selectionMode = _d === void 0 ? 'single' : _d, _e = _a.size, size = _e === void 0 ? 'large' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, valueArray = _a.valueArray, onChange = _a.onChange;
+    var _g = (0, react_1.useState)(false), isFocused = _g[0], setIsFocused = _g[1];
+    var _h = (0, react_1.useState)(defaultValue), selectedOption = _h[0], setSelectedOption = _h[1];
     (0, react_1.useEffect)(function () {
         if (defaultValue) {
             setSelectedOption(defaultValue);
@@ -97,8 +97,8 @@ function Dropdown(_a) {
             return 'ui_cpnt_dropdown_text_darktheme_enabled';
         }
     };
-    return (react_1.default.createElement(S_Dropdown, { className: "container", size: size, tabIndex: 0, onBlur: handleBlur },
-        react_1.default.createElement(S_Select, { size: size, onClick: handleClick, isFocused: isFocused, state: state, colorTheme: colorTheme },
+    return (react_1.default.createElement(S_Dropdown, { className: "container", size: size, tabIndex: 0, onBlur: handleBlur, responsiveMode: responsiveMode },
+        react_1.default.createElement(S_Select, { size: size, onClick: handleClick, isFocused: isFocused, state: state, colorTheme: colorTheme, responsiveMode: responsiveMode },
             react_1.default.createElement(S_TextLabel, null,
                 react_1.default.createElement(TextLabel_1.TextLabel, { text: (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.text) || hintText, styleTheme: "form2Regular", singleLineMode: "use", colorTheme: getTextColorTheme(), colorOverride: getDarkTextColor() })),
             react_1.default.createElement(hybrid_1.Icon, { size: 16, fillType: "line", iconName: isFocused ? 'ic_arrow_up' : 'ic_arrow_down', colorKey: getIconColorKey() }),
@@ -113,9 +113,15 @@ var S_TextLabel = styled_components_1.default.div(templateObject_1 || (templateO
     var theme = _a.theme;
     return theme.spacing.spacingB;
 });
-var large = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 48px;\n  width: 432px;\n"], ["\n  height: 48px;\n  width: 432px;\n"])));
-var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 32px;\n  width: 188px;\n"], ["\n  height: 32px;\n  width: 188px;\n"])));
-var S_Dropdown = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: inline-block;\n  position: relative;\n\n  ", "\n"], ["\n  display: inline-block;\n  position: relative;\n\n  ", "\n"])), function (_a) {
+var large = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 48px;\n  width: ", ";\n"], ["\n  height: 48px;\n  width: ", ";\n"])), function (_a) {
+    var responsiveMode = _a.responsiveMode;
+    return (responsiveMode === 'use' ? '100%' : '432px');
+});
+var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 32px;\n  width: ", ";\n"], ["\n  height: 32px;\n  width: ", ";\n"])), function (_a) {
+    var responsiveMode = _a.responsiveMode;
+    return (responsiveMode === 'use' ? '100%' : '188px');
+});
+var S_Dropdown = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: inline-block;\n  position: relative;\n\n  ", ";\n"], ["\n  display: inline-block;\n  position: relative;\n\n  ", ";\n"])), function (_a) {
     var size = _a.size;
     return size &&
         {
@@ -123,7 +129,7 @@ var S_Dropdown = styled_components_1.default.div(templateObject_4 || (templateOb
             small: small
         }[size];
 });
-var S_Select = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border: 1px solid\n    ", ";\n  border-radius: 8px;\n  color: ", ";\n  display: flex;\n  justify-content: space-between;\n\n  ", "\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border: 1px solid\n    ", ";\n  border-radius: 8px;\n  color: ", ";\n  display: flex;\n  justify-content: space-between;\n\n  ", "\n"])), function (_a) {
+var S_Select = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border: 1px solid\n    ", ";\n  border-radius: 8px;\n  color: ", ";\n  display: flex;\n  justify-content: space-between;\n\n  ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border: 1px solid\n    ", ";\n  border-radius: 8px;\n  color: ", ";\n  display: flex;\n  justify-content: space-between;\n\n  ", ";\n"])), function (_a) {
     var state = _a.state, colorTheme = _a.colorTheme, theme = _a.theme;
     switch (state) {
         case 'disabled':

package/dist/src/mobile/components/IconButton/IconButton.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { FillIconNameKeys, LineIconNameKeys, UiColors } from '../../../common';
 export declare type IconButtonProps = {
     fillType?: 'fill' | 'line';
@@ -14,8 +14,8 @@ export declare type IconButtonProps = {
     colorTheme?: 'none' | 'line1' | 'line2';
     type?: 'submit' | 'reset' | 'button';
     state?: 'normal' | 'disabled';
-    onClick?: (...args: any) => any;
-    onMouseDown?: (...args: any) => any;
+    onClick?: () => any;
+    onMouseDown?: (e: React.MouseEvent<HTMLButtonElement>) => any;
 };
 declare function IconButton({ fillType, shapeType, baseSize, baseColorKey, borderColorKey, iconSize, iconFillType, iconName, iconColorKey, shadow, colorTheme, type, state, onClick, onMouseDown }: IconButtonProps): JSX.Element;
 export default IconButton;

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

@@ -37,9 +37,9 @@ function IconButton(_a) {
             onClick();
         }
     };
-    var handleMouseDown = function () {
+    var handleMouseDown = function (e) {
         if (onMouseDown) {
-            onMouseDown();
+            onMouseDown(e);
         }
     };
     var iconStateColorObj = {

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

@@ -259,7 +259,7 @@ var ellipsisStyle = (0, styled_components_1.css)(templateObject_30 || (templateO
     return lineLimit;
 });
 var userSelectModeStyle = (0, styled_components_1.css)(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n  -ms-user-select: none;\n  -moz-user-select: -moz-none;\n  -khtml-user-select: none;\n  -webkit-user-select: none;\n  user-select: none;\n"], ["\n  -ms-user-select: none;\n  -moz-user-select: -moz-none;\n  -khtml-user-select: none;\n  -webkit-user-select: none;\n  user-select: none;\n"])));
-var S_TextLabel = styled_components_1.default.div(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n  box-sizing: border-box;\n  text-align: ", ";\n  white-space: pre-wrap;\n  word-break: keep-all;\n  overflow-wrap: break-word;\n  hyphens: auto;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"], ["\n  box-sizing: border-box;\n  text-align: ", ";\n  white-space: pre-wrap;\n  word-break: keep-all;\n  overflow-wrap: break-word;\n  hyphens: auto;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
+var S_TextLabel = styled_components_1.default.div(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n  box-sizing: border-box;\n  text-align: ", ";\n  white-space: pre-wrap;\n  word-break: keep-all;\n  overflow-wrap: break-word;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"], ["\n  box-sizing: border-box;\n  text-align: ", ";\n  white-space: pre-wrap;\n  word-break: keep-all;\n  overflow-wrap: break-word;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
     var textAlign = _a.textAlign;
     return textAlign;
 }, function (_a) {

package/dist/src/mobile/layout/LayoutMS/Containers/ContentsContainer/ContentsContainer.d.ts

@@ -2,7 +2,7 @@
 export declare type ContentsContainerProps = {
     content1?: JSX.Element;
     content2?: JSX.Element;
-    layoutType: 'MSA_1' | 'MSB_1' | 'MSC_1' | 'MSC_2' | 'MSD_1' | 'MSE_1' | 'MSF_1' | 'MSF_2';
+    layoutType: 'MSA_1' | 'MSB_1' | 'MSC_1' | 'MSC_2' | 'MSD_1' | 'MSE_1' | 'MSF_1' | 'MSF_2' | 'MSG_1' | 'MSH_1';
     containerColor?: string;
     areaColor?: string;
 };

package/dist/src/mobile/layout/LayoutMS/Containers/ContentsContainer/ContentsContainer.js

@@ -15,7 +15,9 @@ var ContentsContainer = function (_a) {
         MSD_1: react_1.default.createElement(variation_1.MSD, { content1: content1, containerColor: containerColor, areaColor: areaColor }),
         MSE_1: react_1.default.createElement(variation_1.MSE, { content1: content1, containerColor: containerColor, areaColor: areaColor }),
         MSF_1: (react_1.default.createElement(variation_1.MSF, { layoutType: "MSF_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        MSF_2: (react_1.default.createElement(variation_1.MSF, { layoutType: "MSF_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor }))
+        MSF_2: (react_1.default.createElement(variation_1.MSF, { layoutType: "MSF_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
+        MSG_1: react_1.default.createElement(variation_1.MSG, { content1: content1, containerColor: containerColor, areaColor: areaColor }),
+        MSH_1: react_1.default.createElement(variation_1.MSH, { content1: content1, containerColor: containerColor, areaColor: areaColor })
     }[layoutType]));
 };
 exports.default = ContentsContainer;

package/dist/src/mobile/layout/LayoutMS/Containers/ContentsContainer/variation/MSG.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare type MSGProps = {
+    content1?: JSX.Element;
+    containerColor?: string;
+    areaColor?: string;
+};
+declare const MSG: ({ content1, containerColor, areaColor }: MSGProps) => JSX.Element;
+export default MSG;