@antscorp/antsomi-ui 2.0.115 → 2.0.116

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

@@ -1,36 +1,36 @@
 import styled from 'styled-components';
 import { Input } from '../../atoms/Input';
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
-export const StyledInput = styled(Input) `
-  &.antsomi-input-group-wrapper {
-    padding: 8px 10px;
-    border-bottom: 1px solid var(--divider-1);
-
-    .antsomi-input-wrapper {
-      display: flex;
-      align-items: center;
-      gap: 4px;
-
-      .antsomi-input {
-        padding-left: 0;
-        padding-right: 0;
-      }
-
-      .antsomi-input-group-addon {
-        display: flex;
-        align-items: center;
-        border: none;
-        background: transparent;
-        font-size: 20px;
-        padding: 0;
-        min-width: 25px;
-
-        > svg {
-          font-size: 24px;
-          color: ${THEME.token?.colorIcon};
-          cursor: pointer;
-        }
-      }
-    }
-  }
+export const StyledInput = styled(Input) `
+  &.antsomi-input-group-wrapper {
+    padding: 8px 10px;
+    border-bottom: 1px solid var(--divider-1);
+
+    .antsomi-input-wrapper {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+
+      .antsomi-input {
+        padding-left: 0;
+        padding-right: 0;
+      }
+
+      .antsomi-input-group-addon {
+        display: flex;
+        align-items: center;
+        border: none;
+        background: transparent;
+        font-size: 20px;
+        padding: 0;
+        min-width: 25px;
+
+        > svg {
+          font-size: 24px;
+          color: ${THEME.token?.colorIcon};
+          cursor: pointer;
+        }
+      }
+    }
+  }
 `;

package/es/components/molecules/Select/Select.js

@@ -2,8 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Libraries
 import { Select as AntdSelect } from 'antd';
 // Components
-import { Flex } from '@antscorp/antsomi-ui/es/components/atoms';
 import { Text } from '../../atoms/Text';
+import { Flex } from '../../atoms/Flex';
 // Icons
 import Icon from '@antscorp/icons';
 // Constants

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

@@ -4,37 +4,37 @@ import styled from 'styled-components';
 import { Tag } from '../../atoms/Tag';
 // Constants
 import { THEME } from '../../../constants';
-export const StyledTag = styled(Tag) `
-  position: relative;
-  background-color: ${THEME.token?.blue2} !important;
-  padding: 3px 10px !important;
-  margin: 0px !important;
-  border-radius: 15px !important;
-  border: none !important;
-  font-size: ${THEME.token?.fontSize}px !important;
-
-  .antsomi-tag-close-icon {
-    opacity: 0;
-    transition: all 0.3s;
-  }
-
-  &:hover {
-    .antsomi-tag-close-icon {
-      opacity: 1;
-    }
-  }
+export const StyledTag = styled(Tag) `
+  position: relative;
+  background-color: ${THEME.token?.blue2} !important;
+  padding: 3px 10px !important;
+  margin: 0px !important;
+  border-radius: 15px !important;
+  border: none !important;
+  font-size: ${THEME.token?.fontSize}px !important;
+
+  .antsomi-tag-close-icon {
+    opacity: 0;
+    transition: all 0.3s;
+  }
+
+  &:hover {
+    .antsomi-tag-close-icon {
+      opacity: 1;
+    }
+  }
 `;
-export const TagCloseBtn = styled.div `
-  position: absolute;
-  top: 3px;
-  right: 3px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
-  border-radius: 100%;
-  border: 2.5px solid ${p => (p.borderColor ? p.borderColor : '#cae5fe')};
-  background-color: #fff;
-  color: ${THEME.token?.colorPrimary};
+export const TagCloseBtn = styled.div `
+  position: absolute;
+  top: 3px;
+  right: 3px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border-radius: 100%;
+  border: 2.5px solid ${p => (p.borderColor ? p.borderColor : '#cae5fe')};
+  background-color: #fff;
+  color: ${THEME.token?.colorPrimary};
 `;

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

@@ -1,163 +1,163 @@
 import styled from 'styled-components';
 import { Button } from '@antscorp/antsomi-ui/es/components/atoms/Button';
 import { Checkbox } from '@antscorp/antsomi-ui/es/components/atoms/Checkbox';
-export const Wrapper = styled.div `
-  display: flex;
-  gap: 5px;
-  flex-wrap: wrap;
-  width: 100%;
-  pointer-events: ${props => (props?.disabled ? 'none' : 'initial')};
+export const Wrapper = styled.div `
+  display: flex;
+  gap: 5px;
+  flex-wrap: wrap;
+  width: 100%;
+  pointer-events: ${props => (props?.disabled ? 'none' : 'initial')};
 `;
-export const AccountChipWrapper = styled.div `
-  color: #000000;
-  font-size: 12px;
-  line-height: 14px;
-  font-weight: 400;
-
-  position: relative;
-  padding: 5px 10px;
-  background-color: ${({ disabled, isError }) => disabled ? '#E5E5E5' : isError ? '#fecaca' : '#CAE5FE'};
-  border-radius: 999px;
-
-  .name {
-    margin: 0px;
-    padding: 0px;
-
-    line-height: 14px;
-    width: 100%;
-    text-align: center;
-  }
-
-  .icon-remove {
-    display: none;
-    justify-content: center;
-    align-items: center;
-
-    position: absolute;
-    top: 4px;
-    right: 4px;
-
-    font-size: 10px;
-    color: #005eb8;
-
-    border-radius: 100%;
-    background-color: #ffffff;
-    width: 16px;
-    height: 16px;
-    cursor: pointer;
-  }
-
-  &:hover .icon-remove {
-    display: flex;
-  }
+export const AccountChipWrapper = styled.div `
+  color: #000000;
+  font-size: 12px;
+  line-height: 14px;
+  font-weight: 400;
+
+  position: relative;
+  padding: 5px 10px;
+  background-color: ${({ disabled, isError }) => disabled ? '#E5E5E5' : isError ? '#fecaca' : '#CAE5FE'};
+  border-radius: 999px;
+
+  .name {
+    margin: 0px;
+    padding: 0px;
+
+    line-height: 14px;
+    width: 100%;
+    text-align: center;
+  }
+
+  .icon-remove {
+    display: none;
+    justify-content: center;
+    align-items: center;
+
+    position: absolute;
+    top: 4px;
+    right: 4px;
+
+    font-size: 10px;
+    color: #005eb8;
+
+    border-radius: 100%;
+    background-color: #ffffff;
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+  }
+
+  &:hover .icon-remove {
+    display: flex;
+  }
 `;
-export const ButtonAddStyled = styled(Button) `
-  border: 1px solid #005eb8 !important;
-  border-radius: 999px !important;
-  background-color: transparent;
-  padding: 4px 5px !important;
-  height: 24px !important;
-
-  display: flex;
-  color: #005eb8;
-  font-size: 12px;
-  line-height: 14px;
-  font-weight: 700;
-
-  .icon {
-    font-size: 10px;
-    padding: 3px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .name {
-    padding: 0 5px 0 0;
-  }
+export const ButtonAddStyled = styled(Button) `
+  border: 1px solid #005eb8 !important;
+  border-radius: 999px !important;
+  background-color: transparent;
+  padding: 4px 5px !important;
+  height: 24px !important;
+
+  display: flex;
+  color: #005eb8;
+  font-size: 12px;
+  line-height: 14px;
+  font-weight: 700;
+
+  .icon {
+    font-size: 10px;
+    padding: 3px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .name {
+    padding: 0 5px 0 0;
+  }
 `;
-export const ButtonViewAllStyled = styled(Button) `
-  height: 24px !important;
-
-  display: flex;
-  color: #005eb8;
-  font-size: 12px;
-  line-height: 14px;
-  font-weight: 700;
+export const ButtonViewAllStyled = styled(Button) `
+  height: 24px !important;
+
+  display: flex;
+  color: #005eb8;
+  font-size: 12px;
+  line-height: 14px;
+  font-weight: 700;
 `;
 // ----- AccountList -----
-export const AccountListWrapper = styled.div `
-  border-radius: 2px;
-  width: 300px;
-  background-color: #ffffff;
-  box-shadow: 0px 3px 20px 0px #002e5933;
-  transition: 0.3s;
+export const AccountListWrapper = styled.div `
+  border-radius: 2px;
+  width: 300px;
+  background-color: #ffffff;
+  box-shadow: 0px 3px 20px 0px #002e5933;
+  transition: 0.3s;
 `;
-export const AccountListBody = styled.div `
-  padding: 15px;
+export const AccountListBody = styled.div `
+  padding: 15px;
 `;
-export const AccountListFooter = styled.div `
-  display: flex;
-  justify-content: flex-end;
-  gap: 10px;
-
-  border-top: 1px solid #e5e5e5;
-  padding: 15px;
+export const AccountListFooter = styled.div `
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+
+  border-top: 1px solid #e5e5e5;
+  padding: 15px;
 `;
-export const AccountListTitleGroup = styled.div `
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 10px;
-  margin-bottom: 10px;
-
-  font-size: 12px;
-  line-height: 14px;
-  font-weight: 400;
-  height: 30px;
-  cursor: pointer;
+export const AccountListTitleGroup = styled.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 10px;
+  margin-bottom: 10px;
+
+  font-size: 12px;
+  line-height: 14px;
+  font-weight: 400;
+  height: 30px;
+  cursor: pointer;
 `;
-export const AccountListContent = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-
-  & label:hover {
-    background-color: #f2f9ff;
-  }
+export const AccountListContent = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+
+  & label:hover {
+    background-color: #f2f9ff;
+  }
 `;
-export const CheckboxStyled = styled(Checkbox) `
-  padding: 3px !important;
-  border-radius: 10px !important;
+export const CheckboxStyled = styled(Checkbox) `
+  padding: 3px !important;
+  border-radius: 10px !important;
 `;
-export const ViewAllWrapper = styled.div `
-  display: flex;
-  gap: 5px;
-  flex-wrap: wrap;
-  max-width: 300px;
-  padding: 15px;
-
-  .input__wrapper {
-    width: 100%;
-  }
+export const ViewAllWrapper = styled.div `
+  display: flex;
+  gap: 5px;
+  flex-wrap: wrap;
+  max-width: 300px;
+  padding: 15px;
+
+  .input__wrapper {
+    width: 100%;
+  }
 `;
-export const ItemOnlyOne = styled.div `
-  padding: 8px 10px;
-  background-color: #ffffff;
-  line-height: normal;
-  cursor: pointer;
-
-  .checked {
-    background-color: #deeffe;
-  }
-
-  .disabled {
-    color: #a2a2a2;
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-
-  &:not(.active):not(.disabled):hover {
-    background-color: #f2f9ff;
-  }
+export const ItemOnlyOne = styled.div `
+  padding: 8px 10px;
+  background-color: #ffffff;
+  line-height: normal;
+  cursor: pointer;
+
+  .checked {
+    background-color: #deeffe;
+  }
+
+  .disabled {
+    color: #a2a2a2;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  &:not(.active):not(.disabled):hover {
+    background-color: #f2f9ff;
+  }
 `;

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

@@ -1,13 +1,13 @@
 // Libraries
 import { SelectV2 as Select } from '@antscorp/antsomi-ui/es/components/molecules';
 import styled from 'styled-components';
-export const SelectEventAttributeWrapper = styled.div `
-  display: flex;
-  flex-direction: column;
-  margin-top: 10px;
+export const SelectEventAttributeWrapper = styled.div `
+  display: flex;
+  flex-direction: column;
+  margin-top: 10px;
 `;
-export const StyledSelect = styled(Select) `
-  .antsomi-select-selector {
-    height: auto;
-  }
+export const StyledSelect = styled(Select) `
+  .antsomi-select-selector {
+    height: auto;
+  }
 `;

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

@@ -4,67 +4,67 @@ import styled from 'styled-components';
 import { Select as AntdSelect } from 'antd';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
-export const SelectWrapper = styled.div `
-  display: flex;
-  flex-direction: column;
-  position: relative;
-
-  .icon-arrow-down {
-    position: absolute;
-    bottom: 4px;
-    right: 4px;
-  }
+export const SelectWrapper = styled.div `
+  display: flex;
+  flex-direction: column;
+  position: relative;
+
+  .icon-arrow-down {
+    position: absolute;
+    bottom: 4px;
+    right: 4px;
+  }
 `;
-export const StyledSelect = styled(AntdSelect) `
-  font-family: ${THEME.token?.fontFamily};
-
-  .antsomi-select-arrow {
-    display: flex;
-    align-items: center;
-    color: ${THEME.token?.colorTextBase} !important;
-  }
-
-  .antsomi-select-selector {
-    justify-content: space-between;
-    height: 30px;
-    padding: 0 5px;
-    font-size: ${THEME.token?.fontSize}px;
-    font-weight: normal;
-
-    transition: all 0.3s ease;
-    color: ${THEME.token?.colorTextBase};
-
-    &:hover {
-      background-color: ${THEME.token?.blue0};
-    }
-
-    border-radius: 0px !important;
-    border-style: none !important;
-    --tw-shadow: 0 1px 0 0 ${THEME.token?.blue1} !important;
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
-      var(--tw-shadow) !important;
-
-    cursor: pointer !important;
-    caret-color: transparent;
-
-    &:active,
-    &:focus {
-      background-color: ${THEME.token?.blue0};
-      --tw-shadow: 0 1px 0 0 #194e8d !important;
-      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
-        var(--tw-shadow) !important;
-    }
-
-    &:disabled {
-      background-color: ${THEME.token?.accent};
-      color: ${THEME.token?.accent5};
-      box-shadow: 0 1px 0 0 ${THEME.token?.accent1};
-    }
-  }
-
-  &.antsomi-select-disabled {
-    .antsomi-select-arrow {
-      color: ${THEME.token?.accent5} !important;
-    }
-  }
+export const StyledSelect = styled(AntdSelect) `
+  font-family: ${THEME.token?.fontFamily};
+
+  .antsomi-select-arrow {
+    display: flex;
+    align-items: center;
+    color: ${THEME.token?.colorTextBase} !important;
+  }
+
+  .antsomi-select-selector {
+    justify-content: space-between;
+    height: 30px;
+    padding: 0 5px;
+    font-size: ${THEME.token?.fontSize}px;
+    font-weight: normal;
+
+    transition: all 0.3s ease;
+    color: ${THEME.token?.colorTextBase};
+
+    &:hover {
+      background-color: ${THEME.token?.blue0};
+    }
+
+    border-radius: 0px !important;
+    border-style: none !important;
+    --tw-shadow: 0 1px 0 0 ${THEME.token?.blue1} !important;
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+      var(--tw-shadow) !important;
+
+    cursor: pointer !important;
+    caret-color: transparent;
+
+    &:active,
+    &:focus {
+      background-color: ${THEME.token?.blue0};
+      --tw-shadow: 0 1px 0 0 #194e8d !important;
+      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+        var(--tw-shadow) !important;
+    }
+
+    &:disabled {
+      background-color: ${THEME.token?.accent};
+      color: ${THEME.token?.accent5};
+      box-shadow: 0 1px 0 0 ${THEME.token?.accent1};
+    }
+  }
+
+  &.antsomi-select-disabled {
+    .antsomi-select-arrow {
+      color: ${THEME.token?.accent5} !important;
+    }
+  }
 `;