hrm_ui_lib 2.0.0-alpha.2 → 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 {
@@ -2317,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";
@@ -2351,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);
@@ -2899,18 +2905,6 @@ body {
   background-color: var(--ds-avatar-group-add-bg-hover);
 }
 
-.badge--primary {
-  background-color: var(--ds-badge-primary-bg);
-}
-
-.badge--secondary {
-  background-color: var(--ds-badge-secondary-bg);
-}
-
-.badge--tertiary {
-  background-color: var(--ds-badge-tertiary-bg);
-}
-
 .badge {
   --ds-badge-primary-bg:var(--pink-500);
   --ds-badge-secondary-bg:var(--grey-50);
@@ -2937,76 +2931,511 @@ body {
   font: var(--ds-badge-font);
 }
 
-.badge--filled, .badge--filled p {
-  color: var(--white);
+.badge--primary {
+  background-color: var(--ds-badge-primary-bg);
+}
+
+.badge--secondary {
+  background-color: var(--ds-badge-secondary-bg);
+}
+
+.badge--tertiary {
+  background-color: var(--ds-badge-tertiary-bg);
+}
+
+.badge--large {
+  padding: var(--ds-badge-padding-lg);
+}
+
+.badge--large .badge__inner {
+  padding: var(--ds-badge-inner-padding-lg);
+}
+
+.badge--small {
+  padding: var(--ds-badge-padding-sm);
+}
+
+.badge--small .badge__inner {
+  padding: var(--ds-badge-inner-padding-sm);
 }
 
-.badge--filled.badge--gray {
+.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--filled.badge--blue {
+.badge-v2--filled.badge-v2--blue {
   background-color: var(--blue-800);
 }
 
-.badge--filled.badge--orange {
-  background-color: var(--yellow-900);
+.badge-v2--filled.badge-v2--orange {
+  background-color: var(--yellow-800);
 }
 
-.badge--filled.badge--red {
+.badge-v2--filled.badge-v2--red {
   background-color: var(--red-500);
 }
 
-.badge--filled.badge--green {
+.badge-v2--filled.badge-v2--green {
   background-color: var(--brand-500);
 }
 
-.badge--filled.badge--empty, .badge--filled.badge--pink, .badge--filled.badge--purple, .badge--filled.badge--sky, .badge--filled.badge--teal, .badge--filled.badge--yellow {
-  background-color: var(--ds-badge-primary-bg);
+.badge-v2--filled.badge-v2--yellow {
+  background-color: var(--yellow-500);
 }
 
-.badge--light, .badge--light p {
-  color: var(--grey-900);
+.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--light.badge--gray {
+.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--light.badge--blue {
+.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--light.badge--orange {
-  background-color: var(--ds-badge-primary-bg);
+.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--light.badge--red {
+.badge-v2--lighter.badge-v2--red .badge-v2--with-dot {
   background-color: var(--red-500);
 }
 
-.badge--light.badge--green {
+.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--light.badge--empty, .badge--light.badge--pink, .badge--light.badge--purple, .badge--light.badge--sky, .badge--light.badge--teal, .badge--light.badge--yellow {
-  background-color: var(--ds-badge-primary-bg);
+.badge-v2--stroke.badge-v2--yellow {
+  border-color: var(--yellow-500);
 }
 
-.badge--large {
-  padding: var(--ds-badge-padding-lg);
+.badge-v2--stroke.badge-v2--yellow > .badge-v2__inner {
+  color: var(--yellow-500);
 }
 
-.badge--large .badge__inner {
-  padding: var(--ds-badge-inner-padding-lg);
+.badge-v2--stroke.badge-v2--yellow .badge-v2--with-dot {
+  background-color: var(--yellow-500);
 }
 
-.badge--small {
-  padding: var(--ds-badge-padding-sm);
+.badge-v2--stroke.badge-v2--purple {
+  border-color: var(--purple-400);
 }
 
-.badge--small .badge__inner {
-  padding: var(--ds-badge-inner-padding-sm);
+.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 {
@@ -3462,6 +3891,71 @@ body {
   width: var(--ds-button-icon-size-sm);
 }
 
+.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);
@@ -3470,6 +3964,10 @@ body {
   position: relative;
 }
 
+.card--noBorder {
+  border: none;
+}
+
 .card--expanded, .card--expanded .card__content--header {
   height: auto;
 }
@@ -3588,9 +4086,15 @@ body {
 }
 
 .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 {
@@ -3601,6 +4105,134 @@ body {
   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);
@@ -3893,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;
@@ -3927,9 +4562,9 @@ body {
 .collapse-icon {
   align-items: center;
   border: 1px solid transparent;
-  border-radius: 8px;
+  border-radius: var(--size-8);
   justify-content: center;
-  padding: 6px;
+  padding: var(--size-4);
   position: relative;
   top: -7px;
 }
@@ -3963,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);
@@ -3977,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);
@@ -4027,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;
@@ -4058,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;
 }
@@ -4095,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 {
@@ -4162,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:active, .controller--switch input[type=checkbox] + .controller__icon:visited {
+.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: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);
 }
 
@@ -4198,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);
 }
 
@@ -4214,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);
 }
@@ -4222,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 {
@@ -5036,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;
 }
 
@@ -5053,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);
 }
@@ -5061,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;
@@ -6033,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;
@@ -6061,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 {
@@ -6118,36 +6762,43 @@ 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);
 }
 
+.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);