@innovaccer/design-system 3.5.0 → 4.0.0-2

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;
@@ -1923,6 +1697,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 {
@@ -2626,6 +2421,367 @@ body {
   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. */
+
+@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);
+  }
+}
+
+/* if the viewport is 1200 pixels wide or wider. */
+
+@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 {
   display: flex;
 }
@@ -4041,6 +4197,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;
 }
@@ -4528,6 +4735,57 @@ body {
   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);
+}
+
+.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;
+}
+
+.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);
+}
+
 .Link {
   text-decoration: none;
   font-weight: var(--font-weight-medium);
@@ -5725,6 +5983,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);
 }
@@ -6635,6 +6913,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;
@@ -6958,6 +7262,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 {