@antscorp/antsomi-ui 1.3.14 → 1.3.16

package/es/assets/svg/mobile-frame.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="416.004" height="713" viewBox="0 0 416.004 713">
+  <path id="mobile_frame" data-name="mobile frame" d="M17657,3124a32.975,32.975,0,0,1-33-33V2444a32.977,32.977,0,0,1,33-33H18004a32.97,32.97,0,0,1,33,33v122.032a3.5,3.5,0,0,1,3,3.464v110a3.5,3.5,0,0,1-3,3.469v31.07a3.5,3.5,0,0,1,3,3.464v44a3.5,3.5,0,0,1-3,3.464V3091a32.97,32.97,0,0,1-33,33Zm-22-681v618a21.022,21.022,0,0,0,21,21h349.008a21.022,21.022,0,0,0,21-21V2443a21.022,21.022,0,0,0-21-21H17656A21.022,21.022,0,0,0,17635,2443Z" transform="translate(-17623.998 -2411)" fill="black"/>
+</svg>

package/es/components/atoms/InputDynamic/EditCaretPositioning.js

@@ -59,6 +59,21 @@ if (window.getSelection && document.createRange) {
             }
         }
         let sel = window.getSelection();
+        // NOTE: add new text node after span contain shortlink content
+        if (range.endContainer) {
+            const { parentNode } = range.endContainer;
+            if (parentNode && parentNode.classList && parentNode.classList.contains('detect-url')) {
+                const textNode = document.createTextNode('\u00A0'); // Create a text node with a non-breaking space
+                if (parentNode.nextSibling) {
+                    parentNode.parentNode.insertBefore(textNode, parentNode.nextSibling);
+                }
+                else {
+                    parentNode.parentNode.appendChild(textNode);
+                }
+                range.setStart(textNode, textNode.length);
+                range.collapse(true);
+            }
+        }
         sel === null || sel === void 0 ? void 0 : sel.removeAllRanges();
         sel === null || sel === void 0 ? void 0 : sel.addRange(range);
     };

package/es/components/atoms/InputDynamic/InputDynamic.js

@@ -144,15 +144,17 @@ export const InputDynamic = (props) => {
                 if (innerHTML) {
                     // remove span url và focus vào vị trí remove để add tag shortlink vào vị trí này.
                     const index = Array.from((_a = personalizationInputRef.current) === null || _a === void 0 ? void 0 : _a.childNodes).findIndex((element) => element.id === data.id);
-                    const range = document.createRange(); // Tạo một đối tượng Range
-                    const sel = window.getSelection(); // Lấy đối tượng Selection hiện tại
-                    range.setStart((_b = personalizationInputRef.current) === null || _b === void 0 ? void 0 : _b.childNodes[index], 0); // Đặt điểm bắt đầu của Range
-                    range.collapse(true); // Thu gọn Range để tập trung vào điểm bắt đầu
-                    sel === null || sel === void 0 ? void 0 : sel.removeAllRanges(); // Xóa tất cả các Range hiện có
-                    sel === null || sel === void 0 ? void 0 : sel.addRange(range); // Thêm Range mới vào Selection
-                    caretPositionRef.current = CaretPositioning.saveSelection(personalizationInputRef.current);
-                    const newDataUpdate = innerHTML.replace(data.outerHTML, '');
-                    personalizationInputRef.current.innerHTML = newDataUpdate;
+                    if (index !== -1) {
+                        const range = document.createRange(); // Tạo một đối tượng Range
+                        const sel = window.getSelection(); // Lấy đối tượng Selection hiện tại
+                        range.setStart((_b = personalizationInputRef.current) === null || _b === void 0 ? void 0 : _b.childNodes[index], 0); // Đặt điểm bắt đầu của Range
+                        range.collapse(true); // Thu gọn Range để tập trung vào điểm bắt đầu
+                        sel === null || sel === void 0 ? void 0 : sel.removeAllRanges(); // Xóa tất cả các Range hiện có
+                        sel === null || sel === void 0 ? void 0 : sel.addRange(range); // Thêm Range mới vào Selection
+                        caretPositionRef.current = CaretPositioning.saveSelection(personalizationInputRef.current);
+                        const newDataUpdate = innerHTML.replace(data.outerHTML, '');
+                        personalizationInputRef.current.innerHTML = newDataUpdate;
+                    }
                 }
                 break;
             }

package/es/components/atoms/MobileFrame/MobileFrame.d.ts

@@ -1,4 +1,6 @@
 import React from 'react';
 export interface MobileFrameProps extends React.HtmlHTMLAttributes<HTMLDivElement> {
+    size?: 'large' | 'medium';
+    backgroundColor?: string;
 }
 export declare const MobileFrame: React.FC<React.PropsWithChildren<MobileFrameProps>>;

package/es/components/atoms/MobileFrame/MobileFrame.js

@@ -16,7 +16,7 @@ import { MobileWrapper, MobileInner, MobileBottomLine } from './styled';
 export const MobileFrame = (_a) => {
     var { children } = _a, restOfProps = __rest(_a, ["children"]);
     return (React.createElement(MobileWrapper, Object.assign({}, restOfProps),
-        React.createElement(MobileInner, null,
+        React.createElement(MobileInner, { backgroundColor: restOfProps.backgroundColor, size: restOfProps.size },
             children,
             React.createElement(MobileBottomLine, null))));
 };

package/es/components/atoms/MobileFrame/styled.d.ts

@@ -1,3 +1,4 @@
+import type { MobileFrameProps } from './MobileFrame';
 export declare const MobileWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const MobileInner: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MobileInner: import("styled-components").StyledComponent<"div", any, MobileFrameProps, never>;
 export declare const MobileBottomLine: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/atoms/MobileFrame/styled.js

@@ -1,5 +1,5 @@
 // Libraries
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 // Assets
 import MobileFrame from '@antscorp/antsomi-ui/es/assets/images/iphone.png';
 export const MobileWrapper = styled.div `
@@ -12,12 +12,17 @@ export const MobileWrapper = styled.div `
 export const MobileInner = styled.div `
   position: relative;
   width: 100%;
-  max-width: 336px;
-  height: 695px;
-  margin: 61px 23px 20px 24px;
-  border-bottom-left-radius: 50px;
-  border-bottom-right-radius: 50px;
+  max-width: ${props => (props.size === 'medium' ? 290 : 336)}px;
+  height: ${props => (props.size === 'medium' ? 600 : 695)}px;
+  margin: ${props => (props.size === 'medium' ? '52px 23px 18px 24px' : '61px 23px 20px 24px')};
+  border-bottom-left-radius: ${props => (props.size === 'medium' ? 37 : 50)}px;
+  border-bottom-right-radius: ${props => (props.size === 'medium' ? 37 : 50)}px;
   overflow: hidden;
+
+  ${props => props.backgroundColor &&
+    css `
+      background-color: ${props.backgroundColor};
+    `}
 `;
 export const MobileBottomLine = styled.div `
   width: 145px;

package/es/components/atoms/MobileFrameV2/MobileFrameV2.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export interface MobileFrameV2Props extends React.HtmlHTMLAttributes<HTMLDivElement> {
+}
+export declare const MobileFrameV2: React.FC<React.PropsWithChildren<MobileFrameV2Props>>;

package/es/components/atoms/MobileFrameV2/MobileFrameV2.js

@@ -0,0 +1,22 @@
+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 from 'react';
+// Styled
+import { MobileWrapper, MobileInner, MobileCamera } from './styled';
+export const MobileFrameV2 = (_a) => {
+    var { children } = _a, restOfProps = __rest(_a, ["children"]);
+    return (React.createElement(MobileWrapper, Object.assign({}, restOfProps),
+        React.createElement(MobileInner, null,
+            React.createElement("div", { className: "mobile-inner-content" }, children),
+            React.createElement(MobileCamera, null))));
+};

package/es/components/atoms/MobileFrameV2/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const MOBILE_VIEWPORT: {
+    width: number;
+    height: number;
+};

package/es/components/atoms/MobileFrameV2/constants.js

@@ -0,0 +1,4 @@
+export const MOBILE_VIEWPORT = {
+    width: 352.5,
+    height: 764.2,
+};

package/es/components/atoms/MobileFrameV2/index.d.ts

@@ -0,0 +1,2 @@
+export { MobileFrameV2 } from './MobileFrameV2';
+export type { MobileFrameV2Props } from './MobileFrameV2';

package/es/components/atoms/MobileFrameV2/index.js

@@ -0,0 +1 @@
+export { MobileFrameV2 } from './MobileFrameV2';

package/es/components/atoms/MobileFrameV2/styled.d.ts

@@ -0,0 +1,3 @@
+export declare const MobileWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MobileInner: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MobileCamera: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/atoms/MobileFrameV2/styled.js

@@ -0,0 +1,43 @@
+// Libraries
+import styled from 'styled-components';
+// Assets
+import MobileFrameV2 from '@antscorp/antsomi-ui/es/assets/images/ip14-pro-mobile-frame.png';
+import cameraImage from '@antscorp/antsomi-ui/es/assets/images/ip14-pro-camera.png';
+// Constants
+import { MOBILE_VIEWPORT } from './constants';
+export const MobileWrapper = styled.div `
+  position: relative;
+  display: flex;
+  justify-content: center;
+  background: url(${MobileFrameV2}) no-repeat center center;
+  background-size: contain;
+`;
+export const MobileInner = styled.div `
+  position: relative;
+  width: ${MOBILE_VIEWPORT.width}px;
+  max-width: ${MOBILE_VIEWPORT.width}px;
+  height: ${MOBILE_VIEWPORT.height}px;
+  margin: 18px 21px;
+  border-radius: 50px;
+  overflow: hidden;
+
+  .mobile-inner-content {
+    position: absolute;
+    z-index: 0;
+    width: 100%;
+    height: 100%;
+  }
+`;
+export const MobileCamera = styled.div `
+  position: absolute;
+  pointer-events: none;
+  width: 112.11px;
+  height: 32.29px;
+  margin: auto;
+  top: 10px;
+  left: 50%;
+  z-index: 1;
+  transform: translateX(-50%);
+  background: url(${cameraImage}) no-repeat center center;
+  background-size: contain;
+`;

package/es/components/atoms/SlideBar/SlideBar.js

@@ -264,7 +264,9 @@ export const SlideBar = props => {
                 fontSize: `${BTN_ADD_SIZE}px`,
                 cursor: disabledAdd ? 'not-allowed' : 'pointer',
                 color: disabledAdd ? (_c = THEME.token) === null || _c === void 0 ? void 0 : _c.colorTextDisabled : (_d = THEME.token) === null || _d === void 0 ? void 0 : _d.colorPrimary,
-            }, onClick: (e) => {
+            }, 
+            // disabled={disabledAdd}
+            onClick: (e) => {
                 e.stopPropagation();
                 if (!disabledAdd) {
                     handleAddSlide();

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/atoms/index.d.ts

@@ -35,6 +35,7 @@ export { InputDynamic } from './InputDynamic';
 export * from './Flex';
 export * from './PreviewTabs';
 export * from './MobileFrame';
+export * from './MobileFrameV2';
 export * from './SlideBar';
 export type { SliderProps } from './Slider';
 export type { PaginationProps } from './Pagination';

package/es/components/atoms/index.js

@@ -35,4 +35,5 @@ export { InputDynamic } from './InputDynamic';
 export * from './Flex';
 export * from './PreviewTabs';
 export * from './MobileFrame';
+export * from './MobileFrameV2';
 export * from './SlideBar';

package/es/components/common/ConfigProvider/ConfigProvider.d.ts

@@ -2,6 +2,7 @@ import { ConfigProviderProps as AntdConfigProviderProps } from 'antd/es/config-p
 import React, { ReactNode } from 'react';
 import '@antscorp/antsomi-ui/es/assets/css/main.scss';
 import { TLocale } from '@antscorp/antsomi-ui/es/types';
+import 'animate.css';
 interface ConfigProviderProps extends Omit<AntdConfigProviderProps, 'locale'> {
     children?: ReactNode;
     locale?: TLocale;

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

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 // Libraries
 import { StyleProvider } from '@ant-design/cssinjs';
-import { ConfigProvider as AntdConfigProvider } from 'antd';
+import { ConfigProvider as AntdConfigProvider, App } from 'antd';
 import dayjs from 'dayjs';
 import React, { useEffect } from 'react';
 import weekday from 'dayjs/plugin/weekday';
@@ -27,6 +27,7 @@ import '@antscorp/antsomi-ui/es/assets/css/main.scss';
 // Initialize languages
 // import '@antscorp/antsomi-ui/es/locales/i18n';
 import i18next from '@antscorp/antsomi-ui/es/locales/i18n';
+import 'animate.css';
 // NOTE: HOT fix DatePicker Advanced
 dayjs.extend(weekday);
 dayjs.extend(localeData);
@@ -42,8 +43,9 @@ const ConfigProvider = props => {
         }
     }, [locale]);
     return (React.createElement(AntdConfigProvider, Object.assign({}, restOfProps),
-        React.createElement(GlobalStyle, null),
-        React.createElement(StyleProvider, { hashPriority: "high" }, children)));
+        React.createElement(App, null,
+            React.createElement(GlobalStyle, null),
+            React.createElement(StyleProvider, { hashPriority: "high" }, children))));
 };
 ConfigProvider.defaultProps = {
     theme: THEME,

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

@@ -11,7 +11,7 @@ import { fab } from '@fortawesome/free-brands-svg-icons';
 library.add(fas, far, fab);
 const { accent6, accent7, scrollBarSize } = THEME.token || {};
 export const GlobalStyle = () => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37;
     return (React.createElement(Global, { styles: css `
       @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
 
@@ -714,6 +714,10 @@ export const GlobalStyle = () => {
         height: unset !important;
         top: 0px !important;
         right: 0 !important;
+
+        .antsomi-modal-close-x {
+          padding: 20px;
+        }
       }
       .antsomi-modal-content {
         .antsomi-modal-header {
@@ -729,6 +733,27 @@ export const GlobalStyle = () => {
           p {
             margin: 0;
           }
+          .antsomi-modal-confirm-body-wrapper {
+            padding: 20px;
+
+            .antsomi-modal-confirm-body {
+              display: flex;
+              gap: 13px;
+              color: ${(_33 = THEME.token) === null || _33 === void 0 ? void 0 : _33.colorPrimary};
+            }
+
+            .antsomi-modal-confirm-btns {
+              display: flex;
+              flex-direction: row-reverse;
+              justify-content: start;
+              gap: 8px;
+              padding-left: 30px;
+
+              .antsomi-btn {
+                margin: 0px;
+              }
+            }
+          }
         }
         .antsomi-modal-footer {
           padding: 15px !important;
@@ -751,7 +776,7 @@ export const GlobalStyle = () => {
 
       .antsomi-collapse {
         &.antsomi-collapse-borderless {
-          border-bottom: 1px solid ${(_33 = THEME.token) === null || _33 === void 0 ? void 0 : _33.gray5};
+          border-bottom: 1px solid ${(_34 = THEME.token) === null || _34 === void 0 ? void 0 : _34.gray5};
         }
 
         > .antsomi-collapse-item > .antsomi-collapse-header .antsomi-collapse-arrow {
@@ -761,12 +786,12 @@ export const GlobalStyle = () => {
 
       /* Switch */
       .antsomi-switch {
-        border: 2px solid ${(_34 = THEME.token) === null || _34 === void 0 ? void 0 : _34.colorPrimary} !important;
+        border: 2px solid ${(_35 = THEME.token) === null || _35 === void 0 ? void 0 : _35.colorPrimary} !important;
 
         &.antsomi-switch-checked {
           > .antsomi-switch-handle {
             &::before {
-              background-color: ${(_35 = THEME.token) === null || _35 === void 0 ? void 0 : _35.bw0} !important;
+              background-color: ${(_36 = THEME.token) === null || _36 === void 0 ? void 0 : _36.bw0} !important;
             }
           }
         }
@@ -804,5 +829,14 @@ export const GlobalStyle = () => {
           }
         }
       }
+
+      /* Menu */
+      .antsomi-menu {
+        .antsomi-menu-submenu.antsomi-menu-submenu-selected {
+          .antsomi-menu-item.antsomi-menu-item-selected {
+            background-color: ${(_37 = THEME.token) === null || _37 === void 0 ? void 0 : _37.blue};
+          }
+        }
+      }
     ` }));
 };

package/es/components/index.d.ts

@@ -2,3 +2,4 @@ export * from './atoms';
 export * from './molecules';
 export * from './common';
 export * from './organism';
+export * from './template';

package/es/components/index.js

@@ -2,3 +2,4 @@ export * from './atoms';
 export * from './molecules';
 export * from './common';
 export * from './organism';
+export * from './template';

package/es/components/molecules/AddDynamicContent/AddDynamicContent.js

@@ -14,6 +14,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 // Libraries
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';
 import { omit, isEmpty, flatMapDeep, set, get, isNaN } from 'lodash';
+import { useQueryClient } from '@tanstack/react-query';
 // Hooks
 import { useDeepCompareEffect, useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks';
 // Components
@@ -27,7 +28,6 @@ import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
 import { useGetDynamicContentAttr, useGetListPromotionPool, useGetListEventAttr, useGetListPromotionCodeAttr, useGetListBO, useGetListAllEvents, useGetListSourceByEvent, useGetListAttributeBO, useGetCustomFunction, useAddSavedCSFunction, useUpdateCSFunction, } from '@antscorp/antsomi-ui/es/queries';
 import { useGetEventTrackingAttributes } from '@antscorp/antsomi-ui/es/queries/ThirdParty';
 // Queries config
-import { queryClientAntsomiUI } from '@antscorp/antsomi-ui/es/queries/configs';
 import { QUERY_KEYS } from '@antscorp/antsomi-ui/es/constants/queries';
 import { dateExample } from './components/FormatDatetime';
 import DisplayFormat from './components/DisplayFormat';
@@ -126,6 +126,7 @@ export const AddDynamicContent = props => {
     const [attrDFOptions, setAttrDFOptions] = useState([]);
     // Template Custom
     const [templateId, settemplateId] = useState();
+    const queryClient = useQueryClient();
     const { data: listBoAttributes = [], isFetching: isFetchingListBoAttr, isError: isErrorBoAttr, } = useGetListAttributeBO({
         url,
         itemTypeIds: itemTypeId ? [itemTypeId] : [],
@@ -911,7 +912,7 @@ export const AddDynamicContent = props => {
                             break;
                         setItemTypeId(Number(selectedItemTypeId));
                         const key = [QUERY_KEYS.GET_EVENT_ATTRIBUTE_BO, [selectedItemTypeId]];
-                        const listAttBOByItemTypeId = serilizeBOAttr(queryClientAntsomiUI.getQueryData(key));
+                        const listAttBOByItemTypeId = serilizeBOAttr(queryClient.getQueryData(key));
                         if (listAttBOByItemTypeId.length) {
                             form.setFieldsValue({
                                 [DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE]: listAttBOByItemTypeId[0],

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

@@ -161,7 +161,7 @@ export const getFormatDisplay = (operatorKey, type, valueType, formatInputDispla
             formatDisplay = 'MMMM, YYYY';
             break;
         case 'YEAR_WEEK':
-            formatDisplay = `${WEEK_PLACEHOLDER}W, YYYY`;
+            formatDisplay = `${WEEK_PLACEHOLDER}w, YYYY`;
             break;
         case 'YEAR_MONTH_DAY':
             formatDisplay = 'MMMM DD, YYYY';
@@ -185,7 +185,7 @@ export const getFormatDisplay = (operatorKey, type, valueType, formatInputDispla
             formatDisplay = 'MMMM';
             break;
         case 'WEEK':
-            formatDisplay = `${WEEK_PLACEHOLDER}W`;
+            formatDisplay = `${WEEK_PLACEHOLDER}w`;
             break;
         case 'MONTH_DAY':
             formatDisplay = 'MMMM DD';

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

@@ -30,7 +30,7 @@ export const DropdownLabel = React.memo(({ valueType, date, format, type, showTi
         case 'YEAR_WEEK': {
             const dayObj = dayjs(date || new Date(), format).locale('en');
             // const dayObj = dayjs(date || new Date(), format).locale(locale || 'en');
-            formatLabel = `${WEEK_PLACEHOLDER}W, YYYY`;
+            formatLabel = `${WEEK_PLACEHOLDER}w, YYYY`;
             subLabel = `${dayjs(dayObj).day(0).format('MMMM DD, YYYY')} - ${dayjs(dayObj)
                 .day(6)
                 .format('MMMM DD, YYYY')}`;
@@ -51,7 +51,7 @@ export const DropdownLabel = React.memo(({ valueType, date, format, type, showTi
             formatLabel = 'MMMM';
             break;
         case 'WEEK':
-            formatLabel = `${WEEK_PLACEHOLDER}W`;
+            formatLabel = `${WEEK_PLACEHOLDER}w`;
             break;
         case 'MONTH_DAY':
             formatLabel = 'MMMM DD';

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 {