@osdk/react-components 0.2.0-beta.14 → 0.2.0-beta.16

package/build/browser/styles.css

@@ -24,10 +24,6 @@
   font-size: var(--osdk-typography-size-body-medium);
   cursor: pointer;
 
-  &:focus {
-    outline: none;
-  }
-
   &:focus-visible {
     outline: var(--osdk-focus-outline);
     outline-offset: var(--osdk-focus-visible-outline-offset);
@@ -131,10 +127,6 @@
     }
   }
 
-  &:focus {
-    outline: none;
-  }
-
   &:focus-visible {
     outline: var(--osdk-focus-outline);
     outline-offset: calc(-1 * var(--osdk-focus-visible-outline-offset));
@@ -374,10 +366,6 @@
   z-index: var(--osdk-surface-z-index-2);
   display: flex;
   flex-direction: column;
-
-  &:focus {
-    outline: none;
-  }
 }
 
 .Dialog-module__header___uvnNEIbj {
@@ -422,10 +410,6 @@
     background-color: var(--osdk-surface-background-color-default-hover);
   }
 
-  &:focus {
-    outline: none;
-  }
-
   &:focus-visible {
     outline: var(--osdk-focus-outline);
     outline-offset: var(--osdk-focus-visible-outline-offset);
@@ -493,10 +477,6 @@
     cursor: var(--osdk-drag-handle-cursor-active);
   }
 
-  &:focus {
-    outline: none;
-  }
-
   &:focus-visible {
     outline: var(--osdk-focus-outline);
     outline-offset: var(--osdk-focus-visible-outline-offset);
@@ -532,10 +512,6 @@
     );
   }
 
-  &:focus {
-    outline: none;
-  }
-
   &:focus-visible {
     outline: var(--osdk-focus-outline);
     outline-offset: var(--osdk-focus-visible-outline-offset);
@@ -868,13 +844,34 @@
   gap: var(--osdk-filter-list-gap);
 }
 
+.FilterList-module__contentWrapper___Y8k76Dtw {
+  display: grid;
+  grid-template-rows: 1fr;
+  transition: grid-template-rows var(--osdk-filter-list-collapse-transition);
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}
+
+.FilterList-module__contentWrapper___Y8k76Dtw[data-collapsed="true"] {
+  grid-template-rows: 0fr;
+}
+
+.FilterList-module__contentInner___5St4fWIE {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  gap: var(--osdk-filter-list-gap);
+}
+
 .FilterList-module__addButtonContainer___kq300FEV {
   display: flex;
   justify-content: center;
   position: sticky;
   bottom: 0;
   padding-top: var(--osdk-filter-list-addButton-padding-top);
-  background: var(--osdk-filter-list-addButton-container-bg, var(--osdk-filter-list-bg));
+  background: var(--osdk-filter-list-addButton-container-bg);
 }
 
 .FilterList-module__addButtonContainer___kq300FEV > * {
@@ -1042,10 +1039,34 @@
   }
 }
 
-.FilterListHeader-module__collapseIcon___P4YOgKig[data-collapsed="true"] {
+.FilterListHeader-module__collapsed___RKg0zje4 {
   transform: rotate(-135deg);
 }
 
+.FilterListHeader-module__headerContentWrapper___Jb48M86S {
+  display: grid;
+  grid-template-columns: 1fr;
+  overflow: hidden;
+  transition: grid-template-columns var(--osdk-filter-list-collapse-transition);
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}
+
+.FilterListHeader-module__headerContentWrapper___Jb48M86S[data-collapsed="true"] {
+  grid-template-columns: 0fr;
+}
+
+.FilterListHeader-module__headerContentInner___d2-TGJNm {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex: 1;
+  overflow: hidden;
+  min-width: 0;
+}
+
 .FilterListHeader-module__resetButton___jLcUypov {
   font-family: var(--osdk-filter-header-font-family);
   font-size: var(--osdk-filter-header-reset-font-size);
@@ -1106,6 +1127,7 @@
 }
 
 .FilterListItem-module__itemLabel___cEnbqE59 {
+  flex: 1;
   font-family: var(--osdk-filter-item-label-font-family);
   font-size: var(--osdk-filter-item-label-font-size);
   font-weight: var(--osdk-filter-item-label-font-weight);
@@ -1140,11 +1162,66 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--osdk-filter-item-drag-handle-focus-outline-color);
-    outline-offset: 2px;
+    outline: var(--osdk-filter-input-focus-outline-width) solid var(--osdk-filter-item-drag-handle-focus-outline-color);
+    outline-offset: var(--osdk-filter-input-focus-outline-offset);
   }
 }
 
+.FilterListItem-module__excludeToggle___nWNDvntP {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--osdk-filter-item-exclude-toggle-padding);
+  margin-left: auto;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: var(--osdk-filter-item-exclude-toggle-border-radius);
+  color: var(--osdk-filter-item-exclude-toggle-color);
+
+  &:hover {
+    color: var(--osdk-filter-item-exclude-toggle-color-hover);
+    background: var(--osdk-filter-item-exclude-toggle-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);
+  }
+}
+
+.FilterListItem-module__excludeToggle___nWNDvntP[aria-pressed="true"] {
+  color: var(--osdk-filter-item-exclude-toggle-color-active);
+}
+
+.FilterListItem-module__removeButton___72cjHbqK {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--osdk-filter-item-exclude-toggle-padding);
+  margin-left: var(--osdk-surface-spacing);
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: var(--osdk-filter-item-exclude-toggle-border-radius);
+  color: var(--osdk-filter-item-exclude-toggle-color);
+
+  &:hover {
+    color: var(--osdk-filter-item-exclude-toggle-color-hover);
+    background: var(--osdk-filter-item-exclude-toggle-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);
+  }
+}
+
+.FilterListItem-module__filterItem___fDBkbb7u[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);
+}
+
 .FilterListItem-module__dragging___S5-LGyfS {
   opacity: var(--osdk-filter-item-dragging-opacity);
 }
@@ -1177,6 +1254,12 @@
   padding: var(--osdk-filter-checkbox-row-padding);
 }
 
+.CheckboxListInput-module__checkboxRow___ga-mvL9m[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;
+}
+
 .CheckboxListInput-module__checkboxLabel___iFH7C6-U {
   display: flex;
   align-items: center;
@@ -1194,6 +1277,13 @@
   white-space: nowrap;
 }
 
+.CheckboxListInput-module__colorDot___AdQXW5K- {
+  width: var(--osdk-filter-checkbox-color-dot-size);
+  height: var(--osdk-filter-checkbox-color-dot-size);
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
 
 /* filter-list/base/inputs/ContainsTextInput.module.css */
 /*
@@ -1337,40 +1427,41 @@
 .ListogramInput-module__container___hMngsxor {
   display: flex;
   flex-direction: column;
-  gap: var(--osdk-filter-listogram-gap, calc(var(--osdk-surface-spacing) * 1));
+  gap: var(--osdk-filter-listogram-gap);
 }
 
 .ListogramInput-module__row___rps-rpjo {
   display: flex;
   align-items: center;
-  gap: var(--osdk-filter-listogram-row-gap, calc(var(--osdk-surface-spacing) * 2));
-  padding: var(--osdk-filter-listogram-row-padding, calc(var(--osdk-surface-spacing) * 1));
+  gap: var(--osdk-filter-listogram-row-gap);
+  padding: var(--osdk-filter-listogram-row-padding);
   border: none;
   background: transparent;
   cursor: pointer;
-  border-radius: var(--osdk-surface-border-radius);
+  border-radius: var(--osdk-filter-listogram-row-border-radius);
   text-align: left;
   width: 100%;
-  transition: background-color var(--osdk-emphasis-transition-duration) var(--osdk-emphasis-ease-default);
+  transition: background-color var(--osdk-filter-listogram-row-transition);
 
   &:hover {
-    background: var(--osdk-surface-background-color-default-hover);
+    background: var(--osdk-filter-listogram-row-bg-hover);
   }
 
   &:focus-visible {
-    outline: var(--osdk-emphasis-focus-width) solid var(--osdk-emphasis-focus-color);
-    outline-offset: var(--osdk-emphasis-focus-offset);
+    outline: var(--osdk-filter-listogram-row-focus-outline);
+    outline-offset: var(--osdk-filter-listogram-row-focus-offset);
   }
 }
 
 .ListogramInput-module__row___rps-rpjo[aria-pressed="true"] {
-  background: var(--osdk-surface-background-color-default-active);
+  background: var(--osdk-filter-listogram-row-bg-active);
 }
 
 .ListogramInput-module__label___hQ3nLEpx {
   flex: 1;
-  font-size: var(--osdk-typography-size-body-medium);
-  color: var(--osdk-typography-color-default-rest);
+  font-family: var(--osdk-filter-listogram-label-font-family);
+  font-size: var(--osdk-filter-listogram-label-font-size);
+  color: var(--osdk-filter-listogram-label-color);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -1378,26 +1469,31 @@
 
 .ListogramInput-module__bar___iUqTfYSm {
   flex: 2;
-  height: var(--osdk-filter-listogram-bar-height, 8px);
-  background: var(--osdk-custom-color-gray-2);
-  border-radius: var(--osdk-surface-border-radius);
+  height: var(--osdk-filter-listogram-bar-height);
+  background: var(--osdk-filter-listogram-bar-bg);
+  border-radius: var(--osdk-filter-listogram-bar-border-radius);
   overflow: hidden;
 }
 
 .ListogramInput-module__barFill___za7KWtcm {
+  display: block;
   height: 100%;
-  background: var(--osdk-filter-listogram-bar-color);
-  transition: width var(--osdk-emphasis-transition-duration) var(--osdk-emphasis-ease-default);
+  width: 100%;
+  background: var(--osdk-filter-listogram-row-bar-color, var(--osdk-filter-listogram-bar-color));
+  transform-origin: left;
+  transform: scaleX(var(--osdk-filter-listogram-bar-fill-scale, 0));
+  transition: transform var(--osdk-filter-listogram-bar-fill-transition);
 }
 
 .ListogramInput-module__row___rps-rpjo[aria-pressed="true"] .ListogramInput-module__barFill___za7KWtcm {
-  background: var(--osdk-filter-listogram-selected-color);
+  background: var(--osdk-filter-listogram-row-bar-color, var(--osdk-filter-listogram-selected-color));
 }
 
 .ListogramInput-module__count___81M2s4eq {
-  font-size: var(--osdk-typography-size-body-small);
+  font-family: var(--osdk-filter-listogram-count-font-family);
+  font-size: var(--osdk-filter-listogram-count-font-size);
   font-variant-numeric: tabular-nums;
-  color: var(--osdk-typography-color-muted);
+  color: var(--osdk-filter-listogram-count-color);
   min-width: 3ch;
   text-align: right;
 }
@@ -1427,12 +1523,13 @@
 }
 
 .MultiDateInput-module__clearAll___D8NKeHuy {
-  font-size: var(--osdk-typography-size-body-small);
-  color: var(--osdk-intent-primary-rest);
+  font-family: var(--osdk-filter-date-clear-font-family);
+  font-size: var(--osdk-filter-date-clear-font-size);
+  color: var(--osdk-filter-date-clear-color);
   background: transparent;
   border: none;
   cursor: pointer;
-  padding: calc(var(--osdk-surface-spacing) * 0.5);
+  padding: var(--osdk-filter-date-clear-padding);
 
   &:hover {
     text-decoration: underline;
@@ -1445,7 +1542,8 @@
 
 .MultiDateInput-module__input___TcOQZD9Z {
   flex: 1;
-  font-size: var(--osdk-typography-size-body-medium);
+  font-family: var(--osdk-filter-input-font-family);
+  font-size: var(--osdk-filter-timeline-input-font-size);
   padding: var(--osdk-filter-input-padding);
   border: var(--osdk-filter-input-border);
   border-radius: var(--osdk-filter-input-border-radius);
@@ -1493,8 +1591,11 @@
   flex-shrink: 0;
 }
 
-.MultiSelectInput-module__count___QykG01go {
+.MultiSelectInput-module__itemCount___YAf51fvo {
+  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);
 }
 
 
@@ -1544,9 +1645,10 @@
 }
 
 .NullValueWrapper-module__count___-Rsq7EuS {
-  font-size: var(--osdk-typography-size-body-small);
+  font-family: var(--osdk-filter-null-count-font-family);
+  font-size: var(--osdk-filter-null-count-font-size);
   font-variant-numeric: tabular-nums;
-  color: var(--osdk-typography-color-muted);
+  color: var(--osdk-filter-null-count-color);
 }
 
 
@@ -1570,47 +1672,49 @@
 .RangeInput-module__rangeInput___5IlnpUfs {
   display: flex;
   flex-direction: column;
-  gap: var(--osdk-filter-range-gap, calc(var(--osdk-surface-spacing) * 2));
+  gap: var(--osdk-filter-range-gap);
 }
 
 .RangeInput-module__histogramContainer___suD4IT5D {
   display: flex;
   align-items: flex-end;
-  height: var(--osdk-filter-range-histogram-height, 60px);
-  gap: var(--osdk-filter-range-histogram-bar-gap, 2px);
+  height: var(--osdk-filter-range-histogram-height);
+  gap: var(--osdk-filter-range-histogram-bar-gap);
 }
 
 .RangeInput-module__histogramBar___togsImv0 {
   flex: 1;
-  background: var(--osdk-filter-range-histogram-bar-color, var(--osdk-custom-color-gray-3));
-  min-width: var(--osdk-filter-range-histogram-bar-min-width, 4px);
-  transition: background-color var(--osdk-emphasis-transition-duration) var(--osdk-emphasis-ease-default);
+  background: var(--osdk-filter-range-histogram-bar-color);
+  min-width: var(--osdk-filter-range-histogram-bar-min-width);
+  transition: background-color var(--osdk-filter-range-histogram-bar-transition);
 }
 
 .RangeInput-module__histogramBar___togsImv0[data-in-range="true"] {
-  background: var(--osdk-filter-range-histogram-bar-active-color, var(--osdk-intent-primary-rest));
+  background: var(--osdk-filter-range-histogram-bar-active-color);
 }
 
 .RangeInput-module__rangeInputs___6f6mnjwL {
   display: flex;
   align-items: flex-end;
-  gap: var(--osdk-filter-range-inputs-gap, calc(var(--osdk-surface-spacing) * 2));
+  gap: var(--osdk-filter-range-inputs-gap);
 }
 
 .RangeInput-module__inputWrapper___1sk8iEjt {
   flex: 1;
   display: flex;
   flex-direction: column;
-  gap: var(--osdk-filter-range-input-wrapper-gap, calc(var(--osdk-surface-spacing) * 1));
+  gap: var(--osdk-filter-range-input-wrapper-gap);
 }
 
 .RangeInput-module__inputLabel___-fR6-r3z {
-  font-size: var(--osdk-typography-size-body-small);
-  color: var(--osdk-typography-color-muted);
+  font-family: var(--osdk-filter-range-label-font-family);
+  font-size: var(--osdk-filter-range-label-font-size);
+  color: var(--osdk-filter-range-label-color);
 }
 
 .RangeInput-module__input___e4XWn2rB {
-  font-size: var(--osdk-typography-size-body-small);
+  font-family: var(--osdk-filter-input-font-family);
+  font-size: var(--osdk-filter-input-font-size);
   padding: var(--osdk-filter-input-padding);
   border: var(--osdk-filter-input-border);
   border-radius: var(--osdk-filter-input-border-radius);
@@ -1629,8 +1733,8 @@
 }
 
 .RangeInput-module__separator___ml1GvZvm {
-  padding-bottom: calc(var(--osdk-surface-spacing) * 1.5);
-  color: var(--osdk-typography-color-muted);
+  padding-bottom: calc(var(--osdk-filter-range-inputs-gap) * 0.75);
+  color: var(--osdk-filter-range-separator-color);
 }
 
 
@@ -1664,7 +1768,8 @@
 
 .SingleDateInput-module__input___SijNvgB7 {
   flex: 1;
-  font-size: var(--osdk-typography-size-body-medium);
+  font-family: var(--osdk-filter-input-font-family);
+  font-size: var(--osdk-filter-timeline-input-font-size);
   padding: var(--osdk-filter-input-padding);
   border: var(--osdk-filter-input-border);
   border-radius: var(--osdk-filter-input-border-radius);
@@ -1806,48 +1911,50 @@
 .TimelineInput-module__timeline___43N82HCH {
   display: flex;
   flex-direction: column;
-  gap: var(--osdk-filter-range-gap, calc(var(--osdk-surface-spacing) * 2));
+  gap: var(--osdk-filter-range-gap);
 }
 
 .TimelineInput-module__labels___Co8bihV9 {
   display: flex;
   align-items: center;
-  gap: var(--osdk-surface-spacing);
-  font-size: var(--osdk-typography-size-body-small);
-  color: var(--osdk-typography-color-muted);
+  gap: var(--osdk-filter-timeline-labels-gap);
+  font-family: var(--osdk-filter-timeline-labels-font-family);
+  font-size: var(--osdk-filter-timeline-labels-font-size);
+  color: var(--osdk-filter-timeline-labels-color);
 }
 
 .TimelineInput-module__clearButton___6TCIW46Z {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: calc(var(--osdk-surface-spacing) * 0.5);
+  padding: var(--osdk-filter-timeline-button-padding);
   border: none;
   background: transparent;
   cursor: pointer;
-  color: var(--osdk-iconography-color-muted);
-  border-radius: var(--osdk-surface-border-radius);
+  color: var(--osdk-filter-timeline-button-color);
+  border-radius: var(--osdk-filter-timeline-button-border-radius);
   margin-left: auto;
 
   &:hover {
-    background: var(--osdk-surface-background-color-default-hover);
-    color: var(--osdk-typography-color-default-rest);
+    background: var(--osdk-filter-timeline-button-bg-hover);
+    color: var(--osdk-filter-timeline-button-color-hover);
   }
 }
 
 .TimelineInput-module__brush___DCoA1XWA {
   display: flex;
   align-items: center;
-  gap: var(--osdk-surface-spacing);
+  gap: var(--osdk-filter-timeline-labels-gap);
 }
 
 .TimelineInput-module__brush___DCoA1XWA span {
-  color: var(--osdk-typography-color-muted);
+  color: var(--osdk-filter-timeline-brush-color);
 }
 
 .TimelineInput-module__input___yAEKg6Mr {
   flex: 1;
-  font-size: var(--osdk-typography-size-body-medium);
+  font-family: var(--osdk-filter-input-font-family);
+  font-size: var(--osdk-filter-timeline-input-font-size);
   padding: var(--osdk-filter-input-padding);
   border: var(--osdk-filter-input-border);
   border-radius: var(--osdk-filter-input-border-radius);
@@ -1920,17 +2027,18 @@
 .shared-module__loadingMessage___l0c3ANEV,
 .shared-module__errorMessage___9SeAT7P8,
 .shared-module__emptyMessage___z7gK6NAb {
-  font-size: var(--osdk-typography-size-body-small);
-  padding: var(--osdk-surface-spacing);
+  font-family: var(--osdk-filter-message-font-family);
+  font-size: var(--osdk-filter-message-font-size);
+  padding: var(--osdk-filter-message-padding);
 }
 
 .shared-module__loadingMessage___l0c3ANEV,
 .shared-module__emptyMessage___z7gK6NAb {
-  color: var(--osdk-typography-color-muted);
+  color: var(--osdk-filter-message-color-muted);
 }
 
 .shared-module__errorMessage___9SeAT7P8 {
-  color: var(--osdk-intent-danger-rest);
+  color: var(--osdk-filter-message-color-danger);
 }
 
 /* Shared tag styles */
@@ -2141,10 +2249,6 @@
   cursor: pointer;
   padding: 0;
 
-  &:focus {
-    outline: none;
-  }
-
   &:focus-visible {
     outline: var(--osdk-focus-outline);
     outline-offset: var(--osdk-focus-visible-outline-offset);
@@ -2228,11 +2332,6 @@
   white-space: nowrap;
   background: none;
   border: none;
-
-  &:focus {
-    outline: none;
-  }
-
   &:focus-visible {
     outline: var(--osdk-focus-outline);
     outline-offset: var(--osdk-focus-visible-outline-offset);
@@ -2444,10 +2543,6 @@
     cursor: not-allowed;
   }
 
-  &:focus {
-    outline: none;
-  }
-
   &:focus-visible {
     outline: var(--osdk-focus-outline);
     outline-offset: calc(-1 * var(--osdk-focus-visible-outline-offset));
@@ -2975,10 +3070,6 @@
     color: var(--osdk-table-header-menu-color-active);
   }
 
-  &:focus {
-    outline: none;
-  }
-
   &:focus-visible {
     outline: var(--osdk-focus-outline);
     outline-offset: var(--osdk-focus-visible-outline-offset);
@@ -2999,10 +3090,6 @@
   color: var(--osdk-typography-color-default-rest);
   box-shadow: var(--osdk-surface-shadow-2);
   font-size: var(--osdk-typography-size-body-medium);
-
-  &:focus {
-    outline: none;
-  }
 }
 
 .TableHeaderWithPopover-module__osdkHeaderMenuItem___f-D5iGwi {
@@ -3015,10 +3102,6 @@
     border-radius: var(--osdk-surface-border-radius);
   }
 
-  &:focus {
-    outline: none;
-  }
-
   &:focus-visible {
     outline: var(--osdk-focus-outline);
     outline-offset: var(--osdk-focus-visible-outline-offset);
@@ -3132,34 +3215,34 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: var(--osdk-filter-error-gap, 8px);
-  padding: var(--osdk-filter-error-padding, 8px);
-  border-radius: var(--osdk-filter-error-border-radius, 4px);
-  background-color: var(--osdk-filter-error-bg, color-mix(in srgb, var(--osdk-intent-danger-rest, #c23030) 5%, transparent));
+  gap: var(--osdk-error-boundary-gap, 8px);
+  padding: var(--osdk-error-boundary-padding, 8px);
+  border-radius: var(--osdk-error-boundary-border-radius, 4px);
+  background-color: var(--osdk-error-boundary-bg, color-mix(in srgb, var(--osdk-intent-danger-rest, #c23030) 5%, transparent));
 }
 
 .ErrorBoundary-module__errorMessage___jUsXUqFA {
   margin: 0;
-  font-size: var(--osdk-filter-error-font-size, 13px);
-  color: var(--osdk-filter-error-text-color, var(--osdk-intent-danger-rest, #c23030));
+  font-size: var(--osdk-error-boundary-font-size, 13px);
+  color: var(--osdk-error-boundary-text-color, var(--osdk-intent-danger-rest, #c23030));
 }
 
 .ErrorBoundary-module__retryButton___PZVWZOm7 {
-  padding: var(--osdk-filter-error-button-padding, 4px 8px);
-  border: 1px solid var(--osdk-filter-error-button-border-color, currentColor);
-  border-radius: var(--osdk-filter-error-button-border-radius, 3px);
+  padding: var(--osdk-error-boundary-button-padding, 4px 8px);
+  border: var(--osdk-surface-border-width, 1px) solid var(--osdk-error-boundary-button-border-color, currentColor);
+  border-radius: var(--osdk-error-boundary-button-border-radius, 3px);
   background: transparent;
-  font-size: var(--osdk-filter-error-button-font-size, 12px);
-  color: var(--osdk-filter-error-button-color, inherit);
+  font-size: var(--osdk-error-boundary-button-font-size, 12px);
+  color: var(--osdk-error-boundary-button-color, inherit);
   cursor: pointer;
-  transition: background-color 150ms ease;
+  transition: background-color var(--osdk-filter-input-transition, 150ms ease);
 
   &:hover {
-    background-color: var(--osdk-filter-error-button-hover-bg, color-mix(in srgb, currentColor 5%, transparent));
+    background-color: var(--osdk-error-boundary-button-hover-bg, color-mix(in srgb, currentColor 5%, transparent));
   }
 
   &:focus-visible {
-    outline: var(--osdk-filter-input-focus-outline-width, 2px) solid var(--osdk-filter-input-focus-outline-color, currentColor);
+    outline: var(--osdk-filter-input-focus-outline-width, 2px) solid var(--osdk-filter-input-focus-outline-color, rgba(45, 114, 210, 0.6));
     outline-offset: var(--osdk-filter-input-focus-outline-offset, 2px);
   }