@kne/react-form-antd 4.1.7 → 4.1.9

package/README.md

@@ -251,8 +251,8 @@ const InputExample = () => {
                             placeholder="请再次输入密码"
                         />
                         <Divider>带前缀/后缀</Divider>
-                        <Input name="price" label="价格" addonBefore="¥" placeholder="请输入金额" />
-                        <Input name="website" label="网址" addonAfter=".com" placeholder="请输入网站名称" />
+                        <Input name="price" label="价格" prefix="¥" placeholder="请输入金额" />
+                        <Input name="website" label="网址" suffix=".com" placeholder="请输入网站名称" />
                     </Flex>
                 </Form>
             </Card>
@@ -1188,6 +1188,55 @@ render(<ButtonsExample />);
 
 ```
 
+- 移动端布局
+- 移动端默认采用纵向卡片布局（label 在上、字段分隔线、按钮整宽）；登录等场景可用 mobile={false} 关闭布局适配，Select 弹层遮罩、16px 字号等字段级优化仍生效
+- _ReactFormAntd(@kne/current-lib_react-form-antd),(@kne/current-lib_react-form-antd/dist/index.css),antd(antd)
+
+```jsx
+const {default: Form, Input, Select, DatePicker, InputNumber, SubmitButton, useFormIsMobile} = _ReactFormAntd;
+const {Flex, Card, Tag} = antd;
+
+const LayoutState = () => {
+    const isMobile = useFormIsMobile();
+    return <Tag color={isMobile ? 'blue' : 'default'}>{isMobile ? '移动端布局' : 'PC 布局'}</Tag>;
+};
+
+const MobileExample = () => {
+    return (<Flex vertical gap={24}>
+        <Card title="移动端自动适配（默认）" size="small">
+            <Form type="default" onSubmit={data => console.log('提交报销单', data)}>
+                <LayoutState/>
+                <Input name="title" label="报销事由" rule="REQ" placeholder="如：上海客户拜访差旅"/>
+                <Select name="category" label="费用类型" rule="REQ" options={[
+                    {label: '交通费', value: 'traffic'},
+                    {label: '住宿费', value: 'hotel'},
+                    {label: '餐饮费', value: 'meal'}
+                ]}/>
+                <InputNumber name="amount" label="金额（元）" rule="REQ" min={0} precision={2}/>
+                <DatePicker name="date" label="发生日期" rule="REQ"/>
+                <SubmitButton>提交报销</SubmitButton>
+            </Form>
+        </Card>
+
+        <Card title="登录场景：mobile={false} 关闭移动端布局" size="small">
+            <Form type="inner" mobile={false} onSubmit={data => console.log('登录', data)}>
+                <LayoutState/>
+                <Input name="account" label="账号" rule="REQ" placeholder="手机号 / 邮箱"/>
+                <Input.Password name="password" label="密码" rule="REQ" placeholder="请输入密码"/>
+                <Select name="tenant" label="登录租户" options={[
+                    {label: '总部', value: 'hq'},
+                    {label: '华东分公司', value: 'east'}
+                ]}/>
+                <SubmitButton block>登录</SubmitButton>
+            </Form>
+        </Card>
+    </Flex>);
+};
+
+render(<MobileExample/>);
+
+```
+
 ### API
 
 #### 属性
@@ -1201,8 +1250,13 @@ render(<ButtonsExample />);
 | enterSubmit   | `boolean`                          | `false`             | 是否支持回车提交                       |
 | scrollToError | `boolean`                          | `true`              | 校验失败时是否滚动到错误字段                 |
 | scrollProps   | `object`                           | `{block: 'center'}` | 滚动配置，参考 Element.scrollIntoView |
+| mobile        | `boolean`                          | -                   | 传 `false` 关闭本表单的移动端布局（如登录页）；只影响布局，Select 弹层遮罩、16px 字号等字段级移动端优化仍按设备生效。不传时继承外层 Form，再回退到 preset 与设备判断 |
 | onSubmit      | `function`                         | -                   | 表单提交回调函数                       |
 
+#### useFormIsMobile
+
+在 Form 内部获取当前是否应使用移动端布局：Form 设置了 `mobile={false}` 时返回 `false`，否则按设备判断。`useFormMobile` 返回 Form 上 `mobile` 的原始值，`FormMobileContext` 为对应 Context。
+
 ---
 
 ### Input 输入框
@@ -1528,6 +1582,7 @@ import {preset} from '@kne/react-form-antd';
 preset({
     type: 'default',     // 默认表单类型
     size: 'middle',      // 默认表单尺寸
+    mobile: undefined,   // 全局设为 false 可关闭所有表单的移动端布局
     rules: {             // 自定义校验规则
         PHONE: {
             reg: /^1[3-9]\d{9}$/,

package/dist/index.css

@@ -96,10 +96,10 @@
 .react-form__field.is-req-error .react-form__field-component:focus, .react-form__field.is-error .react-form__field-component:focus {
   box-shadow: 0 0 0 2px rgba(252, 51, 51, 0.2);
 }
-.react-form__field.is-req-error .react-form__field-component .ant-select-selection, .react-form__field.is-req-error .react-form__field-component .ant-input, .react-form__field.is-req-error .react-form__field-component .ant-radio-inner, .react-form__field.is-error .react-form__field-component .ant-select-selection, .react-form__field.is-error .react-form__field-component .ant-input, .react-form__field.is-error .react-form__field-component .ant-radio-inner {
+.react-form__field.is-req-error .react-form__field-component .ant-input, .react-form__field.is-req-error .react-form__field-component .ant-radio-inner, .react-form__field.is-error .react-form__field-component .ant-input, .react-form__field.is-error .react-form__field-component .ant-radio-inner {
   border-color: #fc3333;
 }
-.react-form__field.is-req-error .react-form__field-component .ant-select-selection:focus, .react-form__field.is-req-error .react-form__field-component .ant-input:focus, .react-form__field.is-req-error .react-form__field-component .ant-radio-inner:focus, .react-form__field.is-error .react-form__field-component .ant-select-selection:focus, .react-form__field.is-error .react-form__field-component .ant-input:focus, .react-form__field.is-error .react-form__field-component .ant-radio-inner:focus {
+.react-form__field.is-req-error .react-form__field-component .ant-input:focus, .react-form__field.is-req-error .react-form__field-component .ant-radio-inner:focus, .react-form__field.is-error .react-form__field-component .ant-input:focus, .react-form__field.is-error .react-form__field-component .ant-radio-inner:focus {
   box-shadow: 0 0 0 2px rgba(252, 51, 51, 0.2);
 }
 .react-form__field.is-req-error .react-form__field-component .ant-upload.ant-upload-select-picture-card, .react-form__field.is-error .react-form__field-component .ant-upload.ant-upload-select-picture-card {
@@ -111,10 +111,10 @@
 .react-form__field.is-req-error .react-form__field-component.ant-input-affix-wrapper-focused, .react-form__field.is-error .react-form__field-component.ant-input-affix-wrapper-focused {
   box-shadow: 0 0 0 2px rgba(252, 51, 51, 0.2);
 }
-.react-form__field.is-req-error .react-form__field-component.ant-select > .ant-select-selector, .react-form__field.is-error .react-form__field-component.ant-select > .ant-select-selector {
-  border-color: #fc3333;
+.react-form__field.is-req-error .react-form__field-component.ant-select, .react-form__field.is-error .react-form__field-component.ant-select {
+  --ant-select-border-color: #fc3333 !important;
 }
-.react-form__field.is-req-error .react-form__field-component.ant-select.ant-select-focused > .ant-select-selector, .react-form__field.is-error .react-form__field-component.ant-select.ant-select-focused > .ant-select-selector {
+.react-form__field.is-req-error .react-form__field-component.ant-select.ant-select-focused, .react-form__field.is-error .react-form__field-component.ant-select.ant-select-focused {
   box-shadow: 0 0 0 2px rgba(252, 51, 51, 0.2);
 }
 .react-form__field-error {
@@ -289,9 +289,6 @@
   font-size: 16px !important;
 }
 
-.react-form.is-mobile .react-form__field-label {
-  font-size: 16px !important;
-}
 .react-form.is-mobile .ant-input,
 .react-form.is-mobile textarea.ant-input,
 .react-form.is-mobile .ant-input-number,
@@ -302,10 +299,7 @@
 .react-form.is-mobile .ant-select-content,
 .react-form.is-mobile .ant-select-content-value,
 .react-form.is-mobile .ant-select-selection-item,
-.react-form.is-mobile .ant-select-selection-placeholder,
-.react-form.is-mobile .ant-select-selection-search-input,
 .react-form.is-mobile .ant-picker-input > input,
-.react-form.is-mobile .ant-cascader-input,
 .react-form.is-mobile .ant-radio-wrapper,
 .react-form.is-mobile .ant-checkbox-wrapper,
 .react-form.is-mobile .date-picker-today-container .ant-input {
@@ -316,9 +310,6 @@
 }
 
 @container kne-responsive (max-width: 768px) {
-  .react-form .react-form__field-label {
-    font-size: 16px !important;
-  }
   .react-form .ant-input,
   .react-form textarea.ant-input,
   .react-form .ant-input-number,
@@ -329,10 +320,7 @@
   .react-form .ant-select-content,
   .react-form .ant-select-content-value,
   .react-form .ant-select-selection-item,
-  .react-form .ant-select-selection-placeholder,
-  .react-form .ant-select-selection-search-input,
   .react-form .ant-picker-input > input,
-  .react-form .ant-cascader-input,
   .react-form .ant-radio-wrapper,
   .react-form .ant-checkbox-wrapper,
   .react-form .date-picker-today-container .ant-input {
@@ -342,6 +330,406 @@
     --ant-select-font-size: 16px;
   }
 }
+.kne-responsive-boundary {
+  position: relative;
+}
+
+.kne-responsive-scroll {
+  overflow: auto;
+}
+
+:root {
+  --kne-viewport-width: 100vw;
+  --kne-viewport-height: 100dvh;
+  --kne-viewport-inline-size: 100vw;
+  --kne-viewport-block-size: 100dvh;
+}
+
+.kne-responsive-boundary {
+  --kne-viewport-width: 100vw;
+  --kne-viewport-height: 100dvh;
+  --kne-viewport-inline-size: 100vw;
+  --kne-viewport-block-size: 100dvh;
+}
+
+.react-form.is-mobile {
+  --react-form-choice-label-height: 30px;
+  --react-form-choice-offset: calc((var(--react-form-choice-label-height) - 44px) / 2);
+  --react-form-choice-button-offset: calc((var(--react-form-choice-label-height) - 40px) / 2);
+}
+.react-form.is-mobile.react-form--small {
+  --react-form-choice-label-height: 24px;
+}
+.react-form.is-mobile.react-form--large, .react-form.is-mobile.react-form--inline--large {
+  --react-form-choice-label-height: 34px;
+}
+.react-form.is-mobile[class*=react-form--inner] {
+  --react-form-choice-offset: 0px;
+  --react-form-choice-button-offset: 0px;
+}
+.react-form.is-mobile .react-form__field-input > .ant-checkbox-wrapper {
+  margin-block: var(--react-form-choice-offset);
+}
+.react-form.is-mobile .react-form__field-input > .ant-checkbox-group > .ant-checkbox-wrapper:first-child,
+.react-form.is-mobile .react-form__field-input > .ant-radio-group > .ant-radio-wrapper:first-child {
+  margin-top: var(--react-form-choice-offset);
+}
+.react-form.is-mobile .react-form__field-input > .ant-checkbox-group > .ant-checkbox-wrapper:last-child,
+.react-form.is-mobile .react-form__field-input > .ant-radio-group > .ant-radio-wrapper:last-child {
+  margin-bottom: var(--react-form-choice-offset);
+}
+.react-form.is-mobile .react-form__field-input > .ant-radio-group > .ant-radio-button-wrapper {
+  margin-block: var(--react-form-choice-button-offset);
+}
+.react-form.is-mobile .ant-checkbox-wrapper,
+.react-form.is-mobile .ant-radio-wrapper {
+  --ant-control-interactive-size: 20px;
+  --ant-radio-radio-size: 20;
+  --ant-radio-dot-size: 10;
+  align-items: center;
+  min-height: 44px;
+  margin-inline: 0;
+}
+.react-form.is-mobile .ant-checkbox-group,
+.react-form.is-mobile .ant-radio-group {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  -moz-column-gap: 0;
+       column-gap: 0;
+}
+.react-form.is-mobile .ant-checkbox-group > .ant-checkbox-wrapper,
+.react-form.is-mobile .ant-radio-group > .ant-radio-wrapper {
+  flex: 0 0 100%;
+}
+.react-form.is-mobile .ant-radio-group > .ant-radio-button-wrapper {
+  flex: 1 1 0;
+  min-width: 0;
+  height: 40px;
+  line-height: 38px;
+  padding-inline: 8px;
+  font-size: 16px;
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@container kne-responsive (max-width: 768px) {
+  .react-form {
+    --react-form-choice-label-height: 30px;
+    --react-form-choice-offset: calc((var(--react-form-choice-label-height) - 44px) / 2);
+    --react-form-choice-button-offset: calc((var(--react-form-choice-label-height) - 40px) / 2);
+  }
+  .react-form.react-form--small {
+    --react-form-choice-label-height: 24px;
+  }
+  .react-form.react-form--large, .react-form.react-form--inline--large {
+    --react-form-choice-label-height: 34px;
+  }
+  .react-form[class*=react-form--inner] {
+    --react-form-choice-offset: 0px;
+    --react-form-choice-button-offset: 0px;
+  }
+  .react-form .react-form__field-input > .ant-checkbox-wrapper {
+    margin-block: var(--react-form-choice-offset);
+  }
+  .react-form .react-form__field-input > .ant-checkbox-group > .ant-checkbox-wrapper:first-child,
+  .react-form .react-form__field-input > .ant-radio-group > .ant-radio-wrapper:first-child {
+    margin-top: var(--react-form-choice-offset);
+  }
+  .react-form .react-form__field-input > .ant-checkbox-group > .ant-checkbox-wrapper:last-child,
+  .react-form .react-form__field-input > .ant-radio-group > .ant-radio-wrapper:last-child {
+    margin-bottom: var(--react-form-choice-offset);
+  }
+  .react-form .react-form__field-input > .ant-radio-group > .ant-radio-button-wrapper {
+    margin-block: var(--react-form-choice-button-offset);
+  }
+  .react-form .ant-checkbox-wrapper,
+  .react-form .ant-radio-wrapper {
+    --ant-control-interactive-size: 20px;
+    --ant-radio-radio-size: 20;
+    --ant-radio-dot-size: 10;
+    align-items: center;
+    min-height: 44px;
+    margin-inline: 0;
+  }
+  .react-form .ant-checkbox-group,
+  .react-form .ant-radio-group {
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+    -moz-column-gap: 0;
+         column-gap: 0;
+  }
+  .react-form .ant-checkbox-group > .ant-checkbox-wrapper,
+  .react-form .ant-radio-group > .ant-radio-wrapper {
+    flex: 0 0 100%;
+  }
+  .react-form .ant-radio-group > .ant-radio-button-wrapper {
+    flex: 1 1 0;
+    min-width: 0;
+    height: 40px;
+    line-height: 38px;
+    padding-inline: 8px;
+    font-size: 16px;
+    text-align: center;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+.kne-responsive-boundary {
+  position: relative;
+}
+
+.kne-responsive-scroll {
+  overflow: auto;
+}
+
+:root {
+  --kne-viewport-width: 100vw;
+  --kne-viewport-height: 100dvh;
+  --kne-viewport-inline-size: 100vw;
+  --kne-viewport-block-size: 100dvh;
+}
+
+.kne-responsive-boundary {
+  --kne-viewport-width: 100vw;
+  --kne-viewport-height: 100dvh;
+  --kne-viewport-inline-size: 100vw;
+  --kne-viewport-block-size: 100dvh;
+}
+
+.react-form.is-mobile:not(.is-mobile-disabled) .react-form__field {
+  display: block;
+  margin-right: 0;
+  margin-bottom: 0 !important;
+  padding: 12px 0;
+  border-bottom: 1px solid #eee;
+}
+.react-form.is-mobile:not(.is-mobile-disabled) .react-form__field:last-child {
+  border-bottom: none;
+}
+.react-form.is-mobile:not(.is-mobile-disabled) .react-form__field-main {
+  flex-direction: column;
+}
+.react-form.is-mobile:not(.is-mobile-disabled) .react-form__field-label {
+  min-width: auto !important;
+  margin: 0 0 6px;
+  padding-left: 0;
+  text-align: left;
+  font-size: 15px !important;
+  font-weight: normal !important;
+  line-height: 1.5;
+  color: #666;
+}
+.react-form.is-mobile:not(.is-mobile-disabled) .react-form__field-label.is-req:before {
+  position: static;
+  transform: none;
+  margin-right: 2px;
+  color: #ff3141;
+  font-weight: normal;
+}
+.react-form.is-mobile:not(.is-mobile-disabled) .react-form__field-input {
+  align-self: stretch;
+  width: 100%;
+}
+.react-form.is-mobile:not(.is-mobile-disabled) .react-form__field.is-error {
+  padding-bottom: 2px;
+}
+.react-form.is-mobile:not(.is-mobile-disabled) .react-form__field-error {
+  position: static;
+  margin-top: -6px;
+  font-size: 12px;
+  line-height: 16px;
+  color: #ff3141 !important;
+}
+.react-form.is-mobile:not(.is-mobile-disabled) .react-form__field-input .ant-input,
+.react-form.is-mobile:not(.is-mobile-disabled) .react-form__field-input .ant-input-affix-wrapper,
+.react-form.is-mobile:not(.is-mobile-disabled) .react-form__field-input .ant-input-number:not(.react-form-antd-mobile-stepper),
+.react-form.is-mobile:not(.is-mobile-disabled) .react-form__field-input .ant-picker {
+  border-color: transparent !important;
+  box-shadow: none !important;
+  outline: none !important;
+  background: transparent !important;
+  padding-inline: 0 !important;
+  color: #333;
+}
+.react-form.is-mobile:not(.is-mobile-disabled) .react-form__field-input .date-picker-today-inputs {
+  border-color: transparent !important;
+  box-shadow: none !important;
+  outline: none !important;
+  background: transparent !important;
+  padding-inline: 0 !important;
+}
+.react-form.is-mobile:not(.is-mobile-disabled) .react-form__field-input .ant-input-affix-wrapper .ant-input {
+  padding-inline: 0 !important;
+}
+.react-form.is-mobile:not(.is-mobile-disabled) .react-form__field-input .ant-input-number:not(.react-form-antd-mobile-stepper) .ant-input-number-input {
+  padding-inline: 0 !important;
+}
+.react-form.is-mobile:not(.is-mobile-disabled) .react-form__field-input .react-form-antd-mobile-stepper.ant-input-number-mode-spinner {
+  gap: 2px;
+  border-color: transparent !important;
+  box-shadow: none !important;
+  background: transparent !important;
+}
+.react-form.is-mobile:not(.is-mobile-disabled) .react-form__field-input .react-form-antd-mobile-stepper.ant-input-number-mode-spinner .ant-input-number-action {
+  border: none !important;
+  border-radius: 2px;
+  background: #f5f5f5;
+  color: #333;
+}
+.react-form.is-mobile:not(.is-mobile-disabled) .react-form__field-input .react-form-antd-mobile-stepper.ant-input-number-mode-spinner .ant-input-number-input {
+  border-radius: 2px;
+  background: #f5f5f5;
+  text-align: center;
+}
+.react-form.is-mobile:not(.is-mobile-disabled) .react-form__field-input .ant-select {
+  --ant-select-border-color: transparent !important;
+  --ant-select-background-color: transparent !important;
+  --ant-select-padding-horizontal: 0px !important;
+  box-shadow: none !important;
+  outline: none !important;
+}
+.react-form.is-mobile:not(.is-mobile-disabled) .react-form__field-input input::-moz-placeholder, .react-form.is-mobile:not(.is-mobile-disabled) .react-form__field-input textarea::-moz-placeholder {
+  color: #ccc !important;
+}
+.react-form.is-mobile:not(.is-mobile-disabled) .react-form__field-input input::placeholder,
+.react-form.is-mobile:not(.is-mobile-disabled) .react-form__field-input textarea::placeholder,
+.react-form.is-mobile:not(.is-mobile-disabled) .react-form__field-input .ant-select-placeholder {
+  color: #ccc !important;
+}
+.react-form.is-mobile:not(.is-mobile-disabled) .react-form__field-input .ant-input-disabled,
+.react-form.is-mobile:not(.is-mobile-disabled) .react-form__field-input .ant-input[disabled],
+.react-form.is-mobile:not(.is-mobile-disabled) .react-form__field-input .ant-picker-disabled,
+.react-form.is-mobile:not(.is-mobile-disabled) .react-form__field-input .ant-select-disabled,
+.react-form.is-mobile:not(.is-mobile-disabled) .react-form__field-input .ant-input-number-disabled {
+  color: #ccc !important;
+}
+.react-form.is-mobile:not(.is-mobile-disabled) .react-form__action-button {
+  width: 100%;
+  height: 48px;
+  font-size: 17px;
+  border-radius: 4px;
+}
+
+@container kne-responsive (max-width: 768px) {
+  .react-form:not(.is-mobile-disabled) .react-form__field {
+    display: block;
+    margin-right: 0;
+    margin-bottom: 0 !important;
+    padding: 12px 0;
+    border-bottom: 1px solid #eee;
+  }
+  .react-form:not(.is-mobile-disabled) .react-form__field:last-child {
+    border-bottom: none;
+  }
+  .react-form:not(.is-mobile-disabled) .react-form__field-main {
+    flex-direction: column;
+  }
+  .react-form:not(.is-mobile-disabled) .react-form__field-label {
+    min-width: auto !important;
+    margin: 0 0 6px;
+    padding-left: 0;
+    text-align: left;
+    font-size: 15px !important;
+    font-weight: normal !important;
+    line-height: 1.5;
+    color: #666;
+  }
+  .react-form:not(.is-mobile-disabled) .react-form__field-label.is-req:before {
+    position: static;
+    transform: none;
+    margin-right: 2px;
+    color: #ff3141;
+    font-weight: normal;
+  }
+  .react-form:not(.is-mobile-disabled) .react-form__field-input {
+    align-self: stretch;
+    width: 100%;
+  }
+  .react-form:not(.is-mobile-disabled) .react-form__field.is-error {
+    padding-bottom: 2px;
+  }
+  .react-form:not(.is-mobile-disabled) .react-form__field-error {
+    position: static;
+    margin-top: -6px;
+    font-size: 12px;
+    line-height: 16px;
+    color: #ff3141 !important;
+  }
+  .react-form:not(.is-mobile-disabled) .react-form__field-input .ant-input,
+  .react-form:not(.is-mobile-disabled) .react-form__field-input .ant-input-affix-wrapper,
+  .react-form:not(.is-mobile-disabled) .react-form__field-input .ant-input-number:not(.react-form-antd-mobile-stepper),
+  .react-form:not(.is-mobile-disabled) .react-form__field-input .ant-picker {
+    border-color: transparent !important;
+    box-shadow: none !important;
+    outline: none !important;
+    background: transparent !important;
+    padding-inline: 0 !important;
+    color: #333;
+  }
+  .react-form:not(.is-mobile-disabled) .react-form__field-input .date-picker-today-inputs {
+    border-color: transparent !important;
+    box-shadow: none !important;
+    outline: none !important;
+    background: transparent !important;
+    padding-inline: 0 !important;
+  }
+  .react-form:not(.is-mobile-disabled) .react-form__field-input .ant-input-affix-wrapper .ant-input {
+    padding-inline: 0 !important;
+  }
+  .react-form:not(.is-mobile-disabled) .react-form__field-input .ant-input-number:not(.react-form-antd-mobile-stepper) .ant-input-number-input {
+    padding-inline: 0 !important;
+  }
+  .react-form:not(.is-mobile-disabled) .react-form__field-input .react-form-antd-mobile-stepper.ant-input-number-mode-spinner {
+    gap: 2px;
+    border-color: transparent !important;
+    box-shadow: none !important;
+    background: transparent !important;
+  }
+  .react-form:not(.is-mobile-disabled) .react-form__field-input .react-form-antd-mobile-stepper.ant-input-number-mode-spinner .ant-input-number-action {
+    border: none !important;
+    border-radius: 2px;
+    background: #f5f5f5;
+    color: #333;
+  }
+  .react-form:not(.is-mobile-disabled) .react-form__field-input .react-form-antd-mobile-stepper.ant-input-number-mode-spinner .ant-input-number-input {
+    border-radius: 2px;
+    background: #f5f5f5;
+    text-align: center;
+  }
+  .react-form:not(.is-mobile-disabled) .react-form__field-input .ant-select {
+    --ant-select-border-color: transparent !important;
+    --ant-select-background-color: transparent !important;
+    --ant-select-padding-horizontal: 0px !important;
+    box-shadow: none !important;
+    outline: none !important;
+  }
+  .react-form:not(.is-mobile-disabled) .react-form__field-input input::-moz-placeholder, .react-form:not(.is-mobile-disabled) .react-form__field-input textarea::-moz-placeholder {
+    color: #ccc !important;
+  }
+  .react-form:not(.is-mobile-disabled) .react-form__field-input input::placeholder,
+  .react-form:not(.is-mobile-disabled) .react-form__field-input textarea::placeholder,
+  .react-form:not(.is-mobile-disabled) .react-form__field-input .ant-select-placeholder {
+    color: #ccc !important;
+  }
+  .react-form:not(.is-mobile-disabled) .react-form__field-input .ant-input-disabled,
+  .react-form:not(.is-mobile-disabled) .react-form__field-input .ant-input[disabled],
+  .react-form:not(.is-mobile-disabled) .react-form__field-input .ant-picker-disabled,
+  .react-form:not(.is-mobile-disabled) .react-form__field-input .ant-select-disabled,
+  .react-form:not(.is-mobile-disabled) .react-form__field-input .ant-input-number-disabled {
+    color: #ccc !important;
+  }
+  .react-form:not(.is-mobile-disabled) .react-form__action-button {
+    width: 100%;
+    height: 48px;
+    font-size: 17px;
+    border-radius: 4px;
+  }
+}
 @keyframes react-form-antd-mobile-expand-down {
   from {
     max-height: 0;
@@ -385,10 +773,8 @@
 .react-form-antd-mobile-anchor.is-mobile .ant-select-placeholder,
 .react-form-antd-mobile-anchor.is-mobile .ant-select-content,
 .react-form-antd-mobile-anchor.is-mobile .ant-select-content-value,
-.react-form-antd-mobile-anchor.is-mobile .ant-select-selection-search-input,
 .react-form-antd-mobile-anchor.is-mobile .ant-picker-input > input,
-.react-form-antd-mobile-anchor.is-mobile .ant-select-selection-item,
-.react-form-antd-mobile-anchor.is-mobile .ant-select-selection-placeholder {
+.react-form-antd-mobile-anchor.is-mobile .ant-select-selection-item {
   font-size: 16px !important;
 }
 .react-form-antd-mobile-anchor.is-mobile .ant-select {
@@ -677,4 +1063,28 @@
   pointer-events: none !important;
   animation: react-form-antd-mobile-collapse-up 120ms ease-out both !important;
 }
+.react-form-antd-mobile-stepper.ant-input-number {
+  width: 100%;
+}
+.react-form-antd-mobile-stepper.ant-input-number.ant-input-number-lg {
+  border-radius: var(--ant-border-radius-lg, 8px);
+}
+.react-form-antd-mobile-stepper.ant-input-number.ant-input-number-mode-spinner {
+  overflow: hidden;
+}
+.react-form-antd-mobile-stepper.ant-input-number.ant-input-number-mode-spinner .ant-input-number-action {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-self: stretch;
+  width: calc(1em * var(--ant-line-height, 1.5714) + 2 * var(--ant-input-number-input-padding-block, 4px));
+  padding-inline: 0;
+  font-size: inherit;
+}
+.react-form-antd-mobile-stepper.ant-input-number.ant-input-number-mode-spinner .ant-input-number-action .anticon {
+  font-size: 14px;
+}
+.react-form-antd-mobile-stepper.ant-input-number.ant-input-number-mode-spinner.ant-input-number-lg .ant-input-number-action {
+  width: calc(1em * var(--ant-line-height-lg, 1.5) + 2 * var(--ant-input-number-input-padding-block, 7px));
+}
 /*# sourceMappingURL=index.css.map */