react-better-html 1.1.154 → 1.1.156

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/index.mjs CHANGED
@@ -2778,6 +2778,7 @@ function usePageScroll() {
2778
2778
  function useMediaQuery() {
2779
2779
  const { width } = usePageResize();
2780
2780
  return {
2781
+ screenWidth: width,
2781
2782
  size320: width <= 320,
2782
2783
  size400: width <= 400,
2783
2784
  size500: width <= 500,
@@ -3618,7 +3619,7 @@ var PageHeaderComponent = forwardRef8(function PageHeader({
3618
3619
  {
3619
3620
  alignItems: "center",
3620
3621
  gap: theme2.styles.space,
3621
- marginBottom: marginBottom || theme2.styles.space * 2,
3622
+ marginBottom: marginBottom ?? theme2.styles.space * 2,
3622
3623
  ref,
3623
3624
  children: [
3624
3625
  imageUrl && /* @__PURE__ */ jsx13(Image_default.profileImage, { src: imageUrl, size: imageSize ?? (mediaQuery.size600 ? 46 : 60) }),
@@ -6103,7 +6104,9 @@ var InputFieldComponent = forwardRef11(function InputField({
6103
6104
  leftIcon,
6104
6105
  rightIcon,
6105
6106
  prefix,
6107
+ prefixBackgroundColor,
6106
6108
  suffix,
6109
+ suffixBackgroundColor,
6107
6110
  insideInputFieldComponent,
6108
6111
  withDebounce,
6109
6112
  debounceDelay = 0.5,
@@ -6118,6 +6121,7 @@ var InputFieldComponent = forwardRef11(function InputField({
6118
6121
  }, ref) {
6119
6122
  const theme2 = useTheme();
6120
6123
  const internalId = useId();
6124
+ const { colorTheme } = useBetterHtmlContextInternal();
6121
6125
  const [_, debouncedValue, setDebouncedValue] = useDebounceState(
6122
6126
  props.value?.toString() ?? "",
6123
6127
  debounceDelay
@@ -6161,7 +6165,7 @@ var InputFieldComponent = forwardRef11(function InputField({
6161
6165
  justifyContent: "center",
6162
6166
  border: `1px solid ${theme2.colors.border}`,
6163
6167
  borderRight: "none",
6164
- backgroundColor: lightenColor(theme2.colors.border, 0.8),
6168
+ backgroundColor: prefixBackgroundColor ?? (colorTheme === "light" ? darkenColor(theme2.colors.backgroundContent, 0.03) : lightenColor(theme2.colors.backgroundContent, 0.1)),
6165
6169
  borderTopLeftRadius: theme2.styles.borderRadius,
6166
6170
  borderBottomLeftRadius: theme2.styles.borderRadius,
6167
6171
  paddingInline: theme2.styles.space,
@@ -6230,7 +6234,7 @@ var InputFieldComponent = forwardRef11(function InputField({
6230
6234
  justifyContent: "center",
6231
6235
  border: `1px solid ${theme2.colors.border}`,
6232
6236
  borderLeft: "none",
6233
- backgroundColor: lightenColor(theme2.colors.border, 0.8),
6237
+ backgroundColor: suffixBackgroundColor ?? (colorTheme === "light" ? darkenColor(theme2.colors.backgroundContent, 0.03) : lightenColor(theme2.colors.backgroundContent, 0.1)),
6234
6238
  borderTopRightRadius: theme2.styles.borderRadius,
6235
6239
  borderBottomRightRadius: theme2.styles.borderRadius,
6236
6240
  paddingInline: theme2.styles.space,
@@ -7158,12 +7162,12 @@ var FormComponent = forwardRef13(function Form({
7158
7162
  form,
7159
7163
  submitButtonText,
7160
7164
  submitButtonLoaderName,
7165
+ submitButtonIsLoading,
7161
7166
  submitButtonId,
7162
7167
  submitButtonIsDisabled,
7163
7168
  cancelButtonText,
7164
7169
  actionButtonsLocation = "right",
7165
7170
  gap,
7166
- isSubmitting,
7167
7171
  isDestructive,
7168
7172
  withDividers,
7169
7173
  renderActionButtons,
@@ -7200,7 +7204,7 @@ var FormComponent = forwardRef13(function Form({
7200
7204
  SubmitButtonTag,
7201
7205
  {
7202
7206
  text: submitButtonText,
7203
- isLoading: isSubmitting || form?.isSubmitting,
7207
+ isLoading: submitButtonIsLoading || form?.isSubmitting,
7204
7208
  loaderName: submitButtonLoaderName,
7205
7209
  disabled: submitButtonIsDisabledFinal,
7206
7210
  id: submitButtonId,