@box/blueprint-web 12.15.0 → 12.16.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/lib-esm/index.css
CHANGED
|
@@ -5011,7 +5011,69 @@ table.bp_inline_table_module_inlineTable--7cffa tr:not(:last-child) td{
|
|
|
5011
5011
|
background:none;
|
|
5012
5012
|
}
|
|
5013
5013
|
|
|
5014
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
5014
|
+
.bp_base_text_input_module_textInputContainerOuter--61258[data-modern=false]{
|
|
5015
|
+
--text-input-border-width:var(--border-1);
|
|
5016
|
+
--text-input-border-width-focused:var(--border-2);
|
|
5017
|
+
--text-input-border-width-error:var(--border-2);
|
|
5018
|
+
--text-input-padding-x:var(--space-3);
|
|
5019
|
+
--text-input-icon-padding:var(--space-2);
|
|
5020
|
+
--text-input-padding-x-focused:calc(var(--text-input-padding-x) - var(--text-input-border-width-focused) + var(--text-input-border-width));
|
|
5021
|
+
--text-input-padding-x-error:calc(var(--text-input-padding-x) - var(--text-input-border-width-error) + var(--text-input-border-width));
|
|
5022
|
+
--text-input-inline-error-subtext-block-margin:var(--space-2);
|
|
5023
|
+
--text-input-row-gap:var(--space-2);
|
|
5024
|
+
--text-input-label-color:var(--text-text-on-light);
|
|
5025
|
+
--text-input-color:var(--text-text-on-light);
|
|
5026
|
+
--text-input-background:var(--surface-input-surface);
|
|
5027
|
+
--text-input-border-color:var(--border-input-border);
|
|
5028
|
+
--text-input-border-radius:var(--radius-2);
|
|
5029
|
+
--text-input-box-shadow:var(--innershadow-1);
|
|
5030
|
+
--text-input-border-color-focus:var(--border-input-border-focus);
|
|
5031
|
+
--text-input-placeholder-color:var(--text-text-on-light-secondary);
|
|
5032
|
+
--text-input-error-background:var(--surface-input-surface-error);
|
|
5033
|
+
--text-input-error-border-color:var(--border-input-border-error);
|
|
5034
|
+
--text-input-read-only-color:var(--text-text-on-light-secondary);
|
|
5035
|
+
--text-input-read-only-border-color:var(--border-collapsible-border);
|
|
5036
|
+
--text-input-disabled-color:var(--text-text-on-light);
|
|
5037
|
+
--text-input-disabled-background:var(--surface-input-surface);
|
|
5038
|
+
--text-input-disabled-border-color:var(--border-input-border);
|
|
5039
|
+
--text-input-focused-background:var(--surface-input-surface-focus);
|
|
5040
|
+
--text-input-focused-border-color:var(--border-input-border-focus);
|
|
5041
|
+
--text-input-hover-background:var(--surface-input-surface-hover);
|
|
5042
|
+
--text-input-hover-border-color:var(--border-input-border-hover);
|
|
5043
|
+
}
|
|
5044
|
+
|
|
5045
|
+
.bp_base_text_input_module_textInputContainerOuter--61258[data-modern=true]{
|
|
5046
|
+
--text-input-border-width:var(--bp-border-01);
|
|
5047
|
+
--text-input-border-width-focused:var(--bp-border-02);
|
|
5048
|
+
--text-input-border-width-error:var(--bp-border-02);
|
|
5049
|
+
--text-input-padding-x:var(--bp-space-030);
|
|
5050
|
+
--text-input-icon-padding:var(--bp-space-020);
|
|
5051
|
+
--text-input-padding-x-focused:calc(var(--text-input-padding-x) - var(--text-input-border-width-focused) + var(--text-input-border-width));
|
|
5052
|
+
--text-input-padding-x-error:calc(var(--text-input-padding-x) - var(--text-input-border-width-error) + var(--text-input-border-width));
|
|
5053
|
+
--text-input-inline-error-subtext-block-margin:var(--bp-space-020);
|
|
5054
|
+
--text-input-row-gap:var(--bp-space-020);
|
|
5055
|
+
--text-input-label-color:var(--bp-text-text-on-light);
|
|
5056
|
+
--text-input-color:var(--bp-text-text-on-light);
|
|
5057
|
+
--text-input-background:var(--bp-surface-input-surface);
|
|
5058
|
+
--text-input-border-color:var(--bp-border-input-border);
|
|
5059
|
+
--text-input-border-radius:var(--bp-radius-06);
|
|
5060
|
+
--text-input-box-shadow:var(--innershadow-1);
|
|
5061
|
+
--text-input-border-color-focus:var(--bp-border-input-border-focus);
|
|
5062
|
+
--text-input-placeholder-color:var(--bp-text-text-on-light-secondary);
|
|
5063
|
+
--text-input-error-background:var(--bp-surface-input-surface-error);
|
|
5064
|
+
--text-input-error-border-color:var(--bp-border-input-border-error);
|
|
5065
|
+
--text-input-read-only-color:var(--bp-text-text-on-light-secondary);
|
|
5066
|
+
--text-input-read-only-border-color:var(--bp-border-collapsible-border);
|
|
5067
|
+
--text-input-disabled-color:var(--bp-text-text-on-light);
|
|
5068
|
+
--text-input-disabled-background:var(--bp-surface-input-surface);
|
|
5069
|
+
--text-input-disabled-border-color:var(--bp-border-input-border);
|
|
5070
|
+
--text-input-focused-background:var(--bp-surface-input-surface-focus);
|
|
5071
|
+
--text-input-focused-border-color:var(--bp-border-input-border-focus);
|
|
5072
|
+
--text-input-hover-background:var(--bp-surface-input-surface-hover);
|
|
5073
|
+
--text-input-hover-border-color:var(--bp-border-input-border-hover);
|
|
5074
|
+
}
|
|
5075
|
+
|
|
5076
|
+
.bp_base_text_input_module_textInputContainerOuter--61258{
|
|
5015
5077
|
--disabled-opacity:var(--text-input-disabled-opacity-api, 60%);
|
|
5016
5078
|
display:flex;
|
|
5017
5079
|
flex-direction:column;
|
|
@@ -5024,8 +5086,8 @@ table.bp_inline_table_module_inlineTable--7cffa tr:not(:last-child) td{
|
|
|
5024
5086
|
text-decoration:var(--body-default-text-decoration);
|
|
5025
5087
|
text-transform:var(--body-default-text-case);
|
|
5026
5088
|
}
|
|
5027
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
5028
|
-
color:var(--text-
|
|
5089
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_label--61258{
|
|
5090
|
+
color:var(--text-input-label-color);
|
|
5029
5091
|
flex:0 0 fit-content;
|
|
5030
5092
|
font-family:var(--body-default-bold-font-family);
|
|
5031
5093
|
font-size:var(--body-default-bold-font-size);
|
|
@@ -5038,21 +5100,21 @@ table.bp_inline_table_module_inlineTable--7cffa tr:not(:last-child) td{
|
|
|
5038
5100
|
width:-moz-fit-content;
|
|
5039
5101
|
width:fit-content;
|
|
5040
5102
|
}
|
|
5041
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
5042
|
-
margin-block-end:var(--
|
|
5103
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_label--61258:not(.bp_base_text_input_module_hidden--61258){
|
|
5104
|
+
margin-block-end:var(--text-input-row-gap);
|
|
5043
5105
|
}
|
|
5044
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
5106
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258{
|
|
5045
5107
|
display:flex;
|
|
5046
5108
|
height:var(--size-10);
|
|
5047
5109
|
position:relative;
|
|
5048
5110
|
}
|
|
5049
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
5050
|
-
background:var(--
|
|
5051
|
-
border:var(--border-
|
|
5052
|
-
border-radius:var(--radius
|
|
5053
|
-
box-shadow:var(--
|
|
5111
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 .bp_base_text_input_module_textInput--61258,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=number].bp_base_text_input_module_textInput--61258,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=text].bp_base_text_input_module_textInput--61258{
|
|
5112
|
+
background:var(--text-input-background);
|
|
5113
|
+
border:var(--text-input-border-width) solid var(--text-input-border-color);
|
|
5114
|
+
border-radius:var(--text-input-border-radius);
|
|
5115
|
+
box-shadow:var(--text-input-box-shadow);
|
|
5054
5116
|
box-sizing:border-box;
|
|
5055
|
-
color:var(--text-
|
|
5117
|
+
color:var(--text-input-color);
|
|
5056
5118
|
font-family:var(--body-default-font-family);
|
|
5057
5119
|
font-size:var(--body-default-font-size);
|
|
5058
5120
|
font-weight:var(--body-default-font-weight);
|
|
@@ -5060,81 +5122,84 @@ table.bp_inline_table_module_inlineTable--7cffa tr:not(:last-child) td{
|
|
|
5060
5122
|
letter-spacing:var(--body-default-letter-spacing);
|
|
5061
5123
|
line-height:var(--body-default-line-height);
|
|
5062
5124
|
padding-block:0;
|
|
5063
|
-
padding-inline:var(--
|
|
5125
|
+
padding-inline:var(--text-input-padding-x);
|
|
5064
5126
|
-webkit-text-decoration:var(--body-default-text-decoration);
|
|
5065
5127
|
text-decoration:var(--body-default-text-decoration);
|
|
5066
5128
|
text-transform:var(--body-default-text-case);
|
|
5067
5129
|
width:100%;
|
|
5068
5130
|
}
|
|
5069
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
5070
|
-
box-shadow:var(--
|
|
5131
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 .bp_base_text_input_module_textInput--61258:hover,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=number].bp_base_text_input_module_textInput--61258:hover,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=text].bp_base_text_input_module_textInput--61258:hover{
|
|
5132
|
+
box-shadow:var(--text-input-box-shadow);
|
|
5071
5133
|
}
|
|
5072
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
5073
|
-
color:var(--text-
|
|
5134
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 .bp_base_text_input_module_textInput--61258::placeholder,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=number].bp_base_text_input_module_textInput--61258::placeholder,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=text].bp_base_text_input_module_textInput--61258::placeholder{
|
|
5135
|
+
color:var(--text-input-placeholder-color);
|
|
5074
5136
|
opacity:1;
|
|
5075
5137
|
}
|
|
5076
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
5077
|
-
background:var(--
|
|
5078
|
-
border:var(--border-
|
|
5138
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 .bp_base_text_input_module_textInput--61258.bp_base_text_input_module_error--61258,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=number].bp_base_text_input_module_textInput--61258.bp_base_text_input_module_error--61258,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=text].bp_base_text_input_module_textInput--61258.bp_base_text_input_module_error--61258{
|
|
5139
|
+
background:var(--text-input-error-background);
|
|
5140
|
+
border:var(--text-input-border-width-error) solid var(--text-input-error-border-color);
|
|
5079
5141
|
outline:0;
|
|
5080
|
-
padding-inline-start:
|
|
5142
|
+
padding-inline-start:var(--text-input-padding-x-error);
|
|
5081
5143
|
}
|
|
5082
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
5083
|
-
border-color:var(--
|
|
5084
|
-
box-shadow:var(--
|
|
5085
|
-
color:var(--text-
|
|
5144
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 .bp_base_text_input_module_textInput--61258.bp_base_text_input_module_readOnly--61258,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=number].bp_base_text_input_module_textInput--61258.bp_base_text_input_module_readOnly--61258,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=text].bp_base_text_input_module_textInput--61258.bp_base_text_input_module_readOnly--61258{
|
|
5145
|
+
border-color:var(--text-input-read-only-border-color);
|
|
5146
|
+
box-shadow:var(--text-input-box-shadow);
|
|
5147
|
+
color:var(--text-input-read-only-color);
|
|
5086
5148
|
}
|
|
5087
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
5088
|
-
border:var(--border-
|
|
5149
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 .bp_base_text_input_module_textInput--61258.bp_base_text_input_module_readOnly--61258:focus-visible,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=number].bp_base_text_input_module_textInput--61258.bp_base_text_input_module_readOnly--61258:focus-visible,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=text].bp_base_text_input_module_textInput--61258.bp_base_text_input_module_readOnly--61258:focus-visible{
|
|
5150
|
+
border:var(--text-input-border-width-focused) solid var(--text-input-border-color-focus);
|
|
5089
5151
|
}
|
|
5090
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
5152
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 .bp_base_text_input_module_textInput--61258.bp_base_text_input_module_readOnly--61258:hover,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=number].bp_base_text_input_module_textInput--61258.bp_base_text_input_module_readOnly--61258:hover,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=text].bp_base_text_input_module_textInput--61258.bp_base_text_input_module_readOnly--61258:hover{
|
|
5091
5153
|
cursor:default;
|
|
5092
5154
|
}
|
|
5093
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
5094
|
-
background:var(--
|
|
5095
|
-
border-color:var(--
|
|
5096
|
-
box-shadow:var(--
|
|
5097
|
-
color:var(--text-
|
|
5155
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 .bp_base_text_input_module_textInput--61258:disabled,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=number].bp_base_text_input_module_textInput--61258:disabled,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=text].bp_base_text_input_module_textInput--61258:disabled{
|
|
5156
|
+
background:var(--text-input-disabled-background);
|
|
5157
|
+
border-color:var(--text-input-disabled-border-color);
|
|
5158
|
+
box-shadow:var(--text-input-box-shadow);
|
|
5159
|
+
color:var(--text-input-disabled-color);
|
|
5098
5160
|
}
|
|
5099
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
5100
|
-
border-color:var(--
|
|
5161
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 .bp_base_text_input_module_textInput--61258:disabled:hover,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=number].bp_base_text_input_module_textInput--61258:disabled:hover,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=text].bp_base_text_input_module_textInput--61258:disabled:hover{
|
|
5162
|
+
border-color:var(--text-input-border-color);
|
|
5101
5163
|
}
|
|
5102
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
5103
|
-
background:var(--
|
|
5104
|
-
border:var(--border-
|
|
5164
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 .bp_base_text_input_module_textInput--61258:focus-visible,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=number].bp_base_text_input_module_textInput--61258:focus-visible,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=text].bp_base_text_input_module_textInput--61258:focus-visible{
|
|
5165
|
+
background:var(--text-input-focused-background);
|
|
5166
|
+
border:var(--text-input-border-width-focused) solid var(--text-input-focused-border-color);
|
|
5105
5167
|
outline:0;
|
|
5106
|
-
padding-inline-start:
|
|
5168
|
+
padding-inline-start:var(--text-input-padding-x-focused);
|
|
5107
5169
|
}
|
|
5108
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
5109
|
-
padding-inline-end:calc(var(--
|
|
5170
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 .bp_base_text_input_module_textInput--61258:has(+ .bp_base_text_input_module_endIcon--61258),.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=number].bp_base_text_input_module_textInput--61258:has(+ .bp_base_text_input_module_endIcon--61258),.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=text].bp_base_text_input_module_textInput--61258:has(+ .bp_base_text_input_module_endIcon--61258){
|
|
5171
|
+
padding-inline-end:calc(var(--text-input-padding-x) + var(--end-icon-width) + var(--text-input-icon-padding));
|
|
5110
5172
|
}
|
|
5111
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
5112
|
-
background:var(--
|
|
5113
|
-
border:var(--border-1) solid var(--
|
|
5173
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 .bp_base_text_input_module_textInput--61258:not(:disabled):not(:focus-visible):not(.bp_base_text_input_module_error--61258):hover,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=number].bp_base_text_input_module_textInput--61258:not(:disabled):not(:focus-visible):not(.bp_base_text_input_module_error--61258):hover,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=text].bp_base_text_input_module_textInput--61258:not(:disabled):not(:focus-visible):not(.bp_base_text_input_module_error--61258):hover{
|
|
5174
|
+
background:var(--text-input-hover-background);
|
|
5175
|
+
border:var(--border-1) solid var(--text-input-hover-border-color);
|
|
5114
5176
|
}
|
|
5115
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
5116
|
-
left:calc(var(--
|
|
5177
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 .bp_base_text_input_module_startIcon--61258{
|
|
5178
|
+
left:calc(var(--text-input-padding-x) + var(--text-input-border-width));
|
|
5117
5179
|
position:absolute;
|
|
5118
5180
|
top:50%;
|
|
5119
5181
|
transform:translateY(-50%);
|
|
5120
5182
|
}
|
|
5121
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
5122
|
-
padding-inline-start:calc(var(--
|
|
5183
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 .bp_base_text_input_module_startIcon--61258 + input.bp_base_text_input_module_textInput--61258{
|
|
5184
|
+
padding-inline-start:calc(var(--text-input-padding-x) + var(--text-input-icon-padding) + var(--start-icon-width));
|
|
5185
|
+
}
|
|
5186
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 .bp_base_text_input_module_startIcon--61258 + input.bp_base_text_input_module_textInput--61258:focus-visible{
|
|
5187
|
+
padding-inline-start:calc(var(--text-input-padding-x-focused) + var(--text-input-icon-padding) + var(--start-icon-width));
|
|
5123
5188
|
}
|
|
5124
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
5125
|
-
padding-inline-start:calc(var(--
|
|
5189
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 .bp_base_text_input_module_startIcon--61258 + input.bp_base_text_input_module_textInput--61258.bp_base_text_input_module_error--61258{
|
|
5190
|
+
padding-inline-start:calc(var(--text-input-padding-x-error) + var(--text-input-icon-padding) + var(--start-icon-width));
|
|
5126
5191
|
}
|
|
5127
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
5192
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 .bp_base_text_input_module_endIcon--61258{
|
|
5128
5193
|
position:absolute;
|
|
5129
|
-
right:calc(var(--
|
|
5194
|
+
right:calc(var(--text-input-padding-x) + var(--text-input-border-width));
|
|
5130
5195
|
top:50%;
|
|
5131
5196
|
transform:translateY(-50%);
|
|
5132
5197
|
}
|
|
5133
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
5198
|
+
.bp_base_text_input_module_textInputContainerOuter--61258.bp_base_text_input_module_disabled--61258{
|
|
5134
5199
|
opacity:var(--disabled-opacity);
|
|
5135
5200
|
}
|
|
5136
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
5137
|
-
margin-block-start:var(--
|
|
5201
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_inlineError--61258,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_subtext--61258{
|
|
5202
|
+
margin-block-start:var(--text-input-inline-error-subtext-block-margin);
|
|
5138
5203
|
}
|
|
5139
5204
|
.bp_chip_module_chip--96f83{
|
|
5140
5205
|
align-items:center;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import clsx from 'clsx';
|
|
3
3
|
import { forwardRef, useState, useMemo, cloneElement } from 'react';
|
|
4
|
+
import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
|
|
4
5
|
import { Text } from '../../text/text.js';
|
|
5
6
|
import { useLabelable } from '../../util-components/labelable/useLabelable.js';
|
|
6
7
|
import { useUniqueId } from '../../utils/useUniqueId.js';
|
|
@@ -63,11 +64,15 @@ const BaseTextInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
63
64
|
className: clsx(endIcon.props?.className, styles.endIcon)
|
|
64
65
|
}), [endIcon]);
|
|
65
66
|
const Label = useLabelable(label, inputId, required);
|
|
67
|
+
const {
|
|
68
|
+
enableModernizedComponents
|
|
69
|
+
} = useBlueprintModernization();
|
|
66
70
|
return jsxs("div", {
|
|
67
71
|
className: clsx(styles.textInputContainerOuter, {
|
|
68
72
|
[styles.disabled]: disabled,
|
|
69
73
|
[styles.error]: shouldMarkError
|
|
70
74
|
}, className),
|
|
75
|
+
"data-modern": enableModernizedComponents,
|
|
71
76
|
children: [jsx(Label, {
|
|
72
77
|
className: clsx([styles.label], {
|
|
73
78
|
[styles.hidden]: hideLabel
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../../index.css';
|
|
2
|
-
var styles = {"textInputContainerOuter":"bp_base_text_input_module_textInputContainerOuter--
|
|
2
|
+
var styles = {"textInputContainerOuter":"bp_base_text_input_module_textInputContainerOuter--61258","label":"bp_base_text_input_module_label--61258","hidden":"bp_base_text_input_module_hidden--61258","textInputContainer":"bp_base_text_input_module_textInputContainer--61258","textInput":"bp_base_text_input_module_textInput--61258","error":"bp_base_text_input_module_error--61258","readOnly":"bp_base_text_input_module_readOnly--61258","endIcon":"bp_base_text_input_module_endIcon--61258","startIcon":"bp_base_text_input_module_startIcon--61258","disabled":"bp_base_text_input_module_disabled--61258","inlineError":"bp_base_text_input_module_inlineError--61258","subtext":"bp_base_text_input_module_subtext--61258"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|