@antscorp/antsomi-ui 2.0.101 → 2.0.102

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

@@ -2,74 +2,74 @@
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 // Constants
 import styled, { css } from 'styled-components';
-export const PlusCursor = styled.div `
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background-color: red;
-  width: 30px;
-  height: 30px;
-  /* border-radius: 50%; */
-  background: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
-  background-position: center;
-  background-size: 90% 2px, 2px 90%; /*thickness = 2px, length = 50% (25px)*/
-  background-repeat: no-repeat;
-  box-sizing: border-box;
-  cursor: none;
-  pointer-events: none;
-  z-index: 999999;
+export const PlusCursor = styled.div `
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: red;
+  width: 30px;
+  height: 30px;
+  /* border-radius: 50%; */
+  background: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
+  background-position: center;
+  background-size: 90% 2px, 2px 90%; /*thickness = 2px, length = 50% (25px)*/
+  background-repeat: no-repeat;
+  box-sizing: border-box;
+  cursor: none;
+  pointer-events: none;
+  z-index: 999999;
 `;
-export const TooltipDrag = styled.div `
-  position: absolute;
-  top: 50%;
-  /* left: 50%; */
-  left: calc(100% + 10px);
-  /* transform: translate(-50%, -50%); */
-  transform: translateY(-50%);
-  height: 30px;
-  padding: 0px 8px;
-  border-radius: ${THEME.token?.borderRadius}px;
-  background-color: #515151;
-  font-size: ${THEME.token?.fontSize}px;
-  color: ${THEME.token?.bw0};
-  font-family: ${THEME.token?.fontFamily};
-  line-height: 30px;
-  white-space: nowrap;
-  box-sizing: border-box;
-  user-select: none;
-  z-index: 9999;
+export const TooltipDrag = styled.div `
+  position: absolute;
+  top: 50%;
+  /* left: 50%; */
+  left: calc(100% + 10px);
+  /* transform: translate(-50%, -50%); */
+  transform: translateY(-50%);
+  height: 30px;
+  padding: 0px 8px;
+  border-radius: ${THEME.token?.borderRadius}px;
+  background-color: #515151;
+  font-size: ${THEME.token?.fontSize}px;
+  color: ${THEME.token?.bw0};
+  font-family: ${THEME.token?.fontFamily};
+  line-height: 30px;
+  white-space: nowrap;
+  box-sizing: border-box;
+  user-select: none;
+  z-index: 9999;
 `;
-export const DottedCursor = styled.div `
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background-color: ${props => props.bgColor || '#0f2eae'};
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  border: 3px solid ${THEME.token?.bw0};
-  box-sizing: border-box;
-  cursor: none;
-  pointer-events: none;
-  z-index: 999999;
-
+export const DottedCursor = styled.div `
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: ${props => props.bgColor || '#0f2eae'};
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 3px solid ${THEME.token?.bw0};
+  box-sizing: border-box;
+  cursor: none;
+  pointer-events: none;
+  z-index: 999999;
+
   ${props => props.isPointerBox &&
-    css `
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      width: ${props.offset * 2}px;
-      height: ${props.offset * 2}px;
-      border-radius: 50%;
-
-      box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.5);
-      background-color: ${THEME.token?.bw0};
-      color: ${props.bgColor ? props.bgColor : THEME.token?.bw0};
-      font-size: 16px;
-
-      font-family: ${THEME.token?.fontFamily};
-    `}
+    css `
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      width: ${props.offset * 2}px;
+      height: ${props.offset * 2}px;
+      border-radius: 50%;
+
+      box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.5);
+      background-color: ${THEME.token?.bw0};
+      color: ${props.bgColor ? props.bgColor : THEME.token?.bw0};
+      font-size: 16px;
+
+      font-family: ${THEME.token?.fontFamily};
+    `}
 `;

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;
+  }
 `;