@antscorp/antsomi-ui 2.0.101 → 2.0.103

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;
+      }
+    }
+  }
 `;

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

@@ -4,91 +4,91 @@ import { THEME, globalToken } from '@antscorp/antsomi-ui/es/constants';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { CLS } from './utils';
 import tinycolor from 'tinycolor2';
-export const MenuItemWrapper = styled.div `
-  width: 100%;
-  height: 100%;
-  display: flex;
-  gap: 8px;
-  justify-content: space-between;
-  padding: 5px;
-  align-items: center;
-  overflow: hidden;
-
-  .icon-expand {
-    font-size: 14px;
-    flex-shrink: 0;
-  }
-
-  .title-wrapper {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
+export const MenuItemWrapper = styled.div `
+  width: 100%;
+  height: 100%;
+  display: flex;
+  gap: 8px;
+  justify-content: space-between;
+  padding: 5px;
+  align-items: center;
+  overflow: hidden;
+
+  .icon-expand {
+    font-size: 14px;
+    flex-shrink: 0;
+  }
+
+  .title-wrapper {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 `;
-export const MenuItemRoot = styled.li `
-  &.${CLS.Item.default} {
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    overflow: hidden;
-
-    &:focus {
-      outline: none;
-    }
-
-    > .${CLS.ItemLabel.default} {
-      display: flex;
-      flex: 1;
-      overflow: hidden;
-      align-self: stretch;
-      align-items: center;
-    }
-
-    > .${CLS.ItemAction.default} {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    &.${CLS.Item.disabled} {
-      color: ${THEME.components?.Menu?.itemDisabledColor};
-      cursor: not-allowed;
-    }
-
-    &.${CLS.Item.selected} {
-      background-color: ${THEME.components?.Menu?.itemActiveBg};
-    }
-
-    &.${CLS.Item.expanded} {
-      > .${CLS.ItemAction.default} {
-        > .${CLS.IconExpand.default} {
-          rotate: 180deg;
-          transition: rotate 0.4s;
-        }
-      }
-    }
-
-    &.${CLS.Item.selectedDescendant} {
+export const MenuItemRoot = styled.li `
+  &.${CLS.Item.default} {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+
+    &:focus {
+      outline: none;
+    }
+
+    > .${CLS.ItemLabel.default} {
+      display: flex;
+      flex: 1;
+      overflow: hidden;
+      align-self: stretch;
+      align-items: center;
+    }
+
+    > .${CLS.ItemAction.default} {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    &.${CLS.Item.disabled} {
+      color: ${THEME.components?.Menu?.itemDisabledColor};
+      cursor: not-allowed;
+    }
+
+    &.${CLS.Item.selected} {
+      background-color: ${THEME.components?.Menu?.itemActiveBg};
+    }
+
+    &.${CLS.Item.expanded} {
+      > .${CLS.ItemAction.default} {
+        > .${CLS.IconExpand.default} {
+          rotate: 180deg;
+          transition: rotate 0.4s;
+        }
+      }
+    }
+
+    &.${CLS.Item.selectedDescendant} {
       background-color: ${tinycolor(THEME.components?.Menu?.itemActiveBg)
     .lighten(4)
-    .toString('rgb')};
-    }
-
-    &:focus:not(.${CLS.Item.disabled}, .${CLS.Item.selected}, .${CLS.Item.selectedDescendant}),
-    &:hover:not(.${CLS.Item.disabled}, .${CLS.Item.selected}, .${CLS.Item.selectedDescendant}) {
-      background-color: ${THEME.components?.Menu?.itemHoverBg};
-    }
-  }
+    .toString('rgb')};
+    }
+
+    &:focus:not(.${CLS.Item.disabled}, .${CLS.Item.selected}, .${CLS.Item.selectedDescendant}),
+    &:hover:not(.${CLS.Item.disabled}, .${CLS.Item.selected}, .${CLS.Item.selectedDescendant}) {
+      background-color: ${THEME.components?.Menu?.itemHoverBg};
+    }
+  }
 `;
-export const VirtualizedMenuContainer = styled((VariableSizeList)) `
-  font-size: ${globalToken?.fontSize}px;
-  scrollbar-gutter: stable;
-
-  ul {
-    padding: 0;
-    margin: 0;
-  }
+export const VirtualizedMenuContainer = styled((VariableSizeList)) `
+  font-size: ${globalToken?.fontSize}px;
+  scrollbar-gutter: stable;
+
+  ul {
+    padding: 0;
+    margin: 0;
+  }
 `;
-export const StyledAutoSizer = styled(AutoSizer) `
-  flex: 1;
+export const StyledAutoSizer = styled(AutoSizer) `
+  flex: 1;
 `;

package/es/components/organism/AccountProfile/components/AccountSetting/components/EditableInput/styles.js

@@ -1,103 +1,103 @@
 import styled from 'styled-components';
-export const StyledEditableInput = styled.div `
-  font-size: 12px;
-  color: #000;
-
-  .clickable-text {
-    font-weight: 700;
-    color: #005eb8;
-    cursor: pointer;
-  }
-
-  .qr-form-wrapper {
-    display: flex;
-    gap: 30px;
-    margin-top: 25px;
-
-    .qr-form__img {
-      width: 165px;
-      height: 165px;
-      object-fit: contain;
-    }
-    .qr-form {
-      display: flex;
-      flex-direction: column;
-      gap: 20px;
-    }
-    .qr-form__header {
-      font-size: 14px;
-      font-weight: 700;
-      margin: 0;
-    }
-    .qr-form__description {
-      margin: 0;
-    }
-    .qr-form__input {
-    }
-    .qr-form__error {
-      color: #ef3340;
-    }
-    .qr-form__action {
-      display: flex;
-      gap: 10px;
-    }
-  }
+export const StyledEditableInput = styled.div `
+  font-size: 12px;
+  color: #000;
+
+  .clickable-text {
+    font-weight: 700;
+    color: #005eb8;
+    cursor: pointer;
+  }
+
+  .qr-form-wrapper {
+    display: flex;
+    gap: 30px;
+    margin-top: 25px;
+
+    .qr-form__img {
+      width: 165px;
+      height: 165px;
+      object-fit: contain;
+    }
+    .qr-form {
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+    }
+    .qr-form__header {
+      font-size: 14px;
+      font-weight: 700;
+      margin: 0;
+    }
+    .qr-form__description {
+      margin: 0;
+    }
+    .qr-form__input {
+    }
+    .qr-form__error {
+      color: #ef3340;
+    }
+    .qr-form__action {
+      display: flex;
+      gap: 10px;
+    }
+  }
 `;
-export const StyledChangePass = styled.div `
-  font-size: 12px;
-  color: #000000;
-  display: flex;
-  flex-direction: column;
-  gap: 15px;
-
-  .row-input {
-    display: flex;
-    align-items: flex-start;
-    gap: 15px;
-
-    label {
-      width: 150px;
-      text-align: left;
-      position: relative;
-      top: 14px;
-    }
-    .required-mark {
-      color: #ef3340;
-      margin-left: 5px;
-    }
-    .error {
-      position: absolute;
-      color: #ef3340;
-      font-size: 11px;
-    }
-    .field-container {
-      width: 300px;
-      .MuiFormControl-root {
-        width: 100%;
-      }
-    }
-  }
+export const StyledChangePass = styled.div `
+  font-size: 12px;
+  color: #000000;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+
+  .row-input {
+    display: flex;
+    align-items: flex-start;
+    gap: 15px;
+
+    label {
+      width: 150px;
+      text-align: left;
+      position: relative;
+      top: 14px;
+    }
+    .required-mark {
+      color: #ef3340;
+      margin-left: 5px;
+    }
+    .error {
+      position: absolute;
+      color: #ef3340;
+      font-size: 11px;
+    }
+    .field-container {
+      width: 300px;
+      .MuiFormControl-root {
+        width: 100%;
+      }
+    }
+  }
 `;
-export const LastChangeWrapper = styled.div `
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  margin-top: 4px;
-
-  .tick-icon {
-    color: #12b800;
-  }
-  .last-change-time {
-    color: #7f7f7f;
-  }
+export const LastChangeWrapper = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  margin-top: 4px;
+
+  .tick-icon {
+    color: #12b800;
+  }
+  .last-change-time {
+    color: #7f7f7f;
+  }
 `;
-export const TwoStepAuthenWrapper = styled.div `
-  position: relative;
-  margin-top: 20px;
-
-  .two-step-label {
-    position: absolute;
-    left: -150px;
-    top: 4px;
-  }
+export const TwoStepAuthenWrapper = styled.div `
+  position: relative;
+  margin-top: 20px;
+
+  .two-step-label {
+    position: absolute;
+    left: -150px;
+    top: 4px;
+  }
 `;

package/es/components/organism/AccountProfile/components/AccountSetting/components/LanguageSelector/styles.js

@@ -1,23 +1,23 @@
 import styled from 'styled-components';
 import { Typography } from '@antscorp/antsomi-ui/es/components/atoms/Typography';
 import { Select } from '@antscorp/antsomi-ui/es/components/molecules/Select';
-export const StyledSelect = styled(Select) `
-  .img-lang {
-    width: 21px;
-    height: 15px;
-    margin-right: 10px;
-  }
-  .img-lang-en {
-    background: url('~Assets/images/langs/english.png') no-repeat;
-  }
-  .img-lang-vi {
-    background: url('~Assets/images/langs/vietnam.png') no-repeat;
-  }
+export const StyledSelect = styled(Select) `
+  .img-lang {
+    width: 21px;
+    height: 15px;
+    margin-right: 10px;
+  }
+  .img-lang-en {
+    background: url('~Assets/images/langs/english.png') no-repeat;
+  }
+  .img-lang-vi {
+    background: url('~Assets/images/langs/vietnam.png') no-repeat;
+  }
 `;
-export const StyledSelectOption = styled(Typography) `
-  display: flex !important;
-  justify-content: flex-start;
-  align-items: center;
-  cursor: pointer;
-  gap: 6px;
+export const StyledSelectOption = styled(Typography) `
+  display: flex !important;
+  justify-content: flex-start;
+  align-items: center;
+  cursor: pointer;
+  gap: 6px;
 `;