@antscorp/antsomi-ui 2.0.13 → 2.0.15

package/es/components/organism/Notification/Notification.js

@@ -1,12 +1,4 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable no-underscore-dangle */
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 import Icon from '@antscorp/icons';
@@ -33,11 +25,17 @@ export const Notification = React.memo(props => {
         _account_id: accountId,
     }), [token, accountId]);
     const getTimeZoneFromNetwork = useCallback(() => {
-        const params = Object.assign({ type: 'get-network-detail' }, credentialParams);
+        const params = {
+            type: 'get-network-detail',
+            ...credentialParams,
+        };
         return axios.get(`${permissionDomain}/api/network/index`, { params });
     }, [credentialParams, permissionDomain]);
     const getCountUnread = useCallback(() => {
-        const params = Object.assign({ type: 'count-unread-notifications' }, credentialParams);
+        const params = {
+            type: 'count-unread-notifications',
+            ...credentialParams,
+        };
         return axios.get(`${permissionDomain}/api/notification/index`, { params });
     }, [credentialParams, permissionDomain]);
     const handleSetCountUnread = useCallback(() => {
@@ -46,18 +44,24 @@ export const Notification = React.memo(props => {
                 setCountNoti(res.data.data);
         });
     }, [getCountUnread]);
-    const getListNoti = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-        const params = Object.assign(Object.assign({}, credentialParams), { _lang: lang, limit: limitNoti, page: 1, format: 'grid', filter: JSON.stringify([{ STATUS: { is_not: '80' } }, { TYPE: { is_not: 'alert' } }]) });
+    const getListNoti = useCallback(async () => {
+        const params = {
+            ...credentialParams,
+            _lang: lang,
+            limit: limitNoti,
+            page: 1,
+            format: 'grid',
+            filter: JSON.stringify([{ STATUS: { is_not: '80' } }, { TYPE: { is_not: 'alert' } }]),
+        };
         setIsShowLoadingNoti(true);
         return axios
             .get(`${permissionDomain}/api/notification/performance`, { params })
             .then(res => res);
-    }), [lang, permissionDomain, limitNoti, credentialParams]);
+    }, [lang, permissionDomain, limitNoti, credentialParams]);
     const handleSetListNoti = useCallback(() => {
         getListNoti().then(res => {
-            var _a, _b, _c, _d;
-            setTotal(((_b = (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.total) || 0);
-            if ((_d = (_c = res === null || res === void 0 ? void 0 : res.data) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.body) {
+            setTotal(res?.data?.data?.total || 0);
+            if (res?.data?.data?.body) {
                 setListNoti(res.data.data.body);
                 setIsShowLoadingNoti(false);
             }
@@ -68,8 +72,7 @@ export const Notification = React.memo(props => {
             return;
         }
         getTimeZoneFromNetwork().then(res => {
-            var _a, _b, _c;
-            if ((_c = (_b = (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.infoNetwork) === null || _c === void 0 ? void 0 : _c.timezone) {
+            if (res?.data?.data?.infoNetwork?.timezone) {
                 setTimeZone(res.data.data.infoNetwork.timezone);
             }
         });
@@ -83,7 +86,7 @@ export const Notification = React.memo(props => {
         }
         else {
             axios
-                .post(`${permissionDomain}/api/notification/index`, {}, { params: Object.assign(Object.assign({}, credentialParams), { type: 'mark-all-as-read' }) })
+                .post(`${permissionDomain}/api/notification/index`, {}, { params: { ...credentialParams, type: 'mark-all-as-read' } })
                 .then(() => {
                 handleSetCountUnread();
                 handleSetListNoti();
@@ -126,7 +129,7 @@ export const Notification = React.memo(props => {
                         if (newNoti._id) {
                             const index = prev.findIndex(noti => noti._id === newNoti._id);
                             if (index > -1) {
-                                data[index] = Object.assign(Object.assign({}, data[index]), newNoti);
+                                data[index] = { ...data[index], ...newNoti };
                                 // status: remove or read
                                 if (+newNoti.status === 80 || +newNoti.status === 2) {
                                     totalRemoveReadNoti++;
@@ -146,8 +149,7 @@ export const Notification = React.memo(props => {
             }
         });
         socket.on(keyMarkAll, message => {
-            var _a;
-            const notifyType = ((_a = message === null || message === void 0 ? void 0 : message.data) === null || _a === void 0 ? void 0 : _a.notify_type) || '';
+            const notifyType = message?.data?.notify_type || '';
             if (notifyType === 'default') {
                 handleAllNoti(false);
             }
@@ -162,9 +164,8 @@ export const Notification = React.memo(props => {
     useEffect(() => {
         if (limitNoti > 5) {
             getListNoti().then(res => {
-                var _a, _b, _c, _d;
-                setTotal(((_b = (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.total) || 0);
-                if ((_d = (_c = res === null || res === void 0 ? void 0 : res.data) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.body) {
+                setTotal(res?.data?.data?.total || 0);
+                if (res?.data?.data?.body) {
                     setListNoti(res.data.data.body);
                     setIsShowLoadingNoti(false);
                 }
@@ -195,8 +196,7 @@ export const Notification = React.memo(props => {
     const onClickHandleRead = (status, idNoti) => {
         handleChangeStatusNoti(status, idNoti).then(() => {
             getListNoti().then(res => {
-                var _a, _b;
-                if ((_b = (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.body) {
+                if (res?.data?.data?.body) {
                     setListNoti(res.data.data.body);
                     handleSetCountUnread();
                     setIsShowLoadingNoti(false);
@@ -207,53 +207,36 @@ export const Notification = React.memo(props => {
     const formatDate = useCallback((ctime) => dayjs().tz(timeZone).isSame(dayjs(ctime).tz(timeZone), 'day')
         ? dayjs(ctime).tz(timeZone).fromNow()
         : dayjs(ctime).locale('en').format('MMM DD [at] hh:mm A'), [timeZone]);
-    return (React.createElement(Popover, { content: React.createElement(DivShowNotiStyled, null,
-            isShowLoadingNoti ? React.createElement(Spin, { className: "div-loading" }) : null,
-            React.createElement("div", { className: "div-show-header" },
-                React.createElement("p", { className: "title-noti" }, "Notification"),
-                React.createElement("p", { className: "text-link", onClick: () => handleAllNoti(false) }, "Mark all as read")),
-            React.createElement("div", { className: "div-show-content", onScroll: e => scrolledNoti(e) }, listNoti.length ? (listNoti === null || listNoti === void 0 ? void 0 : listNoti.map((noti) => noti.status === 1 || noti.status === 2 ? (React.createElement("div", { className: "noti-card", key: noti.notification_id },
-                noti.status === 1 ? React.createElement("div", { className: "div-left-icon-dot" }) : null,
-                React.createElement("div", { className: "div-title" },
-                    React.createElement("p", { className: "div-title-text text-ellipsis" }, noti.title),
-                    React.createElement(Dropdown, { trigger: ['click'], placement: "bottomRight", arrow: false, menu: {
-                            items: [
-                                {
-                                    key: `${noti.status}::${noti.notification_id}`,
-                                    icon: React.createElement(Icon, { type: "icon-ants-check-small" }),
-                                    label: `Mark as ${noti.status === 1 ? 'read' : 'unread'}`,
-                                    style: { color: '#333' },
-                                    onClick: ({ key }) => {
-                                        const [status, id] = key.split('::');
-                                        onClickHandleRead(Number(status) === 1 ? 2 : 1, id);
-                                    },
-                                },
-                                {
-                                    key: noti.notification_id,
-                                    icon: React.createElement(Icon, { type: "icon-ants-delete" }),
-                                    label: 'Remove this notification',
-                                    style: { color: '#333' },
-                                    onClick: ({ key }) => onClickHandleRemoveNoti(key),
-                                },
-                            ],
-                        }, destroyPopupOnHide: true },
-                        React.createElement(ActionButton
-                        // style={{ border: 'none' }}
-                        , { 
-                            // style={{ border: 'none' }}
-                            className: "notify-action", icon: React.createElement(Icon, { type: "icon-ants-three-dot-vertical", style: { fontSize: '16px' } }), size: "small" }))),
-                React.createElement("p", { className: "item-link text-link text-ellipsis", onClick: () => onClickLinkNoti(noti.link, noti.notification_id) }, noti.link_name),
-                React.createElement("p", { className: "item-desc text-ellipsis" }, noti.body),
-                React.createElement("p", { className: "text-grey" }, formatDate(noti.ctime)))) : null)) : !isShowLoadingNoti ? (React.createElement("div", { className: "text-block-center text-grey" }, "You currently have no notifications")) : null),
-            React.createElement("div", { className: "text-block-center text-link", onClick: () => handleAllNoti(true) }, listNoti.length ? 'See all notifications' : null)), trigger: ['click'], placement: "bottomRight", overlayInnerStyle: { padding: 0 }, arrow: false },
-        React.createElement(BadgeStyled, { count: countNoti, overflowCount: 1000, style: {
+    return (_jsx(Popover, { content: _jsxs(DivShowNotiStyled, { children: [isShowLoadingNoti ? _jsx(Spin, { className: "div-loading" }) : null, _jsxs("div", { className: "div-show-header", children: [_jsx("p", { className: "title-noti", children: "Notification" }), _jsx("p", { className: "text-link", onClick: () => handleAllNoti(false), children: "Mark all as read" })] }), _jsx("div", { className: "div-show-content", onScroll: e => scrolledNoti(e), children: listNoti.length ? (listNoti?.map((noti) => noti.status === 1 || noti.status === 2 ? (_jsxs("div", { className: "noti-card", children: [noti.status === 1 ? _jsx("div", { className: "div-left-icon-dot" }) : null, _jsxs("div", { className: "div-title", children: [_jsx("p", { className: "div-title-text text-ellipsis", children: noti.title }), _jsx(Dropdown, { trigger: ['click'], placement: "bottomRight", arrow: false, menu: {
+                                            items: [
+                                                {
+                                                    key: `${noti.status}::${noti.notification_id}`,
+                                                    icon: _jsx(Icon, { type: "icon-ants-check-small" }),
+                                                    label: `Mark as ${noti.status === 1 ? 'read' : 'unread'}`,
+                                                    style: { color: '#333' },
+                                                    onClick: ({ key }) => {
+                                                        const [status, id] = key.split('::');
+                                                        onClickHandleRead(Number(status) === 1 ? 2 : 1, id);
+                                                    },
+                                                },
+                                                {
+                                                    key: noti.notification_id,
+                                                    icon: _jsx(Icon, { type: "icon-ants-delete" }),
+                                                    label: 'Remove this notification',
+                                                    style: { color: '#333' },
+                                                    onClick: ({ key }) => onClickHandleRemoveNoti(key),
+                                                },
+                                            ],
+                                        }, destroyPopupOnHide: true, children: _jsx(ActionButton
+                                        // style={{ border: 'none' }}
+                                        , { 
+                                            // style={{ border: 'none' }}
+                                            className: "notify-action", icon: _jsx(Icon, { type: "icon-ants-three-dot-vertical", style: { fontSize: '16px' } }), size: "small" }) })] }), _jsx("p", { className: "item-link text-link text-ellipsis", onClick: () => onClickLinkNoti(noti.link, noti.notification_id), children: noti.link_name }), _jsx("p", { className: "item-desc text-ellipsis", children: noti.body }), _jsx("p", { className: "text-grey", children: formatDate(noti.ctime) })] }, noti.notification_id)) : null)) : !isShowLoadingNoti ? (_jsx("div", { className: "text-block-center text-grey", children: "You currently have no notifications" })) : null }), _jsx("div", { className: "text-block-center text-link", onClick: () => handleAllNoti(true), children: listNoti.length ? 'See all notifications' : null })] }), trigger: ['click'], placement: "bottomRight", overlayInnerStyle: { padding: 0 }, arrow: false, children: _jsx(BadgeStyled, { count: countNoti, overflowCount: 1000, style: {
                 borderRadius: themeToken.borderRadius,
                 padding: '2px 4px',
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',
                 backgroundColor: themeToken.red6,
-            } },
-            React.createElement(ActionButton, null,
-                React.createElement(Icon, { type: "icon-ants-bell" })))));
+            }, children: _jsx(ActionButton, { children: _jsx(Icon, { type: "icon-ants-bell" }) }) }) }));
 });

package/es/components/organism/Notification/styled.d.ts

@@ -1,8 +1,6 @@
 /// <reference types="react" />
 export declare const DivShowNotiStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ActionButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
-    Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
-}, any, {}, never>;
+export declare const ActionButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<import("react").LegacyRef<HTMLElement>>>, any, {}, never>;
 export declare const BadgeStyled: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").BadgeProps & import("react").RefAttributes<HTMLSpanElement>> & {
     Ribbon: import("react").FC<import("antd/es/badge/Ribbon").RibbonProps>;
 }, any, {}, never>;

package/es/components/organism/Notification/styled.js

@@ -1,6 +1,5 @@
-var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
 import styled from 'styled-components';
-import { Button } from '../../atoms';
+import { Button } from '@antscorp/antsomi-ui/es/components/atoms/Button';
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 import { Badge } from 'antd';
 export const DivShowNotiStyled = styled.div `
@@ -57,13 +56,13 @@ export const DivShowNotiStyled = styled.div `
     }
     .noti-card:hover,
     .noti-card:has(button.antsomi-dropdown-open) {
-      background-color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.blue0};
+      background-color: ${THEME.token?.blue0};
     }
 
     .noti-card {
       position: relative;
       padding: 15px 10px 15px 45px;
-      border-bottom: 1px solid ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.blue0};
+      border-bottom: 1px solid ${THEME.token?.blue0};
 
       .div-title {
         display: flex;
@@ -129,18 +128,18 @@ export const ActionButton = styled(Button) `
 
   &.notify-action {
     border: none !important;
-    color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.blue7} !important;
+    color: ${THEME.token?.blue7} !important;
     border-radius: 5px !important;
   }
 
   &.antsomi-dropdown-open,
   &.antsomi-popover-open {
-    color: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.blue7} !important;
-    background-color: ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.blue1_1} !important;
-    border: 1px solid ${(_f = THEME.token) === null || _f === void 0 ? void 0 : _f.blue7} !important;
+    color: ${THEME.token?.blue7} !important;
+    background-color: ${THEME.token?.blue1_1} !important;
+    border: 1px solid ${THEME.token?.blue7} !important;
     &.notify-action {
       border: none !important;
-      color: ${(_g = THEME.token) === null || _g === void 0 ? void 0 : _g.blue7} !important;
+      color: ${THEME.token?.blue7} !important;
       border-radius: 5px !important;
     }
   }
@@ -155,9 +154,9 @@ export const BadgeStyled = styled(Badge) `
   &.antsomi-dropdown-open,
   &.antsomi-popover-open {
     button {
-      color: ${(_h = THEME.token) === null || _h === void 0 ? void 0 : _h.blue7} !important;
-      background-color: ${(_j = THEME.token) === null || _j === void 0 ? void 0 : _j.blue1_1} !important;
-      border: 1px solid ${(_k = THEME.token) === null || _k === void 0 ? void 0 : _k.blue7} !important;
+      color: ${THEME.token?.blue7} !important;
+      background-color: ${THEME.token?.blue1_1} !important;
+      border: 1px solid ${THEME.token?.blue7} !important;
     }
   }
 `;

package/es/components/organism/PositionSetting/index.js

@@ -1,5 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 // Libraries
-import React, { memo } from 'react';
+import { memo } from 'react';
 // Atoms
 import { Button, Icon, Popover } from '@antscorp/antsomi-ui/es/components/atoms';
 // Molecules
@@ -14,8 +15,7 @@ const PATH = '@antscorp/antsomi-ui/es/components/organism/PositionSetting/index.
 export const PositionSetting = memo(props => {
     // Props
     const { labelWrapper, labelEdgeSetting, settings, styles, labelStyle, onChange } = props;
-    return (React.createElement(SettingWrapper, { label: labelWrapper || 'Position', labelStyle: Object.assign(Object.assign({}, labelStyle), { fontWeight: 'bold' }) },
-        React.createElement(PositionSettingPopover, { labelEdgeSetting: labelEdgeSetting, settings: settings, styles: styles, onChange: onChange })));
+    return (_jsx(SettingWrapper, { label: labelWrapper || 'Position', labelStyle: { ...labelStyle, fontWeight: 'bold' }, children: _jsx(PositionSettingPopover, { labelEdgeSetting: labelEdgeSetting, settings: settings, styles: styles, onChange: onChange }) }));
 });
 export const PositionSettingPopover = props => {
     // Props
@@ -30,7 +30,14 @@ export const PositionSettingPopover = props => {
                 left: `${values[3]}${unit}`,
             };
             // Callback
-            onChange(Object.assign(Object.assign({}, settings), { linkedPositionInput: linked, positionSuffix: unit }), Object.assign(Object.assign({}, styles), positionStyles));
+            onChange({
+                ...settings,
+                linkedPositionInput: linked,
+                positionSuffix: unit,
+            }, {
+                ...styles,
+                ...positionStyles,
+            });
         }
         catch (error) {
             handleError(error, {
@@ -40,21 +47,19 @@ export const PositionSettingPopover = props => {
             });
         }
     };
-    const content = (React.createElement("div", { style: {
+    const content = (_jsx("div", { style: {
             display: 'flex',
             flexDirection: 'column',
             marginLeft: 20,
             marginRight: 20,
             width: 288,
-        } },
-        React.createElement(EdgeSetting, { label: labelEdgeSetting || 'Position', linked: settings.linkedPositionInput, unit: settings.positionSuffix, minValue: -9999, maxValue: 9999, values: [
+        }, children: _jsx(EdgeSetting, { label: labelEdgeSetting || 'Position', linked: settings.linkedPositionInput, unit: settings.positionSuffix, minValue: -9999, maxValue: 9999, values: [
                 getNumberFromString(styles.top),
                 getNumberFromString(styles.right),
                 getNumberFromString(styles.bottom),
                 getNumberFromString(styles.left),
-            ], onChange: onChangePositionSetting })));
-    return (React.createElement(Popover, { placement: "bottomRight", content: content, trigger: ['click'] },
-        React.createElement(Button, { icon: React.createElement(Icon, { type: "icon-ants-edit-2" }), type: "text" })));
+            ], onChange: onChangePositionSetting }) }));
+    return (_jsx(Popover, { placement: "bottomRight", content: content, trigger: ['click'], children: _jsx(Button, { icon: _jsx(Icon, { type: "icon-ants-edit-2" }), type: "text" }) }));
 };
 PositionSetting.defaultProps = {
     settings: SPACING_SETTINGS_DEFAULT,

package/es/components/organism/PreviewTemplateModal/components/Banner/index.js

@@ -1,16 +1,6 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 // Libraries
-import React, { memo, useEffect, useMemo, useRef, useState } from 'react';
+import { memo, useEffect, useMemo, useRef, useState } from 'react';
 import classNames from 'classnames';
 // Styled
 import { BannerWrapper } from './styled';
@@ -21,8 +11,7 @@ import { DEVICE_TYPE } from '../../constants';
 // Hooks
 import { useForceUpdate } from '@antscorp/antsomi-ui/es/hooks';
 export const Banner = memo(props => {
-    var _a;
-    const { deviceType, showSkeleton = false, children, height = 700 } = props, restOfProps = __rest(props, ["deviceType", "showSkeleton", "children", "height"]);
+    const { deviceType, showSkeleton = false, children, height = 700, ...restOfProps } = props;
     const ref = useRef(null);
     const forceUpdate = useForceUpdate();
     const isMobile = useMemo(() => deviceType === DEVICE_TYPE.MOBILE.value, [deviceType]);
@@ -45,20 +34,16 @@ export const Banner = memo(props => {
             }, 0);
         };
         const resizeObserver = new ResizeObserver(handleResize);
-        if (ref === null || ref === void 0 ? void 0 : ref.current)
-            resizeObserver.observe(ref === null || ref === void 0 ? void 0 : ref.current);
+        if (ref?.current)
+            resizeObserver.observe(ref?.current);
         return () => {
             if (timeoutAfterChange) {
                 clearTimeout(timeoutAfterChange);
             }
         };
     }, [forceUpdate]);
-    return (React.createElement(BannerWrapper, Object.assign({ ref: ref, "$height": height, clientHeight: (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.offsetHeight }, restOfProps),
-        React.createElement("div", { className: `${isMobile ? 'mobile-wrapper animate__animated animate__zoomIn' : 'desktop-wrapper'}` },
-            React.createElement("div", { className: classNames({
-                    'content-wrapper': true,
-                    'animate__animated animate__fadeIn': shouldAnimate,
-                }) }, isMobile ? (React.createElement(MobileFrameV2, { id: "banner-mobile" }, children || null)) : (children || null)),
-            showSkeleton && (React.createElement(React.Fragment, null,
-                React.createElement("div", { className: "skeleton" }))))));
+    return (_jsx(BannerWrapper, { ref: ref, "$height": height, clientHeight: ref?.current?.offsetHeight, ...restOfProps, children: _jsxs("div", { className: `${isMobile ? 'mobile-wrapper animate__animated animate__zoomIn' : 'desktop-wrapper'}`, children: [_jsx("div", { className: classNames({
+                        'content-wrapper': true,
+                        'animate__animated animate__fadeIn': shouldAnimate,
+                    }), children: isMobile ? (_jsx(MobileFrameV2, { id: "banner-mobile", children: children || null })) : (children || null) }), showSkeleton && (_jsx(_Fragment, { children: _jsx("div", { className: "skeleton" }) }))] }) }));
 });

package/es/components/organism/PreviewTemplateModal/components/Banner/styled.js

@@ -13,9 +13,9 @@ export const BannerWrapper = styled.div `
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorBgSkeleton};
-  border-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadius}px;
-  border: 1px solid ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue1_1};
+  background-color: ${globalToken?.colorBgSkeleton};
+  border-radius: ${globalToken?.borderRadius}px;
+  border: 1px solid ${globalToken?.blue1_1};
   height: ${({ $height }) => (isNumber($height) ? `${$height}px` : $height)};
 
   // Calculate scale of mobile frame

package/es/components/organism/PreviewTemplateModal/components/Information/index.js

@@ -1,5 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Libraries
-import React, { memo } from 'react';
+import { memo } from 'react';
 import Icon from '@antscorp/icons';
 // Styled
 import { CheckboxButton, InformationWrapper } from './styled';
@@ -9,22 +10,6 @@ import { Button, Typography, Flex } from '../../../../atoms';
 import { DEVICE_TYPE } from '../../constants';
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 export const Information = memo(props => {
-    var _a;
     const { deviceType, itemName = 'Template name', buttonText = 'Use template', description, categoryListing, showDeviceRadios = true, onButtonClick, onDeviceTypeChange, } = props;
-    return (React.createElement(InformationWrapper, { gap: 20, vertical: true },
-        React.createElement("div", { style: { flexShrink: 0 }, className: "title" }, itemName),
-        React.createElement(Flex, { gap: 15, vertical: true, className: "content-information" },
-            description && React.createElement("div", { style: { color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw8 } }, description), categoryListing === null || categoryListing === void 0 ? void 0 :
-            categoryListing.map(({ key, label, children }) => {
-                var _a;
-                return (React.createElement("div", { key: key },
-                    React.createElement("div", { style: { color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw8 } },
-                        label,
-                        ":"),
-                    React.createElement("div", { style: { fontWeight: 'bold' } }, children === null || children === void 0 ? void 0 : children.map(({ label }) => label).join(', '))));
-            })),
-        React.createElement(Flex, { gap: 20, style: { flexShrink: 0 }, vertical: true },
-            showDeviceRadios && (React.createElement(Flex, { align: "center", gap: 1 }, Object.values(DEVICE_TYPE).map(({ value, label, icon }) => (React.createElement(CheckboxButton, { key: value, icon: React.createElement(Icon, { type: icon }), block: true, "$active": deviceType === value, onClick: () => onDeviceTypeChange(value), type: "text" }, label))))),
-            React.createElement(Button, { type: "primary", style: { width: '100%', flexShrink: 0 }, onClick: onButtonClick },
-                React.createElement(Typography.Text, { ellipsis: { tooltip: buttonText }, style: { maxWidth: '100%', color: 'inherit' } }, buttonText)))));
+    return (_jsxs(InformationWrapper, { gap: 20, vertical: true, children: [_jsx("div", { style: { flexShrink: 0 }, className: "title", children: itemName }), _jsxs(Flex, { gap: 15, vertical: true, className: "content-information", children: [description && _jsx("div", { style: { color: THEME.token?.bw8 }, children: description }), categoryListing?.map(({ key, label, children }) => (_jsxs("div", { children: [_jsxs("div", { style: { color: THEME.token?.bw8 }, children: [label, ":"] }), _jsx("div", { style: { fontWeight: 'bold' }, children: children?.map(({ label }) => label).join(', ') })] }, key)))] }), _jsxs(Flex, { gap: 20, style: { flexShrink: 0 }, vertical: true, children: [showDeviceRadios && (_jsx(Flex, { align: "center", gap: 1, children: Object.values(DEVICE_TYPE).map(({ value, label, icon }) => (_jsx(CheckboxButton, { icon: _jsx(Icon, { type: icon }), block: true, "$active": deviceType === value, onClick: () => onDeviceTypeChange(value), type: "text", children: label }, value))) })), _jsx(Button, { type: "primary", style: { width: '100%', flexShrink: 0 }, onClick: onButtonClick, children: _jsx(Typography.Text, { ellipsis: { tooltip: buttonText }, style: { maxWidth: '100%', color: 'inherit' }, children: buttonText }) })] })] }));
 });

package/es/components/organism/PreviewTemplateModal/components/Information/styled.d.ts

@@ -1,7 +1,5 @@
 /// <reference types="react" />
 export declare const InformationWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
-export declare const CheckboxButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/button/button").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
-    Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
-}, any, {
+export declare const CheckboxButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<import("react").LegacyRef<HTMLElement>>>, any, {
     $active?: boolean | undefined;
 }, never>;

package/es/components/organism/PreviewTemplateModal/components/Information/styled.js

@@ -51,11 +51,11 @@ export const InformationWrapper = styled(Flex) `
   }
 `;
 export const CheckboxButton = styled(Button) `
-  color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorText} !important;
+  color: ${globalToken?.colorText} !important;
 
   ${p => p.$active &&
     css `
-      color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorPrimary} !important;
-      background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue1_1} !important;
+      color: ${globalToken?.colorPrimary} !important;
+      background-color: ${globalToken?.blue1_1} !important;
     `}
 `;

package/es/components/organism/PreviewTemplateModal/components/SimilarTemplate/index.js

@@ -1,16 +1,6 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Libraries
-import React, { memo } from 'react';
+import { memo } from 'react';
 import { isEmpty } from 'lodash';
 // Components
 import { ThumbnailCard } from '../../../../molecules';
@@ -20,15 +10,12 @@ import { SimilarTemplateWrapper, TemplateListWrapper } from './styled';
 import { SIMILAR_CARD_HEIGHT_DEFAULT, SIMILAR_CARD_WIDTH_DEFAULT } from '../../constants';
 const MAX_QUANTITY_TEMPLATES = 4;
 export const SimilarTemplate = memo(props => {
-    var _a;
     const { show = true, similarTemplates = [], similarCardProps } = props;
-    const _b = similarCardProps || {}, { width = SIMILAR_CARD_WIDTH_DEFAULT, height = SIMILAR_CARD_HEIGHT_DEFAULT } = _b, restOfSimilarCardProps = __rest(_b, ["width", "height"]);
+    const { width = SIMILAR_CARD_WIDTH_DEFAULT, height = SIMILAR_CARD_HEIGHT_DEFAULT, ...restOfSimilarCardProps } = similarCardProps || {};
     // Memo
     // const thumbnailCacheValue = useMemo(() => new Date().getTime(), []);
-    return show && !isEmpty(similarTemplates) ? (React.createElement(SimilarTemplateWrapper, { gap: 15, vertical: true },
-        React.createElement("div", { className: "title" }, "Similar templates"),
-        React.createElement(TemplateListWrapper, { templateQuantity: MAX_QUANTITY_TEMPLATES }, (_a = similarTemplates.slice(0, MAX_QUANTITY_TEMPLATES)) === null || _a === void 0 ? void 0 : _a.map((item, idx) => {
-            const { id, name, thumbnail } = item || {};
-            return (React.createElement(ThumbnailCard, Object.assign({ key: id, id: id || idx, name: name, width: width, height: height, thumbnail: thumbnail, actionAvailable: false, className: "thumbnail-card" }, restOfSimilarCardProps)));
-        })))) : null;
+    return show && !isEmpty(similarTemplates) ? (_jsxs(SimilarTemplateWrapper, { gap: 15, vertical: true, children: [_jsx("div", { className: "title", children: "Similar templates" }), _jsx(TemplateListWrapper, { templateQuantity: MAX_QUANTITY_TEMPLATES, children: similarTemplates.slice(0, MAX_QUANTITY_TEMPLATES)?.map((item, idx) => {
+                    const { id, name, thumbnail } = item || {};
+                    return (_jsx(ThumbnailCard, { id: id || idx, name: name, width: width, height: height, thumbnail: thumbnail, actionAvailable: false, className: "thumbnail-card", ...restOfSimilarCardProps }, id));
+                }) })] })) : null;
 });

package/es/components/organism/PreviewTemplateModal/components/SimilarTemplate/styled.js

@@ -17,10 +17,10 @@ export const TemplateListWrapper = styled.div `
   gap: 30px;
 
   .thumbnail-card {
-    border-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadius}px;
+    border-radius: ${globalToken?.borderRadius}px;
 
     > div {
-      border-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadius}px;
+      border-radius: ${globalToken?.borderRadius}px;
     }
   }
 `;