@stratakit/mui 0.2.0 → 0.3.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/CHANGELOG.md +106 -23
- package/README.md +8 -4
- package/dist/DEV/Root.internal.js +57 -0
- package/dist/DEV/Root.js +7 -9
- package/dist/DEV/createTheme.js +220 -16
- package/dist/DEV/styles.css.js +2 -2
- package/dist/DEV/~components/MuiBadge.js +20 -0
- package/dist/DEV/~components/MuiButtonBase.js +53 -0
- package/dist/DEV/~components/MuiCard.js +59 -0
- package/dist/DEV/~components/MuiChip.js +83 -0
- package/dist/DEV/~components/MuiIconButton.js +17 -0
- package/dist/DEV/~components/MuiSnackbar.js +12 -0
- package/dist/DEV/~components/MuiTable.js +23 -0
- package/dist/Root.d.ts +3 -1
- package/dist/Root.internal.d.ts +3 -0
- package/dist/Root.internal.js +77 -0
- package/dist/Root.js +6 -4
- package/dist/createTheme.js +470 -10
- package/dist/styles.css.js +2 -2
- package/dist/types.d.ts +158 -1
- package/dist/~components/MuiBadge.d.ts +7 -0
- package/dist/~components/MuiBadge.js +17 -0
- package/dist/~components/MuiButtonBase.d.ts +7 -0
- package/dist/~components/MuiButtonBase.js +80 -0
- package/dist/~components/MuiCard.d.ts +4 -0
- package/dist/~components/MuiCard.js +49 -0
- package/dist/~components/MuiChip.d.ts +9 -0
- package/dist/~components/MuiChip.js +82 -0
- package/dist/~components/MuiIconButton.d.ts +6 -0
- package/dist/~components/MuiIconButton.js +27 -0
- package/dist/~components/MuiSnackbar.d.ts +2 -0
- package/dist/~components/MuiSnackbar.js +12 -0
- package/dist/~components/MuiTable.d.ts +4 -0
- package/dist/~components/MuiTable.js +28 -0
- package/package.json +13 -9
package/dist/DEV/createTheme.js
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
|
-
import { jsx } from "react/jsx-runtime";
|
|
1
|
+
import { Fragment, jsx } from "react/jsx-runtime";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { Role } from "@ariakit/react/role";
|
|
4
|
+
import OutlinedInput from "@mui/material/OutlinedInput";
|
|
2
5
|
import { createTheme as createMuiTheme } from "@mui/material/styles";
|
|
6
|
+
import { MuiBadge } from "./~components/MuiBadge.js";
|
|
7
|
+
import { MuiButtonBase } from "./~components/MuiButtonBase.js";
|
|
8
|
+
import { MuiCard, MuiCardActionArea } from "./~components/MuiCard.js";
|
|
9
|
+
import {
|
|
10
|
+
MuiChip,
|
|
11
|
+
MuiChipDeleteIcon,
|
|
12
|
+
MuiChipLabel
|
|
13
|
+
} from "./~components/MuiChip.js";
|
|
14
|
+
import { MuiIconButton } from "./~components/MuiIconButton.js";
|
|
15
|
+
import { MuiSnackbar } from "./~components/MuiSnackbar.js";
|
|
16
|
+
import { MuiTableCell, MuiTableHead } from "./~components/MuiTable.js";
|
|
3
17
|
import {
|
|
4
18
|
ArrowDownIcon,
|
|
5
19
|
CaretsUpDownIcon,
|
|
@@ -44,7 +58,19 @@ function createTheme() {
|
|
|
44
58
|
button: {
|
|
45
59
|
textTransform: "none"
|
|
46
60
|
// Disable all-caps on buttons and tabs
|
|
47
|
-
}
|
|
61
|
+
},
|
|
62
|
+
// These are only hardcoded here as fallback. The CSS will take precedence.
|
|
63
|
+
body1: { fontSize: 16 },
|
|
64
|
+
body2: { fontSize: 14 },
|
|
65
|
+
h1: { fontSize: 48 },
|
|
66
|
+
h2: { fontSize: 40 },
|
|
67
|
+
h3: { fontSize: 32 },
|
|
68
|
+
h4: { fontSize: 28 },
|
|
69
|
+
h5: { fontSize: 24 },
|
|
70
|
+
h6: { fontSize: 20 },
|
|
71
|
+
caption: { fontSize: 12 },
|
|
72
|
+
subtitle1: { fontSize: 12 },
|
|
73
|
+
subtitle2: { fontSize: 11 }
|
|
48
74
|
},
|
|
49
75
|
shadows: [
|
|
50
76
|
"none",
|
|
@@ -62,13 +88,27 @@ function createTheme() {
|
|
|
62
88
|
// biome-ignore lint/suspicious/noExplicitAny: MUI expects 25 items in the shadows array
|
|
63
89
|
],
|
|
64
90
|
components: {
|
|
91
|
+
MuiAppBar: { defaultProps: { component: Role.header } },
|
|
92
|
+
MuiAccordion: {
|
|
93
|
+
defaultProps: {
|
|
94
|
+
component: Role.div,
|
|
95
|
+
slotProps: {
|
|
96
|
+
region: {
|
|
97
|
+
role: void 0,
|
|
98
|
+
"aria-labelledby": void 0
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
},
|
|
65
103
|
MuiAccordionSummary: {
|
|
66
104
|
defaultProps: {
|
|
105
|
+
component: Role.div,
|
|
67
106
|
expandIcon: /* @__PURE__ */ jsx(ChevronDownIcon, {})
|
|
68
107
|
}
|
|
69
108
|
},
|
|
70
109
|
MuiAlert: {
|
|
71
110
|
defaultProps: {
|
|
111
|
+
component: Role.div,
|
|
72
112
|
variant: "outlined",
|
|
73
113
|
iconMapping: {
|
|
74
114
|
error: /* @__PURE__ */ jsx(ErrorIcon, {}),
|
|
@@ -78,6 +118,7 @@ function createTheme() {
|
|
|
78
118
|
}
|
|
79
119
|
}
|
|
80
120
|
},
|
|
121
|
+
MuiAlertTitle: { defaultProps: { component: Role.div } },
|
|
81
122
|
MuiAutocomplete: {
|
|
82
123
|
defaultProps: {
|
|
83
124
|
popupIcon: /* @__PURE__ */ jsx(ChevronDownIcon, {}),
|
|
@@ -86,60 +127,116 @@ function createTheme() {
|
|
|
86
127
|
paper: {
|
|
87
128
|
elevation: 8
|
|
88
129
|
// match Menu elevation
|
|
130
|
+
},
|
|
131
|
+
clearIndicator: {
|
|
132
|
+
tabIndex: 0
|
|
133
|
+
// make clear indicator focusable
|
|
89
134
|
}
|
|
90
135
|
}
|
|
91
136
|
}
|
|
92
137
|
},
|
|
138
|
+
MuiAvatar: { defaultProps: { component: Role.div } },
|
|
139
|
+
MuiAvatarGroup: { defaultProps: { component: Role.div } },
|
|
140
|
+
MuiBackdrop: { defaultProps: { component: Role.div } },
|
|
141
|
+
MuiBadge: {
|
|
142
|
+
defaultProps: {
|
|
143
|
+
component: MuiBadge,
|
|
144
|
+
color: "secondary"
|
|
145
|
+
}
|
|
146
|
+
},
|
|
147
|
+
MuiBottomNavigation: { defaultProps: { component: Role.div } },
|
|
93
148
|
MuiBreadcrumbs: {
|
|
94
149
|
defaultProps: {
|
|
150
|
+
component: Role.nav,
|
|
95
151
|
separator: /* @__PURE__ */ jsx(ChevronRightIcon, {})
|
|
96
152
|
}
|
|
97
153
|
},
|
|
98
154
|
MuiButtonBase: {
|
|
99
155
|
defaultProps: {
|
|
156
|
+
component: MuiButtonBase,
|
|
100
157
|
disableRipple: true
|
|
101
158
|
// https://mui.com/material-ui/getting-started/faq/#how-can-i-disable-the-ripple-effect-globally
|
|
102
159
|
}
|
|
103
160
|
},
|
|
104
161
|
MuiButton: {
|
|
105
162
|
defaultProps: {
|
|
163
|
+
component: MuiButtonBase,
|
|
106
164
|
color: "secondary",
|
|
107
165
|
variant: "contained"
|
|
108
166
|
}
|
|
109
167
|
},
|
|
110
168
|
MuiButtonGroup: {
|
|
111
169
|
defaultProps: {
|
|
170
|
+
component: Role.div,
|
|
112
171
|
color: "secondary",
|
|
113
172
|
disableRipple: true
|
|
114
173
|
// ButtonGroup overrides Button's disableRipple so we need to set it here as well
|
|
115
174
|
}
|
|
116
175
|
},
|
|
117
|
-
|
|
176
|
+
MuiCard: { defaultProps: { component: MuiCard } },
|
|
177
|
+
MuiCardActionArea: { defaultProps: { component: MuiCardActionArea } },
|
|
178
|
+
MuiCardContent: { defaultProps: { component: Role.div } },
|
|
179
|
+
MuiCardHeader: {
|
|
118
180
|
defaultProps: {
|
|
119
|
-
|
|
181
|
+
component: Role.div,
|
|
182
|
+
slotProps: { title: { component: Role.h2 } }
|
|
120
183
|
}
|
|
121
184
|
},
|
|
185
|
+
MuiCardMedia: { defaultProps: { component: Role.div } },
|
|
122
186
|
MuiCheckbox: {
|
|
123
187
|
defaultProps: {
|
|
124
|
-
|
|
188
|
+
component: Role.span,
|
|
189
|
+
disableRipple: true,
|
|
125
190
|
// Checkbox doesn't inherit from ButtonBase
|
|
191
|
+
icon: /* @__PURE__ */ jsx(Fragment, {}),
|
|
192
|
+
checkedIcon: /* @__PURE__ */ jsx(Fragment, {}),
|
|
193
|
+
indeterminateIcon: /* @__PURE__ */ jsx(Fragment, {})
|
|
126
194
|
}
|
|
127
195
|
},
|
|
128
|
-
|
|
196
|
+
MuiChip: {
|
|
129
197
|
defaultProps: {
|
|
130
|
-
|
|
131
|
-
|
|
198
|
+
component: MuiChip,
|
|
199
|
+
deleteIcon: /* @__PURE__ */ jsx(MuiChipDeleteIcon, {}),
|
|
200
|
+
slotProps: {
|
|
201
|
+
label: {
|
|
202
|
+
component: MuiChipLabel
|
|
203
|
+
}
|
|
204
|
+
}
|
|
132
205
|
}
|
|
133
206
|
},
|
|
207
|
+
MuiContainer: { defaultProps: { component: Role.div } },
|
|
208
|
+
MuiDialog: { defaultProps: { component: Role.div } },
|
|
209
|
+
MuiDialogContentText: { defaultProps: { component: Role.p } },
|
|
210
|
+
MuiDialogTitle: { defaultProps: { component: Role.h2 } },
|
|
211
|
+
MuiDivider: { defaultProps: { component: withRenderProp(Role, "hr") } },
|
|
212
|
+
MuiDrawer: { defaultProps: { component: Role.div } },
|
|
134
213
|
MuiFab: {
|
|
135
214
|
defaultProps: {
|
|
215
|
+
component: MuiButtonBase,
|
|
136
216
|
color: "primary"
|
|
137
217
|
}
|
|
138
218
|
},
|
|
139
|
-
|
|
219
|
+
MuiFormControl: { defaultProps: { component: Role.div } },
|
|
220
|
+
MuiFormHelperText: { defaultProps: { component: Role.p } },
|
|
221
|
+
MuiFormLabel: { defaultProps: { component: Role.label } },
|
|
222
|
+
MuiGrid: { defaultProps: { component: Role.div } },
|
|
223
|
+
MuiGridLegacy: { defaultProps: { component: Role.div } },
|
|
224
|
+
MuiIcon: { defaultProps: { component: Role.span } },
|
|
225
|
+
MuiIconButton: {
|
|
226
|
+
defaultProps: { component: MuiIconButton, color: "secondary" }
|
|
227
|
+
},
|
|
228
|
+
MuiImageList: { defaultProps: { component: Role.ul } },
|
|
229
|
+
MuiImageListItem: { defaultProps: { component: Role.li } },
|
|
230
|
+
MuiInputAdornment: { defaultProps: { component: Role.div } },
|
|
231
|
+
MuiInputLabel: {
|
|
140
232
|
defaultProps: {
|
|
141
|
-
|
|
142
|
-
|
|
233
|
+
component: Role.label,
|
|
234
|
+
shrink: true
|
|
235
|
+
// Removes label animation and masked border from TextField
|
|
236
|
+
}
|
|
237
|
+
},
|
|
238
|
+
MuiLink: {
|
|
239
|
+
defaultProps: { component: Role.a, color: "textPrimary" },
|
|
143
240
|
variants: [
|
|
144
241
|
{
|
|
145
242
|
props: { color: "primary" },
|
|
@@ -167,6 +264,24 @@ function createTheme() {
|
|
|
167
264
|
}
|
|
168
265
|
]
|
|
169
266
|
},
|
|
267
|
+
MuiList: { defaultProps: { component: Role.ul } },
|
|
268
|
+
MuiListItem: { defaultProps: { component: Role.li } },
|
|
269
|
+
MuiListItemButton: {
|
|
270
|
+
defaultProps: { component: MuiButtonBase }
|
|
271
|
+
},
|
|
272
|
+
MuiListItemText: {
|
|
273
|
+
defaultProps: {
|
|
274
|
+
slotProps: {
|
|
275
|
+
primary: { variant: "inherit" }
|
|
276
|
+
}
|
|
277
|
+
}
|
|
278
|
+
},
|
|
279
|
+
MuiListSubheader: { defaultProps: { component: Role.li } },
|
|
280
|
+
MuiMenu: { defaultProps: { component: Role.div } },
|
|
281
|
+
MuiMenuItem: { defaultProps: { component: Role.li } },
|
|
282
|
+
MuiMenuList: { defaultProps: { component: Role.ul } },
|
|
283
|
+
MuiMobileStepper: { defaultProps: { component: Role.div } },
|
|
284
|
+
MuiModal: { defaultProps: { component: Role.div } },
|
|
170
285
|
MuiOutlinedInput: {
|
|
171
286
|
defaultProps: {
|
|
172
287
|
notched: false
|
|
@@ -175,6 +290,7 @@ function createTheme() {
|
|
|
175
290
|
},
|
|
176
291
|
MuiPaginationItem: {
|
|
177
292
|
defaultProps: {
|
|
293
|
+
component: MuiButtonBase,
|
|
178
294
|
slots: {
|
|
179
295
|
previous: ChevronLeftIcon,
|
|
180
296
|
next: ChevronRightIcon,
|
|
@@ -183,11 +299,76 @@ function createTheme() {
|
|
|
183
299
|
}
|
|
184
300
|
}
|
|
185
301
|
},
|
|
302
|
+
MuiPaper: { defaultProps: { component: Role.div } },
|
|
303
|
+
MuiPopover: { defaultProps: { component: Role.div } },
|
|
304
|
+
MuiRadio: {
|
|
305
|
+
defaultProps: {
|
|
306
|
+
component: Role.span,
|
|
307
|
+
disableRipple: true,
|
|
308
|
+
// Radio doesn't inherit from ButtonBase
|
|
309
|
+
icon: /* @__PURE__ */ jsx(Fragment, {}),
|
|
310
|
+
checkedIcon: /* @__PURE__ */ jsx(Fragment, {})
|
|
311
|
+
}
|
|
312
|
+
},
|
|
313
|
+
MuiRating: { defaultProps: { component: Role.span } },
|
|
186
314
|
MuiSelect: {
|
|
187
315
|
defaultProps: {
|
|
188
316
|
IconComponent: CaretsUpDownIcon
|
|
189
317
|
}
|
|
190
318
|
},
|
|
319
|
+
MuiNativeSelect: {
|
|
320
|
+
defaultProps: {
|
|
321
|
+
input: /* @__PURE__ */ jsx(OutlinedInput, {}),
|
|
322
|
+
IconComponent: CaretsUpDownIcon
|
|
323
|
+
}
|
|
324
|
+
},
|
|
325
|
+
MuiSkeleton: { defaultProps: { component: Role.span } },
|
|
326
|
+
MuiSlider: { defaultProps: { component: Role.span } },
|
|
327
|
+
MuiSnackbar: {
|
|
328
|
+
defaultProps: {
|
|
329
|
+
slotProps: {
|
|
330
|
+
root: {
|
|
331
|
+
component: MuiSnackbar
|
|
332
|
+
}
|
|
333
|
+
}
|
|
334
|
+
}
|
|
335
|
+
},
|
|
336
|
+
MuiSnackbarContent: { defaultProps: { component: Role.div } },
|
|
337
|
+
MuiStack: { defaultProps: { component: Role.div } },
|
|
338
|
+
MuiStep: { defaultProps: { component: Role.div } },
|
|
339
|
+
MuiSwitch: { defaultProps: { component: Role.span } },
|
|
340
|
+
MuiStepper: { defaultProps: { component: Role.div } },
|
|
341
|
+
MuiSvgIcon: { defaultProps: { component: Role.svg } },
|
|
342
|
+
MuiSwipeableDrawer: { defaultProps: { component: Role.div } },
|
|
343
|
+
MuiTabs: { defaultProps: { component: Role.div } },
|
|
344
|
+
MuiTable: { defaultProps: { component: withRenderProp(Role, "table") } },
|
|
345
|
+
MuiTableBody: {
|
|
346
|
+
defaultProps: { component: withRenderProp(Role, "tbody") }
|
|
347
|
+
},
|
|
348
|
+
MuiTableCell: { defaultProps: { component: MuiTableCell } },
|
|
349
|
+
MuiTableContainer: {
|
|
350
|
+
defaultProps: { component: withRenderProp(Role, "div") }
|
|
351
|
+
},
|
|
352
|
+
MuiTableFooter: {
|
|
353
|
+
defaultProps: { component: withRenderProp(Role, "tfoot") }
|
|
354
|
+
},
|
|
355
|
+
MuiTableHead: {
|
|
356
|
+
defaultProps: { component: MuiTableHead }
|
|
357
|
+
},
|
|
358
|
+
MuiTablePagination: {
|
|
359
|
+
defaultProps: {
|
|
360
|
+
component: withRenderProp(Role, "td"),
|
|
361
|
+
slotProps: { root: { colSpan: 999 } }
|
|
362
|
+
}
|
|
363
|
+
},
|
|
364
|
+
MuiTableRow: { defaultProps: { component: withRenderProp(Role, "tr") } },
|
|
365
|
+
MuiTableSortLabel: {
|
|
366
|
+
defaultProps: {
|
|
367
|
+
component: Role.span,
|
|
368
|
+
// TODO: This should use sort-ascending and sort-descending icons, but that requires disabling MUI's built-in icon rotation.
|
|
369
|
+
IconComponent: ArrowDownIcon
|
|
370
|
+
}
|
|
371
|
+
},
|
|
191
372
|
MuiTablePaginationActions: {
|
|
192
373
|
defaultProps: {
|
|
193
374
|
slots: {
|
|
@@ -198,20 +379,43 @@ function createTheme() {
|
|
|
198
379
|
}
|
|
199
380
|
}
|
|
200
381
|
},
|
|
201
|
-
|
|
382
|
+
MuiTextField: { defaultProps: { component: Role.div } },
|
|
383
|
+
MuiToggleButton: { defaultProps: { component: MuiIconButton } },
|
|
384
|
+
MuiToolbar: { defaultProps: { component: Role.div } },
|
|
385
|
+
MuiTooltip: {
|
|
202
386
|
defaultProps: {
|
|
203
|
-
|
|
204
|
-
IconComponent: ArrowDownIcon
|
|
387
|
+
describeChild: true
|
|
205
388
|
}
|
|
206
389
|
},
|
|
207
|
-
|
|
390
|
+
MuiTypography: {
|
|
208
391
|
defaultProps: {
|
|
209
|
-
|
|
392
|
+
variant: "body2",
|
|
393
|
+
variantMapping: {
|
|
394
|
+
h1: Role.h1,
|
|
395
|
+
h2: Role.h2,
|
|
396
|
+
h3: Role.h3,
|
|
397
|
+
h4: Role.h4,
|
|
398
|
+
h5: Role.h5,
|
|
399
|
+
h6: Role.h6,
|
|
400
|
+
subtitle1: Role.h6,
|
|
401
|
+
subtitle2: Role.h6,
|
|
402
|
+
body1: Role.p,
|
|
403
|
+
body2: Role.p,
|
|
404
|
+
inherit: Role.p,
|
|
405
|
+
button: Role.span,
|
|
406
|
+
caption: Role.span,
|
|
407
|
+
overline: Role.span
|
|
408
|
+
}
|
|
210
409
|
}
|
|
211
410
|
}
|
|
212
411
|
}
|
|
213
412
|
});
|
|
214
413
|
}
|
|
414
|
+
function withRenderProp(Role2, DefaultTagName) {
|
|
415
|
+
return React.forwardRef((props, forwardedRef) => {
|
|
416
|
+
return /* @__PURE__ */ jsx(Role2, { render: /* @__PURE__ */ jsx(DefaultTagName, {}), ...props, ref: forwardedRef });
|
|
417
|
+
});
|
|
418
|
+
}
|
|
215
419
|
export {
|
|
216
420
|
createTheme
|
|
217
421
|
};
|
package/dist/DEV/styles.css.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
// inline-css:/home/runner/work/
|
|
2
|
-
var styles_default = String.raw`@layer stratakit{[data-color-scheme],.🥝MuiRoot{--stratakit-mui-palette-background-default:var(--stratakit-color-bg-page-depth);--stratakit-mui-palette-background-paper:var(--stratakit-color-bg-page-depth);--stratakit-mui-palette-divider:var(--stratakit-color-border-page-base);--stratakit-mui-palette-text-primary:var(--stratakit-color-text-neutral-primary);--stratakit-mui-palette-text-secondary:var(--stratakit-color-text-neutral-secondary);--stratakit-mui-palette-text-disabled:var(--stratakit-color-text-neutral-disabled);--stratakit-mui-palette-text-icon:var(--stratakit-color-icon-neutral-primary);--stratakit-mui-palette-primary-main:var(--stratakit-color-bg-accent-base);--stratakit-mui-palette-primary-dark:var(--stratakit-color-bg-accent-faded);--stratakit-mui-palette-primary-light:var(--stratakit-color-bg-accent-muted);--stratakit-mui-palette-primary-contrastText:var(--stratakit-color-text-neutral-emphasis);--stratakit-mui-palette-secondary-main:var(--stratakit-color-bg-mono-base);--stratakit-mui-palette-secondary-dark:var(--stratakit-color-bg-mono-faded);--stratakit-mui-palette-secondary-light:var(--stratakit-color-bg-mono-muted);--stratakit-mui-palette-secondary-contrastText:var(--stratakit-color-text-neutral-emphasis);--stratakit-mui-palette-action-active:var(--stratakit-color-icon-neutral-primary);--stratakit-mui-palette-action-disabled:var(--stratakit-color-icon-neutral-disabled);--stratakit-mui-palette-action-disabledBackground:var(--stratakit-color-bg-glow-on-surface-disabled);--stratakit-mui-palette-error-main:var(--stratakit-color-bg-critical-base);--stratakit-mui-palette-error-dark:var(--stratakit-color-bg-critical-faded);--stratakit-mui-palette-error-light:var(--stratakit-color-bg-critical-muted);--stratakit-mui-palette-error-contrastText:var(--stratakit-color-text-neutral-emphasis);--stratakit-mui-palette-warning-main:var(--stratakit-color-bg-attention-base);--stratakit-mui-palette-warning-dark:var(--stratakit-color-bg-attention-faded);--stratakit-mui-palette-warning-light:var(--stratakit-color-bg-attention-muted);--stratakit-mui-palette-warning-contrastText:var(--stratakit-color-text-neutral-emphasis);--stratakit-mui-palette-success-main:var(--stratakit-color-bg-positive-base);--stratakit-mui-palette-success-dark:var(--stratakit-color-bg-positive-faded);--stratakit-mui-palette-success-light:var(--stratakit-color-bg-positive-muted);--stratakit-mui-palette-success-contrastText:var(--stratakit-color-text-neutral-emphasis);--stratakit-mui-palette-info-main:var(--stratakit-color-bg-info-base);--stratakit-mui-palette-info-dark:var(--stratakit-color-bg-info-faded);--stratakit-mui-palette-info-light:var(--stratakit-color-bg-info-muted);--stratakit-mui-palette-info-contrastText:var(--stratakit-color-text-neutral-emphasis);--stratakit-mui-palette-grey-50:oklch(85.95% .006 255.48);--stratakit-mui-palette-grey-100:oklch(79.56% .008 241.69);--stratakit-mui-palette-grey-200:oklch(75.82% .01 252.83);--stratakit-mui-palette-grey-300:oklch(69.04% .014 255.53);--stratakit-mui-palette-grey-400:oklch(62.09% .017 257.22);--stratakit-mui-palette-grey-500:oklch(55.22% .018 253.99);--stratakit-mui-palette-grey-600:oklch(48.26% .017 254.7);--stratakit-mui-palette-grey-700:oklch(41.45% .013 256.75);--stratakit-mui-palette-grey-800:oklch(34.4% .011 264.42);--stratakit-mui-palette-grey-900:oklch(26.92% .008 268.32);--stratakit-mui-palette-grey-A100:oklch(79.56% .008 241.69);--stratakit-mui-palette-grey-A200:oklch(75.82% .01 252.83);--stratakit-mui-palette-grey-A400:oklch(62.09% .017 257.22);--stratakit-mui-palette-grey-A700:oklch(41.45% .013 256.75);--stratakit-mui-palette-Alert-errorColor:var(--stratakit-color-text-neutral-primary);--stratakit-mui-palette-Alert-infoColor:var(--stratakit-color-text-neutral-primary);--stratakit-mui-palette-Alert-successColor:var(--stratakit-color-text-neutral-primary);--stratakit-mui-palette-Alert-warningColor:var(--stratakit-color-text-neutral-primary);--stratakit-mui-palette-Alert-errorFilledBg:var(--stratakit-color-bg-critical-transparent);--stratakit-mui-palette-Alert-infoFilledBg:var(--stratakit-color-bg-info-transparent);--stratakit-mui-palette-Alert-successFilledBg:var(--stratakit-color-bg-positive-transparent);--stratakit-mui-palette-Alert-warningFilledBg:var(--stratakit-color-bg-attention-transparent);--stratakit-mui-palette-Alert-errorFilledColor:var(--stratakit-color-text-neutral-primary);--stratakit-mui-palette-Alert-infoFilledColor:var(--stratakit-color-text-neutral-primary);--stratakit-mui-palette-Alert-successFilledColor:var(--stratakit-color-text-neutral-primary);--stratakit-mui-palette-Alert-warningFilledColor:var(--stratakit-color-text-neutral-primary);--stratakit-mui-palette-Alert-errorIconColor:var(--stratakit-color-icon-critical-base);--stratakit-mui-palette-Alert-infoIconColor:var(--stratakit-color-icon-info-base);--stratakit-mui-palette-Alert-successIconColor:var(--stratakit-color-icon-positive-base);--stratakit-mui-palette-Alert-warningIconColor:var(--stratakit-color-icon-attention-base);--stratakit-mui-palette-AppBar-defaultBg:var(--stratakit-color-bg-page-base);--stratakit-mui-palette-AppBar-darkBg:var(--stratakit-color-bg-page-base);--stratakit-mui-palette-AppBar-darkColor:var(--stratakit-color-text-neutral-primary);--stratakit-mui-palette-Avatar-defaultBg:var(--stratakit-color-bg-mono-base);--stratakit-mui-palette-Button-inheritContainedBg:var(--stratakit-color-bg-neutral-base);--stratakit-mui-palette-Button-inheritContainedHoverBg:var(--stratakit-color-bg-neutral-base);--stratakit-mui-palette-Chip-defaultBorder:var(--stratakit-color-border-neutral-base);--stratakit-mui-palette-Chip-defaultAvatarColor:var(--stratakit-color-text-neutral-emphasis);--stratakit-mui-palette-Chip-defaultIconColor:var(--stratakit-color-icon-neutral-primary);--stratakit-mui-palette-LinearProgress-primaryBg:var(--stratakit-color-bg-accent-muted);--stratakit-mui-palette-LinearProgress-secondaryBg:var(--stratakit-color-border-page-base);--stratakit-mui-palette-LinearProgress-infoBg:var(--stratakit-color-bg-info-muted);--stratakit-mui-palette-LinearProgress-successBg:var(--stratakit-color-bg-positive-muted);--stratakit-mui-palette-LinearProgress-warningBg:var(--stratakit-color-bg-attention-muted);--stratakit-mui-palette-LinearProgress-errorBg:var(--stratakit-color-bg-critical-muted);--stratakit-mui-palette-Skeleton-bg:var(--stratakit-color-bg-glow-on-surface-disabled);--stratakit-mui-palette-SnackbarContent-bg:var(--stratakit-color-bg-elevation-emphasis);--stratakit-mui-palette-SnackbarContent-color:var(--stratakit-color-text-neutral-emphasis);--stratakit-mui-palette-StepConnector-border:var(--stratakit-color-border-neutral-muted);--stratakit-mui-palette-StepContent-border:var(--stratakit-color-border-neutral-muted);--stratakit-mui-palette-TableCell-border:var(--stratakit-color-border-neutral-muted);--stratakit-mui-palette-Tooltip-bg:var(--stratakit-color-bg-elevation-emphasis)}.MuiAccordion-root{background-color:#0000}.MuiAlert-icon{align-items:center}:where(.MuiAutocomplete-hasPopupIcon) .MuiAutocomplete-input{padding-inline-end:29px}:where(.MuiAutocomplete-hasClearIcon) .MuiAutocomplete-input{padding-inline-end:53px}.MuiAutocomplete-tag{margin-inline-start:var(--stratakit-space-x1);margin-inline-end:0}.MuiAutocomplete-tag:where(:nth-child(1 of .MuiAutocomplete-tag)){margin-inline-start:var(--stratakit-space-x2)}.MuiAutocomplete-tag:where(:nth-last-child(1 of .MuiAutocomplete-tag)){margin-inline-end:var(--stratakit-space-x2)}.MuiAppBar-root{background-color:var(--stratakit-color-bg-page-base);box-shadow:none;border-block-end:1px solid var(--stratakit-color-border-page-base);color:var(--stratakit-color-text-neutral-primary)}.MuiButtonBase-root:where(.Mui-disabled){cursor:not-allowed;pointer-events:auto;background-color:#0000}.MuiButton-root:where(.MuiButton-colorSecondary){--variant-containedBg:var(--stratakit-color-bg-neutral-base);--variant-containedColor:var(--stratakit-color-text-neutral-primary);--variant-outlinedColor:var(--stratakit-color-text-neutral-primary);--variant-textColor:var(--stratakit-color-text-neutral-primary)}@media (any-hover:hover){.MuiButton-root:where(.MuiButton-colorSecondary):where(:hover){--variant-containedBg:color-mix(in oklch,var(--stratakit-color-bg-neutral-base)100%,var(--stratakit-color-glow-hue)var(--stratakit-color-bg-glow-base-hover-\%))}}.MuiButton-root:where(.MuiButton-colorPrimary){--variant-outlinedColor:var(--stratakit-color-text-accent-strong);--variant-textColor:var(--stratakit-color-text-accent-strong)}.MuiButton-root:where(.MuiButton-contained):where(.Mui-disabled){background-color:var(--stratakit-color-bg-glow-on-surface-disabled)}.MuiCard-root{background-color:var(--stratakit-color-bg-elevation-base)}.MuiCardContent-root:where(:has(+.MuiCardActions-root)){padding-block-end:0}.MuiCardActions-root{padding:var(--stratakit-space-x4)}.MuiCheckbox-root:where(.MuiCheckbox-colorPrimary):where(.Mui-checked,.MuiCheckbox-indeterminate):where(:not(.Mui-disabled)){color:var(--stratakit-mui-palette-primary-dark)}.MuiCheckbox-root:where(.Mui-focusVisible){outline:2px solid var(--stratakit-color-border-accent-strong)}.MuiFormControl-root{row-gap:var(--stratakit-space-x1)}.MuiFormLabel-root{font-size:var(--stratakit-font-size-14);color:var(--stratakit-color-text-neutral-secondary);position:relative;transform:none}.MuiChip-root:where(.MuiChip-filledDefault.MuiChip-colorDefault){background-color:var(--stratakit-color-bg-neutral-base);border:1px solid var(--stratakit-color-border-neutral-base)}.MuiDialogActions-root:where(.MuiDialogActions-spacing){padding-block:var(--stratakit-space-x4);padding-inline:var(--stratakit-space-x5)}.MuiIconButton-root{border-radius:4px}.MuiIconButton-root:where(.MuiIconButton-colorPrimary){color:var(--stratakit-color-icon-accent-strong)}.MuiIconButton-root:where(.MuiIconButton-colorSecondary){color:var(--stratakit-color-icon-neutral-primary)}.MuiIconButton-root:where(.MuiIconButton-colorError){color:var(--stratakit-color-icon-critical-base)}.MuiInputBase-root{font:var(--stratakit-mui-font-body2);border:1px solid var(--stratakit-color-border-neutral-base);padding:0}.MuiInputBase-root:where(:focus-within){border-color:var(--stratakit-color-border-accent-strong);outline:var(--🥝focus-outline);outline-offset:var(--🥝focus-outline-offset)}.MuiInputBase-root :where(fieldset){display:none}.MuiInputBase-input{align-content:center;min-block-size:36.5px;padding-block:0;padding-inline:14px}.MuiInputBase-input:where(.MuiInputBase-inputMultiline){align-content:baseline;padding-block:8.25px}.MuiInputBase-input:where(.MuiInputBase-inputAdornedStart){padding-inline-start:0}.MuiInputBase-input:where(.MuiInputBase-inputAdornedEnd){padding-inline-end:0}.MuiInputBase-input:where(:focus-visible){outline:none!important}.MuiInputAdornment-root:where(.MuiInputAdornment-positionStart){margin-inline-start:var(--stratakit-space-x2);margin-inline-end:var(--stratakit-space-x1)}.MuiInputAdornment-root:where(.MuiInputAdornment-positionEnd){margin-inline-start:var(--stratakit-space-x1);margin-inline-end:var(--stratakit-space-x2)}.MuiLink-root{text-underline-offset:var(--stratakit-space-x05);font-weight:500;text-decoration-color:currentColor;transition:text-underline-offset .15s ease-out}.MuiLink-root:where(:hover,:focus-visible){text-underline-offset:var(--stratakit-space-x1)}.MuiMenuItem-root:where(.Mui-focusVisible){outline-offset:-2px}.MuiPaper-root{--Paper-overlay:unset!important}.MuiPaper-root:where(.MuiPaper-elevation1){--stratakit-mui-palette-background-paper:var(--stratakit-color-bg-page-base)}.MuiPaper-root:where(.MuiPaper-elevation2,.MuiPaper-elevation3,.MuiPaper-elevation4,.MuiPaper-elevation5,.MuiPaper-elevation6,.MuiPaper-elevation7){--stratakit-mui-palette-background-paper:var(--stratakit-color-bg-elevation-base)}.MuiPaper-root:where(.MuiPaper-elevation8,.MuiPaper-elevation9,.MuiPaper-elevation10,.MuiPaper-elevation11,.MuiPaper-elevation12,.MuiPaper-elevation13,.MuiPaper-elevation14,.MuiPaper-elevation15,.MuiPaper-elevation16,.MuiPaper-elevation17,.MuiPaper-elevation18,.MuiPaper-elevation19,.MuiPaper-elevation20,.MuiPaper-elevation21,.MuiPaper-elevation22,.MuiPaper-elevation23,.MuiPaper-elevation24){--stratakit-mui-palette-background-paper:var(--stratakit-color-bg-elevation-level-1)}.MuiTab-root:where(.Mui-selected){color:var(--stratakit-color-text-accent-strong)}.MuiTab-root:where(:focus-visible){outline-offset:-4px}.MuiTabs-indicator{background-color:var(--stratakit-color-border-accent-strong)}.MuiTooltip-tooltip{box-shadow:var(--stratakit-shadow-control-tooltip-base)}.MuiSwitch-root .MuiSwitch-switchBase:where(.MuiSwitch-colorPrimary):where(.Mui-checked):where(:not(.Mui-disabled)){color:var(--stratakit-mui-palette-primary-dark)}.MuiSwitch-root:where(:has(.MuiSwitch-switchBase.Mui-focusVisible)){outline:2px solid var(--stratakit-color-border-accent-strong)}}@layer mui{:focus-visible:not(#a#b){outline:revert-layer}}`;
|
|
1
|
+
// inline-css:/home/runner/work/stratakit/stratakit/packages/mui/src/styles.css
|
|
2
|
+
var styles_default = String.raw`@layer stratakit{[data-color-scheme],.🥝MuiRoot{--stratakit-mui-palette-background-default:var(--stratakit-color-bg-page-depth);--stratakit-mui-palette-background-paper:var(--stratakit-color-bg-page-depth);--stratakit-mui-palette-divider:var(--stratakit-color-border-page-base);--stratakit-mui-palette-text-primary:var(--stratakit-color-text-neutral-primary);--stratakit-mui-palette-text-secondary:var(--stratakit-color-text-neutral-secondary);--stratakit-mui-palette-text-disabled:var(--stratakit-color-text-neutral-disabled);--stratakit-mui-palette-text-icon:var(--stratakit-color-icon-neutral-primary);--stratakit-mui-palette-primary-main:var(--stratakit-color-bg-accent-base);--stratakit-mui-palette-primary-dark:var(--stratakit-color-bg-accent-faded);--stratakit-mui-palette-primary-light:var(--stratakit-color-bg-accent-muted);--stratakit-mui-palette-primary-contrastText:var(--stratakit-color-text-neutral-emphasis);--stratakit-mui-palette-secondary-main:var(--stratakit-color-bg-mono-base);--stratakit-mui-palette-secondary-dark:var(--stratakit-color-bg-mono-faded);--stratakit-mui-palette-secondary-light:var(--stratakit-color-bg-mono-muted);--stratakit-mui-palette-secondary-contrastText:var(--stratakit-color-text-neutral-emphasis);--stratakit-mui-palette-action-active:var(--stratakit-color-icon-neutral-primary);--stratakit-mui-palette-action-disabled:var(--stratakit-color-icon-neutral-disabled);--stratakit-mui-palette-action-disabledBackground:var(--stratakit-color-bg-glow-on-surface-disabled);--stratakit-mui-palette-error-main:var(--stratakit-color-bg-critical-base);--stratakit-mui-palette-error-dark:var(--stratakit-color-bg-critical-faded);--stratakit-mui-palette-error-light:var(--stratakit-color-bg-critical-muted);--stratakit-mui-palette-error-contrastText:var(--stratakit-color-text-neutral-emphasis);--stratakit-mui-palette-warning-main:var(--stratakit-color-bg-attention-base);--stratakit-mui-palette-warning-dark:var(--stratakit-color-bg-attention-faded);--stratakit-mui-palette-warning-light:var(--stratakit-color-bg-attention-muted);--stratakit-mui-palette-warning-contrastText:var(--stratakit-color-text-neutral-emphasis);--stratakit-mui-palette-success-main:var(--stratakit-color-bg-positive-base);--stratakit-mui-palette-success-dark:var(--stratakit-color-bg-positive-faded);--stratakit-mui-palette-success-light:var(--stratakit-color-bg-positive-muted);--stratakit-mui-palette-success-contrastText:var(--stratakit-color-text-neutral-emphasis);--stratakit-mui-palette-info-main:var(--stratakit-color-bg-info-base);--stratakit-mui-palette-info-dark:var(--stratakit-color-bg-info-faded);--stratakit-mui-palette-info-light:var(--stratakit-color-bg-info-muted);--stratakit-mui-palette-info-contrastText:var(--stratakit-color-text-neutral-emphasis);--stratakit-mui-palette-grey-50:oklch(85.95% .006 255.48);--stratakit-mui-palette-grey-100:oklch(79.56% .008 241.69);--stratakit-mui-palette-grey-200:oklch(75.82% .01 252.83);--stratakit-mui-palette-grey-300:oklch(69.04% .014 255.53);--stratakit-mui-palette-grey-400:oklch(62.09% .017 257.22);--stratakit-mui-palette-grey-500:oklch(55.22% .018 253.99);--stratakit-mui-palette-grey-600:oklch(48.26% .017 254.7);--stratakit-mui-palette-grey-700:oklch(41.45% .013 256.75);--stratakit-mui-palette-grey-800:oklch(34.4% .011 264.42);--stratakit-mui-palette-grey-900:oklch(26.92% .008 268.32);--stratakit-mui-palette-grey-A100:oklch(79.56% .008 241.69);--stratakit-mui-palette-grey-A200:oklch(75.82% .01 252.83);--stratakit-mui-palette-grey-A400:oklch(62.09% .017 257.22);--stratakit-mui-palette-grey-A700:oklch(41.45% .013 256.75);--stratakit-mui-palette-Alert-errorColor:var(--stratakit-color-text-neutral-primary);--stratakit-mui-palette-Alert-infoColor:var(--stratakit-color-text-neutral-primary);--stratakit-mui-palette-Alert-successColor:var(--stratakit-color-text-neutral-primary);--stratakit-mui-palette-Alert-warningColor:var(--stratakit-color-text-neutral-primary);--stratakit-mui-palette-Alert-errorFilledBg:var(--stratakit-color-bg-critical-transparent);--stratakit-mui-palette-Alert-infoFilledBg:var(--stratakit-color-bg-info-transparent);--stratakit-mui-palette-Alert-successFilledBg:var(--stratakit-color-bg-positive-transparent);--stratakit-mui-palette-Alert-warningFilledBg:var(--stratakit-color-bg-attention-transparent);--stratakit-mui-palette-Alert-errorFilledColor:var(--stratakit-color-text-neutral-primary);--stratakit-mui-palette-Alert-infoFilledColor:var(--stratakit-color-text-neutral-primary);--stratakit-mui-palette-Alert-successFilledColor:var(--stratakit-color-text-neutral-primary);--stratakit-mui-palette-Alert-warningFilledColor:var(--stratakit-color-text-neutral-primary);--stratakit-mui-palette-Alert-errorIconColor:var(--stratakit-color-icon-critical-base);--stratakit-mui-palette-Alert-infoIconColor:var(--stratakit-color-icon-info-base);--stratakit-mui-palette-Alert-successIconColor:var(--stratakit-color-icon-positive-base);--stratakit-mui-palette-Alert-warningIconColor:var(--stratakit-color-icon-attention-base);--stratakit-mui-palette-AppBar-defaultBg:var(--stratakit-color-bg-page-base);--stratakit-mui-palette-AppBar-darkBg:var(--stratakit-color-bg-page-base);--stratakit-mui-palette-AppBar-darkColor:var(--stratakit-color-text-neutral-primary);--stratakit-mui-palette-Avatar-defaultBg:var(--stratakit-color-bg-mono-base);--stratakit-mui-palette-Button-inheritContainedBg:var(--stratakit-color-bg-neutral-base);--stratakit-mui-palette-Button-inheritContainedHoverBg:var(--stratakit-color-bg-neutral-base);--stratakit-mui-palette-Chip-defaultBorder:var(--stratakit-color-border-neutral-base);--stratakit-mui-palette-Chip-defaultAvatarColor:var(--stratakit-color-text-neutral-emphasis);--stratakit-mui-palette-Chip-defaultIconColor:var(--stratakit-color-icon-neutral-primary);--stratakit-mui-palette-LinearProgress-primaryBg:var(--stratakit-color-bg-accent-muted);--stratakit-mui-palette-LinearProgress-secondaryBg:var(--stratakit-color-border-page-base);--stratakit-mui-palette-LinearProgress-infoBg:var(--stratakit-color-bg-info-muted);--stratakit-mui-palette-LinearProgress-successBg:var(--stratakit-color-bg-positive-muted);--stratakit-mui-palette-LinearProgress-warningBg:var(--stratakit-color-bg-attention-muted);--stratakit-mui-palette-LinearProgress-errorBg:var(--stratakit-color-bg-critical-muted);--stratakit-mui-palette-Skeleton-bg:var(--stratakit-color-bg-glow-on-surface-disabled);--stratakit-mui-palette-SnackbarContent-bg:var(--stratakit-color-bg-elevation-emphasis);--stratakit-mui-palette-SnackbarContent-color:var(--stratakit-color-text-neutral-emphasis);--stratakit-mui-palette-StepConnector-border:var(--stratakit-color-border-neutral-muted);--stratakit-mui-palette-StepContent-border:var(--stratakit-color-border-neutral-muted);--stratakit-mui-palette-TableCell-border:var(--stratakit-color-border-neutral-muted);--stratakit-mui-palette-Tooltip-bg:var(--stratakit-color-bg-elevation-emphasis)}.MuiAlert-root{border:1px solid var(--stratakit-color-border-neutral-base)}.MuiAlert-root:where(.MuiAlert-outlined){background-color:var(--stratakit-color-bg-elevation-base)}.MuiAlert-root:where(.MuiAlert-colorSuccess){border-color:var(--stratakit-color-border-positive-base)}.MuiAlert-root:where(.MuiAlert-colorInfo){border-color:var(--stratakit-color-border-info-base)}.MuiAlert-root:where(.MuiAlert-colorWarning){border-color:var(--stratakit-color-border-attention-base)}.MuiAlert-root:where(.MuiAlert-colorError){border-color:var(--stratakit-color-border-critical-base)}.MuiAlert-icon{align-items:center}:where(.MuiAlert-root.MuiAlert-colorSuccess) .MuiAlert-icon{color:var(--stratakit-color-icon-positive-base)}:where(.MuiAlert-root.MuiAlert-colorInfo) .MuiAlert-icon{color:var(--stratakit-color-icon-info-base)}:where(.MuiAlert-root.MuiAlert-colorWarning) .MuiAlert-icon{color:var(--stratakit-color-icon-attention-base)}:where(.MuiAlert-root.MuiAlert-colorError) .MuiAlert-icon{color:var(--stratakit-color-icon-critical-base)}.MuiAutocomplete-inputRoot.MuiInputBase-root{--_MuiAutocomplete-icon-button-width:var(--stratakit-size-control-field-height-medium);padding-inline-end:calc(var(--_MuiAutocomplete-icon-button-width)*2 - 1px)}.MuiAutocomplete-inputRoot.MuiInputBase-root:where(.MuiInputBase-sizeSmall){--_MuiAutocomplete-icon-button-width:var(--stratakit-size-control-field-height-small)}.MuiAutocomplete-tag.MuiChip-root{margin-block:var(--stratakit-space-x05);margin-inline-start:var(--stratakit-space-x1);margin-inline-end:0}.MuiAutocomplete-tag.MuiChip-root:where(:nth-child(1 of .MuiAutocomplete-tag.MuiChip-root)){margin-inline-start:var(--stratakit-space-x2)}.MuiAutocomplete-tag.MuiChip-root:where(:nth-last-child(1 of .MuiAutocomplete-tag.MuiChip-root)){margin-inline-end:var(--stratakit-space-x2)}.MuiAutocomplete-clearIndicator{visibility:visible}.MuiAutocomplete-endAdornment{inset-inline-end:-1px}.MuiAutocomplete-endAdornment>*{margin-inline-end:0}.MuiBadge-badge{--🥝selection-color-bg:var(--stratakit-color-static-white);--🥝selection-color-text:var(--stratakit-color-static-black);box-shadow:0px 0px 0px 1px var(--stratakit-color-border-glow-strong-default)inset}:where(.MuiBadge-root[data-_sk-inline]) .MuiBadge-badge{position:static;transform:none}.MuiButtonBase-root:where(.Mui-disabled){cursor:not-allowed;pointer-events:auto;background-color:#0000}.MuiButton-root{min-block-size:var(--_MuiButton-height);min-inline-size:var(--_MuiButton-height);padding-block:var(--_MuiButton-padding-block);padding-inline:var(--_MuiButton-padding-inline)}.MuiButton-root:where(.MuiButton-sizeSmall){font-size:var(--stratakit-font-size-12);line-height:1.3333}.MuiButton-root:where(.MuiButton-sizeSmall){--_MuiButton-height:var(--stratakit-size-control-field-height-small);--_MuiButton-padding-block:var(--stratakit-space-x05);--_MuiButton-padding-inline:var(--stratakit-space-x2)}.MuiButton-root:where(.MuiButton-sizeMedium){font-size:var(--stratakit-font-size-14);line-height:1.4286}.MuiButton-root:where(.MuiButton-sizeMedium){--_MuiButton-height:var(--stratakit-size-control-field-height-medium);--_MuiButton-padding-block:var(--stratakit-space-x1);--_MuiButton-padding-inline:var(--stratakit-space-x3)}.MuiButton-root:where(.MuiButton-sizeLarge){font-size:var(--stratakit-font-size-16);line-height:1.5}.MuiButton-root:where(.MuiButton-sizeLarge){--_MuiButton-height:var(--stratakit-size-control-field-height-large);--_MuiButton-padding-block:var(--stratakit-space-x2);--_MuiButton-padding-inline:var(--stratakit-space-x4)}.MuiButton-root:where(.MuiButton-colorSecondary){--variant-containedBg:var(--stratakit-color-bg-neutral-base);--variant-containedColor:var(--stratakit-color-text-neutral-primary);--variant-outlinedColor:var(--stratakit-color-text-neutral-primary);--variant-textColor:var(--stratakit-color-text-neutral-primary);--_MuiButton-icon-color:var(--stratakit-color-icon-neutral-base)}@media (any-hover:hover){.MuiButton-root:where(.MuiButton-colorSecondary):where(:hover){--variant-containedBg:color-mix(in oklch,var(--stratakit-color-bg-neutral-base)100%,var(--stratakit-color-glow-hue)var(--stratakit-color-bg-glow-base-hover-\%));--_MuiButton-icon-color:var(--stratakit-color-icon-neutral-primary)}}.MuiButton-root:where(.MuiButton-colorPrimary){--variant-outlinedColor:var(--stratakit-color-text-accent-strong);--variant-textColor:var(--stratakit-color-text-accent-strong)}.MuiButton-root:where(.MuiButton-contained):where(.Mui-disabled){background-color:var(--stratakit-color-bg-glow-on-surface-disabled)}.MuiButton-root:where(.MuiButton-containedPrimary,.MuiButton-containedError){--_MuiButton-icon-color:var(--stratakit-color-icon-neutral-emphasis)}.MuiButton-root:where(.MuiButton-outlinedPrimary,.MuiButton-textPrimary){--_MuiButton-icon-color:var(--stratakit-color-icon-accent-strong);--variant-outlinedBorder:var(--stratakit-color-border-accent-base)}.MuiButton-root:where(.MuiButton-outlinedError,.MuiButton-textError){--_MuiButton-icon-color:var(--stratakit-color-icon-critical-base);--variant-textColor:var(--stratakit-color-text-critical-base);--variant-outlinedColor:var(--stratakit-color-text-critical-base);--variant-outlinedBorder:var(--stratakit-color-border-critical-base)}.MuiButton-root:where(.Mui-disabled){--_MuiButton-icon-color:var(--stratakit-color-icon-neutral-disabled)}.MuiButton-icon{color:var(--_MuiButton-icon-color)}.MuiCard-root{background-color:var(--stratakit-color-bg-elevation-base)}.MuiCard-root:where([data-_sk-actionable]){cursor:pointer;transition:background-color .15s ease-out}@media (any-hover:hover){.MuiCard-root:where([data-_sk-actionable]):where(:hover){background-color:color-mix(in oklch,var(--stratakit-color-bg-elevation-base)100%,var(--stratakit-color-glow-hue)var(--stratakit-color-bg-glow-base-hover-\%))}}.MuiCard-root:where([data-_sk-actionable]):where(:has(.MuiCardActionArea-root.Mui-focusVisible)){outline:var(--🥝focus-outline);outline-offset:var(--🥝focus-outline-offset)}.MuiCardContent-root:where(:has(+.MuiCardActions-root)){padding-block-end:0}.MuiCardActionArea-root{background-color:unset;-webkit-user-select:auto;user-select:auto}.MuiCardActionArea-root:where(.Mui-focusVisible){outline:none!important}.MuiCardActionArea-focusHighlight{display:none}.MuiCardActions-root{padding:var(--stratakit-space-x4)}:is(.MuiCheckbox-root,.MuiRadio-root){padding:0;position:relative}:is(.MuiCheckbox-root,.MuiRadio-root):before{content:"";border-radius:50%;position:absolute;inset:calc(-12px + .5rem)}:is(.MuiCheckbox-root,.MuiRadio-root)>input{appearance:none;opacity:1;aspect-ratio:1;background-color:var(--_MuiCheckbox-background-color);border:1px solid var(--_MuiCheckbox-border-color);border-radius:var(--_MuiCheckbox-border-radius);block-size:1rem;inline-size:1rem;color:var(--_MuiCheckbox-color);position:relative}:is(.MuiCheckbox-root,.MuiRadio-root)>input:after{content:"";-webkit-mask-position:50%;mask-position:50%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:var(--_MuiCheckbox-mask-image);mask-image:var(--_MuiCheckbox-mask-image);background-color:currentColor;position:absolute;inset:0}:is(.MuiCheckbox-root,.MuiRadio-root){--_MuiCheckbox-mask-image:url("data:image/svg+xml;utf8,<svg viewBox=\"0 0 16 16\"></svg>");--_MuiCheckbox-background-color:var(--stratakit-color-bg-neutral-base);--_MuiCheckbox-border-color:var(--stratakit-color-border-shadow-base);--_MuiCheckbox-color:var(--stratakit-color-icon-neutral-emphasis);--_MuiCheckbox-hover-overlay-color:var(--stratakit-color-bg-glow-on-surface-neutral-hover)}:is(.MuiCheckbox-root,.MuiRadio-root):where(.Mui-checked,.MuiCheckbox-indeterminate){--_MuiCheckbox-background-color:var(--stratakit-color-bg-accent-base);--_MuiCheckbox-border-color:var(--stratakit-color-border-shadow-strong);--_MuiCheckbox-hover-overlay-color:var(--stratakit-color-bg-glow-on-surface-accent-hover)}:where(.MuiFormControlLabel-root.Mui-error) :is(.MuiCheckbox-root,.MuiRadio-root){--_MuiCheckbox-background-color:var(--stratakit-color-bg-neutral-base);--_MuiCheckbox-border-color:var(--stratakit-color-border-critical-base);--_MuiCheckbox-color:var(--stratakit-color-icon-neutral-primary);--_MuiCheckbox-hover-overlay-color:var(--stratakit-color-bg-glow-on-surface-critical-hover)}:is(.MuiCheckbox-root,.MuiRadio-root):where(.Mui-disabled){--_MuiCheckbox-background-color:var(--stratakit-color-bg-glow-on-surface-disabled);--_MuiCheckbox-border-color:var(--stratakit-color-border-glow-on-surface-disabled);--_MuiCheckbox-color:var(--stratakit-color-icon-neutral-disabled);--_MuiCheckbox-hover-overlay-color:transparent}:is(.MuiCheckbox-root,.MuiRadio-root):where(.MuiCheckbox-root){--_MuiCheckbox-border-radius:var(--stratakit-mui-shape-borderRadius)}:is(.MuiCheckbox-root,.MuiRadio-root):where(.MuiCheckbox-root):where(.Mui-checked){--_MuiCheckbox-mask-image:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 16 16\"><path fill=\"currentColor\" d=\"M11.73 5.47a.75.75 0 0 1 0 1.06l-4.4 4.4a.75.75 0 0 1-1.06 0l-2-2a.75.75 0 0 1 1.06-1.06L6.8 9.34l3.87-3.87a.75.75 0 0 1 1.06 0Z\"/></svg>")}:is(.MuiCheckbox-root,.MuiRadio-root):where(.MuiCheckbox-root):where(.MuiCheckbox-indeterminate){--_MuiCheckbox-mask-image:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 16 16\"><path fill=\"currentColor\" d=\"M4.25 8A.75.75 0 0 1 5 7.25h6.5a.75.75 0 0 1 0 1.5H5A.75.75 0 0 1 4.25 8Z\"/></svg>")}:is(.MuiCheckbox-root,.MuiRadio-root):where(.MuiRadio-root){--_MuiCheckbox-border-radius:50.0%}:is(.MuiCheckbox-root,.MuiRadio-root):where(.MuiRadio-root):where(.Mui-checked){--_MuiCheckbox-mask-image:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" ><circle cx=\"8\" cy=\"8\" r=\"4\" /></svg>")}@media (any-hover:hover){:is(.MuiCheckbox-root,.MuiRadio-root):where(:hover):before,:where(.MuiFormControlLabel-root:hover) :is(.MuiCheckbox-root,.MuiRadio-root):before{background-color:var(--_MuiCheckbox-hover-overlay-color)}}.MuiChip-root:where(.MuiChip-filledDefault.MuiChip-colorDefault){background-color:var(--stratakit-color-bg-neutral-base);border:1px solid var(--stratakit-color-border-neutral-base)}.MuiChip-root:where(.MuiButtonBase-root){-webkit-user-select:auto;user-select:auto}.MuiChip-root:where(:has(.MuiChip-label:focus-visible)){outline:var(--🥝focus-outline)}.MuiChip-label:where(button){outline:unset!important}.MuiDialogActions-root{background-color:var(--stratakit-color-bg-page-base);border:1px solid #0000;border-block-start-color:var(--stratakit-color-border-page-base);background-clip:padding-box;border-end-end-radius:inherit;border-end-start-radius:inherit}.MuiDialogActions-root:where(.MuiDialogActions-spacing){padding-block:var(--stratakit-space-x4);padding-inline:var(--stratakit-space-x5)}.MuiFormControl-root{row-gap:var(--stratakit-space-x1)}.MuiFormControlLabel-root{column-gap:var(--stratakit-space-x1);margin-inline:0}.MuiFormControlLabel-root:where(.Mui-disabled){cursor:not-allowed}.MuiFormControlLabel-label{font-size:var(--stratakit-font-size-14);line-height:1.4286}.MuiFormGroup-root{row-gap:var(--stratakit-space-x1)}.MuiFormHelperText-root{inline-size:fit-content;margin:0}.MuiFormHelperText-root{font-size:var(--stratakit-font-size-12);line-height:1.3333}.MuiFormHelperText-root:where(.Mui-error){color:var(--stratakit-color-text-critical-base);position:relative}.MuiFormHelperText-root:where(.Mui-error):before,.MuiFormHelperText-root:where(.Mui-error):after{content:"";aspect-ratio:1;vertical-align:top;block-size:1lh;display:inline-block}.MuiFormHelperText-root:where(.Mui-error):before{--_octagon-filled:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path fill=\"currentColor\" d=\"M10.086 2H5.914a1 1 0 0 0-.707.293L2.293 5.207A1 1 0 0 0 2 5.914v4.237a1 1 0 0 0 .3.715l2.908 2.848a1 1 0 0 0 .7.286h4.178a1 1 0 0 0 .707-.293l2.914-2.914a1 1 0 0 0 .293-.707V5.914a1 1 0 0 0-.293-.707l-2.914-2.914A1 1 0 0 0 10.086 2Z\" /></svg>");--_❗:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 16 16\"><path fill=\"black\" fill-opacity=\".48\" d=\"M8.875 10.625a.875.875 0 1 0-1.75 0 .875.875 0 0 0 1.75 0ZM8 4a1.581 1.581 0 0 1 1.5 2.081l-.789 2.365c-.228.684-1.195.684-1.423 0L6.5 6.081A1.581 1.581 0 0 1 8 4Zm0 .5a1.08 1.08 0 0 0-1.025 1.423l.788 2.365a.25.25 0 0 0 .436.075l.039-.075.788-2.365a1.082 1.082 0 0 0-.89-1.415L8 4.5Zm1.375 6.125a1.375 1.375 0 1 1-2.75 0 1.375 1.375 0 0 1 2.75 0Z\" /><path fill=\"white\" d=\"M8.875 10.625a.875.875 0 1 1-1.75 0 .875.875 0 0 1 1.75 0ZM6.974 5.923l.789 2.366a.25.25 0 0 0 .474 0l.789-2.366a1.081 1.081 0 1 0-2.052 0Z\" /></svg>");-webkit-mask:var(--_octagon-filled)no-repeat center;mask:var(--_octagon-filled)no-repeat center;background-color:var(--stratakit-color-bg-critical-base);background-image:var(--_❗);background-repeat:no-repeat;margin-inline-end:var(--stratakit-space-x1)}.MuiFormHelperText-root:where(.Mui-error):after{--_octagon-outline:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path fill=\"currentColor\" d=\"M10.086 2a1 1 0 0 1 .707.293l2.914 2.914a1 1 0 0 1 .293.707v4.172l-.005.099a1 1 0 0 1-.288.608l-2.914 2.914-.073.066a1 1 0 0 1-.634.227H5.908l-.097-.005a1 1 0 0 1-.53-.216l-.073-.064-2.908-2.85a1 1 0 0 1-.295-.614l-.005-.1V5.914a1 1 0 0 1 .227-.634l.066-.073 2.914-2.914A1 1 0 0 1 5.914 2h4.172ZM5.914 3 3 5.914v4.237L5.908 13h4.178L13 10.086V5.914L10.086 3H5.914Z\" /></svg>");-webkit-mask:var(--_octagon-outline)no-repeat center;mask:var(--_octagon-outline)no-repeat center;background-color:var(--stratakit-color-border-glow-strong-default);position:absolute;inset-block-start:0;inset-inline-start:0}.MuiFormLabel-root{font-size:var(--stratakit-font-size-14);color:var(--stratakit-color-text-neutral-secondary);position:relative;transform:none}.MuiFormLabel-root:where(.Mui-disabled){color:var(--stratakit-color-text-neutral-disabled)}.MuiIconButton-root{--_MuiIconButton-icon-color:var(--stratakit-color-icon-neutral-base);aspect-ratio:1;color:var(--_MuiIconButton-icon-color);min-block-size:var(--_MuiIconButton-size);padding:var(--_MuiIconButton-padding);border-radius:4px}@media (any-hover:hover){.MuiIconButton-root:where(:hover){--_MuiIconButton-icon-color:var(--stratakit-color-icon-neutral-primary)}}.MuiIconButton-root:where(.MuiIconButton-sizeSmall){--_MuiIconButton-size:var(--stratakit-size-control-field-height-small);--_MuiIconButton-padding:var(--stratakit-space-x1)}.MuiIconButton-root:where(.MuiIconButton-sizeMedium){--_MuiIconButton-size:var(--stratakit-size-control-field-height-medium);--_MuiIconButton-padding:var(--stratakit-space-x2)}.MuiIconButton-root:where(.MuiIconButton-sizeLarge){--_MuiIconButton-size:var(--stratakit-size-control-field-height-large);--_MuiIconButton-padding:var(--stratakit-space-x3)}.MuiIconButton-root:where(.MuiIconButton-colorPrimary){--_MuiIconButton-icon-color:var(--stratakit-color-icon-accent-strong)}.MuiIconButton-root:where(.MuiIconButton-colorError){--_MuiIconButton-icon-color:var(--stratakit-color-icon-critical-base)}.MuiIconButton-root:where(.Mui-disabled){--_MuiIconButton-icon-color:var(--stratakit-color-icon-neutral-disabled)}.MuiInputBase-root{border:1px solid var(--_MuiInput-border-color);padding:0;transition:border-color .15s ease-out}.MuiInputBase-root{font-size:var(--stratakit-font-size-14);line-height:1.4286}.MuiInputBase-root{--_MuiInput-block-size:var(--stratakit-size-control-field-height-medium);--_MuiInput-border-color:var(--stratakit-color-border-control-textbox)}@media (any-hover:hover){.MuiInputBase-root:where(:not(.Mui-disabled)):hover{border-color:color-mix(in oklch,var(--_MuiInput-border-color)100%,var(--stratakit-color-glow-hue)var(--stratakit-color-border-glow-base-hover-\%))}}.MuiInputBase-root:where(.MuiInputBase-sizeSmall){font-size:var(--stratakit-font-size-12);line-height:1.3333}.MuiInputBase-root:where(.MuiInputBase-sizeSmall){--_MuiInput-block-size:var(--stratakit-size-control-field-height-small)}.MuiInputBase-root:where(:focus-within){--_MuiInput-border-color:var(--stratakit-color-border-accent-strong);outline:var(--🥝focus-outline);outline-offset:var(--🥝focus-outline-offset)}.MuiInputBase-root:where(.Mui-error){--_MuiInput-border-color:var(--stratakit-color-border-critical-base);--🥝Icon-color:var(--stratakit-color-icon-critical-base)}.MuiInputBase-root:where(.Mui-disabled){--_MuiInput-border-color:var(--stratakit-color-border-glow-on-surface-disabled);cursor:not-allowed;--🥝Icon-color:var(--stratakit-color-icon-neutral-disabled)}.MuiInputBase-root :where(fieldset){display:none}.MuiInputBase-input{height:unset;min-block-size:calc(var(--_MuiInput-block-size) - 2px);padding-block:0;padding-inline:var(--_MuiInput-padding-inline);--_MuiInput-padding-inline:var(--stratakit-space-x3);align-content:center}:where(.MuiInputBase-root.MuiInputBase-sizeSmall) .MuiInputBase-input{--_MuiInput-padding-inline:var(--stratakit-space-x2)}.MuiInputBase-input:where(input,textarea)::placeholder{color:var(--stratakit-color-text-neutral-secondary);opacity:1;-webkit-user-select:none;user-select:none}.MuiInputBase-input:where(.MuiInputBase-inputMultiline){align-content:baseline;padding-block:8.25px}.MuiInputBase-input:where(.MuiInputBase-inputAdornedStart){padding-inline-start:0}.MuiInputBase-input:where(.MuiInputBase-inputAdornedEnd){padding-inline-end:0}.MuiInputBase-input:where(:focus-visible){outline:none!important}.MuiInputBase-input:where(.Mui-disabled){cursor:not-allowed}.MuiInputAdornment-root:where(.MuiInputAdornment-positionStart){margin-inline-start:var(--stratakit-space-x2);margin-inline-end:var(--stratakit-space-x1)}.MuiInputAdornment-root:where(.MuiInputAdornment-positionEnd){margin-inline-start:var(--stratakit-space-x1);margin-inline-end:var(--stratakit-space-x2)}.MuiList-root:where(.MuiList-padding){padding-block:var(--stratakit-space-x1)}:is(.MuiListItemButton-root,.MuiListSubheader-root,.MuiListItem-root:where(.MuiListItem-padding)){line-height:unset;min-block-size:var(--stratakit-size-control-listitem-height-large);padding-block:var(--stratakit-space-x1);padding-inline:var(--stratakit-space-x3);align-content:center;gap:var(--stratakit-space-x2)}:where(.MuiList-root.MuiList-dense) :is(.MuiListItemButton-root,.MuiListSubheader-root,.MuiListItem-root:where(.MuiListItem-padding)){min-block-size:var(--stratakit-size-control-listitem-height-small)}:where(.MuiList-root.MuiList-dense) :is(.MuiListItemButton-root,.MuiListSubheader-root,.MuiListItem-root:where(.MuiListItem-padding)){font-size:var(--stratakit-font-size-12);line-height:1.3333}:is(.MuiListItemIcon-root,.MuiListItemAvatar-root){min-width:unset}.MuiListItemText-root{gap:var(--stratakit-space-x1);margin:0}.MuiSlider-root{--_MuiSlider-rail-background-color:var(--stratakit-color-bg-control-slider-track);--_MuiSlider-rail-border-color:var(--stratakit-color-bg-control-slider-track);--_MuiSlider-track-background-color:var(--stratakit-color-bg-accent-base);--_MuiSlider-track-border-color:var(--stratakit-color-bg-accent-base);padding:0}.MuiSlider-root:where(.MuiSlider-sizeSmall){--_MuiSlider-rail-track-size:.125rem;--_MuiSlider-rail-track-size-increase:calc(.125rem + var(--stratakit-space-x1));--_MuiSlider-thumb-size:.875rem}.MuiSlider-root:where(.MuiSlider-sizeMedium){--_MuiSlider-rail-track-size:.25rem;--_MuiSlider-rail-track-size-increase:calc(.25rem + var(--stratakit-space-x1));--_MuiSlider-thumb-size:1rem}.MuiSlider-root:has(.Mui-active,.Mui-focusVisible){--_MuiSlider-rail-track-size:var(--_MuiSlider-rail-track-size-increase)}@media (any-hover:hover){.MuiSlider-root:where(:not(.Mui-disabled):hover){--_MuiSlider-rail-track-size:var(--_MuiSlider-rail-track-size-increase)}}.MuiSlider-root:where(:not(.MuiSlider-vertical)){block-size:var(--_MuiSlider-thumb-size)}.MuiSlider-root:where(.MuiSlider-vertical){inline-size:var(--_MuiSlider-thumb-size)}.MuiSlider-root:where(.Mui-disabled){cursor:not-allowed;pointer-events:initial;--_MuiSlider-rail-background-color:var(--stratakit-color-bg-control-switch);--_MuiSlider-rail-border-color:var(--stratakit-color-border-glow-on-surface-disabled);--_MuiSlider-track-background-color:var(--stratakit-color-border-glow-on-surface-disabled);--_MuiSlider-track-border-color:var(--stratakit-color-border-glow-on-surface-disabled)}:where(.MuiSlider-root:not(.MuiSlider-vertical)) :is(.MuiSlider-rail,.MuiSlider-track){block-size:var(--_MuiSlider-rail-track-size)}:where(.MuiSlider-root.MuiSlider-vertical) :is(.MuiSlider-rail,.MuiSlider-track){inline-size:var(--_MuiSlider-rail-track-size)}.MuiSlider-rail{background-color:var(--_MuiSlider-rail-background-color);border:1px solid var(--_MuiSlider-rail-border-color);opacity:1}@media (prefers-reduced-motion:no-preference){:where(.MuiSlider-root:not(.MuiSlider-vertical)) .MuiSlider-rail{transition:block-size .15s cubic-bezier(.4,0,.2,1)}:where(.MuiSlider-root.MuiSlider-vertical) .MuiSlider-rail{transition:inline-size .15s cubic-bezier(.4,0,.2,1)}}.MuiSlider-track{background-color:var(--_MuiSlider-track-background-color);border:1px solid var(--_MuiSlider-track-border-color)}.MuiSlider-thumb{aspect-ratio:1;block-size:var(--_MuiSlider-thumb-size);inline-size:var(--_MuiSlider-thumb-size);background-color:var(--stratakit-color-bg-neutral-inverse);border:1px solid var(--stratakit-color-border-shadow-base);box-shadow:none;cursor:grab}.MuiSlider-thumb:where(.Mui-active){cursor:grabbing}.MuiSlider-thumb:where(.Mui-disabled){background-color:var(--stratakit-color-icon-neutral-disabled);border-color:var(--stratakit-color-icon-neutral-disabled);cursor:not-allowed}.MuiSlider-thumb:where(.Mui-focusVisible){outline:var(--🥝focus-outline);outline-offset:2px}.MuiSlider-thumb:after{block-size:24px;inline-size:24px}.MuiSlider-mark{background-color:var(--stratakit-color-icon-neutral-base)}.MuiSlider-mark:where(.MuiSlider-markActive){background-color:var(--stratakit-color-icon-neutral-emphasis)}:where(.MuiSlider-root.Mui-disabled) .MuiSlider-mark{background-color:var(--stratakit-color-icon-neutral-disabled)}.MuiSlider-mark:where(:nth-child(1 of .MuiSlider-mark),:nth-last-child(1 of .MuiSlider-mark)){background-color:#0000}@media (prefers-reduced-motion:reduce){:is(.MuiSlider-track,.MuiSlider-thumb){transition:none}}.MuiSwitch-root{outline-offset:var(--🥝focus-outline-offset);--_MuiSwitch-padding:var(--stratakit-space-x05);border-radius:3.40282e38px;align-items:center;block-size:auto;inline-size:auto;padding:0}.MuiSwitch-root:where(.MuiSwitch-sizeSmall){--_MuiSwitch-height:1.25rem}.MuiSwitch-root:where(.MuiSwitch-sizeMedium){--_MuiSwitch-height:1.5rem}.MuiSwitch-root:has(.Mui-focusVisible){outline:var(--🥝focus-outline)}@supports not selector(:has(+ *)){.MuiSwitch-root:where(:focus-within){outline:var(--🥝focus-outline)}}.MuiSwitch-switchBase{aspect-ratio:1;block-size:var(--_MuiSwitch-height);inset:unset;padding:var(--_MuiSwitch-padding);transform:var(--_MuiSwitch-thumb-position-off);transform-origin:0;--_MuiSwitch-thumb-background-color:var(--stratakit-color-bg-neutral-inverse);--_MuiSwitch-thumb-box-shadow:var(--stratakit-shadow-control-button-base-inset),0px 0px 0px 1px var(--stratakit-color-border-shadow-base)inset,var(--stratakit-shadow-control-button-base-drop);--_MuiSwitch-thumb-position-off:none;--_MuiSwitch-thumb-position-on:translateX(calc(var(--_MuiSwitch-height) - var(--_MuiSwitch-padding)*2))}@media (prefers-reduced-motion:no-preference){.MuiSwitch-switchBase{will-change:transform;transition:transform .15s ease-out}}@media (any-hover:hover){.MuiSwitch-switchBase:hover{background-color:#0000}}.MuiSwitch-switchBase:where(.Mui-checked){inset:unset;transform:var(--_MuiSwitch-thumb-position-on)}.MuiSwitch-switchBase:where(.Mui-disabled){--_MuiSwitch-thumb-background-color:var(--stratakit-color-icon-neutral-disabled);--_MuiSwitch-thumb-box-shadow:none}:root[dir=rtl] .MuiSwitch-switchBase{--_MuiSwitch-thumb-position-off:translateX(calc(calc(var(--_MuiSwitch-height) - var(--_MuiSwitch-padding)*2)*-1));--_MuiSwitch-thumb-position-on:none}.MuiSwitch-thumb{aspect-ratio:inherit;background-color:var(--_MuiSwitch-thumb-background-color);box-shadow:var(--_MuiSwitch-thumb-box-shadow);border-radius:50%;block-size:100%;inline-size:100%}.MuiSwitch-track{block-size:var(--_MuiSwitch-height);inline-size:calc(var(--_MuiSwitch-height)*2 - var(--_MuiSwitch-padding)*2);background-color:var(--_MuiSwitch-track-background-color);border:1px solid var(--_MuiSwitch-track-border-color);border-radius:inherit;opacity:1;--_MuiSwitch-track-background-color:var(--stratakit-color-bg-control-switch);--_MuiSwitch-track-background-hover-effect:var(--stratakit-color-glow-hue)var(--stratakit-color-bg-glow-base-hover-\%);--_MuiSwitch-track-border-color:var(--stratakit-color-border-control-switch);--_MuiSwitch-track-border-hover-effect:var(--stratakit-color-glow-hue)var(--stratakit-color-border-glow-base-hover-\%);transition:background-color .15s ease-out,border-color .15s ease-out}@media (any-hover:hover){:where(.MuiSwitch-switchBase:not(.Mui-disabled):hover)+.MuiSwitch-track{background-color:color-mix(in oklch,var(--_MuiSwitch-track-background-color)100%,var(--_MuiSwitch-track-background-hover-effect));border-color:color-mix(in oklch,var(--_MuiSwitch-track-border-color)100%,var(--_MuiSwitch-track-border-hover-effect))}}:where(.MuiSwitch-switchBase.Mui-checked)+.MuiSwitch-track{--_MuiSwitch-track-background-color:var(--stratakit-color-bg-accent-base);--_MuiSwitch-track-background-hover-effect:var(--stratakit-color-glow-hue)var(--stratakit-color-bg-glow-strong-hover-\%);--_MuiSwitch-track-border-color:var(--stratakit-color-border-accent-base);--_MuiSwitch-track-border-hover-effect:var(--stratakit-color-glow-hue)var(--stratakit-color-bg-glow-base-hover-\%)}:where(.MuiSwitch-switchBase.Mui-disabled)+.MuiSwitch-track{--_MuiSwitch-track-background-color:var(--stratakit-color-bg-control-switch);--_MuiSwitch-track-border-color:var(--stratakit-color-border-glow-on-surface-disabled)}.MuiTab-root:where(.Mui-selected){color:var(--stratakit-color-text-accent-strong)}.MuiTab-root:where(:focus-visible){outline-offset:-4px}.MuiTabs-indicator{background-color:var(--stratakit-color-border-accent-strong)}.MuiToggleButton-root{min-block-size:var(--_MuiToggleButton-height);min-inline-size:var(--_MuiToggleButton-height);padding:calc(var(--_MuiToggleButton-padding) - 1px)}.MuiToggleButton-root:where(.MuiToggleButton-sizeSmall){font-size:var(--stratakit-font-size-12);line-height:1.3333}.MuiToggleButton-root:where(.MuiToggleButton-sizeSmall){--_MuiToggleButton-height:var(--stratakit-size-control-field-height-small);--_MuiToggleButton-padding:var(--stratakit-space-x1)}.MuiToggleButton-root:where(.MuiToggleButton-sizeMedium){font-size:var(--stratakit-font-size-14);line-height:1.4286}.MuiToggleButton-root:where(.MuiToggleButton-sizeMedium){--_MuiToggleButton-height:var(--stratakit-size-control-field-height-medium);--_MuiToggleButton-padding:var(--stratakit-space-x2)}.MuiToggleButton-root:where(.MuiToggleButton-sizeLarge){font-size:var(--stratakit-font-size-16);line-height:1.5}.MuiToggleButton-root:where(.MuiToggleButton-sizeLarge){--_MuiToggleButton-height:var(--stratakit-size-control-field-height-large);--_MuiToggleButton-padding:var(--stratakit-space-x3)}.MuiTypography-root:where(.MuiTypography-body1){font-size:var(--stratakit-font-size-16);line-height:1.5}.MuiTypography-root:where(.MuiTypography-body2){font-size:var(--stratakit-font-size-14);line-height:1.4286}.MuiTypography-root:where(.MuiTypography-h1){font-size:var(--stratakit-font-size-48);line-height:1.1667}.MuiTypography-root:where(.MuiTypography-h2){font-size:var(--stratakit-font-size-40);line-height:1.2}.MuiTypography-root:where(.MuiTypography-h3){font-size:var(--stratakit-font-size-32);line-height:1.25}.MuiTypography-root:where(.MuiTypography-h4){font-size:var(--stratakit-font-size-28);line-height:1.2857}.MuiTypography-root:where(.MuiTypography-h5){font-size:var(--stratakit-font-size-24);line-height:1.3333}.MuiTypography-root:where(.MuiTypography-h6){font-size:var(--stratakit-font-size-20);line-height:1.4}.MuiTypography-root:where(.MuiTypography-caption){font-size:var(--stratakit-font-size-12);line-height:1.3333}.MuiTypography-root:where(.MuiTypography-subtitle1){font-size:var(--stratakit-font-size-12);line-height:1.3333}.MuiTypography-root:where(.MuiTypography-subtitle2){font-size:var(--stratakit-font-size-11);line-height:1.4545}.MuiAccordion-root{background-color:#0000}.MuiAppBar-root{background-color:var(--stratakit-color-bg-page-base);box-shadow:none;border-block-end:1px solid var(--stratakit-color-border-page-base);color:var(--stratakit-color-text-neutral-primary)}.MuiBackdrop-root:where(:not(.MuiBackdrop-invisible)){background-color:oklch(from var(--stratakit-color-bg-elevation-overlay)l c h/.8)}.MuiBottomNavigationAction-root:where(.Mui-selected){color:var(--stratakit-color-text-accent-strong)}.MuiLink-root{text-underline-offset:var(--stratakit-space-x05);font-weight:500;text-decoration-color:currentColor;transition:text-underline-offset .15s ease-out}.MuiLink-root:where(:hover,:focus-visible){text-underline-offset:var(--stratakit-space-x1)}.MuiMenuItem-root:where(.Mui-focusVisible){outline-offset:-2px}.MuiPaper-root{--Paper-overlay:unset!important}.MuiPaper-root:where(.MuiPaper-elevation1){--stratakit-mui-palette-background-paper:var(--stratakit-color-bg-page-base)}.MuiPaper-root:where(.MuiPaper-elevation2,.MuiPaper-elevation3,.MuiPaper-elevation4,.MuiPaper-elevation5,.MuiPaper-elevation6,.MuiPaper-elevation7){--stratakit-mui-palette-background-paper:var(--stratakit-color-bg-elevation-base)}.MuiPaper-root:where(.MuiPaper-elevation8,.MuiPaper-elevation9,.MuiPaper-elevation10,.MuiPaper-elevation11,.MuiPaper-elevation12,.MuiPaper-elevation13,.MuiPaper-elevation14,.MuiPaper-elevation15,.MuiPaper-elevation16,.MuiPaper-elevation17,.MuiPaper-elevation18,.MuiPaper-elevation19,.MuiPaper-elevation20,.MuiPaper-elevation21,.MuiPaper-elevation22,.MuiPaper-elevation23,.MuiPaper-elevation24){--stratakit-mui-palette-background-paper:var(--stratakit-color-bg-elevation-level-1)}.MuiTooltip-tooltip{box-shadow:var(--stratakit-shadow-control-tooltip-base)}}@media (forced-colors:active){@layer stratakit{.MuiBadge-badge{border:1px solid canvastext}:is(.MuiButton-root,.MuiIconButton-root){color:buttontext;background-color:buttonface;border:1px solid buttonborder}:is(.MuiButton-root,.MuiIconButton-root):where(.MuiButton-colorError){forced-color-adjust:none;box-shadow:none}:is(.MuiButton-root,.MuiIconButton-root):where(.MuiIconButton-colorError,.MuiButton-colorError){color:marktext;background-color:mark}:is(.MuiButton-root,.MuiIconButton-root):where(.Mui-disabled){color:graytext;background-color:canvas;border-color:graytext}:is(.MuiCheckbox-root,.MuiRadio-root){--_MuiCheckbox-border-color:CanvasText;--_MuiCheckbox-color:CanvasText}:is(.MuiCheckbox-root,.MuiRadio-root):where(.Mui-checked,.MuiCheckbox-indeterminate){--_MuiCheckbox-background-color:SelectedItem;--_MuiCheckbox-color:SelectedItemText}:where(.MuiFormControlLabel-root.Mui-error) :is(.MuiCheckbox-root,.MuiRadio-root){--_MuiCheckbox-background-color:Mark;--_MuiCheckbox-color:MarkText}:is(.MuiCheckbox-root,.MuiRadio-root):where(.Mui-disabled){--_MuiCheckbox-background-color:Canvas;--_MuiCheckbox-border-color:GrayText;--_MuiCheckbox-color:GrayText}.MuiDialog-paper{border:1px solid}.MuiFormControlLabel-label:where(.Mui-disabled){color:graytext}.MuiFormHelperText-root:where(.Mui-error){forced-color-adjust:none;color:marktext;background-color:mark}.MuiFormHelperText-root:where(.Mui-error):before,.MuiFormHelperText-root:where(.Mui-error):after{background-color:marktext}.MuiSlider-root{--_MuiSlider-track-background-color:SelectedItem}.MuiSlider-root:where(.Mui-disabled){--_MuiSlider-rail-border-color:GrayText;--_MuiSlider-track-background-color:GrayText;--_MuiSlider-track-border-color:GrayText}.MuiSlider-thumb:where(.Mui-disabled){border-color:graytext}.MuiSlider-mark{background-color:canvastext}.MuiSlider-mark:where(.MuiSlider-markActive){background-color:selecteditemtext}:where(.MuiSlider-root.Mui-disabled) .MuiSlider-mark{background-color:graytext}:where(.MuiSlider-root.Mui-disabled) .MuiSlider-mark:where(.MuiSlider-markActive){background-color:canvas}.MuiSlider-mark:where(:nth-child(1 of .MuiSlider-mark),:nth-last-child(1 of .MuiSlider-mark)){background-color:#0000}.MuiSwitch-switchBase{--_MuiSwitch-thumb-background-color:CanvasText}.MuiSwitch-switchBase:where(.Mui-checked:not(.Mui-disabled)){--_MuiSwitch-thumb-background-color:SelectedItemText}.MuiSwitch-switchBase:where(.Mui-checked:not(.Mui-disabled))+.MuiSwitch-track{background-color:selecteditem}.MuiSwitch-switchBase:where(.Mui-disabled){--_MuiSwitch-thumb-background-color:GrayText}.MuiSwitch-switchBase:where(.Mui-disabled)+.MuiSwitch-track{--_MuiSwitch-track-border-color:GrayText}}}@layer mui{:focus-visible:not(#a#b){outline:revert-layer}}`;
|
|
3
3
|
|
|
4
4
|
// src/styles.css.ts
|
|
5
5
|
var styles_css_default = styles_default;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Role } from "@ariakit/react/role";
|
|
3
|
+
import {
|
|
4
|
+
forwardRef
|
|
5
|
+
} from "@stratakit/foundations/secret-internals";
|
|
6
|
+
const MuiBadge = forwardRef((props, forwardedRef) => {
|
|
7
|
+
const { inline, ...rest } = props;
|
|
8
|
+
return /* @__PURE__ */ jsx(
|
|
9
|
+
Role.span,
|
|
10
|
+
{
|
|
11
|
+
...rest,
|
|
12
|
+
"data-_sk-inline": inline ? "" : void 0,
|
|
13
|
+
ref: forwardedRef
|
|
14
|
+
}
|
|
15
|
+
);
|
|
16
|
+
});
|
|
17
|
+
DEV: MuiBadge.displayName = "MuiBadge";
|
|
18
|
+
export {
|
|
19
|
+
MuiBadge
|
|
20
|
+
};
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { Role } from "@ariakit/react/role";
|
|
4
|
+
import {
|
|
5
|
+
forwardRef,
|
|
6
|
+
useMergedRefs
|
|
7
|
+
} from "@stratakit/foundations/secret-internals";
|
|
8
|
+
const MuiButtonBase = forwardRef(
|
|
9
|
+
(props, forwardedRef) => {
|
|
10
|
+
const { href, "aria-disabled": ariaDisabled, ...rest } = props;
|
|
11
|
+
const isDisabled = ariaDisabled === true || ariaDisabled === "true";
|
|
12
|
+
const [tagName, setTagName] = React.useState(void 0);
|
|
13
|
+
const determineTagName = React.useCallback(
|
|
14
|
+
(element) => {
|
|
15
|
+
if (!element) return;
|
|
16
|
+
setTagName(element.tagName);
|
|
17
|
+
},
|
|
18
|
+
[]
|
|
19
|
+
);
|
|
20
|
+
const isNativeButton = !props.render && !href || tagName === "BUTTON";
|
|
21
|
+
const isLink = !props.render && href || tagName === "A";
|
|
22
|
+
const type = (() => {
|
|
23
|
+
if (!isNativeButton || props.type) return props.type;
|
|
24
|
+
if (props.formAction) return "submit";
|
|
25
|
+
return "button";
|
|
26
|
+
})();
|
|
27
|
+
const role = (() => {
|
|
28
|
+
if (isLink && props.role === "button") return void 0;
|
|
29
|
+
if (isNativeButton && props.role === "button") return void 0;
|
|
30
|
+
return props.role;
|
|
31
|
+
})();
|
|
32
|
+
const render = (() => {
|
|
33
|
+
if (href) return /* @__PURE__ */ jsx(Role.a, { href, render: props.render });
|
|
34
|
+
return props.render;
|
|
35
|
+
})();
|
|
36
|
+
return /* @__PURE__ */ jsx(
|
|
37
|
+
Role.button,
|
|
38
|
+
{
|
|
39
|
+
...rest,
|
|
40
|
+
render,
|
|
41
|
+
type,
|
|
42
|
+
role,
|
|
43
|
+
ref: useMergedRefs(determineTagName, forwardedRef),
|
|
44
|
+
disabled: isNativeButton ? isDisabled : void 0,
|
|
45
|
+
"aria-disabled": isNativeButton ? void 0 : ariaDisabled
|
|
46
|
+
}
|
|
47
|
+
);
|
|
48
|
+
}
|
|
49
|
+
);
|
|
50
|
+
DEV: MuiButtonBase.displayName = "MuiButtonBase";
|
|
51
|
+
export {
|
|
52
|
+
MuiButtonBase
|
|
53
|
+
};
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { Role } from "@ariakit/react/role";
|
|
4
|
+
import {
|
|
5
|
+
forwardRef,
|
|
6
|
+
useEventHandlers,
|
|
7
|
+
useMergedRefs
|
|
8
|
+
} from "@stratakit/foundations/secret-internals";
|
|
9
|
+
import { MuiButtonBase } from "./MuiButtonBase.js";
|
|
10
|
+
const MuiCardContext = React.createContext(void 0);
|
|
11
|
+
const MuiCard = forwardRef(
|
|
12
|
+
(props, forwardedRef) => {
|
|
13
|
+
const { role, ...rest } = props;
|
|
14
|
+
const [actionAreaElement, setActionAreaElement] = React.useState(void 0);
|
|
15
|
+
const handleActionAreaClick = (event) => {
|
|
16
|
+
if (!actionAreaElement) return;
|
|
17
|
+
if (!(event.target instanceof Element)) return;
|
|
18
|
+
if (event.target.closest("a, button, [role=button]")) return;
|
|
19
|
+
const selection = window.getSelection();
|
|
20
|
+
if (selection && !selection.isCollapsed) return;
|
|
21
|
+
actionAreaElement.click();
|
|
22
|
+
};
|
|
23
|
+
return /* @__PURE__ */ jsx(
|
|
24
|
+
MuiCardContext.Provider,
|
|
25
|
+
{
|
|
26
|
+
value: { actionAreaElement, setActionAreaElement },
|
|
27
|
+
children: /* @__PURE__ */ jsx(
|
|
28
|
+
Role,
|
|
29
|
+
{
|
|
30
|
+
render: /* @__PURE__ */ jsx("article", {}),
|
|
31
|
+
...rest,
|
|
32
|
+
"data-_sk-actionable": actionAreaElement ? "" : void 0,
|
|
33
|
+
onClick: useEventHandlers(props.onClick, handleActionAreaClick),
|
|
34
|
+
ref: forwardedRef
|
|
35
|
+
}
|
|
36
|
+
)
|
|
37
|
+
}
|
|
38
|
+
);
|
|
39
|
+
}
|
|
40
|
+
);
|
|
41
|
+
DEV: MuiCard.displayName = "MuiCard";
|
|
42
|
+
const MuiCardActionArea = forwardRef(
|
|
43
|
+
(props, forwardedRef) => {
|
|
44
|
+
const { role, ...rest } = props;
|
|
45
|
+
const context = React.useContext(MuiCardContext);
|
|
46
|
+
return /* @__PURE__ */ jsx(
|
|
47
|
+
MuiButtonBase,
|
|
48
|
+
{
|
|
49
|
+
...rest,
|
|
50
|
+
ref: useMergedRefs(context?.setActionAreaElement, forwardedRef)
|
|
51
|
+
}
|
|
52
|
+
);
|
|
53
|
+
}
|
|
54
|
+
);
|
|
55
|
+
DEV: MuiCardActionArea.displayName = "MuiCardActionArea";
|
|
56
|
+
export {
|
|
57
|
+
MuiCard,
|
|
58
|
+
MuiCardActionArea
|
|
59
|
+
};
|