@box/blueprint-web 15.1.1 → 15.3.0

package/dist/lib-esm/blueprint-configuration-context/consts.d.ts

@@ -38,7 +38,7 @@ export declare const BLUEPRINT_CONFIGURATION_SPLITS: {
  */
 export declare const ANIMATED_COMPONENTS_BY_PHASE: {
     readonly phase1: readonly ["Button", "IconButton", "DropdownMenu", "Tooltip", "Popover", "SplitButton", "CardTooltip", "NavigationMenu", "Modal", "TextButton", "ContextMenu"];
-    readonly phase2: readonly ["DropdownTrigger", "Switch", "Checkbox", "TextInput", "Select", "Datepicker", "TextArea", "Combobox", "PasswordInput", "ComboboxGroup"];
+    readonly phase2: readonly ["DropdownTrigger", "Switch", "Checkbox", "TextInput", "Select", "Datepicker", "TextArea", "Combobox", "PasswordInput", "ComboboxGroup", "InlineError"];
     readonly phase3: readonly [];
 };
 /**

package/dist/lib-esm/blueprint-configuration-context/consts.js

@@ -40,7 +40,7 @@ const BLUEPRINT_CONFIGURATION_SPLITS = deepFreeze({
  */
 const ANIMATED_COMPONENTS_BY_PHASE = deepFreeze({
   phase1: ['Button', 'IconButton', 'DropdownMenu', 'Tooltip', 'Popover', 'SplitButton', 'CardTooltip', 'NavigationMenu', 'Modal', 'TextButton', 'ContextMenu'],
-  phase2: ['DropdownTrigger', 'Switch', 'Checkbox', 'TextInput', 'Select', 'Datepicker', 'TextArea', 'Combobox', 'PasswordInput', 'ComboboxGroup'],
+  phase2: ['DropdownTrigger', 'Switch', 'Checkbox', 'TextInput', 'Select', 'Datepicker', 'TextArea', 'Combobox', 'PasswordInput', 'ComboboxGroup', 'InlineError'],
   phase3: []
 });
 /**

package/dist/lib-esm/index.css

@@ -4546,7 +4546,7 @@
 .bp_input_chip_module_container--8ac7b .bp_input_chip_module_avatar--8ac7b.bp_input_chip_module_modern--8ac7b *{
   border-radius:unset;
 }
-.bp_inline_error_module_inlineError--4733a[data-modern=false]{
+.bp_inline_error_module_inlineError--e70b6[data-modern=false]{
   --inline-error-gap:var(--size-1);
   --inline-error-height:var(--size-4);
   --inline-error-text-color:var(--text-text-error-on-light);
@@ -4559,10 +4559,11 @@
   text-transform:var(--body-default-bold-text-case);
 }
 
-.bp_inline_error_module_inlineError--4733a[data-modern=true]{
+.bp_inline_error_module_inlineError--e70b6[data-modern=true]{
   --inline-error-gap:var(--bp-space-010);
   --inline-error-height:var(--bp-size-040);
   --inline-error-text-color:var(--bp-text-text-error-on-light);
+  --inline-error-slide-offset:calc(var(--bp-font-size-02, 0.625rem)*-1);
   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;
@@ -4571,21 +4572,54 @@
   line-height:var(--bp-font-line-height-04);
 }
 
-.bp_inline_error_module_inlineError--4733a.bp_inline_error_module_inlineError--4733a{
+.bp_inline_error_module_inlineError--e70b6.bp_inline_error_module_inlineError--e70b6{
   align-items:center;
   color:var(--inline-error-text-color);
   display:flex;
   gap:var(--inline-error-gap);
   line-height:var(--inline-error-height);
 }
-.bp_inline_error_module_inlineError--4733a.bp_inline_error_module_inlineError--4733a.bp_inline_error_module_empty--4733a{
+.bp_inline_error_module_inlineError--e70b6.bp_inline_error_module_inlineError--e70b6.bp_inline_error_module_empty--e70b6{
   display:none;
 }
-.bp_inline_error_module_inlineError--4733a.bp_inline_error_module_inlineError--4733a .bp_inline_error_module_errorIcon--4733a{
+.bp_inline_error_module_inlineError--e70b6.bp_inline_error_module_inlineError--e70b6 .bp_inline_error_module_errorIcon--e70b6{
   align-self:flex-start;
   flex-grow:0;
   flex-shrink:0;
 }
+
+.bp_inline_error_module_inlineError--e70b6.bp_inline_error_module_inlineError--e70b6.bp_inline_error_module_animated--e70b6[data-state=open]{
+  animation-duration:var(--bp-duration-short);
+  animation-fill-mode:both;
+  animation-name:bp_inline_error_module_bpInlineErrorSlideEnter--e70b6;
+  animation-timing-function:var(--bp-curve-small-on);
+}
+
+.bp_inline_error_module_inlineError--e70b6.bp_inline_error_module_inlineError--e70b6.bp_inline_error_module_animated--e70b6[data-state=closed]{
+  animation-duration:var(--bp-duration-short);
+  animation-fill-mode:forwards;
+  animation-name:bp_inline_error_module_bpInlineErrorFadeExit--e70b6;
+  animation-timing-function:var(--bp-curve-small-off);
+}
+
+@keyframes bp_inline_error_module_bpInlineErrorSlideEnter--e70b6{
+  from{
+    opacity:var(--bp-opacity-hidden);
+    transform:translateY(var(--inline-error-slide-offset));
+  }
+  to{
+    opacity:var(--bp-opacity-visible);
+    transform:translateY(0);
+  }
+}
+@keyframes bp_inline_error_module_bpInlineErrorFadeExit--e70b6{
+  from{
+    opacity:var(--bp-opacity-visible);
+  }
+  to{
+    opacity:var(--bp-opacity-hidden);
+  }
+}
 .bp_labelable_module_required--25dbc{
   align-items:center;
   display:inline-flex;
@@ -9620,19 +9654,7 @@ table.bp_inline_table_module_inlineTable--fc22e[data-modern=true] td:last-child,
 .bp_page_section_module_pageSectionDivider--c939b{
   width:100%;
 }
-
-.bp_password_input_module_passwordInput--b74ce input[type=password],.bp_password_input_module_passwordInput--b74ce input[type=text]{
-  padding-inline-end:2.375rem;
-}
-.bp_password_input_module_passwordInput--b74ce .bp_password_input_module_iconButton--b74ce{
-  height:var(--size-6);
-  inset-inline-end:.5rem;
-  width:var(--size-6);
-}
-.bp_password_input_module_passwordInput--b74ce .bp_password_input_module_iconButton--b74ce:active,.bp_password_input_module_passwordInput--b74ce .bp_password_input_module_iconButton--b74ce:hover{
-  background:none;
-}
-.bp_base_text_input_module_textInputContainerOuter--8494e[data-modern=false]{
+.bp_base_text_input_module_textInputContainerOuter--403b3[data-modern=false]{
   --text-input-border-width:var(--border-1);
   --text-input-border-width-focused:var(--border-2);
   --text-input-border-width-error:var(--border-2);
@@ -9671,7 +9693,7 @@ table.bp_inline_table_module_inlineTable--fc22e[data-modern=true] td:last-child,
   text-decoration:var(--body-default-text-decoration);
   text-transform:var(--body-default-text-case);
 }
-.bp_base_text_input_module_textInputContainerOuter--8494e[data-modern=false] .bp_base_text_input_module_label--8494e{
+.bp_base_text_input_module_textInputContainerOuter--403b3[data-modern=false] .bp_base_text_input_module_label--403b3{
   font-family:var(--body-default-bold-font-family);
   font-size:var(--body-default-bold-font-size);
   font-weight:var(--body-default-bold-font-weight);
@@ -9680,7 +9702,7 @@ table.bp_inline_table_module_inlineTable--fc22e[data-modern=true] td:last-child,
   text-decoration:var(--body-default-bold-text-decoration);
   text-transform:var(--body-default-bold-text-case);
 }
-.bp_base_text_input_module_textInputContainerOuter--8494e[data-modern=false] .bp_base_text_input_module_textInputContainer--8494e .bp_base_text_input_module_textInput--8494e,.bp_base_text_input_module_textInputContainerOuter--8494e[data-modern=false] .bp_base_text_input_module_textInputContainer--8494e input[type=number].bp_base_text_input_module_textInput--8494e,.bp_base_text_input_module_textInputContainerOuter--8494e[data-modern=false] .bp_base_text_input_module_textInputContainer--8494e input[type=text].bp_base_text_input_module_textInput--8494e{
+.bp_base_text_input_module_textInputContainerOuter--403b3[data-modern=false] .bp_base_text_input_module_textInputContainer--403b3 .bp_base_text_input_module_textInput--403b3,.bp_base_text_input_module_textInputContainerOuter--403b3[data-modern=false] .bp_base_text_input_module_textInputContainer--403b3 input[type=number].bp_base_text_input_module_textInput--403b3,.bp_base_text_input_module_textInputContainerOuter--403b3[data-modern=false] .bp_base_text_input_module_textInputContainer--403b3 input[type=text].bp_base_text_input_module_textInput--403b3{
   font-family:var(--body-default-font-family);
   font-size:var(--body-default-font-size);
   font-weight:var(--body-default-font-weight);
@@ -9690,7 +9712,7 @@ table.bp_inline_table_module_inlineTable--fc22e[data-modern=true] td:last-child,
   text-transform:var(--body-default-text-case);
 }
 
-.bp_base_text_input_module_textInputContainerOuter--8494e[data-modern=true]{
+.bp_base_text_input_module_textInputContainerOuter--403b3[data-modern=true]{
   --text-input-border-width:var(--bp-border-01);
   --text-input-border-width-focused:var(--bp-border-02);
   --text-input-border-width-error:var(--bp-border-02);
@@ -9724,17 +9746,17 @@ table.bp_inline_table_module_inlineTable--fc22e[data-modern=true] td:last-child,
   --text-input-hover-border-color:var(--bp-border-input-border-hover);
   font-weight:var(--bp-font-weight-regular);
 }
-.bp_base_text_input_module_textInputContainerOuter--8494e[data-modern=true],.bp_base_text_input_module_textInputContainerOuter--8494e[data-modern=true] .bp_base_text_input_module_label--8494e{
+.bp_base_text_input_module_textInputContainerOuter--403b3[data-modern=true],.bp_base_text_input_module_textInputContainerOuter--403b3[data-modern=true] .bp_base_text_input_module_label--403b3{
   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;
   letter-spacing:var(--bp-font-letter-spacing-01);
   line-height:var(--bp-font-line-height-04);
 }
-.bp_base_text_input_module_textInputContainerOuter--8494e[data-modern=true] .bp_base_text_input_module_label--8494e{
+.bp_base_text_input_module_textInputContainerOuter--403b3[data-modern=true] .bp_base_text_input_module_label--403b3{
   font-weight:var(--bp-font-weight-bold);
 }
-.bp_base_text_input_module_textInputContainerOuter--8494e[data-modern=true] .bp_base_text_input_module_textInputContainer--8494e .bp_base_text_input_module_textInput--8494e,.bp_base_text_input_module_textInputContainerOuter--8494e[data-modern=true] .bp_base_text_input_module_textInputContainer--8494e input[type=number].bp_base_text_input_module_textInput--8494e,.bp_base_text_input_module_textInputContainerOuter--8494e[data-modern=true] .bp_base_text_input_module_textInputContainer--8494e input[type=text].bp_base_text_input_module_textInput--8494e{
+.bp_base_text_input_module_textInputContainerOuter--403b3[data-modern=true] .bp_base_text_input_module_textInputContainer--403b3 .bp_base_text_input_module_textInput--403b3,.bp_base_text_input_module_textInputContainerOuter--403b3[data-modern=true] .bp_base_text_input_module_textInputContainer--403b3 input[type=number].bp_base_text_input_module_textInput--403b3,.bp_base_text_input_module_textInputContainerOuter--403b3[data-modern=true] .bp_base_text_input_module_textInputContainer--403b3 input[type=text].bp_base_text_input_module_textInput--403b3{
   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;
@@ -9743,25 +9765,25 @@ table.bp_inline_table_module_inlineTable--fc22e[data-modern=true] td:last-child,
   line-height:var(--bp-font-line-height-04);
 }
 
-.bp_base_text_input_module_textInputContainerOuter--8494e{
+.bp_base_text_input_module_textInputContainerOuter--403b3{
   --disabled-opacity:var(--text-input-disabled-opacity-api, 60%);
   display:flex;
   flex-direction:column;
 }
-.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_label--8494e{
+.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_label--403b3{
   color:var(--text-input-label-color);
   flex:0 0 fit-content;
   width:fit-content;
 }
-.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_label--8494e:not(.bp_base_text_input_module_hidden--8494e){
+.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_label--403b3:not(.bp_base_text_input_module_hidden--403b3){
   margin-block-end:var(--text-input-row-gap);
 }
-.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e{
+.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3{
   display:flex;
   height:var(--size-10);
   position:relative;
 }
-.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e .bp_base_text_input_module_textInput--8494e,.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e input[type=number].bp_base_text_input_module_textInput--8494e,.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e input[type=text].bp_base_text_input_module_textInput--8494e{
+.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 .bp_base_text_input_module_textInput--403b3,.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 input[type=number].bp_base_text_input_module_textInput--403b3,.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 input[type=text].bp_base_text_input_module_textInput--403b3{
   background:var(--text-input-background);
   border:var(--text-input-border-width) solid var(--text-input-border-color);
   border-radius:var(--text-input-border-radius);
@@ -9773,84 +9795,105 @@ table.bp_inline_table_module_inlineTable--fc22e[data-modern=true] td:last-child,
   padding-inline:var(--text-input-padding-inline);
   width:100%;
 }
-.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e .bp_base_text_input_module_textInput--8494e:hover,.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e input[type=number].bp_base_text_input_module_textInput--8494e:hover,.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e input[type=text].bp_base_text_input_module_textInput--8494e:hover{
+.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 .bp_base_text_input_module_textInput--403b3:hover,.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 input[type=number].bp_base_text_input_module_textInput--403b3:hover,.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 input[type=text].bp_base_text_input_module_textInput--403b3:hover{
   box-shadow:var(--text-input-box-shadow);
 }
-.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e .bp_base_text_input_module_textInput--8494e::placeholder,.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e input[type=number].bp_base_text_input_module_textInput--8494e::placeholder,.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e input[type=text].bp_base_text_input_module_textInput--8494e::placeholder{
+.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 .bp_base_text_input_module_textInput--403b3::placeholder,.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 input[type=number].bp_base_text_input_module_textInput--403b3::placeholder,.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 input[type=text].bp_base_text_input_module_textInput--403b3::placeholder{
   color:var(--text-input-placeholder-color);
   opacity:1;
 }
-.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e .bp_base_text_input_module_textInput--8494e.bp_base_text_input_module_error--8494e,.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e input[type=number].bp_base_text_input_module_textInput--8494e.bp_base_text_input_module_error--8494e,.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e input[type=text].bp_base_text_input_module_textInput--8494e.bp_base_text_input_module_error--8494e{
+.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 .bp_base_text_input_module_textInput--403b3.bp_base_text_input_module_error--403b3,.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 input[type=number].bp_base_text_input_module_textInput--403b3.bp_base_text_input_module_error--403b3,.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 input[type=text].bp_base_text_input_module_textInput--403b3.bp_base_text_input_module_error--403b3{
   background:var(--text-input-error-background);
   border:var(--text-input-border-width-error) solid var(--text-input-error-border-color);
   outline:0;
   padding-inline-start:var(--text-input-padding-inline-error);
 }
-.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e .bp_base_text_input_module_textInput--8494e.bp_base_text_input_module_readOnly--8494e,.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e input[type=number].bp_base_text_input_module_textInput--8494e.bp_base_text_input_module_readOnly--8494e,.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e input[type=text].bp_base_text_input_module_textInput--8494e.bp_base_text_input_module_readOnly--8494e{
+.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 .bp_base_text_input_module_textInput--403b3.bp_base_text_input_module_readOnly--403b3,.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 input[type=number].bp_base_text_input_module_textInput--403b3.bp_base_text_input_module_readOnly--403b3,.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 input[type=text].bp_base_text_input_module_textInput--403b3.bp_base_text_input_module_readOnly--403b3{
   background-color:var(--text-input-read-only-background);
   border-color:var(--text-input-read-only-border-color);
   box-shadow:var(--text-input-box-shadow);
   color:var(--text-input-read-only-color);
   cursor:default;
 }
-.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e .bp_base_text_input_module_textInput--8494e.bp_base_text_input_module_readOnly--8494e:focus-visible,.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e input[type=number].bp_base_text_input_module_textInput--8494e.bp_base_text_input_module_readOnly--8494e:focus-visible,.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e input[type=text].bp_base_text_input_module_textInput--8494e.bp_base_text_input_module_readOnly--8494e:focus-visible{
+.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 .bp_base_text_input_module_textInput--403b3.bp_base_text_input_module_readOnly--403b3:focus-visible,.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 input[type=number].bp_base_text_input_module_textInput--403b3.bp_base_text_input_module_readOnly--403b3:focus-visible,.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 input[type=text].bp_base_text_input_module_textInput--403b3.bp_base_text_input_module_readOnly--403b3:focus-visible{
   border:var(--text-input-border-width-focused) solid var(--text-input-border-color-focus);
 }
-.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e .bp_base_text_input_module_textInput--8494e:disabled,.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e input[type=number].bp_base_text_input_module_textInput--8494e:disabled,.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e input[type=text].bp_base_text_input_module_textInput--8494e:disabled{
+.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 .bp_base_text_input_module_textInput--403b3:disabled,.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 input[type=number].bp_base_text_input_module_textInput--403b3:disabled,.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 input[type=text].bp_base_text_input_module_textInput--403b3:disabled{
   background:var(--text-input-disabled-background);
   border-color:var(--text-input-disabled-border-color);
   box-shadow:var(--text-input-box-shadow);
   color:var(--text-input-disabled-color);
 }
-.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e .bp_base_text_input_module_textInput--8494e:disabled:hover,.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e input[type=number].bp_base_text_input_module_textInput--8494e:disabled:hover,.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e input[type=text].bp_base_text_input_module_textInput--8494e:disabled:hover{
+.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 .bp_base_text_input_module_textInput--403b3:disabled:hover,.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 input[type=number].bp_base_text_input_module_textInput--403b3:disabled:hover,.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 input[type=text].bp_base_text_input_module_textInput--403b3:disabled:hover{
   border-color:var(--text-input-border-color);
 }
-.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e .bp_base_text_input_module_textInput--8494e:focus-visible,.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e input[type=number].bp_base_text_input_module_textInput--8494e:focus-visible,.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e input[type=text].bp_base_text_input_module_textInput--8494e:focus-visible{
+.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 .bp_base_text_input_module_textInput--403b3:focus-visible,.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 input[type=number].bp_base_text_input_module_textInput--403b3:focus-visible,.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 input[type=text].bp_base_text_input_module_textInput--403b3:focus-visible{
   background:var(--text-input-focused-background);
   border:var(--text-input-border-width-focused) solid var(--text-input-focused-border-color);
   outline:0;
   padding-inline-start:var(--text-input-padding-inline-focused);
 }
-.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e .bp_base_text_input_module_textInput--8494e:has(+ .bp_base_text_input_module_endIcon--8494e),.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e input[type=number].bp_base_text_input_module_textInput--8494e:has(+ .bp_base_text_input_module_endIcon--8494e),.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e input[type=text].bp_base_text_input_module_textInput--8494e:has(+ .bp_base_text_input_module_endIcon--8494e){
+.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 .bp_base_text_input_module_textInput--403b3:has(+ .bp_base_text_input_module_endIcon--403b3),.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 input[type=number].bp_base_text_input_module_textInput--403b3:has(+ .bp_base_text_input_module_endIcon--403b3),.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 input[type=text].bp_base_text_input_module_textInput--403b3:has(+ .bp_base_text_input_module_endIcon--403b3){
   padding-inline-end:calc(var(--text-input-padding-inline) + var(--end-icon-width) + var(--text-input-icon-padding));
 }
-.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e .bp_base_text_input_module_textInput--8494e:not(:disabled, :focus-visible, .bp_base_text_input_module_error--8494e):hover, .bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e input[type=number].bp_base_text_input_module_textInput--8494e:not(:disabled, :focus-visible, .bp_base_text_input_module_error--8494e):hover, .bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e input[type=text].bp_base_text_input_module_textInput--8494e:not(:disabled, :focus-visible, .bp_base_text_input_module_error--8494e):hover{
+.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 .bp_base_text_input_module_textInput--403b3:not(:disabled, :focus-visible, .bp_base_text_input_module_error--403b3):hover, .bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 input[type=number].bp_base_text_input_module_textInput--403b3:not(:disabled, :focus-visible, .bp_base_text_input_module_error--403b3):hover, .bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 input[type=text].bp_base_text_input_module_textInput--403b3:not(:disabled, :focus-visible, .bp_base_text_input_module_error--403b3):hover{
   background:var(--text-input-hover-background);
   border:var(--border-1) solid var(--text-input-hover-border-color);
 }
-.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e .bp_base_text_input_module_startIcon--8494e{
+.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 .bp_base_text_input_module_startIcon--403b3{
   left:calc(var(--text-input-padding-inline) + var(--text-input-border-width));
   position:absolute;
   top:50%;
   transform:translateY(-50%);
 }
-.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e .bp_base_text_input_module_startIcon--8494e + input.bp_base_text_input_module_textInput--8494e{
+.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 .bp_base_text_input_module_startIcon--403b3 + input.bp_base_text_input_module_textInput--403b3{
   --text-input-start-icon-space:calc(var(--text-input-icon-padding) + var(--start-icon-width));
   padding-inline-start:calc(var(--text-input-padding-inline) + var(--text-input-start-icon-space));
 }
-.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e .bp_base_text_input_module_startIcon--8494e + input.bp_base_text_input_module_textInput--8494e:focus-visible{
+.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 .bp_base_text_input_module_startIcon--403b3 + input.bp_base_text_input_module_textInput--403b3:focus-visible{
   padding-inline-start:calc(var(--text-input-padding-inline-focused) + var(--text-input-start-icon-space));
 }
-.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e .bp_base_text_input_module_startIcon--8494e + input.bp_base_text_input_module_textInput--8494e.bp_base_text_input_module_error--8494e{
+.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 .bp_base_text_input_module_startIcon--403b3 + input.bp_base_text_input_module_textInput--403b3.bp_base_text_input_module_error--403b3{
   padding-inline-start:calc(var(--text-input-padding-inline-error) + var(--text-input-start-icon-space));
 }
-.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e .bp_base_text_input_module_endIcon--8494e{
+.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 .bp_base_text_input_module_endIcon--403b3{
   position:absolute;
   right:calc(var(--text-input-padding-inline) + var(--text-input-border-width));
   top:50%;
   transform:translateY(-50%);
 }
-.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e .bp_base_text_input_module_inlineErrorIcon--8494e{
+.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 .bp_base_text_input_module_inlineErrorIcon--403b3{
   height:var(--text-input-inline-error-icon-height);
   width:var(--text-input-inline-error-icon-width);
 }
-.bp_base_text_input_module_textInputContainerOuter--8494e.bp_base_text_input_module_disabled--8494e{
+.bp_base_text_input_module_textInputContainerOuter--403b3.bp_base_text_input_module_disabled--403b3{
   opacity:var(--disabled-opacity);
 }
-.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_inlineError--8494e,.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_subtext--8494e{
+.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_inlineError--403b3,.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_subtext--403b3{
   margin-block-start:var(--text-input-inline-error-subtext-block-margin);
 }
 
+.bp_base_text_input_module_textInputContainerOuter--403b3[data-modern=true][data-bp-animated=true] .bp_base_text_input_module_textInputContainer--403b3 .bp_base_text_input_module_textInput--403b3,.bp_base_text_input_module_textInputContainerOuter--403b3[data-modern=true][data-bp-animated=true] .bp_base_text_input_module_textInputContainer--403b3 input[type=number].bp_base_text_input_module_textInput--403b3,.bp_base_text_input_module_textInputContainerOuter--403b3[data-modern=true][data-bp-animated=true] .bp_base_text_input_module_textInputContainer--403b3 input[type=text].bp_base_text_input_module_textInput--403b3{
+  transition-duration:var(--bp-duration-short);
+  transition-property:border-color, background-color;
+  transition-timing-function:var(--bp-curve-small-off);
+}
+.bp_base_text_input_module_textInputContainerOuter--403b3[data-modern=true][data-bp-animated=true] .bp_base_text_input_module_textInputContainer--403b3 .bp_base_text_input_module_textInput--403b3:not(:disabled).bp_base_text_input_module_error--403b3,.bp_base_text_input_module_textInputContainerOuter--403b3[data-modern=true][data-bp-animated=true] .bp_base_text_input_module_textInputContainer--403b3 .bp_base_text_input_module_textInput--403b3:not(:disabled):focus-visible,.bp_base_text_input_module_textInputContainerOuter--403b3[data-modern=true][data-bp-animated=true] .bp_base_text_input_module_textInputContainer--403b3 .bp_base_text_input_module_textInput--403b3:not(:disabled):hover,.bp_base_text_input_module_textInputContainerOuter--403b3[data-modern=true][data-bp-animated=true] .bp_base_text_input_module_textInputContainer--403b3 input[type=number].bp_base_text_input_module_textInput--403b3:not(:disabled).bp_base_text_input_module_error--403b3,.bp_base_text_input_module_textInputContainerOuter--403b3[data-modern=true][data-bp-animated=true] .bp_base_text_input_module_textInputContainer--403b3 input[type=number].bp_base_text_input_module_textInput--403b3:not(:disabled):focus-visible,.bp_base_text_input_module_textInputContainerOuter--403b3[data-modern=true][data-bp-animated=true] .bp_base_text_input_module_textInputContainer--403b3 input[type=number].bp_base_text_input_module_textInput--403b3:not(:disabled):hover,.bp_base_text_input_module_textInputContainerOuter--403b3[data-modern=true][data-bp-animated=true] .bp_base_text_input_module_textInputContainer--403b3 input[type=text].bp_base_text_input_module_textInput--403b3:not(:disabled).bp_base_text_input_module_error--403b3,.bp_base_text_input_module_textInputContainerOuter--403b3[data-modern=true][data-bp-animated=true] .bp_base_text_input_module_textInputContainer--403b3 input[type=text].bp_base_text_input_module_textInput--403b3:not(:disabled):focus-visible,.bp_base_text_input_module_textInputContainerOuter--403b3[data-modern=true][data-bp-animated=true] .bp_base_text_input_module_textInputContainer--403b3 input[type=text].bp_base_text_input_module_textInput--403b3:not(:disabled):hover{
+  transition-timing-function:var(--bp-curve-small-on);
+}
+
+.bp_password_input_module_passwordInput--b74ce input[type=password],.bp_password_input_module_passwordInput--b74ce input[type=text]{
+  padding-inline-end:2.375rem;
+}
+.bp_password_input_module_passwordInput--b74ce .bp_password_input_module_iconButton--b74ce{
+  height:var(--size-6);
+  inset-inline-end:.5rem;
+  width:var(--size-6);
+}
+.bp_password_input_module_passwordInput--b74ce .bp_password_input_module_iconButton--b74ce:active,.bp_password_input_module_passwordInput--b74ce .bp_password_input_module_iconButton--b74ce:hover{
+  background:none;
+}
+
 .bp_progress_bar_module_reactAriaProgressBar--43526{
   display:grid;
   grid-template-areas:"label value" "bar bar";

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

@@ -2,11 +2,14 @@ import { jsx } from 'react/jsx-runtime';
 import { Hidden, Visible } from '@box/blueprint-web-assets/icons/Line';
 import clsx from 'clsx';
 import { forwardRef, useRef, useState, useCallback } from 'react';
+import '../blueprint-configuration-context/blueprint-configuration-context.js';
+import '../blueprint-configuration-context/consts.js';
+import { useBlueprintConfiguration } from '../blueprint-configuration-context/useBlueprintConfiguration.js';
+import { BaseTextInput } from '../primitives/base-text-input/base-text-input.js';
 import { IconButton } from '../primitives/icon-button/icon-button.js';
 import { useForkRef } from '../utils/useForkRef.js';
 import { useUniqueId } from '../utils/useUniqueId.js';
 import styles from './password-input.module.js';
-import { BaseTextInput } from '../primitives/base-text-input/base-text-input.js';
 
 const PasswordInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
@@ -31,9 +34,14 @@ const PasswordInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   }, [isControlled, onPasswordVisibleChange, passwordVisibleFinal]);
   const inputType = passwordVisibleFinal ? 'text' : 'password';
   const iconButtonAriaLabel = passwordVisibleFinal ? hidePasswordAriaLabel : showPasswordAriaLabel;
+  const {
+    componentsWithAnimationEnabled
+  } = useBlueprintConfiguration();
+  const isAnimationEnabled = componentsWithAnimationEnabled.includes('PasswordInput');
   return jsx(BaseTextInput, {
     ...rest,
     ref: useForkRef(inputRef, forwardedRef),
+    "data-bp-animated": isAnimationEnabled ? 'true' : 'false',
     autoComplete: autocomplete,
     className: clsx(styles.passwordInput, props.className),
     endIcon: jsx(IconButton, {

package/dist/lib-esm/primitives/base-text-input/base-text-input.js

@@ -41,6 +41,7 @@ const BaseTextInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     startIcon,
     subtext,
     id,
+    'data-bp-animated': animatedDataAttribute,
     ...rest
   } = props;
   const uniqueId = useUniqueId('input-');
@@ -79,6 +80,7 @@ const BaseTextInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       [styles.disabled]: disabled,
       [styles.error]: shouldMarkError
     }, className),
+    "data-bp-animated": animatedDataAttribute ?? 'false',
     "data-modern": enableModernizedComponents ? 'true' : 'false',
     children: [jsx(Label, {
       className: clsx([styles.label], {

package/dist/lib-esm/primitives/base-text-input/base-text-input.module.js

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"textInputContainerOuter":"bp_base_text_input_module_textInputContainerOuter--8494e","label":"bp_base_text_input_module_label--8494e","textInputContainer":"bp_base_text_input_module_textInputContainer--8494e","textInput":"bp_base_text_input_module_textInput--8494e","hidden":"bp_base_text_input_module_hidden--8494e","error":"bp_base_text_input_module_error--8494e","readOnly":"bp_base_text_input_module_readOnly--8494e","endIcon":"bp_base_text_input_module_endIcon--8494e","startIcon":"bp_base_text_input_module_startIcon--8494e","inlineErrorIcon":"bp_base_text_input_module_inlineErrorIcon--8494e","disabled":"bp_base_text_input_module_disabled--8494e","inlineError":"bp_base_text_input_module_inlineError--8494e","subtext":"bp_base_text_input_module_subtext--8494e"};
+var styles = {"textInputContainerOuter":"bp_base_text_input_module_textInputContainerOuter--403b3","label":"bp_base_text_input_module_label--403b3","textInputContainer":"bp_base_text_input_module_textInputContainer--403b3","textInput":"bp_base_text_input_module_textInput--403b3","hidden":"bp_base_text_input_module_hidden--403b3","error":"bp_base_text_input_module_error--403b3","readOnly":"bp_base_text_input_module_readOnly--403b3","endIcon":"bp_base_text_input_module_endIcon--403b3","startIcon":"bp_base_text_input_module_startIcon--403b3","inlineErrorIcon":"bp_base_text_input_module_inlineErrorIcon--403b3","disabled":"bp_base_text_input_module_disabled--403b3","inlineError":"bp_base_text_input_module_inlineError--403b3","subtext":"bp_base_text_input_module_subtext--403b3"};
 
 export { styles as default };

package/dist/lib-esm/primitives/inline-error/inline-error.js

@@ -3,44 +3,82 @@ import { AlertBadge } from '@box/blueprint-web-assets/icons/Fill';
 import { AlertCircle } from '@box/blueprint-web-assets/icons/Medium';
 import { Size4, IconIconErrorOnLight, bpSize050 } from '@box/blueprint-web-assets/tokens/tokens';
 import clsx from 'clsx';
-import { forwardRef } from 'react';
+import { forwardRef, useCallback } from 'react';
+import '../../blueprint-configuration-context/blueprint-configuration-context.js';
+import '../../blueprint-configuration-context/consts.js';
+import { useBlueprintConfiguration } from '../../blueprint-configuration-context/useBlueprintConfiguration.js';
 import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
+import { useInlineErrorPresence } from './utils/use-inline-error-presence.js';
 import styles from './inline-error.module.js';
 
+const renderErrorContent = (content, enableModernizedComponents, errorIconClassName) => content && (!enableModernizedComponents ? jsxs(Fragment, {
+  children: [jsx(AlertBadge, {
+    className: errorIconClassName,
+    color: IconIconErrorOnLight,
+    height: Size4,
+    role: "presentation",
+    width: Size4
+  }), content]
+}) : jsxs(Fragment, {
+  children: [jsx(AlertCircle, {
+    className: errorIconClassName,
+    color: IconIconErrorOnLight,
+    height: bpSize050,
+    role: "presentation",
+    width: bpSize050
+  }), content]
+}));
 /** Renders an inline error message and icon, used to show error state in form elements. */
 const InlineError = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
     children,
     className,
+    onAnimationEnd: onAnimationEndProp,
     ...rest
   } = props;
   const {
     enableModernizedComponents
   } = useBlueprintModernization();
+  const {
+    componentsWithAnimationEnabled
+  } = useBlueprintConfiguration();
+  const isAnimationEnabled = componentsWithAnimationEnabled.includes('InlineError');
+  const useModernizedAnimation = isAnimationEnabled && enableModernizedComponents;
+  const presence = useInlineErrorPresence(children, useModernizedAnimation);
+  const {
+    onAnimationEnd: onPresenceAnimationEnd
+  } = presence;
+  const handleAnimationEnd = useCallback(event => {
+    onPresenceAnimationEnd(event);
+    onAnimationEndProp?.(event);
+  }, [onPresenceAnimationEnd, onAnimationEndProp]);
+  /** Legacy path: identical DOM/CSS to pre-animation InlineError (no mount/unmount, `.empty` + `display: none`). */
+  if (!useModernizedAnimation) {
+    return jsx("span", {
+      ...rest,
+      ref: forwardedRef,
+      className: clsx([className, styles.inlineError, {
+        [styles.empty]: !children
+      }]),
+      "data-modern": enableModernizedComponents ? 'true' : 'false',
+      onAnimationEnd: onAnimationEndProp,
+      children: renderErrorContent(children, enableModernizedComponents, styles.errorIcon)
+    });
+  }
+  /** `return null` when there is no error (and we are not in the exit phase): no visible slot for the
+  message — layout matches legacy (legacy hides the same slot via `.empty` + `display: none`). */
+  if (!presence.isMounted) {
+    return null;
+  }
   return jsx("span", {
     ...rest,
     ref: forwardedRef,
-    className: clsx([className, styles.inlineError, {
-      [styles.empty]: !children
-    }]),
-    "data-modern": enableModernizedComponents ? 'true' : 'false',
-    children: children && (!enableModernizedComponents ? jsxs(Fragment, {
-      children: [jsx(AlertBadge, {
-        className: styles.errorIcon,
-        color: IconIconErrorOnLight,
-        height: Size4,
-        role: "presentation",
-        width: Size4
-      }), children]
-    }) : jsxs(Fragment, {
-      children: [jsx(AlertCircle, {
-        className: styles.errorIcon,
-        color: IconIconErrorOnLight,
-        height: bpSize050,
-        role: "presentation",
-        width: bpSize050
-      }), children]
-    }))
+    className: clsx([className, styles.inlineError, styles.animated]),
+    "data-bp-animated": "true",
+    "data-modern": "true",
+    "data-state": presence.presenceState,
+    onAnimationEnd: handleAnimationEnd,
+    children: renderErrorContent(presence.content, enableModernizedComponents, styles.errorIcon)
   });
 });
 

package/dist/lib-esm/primitives/inline-error/inline-error.module.js

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"inlineError":"bp_inline_error_module_inlineError--4733a","empty":"bp_inline_error_module_empty--4733a","errorIcon":"bp_inline_error_module_errorIcon--4733a"};
+var styles = {"inlineError":"bp_inline_error_module_inlineError--e70b6","empty":"bp_inline_error_module_empty--e70b6","errorIcon":"bp_inline_error_module_errorIcon--e70b6","animated":"bp_inline_error_module_animated--e70b6"};
 
 export { styles as default };

package/dist/lib-esm/primitives/inline-error/utils/use-inline-error-presence.d.ts

@@ -0,0 +1,13 @@
+import { type AnimationEvent } from 'react';
+type PresenceState = 'open' | 'closed';
+/**
+ * Exit-animation presence for `InlineError`. Pattern inspired by Radix UI `usePresence`:
+ * keep the node mounted while exit CSS runs, then unmount on `animationend`.
+ */
+export declare function useInlineErrorPresence(children: React.ReactNode, isAnimationEnabled: boolean): {
+    content: string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | import("react").ReactPortal | null | undefined;
+    isMounted: boolean;
+    presenceState: PresenceState | undefined;
+    onAnimationEnd: (e: AnimationEvent<HTMLSpanElement>) => void;
+};
+export {};

package/dist/lib-esm/primitives/inline-error/utils/use-inline-error-presence.js

@@ -0,0 +1,54 @@
+import noop from 'lodash/noop';
+import { useState, useCallback } from 'react';
+import { useEnhancedEffect } from '../../../utils/useEnhancedEffect.js';
+
+const animationEndNoop = noop;
+/**
+ * Exit-animation presence for `InlineError`. Pattern inspired by Radix UI `usePresence`:
+ * keep the node mounted while exit CSS runs, then unmount on `animationend`.
+ */
+function useInlineErrorPresence(children, isAnimationEnabled) {
+  const hasContent = Boolean(children);
+  const [renderedChildren, setRenderedChildren] = useState(children);
+  const [presenceState, setPresenceState] = useState(() => isAnimationEnabled && hasContent ? 'open' : undefined);
+  const isMounted = isAnimationEnabled && (presenceState === 'open' || presenceState === 'closed');
+  const unmountAfterExit = useCallback(() => {
+    setPresenceState(undefined);
+    setRenderedChildren(undefined);
+  }, []);
+  const onAnimationEnd = useCallback(e => {
+    if (e.target !== e.currentTarget || presenceState !== 'closed') {
+      return;
+    }
+    unmountAfterExit();
+  }, [presenceState, unmountAfterExit]);
+  useEnhancedEffect(() => {
+    if (!isAnimationEnabled) {
+      return;
+    }
+    if (hasContent) {
+      setRenderedChildren(children);
+      setPresenceState('open');
+      return;
+    }
+    setPresenceState(current => current === 'open' ? 'closed' : current);
+  }, [children, isAnimationEnabled, hasContent]);
+  // When `isAnimationEnabled` is false (legacy path), return a no-op result: no mount/unmount, no exit animation.
+  // `inline-error.tsx` ignores `presence` and renders the legacy `<span>` + `.empty` instead.
+  if (!isAnimationEnabled) {
+    return {
+      content: children,
+      isMounted: false,
+      presenceState: undefined,
+      onAnimationEnd: animationEndNoop
+    };
+  }
+  return {
+    content: renderedChildren,
+    isMounted,
+    presenceState,
+    onAnimationEnd
+  };
+}
+
+export { useInlineErrorPresence };

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

@@ -3,11 +3,14 @@ import { PencilCrossed as PencilCrossed$1 } from '@box/blueprint-web-assets/icon
 import { PencilCrossed } from '@box/blueprint-web-assets/icons/Medium';
 import clsx from 'clsx';
 import { forwardRef, useRef, useCallback, useMemo, cloneElement } from 'react';
+import '../blueprint-configuration-context/blueprint-configuration-context.js';
+import '../blueprint-configuration-context/consts.js';
+import { useBlueprintConfiguration } from '../blueprint-configuration-context/useBlueprintConfiguration.js';
+import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import { LoadingIndicator } from '../loading-indicator/loading-indicator.js';
 import { BaseTextInput } from '../primitives/base-text-input/base-text-input.js';
 import { useForkRef } from '../utils/useForkRef.js';
 import styles from './text-input.module.js';
-import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 
 const TextInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
@@ -21,6 +24,10 @@ const TextInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
     enableModernizedComponents
   } = useBlueprintModernization();
+  const {
+    componentsWithAnimationEnabled
+  } = useBlueprintConfiguration();
+  const isAnimationEnabled = componentsWithAnimationEnabled.includes('TextInput');
   const inputRef = useRef(null);
   const focusInput = useCallback(() => {
     inputRef.current?.focus();
@@ -61,6 +68,7 @@ const TextInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   return jsx(BaseTextInput, {
     ...rest,
     ref: useForkRef(inputRef, forwardedRef),
+    "data-bp-animated": isAnimationEnabled ? 'true' : 'false',
     className: clsx(styles.textInput, props.className),
     readOnly: readOnly,
     ...(endIconLocal ? {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "15.1.1",
+    "version": "15.3.0",
     "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.121.4",
+        "@box/blueprint-web-assets": "^4.121.6",
         "@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.20.4",
+        "@box/storybook-utils": "^0.20.6",
         "@figma/code-connect": "1.4.4",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",