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; +} + +
+
+
+
  • +
    + + + + + +
    +
    • +
  • +
    + + + + + + +
    +
    • +
  • +
    + + + + + +
    +
    • +
  • +
    + + + + + +
    +
    • +
  • +
    + + + + + +
    +
    • +
  • +
    + + + + + +
    +
    • +
  • +
    + + + + + +
    +
    • +
  • +
    + + + + + + +
    +
    • +
  • +
    + + + + + +
    +
    • +
  • +
    + + + + + +
    +
    • + + +
    +
    +
    +
    +`; + +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 + + +
    +
    • + + +
    +
    +
    +
    +`; + +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 + + +
    +
    • + + +
    +
    +
    +
    +`; + +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; +} + +
    +
    +
    +
  • +
    + + +
    +
    + +
    + +
    +     + +
    +
    • +
  • +
    + + + +
    +
    + +
    + +
    +     + +
    +
    • +
  • +
    + + +
    +
    + +
    + +
    +     + +
    +
    • +
  • +
    + + +
    +
    + +
    + +
    +     + +
    +
    • +
  • +
    + + +
    +
    + +
    + +
    +     + +
    +
    • +
  • +
    + + +
    +
    + +
    + +
    +     + +
    +
    • +
  • +
    + + +
    +
    + +
    + +
    +     + +
    +
    • +
  • +
    + + + +
    +
    + +
    + +
    +     + +
    +
    • +
  • +
    + + +
    +
    + +
    + +
    +     + +
    +
    • +
  • +
    + + +
    +
    + +
    + +
    +     + +
    +
    • + + +
    +
    +
    +
    +`; + +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 + + +
    +
    • + + +
    +
    +
    +
    +`; + +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%); +} + +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + + + + + + + +
    +
    + No data +
    +
    +
    +
    +
    +
    +
    + + + +
    +
    +
    +
    +
    +`; + +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%); +} + +
    +
    + +
    + + + +
    +
    +
    +`; + +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%); +} + +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + + + + + + + +
    +
    + No data +
    +
    +
    +
    +
    +
    +
    + + + +
    +
    +
    +
    +
    +`; + +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%); +} + +
    +
    + +
    + + + +
    +
    +
    +`; + +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%); +} + +
    +
    + +
    + + + +
    +
    +
    +`; + +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; +} + +
    +
    +
    + Input +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +`; + +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; +} + +
    +
    +
    + InputNumber +
    +
    +
    +
    +
    +
    +
    +
    + + + + + + + + + + +
    +
    + +
    +
    +
    + 列 +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + + + + + + + + +
    +
    + +
    +
    +
    + 列 +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + + + + + + + + +
    +
    + +
    +
    +
    + 列 +
    +
    +
    +
    +
    +
    +
    +
    +`; + +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 +
    + +
    +`; + +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; +} + +
    +
    +
    +
    +
    + Select +
    +
    +
    +
    +
    +
    + 默认 +
    +
    + + + + + 请输入 + +
    + +
    +
    +
    + + + + + 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`] = ` +
    +
    +
    + +
    + +
    +`; + +exports[` > renders treeselect.tsx correctly 1`] = ` +
    +
    +
    + + + + + Please select + +
    + +
    +
    +`;