@crispy-seed/data-table 0.13.0 → 0.14.0

package/dist/styles.css

@@ -5054,53 +5054,94 @@ tr:hover .seed-data-table__entityActions, .seed-data-table__entityActions:focus-
   display: inline-flex;
 }
 
-.seed-data-table__chipListEditor {
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 3px;
+.seed-data-table__chipPicker {
+  flex-direction: column;
   width: 100%;
   min-width: 0;
   display: flex;
 }
 
-.seed-data-table__chipRemove {
+.seed-data-table__chipPickerList {
+  flex-direction: column;
+  max-height: 240px;
+  padding: 0 4px 4px;
+  display: flex;
+  overflow-y: auto;
+}
+
+.seed-data-table__chipPickerRow {
   box-sizing: border-box;
-  width: 12px;
-  height: 12px;
+  width: 100%;
+  min-height: 32px;
+  font: inherit;
   color: inherit;
-  opacity: .6;
+  text-align: start;
   cursor: pointer;
   background: none;
   border: none;
-  border-radius: 999px;
+  border-radius: 6px;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+  padding: 4px 8px;
+  display: flex;
+}
+
+.seed-data-table__chipPickerRow:hover {
+  background-color: #f6f7f7;
+}
+
+.seed-data-table__chipPickerRow:disabled {
+  cursor: default;
+  opacity: .6;
+}
+
+.seed-data-table__chipPickerBox {
+  box-sizing: border-box;
+  color: #fff;
+  background-color: #fff;
+  border: 1px solid #00000040;
+  border-radius: 4px;
   flex-shrink: 0;
   justify-content: center;
   align-items: center;
-  margin: 0;
-  margin-inline-start: 2px;
-  padding: 0;
-  transition: opacity .12s, background-color .12s;
+  width: 16px;
+  height: 16px;
   display: inline-flex;
 }
 
-.seed-data-table__chipRemove:hover {
-  opacity: 1;
-  background-color: #00000014;
+.seed-data-table__chipPickerBox[data-checked] {
+  background-color: #266df0;
+  border-color: #266df0;
 }
 
-.seed-data-table__chipInput {
-  min-width: 40px;
-  height: 22px;
-  font-family: inherit;
+.seed-data-table__chipPickerBox svg {
+  width: 12px;
+  height: 12px;
+}
+
+.seed-data-table__chipPickerCreate {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 32px;
+  font: inherit;
   font-size: var(--seed-font-size-t4);
   color: var(--seed-color-fg-neutral);
-  letter-spacing: -.14px;
+  text-align: start;
+  cursor: pointer;
   background: none;
   border: none;
-  outline: none;
-  flex: auto;
+  border-radius: 6px;
+  align-items: center;
+  gap: 6px;
   margin: 0;
-  padding: 0;
+  padding: 4px 8px;
+  display: flex;
+}
+
+.seed-data-table__chipPickerCreate:hover {
+  background-color: #f6f7f7;
 }
 
 .seed-data-table__expandOverlay {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crispy-seed/data-table",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "Self-contained, publishable build of seed-design's Attio-measured DataTable, ResizablePanel and RecordPreview — one install, one CSS import.",
   "repository": {
     "type": "git",