@antscorp/antsomi-ui 2.0.107 → 2.0.109

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

@@ -2,49 +2,49 @@
 import styled, { css } from 'styled-components';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
-export const TextWrapper = styled.div `
-  color: ${THEME.token?.colorTextBase};
-  font-size: ${THEME.token?.fontSize}px;
-  font-family: Roboto;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-
+export const TextWrapper = styled.div `
+  color: ${THEME.token?.colorTextBase};
+  font-size: ${THEME.token?.fontSize}px;
+  font-family: Roboto;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+
   ${p => {
     switch (p.size) {
         case 'small':
-            return css `
-          font-size: ${THEME.token?.fontSize}px;
+            return css `
+          font-size: ${THEME.token?.fontSize}px;
         `;
         case 'medium':
-            return css `
-          font-size: ${THEME.token?.fontSizeMd}px;
+            return css `
+          font-size: ${THEME.token?.fontSizeMd}px;
         `;
         case 'large':
-            return css `
-          font-size: ${THEME.token?.fontSizeLg}px;
+            return css `
+          font-size: ${THEME.token?.fontSizeLg}px;
         `;
         default:
-            return css `
-          font-size: ${p.size}px;
+            return css `
+          font-size: ${p.size}px;
         `;
     }
-}}
-
-  &.--disabled {
-    color: ${THEME.token?.colorTextDisabled};
-    pointer-events: none;
-  }
-
-  &.--secondary {
-    color: ${THEME.token?.colorIcon};
-  }
-
-  &.--error {
-    color: ${THEME.token?.red6};
-  }
-
-  &.--warning {
-    color: ${THEME.token?.colorWarning};
-  }
+}}
+
+  &.--disabled {
+    color: ${THEME.token?.colorTextDisabled};
+    pointer-events: none;
+  }
+
+  &.--secondary {
+    color: ${THEME.token?.colorIcon};
+  }
+
+  &.--error {
+    color: ${THEME.token?.red6};
+  }
+
+  &.--warning {
+    color: ${THEME.token?.colorWarning};
+  }
 `;

package/es/components/icons/DomainManagementIcon.js

@@ -6,5 +6,5 @@ export const DomainManagementIcon = forwardRef((props, ref) => {
     return (_jsxs("svg", { 
         // width="29"
         // height="29"
-        viewBox: "0 0 29 29", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...props, ref: ref, width: width, height: height, children: [_jsx("path", { d: "M15.7,15.7l1.9,0.8c1.6-1.8,2.4-4.1,2.4-6.5c0-2-0.6-3.9-1.7-5.6c-1.1-1.6-2.7-2.9-4.5-3.7C12,0,10-0.2,8,0.2\n\tC6.1,0.6,4.3,1.5,2.9,2.9C1.5,4.3,0.6,6.1,0.2,8c-0.4,2-0.2,4,0.6,5.8s2,3.4,3.7,4.5C6.1,19.4,8,20,10,20c2.3,0,4.7-0.9,6.4-2.4\n\tL15.7,15.7z M5.5,16.5c-1.3-0.9-2.3-2.2-2.9-3.7C2.1,11.3,2,9.6,2.4,8.1C3.1,8.7,4.3,10,4.3,10l-0.5,2.5l1.8,1.6\n\tC5.6,14.9,5.6,15.7,5.5,16.5z M13.8,7.5c-0.5,0.3-1,0.7-1.3,1.3C11.9,11,14.7,11.9,15,12c0,0,0,3.2,0,4.1c-1,0.9-2.3,1.5-3.6,1.7\n\tc-1.3,0.2-2.7,0.1-4-0.3c0.3-0.6,0.7-1.5,1-2.3c0.2-0.5,0.4-0.9,0.5-1.2c0.3-0.4,0.4-0.9,0.5-1.4c0.1-0.5,0-1-0.1-1.5\n\tC8.9,9.9,7.4,8.4,6.6,8.4C6.3,8.4,6,8.6,5.8,8.8S5.5,9.3,5.5,9.6C5.2,9,4.9,8.4,4.5,7.9c0,0,2.2-0.9,2.7-1.8C7.3,6,7.3,5.8,7.4,5.7\n\tc0.6-1,0.9-2.2,1-3.4c1.2-0.3,2.5-0.2,3.7,0.1C12,2.5,12,2.6,12,2.7c0,0.1,0,0.2,0,0.3s0.1,0.1,0.2,0.2c0.1,0,0.2,0.1,0.3,0\n\tc0.1,0,0.2,0,0.3,0c0.5,0,0.7-0.1,0.8-0.3c0.3,0.1,0.6,0.3,0.8,0.5c-0.5,0.3-0.9,0.6-1.3,1c0.1,0.2,0.5,0.4,0.7,0.5v0.5H13\n\tc0,0.2,0,0.5,0.1,0.7c0.1,0.1,0.2,0.2,0.3,0.2c0.1,0.1,0.2,0.1,0.3,0.1c0.1,0,0.2,0,0.3,0c0.5,0,0.6-0.3,0.7-0.7\n\tc0-0.1,0-0.2,0.1-0.3C14.9,5.2,15,5,15.2,4.9c0.2,0.1,0.4,0.1,0.6,0h0.1c0,0,0.1,0,0.1,0.1c0.6,0.7,1.1,1.6,1.4,2.5\n\tc-0.6-0.2-1.3-0.4-1.9-0.3C14.9,7.1,14.3,7.2,13.8,7.5z" }), _jsx("path", { fill: "white", d: "M28.7,17L9.5,9.4L17,28.5l2.5-5.1l3.4,3.4l4.1-4l-3.4-3.3L28.7,17z M19,18c-0.1,0-0.2,0.2-0.3,0.4l-0.1,0.2\n\tl-0.2,0.1c-0.2,0.1-0.4,0.2-0.6,0.4l-0.5,0.5l-1.5-3.9l4.5,1.8L19,18z" }), _jsx("path", { d: "M20,19l3.7-1.7L13,13l4.1,10.6l1.7-3.5l4,3.9l1.2-1.2L20,19z M18.2,18.2c-0.3,0.1-0.6,0.3-0.8,0.5l-0.8-2.1l2.2,0.9\n\tC18.5,17.6,18.3,17.9,18.2,18.2z" })] }));
+        viewBox: "0 0 29 29", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...props, ref: ref, width: width, height: height, children: [_jsx("path", { d: "M15.7,15.7l1.9,0.8c1.6-1.8,2.4-4.1,2.4-6.5c0-2-0.6-3.9-1.7-5.6c-1.1-1.6-2.7-2.9-4.5-3.7C12,0,10-0.2,8,0.2\r\n\tC6.1,0.6,4.3,1.5,2.9,2.9C1.5,4.3,0.6,6.1,0.2,8c-0.4,2-0.2,4,0.6,5.8s2,3.4,3.7,4.5C6.1,19.4,8,20,10,20c2.3,0,4.7-0.9,6.4-2.4\r\n\tL15.7,15.7z M5.5,16.5c-1.3-0.9-2.3-2.2-2.9-3.7C2.1,11.3,2,9.6,2.4,8.1C3.1,8.7,4.3,10,4.3,10l-0.5,2.5l1.8,1.6\r\n\tC5.6,14.9,5.6,15.7,5.5,16.5z M13.8,7.5c-0.5,0.3-1,0.7-1.3,1.3C11.9,11,14.7,11.9,15,12c0,0,0,3.2,0,4.1c-1,0.9-2.3,1.5-3.6,1.7\r\n\tc-1.3,0.2-2.7,0.1-4-0.3c0.3-0.6,0.7-1.5,1-2.3c0.2-0.5,0.4-0.9,0.5-1.2c0.3-0.4,0.4-0.9,0.5-1.4c0.1-0.5,0-1-0.1-1.5\r\n\tC8.9,9.9,7.4,8.4,6.6,8.4C6.3,8.4,6,8.6,5.8,8.8S5.5,9.3,5.5,9.6C5.2,9,4.9,8.4,4.5,7.9c0,0,2.2-0.9,2.7-1.8C7.3,6,7.3,5.8,7.4,5.7\r\n\tc0.6-1,0.9-2.2,1-3.4c1.2-0.3,2.5-0.2,3.7,0.1C12,2.5,12,2.6,12,2.7c0,0.1,0,0.2,0,0.3s0.1,0.1,0.2,0.2c0.1,0,0.2,0.1,0.3,0\r\n\tc0.1,0,0.2,0,0.3,0c0.5,0,0.7-0.1,0.8-0.3c0.3,0.1,0.6,0.3,0.8,0.5c-0.5,0.3-0.9,0.6-1.3,1c0.1,0.2,0.5,0.4,0.7,0.5v0.5H13\r\n\tc0,0.2,0,0.5,0.1,0.7c0.1,0.1,0.2,0.2,0.3,0.2c0.1,0.1,0.2,0.1,0.3,0.1c0.1,0,0.2,0,0.3,0c0.5,0,0.6-0.3,0.7-0.7\r\n\tc0-0.1,0-0.2,0.1-0.3C14.9,5.2,15,5,15.2,4.9c0.2,0.1,0.4,0.1,0.6,0h0.1c0,0,0.1,0,0.1,0.1c0.6,0.7,1.1,1.6,1.4,2.5\r\n\tc-0.6-0.2-1.3-0.4-1.9-0.3C14.9,7.1,14.3,7.2,13.8,7.5z" }), _jsx("path", { fill: "white", d: "M28.7,17L9.5,9.4L17,28.5l2.5-5.1l3.4,3.4l4.1-4l-3.4-3.3L28.7,17z M19,18c-0.1,0-0.2,0.2-0.3,0.4l-0.1,0.2\r\n\tl-0.2,0.1c-0.2,0.1-0.4,0.2-0.6,0.4l-0.5,0.5l-1.5-3.9l4.5,1.8L19,18z" }), _jsx("path", { d: "M20,19l3.7-1.7L13,13l4.1,10.6l1.7-3.5l4,3.9l1.2-1.2L20,19z M18.2,18.2c-0.3,0.1-0.6,0.3-0.8,0.5l-0.8-2.1l2.2,0.9\r\n\tC18.5,17.6,18.3,17.9,18.2,18.2z" })] }));
 });

package/es/components/icons/LoadingIcon.js

@@ -2,39 +2,39 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 import { useIcon } from './hooks/useIcon';
-const StyleSvg = styled.svg `
-  animation: 1.5s linear 0s infinite normal none running spin;
-
-  circle.circle {
-    stroke: currentcolor;
-    stroke-dasharray: 80px, 200px;
-    stroke-dashoffset: 0;
-    animation: 1.5s ease-in-out 0s infinite normal none running animation-loading;
-  }
-
-  @keyframes animation-loading {
-    0% {
-      stroke-dasharray: 1px, 200px;
-      stroke-dashoffset: 0;
-    }
-    50% {
-      stroke-dasharray: 100px, 200px;
-      stroke-dashoffset: -15px;
-    }
-    100% {
-      stroke-dasharray: 100px, 200px;
-      stroke-dashoffset: -118px;
-    }
-  }
-
-  @keyframes spin {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(360deg);
-    }
-  }
+const StyleSvg = styled.svg `
+  animation: 1.5s linear 0s infinite normal none running spin;
+
+  circle.circle {
+    stroke: currentcolor;
+    stroke-dasharray: 80px, 200px;
+    stroke-dashoffset: 0;
+    animation: 1.5s ease-in-out 0s infinite normal none running animation-loading;
+  }
+
+  @keyframes animation-loading {
+    0% {
+      stroke-dasharray: 1px, 200px;
+      stroke-dashoffset: 0;
+    }
+    50% {
+      stroke-dasharray: 100px, 200px;
+      stroke-dashoffset: -15px;
+    }
+    100% {
+      stroke-dasharray: 100px, 200px;
+      stroke-dashoffset: -118px;
+    }
+  }
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
 `;
 export const LoadingIcon = forwardRef(({ backgroundColor, ...restOfProps }, ref) => {
     const { width, height } = useIcon(restOfProps);

package/es/components/icons/document/styled.js

@@ -1,46 +1,46 @@
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 import styled from 'styled-components';
-export const IconGalleryStyled = styled.div `
-  .grid-container {
-    /* NOTE: I don't know why gutter of antd Row doesn't apply for row-gap */
-    /* row-gap: 16px; */
-    margin-top: 24px;
-    flex-wrap: wrap;
-  }
-
-  .grid-item {
-    width: calc((100% - 16px * 4) / 5);
-    flex-grow: 0;
-    flex-shrink: 0;
-
-    padding: 32px 16px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    gap: 8px;
-    border-radius: ${globalToken?.borderRadius}px;
-
-    cursor: pointer;
-    transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
-
-    span {
-      font-size: 14px;
-    }
-
-    &:hover {
-      background-color: ${globalToken?.colorPrimary};
-
-      svg {
-        transform: scale(1.2);
-      }
-      svg,
-      span {
-        transition: all 0.3s ease-in-out;
-        will-change: transform;
-        fill: white;
-        color: white;
-      }
-    }
-  }
+export const IconGalleryStyled = styled.div `
+  .grid-container {
+    /* NOTE: I don't know why gutter of antd Row doesn't apply for row-gap */
+    /* row-gap: 16px; */
+    margin-top: 24px;
+    flex-wrap: wrap;
+  }
+
+  .grid-item {
+    width: calc((100% - 16px * 4) / 5);
+    flex-grow: 0;
+    flex-shrink: 0;
+
+    padding: 32px 16px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    border-radius: ${globalToken?.borderRadius}px;
+
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
+
+    span {
+      font-size: 14px;
+    }
+
+    &:hover {
+      background-color: ${globalToken?.colorPrimary};
+
+      svg {
+        transform: scale(1.2);
+      }
+      svg,
+      span {
+        transition: all 0.3s ease-in-out;
+        will-change: transform;
+        fill: white;
+        color: white;
+      }
+    }
+  }
 `;

package/es/components/index.scss

@@ -1 +1 @@
-@use './organism';
+@use './organism';

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

@@ -4,32 +4,32 @@ import styled from 'styled-components';
 import { Flex } from '@antscorp/antsomi-ui/es/components/atoms/Flex';
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 const { bw8, orange6 } = globalToken || {};
-export const AccessDeniedWrapper = styled(Flex) `
-  width: 100%;
-  height: 100%;
-
-  .access-denied {
-    &__lock {
-      width: 100px;
-      margin-bottom: 15px;
-    }
-
-    &__title {
-      color: ${orange6};
-      font-size: 20px;
-      line-height: 23.44px;
-    }
-
-    &__subtitle {
-      font-weight: 600;
-    }
-
-    &__description {
-      color: ${bw8};
-    }
-
-    &__actions {
-      margin-top: 20px;
-    }
-  }
+export const AccessDeniedWrapper = styled(Flex) `
+  width: 100%;
+  height: 100%;
+
+  .access-denied {
+    &__lock {
+      width: 100px;
+      margin-bottom: 15px;
+    }
+
+    &__title {
+      color: ${orange6};
+      font-size: 20px;
+      line-height: 23.44px;
+    }
+
+    &__subtitle {
+      font-weight: 600;
+    }
+
+    &__description {
+      color: ${bw8};
+    }
+
+    &__actions {
+      margin-top: 20px;
+    }
+  }
 `;

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

@@ -1,114 +1,114 @@
 import { globalToken, THEME } from '@antscorp/antsomi-ui/es/constants';
 import styled from 'styled-components';
-export const AccountSelectionStyled = styled.div `
-  background-color: white;
-  display: flex;
-  flex-direction: column;
-  width: 300px;
-  height: 450px;
-  box-shadow: 0px 3px 20px 0px #002e5933;
-
-  .antsomi-input-affix-wrapper {
-    padding: 8px 10px;
-    height: 40px;
-    box-sizing: border-box;
-    border-color: ${globalToken?.bw3};
-    &:hover,
-    &:focus,
-    &:focus-within {
-      border-color: ${globalToken?.bw3};
-    }
-  }
-
-  .recent-text {
-    color: ${THEME.token?.bw7};
-    padding: 6px 10px;
-  }
-
-  ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  ul.account-list {
-    border-top: 1px solid ${THEME.token?.bw3};
-    overflow-y: auto;
-  }
-
-  li {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 5px 10px;
-    margin-bottom: 6px;
-    cursor: pointer;
-
-    .account-name {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    .account-id {
-      flex-shrink: 0;
-    }
-  }
-
-  .all-account {
-    padding: 13px 10px;
-    height: 46px;
-    box-sizing: border-box;
-    border-top: 1px solid ${THEME.token?.bw3};
-    cursor: pointer;
-  }
-
-  li:hover,
-  .all-account:hover {
-    background-color: ${THEME.token?.blue};
-  }
-
-  li.is-selected,
-  .all-account.is-selected {
-    background-color: ${THEME.token?.blue1_1};
-  }
+export const AccountSelectionStyled = styled.div `
+  background-color: white;
+  display: flex;
+  flex-direction: column;
+  width: 300px;
+  height: 450px;
+  box-shadow: 0px 3px 20px 0px #002e5933;
+
+  .antsomi-input-affix-wrapper {
+    padding: 8px 10px;
+    height: 40px;
+    box-sizing: border-box;
+    border-color: ${globalToken?.bw3};
+    &:hover,
+    &:focus,
+    &:focus-within {
+      border-color: ${globalToken?.bw3};
+    }
+  }
+
+  .recent-text {
+    color: ${THEME.token?.bw7};
+    padding: 6px 10px;
+  }
+
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  ul.account-list {
+    border-top: 1px solid ${THEME.token?.bw3};
+    overflow-y: auto;
+  }
+
+  li {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px 10px;
+    margin-bottom: 6px;
+    cursor: pointer;
+
+    .account-name {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .account-id {
+      flex-shrink: 0;
+    }
+  }
+
+  .all-account {
+    padding: 13px 10px;
+    height: 46px;
+    box-sizing: border-box;
+    border-top: 1px solid ${THEME.token?.bw3};
+    cursor: pointer;
+  }
+
+  li:hover,
+  .all-account:hover {
+    background-color: ${THEME.token?.blue};
+  }
+
+  li.is-selected,
+  .all-account.is-selected {
+    background-color: ${THEME.token?.blue1_1};
+  }
 `;
-export const PopoverFieldStyled = styled.div `
-  box-sizing: border-box;
-  width: 190px;
-  height: 36px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 10px;
-  cursor: pointer;
-
-  background-color: white;
-
-  font-size: 12px;
-  font-weight: bold;
-
-  span {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  i {
-    color: ${THEME.token?.bw8};
-  }
-
-  &.select {
-    border: 1px solid ${THEME.token?.bw3};
-    border-radius: 999px;
-  }
-
-  &.input {
-    border-bottom: 1px solid ${THEME.token?.colorPrimary};
-    width: 300px;
-  }
-
-  & .is-placeholder {
-    color: ${THEME.token?.bw6};
-    font-weight: normal;
-  }
+export const PopoverFieldStyled = styled.div `
+  box-sizing: border-box;
+  width: 190px;
+  height: 36px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 10px;
+  cursor: pointer;
+
+  background-color: white;
+
+  font-size: 12px;
+  font-weight: bold;
+
+  span {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  i {
+    color: ${THEME.token?.bw8};
+  }
+
+  &.select {
+    border: 1px solid ${THEME.token?.bw3};
+    border-radius: 999px;
+  }
+
+  &.input {
+    border-bottom: 1px solid ${THEME.token?.colorPrimary};
+    width: 300px;
+  }
+
+  & .is-placeholder {
+    color: ${THEME.token?.bw6};
+    font-weight: normal;
+  }
 `;

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

@@ -2,29 +2,29 @@
 import { AutoComplete, Button } from 'antd';
 import styled from 'styled-components';
 import { Modal } from '../Modal';
-export const InputSuggestion = styled(AutoComplete) `
-  .antsomi-select-selector {
-    border-right: none !important;
-    border-left: none !important;
-    border-top: none !important;
-    border-bottom: 1px solid #d9d9d9 !important;
-  }
+export const InputSuggestion = styled(AutoComplete) `
+  .antsomi-select-selector {
+    border-right: none !important;
+    border-left: none !important;
+    border-top: none !important;
+    border-bottom: 1px solid #d9d9d9 !important;
+  }
 `;
-export const ModalCustom = styled(Modal) `
-  .antsomi-modal-body {
-    overflow: auto;
-    max-height: 500px;
-  }
+export const ModalCustom = styled(Modal) `
+  .antsomi-modal-body {
+    overflow: auto;
+    max-height: 500px;
+  }
 `;
-export const ButtonCustom = styled(Button) `
-  width: 64px;
-  background-color: rgb(191 219 254);
-
-  &:hover {
-    background-color: rgb(147 197 253);
-  }
-
-  &:focus {
-    background-color: rgb(147 197 253);
-  }
+export const ButtonCustom = styled(Button) `
+  width: 64px;
+  background-color: rgb(191 219 254);
+
+  &:hover {
+    background-color: rgb(147 197 253);
+  }
+
+  &:focus {
+    background-color: rgb(147 197 253);
+  }
 `;

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

@@ -1,7 +1,7 @@
 // Libraries
 import styled from 'styled-components';
-export const AlignSettingWrapper = styled.div `
-  display: flex;
-  gap: 10px;
-  align-items: center;
+export const AlignSettingWrapper = styled.div `
+  display: flex;
+  gap: 10px;
+  align-items: center;
 `;