@antscorp/antsomi-ui 2.0.13 → 2.0.15

package/es/components/atoms/SlideBar/SlideBar.js

@@ -1,5 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Libraries
-import React, { useRef, useEffect, useState, useMemo } from 'react';
+import { useRef, useEffect, useState, useMemo } from 'react';
 import _ from 'lodash';
 import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
 // Components
@@ -16,12 +17,15 @@ import { getObjectPropSafely, handleError } from '@antscorp/antsomi-ui/es/utils'
 // Locales
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
 import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
-const getItemStyle = (isDragging, draggableStyle) => (Object.assign({ 
+const getItemStyle = (isDragging, draggableStyle) => ({
     // some basic styles to make the items look a bit nicer
-    userSelect: 'none', borderLeft: isDragging ? '1px solid #e0e0e0' : 'none' }, draggableStyle));
+    userSelect: 'none',
+    borderLeft: isDragging ? '1px solid #e0e0e0' : 'none',
+    // styles we need to apply on draggables
+    ...draggableStyle,
+});
 const PATH = 'src/components/atoms/SlideBar/SlideBar.tsx';
 export const SlideBar = props => {
-    var _a, _b, _c, _d;
     const { isViewMode, isShowLabelSequentially, isDragDisabled, isShowAdd, disabled, prefix, options, activeId, limit, errors, callback, } = props;
     // States
     const [state, setState] = useState({
@@ -36,14 +40,17 @@ export const SlideBar = props => {
     });
     // Refs
     const wrapperOverflowRef = useRef(null);
-    const disabledAdd = useMemo(() => disabled || isViewMode || (limit && options.length >= (limit === null || limit === void 0 ? void 0 : limit.max)), [disabled, isViewMode, limit, options.length]);
-    const disabledDuplicate = useMemo(() => (limit && options.length >= (limit === null || limit === void 0 ? void 0 : limit.max)) || isViewMode || disabled, [disabled, isViewMode, limit, options.length]);
-    const disabledDelete = useMemo(() => (limit && options.length <= (limit === null || limit === void 0 ? void 0 : limit.min)) || isViewMode || disabled, [disabled, isViewMode, limit, options.length]);
+    const disabledAdd = useMemo(() => disabled || isViewMode || (limit && options.length >= limit?.max), [disabled, isViewMode, limit, options.length]);
+    const disabledDuplicate = useMemo(() => (limit && options.length >= limit?.max) || isViewMode || disabled, [disabled, isViewMode, limit, options.length]);
+    const disabledDelete = useMemo(() => (limit && options.length <= limit?.min) || isViewMode || disabled, [disabled, isViewMode, limit, options.length]);
     // Locales
     const { t } = i18nInstance;
     const handleClick = (event, slideInfo) => {
         event.stopPropagation();
-        setState(prev => (Object.assign(Object.assign({}, prev), { cacheInfoClicked: slideInfo })));
+        setState(prev => ({
+            ...prev,
+            cacheInfoClicked: slideInfo,
+        }));
     };
     const reorder = (list, startIndex, endIndex) => {
         const result = Array.from(list);
@@ -95,7 +102,10 @@ export const SlideBar = props => {
         }
     };
     const handleClosePopover = () => {
-        setState(prev => (Object.assign(Object.assign({}, prev), { openPopover: {} })));
+        setState(prev => ({
+            ...prev,
+            openPopover: {},
+        }));
     };
     const handleDuplicateSlide = (slideInfo) => {
         try {
@@ -152,7 +162,10 @@ export const SlideBar = props => {
             else if (type === 'NEXT') {
                 wrapperOverflowRef.current.scrollLeft += WIDTH_SLIDE_ITEM;
             }
-            setState(prev => (Object.assign(Object.assign({}, prev), { notiUpdateScroll: prev.notiUpdateScroll + 1 })));
+            setState(prev => ({
+                ...prev,
+                notiUpdateScroll: prev.notiUpdateScroll + 1,
+            }));
         }
         catch (error) {
             handleError(error, {
@@ -184,12 +197,18 @@ export const SlideBar = props => {
         }
     };
     const handleOpenChange = (newOpen, itemId) => {
-        setState(prev => (Object.assign(Object.assign({}, prev), { openPopover: {
+        setState(prev => ({
+            ...prev,
+            openPopover: {
                 [itemId]: newOpen,
-            } })));
+            },
+        }));
     };
     useEffect(() => () => {
-        setState(prev => (Object.assign(Object.assign({}, prev), { cacheInfoClicked: { label: '', value: '' } })));
+        setState(prev => ({
+            ...prev,
+            cacheInfoClicked: { label: '', value: '' },
+        }));
     }, []);
     // Calculator center selected template
     useEffect(() => {
@@ -208,12 +227,16 @@ export const SlideBar = props => {
     }, [activeId]);
     useEffect(() => {
         if (!_.isEmpty(wrapperOverflowRef.current)) {
-            const isDisabledPrevTmp = getObjectPropSafely(() => { var _a; return ((_a = wrapperOverflowRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) === 0; });
+            const isDisabledPrevTmp = getObjectPropSafely(() => wrapperOverflowRef.current?.scrollLeft === 0);
             const isDisabledNextTmp = getObjectPropSafely(() => {
                 const { scrollLeft = 0, offsetWidth = 0, scrollWidth = 0, } = wrapperOverflowRef.current || {};
                 return offsetWidth === scrollWidth || scrollWidth <= Math.ceil(scrollLeft) + offsetWidth;
             });
-            setState(prev => (Object.assign(Object.assign({}, prev), { disabledPrev: isDisabledPrevTmp, disabledNext: isDisabledNextTmp })));
+            setState(prev => ({
+                ...prev,
+                disabledPrev: isDisabledPrevTmp,
+                disabledNext: isDisabledNextTmp,
+            }));
         }
     }, [options, state.notiUpdateScroll]);
     const renderMainContent = () => options.map((item, index) => {
@@ -221,57 +244,40 @@ export const SlideBar = props => {
         if (isShowLabelSequentially) {
             label = `${prefix} ${index + 1}`;
         }
-        return (React.createElement(Draggable, { key: item.value, isDragDisabled: isViewMode || disabled || isDragDisabled, draggableId: item.value, index: index }, (providedDraggable, snapshotDraggable) => {
-            var _a, _b;
-            return (React.createElement(SlideItem, Object.assign({ id: `template-slide-${item.value}`, isActive: activeId === item.value, className: "slide-item", ref: providedDraggable.innerRef }, providedDraggable.draggableProps, providedDraggable.dragHandleProps, { isSlideError: Array.isArray(errors) && errors.includes(item.value), style: getItemStyle(snapshotDraggable.isDragging, providedDraggable.draggableProps.style), onClick: (e) => {
+        return (_jsx(Draggable, { isDragDisabled: isViewMode || disabled || isDragDisabled, draggableId: item.value, index: index, children: (providedDraggable, snapshotDraggable) => (_jsxs(SlideItem, { id: `template-slide-${item.value}`, isActive: activeId === item.value, className: "slide-item", ref: providedDraggable.innerRef, ...providedDraggable.draggableProps, ...providedDraggable.dragHandleProps, isSlideError: Array.isArray(errors) && errors.includes(item.value), style: getItemStyle(snapshotDraggable.isDragging, providedDraggable.draggableProps.style), onClick: (e) => {
                     e.stopPropagation();
                     handleActiveSlide(e, item);
-                } }),
-                React.createElement(SlideText, { isActive: activeId === item.value }, label),
-                !isViewMode && (React.createElement(Popover, { placement: "bottomLeft", trigger: "click", open: state.openPopover[item.value], onOpenChange: newOpen => handleOpenChange(newOpen, item.value), content: React.createElement(MenuList, null,
-                        React.createElement(WrapperDisable, { disabled: disabledDuplicate },
-                            React.createElement(MenuItem, { isDisabled: disabledDuplicate, onClick: (e) => {
-                                    e.stopPropagation();
-                                    if (!disabledDuplicate) {
-                                        handleDuplicateSlide(state.cacheInfoClicked);
-                                    }
-                                } }, t(translations.duplicate.title))),
-                        React.createElement(WrapperDisable, { disabled: disabledDelete },
-                            React.createElement(MenuItem, { isDisabled: disabledDelete, onClick: (e) => {
-                                    e.stopPropagation();
-                                    if (!disabledDelete) {
-                                        handleDeleteSlide(state.cacheInfoClicked);
-                                    }
-                                } }, t(translations.delete.title)))), arrow: false },
-                    React.createElement(Icon, { type: "icon-ants-three-dot-vertical", color: activeId === item.value ? (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary : (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorText, size: "20px", onClick: (event) => handleClick(event, item), disabled: false })))));
-        }));
+                }, children: [_jsx(SlideText, { isActive: activeId === item.value, children: label }), !isViewMode && (_jsx(Popover, { placement: "bottomLeft", trigger: "click", open: state.openPopover[item.value], onOpenChange: newOpen => handleOpenChange(newOpen, item.value), content: _jsxs(MenuList, { children: [_jsx(WrapperDisable, { disabled: disabledDuplicate, children: _jsx(MenuItem, { isDisabled: disabledDuplicate, onClick: (e) => {
+                                            e.stopPropagation();
+                                            if (!disabledDuplicate) {
+                                                handleDuplicateSlide(state.cacheInfoClicked);
+                                            }
+                                        }, children: t(translations.duplicate.title) }) }), _jsx(WrapperDisable, { disabled: disabledDelete, children: _jsx(MenuItem, { isDisabled: disabledDelete, onClick: (e) => {
+                                            e.stopPropagation();
+                                            if (!disabledDelete) {
+                                                handleDeleteSlide(state.cacheInfoClicked);
+                                            }
+                                        }, children: t(translations.delete.title) }) })] }), arrow: false, children: _jsx(Icon, { type: "icon-ants-three-dot-vertical", color: activeId === item.value ? THEME.token?.colorPrimary : THEME.token?.colorText, size: "20px", onClick: (event) => handleClick(event, item), disabled: false }) }))] })) }, item.value));
     });
-    const renderSliderDragDrop = () => (React.createElement(WrapperOverflow, { ref: wrapperOverflowRef, id: "wrapper-overflow" },
-        React.createElement(DragDropContext, { onDragEnd: handleDragEnd },
-            React.createElement(Droppable, { droppableId: "droppable", direction: "horizontal" }, (providedDroppable, _snapshotDroppable) => (React.createElement(MainContent, Object.assign({ ref: providedDroppable.innerRef }, providedDroppable.droppableProps), renderMainContent()))))));
-    return (React.createElement(ContainerSlideBar, null,
-        React.createElement(SliderWrapper, { isViewMode: isViewMode },
-            React.createElement(Icon, { type: "icon-ants-angle-left", style: { fontSize: '16px', cursor: 'pointer', color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary }, className: "btn-arrow-left btn-action-slide-template", disabled: state.disabledPrev, onClick: (e) => {
-                    e.stopPropagation();
-                    handleChangeScrollDirection('PREVIOUS');
-                } }),
-            renderSliderDragDrop(),
-            React.createElement(Icon, { type: "icon-ants-angle-right", style: { fontSize: '16px', cursor: 'pointer', color: (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorPrimary }, className: "btn-arrow-right btn-action-slide-template", disabled: state.disabledNext, onClick: (e) => {
+    const renderSliderDragDrop = () => (_jsx(WrapperOverflow, { ref: wrapperOverflowRef, id: "wrapper-overflow", children: _jsx(DragDropContext, { onDragEnd: handleDragEnd, children: _jsx(Droppable, { droppableId: "droppable", direction: "horizontal", children: (providedDroppable, _snapshotDroppable) => (_jsx(MainContent, { ref: providedDroppable.innerRef, ...providedDroppable.droppableProps, children: renderMainContent() })) }) }) }));
+    return (_jsxs(ContainerSlideBar, { children: [_jsxs(SliderWrapper, { isViewMode: isViewMode, children: [_jsx(Icon, { type: "icon-ants-angle-left", style: { fontSize: '16px', cursor: 'pointer', color: THEME.token?.colorPrimary }, className: "btn-arrow-left btn-action-slide-template", disabled: state.disabledPrev, onClick: (e) => {
+                            e.stopPropagation();
+                            handleChangeScrollDirection('PREVIOUS');
+                        } }), renderSliderDragDrop(), _jsx(Icon, { type: "icon-ants-angle-right", style: { fontSize: '16px', cursor: 'pointer', color: THEME.token?.colorPrimary }, className: "btn-arrow-right btn-action-slide-template", disabled: state.disabledNext, onClick: (e) => {
+                            e.stopPropagation();
+                            handleChangeScrollDirection('NEXT');
+                        } })] }), isShowAdd && (_jsx(PlusCircleFilled, { style: {
+                    fontSize: `${BTN_ADD_SIZE}px`,
+                    cursor: disabledAdd ? 'not-allowed' : 'pointer',
+                    color: disabledAdd ? THEME.token?.colorTextDisabled : THEME.token?.colorPrimary,
+                }, 
+                // disabled={disabledAdd}
+                onClick: (e) => {
                     e.stopPropagation();
-                    handleChangeScrollDirection('NEXT');
-                } })),
-        isShowAdd && (React.createElement(PlusCircleFilled, { style: {
-                fontSize: `${BTN_ADD_SIZE}px`,
-                cursor: disabledAdd ? 'not-allowed' : 'pointer',
-                color: disabledAdd ? (_c = THEME.token) === null || _c === void 0 ? void 0 : _c.colorTextDisabled : (_d = THEME.token) === null || _d === void 0 ? void 0 : _d.colorPrimary,
-            }, 
-            // disabled={disabledAdd}
-            onClick: (e) => {
-                e.stopPropagation();
-                if (!disabledAdd) {
-                    handleAddSlide();
-                }
-            } }))));
+                    if (!disabledAdd) {
+                        handleAddSlide();
+                    }
+                } }))] }));
 };
 SlideBar.defaultProps = {
     isViewMode: false,

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

@@ -1,4 +1,3 @@
-var _a, _b, _c, _d, _e, _f, _g, _h, _j;
 /* eslint-disable indent */
 // Styled
 import styled, { css } from 'styled-components';
@@ -10,7 +9,7 @@ export const SliderWrapper = styled.div `
   display: flex;
   align-items: center;
   border-radius: 4px;
-  border: 1px solid ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.accent1};
+  border: 1px solid ${THEME.token?.accent1};
   box-sizing: border-box;
   // max-width: ${props => (props.isViewMode ? '100%' : 'calc(100% - 40px)')};
   width: calc(100% - ${BTN_ADD_SIZE}px - ${OFFSET_SIZE_SLIDE * 2}px);
@@ -30,14 +29,14 @@ export const SliderWrapper = styled.div `
       position: absolute;
       top: 0px;
       left: 0;
-      border-right: 1px solid ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.accent1};
+      border-right: 1px solid ${THEME.token?.accent1};
     }
 
     &.btn-arrow-right {
       position: absolute;
       top: 0px;
       right: 0px;
-      border-left: 1px solid ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.accent1};
+      border-left: 1px solid ${THEME.token?.accent1};
     }
   }
 `;
@@ -59,7 +58,7 @@ export const MainContent = styled.div `
   height: 100%;
 
   .slide-item {
-    border-right: 1px solid ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.accent1};
+    border-right: 1px solid ${THEME.token?.accent1};
   }
 `;
 export const SlideItem = styled.div `
@@ -68,35 +67,32 @@ export const SlideItem = styled.div `
   align-items: center;
   flex-shrink: 0;
 
-  border-top: 1px solid ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.accent1};
-  border-bottom: 1px solid ${(_f = THEME.token) === null || _f === void 0 ? void 0 : _f.accent1};
+  border-top: 1px solid ${THEME.token?.accent1};
+  border-bottom: 1px solid ${THEME.token?.accent1};
   height: ${OFFSET_SIZE_SLIDE}px;
   width: ${WIDTH_SLIDE_ITEM}px;
   padding: 0px 10px;
   cursor: pointer;
-  background-color: ${props => { var _a, _b; return (props.isActive ? (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorTextActive : (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.bw0); }};
+  background-color: ${props => (props.isActive ? THEME.token?.colorTextActive : THEME.token?.bw0)};
 
   .icon-more-vertical {
     font-weight: 600;
   }
 
-  ${props => {
-    var _a;
-    return props.isSlideError &&
-        css `
-      border: 1px solid ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.red8} !important;
-    `;
-}}
+  ${props => props.isSlideError &&
+    css `
+      border: 1px solid ${THEME.token?.red8} !important;
+    `}
 `;
 export const SlideText = styled.div `
-  font-size: ${(_g = THEME.token) === null || _g === void 0 ? void 0 : _g.fontSize}px;
+  font-size: ${THEME.token?.fontSize}px;
   font-weight: 400;
   line-height: ${OFFSET_SIZE_SLIDE}px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 
-  color: ${props => { var _a, _b; return (props.isActive ? (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary : (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorText); }};
+  color: ${props => (props.isActive ? THEME.token?.colorPrimary : THEME.token?.colorText)};
 `;
 export const MenuList = styled.div `
   display: flex;
@@ -106,9 +102,9 @@ export const MenuList = styled.div `
   gap: 8px;
 `;
 export const MenuItem = styled.div `
-  font-size: ${(_h = THEME.token) === null || _h === void 0 ? void 0 : _h.fontSize}px;
+  font-size: ${THEME.token?.fontSize}px;
   line-height: 14px;
-  color: ${(_j = THEME.token) === null || _j === void 0 ? void 0 : _j.colorText};
+  color: ${THEME.token?.colorText};
 
   ${props => props.isDisabled &&
     css `

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

@@ -1,25 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 // Libraries
-import React, { memo, useMemo } from 'react';
+import { memo, useMemo } from 'react';
 // Antd Components
 import { Slider as AntdSlider } from 'antd';
 // Styled
 import { SliderWrapper } from './styled';
 import { omit } from 'lodash';
 export const Slider = memo(props => {
-    const { range, value, min = 0, max = 0, className, tooltipVisible } = props;
+    const { range, value, min = 0, max = 0, className, tooltipVisible = false } = props;
     const isNegative = useMemo(() => !!(!range && min < 0), [range, min]);
     const calculateWidth = useMemo(() => ((value || 0) * 100) / (Math.abs(max) + Math.abs(min) || 1), [min, max, value]);
     const restProps = tooltipVisible === 'default' ? omit(props, ['tooltipVisible']) : props;
     if (isNegative) {
-        return (React.createElement(SliderWrapper, { isNegative: true, width: calculateWidth, className: className },
-            React.createElement(AntdSlider, Object.assign({}, omit(restProps, ['marks', 'className']), { marks: {
+        return (_jsx(SliderWrapper, { isNegative: true, width: calculateWidth, className: className, children: _jsx(AntdSlider, { ...omit(restProps, ['marks', 'className']), marks: {
                     0: ' ',
-                } }))));
+                } }) }));
     }
-    return (React.createElement(SliderWrapper, { className: className },
-        React.createElement(AntdSlider, Object.assign({}, restProps))));
+    return (_jsx(SliderWrapper, { className: className, children: _jsx(AntdSlider, { ...restProps }) }));
 });
-Slider.defaultProps = {
-    tooltipVisible: false,
-    min: 0,
-};

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

@@ -7,7 +7,6 @@ export const SliderWrapper = styled.div `
 
   .antsomi-slider {
     ${p => {
-    var _a, _b;
     const width = p.width || 0;
     return p.isNegative
         ? css `
@@ -34,8 +33,8 @@ export const SliderWrapper = styled.div `
               width: 0.25rem;
               height: 0.875rem;
               border-radius: 0.125rem;
-              background-color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.accent1};
-              border-color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.accent1};
+              background-color: ${THEME.token?.accent1};
+              border-color: ${THEME.token?.accent1};
             }
           `
         : '';

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

@@ -1,5 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 // Libraries
-import React, { useState } from 'react';
+import { useState } from 'react';
 // Antd Components
 import { Slider as AntdSlider } from 'antd';
 // React.FC<SliderProps>
@@ -11,11 +12,18 @@ export const SliderV2 = props => {
         const calcValue = value || valueInternal;
         const leftTrackPosition = `${(Math.abs(calcValue > 0 ? min : min - calcValue) / sliderWidth) * 100}%`;
         const sliderTrackWidth = `${(Math.abs(calcValue) / sliderWidth) * 100}%`;
-        return (React.createElement(AntdSlider, Object.assign({ value: value || valueInternal, onChange: value => {
+        return (_jsx(AntdSlider, { value: value || valueInternal, onChange: value => {
                 setValueInternal(value);
                 if (onChange)
                     onChange(value);
-            }, styles: Object.assign({ track: Object.assign({ left: leftTrackPosition, width: sliderTrackWidth }, styles === null || styles === void 0 ? void 0 : styles.track) }, styles), marks: marks || { 0: ' ' } }, props)));
+            }, styles: {
+                track: {
+                    left: leftTrackPosition,
+                    width: sliderTrackWidth,
+                    ...styles?.track,
+                },
+                ...styles,
+            }, marks: marks || { 0: ' ' }, ...props }));
     }
-    return React.createElement(AntdSlider, Object.assign({}, props));
+    return _jsx(AntdSlider, { ...props });
 };

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { SpinProps as AntdSpinProps } from 'antd';
 export interface TSpinProps extends AntdSpinProps {
     indicatorSize?: number;
@@ -7,6 +6,6 @@ export interface TSpinProps extends AntdSpinProps {
     indicatorBackground?: string;
 }
 export declare const Spin: {
-    (props: TSpinProps): React.JSX.Element;
+    (props: TSpinProps): import("react/jsx-runtime").JSX.Element;
     defaultProps: {};
 };

package/es/components/atoms/Spin/Spin.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";
 // Icons
 import { LoadingIcon } from '../../icons';
 // Styled
@@ -18,11 +6,11 @@ import { StyledSpin } from './styled';
 // Constants
 import { THEME, globalToken } from '@antscorp/antsomi-ui/es/constants';
 export const Spin = (props) => {
-    var _a;
-    const { indicatorSize, indicatorBackground, showIndicatorBackground, children } = props, restOf = __rest(props, ["indicatorSize", "indicatorBackground", "showIndicatorBackground", "children"]);
-    return (React.createElement(StyledSpin, Object.assign({ indicator: (React.createElement(LoadingIcon, { style: {
+    const { indicatorSize, indicatorBackground, showIndicatorBackground, children, ...restOf } = props;
+    return (_jsx(StyledSpin, { indicator: (_jsx(LoadingIcon, { style: {
                 fontSize: indicatorSize || 40,
-                color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary,
-            }, backgroundColor: showIndicatorBackground ? indicatorBackground || (globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue1_1) : 'transparent' })) }, restOf), children));
+                color: THEME.token?.colorPrimary,
+            }, backgroundColor: showIndicatorBackground ? indicatorBackground || globalToken?.blue1_1 : 'transparent' })),
+        ...restOf, children: children }));
 };
 Spin.defaultProps = {};

package/es/components/atoms/Steps/Steps.js

@@ -1,22 +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 } from "react/jsx-runtime";
 // Libraries
-import React, { useEffect, useMemo, useState, memo } from 'react';
+import { useEffect, useMemo, useState, memo } from 'react';
 import { isNumber } from 'lodash';
 import { ConfigProvider } from 'antd';
 // Styled
 import { ErrorIcon, SelectedIcon, StepsWrapper } from './styled';
 export const Steps = memo(props => {
-    const { items, saveHighestStep = true, className } = props, restOfProps = __rest(props, ["items", "saveHighestStep", "className"]);
+    const { items, saveHighestStep = true, className, ...restOfProps } = props;
     const { current, size = 'small' } = restOfProps;
     const [highestStep, setHighestStep] = useState(0);
     useEffect(() => {
@@ -25,7 +15,7 @@ export const Steps = memo(props => {
         }
     }, [current, saveHighestStep, highestStep]);
     const customItems = useMemo(() => saveHighestStep
-        ? items === null || items === void 0 ? void 0 : items.map((item, index) => {
+        ? items?.map((item, index) => {
             let status;
             let icon;
             let className;
@@ -35,11 +25,11 @@ export const Steps = memo(props => {
             else {
                 if (index === current) {
                     status = props.status || 'process';
-                    icon = status === 'error' ? React.createElement(ErrorIcon, null, index + 1) : undefined;
+                    icon = status === 'error' ? _jsx(ErrorIcon, { children: index + 1 }) : undefined;
                 }
                 else {
                     status = 'finish';
-                    icon = React.createElement(SelectedIcon, null, index + 1);
+                    icon = _jsx(SelectedIcon, { children: index + 1 });
                     className = `antsomi-steps-item-selectable${index === highestStep ? ' highest-step' : ''}`;
                 }
             }
@@ -48,7 +38,7 @@ export const Steps = memo(props => {
                 status = item.status;
                 switch (status) {
                     case 'error':
-                        icon = React.createElement(ErrorIcon, null, index + 1);
+                        icon = _jsx(ErrorIcon, { children: index + 1 });
                         break;
                     default:
                         break;
@@ -58,11 +48,12 @@ export const Steps = memo(props => {
             if (items[index + 1] && items[index + 1].status === 'error') {
                 className += ' antsomi-steps-next-error';
             }
-            return Object.assign({ status, icon, className }, item);
+            return { status, icon, className, ...item };
         })
         : items, [saveHighestStep, items, highestStep, props.status, current]);
     /** Check whether the user has reactivated the previous step or not */
     const isReactivate = saveHighestStep && isNumber(current) && current < highestStep;
-    return (React.createElement(ConfigProvider, { theme: { token: { motion: false } } },
-        React.createElement(StepsWrapper, Object.assign({ items: customItems }, restOfProps, { size: size, isReactivate: isReactivate, highestStep: highestStep, className: `${className || ''}${saveHighestStep ? ' save-highest-step' : ''}` }))));
+    return (_jsx(ConfigProvider, { theme: { token: { motion: false } }, children: _jsx(StepsWrapper, { items: customItems, ...restOfProps, size: size, "$isReactivate": isReactivate, 
+            // $highestStep={highestStep}
+            className: `${className || ''}${saveHighestStep ? ' save-highest-step' : ''}` }) }));
 });

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

@@ -4,6 +4,6 @@ export declare const ErrorIcon: import("styled-components").StyledComponent<impo
 export declare const StepsWrapper: import("styled-components").StyledComponent<import("react").FC<import("antd").StepsProps> & {
     Step: typeof import("rc-steps").Step;
 }, any, {
-    isReactivate: boolean;
-    highestStep: number;
+    $isReactivate: boolean;
+    $highestStep?: number | undefined;
 }, never>;