@antscorp/antsomi-ui 2.0.107 → 2.0.109

package/es/assets/svg/mobile-frame.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="416.004" height="713" viewBox="0 0 416.004 713">
-  <path id="mobile_frame" data-name="mobile frame" d="M17657,3124a32.975,32.975,0,0,1-33-33V2444a32.977,32.977,0,0,1,33-33H18004a32.97,32.97,0,0,1,33,33v122.032a3.5,3.5,0,0,1,3,3.464v110a3.5,3.5,0,0,1-3,3.469v31.07a3.5,3.5,0,0,1,3,3.464v44a3.5,3.5,0,0,1-3,3.464V3091a32.97,32.97,0,0,1-33,33Zm-22-681v618a21.022,21.022,0,0,0,21,21h349.008a21.022,21.022,0,0,0,21-21V2443a21.022,21.022,0,0,0-21-21H17656A21.022,21.022,0,0,0,17635,2443Z" transform="translate(-17623.998 -2411)" fill="black"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="416.004" height="713" viewBox="0 0 416.004 713">
+  <path id="mobile_frame" data-name="mobile frame" d="M17657,3124a32.975,32.975,0,0,1-33-33V2444a32.977,32.977,0,0,1,33-33H18004a32.97,32.97,0,0,1,33,33v122.032a3.5,3.5,0,0,1,3,3.464v110a3.5,3.5,0,0,1-3,3.469v31.07a3.5,3.5,0,0,1,3,3.464v44a3.5,3.5,0,0,1-3,3.464V3091a32.97,32.97,0,0,1-33,33Zm-22-681v618a21.022,21.022,0,0,0,21,21h349.008a21.022,21.022,0,0,0,21-21V2443a21.022,21.022,0,0,0-21-21H17656A21.022,21.022,0,0,0,17635,2443Z" transform="translate(-17623.998 -2411)" fill="black"/>
+</svg>

package/es/assets/svg/warning-icon.svg

@@ -1,5 +1,5 @@
-<svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5.2658 1.37667C5.33497 1.20313 5.44007 1.05749 5.56949 0.955794C5.69891 0.8541 5.84765 0.800293 5.99933 0.800293C6.15101 0.800293 6.29975 0.8541 6.42917 0.955794C6.55859 1.05749 6.66369 1.20313 6.73286 1.37667L11.7575 10.9358C12.2983 11.9645 11.9042 12.8003 10.8773 12.8003H1.12339C0.0964559 12.8003 -0.299647 11.9688 0.243827 10.9358L5.26847 1.37667H5.2658Z" fill="#F5F500"/>
-<rect x="5" y="3.80029" width="2" height="5" rx="1" fill="#595959"/>
-<rect x="5" y="9.80029" width="2" height="2" rx="1" fill="#595959"/>
-</svg>
+<svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.2658 1.37667C5.33497 1.20313 5.44007 1.05749 5.56949 0.955794C5.69891 0.8541 5.84765 0.800293 5.99933 0.800293C6.15101 0.800293 6.29975 0.8541 6.42917 0.955794C6.55859 1.05749 6.66369 1.20313 6.73286 1.37667L11.7575 10.9358C12.2983 11.9645 11.9042 12.8003 10.8773 12.8003H1.12339C0.0964559 12.8003 -0.299647 11.9688 0.243827 10.9358L5.26847 1.37667H5.2658Z" fill="#F5F500"/>
+<rect x="5" y="3.80029" width="2" height="5" rx="1" fill="#595959"/>
+<rect x="5" y="9.80029" width="2" height="2" rx="1" fill="#595959"/>
+</svg>

package/es/components/atoms/Alert/Alert.js

@@ -5,34 +5,34 @@ import { Alert as AntdAlert } from 'antd';
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 import clsx from 'clsx';
 import { WarningIcon } from '@antscorp/antsomi-ui/es/components/icons';
-export const AlertStyled = styled(AntdAlert) `
-  padding: 15px !important;
-  font-size: ${globalToken?.fontSize}px;
-  box-sizing: border-box;
-  gap: 15px;
-
-  /* .antsomi-alert-message {
-    color: ${globalToken?.colorTextBase} !important;
-  } */
-
-  &.antsomi-alert-info {
-    background-color: ${globalToken?.bw1};
-    border-color: ${globalToken?.blue1};
-    svg {
-      color: ${globalToken?.blue7};
-    }
-  }
-
-  &.antsomi-alert-outline {
-    background-color: transparent;
-
-    &.antsomi-alert-warning {
-      border-color: ${globalToken?.orange6} !important;
-      svg {
-        margin: 0;
-      }
-    }
-  }
+export const AlertStyled = styled(AntdAlert) `
+  padding: 15px !important;
+  font-size: ${globalToken?.fontSize}px;
+  box-sizing: border-box;
+  gap: 15px;
+
+  /* .antsomi-alert-message {
+    color: ${globalToken?.colorTextBase} !important;
+  } */
+
+  &.antsomi-alert-info {
+    background-color: ${globalToken?.bw1};
+    border-color: ${globalToken?.blue1};
+    svg {
+      color: ${globalToken?.blue7};
+    }
+  }
+
+  &.antsomi-alert-outline {
+    background-color: transparent;
+
+    &.antsomi-alert-warning {
+      border-color: ${globalToken?.orange6} !important;
+      svg {
+        margin: 0;
+      }
+    }
+  }
 `;
 export const Alert = props => {
     const { variant = 'default', className, icon, type, ...restProps } = props;

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

@@ -1,20 +1,20 @@
 // Libraries
 import styled from 'styled-components';
 import { Typography } from '@antscorp/antsomi-ui/es/components';
-export const ContentEditableWrapper = styled(Typography.Text) `
-  outline-width: 0;
-  caret-color: transparent;
-  border-radius: 4px;
-  display: inline-flex !important;
-  align-items: center !important;
-  word-break: ${props => (props.$breakWord ? 'break-word' : 'normal')};
-
-  &.editable {
-    outline: 2px solid var(--text-link-color);
-    outline-offset: -2px;
-    caret-color: unset;
-  }
-
-  padding: 4px;
-  /* font-weight: bold; */
+export const ContentEditableWrapper = styled(Typography.Text) `
+  outline-width: 0;
+  caret-color: transparent;
+  border-radius: 4px;
+  display: inline-flex !important;
+  align-items: center !important;
+  word-break: ${props => (props.$breakWord ? 'break-word' : 'normal')};
+
+  &.editable {
+    outline: 2px solid var(--text-link-color);
+    outline-offset: -2px;
+    caret-color: unset;
+  }
+
+  padding: 4px;
+  /* font-weight: bold; */
 `;

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

@@ -2,39 +2,39 @@
 import styled from 'styled-components';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
-export const Wrapper = styled.div `
-  &.--horizontal {
-    border-top-width: 1px;
-    border-color: '#e3eef1';
-    width: 100%;
-    margin-top: 20px;
-    margin-bottom: 20px;
-  }
-
-  &.--vertical {
-    border-right-width: 1px;
-    border-color: '#e3eef1';
-    min-height: 30px;
-    width: max-content;
-    margin-left: 14px;
-    margin-right: 14px;
-  }
-
-  &.--dot {
-    border-style: dotted;
-    border-color: ${THEME.token?.accent3};
-
-    &.--vertical {
-      border-right-width: 2px;
-    }
-  }
-
-  &.--dashed {
-    border-style: dashed;
-    border-color: ${THEME.token?.accent3};
-
-    &.--vertical {
-      border-right-width: 2px;
-    }
-  }
+export const Wrapper = styled.div `
+  &.--horizontal {
+    border-top-width: 1px;
+    border-color: '#e3eef1';
+    width: 100%;
+    margin-top: 20px;
+    margin-bottom: 20px;
+  }
+
+  &.--vertical {
+    border-right-width: 1px;
+    border-color: '#e3eef1';
+    min-height: 30px;
+    width: max-content;
+    margin-left: 14px;
+    margin-right: 14px;
+  }
+
+  &.--dot {
+    border-style: dotted;
+    border-color: ${THEME.token?.accent3};
+
+    &.--vertical {
+      border-right-width: 2px;
+    }
+  }
+
+  &.--dashed {
+    border-style: dashed;
+    border-color: ${THEME.token?.accent3};
+
+    &.--vertical {
+      border-right-width: 2px;
+    }
+  }
 `;

package/es/components/atoms/Icon/index.js

@@ -5,29 +5,29 @@ import AntsIcon from '@antscorp/icons';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 const DraftAntsIcon = AntsIcon;
-export const Icon = styled(DraftAntsIcon) `
-  ${p => (p.style ? css `style` : null)}
+export const Icon = styled(DraftAntsIcon) `
+  ${p => (p.style ? css `style` : null)}
   ${p => p.size
-    ? css `
-          width: ${p.width || p.size}px !important;
-          height: ${p.height || p.size}px !important;
-          font-size: ${p.size}px !important;
+    ? css `
+          width: ${p.width || p.size}px !important;
+          height: ${p.height || p.size}px !important;
+          font-size: ${p.size}px !important;
         `
-    : css `
-          font-size: 20px;
-          line-height: 1;
-        `}
-
+    : css `
+          font-size: 20px;
+          line-height: 1;
+        `}
+
   ${p => p.color
-    ? css `
-          color: ${p.color} !important;
+    ? css `
+          color: ${p.color} !important;
         `
-    : null}
-
+    : null}
+
   ${p => p.disabled
-    ? css `
-          cursor: not-allowed !important;
-          color: ${THEME.token?.colorTextDisabled} !important;
+    ? css `
+          cursor: not-allowed !important;
+          color: ${THEME.token?.colorTextDisabled} !important;
         `
-    : null}
+    : null}
 `;

package/es/components/atoms/Iframe/Iframe.js

@@ -6,9 +6,9 @@ import { useEffect, useRef } from 'react';
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 // Styled
 import styled from 'styled-components';
-const StyledIframe = styled.iframe `
-  border: none;
-  opacity: 0;
+const StyledIframe = styled.iframe `
+  border: none;
+  opacity: 0;
 `;
 export const Iframe = props => {
     const { children, className, src, srcDoc, ...restProps } = props;
@@ -27,21 +27,21 @@ export const Iframe = props => {
         const handleLoad = () => {
             const iframeDoc = iframe.contentDocument || iframe?.contentWindow?.document;
             const style = document.createElement('style');
-            style.innerHTML = `
-         ::-webkit-scrollbar {
-            background-color: transparent;
-            width: 4px;
-          }
-          ::-webkit-scrollbar-thumb {
-            background-color: transparent;
-            border-radius: 4px;
-          }
-
-          *:hover {
-            &::-webkit-scrollbar-thumb {
-              background-color: ${globalToken?.gray5};
-            }
-          }
+            style.innerHTML = `
+         ::-webkit-scrollbar {
+            background-color: transparent;
+            width: 4px;
+          }
+          ::-webkit-scrollbar-thumb {
+            background-color: transparent;
+            border-radius: 4px;
+          }
+
+          *:hover {
+            &::-webkit-scrollbar-thumb {
+              background-color: ${globalToken?.gray5};
+            }
+          }
       `;
             if (iframeDoc && iframeRef.current) {
                 iframeDoc.head.appendChild(style);

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

@@ -5,113 +5,113 @@ import { Input as InputAntd } from 'antd';
 import { Button } from '../Button';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
-export const StyledInput = styled(InputAntd) `
-  /* height: 30px;
-  height: 30px;
-  border-style: none;
-  border-radius: 0px;
-  padding-left: 5px;
-  padding-right: 5px;
-  font-family: 'Roboto';
-  font-size: ${THEME.token?.fontSize}px;
-  --tw-shadow: 0 1px 0 0 #e0e0e0;
-  --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
-    var(--tw-shadow);
-
-  &::placeholder {
-    color: ${THEME.token?.accent5};
-  }
-
-  &:hover {
-    background-color: ${THEME.token?.blue0};
-  }
-
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-
+export const StyledInput = styled(InputAntd) `
+  /* height: 30px;
+  height: 30px;
+  border-style: none;
+  border-radius: 0px;
+  padding-left: 5px;
+  padding-right: 5px;
+  font-family: 'Roboto';
+  font-size: ${THEME.token?.fontSize}px;
+  --tw-shadow: 0 1px 0 0 #e0e0e0;
+  --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
+
+  &::placeholder {
+    color: ${THEME.token?.accent5};
+  }
+
+  &:hover {
+    background-color: ${THEME.token?.blue0};
+  }
+
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+
   ${({ noborder }) => noborder &&
-    css `
-      --tw-shadow: 0 0 #0000;
-      --tw-shadow-colored: 0 0 #0000;
-      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
-        var(--tw-shadow);
-      padding-left: 0;
-      padding-right: 0;
-    `}
-
-  &:active,
-  &:focus {
-    background-color: ${THEME.token?.blue0};
-    --tw-shadow: 0 1px 0 0 #194e8d;
-    --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
-      var(--tw-shadow);
-  }
-
-  &:disabled {
-    background-color: ${THEME.token?.accent1};
-    color: ${THEME.token?.accent5};
-    --tw-shadow: 0 1px 0 0 #e0e0e0;
-    --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
-      var(--tw-shadow);
-  } */
+    css `
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-colored: 0 0 #0000;
+      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+        var(--tw-shadow);
+      padding-left: 0;
+      padding-right: 0;
+    `}
+
+  &:active,
+  &:focus {
+    background-color: ${THEME.token?.blue0};
+    --tw-shadow: 0 1px 0 0 #194e8d;
+    --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+      var(--tw-shadow);
+  }
+
+  &:disabled {
+    background-color: ${THEME.token?.accent1};
+    color: ${THEME.token?.accent5};
+    --tw-shadow: 0 1px 0 0 #e0e0e0;
+    --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+      var(--tw-shadow);
+  } */
 `;
-export const TextArea = styled(InputAntd.TextArea) `
-  height: 30px;
-  border-style: none;
-  border-radius: 0px;
-  padding-left: 5px;
-  padding-right: 5px;
-  font-family: 'Roboto';
-  font-size: ${THEME.token?.fontSize}px;
-  --tw-shadow: 0 1px 0 0 #e0e0e0;
-  --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
-    var(--tw-shadow);
-
-  &::placeholder {
-    color: ${THEME.token?.accent5};
-  }
-
-  &:hover {
-    background-color: ${THEME.token?.blue0};
-  }
-
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-
-  &:active,
-  &:focus {
-    background-color: ${THEME.token?.blue0};
-    --tw-shadow: 0 1px 0 0 #194e8d;
-    --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
-      var(--tw-shadow);
-  }
-
-  &:disabled {
-    background-color: ${THEME.token?.accent1};
-    color: ${THEME.token?.accent5};
-    --tw-shadow: 0 1px 0 0 #e0e0e0;
-    --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
-      var(--tw-shadow);
-  }
-
+export const TextArea = styled(InputAntd.TextArea) `
+  height: 30px;
+  border-style: none;
+  border-radius: 0px;
+  padding-left: 5px;
+  padding-right: 5px;
+  font-family: 'Roboto';
+  font-size: ${THEME.token?.fontSize}px;
+  --tw-shadow: 0 1px 0 0 #e0e0e0;
+  --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
+
+  &::placeholder {
+    color: ${THEME.token?.accent5};
+  }
+
+  &:hover {
+    background-color: ${THEME.token?.blue0};
+  }
+
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+
+  &:active,
+  &:focus {
+    background-color: ${THEME.token?.blue0};
+    --tw-shadow: 0 1px 0 0 #194e8d;
+    --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+      var(--tw-shadow);
+  }
+
+  &:disabled {
+    background-color: ${THEME.token?.accent1};
+    color: ${THEME.token?.accent5};
+    --tw-shadow: 0 1px 0 0 #e0e0e0;
+    --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+      var(--tw-shadow);
+  }
+
   ${props => props.showBorder &&
-    css `
-      border: 1px solid #e0e0e0;
-    `}
+    css `
+      border: 1px solid #e0e0e0;
+    `}
 `;
-export const StyledSearchInput = styled(InputAntd) `
-  &.antsomi-input-affix-wrapper:hover > input.antsomi-input {
-    background-color: transparent;
-  }
+export const StyledSearchInput = styled(InputAntd) `
+  &.antsomi-input-affix-wrapper:hover > input.antsomi-input {
+    background-color: transparent;
+  }
 `;
-export const StyledIconWrapper = styled(Button) `
-  padding: 4px;
+export const StyledIconWrapper = styled(Button) `
+  padding: 4px;
 `;