@antscorp/antsomi-ui 2.0.108 → 2.0.109

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

@@ -7,229 +7,229 @@ import { ICON_SIZE } from './constants';
 // Components
 import { Flex } from '@antscorp/antsomi-ui/es/components/atoms/Flex';
 const { bw8, bw3, borderRadiusXL, blue1_2, blue7 } = globalToken || {};
-export const IconWrapper = styled.div `
-  width: 30px;
-  height: 30px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  i {
-    font-size: ${ICON_SIZE}px;
-    color: ${bw8};
-  }
+export const IconWrapper = styled.div `
+  width: 30px;
+  height: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  i {
+    font-size: ${ICON_SIZE}px;
+    color: ${bw8};
+  }
 `;
-export const PopoverWrapper = styled.div `
+export const PopoverWrapper = styled.div `
   ${({ show }) => show
-    ? `
-      opacity: 1;
-      visibility: visible;
+    ? `
+      opacity: 1;
+      visibility: visible;
       `
-    : `
-      opacity: 0;
-      visibility: hidden;
-    `}
-
-  &.antsomi-scroll-box {
-    margin-right: 0px !important;
-    &::-webkit-scrollbar {
-      display: none !important;
-    }
-  }
-
-  position: absolute;
-  background-color: white;
-  left: 65px;
-  border-radius: ${borderRadiusXL}px;
-  bottom: 15px;
-  box-shadow: 0px 3px 20px 0px #002e5933;
-  height: ${({ hasMarginTop }) => hasMarginTop ? `calc(100% - ${HEADER_HEIGHT + 15}px)` : `calc(100% - 15px)`};
-  transition:
-    visibility 0s,
-    opacity 0.2s ease-out;
-  z-index: 10;
-  padding: 10px;
-  box-sizing: border-box;
+    : `
+      opacity: 0;
+      visibility: hidden;
+    `}
+
+  &.antsomi-scroll-box {
+    margin-right: 0px !important;
+    &::-webkit-scrollbar {
+      display: none !important;
+    }
+  }
+
+  position: absolute;
+  background-color: white;
+  left: 65px;
+  border-radius: ${borderRadiusXL}px;
+  bottom: 15px;
+  box-shadow: 0px 3px 20px 0px #002e5933;
+  height: ${({ hasMarginTop }) => hasMarginTop ? `calc(100% - ${HEADER_HEIGHT + 15}px)` : `calc(100% - 15px)`};
+  transition:
+    visibility 0s,
+    opacity 0.2s ease-out;
+  z-index: 10;
+  padding: 10px;
+  box-sizing: border-box;
 `;
-export const FeatureMenuWrapper = styled(Flex) `
-  flex: 1 1 0%;
-  overflow: hidden;
+export const FeatureMenuWrapper = styled(Flex) `
+  flex: 1 1 0%;
+  overflow: hidden;
 `;
-export const ExpandWrapper = styled.div `
-  height: 35px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  border-top: 1px solid ${bw3};
-  padding: 0 10px;
+export const ExpandWrapper = styled.div `
+  height: 35px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border-top: 1px solid ${bw3};
+  padding: 0 10px;
 `;
-export const LeftMenuNavWrapper = styled.div `
-  height: 100vh;
-  display: flex;
-  transition: all 0.2s ease-out;
-
-  ${p => !p.$show && 'display: none;'}
-
-  ${p => (p.$isExpandMenu ? `gap: 10px;` : `gap: 15px;`)}
+export const LeftMenuNavWrapper = styled.div `
+  height: 100vh;
+  display: flex;
+  transition: all 0.2s ease-out;
+
+  ${p => !p.$show && 'display: none;'}
+
+  ${p => (p.$isExpandMenu ? `gap: 10px;` : `gap: 15px;`)}
 `;
-export const NavLogoWrapper = styled(Flex) `
-  height: ${HEADER_HEIGHT}px;
-  flex-shrink: 0;
-
-  .image-wrapper {
-    height: 30px;
-    width: 30px;
-
-    img {
-      height: 100%;
-      width: 100%;
-    }
-  }
+export const NavLogoWrapper = styled(Flex) `
+  height: ${HEADER_HEIGHT}px;
+  flex-shrink: 0;
+
+  .image-wrapper {
+    height: 30px;
+    width: 30px;
+
+    img {
+      height: 100%;
+      width: 100%;
+    }
+  }
 `;
-export const LeftMenuNav = styled.nav `
-  position: relative;
-  width: 70px;
-  height: 100%;
-  background-color: ${blue1_2};
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  border-right: 1px solid ${bw3};
-
-  ${ExpandWrapper} {
-    flex-shrink: 0;
-  }
+export const LeftMenuNav = styled.nav `
+  position: relative;
+  width: 70px;
+  height: 100%;
+  background-color: ${blue1_2};
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  border-right: 1px solid ${bw3};
+
+  ${ExpandWrapper} {
+    flex-shrink: 0;
+  }
 `;
-export const FeatureMenu = styled.ul `
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-  flex: 1 1 0%;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  overflow-x: hidden;
-
-  &.antsomi-scroll-box {
-    &::-webkit-scrollbar {
-      display: none !important;
-    }
-  }
-
-  .menu-content {
-    flex-shrink: 0;
-
-    &.scroll-content {
-      margin-right: 0px !important;
-    }
-  }
-
-  .nav-blank {
-    flex: 1 1 0%;
-  }
+export const FeatureMenu = styled.ul `
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  flex: 1 1 0%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  overflow-x: hidden;
+
+  &.antsomi-scroll-box {
+    &::-webkit-scrollbar {
+      display: none !important;
+    }
+  }
+
+  .menu-content {
+    flex-shrink: 0;
+
+    &.scroll-content {
+      margin-right: 0px !important;
+    }
+  }
+
+  .nav-blank {
+    flex: 1 1 0%;
+  }
 `;
-export const FeatureMenuItem = styled.div `
-  width: 100%;
-  padding: 5px;
-  box-sizing: border-box;
-
-  .menu-link {
-    width: 100% !important;
-    height: 100% !important;
-    display: flex !important;
-    color: inherit !important;
-    text-decoration: none !important;
-  }
-
-  li {
-    width: 100%;
-    cursor: pointer;
-    text-decoration: none;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    border-radius: ${borderRadiusXL}px;
-    padding: 5px 0;
-    position: relative;
-
-    &::before {
-      display: none !important;
-    }
-
-    span {
-      font-size: 11px !important;
-      font-weight: 500;
-      color: inherit;
-    }
-
-    .menu-item__icon {
-      color: ${globalToken?.bw8};
-      margin-bottom: 3px;
-    }
-
-    &.isHover,
-    &.isActive {
-      ${IconWrapper},
-      span {
-        color: ${blue7};
-
-        i {
-          color: inherit !important;
-        }
-      }
-
-      .menu-item__icon {
-        color: ${blue7};
-      }
-    }
-
-    &.isActive {
-      background-color: #d3e3fd !important;
-    }
-
-    &.isHover {
-      background-color: #ffffffcc;
-
-      .popup-triangle {
-        visibility: visible;
-        opacity: 1;
-      }
-    }
-
-    .popup-triangle {
-      opacity: 0;
-      visibility: hidden;
-      right: -6px;
-      position: absolute;
-      width: 0;
-      height: 0;
-      border-style: solid;
-      border-width: 1px 9px 10px 10px;
-      border-color: transparent transparent white transparent;
-      transform: rotate(270deg);
-      z-index: 100;
-    }
-  }
+export const FeatureMenuItem = styled.div `
+  width: 100%;
+  padding: 5px;
+  box-sizing: border-box;
+
+  .menu-link {
+    width: 100% !important;
+    height: 100% !important;
+    display: flex !important;
+    color: inherit !important;
+    text-decoration: none !important;
+  }
+
+  li {
+    width: 100%;
+    cursor: pointer;
+    text-decoration: none;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border-radius: ${borderRadiusXL}px;
+    padding: 5px 0;
+    position: relative;
+
+    &::before {
+      display: none !important;
+    }
+
+    span {
+      font-size: 11px !important;
+      font-weight: 500;
+      color: inherit;
+    }
+
+    .menu-item__icon {
+      color: ${globalToken?.bw8};
+      margin-bottom: 3px;
+    }
+
+    &.isHover,
+    &.isActive {
+      ${IconWrapper},
+      span {
+        color: ${blue7};
+
+        i {
+          color: inherit !important;
+        }
+      }
+
+      .menu-item__icon {
+        color: ${blue7};
+      }
+    }
+
+    &.isActive {
+      background-color: #d3e3fd !important;
+    }
+
+    &.isHover {
+      background-color: #ffffffcc;
+
+      .popup-triangle {
+        visibility: visible;
+        opacity: 1;
+      }
+    }
+
+    .popup-triangle {
+      opacity: 0;
+      visibility: hidden;
+      right: -6px;
+      position: absolute;
+      width: 0;
+      height: 0;
+      border-style: solid;
+      border-width: 1px 9px 10px 10px;
+      border-color: transparent transparent white transparent;
+      transform: rotate(270deg);
+      z-index: 100;
+    }
+  }
 `;
-export const ChildMenuWrapper = styled.div `
-  height: ${({ isMarginTop }) => (isMarginTop ? `calc(100% - ${HEADER_HEIGHT}px)` : '100%')};
-  margin-top: ${({ isMarginTop }) => (isMarginTop ? `${HEADER_HEIGHT}px` : '0px')};
-  width: ${({ isExpand }) => (isExpand ? '210px' : '0px')};
-  padding: ${({ isExpand }) => (isExpand ? '10px' : '10px 0')};
-  transition:
-    width 0.2s,
-    padding 0.2s ease;
-  padding-left: 0px;
-  box-sizing: border-box;
-  z-index: 1;
-
-  &.antsomi-scroll-box {
-    margin-right: 0px !important;
-    &::-webkit-scrollbar {
-      display: none !important;
-    }
-  }
+export const ChildMenuWrapper = styled.div `
+  height: ${({ isMarginTop }) => (isMarginTop ? `calc(100% - ${HEADER_HEIGHT}px)` : '100%')};
+  margin-top: ${({ isMarginTop }) => (isMarginTop ? `${HEADER_HEIGHT}px` : '0px')};
+  width: ${({ isExpand }) => (isExpand ? '210px' : '0px')};
+  padding: ${({ isExpand }) => (isExpand ? '10px' : '10px 0')};
+  transition:
+    width 0.2s,
+    padding 0.2s ease;
+  padding-left: 0px;
+  box-sizing: border-box;
+  z-index: 1;
+
+  &.antsomi-scroll-box {
+    margin-right: 0px !important;
+    &::-webkit-scrollbar {
+      display: none !important;
+    }
+  }
 `;

package/es/components/organism/Login/components/ChooseMethod/styled.js

@@ -1,24 +1,24 @@
 import { Flex } from 'antd';
 import styled from 'styled-components';
-export const TextInfo = styled.span `
-  color: #7f7f7f;
-  font-size: ${(props) => (props.isMobile ? ' 13px !important' : '11px')};
+export const TextInfo = styled.span `
+  color: #7f7f7f;
+  font-size: ${(props) => (props.isMobile ? ' 13px !important' : '11px')};
 `;
-export const SubTitle = styled.span `
-  color: #005eb8;
-  font-size: ${(props) => (props.isMobile ? ' 16px ' : '14px')};
-  font-weight: 500;
+export const SubTitle = styled.span `
+  color: #005eb8;
+  font-size: ${(props) => (props.isMobile ? ' 16px ' : '14px')};
+  font-weight: 500;
 `;
-export const BlockMethod = styled(Flex) `
-  align-items: center;
-  gap: 10px;
-  padding: 10px;
-  cursor: ${props => (props.disable ? 'not-allowed' : 'pointer')};
-  border-radius: 10px;
-
-  opacity: ${props => (props.disable ? '0.5' : '1')};
-
-  &:hover {
-    background-color: ${props => (props.disable ? '#f2f2f2' : '#e6f0ff')};
-  }
+export const BlockMethod = styled(Flex) `
+  align-items: center;
+  gap: 10px;
+  padding: 10px;
+  cursor: ${props => (props.disable ? 'not-allowed' : 'pointer')};
+  border-radius: 10px;
+
+  opacity: ${props => (props.disable ? '0.5' : '1')};
+
+  &:hover {
+    background-color: ${props => (props.disable ? '#f2f2f2' : '#e6f0ff')};
+  }
 `;

package/es/components/organism/Login/components/ForgotPassword/styled.js

@@ -1,10 +1,10 @@
 import styled from 'styled-components';
-export const TextButton = styled.div `
-  text-align: center;
-  color: #005eb8;
-  font-weight: 700;
-
-  :hover {
-    cursor: pointer;
-  }
+export const TextButton = styled.div `
+  text-align: center;
+  color: #005eb8;
+  font-weight: 700;
+
+  :hover {
+    cursor: pointer;
+  }
 `;

package/es/components/organism/Login/components/LoginSelectPortal/Item/styled.js

@@ -1,34 +1,34 @@
 import styled from 'styled-components';
-export const WrapperItem = styled.div `
-  display: flex;
-
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-
-  width: 100%;
-  height: 119px;
-  border-radius: 10px;
-  padding: 10px 10px 0 10px;
-
-  border: 1px solid #b8cfe6;
-  cursor: pointer;
-
-  img {
-    margin-bottom: 10px;
-    object-fit: contain;
-  }
-
-  &:hover {
-    background-color: #f2f9ff !important;
-  }
-
-  .antsomi-typography {
-    color: #595959 !important;
-  }
+export const WrapperItem = styled.div `
+  display: flex;
+
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+
+  width: 100%;
+  height: 119px;
+  border-radius: 10px;
+  padding: 10px 10px 0 10px;
+
+  border: 1px solid #b8cfe6;
+  cursor: pointer;
+
+  img {
+    margin-bottom: 10px;
+    object-fit: contain;
+  }
+
+  &:hover {
+    background-color: #f2f9ff !important;
+  }
+
+  .antsomi-typography {
+    color: #595959 !important;
+  }
 `;
-export const BlockEnd = styled.div `
-  border-top: 1px solid #b8cfe6;
-  overflow: hidden;
-  width: 100%;
+export const BlockEnd = styled.div `
+  border-top: 1px solid #b8cfe6;
+  overflow: hidden;
+  width: 100%;
 `;

package/es/components/organism/Login/components/LoginSelectPortal/styled.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-export const WrapperList = styled.div `
-  padding: 10px;
-  height: 100%;
+export const WrapperList = styled.div `
+  padding: 10px;
+  height: 100%;
 `;

package/es/components/organism/Login/components/LoginWithEmail/styled.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-export const TextInfo = styled.span `
-  color: #7f7f7f;
-  font-size: ${props => (props.isMobile ? ' 13px !important' : '11px')};
+export const TextInfo = styled.span `
+  color: #7f7f7f;
+  font-size: ${props => (props.isMobile ? ' 13px !important' : '11px')};
 `;

package/es/components/organism/Login/components/LoginWithGG/styled.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-export const TextInfo = styled.span `
-  color: #7f7f7f;
-  font-size: ${(props) => (props.isMobile ? ' 13px !important' : '11px')};
+export const TextInfo = styled.span `
+  color: #7f7f7f;
+  font-size: ${(props) => (props.isMobile ? ' 13px !important' : '11px')};
 `;

package/es/components/organism/Login/components/SetupGGAuthenticator/styled.js

@@ -1,10 +1,10 @@
 import styled from 'styled-components';
-export const LabelStep = styled.span `
-  color: #005eb8;
-  font-size: ${props => (props.isMobile ? '16px' : '14px')};
-  font-weight: 500;
+export const LabelStep = styled.span `
+  color: #005eb8;
+  font-size: ${props => (props.isMobile ? '16px' : '14px')};
+  font-weight: 500;
 `;
-export const Link = styled.a `
-  text-decoration: underline;
-  padding-right: 4px;
+export const Link = styled.a `
+  text-decoration: underline;
+  padding-right: 4px;
 `;

package/es/components/organism/Login/components/SignIn/styled.js

@@ -1,10 +1,10 @@
 import styled from 'styled-components';
-export const Wrapper = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 40px;
-
-  width: 100%;
-
-  ${props => (!props.isMobile ? 'padding: 100px 50px' : ' padding: 100px 30px')}
+export const Wrapper = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+
+  width: 100%;
+
+  ${props => (!props.isMobile ? 'padding: 100px 50px' : ' padding: 100px 30px')}
 `;

package/es/components/organism/Login/components/VerifyAccount/styled.js

@@ -1,17 +1,17 @@
 import { Form } from 'antd';
 import styled from 'styled-components';
-export const WrapperForm = styled(Form) `
-  .antsomi-form-item-row {
-    flex-direction: column;
-  }
-
-  .antsomi-form-item .antsomi-form-item-label > label::after {
-    content: '' !important;
-  }
+export const WrapperForm = styled(Form) `
+  .antsomi-form-item-row {
+    flex-direction: column;
+  }
+
+  .antsomi-form-item .antsomi-form-item-label > label::after {
+    content: '' !important;
+  }
 `;
-export const LabelRequire = styled.span `
-  color: #595959;
-  .icon {
-    color: red;
-  }
+export const LabelRequire = styled.span `
+  color: #595959;
+  .icon {
+    color: red;
+  }
 `;