@innovaccer/design-system 2.16.1-0 → 2.16.1-1

package/css/dist/index.css

@@ -1165,15 +1165,9 @@ body {
 }
 
 .Breadcrumbs-link {
-  margin: var(--spacing-m);
   /* 160px */
   max-width: calc(var(--spacing-2) * 10);
-  line-height: var(--font-height);
-  color: var(--inverse-lighter);
-}
-
-.Breadcrumbs-link:hover {
-  color: var(--inverse-light);
+  margin: var(--spacing-m) 0;
 }
 
 .Breadcrumbs-link:active {
@@ -1186,15 +1180,14 @@ body {
 
 .Breadcrumbs-itemSeparator {
   color: var(--secondary);
+  font-size: var(--font-size-s);
+  line-height: var(--font-height-s);
+  width: var(--spacing-m);
+  margin: 0 var(--spacing-m);
 }
 
 .Breadcrumbs-dropdown {
-  display: flex;
-  align-items: center;
-}
-
-.Breadcrumbs-Button {
-  margin: 0 var(--spacing-m);
+  height: var(--font-height-m);
 }
 
 .Breadcrumbs-Button:focus {
@@ -2091,10 +2084,10 @@ body {
 }
 
 .Chip-icon--right {
-  margin-left: var(--spacing-m);
   display: flex;
   align-items: center;
   border-radius: 10px;
+  margin-left: var(--spacing-s);
 }
 
 .Chip--action {
@@ -2243,6 +2236,10 @@ body {
   outline: none;
 }
 
+.Chip-icon--clear {
+  padding-right: var(--spacing-s);
+}
+
 .ChipGroup {
   display: inline-flex;
 }
@@ -2363,6 +2360,12 @@ body {
   position: absolute;
 }
 
+.Collapsible--shadow {
+  box-shadow: var(--shadow-l);
+  -webkit-clip-path: inset(0px -16px 0px 0px);
+          clip-path: inset(0px -16px 0px 0px);
+}
+
 .Collapsible-body {
   flex-grow: 1;
   overflow-y: auto;
@@ -2373,9 +2376,24 @@ body {
   padding-top: var(--spacing-m);
   padding-bottom: var(--spacing-m);
   box-sizing: border-box;
+  cursor: pointer;
   display: flex;
 }
 
+.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);
 }
@@ -2469,19 +2487,15 @@ body {
   justify-content: space-between;
   align-items: center;
   margin-left: var(--spacing-l);
-  margin-top: var(--spacing);
+  margin-top: var(--spacing-l);
   margin-bottom: 6px;
 }
 
 .Dropdown-section--withClear {
-  margin-top: var(--spacing-m);
+  margin-top: var(--spacing);
   margin-bottom: var(--spacing-s);
 }
 
-.Dropdown--border {
-  border-top: var(--spacing-xs) solid var(--secondary-light);
-}
-
 .Dropdown-buttonWrapper {
   display: flex;
   justify-content: flex-end;
@@ -2508,7 +2522,7 @@ body {
   padding-top: 6px;
   padding-bottom: 6px;
   padding-left: var(--spacing-l);
-  padding-right: var(--spacing-l);
+  padding-right: var(--spacing);
 }
 
 .Option-checkbox .Checkbox-outerWrapper {
@@ -2630,6 +2644,7 @@ body {
   display: flex;
   flex-direction: row;
   overflow: hidden;
+  align-items: center;
 }
 
 .DropdownButton-text {
@@ -2712,7 +2727,7 @@ body {
     linear-gradient(var(--secondary) 50%, rgba(255, 255, 255, 0) 0%);
   background-position: top, right, bottom, left;
   background-repeat: repeat-x, repeat-y;
-  background-size: 7px var(--spacing-xs), var(--spacing-xs) 7px;
+  background-size: var(--spacing-2) var(--spacing-xs), var(--spacing-xs) var(--spacing-2);
   transition: background-color var(--duration--moderate-01) var(--standard-productive-curve);
   box-sizing: border-box;
 }
@@ -2725,21 +2740,24 @@ body {
     linear-gradient(var(--primary) 50%, rgba(255, 255, 255, 0) 0%);
   background-position: top, right, bottom, left;
   background-repeat: repeat-x, repeat-y;
-  background-size: 7px var(--spacing-xs), var(--spacing-xs) 7px;
+  background-size: var(--spacing-2) var(--spacing-xs), var(--spacing-xs) var(--spacing-2);
   transition: background-color var(--duration--moderate-01) var(--standard-productive-curve);
   box-sizing: border-box;
 }
 
-.DropzoneAnimation--default {
+.Dropzone-animation {
   -webkit-animation-delay: var(--duration--fast-02);
           animation-delay: var(--duration--fast-02);
+  -webkit-animation-fill-mode: forwards;
+          animation-fill-mode: forwards;
+}
+
+.Dropzone-animation--default {
   -webkit-animation: dropzoneDefault var(--duration--moderate-01) var(--entrance-productive-curve);
           animation: dropzoneDefault var(--duration--moderate-01) var(--entrance-productive-curve);
 }
 
-.DropzoneAnimation--active {
-  -webkit-animation-delay: var(--duration--fast-02);
-          animation-delay: var(--duration--fast-02);
+.Dropzone-animation--active {
   -webkit-animation: dropzoneActive var(--duration--moderate-01) var(--entrance-productive-curve);
           animation: dropzoneActive var(--duration--moderate-01) var(--entrance-productive-curve);
 }
@@ -2747,48 +2765,106 @@ body {
 @-webkit-keyframes dropzoneDefault {
   from {
     opacity: 0;
-    padding-top: var(--spacing);
+    padding-top: 20px;
   }
 
   to {
     opacity: 1;
-    padding-top: 0;
+    padding-top: var(--spacing-l);
   }
 }
 
 @keyframes dropzoneDefault {
   from {
     opacity: 0;
-    padding-top: var(--spacing);
+    padding-top: 20px;
   }
 
   to {
     opacity: 1;
-    padding-top: 0;
+    padding-top: var(--spacing-l);
   }
 }
 
 @-webkit-keyframes dropzoneActive {
   from {
     opacity: 0;
-    padding-top: var(--spacing);
+    padding-top: 20px;
   }
 
   to {
     opacity: 1;
-    padding-top: 0;
+    padding-top: var(--spacing-l);
   }
 }
 
 @keyframes dropzoneActive {
   from {
     opacity: 0;
+    padding-top: 20px;
+  }
+
+  to {
+    opacity: 1;
+    padding-top: var(--spacing-l);
+  }
+}
+
+.Dropzone-standard--default {
+  -webkit-animation: dropzoneStandardDefault var(--duration--moderate-01) var(--entrance-productive-curve);
+          animation: dropzoneStandardDefault var(--duration--moderate-01) var(--entrance-productive-curve);
+}
+
+.Dropzone-standard--active {
+  -webkit-animation: dropzoneStandardActive var(--duration--moderate-01) var(--entrance-productive-curve);
+          animation: dropzoneStandardActive var(--duration--moderate-01) var(--entrance-productive-curve);
+}
+
+@-webkit-keyframes dropzoneStandardDefault {
+  from {
+    opacity: 0;
+    padding-top: var(--spacing-2);
+  }
+
+  to {
+    opacity: 1;
     padding-top: var(--spacing);
   }
+}
+
+@keyframes dropzoneStandardDefault {
+  from {
+    opacity: 0;
+    padding-top: var(--spacing-2);
+  }
+
+  to {
+    opacity: 1;
+    padding-top: var(--spacing);
+  }
+}
+
+@-webkit-keyframes dropzoneStandardActive {
+  from {
+    opacity: 0;
+    padding-top: var(--spacing-2);
+  }
+
+  to {
+    opacity: 1;
+    padding-top: var(--spacing);
+  }
+}
+
+@keyframes dropzoneStandardActive {
+  from {
+    opacity: 0;
+    padding-top: var(--spacing-2);
+  }
 
   to {
     opacity: 1;
-    padding-top: 0;
+    padding-top: var(--spacing);
   }
 }
 
@@ -2800,7 +2876,7 @@ body {
     linear-gradient(var(--alert) 50%, rgba(255, 255, 255, 0) 0%);
   background-position: top, right, bottom, left;
   background-repeat: repeat-x, repeat-y;
-  background-size: 7px var(--spacing-xs), var(--spacing-xs) 7px;
+  background-size: var(--spacing-2) var(--spacing-xs), var(--spacing-xs) var(--spacing-2);
 }
 
 .Dropzone--disabled {
@@ -2810,24 +2886,27 @@ body {
     linear-gradient(var(--secondary) 50%, rgba(255, 255, 255, 0) 0%);
   background-position: top, right, bottom, left;
   background-repeat: repeat-x, repeat-y;
-  background-size: 7px var(--spacing-xs), var(--spacing-xs) 7px;
+  background-size: var(--spacing-2) var(--spacing-xs), var(--spacing-xs) var(--spacing-2);
 }
 
 .Dropzone--standard {
   flex-direction: column;
   height: 196px;
   min-width: 480px;
+  padding: var(--spacing) var(--spacing-xl) var(--spacing-2) var(--spacing-xl);
 }
 
 .Dropzone--compressed {
   flex-direction: row;
   height: 124px;
   min-width: 400px;
+  padding: var(--spacing-l) var(--spacing-xl) var(--spacing-2) var(--spacing-xl);
 }
 
 .Dropzone--tight {
   height: 124px;
   min-width: 320px;
+  padding: var(--spacing-l) var(--spacing-xl) var(--spacing-2) var(--spacing-xl);
 }
 
 .DropzoneWrapper {
@@ -3989,7 +4068,7 @@ body {
   overflow: hidden;
   border-radius: var(--spacing-m);
   background-color: var(--white);
-  align-items: center;
+  align-items: flex-start;
 }
 
 .InlineMessage-icon--regular {
@@ -4042,15 +4121,15 @@ body {
 }
 
 .Input--tiny {
-  height: var(--spacing-xl);
+  height: var(--font-height-m);
   padding-top: var(--spacing-m);
   padding-bottom: var(--spacing-m);
 }
 
 .Input--regular {
-  height: var(--spacing-3);
-  padding-top: var(--spacing);
-  padding-bottom: var(--spacing);
+  height: var(--font-height-l);
+  padding-top: 6px;
+  padding-bottom: 6px;
 }
 
 .Input--large {
@@ -4059,11 +4138,6 @@ body {
   padding-bottom: var(--spacing);
 }
 
-.Input--large .Input-input {
-  line-height: var(--font-height-m);
-  font-size: var(--font-size-m);
-}
-
 .Input:hover {
   background: var(--secondary-lighter);
   border-color: var(--secondary-dark);
@@ -4076,7 +4150,7 @@ body {
   box-shadow: var(--shadow-spread) var(--primary-shadow);
 }
 
-.Input:focus-within .Input-icon--left .Icon {
+.Input:focus-within .Input-icon--left {
   color: var(--primary);
 }
 
@@ -4085,7 +4159,7 @@ body {
   box-shadow: var(--shadow-spread) var(--alert-shadow);
 }
 
-.Input--error:focus-within .Input-icon--left .Icon {
+.Input--error:focus-within .Input-icon--left {
   color: var(--alert);
 }
 
@@ -4095,7 +4169,7 @@ body {
   pointer-events: none;
 }
 
-.Input--disabled .Input-icon--left .Icon {
+.Input--disabled .Input-icon--left {
   color: var(--inverse-lightest);
 }
 
@@ -4146,21 +4220,34 @@ body {
   color: var(--inverse-lighter);
 }
 
+.Input-input--regular {
+  line-height: var(--font-height);
+}
+
+.Input-input--large {
+  line-height: var(--font-height-m);
+  font-size: var(--font-size-m);
+}
+
 .Input-icon {
   display: flex;
   align-content: center;
   font-size: var(--font-size-m);
 }
 
-.Input-icon--left .Icon {
+.Input-icon--left {
   margin-right: var(--spacing);
-  color: var(--inverse-lighter);
+  color: var(--inverse);
 }
 
-.Input-icon--disabled .Icon {
+.Input-icon--inputBlank {
   color: var(--inverse-lighter);
 }
 
+.Input-icon--error {
+  color: var(--alert);
+}
+
 .Input-icon--right {
   cursor: pointer;
   color: var(--inverse-lighter);
@@ -4205,12 +4292,13 @@ body {
 
 .Link--regular {
   font-size: var(--font-size);
-  height: var(--font-size-l);
+  height: var(--font-height);
 }
 
 .Link--tiny {
   font-size: var(--font-size-s);
-  height: var(--font-size-m);
+  height: var(--font-height-s);
+  line-height: var(--font-height-s);
 }
 
 .Link--default {
@@ -5639,7 +5727,7 @@ body {
 }
 
 .Sidesheet-header--withSeperator {
-  border-bottom: var(--border);
+  border-bottom: var(--spacing-xs) solid var(--secondary-light);
 }
 
 .Sidesheet-body {
@@ -5651,11 +5739,12 @@ body {
 }
 
 .Sidesheet-footer {
-  height: 80px;
+  padding-top: var(--spacing-xl);
+  padding-bottom: var(--spacing-xl);
 }
 
 .Sidesheet-footer--withSeperator {
-  border-top: var(--border);
+  border-top: var(--spacing-xs) solid var(--secondary-light);
 }
 
 .Sidesheet-footer--stickToBottom {
@@ -5664,13 +5753,23 @@ body {
 }
 
 .Sidesheet-header--shiftRight {
-  -webkit-animation: shift-right-spacing-3 80ms cubic-bezier(0.2, 0, 0.38, 0.9);
-          animation: shift-right-spacing-3 80ms cubic-bezier(0.2, 0, 0.38, 0.9);
+  -webkit-animation: shift-right-spacing-3 var(--duration--fast-01) var(--standard-productive-curve);
+          animation: shift-right-spacing-3 var(--duration--fast-01) var(--standard-productive-curve);
 }
 
 .Sidesheet-header--shiftLeft {
-  -webkit-animation: shift-left-spacing-3 80ms cubic-bezier(0.2, 0, 0.38, 0.9);
-          animation: shift-left-spacing-3 80ms cubic-bezier(0.2, 0, 0.38, 0.9);
+  -webkit-animation: shift-left-spacing-3 var(--duration--fast-01) var(--standard-productive-curve);
+          animation: shift-left-spacing-3 var(--duration--fast-01) var(--standard-productive-curve);
+}
+
+.Sidesheet-body--nextPage {
+  -webkit-animation: fadeIn var(--duration--fast-02) var(--standard-productive-curve);
+          animation: fadeIn var(--duration--fast-02) var(--standard-productive-curve);
+}
+
+.Sidesheet-body--firstPage {
+  -webkit-animation: fadeIn var(--duration--fast-02) var(--standard-expressive-curve);
+          animation: fadeIn var(--duration--fast-02) var(--standard-expressive-curve);
 }
 
 .Slider {
@@ -5684,7 +5783,7 @@ body {
 }
 
 .Slider-wrapper--disabled {
-  pointer-events: none;
+  cursor: not-allowed;
 }
 
 .Slider-track {
@@ -5878,7 +5977,6 @@ body {
 .StatusHint {
   display: flex;
   flex-direction: row;
-  align-items: center;
   width: -webkit-fit-content;
   width: -moz-fit-content;
   width: fit-content;
@@ -5890,6 +5988,7 @@ body {
   height: var(--spacing);
   width: var(--spacing);
   margin-right: var(--spacing);
+  margin-top: 6px;
 }
 
 .StatusHint--alert {
@@ -6166,7 +6265,7 @@ body {
   flex-direction: row;
   cursor: pointer;
   min-width: 40px;
-  padding: var(--spacing-l);
+  padding: var(--spacing-l) var(--spacing-l) var(--spacing-2);
   margin-bottom: calc(-1 * var(--spacing-xs));
   text-align: center;
 }