@innovaccer/design-system 4.12.0 → 4.14.0

package/CHANGELOG.md

@@ -1,3 +1,95 @@
+## 4.14.0 (2025-09-30)
+
+### Highlights
+
+- feat(tokens): add ultra light tokens in the css (967398fa)
+- fix(metricInput): fix metric input arrowbutton while ESM build (3de747c6)
+
+### Breaking changes
+
+NA
+
+### Migration guide
+
+NA
+
+### Deprecations
+
+NA
+
+### Features
+
+- feat(tokens): add ultra light tokens in the css (967398fa)
+
+### Fixes
+
+- fix(metricInput): fix metric input arrowbutton while ESM build (3de747c6)
+
+### Improvements
+
+NA
+
+### Documentation
+
+NA
+
+---
+
+## 4.13.0 (2025-09-22)
+
+### Highlights
+
+- feat(editableChipInput): add small variant support in editableChipInput component (cbb07d28)
+- feat(chipInput): add small variant support in chipInput component (48b9b85d)
+- feat(select): add small variant support in select component (4c72ae07)
+- feat(chip): add small variant support in chip component (e7829052)
+- feat(button): add small variant support in button component (38052c54)
+
+### Breaking changes
+
+NA
+
+### Migration guide
+
+NA
+
+### Deprecations
+
+NA
+
+### Features
+
+- feat(editableChipInput): add small variant support in editableChipInput component (cbb07d28)
+- feat(chipInput): add small variant support in chipInput component (48b9b85d)
+- feat(select): add small variant support in select component (4c72ae07)
+- feat(chip): add small variant support in chip component (e7829052)
+- feat(editableInput): add small variant support in editableInput component (6e720070)
+- feat(menu): add small variant support in menu component (f3bace0c)
+- feat(textField): add small variant support in textField component (6a76f7aa)
+- feat(metricInput): add small variant support in metric input component (3fa029f7)
+- feat(input): add small variant support in input component (77730a3f)
+- feat(textarea): add small variant support in textarea component (508e2872)
+- feat(badge): add hover event support in badge component (10831bd1)
+- feat(statusHint): add new small variant support in status hint (0216d7b0)
+- feat(tooltip): add small size support in tooltip component (e0b4da4d)
+- feat(message): add small variant support in message (8d523382)
+- feat(button): add small variant support in button component (38052c54)
+- feat(label): add small variant support in label component (d29c11a8)
+
+### Fixes
+
+NA
+
+### Improvements
+
+- chore: add AGENTS.md file (fbc14017)
+
+### Documentation
+
+NA
+
+---
+
 ## 4.12.0 (2025-08-14)
 
 ### Highlights

package/css/dist/index.css

@@ -138,6 +138,16 @@
   --accent4-lightest: var(--nimbu-lightest);
   --inverse-lightest: var(--night-lightest);
 
+  /* Ultra Light */
+  --primary-ultra-light: #eef6fc;
+  --success-ultra-light: #ecf7f0;
+  --alert-ultra-light: #fcf1f1;
+  --warning-ultra-light: #fffae4;
+  --accent1-ultra-light: #fef3e7;
+  --accent2-ultra-light: #f0ecf7;
+  --accent3-ultra-light: #f1f3fc;
+  --accent4-ultra-light: #f2f9e7;
+
   /* shadow */
   --primary-shadow: rgba(0, 112, 221, 0.16);
   --secondary-shadow: rgba(213, 213, 213, 0.16);
@@ -679,6 +689,9 @@ body {
 .Label {
   display: inline-flex;
 }
+.Label--small {
+  font-size: var(--font-size-s);
+}
 
 .Label--withInput {
   margin-bottom: var(--spacing-10);
@@ -699,6 +712,10 @@ body {
   margin-left: var(--spacing-10);
 }
 
+.Label-optionalText--small {
+  font-size: var(--font-size-s);
+}
+
 .Label--disabled {
   color: var(--text-disabled);
 }
@@ -1407,6 +1424,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 {
@@ -2427,7 +2446,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;
@@ -2438,10 +2456,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;
@@ -2456,6 +2482,7 @@ body {
 .Chip-icon--right {
   display: flex;
   align-items: center;
+  justify-content: center;
   border-radius: var(--border-radius-full);
   margin-left: var(--spacing-05);
 }
@@ -2643,13 +2670,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);
@@ -2704,11 +2739,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 {
@@ -2720,14 +2767,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);
 }
@@ -3762,8 +3817,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;
 }
@@ -3771,11 +3824,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 {
@@ -5028,6 +5088,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 {
@@ -5131,6 +5193,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;
@@ -5528,6 +5596,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;
@@ -5552,6 +5627,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);
@@ -5572,11 +5651,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);
 }
@@ -5585,10 +5669,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;
@@ -5612,9 +5708,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;
@@ -5713,8 +5816,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);
 }
 
@@ -5728,6 +5831,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;
@@ -5792,6 +5900,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);
 }
@@ -5822,6 +5941,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;
@@ -5830,16 +5953,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);
 }
 
 @keyframes modal-open {
@@ -6794,7 +6956,7 @@ body {
 
 .Select-trigger--small {
   height: var(--spacing-60);
-  padding-right: var(--spacing-20);
+  padding-right: var(--spacing-10);
   padding-left: var(--spacing-20);
 }
 
@@ -6865,6 +7027,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);
+}
+
 .Selection-card {
   border-radius: var(--border-radius-10);
   position: relative;
@@ -7260,6 +7443,7 @@ body {
   flex-direction: row;
   width: -moz-fit-content;
   width: fit-content;
+  align-items: center;
 }
 
 .StatusHint-icon {
@@ -7267,8 +7451,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 {
@@ -7756,6 +7938,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 {
@@ -7985,6 +8173,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;