@antscorp/antsomi-ui 1.3.3 → 1.3.5-alpha.1

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

@@ -0,0 +1,136 @@
+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';
+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};
+  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);
+  flex: 1;
+  height: ${OFFSET_SIZE_SLIDE}px;
+  padding: 0px ${OFFSET_SIZE_SLIDE}px;
+
+  .btn-action-slide-template {
+    width: ${OFFSET_SIZE_SLIDE}px !important;
+    height: ${OFFSET_SIZE_SLIDE - 2}px !important;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &.btn-arrow-left {
+      position: absolute;
+      top: 0px;
+      left: 0;
+      border-right: 1px solid ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.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};
+    }
+  }
+`;
+export const WrapperOverflow = styled.div `
+  overflow-x: auto;
+  overflow-y: hidden;
+  flex: 1;
+
+  &::-webkit-scrollbar {
+    -webkit-appearance: none;
+    background-color: #eee;
+    width: 0px;
+    height: 0px;
+  }
+`;
+export const MainContent = styled.div `
+  display: flex;
+  align-items: center;
+  height: 100%;
+
+  .slide-item {
+    border-right: 1px solid ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.accent1};
+  }
+`;
+export const SlideItem = styled.div `
+  display: flex;
+  justify-content: space-between;
+  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;
+  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); }};
+
+  .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;
+    `;
+}}
+`;
+export const SlideText = styled.div `
+  font-size: ${(_g = THEME.token) === null || _g === void 0 ? void 0 : _g.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); }};
+`;
+export const MenuList = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  gap: 8px;
+`;
+export const MenuItem = styled.div `
+  font-size: ${(_h = THEME.token) === null || _h === void 0 ? void 0 : _h.fontSize}px;
+  line-height: 14px;
+  color: ${(_j = THEME.token) === null || _j === void 0 ? void 0 : _j.colorText};
+
+  ${props => props.isDisabled &&
+    css `
+      pointer-events: none;
+    `}
+`;
+export const ContainerSlideBar = styled.div `
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 10px;
+  * > * {
+    box-sizing: border-box;
+  }
+`;
+export const WrapperDisable = styled.div `
+  cursor: pointer;
+
+  ${props => props.disabled &&
+    css `
+      cursor: not-allowed;
+      opacity: 0.6;
+    `}
+`;

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { SliderRangeProps, SliderSingleProps } from 'antd/es/slider';
-export interface SliderProps extends SliderSingleProps {
+export interface SliderProps extends Omit<SliderSingleProps, 'tooltipVisible'> {
+    tooltipVisible?: boolean | 'default';
 }
 export declare const Slider: React.FC<SliderProps | SliderRangeProps>;

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

@@ -1,30 +1,28 @@
-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, { 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 } = props, restOf = __rest(props, ["range", "value", "min", "max"]);
+    const { range, value, min = 0, max = 0, className, tooltipVisible } = 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;
+    const restProps = omit(props, ['tooltipVisible']);
     if (isNegative) {
-        return (React.createElement(SliderWrapper, { isNegative: true, width: calculateWidth },
-            React.createElement(AntdSlider, Object.assign({ min: min, max: max, value: value }, restOf, { marks: { 0: ' ' } }))));
+        return (React.createElement(SliderWrapper, { isNegative: true, width: calculateWidth, className: className },
+            React.createElement(AntdSlider, Object.assign({}, omit(restProps, ['marks', 'className']), { tooltip: tooltipVisible !== 'default' && {
+                    open: tooltipVisible,
+                }, marks: {
+                    0: ' ',
+                } }))));
     }
-    return (React.createElement(SliderWrapper, null,
-        React.createElement(AntdSlider, Object.assign({}, props))));
+    return (React.createElement(SliderWrapper, { className: className },
+        React.createElement(AntdSlider, Object.assign({}, restProps, { tooltip: tooltipVisible !== 'default' && {
+                open: tooltipVisible,
+            } }))));
 });
 Slider.defaultProps = {
     tooltipVisible: false,

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { SliderRangeProps, SliderSingleProps } from 'antd/es/slider';
+export interface SliderProps {
+    defaultSliderTrack?: boolean;
+}
+export declare const SliderV2: React.FC<(SliderSingleProps & SliderProps) | (SliderRangeProps & SliderProps)>;

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

@@ -0,0 +1,21 @@
+// Libraries
+import React, { useState } from 'react';
+// Antd Components
+import { Slider as AntdSlider } from 'antd';
+// React.FC<SliderProps>
+export const SliderV2 = props => {
+    const { min, max, onChange, styles, range, value, defaultValue, marks, defaultSliderTrack } = props;
+    const [valueInternal, setValueInternal] = useState(defaultValue || min || 0);
+    if (min && max && min < 0 && max > 0 && !range && !defaultSliderTrack) {
+        const sliderWidth = max - min;
+        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 => {
+                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)));
+    }
+    return React.createElement(AntdSlider, Object.assign({}, props));
+};

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { SpaceProps } from 'antd';
 export declare const OriginSpace: React.FC<SpaceProps>;
-export declare const Space: React.FC<SpaceProps> & {
+export declare const Space: React.ForwardRefExoticComponent<SpaceProps & React.RefAttributes<HTMLDivElement>> & {
     Compact: React.FC<import("antd/es/space/Compact").SpaceCompactProps>;
 };

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

@@ -1,9 +1,12 @@
+import React from 'react';
 import { SpinProps as AntdSpinProps } from 'antd';
 export interface TSpinProps extends AntdSpinProps {
     indicatorSize?: number;
     children?: any;
+    showIndicatorBackground?: boolean;
+    indicatorBackground?: string;
 }
 export declare const Spin: {
-    (props: TSpinProps): JSX.Element;
+    (props: TSpinProps): React.JSX.Element;
     defaultProps: {};
 };

package/es/components/atoms/Spin/Spin.js

@@ -11,18 +11,18 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 // Libraries
 import React from 'react';
-// Antd Icons
-import { LoadingOutlined } from '@ant-design/icons';
+// Icons
+import { LoadingIcon } from '../../icons';
 // Styled
 import { StyledSpin } from './styled';
 // Constants
-import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import { THEME, globalToken } from '@antscorp/antsomi-ui/es/constants';
 export const Spin = (props) => {
     var _a;
-    const { indicatorSize } = props, restOf = __rest(props, ["indicatorSize"]);
-    return (React.createElement(StyledSpin, Object.assign({}, Object.assign({ indicator: (React.createElement(LoadingOutlined, { style: {
-                fontSize: indicatorSize || 30,
+    const { indicatorSize, indicatorBackground, showIndicatorBackground, children } = props, restOf = __rest(props, ["indicatorSize", "indicatorBackground", "showIndicatorBackground", "children"]);
+    return (React.createElement(StyledSpin, Object.assign({ indicator: (React.createElement(LoadingIcon, { style: {
+                fontSize: indicatorSize || 40,
                 color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary,
-            }, spin: true })) }, restOf)), props.children));
+            }, backgroundColor: showIndicatorBackground ? indicatorBackground || (globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue1_1) : 'transparent' })) }, restOf), children));
 };
 Spin.defaultProps = {};

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

@@ -1 +1 @@
-export declare const StyledSpin: import("styled-components").StyledComponent<import("antd/es/spin").SpinFCType, any, {}, never>;
+export declare const StyledSpin: import("styled-components").StyledComponent<import("antd/es/spin").SpinType, any, {}, never>;

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

@@ -4,4 +4,13 @@ import styled from 'styled-components';
 import { Spin } from 'antd';
 export const StyledSpin = styled(Spin) `
   max-height: unset !important;
+
+  @keyframes loadingCircle {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
 `;

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

@@ -1,4 +1 @@
-/// <reference types="react" />
-export declare const Statistic: import("react").FC<import("antd").StatisticProps> & {
-    Countdown: import("react").NamedExoticComponent<import("antd").CountdownProps>;
-};
+export declare const Statistic: import("antd/es/statistic").CompoundedStatistic;

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

@@ -1,4 +1,7 @@
-/// <reference types="react" />
-export declare const Steps: import("react").FC<import("antd").StepsProps> & {
-    Step: typeof import("rc-steps/lib/Step").default;
+import React from 'react';
+import { StepsProps as AntdStepsProps, StepProps as AntdStepProps } from 'antd';
+export type StepsProps = AntdStepsProps & {
+    saveHighestStep?: boolean;
 };
+export type StepProps = AntdStepProps;
+export declare const Steps: React.FC<StepsProps>;

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

@@ -1,2 +1,68 @@
-import { Steps as AntdSteps } from 'antd';
-export const Steps = AntdSteps;
+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, { 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 { current, size = 'small' } = restOfProps;
+    const [highestStep, setHighestStep] = useState(0);
+    useEffect(() => {
+        if (saveHighestStep && current && current > highestStep) {
+            setHighestStep(current);
+        }
+    }, [current, saveHighestStep, highestStep]);
+    const customItems = useMemo(() => saveHighestStep
+        ? items === null || items === void 0 ? void 0 : items.map((item, index) => {
+            let status;
+            let icon;
+            let className;
+            if (index > highestStep) {
+                status = 'wait';
+            }
+            else {
+                if (index === current) {
+                    status = props.status || 'process';
+                    icon = status === 'error' ? React.createElement(ErrorIcon, null, index + 1) : undefined;
+                }
+                else {
+                    status = 'finish';
+                    icon = React.createElement(SelectedIcon, null, index + 1);
+                    className = `antsomi-steps-item-selectable${index === highestStep ? ' highest-step' : ''}`;
+                }
+            }
+            // High Priority status from item
+            if (item.status) {
+                status = item.status;
+                switch (status) {
+                    case 'error':
+                        icon = React.createElement(ErrorIcon, null, index + 1);
+                        break;
+                    default:
+                        break;
+                }
+            }
+            // Check next step is error then add custom class
+            if (items[index + 1] && items[index + 1].status === 'error') {
+                className += ' antsomi-steps-next-error';
+            }
+            return Object.assign({ 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' : ''}` }))));
+});

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const SelectedIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ErrorIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
+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;
+}, never>;

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

@@ -0,0 +1,258 @@
+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';
+// Constants
+import { globalToken, THEME } from '@antscorp/antsomi-ui/es/constants';
+const { red6, bw0, colorError } = globalToken || {};
+const STEP_SIZE = {
+    SMALL: 24,
+    DEFAULT: 32,
+};
+export const SelectedIcon = styled.div `
+  border: 1px solid #b8cfe6;
+  border-radius: 100%;
+  font-size: 14px;
+  line-height: 23px;
+  color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary};
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+export const ErrorIcon = styled(Flex) `
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  background-color: ${colorError};
+  width: 100%;
+  height: 100%;
+  border-radius: 100%;
+  font-size: 14px;
+`;
+export const StepsWrapper = styled(Steps) `
+  &.save-highest-step {
+    // * Steps Default
+    &.antsomi-steps:not(.antsomi-steps-dot) {
+      &.antsomi-steps-small
+        .antsomi-steps-item
+        .antsomi-steps-item-container
+        .antsomi-steps-item-icon {
+        width: ${STEP_SIZE.SMALL}px;
+        height: ${STEP_SIZE.SMALL}px;
+      }
+
+      .antsomi-steps-item {
+        & > .antsomi-steps-item-container {
+          & > .antsomi-steps-item-icon {
+            box-sizing: border-box;
+            border-radius: 100%;
+            font-size: 14px;
+            font-weight: bold;
+            display: inline-flex;
+            justify-content: center;
+            align-items: center;
+            width: ${STEP_SIZE.DEFAULT}px;
+            height: ${STEP_SIZE.DEFAULT}px;
+
+            .antsomi-steps-icon {
+              color: white;
+              width: 100%;
+              height: 100%;
+              display: flex;
+              line-height: 23px;
+              top: 0px;
+              justify-content: center;
+              align-items: center;
+            }
+          }
+
+          & > .antsomi-steps-item-content > .antsomi-steps-item-title::after {
+            height: 2px;
+            background-color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.bw6};
+          }
+
+          & > .antsomi-steps-item-tail::after {
+            width: 2px;
+            background-color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.bw6};
+          }
+        }
+
+        &:not(.antsomi-steps-item-active) > .antsomi-steps-item-container[role='button'] {
+          &:hover {
+            .antsomi-steps-item-icon {
+              background-color: white;
+            }
+            .antsomi-steps-item-content {
+              color: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.colorPrimary};
+            }
+          }
+        }
+
+        &.highest-step {
+          .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;
+            }
+          }
+        }
+
+        &.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};
+            }
+
+            .antsomi-steps-item-tail::after {
+              background-color: ${(_g = THEME.token) === null || _g === void 0 ? void 0 : _g.colorPrimary};
+            }
+          }
+        }
+
+        &.antsomi-steps-item-active {
+          & > .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}` : ''; }};
+              }
+            }
+
+            & > .antsomi-steps-item-tail {
+              &::after {
+                ${({ isReactivate }) => { var _a; return isReactivate ? `background-color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary}` : ''; }};
+              }
+            }
+          }
+        }
+
+        &.antsomi-steps-next-error {
+          > .antsomi-steps-item-container
+            > .antsomi-steps-item-content
+            > .antsomi-steps-item-title::after {
+            background-color: ${red6} !important;
+          }
+        }
+
+        &.antsomi-steps-item-error {
+          > .antsomi-steps-item-container {
+            > .antsomi-steps-item-icon .antsomi-steps-icon {
+              color: ${bw0} !important;
+            }
+
+            > .antsomi-steps-item-content .antsomi-steps-item-title {
+              color: ${colorError} !important;
+            }
+          }
+        }
+      }
+    }
+
+    // * Steps dot
+    &.antsomi-steps.antsomi-steps-dot {
+      &.antsomi-steps-horizontal .antsomi-steps-item .antsomi-steps-item-container {
+        & > .antsomi-steps-item-tail::after {
+          height: 2px;
+        }
+      }
+
+      &.antsomi-steps-vertical .antsomi-steps-item .antsomi-steps-item-container {
+        & > .antsomi-steps-item-tail::after {
+          width: 2px;
+        }
+      }
+
+      &.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};
+      }
+
+      .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};
+        }
+      }
+
+      .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}` : ''; }};
+          }
+        }
+      }
+
+      .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;
+        }
+      }
+    }
+
+    // * Common
+    &.antsomi-steps {
+      .antsomi-steps-item-title {
+        font-size: 16px;
+        line-height: ${STEP_SIZE.DEFAULT}px;
+      }
+
+      .antsomi-steps-item-description {
+        font-size: 14px;
+      }
+
+      &.antsomi-steps-small {
+        .antsomi-steps-item-title {
+          font-size: 14px;
+          line-height: ${STEP_SIZE.SMALL}px;
+        }
+      }
+
+      .antsomi-steps-item-wait {
+        color: ${(_l = THEME.token) === null || _l === void 0 ? void 0 : _l.bw7};
+
+        & > .antsomi-steps-item-container > .antsomi-steps-item-icon {
+          background-color: ${(_m = THEME.token) === null || _m === void 0 ? void 0 : _m.bw6};
+        }
+
+        &:not(.antsomi-steps-item-error)
+          > .antsomi-steps-item-container
+          > .antsomi-steps-item-content {
+          .antsomi-steps-item-title,
+          .antsomi-steps-item-description {
+            color: inherit;
+          }
+        }
+      }
+
+      .antsomi-steps-item-process.antsomi-steps-item-active {
+        font-weight: bold;
+        color: ${(_o = THEME.token) === null || _o === void 0 ? void 0 : _o.colorPrimary};
+
+        & > .antsomi-steps-item-container {
+          & > .antsomi-steps-item-content > .antsomi-steps-item-title,
+          & > .antsomi-steps-item-content > .antsomi-steps-item-description {
+            color: inherit;
+          }
+        }
+      }
+
+      .antsomi-steps-item-selectable {
+        color: black;
+
+        & > .antsomi-steps-item-container {
+          & > .antsomi-steps-item-icon {
+            color: ${(_p = THEME.token) === null || _p === void 0 ? void 0 : _p.colorPrimary};
+          }
+
+          & > .antsomi-steps-item-content {
+            .antsomi-steps-item-title,
+            .antsomi-steps-item-description {
+              color: inherit;
+            }
+          }
+        }
+      }
+    }
+  }
+`;

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

@@ -1,2 +1,3 @@
 /// <reference types="react" />
 export declare const Switch: import("react").ForwardRefExoticComponent<import("antd").SwitchProps & import("react").RefAttributes<HTMLElement>>;
+export type { SwitchProps } from 'antd';

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

@@ -1,2 +1,3 @@
 import { Switch as AntdSwitch } from 'antd';
 export const Switch = AntdSwitch;
+Switch.defaultProps = {};

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

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