@astral/ui 4.64.1 → 4.64.2
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.
|
@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { StyledTypography } from './styles';
|
|
3
3
|
export const Description = ({ children, className }) => {
|
|
4
4
|
if (typeof children === 'string') {
|
|
5
|
-
return (_jsx(StyledTypography, { variant: "caption", className: className, children: children }));
|
|
5
|
+
return (_jsx(StyledTypography, { variant: "caption", color: "grey", colorIntensity: "700", className: className, children: children }));
|
|
6
6
|
}
|
|
7
|
-
return (_jsx(StyledTypography, { component: "div", className: className, children: children }));
|
|
7
|
+
return (_jsx(StyledTypography, { component: "div", color: "grey", colorIntensity: "700", className: className, children: children }));
|
|
8
8
|
};
|
|
@@ -62,6 +62,9 @@ export const Wrapper = styled.div `
|
|
|
62
62
|
}
|
|
63
63
|
|
|
64
64
|
&.${stepClassnames.orientationVertical} {
|
|
65
|
+
& .${stepClassnames.labelContainer} {
|
|
66
|
+
color: ${({ theme }) => theme.palette.grey[900]};
|
|
67
|
+
}
|
|
65
68
|
|
|
66
69
|
& .${stepClassnames.label} {
|
|
67
70
|
font-size: ${({ theme }) => theme.typography.body1.fontSize};
|
|
@@ -137,6 +140,14 @@ export const Wrapper = styled.div `
|
|
|
137
140
|
}
|
|
138
141
|
}
|
|
139
142
|
}
|
|
143
|
+
|
|
144
|
+
${({ theme }) => theme.breakpoints.down('sm')} {
|
|
145
|
+
&.${stepClassnames.connectorArrow} {
|
|
146
|
+
& .${stepClassnames.content} {
|
|
147
|
+
padding: ${({ theme }) => theme.spacing(2, 0)};
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
}
|
|
140
151
|
`;
|
|
141
152
|
export const IconWrapper = styled.div `
|
|
142
153
|
display: flex;
|
|
@@ -217,7 +228,7 @@ export const LabelWrapper = styled.div `
|
|
|
217
228
|
gap: ${({ theme }) => theme.spacing(1)};
|
|
218
229
|
align-items: center;
|
|
219
230
|
|
|
220
|
-
color: ${({ theme }) => theme.palette.grey[
|
|
231
|
+
color: ${({ theme }) => theme.palette.grey[700]};
|
|
221
232
|
|
|
222
233
|
& .${typographyClassnames.root} {
|
|
223
234
|
transition: ${({ theme }) => theme.transitions.create(['color'], {
|
|
@@ -256,6 +267,8 @@ export const StyledButton = styled(Button) `
|
|
|
256
267
|
|
|
257
268
|
${({ theme }) => theme.breakpoints.down('sm')} {
|
|
258
269
|
gap: ${({ theme }) => theme.microSpacing(1)};
|
|
270
|
+
|
|
271
|
+
height: auto;
|
|
259
272
|
}
|
|
260
273
|
|
|
261
274
|
&:hover {
|
|
@@ -5,8 +5,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
5
5
|
const styles_1 = require("./styles");
|
|
6
6
|
const Description = ({ children, className }) => {
|
|
7
7
|
if (typeof children === 'string') {
|
|
8
|
-
return ((0, jsx_runtime_1.jsx)(styles_1.StyledTypography, { variant: "caption", className: className, children: children }));
|
|
8
|
+
return ((0, jsx_runtime_1.jsx)(styles_1.StyledTypography, { variant: "caption", color: "grey", colorIntensity: "700", className: className, children: children }));
|
|
9
9
|
}
|
|
10
|
-
return ((0, jsx_runtime_1.jsx)(styles_1.StyledTypography, { component: "div", className: className, children: children }));
|
|
10
|
+
return ((0, jsx_runtime_1.jsx)(styles_1.StyledTypography, { component: "div", color: "grey", colorIntensity: "700", className: className, children: children }));
|
|
11
11
|
};
|
|
12
12
|
exports.Description = Description;
|
|
@@ -65,6 +65,9 @@ exports.Wrapper = styled_1.styled.div `
|
|
|
65
65
|
}
|
|
66
66
|
|
|
67
67
|
&.${constants_4.stepClassnames.orientationVertical} {
|
|
68
|
+
& .${constants_4.stepClassnames.labelContainer} {
|
|
69
|
+
color: ${({ theme }) => theme.palette.grey[900]};
|
|
70
|
+
}
|
|
68
71
|
|
|
69
72
|
& .${constants_4.stepClassnames.label} {
|
|
70
73
|
font-size: ${({ theme }) => theme.typography.body1.fontSize};
|
|
@@ -140,6 +143,14 @@ exports.Wrapper = styled_1.styled.div `
|
|
|
140
143
|
}
|
|
141
144
|
}
|
|
142
145
|
}
|
|
146
|
+
|
|
147
|
+
${({ theme }) => theme.breakpoints.down('sm')} {
|
|
148
|
+
&.${constants_4.stepClassnames.connectorArrow} {
|
|
149
|
+
& .${constants_4.stepClassnames.content} {
|
|
150
|
+
padding: ${({ theme }) => theme.spacing(2, 0)};
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
}
|
|
143
154
|
`;
|
|
144
155
|
exports.IconWrapper = styled_1.styled.div `
|
|
145
156
|
display: flex;
|
|
@@ -220,7 +231,7 @@ exports.LabelWrapper = styled_1.styled.div `
|
|
|
220
231
|
gap: ${({ theme }) => theme.spacing(1)};
|
|
221
232
|
align-items: center;
|
|
222
233
|
|
|
223
|
-
color: ${({ theme }) => theme.palette.grey[
|
|
234
|
+
color: ${({ theme }) => theme.palette.grey[700]};
|
|
224
235
|
|
|
225
236
|
& .${constants_1.typographyClassnames.root} {
|
|
226
237
|
transition: ${({ theme }) => theme.transitions.create(['color'], {
|
|
@@ -259,6 +270,8 @@ exports.StyledButton = (0, styled_1.styled)(Button_1.Button) `
|
|
|
259
270
|
|
|
260
271
|
${({ theme }) => theme.breakpoints.down('sm')} {
|
|
261
272
|
gap: ${({ theme }) => theme.microSpacing(1)};
|
|
273
|
+
|
|
274
|
+
height: auto;
|
|
262
275
|
}
|
|
263
276
|
|
|
264
277
|
&:hover {
|