@antscorp/antsomi-ui 1.3.3-beta.2 → 1.3.3-beta.21

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

@@ -1,255 +1,255 @@
-var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-// Libraries
-import styled, { css } from 'styled-components';
-import { Typography } from 'antd';
-// Constants
-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 ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.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 ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.blue7}; */
-    overflow: hidden;
-    box-sizing: border-box;
-  }
-
-  &.hide-cursor .tui-image-editor-canvas-container .upper-canvas {
-    cursor: none !important;
-  }
-
-  ${props => {
-    var _a;
-    return props.isRecord &&
-        css `
-      position: unset;
-      width: 0px;
-      height: 0px;
-      /* border: 5px solid ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.blue7}; */
-    `;
-}}
-`;
-export const BorderOverlay = styled.div `
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  width: 100%;
-  height: 100%;
-  z-index: 999;
-  border: 5px solid ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.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: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.blue7};
-  z-index: 10;
-`;
-export const DrawerGroups = styled.div `
-  display: flex;
-  align-items: center;
-  height: 52px;
-  background-color: ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.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: ${(_f = THEME.token) === null || _f === void 0 ? void 0 : _f.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: ${(_g = THEME.token) === null || _g === void 0 ? void 0 : _g.borderRadius}px;
-  box-shadow: 0px 4px 10px 0 rgba(0, 0, 0, 0.2);
-  background-color: ${(_h = THEME.token) === null || _h === void 0 ? void 0 : _h.bw0};
-  cursor: default;
-`;
-export const Heading = styled(AntText) `
-  color: ${(_j = THEME.token) === null || _j === void 0 ? void 0 : _j.colorText};
-  font-size: ${(_k = THEME.token) === null || _k === void 0 ? void 0 : _k.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;
-`;
+var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+// Libraries
+import styled, { css } from 'styled-components';
+import { Typography } from 'antd';
+// Constants
+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 ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.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 ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.blue7}; */
+    overflow: hidden;
+    box-sizing: border-box;
+  }
+
+  &.hide-cursor .tui-image-editor-canvas-container .upper-canvas {
+    cursor: none !important;
+  }
+
+  ${props => {
+    var _a;
+    return props.isRecord &&
+        css `
+      position: unset;
+      width: 0px;
+      height: 0px;
+      /* border: 5px solid ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.blue7}; */
+    `;
+}}
+`;
+export const BorderOverlay = styled.div `
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  z-index: 999;
+  border: 5px solid ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.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: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.blue7};
+  z-index: 10;
+`;
+export const DrawerGroups = styled.div `
+  display: flex;
+  align-items: center;
+  height: 52px;
+  background-color: ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.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: ${(_f = THEME.token) === null || _f === void 0 ? void 0 : _f.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: ${(_g = THEME.token) === null || _g === void 0 ? void 0 : _g.borderRadius}px;
+  box-shadow: 0px 4px 10px 0 rgba(0, 0, 0, 0.2);
+  background-color: ${(_h = THEME.token) === null || _h === void 0 ? void 0 : _h.bw0};
+  cursor: default;
+`;
+export const Heading = styled(AntText) `
+  color: ${(_j = THEME.token) === null || _j === void 0 ? void 0 : _j.colorText};
+  font-size: ${(_k = THEME.token) === null || _k === void 0 ? void 0 : _k.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/CaptureScreen/themes/black.d.ts

@@ -1,54 +1,54 @@
-export declare const blackTheme: {
-    'common.bi.image': string;
-    'common.bisize.width': string;
-    'common.bisize.height': string;
-    'common.backgroundImage': string;
-    'common.backgroundColor': string;
-    'common.border': string;
-    'header.backgroundImage': string;
-    'header.backgroundColor': string;
-    'header.border': string;
-    'loadButton.backgroundColor': string;
-    'loadButton.border': string;
-    'loadButton.color': string;
-    'loadButton.fontFamily': string;
-    'loadButton.fontSize': string;
-    'downloadButton.backgroundColor': string;
-    'downloadButton.border': string;
-    'downloadButton.color': string;
-    'downloadButton.fontFamily': string;
-    'downloadButton.fontSize': string;
-    'menu.normalIcon.color': string;
-    'menu.activeIcon.color': string;
-    'menu.disabledIcon.color': string;
-    'menu.hoverIcon.color': string;
-    'menu.iconSize.width': string;
-    'menu.iconSize.height': string;
-    'submenu.normalIcon.color': string;
-    'submenu.activeIcon.color': string;
-    'submenu.iconSize.width': string;
-    'submenu.iconSize.height': string;
-    'submenu.backgroundColor': string;
-    'submenu.partition.color': string;
-    'submenu.normalLabel.color': string;
-    'submenu.normalLabel.fontWeight': string;
-    'submenu.activeLabel.color': string;
-    'submenu.activeLabel.fontWeight': string;
-    'checkbox.border': string;
-    'checkbox.backgroundColor': string;
-    'range.pointer.color': string;
-    'range.bar.color': string;
-    'range.subbar.color': string;
-    'range.disabledPointer.color': string;
-    'range.disabledBar.color': string;
-    'range.disabledSubbar.color': string;
-    'range.value.color': string;
-    'range.value.fontWeight': string;
-    'range.value.fontSize': string;
-    'range.value.border': string;
-    'range.value.backgroundColor': string;
-    'range.title.color': string;
-    'range.title.fontWeight': string;
-    'colorpicker.button.border': string;
-    'colorpicker.title.color': string;
-};
+export declare const blackTheme: {
+    'common.bi.image': string;
+    'common.bisize.width': string;
+    'common.bisize.height': string;
+    'common.backgroundImage': string;
+    'common.backgroundColor': string;
+    'common.border': string;
+    'header.backgroundImage': string;
+    'header.backgroundColor': string;
+    'header.border': string;
+    'loadButton.backgroundColor': string;
+    'loadButton.border': string;
+    'loadButton.color': string;
+    'loadButton.fontFamily': string;
+    'loadButton.fontSize': string;
+    'downloadButton.backgroundColor': string;
+    'downloadButton.border': string;
+    'downloadButton.color': string;
+    'downloadButton.fontFamily': string;
+    'downloadButton.fontSize': string;
+    'menu.normalIcon.color': string;
+    'menu.activeIcon.color': string;
+    'menu.disabledIcon.color': string;
+    'menu.hoverIcon.color': string;
+    'menu.iconSize.width': string;
+    'menu.iconSize.height': string;
+    'submenu.normalIcon.color': string;
+    'submenu.activeIcon.color': string;
+    'submenu.iconSize.width': string;
+    'submenu.iconSize.height': string;
+    'submenu.backgroundColor': string;
+    'submenu.partition.color': string;
+    'submenu.normalLabel.color': string;
+    'submenu.normalLabel.fontWeight': string;
+    'submenu.activeLabel.color': string;
+    'submenu.activeLabel.fontWeight': string;
+    'checkbox.border': string;
+    'checkbox.backgroundColor': string;
+    'range.pointer.color': string;
+    'range.bar.color': string;
+    'range.subbar.color': string;
+    'range.disabledPointer.color': string;
+    'range.disabledBar.color': string;
+    'range.disabledSubbar.color': string;
+    'range.value.color': string;
+    'range.value.fontWeight': string;
+    'range.value.fontSize': string;
+    'range.value.border': string;
+    'range.value.backgroundColor': string;
+    'range.title.color': string;
+    'range.title.fontWeight': string;
+    'colorpicker.button.border': string;
+    'colorpicker.title.color': string;
+};