@antscorp/antsomi-ui 2.0.108 → 2.0.109

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

@@ -5,21 +5,21 @@ import { Typography } from 'antd';
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 import { BASE } from './constants';
 const { OFFSET, MEDIUM, LARGE } = BASE;
-export const BaseContainerMessage = styled.section `
-  padding: ${props => props.$padding ?? `${OFFSET.PADDING}px`};
-  max-width: ${props => (props.$size === 'medium' ? `${MEDIUM.WIDTH}px` : `${LARGE.WIDTH}px`)};
-  background-color: ${globalToken?.bw0};
-  box-shadow: 0px 3px 20px 0px rgba(0, 46, 89, 0.2);
-  border-radius: 11.68px;
-  overflow: hidden;
-  margin: ${props => props.$margin};
+export const BaseContainerMessage = styled.section `
+  padding: ${props => props.$padding ?? `${OFFSET.PADDING}px`};
+  max-width: ${props => (props.$size === 'medium' ? `${MEDIUM.WIDTH}px` : `${LARGE.WIDTH}px`)};
+  background-color: ${globalToken?.bw0};
+  box-shadow: 0px 3px 20px 0px rgba(0, 46, 89, 0.2);
+  border-radius: 11.68px;
+  overflow: hidden;
+  margin: ${props => props.$margin};
 `;
-export const BaseParagraphMessage = styled(Typography.Paragraph) `
-  white-space: pre-line;
-
-  &.base-paragraph-message.antsomi-typography {
-    margin-bottom: 0px;
-    font-size: 12px;
-    color: ${globalToken?.colorText};
-  }
+export const BaseParagraphMessage = styled(Typography.Paragraph) `
+  white-space: pre-line;
+
+  &.base-paragraph-message.antsomi-typography {
+    margin-bottom: 0px;
+    font-size: 12px;
+    color: ${globalToken?.colorText};
+  }
 `;

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

@@ -7,19 +7,19 @@ import skeletonBackground from '../../../../../assets/images/background/skeleton
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 import { MOBILE_VIEWPORT } from '@antscorp/antsomi-ui/es/components/atoms/MobileFrameV2/constants';
 const THUMBNAIL_CARD_RADIUS = 5;
-export const BannerWrapper = styled.div `
-  width: 100%;
-  overflow-y: hidden;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: ${globalToken?.colorBgSkeleton};
-  border-radius: ${globalToken?.borderRadius}px;
-  border: 1px solid ${globalToken?.blue1_1};
-  height: ${({ $height }) => (isNumber($height) ? `${$height}px` : $height)};
-
-  // Calculate scale of mobile frame
-  #banner-mobile {
+export const BannerWrapper = styled.div `
+  width: 100%;
+  overflow-y: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: ${globalToken?.colorBgSkeleton};
+  border-radius: ${globalToken?.borderRadius}px;
+  border: 1px solid ${globalToken?.blue1_1};
+  height: ${({ $height }) => (isNumber($height) ? `${$height}px` : $height)};
+
+  // Calculate scale of mobile frame
+  #banner-mobile {
     ${({ clientHeight }) => {
     const [smallScale, largeScale] = (() => {
         if (clientHeight) {
@@ -31,70 +31,70 @@ export const BannerWrapper = styled.div `
         }
         return [1, 1];
     })();
-    return css `
-        @media screen and (max-height: 1000px) {
-          transform: scale(${smallScale});
-        }
-
-        @media screen and (min-height: 1001px) {
-          transform: scale(${largeScale});
-        }
+    return css `
+        @media screen and (max-height: 1000px) {
+          transform: scale(${smallScale});
+        }
+
+        @media screen and (min-height: 1001px) {
+          transform: scale(${largeScale});
+        }
       `;
-}}
-  }
-
-  .mobile-wrapper {
-    position: relative;
-    border-radius: 80px;
-    animation-duration: 0.2s !important;
-
-    .content-wrapper {
-      width: fit-content;
-      height: fit-content;
-    }
-
-    .skeleton,
-    .backdrop {
-      left: 5px;
-    }
-  }
-
-  .desktop-wrapper {
-    position: relative;
-    height: 100%;
-    width: 100%;
-    border-radius: ${THUMBNAIL_CARD_RADIUS}px;
-    transition: width 0.2s ease, height 0.2s ease;
-    .content-wrapper {
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  .content-wrapper {
-    position: absolute;
-    z-index: 12;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-  .skeleton {
-    width: 100%;
-    height: 100%;
-    background: center / cover no-repeat url(${skeletonBackground});
-    border-radius: inherit;
-  }
-
-  .backdrop {
-    border-radius: inherit;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    background-color: black;
-    opacity: 0.5;
-    z-index: 10;
-    top: 0;
-    left: 0;
-  }
+}}
+  }
+
+  .mobile-wrapper {
+    position: relative;
+    border-radius: 80px;
+    animation-duration: 0.2s !important;
+
+    .content-wrapper {
+      width: fit-content;
+      height: fit-content;
+    }
+
+    .skeleton,
+    .backdrop {
+      left: 5px;
+    }
+  }
+
+  .desktop-wrapper {
+    position: relative;
+    height: 100%;
+    width: 100%;
+    border-radius: ${THUMBNAIL_CARD_RADIUS}px;
+    transition: width 0.2s ease, height 0.2s ease;
+    .content-wrapper {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .content-wrapper {
+    position: absolute;
+    z-index: 12;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .skeleton {
+    width: 100%;
+    height: 100%;
+    background: center / cover no-repeat url(${skeletonBackground});
+    border-radius: inherit;
+  }
+
+  .backdrop {
+    border-radius: inherit;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-color: black;
+    opacity: 0.5;
+    z-index: 10;
+    top: 0;
+    left: 0;
+  }
 `;

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

@@ -4,58 +4,58 @@ import styled, { css } from 'styled-components';
 import { Button, Flex } from '../../../../atoms';
 // Providers
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
-export const InformationWrapper = styled(Flex) `
-  width: 300px;
-  flex-shrink: 0;
-  font-size: 12px;
-  height: 100%;
-  max-height: 100%;
-
-  .title {
-    font-size: 16px;
-    font-weight: 700;
-    max-width: 100%;
-    color: inherit;
-    padding-right: 25px;
-    word-break: break-word;
-
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 3;
-  }
-
-  .antsomi-radio-group {
-    width: 100%;
-    display: flex;
-
-    .antsomi-radio-button-wrapper {
-      flex: 1 1 0%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      height: 30px;
-
-      i {
-        height: fit-content;
-        font-size: 24px;
-      }
-    }
-  }
-
-  .content-information {
-    flex: 1 1 0%;
-    height: fit-content;
-    overflow-y: auto;
-    max-height: 682px;
-  }
+export const InformationWrapper = styled(Flex) `
+  width: 300px;
+  flex-shrink: 0;
+  font-size: 12px;
+  height: 100%;
+  max-height: 100%;
+
+  .title {
+    font-size: 16px;
+    font-weight: 700;
+    max-width: 100%;
+    color: inherit;
+    padding-right: 25px;
+    word-break: break-word;
+
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+  }
+
+  .antsomi-radio-group {
+    width: 100%;
+    display: flex;
+
+    .antsomi-radio-button-wrapper {
+      flex: 1 1 0%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 30px;
+
+      i {
+        height: fit-content;
+        font-size: 24px;
+      }
+    }
+  }
+
+  .content-information {
+    flex: 1 1 0%;
+    height: fit-content;
+    overflow-y: auto;
+    max-height: 682px;
+  }
 `;
-export const CheckboxButton = styled(Button) `
-  color: ${globalToken?.colorText} !important;
-
+export const CheckboxButton = styled(Button) `
+  color: ${globalToken?.colorText} !important;
+
   ${p => p.$active &&
-    css `
-      color: ${globalToken?.colorPrimary} !important;
-      background-color: ${globalToken?.blue1_1} !important;
-    `}
+    css `
+      color: ${globalToken?.colorPrimary} !important;
+      background-color: ${globalToken?.blue1_1} !important;
+    `}
 `;

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

@@ -4,23 +4,23 @@ import styled from 'styled-components';
 import { Flex } from '../../../../atoms';
 // Providers
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
-export const SimilarTemplateWrapper = styled(Flex) `
-  margin-top: 15px;
-
-  .title {
-    font-weight: 400;
-    font-size: 16px;
-  }
+export const SimilarTemplateWrapper = styled(Flex) `
+  margin-top: 15px;
+
+  .title {
+    font-weight: 400;
+    font-size: 16px;
+  }
 `;
-export const TemplateListWrapper = styled.div `
-  display: flex;
-  gap: 30px;
-
-  .thumbnail-card {
-    border-radius: ${globalToken?.borderRadius}px;
-
-    > div {
-      border-radius: ${globalToken?.borderRadius}px;
-    }
-  }
+export const TemplateListWrapper = styled.div `
+  display: flex;
+  gap: 30px;
+
+  .thumbnail-card {
+    border-radius: ${globalToken?.borderRadius}px;
+
+    > div {
+      border-radius: ${globalToken?.borderRadius}px;
+    }
+  }
 `;

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

@@ -2,82 +2,82 @@ 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;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-
-  .swiper {
-    max-width: 1030px;
-
-    .swiper-slide {
-      width: fit-content !important;
-    }
-  }
-
-  .thumbnail-animation {
-    box-shadow: none;
-    transition: box-shadow 0.1s ease-in-out;
-    border-radius: ${globalToken?.borderRadius}px;
-
-    > div {
-      border-radius: ${globalToken?.borderRadius}px;
-    }
-
-    &:hover {
-      box-shadow:
-        0 8px 20px rgba(0, 0, 0, 0.1),
-        0 0 32px rgba(0, 0, 0, 0.04);
-    }
-  }
-
-  .custom-button-prev,
-  .custom-button-next {
-    z-index: 10;
-    position: absolute;
-    width: 24px;
-    height: 24px;
-    background-color: #ffffff;
-    box-shadow: 0px 3px 3px 0px #002e591a;
-    border-radius: 999px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    /* Remove default style of Antd button */
-    border-color: white !important;
-
-    &.antsomi-btn-default:not(:disabled):hover {
-      border-color: white !important;
-      background-color: #ffffff !important;
-    }
-  }
-
-  .custom-button-prev {
-    left: 0px;
-    transform: rotate(90deg);
-  }
-
-  .custom-button-next {
-    right: 0px;
-    transform: rotate(-90deg);
-  }
-
-  .hidden {
-    display: none !important;
-  }
-
-  i {
-    font-size: 20px;
-    color: ${THEME?.token?.bw8};
-  }
+export const ThumbnailSliderWrapper = styled.div `
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+
+  .swiper {
+    max-width: 1030px;
+
+    .swiper-slide {
+      width: fit-content !important;
+    }
+  }
+
+  .thumbnail-animation {
+    box-shadow: none;
+    transition: box-shadow 0.1s ease-in-out;
+    border-radius: ${globalToken?.borderRadius}px;
+
+    > div {
+      border-radius: ${globalToken?.borderRadius}px;
+    }
+
+    &:hover {
+      box-shadow:
+        0 8px 20px rgba(0, 0, 0, 0.1),
+        0 0 32px rgba(0, 0, 0, 0.04);
+    }
+  }
+
+  .custom-button-prev,
+  .custom-button-next {
+    z-index: 10;
+    position: absolute;
+    width: 24px;
+    height: 24px;
+    background-color: #ffffff;
+    box-shadow: 0px 3px 3px 0px #002e591a;
+    border-radius: 999px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    /* Remove default style of Antd button */
+    border-color: white !important;
+
+    &.antsomi-btn-default:not(:disabled):hover {
+      border-color: white !important;
+      background-color: #ffffff !important;
+    }
+  }
+
+  .custom-button-prev {
+    left: 0px;
+    transform: rotate(90deg);
+  }
+
+  .custom-button-next {
+    right: 0px;
+    transform: rotate(-90deg);
+  }
+
+  .hidden {
+    display: none !important;
+  }
+
+  i {
+    font-size: 20px;
+    color: ${THEME?.token?.bw8};
+  }
 `;
-export const SwiperSlideWrapper = styled(SwiperSlide) `
-  list-style: none;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: fit-content;
+export const SwiperSlideWrapper = styled(SwiperSlide) `
+  list-style: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: fit-content;
 `;

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

@@ -1,26 +1,26 @@
 import styled from 'styled-components';
 import { Modal } from '../../molecules';
-export const ModalContainer = styled(Modal) `
-  &.antsomi-modal {
-    width: fit-content !important;
-
-    .antsomi-modal-content {
-      width: 1400px;
-      height: auto;
-    }
-  }
-
-  .overview {
-    flex: 1 1 0%;
-  }
+export const ModalContainer = styled(Modal) `
+  &.antsomi-modal {
+    width: fit-content !important;
+
+    .antsomi-modal-content {
+      width: 1400px;
+      height: auto;
+    }
+  }
+
+  .overview {
+    flex: 1 1 0%;
+  }
 `;
-export const ModalWrapper = styled.div `
-  padding: 20px;
-  width: fit-content;
-  box-sizing: border-box;
+export const ModalWrapper = styled.div `
+  padding: 20px;
+  width: fit-content;
+  box-sizing: border-box;
 `;
-export const ImageWrapper = styled.img `
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
+export const ImageWrapper = styled.img `
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
 `;