@osdk/react-components 0.2.0-beta.28 → 0.2.0-beta.29

package/build/cjs/public/experimental.css

@@ -20,13 +20,21 @@
   display: flex;
   flex-direction: column;
   height: 100%;
-  overflow-y: auto;
+  overflow: hidden;
   background: var(--osdk-filter-list-bg);
   border: var(--osdk-filter-list-border);
   border-radius: var(--osdk-filter-list-border-radius);
+  box-shadow: var(--osdk-filter-list-shadow);
   padding: var(--osdk-filter-list-padding);
   gap: var(--osdk-filter-list-gap);
 }
+.scrollableContent {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow-y: auto;
+  min-height: 0;
+}
 .hiddenContent {
   display: none;
 }
@@ -67,19 +75,26 @@
 .addButtonContainer {
   display: flex;
   justify-content: center;
-  padding-top: var(--osdk-filter-list-addButton-padding-top);
+  padding: var(--osdk-filter-list-addButton-container-padding);
+  background: var(--osdk-filter-list-addButton-container-bg);
+  border-top: var(--osdk-filter-list-addButton-container-border-top);
+  flex-shrink: 0;
 }
 .addButtonContainer > * {
   flex: 1;
 }
 .addButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   font-family: var(--osdk-filter-header-font-family);
   font-size: var(--osdk-filter-header-reset-font-size);
-  color: var(--osdk-filter-header-reset-color);
+  color: var(--osdk-typography-color-default-rest);
   background: var(--osdk-filter-header-button-bg);
-  border: none;
+  border: var(--osdk-filter-list-addButton-border);
   cursor: pointer;
   padding: var(--osdk-filter-header-reset-padding);
+  min-height: var(--osdk-filter-list-addButton-height);
   border-radius: var(--osdk-filter-header-button-border-radius);
   transition: background-color var(--osdk-filter-header-button-transition);
   &:hover {
@@ -157,13 +172,6 @@
   gap: var(--osdk-filter-item-gap);
   border-radius: var(--osdk-filter-item-border-radius);
   padding: var(--osdk-filter-item-padding);
-  border: 1px solid transparent;
-}
-.filterItem[data-has-selection] {
-  border-color: var(--osdk-intent-primary-rest);
-}
-.filterItem[data-has-selection] .searchRow {
-  border-color: transparent;
 }
 .itemHeader {
   display: flex;
@@ -307,6 +315,19 @@
   color: var(--osdk-filter-item-exclude-dropdown-color);
   margin-left: calc(var(--osdk-surface-spacing) * 0.5);
 }
+.clearAllButton {
+  margin-left: auto;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-family: var(--osdk-filter-item-exclude-dropdown-font-family);
+  font-size: var(--osdk-filter-item-exclude-dropdown-font-size);
+  color: var(--osdk-filter-item-exclude-dropdown-color);
+  padding: 0;
+  &:hover {
+    text-decoration: underline;
+  }
+}
 .dragging {
   opacity: var(--osdk-filter-item-dragging-opacity);
 }
@@ -316,13 +337,17 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding-bottom: var(--osdk-filter-header-padding-bottom);
+  padding: var(--osdk-filter-header-padding);
+  gap: var(--osdk-filter-header-gap);
   border-bottom: var(--osdk-filter-header-border-bottom);
+  flex-shrink: 0;
 }
 .titleContainer {
   display: flex;
   align-items: center;
   gap: var(--osdk-filter-header-titleContainer-gap);
+  flex: 1;
+  min-width: 0;
 }
 .title {
   font-family: var(--osdk-filter-header-font-family);
@@ -383,16 +408,17 @@
   font-size: var(--osdk-filter-header-reset-font-size);
   color: var(--osdk-filter-header-reset-color);
   background: var(--osdk-filter-header-button-bg);
-  border: none;
+  border: var(--osdk-filter-header-reset-border);
   cursor: pointer;
   padding: var(--osdk-filter-header-reset-padding);
-  border-radius: var(--osdk-filter-header-button-border-radius);
+  border-radius: var(--osdk-filter-header-reset-border-radius);
   transition: background-color var(--osdk-filter-header-button-transition);
   &:hover:not(:disabled) {
     background: var(--osdk-filter-header-button-bg-hover);
   }
   &:disabled {
     color: var(--osdk-filter-header-reset-color-disabled);
+    border: var(--osdk-filter-header-reset-border-disabled);
     cursor: not-allowed;
   }
   &:focus-visible {
@@ -404,15 +430,110 @@
   }
 }
 
+/* src/base-components/search-bar/SearchBar.module.css */
+.searchBar {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--osdk-surface-spacing) * 3);
+  padding: var(--osdk-surface-spacing) calc(var(--osdk-surface-spacing) * 3);
+  border: var(--osdk-surface-border);
+  border-radius: var(--osdk-surface-border-radius);
+  &:focus-within {
+    outline: var(--osdk-focus-outline);
+    outline-offset: calc(-1 * var(--osdk-focus-visible-outline-offset));
+  }
+}
+.searchIcon {
+  width: var(--osdk-iconography-size-small);
+  height: var(--osdk-iconography-size-small);
+  color: var(--osdk-typography-color-muted);
+  pointer-events: none;
+  flex-shrink: 0;
+}
+.searchInput {
+  border: none;
+  width: 100%;
+  padding: var(--osdk-surface-spacing) 0;
+  font-size: var(--osdk-typography-size-body-medium);
+  background: transparent;
+  &:focus {
+    outline: none;
+  }
+  &::placeholder {
+    color: var(--osdk-typography-color-muted);
+  }
+}
+
+/* src/base-components/searchable-menu/SearchableMenu.module.css */
+.positioner {
+  z-index: var(--osdk-surface-z-index-3);
+}
+.popup {
+  background-color: var(--osdk-surface-background-color-default-rest);
+  border: var(--osdk-surface-border);
+  border-radius: var(--osdk-surface-border-radius);
+  box-shadow: var(--osdk-surface-shadow-2);
+  max-height: calc(var(--osdk-dialog-max-height) * 0.5);
+  overflow-y: auto;
+  width: var(--anchor-width);
+  &:focus {
+    outline: none;
+  }
+  &:focus-visible {
+    outline: var(--osdk-focus-outline);
+    outline-offset: var(--osdk-focus-visible-outline-offset);
+  }
+}
+.searchContainer {
+  border: none;
+  border-bottom: var(--osdk-surface-border);
+  border-radius: 0;
+  position: sticky;
+  top: 0;
+  background-color: var(--osdk-surface-background-color-default-rest);
+}
+.menuItem {
+  display: block;
+  width: 100%;
+  text-align: left;
+  padding: calc(var(--osdk-surface-spacing) * 2) calc(var(--osdk-surface-spacing) * 3);
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: var(--osdk-typography-size-body-medium);
+  color: var(--osdk-typography-color-default-rest);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  &:hover,
+  &[data-highlighted] {
+    background-color: var(--osdk-surface-background-color-default-hover);
+  }
+  &:focus-visible {
+    outline: var(--osdk-focus-outline);
+    outline-offset: var(--osdk-focus-visible-outline-offset);
+  }
+}
+.emptyState {
+  padding: calc(var(--osdk-surface-spacing) * 3);
+  text-align: center;
+  color: var(--osdk-typography-color-muted);
+  font-size: var(--osdk-typography-size-body-medium);
+}
+
 /* src/filter-list/base/AddFilterPopover.module.css */
 .trigger {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   font-family: var(--osdk-filter-header-font-family);
   font-size: var(--osdk-filter-header-reset-font-size);
-  color: var(--osdk-filter-header-reset-color);
+  color: var(--osdk-typography-color-default-rest);
   background: var(--osdk-filter-header-button-bg);
-  border: none;
+  border: var(--osdk-filter-list-addButton-border);
   cursor: pointer;
   padding: var(--osdk-filter-header-reset-padding);
+  min-height: var(--osdk-filter-list-addButton-height);
   border-radius: var(--osdk-filter-header-button-border-radius);
   transition: background-color var(--osdk-filter-header-button-transition);
   width: 100%;
@@ -430,39 +551,6 @@
     transition: none;
   }
 }
-.positioner {
-  z-index: var(--osdk-surface-z-index-3);
-}
-.popup {
-  background: var(--osdk-filter-item-menu-bg);
-  border: var(--osdk-filter-item-menu-border);
-  border-radius: var(--osdk-filter-item-menu-border-radius);
-  box-shadow: var(--osdk-filter-item-menu-shadow);
-  padding: var(--osdk-filter-item-menu-padding);
-}
-.menuItem {
-  display: flex;
-  align-items: center;
-  gap: var(--osdk-surface-spacing);
-  padding: var(--osdk-filter-item-menu-item-padding);
-  font-family: var(--osdk-filter-item-menu-item-font-family);
-  font-size: var(--osdk-filter-item-menu-item-font-size);
-  color: var(--osdk-filter-item-menu-item-color);
-  border-radius: var(--osdk-filter-item-menu-item-border-radius);
-  cursor: pointer;
-  border: none;
-  background: transparent;
-  width: 100%;
-  text-align: left;
-  &:hover,
-  &[data-highlighted] {
-    background: var(--osdk-filter-item-menu-item-bg-hover);
-  }
-  &:focus-visible {
-    outline: var(--osdk-filter-input-focus-outline-width) solid var(--osdk-filter-input-focus-outline-color);
-    outline-offset: var(--osdk-filter-input-focus-outline-offset);
-  }
-}
 
 /* src/filter-list/base/inputs/ContainsTextInput.module.css */
 .textInput {
@@ -625,6 +713,8 @@
   align-items: flex-end;
   height: var(--osdk-filter-range-histogram-height);
   gap: var(--osdk-filter-range-histogram-bar-gap);
+  padding-bottom: var(--osdk-filter-range-histogram-padding-bottom);
+  padding-inline: var(--osdk-filter-range-histogram-padding-inline);
   overflow: hidden;
 }
 .histogramBar {
@@ -673,7 +763,9 @@
   }
 }
 .separator {
-  padding-bottom: calc(var(--osdk-filter-range-inputs-gap) * 0.75);
+  display: flex;
+  align-items: center;
+  height: calc(var(--osdk-filter-input-font-size) + var(--osdk-filter-input-padding) * 2);
   color: var(--osdk-filter-range-separator-color);
 }
 @media (prefers-reduced-motion: reduce) {
@@ -777,7 +869,13 @@
     }
   }
   &[data-excluding][data-checked] {
-    background-color: var(--osdk-checkbox-bg-hover);
+    background-color: var(--osdk-checkbox-bg-checked);
+    &:hover {
+      background-color: var(--osdk-checkbox-bg-checked-hover);
+    }
+    &:active {
+      background-color: var(--osdk-checkbox-bg-checked-active);
+    }
   }
   &:focus-visible {
     outline: var(--osdk-focus-outline);
@@ -860,6 +958,7 @@
   height: 100%;
   width: 100%;
   background: var(--osdk-filter-listogram-row-bar-color, var(--osdk-filter-listogram-bar-color));
+  border-radius: var(--osdk-filter-listogram-bar-border-radius);
   transform-origin: left;
   transform: scaleX(var(--osdk-filter-listogram-bar-fill-scale, 0));
   transition: transform var(--osdk-filter-listogram-bar-fill-transition);
@@ -867,6 +966,25 @@
 .row[aria-pressed=true] .barFill {
   background: var(--osdk-filter-listogram-row-bar-color, var(--osdk-filter-listogram-selected-color));
 }
+.viewAllButton {
+  display: flex;
+  align-items: center;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-family: var(--osdk-filter-listogram-label-font-family);
+  font-size: var(--osdk-filter-listogram-view-all-font-size);
+  color: var(--osdk-filter-listogram-view-all-color);
+  padding: var(--osdk-filter-listogram-row-padding);
+  text-align: left;
+  &:hover {
+    text-decoration: underline;
+  }
+  &:focus-visible {
+    outline: var(--osdk-filter-listogram-row-focus-outline);
+    outline-offset: var(--osdk-filter-listogram-row-focus-offset);
+  }
+}
 .checkbox {
   display: flex;
 }
@@ -988,8 +1106,7 @@
   transition: border-color var( --osdk-combobox-transition-duration, var(--osdk-emphasis-transition-duration) ) var(--osdk-combobox-transition-ease, var(--osdk-emphasis-ease-default));
   &:focus {
     border-color: var( --osdk-combobox-focus-border-color, var(--osdk-intent-primary-rest) );
-    outline: var(--osdk-combobox-focus-width, var(--osdk-emphasis-focus-width)) solid var(--osdk-combobox-focus-color, var(--osdk-emphasis-focus-color));
-    outline-offset: var( --osdk-combobox-focus-offset, var(--osdk-emphasis-focus-offset) );
+    outline: none;
   }
   .osdkComboboxInputWrapper & {
     padding: 0;
@@ -1029,6 +1146,7 @@
 .osdkComboboxItem {
   display: flex;
   align-items: center;
+  gap: calc(var(--osdk-combobox-spacing, var(--osdk-surface-spacing)) * 1.5);
   padding: calc(var(--osdk-combobox-spacing, var(--osdk-surface-spacing)) * 1.5) calc(var(--osdk-combobox-spacing, var(--osdk-surface-spacing)) * 2);
   border-radius: var( --osdk-combobox-border-radius, var(--osdk-surface-border-radius) );
   cursor: pointer;
@@ -1050,6 +1168,18 @@
     opacity: var(--osdk-disabled-opacity, 0.5);
   }
 }
+.osdkComboboxItemIndicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: calc(var(--osdk-combobox-spacing, var(--osdk-surface-spacing)) * 4);
+  flex-shrink: 0;
+  color: var(--osdk-combobox-item-color-selected, var(--osdk-intent-primary-rest));
+  visibility: hidden;
+  &[data-selected] {
+    visibility: visible;
+  }
+}
 .osdkComboboxChips {
   display: flex;
   flex-wrap: wrap;
@@ -1119,19 +1249,19 @@
   flex-direction: column;
   gap: var(--osdk-filter-multiselect-gap);
 }
-.inputRow {
-  display: flex;
-  align-items: center;
-  gap: var(--osdk-filter-multiselect-inputRow-gap);
-}
-.clearButton {
-  flex-shrink: 0;
+.itemLabel {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .itemCount {
   font-family: var(--osdk-filter-multiselect-count-font-family);
   font-size: var(--osdk-filter-multiselect-count-font-size);
   font-variant-numeric: tabular-nums;
   color: var(--osdk-filter-multiselect-count-color);
+  flex-shrink: 0;
 }
 
 /* src/filter-list/base/inputs/NullValueWrapper.module.css */
@@ -1210,115 +1340,6 @@
   }
 }
 
-/* src/base-components/select/Select.module.css */
-.osdkSelectTrigger {
-  display: inline-flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--osdk-select-spacing, var(--osdk-surface-spacing));
-  width: 100%;
-  min-height: var(--osdk-select-min-height, 30px);
-  padding: calc(var(--osdk-select-spacing, var(--osdk-surface-spacing)) * 1.5) calc(var(--osdk-select-spacing, var(--osdk-surface-spacing)) * 2.5);
-  cursor: pointer;
-  border-radius: var( --osdk-select-border-radius, var(--osdk-surface-border-radius) );
-  border: var(--osdk-select-border-width, var(--osdk-surface-border-width)) solid var(--osdk-select-border-color, var(--osdk-surface-border-color-default));
-  background-color: var( --osdk-select-trigger-bg, var(--osdk-surface-background-color-default-rest) );
-  color: var( --osdk-select-trigger-color, var(--osdk-typography-color-default-rest) );
-  font-family: var( --osdk-select-font-family, var(--osdk-typography-family-default) );
-  font-size: var( --osdk-select-font-size, var(--osdk-typography-size-body-medium) );
-  line-height: var( --osdk-select-line-height, var(--osdk-typography-line-height-default) );
-  transition: background-color var( --osdk-select-transition-duration, var(--osdk-emphasis-transition-duration) ) var(--osdk-select-transition-ease, var(--osdk-emphasis-ease-default)), border-color var( --osdk-select-transition-duration, var(--osdk-emphasis-transition-duration) ) var(--osdk-select-transition-ease, var(--osdk-emphasis-ease-default));
-  &:hover {
-    background-color: var( --osdk-select-trigger-bg-hover, var(--osdk-surface-background-color-default-hover) );
-  }
-  &:active {
-    background-color: var( --osdk-select-trigger-bg-active, var(--osdk-surface-background-color-default-active) );
-  }
-  &:focus-visible {
-    outline: var(--osdk-select-focus-width, var(--osdk-emphasis-focus-width)) solid var(--osdk-select-focus-color, var(--osdk-emphasis-focus-color));
-    outline-offset: var( --osdk-select-focus-offset, var(--osdk-emphasis-focus-offset) );
-  }
-  &[data-disabled] {
-    cursor: not-allowed;
-    opacity: var(--osdk-disabled-opacity, 0.5);
-  }
-  &[data-popup-open] {
-    border-color: var( --osdk-select-border-color-active, var(--osdk-intent-primary-rest) );
-  }
-}
-.osdkSelectValueContainer {
-  flex: 1;
-  display: grid;
-  min-width: 0;
-  & > * {
-    grid-area: 1 / 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-}
-.osdkSelectValue {
-  text-align: left;
-}
-.osdkSelectPlaceholder {
-  text-align: left;
-  color: var( --osdk-select-placeholder-color, var(--osdk-typography-color-muted) );
-  pointer-events: none;
-}
-.osdkSelectValue:not([data-placeholder]) ~ .osdkSelectPlaceholder {
-  display: none;
-}
-.osdkSelectIcon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--osdk-select-icon-color, var(--osdk-iconography-color-muted));
-  flex-shrink: 0;
-  transition: transform var( --osdk-select-transition-duration, var(--osdk-emphasis-transition-duration) ) var(--osdk-select-transition-ease, var(--osdk-emphasis-ease-default));
-  [data-popup-open] > & {
-    transform: rotate(180deg);
-  }
-}
-.osdkSelectPositioner {
-  z-index: var(--osdk-select-z-index, var(--osdk-surface-z-index-3));
-}
-.osdkSelectPopup {
-  display: flex;
-  flex-direction: column;
-  min-width: var(--anchor-width);
-  max-height: var(--available-height);
-  overflow-y: auto;
-  padding: calc(var(--osdk-select-spacing, var(--osdk-surface-spacing)) * 1.5);
-  border-radius: var( --osdk-select-border-radius, var(--osdk-surface-border-radius) );
-  border: var(--osdk-select-border-width, var(--osdk-surface-border-width)) solid var(--osdk-select-border-color, var(--osdk-surface-border-color-default));
-  background-color: var( --osdk-select-popup-bg, var(--osdk-surface-background-color-default-rest) );
-  box-shadow: var(--osdk-select-popup-shadow, var(--osdk-surface-shadow-2));
-}
-.osdkSelectItem {
-  display: flex;
-  align-items: center;
-  padding: calc(var(--osdk-select-spacing, var(--osdk-surface-spacing)) * 1.5) calc(var(--osdk-select-spacing, var(--osdk-surface-spacing)) * 2);
-  border-radius: var( --osdk-select-border-radius, var(--osdk-surface-border-radius) );
-  cursor: pointer;
-  font-family: var( --osdk-select-font-family, var(--osdk-typography-family-default) );
-  font-size: var( --osdk-select-font-size, var(--osdk-typography-size-body-medium) );
-  line-height: var( --osdk-select-line-height, var(--osdk-typography-line-height-default) );
-  color: var( --osdk-select-item-color, var(--osdk-typography-color-default-rest) );
-  transition: background-color var( --osdk-select-transition-duration, var(--osdk-emphasis-transition-duration) ) var(--osdk-select-transition-ease, var(--osdk-emphasis-ease-default));
-  &[data-highlighted] {
-    background-color: var( --osdk-select-item-bg-highlighted, var(--osdk-surface-background-color-default-hover) );
-    outline: none;
-  }
-  &[data-selected] {
-    background-color: var( --osdk-select-item-bg-selected, var(--osdk-surface-layer-primary) );
-    color: var( --osdk-select-item-color-selected, var(--osdk-intent-primary-rest) );
-  }
-  &[data-disabled] {
-    cursor: not-allowed;
-    opacity: var(--osdk-disabled-opacity, 0.5);
-  }
-}
-
 /* src/filter-list/base/inputs/SingleSelectInput.module.css */
 .singleSelect {
   display: flex;
@@ -1331,27 +1352,19 @@
   position: relative;
 }
 .clearButton {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--osdk-filter-select-clear-padding);
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  color: var(--osdk-filter-select-clear-color);
-  border-radius: var(--osdk-filter-select-clear-border-radius);
-  transition: color var(--osdk-filter-select-clear-transition), background-color var(--osdk-filter-select-clear-transition);
-  &:hover {
-    color: var(--osdk-filter-select-clear-color-hover);
-    background-color: var(--osdk-filter-select-clear-bg-hover);
-  }
-  &:focus-visible {
-    outline: var(--osdk-filter-input-focus-outline-width) solid var(--osdk-filter-input-focus-outline-color);
-    outline-offset: var(--osdk-filter-input-focus-outline-offset);
-  }
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
-  }
+  flex-shrink: 0;
+}
+.itemLabel {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.itemCount {
+  font-variant-numeric: tabular-nums;
+  color: var(--osdk-typography-color-muted);
+  flex-shrink: 0;
 }
 
 /* src/filter-list/base/inputs/TextTagsInput.module.css */
@@ -1432,9 +1445,9 @@
   cursor: pointer;
   font-family: var(--osdk-filter-item-exclude-dropdown-font-family);
   font-size: var(--osdk-filter-item-exclude-dropdown-font-size);
-  color: var(--osdk-filter-item-exclude-dropdown-color);
-  padding: calc(var(--osdk-surface-spacing) * 0.5) calc(var(--osdk-surface-spacing) * 1);
-  border-radius: var(--osdk-filter-item-header-action-border-radius);
+  color: var(--osdk-filter-item-exclude-dropdown-trigger-color);
+  padding: calc(var(--osdk-surface-spacing) * 1) calc(var(--osdk-surface-spacing) * 1);
+  border-radius: var(--osdk-filter-item-exclude-dropdown-trigger-border-radius);
   &:hover {
     background: var(--osdk-filter-item-header-action-bg-hover);
   }
@@ -1880,40 +1893,6 @@
   font-style: italic;
 }
 
-/* src/base-components/search-bar/SearchBar.module.css */
-.searchBar {
-  display: flex;
-  align-items: center;
-  gap: calc(var(--osdk-surface-spacing) * 3);
-  padding: var(--osdk-surface-spacing) calc(var(--osdk-surface-spacing) * 3);
-  border: var(--osdk-surface-border);
-  border-radius: var(--osdk-surface-border-radius);
-  &:focus-within {
-    outline: var(--osdk-focus-outline);
-    outline-offset: calc(-1 * var(--osdk-focus-visible-outline-offset));
-  }
-}
-.searchIcon {
-  width: var(--osdk-iconography-size-small);
-  height: var(--osdk-iconography-size-small);
-  color: var(--osdk-typography-color-muted);
-  pointer-events: none;
-  flex-shrink: 0;
-}
-.searchInput {
-  border: none;
-  width: 100%;
-  padding: var(--osdk-surface-spacing) 0;
-  font-size: var(--osdk-typography-size-body-medium);
-  background: transparent;
-  &:focus {
-    outline: none;
-  }
-  &::placeholder {
-    color: var(--osdk-typography-color-muted);
-  }
-}
-
 /* src/object-table/ColumnConfigDialog.module.css */
 .title {
   display: flex;
@@ -2044,8 +2023,7 @@
   transform: rotate(180deg);
 }
 .checkbox {
-  width: var(--osdk-checkbox-icon-size);
-  height: var(--osdk-checkbox-icon-size);
+  flex-shrink: 0;
 }
 .propertyList {
   display: flex;
@@ -2194,60 +2172,6 @@
   flex: 1;
   text-align: left;
 }
-.menuPositioner {
-  z-index: var(--osdk-surface-z-index-2);
-}
-.dropdownMenu {
-  background-color: var(--osdk-surface-background-color-default-rest);
-  border: var(--osdk-surface-border);
-  border-radius: var(--osdk-surface-border-radius);
-  box-shadow: var(--osdk-surface-shadow-2);
-  max-height: calc(var(--osdk-dialog-max-height) * 0.5);
-  overflow-y: auto;
-  width: var(--anchor-width);
-  &:focus {
-    outline: none;
-  }
-  &:focus-visible {
-    outline: var(--osdk-focus-outline);
-    outline-offset: var(--osdk-focus-visible-outline-offset);
-  }
-}
-.menuSearchContainer {
-  border: none;
-  border-bottom: var(--osdk-surface-border);
-  border-radius: 0;
-  position: sticky;
-  top: 0;
-  background-color: var(--osdk-surface-background-color-default-rest);
-}
-.menuEmptyState {
-  padding: calc(var(--osdk-surface-spacing) * 3);
-  text-align: center;
-  color: var(--osdk-typography-color-muted);
-  font-size: var(--osdk-typography-size-body-medium);
-}
-.dropdownItem {
-  display: block;
-  width: 100%;
-  text-align: left;
-  padding: calc(var(--osdk-surface-spacing) * 2) calc(var(--osdk-surface-spacing) * 3);
-  background: none;
-  border: none;
-  cursor: pointer;
-  font-size: var(--osdk-typography-size-body-medium);
-  color: var(--osdk-typography-color-default-rest);
-  &:hover {
-    background-color: var(--osdk-surface-background-color-default-hover);
-  }
-  &:focus {
-    outline: none;
-  }
-  &:focus-visible {
-    outline: var(--osdk-focus-outline);
-    outline-offset: calc(-1 * var(--osdk-focus-visible-outline-offset));
-  }
-}
 .truncate {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -3213,6 +3137,177 @@
   height: var(--osdk-datetime-calendar-fallback-height);
 }
 
+/* src/base-components/select/Select.module.css */
+.osdkSelectTrigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--osdk-select-spacing, var(--osdk-surface-spacing));
+  width: 100%;
+  min-height: var(--osdk-select-min-height, 30px);
+  padding: calc(var(--osdk-select-spacing, var(--osdk-surface-spacing)) * 1.5) calc(var(--osdk-select-spacing, var(--osdk-surface-spacing)) * 2.5);
+  cursor: pointer;
+  border-radius: var( --osdk-select-border-radius, var(--osdk-surface-border-radius) );
+  border: var(--osdk-select-border-width, var(--osdk-surface-border-width)) solid var(--osdk-select-border-color, var(--osdk-surface-border-color-default));
+  background-color: var( --osdk-select-trigger-bg, var(--osdk-surface-background-color-default-rest) );
+  color: var( --osdk-select-trigger-color, var(--osdk-typography-color-default-rest) );
+  font-family: var( --osdk-select-font-family, var(--osdk-typography-family-default) );
+  font-size: var( --osdk-select-font-size, var(--osdk-typography-size-body-medium) );
+  line-height: var( --osdk-select-line-height, var(--osdk-typography-line-height-default) );
+  transition: background-color var( --osdk-select-transition-duration, var(--osdk-emphasis-transition-duration) ) var(--osdk-select-transition-ease, var(--osdk-emphasis-ease-default)), border-color var( --osdk-select-transition-duration, var(--osdk-emphasis-transition-duration) ) var(--osdk-select-transition-ease, var(--osdk-emphasis-ease-default));
+  &:hover {
+    background-color: var( --osdk-select-trigger-bg-hover, var(--osdk-surface-background-color-default-hover) );
+  }
+  &:active {
+    background-color: var( --osdk-select-trigger-bg-active, var(--osdk-surface-background-color-default-active) );
+  }
+  &:focus-visible {
+    outline: var(--osdk-select-focus-width, var(--osdk-emphasis-focus-width)) solid var(--osdk-select-focus-color, var(--osdk-emphasis-focus-color));
+    outline-offset: var( --osdk-select-focus-offset, var(--osdk-emphasis-focus-offset) );
+  }
+  &[data-disabled] {
+    cursor: not-allowed;
+    opacity: var(--osdk-disabled-opacity, 0.5);
+  }
+  &[data-popup-open] {
+    border-color: var( --osdk-select-border-color-active, var(--osdk-intent-primary-rest) );
+  }
+}
+.osdkSelectValueContainer {
+  flex: 1;
+  display: grid;
+  min-width: 0;
+  & > * {
+    grid-area: 1 / 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+.osdkSelectValue {
+  text-align: left;
+}
+.osdkSelectPlaceholder {
+  text-align: left;
+  color: var( --osdk-select-placeholder-color, var(--osdk-typography-color-muted) );
+  pointer-events: none;
+}
+.osdkSelectValue:not([data-placeholder]) ~ .osdkSelectPlaceholder {
+  display: none;
+}
+.osdkSelectIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--osdk-select-icon-color, var(--osdk-iconography-color-muted));
+  flex-shrink: 0;
+  transition: transform var( --osdk-select-transition-duration, var(--osdk-emphasis-transition-duration) ) var(--osdk-select-transition-ease, var(--osdk-emphasis-ease-default));
+  [data-popup-open] > & {
+    transform: rotate(180deg);
+  }
+}
+.osdkSelectPositioner {
+  z-index: var(--osdk-select-z-index, var(--osdk-surface-z-index-3));
+}
+.osdkSelectPopup {
+  display: flex;
+  flex-direction: column;
+  min-width: var(--anchor-width);
+  max-height: var(--available-height);
+  overflow-y: auto;
+  padding: calc(var(--osdk-select-spacing, var(--osdk-surface-spacing)) * 1.5);
+  border-radius: var( --osdk-select-border-radius, var(--osdk-surface-border-radius) );
+  border: var(--osdk-select-border-width, var(--osdk-surface-border-width)) solid var(--osdk-select-border-color, var(--osdk-surface-border-color-default));
+  background-color: var( --osdk-select-popup-bg, var(--osdk-surface-background-color-default-rest) );
+  box-shadow: var(--osdk-select-popup-shadow, var(--osdk-surface-shadow-2));
+}
+.osdkSelectItem {
+  display: flex;
+  align-items: center;
+  padding: calc(var(--osdk-select-spacing, var(--osdk-surface-spacing)) * 1.5) calc(var(--osdk-select-spacing, var(--osdk-surface-spacing)) * 2);
+  border-radius: var( --osdk-select-border-radius, var(--osdk-surface-border-radius) );
+  cursor: pointer;
+  font-family: var( --osdk-select-font-family, var(--osdk-typography-family-default) );
+  font-size: var( --osdk-select-font-size, var(--osdk-typography-size-body-medium) );
+  line-height: var( --osdk-select-line-height, var(--osdk-typography-line-height-default) );
+  color: var( --osdk-select-item-color, var(--osdk-typography-color-default-rest) );
+  transition: background-color var( --osdk-select-transition-duration, var(--osdk-emphasis-transition-duration) ) var(--osdk-select-transition-ease, var(--osdk-emphasis-ease-default));
+  &[data-highlighted] {
+    background-color: var( --osdk-select-item-bg-highlighted, var(--osdk-surface-background-color-default-hover) );
+    outline: none;
+  }
+  &[data-selected] {
+    background-color: var( --osdk-select-item-bg-selected, var(--osdk-surface-layer-primary) );
+    color: var( --osdk-select-item-color-selected, var(--osdk-intent-primary-rest) );
+  }
+  &[data-disabled] {
+    cursor: not-allowed;
+    opacity: var(--osdk-disabled-opacity, 0.5);
+  }
+}
+
+/* src/action-form/fields/NumberInputField.module.css */
+.osdkNumberInputWrapper {
+  display: flex;
+  border-radius: var(--osdk-input-border-radius);
+  border: var(--osdk-input-border-width) solid var(--osdk-input-border-color);
+  background-color: var(--osdk-input-bg);
+  transition: background-color var(--osdk-input-transition-duration) var(--osdk-input-transition-ease), border-color var(--osdk-input-transition-duration) var(--osdk-input-transition-ease);
+  &:hover {
+    background-color: var(--osdk-input-bg-hover);
+  }
+  &:focus-within {
+    outline: var(--osdk-input-focus-width) solid var(--osdk-input-focus-color);
+    outline-offset: var(--osdk-input-focus-offset);
+    border-color: var(--osdk-input-border-color-focus);
+  }
+}
+.osdkNumberInputField {
+  flex: 1;
+  min-width: 0;
+  min-height: var(--osdk-input-min-height);
+  padding: var(--osdk-input-padding);
+  border: none;
+  border-radius: var(--osdk-input-border-radius) 0 0 var(--osdk-input-border-radius);
+  background: transparent;
+  color: var(--osdk-input-color);
+  font-family: var(--osdk-input-font-family);
+  font-size: var(--osdk-input-font-size);
+  line-height: var( --osdk-input-line-height, var(--osdk-typography-line-height-default) );
+  &::placeholder {
+    color: var(--osdk-input-placeholder-color);
+  }
+  &:focus-visible {
+    outline: none;
+  }
+}
+.osdkNumberInputStepper {
+  display: flex;
+  flex-direction: column;
+  border-left: var(--osdk-input-border-width) solid var(--osdk-input-border-color);
+}
+.osdkNumberInputStepButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  padding: 0 calc(var(--osdk-surface-spacing) * 1.5);
+  border: none;
+  background: transparent;
+  color: var(--osdk-input-color);
+  cursor: pointer;
+  line-height: 0;
+  &:hover {
+    background-color: var(--osdk-input-bg-hover);
+  }
+  &:active {
+    background-color: var(--osdk-input-border-color);
+  }
+  & + & {
+    border-top: var(--osdk-input-border-width) solid var(--osdk-input-border-color);
+  }
+}
+
 /* src/action-form/fields/RadioButtonsField.module.css */
 .osdkRadioGroup {
   display: flex;