@antscorp/antsomi-ui 1.3.3-beta.35 → 1.3.3-beta.37

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

@@ -1,14 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 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)
@@ -28,51 +17,51 @@ import { Flex, Icon } from '..';
 // Styled
 import { NavigationButton, StyledRichMenuTabs } from './styled';
 import { tryCatchWrapper } from '@antscorp/antsomi-ui/es/utils';
-var defaultProps = {
+const defaultProps = {
     total: 20,
     current: 1,
 };
-var PATH = 'antsomi-ui/src/components/atoms/PreviewTabs/PreviewTabs.tsx';
-export var PreviewTabs = function (props) {
-    var _a = props.total, total = _a === void 0 ? 20 : _a, _b = props.current, current = _b === void 0 ? 1 : _b, onChange = props.onChange, restProps = __rest(props, ["total", "current", "onChange"]);
-    var tabsRef = React.useRef(null);
+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 tabsRef = React.useRef(null);
     // State
-    var _c = useState({
+    const [state, setState] = useState({
         disablePrev: true,
         disableNext: true,
-    }), state = _c[0], setState = _c[1];
+    });
     // Variables
-    var disableNext = state.disableNext, disablePrev = state.disablePrev;
+    const { disableNext, disablePrev } = state;
     // Handlers
-    var checkScroll = function () {
+    const checkScroll = () => {
         if (tabsRef.current) {
-            var _a = tabsRef.current, scrollLeft_1 = _a.scrollLeft, clientWidth_1 = _a.clientWidth, scrollWidth_1 = _a.scrollWidth;
-            setState(function (prevState) { return (__assign(__assign({}, prevState), { disableNext: scrollLeft_1 + clientWidth_1 === scrollWidth_1 })); });
-            setState(function (prevState) { return (__assign(__assign({}, prevState), { disablePrev: scrollLeft_1 === 0 })); });
+            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 })));
         }
     };
     // Check disable next navigation base length of tabs
-    useEffect(function () {
+    useEffect(() => {
         checkScroll();
     }, []);
     // Handlers
-    var onClickNavigation = tryCatchWrapper(function (isPrev) {
+    const onClickNavigation = tryCatchWrapper((isPrev) => {
         if (tabsRef.current) {
-            var scrollLeft = tabsRef.current.scrollLeft;
+            const { scrollLeft } = tabsRef.current;
             tabsRef.current.scrollTo({ left: scrollLeft + (isPrev ? -40 : 40), behavior: 'smooth' });
             checkScroll();
         }
     }, PATH);
-    return (React.createElement(StyledRichMenuTabs, __assign({}, restProps),
+    return (React.createElement(StyledRichMenuTabs, Object.assign({}, restProps),
         React.createElement(NavigationButton, { className: cn('navigation--previous', {
                 'navigation--disabled': disablePrev,
-            }), onClick: function () { return onClickNavigation(true); } },
+            }), onClick: () => onClickNavigation(true) },
             React.createElement(Icon, { type: "icon-ants-angle-left" })),
-        React.createElement(Flex, { ref: tabsRef, className: "tabs antsomi-scrollbar-hidden", align: "center", onScroll: function () { return checkScroll(); } }, Array.from({ length: total }).map(function (_, index) { return (React.createElement(Flex, { key: "".concat(index + 1), align: "center", justify: "center", className: "tabs__item ".concat(current === index + 1 ? 'tabs__item--active' : ''), onClick: function () { return onChange && onChange(index + 1); } },
-            React.createElement(Flex, { align: "center", justify: "center", className: "tabs__label" }, index + 1))); })),
+        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: function () { return onClickNavigation(false); } },
+            }), onClick: () => onClickNavigation(false) },
             React.createElement(Icon, { type: "icon-ants-angle-right" }))));
 };
 PreviewTabs.defaultProps = defaultProps;

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

@@ -1,18 +1,79 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 // Components
 import { Flex } from '../Flex';
 // Styled
 import styled from 'styled-components';
-export var StyledRichMenuTabs = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  background: #f0f0f0;\n  box-shadow: 0px 3px 3px 0px rgba(0, 46, 89, 0.1);\n  height: 40px;\n  width: ", "px;\n\n  .tabs {\n    flex: 1;\n    width: 100%;\n    overflow: auto;\n\n    &__item {\n      flex-shrink: 0;\n      height: 40px;\n      width: 40px;\n      border-right: 1px solid #d4d4d4;\n      cursor: pointer;\n      transition: all 200ms;\n\n      &--active {\n        background-color: #fff;\n\n        .tabs__label {\n          background-color: var(--primary-color);\n          color: #fff;\n        }\n      }\n    }\n\n    &__label {\n      height: 24px;\n      width: 24px;\n      font-weight: 700;\n      font-size: 14px;\n      color: var(--primary-color);\n      border-radius: 100%;\n      border: 1px solid #b8cfe6;\n      background-color: #fff;\n      transition: all 200ms;\n    }\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  background: #f0f0f0;\n  box-shadow: 0px 3px 3px 0px rgba(0, 46, 89, 0.1);\n  height: 40px;\n  width: ", "px;\n\n  .tabs {\n    flex: 1;\n    width: 100%;\n    overflow: auto;\n\n    &__item {\n      flex-shrink: 0;\n      height: 40px;\n      width: 40px;\n      border-right: 1px solid #d4d4d4;\n      cursor: pointer;\n      transition: all 200ms;\n\n      &--active {\n        background-color: #fff;\n\n        .tabs__label {\n          background-color: var(--primary-color);\n          color: #fff;\n        }\n      }\n    }\n\n    &__label {\n      height: 24px;\n      width: 24px;\n      font-weight: 700;\n      font-size: 14px;\n      color: var(--primary-color);\n      border-radius: 100%;\n      border: 1px solid #b8cfe6;\n      background-color: #fff;\n      transition: all 200ms;\n    }\n  }\n"])), function (_a) {
-    var width = _a.width;
-    return width || 467;
-});
-export var NavigationButton = styled(Flex)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 40px;\n  height: 40px;\n  background-color: #fff;\n  cursor: pointer;\n\n  i {\n    font-size: 12px;\n    color: #595959;\n  }\n\n  &.navigation--previous {\n    border-right: 1px solid #d4d4d4;\n  }\n\n  &.navigation--next {\n    border-left: 1px solid #d4d4d4;\n  }\n\n  &.navigation--disabled {\n    cursor: not-allowed;\n\n    i {\n      color: #59595980;\n    }\n  }\n"], ["\n  width: 40px;\n  height: 40px;\n  background-color: #fff;\n  cursor: pointer;\n\n  i {\n    font-size: 12px;\n    color: #595959;\n  }\n\n  &.navigation--previous {\n    border-right: 1px solid #d4d4d4;\n  }\n\n  &.navigation--next {\n    border-left: 1px solid #d4d4d4;\n  }\n\n  &.navigation--disabled {\n    cursor: not-allowed;\n\n    i {\n      color: #59595980;\n    }\n  }\n"])));
+export const StyledRichMenuTabs = styled.div `
+  display: flex;
+  align-items: center;
+  background: #f0f0f0;
+  box-shadow: 0px 3px 3px 0px rgba(0, 46, 89, 0.1);
+  height: 40px;
+  width: ${({ width }) => width || 467}px;
+
+  .tabs {
+    flex: 1;
+    width: 100%;
+    overflow: auto;
+
+    &__item {
+      flex-shrink: 0;
+      height: 40px;
+      width: 40px;
+      border-right: 1px solid #d4d4d4;
+      cursor: pointer;
+      transition: all 200ms;
+
+      &--active {
+        background-color: #fff;
+
+        .tabs__label {
+          background-color: var(--primary-color);
+          color: #fff;
+        }
+      }
+    }
+
+    &__label {
+      height: 24px;
+      width: 24px;
+      font-weight: 700;
+      font-size: 14px;
+      color: var(--primary-color);
+      border-radius: 100%;
+      border: 1px solid #b8cfe6;
+      background-color: #fff;
+      transition: all 200ms;
+    }
+  }
+`;
+export const NavigationButton = styled(Flex) `
+  width: 40px;
+  height: 40px;
+  background-color: #fff;
+  cursor: pointer;
+
+  i {
+    font-size: 12px;
+    color: #595959;
+  }
+
+  &.navigation--previous {
+    border-right: 1px solid #d4d4d4;
+  }
+
+  &.navigation--next {
+    border-left: 1px solid #d4d4d4;
+  }
+
+  &.navigation--disabled {
+    cursor: not-allowed;
+
+    i {
+      color: #59595980;
+    }
+  }
+`;
 NavigationButton.defaultProps = {
     align: 'center',
     justify: 'center',
 };
-var templateObject_1, templateObject_2;

package/es/components/atoms/Progress/Progress.js

@@ -1,2 +1,2 @@
 import { Progress as AntdProgress } from 'antd';
-export var Progress = AntdProgress;
+export const Progress = AntdProgress;

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

@@ -1,7 +1,3 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 var _a, _b, _c, _d;
 // Libraries
 import styled from 'styled-components';
@@ -9,7 +5,21 @@ import styled from 'styled-components';
 import { Radio as AntdRadio } from 'antd';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
-export var Radio = styled(AntdRadio)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-family: 'Roboto';\n  color: ", ";\n  font-size: ", "px;\n\n  .antsomi-radio {\n    .antsomi-radio-inner {\n      border-width: 2px;\n      border-color: ", ";\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n  }\n"], ["\n  font-family: 'Roboto';\n  color: ", ";\n  font-size: ", "px;\n\n  .antsomi-radio {\n    .antsomi-radio-inner {\n      border-width: 2px;\n      border-color: ", ";\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n  }\n"])), (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorTextBase, (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.fontSize, (_c = THEME.token) === null || _c === void 0 ? void 0 : _c.colorPrimary, (_d = THEME.token) === null || _d === void 0 ? void 0 : _d.colorPrimary);
-export var RadioButton = styled(AntdRadio.Button)(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""])));
-export var RadioGroupSub = styled(AntdRadio.Group)(templateObject_3 || (templateObject_3 = __makeTemplateObject([""], [""])));
-var templateObject_1, templateObject_2, templateObject_3;
+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;
+
+  .antsomi-radio {
+    .antsomi-radio-inner {
+      border-width: 2px;
+      border-color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.colorPrimary};
+
+      &::after {
+        background-color: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.colorPrimary};
+      }
+    }
+  }
+`;
+export const RadioButton = styled(AntdRadio.Button) ``;
+export const RadioGroupSub = styled(AntdRadio.Group) ``;

package/es/components/atoms/Rate/Rate.js

@@ -1,2 +1,2 @@
 import { Rate as AntdRate } from 'antd';
-export var Rate = AntdRate;
+export const Rate = AntdRate;

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

@@ -1,11 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import StarImage from '@antscorp/antsomi-ui/es/assets/images/stars_slider.png';
-var STAR_WIDTH = 30;
-var parseNumDecimals = function (input, decimals) {
-    return +Number.parseFloat(input === null || input === void 0 ? void 0 : input.toString()).toFixed(decimals);
-};
-var roundHalf = function (num) {
-    var multiplier = 1 / 0.5;
+const STAR_WIDTH = 30;
+const parseNumDecimals = (input, decimals) => +Number.parseFloat(input === null || input === void 0 ? void 0 : input.toString()).toFixed(decimals);
+const roundHalf = (num) => {
+    const multiplier = 1 / 0.5;
     return Math.round(num * multiplier) / multiplier;
 };
 /**
@@ -15,55 +13,51 @@ var roundHalf = function (num) {
  * @default type 'full'
  * @returns
  */
-var getWidth = function (width, type) {
-    if (type === void 0) { type = 'full'; }
-    var numberOfStar = width / STAR_WIDTH;
+const getWidth = (width, type = 'full') => {
+    const numberOfStar = width / STAR_WIDTH;
     return type === 'full'
         ? Math.ceil(numberOfStar) * STAR_WIDTH
         : type === 'half'
             ? roundHalf(numberOfStar) * STAR_WIDTH
             : width;
 };
-export var RateV2 = function (_a) {
-    var _b = _a.count, count = _b === void 0 ? 5 : _b, className = _a.className, _c = _a.defaultValue, defaultValue = _c === void 0 ? 0 : _c, value = _a.value, _d = _a.type, type = _d === void 0 ? 'full' : _d, onChange = _a.onChange;
-    var fullWidth = count * STAR_WIDTH;
+export const RateV2 = ({ count = 5, className, defaultValue = 0, value, type = 'full', onChange, }) => {
+    const fullWidth = count * STAR_WIDTH;
     // The width is calculated when move mouse => change the UI, not change the real value
-    var _e = useState(function () {
-        return defaultValue ? getWidth(defaultValue * STAR_WIDTH, type) : 0;
-    }), fillWidth = _e[0], setFillWidth = _e[1];
+    const [fillWidth, setFillWidth] = useState(() => defaultValue ? getWidth(defaultValue * STAR_WIDTH, type) : 0);
     // The real current value that will be return to parent component by onChange function
     // currWidth = value * STAR_WIDTH
-    var _f = useState(0), currWidth = _f[0], setCurrWidth = _f[1];
-    var handleMouseMove = function (e) {
-        var rect = e.currentTarget.getBoundingClientRect();
-        var x = e.clientX - rect.left;
-        var hoverWidth = Math.round(x);
+    const [currWidth, setCurrWidth] = useState(0);
+    const handleMouseMove = e => {
+        const rect = e.currentTarget.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const hoverWidth = Math.round(x);
         setFillWidth(getWidth(hoverWidth, type));
     };
-    var handleClick = function () {
+    const handleClick = () => {
         // If have no value => auto set current value; if have value => must control value with onChange props
         if (!value)
             setCurrWidth(fillWidth);
         if (onChange)
             onChange(parseNumDecimals(fillWidth / STAR_WIDTH, 2));
     };
-    useEffect(function () {
+    useEffect(() => {
         if (typeof value === 'number') {
-            var width = getWidth(value * STAR_WIDTH, type);
+            const width = getWidth(value * STAR_WIDTH, type);
             setCurrWidth(width);
             setFillWidth(width);
         }
     }, [value]);
-    return (React.createElement("div", { className: "antsomi-rate-continuous".concat(className ? " ".concat(className) : ''), style: {
+    return (React.createElement("div", { className: `antsomi-rate-continuous${className ? ` ${className}` : ''}`, style: {
             position: 'relative',
-            width: "".concat(fullWidth, "px"),
+            width: `${fullWidth}px`,
             backgroundPosition: '-27px',
             height: '28px',
-        }, onMouseMove: handleMouseMove, onMouseLeave: function () { return setFillWidth(currWidth || 0); }, onClick: handleClick },
+        }, onMouseMove: handleMouseMove, onMouseLeave: () => setFillWidth(currWidth || 0), onClick: handleClick },
         React.createElement("div", { className: "custom-rate custom-rate--fill", style: {
                 position: 'absolute',
-                background: "url(".concat(StarImage, ") 0px 0px"),
-                width: "".concat(fillWidth, "px"),
+                background: `url(${StarImage}) 0px 0px`,
+                width: `${fillWidth}px`,
                 height: '26px',
                 zIndex: 1,
             } }),
@@ -72,8 +66,8 @@ export var RateV2 = function (_a) {
                 top: '0px',
                 left: '0px',
                 backgroundImage: 'none',
-                background: "transparent url(".concat(StarImage, ") 0px -26px"),
-                width: "".concat(fullWidth, "px"),
+                background: `transparent url(${StarImage}) 0px -26px`,
+                width: `${fullWidth}px`,
                 height: '26px',
             } })));
 };

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

@@ -1,14 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 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)
@@ -26,10 +15,10 @@ import React, { memo } from 'react';
 import { Text } from '../Text';
 // Styled
 import { StyledRequired } from './styled';
-export var RequiredLabel = memo(function (props) {
+export const RequiredLabel = memo(props => {
     // Props
-    var children = props.children, _a = props.isReverseMask, isReverseMask = _a === void 0 ? false : _a, restProps = __rest(props, ["children", "isReverseMask"]);
-    return (React.createElement(Text, __assign({}, restProps),
+    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, null, "*")));

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

@@ -1,12 +1,10 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 var _a;
 // Libraries
 import styled from 'styled-components';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
-export var RequiredLabelWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
-export var StyledRequired = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: ", ";\n  margin-right: 4px;\n"], ["\n  color: ", ";\n  margin-right: 4px;\n"])), (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.red6);
-var templateObject_1, templateObject_2;
+export const RequiredLabelWrapper = styled.div ``;
+export const StyledRequired = styled.span `
+  color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.red6};
+  margin-right: 4px;
+`;

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

@@ -1,18 +1,3 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 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)
@@ -30,11 +15,11 @@ import React, { useState, useEffect, useRef } from 'react';
 import styled from 'styled-components';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
-export var ScrollBox = function (props) {
-    var children = props.children, height = props.height, maxHeight = props.maxHeight, isPadding = props.isPadding, loadMore = props.loadMore, style = props.style, restOf = __rest(props, ["children", "height", "maxHeight", "isPadding", "loadMore", "style"]);
-    var wrapperRef = useRef(null);
-    var _a = useState(false), isScroll = _a[0], setIsScroll = _a[1];
-    useEffect(function () {
+export const ScrollBox = props => {
+    const { children, height, maxHeight, isPadding, loadMore, style } = props, restOf = __rest(props, ["children", "height", "maxHeight", "isPadding", "loadMore", "style"]);
+    const wrapperRef = useRef(null);
+    const [isScroll, setIsScroll] = useState(false);
+    useEffect(() => {
         if (wrapperRef.current && wrapperRef.current.scrollHeight > wrapperRef.current.clientHeight) {
             !isScroll && setIsScroll(true);
         }
@@ -43,8 +28,8 @@ export var ScrollBox = function (props) {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [wrapperRef.current]);
-    var handleScroll = function (e) {
-        var bottom = e.target.scrollTop + e.target.clientHeight >= e.target.scrollHeight;
+    const handleScroll = e => {
+        const bottom = e.target.scrollTop + e.target.clientHeight >= e.target.scrollHeight;
         if (bottom) {
             if (typeof loadMore === 'function') {
                 loadMore();
@@ -53,10 +38,14 @@ export var ScrollBox = function (props) {
     };
     return (
     // eslint-disable-next-line @typescript-eslint/no-use-before-define
-    React.createElement(Wrapper, __assign({ ref: wrapperRef }, __assign(__assign({}, restOf), { style: __assign(__assign(__assign(__assign({}, style), (height && { height: height })), (maxHeight && { maxHeight: maxHeight })), { paddingRight: isScroll && isPadding ? 8 : 0 }) }), { onScroll: handleScroll }), children));
+    React.createElement(Wrapper, Object.assign({ ref: wrapperRef }, Object.assign(Object.assign({}, restOf), { style: Object.assign(Object.assign(Object.assign(Object.assign({}, style), (height && { height })), (maxHeight && { maxHeight })), { paddingRight: isScroll && isPadding ? 8 : 0 }) }), { onScroll: handleScroll }), children));
 };
-var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  width: 100%;\n  background-color: ", ";\n  overflow: auto;\n"], ["\n  height: 100%;\n  width: 100%;\n  background-color: ", ";\n  overflow: auto;\n"])), (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw0);
+const Wrapper = styled.div `
+  height: 100%;
+  width: 100%;
+  background-color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw0};
+  overflow: auto;
+`;
 ScrollBox.defaultProps = {
     isPadding: false,
 };
-var templateObject_1;

package/es/components/atoms/Segmented/Segmented.js

@@ -1,2 +1,2 @@
 import { Segmented as AntdSegmented } from 'antd';
-export var Segmented = AntdSegmented;
+export const Segmented = AntdSegmented;

package/es/components/atoms/Skeleton/Skeleton.js

@@ -1,2 +1,2 @@
 import { Skeleton as AntdSkeleton } from 'antd';
-export var Skeleton = AntdSkeleton;
+export const Skeleton = AntdSkeleton;

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

@@ -1,14 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 // Libraries
 import React, { memo, useMemo } from 'react';
 // Antd Components
@@ -16,19 +5,19 @@ import { Slider as AntdSlider } from 'antd';
 // Styled
 import { SliderWrapper } from './styled';
 import { omit } from 'lodash';
-export var Slider = memo(function (props) {
-    var range = props.range, value = props.value, _a = props.min, min = _a === void 0 ? 0 : _a, _b = props.max, max = _b === void 0 ? 0 : _b, className = props.className, tooltipVisible = props.tooltipVisible;
-    var isNegative = useMemo(function () { return !!(!range && min < 0); }, [range, min]);
-    var calculateWidth = useMemo(function () { return ((value || 0) * 100) / (Math.abs(max) + Math.abs(min) || 1); }, [min, max, value]);
-    var restProps = tooltipVisible === 'default' ? omit(props, ['tooltipVisible']) : props;
+export const Slider = memo(props => {
+    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;
     if (isNegative) {
         return (React.createElement(SliderWrapper, { isNegative: true, width: calculateWidth, className: className },
-            React.createElement(AntdSlider, __assign({}, omit(restProps, ['marks', 'className']), { marks: {
+            React.createElement(AntdSlider, Object.assign({}, omit(restProps, ['marks', 'className']), { marks: {
                     0: ' ',
                 } }))));
     }
     return (React.createElement(SliderWrapper, { className: className },
-        React.createElement(AntdSlider, __assign({}, restProps))));
+        React.createElement(AntdSlider, Object.assign({}, restProps))));
 });
 Slider.defaultProps = {
     tooltipVisible: false,

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

@@ -1,16 +1,44 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 // Libraries
 import styled, { css } from 'styled-components';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
-export var SliderWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 100%;\n\n  .antsomi-slider {\n    ", "\n  }\n"], ["\n  width: 100%;\n\n  .antsomi-slider {\n    ", "\n  }\n"])), function (p) {
+export const SliderWrapper = styled.div `
+  width: 100%;
+
+  .antsomi-slider {
+    ${p => {
     var _a, _b;
-    var width = p.width || 0;
+    const width = p.width || 0;
     return p.isNegative
-        ? css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n            .antsomi-slider-handle-1 {\n              display: none;\n            }\n\n            .antsomi-slider-track {\n              ", "\n\n              width: ", "% !important;\n            }\n\n            .antsomi-slider-dot {\n              top: -4px;\n              width: 0.25rem;\n              height: 0.875rem;\n              border-radius: 0.125rem;\n              background-color: ", ";\n              border-color: ", ";\n            }\n          "], ["\n            .antsomi-slider-handle-1 {\n              display: none;\n            }\n\n            .antsomi-slider-track {\n              ", "\n\n              width: ", "% !important;\n            }\n\n            .antsomi-slider-dot {\n              top: -4px;\n              width: 0.25rem;\n              height: 0.875rem;\n              border-radius: 0.125rem;\n              background-color: ", ";\n              border-color: ", ";\n            }\n          "])), width < 0
-            ? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                    left: auto !important;\n                    right: 50% !important;\n                  "], ["\n                    left: auto !important;\n                    right: 50% !important;\n                  "]))) : css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                    left: 50% !important;\n                    right: auto !important;\n                  "], ["\n                    left: 50% !important;\n                    right: auto !important;\n                  "]))), Math.abs(width), (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.accent1, (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.accent1) : '';
-});
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+        ? css `
+            .antsomi-slider-handle-1 {
+              display: none;
+            }
+
+            .antsomi-slider-track {
+              ${width < 0
+            ? css `
+                    left: auto !important;
+                    right: 50% !important;
+                  `
+            : css `
+                    left: 50% !important;
+                    right: auto !important;
+                  `}
+
+              width: ${Math.abs(width)}% !important;
+            }
+
+            .antsomi-slider-dot {
+              top: -4px;
+              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};
+            }
+          `
+        : '';
+}}
+  }
+`;

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

@@ -1,32 +1,21 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 // Libraries
 import React, { useState } from 'react';
 // Antd Components
 import { Slider as AntdSlider } from 'antd';
 // React.FC<SliderProps>
-export var SliderV2 = function (props) {
-    var min = props.min, max = props.max, onChange = props.onChange, styles = props.styles, range = props.range, value = props.value, defaultValue = props.defaultValue, marks = props.marks, defaultSliderTrack = props.defaultSliderTrack;
-    var _a = useState(defaultValue || min || 0), valueInternal = _a[0], setValueInternal = _a[1];
+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) {
-        var sliderWidth = max - min;
-        var calcValue = value || valueInternal;
-        var leftTrackPosition = "".concat((Math.abs(calcValue > 0 ? min : min - calcValue) / sliderWidth) * 100, "%");
-        var sliderTrackWidth = "".concat((Math.abs(calcValue) / sliderWidth) * 100, "%");
-        return (React.createElement(AntdSlider, __assign({ value: value || valueInternal, onChange: function (value) {
+        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: __assign({ track: __assign({ left: leftTrackPosition, width: sliderTrackWidth }, styles === null || styles === void 0 ? void 0 : styles.track) }, styles), marks: marks || { 0: ' ' } }, props)));
+            }, 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, __assign({}, props));
+    return React.createElement(AntdSlider, Object.assign({}, props));
 };

package/es/components/atoms/Space/Space.js

@@ -1,10 +1,9 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import styled from 'styled-components';
 // Components
 import { Space as AntdSpace } from 'antd';
-export var OriginSpace = styled(AntdSpace)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &.antsomi-space-vertical {\n    width: 100%;\n  }\n"], ["\n  &.antsomi-space-vertical {\n    width: 100%;\n  }\n"])));
-export var Space = OriginSpace;
-var templateObject_1;
+export const OriginSpace = styled(AntdSpace) `
+  &.antsomi-space-vertical {
+    width: 100%;
+  }
+`;
+export const Space = OriginSpace;

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

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