@antscorp/antsomi-ui 2.0.101 → 2.0.102

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

@@ -1,159 +1,159 @@
 import styled from 'styled-components';
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
-export const EditorTabStyled = styled.div `
-  position: relative;
-  height: 40px;
-  display: flex;
-  align-items: center;
-
-  /* Styled for icon button */
-  button.antsomi-btn-icon-only.antsomi-btn-sm {
-    margin-left: auto;
-    border: none !important;
-    background-color: transparent !important;
-    flex-shrink: 0;
-    width: 20px !important;
-    height: 20px !important;
-    &:hover {
-      background-color: ${globalToken?.blue} !important;
-    }
-  }
-
-  .left-block {
-    position: relative;
-    height: 100%;
-    /* width: 100%;
-    flex-grow: 1; */
-    flex-flow: nowrap;
-    display: flex;
-    align-items: center;
-    overflow-x: auto;
-    overflow-y: hidden;
-
-    font-size: 14px;
-    color: #222;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
-
-    .tab-item {
-      position: relative;
-      box-sizing: border-box;
-
-      display: flex;
-      align-items: center;
-      flex-shrink: 0;
-      gap: 7px;
-      /* width: 150px; */
-      min-width: 150px;
-      max-width: 300px;
-
-      height: 40px;
-      padding: 0 10px;
-      overflow: hidden;
-      background-color: ${globalToken?.bw2};
-
-      /* &.active button, */
-      & button {
-        /* display: none !important; */
-        visibility: hidden;
-      }
-
-      &:hover {
-        background-color: ${globalToken?.blue};
-        & button {
-          /* display: flex !important; */
-          visibility: visible;
-        }
-      }
-
-      white-space: nowrap;
-
-      transition: background-color 300ms ease-in-out;
-      cursor: pointer;
-
-      i {
-        font-size: 20px;
-        color: #666;
-      }
-
-      &::after {
-        content: '';
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        height: 3px;
-        width: 100%;
-        background-color: #1f5fac;
-
-        transform-origin: center;
-        transform: scaleX(0);
-        transition: transform 300ms ease-in-out;
-      }
-
-      &.active {
-        &::after {
-          transform: scaleX(1);
-        }
-        background-color: #fff;
-        & button.antsomi-dropdown-open {
-          display: flex !important;
-        }
-      }
-    }
-
-    ::-webkit-scrollbar {
-      -webkit-appearance: none;
-      display: none !important;
-    }
-    ::-webkit-scrollbar-thumb {
-      display: none !important;
-    }
-  }
-
-  button.new-query-button {
-    margin-left: 10px;
-    border: none;
-  }
-
-  &:has(.left-block > div:last-child.active) .navigate-button:last-child,
-  &:has(.left-block > div:first-child.active) .navigate-button:first-child {
-    cursor: not-allowed;
-    pointer-events: none;
-    opacity: 0.5;
-  }
-
-  .navigate-button {
-    /* Structure Block */
-    flex-shrink: 0;
-    height: 100%;
-    width: 40px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: ${globalToken?.blue7};
-    border-radius: ${globalToken?.borderRadius}px;
-    border: 5px solid transparent;
-
-    /* Typography Block */
-    font-size: 12px;
-
-    cursor: pointer;
-
-    /* &:last-child {
-      border-right: 1px solid #e0e0e0;
-    } */
-
-    &:hover {
-      border: 5px solid transparent;
-      background-color: ${globalToken?.blue};
-    }
-
-    /* &.--disabled {
-      cursor: not-allowed;
-      pointer-events: none;
-      opacity: 0.7;
-    } */
-  }
+export const EditorTabStyled = styled.div `
+  position: relative;
+  height: 40px;
+  display: flex;
+  align-items: center;
+
+  /* Styled for icon button */
+  button.antsomi-btn-icon-only.antsomi-btn-sm {
+    margin-left: auto;
+    border: none !important;
+    background-color: transparent !important;
+    flex-shrink: 0;
+    width: 20px !important;
+    height: 20px !important;
+    &:hover {
+      background-color: ${globalToken?.blue} !important;
+    }
+  }
+
+  .left-block {
+    position: relative;
+    height: 100%;
+    /* width: 100%;
+    flex-grow: 1; */
+    flex-flow: nowrap;
+    display: flex;
+    align-items: center;
+    overflow-x: auto;
+    overflow-y: hidden;
+
+    font-size: 14px;
+    color: #222;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    .tab-item {
+      position: relative;
+      box-sizing: border-box;
+
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+      gap: 7px;
+      /* width: 150px; */
+      min-width: 150px;
+      max-width: 300px;
+
+      height: 40px;
+      padding: 0 10px;
+      overflow: hidden;
+      background-color: ${globalToken?.bw2};
+
+      /* &.active button, */
+      & button {
+        /* display: none !important; */
+        visibility: hidden;
+      }
+
+      &:hover {
+        background-color: ${globalToken?.blue};
+        & button {
+          /* display: flex !important; */
+          visibility: visible;
+        }
+      }
+
+      white-space: nowrap;
+
+      transition: background-color 300ms ease-in-out;
+      cursor: pointer;
+
+      i {
+        font-size: 20px;
+        color: #666;
+      }
+
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        height: 3px;
+        width: 100%;
+        background-color: #1f5fac;
+
+        transform-origin: center;
+        transform: scaleX(0);
+        transition: transform 300ms ease-in-out;
+      }
+
+      &.active {
+        &::after {
+          transform: scaleX(1);
+        }
+        background-color: #fff;
+        & button.antsomi-dropdown-open {
+          display: flex !important;
+        }
+      }
+    }
+
+    ::-webkit-scrollbar {
+      -webkit-appearance: none;
+      display: none !important;
+    }
+    ::-webkit-scrollbar-thumb {
+      display: none !important;
+    }
+  }
+
+  button.new-query-button {
+    margin-left: 10px;
+    border: none;
+  }
+
+  &:has(.left-block > div:last-child.active) .navigate-button:last-child,
+  &:has(.left-block > div:first-child.active) .navigate-button:first-child {
+    cursor: not-allowed;
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
+  .navigate-button {
+    /* Structure Block */
+    flex-shrink: 0;
+    height: 100%;
+    width: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: ${globalToken?.blue7};
+    border-radius: ${globalToken?.borderRadius}px;
+    border: 5px solid transparent;
+
+    /* Typography Block */
+    font-size: 12px;
+
+    cursor: pointer;
+
+    /* &:last-child {
+      border-right: 1px solid #e0e0e0;
+    } */
+
+    &:hover {
+      border: 5px solid transparent;
+      background-color: ${globalToken?.blue};
+    }
+
+    /* &.--disabled {
+      cursor: not-allowed;
+      pointer-events: none;
+      opacity: 0.7;
+    } */
+  }
 `;

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

@@ -5,31 +5,31 @@ import { Button } from '@antscorp/antsomi-ui/es/components/atoms/Button';
 import { Empty } from '@antscorp/antsomi-ui/es/components/atoms';
 // Constants
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
-export const WrapperCollection = styled.section `
-  margin-top: 15px;
+export const WrapperCollection = styled.section `
+  margin-top: 15px;
 `;
-export const EmojiList = styled.section `
-  margin-top: 20px;
+export const EmojiList = styled.section `
+  margin-top: 20px;
 `;
-export const Emoji = styled(Button) `
-  width: ${({ $width }) => $width || 50}px !important;
-  min-width: ${({ $width }) => $width || 50}px !important;
-  height: ${({ $height }) => $height || 50}px !important;
-
+export const Emoji = styled(Button) `
+  width: ${({ $width }) => $width || 50}px !important;
+  min-width: ${({ $width }) => $width || 50}px !important;
+  height: ${({ $height }) => $height || 50}px !important;
+
   ${({ $active }) => $active &&
-    css `
-      background-color: ${globalToken?.blue1_1} !important;
-    `}
+    css `
+      background-color: ${globalToken?.blue1_1} !important;
+    `}
 `;
-export const EmojiImage = styled.img `
-  width: 100%;
-  height: 100%;
-  max-width: 30px;
+export const EmojiImage = styled.img `
+  width: 100%;
+  height: 100%;
+  max-width: 30px;
 `;
-export const EmptyEmoji = styled(Empty) `
-  min-height: 133px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
+export const EmptyEmoji = styled(Empty) `
+  min-height: 133px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
 `;

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

@@ -3,9 +3,9 @@ import styled from 'styled-components';
 // Components
 import { Popover } from '@antscorp/antsomi-ui/es/components/atoms';
 import { Tabs as TabsUI } from '@antscorp/antsomi-ui/es/components/molecules';
-export const EmojiTabs = styled(TabsUI) `
-  .antsomi-tabs-tab {
-    padding: 5.5px 20px !important;
-  }
+export const EmojiTabs = styled(TabsUI) `
+  .antsomi-tabs-tab {
+    padding: 5.5px 20px !important;
+  }
 `;
 export const EmojiPopoverStyled = styled(Popover) ``;

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

@@ -5,32 +5,32 @@ import { Flex } from '@antscorp/antsomi-ui/es/components/atoms/Flex';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 import { EMPTY_ICON_SIZE, EMPTY_WRAPPER_SIZE } from './constants';
-export const EmptyWrapper = styled(Flex) `
-  width: 100%;
-  height: 100%;
-  padding: 20px 0px;
-  text-align: center;
-
-  .title {
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 16.41px;
-    color: black;
-  }
-
-  .subTitle {
-    font-size: 12px;
-    font-weight: 600;
-    line-height: 14.06px;
-    color: black;
-  }
-
-  .description {
-    font-size: 11px;
-    font-weight: 400;
-    line-height: 13px;
-    color: ${THEME.token?.bw8};
-  }
+export const EmptyWrapper = styled(Flex) `
+  width: 100%;
+  height: 100%;
+  padding: 20px 0px;
+  text-align: center;
+
+  .title {
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 16.41px;
+    color: black;
+  }
+
+  .subTitle {
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 14.06px;
+    color: black;
+  }
+
+  .description {
+    font-size: 11px;
+    font-weight: 400;
+    line-height: 13px;
+    color: ${THEME.token?.bw8};
+  }
 `;
 EmptyWrapper.defaultProps = {
     vertical: true,
@@ -38,36 +38,36 @@ EmptyWrapper.defaultProps = {
     justify: 'center',
     gap: 20,
 };
-export const EmptyIcon = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 100%;
-  background-color: ${THEME.token?.bw2};
-  color: ${THEME.token?.bw5};
-
-  /* Handle Size */
+export const EmptyIcon = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 100%;
+  background-color: ${THEME.token?.bw2};
+  color: ${THEME.token?.bw5};
+
+  /* Handle Size */
   ${({ $size }) => {
     if ($size) {
-        return css `
-        width: ${EMPTY_WRAPPER_SIZE[$size]}px;
-        height: ${EMPTY_WRAPPER_SIZE[$size]}px;
-
-        i {
-          font-size: ${EMPTY_ICON_SIZE[$size]}px;
-        }
+        return css `
+        width: ${EMPTY_WRAPPER_SIZE[$size]}px;
+        height: ${EMPTY_WRAPPER_SIZE[$size]}px;
+
+        i {
+          font-size: ${EMPTY_ICON_SIZE[$size]}px;
+        }
       `;
     }
-}}
-
-  i {
-    color: ${THEME.token?.bw5};
-  }
+}}
+
+  i {
+    color: ${THEME.token?.bw5};
+  }
 `;
-export const ImageWrapper = styled.div `
-  img {
-    width: 100%;
-    height: auto;
-    object-fit: contain;
-  }
+export const ImageWrapper = styled.div `
+  img {
+    width: 100%;
+    height: auto;
+    object-fit: contain;
+  }
 `;

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

@@ -1,59 +1,59 @@
 import styled from 'styled-components';
-export const GradientSettingWrapper = styled.div `
-  .setting-container {
-    margin-top: 15px;
-
-    & .antsomi-select {
-      width: 112px;
-    }
-  }
-
-  & > button {
-    margin-top: 15px;
-  }
-
-  .color-setting__controller {
-    & > i {
-      align-self: flex-end;
-      margin-bottom: 10px;
-      font-size: 16px;
-      color: var(--primary-color);
-      cursor: pointer;
-    }
-
-    display: flex;
-    gap: 10px;
-
-    width: 100%;
-    margin-top: 15px;
-
-    /* Slider css selector */
-    & > div:first-child ~ div {
-      flex: 1;
-    }
-
-    /* Color picker select */
-    & > div:first-child {
-      flex-direction: column;
-      align-items: flex-start;
-
-      & .color-picker__label {
-        color: var(--text-base-color) !important;
-      }
-
-      & .antsomi-color-picker,
-      & .antsomi-popover-button {
-        margin: 0 !important;
-      }
-
-      & .antsomi-color-picker {
-        align-items: center;
-        gap: 10px;
-
-        input {
-          padding: 5px 6px;
-        }
-      }
-    }
-  }
+export const GradientSettingWrapper = styled.div `
+  .setting-container {
+    margin-top: 15px;
+
+    & .antsomi-select {
+      width: 112px;
+    }
+  }
+
+  & > button {
+    margin-top: 15px;
+  }
+
+  .color-setting__controller {
+    & > i {
+      align-self: flex-end;
+      margin-bottom: 10px;
+      font-size: 16px;
+      color: var(--primary-color);
+      cursor: pointer;
+    }
+
+    display: flex;
+    gap: 10px;
+
+    width: 100%;
+    margin-top: 15px;
+
+    /* Slider css selector */
+    & > div:first-child ~ div {
+      flex: 1;
+    }
+
+    /* Color picker select */
+    & > div:first-child {
+      flex-direction: column;
+      align-items: flex-start;
+
+      & .color-picker__label {
+        color: var(--text-base-color) !important;
+      }
+
+      & .antsomi-color-picker,
+      & .antsomi-popover-button {
+        margin: 0 !important;
+      }
+
+      & .antsomi-color-picker {
+        align-items: center;
+        gap: 10px;
+
+        input {
+          padding: 5px 6px;
+        }
+      }
+    }
+  }
 `;