diff --git a/src/ColumnList/ColumnItem.tsx b/src/ColumnList/ColumnItem.tsx
index 3a968457..b5a4f917 100644
--- a/src/ColumnList/ColumnItem.tsx
+++ b/src/ColumnList/ColumnItem.tsx
@@ -2,6 +2,7 @@ import {
   ColumnItemList,
   DeleteAction,
   HandleAction,
+  SortableItem,
   useSortableList,
 } from '@ant-design/pro-editor';
 import { createStyles } from 'antd-style';
@@ -68,7 +69,7 @@ const useStyle = createStyles(({ css, cx }, prefixCls) => {
   };
 });
 
-interface ItemRenderProps<T = any> {
+interface ItemRenderProps<T extends SortableItem = SortableItem> {
   columns: ColumnItemList<T>;
   item: T;
   index: number;
@@ -98,6 +99,7 @@ const ColumnItem = memo<ItemRenderProps>(
             const props = {
               dataIndex: col.dataIndex,
               value: item[col.dataIndex],
+              id: item.id,
               index,
               prefixCls,
               style,
diff --git a/src/ColumnList/renderItem/Input.tsx b/src/ColumnList/renderItem/Input.tsx
index d2d005df..f243bebc 100644
--- a/src/ColumnList/renderItem/Input.tsx
+++ b/src/ColumnList/renderItem/Input.tsx
@@ -1,8 +1,8 @@
-import { useSortableList } from '@ant-design/pro-editor';
+import { genUniqueId, useSortableList } from '@ant-design/pro-editor';
+import { UniqueIdentifier } from '@dnd-kit/core';
 import { Input } from 'antd';
 import { createStyles } from 'antd-style';
 import { CSSProperties, memo, useRef, useState } from 'react';
-import { genUniqueID } from '../utils';
 
 const useStyle = createStyles(({ css, cx }, prefixCls) => {
   const prefix = `${prefixCls}-content`;
@@ -20,13 +20,14 @@ interface ItemRenderProps {
   dataIndex: string;
   value: string;
   index: number;
+  id: UniqueIdentifier;
   prefixCls: string;
   style: CSSProperties;
   placeholder?: string;
 }
 
 const ControlInput = memo<ItemRenderProps>(
-  ({ dataIndex, placeholder, value, index, prefixCls, style }) => {
+  ({ dataIndex, placeholder, value, index, prefixCls, style, id }) => {
     const instance = useSortableList();
 
     const [innerValue, setInnerValue] = useState(value);
@@ -39,18 +40,19 @@ const ControlInput = memo<ItemRenderProps>(
       setChanged(false);
     };
 
-    const customListId = (index) => `column-list-index-${index}`;
+    const customListId = (index, id) => `column-list-${index}-${id}`;
 
     const handleNextFocus = () => {
       const value = instance.getValue() || [];
       // 如果是最后一个节点，按下回车后，会自动添加一个新的节点
       if (index + 1 === value.length) {
-        // TODO：create 项时 新建项的预填充内容
-        instance.addItem({ id: genUniqueID(value, value.length), [dataIndex]: '' });
+        instance.addItem({ id: genUniqueId(value.length.toString()), [dataIndex]: '' });
       }
 
       setTimeout(() => {
-        const nextNodeEl = document.getElementById(customListId(index + 1));
+        const nextNodeEl = document.getElementById(
+          customListId(index + 1, instance.getIdByIndex(index + 1)),
+        );
         nextNodeEl?.focus();
       }, 200);
     };
@@ -60,7 +62,7 @@ const ControlInput = memo<ItemRenderProps>(
         size={'small'}
         value={innerValue}
         style={style}
-        id={customListId(index)}
+        id={customListId(index, id)}
         onCompositionStart={() => {
           shouldChange.current = false;
         }}
diff --git a/src/SortableList/components/Item/index.tsx b/src/SortableList/components/Item/index.tsx
index b76426d9..09c7c504 100644
--- a/src/SortableList/components/Item/index.tsx
+++ b/src/SortableList/components/Item/index.tsx
@@ -125,7 +125,7 @@ const Item = memo(
                   </Flexbox>
                 )}
                 <Flexbox
-                  className={classNames(styles.actions, styles.actionsRight)}
+                  className={classNames(styles.actions)}
                   direction={'horizontal'}
                   align="center"
                 >
diff --git a/src/SortableList/components/Item/style.ts b/src/SortableList/components/Item/style.ts
index f57f2052..58375cfd 100644
--- a/src/SortableList/components/Item/style.ts
+++ b/src/SortableList/components/Item/style.ts
@@ -150,19 +150,5 @@ export const useStyle = createStyles(({ css, cx, token }, prefixCls: string) =>
         }
       `,
     ),
-    actionsRight: cx(
-      `${prefix}-actions-right`,
-      css`
-        position: absolute;
-        top: 1px;
-        right: 1px;
-        align-self: flex-end;
-        overflow: hidden;
-        border-radius: 1px;
-        // 采用背景模糊来解决多种背景色下覆盖内容的问题 TODO：FireFox 兼容
-        backdrop-filter: blur(5px);
-        //background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, @bg-2 10%, @bg-2 100%);
-      `,
-    ),
   };
 });
diff --git a/src/SortableList/demos/_ItemRender.tsx b/src/SortableList/demos/_ItemRender.tsx
index 5b6b7f32..d36c9554 100644
--- a/src/SortableList/demos/_ItemRender.tsx
+++ b/src/SortableList/demos/_ItemRender.tsx
@@ -1,12 +1,12 @@
 import { useSortableList } from '@ant-design/pro-editor';
 import { Input, Select } from 'antd';
-import { useState } from 'react';
+import { memo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import { ItemRenderProps, fieldStyle, tableColumnValueOptions } from './data';
 
 export const randomIndex = () => Math.random() * 10000;
 
-const ItemRender = ({ item, index, compact = false }: ItemRenderProps) => {
+const ItemRender = memo(({ item, index, compact = false }: ItemRenderProps) => {
   const instance = useSortableList();
   const [title, setTitle] = useState(item?.title);
   const [changed, setChanged] = useState(false);
@@ -63,6 +63,6 @@ const ItemRender = ({ item, index, compact = false }: ItemRenderProps) => {
       </div>
     </Flexbox>
   );
-};
+});
 
 export default ItemRender;
diff --git a/src/SortableList/demos/provider.tsx b/src/SortableList/demos/provider.tsx
index d51d9106..240b6a05 100644
--- a/src/SortableList/demos/provider.tsx
+++ b/src/SortableList/demos/provider.tsx
@@ -1,8 +1,13 @@
+/**
+ * title: Provider
+ * description: 为了方便用户在更高的上下文中通过 `useSortableList()` hook 获得组件实例，我们提供了 `SortableListProvider` 由用户控制 Provider 的作用范围。
+ * compact: true
+ */
 import { SortableList, SortableListProvider, useSortableList } from '@ant-design/pro-editor';
 import { Button, message } from 'antd';
+import { useTheme } from 'antd-style';
 import { useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
-
 import ItemRender from './_ItemRender';
 import { INIT_VALUES, SchemaItem } from './data';
 
@@ -10,32 +15,42 @@ const App = () => {
   const [listData, setListData] = useState<SchemaItem[]>(INIT_VALUES);
 
   return (
-    <Flexbox padding={24}>
-      <SortableList<SchemaItem>
-        value={listData}
-        onChange={(data) => {
-          console.log('data', data);
-          setListData(data);
-        }}
-        renderContent={(item, index) => <ItemRender item={item} index={index} />}
-        SHOW_STORE_IN_DEVTOOLS // 用于显示 Redux Devtools
-      />
-    </Flexbox>
+    <SortableList<SchemaItem>
+      value={listData}
+      onChange={(data) => {
+        console.log('data', data);
+        setListData(data);
+      }}
+      renderContent={(item, index) => <ItemRender item={item} index={index} />}
+      SHOW_STORE_IN_DEVTOOLS // 用于显示 Redux Devtools
+    />
   );
 };
 
 const Extra = () => {
   const instance = useSortableList();
   return (
-    <div>
-      <Button onClick={() => message.info(JSON.stringify(instance.getValue()))}>获取值</Button>
-    </div>
+    <Button
+      block
+      size="small"
+      type="primary"
+      style={{ marginBottom: 8 }}
+      onClick={() => message.info(JSON.stringify(instance.getValue()))}
+    >
+      获取值
+    </Button>
   );
 };
 
-export default () => (
-  <SortableListProvider>
-    <Extra />
-    <App />
-  </SortableListProvider>
-);
+export default () => {
+  const token = useTheme();
+
+  return (
+    <SortableListProvider>
+      <Flexbox padding={24} style={{ background: token.colorBgLayout }}>
+        <Extra />
+        <App />
+      </Flexbox>
+    </SortableListProvider>
+  );
+};
diff --git a/src/SortableList/demos/ref.tsx b/src/SortableList/demos/ref.tsx
index 3e9572e3..47af51cb 100644
--- a/src/SortableList/demos/ref.tsx
+++ b/src/SortableList/demos/ref.tsx
@@ -1,9 +1,11 @@
 /**
  * title: 使用 ref 获得实例
  * description: 提供传统的 `ref` 方式关联组件实例，可实现自定义功能，如将添加按钮渲染到组件右上方。
+ * compact: true
  */
 import { PlusCircleFilled } from '@ant-design/icons';
 import { ActionIcon, SortableList, SortableListRef } from '@ant-design/pro-editor';
+import { useTheme } from 'antd-style';
 import { useRef, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import ItemRender from './_ItemRender';
@@ -17,9 +19,10 @@ export const randomIndex = () => Math.random() * 10000;
 export default () => {
   const [listData, setListData] = useState<SchemaItem[]>(INIT_VALUES);
   const ref = useRef<SortableListRef<SchemaItem>>(null);
+  const token = useTheme();
 
   return (
-    <div style={{ width: 340, padding: '0 12px' }}>
+    <Flexbox padding={24} style={{ background: token.colorBgLayout }}>
       <Flexbox horizontal align={'center'} distribution={'space-between'}>
         <div>列配置项</div>
         <ActionIcon
@@ -42,6 +45,6 @@ export default () => {
         }}
         renderContent={(item, index) => <ItemRender item={item} index={index} />}
       />
-    </div>
+    </Flexbox>
   );
 };
diff --git a/src/SortableList/demos/renderContent.tsx b/src/SortableList/demos/renderContent.tsx
index 320663f0..54080280 100644
--- a/src/SortableList/demos/renderContent.tsx
+++ b/src/SortableList/demos/renderContent.tsx
@@ -1,14 +1,18 @@
 /**
  * title: 自定义列表项内容
  * description: 提供 `renderContent` 由用户自定义除拖拽等操作外的列表项内容。
+ * compact: true
  */
 import { SortableList } from '@ant-design/pro-editor';
+import { useTheme } from 'antd-style';
+import { Flexbox } from 'react-layout-kit';
 import ItemRender from './_ItemRender';
 import { INIT_VALUES, SchemaItem } from './data';
 
 export default () => {
+  const token = useTheme();
   return (
-    <div style={{ width: 340, padding: '0 12px' }}>
+    <Flexbox padding={24} style={{ background: token.colorBgLayout }}>
       <SortableList<SchemaItem>
         initialValues={INIT_VALUES}
         onChange={(data, event) => {
@@ -16,6 +20,6 @@ export default () => {
         }}
         renderContent={(item, index) => <ItemRender item={item} index={index} />}
       />
-    </div>
+    </Flexbox>
   );
 };
diff --git a/src/SortableList/demos/renderItem.tsx b/src/SortableList/demos/renderItem.tsx
index e7bb907f..60a86a10 100644
--- a/src/SortableList/demos/renderItem.tsx
+++ b/src/SortableList/demos/renderItem.tsx
@@ -1,6 +1,7 @@
 /**
  * title: 自定义排序项
  * description: 通过 `renderItem` 可以自定义每个排序项，相比于 `renderContent` 提供的自由度更大
+ * compact: true
  */
 import { SortableList, SortableListRef } from '@ant-design/pro-editor';
 import { Badge, Button } from 'antd';
diff --git a/src/SortableList/demos/useSortableList.tsx b/src/SortableList/demos/useSortableList.tsx
index 67879322..6ba55a21 100644
--- a/src/SortableList/demos/useSortableList.tsx
+++ b/src/SortableList/demos/useSortableList.tsx
@@ -1,18 +1,21 @@
 /**
  * title: useSortableList
  * description: 在 Item 子组件中使用 `useSortableList()` hook，可以获得当前组件实例
+ * compact: true
  */
 import { SortableList } from '@ant-design/pro-editor';
+import { useTheme } from 'antd-style';
 import { useState } from 'react';
-
+import { Flexbox } from 'react-layout-kit';
 import ItemRender from './_ItemRender';
 import { INIT_VALUES, SchemaItem } from './data';
 
 export default () => {
   const [listData, setListData] = useState<SchemaItem[]>(INIT_VALUES);
+  const token = useTheme();
 
   return (
-    <div style={{ width: 340, padding: '0 12px' }}>
+    <Flexbox padding={24} style={{ background: token.colorBgLayout }}>
       <SortableList<SchemaItem>
         value={listData}
         onChange={(data) => {
@@ -21,6 +24,6 @@ export default () => {
         }}
         renderContent={(item, index) => <ItemRender item={item} index={index} />}
       />
-    </div>
+    </Flexbox>
   );
 };
diff --git a/src/SortableList/features/DragOverlay.tsx b/src/SortableList/features/DragOverlay.tsx
index 83b6c0b6..2bd4c32f 100644
--- a/src/SortableList/features/DragOverlay.tsx
+++ b/src/SortableList/features/DragOverlay.tsx
@@ -45,6 +45,7 @@ const Overlay: FC<OverlayProps> = ({ prefixCls }) => {
         <Item
           id={activeId}
           dragOverlay
+          index={activeIndex}
           item={items[activeIndex]}
           prefixCls={prefixCls}
           renderItem={renderItem}
diff --git a/src/SortableList/hooks/useSortableList.ts b/src/SortableList/hooks/useSortableList.ts
index ceebc0ee..5ee3c92c 100644
--- a/src/SortableList/hooks/useSortableList.ts
+++ b/src/SortableList/hooks/useSortableList.ts
@@ -11,6 +11,12 @@ export interface SortableListInstance {
    * @returns 当前激活节点的 id
    */
   getActiveId: () => UniqueIdentifier;
+  /**
+   * 根据索引获取 id
+   * @param index
+   * @returns
+   */
+  getIdByIndex: (index: number) => UniqueIdentifier;
   /**
    * 获取当前树的数据
    * @returns 当前树的数据
@@ -42,6 +48,10 @@ export const useSortableList = (): SortableListInstance => {
   const storeApi = useStoreApi();
 
   const getActiveId = useMemoizedFn(() => storeApi.getState().activeId);
+  const getIdByIndex = useMemoizedFn((index?: number) => {
+    const indexId = storeApi.getState().value?.[index]?.id || null;
+    return indexId;
+  });
   const getValue = useMemoizedFn(() => storeApi.getState().value);
   const addItem = (item?: SortableItem, index?: number) =>
     storeApi.getState().dispatchListData({ type: 'addItem', item, index });
@@ -55,6 +65,7 @@ export const useSortableList = (): SortableListInstance => {
     getValue,
     addItem,
     removeItem,
+    getIdByIndex,
     updateItem,
   };
 };
diff --git a/src/SortableList/index.md b/src/SortableList/index.md
index 92a6da27..ce717d3d 100644
--- a/src/SortableList/index.md
+++ b/src/SortableList/index.md
@@ -14,7 +14,7 @@ demo:
 
 针对可排序列表场景提供基础底层封装，可在其上进行进一步自定义，参考 `ColumnList`。
 
-## 基础使用
+## 使用方式
 
 <code src="./demos/Basic.tsx" ></code>
 <code src="./demos/controlled.tsx" ></code>
@@ -22,18 +22,8 @@ demo:
 <code src="./demos/renderItem.tsx" ></code>
 <code src="./demos/renderContent.tsx" ></code>
 <code src="./demos/creatorButtonProps.tsx" ></code>
-
-## 程序化控制
-
-使用 `ref` 或者 `useSortableList()` hook 均可获取组件实例，进而自行控制状态变更。
-
 <code src="./demos/ref.tsx" ></code>
 <code src="./demos/useSortableList.tsx" ></code>
-
-### Provider
-
-为了方便用户在更高的上下文中通过 `useSortableList()` hook 获得组件实例，我们提供了 `SortableListProvider` 由用户控制 Provider 的作用范围。
-
 <code src="./demos/provider.tsx" ></code>
 
 ## API
diff --git a/tests/__snapshots__/demo.test.tsx.snap b/tests/__snapshots__/demo.test.tsx.snap
index 8f10b33f..005a8d53 100644
--- a/tests/__snapshots__/demo.test.tsx.snap
+++ b/tests/__snapshots__/demo.test.tsx.snap
@@ -2682,7 +2682,7 @@ exports[`<ColumnList /> > renders actions.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-13"
-                id="column-list-index-0"
+                id="column-list-0-index"
                 placeholder="请输入"
                 style="flex: 1; max-width: 33.333333333333336%;"
                 type="text"
@@ -2924,7 +2924,7 @@ exports[`<ColumnList /> > renders actions.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-13"
-                id="column-list-index-1"
+                id="column-list-1-name"
                 placeholder="请输入"
                 style="flex: 1; max-width: 33.333333333333336%;"
                 type="text"
@@ -3166,7 +3166,7 @@ exports[`<ColumnList /> > renders actions.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-13"
-                id="column-list-index-2"
+                id="column-list-2-authCompany"
                 placeholder="请输入"
                 style="flex: 1; max-width: 33.333333333333336%;"
                 type="text"
@@ -3777,7 +3777,7 @@ exports[`<ColumnList /> > renders column.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-14"
-                id="column-list-index-0"
+                id="column-list-0-orderId"
                 placeholder="请输入"
                 style="flex: 1; max-width: 25%;"
                 type="text"
@@ -4007,7 +4007,7 @@ exports[`<ColumnList /> > renders column.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-14"
-                id="column-list-index-1"
+                id="column-list-1-orderNumber"
                 placeholder="请输入"
                 style="flex: 1; max-width: 25%;"
                 type="text"
@@ -4237,7 +4237,7 @@ exports[`<ColumnList /> > renders column.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-14"
-                id="column-list-index-2"
+                id="column-list-2-orderMoney"
                 placeholder="请输入"
                 style="flex: 1; max-width: 25%;"
                 type="text"
@@ -4467,7 +4467,7 @@ exports[`<ColumnList /> > renders column.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-14"
-                id="column-list-index-3"
+                id="column-list-3-productName"
                 placeholder="请输入"
                 style="flex: 1; max-width: 25%;"
                 type="text"
@@ -4697,7 +4697,7 @@ exports[`<ColumnList /> > renders column.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-14"
-                id="column-list-index-4"
+                id="column-list-4-productComment"
                 placeholder="请输入"
                 style="flex: 1; max-width: 25%;"
                 type="text"
@@ -4927,7 +4927,7 @@ exports[`<ColumnList /> > renders column.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-14"
-                id="column-list-index-5"
+                id="column-list-5-orderStatus"
                 placeholder="请输入"
                 style="flex: 1; max-width: 25%;"
                 type="text"
@@ -5157,7 +5157,7 @@ exports[`<ColumnList /> > renders column.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-14"
-                id="column-list-index-6"
+                id="column-list-6-orderCreated"
                 placeholder="请输入"
                 style="flex: 1; max-width: 25%;"
                 type="text"
@@ -5387,7 +5387,7 @@ exports[`<ColumnList /> > renders column.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-14"
-                id="column-list-index-7"
+                id="column-list-7-detailPic"
                 placeholder="请输入"
                 style="flex: 1; max-width: 25%;"
                 type="text"
@@ -5617,7 +5617,7 @@ exports[`<ColumnList /> > renders column.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-14"
-                id="column-list-index-8"
+                id="column-list-8-closeReason"
                 placeholder="请输入"
                 style="flex: 1; max-width: 25%;"
                 type="text"
@@ -5847,7 +5847,7 @@ exports[`<ColumnList /> > renders column.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-14"
-                id="column-list-index-9"
+                id="column-list-9-closeType"
                 placeholder="请输入"
                 style="flex: 1; max-width: 25%;"
                 type="text"
@@ -6441,7 +6441,7 @@ exports[`<ColumnList /> > renders controlled.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-13"
-                id="column-list-index-0"
+                id="column-list-0-index"
                 placeholder="请输入"
                 style="flex: 1; max-width: 33.333333333333336%;"
                 type="text"
@@ -6654,7 +6654,7 @@ exports[`<ColumnList /> > renders controlled.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-13"
-                id="column-list-index-1"
+                id="column-list-1-name"
                 placeholder="请输入"
                 style="flex: 1; max-width: 33.333333333333336%;"
                 type="text"
@@ -6867,7 +6867,7 @@ exports[`<ColumnList /> > renders controlled.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-13"
-                id="column-list-index-2"
+                id="column-list-2-authCompany"
                 placeholder="请输入"
                 style="flex: 1; max-width: 33.333333333333336%;"
                 type="text"
@@ -7478,7 +7478,7 @@ exports[`<ColumnList /> > renders creatorButtonProps.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-14"
-                id="column-list-index-0"
+                id="column-list-0-orderId"
                 placeholder="请输入"
                 style="flex: 1; max-width: 33.333333333333336%;"
                 type="text"
@@ -7691,7 +7691,7 @@ exports[`<ColumnList /> > renders creatorButtonProps.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-14"
-                id="column-list-index-1"
+                id="column-list-1-orderNumber"
                 placeholder="请输入"
                 style="flex: 1; max-width: 33.333333333333336%;"
                 type="text"
@@ -7904,7 +7904,7 @@ exports[`<ColumnList /> > renders creatorButtonProps.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-14"
-                id="column-list-index-2"
+                id="column-list-2-orderMoney"
                 placeholder="请输入"
                 style="flex: 1; max-width: 33.333333333333336%;"
                 type="text"
@@ -8117,7 +8117,7 @@ exports[`<ColumnList /> > renders creatorButtonProps.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-14"
-                id="column-list-index-3"
+                id="column-list-3-productName"
                 placeholder="请输入"
                 style="flex: 1; max-width: 33.333333333333336%;"
                 type="text"
@@ -8330,7 +8330,7 @@ exports[`<ColumnList /> > renders creatorButtonProps.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-14"
-                id="column-list-index-4"
+                id="column-list-4-productComment"
                 placeholder="请输入"
                 style="flex: 1; max-width: 33.333333333333336%;"
                 type="text"
@@ -8543,7 +8543,7 @@ exports[`<ColumnList /> > renders creatorButtonProps.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-14"
-                id="column-list-index-5"
+                id="column-list-5-orderStatus"
                 placeholder="请输入"
                 style="flex: 1; max-width: 33.333333333333336%;"
                 type="text"
@@ -8756,7 +8756,7 @@ exports[`<ColumnList /> > renders creatorButtonProps.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-14"
-                id="column-list-index-6"
+                id="column-list-6-orderCreated"
                 placeholder="请输入"
                 style="flex: 1; max-width: 33.333333333333336%;"
                 type="text"
@@ -8969,7 +8969,7 @@ exports[`<ColumnList /> > renders creatorButtonProps.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-14"
-                id="column-list-index-7"
+                id="column-list-7-detailPic"
                 placeholder="请输入"
                 style="flex: 1; max-width: 33.333333333333336%;"
                 type="text"
@@ -9182,7 +9182,7 @@ exports[`<ColumnList /> > renders creatorButtonProps.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-14"
-                id="column-list-index-8"
+                id="column-list-8-closeReason"
                 placeholder="请输入"
                 style="flex: 1; max-width: 33.333333333333336%;"
                 type="text"
@@ -9395,7 +9395,7 @@ exports[`<ColumnList /> > renders creatorButtonProps.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-14"
-                id="column-list-index-9"
+                id="column-list-9-closeType"
                 placeholder="请输入"
                 style="flex: 1; max-width: 33.333333333333336%;"
                 type="text"
@@ -10118,7 +10118,7 @@ exports[`<ColumnList /> > renders normal.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-12"
-                id="column-list-index-0"
+                id="column-list-0-index"
                 placeholder="请输入"
                 style="flex: 1; max-width: 50%;"
                 type="text"
@@ -10126,7 +10126,7 @@ exports[`<ColumnList /> > renders normal.tsx correctly 1`] = `
               />
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-12"
-                id="column-list-index-0"
+                id="column-list-0-index"
                 placeholder="请输入"
                 style="flex: 1; max-width: 50%;"
                 type="text"
@@ -10215,7 +10215,7 @@ exports[`<ColumnList /> > renders normal.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-12"
-                id="column-list-index-1"
+                id="column-list-1-name"
                 placeholder="请输入"
                 style="flex: 1; max-width: 50%;"
                 type="text"
@@ -10223,7 +10223,7 @@ exports[`<ColumnList /> > renders normal.tsx correctly 1`] = `
               />
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-12"
-                id="column-list-index-1"
+                id="column-list-1-name"
                 placeholder="请输入"
                 style="flex: 1; max-width: 50%;"
                 type="text"
@@ -10312,7 +10312,7 @@ exports[`<ColumnList /> > renders normal.tsx correctly 1`] = `
             >
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-12"
-                id="column-list-index-2"
+                id="column-list-2-authCompany"
                 placeholder="请输入"
                 style="flex: 1; max-width: 50%;"
                 type="text"
@@ -10320,7 +10320,7 @@ exports[`<ColumnList /> > renders normal.tsx correctly 1`] = `
               />
               <input
                 class="studio-input studio-input-sm studio-column-list-content-tem emotion-12"
-                id="column-list-index-2"
+                id="column-list-2-authCompany"
                 placeholder="请输入"
                 style="flex: 1; max-width: 50%;"
                 type="text"
@@ -21745,19 +21745,6 @@ exports[`<SortableList /> > renders Basic.tsx correctly 1`] = `
 }
 
 .emotion-11 {
-  position: absolute;
-  top: 1px;
-  right: 1px;
-  -webkit-align-self: flex-end;
-  -ms-flex-item-align: flex-end;
-  align-self: flex-end;
-  overflow: hidden;
-  border-radius: 1px;
-  -webkit-backdrop-filter: blur(5px);
-  backdrop-filter: blur(5px);
-}
-
-.emotion-12 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -21774,11 +21761,11 @@ exports[`<SortableList /> > renders Basic.tsx correctly 1`] = `
   transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
 }
 
-.emotion-12:hover {
+.emotion-11:hover {
   color: rgba(0, 0, 0, 0.88)!important;
 }
 
-.emotion-12:active {
+.emotion-11:active {
   scale: 0.8;
   color: rgba(0, 0, 0, 0.88);
 }
@@ -21842,10 +21829,10 @@ exports[`<SortableList /> > renders Basic.tsx correctly 1`] = `
                 hello
               </div>
               <div
-                class="layoutkit-flexbox emotion-5 studio-sortable-list-item-actions emotion-10 studio-sortable-list-actions-right emotion-11"
+                class="layoutkit-flexbox emotion-5 studio-sortable-list-item-actions emotion-10"
               >
                 <button
-                  class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-12"
+                  class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-11"
                   style="height: 22px;"
                   tabindex="-1"
                   type="button"
@@ -21925,10 +21912,10 @@ exports[`<SortableList /> > renders Basic.tsx correctly 1`] = `
                 world
               </div>
               <div
-                class="layoutkit-flexbox emotion-5 studio-sortable-list-item-actions emotion-10 studio-sortable-list-actions-right emotion-11"
+                class="layoutkit-flexbox emotion-5 studio-sortable-list-item-actions emotion-10"
               >
                 <button
-                  class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-12"
+                  class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-11"
                   style="height: 22px;"
                   tabindex="-1"
                   type="button"
@@ -22172,19 +22159,6 @@ exports[`<SortableList /> > renders controlled.tsx correctly 1`] = `
 }
 
 .emotion-11 {
-  position: absolute;
-  top: 1px;
-  right: 1px;
-  -webkit-align-self: flex-end;
-  -ms-flex-item-align: flex-end;
-  align-self: flex-end;
-  overflow: hidden;
-  border-radius: 1px;
-  -webkit-backdrop-filter: blur(5px);
-  backdrop-filter: blur(5px);
-}
-
-.emotion-12 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -22201,11 +22175,11 @@ exports[`<SortableList /> > renders controlled.tsx correctly 1`] = `
   transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
 }
 
-.emotion-12:hover {
+.emotion-11:hover {
   color: rgba(0, 0, 0, 0.88)!important;
 }
 
-.emotion-12:active {
+.emotion-11:active {
   scale: 0.8;
   color: rgba(0, 0, 0, 0.88);
 }
@@ -22269,10 +22243,10 @@ exports[`<SortableList /> > renders controlled.tsx correctly 1`] = `
                 hello
               </div>
               <div
-                class="layoutkit-flexbox emotion-5 studio-sortable-list-item-actions emotion-10 studio-sortable-list-actions-right emotion-11"
+                class="layoutkit-flexbox emotion-5 studio-sortable-list-item-actions emotion-10"
               >
                 <button
-                  class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-12"
+                  class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-11"
                   style="height: 22px;"
                   tabindex="-1"
                   type="button"
@@ -22352,10 +22326,10 @@ exports[`<SortableList /> > renders controlled.tsx correctly 1`] = `
                 world
               </div>
               <div
-                class="layoutkit-flexbox emotion-5 studio-sortable-list-item-actions emotion-10 studio-sortable-list-actions-right emotion-11"
+                class="layoutkit-flexbox emotion-5 studio-sortable-list-item-actions emotion-10"
               >
                 <button
-                  class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-12"
+                  class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-11"
                   style="height: 22px;"
                   tabindex="-1"
                   type="button"
@@ -22599,19 +22573,6 @@ exports[`<SortableList /> > renders creatorButtonProps.tsx correctly 1`] = `
 }
 
 .emotion-11 {
-  position: absolute;
-  top: 1px;
-  right: 1px;
-  -webkit-align-self: flex-end;
-  -ms-flex-item-align: flex-end;
-  align-self: flex-end;
-  overflow: hidden;
-  border-radius: 1px;
-  -webkit-backdrop-filter: blur(5px);
-  backdrop-filter: blur(5px);
-}
-
-.emotion-12 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -22628,16 +22589,16 @@ exports[`<SortableList /> > renders creatorButtonProps.tsx correctly 1`] = `
   transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
 }
 
-.emotion-12:hover {
+.emotion-11:hover {
   color: rgba(0, 0, 0, 0.88)!important;
 }
 
-.emotion-12:active {
+.emotion-11:active {
   scale: 0.8;
   color: rgba(0, 0, 0, 0.88);
 }
 
-.emotion-23 {
+.emotion-21 {
   height: 24px;
   padding-block: 2px;
   margin-top: 4px;
@@ -22647,13 +22608,13 @@ exports[`<SortableList /> > renders creatorButtonProps.tsx correctly 1`] = `
   border-color: transparent;
 }
 
-.emotion-23:hover {
+.emotion-21:hover {
   color: rgba(0, 0, 0, 0.88)!important;
   background: rgba(0, 0, 0, 0.06)!important;
   border-color: transparent!important;
 }
 
-.emotion-23:focus {
+.emotion-21:focus {
   color: rgba(0, 0, 0, 0.65);
   background: rgba(0, 0, 0, 0.02);
   border-color: transparent;
@@ -22719,10 +22680,10 @@ exports[`<SortableList /> > renders creatorButtonProps.tsx correctly 1`] = `
                 hello
               </div>
               <div
-                class="layoutkit-flexbox emotion-5 studio-sortable-list-item-actions emotion-10 studio-sortable-list-actions-right emotion-11"
+                class="layoutkit-flexbox emotion-5 studio-sortable-list-item-actions emotion-10"
               >
                 <button
-                  class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-12"
+                  class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-11"
                   style="height: 22px;"
                   tabindex="-1"
                   type="button"
@@ -22802,10 +22763,10 @@ exports[`<SortableList /> > renders creatorButtonProps.tsx correctly 1`] = `
                 world
               </div>
               <div
-                class="layoutkit-flexbox emotion-5 studio-sortable-list-item-actions emotion-10 studio-sortable-list-actions-right emotion-11"
+                class="layoutkit-flexbox emotion-5 studio-sortable-list-item-actions emotion-10"
               >
                 <button
-                  class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-12"
+                  class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-11"
                   style="height: 22px;"
                   tabindex="-1"
                   type="button"
@@ -22840,7 +22801,7 @@ exports[`<SortableList /> > renders creatorButtonProps.tsx correctly 1`] = `
         </li>
       </ul>
       <button
-        class="studio-btn studio-btn-default studio-btn-sm studio-btn-block studio-sortable-list-btn-add emotion-23"
+        class="studio-btn studio-btn-default studio-btn-sm studio-btn-block studio-sortable-list-btn-add emotion-21"
         type="button"
       >
         <span
@@ -23072,19 +23033,6 @@ exports[`<SortableList /> > renders getItemStyles.tsx correctly 1`] = `
 }
 
 .emotion-10 {
-  position: absolute;
-  top: 1px;
-  right: 1px;
-  -webkit-align-self: flex-end;
-  -ms-flex-item-align: flex-end;
-  align-self: flex-end;
-  overflow: hidden;
-  border-radius: 1px;
-  -webkit-backdrop-filter: blur(5px);
-  backdrop-filter: blur(5px);
-}
-
-.emotion-11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -23101,11 +23049,11 @@ exports[`<SortableList /> > renders getItemStyles.tsx correctly 1`] = `
   transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
 }
 
-.emotion-11:hover {
+.emotion-10:hover {
   color: rgba(0, 0, 0, 0.88)!important;
 }
 
-.emotion-11:active {
+.emotion-10:active {
   scale: 0.8;
   color: rgba(0, 0, 0, 0.88);
 }
@@ -23166,10 +23114,10 @@ exports[`<SortableList /> > renders getItemStyles.tsx correctly 1`] = `
               关关雎鸠
             </div>
             <div
-              class="layoutkit-flexbox emotion-4 studio-sortable-list-item-actions emotion-9 studio-sortable-list-actions-right emotion-10"
+              class="layoutkit-flexbox emotion-4 studio-sortable-list-item-actions emotion-9"
             >
               <button
-                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-11"
+                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-10"
                 style="height: 22px;"
                 tabindex="-1"
                 type="button"
@@ -23249,10 +23197,10 @@ exports[`<SortableList /> > renders getItemStyles.tsx correctly 1`] = `
               在河之洲
             </div>
             <div
-              class="layoutkit-flexbox emotion-4 studio-sortable-list-item-actions emotion-9 studio-sortable-list-actions-right emotion-10"
+              class="layoutkit-flexbox emotion-4 studio-sortable-list-item-actions emotion-9"
             >
               <button
-                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-11"
+                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-10"
                 style="height: 22px;"
                 tabindex="-1"
                 type="button"
@@ -23332,10 +23280,10 @@ exports[`<SortableList /> > renders getItemStyles.tsx correctly 1`] = `
               窈窕淑女
             </div>
             <div
-              class="layoutkit-flexbox emotion-4 studio-sortable-list-item-actions emotion-9 studio-sortable-list-actions-right emotion-10"
+              class="layoutkit-flexbox emotion-4 studio-sortable-list-item-actions emotion-9"
             >
               <button
-                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-11"
+                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-10"
                 style="height: 22px;"
                 tabindex="-1"
                 type="button"
@@ -23415,10 +23363,10 @@ exports[`<SortableList /> > renders getItemStyles.tsx correctly 1`] = `
               君子好逑
             </div>
             <div
-              class="layoutkit-flexbox emotion-4 studio-sortable-list-item-actions emotion-9 studio-sortable-list-actions-right emotion-10"
+              class="layoutkit-flexbox emotion-4 studio-sortable-list-item-actions emotion-9"
             >
               <button
-                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-11"
+                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-10"
                 style="height: 22px;"
                 tabindex="-1"
                 type="button"
@@ -23664,19 +23612,6 @@ exports[`<SortableList /> > renders provider.tsx correctly 1`] = `
 }
 
 .emotion-11 {
-  position: absolute;
-  top: 1px;
-  right: 1px;
-  -webkit-align-self: flex-end;
-  -ms-flex-item-align: flex-end;
-  align-self: flex-end;
-  overflow: hidden;
-  border-radius: 1px;
-  -webkit-backdrop-filter: blur(5px);
-  backdrop-filter: blur(5px);
-}
-
-.emotion-12 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -23693,29 +23628,29 @@ exports[`<SortableList /> > renders provider.tsx correctly 1`] = `
   transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
 }
 
-.emotion-12:hover {
+.emotion-11:hover {
   color: rgba(0, 0, 0, 0.88)!important;
 }
 
-.emotion-12:active {
+.emotion-11:active {
   scale: 0.8;
   color: rgba(0, 0, 0, 0.88);
 }
 
 <div>
-  <div>
+  <div
+    class="layoutkit-flexbox emotion-0"
+    style="background: rgb(245, 245, 245);"
+  >
     <button
-      class="studio-btn studio-btn-default"
+      class="studio-btn studio-btn-primary studio-btn-sm studio-btn-block"
+      style="margin-bottom: 8px;"
       type="button"
     >
       <span>
         获取值
       </span>
     </button>
-  </div>
-  <div
-    class="layoutkit-flexbox emotion-0"
-  >
     <div
       class="layoutkit-flexbox emotion-1 studio-sortable-list"
     >
@@ -23845,10 +23780,10 @@ exports[`<SortableList /> > renders provider.tsx correctly 1`] = `
                 </div>
               </div>
               <div
-                class="layoutkit-flexbox emotion-5 studio-sortable-list-item-actions emotion-10 studio-sortable-list-actions-right emotion-11"
+                class="layoutkit-flexbox emotion-5 studio-sortable-list-item-actions emotion-10"
               >
                 <button
-                  class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-12"
+                  class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-11"
                   style="height: 22px;"
                   tabindex="-1"
                   type="button"
@@ -24003,10 +23938,10 @@ exports[`<SortableList /> > renders provider.tsx correctly 1`] = `
                 </div>
               </div>
               <div
-                class="layoutkit-flexbox emotion-5 studio-sortable-list-item-actions emotion-10 studio-sortable-list-actions-right emotion-11"
+                class="layoutkit-flexbox emotion-5 studio-sortable-list-item-actions emotion-10"
               >
                 <button
-                  class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-12"
+                  class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-11"
                   style="height: 22px;"
                   tabindex="-1"
                   type="button"
@@ -24161,10 +24096,10 @@ exports[`<SortableList /> > renders provider.tsx correctly 1`] = `
                 </div>
               </div>
               <div
-                class="layoutkit-flexbox emotion-5 studio-sortable-list-item-actions emotion-10 studio-sortable-list-actions-right emotion-11"
+                class="layoutkit-flexbox emotion-5 studio-sortable-list-item-actions emotion-10"
               >
                 <button
-                  class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-12"
+                  class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-11"
                   style="height: 22px;"
                   tabindex="-1"
                   type="button"
@@ -24222,6 +24157,17 @@ exports[`<SortableList /> > renders provider.tsx correctly 1`] = `
 
 exports[`<SortableList /> > renders ref.tsx correctly 1`] = `
 .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  padding: 24px;
+}
+
+.emotion-1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -24239,7 +24185,7 @@ exports[`<SortableList /> > renders ref.tsx correctly 1`] = `
   width: 100%;
 }
 
-.emotion-1 {
+.emotion-2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -24256,16 +24202,16 @@ exports[`<SortableList /> > renders ref.tsx correctly 1`] = `
   transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
 }
 
-.emotion-1:hover {
+.emotion-2:hover {
   color: rgba(0, 0, 0, 0.88)!important;
 }
 
-.emotion-1:active {
+.emotion-2:active {
   scale: 0.8;
   color: rgba(0, 0, 0, 0.88);
 }
 
-.emotion-2 {
+.emotion-3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -24275,7 +24221,7 @@ exports[`<SortableList /> > renders ref.tsx correctly 1`] = `
   flex-direction: column;
 }
 
-.emotion-3 {
+.emotion-4 {
   list-style: none;
   display: grid;
   grid-auto-rows: max-content;
@@ -24289,7 +24235,7 @@ exports[`<SortableList /> > renders ref.tsx correctly 1`] = `
   transition: background-color 350ms ease;
 }
 
-.emotion-4 {
+.emotion-5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -24303,11 +24249,11 @@ exports[`<SortableList /> > renders ref.tsx correctly 1`] = `
   touch-action: manipulation;
 }
 
-.emotion-4:not(:last-child) {
+.emotion-5:not(:last-child) {
   margin-bottom: 2px;
 }
 
-.emotion-5 {
+.emotion-6 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -24342,11 +24288,11 @@ exports[`<SortableList /> > renders ref.tsx correctly 1`] = `
   -webkit-tap-highlight-color: transparent;
 }
 
-.emotion-5:focus-visible {
+.emotion-6:focus-visible {
   box-shadow: 0 0 4px 1px #4c9ffe,0 0 0 calc(1px / var(--scale-x, 1)) rgba(0, 0, 0, 0.05) 0 1px calc(3px / var(--scale-x, 1)) 0 rgba(0, 0, 0, 0.15);
 }
 
-.emotion-5:not(.studio-sortable-list-item-withHandle) {
+.emotion-6:not(.studio-sortable-list-item-withHandle) {
   cursor: -webkit-grab;
   cursor: grab;
   -webkit-user-select: none;
@@ -24357,16 +24303,16 @@ exports[`<SortableList /> > renders ref.tsx correctly 1`] = `
   touch-action: none;
 }
 
-.emotion-5-dragging:not(.studio-sortable-list-item-dragOverlay) {
+.emotion-6-dragging:not(.studio-sortable-list-item-dragOverlay) {
   z-index: 0;
   opacity: var(--dragging-opacity, 0.5);
 }
 
-.emotion-5-dragging:not(.studio-sortable-list-item-dragOverlay):focus {
+.emotion-6-dragging:not(.studio-sortable-list-item-dragOverlay):focus {
   box-shadow: 0 0 0 calc(1px / var(--scale-x, 1)) rgba(0, 0, 0, 0.05) 0 1px calc(3px / var(--scale-x, 1)) 0 rgba(0, 0, 0, 0.15);
 }
 
-.emotion-6 {
+.emotion-7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -24380,7 +24326,7 @@ exports[`<SortableList /> > renders ref.tsx correctly 1`] = `
   align-items: center;
 }
 
-.emotion-7 {
+.emotion-8 {
   position: relative;
   width: 100%;
   height: 24px;
@@ -24388,11 +24334,11 @@ exports[`<SortableList /> > renders ref.tsx correctly 1`] = `
   min-width: 48px;
 }
 
-.emotion-7:hover .studio-sortable-list-item-actions {
+.emotion-8:hover .studio-sortable-list-item-actions {
   opacity: 1;
 }
 
-.emotion-8 {
+.emotion-9 {
   z-index: 10;
   color: hsla(0, 0, 0, 0.45);
   opacity: 0;
@@ -24412,16 +24358,16 @@ exports[`<SortableList /> > renders ref.tsx correctly 1`] = `
   transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
 }
 
-.emotion-8:hover {
+.emotion-9:hover {
   color: rgba(0, 0, 0, 0.88)!important;
 }
 
-.emotion-8:active {
+.emotion-9:active {
   scale: 0.8;
   color: rgba(0, 0, 0, 0.88);
 }
 
-.emotion-9 {
+.emotion-10 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -24437,37 +24383,25 @@ exports[`<SortableList /> > renders ref.tsx correctly 1`] = `
   gap: 8px;
 }
 
-.emotion-11 {
+.emotion-12 {
   z-index: 10;
   color: hsla(0, 0, 0, 0.45);
   opacity: 0;
 }
 
-.emotion-12 {
-  position: absolute;
-  top: 1px;
-  right: 1px;
-  -webkit-align-self: flex-end;
-  -ms-flex-item-align: flex-end;
-  align-self: flex-end;
-  overflow: hidden;
-  border-radius: 1px;
-  -webkit-backdrop-filter: blur(5px);
-  backdrop-filter: blur(5px);
-}
-
 <div>
   <div
-    style="width: 340px; padding: 0px 12px;"
+    class="layoutkit-flexbox emotion-0"
+    style="background: rgb(245, 245, 245);"
   >
     <div
-      class="layoutkit-flexbox emotion-0"
+      class="layoutkit-flexbox emotion-1"
     >
       <div>
         列配置项
       </div>
       <button
-        class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-1"
+        class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-2"
         tabindex="-1"
         type="button"
       >
@@ -24497,14 +24431,14 @@ exports[`<SortableList /> > renders ref.tsx correctly 1`] = `
       </button>
     </div>
     <div
-      class="layoutkit-flexbox emotion-2 studio-sortable-list"
+      class="layoutkit-flexbox emotion-3 studio-sortable-list"
     >
       <ul
-        class="studio-sortable-list-container emotion-3"
+        class="studio-sortable-list-container emotion-4"
         style="--columns: 1;"
       >
         <li
-          class="studio-sortable-list-item-wrapper emotion-4"
+          class="studio-sortable-list-item-wrapper emotion-5"
           data-testid="list-item"
           style="--index: 0;"
         >
@@ -24512,7 +24446,7 @@ exports[`<SortableList /> > renders ref.tsx correctly 1`] = `
             aria-describedby="DndDescribedBy-9"
             aria-disabled="false"
             aria-roledescription="sortable"
-            class="studio-sortable-list-item emotion-5 studio-sortable-list-item-withHandle"
+            class="studio-sortable-list-item emotion-6 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
             data-id="index"
             data-index="0"
@@ -24520,10 +24454,10 @@ exports[`<SortableList /> > renders ref.tsx correctly 1`] = `
             style="background-color: rgb(255, 255, 255);"
           >
             <div
-              class="layoutkit-flexbox emotion-6 studio-sortable-list-item-content emotion-7"
+              class="layoutkit-flexbox emotion-7 studio-sortable-list-item-content emotion-8"
             >
               <button
-                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-list-item-actions studio-actionicon emotion-8"
+                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-list-item-actions studio-actionicon emotion-9"
                 data-cypress="draggable-handle"
                 style="width: 14px; height: 24px;"
                 tabindex="-1"
@@ -24544,7 +24478,7 @@ exports[`<SortableList /> > renders ref.tsx correctly 1`] = `
                 </span>
               </button>
               <div
-                class="layoutkit-flexbox emotion-9"
+                class="layoutkit-flexbox emotion-10"
               >
                 <div
                   style="flex: 1; width: 100%; height: 24px; font-size: 12px; border-radius: 2px; min-width: 48px;"
@@ -24625,10 +24559,10 @@ exports[`<SortableList /> > renders ref.tsx correctly 1`] = `
                 </div>
               </div>
               <div
-                class="layoutkit-flexbox emotion-6 studio-sortable-list-item-actions emotion-11 studio-sortable-list-actions-right emotion-12"
+                class="layoutkit-flexbox emotion-7 studio-sortable-list-item-actions emotion-12"
               >
                 <button
-                  class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-1"
+                  class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-2"
                   style="height: 22px;"
                   tabindex="-1"
                   type="button"
@@ -24662,7 +24596,7 @@ exports[`<SortableList /> > renders ref.tsx correctly 1`] = `
           </div>
         </li>
         <li
-          class="studio-sortable-list-item-wrapper emotion-4"
+          class="studio-sortable-list-item-wrapper emotion-5"
           data-testid="list-item"
           style="--index: 1;"
         >
@@ -24670,7 +24604,7 @@ exports[`<SortableList /> > renders ref.tsx correctly 1`] = `
             aria-describedby="DndDescribedBy-9"
             aria-disabled="false"
             aria-roledescription="sortable"
-            class="studio-sortable-list-item emotion-5 studio-sortable-list-item-withHandle"
+            class="studio-sortable-list-item emotion-6 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
             data-id="authName"
             data-index="1"
@@ -24678,10 +24612,10 @@ exports[`<SortableList /> > renders ref.tsx correctly 1`] = `
             style="background-color: rgb(255, 255, 255);"
           >
             <div
-              class="layoutkit-flexbox emotion-6 studio-sortable-list-item-content emotion-7"
+              class="layoutkit-flexbox emotion-7 studio-sortable-list-item-content emotion-8"
             >
               <button
-                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-list-item-actions studio-actionicon emotion-8"
+                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-list-item-actions studio-actionicon emotion-9"
                 data-cypress="draggable-handle"
                 style="width: 14px; height: 24px;"
                 tabindex="-1"
@@ -24702,7 +24636,7 @@ exports[`<SortableList /> > renders ref.tsx correctly 1`] = `
                 </span>
               </button>
               <div
-                class="layoutkit-flexbox emotion-9"
+                class="layoutkit-flexbox emotion-10"
               >
                 <div
                   style="flex: 1; width: 100%; height: 24px; font-size: 12px; border-radius: 2px; min-width: 48px;"
@@ -24783,10 +24717,10 @@ exports[`<SortableList /> > renders ref.tsx correctly 1`] = `
                 </div>
               </div>
               <div
-                class="layoutkit-flexbox emotion-6 studio-sortable-list-item-actions emotion-11 studio-sortable-list-actions-right emotion-12"
+                class="layoutkit-flexbox emotion-7 studio-sortable-list-item-actions emotion-12"
               >
                 <button
-                  class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-1"
+                  class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-2"
                   style="height: 22px;"
                   tabindex="-1"
                   type="button"
@@ -24820,7 +24754,7 @@ exports[`<SortableList /> > renders ref.tsx correctly 1`] = `
           </div>
         </li>
         <li
-          class="studio-sortable-list-item-wrapper emotion-4"
+          class="studio-sortable-list-item-wrapper emotion-5"
           data-testid="list-item"
           style="--index: 2;"
         >
@@ -24828,7 +24762,7 @@ exports[`<SortableList /> > renders ref.tsx correctly 1`] = `
             aria-describedby="DndDescribedBy-9"
             aria-disabled="false"
             aria-roledescription="sortable"
-            class="studio-sortable-list-item emotion-5 studio-sortable-list-item-withHandle"
+            class="studio-sortable-list-item emotion-6 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
             data-id="authedName"
             data-index="2"
@@ -24836,10 +24770,10 @@ exports[`<SortableList /> > renders ref.tsx correctly 1`] = `
             style="background-color: rgb(255, 255, 255);"
           >
             <div
-              class="layoutkit-flexbox emotion-6 studio-sortable-list-item-content emotion-7"
+              class="layoutkit-flexbox emotion-7 studio-sortable-list-item-content emotion-8"
             >
               <button
-                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-list-item-actions studio-actionicon emotion-8"
+                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-list-item-actions studio-actionicon emotion-9"
                 data-cypress="draggable-handle"
                 style="width: 14px; height: 24px;"
                 tabindex="-1"
@@ -24860,7 +24794,7 @@ exports[`<SortableList /> > renders ref.tsx correctly 1`] = `
                 </span>
               </button>
               <div
-                class="layoutkit-flexbox emotion-9"
+                class="layoutkit-flexbox emotion-10"
               >
                 <div
                   style="flex: 1; width: 100%; height: 24px; font-size: 12px; border-radius: 2px; min-width: 48px;"
@@ -24941,10 +24875,10 @@ exports[`<SortableList /> > renders ref.tsx correctly 1`] = `
                 </div>
               </div>
               <div
-                class="layoutkit-flexbox emotion-6 studio-sortable-list-item-actions emotion-11 studio-sortable-list-actions-right emotion-12"
+                class="layoutkit-flexbox emotion-7 studio-sortable-list-item-actions emotion-12"
               >
                 <button
-                  class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-1"
+                  class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-2"
                   style="height: 22px;"
                   tabindex="-1"
                   type="button"
@@ -25009,9 +24943,20 @@ exports[`<SortableList /> > renders renderContent.tsx correctly 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  padding: 24px;
 }
 
 .emotion-1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.emotion-2 {
   list-style: none;
   display: grid;
   grid-auto-rows: max-content;
@@ -25025,7 +24970,7 @@ exports[`<SortableList /> > renders renderContent.tsx correctly 1`] = `
   transition: background-color 350ms ease;
 }
 
-.emotion-2 {
+.emotion-3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -25039,11 +24984,11 @@ exports[`<SortableList /> > renders renderContent.tsx correctly 1`] = `
   touch-action: manipulation;
 }
 
-.emotion-2:not(:last-child) {
+.emotion-3:not(:last-child) {
   margin-bottom: 2px;
 }
 
-.emotion-3 {
+.emotion-4 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -25078,11 +25023,11 @@ exports[`<SortableList /> > renders renderContent.tsx correctly 1`] = `
   -webkit-tap-highlight-color: transparent;
 }
 
-.emotion-3:focus-visible {
+.emotion-4:focus-visible {
   box-shadow: 0 0 4px 1px #4c9ffe,0 0 0 calc(1px / var(--scale-x, 1)) rgba(0, 0, 0, 0.05) 0 1px calc(3px / var(--scale-x, 1)) 0 rgba(0, 0, 0, 0.15);
 }
 
-.emotion-3:not(.studio-sortable-list-item-withHandle) {
+.emotion-4:not(.studio-sortable-list-item-withHandle) {
   cursor: -webkit-grab;
   cursor: grab;
   -webkit-user-select: none;
@@ -25093,16 +25038,16 @@ exports[`<SortableList /> > renders renderContent.tsx correctly 1`] = `
   touch-action: none;
 }
 
-.emotion-3-dragging:not(.studio-sortable-list-item-dragOverlay) {
+.emotion-4-dragging:not(.studio-sortable-list-item-dragOverlay) {
   z-index: 0;
   opacity: var(--dragging-opacity, 0.5);
 }
 
-.emotion-3-dragging:not(.studio-sortable-list-item-dragOverlay):focus {
+.emotion-4-dragging:not(.studio-sortable-list-item-dragOverlay):focus {
   box-shadow: 0 0 0 calc(1px / var(--scale-x, 1)) rgba(0, 0, 0, 0.05) 0 1px calc(3px / var(--scale-x, 1)) 0 rgba(0, 0, 0, 0.15);
 }
 
-.emotion-4 {
+.emotion-5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -25116,7 +25061,7 @@ exports[`<SortableList /> > renders renderContent.tsx correctly 1`] = `
   align-items: center;
 }
 
-.emotion-5 {
+.emotion-6 {
   position: relative;
   width: 100%;
   height: 24px;
@@ -25124,11 +25069,11 @@ exports[`<SortableList /> > renders renderContent.tsx correctly 1`] = `
   min-width: 48px;
 }
 
-.emotion-5:hover .studio-sortable-list-item-actions {
+.emotion-6:hover .studio-sortable-list-item-actions {
   opacity: 1;
 }
 
-.emotion-6 {
+.emotion-7 {
   z-index: 10;
   color: hsla(0, 0, 0, 0.45);
   opacity: 0;
@@ -25148,16 +25093,16 @@ exports[`<SortableList /> > renders renderContent.tsx correctly 1`] = `
   transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
 }
 
-.emotion-6:hover {
+.emotion-7:hover {
   color: rgba(0, 0, 0, 0.88)!important;
 }
 
-.emotion-6:active {
+.emotion-7:active {
   scale: 0.8;
   color: rgba(0, 0, 0, 0.88);
 }
 
-.emotion-7 {
+.emotion-8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -25173,25 +25118,12 @@ exports[`<SortableList /> > renders renderContent.tsx correctly 1`] = `
   gap: 8px;
 }
 
-.emotion-9 {
+.emotion-10 {
   z-index: 10;
   color: hsla(0, 0, 0, 0.45);
   opacity: 0;
 }
 
-.emotion-10 {
-  position: absolute;
-  top: 1px;
-  right: 1px;
-  -webkit-align-self: flex-end;
-  -ms-flex-item-align: flex-end;
-  align-self: flex-end;
-  overflow: hidden;
-  border-radius: 1px;
-  -webkit-backdrop-filter: blur(5px);
-  backdrop-filter: blur(5px);
-}
-
 .emotion-11 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -25220,17 +25152,18 @@ exports[`<SortableList /> > renders renderContent.tsx correctly 1`] = `
 
 <div>
   <div
-    style="width: 340px; padding: 0px 12px;"
+    class="layoutkit-flexbox emotion-0"
+    style="background: rgb(245, 245, 245);"
   >
     <div
-      class="layoutkit-flexbox emotion-0 studio-sortable-list"
+      class="layoutkit-flexbox emotion-1 studio-sortable-list"
     >
       <ul
-        class="studio-sortable-list-container emotion-1"
+        class="studio-sortable-list-container emotion-2"
         style="--columns: 1;"
       >
         <li
-          class="studio-sortable-list-item-wrapper emotion-2"
+          class="studio-sortable-list-item-wrapper emotion-3"
           data-testid="list-item"
           style="--index: 0;"
         >
@@ -25238,7 +25171,7 @@ exports[`<SortableList /> > renders renderContent.tsx correctly 1`] = `
             aria-describedby="DndDescribedBy-8"
             aria-disabled="false"
             aria-roledescription="sortable"
-            class="studio-sortable-list-item emotion-3 studio-sortable-list-item-withHandle"
+            class="studio-sortable-list-item emotion-4 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
             data-id="index"
             data-index="0"
@@ -25246,10 +25179,10 @@ exports[`<SortableList /> > renders renderContent.tsx correctly 1`] = `
             style="background-color: rgb(255, 255, 255);"
           >
             <div
-              class="layoutkit-flexbox emotion-4 studio-sortable-list-item-content emotion-5"
+              class="layoutkit-flexbox emotion-5 studio-sortable-list-item-content emotion-6"
             >
               <button
-                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-list-item-actions studio-actionicon emotion-6"
+                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-list-item-actions studio-actionicon emotion-7"
                 data-cypress="draggable-handle"
                 style="width: 14px; height: 24px;"
                 tabindex="-1"
@@ -25270,7 +25203,7 @@ exports[`<SortableList /> > renders renderContent.tsx correctly 1`] = `
                 </span>
               </button>
               <div
-                class="layoutkit-flexbox emotion-7"
+                class="layoutkit-flexbox emotion-8"
               >
                 <div
                   style="flex: 1; width: 100%; height: 24px; font-size: 12px; border-radius: 2px; min-width: 48px;"
@@ -25351,7 +25284,7 @@ exports[`<SortableList /> > renders renderContent.tsx correctly 1`] = `
                 </div>
               </div>
               <div
-                class="layoutkit-flexbox emotion-4 studio-sortable-list-item-actions emotion-9 studio-sortable-list-actions-right emotion-10"
+                class="layoutkit-flexbox emotion-5 studio-sortable-list-item-actions emotion-10"
               >
                 <button
                   class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-11"
@@ -25388,7 +25321,7 @@ exports[`<SortableList /> > renders renderContent.tsx correctly 1`] = `
           </div>
         </li>
         <li
-          class="studio-sortable-list-item-wrapper emotion-2"
+          class="studio-sortable-list-item-wrapper emotion-3"
           data-testid="list-item"
           style="--index: 1;"
         >
@@ -25396,7 +25329,7 @@ exports[`<SortableList /> > renders renderContent.tsx correctly 1`] = `
             aria-describedby="DndDescribedBy-8"
             aria-disabled="false"
             aria-roledescription="sortable"
-            class="studio-sortable-list-item emotion-3 studio-sortable-list-item-withHandle"
+            class="studio-sortable-list-item emotion-4 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
             data-id="authName"
             data-index="1"
@@ -25404,10 +25337,10 @@ exports[`<SortableList /> > renders renderContent.tsx correctly 1`] = `
             style="background-color: rgb(255, 255, 255);"
           >
             <div
-              class="layoutkit-flexbox emotion-4 studio-sortable-list-item-content emotion-5"
+              class="layoutkit-flexbox emotion-5 studio-sortable-list-item-content emotion-6"
             >
               <button
-                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-list-item-actions studio-actionicon emotion-6"
+                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-list-item-actions studio-actionicon emotion-7"
                 data-cypress="draggable-handle"
                 style="width: 14px; height: 24px;"
                 tabindex="-1"
@@ -25428,7 +25361,7 @@ exports[`<SortableList /> > renders renderContent.tsx correctly 1`] = `
                 </span>
               </button>
               <div
-                class="layoutkit-flexbox emotion-7"
+                class="layoutkit-flexbox emotion-8"
               >
                 <div
                   style="flex: 1; width: 100%; height: 24px; font-size: 12px; border-radius: 2px; min-width: 48px;"
@@ -25509,7 +25442,7 @@ exports[`<SortableList /> > renders renderContent.tsx correctly 1`] = `
                 </div>
               </div>
               <div
-                class="layoutkit-flexbox emotion-4 studio-sortable-list-item-actions emotion-9 studio-sortable-list-actions-right emotion-10"
+                class="layoutkit-flexbox emotion-5 studio-sortable-list-item-actions emotion-10"
               >
                 <button
                   class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-11"
@@ -25546,7 +25479,7 @@ exports[`<SortableList /> > renders renderContent.tsx correctly 1`] = `
           </div>
         </li>
         <li
-          class="studio-sortable-list-item-wrapper emotion-2"
+          class="studio-sortable-list-item-wrapper emotion-3"
           data-testid="list-item"
           style="--index: 2;"
         >
@@ -25554,7 +25487,7 @@ exports[`<SortableList /> > renders renderContent.tsx correctly 1`] = `
             aria-describedby="DndDescribedBy-8"
             aria-disabled="false"
             aria-roledescription="sortable"
-            class="studio-sortable-list-item emotion-3 studio-sortable-list-item-withHandle"
+            class="studio-sortable-list-item emotion-4 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
             data-id="authedName"
             data-index="2"
@@ -25562,10 +25495,10 @@ exports[`<SortableList /> > renders renderContent.tsx correctly 1`] = `
             style="background-color: rgb(255, 255, 255);"
           >
             <div
-              class="layoutkit-flexbox emotion-4 studio-sortable-list-item-content emotion-5"
+              class="layoutkit-flexbox emotion-5 studio-sortable-list-item-content emotion-6"
             >
               <button
-                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-list-item-actions studio-actionicon emotion-6"
+                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-list-item-actions studio-actionicon emotion-7"
                 data-cypress="draggable-handle"
                 style="width: 14px; height: 24px;"
                 tabindex="-1"
@@ -25586,7 +25519,7 @@ exports[`<SortableList /> > renders renderContent.tsx correctly 1`] = `
                 </span>
               </button>
               <div
-                class="layoutkit-flexbox emotion-7"
+                class="layoutkit-flexbox emotion-8"
               >
                 <div
                   style="flex: 1; width: 100%; height: 24px; font-size: 12px; border-radius: 2px; min-width: 48px;"
@@ -25667,7 +25600,7 @@ exports[`<SortableList /> > renders renderContent.tsx correctly 1`] = `
                 </div>
               </div>
               <div
-                class="layoutkit-flexbox emotion-4 studio-sortable-list-item-actions emotion-9 studio-sortable-list-actions-right emotion-10"
+                class="layoutkit-flexbox emotion-5 studio-sortable-list-item-actions emotion-10"
               >
                 <button
                   class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-11"
@@ -26296,9 +26229,20 @@ exports[`<SortableList /> > renders useSortableList.tsx correctly 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  padding: 24px;
 }
 
 .emotion-1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.emotion-2 {
   list-style: none;
   display: grid;
   grid-auto-rows: max-content;
@@ -26312,7 +26256,7 @@ exports[`<SortableList /> > renders useSortableList.tsx correctly 1`] = `
   transition: background-color 350ms ease;
 }
 
-.emotion-2 {
+.emotion-3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -26326,11 +26270,11 @@ exports[`<SortableList /> > renders useSortableList.tsx correctly 1`] = `
   touch-action: manipulation;
 }
 
-.emotion-2:not(:last-child) {
+.emotion-3:not(:last-child) {
   margin-bottom: 2px;
 }
 
-.emotion-3 {
+.emotion-4 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -26365,11 +26309,11 @@ exports[`<SortableList /> > renders useSortableList.tsx correctly 1`] = `
   -webkit-tap-highlight-color: transparent;
 }
 
-.emotion-3:focus-visible {
+.emotion-4:focus-visible {
   box-shadow: 0 0 4px 1px #4c9ffe,0 0 0 calc(1px / var(--scale-x, 1)) rgba(0, 0, 0, 0.05) 0 1px calc(3px / var(--scale-x, 1)) 0 rgba(0, 0, 0, 0.15);
 }
 
-.emotion-3:not(.studio-sortable-list-item-withHandle) {
+.emotion-4:not(.studio-sortable-list-item-withHandle) {
   cursor: -webkit-grab;
   cursor: grab;
   -webkit-user-select: none;
@@ -26380,16 +26324,16 @@ exports[`<SortableList /> > renders useSortableList.tsx correctly 1`] = `
   touch-action: none;
 }
 
-.emotion-3-dragging:not(.studio-sortable-list-item-dragOverlay) {
+.emotion-4-dragging:not(.studio-sortable-list-item-dragOverlay) {
   z-index: 0;
   opacity: var(--dragging-opacity, 0.5);
 }
 
-.emotion-3-dragging:not(.studio-sortable-list-item-dragOverlay):focus {
+.emotion-4-dragging:not(.studio-sortable-list-item-dragOverlay):focus {
   box-shadow: 0 0 0 calc(1px / var(--scale-x, 1)) rgba(0, 0, 0, 0.05) 0 1px calc(3px / var(--scale-x, 1)) 0 rgba(0, 0, 0, 0.15);
 }
 
-.emotion-4 {
+.emotion-5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -26403,7 +26347,7 @@ exports[`<SortableList /> > renders useSortableList.tsx correctly 1`] = `
   align-items: center;
 }
 
-.emotion-5 {
+.emotion-6 {
   position: relative;
   width: 100%;
   height: 24px;
@@ -26411,11 +26355,11 @@ exports[`<SortableList /> > renders useSortableList.tsx correctly 1`] = `
   min-width: 48px;
 }
 
-.emotion-5:hover .studio-sortable-list-item-actions {
+.emotion-6:hover .studio-sortable-list-item-actions {
   opacity: 1;
 }
 
-.emotion-6 {
+.emotion-7 {
   z-index: 10;
   color: hsla(0, 0, 0, 0.45);
   opacity: 0;
@@ -26435,16 +26379,16 @@ exports[`<SortableList /> > renders useSortableList.tsx correctly 1`] = `
   transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
 }
 
-.emotion-6:hover {
+.emotion-7:hover {
   color: rgba(0, 0, 0, 0.88)!important;
 }
 
-.emotion-6:active {
+.emotion-7:active {
   scale: 0.8;
   color: rgba(0, 0, 0, 0.88);
 }
 
-.emotion-7 {
+.emotion-8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -26460,25 +26404,12 @@ exports[`<SortableList /> > renders useSortableList.tsx correctly 1`] = `
   gap: 8px;
 }
 
-.emotion-9 {
+.emotion-10 {
   z-index: 10;
   color: hsla(0, 0, 0, 0.45);
   opacity: 0;
 }
 
-.emotion-10 {
-  position: absolute;
-  top: 1px;
-  right: 1px;
-  -webkit-align-self: flex-end;
-  -ms-flex-item-align: flex-end;
-  align-self: flex-end;
-  overflow: hidden;
-  border-radius: 1px;
-  -webkit-backdrop-filter: blur(5px);
-  backdrop-filter: blur(5px);
-}
-
 .emotion-11 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -26507,17 +26438,18 @@ exports[`<SortableList /> > renders useSortableList.tsx correctly 1`] = `
 
 <div>
   <div
-    style="width: 340px; padding: 0px 12px;"
+    class="layoutkit-flexbox emotion-0"
+    style="background: rgb(245, 245, 245);"
   >
     <div
-      class="layoutkit-flexbox emotion-0 studio-sortable-list"
+      class="layoutkit-flexbox emotion-1 studio-sortable-list"
     >
       <ul
-        class="studio-sortable-list-container emotion-1"
+        class="studio-sortable-list-container emotion-2"
         style="--columns: 1;"
       >
         <li
-          class="studio-sortable-list-item-wrapper emotion-2"
+          class="studio-sortable-list-item-wrapper emotion-3"
           data-testid="list-item"
           style="--index: 0;"
         >
@@ -26525,7 +26457,7 @@ exports[`<SortableList /> > renders useSortableList.tsx correctly 1`] = `
             aria-describedby="DndDescribedBy-6"
             aria-disabled="false"
             aria-roledescription="sortable"
-            class="studio-sortable-list-item emotion-3 studio-sortable-list-item-withHandle"
+            class="studio-sortable-list-item emotion-4 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
             data-id="index"
             data-index="0"
@@ -26533,10 +26465,10 @@ exports[`<SortableList /> > renders useSortableList.tsx correctly 1`] = `
             style="background-color: rgb(255, 255, 255);"
           >
             <div
-              class="layoutkit-flexbox emotion-4 studio-sortable-list-item-content emotion-5"
+              class="layoutkit-flexbox emotion-5 studio-sortable-list-item-content emotion-6"
             >
               <button
-                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-list-item-actions studio-actionicon emotion-6"
+                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-list-item-actions studio-actionicon emotion-7"
                 data-cypress="draggable-handle"
                 style="width: 14px; height: 24px;"
                 tabindex="-1"
@@ -26557,7 +26489,7 @@ exports[`<SortableList /> > renders useSortableList.tsx correctly 1`] = `
                 </span>
               </button>
               <div
-                class="layoutkit-flexbox emotion-7"
+                class="layoutkit-flexbox emotion-8"
               >
                 <div
                   style="flex: 1; width: 100%; height: 24px; font-size: 12px; border-radius: 2px; min-width: 48px;"
@@ -26638,7 +26570,7 @@ exports[`<SortableList /> > renders useSortableList.tsx correctly 1`] = `
                 </div>
               </div>
               <div
-                class="layoutkit-flexbox emotion-4 studio-sortable-list-item-actions emotion-9 studio-sortable-list-actions-right emotion-10"
+                class="layoutkit-flexbox emotion-5 studio-sortable-list-item-actions emotion-10"
               >
                 <button
                   class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-11"
@@ -26675,7 +26607,7 @@ exports[`<SortableList /> > renders useSortableList.tsx correctly 1`] = `
           </div>
         </li>
         <li
-          class="studio-sortable-list-item-wrapper emotion-2"
+          class="studio-sortable-list-item-wrapper emotion-3"
           data-testid="list-item"
           style="--index: 1;"
         >
@@ -26683,7 +26615,7 @@ exports[`<SortableList /> > renders useSortableList.tsx correctly 1`] = `
             aria-describedby="DndDescribedBy-6"
             aria-disabled="false"
             aria-roledescription="sortable"
-            class="studio-sortable-list-item emotion-3 studio-sortable-list-item-withHandle"
+            class="studio-sortable-list-item emotion-4 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
             data-id="authName"
             data-index="1"
@@ -26691,10 +26623,10 @@ exports[`<SortableList /> > renders useSortableList.tsx correctly 1`] = `
             style="background-color: rgb(255, 255, 255);"
           >
             <div
-              class="layoutkit-flexbox emotion-4 studio-sortable-list-item-content emotion-5"
+              class="layoutkit-flexbox emotion-5 studio-sortable-list-item-content emotion-6"
             >
               <button
-                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-list-item-actions studio-actionicon emotion-6"
+                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-list-item-actions studio-actionicon emotion-7"
                 data-cypress="draggable-handle"
                 style="width: 14px; height: 24px;"
                 tabindex="-1"
@@ -26715,7 +26647,7 @@ exports[`<SortableList /> > renders useSortableList.tsx correctly 1`] = `
                 </span>
               </button>
               <div
-                class="layoutkit-flexbox emotion-7"
+                class="layoutkit-flexbox emotion-8"
               >
                 <div
                   style="flex: 1; width: 100%; height: 24px; font-size: 12px; border-radius: 2px; min-width: 48px;"
@@ -26796,7 +26728,7 @@ exports[`<SortableList /> > renders useSortableList.tsx correctly 1`] = `
                 </div>
               </div>
               <div
-                class="layoutkit-flexbox emotion-4 studio-sortable-list-item-actions emotion-9 studio-sortable-list-actions-right emotion-10"
+                class="layoutkit-flexbox emotion-5 studio-sortable-list-item-actions emotion-10"
               >
                 <button
                   class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-11"
@@ -26833,7 +26765,7 @@ exports[`<SortableList /> > renders useSortableList.tsx correctly 1`] = `
           </div>
         </li>
         <li
-          class="studio-sortable-list-item-wrapper emotion-2"
+          class="studio-sortable-list-item-wrapper emotion-3"
           data-testid="list-item"
           style="--index: 2;"
         >
@@ -26841,7 +26773,7 @@ exports[`<SortableList /> > renders useSortableList.tsx correctly 1`] = `
             aria-describedby="DndDescribedBy-6"
             aria-disabled="false"
             aria-roledescription="sortable"
-            class="studio-sortable-list-item emotion-3 studio-sortable-list-item-withHandle"
+            class="studio-sortable-list-item emotion-4 studio-sortable-list-item-withHandle"
             data-cypress="draggable-item"
             data-id="authedName"
             data-index="2"
@@ -26849,10 +26781,10 @@ exports[`<SortableList /> > renders useSortableList.tsx correctly 1`] = `
             style="background-color: rgb(255, 255, 255);"
           >
             <div
-              class="layoutkit-flexbox emotion-4 studio-sortable-list-item-content emotion-5"
+              class="layoutkit-flexbox emotion-5 studio-sortable-list-item-content emotion-6"
             >
               <button
-                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-list-item-actions studio-actionicon emotion-6"
+                class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-sortable-list-item-actions studio-actionicon emotion-7"
                 data-cypress="draggable-handle"
                 style="width: 14px; height: 24px;"
                 tabindex="-1"
@@ -26873,7 +26805,7 @@ exports[`<SortableList /> > renders useSortableList.tsx correctly 1`] = `
                 </span>
               </button>
               <div
-                class="layoutkit-flexbox emotion-7"
+                class="layoutkit-flexbox emotion-8"
               >
                 <div
                   style="flex: 1; width: 100%; height: 24px; font-size: 12px; border-radius: 2px; min-width: 48px;"
@@ -26954,7 +26886,7 @@ exports[`<SortableList /> > renders useSortableList.tsx correctly 1`] = `
                 </div>
               </div>
               <div
-                class="layoutkit-flexbox emotion-4 studio-sortable-list-item-actions emotion-9 studio-sortable-list-actions-right emotion-10"
+                class="layoutkit-flexbox emotion-5 studio-sortable-list-item-actions emotion-10"
               >
                 <button
                   class="studio-btn studio-btn-text studio-btn-sm studio-btn-icon-only studio-actionicon emotion-11"