@telefonica/mistica 12.11.1 → 12.13.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 (337) hide show
  1. package/css/mistica.css +1 -1
  2. package/dist/avatar.css-mistica.js +2 -2
  3. package/dist/avatar.d.ts +3 -2
  4. package/dist/avatar.js +72 -17
  5. package/dist/avatar.js.flow +2 -1
  6. package/dist/badge.css-mistica.js +4 -4
  7. package/dist/badge.d.ts +2 -0
  8. package/dist/badge.js +49 -8
  9. package/dist/badge.js.flow +2 -0
  10. package/dist/boxed.js +5 -5
  11. package/dist/button-group.css-mistica.js +1 -1
  12. package/dist/button-group.js +7 -7
  13. package/dist/button-layout.css-mistica.js +12 -12
  14. package/dist/button-layout.js +1 -1
  15. package/dist/button.css-mistica.js +26 -26
  16. package/dist/button.js +127 -77
  17. package/dist/callout.css-mistica.js +2 -2
  18. package/dist/callout.d.ts +2 -1
  19. package/dist/callout.js +68 -16
  20. package/dist/callout.js.flow +2 -1
  21. package/dist/card.css-mistica.js +5 -5
  22. package/dist/card.js +47 -41
  23. package/dist/carousel.css-mistica.js +23 -25
  24. package/dist/carousel.css.d.ts +1 -0
  25. package/dist/carousel.css.js.flow +4 -0
  26. package/dist/carousel.d.ts +7 -1
  27. package/dist/carousel.js +237 -209
  28. package/dist/carousel.js.flow +9 -1
  29. package/dist/checkbox.css-mistica.js +6 -6
  30. package/dist/checkbox.js +1 -1
  31. package/dist/chip.css-mistica.js +2 -2
  32. package/dist/chip.d.ts +7 -11
  33. package/dist/chip.js +65 -22
  34. package/dist/chip.js.flow +11 -6
  35. package/dist/circle.css-mistica.js +1 -1
  36. package/dist/credit-card-number-field.css-mistica.js +3 -3
  37. package/dist/cvv-field.css-mistica.js +1 -1
  38. package/dist/date-time-picker.js +2 -2
  39. package/dist/desktop-container-type-context.js +14 -4
  40. package/dist/dialog.css-mistica.js +6 -6
  41. package/dist/dialog.d.ts +2 -10
  42. package/dist/dialog.js +1 -0
  43. package/dist/dialog.js.flow +6 -4
  44. package/dist/double-field.css-mistica.js +5 -4
  45. package/dist/empty-state-card.css-mistica.js +1 -1
  46. package/dist/empty-state.css-mistica.js +2 -2
  47. package/dist/empty-state.js +5 -5
  48. package/dist/fade-in.d.ts +2 -0
  49. package/dist/fade-in.js +59 -6
  50. package/dist/fade-in.js.flow +2 -0
  51. package/dist/feedback.css-mistica.js +1 -1
  52. package/dist/feedback.js +130 -115
  53. package/dist/fixed-footer-layout.css-mistica.js +36 -0
  54. package/dist/fixed-footer-layout.css.d.ts +9 -0
  55. package/dist/fixed-footer-layout.css.js.flow +17 -0
  56. package/dist/fixed-footer-layout.css.ts.vanilla.js +11 -0
  57. package/dist/fixed-footer-layout.js +35 -84
  58. package/dist/header.js +99 -129
  59. package/dist/highlighted-card.css-mistica.js +5 -5
  60. package/dist/highlighted-card.d.ts +1 -1
  61. package/dist/highlighted-card.js +20 -15
  62. package/dist/highlighted-card.js.flow +1 -1
  63. package/dist/icon-button.css-mistica.js +13 -0
  64. package/dist/icon-button.css.d.ts +1 -0
  65. package/dist/icon-button.css.js.flow +3 -0
  66. package/dist/icon-button.css.ts.vanilla.js +11 -0
  67. package/dist/icon-button.d.ts +2 -1
  68. package/dist/icon-button.js +51 -28
  69. package/dist/icon-button.js.flow +2 -1
  70. package/dist/icons/icon-error.css-mistica.js +20 -0
  71. package/dist/icons/icon-error.css.d.ts +2 -0
  72. package/dist/icons/icon-error.css.js.flow +4 -0
  73. package/dist/icons/icon-error.css.ts.vanilla.js +11 -0
  74. package/dist/icons/icon-error.js +22 -33
  75. package/dist/icons/icon-info.js +16 -28
  76. package/dist/icons/icon-success-vivo.js +10 -20
  77. package/dist/icons/icon-success.js +28 -44
  78. package/dist/image.css-mistica.js +3 -3
  79. package/dist/index.d.ts +2 -0
  80. package/dist/index.js +8 -0
  81. package/dist/index.js.flow +2 -0
  82. package/dist/list.css-mistica.js +7 -7
  83. package/dist/list.js +112 -71
  84. package/dist/loading-bar.css-mistica.js +6 -6
  85. package/dist/loading-bar.d.ts +2 -0
  86. package/dist/loading-bar.js +60 -6
  87. package/dist/loading-bar.js.flow +5 -1
  88. package/dist/maybe-dismissable.css-mistica.js +24 -0
  89. package/dist/maybe-dismissable.css.d.ts +3 -0
  90. package/dist/maybe-dismissable.css.js.flow +5 -0
  91. package/dist/maybe-dismissable.css.ts.vanilla.js +11 -0
  92. package/dist/maybe-dismissable.js +16 -51
  93. package/dist/media-queries.css-mistica.js +37 -5
  94. package/dist/menu.css-mistica.js +34 -0
  95. package/dist/menu.css.d.ts +11 -0
  96. package/dist/menu.css.js.flow +19 -0
  97. package/dist/menu.css.ts.vanilla.js +11 -0
  98. package/dist/menu.d.ts +2 -0
  99. package/dist/menu.js +53 -99
  100. package/dist/menu.js.flow +2 -0
  101. package/dist/navigation-bar.css-mistica.js +79 -0
  102. package/dist/navigation-bar.css.d.ts +17 -0
  103. package/dist/navigation-bar.css.js.flow +26 -0
  104. package/dist/navigation-bar.css.ts.vanilla.js +11 -0
  105. package/dist/navigation-bar.js +206 -334
  106. package/dist/navigation-breadcrumbs.css-mistica.js +27 -0
  107. package/dist/navigation-breadcrumbs.css.d.ts +5 -0
  108. package/dist/navigation-breadcrumbs.css.js.flow +7 -0
  109. package/dist/navigation-breadcrumbs.css.ts.vanilla.js +11 -0
  110. package/dist/navigation-breadcrumbs.js +20 -38
  111. package/dist/overlay.d.ts +2 -0
  112. package/dist/overlay.js +37 -11
  113. package/dist/overlay.js.flow +2 -0
  114. package/dist/package-version.js +1 -1
  115. package/dist/password-field.css-mistica.js +13 -0
  116. package/dist/password-field.css.d.ts +1 -0
  117. package/dist/password-field.css.js.flow +3 -0
  118. package/dist/password-field.css.ts.vanilla.js +11 -0
  119. package/dist/password-field.js +39 -55
  120. package/dist/popover.css-mistica.js +51 -0
  121. package/dist/popover.css.d.ts +12 -0
  122. package/dist/popover.css.js.flow +14 -0
  123. package/dist/popover.css.ts.vanilla.js +11 -0
  124. package/dist/popover.d.ts +2 -1
  125. package/dist/popover.js +97 -118
  126. package/dist/popover.js.flow +2 -1
  127. package/dist/progress-bar.css-mistica.js +3 -3
  128. package/dist/progress-bar.d.ts +2 -0
  129. package/dist/progress-bar.js +60 -7
  130. package/dist/progress-bar.js.flow +2 -0
  131. package/dist/radio-button.css-mistica.js +39 -0
  132. package/dist/radio-button.css.d.ts +6 -0
  133. package/dist/radio-button.css.js.flow +8 -0
  134. package/dist/radio-button.css.ts.vanilla.js +11 -0
  135. package/dist/radio-button.d.ts +1 -0
  136. package/dist/radio-button.js +81 -125
  137. package/dist/radio-button.js.flow +1 -0
  138. package/dist/responsive-layout.css-mistica.js +7 -4
  139. package/dist/responsive-layout.css.d.ts +1 -0
  140. package/dist/responsive-layout.css.js.flow +1 -0
  141. package/dist/responsive-layout.d.ts +2 -0
  142. package/dist/responsive-layout.js +19 -11
  143. package/dist/responsive-layout.js.flow +2 -0
  144. package/dist/screen-reader-only.css-mistica.js +2 -2
  145. package/dist/select.css-mistica.js +60 -0
  146. package/dist/select.css.d.ts +16 -0
  147. package/dist/select.css.js.flow +30 -0
  148. package/dist/select.css.ts.vanilla.js +11 -0
  149. package/dist/select.js +150 -272
  150. package/dist/skeleton-base.js +13 -32
  151. package/dist/skeletons.css-mistica.js +1 -1
  152. package/dist/skeletons.js +63 -42
  153. package/dist/skins/skin-contract.css.js.flow +1 -0
  154. package/dist/snackbar.css-mistica.js +4 -4
  155. package/dist/snackbar.d.ts +2 -0
  156. package/dist/snackbar.js +70 -23
  157. package/dist/snackbar.js.flow +2 -0
  158. package/dist/spinner.css-mistica.js +2 -2
  159. package/dist/spinner.js +14 -11
  160. package/dist/sprinkles.css-mistica.js +217 -479
  161. package/dist/sprinkles.css.d.ts +0 -25
  162. package/dist/stepper.css-mistica.js +7 -7
  163. package/dist/stepper.d.ts +2 -0
  164. package/dist/stepper.js +52 -11
  165. package/dist/stepper.js.flow +2 -0
  166. package/dist/switch-component.css-mistica.js +54 -0
  167. package/dist/switch-component.css.d.ts +14 -0
  168. package/dist/switch-component.css.js.flow +43 -0
  169. package/dist/switch-component.css.ts.vanilla.js +11 -0
  170. package/dist/switch-component.js +35 -96
  171. package/dist/tabs.css-mistica.js +6 -6
  172. package/dist/tabs.js +16 -15
  173. package/dist/tag.css-mistica.js +2 -2
  174. package/dist/tag.js +5 -5
  175. package/dist/text-field-base.css-mistica.js +63 -0
  176. package/dist/text-field-base.css.d.ts +17 -0
  177. package/dist/text-field-base.css.js.flow +19 -0
  178. package/dist/text-field-base.css.ts.vanilla.js +11 -0
  179. package/dist/text-field-base.js +120 -314
  180. package/dist/text-field-components.css-mistica.js +69 -0
  181. package/dist/text-field-components.css.d.ts +18 -0
  182. package/dist/text-field-components.css.js.flow +20 -0
  183. package/dist/text-field-components.css.ts.vanilla.js +11 -0
  184. package/dist/text-field-components.d.ts +0 -4
  185. package/dist/text-field-components.js +46 -159
  186. package/dist/text-field-components.js.flow +0 -4
  187. package/dist/text-link.css-mistica.js +3 -3
  188. package/dist/text.js +159 -92
  189. package/dist/theme-context-provider.js +1 -1
  190. package/dist/title.js +44 -12
  191. package/dist/tooltip.css-mistica.js +7 -7
  192. package/dist/tooltip.d.ts +2 -0
  193. package/dist/tooltip.js +62 -36
  194. package/dist/tooltip.js.flow +2 -0
  195. package/dist/touchable.css-mistica.js +3 -3
  196. package/dist/touchable.js +10 -10
  197. package/dist/utils/animation.d.ts +0 -6
  198. package/dist/utils/animation.js +18 -55
  199. package/dist/utils/animation.js.flow +0 -8
  200. package/dist/utils/aspect-ratio-support.css-mistica.js +29 -0
  201. package/dist/utils/aspect-ratio-support.css.d.ts +6 -0
  202. package/dist/utils/aspect-ratio-support.css.js.flow +11 -0
  203. package/dist/utils/aspect-ratio-support.css.ts.vanilla.js +11 -0
  204. package/dist/utils/aspect-ratio-support.js +37 -56
  205. package/dist/utils/color.d.ts +1 -1
  206. package/dist/utils/color.js.flow +1 -1
  207. package/dist/utils/dom.d.ts +1 -1
  208. package/dist/utils/dom.js +7 -5
  209. package/dist/utils/dom.js.flow +2 -1
  210. package/dist/video.css-mistica.js +2 -2
  211. package/dist-es/avatar.css-mistica.js +2 -2
  212. package/dist-es/avatar.js +77 -22
  213. package/dist-es/badge.css-mistica.js +2 -2
  214. package/dist-es/badge.js +56 -15
  215. package/dist-es/boxed.js +5 -5
  216. package/dist-es/button-group.css-mistica.js +1 -1
  217. package/dist-es/button-group.js +10 -10
  218. package/dist-es/button-layout.css-mistica.js +7 -7
  219. package/dist-es/button-layout.js +4 -4
  220. package/dist-es/button.css-mistica.js +9 -9
  221. package/dist-es/button.js +152 -102
  222. package/dist-es/callout.css-mistica.js +2 -2
  223. package/dist-es/callout.js +79 -27
  224. package/dist-es/card.css-mistica.js +2 -2
  225. package/dist-es/card.js +78 -72
  226. package/dist-es/carousel.css-mistica.js +8 -7
  227. package/dist-es/carousel.js +286 -258
  228. package/dist-es/checkbox.css-mistica.js +5 -5
  229. package/dist-es/checkbox.js +1 -1
  230. package/dist-es/chip.css-mistica.js +2 -2
  231. package/dist-es/chip.js +79 -36
  232. package/dist-es/circle.css-mistica.js +1 -1
  233. package/dist-es/credit-card-number-field.css-mistica.js +3 -3
  234. package/dist-es/cvv-field.css-mistica.js +1 -1
  235. package/dist-es/date-time-picker.js +1 -1
  236. package/dist-es/desktop-container-type-context.js +4 -2
  237. package/dist-es/dialog.css-mistica.js +5 -5
  238. package/dist-es/dialog.js +1 -0
  239. package/dist-es/double-field.css-mistica.js +5 -4
  240. package/dist-es/empty-state-card.css-mistica.js +1 -1
  241. package/dist-es/empty-state.css-mistica.js +2 -2
  242. package/dist-es/empty-state.js +18 -18
  243. package/dist-es/fade-in.js +60 -7
  244. package/dist-es/feedback.css-mistica.js +1 -1
  245. package/dist-es/feedback.js +170 -155
  246. package/dist-es/fixed-footer-layout.css-mistica.js +7 -0
  247. package/dist-es/fixed-footer-layout.css.ts.vanilla.js +2 -0
  248. package/dist-es/fixed-footer-layout.js +47 -96
  249. package/dist-es/header.js +116 -146
  250. package/dist-es/highlighted-card.css-mistica.js +5 -5
  251. package/dist-es/highlighted-card.js +44 -39
  252. package/dist-es/icon-button.css-mistica.js +4 -0
  253. package/dist-es/icon-button.css.ts.vanilla.js +2 -0
  254. package/dist-es/icon-button.js +41 -26
  255. package/dist-es/icons/icon-error.css-mistica.js +3 -0
  256. package/dist-es/icons/icon-error.css.ts.vanilla.js +2 -0
  257. package/dist-es/icons/icon-error.js +46 -57
  258. package/dist-es/icons/icon-info.js +28 -40
  259. package/dist-es/icons/icon-success-vivo.js +18 -28
  260. package/dist-es/icons/icon-success.js +45 -56
  261. package/dist-es/image.css-mistica.js +2 -2
  262. package/dist-es/index.js +1738 -1736
  263. package/dist-es/list.css-mistica.js +2 -2
  264. package/dist-es/list.js +126 -85
  265. package/dist-es/loading-bar.css-mistica.js +2 -2
  266. package/dist-es/loading-bar.js +73 -19
  267. package/dist-es/maybe-dismissable.css-mistica.js +4 -0
  268. package/dist-es/maybe-dismissable.css.ts.vanilla.js +2 -0
  269. package/dist-es/maybe-dismissable.js +24 -59
  270. package/dist-es/media-queries.css-mistica.js +3 -3
  271. package/dist-es/menu.css-mistica.js +11 -0
  272. package/dist-es/menu.css.ts.vanilla.js +2 -0
  273. package/dist-es/menu.js +61 -107
  274. package/dist-es/navigation-bar.css-mistica.js +17 -0
  275. package/dist-es/navigation-bar.css.ts.vanilla.js +2 -0
  276. package/dist-es/navigation-bar.js +253 -381
  277. package/dist-es/navigation-breadcrumbs.css-mistica.js +4 -0
  278. package/dist-es/navigation-breadcrumbs.css.ts.vanilla.js +2 -0
  279. package/dist-es/navigation-breadcrumbs.js +34 -52
  280. package/dist-es/overlay.js +41 -15
  281. package/dist-es/package-version.js +1 -1
  282. package/dist-es/password-field.css-mistica.js +4 -0
  283. package/dist-es/password-field.css.ts.vanilla.js +2 -0
  284. package/dist-es/password-field.js +45 -61
  285. package/dist-es/popover.css-mistica.js +4 -0
  286. package/dist-es/popover.css.ts.vanilla.js +2 -0
  287. package/dist-es/popover.js +121 -141
  288. package/dist-es/progress-bar.css-mistica.js +2 -2
  289. package/dist-es/progress-bar.js +68 -15
  290. package/dist-es/radio-button.css-mistica.js +10 -0
  291. package/dist-es/radio-button.css.ts.vanilla.js +2 -0
  292. package/dist-es/radio-button.js +99 -143
  293. package/dist-es/responsive-layout.css-mistica.js +2 -2
  294. package/dist-es/responsive-layout.js +23 -15
  295. package/dist-es/screen-reader-only.css-mistica.js +2 -2
  296. package/dist-es/select.css-mistica.js +22 -0
  297. package/dist-es/select.css.ts.vanilla.js +2 -0
  298. package/dist-es/select.js +177 -299
  299. package/dist-es/skeleton-base.js +17 -36
  300. package/dist-es/skeletons.css-mistica.js +1 -1
  301. package/dist-es/skeletons.js +78 -57
  302. package/dist-es/snackbar.css-mistica.js +2 -2
  303. package/dist-es/snackbar.js +89 -42
  304. package/dist-es/spinner.css-mistica.js +2 -2
  305. package/dist-es/spinner.js +14 -11
  306. package/dist-es/sprinkles.css-mistica.js +217 -479
  307. package/dist-es/stepper.css-mistica.js +2 -2
  308. package/dist-es/stepper.js +68 -27
  309. package/dist-es/style.css +1 -1
  310. package/dist-es/switch-component.css-mistica.js +22 -0
  311. package/dist-es/switch-component.css.ts.vanilla.js +2 -0
  312. package/dist-es/switch-component.js +51 -112
  313. package/dist-es/tabs.css-mistica.js +6 -6
  314. package/dist-es/tabs.js +24 -23
  315. package/dist-es/tag.css-mistica.js +2 -2
  316. package/dist-es/tag.js +11 -11
  317. package/dist-es/text-field-base.css-mistica.js +4 -0
  318. package/dist-es/text-field-base.css.ts.vanilla.js +2 -0
  319. package/dist-es/text-field-base.js +134 -328
  320. package/dist-es/text-field-components.css-mistica.js +4 -0
  321. package/dist-es/text-field-components.css.ts.vanilla.js +2 -0
  322. package/dist-es/text-field-components.js +56 -157
  323. package/dist-es/text-link.css-mistica.js +3 -3
  324. package/dist-es/text.js +159 -92
  325. package/dist-es/theme-context-provider.js +1 -1
  326. package/dist-es/title.js +50 -18
  327. package/dist-es/tooltip.css-mistica.js +3 -3
  328. package/dist-es/tooltip.js +90 -64
  329. package/dist-es/touchable.css-mistica.js +2 -2
  330. package/dist-es/touchable.js +10 -10
  331. package/dist-es/utils/animation.js +28 -62
  332. package/dist-es/utils/aspect-ratio-support.css-mistica.js +6 -0
  333. package/dist-es/utils/aspect-ratio-support.css.ts.vanilla.js +2 -0
  334. package/dist-es/utils/aspect-ratio-support.js +34 -58
  335. package/dist-es/utils/dom.js +7 -5
  336. package/dist-es/video.css-mistica.js +2 -2
  337. package/package.json +2 -1
@@ -10,20 +10,18 @@ function _export(target, all) {
10
10
  }
11
11
  _export(exports, {
12
12
  default: function() {
13
- return R;
13
+ return I;
14
14
  },
15
15
  useIsDismissable: function() {
16
- return N;
16
+ return D;
17
17
  }
18
18
  });
19
19
  var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
20
- var _jssJs = require("./jss.js");
21
20
  var _iconCloseRegularJs = /*#__PURE__*/ _interopRequireDefault(require("./generated/mistica-icons/icon-close-regular.js"));
22
21
  var _hooksJs = require("./hooks.js");
23
22
  var _iconButtonJs = /*#__PURE__*/ _interopRequireDefault(require("./icon-button.js"));
24
- var _themeVariantContextJs = require("./theme-variant-context.js");
25
- var _colorJs = require("./utils/color.js");
26
23
  var _skinContractCssMisticaJs = require("./skins/skin-contract.css-mistica.js");
24
+ var _maybeDismissableCssMisticaJs = require("./maybe-dismissable.css-mistica.js");
27
25
  var _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
28
26
  function _interopRequireDefault(obj) {
29
27
  return obj && obj.__esModule ? obj : {
@@ -69,66 +67,33 @@ function _interopRequireWildcard(obj, nodeInterop) {
69
67
  }
70
68
  return newObj;
71
69
  }
72
- var a = /*#__PURE__*/ _react.createContext(!1), N = function N() {
70
+ var a = /*#__PURE__*/ _react.createContext(!1), D = function D() {
73
71
  return _react.useContext(a);
74
- }, g = (0, _jssJs.createUseStyles)(function() {
75
- return {
76
- dismissableContainer: {
77
- position: "relative",
78
- display: "flex",
79
- flexShrink: 0,
80
- width: function width(param) {
81
- var s = param.width;
82
- return s || "100%";
83
- }
84
- },
85
- dismissableButton: {
86
- position: "absolute",
87
- top: 0,
88
- right: 0,
89
- width: 48,
90
- height: 48,
91
- display: "flex",
92
- alignItems: "center",
93
- justifyContent: "center",
94
- zIndex: 2
72
+ }, I = function I(param) {
73
+ var s = param.children, i = param.width, t = param.onClose, o = param["aria-label"];
74
+ var ref = (0, _hooksJs.useTheme)(), l = ref.texts;
75
+ return t ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("section", {
76
+ className: _maybeDismissableCssMisticaJs.dismissableContainer,
77
+ "aria-label": o,
78
+ style: {
79
+ width: i || "100%"
95
80
  },
96
- dismissableCircleContainer: {
97
- display: "flex",
98
- alignItems: "center",
99
- justifyContent: "center",
100
- width: 24,
101
- height: 24,
102
- margin: "0 0 8px 8px",
103
- borderRadius: "50%",
104
- backgroundColor: (0, _colorJs.applyAlpha)(_skinContractCssMisticaJs.vars.rawColors.background, 0.7)
105
- }
106
- };
107
- }), R = function R(param) {
108
- var s = param.children, l = param.width, i = param.onClose, n = param["aria-label"];
109
- var m = (0, _themeVariantContextJs.useIsInverseVariant)(), t = g({
110
- isInverse: m,
111
- width: l
112
- }), ref = (0, _hooksJs.useTheme)(), c = ref.texts;
113
- return i ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("section", {
114
- className: t.dismissableContainer,
115
- "aria-label": n,
116
81
  children: [
117
82
  /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(a.Provider, {
118
83
  value: !0,
119
84
  children: s
120
85
  }),
121
86
  /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconButtonJs.default, {
122
- className: t.dismissableButton,
123
- onPress: i,
124
- "aria-label": c.closeButtonLabel,
87
+ className: _maybeDismissableCssMisticaJs.dismissableButton,
88
+ onPress: t,
89
+ "aria-label": l.closeButtonLabel,
125
90
  style: {
126
91
  display: "flex",
127
92
  width: 48,
128
93
  height: 48
129
94
  },
130
95
  children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
131
- className: t.dismissableCircleContainer,
96
+ className: _maybeDismissableCssMisticaJs.dismissableCircleContainer,
132
97
  children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconCloseRegularJs.default, {
133
98
  color: _skinContractCssMisticaJs.vars.colors.neutralHigh
134
99
  })
@@ -2,15 +2,47 @@
2
2
  Object.defineProperty(exports, "__esModule", {
3
3
  value: true
4
4
  });
5
- Object.defineProperty(exports, "mediaQueriesConfig", {
6
- enumerable: true,
7
- get: function() {
5
+ function _export(target, all) {
6
+ for(var name in all)Object.defineProperty(target, name, {
7
+ enumerable: true,
8
+ get: all[name]
9
+ });
10
+ }
11
+ _export(exports, {
12
+ desktop: function() {
8
13
  return e;
14
+ },
15
+ desktopOrBigger: function() {
16
+ return n;
17
+ },
18
+ largeDesktop: function() {
19
+ return i;
20
+ },
21
+ mediaQueriesConfig: function() {
22
+ return a;
23
+ },
24
+ mobile: function() {
25
+ return t;
26
+ },
27
+ supportsHover: function() {
28
+ return r;
29
+ },
30
+ tablet: function() {
31
+ return d;
32
+ },
33
+ tabletOrBigger: function() {
34
+ return h;
35
+ },
36
+ tabletOrSmaller: function() {
37
+ return p;
38
+ },
39
+ touchableOnly: function() {
40
+ return o;
9
41
  }
10
42
  });
11
- var e = {
43
+ var e = "only screen and (min-height: 550px) and (min-width: 1024px) and (max-width: 1367px)", n = "only screen and (min-height: 550px) and (min-width: 1024px)", i = "only screen and (min-height: 550px) and (min-width: 1368px)", a = {
12
44
  tabletMinWidth: 768,
13
45
  desktopMinWidth: 1024,
14
46
  largeDesktopMinWidth: 1368,
15
47
  desktopOrTabletMinHeight: 550
16
- };
48
+ }, t = "only screen and (max-width: 767px), (max-height: 549px)", r = "(pointer: fine), (pointer: none)", d = "only screen and (min-height: 550px) and (min-width: 768px) and (max-width: 1023px)", h = "only screen and (min-height: 550px) and (min-width: 768px)", p = "only screen and (max-width: 1023px), (max-height: 549px)", o = "(pointer: coarse)";
@@ -0,0 +1,34 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ function _export(target, all) {
6
+ for(var name in all)Object.defineProperty(target, name, {
7
+ enumerable: true,
8
+ get: all[name]
9
+ });
10
+ }
11
+ _export(exports, {
12
+ hideItems: function() {
13
+ return v;
14
+ },
15
+ menuContainer: function() {
16
+ return _;
17
+ },
18
+ showItems: function() {
19
+ return a;
20
+ },
21
+ vars: function() {
22
+ return t;
23
+ }
24
+ });
25
+ require("./sprinkles.css.ts.vanilla.js");
26
+ require("./menu.css.ts.vanilla.js");
27
+ var v = "_2k0k3u9", _ = "_2k0k3u7 _1y2v1nf5l _1y2v1nf5z _1y2v1nf6d _1y2v1nf6r _1y2v1nf4u _1y2v1nf2g _1y2v1nf90", a = "_2k0k3u8", t = {
28
+ top: "var(--_2k0k3u0)",
29
+ bottom: "var(--_2k0k3u1)",
30
+ right: "var(--_2k0k3u2)",
31
+ width: "var(--_2k0k3u3)",
32
+ transformOrigin: "var(--_2k0k3u4)",
33
+ maxHeight: "var(--_2k0k3u5)"
34
+ };
@@ -0,0 +1,11 @@
1
+ export declare const vars: {
2
+ top: import("@vanilla-extract/private").CSSVarFunction;
3
+ bottom: import("@vanilla-extract/private").CSSVarFunction;
4
+ right: import("@vanilla-extract/private").CSSVarFunction;
5
+ width: import("@vanilla-extract/private").CSSVarFunction;
6
+ transformOrigin: import("@vanilla-extract/private").CSSVarFunction;
7
+ maxHeight: import("@vanilla-extract/private").CSSVarFunction;
8
+ };
9
+ export declare const menuContainer: string;
10
+ export declare const showItems: string;
11
+ export declare const hideItems: string;
@@ -0,0 +1,19 @@
1
+ // @flow
2
+
3
+ declare export var vars: {
4
+ top: $PropertyType<$Exports<"@vanilla-extract/private">, "CSSVarFunction">,
5
+ bottom: $PropertyType<$Exports<"@vanilla-extract/private">, "CSSVarFunction">,
6
+ right: $PropertyType<$Exports<"@vanilla-extract/private">, "CSSVarFunction">,
7
+ width: $PropertyType<$Exports<"@vanilla-extract/private">, "CSSVarFunction">,
8
+ transformOrigin: $PropertyType<
9
+ $Exports<"@vanilla-extract/private">,
10
+ "CSSVarFunction"
11
+ >,
12
+ maxHeight: $PropertyType<
13
+ $Exports<"@vanilla-extract/private">,
14
+ "CSSVarFunction"
15
+ >,
16
+ };
17
+ declare export var menuContainer: string;
18
+ declare export var showItems: string;
19
+ declare export var hideItems: string;
@@ -0,0 +1,11 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ Object.defineProperty(exports, "default", {
6
+ enumerable: true,
7
+ get: function() {
8
+ return s;
9
+ }
10
+ });
11
+ var s = "";
package/dist/menu.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import * as React from 'react';
2
+ import type { DataAttributes } from './utils/types';
2
3
  declare type MenuRenderProps = {
3
4
  ref: (element: HTMLElement | null) => void;
4
5
  className: string;
@@ -15,6 +16,7 @@ export declare type MenuProps = {
15
16
  renderMenu: (props: MenuRenderProps) => React.ReactNode;
16
17
  children?: void;
17
18
  position?: 'left' | 'right';
19
+ dataAttributes?: DataAttributes;
18
20
  };
19
21
  declare const Menu: React.FC<MenuProps>;
20
22
  export default Menu;
package/dist/menu.js CHANGED
@@ -5,14 +5,17 @@ Object.defineProperty(exports, "__esModule", {
5
5
  Object.defineProperty(exports, "default", {
6
6
  enumerable: true,
7
7
  get: function() {
8
- return N;
8
+ return ot;
9
9
  }
10
10
  });
11
11
  var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
12
+ var _classnames = /*#__PURE__*/ _interopRequireDefault(require("classnames"));
13
+ var _dynamic = require("@vanilla-extract/dynamic");
12
14
  var _keyCodesJs = require("./utils/key-codes.js");
13
- var _jssJs = require("./jss.js");
14
15
  var _domJs = require("./utils/dom.js");
15
16
  var _overlayJs = /*#__PURE__*/ _interopRequireDefault(require("./overlay.js"));
17
+ var _menuCssMisticaJs = require("./menu.css-mistica.js");
18
+ var _sprinklesCssMisticaJs = require("./sprinkles.css-mistica.js");
16
19
  var _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
17
20
  function _interopRequireDefault(obj) {
18
21
  return obj && obj.__esModule ? obj : {
@@ -156,149 +159,100 @@ function _unsupportedIterableToArray(o, minLen) {
156
159
  if (n === "Map" || n === "Set") return Array.from(n);
157
160
  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
158
161
  }
159
- var g = 416, B = (0, _jssJs.createUseStyles)(function(param) {
160
- var m = param.colors;
161
- return {
162
- menuContainer: {
163
- zIndex: 12,
164
- margin: 0,
165
- padding: 0,
166
- listStyleType: "none",
167
- position: "absolute",
168
- top: function top(param) {
169
- var e = param.itemsComputedProps;
170
- return e.top;
171
- },
172
- bottom: function bottom(param) {
173
- var e = param.itemsComputedProps;
174
- return e.bottom;
175
- },
176
- right: function right(param) {
177
- var e = param.itemsComputedProps;
178
- return e.right;
179
- },
180
- width: function width(param) {
181
- var e = param.width;
182
- return e != null ? e : "100%";
183
- },
184
- borderRadius: 8,
185
- boxShadow: "0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12)",
186
- backgroundColor: m.backgroundContainer,
187
- transformOrigin: function transformOrigin(param) {
188
- var e = param.itemsComputedProps;
189
- return e.transformOrigin;
190
- },
191
- transition: "opacity .03s linear,transform .12s cubic-bezier(0,0,.2,1) .15s",
192
- opacity: function opacity(param) {
193
- var e = param.animateShowItems;
194
- return e ? 1 : 0;
195
- },
196
- transform: function transform(param) {
197
- var e = param.animateShowItems;
198
- return e ? "scale(1)" : "scale(0)";
199
- },
200
- maxHeight: function maxHeight(param) {
201
- var e = param.itemsComputedProps;
202
- return e.maxHeight;
203
- },
204
- overflowY: "auto"
205
- }
206
- };
207
- }), N = function N(param) {
208
- var m = param.renderTarget, e = param.renderMenu, d = param.width, tmp = param.position, h = tmp === void 0 ? "left" : tmp;
209
- var ref = _slicedToArray(_react.useState(!1), 2), t = ref[0], s = ref[1], ref1 = _slicedToArray(_react.useState(null), 2), a = ref1[0], x = ref1[1], ref2 = _slicedToArray(_react.useState(null), 2), c = ref2[0], b = ref2[1], ref3 = _slicedToArray(_react.useState(!1), 2), C = ref3[0], S = ref3[1], ref4 = _slicedToArray(_react.useState({}), 2), M = ref4[0], l = ref4[1];
162
+ var h = 416, ot = function ot(param) {
163
+ var A = param.renderTarget, E = param.renderMenu, l = param.width, tmp = param.position, d = tmp === void 0 ? "left" : tmp, O = param.dataAttributes;
164
+ var M, S, I, b;
165
+ var ref = _slicedToArray(_react.useState(!1), 2), t = ref[0], i = ref[1], ref1 = _slicedToArray(_react.useState(null), 2), a = ref1[0], w = ref1[1], ref2 = _slicedToArray(_react.useState(null), 2), c = ref2[0], C = ref2[1], ref3 = _slicedToArray(_react.useState(!1), 2), H = ref3[0], x = ref3[1], ref4 = _slicedToArray(_react.useState({}), 2), r = ref4[0], u = ref4[1];
210
166
  _react.useEffect(function() {
211
- var y;
212
- var n = a == null ? void 0 : a.getBoundingClientRect();
213
- if (!c || !n || !t) {
214
- S(!1);
167
+ var v;
168
+ var o = a == null ? void 0 : a.getBoundingClientRect();
169
+ if (!c || !o || !t) {
170
+ x(!1);
215
171
  return;
216
172
  }
217
- var r = 12, u = n.top, I = n.width, O = n.height, i = u + O, T = (y = parseInt(window.getComputedStyle(c).getPropertyValue("height"))) != null ? y : 0, p = h === "left" ? "auto" : "calc(100% - ".concat(I, "px)");
218
- if (i + T + r > window.innerHeight) {
219
- var A = window.innerHeight - i;
220
- u > A ? l({
173
+ var n = 12, f = o.top, k = o.width, D = o.height, m = f + D, R = (v = parseInt(window.getComputedStyle(c).getPropertyValue("height"))) != null ? v : 0, p = d === "left" ? "auto" : "calc(100% - ".concat(k, "px)");
174
+ if (m + R + n > window.innerHeight) {
175
+ var F = window.innerHeight - m;
176
+ f > F ? u({
221
177
  right: p,
222
178
  bottom: "100%",
223
179
  top: "auto",
224
- maxHeight: Math.min(u, g),
180
+ maxHeight: Math.min(f, h),
225
181
  transformOrigin: "center bottom"
226
- }) : l({
182
+ }) : u({
227
183
  top: "100%",
228
184
  bottom: "auto",
229
185
  right: p,
230
- maxHeight: Math.min(window.innerHeight - i - r, g),
186
+ maxHeight: Math.min(window.innerHeight - m - n, h),
231
187
  transformOrigin: "center top"
232
188
  });
233
- } else l({
189
+ } else u({
234
190
  top: "100%",
235
191
  bottom: "auto",
236
192
  right: p,
237
- maxHeight: Math.min(window.innerHeight - i - r, g),
193
+ maxHeight: Math.min(window.innerHeight - m - n, h),
238
194
  transformOrigin: "center top"
239
195
  });
240
- var f;
241
- return t && (f = requestAnimationFrame(function() {
242
- S(!0);
196
+ var g;
197
+ return t && (g = requestAnimationFrame(function() {
198
+ x(!0);
243
199
  })), function() {
244
- f && cancelAnimationFrame(f);
200
+ g && cancelAnimationFrame(g);
245
201
  };
246
202
  }, [
247
- h,
203
+ d,
248
204
  t,
249
205
  c,
250
206
  a,
251
- d
207
+ l
252
208
  ]);
253
- var w = B({
254
- itemsComputedProps: M,
255
- animateShowItems: C,
256
- width: d
257
- }), v = _react.useMemo(function() {
209
+ var P = _react.useMemo(function() {
258
210
  return {
259
- ref: x,
211
+ ref: w,
260
212
  onPress: function onPress() {
261
- s(!t);
213
+ i(!t);
262
214
  }
263
215
  };
264
216
  }, [
265
- x,
217
+ w,
266
218
  t,
267
- s
268
- ]), E = _react.useMemo(function() {
219
+ i
220
+ ]), T = _react.useMemo(function() {
269
221
  return {
270
- ref: b,
271
- className: w.menuContainer,
222
+ ref: C,
223
+ className: (0, _classnames.default)(_menuCssMisticaJs.menuContainer, H ? _menuCssMisticaJs.showItems : _menuCssMisticaJs.hideItems),
272
224
  close: function close() {
273
- s(!1);
225
+ i(!1);
274
226
  }
275
227
  };
276
228
  }, [
277
- w.menuContainer,
278
- b
229
+ H
279
230
  ]);
231
+ var _obj;
280
232
  return _react.useEffect(function() {
281
- var n = function n(r) {
282
- t && (r.keyCode === _keyCodesJs.TAB && (0, _domJs.cancelEvent)(r), r.keyCode === _keyCodesJs.ESC && s(!1));
233
+ var o = function o(n) {
234
+ t && (n.keyCode === _keyCodesJs.TAB && (0, _domJs.cancelEvent)(n), n.keyCode === _keyCodesJs.ESC && i(!1));
283
235
  };
284
- return document.addEventListener("keydown", n, !1), function() {
285
- document.removeEventListener("keydown", n, !1);
236
+ return document.addEventListener("keydown", o, !1), function() {
237
+ document.removeEventListener("keydown", o, !1);
286
238
  };
287
- }), /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", {
288
- style: {
239
+ }), /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", _objectSpreadProps(_objectSpread({
240
+ className: (0, _sprinklesCssMisticaJs.sprinkles)({
289
241
  position: "relative"
290
- },
242
+ }),
243
+ style: _objectSpread({}, (0, _dynamic.assignInlineVars)((_obj = {}, _defineProperty(_obj, _menuCssMisticaJs.vars.width, l ? "".concat(l, "px") : "100%"), _defineProperty(_obj, _menuCssMisticaJs.vars.top, (M = r.top) != null ? M : ""), _defineProperty(_obj, _menuCssMisticaJs.vars.bottom, (S = r.bottom) != null ? S : ""), _defineProperty(_obj, _menuCssMisticaJs.vars.right, (I = r.right) != null ? I : ""), _defineProperty(_obj, _menuCssMisticaJs.vars.transformOrigin, (b = r.transformOrigin) != null ? b : ""), _defineProperty(_obj, _menuCssMisticaJs.vars.maxHeight, r.maxHeight ? "".concat(r.maxHeight, "px") : ""), _obj)))
244
+ }, (0, _domJs.getPrefixedDataAttributes)(O, "Menu")), {
291
245
  children: [
292
246
  t ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_overlayJs.default, {
293
- onPress: function onPress(n) {
294
- (0, _domJs.cancelEvent)(n), s(!1);
247
+ onPress: function onPress(o) {
248
+ (0, _domJs.cancelEvent)(o), i(!1);
295
249
  },
296
250
  disableScroll: !0
297
251
  }) : null,
298
- m(_objectSpreadProps(_objectSpread({}, v), {
252
+ A(_objectSpreadProps(_objectSpread({}, P), {
299
253
  isMenuOpen: t
300
254
  })),
301
- t ? e(E) : null
255
+ t ? E(T) : null
302
256
  ]
303
- });
257
+ }));
304
258
  };
package/dist/menu.js.flow CHANGED
@@ -1,6 +1,7 @@
1
1
  // @flow
2
2
 
3
3
  import * as React from "react";
4
+ import type { DataAttributes } from "./utils/types";
4
5
  declare type MenuRenderProps = {
5
6
  ref: (element: HTMLElement | null) => void,
6
7
  className: string,
@@ -16,6 +17,7 @@ export type MenuProps = {
16
17
  renderTarget: (props: TargetRenderProps) => React.Node,
17
18
  renderMenu: (props: MenuRenderProps) => React.Node,
18
19
  position?: "left" | "right",
20
+ dataAttributes?: DataAttributes,
19
21
  };
20
22
  declare var Menu: React.ComponentType<MenuProps>;
21
23
  declare export default typeof Menu;
@@ -0,0 +1,79 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ function _export(target, all) {
6
+ for(var name in all)Object.defineProperty(target, name, {
7
+ enumerable: true,
8
+ get: all[name]
9
+ });
10
+ }
11
+ _export(exports, {
12
+ burgerIconContainer: function() {
13
+ return y;
14
+ },
15
+ burgerMenu: function() {
16
+ return _;
17
+ },
18
+ burgerMenuEnter: function() {
19
+ return r;
20
+ },
21
+ burgerMenuEnterActive: function() {
22
+ return e;
23
+ },
24
+ burgerMenuExit: function() {
25
+ return f;
26
+ },
27
+ burgerMenuExitActive: function() {
28
+ return d;
29
+ },
30
+ iconButtonVariants: function() {
31
+ return a;
32
+ },
33
+ iconCloseHidden: function() {
34
+ return c;
35
+ },
36
+ iconMenuHidden: function() {
37
+ return z;
38
+ },
39
+ lineHeightFix: function() {
40
+ return t;
41
+ },
42
+ logoContainer: function() {
43
+ return i;
44
+ },
45
+ navbarBorderColorVariants: function() {
46
+ return u;
47
+ },
48
+ section: function() {
49
+ return o;
50
+ },
51
+ selectedSectionVariantes: function() {
52
+ return s;
53
+ },
54
+ spacer: function() {
55
+ return g;
56
+ },
57
+ textWrapperVariants: function() {
58
+ return l;
59
+ },
60
+ topFixed: function() {
61
+ return b;
62
+ }
63
+ });
64
+ require("./sprinkles.css.ts.vanilla.js");
65
+ require("./navigation-bar.css.ts.vanilla.js");
66
+ var y = "_1vcy5dz1 _1y2v1nf4t _1y2v1nf7d _1y2v1nf7s", _ = "_1vcy5dzr _1y2v1nf4v _1y2v1nf9g _1y2v1nf9k _1y2v1nf9y _1y2v1nf2f", r = "_1vcy5dzl", e = "_1vcy5dzm", f = "_1vcy5dzn", d = "_1vcy5dzo", a = {
67
+ default: "_1vcy5dzu _1y2v1nf1a",
68
+ inverse: "_1vcy5dzv _1y2v1nf19"
69
+ }, c = "_1vcy5dz4 _1vcy5dz3 _1y2v1nf4u", z = "_1vcy5dz5 _1vcy5dz3 _1y2v1nf4u", t = "_1vcy5dzw", i = "_1y2v1nf4y _1y2v1nf57", u = {
70
+ default: "_1vcy5dza _1vcy5dz9 _1y2v1nf5q _1y2v1nf64 _1y2v1nf4y _1y2v1nf5d _1y2v1nf75 _1y2v1nf7z",
71
+ inverse: "_1vcy5dzb _1vcy5dz9 _1y2v1nf5q _1y2v1nf64 _1y2v1nf4y _1y2v1nf5d _1y2v1nf75 _1y2v1nf7z",
72
+ menuOpen: "_1vcy5dzc _1vcy5dz9 _1y2v1nf5q _1y2v1nf64 _1y2v1nf4y _1y2v1nf5d _1y2v1nf75 _1y2v1nf7z"
73
+ }, o = "_1vcy5dze _1y2v1nf6g _1y2v1nf6u _1y2v1nf7z _1y2v1nf4y _1y2v1nf5d _1y2v1nf8w _1y2v1nf4s", s = {
74
+ default: "_1vcy5dzf",
75
+ inverse: "_1vcy5dzg"
76
+ }, g = "_1vcy5dzk _1y2v1nf7z", l = {
77
+ default: "_1vcy5dzh",
78
+ inverse: "_1vcy5dzi"
79
+ }, b = "_1vcy5dz7 _1y2v1nf4v _1y2v1nf96 _1y2v1nf9k _1y2v1nf9y";
@@ -0,0 +1,17 @@
1
+ export declare const burgerIconContainer: string;
2
+ export declare const iconCloseHidden: string;
3
+ export declare const iconMenuHidden: string;
4
+ export declare const topFixed: string;
5
+ export declare const navbarBorderColorVariants: Record<"inverse" | "default" | "menuOpen", string>;
6
+ export declare const section: string;
7
+ export declare const selectedSectionVariantes: Record<"inverse" | "default", string>;
8
+ export declare const textWrapperVariants: Record<"inverse" | "default", string>;
9
+ export declare const spacer: string;
10
+ export declare const burgerMenuEnter: string;
11
+ export declare const burgerMenuEnterActive: string;
12
+ export declare const burgerMenuExit: string;
13
+ export declare const burgerMenuExitActive: string;
14
+ export declare const logoContainer: string;
15
+ export declare const burgerMenu: string;
16
+ export declare const iconButtonVariants: Record<"inverse" | "default", string>;
17
+ export declare const lineHeightFix: string;
@@ -0,0 +1,26 @@
1
+ // @flow
2
+
3
+ declare export var burgerIconContainer: string;
4
+ declare export var iconCloseHidden: string;
5
+ declare export var iconMenuHidden: string;
6
+ declare export var topFixed: string;
7
+ declare export var navbarBorderColorVariants: {
8
+ inverse: string,
9
+ default: string,
10
+ menuOpen: string,
11
+ };
12
+ declare export var section: string;
13
+ declare export var selectedSectionVariantes: {
14
+ inverse: string,
15
+ default: string,
16
+ };
17
+ declare export var textWrapperVariants: { inverse: string, default: string };
18
+ declare export var spacer: string;
19
+ declare export var burgerMenuEnter: string;
20
+ declare export var burgerMenuEnterActive: string;
21
+ declare export var burgerMenuExit: string;
22
+ declare export var burgerMenuExitActive: string;
23
+ declare export var logoContainer: string;
24
+ declare export var burgerMenu: string;
25
+ declare export var iconButtonVariants: { inverse: string, default: string };
26
+ declare export var lineHeightFix: string;
@@ -0,0 +1,11 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ Object.defineProperty(exports, "default", {
6
+ enumerable: true,
7
+ get: function() {
8
+ return a;
9
+ }
10
+ });
11
+ var a = "";