@box/blueprint-web 12.38.0 → 12.40.0

package/dist/lib-esm/index.css

@@ -6853,7 +6853,83 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
 .bp_radio_tiles_module_radioTiles--81b06.bp_radio_tiles_module_compact--81b06 > *{
   flex:0 1 calc(100%/var(--columns) - var(--space-2) + var(--space-2)/var(--columns));
 }
-.bp_search_module_search--e5daf{
+.bp_search_module_search--de057[data-modern=false]{
+  --search-default-padding:var(--space-2);
+  --search-input-height:var(--size-10);
+  --search-input-with-start-icon-padding:var(--space-8);
+  --search-input-background:var(--surface-search-surface);
+  --search-input-background-hovered:var(--surface-search-surface-hover);
+  --search-input-background-focused:var(--surface-search-surface-focused);
+  --search-input-border-width:var(--border-1);
+  --search-input-border-width-focused:var(--border-2);
+  --search-input-padding-inline-start-focused:calc(var(--space-8) - var(--border-1));
+  --search-icon-size:var(--size-4);
+  --search-clear-button-size:var(--size-4);
+  --search-icon-fill:var(--icon-icon-on-light-secondary);
+  --action-icon-button-size:var(--size-8);
+  --placeholder-color:var(--text-text-on-light-secondary);
+  --search-input-color:var(--text-text-on-light);
+  --search-input-border:var(--border-search-border);
+  --search-input-border-hover:var(--border-search-border-hover);
+  --search-input-focus-outline:var(--outline-focus-on-light);
+  --search-input-radius:var(--radius-2);
+  --search-global-height:var(--size-12);
+  --search-global-radius:var(--radius-7);
+  --search-action-button-spacing:var(--space-4);
+  --clear-search-button-background:var(--surface-cta-surface-icon);
+  --clear-search-icon-fill:var(--icon-cta-icon);
+  --clear-search-button-background-hover:var(--surface-cta-surface-icon-hover);
+  --clear-search-icon-fill-hover:var(--icon-cta-icon-hover);
+  --clear-search-focus-outline:var(--border-2) solid var(--outline-focus-on-light);
+  --search-global-padding-inline:var(--space-12);
+  --search-global-icon-size:var(--size-5);
+  --search-global-icon-spacing:var(--space-4);
+  --search-global-padding-inline-end-with-action:calc(var(--size-8)*2 + var(--space-6));
+  --search-global-padding-inline-end-without-action:calc(var(--size-8) + var(--space-3));
+  --search-global-padding-inline-start-focused:calc(var(--space-12) - var(--border-1));
+  --search-global-clear-icon-spacing:calc(var(--space-12) + var(--space-1));
+  --search-global-clear-icon-spacing-without-action:var(--space-3);
+}
+
+.bp_search_module_search--de057[data-modern=true]{
+  --search-default-padding:var(--bp-space-030);
+  --search-input-height:var(--bp-size-100);
+  --search-input-with-start-icon-padding:calc(var(--search-default-padding) + var(--bp-space-040) + var(--bp-space-020));
+  --search-input-background:var(--bp-surface-search-surface);
+  --search-input-background-hovered:var(--bp-surface-search-surface-hover);
+  --search-input-background-focused:var(--bp-surface-search-surface-focused);
+  --search-input-border-width:var(--bp-border-01);
+  --search-input-border-width-focused:var(--bp-border-02);
+  --search-input-padding-inline-start-focused:calc(var(--search-input-with-start-icon-padding) - var(--bp-border-01));
+  --search-icon-size:var(--bp-size-040);
+  --search-clear-button-size:var(--bp-size-060);
+  --search-icon-fill:var(--bp-icon-icon-on-light-secondary);
+  --action-icon-button-size:var(--bp-size-080);
+  --placeholder-color:var(--bp-text-text-on-light-secondary);
+  --search-input-color:var(--bp-text-text-on-light);
+  --search-input-border:var(--bp-border-search-border);
+  --search-input-border-hover:var(--bp-border-search-border-hover);
+  --search-input-focus-outline:var(--bp-light-blue-100);
+  --search-input-radius:var(--bp-radius-10);
+  --clear-search-button-background:var(--bp-surface-cta-surface-icon);
+  --clear-search-icon-fill:var(--bp-icon-cta-icon);
+  --clear-search-button-background-hover:var(--bp-surface-cta-surface-icon-hover);
+  --clear-search-icon-fill-hover:var(--bp-icon-cta-icon-hover);
+  --clear-search-focus-outline:var(--bp-border-02) solid var(--bp-outline-focus-on-light);
+  --search-action-button-spacing:var(--bp-space-030);
+  --search-global-height:var(--bp-size-120);
+  --search-global-radius:var(--bp-radius-12);
+  --search-global-padding-inline:calc(var(--bp-space-050) + var(--bp-space-030)*2);
+  --search-global-icon-size:var(--bp-size-050);
+  --search-global-icon-spacing:var(--bp-space-030);
+  --search-global-padding-inline-end-with-action:calc(var(--bp-size-060)*2 + var(--bp-space-030)*2 + var(--bp-space-010));
+  --search-global-padding-inline-end-without-action:calc(var(--bp-size-060)*2 + var(--bp-space-030)*2);
+  --search-global-padding-inline-start-focused:calc(var(--search-global-padding-inline) - var(--bp-border-01));
+  --search-global-clear-icon-spacing:calc(var(--action-icon-button-size) + var(--bp-space-030) + var(--bp-space-010));
+  --search-global-clear-icon-spacing-without-action:var(--bp-space-030);
+}
+
+.bp_search_module_search--de057{
   font-family:var(--body-default-font-family);
   font-size:var(--body-default-font-size);
   font-weight:var(--body-default-font-weight);
@@ -6867,126 +6943,131 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   text-transform:var(--body-default-text-case);
   width:100%;
 }
-.bp_search_module_search--e5daf.bp_search_module_disabled--e5daf{
+.bp_search_module_search--de057.bp_search_module_disabled--de057{
   opacity:.3;
 }
-.bp_search_module_search--e5daf .bp_search_module_searchIcon--e5daf{
-  height:var(--size-4);
-  left:var(--space-2);
+.bp_search_module_search--de057 .bp_search_module_searchIcon--de057{
+  height:var(--search-icon-size);
+  left:var(--search-default-padding);
   pointer-events:none;
   position:absolute;
   top:50%;
   transform:translateY(-50%);
-  width:var(--size-4);
+  width:var(--search-icon-size);
 }
-.bp_search_module_search--e5daf .bp_search_module_searchIcon--e5daf.bp_search_module_global--e5daf{
-  height:var(--size-5);
-  left:var(--space-4);
-  width:var(--size-5);
+.bp_search_module_search--de057 .bp_search_module_searchIcon--de057.bp_search_module_global--de057{
+  height:var(--search-global-icon-size);
+  left:var(--search-global-icon-spacing);
+  width:var(--search-global-icon-size);
 }
-.bp_search_module_search--e5daf .bp_search_module_searchInput--e5daf{
+.bp_search_module_search--de057 .bp_search_module_searchInput--de057{
   -webkit-font-smoothing:auto;
-  background-color:var(--surface-search-surface);
-  border:var(--border-1) solid var(--border-search-border);
-  border-radius:var(--radius-2);
+  background-color:var(--search-input-background);
+  border:var(--search-input-border-width) solid var(--search-input-border);
+  border-radius:var(--search-input-radius);
   box-shadow:unset;
   box-sizing:border-box;
-  color:var(--text-text-on-light);
+  color:var(--search-input-color);
   font-family:var(--body-default-font-family);
   font-size:var(--body-default-font-size);
   font-weight:var(--body-default-font-weight);
-  height:var(--size-10);
+  height:var(--search-input-height);
   letter-spacing:var(--body-default-letter-spacing);
   line-height:var(--body-default-line-height);
   outline:0;
   padding-block:0;
-  padding-inline:var(--space-8) var(--space-2);
+  padding-inline:var(--search-input-with-start-icon-padding) var(--search-default-padding);
   -webkit-text-decoration:var(--body-default-text-decoration);
           text-decoration:var(--body-default-text-decoration);
   text-transform:var(--body-default-text-case);
   transition:border-color .15s ease,background-color .15s ease;
   width:100%;
 }
-.bp_search_module_search--e5daf .bp_search_module_searchInput--e5daf.bp_search_module_global--e5daf{
-  border-radius:var(--radius-7);
-  height:var(--size-12);
-  padding-inline:var(--space-12) var(--space-2);
+.bp_search_module_search--de057 .bp_search_module_searchInput--de057.bp_search_module_global--de057{
+  border-radius:var(--search-global-radius);
+  height:var(--search-global-height);
+  padding-inline:var(--search-global-padding-inline) var(--search-default-padding);
 }
-.bp_search_module_search--e5daf .bp_search_module_searchInput--e5daf::-webkit-search-cancel-button,.bp_search_module_search--e5daf .bp_search_module_searchInput--e5daf::-webkit-search-decoration,.bp_search_module_search--e5daf .bp_search_module_searchInput--e5daf::-webkit-search-results-button,.bp_search_module_search--e5daf .bp_search_module_searchInput--e5daf::-webkit-search-results-decoration{
+.bp_search_module_search--de057 .bp_search_module_searchInput--de057::-webkit-search-cancel-button,.bp_search_module_search--de057 .bp_search_module_searchInput--de057::-webkit-search-decoration,.bp_search_module_search--de057 .bp_search_module_searchInput--de057::-webkit-search-results-button,.bp_search_module_search--de057 .bp_search_module_searchInput--de057::-webkit-search-results-decoration{
   appearance:none;
 }
-.bp_search_module_search--e5daf .bp_search_module_searchInput--e5daf:disabled{
-  background-color:var(--surface-search-surface);
+.bp_search_module_search--de057 .bp_search_module_searchInput--de057:disabled{
+  background-color:var(--search-input-background);
   border-color:#0000;
   box-shadow:unset;
-  color:var(--text-text-on-light);
+  color:var(--search-input-color);
 }
-.bp_search_module_search--e5daf .bp_search_module_searchInput--e5daf:hover{
+.bp_search_module_search--de057 .bp_search_module_searchInput--de057:hover{
   box-shadow:unset;
 }
-.bp_search_module_search--e5daf .bp_search_module_searchInput--e5daf .bp_search_module_firefoxDefaultOpacityFix--e5daf,.bp_search_module_search--e5daf .bp_search_module_searchInput--e5daf .bp_search_module_searchInput--e5daf::placeholder{
+.bp_search_module_search--de057 .bp_search_module_searchInput--de057 .bp_search_module_firefoxDefaultOpacityFix--de057,.bp_search_module_search--de057 .bp_search_module_searchInput--de057 .bp_search_module_searchInput--de057::placeholder{
   opacity:1;
 }
-.bp_search_module_search--e5daf .bp_search_module_searchInput--e5daf::placeholder{
-  color:var(--text-text-on-light-secondary);
+.bp_search_module_search--de057 .bp_search_module_searchInput--de057::placeholder{
+  color:var(--placeholder-color);
 }
-.bp_search_module_search--e5daf .bp_search_module_searchInput--e5daf:not(:placeholder-shown){
-  padding-inline-end:var(--space-8);
+.bp_search_module_search--de057 .bp_search_module_searchInput--de057:not(:placeholder-shown){
+  padding-inline-end:var(--search-input-with-start-icon-padding);
 }
-.bp_search_module_search--e5daf .bp_search_module_searchInput--e5daf:not(:placeholder-shown).bp_search_module_global--e5daf{
-  padding-inline-end:calc(var(--size-8)*2 + var(--space-6));
+.bp_search_module_search--de057 .bp_search_module_searchInput--de057:not(:placeholder-shown).bp_search_module_global--de057{
+  padding-inline-end:var(--search-global-padding-inline-end-with-action);
 }
-.bp_search_module_search--e5daf .bp_search_module_searchInput--e5daf:not(:placeholder-shown).bp_search_module_global--e5daf.bp_search_module_withoutActionButton--e5daf{
-  padding-inline-end:calc(var(--size-8) + var(--space-3));
+.bp_search_module_search--de057 .bp_search_module_searchInput--de057:not(:placeholder-shown).bp_search_module_global--de057.bp_search_module_withoutActionButton--de057{
+  padding-inline-end:var(--search-global-padding-inline-end-without-action);
 }
-.bp_search_module_search--e5daf .bp_search_module_searchInput--e5daf:focus-visible{
-  background-color:var(--surface-search-surface-focused);
-  border:var(--border-2) solid var(--outline-focus-on-light);
-  padding-inline-start:calc(var(--space-8) - var(--border-1));
+.bp_search_module_search--de057 .bp_search_module_searchInput--de057:placeholder-shown.bp_search_module_global--de057.bp_search_module_withActionButton--de057{
+  padding-inline-end:var(--search-global-padding-inline);
 }
-.bp_search_module_search--e5daf .bp_search_module_searchInput--e5daf:focus-visible.bp_search_module_global--e5daf{
-  padding-inline-start:calc(var(--space-12) - var(--border-1));
+.bp_search_module_search--de057 .bp_search_module_searchInput--de057:focus-visible{
+  background-color:var(--search-input-background-focused);
+  border:var(--search-input-border-width-focused) solid var(--search-input-focus-outline);
+  padding-inline-end:calc(var(--search-input-with-start-icon-padding) - var(--bp-border-01));
+  padding-inline-start:var(--search-input-padding-inline-start-focused);
 }
-.bp_search_module_search--e5daf .bp_search_module_searchInput--e5daf:not(:focus-visible):not(:disabled):hover{
-  background-color:var(--surface-search-surface-hover);
-  border-color:var(--border-search-border-hover);
+.bp_search_module_search--de057 .bp_search_module_searchInput--de057:focus-visible.bp_search_module_global--de057{
+  padding-inline-end:calc(var(--search-global-padding-inline-end-with-action) - var(--bp-border-01));
+  padding-inline-start:var(--search-global-padding-inline-start-focused);
 }
-.bp_search_module_search--e5daf .bp_search_module_clearSearchIcon--e5daf{
-  background:var(--surface-cta-surface-icon);
-  height:var(--size-4);
+.bp_search_module_search--de057 .bp_search_module_searchInput--de057:not(:focus-visible):not(:disabled):hover{
+  background-color:var(--search-input-background-hovered);
+  border-color:var(--search-input-border-hover);
+}
+.bp_search_module_search--de057 .bp_search_module_clearSearchIcon--de057{
+  background:var(--clear-search-button-background);
+  height:var(--search-clear-button-size);
   position:absolute;
-  right:var(--space-2);
+  right:var(--search-default-padding);
   top:50%;
   transform:translateY(-50%);
-  width:var(--size-4);
+  width:var(--search-clear-button-size);
 }
-.bp_search_module_search--e5daf .bp_search_module_clearSearchIcon--e5daf.bp_search_module_global--e5daf{
-  height:var(--size-8);
-  right:calc(var(--space-12) + var(--space-1));
-  width:var(--size-8);
+.bp_search_module_search--de057 .bp_search_module_clearSearchIcon--de057.bp_search_module_global--de057{
+  height:var(--action-icon-button-size);
+  right:var(--search-global-clear-icon-spacing);
+  width:var(--action-icon-button-size);
 }
-.bp_search_module_search--e5daf .bp_search_module_clearSearchIcon--e5daf.bp_search_module_withoutActionButton--e5daf{
-  right:var(--space-3);
+.bp_search_module_search--de057 .bp_search_module_clearSearchIcon--de057.bp_search_module_withoutActionButton--de057{
+  right:var(--search-global-clear-icon-spacing-without-action);
 }
-.bp_search_module_search--e5daf .bp_search_module_clearSearchIcon--e5daf *{
-  fill:var(--icon-cta-icon);
+.bp_search_module_search--de057 .bp_search_module_clearSearchIcon--de057 *{
+  fill:var(--clear-search-icon-fill);
 }
-.bp_search_module_search--e5daf .bp_search_module_clearSearchIcon--e5daf:focus-visible{
-  background:var(--surface-cta-surface-icon-hover);
-  outline:var(--border-2) solid var(--outline-focus-on-light);
+.bp_search_module_search--de057 .bp_search_module_clearSearchIcon--de057:focus-visible{
+  background:var(--clear-search-button-background-hover);
+  outline:var(--clear-search-focus-outline);
 }
-.bp_search_module_search--e5daf .bp_search_module_clearSearchIcon--e5daf:focus-visible *{
-  fill:var(--icon-cta-icon-hover);
+.bp_search_module_search--de057 .bp_search_module_clearSearchIcon--de057:focus-visible *{
+  fill:var(--clear-search-icon-fill-hover);
 }
-.bp_search_module_search--e5daf .bp_search_module_clearSearchIcon--e5daf:hover{
-  background:var(--surface-cta-surface-icon-hover);
+.bp_search_module_search--de057 .bp_search_module_clearSearchIcon--de057:hover{
+  background:var(--clear-search-button-background-hover);
 }
-.bp_search_module_search--e5daf .bp_search_module_clearSearchIcon--e5daf:hover *{
-  fill:var(--icon-cta-icon-hover);
+.bp_search_module_search--de057 .bp_search_module_clearSearchIcon--de057:hover *{
+  fill:var(--clear-search-icon-fill-hover);
 }
-.bp_search_module_search--e5daf .bp_search_module_actionButton--e5daf{
+.bp_search_module_search--de057 .bp_search_module_actionButton--de057{
   position:absolute;
-  right:var(--space-4);
+  right:var(--search-action-button-spacing);
   top:50%;
   transform:translateY(-50%);
 }
@@ -7225,6 +7306,88 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   width:-moz-fit-content;
   width:fit-content;
 }
+
+.bp_trigger_button_module_triggerButton--2653a[data-modern=false].bp_trigger_button_module_secondary--2653a{
+  --trigger-button-background:var(--surface-dropdown-secondary-surface);
+  --trigger-button-border:var(--border-1) solid var(--border-cta-border-secondary);
+  --trigger-button-focus-or-hover-background:var(--surface-dropdown-secondary-surface-hover);
+  --trigger-button-focus-or-hover-border:var(--border-1) solid var(--border-cta-border-secondary);
+  --trigger-button-active-background:var(--surface-dropdown-secondary-surface-pressed);
+  --trigger-button-active-border:var(--border-1) solid var(--border-cta-border-secondary);
+}
+.bp_trigger_button_module_triggerButton--2653a[data-modern=false].bp_trigger_button_module_tertiary--2653a{
+  --trigger-button-focus-or-hover-background:var(--surface-dropdown-primary-surface-hover);
+  --trigger-button-active-background:var(--surface-dropdown-primary-surface-pressed);
+}
+.bp_trigger_button_module_triggerButton--2653a[data-modern=false].bp_trigger_button_module_extraSmall--2653a{
+  --button-xsmall-gap:var(--space-1);
+  --button-xsmall-height:var(--size-6);
+  --button-xsmall-padding:0.375rem var(--space-1);
+}
+.bp_trigger_button_module_triggerButton--2653a[data-modern=false].bp_trigger_button_module_small--2653a{
+  --button-small-padding:0.375rem var(--space-2);
+}
+.bp_trigger_button_module_triggerButton--2653a[data-modern=false].bp_trigger_button_module_large--2653a{
+  --button-large-padding:0.375rem var(--space-3) 0.375rem var(--space-2);
+}
+
+.bp_trigger_button_module_triggerButton--2653a[data-modern=true].bp_trigger_button_module_secondary--2653a{
+  --trigger-button-background:var(--bp-surface-dropdown-surface-secondary);
+  --trigger-button-border:var(--bp-border-01) solid var(--bp-border-dropdown-secondary-border);
+  --trigger-button-focus-or-hover-background:var(--bp-surface-dropdown-secondary-surface-hover);
+  --trigger-button-focus-or-hover-border:var(--bp-border-01) solid var(--bp-border-dropdown-secondary-border);
+  --trigger-button-active-background:var(--bp-surface-dropdown-secondary-surface-pressed);
+  --trigger-button-active-border:var(--bp-border-01) solid var(--bp-border-dropdown-secondary-border);
+}
+.bp_trigger_button_module_triggerButton--2653a[data-modern=true].bp_trigger_button_module_tertiary--2653a{
+  --trigger-button-focus-or-hover-background:var(--bp-surface-dropdown-tertiary-surface-hover);
+  --trigger-button-active-background:var(--bp-surface-dropdown-secondary-surface-pressed);
+}
+.bp_trigger_button_module_triggerButton--2653a[data-modern=true].bp_trigger_button_module_extraSmall--2653a{
+  --button-xsmall-gap:var(--bp-space-010);
+  --button-xsmall-height:var(--bp-size-060);
+  --button-xsmall-padding:0.375rem var(--bp-space-010);
+}
+.bp_trigger_button_module_triggerButton--2653a[data-modern=true].bp_trigger_button_module_small--2653a{
+  --button-small-padding:0.375rem var(--bp-space-020);
+}
+.bp_trigger_button_module_triggerButton--2653a[data-modern=true].bp_trigger_button_module_large--2653a{
+  --button-large-padding:0.375rem var(--bp-space-030) 0.375rem var(--bp-space-020);
+}
+
+.bp_trigger_button_module_triggerButton--2653a.bp_trigger_button_module_secondary--2653a{
+  background:var(--trigger-button-background);
+  border:var(--trigger-button-border);
+}
+.bp_trigger_button_module_triggerButton--2653a.bp_trigger_button_module_secondary--2653a:not(:disabled):hover,.bp_trigger_button_module_triggerButton--2653a.bp_trigger_button_module_secondary--2653a:not(:disabled)[data-focus-visible]{
+  background:var(--trigger-button-focus-or-hover-background);
+  border:var(--trigger-button-focus-or-hover-border);
+}
+.bp_trigger_button_module_triggerButton--2653a.bp_trigger_button_module_secondary--2653a:not(:disabled):active{
+  background:var(--trigger-button-active-background);
+  border:var(--trigger-button-active-border);
+}
+.bp_trigger_button_module_triggerButton--2653a.bp_trigger_button_module_tertiary--2653a{
+  background:var(--trigger-button-background);
+  border:var(--trigger-button-border);
+}
+.bp_trigger_button_module_triggerButton--2653a.bp_trigger_button_module_tertiary--2653a:not(:disabled):hover,.bp_trigger_button_module_triggerButton--2653a.bp_trigger_button_module_tertiary--2653a:not(:disabled)[data-focus-visible]{
+  background:var(--trigger-button-focus-or-hover-background);
+}
+.bp_trigger_button_module_triggerButton--2653a.bp_trigger_button_module_tertiary--2653a:not(:disabled):active{
+  background:var(--trigger-button-active-background);
+}
+.bp_trigger_button_module_triggerButton--2653a.bp_trigger_button_module_extraSmall--2653a{
+  gap:var(--button-xsmall-gap);
+  height:var(--button-xsmall-height);
+  padding:var(--button-xsmall-padding);
+}
+.bp_trigger_button_module_triggerButton--2653a.bp_trigger_button_module_small--2653a{
+  padding:var(--button-small-padding);
+}
+.bp_trigger_button_module_triggerButton--2653a.bp_trigger_button_module_large--2653a{
+  padding:var(--button-large-padding);
+}
 .bp_styles_module_splitButton--f7401[data-modern=false]{
   --split-button-left-width:100%;
   --split-button-left-gap-margin-inline-end:calc(var(--space-05)/2);

package/dist/lib-esm/search-input/search-input-controlled/search-input-controlled.js

@@ -3,6 +3,7 @@ import { Search } from '@box/blueprint-web-assets/icons/Fill';
 import { IconCtaIcon, IconIconOnLightSecondary } from '@box/blueprint-web-assets/tokens/tokens';
 import clsx from 'clsx';
 import { forwardRef, Children, useMemo, cloneElement } from 'react';
+import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
 import { IconButton } from '../../primitives/icon-button/icon-button.js';
 import { Tooltip } from '../../tooltip/tooltip.js';
 import { switchCase } from '../../utils/switchCase.js';
@@ -28,6 +29,9 @@ const SearchInputControlled = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     variant,
     ...rest
   } = props;
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   const handleIEMComposition = e => {
     if (e.nativeEvent.isComposing) {
       e.preventDefault();
@@ -74,6 +78,7 @@ const SearchInputControlled = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   }), [startIcon, isGlobal]);
   return jsxs("div", {
     className: clsx(styles.search, disabled && styles.disabled, className),
+    "data-modern": enableModernizedComponents,
     children: [startIcon ? CustomStartIconComponent : jsx(Search, {
       "aria-hidden": "true",
       className: clsx(styles.searchIcon, isGlobal && styles.global),

package/dist/lib-esm/search-input/search-input.js

@@ -3,6 +3,7 @@ import { Search, XMark } from '@box/blueprint-web-assets/icons/Fill';
 import { IconIconOnLightSecondary, IconCtaIcon } from '@box/blueprint-web-assets/tokens/tokens';
 import clsx from 'clsx';
 import { forwardRef, useState, useCallback, Children } from 'react';
+import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import { IconButton } from '../primitives/icon-button/icon-button.js';
 import { switchCase } from '../utils/switchCase.js';
 import styles from './search.module.js';
@@ -35,6 +36,9 @@ const SearchInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     variant,
     ...rest
   } = props;
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   const [searchInputValue, setSearchInputValue] = useState(defaultValue);
   const updateSearchValue = useCallback(value => {
     setSearchInputValue(value);
@@ -70,6 +74,7 @@ const SearchInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const showActionButton = Children.count(children) > 0;
   return jsxs("div", {
     className: clsx(styles.search, disabled && styles.disabled, className),
+    "data-modern": enableModernizedComponents,
     children: [jsx(Search, {
       "aria-hidden": "true",
       className: clsx(styles.searchIcon, isGlobal && styles.global),
@@ -79,7 +84,8 @@ const SearchInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       ref: forwardedRef,
       "aria-label": searchInputAriaLabel,
       className: clsx(styles.searchInput, isGlobal && styles.global, {
-        [styles.withoutActionButton]: isGlobal && !showActionButton
+        [styles.withoutActionButton]: isGlobal && !showActionButton,
+        [styles.withActionButton]: isGlobal && showActionButton
       }),
       disabled: disabled,
       onChange: onSearchInputChanged,

package/dist/lib-esm/search-input/search.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"search":"bp_search_module_search--e5daf","disabled":"bp_search_module_disabled--e5daf","searchIcon":"bp_search_module_searchIcon--e5daf","global":"bp_search_module_global--e5daf","searchInput":"bp_search_module_searchInput--e5daf","firefoxDefaultOpacityFix":"bp_search_module_firefoxDefaultOpacityFix--e5daf","withoutActionButton":"bp_search_module_withoutActionButton--e5daf","clearSearchIcon":"bp_search_module_clearSearchIcon--e5daf","actionButton":"bp_search_module_actionButton--e5daf"};
+var styles = {"search":"bp_search_module_search--de057","disabled":"bp_search_module_disabled--de057","searchIcon":"bp_search_module_searchIcon--de057","global":"bp_search_module_global--de057","searchInput":"bp_search_module_searchInput--de057","firefoxDefaultOpacityFix":"bp_search_module_firefoxDefaultOpacityFix--de057","withoutActionButton":"bp_search_module_withoutActionButton--de057","withActionButton":"bp_search_module_withActionButton--de057","clearSearchIcon":"bp_search_module_clearSearchIcon--de057","actionButton":"bp_search_module_actionButton--de057"};
 
 export { styles as default };

package/dist/lib-esm/trigger-button/trigger-button.d.ts

@@ -1,28 +1,17 @@
 import { type BaseButtonIconProps, type BaseButtonProps } from '../primitives/base-button';
-export type TriggerButtonProps = BaseButtonProps & {
+export type TriggerButtonSize = 'extraSmall' | NonNullable<BaseButtonProps['size']>;
+export type TriggerButtonProps = Omit<BaseButtonProps, 'size'> & {
     /** Trigger button label */
     label?: string;
     /** Icon to show up at the start of the trigger button */
     startIcon?: BaseButtonIconProps['icon'];
     /** Direction of caret icon */
     caretDirection: 'up' | 'down';
+    /** The size of the trigger button */
+    size?: TriggerButtonSize;
 };
 /**
  * The TriggerButton is a stylized button that has an optional start icon, optional label, and a caret as the end icon.
  * Caret direction can be changed from up to down. This component will most likely be used to trigger a dropdown.
  */
-export declare const TriggerButton: import("react").ForwardRefExoticComponent<(Omit<import("../primitives/base-button").BaseButtonInterface & Required<Pick<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading>> & Omit<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading> & {
-    /** Trigger button label */
-    label?: string;
-    /** Icon to show up at the start of the trigger button */
-    startIcon?: BaseButtonIconProps["icon"];
-    /** Direction of caret icon */
-    caretDirection: "up" | "down";
-}, "ref"> | Omit<import("../primitives/base-button").BaseButtonInterface & Partial<Record<keyof import("../primitives/base-button").Loading, never>> & Omit<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading> & {
-    /** Trigger button label */
-    label?: string;
-    /** Icon to show up at the start of the trigger button */
-    startIcon?: BaseButtonIconProps["icon"];
-    /** Direction of caret icon */
-    caretDirection: "up" | "down";
-}, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const TriggerButton: import("react").ForwardRefExoticComponent<Omit<TriggerButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/lib-esm/trigger-button/trigger-button.js

@@ -1,9 +1,13 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { CaretUp, CaretDown } from '@box/blueprint-web-assets/icons/Fill';
+import clsx from 'clsx';
 import { forwardRef } from 'react';
+import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import { BaseButton } from '../primitives/base-button/index.js';
+import styles from './trigger-button.module.js';
 
 const buttonSizeToStartIconSizeMap = {
+  extraSmall: 16,
   small: 16,
   large: 24
 };
@@ -17,18 +21,27 @@ const TriggerButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     label,
     startIcon,
     size = 'small',
+    className,
+    variant = 'secondary',
     ...rest
   } = props;
   const startIconSize = buttonSizeToStartIconSizeMap[size];
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
+  // Map extraSmall to small for BaseButton to accept the extraSmall size, but apply our custom styling. BaseButton does not support extraSmall size.
+  const baseButtonSize = size === 'extraSmall' ? 'small' : size;
   return jsxs(BaseButton, {
     ref: forwardedRef,
-    size: size,
+    className: clsx(styles.triggerButton, styles[size], styles[variant], className),
+    "data-modern": enableModernizedComponents,
+    size: baseButtonSize,
+    variant: variant,
     ...rest,
     children: [startIcon && jsx(BaseButton.Icon, {
       icon: startIcon,
       iconProps: {
-        height: startIconSize,
-        width: startIconSize
+        height: startIconSize
       }
     }), label && jsx(BaseButton.Label, {
       children: label

package/dist/lib-esm/trigger-button/trigger-button.module.js

@@ -0,0 +1,4 @@
+import '../index.css';
+var styles = {"triggerButton":"bp_trigger_button_module_triggerButton--2653a","secondary":"bp_trigger_button_module_secondary--2653a","tertiary":"bp_trigger_button_module_tertiary--2653a","extraSmall":"bp_trigger_button_module_extraSmall--2653a","small":"bp_trigger_button_module_small--2653a","large":"bp_trigger_button_module_large--2653a"};
+
+export { styles as default };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "12.38.0",
+    "version": "12.40.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {