@12-apps/ui 6.33.0 → 6.33.1
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/NATIVE.md +1 -1
- package/dist/_internal/components/data-display/DataViews/DataViewsTableBase.js +7 -7
- package/dist/_internal/components/data-display/DataViews/DeleteViewDialog.js +3 -3
- package/dist/_internal/components/data-display/DataViews/ManageViewsDialog.js +3 -3
- package/dist/_internal/components/data-display/DataViews/SaveViewModal.js +3 -3
- package/dist/_internal/components/data-display/DataViews/data-views-table-parts.js +5 -5
- package/dist/_internal/components/feedback/Dialog/Dialog.js +2 -2
- package/dist/_internal/components/feedback/Dialog/Dialog.styles.js +1 -1
- package/dist/_internal/components/feedback/index.js +2 -2
- package/dist/_internal/components/form/UploadButton/UploadButton.js +2 -2
- package/dist/_internal/components/form/UploadButton/UploadButton.parts.js +1 -1
- package/dist/_internal/components/form/index.js +2 -2
- package/dist/_internal/components/index.js +7 -7
- package/dist/_internal/components/layout/Separator/Separator.js +2 -2
- package/dist/_internal/components/layout/Separator/Separator.styles.js +3 -1
- package/dist/_internal/components/layout/SettingsLayout/SettingsLayout.items.js +1 -1
- package/dist/_internal/components/layout/SettingsLayout/SettingsLayout.js +3 -3
- package/dist/_internal/components/layout/SettingsLayout/SettingsLayout.rail.js +2 -2
- package/dist/_internal/components/layout/index.js +2 -2
- package/dist/_internal/components/navigation/AppHeader/AppHeader.details.js +3 -3
- package/dist/_internal/components/navigation/index.js +3 -3
- package/dist/_internal/social-login-button/social-login-button.js +3 -3
- package/dist/{chunk-WMALDOF5.js → chunk-3QNSTLGC.js} +2 -2
- package/dist/{chunk-KBOTNPYL.js → chunk-6AN23E37.js} +2 -2
- package/dist/{chunk-7JO3ES5P.js → chunk-A4JH5FAL.js} +2 -2
- package/dist/{chunk-IFPTVHYR.js → chunk-CAHWCSRE.js} +8 -4
- package/dist/chunk-CAHWCSRE.js.map +1 -0
- package/dist/{chunk-PCRKQ2M7.js → chunk-EE44OC4M.js} +2 -2
- package/dist/{chunk-TC3EPGGJ.js → chunk-EUDIQQWE.js} +2 -2
- package/dist/{chunk-Y6JDIPV7.js → chunk-FHA4G5XF.js} +2 -2
- package/dist/{chunk-THM3HCMU.js → chunk-G3KSCJS7.js} +3 -3
- package/dist/{chunk-JPNPXNFH.js → chunk-K7BBMXY7.js} +2 -2
- package/dist/{chunk-YANLN6HP.js → chunk-O4PKQ46C.js} +27 -16
- package/dist/chunk-O4PKQ46C.js.map +1 -0
- package/dist/{chunk-LVRH5CGR.js → chunk-PJ7NKK33.js} +3 -3
- package/dist/{chunk-Q2NOONAN.js → chunk-PRVK3U6U.js} +4 -2
- package/dist/{chunk-Q2NOONAN.js.map → chunk-PRVK3U6U.js.map} +1 -1
- package/dist/{chunk-MCZ7536N.js → chunk-Q4CAZ2TP.js} +7 -6
- package/dist/chunk-Q4CAZ2TP.js.map +1 -0
- package/dist/{chunk-5KEMPCW4.js → chunk-RGCRXDGZ.js} +8 -4
- package/dist/{chunk-5KEMPCW4.js.map → chunk-RGCRXDGZ.js.map} +1 -1
- package/dist/{chunk-JSANSHGF.js → chunk-UTSGY3ON.js} +8 -5
- package/dist/chunk-UTSGY3ON.js.map +1 -0
- package/dist/{chunk-R5XB2SCN.js → chunk-X2IJI2BG.js} +2 -2
- package/dist/data-display/DataViews.js +7 -7
- package/dist/feedback/Dialog.js +2 -2
- package/dist/form/UploadButton.js +2 -2
- package/dist/layout/Separator.js +2 -2
- package/dist/layout/SettingsLayout.js +3 -3
- package/dist/navigation/AppHeader.js +3 -3
- package/dist/social-login-button.js +3 -3
- package/dist/types/components/feedback/Dialog/Dialog.d.ts.map +1 -1
- package/dist/types/components/feedback/Dialog/Dialog.styles.d.ts.map +1 -1
- package/dist/types/components/form/UploadButton/UploadButton.parts.d.ts.map +1 -1
- package/dist/types/components/layout/Separator/Separator.d.ts.map +1 -1
- package/dist/types/components/layout/Separator/Separator.styles.d.ts +10 -0
- package/dist/types/components/layout/Separator/Separator.styles.d.ts.map +1 -1
- package/dist/types/components/layout/SettingsLayout/SettingsLayout.items.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/feedback/Dialog/Dialog.styles.ts +7 -3
- package/src/components/feedback/Dialog/Dialog.tsx +40 -14
- package/src/components/form/UploadButton/UploadButton.parts.tsx +15 -4
- package/src/components/layout/Separator/Separator.styles.ts +20 -5
- package/src/components/layout/Separator/Separator.tsx +7 -4
- package/src/components/layout/SettingsLayout/SettingsLayout.items.tsx +3 -1
- package/dist/chunk-IFPTVHYR.js.map +0 -1
- package/dist/chunk-JSANSHGF.js.map +0 -1
- package/dist/chunk-MCZ7536N.js.map +0 -1
- package/dist/chunk-YANLN6HP.js.map +0 -1
- /package/dist/{chunk-WMALDOF5.js.map → chunk-3QNSTLGC.js.map} +0 -0
- /package/dist/{chunk-KBOTNPYL.js.map → chunk-6AN23E37.js.map} +0 -0
- /package/dist/{chunk-7JO3ES5P.js.map → chunk-A4JH5FAL.js.map} +0 -0
- /package/dist/{chunk-PCRKQ2M7.js.map → chunk-EE44OC4M.js.map} +0 -0
- /package/dist/{chunk-TC3EPGGJ.js.map → chunk-EUDIQQWE.js.map} +0 -0
- /package/dist/{chunk-Y6JDIPV7.js.map → chunk-FHA4G5XF.js.map} +0 -0
- /package/dist/{chunk-THM3HCMU.js.map → chunk-G3KSCJS7.js.map} +0 -0
- /package/dist/{chunk-JPNPXNFH.js.map → chunk-K7BBMXY7.js.map} +0 -0
- /package/dist/{chunk-LVRH5CGR.js.map → chunk-PJ7NKK33.js.map} +0 -0
- /package/dist/{chunk-R5XB2SCN.js.map → chunk-X2IJI2BG.js.map} +0 -0
|
@@ -165,13 +165,17 @@ export function variantStylesOf(theme: Theme, opts: VariantStyleOptions): SxProp
|
|
|
165
165
|
case 'drawer': {
|
|
166
166
|
const radius = borderRadiusOf(theme, opts.borderRadius);
|
|
167
167
|
return {
|
|
168
|
-
|
|
168
|
+
// `radius` is already a length (`theme.spacing(n)` → '16px', or 0): gluing
|
|
169
|
+
// another `px` on wrote '16pxpx', which the browser dropped, leaving the
|
|
170
|
+
// panel's leading corners square.
|
|
171
|
+
borderRadius: `${radius} 0 0 ${radius}`,
|
|
169
172
|
margin: 0,
|
|
170
173
|
width: maxWidthOf(opts.size),
|
|
174
|
+
// Never wider than the screen: a 600px panel on a 375px phone put its
|
|
175
|
+
// title and the start of every line off the left edge.
|
|
176
|
+
maxWidth: '100%',
|
|
171
177
|
...dynamicViewportHeight('height'),
|
|
172
178
|
maxHeight: 'none',
|
|
173
|
-
position: 'absolute' as const,
|
|
174
|
-
right: 0,
|
|
175
179
|
...decorations,
|
|
176
180
|
};
|
|
177
181
|
}
|
|
@@ -5,10 +5,10 @@ import MuiDialog from '@mui/material/Dialog/index.js';
|
|
|
5
5
|
import MuiDialogActions from '@mui/material/DialogActions/index.js';
|
|
6
6
|
import MuiDialogContent from '@mui/material/DialogContent/index.js';
|
|
7
7
|
import MuiDialogTitle from '@mui/material/DialogTitle/index.js';
|
|
8
|
-
import Drawer from '@mui/material/Drawer/index.js';
|
|
8
|
+
import Drawer, { type DrawerProps } from '@mui/material/Drawer/index.js';
|
|
9
9
|
import IconButton from '@mui/material/IconButton/index.js';
|
|
10
10
|
import Typography from '@mui/material/Typography/index.js';
|
|
11
|
-
import { useTheme } from '@mui/material/styles/index.js';
|
|
11
|
+
import { useTheme, type SxProps, type Theme } from '@mui/material/styles/index.js';
|
|
12
12
|
import React from 'react';
|
|
13
13
|
|
|
14
14
|
import { hasSpacingSlot, withDialogDefaults } from './Dialog.helpers';
|
|
@@ -74,6 +74,40 @@ function bodyOf(children: React.ReactNode, hasTitle: boolean): React.ReactNode {
|
|
|
74
74
|
return <Box sx={{ ...BODY_SX, pt }}>{children}</Box>;
|
|
75
75
|
}
|
|
76
76
|
|
|
77
|
+
/** Our look first, then whatever `sx` the caller adds — so the caller's escape hatch still wins. */
|
|
78
|
+
function withCallerSx(own: SxProps<Theme>, caller: SxProps<Theme> | undefined): SxProps<Theme> {
|
|
79
|
+
return [own, ...(Array.isArray(caller) ? caller : caller === undefined ? [] : [caller])] as SxProps<Theme>;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
/**
|
|
83
|
+
* The drawer variant: MUI's `Drawer`, with the variant's look on the Drawer's
|
|
84
|
+
* OWN paper — on an inner Box it left the paper 0px wide and clipped the panel —
|
|
85
|
+
* and a caller's paper props merged over it rather than replacing it.
|
|
86
|
+
*/
|
|
87
|
+
function DrawerDialog({
|
|
88
|
+
paperSx,
|
|
89
|
+
testId,
|
|
90
|
+
drawerProps,
|
|
91
|
+
children,
|
|
92
|
+
}: {
|
|
93
|
+
paperSx: SxProps<Theme>;
|
|
94
|
+
testId: string | undefined;
|
|
95
|
+
drawerProps: DrawerProps;
|
|
96
|
+
children: React.ReactNode;
|
|
97
|
+
}) {
|
|
98
|
+
const { PaperProps: callerPaper, ...rest } = drawerProps;
|
|
99
|
+
return (
|
|
100
|
+
<Drawer
|
|
101
|
+
anchor="right"
|
|
102
|
+
data-testid={testId}
|
|
103
|
+
{...rest}
|
|
104
|
+
PaperProps={{ ...callerPaper, sx: withCallerSx(paperSx, callerPaper?.sx) }}
|
|
105
|
+
>
|
|
106
|
+
{children}
|
|
107
|
+
</Drawer>
|
|
108
|
+
);
|
|
109
|
+
}
|
|
110
|
+
|
|
77
111
|
export const Dialog: React.FC<DialogProps> = (rawProps) => {
|
|
78
112
|
const {
|
|
79
113
|
children,
|
|
@@ -124,18 +158,10 @@ export const Dialog: React.FC<DialogProps> = (rawProps) => {
|
|
|
124
158
|
|
|
125
159
|
if (variant === 'drawer') {
|
|
126
160
|
return (
|
|
127
|
-
<
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
data-testid={testId}
|
|
132
|
-
{...props}
|
|
133
|
-
>
|
|
134
|
-
<Box sx={{ ...paperSx, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
|
|
135
|
-
{header}
|
|
136
|
-
{body}
|
|
137
|
-
</Box>
|
|
138
|
-
</Drawer>
|
|
161
|
+
<DrawerDialog paperSx={paperSx} testId={testId} drawerProps={{ ...props, open, onClose }}>
|
|
162
|
+
{header}
|
|
163
|
+
{body}
|
|
164
|
+
</DrawerDialog>
|
|
139
165
|
);
|
|
140
166
|
}
|
|
141
167
|
|
|
@@ -4,10 +4,21 @@ import Box from '@mui/material/Box/index.js';
|
|
|
4
4
|
import Button from '@mui/material/Button/index.js';
|
|
5
5
|
import LinearProgress from '@mui/material/LinearProgress/index.js';
|
|
6
6
|
import Typography from '@mui/material/Typography/index.js';
|
|
7
|
-
import { useTheme } from '@mui/material/styles/index.js';
|
|
7
|
+
import { alpha, useTheme } from '@mui/material/styles/index.js';
|
|
8
8
|
import type React from 'react';
|
|
9
9
|
|
|
10
10
|
import type { DragHandlers } from './UploadButton.hooks';
|
|
11
|
+
|
|
12
|
+
/*
|
|
13
|
+
* The tints the dropzone and the ghost button have always drawn — 0x0A, 0x05
|
|
14
|
+
* and 0x08 out of 0xFF — as `alpha()` opacities. They were hex-alpha suffixes
|
|
15
|
+
* glued onto `palette.primary.main`, which only works while the palette colour
|
|
16
|
+
* is a six-digit hex: an `rgb(…)` primary produced an invalid colour and no
|
|
17
|
+
* tint at all.
|
|
18
|
+
*/
|
|
19
|
+
const DRAG_OVER_TINT = 0x0a / 0xff;
|
|
20
|
+
const HOVER_TINT = 0x05 / 0xff;
|
|
21
|
+
const GHOST_HOVER_TINT = 0x08 / 0xff;
|
|
11
22
|
import type { UploadButtonCopy } from '../../../copy';
|
|
12
23
|
import type { UploadButtonProps } from './UploadButton.types';
|
|
13
24
|
|
|
@@ -48,12 +59,12 @@ export function UploadDropzone({
|
|
|
48
59
|
padding: 3,
|
|
49
60
|
textAlign: 'center',
|
|
50
61
|
cursor: disabled ? 'not-allowed' : 'pointer',
|
|
51
|
-
backgroundColor: isDragOver ?
|
|
62
|
+
backgroundColor: isDragOver ? alpha(theme.palette.primary.main, DRAG_OVER_TINT) : 'transparent',
|
|
52
63
|
transition: 'all 0.2s ease-in-out',
|
|
53
64
|
...(!disabled && {
|
|
54
65
|
'&:hover': {
|
|
55
66
|
borderColor: theme.palette.primary.main,
|
|
56
|
-
backgroundColor:
|
|
67
|
+
backgroundColor: alpha(theme.palette.primary.main, HOVER_TINT),
|
|
57
68
|
},
|
|
58
69
|
}),
|
|
59
70
|
opacity: disabled ? 0.6 : 1,
|
|
@@ -114,7 +125,7 @@ export function UploadTrigger({
|
|
|
114
125
|
aria-describedby={describedBy}
|
|
115
126
|
sx={{
|
|
116
127
|
...(variant === 'ghost' && {
|
|
117
|
-
'&:hover': { backgroundColor:
|
|
128
|
+
'&:hover': { backgroundColor: alpha(theme.palette.primary.main, GHOST_HOVER_TINT) },
|
|
118
129
|
}),
|
|
119
130
|
}}
|
|
120
131
|
>
|
|
@@ -92,6 +92,25 @@ type SeparatorStyleArgs = Required<
|
|
|
92
92
|
> &
|
|
93
93
|
Pick<SeparatorProps, 'color' | 'margin' | 'length'>;
|
|
94
94
|
|
|
95
|
+
/**
|
|
96
|
+
* The separator's margin, on the axis it separates along only: above and below
|
|
97
|
+
* a horizontal rule, either side of a vertical one. A margin given as a string
|
|
98
|
+
* carries its own units; a number is pixels.
|
|
99
|
+
*
|
|
100
|
+
* The LABELLED separator uses this too. It used to hand the number straight to
|
|
101
|
+
* `sx.margin`, where a number is SPACING UNITS — `md`'s 16 drew 128px on all
|
|
102
|
+
* four sides, against 16px above and below for the unlabelled one.
|
|
103
|
+
*/
|
|
104
|
+
export const separatorBlockMargin = (
|
|
105
|
+
size: SeparatorSize,
|
|
106
|
+
margin: number | string | undefined,
|
|
107
|
+
isHorizontal: boolean,
|
|
108
|
+
): string => {
|
|
109
|
+
const value = separatorMargin(size, margin);
|
|
110
|
+
const length = typeof value === 'string' ? value : `${value}px`;
|
|
111
|
+
return isHorizontal ? `${length} 0` : `0 ${length}`;
|
|
112
|
+
};
|
|
113
|
+
|
|
95
114
|
export const separatorStyles = (
|
|
96
115
|
theme: Theme,
|
|
97
116
|
{ variant, orientation, size, color, margin, length }: SeparatorStyleArgs,
|
|
@@ -100,14 +119,10 @@ export const separatorStyles = (
|
|
|
100
119
|
const thickness = separatorThickness(size);
|
|
101
120
|
const resolvedColor = color || theme.palette.divider;
|
|
102
121
|
|
|
103
|
-
// A margin given as a string carries its own units; a number is pixels.
|
|
104
|
-
const marginValue = separatorMargin(size, margin);
|
|
105
|
-
const marginStr = typeof marginValue === 'string' ? marginValue : `${marginValue}px`;
|
|
106
|
-
|
|
107
122
|
const baseStyles: CSSObject = {
|
|
108
123
|
display: 'flex',
|
|
109
124
|
alignItems: 'center',
|
|
110
|
-
margin:
|
|
125
|
+
margin: separatorBlockMargin(size, margin, isHorizontal),
|
|
111
126
|
width: isHorizontal ? length || '100%' : `${thickness}px`,
|
|
112
127
|
height: isHorizontal ? `${thickness}px` : length || '100%',
|
|
113
128
|
boxSizing: 'border-box',
|
|
@@ -3,7 +3,7 @@ import Typography from '@mui/material/Typography/index.js';
|
|
|
3
3
|
import { useTheme } from '@mui/material/styles/index.js';
|
|
4
4
|
import React from 'react';
|
|
5
5
|
|
|
6
|
-
import {
|
|
6
|
+
import { separatorBlockMargin, separatorStyles } from './Separator.styles';
|
|
7
7
|
import type { SeparatorProps } from './Separator.types';
|
|
8
8
|
|
|
9
9
|
export const Separator: React.FC<SeparatorProps> = ({
|
|
@@ -22,6 +22,9 @@ export const Separator: React.FC<SeparatorProps> = ({
|
|
|
22
22
|
|
|
23
23
|
if (children) {
|
|
24
24
|
const isHorizontal = orientation === 'horizontal';
|
|
25
|
+
// The rules either side of the label sit INSIDE the row, which carries the
|
|
26
|
+
// margin; their own would add it a second time.
|
|
27
|
+
const ruleStyles = { ...styles, margin: 0 };
|
|
25
28
|
|
|
26
29
|
return (
|
|
27
30
|
<Box
|
|
@@ -33,12 +36,12 @@ export const Separator: React.FC<SeparatorProps> = ({
|
|
|
33
36
|
sx={{
|
|
34
37
|
display: 'flex',
|
|
35
38
|
alignItems: 'center',
|
|
36
|
-
margin:
|
|
39
|
+
margin: separatorBlockMargin(size, margin, isHorizontal),
|
|
37
40
|
flexDirection: isHorizontal ? 'row' : 'column',
|
|
38
41
|
gap: theme.spacing(2),
|
|
39
42
|
}}
|
|
40
43
|
>
|
|
41
|
-
<Box sx={
|
|
44
|
+
<Box sx={ruleStyles} />
|
|
42
45
|
{/*
|
|
43
46
|
No background behind the label. The two rules and the words are a FLEX
|
|
44
47
|
ROW — the rules stop where the label starts — so there is nothing for a
|
|
@@ -53,7 +56,7 @@ export const Separator: React.FC<SeparatorProps> = ({
|
|
|
53
56
|
>
|
|
54
57
|
{children}
|
|
55
58
|
</Typography>
|
|
56
|
-
<Box sx={
|
|
59
|
+
<Box sx={ruleStyles} />
|
|
57
60
|
</Box>
|
|
58
61
|
);
|
|
59
62
|
}
|
|
@@ -166,7 +166,9 @@ function indexListSx(shape: RailShape) {
|
|
|
166
166
|
return (theme: import('@mui/material').Theme) => ({
|
|
167
167
|
display: 'grid',
|
|
168
168
|
gridTemplateColumns: '1fr',
|
|
169
|
-
|
|
169
|
+
// One spacing unit (8px). This is an `sx` callback, where a bare 8 is
|
|
170
|
+
// EIGHT units — it drew a 64px gutter between the two columns.
|
|
171
|
+
columnGap: 1,
|
|
170
172
|
[theme.breakpoints.up('sm')]: { gridTemplateColumns: '1fr 1fr' },
|
|
171
173
|
[atLeastRail(theme, shape.breakpoint)]: { gridTemplateColumns: '1fr' },
|
|
172
174
|
});
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/layout/Separator/Separator.styles.ts"],"sourcesContent":["import type { CSSObject, Theme } from '@mui/material/styles/index.js';\n\nimport type {\n SeparatorOrientation,\n SeparatorProps,\n SeparatorSize,\n SeparatorVariant,\n} from './Separator.types';\n\nconst THICKNESS_PX: Record<SeparatorSize, number> = {\n xs: 1,\n sm: 2,\n md: 3,\n lg: 4,\n xl: 6,\n};\n\nconst MARGIN_PX: Record<SeparatorSize, number> = {\n xs: 4,\n sm: 8,\n md: 16,\n lg: 24,\n xl: 32,\n};\n\nconst separatorThickness = (size: SeparatorSize): number =>\n THICKNESS_PX[size] ?? THICKNESS_PX.md;\n\n/** An explicit `margin` wins; otherwise the size picks one. */\nexport const separatorMargin = (\n size: SeparatorSize,\n margin?: number | string,\n): number | string => margin ?? MARGIN_PX[size] ?? MARGIN_PX.md;\n\n// `gradient` paints a background rather than a border, so it draws its line as a\n// solid border of zero visual consequence.\nconst borderStyleFor = (variant: SeparatorVariant): 'dashed' | 'dotted' | 'solid' => {\n switch (variant) {\n case 'dashed':\n return 'dashed';\n case 'dotted':\n return 'dotted';\n default:\n return 'solid';\n }\n};\n\nconst gradientBackground = (\n variant: SeparatorVariant,\n orientation: SeparatorOrientation,\n color: string,\n): string | undefined => {\n if (variant !== 'gradient') return undefined;\n const angle = orientation === 'horizontal' ? '90deg' : '180deg';\n return `linear-gradient(${angle}, transparent 0%, ${color} 50%, transparent 100%)`;\n};\n\n// Only the leading edge carries the rule; the other three are zeroed explicitly so\n// a parent's border shorthand cannot leak through.\nconst borderEdges = (\n isHorizontal: boolean,\n thickness: number,\n style: 'dashed' | 'dotted' | 'solid',\n color: string,\n): CSSObject => {\n const leading = isHorizontal ? 'Top' : 'Left';\n const blank: CSSObject = {\n borderTopWidth: 0,\n borderBottomWidth: 0,\n borderLeftWidth: 0,\n borderRightWidth: 0,\n borderTopStyle: 'none',\n borderBottomStyle: 'none',\n borderLeftStyle: 'none',\n borderRightStyle: 'none',\n borderTopColor: 'transparent',\n borderBottomColor: 'transparent',\n borderLeftColor: 'transparent',\n borderRightColor: 'transparent',\n };\n\n return {\n ...blank,\n [`border${leading}Width`]: thickness,\n [`border${leading}Style`]: style,\n [`border${leading}Color`]: color,\n };\n};\n\ntype SeparatorStyleArgs = Required<\n Pick<SeparatorProps, 'variant' | 'orientation' | 'size'>\n> &\n Pick<SeparatorProps, 'color' | 'margin' | 'length'>;\n\nexport const separatorStyles = (\n theme: Theme,\n { variant, orientation, size, color, margin, length }: SeparatorStyleArgs,\n): CSSObject => {\n const isHorizontal = orientation === 'horizontal';\n const thickness = separatorThickness(size);\n const resolvedColor = color || theme.palette.divider;\n\n // A margin given as a string carries its own units; a number is pixels.\n const marginValue = separatorMargin(size, margin);\n const marginStr = typeof marginValue === 'string' ? marginValue : `${marginValue}px`;\n\n const baseStyles: CSSObject = {\n display: 'flex',\n alignItems: 'center',\n margin: isHorizontal ? `${marginStr} 0` : `0 ${marginStr}`,\n width: isHorizontal ? length || '100%' : `${thickness}px`,\n height: isHorizontal ? `${thickness}px` : length || '100%',\n boxSizing: 'border-box',\n };\n\n if (variant === 'gradient') {\n return {\n ...baseStyles,\n background: gradientBackground(variant, orientation, resolvedColor),\n };\n }\n\n return {\n ...baseStyles,\n backgroundColor: 'transparent',\n ...borderEdges(isHorizontal, thickness, borderStyleFor(variant), resolvedColor),\n };\n};\n"],"mappings":";AASA,IAAM,eAA8C;AAAA,EAClD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAM,YAA2C;AAAA,EAC/C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAM,qBAAqB,CAAC,SAC1B,aAAa,IAAI,KAAK,aAAa;AAG9B,IAAM,kBAAkB,CAC7B,MACA,WACoB,UAAU,UAAU,IAAI,KAAK,UAAU;AAI7D,IAAM,iBAAiB,CAAC,YAA6D;AACnF,UAAQ,SAAS;AAAA,IACf,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;AAEA,IAAM,qBAAqB,CACzB,SACA,aACA,UACuB;AACvB,MAAI,YAAY,WAAY,QAAO;AACnC,QAAM,QAAQ,gBAAgB,eAAe,UAAU;AACvD,SAAO,mBAAmB,KAAK,qBAAqB,KAAK;AAC3D;AAIA,IAAM,cAAc,CAClB,cACA,WACA,OACA,UACc;AACd,QAAM,UAAU,eAAe,QAAQ;AACvC,QAAM,QAAmB;AAAA,IACvB,gBAAgB;AAAA,IAChB,mBAAmB;AAAA,IACnB,iBAAiB;AAAA,IACjB,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,IAChB,mBAAmB;AAAA,IACnB,iBAAiB;AAAA,IACjB,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,IAChB,mBAAmB;AAAA,IACnB,iBAAiB;AAAA,IACjB,kBAAkB;AAAA,EACpB;AAEA,SAAO;AAAA,IACL,GAAG;AAAA,IACH,CAAC,SAAS,OAAO,OAAO,GAAG;AAAA,IAC3B,CAAC,SAAS,OAAO,OAAO,GAAG;AAAA,IAC3B,CAAC,SAAS,OAAO,OAAO,GAAG;AAAA,EAC7B;AACF;AAOO,IAAM,kBAAkB,CAC7B,OACA,EAAE,SAAS,aAAa,MAAM,OAAO,QAAQ,OAAO,MACtC;AACd,QAAM,eAAe,gBAAgB;AACrC,QAAM,YAAY,mBAAmB,IAAI;AACzC,QAAM,gBAAgB,SAAS,MAAM,QAAQ;AAG7C,QAAM,cAAc,gBAAgB,MAAM,MAAM;AAChD,QAAM,YAAY,OAAO,gBAAgB,WAAW,cAAc,GAAG,WAAW;AAEhF,QAAM,aAAwB;AAAA,IAC5B,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,QAAQ,eAAe,GAAG,SAAS,OAAO,KAAK,SAAS;AAAA,IACxD,OAAO,eAAe,UAAU,SAAS,GAAG,SAAS;AAAA,IACrD,QAAQ,eAAe,GAAG,SAAS,OAAO,UAAU;AAAA,IACpD,WAAW;AAAA,EACb;AAEA,MAAI,YAAY,YAAY;AAC1B,WAAO;AAAA,MACL,GAAG;AAAA,MACH,YAAY,mBAAmB,SAAS,aAAa,aAAa;AAAA,IACpE;AAAA,EACF;AAEA,SAAO;AAAA,IACL,GAAG;AAAA,IACH,iBAAiB;AAAA,IACjB,GAAG,YAAY,cAAc,WAAW,eAAe,OAAO,GAAG,aAAa;AAAA,EAChF;AACF;","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/form/UploadButton/UploadButton.parts.tsx"],"sourcesContent":["import AttachFileOutlined from '@mui/icons-material/AttachFileOutlined';\nimport CloudUploadOutlined from '@mui/icons-material/CloudUploadOutlined';\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport LinearProgress from '@mui/material/LinearProgress/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport type React from 'react';\n\nimport type { DragHandlers } from './UploadButton.hooks';\nimport type { UploadButtonCopy } from '../../../copy';\nimport type { UploadButtonProps } from './UploadButton.types';\n\n/** Shared shape for the two trigger variants. */\nexport interface TriggerProps {\n copy: UploadButtonCopy;\n label: string;\n icon?: React.ReactNode;\n disabled: boolean;\n className?: string;\n dataTestId?: string;\n describedBy?: string;\n onOpen: () => void;\n}\n\n/** The drag-and-drop surface. */\nexport function UploadDropzone({\n copy,\n label,\n icon,\n disabled,\n className,\n dataTestId,\n describedBy,\n onOpen,\n isDragOver,\n drag,\n}: TriggerProps & { isDragOver: boolean; drag: DragHandlers }): React.ReactElement {\n const theme = useTheme();\n return (\n <Box\n component=\"div\"\n {...drag}\n onClick={onOpen}\n sx={{\n border: `2px dashed ${isDragOver ? theme.palette.primary.main : theme.palette.divider}`,\n borderRadius: 2,\n padding: 3,\n textAlign: 'center',\n cursor: disabled ? 'not-allowed' : 'pointer',\n backgroundColor: isDragOver ? `${theme.palette.primary.main}0A` : 'transparent',\n transition: 'all 0.2s ease-in-out',\n ...(!disabled && {\n '&:hover': {\n borderColor: theme.palette.primary.main,\n backgroundColor: `${theme.palette.primary.main}05`,\n },\n }),\n opacity: disabled ? 0.6 : 1,\n }}\n className={className}\n data-testid={dataTestId}\n role=\"button\"\n tabIndex={disabled ? -1 : 0}\n onKeyDown={(event) => {\n if (event.key !== 'Enter' && event.key !== ' ') return;\n event.preventDefault();\n onOpen();\n }}\n aria-describedby={describedBy}\n aria-label={copy.dropzoneRole(label)}\n >\n <Box sx={{ mb: 2 }}>\n {icon || <CloudUploadOutlined sx={{ fontSize: 48, color: 'text.secondary' }} />}\n </Box>\n <Typography variant=\"body1\" sx={{ mb: 1 }}>\n {label}\n </Typography>\n <Typography variant=\"body2\" color=\"text.secondary\">\n {copy.dropzoneHint}\n </Typography>\n </Box>\n );\n}\n\n/** MUI variant for each non-dropzone appearance. */\nconst MUI_VARIANT = { outline: 'outlined', ghost: 'text' } as const;\n\n/** The plain-button trigger. */\nexport function UploadTrigger({\n copy,\n label,\n icon,\n disabled,\n className,\n dataTestId,\n describedBy,\n onOpen,\n variant,\n isUploading,\n}: TriggerProps & {\n variant: NonNullable<UploadButtonProps['variant']>;\n isUploading: boolean;\n}): React.ReactElement {\n const theme = useTheme();\n return (\n <Button\n variant={MUI_VARIANT[variant as keyof typeof MUI_VARIANT] ?? 'contained'}\n disabled={disabled || isUploading}\n onClick={onOpen}\n startIcon={icon || <AttachFileOutlined />}\n className={className}\n data-testid={dataTestId}\n aria-describedby={describedBy}\n sx={{\n ...(variant === 'ghost' && {\n '&:hover': { backgroundColor: `${theme.palette.primary.main}08` },\n }),\n }}\n >\n {isUploading ? copy.uploading : label}\n </Button>\n );\n}\n\n/** The screen-reader live region — drag, progress and error announcements. */\nfunction UploadAnnouncer({\n copy,\n announceDragOver,\n isUploading,\n progress,\n error,\n}: {\n copy: UploadButtonCopy;\n announceDragOver: boolean;\n isUploading: boolean;\n progress: number;\n error: string | null;\n}): React.ReactElement {\n return (\n <div\n aria-live=\"polite\"\n aria-atomic=\"true\"\n className=\"sr-only\"\n style={{\n position: 'absolute',\n left: '-10000px',\n width: '1px',\n height: '1px',\n overflow: 'hidden',\n }}\n >\n {announceDragOver && copy.dropReady}\n {isUploading && copy.uploadInProgress(Math.round(progress))}\n {error && copy.errorAnnouncement(error)}\n </div>\n );\n}\n\n/** Progress bar, helper text, error text and the live region. */\nexport function UploadFeedback({\n copy,\n isUploading,\n progress,\n helperText,\n helperId,\n error,\n errorId,\n announceDragOver,\n}: {\n copy: UploadButtonCopy;\n isUploading: boolean;\n progress: number;\n helperText?: string;\n helperId?: string;\n error: string | null;\n errorId?: string;\n announceDragOver: boolean;\n}): React.ReactElement {\n return (\n <>\n {isUploading && progress > 0 && (\n <Box sx={{ mt: 1 }}>\n <LinearProgress variant=\"determinate\" value={progress} sx={{ borderRadius: 1 }} />\n <Typography variant=\"caption\" sx={{ mt: 0.5, display: 'block' }}>\n {copy.percentUploaded(Math.round(progress))}\n </Typography>\n </Box>\n )}\n\n {helperText && !error && (\n <Typography\n id={helperId}\n variant=\"caption\"\n color=\"text.secondary\"\n sx={{ display: 'block', mt: 0.5 }}\n >\n {helperText}\n </Typography>\n )}\n\n {error && (\n <Typography\n id={errorId}\n variant=\"caption\"\n color=\"error\"\n sx={{ display: 'block', mt: 0.5 }}\n role=\"alert\"\n >\n {error}\n </Typography>\n )}\n\n <UploadAnnouncer\n copy={copy}\n announceDragOver={announceDragOver}\n isUploading={isUploading}\n progress={progress}\n error={error}\n />\n </>\n );\n}\n"],"mappings":"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","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/layout/Separator/Separator.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { separatorMargin, separatorStyles } from './Separator.styles';\nimport type { SeparatorProps } from './Separator.types';\n\nexport const Separator: React.FC<SeparatorProps> = ({\n variant = 'solid',\n orientation = 'horizontal',\n size = 'md',\n color,\n margin,\n length,\n children,\n className,\n 'data-testid': dataTestId,\n}) => {\n const theme = useTheme();\n const styles = separatorStyles(theme, { variant, orientation, size, color, margin, length });\n\n if (children) {\n const isHorizontal = orientation === 'horizontal';\n\n return (\n <Box\n className={className}\n // The plain branch below has always carried the caller's hook; this one\n // silently dropped it, so a LABELLED separator was the one variant no\n // test could address except through its own words.\n data-testid={dataTestId}\n sx={{\n display: 'flex',\n alignItems: 'center',\n margin: separatorMargin(size, margin),\n flexDirection: isHorizontal ? 'row' : 'column',\n gap: theme.spacing(2),\n }}\n >\n <Box sx={styles} />\n {/*\n No background behind the label. The two rules and the words are a FLEX\n ROW — the rules stop where the label starts — so there is nothing for a\n background to mask, and painting one made the label a coloured pill on\n every surface that is not `background.default`. On a white card it read\n as a highlight nobody had asked for.\n */}\n <Typography\n variant=\"body2\"\n color=\"text.secondary\"\n sx={{ flexShrink: 0, padding: theme.spacing(0, 1) }}\n >\n {children}\n </Typography>\n <Box sx={styles} />\n </Box>\n );\n }\n\n return (\n <Box\n className={className}\n sx={styles}\n role=\"separator\"\n aria-orientation={orientation}\n data-testid={dataTestId}\n />\n );\n};\n"],"mappings":";;;;;;AAAA,OAAO,SAAS;AAChB,OAAO,gBAAgB;AACvB,SAAS,gBAAgB;AAwBnB,SAcE,KAdF;AAlBC,IAAM,YAAsC,CAAC;AAAA,EAClD,UAAU;AAAA,EACV,cAAc;AAAA,EACd,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AACjB,MAAM;AACJ,QAAM,QAAQ,SAAS;AACvB,QAAM,SAAS,gBAAgB,OAAO,EAAE,SAAS,aAAa,MAAM,OAAO,QAAQ,OAAO,CAAC;AAE3F,MAAI,UAAU;AACZ,UAAM,eAAe,gBAAgB;AAErC,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QAIA,eAAa;AAAA,QACb,IAAI;AAAA,UACF,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,QAAQ,gBAAgB,MAAM,MAAM;AAAA,UACpC,eAAe,eAAe,QAAQ;AAAA,UACtC,KAAK,MAAM,QAAQ,CAAC;AAAA,QACtB;AAAA,QAEA;AAAA,8BAAC,OAAI,IAAI,QAAQ;AAAA,UAQjB;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,OAAM;AAAA,cACN,IAAI,EAAE,YAAY,GAAG,SAAS,MAAM,QAAQ,GAAG,CAAC,EAAE;AAAA,cAEjD;AAAA;AAAA,UACH;AAAA,UACA,oBAAC,OAAI,IAAI,QAAQ;AAAA;AAAA;AAAA,IACnB;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,IAAI;AAAA,MACJ,MAAK;AAAA,MACL,oBAAkB;AAAA,MAClB,eAAa;AAAA;AAAA,EACf;AAEJ;","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/feedback/Dialog/Dialog.tsx"],"sourcesContent":["import CloseIcon from '@mui/icons-material/Close';\nimport Backdrop from '@mui/material/Backdrop/index.js';\nimport Box from '@mui/material/Box/index.js';\nimport MuiDialog from '@mui/material/Dialog/index.js';\nimport MuiDialogActions from '@mui/material/DialogActions/index.js';\nimport MuiDialogContent from '@mui/material/DialogContent/index.js';\nimport MuiDialogTitle from '@mui/material/DialogTitle/index.js';\nimport Drawer from '@mui/material/Drawer/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { hasSpacingSlot, withDialogDefaults } from './Dialog.helpers';\nimport {\n DIALOG_ACTIONS,\n DIALOG_BODY_PADDING_UNITS,\n DIALOG_CONTENT_PADDING_UNITS,\n DIALOG_HEADER_CHILDREN_PADDING_UNITS,\n DIALOG_TITLE,\n DIALOG_TITLED_BODY_PADDING_TOP_UNITS,\n} from './Dialog.metrics';\nimport { backdropSxOf, variantStylesOf } from './Dialog.styles';\nimport { childTestId, resolveTestId, slotTestId, withoutTestIdProps } from '../../../platform/test-id';\nimport type {\n DialogActionsProps,\n DialogContentProps,\n DialogHeaderProps,\n DialogProps,\n} from './Dialog.types';\n\n/**\n * The padding a dialog gives children that are not managing their own — and the\n * rule that takes it back when it turns out they are.\n *\n * `:has()` is doing what {@link hasSpacingSlot} cannot. A slot passed through a\n * COMPONENT (`<Body />` rendering a `DialogContent`) is invisible to any check\n * on element type: React does not know what a component renders until it has\n * rendered it, and by then the wrapper is already in the tree. The selector\n * asks the question one step later, of the DOM, where the answer exists.\n *\n * `display: contents` rather than `padding: 0`, because the padding is only\n * half of what a wrapper does. The other half is standing between the paper and\n * its children: MUI's `scroll=\"paper\"` makes the paper a flex column with\n * `overflow-y: auto`, so a `DialogContent` that is no longer its direct child\n * cannot be the thing that scrolls — the whole dialog scrolls instead and\n * carries the `DialogActions` off the bottom with it. An element with\n * `display: contents` generates no box at all: its children become the paper's\n * flex items, and its padding is never applied. Both halves, one declaration.\n *\n * A browser without `:has()` falls back to the padded box — the layout this\n * had before, not a broken one.\n */\nconst BODY_SX = {\n px: DIALOG_BODY_PADDING_UNITS.horizontal,\n pb: DIALOG_BODY_PADDING_UNITS.bottom,\n '&:has(> .MuiDialogContent-root), &:has(> .MuiDialogActions-root)': {\n display: 'contents',\n },\n} as const;\n\n/**\n * The dialog body. Consumers that pass raw children (no <DialogContent>) used\n * to render them flush against the paper edges — give them comfortable default\n * padding; <DialogContent>/<DialogActions> users keep managing their own\n * spacing.\n */\nfunction bodyOf(children: React.ReactNode, hasTitle: boolean): React.ReactNode {\n // Read lazily: both slots are declared below this function.\n if (hasSpacingSlot(children, [DialogContent, DialogActions])) return children;\n const pt = hasTitle\n ? DIALOG_BODY_PADDING_UNITS.topUnderTitle\n : DIALOG_BODY_PADDING_UNITS.top;\n return <Box sx={{ ...BODY_SX, pt }}>{children}</Box>;\n}\n\nexport const Dialog: React.FC<DialogProps> = (rawProps) => {\n const {\n children,\n variant,\n size,\n title,\n description,\n showCloseButton,\n backdrop,\n persistent,\n glass,\n gradient,\n glow,\n pulse,\n borderRadius,\n onClose,\n open,\n ...others\n } = withDialogDefaults(rawProps);\n const theme = useTheme();\n // Every spelling of the test id the shared contract allows, mapped to the one\n // the DOM reads, and stripped from what is spread — `testID` is React\n // Native's name for it and is not a DOM attribute. The native `Dialog` does\n // the same in reverse.\n const testId = resolveTestId(others, 'dialog');\n const props = withoutTestIdProps(others);\n const paperSx = variantStylesOf(theme, {\n variant, size, borderRadius, glass, gradient, glow, pulse,\n });\n\n const handleClose = (event: object, reason: 'backdropClick' | 'escapeKeyDown') => {\n if (persistent && (reason === 'backdropClick' || reason === 'escapeKeyDown')) {\n return;\n }\n onClose?.();\n };\n\n const header = title ? (\n <DialogHeader\n title={title}\n subtitle={description}\n showCloseButton={showCloseButton}\n onClose={onClose}\n dataTestId={testId}\n />\n ) : null;\n const body = bodyOf(children, Boolean(title));\n\n if (variant === 'drawer') {\n return (\n <Drawer\n anchor=\"right\"\n open={open}\n onClose={onClose}\n data-testid={testId}\n {...props}\n >\n <Box sx={{ ...paperSx, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>\n {header}\n {body}\n </Box>\n </Drawer>\n );\n }\n\n return (\n <MuiDialog\n open={open}\n onClose={handleClose}\n fullScreen={variant === 'fullscreen'}\n BackdropComponent={backdrop ? Backdrop : undefined}\n BackdropProps={{ sx: backdropSxOf(theme, glass) }}\n PaperProps={{ sx: paperSx, 'data-testid': testId }}\n {...props}\n >\n {header}\n {body}\n </MuiDialog>\n );\n};\n\nexport const DialogHeader: React.FC<DialogHeaderProps> = ({\n children,\n title,\n subtitle,\n showCloseButton = true,\n onClose,\n ...others\n}) => {\n const props = withoutTestIdProps(others);\n\n if (children) {\n return (\n <Box\n data-testid={slotTestId(others, 'header', 'dialog')}\n sx={{\n p: DIALOG_HEADER_CHILDREN_PADDING_UNITS,\n borderBottom: '1px solid',\n borderColor: 'divider',\n }}\n >\n {children}\n </Box>\n );\n }\n\n return (\n <MuiDialogTitle\n data-testid={slotTestId(others, 'title', 'dialog')}\n sx={{\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n pb: subtitle\n ? DIALOG_TITLE.paddingBottomUnits.withSubtitle\n : DIALOG_TITLE.paddingBottomUnits.plain,\n }}\n {...props}\n >\n <Box>\n <Typography variant=\"h6\" component=\"div\">\n {title}\n </Typography>\n {subtitle && (\n <Typography\n variant=\"body2\"\n color=\"text.secondary\"\n sx={{ mt: DIALOG_TITLE.subtitleGapUnits }}\n >\n {subtitle}\n </Typography>\n )}\n </Box>\n {showCloseButton && onClose && (\n <IconButton\n aria-label=\"close\"\n onClick={onClose}\n data-testid={childTestId(others, 'close', 'dialog')}\n sx={{\n color: 'text.secondary',\n '&:hover': {\n backgroundColor: 'action.hover',\n },\n }}\n >\n <CloseIcon />\n </IconButton>\n )}\n </MuiDialogTitle>\n );\n};\n\n/**\n * Top padding for a body that sits directly under the title.\n *\n * MUI zeroes it there (`.MuiDialogTitle-root + &` on a non-`dividers` content),\n * assuming the title's own bottom padding is the whole gap. That assumption\n * breaks for a body opening with an outlined field: a filled field floats its\n * label ABOVE the input's border box, and `DialogContent` is `overflow-y: auto`\n * — a clipping box — so the label gets sliced in half (FUT-544: \"Tipo\" in the\n * \"Novo insumo\" dialog).\n *\n * Reserve the overhang rather than restore the full 24px: the title already\n * contributes its bottom padding, so a shrunk label's `translate(…, -9px)` is\n * all that is missing. 12px clears it and leaves the gap visually tight.\n */\nconst TITLED_BODY_PADDING_TOP = DIALOG_TITLED_BODY_PADDING_TOP_UNITS;\n\n/**\n * `.MuiDialogTitle-root + &` is `(0,2,0)`-specific and a plain `sx` entry is\n * `(0,1,0)`, so the padding above only survives the cascade by naming the class\n * again — `(0,3,0)`. Scoped to the title-following case so an untitled dialog\n * keeps MUI's roomier default.\n */\nconst TITLED_BODY_SELECTOR = '.MuiDialogTitle-root + &.MuiDialogContent-root';\n\nexport const DialogContent: React.FC<DialogContentProps> = ({\n children,\n dividers = false,\n dense = false,\n ...others\n}) => (\n <MuiDialogContent\n data-testid={slotTestId(others, 'content', 'dialog')}\n dividers={dividers}\n sx={{\n padding: dense ? DIALOG_CONTENT_PADDING_UNITS.dense : DIALOG_CONTENT_PADDING_UNITS.normal,\n [TITLED_BODY_SELECTOR]: { paddingTop: TITLED_BODY_PADDING_TOP },\n '&.MuiDialogContent-dividers': {\n borderTop: dividers ? '1px solid' : 'none',\n borderBottom: dividers ? '1px solid' : 'none',\n borderColor: 'divider',\n },\n }}\n {...withoutTestIdProps(others)}\n >\n {children}\n </MuiDialogContent>\n );\n\nexport const DialogActions: React.FC<DialogActionsProps> = ({\n children,\n alignment = 'right',\n spacing = DIALOG_ACTIONS.defaultSpacingUnits,\n ...others\n}) => {\n const getJustifyContent = () => {\n switch (alignment) {\n case 'left': return 'flex-start';\n case 'center': return 'center';\n case 'right': return 'flex-end';\n case 'space-between': return 'space-between';\n default: return 'flex-end';\n }\n };\n\n return (\n <MuiDialogActions\n data-testid={slotTestId(others, 'actions', 'dialog')}\n sx={{\n justifyContent: getJustifyContent(),\n gap: spacing,\n p: DIALOG_ACTIONS.paddingUnits,\n }}\n {...withoutTestIdProps(others)}\n >\n {children}\n </MuiDialogActions>\n );\n};"],"mappings":"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","names":[]}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|