@antscorp/antsomi-ui 1.3.5-beta.17 → 1.3.5-beta.18

package/es/components/atoms/Spin/Spin.js

@@ -19,10 +19,10 @@ import { StyledSpin } from './styled';
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 export const Spin = (props) => {
     var _a;
-    const { indicatorSize } = props, restOf = __rest(props, ["indicatorSize"]);
+    const { indicatorSize, children } = props, restOf = __rest(props, ["indicatorSize", "children"]);
     return (React.createElement(StyledSpin, Object.assign({}, Object.assign({ indicator: (React.createElement(LoadingOutlined, { style: {
                 fontSize: indicatorSize || 30,
                 color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary,
-            }, spin: true })) }, restOf)), props.children));
+            }, spin: true })) }, restOf)), children));
 };
 Spin.defaultProps = {};

package/es/components/common/ConfigProvider/GlobalStyle.js

@@ -291,25 +291,24 @@ export const GlobalStyle = () => {
             }
           }
 
-          .antsomi-picker-date-panel {
+          /* .antsomi-picker-date-panel {
             position: relative;
-          }
+          } */
 
-          .antsomi-picker-date-panel::before {
+          /* .antsomi-picker-date-panel::before {
             content: 'Hours';
             position: absolute;
             top: 0;
             right: 0;
             transform: translateX(100%);
             width: 61px;
-            /* width: 53.5px; */
             font-weight: bold;
             border-right: 1px solid rgba(5, 5, 5, 0.06);
             height: 38px;
             display: flex;
             align-items: center;
             justify-content: center;
-          }
+          } */
 
           .antsomi-picker-time-panel {
             .antsomi-picker-time-panel-column:after {
@@ -336,43 +335,94 @@ export const GlobalStyle = () => {
               display: none;
             }
 
-            .antsomi-picker-content {
+            .antsomi-picker-time-panel-column {
+              width: 60px;
+              margin-top: 38px;
+              /* margin-top: 0; */
+              scrollbar-width: unset;
+              scrollbar-color: unset;
+
+              &::-webkit-scrollbar {
+                width: 6px;
+                background: transparent;
+              }
+              &::-webkit-scrollbar-track {
+                /* margin-top: 38px; */
+                border-radius: 10px;
+              }
+            }
+
+            /* ul.antsomi-picker-time-panel-column::before {
+              content: '';
+              position: absolute;
+              background: red;
+              top: 0;
+              right: 0;
+              width: 1px;
+              bottom: 0;
+            } */
+
+            /* .antsomi-picker-time-panel-column::before {
+              content: 'Hours';
+              position: sticky;
+              display: block;
+              top: 0;
+              height: 38px;
+              line-height: 38px;
+              text-align: center;
+              font-weight: bold;
+              background-color: #fff;
+            }
+
+            .antsomi-picker-time-panel-column:nth-child(1)::before {
+              content: 'Hours';
+            }
+            .antsomi-picker-time-panel-column:nth-child(2)::before {
+              content: 'Minutes';
+            }
+            .antsomi-picker-time-panel-column:nth-child(3)::before {
+              content: 'Seconds';
+            } */
+
+            /* .antsomi-picker-content {
               position: relative;
 
               .antsomi-picker-time-panel-column {
                 margin-top: 38px;
                 width: 60px;
               }
+            } */
+
+            .antsomi-picker-content {
+              position: relative;
             }
 
-            .antsomi-picker-content::after,
+            /* .antsomi-picker-content::after,
             .antsomi-picker-content::before {
               content: 'Minutes';
               position: absolute;
               top: 0;
               left: 61px;
-              /* left: 53.5px; */
               width: 60px;
-              /* width: 52.5px; */
               height: 38px;
               display: flex;
               align-items: center;
               justify-content: center;
               font-weight: bold;
-            }
+            } */
 
-            .antsomi-picker-content::before {
+            /* .antsomi-picker-content::before {
               border-right: 1px solid rgba(5, 5, 5, 0.06);
-            }
-            .antsomi-picker-content::after {
+            } */
+            /* .antsomi-picker-content::after {
               content: 'Seconds';
               left: 120px;
-            }
+            } */
           }
 
           /* Custom css scrollbar */
           ul {
-            padding-left: 8px;
+            padding-left: 6px;
             scrollbar-gutter: stable;
           }
         }
@@ -415,6 +465,16 @@ export const GlobalStyle = () => {
               content: 'Hours';
               border: none;
               left: 0;
+
+              position: absolute;
+              top: 0;
+              /* left: 61px; */
+              width: 60px;
+              height: 38px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              font-weight: bold;
             }
           }
           &.is-minutes-picker {

package/es/components/molecules/DatePicker/components/AdvancedPicker/AdvancedPicker.js

@@ -18,7 +18,7 @@ import { DropdownLabel } from '../DropdownLabel/DropdownLabel';
 import { handleError, reorder } from '@antscorp/antsomi-ui/es/utils';
 import { calculationDateAdvanced, getCellRender, getFormatDisplay, getPickerRender, getTimePickerRender, } from './utils';
 // Styled
-import { DatePickerCustomInput, DatePickerHeader, DropdownContent, DropdownHeader, DatePickerFooter, DropdownFooter, CalendarIconWrapper, InputStyled, } from './styled';
+import { DatePickerCustomInput, DatePickerHeader, DropdownContent, DropdownHeader, DatePickerFooter, DropdownFooter, CalendarIconWrapper, InputStyled, TimeLabel, } from './styled';
 // Constants
 import { CALCULATION_DATES, CALCULATION_TYPES, DATE_TYPES, DEFAULT_DATE_FORMAT, VALUE_TYPES, ADVANCED_PICKER_TYPE, WEEK_ARR, QUARTER_PLACEHOLDER, WEEK_PLACEHOLDER, DAY_LABEL_SHORT, MONTH_LABEL_FULL, DAY_OF_MONTH, ANCHOR_LEAP_YEAR, GRANULARITY_MAPPING, } from './constants';
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
@@ -244,7 +244,8 @@ export const AdvancedPicker = props => {
     };
     const onClickNow = () => {
         try {
-            setState(state => (Object.assign(Object.assign({}, state), { date: dayjs().format(format) })));
+            const currentDate = dayjs();
+            setState(state => (Object.assign(Object.assign({}, state), { date: currentDate.format(format) })));
         }
         catch (error) {
             handleError(error, {
@@ -381,11 +382,7 @@ export const AdvancedPicker = props => {
         !!label && typeof label === 'string' ? (React.createElement(Text, { style: { color: '#666666' } }, label)) : (label),
         option.dateType.value === 'fixed' &&
             !['WEEK', 'DAY_OF_WEEK', 'MONTH_DAY', 'DAY'].includes(valueType) ? (React.createElement(Tooltip, { title: selectedDateTitle },
-            React.createElement(DatePicker
-            // ref={ref}
-            , { 
-                // ref={ref}
-                disabled: disabled, open: !disabled && isOpen, allowClear: false, inputReadOnly: true, style: Object.assign({ textOverflow: 'ellipsis' }, inputStyle), status: errorMessage ? 'error' : '', inputRender: () => (React.createElement(DatePickerCustomInput, { readOnly: true, placeholder: "Select Date", value: selectedDateTitle, onClick: () => toggleOpenDropdown() })), value: currDate, 
+            React.createElement(DatePicker, { disabled: disabled, open: !disabled && isOpen, allowClear: false, inputReadOnly: true, style: Object.assign({ textOverflow: 'ellipsis' }, inputStyle), status: errorMessage ? 'error' : '', inputRender: () => (React.createElement(DatePickerCustomInput, { readOnly: true, placeholder: "Select Date", value: selectedDateTitle, onClick: () => toggleOpenDropdown() })), value: currDate, 
                 // style={{
                 //   width: 120,
                 // }}
@@ -395,15 +392,22 @@ export const AdvancedPicker = props => {
                     'only-show-time-picker': ['HOUR', 'MINUTE'].includes(valueType),
                     'is-minutes-picker': valueType === 'MINUTE',
                     'is-hours-picker': valueType === 'HOUR',
-                }), renderExtraFooter: () => (React.createElement(React.Fragment, null,
-                    React.createElement(DatePickerHeader, null,
-                        React.createElement(DropdownLabel, { valueType: valueType, date: date, format: format, type: type, showTime: showTime, operatorKey: operatorKey, formatInputDisplay: formatInputDisplay }),
-                        renderDateTypeOptions()),
-                    React.createElement(DatePickerFooter, null,
-                        React.createElement("div", { style: { padding: '0 10px' } },
-                            React.createElement(ErrorMessage, { errorMessage: errorMessage })),
-                        renderDropdownFooter()),
-                    React.createElement(Divider, null))), picker: getPickerRender(valueType), showTime: getTimePickerRender(valueType)
+                }), renderExtraFooter: () => {
+                    const timeFormat = getTimePickerRender(valueType);
+                    return (React.createElement(React.Fragment, null,
+                        React.createElement(DatePickerHeader, null,
+                            React.createElement(DropdownLabel, { valueType: valueType, date: date, format: format, type: type, showTime: showTime, operatorKey: operatorKey, formatInputDisplay: formatInputDisplay }),
+                            renderDateTypeOptions()),
+                        React.createElement(DatePickerFooter, null,
+                            React.createElement("div", { style: { padding: '0 10px' } },
+                                React.createElement(ErrorMessage, { errorMessage: errorMessage })),
+                            renderDropdownFooter()),
+                        React.createElement(Divider, null),
+                        timeFormat && valueType !== 'HOUR' && valueType !== 'MINUTE' ? (React.createElement(TimeLabel, { "$width": timeFormat.length * 30 },
+                            ['HH', 'HHmm', 'HHmmss'].includes(timeFormat) ? React.createElement("span", null, "Hours") : null,
+                            ['HHmm', 'HHmmss', 'mm'].includes(timeFormat) ? React.createElement("span", null, "Minutes") : null,
+                            timeFormat === 'HHmmss' ? React.createElement("span", null, "Seconds") : null)) : null));
+                }, picker: getPickerRender(valueType), showTime: getTimePickerRender(valueType)
                     ? {
                         format: getTimePickerRender(valueType),
                     }

package/es/components/molecules/DatePicker/components/AdvancedPicker/styled.d.ts

@@ -7,3 +7,6 @@ export declare const DatePickerCustomInput: import("styled-components").StyledCo
 export declare const InputStyled: import("styled-components").StyledComponent<import("react").ComponentType<any> | keyof import("react").JSX.IntrinsicElements, any, import("../../../../atoms/Input").InputProps, any>;
 export declare const DatePickerFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CalendarIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TimeLabel: import("styled-components").StyledComponent<"div", any, {
+    $width: number;
+}, never>;

package/es/components/molecules/DatePicker/components/AdvancedPicker/styled.js

@@ -98,3 +98,26 @@ export const CalendarIconWrapper = styled.div `
   cursor: pointer;
   pointer-events: all;
 `;
+export const TimeLabel = styled.div `
+  position: absolute;
+  right: 0;
+  top: 120px;
+  height: 39.1px;
+  width: ${props => `${props.$width}px`};
+  /* width: 180px; */
+  display: flex;
+  align-items: stretch;
+  justify-content: space-around;
+
+  span {
+    width: 60px;
+    display: block;
+    text-align: center;
+    font-weight: bold;
+    border-left: 1px solid rgba(5, 5, 5, 0.06);
+
+    &:first-child {
+      border-left-color: transparent;
+    }
+  }
+`;

package/es/components/molecules/DatePicker/components/AdvancedPicker/utils.d.ts

@@ -30,7 +30,7 @@ export declare const getCellRender: (current: number | Dayjs, valueType: ValueTy
  * @returns {'date' | 'week' | 'month' | 'quarter' | 'year'} picker ant-design props to render type of calendar
  */
 export declare const getPickerRender: (valueType: ValueTypes) => 'date' | 'week' | 'month' | 'quarter' | 'year';
-export declare const getTimePickerRender: (valueType: ValueTypes) => "HH" | "HHmm" | "HHmmss" | "mm" | undefined;
+export declare const getTimePickerRender: (valueType: ValueTypes) => 'HH' | 'HHmm' | 'HHmmss' | 'mm' | undefined;
 export declare function getLabelQuarterRange(day: string, format: string, locale: string, showYear?: boolean): string;
 export declare function getLabelQuarterRange(quarter: number, year?: number): string;
 export declare const getFormatDisplay: (operatorKey?: TOperatorKey, type?: TAdvancedType, valueType?: ValueTypes, formatInputDisplay?: string) => {

package/es/components/molecules/ModalV2/styled.js

@@ -9,6 +9,10 @@ export const StyledModal = styled(Modal) `
       right: 10px !important;
       width: 24px !important;
       height: 24px !important;
+
+      .antsomi-modal-close-x {
+        padding: 0px;
+      }
     }
 
     .antsomi-modal-body {

package/es/components/molecules/ThumbnailCard/constants.d.ts

@@ -1,3 +1,3 @@
-export declare const THUMBNAIL_CARD_DEFAULT_WIDTH = 200;
-export declare const THUMBNAIL_CARD_DEFAULT_HEIGHT = 200;
+export declare const THUMBNAIL_CARD_DEFAULT_WIDTH = 330;
+export declare const THUMBNAIL_CARD_DEFAULT_HEIGHT = 230;
 export declare const THUMBNAIL_URL = "https://st-media-template.antsomi.com/base64-img/37563.png";

package/es/components/molecules/ThumbnailCard/constants.js

@@ -1,3 +1,3 @@
-export const THUMBNAIL_CARD_DEFAULT_WIDTH = 200;
-export const THUMBNAIL_CARD_DEFAULT_HEIGHT = 200;
+export const THUMBNAIL_CARD_DEFAULT_WIDTH = 330;
+export const THUMBNAIL_CARD_DEFAULT_HEIGHT = 230;
 export const THUMBNAIL_URL = 'https://st-media-template.antsomi.com/base64-img/37563.png';

package/es/components/organism/PreviewTemplateModal/components/Banner/index.d.ts

@@ -1,6 +1,3 @@
 import React from 'react';
-export interface BannerProps {
-    deviceType: string;
-    image?: string;
-}
+import { BannerProps } from '../../types';
 export declare const Banner: React.FC<BannerProps>;

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

@@ -1,12 +1,13 @@
 // Libraries
 import React, { memo } from 'react';
+import { isString } from 'lodash';
 // Styled
 import { BannerWrapper } from './styled';
 export const Banner = memo(props => {
-    const { deviceType, image } = props;
-    return (React.createElement(BannerWrapper, { deviceType: deviceType },
+    const { deviceType, image, showBackgroundSkeleton = false } = props;
+    return (React.createElement(BannerWrapper, { deviceType: deviceType, showBackgroundSkeleton: showBackgroundSkeleton },
         React.createElement("div", { className: "device-type" },
             React.createElement("div", { className: "device-type__wrapper" },
-                React.createElement("div", { className: "image-wrapper" }, image && React.createElement("img", { src: image, alt: "" })),
+                React.createElement("div", { className: "image-wrapper" }, image && (isString(image) ? React.createElement("img", { src: image, alt: "" }) : image)),
                 React.createElement("div", { className: "backdrop" })))));
 });

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

@@ -1,3 +1,4 @@
 export declare const BannerWrapper: import("styled-components").StyledComponent<"div", any, {
     deviceType: string;
+    showBackgroundSkeleton: boolean;
 }, never>;

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

@@ -9,13 +9,23 @@ const { MOBILE } = DEVICE_TYPE;
 export const BannerWrapper = styled.div `
   width: 100%;
   height: 762px;
+  max-height: 762px;
+  overflow-y: auto;
   display: flex;
   justify-content: center;
   align-items: center;
+  background-color: #0000001a;
 
   .device-type {
     position: relative;
+    height: 750px;
     border-radius: ${THUMBNAIL_CARD_RADIUS}px;
+    width: 100%;
+
+    .device-type__wrapper {
+      width: 100%;
+      height: 100%;
+    }
 
     ${p => {
     switch (p.deviceType) {
@@ -48,27 +58,24 @@ export const BannerWrapper = styled.div `
           }
           `;
         default:
-            return `
-          width: 100%;
-          height: 100%;
-          .device-type__wrapper {
-            width: 100%;
-            height: 100%;
-            background: center / cover no-repeat url(${skeletonBackground});
-          }
-
-          .backdrop {
-            border-radius: ${THUMBNAIL_CARD_RADIUS}px;
-            position: absolute;
-            width: 100%;
-            height: 100%;
-            background-color: black;
-            opacity: 0.5;
-            z-index: 10;
-            top: 0;
-            left: 0;
-          }
-          `;
+            return p.showBackgroundSkeleton
+                ? `
+                .device-type__wrapper {
+                  background: center / cover no-repeat url(${skeletonBackground});
+                  .backdrop {
+                    border-radius: ${THUMBNAIL_CARD_RADIUS}px;
+                    position: absolute;
+                    width: 100%;
+                    height: 100%;
+                    background-color: black;
+                    opacity: 0.5;
+                    z-index: 10;
+                    top: 0;
+                    left: 0;
+                  }
+                }                 
+                `
+                : '';
     }
 }}
 

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

@@ -8,22 +8,22 @@ import { Button, Radio, Typography, Flex } from '../../../../atoms';
 // Constants
 import { DEVICE_TYPE } from '../../constants';
 export const Information = memo(props => {
-    const { deviceType, itemName = 'Template name', buttonText = 'Use template', description = 'Description show here', categoryListing, showDeviceRadios = true, buttonClick, onDeviceTypeChange, } = props;
+    const { deviceType, itemName = 'Template name', buttonText = 'Use template', description = 'Description show here', categoryListing, showDeviceRadios = true, onButtonClick, onDeviceTypeChange, } = props;
     return (React.createElement(InformationWrapper, { gap: 20, vertical: true },
-        React.createElement("div", null,
-            React.createElement(Typography.Text, { ellipsis: { tooltip: itemName }, className: "title" }, itemName)),
-        React.createElement("div", null, description), categoryListing === null || categoryListing === void 0 ? void 0 :
-        categoryListing.map(({ key, label, children }) => (React.createElement("div", { key: key },
-            React.createElement("div", null,
-                label,
-                ":"),
-            React.createElement("div", { style: { fontWeight: 'bold' } }, children === null || children === void 0 ? void 0 : children.map(({ label }) => label).join(', '))))),
+        React.createElement("div", { style: { flexShrink: 0 }, className: "title" }, itemName),
+        React.createElement(Flex, { gap: 20, vertical: true, className: "content-information" },
+            React.createElement("div", null, description), categoryListing === null || categoryListing === void 0 ? void 0 :
+            categoryListing.map(({ key, label, children }) => (React.createElement("div", { key: key },
+                React.createElement("div", null,
+                    label,
+                    ":"),
+                React.createElement("div", { style: { fontWeight: 'bold' } }, children === null || children === void 0 ? void 0 : children.map(({ label }) => label).join(', ')))))),
         showDeviceRadios && (React.createElement(Radio.Group, { options: Object.values(DEVICE_TYPE).map(({ value, label, icon }) => ({
-                label: (React.createElement(Flex, { gap: 5 },
-                    React.createElement(Icon, { type: icon, style: { fontSize: 24, marginTop: 3 } }),
+                label: (React.createElement(Flex, { gap: 5, align: "center" },
+                    React.createElement(Icon, { type: icon }),
                     label)),
                 value,
-            })), onChange: e => onDeviceTypeChange(e.target.value), value: deviceType, optionType: "button" })),
-        React.createElement(Button, { type: "primary", style: { width: '100%' }, onClick: buttonClick },
+            })), onChange: e => onDeviceTypeChange(e.target.value), value: deviceType, optionType: "button", style: { flexShrink: 0 } })),
+        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))));
 });

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

@@ -6,6 +6,7 @@ export const InformationWrapper = styled(Flex) `
   width: 350px;
   flex-shrink: 0;
   font-size: 12px;
+  max-height: 762px;
 
   .title {
     font-size: 16px;
@@ -25,6 +26,16 @@ export const InformationWrapper = styled(Flex) `
       justify-content: center;
       align-items: center;
       height: 30px;
+
+      i {
+        height: fit-content;
+        font-size: 24px;
+      }
+    }
+
+    .content-information {
+      flex: 1 1 0%;
+      overflow-y: auto;
     }
   }
 `;

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

@@ -1,14 +1,28 @@
+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;
+};
 // Libraries
 import React, { memo } from 'react';
 // Components
 import { ThumbnailCard } from '../../../../molecules';
 // Styled
 import { CardListWrapper, SimilarTemplateWrapper } from './styled';
+// Constants
+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"]);
     return show ? (React.createElement(SimilarTemplateWrapper, { gap: 15, vertical: true },
         React.createElement("div", { className: "title" }, "Similar templates"),
-        React.createElement(CardListWrapper, { gap: 30 }, (_a = similarTemplates === null || similarTemplates === void 0 ? void 0 : similarTemplates.slice(0, MAX_QUANTITY_TEMPLATES)) === null || _a === void 0 ? void 0 : _a.map(({ id, name, thumbnail }) => (React.createElement(ThumbnailCard, Object.assign({ key: id, id: id, name: name, thumbnail: thumbnail, actionAvailable: false }, similarCardProps))))))) : null;
+        React.createElement(CardListWrapper, { gap: 30 }, (_a = similarTemplates === null || similarTemplates === void 0 ? void 0 : similarTemplates.slice(0, MAX_QUANTITY_TEMPLATES)) === null || _a === void 0 ? void 0 : _a.map(({ id, name, thumbnail }) => (React.createElement(ThumbnailCard, Object.assign({ key: id, id: id, name: name, width: width, height: height, thumbnail: thumbnail, actionAvailable: false }, restOfSimilarCardProps))))))) : null;
 });

package/es/components/organism/PreviewTemplateModal/constants/defaultProps.d.ts

@@ -1,3 +1,8 @@
+import { SimilarTemplateProps, ThumbnailProps } from '../types';
 export declare const THUMBNAIL_WIDTH_DEFAULT = 180;
 export declare const THUMBNAIL_HEIGHT_DEFAULT = 180;
+export declare const SIMILAR_CARD_WIDTH_DEFAULT = 330;
+export declare const SIMILAR_CARD_HEIGHT_DEFAULT = 230;
 export declare const THUMBNAIL_URL = "https://st-media-template.antsomi.com/base64-img/37563.png";
+export declare const SIMILAR_TEMPLATE_DEFAULT: SimilarTemplateProps;
+export declare const THUMBNAIL_DEFAULT: ThumbnailProps;

package/es/components/organism/PreviewTemplateModal/constants/defaultProps.js

@@ -1,3 +1,11 @@
 export const THUMBNAIL_WIDTH_DEFAULT = 180;
 export const THUMBNAIL_HEIGHT_DEFAULT = 180;
+export const SIMILAR_CARD_WIDTH_DEFAULT = 330;
+export const SIMILAR_CARD_HEIGHT_DEFAULT = 230;
 export const THUMBNAIL_URL = 'https://st-media-template.antsomi.com/base64-img/37563.png';
+export const SIMILAR_TEMPLATE_DEFAULT = {
+    show: false,
+};
+export const THUMBNAIL_DEFAULT = {
+    thumbnails: [],
+};

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

@@ -12,22 +12,23 @@ var __rest = (this && this.__rest) || function (s, e) {
 // Libraries
 import React, { memo, useState } from 'react';
 // Components
-import { Flex } from '../../atoms';
+import { Flex, Spin } from '../../atoms';
 import { Banner, Information, SimilarTemplate, ThumbnailSlider } from './components';
 // Styled
 import { ModalContainer, ModalWrapper } from './styled';
 // Constants
-import { DEVICE_TYPE } from './constants';
+import { DEVICE_TYPE, SIMILAR_TEMPLATE_DEFAULT, THUMBNAIL_DEFAULT } from './constants';
 export const PreviewTemplateModal = memo(props => {
-    const { image, thumbnailProps, similarTemplateProps, informationProps } = props, restOfProps = __rest(props, ["image", "thumbnailProps", "similarTemplateProps", "informationProps"]);
+    const { bannerProps, thumbnailProps = THUMBNAIL_DEFAULT, similarTemplateProps = SIMILAR_TEMPLATE_DEFAULT, informationProps, loading = false } = props, restOfProps = __rest(props, ["bannerProps", "thumbnailProps", "similarTemplateProps", "informationProps", "loading"]);
     // States
     const [deviceType, setDeviceType] = useState(DEVICE_TYPE.DESKTOP.value);
     return (React.createElement(ModalContainer, Object.assign({ footer: null, centered: true, modalRender: node => React.createElement(ModalWrapper, null, node) }, restOfProps),
-        React.createElement(Flex, { gap: 20 },
-            React.createElement("div", { className: "overview" },
-                React.createElement(Flex, { gap: 20, vertical: true },
-                    React.createElement(Banner, { deviceType: deviceType, image: image }),
-                    React.createElement(ThumbnailSlider, Object.assign({}, thumbnailProps)))),
-            React.createElement(Information, Object.assign({ deviceType: deviceType, onDeviceTypeChange: value => setDeviceType(value) }, informationProps))),
-        React.createElement(SimilarTemplate, Object.assign({}, similarTemplateProps))));
+        React.createElement(Spin, { spinning: loading },
+            React.createElement(Flex, { gap: 20 },
+                React.createElement("div", { className: "overview" },
+                    React.createElement(Flex, { gap: 20, vertical: true },
+                        React.createElement(Banner, Object.assign({ deviceType: deviceType }, bannerProps)),
+                        React.createElement(ThumbnailSlider, Object.assign({}, thumbnailProps)))),
+                React.createElement(Information, Object.assign({ deviceType: deviceType, onDeviceTypeChange: value => setDeviceType(value) }, informationProps))),
+            React.createElement(SimilarTemplate, Object.assign({}, similarTemplateProps)))));
 });

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

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import { Modal } from '../../molecules';
 export const ModalContainer = styled(Modal) `
   &.antsomi-modal {
-    width: 100% !important;
+    width: fit-content !important;
 
     .antsomi-modal-content {
       width: 1440px;
@@ -20,6 +20,6 @@ export const ModalContainer = styled(Modal) `
 `;
 export const ModalWrapper = styled.div `
   padding: 20px;
-  width: 100%;
+  width: fit-content;
   box-sizing: border-box;
 `;

package/es/components/organism/PreviewTemplateModal/types.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { ReactNode } from 'react';
 import { ThumbnailCardProps } from '../../molecules';
 import { ModalProps } from '../../molecules/Modal';
 import { TTemplateItem, TCategoryItem } from '../../template';
@@ -7,11 +7,16 @@ export type TThumbnail = {
     url: string;
 };
 export interface PreviewTemplateModalProps extends ModalProps {
-    image?: string;
+    bannerProps?: Omit<BannerProps, 'deviceType'>;
     thumbnailProps?: ThumbnailProps;
     similarTemplateProps?: SimilarTemplateProps;
     informationProps?: Omit<InformationProps, 'deviceType' | 'onDeviceTypeChange'>;
 }
+export interface BannerProps {
+    image?: ReactNode | string;
+    deviceType: InformationProps['deviceType'];
+    showBackgroundSkeleton?: boolean;
+}
 export type ThumbnailProps = Omit<ThumbnailCardProps, keyof TTemplateItem | 'onClickWrapper'> & {
     thumbnails?: TThumbnail[];
     onClickThumbnail?: (value: TThumbnail) => void;
@@ -28,6 +33,7 @@ export interface InformationProps {
     buttonText?: string;
     description?: string;
     showDeviceRadios?: boolean;
+    loading?: boolean;
     onDeviceTypeChange: (value: string) => void;
-    buttonClick?: React.MouseEventHandler<HTMLElement>;
+    onButtonClick?: React.MouseEventHandler<HTMLElement>;
 }

package/es/components/template/TemplateListing/Loadable.d.ts

@@ -0,0 +1,6 @@
+/**
+ *
+ * Asynchronously loads the component for TemplateListing
+ *
+ */
+export declare const TemplateListing: (props: import("./types").TemplateListingProps<{}>) => JSX.Element;

package/es/components/template/TemplateListing/Loadable.js

@@ -0,0 +1,7 @@
+/**
+ *
+ * Asynchronously loads the component for TemplateListing
+ *
+ */
+import { lazyLoad } from '../../../utils/loadable';
+export const TemplateListing = lazyLoad(() => import('./index'), module => module.TemplateListing);