@antscorp/antsomi-ui 2.0.109 → 2.0.111

package/es/assets/svg/mobile-frame.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="416.004" height="713" viewBox="0 0 416.004 713">
-  <path id="mobile_frame" data-name="mobile frame" d="M17657,3124a32.975,32.975,0,0,1-33-33V2444a32.977,32.977,0,0,1,33-33H18004a32.97,32.97,0,0,1,33,33v122.032a3.5,3.5,0,0,1,3,3.464v110a3.5,3.5,0,0,1-3,3.469v31.07a3.5,3.5,0,0,1,3,3.464v44a3.5,3.5,0,0,1-3,3.464V3091a32.97,32.97,0,0,1-33,33Zm-22-681v618a21.022,21.022,0,0,0,21,21h349.008a21.022,21.022,0,0,0,21-21V2443a21.022,21.022,0,0,0-21-21H17656A21.022,21.022,0,0,0,17635,2443Z" transform="translate(-17623.998 -2411)" fill="black"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="416.004" height="713" viewBox="0 0 416.004 713">
+  <path id="mobile_frame" data-name="mobile frame" d="M17657,3124a32.975,32.975,0,0,1-33-33V2444a32.977,32.977,0,0,1,33-33H18004a32.97,32.97,0,0,1,33,33v122.032a3.5,3.5,0,0,1,3,3.464v110a3.5,3.5,0,0,1-3,3.469v31.07a3.5,3.5,0,0,1,3,3.464v44a3.5,3.5,0,0,1-3,3.464V3091a32.97,32.97,0,0,1-33,33Zm-22-681v618a21.022,21.022,0,0,0,21,21h349.008a21.022,21.022,0,0,0,21-21V2443a21.022,21.022,0,0,0-21-21H17656A21.022,21.022,0,0,0,17635,2443Z" transform="translate(-17623.998 -2411)" fill="black"/>
+</svg>

package/es/assets/svg/warning-icon.svg

@@ -1,5 +1,5 @@
-<svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5.2658 1.37667C5.33497 1.20313 5.44007 1.05749 5.56949 0.955794C5.69891 0.8541 5.84765 0.800293 5.99933 0.800293C6.15101 0.800293 6.29975 0.8541 6.42917 0.955794C6.55859 1.05749 6.66369 1.20313 6.73286 1.37667L11.7575 10.9358C12.2983 11.9645 11.9042 12.8003 10.8773 12.8003H1.12339C0.0964559 12.8003 -0.299647 11.9688 0.243827 10.9358L5.26847 1.37667H5.2658Z" fill="#F5F500"/>
-<rect x="5" y="3.80029" width="2" height="5" rx="1" fill="#595959"/>
-<rect x="5" y="9.80029" width="2" height="2" rx="1" fill="#595959"/>
-</svg>
+<svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.2658 1.37667C5.33497 1.20313 5.44007 1.05749 5.56949 0.955794C5.69891 0.8541 5.84765 0.800293 5.99933 0.800293C6.15101 0.800293 6.29975 0.8541 6.42917 0.955794C6.55859 1.05749 6.66369 1.20313 6.73286 1.37667L11.7575 10.9358C12.2983 11.9645 11.9042 12.8003 10.8773 12.8003H1.12339C0.0964559 12.8003 -0.299647 11.9688 0.243827 10.9358L5.26847 1.37667H5.2658Z" fill="#F5F500"/>
+<rect x="5" y="3.80029" width="2" height="5" rx="1" fill="#595959"/>
+<rect x="5" y="9.80029" width="2" height="2" rx="1" fill="#595959"/>
+</svg>

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

@@ -5,34 +5,34 @@ import { Alert as AntdAlert } from 'antd';
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 import clsx from 'clsx';
 import { WarningIcon } from '@antscorp/antsomi-ui/es/components/icons';
-export const AlertStyled = styled(AntdAlert) `
-  padding: 15px !important;
-  font-size: ${globalToken?.fontSize}px;
-  box-sizing: border-box;
-  gap: 15px;
-
-  /* .antsomi-alert-message {
-    color: ${globalToken?.colorTextBase} !important;
-  } */
-
-  &.antsomi-alert-info {
-    background-color: ${globalToken?.bw1};
-    border-color: ${globalToken?.blue1};
-    svg {
-      color: ${globalToken?.blue7};
-    }
-  }
-
-  &.antsomi-alert-outline {
-    background-color: transparent;
-
-    &.antsomi-alert-warning {
-      border-color: ${globalToken?.orange6} !important;
-      svg {
-        margin: 0;
-      }
-    }
-  }
+export const AlertStyled = styled(AntdAlert) `
+  padding: 15px !important;
+  font-size: ${globalToken?.fontSize}px;
+  box-sizing: border-box;
+  gap: 15px;
+
+  /* .antsomi-alert-message {
+    color: ${globalToken?.colorTextBase} !important;
+  } */
+
+  &.antsomi-alert-info {
+    background-color: ${globalToken?.bw1};
+    border-color: ${globalToken?.blue1};
+    svg {
+      color: ${globalToken?.blue7};
+    }
+  }
+
+  &.antsomi-alert-outline {
+    background-color: transparent;
+
+    &.antsomi-alert-warning {
+      border-color: ${globalToken?.orange6} !important;
+      svg {
+        margin: 0;
+      }
+    }
+  }
 `;
 export const Alert = props => {
     const { variant = 'default', className, icon, type, ...restProps } = props;

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

@@ -1,20 +1,20 @@
 // Libraries
 import styled from 'styled-components';
 import { Typography } from '@antscorp/antsomi-ui/es/components';
-export const ContentEditableWrapper = styled(Typography.Text) `
-  outline-width: 0;
-  caret-color: transparent;
-  border-radius: 4px;
-  display: inline-flex !important;
-  align-items: center !important;
-  word-break: ${props => (props.$breakWord ? 'break-word' : 'normal')};
-
-  &.editable {
-    outline: 2px solid var(--text-link-color);
-    outline-offset: -2px;
-    caret-color: unset;
-  }
-
-  padding: 4px;
-  /* font-weight: bold; */
+export const ContentEditableWrapper = styled(Typography.Text) `
+  outline-width: 0;
+  caret-color: transparent;
+  border-radius: 4px;
+  display: inline-flex !important;
+  align-items: center !important;
+  word-break: ${props => (props.$breakWord ? 'break-word' : 'normal')};
+
+  &.editable {
+    outline: 2px solid var(--text-link-color);
+    outline-offset: -2px;
+    caret-color: unset;
+  }
+
+  padding: 4px;
+  /* font-weight: bold; */
 `;

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

@@ -2,39 +2,39 @@
 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: ${THEME.token?.accent3};
-
-    &.--vertical {
-      border-right-width: 2px;
-    }
-  }
-
-  &.--dashed {
-    border-style: dashed;
-    border-color: ${THEME.token?.accent3};
-
-    &.--vertical {
-      border-right-width: 2px;
-    }
-  }
+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: ${THEME.token?.accent3};
+
+    &.--vertical {
+      border-right-width: 2px;
+    }
+  }
+
+  &.--dashed {
+    border-style: dashed;
+    border-color: ${THEME.token?.accent3};
+
+    &.--vertical {
+      border-right-width: 2px;
+    }
+  }
 `;

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

@@ -0,0 +1,2 @@
+import { EyedropperProps } from './types';
+export declare const Eyedropper: (props: EyedropperProps) => import("react/jsx-runtime").JSX.Element;

package/es/components/atoms/Eyedropper/Eyedropper.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Typography, message } from 'antd';
+import { BgColorsOutlined } from '@ant-design/icons'; // Icon hình giọt nước
+import { ColorSwatch, StyledButton, StyledColorTag, StyledEyedropperContainer } from './styled';
+import tinycolor from 'tinycolor2';
+import clsx from 'clsx';
+const { Text } = Typography;
+export const Eyedropper = (props) => {
+    const { defaultColor, onColorPick, className } = props;
+    const [pickedColor, setPickedColor] = useState(defaultColor);
+    const [isLoading, setIsLoading] = useState(false);
+    const apiSupported = 'EyeDropper' in window;
+    // Cập nhật màu mặc định nếu prop thay đổi
+    useEffect(() => {
+        setPickedColor(defaultColor);
+    }, [defaultColor]);
+    const handlePickColor = async () => {
+        if (!apiSupported) {
+            message.error('Trình duyệt của bạn không hỗ trợ EyeDropper API.');
+            return;
+        }
+        setIsLoading(true);
+        try {
+            const eyeDropper = new window.EyeDropper();
+            const { sRGBHex } = await eyeDropper.open();
+            setPickedColor(sRGBHex);
+            message.success(`Đã chọn màu: ${sRGBHex}`);
+            onColorPick?.(sRGBHex);
+        }
+        catch (e) {
+            if (e instanceof Error && e.name === 'AbortError') {
+                message.info('Người dùng đã hủy chọn màu.');
+            }
+            else if (e instanceof Error) {
+                message.error(`Đã xảy ra lỗi khi chọn màu: ${e.message}`);
+            }
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    const isCurrentColorLight = tinycolor(pickedColor).isLight();
+    return (_jsxs(StyledEyedropperContainer, { className: className, children: [_jsxs(Typography.Title, { level: 4, children: [_jsx(BgColorsOutlined, {}), " C\u00F4ng c\u1EE5 tr\u00EDch xu\u1EA5t m\u00E0u"] }), _jsx(Text, { type: "secondary", children: "B\u1EA5m n\u00FAt b\u00EAn d\u01B0\u1EDBi \u0111\u1EC3 k\u00EDch ho\u1EA1t c\u00F4ng c\u1EE5 Eyedropper c\u1EE7a tr\u00ECnh duy\u1EC7t v\u00E0 ch\u1ECDn m\u00E0u t\u1EEB b\u1EA5t k\u1EF3 \u0111\u00E2u tr\u00EAn m\u00E0n h\u00ECnh." }), _jsx(StyledButton, { type: "primary", icon: _jsx(BgColorsOutlined, {}), onClick: handlePickColor, loading: isLoading, disabled: isLoading || !apiSupported, size: "large", children: "Ch\u1ECDn M\u00E0u" }), pickedColor && (_jsxs("div", { style: {
+                    marginTop: '20px',
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    gap: '10px',
+                }, children: [_jsx(Text, { children: "M\u00E0u \u0111\u00E3 ch\u1ECDn:" }), _jsx(StyledColorTag, { color: pickedColor, className: clsx({
+                            'is-lightcolor': isCurrentColorLight,
+                        }), children: pickedColor }), _jsx(ColorSwatch, { "$color": pickedColor })] })), !apiSupported && (_jsx(Text, { type: "danger", style: { marginTop: '15px', display: 'block' }, children: "Tr\u00ECnh duy\u1EC7t hi\u1EC7n t\u1EA1i kh\u00F4ng h\u1ED7 tr\u1EE3 EyeDropper API. Vui l\u00F2ng s\u1EED d\u1EE5ng Chrome, Edge ho\u1EB7c c\u00E1c tr\u00ECnh duy\u1EC7t d\u1EF1a tr\u00EAn Chromium." }))] }));
+};

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

@@ -0,0 +1 @@
+"use strict";

package/es/components/atoms/Eyedropper/styled.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const StyledEyedropperContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
+    Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
+}, any, {}, never>;
+export declare const StyledColorTag: import("styled-components").StyledComponent<import("antd").TagType, any, {}, never>;
+export declare const ColorSwatch: import("styled-components").StyledComponent<"div", any, {
+    $color: string;
+}, never>;

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

@@ -0,0 +1,45 @@
+import { Button, Tag } from 'antd';
+import styled from 'styled-components';
+export const StyledEyedropperContainer = styled.div `
+  padding: 20px;
+  border: 1px solid #e8e8e8;
+  border-radius: 8px;
+  max-width: 450px;
+  margin: 20px auto;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
+  text-align: center; /* Căn giữa nội dung */
+
+  h4 {
+    margin-bottom: 15px;
+    color: #333;
+    display: flex;
+    align-items: center;
+    justify-content: center; /* Căn giữa icon và tiêu đề */
+    gap: 8px; /* Khoảng cách giữa icon và chữ */
+  }
+`;
+export const StyledButton = styled(Button) `
+  margin-top: 20px;
+  width: auto; /* Để nút không bị giãn full chiều rộng */
+`;
+export const StyledColorTag = styled(Tag) `
+  padding: 4px 8px;
+  font-size: 1em;
+  font-weight: bold;
+  min-width: 100px;
+  text-align: center;
+  border: none;
+  color: white;
+
+  &.is-lightcolor {
+    border: 1px solid #d9d9d9;
+    color: #333;
+  }
+`;
+export const ColorSwatch = styled.div `
+  width: 30px;
+  height: 30px;
+  background-color: ${props => props.$color || 'transparent'}; /* Nhận prop $color */
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+`;

package/es/components/atoms/Eyedropper/types.d.ts

@@ -0,0 +1,5 @@
+export type EyedropperProps = {
+    defaultColor?: string;
+    onColorPick?: (color: string) => void;
+    className?: string;
+};

package/es/components/atoms/Eyedropper/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -5,29 +5,29 @@ 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)}
+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 `
+          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;
-        `}
-
+    : css `
+          font-size: 20px;
+          line-height: 1;
+        `}
+
   ${p => p.color
-    ? css `
-          color: ${p.color} !important;
+    ? css `
+          color: ${p.color} !important;
         `
-    : null}
-
+    : null}
+
   ${p => p.disabled
-    ? css `
-          cursor: not-allowed !important;
-          color: ${THEME.token?.colorTextDisabled} !important;
+    ? css `
+          cursor: not-allowed !important;
+          color: ${THEME.token?.colorTextDisabled} !important;
         `
-    : null}
+    : null}
 `;

package/es/components/atoms/Iframe/Iframe.js

@@ -6,9 +6,9 @@ import { useEffect, useRef } from 'react';
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 // Styled
 import styled from 'styled-components';
-const StyledIframe = styled.iframe `
-  border: none;
-  opacity: 0;
+const StyledIframe = styled.iframe `
+  border: none;
+  opacity: 0;
 `;
 export const Iframe = props => {
     const { children, className, src, srcDoc, ...restProps } = props;
@@ -27,21 +27,21 @@ export const Iframe = props => {
         const handleLoad = () => {
             const iframeDoc = iframe.contentDocument || iframe?.contentWindow?.document;
             const style = document.createElement('style');
-            style.innerHTML = `
-         ::-webkit-scrollbar {
-            background-color: transparent;
-            width: 4px;
-          }
-          ::-webkit-scrollbar-thumb {
-            background-color: transparent;
-            border-radius: 4px;
-          }
-
-          *:hover {
-            &::-webkit-scrollbar-thumb {
-              background-color: ${globalToken?.gray5};
-            }
-          }
+            style.innerHTML = `
+         ::-webkit-scrollbar {
+            background-color: transparent;
+            width: 4px;
+          }
+          ::-webkit-scrollbar-thumb {
+            background-color: transparent;
+            border-radius: 4px;
+          }
+
+          *:hover {
+            &::-webkit-scrollbar-thumb {
+              background-color: ${globalToken?.gray5};
+            }
+          }
       `;
             if (iframeDoc && iframeRef.current) {
                 iframeDoc.head.appendChild(style);

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

@@ -5,113 +5,113 @@ import { Input as InputAntd } from 'antd';
 import { Button } from '../Button';
 // 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: ${THEME.token?.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: ${THEME.token?.accent5};
-  }
-
-  &:hover {
-    background-color: ${THEME.token?.blue0};
-  }
-
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-
+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: ${THEME.token?.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: ${THEME.token?.accent5};
+  }
+
+  &:hover {
+    background-color: ${THEME.token?.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: ${THEME.token?.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: ${THEME.token?.accent1};
-    color: ${THEME.token?.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);
-  } */
+    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: ${THEME.token?.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: ${THEME.token?.accent1};
+    color: ${THEME.token?.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: ${THEME.token?.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: ${THEME.token?.accent5};
-  }
-
-  &:hover {
-    background-color: ${THEME.token?.blue0};
-  }
-
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-
-  &:active,
-  &:focus {
-    background-color: ${THEME.token?.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: ${THEME.token?.accent1};
-    color: ${THEME.token?.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: ${THEME.token?.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: ${THEME.token?.accent5};
+  }
+
+  &:hover {
+    background-color: ${THEME.token?.blue0};
+  }
+
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+
+  &:active,
+  &:focus {
+    background-color: ${THEME.token?.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: ${THEME.token?.accent1};
+    color: ${THEME.token?.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;
-    `}
+    css `
+      border: 1px solid #e0e0e0;
+    `}
 `;
-export const StyledSearchInput = styled(InputAntd) `
-  &.antsomi-input-affix-wrapper:hover > input.antsomi-input {
-    background-color: transparent;
-  }
+export const StyledSearchInput = styled(InputAntd) `
+  &.antsomi-input-affix-wrapper:hover > input.antsomi-input {
+    background-color: transparent;
+  }
 `;
-export const StyledIconWrapper = styled(Button) `
-  padding: 4px;
+export const StyledIconWrapper = styled(Button) `
+  padding: 4px;
 `;