diff --git a/packages/taler-wallet-webextension/src/mui/TextField.stories.tsx b/packages/taler-wallet-webextension/src/mui/TextField.stories.tsx
index 25cde0e9a..fb044acbc 100644
--- a/packages/taler-wallet-webextension/src/mui/TextField.stories.tsx
+++ b/packages/taler-wallet-webextension/src/mui/TextField.stories.tsx
@@ -37,7 +37,7 @@ const Container = styled.div`
}
`;
-const BasicExample = (variant: Props["variant"]): VNode => {
+const Input = (variant: Props["variant"]): VNode => {
const [value, onChange] = useState("");
return (
@@ -80,9 +80,8 @@ const BasicExample = (variant: Props["variant"]): VNode => {
);
};
-export const Standard = (): VNode => BasicExample("standard");
-export const Filled = (): VNode => BasicExample("filled");
-export const Outlined = (): VNode => BasicExample("outlined");
+export const InputStandard = (): VNode => Input("standard");
+export const InputFilled = (): VNode => Input("filled");
export const Color = (): VNode => {
const [value, onChange] = useState("");
@@ -92,40 +91,53 @@ export const Color = (): VNode => {
variant="standard"
label="Outlined secondary"
color="secondary"
+ {...{ value, onChange }}
+ />
+
+
-
-
);
};
-export const Multiline = (): VNode => {
+const Multiline = (variant: Props["variant"]): VNode => {
const [value, onChange] = useState("");
return (
);
};
+export const MultilineStandard = (): VNode => Multiline("standard");
+export const MultilineFilled = (): VNode => Multiline("filled");
export const Select = (): VNode => {
const [value, onChange] = useState("");
diff --git a/packages/taler-wallet-webextension/src/mui/TextField.tsx b/packages/taler-wallet-webextension/src/mui/TextField.tsx
index eccb1eb4e..82fc155ef 100644
--- a/packages/taler-wallet-webextension/src/mui/TextField.tsx
+++ b/packages/taler-wallet-webextension/src/mui/TextField.tsx
@@ -18,7 +18,6 @@ import { FormControl } from "./input/FormControl.js";
import { FormHelperText } from "./input/FormHelperText.js";
import { InputFilled } from "./input/InputFilled.js";
import { InputLabel } from "./input/InputLabel.js";
-import { InputOutlined } from "./input/InputOutlined.js";
import { InputStandard } from "./input/InputStandard.js";
import { SelectFilled } from "./input/SelectFilled.js";
import { SelectOutlined } from "./input/SelectOutlined.js";
@@ -57,13 +56,13 @@ export interface Props {
const inputVariant = {
standard: InputStandard,
filled: InputFilled,
- outlined: InputOutlined,
+ outlined: InputStandard,
};
const selectVariant = {
standard: SelectStandard,
filled: SelectFilled,
- outlined: SelectOutlined,
+ outlined: SelectStandard,
};
export function TextField({
diff --git a/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx b/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx
index 09cf46eaa..fc16b7ce4 100644
--- a/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx
+++ b/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx
@@ -34,10 +34,6 @@ const rootStyle = css`
cursor: text;
display: inline-flex;
align-items: center;
-
- [data-multiline] {
- padding: 4px 0 5px;
- }
`;
const rootDisabledStyle = css`
color: ${theme.palette.text.disabled};
@@ -64,6 +60,7 @@ export function InputBaseRoot({