@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.
Files changed (41) hide show
  1. package/CHANGELOG.json +1588 -1
  2. package/CHANGELOG.md +545 -2
  3. package/README.md +1 -1
  4. package/dist/index.d.ts +11 -1
  5. package/lib/Alert.js.map +1 -1
  6. package/lib/components/Alert/Alert.js +1 -2
  7. package/lib/components/Alert/Alert.js.map +1 -1
  8. package/lib/components/Alert/Alert.types.js.map +1 -1
  9. package/lib/components/Alert/index.js +1 -1
  10. package/lib/components/Alert/index.js.map +1 -1
  11. package/lib/components/Alert/renderAlert.js +4 -7
  12. package/lib/components/Alert/renderAlert.js.map +1 -1
  13. package/lib/components/Alert/useAlert.js +29 -17
  14. package/lib/components/Alert/useAlert.js.map +1 -1
  15. package/lib/components/Alert/useAlertStyles.styles.js +137 -0
  16. package/lib/components/Alert/useAlertStyles.styles.js.map +1 -0
  17. package/lib/index.js.map +1 -1
  18. package/lib-commonjs/Alert.js +4 -5
  19. package/lib-commonjs/Alert.js.map +1 -1
  20. package/lib-commonjs/components/Alert/Alert.js +16 -22
  21. package/lib-commonjs/components/Alert/Alert.js.map +1 -1
  22. package/lib-commonjs/components/Alert/Alert.types.js +3 -2
  23. package/lib-commonjs/components/Alert/Alert.types.js.map +1 -1
  24. package/lib-commonjs/components/Alert/index.js +8 -13
  25. package/lib-commonjs/components/Alert/index.js.map +1 -1
  26. package/lib-commonjs/components/Alert/renderAlert.js +12 -20
  27. package/lib-commonjs/components/Alert/renderAlert.js.map +1 -1
  28. package/lib-commonjs/components/Alert/useAlert.js +66 -71
  29. package/lib-commonjs/components/Alert/useAlert.js.map +1 -1
  30. package/lib-commonjs/components/Alert/useAlertStyles.styles.js +278 -0
  31. package/lib-commonjs/components/Alert/useAlertStyles.styles.js.map +1 -0
  32. package/lib-commonjs/index.js +16 -35
  33. package/lib-commonjs/index.js.map +1 -1
  34. package/package.json +32 -18
  35. package/Migration.md +0 -0
  36. package/Spec.md +0 -95
  37. package/dist/tsdoc-metadata.json +0 -11
  38. package/lib/components/Alert/useAlertStyles.js +0 -88
  39. package/lib/components/Alert/useAlertStyles.js.map +0 -1
  40. package/lib-commonjs/components/Alert/useAlertStyles.js +0 -99
  41. package/lib-commonjs/components/Alert/useAlertStyles.js.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Alert/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,SAAS,oBAAT,QAAqC,eAArC;AACA,SAAS,iBAAT,QAAkC,YAAlC;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AAKA;;;AAGG;;AACH,OAAO,MAAM,KAAK,gBAAoC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpF,MAAM,KAAK,GAAG,iBAAiB,CAAC,KAAD,EAAQ,GAAR,CAA/B;EAEA,uBAAuB,CAAC,KAAD,CAAvB;EACA,OAAO,oBAAoB,CAAC,KAAD,CAA3B;AACD,CALqD,CAA/C;AAOP,KAAK,CAAC,WAAN,GAAoB,OAApB","sourcesContent":["import * as React from 'react';\n\nimport { renderAlert_unstable } from './renderAlert';\nimport { useAlert_unstable } from './useAlert';\nimport { useAlertStyles_unstable } from './useAlertStyles';\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"],"sourceRoot":"../src/"}
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,"file":"Alert.types.js","sourceRoot":"../src/","sources":["components/Alert/Alert.types.ts"],"names":[],"mappings":"","sourcesContent":["import { 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\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\n/**\n * State used in rendering Alert\n */\nexport type AlertState = ComponentState<AlertSlots> & Pick<AlertProps, 'intent'>;\n"]}
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"}
@@ -2,5 +2,5 @@ export * from './Alert';
2
2
  export * from './Alert.types';
3
3
  export * from './renderAlert';
4
4
  export * from './useAlert';
5
- export * from './useAlertStyles';
5
+ export * from './useAlertStyles.styles';
6
6
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Alert/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC","sourcesContent":["export * from './Alert';\nexport * from './Alert.types';\nexport * from './renderAlert';\nexport * from './useAlert';\nexport * from './useAlertStyles';\n"]}
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 * as React from 'react';
2
- import { getSlots } from '@fluentui/react-utilities';
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
- } = getSlots(state);
8
- return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
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,"sources":["components/Alert/renderAlert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,SAAS,QAAT,QAAyB,2BAAzB;AAIA,OAAO,MAAM,oBAAoB,GAAI,KAAD,IAAsB;EACxD,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAa,KAAb,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,IAAN,iBAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CADjB,EAEG,SAAS,CAAC,IAAV,CAAe,QAFlB,EAGG,KAAK,CAAC,MAAN,iBAAgB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;EAAf,CAAb,CAHnB,CADF;AAOD,CAVM","sourcesContent":["import * as React from 'react';\n\nimport { getSlots } from '@fluentui/react-utilities';\n\nimport type { AlertState, AlertSlots } from './Alert.types';\n\nexport const renderAlert_unstable = (state: AlertState) => {\n const { slots, slotProps } = getSlots<AlertSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n {slots.icon && <slots.icon {...slotProps.icon} />}\n {slotProps.root.children}\n {slots.action && <slots.action {...slotProps.action} />}\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
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
- children: defaultIcon
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,"sources":["components/Alert/useAlert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,SAAS,MAAT,QAAuB,wBAAvB;AACA,SAAS,qBAAT,EAAgC,mBAAhC,EAAqD,UAArD,EAAiE,aAAjE,QAAsF,uBAAtF;AACA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AAIA;;;;;;;;AAQG;;AACH,OAAO,MAAM,iBAAiB,GAAG,CAAC,KAAD,EAAoB,GAApB,KAA+D;EAC9F,MAAM;IAAE;EAAF,IAAa,KAAnB;EAEA;;EACA,IAAI,WAAJ;;EACA,QAAQ,MAAR;IACE,KAAK,SAAL;MACE,WAAW,gBAAG,KAAA,CAAA,aAAA,CAAC,qBAAD,EAAsB,IAAtB,CAAd;MACA;;IACF,KAAK,OAAL;MACE,WAAW,gBAAG,KAAA,CAAA,aAAA,CAAC,mBAAD,EAAoB,IAApB,CAAd;MACA;;IACF,KAAK,SAAL;MACE,WAAW,gBAAG,KAAA,CAAA,aAAA,CAAC,aAAD,EAAc,IAAd,CAAd;MACA;;IACF,KAAK,MAAL;MACE,WAAW,gBAAG,KAAA,CAAA,aAAA,CAAC,UAAD,EAAW,IAAX,CAAd;MACA;EAZJ;;EAeA,MAAM,IAAI,GAAG,gBAAgB,CAAC,KAAK,CAAC,IAAP,EAAa;IACxC,YAAY,EAAE;MACZ,QAAQ,EAAE;IADE,CAD0B;IAIxC,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC;EAJsB,CAAb,CAA7B;EAOA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,IAAI,EAAE,MAFI;MAGV,MAAM,EAAE;IAHE,CADP;IAML,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;MACjC,GADiC;MAEjC,QAAQ,EAAE,KAAK,CAAC,QAFiB;MAGjC,GAAG;IAH8B,CAAR,CANtB;IAWL,IAXK;IAYL,MAAM,EAAE,gBAAgB,CAAC,KAAK,CAAC,MAAP,CAZnB;IAaL;EAbK,CAAP;AAeD,CA1CM","sourcesContent":["import * as React from 'react';\n\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 { intent } = props;\n\n /** Determine the icon to render based on the intent */\n let defaultIcon;\n switch (intent) {\n case 'success':\n defaultIcon = <CheckmarkCircleFilled />;\n break;\n case 'error':\n defaultIcon = <DismissCircleFilled />;\n break;\n case 'warning':\n defaultIcon = <WarningFilled />;\n break;\n case 'info':\n defaultIcon = <InfoFilled />;\n break;\n }\n\n const icon = resolveShorthand(props.icon, {\n defaultProps: {\n children: defaultIcon,\n },\n required: !!props.intent,\n });\n\n return {\n components: {\n root: 'div',\n icon: 'span',\n action: Button,\n },\n root: getNativeElementProps('div', {\n ref,\n children: props.children,\n ...props,\n }),\n icon,\n action: resolveShorthand(props.action),\n intent,\n };\n};\n"],"sourceRoot":"../src/"}
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,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,eAAe,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC","sourcesContent":["export { Alert, alertClassNames, renderAlert_unstable, useAlertStyles_unstable, useAlert_unstable } from './Alert';\nexport type { AlertProps, AlertSlots, AlertState } from './Alert';\n"]}
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"}
@@ -1,10 +1,9 @@
1
1
  "use strict";
2
-
3
2
  Object.defineProperty(exports, "__esModule", {
4
- value: true
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.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,0BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Alert/index';\n"],"sourceRoot":"../src/"}
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
- value: true
3
+ value: true
5
4
  });
6
- exports.Alert = void 0;
7
-
8
- const React = /*#__PURE__*/require("react");
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
- exports.Alert.displayName = 'Alert';
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.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,MAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACA,MAAA,UAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;AAKA;;;AAGG;;;AACU,OAAA,CAAA,KAAA,gBAAyC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpF,MAAM,KAAK,GAAG,UAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,CAAd;EAEA,gBAAA,CAAA,uBAAA,CAAwB,KAAxB;EACA,OAAO,aAAA,CAAA,oBAAA,CAAqB,KAArB,CAAP;AACD,CALqD,CAAzC;AAOb,OAAA,CAAA,KAAA,CAAM,WAAN,GAAoB,OAApB","sourcesContent":["import * as React from 'react';\n\nimport { renderAlert_unstable } from './renderAlert';\nimport { useAlert_unstable } from './useAlert';\nimport { useAlertStyles_unstable } from './useAlertStyles';\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"],"sourceRoot":"../src/"}
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,6 +1,7 @@
1
1
  "use strict";
2
-
3
2
  Object.defineProperty(exports, "__esModule", {
4
- value: true
3
+ value: true
5
4
  });
5
+ //# sourceMappingURL=Alert.types.js.map
6
+
6
7
  //# sourceMappingURL=Alert.types.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}
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
- value: true
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.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,SAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,YAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Alert';\nexport * from './Alert.types';\nexport * from './renderAlert';\nexport * from './useAlert';\nexport * from './useAlertStyles';\n"],"sourceRoot":"../src/"}
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
- value: true
3
+ value: true
5
4
  });
6
- exports.renderAlert_unstable = void 0;
7
-
8
- const React = /*#__PURE__*/require("react");
9
-
10
- const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
11
-
12
- const renderAlert_unstable = state => {
13
- const {
14
- slots,
15
- slotProps
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.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAIO,MAAM,oBAAoB,GAAI,KAAD,IAAsB;EACxD,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAqB,KAArB,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,IAAN,IAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CADjB,EAEG,SAAS,CAAC,IAAV,CAAe,QAFlB,EAGG,KAAK,CAAC,MAAN,IAAgB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;EAAf,CAAb,CAHnB,CADF;AAOD,CAVM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","sourcesContent":["import * as React from 'react';\n\nimport { getSlots } from '@fluentui/react-utilities';\n\nimport type { AlertState, AlertSlots } from './Alert.types';\n\nexport const renderAlert_unstable = (state: AlertState) => {\n const { slots, slotProps } = getSlots<AlertSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n {slots.icon && <slots.icon {...slotProps.icon} />}\n {slotProps.root.children}\n {slots.action && <slots.action {...slotProps.action} />}\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
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"}