@fluentui/react-alert 9.0.0-beta.5 → 9.0.0-beta.50
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.json +1588 -1
- package/CHANGELOG.md +545 -2
- package/README.md +1 -1
- package/dist/index.d.ts +11 -1
- package/lib/Alert.js.map +1 -1
- package/lib/components/Alert/Alert.js +1 -2
- package/lib/components/Alert/Alert.js.map +1 -1
- package/lib/components/Alert/Alert.types.js.map +1 -1
- package/lib/components/Alert/index.js +1 -1
- package/lib/components/Alert/index.js.map +1 -1
- package/lib/components/Alert/renderAlert.js +4 -7
- package/lib/components/Alert/renderAlert.js.map +1 -1
- package/lib/components/Alert/useAlert.js +29 -17
- package/lib/components/Alert/useAlert.js.map +1 -1
- package/lib/components/Alert/useAlertStyles.styles.js +137 -0
- package/lib/components/Alert/useAlertStyles.styles.js.map +1 -0
- package/lib/index.js.map +1 -1
- package/lib-commonjs/Alert.js +4 -5
- package/lib-commonjs/Alert.js.map +1 -1
- package/lib-commonjs/components/Alert/Alert.js +16 -22
- package/lib-commonjs/components/Alert/Alert.js.map +1 -1
- package/lib-commonjs/components/Alert/Alert.types.js +3 -2
- package/lib-commonjs/components/Alert/Alert.types.js.map +1 -1
- package/lib-commonjs/components/Alert/index.js +8 -13
- package/lib-commonjs/components/Alert/index.js.map +1 -1
- package/lib-commonjs/components/Alert/renderAlert.js +12 -20
- package/lib-commonjs/components/Alert/renderAlert.js.map +1 -1
- package/lib-commonjs/components/Alert/useAlert.js +66 -71
- package/lib-commonjs/components/Alert/useAlert.js.map +1 -1
- package/lib-commonjs/components/Alert/useAlertStyles.styles.js +278 -0
- package/lib-commonjs/components/Alert/useAlertStyles.styles.js.map +1 -0
- package/lib-commonjs/index.js +16 -35
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +32 -18
- package/Migration.md +0 -0
- package/Spec.md +0 -95
- package/dist/tsdoc-metadata.json +0 -11
- package/lib/components/Alert/useAlertStyles.js +0 -88
- package/lib/components/Alert/useAlertStyles.js.map +0 -1
- package/lib-commonjs/components/Alert/useAlertStyles.js +0 -99
- package/lib-commonjs/components/Alert/useAlertStyles.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["React","renderAlert_unstable","useAlert_unstable","useAlertStyles_unstable","Alert","forwardRef","props","ref","state","displayName"],"sources":["../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { renderAlert_unstable } from './renderAlert';\nimport { useAlert_unstable } from './useAlert';\nimport { useAlertStyles_unstable } from './useAlertStyles.styles';\n\nimport type { AlertProps } from './Alert.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * An Alert component displays a brief, important message to attract a user's attention\n * without interrupting their current task.\n */\nexport const Alert: ForwardRefComponent<AlertProps> = React.forwardRef((props, ref) => {\n const state = useAlert_unstable(props, ref);\n\n useAlertStyles_unstable(state);\n return renderAlert_unstable(state);\n}) as ForwardRefComponent<AlertProps>;\n\nAlert.displayName = 'Alert';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAEvB,SAASC,oBAAoB,QAAQ;AACrC,SAASC,iBAAiB,QAAQ;AAClC,SAASC,uBAAuB,QAAQ;AAKxC;;;;AAIA,OAAO,MAAMC,KAAA,gBAAyCJ,KAAA,CAAMK,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACrF,MAAMC,KAAA,GAAQN,iBAAA,CAAkBI,KAAA,EAAOC,GAAA;EAEvCJ,uBAAA,CAAwBK,KAAA;EACxB,OAAOP,oBAAA,CAAqBO,KAAA;AAC9B;AAEAJ,KAAA,CAAMK,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":[],"sources":["../../../src/components/Alert/Alert.types.ts"],"sourcesContent":["import { Avatar } from '@fluentui/react-avatar';\nimport { Button } from '@fluentui/react-button';\n\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type AlertSlots = {\n /**\n * The root slot is the top level container for the alert component\n */\n root: NonNullable<Slot<'div'>>;\n /**\n * The icon slot renders the icon determined by the `icon` or `intent` prop\n */\n icon?: Slot<'span'>;\n /**\n * The action slot renders a button that prompts the user to take action on the alert\n */\n action?: Slot<typeof Button>;\n /**\n * The avatar slot renders an avatar before the contents of the alert\n */\n avatar?: Slot<typeof Avatar>;\n};\n\n/**\n * Alert Props\n */\nexport type AlertProps = ComponentProps<AlertSlots> & {\n /**\n * The intent prop, if present, determines the icon to be rendered in the icon slot. The icon prop\n * overrides the intent prop\n */\n intent?: 'info' | 'success' | 'error' | 'warning';\n /**\n * The appearance of the Alert.\n * @default 'primary'\n */\n appearance?: 'primary' | 'inverted';\n};\n\n/**\n * State used in rendering Alert\n */\nexport type AlertState = ComponentState<AlertSlots> &\n Pick<AlertProps, 'intent'> &\n Required<Pick<AlertProps, 'appearance'>>;\n"],"mappings":"AAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":[],"sources":["../../../src/components/Alert/index.ts"],"sourcesContent":["export * from './Alert';\nexport * from './Alert.types';\nexport * from './renderAlert';\nexport * from './useAlert';\nexport * from './useAlertStyles.styles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
|
|
@@ -1,13 +1,10 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
1
|
+
/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';
|
|
2
|
+
import { getSlotsNext } from '@fluentui/react-utilities';
|
|
3
3
|
export const renderAlert_unstable = state => {
|
|
4
4
|
const {
|
|
5
5
|
slots,
|
|
6
6
|
slotProps
|
|
7
|
-
} =
|
|
8
|
-
return /*#__PURE__*/
|
|
9
|
-
}, slots.icon && /*#__PURE__*/React.createElement(slots.icon, { ...slotProps.icon
|
|
10
|
-
}), slotProps.root.children, slots.action && /*#__PURE__*/React.createElement(slots.action, { ...slotProps.action
|
|
11
|
-
}));
|
|
7
|
+
} = getSlotsNext(state);
|
|
8
|
+
return /*#__PURE__*/createElement(slots.root, slotProps.root, slots.icon && /*#__PURE__*/createElement(slots.icon, slotProps.icon), slots.avatar && /*#__PURE__*/createElement(slots.avatar, slotProps.avatar), slotProps.root.children, slots.action && /*#__PURE__*/createElement(slots.action, slotProps.action));
|
|
12
9
|
};
|
|
13
10
|
//# sourceMappingURL=renderAlert.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["createElement","getSlotsNext","renderAlert_unstable","state","slots","slotProps","root","icon","avatar","children","action"],"sources":["../../../src/components/Alert/renderAlert.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\n\nimport type { AlertState, AlertSlots } from './Alert.types';\n\nexport const renderAlert_unstable = (state: AlertState) => {\n const { slots, slotProps } = getSlotsNext<AlertSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n {slots.icon && <slots.icon {...slotProps.icon} />}\n {slots.avatar && <slots.avatar {...slotProps.avatar} />}\n {slotProps.root.children}\n {slots.action && <slots.action {...slotProps.action} />}\n </slots.root>\n );\n};\n"],"mappings":"AAAA,2BACA,yBAEA,SAASA,aAAa,QAAQ;AAC9B,SAASC,YAAY,QAAQ;AAI7B,OAAO,MAAMC,oBAAA,GAAwBC,KAAA,IAAsB;EACzD,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGJ,YAAA,CAAyBE,KAAA;EAEtD,oBACEH,aAXJ,CAWKI,KAAA,CAAME,IAAI,EAAKD,SAAA,CAAUC,IAAI,EAC3BF,KAAA,CAAMG,IAAI,iBAAIP,aAZrB,CAYsBI,KAAA,CAAMG,IAAI,EAAKF,SAAA,CAAUE,IAAI,GAC5CH,KAAA,CAAMI,MAAM,iBAAIR,aAbvB,CAawBI,KAAA,CAAMI,MAAM,EAAKH,SAAA,CAAUG,MAAM,GAClDH,SAAA,CAAUC,IAAI,CAACG,QAAQ,EACvBL,KAAA,CAAMM,MAAM,iBAAIV,aAfvB,CAewBI,KAAA,CAAMM,MAAM,EAAKL,SAAA,CAAUK,MAAM;AAGzD"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
+
import { Avatar } from '@fluentui/react-avatar';
|
|
2
3
|
import { Button } from '@fluentui/react-button';
|
|
3
4
|
import { CheckmarkCircleFilled, DismissCircleFilled, InfoFilled, WarningFilled } from '@fluentui/react-icons';
|
|
4
5
|
import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
|
|
@@ -11,53 +12,64 @@ import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utiliti
|
|
|
11
12
|
* @param props - props from this instance of Alert
|
|
12
13
|
* @param ref - reference to root HTMLElement of Alert
|
|
13
14
|
*/
|
|
14
|
-
|
|
15
15
|
export const useAlert_unstable = (props, ref) => {
|
|
16
16
|
const {
|
|
17
|
+
appearance = 'primary',
|
|
17
18
|
intent
|
|
18
19
|
} = props;
|
|
19
|
-
/** Determine the icon to render based on the intent */
|
|
20
|
-
|
|
20
|
+
/** Determine the role and icon to render based on the intent */
|
|
21
21
|
let defaultIcon;
|
|
22
|
-
|
|
22
|
+
let defaultRole = 'status';
|
|
23
23
|
switch (intent) {
|
|
24
24
|
case 'success':
|
|
25
25
|
defaultIcon = /*#__PURE__*/React.createElement(CheckmarkCircleFilled, null);
|
|
26
26
|
break;
|
|
27
|
-
|
|
28
27
|
case 'error':
|
|
29
28
|
defaultIcon = /*#__PURE__*/React.createElement(DismissCircleFilled, null);
|
|
29
|
+
defaultRole = 'alert';
|
|
30
30
|
break;
|
|
31
|
-
|
|
32
31
|
case 'warning':
|
|
33
32
|
defaultIcon = /*#__PURE__*/React.createElement(WarningFilled, null);
|
|
33
|
+
defaultRole = 'alert';
|
|
34
34
|
break;
|
|
35
|
-
|
|
36
35
|
case 'info':
|
|
37
36
|
defaultIcon = /*#__PURE__*/React.createElement(InfoFilled, null);
|
|
38
37
|
break;
|
|
39
38
|
}
|
|
40
|
-
|
|
41
|
-
const icon = resolveShorthand(props.icon, {
|
|
39
|
+
const action = resolveShorthand(props.action, {
|
|
42
40
|
defaultProps: {
|
|
43
|
-
|
|
44
|
-
}
|
|
45
|
-
required: !!props.intent
|
|
41
|
+
appearance: 'transparent'
|
|
42
|
+
}
|
|
46
43
|
});
|
|
44
|
+
const avatar = resolveShorthand(props.avatar);
|
|
45
|
+
let icon;
|
|
46
|
+
/** Avatar prop takes precedence over the icon or intent prop */
|
|
47
|
+
if (!avatar) {
|
|
48
|
+
icon = resolveShorthand(props.icon, {
|
|
49
|
+
defaultProps: {
|
|
50
|
+
children: defaultIcon
|
|
51
|
+
},
|
|
52
|
+
required: !!props.intent
|
|
53
|
+
});
|
|
54
|
+
}
|
|
47
55
|
return {
|
|
56
|
+
action,
|
|
57
|
+
appearance,
|
|
58
|
+
avatar,
|
|
48
59
|
components: {
|
|
49
60
|
root: 'div',
|
|
50
61
|
icon: 'span',
|
|
51
|
-
action: Button
|
|
62
|
+
action: Button,
|
|
63
|
+
avatar: Avatar
|
|
52
64
|
},
|
|
65
|
+
icon,
|
|
66
|
+
intent,
|
|
53
67
|
root: getNativeElementProps('div', {
|
|
54
68
|
ref,
|
|
69
|
+
role: defaultRole,
|
|
55
70
|
children: props.children,
|
|
56
71
|
...props
|
|
57
|
-
})
|
|
58
|
-
icon,
|
|
59
|
-
action: resolveShorthand(props.action),
|
|
60
|
-
intent
|
|
72
|
+
})
|
|
61
73
|
};
|
|
62
74
|
};
|
|
63
75
|
//# sourceMappingURL=useAlert.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["React","Avatar","Button","CheckmarkCircleFilled","DismissCircleFilled","InfoFilled","WarningFilled","getNativeElementProps","resolveShorthand","useAlert_unstable","props","ref","appearance","intent","defaultIcon","defaultRole","createElement","action","defaultProps","avatar","icon","children","required","components","root","role"],"sources":["../../../src/components/Alert/useAlert.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Avatar } from '@fluentui/react-avatar';\nimport { Button } from '@fluentui/react-button';\nimport { CheckmarkCircleFilled, DismissCircleFilled, InfoFilled, WarningFilled } from '@fluentui/react-icons';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\n\nimport type { AlertProps, AlertState } from './Alert.types';\n\n/**\n * Create the state required to render Alert.\n *\n * The returned state can be modified with hooks such as useAlertStyles_unstable,\n * before being passed to renderAlert_unstable.\n *\n * @param props - props from this instance of Alert\n * @param ref - reference to root HTMLElement of Alert\n */\nexport const useAlert_unstable = (props: AlertProps, ref: React.Ref<HTMLElement>): AlertState => {\n const { appearance = 'primary', intent } = props;\n\n /** Determine the role and icon to render based on the intent */\n let defaultIcon;\n let defaultRole = 'status';\n switch (intent) {\n case 'success':\n defaultIcon = <CheckmarkCircleFilled />;\n break;\n case 'error':\n defaultIcon = <DismissCircleFilled />;\n defaultRole = 'alert';\n break;\n case 'warning':\n defaultIcon = <WarningFilled />;\n defaultRole = 'alert';\n break;\n case 'info':\n defaultIcon = <InfoFilled />;\n break;\n }\n\n const action = resolveShorthand(props.action, { defaultProps: { appearance: 'transparent' } });\n const avatar = resolveShorthand(props.avatar);\n let icon;\n /** Avatar prop takes precedence over the icon or intent prop */\n if (!avatar) {\n icon = resolveShorthand(props.icon, {\n defaultProps: {\n children: defaultIcon,\n },\n required: !!props.intent,\n });\n }\n\n return {\n action,\n appearance,\n avatar,\n components: {\n root: 'div',\n icon: 'span',\n action: Button,\n avatar: Avatar,\n },\n icon,\n intent,\n root: getNativeElementProps('div', {\n ref,\n role: defaultRole,\n children: props.children,\n ...props,\n }),\n };\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAEvB,SAASC,MAAM,QAAQ;AACvB,SAASC,MAAM,QAAQ;AACvB,SAASC,qBAAqB,EAAEC,mBAAmB,EAAEC,UAAU,EAAEC,aAAa,QAAQ;AACtF,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ;AAIxD;;;;;;;;;AASA,OAAO,MAAMC,iBAAA,GAAoBA,CAACC,KAAA,EAAmBC,GAAA,KAA4C;EAC/F,MAAM;IAAEC,UAAA,GAAa;IAAWC;EAAM,CAAE,GAAGH,KAAA;EAE3C;EACA,IAAII,WAAA;EACJ,IAAIC,WAAA,GAAc;EAClB,QAAQF,MAAA;IACN,KAAK;MACHC,WAAA,gBAAcd,KAAA,CAAAgB,aAAA,CAACb,qBAAA;MACf;IACF,KAAK;MACHW,WAAA,gBAAcd,KAAA,CAAAgB,aAAA,CAACZ,mBAAA;MACfW,WAAA,GAAc;MACd;IACF,KAAK;MACHD,WAAA,gBAAcd,KAAA,CAAAgB,aAAA,CAACV,aAAA;MACfS,WAAA,GAAc;MACd;IACF,KAAK;MACHD,WAAA,gBAAcd,KAAA,CAAAgB,aAAA,CAACX,UAAA;MACf;EAAM;EAGV,MAAMY,MAAA,GAAST,gBAAA,CAAiBE,KAAA,CAAMO,MAAM,EAAE;IAAEC,YAAA,EAAc;MAAEN,UAAA,EAAY;IAAc;EAAE;EAC5F,MAAMO,MAAA,GAASX,gBAAA,CAAiBE,KAAA,CAAMS,MAAM;EAC5C,IAAIC,IAAA;EACJ;EACA,IAAI,CAACD,MAAA,EAAQ;IACXC,IAAA,GAAOZ,gBAAA,CAAiBE,KAAA,CAAMU,IAAI,EAAE;MAClCF,YAAA,EAAc;QACZG,QAAA,EAAUP;MACZ;MACAQ,QAAA,EAAU,CAAC,CAACZ,KAAA,CAAMG;IACpB;EACF;EAEA,OAAO;IACLI,MAAA;IACAL,UAAA;IACAO,MAAA;IACAI,UAAA,EAAY;MACVC,IAAA,EAAM;MACNJ,IAAA,EAAM;MACNH,MAAA,EAAQf,MAAA;MACRiB,MAAA,EAAQlB;IACV;IACAmB,IAAA;IACAP,MAAA;IACAW,IAAA,EAAMjB,qBAAA,CAAsB,OAAO;MACjCI,GAAA;MACAc,IAAA,EAAMV,WAAA;MACNM,QAAA,EAAUX,KAAA,CAAMW,QAAQ;MACxB,GAAGX;IACL;EACF;AACF"}
|
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
import { tokens } from '@fluentui/react-theme';
|
|
2
|
+
import { __styles, mergeClasses, shorthands } from '@griffel/react';
|
|
3
|
+
import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
|
|
4
|
+
export const alertClassNames = {
|
|
5
|
+
root: 'fui-Alert',
|
|
6
|
+
icon: 'fui-Alert__icon',
|
|
7
|
+
action: 'fui-Alert__action',
|
|
8
|
+
avatar: 'fui-Alert__avatar'
|
|
9
|
+
};
|
|
10
|
+
const useStyles = /*#__PURE__*/__styles({
|
|
11
|
+
root: {
|
|
12
|
+
mc9l5x: "f22iagw",
|
|
13
|
+
Bt984gj: "f122n59",
|
|
14
|
+
sshi5w: "f5pgtk9",
|
|
15
|
+
z8tnut: "f1g0x7ka",
|
|
16
|
+
z189sj: ["f11qrl6u", "fjlbh76"],
|
|
17
|
+
Byoj8tv: "f1qch9an",
|
|
18
|
+
uwmqm3: ["fjlbh76", "f11qrl6u"],
|
|
19
|
+
Bbmb7ep: ["fff7au0", "f1bjk9e1"],
|
|
20
|
+
Beyfa6y: ["f1bjk9e1", "fff7au0"],
|
|
21
|
+
B7oj6ja: ["fwsfkhu", "f8wkphi"],
|
|
22
|
+
Btl43ni: ["f8wkphi", "fwsfkhu"],
|
|
23
|
+
B4j52fo: "f5ogflp",
|
|
24
|
+
Bekrc4i: ["f1hqa2wf", "finvdd3"],
|
|
25
|
+
Bn0qgzm: "f1f09k3d",
|
|
26
|
+
ibv6hh: ["finvdd3", "f1hqa2wf"],
|
|
27
|
+
icvyot: "fzkkow9",
|
|
28
|
+
vrafjx: ["fcdblym", "fjik90z"],
|
|
29
|
+
oivjwe: "fg706s2",
|
|
30
|
+
wvpqe5: ["fjik90z", "fcdblym"],
|
|
31
|
+
g2u3we: "fghlq4f",
|
|
32
|
+
h3c5rm: ["f1gn591s", "fjscplz"],
|
|
33
|
+
B9xav0g: "fb073pr",
|
|
34
|
+
zhjwy3: ["fjscplz", "f1gn591s"],
|
|
35
|
+
E5pizo: "fz58gqq",
|
|
36
|
+
Be2twd7: "fkhj508",
|
|
37
|
+
Bhrd7zp: "fl43uef",
|
|
38
|
+
sj55zd: "f19n0e5",
|
|
39
|
+
De3pzq: "fxugw4r"
|
|
40
|
+
},
|
|
41
|
+
inverted: {
|
|
42
|
+
sj55zd: "f1w7i9ko",
|
|
43
|
+
De3pzq: "f5pduvr"
|
|
44
|
+
},
|
|
45
|
+
icon: {
|
|
46
|
+
Bqenvij: "fd461yt",
|
|
47
|
+
Be2twd7: "f4ybsrx",
|
|
48
|
+
z8tnut: "f1g0x7ka",
|
|
49
|
+
z189sj: ["f19lj068", "f177v4lu"],
|
|
50
|
+
Byoj8tv: "f1qch9an",
|
|
51
|
+
uwmqm3: ["f1cnd47f", "fhxju0i"]
|
|
52
|
+
},
|
|
53
|
+
avatar: {
|
|
54
|
+
B6of3ja: "f1hu3pq6",
|
|
55
|
+
t21cq0: ["f1phki43", "ff9s3yw"],
|
|
56
|
+
jrapky: "f19f4twv",
|
|
57
|
+
Frg6f3: ["f1tyq0we", "f11qmguv"]
|
|
58
|
+
},
|
|
59
|
+
action: {
|
|
60
|
+
z8tnut: "f1sbtcvk",
|
|
61
|
+
z189sj: ["f81rol6", "frdkuqy"],
|
|
62
|
+
Byoj8tv: "fdghr9",
|
|
63
|
+
uwmqm3: ["frdkuqy", "f81rol6"],
|
|
64
|
+
Bf4jedk: "fy77jfu",
|
|
65
|
+
Frg6f3: ["fcgxt0o", "f1ujusj6"],
|
|
66
|
+
sj55zd: "f16muhyy"
|
|
67
|
+
}
|
|
68
|
+
}, {
|
|
69
|
+
d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f5pgtk9{min-height:44px;}", ".f1g0x7ka{padding-top:0;}", ".f11qrl6u{padding-right:12px;}", ".fjlbh76{padding-left:12px;}", ".f1qch9an{padding-bottom:0;}", ".fff7au0{border-bottom-right-radius:4px;}", ".f1bjk9e1{border-bottom-left-radius:4px;}", ".fwsfkhu{border-top-right-radius:4px;}", ".f8wkphi{border-top-left-radius:4px;}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".fz58gqq{box-shadow:var(--shadow8);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1w7i9ko{color:var(--colorNeutralForegroundInverted2);}", ".f5pduvr{background-color:var(--colorNeutralBackgroundInverted);}", ".fd461yt{height:16px;}", ".f4ybsrx{font-size:16px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f1cnd47f{padding-left:0;}", ".fhxju0i{padding-right:0;}", ".f1hu3pq6{margin-top:0;}", ".f1phki43{margin-right:8px;}", ".ff9s3yw{margin-left:8px;}", ".f19f4twv{margin-bottom:0;}", ".f1tyq0we{margin-left:0;}", ".f11qmguv{margin-right:0;}", ".f1sbtcvk{padding-top:5px;}", ".f81rol6{padding-right:10px;}", ".frdkuqy{padding-left:10px;}", ".fdghr9{padding-bottom:5px;}", ".fy77jfu{min-width:0;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}", ".f16muhyy{color:var(--colorBrandForeground1);}"]
|
|
70
|
+
});
|
|
71
|
+
const useIntentIconStyles = /*#__PURE__*/__styles({
|
|
72
|
+
success: {
|
|
73
|
+
sj55zd: "f1m7fhi8"
|
|
74
|
+
},
|
|
75
|
+
error: {
|
|
76
|
+
sj55zd: "f1whyuy6"
|
|
77
|
+
},
|
|
78
|
+
warning: {
|
|
79
|
+
sj55zd: "fpti2h4"
|
|
80
|
+
},
|
|
81
|
+
info: {
|
|
82
|
+
sj55zd: "fkfq4zb"
|
|
83
|
+
}
|
|
84
|
+
}, {
|
|
85
|
+
d: [".f1m7fhi8{color:var(--colorPaletteGreenForeground3);}", ".f1whyuy6{color:var(--colorPaletteRedForeground3);}", ".fpti2h4{color:var(--colorPaletteYellowForeground2);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}"]
|
|
86
|
+
});
|
|
87
|
+
const useIntentIconStylesInverted = /*#__PURE__*/__styles({
|
|
88
|
+
success: {
|
|
89
|
+
sj55zd: "f1pvjcpr"
|
|
90
|
+
},
|
|
91
|
+
error: {
|
|
92
|
+
sj55zd: "fcrp5ll"
|
|
93
|
+
},
|
|
94
|
+
warning: {
|
|
95
|
+
sj55zd: "f1r8f1cl"
|
|
96
|
+
},
|
|
97
|
+
info: {
|
|
98
|
+
sj55zd: "f1w7i9ko"
|
|
99
|
+
}
|
|
100
|
+
}, {
|
|
101
|
+
d: [".f1pvjcpr{color:var(--colorPaletteGreenForegroundInverted);}", ".fcrp5ll{color:var(--colorPaletteRedForegroundInverted);}", ".f1r8f1cl{color:var(--colorPaletteYellowForegroundInverted);}", ".f1w7i9ko{color:var(--colorNeutralForegroundInverted2);}"]
|
|
102
|
+
});
|
|
103
|
+
const useActionButtonColorInverted = /*#__PURE__*/__styles({
|
|
104
|
+
action: {
|
|
105
|
+
sj55zd: "f1qz2gb0",
|
|
106
|
+
B8q5s1w: "fa5e339",
|
|
107
|
+
Bci5o5g: ["fk4svks", "fqzoz0o"],
|
|
108
|
+
n8qw10: "fw8q0i0",
|
|
109
|
+
Bdrgwmp: ["fqzoz0o", "fk4svks"],
|
|
110
|
+
Bfpq7zp: "f1dlk4fq"
|
|
111
|
+
}
|
|
112
|
+
}, {
|
|
113
|
+
d: [".f1qz2gb0{color:var(--colorBrandForegroundInverted);}", ".fa5e339[data-fui-focus-visible]{border-top-color:var(--colorTransparentStrokeInteractive);}", ".fk4svks[data-fui-focus-visible]{border-right-color:var(--colorTransparentStrokeInteractive);}", ".fqzoz0o[data-fui-focus-visible]{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fw8q0i0[data-fui-focus-visible]{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".f1dlk4fq[data-fui-focus-visible]{outline-color:var(--colorNeutralBackground5Pressed);}"]
|
|
114
|
+
});
|
|
115
|
+
/**
|
|
116
|
+
* Apply styling to the Alert slots based on the state
|
|
117
|
+
*/
|
|
118
|
+
export const useAlertStyles_unstable = state => {
|
|
119
|
+
const inverted = state.appearance === 'inverted';
|
|
120
|
+
const styles = useStyles();
|
|
121
|
+
const intentIconStylesPrimary = useIntentIconStyles();
|
|
122
|
+
const intentIconStylesInverted = useIntentIconStylesInverted();
|
|
123
|
+
const actionStylesInverted = useActionButtonColorInverted();
|
|
124
|
+
state.root.className = mergeClasses(alertClassNames.root, styles.root, inverted && styles.inverted, state.root.className);
|
|
125
|
+
if (state.icon) {
|
|
126
|
+
state.icon.className = mergeClasses(alertClassNames.icon, styles.icon, state.intent && (inverted ? intentIconStylesInverted[state.intent] : intentIconStylesPrimary[state.intent]), state.icon.className);
|
|
127
|
+
}
|
|
128
|
+
if (state.avatar) {
|
|
129
|
+
state.avatar.className = mergeClasses(alertClassNames.avatar, styles.avatar, state.avatar.className);
|
|
130
|
+
}
|
|
131
|
+
if (state.action) {
|
|
132
|
+
// Note: inverted && actionStylesInverted.action has the highest piority and must be merged last
|
|
133
|
+
state.action.className = mergeClasses(alertClassNames.action, styles.action, inverted && actionStylesInverted.action, state.action.className);
|
|
134
|
+
}
|
|
135
|
+
return state;
|
|
136
|
+
};
|
|
137
|
+
//# sourceMappingURL=useAlertStyles.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["tokens","__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","alertClassNames","root","icon","action","avatar","useStyles","mc9l5x","Bt984gj","sshi5w","z8tnut","z189sj","Byoj8tv","uwmqm3","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","icvyot","vrafjx","oivjwe","wvpqe5","g2u3we","h3c5rm","B9xav0g","zhjwy3","E5pizo","Be2twd7","Bhrd7zp","sj55zd","De3pzq","inverted","Bqenvij","B6of3ja","t21cq0","jrapky","Frg6f3","Bf4jedk","d","useIntentIconStyles","success","error","warning","info","useIntentIconStylesInverted","useActionButtonColorInverted","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bfpq7zp","useAlertStyles_unstable","state","appearance","styles","intentIconStylesPrimary","intentIconStylesInverted","actionStylesInverted","className","intent"],"sources":["../../../src/components/Alert/useAlertStyles.styles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport type { AlertSlots, AlertState } from './Alert.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const alertClassNames: SlotClassNames<AlertSlots> = {\n root: 'fui-Alert',\n icon: 'fui-Alert__icon',\n action: 'fui-Alert__action',\n avatar: 'fui-Alert__avatar',\n};\n\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center',\n minHeight: '44px',\n ...shorthands.padding('0', '12px'),\n ...shorthands.borderRadius('4px'),\n ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n boxShadow: tokens.shadow8,\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightSemibold,\n color: tokens.colorNeutralForeground1,\n backgroundColor: tokens.colorNeutralBackground1,\n },\n inverted: {\n color: tokens.colorNeutralForegroundInverted2,\n backgroundColor: tokens.colorNeutralBackgroundInverted,\n },\n icon: {\n height: '16px',\n fontSize: '16px',\n ...shorthands.padding('0', '8px', '0', '0'),\n },\n avatar: {\n ...shorthands.margin('0', '8px', '0', '0'),\n },\n action: {\n ...shorthands.padding('5px', '10px'),\n minWidth: 0,\n marginLeft: 'auto',\n color: tokens.colorBrandForeground1,\n },\n});\n\nconst useIntentIconStyles = makeStyles({\n success: {\n color: tokens.colorPaletteGreenForeground3,\n },\n error: {\n color: tokens.colorPaletteRedForeground3,\n },\n warning: {\n color: tokens.colorPaletteYellowForeground2,\n },\n info: {\n color: tokens.colorNeutralForeground2,\n },\n});\n\nconst useIntentIconStylesInverted = makeStyles({\n success: {\n color: tokens.colorPaletteGreenForegroundInverted,\n },\n error: {\n color: tokens.colorPaletteRedForegroundInverted,\n },\n warning: {\n color: tokens.colorPaletteYellowForegroundInverted,\n },\n info: {\n color: tokens.colorNeutralForegroundInverted2,\n },\n});\n\nconst useActionButtonColorInverted = makeStyles({\n action: {\n color: tokens.colorBrandForegroundInverted,\n ...createCustomFocusIndicatorStyle(\n {\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n outlineColor: tokens.colorNeutralBackground5Pressed,\n },\n { enableOutline: true },\n ),\n },\n});\n\n/**\n * Apply styling to the Alert slots based on the state\n */\nexport const useAlertStyles_unstable = (state: AlertState): AlertState => {\n const inverted = state.appearance === 'inverted';\n const styles = useStyles();\n const intentIconStylesPrimary = useIntentIconStyles();\n const intentIconStylesInverted = useIntentIconStylesInverted();\n const actionStylesInverted = useActionButtonColorInverted();\n\n state.root.className = mergeClasses(\n alertClassNames.root,\n styles.root,\n inverted && styles.inverted,\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n alertClassNames.icon,\n styles.icon,\n state.intent && (inverted ? intentIconStylesInverted[state.intent] : intentIconStylesPrimary[state.intent]),\n state.icon.className,\n );\n }\n\n if (state.avatar) {\n state.avatar.className = mergeClasses(alertClassNames.avatar, styles.avatar, state.avatar.className);\n }\n\n if (state.action) {\n // Note: inverted && actionStylesInverted.action has the highest piority and must be merged last\n state.action.className = mergeClasses(\n alertClassNames.action,\n styles.action,\n inverted && actionStylesInverted.action,\n state.action.className,\n );\n }\n\n return state;\n};\n"],"mappings":"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"}
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["Alert","alertClassNames","renderAlert_unstable","useAlertStyles_unstable","useAlert_unstable"],"sources":["../src/index.ts"],"sourcesContent":["export { Alert, alertClassNames, renderAlert_unstable, useAlertStyles_unstable, useAlert_unstable } from './Alert';\nexport type { AlertProps, AlertSlots, AlertState } from './Alert';\n"],"mappings":"AAAA,SAASA,KAAK,EAAEC,eAAe,EAAEC,oBAAoB,EAAEC,uBAAuB,EAAEC,iBAAiB,QAAQ"}
|
package/lib-commonjs/Alert.js
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
|
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
|
|
3
|
+
value: true
|
|
5
4
|
});
|
|
5
|
+
const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
|
|
6
|
+
_exportStar(require("./components/Alert/index"), exports);
|
|
7
|
+
//# sourceMappingURL=Alert.js.map
|
|
6
8
|
|
|
7
|
-
const tslib_1 = /*#__PURE__*/require("tslib");
|
|
8
|
-
|
|
9
|
-
tslib_1.__exportStar(require("./components/Alert/index"), exports);
|
|
10
9
|
//# sourceMappingURL=Alert.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Alert.
|
|
1
|
+
{"version":3,"sources":["../lib/Alert.js"],"sourcesContent":["export * from './components/Alert/index';\n//# sourceMappingURL=Alert.js.map"],"names":[],"mappings":";;;;;oBAAc;CACd,iCAAiC"}
|
|
@@ -1,27 +1,21 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
|
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
|
|
3
|
+
value: true
|
|
5
4
|
});
|
|
6
|
-
exports
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
const renderAlert_1 = /*#__PURE__*/require("./renderAlert");
|
|
11
|
-
|
|
12
|
-
const useAlert_1 = /*#__PURE__*/require("./useAlert");
|
|
13
|
-
|
|
14
|
-
const useAlertStyles_1 = /*#__PURE__*/require("./useAlertStyles");
|
|
15
|
-
/**
|
|
16
|
-
* An Alert component displays a brief, important message to attract a user's attention
|
|
17
|
-
* without interrupting their current task.
|
|
18
|
-
*/
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
exports.Alert = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
22
|
-
const state = useAlert_1.useAlert_unstable(props, ref);
|
|
23
|
-
useAlertStyles_1.useAlertStyles_unstable(state);
|
|
24
|
-
return renderAlert_1.renderAlert_unstable(state);
|
|
5
|
+
Object.defineProperty(exports, "Alert", {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: ()=>Alert
|
|
25
8
|
});
|
|
26
|
-
|
|
9
|
+
const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
|
|
10
|
+
const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
|
|
11
|
+
const _renderAlert = require("./renderAlert");
|
|
12
|
+
const _useAlert = require("./useAlert");
|
|
13
|
+
const _useAlertStylesStyles = require("./useAlertStyles.styles");
|
|
14
|
+
const Alert = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
|
|
15
|
+
const state = (0, _useAlert.useAlert_unstable)(props, ref);
|
|
16
|
+
(0, _useAlertStylesStyles.useAlertStyles_unstable)(state);
|
|
17
|
+
return (0, _renderAlert.renderAlert_unstable)(state);
|
|
18
|
+
});
|
|
19
|
+
Alert.displayName = 'Alert'; //# sourceMappingURL=Alert.js.map
|
|
20
|
+
|
|
27
21
|
//# sourceMappingURL=Alert.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Alert/Alert.
|
|
1
|
+
{"version":3,"sources":["../../../lib/components/Alert/Alert.js"],"sourcesContent":["import * as React from 'react';\nimport { renderAlert_unstable } from './renderAlert';\nimport { useAlert_unstable } from './useAlert';\nimport { useAlertStyles_unstable } from './useAlertStyles.styles';\n/**\n * An Alert component displays a brief, important message to attract a user's attention\n * without interrupting their current task.\n */\nexport const Alert = /*#__PURE__*/React.forwardRef((props, ref) => {\n const state = useAlert_unstable(props, ref);\n useAlertStyles_unstable(state);\n return renderAlert_unstable(state);\n});\nAlert.displayName = 'Alert';\n//# sourceMappingURL=Alert.js.map"],"names":["Alert","React","forwardRef","props","ref","state","useAlert_unstable","useAlertStyles_unstable","renderAlert_unstable","displayName"],"mappings":";;;;+BAQaA;;aAAAA;;;6DARU;6BACc;0BACH;sCACM;AAKjC,MAAMA,QAAQ,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACjE,MAAMC,QAAQC,IAAAA,2BAAiB,EAACH,OAAOC;IACvCG,IAAAA,6CAAuB,EAACF;IACxB,OAAOG,IAAAA,iCAAoB,EAACH;AAC9B;AACAL,MAAMS,WAAW,GAAG,SACpB,iCAAiC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":[],"
|
|
1
|
+
{"version":3,"sources":["../../../lib/components/Alert/Alert.types.js"],"sourcesContent":["export {};\n//# sourceMappingURL=Alert.types.js.map"],"names":[],"mappings":";;;;CACA,uCAAuC"}
|
|
@@ -1,18 +1,13 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
|
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
|
|
3
|
+
value: true
|
|
5
4
|
});
|
|
5
|
+
const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
|
|
6
|
+
_exportStar(require("./Alert"), exports);
|
|
7
|
+
_exportStar(require("./Alert.types"), exports);
|
|
8
|
+
_exportStar(require("./renderAlert"), exports);
|
|
9
|
+
_exportStar(require("./useAlert"), exports);
|
|
10
|
+
_exportStar(require("./useAlertStyles.styles"), exports);
|
|
11
|
+
//# sourceMappingURL=index.js.map
|
|
6
12
|
|
|
7
|
-
const tslib_1 = /*#__PURE__*/require("tslib");
|
|
8
|
-
|
|
9
|
-
tslib_1.__exportStar(require("./Alert"), exports);
|
|
10
|
-
|
|
11
|
-
tslib_1.__exportStar(require("./Alert.types"), exports);
|
|
12
|
-
|
|
13
|
-
tslib_1.__exportStar(require("./renderAlert"), exports);
|
|
14
|
-
|
|
15
|
-
tslib_1.__exportStar(require("./useAlert"), exports);
|
|
16
|
-
|
|
17
|
-
tslib_1.__exportStar(require("./useAlertStyles"), exports);
|
|
18
13
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Alert/index.
|
|
1
|
+
{"version":3,"sources":["../../../lib/components/Alert/index.js"],"sourcesContent":["export * from './Alert';\nexport * from './Alert.types';\nexport * from './renderAlert';\nexport * from './useAlert';\nexport * from './useAlertStyles.styles';\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;CACd,iCAAiC"}
|
|
@@ -1,24 +1,16 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
1
|
+
/** @jsxRuntime classic */ /** @jsx createElement */ "use strict";
|
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
|
|
3
|
+
value: true
|
|
5
4
|
});
|
|
6
|
-
exports
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
const
|
|
11
|
-
|
|
12
|
-
const renderAlert_unstable = state
|
|
13
|
-
|
|
14
|
-
slots,
|
|
15
|
-
|
|
16
|
-
} = react_utilities_1.getSlots(state);
|
|
17
|
-
return React.createElement(slots.root, { ...slotProps.root
|
|
18
|
-
}, slots.icon && React.createElement(slots.icon, { ...slotProps.icon
|
|
19
|
-
}), slotProps.root.children, slots.action && React.createElement(slots.action, { ...slotProps.action
|
|
20
|
-
}));
|
|
21
|
-
};
|
|
5
|
+
Object.defineProperty(exports, "renderAlert_unstable", {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: ()=>renderAlert_unstable
|
|
8
|
+
});
|
|
9
|
+
const _reactJsxRuntime = require("@fluentui/react-jsx-runtime");
|
|
10
|
+
const _reactUtilities = require("@fluentui/react-utilities");
|
|
11
|
+
const renderAlert_unstable = (state)=>{
|
|
12
|
+
const { slots , slotProps } = (0, _reactUtilities.getSlotsNext)(state);
|
|
13
|
+
return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.root, slotProps.root, slots.icon && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.icon, slotProps.icon), slots.avatar && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.avatar, slotProps.avatar), slotProps.root.children, slots.action && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.action, slotProps.action));
|
|
14
|
+
}; //# sourceMappingURL=renderAlert.js.map
|
|
22
15
|
|
|
23
|
-
exports.renderAlert_unstable = renderAlert_unstable;
|
|
24
16
|
//# sourceMappingURL=renderAlert.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Alert/renderAlert.
|
|
1
|
+
{"version":3,"sources":["../../../lib/components/Alert/renderAlert.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nexport const renderAlert_unstable = state => {\n const {\n slots,\n slotProps\n } = getSlotsNext(state);\n return /*#__PURE__*/createElement(slots.root, slotProps.root, slots.icon && /*#__PURE__*/createElement(slots.icon, slotProps.icon), slots.avatar && /*#__PURE__*/createElement(slots.avatar, slotProps.avatar), slotProps.root.children, slots.action && /*#__PURE__*/createElement(slots.action, slotProps.action));\n};\n//# sourceMappingURL=renderAlert.js.map"],"names":["renderAlert_unstable","state","slots","slotProps","getSlotsNext","createElement","root","icon","avatar","children","action"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAErCA;;aAAAA;;iCAFqE;gCACrD;AACtB,MAAMA,uBAAuBC,CAAAA,QAAS;IAC3C,MAAM,EACJC,MAAK,EACLC,UAAS,EACV,GAAGC,IAAAA,4BAAY,EAACH;IACjB,OAAO,WAAW,GAAEI,IAAAA,8BAAa,EAACH,MAAMI,IAAI,EAAEH,UAAUG,IAAI,EAAEJ,MAAMK,IAAI,IAAI,WAAW,GAAEF,IAAAA,8BAAa,EAACH,MAAMK,IAAI,EAAEJ,UAAUI,IAAI,GAAGL,MAAMM,MAAM,IAAI,WAAW,GAAEH,IAAAA,8BAAa,EAACH,MAAMM,MAAM,EAAEL,UAAUK,MAAM,GAAGL,UAAUG,IAAI,CAACG,QAAQ,EAAEP,MAAMQ,MAAM,IAAI,WAAW,GAAEL,IAAAA,8BAAa,EAACH,MAAMQ,MAAM,EAAEP,UAAUO,MAAM;AACpT,GACA,uCAAuC"}
|