@antscorp/antsomi-ui 2.0.101 → 2.0.102

package/es/components/atoms/Steps/styled.js

@@ -8,250 +8,250 @@ const STEP_SIZE = {
     SMALL: 24,
     DEFAULT: 32,
 };
-export const SelectedIcon = styled.div `
-  border: 1px solid #b8cfe6;
-  border-radius: 100%;
-  font-size: 14px;
-  line-height: 23px;
-  color: ${THEME.token?.colorPrimary};
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+export const SelectedIcon = styled.div `
+  border: 1px solid #b8cfe6;
+  border-radius: 100%;
+  font-size: 14px;
+  line-height: 23px;
+  color: ${THEME.token?.colorPrimary};
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 `;
-export const ErrorIcon = styled(Flex) `
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  background-color: ${colorError};
-  width: 100%;
-  height: 100%;
-  border-radius: 100%;
-  font-size: 14px;
+export const ErrorIcon = styled(Flex) `
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  background-color: ${colorError};
+  width: 100%;
+  height: 100%;
+  border-radius: 100%;
+  font-size: 14px;
 `;
-export const StepsWrapper = styled(Steps) `
-  &.save-highest-step {
-    // * Steps Default
-    &.antsomi-steps:not(.antsomi-steps-dot) {
-      &.antsomi-steps-small
-        .antsomi-steps-item
-        .antsomi-steps-item-container
-        .antsomi-steps-item-icon {
-        width: ${STEP_SIZE.SMALL}px;
-        height: ${STEP_SIZE.SMALL}px;
-      }
-
-      .antsomi-steps-item {
-        & > .antsomi-steps-item-container {
-          & > .antsomi-steps-item-icon {
-            box-sizing: border-box;
-            border-radius: 100%;
-            font-size: 14px;
-            font-weight: bold;
-            display: inline-flex;
-            justify-content: center;
-            align-items: center;
-            width: ${STEP_SIZE.DEFAULT}px;
-            height: ${STEP_SIZE.DEFAULT}px;
-
-            .antsomi-steps-icon {
-              color: white;
-              width: 100%;
-              height: 100%;
-              display: flex;
-              line-height: 23px;
-              top: 0px;
-              justify-content: center;
-              align-items: center;
-            }
-          }
-
-          & > .antsomi-steps-item-content > .antsomi-steps-item-title::after {
-            height: 2px;
-            background-color: ${THEME.token?.bw6};
-          }
-
-          & > .antsomi-steps-item-tail::after {
-            width: 2px;
-            background-color: ${THEME.token?.bw6};
-          }
-        }
-
-        &:not(.antsomi-steps-item-active) > .antsomi-steps-item-container[role='button'] {
-          &:hover {
-            .antsomi-steps-item-icon {
-              background-color: white;
-            }
-            .antsomi-steps-item-content {
-              color: ${THEME.token?.colorPrimary};
-            }
-          }
-        }
-
-        &.highest-step {
-          .antsomi-steps-item-container {
-            & > .antsomi-steps-item-content > .antsomi-steps-item-title::after,
-            & > .antsomi-steps-item-tail::after {
-              background-color: ${THEME.token?.bw6} !important;
-            }
-          }
-        }
-
-        &.antsomi-steps-item-selectable {
-          & > .antsomi-steps-item-container {
-            & > .antsomi-steps-item-content .antsomi-steps-item-title:after {
-              background-color: ${THEME.token?.colorPrimary};
-            }
-
-            .antsomi-steps-item-tail::after {
-              background-color: ${THEME.token?.colorPrimary};
-            }
-          }
-        }
-
-        &.antsomi-steps-item-active {
-          & > .antsomi-steps-item-container {
-            & > .antsomi-steps-item-content > .antsomi-steps-item-title {
-              &::after {
-                ${({ $isReactivate }) => $isReactivate ? `background-color: ${THEME.token?.colorPrimary}` : ''};
-              }
-            }
-
-            & > .antsomi-steps-item-tail {
-              &::after {
-                ${({ $isReactivate }) => $isReactivate ? `background-color: ${THEME.token?.colorPrimary}` : ''};
-              }
-            }
-          }
-        }
-
-        &.antsomi-steps-next-error {
-          > .antsomi-steps-item-container
-            > .antsomi-steps-item-content
-            > .antsomi-steps-item-title::after {
-            background-color: ${red6} !important;
-          }
-        }
-
-        &.antsomi-steps-item-error {
-          > .antsomi-steps-item-container {
-            > .antsomi-steps-item-icon .antsomi-steps-icon {
-              color: ${bw0} !important;
-            }
-
-            > .antsomi-steps-item-content .antsomi-steps-item-title {
-              color: ${colorError} !important;
-            }
-          }
-        }
-      }
-    }
-
-    // * Steps dot
-    &.antsomi-steps.antsomi-steps-dot {
-      &.antsomi-steps-horizontal .antsomi-steps-item .antsomi-steps-item-container {
-        & > .antsomi-steps-item-tail::after {
-          height: 2px;
-        }
-      }
-
-      &.antsomi-steps-vertical .antsomi-steps-item .antsomi-steps-item-container {
-        & > .antsomi-steps-item-tail::after {
-          width: 2px;
-        }
-      }
-
-      &.antsomi-steps-horizontal .antsomi-steps-item-tail::after,
-      &.antsomi-steps-vertical .antsomi-steps-item-tail::after {
-        background-color: ${THEME.token?.bw6};
-      }
-
-      .antsomi-steps-item-selectable > .antsomi-steps-item-container {
-        & > .antsomi-steps-item-tail::after {
-          background-color: ${THEME.token?.colorPrimary};
-        }
-      }
-
-      .antsomi-steps-item-process.antsomi-steps-item-active {
-        & > .antsomi-steps-item-container {
-          & > .antsomi-steps-item-tail::after {
-            ${({ $isReactivate }) => $isReactivate ? `background-color: ${THEME.token?.colorPrimary}` : ''};
-          }
-        }
-      }
-
-      .highest-step {
-        .antsomi-steps-item-container > .antsomi-steps-item-tail::after {
-          background-color: ${THEME.token?.bw6} !important;
-        }
-      }
-    }
-
-    // * Common
-    &.antsomi-steps {
-      .antsomi-steps-item-title {
-        font-size: 16px;
-        line-height: ${STEP_SIZE.DEFAULT}px;
-      }
-
-      .antsomi-steps-item-description {
-        font-size: 14px;
-      }
-
-      &.antsomi-steps-small {
-        .antsomi-steps-item-title {
-          font-size: 14px;
-          line-height: ${STEP_SIZE.SMALL}px;
-        }
-      }
-
-      .antsomi-steps-item-wait {
-        color: ${THEME.token?.bw7};
-
-        & > .antsomi-steps-item-container > .antsomi-steps-item-icon {
-          background-color: ${THEME.token?.bw6};
-        }
-
-        &:not(.antsomi-steps-item-error)
-          > .antsomi-steps-item-container
-          > .antsomi-steps-item-content {
-          .antsomi-steps-item-title,
-          .antsomi-steps-item-description {
-            color: inherit;
-          }
-        }
-      }
-
-      .antsomi-steps-item-process.antsomi-steps-item-active {
-        font-weight: bold;
-        color: ${THEME.token?.colorPrimary};
-
-        & > .antsomi-steps-item-container {
-          & > .antsomi-steps-item-content > .antsomi-steps-item-title,
-          & > .antsomi-steps-item-content > .antsomi-steps-item-description {
-            color: inherit;
-          }
-        }
-      }
-
-      .antsomi-steps-item-selectable {
-        color: black;
-
-        & > .antsomi-steps-item-container {
-          & > .antsomi-steps-item-icon {
-            color: ${THEME.token?.colorPrimary};
-          }
-
-          & > .antsomi-steps-item-content {
-            .antsomi-steps-item-title,
-            .antsomi-steps-item-description {
-              color: inherit;
-            }
-          }
-        }
-      }
-    }
-  }
+export const StepsWrapper = styled(Steps) `
+  &.save-highest-step {
+    // * Steps Default
+    &.antsomi-steps:not(.antsomi-steps-dot) {
+      &.antsomi-steps-small
+        .antsomi-steps-item
+        .antsomi-steps-item-container
+        .antsomi-steps-item-icon {
+        width: ${STEP_SIZE.SMALL}px;
+        height: ${STEP_SIZE.SMALL}px;
+      }
+
+      .antsomi-steps-item {
+        & > .antsomi-steps-item-container {
+          & > .antsomi-steps-item-icon {
+            box-sizing: border-box;
+            border-radius: 100%;
+            font-size: 14px;
+            font-weight: bold;
+            display: inline-flex;
+            justify-content: center;
+            align-items: center;
+            width: ${STEP_SIZE.DEFAULT}px;
+            height: ${STEP_SIZE.DEFAULT}px;
+
+            .antsomi-steps-icon {
+              color: white;
+              width: 100%;
+              height: 100%;
+              display: flex;
+              line-height: 23px;
+              top: 0px;
+              justify-content: center;
+              align-items: center;
+            }
+          }
+
+          & > .antsomi-steps-item-content > .antsomi-steps-item-title::after {
+            height: 2px;
+            background-color: ${THEME.token?.bw6};
+          }
+
+          & > .antsomi-steps-item-tail::after {
+            width: 2px;
+            background-color: ${THEME.token?.bw6};
+          }
+        }
+
+        &:not(.antsomi-steps-item-active) > .antsomi-steps-item-container[role='button'] {
+          &:hover {
+            .antsomi-steps-item-icon {
+              background-color: white;
+            }
+            .antsomi-steps-item-content {
+              color: ${THEME.token?.colorPrimary};
+            }
+          }
+        }
+
+        &.highest-step {
+          .antsomi-steps-item-container {
+            & > .antsomi-steps-item-content > .antsomi-steps-item-title::after,
+            & > .antsomi-steps-item-tail::after {
+              background-color: ${THEME.token?.bw6} !important;
+            }
+          }
+        }
+
+        &.antsomi-steps-item-selectable {
+          & > .antsomi-steps-item-container {
+            & > .antsomi-steps-item-content .antsomi-steps-item-title:after {
+              background-color: ${THEME.token?.colorPrimary};
+            }
+
+            .antsomi-steps-item-tail::after {
+              background-color: ${THEME.token?.colorPrimary};
+            }
+          }
+        }
+
+        &.antsomi-steps-item-active {
+          & > .antsomi-steps-item-container {
+            & > .antsomi-steps-item-content > .antsomi-steps-item-title {
+              &::after {
+                ${({ $isReactivate }) => $isReactivate ? `background-color: ${THEME.token?.colorPrimary}` : ''};
+              }
+            }
+
+            & > .antsomi-steps-item-tail {
+              &::after {
+                ${({ $isReactivate }) => $isReactivate ? `background-color: ${THEME.token?.colorPrimary}` : ''};
+              }
+            }
+          }
+        }
+
+        &.antsomi-steps-next-error {
+          > .antsomi-steps-item-container
+            > .antsomi-steps-item-content
+            > .antsomi-steps-item-title::after {
+            background-color: ${red6} !important;
+          }
+        }
+
+        &.antsomi-steps-item-error {
+          > .antsomi-steps-item-container {
+            > .antsomi-steps-item-icon .antsomi-steps-icon {
+              color: ${bw0} !important;
+            }
+
+            > .antsomi-steps-item-content .antsomi-steps-item-title {
+              color: ${colorError} !important;
+            }
+          }
+        }
+      }
+    }
+
+    // * Steps dot
+    &.antsomi-steps.antsomi-steps-dot {
+      &.antsomi-steps-horizontal .antsomi-steps-item .antsomi-steps-item-container {
+        & > .antsomi-steps-item-tail::after {
+          height: 2px;
+        }
+      }
+
+      &.antsomi-steps-vertical .antsomi-steps-item .antsomi-steps-item-container {
+        & > .antsomi-steps-item-tail::after {
+          width: 2px;
+        }
+      }
+
+      &.antsomi-steps-horizontal .antsomi-steps-item-tail::after,
+      &.antsomi-steps-vertical .antsomi-steps-item-tail::after {
+        background-color: ${THEME.token?.bw6};
+      }
+
+      .antsomi-steps-item-selectable > .antsomi-steps-item-container {
+        & > .antsomi-steps-item-tail::after {
+          background-color: ${THEME.token?.colorPrimary};
+        }
+      }
+
+      .antsomi-steps-item-process.antsomi-steps-item-active {
+        & > .antsomi-steps-item-container {
+          & > .antsomi-steps-item-tail::after {
+            ${({ $isReactivate }) => $isReactivate ? `background-color: ${THEME.token?.colorPrimary}` : ''};
+          }
+        }
+      }
+
+      .highest-step {
+        .antsomi-steps-item-container > .antsomi-steps-item-tail::after {
+          background-color: ${THEME.token?.bw6} !important;
+        }
+      }
+    }
+
+    // * Common
+    &.antsomi-steps {
+      .antsomi-steps-item-title {
+        font-size: 16px;
+        line-height: ${STEP_SIZE.DEFAULT}px;
+      }
+
+      .antsomi-steps-item-description {
+        font-size: 14px;
+      }
+
+      &.antsomi-steps-small {
+        .antsomi-steps-item-title {
+          font-size: 14px;
+          line-height: ${STEP_SIZE.SMALL}px;
+        }
+      }
+
+      .antsomi-steps-item-wait {
+        color: ${THEME.token?.bw7};
+
+        & > .antsomi-steps-item-container > .antsomi-steps-item-icon {
+          background-color: ${THEME.token?.bw6};
+        }
+
+        &:not(.antsomi-steps-item-error)
+          > .antsomi-steps-item-container
+          > .antsomi-steps-item-content {
+          .antsomi-steps-item-title,
+          .antsomi-steps-item-description {
+            color: inherit;
+          }
+        }
+      }
+
+      .antsomi-steps-item-process.antsomi-steps-item-active {
+        font-weight: bold;
+        color: ${THEME.token?.colorPrimary};
+
+        & > .antsomi-steps-item-container {
+          & > .antsomi-steps-item-content > .antsomi-steps-item-title,
+          & > .antsomi-steps-item-content > .antsomi-steps-item-description {
+            color: inherit;
+          }
+        }
+      }
+
+      .antsomi-steps-item-selectable {
+        color: black;
+
+        & > .antsomi-steps-item-container {
+          & > .antsomi-steps-item-icon {
+            color: ${THEME.token?.colorPrimary};
+          }
+
+          & > .antsomi-steps-item-content {
+            .antsomi-steps-item-title,
+            .antsomi-steps-item-description {
+              color: inherit;
+            }
+          }
+        }
+      }
+    }
+  }
 `;

package/es/components/atoms/Switch/styled.js

@@ -1,60 +1,60 @@
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 import { Switch } from 'antd';
 import styled from 'styled-components';
-export const StyledSwitch = styled(Switch) `
-  &.antsomi-switch {
-    border: 2px solid var(--switch-color);
-
-    &.antsomi-switch-checked {
-      background: var(--switch-color);
-
-      > .antsomi-switch-handle {
-        &::before {
-          background-color: ${THEME.token?.bw0};
-        }
-      }
-
-      .antsomi-switch-inner {
-        padding-inline-start: 4px;
-        padding-inline-end: 18px;
-      }
-
-      &:hover:not(.antsomi-switch-disabled) {
-        background-color: var(--switch-color);
-      }
-    }
-
-    &.antsomi-switch-disabled {
-      background: ${THEME.token?.bw0};
-      border-color: ${THEME.token?.colorTextPlaceholder};
-
-      > .antsomi-switch-handle {
-        &::before {
-          background-color: ${THEME.token?.colorTextPlaceholder};
-        }
-      }
-
-      &.antsomi-switch-checked {
-        background: ${THEME.token?.colorTextPlaceholder};
-        border-color: ${THEME.token?.colorTextPlaceholder};
-
-        > .antsomi-switch-handle {
-          &::before {
-            background-color: ${THEME.token?.bw0};
-          }
-        }
-      }
-    }
-
-    .antsomi-switch-handle {
-      &::before {
-        background-color: var(--switch-color);
-      }
-    }
-
-    .antsomi-switch-inner {
-      padding-inline-start: 4px;
-      padding-inline-end: 18px;
-    }
-  }
+export const StyledSwitch = styled(Switch) `
+  &.antsomi-switch {
+    border: 2px solid var(--switch-color);
+
+    &.antsomi-switch-checked {
+      background: var(--switch-color);
+
+      > .antsomi-switch-handle {
+        &::before {
+          background-color: ${THEME.token?.bw0};
+        }
+      }
+
+      .antsomi-switch-inner {
+        padding-inline-start: 4px;
+        padding-inline-end: 18px;
+      }
+
+      &:hover:not(.antsomi-switch-disabled) {
+        background-color: var(--switch-color);
+      }
+    }
+
+    &.antsomi-switch-disabled {
+      background: ${THEME.token?.bw0};
+      border-color: ${THEME.token?.colorTextPlaceholder};
+
+      > .antsomi-switch-handle {
+        &::before {
+          background-color: ${THEME.token?.colorTextPlaceholder};
+        }
+      }
+
+      &.antsomi-switch-checked {
+        background: ${THEME.token?.colorTextPlaceholder};
+        border-color: ${THEME.token?.colorTextPlaceholder};
+
+        > .antsomi-switch-handle {
+          &::before {
+            background-color: ${THEME.token?.bw0};
+          }
+        }
+      }
+    }
+
+    .antsomi-switch-handle {
+      &::before {
+        background-color: var(--switch-color);
+      }
+    }
+
+    .antsomi-switch-inner {
+      padding-inline-start: 4px;
+      padding-inline-end: 18px;
+    }
+  }
 `;

package/es/components/atoms/Tag/Tag.js

@@ -18,17 +18,17 @@ import { translate, translations } from '@antscorp/antsomi-ui/es/locales';
 import { searchStringQuery } from '@antscorp/antsomi-ui/es/utils';
 import { Scrollbars } from '../Scrollbars';
 const { Text } = Typography;
-const CloseBtn = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
-  background-color: #fff;
-  border-radius: 100%;
+const CloseBtn = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  background-color: #fff;
+  border-radius: 100%;
 `;
-const AllTagsContainer = styled(Flex) `
-  padding: 10px;
+const AllTagsContainer = styled(Flex) `
+  padding: 10px;
 `;
 const OriginTag = props => {
     const { closable = false, closeIcon = (_jsx(CloseBtn, { children: _jsx(CloseIcon, { size: 14, color: globalToken?.colorPrimary }) })), ...restOfProps } = props;