@antscorp/antsomi-ui 1.3.5-beta.98 → 1.3.5-common.2

package/dist/public/icons/bb64e23a1ff390a416d765ee556096ab.svg

@@ -0,0 +1,87 @@
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="100" height="300" viewBox="0 0 100 300" preserveAspectRatio="none">
+<style type="text/css">
+	.st0{fill:#B2B2B2;}
+	.st1{fill:#9B9B9B;}
+</style>
+<path d="M53.7,36.8v3.8h3.8l11.1-11.1l-3.8-3.8L53.7,36.8z M71.4,26.5c0.4-0.4,0.4-1,0-1.4l0,0L69,22.8c-0.4-0.4-1-0.4-1.4,0l0,0
+	l-1.8,1.8l3.8,3.8L71.4,26.5z"/>
+<path d="M5.9,31.1H9L7.5,27L5.9,31.1z M13.5,22.5h-12C0.7,22.5,0,23.2,0,24v12c0,0.8,0.7,1.5,1.5,1.5h12c0.8,0,1.5-0.7,1.5-1.5V24
+	C15,23.2,14.3,22.5,13.5,22.5z M10.5,34.9l-0.9-2.3H5.4l-0.8,2.3H3l3.8-9.8h1.4l3.8,9.8H10.5z"/>
+<path d="M95.6,8.9l-9-8.9l-1.4,1.4l2.4,2.4L82.5,9c-0.6,0.6-0.6,1.5,0,2.1l0,0l5.5,5.5c0.3,0.3,0.7,0.4,1.1,0.4s0.8-0.2,1.1-0.4
+	l5.5-5.5C96.2,10.5,96.2,9.5,95.6,8.9L95.6,8.9z M84.2,10L89,5.2l4.8,4.8H84.2z M98,11.5c0,0-2,2.2-2,3.5c0,1.1,0.9,2,2,2s2-0.9,2-2
+	C100,13.7,98,11.5,98,11.5z"/>
+<path d="M95.2,26.7L91,22.5l-4.2,4.2C85.6,27.9,85,29.5,85,31s0.6,3.1,1.8,4.3c2.3,2.3,6.1,2.4,8.5,0l0,0C96.4,34,97,32.5,97,31
+	S96.4,27.9,95.2,26.7L95.2,26.7z M86.5,31.2c0-1.5,0.5-2.5,1.3-3.3l3.2-3.2l3.2,3.3c0.9,0.9,1.3,1.8,1.3,3.3L86.5,31.2L86.5,31.2z"
+	/>
+<g transform="translate(138 2337)">
+</g>
+<path d="M4,8h4.1L6,2.5L4,8z M10,13l-1.1-3H3.2l-1.1,3H0L5.1,0H7l5.1,13H10z"/>
+<path d="M27.6,9.8h13.5V8.3H27.6V9.8z M27.6,12h13.5v-0.8H27.6V12z M27.6,6.8h13.5V4.5H27.6V6.8z M27.6,0v3h13.5V0H27.6z"/>
+<path d="M67.9,12h1.5v1.5h-1.5V12z M67.9,10.5h1.5V9h-1.5V10.5z M55.9,7.5h1.5V6h-1.5V7.5z M55.9,10.5h1.5V9h-1.5V10.5z M55.9,4.5
+	h1.5V3h-1.5V4.5z M55.9,1.5h1.5V0h-1.5V1.5z M58.9,1.5h1.5V0h-1.5V1.5z M64.9,13.5h1.5V12h-1.5V13.5z M61.9,13.5h1.5V12h-1.5V13.5z
+	 M64.9,13.5h1.5V12h-1.5V13.5z M58.9,13.5h1.5V12h-1.5V13.5z M55.9,13.5h1.5V12h-1.5V13.5z M69.4,3.8c0-2.1-1.7-3.8-3.8-3.8h-3.8
+	v1.5h3.8c1.2,0,2.3,1,2.3,2.3v3.8h1.5V3.8z"/>
+<path d="M27.6,31.5h3.8V30h-3.8V31.5z M32.5,31.5h3.8V30h-3.8V31.5z M37.4,31.5h3.8V30h-3.8V31.5z M27.6,34.5h1.5V33h-1.5V34.5z
+	 M30.6,34.5h1.5V33h-1.5C30.6,33,30.6,34.5,30.6,34.5z M33.6,34.5h1.5V33h-1.5V34.5z M36.6,34.5h1.5V33h-1.5V34.5z M39.6,34.5h1.5
+	V33h-1.5V34.5z M27.6,28.5h6V27h-6C27.6,27,27.6,28.5,27.6,28.5z M35.1,28.5h6V27h-6V28.5z M27.6,22.5v3h13.5v-3H27.6z"/>
+<g>
+	<path class="st0" d="M0,46.1v5v1v2v1v2v1v2v1V64h18v-2.9v-1v-2v-1v-2v-1v-2v-1v-5H0z M17.1,63.1H0.9v-2H17v2H17.1z M17.1,60.1H0.9
+		v-2H17v2H17.1z M17.1,57.1H0.9v-2H17v2H17.1z M17.1,54.1H0.9v-2H17v2H17.1z M0.9,51.1V47H17v4.1H0.9z"/>
+	<g>
+		<path d="M0,46.1h18v3H0V46.1z"/>
+	</g>
+</g>
+<g>
+	<path class="st0" d="M54.7,46.1v3v2v1v2v1v2v1v2v1V64h18v-2.9v-1v-2v-1v-2v-1v-2v-1v-2v-3H54.7z M71.7,63.1H55.6v-2h16.1V63.1z
+		 M71.7,60.1H55.6v-2h16.1V60.1z M71.7,57.1H55.6v-2h16.1V57.1z M71.7,54.1H55.6v-2h16.1V54.1z M71.7,51.1H55.6v-2h16.1V51.1z"/>
+	<g>
+		<rect x="55.6" y="61.1" width="16.1" height="2"/>
+		<rect x="55.6" y="55.1" width="16.1" height="2"/>
+		<rect x="55.6" y="49.1" width="16.1" height="2"/>
+	</g>
+</g>
+<g>
+	<path class="st0" d="M82,46.1v3v2v1v2v1v2v1v2v1V64h18v-2.9v-1v-2v-1v-2v-1v-2v-1v-2v-3H82z M99.1,63.1H82.9v-2H99L99.1,63.1
+		L99.1,63.1z M99.1,60.1H82.9v-2H99L99.1,60.1L99.1,60.1z M99.1,57.1H82.9v-2H99L99.1,57.1L99.1,57.1z M99.1,54.1H82.9v-2H99
+		L99.1,54.1L99.1,54.1z M99.1,51.1H82.9v-2H99L99.1,51.1L99.1,51.1z"/>
+	<g>
+		<rect x="82.9" y="58.1" width="16.1" height="2"/>
+		<rect x="82.9" y="52.1" width="16.1" height="2"/>
+	</g>
+</g>
+<g>
+	<path class="st0" d="M27.3,46.1v3v2v1v2v1v2v1v2v1V64h18v-2.9v-1v-2v-1v-2v-1v-2v-1v-2v-3H27.3z M44.4,63.1H28.3v-2h16.1V63.1z
+		 M44.4,60.1H28.3v-2h16.1V60.1z M44.4,57.1H28.3v-2h16.1V57.1z M44.4,54.1H28.3v-2h16.1V54.1z M44.4,51.1H28.3v-2h16.1V51.1z"/>
+	<g>
+		<rect x="28.3" y="51.1" width="16.1" height="1"/>
+		<rect x="28.3" y="54.1" width="16.1" height="1"/>
+		<rect x="28.3" y="57.1" width="16.1" height="1"/>
+		<rect x="28.3" y="60.1" width="16.1" height="1"/>
+	</g>
+</g>
+<g>
+	<polygon class="st0" points="30.3,86.1 30.3,73.1 27.3,73.1 27.3,86.1 27.3,89.1 30.3,89.1 43.3,89.1 43.3,86.1 	"/>
+	<path d="M30.3,74.1v1h2v2h-2v1h2v2h-2v1h2v2h-2v1h2v2h1v-2h2v2h1v-2h2v2h1v-2h2v2h1v-12H30.3z M35.3,83.1h-2v-2h2V83.1z M35.3,80.1
+		h-2v-2h2V80.1z M35.3,77.1h-2v-2h2V77.1z M38.3,83.1h-2v-2h2V83.1z M38.3,80.1h-2v-2h2V80.1z M38.3,77.1h-2v-2h2V77.1z M41.3,83.1
+		h-2v-2h2V83.1z M41.3,80.1h-2v-2h2V80.1z M41.3,77.1h-2v-2h2V77.1z"/>
+</g>
+<g>
+	<polygon points="3,86.1 3,73.1 0,73.1 0,86.1 0,89.1 3,89.1 16,89.1 16,86.1 	"/>
+	<path class="st0" d="M3,74.1v1h2v2H3v1h2v2H3v1h2v2H3v1h2v2h1v-2h2v2h1v-2h2v2h1v-2h2v2h1v-12H3z M8,83.1H6v-2h2V83.1z M8,80.1H6
+		v-2h2V80.1z M8,77.1H6v-2h2V77.1z M11,83.1H9v-2h2V83.1z M11,80.1H9v-2h2V80.1z M11,77.1H9v-2h2V77.1z M14,83.1h-2v-2h2V83.1z
+		 M14,80.1h-2v-2h2V80.1z M14,77.1h-2v-2h2V77.1z"/>
+</g>
+<path d="M52.6,77.1h2v-2h-2V77.1z M52.6,81.1h2v-2h-2V81.1z M52.6,73.1h2v-2C53.5,71.1,52.6,72,52.6,73.1z M72.6,71.1v2h2
+	C74.6,72,73.8,71.1,72.6,71.1z M60.6,89.1h2v-2h-2V89.1z M52.6,85.1h2v-2h-2V85.1z M54.6,89.1v-2h-2C52.6,88.2,53.5,89.1,54.6,89.1z
+	 M52.6,75.1v3h22v-3H52.6z M56.6,71.1v18h6v-18H56.6z M72.6,85.1h2v-2h-2V85.1z M60.6,73.1h2v-2h-2V73.1z M56.6,89.1h2v-2h-2V89.1z
+	 M56.6,73.1h2v-2h-2V73.1z M72.6,89.1c1.1,0,2-0.9,2-2h-2V89.1z M72.6,81.1h2v-2h-2V81.1z M72.6,77.1h2v-2h-2V77.1z M64.6,89.1h2v-2
+	h-2V89.1z M64.6,73.1h2v-2h-2V73.1z M68.6,89.1h2v-2h-2V89.1z M68.6,73.1h2v-2h-2V73.1z"/>
+<g>
+	<path d="M83,80.1h7v9h-7V80.1z M92,80.1h7v9h-7V80.1z"/>
+	<path class="st1" d="M82,83.1h18v3H82V83.1z"/>
+</g>
+<g>
+	<path class="st1" d="M1,98.3h7v9H1V98.3z M10,98.3h7v9h-7V98.3z"/>
+	<path d="M0,101.3h8v3H0V101.3z M10,101.3h8v3h-8V101.3z"/>
+</g>
+</svg>

package/dist/public/icons/transparent.svg

@@ -0,0 +1 @@
+<svg height="10" version="1.1" viewBox="0 0 512 512" width="10" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path fill="currentColor" fill-opacity=".125" d="M0 256h256v256H0z"></path><path fill="currentColor" fill-opacity=".25" d="M256 256h256v256H256z"></path><path fill="currentColor" fill-opacity=".125" d="M256 0h256v256H256z"></path><path fill="currentColor" fill-opacity=".25" d="M0 0h256v256H0z"></path></svg>

package/es/__tests__/fileMock.test.d.ts

@@ -0,0 +1,2 @@
+declare const _exports: string;
+export = _exports;

package/es/__tests__/fileMock.test.js

@@ -0,0 +1,2 @@
+"use strict";
+module.exports = 'test-file-stub';

package/es/__tests__/styleMock.test.d.ts

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

package/es/__tests__/styleMock.test.js

@@ -0,0 +1,2 @@
+"use strict";
+module.exports = {};

package/es/assets/css/main.scss

@@ -1,4 +1,22 @@
 :root {
   --primary-color: #005fb8;
   --text-base-color: #222222;
+
+  --border-primary: #005eb8;
+  --border-normal: #b8cfe6;
+  --border-hover: #81bcf4;
+  --border-active: #005eb8;
+  --border-disable: #d4d4d4;
+
+  --divider-1: #e5e5e5;
+  --divider-2: #d4d4d4;
+  --divider-3: #bebebe;
+}
+
+*,
+*:before,
+*:after {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
 }

package/es/components/atoms/ContentEditable/ContentEditable.d.ts

@@ -0,0 +1,16 @@
+import React, { FocusEvent } from 'react';
+import { TypographyProps } from 'antd';
+import { EllipsisConfig } from 'antd/es/typography/Base';
+interface ContentEditableProps extends Omit<TypographyProps['Text'], 'className' | '$$typeof'> {
+    onSave: (innerText: string, e?: FocusEvent<any>) => void;
+    value?: string;
+    isEdit?: boolean;
+    disabledBlur?: boolean;
+    maxLength?: number;
+    breakWord?: boolean;
+    regexPattern?: RegExp;
+    className?: string;
+    ellipsis?: EllipsisConfig;
+}
+export declare const ContentEditable: React.FC<React.PropsWithChildren<ContentEditableProps>>;
+export {};

package/es/components/atoms/ContentEditable/ContentEditable.js

@@ -0,0 +1,76 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useEffect, useRef, useState } from 'react';
+import { ContentEditableWrapper } from './styled';
+// NOTE: User can keypress when value reach max length
+const IGNORE_KEY_CODE = [
+    'Backspace',
+    'Delete',
+    'ArrowRight',
+    'ArrowLeft',
+    'ControlLeft',
+    'ControlRight',
+    'ShiftLeft',
+    'ShiftRight',
+    'Tab',
+];
+export const ContentEditable = React.memo(props => {
+    const { value, onSave, className, isEdit, disabledBlur, maxLength, breakWord, regexPattern, ellipsis } = props, restProps = __rest(props, ["value", "onSave", "className", "isEdit", "disabledBlur", "maxLength", "breakWord", "regexPattern", "ellipsis"]);
+    const [isEditable, setIsEditable] = useState(false);
+    const elementRef = useRef(null);
+    useEffect(() => {
+        if (isEdit !== undefined) {
+            if (!isEdit)
+                onSave(elementRef && elementRef.current ? elementRef.current.innerText : '');
+            setIsEditable(isEdit);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isEdit]);
+    return (React.createElement(ContentEditableWrapper, Object.assign({}, restProps, { "$breakWord": breakWord, ref: elementRef, className: `${isEditable ? 'editable' : ''} ${className || ''}`, suppressContentEditableWarning: true, contentEditable: true, spellCheck: false, ellipsis: { tooltip: true }, onClick: () => {
+            if (!isEditable) {
+                setIsEditable(true);
+            }
+        }, onBlur: (e) => {
+            if (disabledBlur)
+                return;
+            setIsEditable(false);
+            onSave(e.target.innerText, e);
+        }, onKeyDown: (e) => {
+            var _a;
+            if (!isEditable)
+                e.preventDefault();
+            // Check letters are selected => user want to replace it => allow edit
+            const selectedLetter = (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.toString().length;
+            // Check user want select all text
+            const isSelectAll = e.code === 'KeyA' && e.ctrlKey;
+            if (!IGNORE_KEY_CODE.includes(e.code) &&
+                !selectedLetter &&
+                !isSelectAll &&
+                regexPattern &&
+                !e.code.match(regexPattern) &&
+                !isSelectAll)
+                e.preventDefault();
+            if (e.code === 'Enter') {
+                e.preventDefault();
+                onSave(e.currentTarget.innerText);
+                setIsEditable(false);
+            }
+            // NOTE: check current text length
+            if (maxLength &&
+                e.currentTarget.innerText.length >= maxLength &&
+                !IGNORE_KEY_CODE.includes(e.code) &&
+                !selectedLetter &&
+                !isSelectAll) {
+                e.preventDefault();
+            }
+        } }), value));
+});

package/es/components/atoms/ContentEditable/index.d.ts

@@ -0,0 +1 @@
+export { ContentEditable } from './ContentEditable';

package/es/components/atoms/ContentEditable/index.js

@@ -0,0 +1 @@
+export { ContentEditable } from './ContentEditable';

package/es/components/atoms/ContentEditable/styled.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const ContentEditableWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/typography/Text").TextProps & import("react").RefAttributes<HTMLSpanElement>>, any, {
+    $breakWord?: boolean | undefined;
+}, never>;

package/es/components/atoms/ContentEditable/styled.js

@@ -0,0 +1,20 @@
+// Libraries
+import styled from 'styled-components';
+import { Typography } from '@antscorp/antsomi-ui/es/components';
+export const ContentEditableWrapper = styled(Typography.Text) `
+  outline-width: 0;
+  caret-color: transparent;
+  border-radius: 4px;
+  display: inline-flex !important;
+  align-items: center !important;
+  word-break: ${props => (props.$breakWord ? 'break-word' : 'normal')};
+
+  &.editable {
+    outline: 2px solid var(--text-link-color);
+    outline-offset: -2px;
+    caret-color: unset;
+  }
+
+  padding: 4px;
+  /* font-weight: bold; */
+`;

package/es/components/atoms/Icon/index.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
-interface IconProps {
+import { IconProps as OriginIconProps } from '../../icons/type';
+export interface IconProps extends OriginIconProps {
     size?: number;
     width?: number;
     height?: number;
     color?: string;
     style?: React.CSSProperties;
 }
-export declare const Icon: import("styled-components").StyledComponent<any, any, object & IconProps, string | number | symbol>;
-export {};
+export declare const Icon: import("styled-components").StyledComponent<any, any, IconProps, string | number | symbol>;

package/es/components/atoms/Input/Input.d.ts

@@ -5,7 +5,7 @@ export interface InputProps extends AntdInputProps {
     noborder?: 'true' | 'false' | boolean;
     debounce?: number;
     label?: ReactNode;
-    onAfterChange?: (value: any) => void;
+    onAfterChange?: (value: string) => void;
     errorArchive?: string;
     required?: boolean;
     isReverseMask?: boolean;
@@ -14,6 +14,7 @@ export interface InputProps extends AntdInputProps {
     focused?: boolean;
     errorMsg?: string;
     disableUndo?: boolean;
+    withWrapper?: boolean;
 }
 export declare const Input: string & import("styled-components").StyledComponentBase<React.ForwardRefExoticComponent<AntdInputProps & React.RefAttributes<import("antd").InputRef>> & {
     Group: React.FC<import("antd/es/input").GroupProps>;

package/es/components/atoms/Input/Input.js

@@ -24,7 +24,7 @@ import { StyledInput } from './styled';
 const PATH = '@antscorp/antsomi-ui/es/components/atoms/Input/Input.tsx';
 const OriginInput = props => {
     // Props
-    const { debounce, errorArchive, required, labelColor, isReverseMask, isHideErrMessage, focused, label, onAfterChange, onChange, errorMsg } = props, restProps = __rest(props, ["debounce", "errorArchive", "required", "labelColor", "isReverseMask", "isHideErrMessage", "focused", "label", "onAfterChange", "onChange", "errorMsg"]);
+    const { withWrapper, debounce, errorArchive, required, labelColor, isReverseMask, isHideErrMessage, focused, label, onAfterChange, onChange, errorMsg } = props, restProps = __rest(props, ["withWrapper", "debounce", "errorArchive", "required", "labelColor", "isReverseMask", "isHideErrMessage", "focused", "label", "onAfterChange", "onChange", "errorMsg"]);
     // State
     const [value, setValue] = useState(props.value);
     const [isFocused, setFocused] = useState(false);
@@ -76,7 +76,7 @@ const OriginInput = props => {
     if (props.disableUndo) {
         listDisableActions.push('undo');
     }
-    return (React.createElement("div", { className: "input__wrapper" },
+    const content = (React.createElement(React.Fragment, null,
         label && renderRequiredLabel(label),
         React.createElement(StyledInput, Object.assign({}, restProps, { value: value, onBlur: e => {
                 if (!isFocused) {
@@ -85,12 +85,17 @@ const OriginInput = props => {
                 restProps.onBlur && restProps.onBlur(e);
             }, onChange: onChangeInput }, getPreventKeyboardAction(listDisableActions))),
         (restProps.status === 'error' || errorArchive || requiredMsg) && !isHideErrMessage ? (React.createElement(Text, { color: "#ff4d4f", style: { marginLeft: 8, marginTop: 5 } }, errorMsg || errorArchive || requiredMsg)) : null));
+    if (!withWrapper)
+        return content;
+    return React.createElement("div", { className: "input__wrapper" }, content);
 };
 OriginInput.defaultProps = {
     debounce: 400,
     isHideErrMessage: false,
+    withWrapper: true,
 };
 export const Input = OriginInput;
 Input.TextArea = StyledInput.TextArea;
 Input.DefaultInput = AntdInput;
+Input.Password = AntdInput.Password;
 export const { TextArea } = StyledInput;

package/es/components/atoms/InputDynamic/styled.d.ts

@@ -4,7 +4,7 @@ export declare const SpanIcon: import("styled-components").StyledComponent<"span
     isDisabled?: boolean | undefined;
 }, never>;
 export declare const InputWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const InputShortLink: import("styled-components").StyledComponent<import("react").ComponentType<any> | keyof import("react").JSX.IntrinsicElements, any, import("../Input/Input").InputProps, any>;
+export declare const InputShortLink: import("styled-components").StyledComponent<import("react").ComponentType<any> | keyof import("react").JSX.IntrinsicElements, any, any, any>;
 export declare const TooltipHover: import("styled-components").StyledComponent<"div", any, {
     top: number;
     left: number;

package/es/components/atoms/InputDynamic/types.d.ts

@@ -45,6 +45,15 @@ export type EventMetadata = {
     item_property_label: string | null;
     event_property_syntax: string | null;
 };
+export type EventBoFieldMetadata = EventMetadata & {
+    field_code_bo?: string;
+    field_label_bo?: string;
+    useBo?: boolean;
+};
+export type SelectOption = {
+    value?: string;
+    label?: string;
+};
 export type TFilter = {
     value: any;
     operator: TOperatorValue;

package/es/components/atoms/MobileFrameV2/constants.d.ts

@@ -1,4 +1,10 @@
 export declare const MOBILE_VIEWPORT: {
-    width: number;
-    height: number;
+    MD: {
+        width: number;
+        height: number;
+    };
+    LG: {
+        width: number;
+        height: number;
+    };
 };

package/es/components/atoms/MobileFrameV2/constants.js

@@ -1,4 +1,10 @@
 export const MOBILE_VIEWPORT = {
-    width: 352.5,
-    height: 764.2,
+    MD: {
+        width: 317,
+        height: 686.41,
+    },
+    LG: {
+        width: 352.5,
+        height: 764.2,
+    },
 };

package/es/components/atoms/MobileFrameV2/styled.js

@@ -14,9 +14,6 @@ export const MobileWrapper = styled.div `
 `;
 export const MobileInner = styled.div `
   position: relative;
-  width: ${MOBILE_VIEWPORT.width}px;
-  max-width: ${MOBILE_VIEWPORT.width}px;
-  height: ${MOBILE_VIEWPORT.height}px;
   margin: 18px 21px;
   border-radius: 50px;
   overflow: hidden;
@@ -27,6 +24,18 @@ export const MobileInner = styled.div `
     width: 100%;
     height: 100%;
   }
+
+  @media screen and (max-height: 1000px) {
+    width: ${MOBILE_VIEWPORT.MD.width}px;
+    max-width: ${MOBILE_VIEWPORT.MD.width}px;
+    height: ${MOBILE_VIEWPORT.MD.height}px;
+  }
+
+  @media screen and (min-height: 1001px) {
+    width: ${MOBILE_VIEWPORT.LG.width}px;
+    max-width: ${MOBILE_VIEWPORT.LG.width}px;
+    height: ${MOBILE_VIEWPORT.LG.height}px;
+  }
 `;
 export const MobileCamera = styled.div `
   position: absolute;

package/es/components/atoms/ReactIframe/ReactIframe.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ReactIframeProps } from './types';
+export declare const ReactIframe: React.FC<ReactIframeProps>;

package/es/components/atoms/ReactIframe/ReactIframe.js

@@ -0,0 +1,42 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+// Styled
+import React, { useEffect, useRef } from 'react';
+import Frame from 'react-frame-component';
+// Styled
+import { useForceUpdate } from '@antscorp/antsomi-ui/es/hooks';
+const bodyStyle = `
+  body {
+    padding: 0;
+    margin: 0;
+  }
+`;
+export const ReactIframe = props => {
+    const { head, style } = props, restOfProps = __rest(props, ["head", "style"]);
+    const forceUpdate = useForceUpdate();
+    // Refs
+    const frameRef = useRef();
+    // Clone stylesheets from parent html to iframe for content of iframe to be styled correctly
+    const documentHead = document.querySelector('head');
+    // Force update for fix bug can't get style in first render
+    useEffect(() => {
+        setTimeout(() => {
+            forceUpdate();
+        }, 500);
+    }, [forceUpdate]);
+    return (React.createElement(Frame, Object.assign({}, restOfProps, { style: Object.assign({ border: 'none', width: '100%', height: '100%' }, style), ref: ref => {
+            frameRef.current = ref;
+        }, head: React.createElement(React.Fragment, null,
+            React.createElement("style", null, documentHead === null || documentHead === void 0 ? void 0 : documentHead.innerHTML),
+            React.createElement("style", null, bodyStyle),
+            head) })));
+};

package/es/components/atoms/ReactIframe/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ReactIframe';
+export type { ReactIframeProps } from './types';

package/es/components/atoms/ReactIframe/index.js

@@ -0,0 +1 @@
+export * from './ReactIframe';

package/es/components/atoms/ReactIframe/styled.d.ts

@@ -0,0 +1 @@
+export declare const StyledIframeContent: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/atoms/ReactIframe/styled.js

@@ -0,0 +1,16 @@
+var _a;
+// Libraries
+import styled from 'styled-components';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+/* Storybook */
+export const StyledIframeContent = styled.div `
+  width: 100%;
+  padding: 20px;
+  border: 1px solid ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw3};
+  box-sizing: border-box;
+
+  body {
+    padding: 0;
+  }
+`;

package/es/components/atoms/ReactIframe/types.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { FrameComponentProps } from 'react-frame-component';
+export interface ReactIframeProps extends FrameComponentProps {
+    head?: React.ReactNode | undefined;
+    mountTarget?: string | undefined;
+    initialContent?: string | undefined;
+    contentDidMount?: (() => void) | undefined;
+    contentDidUpdate?: (() => void) | undefined;
+    children: React.ReactNode;
+}

package/es/components/atoms/ReactIframe/types.js

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

package/es/components/atoms/RequiredLabel/index.js

@@ -21,5 +21,5 @@ export const RequiredLabel = memo(props => {
     return (React.createElement(Text, Object.assign({}, restProps),
         !isReverseMask && React.createElement(StyledRequired, null, "*"),
         children,
-        isReverseMask && React.createElement(StyledRequired, null, "*")));
+        isReverseMask && (React.createElement(StyledRequired, { style: { marginLeft: 4, marginRight: 0 } }, "*"))));
 });

package/es/components/atoms/ScrollBox/index.js

@@ -38,7 +38,7 @@ export const ScrollBox = props => {
     };
     return (
     // eslint-disable-next-line @typescript-eslint/no-use-before-define
-    React.createElement(Wrapper, Object.assign({ ref: wrapperRef }, Object.assign(Object.assign({}, restOf), { style: Object.assign(Object.assign(Object.assign(Object.assign({}, style), (height && { height })), (maxHeight && { maxHeight })), { paddingRight: isScroll && isPadding ? 8 : 0 }) }), { onScroll: handleScroll }), children));
+    React.createElement(Wrapper, Object.assign({ ref: wrapperRef }, restOf, { style: Object.assign(Object.assign(Object.assign(Object.assign({}, style), (height && { height })), (maxHeight && { maxHeight })), { paddingRight: isScroll && isPadding ? 8 : 0 }), onScroll: handleScroll }), children));
 };
 const Wrapper = styled.div `
   height: 100%;

package/es/components/atoms/Scrollbars/Scrollbars.d.ts

@@ -0,0 +1,5 @@
+import { ScrollbarProps as CustomScrollbarProps } from 'react-custom-scrollbars';
+import React from 'react';
+export interface ScrollbarsProps extends CustomScrollbarProps {
+}
+export declare const Scrollbars: React.FC<ScrollbarsProps>;