@innovaccer/design-system 2.5.0 → 2.7.0-0

package/css/src/components/chip.css

@@ -1,15 +1,15 @@
 .Chip {
   display: flex;
   box-sizing: border-box;
-  border-radius: var( --spacing-l);
-  padding-right: var( --spacing);
-  padding-left: var( --spacing);
-  padding-top: var( --spacing-s);
-  padding-bottom: var( --spacing-s);
+  border-radius: var(--spacing-l);
+  padding-right: var(--spacing);
+  padding-left: var(--spacing);
+  padding-top: var(--spacing-s);
+  padding-bottom: var(--spacing-s);
   width: fit-content;
   justify-content: space-between;
   border-style: solid;
-  border-width: var( --spacing-xs);
+  border-width: var(--spacing-xs);
   align-items: center;
   flex-direction: row;
   cursor: default;
@@ -21,19 +21,19 @@
 }
 
 .Chip-icon--left {
-  padding-right: var( --spacing-m);
+  padding-right: var(--spacing-m);
   display: flex;
   align-items: center;
 }
 
 .Chip-icon--right {
-  padding-left: var( --spacing-m);
+  padding-left: var(--spacing-m);
   display: flex;
   align-items: center;
 }
 
 .Chip--action {
-  background: var( --shadow-0);
+  background: var(--shadow-0);
   border-color: var(--stone);
   cursor: pointer;
 }
@@ -58,8 +58,9 @@
 }
 
 .Chip--selection {
-  background: var( --shadow-0);
+  background: var(--shadow-0);
   border-color: var(--stone);
+  cursor: pointer;
 }
 
 .Chip--selection:hover {
@@ -85,18 +86,14 @@
   border-color: var(--jal-lighter);
 }
 
-.Chip-selection--selected .Text {
-  color: var(--primary);
-}
-
 .Chip-selection--disabled {
-  background: var( --shadow-0);
+  background: var(--shadow-0);
   border-color: var(--stone-light);
 }
 
 .Chip--input {
   background: var(--stone-light);
-  font-weight: var( --font-weight-normal);
+  font-weight: var(--font-weight-normal);
   border: 0px;
 }
 
@@ -107,4 +104,10 @@
 .Chip-input--disabled {
   background: var(--stone-light);
   border: 0px;
-}
+}
+
+.Chip-selection--selectedDisabled {
+  background: var(--jal-lightest);
+  border-color: var(--jal-lighter);
+  opacity: var(--transparent-58);
+}

package/css/src/components/chipGroup.css

@@ -1,15 +1,15 @@
 .ChipGroup {
-    display: inline-flex;
+  display: inline-flex;
 }
 
 .ChipGroup-item {
-    margin: 0 var(--spacing-m);
+  margin: 0 var(--spacing-m);
 }
 
 .ChipGroup-item:first-child {
-    margin-left: 0;
+  margin-left: 0;
 }
 
 .ChipGroup-item:last-child {
-    margin-right: 0;
-}
+  margin-right: 0;
+}

package/css/src/components/chipInput.css

@@ -46,7 +46,7 @@
 .ChipInput-icon {
   height: var(--spacing-2);
   margin-top: var(--spacing-m);
-  padding-top: var(--spacing-s);  
+  padding-top: var(--spacing-s);
   margin-right: var(--spacing-l);
   cursor: pointer;
 }

package/css/src/components/choiceList.css

@@ -5,11 +5,11 @@
 }
 
 .ChoiceList-checkbox--vertical {
-  margin-top: var(--spacing)
+  margin-top: var(--spacing);
 }
 
 .ChoiceList-radio--vertical {
-  margin-top: var(--spacing)
+  margin-top: var(--spacing);
 }
 
 .ChoiceList--alignHorizontal {
@@ -17,9 +17,9 @@
 }
 
 .ChoiceList-checkbox--horizontal {
-  margin-left: var(--spacing-xl)
+  margin-left: var(--spacing-xl);
 }
 
 .ChoiceList-radio--horizontal {
-  margin-left: var(--spacing-xl)
+  margin-left: var(--spacing-xl);
 }

package/css/src/components/dateRangePicker.css

@@ -1,33 +1,33 @@
 .DateRangePicker {
-    display: flex;
+  display: flex;
 }
 
 .DateRangePicker--left {
-    flex-direction: row;
+  flex-direction: row;
 }
 
 .DateRangePicker--right {
-    flex-direction: row-reverse;
+  flex-direction: row-reverse;
 }
 
 .DateRangePicker-input {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 .DateRangePicker-input--startDate {
-    padding-right: var(--spacing-m);
+  padding-right: var(--spacing-m);
 }
 
 .DateRangePicker-input--endDate {
-    padding-left: var(--spacing-m);
+  padding-left: var(--spacing-m);
 }
 
 @media (max-width: 576px) {
-    .DateRangePicker-input {
-        padding: 0;
-    }
+  .DateRangePicker-input {
+    padding: 0;
+  }
 
-    .DateRangePicker-input--endDate {
-        padding-top: var(--spacing);
-    }
-}
+  .DateRangePicker-input--endDate {
+    padding-top: var(--spacing);
+  }
+}

package/css/src/components/divider.css

@@ -0,0 +1,20 @@
+.Divider {
+  border: none;
+  margin: 0;
+}
+
+.Divider--vertical {
+  width: 1px;
+}
+
+.Divider--horizontal {
+  height: 1px;
+}
+
+.Divider--basic {
+  background: var(--secondary-light);
+}
+
+.Divider--header {
+  background: var(--secondary);
+}

package/css/src/components/dropdown.css

@@ -1,146 +1,146 @@
 .Dropdown {
-    width: 100%;
-    position: relative;
+  width: 100%;
+  position: relative;
 }
 
 .Dropdown-wrapper {
-    margin-top: var(--spacing-m);
-    margin-bottom: var(--spacing-m);
+  margin-top: var(--spacing-m);
+  margin-bottom: var(--spacing-m);
 }
 
 .Dropdown-inputWrapper {
-    border-bottom: var(--border);
+  border-bottom: var(--border);
 }
 
 .Dropdown-input {
-    min-width: unset !important;
+  min-width: unset !important;
 }
 
 .Dropdown-input,
 .Dropdown-input:focus-within {
-    border: unset !important;
+  border: unset !important;
 }
 
 .Dropdown-section {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-left: var(--spacing-l);
-    margin-top: var(--spacing);
-    margin-bottom: 6px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-left: var(--spacing-l);
+  margin-top: var(--spacing);
+  margin-bottom: 6px;
 }
 
 .Dropdown-section--withClear {
-    margin-top: var(--spacing-m);
-    margin-bottom: var(--spacing-s);
+  margin-top: var(--spacing-m);
+  margin-bottom: var(--spacing-s);
 }
 
 .Dropdown--border {
-    border-top: var(--spacing-xs) solid var(--secondary-light);
+  border-top: var(--spacing-xs) solid var(--secondary-light);
 }
 
 .Dropdown-errorWrapper {
-    min-height: var(--spacing-7);
+  min-height: var(--spacing-7);
 }
 
 .Dropdown-buttonWrapper {
-    display: flex;
-    justify-content: flex-end;
-    padding-top: var(--spacing);
-    padding-right: var(--spacing);
-    padding-bottom: var(--spacing);
-    border-top: var(--spacing-xs) solid var(--secondary-light);
+  display: flex;
+  justify-content: flex-end;
+  padding-top: var(--spacing);
+  padding-right: var(--spacing);
+  padding-bottom: var(--spacing);
+  border-top: var(--spacing-xs) solid var(--secondary-light);
 }
 
 .Dropdown-footer {
-    padding-left: var(--spacing-l);
-    padding-bottom: var(--spacing-m);
-    padding-top: var(--spacing);
-    box-sizing: border-box;
+  padding-left: var(--spacing-l);
+  padding-bottom: var(--spacing-m);
+  padding-top: var(--spacing);
+  box-sizing: border-box;
 }
 
 .Option {
-    display: flex;
+  display: flex;
 }
 
 .Option,
 .Option-loading {
-    padding-top: 6px;
-    padding-bottom: 6px;
-    padding-left: var(--spacing-l);
-    padding-right: var(--spacing-l);
+  padding-top: 6px;
+  padding-bottom: 6px;
+  padding-left: var(--spacing-l);
+  padding-right: var(--spacing-l);
 }
 
 .OptionCheckbox {
-    width: 100%;
-    padding-left: var(--spacing-l);
-    padding-top: var(--spacing-m);
-    padding-bottom: var(--spacing-m);
+  width: 100%;
+  padding-left: var(--spacing-l);
+  padding-top: var(--spacing-m);
+  padding-bottom: var(--spacing-m);
 }
 
 .Option--active,
 .Option-checkbox--active {
-    background-color: var(--secondary-lightest);
-    cursor: pointer;
+  background-color: var(--secondary-lightest);
+  cursor: pointer;
 }
 
 .Option-loading {
-    pointer-events: none;
+  pointer-events: none;
 }
 
 .Option--selected {
-    background-color: var(--primary);
-    pointer-events: none;
+  background-color: var(--primary);
+  pointer-events: none;
 }
 
 .Option--disabled,
 .OptionWrapper--disabled {
-    pointer-events: none;
+  pointer-events: none;
 }
 
 .Option-label {
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
 
 .OptionCheckbox .Checkbox-label {
-    padding-right: var(--spacing-l);
-    width: 100%;
-    display: flex;
-    overflow: hidden;
+  padding-right: var(--spacing-l);
+  width: 100%;
+  display: flex;
+  overflow: hidden;
 }
 
 .Option-text,
 .OptionCheckbox .Text {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .Option-text--wrap,
 .Dropdown-wrapper--wrap .OptionCheckbox .Text {
-    white-space: unset;
+  white-space: unset;
 }
 
 .Option--icon {
-    padding-left: var(--spacing);
+  padding-left: var(--spacing);
 }
 
 .Option-icon {
-    display: flex;
+  display: flex;
 }
 
 .Option-icon {
-    height: fit-content;
-    line-height: var(--font-height);
+  height: fit-content;
+  line-height: var(--font-height);
 }
 
 .Dropdown-wrapper::-webkit-scrollbar {
-    width: var(--spacing);
+  width: var(--spacing);
 }
 
 .Dropdown-wrapper::-webkit-scrollbar-thumb {
-    background: var(--secondary);
-    border-radius: var(--spacing-m);
-}
+  background: var(--secondary);
+  border-radius: var(--spacing-m);
+}

package/css/src/components/dropdownButton.css

@@ -1,78 +1,78 @@
 .DropdownButton {
-    width: 100%;
-    justify-content: space-between;
-    padding-top: unset;
-    padding-bottom: unset;
-    background: var(--secondary-light);
-    color: var(--text);
+  width: 100%;
+  justify-content: space-between;
+  padding-top: unset;
+  padding-bottom: unset;
+  background: var(--secondary-light);
+  color: var(--text);
 }
 
 .DropdownButton-wrapper {
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    overflow: hidden;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
 }
 
 .DropdownButton-text {
-    text-align: left;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+  text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .DropdownButton--tiny {
-    height: var(--spacing-xl);
-    padding-right: var(--spacing);
-    padding-left: var(--spacing);
+  height: var(--spacing-xl);
+  padding-right: var(--spacing);
+  padding-left: var(--spacing);
 }
 
 .DropdownButton--regular {
-    height: var(--spacing-3);
-    padding-right: var(--spacing);
-    padding-left: var(--spacing-l);
+  height: var(--spacing-3);
+  padding-right: var(--spacing);
+  padding-left: var(--spacing-l);
 }
 
 .DropdownButton--tinySquare {
-    padding-left: var(--spacing-m);
-    padding-right: var(--spacing-m);
+  padding-left: var(--spacing-m);
+  padding-right: var(--spacing-m);
 }
 
 .DropdownButton--regularSquare {
-    padding-left: var(--spacing);
-    padding-right: var(--spacing);
+  padding-left: var(--spacing);
+  padding-right: var(--spacing);
 }
 
 .DropdownButton--placeholder {
-    color: var(--text-subtle);
+  color: var(--text-subtle);
 }
 
 .DropdownButton:hover {
-    background: var(--secondary);
-    color: var(--text);
+  background: var(--secondary);
+  color: var(--text);
 }
 
 .DropdownButton:focus {
-    background-color: var(--secondary-lighter);
-    box-shadow: var(--shadow-spread) var(--secondary-shadow);
+  background-color: var(--secondary-lighter);
+  box-shadow: var(--shadow-spread) var(--secondary-shadow);
 }
 
 .DropdownButton:active,
 .DropdownButton--open {
-    background-color: var(--secondary-dark) !important;
-    color: var(--text) !important;
+  background-color: var(--secondary-dark) !important;
+  color: var(--text) !important;
 }
 
 .DropdownButton:disabled {
-    background: var(--secondary-lighter);
-    color: var(--text-disabled);
-    pointer-events: none;
+  background: var(--secondary-lighter);
+  color: var(--text-disabled);
+  pointer-events: none;
 }
 
 .DropdownButton--icon {
-    padding-left: var(--spacing);
+  padding-left: var(--spacing);
 }
 
 .DropdownButton--error {
-    border: var(--spacing-xs) solid var(--alert);
+  border: var(--spacing-xs) solid var(--alert);
 }

package/css/src/components/dropzone.css

@@ -5,11 +5,10 @@
   background: var(--white);
   border-radius: var(--spacing-m);
   width: 100%;
-  background-image:
-  linear-gradient(to right,var(--secondary) 50%, rgba(255, 255, 255, 0) 0%), 
-  linear-gradient(var(--secondary) 50%,rgba(255, 255, 255, 0) 0%),
-  linear-gradient(to right, var(--secondary) 50%,rgba(255, 255, 255, 0) 0%),
-  linear-gradient(var(--secondary) 50%, rgba(255, 255, 255, 0) 0%);
+  background-image: linear-gradient(to right, var(--secondary) 50%, rgba(255, 255, 255, 0) 0%),
+    linear-gradient(var(--secondary) 50%, rgba(255, 255, 255, 0) 0%),
+    linear-gradient(to right, var(--secondary) 50%, rgba(255, 255, 255, 0) 0%),
+    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;
@@ -17,11 +16,10 @@
 
 .Dropzone--active {
   background: var(--primary-lightest);
-  background-image: 
-  linear-gradient(to right,var(--primary) 50%, rgba(255, 255, 255, 0) 0%), 
-  linear-gradient(var(--primary) 50%,rgba(255, 255, 255, 0) 0%),
-  linear-gradient(to right, var(--primary) 50%,rgba(255, 255, 255, 0) 0%),
-  linear-gradient(var(--primary) 50%, rgba(255, 255, 255, 0) 0%);
+  background-image: linear-gradient(to right, var(--primary) 50%, rgba(255, 255, 255, 0) 0%),
+    linear-gradient(var(--primary) 50%, rgba(255, 255, 255, 0) 0%),
+    linear-gradient(to right, var(--primary) 50%, rgba(255, 255, 255, 0) 0%),
+    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;
@@ -29,11 +27,10 @@
 
 .Dropzone--error {
   background: var(--alert-lightest);
-  background-image: 
-  linear-gradient(to right,var(--alert) 50%, rgba(255, 255, 255, 0) 0%), 
-  linear-gradient(var(--alert) 50%,rgba(255, 255, 255, 0) 0%),
-  linear-gradient(to right, var(--alert) 50%,rgba(255, 255, 255, 0) 0%),
-  linear-gradient(var(--alert) 50%, rgba(255, 255, 255, 0) 0%);
+  background-image: linear-gradient(to right, var(--alert) 50%, rgba(255, 255, 255, 0) 0%),
+    linear-gradient(var(--alert) 50%, rgba(255, 255, 255, 0) 0%),
+    linear-gradient(to right, var(--alert) 50%, rgba(255, 255, 255, 0) 0%),
+    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;
@@ -41,11 +38,10 @@
 
 .Dropzone--disabled {
   background: var(--secondary-lightest);
-  background-image: 
-  linear-gradient(to right,var(--secondary) 50%, rgba(255, 255, 255, 0) 0%), 
-  linear-gradient(var(--secondary) 50%,rgba(255, 255, 255, 0) 0%),
-  linear-gradient(to right, var(--secondary) 50%,rgba(255, 255, 255, 0) 0%),
-  linear-gradient(var(--secondary) 50%, rgba(255, 255, 255, 0) 0%);
+  background-image: linear-gradient(to right, var(--secondary) 50%, rgba(255, 255, 255, 0) 0%),
+    linear-gradient(var(--secondary) 50%, rgba(255, 255, 255, 0) 0%),
+    linear-gradient(to right, var(--secondary) 50%, rgba(255, 255, 255, 0) 0%),
+    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;

package/css/src/components/editableChipInput.css

@@ -1,36 +1,37 @@
-.EditableChipInput{
+.EditableChipInput {
   position: relative;
   width: 100%;
 }
 .EditableChipInput-default {
   display: flex;
   align-items: center;
-  padding-left:var(--spacing-l);
+  padding-left: var(--spacing-l);
   border-left: var(--spacing-xs) solid transparent;
   min-height: var(--spacing-3);
-  flex-wrap:wrap;
+  flex-wrap: wrap;
 }
 
-.EditableChipInput-defaultWithChips{ 
+.EditableChipInput-defaultWithChips {
   display: flex;
   align-items: center;
-  padding-left:var(--spacing);
+  padding-left: var(--spacing);
   border: var(--spacing-xs) solid transparent;
   padding-top: var(--spacing-xs);
   padding-bottom: var(--spacing-xs);
   max-width: calc(100% - 28px);
-  flex-wrap:wrap;
+  flex-wrap: wrap;
 }
 
-.EditableChipInput-defaultWithChips:hover, .EditableChipInput-default:hover{
+.EditableChipInput-defaultWithChips:hover,
+.EditableChipInput-default:hover {
   background-color: var(--secondary-lightest);
 }
 
-.EditableChipInput-chipInput{
+.EditableChipInput-chipInput {
   padding-left: var(--spacing);
 }
 
-.EditableChipInput-actions{
+.EditableChipInput-actions {
   position: absolute;
   display: flex;
   justify-content: flex-end;

package/css/src/components/editableDropdown.css

@@ -8,4 +8,4 @@
   box-sizing: border-box;
   height: var(--spacing-3);
   padding-left: var(--spacing-l);
-}
+}

package/css/src/components/editableInput.css

@@ -44,4 +44,4 @@
 .EditableInput-Input--tiny {
   min-width: var(--spacing-6) !important;
   width: 100%;
-}
+}