hrm_ui_lib 2.0.0-alpha.1 → 2.0.0-alpha.3

package/assets/styles/styles.css

@@ -1736,6 +1736,10 @@ body {
   font-family: var(--ds-font-family);
 }
 
+.body-xlarge {
+  font-size: var(--ds-paragraph-xlg);
+}
+
 .body-large {
   font-size: var(--ds-paragraph-lg);
 }
@@ -1904,12 +1908,12 @@ body {
 }
 
 .scrollbar::-webkit-scrollbar-thumb {
-  background-color: var(--grey-50);
+  background-color: var(--grey-200);
   border-radius: var(--border-radius-100);
 }
 
 .scrollbar::-webkit-scrollbar-thumb:hover {
-  background-color: var(--grey-100);
+  background-color: var(--grey-300);
 }
 
 .scrollbar--vertical {
@@ -1933,7 +1937,7 @@ body {
 }
 
 .scrollbar--horizontal::-webkit-scrollbar {
-  height: var(--ds-size-4);
+  height: var(--ds-size-10);
 }
 
 .flexbox {
@@ -2190,6 +2194,7 @@ body {
   --purple-200:#a89de2;
   --purple-100:#cbc4ed;
   --purple-50:#eae7f7;
+  --purple-20:#f5f3fb;
   --pink-900:#4a0a20;
   --pink-800:#79012f;
   --pink-700:#a2023f;
@@ -2316,6 +2321,7 @@ body {
   --ds-color-border-info:var(--blue-600);
   --ds-color-border-discovery:var(--purple-400);
   --ds-color-divider:var(--grey-100);
+  --ds-color-divider-grey:var(--grey-200);
   --font-family-primary:"Noto Sans Armenian","Noto Sans";
   --font-family-secondary:"Tahoma";
   --font-family-tertiary:"Open Sans";
@@ -2350,6 +2356,7 @@ body {
   --ds-headline-std:var(--font-size-36);
   --ds-headline-sm:var(--font-size-32);
   --ds-headline-xs:var(--font-size-24);
+  --ds-paragraph-xlg:var(--font-size-32);
   --ds-paragraph-lg:var(--font-size-20);
   --ds-paragraph-md:var(--font-size-16);
   --ds-paragraph-std:var(--font-size-14);
@@ -2952,6 +2959,485 @@ body {
   padding: var(--ds-badge-inner-padding-sm);
 }
 
+.badge-v2 {
+  -webkit-box-align: center;
+  -moz-box-align: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+  border-radius: var(--ds-border-radius-4xl);
+  display: -moz-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  gap: var(--ds-size-2);
+}
+
+.badge-v2__inner {
+  font: var(--ds-font-weight-default) var(--ds-paragraph-xs)/0.8 var(--ds-font-family);
+}
+
+.badge-v2--filled, .badge-v2--filled > .badge-v2__inner {
+  color: var(--grey-0);
+}
+
+.badge-v2--filled.badge-v2--gray {
+  background-color: var(--grey-400);
+}
+
+.badge-v2--filled.badge-v2--blue {
+  background-color: var(--blue-800);
+}
+
+.badge-v2--filled.badge-v2--orange {
+  background-color: var(--yellow-800);
+}
+
+.badge-v2--filled.badge-v2--red {
+  background-color: var(--red-500);
+}
+
+.badge-v2--filled.badge-v2--green {
+  background-color: var(--brand-500);
+}
+
+.badge-v2--filled.badge-v2--yellow {
+  background-color: var(--yellow-500);
+}
+
+.badge-v2--filled.badge-v2--purple {
+  background-color: var(--purple-400);
+}
+
+.badge-v2--filled.badge-v2--sky {
+  background-color: var(--blue-500);
+}
+
+.badge-v2--filled.badge-v2--pink {
+  background-color: var(--pink-200);
+}
+
+.badge-v2--filled.badge-v2--teal {
+  background-color: var(--green-500);
+}
+
+.badge-v2--filled.badge-v2--with-dot {
+  background: var(--grey-0);
+}
+
+.badge-v2--light, .badge-v2--light > .badge-v2__inner {
+  color: var(--grey-800);
+}
+
+.badge-v2--light.badge-v2--gray {
+  background-color: var(--grey-200);
+}
+
+.badge-v2--light.badge-v2--gray .badge-v2--with-dot {
+  background-color: var(--grey-800);
+}
+
+.badge-v2--light.badge-v2--blue {
+  background-color: var(--blue-100);
+}
+
+.badge-v2--light.badge-v2--blue .badge-v2--with-dot {
+  background-color: var(--grey-800);
+}
+
+.badge-v2--light.badge-v2--orange {
+  background-color: var(--yellow-400);
+}
+
+.badge-v2--light.badge-v2--orange .badge-v2--with-dot {
+  background-color: var(--grey-800);
+}
+
+.badge-v2--light.badge-v2--red {
+  background-color: var(--red-200);
+}
+
+.badge-v2--light.badge-v2--red > .badge-v2__inner {
+  color: var(--red-900);
+}
+
+.badge-v2--light.badge-v2--red .badge-v2--with-dot {
+  background-color: var(--red-900);
+}
+
+.badge-v2--light.badge-v2--green {
+  background-color: var(--brand-20);
+}
+
+.badge-v2--light.badge-v2--green > .badge-v2__inner {
+  color: var(--brand-800);
+}
+
+.badge-v2--light.badge-v2--green .badge-v2--with-dot {
+  background-color: var(--brand-800);
+}
+
+.badge-v2--light.badge-v2--yellow {
+  background-color: var(--yellow-100);
+}
+
+.badge-v2--light.badge-v2--yellow > .badge-v2__inner {
+  color: var(--yellow-900);
+}
+
+.badge-v2--light.badge-v2--yellow .badge-v2--with-dot {
+  background-color: var(--yellow-900);
+}
+
+.badge-v2--light.badge-v2--purple {
+  background-color: var(--purple-100);
+}
+
+.badge-v2--light.badge-v2--purple > .badge-v2__inner {
+  color: var(--purple-900);
+}
+
+.badge-v2--light.badge-v2--purple .badge-v2--with-dot {
+  background-color: var(--purple-900);
+}
+
+.badge-v2--light.badge-v2--sky {
+  background-color: var(--blue-100);
+}
+
+.badge-v2--light.badge-v2--sky > .badge-v2__inner {
+  color: var(--blue-900);
+}
+
+.badge-v2--light.badge-v2--sky .badge-v2--with-dot {
+  background-color: var(--blue-900);
+}
+
+.badge-v2--light.badge-v2--pink {
+  background-color: var(--pink-100);
+}
+
+.badge-v2--light.badge-v2--pink > .badge-v2__inner {
+  color: var(--pink-900);
+}
+
+.badge-v2--light.badge-v2--pink .badge-v2--with-dot {
+  background-color: var(--pink-900);
+}
+
+.badge-v2--light.badge-v2--teal {
+  background-color: var(--green-100);
+}
+
+.badge-v2--light.badge-v2--teal > .badge-v2__inner {
+  color: var(--green-900);
+}
+
+.badge-v2--light.badge-v2--teal .badge-v2--with-dot {
+  background-color: var(--green-900);
+}
+
+.badge-v2--lighter, .badge-v2--lighter > .badge-v2--lighter.badge-v2__inner {
+  color: var(--grey-400);
+}
+
+.badge-v2--lighter.badge-v2--gray {
+  background-color: var(--grey-100);
+}
+
+.badge-v2--lighter.badge-v2--gray .badge-v2--with-dot {
+  background-color: var(--grey-400);
+}
+
+.badge-v2--lighter.badge-v2--blue {
+  background-color: var(--blue-50);
+}
+
+.badge-v2--lighter.badge-v2--blue > .badge-v2__inner {
+  color: var(--blue-800);
+}
+
+.badge-v2--lighter.badge-v2--blue .badge-v2--with-dot {
+  background-color: var(--blue-800);
+}
+
+.badge-v2--lighter.badge-v2--orange {
+  background-color: var(--yellow-50);
+}
+
+.badge-v2--lighter.badge-v2--orange > .badge-v2__inner {
+  color: var(--yellow-800);
+}
+
+.badge-v2--lighter.badge-v2--orange .badge-v2--with-dot {
+  background-color: var(--yellow-800);
+}
+
+.badge-v2--lighter.badge-v2--red {
+  background-color: var(--red-20);
+}
+
+.badge-v2--lighter.badge-v2--red > .badge-v2__inner {
+  color: var(--red-500);
+}
+
+.badge-v2--lighter.badge-v2--red .badge-v2--with-dot {
+  background-color: var(--red-500);
+}
+
+.badge-v2--lighter.badge-v2--green {
+  background-color: var(--green-50);
+}
+
+.badge-v2--lighter.badge-v2--green > .badge-v2__inner {
+  color: var(--brand-600);
+}
+
+.badge-v2--lighter.badge-v2--green .badge-v2--with-dot {
+  background-color: var(--brand-600);
+}
+
+.badge-v2--lighter.badge-v2--yellow {
+  background-color: var(--yellow-50);
+}
+
+.badge-v2--lighter.badge-v2--yellow > .badge-v2__inner {
+  color: var(--yellow-600);
+}
+
+.badge-v2--lighter.badge-v2--yellow .badge-v2--with-dot {
+  background-color: var(--yellow-600);
+}
+
+.badge-v2--lighter.badge-v2--purple {
+  background-color: var(--purple-50);
+}
+
+.badge-v2--lighter.badge-v2--purple > .badge-v2__inner {
+  color: var(--purple-400);
+}
+
+.badge-v2--lighter.badge-v2--purple .badge-v2--with-dot {
+  background-color: var(--purple-400);
+}
+
+.badge-v2--lighter.badge-v2--sky {
+  background-color: var(--blue-50);
+}
+
+.badge-v2--lighter.badge-v2--sky > .badge-v2__inner {
+  color: var(--blue-500);
+}
+
+.badge-v2--lighter.badge-v2--sky .badge-v2--with-dot {
+  background-color: var(--blue-500);
+}
+
+.badge-v2--lighter.badge-v2--pink {
+  background-color: var(--pink-50);
+}
+
+.badge-v2--lighter.badge-v2--pink > .badge-v2__inner {
+  color: var(--pink-300);
+}
+
+.badge-v2--lighter.badge-v2--pink .badge-v2--with-dot {
+  background-color: var(--pink-300);
+}
+
+.badge-v2--lighter.badge-v2--teal {
+  background-color: var(--green-50);
+}
+
+.badge-v2--lighter.badge-v2--teal > .badge-v2__inner {
+  color: var(--green-500);
+}
+
+.badge-v2--lighter.badge-v2--teal .badge-v2--with-dot {
+  background-color: var(--green-500);
+}
+
+.badge-v2--stroke {
+  background-color: var(--grey-0);
+  border: 1px solid var(--grey-400);
+}
+
+.badge-v2--stroke, .badge-v2--stroke > .badge-v2--stroke.badge-v2__inner {
+  color: var(--grey-400);
+}
+
+.badge-v2--stroke.badge-v2--gray {
+  background-color: var(--grey-0);
+}
+
+.badge-v2--stroke.badge-v2--gray .badge-v2--with-dot {
+  background-color: var(--grey-400);
+}
+
+.badge-v2--stroke.badge-v2--blue {
+  border-color: var(--blue-600);
+}
+
+.badge-v2--stroke.badge-v2--blue > .badge-v2__inner {
+  color: var(--blue-800);
+}
+
+.badge-v2--stroke.badge-v2--blue .badge-v2--with-dot {
+  background-color: var(--blue-800);
+}
+
+.badge-v2--stroke.badge-v2--orange {
+  border-color: var(--yellow-800);
+}
+
+.badge-v2--stroke.badge-v2--orange > .badge-v2__inner {
+  color: var(--yellow-800);
+}
+
+.badge-v2--stroke.badge-v2--orange .badge-v2--with-dot {
+  background-color: var(--yellow-800);
+}
+
+.badge-v2--stroke.badge-v2--red {
+  border-color: var(--red-500);
+}
+
+.badge-v2--stroke.badge-v2--red > .badge-v2__inner {
+  color: var(--red-500);
+}
+
+.badge-v2--stroke.badge-v2--red .badge-v2--with-dot {
+  background-color: var(--red-500);
+}
+
+.badge-v2--stroke.badge-v2--green {
+  border-color: var(--brand-500);
+}
+
+.badge-v2--stroke.badge-v2--green > .badge-v2__inner {
+  color: var(--brand-500);
+}
+
+.badge-v2--stroke.badge-v2--green .badge-v2--with-dot {
+  background-color: var(--brand-500);
+}
+
+.badge-v2--stroke.badge-v2--yellow {
+  border-color: var(--yellow-500);
+}
+
+.badge-v2--stroke.badge-v2--yellow > .badge-v2__inner {
+  color: var(--yellow-500);
+}
+
+.badge-v2--stroke.badge-v2--yellow .badge-v2--with-dot {
+  background-color: var(--yellow-500);
+}
+
+.badge-v2--stroke.badge-v2--purple {
+  border-color: var(--purple-400);
+}
+
+.badge-v2--stroke.badge-v2--purple > .badge-v2__inner {
+  color: var(--purple-400);
+}
+
+.badge-v2--stroke.badge-v2--purple .badge-v2--with-dot {
+  background-color: var(--purple-400);
+}
+
+.badge-v2--stroke.badge-v2--sky {
+  border-color: var(--blue-50);
+}
+
+.badge-v2--stroke.badge-v2--sky > .badge-v2__inner {
+  color: var(--blue-500);
+}
+
+.badge-v2--stroke.badge-v2--sky .badge-v2--with-dot {
+  background-color: var(--blue-500);
+}
+
+.badge-v2--stroke.badge-v2--pink {
+  border-color: var(--pink-200);
+}
+
+.badge-v2--stroke.badge-v2--pink > .badge-v2__inner {
+  color: var(--pink-200);
+}
+
+.badge-v2--stroke.badge-v2--pink .badge-v2--with-dot {
+  background-color: var(--pink-200);
+}
+
+.badge-v2--stroke.badge-v2--teal {
+  border-color: var(--green-500);
+}
+
+.badge-v2--stroke.badge-v2--teal > .badge-v2__inner {
+  color: var(--green-500);
+}
+
+.badge-v2--stroke.badge-v2--teal .badge-v2--with-dot {
+  background-color: var(--green-500);
+}
+
+.badge-v2--large {
+  height: var(--ds-size-20);
+  padding: var(--ds-size-2) var(--ds-size-8);
+}
+
+.badge-v2--large .badge-v2__inner {
+  padding: 0 var(--ds-space-2);
+}
+
+.badge-v2--large.badge-v2--dot {
+  height: var(--ds-size-12);
+  width: var(--ds-size-12);
+}
+
+.badge-v2--large.badge-v2--with-dot {
+  height: var(--ds-size-6);
+  width: var(--ds-size-6);
+}
+
+.badge-v2--small {
+  height: var(--ds-size-16);
+  padding: var(--ds-size-2) var(--ds-size-8);
+}
+
+.badge-v2--small .badge-v2__inner {
+  padding: 0 var(--ds-space-4);
+}
+
+.badge-v2--small.badge-v2--dot {
+  height: var(--ds-size-8);
+  width: var(--ds-size-8);
+}
+
+.badge-v2--small.badge-v2--with-dot {
+  height: var(--ds-size-6);
+  width: var(--ds-size-6);
+}
+
+.badge-v2--dot {
+  border-radius: 50%;
+  padding: 0;
+}
+
+.badge-v2.badge-v2--disabled {
+  background-color: var(--grey-0);
+  border: 1px solid var(--grey-200);
+}
+
+.badge-v2.badge-v2--disabled > .badge-v2__inner {
+  color: var(--grey-200);
+}
+
+.badge-v2.badge-v2--disabled.badge-v2--with-dot {
+  background-color: var(--grey-300);
+}
+
 .breadcrumb {
   --ds-breadcrumb-color-default:var(--ds-color-text-tertiary);
   --ds-breadcrumb-color-hover:var(--ds-color-text-secondary);
@@ -3405,13 +3891,355 @@ body {
   width: var(--ds-button-icon-size-sm);
 }
 
-.chips {
-  --ds-chips-height-lg:var(--ds-size-32);
-  --ds-chips-height-md:var(--ds-size-24);
-  --ds-chips-height-sm:var(--ds-size-20);
-  --ds-chips-height-xs:var(--ds-size-16);
-  --ds-chips-border-radius:var(--ds-border-radius-4xl);
-  --ds-chips-padding-lg:0 var(--ds-space-10);
+.button-group-item {
+  align-items: center;
+  display: flex;
+  flex-shrink: 0;
+  gap: var(--ds-size-8);
+  justify-content: center;
+}
+
+.button-group-item__primary {
+  background-color: var(--white);
+  border: 1px solid var(--grey-200);
+}
+
+.button-group-item__primary:hover {
+  background: var(--grey-50);
+  color: var(--grey-600);
+  cursor: pointer;
+}
+
+.button-group-item__primary.active {
+  background: var(--grey-50);
+}
+
+.button-group-item__primary.disabled {
+  background: var(--grey-50);
+  color: var(--grey-300);
+  cursor: not-allowed;
+}
+
+.button-group-item__primary.disabled > * {
+  color: var(--grey-300);
+}
+
+.button-group-item__small {
+  height: var(--ds-size-24);
+  padding: var(--ds-size-6) var(--ds-size-12);
+}
+
+.button-group-item__medium {
+  height: var(--ds-size-32);
+  padding: var(--ds-size-6) 14px;
+}
+
+.button-group-item__large {
+  height: var(--ds-size-40);
+  padding: 0 var(--ds-size-16);
+}
+
+.button-group {
+  align-items: flex-start;
+  border-radius: var(--ds-size-8);
+  display: flex;
+  width: max-content;
+}
+
+.button-group-item:first-child {
+  border-bottom-left-radius: var(--ds-size-8);
+  border-top-left-radius: var(--ds-size-8);
+}
+
+.button-group-item:last-child {
+  border-bottom-right-radius: var(--ds-size-8);
+  border-top-right-radius: var(--ds-size-8);
+}
+
+.card {
+  border: 1px solid var(--grey-200);
+  border-radius: var(--size-8);
+  display: flex;
+  height: 56px;
+  position: relative;
+}
+
+.card--noBorder {
+  border: none;
+}
+
+.card--expanded, .card--expanded .card__content--header {
+  height: auto;
+}
+
+.card--title--alignment__body {
+  border: 1px solid var(--grey-200);
+}
+
+.card--title--alignment--left {
+  flex-direction: row;
+}
+
+.card--title--alignment--left .card__body {
+  border-bottom-right-radius: var(--size-8);
+  border-top-right-radius: var(--size-8);
+}
+
+.card--title--alignment--left .card__title {
+  border-bottom-left-radius: var(--size-8);
+  border-top-left-radius: var(--size-8);
+  writing-mode: sideways-lr;
+}
+
+.card--title--alignment--right {
+  flex-direction: row-reverse;
+}
+
+.card--title--alignment--right .card__body {
+  border-bottom-left-radius: var(--size-8);
+  border-top-left-radius: var(--size-8);
+}
+
+.card--title--alignment--right .card__title {
+  border-bottom-right-radius: var(--size-8);
+  border-top-right-radius: var(--size-8);
+  writing-mode: sideways-rl;
+}
+
+.card--title--alignment--top {
+  flex-direction: column;
+}
+
+.card--title--alignment--top .card__body {
+  border-bottom-left-radius: var(--size-8);
+  border-bottom-right-radius: var(--size-8);
+}
+
+.card--title--alignment--top .card__title {
+  border-top-left-radius: var(--size-8);
+  border-top-right-radius: var(--size-8);
+}
+
+.card--title--alignment--bottom {
+  flex-direction: column-reverse;
+}
+
+.card--title--alignment--bottom .card__body {
+  border-top-left-radius: var(--size-8);
+  border-top-right-radius: var(--size-8);
+}
+
+.card--title--alignment--bottom .card__title {
+  border-bottom-left-radius: var(--size-8);
+  border-bottom-right-radius: var(--size-8);
+}
+
+.card__title {
+  font-size: var(--font-size-12);
+  font-weight: var(--font-weight-700);
+  line-height: 16px;
+  text-align: center;
+  text-transform: capitalize;
+}
+
+.card__title--blue {
+  background-color: var(--blue-100);
+  border: 1px solid var(--blue-100);
+  color: var(--blue-900);
+}
+
+.card__title--purple {
+  background-color: var(--purple-100);
+  border: 1px solid var(--purple-100);
+  color: var(--purple-900);
+}
+
+.card__title--yellow {
+  background-color: var(--yellow-100);
+  border: 1px solid var(--yellow-100);
+  color: var(--yellow-900);
+}
+
+.card__title--pink {
+  background-color: var(--pink-100);
+  border: 1px solid var(--pink-100);
+  color: var(--pink-900);
+}
+
+.card__title--green {
+  background-color: var(--green-100);
+  border: 1px solid var(--green-100);
+  color: var(--green-900);
+}
+
+.card__title--grey {
+  background-color: var(--grey-100);
+  border: 1px solid var(--grey-100);
+  color: var(--grey-900);
+}
+
+.card__content {
+  display: flex;
+  flex-grow: 1;
+  flex: 1;
+  flex-direction: column;
+}
+
+.card__content--header {
+  align-items: center;
+  display: flex;
+  flex: auto;
+  justify-content: space-between;
+  min-height: 56px;
+}
+
+.card__content--header--expandable {
+  cursor: pointer;
+}
+
+.card__content--header--expand {
+  align-content: center;
+}
+
+.card__content .card__divider {
+  background-color: var(--grey-200);
+}
+
+.card--group {
+  border: 1px solid var(--grey-200);
+  border-radius: var(--size-8);
+  display: flex;
+  position: relative;
+}
+
+.card--group--title--alignment__body {
+  border: 1px solid var(--grey-200);
+}
+
+.card--group--title--alignment--left .card--group__content--header {
+  flex-direction: row;
+}
+
+.card--group--title--alignment--left .card--group__content--header .card--group__body {
+  border-top-right-radius: var(--size-8);
+}
+
+.card--group--title--alignment--left .card--group__content--header .card--group__title {
+  border-top-left-radius: var(--size-8);
+  writing-mode: sideways-lr;
+}
+
+.card--group--title--alignment--right .card--group__content--header {
+  flex-direction: row-reverse;
+}
+
+.card--group--title--alignment--right .card--group__content--header .card--group__body {
+  border-top-left-radius: var(--size-8);
+}
+
+.card--group--title--alignment--right .card--group__content--header .card--group__title {
+  border-top-right-radius: var(--size-8);
+  writing-mode: sideways-rl;
+}
+
+.card--group--title--alignment--top .card--group__content--header {
+  flex-direction: column;
+}
+
+.card--group--title--alignment--top .card--group__content--header .card--group__body {
+  border-bottom-left-radius: var(--size-8);
+  border-bottom-right-radius: var(--size-8);
+}
+
+.card--group--title--alignment--top .card--group__content--header .card--group__title {
+  border-top-left-radius: var(--size-8);
+  border-top-right-radius: var(--size-8);
+}
+
+.card--group__content {
+  display: flex;
+  flex-grow: 1;
+  flex: 1;
+  flex-direction: column;
+}
+
+.card--group__content--header {
+  border-bottom: 1px solid var(--grey-200);
+  display: flex;
+  min-height: 56px;
+  position: relative;
+}
+
+.card--group__content--header--component {
+  align-content: center;
+  padding-left: var(--size-8);
+  padding-right: var(--size-8);
+}
+
+.card--group__content--header .card--group__title {
+  font-size: var(--font-size-12);
+  font-weight: var(--font-weight-700);
+  line-height: 16px;
+  text-align: center;
+  text-transform: capitalize;
+}
+
+.card--group__content--header .card--group__title--blue {
+  background-color: var(--blue-100);
+  border: 1px solid var(--blue-100);
+  color: var(--blue-900);
+}
+
+.card--group__content--header .card--group__title--purple {
+  background-color: var(--purple-100);
+  border: 1px solid var(--purple-100);
+  color: var(--purple-900);
+}
+
+.card--group__content--header .card--group__title--yellow {
+  background-color: var(--yellow-100);
+  border: 1px solid var(--yellow-100);
+  color: var(--yellow-900);
+}
+
+.card--group__content--header .card--group__title--pink {
+  background-color: var(--pink-100);
+  border: 1px solid var(--pink-100);
+  color: var(--pink-900);
+}
+
+.card--group__content--header .card--group__title--green {
+  background-color: var(--green-100);
+  border: 1px solid var(--green-100);
+  color: var(--green-900);
+}
+
+.card--group__content--header .card--group__title--grey {
+  background-color: var(--grey-100);
+  border: 1px solid var(--grey-100);
+  color: var(--grey-900);
+}
+
+.card--group__content--body {
+  padding-left: var(--size-8);
+  padding-right: var(--size-8);
+}
+
+.card--group__content--body .card--group__child {
+  border-bottom: 1px solid var(--grey-200);
+}
+
+.card--group__content--body .card--group__child:last-child {
+  border-bottom: none;
+}
+
+.chips {
+  --ds-chips-height-lg:var(--ds-size-32);
+  --ds-chips-height-md:var(--ds-size-24);
+  --ds-chips-height-sm:var(--ds-size-20);
+  --ds-chips-height-xs:var(--ds-size-16);
+  --ds-chips-border-radius:var(--ds-border-radius-4xl);
+  --ds-chips-padding-lg:0 var(--ds-space-10);
   --ds-chips-padding-md:0 var(--ds-space-6);
   --ds-chips-padding-sm:0 var(--ds-space-4);
   --ds-chips-padding-xs:0 var(--ds-space-4);
@@ -3697,12 +4525,15 @@ body {
   --ds-collapse-header-space:var(--ds-space-16) var(--ds-space-24);
   --ds-collapse-content-space:0 var(--ds-space-16) var(--ds-space-24);
   --ds-collapse-divider-space:0 0 var(--ds-space-16);
-  background-color: var(--ds-collapse-bg);
   border: var(--ds-collapse-border);
   border-radius: var(--ds-collapse-border-radius);
   overflow: hidden;
 }
 
+.collapse--v2 {
+  --ds-collapse-bg:transparent;
+}
+
 .collapse--opened .collapse__header__icon {
   transform: rotate(90deg);
   transition: transform 0.3s ease 0s, color 0.3s ease-in-out 0s;
@@ -3728,6 +4559,29 @@ body {
   margin: var(--ds-collapse-divider-space);
 }
 
+.collapse-icon {
+  align-items: center;
+  border: 1px solid transparent;
+  border-radius: var(--size-8);
+  justify-content: center;
+  padding: var(--size-4);
+  position: relative;
+  top: -7px;
+}
+
+.collapse-icon > svg {
+  font-size: var(--size-24);
+}
+
+.collapse-icon.icon-border {
+  border-color: var(--grey-300);
+}
+
+.collapse-icon.icon-open {
+  background-color: var(--grey-200);
+  border-color: var(--grey-200);
+}
+
 .collapse-group {
   --ds-collapse-group-item-space:var(--ds-space-8);
 }
@@ -3744,11 +4598,11 @@ body {
   --ds-controller-size:var(--ds-size-16);
   --ds-controller-font:var(--ds-font-weight-default) var(--ds-paragraph-std)/var(--ds-line-height-caption) var(--ds-font-family);
   --ds-controller-bg-default-light:var(--ds-color-bg-white);
-  --ds-controller-bg-default-dark:var(--ds-color-bg-grey-dark);
+  --ds-controller-bg-default-dark:var(--grey-200);
   --ds-controller-bg-hover-light:var(--ds-color-bg-container-lighter);
-  --ds-controller-bg-hover-dark:var(--ds-color-bg-grey);
+  --ds-controller-bg-hover-dark:var(--grey-300);
   --ds-controller-bg-pressed-light:var(--ds-color-bg-container-light);
-  --ds-controller-bg-pressed-dark:var(--ds-color-bg-grey-darker);
+  --ds-controller-bg-pressed-dark:var(--grey-400);
   --ds-controller-bg-focused:var(--ds-color-bg-container);
   --ds-controller-bg-disabled:var(--ds-color-bg-disabled);
   --ds-controller-selected-bg-default:var(--ds-color-bg-brand);
@@ -3758,12 +4612,11 @@ body {
   --ds-controller-selected-bg-disabled:var(--ds-color-bg-disabled);
   --ds-controller-mark-light:var(--ds-color-icon-inverse);
   --ds-controller-mark-dark:var(--ds-color-icon-disabled);
-  --ds-controller-border-color-default:var(--ds-color-border-primary);
   --ds-controller-border-color-focused:var(--grey-500);
   --ds-controller-border-color-disabled:var(--ds-color-border-disabled);
-  --ds-controller-border:var(--ds-border-thin) solid;
+  --ds-controller-border:var(--border-size-1) solid;
   --ds-controller-border-radius-sm:var(--ds-border-radius-xxs);
-  --ds-controller-border-radius-lg:var(--ds-border-radius-5xl);
+  --ds-controller-border-radius-lg:var(--border-radius-100);
   --ds-controller-label-padding:0 0 0 var(--ds-space-8);
   --ds-controller-icon-disabled:var(--ds-color-text-disabled);
   --ds-controller-helper-padding:var(--ds-space-2) 0 0 var(--ds-space-24);
@@ -3808,7 +4661,7 @@ body {
   -webkit-align-items: center;
   align-items: center;
   background-color: var(--ds-controller-bg-default-light);
-  border: var(--ds-controller-border) var(--ds-controller-border-color-default);
+  border: var(--border-size-1) solid var(--grey-200);
   border-radius: var(--ds-controller-border-radius-sm);
   display: -webkit-box;
   display: -moz-box;
@@ -3839,7 +4692,6 @@ body {
 }
 
 .controller input[type=checkbox] + .controller__icon .controller__mark, .controller input[type=radio] + .controller__icon .controller__mark {
-  opacity: 0;
   position: absolute;
   transition: opacity 0.3s linear;
 }
@@ -3876,8 +4728,8 @@ body {
 }
 
 .controller input[type=checkbox]:disabled + .controller__icon, .controller input[type=radio]:disabled + .controller__icon {
-  background-color: var(--ds-controller-bg-disabled);
-  border-color: var(--ds-controller-border-color-disabled);
+  background-color: var(--grey-0);
+  border-color: var(--ds-controller-bg-default-dark);
 }
 
 .controller--disabled {
@@ -3943,16 +4795,20 @@ body {
 
 .controller--switch input[type=checkbox] + .controller__icon {
   background-color: var(--ds-controller-bg-default-dark);
-  border: 0;
   border-radius: var(--ds-controller-border-radius-lg);
   position: relative;
 }
 
 .controller--switch input[type=checkbox] + .controller__icon:hover {
   background-color: var(--ds-controller-bg-hover-dark);
+  border-color: var(--ds-controller-bg-hover-dark);
+}
+
+.controller--switch input[type=checkbox] + .controller__icon:hover .controller__mark {
+  background-color: var(--ds-controller-bg-hover-dark);
 }
 
-.controller--switch input[type=checkbox] + .controller__icon:active, .controller--switch input[type=checkbox] + .controller__icon:visited {
+.controller--switch input[type=checkbox] + .controller__icon:active, .controller--switch input[type=checkbox] + .controller__icon:active .controller__mark, .controller--switch input[type=checkbox] + .controller__icon:visited, .controller--switch input[type=checkbox] + .controller__icon:visited .controller__mark {
   background-color: var(--ds-controller-bg-pressed-dark);
 }
 
@@ -3979,15 +4835,23 @@ body {
   transition: transform 0.3s linear;
 }
 
+.controller--switch input[type=checkbox] + .controller__icon .controller__mark {
+  background-color: var(--ds-controller-bg-default-dark);
+  border-radius: var(--ds-controller-border-radius-lg);
+  height: var(--ds-size-8);
+  width: var(--ds-size-8);
+}
+
 .controller--switch input[type=checkbox]:checked + .controller__icon {
   background-color: var(--ds-controller-selected-bg-default);
+  border-color: var(--ds-controller-selected-bg-default);
 }
 
 .controller--switch input[type=checkbox]:checked + .controller__icon .controller__icon__inner {
   color: var(--ds-controller-selected-bg-default);
 }
 
-.controller--switch input[type=checkbox]:checked + .controller__icon:hover {
+.controller--switch input[type=checkbox]:checked + .controller__icon .controller__mark, .controller--switch input[type=checkbox]:checked + .controller__icon:hover {
   background-color: var(--ds-controller-selected-bg-hover);
 }
 
@@ -3995,6 +4859,10 @@ body {
   color: var(--ds-controller-selected-bg-hover);
 }
 
+.controller--switch input[type=checkbox]:checked + .controller__icon:hover .controller__mark {
+  background-color: var(--ds-controller-selected-bg-hover);
+}
+
 .controller--switch input[type=checkbox]:checked + .controller__icon:active, .controller--switch input[type=checkbox]:checked + .controller__icon:visited {
   background-color: var(--ds-controller-selected-bg-pressed);
 }
@@ -4003,17 +4871,30 @@ body {
   color: var(--ds-controller-selected-bg-pressed);
 }
 
+.controller--switch input[type=checkbox]:checked + .controller__icon:active .controller__mark, .controller--switch input[type=checkbox]:checked + .controller__icon:visited .controller__mark {
+  background-color: var(--ds-controller-selected-bg-pressed);
+}
+
 .controller--switch input[type=checkbox]:checked:disabled + .controller__icon {
-  background-color: var(--ds-controller-selected-bg-disabled);
+  background-color: var(--grey-0);
+  border-color: var(--ds-controller-bg-default-dark);
 }
 
 .controller--switch input[type=checkbox]:checked:disabled + .controller__icon .controller__icon__inner {
   color: var(--ds-controller-mark-dark);
 }
 
-.controller--switch input[type=checkbox]:disabled .controller__icon {
-  background-color: var(--ds-controller-bg-disabled);
-  color: var(--ds-controller-icon-disabled);
+.controller--switch input[type=checkbox]:checked:disabled + .controller__icon .controller__mark {
+  background-color: var(--ds-controller-bg-default-dark);
+}
+
+.controller--switch input[type=checkbox]:disabled + .controller__icon {
+  background-color: var(--grey-0);
+  border-color: var(--ds-controller-bg-default-dark);
+}
+
+.controller--switch input[type=checkbox]:disabled + .controller__icon .controller__icon__inner, .controller--switch input[type=checkbox]:disabled + .controller__icon .controller__mark {
+  background-color: var(--ds-controller-bg-default-dark);
 }
 
 .controller--switch-large input[type=checkbox] + .controller__icon {
@@ -4817,6 +5698,7 @@ body {
 
 .divider {
   --ds-divider-bg-color:var(--ds-color-divider);
+  --ds-divider-bg-color-grey:var(--ds-color-divider-grey);
   border: none;
 }
 
@@ -4834,6 +5716,10 @@ body {
   background-color: var(--ds-divider-bg-color);
 }
 
+.divider--primary.divider--grey {
+  background-color: var(--ds-divider-bg-color-grey);
+}
+
 .divider--secondary {
   background: repeating-linear-gradient(90deg, var(--ds-divider-bg-color), var(--ds-divider-bg-color) 4px, transparent 6px, transparent 8px);
 }
@@ -4842,6 +5728,14 @@ body {
   background: repeating-linear-gradient(0deg, var(--ds-divider-bg-color), var(--ds-divider-bg-color) 4px, transparent 6px, transparent 8px);
 }
 
+.divider--secondary.divider--grey {
+  background: repeating-linear-gradient(90deg, var(--ds-divider-bg-color-grey), var(--ds-divider-bg-color-grey) 4px, transparent 6px, transparent 8px);
+}
+
+.divider--secondary.divider--grey.divider--vertical {
+  background: repeating-linear-gradient(0deg, var(--ds-divider-bg-color-grey), var(--ds-divider-bg-color-grey) 4px, transparent 6px, transparent 8px);
+}
+
 .no-result__content {
   -webkit-box-align: center;
   -moz-box-align: center;
@@ -5814,24 +6708,25 @@ body {
 }
 
 .pagination {
-  --ds-pagination-item-size-lg:var(--ds-size-40);
-  --ds-pagination-item-size-md:var(--ds-size-32);
-  --ds-pagination-item-size-sm:var(--ds-size-24);
-  --ds-pagination-item-space:var(--ds-space-2);
+  --ds-pagination-item-size:var(--ds-size-32);
+  --ds-pagination-item-space:var(--ds-space-4);
   --ds-pagination-item-font-size-lg:var(--ds-size-14);
   --ds-pagination-item-font-size-md:var(--ds-size-14);
   --ds-pagination-item-font-size-sm:var(--ds-size-12);
-  --ds-pagination-item-color:var(--ds-color-text-secondary);
-  --ds-pagination-item-color-selected:var(--ds-color-text-inverse);
+  --ds-pagination-item-color:var(--ds-color-text-tertiary);
+  --ds-pagination-item-color-active:var(--ds-color-text-primary);
   --ds-pagination-item-color-disabled:var(--ds-color-text-disabled);
-  --ds-pagination-item-bg:var(--ds-color-bg-white);
   --ds-pagination-item-bg-hover:var(--ds-color-bg-container-light);
-  --ds-pagination-item-bg-selected:var(--ds-color-bg-brand);
-  --ds-pagination-item-bg-disabled:var(--ds-color-bg-container-lighter);
-  --ds-pagination-item-border:1px solid var(--ds-color-border-tertiary);
-  --ds-pagination-item-border-selected:var(--ds-color-border-brand);
-  --ds-pagination-item-border-disabled:var(--ds-color-bg-disabled);
-  --ds-pagination-item-border-radius:var(--ds-border-radius-xxs);
+  --ds-pagination-item-bg-active:var(--ds-color-bg-container);
+  --ds-pagination-item-border-color:transparent;
+  --ds-pagination-item-border-color-disabeled:var(--ds-color-border-disabled);
+  --ds-pagination-item-border-color-pressed:var(--ds-color-border-tertiary);
+  --ds-pagination-item-border-radius:var(--ds-border-radius-md);
+  gap: var(--ds-pagination-item-space);
+  list-style-type: none;
+}
+
+.pagination, .pagination li a {
   -webkit-box-align: center;
   -moz-box-align: center;
   -ms-flex-align: center;
@@ -5842,53 +6737,21 @@ body {
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
-  list-style-type: none;
-  margin-left: calc(var(--ds-pagination-item-space) * -1);
-  margin-right: calc(var(--ds-pagination-item-space) * -1);
-}
-
-.pagination--large li a {
-  font: var(--ds-font-weight-default) var(--ds-pagination-item-font-size-lg) var(--ds-font-family);
-  height: var(--ds-pagination-item-size-lg);
-  min-width: var(--ds-pagination-item-size-lg);
-}
-
-.pagination--medium li a {
-  font: var(--ds-font-weight-default) var(--ds-pagination-item-font-size-md) var(--ds-font-family);
-  height: var(--ds-pagination-item-size-md);
-  min-width: var(--ds-pagination-item-size-md);
-}
-
-.pagination--small li a {
-  font: var(--ds-font-weight-default) var(--ds-pagination-item-font-size-sm) var(--ds-font-family);
-  height: var(--ds-pagination-item-size-sm);
-  min-width: var(--ds-pagination-item-size-sm);
-}
-
-.pagination li {
-  padding: 0 var(--ds-pagination-item-space);
 }
 
 .pagination li a {
-  -webkit-box-align: center;
-  -moz-box-align: center;
-  -ms-flex-align: center;
   -webkit-box-pack: center;
   -moz-box-pack: center;
   -ms-flex-pack: center;
-  -webkit-align-items: center;
-  align-items: center;
-  border: var(--ds-pagination-item-border);
+  border: 1px solid var(--ds-pagination-item-border-color);
   border-radius: var(--ds-pagination-item-border-radius);
   color: var(--ds-pagination-item-color);
   cursor: pointer;
-  display: -webkit-box;
-  display: -moz-box;
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
+  font: var(--ds-font-weight-default) var(--ds-pagination-item-font-size-lg) var(--ds-font-family);
+  height: var(--ds-pagination-item-size);
   -webkit-justify-content: center;
   justify-content: center;
+  min-width: var(--ds-pagination-item-size);
 }
 
 .pagination li a:focus {
@@ -5899,37 +6762,44 @@ body {
   fill: var(--ds-pagination-item-color);
 }
 
-.pagination li:not(.pagination li.active) a:hover {
+.pagination li:not(.pagination li.active, .pagination li.disabled) a:hover {
   background-color: var(--ds-pagination-item-bg-hover);
 }
 
+.pagination li:not(.pagination li.active, .pagination li.disabled) a:active {
+  border-color: var(--ds-pagination-item-border-color-pressed);
+}
+
 .pagination li.active a {
-  background-color: var(--ds-pagination-item-bg-selected);
-  border-color: var(--ds-pagination-item-border-selected);
-  color: var(--ds-pagination-item-color-selected);
+  background-color: var(--ds-pagination-item-bg-active);
+  color: var(--ds-pagination-item-color-active);
   cursor: default;
+  font-weight: var(--font-weight-500);
 }
 
 .pagination li.active a svg path {
-  fill: var(--ds-pagination-item-color-selected);
+  fill: var(--ds-pagination-item-color-active);
 }
 
 .pagination li.disabled a {
-  background-color: var(--ds-pagination-item-bg-disabled);
-  border-color: var(--ds-pagination-item-border-disabled);
+  border-color: var(--ds-pagination-item-border-color-disabeled);
   color: var(--ds-pagination-item-color-disabled);
   cursor: default;
 }
 
-.pagination li.disabled a:hover {
-  background-color: var(--ds-pagination-item-bg-disabled) !important;
-}
-
 .pagination li.disabled a svg path {
   fill: var(--ds-pagination-item-color-disabled);
 }
 
-.popover {
+.pagination li.disabled a[rel=next], .pagination li.disabled a[rel=prev] {
+  border-color: var(--ds-pagination-item-border-color);
+}
+
+.pagination__more {
+  font-size: 0;
+}
+
+.popover {
   --ds-popover-bg:var(--ds-color-bg-white);
   --ds-popover-padding:var(--ds-space-12);
   --ds-popover-border-radius:var(--ds-border-radius-xxs);
@@ -7971,6 +8841,531 @@ body {
   margin-left: var(--ds-size-16);
 }
 
+.advanced-table {
+  --ds-table-th-height:var(--ds-size-56);
+  --ds-table-td-height:var(--ds-size-56);
+  --ds-table-th-padding:var(--ds-space-8) var(--ds-space-16);
+  --ds-table-td-padding:var(--ds-space-8) var(--ds-space-16);
+  --ds-table-th-border-color:var(--ds-color-border-quintary);
+  --ds-table-td-border-color:var(--ds-color-border-quintary);
+  --ds-table-td-bg-hover:var(--ds-color-bg-container-lighter);
+  --ds-table-td-bg-selected:var(--grey-40);
+  -webkit-box-direction: normal;
+  -webkit-box-orient: vertical;
+  -moz-box-direction: normal;
+  -moz-box-orient: vertical;
+  border-radius: var(--ds-border-radius-2xl);
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  font-size: var(--font-size-14);
+  height: 100%;
+  position: relative;
+}
+
+.advanced-table, .advanced-table__header-wrapper {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+}
+
+.advanced-table__header-wrapper {
+  -webkit-box-align: center;
+  -moz-box-align: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+  background-color: var(--ds-color-bg-white);
+  border-bottom: 1px solid var(--ds-color-border-quintary);
+  border-top-left-radius: var(--ds-border-radius-2xl);
+  border-top-right-radius: var(--ds-border-radius-2xl);
+  height: var(--ds-size-72);
+  padding: 0 var(--ds-space-24);
+  z-index: 3;
+}
+
+.advanced-table__collapse-button {
+  margin-right: var(--ds-space-16);
+}
+
+.advanced-table__header {
+  -ms-flex-align: center;
+  flex: 1;
+}
+
+.advanced-table__footer, .advanced-table__header {
+  -webkit-box-align: center;
+  -moz-box-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+}
+
+.advanced-table__footer {
+  -ms-flex-align: center;
+  background-color: var(--ds-color-bg-white);
+  border-bottom-left-radius: var(--ds-border-radius-2xl);
+  border-bottom-right-radius: var(--ds-border-radius-2xl);
+  border-top: 1px solid var(--ds-color-border-quintary);
+  height: var(--ds-size-64);
+  padding: 0 var(--ds-space-24);
+  z-index: 1;
+}
+
+.advanced-table__inner {
+  height: calc(100% - var(--ds-size-72) - var(--ds-size-64));
+  overflow-x: auto;
+  transition: height 0.3s ease-in-out;
+}
+
+.advanced-table__inner.is-collapsed {
+  height: 0;
+  overflow: hidden;
+}
+
+.advanced-table__thead {
+  background: var(--ds-color-bg-white);
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+
+.advanced-table .draggable-col {
+  background-color: var(--ds-color-bg-white);
+  border-radius: var(--ds-border-radius-md);
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+  text-align: left;
+}
+
+.advanced-table .resize-icon {
+  cursor: col-resize;
+  height: 100%;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 20px;
+}
+
+.advanced-table .border {
+  border-width: 1px;
+}
+
+.advanced-table .w-fit {
+  width: fit-content;
+}
+
+.advanced-table .select-none {
+  user-select: none;
+}
+
+.advanced-table .touch-none {
+  touch-action: none;
+}
+
+.advanced-table .hidden {
+  display: none;
+}
+
+.advanced-table .z-10 {
+  z-index: 10;
+}
+
+.advanced-table .column-menu {
+  width: 140px;
+}
+
+.advanced-table .column-menu div {
+  padding: 5px 12px;
+}
+
+.advanced-table .column-menu input {
+  margin-right: 8px;
+}
+
+.advanced-table table {
+  border-collapse: separate;
+  border-spacing: 0;
+  max-height: 100%;
+  width: 100%;
+}
+
+.advanced-table table thead tr th {
+  border-bottom: 1px solid var(--ds-table-th-border-color);
+  height: var(--ds-table-th-height);
+  padding: var(--ds-table-th-padding);
+  vertical-align: middle;
+}
+
+.advanced-table table thead tr th.with-checkbox {
+  max-width: var(--ds-space-48);
+  min-width: auto !important;
+  padding: var(--ds-space-8) var(--ds-space-6) var(--ds-space-8) 22px;
+  width: var(--ds-space-48) !important;
+}
+
+.advanced-table table thead tr th.actions-header .resize-icon, .advanced-table table thead tr th.with-checkbox .resize-icon {
+  display: none;
+}
+
+.advanced-table table tbody tr td {
+  border-bottom: 1px solid var(--ds-table-td-border-color);
+  height: var(--ds-table-td-height);
+  padding: var(--ds-table-td-padding);
+  vertical-align: middle;
+}
+
+.advanced-table table tbody tr td.with-checkbox {
+  max-width: var(--ds-space-48);
+  min-width: auto !important;
+  padding: var(--ds-space-8) var(--ds-space-6) var(--ds-space-8) 22px;
+  width: var(--ds-space-48) !important;
+}
+
+.advanced-table table tbody tr td.with-checkbox .actions-list__checkbox {
+  display: none;
+}
+
+.advanced-table table tbody tr td.with-checkbox .actions-list__checkbox.active-checkbox {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+}
+
+.advanced-table table tbody tr td:not(.with-checkbox, .action-column) {
+  box-sizing: border-box;
+  padding: var(--ds-space-8) var(--ds-space-16) !important;
+}
+
+.advanced-table table tbody tr .action-column {
+  -webkit-box-align: center;
+  -moz-box-align: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  min-width: auto !important;
+  padding: var(--ds-space-0);
+  width: 0 !important;
+}
+
+.advanced-table table tbody tr:hover td {
+  background-color: var(--ds-table-td-bg-hover);
+  cursor: pointer;
+}
+
+.advanced-table table tbody tr:hover .action-column, .advanced-table table tbody tr:hover td .actions-list__checkbox, .advanced-table table tbody tr:hover td .actions-list__right {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+}
+
+.advanced-table table tbody tr:hover .action-column {
+  -webkit-box-align: center;
+  -moz-box-align: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+  padding: var(--ds-space-0);
+}
+
+.advanced-table table tbody tr:hover .pinned-cell {
+  background-color: var(--ds-table-td-bg-hover) !important;
+}
+
+.advanced-table table tbody tr.selected td, .advanced-table table tbody tr.selected + .advanced-table__expanded-row td {
+  background-color: var(--ds-table-td-bg-selected);
+}
+
+.advanced-table table tbody tr.selected .pinned-cell {
+  background-color: var(--ds-table-td-bg-hover) !important;
+}
+
+.advanced-table table tbody tr:last-child td {
+  border-bottom: 0;
+}
+
+.advanced-table__pagination {
+  -webkit-box-pack: justify;
+  -moz-box-pack: justify;
+  -ms-flex-pack: justify;
+  height: 100%;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.advanced-table__pagination, .advanced-table__pagination__right {
+  -webkit-box-align: center;
+  -moz-box-align: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+}
+
+.advanced-table__pagination__right {
+  gap: var(--ds-space-24);
+}
+
+.advanced-table__pagination__right__input {
+  width: var(--ds-size-48);
+}
+
+.advanced-table__pagination__right__input input {
+  text-align: center;
+}
+
+.advanced-table__pagination .select {
+  width: 140px;
+}
+
+.advanced-table__pagination .select.no-border input {
+  border: 0;
+}
+
+.advanced-table__expand-button {
+  flex-shrink: 0;
+  height: var(--ds-size-32);
+  min-width: auto;
+  padding: var(--ds-space-4);
+  width: var(--ds-size-32);
+}
+
+.advanced-table__expanded-row td {
+  background-color: inherit;
+  border-bottom: 1px solid var(--ds-table-td-border-color);
+  height: var(--ds-table-td-height);
+  padding: var(--ds-table-td-padding) !important;
+  transition: background-color 0.2s ease;
+  vertical-align: middle;
+}
+
+.advanced-table__expanded-row td .advanced-table__expanded-content {
+  background-color: transparent;
+  padding: 0;
+}
+
+.advanced-table__expanded-row td .advanced-table__expanded-content table {
+  border-collapse: separate;
+  border-spacing: 0;
+  width: 100%;
+}
+
+.advanced-table__expanded-row td .advanced-table__expanded-content table tbody tr td {
+  background-color: transparent;
+  border-bottom: none;
+  height: var(--ds-table-td-height);
+  padding: var(--ds-table-td-padding);
+  vertical-align: middle;
+}
+
+.advanced-table__expanded-row td .advanced-table__expanded-content table tbody tr td.with-checkbox {
+  background-color: inherit;
+  max-width: var(--ds-space-48);
+  min-width: auto !important;
+  padding: var(--ds-space-8) var(--ds-space-40) var(--ds-space-8) 55px !important;
+  width: var(--ds-space-48) !important;
+}
+
+.advanced-table__expanded-row td .advanced-table__expanded-content table tbody tr td.with-checkbox .actions-list__checkbox {
+  display: flex !important;
+}
+
+.advanced-table__expanded-row td .advanced-table__expanded-content table tbody tr td.with-checkbox .indeterminate-checkbox {
+  margin: 0;
+}
+
+.advanced-table__expanded-row td .advanced-table__expanded-content table tbody tr td.pinned-cell {
+  background-color: inherit;
+  position: sticky;
+  z-index: 1;
+}
+
+.advanced-table__expanded-row td .advanced-table__expanded-content table tbody tr td.expand-column {
+  box-sizing: border-box !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+}
+
+.advanced-table__expanded-row:hover td, .advanced-table__expanded-row:hover td .advanced-table__expanded-content table tbody tr td, .advanced-table__expanded-row:hover td .advanced-table__expanded-content table tbody tr td.with-checkbox {
+  background-color: var(--ds-table-td-bg-hover);
+}
+
+tr.selected .advanced-table__expanded-row td, tr.selected .advanced-table__expanded-row td .advanced-table__expanded-content table tbody tr td, tr.selected .advanced-table__expanded-row td .advanced-table__expanded-content table tbody tr td.with-checkbox {
+  background-color: var(--ds-table-td-bg-selected);
+}
+
+.advanced-table .expand-column {
+  box-sizing: border-box !important;
+  flex: 0 0 50px !important;
+  overflow: hidden !important;
+  padding: var(--ds-space-8) var(--ds-space-6) !important;
+  white-space: nowrap !important;
+}
+
+.with-border {
+  border: 1px solid var(--ds-color-border-quintary);
+}
+
+.actions-list {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  height: 100%;
+}
+
+.actions-list, .actions-list__right {
+  -webkit-box-align: center;
+  -moz-box-align: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+}
+
+.actions-list__right {
+  background-color: var(--ds-color-bg-container-lighter);
+  bottom: 0;
+  display: none;
+  gap: var(--ds-space-8);
+  left: unset;
+  padding: var(--ds-space-2) var(--ds-space-16);
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.actions-list__right:before {
+  background: linear-gradient(90deg, hsla(0, 0%, 97%, 0), #f8f8f8 92.6%);
+  content: "";
+  height: 100%;
+  left: -24px;
+  position: absolute;
+  width: 24px;
+}
+
+.settings-menu {
+  border-radius: var(--ds-border-radius-lg);
+  box-shadow: var(--shadow-2);
+  width: 260px;
+}
+
+.settings-menu__dropdown {
+  padding: var(--ds-space-6) 0;
+}
+
+.settings-menu__dropdown .relative {
+  position: relative;
+}
+
+.settings-menu__dropdown .sticky {
+  background: #fff;
+  border-bottom: 1px solid var(--ds-color-border-tertiary) !important;
+  padding: 0 var(--ds-space-16);
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.settings-menu__dropdown .scrollbar--content {
+  box-sizing: border-box;
+  max-height: 300px;
+  overflow-y: auto;
+  padding: 0 var(--ds-space-16);
+}
+
+.settings-menu__dropdown .scrollbar--content::-webkit-scrollbar {
+  display: none;
+}
+
+.settings-menu__dropdown__option {
+  border-bottom: 1px solid var(--ds-color-border-tertiary);
+  margin-bottom: var(--ds-space-4);
+}
+
+.settings-menu__dropdown__option:last-child {
+  border-bottom: 0;
+  margin-bottom: 0;
+}
+
+.settings-menu__dropdown__option .switcher {
+  -webkit-box-align: center;
+  -moz-box-align: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+  height: 36px;
+}
+
+.settings-menu__dropdown__option .switcher__label {
+  font-size: var(--font-size-12);
+  font-weight: var(--font-weight-400);
+  text-transform: capitalize;
+}
+
+@keyframes react-loading-skeleton {
+  to {
+    transform: translateX(100%);
+  }
+}
+.react-loading-skeleton {
+  --base-color:#ebebeb;
+  --highlight-color:#f5f5f5;
+  --animation-duration:1.5s;
+  --animation-direction:normal;
+  --pseudo-element-display:block;
+  background-color: var(--base-color);
+  border-radius: 0.25rem;
+  display: inline-flex;
+  line-height: 1;
+  overflow: hidden;
+  position: relative;
+  user-select: none;
+  width: 100%;
+}
+
+.react-loading-skeleton:after {
+  animation-direction: var(--animation-direction);
+  animation-duration: var(--animation-duration);
+  animation-iteration-count: infinite;
+  animation-name: react-loading-skeleton;
+  animation-timing-function: ease-in-out;
+  background-image: var(--custom-highlight-background, linear-gradient(90deg, var(--base-color) 0, var(--highlight-color) 50%, var(--base-color) 100%));
+  background-repeat: no-repeat;
+  content: " ";
+  display: var(--pseudo-element-display);
+  height: 100%;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transform: translateX(-100%);
+}
+
+@media (prefers-reduced-motion) {
+  .react-loading-skeleton {
+    --pseudo-element-display:none;
+  }
+}
 [data-rwp-wrapper] {
   align-items: stretch;
   display: flex;