@antscorp/antsomi-ui 2.0.13 → 2.0.15

package/es/components/atoms/InputDynamic/utils.js

@@ -14,14 +14,8 @@ import { decode } from 'html-entities';
 import { getObjectPropSafely, random } from '@antscorp/antsomi-ui/es/utils';
 import { getStringFormatDateDF } from '../../molecules/AddDynamicContent/utils';
 // Constants
-import { AllowDynamicType } from './InputDynamic';
-import { DATE_AND_TIME_DEFAULT, MAP_DATA_TYPE } from './constants';
+import { DATE_AND_TIME_DEFAULT, MAP_DATA_TYPE, AllowDynamicType } from './constants';
 import { DYNAMIC_CONTENT_TYPE_KEY } from '../../molecules/AddDynamicContent/constants';
-export function validateURL(string) {
-    // eslint-disable-next-line no-useless-escape
-    const regexp = /^((([A-Za-z]{3,9}:(?:\/\/)?)(?:[\-;:&=\+\$,\w]+@)?[A-Za-z0-9\.\-]+|(?:www\.|[\-;:&=\+\$,\w]+@)[A-Za-z0-9\.\-]+)((?:\/[\+~%\/\.\w\-_]*)?\??(?:[\-\+=&;%@\.\w_]*)#?(?:[\.\!\/\\\w]*))?)/;
-    return regexp.test(string);
-}
 export const getInsertPatternWithAppendSpaceEnd = (id, code, label, bgColor) => `<button id="${id}" contenteditable="false" class="insert-word" style="position: relative; max-width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 3px 2px 3px 8px; color: rgb(0, 0, 0); font-size: inherit; outline: none; border: 1px solid transparent; border-radius: 1.2rem; cursor: pointer; background: ${bgColor}; height: auto;" value=${code
     .replace(/\s/gm, '&nbsp;')
     .replace(/"/gm, '&quot;')}><span style="line-height: 20px;margin-right: 8px;pointer-events:none;">${label}</span><em class="editor-icon-remove" style="position: absolute; top: 50%; left: 100%; transform: translate(-50%, -50%); color: rgb(48, 95, 184); background-color: rgb(255, 255, 255); font-style: normal; margin-top: 1px; z-index: 1; font-size: 13px; font-weight: bold; margin-left: -12px; line-height: 18px; padding: 0px 3px; border-radius: 50%;">✕</em></button>&nbsp;`;
@@ -759,7 +753,7 @@ export const initialValue = (initValue) => {
 export const mapLabelPersonalization = (type) => ({
     [AllowDynamicType.SHORTLINK]: 'Add short link',
     [AllowDynamicType.ADDPERSONALIZATION]: 'Add Personalization',
-}[type]);
+})[type];
 export const createElement = (element, attribute, inner) => {
     try {
         if (typeof element === 'undefined') {
@@ -808,7 +802,10 @@ export const mapDataFormatAttribute = (dataIn) => {
         const dateParseOption = format.config.date && format.config.date.value;
         const timeParseOption = format.config.time && format.config.time.value;
         const timeParseFormat = format.config.time && format.config.time.timeFormat;
-        dataOut.attribute = Object.assign(Object.assign({}, dataOut.attribute), { dataType: dataIn.dataType, datetimeFormatSettings: {
+        dataOut.attribute = {
+            ...dataOut.attribute,
+            dataType: dataIn.dataType,
+            datetimeFormatSettings: {
                 hasDateFormat,
                 hasTimeFormat,
                 dateParseFormat,
@@ -824,10 +821,14 @@ export const mapDataFormatAttribute = (dataIn) => {
                     timeParseFormat,
                 }),
                 type: dataIn.format.type.toLowerCase(),
-            } });
+            },
+        };
     }
     else if (dataIn.dataType === 'number') {
-        dataOut.attribute = Object.assign(Object.assign({}, dataOut.attribute), { dataType: dataIn.dataType, numberFormatSettings: {
+        dataOut.attribute = {
+            ...dataOut.attribute,
+            dataType: dataIn.dataType,
+            numberFormatSettings: {
                 currencyCode: dataIn.format.config.currency,
                 decimalPlaces: dataIn.format.config.decimalPlace || 0,
                 grouping: dataIn.format.config.group === 'space' ? ' ' : dataIn.format.config.group || ',',
@@ -835,7 +836,8 @@ export const mapDataFormatAttribute = (dataIn) => {
                 isCompact: dataIn.format.config.isCompactNumber || false,
                 prefixType: dataIn.format.config.prefixType,
                 type: dataIn.format.type.toLowerCase(),
-            } });
+            },
+        };
     }
     return dataOut;
 };

package/es/components/atoms/InputNumber/InputNumber.js

@@ -1,16 +1,4 @@
-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;
-};
-// Libraries
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import clsx from 'clsx';
 import { InputNumber as AntdInputNumber } from 'antd';
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
@@ -21,10 +9,10 @@ import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
 const { t } = i18nInstance;
 export const InputNumber = props => {
     // Props
-    const { showHandler, className } = props, restOfProps = __rest(props, ["showHandler", "className"]);
-    return (React.createElement(AntdInputNumber, Object.assign({}, restOfProps, { className: clsx(className, {
+    const { showHandler, className, ...restOfProps } = props;
+    return (_jsx(AntdInputNumber, { ...restOfProps, className: clsx(className, {
             '--show-handler': showHandler,
-        }), upHandler: React.createElement(Icon, { type: "icon-ants-caret-up", style: { fontSize: 8 } }), downHandler: React.createElement(Icon, { type: "icon-ants-caret-down", style: { fontSize: 8 } }) })));
+        }), upHandler: _jsx(Icon, { type: "icon-ants-caret-up", style: { fontSize: 8 } }), downHandler: _jsx(Icon, { type: "icon-ants-caret-down", style: { fontSize: 8 } }) }));
 };
 InputNumber.defaultProps = {
     showHandler: true,
@@ -33,7 +21,7 @@ export const FormatInputNumber = InputNumber;
 FormatInputNumber.defaultProps = {
     formatter: (value, info) => {
         if (info.userTyping)
-            return (value === null || value === void 0 ? void 0 : value.toString()) || '';
+            return value?.toString() || '';
         if (!value)
             return '';
         // Split the value into integer and decimal parts
@@ -44,5 +32,5 @@ FormatInputNumber.defaultProps = {
         return parts[1] ? `${integerPart}.${parts[1].slice(0, 3)}` : `${integerPart}`;
     },
     placeholder: `${t(translations.format)}: 1,234.560`,
-    parser: value => value === null || value === void 0 ? void 0 : value.replace(/,/g, ''),
+    parser: value => value?.replace(/,/g, ''),
 };

package/es/components/atoms/MobileFrame/MobileFrame.js

@@ -1,22 +1,4 @@
-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;
-};
-// Libraries
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Styled
 import { MobileWrapper, MobileInner, MobileBottomLine } from './styled';
-export const MobileFrame = (_a) => {
-    var { children } = _a, restOfProps = __rest(_a, ["children"]);
-    return (React.createElement(MobileWrapper, Object.assign({}, restOfProps),
-        React.createElement(MobileInner, { backgroundColor: restOfProps.backgroundColor, size: restOfProps.size },
-            children,
-            React.createElement(MobileBottomLine, null))));
-};
+export const MobileFrame = ({ children, ...restOfProps }) => (_jsx(MobileWrapper, { ...restOfProps, children: _jsxs(MobileInner, { backgroundColor: restOfProps.backgroundColor, size: restOfProps.size, children: [children, _jsx(MobileBottomLine, {})] }) }));

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

@@ -1,22 +1,4 @@
-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;
-};
-// Libraries
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Styled
 import { MobileWrapper, MobileInner, MobileCamera } from './styled';
-export const MobileFrameV2 = (_a) => {
-    var { children } = _a, restOfProps = __rest(_a, ["children"]);
-    return (React.createElement(MobileWrapper, Object.assign({}, restOfProps),
-        React.createElement(MobileInner, null,
-            React.createElement("div", { className: "mobile-inner-content" }, children),
-            React.createElement(MobileCamera, null))));
-};
+export const MobileFrameV2 = ({ children, ...restOfProps }) => (_jsx(MobileWrapper, { ...restOfProps, children: _jsxs(MobileInner, { children: [_jsx("div", { className: "mobile-inner-content", children: children }), _jsx(MobileCamera, {})] }) }));

package/es/components/atoms/PreviewTabs/PreviewTabs.js

@@ -1,19 +1,10 @@
-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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Libraries
 import React, { useEffect, useState } from 'react';
 import cn from 'classnames';
 // Components
-import { Flex, Icon } from '..';
+import { Flex } from '@antscorp/antsomi-ui/es/components/atoms/Flex';
+import { Icon } from '@antscorp/antsomi-ui/es/components/atoms/Icon';
 // Styled
 import { NavigationButton, StyledRichMenuTabs } from './styled';
 import { tryCatchWrapper } from '@antscorp/antsomi-ui/es/utils';
@@ -23,7 +14,7 @@ const defaultProps = {
 };
 const PATH = 'antsomi-ui/src/components/atoms/PreviewTabs/PreviewTabs.tsx';
 export const PreviewTabs = props => {
-    const { total = 20, current = 1, onChange } = props, restProps = __rest(props, ["total", "current", "onChange"]);
+    const { total = 20, current = 1, onChange, ...restProps } = props;
     const tabsRef = React.useRef(null);
     // State
     const [state, setState] = useState({
@@ -36,8 +27,11 @@ export const PreviewTabs = props => {
     const checkScroll = () => {
         if (tabsRef.current) {
             const { scrollLeft, clientWidth, scrollWidth } = tabsRef.current;
-            setState(prevState => (Object.assign(Object.assign({}, prevState), { disableNext: scrollLeft + clientWidth === scrollWidth })));
-            setState(prevState => (Object.assign(Object.assign({}, prevState), { disablePrev: scrollLeft === 0 })));
+            setState(prevState => ({
+                ...prevState,
+                disableNext: scrollLeft + clientWidth === scrollWidth,
+            }));
+            setState(prevState => ({ ...prevState, disablePrev: scrollLeft === 0 }));
         }
     };
     // Check disable next navigation base length of tabs
@@ -52,16 +46,10 @@ export const PreviewTabs = props => {
             checkScroll();
         }
     }, PATH);
-    return (React.createElement(StyledRichMenuTabs, Object.assign({}, restProps),
-        React.createElement(NavigationButton, { className: cn('navigation--previous', {
-                'navigation--disabled': disablePrev,
-            }), onClick: () => onClickNavigation(true) },
-            React.createElement(Icon, { type: "icon-ants-angle-left" })),
-        React.createElement(Flex, { ref: tabsRef, className: "tabs antsomi-scrollbar-hidden", align: "center", onScroll: () => checkScroll() }, Array.from({ length: total }).map((_, index) => (React.createElement(Flex, { key: `${index + 1}`, align: "center", justify: "center", className: `tabs__item ${current === index + 1 ? 'tabs__item--active' : ''}`, onClick: () => onChange && onChange(index + 1) },
-            React.createElement(Flex, { align: "center", justify: "center", className: "tabs__label" }, index + 1))))),
-        React.createElement(NavigationButton, { className: cn('navigation--next', {
-                'navigation--disabled': disableNext,
-            }), onClick: () => onClickNavigation(false) },
-            React.createElement(Icon, { type: "icon-ants-angle-right" }))));
+    return (_jsxs(StyledRichMenuTabs, { ...restProps, children: [_jsx(NavigationButton, { className: cn('navigation--previous', {
+                    'navigation--disabled': disablePrev,
+                }), onClick: () => onClickNavigation(true), children: _jsx(Icon, { type: "icon-ants-angle-left" }) }), _jsx(Flex, { ref: tabsRef, className: "tabs antsomi-scrollbar-hidden", align: "center", onScroll: () => checkScroll(), children: Array.from({ length: total }).map((_, index) => (_jsx(Flex, { align: "center", justify: "center", className: `tabs__item ${current === index + 1 ? 'tabs__item--active' : ''}`, onClick: () => onChange && onChange(index + 1), children: _jsx(Flex, { align: "center", justify: "center", className: "tabs__label", children: index + 1 }) }, `${index + 1}`))) }), _jsx(NavigationButton, { className: cn('navigation--next', {
+                    'navigation--disabled': disableNext,
+                }), onClick: () => onClickNavigation(false), children: _jsx(Icon, { type: "icon-ants-angle-right" }) })] }));
 };
 PreviewTabs.defaultProps = defaultProps;

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

@@ -1,4 +1,3 @@
-var _a;
 // Components
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 import { Flex } from '../Flex';
@@ -56,7 +55,7 @@ export const NavigationButton = styled(Flex) `
 
   i {
     font-size: 12px;
-    color: ${(_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.bw8};
+    color: ${THEME?.token?.bw8};
   }
 
   &.navigation--previous {

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

@@ -3,5 +3,5 @@ export declare const Radio: import("styled-components").StyledComponent<import("
     Group: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<import("antd").RadioGroupProps & import("react").RefAttributes<HTMLDivElement>>>;
     Button: import("react").ForwardRefExoticComponent<import("antd/es/radio/radioButton").RadioButtonProps & import("react").RefAttributes<import("rc-checkbox").CheckboxRef>>;
 }, any, {}, never>;
-export declare const RadioButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/radio/radioButton").RadioButtonProps & import("react").RefAttributes<import("rc-checkbox").CheckboxRef>>, any, {}, never>;
-export declare const RadioGroupSub: import("styled-components").StyledComponent<import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<import("antd").RadioGroupProps & import("react").RefAttributes<HTMLDivElement>>>, any, {}, never>;
+export declare const RadioButton: import("react").ForwardRefExoticComponent<import("antd/es/radio/radioButton").RadioButtonProps & import("react").RefAttributes<import("rc-checkbox").CheckboxRef>>;
+export declare const RadioGroupSub: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<import("antd").RadioGroupProps & import("react").RefAttributes<HTMLDivElement>>>;

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

@@ -1,4 +1,3 @@
-var _a, _b, _c, _d;
 // Libraries
 import styled from 'styled-components';
 // Components
@@ -7,20 +6,22 @@ import { Radio as AntdRadio } from 'antd';
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 export const Radio = styled(AntdRadio) `
   font-family: 'Roboto';
-  color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorTextBase};
-  font-size: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.fontSize}px;
+  color: ${THEME.token?.colorTextBase};
+  font-size: ${THEME.token?.fontSize}px;
 
   .antsomi-radio {
     .antsomi-radio-inner {
       border-width: 2px;
-      border-color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.colorPrimary};
+      border-color: ${THEME.token?.colorPrimary};
 
       &::after {
         flex-shrink: 0;
-        background-color: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.colorPrimary};
+        background-color: ${THEME.token?.colorPrimary};
       }
     }
   }
 `;
-export const RadioButton = styled(AntdRadio.Button) ``;
-export const RadioGroupSub = styled(AntdRadio.Group) ``;
+export const RadioButton = AntdRadio.Button;
+export const RadioGroupSub = AntdRadio.Group;
+// export const RadioButton = styled(AntdRadio.Button)``;
+// export const RadioGroupSub = styled(AntdRadio.Group)``;

package/es/components/atoms/RateV2/RateV2.js

@@ -1,7 +1,8 @@
-import React, { useEffect, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
 import StarImage from '@antscorp/antsomi-ui/es/assets/images/stars_slider.png';
 const STAR_WIDTH = 30;
-const parseNumDecimals = (input, decimals) => +Number.parseFloat(input === null || input === void 0 ? void 0 : input.toString()).toFixed(decimals);
+const parseNumDecimals = (input, decimals) => +Number.parseFloat(input?.toString()).toFixed(decimals);
 const roundHalf = (num) => {
     const multiplier = 1 / 0.5;
     return Math.round(num * multiplier) / multiplier;
@@ -48,26 +49,24 @@ export const RateV2 = ({ count = 5, className, defaultValue = 0, value, type = '
             setFillWidth(width);
         }
     }, [value]);
-    return (React.createElement("div", { className: `antsomi-rate-continuous${className ? ` ${className}` : ''}`, style: {
+    return (_jsxs("div", { className: `antsomi-rate-continuous${className ? ` ${className}` : ''}`, style: {
             position: 'relative',
             width: `${fullWidth}px`,
             backgroundPosition: '-27px',
             height: '28px',
-        }, onMouseMove: handleMouseMove, onMouseLeave: () => setFillWidth(currWidth || 0), onClick: handleClick },
-        React.createElement("div", { className: "custom-rate custom-rate--fill", style: {
-                position: 'absolute',
-                background: `url(${StarImage}) 0px 0px`,
-                width: `${fillWidth}px`,
-                height: '26px',
-                zIndex: 1,
-            } }),
-        React.createElement("div", { className: "custom-rate custom-rate--empty", style: {
-                position: 'absolute',
-                top: '0px',
-                left: '0px',
-                backgroundImage: 'none',
-                background: `transparent url(${StarImage}) 0px -26px`,
-                width: `${fullWidth}px`,
-                height: '26px',
-            } })));
+        }, onMouseMove: handleMouseMove, onMouseLeave: () => setFillWidth(currWidth || 0), onClick: handleClick, children: [_jsx("div", { className: "custom-rate custom-rate--fill", style: {
+                    position: 'absolute',
+                    background: `url(${StarImage}) 0px 0px`,
+                    width: `${fillWidth}px`,
+                    height: '26px',
+                    zIndex: 1,
+                } }), _jsx("div", { className: "custom-rate custom-rate--empty", style: {
+                    position: 'absolute',
+                    top: '0px',
+                    left: '0px',
+                    backgroundImage: 'none',
+                    background: `transparent url(${StarImage}) 0px -26px`,
+                    width: `${fullWidth}px`,
+                    height: '26px',
+                } })] }));
 };

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

@@ -1,16 +1,6 @@
-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 { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 // Styled
-import React, { useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import Frame from 'react-frame-component';
 // Styled
 import { useForceUpdate } from '@antscorp/antsomi-ui/es/hooks';
@@ -21,7 +11,7 @@ const bodyStyle = `
   }
 `;
 export const ReactIframe = props => {
-    const { head, style } = props, restOfProps = __rest(props, ["head", "style"]);
+    const { head, style, ...restOfProps } = props;
     const forceUpdate = useForceUpdate();
     // Refs
     const frameRef = useRef();
@@ -33,10 +23,7 @@ export const ReactIframe = props => {
             forceUpdate();
         }, 500);
     }, [forceUpdate]);
-    return (React.createElement(Frame, Object.assign({}, restOfProps, { style: Object.assign({ border: 'none', width: '100%', height: '100%' }, style), ref: ref => {
+    return (_jsx(Frame, { ...restOfProps, style: { 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) })));
+        }, head: _jsxs(_Fragment, { children: [_jsx("style", { children: documentHead?.innerHTML }), _jsx("style", { children: bodyStyle }), head] }) }));
 };

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

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

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

@@ -1,25 +1,12 @@
-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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Libraries
-import React, { memo } from 'react';
+import { memo } from 'react';
 // Atoms
 import { Text } from '../Text';
 // Styled
 import { StyledRequired } from './styled';
 export const RequiredLabel = memo(props => {
     // Props
-    const { children, isReverseMask = false } = props, restProps = __rest(props, ["children", "isReverseMask"]);
-    return (React.createElement(Text, Object.assign({}, restProps),
-        !isReverseMask && React.createElement(StyledRequired, null, "*"),
-        children,
-        isReverseMask && (React.createElement(StyledRequired, { style: { marginLeft: 4, marginRight: 0 } }, "*"))));
+    const { children, isReverseMask = false, ...restProps } = props;
+    return (_jsxs(Text, { ...restProps, children: [!isReverseMask && _jsx(StyledRequired, { children: "*" }), children, isReverseMask && (_jsx(StyledRequired, { style: { marginLeft: 4, marginRight: 0 }, children: "*" }))] }));
 });

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

@@ -1,9 +1,8 @@
-var _a;
 // Libraries
 import styled from 'styled-components';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 export const StyledRequired = styled.span `
-  color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.red6};
+  color: ${THEME.token?.red6};
   margin-right: 4px;
 `;

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

@@ -1,22 +1,11 @@
-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;
-};
-var _a;
+import { jsx as _jsx } from "react/jsx-runtime";
 /* eslint-disable @typescript-eslint/no-unused-expressions */
-import React, { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import styled from 'styled-components';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 export const ScrollBox = props => {
-    const { children, height, maxHeight, isPadding, loadMore, style } = props, restOf = __rest(props, ["children", "height", "maxHeight", "isPadding", "loadMore", "style"]);
+    const { children, height, maxHeight, isPadding, loadMore, style, ...restOf } = props;
     const wrapperRef = useRef(null);
     const [isScroll, setIsScroll] = useState(false);
     useEffect(() => {
@@ -38,12 +27,18 @@ export const ScrollBox = props => {
     };
     return (
     // eslint-disable-next-line @typescript-eslint/no-use-before-define
-    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));
+    _jsx(Wrapper, { ref: wrapperRef, ...restOf,
+        style: {
+            ...style,
+            ...(height && { height }),
+            ...(maxHeight && { maxHeight }),
+            paddingRight: isScroll && isPadding ? 8 : 0,
+        }, onScroll: handleScroll, children: children }));
 };
 const Wrapper = styled.div `
   height: 100%;
   width: 100%;
-  background-color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw0};
+  background-color: ${THEME.token?.bw0};
   overflow: auto;
 `;
 ScrollBox.defaultProps = {

package/es/components/atoms/Scrollbars/Scrollbars.js

@@ -1,25 +1,15 @@
-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 { jsx as _jsx } from "react/jsx-runtime";
 import { Scrollbars as CustomScrollbars, } from 'react-custom-scrollbars';
 import { cloneDeep } from 'lodash';
 // Libraries
-import React, { forwardRef, useImperativeHandle, useRef } from 'react';
+import { forwardRef, useImperativeHandle, useRef } from 'react';
 // Styled
 import { HorizontalTrack, ThumbBar, VerticalTrack } from './styled';
 const THUMB_SIZE = 4;
 const MARGIN = 3;
 export const Scrollbars = forwardRef((props, refProp) => {
     // Props
-    const { autoHide = true, autoHeightMax = 0, className } = props, restProps = __rest(props, ["autoHide", "autoHeightMax", "className"]);
+    const { autoHide = true, autoHeightMax = 0, className, ...restProps } = props;
     // Refs
     const ref = useRef(null);
     useImperativeHandle(refProp, () => ref.current, []);
@@ -58,13 +48,7 @@ export const Scrollbars = forwardRef((props, refProp) => {
         ref.current.trackHorizontal.style.visibility =
             scrollWidth <= clientWidth ? 'hidden' : 'visible';
     };
-    return (React.createElement(CustomScrollbars, Object.assign({ className: `custom-scrollbars ${className || ''}`, autoHide: autoHide, autoHeightMax: autoHeightMax, renderThumbVertical: props => React.createElement(ThumbBar, Object.assign({ className: "thumb-vertical" }, props)), renderThumbHorizontal: props => React.createElement(ThumbBar, Object.assign({ className: "thumb-horizontal" }, props)), renderTrackVertical: (_a) => {
-            var { style } = _a, restOfProps = __rest(_a, ["style"]);
-            return (React.createElement(VerticalTrack, Object.assign({ className: "scrollbar-track" }, restOfProps, { style: Object.assign(Object.assign({}, style), { display: 'block' }) })));
-        }, renderTrackHorizontal: (_a) => {
-            var { style } = _a, restOfProps = __rest(_a, ["style"]);
-            return (React.createElement(HorizontalTrack, Object.assign({ className: "scrollbar-track" }, restOfProps, { style: Object.assign(Object.assign({}, style), { display: 'block' }) })));
-        }, renderView: props => {
+    return (_jsx(CustomScrollbars, { className: `custom-scrollbars ${className || ''}`, autoHide: autoHide, autoHeightMax: autoHeightMax, renderThumbVertical: props => _jsx(ThumbBar, { className: "thumb-vertical", ...props }), renderThumbHorizontal: props => _jsx(ThumbBar, { className: "thumb-horizontal", ...props }), renderTrackVertical: ({ style, ...restOfProps }) => (_jsx(VerticalTrack, { className: "scrollbar-track", ...restOfProps, style: { ...style, display: 'block' } })), renderTrackHorizontal: ({ style, ...restOfProps }) => (_jsx(HorizontalTrack, { className: "scrollbar-track", ...restOfProps, style: { ...style, display: 'block' } })), renderView: props => {
             const { style } = props || {};
             const newStyle = cloneDeep(style);
             // Adjust the margins to account for the custom scrollbar size
@@ -77,6 +61,6 @@ export const Scrollbars = forwardRef((props, refProp) => {
             //   newStyle.maxHeight = parseInt(`${autoHeightMax}`) + THUMB_SIZE;
             // }
             // Return a div element with the adjusted styles and original props, applying a custom class for styling
-            return React.createElement("div", Object.assign({ className: "scrollbar-view" }, props, { style: newStyle }));
-        }, onUpdate: onUpdate, hideTracksWhenNotNeeded: true }, restProps, { ref: ref })));
+            return _jsx("div", { className: "scrollbar-view", ...props, style: newStyle });
+        }, onUpdate: onUpdate, hideTracksWhenNotNeeded: true, ...restProps, ref: ref }));
 });

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

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 export const ScrollbarsWrapper = styled.div ``;
 export const ThumbBar = styled.div `
-  background: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.gray5};
+  background: ${globalToken?.gray5};
   border-radius: 4px;
 `;
 export const VerticalTrack = styled.div `