@matteoaliano/forest-ui 0.4.2 → 0.4.4
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.js +2 -4
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +2 -4
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
- package/skills/forest-agency/SKILL.md +15 -1
- package/skills/forest-agency/references/patterns.md +82 -9
- package/skills/forest-external/SKILL.md +15 -1
- package/skills/forest-external/references/patterns.md +82 -9
- package/skills/forest-internal/SKILL.md +15 -1
- package/skills/forest-internal/references/patterns.md +82 -9
|
@@ -135,24 +135,97 @@ function ConfirmDialog({ open, onClose, onConfirm }) {
|
|
|
135
135
|
}
|
|
136
136
|
```
|
|
137
137
|
|
|
138
|
-
### Sidebar Navigation
|
|
138
|
+
### App Shell (AppBar + Sidebar Navigation)
|
|
139
|
+
|
|
140
|
+
The standard application layout: a full-width AppBar at the top with a SidebarNav below it. The Toolbar uses three equal `flex: 1` columns so the Search stays visually centered. The sidebar drawer uses `position: relative` to flow inside the layout instead of overlaying as a fixed panel.
|
|
139
141
|
|
|
140
142
|
```tsx
|
|
141
|
-
import {
|
|
142
|
-
import
|
|
143
|
+
import { useState } from "react";
|
|
144
|
+
import {
|
|
145
|
+
AppBar, Toolbar, Logo, Search, IconButton, Badge,
|
|
146
|
+
SidebarNav, SidebarItem, List, Typography,
|
|
147
|
+
} from "@matteoaliano/forest-ui";
|
|
148
|
+
import Box from "@mui/material/Box";
|
|
149
|
+
import Avatar from "@mui/material/Avatar";
|
|
150
|
+
import NotificationsOutlined from "@mui/icons-material/NotificationsOutlined";
|
|
143
151
|
import SettingsOutlined from "@mui/icons-material/SettingsOutlined";
|
|
152
|
+
import HomeOutlined from "@mui/icons-material/HomeOutlined";
|
|
153
|
+
import BarChartOutlined from "@mui/icons-material/BarChartOutlined";
|
|
154
|
+
import PeopleOutlined from "@mui/icons-material/PeopleOutlined";
|
|
155
|
+
|
|
156
|
+
function AppShell({ children }) {
|
|
157
|
+
const [sidebarOpen, setSidebarOpen] = useState(true);
|
|
144
158
|
|
|
145
|
-
function AppShell() {
|
|
146
|
-
const [open, setOpen] = useState(true);
|
|
147
159
|
return (
|
|
148
|
-
<
|
|
149
|
-
|
|
150
|
-
<
|
|
151
|
-
|
|
160
|
+
<Box sx={{ display: "flex", flexDirection: "column", height: "100vh" }}>
|
|
161
|
+
{/* ── App Bar ── */}
|
|
162
|
+
<AppBar
|
|
163
|
+
position="sticky"
|
|
164
|
+
elevation={0}
|
|
165
|
+
sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}
|
|
166
|
+
>
|
|
167
|
+
<Toolbar variant="dense" sx={{ px: { xs: "16px", sm: "16px" } }}>
|
|
168
|
+
{/* Left — Logo */}
|
|
169
|
+
<Box sx={{ flex: 1, display: "flex", alignItems: "center" }}>
|
|
170
|
+
<Logo product="wsuite" />
|
|
171
|
+
</Box>
|
|
172
|
+
{/* Center — Search (always visually centered) */}
|
|
173
|
+
<Box sx={{ flex: 1, display: "flex", justifyContent: "center" }}>
|
|
174
|
+
<Search size="small" sx={{ width: "100%", maxWidth: 480 }} />
|
|
175
|
+
</Box>
|
|
176
|
+
{/* Right — Actions */}
|
|
177
|
+
<Box sx={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "flex-end", gap: 1 }}>
|
|
178
|
+
<IconButton size="small" color="inherit">
|
|
179
|
+
<Badge color="error" variant="dot">
|
|
180
|
+
<NotificationsOutlined fontSize="small" />
|
|
181
|
+
</Badge>
|
|
182
|
+
</IconButton>
|
|
183
|
+
<IconButton size="small" color="inherit">
|
|
184
|
+
<SettingsOutlined fontSize="small" />
|
|
185
|
+
</IconButton>
|
|
186
|
+
<Avatar sx={{ width: 28, height: 28, fontSize: 13 }}>MA</Avatar>
|
|
187
|
+
</Box>
|
|
188
|
+
</Toolbar>
|
|
189
|
+
</AppBar>
|
|
190
|
+
|
|
191
|
+
{/* ── Body: Sidebar + Content ── */}
|
|
192
|
+
<Box sx={{ display: "flex", flexGrow: 1, overflow: "hidden" }}>
|
|
193
|
+
<SidebarNav
|
|
194
|
+
open={sidebarOpen}
|
|
195
|
+
onOpenChange={setSidebarOpen}
|
|
196
|
+
sx={{
|
|
197
|
+
height: "100%",
|
|
198
|
+
"& .MuiDrawer-paper": { position: "relative", height: "100%" },
|
|
199
|
+
}}
|
|
200
|
+
>
|
|
201
|
+
<List>
|
|
202
|
+
<SidebarItem icon={<HomeOutlined />} label="Home" selected />
|
|
203
|
+
<SidebarItem icon={<BarChartOutlined />} label="Analytics" />
|
|
204
|
+
<SidebarItem icon={<PeopleOutlined />} label="Users" />
|
|
205
|
+
<SidebarItem icon={<SettingsOutlined />} label="Settings" />
|
|
206
|
+
</List>
|
|
207
|
+
</SidebarNav>
|
|
208
|
+
|
|
209
|
+
<Box
|
|
210
|
+
component="main"
|
|
211
|
+
sx={{ flexGrow: 1, p: 3, overflow: "auto", backgroundColor: "background.paper" }}
|
|
212
|
+
>
|
|
213
|
+
{children}
|
|
214
|
+
</Box>
|
|
215
|
+
</Box>
|
|
216
|
+
</Box>
|
|
152
217
|
);
|
|
153
218
|
}
|
|
154
219
|
```
|
|
155
220
|
|
|
221
|
+
**Key patterns:**
|
|
222
|
+
- `Toolbar variant="dense"` — 48px height instead of 64px
|
|
223
|
+
- Three `flex: 1` columns in Toolbar — keeps Search centered regardless of left/right content width
|
|
224
|
+
- `px: { xs: "16px", sm: "16px" }` on Toolbar — aligns logo with sidebar icons (overrides MUI's responsive 24px default)
|
|
225
|
+
- `position: "relative"` on drawer paper — makes sidebar flow in layout, not overlay
|
|
226
|
+
- `height: "100%"` on SidebarNav — sidebar border extends full height
|
|
227
|
+
- `backgroundColor: "background.paper"` on content — contrasts with sidebar/AppBar background
|
|
228
|
+
|
|
156
229
|
### Charts
|
|
157
230
|
|
|
158
231
|
Colors are automatically assigned from the theme's 12-series palette. Override with the `colors` prop if needed.
|
|
@@ -3,7 +3,7 @@ name: forest-external
|
|
|
3
3
|
description: Forest UI Design System rules for the External (violet) preset. Enforces correct imports, component usage, and theming with @matteoaliano/forest-ui. Use when the project uses forest-ui, forest-external preset, or when user builds UI components in a forest-ui project. Triggers on "forest", "forest-ui", "forest external", "@matteoaliano/forest-ui".
|
|
4
4
|
metadata:
|
|
5
5
|
author: Forest Design System
|
|
6
|
-
version: 0.4.
|
|
6
|
+
version: 0.4.3
|
|
7
7
|
---
|
|
8
8
|
|
|
9
9
|
# Forest UI — External Preset
|
|
@@ -35,6 +35,20 @@ function App() {
|
|
|
35
35
|
}
|
|
36
36
|
```
|
|
37
37
|
|
|
38
|
+
## Typography & Fonts
|
|
39
|
+
|
|
40
|
+
- **Aeonik** — the default font for all UI text (headings, body, labels, buttons, etc.)
|
|
41
|
+
- **Aeonik Mono** — use for numeric values: prices, stats, table figures, counters, dates, IDs, code snippets
|
|
42
|
+
- **Alkemy Beta** — use for page titles (h1/hero headings). Not for general UI text
|
|
43
|
+
|
|
44
|
+
Import the font CSS files you need in your app entry point:
|
|
45
|
+
|
|
46
|
+
```tsx
|
|
47
|
+
import "@matteoaliano/forest-ui/fonts/aeonik/aeonik.css";
|
|
48
|
+
import "@matteoaliano/forest-ui/fonts/aeonik-mono/aeonik-mono.css";
|
|
49
|
+
import "@matteoaliano/forest-ui/fonts/alkemy-beta/alkemy-beta.css";
|
|
50
|
+
```
|
|
51
|
+
|
|
38
52
|
## Available Components
|
|
39
53
|
|
|
40
54
|
**Inputs:** Button, ButtonGroup, TextField, Select + MenuItem, MultiSelect, Checkbox, RadioGroup + Radio, Switch, ToggleButton + ToggleButtonGroup, Fab, IconButton, Autocomplete, Search, DatePicker
|
|
@@ -135,24 +135,97 @@ function ConfirmDialog({ open, onClose, onConfirm }) {
|
|
|
135
135
|
}
|
|
136
136
|
```
|
|
137
137
|
|
|
138
|
-
### Sidebar Navigation
|
|
138
|
+
### App Shell (AppBar + Sidebar Navigation)
|
|
139
|
+
|
|
140
|
+
The standard application layout: a full-width AppBar at the top with a SidebarNav below it. The Toolbar uses three equal `flex: 1` columns so the Search stays visually centered. The sidebar drawer uses `position: relative` to flow inside the layout instead of overlaying as a fixed panel.
|
|
139
141
|
|
|
140
142
|
```tsx
|
|
141
|
-
import {
|
|
142
|
-
import
|
|
143
|
+
import { useState } from "react";
|
|
144
|
+
import {
|
|
145
|
+
AppBar, Toolbar, Logo, Search, IconButton, Badge,
|
|
146
|
+
SidebarNav, SidebarItem, List, Typography,
|
|
147
|
+
} from "@matteoaliano/forest-ui";
|
|
148
|
+
import Box from "@mui/material/Box";
|
|
149
|
+
import Avatar from "@mui/material/Avatar";
|
|
150
|
+
import NotificationsOutlined from "@mui/icons-material/NotificationsOutlined";
|
|
143
151
|
import SettingsOutlined from "@mui/icons-material/SettingsOutlined";
|
|
152
|
+
import HomeOutlined from "@mui/icons-material/HomeOutlined";
|
|
153
|
+
import BarChartOutlined from "@mui/icons-material/BarChartOutlined";
|
|
154
|
+
import PeopleOutlined from "@mui/icons-material/PeopleOutlined";
|
|
155
|
+
|
|
156
|
+
function AppShell({ children }) {
|
|
157
|
+
const [sidebarOpen, setSidebarOpen] = useState(true);
|
|
144
158
|
|
|
145
|
-
function AppShell() {
|
|
146
|
-
const [open, setOpen] = useState(true);
|
|
147
159
|
return (
|
|
148
|
-
<
|
|
149
|
-
|
|
150
|
-
<
|
|
151
|
-
|
|
160
|
+
<Box sx={{ display: "flex", flexDirection: "column", height: "100vh" }}>
|
|
161
|
+
{/* ── App Bar ── */}
|
|
162
|
+
<AppBar
|
|
163
|
+
position="sticky"
|
|
164
|
+
elevation={0}
|
|
165
|
+
sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}
|
|
166
|
+
>
|
|
167
|
+
<Toolbar variant="dense" sx={{ px: { xs: "16px", sm: "16px" } }}>
|
|
168
|
+
{/* Left — Logo */}
|
|
169
|
+
<Box sx={{ flex: 1, display: "flex", alignItems: "center" }}>
|
|
170
|
+
<Logo product="wsuite" />
|
|
171
|
+
</Box>
|
|
172
|
+
{/* Center — Search (always visually centered) */}
|
|
173
|
+
<Box sx={{ flex: 1, display: "flex", justifyContent: "center" }}>
|
|
174
|
+
<Search size="small" sx={{ width: "100%", maxWidth: 480 }} />
|
|
175
|
+
</Box>
|
|
176
|
+
{/* Right — Actions */}
|
|
177
|
+
<Box sx={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "flex-end", gap: 1 }}>
|
|
178
|
+
<IconButton size="small" color="inherit">
|
|
179
|
+
<Badge color="error" variant="dot">
|
|
180
|
+
<NotificationsOutlined fontSize="small" />
|
|
181
|
+
</Badge>
|
|
182
|
+
</IconButton>
|
|
183
|
+
<IconButton size="small" color="inherit">
|
|
184
|
+
<SettingsOutlined fontSize="small" />
|
|
185
|
+
</IconButton>
|
|
186
|
+
<Avatar sx={{ width: 28, height: 28, fontSize: 13 }}>MA</Avatar>
|
|
187
|
+
</Box>
|
|
188
|
+
</Toolbar>
|
|
189
|
+
</AppBar>
|
|
190
|
+
|
|
191
|
+
{/* ── Body: Sidebar + Content ── */}
|
|
192
|
+
<Box sx={{ display: "flex", flexGrow: 1, overflow: "hidden" }}>
|
|
193
|
+
<SidebarNav
|
|
194
|
+
open={sidebarOpen}
|
|
195
|
+
onOpenChange={setSidebarOpen}
|
|
196
|
+
sx={{
|
|
197
|
+
height: "100%",
|
|
198
|
+
"& .MuiDrawer-paper": { position: "relative", height: "100%" },
|
|
199
|
+
}}
|
|
200
|
+
>
|
|
201
|
+
<List>
|
|
202
|
+
<SidebarItem icon={<HomeOutlined />} label="Home" selected />
|
|
203
|
+
<SidebarItem icon={<BarChartOutlined />} label="Analytics" />
|
|
204
|
+
<SidebarItem icon={<PeopleOutlined />} label="Users" />
|
|
205
|
+
<SidebarItem icon={<SettingsOutlined />} label="Settings" />
|
|
206
|
+
</List>
|
|
207
|
+
</SidebarNav>
|
|
208
|
+
|
|
209
|
+
<Box
|
|
210
|
+
component="main"
|
|
211
|
+
sx={{ flexGrow: 1, p: 3, overflow: "auto", backgroundColor: "background.paper" }}
|
|
212
|
+
>
|
|
213
|
+
{children}
|
|
214
|
+
</Box>
|
|
215
|
+
</Box>
|
|
216
|
+
</Box>
|
|
152
217
|
);
|
|
153
218
|
}
|
|
154
219
|
```
|
|
155
220
|
|
|
221
|
+
**Key patterns:**
|
|
222
|
+
- `Toolbar variant="dense"` — 48px height instead of 64px
|
|
223
|
+
- Three `flex: 1` columns in Toolbar — keeps Search centered regardless of left/right content width
|
|
224
|
+
- `px: { xs: "16px", sm: "16px" }` on Toolbar — aligns logo with sidebar icons (overrides MUI's responsive 24px default)
|
|
225
|
+
- `position: "relative"` on drawer paper — makes sidebar flow in layout, not overlay
|
|
226
|
+
- `height: "100%"` on SidebarNav — sidebar border extends full height
|
|
227
|
+
- `backgroundColor: "background.paper"` on content — contrasts with sidebar/AppBar background
|
|
228
|
+
|
|
156
229
|
### Charts
|
|
157
230
|
|
|
158
231
|
Colors are automatically assigned from the theme's 12-series palette. Override with the `colors` prop if needed.
|
|
@@ -3,7 +3,7 @@ name: forest-internal
|
|
|
3
3
|
description: Forest UI Design System rules for the Internal (magenta) preset. Enforces correct imports, component usage, and theming with @matteoaliano/forest-ui. Use when the project uses forest-ui, forest-internal preset, or when user builds UI components in a forest-ui project. Triggers on "forest", "forest-ui", "forest internal", "@matteoaliano/forest-ui".
|
|
4
4
|
metadata:
|
|
5
5
|
author: Forest Design System
|
|
6
|
-
version: 0.4.
|
|
6
|
+
version: 0.4.3
|
|
7
7
|
---
|
|
8
8
|
|
|
9
9
|
# Forest UI — Internal Preset
|
|
@@ -35,6 +35,20 @@ function App() {
|
|
|
35
35
|
}
|
|
36
36
|
```
|
|
37
37
|
|
|
38
|
+
## Typography & Fonts
|
|
39
|
+
|
|
40
|
+
- **Aeonik** — the default font for all UI text (headings, body, labels, buttons, etc.)
|
|
41
|
+
- **Aeonik Mono** — use for numeric values: prices, stats, table figures, counters, dates, IDs, code snippets
|
|
42
|
+
- **Alkemy Beta** — use for page titles (h1/hero headings). Not for general UI text
|
|
43
|
+
|
|
44
|
+
Import the font CSS files you need in your app entry point:
|
|
45
|
+
|
|
46
|
+
```tsx
|
|
47
|
+
import "@matteoaliano/forest-ui/fonts/aeonik/aeonik.css";
|
|
48
|
+
import "@matteoaliano/forest-ui/fonts/aeonik-mono/aeonik-mono.css";
|
|
49
|
+
import "@matteoaliano/forest-ui/fonts/alkemy-beta/alkemy-beta.css";
|
|
50
|
+
```
|
|
51
|
+
|
|
38
52
|
## Available Components
|
|
39
53
|
|
|
40
54
|
**Inputs:** Button, ButtonGroup, TextField, Select + MenuItem, MultiSelect, Checkbox, RadioGroup + Radio, Switch, ToggleButton + ToggleButtonGroup, Fab, IconButton, Autocomplete, Search, DatePicker
|
|
@@ -135,24 +135,97 @@ function ConfirmDialog({ open, onClose, onConfirm }) {
|
|
|
135
135
|
}
|
|
136
136
|
```
|
|
137
137
|
|
|
138
|
-
### Sidebar Navigation
|
|
138
|
+
### App Shell (AppBar + Sidebar Navigation)
|
|
139
|
+
|
|
140
|
+
The standard application layout: a full-width AppBar at the top with a SidebarNav below it. The Toolbar uses three equal `flex: 1` columns so the Search stays visually centered. The sidebar drawer uses `position: relative` to flow inside the layout instead of overlaying as a fixed panel.
|
|
139
141
|
|
|
140
142
|
```tsx
|
|
141
|
-
import {
|
|
142
|
-
import
|
|
143
|
+
import { useState } from "react";
|
|
144
|
+
import {
|
|
145
|
+
AppBar, Toolbar, Logo, Search, IconButton, Badge,
|
|
146
|
+
SidebarNav, SidebarItem, List, Typography,
|
|
147
|
+
} from "@matteoaliano/forest-ui";
|
|
148
|
+
import Box from "@mui/material/Box";
|
|
149
|
+
import Avatar from "@mui/material/Avatar";
|
|
150
|
+
import NotificationsOutlined from "@mui/icons-material/NotificationsOutlined";
|
|
143
151
|
import SettingsOutlined from "@mui/icons-material/SettingsOutlined";
|
|
152
|
+
import HomeOutlined from "@mui/icons-material/HomeOutlined";
|
|
153
|
+
import BarChartOutlined from "@mui/icons-material/BarChartOutlined";
|
|
154
|
+
import PeopleOutlined from "@mui/icons-material/PeopleOutlined";
|
|
155
|
+
|
|
156
|
+
function AppShell({ children }) {
|
|
157
|
+
const [sidebarOpen, setSidebarOpen] = useState(true);
|
|
144
158
|
|
|
145
|
-
function AppShell() {
|
|
146
|
-
const [open, setOpen] = useState(true);
|
|
147
159
|
return (
|
|
148
|
-
<
|
|
149
|
-
|
|
150
|
-
<
|
|
151
|
-
|
|
160
|
+
<Box sx={{ display: "flex", flexDirection: "column", height: "100vh" }}>
|
|
161
|
+
{/* ── App Bar ── */}
|
|
162
|
+
<AppBar
|
|
163
|
+
position="sticky"
|
|
164
|
+
elevation={0}
|
|
165
|
+
sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}
|
|
166
|
+
>
|
|
167
|
+
<Toolbar variant="dense" sx={{ px: { xs: "16px", sm: "16px" } }}>
|
|
168
|
+
{/* Left — Logo */}
|
|
169
|
+
<Box sx={{ flex: 1, display: "flex", alignItems: "center" }}>
|
|
170
|
+
<Logo product="wsuite" />
|
|
171
|
+
</Box>
|
|
172
|
+
{/* Center — Search (always visually centered) */}
|
|
173
|
+
<Box sx={{ flex: 1, display: "flex", justifyContent: "center" }}>
|
|
174
|
+
<Search size="small" sx={{ width: "100%", maxWidth: 480 }} />
|
|
175
|
+
</Box>
|
|
176
|
+
{/* Right — Actions */}
|
|
177
|
+
<Box sx={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "flex-end", gap: 1 }}>
|
|
178
|
+
<IconButton size="small" color="inherit">
|
|
179
|
+
<Badge color="error" variant="dot">
|
|
180
|
+
<NotificationsOutlined fontSize="small" />
|
|
181
|
+
</Badge>
|
|
182
|
+
</IconButton>
|
|
183
|
+
<IconButton size="small" color="inherit">
|
|
184
|
+
<SettingsOutlined fontSize="small" />
|
|
185
|
+
</IconButton>
|
|
186
|
+
<Avatar sx={{ width: 28, height: 28, fontSize: 13 }}>MA</Avatar>
|
|
187
|
+
</Box>
|
|
188
|
+
</Toolbar>
|
|
189
|
+
</AppBar>
|
|
190
|
+
|
|
191
|
+
{/* ── Body: Sidebar + Content ── */}
|
|
192
|
+
<Box sx={{ display: "flex", flexGrow: 1, overflow: "hidden" }}>
|
|
193
|
+
<SidebarNav
|
|
194
|
+
open={sidebarOpen}
|
|
195
|
+
onOpenChange={setSidebarOpen}
|
|
196
|
+
sx={{
|
|
197
|
+
height: "100%",
|
|
198
|
+
"& .MuiDrawer-paper": { position: "relative", height: "100%" },
|
|
199
|
+
}}
|
|
200
|
+
>
|
|
201
|
+
<List>
|
|
202
|
+
<SidebarItem icon={<HomeOutlined />} label="Home" selected />
|
|
203
|
+
<SidebarItem icon={<BarChartOutlined />} label="Analytics" />
|
|
204
|
+
<SidebarItem icon={<PeopleOutlined />} label="Users" />
|
|
205
|
+
<SidebarItem icon={<SettingsOutlined />} label="Settings" />
|
|
206
|
+
</List>
|
|
207
|
+
</SidebarNav>
|
|
208
|
+
|
|
209
|
+
<Box
|
|
210
|
+
component="main"
|
|
211
|
+
sx={{ flexGrow: 1, p: 3, overflow: "auto", backgroundColor: "background.paper" }}
|
|
212
|
+
>
|
|
213
|
+
{children}
|
|
214
|
+
</Box>
|
|
215
|
+
</Box>
|
|
216
|
+
</Box>
|
|
152
217
|
);
|
|
153
218
|
}
|
|
154
219
|
```
|
|
155
220
|
|
|
221
|
+
**Key patterns:**
|
|
222
|
+
- `Toolbar variant="dense"` — 48px height instead of 64px
|
|
223
|
+
- Three `flex: 1` columns in Toolbar — keeps Search centered regardless of left/right content width
|
|
224
|
+
- `px: { xs: "16px", sm: "16px" }` on Toolbar — aligns logo with sidebar icons (overrides MUI's responsive 24px default)
|
|
225
|
+
- `position: "relative"` on drawer paper — makes sidebar flow in layout, not overlay
|
|
226
|
+
- `height: "100%"` on SidebarNav — sidebar border extends full height
|
|
227
|
+
- `backgroundColor: "background.paper"` on content — contrasts with sidebar/AppBar background
|
|
228
|
+
|
|
156
229
|
### Charts
|
|
157
230
|
|
|
158
231
|
Colors are automatically assigned from the theme's 12-series palette. Override with the `colors` prop if needed.
|