@antscorp/antsomi-ui 1.3.2 → 1.3.3

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

@@ -0,0 +1,20 @@
+import React, { ReactNode } from 'react';
+import { InputProps as AntdInputProps } from 'antd';
+export interface InputProps extends AntdInputProps {
+    noborder?: 'true' | 'false' | boolean;
+    debounce?: number;
+    label?: ReactNode;
+    onAfterChange?: (value: any) => void;
+    errorArchive?: string;
+    required?: boolean;
+    focused?: boolean;
+    errorMsg?: string;
+    disableUndo?: boolean;
+}
+export declare const Input: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<AntdInputProps & React.RefAttributes<import("antd").InputRef>> & {
+    Group: React.FC<import("antd/es/input").GroupProps>;
+    Search: React.ForwardRefExoticComponent<import("antd/es/input").SearchProps & React.RefAttributes<import("antd").InputRef>>;
+    TextArea: React.ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & React.RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>;
+    Password: React.ForwardRefExoticComponent<import("antd/es/input").PasswordProps & React.RefAttributes<import("antd").InputRef>>;
+}, any, InputProps, never>;
+export declare const TextArea: React.ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & React.RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>;

package/es/components/atoms/Input/Input.js

@@ -0,0 +1,92 @@
+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;
+};
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+/* eslint-disable react/destructuring-assignment */
+// Libraries
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+// Components
+import { RequiredLabel, Text } from '@antscorp/antsomi-ui/es/components/atoms';
+// Utils
+import { handleError } from '@antscorp/antsomi-ui/es/utils';
+import { getPreventKeyboardAction } from '@antscorp/antsomi-ui/es/utils/web';
+import { StyledInput } from './styled';
+const PATH = '@antscorp/antsomi-ui/es/components/atoms/Input/Input.tsx';
+const OriginInput = props => {
+    // Props
+    const { debounce, errorArchive, required, focused, label, onAfterChange, onChange, errorMsg } = props, restProps = __rest(props, ["debounce", "errorArchive", "required", "focused", "label", "onAfterChange", "onChange", "errorMsg"]);
+    // State
+    const [value, setValue] = useState(props.value);
+    const [isFocused, setFocused] = useState(false);
+    const requiredMsg = useMemo(() => {
+        let msg = '';
+        const isEmptyValue = !props.value || (Array.isArray(props.value) && !props.value.length);
+        if (required && isEmptyValue && isFocused) {
+            msg = 'This field is required';
+        }
+        return msg;
+    }, [props.value, required, isFocused]);
+    // Ref
+    const timeoutAfterChange = useRef(null);
+    useEffect(() => {
+        setValue(props.value);
+    }, [props.value]);
+    useEffect(() => {
+        if (focused) {
+            setFocused(focused);
+        }
+    }, [focused]);
+    const onChangeInput = (event) => {
+        try {
+            const { value } = event.target;
+            setValue(value);
+            onChange && onChange(event);
+            if (timeoutAfterChange) {
+                clearTimeout(timeoutAfterChange.current);
+            }
+            timeoutAfterChange.current = setTimeout(() => {
+                onAfterChange && onAfterChange(value);
+            }, debounce);
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: 'onChangeInput',
+                args: {},
+            });
+        }
+    };
+    const renderRequiredLabel = (label) => {
+        if (required) {
+            return (React.createElement(RequiredLabel, { color: "#666666", style: { marginBottom: 5 } }, label));
+        }
+        return (React.createElement(Text, { color: "#666666", style: { marginBottom: 5 } }, label));
+    };
+    const listDisableActions = [];
+    if (props.disableUndo) {
+        listDisableActions.push('undo');
+    }
+    return (React.createElement("div", { className: "input__wrapper" },
+        label && renderRequiredLabel(label),
+        React.createElement(StyledInput, Object.assign({}, restProps, { value: value, onBlur: e => {
+                if (!isFocused) {
+                    setFocused(true);
+                }
+                restProps.onBlur && restProps.onBlur(e);
+            }, onChange: onChangeInput }, getPreventKeyboardAction(listDisableActions))),
+        restProps.status === 'error' || errorArchive || requiredMsg ? (React.createElement(Text, { color: "#ff4d4f", style: { marginLeft: 8, marginTop: 5 } }, errorMsg || errorArchive || requiredMsg)) : null));
+};
+OriginInput.defaultProps = {
+    debounce: 400,
+};
+export const Input = OriginInput;
+Input.TextArea = StyledInput.TextArea;
+export const { TextArea } = StyledInput;

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

@@ -0,0 +1,2 @@
+export { Input, TextArea } from './Input';
+export type { InputProps } from './Input';

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

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

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

@@ -0,0 +1,109 @@
+var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+// Styled
+import styled, { css } from 'styled-components';
+// Components
+import { Input as InputAntd } from 'antd';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const StyledInput = styled(InputAntd) `
+  /* height: 30px;
+  height: 30px;
+  border-style: none;
+  border-radius: 0px;
+  padding-left: 5px;
+  padding-right: 5px;
+  font-family: 'Roboto';
+  font-size: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.fontSize}px;
+  --tw-shadow: 0 1px 0 0 #e0e0e0;
+  --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
+
+  &::placeholder {
+    color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.accent5};
+  }
+
+  &:hover {
+    background-color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.blue0};
+  }
+
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+
+  ${({ noborder }) => noborder &&
+    css `
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-colored: 0 0 #0000;
+      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+        var(--tw-shadow);
+      padding-left: 0;
+      padding-right: 0;
+    `}
+
+  &:active,
+  &:focus {
+    background-color: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.blue0};
+    --tw-shadow: 0 1px 0 0 #194e8d;
+    --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+      var(--tw-shadow);
+  }
+
+  &:disabled {
+    background-color: ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.accent1};
+    color: ${(_f = THEME.token) === null || _f === void 0 ? void 0 : _f.accent5};
+    --tw-shadow: 0 1px 0 0 #e0e0e0;
+    --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+      var(--tw-shadow);
+  } */
+`;
+export const TextArea = styled(InputAntd.TextArea) `
+  height: 30px;
+  border-style: none;
+  border-radius: 0px;
+  padding-left: 5px;
+  padding-right: 5px;
+  font-family: 'Roboto';
+  font-size: ${(_g = THEME.token) === null || _g === void 0 ? void 0 : _g.fontSize}px;
+  --tw-shadow: 0 1px 0 0 #e0e0e0;
+  --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
+
+  &::placeholder {
+    color: ${(_h = THEME.token) === null || _h === void 0 ? void 0 : _h.accent5};
+  }
+
+  &:hover {
+    background-color: ${(_j = THEME.token) === null || _j === void 0 ? void 0 : _j.blue0};
+  }
+
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+
+  &:active,
+  &:focus {
+    background-color: ${(_k = THEME.token) === null || _k === void 0 ? void 0 : _k.blue0};
+    --tw-shadow: 0 1px 0 0 #194e8d;
+    --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+      var(--tw-shadow);
+  }
+
+  &:disabled {
+    background-color: ${(_l = THEME.token) === null || _l === void 0 ? void 0 : _l.accent1};
+    color: ${(_m = THEME.token) === null || _m === void 0 ? void 0 : _m.accent5};
+    --tw-shadow: 0 1px 0 0 #e0e0e0;
+    --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+      var(--tw-shadow);
+  }
+
+  ${props => props.showBorder &&
+    css `
+      border: 1px solid #e0e0e0;
+    `}
+`;

package/es/components/atoms/InputNumber/InputNumber.js

@@ -0,0 +1,27 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+// Libraries
+import React from 'react';
+import clsx from 'clsx';
+import { InputNumber as AntdInputNumber } from 'antd';
+// Icons
+import Icon from '@antscorp/icons';
+export const InputNumber = props => {
+    // Props
+    const { showHandler, className } = props, restOfProps = __rest(props, ["showHandler", "className"]);
+    return (React.createElement(AntdInputNumber, Object.assign({}, restOfProps, { className: clsx(className, {
+            '--show-handler': showHandler,
+        }), upHandler: React.createElement(Icon, { type: "icon-ants-caret-up", style: { fontSize: 8 } }), downHandler: React.createElement(Icon, { type: "icon-ants-caret-down", style: { fontSize: 8 } }) })));
+};
+InputNumber.defaultProps = {
+    showHandler: true,
+};

package/es/components/atoms/Pagination/Pagination.js

@@ -0,0 +1,2 @@
+import { Pagination as AntdPagination } from 'antd';
+export const Pagination = AntdPagination;

package/es/components/atoms/Popover/Popover.js

@@ -0,0 +1,2 @@
+import { Popover as AntdPopover } from 'antd';
+export const Popover = AntdPopover;

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

@@ -0,0 +1,5 @@
+// Libraries
+import styled from 'styled-components';
+// Components
+import { Popover as AntdPopover } from 'antd';
+export const PopoverWrapper = styled(AntdPopover) ``;

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

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

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

@@ -0,0 +1,25 @@
+var _a, _b, _c, _d;
+// Libraries
+import styled from 'styled-components';
+// 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) ``;

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

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

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

@@ -0,0 +1,24 @@
+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 } from 'react';
+// Atoms
+import { Text } from '../Text';
+// Styled
+import { StyledRequired } from './styled';
+export const RequiredLabel = memo(props => {
+    // Props
+    const { children } = props, restProps = __rest(props, ["children"]);
+    return (React.createElement(Text, Object.assign({}, restProps),
+        React.createElement(StyledRequired, null, "*"),
+        children));
+});

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

@@ -0,0 +1,10 @@
+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;
+`;

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

@@ -0,0 +1,51 @@
+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;
+};
+var _a;
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+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(() => {
+        if (wrapperRef.current && wrapperRef.current.scrollHeight > wrapperRef.current.clientHeight) {
+            !isScroll && setIsScroll(true);
+        }
+        else {
+            isScroll && setIsScroll(false);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [wrapperRef.current]);
+    const handleScroll = e => {
+        const bottom = e.target.scrollTop + e.target.clientHeight >= e.target.scrollHeight;
+        if (bottom) {
+            if (typeof loadMore === 'function') {
+                loadMore();
+            }
+        }
+    };
+    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));
+};
+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,
+};

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

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

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

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

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

@@ -0,0 +1,32 @@
+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';
+export const Slider = memo(props => {
+    const { range, value, min = 0, max = 0 } = props, restOf = __rest(props, ["range", "value", "min", "max"]);
+    const isNegative = useMemo(() => !!(!range && min < 0), [range, min]);
+    const calculateWidth = useMemo(() => ((value || 0) * 100) / (Math.abs(max) + Math.abs(min) || 1), [min, max, value]);
+    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, null,
+        React.createElement(AntdSlider, Object.assign({}, props))));
+});
+Slider.defaultProps = {
+    tooltipVisible: false,
+    min: 0,
+};

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

@@ -0,0 +1,44 @@
+// 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 => {
+    var _a, _b;
+    const 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};
+            }
+          `
+        : '';
+}}
+  }
+`;

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

@@ -0,0 +1,9 @@
+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;

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

@@ -0,0 +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 from 'react';
+// Antd Icons
+import { LoadingOutlined } from '@ant-design/icons';
+// Styled
+import { StyledSpin } from './styled';
+// Constants
+import { THEME } 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,
+                color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary,
+            }, spin: true })) }, restOf)), props.children));
+};
+Spin.defaultProps = {};

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

@@ -0,0 +1,7 @@
+// Libraries
+import styled from 'styled-components';
+// Antd Components
+import { Spin } from 'antd';
+export const StyledSpin = styled(Spin) `
+  max-height: unset !important;
+`;

package/es/components/atoms/Statistic/Statistic.js

@@ -0,0 +1,2 @@
+import { Statistic as AntdStatistic } from 'antd';
+export const Statistic = AntdStatistic;

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

@@ -0,0 +1,2 @@
+import { Steps as AntdSteps } from 'antd';
+export const Steps = AntdSteps;

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

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

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

@@ -0,0 +1,27 @@
+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 classNames from 'classnames';
+import React from 'react';
+// Styled
+import { TextWrapper } from './styled';
+export const Text = props => {
+    const { type, size, bold, children, className, style, color } = props, restOf = __rest(props, ["type", "size", "bold", "children", "className", "style", "color"]);
+    return (React.createElement(TextWrapper, Object.assign({ size: size, className: classNames(`--${type}`, className, {
+            'ants-font-bold': bold,
+        }), style: Object.assign(Object.assign({}, style), { color }) }, restOf), children));
+};
+Text.defaultProps = {
+    type: 'default',
+    bold: false,
+    size: 'small',
+};

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

@@ -0,0 +1,52 @@
+var _a, _b, _c, _d, _e, _f;
+// Libraries
+import styled, { css } from 'styled-components';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const TextWrapper = styled.div `
+  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;
+  font-family: Roboto;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+
+  ${p => {
+    var _a, _b, _c;
+    switch (p.size) {
+        case 'small':
+            return css `
+          font-size: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.fontSize}px;
+        `;
+        case 'medium':
+            return css `
+          font-size: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.fontSizeMd}px;
+        `;
+        case 'large':
+            return css `
+          font-size: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.fontSizeLg}px;
+        `;
+        default:
+            return css `
+          font-size: ${p.size}px;
+        `;
+    }
+}}
+
+  &.--disabled {
+    color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.colorTextDisabled};
+    pointer-events: none;
+  }
+
+  &.--secondary {
+    color: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.colorIcon};
+  }
+
+  &.--error {
+    color: ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.red6};
+  }
+
+  &.--warning {
+    color: ${(_f = THEME.token) === null || _f === void 0 ? void 0 : _f.colorWarning};
+  }
+`;

package/es/components/atoms/Timeline/Timeline.js

@@ -0,0 +1,2 @@
+import { Timeline as AntdTimeline } from 'antd';
+export const Timeline = AntdTimeline;

package/es/components/atoms/Watermark/Watermark.js

@@ -0,0 +1,2 @@
+import { Watermark as AntdWatermark } from 'antd';
+export const Watermark = AntdWatermark;