pds-dev-kit-web-test 2.5.622 → 2.5.624

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

@@ -6,7 +6,7 @@ type UploadTextButtonProps = {
     responsiveMode?: 'none' | 'use';
     fontWeight?: 'bold' | 'regular';
     state?: 'normal' | 'disabled';
-    colorTheme?: 'none' | 'red' | 'grey_01' | 'grey2' | 'white' | 'white2';
+    colorTheme?: 'none' | 'red' | 'grey_01' | 'grey2' | 'grey3' | 'white' | 'white2';
     accept?: string;
     multipleMode?: 'none' | 'use';
     onClick?: (e: React.ChangeEvent<HTMLInputElement>) => void;

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

@@ -54,9 +54,46 @@ var textColor = {
     red: 'sysTextError',
     grey_01: 'sysTextPrimary',
     grey2: 'sysTextSecondary',
+    grey3: undefined,
     white: 'sysTextWhite',
     white2: 'sysTextWhite'
 };
+var textDisabledColor = {
+    none: 'sysTextTertiary',
+    red: 'sysTextTertiary',
+    grey_01: 'sysTextTertiary',
+    grey2: 'sysTextTertiary',
+    grey3: undefined,
+    white: 'sysTextTertiary',
+    white2: 'sysTextTertiary'
+};
+var overrideTextColor = {
+    none: undefined,
+    red: undefined,
+    grey_01: undefined,
+    grey2: undefined,
+    grey3: 'ui_141',
+    white: undefined,
+    white2: undefined
+};
+var overrideTextDisabledColor = {
+    none: undefined,
+    red: undefined,
+    grey_01: undefined,
+    grey2: undefined,
+    grey3: 'ui_142',
+    white: undefined,
+    white2: undefined
+};
+var backgroundPressedColor = {
+    none: 'ui_cpnt_button_line_base_pressed',
+    red: 'ui_cpnt_button_line_base_pressed',
+    grey_01: 'ui_cpnt_button_line_base_pressed',
+    grey2: 'ui_cpnt_button_line_base_pressed',
+    grey3: 'ui_144',
+    white: 'ui_cpnt_button_white_base_pressed',
+    white2: 'ui_cpnt_textbutton_white_variation_base_pressed'
+};
 function UploadTextButton(_a) {
     var text = _a.text, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, fontWeight = _a.fontWeight, _d = _a.state, state = _d === void 0 ? 'normal' : _d, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'none' : _e, _f = _a.accept, accept = _f === void 0 ? '*' : _f, _g = _a.multipleMode, multipleMode = _g === void 0 ? 'none' : _g, onClick = _a.onClick;
     var handleClick = function (e) {
@@ -65,7 +102,9 @@ function UploadTextButton(_a) {
         }
         e.target.value = '';
     };
-    return ((0, jsx_runtime_1.jsxs)(S_UploadTextButton, __assign({ "x-pds-name": "UploadTextButton", "x-pds-element-type": "component", "x-pds-device-type": "mobile", size: size, responsiveMode: responsiveMode, fontWeight: fontWeight, disabled: state === 'disabled', colorTheme: colorTheme }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "file", hidden: true, disabled: state === 'disabled', accept: accept, multiple: multipleMode === 'use', onChange: handleClick }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor[colorTheme], singleLineMode: "use", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })] })));
+    return ((0, jsx_runtime_1.jsxs)(S_UploadTextButton, __assign({ "x-pds-name": "UploadTextButton", "x-pds-element-type": "component", "x-pds-device-type": "mobile", size: size, responsiveMode: responsiveMode, fontWeight: fontWeight, disabled: state === 'disabled', pressedColor: backgroundPressedColor[colorTheme] }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "file", hidden: true, disabled: state === 'disabled', accept: accept, multiple: multipleMode === 'use', onChange: handleClick }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? textDisabledColor[colorTheme] : textColor[colorTheme], colorOverride: state === 'disabled'
+                    ? overrideTextDisabledColor[colorTheme]
+                    : overrideTextColor[colorTheme], singleLineMode: "use", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })] })));
 }
 var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 14px;\n  height: 48px;\n  width: ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"], ["\n  border-radius: 14px;\n  height: 48px;\n  width: ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"])), function (_a) {
     var size = _a.size;
@@ -74,37 +113,12 @@ var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 =
 var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 14px;\n  height: 40px;\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n"], ["\n  border-radius: 14px;\n  height: 40px;\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n"])));
 var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-radius: 10px;\n  height: 32px;\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"], ["\n  border-radius: 10px;\n  height: 32px;\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"])));
 var xsmall = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border-radius: 8px;\n  height: 24px;\n\n  & > div {\n    height: 24px;\n    line-height: 24px;\n  }\n"], ["\n  border-radius: 8px;\n  height: 24px;\n\n  & > div {\n    height: 24px;\n    line-height: 24px;\n  }\n"])));
-var colorThemeDefault = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n"], ["\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_button_line_base_pressed;
-});
-var colorThemeWhite = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n"], ["\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_button_white_base_pressed;
-});
-var colorThemeWhite2 = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n"], ["\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_textbutton_white_variation_base_pressed;
-});
-var S_UploadTextButton = styled_components_1.default.label(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  display: inline-flex;\n  justify-content: center;\n  padding: 0 ", ";\n\n  ", "\n\n  ", ";\n\n  & > div {\n    font-weight: ", ";\n  }\n\n  ", ";\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  display: inline-flex;\n  justify-content: center;\n  padding: 0 ", ";\n\n  ", "\n\n  ", ";\n\n  & > div {\n    font-weight: ", ";\n  }\n\n  ", ";\n  ", ";\n"])), function (_a) {
+var S_UploadTextButton = styled_components_1.default.label(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  display: inline-flex;\n  justify-content: center;\n  padding: 0 ", ";\n\n  ", "\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n\n  & > div {\n    font-weight: ", ";\n  }\n\n  ", ";\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  display: inline-flex;\n  justify-content: center;\n  padding: 0 ", ";\n\n  ", "\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n\n  & > div {\n    font-weight: ", ";\n  }\n\n  ", ";\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
 }, transitionStyle_1.ButtonTransition, function (_a) {
-    var colorTheme = _a.colorTheme;
-    switch (colorTheme) {
-        case 'none':
-        case 'red':
-        case 'grey_01':
-            return colorThemeDefault;
-        case 'grey2':
-            return colorThemeDefault;
-        case 'white':
-            return colorThemeWhite;
-        case 'white2':
-            return colorThemeWhite2;
-        default:
-            return colorThemeDefault;
-    }
+    var pressedColor = _a.pressedColor, theme = _a.theme;
+    return theme[pressedColor];
 }, function (_a) {
     var theme = _a.theme, fontWeight = _a.fontWeight;
     return fontWeight &&
@@ -127,4 +141,4 @@ var S_UploadTextButton = styled_components_1.default.label(templateObject_8 || (
     return responsiveMode === 'use' && 'width: 100%';
 });
 exports.default = UploadTextButton;
-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;

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

@@ -5,6 +5,7 @@ import { BasicList } from './BasicList';
 import { BasicListItem } from './BasicListItem';
 import { BlogTextField } from './BlogTextField';
 import { BodyTextGroup } from './BodyTextGroup';
+import { BoxItem } from './BoxItem';
 import { Card } from './Card';
 import { CardList } from './CardList';
 import { ChatBubbleListItem } from './ChatBubbleListItem';
@@ -24,11 +25,14 @@ import { MainButton } from './MainButton';
 import { MobileAlertDialog } from './MobileAlertDialog';
 import { MobileHeaderBar } from './MobileHeaderBar';
 import { MobileTabBar } from './MobileTabBar';
+import { PriceTextField } from './PriceTextField';
+import { PriceTextLabel } from './PriceTextLabel';
 import { Radio } from './Radio';
 import { ReactionButton } from './ReactionButton';
 import { SegmentedButtonGroup } from './SegmentedButtonGroup';
 import { Select } from './Select';
 import { Slider } from './Slider';
+import { Snackbar } from './Snackbar';
 import { StatusBlock } from './StatusBlock';
 import { TextButton } from './TextButton';
 import { TextField } from './TextField';
@@ -36,4 +40,4 @@ import { TextLabel } from './TextLabel';
 import { UploadIconButton } from './UploadIconButton';
 import { UploadMainButton } from './UploadMainButton';
 import { UploadTextButton } from './UploadTextButton';
-export { BasicButtonGroup, BasicChatListItem, BasicFormGroup, BasicList, BasicListItem, BlogTextField, BodyTextGroup, Card, CardList, ChatBubbleListItem, ChatList, Checkbox, Chip, ContextMenu, ContextMenuItem, DatePicker, Dropdown, FloatingActionButton, HorizontalFormGroup, IconButton, ImageSlide, LottieReactionButton, MainButton, MobileAlertDialog, MobileHeaderBar, MobileTabBar, Radio, ReactionButton, SegmentedButtonGroup, Select, Slider, StatusBlock, TextButton, TextField, TextLabel, UploadIconButton, UploadMainButton, UploadTextButton };
+export { BasicButtonGroup, BasicChatListItem, BasicFormGroup, BasicList, BasicListItem, BlogTextField, BodyTextGroup, BoxItem, Card, CardList, ChatBubbleListItem, ChatList, Checkbox, Chip, ContextMenu, ContextMenuItem, DatePicker, Dropdown, FloatingActionButton, HorizontalFormGroup, IconButton, ImageSlide, LottieReactionButton, MainButton, MobileAlertDialog, MobileHeaderBar, MobileTabBar, PriceTextField, PriceTextLabel, Radio, ReactionButton, SegmentedButtonGroup, Select, Slider, Snackbar, StatusBlock, TextButton, TextField, TextLabel, UploadIconButton, UploadMainButton, UploadTextButton };

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UploadTextButton = exports.UploadMainButton = exports.UploadIconButton = exports.TextLabel = exports.TextField = exports.TextButton = exports.StatusBlock = exports.Slider = exports.Select = exports.SegmentedButtonGroup = exports.ReactionButton = exports.Radio = exports.MobileTabBar = exports.MobileHeaderBar = exports.MobileAlertDialog = exports.MainButton = exports.LottieReactionButton = exports.ImageSlide = exports.IconButton = exports.HorizontalFormGroup = exports.FloatingActionButton = exports.Dropdown = exports.DatePicker = exports.ContextMenuItem = exports.ContextMenu = exports.Chip = exports.Checkbox = exports.ChatList = exports.ChatBubbleListItem = exports.CardList = exports.Card = exports.BodyTextGroup = exports.BlogTextField = exports.BasicListItem = exports.BasicList = exports.BasicFormGroup = exports.BasicChatListItem = exports.BasicButtonGroup = void 0;
+exports.UploadTextButton = exports.UploadMainButton = exports.UploadIconButton = exports.TextLabel = exports.TextField = exports.TextButton = exports.StatusBlock = exports.Snackbar = exports.Slider = exports.Select = exports.SegmentedButtonGroup = exports.ReactionButton = exports.Radio = exports.PriceTextLabel = exports.PriceTextField = exports.MobileTabBar = exports.MobileHeaderBar = exports.MobileAlertDialog = exports.MainButton = exports.LottieReactionButton = exports.ImageSlide = exports.IconButton = exports.HorizontalFormGroup = exports.FloatingActionButton = exports.Dropdown = exports.DatePicker = exports.ContextMenuItem = exports.ContextMenu = exports.Chip = exports.Checkbox = exports.ChatList = exports.ChatBubbleListItem = exports.CardList = exports.Card = exports.BoxItem = exports.BodyTextGroup = exports.BlogTextField = exports.BasicListItem = exports.BasicList = exports.BasicFormGroup = exports.BasicChatListItem = exports.BasicButtonGroup = void 0;
 var BasicButtonGroup_1 = require("./BasicButtonGroup");
 Object.defineProperty(exports, "BasicButtonGroup", { enumerable: true, get: function () { return BasicButtonGroup_1.BasicButtonGroup; } });
 var BasicChatListItem_1 = require("./BasicChatListItem");
@@ -15,6 +15,8 @@ var BlogTextField_1 = require("./BlogTextField");
 Object.defineProperty(exports, "BlogTextField", { enumerable: true, get: function () { return BlogTextField_1.BlogTextField; } });
 var BodyTextGroup_1 = require("./BodyTextGroup");
 Object.defineProperty(exports, "BodyTextGroup", { enumerable: true, get: function () { return BodyTextGroup_1.BodyTextGroup; } });
+var BoxItem_1 = require("./BoxItem");
+Object.defineProperty(exports, "BoxItem", { enumerable: true, get: function () { return BoxItem_1.BoxItem; } });
 var Card_1 = require("./Card");
 Object.defineProperty(exports, "Card", { enumerable: true, get: function () { return Card_1.Card; } });
 var CardList_1 = require("./CardList");
@@ -53,6 +55,10 @@ var MobileHeaderBar_1 = require("./MobileHeaderBar");
 Object.defineProperty(exports, "MobileHeaderBar", { enumerable: true, get: function () { return MobileHeaderBar_1.MobileHeaderBar; } });
 var MobileTabBar_1 = require("./MobileTabBar");
 Object.defineProperty(exports, "MobileTabBar", { enumerable: true, get: function () { return MobileTabBar_1.MobileTabBar; } });
+var PriceTextField_1 = require("./PriceTextField");
+Object.defineProperty(exports, "PriceTextField", { enumerable: true, get: function () { return PriceTextField_1.PriceTextField; } });
+var PriceTextLabel_1 = require("./PriceTextLabel");
+Object.defineProperty(exports, "PriceTextLabel", { enumerable: true, get: function () { return PriceTextLabel_1.PriceTextLabel; } });
 var Radio_1 = require("./Radio");
 Object.defineProperty(exports, "Radio", { enumerable: true, get: function () { return Radio_1.Radio; } });
 var ReactionButton_1 = require("./ReactionButton");
@@ -63,6 +69,8 @@ var Select_1 = require("./Select");
 Object.defineProperty(exports, "Select", { enumerable: true, get: function () { return Select_1.Select; } });
 var Slider_1 = require("./Slider");
 Object.defineProperty(exports, "Slider", { enumerable: true, get: function () { return Slider_1.Slider; } });
+var Snackbar_1 = require("./Snackbar");
+Object.defineProperty(exports, "Snackbar", { enumerable: true, get: function () { return Snackbar_1.Snackbar; } });
 var StatusBlock_1 = require("./StatusBlock");
 Object.defineProperty(exports, "StatusBlock", { enumerable: true, get: function () { return StatusBlock_1.StatusBlock; } });
 var TextButton_1 = require("./TextButton");

package/dist/src/mobile/index.d.ts

@@ -9,5 +9,5 @@ export { ContainersBox as MPContainersBox } from './layout/LayoutMP/ContainersBo
 export { LayoutMS } from './layout/LayoutMS';
 export { NavigationContainer as MSNavigationContainer } from './layout/LayoutMS/Containers';
 export { ContainersBox as MSContainersBox } from './layout/LayoutMS/ContainersBox';
-export { BasicButtonGroup as M_BasicButtonGroup, BasicChatListItem as M_BasicChatListItem, BasicFormGroup as M_BasicFormGroup, BasicList as M_BasicList, BasicListItem as M_BasicListItem, BlogTextField as M_BlogTextField, BodyTextGroup as M_BodyTextGroup, Card as M_Card, CardList as M_CardList, ChatBubbleListItem as M_ChatBubbleListItem, ChatList as M_ChatList, Checkbox as M_Checkbox, Chip as M_Chip, ContextMenu as M_ContextMenu, ContextMenuItem as M_ContextMenuItem, DatePicker as M_DatePicker, Dropdown as M_Dropdown, FloatingActionButton as M_FloatingActionButton, HorizontalFormGroup as M_HorizontalFormGroup, IconButton as M_IconButton, ImageSlide as M_ImageSlide, LottieReactionButton as M_LottieReactionButton, MainButton as M_MainButton, MobileAlertDialog as M_MobileAlertDialog, MobileHeaderBar as M_MobileHeaderBar, MobileTabBar as M_MobileTabBar, Radio as M_Radio, ReactionButton as M_ReactionButton, SegmentedButtonGroup as M_SegmentedButtonGroup, Select as M_Select, Slider as M_Slider, StatusBlock as M_StatusBlock, TextButton as M_TextButton, TextField as M_TextField, TextLabel as M_TextLabel, UploadIconButton as M_UploadIconButton, UploadMainButton as M_UploadMainButton, UploadTextButton as M_UploadTextButton } from './components';
+export { BasicButtonGroup as M_BasicButtonGroup, BasicChatListItem as M_BasicChatListItem, BasicFormGroup as M_BasicFormGroup, BasicList as M_BasicList, BasicListItem as M_BasicListItem, BlogTextField as M_BlogTextField, BodyTextGroup as M_BodyTextGroup, BoxItem as M_BoxItem, Card as M_Card, CardList as M_CardList, ChatBubbleListItem as M_ChatBubbleListItem, ChatList as M_ChatList, Checkbox as M_Checkbox, Chip as M_Chip, ContextMenu as M_ContextMenu, ContextMenuItem as M_ContextMenuItem, DatePicker as M_DatePicker, Dropdown as M_Dropdown, FloatingActionButton as M_FloatingActionButton, HorizontalFormGroup as M_HorizontalFormGroup, IconButton as M_IconButton, ImageSlide as M_ImageSlide, LottieReactionButton as M_LottieReactionButton, MainButton as M_MainButton, MobileAlertDialog as M_MobileAlertDialog, MobileHeaderBar as M_MobileHeaderBar, MobileTabBar as M_MobileTabBar, Radio as M_Radio, ReactionButton as M_ReactionButton, SegmentedButtonGroup as M_SegmentedButtonGroup, Select as M_Select, Slider as M_Slider, Snackbar as M_Snackbar, StatusBlock as M_StatusBlock, TextButton as M_TextButton, PriceTextField as M_PriceTextField, TextField as M_TextField, TextLabel as M_TextLabel, PriceTextLabel as M_PriceTextLabel, UploadIconButton as M_UploadIconButton, UploadMainButton as M_UploadMainButton, UploadTextButton as M_UploadTextButton } from './components';
 export { AnnotationSheet as M_AnnotationSheet, ContentSheet as M_ContentSheet, MobileBasicModal as M_MobileBasicModal, SectionSheet as M_SectionSheet } from './panels';

package/dist/src/mobile/index.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.M_UploadTextButton = exports.M_UploadMainButton = exports.M_UploadIconButton = exports.M_TextLabel = exports.M_TextField = exports.M_TextButton = exports.M_StatusBlock = exports.M_Slider = exports.M_Select = exports.M_SegmentedButtonGroup = exports.M_ReactionButton = exports.M_Radio = exports.M_MobileTabBar = exports.M_MobileHeaderBar = exports.M_MobileAlertDialog = exports.M_MainButton = exports.M_LottieReactionButton = exports.M_ImageSlide = exports.M_IconButton = exports.M_HorizontalFormGroup = exports.M_FloatingActionButton = exports.M_Dropdown = exports.M_DatePicker = exports.M_ContextMenuItem = exports.M_ContextMenu = exports.M_Chip = exports.M_Checkbox = exports.M_ChatList = exports.M_ChatBubbleListItem = exports.M_CardList = exports.M_Card = exports.M_BodyTextGroup = exports.M_BlogTextField = exports.M_BasicListItem = exports.M_BasicList = exports.M_BasicFormGroup = exports.M_BasicChatListItem = exports.M_BasicButtonGroup = exports.MSContainersBox = exports.MSNavigationContainer = exports.LayoutMS = exports.MPContainersBox = exports.MPTabContainer = exports.MPNavigationContainer = exports.LayoutMP = exports.MMContainersBox = exports.MMNavigationContainer = exports.LayoutMM = exports.MFContainersBox = exports.LayoutMF = void 0;
-exports.M_SectionSheet = exports.M_MobileBasicModal = exports.M_ContentSheet = exports.M_AnnotationSheet = void 0;
+exports.M_TextLabel = exports.M_TextField = exports.M_PriceTextField = exports.M_TextButton = exports.M_StatusBlock = exports.M_Snackbar = exports.M_Slider = exports.M_Select = exports.M_SegmentedButtonGroup = exports.M_ReactionButton = exports.M_Radio = exports.M_MobileTabBar = exports.M_MobileHeaderBar = exports.M_MobileAlertDialog = exports.M_MainButton = exports.M_LottieReactionButton = exports.M_ImageSlide = exports.M_IconButton = exports.M_HorizontalFormGroup = exports.M_FloatingActionButton = exports.M_Dropdown = exports.M_DatePicker = exports.M_ContextMenuItem = exports.M_ContextMenu = exports.M_Chip = exports.M_Checkbox = exports.M_ChatList = exports.M_ChatBubbleListItem = exports.M_CardList = exports.M_Card = exports.M_BoxItem = exports.M_BodyTextGroup = exports.M_BlogTextField = exports.M_BasicListItem = exports.M_BasicList = exports.M_BasicFormGroup = exports.M_BasicChatListItem = exports.M_BasicButtonGroup = exports.MSContainersBox = exports.MSNavigationContainer = exports.LayoutMS = exports.MPContainersBox = exports.MPTabContainer = exports.MPNavigationContainer = exports.LayoutMP = exports.MMContainersBox = exports.MMNavigationContainer = exports.LayoutMM = exports.MFContainersBox = exports.LayoutMF = void 0;
+exports.M_SectionSheet = exports.M_MobileBasicModal = exports.M_ContentSheet = exports.M_AnnotationSheet = exports.M_UploadTextButton = exports.M_UploadMainButton = exports.M_UploadIconButton = exports.M_PriceTextLabel = void 0;
 // layoutMF
 var LayoutMF_1 = require("./layout/LayoutMF");
 Object.defineProperty(exports, "LayoutMF", { enumerable: true, get: function () { return LayoutMF_1.LayoutMF; } });
@@ -38,6 +38,7 @@ Object.defineProperty(exports, "M_BasicList", { enumerable: true, get: function
 Object.defineProperty(exports, "M_BasicListItem", { enumerable: true, get: function () { return components_1.BasicListItem; } });
 Object.defineProperty(exports, "M_BlogTextField", { enumerable: true, get: function () { return components_1.BlogTextField; } });
 Object.defineProperty(exports, "M_BodyTextGroup", { enumerable: true, get: function () { return components_1.BodyTextGroup; } });
+Object.defineProperty(exports, "M_BoxItem", { enumerable: true, get: function () { return components_1.BoxItem; } });
 Object.defineProperty(exports, "M_Card", { enumerable: true, get: function () { return components_1.Card; } });
 Object.defineProperty(exports, "M_CardList", { enumerable: true, get: function () { return components_1.CardList; } });
 Object.defineProperty(exports, "M_ChatBubbleListItem", { enumerable: true, get: function () { return components_1.ChatBubbleListItem; } });
@@ -62,10 +63,13 @@ Object.defineProperty(exports, "M_ReactionButton", { enumerable: true, get: func
 Object.defineProperty(exports, "M_SegmentedButtonGroup", { enumerable: true, get: function () { return components_1.SegmentedButtonGroup; } });
 Object.defineProperty(exports, "M_Select", { enumerable: true, get: function () { return components_1.Select; } });
 Object.defineProperty(exports, "M_Slider", { enumerable: true, get: function () { return components_1.Slider; } });
+Object.defineProperty(exports, "M_Snackbar", { enumerable: true, get: function () { return components_1.Snackbar; } });
 Object.defineProperty(exports, "M_StatusBlock", { enumerable: true, get: function () { return components_1.StatusBlock; } });
 Object.defineProperty(exports, "M_TextButton", { enumerable: true, get: function () { return components_1.TextButton; } });
+Object.defineProperty(exports, "M_PriceTextField", { enumerable: true, get: function () { return components_1.PriceTextField; } });
 Object.defineProperty(exports, "M_TextField", { enumerable: true, get: function () { return components_1.TextField; } });
 Object.defineProperty(exports, "M_TextLabel", { enumerable: true, get: function () { return components_1.TextLabel; } });
+Object.defineProperty(exports, "M_PriceTextLabel", { enumerable: true, get: function () { return components_1.PriceTextLabel; } });
 Object.defineProperty(exports, "M_UploadIconButton", { enumerable: true, get: function () { return components_1.UploadIconButton; } });
 Object.defineProperty(exports, "M_UploadMainButton", { enumerable: true, get: function () { return components_1.UploadMainButton; } });
 Object.defineProperty(exports, "M_UploadTextButton", { enumerable: true, get: function () { return components_1.UploadTextButton; } });

package/dist/src/sub/AdminList/AdminList/AdminList.js

@@ -200,17 +200,26 @@ function AdminList(_a) {
                 ? react_1.default.isValidElement(bulkActionBar) && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: react_1.default.cloneElement(bulkActionBar, {
                         itemCount: totalItemCount
                     }) }))
-                : toolBar && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [toolBar, (0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_d" })] })), headerRowMode === 'use' && ((0, jsx_runtime_1.jsx)(react_hook_form_1.FormProvider, __assign({}, selectAllMethods, { children: (0, jsx_runtime_1.jsx)("form", { children: (0, jsx_runtime_1.jsx)(HeaderRow_1.default, { headerRowCheckboxName: headerRowCheckboxName, selectionMode: selectionMode, column2HeaderText: column2HeaderText, column3HeaderText: column3HeaderText, column3HeaderWidth: column3Width, column4HeaderText: column4HeaderText, column4HeaderWidth: column4Width, column5HeaderText: column5HeaderText, column5HeaderWidth: column5Width, column6HeaderText: column6HeaderText, column6HeaderWidth: column6Width, column7HeaderText: column7HeaderText, column7HeaderWidth: column7Width, column8HeaderText: column8HeaderText, column8HeaderWidth: column8Width, column9HeaderText: column9HeaderText, column9HeaderWidth: column9Width, column10HeaderText: column10HeaderText, column10HeaderWidth: column10Width, quickActionBtnType: quickActionBtnType, quickActionButtonCount: getActionButtonCount(), flexibleHideInfoMode: flexibleHideInfoMode, onClickSelectAllCheckbox: handleSelectAllCheckbox }) }) }))), (0, jsx_runtime_1.jsx)(S_ScrollBox, __assign({ scrollMode: scrollMode, scrollVisibleType: scrollVisibleType }, { children: react_1.default.Children.count(children) ? ((0, jsx_runtime_1.jsx)(react_hook_form_1.FormProvider, __assign({}, checkboxMethods, { children: (0, jsx_runtime_1.jsx)("form", { children: childrenWithWidthProps }) }))) : ((0, jsx_runtime_1.jsx)(S_EmptyTextWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: emptyText, colorTheme: "sysTextTertiary", textAlign: "center", styleTheme: "body2Regular" }) })) }))] })));
+                : toolBar && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [toolBar, (0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_d" })] })), headerRowMode === 'use' && ((0, jsx_runtime_1.jsx)(react_hook_form_1.FormProvider, __assign({}, selectAllMethods, { children: (0, jsx_runtime_1.jsx)(HeaderRowStyle, __assign({ scrollVisibleType: scrollVisibleType, scrollMode: scrollMode }, { children: (0, jsx_runtime_1.jsx)(HeaderRow_1.default, { headerRowCheckboxName: headerRowCheckboxName, selectionMode: selectionMode, column2HeaderText: column2HeaderText, column3HeaderText: column3HeaderText, column3HeaderWidth: column3Width, column4HeaderText: column4HeaderText, column4HeaderWidth: column4Width, column5HeaderText: column5HeaderText, column5HeaderWidth: column5Width, column6HeaderText: column6HeaderText, column6HeaderWidth: column6Width, column7HeaderText: column7HeaderText, column7HeaderWidth: column7Width, column8HeaderText: column8HeaderText, column8HeaderWidth: column8Width, column9HeaderText: column9HeaderText, column9HeaderWidth: column9Width, column10HeaderText: column10HeaderText, column10HeaderWidth: column10Width, quickActionBtnType: quickActionBtnType, quickActionButtonCount: getActionButtonCount(), flexibleHideInfoMode: flexibleHideInfoMode, onClickSelectAllCheckbox: handleSelectAllCheckbox }) })) }))), (0, jsx_runtime_1.jsx)(S_ScrollBox, __assign({ scrollMode: scrollMode, scrollVisibleType: scrollVisibleType }, { children: react_1.default.Children.count(children) ? ((0, jsx_runtime_1.jsx)(react_hook_form_1.FormProvider, __assign({}, checkboxMethods, { children: (0, jsx_runtime_1.jsx)("form", { children: childrenWithWidthProps }) }))) : ((0, jsx_runtime_1.jsx)(S_EmptyTextWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: emptyText, colorTheme: "sysTextTertiary", textAlign: "center", styleTheme: "body2Regular" }) })) }))] })));
 }
-var scrollInvisible = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &::-webkit-scrollbar {\n    all: unset;\n    display: block;\n  }\n"], ["\n  &::-webkit-scrollbar {\n    all: unset;\n    display: block;\n  }\n"])));
-var scrollVisible = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"], ["\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"])));
-var S_AdminList = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"])));
-var S_ScrollBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  flex: 1;\n  overflow-y: ", ";\n\n  ", "\n"], ["\n  flex: 1;\n  overflow-y: ", ";\n\n  ", "\n"])), function (_a) {
+var HeaderRowStyle = styled_components_1.default.form(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding-right: ", ";\n"], ["\n  padding-right: ", ";\n"])), function (_a) {
+    var scrollVisibleType = _a.scrollVisibleType;
+    return scrollVisibleType !== 'hidden' && '8px';
+});
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+var scrollInvisible = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  &::-webkit-scrollbar {\n    all: unset;\n    display: block;\n  }\n"], ["\n  &::-webkit-scrollbar {\n    all: unset;\n    display: block;\n  }\n"])));
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+var scrollVisible = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  &::-webkit-scrollbar {\n    width: 8px;\n    height: 8px;\n    display: initial;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    border-radius: 4px;\n  }\n\n  &::-webkit-scrollbar-track {\n    background-color: transparent;\n  }\n"], ["\n  &::-webkit-scrollbar {\n    width: 8px;\n    height: 8px;\n    display: initial;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    border-radius: 4px;\n  }\n\n  &::-webkit-scrollbar-track {\n    background-color: transparent;\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_line_border_enabled;
+});
+var S_AdminList = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"])));
+var S_ScrollBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  flex: 1;\n  overflow-x: hidden;\n  overflow-y: ", ";\n  position: relative;\n  &::-webkit-scrollbar {\n    all: unset;\n    display: block;\n    height: 8px;\n    width: 8px;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background-color: #ccc;\n    border-radius: 4px;\n  }\n\n  &::-webkit-scrollbar-track {\n    background-color: transparent;\n  }\n\n  scrollbar-gutter: stable;\n  scrollbar-width: ", ";\n"], ["\n  flex: 1;\n  overflow-x: hidden;\n  overflow-y: ", ";\n  position: relative;\n  &::-webkit-scrollbar {\n    all: unset;\n    display: block;\n    height: 8px;\n    width: 8px;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background-color: #ccc;\n    border-radius: 4px;\n  }\n\n  &::-webkit-scrollbar-track {\n    background-color: transparent;\n  }\n\n  scrollbar-gutter: stable;\n  scrollbar-width: ", ";\n"])), function (_a) {
     var scrollMode = _a.scrollMode;
     switch (scrollMode) {
         case 'infinite':
         case 'page': {
-            return 'auto';
+            return 'overlay';
         }
         case 'none': {
             return 'none';
@@ -218,16 +227,8 @@ var S_ScrollBox = styled_components_1.default.div(templateObject_4 || (templateO
     }
 }, function (_a) {
     var scrollVisibleType = _a.scrollVisibleType;
-    switch (scrollVisibleType) {
-        case 'moving':
-        case 'visible': {
-            return scrollVisible;
-        }
-        case 'hidden': {
-            return scrollInvisible;
-        }
-    }
+    return (scrollVisibleType === 'hidden' ? 'none' : 'auto');
 });
-var S_EmptyTextWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  padding-bottom: 88px;\n  padding-top: 88px;\n"], ["\n  padding-bottom: 88px;\n  padding-top: 88px;\n"])));
+var S_EmptyTextWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  padding-bottom: 88px;\n  padding-top: 88px;\n"], ["\n  padding-bottom: 88px;\n  padding-top: 88px;\n"])));
 exports.default = AdminList;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/dist/src/sub/DynamicLayout/CompositionRenderer/ComponentBlockMatcher.js

@@ -46,12 +46,9 @@ function ComponentBlockMatcher(_a) {
             return (0, jsx_runtime_1.jsx)(Youtube_1.Youtube, __assign({}, propsWithValue, { index: index }));
         case types_1.CB_ALL_CODES.CB_EMBED:
             return (0, jsx_runtime_1.jsx)(Embed_1.default, __assign({}, propsWithValue, { index: index }));
-        case types_1.CB_ALL_CODES.CB_CONTENTSCAROUSEL: {
+        case types_1.CB_ALL_CODES.CB_CONTENTS_CAROUSEL: {
             return (0, jsx_runtime_1.jsx)("div", { children: "NOT SUPPORTED NESTED CAROUSEL" });
         }
-        case types_1.CB_ALL_CODES.CB_LIST: {
-            return (0, jsx_runtime_1.jsx)("div", { children: "NOT SUPPORTED NESTED CONTENTSLIST" });
-        }
         default:
             return (0, jsx_runtime_1.jsx)("div", { children: "Error: not supported CB" });
     }

package/dist/src/sub/DynamicLayout/CompositionRenderer/Composition.d.ts

@@ -1,11 +1,9 @@
 import React from 'react';
-import type { IComposition } from '../types';
-import type { Layout } from 'publ-echo-test/dist/lib/GridLayoutEditor/types';
+import type { ISection } from '../types';
+import type { Layout } from 'publ-echo/dist/lib/GridLayoutEditor/types';
 export type LayoutsType = {
     sm: Layout;
     lg: Layout;
 };
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<IComposition & {
-    device?: "DESKTOP" | "MOBILE" | undefined;
-} & React.RefAttributes<unknown>>>;
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<ISection & React.RefAttributes<unknown>>>;
 export default _default;

package/dist/src/sub/DynamicLayout/CompositionRenderer/Composition.js

@@ -47,31 +47,36 @@ var react_1 = __importStar(require("react"));
 var ErrorBoundary_1 = require("../../DynamicLayout/components/Section/ErrorBoundary");
 var dynamicLayoutContext_1 = require("../../DynamicLayout/dynamicLayoutContext");
 var styled_components_1 = __importDefault(require("styled-components"));
-require("../components");
+var components_1 = require("../components");
 var gleStyles_1 = require("../gleStyles");
 var useResizableObserver_1 = require("../sections/CustomSection/hooks/useResizableObserver");
-require("../sections/CustomSection/util");
+var util_1 = require("../sections/CustomSection/util");
 var parseSectionPadding_1 = __importDefault(require("../sections/CustomSection/util/layoutPropParsers/parseSectionPadding"));
-var parseCompositionPlacement_1 = __importDefault(require("../sections/CustomSection/util/parseCompositionPlacement"));
-var CompositionBackground_1 = __importDefault(require("./CompositionBackground"));
 var FlexGridItem_1 = __importDefault(require("./FlexGridItem"));
+var GRID_CELL_MIN = 24;
+var DESKTOP_GRID_COLS = 24;
+var MOBILE_GRID_COLS = 8;
+var GLE_MIN_WIDTH_DESKTOP_PX = "".concat(GRID_CELL_MIN * DESKTOP_GRID_COLS, "px");
+var GLE_MIN_WIDTH_MOBILE_PX = "".concat(GRID_CELL_MIN * MOBILE_GRID_COLS, "px");
 var Composition = (0, react_1.forwardRef)(function CustomSection(props, ref) {
-    var _a, _b, _c, _d, _e;
-    var _f = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _f.device, editingSectionId = _f.editingSectionId, mode = _f.mode, shortcutKeyMode = _f.shortcutKeyMode, sectionActionHandler = _f.sectionActionHandler, queryData = _f.queryData;
+    var _a;
+    var _b = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _b.device, editingSectionId = _b.editingSectionId, mode = _b.mode, shortcutKeyMode = _b.shortcutKeyMode, sectionActionHandler = _b.sectionActionHandler;
     var componentBlocks = props.componentBlocks, jsonProperties = props.jsonProperties;
-    var isMobile = device === 'MOBILE';
-    var isEditMode = mode === 'EDIT';
-    var _g = jsonProperties, _h = _g.data, CB_PLACEMENT_PROP_COMPOSITION = _h.CB_PLACEMENT_PROP_COMPOSITION, CB_LAYOUT_PROP_PADDING = _h.CB_LAYOUT_PROP_PADDING, zOrders = _g.zOrders;
-    var colsDesktop = (_a = CB_PLACEMENT_PROP_COMPOSITION.CB_PLACEMENT_PROP_COMPOSITION_SPEC_COLUMNS) !== null && _a !== void 0 ? _a : 24;
-    var colsMobile = (_b = CB_PLACEMENT_PROP_COMPOSITION['CB_PLACEMENT_PROP_COMPOSITION_SPEC_COLUMNS:MOBILE']) !== null && _b !== void 0 ? _b : 8;
-    var rowsDesktop = (_c = CB_PLACEMENT_PROP_COMPOSITION.CB_PLACEMENT_PROP_COMPOSITION_SPEC_ROWS) !== null && _c !== void 0 ? _c : 26;
-    var rowsMobile = (_d = CB_PLACEMENT_PROP_COMPOSITION['CB_PLACEMENT_PROP_COMPOSITION_SPEC_ROWS:MOBILE']) !== null && _d !== void 0 ? _d : 26;
-    var rows = isMobile ? rowsMobile : rowsDesktop;
-    var cols = isMobile ? colsMobile : colsDesktop;
+    var _c = jsonProperties, _d = _c.data, CB_PLACEMENT_PROP_SECTION = _d.CB_PLACEMENT_PROP_SECTION, CB_LAYOUT_PROP_PADDING = _d.CB_LAYOUT_PROP_PADDING, zOrders = _c.zOrders;
     var containerRef = (0, react_1.useRef)(null);
     var size = (0, useResizableObserver_1.useResizeObserver)({ ref: containerRef, box: 'border-box' });
-    var _j = (0, react_1.useState)(null), selectedCB = _j[0], setSelectedCB = _j[1];
+    var _e = (0, react_1.useState)(null), selectedCB = _e[0], setSelectedCB = _e[1];
     var gleRef = (0, react_1.useRef)(null);
+    var isMobile = device === 'MOBILE';
+    var isEditMode = mode === 'EDIT';
+    // const layoutByDevice = device === 'DESKTOP' ? 'lg' : 'sm';
+    // const [layouts] = useState<LayoutsType>(() => {
+    //   const { lg, sm } = parsePlacement(componentBlocks ?? []);
+    //   return {
+    //     lg,
+    //     sm
+    //   };
+    // });
     (0, react_1.useEffect)(function () {
         if (editingSectionId !== props.id) {
             setSelectedCB(null);
@@ -119,17 +124,14 @@ var Composition = (0, react_1.forwardRef)(function CustomSection(props, ref) {
             setSelectedCB('BULK');
         }
     }, [selectedCB, shortcutKeyMode, sectionActionHandler, setSelectedCB]);
-    var _k = (0, parseCompositionPlacement_1.default)({
+    var _f = (0, util_1.parseCustomSectionPlacement)({
         isMobile: isMobile,
-        compositionProps: CB_PLACEMENT_PROP_COMPOSITION
-    }), minHeight = _k.minHeight, maxHeight = _k.maxHeight, maxWidth = _k.maxWidth, minWidth = _k.minWidth;
-    var canvasWidth = 50 * cols;
+        customSectionProps: CB_PLACEMENT_PROP_SECTION
+    }), width = _f.width, minHeight = _f.minHeight, isFullWidth = _f.isFullWidth;
     var customSectionStyles = {
-        minHeight: "".concat(minHeight, "px"),
-        maxHeight: "".concat(maxHeight, "px"),
-        width: "100%",
-        maxWidth: maxWidth ? "".concat(maxWidth, "px") : '100%',
-        minWidth: "".concat(Math.max(canvasWidth, minWidth !== null && minWidth !== void 0 ? minWidth : 0), "px")
+        minHeight: "".concat(minHeight, "vh"),
+        width: '100%',
+        maxWidth: isFullWidth ? '' : "".concat(width, "px")
     };
     var onClickSection = function () {
         if (!isEditMode) {
@@ -145,26 +147,26 @@ var Composition = (0, react_1.forwardRef)(function CustomSection(props, ref) {
             });
     };
     var padding = (0, parseSectionPadding_1.default)(CB_LAYOUT_PROP_PADDING, device);
+    var sectionRow = CB_PLACEMENT_PROP_SECTION[device === 'DESKTOP'
+        ? 'CB_PLACEMENT_PROP_SECTION_SPEC_ROWS'
+        : 'CB_PLACEMENT_PROP_SECTION_SPEC_ROWS:MOBILE'];
     var rowHeight = (function () {
         if (!size.width) {
             return 50;
         }
         if (device === 'MOBILE') {
-            var cellWidth_1 = size.width / cols;
+            var cellWidth_1 = size.width / MOBILE_GRID_COLS;
             return cellWidth_1 * 0.56;
         }
-        var cellWidth = size.width / cols;
+        var cellWidth = size.width / DESKTOP_GRID_COLS;
         return cellWidth * 0.56;
     })();
-    // TODO: 폰트사이즈 작업 필요.
     var baseFontSize = (function () {
+        var _a, _b;
         if (!size.width) {
             return 16;
         }
-        // const responsiveFontMode =
-        //   !!props.jsonProperties?.CB_CONTENT_PROP_COMPOSITION
-        //     ?.CB_CONTENT_PROP_COMPOSITION_SPEC_VARIABLEROOTFONTSIZE;
-        var responsiveFontMode = true;
+        var responsiveFontMode = !!((_b = (_a = props.jsonProperties) === null || _a === void 0 ? void 0 : _a.data.CB_CONTENT_PROP_SECTION) === null || _b === void 0 ? void 0 : _b.CB_CONTENT_PROP_SECTION_SPEC_VARIABLEROOTFONTSIZE);
         if (device === 'MOBILE') {
             if (responsiveFontMode) {
                 return size.width * 0.0421;
@@ -182,31 +184,29 @@ var Composition = (0, react_1.forwardRef)(function CustomSection(props, ref) {
         }
         return 16;
     })();
-    return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(dynamicLayoutContext_1.dynamicLayoutContext.Provider, __assign({ value: {
-                device: device
-            } }, { children: (0, jsx_runtime_1.jsx)(gleStyles_1.S_gleStyles, __assign({ style: { width: '100%', height: '100%' } }, { children: (0, jsx_runtime_1.jsx)(S_COMPOSITIONWrapper, __assign({ ref: gleRef, "x-dlayout-section-type": "NO_NAME", onClick: onClickSection, style: {
+    return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(gleStyles_1.S_gleStyles, __assign({ style: { width: '100%', height: '100%' } }, { children: (0, jsx_runtime_1.jsx)(S_SectionWrapper, __assign({ ref: gleRef, "x-dlayout-section-type": "NO_NAME", onClick: onClickSection, style: {
+                    width: '100%',
+                    height: '100%'
+                } }, { children: (0, jsx_runtime_1.jsx)(components_1.CustomSection, __assign({}, props, { isMobile: isMobile, overrideStyles: {
+                        // minHeight: customSectionStyles.minHeight,
+                        paddingTop: padding.top,
+                        paddingBottom: padding.bottom,
+                        paddingRight: padding.right,
+                        paddingLeft: padding.left,
                         width: '100%',
                         height: '100%'
-                    } }, { children: (0, jsx_runtime_1.jsx)(CompositionBackground_1.default, __assign({}, props, { isMobile: isMobile, overrideStyles: {
-                            // minHeight: customSectionStyles.minHeight,
-                            paddingTop: padding.top,
-                            paddingBottom: padding.bottom,
-                            paddingRight: padding.right,
-                            paddingLeft: padding.left,
-                            width: '100%',
-                            height: '100%'
-                        } }, { children: (0, jsx_runtime_1.jsx)(GridContainer, __assign({ className: "composition-container", "data-cols": cols, "data-rows": rows, "data-row-height": rowHeight, "data-col-width": "10px", ref: containerRef, cols: cols, rowHeight: rowHeight, sectionRow: rows, "data-wrapper-paddingT": padding.top, "data-wrapper-paddingB": padding.bottom, "data-wrapper-paddingL": padding.left, "data-wrapper-paddingR": padding.right, style: {
-                                width: customSectionStyles.width,
-                                maxWidth: customSectionStyles.maxWidth,
-                                // minWidth: isMobile ? GLE_MIN_WIDTH_MOBILE_PX : GLE_MIN_WIDTH_DESKTOP_PX,
-                                fontSize: "".concat(baseFontSize, "px")
-                            } }, { children: (_e = props.componentBlocks) === null || _e === void 0 ? void 0 : _e.map(function (cb, index) {
-                                var _a;
-                                return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(FlexGridItem_1.default, { cb: cb, index: index, device: device, rowHeight: rowHeight, zIndex: (_a = zOrders === null || zOrders === void 0 ? void 0 : zOrders[device === 'DESKTOP' ? 'desktop' : 'mobile'][cb.id]) !== null && _a !== void 0 ? _a : 0 }) }, cb.id));
-                            }) })) })) })) })) })) }));
+                    } }, { children: (0, jsx_runtime_1.jsx)(GridContainer, __assign({ ref: containerRef, cols: isMobile ? 8 : 24, rowHeight: rowHeight, sectionRow: sectionRow !== null && sectionRow !== void 0 ? sectionRow : 0, style: {
+                            width: customSectionStyles.width,
+                            maxWidth: customSectionStyles.maxWidth,
+                            minWidth: isMobile ? GLE_MIN_WIDTH_MOBILE_PX : GLE_MIN_WIDTH_DESKTOP_PX,
+                            fontSize: "".concat(baseFontSize, "px")
+                        } }, { children: (_a = props.componentBlocks) === null || _a === void 0 ? void 0 : _a.map(function (cb, index) {
+                            var _a;
+                            return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(FlexGridItem_1.default, { cb: cb, index: index, device: device, rowHeight: rowHeight, zIndex: (_a = zOrders === null || zOrders === void 0 ? void 0 : zOrders[device === 'DESKTOP' ? 'desktop' : 'mobile'][cb.id]) !== null && _a !== void 0 ? _a : 0 }) }, cb.id));
+                        }) })) })) })) })) }));
 });
-var GridContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid; /* Space between grid items */\n  gap: 10px;\n  /* grid-auto-rows: minmax(", ", auto); */\n  grid-template-columns: repeat(", ", 1fr);\n  grid-template-rows: repeat(\n    ", ",\n    minmax(", ", 1fr)\n  );\n  height: 100%;\n  padding: 10px 10px;\n  width: 100%;\n\n  * {\n    box-sizing: border-box;\n  }\n"], ["\n  display: grid; /* Space between grid items */\n  gap: 10px;\n  /* grid-auto-rows: minmax(", ", auto); */\n  grid-template-columns: repeat(", ", 1fr);\n  grid-template-rows: repeat(\n    ", ",\n    minmax(", ", 1fr)\n  );\n  height: 100%;\n  padding: 10px 10px;\n  width: 100%;\n\n  * {\n    box-sizing: border-box;\n  }\n"])), function (props) { return "".concat(props.rowHeight, "px"); }, function (props) { return props.cols; }, function (props) { return props.sectionRow; }, function (props) { return "".concat(props.rowHeight, "px"); });
-var S_COMPOSITIONWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
+var GridContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid; /* Space between grid items */\n  gap: 10px;\n  grid-auto-rows: minmax(", ", auto);\n  grid-template-columns: repeat(", ", 1fr);\n  grid-template-rows: repeat(", ", minmax(", ", 1fr));\n  height: 100%;\n  padding: 10px 10px;\n  width: 100%;\n\n  * {\n    box-sizing: border-box;\n  }\n"], ["\n  display: grid; /* Space between grid items */\n  gap: 10px;\n  grid-auto-rows: minmax(", ", auto);\n  grid-template-columns: repeat(", ", 1fr);\n  grid-template-rows: repeat(", ", minmax(", ", 1fr));\n  height: 100%;\n  padding: 10px 10px;\n  width: 100%;\n\n  * {\n    box-sizing: border-box;\n  }\n"])), function (props) { return "".concat(props.rowHeight, "px"); }, function (props) { return props.cols; }, function (props) { return props.sectionRow; }, function (props) { return "".concat(0, "px"); });
+var S_SectionWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
 exports.default = react_1.default.memo(Composition);
 function getDefensiveFontSize(device, width) {
     if (device === 'MOBILE') {

package/dist/src/sub/DynamicLayout/CompositionRenderer/CompositionRenderer.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { IComposition } from '../../DynamicLayout/types';
+declare function CompositionRenderer({ compositions }: {
+    compositions: IComposition[];
+}): JSX.Element;
+export default CompositionRenderer;

package/dist/src/sub/DynamicLayout/CompositionRenderer/CompositionRenderer.js

@@ -0,0 +1,27 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+require("react");
+var Composition_1 = __importDefault(require("./Composition"));
+function CompositionRenderer(_a) {
+    var compositions = _a.compositions;
+    return ((0, jsx_runtime_1.jsx)("div", __assign({ style: {
+            width: '100%',
+            height: '100%'
+        } }, { children: compositions.map(function (composition) { return ((0, jsx_runtime_1.jsx)(Composition_1.default, __assign({}, composition), composition.id)); }) })));
+}
+exports.default = CompositionRenderer;

package/dist/src/sub/DynamicLayout/DynamicLayout.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import type { DynamicLayoutProps } from './types';
-declare function DynamicLayout({ device, mode, isPreview, sections, scrollDownTargetSectionId, editingSectionId, navigationHandler, sectionActionHandler, onClickEditSection, programmedSectionComponents, shortcutKeyMode, dynamicLayoutRef, zoomScale, queryData, placementRestriction }: DynamicLayoutProps): JSX.Element;
+declare function DynamicLayout({ device, mode, isPreview, sections, scrollDownTargetSectionId, editingSectionId, navigationHandler, sectionActionHandler, onClickEditSection, programmedSectionComponents, shortcutKeyMode, dynamicLayoutRef, zoomScale }: DynamicLayoutProps): JSX.Element;
 export default DynamicLayout;

package/dist/src/sub/DynamicLayout/DynamicLayout.js

@@ -25,7 +25,7 @@ var EditModeSectionMatcher_1 = require("./components/EditModeSectionMatcher");
 var SectionMatcher_1 = require("./components/SectionMatcher");
 var dynamicLayoutContext_1 = require("./dynamicLayoutContext");
 function DynamicLayout(_a) {
-    var device = _a.device, _b = _a.mode, mode = _b === void 0 ? 'NORMAL' : _b, isPreview = _a.isPreview, sections = _a.sections, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, editingSectionId = _a.editingSectionId, navigationHandler = _a.navigationHandler, sectionActionHandler = _a.sectionActionHandler, onClickEditSection = _a.onClickEditSection, programmedSectionComponents = _a.programmedSectionComponents, shortcutKeyMode = _a.shortcutKeyMode, dynamicLayoutRef = _a.dynamicLayoutRef, zoomScale = _a.zoomScale, queryData = _a.queryData, placementRestriction = _a.placementRestriction;
+    var device = _a.device, _b = _a.mode, mode = _b === void 0 ? 'NORMAL' : _b, isPreview = _a.isPreview, sections = _a.sections, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, editingSectionId = _a.editingSectionId, navigationHandler = _a.navigationHandler, sectionActionHandler = _a.sectionActionHandler, onClickEditSection = _a.onClickEditSection, programmedSectionComponents = _a.programmedSectionComponents, shortcutKeyMode = _a.shortcutKeyMode, dynamicLayoutRef = _a.dynamicLayoutRef, zoomScale = _a.zoomScale;
     var filteredSortedSection = __spreadArray([], sections, true).filter(function (section) {
         var _a;
         if (!section.display) {
@@ -51,9 +51,7 @@ function DynamicLayout(_a) {
             editingSectionId: editingSectionId,
             programmedSectionComponents: programmedSectionComponents,
             shortcutKeyMode: shortcutKeyMode,
-            zoomScale: zoomScale,
-            queryData: queryData,
-            placementRestriction: placementRestriction
+            zoomScale: zoomScale
         } }, { children: [mode === 'EDIT' && onClickEditSection && ((0, jsx_runtime_1.jsx)(EditModeSectionMatcher_1.EditModeSectionMatcher, { dynamicLayoutRef: dynamicLayoutRef, editingSectionId: editingSectionId, scrollDownTargetSectionId: scrollDownTargetSectionId, filteredSortedSection: filteredSortedSection, onClickEditSection: onClickEditSection })), mode !== 'EDIT' &&
                 (iframeSection ? ((0, jsx_runtime_1.jsx)(SectionMatcher_1.SectionMatcher, __assign({}, iframeSection), iframeSection.id)) : (filteredSortedSection.map(function (section) { return (0, jsx_runtime_1.jsx)(SectionMatcher_1.SectionMatcher, __assign({}, section), section.id); })))] })));
 }