@antscorp/antsomi-ui 2.0.109 → 2.0.110

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

@@ -5,247 +5,247 @@ import { Typography } from 'antd';
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 // Components
 const { Text: AntText } = Typography;
-export const ContainerCapture = styled.div `
-  position: fixed;
-  top: 0px;
-  right: 0px;
-  bottom: 0px;
-  left: 0px;
-  z-index: 99999;
-
-  /* border: 5px solid ${THEME.token?.blue7}; */
-  /* background-color: rgba(0, 0, 0, 0.15); */
-
-  z-index: 9999;
-
+export const ContainerCapture = styled.div `
+  position: fixed;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+  z-index: 99999;
+
+  /* border: 5px solid ${THEME.token?.blue7}; */
+  /* background-color: rgba(0, 0, 0, 0.15); */
+
+  z-index: 9999;
+
   ${props => props.imageURL &&
-    css `
-      display: block;
-      background-image: url(${props.imageURL});
-      background-repeat: no-repeat;
-      background-size: contain;
-      background-origin: border-box;
-      -webkit-user-select: none;
-      margin: auto;
-      cursor: pointer;
-      background-color: hsl(0, 0%, 90%);
-      transition: background-color 300ms;
-    `}
-
-  * > * {
-    box-sizing: border-box;
-  }
-
-  .tui-image-editor-canvas-container,
-  .lower-canvas,
-  .upper-canvas {
-    max-width: 100% !important;
-    max-height: 100% !important;
-  }
-
-  .tui-image-editor-canvas-container {
-    /* border: 5px solid ${THEME.token?.blue7}; */
-    overflow: hidden;
-    box-sizing: border-box;
-  }
-
-  &.hide-cursor .tui-image-editor-canvas-container .upper-canvas {
-    cursor: none !important;
-  }
-
+    css `
+      display: block;
+      background-image: url(${props.imageURL});
+      background-repeat: no-repeat;
+      background-size: contain;
+      background-origin: border-box;
+      -webkit-user-select: none;
+      margin: auto;
+      cursor: pointer;
+      background-color: hsl(0, 0%, 90%);
+      transition: background-color 300ms;
+    `}
+
+  * > * {
+    box-sizing: border-box;
+  }
+
+  .tui-image-editor-canvas-container,
+  .lower-canvas,
+  .upper-canvas {
+    max-width: 100% !important;
+    max-height: 100% !important;
+  }
+
+  .tui-image-editor-canvas-container {
+    /* border: 5px solid ${THEME.token?.blue7}; */
+    overflow: hidden;
+    box-sizing: border-box;
+  }
+
+  &.hide-cursor .tui-image-editor-canvas-container .upper-canvas {
+    cursor: none !important;
+  }
+
   ${props => props.isRecord &&
-    css `
-      position: unset;
-      width: 0px;
-      height: 0px;
-      /* border: 5px solid ${THEME.token?.blue7}; */
-    `}
-`;
-export const BorderOverlay = styled.div `
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  width: 100%;
-  height: 100%;
-  z-index: 999;
-  border: 5px solid ${THEME.token?.blue7};
-  box-sizing: border-box;
-  clip-path: polygon(
-    5px 5px,
-    5px 100%,
-    0 100%,
-    0 0,
-    100% 0,
-    100% 100%,
-    5px 100%,
-    5px calc(100% - 5px),
-    calc(100% - 5px) calc(100% - 5px),
-    calc(100% - 5px) 5px
-  );
-`;
-export const FlexColumn = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-`;
-export const FlexCenter = styled.div `
-  display: flex;
-  align-items: center;
-  gap: 10px;
-`;
-export const WrapperIcon = styled.div `
-  position: absolute;
-  top: ${props => (props.isRecord ? -5 : 0)}px;
-  right: ${props => (props.isRecord ? -5 : 0)}px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 40px;
-  height: 40px;
-  cursor: pointer;
-  background-color: ${THEME.token?.blue7};
-  z-index: 10;
-`;
-export const DrawerGroups = styled.div `
-  display: flex;
-  align-items: center;
-  height: 52px;
-  background-color: ${THEME.token?.bw0};
-  z-index: 9999;
-`;
-export const WrapperDraggable = styled.strong `
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 10px;
-  cursor: move;
-`;
-export const DrawerGroupItem = styled.div `
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  /* padding: 10px; */
-  cursor: pointer;
-
-  &:not(.active):hover {
-    background-color: #deeffe;
-    transition: all 0.3s linear;
-  }
-
-  &.active {
-    color: ${THEME.token?.colorPrimary};
-    background-color: #deeffe;
-  }
-
-  &:hover .toggle-popup-by-side {
-    display: block;
-  }
-
-  &.timer-recording:hover,
-  &.hide-hover:hover {
-    background-color: unset;
-  }
-
-  ::before {
-    content: '';
-    display: block;
-    width: 100%;
-    height: 20px;
-    background-color: transparent;
-    position: absolute;
-    bottom: 80%;
-    left: 0px;
-  }
-`;
-export const Divider = styled.div `
-  background-image: linear-gradient(to right, #d2d2d2 33%, rgba(255, 255, 255, 0) 0%);
-  background-position: center center;
-  background-repeat: repeat-x;
-  background-size: 4px 2px;
-  margin: 0 10px;
-  height: 2px;
-  max-width: 100%;
-
+    css `
+      position: unset;
+      width: 0px;
+      height: 0px;
+      /* border: 5px solid ${THEME.token?.blue7}; */
+    `}
+`;
+export const BorderOverlay = styled.div `
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  z-index: 999;
+  border: 5px solid ${THEME.token?.blue7};
+  box-sizing: border-box;
+  clip-path: polygon(
+    5px 5px,
+    5px 100%,
+    0 100%,
+    0 0,
+    100% 0,
+    100% 100%,
+    5px 100%,
+    5px calc(100% - 5px),
+    calc(100% - 5px) calc(100% - 5px),
+    calc(100% - 5px) 5px
+  );
+`;
+export const FlexColumn = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+`;
+export const FlexCenter = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 10px;
+`;
+export const WrapperIcon = styled.div `
+  position: absolute;
+  top: ${props => (props.isRecord ? -5 : 0)}px;
+  right: ${props => (props.isRecord ? -5 : 0)}px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 40px;
+  height: 40px;
+  cursor: pointer;
+  background-color: ${THEME.token?.blue7};
+  z-index: 10;
+`;
+export const DrawerGroups = styled.div `
+  display: flex;
+  align-items: center;
+  height: 52px;
+  background-color: ${THEME.token?.bw0};
+  z-index: 9999;
+`;
+export const WrapperDraggable = styled.strong `
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+  cursor: move;
+`;
+export const DrawerGroupItem = styled.div `
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* padding: 10px; */
+  cursor: pointer;
+
+  &:not(.active):hover {
+    background-color: #deeffe;
+    transition: all 0.3s linear;
+  }
+
+  &.active {
+    color: ${THEME.token?.colorPrimary};
+    background-color: #deeffe;
+  }
+
+  &:hover .toggle-popup-by-side {
+    display: block;
+  }
+
+  &.timer-recording:hover,
+  &.hide-hover:hover {
+    background-color: unset;
+  }
+
+  ::before {
+    content: '';
+    display: block;
+    width: 100%;
+    height: 20px;
+    background-color: transparent;
+    position: absolute;
+    bottom: 80%;
+    left: 0px;
+  }
+`;
+export const Divider = styled.div `
+  background-image: linear-gradient(to right, #d2d2d2 33%, rgba(255, 255, 255, 0) 0%);
+  background-position: center center;
+  background-repeat: repeat-x;
+  background-size: 4px 2px;
+  margin: 0 10px;
+  height: 2px;
+  max-width: 100%;
+
   ${props => props.isVertical &&
-    css `
-      margin: 0 -12px;
-      width: 36px;
-      transform: rotate(90deg);
-      background-size: 5px 2px;
-    `}
-`;
-export const PopupBySide = styled.div `
-  position: absolute;
-  bottom: calc(100% + 10px);
-  left: -6px;
-  display: none;
-  padding: 8px 10px 10px;
-  width: 124px;
-  min-height: 110px;
-  border-radius: ${THEME.token?.borderRadius}px;
-  box-shadow: 0px 4px 10px 0 rgba(0, 0, 0, 0.2);
-  background-color: ${THEME.token?.bw0};
-  cursor: default;
-`;
-export const Heading = styled(AntText) `
-  color: ${THEME.token?.colorText};
-  font-size: ${THEME.token?.fontSize};
-  font-weight: normal !important;
-`;
-export const WrapperColor = styled.div `
-  display: flex;
-  gap: 10px;
-  flex-wrap: wrap;
-`;
-export const BoxColor = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  border-radius: 50%;
-  border: solid 1px rgba(0, 0, 0, 0.12);
-  background-color: ${props => props.bgColor || '#0f2eae'};
-  cursor: pointer;
-`;
-export const ImageIcon = styled.img `
-  display: inline-block;
-  width: 24px;
-  height: 24px;
-  object-fit: cover;
-`;
-export const OutlineRemoveContainer = styled.div `
-  position: absolute;
-  display: none;
-  width: 200px;
-  height: 200px;
-  overflow: visible;
-  clip-path: polygon(
-    2px 2px,
-    2px 100%,
-    0 100%,
-    0 0,
-    100% 0,
-    100% 100%,
-    2px 100%,
-    2px calc(100% - 2px),
-    calc(100% - 2px) calc(100% - 2px),
-    calc(100% - 2px) 2px
-  );
-  transform: translate(-50%, -50%);
-  z-index: 99999;
-`;
-export const WrapperRemoveBtn = styled.div `
-  position: absolute;
-  display: none;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  cursor: pointer;
-  transform: translate(-50%, -50%);
-  z-index: 99999;
+    css `
+      margin: 0 -12px;
+      width: 36px;
+      transform: rotate(90deg);
+      background-size: 5px 2px;
+    `}
+`;
+export const PopupBySide = styled.div `
+  position: absolute;
+  bottom: calc(100% + 10px);
+  left: -6px;
+  display: none;
+  padding: 8px 10px 10px;
+  width: 124px;
+  min-height: 110px;
+  border-radius: ${THEME.token?.borderRadius}px;
+  box-shadow: 0px 4px 10px 0 rgba(0, 0, 0, 0.2);
+  background-color: ${THEME.token?.bw0};
+  cursor: default;
+`;
+export const Heading = styled(AntText) `
+  color: ${THEME.token?.colorText};
+  font-size: ${THEME.token?.fontSize};
+  font-weight: normal !important;
+`;
+export const WrapperColor = styled.div `
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+`;
+export const BoxColor = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  border: solid 1px rgba(0, 0, 0, 0.12);
+  background-color: ${props => props.bgColor || '#0f2eae'};
+  cursor: pointer;
+`;
+export const ImageIcon = styled.img `
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  object-fit: cover;
+`;
+export const OutlineRemoveContainer = styled.div `
+  position: absolute;
+  display: none;
+  width: 200px;
+  height: 200px;
+  overflow: visible;
+  clip-path: polygon(
+    2px 2px,
+    2px 100%,
+    0 100%,
+    0 0,
+    100% 0,
+    100% 100%,
+    2px 100%,
+    2px calc(100% - 2px),
+    calc(100% - 2px) calc(100% - 2px),
+    calc(100% - 2px) 2px
+  );
+  transform: translate(-50%, -50%);
+  z-index: 99999;
+`;
+export const WrapperRemoveBtn = styled.div `
+  position: absolute;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  transform: translate(-50%, -50%);
+  z-index: 99999;
 `;

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

@@ -2,28 +2,28 @@
 import styled from 'styled-components';
 // Tokens
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
-export const ItemStyled = styled.div `
-  box-sizing: border-box;
-  display: flex;
-  flex-wrap: nowrap;
-  gap: 8px;
-  align-items: center;
-  justify-content: space-between;
-
-  height: 32px;
-  min-width: 80px;
-  max-width: 130px;
-
-  background-color: ${props => (props.$isActive ? 'white' : THEME.token?.bw2)};
-  font-weight: ${props => (props.$isActive ? 500 : 400)};
-  padding: 6px 10px;
-
-  &:hover {
-    font-weight: 500;
-    background-color: ${THEME.token?.blue} !important;
-  }
-
-  span[contenteditable='true'] {
-    flex: 1;
-  }
+export const ItemStyled = styled.div `
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 8px;
+  align-items: center;
+  justify-content: space-between;
+
+  height: 32px;
+  min-width: 80px;
+  max-width: 130px;
+
+  background-color: ${props => (props.$isActive ? 'white' : THEME.token?.bw2)};
+  font-weight: ${props => (props.$isActive ? 500 : 400)};
+  padding: 6px 10px;
+
+  &:hover {
+    font-weight: 500;
+    background-color: ${THEME.token?.blue} !important;
+  }
+
+  span[contenteditable='true'] {
+    flex: 1;
+  }
 `;

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

@@ -1,23 +1,23 @@
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 import styled from 'styled-components';
-export const ChartTabStyled = styled.ul `
-  list-style-type: none;
-  display: flex;
-
-  & > li {
-    border: 1px solid #e5e5e5;
-    cursor: default;
-
-    &:first-child {
-      overflow: hidden;
-      border-top-left-radius: ${globalToken?.borderRadius}px;
-      border-bottom-left-radius: ${globalToken?.borderRadius}px;
-      /* border-top-left-radius: ${globalToken?.borderRadius}; */
-    }
-    &:last-child {
-      overflow: hidden;
-      border-top-right-radius: ${globalToken?.borderRadius}px;
-      border-bottom-right-radius: ${globalToken?.borderRadius}px;
-    }
-  }
+export const ChartTabStyled = styled.ul `
+  list-style-type: none;
+  display: flex;
+
+  & > li {
+    border: 1px solid #e5e5e5;
+    cursor: default;
+
+    &:first-child {
+      overflow: hidden;
+      border-top-left-radius: ${globalToken?.borderRadius}px;
+      border-bottom-left-radius: ${globalToken?.borderRadius}px;
+      /* border-top-left-radius: ${globalToken?.borderRadius}; */
+    }
+    &:last-child {
+      overflow: hidden;
+      border-top-right-radius: ${globalToken?.borderRadius}px;
+      border-bottom-right-radius: ${globalToken?.borderRadius}px;
+    }
+  }
 `;

package/es/components/molecules/ChatBox/AntsomiAI.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from 'styled-components';
 const AntsomiAI = () => {
-    const WrapperAvatar = styled.div `
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    padding: 3px;
-    border: 1px solid #e5e5e5;
-    border-radius: 10px;
+    const WrapperAvatar = styled.div `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    padding: 3px;
+    border: 1px solid #e5e5e5;
+    border-radius: 10px;
   `;
     return (_jsx(WrapperAvatar, { className: "icon", children: _jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsxs("g", { clipPath: "url(#clip0_7_1294)", children: [_jsx("path", { d: "M13.2396 10.1461L10.0431 2.91297C9.92278 2.64229 9.72729 2.41029 9.47595 2.24702C9.22675 2.08375 8.93459 1.99783 8.63814 1.99783C8.34168 1.99783 8.04952 2.08375 7.80033 2.24702C7.55114 2.41029 7.3535 2.64015 7.2332 2.91297L0.131156 18.9731C0.0495231 19.1579 0.00441035 19.3555 0.000113897 19.5553C-0.00418256 19.7551 0.0301891 19.957 0.103229 20.1439C0.176269 20.3308 0.285828 20.5027 0.425463 20.6487C0.565098 20.7948 0.730511 20.9108 0.915259 20.9925C1.10001 21.0741 1.29764 21.1171 1.49958 21.1235C1.70151 21.1299 1.9013 21.0934 2.09034 21.0204C2.27938 20.9473 2.45124 20.8399 2.59517 20.7003C2.7391 20.5607 2.85726 20.3952 2.93889 20.2127L8.63599 7.32758L10.911 12.4704L13.2396 10.1461Z", fill: "#005EB8" }), _jsx("path", { d: "M17.1429 18.9731L15.0677 14.275L12.7412 16.5929L14.3373 20.2041C14.5028 20.5757 14.8078 20.8657 15.188 21.014C15.5683 21.16 15.9915 21.1514 16.3631 20.9882C16.7348 20.8249 17.0269 20.5199 17.1752 20.1418C17.3234 19.7637 17.3126 19.3426 17.1472 18.971", fill: "#005EB8" }), _jsx("path", { d: "M16.8252 8.19764C16.5373 7.90977 16.1463 7.74866 15.7403 7.74866C15.3343 7.74866 14.9433 7.90977 14.6554 8.19764L8.59959 14.2299L6.21506 11.8539L4.88745 14.8593L7.51259 17.4737C7.80045 17.7615 8.19143 17.9227 8.59744 17.9227C9.00346 17.9227 9.39443 17.7615 9.6823 17.4737L16.823 10.3566C17.1109 10.0709 17.272 9.67991 17.272 9.2739C17.272 8.86788 17.1109 8.47905 16.823 8.19334L16.8252 8.19764Z", fill: "#EF3340" }), _jsx("path", { d: "M6.67046 11.7723L5.00988 15.5274L2.68335 13.2094L4.34393 9.45435L6.67046 11.7723Z", fill: "#005EB8" }), _jsx("path", { d: "M22.7991 19.9355C23.1127 19.9355 23.3641 19.6821 23.551 19.1772L23.9978 19.2481C23.9978 19.4071 23.9355 19.6112 23.8088 19.8647C23.6992 20.101 23.566 20.2986 23.4092 20.4576C23.001 20.9001 22.3888 21.1214 21.5746 21.1214C19.8968 21.1214 19.0569 20.3394 19.0569 18.7734V9.41997C19.0569 8.53705 19.7722 7.81954 20.6573 7.81954C21.5402 7.81954 22.2577 8.5349 22.2577 9.41997V19.1278C22.2577 19.6649 22.4382 19.9334 22.7991 19.9334V19.9355Z", fill: "url(#paint0_linear_7_1294)" }), _jsx("path", { d: "M20.5628 6.40601C21.6899 6.40601 22.6036 5.49231 22.6036 4.3652C22.6036 3.23808 21.6899 2.32438 20.5628 2.32438C19.4357 2.32438 18.522 3.23808 18.522 4.3652C18.522 5.49231 19.4357 6.40601 20.5628 6.40601Z", fill: "#EF3340" })] }), _jsxs("defs", { children: [_jsxs("linearGradient", { id: "paint0_linear_7_1294", x1: "21.5295", y1: "21.1214", x2: "21.5295", y2: "7.82169", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#005EB8" }), _jsx("stop", { offset: "1", stopColor: "#EF3340" })] }), _jsx("clipPath", { id: "clip0_7_1294", children: _jsx("rect", { width: "24", height: "24", fill: "white" }) })] })] }) }));
 };

package/es/components/molecules/ChatBox/ChatBoxInsight/QuestionItem.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled from 'styled-components';
-const Item = styled.div `
-  padding: 5px 10px;
-  background-color: #ffffff;
-  border-radius: 10px;
-  cursor: pointer;
-
-  &:hover {
-    background-color: #f2f9ff;
-  }
+const Item = styled.div `
+  padding: 5px 10px;
+  background-color: #ffffff;
+  border-radius: 10px;
+  cursor: pointer;
+
+  &:hover {
+    background-color: #f2f9ff;
+  }
 `;
 export const QuestionItem = props => {
     const { message, onClickItem } = props;