@antscorp/antsomi-ui 2.0.7 → 2.0.8-3.text-editor-beta.1

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

@@ -1,26 +1,29 @@
-var _a, _b, _c, _d, _e, _f, _g, _h, _j;
 /* eslint-disable indent */
 // Styled
 import styled, { css } from 'styled-components';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
-import { BTN_ADD_SIZE, OFFSET_SIZE_SLIDE, WIDTH_SLIDE_ITEM } from './constants';
+import { WIDTH_SLIDE_ITEM } from './constants';
+// Utils
+import { getOffsetSize, getOffsetSizeAdd } from './utils';
 export const SliderWrapper = styled.div `
   position: relative;
   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);
+  width: calc(
+    100% - ${({ size }) => getOffsetSizeAdd(size)}px - ${({ size }) => getOffsetSize(size) * 2}px
+  );
   flex: 1;
-  height: ${OFFSET_SIZE_SLIDE}px;
-  padding: 0px ${OFFSET_SIZE_SLIDE}px;
+  height: ${({ size }) => getOffsetSize(size)}px;
+  padding: 0px ${({ size }) => getOffsetSize(size)}px;
 
   .btn-action-slide-template {
-    width: ${OFFSET_SIZE_SLIDE}px !important;
-    height: ${OFFSET_SIZE_SLIDE - 2}px !important;
+    width: ${({ size }) => getOffsetSize(size)}px !important;
+    height: ${({ size }) => getOffsetSize(size) - 2}px !important;
     box-sizing: border-box;
     display: flex;
     align-items: center;
@@ -30,14 +33,92 @@ 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};
+    }
+  }
+
+  &.slider-wrapper--borderless {
+    border-radius: unset;
+    box-shadow: 0px 3px 3px 0px rgba(0, 46, 89, 0.1);
+    border: none;
+    border-bottom: 1px solid ${THEME.token?.bw4};
+
+    #wrapper-overflow {
+      height: ${({ size }) => getOffsetSize(size) - 1}px;
+      background-color: ${THEME.token?.bw2};
+    }
+
+    .slide-item {
+      background-color: transparent;
+      border-top: none;
+      border-right-color: ${THEME.token?.bw3};
+
+      &.slide-item--active {
+        background-color: ${THEME.token?.bw0};
+      }
+
+      &.slide-item--badge-number {
+        justify-content: center;
+        padding: 0px;
+        width: ${({ size }) => getOffsetSize(size)}px;
+        height: ${({ size }) => getOffsetSize(size) - 1}px;
+        border-bottom: none;
+
+        &.slide-item--active {
+          width: 90px;
+        }
+
+        .slide-item__text {
+          &--active {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 10px;
+            color: ${THEME.token?.colorText};
+          }
+
+          &--circle {
+            font-size: 14px;
+            font-weight: 700;
+            color: ${THEME.token?.colorPrimary};
+            line-height: 22px;
+            text-align: center;
+            display: inline-block;
+            background-color: ${THEME.token?.bw0};
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+            border: 1px solid ${THEME.token?.blue1};
+          }
+
+          &--icon {
+            color: ${THEME.token?.bw0};
+            background: ${THEME.token?.colorPrimary};
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+          }
+        }
+      }
+    }
+
+    .btn-action-slide-template {
+      height: ${({ size }) => getOffsetSize(size)}px !important;
+    }
+
+    .btn-action-slide-template.btn-arrow-left,
+    .btn-action-slide-template.btn-arrow-right {
+      border-right-color: ${THEME.token?.bw4};
     }
   }
 `;
@@ -59,7 +140,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 +149,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};
-  height: ${OFFSET_SIZE_SLIDE}px;
+  border-top: 1px solid ${THEME.token?.accent1};
+  border-bottom: 1px solid ${THEME.token?.accent1};
+  height: ${({ size }) => getOffsetSize(size)}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;
+  line-height: ${({ size }) => getOffsetSize(size)}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 +184,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/SlideBar/utils.d.ts

@@ -0,0 +1,3 @@
+import type { SlideBarProps } from './SlideBar';
+export declare const getOffsetSize: (size?: SlideBarProps['size']) => 32 | 40;
+export declare const getOffsetSizeAdd: (size?: SlideBarProps['size']) => 32 | 40;

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

@@ -0,0 +1,18 @@
+// Constants
+import { BTN_ADD_SIZE, BTN_ADD_SIZE_MD, OFFSET_SIZE_SLIDE, OFFSET_SIZE_SLIDE_MD, } from './constants';
+export const getOffsetSize = (size) => {
+    switch (size) {
+        case 'medium':
+            return OFFSET_SIZE_SLIDE_MD;
+        default:
+            return OFFSET_SIZE_SLIDE;
+    }
+};
+export const getOffsetSizeAdd = (size) => {
+    switch (size) {
+        case 'medium':
+            return BTN_ADD_SIZE_MD;
+        default:
+            return BTN_ADD_SIZE;
+    }
+};

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>;

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

@@ -1,4 +1,3 @@
-var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
 import styled from 'styled-components';
 import { Steps } from 'antd';
 import { Flex } from '../Flex';
@@ -14,7 +13,7 @@ export const SelectedIcon = styled.div `
   border-radius: 100%;
   font-size: 14px;
   line-height: 23px;
-  color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary};
+  color: ${THEME.token?.colorPrimary};
   box-sizing: border-box;
   width: 100%;
   height: 100%;
@@ -71,12 +70,12 @@ export const StepsWrapper = styled(Steps) `
 
           & > .antsomi-steps-item-content > .antsomi-steps-item-title::after {
             height: 2px;
-            background-color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.bw6};
+            background-color: ${THEME.token?.bw6};
           }
 
           & > .antsomi-steps-item-tail::after {
             width: 2px;
-            background-color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.bw6};
+            background-color: ${THEME.token?.bw6};
           }
         }
 
@@ -86,7 +85,7 @@ export const StepsWrapper = styled(Steps) `
               background-color: white;
             }
             .antsomi-steps-item-content {
-              color: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.colorPrimary};
+              color: ${THEME.token?.colorPrimary};
             }
           }
         }
@@ -95,7 +94,7 @@ export const StepsWrapper = styled(Steps) `
           .antsomi-steps-item-container {
             & > .antsomi-steps-item-content > .antsomi-steps-item-title::after,
             & > .antsomi-steps-item-tail::after {
-              background-color: ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.bw6} !important;
+              background-color: ${THEME.token?.bw6} !important;
             }
           }
         }
@@ -103,11 +102,11 @@ export const StepsWrapper = styled(Steps) `
         &.antsomi-steps-item-selectable {
           & > .antsomi-steps-item-container {
             & > .antsomi-steps-item-content .antsomi-steps-item-title:after {
-              background-color: ${(_f = THEME.token) === null || _f === void 0 ? void 0 : _f.colorPrimary};
+              background-color: ${THEME.token?.colorPrimary};
             }
 
             .antsomi-steps-item-tail::after {
-              background-color: ${(_g = THEME.token) === null || _g === void 0 ? void 0 : _g.colorPrimary};
+              background-color: ${THEME.token?.colorPrimary};
             }
           }
         }
@@ -116,13 +115,13 @@ export const StepsWrapper = styled(Steps) `
           & > .antsomi-steps-item-container {
             & > .antsomi-steps-item-content > .antsomi-steps-item-title {
               &::after {
-                ${({ isReactivate }) => { var _a; return isReactivate ? `background-color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary}` : ''; }};
+                ${({ $isReactivate }) => $isReactivate ? `background-color: ${THEME.token?.colorPrimary}` : ''};
               }
             }
 
             & > .antsomi-steps-item-tail {
               &::after {
-                ${({ isReactivate }) => { var _a; return isReactivate ? `background-color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary}` : ''; }};
+                ${({ $isReactivate }) => $isReactivate ? `background-color: ${THEME.token?.colorPrimary}` : ''};
               }
             }
           }
@@ -166,26 +165,26 @@ export const StepsWrapper = styled(Steps) `
 
       &.antsomi-steps-horizontal .antsomi-steps-item-tail::after,
       &.antsomi-steps-vertical .antsomi-steps-item-tail::after {
-        background-color: ${(_h = THEME.token) === null || _h === void 0 ? void 0 : _h.bw6};
+        background-color: ${THEME.token?.bw6};
       }
 
       .antsomi-steps-item-selectable > .antsomi-steps-item-container {
         & > .antsomi-steps-item-tail::after {
-          background-color: ${(_j = THEME.token) === null || _j === void 0 ? void 0 : _j.colorPrimary};
+          background-color: ${THEME.token?.colorPrimary};
         }
       }
 
       .antsomi-steps-item-process.antsomi-steps-item-active {
         & > .antsomi-steps-item-container {
           & > .antsomi-steps-item-tail::after {
-            ${({ isReactivate }) => { var _a; return isReactivate ? `background-color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary}` : ''; }};
+            ${({ $isReactivate }) => $isReactivate ? `background-color: ${THEME.token?.colorPrimary}` : ''};
           }
         }
       }
 
       .highest-step {
         .antsomi-steps-item-container > .antsomi-steps-item-tail::after {
-          background-color: ${(_k = THEME.token) === null || _k === void 0 ? void 0 : _k.bw6} !important;
+          background-color: ${THEME.token?.bw6} !important;
         }
       }
     }
@@ -209,10 +208,10 @@ export const StepsWrapper = styled(Steps) `
       }
 
       .antsomi-steps-item-wait {
-        color: ${(_l = THEME.token) === null || _l === void 0 ? void 0 : _l.bw7};
+        color: ${THEME.token?.bw7};
 
         & > .antsomi-steps-item-container > .antsomi-steps-item-icon {
-          background-color: ${(_m = THEME.token) === null || _m === void 0 ? void 0 : _m.bw6};
+          background-color: ${THEME.token?.bw6};
         }
 
         &:not(.antsomi-steps-item-error)
@@ -227,7 +226,7 @@ export const StepsWrapper = styled(Steps) `
 
       .antsomi-steps-item-process.antsomi-steps-item-active {
         font-weight: bold;
-        color: ${(_o = THEME.token) === null || _o === void 0 ? void 0 : _o.colorPrimary};
+        color: ${THEME.token?.colorPrimary};
 
         & > .antsomi-steps-item-container {
           & > .antsomi-steps-item-content > .antsomi-steps-item-title,
@@ -242,7 +241,7 @@ export const StepsWrapper = styled(Steps) `
 
         & > .antsomi-steps-item-container {
           & > .antsomi-steps-item-icon {
-            color: ${(_p = THEME.token) === null || _p === void 0 ? void 0 : _p.colorPrimary};
+            color: ${THEME.token?.colorPrimary};
           }
 
           & > .antsomi-steps-item-content {

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

@@ -0,0 +1,4 @@
+import React from 'react';
+type SuspenseProps = {} & React.SuspenseProps;
+export declare const Suspense: (props: SuspenseProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/es/components/atoms/Suspense/Suspense.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { Spin } from '../Spin';
+export const Suspense = (props) => {
+    const { children, ...rest } = props;
+    return (_jsx(React.Suspense, { fallback: _jsx(Spin, { indicatorSize: 20 }), ...rest, children: children }));
+};

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

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

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

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

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

@@ -1,3 +1,13 @@
-/// <reference types="react" />
-export declare const Switch: import("react").ForwardRefExoticComponent<import("antd").SwitchProps & import("react").RefAttributes<HTMLElement>>;
-export type { SwitchProps } from 'antd';
+import React from 'react';
+import { type SwitchProps as AntdSwitchProps } from 'antd';
+import { DataType } from 'csstype';
+declare module 'react' {
+    interface CSSProperties {
+        '--switch-color'?: DataType.Color;
+    }
+}
+type SwitchProps = AntdSwitchProps & {
+    color?: string;
+};
+declare const Switch: React.FC<SwitchProps>;
+export { Switch, type SwitchProps };

package/es/components/atoms/Switch/Switch.js

@@ -1,3 +1,9 @@
-import { Switch as AntdSwitch } from 'antd';
-export const Switch = AntdSwitch;
-Switch.defaultProps = {};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import { StyledSwitch } from './styled';
+const Switch = props => {
+    const { color = THEME.token?.colorPrimary || '#005eb8', style, ...rest } = props;
+    const validatedColor = CSS.supports('color', color) ? color : THEME.token?.colorPrimary;
+    return _jsx(StyledSwitch, { style: { ...style, '--switch-color': validatedColor }, ...rest });
+};
+export { Switch };

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

@@ -1,2 +1 @@
-export { Switch } from './Switch';
-export type { SwitchProps } from 'antd';
+export { Switch, type SwitchProps } from './Switch';

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const StyledSwitch: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").SwitchProps & import("react").RefAttributes<HTMLElement>>, any, {}, never>;