diff --git a/tests/__snapshots__/demo.test.tsx.snap b/tests/__snapshots__/demo.test.tsx.snap
index a499311e..f99ac237 100644
--- a/tests/__snapshots__/demo.test.tsx.snap
+++ b/tests/__snapshots__/demo.test.tsx.snap
@@ -25142,3 +25142,6945 @@ exports[` > renders useSortableList.tsx correctly 1`] = `
`;
+
+exports[` > renders controlled.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;
+}
+
+.emotion-1 .studio-sortable-tree-node {
+ box-sizing: border-box;
+ padding-left: var(--spacing);
+ list-style: none;
+}
+
+.emotion-1 .studio-sortable-tree-node-clone {
+ display: inline-block;
+ padding: 0;
+ padding-top: 5px;
+ padding-left: 10px;
+ pointer-events: none;
+}
+
+.emotion-1 .studio-sortable-tree-node-clone .studio-sortable-tree-node-body {
+ padding-right: 24px;
+ background-color: #ffffff;
+ border: 1px solid #dedede;
+ border-radius: 4px;
+ box-shadow: 0 15px 15px 0 rgba(34, 33, 81, 0.1);
+}
+
+.emotion-1 .studio-sortable-tree-node:hover .studio-sortable-tree-node-handle {
+ opacity: 1;
+}
+
+.emotion-1 .studio-sortable-tree-node-ghost.studio-sortable-tree-node-indicator {
+ position: relative;
+ z-index: 1;
+ margin-bottom: -1px;
+ opacity: 1;
+}
+
+.emotion-1 .studio-sortable-tree-node-ghost.studio-sortable-tree-node-indicator .studio-sortable-tree-node-body {
+ position: relative;
+ height: 4px;
+ padding: 0;
+ background-color: #56a1f8;
+ border-color: #1677ff;
+}
+
+.emotion-1 .studio-sortable-tree-node-ghost.studio-sortable-tree-node-indicator .studio-sortable-tree-node-body::before {
+ position: absolute;
+ top: -4px;
+ left: -8px;
+ display: block;
+ width: 12px;
+ height: 12px;
+ background-color: #fff;
+ border: 1px solid #1677ff;
+ border-radius: 50%;
+ content: '';
+}
+
+.emotion-1 .studio-sortable-tree-node-ghost.studio-sortable-tree-node-indicator .studio-sortable-tree-node-body>* {
+ height: 0;
+ opacity: 0;
+}
+
+.emotion-1 .studio-sortable-tree-node-ghost:not(.studio-sortable-tree-node-indicator) {
+ opacity: 0.5;
+}
+
+.emotion-1 .studio-sortable-tree-node-ghost .studio-sortable-tree-node-body>* {
+ background-color: transparent;
+ box-shadow: none;
+}
+
+.emotion-1 .studio-sortable-tree-node-body {
+ position: relative;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ box-sizing: border-box;
+ padding: 2px;
+ background-color: rgba(0, 0, 0, 0.02);
+ border-radius: 4px;
+}
+
+.emotion-1 .studio-sortable-tree-node-content {
+ -webkit-box-flex: 1;
+ -webkit-flex-grow: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+
+.emotion-1 .studio-sortable-tree-node-count {
+ position: absolute;
+ top: -10px;
+ right: -10px;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ -webkit-justify-content: center;
+ justify-content: center;
+ width: 24px;
+ height: 24px;
+ color: #fff;
+ font-weight: 600;
+ font-size: 14px;
+ background-color: #1677ff;
+ border-radius: 50%;
+}
+
+.emotion-1 .disableSelection .studio-sortable-tree-node-content,
+.emotion-1 .clone .studio-sortable-tree-node-content,
+.emotion-1 .disableSelection .studio-sortable-tree-node-count,
+.emotion-1 .clone .studio-sortable-tree-node-count {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+.emotion-2 {
+ margin-bottom: 4px;
+}
+
+.emotion-2:hover .studio-sortable-tree-node-handle,
+.emotion-2:hover .studio-sortable-tree-node-remove {
+ opacity: 1;
+}
+
+.emotion-3 {
+ position: absolute;
+ left: -13px;
+ opacity: 0;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ -webkit-justify-content: center;
+ justify-content: center;
+ -webkit-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);
+ 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-3:hover {
+ color: rgba(0, 0, 0, 0.88)!important;
+}
+
+.emotion-3:active {
+ scale: 0.8;
+ color: rgba(0, 0, 0, 0.88);
+}
+
+.emotion-4 {
+ opacity: 0;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ -webkit-justify-content: center;
+ justify-content: center;
+ -webkit-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);
+ 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-4:hover {
+ color: rgba(0, 0, 0, 0.88)!important;
+}
+
+.emotion-4:active {
+ scale: 0.8;
+ color: rgba(0, 0, 0, 0.88);
+}
+
+.emotion-7 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ -webkit-justify-content: center;
+ justify-content: center;
+ -webkit-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);
+ 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-7 svg {
+ -webkit-transition: -webkit-transform 250ms ease;
+ transition: transform 250ms ease;
+}
+
+.emotion-7:hover {
+ color: rgba(0, 0, 0, 0.88)!important;
+}
+
+.emotion-7:active {
+ scale: 0.8;
+ color: rgba(0, 0, 0, 0.88);
+}
+
+.emotion-34 {
+ height: 24px;
+ padding-block: 2px;
+ margin-top: 4px;
+ color: rgba(0, 0, 0, 0.65);
+ background: rgba(0, 0, 0, 0.02);
+ border-color: transparent;
+}
+
+.emotion-34:hover {
+ color: rgba(0, 0, 0, 0.88)!important;
+ background: rgba(0, 0, 0, 0.06)!important;
+ border-color: transparent!important;
+}
+
+.emotion-34:focus {
+ color: rgba(0, 0, 0, 0.65);
+ background: rgba(0, 0, 0, 0.02);
+ border-color: transparent;
+ border-color: #1677ff!important;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 添加一项
+
+
+
+
+ To pick up a draggable item, press the space bar.
+ While dragging, use the arrow keys to move the item.
+ Press space again to drop the item in its new position, or press escape to cancel.
+
+
+
+
+
+
+`;
+
+exports[` > renders default.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;
+}
+
+.emotion-1 .studio-sortable-tree-node {
+ box-sizing: border-box;
+ padding-left: var(--spacing);
+ list-style: none;
+}
+
+.emotion-1 .studio-sortable-tree-node-clone {
+ display: inline-block;
+ padding: 0;
+ padding-top: 5px;
+ padding-left: 10px;
+ pointer-events: none;
+}
+
+.emotion-1 .studio-sortable-tree-node-clone .studio-sortable-tree-node-body {
+ padding-right: 24px;
+ background-color: #ffffff;
+ border: 1px solid #dedede;
+ border-radius: 4px;
+ box-shadow: 0 15px 15px 0 rgba(34, 33, 81, 0.1);
+}
+
+.emotion-1 .studio-sortable-tree-node:hover .studio-sortable-tree-node-handle {
+ opacity: 1;
+}
+
+.emotion-1 .studio-sortable-tree-node-ghost.studio-sortable-tree-node-indicator {
+ position: relative;
+ z-index: 1;
+ margin-bottom: -1px;
+ opacity: 1;
+}
+
+.emotion-1 .studio-sortable-tree-node-ghost.studio-sortable-tree-node-indicator .studio-sortable-tree-node-body {
+ position: relative;
+ height: 4px;
+ padding: 0;
+ background-color: #56a1f8;
+ border-color: #1677ff;
+}
+
+.emotion-1 .studio-sortable-tree-node-ghost.studio-sortable-tree-node-indicator .studio-sortable-tree-node-body::before {
+ position: absolute;
+ top: -4px;
+ left: -8px;
+ display: block;
+ width: 12px;
+ height: 12px;
+ background-color: #fff;
+ border: 1px solid #1677ff;
+ border-radius: 50%;
+ content: '';
+}
+
+.emotion-1 .studio-sortable-tree-node-ghost.studio-sortable-tree-node-indicator .studio-sortable-tree-node-body>* {
+ height: 0;
+ opacity: 0;
+}
+
+.emotion-1 .studio-sortable-tree-node-ghost:not(.studio-sortable-tree-node-indicator) {
+ opacity: 0.5;
+}
+
+.emotion-1 .studio-sortable-tree-node-ghost .studio-sortable-tree-node-body>* {
+ background-color: transparent;
+ box-shadow: none;
+}
+
+.emotion-1 .studio-sortable-tree-node-body {
+ position: relative;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ box-sizing: border-box;
+ padding: 2px;
+ background-color: rgba(0, 0, 0, 0.02);
+ border-radius: 4px;
+}
+
+.emotion-1 .studio-sortable-tree-node-content {
+ -webkit-box-flex: 1;
+ -webkit-flex-grow: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+
+.emotion-1 .studio-sortable-tree-node-count {
+ position: absolute;
+ top: -10px;
+ right: -10px;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ -webkit-justify-content: center;
+ justify-content: center;
+ width: 24px;
+ height: 24px;
+ color: #fff;
+ font-weight: 600;
+ font-size: 14px;
+ background-color: #1677ff;
+ border-radius: 50%;
+}
+
+.emotion-1 .disableSelection .studio-sortable-tree-node-content,
+.emotion-1 .clone .studio-sortable-tree-node-content,
+.emotion-1 .disableSelection .studio-sortable-tree-node-count,
+.emotion-1 .clone .studio-sortable-tree-node-count {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+.emotion-2 {
+ margin-bottom: 4px;
+}
+
+.emotion-2:hover .studio-sortable-tree-node-handle,
+.emotion-2:hover .studio-sortable-tree-node-remove {
+ opacity: 1;
+}
+
+.emotion-3 {
+ position: absolute;
+ left: -13px;
+ opacity: 0;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ -webkit-justify-content: center;
+ justify-content: center;
+ -webkit-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);
+ 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-3:hover {
+ color: rgba(0, 0, 0, 0.88)!important;
+}
+
+.emotion-3:active {
+ scale: 0.8;
+ color: rgba(0, 0, 0, 0.88);
+}
+
+.emotion-4 {
+ opacity: 0;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ -webkit-justify-content: center;
+ justify-content: center;
+ -webkit-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);
+ 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-4:hover {
+ color: rgba(0, 0, 0, 0.88)!important;
+}
+
+.emotion-4:active {
+ scale: 0.8;
+ color: rgba(0, 0, 0, 0.88);
+}
+
+.emotion-7 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ -webkit-justify-content: center;
+ justify-content: center;
+ -webkit-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);
+ 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-7 svg {
+ -webkit-transition: -webkit-transform 250ms ease;
+ transition: transform 250ms ease;
+}
+
+.emotion-7:hover {
+ color: rgba(0, 0, 0, 0.88)!important;
+}
+
+.emotion-7:active {
+ scale: 0.8;
+ color: rgba(0, 0, 0, 0.88);
+}
+
+.emotion-34 {
+ height: 24px;
+ padding-block: 2px;
+ margin-top: 4px;
+ color: rgba(0, 0, 0, 0.65);
+ background: rgba(0, 0, 0, 0.02);
+ border-color: transparent;
+}
+
+.emotion-34:hover {
+ color: rgba(0, 0, 0, 0.88)!important;
+ background: rgba(0, 0, 0, 0.06)!important;
+ border-color: transparent!important;
+}
+
+.emotion-34:focus {
+ color: rgba(0, 0, 0, 0.65);
+ background: rgba(0, 0, 0, 0.02);
+ border-color: transparent;
+ border-color: #1677ff!important;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 1
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 2
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Spring
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Summer
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Fall
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Winter
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ About Us
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ My Account
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Addresses
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Order History
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 添加一项
+
+
+
+
+ To pick up a draggable item, press the space bar.
+ While dragging, use the arrow keys to move the item.
+ Press space again to drop the item in its new position, or press escape to cancel.
+
+
+
+
+
+
+`;
+
+exports[` > renders disableDrag.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;
+}
+
+.emotion-1 .studio-sortable-tree-node {
+ box-sizing: border-box;
+ padding-left: var(--spacing);
+ list-style: none;
+}
+
+.emotion-1 .studio-sortable-tree-node-clone {
+ display: inline-block;
+ padding: 0;
+ padding-top: 5px;
+ padding-left: 10px;
+ pointer-events: none;
+}
+
+.emotion-1 .studio-sortable-tree-node-clone .studio-sortable-tree-node-body {
+ padding-right: 24px;
+ background-color: #ffffff;
+ border: 1px solid #dedede;
+ border-radius: 4px;
+ box-shadow: 0 15px 15px 0 rgba(34, 33, 81, 0.1);
+}
+
+.emotion-1 .studio-sortable-tree-node:hover .studio-sortable-tree-node-handle {
+ opacity: 1;
+}
+
+.emotion-1 .studio-sortable-tree-node-ghost.studio-sortable-tree-node-indicator {
+ position: relative;
+ z-index: 1;
+ margin-bottom: -1px;
+ opacity: 1;
+}
+
+.emotion-1 .studio-sortable-tree-node-ghost.studio-sortable-tree-node-indicator .studio-sortable-tree-node-body {
+ position: relative;
+ height: 4px;
+ padding: 0;
+ background-color: #56a1f8;
+ border-color: #1677ff;
+}
+
+.emotion-1 .studio-sortable-tree-node-ghost.studio-sortable-tree-node-indicator .studio-sortable-tree-node-body::before {
+ position: absolute;
+ top: -4px;
+ left: -8px;
+ display: block;
+ width: 12px;
+ height: 12px;
+ background-color: #fff;
+ border: 1px solid #1677ff;
+ border-radius: 50%;
+ content: '';
+}
+
+.emotion-1 .studio-sortable-tree-node-ghost.studio-sortable-tree-node-indicator .studio-sortable-tree-node-body>* {
+ height: 0;
+ opacity: 0;
+}
+
+.emotion-1 .studio-sortable-tree-node-ghost:not(.studio-sortable-tree-node-indicator) {
+ opacity: 0.5;
+}
+
+.emotion-1 .studio-sortable-tree-node-ghost .studio-sortable-tree-node-body>* {
+ background-color: transparent;
+ box-shadow: none;
+}
+
+.emotion-1 .studio-sortable-tree-node-body {
+ position: relative;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ box-sizing: border-box;
+ padding: 2px;
+ background-color: rgba(0, 0, 0, 0.02);
+ border-radius: 4px;
+}
+
+.emotion-1 .studio-sortable-tree-node-content {
+ -webkit-box-flex: 1;
+ -webkit-flex-grow: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+
+.emotion-1 .studio-sortable-tree-node-count {
+ position: absolute;
+ top: -10px;
+ right: -10px;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ -webkit-justify-content: center;
+ justify-content: center;
+ width: 24px;
+ height: 24px;
+ color: #fff;
+ font-weight: 600;
+ font-size: 14px;
+ background-color: #1677ff;
+ border-radius: 50%;
+}
+
+.emotion-1 .disableSelection .studio-sortable-tree-node-content,
+.emotion-1 .clone .studio-sortable-tree-node-content,
+.emotion-1 .disableSelection .studio-sortable-tree-node-count,
+.emotion-1 .clone .studio-sortable-tree-node-count {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+.emotion-2 {
+ margin-bottom: 4px;
+}
+
+.emotion-2:hover .studio-sortable-tree-node-handle,
+.emotion-2:hover .studio-sortable-tree-node-remove {
+ opacity: 1;
+}
+
+.emotion-3 {
+ opacity: 0;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ -webkit-justify-content: center;
+ justify-content: center;
+ -webkit-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);
+ 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-3:hover {
+ color: rgba(0, 0, 0, 0.88)!important;
+}
+
+.emotion-3:active {
+ scale: 0.8;
+ color: rgba(0, 0, 0, 0.88);
+}
+
+.emotion-5 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ -webkit-justify-content: center;
+ justify-content: center;
+ -webkit-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);
+ 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-5 svg {
+ -webkit-transition: -webkit-transform 250ms ease;
+ transition: transform 250ms ease;
+}
+
+.emotion-5:hover {
+ color: rgba(0, 0, 0, 0.88)!important;
+}
+
+.emotion-5:active {
+ scale: 0.8;
+ color: rgba(0, 0, 0, 0.88);
+}
+
+.emotion-24 {
+ height: 24px;
+ padding-block: 2px;
+ margin-top: 4px;
+ color: rgba(0, 0, 0, 0.65);
+ background: rgba(0, 0, 0, 0.02);
+ border-color: transparent;
+}
+
+.emotion-24:hover {
+ color: rgba(0, 0, 0, 0.88)!important;
+ background: rgba(0, 0, 0, 0.06)!important;
+ border-color: transparent!important;
+}
+
+.emotion-24:focus {
+ color: rgba(0, 0, 0, 0.65);
+ background: rgba(0, 0, 0, 0.02);
+ border-color: transparent;
+ border-color: #1677ff!important;
+}
+
+
+
+
+
+
+
+ 1
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 2
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Spring
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Summer
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Fall
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Winter
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ About Us
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ My Account
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Addresses
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Order History
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 添加一项
+
+
+
+
+ To pick up a draggable item, press the space bar.
+ While dragging, use the arrow keys to move the item.
+ Press space again to drop the item in its new position, or press escape to cancel.
+
+
+
+
+
+
+`;
+
+exports[` > renders renderContent.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;
+}
+
+.emotion-1 .studio-sortable-tree-node {
+ box-sizing: border-box;
+ padding-left: var(--spacing);
+ list-style: none;
+}
+
+.emotion-1 .studio-sortable-tree-node-clone {
+ display: inline-block;
+ padding: 0;
+ padding-top: 5px;
+ padding-left: 10px;
+ pointer-events: none;
+}
+
+.emotion-1 .studio-sortable-tree-node-clone .studio-sortable-tree-node-body {
+ padding-right: 24px;
+ background-color: #ffffff;
+ border: 1px solid #dedede;
+ border-radius: 4px;
+ box-shadow: 0 15px 15px 0 rgba(34, 33, 81, 0.1);
+}
+
+.emotion-1 .studio-sortable-tree-node:hover .studio-sortable-tree-node-handle {
+ opacity: 1;
+}
+
+.emotion-1 .studio-sortable-tree-node-ghost.studio-sortable-tree-node-indicator {
+ position: relative;
+ z-index: 1;
+ margin-bottom: -1px;
+ opacity: 1;
+}
+
+.emotion-1 .studio-sortable-tree-node-ghost.studio-sortable-tree-node-indicator .studio-sortable-tree-node-body {
+ position: relative;
+ height: 4px;
+ padding: 0;
+ background-color: #56a1f8;
+ border-color: #1677ff;
+}
+
+.emotion-1 .studio-sortable-tree-node-ghost.studio-sortable-tree-node-indicator .studio-sortable-tree-node-body::before {
+ position: absolute;
+ top: -4px;
+ left: -8px;
+ display: block;
+ width: 12px;
+ height: 12px;
+ background-color: #fff;
+ border: 1px solid #1677ff;
+ border-radius: 50%;
+ content: '';
+}
+
+.emotion-1 .studio-sortable-tree-node-ghost.studio-sortable-tree-node-indicator .studio-sortable-tree-node-body>* {
+ height: 0;
+ opacity: 0;
+}
+
+.emotion-1 .studio-sortable-tree-node-ghost:not(.studio-sortable-tree-node-indicator) {
+ opacity: 0.5;
+}
+
+.emotion-1 .studio-sortable-tree-node-ghost .studio-sortable-tree-node-body>* {
+ background-color: transparent;
+ box-shadow: none;
+}
+
+.emotion-1 .studio-sortable-tree-node-body {
+ position: relative;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ box-sizing: border-box;
+ padding: 2px;
+ background-color: rgba(0, 0, 0, 0.02);
+ border-radius: 4px;
+}
+
+.emotion-1 .studio-sortable-tree-node-content {
+ -webkit-box-flex: 1;
+ -webkit-flex-grow: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+
+.emotion-1 .studio-sortable-tree-node-count {
+ position: absolute;
+ top: -10px;
+ right: -10px;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ -webkit-justify-content: center;
+ justify-content: center;
+ width: 24px;
+ height: 24px;
+ color: #fff;
+ font-weight: 600;
+ font-size: 14px;
+ background-color: #1677ff;
+ border-radius: 50%;
+}
+
+.emotion-1 .disableSelection .studio-sortable-tree-node-content,
+.emotion-1 .clone .studio-sortable-tree-node-content,
+.emotion-1 .disableSelection .studio-sortable-tree-node-count,
+.emotion-1 .clone .studio-sortable-tree-node-count {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+.emotion-2 {
+ margin-bottom: 4px;
+}
+
+.emotion-2:hover .studio-sortable-tree-node-handle,
+.emotion-2:hover .studio-sortable-tree-node-remove {
+ opacity: 1;
+}
+
+.emotion-3 {
+ position: absolute;
+ left: -13px;
+ opacity: 0;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ -webkit-justify-content: center;
+ justify-content: center;
+ -webkit-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);
+ 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-3:hover {
+ color: rgba(0, 0, 0, 0.88)!important;
+}
+
+.emotion-3:active {
+ scale: 0.8;
+ color: rgba(0, 0, 0, 0.88);
+}
+
+.emotion-4 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ gap: 4px;
+}
+
+.emotion-5 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ -webkit-justify-content: center;
+ justify-content: center;
+ -webkit-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);
+ 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-5:hover {
+ color: rgba(0, 0, 0, 0.88)!important;
+}
+
+.emotion-5:active {
+ scale: 0.8;
+ color: rgba(0, 0, 0, 0.88);
+}
+
+.emotion-6 {
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ background: rgba(0, 0, 0, 0.06);
+}
+
+.emotion-7 {
+ opacity: 0;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ -webkit-justify-content: center;
+ justify-content: center;
+ -webkit-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);
+ 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-7:hover {
+ color: rgba(0, 0, 0, 0.88)!important;
+}
+
+.emotion-7:active {
+ scale: 0.8;
+ color: rgba(0, 0, 0, 0.88);
+}
+
+.emotion-10 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ -webkit-justify-content: center;
+ justify-content: center;
+ -webkit-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);
+ 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-10 svg {
+ -webkit-transition: -webkit-transform 250ms ease;
+ transition: transform 250ms ease;
+}
+
+.emotion-10:hover {
+ color: rgba(0, 0, 0, 0.88)!important;
+}
+
+.emotion-10:active {
+ scale: 0.8;
+ color: rgba(0, 0, 0, 0.88);
+}
+
+.emotion-64 {
+ height: 24px;
+ padding-block: 2px;
+ margin-top: 4px;
+ color: rgba(0, 0, 0, 0.65);
+ background: rgba(0, 0, 0, 0.02);
+ border-color: transparent;
+}
+
+.emotion-64:hover {
+ color: rgba(0, 0, 0, 0.88)!important;
+ background: rgba(0, 0, 0, 0.06)!important;
+ border-color: transparent!important;
+}
+
+.emotion-64:focus {
+ color: rgba(0, 0, 0, 0.65);
+ background: rgba(0, 0, 0, 0.02);
+ border-color: transparent;
+ border-color: #1677ff!important;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 添加一项
+
+
+
+
+ To pick up a draggable item, press the space bar.
+ While dragging, use the arrow keys to move the item.
+ Press space again to drop the item in its new position, or press escape to cancel.
+
+
+
+
+
+
+`;
+
+exports[` > renders sortableRule.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;
+}
+
+.emotion-1 .studio-sortable-tree-node {
+ box-sizing: border-box;
+ padding-left: var(--spacing);
+ list-style: none;
+}
+
+.emotion-1 .studio-sortable-tree-node-clone {
+ display: inline-block;
+ padding: 0;
+ padding-top: 5px;
+ padding-left: 10px;
+ pointer-events: none;
+}
+
+.emotion-1 .studio-sortable-tree-node-clone .studio-sortable-tree-node-body {
+ padding-right: 24px;
+ background-color: #ffffff;
+ border: 1px solid #dedede;
+ border-radius: 4px;
+ box-shadow: 0 15px 15px 0 rgba(34, 33, 81, 0.1);
+}
+
+.emotion-1 .studio-sortable-tree-node:hover .studio-sortable-tree-node-handle {
+ opacity: 1;
+}
+
+.emotion-1 .studio-sortable-tree-node-ghost.studio-sortable-tree-node-indicator {
+ position: relative;
+ z-index: 1;
+ margin-bottom: -1px;
+ opacity: 1;
+}
+
+.emotion-1 .studio-sortable-tree-node-ghost.studio-sortable-tree-node-indicator .studio-sortable-tree-node-body {
+ position: relative;
+ height: 4px;
+ padding: 0;
+ background-color: #56a1f8;
+ border-color: #1677ff;
+}
+
+.emotion-1 .studio-sortable-tree-node-ghost.studio-sortable-tree-node-indicator .studio-sortable-tree-node-body::before {
+ position: absolute;
+ top: -4px;
+ left: -8px;
+ display: block;
+ width: 12px;
+ height: 12px;
+ background-color: #fff;
+ border: 1px solid #1677ff;
+ border-radius: 50%;
+ content: '';
+}
+
+.emotion-1 .studio-sortable-tree-node-ghost.studio-sortable-tree-node-indicator .studio-sortable-tree-node-body>* {
+ height: 0;
+ opacity: 0;
+}
+
+.emotion-1 .studio-sortable-tree-node-ghost:not(.studio-sortable-tree-node-indicator) {
+ opacity: 0.5;
+}
+
+.emotion-1 .studio-sortable-tree-node-ghost .studio-sortable-tree-node-body>* {
+ background-color: transparent;
+ box-shadow: none;
+}
+
+.emotion-1 .studio-sortable-tree-node-body {
+ position: relative;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ box-sizing: border-box;
+ padding: 2px;
+ background-color: rgba(0, 0, 0, 0.02);
+ border-radius: 4px;
+}
+
+.emotion-1 .studio-sortable-tree-node-content {
+ -webkit-box-flex: 1;
+ -webkit-flex-grow: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+
+.emotion-1 .studio-sortable-tree-node-count {
+ position: absolute;
+ top: -10px;
+ right: -10px;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ -webkit-justify-content: center;
+ justify-content: center;
+ width: 24px;
+ height: 24px;
+ color: #fff;
+ font-weight: 600;
+ font-size: 14px;
+ background-color: #1677ff;
+ border-radius: 50%;
+}
+
+.emotion-1 .disableSelection .studio-sortable-tree-node-content,
+.emotion-1 .clone .studio-sortable-tree-node-content,
+.emotion-1 .disableSelection .studio-sortable-tree-node-count,
+.emotion-1 .clone .studio-sortable-tree-node-count {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+.emotion-2 {
+ margin-bottom: 4px;
+}
+
+.emotion-2:hover .studio-sortable-tree-node-handle,
+.emotion-2:hover .studio-sortable-tree-node-remove {
+ opacity: 1;
+}
+
+.emotion-3 {
+ position: absolute;
+ left: -13px;
+ opacity: 0;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ -webkit-justify-content: center;
+ justify-content: center;
+ -webkit-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);
+ 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-3:hover {
+ color: rgba(0, 0, 0, 0.88)!important;
+}
+
+.emotion-3:active {
+ scale: 0.8;
+ color: rgba(0, 0, 0, 0.88);
+}
+
+.emotion-4 {
+ opacity: 0;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ -webkit-justify-content: center;
+ justify-content: center;
+ -webkit-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);
+ 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-4:hover {
+ color: rgba(0, 0, 0, 0.88)!important;
+}
+
+.emotion-4:active {
+ scale: 0.8;
+ color: rgba(0, 0, 0, 0.88);
+}
+
+.emotion-7 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ -webkit-justify-content: center;
+ justify-content: center;
+ -webkit-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);
+ 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-7 svg {
+ -webkit-transition: -webkit-transform 250ms ease;
+ transition: transform 250ms ease;
+}
+
+.emotion-7:hover {
+ color: rgba(0, 0, 0, 0.88)!important;
+}
+
+.emotion-7:active {
+ scale: 0.8;
+ color: rgba(0, 0, 0, 0.88);
+}
+
+.emotion-34 {
+ height: 24px;
+ padding-block: 2px;
+ margin-top: 4px;
+ color: rgba(0, 0, 0, 0.65);
+ background: rgba(0, 0, 0, 0.02);
+ border-color: transparent;
+}
+
+.emotion-34:hover {
+ color: rgba(0, 0, 0, 0.88)!important;
+ background: rgba(0, 0, 0, 0.06)!important;
+ border-color: transparent!important;
+}
+
+.emotion-34:focus {
+ color: rgba(0, 0, 0, 0.65);
+ background: rgba(0, 0, 0, 0.02);
+ border-color: transparent;
+ border-color: #1677ff!important;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 1
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 2
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Spring
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Summer
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Fall
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Winter
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ About Us
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ My Account
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Addresses
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Order History
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 添加一项
+
+
+
+
+ To pick up a draggable item, press the space bar.
+ While dragging, use the arrow keys to move the item.
+ Press space again to drop the item in its new position, or press escape to cancel.
+
+
+
+
+
+
+`;
+
+exports[` > renders controlled.tsx correctly 1`] = `
+.emotion-0 {
+ position: relative;
+ width: -webkit-fit-content;
+ width: -moz-fit-content;
+ width: fit-content;
+}
+
+.emotion-1 {
+ position: absolute;
+ left: 50%;
+ -webkit-transform: translate(-50%);
+ -moz-transform: translate(-50%);
+ -ms-transform: translate(-50%);
+ transform: translate(-50%);
+}
+
+
+
+
+
+
+ Open
+
+
+
+
+
+
+ Close
+
+
+
+
+
+
+`;
+
+exports[` > renders footer.tsx correctly 1`] = `
+.emotion-0 {
+ position: relative;
+ width: -webkit-fit-content;
+ width: -moz-fit-content;
+ width: fit-content;
+}
+
+.emotion-1 {
+ position: absolute;
+ left: 50%;
+ -webkit-transform: translate(-50%);
+ -moz-transform: translate(-50%);
+ -ms-transform: translate(-50%);
+ transform: translate(-50%);
+}
+
+
+
+
+
+ Open
+
+
+
+
+
+
+
+
+
+`;
+
+exports[` > renders localStorage.tsx correctly 1`] = `
+.emotion-0 {
+ position: relative;
+ width: -webkit-fit-content;
+ width: -moz-fit-content;
+ width: fit-content;
+}
+
+.emotion-1 {
+ position: absolute;
+ left: 50%;
+ -webkit-transform: translate(-50%);
+ -moz-transform: translate(-50%);
+ -ms-transform: translate(-50%);
+ transform: translate(-50%);
+}
+
+
+
+
+
+
+
+ Clear LocalStorage
+
+
+
+
+
+
+`;
+
+exports[` > renders normal.tsx correctly 1`] = `
+.emotion-0 {
+ position: relative;
+ width: -webkit-fit-content;
+ width: -moz-fit-content;
+ width: fit-content;
+}
+
+.emotion-1 {
+ position: absolute;
+ left: 50%;
+ -webkit-transform: translate(-50%);
+ -moz-transform: translate(-50%);
+ -ms-transform: translate(-50%);
+ transform: translate(-50%);
+}
+
+
+
+
+
+ Button
+
+
+
+
+
+
+
+
+
+`;
+
+exports[` > renders offset.tsx correctly 1`] = `
+.emotion-0 {
+ position: relative;
+ width: -webkit-fit-content;
+ width: -moz-fit-content;
+ width: fit-content;
+}
+
+.emotion-1 {
+ position: absolute;
+ left: 50%;
+ -webkit-transform: translate(-50%);
+ -moz-transform: translate(-50%);
+ -ms-transform: translate(-50%);
+ transform: translate(-50%);
+}
+
+
+
+
+
+ Pro-Editor
+
+
+
+
+
+
+
+
+
+`;
+
+exports[` > renders basic.tsx correctly 1`] = `
+.emotion-0:hover {
+ color: rgba(0, 0, 0, 0.88);
+ background-color: rgba(0, 0, 0, 0.04);
+ border-color: transparent;
+}
+
+.emotion-0:focus {
+ color: rgba(0, 0, 0, 0.88)!important;
+ background-color: rgba(0, 0, 0, 0.02)!important;
+ border-color: #1677ff!important;
+ box-shadow: none;
+}
+
+
+`;
+
+exports[` > renders inputNumber.tsx correctly 1`] = `
+.emotion-0:hover {
+ color: rgba(0, 0, 0, 0.88);
+ background-color: rgba(0, 0, 0, 0.04);
+ border-color: transparent;
+}
+
+.emotion-0:focus {
+ color: rgba(0, 0, 0, 0.88)!important;
+ background-color: rgba(0, 0, 0, 0.02)!important;
+ border-color: #1677ff!important;
+ box-shadow: none;
+}
+
+.emotion-0 .studio-input-number-group-addon {
+ padding: 0 4px;
+ color: rgba(0, 0, 0, 0.45);
+ background: rgba(0, 0, 0, 0.02);
+ border-color: transparent;
+}
+
+
+`;
+
+exports[` > renders segmented.tsx correctly 1`] = `
+.emotion-0 {
+ padding: 4px;
+}
+
+.emotion-0 .studio-segmented-item {
+ margin-right: 4px;
+ color: rgba(0, 0, 0, 0.45);
+ border-radius: 2px;
+}
+
+.emotion-0 .studio-segmented-item:hover {
+ color: rgba(0, 0, 0, 0.65);
+}
+
+.emotion-0 .studio-segmented-item:last-child {
+ margin-right: 0;
+}
+
+.emotion-0 .studio-segmented-item-selected {
+ color: rgba(0, 0, 0, 0.88);
+}
+
+.emotion-0 .studio-segmented-item-selected:hover {
+ color: rgba(0, 0, 0, 0.88);
+}
+
+.emotion-0 .studio-segmented-item-label {
+ min-height: auto;
+ padding: 2px 7px;
+ line-height: unset;
+}
+
+
+
+
+
+ canvas
+
+
+
+
+ canvas
+
+
+
+`;
+
+exports[` > renders select.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;
+ gap: 12px;
+}
+
+.emotion-1 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ gap: 16px;
+}
+
+.emotion-2.studio-select-multiple:not(.emotion-2.studio-select-customize-input) .emotion-2.studio-select.studio-select-selector:hover {
+ color: rgba(0, 0, 0, 0.88);
+ background-color: rgba(0, 0, 0, 0.04);
+ border-color: transparent;
+}
+
+.emotion-2.studio-select-multiple:not(.emotion-2.studio-select-customize-input) .emotion-2.studio-select.studio-select-selector:focus {
+ color: rgba(0, 0, 0, 0.88)!important;
+ background-color: rgba(0, 0, 0, 0.02)!important;
+ border-color: #1677ff!important;
+ box-shadow: none;
+}
+
+.emotion-2.studio-select:not(.studio-select-disabled):not(.studio-select-customize-input):hover .studio-select-selector {
+ border-color: transparent;
+}
+
+.emotion-2.studio-select:not(.studio-select-disabled):not(.studio-select-customize-input):hover .studio-select-selector:hover {
+ color: rgba(0, 0, 0, 0.88);
+ background-color: rgba(0, 0, 0, 0.04);
+ border-color: transparent;
+}
+
+.emotion-2.studio-select:not(.studio-select-disabled):not(.studio-select-customize-input):hover .studio-select-selector:focus {
+ color: rgba(0, 0, 0, 0.88)!important;
+ background-color: rgba(0, 0, 0, 0.02)!important;
+ border-color: #1677ff!important;
+ box-shadow: none;
+}
+
+.emotion-2.studio-select-focused:not(.studio-select-disabled):not(.studio-select-customize-input):hover .studio-select-selector {
+ color: rgba(0, 0, 0, 0.88)!important;
+ background-color: rgba(0, 0, 0, 0.02)!important;
+ border-color: #1677ff!important;
+ box-shadow: none;
+}
+
+.emotion-2.studio-select-focused:not(.studio-select-disabled):not(.studio-select-customize-input) .studio-select-selector {
+ color: rgba(0, 0, 0, 0.88)!important;
+ background-color: rgba(0, 0, 0, 0.02)!important;
+ border-color: #1677ff!important;
+ box-shadow: none;
+}
+
+.emotion-2 .studio-select-arrow {
+ top: 13px;
+ right: 8px;
+ width: 10px;
+ height: 10px;
+ font-size: 10px;
+}
+
+
+
+
+
+
+
+ 默认
+
+
+
+
+
+
+ 请输入
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 123
+
+
+
+
+
+
+
+
+
+
+
+
+ 小尺寸
+
+
+
+
+
+
+ 请输入
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 123
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[` > renders tabs.tsx correctly 1`] = `
+.emotion-0 {
+ position: relative;
+ height: 100%;
+}
+
+.emotion-0 .studio-tabs-tab+.studio-tabs-tab {
+ margin: 8px 4px!important;
+ padding: 0 12px!important;
+}
+
+.emotion-0 .studio-tabs-tab {
+ color: rgba(0, 0, 0, 0.65);
+ -webkit-transition: background-color 150ms ease-out;
+ transition: background-color 150ms ease-out;
+}
+
+.emotion-0 .studio-tabs-tab:first-child {
+ margin: 8px 4px 8px 0;
+ padding: 4px 12px!important;
+}
+
+.emotion-0 .studio-tabs-tab:hover {
+ color: rgba(0, 0, 0, 0.88)!important;
+ background: rgba(0, 0, 0, 0.04);
+ border-radius: 4px;
+}
+
+.emotion-0 .studio-tabs-nav {
+ height: 46px;
+ padding: 0 12px;
+ padding-right: 8px!important;
+}
+
+.emotion-0 .studio-tabs-nav {
+ position: absolute!important;
+ z-index: 10;
+ width: 100%;
+ background: rgba(255,255,255,0.6);
+ -webkit-backdrop-filter: blur(10px);
+ backdrop-filter: blur(10px);
+}
+
+.emotion-0 .studio-tabs-content-holder {
+ padding-top: 54px;
+ overflow-y: auto;
+}
+
+
+
+
+
+
+
+ Content of Tab Pane 1
+
+
+
+
+
+`;
+
+exports[` > renders tree.tsx correctly 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ parent 1
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ parent 1-0
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ leaf
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ leaf
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ parent 1-1
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ sss
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[` > renders treeselect.tsx correctly 1`] = `
+
+
+
+
+
+
+
+ Please select
+
+
+
+
+
+
+
+
+
+
+
+`;