@antscorp/antsomi-ui 1.3.6-beta.63 → 1.3.6-beta.64

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/Modal';
-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;
 `;

package/es/components/organism/Table/CrossTabTable/components/CustomCell/styled.js

@@ -1,13 +1,13 @@
 import styled from 'styled-components';
-export const BarCell = styled.div `
-  position: absolute;
-  inset: 0;
-  background-color: rgba(0, 0, 0, 0.075);
-
-  .bar-line {
-    position: absolute;
-    bottom: 0;
-    height: 3px;
-    width: 100%;
-  }
+export const BarCell = styled.div `
+  position: absolute;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.075);
+
+  .bar-line {
+    position: absolute;
+    bottom: 0;
+    height: 3px;
+    width: 100%;
+  }
 `;

package/es/components/organism/Table/CrossTabTable/styled.js

@@ -1,13 +1,13 @@
 import styled from 'styled-components';
-export const BarCell = styled.div `
-  position: absolute;
-  inset: 0;
-  background-color: rgba(0, 0, 0, 0.075);
-
-  .bar-line {
-    position: absolute;
-    bottom: 0;
-    height: 3px;
-    width: 100%;
-  }
+export const BarCell = styled.div `
+  position: absolute;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.075);
+
+  .bar-line {
+    position: absolute;
+    bottom: 0;
+    height: 3px;
+    width: 100%;
+  }
 `;

package/es/components/organism/Table/ExplorePivotTable/components/CustomCell/styled.js

@@ -1,21 +1,21 @@
 import styled from 'styled-components';
-export const BarCell = styled.div `
-  position: absolute;
-  inset: 0;
-  background-color: rgba(0, 0, 0, 0.075);
-
-  .bar-line {
-    position: absolute;
-    bottom: 0;
-    height: 3px;
-    width: 100%;
-  }
+export const BarCell = styled.div `
+  position: absolute;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.075);
+
+  .bar-line {
+    position: absolute;
+    bottom: 0;
+    height: 3px;
+    width: 100%;
+  }
 `;
-export const HeatCell = styled.div `
-  position: absolute;
-  inset: 0;
+export const HeatCell = styled.div `
+  position: absolute;
+  inset: 0;
 `;
-export const StyledValue = styled.div `
-  position: relative;
-  z-index: 1;
+export const StyledValue = styled.div `
+  position: relative;
+  z-index: 1;
 `;

package/es/components/organism/Table/ExplorePivotTable/styled.js

@@ -1,15 +1,15 @@
 import styled from 'styled-components';
 import { Table } from '../Table';
-export const StyledTable = styled(Table) `
-  .antsomi-table-thead {
-    .antsomi-table-cell {
-      background-color: white !important;
-      font-weight: 400 !important;
-    }
-  }
+export const StyledTable = styled(Table) `
+  .antsomi-table-thead {
+    .antsomi-table-cell {
+      background-color: white !important;
+      font-weight: 400 !important;
+    }
+  }
 `;
-export const StyledHeader = styled.div `
-  background-color: #4285f4;
-  padding: 8px 10px;
-  text-align: right;
+export const StyledHeader = styled.div `
+  background-color: #4285f4;
+  padding: 8px 10px;
+  text-align: right;
 `;

package/es/components/organism/TicketEditor/components/Editor/EditorToolbar.js

@@ -63,11 +63,11 @@ export const formats = [
     'color',
     'code-block',
 ];
-const ToolBarWrapper = styled.div `
-  border-radius: '10px 10px 0 0';
-  * {
-    font-weight: 400;
-  }
+const ToolBarWrapper = styled.div `
+  border-radius: '10px 10px 0 0';
+  * {
+    font-weight: 400;
+  }
 `;
 export const QuillToolbar = () => (_jsxs(ToolBarWrapper, { id: "toolbar", children: [_jsxs("span", { className: "ql-formats", children: [_jsxs("select", { className: "ql-font", defaultValue: "false", children: [_jsx("option", { value: "false", children: "Sans Serif" }), _jsx("option", { value: "serif", children: "Serif" }), _jsx("option", { value: "monospace", children: "Monospace" })] }), _jsxs("select", { className: "ql-size", defaultValue: "12px", children: [_jsx("option", { value: "12px", children: "12px" }), _jsx("option", { value: "14px", children: "14px" }), _jsx("option", { value: "16px", children: "16px" }), _jsx("option", { value: "18px", children: "18px" }), _jsx("option", { value: "20px", children: "20px" }), _jsx("option", { value: "22px", children: "22px" }), _jsx("option", { value: "24px", children: "24px" }), _jsx("option", { value: "26px", children: "26px" }), _jsx("option", { value: "28px", children: "28px" }), _jsx("option", { value: "30px", children: "30px" })] }), _jsxs("select", { className: "ql-header", defaultValue: "3", children: [_jsx("option", { value: "1", children: "Heading1" }), _jsx("option", { value: "2", children: "Heading2" }), _jsx("option", { value: "3", children: "Heading3" })] })] }), _jsxs("span", { className: "ql-formats", children: [_jsx("button", { className: "ql-bold" }), _jsx("button", { className: "ql-italic" }), _jsx("button", { className: "ql-underline" }), _jsx("button", { className: "ql-strike" })] }), _jsxs("span", { className: "ql-formats", children: [_jsx("button", { className: "ql-list", value: "ordered" }), _jsx("button", { className: "ql-list", value: "bullet" }), _jsx("button", { className: "ql-indent", value: "-1" }), _jsx("button", { className: "ql-indent", value: "+1" })] }), _jsxs("span", { className: "ql-formats", children: [_jsx("button", { className: "ql-script", value: "super" }), _jsx("button", { className: "ql-script", value: "sub" }), _jsx("button", { className: "ql-blockquote" }), _jsx("button", { className: "ql-direction" })] }), _jsxs("span", { className: "ql-formats", children: [_jsx("select", { className: "ql-align" }), _jsx("select", { className: "ql-color" }), _jsx("select", { className: "ql-background" })] }), _jsxs("span", { className: "ql-formats", children: [_jsx("button", { className: "ql-link" }), _jsx("button", { className: "ql-image" })] }), _jsxs("span", { className: "ql-formats", children: [_jsx("button", { className: "ql-formula" }), _jsx("button", { className: "ql-code-block" }), _jsx("button", { className: "ql-clean" })] }), _jsxs("span", { className: "ql-formats", children: [_jsx("button", { className: "ql-undo", children: _jsx(CustomUndo, {}) }), _jsx("button", { className: "ql-redo", children: _jsx(CustomRedo, {}) })] })] }));
 export default QuillToolbar;