@rango-dev/ui 0.28.2-next.4 → 0.28.2-next.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +2 -2
- package/dist/index.js.map +3 -3
- package/dist/widget/ui/src/components/Alert/Alert.helpers.d.ts +3 -2
- package/dist/widget/ui/src/components/Alert/Alert.helpers.d.ts.map +1 -1
- package/dist/widget/ui/src/components/Alert/Alert.styles.d.ts +5 -5
- package/dist/widget/ui/src/components/Alert/Alert.styles.d.ts.map +1 -1
- package/dist/widget/ui/src/components/Alert/Alert.types.d.ts +3 -2
- package/dist/widget/ui/src/components/Alert/Alert.types.d.ts.map +1 -1
- package/dist/widget/ui/src/components/TextField/TextField.d.ts +1 -1
- package/dist/widget/ui/src/components/TextField/TextField.stories.d.ts +1 -1
- package/dist/widget/ui/src/containers/SwapInput/SwapInput.styles.d.ts +1 -1
- package/dist/widget/ui/src/theme.d.ts +15 -13
- package/dist/widget/ui/src/theme.d.ts.map +1 -1
- package/package.json +2 -2
- package/src/components/Alert/Alert.helpers.ts +13 -2
- package/src/components/Alert/Alert.styles.ts +7 -7
- package/src/components/Alert/Alert.tsx +6 -6
- package/src/components/Alert/Alert.types.ts +3 -2
- package/src/theme.ts +3 -1
|
@@ -1,3 +1,4 @@
|
|
|
1
|
-
import type { Type } from './Alert.types';
|
|
2
|
-
export declare const getColor: (type: Type, variant: '
|
|
1
|
+
import type { PropTypes, Type } from './Alert.types';
|
|
2
|
+
export declare const getColor: (type: Type, variant: PropTypes['variant']) => string | undefined;
|
|
3
|
+
export declare const mapVariantToSize: (variant: PropTypes['variant']) => "small" | "xsmall";
|
|
3
4
|
//# sourceMappingURL=Alert.helpers.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alert.helpers.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Alert/Alert.helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"Alert.helpers.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Alert/Alert.helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAErD,eAAO,MAAM,QAAQ,SAAU,IAAI,WAAW,SAAS,CAAC,SAAS,CAAC,uBAcjE,CAAC;AAEF,eAAO,MAAM,gBAAgB,YAAa,SAAS,CAAC,SAAS,CAAC,uBAS7D,CAAC"}
|
|
@@ -325,10 +325,7 @@ export declare const Main: import("@stitches/react/types/styled-component").Styl
|
|
|
325
325
|
zIndices: {};
|
|
326
326
|
transitions: {};
|
|
327
327
|
}, import("@stitches/react/types/config").DefaultThemeMap, {}>>;
|
|
328
|
-
export declare const
|
|
329
|
-
type?: "info" | "success" | "warning" | "error" | "loading" | undefined;
|
|
330
|
-
align?: "center" | undefined;
|
|
331
|
-
}, {
|
|
328
|
+
export declare const TitleContainer: import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
|
|
332
329
|
xs: string;
|
|
333
330
|
sm: string;
|
|
334
331
|
md: string;
|
|
@@ -489,7 +486,10 @@ export declare const IconHighlight: import("@stitches/react/types/styled-compone
|
|
|
489
486
|
zIndices: {};
|
|
490
487
|
transitions: {};
|
|
491
488
|
}, import("@stitches/react/types/config").DefaultThemeMap, {}>>;
|
|
492
|
-
export declare const
|
|
489
|
+
export declare const IconHighlight: import("@stitches/react/types/styled-component").StyledComponent<"div", {
|
|
490
|
+
type?: "info" | "success" | "warning" | "error" | "loading" | undefined;
|
|
491
|
+
align?: "center" | undefined;
|
|
492
|
+
}, {
|
|
493
493
|
xs: string;
|
|
494
494
|
sm: string;
|
|
495
495
|
md: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alert.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Alert/Alert.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAwFpB,CAAC;AAEH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAcf,CAAC;AAEH,eAAO,MAAM,
|
|
1
|
+
{"version":3,"file":"Alert.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Alert/Alert.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAwFpB,CAAC;AAEH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAcf,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAIzB,CAAC;AAEH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAqDxB,CAAC"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type { BaseAlign } from '../Typography/Typography.types';
|
|
2
|
-
import type {
|
|
2
|
+
import type { ReactNode } from 'react';
|
|
3
|
+
import type { CSS } from 'src/theme';
|
|
3
4
|
export type Type = 'success' | 'warning' | 'error' | 'info' | 'loading';
|
|
4
5
|
export interface PropTypes {
|
|
5
6
|
type: Type;
|
|
@@ -7,7 +8,7 @@ export interface PropTypes {
|
|
|
7
8
|
footer?: ReactNode;
|
|
8
9
|
action?: ReactNode;
|
|
9
10
|
variant?: 'alarm' | 'regular';
|
|
10
|
-
containerStyles?:
|
|
11
|
+
containerStyles?: CSS;
|
|
11
12
|
titleAlign?: BaseAlign;
|
|
12
13
|
}
|
|
13
14
|
//# sourceMappingURL=Alert.types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alert.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Alert/Alert.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"Alert.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Alert/Alert.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAErC,MAAM,MAAM,IAAI,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;AAExE,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,IAAI,CAAC;IACX,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,eAAe,CAAC,EAAE,GAAG,CAAC;IACtB,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB"}
|
|
@@ -7,7 +7,7 @@ declare const TextField: React.ForwardRefExoticComponent<{
|
|
|
7
7
|
variant?: "contained" | "outlined" | "ghost" | undefined;
|
|
8
8
|
fullWidth?: boolean | undefined;
|
|
9
9
|
labelProps?: import("../Typography").TypographyPropTypes | undefined;
|
|
10
|
-
} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "
|
|
10
|
+
} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "prefix" | "size"> & {
|
|
11
11
|
children?: React.ReactNode;
|
|
12
12
|
} & React.RefAttributes<HTMLInputElement>>;
|
|
13
13
|
export { TextField };
|
|
@@ -8,7 +8,7 @@ declare const _default: import("@storybook/types").ComponentAnnotations<import("
|
|
|
8
8
|
variant?: "contained" | "outlined" | "ghost" | undefined;
|
|
9
9
|
fullWidth?: boolean | undefined;
|
|
10
10
|
labelProps?: import("..").TypographyPropTypes | undefined;
|
|
11
|
-
} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "
|
|
11
|
+
} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "prefix" | "size"> & {
|
|
12
12
|
children?: React.ReactNode;
|
|
13
13
|
} & React.RefAttributes<HTMLInputElement>>;
|
|
14
14
|
export default _default;
|
|
@@ -334,7 +334,7 @@ export declare const InputAmount: import("@stitches/react/types/styled-component
|
|
|
334
334
|
variant?: "contained" | "outlined" | "ghost" | undefined;
|
|
335
335
|
fullWidth?: boolean | undefined;
|
|
336
336
|
labelProps?: import("../../components").TypographyPropTypes | undefined;
|
|
337
|
-
} & Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "
|
|
337
|
+
} & Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "prefix" | "size"> & {
|
|
338
338
|
children?: import("react").ReactNode;
|
|
339
339
|
} & import("react").RefAttributes<HTMLInputElement>>, {}, {
|
|
340
340
|
xs: string;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
import type { CSS as StitchesCSS } from '@stitches/react';
|
|
2
3
|
import type { DefaultThemeMap } from '@stitches/react/types/config';
|
|
3
4
|
export declare const theme: {
|
|
4
5
|
colors: {
|
|
@@ -173,7 +174,7 @@ export declare const darkColors: {
|
|
|
173
174
|
};
|
|
174
175
|
export declare const styled: <Type extends import("react").ComponentType<any> | import("@stitches/react/types/util").Function | keyof JSX.IntrinsicElements, Composers extends (string | import("react").ComponentType<any> | import("@stitches/react/types/util").Function | {
|
|
175
176
|
[name: string]: unknown;
|
|
176
|
-
})[],
|
|
177
|
+
})[], CSS_1 = import("@stitches/react/types/css-util").CSS<{
|
|
177
178
|
xs: string;
|
|
178
179
|
sm: string;
|
|
179
180
|
md: string;
|
|
@@ -328,18 +329,18 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
|
|
|
328
329
|
};
|
|
329
330
|
zIndices: {};
|
|
330
331
|
transitions: {};
|
|
331
|
-
}, DefaultThemeMap, {}>>(type: Type, ...composers: { [K in keyof Composers]: string extends Composers[K] ? Composers[K] : Composers[K] extends string | import("react").ComponentType<any> | import("@stitches/react/types/util").Function ? Composers[K] : import("@stitches/react/types/stitches").RemoveIndex<
|
|
332
|
+
}, DefaultThemeMap, {}>>(type: Type, ...composers: { [K in keyof Composers]: string extends Composers[K] ? Composers[K] : Composers[K] extends string | import("react").ComponentType<any> | import("@stitches/react/types/util").Function ? Composers[K] : import("@stitches/react/types/stitches").RemoveIndex<CSS_1> & {
|
|
332
333
|
variants?: {
|
|
333
334
|
[x: string]: {
|
|
334
|
-
[x: string]:
|
|
335
|
-
[x: number]:
|
|
335
|
+
[x: string]: CSS_1;
|
|
336
|
+
[x: number]: CSS_1;
|
|
336
337
|
};
|
|
337
338
|
} | undefined;
|
|
338
339
|
compoundVariants?: (("variants" extends keyof Composers[K] ? Composers[K][keyof Composers[K] & "variants"] extends infer T ? { [Name in keyof T]?: import("@stitches/react/types/util").String | import("@stitches/react/types/util").Widen<keyof Composers[K][keyof Composers[K] & "variants"][Name]> | undefined; } : never : import("@stitches/react/types/util").WideObject) & {
|
|
339
|
-
css:
|
|
340
|
+
css: CSS_1;
|
|
340
341
|
})[] | undefined;
|
|
341
342
|
defaultVariants?: ("variants" extends keyof Composers[K] ? Composers[K][keyof Composers[K] & "variants"] extends infer T_1 ? { [Name_1 in keyof T_1]?: import("@stitches/react/types/util").String | import("@stitches/react/types/util").Widen<keyof Composers[K][keyof Composers[K] & "variants"][Name_1]> | undefined; } : never : import("@stitches/react/types/util").WideObject) | undefined;
|
|
342
|
-
} &
|
|
343
|
+
} & CSS_1 & (Composers[K] extends infer T_2 ? { [K2 in keyof T_2]: K2 extends "compoundVariants" | "defaultVariants" | "variants" ? unknown : K2 extends keyof CSS_1 ? CSS_1[K2] : unknown; } : never); }) => import("@stitches/react/types/styled-component").StyledComponent<Type, import("@stitches/react/types/styled-component").StyledComponentProps<Composers>, {
|
|
343
344
|
xs: string;
|
|
344
345
|
sm: string;
|
|
345
346
|
md: string;
|
|
@@ -501,7 +502,7 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
|
|
|
501
502
|
transitions: {};
|
|
502
503
|
}, DefaultThemeMap, {}>>, css: <Composers extends (string | import("react").JSXElementConstructor<any> | import("react").ExoticComponent<any> | import("@stitches/react/types/util").Function | {
|
|
503
504
|
[name: string]: unknown;
|
|
504
|
-
})[],
|
|
505
|
+
})[], CSS_1 = import("@stitches/react/types/css-util").CSS<{
|
|
505
506
|
xs: string;
|
|
506
507
|
sm: string;
|
|
507
508
|
md: string;
|
|
@@ -656,23 +657,23 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
|
|
|
656
657
|
};
|
|
657
658
|
zIndices: {};
|
|
658
659
|
transitions: {};
|
|
659
|
-
}, DefaultThemeMap, {}>>(...composers: { [K in keyof Composers]: string extends Composers[K] ? Composers[K] : Composers[K] extends string | import("react").JSXElementConstructor<any> | import("react").ExoticComponent<any> | import("@stitches/react/types/util").Function ? Composers[K] : import("@stitches/react/types/stitches").RemoveIndex<
|
|
660
|
+
}, DefaultThemeMap, {}>>(...composers: { [K in keyof Composers]: string extends Composers[K] ? Composers[K] : Composers[K] extends string | import("react").JSXElementConstructor<any> | import("react").ExoticComponent<any> | import("@stitches/react/types/util").Function ? Composers[K] : import("@stitches/react/types/stitches").RemoveIndex<CSS_1> & {
|
|
660
661
|
variants?: {
|
|
661
662
|
[x: string]: {
|
|
662
|
-
[x: string]:
|
|
663
|
-
[x: number]:
|
|
663
|
+
[x: string]: CSS_1;
|
|
664
|
+
[x: number]: CSS_1;
|
|
664
665
|
};
|
|
665
666
|
} | undefined;
|
|
666
667
|
compoundVariants?: (("variants" extends keyof Composers[K] ? Composers[K][keyof Composers[K] & "variants"] extends infer T ? { [Name in keyof T]?: import("@stitches/react/types/util").String | import("@stitches/react/types/util").Widen<keyof Composers[K][keyof Composers[K] & "variants"][Name]> | undefined; } : never : import("@stitches/react/types/util").WideObject) & {
|
|
667
|
-
css:
|
|
668
|
+
css: CSS_1;
|
|
668
669
|
})[] | undefined;
|
|
669
670
|
defaultVariants?: ("variants" extends keyof Composers[K] ? Composers[K][keyof Composers[K] & "variants"] extends infer T_1 ? { [Name_1 in keyof T_1]?: import("@stitches/react/types/util").String | import("@stitches/react/types/util").Widen<keyof Composers[K][keyof Composers[K] & "variants"][Name_1]> | undefined; } : never : import("@stitches/react/types/util").WideObject) | undefined;
|
|
670
|
-
} &
|
|
671
|
+
} & CSS_1 & (Composers[K] extends infer T_2 ? { [K2 in keyof T_2]: K2 extends "compoundVariants" | "defaultVariants" | "variants" ? unknown : K2 extends keyof CSS_1 ? CSS_1[K2] : unknown; } : never); }) => import("@stitches/react/types/styled-component").CssComponent<import("@stitches/react/types/styled-component").StyledComponentType<Composers>, import("@stitches/react/types/styled-component").StyledComponentProps<Composers>, {
|
|
671
672
|
xs: string;
|
|
672
673
|
sm: string;
|
|
673
674
|
md: string;
|
|
674
675
|
lg: string;
|
|
675
|
-
},
|
|
676
|
+
}, CSS_1>, createTheme: <Argument0 extends string | ({
|
|
676
677
|
colors?: {
|
|
677
678
|
primary?: string | number | boolean | undefined;
|
|
678
679
|
primary500?: string | number | boolean | undefined;
|
|
@@ -1624,6 +1625,7 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
|
|
|
1624
1625
|
themeMap: DefaultThemeMap;
|
|
1625
1626
|
utils: {};
|
|
1626
1627
|
};
|
|
1628
|
+
export type CSS = StitchesCSS<typeof config>;
|
|
1627
1629
|
export declare const lightTheme: string & {
|
|
1628
1630
|
className: string;
|
|
1629
1631
|
selector: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../../src/theme.ts"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../../src/theme.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import type { Type } from './Alert.types';
|
|
1
|
+
import type { PropTypes, Type } from './Alert.types';
|
|
2
2
|
|
|
3
|
-
export const getColor = (type: Type, variant: '
|
|
3
|
+
export const getColor = (type: Type, variant: PropTypes['variant']) => {
|
|
4
4
|
if (variant === 'regular') {
|
|
5
5
|
return undefined;
|
|
6
6
|
}
|
|
@@ -15,3 +15,14 @@ export const getColor = (type: Type, variant: 'alarm' | 'regular') => {
|
|
|
15
15
|
return undefined;
|
|
16
16
|
}
|
|
17
17
|
};
|
|
18
|
+
|
|
19
|
+
export const mapVariantToSize = (variant: PropTypes['variant']) => {
|
|
20
|
+
switch (variant) {
|
|
21
|
+
case 'alarm':
|
|
22
|
+
return 'small';
|
|
23
|
+
case 'regular':
|
|
24
|
+
return 'xsmall';
|
|
25
|
+
default:
|
|
26
|
+
return 'xsmall';
|
|
27
|
+
}
|
|
28
|
+
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { darkTheme, styled } from '../../theme';
|
|
2
2
|
|
|
3
3
|
export const Container = styled('div', {
|
|
4
4
|
display: 'flex',
|
|
@@ -106,6 +106,12 @@ export const Main = styled('div', {
|
|
|
106
106
|
},
|
|
107
107
|
});
|
|
108
108
|
|
|
109
|
+
export const TitleContainer = styled('div', {
|
|
110
|
+
display: 'flex',
|
|
111
|
+
alignItems: 'center',
|
|
112
|
+
flex: '1 0 0',
|
|
113
|
+
});
|
|
114
|
+
|
|
109
115
|
export const IconHighlight = styled('div', {
|
|
110
116
|
borderRadius: '$lg',
|
|
111
117
|
width: '$20',
|
|
@@ -160,9 +166,3 @@ export const IconHighlight = styled('div', {
|
|
|
160
166
|
},
|
|
161
167
|
},
|
|
162
168
|
});
|
|
163
|
-
|
|
164
|
-
export const titleStyles = css({
|
|
165
|
-
display: 'flex',
|
|
166
|
-
alignItems: 'center',
|
|
167
|
-
flex: '1 0 0',
|
|
168
|
-
});
|
|
@@ -6,8 +6,8 @@ import React from 'react';
|
|
|
6
6
|
import { Divider } from '../Divider';
|
|
7
7
|
import { Typography } from '../Typography';
|
|
8
8
|
|
|
9
|
-
import { getColor } from './Alert.helpers';
|
|
10
|
-
import { Container, IconHighlight, Main,
|
|
9
|
+
import { getColor, mapVariantToSize } from './Alert.helpers';
|
|
10
|
+
import { Container, IconHighlight, Main, TitleContainer } from './Alert.styles';
|
|
11
11
|
import AlertIcon from './AlertIcon';
|
|
12
12
|
|
|
13
13
|
export function Alert(props: PropsWithChildren<PropTypes>) {
|
|
@@ -25,11 +25,11 @@ export function Alert(props: PropsWithChildren<PropTypes>) {
|
|
|
25
25
|
return (
|
|
26
26
|
<Container
|
|
27
27
|
className="_alert"
|
|
28
|
-
|
|
28
|
+
css={containerStyles}
|
|
29
29
|
type={type}
|
|
30
30
|
variant={variant}>
|
|
31
31
|
<Main variant={variant}>
|
|
32
|
-
<
|
|
32
|
+
<TitleContainer>
|
|
33
33
|
<IconHighlight type={type}>
|
|
34
34
|
<AlertIcon type={type} />
|
|
35
35
|
</IconHighlight>
|
|
@@ -40,11 +40,11 @@ export function Alert(props: PropsWithChildren<PropTypes>) {
|
|
|
40
40
|
align={titleAlign}
|
|
41
41
|
variant="body"
|
|
42
42
|
className="title_typography"
|
|
43
|
-
size={variant
|
|
43
|
+
size={mapVariantToSize(variant)}>
|
|
44
44
|
{title}
|
|
45
45
|
</Typography>
|
|
46
46
|
)}
|
|
47
|
-
</
|
|
47
|
+
</TitleContainer>
|
|
48
48
|
{action ? <div>{action}</div> : null}
|
|
49
49
|
</Main>
|
|
50
50
|
{footer ? (
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type { BaseAlign } from '../Typography/Typography.types';
|
|
2
|
-
import type {
|
|
2
|
+
import type { ReactNode } from 'react';
|
|
3
|
+
import type { CSS } from 'src/theme';
|
|
3
4
|
|
|
4
5
|
export type Type = 'success' | 'warning' | 'error' | 'info' | 'loading';
|
|
5
6
|
|
|
@@ -9,6 +10,6 @@ export interface PropTypes {
|
|
|
9
10
|
footer?: ReactNode;
|
|
10
11
|
action?: ReactNode;
|
|
11
12
|
variant?: 'alarm' | 'regular';
|
|
12
|
-
containerStyles?:
|
|
13
|
+
containerStyles?: CSS;
|
|
13
14
|
titleAlign?: BaseAlign;
|
|
14
15
|
}
|
package/src/theme.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
// TSDX + stiches doesn't work with import statement and has a bug.
|
|
2
2
|
|
|
3
|
-
import type { PropertyValue } from '@stitches/react';
|
|
3
|
+
import type { PropertyValue, CSS as StitchesCSS } from '@stitches/react';
|
|
4
4
|
import type { DefaultThemeMap } from '@stitches/react/types/config';
|
|
5
5
|
|
|
6
6
|
import { createStitches } from '@stitches/react';
|
|
@@ -217,6 +217,8 @@ export const { styled, css, createTheme, keyframes, globalCss, config } =
|
|
|
217
217
|
utils,
|
|
218
218
|
});
|
|
219
219
|
|
|
220
|
+
export type CSS = StitchesCSS<typeof config>;
|
|
221
|
+
|
|
220
222
|
export const lightTheme = createTheme('light-theme-ui', {});
|
|
221
223
|
|
|
222
224
|
export const darkTheme = createTheme('dark-theme-ui', {
|