feat: dynamic backends

src/components/seal-form/seal-textarea.tsx

@@ -12,7 +12,12 @@ import { SealFormItemProps } from './types';
 import Wrapper from './wrapper';
 import InputWrapper from './wrapper/input';
 
-const LabelWrapper = styled.div`
+const LabelWrapper = styled.div.attrs({
+  className: 'seal-textarea-label'
+})`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
   background-color: var(--ant-color-bg-container);
 `;
 
@@ -110,7 +115,7 @@ const SealTextArea: React.FC<InputTextareaProps & SealFormItemProps> = (
     <InputWrapper>
       <Wrapper
         status={status}
-        label={<LabelWrapper>{label}</LabelWrapper>}
+        label={label}
         isFocus={isFocus}
         required={required}
         description={description}

src/components/seal-form/wrapper/index.tsx

@@ -154,7 +154,9 @@ export const Label = styled.div.attrs<{
 `;
 
 // inner
-const Inner = styled.div`
+const Inner = styled.div.attrs({
+  className: '__inner__'
+})`
   width: 100%;
   display: flex;
 `;

src/components/seal-form/wrapper/input.ts

@@ -163,6 +163,9 @@ const InputWrapper = styled.div`
     height: auto;
     padding-right: 10px;
   }
+  .ant-input-textarea-allow-clear.ant-input-affix-wrapper {
+    padding: 0;
+  }
 `;
 
 export default InputWrapper;

src/components/seal-form/wrapper/select.ts

@@ -97,10 +97,10 @@ const SelectWrapper = styled.div`
       align-items: center;
       height: 54px;
 
-      .ant-select-selection-search {
-        // top: 20px !important;
-        // inset-inline-start: ${INPUT_INNER_PADDING}px;
+      .ant-select-selection-wrap {
+        height: 100%;
       }
+
       &.ant-select-auto-complete {
         .ant-select-selection-search {
           padding-inline-start: ${INPUT_INNER_PADDING}px;