@osdk/react-components 0.2.0-beta.19 → 0.2.0-beta.20

package/build/cjs/public/experimental.css

@@ -342,6 +342,66 @@
   }
 }
 
+/* src/filter-list/base/AddFilterPopover.module.css */
+.trigger {
+  font-family: var(--osdk-filter-header-font-family);
+  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;
+  cursor: pointer;
+  padding: var(--osdk-filter-header-reset-padding);
+  border-radius: var(--osdk-filter-header-button-border-radius);
+  transition: background-color var(--osdk-filter-header-button-transition);
+  width: 100%;
+  &:hover {
+    background: var(--osdk-filter-header-button-bg-hover);
+  }
+  &:active {
+    background: var(--osdk-filter-header-button-bg-active);
+  }
+  &: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;
+  }
+}
+.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 {
   position: relative;
@@ -541,14 +601,22 @@
   display: flex;
   flex-direction: column;
   gap: var(--osdk-filter-checkbox-list-gap);
+  transition: opacity var(--osdk-filter-content-fade-duration);
+}
+.checkboxList[data-loading=true] {
+  opacity: 0.5;
+}
+@media (prefers-reduced-motion: reduce) {
+  .checkboxList {
+    transition: none;
+  }
 }
 .checkboxRow {
   padding: var(--osdk-filter-checkbox-row-padding);
-}
-.checkboxRow[data-select-all] {
-  border-bottom: var(--osdk-filter-checkbox-selectall-border-bottom);
-  padding-bottom: calc(var(--osdk-filter-checkbox-row-padding) + 2px);
-  margin-bottom: 2px;
+  border-radius: var(--osdk-filter-checkbox-row-border-radius);
+  &:hover {
+    background: var(--osdk-filter-checkbox-row-bg-hover);
+  }
 }
 .checkboxLabel {
   display: flex;
@@ -572,6 +640,44 @@
   flex-shrink: 0;
 }
 
+/* src/base-components/skeleton/SkeletonBar.module.css */
+@keyframes skeleton-glow {
+  from {
+    background: var(--osdk-background-skeleton-from);
+  }
+  to {
+    background: var(--osdk-background-skeleton-to);
+  }
+}
+.skeletonBar {
+  animation: 1000ms linear infinite alternate skeleton-glow;
+  background: var(--osdk-background-skeleton-from);
+  border-radius: var(--osdk-surface-border-radius);
+  pointer-events: none;
+  user-select: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  .skeletonBar {
+    animation: none;
+  }
+}
+
+/* src/filter-list/base/inputs/CheckboxListSkeleton.module.css */
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--osdk-filter-checkbox-list-gap);
+}
+.row {
+  display: flex;
+  align-items: center;
+  gap: var(--osdk-filter-checkbox-label-gap);
+  padding: var(--osdk-filter-checkbox-row-padding);
+}
+.flexBar {
+  flex: 1;
+}
+
 /* src/filter-list/base/inputs/shared.module.css */
 .loadingMessage,
 .errorMessage,
@@ -633,12 +739,23 @@
   display: flex;
   flex-direction: column;
   gap: var(--osdk-filter-range-gap);
+  min-width: 0;
+  transition: opacity var(--osdk-filter-content-fade-duration);
+}
+.rangeInput[data-loading=true] {
+  opacity: 0.5;
 }
 .histogramContainer {
   display: flex;
   align-items: flex-end;
   height: var(--osdk-filter-range-histogram-height);
   gap: var(--osdk-filter-range-histogram-bar-gap);
+  overflow: hidden;
+  opacity: 0;
+  transition: opacity var(--osdk-filter-content-fade-duration);
+}
+.histogramContainer:not([data-empty=true]) {
+  opacity: 1;
 }
 .histogramBar {
   flex: 1;
@@ -653,12 +770,14 @@
   display: flex;
   align-items: flex-end;
   gap: var(--osdk-filter-range-inputs-gap);
+  min-width: 0;
 }
 .inputWrapper {
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: var(--osdk-filter-range-input-wrapper-gap);
+  min-width: 0;
 }
 .inputLabel {
   font-family: var(--osdk-filter-range-label-font-family);
@@ -673,6 +792,7 @@
   border-radius: var(--osdk-filter-input-border-radius);
   background: var(--osdk-filter-input-bg);
   color: var(--osdk-filter-input-color);
+  min-width: 0;
   &:focus {
     border-color: var(--osdk-filter-input-focus-border);
     outline: var(--osdk-filter-input-focus-outline-width) solid var(--osdk-filter-input-focus-outline-color);
@@ -686,6 +806,12 @@
   padding-bottom: calc(var(--osdk-filter-range-inputs-gap) * 0.75);
   color: var(--osdk-filter-range-separator-color);
 }
+@media (prefers-reduced-motion: reduce) {
+  .histogramContainer,
+  .rangeInput {
+    transition: none;
+  }
+}
 
 /* src/filter-list/base/inputs/LinkedPropertyInput.module.css */
 .linkedProperty {
@@ -697,6 +823,15 @@
 .listogram {
   display: flex;
   flex-direction: column;
+  transition: opacity var(--osdk-filter-content-fade-duration);
+}
+.listogram[data-loading=true] {
+  opacity: 0.5;
+}
+@media (prefers-reduced-motion: reduce) {
+  .listogram {
+    transition: none;
+  }
 }
 .container {
   display: flex;
@@ -736,7 +871,8 @@
   white-space: nowrap;
 }
 .bar {
-  flex: 2;
+  width: var(--osdk-filter-listogram-bar-width);
+  flex-shrink: 0;
   height: var(--osdk-filter-listogram-bar-height);
   background: var(--osdk-filter-listogram-bar-bg);
   border-radius: var(--osdk-filter-listogram-bar-border-radius);
@@ -763,6 +899,22 @@
   text-align: right;
 }
 
+/* src/filter-list/base/inputs/ListogramSkeleton.module.css */
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--osdk-filter-listogram-gap);
+}
+.row {
+  display: flex;
+  align-items: center;
+  gap: var(--osdk-filter-listogram-row-gap);
+  padding: var(--osdk-filter-listogram-row-padding);
+}
+.flexBar {
+  flex: 1;
+}
+
 /* src/filter-list/base/inputs/MultiDateInput.module.css */
 .multiDate {
   display: flex;
@@ -803,20 +955,21 @@
 /* src/base-components/combobox/Combobox.module.css */
 .osdkComboboxInputWrapper {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: var(--osdk-combobox-spacing, var(--osdk-surface-spacing));
   width: 100%;
   min-height: var(--osdk-combobox-min-height, 30px);
   padding: calc(var(--osdk-combobox-spacing, var(--osdk-surface-spacing)) * 1.5) calc(var(--osdk-combobox-spacing, var(--osdk-surface-spacing)) * 2);
   box-sizing: border-box;
-  border-radius: var(--osdk-combobox-border-radius, var(--osdk-surface-border-radius));
+  border-radius: var( --osdk-combobox-border-radius, var(--osdk-surface-border-radius) );
   border: var(--osdk-combobox-border-width, var(--osdk-surface-border-width)) solid var(--osdk-combobox-border-color, var(--osdk-surface-border-color-default));
-  background-color: var(--osdk-combobox-input-bg, var(--osdk-surface-background-color-default-rest));
-  transition: border-color var(--osdk-combobox-transition-duration, var(--osdk-emphasis-transition-duration)) var(--osdk-combobox-transition-ease, var(--osdk-emphasis-ease-default));
+  background-color: var( --osdk-combobox-input-bg, var(--osdk-surface-background-color-default-rest) );
+  transition: border-color var( --osdk-combobox-transition-duration, var(--osdk-emphasis-transition-duration) ) var(--osdk-combobox-transition-ease, var(--osdk-emphasis-ease-default));
   &:focus-within {
-    border-color: var(--osdk-combobox-focus-border-color, var(--osdk-intent-primary-rest));
+    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-offset: var( --osdk-combobox-focus-offset, var(--osdk-emphasis-focus-offset) );
   }
 }
 .osdkComboboxSearchIcon {
@@ -826,15 +979,36 @@
 .osdkComboboxInput {
   flex: 1;
   min-width: 0;
-  border: none;
-  background: transparent;
-  font-family: var(--osdk-combobox-font-family, var(--osdk-typography-family-default));
-  font-size: var(--osdk-combobox-font-size, var(--osdk-typography-size-body-medium));
-  line-height: var(--osdk-combobox-line-height, var(--osdk-typography-line-height-default));
-  color: var(--osdk-combobox-input-color, var(--osdk-typography-color-default-rest));
+  width: 100%;
+  box-sizing: border-box;
+  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) );
+  border: var(--osdk-combobox-border-width, var(--osdk-surface-border-width)) solid var(--osdk-combobox-border-color, var(--osdk-surface-border-color-default));
+  background-color: var( --osdk-combobox-input-bg, var(--osdk-surface-background-color-default-rest) );
+  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) );
+  }
+  .osdkComboboxInputWrapper & {
+    padding: 0;
+    border: none;
+    border-radius: 0;
+    background: transparent;
+    &:focus {
+      border-color: unset;
+      outline: none;
+      outline-offset: unset;
+    }
+  }
+  font-family: var( --osdk-combobox-font-family, var(--osdk-typography-family-default) );
+  font-size: var( --osdk-combobox-font-size, var(--osdk-typography-size-body-medium) );
+  line-height: var( --osdk-combobox-line-height, var(--osdk-typography-line-height-default) );
+  color: var( --osdk-combobox-input-color, var(--osdk-typography-color-default-rest) );
   outline: none;
   &::placeholder {
-    color: var(--osdk-combobox-placeholder-color, var(--osdk-typography-color-muted));
+    color: var( --osdk-combobox-placeholder-color, var(--osdk-typography-color-muted) );
   }
 }
 .osdkComboboxPositioner {
@@ -848,29 +1022,29 @@
   overflow-y: auto;
   padding: calc(var(--osdk-combobox-spacing, var(--osdk-surface-spacing)) * 1.5);
   box-sizing: border-box;
-  border-radius: var(--osdk-combobox-border-radius, var(--osdk-surface-border-radius));
+  border-radius: var( --osdk-combobox-border-radius, var(--osdk-surface-border-radius) );
   border: var(--osdk-combobox-border-width, var(--osdk-surface-border-width)) solid var(--osdk-combobox-border-color, var(--osdk-surface-border-color-default));
-  background-color: var(--osdk-combobox-popup-bg, var(--osdk-surface-background-color-default-rest));
+  background-color: var( --osdk-combobox-popup-bg, var(--osdk-surface-background-color-default-rest) );
   box-shadow: var(--osdk-combobox-popup-shadow, var(--osdk-surface-shadow-2));
 }
 .osdkComboboxItem {
   display: flex;
   align-items: center;
   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));
+  border-radius: var( --osdk-combobox-border-radius, var(--osdk-surface-border-radius) );
   cursor: pointer;
-  font-family: var(--osdk-combobox-font-family, var(--osdk-typography-family-default));
-  font-size: var(--osdk-combobox-font-size, var(--osdk-typography-size-body-medium));
-  line-height: var(--osdk-combobox-line-height, var(--osdk-typography-line-height-default));
-  color: var(--osdk-combobox-item-color, var(--osdk-typography-color-default-rest));
-  transition: background-color var(--osdk-combobox-transition-duration, var(--osdk-emphasis-transition-duration)) var(--osdk-combobox-transition-ease, var(--osdk-emphasis-ease-default));
+  font-family: var( --osdk-combobox-font-family, var(--osdk-typography-family-default) );
+  font-size: var( --osdk-combobox-font-size, var(--osdk-typography-size-body-medium) );
+  line-height: var( --osdk-combobox-line-height, var(--osdk-typography-line-height-default) );
+  color: var( --osdk-combobox-item-color, var(--osdk-typography-color-default-rest) );
+  transition: background-color var( --osdk-combobox-transition-duration, var(--osdk-emphasis-transition-duration) ) var(--osdk-combobox-transition-ease, var(--osdk-emphasis-ease-default));
   &[data-highlighted] {
-    background-color: var(--osdk-combobox-item-bg-highlighted, var(--osdk-surface-background-color-default-hover));
+    background-color: var( --osdk-combobox-item-bg-highlighted, var(--osdk-surface-background-color-default-hover) );
     outline: none;
   }
   &[data-selected] {
-    background-color: var(--osdk-combobox-item-bg-selected, var(--osdk-surface-layer-primary));
-    color: var(--osdk-combobox-item-color-selected, var(--osdk-intent-primary-rest));
+    background-color: var( --osdk-combobox-item-bg-selected, var(--osdk-surface-layer-primary) );
+    color: var( --osdk-combobox-item-color-selected, var(--osdk-intent-primary-rest) );
   }
   &[data-disabled] {
     cursor: not-allowed;
@@ -888,12 +1062,12 @@
   align-items: center;
   gap: var(--osdk-combobox-spacing, var(--osdk-surface-spacing));
   padding: calc(var(--osdk-combobox-spacing, var(--osdk-surface-spacing)) * 0.5) calc(var(--osdk-combobox-spacing, var(--osdk-surface-spacing)) * 1.5);
-  border-radius: var(--osdk-combobox-border-radius, var(--osdk-surface-border-radius));
-  background-color: var(--osdk-combobox-chip-bg, var(--osdk-surface-background-color-default-hover));
-  font-family: var(--osdk-combobox-font-family, var(--osdk-typography-family-default));
-  font-size: var(--osdk-combobox-chip-font-size, var(--osdk-typography-size-body-small));
-  line-height: var(--osdk-combobox-line-height, var(--osdk-typography-line-height-default));
-  color: var(--osdk-combobox-chip-color, var(--osdk-typography-color-default-rest));
+  border-radius: var( --osdk-combobox-border-radius, var(--osdk-surface-border-radius) );
+  background-color: var( --osdk-combobox-chip-bg, var(--osdk-surface-background-color-default-hover) );
+  font-family: var( --osdk-combobox-font-family, var(--osdk-typography-family-default) );
+  font-size: var( --osdk-combobox-chip-font-size, var(--osdk-typography-size-body-small) );
+  line-height: var( --osdk-combobox-line-height, var(--osdk-typography-line-height-default) );
+  color: var( --osdk-combobox-chip-color, var(--osdk-typography-color-default-rest) );
 }
 .osdkComboboxChipRemove {
   display: flex;
@@ -903,10 +1077,10 @@
   border: none;
   background: transparent;
   cursor: pointer;
-  color: var(--osdk-combobox-chip-remove-color, var(--osdk-iconography-color-muted));
-  transition: color var(--osdk-combobox-transition-duration, var(--osdk-emphasis-transition-duration)) var(--osdk-combobox-transition-ease, var(--osdk-emphasis-ease-default));
+  color: var( --osdk-combobox-chip-remove-color, var(--osdk-iconography-color-muted) );
+  transition: color var( --osdk-combobox-transition-duration, var(--osdk-emphasis-transition-duration) ) var(--osdk-combobox-transition-ease, var(--osdk-emphasis-ease-default));
   &:hover {
-    color: var(--osdk-combobox-chip-remove-color-hover, var(--osdk-typography-color-default-rest));
+    color: var( --osdk-combobox-chip-remove-color-hover, var(--osdk-typography-color-default-rest) );
   }
 }
 .osdkComboboxClear {
@@ -918,19 +1092,26 @@
   background: transparent;
   cursor: pointer;
   color: var(--osdk-combobox-clear-color, var(--osdk-iconography-color-muted));
-  border-radius: var(--osdk-combobox-border-radius, var(--osdk-surface-border-radius));
-  transition: color var(--osdk-combobox-transition-duration, var(--osdk-emphasis-transition-duration)) var(--osdk-combobox-transition-ease, var(--osdk-emphasis-ease-default)), background-color var(--osdk-combobox-transition-duration, var(--osdk-emphasis-transition-duration)) var(--osdk-combobox-transition-ease, var(--osdk-emphasis-ease-default));
+  border-radius: var( --osdk-combobox-border-radius, var(--osdk-surface-border-radius) );
+  transition: color var( --osdk-combobox-transition-duration, var(--osdk-emphasis-transition-duration) ) var(--osdk-combobox-transition-ease, var(--osdk-emphasis-ease-default)), background-color var( --osdk-combobox-transition-duration, var(--osdk-emphasis-transition-duration) ) var(--osdk-combobox-transition-ease, var(--osdk-emphasis-ease-default));
   &:hover {
-    color: var(--osdk-combobox-clear-color-hover, var(--osdk-typography-color-default-rest));
-    background-color: var(--osdk-combobox-clear-bg-hover, var(--osdk-surface-background-color-default-hover));
+    color: var( --osdk-combobox-clear-color-hover, var(--osdk-typography-color-default-rest) );
+    background-color: var( --osdk-combobox-clear-bg-hover, var(--osdk-surface-background-color-default-hover) );
   }
 }
+.osdkComboboxList {
+  display: flex;
+  flex-direction: column;
+}
 .osdkComboboxEmpty {
   padding: calc(var(--osdk-combobox-spacing, var(--osdk-surface-spacing)) * 3) calc(var(--osdk-combobox-spacing, var(--osdk-surface-spacing)) * 2);
   text-align: center;
   color: var(--osdk-combobox-empty-color, var(--osdk-typography-color-muted));
-  font-family: var(--osdk-combobox-font-family, var(--osdk-typography-family-default));
-  font-size: var(--osdk-combobox-font-size, var(--osdk-typography-size-body-medium));
+  font-family: var( --osdk-combobox-font-family, var(--osdk-typography-family-default) );
+  font-size: var( --osdk-combobox-font-size, var(--osdk-typography-size-body-medium) );
+  &:empty {
+    display: none;
+  }
 }
 
 /* src/filter-list/base/inputs/MultiSelectInput.module.css */
@@ -1041,49 +1222,61 @@
   padding: calc(var(--osdk-select-spacing, var(--osdk-surface-spacing)) * 1.5) calc(var(--osdk-select-spacing, var(--osdk-surface-spacing)) * 2.5);
   box-sizing: border-box;
   cursor: pointer;
-  border-radius: var(--osdk-select-border-radius, var(--osdk-surface-border-radius));
+  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));
+  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));
+    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));
+    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));
+    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));
+    border-color: var( --osdk-select-border-color-active, var(--osdk-intent-primary-rest) );
   }
 }
-.osdkSelectValue {
+.osdkSelectValueContainer {
   flex: 1;
-  text-align: left;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  &[data-placeholder] {
-    color: var(--osdk-select-placeholder-color, var(--osdk-typography-color-muted));
+  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));
+  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);
   }
@@ -1099,29 +1292,29 @@
   overflow-y: auto;
   padding: calc(var(--osdk-select-spacing, var(--osdk-surface-spacing)) * 1.5);
   box-sizing: border-box;
-  border-radius: var(--osdk-select-border-radius, var(--osdk-surface-border-radius));
+  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));
+  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));
+  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));
+  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));
+    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));
+    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;
@@ -1228,6 +1421,86 @@
   }
 }
 
+/* src/object-table/LoadingCell.module.css */
+.osdkLoadingCell {
+  height: var(--osdk-table-cell-fontSize);
+  border-radius: calc(var(--osdk-surface-border-radius) * 0.5);
+  flex: 1;
+}
+@keyframes skeleton-glow {
+  from {
+    background: var(--osdk-table-skeleton-color-from);
+    border-color: var(--osdk-table-skeleton-color-from);
+  }
+  to {
+    background: var(--osdk-table-skeleton-color-to);
+    border-color: var(--osdk-table-skeleton-color-to);
+  }
+}
+.osdkCellSkeleton {
+  animation: 1000ms linear infinite alternate skeleton-glow;
+  background: var(--osdk-table-skeleton-color-from);
+  background-clip: padding-box;
+  border-color: var(--osdk-table-skeleton-color-from);
+  border-radius: calc(var(--osdk-surface-border-radius) * 0.5);
+  border: 1px solid var(--osdk-table-skeleton-border-color);
+  box-shadow: none;
+  color: transparent;
+  cursor: default;
+  pointer-events: none;
+  user-select: none;
+}
+
+/* src/object-table/TableCell.module.css */
+.osdkTableCell {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  text-align: left;
+  position: relative;
+  padding: var(--osdk-table-cell-padding);
+  font-size: var(--osdk-table-cell-fontSize);
+  color: var(--osdk-table-cell-color);
+  background-color: inherit;
+  border-right: var(--osdk-table-cell-divider);
+  &:first-child {
+    border-left: var(--osdk-table-border);
+  }
+  &:last-child {
+    border-right: var(--osdk-table-border);
+  }
+}
+.osdkTableCell[data-pinned=left],
+.osdkTableCell[data-pinned=right] {
+  position: sticky;
+  z-index: var(--osdk-surface-z-index-1);
+  background-color: inherit;
+}
+.osdkTableCell[data-pinned=left]:not(:has(~ [data-pinned=left])) {
+  border-right: var(--osdk-table-pinned-column-border);
+}
+.osdkTableCell[data-pinned=right]:not(:has(~ [data-pinned=right]):nth-child(n+2)) {
+  border-left: var(--osdk-table-pinned-column-border);
+}
+.osdkTableCell:has([role=checkbox]) {
+  justify-content: center;
+  padding: 0;
+}
+.osdkTableCellContent:not(:has([role=checkbox])) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: left;
+  flex: 1;
+}
+.osdkCheckboxContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
 /* src/base-components/tooltip/Tooltip.module.css */
 .osdkTooltipTrigger {
   border: none;
@@ -1328,85 +1601,6 @@
   color: var(--osdk-intent-danger-rest);
 }
 
-/* src/object-table/LoadingCell.module.css */
-.osdkLoadingCell {
-  height: var(--osdk-table-cell-fontSize);
-  border-radius: calc(var(--osdk-surface-border-radius) * 0.5);
-  flex: 1;
-}
-@keyframes skeleton-glow {
-  from {
-    background: var(--osdk-table-skeleton-color-from);
-    border-color: var(--osdk-table-skeleton-color-from);
-  }
-  to {
-    background: var(--osdk-table-skeleton-color-to);
-    border-color: var(--osdk-table-skeleton-color-to);
-  }
-}
-.osdkCellSkeleton {
-  animation: 1000ms linear infinite alternate skeleton-glow;
-  background: var(--osdk-table-skeleton-color-from);
-  background-clip: padding-box;
-  border-color: var(--osdk-table-skeleton-color-from);
-  border-radius: calc(var(--osdk-surface-border-radius) * 0.5);
-  border: 1px solid var(--osdk-table-skeleton-border-color);
-  box-shadow: none;
-  color: transparent;
-  cursor: default;
-  pointer-events: none;
-  user-select: none;
-}
-
-/* src/object-table/TableCell.module.css */
-.osdkTableCell {
-  display: flex;
-  align-items: center;
-  height: 100%;
-  text-align: left;
-  position: relative;
-  padding: var(--osdk-table-cell-padding);
-  font-size: var(--osdk-table-cell-fontSize);
-  color: var(--osdk-table-cell-color);
-  background-color: inherit;
-  border-right: var(--osdk-table-cell-divider);
-  &:first-child {
-    border-left: var(--osdk-table-border);
-  }
-  &:last-child {
-    border-right: var(--osdk-table-border);
-  }
-}
-.osdkTableCell[data-pinned=left],
-.osdkTableCell[data-pinned=right] {
-  position: sticky;
-  z-index: var(--osdk-surface-z-index-1);
-  background-color: inherit;
-}
-.osdkTableCell[data-pinned=left]:not(:has(~ [data-pinned=left])) {
-  border-right: var(--osdk-table-pinned-column-border);
-}
-.osdkTableCell[data-pinned=right]:not(:has(~ [data-pinned=right]):nth-child(n+2)) {
-  border-left: var(--osdk-table-pinned-column-border);
-}
-.osdkTableCell:has([role=checkbox]) {
-  justify-content: center;
-  padding: 0;
-}
-.osdkTableCellContent:not(:has([role=checkbox])) {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  text-align: left;
-}
-.osdkCheckboxContainer {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-}
-
 /* src/object-table/TableRow.module.css */
 .osdkTableRow {
   position: absolute;
@@ -2288,4 +2482,335 @@
   background-color: var(--osdk-surface-border-color-default);
   align-self: center;
 }
+
+/* src/pdf-viewer/PdfViewer.module.css */
+.pdfViewer {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  background-color: var(--osdk-pdf-viewer-bg);
+  border: var(--osdk-pdf-viewer-border);
+  border-radius: var(--osdk-surface-border-radius);
+  overflow: hidden;
+  position: relative;
+}
+.contentArea {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+  position: relative;
+}
+.scrollContainerWrapper {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+}
+.scrollContainer {
+  overflow: auto;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+.loadingContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: calc(var(--osdk-surface-spacing) * 2);
+  height: 100%;
+  font-family: var(--osdk-typography-family-default);
+  font-size: var(--osdk-typography-size-body-medium);
+  color: var(--osdk-typography-color-muted);
+}
+.errorContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--osdk-surface-spacing);
+  height: 100%;
+  font-family: var(--osdk-typography-family-default);
+  font-size: var(--osdk-typography-size-body-medium);
+  color: var(--osdk-typography-color-danger-rest);
+}
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.spinnerIcon {
+  animation: spin 1s linear infinite;
+  color: var(--osdk-typography-color-muted);
+}
+.errorIcon {
+  flex-shrink: 0;
+}
+:global(.pdfViewer .page) {
+  box-shadow: var(--osdk-pdf-viewer-page-shadow);
+  background-color: var(--osdk-palette-white);
+  margin: 0 auto var(--osdk-pdf-viewer-page-gap);
+}
+:global(.textLayer) .highlight {
+  background-color: var(--osdk-pdf-viewer-search-highlight);
+  border-radius: 1px;
+}
+:global(.textLayer) .highlight.selected {
+  background-color: var(--osdk-pdf-viewer-search-active);
+}
+:global(.textLayer)::selection {
+  background: var(--osdk-intent-primary-rest);
+}
+
+/* src/pdf-viewer/PdfViewerAnnotationLayer.module.css */
+.annotationLayer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 3;
+}
+.annotation {
+  position: absolute;
+  pointer-events: auto;
+  cursor: pointer;
+  box-sizing: border-box;
+  transition: opacity var(--osdk-emphasis-transition-duration) var(--osdk-emphasis-ease-default);
+}
+.annotation:hover {
+  opacity: 0.8;
+}
+.annotation:focus-visible {
+  outline: var(--osdk-focus-outline);
+  outline-offset: var(--osdk-focus-visible-outline-offset);
+}
+.highlight {
+  background-color: var( --osdk-pdf-annotation-color, var(--osdk-pdf-viewer-annotation-highlight) );
+  border-radius: 2px;
+}
+.underline {
+  background-color: transparent;
+  border-bottom: 2px solid var( --osdk-pdf-annotation-color, var(--osdk-pdf-viewer-annotation-underline) );
+}
+.comment {
+  background-color: var( --osdk-pdf-annotation-color, var(--osdk-pdf-viewer-annotation-comment) );
+  border-radius: 50%;
+  width: 16px !important;
+  height: 16px !important;
+}
+.pin {
+  background-color: var( --osdk-pdf-annotation-color, var(--osdk-pdf-viewer-annotation-pin) );
+  border-radius: 50% 50% 50% 0;
+  width: 16px !important;
+  height: 16px !important;
+  transform: rotate(-45deg);
+}
+
+/* src/pdf-viewer/PdfViewerSearchBar.module.css */
+.searchBar {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: var(--osdk-surface-z-index-3);
+  display: flex;
+  align-items: center;
+  gap: var(--osdk-pdf-viewer-toolbar-gap);
+  padding: var(--osdk-surface-spacing);
+  background-color: var(--osdk-pdf-viewer-search-bar-bg);
+  border: var(--osdk-surface-border);
+  border-radius: var(--osdk-surface-border-radius);
+  box-shadow: var(--osdk-surface-shadow-2);
+  margin: var(--osdk-surface-spacing);
+}
+.searchInput {
+  border: var(--osdk-surface-border);
+  border-radius: var(--osdk-surface-border-radius);
+  padding: var(--osdk-surface-spacing) calc(var(--osdk-surface-spacing) * 2);
+  font-family: var(--osdk-typography-family-default);
+  font-size: var(--osdk-typography-size-body-small);
+  color: var(--osdk-typography-color-default-rest);
+  background-color: var(--osdk-background-primary);
+  outline: none;
+  min-width: 200px;
+}
+.searchInput:focus {
+  outline: var(--osdk-focus-outline);
+  outline-offset: var(--osdk-focus-visible-outline-offset);
+}
+.matchCount {
+  font-size: var(--osdk-typography-size-body-x-small);
+  color: var(--osdk-typography-color-muted);
+  white-space: nowrap;
+}
+.navButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: none;
+  color: var(--osdk-typography-color-default-rest);
+  cursor: pointer;
+  border-radius: var(--osdk-surface-border-radius);
+  padding: 0;
+}
+.navButton:hover {
+  background-color: var(--osdk-surface-background-color-default-hover);
+}
+.navButton:focus-visible {
+  outline: var(--osdk-focus-outline);
+  outline-offset: var(--osdk-focus-visible-outline-offset);
+}
+.closeButton {
+  composes: navButton;
+}
+
+/* src/pdf-viewer/PdfViewerSidebar.module.css */
+.sidebar {
+  width: var(--osdk-pdf-viewer-sidebar-width);
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--osdk-pdf-viewer-sidebar-bg);
+  border-right: 1px solid var(--osdk-pdf-viewer-sidebar-border);
+  overflow: hidden;
+}
+.sidebarHeader {
+  padding: var(--osdk-pdf-viewer-sidebar-thumbnail-gap);
+  font-family: var(--osdk-typography-family-default);
+  font-size: var(--osdk-typography-size-body-small);
+  font-weight: var(--osdk-typography-weight-semibold);
+  color: var(--osdk-typography-color-muted);
+  border-bottom: 1px solid var(--osdk-pdf-viewer-sidebar-border);
+  flex-shrink: 0;
+}
+.scrollContainer {
+  flex: 1;
+  overflow-y: auto;
+}
+.thumbnailsContainer {
+  position: relative;
+}
+.thumbnailWrapper {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  padding: var(--osdk-pdf-viewer-sidebar-thumbnail-gap) var(--osdk-pdf-viewer-sidebar-thumbnail-gap) 0;
+}
+.pageNumber {
+  text-align: center;
+  font-family: var(--osdk-typography-family-default);
+  font-size: var(--osdk-typography-size-body-small);
+  color: var(--osdk-typography-color-muted);
+  margin-top: 4px;
+}
+
+/* src/pdf-viewer/PdfViewerThumbnail.module.css */
+.thumbnailContainer {
+  position: relative;
+  cursor: pointer;
+  border: 2px solid transparent;
+  border-radius: var(--osdk-surface-border-radius);
+  box-shadow: var(--osdk-pdf-viewer-page-shadow);
+  overflow: hidden;
+  transition: border-color var(--osdk-emphasis-transition-duration) var(--osdk-emphasis-ease-default);
+}
+.thumbnailContainer:hover {
+  border-color: var(--osdk-pdf-viewer-sidebar-border);
+}
+.active {
+  border-color: var(--osdk-pdf-viewer-sidebar-active-border);
+}
+.active:hover {
+  border-color: var(--osdk-pdf-viewer-sidebar-active-border);
+}
+.canvas {
+  display: block;
+}
+
+/* src/pdf-viewer/PdfViewerToolbar.module.css */
+.toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--osdk-pdf-viewer-toolbar-gap);
+  padding: var(--osdk-surface-spacing);
+  background-color: var(--osdk-pdf-viewer-toolbar-bg);
+  border-bottom: var(--osdk-pdf-viewer-toolbar-border);
+  color: var(--osdk-pdf-viewer-toolbar-color);
+  font-family: var(--osdk-typography-family-default);
+  font-size: var(--osdk-typography-size-body-small);
+  flex-shrink: 0;
+}
+.toolbarGroup {
+  display: flex;
+  align-items: center;
+  gap: var(--osdk-surface-spacing);
+}
+.separator {
+  width: 1px;
+  height: 20px;
+  background-color: var(--osdk-surface-border-color-default);
+  margin: 0 var(--osdk-surface-spacing);
+}
+.toolbarButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  background: none;
+  color: var(--osdk-typography-color-default-rest);
+  cursor: pointer;
+  border-radius: var(--osdk-surface-border-radius);
+  padding: 0;
+}
+.toolbarButton:hover {
+  background-color: var(--osdk-surface-background-color-default-hover);
+}
+.toolbarButton:active {
+  background-color: var(--osdk-surface-background-color-default-active);
+}
+.toolbarButton:focus-visible {
+  outline: var(--osdk-focus-outline);
+  outline-offset: var(--osdk-focus-visible-outline-offset);
+}
+.toolbarButton:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.pageInput {
+  width: 48px;
+  text-align: center;
+  border: var(--osdk-surface-border);
+  border-radius: var(--osdk-surface-border-radius);
+  padding: calc(0.5 * var(--osdk-surface-spacing)) var(--osdk-surface-spacing);
+  font-family: var(--osdk-typography-family-default);
+  font-size: var(--osdk-typography-size-body-small);
+  color: var(--osdk-typography-color-default-rest);
+  background-color: var(--osdk-background-primary);
+}
+.pageInput:focus {
+  outline: var(--osdk-focus-outline);
+  outline-offset: var(--osdk-focus-visible-outline-offset);
+}
+.pageCount {
+  color: var(--osdk-typography-color-muted);
+}
+.scaleDisplay {
+  font-size: var(--osdk-typography-size-body-x-small);
+  color: var(--osdk-typography-color-muted);
+  min-width: 40px;
+  text-align: center;
+}
 /*# sourceMappingURL=experimental.css.map */