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

package/es/components/atoms/Alert/Alert.js

@@ -1,19 +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, _b, _c, _d;
 // Libraries
 import styled from 'styled-components';
 import { Alert as AntdAlert } from 'antd';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
-export const Alert = styled(AntdAlert) `
-  padding: 10px;
-  font-size: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.fontSize}px;
-
-  .antsomi-alert-message {
-    color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorTextBase} !important;
-  }
-
-  &.antsomi-alert-info {
-    background-color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.bw1};
-    border-color: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.bw1};
-  }
-`;
+export var Alert = styled(AntdAlert)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 10px;\n  font-size: ", "px;\n\n  .antsomi-alert-message {\n    color: ", " !important;\n  }\n\n  &.antsomi-alert-info {\n    background-color: ", ";\n    border-color: ", ";\n  }\n"], ["\n  padding: 10px;\n  font-size: ", "px;\n\n  .antsomi-alert-message {\n    color: ", " !important;\n  }\n\n  &.antsomi-alert-info {\n    background-color: ", ";\n    border-color: ", ";\n  }\n"])), (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.fontSize, (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorTextBase, (_c = THEME.token) === null || _c === void 0 ? void 0 : _c.bw1, (_d = THEME.token) === null || _d === void 0 ? void 0 : _d.bw1);
+var templateObject_1;

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

@@ -1,2 +1,2 @@
 import { Button as AntdButton } from './Button';
-export const Button = AntdButton;
+export var Button = AntdButton;

package/es/components/atoms/Button/test.js

@@ -3,15 +3,15 @@ import React, { useState } from 'react';
 import Icon from '@antscorp/icons';
 // Components
 import { Button, Divider, Radio, Space, Modal } from '../../index';
-const TestIcon = () => React.createElement(Icon, { type: "icon-ants-toggle-on" });
-const TestButton = () => {
-    const [size, setSize] = useState('large'); // default is 'middle'
-    const [api, context] = Modal.useModal();
+var TestIcon = function () { return React.createElement(Icon, { type: "icon-ants-toggle-on" }); };
+var TestButton = function () {
+    var _a = useState('large'), size = _a[0], setSize = _a[1]; // default is 'middle'
+    var _b = Modal.useModal(), api = _b[0], context = _b[1];
     return (React.createElement(React.Fragment, null,
         context,
         React.createElement(Space, { direction: "vertical", size: 20 },
             React.createElement(Space, { wrap: true },
-                React.createElement(Button, { type: "primary", onClick: () => {
+                React.createElement(Button, { type: "primary", onClick: function () {
                         api.confirm({
                             title: 'hello',
                             content: 'this is me',
@@ -40,7 +40,7 @@ const TestButton = () => {
                 React.createElement(Button, { type: "dashed" }, "Dashed Button"),
                 React.createElement(Button, { type: "text" }, "Text Button"),
                 React.createElement(Button, { type: "link" }, "Link Button")),
-            React.createElement(Radio.Group, { value: size, onChange: e => setSize(e.target.value) },
+            React.createElement(Radio.Group, { value: size, onChange: function (e) { return setSize(e.target.value); } },
                 React.createElement(Radio.Button, { value: "large" }, "Large"),
                 React.createElement(Radio.Button, { value: "default" }, "Default"),
                 React.createElement(Radio.Button, { value: "small" }, "Small")),

package/es/components/atoms/DividerPure/DividerPure.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)
@@ -14,12 +25,12 @@ import classNames from 'classnames';
 import * as React from 'react';
 // Styled
 import { Wrapper } from './styled';
-export const DividerPure = props => {
-    const { type, dot, dashed, className, style, width, height, children } = props, restOf = __rest(props, ["type", "dot", "dashed", "className", "style", "width", "height", "children"]);
-    return (React.createElement(Wrapper, Object.assign({ className: classNames(`--${type}`, className, {
+export var DividerPure = function (props) {
+    var type = props.type, dot = props.dot, dashed = props.dashed, className = props.className, style = props.style, width = props.width, height = props.height, children = props.children, restOf = __rest(props, ["type", "dot", "dashed", "className", "style", "width", "height", "children"]);
+    return (React.createElement(Wrapper, __assign({ className: classNames("--".concat(type), className, {
             '--dot': dot,
             '--dashed': dashed,
-        }), style: Object.assign(Object.assign({}, style), { height, width }) }, restOf)));
+        }), style: __assign(__assign({}, style), { height: height, width: width }) }, restOf)));
 };
 DividerPure.defaultProps = {
     type: 'horizontal',

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

@@ -1,41 +1,11 @@
+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;
 // Libraries
 import styled from 'styled-components';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
-export const Wrapper = styled.div `
-  &.--horizontal {
-    border-top-width: 1px;
-    border-color: '#e3eef1';
-    width: 100%;
-    margin-top: 20px;
-    margin-bottom: 20px;
-  }
-
-  &.--vertical {
-    border-right-width: 1px;
-    border-color: '#e3eef1';
-    min-height: 30px;
-    width: max-content;
-    margin-left: 14px;
-    margin-right: 14px;
-  }
-
-  &.--dot {
-    border-style: dotted;
-    border-color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.accent3};
-
-    &.--vertical {
-      border-right-width: 2px;
-    }
-  }
-
-  &.--dashed {
-    border-style: dashed;
-    border-color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.accent3};
-
-    &.--vertical {
-      border-right-width: 2px;
-    }
-  }
-`;
+export var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &.--horizontal {\n    border-top-width: 1px;\n    border-color: '#e3eef1';\n    width: 100%;\n    margin-top: 20px;\n    margin-bottom: 20px;\n  }\n\n  &.--vertical {\n    border-right-width: 1px;\n    border-color: '#e3eef1';\n    min-height: 30px;\n    width: max-content;\n    margin-left: 14px;\n    margin-right: 14px;\n  }\n\n  &.--dot {\n    border-style: dotted;\n    border-color: ", ";\n\n    &.--vertical {\n      border-right-width: 2px;\n    }\n  }\n\n  &.--dashed {\n    border-style: dashed;\n    border-color: ", ";\n\n    &.--vertical {\n      border-right-width: 2px;\n    }\n  }\n"], ["\n  &.--horizontal {\n    border-top-width: 1px;\n    border-color: '#e3eef1';\n    width: 100%;\n    margin-top: 20px;\n    margin-bottom: 20px;\n  }\n\n  &.--vertical {\n    border-right-width: 1px;\n    border-color: '#e3eef1';\n    min-height: 30px;\n    width: max-content;\n    margin-left: 14px;\n    margin-right: 14px;\n  }\n\n  &.--dot {\n    border-style: dotted;\n    border-color: ", ";\n\n    &.--vertical {\n      border-right-width: 2px;\n    }\n  }\n\n  &.--dashed {\n    border-style: dashed;\n    border-color: ", ";\n\n    &.--vertical {\n      border-right-width: 2px;\n    }\n  }\n"])), (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.accent3, (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.accent3);
+var templateObject_1;

package/es/components/atoms/Empty/Empty.js

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

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

@@ -1,2 +1,2 @@
 import { FloatButton as AntdFloatButton } from './FloatButton';
-export const FloatButton = AntdFloatButton;
+export var FloatButton = AntdFloatButton;

package/es/components/atoms/Grid/Grid.js

@@ -1,3 +1,3 @@
 import { Row as AntdRow, Col as AntdCol } from 'antd';
-export const Row = AntdRow;
-export const Col = AntdCol;
+export var Row = AntdRow;
+export var Col = AntdCol;

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

@@ -1,36 +1,23 @@
+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';
 // Components
 import AntsIcon from '@antscorp/icons';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
-const DraftAntsIcon = AntsIcon;
-export const Icon = styled(DraftAntsIcon) `
-  ${p => (p.style ? css `style` : null)}
-  ${p => p.size
-    ? css `
-          width: ${p.width || p.size}px !important;
-          height: ${p.height || p.size}px !important;
-          font-size: ${p.size}px !important;
-        `
-    : css `
-          font-size: 20px;
-          line-height: 1;
-        `}
-
-  ${p => p.color
-    ? css `
-          color: ${p.color} !important;
-        `
-    : null}
-
-  ${p => {
+var DraftAntsIcon = AntsIcon;
+export var Icon = styled(DraftAntsIcon)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", "\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  ", "\n  ", "\n\n  ", "\n\n  ", "\n"])), function (p) { return (p.style ? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["style"], ["style"]))) : null); }, function (p) {
+    return p.size
+        ? css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          width: ", "px !important;\n          height: ", "px !important;\n          font-size: ", "px !important;\n        "], ["\n          width: ", "px !important;\n          height: ", "px !important;\n          font-size: ", "px !important;\n        "])), p.width || p.size, p.height || p.size, p.size) : css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          font-size: 20px;\n          line-height: 1;\n        "], ["\n          font-size: 20px;\n          line-height: 1;\n        "])));
+}, function (p) {
+    return p.color
+        ? css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n          color: ", " !important;\n        "], ["\n          color: ", " !important;\n        "])), p.color) : null;
+}, function (p) {
     var _a;
     return p.disabled
-        ? css `
-          cursor: not-allowed !important;
-          color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorTextDisabled} !important;
-        `
-        : null;
-}}
-`;
+        ? css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n          cursor: not-allowed !important;\n          color: ", " !important;\n        "], ["\n          cursor: not-allowed !important;\n          color: ", " !important;\n        "])), (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorTextDisabled) : null;
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/es/components/atoms/Input/Input.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)
@@ -21,41 +32,41 @@ import { RequiredLabel, Text } from '@antscorp/antsomi-ui/es/components/atoms';
 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 => {
+var PATH = '@antscorp/antsomi-ui/es/components/atoms/Input/Input.tsx';
+var OriginInput = function (props) {
     // Props
-    const { debounce, errorArchive, required, labelColor, isReverseMask, isHideErrMessage, focused, label, onAfterChange, onChange, errorMsg } = props, restProps = __rest(props, ["debounce", "errorArchive", "required", "labelColor", "isReverseMask", "isHideErrMessage", "focused", "label", "onAfterChange", "onChange", "errorMsg"]);
+    var debounce = props.debounce, errorArchive = props.errorArchive, required = props.required, labelColor = props.labelColor, isReverseMask = props.isReverseMask, isHideErrMessage = props.isHideErrMessage, focused = props.focused, label = props.label, onAfterChange = props.onAfterChange, onChange = props.onChange, errorMsg = props.errorMsg, restProps = __rest(props, ["debounce", "errorArchive", "required", "labelColor", "isReverseMask", "isHideErrMessage", "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);
+    var _a = useState(props.value), value = _a[0], setValue = _a[1];
+    var _b = useState(false), isFocused = _b[0], setFocused = _b[1];
+    var requiredMsg = useMemo(function () {
+        var msg = '';
+        var 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(() => {
+    var timeoutAfterChange = useRef(null);
+    useEffect(function () {
         setValue(props.value);
     }, [props.value]);
-    useEffect(() => {
+    useEffect(function () {
         if (focused) {
             setFocused(focused);
         }
     }, [focused]);
-    const onChangeInput = (event) => {
+    var onChangeInput = function (event) {
         try {
-            const { value } = event.target;
-            setValue(value);
+            var value_1 = event.target.value;
+            setValue(value_1);
             onChange && onChange(event);
             if (timeoutAfterChange) {
                 clearTimeout(timeoutAfterChange.current);
             }
-            timeoutAfterChange.current = setTimeout(() => {
-                onAfterChange && onAfterChange(value);
+            timeoutAfterChange.current = setTimeout(function () {
+                onAfterChange && onAfterChange(value_1);
             }, debounce);
         }
         catch (error) {
@@ -66,19 +77,19 @@ const OriginInput = props => {
             });
         }
     };
-    const renderRequiredLabel = (label) => {
+    var renderRequiredLabel = function (label) {
         if (required) {
             return (React.createElement(RequiredLabel, { isReverseMask: isReverseMask, color: labelColor || '#666666', style: { marginBottom: 5 } }, label));
         }
         return (React.createElement(Text, { color: "#666666", style: { marginBottom: 5 } }, label));
     };
-    const listDisableActions = [];
+    var 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 => {
+        React.createElement(StyledInput, __assign({}, restProps, { value: value, onBlur: function (e) {
                 if (!isFocused) {
                     setFocused(true);
                 }
@@ -90,7 +101,7 @@ OriginInput.defaultProps = {
     debounce: 400,
     isHideErrMessage: false,
 };
-export const Input = OriginInput;
+export var Input = OriginInput;
 Input.TextArea = StyledInput.TextArea;
 Input.DefaultInput = AntdInput;
-export const { TextArea } = StyledInput;
+export var TextArea = StyledInput.TextArea;

package/es/components/atoms/Input/styled.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, _e, _f, _g, _h, _j, _k, _l, _m;
 // Styled
 import styled, { css } from 'styled-components';
@@ -5,105 +9,11 @@ import styled, { css } from 'styled-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;
-    `}
-`;
+export var StyledInput = styled(InputAntd)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  /* height: 30px;\n  height: 30px;\n  border-style: none;\n  border-radius: 0px;\n  padding-left: 5px;\n  padding-right: 5px;\n  font-family: 'Roboto';\n  font-size: ", "px;\n  --tw-shadow: 0 1px 0 0 #e0e0e0;\n  --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),\n    var(--tw-shadow);\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  transition-property: all;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n\n  ", "\n\n  &:active,\n  &:focus {\n    background-color: ", ";\n    --tw-shadow: 0 1px 0 0 #194e8d;\n    --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);\n    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),\n      var(--tw-shadow);\n  }\n\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    --tw-shadow: 0 1px 0 0 #e0e0e0;\n    --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);\n    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),\n      var(--tw-shadow);\n  } */\n"], ["\n  /* height: 30px;\n  height: 30px;\n  border-style: none;\n  border-radius: 0px;\n  padding-left: 5px;\n  padding-right: 5px;\n  font-family: 'Roboto';\n  font-size: ", "px;\n  --tw-shadow: 0 1px 0 0 #e0e0e0;\n  --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),\n    var(--tw-shadow);\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  transition-property: all;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n\n  ", "\n\n  &:active,\n  &:focus {\n    background-color: ", ";\n    --tw-shadow: 0 1px 0 0 #194e8d;\n    --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);\n    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),\n      var(--tw-shadow);\n  }\n\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    --tw-shadow: 0 1px 0 0 #e0e0e0;\n    --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);\n    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),\n      var(--tw-shadow);\n  } */\n"])), (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.fontSize, (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.accent5, (_c = THEME.token) === null || _c === void 0 ? void 0 : _c.blue0, function (_a) {
+    var noborder = _a.noborder;
+    return noborder && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-colored: 0 0 #0000;\n      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),\n        var(--tw-shadow);\n      padding-left: 0;\n      padding-right: 0;\n    "], ["\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-colored: 0 0 #0000;\n      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),\n        var(--tw-shadow);\n      padding-left: 0;\n      padding-right: 0;\n    "])));
+}, (_d = THEME.token) === null || _d === void 0 ? void 0 : _d.blue0, (_e = THEME.token) === null || _e === void 0 ? void 0 : _e.accent1, (_f = THEME.token) === null || _f === void 0 ? void 0 : _f.accent5);
+export var TextArea = styled(InputAntd.TextArea)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 30px;\n  border-style: none;\n  border-radius: 0px;\n  padding-left: 5px;\n  padding-right: 5px;\n  font-family: 'Roboto';\n  font-size: ", "px;\n  --tw-shadow: 0 1px 0 0 #e0e0e0;\n  --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),\n    var(--tw-shadow);\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  transition-property: all;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n\n  &:active,\n  &:focus {\n    background-color: ", ";\n    --tw-shadow: 0 1px 0 0 #194e8d;\n    --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);\n    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),\n      var(--tw-shadow);\n  }\n\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    --tw-shadow: 0 1px 0 0 #e0e0e0;\n    --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);\n    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),\n      var(--tw-shadow);\n  }\n\n  ", "\n"], ["\n  height: 30px;\n  border-style: none;\n  border-radius: 0px;\n  padding-left: 5px;\n  padding-right: 5px;\n  font-family: 'Roboto';\n  font-size: ", "px;\n  --tw-shadow: 0 1px 0 0 #e0e0e0;\n  --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),\n    var(--tw-shadow);\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  transition-property: all;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n\n  &:active,\n  &:focus {\n    background-color: ", ";\n    --tw-shadow: 0 1px 0 0 #194e8d;\n    --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);\n    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),\n      var(--tw-shadow);\n  }\n\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    --tw-shadow: 0 1px 0 0 #e0e0e0;\n    --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);\n    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),\n      var(--tw-shadow);\n  }\n\n  ", "\n"])), (_g = THEME.token) === null || _g === void 0 ? void 0 : _g.fontSize, (_h = THEME.token) === null || _h === void 0 ? void 0 : _h.accent5, (_j = THEME.token) === null || _j === void 0 ? void 0 : _j.blue0, (_k = THEME.token) === null || _k === void 0 ? void 0 : _k.blue0, (_l = THEME.token) === null || _l === void 0 ? void 0 : _l.accent1, (_m = THEME.token) === null || _m === void 0 ? void 0 : _m.accent5, function (props) {
+    return props.showBorder && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      border: 1px solid #e0e0e0;\n    "], ["\n      border: 1px solid #e0e0e0;\n    "])));
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/es/components/atoms/InputDynamic/EditCaretPositioning.js

@@ -4,17 +4,17 @@
 /* eslint-disable func-names */
 /* eslint-disable object-shorthand */
 /* eslint-disable prefer-const */
-const EditCaretPositioning = {};
+var EditCaretPositioning = {};
 if (window.getSelection && document.createRange) {
     // saves caret position(s)
     EditCaretPositioning.saveSelection = function (containerEl) {
         var _a;
         try {
-            let range = (_a = window === null || window === void 0 ? void 0 : window.getSelection()) === null || _a === void 0 ? void 0 : _a.getRangeAt(0);
-            let preSelectionRange = range === null || range === void 0 ? void 0 : range.cloneRange();
+            var range = (_a = window === null || window === void 0 ? void 0 : window.getSelection()) === null || _a === void 0 ? void 0 : _a.getRangeAt(0);
+            var preSelectionRange = range === null || range === void 0 ? void 0 : range.cloneRange();
             preSelectionRange === null || preSelectionRange === void 0 ? void 0 : preSelectionRange.selectNodeContents(containerEl);
             preSelectionRange === null || preSelectionRange === void 0 ? void 0 : preSelectionRange.setEnd(range === null || range === void 0 ? void 0 : range.startContainer, range === null || range === void 0 ? void 0 : range.startOffset);
-            let start = preSelectionRange === null || preSelectionRange === void 0 ? void 0 : preSelectionRange.toString().length;
+            var start = preSelectionRange === null || preSelectionRange === void 0 ? void 0 : preSelectionRange.toString().length;
             return {
                 start: start,
                 end: start + (range === null || range === void 0 ? void 0 : range.toString().length),
@@ -31,13 +31,13 @@ if (window.getSelection && document.createRange) {
     };
     // restores caret position(s)
     EditCaretPositioning.restoreSelection = function (containerEl, savedSel) {
-        let charIndex = 0, range = document.createRange();
+        var charIndex = 0, range = document.createRange();
         range.setStart(containerEl, 0);
         range.collapse(true);
-        let nodeStack = [containerEl], node, foundStart = false, stop = false;
+        var nodeStack = [containerEl], node, foundStart = false, stop = false;
         while (!stop && (node = nodeStack.pop())) {
             if (node.nodeType === 3) {
-                let nextCharIndex = charIndex + node.length;
+                var nextCharIndex = charIndex + node.length;
                 if (!foundStart &&
                     savedSel &&
                     savedSel.start >= charIndex &&
@@ -52,13 +52,13 @@ if (window.getSelection && document.createRange) {
                 charIndex = nextCharIndex;
             }
             else {
-                let i = node.childNodes.length;
+                var i = node.childNodes.length;
                 while (i--) {
                     nodeStack.push(node.childNodes[i]);
                 }
             }
         }
-        let sel = window.getSelection();
+        var sel = window.getSelection();
         sel === null || sel === void 0 ? void 0 : sel.removeAllRanges();
         sel === null || sel === void 0 ? void 0 : sel.addRange(range);
     };
@@ -66,11 +66,11 @@ if (window.getSelection && document.createRange) {
 else if (document.selection && document.body.createTextRange) {
     // saves caret position(s)
     EditCaretPositioning.saveSelection = function (containerEl) {
-        let selectedTextRange = document.selection.createRange();
-        let preSelectionTextRange = document.body.createTextRange();
+        var selectedTextRange = document.selection.createRange();
+        var preSelectionTextRange = document.body.createTextRange();
         preSelectionTextRange.moveToElementText(containerEl);
         preSelectionTextRange.setEndPoint('EndToStart', selectedTextRange);
-        let start = preSelectionTextRange.text.length;
+        var start = preSelectionTextRange.text.length;
         return {
             start: start,
             end: start + selectedTextRange.text.length,
@@ -78,7 +78,7 @@ else if (document.selection && document.body.createTextRange) {
     };
     // restores caret position(s)
     EditCaretPositioning.restoreSelection = function (containerEl, savedSel) {
-        let textRange = document.body.createTextRange();
+        var textRange = document.body.createTextRange();
         textRange.moveToElementText(containerEl);
         textRange.collapse(true);
         textRange.moveEnd('character', savedSel.end);