@innovaccer/design-system 4.11.2 → 4.13.0

package/dist/index.umd.css

@@ -3298,6 +3298,8 @@ body {
   padding-left: var(--spacing-20);
   padding-top: var(--spacing-10);
   padding-bottom: var(--spacing-10);
+  font-size: var(--font-size-s);
+  font-weight: var(--font-weight-medium);
 }
 
 .Button--tinySquare {
@@ -4167,7 +4169,6 @@ body {
   box-sizing: border-box;
   border-radius: var(--border-radius-30);
   padding-right: var(--spacing-20);
-  padding-left: var(--spacing-20);
   padding-top: var(--spacing-05);
   padding-bottom: var(--spacing-05);
   width: -moz-fit-content;
@@ -4178,10 +4179,18 @@ body {
   align-items: center;
   flex-direction: row;
   cursor: default;
-  height: var(--spacing-60);
   transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 
+.Chip-size--regular {
+  height: var(--spacing-60);
+  padding-left: var(--spacing-20);
+}
+.Chip-size--small {
+  height: 20px;
+  padding-left: var(--spacing-15);
+}
+
 .Chip-wrapper {
   display: inline-flex;
   align-items: center;
@@ -4196,6 +4205,7 @@ body {
 .Chip-icon--right {
   display: flex;
   align-items: center;
+  justify-content: center;
   border-radius: var(--border-radius-full);
   margin-left: var(--spacing-05);
 }
@@ -6087,6 +6097,8 @@ body {
   height: var(--font-height-m);
   padding-top: var(--spacing-10);
   padding-bottom: var(--spacing-10);
+  padding-left: var(--spacing-20);
+  padding-right: var(--spacing-20);
 }
 
 .Input--regular {
@@ -6190,6 +6202,12 @@ body {
   font-size: var(--font-size-m);
 }
 
+.Input-input--tiny {
+  line-height: var(--font-height-s);
+  font-size: var(--font-size-s);
+  font-weight: var(--font-weight-medium);
+}
+
 .Input-icon {
   display: flex;
   align-content: center;
@@ -6267,8 +6285,8 @@ body {
   box-sizing: border-box;
   border-radius: var(--border-radius-10);
   border: var(--border);
-  padding-right: var(--spacing-10);
   background: var(--white);
+  overflow: hidden;
   transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 
@@ -6282,6 +6300,11 @@ body {
   padding-left: var(--spacing-40);
 }
 
+.MetricInput--small {
+  height: var(--spacing-60);
+  padding-left: var(--spacing-20);
+}
+
 .MetricInput:hover {
   background: var(--secondary-lightest);
   cursor: text;
@@ -6346,6 +6369,17 @@ body {
   font-size: var(--font-size-m);
 }
 
+.MetricInput-input--regular {
+  line-height: var(--font-height);
+  font-size: var(--font-size);
+}
+
+.MetricInput-input--small {
+  line-height: var(--font-height-s);
+  font-size: var(--font-size-s);
+  font-weight: var(--font-weight-medium);
+}
+
 .MetricInput-input::-moz-placeholder {
   color: var(--inverse-lighter);
 }
@@ -6376,6 +6410,10 @@ body {
   line-height: var(--font-height-m);
 }
 
+.MetricInput-icon--small {
+  margin-right: var(--spacing-10);
+}
+
 .MetricInput-input::-webkit-inner-spin-button,
 .MetricInput-input::-webkit-outer-spin-button {
   -webkit-appearance: none;
@@ -6384,16 +6422,55 @@ body {
   margin: 0;
 }
 
-.MetricInput-arrowIcon--large {
-  height: var(--spacing-40);
-  width: var(--spacing-40);
-  border-radius: var(--border-radius-05);
+.MetricInput-arrowIcons {
+  border-left: var(--border);
+  box-sizing: border-box;
+  border-radius: 0;
+  background: transparent;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  flex-shrink: 0;
+  overflow: hidden;
 }
 
-.MetricInput-arrowIcon--regular {
-  height: var(--spacing-30);
-  width: var(--spacing-30);
-  border-radius: var(--border-radius-05);
+.MetricInput-arrowButton {
+  height: 50%;
+  border: none;
+  background: var(--secondary-light);
+  color: var(--inverse);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin: 0;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  overflow: hidden;
+}
+
+.MetricInput-arrowButton:hover {
+  background: var(--secondary);
+}
+
+.MetricInput-arrowButton:active {
+  background: var(--secondary-dark);
+}
+
+.MetricInput-arrowButton:focus {
+  outline: 0;
+  box-shadow: var(--shadow-spread) var(--secondary-shadow);
+}
+
+.MetricInput-arrowIcons--small,
+.MetricInput-arrowIcons--regular {
+  width: 20px;
+}
+
+.MetricInput-arrowIcons--large {
+  width: var(--spacing-60);
 }
 
 /* pagination */
@@ -6458,6 +6535,9 @@ body {
 .Label {
   display: inline-flex;
 }
+.Label--small {
+  font-size: var(--font-size-s);
+}
 
 .Label--withInput {
   margin-bottom: var(--spacing-10);
@@ -6478,6 +6558,10 @@ body {
   margin-left: var(--spacing-10);
 }
 
+.Label-optionalText--small {
+  font-size: var(--font-size-s);
+}
+
 .Label--disabled {
   color: var(--text-disabled);
 }
@@ -6543,6 +6627,7 @@ body {
   font-weight: var(--font-weight-medium);
   transition: var(--duration--fast-01) var(--standard-productive-curve);
   box-sizing: border-box;
+  border-bottom: var(--border-width-2-5) solid transparent;
 }
 
 .Link:focus-visible {
@@ -6619,6 +6704,10 @@ body {
   box-sizing: border-box;
 }
 
+.Message--small {
+  padding: var(--spacing-20);
+}
+
 .Message--alert {
   border-color: var(--alert);
   background-color: rgba(217, 55, 55, 0.04);
@@ -6639,11 +6728,16 @@ body {
   background-color: rgba(240, 125, 0, 0.04);
 }
 
-.Message-icon {
+.Message-icon--regular {
   margin-right: var(--spacing-40);
   padding-top: var(--spacing-05);
 }
 
+.Message-icon--small {
+  margin-right: var(--spacing-20);
+  padding-top: var(--spacing-05) !important;
+}
+
 .Message-icon--withTitle {
   padding-top: var(--spacing-10);
 }
@@ -6652,10 +6746,22 @@ body {
   color: var(--accent1);
 }
 
-.Message-heading {
+.Message-heading--regular {
   margin-bottom: var(--spacing-10);
 }
 
+.Message-heading--small {
+  font-size: var(--font-size);
+  line-height: var(--font-height);
+  margin-bottom: var(--spacing-05);
+}
+
+.Message-text--small {
+  font-size: var(--font-size-s);
+  line-height: var(--font-height-s);
+  font-weight: var(--font-weight-medium);
+}
+
 .Message-heading--alert,
 .Message-text--alert {
   color: var(--alert-darker) !important;
@@ -6679,9 +6785,16 @@ body {
 .Message-actions {
   display: flex;
   align-items: center;
+}
+
+.Message-actions--regular {
   margin-top: var(--spacing-30);
 }
 
+.Message-actions--small {
+  margin-top: var(--spacing-10);
+}
+
 .Meta {
   display: flex;
   flex-direction: row;
@@ -6854,6 +6967,10 @@ body {
   transition-timing-function: cubic-bezier(0, 0, 0.38, 0.9);
 }
 
+.Tooltip--small {
+  line-height: var(--font-height-s);
+}
+
 .Tooltip-text {
   word-break: break-word;
   -webkit-hyphens: auto;
@@ -7245,6 +7362,7 @@ body {
   flex-direction: row;
   width: -moz-fit-content;
   width: fit-content;
+  align-items: center;
 }
 
 .StatusHint-icon {
@@ -7252,8 +7370,6 @@ body {
   border-radius: var(--border-radius-full);
   height: var(--spacing-20);
   width: var(--spacing-20);
-  margin-right: var(--spacing-20);
-  margin-top: var(--spacing-15);
 }
 
 .StatusHint--alert {
@@ -7568,6 +7684,12 @@ body {
   resize: both;
 }
 
+.Textarea--small {
+  font-size: var(--font-size-s);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--font-height-s);
+}
+
 /* toast */
 
 .Toast {
@@ -7819,13 +7941,21 @@ body {
   display: flex;
   border-radius: var(--border-radius-10);
   box-shadow: inset 0 0 0 var(--spacing-2-5) var(--secondary);
-  padding-left: 10px;
-  padding-right: 10px;
   background: var(--white);
   cursor: text;
   flex: 100%;
 }
 
+.ChipInput--regular {
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+.ChipInput--small {
+  padding-left: var(--spacing-20);
+  padding-right: var(--spacing-20);
+}
+
 .ChipInput:focus,
 .ChipInput:focus-visible {
   outline: var(--spacing-2-5) var(--primary);
@@ -7880,11 +8010,23 @@ body {
   min-width: 15%;
   flex: 0px;
   box-sizing: border-box;
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+}
+
+.ChipInput-input--small {
+  height: 20px;
+  margin-top: var(--spacing-05);
+  margin-bottom: var(--spacing-05);
+  font-size: var(--font-size-s);
+  line-height: var(--font-height-s);
+  font-weight: var(--font-weight-medium);
+}
+
+.ChipInput-input--regular {
   height: var(--spacing-60);
   margin-top: var(--spacing-10);
   margin-bottom: var(--spacing-10);
-  font-family: var(--font-family);
-  font-size: var(--font-size);
 }
 
 .ChipInput:hover .ChipInput-input {
@@ -7896,14 +8038,22 @@ body {
 }
 
 .ChipInput-icon {
-  height: var(--spacing-40);
-  padding: var(--spacing-05);
-  margin-left: var(--spacing-20);
-  margin-top: var(--spacing-15);
   cursor: pointer;
   border-radius: var(--border-radius-full);
 }
 
+.ChipInput-icon--small {
+  margin-left: var(--spacing-15);
+  margin-top: var(--spacing-15);
+  height: var(--spacing-30);
+}
+
+.ChipInput-icon--regular {
+  height: var(--spacing-40);
+  margin-left: var(--spacing-20);
+  margin-top: var(--spacing-20);
+}
+
 .ChipInput-icon:hover {
   background-color: var(--secondary);
 }
@@ -8653,8 +8803,6 @@ body {
   border: var(--border-width-2-5) solid transparent;
   box-sizing: border-box;
   white-space: nowrap;
-  padding-left: var(--spacing-30);
-  padding-right: var(--spacing-30);
   display: flex;
   align-items: center;
 }
@@ -8662,11 +8810,18 @@ body {
 .EditableInput-default--regular {
   min-width: var(--spacing-640);
   height: var(--spacing-80);
+  padding-left: var(--spacing-30);
+  padding-right: var(--spacing-30);
 }
 
 .EditableInput-default--tiny {
   min-width: var(--spacing-240);
   height: var(--spacing-60);
+  font-size: var(--font-size-s);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--font-height-s);
+  padding-left: var(--spacing-20);
+  padding-right: var(--spacing-20);
 }
 
 .EditableInput-Input--tiny {
@@ -10135,7 +10290,7 @@ body {
 
 .Select-trigger--small {
   height: var(--spacing-60);
-  padding-right: var(--spacing-20);
+  padding-right: var(--spacing-10);
   padding-left: var(--spacing-20);
 }
 
@@ -10206,6 +10361,27 @@ body {
   width: 100%;
 }
 
+.Select-trigger--textSmall {
+  font-size: var(--font-size-s);
+  line-height: var(--font-height-s);
+  font-weight: var(--font-weight-medium);
+}
+
+.Select-option--tight {
+  padding: var(--spacing-10) var(--spacing-20);
+}
+
+.Select-input--tiny {
+  padding-right: var(--spacing-10);
+  height: var(--spacing-60);
+}
+
+.Select-option--textTight {
+  font-size: var(--font-size-s);
+  line-height: var(--font-height-s);
+  font-weight: var(--font-weight-medium);
+}
+
 .Menu {
   overflow-y: auto !important;
   padding-top: var(--spacing-10);
@@ -10221,6 +10397,13 @@ body {
   box-sizing: border-box;
 }
 
+.Menu-Item--tight {
+  padding: var(--spacing-10) var(--spacing-20);
+  font-size: var(--font-size-s);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--font-height-s);
+}
+
 .Menu-Group-Label {
   display: flex;
   align-items: center;