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

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

@@ -1,12 +1,19 @@
-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 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;
+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};
+  }
+`;

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

@@ -1,2 +1,2 @@
 import { Button as AntdButton } from './Button';
-export var Button = AntdButton;
+export const 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';
-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];
+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();
     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: function () {
+                React.createElement(Button, { type: "primary", onClick: () => {
                         api.confirm({
                             title: 'hello',
                             content: 'this is me',
@@ -40,7 +40,7 @@ var TestButton = function () {
                 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: function (e) { return setSize(e.target.value); } },
+            React.createElement(Radio.Group, { value: size, onChange: e => 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,14 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -25,12 +14,12 @@ import classNames from 'classnames';
 import * as React from 'react';
 // Styled
 import { Wrapper } from './styled';
-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, {
+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, {
             '--dot': dot,
             '--dashed': dashed,
-        }), style: __assign(__assign({}, style), { height: height, width: width }) }, restOf)));
+        }), style: Object.assign(Object.assign({}, style), { height, width }) }, restOf)));
 };
 DividerPure.defaultProps = {
     type: 'horizontal',

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

@@ -1,11 +1,41 @@
-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 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;
+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;
+    }
+  }
+`;

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

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

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

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

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

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

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

@@ -1,23 +1,36 @@
-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';
-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) {
+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 _a;
     return p.disabled
-        ? 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;
+        ? css `
+          cursor: not-allowed !important;
+          color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorTextDisabled} !important;
+        `
+        : null;
+}}
+`;

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

@@ -1,14 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -32,41 +21,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';
-var PATH = '@antscorp/antsomi-ui/es/components/atoms/Input/Input.tsx';
-var OriginInput = function (props) {
+const PATH = '@antscorp/antsomi-ui/es/components/atoms/Input/Input.tsx';
+const OriginInput = props => {
     // Props
-    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"]);
+    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"]);
     // State
-    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);
+    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
-    var timeoutAfterChange = useRef(null);
-    useEffect(function () {
+    const timeoutAfterChange = useRef(null);
+    useEffect(() => {
         setValue(props.value);
     }, [props.value]);
-    useEffect(function () {
+    useEffect(() => {
         if (focused) {
             setFocused(focused);
         }
     }, [focused]);
-    var onChangeInput = function (event) {
+    const onChangeInput = (event) => {
         try {
-            var value_1 = event.target.value;
-            setValue(value_1);
+            const { value } = event.target;
+            setValue(value);
             onChange && onChange(event);
             if (timeoutAfterChange) {
                 clearTimeout(timeoutAfterChange.current);
             }
-            timeoutAfterChange.current = setTimeout(function () {
-                onAfterChange && onAfterChange(value_1);
+            timeoutAfterChange.current = setTimeout(() => {
+                onAfterChange && onAfterChange(value);
             }, debounce);
         }
         catch (error) {
@@ -77,19 +66,19 @@ var OriginInput = function (props) {
             });
         }
     };
-    var renderRequiredLabel = function (label) {
+    const renderRequiredLabel = (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));
     };
-    var listDisableActions = [];
+    const listDisableActions = [];
     if (props.disableUndo) {
         listDisableActions.push('undo');
     }
     return (React.createElement("div", { className: "input__wrapper" },
         label && renderRequiredLabel(label),
-        React.createElement(StyledInput, __assign({}, restProps, { value: value, onBlur: function (e) {
+        React.createElement(StyledInput, Object.assign({}, restProps, { value: value, onBlur: e => {
                 if (!isFocused) {
                     setFocused(true);
                 }
@@ -101,7 +90,7 @@ OriginInput.defaultProps = {
     debounce: 400,
     isHideErrMessage: false,
 };
-export var Input = OriginInput;
+export const Input = OriginInput;
 Input.TextArea = StyledInput.TextArea;
 Input.DefaultInput = AntdInput;
-export var TextArea = StyledInput.TextArea;
+export const { TextArea } = StyledInput;

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

@@ -1,7 +1,3 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
 // Styled
 import styled, { css } from 'styled-components';
@@ -9,11 +5,105 @@ import styled, { css } from 'styled-components';
 import { Input as InputAntd } from 'antd';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
-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;
+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/InputDynamic/EditCaretPositioning.js

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

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import { DisableShortLinkTypeProps } from './PopupShortLink';
 export type KeyTagType = 'shortlink' | 'shortlink_static';
 export type SelectedPropertiesProps = {
@@ -16,7 +17,7 @@ export type InputDynamicProps = {
     addMessageToQueue?: Function;
 };
 export declare const InputDynamic: {
-    (props: InputDynamicProps): JSX.Element;
+    (props: InputDynamicProps): React.JSX.Element;
     defaultProps: {
         value: string;
         isViewMode: boolean;