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

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

@@ -1,3 +1,14 @@
+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)
@@ -17,51 +28,51 @@ import { Flex, Icon } from '..';
 // Styled
 import { NavigationButton, StyledRichMenuTabs } from './styled';
 import { tryCatchWrapper } from '@antscorp/antsomi-ui/es/utils';
-const defaultProps = {
+var defaultProps = {
     total: 20,
     current: 1,
 };
-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);
+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);
     // State
-    const [state, setState] = useState({
+    var _c = useState({
         disablePrev: true,
         disableNext: true,
-    });
+    }), state = _c[0], setState = _c[1];
     // Variables
-    const { disableNext, disablePrev } = state;
+    var disableNext = state.disableNext, disablePrev = state.disablePrev;
     // Handlers
-    const checkScroll = () => {
+    var checkScroll = function () {
         if (tabsRef.current) {
-            const { scrollLeft, clientWidth, scrollWidth } = tabsRef.current;
-            setState(prevState => (Object.assign(Object.assign({}, prevState), { disableNext: scrollLeft + clientWidth === scrollWidth })));
-            setState(prevState => (Object.assign(Object.assign({}, prevState), { disablePrev: scrollLeft === 0 })));
+            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 })); });
         }
     };
     // Check disable next navigation base length of tabs
-    useEffect(() => {
+    useEffect(function () {
         checkScroll();
     }, []);
     // Handlers
-    const onClickNavigation = tryCatchWrapper((isPrev) => {
+    var onClickNavigation = tryCatchWrapper(function (isPrev) {
         if (tabsRef.current) {
-            const { scrollLeft } = tabsRef.current;
+            var scrollLeft = tabsRef.current.scrollLeft;
             tabsRef.current.scrollTo({ left: scrollLeft + (isPrev ? -40 : 40), behavior: 'smooth' });
             checkScroll();
         }
     }, PATH);
-    return (React.createElement(StyledRichMenuTabs, Object.assign({}, restProps),
+    return (React.createElement(StyledRichMenuTabs, __assign({}, restProps),
         React.createElement(NavigationButton, { className: cn('navigation--previous', {
                 'navigation--disabled': disablePrev,
-            }), onClick: () => onClickNavigation(true) },
+            }), onClick: function () { return onClickNavigation(true); } },
             React.createElement(Icon, { type: "icon-ants-angle-left" })),
-        React.createElement(Flex, { ref: tabsRef, className: "tabs antsomi-scrollbar-hidden", align: "center", onScroll: () => checkScroll() }, Array.from({ length: total }).map((_, index) => (React.createElement(Flex, { key: `${index + 1}`, align: "center", justify: "center", className: `tabs__item ${current === index + 1 ? 'tabs__item--active' : ''}`, onClick: () => onChange && onChange(index + 1) },
-            React.createElement(Flex, { align: "center", justify: "center", className: "tabs__label" }, index + 1))))),
+        React.createElement(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(NavigationButton, { className: cn('navigation--next', {
                 'navigation--disabled': disableNext,
-            }), onClick: () => onClickNavigation(false) },
+            }), onClick: function () { return onClickNavigation(false); } },
             React.createElement(Icon, { type: "icon-ants-angle-right" }))));
 };
 PreviewTabs.defaultProps = defaultProps;

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

@@ -1,79 +1,18 @@
+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 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;
-    }
-  }
-`;
+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"])));
 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 const Progress = AntdProgress;
+export var Progress = AntdProgress;

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

@@ -1,3 +1,7 @@
+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';
@@ -5,21 +9,7 @@ import styled from 'styled-components';
 import { Radio as AntdRadio } from 'antd';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
-export const Radio = styled(AntdRadio) `
-  font-family: 'Roboto';
-  color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorTextBase};
-  font-size: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.fontSize}px;
-
-  .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) ``;
+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;

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

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

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

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

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

@@ -1,3 +1,14 @@
+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)
@@ -15,10 +26,10 @@ import React, { memo } from 'react';
 import { Text } from '../Text';
 // Styled
 import { StyledRequired } from './styled';
-export const RequiredLabel = memo(props => {
+export var RequiredLabel = memo(function (props) {
     // Props
-    const { children, isReverseMask = false } = props, restProps = __rest(props, ["children", "isReverseMask"]);
-    return (React.createElement(Text, Object.assign({}, restProps),
+    var children = props.children, _a = props.isReverseMask, isReverseMask = _a === void 0 ? false : _a, restProps = __rest(props, ["children", "isReverseMask"]);
+    return (React.createElement(Text, __assign({}, restProps),
         !isReverseMask && React.createElement(StyledRequired, null, "*"),
         children,
         isReverseMask && React.createElement(StyledRequired, null, "*")));

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

@@ -1,10 +1,12 @@
+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 const RequiredLabelWrapper = styled.div ``;
-export const StyledRequired = styled.span `
-  color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.red6};
-  margin-right: 4px;
-`;
+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;

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

@@ -1,3 +1,18 @@
+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)
@@ -15,11 +30,11 @@ import React, { useState, useEffect, useRef } from 'react';
 import styled from 'styled-components';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
-export const ScrollBox = props => {
-    const { children, height, maxHeight, isPadding, loadMore, style } = props, restOf = __rest(props, ["children", "height", "maxHeight", "isPadding", "loadMore", "style"]);
-    const wrapperRef = useRef(null);
-    const [isScroll, setIsScroll] = useState(false);
-    useEffect(() => {
+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 () {
         if (wrapperRef.current && wrapperRef.current.scrollHeight > wrapperRef.current.clientHeight) {
             !isScroll && setIsScroll(true);
         }
@@ -28,8 +43,8 @@ export const ScrollBox = props => {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [wrapperRef.current]);
-    const handleScroll = e => {
-        const bottom = e.target.scrollTop + e.target.clientHeight >= e.target.scrollHeight;
+    var handleScroll = function (e) {
+        var bottom = e.target.scrollTop + e.target.clientHeight >= e.target.scrollHeight;
         if (bottom) {
             if (typeof loadMore === 'function') {
                 loadMore();
@@ -38,14 +53,10 @@ export const ScrollBox = props => {
     };
     return (
     // eslint-disable-next-line @typescript-eslint/no-use-before-define
-    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));
+    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));
 };
-const Wrapper = styled.div `
-  height: 100%;
-  width: 100%;
-  background-color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw0};
-  overflow: auto;
-`;
+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);
 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 const Segmented = AntdSegmented;
+export var Segmented = AntdSegmented;

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

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

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

@@ -1,3 +1,14 @@
+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
@@ -5,19 +16,19 @@ 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 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;
+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;
     if (isNegative) {
         return (React.createElement(SliderWrapper, { isNegative: true, width: calculateWidth, className: className },
-            React.createElement(AntdSlider, Object.assign({}, omit(restProps, ['marks', 'className']), { marks: {
+            React.createElement(AntdSlider, __assign({}, omit(restProps, ['marks', 'className']), { marks: {
                     0: ' ',
                 } }))));
     }
     return (React.createElement(SliderWrapper, { className: className },
-        React.createElement(AntdSlider, Object.assign({}, restProps))));
+        React.createElement(AntdSlider, __assign({}, restProps))));
 });
 Slider.defaultProps = {
     tooltipVisible: false,

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

@@ -1,44 +1,16 @@
+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 const SliderWrapper = styled.div `
-  width: 100%;
-
-  .antsomi-slider {
-    ${p => {
+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) {
     var _a, _b;
-    const width = p.width || 0;
+    var width = p.width || 0;
     return p.isNegative
-        ? 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};
-            }
-          `
-        : '';
-}}
-  }
-`;
+        ? 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;

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

@@ -1,21 +1,32 @@
+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 const SliderV2 = props => {
-    const { min, max, onChange, styles, range, value, defaultValue, marks, defaultSliderTrack } = props;
-    const [valueInternal, setValueInternal] = useState(defaultValue || min || 0);
+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];
     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 => {
+        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) {
                 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: __assign({ track: __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));
+    return React.createElement(AntdSlider, __assign({}, props));
 };

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

@@ -1,9 +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;
+};
 import styled from 'styled-components';
 // Components
 import { Space as AntdSpace } from 'antd';
-export const OriginSpace = styled(AntdSpace) `
-  &.antsomi-space-vertical {
-    width: 100%;
-  }
-`;
-export const Space = OriginSpace;
+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;