@osdk/react-components 0.2.0-beta.21 → 0.2.0-beta.23

package/build/cjs/public/experimental.css

@@ -158,6 +158,8 @@
   display: flex;
   flex-direction: column;
   gap: var(--osdk-filter-item-gap);
+  border-radius: var(--osdk-filter-item-border-radius);
+  padding: var(--osdk-filter-item-padding);
 }
 .itemHeader {
   display: flex;
@@ -173,6 +175,8 @@
 .itemContent {
   display: flex;
   flex-direction: column;
+  min-width: 0;
+  overflow: hidden;
 }
 .dragHandle {
   display: flex;
@@ -198,52 +202,111 @@
     outline-offset: var(--osdk-filter-input-focus-outline-offset);
   }
 }
-.excludeToggle {
+.headerActionButton {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: var(--osdk-filter-item-exclude-toggle-padding);
-  margin-left: auto;
+  padding: var(--osdk-filter-item-header-action-padding);
+  margin-left: calc(var(--osdk-surface-spacing) * 0.5);
   border: none;
   background: transparent;
   cursor: pointer;
-  border-radius: var(--osdk-filter-item-exclude-toggle-border-radius);
-  color: var(--osdk-filter-item-exclude-toggle-color);
+  border-radius: var(--osdk-filter-item-header-action-border-radius);
+  color: var(--osdk-filter-item-header-action-color);
+  opacity: 0;
+  transition: opacity var(--osdk-filter-header-button-transition), background-color var(--osdk-filter-header-button-transition);
   &:hover {
-    color: var(--osdk-filter-item-exclude-toggle-color-hover);
-    background: var(--osdk-filter-item-exclude-toggle-bg-hover);
+    color: var(--osdk-typography-color-default-rest);
+    background: var(--osdk-filter-item-header-action-bg-hover);
   }
   &:focus-visible {
+    opacity: 1;
     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;
+  }
+}
+.filterItem:hover .headerActionButton {
+  opacity: 1;
 }
-.excludeToggle[aria-pressed=true] {
-  color: var(--osdk-filter-item-exclude-toggle-color-active);
+.headerActionButton[data-popup-open],
+.headerActionButton[aria-pressed=true] {
+  opacity: 1;
 }
-.removeButton {
+.searchRow {
   display: flex;
   align-items: center;
-  justify-content: center;
-  padding: var(--osdk-filter-item-exclude-toggle-padding);
-  margin-left: var(--osdk-surface-spacing);
+  background: var(--osdk-filter-input-bg);
+  border: var(--osdk-filter-input-border);
+  border-radius: var(--osdk-filter-input-border-radius);
+  padding: var(--osdk-filter-input-padding);
+  gap: var(--osdk-filter-input-gap);
+  &:focus-within {
+    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);
+  }
+}
+.searchInput {
+  flex: 1;
   border: none;
   background: transparent;
+  font-family: var(--osdk-filter-input-font-family);
+  font-size: var(--osdk-filter-input-font-size);
+  color: var(--osdk-filter-input-color);
+  outline: none;
+  &::placeholder {
+    color: var(--osdk-filter-input-placeholder-color);
+  }
+}
+.searchClearButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--osdk-filter-input-clear-padding);
+  border: none;
+  background: var(--osdk-filter-input-clear-bg);
+  color: var(--osdk-filter-input-icon-color);
   cursor: pointer;
-  border-radius: var(--osdk-filter-item-exclude-toggle-border-radius);
-  color: var(--osdk-filter-item-exclude-toggle-color);
+  border-radius: var(--osdk-filter-input-clear-border-radius);
+  transition: background-color var(--osdk-filter-input-transition);
   &:hover {
-    color: var(--osdk-filter-item-exclude-toggle-color-hover);
-    background: var(--osdk-filter-item-exclude-toggle-bg-hover);
+    background: var(--osdk-filter-input-clear-bg-hover);
+  }
+  &:active {
+    background: var(--osdk-filter-input-clear-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;
+  }
+}
+.excludeRow {
+  display: flex;
+  align-items: center;
+  opacity: 0;
+  height: 0;
+  overflow: hidden;
+  transition: opacity var(--osdk-filter-header-button-transition), height var(--osdk-filter-header-button-transition);
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}
+.filterItem:hover [data-exclude-row],
+.excludeRowVisible {
+  opacity: 1;
+  height: auto;
+  overflow: visible;
 }
-.filterItem[data-excluding] {
-  border-left: var(--osdk-filter-item-exclude-border-width) solid var(--osdk-filter-item-exclude-border-color);
-  padding-left: var(--osdk-filter-item-gap);
+.excludeCountLabel {
+  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);
+  margin-left: calc(var(--osdk-surface-spacing) * 0.5);
 }
 .dragging {
   opacity: var(--osdk-filter-item-dragging-opacity);
@@ -479,7 +542,6 @@
   width: var(--osdk-switch-track-width);
   height: var(--osdk-switch-track-height);
   padding: 0;
-  box-sizing: border-box;
   cursor: pointer;
   border-radius: var(--osdk-switch-border-radius, var(--osdk-surface-border-radius));
   position: relative;
@@ -556,7 +618,6 @@
   min-width: calc(var(--osdk-checkbox-icon-size) + var(--osdk-checkbox-padding) * 2);
   min-height: calc(var(--osdk-checkbox-icon-size) + var(--osdk-checkbox-padding) * 2);
   padding: var(--osdk-checkbox-padding);
-  box-sizing: border-box;
   cursor: pointer;
   border-radius: var(--osdk-surface-border-radius);
   border: var(--osdk-checkbox-border);
@@ -585,9 +646,6 @@
   }
 }
 .osdkCheckboxIndicator {
-  display: flex;
-  justify-content: center;
-  align-items: center;
   color: var(--osdk-checkbox-checked-foreground);
   width: var(--osdk-checkbox-icon-size);
   height: var(--osdk-checkbox-icon-size);
@@ -961,7 +1019,6 @@
   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: 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) );
@@ -980,7 +1037,6 @@
   flex: 1;
   min-width: 0;
   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));
@@ -1021,7 +1077,6 @@
   max-height: var(--available-height);
   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: 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) );
@@ -1220,7 +1275,6 @@
   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);
-  box-sizing: border-box;
   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));
@@ -1291,7 +1345,6 @@
   max-height: var(--available-height);
   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: 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) );
@@ -1421,34 +1474,88 @@
   }
 }
 
+/* src/filter-list/base/ExcludeDropdown.module.css */
+.excludeDropdownContainer {
+  display: flex;
+  align-items: center;
+}
+.trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--osdk-surface-spacing) * 0.5);
+  border: none;
+  background: transparent;
+  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);
+  &:hover {
+    background: var(--osdk-filter-item-header-action-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);
+  }
+}
+.triggerLabel {
+  white-space: nowrap;
+}
+.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);
+  min-width: var(--osdk-filter-item-exclude-dropdown-min-width);
+}
+.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);
+  }
+}
+.menuItemCheck {
+  display: flex;
+  align-items: center;
+  width: var(--osdk-filter-item-menu-check-size);
+  flex-shrink: 0;
+}
+
 /* 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);
+.osdkCellSkeleton.osdkCellSkeleton {
+  --osdk-background-skeleton-from: var(--osdk-table-skeleton-color-from);
+  --osdk-background-skeleton-to: var(--osdk-table-skeleton-color-to);
   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 */
@@ -1467,7 +1574,7 @@
     border-left: var(--osdk-table-border);
   }
   &:last-child {
-    border-right: var(--osdk-table-border);
+    border-right: none;
   }
 }
 .osdkTableCell[data-pinned=left],
@@ -1833,8 +1940,8 @@
 .searchBar {
   display: flex;
   align-items: center;
-  gap: var(--osdk-surface-spacing);
-  padding: var(--osdk-surface-spacing) calc(var(--osdk-surface-spacing) * 1.5);
+  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 {
@@ -2138,7 +2245,6 @@
 .addIcon {
   width: var(--osdk-iconography-size-small);
   height: var(--osdk-iconography-size-small);
-  color: currentColor;
 }
 .addColumnText {
   flex: 1;
@@ -2223,6 +2329,7 @@
   display: flex;
   width: max-content;
   min-width: 100%;
+  border-top: var(--osdk-table-border);
   border-bottom: var(--osdk-table-border);
 }
 .osdkTableHeaderCell {
@@ -2234,14 +2341,13 @@
   font-weight: var(--osdk-table-header-fontWeight);
   font-size: var(--osdk-table-header-fontSize);
   color: var(--osdk-table-header-color);
-  border-top: var(--osdk-table-border);
   border-right: var(--osdk-table-header-divider);
   background-color: inherit;
   &:first-child {
     border-left: var(--osdk-table-border);
   }
   &:last-child {
-    border-right: var(--osdk-table-border);
+    border-right: none;
   }
 }
 .osdkTableHeaderCell[data-pinned=left],
@@ -2354,6 +2460,7 @@
 .osdkHeaderIcon {
   width: var(--osdk-iconography-size-small);
   height: var(--osdk-iconography-size-small);
+  color: var(--osdk-table-header-menu-icon-color);
 }
 .osdkHeaderPopup {
   box-sizing: border-box;
@@ -2483,90 +2590,7 @@
   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 */
+/* src/pdf-viewer/components/PdfViewerAnnotationLayer.module.css */
 .annotationLayer {
   position: absolute;
   top: 0;
@@ -2580,7 +2604,6 @@
   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 {
@@ -2612,29 +2635,155 @@
   transform: rotate(-45deg);
 }
 
-/* src/pdf-viewer/PdfViewerSearchBar.module.css */
-.searchBar {
-  position: absolute;
-  top: 0;
-  right: 0;
-  z-index: var(--osdk-surface-z-index-3);
+/* src/pdf-viewer/components/PdfViewerOutlineSidebar.module.css */
+.sidebar {
+  width: var(--osdk-pdf-viewer-sidebar-width);
+  flex-shrink: 0;
   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);
+  flex-direction: column;
+  background-color: var(--osdk-pdf-viewer-sidebar-bg);
+  border-right: 1px solid var(--osdk-pdf-viewer-sidebar-border);
+  overflow: hidden;
 }
-.searchInput {
-  border: var(--osdk-surface-border);
-  border-radius: var(--osdk-surface-border-radius);
-  padding: var(--osdk-surface-spacing) calc(var(--osdk-surface-spacing) * 2);
+.scrollContainer {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--osdk-pdf-viewer-sidebar-thumbnail-gap) 0;
+}
+.outlineItem {
+  display: flex;
+  align-items: center;
+  gap: var(--osdk-pdf-viewer-outline-item-gap, 6px);
+  padding: var(--osdk-pdf-viewer-outline-item-padding-y, 4px) var(--osdk-pdf-viewer-outline-item-padding-x, 12px);
+  cursor: pointer;
   font-family: var(--osdk-typography-family-default);
   font-size: var(--osdk-typography-size-body-small);
-  color: var(--osdk-typography-color-default-rest);
+  color: var(--osdk-typography-color-default);
+  text-decoration: none;
+  border: none;
+  background: none;
+  text-align: left;
+  width: 100%;
+  line-height: 1.4;
+  border-radius: var(--osdk-pdf-viewer-outline-item-radius, 4px);
+  transition: background-color 0.15s ease;
+}
+.outlineItem:hover {
+  background-color: var(--osdk-pdf-viewer-outline-item-hover-bg, rgba(0, 0, 0, 0.06));
+}
+.outlineItem:focus-visible {
+  outline: var(--osdk-focus-outline);
+  outline-offset: var(--osdk-focus-visible-outline-offset);
+}
+.outlineItemActive {
+  background-color: var(--osdk-pdf-viewer-outline-item-active-bg, rgba(45, 114, 210, 0.1));
+  color: var(--osdk-pdf-viewer-outline-item-active-color, var(--osdk-intent-primary));
+  font-weight: var(--osdk-typography-weight-semibold);
+}
+.outlineItemBold {
+  font-weight: var(--osdk-typography-weight-bold);
+}
+.outlineItemItalic {
+  font-style: italic;
+}
+.outlineItemIcon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+.outlineItemTitle {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.emptyState {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--osdk-pdf-viewer-outline-empty-gap, 12px);
+  padding: var(--osdk-pdf-viewer-outline-empty-padding, 24px);
+  flex: 1;
+  text-align: center;
+}
+.emptyStateText {
+  font-family: var(--osdk-typography-family-default);
+  font-size: var(--osdk-typography-size-body-small);
+  color: var(--osdk-typography-color-muted);
+}
+
+/* src/pdf-viewer/components/PdfViewerSidebarHeader.module.css */
+.sidebarHeader {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: var(--osdk-surface-spacing);
+  border-bottom: var(--osdk-pdf-viewer-sidebar-border);
+  flex-shrink: 0;
+}
+.toggleGroup {
+  display: flex;
+  align-items: center;
+  gap: var(--osdk-spacing-2xs, 2px);
+  padding: var(--osdk-spacing-2xs, 2px);
+  border: 1px solid var(--osdk-surface-border-color, rgba(0, 0, 0, 0.15));
+  border-radius: var(--osdk-surface-border-radius);
+  background-color: var(--osdk-surface-background-color, transparent);
+}
+.modeButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  background: none;
+  color: var(--osdk-typography-color-muted);
+  cursor: pointer;
+  border-radius: var(--osdk-surface-border-radius);
+  padding: 0;
+}
+.modeButton:hover {
+  background-color: var(--osdk-surface-background-color-default-hover);
+}
+.modeButton:active {
+  background-color: var(--osdk-surface-background-color-default-active);
+}
+.modeButton:focus-visible {
+  outline: var(--osdk-focus-outline);
+  outline-offset: var(--osdk-focus-visible-outline-offset);
+}
+.modeButton[data-pressed] {
+  background-color: var(--osdk-pdf-viewer-outline-item-active-bg, rgba(45, 114, 210, 0.1));
+  color: var(--osdk-pdf-viewer-outline-item-active-color, var(--osdk-intent-primary));
+}
+.modeButton[data-pressed]:hover {
+  background-color: var(--osdk-pdf-viewer-outline-item-active-bg, rgba(45, 114, 210, 0.1));
+}
+
+/* src/pdf-viewer/components/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;
@@ -2672,7 +2821,7 @@
   composes: navButton;
 }
 
-/* src/pdf-viewer/PdfViewerSidebar.module.css */
+/* src/pdf-viewer/components/PdfViewerSidebar.module.css */
 .sidebar {
   width: var(--osdk-pdf-viewer-sidebar-width);
   flex-shrink: 0;
@@ -2682,15 +2831,6 @@
   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;
@@ -2714,7 +2854,7 @@
   margin-top: 4px;
 }
 
-/* src/pdf-viewer/PdfViewerThumbnail.module.css */
+/* src/pdf-viewer/components/PdfViewerThumbnail.module.css */
 .thumbnailContainer {
   position: relative;
   cursor: pointer;
@@ -2737,7 +2877,7 @@
   display: block;
 }
 
-/* src/pdf-viewer/PdfViewerToolbar.module.css */
+/* src/pdf-viewer/components/PdfViewerToolbar.module.css */
 .toolbar {
   display: flex;
   align-items: center;
@@ -2770,7 +2910,7 @@
   height: 28px;
   border: none;
   background: none;
-  color: var(--osdk-typography-color-default-rest);
+  color: var(--osdk-typography-color-muted);
   cursor: pointer;
   border-radius: var(--osdk-surface-border-radius);
   padding: 0;
@@ -2808,9 +2948,347 @@
   color: var(--osdk-typography-color-muted);
 }
 .scaleDisplay {
-  font-size: var(--osdk-typography-size-body-x-small);
+  font-size: var(--osdk-typography-size-body-small);
   color: var(--osdk-typography-color-muted);
   min-width: 40px;
   text-align: 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/action-form/BaseForm.module.css */
+.osdkForm {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.osdkFormFields {
+  display: flex;
+  flex-direction: column;
+  gap: var(--osdk-form-field-gap);
+  padding: var(--osdk-form-content-padding);
+}
+.osdkFormFooter {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  border-top: var(--osdk-surface-border-width) solid var(--osdk-form-footer-border-color);
+  padding-block: var(--osdk-form-content-padding);
+  padding-inline: var(--osdk-form-content-padding);
+}
+
+/* src/action-form/FormField.module.css */
+.osdkFormField {
+  display: flex;
+  flex-direction: column;
+  gap: var(--osdk-form-label-field-gap);
+}
+.osdkFormFieldLabel {
+  font-size: var(--osdk-form-label-font-size);
+  font-weight: var(--osdk-form-label-font-weight);
+  color: var(--osdk-form-label-color);
+}
+.osdkFormFieldRequired {
+  color: var(--osdk-form-required-color);
+}
+.osdkFormFieldError {
+  font-size: var(--osdk-form-error-font-size);
+  color: var(--osdk-form-error-color);
+}
+.osdkFormFieldHelperText {
+  font-size: var(--osdk-typography-size-body-small);
+  color: var(--osdk-typography-color-muted);
+}
+
+/* src/action-form/fields/DatetimePickerField.module.css */
+.triggerButton {
+  width: 100%;
+  text-align: left;
+  font-family: var(--osdk-datetime-input-font-family);
+  font-size: var(--osdk-datetime-input-font-size);
+  padding: var(--osdk-datetime-input-padding);
+  border: var(--osdk-datetime-input-border);
+  border-radius: var(--osdk-datetime-input-border-radius);
+  background: var(--osdk-datetime-input-bg);
+  color: var(--osdk-datetime-input-color);
+  cursor: pointer;
+  box-sizing: border-box;
+  &:focus-visible {
+    border-color: var(--osdk-datetime-input-focus-border-color);
+    outline: var(--osdk-datetime-input-focus-outline);
+    outline-offset: var(--osdk-datetime-input-focus-outline-offset);
+  }
+}
+.triggerButtonPlaceholder {
+  color: var(--osdk-datetime-input-placeholder-color, currentColor);
+  opacity: var(--osdk-datetime-input-placeholder-opacity);
+}
+.popover {
+  background: var(--osdk-datetime-popover-bg);
+  padding: var(--osdk-datetime-popover-padding);
+  z-index: var(--osdk-datetime-popover-z-index);
+  border: var(--osdk-datetime-popover-border);
+  border-radius: var(--osdk-datetime-popover-border-radius);
+}
+.timeFooter {
+  padding-top: var(--osdk-datetime-time-padding-top);
+  padding-left: var(--osdk-datetime-popover-padding);
+  padding-right: var(--osdk-datetime-popover-padding);
+  border-top: var(--osdk-datetime-time-border-top);
+  margin-top: var(--osdk-datetime-time-padding-top);
+  margin-left: calc(var(--osdk-datetime-popover-padding) * -1);
+  margin-right: calc(var(--osdk-datetime-popover-padding) * -1);
+}
+.timeInput {
+  width: 100%;
+  font-family: var(--osdk-datetime-input-font-family);
+  font-size: var(--osdk-datetime-input-font-size);
+  padding: var(--osdk-datetime-input-padding);
+  border: var(--osdk-datetime-input-border);
+  border-radius: var(--osdk-datetime-input-border-radius);
+  background: var(--osdk-datetime-input-bg);
+  color: var(--osdk-datetime-input-color);
+  box-sizing: border-box;
+  &:focus {
+    border-color: var(--osdk-datetime-input-focus-border-color);
+    outline: var(--osdk-datetime-input-focus-outline);
+    outline-offset: var(--osdk-datetime-input-focus-outline-offset);
+  }
+}
+
+/* src/action-form/fields/DateCalendar.module.css */
+.calendar {
+  position: relative;
+  width: 100%;
+  font-family: var(--osdk-datetime-calendar-font-family);
+  font-size: var(--osdk-datetime-calendar-font-size);
+}
+.calendarMonths {
+  display: flex;
+}
+.calendarMonthGrid {
+  width: 100%;
+  border-collapse: collapse;
+}
+.calendarWeekday {
+  padding: var(--osdk-datetime-calendar-gap);
+  font-size: var(--osdk-datetime-calendar-weekday-font-size);
+  color: var(--osdk-datetime-calendar-weekday-color);
+  text-align: center;
+  width: var(--osdk-datetime-calendar-cell-size);
+}
+.calendarDay {
+  padding: var(--osdk-datetime-calendar-gap);
+  text-align: center;
+}
+.calendarDayButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--osdk-datetime-calendar-cell-size);
+  height: var(--osdk-datetime-calendar-cell-size);
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: var(--osdk-datetime-calendar-day-border-radius);
+  font: inherit;
+  color: inherit;
+  &:hover {
+    background: var(--osdk-datetime-calendar-day-hover-bg);
+  }
+  &:active {
+    background: var(--osdk-datetime-calendar-day-active-bg);
+  }
+}
+.calendarSelected .calendarDayButton {
+  background: var(--osdk-datetime-calendar-selected-bg);
+  color: var(--osdk-datetime-calendar-selected-color);
+  &:hover {
+    background: var(--osdk-datetime-calendar-selected-hover-bg);
+  }
+}
+.calendarToday .calendarDayButton {
+  font-weight: var(--osdk-datetime-calendar-today-font-weight);
+}
+.calendarOutside .calendarDayButton {
+  color: var(--osdk-datetime-calendar-outside-color);
+}
+.calendarDisabled .calendarDayButton {
+  color: var(--osdk-datetime-calendar-disabled-color);
+  cursor: default;
+  &:hover {
+    background: transparent;
+  }
+}
+.calendarHidden {
+  visibility: hidden;
+}
+.calendarNav {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  pointer-events: none;
+}
+.calendarNavButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--osdk-datetime-calendar-nav-button-size);
+  height: var(--osdk-datetime-calendar-nav-button-size);
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: var(--osdk-datetime-calendar-nav-button-border-radius);
+  padding: 0;
+  pointer-events: auto;
+  &:hover {
+    background: var(--osdk-datetime-calendar-nav-button-hover-bg);
+  }
+}
+.calendarMonthCaption {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: var(--osdk-datetime-calendar-nav-button-size);
+}
+.calendarCaptionLabel {
+  font-size: var(--osdk-datetime-calendar-caption-font-size);
+  font-weight: var(--osdk-datetime-calendar-caption-font-weight);
+}
+.calendarChevron {
+  width: var(--osdk-datetime-calendar-chevron-size);
+  height: var(--osdk-datetime-calendar-chevron-size);
+  fill: currentColor;
+}
+.calendarFallback {
+  width: var(--osdk-datetime-calendar-fallback-width);
+  height: var(--osdk-datetime-calendar-fallback-height);
+}
+
+/* src/action-form/fields/TextInputField.module.css */
+.osdkTextInput {
+  display: block;
+  width: 100%;
+  min-height: var(--osdk-input-min-height);
+  padding: var(--osdk-input-padding);
+  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);
+  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) );
+  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);
+  &::placeholder {
+    color: var(--osdk-input-placeholder-color);
+  }
+  &:hover {
+    background-color: var(--osdk-input-bg-hover);
+  }
+  &:focus-visible {
+    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);
+  }
+  &:disabled {
+    cursor: not-allowed;
+    opacity: var(--osdk-input-disabled-opacity);
+  }
+}
+
+/* src/action-form/FormHeader.module.css */
+.osdkFormHeader {
+  margin: 0;
+  padding-block: var(--osdk-form-header-block-padding);
+  padding-inline: var(--osdk-form-header-inline-padding);
+  border-bottom: var(--osdk-surface-border-width) solid var(--osdk-form-header-border-color);
+  font-size: var(--osdk-form-header-font-size);
+  font-weight: var(--osdk-form-header-font-weight);
+  color: var(--osdk-form-header-color);
+}
 /*# sourceMappingURL=experimental.css.map */