pds-dev-kit-web-test 2.5.488 → 2.5.490

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

@@ -68,8 +68,8 @@ var profileImageBorderColorTheme = {
     transparent: 'ui_cpnt_list_chatbubble_base_transparent'
 };
 function ChatBubbleListItem(_a) {
-    var titleText = _a.titleText, imageSrc = _a.imageSrc, _b = _a.hoverMode, hoverMode = _b === void 0 ? 'use' : _b, styleTheme = _a.styleTheme, _c = _a.colorTheme, colorTheme = _c === void 0 ? 'grey' : _c, _d = _a.timeMode, timeMode = _d === void 0 ? 'use' : _d, timeText = _a.timeText, _e = _a.countMode, countMode = _e === void 0 ? 'none' : _e, countText = _a.countText, contextMenuOptionArray = _a.contextMenuOptionArray, _f = _a.contextMenuState, contextMenuState = _f === void 0 ? 'normal' : _f, children = _a.children, _g = _a.downloadIBtnMode, downloadIBtnMode = _g === void 0 ? 'none' : _g, onClickContextMenuItem = _a.onClickContextMenuItem, onClickDownloadIBtn = _a.onClickDownloadIBtn;
-    var _h = (0, react_1.useState)(false), isContextMenuOpen = _h[0], setIsContextMenuOpen = _h[1];
+    var titleText = _a.titleText, imageSrc = _a.imageSrc, _b = _a.hoverMode, hoverMode = _b === void 0 ? 'use' : _b, styleTheme = _a.styleTheme, _c = _a.colorTheme, colorTheme = _c === void 0 ? 'grey' : _c, _d = _a.timeMode, timeMode = _d === void 0 ? 'use' : _d, timeText = _a.timeText, labelText = _a.labelText, contextMenuOptionArray = _a.contextMenuOptionArray, _e = _a.contextMenuState, contextMenuState = _e === void 0 ? 'normal' : _e, children = _a.children, _f = _a.downloadIBtnMode, downloadIBtnMode = _f === void 0 ? 'none' : _f, onClickContextMenuItem = _a.onClickContextMenuItem, onClickDownloadIBtn = _a.onClickDownloadIBtn;
+    var _g = (0, react_1.useState)(false), isContextMenuOpen = _g[0], setIsContextMenuOpen = _g[1];
     var contextMenuRef = (0, react_1.useRef)(null);
     var chatBody = document.querySelector('#chatMessageBox');
     var rect = chatBody === null || chatBody === void 0 ? void 0 : chatBody.getBoundingClientRect();
@@ -80,26 +80,21 @@ function ChatBubbleListItem(_a) {
         styleTheme === 'other_avatar' ||
         styleTheme === 'other_avatar_sub';
     var titleTextColorTheme = 'sysTextPrimary';
-    var countTextColorTheme = 'sysTextPrimary';
     switch (colorTheme) {
         case 'grey': {
             titleTextColorTheme = 'sysTextPrimary';
-            countTextColorTheme = 'sysTextPrimary';
             break;
         }
         case 'brand_primary': {
             titleTextColorTheme = 'usrTextBrandPrimary';
-            countTextColorTheme = 'sysTextPrimary';
             break;
         }
         case 'translucent_white': {
             titleTextColorTheme = 'sysTextBlack';
-            countTextColorTheme = 'sysTextPrimary';
             break;
         }
         case 'translucent_black': {
             titleTextColorTheme = 'sysTextWhite';
-            countTextColorTheme = 'sysTextPrimary';
         }
     }
     /**
@@ -142,7 +137,7 @@ function ChatBubbleListItem(_a) {
         }
         setIsContextMenuOpen(false);
     };
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_ChatBubbleListItem, __assign({ "x-pds-name": "ChatBubbleListItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", isMe: isMe }, { children: [hasLeftSpacing ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isProfileImageShow ? ((0, jsx_runtime_1.jsx)(S_ImageViewWrapper, __assign({ isOtherAvatarImpact: styleTheme === 'other_avatar_impact', colorTheme: colorTheme }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: styleTheme === 'other_avatar_impact' ? 36 : 38 }) }))) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" })) })) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [isTitleTextShow && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: titleTextColorTheme }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" })] })), (0, jsx_runtime_1.jsxs)(S_ChatBubbleBox, { children: [(0, jsx_runtime_1.jsxs)(S_ChatBubbleWrapper, __assign({ isMe: isMe }, { children: [isMe && ((0, jsx_runtime_1.jsxs)(S_Box, { children: [downloadIBtnMode === 'use' && (0, jsx_runtime_1.jsx)("div", { style: { height: '32px', width: '1px' } }), (0, jsx_runtime_1.jsx)(S_DownloadIconWrapper, __assign({ isMe: isMe }, { children: downloadIBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { shapeType: "circular", iconFillType: "fill", baseColorKey: "ui_cpnt_list_chatbubble_download_button_base", iconColorKey: "ui_cpnt_button_icon_white", iconSize: 16, iconName: "ic_download", onClick: onClickDownloadIBtn })) })), (0, jsx_runtime_1.jsxs)(S_TimeWrapper, __assign({ isMe: isMe }, { children: [countMode === 'use' && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: countText, styleTheme: "caption2Regular", colorTheme: countTextColorTheme })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" })] }))] }))] })), (0, jsx_runtime_1.jsx)(ChatBubble_1.default, __assign({ colorTheme: colorTheme, tailType: chatBubbleTailType[styleTheme] }, { children: children })), !isMe && ((0, jsx_runtime_1.jsxs)(S_Box, { children: [downloadIBtnMode === 'use' && (0, jsx_runtime_1.jsx)("div", { style: { height: '32px', width: '1px' } }), (0, jsx_runtime_1.jsx)(S_DownloadIconWrapper, __assign({ isMe: isMe }, { children: downloadIBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { shapeType: "circular", iconFillType: "fill", baseColorKey: "ui_cpnt_list_chatbubble_download_button_base", iconColorKey: "ui_cpnt_button_icon_white", iconSize: 16, iconName: "ic_download", onClick: onClickDownloadIBtn })) })), (0, jsx_runtime_1.jsxs)(S_TimeWrapper, __assign({ isMe: isMe }, { children: [countMode === 'use' && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: countText, styleTheme: "caption2Regular", colorTheme: countTextColorTheme })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" })] }))] }))] }))] })), hoverMode === 'use' && !isMe && ((0, jsx_runtime_1.jsx)(S_SeeMoreButton, __assign({ isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "xsmall", iconFillType: "fill", iconSize: 20, iconName: "ic_more", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: "ui_cpnt_button_icon_enabled", onClick: handleMoreButtonClick }) })))] })] }), (0, jsx_runtime_1.jsx)(Popup_1.PopupProvider, { children: (0, jsx_runtime_1.jsx)(Popup_1.Popup, __assign({ targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "top-end", wrapperHeight: rect === null || rect === void 0 ? void 0 : rect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { children: contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return ((0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, onClick: handleContextMenuItemClick, state: contextMenuState }, el.value)); }) }) })) })] })) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_ChatBubbleListItem, __assign({ "x-pds-name": "ChatBubbleListItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", isMe: isMe }, { children: [hasLeftSpacing ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isProfileImageShow ? ((0, jsx_runtime_1.jsx)(S_ImageViewWrapper, __assign({ isOtherAvatarImpact: styleTheme === 'other_avatar_impact', colorTheme: colorTheme }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: styleTheme === 'other_avatar_impact' ? 36 : 38 }) }))) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" })) })) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [isTitleTextShow && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: titleTextColorTheme }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" })] })), (0, jsx_runtime_1.jsxs)(S_ChatBubbleBox, { children: [(0, jsx_runtime_1.jsxs)(S_ChatBubbleWrapper, __assign({ isMe: isMe }, { children: [isMe && ((0, jsx_runtime_1.jsxs)(S_Box, { children: [downloadIBtnMode === 'use' && (0, jsx_runtime_1.jsx)("div", { style: { height: '32px', width: '1px' } }), (0, jsx_runtime_1.jsx)(S_DownloadIconWrapper, __assign({ isMe: isMe }, { children: downloadIBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { shapeType: "circular", iconFillType: "fill", baseColorKey: "ui_cpnt_list_chatbubble_download_button_base", iconColorKey: "ui_cpnt_button_icon_white", iconSize: 16, iconName: "ic_download", onClick: onClickDownloadIBtn })) })), (0, jsx_runtime_1.jsxs)(S_TimeWrapper, __assign({ isMe: isMe }, { children: [labelText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: labelText, styleTheme: "caption2Bold", colorTheme: "sysTextTertiary" })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" }))] }))] })), (0, jsx_runtime_1.jsx)(ChatBubble_1.default, __assign({ colorTheme: colorTheme, tailType: chatBubbleTailType[styleTheme] }, { children: children })), !isMe && ((0, jsx_runtime_1.jsxs)(S_Box, { children: [downloadIBtnMode === 'use' && (0, jsx_runtime_1.jsx)("div", { style: { height: '32px', width: '1px' } }), (0, jsx_runtime_1.jsx)(S_DownloadIconWrapper, __assign({ isMe: isMe }, { children: downloadIBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { shapeType: "circular", iconFillType: "fill", baseColorKey: "ui_cpnt_list_chatbubble_download_button_base", iconColorKey: "ui_cpnt_button_icon_white", iconSize: 16, iconName: "ic_download", onClick: onClickDownloadIBtn })) })), (0, jsx_runtime_1.jsxs)(S_TimeWrapper, __assign({ isMe: isMe }, { children: [labelText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: labelText, styleTheme: "caption2Bold", colorTheme: "sysTextTertiary" })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" }))] }))] }))] })), hoverMode === 'use' && !isMe && ((0, jsx_runtime_1.jsx)(S_SeeMoreButton, __assign({ isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "xsmall", iconFillType: "fill", iconSize: 20, iconName: "ic_more", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: "ui_cpnt_button_icon_enabled", onClick: handleMoreButtonClick }) })))] })] }), (0, jsx_runtime_1.jsx)(Popup_1.PopupProvider, { children: (0, jsx_runtime_1.jsx)(Popup_1.Popup, __assign({ targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "top-end", wrapperHeight: rect === null || rect === void 0 ? void 0 : rect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { children: contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return ((0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, onClick: handleContextMenuItemClick, state: contextMenuState }, el.value)); }) }) })) })] })) }));
 }
 var MyChatBubbleListItem = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-right: ", ";\n"], ["\n  margin-right: ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/mobile/components/ChatList/Body.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { Props as ChatListProps } from './ChatList';
-declare const Body: React.ForwardRefExoticComponent<Pick<ChatListProps, "children" | "scrollVisibleType" | "bodyMBtnText" | "bodySpacingMode" | "bodyChildren"> & {
+declare const Body: React.ForwardRefExoticComponent<Pick<ChatListProps, "children" | "scrollVisibleType" | "bodySpacingMode" | "bodyMBtnText" | "bodyChildren"> & {
     isSubmitted: boolean;
     callBackAfterScrollToBottom: () => void;
 } & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,16 @@
+import React from 'react';
+export type SnackbarPosition = 'top-left' | 'top-center' | 'top-right' | 'right-top' | 'right-center' | 'right-bottom' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'left-top' | 'left-center' | 'left-bottom' | 'center';
+export interface BaseSnackbarProps {
+    message: string;
+    actionBtnName?: string;
+    position?: SnackbarPosition;
+    hideActionBtn?: boolean;
+    onActionBtnClick?: () => void;
+    duration?: number;
+    anchorRef?: React.RefObject<HTMLElement>;
+}
+export interface SnackbarProps extends BaseSnackbarProps {
+    onClose: () => void;
+}
+declare const Snackbar: React.FC<SnackbarProps>;
+export default Snackbar;

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

@@ -0,0 +1,209 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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");
+var react_1 = require("react");
+var react_dom_1 = require("react-dom");
+var panels_1 = require("../../../desktop/panels");
+var components_1 = require("../../../hybrid/components");
+var styled_components_1 = __importDefault(require("styled-components"));
+var IconButton_1 = require("../IconButton");
+var TextButton_1 = require("../TextButton");
+var TextLabel_1 = require("../TextLabel");
+var Snackbar = function (_a) {
+    var message = _a.message, _b = _a.actionBtnName, actionBtnName = _b === void 0 ? '' : _b, _c = _a.position, position = _c === void 0 ? 'bottom-center' : _c, _d = _a.hideActionBtn, hideActionBtn = _d === void 0 ? false : _d, onActionBtnClick = _a.onActionBtnClick, onClose = _a.onClose, _e = _a.duration, duration = _e === void 0 ? 2000 : _e, anchorRef = _a.anchorRef;
+    var _f = (0, react_1.useState)(false), isVisible = _f[0], setIsVisible = _f[1];
+    var _g = (0, react_1.useState)({}), containerStyle = _g[0], setContainerStyle = _g[1];
+    var timerRef = (0, react_1.useRef)();
+    /*
+     * 마운트 시 애니메이션
+     */
+    (0, react_1.useEffect)(function () {
+        var showTimer = setTimeout(function () {
+            setIsVisible(true);
+        }, 10);
+        return function () { return clearTimeout(showTimer); };
+    }, []);
+    /*
+     * duration 타이머
+     */
+    (0, react_1.useEffect)(function () {
+        if (duration > 0) {
+            timerRef.current = setTimeout(function () {
+                handleClose();
+            }, duration);
+        }
+        return function () {
+            if (timerRef.current) {
+                clearTimeout(timerRef.current);
+            }
+        };
+    }, [duration]);
+    /*
+     * 스크롤, 리사이즈시 포지션 업데이트
+     */
+    (0, react_1.useEffect)(function () {
+        var updatePosition = function () {
+            if (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) {
+                var rect = anchorRef.current.getBoundingClientRect();
+                var style = getAnchorBasedStyle(position, rect);
+                setContainerStyle(style);
+            }
+            else {
+                var style = getViewportBasedStyle(position);
+                setContainerStyle(style);
+            }
+        };
+        // 초기 렌더링 시 약간의 딜레이를 주어 DOM이 완전히 준비되도록 함
+        var initialTimer = setTimeout(updatePosition, 0);
+        if (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) {
+            window.addEventListener('resize', updatePosition);
+            // ResizeObserver로 anchorRef 요소의 크기 변화 감지
+            var resizeObserver_1 = new ResizeObserver(updatePosition);
+            resizeObserver_1.observe(anchorRef.current);
+            return function () {
+                clearTimeout(initialTimer);
+                window.removeEventListener('resize', updatePosition);
+                resizeObserver_1.disconnect();
+            };
+        }
+        updatePosition();
+        return function () {
+            clearTimeout(initialTimer);
+        };
+    }, [position, anchorRef]);
+    var handleClose = function () {
+        setIsVisible(false);
+        setTimeout(function () {
+            onClose();
+        }, 300);
+    };
+    var handleActionClick = function () {
+        if (onActionBtnClick) {
+            onActionBtnClick();
+        }
+        handleClose();
+    };
+    var getViewportBasedStyle = function (position) {
+        var base = {
+            position: 'fixed',
+            zIndex: 9999
+        };
+        var offset = 24;
+        switch (position) {
+            case 'top-left':
+                return __assign(__assign({}, base), { top: offset, left: offset });
+            case 'top-center':
+                return __assign(__assign({}, base), { top: offset, left: '50%', transform: 'translateX(-50%)' });
+            case 'top-right':
+                return __assign(__assign({}, base), { top: offset, right: offset });
+            case 'right-top':
+                return __assign(__assign({}, base), { top: offset, right: offset });
+            case 'right-center':
+                return __assign(__assign({}, base), { top: '50%', right: offset, transform: 'translateY(-50%)' });
+            case 'right-bottom':
+                return __assign(__assign({}, base), { bottom: offset, right: offset });
+            case 'bottom-right':
+                return __assign(__assign({}, base), { bottom: offset, right: offset });
+            case 'bottom-center':
+                return __assign(__assign({}, base), { bottom: offset, left: '50%', transform: 'translateX(-50%)' });
+            case 'bottom-left':
+                return __assign(__assign({}, base), { bottom: offset, left: offset });
+            case 'left-bottom':
+                return __assign(__assign({}, base), { bottom: offset, left: offset });
+            case 'left-center':
+                return __assign(__assign({}, base), { top: '50%', left: offset, transform: 'translateY(-50%)' });
+            case 'left-top':
+                return __assign(__assign({}, base), { top: offset, left: offset });
+            case 'center':
+                return __assign(__assign({}, base), { top: '50%', left: '50%', transform: 'translate(-50%, -50%)' });
+            default:
+                return __assign(__assign({}, base), { bottom: offset, left: '50%', transform: 'translateX(-50%)' });
+        }
+    };
+    var getAnchorBasedStyle = function (position, rect) {
+        var base = {
+            position: 'fixed',
+            zIndex: 9999
+        };
+        var offset = 24;
+        switch (position) {
+            case 'top-left':
+                return __assign(__assign({}, base), { bottom: window.innerHeight - rect.top + offset, left: rect.left });
+            case 'top-center':
+                return __assign(__assign({}, base), { bottom: window.innerHeight - rect.top + offset, left: rect.left + rect.width / 2, transform: 'translateX(-50%)' });
+            case 'top-right':
+                return __assign(__assign({}, base), { bottom: window.innerHeight - rect.top + offset, right: window.innerWidth - rect.right });
+            case 'right-top':
+                return __assign(__assign({}, base), { top: rect.top, left: rect.right + offset });
+            case 'right-center':
+                return __assign(__assign({}, base), { top: rect.top + rect.height / 2, left: rect.right + offset, transform: 'translateY(-50%)' });
+            case 'right-bottom':
+                return __assign(__assign({}, base), { bottom: window.innerHeight - rect.bottom, left: rect.right + offset });
+            case 'bottom-right':
+                return __assign(__assign({}, base), { top: rect.bottom + offset, right: window.innerWidth - rect.right });
+            case 'bottom-center':
+                return __assign(__assign({}, base), { top: rect.bottom + offset, left: rect.left + rect.width / 2, transform: 'translateX(-50%)' });
+            case 'bottom-left':
+                return __assign(__assign({}, base), { top: rect.bottom + offset, left: rect.left });
+            case 'left-bottom':
+                return __assign(__assign({}, base), { bottom: window.innerHeight - rect.bottom, right: window.innerWidth - rect.left + offset });
+            case 'left-center':
+                return __assign(__assign({}, base), { top: rect.top + rect.height / 2, right: window.innerWidth - rect.left + offset, transform: 'translateY(-50%)' });
+            case 'left-top':
+                return __assign(__assign({}, base), { top: rect.top, right: window.innerWidth - rect.left + offset });
+            case 'center':
+                return __assign(__assign({}, base), { top: rect.top + rect.height / 2, left: rect.left + rect.width / 2, transform: 'translate(-50%, -50%)' });
+            default:
+                return __assign(__assign({}, base), { top: rect.bottom + offset, left: rect.left + rect.width / 2, transform: 'translateX(-50%)' });
+        }
+    };
+    var snackbarContent = ((0, jsx_runtime_1.jsx)(S_Container, __assign({ style: containerStyle }, { children: (0, jsx_runtime_1.jsx)(S_SnackbarWrapper, __assign({ position: position, isVisible: isVisible }, { children: (0, jsx_runtime_1.jsxs)(panels_1.SectionSheet, __assign({ shapeType: "round", radius: 8, paddingTop: "none", paddingRight: "none", paddingBottom: "none", paddingLeft: "spacing_d", width: "max-content", height: "auto", overrideBackgroundColorKey: "ui_cpnt_snackbar_base", overrideCSS: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    maxWidth: '640px'
+                } }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ style: { flex: 1 } }, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_c" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: message, styleTheme: "caption1Regular", colorOverride: "ui_cpnt_snackbar_text", wordBreak: "break_all", ellipsisMode: "use", lineLimit: 2 }), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_c" })] })), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_d", spacingType: "width" }), (0, jsx_runtime_1.jsxs)(S_Buttons, { children: [onActionBtnClick && actionBtnName && ((0, jsx_runtime_1.jsx)(TextButton_1.TextButton, { text: actionBtnName, colorTheme: "grey_01", size: "xsmall", onClick: handleActionClick })), !hideActionBtn && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: "ic_xmark", iconColorKey: "ui_cpnt_snackbar_text", iconSize: 16, baseSize: "medium", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconFillType: "fill", onClick: handleClose })), hideActionBtn && actionBtnName && (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" })] })] })) })) })));
+    return (0, react_dom_1.createPortal)(snackbarContent, document.body);
+};
+var S_Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  pointer-events: none;\n  width: max-content;\n  & > * {\n    pointer-events: auto;\n  }\n"], ["\n  pointer-events: none;\n  width: max-content;\n  & > * {\n    pointer-events: auto;\n  }\n"])));
+var getInitialTransform = function (position) {
+    if (position.startsWith('top-'))
+        return 'translateY(-10px)';
+    if (position.startsWith('bottom-'))
+        return 'translateY(10px)';
+    if (position.startsWith('left-'))
+        return 'translateX(-10px)';
+    if (position.startsWith('right-'))
+        return 'translateX(10px)';
+    if (position === 'center')
+        return 'scale(0.95)';
+    return 'translateY(0)';
+};
+var S_SnackbarWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  max-width: 640px;\n  opacity: ", ";\n  transform: ", ";\n  transition: opacity 0.3s ease, transform 0.3s ease;\n  width: max-content;\n"], ["\n  display: flex;\n  justify-content: center;\n  max-width: 640px;\n  opacity: ", ";\n  transform: ", ";\n  transition: opacity 0.3s ease, transform 0.3s ease;\n  width: max-content;\n"])), function (_a) {
+    var isVisible = _a.isVisible;
+    return (isVisible ? 1 : 0);
+}, function (_a) {
+    var isVisible = _a.isVisible, position = _a.position;
+    return isVisible ? 'translate(0, 0) scale(1)' : getInitialTransform(position);
+});
+var S_Buttons = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n"], ["\n  align-items: center;\n  display: flex;\n"])));
+exports.default = Snackbar;
+var templateObject_1, templateObject_2, templateObject_3;

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

@@ -0,0 +1 @@
+export { default as Snackbar } from './Snackbar';

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

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Snackbar = void 0;
+var Snackbar_1 = require("./Snackbar");
+Object.defineProperty(exports, "Snackbar", { enumerable: true, get: function () { return __importDefault(Snackbar_1).default; } });

package/dist/src/mobile/components/Snackbar/provider.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { BaseSnackbarProps } from './Snackbar';
+interface SnackbarContextType {
+    showSnackbar: (props: BaseSnackbarProps) => void;
+    hideSnackbar: (id: string) => void;
+}
+export declare const SnackbarProvider: ({ children }: {
+    children: ReactNode;
+}) => JSX.Element;
+export declare const useSnackbar: () => SnackbarContextType;
+export {};

package/dist/src/mobile/components/Snackbar/provider.js

@@ -0,0 +1,52 @@
+"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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSnackbar = exports.SnackbarProvider = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var Snackbar_1 = __importDefault(require("./Snackbar"));
+var SnackbarContext = (0, react_1.createContext)(null);
+var SnackbarProvider = function (_a) {
+    var children = _a.children;
+    var _b = (0, react_1.useState)([]), snackbarList = _b[0], setSnackbarList = _b[1];
+    var value = (0, react_1.useMemo)(function () { return ({
+        showSnackbar: function (props) {
+            var id = crypto.randomUUID();
+            setSnackbarList(function (prev) { return __spreadArray(__spreadArray([], prev, true), [__assign(__assign({}, props), { id: id })], false); });
+        },
+        hideSnackbar: function (id) {
+            setSnackbarList(function (prev) { return prev.filter(function (snackbar) { return snackbar.id !== id; }); });
+        }
+    }); }, []);
+    return ((0, jsx_runtime_1.jsxs)(SnackbarContext.Provider, __assign({ value: value }, { children: [children, snackbarList.map(function (snackbar) { return ((0, jsx_runtime_1.jsx)(Snackbar_1.default, { message: snackbar.message, actionBtnName: snackbar.actionBtnName, position: snackbar.position, hideActionBtn: snackbar.hideActionBtn, onActionBtnClick: snackbar.onActionBtnClick, duration: snackbar.duration, anchorRef: snackbar.anchorRef, onClose: function () { return value.hideSnackbar(snackbar.id); } }, snackbar.id)); })] })));
+};
+exports.SnackbarProvider = SnackbarProvider;
+var useSnackbar = function () {
+    var context = (0, react_1.useContext)(SnackbarContext);
+    if (!context)
+        throw new Error('useSnackbar must be used within a SnackbarProvider');
+    return context;
+};
+exports.useSnackbar = useSnackbar;

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';
@@ -29,6 +30,7 @@ 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 +38,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, 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.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");
@@ -63,6 +65,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, TextField as M_TextField, TextLabel as M_TextLabel, 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_UploadIconButton = exports.M_TextLabel = exports.M_TextField = 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 = 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,6 +63,7 @@ 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_TextField", { enumerable: true, get: function () { return components_1.TextField; } });

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;