@box/blueprint-web 10.5.0 → 11.0.0

package/dist/lib-esm/index.css

@@ -1631,6 +1631,20 @@
 .bp_text_area_module_textAreaContainer--71ba4 .bp_text_area_module_inlineError--71ba4{
   margin-block-start:var(--space-2);
 }
+.bp_labelable_module_required--23e9d{
+  align-items:center;
+  display:inline-flex;
+  gap:var(--space-1);
+}
+.bp_labelable_module_required--23e9d::before{
+  color:var(--icon-icon-required-on-light);
+  content:"*";
+  font-family:monospace;
+  transform:scale(1.2);
+}
+.bp_labelable_module_required--23e9d::before *{
+  fill:var(--icon-icon-required-on-light);
+}
 
 .bp_combobox_module_container--076fd{
   display:flex;
@@ -4605,23 +4619,24 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   width:100%;
 }
 
-.bp_password_input_module_passwordInput--83618 input[type=password],.bp_password_input_module_passwordInput--83618 input[type=text]{
+.bp_password_input_module_passwordInput--c5ea1 input[type=password],.bp_password_input_module_passwordInput--c5ea1 input[type=text]{
   padding-inline-end:2.375rem;
 }
-.bp_password_input_module_passwordInput--83618 .bp_password_input_module_iconButton--83618{
+.bp_password_input_module_passwordInput--c5ea1 .bp_password_input_module_iconButton--c5ea1{
+  height:1.5rem;
   inset-inline-end:.5rem;
+  width:1.5rem;
 }
-.bp_password_input_module_passwordInput--83618 .bp_password_input_module_iconButton--83618:active,.bp_password_input_module_passwordInput--83618 .bp_password_input_module_iconButton--83618:hover{
+.bp_password_input_module_passwordInput--c5ea1 .bp_password_input_module_iconButton--c5ea1:active,.bp_password_input_module_passwordInput--c5ea1 .bp_password_input_module_iconButton--c5ea1:hover{
   background:none;
 }
 
-.bp_base_text_input_module_textInputContainer--36482{
+.bp_base_text_input_module_textInputContainerOuter--3d7b7{
   display:flex;
   flex-direction:column;
   font-weight:400;
-  position:relative;
 }
-.bp_base_text_input_module_textInputContainer--36482,.bp_base_text_input_module_textInputContainer--36482 .bp_base_text_input_module_label--36482{
+.bp_base_text_input_module_textInputContainerOuter--3d7b7,.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_label--3d7b7{
   font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:.875rem;
   letter-spacing:.01875rem;
@@ -4629,17 +4644,22 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   text-decoration:none;
   text-transform:none;
 }
-.bp_base_text_input_module_textInputContainer--36482 .bp_base_text_input_module_label--36482{
+.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_label--3d7b7{
   color:#222;
   flex:0 0 fit-content;
   font-weight:700;
   width:-moz-fit-content;
   width:fit-content;
 }
-.bp_base_text_input_module_textInputContainer--36482 .bp_base_text_input_module_label--36482:not(.bp_base_text_input_module_hidden--36482){
+.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_label--3d7b7:not(.bp_base_text_input_module_hidden--3d7b7){
   margin-block-end:var(--space-2);
 }
-.bp_base_text_input_module_textInputContainer--36482 .bp_base_text_input_module_textInput--36482,.bp_base_text_input_module_textInputContainer--36482 input[type=number].bp_base_text_input_module_textInput--36482,.bp_base_text_input_module_textInputContainer--36482 input[type=text].bp_base_text_input_module_textInput--36482{
+.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7{
+  display:flex;
+  height:2.5rem;
+  position:relative;
+}
+.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 .bp_base_text_input_module_textInput--3d7b7,.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 input[type=number].bp_base_text_input_module_textInput--3d7b7,.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 input[type=text].bp_base_text_input_module_textInput--3d7b7{
   background:#fff;
   border:.0625rem solid #909090;
   border-radius:.375rem;
@@ -4649,62 +4669,83 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:.875rem;
   font-weight:400;
-  height:2.5rem;
+  height:100%;
   letter-spacing:.01875rem;
   line-height:1.25rem;
   padding-block:0;
   padding-inline:.75rem;
   text-decoration:none;
   text-transform:none;
-  width:unset;
+  width:100%;
 }
-.bp_base_text_input_module_textInputContainer--36482 .bp_base_text_input_module_textInput--36482:hover,.bp_base_text_input_module_textInputContainer--36482 input[type=number].bp_base_text_input_module_textInput--36482:hover,.bp_base_text_input_module_textInputContainer--36482 input[type=text].bp_base_text_input_module_textInput--36482:hover{
+.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 .bp_base_text_input_module_textInput--3d7b7:hover,.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 input[type=number].bp_base_text_input_module_textInput--3d7b7:hover,.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 input[type=text].bp_base_text_input_module_textInput--3d7b7:hover{
   box-shadow:var(--innershadow-1);
 }
-.bp_base_text_input_module_textInputContainer--36482 .bp_base_text_input_module_textInput--36482::placeholder,.bp_base_text_input_module_textInputContainer--36482 input[type=number].bp_base_text_input_module_textInput--36482::placeholder,.bp_base_text_input_module_textInputContainer--36482 input[type=text].bp_base_text_input_module_textInput--36482::placeholder{
+.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 .bp_base_text_input_module_textInput--3d7b7::placeholder,.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 input[type=number].bp_base_text_input_module_textInput--3d7b7::placeholder,.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 input[type=text].bp_base_text_input_module_textInput--3d7b7::placeholder{
   color:#6f6f6f;
   opacity:1;
 }
-.bp_base_text_input_module_textInputContainer--36482 .bp_base_text_input_module_textInput--36482.bp_base_text_input_module_error--36482,.bp_base_text_input_module_textInputContainer--36482 input[type=number].bp_base_text_input_module_textInput--36482.bp_base_text_input_module_error--36482,.bp_base_text_input_module_textInputContainer--36482 input[type=text].bp_base_text_input_module_textInput--36482.bp_base_text_input_module_error--36482{
+.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 .bp_base_text_input_module_textInput--3d7b7.bp_base_text_input_module_error--3d7b7,.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 input[type=number].bp_base_text_input_module_textInput--3d7b7.bp_base_text_input_module_error--3d7b7,.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 input[type=text].bp_base_text_input_module_textInput--3d7b7.bp_base_text_input_module_error--3d7b7{
   background:#fff;
   border:.125rem solid #ed3757;
   outline:0;
   padding-inline-start:.6875rem;
 }
-.bp_base_text_input_module_textInputContainer--36482 .bp_base_text_input_module_textInput--36482:disabled,.bp_base_text_input_module_textInputContainer--36482 input[type=number].bp_base_text_input_module_textInput--36482:disabled,.bp_base_text_input_module_textInputContainer--36482 input[type=text].bp_base_text_input_module_textInput--36482:disabled{
+.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 .bp_base_text_input_module_textInput--3d7b7.bp_base_text_input_module_readOnly--3d7b7,.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 input[type=number].bp_base_text_input_module_textInput--3d7b7.bp_base_text_input_module_readOnly--3d7b7,.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 input[type=text].bp_base_text_input_module_textInput--3d7b7.bp_base_text_input_module_readOnly--3d7b7{
+  border-color:var(--border-collapsible-border);
+  box-shadow:var(--innershadow-1);
+  color:var(--text-text-on-light-secondary);
+}
+.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 .bp_base_text_input_module_textInput--3d7b7.bp_base_text_input_module_readOnly--3d7b7:focus-visible,.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 input[type=number].bp_base_text_input_module_textInput--3d7b7.bp_base_text_input_module_readOnly--3d7b7:focus-visible,.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 input[type=text].bp_base_text_input_module_textInput--3d7b7.bp_base_text_input_module_readOnly--3d7b7:focus-visible{
+  border:.125rem solid #2486fc;
+}
+.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 .bp_base_text_input_module_textInput--3d7b7.bp_base_text_input_module_readOnly--3d7b7:hover,.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 input[type=number].bp_base_text_input_module_textInput--3d7b7.bp_base_text_input_module_readOnly--3d7b7:hover,.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 input[type=text].bp_base_text_input_module_textInput--3d7b7.bp_base_text_input_module_readOnly--3d7b7:hover{
+  cursor:default;
+}
+.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 .bp_base_text_input_module_textInput--3d7b7:disabled,.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 input[type=number].bp_base_text_input_module_textInput--3d7b7:disabled,.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 input[type=text].bp_base_text_input_module_textInput--3d7b7:disabled{
   background:var(--surface-input-surface);
   border-color:var(--border-input-border);
   box-shadow:var(--innershadow-1);
   color:var(--text-text-on-light);
 }
-.bp_base_text_input_module_textInputContainer--36482 .bp_base_text_input_module_textInput--36482:disabled:hover,.bp_base_text_input_module_textInputContainer--36482 input[type=number].bp_base_text_input_module_textInput--36482:disabled:hover,.bp_base_text_input_module_textInputContainer--36482 input[type=text].bp_base_text_input_module_textInput--36482:disabled:hover{
+.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 .bp_base_text_input_module_textInput--3d7b7:disabled:hover,.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 input[type=number].bp_base_text_input_module_textInput--3d7b7:disabled:hover,.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 input[type=text].bp_base_text_input_module_textInput--3d7b7:disabled:hover{
   border-color:var(--border-input-border);
 }
-.bp_base_text_input_module_textInputContainer--36482 .bp_base_text_input_module_textInput--36482:focus-visible,.bp_base_text_input_module_textInputContainer--36482 input[type=number].bp_base_text_input_module_textInput--36482:focus-visible,.bp_base_text_input_module_textInputContainer--36482 input[type=text].bp_base_text_input_module_textInput--36482:focus-visible{
+.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 .bp_base_text_input_module_textInput--3d7b7:focus-visible,.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 input[type=number].bp_base_text_input_module_textInput--3d7b7:focus-visible,.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 input[type=text].bp_base_text_input_module_textInput--3d7b7:focus-visible{
   background:#fff;
   border:.125rem solid #2486fc;
   outline:0;
   padding-inline-start:.6875rem;
 }
-.bp_base_text_input_module_textInputContainer--36482 .bp_base_text_input_module_textInput--36482:focus-visible:has(+ :not(.bp_base_text_input_module_iconShared--36482)),.bp_base_text_input_module_textInputContainer--36482 input[type=number].bp_base_text_input_module_textInput--36482:focus-visible:has(+ :not(.bp_base_text_input_module_iconShared--36482)),.bp_base_text_input_module_textInputContainer--36482 input[type=text].bp_base_text_input_module_textInput--36482:focus-visible:has(+ :not(.bp_base_text_input_module_iconShared--36482)){
-  padding-inline:.6875rem;
+.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 .bp_base_text_input_module_textInput--3d7b7:has(+ .bp_base_text_input_module_endIcon--3d7b7),.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 input[type=number].bp_base_text_input_module_textInput--3d7b7:has(+ .bp_base_text_input_module_endIcon--3d7b7),.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 input[type=text].bp_base_text_input_module_textInput--3d7b7:has(+ .bp_base_text_input_module_endIcon--3d7b7){
+  padding-inline-end:calc(1.25rem + var(--end-icon-width));
 }
-.bp_base_text_input_module_textInputContainer--36482 .bp_base_text_input_module_textInput--36482:not(:disabled):not(:focus-visible):not(.bp_base_text_input_module_error--36482):hover,.bp_base_text_input_module_textInputContainer--36482 input[type=number].bp_base_text_input_module_textInput--36482:not(:disabled):not(:focus-visible):not(.bp_base_text_input_module_error--36482):hover,.bp_base_text_input_module_textInputContainer--36482 input[type=text].bp_base_text_input_module_textInput--36482:not(:disabled):not(:focus-visible):not(.bp_base_text_input_module_error--36482):hover{
+.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 .bp_base_text_input_module_textInput--3d7b7:not(:disabled):not(:focus-visible):not(.bp_base_text_input_module_error--3d7b7):hover,.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 input[type=number].bp_base_text_input_module_textInput--3d7b7:not(:disabled):not(:focus-visible):not(.bp_base_text_input_module_error--3d7b7):hover,.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 input[type=text].bp_base_text_input_module_textInput--3d7b7:not(:disabled):not(:focus-visible):not(.bp_base_text_input_module_error--3d7b7):hover{
   background:#fff;
   border:.0625rem solid #6f6f6f;
 }
-.bp_base_text_input_module_textInputContainer--36482 .bp_base_text_input_module_iconShared--36482{
-  height:1.5rem;
-  inset-block-end:.375rem;
-  inset-inline-start:unset;
+.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 .bp_base_text_input_module_startIcon--3d7b7{
+  left:.8125rem;
   position:absolute;
-  width:1.5rem;
+  top:50%;
+  transform:translateY(-50%);
 }
-.bp_base_text_input_module_textInputContainer--36482.bp_base_text_input_module_disabled--36482{
+.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 .bp_base_text_input_module_startIcon--3d7b7 + input.bp_base_text_input_module_textInput--3d7b7{
+  padding-inline-start:calc(1.25rem + var(--start-icon-width));
+}
+.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 .bp_base_text_input_module_startIcon--3d7b7 + input.bp_base_text_input_module_textInput--3d7b7.bp_base_text_input_module_error--3d7b7,.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 .bp_base_text_input_module_startIcon--3d7b7 + input.bp_base_text_input_module_textInput--3d7b7:focus-visible{
+  padding-inline-start:calc(1.1875rem + var(--start-icon-width));
+}
+.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_textInputContainer--3d7b7 .bp_base_text_input_module_endIcon--3d7b7{
+  position:absolute;
+  right:.8125rem;
+  top:50%;
+  transform:translateY(-50%);
+}
+.bp_base_text_input_module_textInputContainerOuter--3d7b7.bp_base_text_input_module_disabled--3d7b7{
   opacity:60%;
 }
-
-.bp_base_text_input_module_inlineError--36482{
+.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_inlineError--3d7b7,.bp_base_text_input_module_textInputContainerOuter--3d7b7 .bp_base_text_input_module_subtext--3d7b7{
   margin-block-start:var(--space-2);
 }
 .bp_chip_module_chip--26416{
@@ -6254,10 +6295,14 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   color:var(--text-cta-link-pressed);
 }
 
-.bp_text_input_module_textInput--c6e69.bp_text_input_module_textInput--c6e69.bp_text_input_module_textInput--c6e69 input:has(+ .bp_text_input_module_iconLoading--c6e69){
+.bp_text_input_module_textInput--2839a.bp_text_input_module_textInput--2839a.bp_text_input_module_textInput--2839a input:has(+ .bp_text_input_module_iconEnd--2839a){
   padding-inline-end:1.875rem;
 }
 
+.bp_text_input_module_loadingIndicatorReset--2839a div{
+  position:static;
+}
+
 .bp_text_toggle_button_module_textToggleButton--f8bea{
   background:var(--surface-toggle-surface);
   border:var(--border-1) solid var(--border-toggletext-border-off);

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

@@ -1,8 +1,8 @@
-export declare const PasswordInput: import("react").ForwardRefExoticComponent<(Omit<Omit<import("../text-input").TextInputProps, "type" | "icon" | "loading" | "loadingAriaLabel"> & {
+export declare const PasswordInput: import("react").ForwardRefExoticComponent<(Omit<Omit<import("../text-input").TextInputProps, "type" | "loading" | "loadingAriaLabel" | "icon"> & {
     showPasswordAriaLabel: string;
     hidePasswordAriaLabel: string;
     autoComplete: "current-password" | "new-password";
-} & Required<Pick<import("./types").ControlledComponentProps, keyof import("./types").ControlledComponentProps>> & Omit<import("./types").ControlledComponentProps, keyof import("./types").ControlledComponentProps>, "ref"> | Omit<Omit<import("../text-input").TextInputProps, "type" | "icon" | "loading" | "loadingAriaLabel"> & {
+} & Required<Pick<import("./types").ControlledComponentProps, keyof import("./types").ControlledComponentProps>> & Omit<import("./types").ControlledComponentProps, keyof import("./types").ControlledComponentProps>, "ref"> | Omit<Omit<import("../text-input").TextInputProps, "type" | "loading" | "loadingAriaLabel" | "icon"> & {
     showPasswordAriaLabel: string;
     hidePasswordAriaLabel: string;
     autoComplete: "current-password" | "new-password";

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

@@ -36,7 +36,7 @@ const PasswordInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     ref: useForkRef(inputRef, forwardedRef),
     autoComplete: autocomplete,
     className: clsx(styles.passwordInput, props.className),
-    icon: jsx(IconButton, {
+    endIcon: jsx(IconButton, {
       "aria-controls": inputId,
       "aria-label": iconButtonAriaLabel,
       className: styles.iconButton,

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"passwordInput":"bp_password_input_module_passwordInput--83618","iconButton":"bp_password_input_module_iconButton--83618"};
+var styles = {"passwordInput":"bp_password_input_module_passwordInput--c5ea1","iconButton":"bp_password_input_module_iconButton--c5ea1"};
 
 export { styles as default };

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

@@ -1,10 +1,11 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { forwardRef, useMemo, cloneElement } from 'react';
+import { forwardRef, useState, useMemo, cloneElement } from 'react';
+import { Text } from '../../text/text.js';
+import { useLabelable } from '../../util-components/labelable/useLabelable.js';
 import { useUniqueId } from '../../utils/useUniqueId.js';
 import { InlineError } from '../inline-error/inline-error.js';
 import styles from './base-text-input.module.js';
-import { useLabelable } from '../../util-components/labelable/useLabelable.js';
 
 /**
  * This extends a default HTML &lt;input/&gt; and accepts the same props as well as some custom ones listed below.<br/>
@@ -20,53 +21,87 @@ const BaseTextInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     disabled,
     invalid = false,
     hideLabel,
+    readOnly,
     error,
     required = false,
-    icon,
+    endIcon,
+    startIcon,
+    subtext,
     id,
     ...rest
   } = props;
   const uniqueId = useUniqueId('input-');
   const inputId = id || uniqueId;
   const inlineErrorId = useUniqueId('inline-error-');
+  const subtextId = useUniqueId('subtext-');
   const hasError = !!error && !disabled;
   const shouldMarkError = (!!error || invalid) && !disabled;
   const ariaDescribedBy = clsx(rest['aria-describedby'], {
     [inlineErrorId]: hasError
   });
-  const IconComponent = useMemo(() => icon && /*#__PURE__*/cloneElement(icon, {
-    className: clsx(icon.props?.className, styles.iconShared)
-  }), [icon]);
-  const Label = useLabelable(label, inputId);
-  return jsxs(Fragment, {
-    children: [jsxs("div", {
-      className: clsx([styles.textInputContainer], {
-        [styles.disabled]: disabled,
-        [styles.error]: shouldMarkError
-      }, className),
-      children: [jsx(Label, {
-        className: clsx([styles.label], {
-          [styles.hidden]: hideLabel
-        }),
-        hideLabel: hideLabel
-      }), jsx("input", {
+  const [startIconWidth, setStartIconWidth] = useState(null);
+  const [endIconWidth, setEndIconWidth] = useState(null);
+  const StartIconComponent = useMemo(() => startIcon && /*#__PURE__*/cloneElement(startIcon, {
+    ref: node => {
+      if (node) {
+        setStartIconWidth(node.getBoundingClientRect().width);
+      }
+    },
+    className: clsx(startIcon.props?.className, styles.startIcon)
+  }), [startIcon]);
+  const EndIconComponent = useMemo(() => endIcon && /*#__PURE__*/cloneElement(endIcon, {
+    ref: node => {
+      if (node) {
+        setEndIconWidth(node.getBoundingClientRect().width);
+      }
+    },
+    className: clsx(endIcon.props?.className, styles.endIcon)
+  }), [endIcon]);
+  const hasSubtext = !error && !!subtext;
+  const Label = useLabelable(label, inputId, required);
+  return jsxs("div", {
+    className: clsx([styles.textInputContainerOuter], {
+      [styles.disabled]: disabled,
+      [styles.error]: shouldMarkError
+    }),
+    children: [jsx(Label, {
+      className: clsx([styles.label], {
+        [styles.hidden]: hideLabel
+      }),
+      hideLabel: hideLabel
+    }), jsxs("div", {
+      className: clsx([styles.textInputContainer], className),
+      style: {
+        '--end-icon-width': endIconWidth ? `${endIconWidth}px` : '0px',
+        '--start-icon-width': startIconWidth ? `${startIconWidth}px` : '0px'
+      },
+      children: [StartIconComponent, jsx("input", {
         ...rest,
         ref: forwardedRef,
         "aria-describedby": ariaDescribedBy,
         "aria-invalid": shouldMarkError,
         "aria-required": required,
         className: clsx([styles.textInput], {
-          [styles.error]: shouldMarkError
+          [styles.error]: shouldMarkError,
+          [styles.readOnly]: readOnly
         }),
         disabled: disabled,
         id: inputId,
+        readOnly: readOnly,
         required: required,
         type: type
-      }), IconComponent]
+      }), EndIconComponent]
     }), jsx(InlineError, {
       className: styles.inlineError,
       id: inlineErrorId,
       children: error
+    }), hasSubtext && jsx(Text, {
+      as: "p",
+      className: styles.subtext,
+      color: "textOnLightSecondary",
+      id: subtextId,
+      variant: "caption",
+      children: subtext
     })]
   });
 });

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

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

package/dist/lib-esm/primitives/base-text-input/types.d.ts

@@ -17,8 +17,13 @@ export type BaseTextInputProps = React.ComponentPropsWithRef<'input'> & Labelabl
     /** Content of error message */
     error?: React.ReactNode;
     /**
-     * Custom icon to be rendered after input
+     * Custom icon to be rendered after the input
      * When loading is true and input is not disabled prop value will be ignored
      * */
-    icon?: React.ReactElement;
+    endIcon?: React.ReactElement;
+    /**
+     * Custom icon to be rendered before the input
+     * */
+    startIcon?: React.ReactElement;
+    subtext?: string;
 };

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

@@ -1 +1,25 @@
-export declare const TextInput: import("react").ForwardRefExoticComponent<(Omit<Omit<import("../primitives/base-text-input").BaseTextInputProps, "icon"> & Required<Pick<import("./types").Loading, keyof import("./types").Loading>> & Omit<import("./types").Loading, keyof import("./types").Loading>, "ref"> | Omit<Omit<import("../primitives/base-text-input").BaseTextInputProps, "icon"> & Partial<Record<keyof import("./types").Loading, never>> & Omit<import("./types").Loading, keyof import("./types").Loading>, "ref">) & import("react").RefAttributes<HTMLInputElement>>;
+export declare const TextInput: import("react").ForwardRefExoticComponent<(Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
+    ref?: ((instance: HTMLInputElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLInputElement> | null | undefined;
+} & import("../..").Labelable & {
+    type?: "text" | "password";
+    hideLabel?: boolean;
+    invalid?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    error?: React.ReactNode;
+    endIcon?: React.ReactElement;
+    startIcon?: React.ReactElement;
+    subtext?: string;
+} & Required<Pick<import("./types").Loading, keyof import("./types").Loading>> & Omit<import("./types").Loading, keyof import("./types").Loading>, "ref"> | Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
+    ref?: ((instance: HTMLInputElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLInputElement> | null | undefined;
+} & import("../..").Labelable & {
+    type?: "text" | "password";
+    hideLabel?: boolean;
+    invalid?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    error?: React.ReactNode;
+    endIcon?: React.ReactElement;
+    startIcon?: React.ReactElement;
+    subtext?: string;
+} & Partial<Record<keyof import("./types").Loading, never>> & Omit<import("./types").Loading, keyof import("./types").Loading>, "ref">) & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -1,13 +1,17 @@
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useRef, useCallback, useMemo } from 'react';
+import { PencilCrossed } from '@box/blueprint-web-assets/icons/Fill';
 import clsx from 'clsx';
+import { forwardRef, useRef, useCallback, useMemo, cloneElement } from 'react';
 import { LoadingIndicator } from '../loading-indicator/loading-indicator.js';
-import styles from './text-input.module.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';
 
 const TextInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
+    readOnly,
+    startIcon,
+    endIcon,
     loading = false,
     loadingAriaLabel,
     ...rest
@@ -17,17 +21,47 @@ const TextInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     inputRef.current?.focus();
   }, []);
   const isLoading = !props.disabled && loading && loadingAriaLabel;
-  const icon = useMemo(() => isLoading && jsx(LoadingIndicator, {
-    "aria-label": loadingAriaLabel,
-    className: styles.iconLoading,
-    onClick: focusInput
-  }), [isLoading, loadingAriaLabel, focusInput]);
+  const endIconLocal = useMemo(() => {
+    if (isLoading) {
+      return jsx("div", {
+        className: styles.loadingIndicatorReset,
+        children: jsx(LoadingIndicator, {
+          "aria-label": loadingAriaLabel,
+          onClick: focusInput
+        })
+      });
+    }
+    if (endIcon) {
+      return /*#__PURE__*/cloneElement(endIcon, {
+        onClick: focusInput
+      });
+    }
+    if (readOnly) {
+      return jsx(PencilCrossed, {
+        onClick: focusInput,
+        role: "presentation"
+      });
+    }
+    return null;
+  }, [isLoading, endIcon, readOnly, loadingAriaLabel, focusInput]);
+  const startIconLocal = useMemo(() => {
+    if (startIcon) {
+      return /*#__PURE__*/cloneElement(startIcon, {
+        onClick: focusInput
+      });
+    }
+    return null;
+  }, [startIcon, focusInput]);
   return jsx(BaseTextInput, {
     ...rest,
     ref: useForkRef(inputRef, forwardedRef),
     className: clsx(styles.textInput, props.className),
-    ...(icon ? {
-      icon
+    readOnly: readOnly,
+    ...(endIconLocal ? {
+      endIcon: endIconLocal
+    } : {}),
+    ...(startIconLocal ? {
+      startIcon: startIconLocal
     } : {})
   });
 });

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"textInput":"bp_text_input_module_textInput--c6e69","iconLoading":"bp_text_input_module_iconLoading--c6e69"};
+var styles = {"textInput":"bp_text_input_module_textInput--2839a","iconEnd":"bp_text_input_module_iconEnd--2839a","loadingIndicatorReset":"bp_text_input_module_loadingIndicatorReset--2839a"};
 
 export { styles as default };

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

@@ -1,9 +1,9 @@
 import { type RequireAllOrNone } from 'type-fest';
 import { type BaseTextInputProps } from '../primitives/base-text-input';
 export interface Loading {
-    /** When true input is renedered with loading indicator. When this is true `loadingAriaLabel` must also be provided. */
+    /** When true input is rendered with loading indicator. When this is true `loadingAriaLabel` must also be provided. */
     loading?: boolean;
     /** The aria-label for the loading indicator. */
     loadingAriaLabel?: string;
 }
-export type TextInputProps = Omit<BaseTextInputProps, 'icon'> & RequireAllOrNone<Loading, keyof Loading>;
+export type TextInputProps = BaseTextInputProps & RequireAllOrNone<Loading, keyof Loading>;

package/dist/lib-esm/util-components/labelable/labelable.module.js

@@ -0,0 +1,4 @@
+import '../../index.css';
+var styles = {"required":"bp_labelable_module_required--23e9d"};
+
+export { styles as default };

package/dist/lib-esm/util-components/labelable/useLabelable.d.ts

@@ -1,2 +1,2 @@
 import { type Labelable, type LabelProps } from './types';
-export declare const useLabelable: (label: Labelable["label"], inputId: string) => import("react").ForwardRefExoticComponent<Omit<Omit<LabelProps, "htmlFor">, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
+export declare const useLabelable: (label: Labelable["label"], inputId: string, isRequired?: boolean) => import("react").ForwardRefExoticComponent<Omit<Omit<LabelProps, "htmlFor">, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;

package/dist/lib-esm/util-components/labelable/useLabelable.js

@@ -1,10 +1,12 @@
 import { jsx } from 'react/jsx-runtime';
-import { useMemo, forwardRef } from 'react';
 import { Role } from '@ariakit/react';
+import clsx from 'clsx';
+import { useMemo, forwardRef } from 'react';
 import { useContextProps, LabelContext } from 'react-aria-components';
 import { VisuallyHidden } from '../../visually-hidden/visually-hidden.js';
+import styles from './labelable.module.js';
 
-const useLabelable = (label, inputId) => {
+const useLabelable = (label, inputId, isRequired = false) => {
   return useMemo(() => {
     const Label = /*#__PURE__*/forwardRef((props, ref) => {
       // If this component is rendered within LabelContext from RAC, we can have props like htmlFor, id, elementType.
@@ -17,7 +19,10 @@ const useLabelable = (label, inputId) => {
       const labelProps = {
         ...rest,
         htmlFor: inputId,
-        ref
+        ref,
+        className: clsx(rest.className, {
+          [styles.required]: isRequired
+        })
       };
       if (!label) {
         return null;
@@ -63,7 +68,7 @@ const useLabelable = (label, inputId) => {
     });
     Label.displayName = 'Label';
     return Label;
-  }, [label, inputId]);
+  }, [inputId, isRequired, label]);
 };
 
 export { useLabelable };

package/package.json

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