@box/blueprint-web 14.35.0 → 14.36.1

package/dist/lib-esm/index.css

@@ -13414,11 +13414,11 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
 .bp_time_picker_module_timePicker--41158 .bp_time_picker_module_inlineError--41158{
   margin-block-start:var(--time-picker-inline-error-margin-top);
 }
-.bp_toolbar_module_dropdownIndicator--5aae4.bp_toolbar_module_invertCaret--5aae4{
+.bp_toolbar_module_dropdownIndicator--c54d6.bp_toolbar_module_invertCaret--c54d6{
   transform:rotate(.5turn);
 }
 
-.bp_toolbar_module_toolbarRoot--5aae4[data-modern=false]{
+.bp_toolbar_module_toolbarRoot--c54d6[data-modern=false]{
   --toolbar-root-gap:var(--space-1);
   --toolbar-root-padding:calc(var(--space-1) - var(--border-1));
   --toolbar-root-background:var(--surface-surface);
@@ -13432,9 +13432,13 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   --toolbar-separator-height:var(--size-6);
   --toolbar-separator-background:var(--border-divider-border);
   --toolbar-separator-border-radius:var(--radius-2);
+  --toolbar-link-color:var(--text-cta-link);
+  --toolbar-link-hover-color:var(--text-cta-link-hover);
+  --toolbar-link-padding-inline:var(--space-2);
+  --toolbar-link-max-width:400px;
 }
 
-.bp_toolbar_module_toolbarRoot--5aae4[data-modern=true]{
+.bp_toolbar_module_toolbarRoot--c54d6[data-modern=true]{
   --box-shadow:0 4px 12px 0 #0000001a;
   --toolbar-root-gap:var(--bp-space-010);
   --toolbar-root-padding:var(--bp-space-010);
@@ -13450,12 +13454,16 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   --toolbar-separator-background:var(--bp-border-divider-border);
   --toolbar-separator-border-radius:var(--bp-radius-03);
   --toolbar-toggle-group-gap:var(--bp-space-010);
+  --toolbar-link-color:var(--bp-text-cta-link);
+  --toolbar-link-hover-color:var(--bp-text-cta-link-hover);
+  --toolbar-link-padding-inline:var(--bp-space-020);
+  --toolbar-link-max-width:400px;
 }
-.bp_toolbar_module_toolbarRoot--5aae4[data-modern=true].bp_toolbar_module_ScrollableToolbarWithReducedPadding--5aae4{
+.bp_toolbar_module_toolbarRoot--c54d6[data-modern=true].bp_toolbar_module_ScrollableToolbarWithReducedPadding--c54d6{
   --toolbar-root-padding:0;
 }
 
-.bp_toolbar_module_toolbarItem--5aae4[data-modern=false]{
+.bp_toolbar_module_toolbarItem--c54d6[data-modern=false]{
   --toolbar-item-min-width:var(--size-8);
   --toolbar-item-min-height:var(--size-8);
   --toolbar-item-text-indent:var(--space-1);
@@ -13466,7 +13474,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   --toolbar-item-off-hover-background:var(--surface-toggle-surface-hover);
   --toolbar-item-off-hover-border:var(--border-1) solid var(--surface-toggle-surface-hover);
   --toolbar-item-focus-outline:var(--outline-focus-on-light);
-  --toolbar-item-disabled-opacity:.3;
+  --toolbar-item-disabled-opacity:0.3;
   --toolbar-toggle-on-pressed-border:none;
   --toolbar-toggle-on-pressed-background:var(--surface-toggle-surface-pressed);
   --toolbar-toggle-icon-fill:var(--icon-icon-on-dark);
@@ -13489,9 +13497,9 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   --toolbar-text-toggle-checked-hover-border-color:var(--border-toggletext-border-on-hover);
   --toolbar-text-toggle-checked-active-background:var(--surface-toggletext-surface-on-pressed);
   --toolbar-text-toggle-checked-active-border-color:var(--border-toggletext-border-on-pressed);
-  --trigger-button-hover-opacity:.7;
+  --trigger-button-hover-opacity:0.7;
 }
-.bp_toolbar_module_toolbarItem--5aae4[data-modern=false].bp_toolbar_module_toolbarButton--5aae4,.bp_toolbar_module_toolbarItem--5aae4[data-modern=false].bp_toolbar_module_toolbarTextToggleItem--5aae4{
+.bp_toolbar_module_toolbarItem--c54d6[data-modern=false].bp_toolbar_module_toolbarButton--c54d6,.bp_toolbar_module_toolbarItem--c54d6[data-modern=false].bp_toolbar_module_toolbarTextToggleItem--c54d6{
   font-family:var(--body-default-font-family);
   font-size:var(--body-default-font-size);
   font-weight:var(--body-default-font-weight);
@@ -13500,8 +13508,17 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   text-decoration:var(--body-default-text-decoration);
   text-transform:var(--body-default-text-case);
 }
+.bp_toolbar_module_toolbarItem--c54d6[data-modern=false].bp_toolbar_module_toolbarLink--c54d6{
+  font-family:var(--body-default-bold-font-family);
+  font-size:var(--body-default-bold-font-size);
+  font-weight:var(--body-default-bold-font-weight);
+  letter-spacing:var(--body-default-bold-letter-spacing);
+  line-height:var(--body-default-bold-line-height);
+  text-decoration:var(--body-default-bold-text-decoration);
+  text-transform:var(--body-default-bold-text-case);
+}
 
-.bp_toolbar_module_toolbarItem--5aae4[data-modern=true]{
+.bp_toolbar_module_toolbarItem--c54d6[data-modern=true]{
   --toolbar-item-min-width:var(--bp-size-080);
   --toolbar-item-min-height:var(--bp-size-080);
   --toolbar-item-text-indent:var(--bp-space-010);
@@ -13512,7 +13529,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   --toolbar-item-off-hover-background:var(--bp-surface-toggle-surface-hover);
   --toolbar-item-off-hover-border:var(--bp-border-01) solid var(--bp-surface-toggle-surface-hover);
   --toolbar-item-focus-outline:var(--bp-outline-focus-on-light);
-  --toolbar-item-disabled-opacity:.3;
+  --toolbar-item-disabled-opacity:0.3;
   --toolbar-toggle-on-pressed-border:var(--bp-border-01) solid var(--bp-border-toggle-border-on);
   --toolbar-toggle-on-pressed-background:var(--bp-surface-toggle-surface-on);
   --toolbar-toggle-icon-fill:var(--bp-icon-icon-blue);
@@ -13535,30 +13552,30 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   --toolbar-text-toggle-checked-hover-border-color:var(--bp-border-toggle-text-border-on-hover);
   --toolbar-text-toggle-checked-active-background:var(--bp-surface-toggle-text-surface-on-pressed);
   --toolbar-text-toggle-checked-active-border-color:var(--bp-border-toggle-text-border-on-pressed);
-  --trigger-button-hover-opacity:.65;
-  --trigger-button-active-opacity:.8;
+  --trigger-button-hover-opacity:0.65;
+  --trigger-button-active-opacity:0.8;
 }
-.bp_toolbar_module_toolbarItem--5aae4[data-modern=true]:active,.bp_toolbar_module_toolbarItem--5aae4[data-modern=true][data-active]{
+.bp_toolbar_module_toolbarItem--c54d6[data-modern=true]:active,.bp_toolbar_module_toolbarItem--c54d6[data-modern=true][data-active]{
   background:var(--bp-surface-toggle-surface-off-pressed);
   border:var(--bp-border-01) solid var(--bp-border-toggle-border-off);
 }
-.bp_toolbar_module_toolbarItem--5aae4[data-modern=true][data-state=on]:active,.bp_toolbar_module_toolbarItem--5aae4[data-modern=true][data-state=on][data-active]{
+.bp_toolbar_module_toolbarItem--c54d6[data-modern=true][data-state=on]:active,.bp_toolbar_module_toolbarItem--c54d6[data-modern=true][data-state=on][data-active]{
   background:var(--bp-surface-toggle-surface-on-pressed);
   border:var(--bp-border-01) solid var(--bp-border-toggle-border-on);
 }
-.bp_toolbar_module_toolbarItem--5aae4[data-modern=true][data-state=on]:hover .bp_toolbar_module_dropdownIndicator--5aae4{
+.bp_toolbar_module_toolbarItem--c54d6[data-modern=true][data-state=on]:hover .bp_toolbar_module_dropdownIndicator--c54d6{
   transform:rotate(1turn);
 }
-.bp_toolbar_module_toolbarItem--5aae4[data-modern=true].bp_toolbar_module_triggerButtonSelectedWithColor--5aae4:active,.bp_toolbar_module_toolbarItem--5aae4[data-modern=true].bp_toolbar_module_triggerButtonSelectedWithColor--5aae4[data-active]{
+.bp_toolbar_module_toolbarItem--c54d6[data-modern=true].bp_toolbar_module_triggerButtonSelectedWithColor--c54d6:active,.bp_toolbar_module_toolbarItem--c54d6[data-modern=true].bp_toolbar_module_triggerButtonSelectedWithColor--c54d6[data-active]{
   background-color:var(--toolbar-button-color);
   opacity:var(--trigger-button-active-opacity);
 }
-.bp_toolbar_module_toolbarItem--5aae4[data-modern=true].bp_toolbar_module_triggerButtonSelectedWithColor--5aae4[data-state=on]:hover{
+.bp_toolbar_module_toolbarItem--c54d6[data-modern=true].bp_toolbar_module_triggerButtonSelectedWithColor--c54d6[data-state=on]:hover{
   background-color:var(--toolbar-button-color);
   border-color:var(--toolbar-button-color);
   opacity:var(--trigger-button-hover-opacity);
 }
-.bp_toolbar_module_toolbarItem--5aae4[data-modern=true].bp_toolbar_module_toolbarButton--5aae4,.bp_toolbar_module_toolbarItem--5aae4[data-modern=true].bp_toolbar_module_toolbarTextToggleItem--5aae4{
+.bp_toolbar_module_toolbarItem--c54d6[data-modern=true].bp_toolbar_module_toolbarButton--c54d6,.bp_toolbar_module_toolbarItem--c54d6[data-modern=true].bp_toolbar_module_toolbarTextToggleItem--c54d6{
   font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:var(--bp-font-size-07);
   font-style:normal;
@@ -13566,16 +13583,24 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   letter-spacing:var(--bp-font-letter-spacing-01);
   line-height:var(--bp-font-line-height-05);
 }
+.bp_toolbar_module_toolbarItem--c54d6[data-modern=true].bp_toolbar_module_toolbarLink--c54d6{
+  font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+  font-size:var(--bp-font-size-05);
+  font-style:normal;
+  font-weight:var(--bp-font-weight-bold);
+  letter-spacing:var(--bp-font-letter-spacing-01);
+  line-height:var(--bp-font-line-height-04);
+}
 
-.bp_toolbar_module_toggleGroup--5aae4[data-modern=false]{
+.bp_toolbar_module_toggleGroup--c54d6[data-modern=false]{
   --toolbar-toggle-group-gap:var(--space-1);
 }
 
-.bp_toolbar_module_toggleGroup--5aae4[data-modern=true]{
+.bp_toolbar_module_toggleGroup--c54d6[data-modern=true]{
   --toolbar-toggle-group-gap:var(--bp-space-010);
 }
 
-.bp_toolbar_module_toolbarRoot--5aae4{
+.bp_toolbar_module_toolbarRoot--c54d6{
   align-items:center;
   background:var(--toolbar-root-background);
   border:var(--toolbar-root-border);
@@ -13586,23 +13611,23 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   padding:var(--toolbar-root-padding);
 }
 
-.bp_toolbar_module_scrollButtonWrapper--5aae4{
+.bp_toolbar_module_scrollButtonWrapper--c54d6{
   align-items:center;
   display:flex;
   gap:var(--toolbar-scroll-button-gap);
 }
-.bp_toolbar_module_scrollButtonWrapper--5aae4.bp_toolbar_module_hidden--5aae4{
+.bp_toolbar_module_scrollButtonWrapper--c54d6.bp_toolbar_module_hidden--c54d6{
   display:none;
 }
 
-.bp_toolbar_module_scrollableChildrenWrapper--5aae4{
+.bp_toolbar_module_scrollableChildrenWrapper--c54d6{
   -ms-overflow-style:none;
   scrollbar-width:none;
 }
-.bp_toolbar_module_scrollableChildrenWrapper--5aae4::-webkit-scrollbar{
+.bp_toolbar_module_scrollableChildrenWrapper--c54d6::-webkit-scrollbar{
   display:none;
 }
-.bp_toolbar_module_scrollableChildrenWrapper--5aae4{
+.bp_toolbar_module_scrollableChildrenWrapper--c54d6{
   align-items:center;
   display:flex;
   flex-grow:1;
@@ -13613,23 +13638,23 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   scroll-padding:var(--toolbar-scrollable-children-scroll-padding);
   white-space:nowrap;
 }
-.bp_toolbar_module_scrollableChildrenWrapper--5aae4 > *{
+.bp_toolbar_module_scrollableChildrenWrapper--c54d6 > *{
   flex:none;
 }
 
-.bp_toolbar_module_separator--5aae4{
+.bp_toolbar_module_separator--c54d6{
   background-color:var(--toolbar-separator-background);
   border-radius:var(--toolbar-separator-border-radius);
   height:var(--toolbar-separator-height);
   width:1px;
 }
 
-.bp_toolbar_module_toggleGroup--5aae4{
+.bp_toolbar_module_toggleGroup--c54d6{
   display:flex;
   gap:var(--toolbar-toggle-group-gap);
 }
 
-.bp_toolbar_module_toolbarItem--5aae4{
+.bp_toolbar_module_toolbarItem--c54d6{
   align-items:center;
   background:var(--toolbar-button-color, var(--toolbar-item-background));
   border:var(--toolbar-item-border);
@@ -13647,41 +13672,41 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   -webkit-user-select:none;
           user-select:none;
 }
-.bp_toolbar_module_toolbarItem--5aae4[data-disabled]{
+.bp_toolbar_module_toolbarItem--c54d6[data-disabled]{
   background:var(--toolbar-item-background);
   opacity:var(--toolbar-item-disabled-opacity);
   pointer-events:none;
 }
-.bp_toolbar_module_toolbarItem--5aae4:not([data-disabled]):focus-visible{
+.bp_toolbar_module_toolbarItem--c54d6:not([data-disabled]):focus-visible{
   box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) var(--toolbar-item-focus-outline);
 }
-.bp_toolbar_module_toolbarItem--5aae4:not([data-disabled]):hover{
+.bp_toolbar_module_toolbarItem--c54d6:not([data-disabled]):hover{
   background:var(--toolbar-button-color, var(--toolbar-item-off-hover-background));
   border:var(--toolbar-item-off-hover-border);
 }
 
-.bp_toolbar_module_toolbarToggle--5aae4[data-state=on]{
+.bp_toolbar_module_toolbarToggle--c54d6[data-state=on]{
   background:var(--toolbar-toggle-on-pressed-background);
   border:var(--toolbar-toggle-on-pressed-border);
 }
-.bp_toolbar_module_toolbarToggle--5aae4[data-state=on] svg *{
+.bp_toolbar_module_toolbarToggle--c54d6[data-state=on] svg *{
   fill:var(--toolbar-toggle-icon-fill);
 }
-.bp_toolbar_module_toolbarToggle--5aae4[data-state=on]:not([data-disabled]):hover{
+.bp_toolbar_module_toolbarToggle--c54d6[data-state=on]:not([data-disabled]):hover{
   background:var(--toolbar-toggle-on-hover-background);
   border:var(--toolbar-toggle-on-hover-border);
 }
 
-.bp_toolbar_module_triggerButtonSelectedWithColor--5aae4[data-state=on] .bp_toolbar_module_dropdownIndicator--5aae4 path{
+.bp_toolbar_module_triggerButtonSelectedWithColor--c54d6[data-state=on] .bp_toolbar_module_dropdownIndicator--c54d6 path{
   fill:var(--icon-icon-on-light);
 }
-.bp_toolbar_module_triggerButtonSelectedWithColor--5aae4[data-state=on]:hover{
+.bp_toolbar_module_triggerButtonSelectedWithColor--c54d6[data-state=on]:hover{
   background-color:var(--toolbar-button-color);
   border-color:var(--toolbar-button-color);
   opacity:var(--trigger-button-hover-opacity);
 }
 
-.bp_toolbar_module_toolbarIcon--5aae4{
+.bp_toolbar_module_toolbarIcon--c54d6{
   align-items:center;
   display:flex;
   height:var(--toolbar-icon-height);
@@ -13689,31 +13714,182 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   width:var(--toolbar-icon-width);
 }
 
-.bp_toolbar_module_toolbarTextToggleItem--5aae4{
+.bp_toolbar_module_toolbarLink--c54d6{
+  color:var(--toolbar-link-color);
+  max-width:var(--toolbar-link-max-width);
+  padding-inline:var(--toolbar-link-padding-inline);
+  text-decoration:none;
+  text-indent:unset;
+}
+
+.bp_toolbar_module_toolbarLinkText--c54d6{
+  display:block;
+  min-width:0;
+  overflow:hidden;
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+
+.bp_toolbar_module_toolbarInputContainer--c54d6{
+  align-items:center;
+  display:flex;
+  flex:1 1 0;
+  min-width:0;
+  position:relative;
+}
+
+.bp_toolbar_module_toolbarInputContainer--c54d6:has(.bp_toolbar_module_toolbarInput--c54d6[data-modern=false]){
+  --toolbar-input-height:var(--size-8);
+  --toolbar-input-padding-block:var(--space-2);
+  --toolbar-input-padding-inline:var(--space-3);
+  --toolbar-input-gap:var(--space-2);
+  --toolbar-input-background:var(--surface-input-surface);
+  --toolbar-input-border-width:var(--border-1);
+  --toolbar-input-border-color:var(--border-input-border);
+  --toolbar-input-border-color-focus:var(--border-input-border-focus);
+  --toolbar-input-border-radius:var(--radius-4);
+  --toolbar-input-box-shadow:var(--innershadow-1);
+  --toolbar-input-color:var(--text-text-on-light);
+  --toolbar-input-placeholder-color:var(--text-text-on-light-secondary);
+  --toolbar-input-focus-border-width:var(--border-2);
+  --toolbar-input-disabled-color:var(--text-text-on-light);
+  --toolbar-input-disabled-background:var(--surface-input-surface);
+  --toolbar-input-disabled-border-color:var(--border-input-border);
+  --toolbar-input-hover-border-color:var(--border-input-border-hover);
+  --toolbar-input-error-border-color:var(--border-input-border-error);
+  --toolbar-input-error-border-width:var(--border-2);
+  --toolbar-input-icon-size:var(--size-5);
+  --toolbar-input-icon-padding:var(--space-2);
+  --toolbar-input-icon-end-pad:calc(var(--toolbar-input-padding-inline) + var(--toolbar-input-icon-size) + var(--toolbar-input-icon-padding));
+}
+
+.bp_toolbar_module_toolbarInputContainer--c54d6:has(.bp_toolbar_module_toolbarInput--c54d6[data-modern=true]){
+  --toolbar-input-height:var(--bp-size-080);
+  --toolbar-input-padding-block:var(--bp-space-020);
+  --toolbar-input-padding-inline:var(--bp-space-030);
+  --toolbar-input-gap:var(--bp-space-020);
+  --toolbar-input-background:var(--bp-surface-input-surface);
+  --toolbar-input-border-width:var(--bp-border-01);
+  --toolbar-input-border-color:var(--bp-border-input-border);
+  --toolbar-input-border-color-focus:var(--bp-border-input-border-focus);
+  --toolbar-input-border-radius:var(--bp-radius-12);
+  --toolbar-input-box-shadow:var(--innershadow-1);
+  --toolbar-input-color:var(--bp-text-text-on-light);
+  --toolbar-input-placeholder-color:var(--bp-text-text-on-light-secondary);
+  --toolbar-input-focus-border-width:var(--bp-border-02);
+  --toolbar-input-disabled-color:var(--bp-text-text-on-light);
+  --toolbar-input-disabled-background:var(--bp-surface-input-surface);
+  --toolbar-input-disabled-border-color:var(--bp-border-input-border);
+  --toolbar-input-hover-border-color:var(--bp-border-input-border-hover);
+  --toolbar-input-error-border-color:var(--bp-border-input-border-error);
+  --toolbar-input-error-border-width:var(--bp-border-02);
+  --toolbar-input-icon-size:var(--bp-size-050);
+  --toolbar-input-icon-padding:var(--bp-space-020);
+  --toolbar-input-icon-end-pad:calc(var(--toolbar-input-padding-inline) + var(--toolbar-input-icon-size) + var(--toolbar-input-icon-padding));
+}
+
+.bp_toolbar_module_toolbarInput--c54d6{
+  background:var(--toolbar-input-background);
+  border:var(--toolbar-input-border-width) solid var(--toolbar-input-border-color);
+  border-radius:var(--toolbar-input-border-radius);
+  box-shadow:var(--toolbar-input-box-shadow);
+  box-sizing:border-box;
+  color:var(--toolbar-input-color);
+  gap:var(--toolbar-input-gap);
+  height:var(--toolbar-input-height);
+  min-width:0;
+  outline:none;
+  padding-block:var(--toolbar-input-padding-block);
+  padding-inline:var(--toolbar-input-padding-inline);
+  width:100%;
+}
+.bp_toolbar_module_toolbarInput--c54d6[data-modern=false]{
+  font-family:var(--body-default-font-family);
+  font-size:var(--body-default-font-size);
+  font-weight:var(--body-default-font-weight);
+  letter-spacing:var(--body-default-letter-spacing);
+  line-height:var(--body-default-line-height);
+  text-decoration:var(--body-default-text-decoration);
+  text-transform:var(--body-default-text-case);
+}
+.bp_toolbar_module_toolbarInput--c54d6[data-modern=true]{
+  font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+  font-size:var(--bp-font-size-07);
+  font-style:normal;
+  font-weight:var(--bp-font-weight-regular);
+  letter-spacing:var(--bp-font-letter-spacing-01);
+  line-height:var(--bp-font-line-height-05);
+}
+.bp_toolbar_module_toolbarInput--c54d6::placeholder{
+  color:var(--toolbar-input-placeholder-color);
+  opacity:1;
+}
+.bp_toolbar_module_toolbarInput--c54d6:focus-visible{
+  --toolbar-input-border-offset:calc(var(--toolbar-input-focus-border-width) - var(--toolbar-input-border-width));
+  border:var(--toolbar-input-focus-border-width) solid var(--toolbar-input-border-color-focus);
+  padding-inline-start:calc(var(--toolbar-input-padding-inline) - var(--toolbar-input-border-offset));
+}
+.bp_toolbar_module_toolbarInput--c54d6:disabled{
+  background:var(--toolbar-input-disabled-background);
+  border-color:var(--toolbar-input-disabled-border-color);
+  box-shadow:var(--toolbar-input-box-shadow);
+  color:var(--toolbar-input-disabled-color);
+  cursor:default;
+  opacity:.5;
+}
+.bp_toolbar_module_toolbarInput--c54d6:has(+ .bp_toolbar_module_toolbarInputErrorIcon--c54d6){
+  padding-inline-end:var(--toolbar-input-icon-end-pad);
+}
+.bp_toolbar_module_toolbarInput--c54d6:hover:not(:disabled, :focus-visible, .bp_toolbar_module_toolbarInputError--c54d6){
+  border-color:var(--toolbar-input-hover-border-color);
+}
+
+.bp_toolbar_module_toolbarInput--c54d6.bp_toolbar_module_toolbarInputError--c54d6{
+  --toolbar-input-error-border-offset:calc(var(--toolbar-input-error-border-width) - var(--toolbar-input-border-width));
+  border:var(--toolbar-input-error-border-width) solid var(--toolbar-input-error-border-color);
+  padding-inline:calc(var(--toolbar-input-padding-inline) - var(--toolbar-input-error-border-offset)) calc(var(--toolbar-input-icon-end-pad) - var(--toolbar-input-error-border-offset));
+}
+
+.bp_toolbar_module_toolbarInputErrorIcon--c54d6{
+  color:var(--toolbar-input-error-border-color);
+  height:var(--toolbar-input-icon-size);
+  inset-inline-end:var(--toolbar-input-icon-padding);
+  pointer-events:none;
+  position:absolute;
+  top:50%;
+  transform:translateY(-50%);
+  width:var(--toolbar-input-icon-size);
+}
+
+.bp_toolbar_module_toolbarInputErrorIconHidden--c54d6{
+  visibility:hidden;
+}
+
+.bp_toolbar_module_toolbarTextToggleItem--c54d6{
   border:var(--toolbar-text-toggle-off-border);
   color:var(--toolbar-text-toggle-color);
   padding-inline:var(--toolbar-text-toggle-padding-inline);
   text-indent:unset;
   white-space:nowrap;
 }
-.bp_toolbar_module_toolbarTextToggleItem--5aae4:hover{
+.bp_toolbar_module_toolbarTextToggleItem--c54d6:hover{
   background:var(--toolbar-text-toggle-hover-background);
   border-color:var(--toolbar-text-toggle-hover-border-color);
 }
-.bp_toolbar_module_toolbarTextToggleItem--5aae4:active{
+.bp_toolbar_module_toolbarTextToggleItem--c54d6:active{
   background:var(--toolbar-text-toggle-active-background);
   border-color:var(--toolbar-text-toggle-active-border-color);
 }
-.bp_toolbar_module_toolbarTextToggleItem--5aae4[aria-checked=true]{
+.bp_toolbar_module_toolbarTextToggleItem--c54d6[aria-checked=true]{
   background:var(--toolbar-text-toggle-checked-background);
   border:var(--toolbar-text-toggle-checked-border);
   color:var(--toolbar-text-toggle-checked-color);
 }
-.bp_toolbar_module_toolbarTextToggleItem--5aae4[aria-checked=true]:hover{
+.bp_toolbar_module_toolbarTextToggleItem--c54d6[aria-checked=true]:hover{
   background:var(--toolbar-text-toggle-checked-hover-background);
   border-color:var(--toolbar-text-toggle-checked-hover-border-color);
 }
-.bp_toolbar_module_toolbarTextToggleItem--5aae4[aria-checked=true]:active{
+.bp_toolbar_module_toolbarTextToggleItem--c54d6[aria-checked=true]:active{
   background:var(--toolbar-text-toggle-checked-active-background);
   border-color:var(--toolbar-text-toggle-checked-active-border-color);
 }

package/dist/lib-esm/toolbar/index.d.ts

@@ -1,4 +1,4 @@
-export { type ToolbarButtonProps, type ToolbarIconProps, type ToolbarProps, type ToolbarSeparatorProps, type ToolbarToggleGroupProps, type ToolbarToggleItemProps, type ToolbarTriggerButtonProps, type ToolbarTextToggleItemProps, } from './types';
+export { type ToolbarButtonProps, type ToolbarIconProps, type ToolbarInputProps, type ToolbarLinkProps, type ToolbarProps, type ToolbarSeparatorProps, type ToolbarToggleGroupProps, type ToolbarToggleItemProps, type ToolbarTriggerButtonProps, type ToolbarTextToggleItemProps, } from './types';
 /**
  * A container for grouping a set of controls, such as buttons, toggle groups or dropdowns.
  * @example
@@ -9,6 +9,9 @@ export { type ToolbarButtonProps, type ToolbarIconProps, type ToolbarProps, type
  *       </Toolbar.ToggleGroup>
  *       <Toolbar.Separator />
  *
+ *       <Toolbar.Link href="https://box.com">box.com</Toolbar.Link>
+ *       <Toolbar.Separator />
+ *
  *       <Toolbar.Button>
  *           share
  *       </Toolbar.Button>
@@ -48,10 +51,18 @@ export declare const Toolbar: {
      * A button item.
      */
     Button: import("react").ForwardRefExoticComponent<import("./types").ToolbarButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+    /**
+     * A text input field.
+     */
+    Input: import("react").ForwardRefExoticComponent<import("./types").ToolbarInputProps & import("react").RefAttributes<HTMLInputElement>>;
     /**
      * Component used to visually separate options in the Toolbar.
      */
     Separator: import("react").ForwardRefExoticComponent<import("@radix-ui/react-toolbar").ToolbarSeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
+    /**
+     * A link item.
+     */
+    Link: import("react").ForwardRefExoticComponent<import("./types").ToolbarLinkProps & import("react").RefAttributes<HTMLAnchorElement>>;
     /**
      * Caret icon indicating dropdown.
      */

package/dist/lib-esm/toolbar/index.js

@@ -1,6 +1,8 @@
 import { ToolbarButton } from './toolbar-button.js';
 import { ToolbarDropdownIndicator } from './toolbar-dropdown-indicator.js';
 import { ToolbarIcon } from './toolbar-icon.js';
+import { ToolbarInput } from './toolbar-input.js';
+import { ToolbarLink } from './toolbar-link.js';
 import { ToolbarRoot } from './toolbar-root.js';
 import { ToolbarSeparator } from './toolbar-separator.js';
 import { ToolbarToggleGroup } from './toolbar-toggle-group.js';
@@ -18,6 +20,9 @@ import { ToolbarTextToggleItem } from './toolbar-text-toggle-item.js';
  *       </Toolbar.ToggleGroup>
  *       <Toolbar.Separator />
  *
+ *       <Toolbar.Link href="https://box.com">box.com</Toolbar.Link>
+ *       <Toolbar.Separator />
+ *
  *       <Toolbar.Button>
  *           share
  *       </Toolbar.Button>
@@ -57,10 +62,18 @@ const Toolbar = {
    * A button item.
    */
   Button: ToolbarButton,
+  /**
+   * A text input field.
+   */
+  Input: ToolbarInput,
   /**
    * Component used to visually separate options in the Toolbar.
    */
   Separator: ToolbarSeparator,
+  /**
+   * A link item.
+   */
+  Link: ToolbarLink,
   /**
    * Caret icon indicating dropdown.
    */

package/dist/lib-esm/toolbar/toolbar-input.d.ts

@@ -0,0 +1,2 @@
+import { type ToolbarInputProps } from './types';
+export declare const ToolbarInput: import("react").ForwardRefExoticComponent<ToolbarInputProps & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,36 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { AlertCircle } from '@box/blueprint-web-assets/icons/Medium';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
+import styles from './toolbar.module.js';
+
+const ToolbarInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    className,
+    error,
+    disabled,
+    ...rest
+  } = props;
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
+  const showError = error && !disabled;
+  return jsxs("div", {
+    className: styles.toolbarInputContainer,
+    children: [jsx("input", {
+      ...rest,
+      ref: forwardedRef,
+      className: clsx(styles.toolbarInput, showError && styles.toolbarInputError, className),
+      "data-modern": enableModernizedComponents ? 'true' : 'false',
+      disabled: disabled,
+      "aria-invalid": showError || undefined
+    }), jsx(AlertCircle, {
+      "aria-hidden": "true",
+      className: clsx(styles.toolbarInputErrorIcon, !showError && styles.toolbarInputErrorIconHidden),
+      color: "currentColor"
+    })]
+  });
+});
+
+export { ToolbarInput };

package/dist/lib-esm/toolbar/toolbar-link.d.ts

@@ -0,0 +1,2 @@
+import { type ToolbarLinkProps } from './types';
+export declare const ToolbarLink: import("react").ForwardRefExoticComponent<ToolbarLinkProps & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/lib-esm/toolbar/toolbar-link.js

@@ -0,0 +1,29 @@
+import { jsx } from 'react/jsx-runtime';
+import * as ToolbarPrimitive from '@radix-ui/react-toolbar';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
+import styles from './toolbar.module.js';
+
+const ToolbarLink = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    className,
+    ...rest
+  } = props;
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
+  return jsx(ToolbarPrimitive.Link, {
+    ...rest,
+    ref: forwardedRef,
+    className: clsx(styles.toolbarItem, styles.toolbarLink, className),
+    "data-modern": enableModernizedComponents ? 'true' : 'false',
+    children: jsx("span", {
+      className: styles.toolbarLinkText,
+      children: children
+    })
+  });
+});
+
+export { ToolbarLink };

package/dist/lib-esm/toolbar/toolbar.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"dropdownIndicator":"bp_toolbar_module_dropdownIndicator--5aae4","invertCaret":"bp_toolbar_module_invertCaret--5aae4","toolbarRoot":"bp_toolbar_module_toolbarRoot--5aae4","ScrollableToolbarWithReducedPadding":"bp_toolbar_module_ScrollableToolbarWithReducedPadding--5aae4","toolbarItem":"bp_toolbar_module_toolbarItem--5aae4","toolbarButton":"bp_toolbar_module_toolbarButton--5aae4","toolbarTextToggleItem":"bp_toolbar_module_toolbarTextToggleItem--5aae4","triggerButtonSelectedWithColor":"bp_toolbar_module_triggerButtonSelectedWithColor--5aae4","toggleGroup":"bp_toolbar_module_toggleGroup--5aae4","scrollButtonWrapper":"bp_toolbar_module_scrollButtonWrapper--5aae4","hidden":"bp_toolbar_module_hidden--5aae4","scrollableChildrenWrapper":"bp_toolbar_module_scrollableChildrenWrapper--5aae4","separator":"bp_toolbar_module_separator--5aae4","toolbarToggle":"bp_toolbar_module_toolbarToggle--5aae4","toolbarIcon":"bp_toolbar_module_toolbarIcon--5aae4"};
+var styles = {"dropdownIndicator":"bp_toolbar_module_dropdownIndicator--c54d6","invertCaret":"bp_toolbar_module_invertCaret--c54d6","toolbarRoot":"bp_toolbar_module_toolbarRoot--c54d6","ScrollableToolbarWithReducedPadding":"bp_toolbar_module_ScrollableToolbarWithReducedPadding--c54d6","toolbarItem":"bp_toolbar_module_toolbarItem--c54d6","toolbarButton":"bp_toolbar_module_toolbarButton--c54d6","toolbarTextToggleItem":"bp_toolbar_module_toolbarTextToggleItem--c54d6","toolbarLink":"bp_toolbar_module_toolbarLink--c54d6","triggerButtonSelectedWithColor":"bp_toolbar_module_triggerButtonSelectedWithColor--c54d6","toggleGroup":"bp_toolbar_module_toggleGroup--c54d6","scrollButtonWrapper":"bp_toolbar_module_scrollButtonWrapper--c54d6","hidden":"bp_toolbar_module_hidden--c54d6","scrollableChildrenWrapper":"bp_toolbar_module_scrollableChildrenWrapper--c54d6","separator":"bp_toolbar_module_separator--c54d6","toolbarToggle":"bp_toolbar_module_toolbarToggle--c54d6","toolbarIcon":"bp_toolbar_module_toolbarIcon--c54d6","toolbarLinkText":"bp_toolbar_module_toolbarLinkText--c54d6","toolbarInputContainer":"bp_toolbar_module_toolbarInputContainer--c54d6","toolbarInput":"bp_toolbar_module_toolbarInput--c54d6","toolbarInputErrorIcon":"bp_toolbar_module_toolbarInputErrorIcon--c54d6","toolbarInputError":"bp_toolbar_module_toolbarInputError--c54d6","toolbarInputErrorIconHidden":"bp_toolbar_module_toolbarInputErrorIconHidden--c54d6"};
 
 export { styles as default };

package/dist/lib-esm/toolbar/types.d.ts

@@ -1,4 +1,4 @@
-import { type ToolbarButtonProps as ToolbarPrimitiveButtonProps, type ToolbarProps as ToolbarPrimitiveProps, type ToolbarSeparatorProps as ToolbarPrimitiveSeparatorProps, type ToolbarToggleItemProps as ToolbarPrimitiveToggleItemProps, type ToggleGroupProps as ToolbarToggleGroupPrimitiveProps } from '@radix-ui/react-toolbar';
+import { type ToolbarButtonProps as ToolbarPrimitiveButtonProps, type ToolbarLinkProps as ToolbarPrimitiveLinkProps, type ToolbarProps as ToolbarPrimitiveProps, type ToolbarSeparatorProps as ToolbarPrimitiveSeparatorProps, type ToolbarToggleItemProps as ToolbarPrimitiveToggleItemProps, type ToggleGroupProps as ToolbarToggleGroupPrimitiveProps } from '@radix-ui/react-toolbar';
 import { type CSSProperties, type FunctionComponent, type HTMLAttributes, type PropsWithChildren, type SVGProps } from 'react';
 interface ToolbarWithoutScrollProps {
     scrollable?: false;
@@ -51,6 +51,26 @@ export interface ToolbarIconProps {
     /** Icon rendered by the component. */
     icon: React.FunctionComponent<React.PropsWithChildren<React.SVGProps<SVGSVGElement>>>;
 }
+export interface ToolbarInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    'aria-label': NonNullable<React.HTMLAttributes<HTMLInputElement>['aria-label']>;
+    /** Input type attribute.
+     * @default 'text'
+     */
+    type?: 'text' | 'search' | 'url' | 'email' | 'tel';
+    /** Displays error styling with alert icon.
+     * @default false
+     */
+    error?: boolean;
+}
+interface ToolbarLinkCSS extends CSSProperties {
+    /** Max width of the link before truncation with ellipsis.
+     * @default '400px'
+     */
+    '--toolbar-link-max-width'?: string;
+}
+export interface ToolbarLinkProps extends Omit<ToolbarPrimitiveLinkProps, 'style'> {
+    style?: ToolbarLinkCSS;
+}
 export interface ToolbarDropdownIndicatorProps {
     /** Direction in which by indicator is pointing.
      * @default 'down'

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "14.35.0",
+    "version": "14.36.1",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -47,7 +47,7 @@
     "dependencies": {
         "@ariakit/react": "0.4.21",
         "@ariakit/react-core": "0.4.21",
-        "@box/blueprint-web-assets": "^4.120.1",
+        "@box/blueprint-web-assets": "^4.120.3",
         "@internationalized/date": "^3.12.0",
         "@radix-ui/react-accordion": "1.1.2",
         "@radix-ui/react-checkbox": "1.0.4",
@@ -77,7 +77,7 @@
         "type-fest": "^3.2.0"
     },
     "devDependencies": {
-        "@box/storybook-utils": "^0.19.16",
+        "@box/storybook-utils": "^0.19.18",
         "@figma/code-connect": "1.4.4",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",