@antscorp/antsomi-ui 2.0.101 → 2.0.102

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

@@ -2,75 +2,75 @@
 import styled from 'styled-components';
 // Constants
 import { THEME, globalToken } from '@antscorp/antsomi-ui/es/constants';
-export const LogoWrapper = styled.div `
-  height: 30px;
-  width: 30px;
-  cursor: pointer;
-
-  img {
-    height: 100%;
-    width: 100%;
-  }
+export const LogoWrapper = styled.div `
+  height: 30px;
+  width: 30px;
+  cursor: pointer;
+
+  img {
+    height: 100%;
+    width: 100%;
+  }
 `;
-export const HeaderV2Styled = styled.div `
-  height: ${THEME.token?.headerHeight};
-  background-color: #f6f8fc;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 10px 20px;
-  box-sizing: border-box;
-
-  ${props => !props.$show && 'display: none;'}
-
-  .left-side,
-  .right-side {
-    display: flex;
-    align-items: center;
-    gap: 15px;
-  }
-
-  .left-side {
-    flex: 1;
-    overflow: hidden;
-
-    .logo-wrapper {
-      flex-shrink: 0;
-    }
-
-    .title-container {
-      flex: 1;
-      min-width: 0;
-      /* &:has(.header-breadcrumbs) {
-        height: 37px;
-      } */
-      input.antsomi-input {
-        height: 23px;
-      }
-    }
-  }
-
-  .header-breadcrumbs,
-  .header-breadcrumbs__item {
-    font-size: 12px;
-    line-height: 14px;
-    font-weight: bold;
-    color: ${THEME.token?.bw7};
-    user-select: none;
-  }
-
-  .header-breadcrumbs__item {
-    cursor: pointer;
-    &:hover {
-      color: ${THEME.token?.colorText};
-    }
-  }
-
-  .page-title {
-    font-size: 20px;
-    line-height: 23px;
-    height: 23px;
-    font-weight: bold;
-    color: ${globalToken?.colorTextBase};
-  }
+export const HeaderV2Styled = styled.div `
+  height: ${THEME.token?.headerHeight};
+  background-color: #f6f8fc;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 20px;
+  box-sizing: border-box;
+
+  ${props => !props.$show && 'display: none;'}
+
+  .left-side,
+  .right-side {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+  }
+
+  .left-side {
+    flex: 1;
+    overflow: hidden;
+
+    .logo-wrapper {
+      flex-shrink: 0;
+    }
+
+    .title-container {
+      flex: 1;
+      min-width: 0;
+      /* &:has(.header-breadcrumbs) {
+        height: 37px;
+      } */
+      input.antsomi-input {
+        height: 23px;
+      }
+    }
+  }
+
+  .header-breadcrumbs,
+  .header-breadcrumbs__item {
+    font-size: 12px;
+    line-height: 14px;
+    font-weight: bold;
+    color: ${THEME.token?.bw7};
+    user-select: none;
+  }
+
+  .header-breadcrumbs__item {
+    cursor: pointer;
+    &:hover {
+      color: ${THEME.token?.colorText};
+    }
+  }
+
+  .page-title {
+    font-size: 20px;
+    line-height: 23px;
+    height: 23px;
+    font-weight: bold;
+    color: ${globalToken?.colorTextBase};
+  }
 `;

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

@@ -3,77 +3,77 @@ import styled from 'styled-components';
 import { Button } from '@antscorp/antsomi-ui/es/components/atoms/Button';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
-export const IconSelectionWrapper = styled.div `
-  width: 100%;
-  padding: 5px;
-  aspect-ratio: 1.74;
-  border: 1px solid #f0f0f0;
-  box-sizing: border-box;
-
-  .transparent-wrapper {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    gap: 15px;
-    aspect-ratio: 1.74;
-    background: url('data:image/svg+xml;base64, PHN2ZyBoZWlnaHQ9IjEwIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB3aWR0aD0iMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgYXJpYS1oaWRkZW49InRydWUiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZmlsbC1vcGFjaXR5PSIuMTI1IiBkPSJNMCAyNTZoMjU2djI1NkgweiI+PC9wYXRoPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZmlsbC1vcGFjaXR5PSIuMjUiIGQ9Ik0yNTYgMjU2aDI1NnYyNTZIMjU2eiI+PC9wYXRoPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZmlsbC1vcGFjaXR5PSIuMTI1IiBkPSJNMjU2IDBoMjU2djI1NkgyNTZ6Ij48L3BhdGg+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBmaWxsLW9wYWNpdHk9Ii4yNSIgZD0iTTAgMGgyNTZ2MjU2SDB6Ij48L3BhdGg+PC9zdmc+')
-      repeat rgb(249, 251, 255);
-  }
+export const IconSelectionWrapper = styled.div `
+  width: 100%;
+  padding: 5px;
+  aspect-ratio: 1.74;
+  border: 1px solid #f0f0f0;
+  box-sizing: border-box;
+
+  .transparent-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    gap: 15px;
+    aspect-ratio: 1.74;
+    background: url('data:image/svg+xml;base64, PHN2ZyBoZWlnaHQ9IjEwIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB3aWR0aD0iMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgYXJpYS1oaWRkZW49InRydWUiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZmlsbC1vcGFjaXR5PSIuMTI1IiBkPSJNMCAyNTZoMjU2djI1NkgweiI+PC9wYXRoPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZmlsbC1vcGFjaXR5PSIuMjUiIGQ9Ik0yNTYgMjU2aDI1NnYyNTZIMjU2eiI+PC9wYXRoPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZmlsbC1vcGFjaXR5PSIuMTI1IiBkPSJNMjU2IDBoMjU2djI1NkgyNTZ6Ij48L3BhdGg+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBmaWxsLW9wYWNpdHk9Ii4yNSIgZD0iTTAgMGgyNTZ2MjU2SDB6Ij48L3BhdGg+PC9zdmc+')
+      repeat rgb(249, 251, 255);
+  }
 `;
-export const WrapperListRender = styled.div `
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100px;
-  height: auto;
-  text-align: center;
-
-  &:hover .ants-hover {
-    border-width: 2px;
-  }
-
-  &.ants-group:hover .group-hover {
-    opacity: 1;
-  }
+export const WrapperListRender = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100px;
+  height: auto;
+  text-align: center;
+
+  &:hover .ants-hover {
+    border-width: 2px;
+  }
+
+  &.ants-group:hover .group-hover {
+    opacity: 1;
+  }
 `;
-export const WrapperListItemRender = styled.div `
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100px;
-  height: 100px;
-  border-width: 1px;
-  --tw-border-opacity: 1;
-  border-color: rgb(224 224 224 / var(--tw-border-opacity));
-  border-style: solid;
-  box-sizing: border-box;
+export const WrapperListItemRender = styled.div `
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100px;
+  height: 100px;
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(224 224 224 / var(--tw-border-opacity));
+  border-style: solid;
+  box-sizing: border-box;
 `;
-export const CustomButton = styled(Button) `
-  position: absolute !important;
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-  z-index: 3;
-  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 CustomButton = styled(Button) `
+  position: absolute !important;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  z-index: 3;
+  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-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 200ms;
+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-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
 `;

package/es/components/molecules/ImageEditor/components/ModalShortcut.js

@@ -3,27 +3,27 @@ import { ModalV2 } from '../../ModalV2';
 import { Flex } from 'antd';
 import { Text } from '../../../atoms';
 import styled from 'styled-components';
-const RowStyled = styled(Flex) `
-  border-bottom: 1px solid #ccc;
-  padding: 6px 0;
-
-  &:last-child {
-    border-bottom: none;
-  }
-
-  .row-text {
-    font-size: 14px;
-  }
-  .header {
-    font-weight: bold;
-  }
-  .shortcut {
-    border: 1px solid #ccc;
-    padding: 4px 0;
-    width: 120px;
-    text-align: center;
-    border-radius: 4px;
-  }
+const RowStyled = styled(Flex) `
+  border-bottom: 1px solid #ccc;
+  padding: 6px 0;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  .row-text {
+    font-size: 14px;
+  }
+  .header {
+    font-weight: bold;
+  }
+  .shortcut {
+    border: 1px solid #ccc;
+    padding: 4px 0;
+    width: 120px;
+    text-align: center;
+    border-radius: 4px;
+  }
 `;
 const SHORTCUT_LIST = [
     { command: 'Delete', shortcut: 'Delete/Del' },

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

@@ -6,9 +6,9 @@ import { Flex } from '@antscorp/antsomi-ui/es/components/atoms/Flex';
 //     height: 30px !important;
 //   }
 // `;
-export const StageWrapperStyled = styled(Flex) `
-  width: ${props => `${props.$width}px`};
-  height: ${props => `${props.$height}px`};
-  border: 1px solid #666;
-  margin-top: 16px;
+export const StageWrapperStyled = styled(Flex) `
+  width: ${props => `${props.$width}px`};
+  height: ${props => `${props.$height}px`};
+  border: 1px solid #666;
+  margin-top: 16px;
 `;

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

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-export const ImagePreviews = styled.img `
-  width: 100%;
-  height: 100%;
+export const ImagePreviews = styled.img `
+  width: 100%;
+  height: 100%;
 `;

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

@@ -2,18 +2,18 @@
 import styled from 'styled-components';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
-export const InputNumberWithUnitWrapper = styled.div `
-  display: flex;
-  align-items: center;
-
-  .unit-label {
-    cursor: pointer;
-    margin-left: 10px;
-    color: ${THEME.token?.colorIcon};
-
-    &.selected {
-      color: ${THEME.token?.colorPrimary};
-      font-weight: bold;
-    }
-  }
+export const InputNumberWithUnitWrapper = styled.div `
+  display: flex;
+  align-items: center;
+
+  .unit-label {
+    cursor: pointer;
+    margin-left: 10px;
+    color: ${THEME.token?.colorIcon};
+
+    &.selected {
+      color: ${THEME.token?.colorPrimary};
+      font-weight: bold;
+    }
+  }
 `;

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

@@ -2,45 +2,45 @@
 import styled from 'styled-components';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
-export const Wrapper = styled.div `
-  position: relative;
-  display: flex;
-  align-items: flex-end;
-  box-sizing: border-box;
-
-  .input__wrapper {
-    width: 100%;
-  }
-
-  &:has(input:focus) {
-    .__icon-search {
-      border-bottom: 1px solid #1f7ac4;
-    }
-  }
-
-  &:has(input:hover:not(:focus)) {
-    .__icon-search {
-      background-color: ${THEME.token?.blue0};
-      border-bottom: 1px solid #1f7ac4;
-    }
-  }
-
-  .__icon-search {
-    height: 31px;
-    padding-right: 4px;
-    background-color: ${THEME.token?.bw0};
-    cursor: pointer;
-    color: ${THEME.token?.colorIcon};
-    font-size: 24px;
-    line-height: 32px;
-    border-bottom: 1px solid #b8cfe6;
-    transition-property: all;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
-    box-sizing: border-box;
-
-    &:hover {
-      color: ${THEME.token?.colorPrimary};
-    }
-  }
+export const Wrapper = styled.div `
+  position: relative;
+  display: flex;
+  align-items: flex-end;
+  box-sizing: border-box;
+
+  .input__wrapper {
+    width: 100%;
+  }
+
+  &:has(input:focus) {
+    .__icon-search {
+      border-bottom: 1px solid #1f7ac4;
+    }
+  }
+
+  &:has(input:hover:not(:focus)) {
+    .__icon-search {
+      background-color: ${THEME.token?.blue0};
+      border-bottom: 1px solid #1f7ac4;
+    }
+  }
+
+  .__icon-search {
+    height: 31px;
+    padding-right: 4px;
+    background-color: ${THEME.token?.bw0};
+    cursor: pointer;
+    color: ${THEME.token?.colorIcon};
+    font-size: 24px;
+    line-height: 32px;
+    border-bottom: 1px solid #b8cfe6;
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+    box-sizing: border-box;
+
+    &:hover {
+      color: ${THEME.token?.colorPrimary};
+    }
+  }
 `;

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

@@ -1,29 +1,29 @@
 import { Flex } from 'antd';
 import styled from 'styled-components';
-export const ContainerModule = styled(Flex) `
-  height: ${props => (props.$height ? props.$height : '100%')};
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  gap: 5px;
-  .item-title {
-    display: flex;
-
-    .content-title {
-      font-size: 20px;
-      font-weight: bold;
-      color: #f29100;
-      margin-right: 5px;
-    }
-
-    .icon-title {
-      font-size: 24px;
-      color: #666666;
-    }
-  }
-
-  .item-body {
-    font-size: 12px;
-    color: #595959;
-  }
+export const ContainerModule = styled(Flex) `
+  height: ${props => (props.$height ? props.$height : '100%')};
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 5px;
+  .item-title {
+    display: flex;
+
+    .content-title {
+      font-size: 20px;
+      font-weight: bold;
+      color: #f29100;
+      margin-right: 5px;
+    }
+
+    .icon-title {
+      font-size: 24px;
+      color: #666666;
+    }
+  }
+
+  .item-body {
+    font-size: 12px;
+    color: #595959;
+  }
 `;

package/es/components/molecules/MatchAnySelect/components/ExtendValuePopup.js

@@ -15,14 +15,14 @@ import { splitTextByNewline } from '@antscorp/antsomi-ui/es/utils';
 const { borderRadius, blue1 } = globalToken || {};
 const { t } = i18nInstance;
 // Styled
-const TextArea = styled(props => _jsx(Input.TextArea, { ...props })) `
-  &.antsomi-input-borderless {
-    border: 1px solid ${blue1} !important;
-    border-radius: ${borderRadius}px;
-  }
-  ::-webkit-input-placeholder {
-    opacity: 1 !important;
-  }
+const TextArea = styled(props => _jsx(Input.TextArea, { ...props })) `
+  &.antsomi-input-borderless {
+    border: 1px solid ${blue1} !important;
+    border-radius: ${borderRadius}px;
+  }
+  ::-webkit-input-placeholder {
+    opacity: 1 !important;
+  }
 `;
 export const ExtendValuePopup = props => {
     // Props