@antscorp/antsomi-ui 2.0.13 → 2.0.15

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

@@ -1,14 +1,4 @@
-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, Fragment as _Fragment } from "react/jsx-runtime";
 // Libraries
 import React, { memo, useMemo, useRef, useState } from 'react';
 import Icon from '@antscorp/icons';
@@ -29,7 +19,7 @@ const WRAPPER_WIDTH = 990;
 const GAP_X = 10;
 const ICON_SIZE = 24;
 export const ThumbnailSlider = memo(props => {
-    const { thumbnails, width = THUMBNAIL_WIDTH_DEFAULT, height = THUMBNAIL_HEIGHT_DEFAULT, onClickThumbnail } = props, restOfThumbnailProps = __rest(props, ["thumbnails", "width", "height", "onClickThumbnail"]);
+    const { thumbnails, width = THUMBNAIL_WIDTH_DEFAULT, height = THUMBNAIL_HEIGHT_DEFAULT, onClickThumbnail, ...restOfThumbnailProps } = props;
     //  States
     const [isSlideBeginning, setSlideBeginning] = useState(true);
     const [isSlideEnd, setSlideEnd] = useState(false);
@@ -41,43 +31,35 @@ export const ThumbnailSlider = memo(props => {
     const thumbnailWrapperWidth = useMemo(() => width + GAP_X * 2 + ICON_SIZE, [width]);
     // Memo
     const isShowSwiper = useMemo(() => {
-        const calculate = ((thumbnails === null || thumbnails === void 0 ? void 0 : thumbnails.length) || 0) * thumbnailWrapperWidth;
+        const calculate = (thumbnails?.length || 0) * thumbnailWrapperWidth;
         return calculate > WRAPPER_WIDTH;
-    }, [thumbnails === null || thumbnails === void 0 ? void 0 : thumbnails.length, thumbnailWrapperWidth]);
+    }, [thumbnails?.length, thumbnailWrapperWidth]);
     // const thumbnailCacheValue = useMemo(() => new Date().getTime(), []);
     // Renders
     const renderThumbnail = (args) => {
         const { thumbnail, index } = args;
         const { id, url } = thumbnail;
-        return (React.createElement(Flex, { gap: GAP_X },
-            !!index && (React.createElement(Flex, { align: "center" },
-                React.createElement(Icon, { type: "icon-ants-expand-more", style: { fontSize: ICON_SIZE, transform: 'rotate(270deg)' } }))),
-            React.createElement(ThumbnailCard, Object.assign({ key: id, id: id, width: width, height: height, thumbnail: url, 
-                // thumbnailCacheValue={thumbnailCacheValue}
-                style: { flexShrink: 0 }, className: "thumbnail-animation", actionAvailable: false, onClickWrapper: () => onClickThumbnail === null || onClickThumbnail === void 0 ? void 0 : onClickThumbnail(thumbnail) }, restOfThumbnailProps))));
+        return (_jsxs(Flex, { gap: GAP_X, children: [!!index && (_jsx(Flex, { align: "center", children: _jsx(Icon, { type: "icon-ants-expand-more", style: { fontSize: ICON_SIZE, transform: 'rotate(270deg)' } }) })), _jsx(ThumbnailCard, { id: id, width: width, height: height, thumbnail: url, 
+                    // thumbnailCacheValue={thumbnailCacheValue}
+                    style: { flexShrink: 0 }, className: "thumbnail-animation", actionAvailable: false, onClickWrapper: () => onClickThumbnail?.(thumbnail), ...restOfThumbnailProps }, id)] }));
     };
-    return thumbnails && !isEmpty(thumbnails) ? (React.createElement(ThumbnailSliderWrapper, null, isShowSwiper ? (React.createElement(React.Fragment, null,
-        React.createElement(Swiper, { slidesPerView: Math.floor(WRAPPER_WIDTH / thumbnailWrapperWidth), spaceBetween: GAP_X, modules: [Navigation, A11y, Thumbs], navigation: {
-                prevEl: navigationPrevRef.current,
-                nextEl: navigationNextRef.current,
-            }, onBeforeInit: swiper => {
-                setTimeout(() => {
-                    // Override prevEl & nextEl now that refs are defined
-                    if (swiper.params.navigation && typeof swiper.params.navigation !== 'boolean') {
-                        swiper.params.navigation.prevEl = navigationPrevRef.current;
-                        swiper.params.navigation.nextEl = navigationNextRef.current;
-                        // Re-init navigation
-                        swiper.navigation.destroy();
-                        swiper.navigation.init();
-                        swiper.navigation.update();
-                    }
-                });
-            }, onSlideChange: ({ isBeginning, isEnd }) => {
-                setSlideBeginning(isBeginning);
-                setSlideEnd(isEnd);
-            } }, thumbnails.map((thumbnail, index) => (React.createElement(SwiperSlideWrapper, { key: `slide-${thumbnail.id}` }, renderThumbnail({ thumbnail, index }))))),
-        React.createElement(Button, { ref: navigationPrevRef, className: classNames({ 'custom-button-prev': true, hidden: isSlideBeginning }) },
-            React.createElement(Icon, { type: "icon-ants-expand-more" })),
-        React.createElement(Button, { ref: navigationNextRef, className: classNames({ 'custom-button-next': true, hidden: isSlideEnd }) },
-            React.createElement(Icon, { type: "icon-ants-expand-more" })))) : (React.createElement(Flex, { gap: GAP_X, style: { width: 'fit-content' } }, thumbnails === null || thumbnails === void 0 ? void 0 : thumbnails.map((thumbnail, index) => (React.createElement(React.Fragment, { key: thumbnail.id }, renderThumbnail({ thumbnail, index })))))))) : null;
+    return thumbnails && !isEmpty(thumbnails) ? (_jsx(ThumbnailSliderWrapper, { children: isShowSwiper ? (_jsxs(_Fragment, { children: [_jsx(Swiper, { slidesPerView: Math.floor(WRAPPER_WIDTH / thumbnailWrapperWidth), spaceBetween: GAP_X, modules: [Navigation, A11y, Thumbs], navigation: {
+                        prevEl: navigationPrevRef.current,
+                        nextEl: navigationNextRef.current,
+                    }, onBeforeInit: swiper => {
+                        setTimeout(() => {
+                            // Override prevEl & nextEl now that refs are defined
+                            if (swiper.params.navigation && typeof swiper.params.navigation !== 'boolean') {
+                                swiper.params.navigation.prevEl = navigationPrevRef.current;
+                                swiper.params.navigation.nextEl = navigationNextRef.current;
+                                // Re-init navigation
+                                swiper.navigation.destroy();
+                                swiper.navigation.init();
+                                swiper.navigation.update();
+                            }
+                        });
+                    }, onSlideChange: ({ isBeginning, isEnd }) => {
+                        setSlideBeginning(isBeginning);
+                        setSlideEnd(isEnd);
+                    }, children: thumbnails.map((thumbnail, index) => (_jsx(SwiperSlideWrapper, { children: renderThumbnail({ thumbnail, index }) }, `slide-${thumbnail.id}`))) }), _jsx(Button, { ref: navigationPrevRef, className: classNames({ 'custom-button-prev': true, hidden: isSlideBeginning }), children: _jsx(Icon, { type: "icon-ants-expand-more" }) }), _jsx(Button, { ref: navigationNextRef, className: classNames({ 'custom-button-next': true, hidden: isSlideEnd }), children: _jsx(Icon, { type: "icon-ants-expand-more" }) })] })) : (_jsx(Flex, { gap: GAP_X, style: { width: 'fit-content' }, children: thumbnails?.map((thumbnail, index) => (_jsx(React.Fragment, { children: renderThumbnail({ thumbnail, index }) }, thumbnail.id))) })) })) : null;
 });

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

@@ -1,4 +1,3 @@
-var _a;
 import styled from 'styled-components';
 import { SwiperSlide } from 'swiper/react';
 // Constants
@@ -21,10 +20,10 @@ export const ThumbnailSliderWrapper = styled.div `
   .thumbnail-animation {
     box-shadow: none;
     transition: box-shadow 0.1s ease-in-out;
-    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;
     }
 
     &:hover {
@@ -70,7 +69,7 @@ export const ThumbnailSliderWrapper = styled.div `
 
   i {
     font-size: 20px;
-    color: ${(_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.bw8};
+    color: ${THEME?.token?.bw8};
   }
 `;
 export const SwiperSlideWrapper = styled(SwiperSlide) `

package/es/components/organism/PreviewTemplateModal/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, useEffect, useState } from 'react';
+import { memo, useEffect, useState } from 'react';
 import { isNil } from 'lodash';
 // Components
 import { Flex, Spin } from '../../atoms';
@@ -20,21 +10,13 @@ import { ModalContainer, ModalWrapper } from './styled';
 // Constants
 import { DEVICE_TYPE, SIMILAR_TEMPLATE_DEFAULT, THUMBNAIL_DEFAULT } from './constants';
 export const PreviewTemplateModal = memo(props => {
-    const { bannerProps, thumbnailProps = THUMBNAIL_DEFAULT, similarTemplateProps = SIMILAR_TEMPLATE_DEFAULT, informationProps, loading = false } = props, restOfProps = __rest(props, ["bannerProps", "thumbnailProps", "similarTemplateProps", "informationProps", "loading"]);
+    const { bannerProps, thumbnailProps = THUMBNAIL_DEFAULT, similarTemplateProps = SIMILAR_TEMPLATE_DEFAULT, informationProps, loading = false, ...restOfProps } = props;
     // States
     const [deviceType, setDeviceType] = useState(DEVICE_TYPE.DESKTOP.value);
     useEffect(() => {
-        if (!isNil(bannerProps === null || bannerProps === void 0 ? void 0 : bannerProps.deviceType)) {
+        if (!isNil(bannerProps?.deviceType)) {
             setDeviceType(bannerProps.deviceType);
         }
-    }, [bannerProps === null || bannerProps === void 0 ? void 0 : bannerProps.deviceType]);
-    return (React.createElement(ModalContainer, Object.assign({ footer: null, centered: true, modalRender: node => React.createElement(ModalWrapper, null, node) }, restOfProps),
-        React.createElement(Spin, { spinning: loading },
-            React.createElement(Flex, { gap: 20 },
-                React.createElement("div", { className: "overview" },
-                    React.createElement(Flex, { gap: 20, vertical: true, style: { width: '100%' } },
-                        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)))));
+    }, [bannerProps?.deviceType]);
+    return (_jsx(ModalContainer, { footer: null, centered: true, modalRender: node => _jsx(ModalWrapper, { children: node }), ...restOfProps, children: _jsxs(Spin, { spinning: loading, children: [_jsxs(Flex, { gap: 20, children: [_jsx("div", { className: "overview", children: _jsxs(Flex, { gap: 20, vertical: true, style: { width: '100%' }, children: [_jsx(Banner, { deviceType: deviceType, ...bannerProps }), _jsx(ThumbnailSlider, { ...thumbnailProps })] }) }), _jsx(Information, { deviceType: deviceType, onDeviceTypeChange: value => setDeviceType(value), ...informationProps })] }), _jsx(SimilarTemplate, { ...similarTemplateProps })] }) }));
 });

package/es/components/organism/PreviewTemplateModal/stories/dataTypes/components/BannerPropsTable/index.js

@@ -1,5 +1,4 @@
-// Libraries
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Image } from 'antd';
 // Components
 import { Table } from '../../../../../..';
@@ -15,20 +14,17 @@ export const BannerPropsTable = () => {
         {
             key: '1',
             property: 'showBackgroundSkeleton',
-            description: (React.createElement(Flex, { gap: 10, vertical: true },
-                React.createElement(Typography.Text, null, "Handler show or hide skeleton background"),
-                React.createElement(Image, { src: skeletonBackgroundImage, width: 200, height: "auto" }))),
-            type: React.createElement(CustomTag, { type: "normal" }, "boolean"),
-            default: React.createElement(CustomTag, { type: "default" }, "false"),
+            description: (_jsxs(Flex, { gap: 10, vertical: true, children: [_jsx(Typography.Text, { children: "Handler show or hide skeleton background" }), _jsx(Image, { src: skeletonBackgroundImage, width: 200, height: "auto" })] })),
+            type: _jsx(CustomTag, { type: "normal", children: "boolean" }),
+            default: _jsx(CustomTag, { type: "default", children: "false" }),
         },
         {
             key: '2',
             property: 'children',
-            description: (React.createElement(Flex, { gap: 10, vertical: true },
-                React.createElement(Typography.Text, null, "Children of Banner Component"))),
-            type: React.createElement(CustomTag, { type: "normal" }, "ReactNode"),
-            default: React.createElement(CustomTag, { type: "default" }, " - "),
+            description: (_jsx(Flex, { gap: 10, vertical: true, children: _jsx(Typography.Text, { children: "Children of Banner Component" }) })),
+            type: _jsx(CustomTag, { type: "normal", children: "ReactNode" }),
+            default: _jsx(CustomTag, { type: "default", children: " - " }),
         },
     ];
-    return React.createElement(Table, { dataSource: dataSource, columns: TABLE_API_COLUMNS, pagination: false });
+    return _jsx(Table, { dataSource: dataSource, columns: TABLE_API_COLUMNS, pagination: false });
 };

package/es/components/organism/PreviewTemplateModal/stories/dataTypes/components/DataTypeTable/index.js

@@ -1,5 +1,4 @@
-// Libraries
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Table } from '@antscorp/antsomi-ui/es/index';
 import LinkTo from '@storybook/addon-links/react';
 import { Image } from 'antd';
@@ -32,31 +31,27 @@ export const DataTypeTable = () => {
         {
             key: 'bannerProps',
             name: 'bannerProps',
-            type: (React.createElement(LinkTo, { story: "banner-props" },
-                React.createElement(CustomTag, { type: "link" }, "BannerProps"))),
-            description: React.createElement(Image, { src: bannerImage, width: 200, height: "auto" }),
+            type: (_jsx(LinkTo, { story: "banner-props", children: _jsx(CustomTag, { type: "link", children: "BannerProps" }) })),
+            description: _jsx(Image, { src: bannerImage, width: 200, height: "auto" }),
         },
         {
             key: 'informationProps',
             name: 'informationProps',
-            type: (React.createElement(LinkTo, { story: "information-props" },
-                React.createElement(CustomTag, { type: "link" }, "InformationProps"))),
-            description: React.createElement(Image, { src: informationImage, width: 200, height: "auto" }),
+            type: (_jsx(LinkTo, { story: "information-props", children: _jsx(CustomTag, { type: "link", children: "InformationProps" }) })),
+            description: _jsx(Image, { src: informationImage, width: 200, height: "auto" }),
         },
         {
             key: 'ThumbnailProps',
             name: 'ThumbnailProps',
-            type: (React.createElement(LinkTo, { story: "thumbnail-props" },
-                React.createElement(CustomTag, { type: "link" }, "ThumbnailProps"))),
-            description: React.createElement(Image, { src: thumbnailsImage, width: 200, height: "auto" }),
+            type: (_jsx(LinkTo, { story: "thumbnail-props", children: _jsx(CustomTag, { type: "link", children: "ThumbnailProps" }) })),
+            description: _jsx(Image, { src: thumbnailsImage, width: 200, height: "auto" }),
         },
         {
             key: 'SimilarTemplateProps',
             name: 'SimilarTemplateProps',
-            type: (React.createElement(LinkTo, { story: "similar-template-props" },
-                React.createElement(CustomTag, { type: "link" }, "SimilarTemplateProps"))),
-            description: React.createElement(Image, { src: similarTemplateImage, width: 200, height: "auto" }),
+            type: (_jsx(LinkTo, { story: "similar-template-props", children: _jsx(CustomTag, { type: "link", children: "SimilarTemplateProps" }) })),
+            description: _jsx(Image, { src: similarTemplateImage, width: 200, height: "auto" }),
         },
     ];
-    return React.createElement(Table, { dataSource: dataSource, columns: columns, pagination: false });
+    return _jsx(Table, { dataSource: dataSource, columns: columns, pagination: false });
 };

package/es/components/organism/PreviewTemplateModal/stories/dataTypes/components/InformationPropsTable/index.js

@@ -1,5 +1,4 @@
-// Libraries
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Image } from 'antd';
 // Components
 import { Table } from '../../../../../..';
@@ -19,58 +18,46 @@ export const InformationPropsTable = () => {
         {
             key: '1',
             property: 'itemName',
-            description: (React.createElement(Flex, { gap: 10, vertical: true },
-                React.createElement(Typography.Text, null, "Name of template item"),
-                React.createElement(Image, { src: itemNameImage, width: 200, height: "auto" }))),
-            type: React.createElement(CustomTag, { type: "normal" }, "string"),
-            default: React.createElement(CustomTag, { type: "default" }, "Template name"),
+            description: (_jsxs(Flex, { gap: 10, vertical: true, children: [_jsx(Typography.Text, { children: "Name of template item" }), _jsx(Image, { src: itemNameImage, width: 200, height: "auto" })] })),
+            type: _jsx(CustomTag, { type: "normal", children: "string" }),
+            default: _jsx(CustomTag, { type: "default", children: "Template name" }),
         },
         {
             key: '2',
             property: 'categoryListing',
-            description: (React.createElement(Flex, { gap: 10, vertical: true },
-                React.createElement(Typography.Text, null, "Children of Banner Component"))),
-            type: (React.createElement("a", { href: "../?path=/docs/templates-templatelisting-datatype--t-category-item", target: "_blank" },
-                React.createElement(CustomTag, { type: "link" }, "TCategoryItem [ ]"))),
-            default: React.createElement(CustomTag, { type: "default" }, " - "),
+            description: (_jsx(Flex, { gap: 10, vertical: true, children: _jsx(Typography.Text, { children: "Children of Banner Component" }) })),
+            type: (_jsx("a", { href: "../?path=/docs/templates-templatelisting-datatype--t-category-item", target: "_blank", children: _jsx(CustomTag, { type: "link", children: "TCategoryItem [ ]" }) })),
+            default: _jsx(CustomTag, { type: "default", children: " - " }),
         },
         {
             key: '3',
             property: 'buttonText',
-            description: (React.createElement(Flex, { gap: 10, vertical: true },
-                React.createElement(Typography.Text, null, "Text of Information Button"),
-                React.createElement(Image, { src: buttonTextImage, width: 200, height: "auto" }))),
-            type: React.createElement(CustomTag, { type: "normal" }, "string"),
-            default: React.createElement(CustomTag, { type: "default" }, " Use template "),
+            description: (_jsxs(Flex, { gap: 10, vertical: true, children: [_jsx(Typography.Text, { children: "Text of Information Button" }), _jsx(Image, { src: buttonTextImage, width: 200, height: "auto" })] })),
+            type: _jsx(CustomTag, { type: "normal", children: "string" }),
+            default: _jsx(CustomTag, { type: "default", children: " Use template " }),
         },
         {
             key: '4',
             property: 'description',
-            description: (React.createElement(Flex, { gap: 10, vertical: true },
-                React.createElement(Typography.Text, null, "description of Preview Modal Information "),
-                React.createElement(Image, { src: descriptionImage, width: 200, height: "auto" }))),
-            type: React.createElement(CustomTag, { type: "normal" }, "string"),
-            default: React.createElement(CustomTag, { type: "default" }, " - "),
+            description: (_jsxs(Flex, { gap: 10, vertical: true, children: [_jsx(Typography.Text, { children: "description of Preview Modal Information " }), _jsx(Image, { src: descriptionImage, width: 200, height: "auto" })] })),
+            type: _jsx(CustomTag, { type: "normal", children: "string" }),
+            default: _jsx(CustomTag, { type: "default", children: " - " }),
         },
         {
             key: '5',
             property: 'showDeviceRadios',
-            description: (React.createElement(Flex, { gap: 10, vertical: true },
-                React.createElement(Typography.Text, null, "Handle show or hide device radios "),
-                React.createElement(Image, { src: deviceRadioImage, width: 200, height: "auto" }))),
-            type: React.createElement(CustomTag, { type: "normal" }, "boolean"),
-            default: React.createElement(CustomTag, { type: "default" }, " true "),
+            description: (_jsxs(Flex, { gap: 10, vertical: true, children: [_jsx(Typography.Text, { children: "Handle show or hide device radios " }), _jsx(Image, { src: deviceRadioImage, width: 200, height: "auto" })] })),
+            type: _jsx(CustomTag, { type: "normal", children: "boolean" }),
+            default: _jsx(CustomTag, { type: "default", children: " true " }),
         },
         {
             key: '6',
             property: 'onButtonClick',
-            description: (React.createElement(Flex, { gap: 10, vertical: true },
-                React.createElement(Typography.Text, null, "Handle show or hide device radios "),
-                React.createElement(Image, { src: clickButtonImage, width: 200, height: "auto" }))),
-            type: React.createElement(CustomTag, { type: "normal" }, 'React.MouseEventHandler<HTMLElement>'),
-            default: React.createElement(CustomTag, { type: "default" }, " - "),
+            description: (_jsxs(Flex, { gap: 10, vertical: true, children: [_jsx(Typography.Text, { children: "Handle show or hide device radios " }), _jsx(Image, { src: clickButtonImage, width: 200, height: "auto" })] })),
+            type: _jsx(CustomTag, { type: "normal", children: 'React.MouseEventHandler<HTMLElement>' }),
+            default: _jsx(CustomTag, { type: "default", children: " - " }),
         },
     ];
     //
-    return React.createElement(Table, { dataSource: dataSource, columns: TABLE_API_COLUMNS, pagination: false });
+    return _jsx(Table, { dataSource: dataSource, columns: TABLE_API_COLUMNS, pagination: false });
 };

package/es/components/organism/PreviewTemplateModal/stories/dataTypes/components/SimilarTemplatePropsTable/index.js

@@ -1,5 +1,4 @@
-// Libraries
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 // Components
 import { Table } from '../../../../../..';
 import { Typography, Flex } from '../../../../../../atoms';
@@ -12,29 +11,24 @@ export const SimilarTemplatePropsTable = () => {
         {
             key: '1',
             property: 'show',
-            description: (React.createElement(Flex, { gap: 10, vertical: true },
-                React.createElement(Typography.Text, null, "Handler show or hide similar template"))),
-            type: React.createElement(CustomTag, { type: "normal" }, "boolean"),
-            default: React.createElement(CustomTag, { type: "default" }, "true"),
+            description: (_jsx(Flex, { gap: 10, vertical: true, children: _jsx(Typography.Text, { children: "Handler show or hide similar template" }) })),
+            type: _jsx(CustomTag, { type: "normal", children: "boolean" }),
+            default: _jsx(CustomTag, { type: "default", children: "true" }),
         },
         {
             key: '2',
             property: 'similarTemplates',
-            description: (React.createElement(Flex, { gap: 10, vertical: true },
-                React.createElement(Typography.Text, null, "List of similar templates"))),
-            type: (React.createElement("a", { href: "../?path=/docs/templates-templatelisting-datatype--t-template-item", target: "_blank" },
-                React.createElement(CustomTag, { type: "link" }, "TTemplateItem [ ]"))),
-            default: React.createElement(CustomTag, { type: "default" }, " [ ] "),
+            description: (_jsx(Flex, { gap: 10, vertical: true, children: _jsx(Typography.Text, { children: "List of similar templates" }) })),
+            type: (_jsx("a", { href: "../?path=/docs/templates-templatelisting-datatype--t-template-item", target: "_blank", children: _jsx(CustomTag, { type: "link", children: "TTemplateItem [ ]" }) })),
+            default: _jsx(CustomTag, { type: "default", children: " [ ] " }),
         },
         {
             key: '3',
             property: 'similarCardProps',
-            description: (React.createElement(Flex, { gap: 10, vertical: true },
-                React.createElement(Typography.Text, null, "Custom similar card"))),
-            type: (React.createElement("a", { href: "../?path=/docs/molecules-thumbnailcard--default", target: "_blank" },
-                React.createElement(CustomTag, { type: "link" }, "similarCardProps"))),
-            default: React.createElement(CustomTag, { type: "default" }, " - "),
+            description: (_jsx(Flex, { gap: 10, vertical: true, children: _jsx(Typography.Text, { children: "Custom similar card" }) })),
+            type: (_jsx("a", { href: "../?path=/docs/molecules-thumbnailcard--default", target: "_blank", children: _jsx(CustomTag, { type: "link", children: "similarCardProps" }) })),
+            default: _jsx(CustomTag, { type: "default", children: " - " }),
         },
     ];
-    return React.createElement(Table, { dataSource: dataSource, columns: TABLE_API_COLUMNS, pagination: false });
+    return _jsx(Table, { dataSource: dataSource, columns: TABLE_API_COLUMNS, pagination: false });
 };

package/es/components/organism/PreviewTemplateModal/stories/dataTypes/components/TThumbnailTable/index.js

@@ -1,5 +1,4 @@
-// Libraries
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 // Components
 import { Table } from '../../../../../..';
 import { Typography, Flex } from '../../../../../../atoms';
@@ -12,19 +11,17 @@ export const TThumbnailTable = () => {
         {
             key: '1',
             property: 'id',
-            description: (React.createElement(Flex, { gap: 10, vertical: true },
-                React.createElement(Typography.Text, null, "Identification of thumbnail"))),
-            type: React.createElement(CustomTag, { type: "normal" }, "string | number"),
-            default: React.createElement(CustomTag, { type: "default" }, " - "),
+            description: (_jsx(Flex, { gap: 10, vertical: true, children: _jsx(Typography.Text, { children: "Identification of thumbnail" }) })),
+            type: _jsx(CustomTag, { type: "normal", children: "string | number" }),
+            default: _jsx(CustomTag, { type: "default", children: " - " }),
         },
         {
             key: '2',
             property: 'url',
-            description: (React.createElement(Flex, { gap: 10, vertical: true },
-                React.createElement(Typography.Text, null, "Thumbnail url"))),
-            type: React.createElement(CustomTag, { type: "normal" }, "string"),
-            default: React.createElement(CustomTag, { type: "default" }, " - "),
+            description: (_jsx(Flex, { gap: 10, vertical: true, children: _jsx(Typography.Text, { children: "Thumbnail url" }) })),
+            type: _jsx(CustomTag, { type: "normal", children: "string" }),
+            default: _jsx(CustomTag, { type: "default", children: " - " }),
         },
     ];
-    return React.createElement(Table, { dataSource: dataSource, columns: TABLE_API_COLUMNS, pagination: false });
+    return _jsx(Table, { dataSource: dataSource, columns: TABLE_API_COLUMNS, pagination: false });
 };

package/es/components/organism/PreviewTemplateModal/stories/dataTypes/components/ThumbnailPropsTable/index.js

@@ -1,5 +1,4 @@
-// Libraries
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import LinkTo from '@storybook/addon-links/react';
 // Components
 import { Table } from '../../../../../..';
@@ -13,34 +12,24 @@ export const ThumbnailPropsTable = () => {
         {
             key: '1',
             property: 'thumbnails',
-            description: (React.createElement(Flex, { gap: 10, vertical: true },
-                React.createElement(Typography.Text, null, "Show list thumbnails as a slider"))),
-            type: (React.createElement(LinkTo, { story: "t-thumbnail" },
-                React.createElement(CustomTag, { type: "link" }, "TThumbnail [ ]"))),
-            default: React.createElement(CustomTag, { type: "default" }, "[ ]"),
+            description: (_jsx(Flex, { gap: 10, vertical: true, children: _jsx(Typography.Text, { children: "Show list thumbnails as a slider" }) })),
+            type: (_jsx(LinkTo, { story: "t-thumbnail", children: _jsx(CustomTag, { type: "link", children: "TThumbnail [ ]" }) })),
+            default: _jsx(CustomTag, { type: "default", children: "[ ]" }),
         },
         {
             key: '2',
             property: 'onClickThumbnail',
-            description: (React.createElement(Flex, { gap: 10, vertical: true },
-                React.createElement(Typography.Text, null, "Handle click on thumbnail"))),
-            type: (React.createElement(CustomTag, { type: "normal" },
-                `(value: `,
-                React.createElement(LinkTo, { story: "t-thumbnail" },
-                    React.createElement(CustomTag, { type: "link" }, "TThumbnail")),
-                ') => void')),
-            default: React.createElement(CustomTag, { type: "default" }, " - "),
+            description: (_jsx(Flex, { gap: 10, vertical: true, children: _jsx(Typography.Text, { children: "Handle click on thumbnail" }) })),
+            type: (_jsxs(CustomTag, { type: "normal", children: [`(value: `, _jsx(LinkTo, { story: "t-thumbnail", children: _jsx(CustomTag, { type: "link", children: "TThumbnail" }) }), ') => void'] })),
+            default: _jsx(CustomTag, { type: "default", children: " - " }),
         },
         {
             key: '3',
             property: 'ThumbnailCardProps',
-            description: (React.createElement(Flex, { gap: 10, vertical: true },
-                React.createElement(Typography.Text, null, "Custom thumbnail card"),
-                React.createElement(Typography.Text, null, "Omit id, name, thumbnail, onClickWrapper properties of thumbnail Card Props"))),
-            type: (React.createElement("a", { href: "../?path=/docs/molecules-thumbnailcard--default", target: "_blank" },
-                React.createElement(CustomTag, { type: "link" }, "ThumbnailCardProps"))),
-            default: React.createElement(CustomTag, { type: "default" }, " - "),
+            description: (_jsxs(Flex, { gap: 10, vertical: true, children: [_jsx(Typography.Text, { children: "Custom thumbnail card" }), _jsx(Typography.Text, { children: "Omit id, name, thumbnail, onClickWrapper properties of thumbnail Card Props" })] })),
+            type: (_jsx("a", { href: "../?path=/docs/molecules-thumbnailcard--default", target: "_blank", children: _jsx(CustomTag, { type: "link", children: "ThumbnailCardProps" }) })),
+            default: _jsx(CustomTag, { type: "default", children: " - " }),
         },
     ];
-    return React.createElement(Table, { dataSource: dataSource, columns: TABLE_API_COLUMNS, pagination: false });
+    return _jsx(Table, { dataSource: dataSource, columns: TABLE_API_COLUMNS, pagination: false });
 };

package/es/components/organism/PreviewTemplateModal/stories/dataTypes/dataType.stories.d.ts

@@ -3,35 +3,35 @@ declare namespace _default {
 }
 export default _default;
 export namespace DataTypes {
-    function render(): import("react").JSX.Element;
+    function render(): import("react/jsx-runtime").JSX.Element;
     let name: string;
 }
 export namespace BannerProps {
-    export function render_1(): import("react").JSX.Element;
+    export function render_1(): import("react/jsx-runtime").JSX.Element;
     export { render_1 as render };
     let name_1: string;
     export { name_1 as name };
 }
 export namespace InformationProps {
-    export function render_2(): import("react").JSX.Element;
+    export function render_2(): import("react/jsx-runtime").JSX.Element;
     export { render_2 as render };
     let name_2: string;
     export { name_2 as name };
 }
 export namespace SimilarTemplateProps {
-    export function render_3(): import("react").JSX.Element;
+    export function render_3(): import("react/jsx-runtime").JSX.Element;
     export { render_3 as render };
     let name_3: string;
     export { name_3 as name };
 }
 export namespace ThumbnailProps {
-    export function render_4(): import("react").JSX.Element;
+    export function render_4(): import("react/jsx-runtime").JSX.Element;
     export { render_4 as render };
     let name_4: string;
     export { name_4 as name };
 }
 export namespace TThumbnail {
-    export function render_5(): import("react").JSX.Element;
+    export function render_5(): import("react/jsx-runtime").JSX.Element;
     export { render_5 as render };
     let name_5: string;
     export { name_5 as name };

package/es/components/organism/PreviewTemplateModal/stories/dataTypes/dataType.stories.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import LinkTo from '@storybook/addon-links/react';
 import { Button, Tag, Table } from '@antscorp/antsomi-ui/es/index';
 import { DataTypeTable, BannerPropsTable, InformationPropsTable, SimilarTemplatePropsTable, ThumbnailPropsTable, TThumbnailTable, } from './components';
@@ -5,26 +6,26 @@ export default {
     title: 'Organisms/PreviewTemplateModal/DataType',
 };
 export const DataTypes = {
-    render: () => React.createElement(DataTypeTable, null),
+    render: () => _jsx(DataTypeTable, {}),
     name: 'DataTypes',
 };
 export const BannerProps = {
-    render: () => React.createElement(BannerPropsTable, null),
+    render: () => _jsx(BannerPropsTable, {}),
     name: 'BannerProps',
 };
 export const InformationProps = {
-    render: () => React.createElement(InformationPropsTable, null),
+    render: () => _jsx(InformationPropsTable, {}),
     name: 'InformationProps',
 };
 export const SimilarTemplateProps = {
-    render: () => React.createElement(SimilarTemplatePropsTable, null),
+    render: () => _jsx(SimilarTemplatePropsTable, {}),
     name: 'SimilarTemplateProps',
 };
 export const ThumbnailProps = {
-    render: () => React.createElement(ThumbnailPropsTable, null),
+    render: () => _jsx(ThumbnailPropsTable, {}),
     name: 'ThumbnailProps',
 };
 export const TThumbnail = {
-    render: () => React.createElement(TThumbnailTable, null),
+    render: () => _jsx(TThumbnailTable, {}),
     name: 'TThumbnail',
 };