@kne/form-info 0.1.9 → 0.1.10

package/README.md

@@ -1,19 +1,15 @@
-
 # form-info
 
-
 ### 描述
 
 构建一个更加美观的form表单组件
 
-
 ### 安装
 
 ```shell
 npm i --save @kne/form-info
 ```
 
-
 ### 概述
 
 这是一个基于 React 和 Ant Design 的高颜值表单组件库，专为现代化 Web 应用设计。该组件库通过优雅的视觉设计和丰富的交互功能，为开发者提供了一套完整的表单解决方案。
@@ -40,6 +36,20 @@ npm i --save @kne/form-info
 
 ### 示例(全屏)
 
+#### 示例样式
+
+```scss
+@use '~@kne/responsive-utils/scss' as resp;
+
+// 手机预览下给示例内容留白，便于观察层级与间距
+@include resp.mobile-container {
+  .example-driver-runner {
+    padding: 12px 16px 24px;
+    box-sizing: border-box;
+  }
+}
+```
+
 #### 示例代码
 
 - 基础表单示例
@@ -104,7 +114,7 @@ const BaseExample = () => {
         <List 
             title="工作经历" 
             name="workExperience"
-            itemTitle={({index, data}) => data?.companyName || `工作经历 ${index + 1}`}
+            itemTitle={({index, data}) => data?.companyName || &#96;工作经历 ${index + 1}&#96;}
             important
             maxLength={5}
             addText="添加工作经历"
@@ -116,7 +126,7 @@ const BaseExample = () => {
                 <List 
                     title="项目经历" 
                     name="projects"
-                    itemTitle={({index, data}) => data?.projectName || `项目 ${index + 1}`}
+                    itemTitle={({index, data}) => data?.projectName || &#96;项目 ${index + 1}&#96;}
                     list={[
                         <Input name="projectName" label="项目名称" rule="REQ" placeholder="例如：双十一活动系统" />,
                         <Input name="projectRole" label="担任角色" rule="REQ" placeholder="例如：技术负责人" />,
@@ -132,7 +142,7 @@ const BaseExample = () => {
         <TableList 
             title="家庭成员信息" 
             name="familyMembers"
-            itemTitle={({index}) => `家庭成员 ${index + 1}`}
+            itemTitle={({index}) => &#96;家庭成员 ${index + 1}&#96;}
             maxLength={10}
             addText="添加家庭成员"
             list={[
@@ -292,7 +302,7 @@ const BaseExample = () => {
             <List
                 title="工作经历" 
                 name="workExperience"
-                itemTitle={({index, data}) => data?.companyName || `工作经历 ${index + 1}`}
+                itemTitle={({index, data}) => data?.companyName || &#96;工作经历 ${index + 1}&#96;}
                 important
                 maxLength={5}
                 addText="添加工作经历"
@@ -365,7 +375,7 @@ const BaseExample = () => {
 
     // 步骤变更回调
     const handleStepChange = (current, formData) => {
-        console.log(`切换到第 ${current + 1} 步，表单数据:`, formData);
+        console.log(&#96;切换到第 ${current + 1} 步，表单数据:&#96;, formData);
         setCurrentStep(current);
     };
 
@@ -497,7 +507,7 @@ const BaseExample = () => {
                                 <List 
                                     title="紧急联系人列表" 
                                     name="emergencyContacts"
-                                    itemTitle={({index, data}) => data?.name || `联系人 ${index + 1}`}
+                                    itemTitle={({index, data}) => data?.name || &#96;联系人 ${index + 1}&#96;}
                                     important
                                     maxLength={3}
                                     addText="添加联系人"
@@ -623,7 +633,7 @@ const BaseExample = () => {
 
     // 第三步：项目详情
     background: '现有客服系统效率低下，需要引入AI技术提升服务质量',
-    objectives: `1. 响应时间缩短50%\n2. 客户满意度提升30%\n3. 人力成本降低40%`,
+    objectives: &#96;1. 响应时间缩短50%\n2. 客户满意度提升30%\n3. 人力成本降低40%&#96;,
     deliverables: '智能客服系统一套，包含前端界面、后台管理、AI对话引擎'
   };
 
@@ -644,7 +654,7 @@ const BaseExample = () => {
 
   // 步骤变更回调
   const handleStepChange = (current, data) => {
-    console.log(`切换到第 ${current + 1} 步，当前数据:`, data);
+    console.log(&#96;切换到第 ${current + 1} 步，当前数据:&#96;, data);
     setCurrentStep(current);
   };
 
@@ -728,7 +738,7 @@ const BaseExample = () => {
                 <List 
                   title="项目团队成员" 
                   name="teamMembers"
-                  itemTitle={({index, data}) => data?.name || `成员 ${index + 1}`}
+                  itemTitle={({index, data}) => data?.name || &#96;成员 ${index + 1}&#96;}
                   important
                   maxLength={10}
                   addText="添加团队成员"
@@ -784,7 +794,7 @@ const BaseExample = () => {
                 <List 
                   title="里程碑计划" 
                   name="milestones"
-                  itemTitle={({index, data}) => data?.milestoneName || `里程碑 ${index + 1}`}
+                  itemTitle={({index, data}) => data?.milestoneName || &#96;里程碑 ${index + 1}&#96;}
                   addText="添加里程碑"
                   list={[
                     <Input name="milestoneName" label="里程碑名称" rule="REQ" placeholder="例如：需求确认" />,
@@ -854,7 +864,7 @@ const BorderedExample = () => {
                 title="工作经历（important）"
                 name="workExperience"
                 bordered={bordered}
-                itemTitle={({index, data}) => data?.companyName || `工作经历 ${index + 1}`}
+                itemTitle={({index, data}) => data?.companyName || &#96;工作经历 ${index + 1}&#96;}
                 important
                 addText="添加工作经历"
                 list={[
@@ -868,7 +878,7 @@ const BorderedExample = () => {
                 title="教育经历（非important）"
                 name="educationHistory"
                 bordered={bordered}
-                itemTitle={({index, data}) => data?.schoolName || `教育经历 ${index + 1}`}
+                itemTitle={({index, data}) => data?.schoolName || &#96;教育经历 ${index + 1}&#96;}
                 addText="添加教育经历"
                 list={[
                     <Input name="schoolName" label="学校名称" rule="REQ" placeholder="例如：北京大学" />,
@@ -898,7 +908,6 @@ render(<BorderedExample />);
 
 ```
 
-
 ### API
 
 ### FormInfo
@@ -1048,4 +1057,4 @@ render(<BorderedExample />);
 || addText | 添加 | Add |
 || deleteText | 删除 | Delete |
 
-可通过 withLocale HOC 或 useIntl hook 自定义国际化文本。
+可通过 withLocale HOC 或 useIntl hook 自定义国际化文本。

package/dist/index.css

@@ -1,3 +1,25 @@
+.kne-form-info_gh14z {
+  position: relative;
+}
+
+.kne-form-info_Kfn6L {
+  overflow: auto;
+}
+
+:root {
+  --kne-viewport-width: 100vw;
+  --kne-viewport-height: 100vh;
+  --kne-viewport-inline-size: 100vw;
+  --kne-viewport-block-size: 100vh;
+}
+
+.kne-form-info_gh14z {
+  --kne-viewport-width: 100vw;
+  --kne-viewport-height: 100vh;
+  --kne-viewport-inline-size: 100vw;
+  --kne-viewport-block-size: 100vh;
+}
+
 .kne-form-info_ZQNNL .multi-field-delete-label {
   display: none;
 }
@@ -47,10 +69,43 @@
   background: #ffffff;
   color: var(--font-color);
 }
+@container kne-responsive (max-width: 768px) {
+  .kne-form-info_ZQNNL .ant-input,
+  .kne-form-info_ZQNNL .ant-input-affix-wrapper,
+  .kne-form-info_ZQNNL .ant-input-number,
+  .kne-form-info_ZQNNL .ant-input-number-input,
+  .kne-form-info_ZQNNL .ant-input-textarea textarea,
+  .kne-form-info_ZQNNL textarea.ant-input,
+  .kne-form-info_ZQNNL .ant-select-selector,
+  .kne-form-info_ZQNNL .ant-select-selection-search-input,
+  .kne-form-info_ZQNNL .ant-picker,
+  .kne-form-info_ZQNNL .ant-picker-input > input,
+  .kne-form-info_ZQNNL .ant-mentions,
+  .kne-form-info_ZQNNL .ant-mentions textarea,
+  .kne-form-info_ZQNNL .react-form__field input,
+  .kne-form-info_ZQNNL .react-form__field textarea {
+    font-size: 16px !important;
+  }
+  .kne-form-info_ZQNNL .ant-row {
+    row-gap: 12px !important;
+  }
+  .kne-form-info_ZQNNL .react-form__field-label {
+    margin-bottom: 6px;
+  }
+}
 
 .kne-form-info_GW4Xx > .ant-card-head .part-title {
   font-size: var(--font-size-large);
 }
+@container kne-responsive (max-width: 768px) {
+  .kne-form-info_GW4Xx.ant-card > .ant-card-head {
+    padding-inline: 0;
+    margin-bottom: 4px;
+  }
+  .kne-form-info_GW4Xx.ant-card > .ant-card-body {
+    padding: 12px 0 0;
+  }
+}
 
 .kne-form-info_eY4qR.ant-btn {
   border-radius: var(--radius-default, 2px);
@@ -70,6 +125,109 @@
   padding: 16px 0 0;
   border-radius: 0;
 }
+@container kne-responsive (max-width: 768px) {
+  .kne-form-info_SL3dC.ant-card {
+    border: none !important;
+    box-shadow: none !important;
+    background: transparent;
+  }
+  .kne-form-info_SL3dC.ant-card > .ant-card-head {
+    padding: 0 0 4px;
+    min-height: auto;
+    background: transparent;
+    border-bottom: none;
+  }
+  .kne-form-info_SL3dC.ant-card > .ant-card-body {
+    padding: 12px 0 0;
+  }
+  .kne-form-info_SL3dC .kne-form-info_PNnMa {
+    margin-bottom: 0;
+  }
+  .kne-form-info_SL3dC .kne-form-info_PNnMa:not(:last-child) {
+    margin-bottom: 16px;
+    padding-bottom: 16px;
+    border-bottom: 1px dashed var(--font-color-grey-4, #f0f0f0);
+  }
+  .kne-form-info_SL3dC .kne-form-info_PNnMa .kne-form-info_HiB5Q {
+    border: none !important;
+    box-shadow: none !important;
+    background: transparent;
+  }
+  .kne-form-info_SL3dC .kne-form-info_PNnMa .kne-form-info_HiB5Q.ant-card .ant-card-head {
+    height: auto;
+    min-height: auto;
+    line-height: 1.5;
+    padding: 0 0 8px;
+    margin-bottom: 0;
+    background: transparent;
+    border-bottom: none;
+  }
+  .kne-form-info_SL3dC .kne-form-info_PNnMa .kne-form-info_HiB5Q.ant-card .ant-card-body {
+    padding: 4px 0 0;
+  }
+  .kne-form-info_SL3dC .kne-form-info_PNnMa .kne-form-info_HiB5Q.ant-card .ant-row {
+    row-gap: 12px !important;
+  }
+  .kne-form-info_SL3dC .kne-form-info_PNnMa .kne-form-info_HiB5Q.ant-card .ant-col {
+    padding-bottom: 4px;
+  }
+  .kne-form-info_SL3dC .kne-form-info_PNnMa.kne-form-info_Xkp38 > .kne-form-info_HiB5Q {
+    border: none !important;
+  }
+  .kne-form-info_SL3dC .kne-form-info_PNnMa.kne-form-info_Xkp38 > .kne-form-info_HiB5Q.ant-card > .ant-card-head {
+    background: transparent;
+    padding: 0 0 8px;
+  }
+  .kne-form-info_SL3dC .kne-form-info_PNnMa.kne-form-info_Xkp38 > .kne-form-info_HiB5Q.ant-card > .ant-card-head .part-title {
+    display: inline-block;
+    padding: 4px 10px;
+    border-radius: 12px;
+    background: var(--primary-color-06);
+    color: var(--primary-color);
+    font-size: var(--font-size-small, 12px);
+    line-height: 16px;
+  }
+  .kne-form-info_SL3dC .kne-form-info_SL3dC {
+    margin: 12px 0 0;
+    padding: 12px 12px 12px 14px !important;
+    border: none !important;
+    box-shadow: none !important;
+    border-radius: 8px;
+    background: var(--bg-color-grey-1, #fafafa);
+    border-left: 3px solid var(--primary-color-2, var(--primary-color)) !important;
+    box-sizing: border-box;
+  }
+  .kne-form-info_SL3dC .kne-form-info_SL3dC.ant-card > .ant-card-head {
+    padding: 0 0 8px;
+    background: transparent;
+    border-bottom: none;
+  }
+  .kne-form-info_SL3dC .kne-form-info_SL3dC.ant-card > .ant-card-head .part-title {
+    font-size: var(--font-size-default, 14px);
+  }
+  .kne-form-info_SL3dC .kne-form-info_SL3dC.ant-card > .ant-card-body {
+    padding: 4px 0 0;
+  }
+  .kne-form-info_SL3dC .kne-form-info_SL3dC .kne-form-info_PNnMa:not(:last-child) {
+    margin-bottom: 12px;
+    padding-bottom: 12px;
+  }
+  .kne-form-info_SL3dC .kne-form-info_SL3dC .kne-form-info_HiB5Q {
+    border: none !important;
+    background: transparent;
+  }
+  .kne-form-info_SL3dC .kne-form-info_SL3dC .kne-form-info_HiB5Q.ant-card .ant-card-head,
+  .kne-form-info_SL3dC .kne-form-info_SL3dC .kne-form-info_HiB5Q.ant-card .ant-card-body {
+    padding-left: 0;
+    padding-right: 0;
+  }
+  .kne-form-info_SL3dC .kne-form-info_SL3dC .kne-form-info_SL3dC {
+    margin-top: 8px;
+    padding: 10px 10px 10px 12px !important;
+    background: rgba(0, 0, 0, 0.02);
+    border-left-color: var(--font-color-grey-3, #d9d9d9) !important;
+  }
+}
 
 .kne-form-info_PNnMa.kne-form-info_Xkp38 > .kne-form-info_HiB5Q.ant-card > .ant-card-head {
   background: var(--primary-color-06);
@@ -163,6 +321,13 @@
   margin-bottom: 16px;
 }
 
+.kne-form-info_ZD9zd {
+  border: none !important;
+  border-radius: 0 !important;
+  background: transparent !important;
+  overflow: visible;
+}
+
 .kne-form-info_r8-bn .kne-form-info_PNnMa {
   margin-bottom: 0 !important;
 }
@@ -179,6 +344,50 @@
   padding: 16px;
   width: var(--col-width);
 }
+.kne-form-info_r8-bn.kne-form-info_LtgJz .react-form__field-label {
+  display: block;
+}
+
+.kne-form-info_5uGUh {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.kne-form-info_H8TZT {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 12px;
+  padding: 16px;
+  background: #fff;
+  border: 1px solid var(--font-color-grey-4, #f0f0f0);
+  border-radius: 8px;
+  box-sizing: border-box;
+}
+
+.kne-form-info_3Mhy7 {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.kne-form-info_-e-f1 {
+  width: 100%;
+  min-width: 0;
+}
+
+.kne-form-info_FVPV7 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding-top: 8px;
+  margin-top: 4px;
+  border-top: 1px solid var(--font-color-grey-4, #f0f0f0);
+}
 
 .kne-form-info_Uw-3T {
   border: solid 1px var(--bg-color-grey-3);
@@ -220,6 +429,17 @@
   text-wrap: nowrap;
 }
 
+.kne-form-info_03aHQ {
+  width: 100%;
+  justify-content: flex-start;
+}
+.kne-form-info_03aHQ .ant-steps-item {
+  max-width: none;
+}
+.kne-form-info_03aHQ .ant-steps-item-content {
+  text-wrap: wrap;
+}
+
 .kne-form-info_uc1HZ {
   width: 100%;
 }
@@ -227,6 +447,14 @@
 .kne-form-info_vWPQO .kne-form-info_IOdkE {
   padding: 0 100px;
 }
+@container kne-responsive (max-width: 768px) {
+  .kne-form-info_vWPQO .kne-form-info_IOdkE {
+    padding: 0;
+  }
+}
+.kne-form-info_vWPQO .kne-form-info_IOdkE.kne-form-info_03aHQ {
+  padding: 0;
+}
 
 .kne-form-info_DXskv {
   padding: 16px;

package/dist/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["style.module.scss"],"names":[],"mappings":"AAAA;EACE,aAAa;AACf;AACA;EACE,gBAAgB;EAChB,wBAAwB;EACxB,iBAAiB;AACnB;AACA;EACE,cAAc;AAChB;AACA;EACE,wBAAwB;AAC1B;AACA;EACE,wBAAwB;AAC1B;AACA;EACE,+BAA+B;AACjC;AACA;EACE,6BAA6B;EAC7B,eAAe;EACf,iBAAiB;EACjB,kBAAkB;EAClB,8BAA8B;AAChC;AACA;EACE,2BAA2B;EAC3B,qBAAqB;EACrB,iBAAiB;AACnB;AACA;EACE,iBAAiB;AACnB;AACA;;EAEE,WAAW;AACb;AACA;;EAEE,OAAO;EACP,WAAW;AACb;AACA;;EAEE,mBAAmB;EACnB,wBAAwB;AAC1B;;AAEA;EACE,iCAAiC;AACnC;;AAEA;EACE,yCAAyC;EACzC,0CAA0C;EAC1C,iBAAiB;AACnB;;AAEA;EACE,iCAAiC;AACnC;AACA;EACE,UAAU;EACV,YAAY;EACZ,YAAY;AACd;AACA;EACE,iBAAiB;EACjB,gBAAgB;AAClB;;AAEA;EACE,mCAAmC;AACrC;AACA;EACE,2BAA2B;AAC7B;AACA;EACE,gBAAgB;AAClB;AACA;EACE,uBAAuB;EACvB,UAAU;EACV,YAAY;EACZ,cAAc;AAChB;AACA;EACE,mCAAmC;EACnC,2BAA2B;EAC3B,iCAAiC;EACjC,iBAAiB;AACnB;AACA;EACE,eAAe;AACjB;AACA;EACE,oCAAoC;AACtC;AACA;EACE,YAAY;AACd;AACA;EACE,UAAU;AACZ;AACA;EACE,mBAAmB;EACnB,iDAAiD;EACjD,iBAAiB;EACjB,YAAY;EACZ,eAAe;AACjB;AACA;EACE,0BAA0B;EAC1B,uBAAuB;EACvB,qBAAqB;EACrB,kCAAkC;AACpC;AACA;EACE,uBAAuB;EACvB,mBAAmB;EACnB,eAAe;EACf,wBAAwB;AAC1B;AACA;EACE,aAAa;AACf;AACA;EACE,0CAA0C;AAC5C;AACA;EACE,aAAa;AACf;AACA;EACE,mBAAmB;AACrB;;AAEA;EACE,0CAA0C;AAC5C;;AAEA;EACE,aAAa;EACb,iBAAiB;EACjB,QAAQ;AACV;AACA;EACE,aAAa;AACf;AACA;EACE,6BAA6B;EAC7B,eAAe;EACf,iBAAiB;EACjB,YAAY;EACZ,kBAAkB;AACpB;AACA;EACE,OAAO;AACT;;AAEA;EACE,mBAAmB;AACrB;;AAEA;EACE,2BAA2B;AAC7B;AACA;EACE,aAAa;AACf;AACA;EACE,+CAA+C;AACjD;AACA;EACE,6CAA6C;AAC/C;AACA;EACE,aAAa;EACb,uBAAuB;AACzB;;AAEA;EACE,wCAAwC;AAC1C;;AAEA;EACE,iBAAiB;AACnB;;AAEA;EACE,kCAAkC;AACpC;AACA;EACE,2BAA2B;EAC3B,YAAY;EACZ,gBAAgB;EAChB,qBAAqB;EACrB,wBAAwB;EACxB,iBAAiB;EACjB,iBAAiB;AACnB;AACA;EACE,iBAAiB;AACnB;;AAEA;EACE,iBAAiB;EACjB,iBAAiB;AACnB;;AAEA;EACE,uBAAuB;EACvB,WAAW;AACb;AACA;EACE,gBAAgB;AAClB;AACA;EACE,iBAAiB;AACnB;;AAEA;EACE,WAAW;AACb;;AAEA;EACE,gBAAgB;AAClB;;AAEA;EACE,aAAa;AACf;;AAEA;EACE,gBAAgB;AAClB","file":"index.css","sourcesContent":[".form-outer :global(.multi-field-delete-label) {\n  display: none;\n}\n.form-outer:global(.react-form--inner) :global(.react-form__field-label.is-req:before) {\n  position: static;\n  transform: translateX(0);\n  margin-right: 6px;\n}\n.form-outer:global(.react-form--inner) :global(.multi-field-delete-label) {\n  display: block;\n}\n.form-outer :global .react-form__field {\n  color: var(--font-color);\n}\n.form-outer :global .react-form__field input {\n  color: var(--font-color);\n}\n.form-outer :global .react-form__field input::placeholder {\n  color: var(--font-color-grey-2);\n}\n.form-outer :global .react-form__field-label {\n  color: var(--font-color-grey);\n  font-size: 14px;\n  line-height: 20px;\n  margin-bottom: 8px;\n  font-weight: normal !important;\n}\n.form-outer :global .react-form__field-label.is-req:before {\n  color: var(--color-warning);\n  display: inline-block;\n  font-weight: bold;\n}\n.form-outer :global .react-form__field-error {\n  line-height: 14px;\n}\n.form-outer :global .ant-input-number,\n.form-outer :global .ant-input-number-group-wrapper {\n  width: 100%;\n}\n.form-outer :global .ant-picker.react-form__field-component,\n.form-outer :global .data_range_picker {\n  flex: 1;\n  width: 100%;\n}\n.form-outer :global .ant-input-number-group-addon,\n.form-outer :global .ant-input-group-addon {\n  background: #ffffff;\n  color: var(--font-color);\n}\n\n.form-info > :global(.ant-card-head .part-title) {\n  font-size: var(--font-size-large);\n}\n\n.extra-btn:global(.ant-btn) {\n  border-radius: var(--radius-default, 2px);\n  border: 1px solid var(--font-color-grey-2);\n  padding: 6px 12px;\n}\n\n.list-part > :global(.ant-card-head .part-title) {\n  font-size: var(--font-size-large);\n}\n.list-part .list-part .extra-btn {\n  padding: 0;\n  border: none;\n  min-width: 0;\n}\n.list-part:global.ant-card .ant-card-body {\n  padding: 16px 0 0;\n  border-radius: 0;\n}\n\n.list-item.is-important > .list-item-part:global(.ant-card > .ant-card-head) {\n  background: var(--primary-color-06);\n}\n.list-item.is-important > .list-item-part:global(.ant-card > .ant-card-head .ant-card-head-title .part-title) {\n  color: var(--primary-color);\n}\n.list-item.is-important .list-item-part:global(.ant-card .ant-card-head-title .part-title) {\n  font-weight: 500;\n}\n.list-item.is-important > .list-item-part:global(.ant-card) .list-part:global(.ant-card > .ant-card-head) {\n  background: transparent;\n  padding: 0;\n  border: none;\n  line-height: 1;\n}\n.list-item.is-important > .list-item-part:global(.ant-card) .list-part:global(.ant-card > .ant-card-head) :global(.part-title) {\n  background: var(--primary-color-06);\n  color: var(--primary-color);\n  font-size: var(--font-size-small);\n  font-weight: bold;\n}\n.list-item.is-important > .list-item-part:global(.ant-card) .list-part:global(.ant-card > .ant-card-body) {\n  padding: 16px 0;\n}\n.list-item.is-important > .list-item-part {\n  border-color: var(--primary-color-5);\n}\n.list-item.is-important .table-list-inner {\n  border: none;\n}\n.list-item .list-item-part {\n  padding: 0;\n}\n.list-item .list-item-part:global(.ant-card) :global(.ant-card-head) {\n  background: #f8f8f8;\n  border-bottom: 1px solid var(--font-color-grey-4);\n  line-height: 36px;\n  height: 36px;\n  padding: 0 16px;\n}\n.list-item .list-item-part:global(.ant-card) :global(.ant-card-head) .extra-btn {\n  min-width: auto !important;\n  border: none !important;\n  padding: 0 !important;\n  background: transparent !important;\n}\n.list-item .list-item-part:global(.ant-card) :global(.ant-card-head-title) :global(.part-title) {\n  background: transparent;\n  font-weight: normal;\n  font-size: 14px;\n  color: var(--font-color);\n}\n.list-item .list-item-part:global(.ant-card) :global(.ant-card-body) {\n  padding: 16px;\n}\n.list-item :global(.ant-divider) {\n  border-top-color: var(--font-color-grey-2);\n}\n.list-item :global(.ant-divider) {\n  display: none;\n}\n.list-item:not(:last-child) {\n  margin-bottom: 16px;\n}\n\n.list-item-part {\n  border: 1px solid var(--font-color-grey-4);\n}\n\n.multi-field-item {\n  display: flex;\n  flex-wrap: nowrap;\n  gap: 8px;\n}\n.multi-field-item:not(:first-child) :global .react-form__field-label {\n  display: none;\n}\n.multi-field-item .react-form__field-label {\n  color: var(--font-color-grey);\n  font-size: 14px;\n  line-height: 20px;\n  height: 20px;\n  margin-bottom: 8px;\n}\n.multi-field-item :global .react-form__field {\n  flex: 1;\n}\n\n.multi-field-add-btn {\n  margin-bottom: 16px;\n}\n\n.table-list .list-item {\n  margin-bottom: 0 !important;\n}\n.table-list :global .react-form__field-label {\n  display: none;\n}\n.table-list :global .ant-row:not(:last-child) {\n  border-bottom: solid 1px var(--bg-color-grey-3);\n}\n.table-list :global .ant-row:hover {\n  background: var(--bg-color-grey-1) !important;\n}\n.table-list :global .ant-col {\n  padding: 16px;\n  width: var(--col-width);\n}\n\n.table-list-inner {\n  border: solid 1px var(--bg-color-grey-3);\n}\n\n.table-list-field:global(.ant-col) {\n  padding-bottom: 0;\n}\n\n.table-list-header {\n  background: var(--bg-color-grey-1);\n}\n.table-list-header .is-req:before {\n  color: var(--color-warning);\n  content: \"*\";\n  position: static;\n  display: inline-block;\n  transform: translateX(0);\n  margin-right: 6px;\n  font-weight: bold;\n}\n.table-list-header :global .ant-col {\n  padding: 8px 16px;\n}\n\n.table-options {\n  flex-basis: 100px;\n  text-align: right;\n}\n\n.steps {\n  justify-content: center;\n  width: auto;\n}\n.steps :global(.ant-steps-item) {\n  max-width: 450px;\n}\n.steps :global(.ant-steps-item-content) {\n  text-wrap: nowrap;\n}\n\n.steps-form-inner {\n  width: 100%;\n}\n\n.steps-modal .steps {\n  padding: 0 100px;\n}\n\n.table-list-empty {\n  padding: 16px;\n}\n\n.extra-container {\n  min-height: 32px;\n}"]}
+{"version":3,"sources":["style.module.scss"],"names":[],"mappings":"AAAA;EACE,kBAAkB;AACpB;;AAEA;EACE,cAAc;AAChB;;AAEA;EACE,2BAA2B;EAC3B,4BAA4B;EAC5B,iCAAiC;EACjC,gCAAgC;AAClC;;AAEA;EACE,2BAA2B;EAC3B,4BAA4B;EAC5B,iCAAiC;EACjC,gCAAgC;AAClC;;AAEA;EACE,aAAa;AACf;AACA;EACE,gBAAgB;EAChB,wBAAwB;EACxB,iBAAiB;AACnB;AACA;EACE,cAAc;AAChB;AACA;EACE,wBAAwB;AAC1B;AACA;EACE,wBAAwB;AAC1B;AACA;EACE,+BAA+B;AACjC;AACA;EACE,6BAA6B;EAC7B,eAAe;EACf,iBAAiB;EACjB,kBAAkB;EAClB,8BAA8B;AAChC;AACA;EACE,2BAA2B;EAC3B,qBAAqB;EACrB,iBAAiB;AACnB;AACA;EACE,iBAAiB;AACnB;AACA;;EAEE,WAAW;AACb;AACA;;EAEE,OAAO;EACP,WAAW;AACb;AACA;;EAEE,mBAAmB;EACnB,wBAAwB;AAC1B;AACA;EACE;;;;;;;;;;;;;;IAcE,0BAA0B;EAC5B;EACA;IACE,wBAAwB;EAC1B;EACA;IACE,kBAAkB;EACpB;AACF;;AAEA;EACE,iCAAiC;AACnC;AACA;EACE;IACE,iBAAiB;IACjB,kBAAkB;EACpB;EACA;IACE,iBAAiB;EACnB;AACF;;AAEA;EACE,yCAAyC;EACzC,0CAA0C;EAC1C,iBAAiB;AACnB;;AAEA;EACE,iCAAiC;AACnC;AACA;EACE,UAAU;EACV,YAAY;EACZ,YAAY;AACd;AACA;EACE,iBAAiB;EACjB,gBAAgB;AAClB;AACA;EACE;IACE,uBAAuB;IACvB,2BAA2B;IAC3B,uBAAuB;EACzB;EACA;IACE,gBAAgB;IAChB,gBAAgB;IAChB,uBAAuB;IACvB,mBAAmB;EACrB;EACA;IACE,iBAAiB;EACnB;EACA;IACE,gBAAgB;EAClB;EACA;IACE,mBAAmB;IACnB,oBAAoB;IACpB,2DAA2D;EAC7D;EACA;IACE,uBAAuB;IACvB,2BAA2B;IAC3B,uBAAuB;EACzB;EACA;IACE,YAAY;IACZ,gBAAgB;IAChB,gBAAgB;IAChB,gBAAgB;IAChB,gBAAgB;IAChB,uBAAuB;IACvB,mBAAmB;EACrB;EACA;IACE,gBAAgB;EAClB;EACA;IACE,wBAAwB;EAC1B;EACA;IACE,mBAAmB;EACrB;EACA;IACE,uBAAuB;EACzB;EACA;IACE,uBAAuB;IACvB,gBAAgB;EAClB;EACA;IACE,qBAAqB;IACrB,iBAAiB;IACjB,mBAAmB;IACnB,mCAAmC;IACnC,2BAA2B;IAC3B,uCAAuC;IACvC,iBAAiB;EACnB;EACA;IACE,gBAAgB;IAChB,uCAAuC;IACvC,uBAAuB;IACvB,2BAA2B;IAC3B,kBAAkB;IAClB,2CAA2C;IAC3C,8EAA8E;IAC9E,sBAAsB;EACxB;EACA;IACE,gBAAgB;IAChB,uBAAuB;IACvB,mBAAmB;EACrB;EACA;IACE,yCAAyC;EAC3C;EACA;IACE,gBAAgB;EAClB;EACA;IACE,mBAAmB;IACnB,oBAAoB;EACtB;EACA;IACE,uBAAuB;IACvB,uBAAuB;EACzB;EACA;;IAEE,eAAe;IACf,gBAAgB;EAClB;EACA;IACE,eAAe;IACf,uCAAuC;IACvC,+BAA+B;IAC/B,+DAA+D;EACjE;AACF;;AAEA;EACE,mCAAmC;AACrC;AACA;EACE,2BAA2B;AAC7B;AACA;EACE,gBAAgB;AAClB;AACA;EACE,uBAAuB;EACvB,UAAU;EACV,YAAY;EACZ,cAAc;AAChB;AACA;EACE,mCAAmC;EACnC,2BAA2B;EAC3B,iCAAiC;EACjC,iBAAiB;AACnB;AACA;EACE,eAAe;AACjB;AACA;EACE,oCAAoC;AACtC;AACA;EACE,YAAY;AACd;AACA;EACE,UAAU;AACZ;AACA;EACE,mBAAmB;EACnB,iDAAiD;EACjD,iBAAiB;EACjB,YAAY;EACZ,eAAe;AACjB;AACA;EACE,0BAA0B;EAC1B,uBAAuB;EACvB,qBAAqB;EACrB,kCAAkC;AACpC;AACA;EACE,uBAAuB;EACvB,mBAAmB;EACnB,eAAe;EACf,wBAAwB;AAC1B;AACA;EACE,aAAa;AACf;AACA;EACE,0CAA0C;AAC5C;AACA;EACE,aAAa;AACf;AACA;EACE,mBAAmB;AACrB;;AAEA;EACE,0CAA0C;AAC5C;;AAEA;EACE,aAAa;EACb,iBAAiB;EACjB,QAAQ;AACV;AACA;EACE,aAAa;AACf;AACA;EACE,6BAA6B;EAC7B,eAAe;EACf,iBAAiB;EACjB,YAAY;EACZ,kBAAkB;AACpB;AACA;EACE,OAAO;AACT;;AAEA;EACE,mBAAmB;AACrB;;AAEA;EACE,uBAAuB;EACvB,2BAA2B;EAC3B,kCAAkC;EAClC,iBAAiB;AACnB;;AAEA;EACE,2BAA2B;AAC7B;AACA;EACE,aAAa;AACf;AACA;EACE,+CAA+C;AACjD;AACA;EACE,6CAA6C;AAC/C;AACA;EACE,aAAa;EACb,uBAAuB;AACzB;AACA;EACE,cAAc;AAChB;;AAEA;EACE,aAAa;EACb,sBAAsB;EACtB,SAAS;AACX;;AAEA;EACE,aAAa;EACb,sBAAsB;EACtB,oBAAoB;EACpB,SAAS;EACT,aAAa;EACb,gBAAgB;EAChB,mDAAmD;EACnD,kBAAkB;EAClB,sBAAsB;AACxB;;AAEA;EACE,OAAO;EACP,YAAY;EACZ,aAAa;EACb,sBAAsB;EACtB,SAAS;AACX;;AAEA;EACE,WAAW;EACX,YAAY;AACd;;AAEA;EACE,aAAa;EACb,mBAAmB;EACnB,uBAAuB;EACvB,WAAW;EACX,gBAAgB;EAChB,eAAe;EACf,uDAAuD;AACzD;;AAEA;EACE,wCAAwC;AAC1C;;AAEA;EACE,iBAAiB;AACnB;;AAEA;EACE,kCAAkC;AACpC;AACA;EACE,2BAA2B;EAC3B,YAAY;EACZ,gBAAgB;EAChB,qBAAqB;EACrB,wBAAwB;EACxB,iBAAiB;EACjB,iBAAiB;AACnB;AACA;EACE,iBAAiB;AACnB;;AAEA;EACE,iBAAiB;EACjB,iBAAiB;AACnB;;AAEA;EACE,uBAAuB;EACvB,WAAW;AACb;AACA;EACE,gBAAgB;AAClB;AACA;EACE,iBAAiB;AACnB;;AAEA;EACE,WAAW;EACX,2BAA2B;AAC7B;AACA;EACE,eAAe;AACjB;AACA;EACE,eAAe;AACjB;;AAEA;EACE,WAAW;AACb;;AAEA;EACE,gBAAgB;AAClB;AACA;EACE;IACE,UAAU;EACZ;AACF;AACA;EACE,UAAU;AACZ;;AAEA;EACE,aAAa;AACf;;AAEA;EACE,gBAAgB;AAClB","file":"index.css","sourcesContent":[".kne-responsive-boundary {\n  position: relative;\n}\n\n.kne-responsive-scroll {\n  overflow: auto;\n}\n\n:root {\n  --kne-viewport-width: 100vw;\n  --kne-viewport-height: 100vh;\n  --kne-viewport-inline-size: 100vw;\n  --kne-viewport-block-size: 100vh;\n}\n\n.kne-responsive-boundary {\n  --kne-viewport-width: 100vw;\n  --kne-viewport-height: 100vh;\n  --kne-viewport-inline-size: 100vw;\n  --kne-viewport-block-size: 100vh;\n}\n\n.form-outer :global(.multi-field-delete-label) {\n  display: none;\n}\n.form-outer:global(.react-form--inner) :global(.react-form__field-label.is-req:before) {\n  position: static;\n  transform: translateX(0);\n  margin-right: 6px;\n}\n.form-outer:global(.react-form--inner) :global(.multi-field-delete-label) {\n  display: block;\n}\n.form-outer :global .react-form__field {\n  color: var(--font-color);\n}\n.form-outer :global .react-form__field input {\n  color: var(--font-color);\n}\n.form-outer :global .react-form__field input::placeholder {\n  color: var(--font-color-grey-2);\n}\n.form-outer :global .react-form__field-label {\n  color: var(--font-color-grey);\n  font-size: 14px;\n  line-height: 20px;\n  margin-bottom: 8px;\n  font-weight: normal !important;\n}\n.form-outer :global .react-form__field-label.is-req:before {\n  color: var(--color-warning);\n  display: inline-block;\n  font-weight: bold;\n}\n.form-outer :global .react-form__field-error {\n  line-height: 14px;\n}\n.form-outer :global .ant-input-number,\n.form-outer :global .ant-input-number-group-wrapper {\n  width: 100%;\n}\n.form-outer :global .ant-picker.react-form__field-component,\n.form-outer :global .data_range_picker {\n  flex: 1;\n  width: 100%;\n}\n.form-outer :global .ant-input-number-group-addon,\n.form-outer :global .ant-input-group-addon {\n  background: #ffffff;\n  color: var(--font-color);\n}\n@container kne-responsive (max-width: 768px) {\n  .form-outer :global .ant-input,\n  .form-outer :global .ant-input-affix-wrapper,\n  .form-outer :global .ant-input-number,\n  .form-outer :global .ant-input-number-input,\n  .form-outer :global .ant-input-textarea textarea,\n  .form-outer :global textarea.ant-input,\n  .form-outer :global .ant-select-selector,\n  .form-outer :global .ant-select-selection-search-input,\n  .form-outer :global .ant-picker,\n  .form-outer :global .ant-picker-input > input,\n  .form-outer :global .ant-mentions,\n  .form-outer :global .ant-mentions textarea,\n  .form-outer :global .react-form__field input,\n  .form-outer :global .react-form__field textarea {\n    font-size: 16px !important;\n  }\n  .form-outer :global .ant-row {\n    row-gap: 12px !important;\n  }\n  .form-outer :global .react-form__field-label {\n    margin-bottom: 6px;\n  }\n}\n\n.form-info > :global(.ant-card-head .part-title) {\n  font-size: var(--font-size-large);\n}\n@container kne-responsive (max-width: 768px) {\n  .form-info:global(.ant-card) > :global(.ant-card-head) {\n    padding-inline: 0;\n    margin-bottom: 4px;\n  }\n  .form-info:global(.ant-card) > :global(.ant-card-body) {\n    padding: 12px 0 0;\n  }\n}\n\n.extra-btn:global(.ant-btn) {\n  border-radius: var(--radius-default, 2px);\n  border: 1px solid var(--font-color-grey-2);\n  padding: 6px 12px;\n}\n\n.list-part > :global(.ant-card-head .part-title) {\n  font-size: var(--font-size-large);\n}\n.list-part .list-part .extra-btn {\n  padding: 0;\n  border: none;\n  min-width: 0;\n}\n.list-part:global.ant-card .ant-card-body {\n  padding: 16px 0 0;\n  border-radius: 0;\n}\n@container kne-responsive (max-width: 768px) {\n  .list-part:global(.ant-card) {\n    border: none !important;\n    box-shadow: none !important;\n    background: transparent;\n  }\n  .list-part:global(.ant-card) > :global(.ant-card-head) {\n    padding: 0 0 4px;\n    min-height: auto;\n    background: transparent;\n    border-bottom: none;\n  }\n  .list-part:global(.ant-card) > :global(.ant-card-body) {\n    padding: 12px 0 0;\n  }\n  .list-part .list-item {\n    margin-bottom: 0;\n  }\n  .list-part .list-item:not(:last-child) {\n    margin-bottom: 16px;\n    padding-bottom: 16px;\n    border-bottom: 1px dashed var(--font-color-grey-4, #f0f0f0);\n  }\n  .list-part .list-item .list-item-part {\n    border: none !important;\n    box-shadow: none !important;\n    background: transparent;\n  }\n  .list-part .list-item .list-item-part:global(.ant-card) :global(.ant-card-head) {\n    height: auto;\n    min-height: auto;\n    line-height: 1.5;\n    padding: 0 0 8px;\n    margin-bottom: 0;\n    background: transparent;\n    border-bottom: none;\n  }\n  .list-part .list-item .list-item-part:global(.ant-card) :global(.ant-card-body) {\n    padding: 4px 0 0;\n  }\n  .list-part .list-item .list-item-part:global(.ant-card) :global(.ant-row) {\n    row-gap: 12px !important;\n  }\n  .list-part .list-item .list-item-part:global(.ant-card) :global(.ant-col) {\n    padding-bottom: 4px;\n  }\n  .list-part .list-item.is-important > .list-item-part {\n    border: none !important;\n  }\n  .list-part .list-item.is-important > .list-item-part:global(.ant-card > .ant-card-head) {\n    background: transparent;\n    padding: 0 0 8px;\n  }\n  .list-part .list-item.is-important > .list-item-part:global(.ant-card > .ant-card-head) :global(.part-title) {\n    display: inline-block;\n    padding: 4px 10px;\n    border-radius: 12px;\n    background: var(--primary-color-06);\n    color: var(--primary-color);\n    font-size: var(--font-size-small, 12px);\n    line-height: 16px;\n  }\n  .list-part .list-part {\n    margin: 12px 0 0;\n    padding: 12px 12px 12px 14px !important;\n    border: none !important;\n    box-shadow: none !important;\n    border-radius: 8px;\n    background: var(--bg-color-grey-1, #fafafa);\n    border-left: 3px solid var(--primary-color-2, var(--primary-color)) !important;\n    box-sizing: border-box;\n  }\n  .list-part .list-part:global(.ant-card) > :global(.ant-card-head) {\n    padding: 0 0 8px;\n    background: transparent;\n    border-bottom: none;\n  }\n  .list-part .list-part:global(.ant-card) > :global(.ant-card-head) :global(.part-title) {\n    font-size: var(--font-size-default, 14px);\n  }\n  .list-part .list-part:global(.ant-card) > :global(.ant-card-body) {\n    padding: 4px 0 0;\n  }\n  .list-part .list-part .list-item:not(:last-child) {\n    margin-bottom: 12px;\n    padding-bottom: 12px;\n  }\n  .list-part .list-part .list-item-part {\n    border: none !important;\n    background: transparent;\n  }\n  .list-part .list-part .list-item-part:global(.ant-card) :global(.ant-card-head),\n  .list-part .list-part .list-item-part:global(.ant-card) :global(.ant-card-body) {\n    padding-left: 0;\n    padding-right: 0;\n  }\n  .list-part .list-part .list-part {\n    margin-top: 8px;\n    padding: 10px 10px 10px 12px !important;\n    background: rgba(0, 0, 0, 0.02);\n    border-left-color: var(--font-color-grey-3, #d9d9d9) !important;\n  }\n}\n\n.list-item.is-important > .list-item-part:global(.ant-card > .ant-card-head) {\n  background: var(--primary-color-06);\n}\n.list-item.is-important > .list-item-part:global(.ant-card > .ant-card-head .ant-card-head-title .part-title) {\n  color: var(--primary-color);\n}\n.list-item.is-important .list-item-part:global(.ant-card .ant-card-head-title .part-title) {\n  font-weight: 500;\n}\n.list-item.is-important > .list-item-part:global(.ant-card) .list-part:global(.ant-card > .ant-card-head) {\n  background: transparent;\n  padding: 0;\n  border: none;\n  line-height: 1;\n}\n.list-item.is-important > .list-item-part:global(.ant-card) .list-part:global(.ant-card > .ant-card-head) :global(.part-title) {\n  background: var(--primary-color-06);\n  color: var(--primary-color);\n  font-size: var(--font-size-small);\n  font-weight: bold;\n}\n.list-item.is-important > .list-item-part:global(.ant-card) .list-part:global(.ant-card > .ant-card-body) {\n  padding: 16px 0;\n}\n.list-item.is-important > .list-item-part {\n  border-color: var(--primary-color-5);\n}\n.list-item.is-important .table-list-inner {\n  border: none;\n}\n.list-item .list-item-part {\n  padding: 0;\n}\n.list-item .list-item-part:global(.ant-card) :global(.ant-card-head) {\n  background: #f8f8f8;\n  border-bottom: 1px solid var(--font-color-grey-4);\n  line-height: 36px;\n  height: 36px;\n  padding: 0 16px;\n}\n.list-item .list-item-part:global(.ant-card) :global(.ant-card-head) .extra-btn {\n  min-width: auto !important;\n  border: none !important;\n  padding: 0 !important;\n  background: transparent !important;\n}\n.list-item .list-item-part:global(.ant-card) :global(.ant-card-head-title) :global(.part-title) {\n  background: transparent;\n  font-weight: normal;\n  font-size: 14px;\n  color: var(--font-color);\n}\n.list-item .list-item-part:global(.ant-card) :global(.ant-card-body) {\n  padding: 16px;\n}\n.list-item :global(.ant-divider) {\n  border-top-color: var(--font-color-grey-2);\n}\n.list-item :global(.ant-divider) {\n  display: none;\n}\n.list-item:not(:last-child) {\n  margin-bottom: 16px;\n}\n\n.list-item-part {\n  border: 1px solid var(--font-color-grey-4);\n}\n\n.multi-field-item {\n  display: flex;\n  flex-wrap: nowrap;\n  gap: 8px;\n}\n.multi-field-item:not(:first-child) :global .react-form__field-label {\n  display: none;\n}\n.multi-field-item .react-form__field-label {\n  color: var(--font-color-grey);\n  font-size: 14px;\n  line-height: 20px;\n  height: 20px;\n  margin-bottom: 8px;\n}\n.multi-field-item :global .react-form__field {\n  flex: 1;\n}\n\n.multi-field-add-btn {\n  margin-bottom: 16px;\n}\n\n.table-list-view {\n  border: none !important;\n  border-radius: 0 !important;\n  background: transparent !important;\n  overflow: visible;\n}\n\n.table-list .list-item {\n  margin-bottom: 0 !important;\n}\n.table-list :global .react-form__field-label {\n  display: none;\n}\n.table-list :global .ant-row:not(:last-child) {\n  border-bottom: solid 1px var(--bg-color-grey-3);\n}\n.table-list :global .ant-row:hover {\n  background: var(--bg-color-grey-1) !important;\n}\n.table-list :global .ant-col {\n  padding: 16px;\n  width: var(--col-width);\n}\n.table-list.is-mobile :global .react-form__field-label {\n  display: block;\n}\n\n.table-list-mobile-list {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n.table-list-mobile-card {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  gap: 12px;\n  padding: 16px;\n  background: #fff;\n  border: 1px solid var(--font-color-grey-4, #f0f0f0);\n  border-radius: 8px;\n  box-sizing: border-box;\n}\n\n.table-list-mobile-card-body {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.table-list-mobile-field {\n  width: 100%;\n  min-width: 0;\n}\n\n.table-list-mobile-actions {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  padding-top: 8px;\n  margin-top: 4px;\n  border-top: 1px solid var(--font-color-grey-4, #f0f0f0);\n}\n\n.table-list-inner {\n  border: solid 1px var(--bg-color-grey-3);\n}\n\n.table-list-field:global(.ant-col) {\n  padding-bottom: 0;\n}\n\n.table-list-header {\n  background: var(--bg-color-grey-1);\n}\n.table-list-header .is-req:before {\n  color: var(--color-warning);\n  content: \"*\";\n  position: static;\n  display: inline-block;\n  transform: translateX(0);\n  margin-right: 6px;\n  font-weight: bold;\n}\n.table-list-header :global .ant-col {\n  padding: 8px 16px;\n}\n\n.table-options {\n  flex-basis: 100px;\n  text-align: right;\n}\n\n.steps {\n  justify-content: center;\n  width: auto;\n}\n.steps :global(.ant-steps-item) {\n  max-width: 450px;\n}\n.steps :global(.ant-steps-item-content) {\n  text-wrap: nowrap;\n}\n\n.steps-vertical {\n  width: 100%;\n  justify-content: flex-start;\n}\n.steps-vertical :global(.ant-steps-item) {\n  max-width: none;\n}\n.steps-vertical :global(.ant-steps-item-content) {\n  text-wrap: wrap;\n}\n\n.steps-form-inner {\n  width: 100%;\n}\n\n.steps-modal .steps {\n  padding: 0 100px;\n}\n@container kne-responsive (max-width: 768px) {\n  .steps-modal .steps {\n    padding: 0;\n  }\n}\n.steps-modal .steps.steps-vertical {\n  padding: 0;\n}\n\n.table-list-empty {\n  padding: 16px;\n}\n\n.extra-container {\n  min-height: 32px;\n}"]}

package/dist/index.d.ts

@@ -104,6 +104,8 @@ export interface TableListProps {
   list?: ReactNode[];
   empty?: ReactNode;
   itemTitle?: ({ index }: { index: number }) => string;
+  /** 移动端适配，同 @kne/table-view：true 默认卡片、function 自定义、string 走 preset */
+  renderMobile?: boolean | string | ((props: any) => ReactNode);
 }
 
 export interface MultiFieldProps {