Skip to content

Commit 6dd8f20

Browse files
forestreamforestream
committed
Add Input tests
1 parent 51d4980 commit 6dd8f20

File tree

5 files changed

+399
-17
lines changed

5 files changed

+399
-17
lines changed

‎packages/components/src/components/Input/GlassIcon.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { ComponentProps } from 'react'
2+
3+
export function GlassIcon(props: ComponentProps<'svg'>) {
4+
return (
5+
<svg
6+
fill="none"
7+
height="24"
8+
viewBox="0 0 24 24"
9+
width="24"
10+
xmlns="http://www.w3.org/2000/svg"
11+
{...props}
12+
>
13+
<path
14+
clipRule="evenodd"
15+
d="M14.5006 15.9949C13.445 16.6754 12.1959 17.069 10.8571 17.069C7.07005 17.069 4 13.9195 4 10.0345C4 6.14945 7.07005 3 10.8571 3C14.6442 3 17.7143 6.14945 17.7143 10.0345C17.7143 11.7044 17.1471 13.2384 16.1995 14.4448C16.2121 14.4567 16.2245 14.4688 16.2367 14.4813L19.6653 17.9986C20.1116 18.4564 20.1116 19.1988 19.6653 19.6566C19.2189 20.1145 18.4953 20.1145 18.049 19.6566L14.6204 16.1394C14.5761 16.0938 14.5361 16.0455 14.5006 15.9949ZM16.2143 10.0345C16.2143 13.1274 13.7799 15.569 10.8571 15.569C7.93435 15.569 5.5 13.1274 5.5 10.0345C5.5 6.94154 7.93435 4.5 10.8571 4.5C13.7799 4.5 16.2143 6.94154 16.2143 10.0345Z"
16+
fill="currentColor"
17+
fillRule="evenodd"
18+
/>
19+
</svg>
20+
)
21+
}

‎packages/components/src/components/Input/Input.stories.tsx‎

Lines changed: 7 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Meta, StoryObj } from '@storybook/react-vite'
22

3+
import { GlassIcon } from './GlassIcon'
34
import { Input } from './index'
45

56
type Story = StoryObj<typeof meta>
@@ -19,6 +20,11 @@ const meta: Meta<typeof Input> = {
1920

2021
export const Default: Story = {
2122
args: {
23+
colors: {
24+
primary: 'red',
25+
error: 'blue',
26+
text: 'green',
27+
},
2228
placeholder: 'Input text',
2329
},
2430
}
@@ -42,22 +48,7 @@ export const WithIcon: Story = {
4248
args: {
4349
placeholder: 'Input text',
4450
allowClear: true,
45-
icon: (
46-
<svg
47-
fill="none"
48-
height="24"
49-
viewBox="0 0 24 24"
50-
width="24"
51-
xmlns="http://www.w3.org/2000/svg"
52-
>
53-
<path
54-
clipRule="evenodd"
55-
d="M14.5006 15.9949C13.445 16.6754 12.1959 17.069 10.8571 17.069C7.07005 17.069 4 13.9195 4 10.0345C4 6.14945 7.07005 3 10.8571 3C14.6442 3 17.7143 6.14945 17.7143 10.0345C17.7143 11.7044 17.1471 13.2384 16.1995 14.4448C16.2121 14.4567 16.2245 14.4688 16.2367 14.4813L19.6653 17.9986C20.1116 18.4564 20.1116 19.1988 19.6653 19.6566C19.2189 20.1145 18.4953 20.1145 18.049 19.6566L14.6204 16.1394C14.5761 16.0938 14.5361 16.0455 14.5006 15.9949ZM16.2143 10.0345C16.2143 13.1274 13.7799 15.569 10.8571 15.569C7.93435 15.569 5.5 13.1274 5.5 10.0345C5.5 6.94154 7.93435 4.5 10.8571 4.5C13.7799 4.5 16.2143 6.94154 16.2143 10.0345Z"
56-
fill="currentColor"
57-
fillRule="evenodd"
58-
/>
59-
</svg>
60-
),
51+
icon: <GlassIcon />,
6152
},
6253
}
6354

‎packages/components/src/components/Input/__tests__/__snapshots__/index.browser.test.tsx.snap‎

Lines changed: 219 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,219 @@
1+
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2+
3+
exports[`Input > should have typography when typography is provided 1`] = `
4+
<div>
5+
<div
6+
class="position-0-relative--255 box-sizing-0-border-box-1758945993780808850-255 width-0-fit-content--255"
7+
>
8+
<input
9+
aria-label="input"
10+
class=" color-0-var(--inputDisabledText,light-dark(#D6D7DE,#373737))-7704306251139592248-1 background-0-var(--inputDisabledBg,light-dark(#F0F0F3,#414244))-14172363753176421546-1 border-0-1px solid var(--border,light-dark(#E4E4E4,#434343))-14172363753176421546-1 color-0-var(--inputDisabledText,light-dark(#D6D7DE,#373737))-14172363753176421546-1 background-0-var(--primaryBg,light-dark(#F4F3FA,#F4F3FA0D))-16231282139879731451-1 border-0-1px solid var(--primary,light-dark(#674DC7,#8163E1))-16231282139879731451-1 outline-0-none-16231282139879731451-1 border-0-1px solid var(--primary,light-dark(red,blue))-8380715471663921674-1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-radius-0-8px--1 border-style-0-solid--1 border-width-0-1px--1 padding-bottom-0-12px--1 padding-top-0-12px--1 color-0-var(--inputPlaceholder,light-dark(#A9A8AB,#CBCBCB))-15878565022192187906-1 transition-0-all .1s ease-in-out--1 border-color-0-var(--border,light-dark(#E4E4E4,#434343))--1 padding-left-0-12px--1 padding-right-0-36px--1 padding-right-2-12px--1 typo-inlineLabelS"
11+
value=""
12+
/>
13+
</div>
14+
</div>
15+
`;
16+
17+
exports[`Input > should not show clear button when value is empty 1`] = `
18+
<div>
19+
<div
20+
class="position-0-relative--255 box-sizing-0-border-box-1758945993780808850-255 width-0-fit-content--255"
21+
>
22+
<input
23+
aria-label="input"
24+
class=" color-0-var(--inputDisabledText,light-dark(#D6D7DE,#373737))-7704306251139592248-1 background-0-var(--inputDisabledBg,light-dark(#F0F0F3,#414244))-14172363753176421546-1 border-0-1px solid var(--border,light-dark(#E4E4E4,#434343))-14172363753176421546-1 color-0-var(--inputDisabledText,light-dark(#D6D7DE,#373737))-14172363753176421546-1 background-0-var(--primaryBg,light-dark(#F4F3FA,#F4F3FA0D))-16231282139879731451-1 border-0-1px solid var(--primary,light-dark(#674DC7,#8163E1))-16231282139879731451-1 outline-0-none-16231282139879731451-1 border-0-1px solid var(--primary,light-dark(red,blue))-8380715471663921674-1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-radius-0-8px--1 border-style-0-solid--1 border-width-0-1px--1 padding-bottom-0-12px--1 padding-top-0-12px--1 color-0-var(--inputPlaceholder,light-dark(#A9A8AB,#CBCBCB))-15878565022192187906-1 transition-0-all .1s ease-in-out--1 border-color-0-var(--border,light-dark(#E4E4E4,#434343))--1 padding-left-0-12px--1 padding-right-0-36px--1 padding-right-2-12px--1 "
25+
value=""
26+
/>
27+
</div>
28+
</div>
29+
`;
30+
31+
exports[`Input > should pass className prop to error message component 1`] = `
32+
<div>
33+
<div
34+
class="position-0-relative--255 box-sizing-0-border-box-1758945993780808850-255 width-0-fit-content--255"
35+
>
36+
<input
37+
aria-label="input"
38+
class=" color-0-var(--inputDisabledText,light-dark(#D6D7DE,#373737))-7704306251139592248-1 background-0-var(--inputDisabledBg,light-dark(#F0F0F3,#414244))-14172363753176421546-1 border-0-1px solid var(--border,light-dark(#E4E4E4,#434343))-14172363753176421546-1 color-0-var(--inputDisabledText,light-dark(#D6D7DE,#373737))-14172363753176421546-1 background-0-var(--primaryBg,light-dark(#F4F3FA,#F4F3FA0D))-16231282139879731451-1 border-0-1px solid var(--primary,light-dark(#674DC7,#8163E1))-16231282139879731451-1 outline-0-none-16231282139879731451-1 border-0-1px solid var(--primary,light-dark(red,blue))-8380715471663921674-1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-radius-0-8px--1 border-style-0-solid--1 border-width-0-1px--1 padding-bottom-0-12px--1 padding-top-0-12px--1 color-0-var(--inputPlaceholder,light-dark(#A9A8AB,#CBCBCB))-15878565022192187906-1 transition-0-all .1s ease-in-out--1 border-color-0-var(--border,light-dark(#E4E4E4,#434343))--1 padding-left-0-12px--1 padding-right-0-36px--1 padding-right-2-12px--1 "
39+
value=""
40+
/>
41+
<span
42+
aria-label="error-message"
43+
class="error-message bottom-0--8px--1 color-0-var(--error,light-dark(#D52B2E,#FF5B5E))--1 left-0-0--1 position-0-absolute--1 transform-0-translateY(100%)--1 typo-inputPlaceholder"
44+
>
45+
Error message
46+
</span>
47+
</div>
48+
</div>
49+
`;
50+
51+
exports[`Input > should pass className prop to icon component 1`] = `
52+
<div>
53+
<div
54+
class="position-0-relative--255 box-sizing-0-border-box-1758945993780808850-255 width-0-fit-content--255"
55+
>
56+
<div
57+
aria-label="icon"
58+
class="icon display-0-flex--0 justify-content-0-center--0 align-items-0-center--0 height-0-24px--1 width-0-24px--1 left-0-12px--1 position-0-absolute--1 top-0-50%--1 transform-0-translateY(-50%)--1 color-0-var(--iconBold,light-dark(#8D8C9A,#666577))--1"
59+
>
60+
<svg
61+
fill="none"
62+
height="24"
63+
viewBox="0 0 24 24"
64+
width="24"
65+
xmlns="http://www.w3.org/2000/svg"
66+
>
67+
<path
68+
clip-rule="evenodd"
69+
d="M14.5006 15.9949C13.445 16.6754 12.1959 17.069 10.8571 17.069C7.07005 17.069 4 13.9195 4 10.0345C4 6.14945 7.07005 3 10.8571 3C14.6442 3 17.7143 6.14945 17.7143 10.0345C17.7143 11.7044 17.1471 13.2384 16.1995 14.4448C16.2121 14.4567 16.2245 14.4688 16.2367 14.4813L19.6653 17.9986C20.1116 18.4564 20.1116 19.1988 19.6653 19.6566C19.2189 20.1145 18.4953 20.1145 18.049 19.6566L14.6204 16.1394C14.5761 16.0938 14.5361 16.0455 14.5006 15.9949ZM16.2143 10.0345C16.2143 13.1274 13.7799 15.569 10.8571 15.569C7.93435 15.569 5.5 13.1274 5.5 10.0345C5.5 6.94154 7.93435 4.5 10.8571 4.5C13.7799 4.5 16.2143 6.94154 16.2143 10.0345Z"
70+
fill="currentColor"
71+
fill-rule="evenodd"
72+
/>
73+
</svg>
74+
</div>
75+
<input
76+
aria-label="input"
77+
class=" color-0-var(--inputDisabledText,light-dark(#D6D7DE,#373737))-7704306251139592248-1 background-0-var(--inputDisabledBg,light-dark(#F0F0F3,#414244))-14172363753176421546-1 border-0-1px solid var(--border,light-dark(#E4E4E4,#434343))-14172363753176421546-1 color-0-var(--inputDisabledText,light-dark(#D6D7DE,#373737))-14172363753176421546-1 background-0-var(--primaryBg,light-dark(#F4F3FA,#F4F3FA0D))-16231282139879731451-1 border-0-1px solid var(--primary,light-dark(#674DC7,#8163E1))-16231282139879731451-1 outline-0-none-16231282139879731451-1 border-0-1px solid var(--primary,light-dark(red,blue))-8380715471663921674-1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-radius-0-8px--1 border-style-0-solid--1 border-width-0-1px--1 padding-bottom-0-12px--1 padding-top-0-12px--1 color-0-var(--inputPlaceholder,light-dark(#A9A8AB,#CBCBCB))-15878565022192187906-1 transition-0-all .1s ease-in-out--1 border-color-0-var(--border,light-dark(#E4E4E4,#434343))--1 padding-left-0-36px--1 padding-right-0-36px--1 padding-right-2-12px--1 "
78+
value=""
79+
/>
80+
</div>
81+
</div>
82+
`;
83+
84+
exports[`Input > should pass props to ClearButton component 1`] = `
85+
<div>
86+
<button
87+
aria-label="clear-button"
88+
class="align-items-0-center--1 background-0-var(--negative20,light-dark(#0003,#FFF6))--1 border-0-none--1 border-radius-0-50%--1 height-0-20px--1 width-0-20px--1 color-0-var(--base,light-dark(#FFF,#000))--1 cursor-0-pointer--1 display-0-flex--1 justify-content-0-center--1 padding-0-2px--1 position-0-absolute--1 right-0-12px--1 top-0-50%--1 transform-0-translateY(-50%)--1 "
89+
>
90+
<svg
91+
fill="none"
92+
height="24"
93+
viewBox="0 0 24 24"
94+
width="24"
95+
xmlns="http://www.w3.org/2000/svg"
96+
>
97+
<path
98+
d="M18 6L6 18"
99+
stroke="currentColor"
100+
stroke-linecap="round"
101+
stroke-linejoin="round"
102+
stroke-width="2"
103+
/>
104+
<path
105+
d="M6 6L18 18"
106+
stroke="currentColor"
107+
stroke-linecap="round"
108+
stroke-linejoin="round"
109+
stroke-width="2"
110+
/>
111+
</svg>
112+
</button>
113+
</div>
114+
`;
115+
116+
exports[`Input > should render disabled icon style when disabled is true 1`] = `
117+
<div>
118+
<div
119+
class="position-0-relative--255 box-sizing-0-border-box-1758945993780808850-255 width-0-fit-content--255"
120+
>
121+
<div
122+
aria-label="icon"
123+
class=" display-0-flex--0 justify-content-0-center--0 align-items-0-center--0 height-0-24px--1 width-0-24px--1 left-0-12px--1 position-0-absolute--1 top-0-50%--1 transform-0-translateY(-50%)--1 color-0-var(--inputDisabledText,light-dark(#D6D7DE,#373737))--1"
124+
>
125+
<svg
126+
fill="none"
127+
height="24"
128+
viewBox="0 0 24 24"
129+
width="24"
130+
xmlns="http://www.w3.org/2000/svg"
131+
>
132+
<path
133+
clip-rule="evenodd"
134+
d="M14.5006 15.9949C13.445 16.6754 12.1959 17.069 10.8571 17.069C7.07005 17.069 4 13.9195 4 10.0345C4 6.14945 7.07005 3 10.8571 3C14.6442 3 17.7143 6.14945 17.7143 10.0345C17.7143 11.7044 17.1471 13.2384 16.1995 14.4448C16.2121 14.4567 16.2245 14.4688 16.2367 14.4813L19.6653 17.9986C20.1116 18.4564 20.1116 19.1988 19.6653 19.6566C19.2189 20.1145 18.4953 20.1145 18.049 19.6566L14.6204 16.1394C14.5761 16.0938 14.5361 16.0455 14.5006 15.9949ZM16.2143 10.0345C16.2143 13.1274 13.7799 15.569 10.8571 15.569C7.93435 15.569 5.5 13.1274 5.5 10.0345C5.5 6.94154 7.93435 4.5 10.8571 4.5C13.7799 4.5 16.2143 6.94154 16.2143 10.0345Z"
135+
fill="currentColor"
136+
fill-rule="evenodd"
137+
/>
138+
</svg>
139+
</div>
140+
<input
141+
aria-label="input"
142+
class=" color-0-var(--inputDisabledText,light-dark(#D6D7DE,#373737))-7704306251139592248-1 background-0-var(--inputDisabledBg,light-dark(#F0F0F3,#414244))-14172363753176421546-1 border-0-1px solid var(--border,light-dark(#E4E4E4,#434343))-14172363753176421546-1 color-0-var(--inputDisabledText,light-dark(#D6D7DE,#373737))-14172363753176421546-1 background-0-var(--primaryBg,light-dark(#F4F3FA,#F4F3FA0D))-16231282139879731451-1 border-0-1px solid var(--primary,light-dark(#674DC7,#8163E1))-16231282139879731451-1 outline-0-none-16231282139879731451-1 border-0-1px solid var(--primary,light-dark(red,blue))-8380715471663921674-1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-radius-0-8px--1 border-style-0-solid--1 border-width-0-1px--1 padding-bottom-0-12px--1 padding-top-0-12px--1 color-0-var(--inputPlaceholder,light-dark(#A9A8AB,#CBCBCB))-15878565022192187906-1 transition-0-all .1s ease-in-out--1 border-color-0-var(--border,light-dark(#E4E4E4,#434343))--1 padding-left-0-36px--1 padding-right-0-36px--1 padding-right-2-12px--1 "
143+
disabled=""
144+
value=""
145+
/>
146+
</div>
147+
</div>
148+
`;
149+
150+
exports[`Input > should render error style when error is true 1`] = `
151+
<div>
152+
<div
153+
class="position-0-relative--255 box-sizing-0-border-box-1758945993780808850-255 width-0-fit-content--255"
154+
>
155+
<input
156+
aria-label="input"
157+
class=" color-0-var(--inputDisabledText,light-dark(#D6D7DE,#373737))-7704306251139592248-1 background-0-var(--inputDisabledBg,light-dark(#F0F0F3,#414244))-14172363753176421546-1 border-0-1px solid var(--border,light-dark(#E4E4E4,#434343))-14172363753176421546-1 color-0-var(--inputDisabledText,light-dark(#D6D7DE,#373737))-14172363753176421546-1 background-0-var(--primaryBg,light-dark(#F4F3FA,#F4F3FA0D))-16231282139879731451-1 border-0-1px solid var(--primary,light-dark(#674DC7,#8163E1))-16231282139879731451-1 outline-0-none-16231282139879731451-1 border-0-1px solid var(--primary,light-dark(red,blue))-8380715471663921674-1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-radius-0-8px--1 border-style-0-solid--1 border-width-0-1px--1 padding-bottom-0-12px--1 padding-top-0-12px--1 color-0-var(--inputPlaceholder,light-dark(#A9A8AB,#CBCBCB))-15878565022192187906-1 transition-0-all .1s ease-in-out--1 border-color-0-var(--error,light-dark(#D52B2E,#FF5B5E))--1 padding-left-0-12px--1 padding-right-0-36px--1 padding-right-2-12px--1 "
158+
value=""
159+
/>
160+
</div>
161+
</div>
162+
`;
163+
164+
exports[`Input > should render with allowClear prop 1`] = `
165+
<div>
166+
<div
167+
class="position-0-relative--255 box-sizing-0-border-box-1758945993780808850-255 width-0-fit-content--255"
168+
>
169+
<input
170+
aria-label="input"
171+
class=" color-0-var(--inputDisabledText,light-dark(#D6D7DE,#373737))-7704306251139592248-1 background-0-var(--inputDisabledBg,light-dark(#F0F0F3,#414244))-14172363753176421546-1 border-0-1px solid var(--border,light-dark(#E4E4E4,#434343))-14172363753176421546-1 color-0-var(--inputDisabledText,light-dark(#D6D7DE,#373737))-14172363753176421546-1 background-0-var(--primaryBg,light-dark(#F4F3FA,#F4F3FA0D))-16231282139879731451-1 border-0-1px solid var(--primary,light-dark(#674DC7,#8163E1))-16231282139879731451-1 outline-0-none-16231282139879731451-1 border-0-1px solid var(--primary,light-dark(red,blue))-8380715471663921674-1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-radius-0-8px--1 border-style-0-solid--1 border-width-0-1px--1 padding-bottom-0-12px--1 padding-top-0-12px--1 color-0-var(--inputPlaceholder,light-dark(#A9A8AB,#CBCBCB))-15878565022192187906-1 transition-0-all .1s ease-in-out--1 border-color-0-var(--border,light-dark(#E4E4E4,#434343))--1 padding-left-0-12px--1 padding-right-0-36px--1 padding-right-2-36px--1 "
172+
value=""
173+
/>
174+
</div>
175+
</div>
176+
`;
177+
178+
exports[`Input > should render with default props 1`] = `
179+
<div>
180+
<div
181+
class="position-0-relative--255 box-sizing-0-border-box-1758945993780808850-255 width-0-fit-content--255"
182+
>
183+
<input
184+
aria-label="input"
185+
class=" color-0-var(--inputDisabledText,light-dark(#D6D7DE,#373737))-7704306251139592248-1 background-0-var(--inputDisabledBg,light-dark(#F0F0F3,#414244))-14172363753176421546-1 border-0-1px solid var(--border,light-dark(#E4E4E4,#434343))-14172363753176421546-1 color-0-var(--inputDisabledText,light-dark(#D6D7DE,#373737))-14172363753176421546-1 background-0-var(--primaryBg,light-dark(#F4F3FA,#F4F3FA0D))-16231282139879731451-1 border-0-1px solid var(--primary,light-dark(#674DC7,#8163E1))-16231282139879731451-1 outline-0-none-16231282139879731451-1 border-0-1px solid var(--primary,light-dark(red,blue))-8380715471663921674-1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-radius-0-8px--1 border-style-0-solid--1 border-width-0-1px--1 padding-bottom-0-12px--1 padding-top-0-12px--1 color-0-var(--inputPlaceholder,light-dark(#A9A8AB,#CBCBCB))-15878565022192187906-1 transition-0-all .1s ease-in-out--1 border-color-0-var(--border,light-dark(#E4E4E4,#434343))--1 padding-left-0-12px--1 padding-right-0-36px--1 padding-right-2-12px--1 "
186+
value=""
187+
/>
188+
</div>
189+
</div>
190+
`;
191+
192+
exports[`Input > should render with disabled prop 1`] = `
193+
<div>
194+
<div
195+
class="position-0-relative--255 box-sizing-0-border-box-1758945993780808850-255 width-0-fit-content--255"
196+
>
197+
<input
198+
aria-label="input"
199+
class=" color-0-var(--inputDisabledText,light-dark(#D6D7DE,#373737))-7704306251139592248-1 background-0-var(--inputDisabledBg,light-dark(#F0F0F3,#414244))-14172363753176421546-1 border-0-1px solid var(--border,light-dark(#E4E4E4,#434343))-14172363753176421546-1 color-0-var(--inputDisabledText,light-dark(#D6D7DE,#373737))-14172363753176421546-1 background-0-var(--primaryBg,light-dark(#F4F3FA,#F4F3FA0D))-16231282139879731451-1 border-0-1px solid var(--primary,light-dark(#674DC7,#8163E1))-16231282139879731451-1 outline-0-none-16231282139879731451-1 border-0-1px solid var(--primary,light-dark(red,blue))-8380715471663921674-1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-radius-0-8px--1 border-style-0-solid--1 border-width-0-1px--1 padding-bottom-0-12px--1 padding-top-0-12px--1 color-0-var(--inputPlaceholder,light-dark(#A9A8AB,#CBCBCB))-15878565022192187906-1 transition-0-all .1s ease-in-out--1 border-color-0-var(--border,light-dark(#E4E4E4,#434343))--1 padding-left-0-12px--1 padding-right-0-36px--1 padding-right-2-12px--1 "
200+
disabled=""
201+
value=""
202+
/>
203+
</div>
204+
</div>
205+
`;
206+
207+
exports[`Input > should show clear button when value is not empty 1`] = `
208+
<div>
209+
<div
210+
class="position-0-relative--255 box-sizing-0-border-box-1758945993780808850-255 width-0-fit-content--255"
211+
>
212+
<input
213+
aria-label="input"
214+
class=" color-0-var(--inputDisabledText,light-dark(#D6D7DE,#373737))-7704306251139592248-1 background-0-var(--inputDisabledBg,light-dark(#F0F0F3,#414244))-14172363753176421546-1 border-0-1px solid var(--border,light-dark(#E4E4E4,#434343))-14172363753176421546-1 color-0-var(--inputDisabledText,light-dark(#D6D7DE,#373737))-14172363753176421546-1 background-0-var(--primaryBg,light-dark(#F4F3FA,#F4F3FA0D))-16231282139879731451-1 border-0-1px solid var(--primary,light-dark(#674DC7,#8163E1))-16231282139879731451-1 outline-0-none-16231282139879731451-1 border-0-1px solid var(--primary,light-dark(red,blue))-8380715471663921674-1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-radius-0-8px--1 border-style-0-solid--1 border-width-0-1px--1 padding-bottom-0-12px--1 padding-top-0-12px--1 color-0-var(--inputPlaceholder,light-dark(#A9A8AB,#CBCBCB))-15878565022192187906-1 transition-0-all .1s ease-in-out--1 border-color-0-var(--border,light-dark(#E4E4E4,#434343))--1 padding-left-0-12px--1 padding-right-0-36px--1 padding-right-2-12px--1 "
215+
value=""
216+
/>
217+
</div>
218+
</div>
219+
`;

0 commit comments

Comments
 (0)