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

package/es/components/molecules/CaptureScreen/components/CommentBox/CommentBox.d.ts

@@ -1,16 +1,17 @@
-import { CommentBoxProps } from './types';
-declare const CommentBox: {
-    (props: CommentBoxProps): JSX.Element;
-    defaultProps: {
-        info: {
-            id: string;
-            top: number;
-            left: number;
-            index: number;
-            isSubmitted: boolean;
-        };
-        offset: number;
-        onChangeComment: () => void;
-    };
-};
-export { CommentBox };
+import React from 'react';
+import { CommentBoxProps } from './types';
+declare const CommentBox: {
+    (props: CommentBoxProps): React.JSX.Element;
+    defaultProps: {
+        info: {
+            id: string;
+            top: number;
+            left: number;
+            index: number;
+            isSubmitted: boolean;
+        };
+        offset: number;
+        onChangeComment: () => void;
+    };
+};
+export { CommentBox };

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

@@ -1,80 +1,80 @@
-// Libraries
-import React, { useEffect, useState } from 'react';
-import Draggable from 'react-draggable';
-// Components
-import Icon from '@antscorp/icons';
-import { Space, Button } from 'antd';
-// Constanst
-import { THEME } from '@antscorp/antsomi-ui/es/constants';
-// Hooks
-import { useDebounce } from '@antscorp/antsomi-ui/es/hooks/useDebounce';
-// Styled
-import { CommentBoxed, CommentPoint, RoundedDashed, TextArea, WrapperIcon } from './styled';
-const LIMIT_CONTENT_COMMENT = 200;
-const CommentBox = (props) => {
-    var _a;
-    const { info, offset, className, boxDimension, onChangeComment } = props;
-    const [activeDrags, setActiveDrags] = useState(0);
-    const [positionDrag] = useState({
-        top: info.top,
-        left: info.left,
-    });
-    const [debouncedPosition, _positionOriginal, setPositionDrag] = useDebounce(positionDrag, 400);
-    const handleStart = () => {
-        setActiveDrags(activeDrags + 1);
-    };
-    const handleStop = () => {
-        setActiveDrags(activeDrags - 1);
-    };
-    const handleDrag = (_e, _ui) => {
-        try {
-            const left = _ui.node.offsetLeft;
-            const top = _ui.node.offsetTop;
-            setPositionDrag({
-                left,
-                top,
-            });
-        }
-        catch (error) {
-            console.log('error :>', error);
-        }
-    };
-    useEffect(() => {
-        if (typeof onChangeComment === 'function') {
-            onChangeComment('CHANGE_CONTENT', Object.assign(Object.assign({}, info), debouncedPosition));
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [debouncedPosition]);
-    return (React.createElement(Draggable, { bounds: "canvas", onDrag: handleDrag, onStart: handleStart, onStop: handleStop },
-        React.createElement(CommentPoint, { color: info.color, isSubmitted: info.isSubmitted, id: info.id, offset: offset, left: info.left, top: info.top, className: `${className} comment-point` },
-            info.index,
-            React.createElement(CommentBoxed, { boxDimension: boxDimension, isReverseAxisX: info.isReverseAxisX, isReverseAxisY: info.isReverseAxisY, className: className },
-                React.createElement(Space, { direction: "vertical", size: 10 },
-                    React.createElement(TextArea, { placeholder: "Enter comment \u2026", value: info.content, disabled: info.isSubmitted, maxLength: LIMIT_CONTENT_COMMENT, onChange: event => {
-                            const { value } = event === null || event === void 0 ? void 0 : event.target;
-                            if (value && value.length <= LIMIT_CONTENT_COMMENT) {
-                                onChangeComment('CHANGE_CONTENT', Object.assign(Object.assign({}, info), { content: value }));
-                            }
-                        } }),
-                    !info.isSubmitted && (React.createElement(Space, { size: 15 },
-                        React.createElement(Button, { type: "primary", disabled: !info.content, style: { height: 28 }, onClick: () => onChangeComment('SUBMIT', info) }, "Comment"),
-                        React.createElement(Button, { style: { height: 28 }, onClick: () => onChangeComment('CANCEL', info) }, "Cancel"))))),
-            React.createElement(RoundedDashed, { offset: offset, className: "rounded-dashed" }),
-            React.createElement(WrapperIcon, { className: "icon-close-comment", onClick: e => {
-                    e.stopPropagation();
-                    onChangeComment('CANCEL', info);
-                } },
-                React.createElement(Icon, { type: "icon-ants-remove-trash", style: { fontSize: '20px', color: `${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorIcon}` } })))));
-};
-CommentBox.defaultProps = {
-    info: {
-        id: 'random_id',
-        top: 50,
-        left: 50,
-        index: 1,
-        isSubmitted: false,
-    },
-    offset: 20,
-    onChangeComment: () => { },
-};
-export { CommentBox };
+// Libraries
+import React, { useEffect, useState } from 'react';
+import Draggable from 'react-draggable';
+// Components
+import Icon from '@antscorp/icons';
+import { Space, Button } from 'antd';
+// Constanst
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+// Hooks
+import { useDebounce } from '@antscorp/antsomi-ui/es/hooks/useDebounce';
+// Styled
+import { CommentBoxed, CommentPoint, RoundedDashed, TextArea, WrapperIcon } from './styled';
+const LIMIT_CONTENT_COMMENT = 200;
+const CommentBox = (props) => {
+    var _a;
+    const { info, offset, className, boxDimension, onChangeComment } = props;
+    const [activeDrags, setActiveDrags] = useState(0);
+    const [positionDrag] = useState({
+        top: info.top,
+        left: info.left,
+    });
+    const [debouncedPosition, _positionOriginal, setPositionDrag] = useDebounce(positionDrag, 400);
+    const handleStart = () => {
+        setActiveDrags(activeDrags + 1);
+    };
+    const handleStop = () => {
+        setActiveDrags(activeDrags - 1);
+    };
+    const handleDrag = (_e, _ui) => {
+        try {
+            const left = _ui.node.offsetLeft;
+            const top = _ui.node.offsetTop;
+            setPositionDrag({
+                left,
+                top,
+            });
+        }
+        catch (error) {
+            console.log('error :>', error);
+        }
+    };
+    useEffect(() => {
+        if (typeof onChangeComment === 'function') {
+            onChangeComment('CHANGE_CONTENT', Object.assign(Object.assign({}, info), debouncedPosition));
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [debouncedPosition]);
+    return (React.createElement(Draggable, { bounds: "canvas", onDrag: handleDrag, onStart: handleStart, onStop: handleStop },
+        React.createElement(CommentPoint, { color: info.color, isSubmitted: info.isSubmitted, id: info.id, offset: offset, left: info.left, top: info.top, className: `${className} comment-point` },
+            info.index,
+            React.createElement(CommentBoxed, { boxDimension: boxDimension, isReverseAxisX: info.isReverseAxisX, isReverseAxisY: info.isReverseAxisY, className: className },
+                React.createElement(Space, { direction: "vertical", size: 10 },
+                    React.createElement(TextArea, { placeholder: "Enter comment \u2026", value: info.content, disabled: info.isSubmitted, maxLength: LIMIT_CONTENT_COMMENT, onChange: event => {
+                            const { value } = event === null || event === void 0 ? void 0 : event.target;
+                            if (value && value.length <= LIMIT_CONTENT_COMMENT) {
+                                onChangeComment('CHANGE_CONTENT', Object.assign(Object.assign({}, info), { content: value }));
+                            }
+                        } }),
+                    !info.isSubmitted && (React.createElement(Space, { size: 15 },
+                        React.createElement(Button, { type: "primary", disabled: !info.content, style: { height: 28 }, onClick: () => onChangeComment('SUBMIT', info) }, "Comment"),
+                        React.createElement(Button, { style: { height: 28 }, onClick: () => onChangeComment('CANCEL', info) }, "Cancel"))))),
+            React.createElement(RoundedDashed, { offset: offset, className: "rounded-dashed" }),
+            React.createElement(WrapperIcon, { className: "icon-close-comment", onClick: e => {
+                    e.stopPropagation();
+                    onChangeComment('CANCEL', info);
+                } },
+                React.createElement(Icon, { type: "icon-ants-remove-trash", style: { fontSize: '20px', color: `${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorIcon}` } })))));
+};
+CommentBox.defaultProps = {
+    info: {
+        id: 'random_id',
+        top: 50,
+        left: 50,
+        index: 1,
+        isSubmitted: false,
+    },
+    offset: 20,
+    onChangeComment: () => { },
+};
+export { CommentBox };

package/es/components/molecules/CaptureScreen/components/CommentBox/index.d.ts

@@ -1 +1 @@
-export { CommentBox } from './CommentBox';
+export { CommentBox } from './CommentBox';

package/es/components/molecules/CaptureScreen/components/CommentBox/index.js

@@ -1 +1 @@
-export { CommentBox } from './CommentBox';
+export { CommentBox } from './CommentBox';

package/es/components/molecules/CaptureScreen/components/CommentBox/styled.d.ts

@@ -1,12 +1,12 @@
-import { BoxDimensionProps, CommentPointProps } from './types';
-export declare const CommentPoint: import("styled-components").StyledComponent<"div", any, CommentPointProps, never>;
-export declare const RoundedDashed: import("styled-components").StyledComponent<"div", any, {
-    offset: number;
-}, never>;
-export declare const CommentBoxed: import("styled-components").StyledComponent<"div", any, {
-    boxDimension: BoxDimensionProps;
-    isReverseAxisX: boolean;
-    isReverseAxisY: boolean;
-}, never>;
-export declare const TextArea: import("styled-components").StyledComponent<"textarea", any, {}, never>;
-export declare const WrapperIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
+import { BoxDimensionProps, CommentPointProps } from './types';
+export declare const CommentPoint: import("styled-components").StyledComponent<"div", any, CommentPointProps, never>;
+export declare const RoundedDashed: import("styled-components").StyledComponent<"div", any, {
+    offset: number;
+}, never>;
+export declare const CommentBoxed: import("styled-components").StyledComponent<"div", any, {
+    boxDimension: BoxDimensionProps;
+    isReverseAxisX: boolean;
+    isReverseAxisY: boolean;
+}, never>;
+export declare const TextArea: import("styled-components").StyledComponent<"textarea", any, {}, never>;
+export declare const WrapperIcon: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,136 +1,136 @@
-var _a, _b, _c, _d, _e, _f;
-// Libraries
-import styled, { css } from 'styled-components';
-// Constants
-import { THEME } from '@antscorp/antsomi-ui/es/constants';
-export const CommentPoint = styled.div `
-  position: fixed;
-  top: ${props => props.top}px;
-  left: ${props => props.left}px;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  width: ${props => props.offset * 2}px;
-  height: ${props => props.offset * 2}px;
-  border-radius: 50%;
-
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.5);
-  /* background-color: ${props => { var _a; return props.isSubmitted ? `${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw0}` : `${props.color}`; }}; */
-  background-color: ${props => { var _a; return (props.color ? props.color : `${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw0}`); }};
-  /* color: ${props => { var _a, _b; return (props.isSubmitted ? `${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.blue8}` : `${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.bw0}`); }}; */
-  color: ${props => { var _a, _b; return (props.color ? `${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw0}` : `${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorText}`); }};
-  font-size: 16px;
-
-  /* pointer-events: ${props => (props.isSubmitted ? 'none' : 'visible')}; */
-  font-family: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.fontFamily};
-  z-index: 99;
-  cursor: grab;
-
-  :hover {
-    z-index: 999999;
-  }
-
-  :hover .icon-close-comment,
-  :hover .rounded-dashed {
-    display: block;
-  }
-`;
-export const RoundedDashed = styled.div `
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: none;
-  border: 2px dashed #707070;
-  width: ${props => props.offset * 2 + 1}px;
-  height: ${props => props.offset * 2 + 1}px;
-`;
-export const CommentBoxed = styled.div `
-  position: absolute;
-  width: ${props => props.boxDimension.width}px;
-  /* height: 170px; */
-  max-height: ${props => props.boxDimension.height}px;
-  padding: 15px;
-  border-radius: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.borderRadius}px;
-
-  box-shadow: 0px 11px 15px 0 rgba(0, 0, 0, 0.2);
-  background-color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.bw0};
-  font-family: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.fontFamily};
-  cursor: grab;
-
-  ::before {
-    content: '';
-    position: absolute;
-    display: block;
-    border: 16px solid transparent;
-  }
-
-  :hover ~ .icon-close-comment,
-  :hover ~ .rounded-dashed {
-    display: none;
-  }
-
-  /* Tính toán lại vị trí của box comment khi box bị che */
-  ${props => {
-    var _a, _b;
-    return props.isReverseAxisY
-        ? css `
-          bottom: 50%;
-          border-bottom-left-radius: 0px;
-
-          ::before {
-            bottom: 0;
-            border-bottom-color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw0};
-          }
-        `
-        : css `
-          top: 50%;
-          border-top-left-radius: 0px;
-
-          ::before {
-            top: 0;
-            border-top-color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.bw0};
-          }
-        `;
-}}
-
-  ${props => props.isReverseAxisX
-    ? css `
-          right: calc(100% + 24px);
-
-          ::before {
-            right: -15px;
-          }
-        `
-    : css `
-          left: calc(100% + 24px);
-
-          ::before {
-            left: -15px;
-          }
-        `}
-`;
-export const TextArea = styled.textarea `
-  width: 300px;
-  height: 100px;
-  padding: 10px;
-  border: solid 1px rgba(0, 0, 0, 0.12);
-  outline: none;
-  font-family: ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.fontFamily};
-  font-size: ${(_f = THEME.token) === null || _f === void 0 ? void 0 : _f.fontSize}px;
-  color: #999999;
-  resize: none;
-`;
-export const WrapperIcon = styled.div `
-  position: absolute;
-  top: 0;
-  left: 80%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transform: translateY(-50%);
-
-  display: none;
-  z-index: 10;
-`;
+var _a, _b, _c, _d, _e, _f;
+// Libraries
+import styled, { css } from 'styled-components';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const CommentPoint = styled.div `
+  position: fixed;
+  top: ${props => props.top}px;
+  left: ${props => props.left}px;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  width: ${props => props.offset * 2}px;
+  height: ${props => props.offset * 2}px;
+  border-radius: 50%;
+
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.5);
+  /* background-color: ${props => { var _a; return props.isSubmitted ? `${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw0}` : `${props.color}`; }}; */
+  background-color: ${props => { var _a; return (props.color ? props.color : `${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw0}`); }};
+  /* color: ${props => { var _a, _b; return (props.isSubmitted ? `${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.blue8}` : `${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.bw0}`); }}; */
+  color: ${props => { var _a, _b; return (props.color ? `${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw0}` : `${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorText}`); }};
+  font-size: 16px;
+
+  /* pointer-events: ${props => (props.isSubmitted ? 'none' : 'visible')}; */
+  font-family: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.fontFamily};
+  z-index: 99;
+  cursor: grab;
+
+  :hover {
+    z-index: 999999;
+  }
+
+  :hover .icon-close-comment,
+  :hover .rounded-dashed {
+    display: block;
+  }
+`;
+export const RoundedDashed = styled.div `
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: none;
+  border: 2px dashed #707070;
+  width: ${props => props.offset * 2 + 1}px;
+  height: ${props => props.offset * 2 + 1}px;
+`;
+export const CommentBoxed = styled.div `
+  position: absolute;
+  width: ${props => props.boxDimension.width}px;
+  /* height: 170px; */
+  max-height: ${props => props.boxDimension.height}px;
+  padding: 15px;
+  border-radius: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.borderRadius}px;
+
+  box-shadow: 0px 11px 15px 0 rgba(0, 0, 0, 0.2);
+  background-color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.bw0};
+  font-family: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.fontFamily};
+  cursor: grab;
+
+  ::before {
+    content: '';
+    position: absolute;
+    display: block;
+    border: 16px solid transparent;
+  }
+
+  :hover ~ .icon-close-comment,
+  :hover ~ .rounded-dashed {
+    display: none;
+  }
+
+  /* Tính toán lại vị trí của box comment khi box bị che */
+  ${props => {
+    var _a, _b;
+    return props.isReverseAxisY
+        ? css `
+          bottom: 50%;
+          border-bottom-left-radius: 0px;
+
+          ::before {
+            bottom: 0;
+            border-bottom-color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw0};
+          }
+        `
+        : css `
+          top: 50%;
+          border-top-left-radius: 0px;
+
+          ::before {
+            top: 0;
+            border-top-color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.bw0};
+          }
+        `;
+}}
+
+  ${props => props.isReverseAxisX
+    ? css `
+          right: calc(100% + 24px);
+
+          ::before {
+            right: -15px;
+          }
+        `
+    : css `
+          left: calc(100% + 24px);
+
+          ::before {
+            left: -15px;
+          }
+        `}
+`;
+export const TextArea = styled.textarea `
+  width: 300px;
+  height: 100px;
+  padding: 10px;
+  border: solid 1px rgba(0, 0, 0, 0.12);
+  outline: none;
+  font-family: ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.fontFamily};
+  font-size: ${(_f = THEME.token) === null || _f === void 0 ? void 0 : _f.fontSize}px;
+  color: #999999;
+  resize: none;
+`;
+export const WrapperIcon = styled.div `
+  position: absolute;
+  top: 0;
+  left: 80%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: translateY(-50%);
+
+  display: none;
+  z-index: 10;
+`;

package/es/components/molecules/CaptureScreen/components/CommentBox/types.d.ts

@@ -1,15 +1,15 @@
-import { CommentListProps } from '../../types';
-export interface BoxDimensionProps {
-    width: number;
-    height: number;
-}
-export interface CommentBoxProps {
-    className?: string;
-    info: CommentListProps;
-    offset: number;
-    boxDimension: BoxDimensionProps;
-    onChangeComment: Function;
-}
-export interface CommentPointProps extends Pick<CommentListProps, 'left' | 'top' | 'isSubmitted' | 'color'> {
-    offset: number;
-}
+import { CommentListProps } from '../../types';
+export interface BoxDimensionProps {
+    width: number;
+    height: number;
+}
+export interface CommentBoxProps {
+    className?: string;
+    info: CommentListProps;
+    offset: number;
+    boxDimension: BoxDimensionProps;
+    onChangeComment: Function;
+}
+export interface CommentPointProps extends Pick<CommentListProps, 'left' | 'top' | 'isSubmitted' | 'color'> {
+    offset: number;
+}

package/es/components/molecules/CaptureScreen/components/CommentBox/types.js

@@ -1 +1 @@
-export {};
+export {};

package/es/components/molecules/CaptureScreen/components/Cursor/Cursor.d.ts

@@ -1,3 +1,4 @@
-import { CursorProps } from './types';
-declare const Cursor: (props: CursorProps) => JSX.Element | null;
-export { Cursor };
+import React from 'react';
+import { CursorProps } from './types';
+declare const Cursor: (props: CursorProps) => React.JSX.Element | null;
+export { Cursor };

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

@@ -1,17 +1,17 @@
-// Libraries
-import React from 'react';
-// Styled
-import { DottedCursor, PlusCursor, TooltipDrag } from './styled';
-// Constants
-import { DRAW_KEYS } from '../../constants';
-const Cursor = (props) => {
-    const { bgColor, cursorRef, drawItemType, isShowCursor, isPointerBox, offset, children } = props;
-    if (!isShowCursor)
-        return null;
-    if (drawItemType === DRAW_KEYS.HIGHLIGHT) {
-        return (React.createElement(PlusCursor, { ref: cursorRef },
-            React.createElement(TooltipDrag, null, "Click & drag to draw")));
-    }
-    return (React.createElement(DottedCursor, { isPointerBox: isPointerBox, offset: offset, ref: cursorRef, bgColor: bgColor }, children));
-};
-export { Cursor };
+// Libraries
+import React from 'react';
+// Styled
+import { DottedCursor, PlusCursor, TooltipDrag } from './styled';
+// Constants
+import { DRAW_KEYS } from '../../constants';
+const Cursor = (props) => {
+    const { bgColor, cursorRef, drawItemType, isShowCursor, isPointerBox, offset, children } = props;
+    if (!isShowCursor)
+        return null;
+    if (drawItemType === DRAW_KEYS.HIGHLIGHT) {
+        return (React.createElement(PlusCursor, { ref: cursorRef },
+            React.createElement(TooltipDrag, null, "Click & drag to draw")));
+    }
+    return (React.createElement(DottedCursor, { isPointerBox: isPointerBox, offset: offset, ref: cursorRef, bgColor: bgColor }, children));
+};
+export { Cursor };

package/es/components/molecules/CaptureScreen/components/Cursor/index.d.ts

@@ -1 +1 @@
-export { Cursor } from './Cursor';
+export { Cursor } from './Cursor';

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

@@ -1 +1 @@
-export { Cursor } from './Cursor';
+export { Cursor } from './Cursor';

package/es/components/molecules/CaptureScreen/components/Cursor/styled.d.ts

@@ -1,7 +1,7 @@
-export declare const PlusCursor: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const TooltipDrag: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const DottedCursor: import("styled-components").StyledComponent<"div", any, {
-    bgColor?: string | undefined;
-    isPointerBox?: boolean | undefined;
-    offset: number;
-}, never>;
+export declare const PlusCursor: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TooltipDrag: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DottedCursor: import("styled-components").StyledComponent<"div", any, {
+    bgColor?: string | undefined;
+    isPointerBox?: boolean | undefined;
+    offset: number;
+}, never>;