@astryxdesign/core 0.2.0-canary.33d4e98 → 0.2.0-canary.4ffab6f

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 (115) hide show
  1. package/dist/Chat/ChatLayout.d.ts +7 -0
  2. package/dist/Chat/ChatLayout.d.ts.map +1 -1
  3. package/dist/Chat/ChatLayout.js +14 -3
  4. package/dist/DropdownMenu/DropdownMenuSubMenu.d.ts.map +1 -1
  5. package/dist/DropdownMenu/DropdownMenuSubMenu.js +9 -1
  6. package/dist/DropdownMenu/menuItemHover.d.ts +1 -0
  7. package/dist/DropdownMenu/menuItemHover.d.ts.map +1 -1
  8. package/dist/DropdownMenu/menuItemHover.js +1 -0
  9. package/dist/Field/FieldLabel.d.ts +2 -1
  10. package/dist/Field/FieldLabel.d.ts.map +1 -1
  11. package/dist/Field/FieldLabel.js +7 -3
  12. package/dist/FieldStatus/FieldStatus.d.ts.map +1 -1
  13. package/dist/FieldStatus/FieldStatus.js +12 -2
  14. package/dist/Heading/Heading.d.ts.map +1 -1
  15. package/dist/Heading/Heading.js +3 -2
  16. package/dist/Lightbox/Lightbox.d.ts.map +1 -1
  17. package/dist/Lightbox/Lightbox.js +15 -2
  18. package/dist/MultiSelector/MultiSelector.d.ts.map +1 -1
  19. package/dist/MultiSelector/MultiSelector.js +7 -3
  20. package/dist/Selector/Selector.d.ts.map +1 -1
  21. package/dist/Selector/Selector.js +6 -2
  22. package/dist/Table/plugins/rowExpansion/useTableRowExpansion.d.ts +18 -3
  23. package/dist/Table/plugins/rowExpansion/useTableRowExpansion.d.ts.map +1 -1
  24. package/dist/Table/plugins/rowExpansion/useTableRowExpansion.js +21 -3
  25. package/dist/Table/plugins/tree/useTableTreeData.d.ts +11 -0
  26. package/dist/Table/plugins/tree/useTableTreeData.d.ts.map +1 -1
  27. package/dist/Table/plugins/tree/useTableTreeData.js +36 -2
  28. package/dist/Text/Text.d.ts +10 -1
  29. package/dist/Text/Text.d.ts.map +1 -1
  30. package/dist/Text/Text.js +25 -2
  31. package/dist/Text/index.d.ts +2 -2
  32. package/dist/Text/index.d.ts.map +1 -1
  33. package/dist/TextArea/TextArea.d.ts.map +1 -1
  34. package/dist/TextArea/TextArea.js +106 -38
  35. package/dist/Thumbnail/Thumbnail.d.ts.map +1 -1
  36. package/dist/Thumbnail/Thumbnail.js +51 -45
  37. package/dist/Timestamp/Timestamp.js +1 -1
  38. package/dist/TopNav/TopNavMegaMenu.d.ts.map +1 -1
  39. package/dist/TopNav/TopNavMegaMenu.js +9 -3
  40. package/dist/astryx.css +45 -5
  41. package/dist/astryx.umd.js +47 -47
  42. package/dist/astryx.umd.js.map +4 -4
  43. package/dist/hooks/containerReveal.pool.stylex.d.ts +281 -0
  44. package/dist/hooks/containerReveal.pool.stylex.d.ts.map +1 -0
  45. package/dist/hooks/containerReveal.pool.stylex.js +281 -0
  46. package/dist/hooks/index.d.ts +2 -0
  47. package/dist/hooks/index.d.ts.map +1 -1
  48. package/dist/hooks/index.js +2 -1
  49. package/dist/hooks/useContainerReveal.d.ts +83 -0
  50. package/dist/hooks/useContainerReveal.d.ts.map +1 -0
  51. package/dist/hooks/useContainerReveal.js +123 -0
  52. package/dist/hooks/useInputStatusIcon.d.ts.map +1 -1
  53. package/dist/hooks/useInputStatusIcon.js +11 -0
  54. package/dist/theme/defineTheme.d.ts +6 -0
  55. package/dist/theme/defineTheme.d.ts.map +1 -1
  56. package/dist/theme/expandColorScale.d.ts +19 -2
  57. package/dist/theme/expandColorScale.d.ts.map +1 -1
  58. package/dist/theme/expandColorScale.js +38 -10
  59. package/dist/theme/index.d.ts +3 -3
  60. package/dist/theme/index.d.ts.map +1 -1
  61. package/dist/theme/types.d.ts +39 -2
  62. package/dist/theme/types.d.ts.map +1 -1
  63. package/locales/en.json +16 -0
  64. package/locales/pseudo.json +12 -0
  65. package/package.json +3 -3
  66. package/src/Chat/ChatLayout.test.tsx +57 -0
  67. package/src/Chat/ChatLayout.tsx +22 -1
  68. package/src/DropdownMenu/DropdownMenuSubMenu.test.tsx +29 -1
  69. package/src/DropdownMenu/DropdownMenuSubMenu.tsx +13 -5
  70. package/src/DropdownMenu/menuItemHover.ts +1 -0
  71. package/src/Field/Field.doc.mjs +4 -0
  72. package/src/Field/FieldLabel.test.tsx +25 -0
  73. package/src/Field/FieldLabel.tsx +11 -2
  74. package/src/FieldStatus/FieldStatus.doc.mjs +1 -0
  75. package/src/FieldStatus/FieldStatus.test.tsx +61 -0
  76. package/src/FieldStatus/FieldStatus.tsx +14 -3
  77. package/src/Heading/Heading.tsx +2 -1
  78. package/src/Lightbox/Lightbox.test.tsx +33 -0
  79. package/src/Lightbox/Lightbox.tsx +15 -3
  80. package/src/MultiSelector/MultiSelector.test.tsx +34 -0
  81. package/src/MultiSelector/MultiSelector.tsx +13 -8
  82. package/src/Selector/Selector.test.tsx +30 -0
  83. package/src/Selector/Selector.tsx +7 -3
  84. package/src/Table/plugins/rowExpansion/useTableRowExpansion.tsx +21 -3
  85. package/src/Table/plugins/tree/useTableTreeData.test.tsx +161 -2
  86. package/src/Table/plugins/tree/useTableTreeData.tsx +54 -1
  87. package/src/Table/useTableRowExpansion.doc.mjs +55 -2
  88. package/src/Table/useTableTreeData.doc.mjs +9 -0
  89. package/src/Text/Heading.doc.mjs +3 -3
  90. package/src/Text/Text.doc.mjs +1 -1
  91. package/src/Text/Text.test.tsx +42 -0
  92. package/src/Text/Text.tsx +25 -1
  93. package/src/Text/index.ts +2 -6
  94. package/src/TextArea/TextArea.doc.mjs +2 -2
  95. package/src/TextArea/TextArea.test.tsx +112 -7
  96. package/src/TextArea/TextArea.tsx +142 -49
  97. package/src/Thumbnail/Thumbnail.test.tsx +24 -1
  98. package/src/Thumbnail/Thumbnail.tsx +27 -34
  99. package/src/TopNav/TopNavMegaMenu.tsx +26 -2
  100. package/src/__tests__/babelPluginAddExtensions.test.ts +190 -0
  101. package/src/hooks/containerReveal.pool.stylex.ts +464 -0
  102. package/src/hooks/index.ts +7 -0
  103. package/src/hooks/useContainerReveal.test.tsx +116 -0
  104. package/src/hooks/useContainerReveal.ts +180 -0
  105. package/src/hooks/useInputStatusIcon.test.tsx +59 -0
  106. package/src/hooks/useInputStatusIcon.tsx +12 -1
  107. package/src/theme/defineTheme.ts +6 -0
  108. package/src/theme/expandColorScale.test.ts +144 -0
  109. package/src/theme/expandColorScale.ts +53 -15
  110. package/src/theme/index.ts +4 -8
  111. package/src/theme/types.ts +43 -13
  112. package/dist/Thumbnail/thumbnail.markers.stylex.d.ts +0 -9
  113. package/dist/Thumbnail/thumbnail.markers.stylex.d.ts.map +0 -1
  114. package/dist/Thumbnail/thumbnail.markers.stylex.js +0 -14
  115. package/src/Thumbnail/thumbnail.markers.stylex.ts +0 -12
@@ -1 +1 @@
1
- {"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../src/Text/Text.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAyB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE7D,OAAO,KAAK,EACV,QAAQ,EAER,QAAQ,EACR,SAAS,EACT,UAAU,EACV,WAAW,EACX,WAAW,EACX,SAAS,EACT,QAAQ,EACT,MAAM,gBAAgB,CAAC;AAkBxB,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,UAAU,CAAC;AAE7C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAO5C,YAAY,EAAC,QAAQ,EAAE,QAAQ,EAAC,CAAC;AAEjC,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IAEpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;;;OAMG;IACH,kBAAkB,CAAC,EAAE,OAAO,GAAG,cAAc,CAAC;IAE9C;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;OAIG;IACH,EAAE,CAAC,EAAE,MAAM,GAAG,GAAG,GAAG,KAAK,GAAG,OAAO,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC1D;AA2BD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAa,EACb,IAAI,EACJ,KAAK,EACL,MAAM,EACN,OAAkB,EAClB,QAAY,EACZ,kBAAyB,EACzB,SAAS,EACT,QAAQ,EACR,OAAiB,EACjB,UAAkB,EAClB,gBAAwB,EACxB,iBAAyB,EACzB,MAAM,EACN,SAAS,EACT,KAAK,EACL,EAAE,EAAE,SAAkB,EACtB,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,+BAmFX;yBAxGe,IAAI"}
1
+ {"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../src/Text/Text.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAyB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE7D,OAAO,KAAK,EACV,QAAQ,EAER,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,UAAU,EACV,WAAW,EACX,WAAW,EACX,SAAS,EACT,QAAQ,EACT,MAAM,gBAAgB,CAAC;AAkBxB,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,UAAU,CAAC;AAE7C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAO5C,YAAY,EAAC,QAAQ,EAAE,QAAQ,EAAC,CAAC;AAEjC,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IAEpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;;;OAMG;IACH,kBAAkB,CAAC,EAAE,OAAO,GAAG,cAAc,CAAC;IAE9C;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;OAIG;IACH,EAAE,CAAC,EAAE,MAAM,GAAG,GAAG,GAAG,KAAK,GAAG,OAAO,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC1D;AA2BD;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,SAAS,GAAG,gBAAgB,CAQpE;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAa,EACb,IAAI,EACJ,KAAK,EACL,MAAM,EACN,OAAkB,EAClB,QAAY,EACZ,kBAAyB,EACzB,SAAS,EACT,QAAQ,EACR,OAAiB,EACjB,UAAkB,EAClB,gBAAwB,EACxB,iBAAyB,EACzB,MAAM,EACN,SAAS,EACT,KAAK,EACL,EAAE,EAAE,SAAkB,EACtB,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,+BAwFX;yBA7Ge,IAAI"}
package/dist/Text/Text.js CHANGED
@@ -22,7 +22,7 @@ import { useTruncation } from "./useTruncation.js";
22
22
  import { mergeProps, mergeRefs } from "../utils/index.js";
23
23
  import { themeProps } from "../utils/themeProps.js";
24
24
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
25
- const LazyXDSTooltip = /*#__PURE__*/lazy(async () => import('../Tooltip/Tooltip').then(mod => ({
25
+ const LazyXDSTooltip = /*#__PURE__*/lazy(async () => import("../Tooltip/Tooltip.js").then(mod => ({
26
26
  default: mod.Tooltip
27
27
  })));
28
28
  // Default color by text type — custom types fall back to 'primary'
@@ -50,6 +50,24 @@ function resolveStyleType(type) {
50
50
  return 'body';
51
51
  }
52
52
 
53
+ /**
54
+ * Resolve the StyleX baseline color. Built-in colors map to their own color
55
+ * style; custom (theme-defined) colors fall back to the `primary` baseline —
56
+ * their actual color comes from theme CSS (`.astryx-text.<color>` /
57
+ * `.astryx-heading.<color>`), which the rendered `color` class targets.
58
+ *
59
+ * Exported so Heading applies the same custom-color fallback as Text.
60
+ */
61
+ export function resolveStyleColor(color) {
62
+ // The `in` guard is a runtime check for consumer-augmented custom colors
63
+ // (which widen `TextColor` beyond the built-ins via TextColorMap); within
64
+ // core the two types coincide, so no cast is needed.
65
+ if (color in colorStyles) {
66
+ return color;
67
+ }
68
+ return 'primary';
69
+ }
70
+
53
71
  /**
54
72
  * Semantic text component. Renders text with type-based styling from the theme.
55
73
  *
@@ -93,6 +111,11 @@ export function Text({
93
111
  // Resolve style type — custom types fall back to 'body' for StyleX baseline
94
112
  const styleType = resolveStyleType(type);
95
113
 
114
+ // Resolve style color — custom colors fall back to 'primary' for StyleX
115
+ // baseline; the real color comes from theme CSS via the rendered `color`
116
+ // class (see themeProps below).
117
+ const styleColor = resolveStyleColor(resolvedColor);
118
+
96
119
  // Resolve wordBreak with smart default
97
120
  const resolvedWordBreak = wordBreak ?? (maxLines === 1 ? 'break-all' : 'break-word');
98
121
 
@@ -122,7 +145,7 @@ export function Text({
122
145
  type,
123
146
  size,
124
147
  color: resolvedColor
125
- }), stylex.props(colorStyles[resolvedColor], sizeByTypeStyles[styleType], size && sizeStyles[size], defaultWeightByTypeStyles[styleType], weight && weightStyles[weight],
148
+ }), stylex.props(colorStyles[styleColor], sizeByTypeStyles[styleType], size && sizeStyles[size], defaultWeightByTypeStyles[styleType], weight && weightStyles[weight],
126
149
  // Display: use truncation styles when maxLines > 0
127
150
  maxLines === 1 ? truncationStyles.singleLine : maxLines > 1 ? truncationStyles.multiLine : displayStyles[resolvedDisplay],
128
151
  // Word break when truncating
@@ -2,8 +2,8 @@
2
2
  * @file Text component exports
3
3
  * @position Entry point for Text components
4
4
  */
5
- export { Text, type TextProps, type TextType, type TextSize, } from './Text';
5
+ export { Text, type TextProps, type TextType, type TextSize } from './Text';
6
6
  export { Heading, type HeadingProps, type HeadingLevel, type HeadingType, } from '../Heading';
7
- export type { TextColor, TextWeight, TextDisplay, TextJustify, WordBreak, TextWrap, TextXStyleAllowed, ProseElement, } from '../theme/types';
7
+ export type { TextColor, TextColorMap, TextWeight, TextDisplay, TextJustify, WordBreak, TextWrap, TextXStyleAllowed, ProseElement, } from '../theme/types';
8
8
  export { useTruncation, type UseTruncationOptions, type UseTruncationReturn, } from './useTruncation';
9
9
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Text/index.ts"],"names":[],"mappings":"AAIA;;;GAGG;AAEH,OAAO,EACL,IAAI,EACJ,KAAK,SAAS,EACd,KAAK,QAAQ,EACb,KAAK,QAAQ,GACd,MAAM,QAAQ,CAAC;AAChB,OAAO,EACL,OAAO,EACP,KAAK,YAAY,EACjB,KAAK,YAAY,EACjB,KAAK,WAAW,GACjB,MAAM,YAAY,CAAC;AAGpB,YAAY,EACV,SAAS,EACT,UAAU,EACV,WAAW,EACX,WAAW,EACX,SAAS,EACT,QAAQ,EACR,iBAAiB,EACjB,YAAY,GACb,MAAM,gBAAgB,CAAC;AAGxB,OAAO,EACL,aAAa,EACb,KAAK,oBAAoB,EACzB,KAAK,mBAAmB,GACzB,MAAM,iBAAiB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Text/index.ts"],"names":[],"mappings":"AAIA;;;GAGG;AAEH,OAAO,EAAC,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,QAAQ,EAAE,KAAK,QAAQ,EAAC,MAAM,QAAQ,CAAC;AAC1E,OAAO,EACL,OAAO,EACP,KAAK,YAAY,EACjB,KAAK,YAAY,EACjB,KAAK,WAAW,GACjB,MAAM,YAAY,CAAC;AAGpB,YAAY,EACV,SAAS,EACT,YAAY,EACZ,UAAU,EACV,WAAW,EACX,WAAW,EACX,SAAS,EACT,QAAQ,EACR,iBAAiB,EACjB,YAAY,GACb,MAAM,gBAAgB,CAAC;AAGxB,OAAO,EACL,aAAa,EACb,KAAK,oBAAoB,EACzB,KAAK,mBAAmB,GACzB,MAAM,iBAAiB,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../src/TextArea/TextArea.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../src/TextArea/TextArea.tsx"],"names":[],"mappings":"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"}
@@ -15,27 +15,68 @@
15
15
  * - /apps/storybook/stories/TextArea.stories.tsx (storybook stories)
16
16
  * - /packages/cli/templates/blocks/components/TextArea/ (showcase blocks)
17
17
  */
18
- import { useId, useOptimistic, useTransition, useRef } from 'react';
18
+ import { useId, useOptimistic, useTransition, useRef, useCallback } from 'react';
19
19
  import * as stylex from '@stylexjs/stylex';
20
20
  import "../theme/tokens.stylex.js";
21
21
  import { colorVars, spacingVars, typographyVars, typeScaleVars } from "../theme/tokens.stylex.js";
22
22
  import { Field, inputWrapperStyles, inputStatusBorderStyles, inputStatusHoverShadowStyles, inputStatusFocusWithinStyles } from "../Field/index.js";
23
- import { renderIconSlot } from "../Icon/index.js";
23
+ import { Icon, renderIconSlot } from "../Icon/index.js";
24
24
  import { Spinner } from "../Spinner/index.js";
25
25
  import { useTooltip } from "../Tooltip/index.js";
26
26
  import { mergeProps, mergeRefs } from "../utils/index.js";
27
27
  import { useInputContainer } from "../hooks/useInputContainer.js";
28
28
  import { useInputStatusIcon } from "../hooks/useInputStatusIcon.js";
29
+ import { useAnnounce } from "../hooks/useAnnounce.js";
29
30
  import { useSize } from "../SizeContext/SizeContext.js";
30
31
  import { themeProps } from "../utils/themeProps.js";
31
- import { VisuallyHidden } from "../VisuallyHidden/index.js";
32
+ import { useTranslator } from "../i18n/index.js";
32
33
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
33
34
  const COUNTER_WARNING_THRESHOLD = 0.8;
34
35
  const styles = {
35
36
  wrapper: {
36
37
  kY2c9j: "x1vjfegm",
37
- kGNEyG: "x1cy8zhl",
38
+ k1xSpc: "x1lliihq",
39
+ kmVPX3: "x1717udv",
40
+ "--_textarea-inline-padding": "x1kdpo6e",
41
+ $$css: true
42
+ },
43
+ textarea: {
44
+ k1xSpc: "x1lliihq",
45
+ kzqmXN: "xh8yej3",
46
+ kB7OPa: "x9f619",
47
+ k7Eaqz: "xeuugli",
48
+ kMzoRj: "xc342km",
49
+ ksu8eU: "xng3xce",
38
50
  k8WAf4: "xu0wf1k",
51
+ kg3NbH: "x1w6f3ag",
52
+ kMv6JI: "x9ynric",
53
+ kGuDYH: "xjm74w1 x6pjikd",
54
+ kLWn49: "xw6l6zx",
55
+ kMwMTN: "x1tgivj0",
56
+ kWkggS: "xjbqb8w",
57
+ kI3sdo: "x1a2a7pz",
58
+ k8Qsv1: "xeyghm5",
59
+ kHenm0: "x288g5",
60
+ $$css: true
61
+ },
62
+ textareaDisabled: {
63
+ kkrTdU: "x1h6gzvc",
64
+ $$css: true
65
+ },
66
+ textareaWithStartIcon: {
67
+ kZCmMZ: "x1b6te9z",
68
+ $$css: true
69
+ },
70
+ textareaWithStatus: {
71
+ kwRFfy: "xp2dy4z",
72
+ $$css: true
73
+ },
74
+ textareaWithBusyStatus: {
75
+ kwRFfy: "x1g2apga",
76
+ $$css: true
77
+ },
78
+ textareaWithCounter: {
79
+ kGO01o: "xekm6fs",
39
80
  $$css: true
40
81
  }
41
82
  };
@@ -94,12 +135,17 @@ export function TextArea({
94
135
  ...rest
95
136
  }) {
96
137
  const size = useSize(sizeProp, 'md');
138
+ const t = useTranslator();
139
+ const announce = useAnnounce();
97
140
  const id = useId();
98
141
  const descriptionID = useId();
99
142
  const statusMessageID = useId();
100
143
  const counterID = useId();
101
144
  const textareaRef = useRef(null);
102
145
  const containerRef = useRef(null);
146
+ // Tracks the counter "zone" last announced (under / near / over) so we only
147
+ // announce on a zone change, not on every keystroke.
148
+ const counterZoneRef = useRef(null);
103
149
  const [, startTransition] = useTransition();
104
150
  const [optimisticValue, setOptimisticValue] = useOptimistic(value);
105
151
  const isBusy = isLoading || optimisticValue !== value;
@@ -128,6 +174,30 @@ export function TextArea({
128
174
  // The tooltip variant renders no message box; describe the input by the
129
175
  // tooltip's content instead so the status is still announced.
130
176
  statusTooltipDescribedBy, maxLength != null ? counterID : null, showsDisabledMessage ? disabledMessageTooltip.describedBy : null].filter(Boolean).join(' ') || undefined;
177
+
178
+ // Announce the character-count status through the shared live region, but
179
+ // only when the value crosses into a new zone (near the limit / over the
180
+ // limit) so we don't speak on every keystroke. Over-limit is assertive (an
181
+ // error the user should hear immediately); nearing the limit is polite.
182
+ const announceCounter = useCallback(length => {
183
+ if (maxLength == null) {
184
+ return;
185
+ }
186
+ const zone = length > maxLength ? 'over' : length >= maxLength * COUNTER_WARNING_THRESHOLD ? 'near' : 'under';
187
+ if (zone === counterZoneRef.current) {
188
+ return;
189
+ }
190
+ counterZoneRef.current = zone;
191
+ if (zone === 'over') {
192
+ announce(t('@astryx.textArea.charactersOverLimit', {
193
+ count: length - maxLength
194
+ }), 'assertive');
195
+ } else if (zone === 'near') {
196
+ announce(t('@astryx.textArea.charactersRemaining', {
197
+ count: maxLength - length
198
+ }));
199
+ }
200
+ }, [announce, t, maxLength]);
131
201
  const handleChange = e => {
132
202
  // Value can't change while showing a disabled message (the field is
133
203
  // read-only and non-native-disabled), but guard the handler too so the
@@ -136,6 +206,7 @@ export function TextArea({
136
206
  return;
137
207
  }
138
208
  const newValue = e.target.value;
209
+ announceCounter(newValue.length);
139
210
  onChange?.(newValue, e);
140
211
  if (changeAction && !e.defaultPrevented) {
141
212
  startTransition(async () => {
@@ -185,10 +256,15 @@ export function TextArea({
185
256
  ...mergeProps(themeProps('textarea', {
186
257
  size,
187
258
  status: status?.type ?? null
188
- }), stylex.props(inputWrapperStyles.base, styles.wrapper, textareaSizeStyles[size], effectivelyDisabled && inputWrapperStyles.disabled, status && inputStatusBorderStyles[status.type], status && !effectivelyDisabled && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], xstyle), className, style),
189
- children: [startIcon && renderIconSlot(startIcon, {
190
- size: 'sm',
191
- color: 'secondary'
259
+ }), stylex.props(inputWrapperStyles.base, styles.wrapper, isDisabled && inputWrapperStyles.disabled, status && inputStatusBorderStyles[status.type], status && !isDisabled && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], xstyle), className, style),
260
+ children: [startIcon && /*#__PURE__*/_jsx("span", {
261
+ ...{
262
+ className: "x10l6tqk xctzyg x1kiyvbf x47corl x78zum5"
263
+ },
264
+ children: renderIconSlot(startIcon, {
265
+ size: 'sm',
266
+ color: 'secondary'
267
+ })
192
268
  }), /*#__PURE__*/_jsx("textarea", {
193
269
  ...rest,
194
270
  ref: mergeRefs(ref, textareaRef),
@@ -215,41 +291,33 @@ export function TextArea({
215
291
  "aria-required": isRequired && !isOptional ? 'true' : undefined,
216
292
  "aria-invalid": status?.type === 'error' || maxLength != null && optimisticValue.length > maxLength ? 'true' : undefined,
217
293
  "aria-busy": isBusy || undefined,
294
+ ...stylex.props(styles.textarea, textareaSizeStyles[size], isDisabled && styles.textareaDisabled, Boolean(startIcon) && styles.textareaWithStartIcon, (status || isBusy) && styles.textareaWithStatus, isBusy && !!statusIcon && styles.textareaWithBusyStatus, maxLength != null && styles.textareaWithCounter)
295
+ }), (isBusy || statusIcon) && /*#__PURE__*/_jsxs("span", {
296
+ ...{
297
+ className: "x10l6tqk xctzyg x13oyzgk x47corl x78zum5 x6s0dn4 x1txdalj"
298
+ },
299
+ children: [isBusy && /*#__PURE__*/_jsx(Spinner, {
300
+ size: "sm"
301
+ }), statusIcon]
302
+ }), maxLength != null && /*#__PURE__*/_jsxs("div", {
303
+ id: counterID,
218
304
  ...{
219
305
  0: {
220
- className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx x1tgivj0 xjbqb8w x1a2a7pz xeyghm5 x288g5"
221
- },
222
- 2: {
223
- className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx x1tgivj0 xjbqb8w x1a2a7pz xeyghm5 x288g5 x1h6gzvc"
306
+ className: "x10l6tqk x112dmjn x13oyzgk x47corl x78zum5 x6s0dn4 xzye2dw x9ynric x141an7d x1ltkj2j xv1l7n4"
224
307
  },
225
308
  1: {
226
- className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx x1tgivj0 xjbqb8w x1a2a7pz xeyghm5 x288g5 x1we12cn"
227
- },
228
- 3: {
229
- className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx x1tgivj0 xjbqb8w x1a2a7pz xeyghm5 x288g5 x1h6gzvc x1we12cn"
309
+ className: "x10l6tqk x112dmjn x13oyzgk x47corl x78zum5 x6s0dn4 xzye2dw x9ynric x141an7d x1ltkj2j xjt36v0"
230
310
  }
231
- }[!!effectivelyDisabled << 1 | !!status << 0]
232
- }), isBusy && /*#__PURE__*/_jsx(Spinner, {
233
- size: "sm"
234
- }), statusIcon && /*#__PURE__*/_jsx("span", {
235
- ...{
236
- className: "x10l6tqk xctzyg x72tfeb x47corl x78zum5"
237
- },
238
- children: statusIcon
239
- })]
240
- }), maxLength != null && /*#__PURE__*/_jsxs("div", {
241
- id: counterID,
242
- ...{
243
- 0: {
244
- className: "x78zum5 x13a6bvl xcsaf9d x9ynric x141an7d xv1l7n4"
245
- },
246
- 1: {
247
- className: "x78zum5 x13a6bvl xcsaf9d x9ynric x141an7d xjt36v0"
248
- }
249
- }[!!(optimisticValue.length > maxLength) << 0],
250
- children: [optimisticValue.length, "/", maxLength, /*#__PURE__*/_jsx(VisuallyHidden, {
251
- "aria-live": "polite",
252
- children: optimisticValue.length >= maxLength * COUNTER_WARNING_THRESHOLD ? optimisticValue.length > maxLength ? `${optimisticValue.length - maxLength} characters over limit` : `${maxLength - optimisticValue.length} characters remaining` : ''
311
+ }[!!(optimisticValue.length > maxLength) << 0],
312
+ children: [optimisticValue.length > maxLength &&
313
+ /*#__PURE__*/
314
+ // Non-color cue so the over-limit state isn't conveyed by the red
315
+ // color alone (WCAG 1.4.1). Decorative — the count text and the
316
+ // live-region announcement carry the meaning.
317
+ _jsx(Icon, {
318
+ icon: "warning",
319
+ size: "sm"
320
+ }), optimisticValue.length, "/", maxLength]
253
321
  })]
254
322
  }), showsDisabledMessage && disabledMessageTooltip.renderTooltip(disabledMessage)]
255
323
  });
@@ -1 +1 @@
1
- {"version":3,"file":"Thumbnail.d.ts","sourceRoot":"","sources":["../../src/Thumbnail/Thumbnail.tsx"],"names":[],"mappings":"AAyCA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAM5C,MAAM,WAAW,cAAe,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;;;;;;OASG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACzC;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;OASG;IACH,YAAY,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAClC;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAyKD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,SAAS,CAAC,EACxB,GAAG,EACH,GAAG,EACH,KAAK,EACL,QAAQ,EACR,OAAO,EACP,SAAiB,EACjB,UAAkB,EAClB,YAAsB,EACtB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,cAAc,+BAiIhB;yBAhJe,SAAS"}
1
+ {"version":3,"file":"Thumbnail.d.ts","sourceRoot":"","sources":["../../src/Thumbnail/Thumbnail.tsx"],"names":[],"mappings":"AA2CA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAK5C,MAAM,WAAW,cAAe,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;;;;;;OASG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACzC;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;OASG;IACH,YAAY,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAClC;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAmJD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,SAAS,CAAC,EACxB,GAAG,EACH,GAAG,EACH,KAAK,EACL,QAAQ,EACR,OAAO,EACP,SAAiB,EACjB,UAAkB,EAClB,YAAsB,EACtB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,cAAc,+BA+IhB;yBA9Je,SAAS"}
@@ -24,6 +24,7 @@
24
24
  * - /apps/storybook/stories/Thumbnail.stories.tsx
25
25
  * - /packages/cli/templates/blocks/components/Thumbnail/ (showcase blocks)
26
26
  */
27
+ import { useState } from 'react';
27
28
  import * as stylex from '@stylexjs/stylex';
28
29
  import "../theme/tokens.stylex.js";
29
30
  import { colorVars, radiusVars, spacingVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
@@ -33,11 +34,10 @@ import { Skeleton } from "../Skeleton/index.js";
33
34
  import { Spinner } from "../Spinner/index.js";
34
35
  import { Tooltip } from "../Tooltip/Tooltip.js";
35
36
  import { useDevWarning } from "../hooks/useDevWarning.js";
37
+ import { useContainerReveal } from "../hooks/useContainerReveal.js";
36
38
  import { mergeProps } from "../utils/index.js";
37
39
  import { themeProps } from "../utils/themeProps.js";
38
40
  import { useTranslator } from "../i18n/index.js";
39
- import "./thumbnail.markers.stylex.js";
40
- import { thumbnailScope } from "./thumbnail.markers.stylex.js";
41
41
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
42
42
  // =============================================================================
43
43
  // Styles
@@ -53,38 +53,6 @@ const styles = {
53
53
  kHBbk8: "xc8icb0",
54
54
  $$css: true
55
55
  },
56
- imageContainer: {
57
- kVAEAm: "x1n2onr6",
58
- kzqmXN: "xh8yej3",
59
- kOBAk4: "x1plog1",
60
- kaIpWk: "xh6dtrn",
61
- kVQacm: "xb3r6kr",
62
- kWkggS: "x17x4s8c",
63
- $$css: true
64
- },
65
- interactive: {
66
- kkrTdU: "x1ypdohk",
67
- kI3sdo: "x1irc7jg",
68
- kInvED: "x1wfwxd8 xdjuwb3",
69
- $$css: true
70
- },
71
- overlay: {
72
- k5JduY: "x1s928wv",
73
- kwXMNM: "x1j6awrg",
74
- kv0HGH: "xarstr8",
75
- kUfP38: "x1k48kgn",
76
- kloYau: "x2q1x1w",
77
- kRicXK: "x1ywzrc5",
78
- kPNhGg: "x97pup0",
79
- kA8PQs: "x1dlmc9c",
80
- ks3ayO: "xyhc2n1",
81
- kAcZsS: "x1k7wiig",
82
- $$css: true
83
- },
84
- hoverOnPointer: {
85
- kJs8I2: "xi14tyy",
86
- $$css: true
87
- },
88
56
  removeButtonOverrides: {
89
57
  "--_button-radius": "xh8ntw8",
90
58
  kZKoxP: "x1qx5ct2",
@@ -157,14 +125,25 @@ export function Thumbnail({
157
125
  ...props
158
126
  }) {
159
127
  const t = useTranslator();
128
+
129
+ // Track the exact src that failed (rather than a boolean) so a changed src
130
+ // gets a fresh load attempt instead of the stale error.
131
+ const [erroredSrc, setErroredSrc] = useState(undefined);
160
132
  const hasSrc = src != null;
133
+ const hasError = hasSrc && erroredSrc === src;
161
134
  const showSkeleton = isLoading && !hasSrc;
162
- const showImage = hasSrc && !showSkeleton;
135
+ const showImage = hasSrc && !showSkeleton && !hasError;
163
136
  const showUploadOverlay = isLoading && hasSrc;
164
- const showPlaceholder = !isLoading && !hasSrc;
137
+ const showPlaceholder = !isLoading && !hasSrc || hasError;
165
138
  const isInteractive = onClick != null && !isDisabled && !isLoading;
166
139
  const hasRemove = onRemove != null && !isDisabled;
167
140
  const isHoverReveal = hasRemove && showRemoveOn === 'hover';
141
+ const {
142
+ getContainerProps,
143
+ getContentRevealProps
144
+ } = useContainerReveal({
145
+ isEnabled: isHoverReveal
146
+ });
168
147
  const accessibleName = label && alt ? `${label} — ${alt}` : label ?? alt ?? t('@astryx.thumbnail.fallbackName');
169
148
 
170
149
  // Without `alt`, the image is explicitly decorative rather than silently
@@ -184,6 +163,7 @@ export function Thumbnail({
184
163
  alt: alt ?? '',
185
164
  role: isImageDecorative ? 'presentation' : undefined,
186
165
  "aria-hidden": isImageDecorative || undefined,
166
+ onError: () => setErroredSrc(src),
187
167
  ...{
188
168
  className: "xh8yej3 x5yr21d xl1xv1r x1lliihq"
189
169
  }
@@ -197,14 +177,15 @@ export function Thumbnail({
197
177
  })]
198
178
  });
199
179
  const removeButtonEl = hasRemove ? /*#__PURE__*/_jsx("div", {
200
- ...{
201
- 0: {
202
- className: "x10l6tqk x8d4r5l xy3asu9 x1vjfegm x14ju556"
203
- },
204
- 1: {
205
- className: "x10l6tqk x8d4r5l xy3asu9 x1vjfegm x14ju556 xg01cxk xb7nc9r x1cyvi8a xhva3ql x19991ni xuedmi6 x12w9bfk xlr8y92"
206
- }
207
- }[!!isHoverReveal << 0],
180
+ ...mergeProps({
181
+ className: "x10l6tqk x8d4r5l xy3asu9 x1vjfegm x14ju556"
182
+ },
183
+ // The remove button is absolutely positioned in the corner, so it is
184
+ // already out of flow — an opacity-only reveal (layout preserved)
185
+ // matches its overlay placement instead of the clip recipe.
186
+ isHoverReveal ? getContentRevealProps({
187
+ isLayoutPreserved: true
188
+ }) : {}),
208
189
  children: /*#__PURE__*/_jsx(Button, {
209
190
  icon: /*#__PURE__*/_jsx(Icon, {
210
191
  icon: "close",
@@ -231,7 +212,32 @@ export function Thumbnail({
231
212
  ...mergeProps(themeProps('thumbnail'), stylex.props(styles.root, isDisabled && styles.disabled, xstyle), className, style),
232
213
  ...props,
233
214
  children: /*#__PURE__*/_jsxs("div", {
234
- ...stylex.props(styles.imageContainer, isHoverReveal && thumbnailScope, isInteractive && styles.interactive, isInteractive && styles.overlay, isInteractive && styles.hoverOnPointer),
215
+ ...mergeProps({
216
+ 0: {
217
+ className: "x1n2onr6 xh8yej3 x1plog1 xh6dtrn xb3r6kr x17x4s8c"
218
+ },
219
+ 4: {
220
+ className: "x1n2onr6 xh8yej3 x1plog1 xh6dtrn xb3r6kr x17x4s8c x1ypdohk x1irc7jg x1wfwxd8 xdjuwb3"
221
+ },
222
+ 2: {
223
+ className: "x1n2onr6 xh8yej3 x1plog1 xh6dtrn xb3r6kr x17x4s8c x1s928wv x1j6awrg xarstr8 x1k48kgn x2q1x1w x1ywzrc5 x97pup0 x1dlmc9c xyhc2n1 x1k7wiig"
224
+ },
225
+ 6: {
226
+ className: "x1n2onr6 xh8yej3 x1plog1 xh6dtrn xb3r6kr x17x4s8c x1ypdohk x1irc7jg x1wfwxd8 xdjuwb3 x1s928wv x1j6awrg xarstr8 x1k48kgn x2q1x1w x1ywzrc5 x97pup0 x1dlmc9c xyhc2n1 x1k7wiig"
227
+ },
228
+ 1: {
229
+ className: "x1n2onr6 xh8yej3 x1plog1 xh6dtrn xb3r6kr x17x4s8c xi14tyy"
230
+ },
231
+ 5: {
232
+ className: "x1n2onr6 xh8yej3 x1plog1 xh6dtrn xb3r6kr x17x4s8c x1ypdohk x1irc7jg x1wfwxd8 xdjuwb3 xi14tyy"
233
+ },
234
+ 3: {
235
+ className: "x1n2onr6 xh8yej3 x1plog1 xh6dtrn xb3r6kr x17x4s8c x1s928wv x1j6awrg xarstr8 x1k48kgn x2q1x1w x1ywzrc5 x97pup0 x1dlmc9c xyhc2n1 x1k7wiig xi14tyy"
236
+ },
237
+ 7: {
238
+ className: "x1n2onr6 xh8yej3 x1plog1 xh6dtrn xb3r6kr x17x4s8c x1ypdohk x1irc7jg x1wfwxd8 xdjuwb3 x1s928wv x1j6awrg xarstr8 x1k48kgn x2q1x1w x1ywzrc5 x97pup0 x1dlmc9c xyhc2n1 x1k7wiig xi14tyy"
239
+ }
240
+ }[!!isInteractive << 2 | !!isInteractive << 1 | !!isInteractive << 0], isHoverReveal ? getContainerProps() : {}),
235
241
  children: [isInteractive ? /*#__PURE__*/_jsx("button", {
236
242
  type: "button",
237
243
  onClick: onClick,
@@ -26,7 +26,7 @@ import { colorVars, spacingVars } from "../theme/tokens.stylex.js";
26
26
  import { formatInstant } from "./formatInstant.js";
27
27
  import { formatTooltipLines } from "./tooltipEntries.js";
28
28
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
29
- const LazyXDSTooltip = /*#__PURE__*/lazy(async () => import('../Tooltip/Tooltip').then(mod => ({
29
+ const LazyXDSTooltip = /*#__PURE__*/lazy(async () => import("../Tooltip/Tooltip.js").then(mod => ({
30
30
  default: mod.Tooltip
31
31
  })));
32
32
 
@@ -1 +1 @@
1
- {"version":3,"file":"TopNavMegaMenu.d.ts","sourceRoot":"","sources":["../../src/TopNav/TopNavMegaMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAiBf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAmK5C,MAAM,WAAW,mBAAoB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACvE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,wBAAgB,cAAc,CAAC,EAC7B,GAAG,EACH,KAAK,EACL,KAAK,EACL,QAAQ,EACR,KAAW,EACX,SAAe,EACf,YAAY,GACb,EAAE,mBAAmB,4BA+BrB;yBAvCe,cAAc"}
1
+ {"version":3,"file":"TopNavMegaMenu.d.ts","sourceRoot":"","sources":["../../src/TopNav/TopNavMegaMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAiBf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA2L5C,MAAM,WAAW,mBAAoB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACvE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,wBAAgB,cAAc,CAAC,EAC7B,GAAG,EACH,KAAK,EACL,KAAK,EACL,QAAQ,EACR,KAAW,EACX,SAAe,EACf,YAAY,GACb,EAAE,mBAAmB,4BA+BrB;yBAvCe,cAAc"}
@@ -51,6 +51,12 @@ const styles = {
51
51
  k1tdAh: "x12p7p72",
52
52
  $$css: true
53
53
  },
54
+ panelViewportFit: {
55
+ k1xSpc: "x78zum5",
56
+ kXwgrk: "xdt5ytf",
57
+ kskxy: "xbhvqqn",
58
+ $$css: true
59
+ },
54
60
  drawerHeader: {
55
61
  kjj79g: "x1qughib",
56
62
  $$css: true
@@ -288,11 +294,11 @@ function DefaultMegaMenu({
288
294
  onMouseEnter: handleMouseEnter,
289
295
  onMouseLeave: handleMouseLeave,
290
296
  ...{
291
- className: "x1prclbq x11xkdxz x13fuv20 x1pc3f07 x1hviunn x1i5ehqx xb3r6kr"
297
+ className: "x1prclbq x11xkdxz x13fuv20 x1pc3f07 x1hviunn x1i5ehqx xb3r6kr x78zum5 xdt5ytf x2lwn1j"
292
298
  },
293
299
  children: /*#__PURE__*/_jsxs("div", {
294
300
  ...{
295
- className: "x78zum5 x1a02dak x1qh66ti x8o8v82 xrrkdod xyzno7u"
301
+ className: "x78zum5 x1a02dak x1qh66ti x8o8v82 xrrkdod x1m1aaou x9f619 x1odjw0f xish69e"
296
302
  },
297
303
  children: [items != null && /*#__PURE__*/_jsx("div", {
298
304
  ...{
@@ -313,7 +319,7 @@ function DefaultMegaMenu({
313
319
  }), {
314
320
  placement: 'below',
315
321
  alignment: slot,
316
- xstyle: styles.panelAnimation
322
+ xstyle: [styles.panelAnimation, styles.panelViewportFit]
317
323
  })]
318
324
  });
319
325
  }