@antscorp/antsomi-ui 2.0.107 → 2.0.109

package/es/components/molecules/UnsubscribePreview/components/styled.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { List } from 'antd';
+export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const LogoContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const LogoImg: import("styled-components").StyledComponent<"img", any, {}, never>;
+export declare const Identifier: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Title: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Description: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ListStyled: import("styled-components").StyledComponent<typeof List, any, {}, never>;
+export declare const TaskAltIconStyled: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../icons/types").IconProps & import("react").RefAttributes<SVGSVGElement>>, any, {}, never>;
+export declare const CheckboxStyled: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").CheckboxProps & import("react").RefAttributes<import("rc-checkbox").CheckboxRef>> & {
+    Group: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<import("antd/es/checkbox").CheckboxGroupProps & import("react").RefAttributes<HTMLDivElement>>>;
+}, any, {}, never>;

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

@@ -0,0 +1,65 @@
+import { Checkbox, List } from 'antd';
+import styled from 'styled-components';
+import { TaskAltIcon } from '../../../icons';
+export const Wrapper = styled.div `
+  width: 550px;
+  display: flex;
+  flex-direction: column;
+  padding: 30px 20px;
+`;
+export const LogoContainer = styled.div `
+  display: flex;
+  justify-content: center;
+  margin-bottom: 30px;
+`;
+export const LogoImg = styled.img `
+  max-width: 60%;
+`;
+export const Identifier = styled.div `
+  font-size: 14px;
+  font-weight: 700;
+  margin-bottom: 15px;
+`;
+export const Title = styled.div `
+  font-size: 24px;
+  font-weight: 500;
+  margin-bottom: 15px;
+  text-align: center;
+`;
+export const Description = styled.div `
+  font-size: 14px;
+  font-weight: 400;
+  margin-bottom: 30px;
+`;
+export const ListStyled = styled(List) `
+  .antsomi-list-header {
+    padding-block: 0px !important;
+    border-color: #e5e5e5 !important;
+  }
+
+  .antsomi-list-item {
+    border-color: #e5e5e5 !important;
+    padding: 15px 0px;
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+    align-items: flex-start !important;
+  }
+`;
+export const TaskAltIconStyled = styled(TaskAltIcon) `
+  border-radius: 100%;
+  background-color: #c8cedb45;
+  padding: 20px;
+  margin-bottom: 30px;
+`;
+export const CheckboxStyled = styled(Checkbox) `
+  align-items: flex-start;
+
+  & .antsomi-checkbox {
+    align-self: auto !important;
+  }
+
+  & .antsomi-typography {
+    margin-bottom: 0px !important;
+  }
+`;

package/es/components/molecules/UnsubscribePreview/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { TUnsubscribePayloadInfo } from '@antscorp/antsomi-ui/es/services/Unsubscribe';
+import { TUnsubscribeSettings, TUnsubscribeType } from '@antscorp/antsomi-ui/es';
+export type TUnsubscribePreviewProps = {
+    unsubscribePreferences: TUnsubscribeSettings['unsubscribePreferences'];
+    apiConfig: TUnsubscribePayloadInfo;
+    type: TUnsubscribeType;
+    identifier?: string[];
+};
+export declare const UnsubscribePreview: React.FC<TUnsubscribePreviewProps>;

package/es/components/molecules/UnsubscribePreview/index.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Libraries
+import { useEffect, useState } from 'react';
+// Constants
+import { LANDING_PAGE_TYPE, RESULT_PAGE_TYPES } from '@antscorp/antsomi-ui/es/constants';
+import { LANDING_PAGE_TYPE as UNSUBSCRIBE_LANDING_PAGE_TYPE } from '../UnsubscribePreferences/constants';
+// Components
+import { Unsubscribed, Preferences, Result } from './components';
+// Styles
+import { UnsubscribeLandingPageWrapper } from './styled';
+export const UnsubscribePreview = props => {
+    const { unsubscribePreferences, apiConfig, type, identifier = [] } = props;
+    const { landingPageType, customLink } = unsubscribePreferences || {};
+    // States
+    const initialState = {
+        page: LANDING_PAGE_TYPE.UNSUBSCRIBE,
+        resultPage: RESULT_PAGE_TYPES.RESUBSCRIBED,
+    };
+    const [state, setState] = useState(initialState);
+    const { page, resultPage } = state;
+    const onChangePage = (newPage) => {
+        setState(prevState => ({
+            ...prevState,
+            page: newPage,
+        }));
+    };
+    // Effects
+    useEffect(() => {
+        if (!apiConfig?.accountId)
+            return;
+        const updateAndRedirect = async () => {
+            window.location.replace(customLink || '');
+        };
+        if (landingPageType === UNSUBSCRIBE_LANDING_PAGE_TYPE.SPECIFIC_LINK.value) {
+            updateAndRedirect();
+        }
+    }, [landingPageType, apiConfig?.accountId, customLink]);
+    useEffect(() => {
+        onChangePage(LANDING_PAGE_TYPE.UNSUBSCRIBE);
+    }, [unsubscribePreferences]);
+    // Renders
+    const renderContent = () => {
+        if (landingPageType !== UNSUBSCRIBE_LANDING_PAGE_TYPE.SPECIFIC_LINK.value) {
+            switch (page) {
+                case LANDING_PAGE_TYPE.UNSUBSCRIBE:
+                    return (_jsx(Unsubscribed, { preferences: unsubscribePreferences, identifier: identifier, onViewPreferences: () => onChangePage(LANDING_PAGE_TYPE.PREFERENCES), onResubscribe: () => {
+                            onChangePage(LANDING_PAGE_TYPE.RESULT);
+                            setState(prevState => ({
+                                ...prevState,
+                                resultPage: RESULT_PAGE_TYPES.RESUBSCRIBED,
+                            }));
+                        }, apiConfig: apiConfig, type: type }));
+                case LANDING_PAGE_TYPE.PREFERENCES:
+                    return (_jsx(Preferences, { preferences: unsubscribePreferences, identifier: identifier, onOptOutAll: () => {
+                            onChangePage(LANDING_PAGE_TYPE.RESULT);
+                            setState(prevState => ({ ...prevState, resultPage: RESULT_PAGE_TYPES.OPT_OUT }));
+                        }, apiConfig: apiConfig, type: type }));
+                case LANDING_PAGE_TYPE.RESULT:
+                    return (_jsx(Result, { unsubscribeType: type, type: resultPage, preferences: unsubscribePreferences, identifier: identifier, onClickOptIn: () => onChangePage(LANDING_PAGE_TYPE.PREFERENCES) }));
+                default:
+                    return null;
+            }
+        }
+    };
+    return (_jsx(UnsubscribeLandingPageWrapper, { className: "unsubscribe-preview", children: renderContent() }));
+};

package/es/components/molecules/UnsubscribePreview/styled.d.ts

@@ -0,0 +1,9 @@
+export declare const UnsubscribeLandingPageWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SpinContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const LogoContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Logo: import("styled-components").StyledComponent<"img", any, {}, never>;
+export declare const Identifier: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Title: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Description: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ButtonWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,51 @@
+// Libraries
+import styled from 'styled-components';
+export const UnsubscribeLandingPageWrapper = styled.div `
+  .antsomi-card-body {
+    padding: 0px !important;
+  }
+  .ant-list-item {
+    align-items: flex-start;
+    justify-content: flex-start;
+  }
+`;
+export const SpinContainer = styled.div `
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+export const Wrapper = styled.div `
+  padding: 30px 20px;
+
+  display: flex;
+  flex-direction: column;
+`;
+export const LogoContainer = styled.div `
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  margin-bottom: 30px;
+`;
+export const Logo = styled.img `
+  width: 60%;
+`;
+export const Identifier = styled.div `
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1;
+  padding: 7px 0px;
+`;
+export const Title = styled.div `
+  font-size: 24px;
+  font-weight: 500;
+`;
+export const Description = styled.div `
+  font-size: 16px;
+  font-weight: 400;
+`;
+export const ButtonWrapper = styled.div `
+  padding-top: 15px;
+  border-top: 1px solid #e5e5e5;
+`;

package/es/components/molecules/UnsubscribePreview/type.d.ts

@@ -0,0 +1,5 @@
+import { UNSUBSCRIBE_STATUS } from '@antscorp/antsomi-ui/es/constants';
+export type UnsubscribeParams = {
+    unsubscribeId: string;
+};
+export type TUnsubscribeStatus = (typeof UNSUBSCRIBE_STATUS)[keyof typeof UNSUBSCRIBE_STATUS];

package/es/components/molecules/UnsubscribePreview/type.js

@@ -0,0 +1 @@
+export {};

package/es/components/molecules/UnsubscribePreview/utils.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Masks an email address to show only the first and last characters of the local part and the first and last characters of the domain.
+ * @param {string} [email=''] - the email address to mask
+ * @returns {string} the masked email address
+ * @example
+ * maskEmail('user@example.com') // 'u**r@e**mple.com'
+ */
+export declare const maskEmail: (email?: string) => string;
+export declare const maskPhone: (phone?: string) => string;

package/es/components/molecules/UnsubscribePreview/utils.js

@@ -0,0 +1,27 @@
+/**
+ * Masks an email address to show only the first and last characters of the local part and the first and last characters of the domain.
+ * @param {string} [email=''] - the email address to mask
+ * @returns {string} the masked email address
+ * @example
+ * maskEmail('user@example.com') // 'u**r@e**mple.com'
+ */
+export const maskEmail = (email = '') => {
+    if (!email.includes('@'))
+        return 'Invalid email';
+    const [local, domain] = email.split('@');
+    const localLength = local.length;
+    const domainLength = domain.length;
+    if (localLength < 2 || domainLength < 3)
+        return 'Invalid email';
+    const maskedLocal = `${local[0]}${'*'.repeat(localLength - 2)}${local[localLength - 1]}`;
+    const maskedDomain = `${domain[0]}${'*'.repeat(domainLength - 2)}${domain[domainLength - 1]}`;
+    return `${maskedLocal}@${maskedDomain}`;
+};
+export const maskPhone = (phone = '') => {
+    const digits = phone.replace(/\D/g, '');
+    if (digits.length < 6)
+        return 'Invalid phone';
+    const end = digits.slice(-3);
+    const masked = '*'.repeat(digits.length - end.length);
+    return `${masked}${end}`;
+};

package/es/components/molecules/UploadImage/index.d.ts

@@ -129,6 +129,10 @@ export interface UploadImageProps extends AntdUploadProps {
      * Indicates if the input is currently focused.
      */
     focused?: boolean;
+    /**
+     * Whether to disable the remove button.
+     */
+    disableRemove?: boolean;
 }
 interface UploadMediaObject {
     url: string;

package/es/components/molecules/UploadImage/index.js

@@ -44,7 +44,7 @@ const SORT_OPTIONS = {
     },
 };
 export const UploadImage = props => {
-    const { labelHeadingModal, labelButtonSelect, labelModalDelete, searchPlaceholder, onRemoveImage, onChangeImage: onChangeMedia, isOpen, isInputMode, width, placeholder, extensions, maxSize, title, showImageURL: showMediaURL, selectedImage: selectedMediaProp, required, focused, domainMedia, slug, paramConfigs, errors, iconName, mode, } = props;
+    const { labelHeadingModal, labelButtonSelect, labelModalDelete, searchPlaceholder, onRemoveImage, onChangeImage: onChangeMedia, isOpen, isInputMode, width, placeholder, extensions, maxSize, title, showImageURL: showMediaURL, selectedImage: selectedMediaProp, required, focused, domainMedia, slug, paramConfigs, errors, iconName, mode, disableRemove, } = props;
     const { Dragger } = Upload;
     const [selectedMedia, setSelectedMedia] = useState(selectedMediaProp || { url: '' });
     const [isModalOpen, setIsModalOpen] = useState(isOpen);
@@ -237,7 +237,7 @@ export const UploadImage = props => {
                                     zIndex: 1,
                                     marginLeft: 25,
                                     color: THEME.token?.colorIcon,
-                                } })) : null, _jsxs("div", { style: flexStyleCenter, children: [_jsxs(Button, { onClick: showModal, style: { backgroundColor: '#ffffff' }, children: ["Browse ", mode === 'video' ? 'Video' : 'Image'] }), selectedMedia && selectedMedia.url ? (_jsx(Button, { onClick: handleRemoveMedia, style: { backgroundColor: '#ffffff' }, children: _jsx(Icon, { type: "icon-ants-remove-trash", size: 15, style: { color: THEME.token?.colorPrimary } }) })) : null] })] }), _jsxs("div", { className: "upload-file-info", style: { marginTop: 12 }, children: [_jsxs(Text, { children: ["File type: ", extensions?.join(', ')] }), _jsxs(Text, { children: ["File size: under ", maxSize, "MB"] })] }), showMediaURL && (_jsx(Space, { size: 5, direction: "vertical", style: { marginTop: 12 }, children: _jsx(Input, { label: mode === 'video' ? 'Video URL' : 'Image URL', required: required, placeholder: placeholder, value: selectedMedia.url ? selectedMedia.url : '', focused: focused, onAfterChange: value => handleSelectMedia({
+                                } })) : null, _jsxs("div", { style: flexStyleCenter, children: [_jsxs(Button, { onClick: showModal, style: { backgroundColor: '#ffffff' }, children: ["Browse ", mode === 'video' ? 'Video' : 'Image'] }), !disableRemove && selectedMedia && selectedMedia.url ? (_jsx(Button, { onClick: handleRemoveMedia, style: { backgroundColor: '#ffffff' }, children: _jsx(Icon, { type: "icon-ants-remove-trash", size: 15, style: { color: THEME.token?.colorPrimary } }) })) : null] })] }), _jsxs("div", { className: "upload-file-info", style: { marginTop: 12 }, children: [_jsxs(Text, { children: ["File type: ", extensions?.join(', ')] }), _jsxs(Text, { children: ["File size: Under ", maxSize, "MB"] })] }), showMediaURL && (_jsx(Space, { size: 5, direction: "vertical", style: { marginTop: 12 }, children: _jsx(Input, { label: mode === 'video' ? 'Video URL' : 'Image URL', required: required, placeholder: placeholder, value: selectedMedia.url ? selectedMedia.url : '', focused: focused, maxLength: 255, onAfterChange: value => handleSelectMedia({
                                 url: value,
                             }) }) }))] })), _jsx(Modal, { title: labelModalDelete, open: isOpenConfirmDelete, onOk: () => handleRemoveUploadedMedia(deleteMediaRef.current, false), onCancel: () => setOpenConfirmDelete(prev => !prev), okText: "OK", cancelText: "Cancel", destroyOnClose: true, children: _jsxs("p", { children: ["Are you sure you want to delete ", deleteMediaRef.current?.name, "?"] }) }), _jsxs(Modal, { wrapClassName: "icons-selection-modal", title: _jsxs("div", { style: { display: 'flex', gap: '8px', alignItems: 'center' }, children: [_jsx(Icon, { type: `icon-ants-${iconName}`, size: 20 }), labelHeadingModal] }), centered: true, headerStyle: {
                     padding: '20px 20px 0',

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

@@ -2,128 +2,128 @@
 import styled from 'styled-components';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
-export const WrapperListImages = styled.div `
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 250px;
-  height: auto;
-  text-align: center;
-
-  &.ants-group:hover .group-hover {
-    opacity: 1;
-  }
+export const WrapperListImages = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 250px;
+  height: auto;
+  text-align: center;
+
+  &.ants-group:hover .group-hover {
+    opacity: 1;
+  }
 `;
-export const TextStyled = styled.span `
-  color: ${THEME.token?.colorTextDark};
+export const TextStyled = styled.span `
+  color: ${THEME.token?.colorTextDark};
 `;
-export const Boxed = styled.div `
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 250px;
-  height: 250px;
-  border-width: 1px;
-  border-style: solid;
-  --tw-border-opacity: 1;
-  border-color: rgb(224 224 224 / var(--tw-border-opacity));
+export const Boxed = styled.div `
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 250px;
+  height: 250px;
+  border-width: 1px;
+  border-style: solid;
+  --tw-border-opacity: 1;
+  border-color: rgb(224 224 224 / var(--tw-border-opacity));
 `;
-export const Image = styled.img `
-  object-fit: contain;
-  width: 100%;
-  height: 100%;
+export const Image = styled.img `
+  object-fit: contain;
+  width: 100%;
+  height: 100%;
 `;
-export const WrapperBtn = styled.div `
-  position: absolute;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 3;
-  gap: 15px;
-  opacity: 0;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke,
-    opacity, box-shadow, transform, filter, backdrop-filter;
-  transition-duration: 200ms;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+export const WrapperBtn = styled.div `
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 3;
+  gap: 15px;
+  opacity: 0;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke,
+    opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-duration: 200ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 `;
-export const Paragraph = styled.p `
-  display: inline-block;
-  margin-top: 5px;
-  width: 100%;
-  font-size: ${THEME.token?.fontSize}px;
+export const Paragraph = styled.p `
+  display: inline-block;
+  margin-top: 5px;
+  width: 100%;
+  font-size: ${THEME.token?.fontSize}px;
 `;
-export const Overlay = styled.div `
-  position: absolute;
-  top: 0px;
-  right: 0px;
-  bottom: 0px;
-  left: 0px;
-  z-index: 2;
-  background-color: ${THEME.token?.bgLightTransparent};
-  opacity: 0;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke,
-    opacity, box-shadow, transform, filter, backdrop-filter;
-  transition-duration: 200ms;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+export const Overlay = styled.div `
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+  z-index: 2;
+  background-color: ${THEME.token?.bgLightTransparent};
+  opacity: 0;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke,
+    opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-duration: 200ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 `;
-export const WrapperInputMode = styled.div `
-  position: relative;
-  width: ${props => (props.width ? props.width : '100%')};
+export const WrapperInputMode = styled.div `
+  position: relative;
+  width: ${props => (props.width ? props.width : '100%')};
 `;
-export const WrapperIcon = styled.div `
-  position: absolute;
-  top: -10px;
-  left: calc(100% - 44px);
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 12px;
-  border-radius: 50%;
-
-  cursor: pointer;
-
-  &:hover {
-    background-color: rgba(0, 0, 0, 0.04);
-  }
+export const WrapperIcon = styled.div `
+  position: absolute;
+  top: -10px;
+  left: calc(100% - 44px);
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 12px;
+  border-radius: 50%;
+
+  cursor: pointer;
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.04);
+  }
 `;
-export const ErrorMessage = styled.div `
-  width: 100%;
-  margin-top: 3px;
-  color: #f44336;
-  font-size: 0.688rem;
-  line-height: 1.66;
+export const ErrorMessage = styled.div `
+  width: 100%;
+  margin-top: 3px;
+  color: #f44336;
+  font-size: 0.688rem;
+  line-height: 1.66;
 `;
-export const UploadImageWrapper = styled.div `
-  .antsomi-upload.antsomi-upload-btn {
-    padding: 0px;
-  }
-
-  .image-upload-content {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    gap: 20px;
-    position: relative;
-    border-radius: ${THEME.token?.borderRadius}px;
-    border-width: 2px;
-    border-style: dashed;
-    --tw-border-opacity: 1;
-    border-color: rgb(210 210 210 / var(--tw-border-opacity));
-    aspect-ratio: 3.2;
-
-    &.uploaded {
-      background: url('data:image/svg+xml;base64, PHN2ZyBoZWlnaHQ9IjEwIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB3aWR0aD0iMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgYXJpYS1oaWRkZW49InRydWUiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZmlsbC1vcGFjaXR5PSIuMTI1IiBkPSJNMCAyNTZoMjU2djI1NkgweiI+PC9wYXRoPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZmlsbC1vcGFjaXR5PSIuMjUiIGQ9Ik0yNTYgMjU2aDI1NnYyNTZIMjU2eiI+PC9wYXRoPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZmlsbC1vcGFjaXR5PSIuMTI1IiBkPSJNMjU2IDBoMjU2djI1NkgyNTZ6Ij48L3BhdGg+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBmaWxsLW9wYWNpdHk9Ii4yNSIgZD0iTTAgMGgyNTZ2MjU2SDB6Ij48L3BhdGg+PC9zdmc+')
-        repeat rgb(249, 251, 255);
-    }
-    .antsomi-upload-drag-container {
-    }
-    .upload-file-info {
-      p {
-        font-size: 12px;
-      }
-    }
-  }
+export const UploadImageWrapper = styled.div `
+  .antsomi-upload.antsomi-upload-btn {
+    padding: 0px;
+  }
+
+  .image-upload-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    gap: 20px;
+    position: relative;
+    border-radius: ${THEME.token?.borderRadius}px;
+    border-width: 2px;
+    border-style: dashed;
+    --tw-border-opacity: 1;
+    border-color: rgb(210 210 210 / var(--tw-border-opacity));
+    aspect-ratio: 3.2;
+
+    &.uploaded {
+      background: url('data:image/svg+xml;base64, PHN2ZyBoZWlnaHQ9IjEwIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB3aWR0aD0iMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgYXJpYS1oaWRkZW49InRydWUiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZmlsbC1vcGFjaXR5PSIuMTI1IiBkPSJNMCAyNTZoMjU2djI1NkgweiI+PC9wYXRoPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZmlsbC1vcGFjaXR5PSIuMjUiIGQ9Ik0yNTYgMjU2aDI1NnYyNTZIMjU2eiI+PC9wYXRoPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZmlsbC1vcGFjaXR5PSIuMTI1IiBkPSJNMjU2IDBoMjU2djI1NkgyNTZ6Ij48L3BhdGg+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBmaWxsLW9wYWNpdHk9Ii4yNSIgZD0iTTAgMGgyNTZ2MjU2SDB6Ij48L3BhdGg+PC9zdmc+')
+        repeat rgb(249, 251, 255);
+    }
+    .antsomi-upload-drag-container {
+    }
+    .upload-file-info {
+      p {
+        font-size: 12px;
+      }
+    }
+  }
 `;