@box/blueprint-web 12.17.2 → 12.19.0

package/dist/lib-esm/index.css

@@ -242,8 +242,131 @@
     opacity:1;
   }
 }
-.bp_base_button_module_button--4b9b3{
-  border-radius:var(--radius-2);
+.bp_base_button_module_button--45d14[data-modern=true]{
+  --button-border-radius:var(--bp-radius-10);
+}
+.bp_base_button_module_button--45d14[data-modern=true]:not(:disabled)[data-focus-visible]{
+  box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) var(--bp-outline-focus-on-light);
+}
+.bp_base_button_module_button--45d14[data-modern=true].bp_base_button_module_primary--45d14{
+  --button-color:var(--bp-text-text-brand-on-color);
+  --button-background:var(--bp-surface-surface-brand);
+  --button-border:var(--bp-border-01) solid var(--bp-surface-surface-brand);
+  --button-disabled-background:var(--bp-surface-surface-brand-disabled);
+  --button-focus-or-hover-background:var(--bp-surface-surface-brand-hover);
+  --button-focus-or-hover-border:var(--bp-border-01) solid var(--bp-surface-surface-brand-hover);
+  --button-active-background:var(--bp-surface-surface-brand-pressed);
+  --button-active-border:var(--bp-border-01) solid var(--bp-surface-surface-brand-pressed);
+}
+.bp_base_button_module_button--45d14[data-modern=true].bp_base_button_module_secondary--45d14{
+  --button-color:var(--bp-text-text-on-light);
+  --button-background:var(--bp-surface-cta-surface-secondary);
+  --button-border:var(--bp-border-01) solid var(--bp-border-cta-border-secondary);
+  --button-focus-or-hover-background:var(--bp-surface-cta-surface-secondary-hover);
+  --button-focus-or-hover-border:var(--bp-border-01) solid var(--bp-border-cta-border-secondary-hover);
+  --button-active-background:var(--bp-surface-cta-surface-secondary-pressed);
+  --button-active-border:var(--bp-border-01) solid var(--bp-border-cta-border-secondary-pressed);
+}
+.bp_base_button_module_button--45d14[data-modern=true].bp_base_button_module_tertiary--45d14{
+  --button-color:var(--bp-text-cta-link);
+  --button-background:var(--bp-surface-cta-surface-tertiary);
+  --button-focus-or-hover-background:var(--bp-surface-cta-surface-tertiary-hover);
+  --button-active-background:var(--bp-surface-cta-surface-tertiary-pressed);
+}
+.bp_base_button_module_button--45d14[data-modern=true].bp_base_button_module_outline--45d14{
+  --button-color:var(--bp-text-text-on-light);
+  --button-background:var(-bp-surface-cta-surface-outline);
+  --button-border:var(--bp-border-01) solid var(--bp-border-cta-border-outline);
+  --button-focus-or-hover-background:var(--bp-surface-cta-surface-outline-hover);
+  --button-focus-or-hover-border:var(--bp-border-01) solid var(--bp-border-cta-border-outline-hover);
+  --button-active-background:var(--bp-surface-cta-surface-outline-pressed);
+  --button-active-border:var(--bp-border-01) solid var(--bp-border-cta-border-outline-pressed);
+}
+.bp_base_button_module_button--45d14[data-modern=true].bp_base_button_module_small--45d14{
+  --button-small-gap:var(--bp-space-010);
+  --button-small-min-height:var(--bp-size-080);
+  --button-small-padding:0 var(--bp-size-040);
+}
+.bp_base_button_module_button--45d14[data-modern=true].bp_base_button_module_small--45d14.bp_base_button_module_isIconButton--45d14{
+  --icon-button-small-width:var(--bp-size-080);
+  --icon-button-small-height:var(--bp-size-080);
+  --icon-button-small-padding:0 calc((var(--bp-size-080) - var(--bp-size-040))/2);
+}
+.bp_base_button_module_button--45d14[data-modern=true].bp_base_button_module_large--45d14{
+  --button-large-gap:var(--bp-space-020);
+  --button-large-min-height:var(--bp-size-100);
+  --button-large-padding:0 var(--bp-size-040);
+}
+.bp_base_button_module_button--45d14[data-modern=true].bp_base_button_module_large--45d14.bp_base_button_module_isIconButton--45d14{
+  --icon-button-large-width:var(--bp-size-100);
+  --icon-button-large-height:var(--bp-size-100);
+  --icon-button-large-padding:0 calc((var(--bp-size-100) - var(--bp-size-050))/2);
+}
+
+.bp_base_button_module_button--45d14[data-modern=false]{
+  --button-border-radius:var(--radius-2);
+}
+.bp_base_button_module_button--45d14[data-modern=false]:not(:disabled)[data-focus-visible]{
+  box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) var(--outline-focus-on-light);
+}
+.bp_base_button_module_button--45d14[data-modern=false].bp_base_button_module_primary--45d14{
+  --button-color:var(--text-text-brand-on-color);
+  --button-background:var(--surface-surface-brand);
+  --button-border:var(--border-1) solid var(--surface-surface-brand);
+  --button-disabled-background:var(--surface-surface-brand-disabled);
+  --button-focus-or-hover-background:var(--surface-surface-brand-hover);
+  --button-focus-or-hover-border:var(--border-1) solid var(--surface-surface-brand-hover);
+  --button-active-background:var(--surface-surface-brand-pressed);
+  --button-active-border:var(--border-1) solid var(--surface-surface-brand-pressed);
+}
+.bp_base_button_module_button--45d14[data-modern=false].bp_base_button_module_secondary--45d14{
+  --button-color:var(--text-text-on-light);
+  --button-background:var(--surface-cta-surface-secondary);
+  --button-border:var(--border-1) solid var(--border-cta-border-secondary);
+  --button-focus-or-hover-background:var(--surface-cta-surface-secondary-hover);
+  --button-focus-or-hover-border:var(--border-1) solid var(--border-cta-border-secondary-hover);
+  --button-active-background:var(--surface-cta-surface-secondary-pressed);
+  --button-active-border:var(--border-1) solid var(--border-cta-border-secondary-pressed);
+}
+.bp_base_button_module_button--45d14[data-modern=false].bp_base_button_module_tertiary--45d14{
+  --button-color:var(--text-cta-link);
+  --button-background:#0000;
+  --button-border:var(--border-1) solid #0000;
+  --button-focus-or-hover-background:var(--surface-cta-surface-tertiary-hover);
+  --button-active-background:var(--surface-cta-surface-tertiary-pressed);
+}
+.bp_base_button_module_button--45d14[data-modern=false].bp_base_button_module_outline--45d14{
+  --button-color:var(--text-text-on-light);
+  --button-background:var(--surface-cta-surface-outline);
+  --button-border:var(--border-1) solid var(--border-cta-border-outline);
+  --button-focus-or-hover-background:var(--surface-cta-surface-outline-hover);
+  --button-focus-or-hover-border:var(--border-1) solid var(--border-cta-border-outline-hover);
+  --button-active-background:var(--surface-cta-surface-outline-pressed);
+  --button-active-border:var(--border-1) solid var(--border-cta-border-outline-pressed);
+}
+.bp_base_button_module_button--45d14[data-modern=false].bp_base_button_module_small--45d14{
+  --button-small-gap:var(--space-1);
+  --button-small-min-height:var(--size-8);
+  --button-small-padding:0 var(--space-4);
+}
+.bp_base_button_module_button--45d14[data-modern=false].bp_base_button_module_small--45d14.bp_base_button_module_isIconButton--45d14{
+  --icon-button-small-width:var(--size-8);
+  --icon-button-small-height:var(--size-8);
+  --icon-button-small-padding:0 calc((var(--space-8) - var(--space-4))/2);
+}
+.bp_base_button_module_button--45d14[data-modern=false].bp_base_button_module_large--45d14{
+  --button-large-gap:var(--space-2);
+  --button-large-min-height:var(--size-10);
+  --button-large-padding:0 var(--space-4);
+}
+.bp_base_button_module_button--45d14[data-modern=false].bp_base_button_module_large--45d14.bp_base_button_module_isIconButton--45d14{
+  --icon-button-large-width:var(--size-10);
+  --icon-button-large-height:var(--size-10);
+  --icon-button-large-padding:0 calc((var(--space-10) - var(--space-5))/2);
+}
+
+.bp_base_button_module_button--45d14{
+  border-radius:var(--button-border-radius);
   cursor:pointer;
   font-family:var(--body-default-bold-font-family);
   font-size:var(--body-default-bold-font-size);
@@ -259,95 +382,92 @@
           user-select:none;
   white-space:nowrap;
 }
-.bp_base_button_module_button--4b9b3,.bp_base_button_module_button--4b9b3 .bp_base_button_module_icon--4b9b3{
+.bp_base_button_module_button--45d14,.bp_base_button_module_button--45d14 .bp_base_button_module_icon--45d14{
   align-items:center;
   display:flex;
 }
-.bp_base_button_module_button--4b9b3:not(:disabled)[data-focus-visible]{
-  box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) var(--outline-focus-on-light);
-}
-.bp_base_button_module_button--4b9b3:disabled{
+.bp_base_button_module_button--45d14:disabled{
   opacity:.3;
 }
-.bp_base_button_module_button--4b9b3.bp_base_button_module_primary--4b9b3{
-  background:var(--surface-surface-brand);
-  border:var(--border-1) solid var(--surface-surface-brand);
-  color:var(--text-text-brand-on-color);
+.bp_base_button_module_button--45d14.bp_base_button_module_primary--45d14{
+  background:var(--button-background);
+  border:var(--button-border);
+  color:var(--button-color);
 }
-.bp_base_button_module_button--4b9b3.bp_base_button_module_primary--4b9b3:disabled{
-  background:var(--surface-surface-brand-disabled);
+.bp_base_button_module_button--45d14.bp_base_button_module_primary--45d14:disabled{
+  background:var(--button-disabled-background);
 }
-.bp_base_button_module_button--4b9b3.bp_base_button_module_primary--4b9b3:not(:disabled):hover,.bp_base_button_module_button--4b9b3.bp_base_button_module_primary--4b9b3:not(:disabled)[data-focus-visible]{
-  background:var(--surface-surface-brand-hover);
-  border:var(--border-1) solid var(--surface-surface-brand-hover);
+.bp_base_button_module_button--45d14.bp_base_button_module_primary--45d14:not(:disabled):hover,.bp_base_button_module_button--45d14.bp_base_button_module_primary--45d14:not(:disabled)[data-focus-visible]{
+  background:var(--button-focus-or-hover-background);
+  border:var(--button-focus-or-hover-border);
 }
-.bp_base_button_module_button--4b9b3.bp_base_button_module_primary--4b9b3:not(:disabled):active{
-  background:var(--surface-surface-brand-pressed);
-  border:var(--border-1) solid var(--surface-surface-brand-pressed);
+.bp_base_button_module_button--45d14.bp_base_button_module_primary--45d14:not(:disabled):active{
+  background:var(--button-active-background);
+  border:var(--button-active-border);
 }
-.bp_base_button_module_button--4b9b3.bp_base_button_module_secondary--4b9b3{
-  background:var(--surface-cta-surface-secondary);
-  border:var(--border-1) solid var(--border-cta-border-secondary);
-  color:var(--text-text-on-light);
+.bp_base_button_module_button--45d14.bp_base_button_module_secondary--45d14{
+  background:var(--button-background);
+  border:var(--button-border);
+  color:var(--button-color);
 }
-.bp_base_button_module_button--4b9b3.bp_base_button_module_secondary--4b9b3:not(:disabled):hover,.bp_base_button_module_button--4b9b3.bp_base_button_module_secondary--4b9b3:not(:disabled)[data-focus-visible]{
-  background:var(--surface-cta-surface-secondary-hover);
-  border:var(--border-1) solid var(--border-cta-border-secondary-hover);
+.bp_base_button_module_button--45d14.bp_base_button_module_secondary--45d14:not(:disabled):hover,.bp_base_button_module_button--45d14.bp_base_button_module_secondary--45d14:not(:disabled)[data-focus-visible]{
+  background:var(--button-focus-or-hover-background);
+  border:var(--button-focus-or-hover-border);
 }
-.bp_base_button_module_button--4b9b3.bp_base_button_module_secondary--4b9b3:not(:disabled):active{
-  background:var(--surface-cta-surface-secondary-pressed);
-  border:var(--border-1) solid var(--border-cta-border-secondary-pressed);
+.bp_base_button_module_button--45d14.bp_base_button_module_secondary--45d14:not(:disabled):active{
+  background:var(--button-active-background);
+  border:var(--button-active-border);
 }
-.bp_base_button_module_button--4b9b3.bp_base_button_module_tertiary--4b9b3{
-  background:#0000;
-  border:var(--border-1) solid #0000;
-  color:var(--text-cta-link);
+.bp_base_button_module_button--45d14.bp_base_button_module_tertiary--45d14{
+  background:var(--button-background);
+  border:var(--button-border);
+  color:var(--button-color);
 }
-.bp_base_button_module_button--4b9b3.bp_base_button_module_tertiary--4b9b3:not(:disabled):hover,.bp_base_button_module_button--4b9b3.bp_base_button_module_tertiary--4b9b3:not(:disabled)[data-focus-visible]{
-  background:var(--surface-cta-surface-tertiary-hover);
+.bp_base_button_module_button--45d14.bp_base_button_module_tertiary--45d14:not(:disabled):hover,.bp_base_button_module_button--45d14.bp_base_button_module_tertiary--45d14:not(:disabled)[data-focus-visible]{
+  background:var(--button-focus-or-hover-background);
 }
-.bp_base_button_module_button--4b9b3.bp_base_button_module_tertiary--4b9b3:not(:disabled):active{
-  background:var(--surface-cta-surface-tertiary-pressed);
+.bp_base_button_module_button--45d14.bp_base_button_module_tertiary--45d14:not(:disabled):active{
+  background:var(--button-active-background);
 }
-.bp_base_button_module_button--4b9b3.bp_base_button_module_outline--4b9b3{
-  background:#0000;
-  border:var(--border-1) solid var(--border-cta-border-outline);
-  color:var(--text-text-on-light);
+.bp_base_button_module_button--45d14.bp_base_button_module_outline--45d14{
+  background:var(--button-background);
+  border:var(--button-border);
+  color:var(--button-color);
 }
-.bp_base_button_module_button--4b9b3.bp_base_button_module_outline--4b9b3:not(:disabled):hover,.bp_base_button_module_button--4b9b3.bp_base_button_module_outline--4b9b3:not(:disabled)[data-focus-visible]{
-  background:var(--surface-cta-surface-outline-hover);
-  border:var(--border-1) solid var(--border-cta-border-outline-hover);
+.bp_base_button_module_button--45d14.bp_base_button_module_outline--45d14:not(:disabled):hover,.bp_base_button_module_button--45d14.bp_base_button_module_outline--45d14:not(:disabled)[data-focus-visible]{
+  background:var(--button-focus-or-hover-background);
+  border:var(--button-focus-or-hover-border);
 }
-.bp_base_button_module_button--4b9b3.bp_base_button_module_outline--4b9b3:not(:disabled):active{
-  background:var(--surface-cta-surface-outline-pressed);
-  border:var(--border-1) solid var(--border-cta-border-outline-pressed);
+.bp_base_button_module_button--45d14.bp_base_button_module_outline--45d14:not(:disabled):active{
+  background:var(--button-active-background);
+  border:var(--button-active-border);
 }
-.bp_base_button_module_button--4b9b3.bp_base_button_module_small--4b9b3{
-  gap:var(--space-1);
-  min-height:var(--size-8);
-  padding:0 var(--space-4);
+.bp_base_button_module_button--45d14.bp_base_button_module_small--45d14{
+  gap:var(--button-small-gap);
+  min-height:var(--button-small-min-height);
+  padding:var(--button-small-padding);
 }
-.bp_base_button_module_button--4b9b3.bp_base_button_module_small--4b9b3.bp_base_button_module_isIconButton--4b9b3{
-  height:var(--size-8);
+.bp_base_button_module_button--45d14.bp_base_button_module_small--45d14.bp_base_button_module_isIconButton--45d14{
+  height:var(--icon-button-small-height);
   min-height:unset;
-  padding:0 calc((var(--space-8) - var(--space-4))/2);
-  width:var(--size-8);
+  padding:var(--icon-button-small-padding);
+  width:var(--icon-button-small-width);
 }
-.bp_base_button_module_button--4b9b3.bp_base_button_module_large--4b9b3{
-  gap:var(--space-2);
-  min-height:var(--size-10);
-  padding:0 var(--space-4);
+.bp_base_button_module_button--45d14.bp_base_button_module_large--45d14{
+  gap:var(--button-large-gap);
+  min-height:var(--button-large-min-height);
+  padding:var(--button-large-padding);
 }
-.bp_base_button_module_button--4b9b3.bp_base_button_module_large--4b9b3.bp_base_button_module_isIconButton--4b9b3{
-  height:var(--size-10);
-  padding:0 calc((var(--space-10) - var(--space-5))/2);
-  width:var(--size-10);
+.bp_base_button_module_button--45d14.bp_base_button_module_large--45d14.bp_base_button_module_isIconButton--45d14{
+  height:var(--icon-button-large-height);
+  padding:var(--icon-button-large-padding);
+  width:var(--icon-button-large-width);
 }
-.bp_base_button_module_button--4b9b3.bp_base_button_module_hide--4b9b3{
+.bp_base_button_module_button--45d14.bp_base_button_module_hide--45d14{
   pointer-events:none;
   position:relative;
 }
-.bp_base_button_module_button--4b9b3.bp_base_button_module_hide--4b9b3 span{
+.bp_base_button_module_button--45d14.bp_base_button_module_hide--45d14 span{
   color:#0000;
   opacity:0;
 }
@@ -6908,6 +7028,147 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   background:var(--surface-toggletext-surface-on-pressed);
   border-color:var(--border-toggletext-border-on-pressed);
 }
+
+.bp_time_picker_module_timePicker--7ed90{
+  --time-picker-padding-right:var(--space-4);
+  --time-picker-border-width:var(--border-2);
+  --time-picker-focused-border-color:var(--outline-focus-on-light);
+  --clear-time-picker-button-right:var(--size-11);
+  --time-picker-icon-button-size:var(--size-6);
+  --time-picker-icon-size:var(--size-4);
+  width:100%;
+}
+.bp_time_picker_module_timePicker--7ed90.bp_time_picker_module_disabled--7ed90{
+  opacity:60%;
+  pointer-events:none;
+  -webkit-user-select:none;
+          user-select:none;
+}
+.bp_time_picker_module_timePicker--7ed90 .bp_time_picker_module_label--7ed90{
+  cursor:default;
+  display:block;
+  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);
+  margin-block-end:var(--space-2);
+  -webkit-text-decoration:var(--body-default-bold-text-decoration);
+          text-decoration:var(--body-default-bold-text-decoration);
+  text-transform:var(--body-default-bold-text-case);
+  width:-moz-fit-content;
+  width:fit-content;
+}
+.bp_time_picker_module_timePicker--7ed90 .bp_time_picker_module_group--7ed90{
+  align-items:center;
+  border-radius:var(--radius-2);
+  box-shadow:var(--innershadow-1);
+  box-sizing:border-box;
+  display:inline-flex;
+  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);
+  outline:var(--border-1) solid var(--border-input-border);
+  padding-inline:var(--space-3) var(--time-picker-padding-right);
+  position:relative;
+  -webkit-text-decoration:var(--body-default-text-decoration);
+          text-decoration:var(--body-default-text-decoration);
+  text-transform:var(--body-default-text-case);
+  width:100%;
+}
+.bp_time_picker_module_timePicker--7ed90 .bp_time_picker_module_group--7ed90:focus-within{
+  outline:var(--time-picker-border-width) solid var(--time-picker-focused-border-color);
+}
+.bp_time_picker_module_timePicker--7ed90 .bp_time_picker_module_group--7ed90.bp_time_picker_module_error--7ed90:not(:focus-within){
+  outline:var(--time-picker-border-width) solid var(--text-text-error-on-light);
+}
+.bp_time_picker_module_timePicker--7ed90 .bp_time_picker_module_group--7ed90.bp_time_picker_module_error--7ed90:focus-within{
+  outline:var(--time-picker-border-width) solid var(--time-picker-focused-border-color);
+}
+.bp_time_picker_module_timePicker--7ed90 .bp_time_picker_module_timeInput--7ed90{
+  align-items:center;
+  display:inline-flex;
+  height:var(--size-10);
+  margin-inline-end:calc(var(--time-picker-icon-button-size) + var(--clear-time-picker-button-right));
+  text-transform:uppercase;
+  white-space:nowrap;
+}
+.bp_time_picker_module_timePicker--7ed90 .bp_time_picker_module_timeInputSegment--7ed90{
+  border:unset;
+  border-radius:unset;
+  border-radius:var(--radius-1);
+  box-shadow:unset;
+  color:var(--text-text-on-light);
+  height:-moz-fit-content;
+  height:fit-content;
+  padding:unset;
+  transition:unset;
+  width:unset;
+}
+.bp_time_picker_module_timePicker--7ed90 .bp_time_picker_module_timeInputSegment--7ed90[data-placeholder]{
+  color:var(--text-text-on-light-secondary);
+}
+.bp_time_picker_module_timePicker--7ed90 .bp_time_picker_module_timeInputSegment--7ed90[role=spinbutton]{
+  margin:0 var(--space-05);
+  padding:0 var(--space-1);
+}
+.bp_time_picker_module_timePicker--7ed90 .bp_time_picker_module_timeInputSegment--7ed90:active,.bp_time_picker_module_timePicker--7ed90 .bp_time_picker_module_timeInputSegment--7ed90:focus{
+  background:var(--box-blue-100);
+  caret-color:#0000;
+  color:var(--text-text-brand-on-color);
+  outline:none;
+}
+.bp_time_picker_module_timePicker--7ed90 .bp_time_picker_module_timeInputSegment--7ed90:nth-child(1 of [role=spinbutton]){
+  margin-inline-start:0;
+}
+.bp_time_picker_module_timePicker--7ed90 .bp_time_picker_module_timeInputSegment--7ed90[data-type=literal] + [data-type=dayPeriod]{
+  margin-inline-start:calc(var(--space-1)*-1);
+}
+.bp_time_picker_module_timePicker--7ed90 .bp_time_picker_module_clearButton--7ed90{
+  align-items:center;
+  background-color:initial;
+  border:none;
+  border-radius:var(--radius-2);
+  cursor:pointer;
+  display:flex;
+  height:var(--time-picker-icon-button-size);
+  justify-content:center;
+  outline:none;
+  padding:0;
+  position:absolute;
+  right:var(--clear-time-picker-button-right);
+  width:var(--time-picker-icon-button-size);
+}
+.bp_time_picker_module_timePicker--7ed90 .bp_time_picker_module_clearButton--7ed90:focus-visible,.bp_time_picker_module_timePicker--7ed90 .bp_time_picker_module_clearButton--7ed90[data-focus-visible]{
+  background-color:var(--surface-cta-surface-icon-pressed);
+  outline:var(--border-2) solid var(--outline-focus-on-light);
+}
+.bp_time_picker_module_timePicker--7ed90 .bp_time_picker_module_clearButton--7ed90:hover{
+  background:var(--surface-cta-surface-icon-hover);
+}
+.bp_time_picker_module_timePicker--7ed90 .bp_time_picker_module_clearButton--7ed90:hover *{
+  fill:var(--icon-cta-icon-hover);
+}
+.bp_time_picker_module_timePicker--7ed90 .bp_time_picker_module_clearButton--7ed90:active{
+  background:var(--surface-cta-surface-icon-pressed);
+}
+.bp_time_picker_module_timePicker--7ed90 .bp_time_picker_module_clearButton--7ed90:active *{
+  fill:var(--icon-cta-icon-pressed);
+}
+.bp_time_picker_module_timePicker--7ed90 .bp_time_picker_module_clearButton--7ed90:disabled{
+  opacity:1;
+}
+.bp_time_picker_module_timePicker--7ed90 .bp_time_picker_module_clockIcon--7ed90{
+  height:var(--time-picker-icon-size);
+  position:absolute;
+  right:var(--time-picker-padding-right);
+  width:var(--time-picker-icon-size);
+}
+.bp_time_picker_module_timePicker--7ed90 .bp_time_picker_module_inlineError--7ed90{
+  margin-block-start:var(--space-2);
+}
 :root{
   --surface-surface-brand:#0061d5;
   --surface-surface-brand-hover:#006ae9;

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

@@ -67,6 +67,7 @@ export * from './text-area';
 export * from './text-button';
 export * from './text-input';
 export * from './text-toggle-button';
+export * from './time-picker';
 export * from './toolbar';
 export * from './tooltip';
 export * from './trigger-button';

package/dist/lib-esm/index.js

@@ -85,6 +85,7 @@ export { TextArea } from './text-area/text-area.js';
 export { TextButton } from './text-button/text-button.js';
 export { TextInput } from './text-input/text-input.js';
 export { TextToggleButton } from './text-toggle-button/text-toggle-button.js';
+export { TimePicker } from './time-picker/time-picker.js';
 export { Toolbar } from './toolbar/index.js';
 export { Tooltip, TooltipProvider } from './tooltip/tooltip.js';
 export { TriggerButton } from './trigger-button/trigger-button.js';

package/dist/lib-esm/primitives/base-button/base-button.js

@@ -2,6 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { Button } from '@ariakit/react';
 import clsx from 'clsx';
 import { forwardRef, useRef, useMemo, Children, isValidElement } from 'react';
+import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
 import { LoadingIndicator } from '../../loading-indicator/loading-indicator.js';
 import { getButtonOptions } from '../../utils/getButtonOptions.js';
 import { useForkRef } from '../../utils/useForkRef.js';
@@ -21,6 +22,9 @@ const BaseButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     'aria-label': ariaLabel,
     ...rest
   } = getButtonOptions(props);
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   const ref = useRef(null);
   const isIconButton = useMemo(() => {
     const childArray = Children.toArray(children);
@@ -42,6 +46,7 @@ const BaseButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       [styles.isIconButton]: isIconButton,
       [styles.hide]: loading
     }, className),
+    "data-modern": enableModernizedComponents,
     children: jsxs(BaseButtonContext.Provider, {
       value: context,
       children: [children, loading && loadingAriaLabel ? jsx(LoadingIndicator, {

package/dist/lib-esm/primitives/base-button/base-button.module.js

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"button":"bp_base_button_module_button--4b9b3","icon":"bp_base_button_module_icon--4b9b3","primary":"bp_base_button_module_primary--4b9b3","secondary":"bp_base_button_module_secondary--4b9b3","tertiary":"bp_base_button_module_tertiary--4b9b3","outline":"bp_base_button_module_outline--4b9b3","small":"bp_base_button_module_small--4b9b3","isIconButton":"bp_base_button_module_isIconButton--4b9b3","large":"bp_base_button_module_large--4b9b3","hide":"bp_base_button_module_hide--4b9b3"};
+var styles = {"button":"bp_base_button_module_button--45d14","primary":"bp_base_button_module_primary--45d14","secondary":"bp_base_button_module_secondary--45d14","tertiary":"bp_base_button_module_tertiary--45d14","outline":"bp_base_button_module_outline--45d14","small":"bp_base_button_module_small--45d14","isIconButton":"bp_base_button_module_isIconButton--45d14","large":"bp_base_button_module_large--45d14","icon":"bp_base_button_module_icon--45d14","hide":"bp_base_button_module_hide--45d14"};
 
 export { styles as default };

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

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 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 } from 'react';
+import { forwardRef, Children, useMemo, cloneElement } from 'react';
 import { IconButton } from '../../primitives/icon-button/icon-button.js';
 import { Tooltip } from '../../tooltip/tooltip.js';
 import { switchCase } from '../../utils/switchCase.js';
@@ -14,6 +14,7 @@ const SearchInputControlled = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     children,
     className,
     disabled = false,
+    inputClassName,
     onChange,
     onClearInput,
     onKeyDown,
@@ -22,6 +23,7 @@ const SearchInputControlled = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     searchInputAriaLabel,
     searchInputClearAriaLabel,
     searchInputClearButtonTooltip,
+    startIcon,
     value,
     variant,
     ...rest
@@ -67,9 +69,12 @@ const SearchInputControlled = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     onClick: onClearInput,
     size: 'x-small'
   }), [isGlobal, onClearInput, searchInputClearAriaLabel, showActionButton]);
+  const CustomStartIconComponent = useMemo(() => startIcon && /*#__PURE__*/cloneElement(startIcon, {
+    className: clsx(startIcon.props?.className, styles.searchIcon, isGlobal && styles.global)
+  }), [startIcon, isGlobal]);
   return jsxs("div", {
     className: clsx(styles.search, disabled && styles.disabled, className),
-    children: [jsx(Search, {
+    children: [startIcon ? CustomStartIconComponent : jsx(Search, {
       "aria-hidden": "true",
       className: clsx(styles.searchIcon, isGlobal && styles.global),
       color: IconIconOnLightSecondary
@@ -79,7 +84,7 @@ const SearchInputControlled = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       "aria-label": searchInputAriaLabel,
       className: clsx(styles.searchInput, isGlobal && styles.global, {
         [styles.withoutActionButton]: isGlobal && !showActionButton
-      }),
+      }, inputClassName),
       disabled: disabled,
       onChange: onChange,
       onKeyDown: onSearchInputKeyDown,

package/dist/lib-esm/search-input/types.d.ts

@@ -1,6 +1,9 @@
 import type React from 'react';
 import { type IconButtonProps } from '../primitives/icon-button';
 export interface SearchInputProps extends Omit<React.ComponentPropsWithRef<'input'>, 'onChange' | 'onSubmit'> {
+    /**
+     * Class name for search input component
+     */
     className?: string;
     /**
      * Default value for search input.
@@ -14,6 +17,10 @@ export interface SearchInputProps extends Omit<React.ComponentPropsWithRef<'inpu
      * @default false
      */
     disabled?: boolean;
+    /**
+     * Class name for the input element within search input component
+     */
+    inputClassName?: string;
     /**
      * Handler that is called when the search value is changed.
      */
@@ -34,6 +41,10 @@ export interface SearchInputProps extends Omit<React.ComponentPropsWithRef<'inpu
      * Search through site content clear input button aria-label.
      */
     searchInputClearAriaLabel: string;
+    /**
+     * Custom icon to be displayed in the start of the search input in place of search icon
+     */
+    startIcon?: React.ReactElement;
     /**
      * Input type, fixed to 'search'.
      */

package/dist/lib-esm/time-picker/index.d.ts

@@ -0,0 +1,2 @@
+export { TimePicker } from './time-picker';
+export { type TimePickerProps, type TimePickerTime } from './types';

package/dist/lib-esm/time-picker/time-picker.d.ts

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

package/dist/lib-esm/time-picker/time-picker.js

@@ -0,0 +1,115 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ClockBadge, XMark } from '@box/blueprint-web-assets/icons/Fill';
+import { Gray65, Size4 } from '@box/blueprint-web-assets/tokens/tokens';
+import clsx from 'clsx';
+import { forwardRef, useRef, useCallback } from 'react';
+import { TimeField, Group, DateInput, DateSegment } from 'react-aria-components';
+import { IconButton } from '../primitives/icon-button/icon-button.js';
+import { InlineError } from '../primitives/inline-error/inline-error.js';
+import { useLabelable } from '../util-components/labelable/useLabelable.js';
+import { useControllableState } from '../utils/useControllableState.js';
+import { useUniqueId } from '../utils/useUniqueId.js';
+import styles from './time-picker.module.js';
+
+const ClearIcon = label => () => jsx(XMark, {
+  "aria-label": label,
+  color: Gray65,
+  height: Size4,
+  width: Size4
+});
+const TimePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    className,
+    onChange,
+    value,
+    defaultValue,
+    label,
+    error,
+    isDisabled,
+    hideLabel = false,
+    clearTimePickerAriaLabel,
+    clockIconAriaLabel,
+    shouldForceLeadingZeros = true,
+    ...rest
+  } = props;
+  // Component may be uncontrolled or controlled
+  const [time, setTimeValue] = useControllableState({
+    prop: value,
+    onChange,
+    defaultProp: defaultValue
+  });
+  const firstSegmentRef = useRef(null);
+  const handleClearInputButtonClicked = useCallback(() => {
+    setTimeValue(null);
+  }, [setTimeValue]);
+  const handleClearButtonKeypress = useCallback(({
+    key
+  }) => {
+    if ([' ', 'Enter'].includes(key)) {
+      handleClearInputButtonClicked();
+      firstSegmentRef.current?.focus();
+    }
+  }, [handleClearInputButtonClicked]);
+  const inlineErrorId = useUniqueId('inline-error-');
+  const Label = useLabelable(label, useUniqueId('time-picker-'));
+  const hasError = !!error && !isDisabled;
+  const ariaDescribedBy = clsx(rest['aria-describedby'], {
+    [inlineErrorId]: hasError
+  });
+  return jsxs(TimeField, {
+    ...rest,
+    ref: forwardedRef,
+    "aria-describedby": ariaDescribedBy,
+    className: clsx(styles.timePicker, {
+      [styles.disabled]: isDisabled
+    }, className),
+    isDisabled: isDisabled,
+    isInvalid: hasError,
+    onChange: setTimeValue,
+    shouldForceLeadingZeros: shouldForceLeadingZeros,
+    value: time,
+    children: [jsx(Label, {
+      className: clsx(styles.label, {
+        [styles.disabled]: isDisabled
+      }),
+      hideLabel: hideLabel
+    }), jsxs(Group, {
+      className: clsx(styles.group, {
+        [styles.error]: hasError
+      }),
+      children: [jsx(DateInput, {
+        className: clsx(styles.timeInput),
+        children: segment => jsx(DateSegment, {
+          ref: node => {
+            // We need to find the first actionable segment, i.e. spinbutton
+            if (!firstSegmentRef.current && node.role === 'spinbutton') {
+              firstSegmentRef.current = node;
+            }
+          },
+          className: styles.timeInputSegment,
+          segment: segment
+        })
+      }), (value || time) && jsx(IconButton, {
+        "aria-label": clearTimePickerAriaLabel,
+        className: styles.clearButton,
+        disabled: isDisabled,
+        icon: ClearIcon(clearTimePickerAriaLabel),
+        onClick: handleClearInputButtonClicked,
+        onKeyDownCapture: handleClearButtonKeypress,
+        size: "x-small"
+      }), jsx(ClockBadge, {
+        "aria-label": clockIconAriaLabel,
+        className: styles.clockIcon,
+        color: Gray65,
+        height: Size4,
+        width: Size4
+      })]
+    }), jsx(InlineError, {
+      className: styles.inlineError,
+      id: inlineErrorId,
+      children: error
+    })]
+  });
+});
+
+export { TimePicker };

package/dist/lib-esm/time-picker/time-picker.module.js

@@ -0,0 +1,4 @@
+import '../index.css';
+var styles = {"timePicker":"bp_time_picker_module_timePicker--7ed90","disabled":"bp_time_picker_module_disabled--7ed90","label":"bp_time_picker_module_label--7ed90","group":"bp_time_picker_module_group--7ed90","error":"bp_time_picker_module_error--7ed90","timeInput":"bp_time_picker_module_timeInput--7ed90","timeInputSegment":"bp_time_picker_module_timeInputSegment--7ed90","clearButton":"bp_time_picker_module_clearButton--7ed90","clockIcon":"bp_time_picker_module_clockIcon--7ed90","inlineError":"bp_time_picker_module_inlineError--7ed90"};
+
+export { styles as default };

package/dist/lib-esm/time-picker/types.d.ts

@@ -0,0 +1,24 @@
+import { type Time } from '@internationalized/date';
+import { type TimeFieldProps as RACTimeFieldProps } from 'react-aria-components';
+import { type Labelable } from '../util-components/labelable';
+export type { Time as TimePickerTime };
+export interface TimePickerProps extends Omit<RACTimeFieldProps<Time>, 'children'>, Labelable {
+    /**
+     * When `true`, label text is hidden.
+     *
+     * @default false
+     */
+    hideLabel?: boolean;
+    /**
+     * Aria label for button clearing TimePicker input
+     */
+    clearTimePickerAriaLabel: string;
+    /**
+     * Aria label for clock icon
+     */
+    clockIconAriaLabel: string;
+    /**
+     * The content of the error message.
+     */
+    error?: React.ReactNode;
+}

package/dist/lib-esm/utils/useCallbackRef.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-// copy of radix hook: https://github.com/radix-ui/primitives/blob/main/packages/react/use-callback-ref/src/useCallbackRef.tsx
+// copy of radix hook: https://github.com/radix-ui/primitives/blob/main/packages/react/use-callback-ref/src/use-callback-ref.tsx
 /**
  * A custom hook that converts a callback to a ref to avoid triggering re-renders when passed as a
  * prop or avoid re-executing effects when passed as a dependency

package/package.json

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