@innovaccer/design-system 3.4.0 → 4.0.0-1

package/css/dist/index.css

@@ -490,199 +490,6 @@ body {
   font-size: var(--font-size);
 }
 
-/* Text */
-.Text {
-  margin: 0;
-  line-height: var(--font-height);
-}
-
-.Text--small {
-  font-size: var(--font-size-s);
-  line-height: var(--font-height-normal);
-}
-
-.Text--regular {
-  font-size: var(--font-size);
-  line-height: var(--font-height);
-}
-
-.Text--large {
-  font-size: var(--font-size-m);
-  line-height: var(--font-height-m);
-}
-
-.Text--default {
-  color: var(--text);
-}
-
-.Text--subtle {
-  color: var(--text-subtle);
-}
-
-.Text--disabled {
-  color: var(--text-disabled);
-}
-
-.Text--destructive {
-  color: var(--text-destructive);
-}
-
-.Text--white {
-  color: var(--text-white);
-}
-
-.Text--success {
-  color: var(--text-success);
-}
-
-.Text--link {
-  color: var(--text-link);
-}
-
-.Text--medium {
-  font-weight: var(--font-weight-medium);
-}
-
-.Text--strong {
-  font-weight: var(--font-weight-bold);
-}
-
-/* Heading */
-.Heading {
-  margin: 0;
-}
-
-.Heading--s {
-  font-weight: var(--font-weight-bold);
-  font-size: var(--font-size-m);
-  line-height: var(--font-height-m);
-}
-
-.Heading--m {
-  font-weight: var(--font-weight-medium);
-  font-size: var(--font-size-l);
-  line-height: var(--font-height-l);
-}
-
-.Heading--l {
-  font-weight: var(--font-weight-normal);
-  font-size: var(--font-size-xl);
-  line-height: var(--font-height-xl);
-}
-
-.Heading--xl {
-  font-weight: var(--font-weight-medium);
-  font-size: var(--font-size-xxl);
-  line-height: var(--font-height-xxl);
-}
-
-.Heading--xxl {
-  font-weight: var(--font-weight-normal);
-  font-size: var(--font-size-xxxl);
-  line-height: var(--font-height-xxl);
-}
-
-.Heading--default {
-  color: var(--text);
-}
-
-.Heading--subtle {
-  color: var(--text-subtle);
-}
-
-.Heading--disabled {
-  color: var(--text-disabled);
-}
-
-.Heading--white {
-  color: var(--text-white);
-}
-
-/* Label */
-.Label {
-  display: inline-flex;
-}
-
-.Label--withInput {
-  margin-bottom: var(--spacing-m);
-}
-
-.Label--optional {
-  align-items: center;
-}
-
-.Label-text {
-  line-height: var(--font-height-s);
-  font-weight: var(--font-weight-medium);
-  word-break: break-all;
-}
-
-.Label-optionalText {
-  line-height: var(--font-height-s);
-  margin-left: var(--spacing-m);
-}
-
-.Label--disabled {
-  color: var(--text-disabled);
-}
-
-.Label-requiredIndicator {
-  height: var(--spacing-0-75);
-  width: var(--spacing-0-75);
-  border-radius: 50%;
-  background: var(--alert);
-  margin-left: var(--spacing-m);
-  margin-bottom: var(--spacing-0-75);
-  display: inline-flex;
-}
-
-/* Caption */
-.Caption {
-  display: flex;
-  align-items: center;
-  box-sizing: border-box;
-}
-
-.Caption--withInput {
-  margin-top: var(--spacing-m);
-}
-
-.Caption-icon {
-  display: flex;
-  align-content: center;
-  margin-right: var(--spacing-m);
-}
-
-.Caption--hidden {
-  display: none;
-}
-
-/* Subheading */
-.Subheading {
-  margin: 0;
-  font-weight: var(--font-weight-bolder);
-  font-size: var(--spacing-l);
-  line-height: var(--font-height-m);
-  letter-spacing: var(--letter-spacing);
-  text-transform: uppercase;
-}
-
-.Subheading--default {
-  color: var(--text);
-}
-
-.Subheading--subtle {
-  color: var(--text-subtle);
-}
-
-.Subheading--disabled {
-  color: var(--text-disabled);
-}
-
-.Subheading--white {
-  color: var(--text-white);
-}
-
 .PopperWrapper-trigger {
   display: inline-flex;
   flex-grow: 1;
@@ -727,39 +534,6 @@ body {
   background-clip: content-box;
 }
 
-.Legend {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  width: -moz-fit-content;
-  width: fit-content;
-}
-
-.Legend-icon {
-  border-radius: var(--spacing-s);
-  margin-right: var(--spacing);
-}
-
-.ProgressBar {
-  width: 100%;
-  border-radius: var(--spacing-m);
-  background: var(--secondary-lighter);
-}
-
-.ProgressBar-indicator {
-  background-color: var(--primary);
-  border-radius: var(--spacing-m);
-  transition: var(--duration--slow-01) var(--standard-expressive-curve);
-}
-
-.ProgressBar-indicator--small {
-  height: var(--spacing-m);
-}
-
-.ProgressBar-indicator--regular {
-  height: var(--spacing);
-}
-
 .ActionButton {
   display: flex;
   flex-shrink: 0;
@@ -1892,6 +1666,27 @@ body {
   background: var(--primary-light);
 }
 
+/* Caption */
+.Caption {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+}
+
+.Caption--withInput {
+  margin-top: var(--spacing-m);
+}
+
+.Caption-icon {
+  display: flex;
+  align-content: center;
+  margin-right: var(--spacing-m);
+}
+
+.Caption--hidden {
+  display: none;
+}
+
 /* badge */
 
 .Card {
@@ -2577,22 +2372,383 @@ body {
   display: flex;
 }
 
-.Collapsible-footer:hover {
-  background-color: var(--secondary-lighter);
-}
+.Collapsible-footer:hover {
+  background-color: var(--secondary-lighter);
+}
+
+.Collapsible-footer:focus,
+.Collapsible-footer:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-spread) var(--secondary-shadow);
+}
+
+.Collapsible-footer:active {
+  background-color: var(--secondary-light);
+}
+
+.Collapsible-footer--seperator {
+  border-top: var(--spacing-xs) solid var(--secondary-light);
+}
+
+.Row {
+  display: flex;
+  flex-wrap: wrap;
+  flex: 1 100%;
+}
+
+.Col {
+  position: relative;
+  box-sizing: border-box;
+  flex: 1 0 0%;
+}
+
+.Col--auto {
+  flex: 0 0 auto;
+  width: auto;
+}
+
+.Col--1 {
+  flex: 0 0 auto;
+  width: calc(100% / var(--grid-columns) * 1);
+}
+
+.Col--2 {
+  flex: 0 0 auto;
+  width: calc(100% / var(--grid-columns) * 2);
+}
+
+.Col--3 {
+  flex: 0 0 auto;
+  width: calc(100% / var(--grid-columns) * 3);
+}
+
+.Col--4 {
+  flex: 0 0 auto;
+  width: calc(100% / var(--grid-columns) * 4);
+}
+
+.Col--5 {
+  flex: 0 0 auto;
+  width: calc(100% / var(--grid-columns) * 5);
+}
+
+.Col--6 {
+  flex: 0 0 auto;
+  width: calc(100% / var(--grid-columns) * 6);
+}
+
+.Col--7 {
+  flex: 0 0 auto;
+  width: calc(100% / var(--grid-columns) * 7);
+}
+
+.Col--8 {
+  flex: 0 0 auto;
+  width: calc(100% / var(--grid-columns) * 8);
+}
+
+.Col--9 {
+  flex: 0 0 auto;
+  width: calc(100% / var(--grid-columns) * 9);
+}
+
+.Col--10 {
+  flex: 0 0 auto;
+  width: calc(100% / var(--grid-columns) * 10);
+}
+
+.Col--11 {
+  flex: 0 0 auto;
+  width: calc(100% / var(--grid-columns) * 11);
+}
+
+.Col--12 {
+  flex: 0 0 auto;
+  width: calc(100% / var(--grid-columns) * 12);
+}
+
+/* if the viewport is between 0 to 575 pixels wide. */
+
+@media (max-width: 575px) {
+  .Col--xs-auto {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  .Col--xs-1 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 1);
+  }
+  .Col--xs-2 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 2);
+  }
+  .Col--xs-3 {
+    flex: 0 0 auto;
+  }
+  .Col--xs-4 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 4);
+  }
+  .Col--xs-5 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 5);
+  }
+  .Col--xs-6 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 6);
+  }
+  .Col--xs-7 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 7);
+  }
+  .Col--xs-8 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 8);
+  }
+  .Col--xs-9 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 9);
+  }
+  .Col--xs-10 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 10);
+  }
+  .Col--xs-11 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 11);
+  }
+  .Col--xs-12 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 12);
+  }
+}
+
+/* if the viewport is between 576 and 767 pixels wide. */
+
+@media (min-width: 576px) and (max-width: 767px) {
+  .Col--s-auto {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  .Col--s-1 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 1);
+  }
+  .Col--s-2 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 2);
+  }
+  .Col--s-3 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 3);
+  }
+  .Col--s-4 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 4);
+  }
+  .Col--s-5 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 5);
+  }
+  .Col--s-6 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 6);
+  }
+  .Col--s-7 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 7);
+  }
+  .Col--s-8 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 8);
+  }
+  .Col--s-9 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 9);
+  }
+  .Col--s-10 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 10);
+  }
+  .Col--s-11 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 11);
+  }
+  .Col--s-12 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 12);
+  }
+}
+
+/* if the viewport is between 768 and 991 pixels wide. */
+
+@media (min-width: 768px) and (max-width: 991px) {
+  .Col--m-auto {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  .Col--m-1 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 1);
+  }
+  .Col--m-2 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 2);
+  }
+  .Col--m-3 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 3);
+  }
+  .Col--m-4 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 4);
+  }
+  .Col--m-5 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 5);
+  }
+  .Col--m-6 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 6);
+  }
+  .Col--m-7 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 7);
+  }
+  .Col--m-8 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 8);
+  }
+  .Col--m-9 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 9);
+  }
+  .Col--m-10 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 10);
+  }
+  .Col--m-11 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 11);
+  }
+  .Col--m-12 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 12);
+  }
+}
+
+/* if the viewport is between 992 and 1199 pixels wide. */
 
-.Collapsible-footer:focus,
-.Collapsible-footer:focus-visible {
-  outline: none;
-  box-shadow: var(--shadow-spread) var(--secondary-shadow);
+@media (min-width: 992px) and (max-width: 1199px) {
+  .Col--l-auto {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  .Col--l-1 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 1);
+  }
+  .Col--l-2 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 2);
+  }
+  .Col--l-3 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 3);
+  }
+  .Col--l-4 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 4);
+  }
+  .Col--l-5 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 5);
+  }
+  .Col--l-6 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 6);
+  }
+  .Col--l-7 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 7);
+  }
+  .Col--l-8 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 8);
+  }
+  .Col--l-9 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 9);
+  }
+  .Col--l-10 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 10);
+  }
+  .Col--l-11 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 11);
+  }
+  .Col--l-12 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 12);
+  }
 }
 
-.Collapsible-footer:active {
-  background-color: var(--secondary-light);
-}
+/* if the viewport is 1200 pixels wide or wider. */
 
-.Collapsible-footer--seperator {
-  border-top: var(--spacing-xs) solid var(--secondary-light);
+@media (min-width: 1200px) {
+  .Col--xl-auto {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  .Col--xl-1 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 1);
+  }
+  .Col--xl-2 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 2);
+  }
+  .Col--xl-3 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 3);
+  }
+  .Col--xl-4 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 4);
+  }
+  .Col--xl-5 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 5);
+  }
+  .Col--xl-6 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 6);
+  }
+  .Col--xl-7 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 7);
+  }
+  .Col--xl-8 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 8);
+  }
+  .Col--xl-9 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 9);
+  }
+  .Col--xl-10 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 10);
+  }
+  .Col--xl-11 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 11);
+  }
+  .Col--xl-12 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 12);
+  }
 }
 
 .DateRangePicker {
@@ -4010,6 +4166,57 @@ body {
   margin-bottom: var(--spacing-2);
 }
 
+/* Heading */
+.Heading {
+  margin: 0;
+}
+
+.Heading--s {
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-m);
+  line-height: var(--font-height-m);
+}
+
+.Heading--m {
+  font-weight: var(--font-weight-medium);
+  font-size: var(--font-size-l);
+  line-height: var(--font-height-l);
+}
+
+.Heading--l {
+  font-weight: var(--font-weight-normal);
+  font-size: var(--font-size-xl);
+  line-height: var(--font-height-xl);
+}
+
+.Heading--xl {
+  font-weight: var(--font-weight-medium);
+  font-size: var(--font-size-xxl);
+  line-height: var(--font-height-xxl);
+}
+
+.Heading--xxl {
+  font-weight: var(--font-weight-normal);
+  font-size: var(--font-size-xxxl);
+  line-height: var(--font-height-xxl);
+}
+
+.Heading--default {
+  color: var(--text);
+}
+
+.Heading--subtle {
+  color: var(--text-subtle);
+}
+
+.Heading--disabled {
+  color: var(--text-disabled);
+}
+
+.Heading--white {
+  color: var(--text-white);
+}
+
 .HorizontalNav {
   display: flex;
 }
@@ -4476,25 +4683,76 @@ body {
   outline: var(--spacing-s) solid var(--secondary-shadow);
 }
 
-.Input-icon--right:focus-visible {
-  outline: var(--spacing-s) solid var(--secondary-shadow);
-  border-radius: 10px;
+.Input-icon--right:focus-visible {
+  outline: var(--spacing-s) solid var(--secondary-shadow);
+  border-radius: 10px;
+}
+
+.Input-iconWrapper--right:hover .Input-icon--right {
+  background-color: var(--secondary);
+}
+
+.Input-iconWrapper--right:active .Input-icon--right {
+  background-color: var(--secondary-dark);
+}
+
+.Input-inlineLabel {
+  margin-right: var(--spacing);
+}
+
+.Input-iconWrapper--right:focus-visible {
+  outline: none;
+}
+
+/* Label */
+.Label {
+  display: inline-flex;
+}
+
+.Label--withInput {
+  margin-bottom: var(--spacing-m);
+}
+
+.Label--optional {
+  align-items: center;
+}
+
+.Label-text {
+  line-height: var(--font-height-s);
+  font-weight: var(--font-weight-medium);
+  word-break: break-all;
+}
+
+.Label-optionalText {
+  line-height: var(--font-height-s);
+  margin-left: var(--spacing-m);
 }
 
-.Input-iconWrapper--right:hover .Input-icon--right {
-  background-color: var(--secondary);
+.Label--disabled {
+  color: var(--text-disabled);
 }
 
-.Input-iconWrapper--right:active .Input-icon--right {
-  background-color: var(--secondary-dark);
+.Label-requiredIndicator {
+  height: var(--spacing-0-75);
+  width: var(--spacing-0-75);
+  border-radius: 50%;
+  background: var(--alert);
+  margin-left: var(--spacing-m);
+  margin-bottom: var(--spacing-0-75);
+  display: inline-flex;
 }
 
-.Input-inlineLabel {
-  margin-right: var(--spacing);
+.Legend {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: -moz-fit-content;
+  width: fit-content;
 }
 
-.Input-iconWrapper--right:focus-visible {
-  outline: none;
+.Legend-icon {
+  border-radius: var(--spacing-s);
+  margin-right: var(--spacing);
 }
 
 .Link {
@@ -5694,6 +5952,26 @@ body {
   }
 }
 
+.ProgressBar {
+  width: 100%;
+  border-radius: var(--spacing-m);
+  background: var(--secondary-lighter);
+}
+
+.ProgressBar-indicator {
+  background-color: var(--primary);
+  border-radius: var(--spacing-m);
+  transition: var(--duration--slow-01) var(--standard-expressive-curve);
+}
+
+.ProgressBar-indicator--small {
+  height: var(--spacing-m);
+}
+
+.ProgressBar-indicator--regular {
+  height: var(--spacing);
+}
+
 .Ring {
   transform: rotate(-90deg);
 }
@@ -6604,6 +6882,32 @@ body {
   transition: var(--duration--fast-02) var(--standard-productive-curve);
 }
 
+/* Subheading */
+.Subheading {
+  margin: 0;
+  font-weight: var(--font-weight-bolder);
+  font-size: var(--spacing-l);
+  line-height: var(--font-height-m);
+  letter-spacing: var(--letter-spacing);
+  text-transform: uppercase;
+}
+
+.Subheading--default {
+  color: var(--text);
+}
+
+.Subheading--subtle {
+  color: var(--text-subtle);
+}
+
+.Subheading--disabled {
+  color: var(--text-disabled);
+}
+
+.Subheading--white {
+  color: var(--text-white);
+}
+
 .Switch {
   display: inline-flex;
   position: relative;
@@ -6927,6 +7231,63 @@ body {
   box-sizing: border-box;
 }
 
+/* Text */
+.Text {
+  margin: 0;
+  line-height: var(--font-height);
+}
+
+.Text--small {
+  font-size: var(--font-size-s);
+  line-height: var(--font-height-normal);
+}
+
+.Text--regular {
+  font-size: var(--font-size);
+  line-height: var(--font-height);
+}
+
+.Text--large {
+  font-size: var(--font-size-m);
+  line-height: var(--font-height-m);
+}
+
+.Text--default {
+  color: var(--text);
+}
+
+.Text--subtle {
+  color: var(--text-subtle);
+}
+
+.Text--disabled {
+  color: var(--text-disabled);
+}
+
+.Text--destructive {
+  color: var(--text-destructive);
+}
+
+.Text--white {
+  color: var(--text-white);
+}
+
+.Text--success {
+  color: var(--text-success);
+}
+
+.Text--link {
+  color: var(--text-link);
+}
+
+.Text--medium {
+  font-weight: var(--font-weight-medium);
+}
+
+.Text--strong {
+  font-weight: var(--font-weight-bold);
+}
+
 /* Textarea */
 
 .Textarea {
@@ -9891,4 +10252,187 @@ body {
   white-space: nowrap;
 }
 
+.AvatarSelection-wrapper {
+  width: var(--spacing-8);
+}
+
+.Card-wrapper {
+  height: 250px;
+}
+
+.bottom-0 {
+  bottom: 0;
+}
+
+.EditableDropdown-customTrigger {
+  border-radius: var(--spacing-m);
+}
+
+.Modal-list {
+    height: var(--spacing-8);
+}
+
+.custom-boundaryWrapper {
+  height: var(--spacing-8);
+  border: 1px dashed;
+}
+
+.Combobox-outerWrapper {
+  max-width: var(--spacing-9);
+}
+
+.Grid-outerWrapper {
+    height: 350px;
+}
+
+.List-wrapper {
+    height: 350px;
+}
+
+.SubList-wrapper {
+  margin-left: 40px;
+  background-color: #fcfafa;
+}
+
+.Listbox-wrapper {
+  height: var(--spacing-9);
+}
+
+.SubMenu-Text {
+  width: var(--spacing-7);
+}
+
+.Pageheader-longWrapper {
+    width: 1400px;
+}
+
+.Select-Option-label {
+  max-width: var(--spacing-7);
+}
+
+.Button-primary--active {
+  background-color: var(--primary-darker);
+}
+
+.AIButton-secondary--active {
+  background-color: var(--secondary-dark);
+  color: var(--secondary-dark)  !important;
+}
+
+.Button-secondary--active {
+  background-color: var(--secondary-dark);
+}
+
+.Table-container {
+  display: flex;
+  height: 100%;
+}
+
+.Table-filters {
+  box-sizing: border-box;
+  display: flex;
+  flex-shrink: 0;
+}
+
+.Table-filters--vertical {
+  flex-direction: column;
+  height: 100%;
+  width: var(--spacing-9);
+  padding: 0 var(--spacing-l);
+}
+
+.Table-filtersHeading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.Table-filtersCloseIcon {
+  cursor: pointer;
+}
+
+.Table-filters--vertical .Table-filter {
+  padding: var(--spacing) 0;
+}
+
+.Table-filters--vertical .Table-filter:first-of-type {
+  padding-top: var(--spacing-l);
+}
+
+.Table-filters--vertical .Table-filter:last-of-type {
+  padding-bottom: var(--spacing-l);
+}
+
+.Table-filters--horizontal .Table-filter {
+  padding: 0 var(--spacing-m);
+}
+
+.Table-filters--horizontal .Table-filter:first-of-type {
+  padding-left: 0;
+}
+
+.Table-filters--horizontal .Table-filter:last-of-type {
+  padding-right: 0;
+}
+
+.Table-filter .Input {
+  min-width: unset;
+}
+
+.Table-verticalFilter {
+  width: calc(100% - var(--spacing-9));
+}
+.Table-wrapper {
+  height: 450px;
+}
+
+.UserAvatars-popover {
+  max-height: var(--spacing-7);
+}
+
+.EditableInput-wrapper--error {
+    width: var(--spacing-9);
+}
+
+.Table-container {
+  display: flex;
+  height: 100%;
+}
+
+.Table-filters {
+  box-sizing: border-box;
+  display: flex;
+  flex-shrink: 0;
+  flex-direction: column;
+  height: 100%;
+  width: var(--spacing-9);
+  padding: 0 var(--spacing-l);
+}
+
+.Table-filtersHeading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.Table-filter {
+  padding: var(--spacing) 0;
+}
+
+.Table-filter:first-of-type {
+  padding-top: var(--spacing-l);
+}
+
+.Table-filter:last-of-type {
+  padding-bottom: var(--spacing-l);
+}
+
+.Table-filter .Input {
+  min-width: unset;
+}
+
+.Table-filter-panel {
+  width: calc(100% - var(--spacing-9));
+}
+
 /*# sourceMappingURL=index.css.map */