amis 2.5.2 → 2.5.3-beta.0

package/lib/themes/cxd-ie11.css

@@ -8606,6 +8606,7 @@ body.video-react-full-window .video-react-fullscreen {
   margin: 0;
   padding: 0 12px;
   border-spacing: 0 8px;
+  border-collapse: inherit;
 }
 .rdtMonths table,
 .rdtYears table {
@@ -9203,7 +9204,7 @@ body {
   z-index: 1200;
 }
 .cxd-Layout-brandBar {
-  background: #001259;
+  background: #151b26;
   color: #a0a0a0;
 }
 .cxd-Layout-brandBar > button {
@@ -9252,7 +9253,7 @@ body {
 }
 .cxd-Layout-aside {
   position: relative;
-  background: #001259;
+  background: #151b26;
   color: #a0a0a0;
 }
 .cxd-Layout-aside:before {
@@ -20761,19 +20762,24 @@ input[type=button].cxd-Button--block {
 .cxd-PaginationWrapper-pager:first-child {
   margin-bottom: 0.5rem;
 }
-.cxd-Wrapper--xs {
+.cxd-Wrapper--xs,
+.cxd-Container--xs {
   padding: 0.25rem;
 }
-.cxd-Wrapper--sm {
+.cxd-Wrapper--sm,
+.cxd-Container--sm {
   padding: 0.5rem;
 }
-.cxd-Wrapper--md {
+.cxd-Wrapper--md,
+.cxd-Container--md {
   padding: 1rem;
 }
-.cxd-Wrapper--lg {
+.cxd-Wrapper--lg,
+.cxd-Container--lg {
   padding: 1.25rem;
 }
-.cxd-Wrapper--xl {
+.cxd-Wrapper--xl,
+.cxd-Container--xl {
   padding: 1.5rem;
 }
 .cxd-StatusField {
@@ -21993,9 +21999,6 @@ input[type=button].cxd-Button--block {
 .cxd-ResultBox.cxd-TransferDropDown {
   padding: 0 0.75rem;
 }
-.cxd-ResultBox.cxd-TransferDropDown.is-group {
-  padding: 0.25rem;
-}
 .cxd-ResultBox.cxd-TransferDropDown.is-group > .cxd-TransferDropDown-icon {
   margin-right: 0.5rem;
 }
@@ -24442,7 +24445,6 @@ input.cxd-TextControl-input-password {
 .cxd-TableSelection .cxd-Table-table > thead > tr > th:first-child,
 .cxd-TableSelection .cxd-Table-table > tbody > tr > td:first-child {
   padding-left: 0.625rem;
-  padding-right: 0;
 }
 .cxd-TableSelection .cxd-Table-table > thead > tr > th:last-child,
 .cxd-TableSelection .cxd-Table-table > tbody > tr > td:last-child {
@@ -25494,9 +25496,10 @@ input.cxd-TextControl-input-password {
   z-index: 2;
 }
 .cxd-Select-clear svg {
-  fill: #84878c;
-  width: 0.875rem;
-  height: 0.875rem;
+  fill: #d4d6d9;
+  color: #d4d6d9;
+  width: 14px;
+  height: 14px;
   top: 0;
 }
 .cxd-Select-clear svg:hover > path:first-of-type {
@@ -27940,7 +27943,7 @@ td.rdtQuarter.rdtDisabled:hover {
   top: 2px;
   width: 1rem;
   height: 1rem;
-  margin-left: vvar(--sizes-size-5);
+  margin-left: 0.5rem;
 }
 .cxd-Tree.is-disabled {
   pointer-events: none;
@@ -27971,7 +27974,7 @@ td.rdtQuarter.rdtDisabled:hover {
      -moz-user-select: none;
           user-select: none;
   margin-bottom: 0.25rem;
-  padding-left: vvar(--sizes-size-5);
+  padding-left: 0.5rem;
 }
 .cxd-Tree-itemLabel > * {
   position: relative;
@@ -28021,12 +28024,12 @@ td.rdtQuarter.rdtDisabled:hover {
   vertical-align: top;
   height: 1.5rem;
   line-height: 1.5rem;
-  padding-right: vvar(--sizes-size-5);
+  padding-right: 0.5rem;
 }
 .cxd-Tree-item-icons > a {
   display: inline-block;
   vertical-align: middle;
-  margin-left: vvar(--sizes-size-5);
+  margin-left: 0.5rem;
   cursor: pointer;
 }
 .cxd-Tree-item-icons > a > svg {
@@ -28043,7 +28046,7 @@ td.rdtQuarter.rdtDisabled:hover {
 .cxd-Tree-itemInput > a {
   display: inline-block;
   cursor: pointer;
-  margin-left: vvar(--sizes-size-5);
+  margin-left: 0.5rem;
   color: #84878c;
 }
 .cxd-Tree-itemInput > a:hover {
@@ -28097,7 +28100,7 @@ td.rdtQuarter.rdtDisabled:hover {
   width: 0.875rem;
   height: 0.875rem;
   top: 0.109375rem;
-  margin-right: vvar(--sizes-size-5);
+  margin-right: 0.5rem;
 }
 .cxd-Tree-itemArrow {
   cursor: pointer;
@@ -28118,14 +28121,14 @@ td.rdtQuarter.rdtDisabled:hover {
 }
 .cxd-Tree-itemArrowPlaceholder {
   display: inline-block;
-  width: calc(1rem + vvar(--sizes-size-5));
+  width: calc(1rem + 0.5rem);
 }
 .cxd-Tree-itemDrager {
   cursor: move;
   color: #84878c;
 }
 .cxd-Tree-spinner {
-  margin-right: vvar(--sizes-size-5);
+  margin-right: 0.5rem;
 }
 .cxd-Tree-itemIcon {
   display: inline-flex;

package/lib/themes/cxd.css

@@ -708,7 +708,7 @@
   --Layout-aside--lg-width: 18.75rem;
   --Layout-aside--md-width: 15.625rem;
   --Layout-aside--sm-width: 9.375rem;
-  --Layout-aside-bg: var(--colors-brand-1);
+  --Layout-aside-bg: var(--colors-neutral-fill-2);
   --Layout-aside-color: #a0a0a0;
   --Layout-aside-onAcitve-bg: #272d33;
   --Layout-aside-onHover-bg: #2c3239;
@@ -731,7 +731,7 @@
   --Layout-asideLink-onHover-iconColor: (--colors-brand-6);
   --Layout-asideLink-onHover-iconSize: var(--sizes-size-9);
   --Layout-asideLink-onHover-arrowColor: var(--colors-neutral-text-11);
-  --Layout-brand-bg: var(--colors-brand-1);
+  --Layout-brand-bg: var(--colors-neutral-fill-2);
   --Layout-brand-color: var(--colors-neutral-text-11);
   --Layout-brandBar-color: #a0a0a0;
   --Layout-header-bg: var(--colors-neutral-fill-10);
@@ -1309,7 +1309,7 @@
   --TabsTransfer-title-bg: #f7f7f9;
   --TabsTransfer-border-color: #e8e9eb;
   --Tree-indent: var(--gap-md);
-  --Tree-icon-gap: vvar(--sizes-size-5);
+  --Tree-icon-gap: var(--sizes-size-5);
   --Tree-icon-margin-right: 0.5rem;
   --Tree-inputHeight: calc(var(--Form-input-height) * 0.85);
   --Tree-item-onHover-bg: var(--colors-neutral-fill-10);
@@ -11216,6 +11216,7 @@ body.video-react-full-window .video-react-fullscreen {
   margin: 0;
   padding: 0 12px;
   border-spacing: 0 8px;
+  border-collapse: inherit;
 }
 .rdtMonths table,
 .rdtYears table {
@@ -23263,19 +23264,24 @@ input[type=button].cxd-Button--block {
 .cxd-PaginationWrapper-pager:first-child {
   margin-bottom: var(--gap-sm);
 }
-.cxd-Wrapper--xs {
+.cxd-Wrapper--xs,
+.cxd-Container--xs {
   padding: var(--gap-xs);
 }
-.cxd-Wrapper--sm {
+.cxd-Wrapper--sm,
+.cxd-Container--sm {
   padding: var(--gap-sm);
 }
-.cxd-Wrapper--md {
+.cxd-Wrapper--md,
+.cxd-Container--md {
   padding: var(--gap-md);
 }
-.cxd-Wrapper--lg {
+.cxd-Wrapper--lg,
+.cxd-Container--lg {
   padding: var(--gap-lg);
 }
-.cxd-Wrapper--xl {
+.cxd-Wrapper--xl,
+.cxd-Container--xl {
   padding: var(--gap-xl);
 }
 .cxd-StatusField {
@@ -24480,9 +24486,6 @@ input[type=button].cxd-Button--block {
 .cxd-ResultBox.cxd-TransferDropDown {
   padding: 0 var(--gap-base);
 }
-.cxd-ResultBox.cxd-TransferDropDown.is-group {
-  padding: var(--gap-xs);
-}
 .cxd-ResultBox.cxd-TransferDropDown.is-group > .cxd-TransferDropDown-icon {
   margin-right: var(--gap-sm);
 }
@@ -26874,7 +26877,6 @@ input.cxd-TextControl-input-password {
 .cxd-TableSelection .cxd-Table-table > thead > tr > th:first-child,
 .cxd-TableSelection .cxd-Table-table > tbody > tr > td:first-child {
   padding-left: 0.625rem;
-  padding-right: 0;
 }
 .cxd-TableSelection .cxd-Table-table > thead > tr > th:last-child,
 .cxd-TableSelection .cxd-Table-table > tbody > tr > td:last-child {
@@ -27904,9 +27906,10 @@ input.cxd-TextControl-input-password {
   z-index: 2;
 }
 .cxd-Select-clear svg {
-  fill: var(--Form-input-iconColor);
-  width: 0.875rem;
-  height: 0.875rem;
+  fill: var(--Form-input-clearBtn-color);
+  color: var(--Form-input-clearBtn-color);
+  width: var(--Form-input-clearBtn-size);
+  height: var(--Form-input-clearBtn-size);
   top: 0;
 }
 .cxd-Select-clear svg:hover > path:first-of-type {

package/lib/themes/dark-ie11.css

@@ -8606,6 +8606,7 @@ body.video-react-full-window .video-react-fullscreen {
   margin: 0;
   padding: 0 12px;
   border-spacing: 0 8px;
+  border-collapse: inherit;
 }
 .rdtMonths table,
 .rdtYears table {
@@ -9203,7 +9204,7 @@ body {
   z-index: 1200;
 }
 .dark-Layout-brandBar {
-  background: #002566;
+  background: #151e26;
   color: #a0a0a0;
 }
 .dark-Layout-brandBar > button {
@@ -9252,7 +9253,7 @@ body {
 }
 .dark-Layout-aside {
   position: relative;
-  background: #002566;
+  background: #151e26;
   color: #a0a0a0;
 }
 .dark-Layout-aside:before {
@@ -20761,19 +20762,24 @@ input[type=button].dark-Button--block {
 .dark-PaginationWrapper-pager:first-child {
   margin-bottom: 0.5rem;
 }
-.dark-Wrapper--xs {
+.dark-Wrapper--xs,
+.dark-Container--xs {
   padding: 0.25rem;
 }
-.dark-Wrapper--sm {
+.dark-Wrapper--sm,
+.dark-Container--sm {
   padding: 0.5rem;
 }
-.dark-Wrapper--md {
+.dark-Wrapper--md,
+.dark-Container--md {
   padding: 1rem;
 }
-.dark-Wrapper--lg {
+.dark-Wrapper--lg,
+.dark-Container--lg {
   padding: 1.25rem;
 }
-.dark-Wrapper--xl {
+.dark-Wrapper--xl,
+.dark-Container--xl {
   padding: 1.5rem;
 }
 .dark-StatusField {
@@ -21993,9 +21999,6 @@ input[type=button].dark-Button--block {
 .dark-ResultBox.dark-TransferDropDown {
   padding: 0 0.75rem;
 }
-.dark-ResultBox.dark-TransferDropDown.is-group {
-  padding: 0.25rem;
-}
 .dark-ResultBox.dark-TransferDropDown.is-group > .dark-TransferDropDown-icon {
   margin-right: 0.5rem;
 }
@@ -24442,7 +24445,6 @@ input.dark-TextControl-input-password {
 .dark-TableSelection .dark-Table-table > thead > tr > th:first-child,
 .dark-TableSelection .dark-Table-table > tbody > tr > td:first-child {
   padding-left: 0.625rem;
-  padding-right: 0;
 }
 .dark-TableSelection .dark-Table-table > thead > tr > th:last-child,
 .dark-TableSelection .dark-Table-table > tbody > tr > td:last-child {
@@ -25494,9 +25496,10 @@ input.dark-TextControl-input-password {
   z-index: 2;
 }
 .dark-Select-clear svg {
-  fill: #84888c;
-  width: 0.875rem;
-  height: 0.875rem;
+  fill: #d4d7d9;
+  color: #d4d7d9;
+  width: 14px;
+  height: 14px;
   top: 0;
 }
 .dark-Select-clear svg:hover > path:first-of-type {
@@ -27940,7 +27943,7 @@ td.rdtQuarter.rdtDisabled:hover {
   top: 2px;
   width: 1rem;
   height: 1rem;
-  margin-left: vvar(--sizes-size-5);
+  margin-left: 0.5rem;
 }
 .dark-Tree.is-disabled {
   pointer-events: none;
@@ -27971,7 +27974,7 @@ td.rdtQuarter.rdtDisabled:hover {
      -moz-user-select: none;
           user-select: none;
   margin-bottom: 0.25rem;
-  padding-left: vvar(--sizes-size-5);
+  padding-left: 0.5rem;
 }
 .dark-Tree-itemLabel > * {
   position: relative;
@@ -28021,12 +28024,12 @@ td.rdtQuarter.rdtDisabled:hover {
   vertical-align: top;
   height: 1.5rem;
   line-height: 1.5rem;
-  padding-right: vvar(--sizes-size-5);
+  padding-right: 0.5rem;
 }
 .dark-Tree-item-icons > a {
   display: inline-block;
   vertical-align: middle;
-  margin-left: vvar(--sizes-size-5);
+  margin-left: 0.5rem;
   cursor: pointer;
 }
 .dark-Tree-item-icons > a > svg {
@@ -28043,7 +28046,7 @@ td.rdtQuarter.rdtDisabled:hover {
 .dark-Tree-itemInput > a {
   display: inline-block;
   cursor: pointer;
-  margin-left: vvar(--sizes-size-5);
+  margin-left: 0.5rem;
   color: #84888c;
 }
 .dark-Tree-itemInput > a:hover {
@@ -28097,7 +28100,7 @@ td.rdtQuarter.rdtDisabled:hover {
   width: 0.875rem;
   height: 0.875rem;
   top: 0.109375rem;
-  margin-right: vvar(--sizes-size-5);
+  margin-right: 0.5rem;
 }
 .dark-Tree-itemArrow {
   cursor: pointer;
@@ -28118,14 +28121,14 @@ td.rdtQuarter.rdtDisabled:hover {
 }
 .dark-Tree-itemArrowPlaceholder {
   display: inline-block;
-  width: calc(1rem + vvar(--sizes-size-5));
+  width: calc(1rem + 0.5rem);
 }
 .dark-Tree-itemDrager {
   cursor: move;
   color: #84888c;
 }
 .dark-Tree-spinner {
-  margin-right: vvar(--sizes-size-5);
+  margin-right: 0.5rem;
 }
 .dark-Tree-itemIcon {
   display: inline-flex;

package/lib/themes/dark.css

@@ -708,7 +708,7 @@
   --Layout-aside--lg-width: 18.75rem;
   --Layout-aside--md-width: 15.625rem;
   --Layout-aside--sm-width: 9.375rem;
-  --Layout-aside-bg: var(--colors-brand-1);
+  --Layout-aside-bg: var(--colors-neutral-fill-2);
   --Layout-aside-color: #a0a0a0;
   --Layout-aside-onAcitve-bg: #272d33;
   --Layout-aside-onHover-bg: #2c3239;
@@ -731,7 +731,7 @@
   --Layout-asideLink-onHover-iconColor: (--colors-brand-6);
   --Layout-asideLink-onHover-iconSize: var(--sizes-size-9);
   --Layout-asideLink-onHover-arrowColor: var(--colors-neutral-text-11);
-  --Layout-brand-bg: var(--colors-brand-1);
+  --Layout-brand-bg: var(--colors-neutral-fill-2);
   --Layout-brand-color: var(--colors-neutral-text-11);
   --Layout-brandBar-color: #a0a0a0;
   --Layout-header-bg: var(--colors-neutral-fill-10);
@@ -1309,7 +1309,7 @@
   --TabsTransfer-title-bg: #f7f7f9;
   --TabsTransfer-border-color: #e8e9eb;
   --Tree-indent: var(--gap-md);
-  --Tree-icon-gap: vvar(--sizes-size-5);
+  --Tree-icon-gap: var(--sizes-size-5);
   --Tree-icon-margin-right: 0.5rem;
   --Tree-inputHeight: calc(var(--Form-input-height) * 0.85);
   --Tree-item-onHover-bg: var(--colors-neutral-fill-10);
@@ -11222,6 +11222,7 @@ body.video-react-full-window .video-react-fullscreen {
   margin: 0;
   padding: 0 12px;
   border-spacing: 0 8px;
+  border-collapse: inherit;
 }
 .rdtMonths table,
 .rdtYears table {
@@ -23269,19 +23270,24 @@ input[type=button].dark-Button--block {
 .dark-PaginationWrapper-pager:first-child {
   margin-bottom: var(--gap-sm);
 }
-.dark-Wrapper--xs {
+.dark-Wrapper--xs,
+.dark-Container--xs {
   padding: var(--gap-xs);
 }
-.dark-Wrapper--sm {
+.dark-Wrapper--sm,
+.dark-Container--sm {
   padding: var(--gap-sm);
 }
-.dark-Wrapper--md {
+.dark-Wrapper--md,
+.dark-Container--md {
   padding: var(--gap-md);
 }
-.dark-Wrapper--lg {
+.dark-Wrapper--lg,
+.dark-Container--lg {
   padding: var(--gap-lg);
 }
-.dark-Wrapper--xl {
+.dark-Wrapper--xl,
+.dark-Container--xl {
   padding: var(--gap-xl);
 }
 .dark-StatusField {
@@ -24486,9 +24492,6 @@ input[type=button].dark-Button--block {
 .dark-ResultBox.dark-TransferDropDown {
   padding: 0 var(--gap-base);
 }
-.dark-ResultBox.dark-TransferDropDown.is-group {
-  padding: var(--gap-xs);
-}
 .dark-ResultBox.dark-TransferDropDown.is-group > .dark-TransferDropDown-icon {
   margin-right: var(--gap-sm);
 }
@@ -26880,7 +26883,6 @@ input.dark-TextControl-input-password {
 .dark-TableSelection .dark-Table-table > thead > tr > th:first-child,
 .dark-TableSelection .dark-Table-table > tbody > tr > td:first-child {
   padding-left: 0.625rem;
-  padding-right: 0;
 }
 .dark-TableSelection .dark-Table-table > thead > tr > th:last-child,
 .dark-TableSelection .dark-Table-table > tbody > tr > td:last-child {
@@ -27910,9 +27912,10 @@ input.dark-TextControl-input-password {
   z-index: 2;
 }
 .dark-Select-clear svg {
-  fill: var(--Form-input-iconColor);
-  width: 0.875rem;
-  height: 0.875rem;
+  fill: var(--Form-input-clearBtn-color);
+  color: var(--Form-input-clearBtn-color);
+  width: var(--Form-input-clearBtn-size);
+  height: var(--Form-input-clearBtn-size);
   top: 0;
 }
 .dark-Select-clear svg:hover > path:first-of-type {

package/lib/themes/default-ie11.css

@@ -8606,6 +8606,7 @@ body.video-react-full-window .video-react-fullscreen {
   margin: 0;
   padding: 0 12px;
   border-spacing: 0 8px;
+  border-collapse: inherit;
 }
 .rdtMonths table,
 .rdtYears table {
@@ -9203,7 +9204,7 @@ body {
   z-index: 1200;
 }
 .cxd-Layout-brandBar {
-  background: #001259;
+  background: #151b26;
   color: #a0a0a0;
 }
 .cxd-Layout-brandBar > button {
@@ -9252,7 +9253,7 @@ body {
 }
 .cxd-Layout-aside {
   position: relative;
-  background: #001259;
+  background: #151b26;
   color: #a0a0a0;
 }
 .cxd-Layout-aside:before {
@@ -20761,19 +20762,24 @@ input[type=button].cxd-Button--block {
 .cxd-PaginationWrapper-pager:first-child {
   margin-bottom: 0.5rem;
 }
-.cxd-Wrapper--xs {
+.cxd-Wrapper--xs,
+.cxd-Container--xs {
   padding: 0.25rem;
 }
-.cxd-Wrapper--sm {
+.cxd-Wrapper--sm,
+.cxd-Container--sm {
   padding: 0.5rem;
 }
-.cxd-Wrapper--md {
+.cxd-Wrapper--md,
+.cxd-Container--md {
   padding: 1rem;
 }
-.cxd-Wrapper--lg {
+.cxd-Wrapper--lg,
+.cxd-Container--lg {
   padding: 1.25rem;
 }
-.cxd-Wrapper--xl {
+.cxd-Wrapper--xl,
+.cxd-Container--xl {
   padding: 1.5rem;
 }
 .cxd-StatusField {
@@ -21993,9 +21999,6 @@ input[type=button].cxd-Button--block {
 .cxd-ResultBox.cxd-TransferDropDown {
   padding: 0 0.75rem;
 }
-.cxd-ResultBox.cxd-TransferDropDown.is-group {
-  padding: 0.25rem;
-}
 .cxd-ResultBox.cxd-TransferDropDown.is-group > .cxd-TransferDropDown-icon {
   margin-right: 0.5rem;
 }
@@ -24442,7 +24445,6 @@ input.cxd-TextControl-input-password {
 .cxd-TableSelection .cxd-Table-table > thead > tr > th:first-child,
 .cxd-TableSelection .cxd-Table-table > tbody > tr > td:first-child {
   padding-left: 0.625rem;
-  padding-right: 0;
 }
 .cxd-TableSelection .cxd-Table-table > thead > tr > th:last-child,
 .cxd-TableSelection .cxd-Table-table > tbody > tr > td:last-child {
@@ -25494,9 +25496,10 @@ input.cxd-TextControl-input-password {
   z-index: 2;
 }
 .cxd-Select-clear svg {
-  fill: #84878c;
-  width: 0.875rem;
-  height: 0.875rem;
+  fill: #d4d6d9;
+  color: #d4d6d9;
+  width: 14px;
+  height: 14px;
   top: 0;
 }
 .cxd-Select-clear svg:hover > path:first-of-type {
@@ -27940,7 +27943,7 @@ td.rdtQuarter.rdtDisabled:hover {
   top: 2px;
   width: 1rem;
   height: 1rem;
-  margin-left: vvar(--sizes-size-5);
+  margin-left: 0.5rem;
 }
 .cxd-Tree.is-disabled {
   pointer-events: none;
@@ -27971,7 +27974,7 @@ td.rdtQuarter.rdtDisabled:hover {
      -moz-user-select: none;
           user-select: none;
   margin-bottom: 0.25rem;
-  padding-left: vvar(--sizes-size-5);
+  padding-left: 0.5rem;
 }
 .cxd-Tree-itemLabel > * {
   position: relative;
@@ -28021,12 +28024,12 @@ td.rdtQuarter.rdtDisabled:hover {
   vertical-align: top;
   height: 1.5rem;
   line-height: 1.5rem;
-  padding-right: vvar(--sizes-size-5);
+  padding-right: 0.5rem;
 }
 .cxd-Tree-item-icons > a {
   display: inline-block;
   vertical-align: middle;
-  margin-left: vvar(--sizes-size-5);
+  margin-left: 0.5rem;
   cursor: pointer;
 }
 .cxd-Tree-item-icons > a > svg {
@@ -28043,7 +28046,7 @@ td.rdtQuarter.rdtDisabled:hover {
 .cxd-Tree-itemInput > a {
   display: inline-block;
   cursor: pointer;
-  margin-left: vvar(--sizes-size-5);
+  margin-left: 0.5rem;
   color: #84878c;
 }
 .cxd-Tree-itemInput > a:hover {
@@ -28097,7 +28100,7 @@ td.rdtQuarter.rdtDisabled:hover {
   width: 0.875rem;
   height: 0.875rem;
   top: 0.109375rem;
-  margin-right: vvar(--sizes-size-5);
+  margin-right: 0.5rem;
 }
 .cxd-Tree-itemArrow {
   cursor: pointer;
@@ -28118,14 +28121,14 @@ td.rdtQuarter.rdtDisabled:hover {
 }
 .cxd-Tree-itemArrowPlaceholder {
   display: inline-block;
-  width: calc(1rem + vvar(--sizes-size-5));
+  width: calc(1rem + 0.5rem);
 }
 .cxd-Tree-itemDrager {
   cursor: move;
   color: #84878c;
 }
 .cxd-Tree-spinner {
-  margin-right: vvar(--sizes-size-5);
+  margin-right: 0.5rem;
 }
 .cxd-Tree-itemIcon {
   display: inline-flex;