@antscorp/antsomi-ui 1.3.5-beta.245 → 1.3.5-beta.247

package/es/components/molecules/TemplateSaveAs/components/ImageSlider/styled.js

@@ -1,12 +1,21 @@
+var _a, _b;
 // Libraries
 import styled, { css } from 'styled-components';
 import { Flex } from '@antscorp/antsomi-ui/es/components';
 // Assets
-import SkeletonBg from '@antscorp/antsomi-ui/es/assets/images/skeleton_bg.png';
+import SkeletonBg from '@antscorp/antsomi-ui/es/assets/images/background/skeleton-background.png';
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
 const backgroundImage = css `
   ${() => css `
-    background: url(${SkeletonBg}) no-repeat center center, #e5e5e5;
-    background-size: contain;
+    &::after {
+      content: '';
+      position: absolute;
+      width: 90%;
+      height: 90%;
+      background: url(${SkeletonBg}) no-repeat center center;
+      background-size: contain;
+      z-index: 0;
+    }
   `}
 `;
 const setWidthHeight = ({ w, h }) => `
@@ -125,7 +134,7 @@ export const ImageSliderStyled = styled(Flex) `
       width: 100%;
       height: 100%;
       background-color: transparent;
-      z-index: 1;
+      z-index: 2;
       transition: background-color 150ms ease-in-out;
     }
 
@@ -137,14 +146,21 @@ export const ImageSliderStyled = styled(Flex) `
   .image-container {
     &--big,
     &--small {
-      background: #e5e5e5;
+      position: relative;
+      box-sizing: border-box;
+      background: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorBgSkeleton};
+      border: 1px solid ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.blue1_1};
+      border-radius: 5px;
+
       ${centerBlock}
       &:not(.hide-skeleton) {
         ${backgroundImage}
       }
 
       img {
+        position: relative;
         object-fit: contain;
+        z-index: 1;
       }
 
       div:has(> img) {
@@ -169,7 +185,8 @@ export const ImageSliderStyled = styled(Flex) `
       height: 72px;
       flex-shrink: 0;
 
-      border: 2px solid #e5e5e5;
+      /* border: 2px solid #e5e5e5; */
+      border-width: 2px;
       border-radius: 2px;
       user-select: none;
       cursor: pointer;

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

@@ -29,10 +29,9 @@ import { Button, Flex, Spin, Typography } from '../../atoms';
 // Constants
 import { THUMBNAIL_CARD_DEFAULT_HEIGHT, THUMBNAIL_CARD_DEFAULT_WIDTH } from './constants';
 import { getUrlNoCache, checkShowSkeletonBaseUrl } from '@antscorp/antsomi-ui/es/utils';
-const cacheValue = new Date().getTime();
 export const ThumbnailCard = memo(props => {
     const [modal, contextHolder] = Modal.useModal();
-    const { id, name, width = THUMBNAIL_CARD_DEFAULT_WIDTH, height = THUMBNAIL_CARD_DEFAULT_HEIGHT, thumbnail, thumbnailFit, removable = true, actionAvailable = true, showSkeleton, loading = false, removeModalProps, editBtnProps, previewBtnProps, onClickWrapper } = props, restOfProps = __rest(props, ["id", "name", "width", "height", "thumbnail", "thumbnailFit", "removable", "actionAvailable", "showSkeleton", "loading", "removeModalProps", "editBtnProps", "previewBtnProps", "onClickWrapper"]);
+    const { id, name, width = THUMBNAIL_CARD_DEFAULT_WIDTH, height = THUMBNAIL_CARD_DEFAULT_HEIGHT, thumbnail, thumbnailFit, removable = true, actionAvailable = true, showSkeleton, loading = false, removeModalProps, editBtnProps, previewBtnProps, thumbnailCacheValue, onClickWrapper } = props, restOfProps = __rest(props, ["id", "name", "width", "height", "thumbnail", "thumbnailFit", "removable", "actionAvailable", "showSkeleton", "loading", "removeModalProps", "editBtnProps", "previewBtnProps", "thumbnailCacheValue", "onClickWrapper"]);
     const _a = removeModalProps || {}, { onOk } = _a, restOfRemoveTemplateModalProps = __rest(_a, ["onOk"]);
     const _b = editBtnProps || {}, { text: editText = 'Use template', onClick: onClickEdit } = _b, restOfEditBtnProps = __rest(_b, ["text", "onClick"]);
     const _c = previewBtnProps || {}, { text: previewText = 'Preview', onClick: onClickPreview } = _c, restOfPreviewBtnProps = __rest(_c, ["text", "onClick"]);
@@ -60,7 +59,7 @@ export const ThumbnailCard = memo(props => {
     };
     return (React.createElement(Flex, Object.assign({ gap: 10, vertical: true }, restOfProps, { style: Object.assign({ width }, restOfProps.style) }),
         React.createElement(ThumbnailCardWrapper, { "$showSkeleton": showSkeletonMemo, style: { height, cursor: actionAvailable ? 'default' : 'pointer' }, onClick: handleWrapperClick },
-            React.createElement("div", { className: "screen" }, thumbnail && (React.createElement("img", { src: getUrlNoCache(thumbnail, cacheValue), alt: "", style: { objectFit: thumbnailFit }, onError: e => {
+            React.createElement("div", { className: "screen" }, thumbnail && (React.createElement("img", { src: getUrlNoCache(thumbnail, thumbnailCacheValue), alt: "", style: { objectFit: thumbnailFit }, onError: e => {
                     e.currentTarget.style.display = 'none';
                 } }))),
             actionAvailable && !loading && (React.createElement(React.Fragment, null,

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

@@ -2,17 +2,19 @@
 import styled from 'styled-components';
 // Images
 import skeletonBackground from '../../../assets/images/background/skeleton-background.png';
-import { globalToken } from '../../..';
+// Constants
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 export const ThumbnailCardWrapper = styled.div `
-  background-color: #e5e5e5;
+  background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorBgSkeleton};
   padding: 10px;
-  border-radius: ${globalToken.borderRadius}px;
+  border-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadius}px;
   position: relative;
   box-sizing: border-box;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
+  border: 1px solid ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue1_1};
 
   :hover {
     .center-action {
@@ -77,7 +79,7 @@ export const ThumbnailCardWrapper = styled.div `
   }
 
   .backdrop {
-    border-radius: ${globalToken.borderRadius}px;
+    border-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadius}px;
     position: absolute;
     width: 100%;
     height: 100%;

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

@@ -22,5 +22,6 @@ export interface ThumbnailCardProps extends Omit<HTMLAttributes<HTMLDivElement>,
     actionAvailable?: boolean;
     removeModalProps?: TRemoveModalProps;
     thumbnailFit?: React.CSSProperties['objectFit'];
+    thumbnailCacheValue?: string | number;
     onClickWrapper?: (id: TThumbnailCardId) => void;
 }

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

@@ -1,8 +1,8 @@
 import styled, { css } from 'styled-components';
 // Images
 import skeletonBackground from '../../../../../assets/images/background/skeleton-background.png';
-// Providers
-import { globalToken } from '@antscorp/antsomi-ui/es/providers';
+// Constants
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 const THUMBNAIL_CARD_RADIUS = 5;
 export const BannerWrapper = styled.div `
   width: 100%;
@@ -10,8 +10,9 @@ export const BannerWrapper = styled.div `
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: #0000001a;
-  border-radius: ${globalToken.borderRadius}px;
+  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};
 
   ${props => props.$height
     ? css `

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

@@ -3,7 +3,7 @@ import styled, { css } from 'styled-components';
 // Components
 import { Button, Flex } from '../../../../atoms';
 // Providers
-import { globalToken } from '@antscorp/antsomi-ui/es/providers';
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 export const InformationWrapper = styled(Flex) `
   width: 300px;
   flex-shrink: 0;
@@ -51,11 +51,11 @@ export const InformationWrapper = styled(Flex) `
   }
 `;
 export const CheckboxButton = styled(Button) `
-  color: ${globalToken.colorText} !important;
+  color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorText} !important;
 
   ${p => p.$active &&
     css `
-      color: ${globalToken.colorPrimary} !important;
-      background-color: ${globalToken.blue1_1} !important;
+      color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorPrimary} !important;
+      background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue1_1} !important;
     `}
 `;

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

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 // Libraries
-import React, { memo } from 'react';
+import React, { memo, useMemo } from 'react';
 import { isEmpty } from 'lodash';
 // Components
 import { ThumbnailCard } from '../../../../molecules';
@@ -23,10 +23,12 @@ 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"]);
+    // 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)));
+            return (React.createElement(ThumbnailCard, Object.assign({ key: id, id: id || idx, name: name, width: width, height: height, thumbnail: thumbnail, actionAvailable: false, className: "thumbnail-card", thumbnailCacheValue: thumbnailCacheValue }, restOfSimilarCardProps)));
         })))) : null;
 });

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

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 // Components
 import { Flex } from '../../../../atoms';
 // Providers
-import { globalToken } from '@antscorp/antsomi-ui/es/providers';
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 export const SimilarTemplateWrapper = styled(Flex) `
   margin-top: 15px;
 
@@ -17,10 +17,10 @@ export const TemplateListWrapper = styled.div `
   gap: 30px;
 
   .thumbnail-card {
-    border-radius: ${globalToken.borderRadius}px;
+    border-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadius}px;
 
     > div {
-      border-radius: ${globalToken.borderRadius}px;
+      border-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadius}px;
     }
   }
 `;

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

@@ -44,6 +44,7 @@ export const ThumbnailSlider = memo(props => {
         const calculate = ((thumbnails === null || thumbnails === void 0 ? void 0 : thumbnails.length) || 0) * thumbnailWrapperWidth;
         return calculate > WRAPPER_WIDTH;
     }, [thumbnails === null || thumbnails === void 0 ? void 0 : thumbnails.length, thumbnailWrapperWidth]);
+    const thumbnailCacheValue = useMemo(() => new Date().getTime(), []);
     // Renders
     const renderThumbnail = (args) => {
         const { thumbnail, index } = args;
@@ -51,7 +52,7 @@ export const ThumbnailSlider = memo(props => {
         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, style: { flexShrink: 0 }, className: "thumbnail-animation", actionAvailable: false, onClickWrapper: () => onClickThumbnail === null || onClickThumbnail === void 0 ? void 0 : onClickThumbnail(thumbnail) }, restOfThumbnailProps))));
+            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 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: {

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

@@ -1,8 +1,8 @@
 var _a;
-import { THEME } from '@antscorp/antsomi-ui/es/constants';
-import { globalToken } from '@antscorp/antsomi-ui/es/providers';
 import styled from 'styled-components';
 import { SwiperSlide } from 'swiper/react';
+// Constants
+import { THEME, globalToken } from '@antscorp/antsomi-ui/es/constants';
 export const ThumbnailSliderWrapper = styled.div `
   width: 100%;
   display: flex;
@@ -21,10 +21,10 @@ export const ThumbnailSliderWrapper = styled.div `
   .thumbnail-animation {
     box-shadow: none;
     transition: box-shadow 0.1s ease-in-out;
-    border-radius: ${globalToken.borderRadius}px;
+    border-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadius}px;
 
     > div {
-      border-radius: ${globalToken.borderRadius}px;
+      border-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadius}px;
     }
 
     &:hover {

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

@@ -18,20 +18,17 @@ import { Banner, Information, SimilarTemplate, ThumbnailSlider } from './compone
 import { ModalContainer, ModalWrapper } from './styled';
 // Constants
 import { DEVICE_TYPE, SIMILAR_TEMPLATE_DEFAULT, THUMBNAIL_DEFAULT } from './constants';
-// Providers
-import { AntdConfigProviderV2 } from '@antscorp/antsomi-ui/es/providers';
 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"]);
     // States
     const [deviceType, setDeviceType] = useState(DEVICE_TYPE.DESKTOP.value);
-    return (React.createElement(AntdConfigProviderV2, null,
-        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))))));
+    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)))));
 });

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

@@ -11,9 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 /* eslint-disable react/function-component-definition */
 // Libraries
-import React, { memo, useState } from 'react';
-// Config Providers
-import { AntdConfigProviderV2 } from '../../..';
+import React, { memo, useMemo, useState } from 'react';
 // Components
 import { CategoryListing, BlankTemplate, Empty } from './components';
 import { Spin } from '@antscorp/antsomi-ui/es/components/atoms';
@@ -37,6 +35,8 @@ export const TemplateListing = memo(props => {
     const _b = templateItemProps || {}, { width = THUMBNAIL_CARD_DEFAULT_WIDTH, height = THUMBNAIL_CARD_DEFAULT_HEIGHT, previewBtnProps } = _b, restOfTemplateItemProps = __rest(_b, ["width", "height", "previewBtnProps"]);
     const { onClick: onClickPreview } = previewBtnProps || {};
     const isHasData = items.length > 0;
+    // Memo
+    const thumbnailCacheValue = useMemo(() => new Date().getTime(), []);
     // Hooks
     const { ref: containerRef, itemPerRow, ratio, gap: listingGap, } = useListingItemResize({
         gap,
@@ -66,32 +66,31 @@ export const TemplateListing = memo(props => {
     };
     return (
     /** The className "template-listing-wrapper" is used to detect dom in useListingItemResize hook */
-    React.createElement(AntdConfigProviderV2, null,
-        React.createElement(TemplateListingWrapper, { className: "template-listing-wrapper" },
-            React.createElement(CategoryListing, Object.assign({}, categoryListingProps, { emptyProps: emptyProps })),
-            React.createElement(TemplateWrapper, { className: wrapperClassName, style: wrapperStyle },
-                header,
-                React.createElement(Spin, { spinning: loading || !itemPerRow, wrapperClassName: "template-listing__loading template-listing__loading--full" },
-                    React.createElement("div", { className: "template-listing" },
-                        React.createElement("div", { ref: containerRef, style: {
-                                display: 'grid',
-                                gap: listingGap,
-                                gridTemplateColumns: `repeat(${itemPerRow}, minmax(0, 1fr))`,
-                            } },
-                            React.createElement(BlankTemplate, Object.assign({ width: width * ratio, height: height * ratio }, blankTemplateProps)),
-                            !!itemPerRow &&
-                                (items === null || items === void 0 ? void 0 : items.map((item, index) => {
-                                    const { id, name, thumbnail } = item || {};
-                                    const loading = typeof (item === null || item === void 0 ? void 0 : item.name) === 'undefined';
-                                    return (React.createElement("div", { key: id },
-                                        index === items.length - 2 && React.createElement(LoadMoreBlock, { ref: loadMoreRef }),
-                                        React.createElement(ThumbnailCard, Object.assign({ id: id || 0, name: name || 'Untitled', loading: loading, width: width * ratio, height: height * ratio, thumbnail: thumbnail, className: `${templateItemProps.className}`, previewBtnProps: {
-                                                onClick: handleClickThumbnailPreview,
-                                            } }, restOfTemplateItemProps))));
-                                }))),
-                        !loading && !blankTemplateProps.show && !isHasData && React.createElement(Empty, Object.assign({}, emptyProps)))),
-                footer),
-            React.createElement(PreviewTemplateModal, Object.assign({ open: openPreviewModal, onOk: handleOkPreviewModal, onCancel: handleCancelPreviewModal }, restOfPreviewModalProps)))));
+    React.createElement(TemplateListingWrapper, { className: "template-listing-wrapper" },
+        React.createElement(CategoryListing, Object.assign({}, categoryListingProps, { emptyProps: emptyProps })),
+        React.createElement(TemplateWrapper, { className: wrapperClassName, style: wrapperStyle },
+            header,
+            React.createElement(Spin, { spinning: loading || !itemPerRow, wrapperClassName: "template-listing__loading template-listing__loading--full" },
+                React.createElement("div", { className: "template-listing" },
+                    React.createElement("div", { ref: containerRef, style: {
+                            display: 'grid',
+                            gap: listingGap,
+                            gridTemplateColumns: `repeat(${itemPerRow}, minmax(0, 1fr))`,
+                        } },
+                        React.createElement(BlankTemplate, Object.assign({ width: width * ratio, height: height * ratio }, blankTemplateProps)),
+                        !!itemPerRow &&
+                            (items === null || items === void 0 ? void 0 : items.map((item, index) => {
+                                const { id, name, thumbnail } = item || {};
+                                const loading = typeof (item === null || item === void 0 ? void 0 : item.name) === 'undefined';
+                                return (React.createElement("div", { key: id },
+                                    index === items.length - 2 && React.createElement(LoadMoreBlock, { ref: loadMoreRef }),
+                                    React.createElement(ThumbnailCard, Object.assign({ id: id || 0, name: name || 'Untitled', loading: loading, width: width * ratio, height: height * ratio, thumbnail: thumbnail, className: `${templateItemProps.className}`, thumbnailCacheValue: thumbnailCacheValue, previewBtnProps: {
+                                            onClick: handleClickThumbnailPreview,
+                                        } }, restOfTemplateItemProps))));
+                            }))),
+                    !loading && !blankTemplateProps.show && !isHasData && React.createElement(Empty, Object.assign({}, emptyProps)))),
+            footer),
+        React.createElement(PreviewTemplateModal, Object.assign({ open: openPreviewModal, onOk: handleOkPreviewModal, onCancel: handleCancelPreviewModal }, restOfPreviewModalProps))));
 });
 TemplateListing.displayName = 'TemplateListing';
 TemplateListing.defaultProps = TEMPLATE_LISTING_DEFAULT;

package/es/constants/theme.js

@@ -22,7 +22,8 @@ export const THEME = {
         colorTextActive: '#e0ebf7',
         colorIcon: '#666666',
         /* Border radius */
-        borderRadius: 3,
+        borderRadius: 10,
+        borderRadiusLG: 10,
         borderRadiusXL: 10,
         /* Font */
         fontFamily: 'Roboto',
@@ -76,6 +77,8 @@ export const THEME = {
         gold1,
         gold6,
         scrollBarSize: '4px',
+        /** Skeleton */
+        colorBgSkeleton: '#FCFDFF',
     },
 };
 THEME.components = {
@@ -88,6 +91,7 @@ THEME.components = {
         colorBgTextHover: (_c = THEME.token) === null || _c === void 0 ? void 0 : _c.blue,
         colorBgContainerDisabled: (_d = THEME.token) === null || _d === void 0 ? void 0 : _d.bw6,
         colorTextDisabled: (_e = THEME.token) === null || _e === void 0 ? void 0 : _e.bw0,
+        textHoverBg: '#F2F9FF',
     },
     Input: {
         controlHeight: 32,
@@ -150,6 +154,7 @@ THEME.components = {
         controlInteractiveSize: 18,
         colorBorder: (_t = THEME.token) === null || _t === void 0 ? void 0 : _t.colorPrimary,
         lineWidth: 2,
+        borderRadiusSM: 5,
     },
     Modal: {
         titleFontSize: 16,

package/es/providers/index.d.ts

@@ -1,3 +1,2 @@
 export * from './ConfigProvider';
 export * from './AppConfigProvider';
-export * from './AntdConfigProviderV2';

package/es/providers/index.js

@@ -1,3 +1,2 @@
 export * from './ConfigProvider';
 export * from './AppConfigProvider';
-export * from './AntdConfigProviderV2';

package/es/utils/common.js

@@ -477,7 +477,7 @@ export const isExistedImage = (imageUrl) => {
 };
 export const getUrlNoCache = (url = '', cacheValue = 0) => {
     let urlNoCache = url;
-    if (urlNoCache.includes('nocache') || url.startsWith('data:image')) {
+    if (urlNoCache.includes('nocache') || url.startsWith('data:image') || !cacheValue) {
         urlNoCache = url;
     }
     else {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.245",
+  "version": "1.3.5-beta.247",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",

package/es/providers/AntdConfigProviderV2.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-import { ConfigProviderProps } from 'antd';
-interface AntdConfigProviderV2Props extends ConfigProviderProps {
-}
-export declare const AntdConfigProviderV2: React.FC<AntdConfigProviderV2Props>;
-export declare const globalToken: import("antd/es/theme/internal").AliasToken;
-export {};

package/es/providers/AntdConfigProviderV2.js

@@ -1,28 +0,0 @@
-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;
-};
-var _a;
-// Libraries
-import React from 'react';
-import { ConfigProvider, theme } from 'antd';
-import { THEME } from '@antscorp/antsomi-ui/es/constants';
-const { getDesignToken } = theme;
-const themeV2 = {
-    token: Object.assign(Object.assign({}, THEME.token), { colorText: '#000000', borderRadius: 10, borderRadiusLG: 10 }),
-    components: Object.assign(Object.assign({}, THEME.components), { Button: Object.assign(Object.assign({}, (_a = THEME.components) === null || _a === void 0 ? void 0 : _a.Button), { borderRadius: 10, textHoverBg: '#F2F9FF' }), Checkbox: {
-            borderRadiusSM: 5,
-        } }),
-};
-export const AntdConfigProviderV2 = props => {
-    const { children } = props, restProps = __rest(props, ["children"]);
-    return (React.createElement(ConfigProvider, Object.assign({ theme: themeV2 }, restProps), children));
-};
-export const globalToken = getDesignToken(themeV2);