@telefonica/mistica 14.34.0 → 14.35.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 (156) hide show
  1. package/css/mistica.css +1 -1
  2. package/dist/avatar.css-mistica.js +1 -1
  3. package/dist/button.css-mistica.js +7 -7
  4. package/dist/callout.css-mistica.js +1 -1
  5. package/dist/callout.js +17 -12
  6. package/dist/card.js +277 -244
  7. package/dist/carousel.css-mistica.js +5 -5
  8. package/dist/carousel.js +54 -52
  9. package/dist/checkbox.js +18 -18
  10. package/dist/community/advanced-data-card.css-mistica.js +3 -3
  11. package/dist/community/advanced-data-card.js +57 -50
  12. package/dist/community/blocks.js +42 -35
  13. package/dist/counter.css-mistica.js +1 -1
  14. package/dist/cvv-field.js +1 -1
  15. package/dist/dialog.css-mistica.js +3 -3
  16. package/dist/dialog.js +2 -2
  17. package/dist/hero.js +34 -30
  18. package/dist/hooks.d.ts +12 -1
  19. package/dist/hooks.js +85 -48
  20. package/dist/image.css-mistica.js +7 -2
  21. package/dist/image.css.d.ts +3 -0
  22. package/dist/image.d.ts +1 -7
  23. package/dist/image.js +55 -66
  24. package/dist/list.css-mistica.js +1 -1
  25. package/dist/list.js +80 -75
  26. package/dist/loading-bar.css-mistica.js +6 -6
  27. package/dist/maybe-dismissable.css-mistica.js +1 -1
  28. package/dist/menu.js +32 -32
  29. package/dist/navigation-bar.css-mistica.js +10 -10
  30. package/dist/overlay.js +10 -10
  31. package/dist/package-version.js +1 -1
  32. package/dist/pin-field.css-mistica.js +3 -3
  33. package/dist/popover.css-mistica.js +4 -4
  34. package/dist/radio-button.css-mistica.js +5 -5
  35. package/dist/radio-button.js +7 -7
  36. package/dist/screen-reader-only.css-mistica.js +1 -1
  37. package/dist/select.css-mistica.js +7 -7
  38. package/dist/select.js +65 -53
  39. package/dist/sheet.css-mistica.js +8 -8
  40. package/dist/skeletons.d.ts +9 -1
  41. package/dist/skeletons.js +3 -0
  42. package/dist/skins/blau.js +2 -1
  43. package/dist/skins/defaults.js +2 -1
  44. package/dist/skins/movistar-legacy.js +2 -1
  45. package/dist/skins/movistar.js +2 -1
  46. package/dist/skins/o2.js +2 -1
  47. package/dist/skins/skin-contract.css-mistica.js +2 -1
  48. package/dist/skins/skin-contract.css.d.ts +1 -0
  49. package/dist/skins/telefonica.js +2 -1
  50. package/dist/skins/types/index.d.ts +1 -0
  51. package/dist/skins/vivo-new.js +2 -1
  52. package/dist/skins/vivo.js +2 -1
  53. package/dist/slider.css-mistica.js +19 -19
  54. package/dist/slider.css.d.ts +8 -8
  55. package/dist/slider.d.ts +28 -8
  56. package/dist/slider.js +226 -106
  57. package/dist/snackbar.css-mistica.js +5 -5
  58. package/dist/sprinkles.css-mistica.js +71 -68
  59. package/dist/stacking-group.js +31 -24
  60. package/dist/stepper.css-mistica.js +3 -3
  61. package/dist/switch-component.css-mistica.js +17 -17
  62. package/dist/switch-component.js +12 -12
  63. package/dist/tab-focus.js +12 -12
  64. package/dist/tabs.css-mistica.js +1 -1
  65. package/dist/text-field-base.css-mistica.js +1 -1
  66. package/dist/text-field-components.css-mistica.js +7 -7
  67. package/dist/text-link.css-mistica.js +3 -3
  68. package/dist/theme-context-provider.js +39 -36
  69. package/dist/tooltip-context-provider.d.ts +14 -0
  70. package/dist/tooltip-context-provider.js +90 -0
  71. package/dist/tooltip.css-mistica.js +25 -54
  72. package/dist/tooltip.css.d.ts +19 -26
  73. package/dist/tooltip.d.ts +15 -1
  74. package/dist/tooltip.js +255 -207
  75. package/dist/touchable.css-mistica.js +1 -1
  76. package/dist/touchable.js +8 -8
  77. package/dist/utils/aspect-ratio-support.css-mistica.js +2 -2
  78. package/dist/utils/environment.d.ts +1 -0
  79. package/dist/utils/environment.js +4 -1
  80. package/dist/utils/keys.d.ts +8 -0
  81. package/dist/utils/{key-codes.js → keys.js} +6 -6
  82. package/dist/video.css-mistica.js +1 -1
  83. package/dist/video.js +33 -31
  84. package/dist-es/avatar.css-mistica.js +1 -1
  85. package/dist-es/button.css-mistica.js +7 -7
  86. package/dist-es/callout.css-mistica.js +1 -1
  87. package/dist-es/callout.js +33 -28
  88. package/dist-es/card.js +416 -383
  89. package/dist-es/carousel.css-mistica.js +2 -2
  90. package/dist-es/carousel.js +84 -82
  91. package/dist-es/checkbox.js +18 -18
  92. package/dist-es/community/advanced-data-card.css-mistica.js +2 -2
  93. package/dist-es/community/advanced-data-card.js +83 -76
  94. package/dist-es/community/blocks.js +77 -70
  95. package/dist-es/counter.css-mistica.js +1 -1
  96. package/dist-es/cvv-field.js +1 -1
  97. package/dist-es/dialog.css-mistica.js +3 -3
  98. package/dist-es/dialog.js +2 -2
  99. package/dist-es/hero.js +69 -65
  100. package/dist-es/hooks.js +83 -49
  101. package/dist-es/image.css-mistica.js +4 -2
  102. package/dist-es/image.js +74 -79
  103. package/dist-es/list.css-mistica.js +1 -1
  104. package/dist-es/list.js +116 -111
  105. package/dist-es/loading-bar.css-mistica.js +2 -2
  106. package/dist-es/maybe-dismissable.css-mistica.js +1 -1
  107. package/dist-es/menu.js +41 -41
  108. package/dist-es/navigation-bar.css-mistica.js +6 -6
  109. package/dist-es/overlay.js +14 -14
  110. package/dist-es/package-version.js +1 -1
  111. package/dist-es/pin-field.css-mistica.js +2 -2
  112. package/dist-es/popover.css-mistica.js +2 -2
  113. package/dist-es/radio-button.css-mistica.js +4 -4
  114. package/dist-es/radio-button.js +2 -2
  115. package/dist-es/screen-reader-only.css-mistica.js +1 -1
  116. package/dist-es/select.css-mistica.js +7 -7
  117. package/dist-es/select.js +89 -77
  118. package/dist-es/sheet.css-mistica.js +2 -2
  119. package/dist-es/skeletons.js +1 -1
  120. package/dist-es/skins/blau.js +2 -1
  121. package/dist-es/skins/defaults.js +2 -1
  122. package/dist-es/skins/movistar-legacy.js +2 -1
  123. package/dist-es/skins/movistar.js +2 -1
  124. package/dist-es/skins/o2.js +2 -1
  125. package/dist-es/skins/skin-contract.css-mistica.js +2 -1
  126. package/dist-es/skins/telefonica.js +2 -1
  127. package/dist-es/skins/vivo-new.js +2 -1
  128. package/dist-es/skins/vivo.js +2 -1
  129. package/dist-es/slider.css-mistica.js +2 -8
  130. package/dist-es/slider.js +231 -111
  131. package/dist-es/snackbar.css-mistica.js +4 -4
  132. package/dist-es/sprinkles.css-mistica.js +71 -68
  133. package/dist-es/stacking-group.js +37 -30
  134. package/dist-es/stepper.css-mistica.js +2 -2
  135. package/dist-es/style.css +1 -1
  136. package/dist-es/switch-component.css-mistica.js +13 -13
  137. package/dist-es/switch-component.js +14 -14
  138. package/dist-es/tab-focus.js +14 -14
  139. package/dist-es/tabs.css-mistica.js +1 -1
  140. package/dist-es/text-field-base.css-mistica.js +1 -1
  141. package/dist-es/text-field-components.css-mistica.js +2 -2
  142. package/dist-es/text-link.css-mistica.js +3 -3
  143. package/dist-es/theme-context-provider.js +53 -50
  144. package/dist-es/tooltip-context-provider.js +29 -0
  145. package/dist-es/tooltip.css-mistica.js +16 -9
  146. package/dist-es/tooltip.js +264 -216
  147. package/dist-es/touchable.css-mistica.js +1 -1
  148. package/dist-es/touchable.js +8 -8
  149. package/dist-es/utils/aspect-ratio-support.css-mistica.js +2 -2
  150. package/dist-es/utils/environment.js +2 -2
  151. package/dist-es/utils/keys.js +2 -0
  152. package/dist-es/video.css-mistica.js +1 -1
  153. package/dist-es/video.js +41 -39
  154. package/package.json +1 -1
  155. package/dist/utils/key-codes.d.ts +0 -8
  156. package/dist-es/utils/key-codes.js +0 -2
package/dist/select.js CHANGED
@@ -14,7 +14,7 @@ const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
14
14
  const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
15
15
  const _formcontext = require("./form-context.js");
16
16
  const _hooks = require("./hooks.js");
17
- const _keycodes = require("./utils/key-codes.js");
17
+ const _keys = require("./utils/keys.js");
18
18
  const _textfieldcomponents = require("./text-field-components.js");
19
19
  const _iconchevrondownregular = /*#__PURE__*/ _interop_require_default(require("./generated/mistica-icons/icon-chevron-down-regular.js"));
20
20
  const _textfieldbase = require("./text-field-base.js");
@@ -124,10 +124,10 @@ function _object_spread_props(target, source) {
124
124
  return target;
125
125
  }
126
126
  const Ye = (param)=>{
127
- let { id: re, label: d, helperText: ie, value: ce, onChangeValue: b, name: i, fullWidth: P, options: u, optional: V, disabled: le, error: ae, onBlur: D, autoFocus: $ = !1, native: ue } = param;
127
+ let { id: oe, label: d, helperText: ie, value: ce, onChangeValue: C, name: i, fullWidth: P, options: u, optional: V, disabled: ae, error: le, onBlur: D, autoFocus: $ = !1, native: ue } = param;
128
128
  var Y;
129
- const S = _react.useRef(null), f = _react.useRef(null), g = _react.useRef(null), T = _react.useRef(null), N = _react.useRef(/* @__PURE__ */ new Map()), [de, fe] = _react.useState(!0), [p, pe] = _react.useState(), [M, q] = _react.useState(!1), [z, j] = _react.useState(!1), [K, x] = _react.useState(!1), [a, H] = _react.useState({}), [v, F] = _react.useState(), G = _react.useRef(null), Z = (0, _hooks.useAriaId)(re), { rawValues: me, setRawValue: B, setValue: W, formStatus: he, formErrors: U, setFormError: Se, register: L } = (0, _formcontext.useForm)(), { platformOverrides: X } = (0, _hooks.useTheme)(), ge = ue || process.env.NODE_ENV === "test" && !process.env.SSR_TEST || (0, _platform.isAndroid)(X) || (0, _platform.isIos)(X), E = le || he === "sending", R = ae || !!U[i], J = U[i] || ie, l = ce !== null && ce !== void 0 ? ce : me[i], A = (e)=>{
130
- b == null || b(e), Se({
129
+ const S = _react.useRef(null), f = _react.useRef(null), g = _react.useRef(null), T = _react.useRef(null), R = _react.useRef(/* @__PURE__ */ new Map()), [de, fe] = _react.useState(!0), [p, pe] = _react.useState(), [M, q] = _react.useState(!1), [z, j] = _react.useState(!1), [K, x] = _react.useState(!1), [l, H] = _react.useState({}), [v, F] = _react.useState(), G = _react.useRef(null), Z = (0, _hooks.useAriaId)(oe), { rawValues: me, setRawValue: B, setValue: W, formStatus: he, formErrors: U, setFormError: Se, register: L } = (0, _formcontext.useForm)(), { platformOverrides: X } = (0, _hooks.useTheme)(), ge = ue || process.env.NODE_ENV === "test" && !process.env.SSR_TEST || (0, _platform.isAndroid)(X) || (0, _platform.isIos)(X), E = ae || he === "sending", b = le || !!U[i], J = U[i] || ie, a = ce !== null && ce !== void 0 ? ce : me[i], A = (e)=>{
130
+ C == null || C(e), Se({
131
131
  name: i,
132
132
  error: ""
133
133
  }), B({
@@ -140,15 +140,15 @@ const Ye = (param)=>{
140
140
  }, I = (e)=>{
141
141
  if (e) {
142
142
  if (g != null && g.current) {
143
- const s = g.current.getBoundingClientRect(), m = s.top, w = s.width, O = s.left, Oe = s.height, y = m + Oe, k = Math.min(u.length, 8) * 48 + 16;
143
+ const r = g.current.getBoundingClientRect(), m = r.top, w = r.width, O = r.left, Oe = r.height, y = m + Oe, k = Math.min(u.length, 8) * 48 + 16;
144
144
  if (y + k + 12 > window.innerHeight) {
145
145
  const ye = window.innerHeight - y;
146
146
  if (m > ye) {
147
- const Ce = m - k;
147
+ const Ne = m - k;
148
148
  H({
149
149
  minWidth: w,
150
150
  left: O,
151
- top: Math.max(Ce, 12),
151
+ top: Math.max(Ne, 12),
152
152
  maxHeight: Math.min(m - 12, k),
153
153
  transformOrigin: "center bottom"
154
154
  });
@@ -169,36 +169,36 @@ const Ye = (param)=>{
169
169
  }
170
170
  q(!0), requestAnimationFrame(()=>{
171
171
  G.current && T.current && "scrollTop" in T.current && (T.current.scrollTop = G.current), j(!0);
172
- }), F(p !== null && p !== void 0 ? p : l);
172
+ }), F(p !== null && p !== void 0 ? p : a);
173
173
  } else j(!1), q(!1), F(void 0);
174
174
  }, Q = (e)=>{
175
175
  var t;
176
- G.current = (t = T.current) == null ? void 0 : t.scrollTop, I(!1), A && typeof e == "string" && A(e), typeof l > "u" && pe(e);
176
+ G.current = (t = T.current) == null ? void 0 : t.scrollTop, I(!1), A && typeof e == "string" && A(e), typeof a > "u" && pe(e);
177
177
  }, Te = (e)=>{
178
- var n;
179
- const t = (n = T.current) == null ? void 0 : n.getBoundingClientRect();
180
- if (t && e && N.current.has(e)) {
181
- const c = N.current.get(e), s = c == null ? void 0 : c.getBoundingClientRect();
182
- if (s && s.top + s.height / 2 >= t.top + t.height) {
178
+ var s;
179
+ const t = (s = T.current) == null ? void 0 : s.getBoundingClientRect();
180
+ if (t && e && R.current.has(e)) {
181
+ const c = R.current.get(e), r = c == null ? void 0 : c.getBoundingClientRect();
182
+ if (r && r.top + r.height / 2 >= t.top + t.height) {
183
183
  c == null || c.scrollIntoView();
184
184
  return;
185
185
  }
186
- s && s.top + s.height / 2 <= t.top && (c == null || c.scrollIntoView(!1));
186
+ r && r.top + r.height / 2 <= t.top && (c == null || c.scrollIntoView(!1));
187
187
  }
188
188
  }, ve = f.current, Ee = S.current;
189
189
  _react.useEffect(()=>{
190
190
  B({
191
191
  name: i,
192
- value: l
192
+ value: a
193
193
  }), W({
194
194
  name: i,
195
- value: l
195
+ value: a
196
196
  });
197
197
  }, [
198
198
  i,
199
199
  B,
200
200
  W,
201
- l
201
+ a
202
202
  ]), _react.useEffect(()=>(L(i, {
203
203
  input: S.current,
204
204
  focusableElement: f.current
@@ -215,26 +215,38 @@ const Ye = (param)=>{
215
215
  ve,
216
216
  Ee
217
217
  ]), _react.useEffect(()=>{
218
- const e = (n)=>{
218
+ const e = (s)=>{
219
219
  var m;
220
- const s = {
221
- [_keycodes.UP]: -1,
222
- [_keycodes.DOWN]: 1
223
- }[n.keyCode];
224
- if (s) {
225
- (0, _dom.cancelEvent)(n);
220
+ const r = {
221
+ [_keys.UP]: -1,
222
+ [_keys.DOWN]: 1
223
+ }[s.key];
224
+ if (r) {
225
+ (0, _dom.cancelEvent)(s);
226
226
  var _ref;
227
227
  const w = (_ref = (m = u[u.findIndex((param)=>{
228
228
  let { value: O } = param;
229
229
  return O === v;
230
- }) + s]) == null ? void 0 : m.value) !== null && _ref !== void 0 ? _ref : v;
230
+ }) + r]) == null ? void 0 : m.value) !== null && _ref !== void 0 ? _ref : v;
231
231
  F(w), Te(w);
232
232
  }
233
- }, t = (n)=>{
234
- M && (n.keyCode === _keycodes.TAB && (0, _dom.cancelEvent)(n), n.keyCode === _keycodes.ESC && I(!1), (n.keyCode === _keycodes.ENTER || n.keyCode === _keycodes.SPACE) && ((0, _dom.cancelEvent)(n), u.findIndex((param)=>{
235
- let { value: c } = param;
236
- return c === v;
237
- }) !== -1 && v !== p && Q(v), I(!1))), z && e(n);
233
+ }, t = (s)=>{
234
+ if (M) switch(s.key){
235
+ case _keys.TAB:
236
+ (0, _dom.cancelEvent)(s);
237
+ break;
238
+ case _keys.ESC:
239
+ I(!1);
240
+ break;
241
+ case _keys.ENTER:
242
+ case _keys.SPACE:
243
+ (0, _dom.cancelEvent)(s), u.findIndex((param)=>{
244
+ let { value: c } = param;
245
+ return c === v;
246
+ }) !== -1 && v !== p && Q(v), I(!1);
247
+ break;
248
+ }
249
+ z && e(s);
238
250
  };
239
251
  return document.addEventListener("keydown", t, !1), ()=>{
240
252
  document.removeEventListener("keydown", t, !1);
@@ -249,8 +261,8 @@ const Ye = (param)=>{
249
261
  const Ie = (e)=>{
250
262
  var t;
251
263
  return e ? (t = u.find((param)=>{
252
- let { value: n } = param;
253
- return n === e;
264
+ let { value: s } = param;
265
+ return s === e;
254
266
  })) == null ? void 0 : t.text : "";
255
267
  }, we = {
256
268
  tabIndex: 0,
@@ -260,31 +272,31 @@ const Ye = (param)=>{
260
272
  I(!0), x(!0);
261
273
  },
262
274
  onKeyDown: (e)=>{
263
- !M && (e.keyCode === _keycodes.SPACE || e.keyCode === _keycodes.ENTER) && ((0, _dom.cancelEvent)(e), I(!0));
275
+ !M && (e.key === _keys.SPACE || e.key === _keys.ENTER) && ((0, _dom.cancelEvent)(e), I(!0));
264
276
  }
265
277
  }, { isDesktopOrBigger: xe } = (0, _hooks.useScreenSize)();
266
- var _ref, _a_transformOrigin;
278
+ var _ref, _l_transformOrigin;
267
279
  return ge || de ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_textfieldcomponents.FieldContainer, {
268
280
  disabled: E,
269
281
  helperText: /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldcomponents.HelperText, {
270
- error: R,
282
+ error: b,
271
283
  leftText: J
272
284
  }),
273
285
  fieldRef: g,
274
286
  fullWidth: P,
275
287
  children: [
276
288
  d && /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldcomponents.Label, {
277
- error: R,
289
+ error: b,
278
290
  forId: Z,
279
- inputState: K ? "focused" : ((_ref = l !== null && l !== void 0 ? l : p) !== null && _ref !== void 0 ? _ref : (Y = S.current) == null ? void 0 : Y.value) ? "filled" : "default",
291
+ inputState: K ? "focused" : ((_ref = a !== null && a !== void 0 ? a : p) !== null && _ref !== void 0 ? _ref : (Y = S.current) == null ? void 0 : Y.value) ? "filled" : "default",
280
292
  optional: V,
281
293
  children: d
282
294
  }),
283
295
  /* @__PURE__ */ (0, _jsxruntime.jsxs)("select", {
284
296
  className: _selectcssmistica.selectVariants[E ? "disabled" : "default"],
285
297
  id: Z,
286
- "aria-invalid": !!R,
287
- value: l,
298
+ "aria-invalid": !!b,
299
+ value: a,
288
300
  required: !V,
289
301
  disabled: E,
290
302
  onChange: (e)=>{
@@ -358,14 +370,14 @@ const Ye = (param)=>{
358
370
  }),
359
371
  focus: K,
360
372
  label: d,
361
- value: l,
362
- shrinkLabel: !!(l || p),
373
+ value: a,
374
+ shrinkLabel: !!(a || p),
363
375
  name: i,
364
376
  helperText: J,
365
377
  required: !V,
366
378
  disabled: E,
367
379
  id: Z,
368
- error: R,
380
+ error: b,
369
381
  inputRef: S,
370
382
  fieldRef: g
371
383
  }),
@@ -374,7 +386,7 @@ const Ye = (param)=>{
374
386
  style: {
375
387
  top: xe ? d ? 28 : 18 : d ? 25 : 16
376
388
  },
377
- children: Ie(l !== null && l !== void 0 ? l : p)
389
+ children: Ie(a !== null && a !== void 0 ? a : p)
378
390
  })
379
391
  ]
380
392
  })),
@@ -386,11 +398,11 @@ const Ye = (param)=>{
386
398
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_portal.Portal, {
387
399
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)("ul", {
388
400
  style: (0, _css.applyCssVars)({
389
- [_selectcssmistica.vars.top]: a.top ? `${a.top}px` : "",
390
- [_selectcssmistica.vars.left]: a.left ? `${a.left}px` : "",
391
- [_selectcssmistica.vars.maxHeight]: a.maxHeight ? `${a.maxHeight}px` : "",
392
- [_selectcssmistica.vars.minWidth]: a.minWidth ? `${a.minWidth}px` : "",
393
- [_selectcssmistica.vars.transformOrigin]: (_a_transformOrigin = a.transformOrigin) !== null && _a_transformOrigin !== void 0 ? _a_transformOrigin : ""
401
+ [_selectcssmistica.vars.top]: l.top ? `${l.top}px` : "",
402
+ [_selectcssmistica.vars.left]: l.left ? `${l.left}px` : "",
403
+ [_selectcssmistica.vars.maxHeight]: l.maxHeight ? `${l.maxHeight}px` : "",
404
+ [_selectcssmistica.vars.minWidth]: l.minWidth ? `${l.minWidth}px` : "",
405
+ [_selectcssmistica.vars.transformOrigin]: (_l_transformOrigin = l.transformOrigin) !== null && _l_transformOrigin !== void 0 ? _l_transformOrigin : ""
394
406
  }),
395
407
  onPointerDown: _dom.cancelEvent,
396
408
  className: (0, _classnames.default)(_selectcssmistica.optionsContainer, z ? _selectcssmistica.optionsAnimationsVariants.show : _selectcssmistica.optionsAnimationsVariants.hide),
@@ -400,15 +412,15 @@ const Ye = (param)=>{
400
412
  let { value: e, text: t } = param;
401
413
  return (0, _jsxruntime.jsx)("li", {
402
414
  role: "option",
403
- "aria-selected": e === (p !== null && p !== void 0 ? p : l),
415
+ "aria-selected": e === (p !== null && p !== void 0 ? p : a),
404
416
  "data-value": e,
405
417
  className: (0, _classnames.default)(_selectcssmistica.menuItem, {
406
- [_selectcssmistica.menuItemSelected]: e === v || e === (p !== null && p !== void 0 ? p : l)
418
+ [_selectcssmistica.menuItemSelected]: e === v || e === (p !== null && p !== void 0 ? p : a)
407
419
  }),
408
420
  onPointerDown: _dom.cancelEvent,
409
421
  onClick: ()=>Q(e),
410
- ref: (n)=>{
411
- n ? N.current.set(e, n) : N.current.delete(e);
422
+ ref: (s)=>{
423
+ s ? R.current.set(e, s) : R.current.delete(e);
412
424
  },
413
425
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
414
426
  regular: !0,
@@ -37,30 +37,30 @@ _export(exports, {
37
37
  return o;
38
38
  },
39
39
  infoItemIcon: function() {
40
- return l;
40
+ return b;
41
41
  },
42
42
  modalCloseButton: function() {
43
- return b;
43
+ return l;
44
44
  },
45
45
  modalCloseButtonIcon: function() {
46
46
  return i;
47
47
  },
48
48
  overlay: function() {
49
- return z;
49
+ return h;
50
50
  },
51
51
  sheetActionRow: function() {
52
- return d;
52
+ return z;
53
53
  },
54
54
  stickyButtons: function() {
55
- return h;
55
+ return d;
56
56
  },
57
57
  stickyTitle: function() {
58
- return p;
58
+ return s;
59
59
  },
60
60
  transitionDuration: function() {
61
- return s;
61
+ return m;
62
62
  }
63
63
  });
64
64
  require("./sprinkles.css.ts.vanilla.css-mistica.js");
65
65
  require("./sheet.css.ts.vanilla.css-mistica.js");
66
- var y = "cylz3v6 _1y2v1nf32", f = "cylz3v4 _1y2v1nfb6 _1y2v1nfev _1y2v1nffa _1y2v1nffp", _ = "cylz3v9 _1y2v1nf6r _1y2v1nfba _1y2v1nfbg", a = "cylz3vo", e = "_1y2v1nfef _1y2v1nfbw _1y2v1nfba _1y2v1nfbg", r = "cylz3vl", t = "cylz3v7", c = "_1y2v1nf46 _1y2v1nfc6 _1y2v1nfch _1y2v1nfdu", o = "cylz3vc _1y2v1nf6c _1y2v1nf7l _1y2v1nfb5 _1y2v1nfeg _1y2v1nfcr _1y2v1nfbx _1y2v1nfba _1y2v1nfbj", l = "_1y2v1nfba _1y2v1nfbp _1y2v1nfcm", b = "cylz3vf _1y2v1nf6i _1y2v1nf7r _1y2v1nf90 _1y2v1nfa9 _1y2v1nfb5 _1y2v1nfeg _1y2v1nffa", i = "cylz3vh _1y2v1nfc7 _1y2v1nfcn _1y2v1nfba _1y2v1nfbp _1y2v1nfbj _1y2v1nfdt", z = "cylz3vk _1y2v1nfb6 _1y2v1nf3d _1y2v1nfeg _1y2v1nfev _1y2v1nffa _1y2v1nffp", d = "cylz3vq _1y2v1nf6i _1y2v1nf7r _1y2v1nf90 _1y2v1nfa9 _1y2v1nfba _1y2v1nfdn _1y2v1nfbp", h = "_1y2v1nfb8 _1y2v1nffp _1y2v1nf32", p = "_1y2v1nfb8 _1y2v1nfeg _1y2v1nf32", s = 400;
66
+ var y = "cylz3v6 _1y2v1nf32", f = "cylz3v4 _1y2v1nfb6 _1y2v1nfew _1y2v1nffb _1y2v1nffq", _ = "cylz3v9 _1y2v1nf6r _1y2v1nfba _1y2v1nfbg", a = "cylz3vo", e = "_1y2v1nfeg _1y2v1nfbw _1y2v1nfba _1y2v1nfbg", r = "cylz3vl", t = "cylz3v7", c = "_1y2v1nf46 _1y2v1nfc6 _1y2v1nfch _1y2v1nfdu", o = "cylz3vc _1y2v1nf6c _1y2v1nf7l _1y2v1nfb5 _1y2v1nfeh _1y2v1nfcr _1y2v1nfbx _1y2v1nfba _1y2v1nfbj", b = "_1y2v1nfba _1y2v1nfbp _1y2v1nfcm", l = "cylz3vf _1y2v1nf6i _1y2v1nf7r _1y2v1nf90 _1y2v1nfa9 _1y2v1nfb5 _1y2v1nfeh _1y2v1nffb", i = "cylz3vh _1y2v1nfc7 _1y2v1nfcn _1y2v1nfba _1y2v1nfbp _1y2v1nfbj _1y2v1nfdt", h = "cylz3vk _1y2v1nfb6 _1y2v1nf3d _1y2v1nfeh _1y2v1nfew _1y2v1nffb _1y2v1nffq", z = "cylz3vq _1y2v1nf6i _1y2v1nf7r _1y2v1nf90 _1y2v1nfa9 _1y2v1nfba _1y2v1nfdn _1y2v1nfbp", d = "_1y2v1nfb8 _1y2v1nffq _1y2v1nf32", s = "_1y2v1nfb8 _1y2v1nfeh _1y2v1nf32", m = 400;
@@ -1,5 +1,13 @@
1
- /// <reference types="react" />
1
+ import * as React from 'react';
2
2
  import type { DataAttributes } from './utils/types';
3
+ type SkeletonAnimationProps = {
4
+ children: React.ReactNode;
5
+ ariaLabel?: string;
6
+ dataAttributes?: DataAttributes;
7
+ width?: number | string;
8
+ height?: number | string;
9
+ };
10
+ export declare const SkeletonAnimation: ({ children, ariaLabel, dataAttributes, width, height, }: SkeletonAnimationProps) => JSX.Element;
3
11
  type SkeletonLineProps = {
4
12
  width?: string | number;
5
13
  ariaLabel?: string;
package/dist/skeletons.js CHANGED
@@ -9,6 +9,9 @@ function _export(target, all) {
9
9
  });
10
10
  }
11
11
  _export(exports, {
12
+ SkeletonAnimation: function() {
13
+ return o;
14
+ },
12
15
  SkeletonCircle: function() {
13
16
  return x;
14
17
  },
@@ -286,7 +286,8 @@ const e = {
286
286
  input: "8px",
287
287
  legacyDisplay: "16px",
288
288
  popup: "8px",
289
- sheet: "8px"
289
+ sheet: "8px",
290
+ mediaSmall: "8px"
290
291
  },
291
292
  textPresets: {
292
293
  cardTitle: {
@@ -85,5 +85,6 @@ const t = {
85
85
  indicator: "999px",
86
86
  sheet: "8px",
87
87
  bar: "999px",
88
- avatar: "50%"
88
+ avatar: "50%",
89
+ mediaSmall: "8px"
89
90
  };
@@ -290,7 +290,8 @@ const e = {
290
290
  input: "8px",
291
291
  legacyDisplay: "16px",
292
292
  popup: "8px",
293
- sheet: "8px"
293
+ sheet: "8px",
294
+ mediaSmall: "8px"
294
295
  },
295
296
  textPresets: {
296
297
  cardTitle: {
@@ -290,7 +290,8 @@ const e = {
290
290
  input: "8px",
291
291
  legacyDisplay: "16px",
292
292
  popup: "8px",
293
- sheet: "8px"
293
+ sheet: "8px",
294
+ mediaSmall: "8px"
294
295
  },
295
296
  textPresets: {
296
297
  cardTitle: {
package/dist/skins/o2.js CHANGED
@@ -290,7 +290,8 @@ const e = {
290
290
  input: "8px",
291
291
  legacyDisplay: "16px",
292
292
  popup: "8px",
293
- sheet: "8px"
293
+ sheet: "8px",
294
+ mediaSmall: "8px"
294
295
  },
295
296
  textPresets: {
296
297
  cardTitle: {
@@ -237,6 +237,7 @@ var r = {
237
237
  indicator: "var(--_1vqcj1i64)",
238
238
  sheet: "var(--_1vqcj1i65)",
239
239
  bar: "var(--_1vqcj1i66)",
240
- avatar: "var(--_1vqcj1i67)"
240
+ avatar: "var(--_1vqcj1i67)",
241
+ mediaSmall: "var(--_1vqcj1i68)"
241
242
  }
242
243
  };
@@ -228,5 +228,6 @@ export declare const vars: {
228
228
  sheet: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
229
229
  bar: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
230
230
  avatar: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
231
+ mediaSmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
231
232
  };
232
233
  };
@@ -284,7 +284,8 @@ const e = {
284
284
  input: "0px",
285
285
  legacyDisplay: "0px",
286
286
  popup: "0px",
287
- sheet: "0px"
287
+ sheet: "0px",
288
+ mediaSmall: "0px"
288
289
  },
289
290
  textPresets: {
290
291
  cardTitle: {
@@ -60,6 +60,7 @@ export type BorderRadiiConfig = {
60
60
  sheet: string;
61
61
  bar: string;
62
62
  avatar: string;
63
+ mediaSmall: string;
63
64
  };
64
65
  export type Skin = {
65
66
  name: SkinName;
@@ -284,7 +284,8 @@ const e = {
284
284
  input: "12px",
285
285
  legacyDisplay: "16px",
286
286
  popup: "8px",
287
- sheet: "16px"
287
+ sheet: "16px",
288
+ mediaSmall: "8px"
288
289
  },
289
290
  textPresets: {
290
291
  cardTitle: {
@@ -284,7 +284,8 @@ const e = {
284
284
  input: "8px",
285
285
  legacyDisplay: "16px",
286
286
  popup: "8px",
287
- sheet: "8px"
287
+ sheet: "8px",
288
+ mediaSmall: "8px"
288
289
  },
289
290
  textPresets: {
290
291
  cardTitle: {
@@ -10,33 +10,33 @@ function _export(target, all) {
10
10
  }
11
11
  _export(exports, {
12
12
  container: function() {
13
- return v;
13
+ return n;
14
14
  },
15
- progress: function() {
16
- return r;
15
+ defaultThumb: function() {
16
+ return f;
17
17
  },
18
- rangeSlider: function() {
18
+ disabled: function() {
19
+ return y;
20
+ },
21
+ input: function() {
19
22
  return a;
20
23
  },
21
- sliderDisabled: function() {
22
- return l;
24
+ iosThumb: function() {
25
+ return b;
23
26
  },
24
- sliderThumbVariant: function() {
25
- return f;
27
+ thumbActive: function() {
28
+ return r;
26
29
  },
27
- sliderVariant: function() {
28
- return e;
30
+ thumbContainer: function() {
31
+ return h;
29
32
  },
30
- targetContainer: function() {
31
- return y;
33
+ thumbHover: function() {
34
+ return t;
35
+ },
36
+ track: function() {
37
+ return l;
32
38
  }
33
39
  });
34
40
  require("./sprinkles.css.ts.vanilla.css-mistica.js");
35
41
  require("./slider.css.ts.vanilla.css-mistica.js");
36
- var v = "_1j1wlhk1 _1y2v1nfba _1y2v1nfbw", r = "_1j1wlhkf _1y2v1nfb5 _1y2v1nfe7 _1y2v1nf47", a = "_1y2v1nfba _1y2v1nfb4 _1y2v1nfbx", l = "_1j1wlhk9 _1j1wlhk6 _1y2v1nfe7 _1y2v1nf46", f = {
37
- ios: "_1j1wlhkc _1j1wlhkb _1y2v1nfb5",
38
- default: "_1j1wlhkd _1j1wlhkb _1y2v1nfb5"
39
- }, e = {
40
- ios: "_1j1wlhk7 _1j1wlhk6 _1y2v1nfe7 _1y2v1nf46",
41
- default: "_1j1wlhk8 _1j1wlhk6 _1y2v1nfe7 _1y2v1nf46"
42
- }, y = "_1j1wlhk2";
42
+ var n = "_1j1wlhk1 _1y2v1nfbx _1y2v1nfb4 _1y2v1nfba _1y2v1nfbp _1y2v1nfea", f = "_1j1wlhk7 _1y2v1nfc5 _1y2v1nfcl _1y2v1nfdt _1y2v1nf47", y = "_1j1wlhk2", a = "_1j1wlhkd _1y2v1nfb5 _1y2v1nfeh", b = "_1j1wlhk9 _1y2v1nf4f _1y2v1nfdt", r = "_1j1wlhkb", h = "_1j1wlhk5 _1y2v1nfb5 _1y2v1nfba _1y2v1nfbp _1y2v1nfbj", t = "_1j1wlhka", l = "_1y2v1nfbx _1y2v1nfch _1y2v1nfe7";
@@ -1,9 +1,9 @@
1
1
  export declare const container: string;
2
- export declare const targetContainer: string;
3
- export declare const rangeSlider: string;
4
- export declare const sliderBase: string;
5
- export declare const sliderVariant: Record<"default" | "ios", string>;
6
- export declare const sliderDisabled: string;
7
- export declare const sliderThumbBase: string;
8
- export declare const sliderThumbVariant: Record<"default" | "ios", string>;
9
- export declare const progress: string;
2
+ export declare const disabled: string;
3
+ export declare const track: string;
4
+ export declare const thumbContainer: string;
5
+ export declare const defaultThumb: string;
6
+ export declare const iosThumb: string;
7
+ export declare const thumbHover: string;
8
+ export declare const thumbActive: string;
9
+ export declare const input: string;
package/dist/slider.d.ts CHANGED
@@ -1,14 +1,34 @@
1
1
  import * as React from 'react';
2
- interface SliderProps {
2
+ import type { ExclusifyUnion } from './utils/utility-types';
3
+ import type { DataAttributes } from './utils/types';
4
+ interface BaseSliderProps {
3
5
  disabled?: boolean;
4
- steps?: number | Array<number>;
5
- max?: number;
6
- min?: number;
7
6
  value?: number;
8
- onChange?: (value: number) => void;
9
- getStepArrayIndex?: (value: number) => void;
10
- 'arial-label'?: string;
7
+ defaultValue?: number;
8
+ onChangeValue?: (value: number) => void;
11
9
  tooltip?: boolean;
10
+ dataAttributes?: DataAttributes;
11
+ name: string;
12
+ 'aria-label'?: string;
13
+ 'aria-labelledby'?: string;
14
+ id?: string;
15
+ /**
16
+ * @deprecated This field is deprecated, please use step or values instead.
17
+ */
18
+ steps?: number | Array<number>;
19
+ /**
20
+ * @deprecated This field is deprecated.
21
+ */
22
+ getStepArrayIndex?: (value: number) => void;
23
+ }
24
+ interface SliderWithValuesProps {
25
+ values: Array<number>;
26
+ }
27
+ interface SliderWithStepProps {
28
+ step?: number;
29
+ min?: number;
30
+ max?: number;
12
31
  }
13
- declare const Slider: React.FC<SliderProps>;
32
+ type SliderProps = BaseSliderProps & ExclusifyUnion<SliderWithStepProps | SliderWithValuesProps>;
33
+ declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLInputElement>>;
14
34
  export default Slider;