@veracity/vui 5.2.0-alpha.398622.2606110819 → 5.2.0

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 (72) hide show
  1. package/dist/badge/badge.d.ts.map +1 -1
  2. package/dist/badge/badge.js +1 -8
  3. package/dist/badge/badge.js.map +1 -1
  4. package/dist/button/buttonText.js +1 -1
  5. package/dist/button/buttons.d.ts +1 -2
  6. package/dist/button/buttons.d.ts.map +1 -1
  7. package/dist/button/buttons.js +5 -21
  8. package/dist/button/buttons.js.map +1 -1
  9. package/dist/button/index.d.ts +1 -1
  10. package/dist/dialog/dialogCloseButton.js +1 -1
  11. package/dist/dialog/dialogCloseButton.js.map +1 -1
  12. package/dist/dismissButton/DismissButton.d.ts +34 -0
  13. package/dist/dismissButton/DismissButton.d.ts.map +1 -0
  14. package/dist/dismissButton/DismissButton.js +69 -0
  15. package/dist/dismissButton/DismissButton.js.map +1 -0
  16. package/dist/dismissButton/index.d.ts +1 -0
  17. package/dist/dismissButton/theme.js +33 -0
  18. package/dist/dismissButton/theme.js.map +1 -0
  19. package/dist/header/loggedInHeader.js +1 -1
  20. package/dist/index.d.ts +6 -5
  21. package/dist/index.js +10 -9
  22. package/dist/notification/index.d.ts +1 -1
  23. package/dist/notification/notification.d.ts.map +1 -1
  24. package/dist/notification/notification.js +27 -6
  25. package/dist/notification/notification.js.map +1 -1
  26. package/dist/notification/notification.types.d.ts +26 -7
  27. package/dist/notification/notification.types.d.ts.map +1 -1
  28. package/dist/notification/notificationAction.d.ts.map +1 -1
  29. package/dist/notification/notificationAction.js +6 -1
  30. package/dist/notification/notificationAction.js.map +1 -1
  31. package/dist/notification/theme.js +25 -10
  32. package/dist/notification/theme.js.map +1 -1
  33. package/dist/notification/utils.js +39 -10
  34. package/dist/notification/utils.js.map +1 -1
  35. package/dist/range/index.d.ts +1 -1
  36. package/dist/range/range.d.ts.map +1 -1
  37. package/dist/range/range.js +93 -51
  38. package/dist/range/range.js.map +1 -1
  39. package/dist/range/range.types.d.ts +2 -3
  40. package/dist/range/range.types.d.ts.map +1 -1
  41. package/dist/range/theme.js +1 -5
  42. package/dist/range/theme.js.map +1 -1
  43. package/dist/stepIndicator/stepIndicator.js +1 -0
  44. package/dist/stepIndicator/stepIndicator.js.map +1 -1
  45. package/dist/tabs/tabsNavBar.js +2 -2
  46. package/dist/tabs/tabsNavBar.js.map +1 -1
  47. package/dist/tag/index.d.ts +1 -1
  48. package/dist/tag/tag.d.ts.map +1 -1
  49. package/dist/tag/tag.js +4 -4
  50. package/dist/tag/tag.js.map +1 -1
  51. package/dist/tag/tag.types.d.ts +9 -9
  52. package/dist/tag/tag.types.d.ts.map +1 -1
  53. package/dist/tag/theme.js +13 -33
  54. package/dist/tag/theme.js.map +1 -1
  55. package/dist/tag/utils.d.ts +7 -7
  56. package/dist/tag/utils.d.ts.map +1 -1
  57. package/dist/tag/utils.js +8 -8
  58. package/dist/tag/utils.js.map +1 -1
  59. package/dist/theme/components.d.ts +33 -16
  60. package/dist/theme/components.js +88 -86
  61. package/dist/theme/components.js.map +1 -1
  62. package/dist/theme/defaultTheme.d.ts +33 -16
  63. package/dist/theme/types.d.ts +3 -1
  64. package/dist/theme/types.d.ts.map +1 -1
  65. package/dist/toast/useToast.d.ts.map +1 -1
  66. package/dist/toast/useToast.js +2 -0
  67. package/dist/toast/useToast.js.map +1 -1
  68. package/dist/tutorial/tutorialCard.js +2 -1
  69. package/dist/tutorial/tutorialCard.js.map +1 -1
  70. package/package.json +5 -3
  71. package/skills/build-with-vui/SKILL.md +1 -1
  72. package/skills/upgrade-vui-v4-to-v5/SKILL.md +8 -7
@@ -1 +1 @@
1
- {"version":3,"file":"badge.d.ts","names":[],"sources":["../../src/badge/badge.tsx"],"mappings":";;;cA2Ba,KAAA,EAAK,YAAA,SAAA,UAAA"}
1
+ {"version":3,"file":"badge.d.ts","names":[],"sources":["../../src/badge/badge.tsx"],"mappings":";;;cAmBa,KAAA,EAAK,YAAA,SAAA,UAAA"}
@@ -14,13 +14,6 @@ import { jsx } from "react/jsx-runtime";
14
14
  * Use `icon` to place an icon on the leading side of the label.
15
15
  * Badge fully delegates theming to Tag.
16
16
  */
17
- const COLOR_TO_INTENT = {
18
- green: "success",
19
- yellow: "warning",
20
- red: "danger",
21
- blue: "brand",
22
- grey: "grey"
23
- };
24
17
  const HIERARCHY = ["subtle", "solid"];
25
18
  const Badge = vui((props, ref) => {
26
19
  const { variant: variantProp, color, icon, iconLeft, label, text, ...rest } = props;
@@ -36,7 +29,7 @@ const Badge = vui((props, ref) => {
36
29
  return /* @__PURE__ */ jsx(Tag, {
37
30
  borderRadius: "9999px",
38
31
  className: "vui-badge",
39
- intent: COLOR_TO_INTENT[color ?? "grey"] ?? "grey",
32
+ color: color ?? "grey",
40
33
  isInteractive: false,
41
34
  minW: "20px",
42
35
  ref,
@@ -1 +1 @@
1
- {"version":3,"file":"badge.js","names":[],"sources":["../../src/badge/badge.tsx"],"sourcesContent":["import { useEffect } from 'react'\n\nimport { vui } from '../core'\nimport { Tag } from '../tag'\nimport type { BadgeProps } from './badge.types'\n\n/**\n * Badge is a non-interactive, pill-shaped alias of {@link Tag}.\n *\n * Appearance is controlled by two props:\n * - `variant`: `'subtle' | 'solid'`\n * - `color`: `'grey' | 'green' | 'yellow' | 'red' | 'blue'`\n *\n * Use `icon` to place an icon on the leading side of the label.\n * Badge fully delegates theming to Tag.\n */\n\nconst COLOR_TO_INTENT: Record<string, string> = {\n green: 'success',\n yellow: 'warning',\n red: 'danger',\n blue: 'brand',\n grey: 'grey',\n}\n\nconst HIERARCHY = ['subtle', 'solid'] as const\n\nexport const Badge = vui<'span', BadgeProps>((props, ref) => {\n const { variant: variantProp, color, icon, iconLeft, label, text, ...rest } = props\n\n useEffect(() => {\n if (process.env.NODE_ENV !== 'production' && iconLeft !== undefined) {\n console.warn('[Badge] `iconLeft` is deprecated. Use `icon` instead.')\n }\n }, [iconLeft])\n\n useEffect(() => {\n if (process.env.NODE_ENV !== 'production' && text !== undefined) {\n console.warn('[Badge] `text` is deprecated. Use `label` instead.')\n }\n }, [text])\n\n const resolvedIcon = icon ?? iconLeft\n const resolvedLabel = label ?? text\n const hierarchy = (HIERARCHY as readonly string[]).includes(variantProp ?? '') ? variantProp : 'subtle'\n const intent = COLOR_TO_INTENT[color ?? 'grey'] ?? 'grey'\n\n return (\n <Tag\n borderRadius=\"9999px\"\n className=\"vui-badge\"\n intent={intent}\n isInteractive={false}\n minW=\"20px\"\n ref={ref}\n startIcon={resolvedIcon}\n text={resolvedLabel}\n variant={hierarchy as 'subtle' | 'solid'}\n {...rest}\n onDelete={undefined}\n />\n )\n})\n\nBadge.displayName = 'Badge'\nexport default Badge\n"],"mappings":";;;;;;;;;;;;;;;;AAiBA,MAAM,kBAA0C;CAC9C,OAAO;CACP,QAAQ;CACR,KAAK;CACL,MAAM;CACN,MAAM;AACR;AAEA,MAAM,YAAY,CAAC,UAAU,OAAO;AAEpC,MAAa,QAAQ,KAAyB,OAAO,QAAQ;CAC3D,MAAM,EAAE,SAAS,aAAa,OAAO,MAAM,UAAU,OAAO,MAAM,GAAG,SAAS;CAE9E,gBAAgB;EACd,IAA6C,aAAa,QACxD,QAAQ,KAAK,uDAAuD;CAExE,GAAG,CAAC,QAAQ,CAAC;CAEb,gBAAgB;EACd,IAA6C,SAAS,QACpD,QAAQ,KAAK,oDAAoD;CAErE,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,eAAe,QAAQ;CAC7B,MAAM,gBAAgB,SAAS;CAC/B,MAAM,YAAa,UAAgC,SAAS,eAAe,EAAE,IAAI,cAAc;CAG/F,OACE,oBAAC,KAAD;EACE,cAAa;EACb,WAAU;EACV,QANW,gBAAgB,SAAS,WAAW;EAO/C,eAAe;EACf,MAAK;EACA;EACL,WAAW;EACX,MAAM;EACN,SAAS;EACT,GAAI;EACJ,UAAU;CACX;AAEL,CAAC;AAED,MAAM,cAAc"}
1
+ {"version":3,"file":"badge.js","names":[],"sources":["../../src/badge/badge.tsx"],"sourcesContent":["import { useEffect } from 'react'\n\nimport { vui } from '../core'\nimport { Tag } from '../tag'\nimport type { BadgeProps } from './badge.types'\n\n/**\n * Badge is a non-interactive, pill-shaped alias of {@link Tag}.\n *\n * Appearance is controlled by two props:\n * - `variant`: `'subtle' | 'solid'`\n * - `color`: `'grey' | 'green' | 'yellow' | 'red' | 'blue'`\n *\n * Use `icon` to place an icon on the leading side of the label.\n * Badge fully delegates theming to Tag.\n */\n\nconst HIERARCHY = ['subtle', 'solid'] as const\n\nexport const Badge = vui<'span', BadgeProps>((props, ref) => {\n const { variant: variantProp, color, icon, iconLeft, label, text, ...rest } = props\n\n useEffect(() => {\n if (process.env.NODE_ENV !== 'production' && iconLeft !== undefined) {\n console.warn('[Badge] `iconLeft` is deprecated. Use `icon` instead.')\n }\n }, [iconLeft])\n\n useEffect(() => {\n if (process.env.NODE_ENV !== 'production' && text !== undefined) {\n console.warn('[Badge] `text` is deprecated. Use `label` instead.')\n }\n }, [text])\n\n const resolvedIcon = icon ?? iconLeft\n const resolvedLabel = label ?? text\n const hierarchy = (HIERARCHY as readonly string[]).includes(variantProp ?? '') ? variantProp : 'subtle'\n\n return (\n <Tag\n borderRadius=\"9999px\"\n className=\"vui-badge\"\n color={color ?? 'grey'}\n isInteractive={false}\n minW=\"20px\"\n ref={ref}\n startIcon={resolvedIcon}\n text={resolvedLabel}\n variant={hierarchy as 'subtle' | 'solid'}\n {...rest}\n onDelete={undefined}\n />\n )\n})\n\nBadge.displayName = 'Badge'\nexport default Badge\n"],"mappings":";;;;;;;;;;;;;;;;AAiBA,MAAM,YAAY,CAAC,UAAU,OAAO;AAEpC,MAAa,QAAQ,KAAyB,OAAO,QAAQ;CAC3D,MAAM,EAAE,SAAS,aAAa,OAAO,MAAM,UAAU,OAAO,MAAM,GAAG,SAAS;CAE9E,gBAAgB;EACd,IAA6C,aAAa,QACxD,QAAQ,KAAK,uDAAuD;CAExE,GAAG,CAAC,QAAQ,CAAC;CAEb,gBAAgB;EACd,IAA6C,SAAS,QACpD,QAAQ,KAAK,oDAAoD;CAErE,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,eAAe,QAAQ;CAC7B,MAAM,gBAAgB,SAAS;CAC/B,MAAM,YAAa,UAAgC,SAAS,eAAe,EAAE,IAAI,cAAc;CAE/F,OACE,oBAAC,KAAD;EACE,cAAa;EACb,WAAU;EACV,OAAO,SAAS;EAChB,eAAe;EACf,MAAK;EACA;EACL,WAAW;EACX,MAAM;EACN,SAAS;EACT,GAAI;EACJ,UAAU;CACX;AAEL,CAAC;AAED,MAAM,cAAc"}
@@ -1,8 +1,8 @@
1
1
  import { cs } from "../utils/styles.js";
2
2
  import { useStyleConfig } from "../core/theme.js";
3
3
  import vui from "../core/vui.js";
4
- import { useButtonContext } from "./context.js";
5
4
  import T from "../t/t.js";
5
+ import { useButtonContext } from "./context.js";
6
6
  import { jsx } from "react/jsx-runtime";
7
7
 
8
8
  //#region src/button/buttonText.tsx
@@ -4,7 +4,6 @@ import { ButtonProps, IconButtonProps } from "./button.types.js";
4
4
  declare const AppButton: VuiComponent<"button", ButtonProps>;
5
5
  declare const IconButton: VuiComponent<"button", IconButtonProps>;
6
6
  declare const BackButton: VuiComponent<"button", IconButtonProps>;
7
- declare const DismissButton: VuiComponent<"button", IconButtonProps>;
8
7
  /** @deprecated Renamed to `DismissButton`. Will be removed in VUI 6. */
9
8
  declare const CloseButton: VuiComponent<"button", IconButtonProps>;
10
9
  declare const CTAButton: VuiComponent<"button", ButtonProps>;
@@ -12,6 +11,6 @@ declare const DangerButton: VuiComponent<"button", ButtonProps>;
12
11
  declare const LineButton: VuiComponent<"button", ButtonProps>;
13
12
  declare const TextButton: VuiComponent<"button", ButtonProps>;
14
13
  //#endregion
15
- export { AppButton, BackButton, CTAButton, CloseButton, DangerButton, DismissButton, IconButton, LineButton, TextButton };
14
+ export { AppButton, BackButton, CTAButton, CloseButton, DangerButton, IconButton, LineButton, TextButton };
16
15
 
17
16
  //# sourceMappingURL=buttons.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"buttons.d.ts","names":[],"sources":["../../src/button/buttons.tsx"],"mappings":";;;cAMa,SAAA,EAAS,YAAA,WAAA,WAAA;AAAA,cAIT,UAAA,EAAU,YAAA,WAAA,eAAA;AAAA,cAKV,UAAA,EAAU,YAAA,WAAA,eAAA;AAAA,cAmBV,aAAA,EAAa,YAAA,WAAA,eAAA;AA5B1B;AAAA,cAkCa,WAAA,EAAW,YAAA,WAAA,eAAA;AAAA,cAUX,SAAA,EAAS,YAAA,WAAA,WAAA;AAAA,cAKT,YAAA,EAAY,YAAA,WAAA,WAAA;AAAA,cAKZ,UAAA,EAAU,YAAA,WAAA,WAAA;AAAA,cAKV,UAAA,EAAU,YAAA,WAAA,WAAA"}
1
+ {"version":3,"file":"buttons.d.ts","names":[],"sources":["../../src/button/buttons.tsx"],"mappings":";;;cAOa,SAAA,EAAS,YAAA,WAAA,WAAA;AAAA,cAIT,UAAA,EAAU,YAAA,WAAA,eAAA;AAAA,cAKV,UAAA,EAAU,YAAA,WAAA,eAAA;;cAMV,WAAA,EAAW,YAAA,WAAA,eAAA;AAAA,cAaX,SAAA,EAAS,YAAA,WAAA,WAAA;AAAA,cAKT,YAAA,EAAY,YAAA,WAAA,WAAA;AAAA,cAKZ,UAAA,EAAU,YAAA,WAAA,WAAA;AAAA,cAKV,UAAA,EAAU,YAAA,WAAA,WAAA"}
@@ -1,5 +1,5 @@
1
- import styled from "../core/styled.js";
2
1
  import vui from "../core/vui.js";
2
+ import { DismissButton } from "../dismissButton/DismissButton.js";
3
3
  import Button from "./button.js";
4
4
  import { useEffect } from "react";
5
5
  import { jsx } from "react/jsx-runtime";
@@ -24,32 +24,16 @@ const BackButton = vui((props, ref) => /* @__PURE__ */ jsx(IconButton, {
24
24
  ...props
25
25
  }));
26
26
  BackButton.displayName = "BackButton";
27
- const DismissButtonBase = styled(IconButton)`
28
- --vui-button-border-color: transparent;
29
-
30
- --vui-button-color: var(--vui-dismiss-text, var(--vui-dismiss-fg, var(--vui-feedback-neutral-solid)));
31
- --vui-button-hover-color: var(--vui-dismiss-text, var(--vui-dismiss-fg, var(--vui-feedback-neutral-solid)));
32
- --vui-button-active-color: var(--vui-dismiss-text, var(--vui-dismiss-fg, var(--vui-feedback-neutral-solid)));
33
-
34
- --vui-button-hover-bg: color-mix(in srgb, var(--vui-dismiss-fg, var(--vui-feedback-neutral-solid)) 20%, transparent);
35
- --vui-button-active-bg: color-mix(in srgb, var(--vui-dismiss-fg, var(--vui-feedback-neutral-solid)) 10%, transparent);
36
- `;
37
- const DismissButton = vui((props, ref) => /* @__PURE__ */ jsx(DismissButtonBase, {
38
- "aria-label": "Dismiss",
39
- startIcon: "uiTimes",
40
- ref,
41
- variant: "tertiary",
42
- ...props
43
- }));
44
- DismissButton.displayName = "DismissButton";
45
27
  /** @deprecated Renamed to `DismissButton`. Will be removed in VUI 6. */
46
28
  const CloseButton = vui((props, ref) => {
47
29
  useEffect(() => {
48
30
  console.warn("[VUI] `CloseButton` is deprecated. Use `DismissButton` instead. Will be removed in VUI 6.");
49
31
  }, []);
32
+ const { size, ...restProps } = props;
50
33
  return /* @__PURE__ */ jsx(DismissButton, {
51
34
  ref,
52
- ...props
35
+ size: size === "xl" ? "lg" : size,
36
+ ...restProps
53
37
  });
54
38
  });
55
39
  CloseButton.displayName = "CloseButton";
@@ -81,6 +65,6 @@ const TextButton = vui((props, ref) => /* @__PURE__ */ jsx(Button, {
81
65
  TextButton.displayName = "TextButton";
82
66
 
83
67
  //#endregion
84
- export { AppButton, BackButton, CTAButton, CloseButton, DangerButton, DismissButton, IconButton, LineButton, TextButton };
68
+ export { AppButton, BackButton, CTAButton, CloseButton, DangerButton, IconButton, LineButton, TextButton };
85
69
  globalThis.__vuiVersion__ = "5.2.0"
86
70
  //# sourceMappingURL=buttons.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"buttons.js","names":[],"sources":["../../src/button/buttons.tsx"],"sourcesContent":["import { useEffect } from 'react'\n\nimport { styled, vui } from '../core'\nimport Button from './button'\nimport type { ButtonProps, IconButtonProps } from './button.types'\n\nexport const AppButton = vui<'button', ButtonProps>((props, ref) => <Button ref={ref} variant=\"primary\" {...props} />)\nAppButton.displayName = 'AppButton'\n\n// Declared before DismissButton so styled(IconButton) can reference it at module-eval time.\nexport const IconButton = vui<'button', IconButtonProps>((props, ref) => (\n <Button ref={ref} variant=\"secondary\" {...props} />\n))\nIconButton.displayName = 'IconButton'\n\nexport const BackButton = vui<'button', IconButtonProps>((props, ref) => (\n <IconButton startIcon=\"uiArrowLeft\" ref={ref} variant=\"tertiary\" {...props} />\n))\nBackButton.displayName = 'BackButton'\n\n// Styled wrapper that injects dismiss-specific CSS variable defaults as a class rule.\n// --vui-dismiss-fg is read via CSS inheritance from any ancestor that sets it.\n// --vui-dismiss-text lets consumers override icon color only, without affecting bg tints.\nconst DismissButtonBase = styled(IconButton)`\n --vui-button-border-color: transparent;\n\n --vui-button-color: var(--vui-dismiss-text, var(--vui-dismiss-fg, var(--vui-feedback-neutral-solid)));\n --vui-button-hover-color: var(--vui-dismiss-text, var(--vui-dismiss-fg, var(--vui-feedback-neutral-solid)));\n --vui-button-active-color: var(--vui-dismiss-text, var(--vui-dismiss-fg, var(--vui-feedback-neutral-solid)));\n\n --vui-button-hover-bg: color-mix(in srgb, var(--vui-dismiss-fg, var(--vui-feedback-neutral-solid)) 20%, transparent);\n --vui-button-active-bg: color-mix(in srgb, var(--vui-dismiss-fg, var(--vui-feedback-neutral-solid)) 10%, transparent);\n`\n\nexport const DismissButton = vui<'button', IconButtonProps>((props, ref) => (\n <DismissButtonBase aria-label=\"Dismiss\" startIcon=\"uiTimes\" ref={ref} variant=\"tertiary\" {...props} />\n))\nDismissButton.displayName = 'DismissButton'\n\n/** @deprecated Renamed to `DismissButton`. Will be removed in VUI 6. */\nexport const CloseButton = vui<'button', IconButtonProps>((props, ref) => {\n useEffect(() => {\n if (process.env.NODE_ENV !== 'production') {\n console.warn('[VUI] `CloseButton` is deprecated. Use `DismissButton` instead. Will be removed in VUI 6.')\n }\n }, [])\n return <DismissButton ref={ref} {...props} />\n})\nCloseButton.displayName = 'CloseButton'\n\nexport const CTAButton = vui<'button', ButtonProps>((props, ref) => (\n <Button ref={ref} variant=\"primary\" intent=\"success\" {...props} />\n))\nCTAButton.displayName = 'CTAButton'\n\nexport const DangerButton = vui<'button', ButtonProps>((props, ref) => (\n <Button ref={ref} variant=\"primary\" intent=\"danger\" {...props} />\n))\nDangerButton.displayName = 'DangerButton'\n\nexport const LineButton = vui<'button', ButtonProps>((props, ref) => (\n <Button ref={ref} variant=\"secondary\" {...props} />\n))\nLineButton.displayName = 'LineButton'\n\nexport const TextButton = vui<'button', ButtonProps>((props, ref) => <Button ref={ref} variant=\"tertiary\" {...props} />)\nTextButton.displayName = 'TextButton'\n"],"mappings":";;;;;;;AAMA,MAAa,YAAY,KAA4B,OAAO,QAAQ,oBAAC,QAAD;CAAa;CAAK,SAAQ;CAAU,GAAI;AAAQ,EAAC;AACrH,UAAU,cAAc;AAGxB,MAAa,aAAa,KAAgC,OAAO,QAC/D,oBAAC,QAAD;CAAa;CAAK,SAAQ;CAAY,GAAI;AAAQ,EACnD;AACD,WAAW,cAAc;AAEzB,MAAa,aAAa,KAAgC,OAAO,QAC/D,oBAAC,YAAD;CAAY,WAAU;CAAmB;CAAK,SAAQ;CAAW,GAAI;AAAQ,EAC9E;AACD,WAAW,cAAc;AAKzB,MAAM,oBAAoB,OAAO,UAAU,CAAC;;;;;;;;;;AAW5C,MAAa,gBAAgB,KAAgC,OAAO,QAClE,oBAAC,mBAAD;CAAmB,cAAW;CAAU,WAAU;CAAe;CAAK,SAAQ;CAAW,GAAI;AAAQ,EACtG;AACD,cAAc,cAAc;;AAG5B,MAAa,cAAc,KAAgC,OAAO,QAAQ;CACxE,gBAAgB;EAEZ,QAAQ,KAAK,2FAA2F;CAE5G,GAAG,CAAC,CAAC;CACL,OAAO,oBAAC,eAAD;EAAoB;EAAK,GAAI;CAAQ;AAC9C,CAAC;AACD,YAAY,cAAc;AAE1B,MAAa,YAAY,KAA4B,OAAO,QAC1D,oBAAC,QAAD;CAAa;CAAK,SAAQ;CAAU,QAAO;CAAU,GAAI;AAAQ,EAClE;AACD,UAAU,cAAc;AAExB,MAAa,eAAe,KAA4B,OAAO,QAC7D,oBAAC,QAAD;CAAa;CAAK,SAAQ;CAAU,QAAO;CAAS,GAAI;AAAQ,EACjE;AACD,aAAa,cAAc;AAE3B,MAAa,aAAa,KAA4B,OAAO,QAC3D,oBAAC,QAAD;CAAa;CAAK,SAAQ;CAAY,GAAI;AAAQ,EACnD;AACD,WAAW,cAAc;AAEzB,MAAa,aAAa,KAA4B,OAAO,QAAQ,oBAAC,QAAD;CAAa;CAAK,SAAQ;CAAW,GAAI;AAAQ,EAAC;AACvH,WAAW,cAAc"}
1
+ {"version":3,"file":"buttons.js","names":[],"sources":["../../src/button/buttons.tsx"],"sourcesContent":["import { useEffect } from 'react'\n\nimport { vui } from '../core'\nimport { DismissButton } from '../dismissButton'\nimport Button from './button'\nimport type { ButtonProps, IconButtonProps } from './button.types'\n\nexport const AppButton = vui<'button', ButtonProps>((props, ref) => <Button ref={ref} variant=\"primary\" {...props} />)\nAppButton.displayName = 'AppButton'\n\n// Declared before DismissButton so styled(IconButton) can reference it at module-eval time.\nexport const IconButton = vui<'button', IconButtonProps>((props, ref) => (\n <Button ref={ref} variant=\"secondary\" {...props} />\n))\nIconButton.displayName = 'IconButton'\n\nexport const BackButton = vui<'button', IconButtonProps>((props, ref) => (\n <IconButton startIcon=\"uiArrowLeft\" ref={ref} variant=\"tertiary\" {...props} />\n))\nBackButton.displayName = 'BackButton'\n\n/** @deprecated Renamed to `DismissButton`. Will be removed in VUI 6. */\nexport const CloseButton = vui<'button', IconButtonProps>((props, ref) => {\n useEffect(() => {\n if (process.env.NODE_ENV !== 'production') {\n console.warn('[VUI] `CloseButton` is deprecated. Use `DismissButton` instead. Will be removed in VUI 6.')\n }\n }, [])\n // Map unsupported sizes to DismissButton sizes\n const { size, ...restProps } = props\n const dismissSize = size === 'xl' ? 'lg' : size\n return <DismissButton ref={ref} size={dismissSize} {...restProps} />\n})\nCloseButton.displayName = 'CloseButton'\n\nexport const CTAButton = vui<'button', ButtonProps>((props, ref) => (\n <Button ref={ref} variant=\"primary\" intent=\"success\" {...props} />\n))\nCTAButton.displayName = 'CTAButton'\n\nexport const DangerButton = vui<'button', ButtonProps>((props, ref) => (\n <Button ref={ref} variant=\"primary\" intent=\"danger\" {...props} />\n))\nDangerButton.displayName = 'DangerButton'\n\nexport const LineButton = vui<'button', ButtonProps>((props, ref) => (\n <Button ref={ref} variant=\"secondary\" {...props} />\n))\nLineButton.displayName = 'LineButton'\n\nexport const TextButton = vui<'button', ButtonProps>((props, ref) => <Button ref={ref} variant=\"tertiary\" {...props} />)\nTextButton.displayName = 'TextButton'\n"],"mappings":";;;;;;;AAOA,MAAa,YAAY,KAA4B,OAAO,QAAQ,oBAAC,QAAD;CAAa;CAAK,SAAQ;CAAU,GAAI;AAAQ,EAAC;AACrH,UAAU,cAAc;AAGxB,MAAa,aAAa,KAAgC,OAAO,QAC/D,oBAAC,QAAD;CAAa;CAAK,SAAQ;CAAY,GAAI;AAAQ,EACnD;AACD,WAAW,cAAc;AAEzB,MAAa,aAAa,KAAgC,OAAO,QAC/D,oBAAC,YAAD;CAAY,WAAU;CAAmB;CAAK,SAAQ;CAAW,GAAI;AAAQ,EAC9E;AACD,WAAW,cAAc;;AAGzB,MAAa,cAAc,KAAgC,OAAO,QAAQ;CACxE,gBAAgB;EAEZ,QAAQ,KAAK,2FAA2F;CAE5G,GAAG,CAAC,CAAC;CAEL,MAAM,EAAE,MAAM,GAAG,cAAc;CAE/B,OAAO,oBAAC,eAAD;EAAoB;EAAK,MADZ,SAAS,OAAO,OAAO;EACQ,GAAI;CAAY;AACrE,CAAC;AACD,YAAY,cAAc;AAE1B,MAAa,YAAY,KAA4B,OAAO,QAC1D,oBAAC,QAAD;CAAa;CAAK,SAAQ;CAAU,QAAO;CAAU,GAAI;AAAQ,EAClE;AACD,UAAU,cAAc;AAExB,MAAa,eAAe,KAA4B,OAAO,QAC7D,oBAAC,QAAD;CAAa;CAAK,SAAQ;CAAU,QAAO;CAAS,GAAI;AAAQ,EACjE;AACD,aAAa,cAAc;AAE3B,MAAa,aAAa,KAA4B,OAAO,QAC3D,oBAAC,QAAD;CAAa;CAAK,SAAQ;CAAY,GAAI;AAAQ,EACnD;AACD,WAAW,cAAc;AAEzB,MAAa,aAAa,KAA4B,OAAO,QAAQ,oBAAC,QAAD;CAAa;CAAK,SAAQ;CAAW,GAAI;AAAQ,EAAC;AACvH,WAAW,cAAc"}
@@ -2,6 +2,6 @@ import { ButtonComputedOptions, ButtonComputedStyles, ButtonIntent, ButtonProps,
2
2
  import { ButtonIcon } from "./buttonIcon.js";
3
3
  import { ButtonText } from "./buttonText.js";
4
4
  import { Button, ButtonBase } from "./button.js";
5
- import { AppButton, BackButton, CTAButton, CloseButton, DangerButton, DismissButton, IconButton, LineButton, TextButton } from "./buttons.js";
5
+ import { AppButton, BackButton, CTAButton, CloseButton, DangerButton, IconButton, LineButton, TextButton } from "./buttons.js";
6
6
  import { ButtonContextValue, ButtonProvider, useButtonContext } from "./context.js";
7
7
  import { resolveVariantKey } from "./utils.js";
@@ -2,7 +2,7 @@ import { cs } from "../utils/styles.js";
2
2
  import { useStyleConfig } from "../core/theme.js";
3
3
  import styled from "../core/styled.js";
4
4
  import vui from "../core/vui.js";
5
- import { DismissButton } from "../button/buttons.js";
5
+ import { DismissButton } from "../dismissButton/DismissButton.js";
6
6
  import { useDialogContext } from "./context.js";
7
7
  import { jsx } from "react/jsx-runtime";
8
8
 
@@ -1 +1 @@
1
- {"version":3,"file":"dialogCloseButton.js","names":[],"sources":["../../src/dialog/dialogCloseButton.tsx"],"sourcesContent":["import { DismissButton } from '../button'\nimport { styled, useStyleConfig, vui } from '../core'\n\nconst StyledDismissButton = styled(DismissButton)<{ $dismissFg?: string }>`\n ${({ $dismissFg }) => $dismissFg && `--vui-dismiss-fg: ${$dismissFg};`}\n`\nimport { cs } from '../utils'\nimport { useDialogContext } from './context'\nimport type { DialogCloseButtonProps } from './dialog.types'\n\n/** Shows a CloseButton in the Dialog Header, which by default closes the Dialog. */\nexport const DialogCloseButton = vui<'button', DialogCloseButtonProps>((props, ref) => {\n const { className, size = 'md', ...rest } = props\n const { onClose } = useDialogContext() ?? {}\n const styles = useStyleConfig('Dialog', useDialogContext())\n\n return (\n <StyledDismissButton\n className={cs('vui-dialogCloseButton', className)}\n onClick={onClose}\n position=\"absolute\"\n ref={ref}\n right={16}\n size={size}\n top={16}\n $dismissFg={styles.closeButton?.['--vui-dismiss-fg']}\n {...styles.closeButton}\n {...rest}\n />\n )\n})\n\nDialogCloseButton.displayName = 'DialogCloseButton'\n\nexport default DialogCloseButton\n"],"mappings":";;;;;;;;;AAGA,MAAM,sBAAsB,OAAO,aAAa,CAAC,AAAyB;KACrE,EAAE,iBAAiB,cAAc,qBAAqB,WAAW,GAAG;;;AAOzE,MAAa,oBAAoB,KAAuC,OAAO,QAAQ;CACrF,MAAM,EAAE,WAAW,OAAO,MAAM,GAAG,SAAS;CAC5C,MAAM,EAAE,YAAY,iBAAiB,KAAK,CAAC;CAC3C,MAAM,SAAS,eAAe,UAAU,iBAAiB,CAAC;CAE1D,OACE,oBAAC,qBAAD;EACE,WAAW,GAAG,yBAAyB,SAAS;EAChD,SAAS;EACT,UAAS;EACJ;EACL,OAAO;EACD;EACN,KAAK;EACL,YAAY,OAAO,cAAc;EACjC,GAAI,OAAO;EACX,GAAI;CACL;AAEL,CAAC;AAED,kBAAkB,cAAc"}
1
+ {"version":3,"file":"dialogCloseButton.js","names":[],"sources":["../../src/dialog/dialogCloseButton.tsx"],"sourcesContent":["import { styled, useStyleConfig, vui } from '../core'\nimport { DismissButton } from '../dismissButton'\nimport { cs } from '../utils'\nimport { useDialogContext } from './context'\nimport type { DialogCloseButtonProps } from './dialog.types'\n\nconst StyledDismissButton = styled(DismissButton)<{ $dismissFg?: string }>`\n ${({ $dismissFg }) => $dismissFg && `--vui-dismiss-fg: ${$dismissFg};`}\n`\n\n/** Shows a CloseButton in the Dialog Header, which by default closes the Dialog. */\nexport const DialogCloseButton = vui<'button', DialogCloseButtonProps>((props, ref) => {\n const { className, size = 'md', ...rest } = props\n const { onClose } = useDialogContext() ?? {}\n const styles = useStyleConfig('Dialog', useDialogContext())\n\n return (\n <StyledDismissButton\n className={cs('vui-dialogCloseButton', className)}\n onClick={onClose}\n position=\"absolute\"\n ref={ref}\n right={16}\n size={size}\n top={16}\n $dismissFg={styles.closeButton?.['--vui-dismiss-fg']}\n {...styles.closeButton}\n {...rest}\n />\n )\n})\n\nDialogCloseButton.displayName = 'DialogCloseButton'\n\nexport default DialogCloseButton\n"],"mappings":";;;;;;;;;AAMA,MAAM,sBAAsB,OAAO,aAAa,CAAC,AAAyB;KACrE,EAAE,iBAAiB,cAAc,qBAAqB,WAAW,GAAG;;;AAIzE,MAAa,oBAAoB,KAAuC,OAAO,QAAQ;CACrF,MAAM,EAAE,WAAW,OAAO,MAAM,GAAG,SAAS;CAC5C,MAAM,EAAE,YAAY,iBAAiB,KAAK,CAAC;CAC3C,MAAM,SAAS,eAAe,UAAU,iBAAiB,CAAC;CAE1D,OACE,oBAAC,qBAAD;EACE,WAAW,GAAG,yBAAyB,SAAS;EAChD,SAAS;EACT,UAAS;EACJ;EACL,OAAO;EACD;EACN,KAAK;EACL,YAAY,OAAO,cAAc;EACjC,GAAI,OAAO;EACX,GAAI;CACL;AAEL,CAAC;AAED,kBAAkB,cAAc"}
@@ -0,0 +1,34 @@
1
+ import { PropsOf } from "../utils/types.js";
2
+ import { SystemProps } from "../system/system.js";
3
+ import { VuiComponent } from "../core/vui.js";
4
+ //#region src/dismissButton/DismissButton.d.ts
5
+ type DismissButtonSize = 'xs' | 'sm' | 'md' | 'lg';
6
+ declare const DismissButtonBase: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, SystemProps, never>;
7
+ /**
8
+ * DismissButton — Icon-only close/dismiss affordance
9
+ *
10
+ * Standalone button component for dismiss actions in compact layouts.
11
+ * Uses currentColor for icon, controlled via CSS custom property --vui-dismiss-fg.
12
+ *
13
+ * @example
14
+ * // Default (md): 32×32
15
+ * <DismissButton onClick={onDismiss} aria-label="Close" />
16
+ *
17
+ * // Small (sm): 24×24 for tags
18
+ * <DismissButton size="sm" onClick={onDismiss} aria-label="Dismiss" />
19
+ *
20
+ * // With color inheritance from parent
21
+ * <div style={{ '--vui-dismiss-fg': '#fff' }}>
22
+ * <DismissButton size="lg" />
23
+ * </div>
24
+ */
25
+ type DismissButtonProps = PropsOf<typeof DismissButtonBase, {
26
+ size?: DismissButtonSize;
27
+ }>;
28
+ declare const DismissButton: VuiComponent<import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, SystemProps, never>, {
29
+ size?: DismissButtonSize;
30
+ }>;
31
+ //#endregion
32
+ export { DismissButton, DismissButtonProps, type DismissButtonSize };
33
+
34
+ //# sourceMappingURL=DismissButton.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DismissButton.d.ts","names":[],"sources":["../../src/dismissButton/DismissButton.tsx"],"mappings":";;;;KAYK,iBAAA;AAAA,cAEC,iBAAA,8BAAiB,eAAA,uCAAA,YAAA,EAwCtB,WAxCsB;;;;;AAZgB;;;;AAUjB;AAAA;;;;;;;;AAEC;KA4DX,kBAAA,GAAqB,OAAA,QAAe,iBAAA;EAAqB,IAAA,GAAO,iBAAA;AAAA;AAAA,cAE/D,aAAA,EAAwE,YAAA,6BAA3D,eAAA,uCAAA,YAAA,EAexB,WAAA;SAfkE,iBAAA;AAAA"}
@@ -0,0 +1,69 @@
1
+ import { omitThemingProps, useStyleConfig } from "../core/theme.js";
2
+ import styled from "../core/styled.js";
3
+ import vui from "../core/vui.js";
4
+ import Icon from "../icon/icon.js";
5
+ import { jsx } from "react/jsx-runtime";
6
+
7
+ //#region src/dismissButton/DismissButton.tsx
8
+ const DismissButtonBase = styled.buttonBox`
9
+ align-items: center;
10
+ appearance: none;
11
+ background: transparent;
12
+ border: none;
13
+ cursor: pointer;
14
+ display: inline-flex;
15
+ justify-content: center;
16
+ outline: none;
17
+ padding: 0;
18
+ position: relative;
19
+
20
+ /* Inherit dismiss color from parent (Tag, Alert, etc) via CSS custom property */
21
+ --vui-dismiss-color: var(--vui-dismiss-fg, var(--vui-feedback-neutral-solid));
22
+ color: var(--vui-dismiss-text, var(--vui-dismiss-color));
23
+
24
+ /* Hover: grey solid hover @ 20% opacity */
25
+ &:hover {
26
+ background-color: color-mix(in srgb, var(--vui-action-grey-solid-hover) 20%, transparent);
27
+ }
28
+
29
+ /* Active/pressed: grey solid pressed @ 10% opacity */
30
+ &:active {
31
+ background-color: color-mix(in srgb, var(--vui-action-grey-solid-pressed) 10%, transparent);
32
+ }
33
+
34
+ /* Disabled state */
35
+ &:disabled {
36
+ color: var(--vui-action-disabled-foreground);
37
+ cursor: not-allowed;
38
+ opacity: 0.5;
39
+ }
40
+
41
+ /* Focus visible (keyboard) */
42
+ &:focus-visible {
43
+ outline: 2px solid var(--vui-control-focus-ring, #00a1db);
44
+ outline-offset: 2px;
45
+ }
46
+
47
+ transition: background-color 150ms ease-out;
48
+ `;
49
+ const DismissButton = vui((props, ref) => {
50
+ const rest = omitThemingProps(props);
51
+ return /* @__PURE__ */ jsx(DismissButtonBase, {
52
+ ref,
53
+ type: "button",
54
+ "aria-label": "Dismiss",
55
+ ...useStyleConfig("DismissButton", props),
56
+ ...rest,
57
+ children: /* @__PURE__ */ jsx(Icon, {
58
+ name: "uiTimes",
59
+ h: 16,
60
+ w: 16
61
+ })
62
+ });
63
+ });
64
+ DismissButton.displayName = "DismissButton";
65
+
66
+ //#endregion
67
+ export { DismissButton };
68
+ globalThis.__vuiVersion__ = "5.2.0"
69
+ //# sourceMappingURL=DismissButton.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DismissButton.js","names":[],"sources":["../../src/dismissButton/DismissButton.tsx"],"sourcesContent":["import { omitThemingProps, styled, useStyleConfig, vui } from '../core'\nimport Icon from '../icon'\nimport type { PropsOf } from '../utils'\n\n// ---------------------------------------------------------------------------\n// DismissButton — Standalone icon-only dismiss action\n//\n// Optimized for compact, icon-only dismiss affordances in alerts, tags, dialogs.\n// Sizes: xs (20), sm (24), md (32), lg (40) — icon always 16px, centered with padding.\n// Simplified component: no Button inheritance, no variants, just dismiss styling.\n// ---------------------------------------------------------------------------\n\ntype DismissButtonSize = 'xs' | 'sm' | 'md' | 'lg'\n\nconst DismissButtonBase = styled.buttonBox`\n align-items: center;\n appearance: none;\n background: transparent;\n border: none;\n cursor: pointer;\n display: inline-flex;\n justify-content: center;\n outline: none;\n padding: 0;\n position: relative;\n\n /* Inherit dismiss color from parent (Tag, Alert, etc) via CSS custom property */\n --vui-dismiss-color: var(--vui-dismiss-fg, var(--vui-feedback-neutral-solid));\n color: var(--vui-dismiss-text, var(--vui-dismiss-color));\n\n /* Hover: grey solid hover @ 20% opacity */\n &:hover {\n background-color: color-mix(in srgb, var(--vui-action-grey-solid-hover) 20%, transparent);\n }\n\n /* Active/pressed: grey solid pressed @ 10% opacity */\n &:active {\n background-color: color-mix(in srgb, var(--vui-action-grey-solid-pressed) 10%, transparent);\n }\n\n /* Disabled state */\n &:disabled {\n color: var(--vui-action-disabled-foreground);\n cursor: not-allowed;\n opacity: 0.5;\n }\n\n /* Focus visible (keyboard) */\n &:focus-visible {\n outline: 2px solid var(--vui-control-focus-ring, #00a1db);\n outline-offset: 2px;\n }\n\n transition: background-color 150ms ease-out;\n`\n\n/**\n * DismissButton — Icon-only close/dismiss affordance\n *\n * Standalone button component for dismiss actions in compact layouts.\n * Uses currentColor for icon, controlled via CSS custom property --vui-dismiss-fg.\n *\n * @example\n * // Default (md): 32×32\n * <DismissButton onClick={onDismiss} aria-label=\"Close\" />\n *\n * // Small (sm): 24×24 for tags\n * <DismissButton size=\"sm\" onClick={onDismiss} aria-label=\"Dismiss\" />\n *\n * // With color inheritance from parent\n * <div style={{ '--vui-dismiss-fg': '#fff' }}>\n * <DismissButton size=\"lg\" />\n * </div>\n */\nexport type DismissButtonProps = PropsOf<typeof DismissButtonBase, { size?: DismissButtonSize }>\n\nexport const DismissButton = vui<typeof DismissButtonBase, { size?: DismissButtonSize }>((props, ref) => {\n const rest = omitThemingProps(props)\n const styles = useStyleConfig('DismissButton', props)\n\n return (\n <DismissButtonBase\n ref={ref}\n type=\"button\"\n aria-label=\"Dismiss\"\n {...styles}\n {...rest}\n >\n <Icon name=\"uiTimes\" h={16} w={16} />\n </DismissButtonBase>\n )\n})\n\nDismissButton.displayName = 'DismissButton'\n\nexport type { DismissButtonSize }\n"],"mappings":";;;;;;;AAcA,MAAM,oBAAoB,OAAO,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8D1C,MAAa,gBAAgB,KAA6D,OAAO,QAAQ;CACvG,MAAM,OAAO,iBAAiB,KAAK;CAGnC,OACE,oBAAC,mBAAD;EACO;EACL,MAAK;EACL,cAAW;EACX,GAPW,eAAe,iBAAiB,KAOlC;EACT,GAAI;YAEJ,oBAAC,MAAD;GAAM,MAAK;GAAU,GAAG;GAAI,GAAG;EAAK;CACnB;AAEvB,CAAC;AAED,cAAc,cAAc"}
@@ -0,0 +1 @@
1
+ import { DismissButton, DismissButtonProps, DismissButtonSize } from "./DismissButton.js";
@@ -0,0 +1,33 @@
1
+ //#region src/dismissButton/theme.ts
2
+ const defaultProps = { size: "md" };
3
+ const sizes = {
4
+ xs: {
5
+ h: 20,
6
+ w: 20,
7
+ p: "2px"
8
+ },
9
+ sm: {
10
+ h: 24,
11
+ w: 24,
12
+ p: "4px"
13
+ },
14
+ md: {
15
+ h: 32,
16
+ w: 32,
17
+ p: "8px"
18
+ },
19
+ lg: {
20
+ h: 40,
21
+ w: 40,
22
+ p: "12px"
23
+ }
24
+ };
25
+ var theme_default = {
26
+ defaultProps,
27
+ sizes
28
+ };
29
+
30
+ //#endregion
31
+ export { theme_default as default };
32
+ globalThis.__vuiVersion__ = "5.2.0"
33
+ //# sourceMappingURL=theme.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"theme.js","names":[],"sources":["../../src/dismissButton/theme.ts"],"sourcesContent":["const defaultProps = {\n size: 'md',\n}\n\nconst sizes = {\n xs: { h: 20, w: 20, p: '2px' },\n sm: { h: 24, w: 24, p: '4px' },\n md: { h: 32, w: 32, p: '8px' },\n lg: { h: 40, w: 40, p: '12px' },\n}\n\nexport default {\n defaultProps,\n sizes,\n}\n"],"mappings":";AAAA,MAAM,eAAe,EACnB,MAAM,KACR;AAEA,MAAM,QAAQ;CACZ,IAAI;EAAE,GAAG;EAAI,GAAG;EAAI,GAAG;CAAM;CAC7B,IAAI;EAAE,GAAG;EAAI,GAAG;EAAI,GAAG;CAAM;CAC7B,IAAI;EAAE,GAAG;EAAI,GAAG;EAAI,GAAG;CAAM;CAC7B,IAAI;EAAE,GAAG;EAAI,GAAG;EAAI,GAAG;CAAO;AAChC;AAEA,oBAAe;CACb;CACA;AACF"}
@@ -4,8 +4,8 @@ import { useStyleConfig } from "../core/theme.js";
4
4
  import { RenderOnScreen, useDown } from "../core/media.js";
5
5
  import vui from "../core/vui.js";
6
6
  import Box from "../box/box.js";
7
- import Button from "../button/button.js";
8
7
  import List from "../list/list.js";
8
+ import Button from "../button/button.js";
9
9
  import { useHeaderContext } from "./context.js";
10
10
  import HeaderAccountUserInfo from "./headerAccountUserInfo.js";
11
11
  import HeaderServicesMessage from "./headerServicesMessage.js";
package/dist/index.d.ts CHANGED
@@ -96,7 +96,7 @@ import { AccordionItemHorizontal } from "./accordion/accordionItemHorizontal.js"
96
96
  import { Accordion, AccordionBase } from "./accordion/accordion.js";
97
97
  import { AvatarProps } from "./avatar/avatar.types.js";
98
98
  import { Avatar, AvatarBase } from "./avatar/avatar.js";
99
- import { TagContainerStyles, TagHierarchy, TagInnerProps, TagIntent, TagIntentTokens, TagProps, TagVariantCanonical } from "./tag/tag.types.js";
99
+ import { TagColor, TagColorTokens, TagContainerStyles, TagHierarchy, TagInnerProps, TagProps, TagVariantCanonical } from "./tag/tag.types.js";
100
100
  import { Tag } from "./tag/tag.js";
101
101
  import { resolveTagVariantKey } from "./tag/utils.js";
102
102
  import { Badge } from "./badge/badge.js";
@@ -108,7 +108,7 @@ import { ButtonComputedOptions, ButtonComputedStyles, ButtonIntent, ButtonProps,
108
108
  import { ButtonIcon } from "./button/buttonIcon.js";
109
109
  import { ButtonText } from "./button/buttonText.js";
110
110
  import { Button, ButtonBase } from "./button/button.js";
111
- import { AppButton, BackButton, CTAButton, CloseButton, DangerButton, DismissButton, IconButton, LineButton, TextButton } from "./button/buttons.js";
111
+ import { AppButton, BackButton, CTAButton, CloseButton, DangerButton, IconButton, LineButton, TextButton } from "./button/buttons.js";
112
112
  import { ButtonContextValue, ButtonProvider, useButtonContext } from "./button/context.js";
113
113
  import { resolveVariantKey } from "./button/utils.js";
114
114
  import { ButtonGroupProps } from "./buttonGroup/buttonGroup.types.js";
@@ -162,6 +162,7 @@ import { DialogSubmitButton } from "./dialog/dialogSubmitButton.js";
162
162
  import { DialogTitle } from "./dialog/dialogTitle.js";
163
163
  import { Dialog, DialogBase } from "./dialog/dialog.js";
164
164
  import { useDialog } from "./dialog/useDialog.js";
165
+ import { DismissButton, DismissButtonProps, DismissButtonSize } from "./dismissButton/DismissButton.js";
165
166
  import { DisplayTextProps } from "./display/display.types.js";
166
167
  import { Display, DisplayBase } from "./display/display.js";
167
168
  import { DragAndDropProps } from "./dragAndDrop/dragAndDrop.types.js";
@@ -225,7 +226,7 @@ import { Input, InputBase } from "./input/input.js";
225
226
  import { LabelProps } from "./label/label.types.js";
226
227
  import { Label } from "./label/label.js";
227
228
  import { Logo } from "./logo/Logo.js";
228
- import { NotificationIntent, NotificationProps, NotificationStatus, NotificationStatusEntry, NotificationStatusMapping, NotificationVariant, NotificationVariantHierarchy, NotificationVariantLegacy } from "./notification/notification.types.js";
229
+ import { NotificationIntent, NotificationLayout, NotificationProps, NotificationStatus, NotificationStatusEntry, NotificationStatusMapping, NotificationVariant, NotificationVariantHierarchy, NotificationVariantLegacy } from "./notification/notification.types.js";
229
230
  import { NotificationProvider, useNotificationContext } from "./notification/context.js";
230
231
  import { NotificationAction } from "./notification/notificationAction.js";
231
232
  import { NotificationIcon } from "./notification/notificationIcon.js";
@@ -258,7 +259,7 @@ import { RadioProps, RadioStyleProps } from "./radio/radio.types.js";
258
259
  import { Radio, RadioBase } from "./radio/radio.js";
259
260
  import { RadioGroupProps } from "./radio/radioGroup.types.js";
260
261
  import { RadioGroup, RadioGroupBase } from "./radio/radioGroup.js";
261
- import { RangeProps, RangeTrackKey, RangeValue } from "./range/range.types.js";
262
+ import { RangeProps, RangeValue } from "./range/range.types.js";
262
263
  import { Range } from "./range/range.js";
263
264
  import { Rating } from "./rating/rating.js";
264
265
  import { UseSelectProps } from "./select/useSelect.types.js";
@@ -324,4 +325,4 @@ import { CloseEvent, TutorialCardProps, TutorialDataStep, TutorialProps, Tutoria
324
325
  import { Tutorial } from "./tutorial/tutorial.js";
325
326
  import { TutorialCard } from "./tutorial/tutorialCard.js";
326
327
  import { TutorialStep } from "./tutorial/tutorialStep.js";
327
- export { Accordion, AccordionBase, type AccordionIconPosition, AccordionItem, type AccordionItemArrowProps, AccordionItemHorizontal, type AccordionItemId, type AccordionItemProps, type AccordionOnToggleEvent, type AccordionOrientation, type AccordionProps, type AlignContentProps, type AlignItemsProps, type AlignSelfProps, type Animation, type AnimationDirection, type AnimationGetter, type AnimationProp, type AnimationProps, type AnimationsProps, type AnyFunction, type AnyNumber, type AnyString, AppButton, type AppearanceProps, ApplicationFooter, type ApplicationFooterProps, type AutoCompletePopoverProps, Avatar, AvatarBase, type AvatarProps, BackButton, type BackgroundColorProps, type BackgroundsProps, Badge, type Border, type BorderBottomColorProps, type BorderBottomProps, type BorderBottomWidthProps, type BorderColorProps, type BorderGetter, type BorderLeftColorProps, type BorderLeftProps, type BorderLeftWidthProps, type BorderProps, type BorderRadiusProp, type BorderRadiusProps, type BorderRightColorProps, type BorderRightProps, type BorderRightWidthProps, type BorderStyleGetter, type BorderStyleProps, type BorderTopColorProps, type BorderTopProps, type BorderTopWidthProps, type BorderWidthGetter, type BorderWidthProps, type BordersProps, type BottomProps, Box, BoxBase, type BoxProps, type BoxShadowProps, type BoxSizingProps, Breadcrumbs, BreadcrumbsBase, type BreadcrumbsItemProps, type BreadcrumbsProps, type BreadcrumbsSeparatorProps, Button, ButtonBase, type ButtonComputedOptions, type ButtonComputedStyles, ButtonContextValue, ButtonGroup, ButtonGroupBase, ButtonGroupContextValue, type ButtonGroupProps, ButtonGroupProvider, ButtonIcon, type ButtonIntent, type ButtonProps, ButtonProvider, type ButtonStyleContainer, ButtonText, ButtonToggleGroup, type ButtonToggleGroupProps, type ButtonVariant, type ButtonVariantLegacy, CSSFunction, CTAButton, Calendar, type CalendarMode, type CalendarProps, Card, type CardProps, type ChangeEvent, type ChangeEventHandler, Chat, ChatInput, type ChatInputButtonProps, type ChatInputProps, type ChatInputStatus, ChatMessage, type ChatProps, Checkbox, CheckboxBase, CheckboxGroup, CheckboxGroupBase, type CheckboxGroupProps, CheckboxGroupProvider, type CheckboxProps, type CheckboxStyleProps, type ChildrenProp, CloseButton, type CloseEvent, type Color, type ColorGetter, type ColorProps, type Component, type ComputedResult, type ContainerStyles, CopyToClipboard, type CopyToClipboardProps, type CreateContextOptions, type CreateContextReturn, CreateGlobalStyle, type CursorProps, DangerButton, DateFormat, DatePicker, type DatePickerPopupPosition, type DatePickerProps, type DateRange, type DefaultViewMonthProps, Definition, DefinitionHorizontalBase, DefinitionVerticalBase, Dialog, DialogBase, DialogBody, type DialogBodyProps, DialogCancelButton, type DialogCancelButtonProps, DialogCloseButton, type DialogCloseButtonProps, type DialogContext, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, DialogIcon, type DialogIconProps, type DialogPlacement, type DialogProps, DialogProvider, type DialogStatus, type DialogStatusMapping, DialogSubmitButton, type DialogSubmitButtonProps, DialogTitle, type DialogTitleProps, type Dict, DismissButton, Display, DisplayBase, type DisplayProps, type DisplayTextProps, type DivideColorProps, type DivideStyleProps, type DivideXProps, type DivideXReverseProps, type DivideYProps, type DivideYReverseProps, Divider, DividerBase, type DividerProps, DragAndDrop, type DragAndDropProps, Drawer, type DrawerProps, type DurationGetter, type EffectsProps, type Elevation, type Environment, type FlexBasisProps, type FlexDirectionProps, type FlexGrowProps, type FlexProps, type FlexShrinkProps, type FlexWrapProps, type FlexboxesProps, type FloatProps, type FlowDirection, type FocusEvent, type FocusEventHandler, FocusLock, type FocusLockProps, type FocusableElement, type Font, type FontFamilyProps, type FontGetter, type FontSize, type FontSizeGetter, type FontSizeProps, type FontStyleProps, type FontWeight, type FontWeightGetter, type FontWeightProps, Footer, FooterBase, type FooterColumnData, type FooterColumnProps, type FooterColumnsProps, FooterContent, type FooterContentProps, type FooterContext, FooterHeading, FooterLink, type FooterLinkData, type FooterProps, FooterSection, type FooterSectionData, type FooterSectionProps, type FooterTrademarkProps, FormatDateOptions, type GetIconDetailsResult, _default as GlobalStyle, Grid, GridBase, type GridProps, type GridTemplateColumn, type GridTemplateRow, H1, H2, H3, H4, H5, H6, HSLToRGBA, Header, HeaderAccount, type HeaderAccountData, type HeaderAccountProps, type HeaderAccountSectionData, HeaderAccountUserInfo, type HeaderAccountUserInfoData, type HeaderAccountUserInfoProps, HeaderApplicationName, HeaderBase, type HeaderButtonData, HeaderContent, type HeaderContentProps, type HeaderContext, HeaderCreateAccount, type HeaderCreateAccountData, type HeaderCreateAccountProps, HeaderDivider, type HeaderLinkData, HeaderLinkItem, type HeaderLinkItemProps, HeaderLogo, HeaderMainLinks, type HeaderMainLinksProps, HeaderMobileContent, HeaderMobileToggle, HeaderNotifications, type HeaderNotificationsData, type HeaderNotificationsProps, type HeaderProps, HeaderProvider, HeaderServices, type HeaderServicesData, HeaderServicesMessage, type HeaderServicesProps, HeaderSignIn, type HeaderSignInProps, type HeaderSupportProps, Heading, HeadingBase, type HeadingProps, type HeadingSize, type HeightProps, HelpText, type HelpTextProps, Icon, IconButton, type IconButtonProps, type IconDefinition, type IconDetails, type IconProp, type IconProps, Image, ImageBase, type ImageProps, Input, InputBase, InputIcon, InputInput, InputInputBase, type InputInputProps, type InputProps, type InputState, type InputStateMapping, type InputType, type InsetGetter, type IntentTokens, type InteractivityProps, IsTruncatedProps, type ItemProps, type JustifyContentProps, type JustifyItemsProps, type JustifySelfProps, type KeyboardEvent, type KeyboardEventHandler, type KeyboardKeys, Label, type LabelProps, type LayoutProps, Lead, type LeftProps, type LetterSpacingProps, LineButton, type LineHeightGetter, type LineHeightProps, Link, LinkBase, LinkIcon, type LinkProps, LinkText, LinksDict, LinksProvider, List, ListBase, ListDivider, ListHeading, ListIcon, ListItem, ListItemBase, type ListItemLinkProps, type ListItemProps, type ListProps, ListProvider, type ListStylePositionProps, type ListStyleTypeProps, ListText, LoggedInHeader, type LoggedInHeaderProps, LoggedOutHeader, type LoggedOutHeaderProps, Logo, type MarginBottomProps, type MarginLeftProps, type MarginProps, type MarginRightProps, type MarginTopProps, type MarginXProps, type MarginYProps, type MaxHeightProps, MaxLinesProps, type MaxWidthProps, Menu, MenuButton, MenuItem, MenuList, type MenuListProps, type MenuProps, MenuProvider, Message, MessageBase, type MessageProps, type MinHeightProps, type MinWidthProps, Modal, ModalBackdrop, ModalBackdropBase, type ModalBackdropProps, ModalContent, ModalContentBase, type ModalContentProps, type ModalContext, type ModalProps, ModalProvider, type MonthProps, type MouseEvent, type MouseEventHandler, type NavBarIconSize, Notification, NotificationAction, NotificationIcon, type NotificationIntent, type NotificationProps, NotificationProvider, type NotificationStatus, type NotificationStatusEntry, type NotificationStatusMapping, NotificationText, NotificationTitle, type NotificationVariant, type NotificationVariantHierarchy, type NotificationVariantLegacy, type ObjectFitProps, type OpacityProps, type OrderProps, type OutlineColorProps, type OutlineProps, type OutlineStyleProps, type OutlineWidthProps, type OverflowProps, type OverflowXProps, type OverflowYProps, type OverscrollBehaviorProps, P, PBase, type PProps, type PaddingBottomProps, type PaddingLeftProps, type PaddingProps, type PaddingRightProps, type PaddingTopProps, type PaddingXProps, type PaddingYProps, Pagination, PaginationButton, type PaginationButtonProps, type PaginationContext, PaginationEllipsis, PaginationGoToPage, type PaginationItem, PaginationNavigation, PaginationPrevNext, type PaginationPrevNextProps, type PaginationProps, PaginationProvider, PaginationResults, Panel, type PanelProps, type Placement, type PointerEventsProps, Popover, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverProvider, type PopoverRenderProps, PopoverTrigger, type PopoverTriggerProps, Portal, type PortalProps, type PositionProps, Progress, ProgressBase, ProgressCircular, ProgressCircularBase, type ProgressCircularProps, type ProgressProps, type PropsOf, Prose, ProseProps, Radio, RadioBase, RadioGroup, RadioGroupBase, type RadioGroupProps, RadioGroupProvider, type RadioProps, type RadioStyleProps, type Radius, type RadiusGetter, Range, type RangeProps, type RangeTrackKey, type RangeValue, Rating, type RefPropsOf, RenderOnScreen, RenderOnScreenProps, type RenderProps, _default$1 as ResetCSS, type ResizeProps, type RightJoinProps, type RightProps, type RingColorProps, type RingProps, type RingWidth, type RingWidthGetter, type RotateProps, type ScaleProps, type ScaleXProps, type ScaleYProps, type Screen, Select, SelectButton, type SelectButtonProps, SelectContent, type SelectContentProps, type SelectContext, SelectGroup, type SelectGroupProps, type SelectLabelProps, SelectOption, type SelectOptionData, type SelectOptionProps, type SelectProps, type SelectValue, type Shadow, type ShadowGetter, Sidemenu, type SidemenuCollapseModeV2, type SidemenuComponentV2Props, type SidemenuContextV2Value, type SidemenuExpandEventV2, type SidemenuFlatItemV2, type SidemenuGroupV2Props, SidemenuItem, type SidemenuItemBadgeV2Props, type SidemenuItemClickEventV2, type SidemenuItemComponentV2Props, type SidemenuItemProps, type SidemenuItemV2Props, type SidemenuItemWithChildrenV2, type SidemenuOrientation, type SidemenuOrientationV2, type SidemenuProps, type SidemenuSizeV2, SidemenuStateProvider, SidemenuTop, type SidemenuTopComponentV2Props, type SidemenuTopProps, type SidemenuTopPropsV2, type SidemenuTopV2Props, SidemenuV2, type SidemenuV2Props, type SidemenuVariantV2, type Size, type SizeGetter, type SizingProps, Skeleton, SkeletonBase, type SkeletonProps, type SkewXProps, type SkewYProps, type Sort, type SortOrder, type Space, type SpaceGetter, type SpaceProps, type SpaceXProps, type SpaceXReverseProps, type SpaceYProps, type SpaceYReverseProps, type SpacingProps, Spinner, SpinnerCircle, type SpinnerProps, StepHorizontal, StepHorizontalBase, type StepHorizontalProps, type StepHorizontalSize, type StepHorizontalTailProps, type StepHorizontalTitleProps, StepIndicator, StepVertical, StepVerticalBase, type StepVerticalProps, type StepVerticalSize, type StepVerticalTailProps, type StepVerticalTitleProps, StepperHorizontal, type StepperHorizontalProps, StepperVertical, type StepperVerticalProps, Svg, SvgBase, type SvgProps, type SvgState, Switch, SwitchBase, SwitchButton, SwitchButtonBase, type SwitchButtonProps, type SwitchContext, SwitchLabel, type SwitchProps, SwitchProvider, SystemProps, T, TBase, type TProps, Tab, TabBase, type TabIndexProps, type TabNavBarProps, type TabProps, Table, TableBase, type TableColumn, type TableContext, type TableProps, TableProvider, TableSortIcon, type TableSortIconProps, Tabs, TabsBase, type TabsProps, type TabsSize, Tag, type TagContainerStyles, type TagHierarchy, type TagInnerProps, type TagIntent, type TagIntentTokens, type TagProps, TagToggle, type TagToggleHierarchy, type TagToggleInnerProps, type TagToggleProps, type TagVariantCanonical, Tbody, TbodyBase, type TbodyProps, Td, TdBase, type TdProps, type TextAlignProps, TextButton, type TextDecorationProps, type TextOverflowProps, type TextShadowProps, type TextTransformProps, Textarea, TextareaBase, type TextareaProps, Tfoot, TfootBase, type TfootProps, Th, ThBase, type ThProps, Thead, type TheadProps, ThemeGet, type ThemingProps, type TimeItem, type TimeResult, type TimeUnitMode, type TimingFunctionGetter, type ToastDuration, type ToastListItem, type ToastOptions, type ToastSetup, _default$2 as Toaster, Tooltip, type TooltipProps, type TopProps, Tr, TrBase, type TrProps, type Transform, type TransformGetter, type TransformOriginProps, type TransformProps, type TransformsProps, type TransitionDelayProps, type TransitionDuration, type TransitionDurationProps, type TransitionGetter, type TransitionPropertyGetter, type TransitionPropertyProps, type TransitionProps, type TransitionTimingFunctionProps, type TransitionsProps, type TranslateXProps, type TranslateYProps, Tree, TreeBase, TreeIcon, TreeItem, TreeItemBase, type TreeItemId, type TreeItemLinkProps, type TreeItemProps, type TreeOnToggleEvent, type TreeProps, TreeProvider, TreeText, Tutorial, TutorialCard, type TutorialCardProps, type TutorialDataStep, type TutorialProps, TutorialStep, type TutorialStepProps, type TutorialStepWrapper, type TypographyProps, UseControlledProps, type UsePaginationProps, type UsePopoverProps, type UseSelectProps, UseSelectReturnType, type UseSidemenuItemV2Return, type UseSidemenuV2Return, type UserSelectProps, VC, VStyled, type VerticalAlignProps, type VisibilityProps, VuiComponent, VuiComponentConfig, type VuiContext, VuiContextProvider, type VuiIcon, type VuiIcons, VuiProvider, type VuiTheme, type VuiThemeDefaults, type VuiThemeExtensions, type WhiteSpaceProps, type WidthProps, WordBreakProps, type ZIndex, type ZIndexGetter, type ZIndexProps, __DEV__, activeClassName, activeItemShade, addBodyClass, addElement, _default$3 as animations, assignRef, icons_d_exports as baseIcons, _default$4 as borders, bounce, callAll, cdnFontsPath, cdnStagUrl, cdnTestUrl, cdnUrl, cdnUrls, _default$5 as colors, compareBy, _default$6 as components, containerId, createContext, createGlobalStyle, cs, css, dateFormats, defaultDuration, defaultIcons, defaultTheme, dialogStatusMapping, dimmedBorderColor, _default$7 as durations, ellipsisOverflow, extendTheme, fadeDown, fadeIn, fadeLeft, fadeOut, fadeRight, fadeUp, fastToastDuration, filterUndefined, _default$8 as fontFaces, _default$9 as fontSizes, _default$10 as fontWeights, _default$11 as fonts, formatDate, formatIsoDate, _default$12 as foundations, generateDateByUTCValue, generateMenuItemId, getCurrentYear, getDateUTCValue, getLoggedInLink, getOptionText, getPaginationItems, hexToRGBA, cache as iconsCache, isActivePath, isArray, isFunction, isJsx, isNumber, isObject, isReactText, isString, isTruncated, isValidDate, manager, maxDateTimestamp, maxLines, mediaBetween, mediaDown, mediaUp, merge, mergeRefs, minDateTimestamp, modalAnimation, modalClass, modalJustifyContent, months, monthsShort, noScrollClass, noop, normalizeToId, objectFilter, omitThemingProps, parseHSL, parseIsoDate, pulse, _default$13 as radii, random, removeBodyClass, removeElement, resolveTagVariantKey, resolveVariantKey, _default$14 as ringWidths, runIfFn, sameDate, sameYear, sameYearSameMonth, _default$15 as screens, _default$16 as shadows, _default$17 as sizes, slowToastDuration, _default$18 as spaces, spin, styled, system, th, toggleItem, _default$19 as transforms, _default$20 as transitions, uid, useBetween, useBodyScrollLock, useButtonContext, useButtonGroupContext, useCallbackRef, useCheckboxGroupContext, useClickOutside, useControlled, useCopyToClipboard, useDialog, useDialogContext, useDown, useFooterLinks, useHeaderContext, useHeaderLinks, useIds, useIsMounted, useLinks, useListContext, useLoadLinks, useMenuContext, useModalContext, useModalManager, useNotificationContext, useOfflineMode, usePagination, usePaginationContext, usePopover, usePopoverContext, useRadioGroupContext, useSidemenuContext, useStyleConfig, useSwitchContext, useTableContext, useTh, useTheme, useToast, useTreeContext, useUp, useViewportWidth, useVuiContext, utcDateToLocale, v, validateDateFormat, viewYears, vui, vuiActionAI, vuiActionBlue, vuiActionBrand, vuiActionContrast, vuiActionDanger, vuiActionEucalyptus, vuiActionGeneric, vuiActionGrey, vuiActionLavender, vuiActionSuccess, vuiActionTerracotta, vuiActionTokens, vuiActionYellow, vuiColorBase, vuiColorCyan, vuiColorDarkBlue, vuiColorDigiGreen, vuiColorEarth, vuiColorEnergyRed, vuiColorEucalyptus, vuiColorLandGreen, vuiColorLavender, vuiColorOpacityDark, vuiColorOpacityLight, vuiColorPine, vuiColorPrimitives, vuiColorSandstone, vuiColorSeaBlue, vuiColorSemantics, vuiColorSkyBlue, vuiColorSunflower, vuiColorTerracotta, vuiColorToRGBA, vuiColorWarmGrey, vuiControlTokens, vuiDataTokens, vuiFeedbackTokens, vuiGradientTokens, vuiNavigationBackground, vuiNavigationBorder, vuiNavigationForeground, vuiNavigationTokens, vuiNextAllTokens, vuiSemanticBackground, vuiSemanticForeground, vuiUtilityBorder, vuiUtilityLoading, vuiUtilityMisc, vuiUtilityTokens, weekDays, wordBreak, _default$21 as zIndices };
328
+ export { Accordion, AccordionBase, type AccordionIconPosition, AccordionItem, type AccordionItemArrowProps, AccordionItemHorizontal, type AccordionItemId, type AccordionItemProps, type AccordionOnToggleEvent, type AccordionOrientation, type AccordionProps, type AlignContentProps, type AlignItemsProps, type AlignSelfProps, type Animation, type AnimationDirection, type AnimationGetter, type AnimationProp, type AnimationProps, type AnimationsProps, type AnyFunction, type AnyNumber, type AnyString, AppButton, type AppearanceProps, ApplicationFooter, type ApplicationFooterProps, type AutoCompletePopoverProps, Avatar, AvatarBase, type AvatarProps, BackButton, type BackgroundColorProps, type BackgroundsProps, Badge, type Border, type BorderBottomColorProps, type BorderBottomProps, type BorderBottomWidthProps, type BorderColorProps, type BorderGetter, type BorderLeftColorProps, type BorderLeftProps, type BorderLeftWidthProps, type BorderProps, type BorderRadiusProp, type BorderRadiusProps, type BorderRightColorProps, type BorderRightProps, type BorderRightWidthProps, type BorderStyleGetter, type BorderStyleProps, type BorderTopColorProps, type BorderTopProps, type BorderTopWidthProps, type BorderWidthGetter, type BorderWidthProps, type BordersProps, type BottomProps, Box, BoxBase, type BoxProps, type BoxShadowProps, type BoxSizingProps, Breadcrumbs, BreadcrumbsBase, type BreadcrumbsItemProps, type BreadcrumbsProps, type BreadcrumbsSeparatorProps, Button, ButtonBase, type ButtonComputedOptions, type ButtonComputedStyles, ButtonContextValue, ButtonGroup, ButtonGroupBase, ButtonGroupContextValue, type ButtonGroupProps, ButtonGroupProvider, ButtonIcon, type ButtonIntent, type ButtonProps, ButtonProvider, type ButtonStyleContainer, ButtonText, ButtonToggleGroup, type ButtonToggleGroupProps, type ButtonVariant, type ButtonVariantLegacy, CSSFunction, CTAButton, Calendar, type CalendarMode, type CalendarProps, Card, type CardProps, type ChangeEvent, type ChangeEventHandler, Chat, ChatInput, type ChatInputButtonProps, type ChatInputProps, type ChatInputStatus, ChatMessage, type ChatProps, Checkbox, CheckboxBase, CheckboxGroup, CheckboxGroupBase, type CheckboxGroupProps, CheckboxGroupProvider, type CheckboxProps, type CheckboxStyleProps, type ChildrenProp, CloseButton, type CloseEvent, type Color, type ColorGetter, type ColorProps, type Component, type ComputedResult, type ContainerStyles, CopyToClipboard, type CopyToClipboardProps, type CreateContextOptions, type CreateContextReturn, CreateGlobalStyle, type CursorProps, DangerButton, DateFormat, DatePicker, type DatePickerPopupPosition, type DatePickerProps, type DateRange, type DefaultViewMonthProps, Definition, DefinitionHorizontalBase, DefinitionVerticalBase, Dialog, DialogBase, DialogBody, type DialogBodyProps, DialogCancelButton, type DialogCancelButtonProps, DialogCloseButton, type DialogCloseButtonProps, type DialogContext, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, DialogIcon, type DialogIconProps, type DialogPlacement, type DialogProps, DialogProvider, type DialogStatus, type DialogStatusMapping, DialogSubmitButton, type DialogSubmitButtonProps, DialogTitle, type DialogTitleProps, type Dict, DismissButton, type DismissButtonProps, type DismissButtonSize, Display, DisplayBase, type DisplayProps, type DisplayTextProps, type DivideColorProps, type DivideStyleProps, type DivideXProps, type DivideXReverseProps, type DivideYProps, type DivideYReverseProps, Divider, DividerBase, type DividerProps, DragAndDrop, type DragAndDropProps, Drawer, type DrawerProps, type DurationGetter, type EffectsProps, type Elevation, type Environment, type FlexBasisProps, type FlexDirectionProps, type FlexGrowProps, type FlexProps, type FlexShrinkProps, type FlexWrapProps, type FlexboxesProps, type FloatProps, type FlowDirection, type FocusEvent, type FocusEventHandler, FocusLock, type FocusLockProps, type FocusableElement, type Font, type FontFamilyProps, type FontGetter, type FontSize, type FontSizeGetter, type FontSizeProps, type FontStyleProps, type FontWeight, type FontWeightGetter, type FontWeightProps, Footer, FooterBase, type FooterColumnData, type FooterColumnProps, type FooterColumnsProps, FooterContent, type FooterContentProps, type FooterContext, FooterHeading, FooterLink, type FooterLinkData, type FooterProps, FooterSection, type FooterSectionData, type FooterSectionProps, type FooterTrademarkProps, FormatDateOptions, type GetIconDetailsResult, _default as GlobalStyle, Grid, GridBase, type GridProps, type GridTemplateColumn, type GridTemplateRow, H1, H2, H3, H4, H5, H6, HSLToRGBA, Header, HeaderAccount, type HeaderAccountData, type HeaderAccountProps, type HeaderAccountSectionData, HeaderAccountUserInfo, type HeaderAccountUserInfoData, type HeaderAccountUserInfoProps, HeaderApplicationName, HeaderBase, type HeaderButtonData, HeaderContent, type HeaderContentProps, type HeaderContext, HeaderCreateAccount, type HeaderCreateAccountData, type HeaderCreateAccountProps, HeaderDivider, type HeaderLinkData, HeaderLinkItem, type HeaderLinkItemProps, HeaderLogo, HeaderMainLinks, type HeaderMainLinksProps, HeaderMobileContent, HeaderMobileToggle, HeaderNotifications, type HeaderNotificationsData, type HeaderNotificationsProps, type HeaderProps, HeaderProvider, HeaderServices, type HeaderServicesData, HeaderServicesMessage, type HeaderServicesProps, HeaderSignIn, type HeaderSignInProps, type HeaderSupportProps, Heading, HeadingBase, type HeadingProps, type HeadingSize, type HeightProps, HelpText, type HelpTextProps, Icon, IconButton, type IconButtonProps, type IconDefinition, type IconDetails, type IconProp, type IconProps, Image, ImageBase, type ImageProps, Input, InputBase, InputIcon, InputInput, InputInputBase, type InputInputProps, type InputProps, type InputState, type InputStateMapping, type InputType, type InsetGetter, type IntentTokens, type InteractivityProps, IsTruncatedProps, type ItemProps, type JustifyContentProps, type JustifyItemsProps, type JustifySelfProps, type KeyboardEvent, type KeyboardEventHandler, type KeyboardKeys, Label, type LabelProps, type LayoutProps, Lead, type LeftProps, type LetterSpacingProps, LineButton, type LineHeightGetter, type LineHeightProps, Link, LinkBase, LinkIcon, type LinkProps, LinkText, LinksDict, LinksProvider, List, ListBase, ListDivider, ListHeading, ListIcon, ListItem, ListItemBase, type ListItemLinkProps, type ListItemProps, type ListProps, ListProvider, type ListStylePositionProps, type ListStyleTypeProps, ListText, LoggedInHeader, type LoggedInHeaderProps, LoggedOutHeader, type LoggedOutHeaderProps, Logo, type MarginBottomProps, type MarginLeftProps, type MarginProps, type MarginRightProps, type MarginTopProps, type MarginXProps, type MarginYProps, type MaxHeightProps, MaxLinesProps, type MaxWidthProps, Menu, MenuButton, MenuItem, MenuList, type MenuListProps, type MenuProps, MenuProvider, Message, MessageBase, type MessageProps, type MinHeightProps, type MinWidthProps, Modal, ModalBackdrop, ModalBackdropBase, type ModalBackdropProps, ModalContent, ModalContentBase, type ModalContentProps, type ModalContext, type ModalProps, ModalProvider, type MonthProps, type MouseEvent, type MouseEventHandler, type NavBarIconSize, Notification, NotificationAction, NotificationIcon, type NotificationIntent, type NotificationLayout, type NotificationProps, NotificationProvider, type NotificationStatus, type NotificationStatusEntry, type NotificationStatusMapping, NotificationText, NotificationTitle, type NotificationVariant, type NotificationVariantHierarchy, type NotificationVariantLegacy, type ObjectFitProps, type OpacityProps, type OrderProps, type OutlineColorProps, type OutlineProps, type OutlineStyleProps, type OutlineWidthProps, type OverflowProps, type OverflowXProps, type OverflowYProps, type OverscrollBehaviorProps, P, PBase, type PProps, type PaddingBottomProps, type PaddingLeftProps, type PaddingProps, type PaddingRightProps, type PaddingTopProps, type PaddingXProps, type PaddingYProps, Pagination, PaginationButton, type PaginationButtonProps, type PaginationContext, PaginationEllipsis, PaginationGoToPage, type PaginationItem, PaginationNavigation, PaginationPrevNext, type PaginationPrevNextProps, type PaginationProps, PaginationProvider, PaginationResults, Panel, type PanelProps, type Placement, type PointerEventsProps, Popover, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverProvider, type PopoverRenderProps, PopoverTrigger, type PopoverTriggerProps, Portal, type PortalProps, type PositionProps, Progress, ProgressBase, ProgressCircular, ProgressCircularBase, type ProgressCircularProps, type ProgressProps, type PropsOf, Prose, ProseProps, Radio, RadioBase, RadioGroup, RadioGroupBase, type RadioGroupProps, RadioGroupProvider, type RadioProps, type RadioStyleProps, type Radius, type RadiusGetter, Range, type RangeProps, type RangeValue, Rating, type RefPropsOf, RenderOnScreen, RenderOnScreenProps, type RenderProps, _default$1 as ResetCSS, type ResizeProps, type RightJoinProps, type RightProps, type RingColorProps, type RingProps, type RingWidth, type RingWidthGetter, type RotateProps, type ScaleProps, type ScaleXProps, type ScaleYProps, type Screen, Select, SelectButton, type SelectButtonProps, SelectContent, type SelectContentProps, type SelectContext, SelectGroup, type SelectGroupProps, type SelectLabelProps, SelectOption, type SelectOptionData, type SelectOptionProps, type SelectProps, type SelectValue, type Shadow, type ShadowGetter, Sidemenu, type SidemenuCollapseModeV2, type SidemenuComponentV2Props, type SidemenuContextV2Value, type SidemenuExpandEventV2, type SidemenuFlatItemV2, type SidemenuGroupV2Props, SidemenuItem, type SidemenuItemBadgeV2Props, type SidemenuItemClickEventV2, type SidemenuItemComponentV2Props, type SidemenuItemProps, type SidemenuItemV2Props, type SidemenuItemWithChildrenV2, type SidemenuOrientation, type SidemenuOrientationV2, type SidemenuProps, type SidemenuSizeV2, SidemenuStateProvider, SidemenuTop, type SidemenuTopComponentV2Props, type SidemenuTopProps, type SidemenuTopPropsV2, type SidemenuTopV2Props, SidemenuV2, type SidemenuV2Props, type SidemenuVariantV2, type Size, type SizeGetter, type SizingProps, Skeleton, SkeletonBase, type SkeletonProps, type SkewXProps, type SkewYProps, type Sort, type SortOrder, type Space, type SpaceGetter, type SpaceProps, type SpaceXProps, type SpaceXReverseProps, type SpaceYProps, type SpaceYReverseProps, type SpacingProps, Spinner, SpinnerCircle, type SpinnerProps, StepHorizontal, StepHorizontalBase, type StepHorizontalProps, type StepHorizontalSize, type StepHorizontalTailProps, type StepHorizontalTitleProps, StepIndicator, StepVertical, StepVerticalBase, type StepVerticalProps, type StepVerticalSize, type StepVerticalTailProps, type StepVerticalTitleProps, StepperHorizontal, type StepperHorizontalProps, StepperVertical, type StepperVerticalProps, Svg, SvgBase, type SvgProps, type SvgState, Switch, SwitchBase, SwitchButton, SwitchButtonBase, type SwitchButtonProps, type SwitchContext, SwitchLabel, type SwitchProps, SwitchProvider, SystemProps, T, TBase, type TProps, Tab, TabBase, type TabIndexProps, type TabNavBarProps, type TabProps, Table, TableBase, type TableColumn, type TableContext, type TableProps, TableProvider, TableSortIcon, type TableSortIconProps, Tabs, TabsBase, type TabsProps, type TabsSize, Tag, type TagColor, type TagColorTokens, type TagContainerStyles, type TagHierarchy, type TagInnerProps, type TagProps, TagToggle, type TagToggleHierarchy, type TagToggleInnerProps, type TagToggleProps, type TagVariantCanonical, Tbody, TbodyBase, type TbodyProps, Td, TdBase, type TdProps, type TextAlignProps, TextButton, type TextDecorationProps, type TextOverflowProps, type TextShadowProps, type TextTransformProps, Textarea, TextareaBase, type TextareaProps, Tfoot, TfootBase, type TfootProps, Th, ThBase, type ThProps, Thead, type TheadProps, ThemeGet, type ThemingProps, type TimeItem, type TimeResult, type TimeUnitMode, type TimingFunctionGetter, type ToastDuration, type ToastListItem, type ToastOptions, type ToastSetup, _default$2 as Toaster, Tooltip, type TooltipProps, type TopProps, Tr, TrBase, type TrProps, type Transform, type TransformGetter, type TransformOriginProps, type TransformProps, type TransformsProps, type TransitionDelayProps, type TransitionDuration, type TransitionDurationProps, type TransitionGetter, type TransitionPropertyGetter, type TransitionPropertyProps, type TransitionProps, type TransitionTimingFunctionProps, type TransitionsProps, type TranslateXProps, type TranslateYProps, Tree, TreeBase, TreeIcon, TreeItem, TreeItemBase, type TreeItemId, type TreeItemLinkProps, type TreeItemProps, type TreeOnToggleEvent, type TreeProps, TreeProvider, TreeText, Tutorial, TutorialCard, type TutorialCardProps, type TutorialDataStep, type TutorialProps, TutorialStep, type TutorialStepProps, type TutorialStepWrapper, type TypographyProps, UseControlledProps, type UsePaginationProps, type UsePopoverProps, type UseSelectProps, UseSelectReturnType, type UseSidemenuItemV2Return, type UseSidemenuV2Return, type UserSelectProps, VC, VStyled, type VerticalAlignProps, type VisibilityProps, VuiComponent, VuiComponentConfig, type VuiContext, VuiContextProvider, type VuiIcon, type VuiIcons, VuiProvider, type VuiTheme, type VuiThemeDefaults, type VuiThemeExtensions, type WhiteSpaceProps, type WidthProps, WordBreakProps, type ZIndex, type ZIndexGetter, type ZIndexProps, __DEV__, activeClassName, activeItemShade, addBodyClass, addElement, _default$3 as animations, assignRef, icons_d_exports as baseIcons, _default$4 as borders, bounce, callAll, cdnFontsPath, cdnStagUrl, cdnTestUrl, cdnUrl, cdnUrls, _default$5 as colors, compareBy, _default$6 as components, containerId, createContext, createGlobalStyle, cs, css, dateFormats, defaultDuration, defaultIcons, defaultTheme, dialogStatusMapping, dimmedBorderColor, _default$7 as durations, ellipsisOverflow, extendTheme, fadeDown, fadeIn, fadeLeft, fadeOut, fadeRight, fadeUp, fastToastDuration, filterUndefined, _default$8 as fontFaces, _default$9 as fontSizes, _default$10 as fontWeights, _default$11 as fonts, formatDate, formatIsoDate, _default$12 as foundations, generateDateByUTCValue, generateMenuItemId, getCurrentYear, getDateUTCValue, getLoggedInLink, getOptionText, getPaginationItems, hexToRGBA, cache as iconsCache, isActivePath, isArray, isFunction, isJsx, isNumber, isObject, isReactText, isString, isTruncated, isValidDate, manager, maxDateTimestamp, maxLines, mediaBetween, mediaDown, mediaUp, merge, mergeRefs, minDateTimestamp, modalAnimation, modalClass, modalJustifyContent, months, monthsShort, noScrollClass, noop, normalizeToId, objectFilter, omitThemingProps, parseHSL, parseIsoDate, pulse, _default$13 as radii, random, removeBodyClass, removeElement, resolveTagVariantKey, resolveVariantKey, _default$14 as ringWidths, runIfFn, sameDate, sameYear, sameYearSameMonth, _default$15 as screens, _default$16 as shadows, _default$17 as sizes, slowToastDuration, _default$18 as spaces, spin, styled, system, th, toggleItem, _default$19 as transforms, _default$20 as transitions, uid, useBetween, useBodyScrollLock, useButtonContext, useButtonGroupContext, useCallbackRef, useCheckboxGroupContext, useClickOutside, useControlled, useCopyToClipboard, useDialog, useDialogContext, useDown, useFooterLinks, useHeaderContext, useHeaderLinks, useIds, useIsMounted, useLinks, useListContext, useLoadLinks, useMenuContext, useModalContext, useModalManager, useNotificationContext, useOfflineMode, usePagination, usePaginationContext, usePopover, usePopoverContext, useRadioGroupContext, useSidemenuContext, useStyleConfig, useSwitchContext, useTableContext, useTh, useTheme, useToast, useTreeContext, useUp, useViewportWidth, useVuiContext, utcDateToLocale, v, validateDateFormat, viewYears, vui, vuiActionAI, vuiActionBlue, vuiActionBrand, vuiActionContrast, vuiActionDanger, vuiActionEucalyptus, vuiActionGeneric, vuiActionGrey, vuiActionLavender, vuiActionSuccess, vuiActionTerracotta, vuiActionTokens, vuiActionYellow, vuiColorBase, vuiColorCyan, vuiColorDarkBlue, vuiColorDigiGreen, vuiColorEarth, vuiColorEnergyRed, vuiColorEucalyptus, vuiColorLandGreen, vuiColorLavender, vuiColorOpacityDark, vuiColorOpacityLight, vuiColorPine, vuiColorPrimitives, vuiColorSandstone, vuiColorSeaBlue, vuiColorSemantics, vuiColorSkyBlue, vuiColorSunflower, vuiColorTerracotta, vuiColorToRGBA, vuiColorWarmGrey, vuiControlTokens, vuiDataTokens, vuiFeedbackTokens, vuiGradientTokens, vuiNavigationBackground, vuiNavigationBorder, vuiNavigationForeground, vuiNavigationTokens, vuiNextAllTokens, vuiSemanticBackground, vuiSemanticForeground, vuiUtilityBorder, vuiUtilityLoading, vuiUtilityMisc, vuiUtilityTokens, weekDays, wordBreak, _default$21 as zIndices };
package/dist/index.js CHANGED
@@ -52,22 +52,16 @@ import Portal from "./portal/portal.js";
52
52
  import Box, { BoxBase } from "./box/box.js";
53
53
  import toast_default from "./toast/toast.js";
54
54
  import { NotificationProvider, useNotificationContext } from "./notification/context.js";
55
- import { ButtonGroupProvider, useButtonGroupContext } from "./buttonGroup/context.js";
56
55
  import Svg, { SvgBase } from "./svg/svg.js";
57
56
  import { icons_exports } from "./icons/baseIcons/icons.js";
58
57
  import { defaultIcons } from "./icons/consts.js";
59
58
  import cache from "./icons/cache.js";
60
59
  import Icon from "./icon/icon.js";
61
- import { ButtonProvider, useButtonContext } from "./button/context.js";
62
- import ButtonIcon from "./button/buttonIcon.js";
63
- import T, { TBase } from "./t/t.js";
64
- import { Lead } from "./t/specialVariants.js";
65
- import ButtonText from "./button/buttonText.js";
66
- import { resolveVariantKey } from "./button/utils.js";
67
- import Button, { ButtonBase } from "./button/button.js";
68
- import { AppButton, BackButton, CTAButton, CloseButton, DangerButton, DismissButton, IconButton, LineButton, TextButton } from "./button/buttons.js";
60
+ import { DismissButton } from "./dismissButton/DismissButton.js";
69
61
  import NotificationAction from "./notification/notificationAction.js";
70
62
  import NotificationIcon from "./notification/notificationIcon.js";
63
+ import T, { TBase } from "./t/t.js";
64
+ import { Lead } from "./t/specialVariants.js";
71
65
  import NotificationText from "./notification/notificationText.js";
72
66
  import NotificationTitle from "./notification/notificationTitle.js";
73
67
  import Notification from "./notification/notification.js";
@@ -93,6 +87,13 @@ import { resolveTagVariantKey } from "./tag/utils.js";
93
87
  import Tag from "./tag/tag.js";
94
88
  import Badge from "./badge/badge.js";
95
89
  import Breadcrumbs, { BreadcrumbsBase } from "./breadcrumbs/breadcrumbs.js";
90
+ import { ButtonGroupProvider, useButtonGroupContext } from "./buttonGroup/context.js";
91
+ import { ButtonProvider, useButtonContext } from "./button/context.js";
92
+ import ButtonIcon from "./button/buttonIcon.js";
93
+ import ButtonText from "./button/buttonText.js";
94
+ import { resolveVariantKey } from "./button/utils.js";
95
+ import Button, { ButtonBase } from "./button/button.js";
96
+ import { AppButton, BackButton, CTAButton, CloseButton, DangerButton, IconButton, LineButton, TextButton } from "./button/buttons.js";
96
97
  import ButtonGroup, { ButtonGroupBase } from "./buttonGroup/buttonGroup.js";
97
98
  import ButtonToggleGroup from "./buttonToggleGroup/buttonToggleGroup.js";
98
99
  import { maxDateTimestamp, minDateTimestamp, months, monthsShort, viewYears, weekDays } from "./calendar/consts.js";
@@ -1,4 +1,4 @@
1
- import { NotificationIntent, NotificationProps, NotificationStatus, NotificationStatusEntry, NotificationStatusMapping, NotificationVariant, NotificationVariantHierarchy, NotificationVariantLegacy } from "./notification.types.js";
1
+ import { NotificationIntent, NotificationLayout, NotificationProps, NotificationStatus, NotificationStatusEntry, NotificationStatusMapping, NotificationVariant, NotificationVariantHierarchy, NotificationVariantLegacy } from "./notification.types.js";
2
2
  import { NotificationProvider, useNotificationContext } from "./context.js";
3
3
  import { NotificationAction } from "./notificationAction.js";
4
4
  import { NotificationIcon } from "./notificationIcon.js";
@@ -1 +1 @@
1
- {"version":3,"file":"notification.d.ts","names":[],"sources":["../../src/notification/notification.tsx"],"mappings":";;;;;;;;;;;AAuDA;cAAa,YAAA,EAkHP,YAAA,QAAoB,iBAAA;EACxB,MAAA,SAAe,kBAAA;EACf,IAAA,SAAa,gBAAA;EACb,IAAA,SAAa,gBAAA;EACb,KAAA,SAAc,iBAAA;AAAA"}
1
+ {"version":3,"file":"notification.d.ts","names":[],"sources":["../../src/notification/notification.tsx"],"mappings":";;;;;;;;;;;AA4DA;cAAa,YAAA,EAyIP,YAAA,QAAoB,iBAAA;EACxB,MAAA,SAAe,kBAAA;EACf,IAAA,SAAa,gBAAA;EACb,IAAA,SAAa,gBAAA;EACb,KAAA,SAAc,iBAAA;AAAA"}
@@ -7,13 +7,13 @@ import styled from "../core/styled.js";
7
7
  import vui from "../core/vui.js";
8
8
  import Box from "../box/box.js";
9
9
  import { NotificationProvider } from "./context.js";
10
- import { DismissButton } from "../button/buttons.js";
10
+ import { DismissButton } from "../dismissButton/DismissButton.js";
11
11
  import { INTENT_ICON_MAP, LOADING_ICON_PROPS, notificationStatusMapping } from "./consts.js";
12
12
  import NotificationAction from "./notificationAction.js";
13
13
  import NotificationIcon from "./notificationIcon.js";
14
14
  import NotificationText from "./notificationText.js";
15
15
  import NotificationTitle from "./notificationTitle.js";
16
- import { DEFAULT_VARIANT, resolveNotificationVariant } from "./utils.js";
16
+ import { DEFAULT_VARIANT, inferNotificationLayout, resolveNotificationAria, resolveNotificationVariant } from "./utils.js";
17
17
  import { jsx, jsxs } from "react/jsx-runtime";
18
18
 
19
19
  //#region src/notification/notification.tsx
@@ -53,16 +53,29 @@ const NotificationContainer = styled(Box)`
53
53
  * Handles multiple states, like info, error or loading.
54
54
  */
55
55
  const Notification = vui((props, ref) => {
56
- const { action, children, className, icon, intent, isLoading, onClose, showDismissButton, size, status, statusMapping, text, title, variant: variantProp = DEFAULT_VARIANT, align, verticalAlign, ...rest } = props;
56
+ const { action, align, ariaLive, children, className, icon, intent, isLoading, onClose, role, showDismissButton, size, status, statusMapping, text, title, variant: variantProp = DEFAULT_VARIANT, verticalAlign, ...rest } = props;
57
57
  const statuses = {
58
58
  ...notificationStatusMapping,
59
59
  ...statusMapping
60
60
  };
61
61
  const statusProps = status ? statuses[status] : void 0;
62
62
  const resolvedVariant = variantProp !== "inline" ? variantProp : statusProps?.variant ?? variantProp;
63
- const resolvedIntent = intent ?? statusProps?.intent;
63
+ const intentFromProps = intent ?? statusProps?.intent;
64
64
  const resolvedIsLoading = isLoading ?? statusProps?.isLoading;
65
+ const resolvedIntent = resolvedIsLoading && intentFromProps == null ? "info" : intentFromProps;
65
66
  const { themeKey, isBanner } = resolveNotificationVariant(resolvedVariant, resolvedIntent);
67
+ const layout = inferNotificationLayout({
68
+ action,
69
+ text,
70
+ title,
71
+ hasStatus: !!statusProps
72
+ });
73
+ const aria = resolveNotificationAria({
74
+ intent: resolvedIntent,
75
+ isLoading: resolvedIsLoading
76
+ });
77
+ const resolvedRole = role ?? aria.role;
78
+ const resolvedAriaLive = ariaLive ?? aria.ariaLive;
66
79
  const styles = useStyleConfig("Notification", {
67
80
  variant: themeKey,
68
81
  size
@@ -78,7 +91,9 @@ const Notification = vui((props, ref) => {
78
91
  intent: resolvedIntent,
79
92
  isLoading: resolvedIsLoading
80
93
  });
81
- const alignSelf = (align ?? (verticalAlign === "center" ? "center" : verticalAlign === "flex-start" ? "top" : void 0)) === "center" ? "center" : "flex-start";
94
+ context.layout = layout;
95
+ const resolvedAlign = align ?? (verticalAlign === "center" ? "center" : verticalAlign === "flex-start" ? "top" : void 0);
96
+ const alignSelf = (resolvedAlign ?? (layout === "one-line" ? "center" : "top")) === "center" ? "center" : "flex-start";
82
97
  return /* @__PURE__ */ jsx(NotificationProvider, {
83
98
  value: context,
84
99
  children: /* @__PURE__ */ jsxs(NotificationContainer, {
@@ -86,7 +101,13 @@ const Notification = vui((props, ref) => {
86
101
  borderWidth: 1,
87
102
  className: cs("vui-notification", className),
88
103
  ref,
89
- role: "status",
104
+ role: resolvedRole,
105
+ "aria-live": resolvedAriaLive,
106
+ "data-intent": resolvedIntent,
107
+ "data-variant": isBanner ? "banner" : "inline",
108
+ "data-layout": layout,
109
+ "data-loading": resolvedIsLoading ? "true" : void 0,
110
+ "data-align": resolvedAlign,
90
111
  w: "fit-content",
91
112
  $dismissFg: styles.container?.["--vui-dismiss-fg"],
92
113
  $isBanner: isBanner,