welcome-ui 10.0.0-alpha.10 → 10.0.0-alpha.12

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 (37) hide show
  1. package/dist/Alert.css +1 -1
  2. package/dist/Alert.js +62 -62
  3. package/dist/Checkbox.js +12 -11
  4. package/dist/DatePicker.js +69 -68
  5. package/dist/DateTimePicker.js +10 -10
  6. package/dist/Field.css +1 -1
  7. package/dist/Field.js +48 -49
  8. package/dist/FileDrop.js +7 -1
  9. package/dist/Icon.js +212 -211
  10. package/dist/InputText.js +6 -6
  11. package/dist/Modal.js +65 -56
  12. package/dist/Search.js +1 -1
  13. package/dist/Select.js +350 -332
  14. package/dist/Slider.js +1 -1
  15. package/dist/Swiper.js +201 -191
  16. package/dist/Tabs.css +1 -1
  17. package/dist/Tabs.js +320 -319
  18. package/dist/Textarea.js +14 -13
  19. package/dist/TimePicker.js +46 -45
  20. package/dist/Toggle.js +11 -11
  21. package/dist/types/components/Icon/icons.d.ts +2 -2
  22. package/dist/types/components/Modal/Assets/AssetContent.d.ts +1 -1
  23. package/dist/types/components/Modal/Assets/index.d.ts +1 -1
  24. package/dist/types/components/Modal/components/Content.d.ts +1 -1
  25. package/dist/types/components/Modal/index.d.ts +2 -2
  26. package/dist/types/components/Modal/types.d.ts +1 -1
  27. package/dist/types/components/Select/types.d.ts +1 -0
  28. package/dist/types/components/Tabs/Tab.d.ts +2 -0
  29. package/dist/types/components/Tabs/{components/TabPanel/index.d.ts → TabPanel.d.ts} +1 -1
  30. package/dist/types/components/Tabs/index.d.ts +6 -5
  31. package/dist/types/components/Tabs/types.d.ts +6 -12
  32. package/dist/types/components/Tabs/utils.d.ts +4 -7
  33. package/package.json +1 -1
  34. package/dist/types/components/Tabs/components/ActiveBar/index.d.ts +0 -5
  35. package/dist/types/components/Tabs/components/TabList/index.d.ts +0 -3
  36. package/dist/use-viewport-CgrficYB.js +0 -17
  37. package/dist/useForkRef-D807AV7D.js +0 -22
package/dist/Slider.js CHANGED
@@ -337,7 +337,7 @@ const _e = 20, q = (d, _) => Math.round(d / _) * _, F = (d, _, p, y) => (d = q(d
337
337
  !isNaN(f) && f !== v && f && (A(f), z(f));
338
338
  }, [f]);
339
339
  const j = ee();
340
- return /* @__PURE__ */ D("div", { className: N("slider-root", _), ref: G, children: [
340
+ return /* @__PURE__ */ D("div", { className: N("slider-root", "field-input", _), ref: G, children: [
341
341
  h ? /* @__PURE__ */ l(re, { as: "label", htmlFor: j, variant: "body-md", children: h }) : null,
342
342
  /* @__PURE__ */ D("div", { className: N("input-wrapper"), children: [
343
343
  (m === "inline" || m === "left-field") && (m === "left-field" ? /* @__PURE__ */ l(
package/dist/Swiper.js CHANGED
@@ -1,268 +1,278 @@
1
1
  "use client";
2
2
  import './Swiper.css';
3
3
  import { jsxs as le, jsx as A } from "react/jsx-runtime";
4
- import { a as K, g as ce, c as ue } from "./index-PAaZGbyz.js";
5
- import { useRef as se, useEffect as q, useState as Z, useMemo as de, Children as oe, cloneElement as pe, useCallback as X } from "react";
6
- import { Button as re } from "./Button.js";
7
- import { Icon as ne } from "./Icon.js";
8
- import { u as fe } from "./use-viewport-CgrficYB.js";
4
+ import { a as K, g as ce, c as de } from "./index-PAaZGbyz.js";
5
+ import { useEffect as z, useLayoutEffect as ue, useState as Q, useRef as se, useMemo as pe, Children as ne, cloneElement as fe, useCallback as X } from "react";
6
+ import { Button as oe } from "./Button.js";
7
+ import { Icon as re } from "./Icon.js";
9
8
  var ee, ie;
10
- function me() {
9
+ function he() {
11
10
  if (ie) return ee;
12
11
  ie = 1;
13
- var i = "Expected a function", s = NaN, p = "[object Symbol]", h = /^\s+|\s+$/g, W = /^[-+]0x[0-9a-f]+$/i, L = /^0b[01]+$/i, m = /^0o[0-7]+$/i, v = parseInt, G = typeof K == "object" && K && K.Object === Object && K, T = typeof self == "object" && self && self.Object === Object && self, B = G || T || Function("return this")(), D = Object.prototype, C = D.toString, c = Math.max, F = Math.min, w = function() {
12
+ var s = "Expected a function", i = NaN, a = "[object Symbol]", b = /^\s+|\s+$/g, x = /^[-+]0x[0-9a-f]+$/i, L = /^0b[01]+$/i, h = /^0o[0-7]+$/i, _ = parseInt, G = typeof K == "object" && K && K.Object === Object && K, S = typeof self == "object" && self && self.Object === Object && self, B = G || S || Function("return this")(), D = Object.prototype, C = D.toString, d = Math.max, F = Math.min, w = function() {
14
13
  return B.Date.now();
15
14
  };
16
- function P(e, o, a) {
17
- var k, I, E, b, g, S, H = 0, M = !1, N = !1, U = !0;
15
+ function E(e, n, l) {
16
+ var k, I, P, g, m, T, H = 0, M = !1, N = !1, q = !0;
18
17
  if (typeof e != "function")
19
- throw new TypeError(i);
20
- o = u(o) || 0, _(a) && (M = !!a.leading, N = "maxWait" in a, E = N ? c(u(a.maxWait) || 0, o) : E, U = "trailing" in a ? !!a.trailing : U);
18
+ throw new TypeError(s);
19
+ n = u(n) || 0, v(l) && (M = !!l.leading, N = "maxWait" in l, P = N ? d(u(l.maxWait) || 0, n) : P, q = "trailing" in l ? !!l.trailing : q);
21
20
  function j(t) {
22
- var l = k, f = I;
23
- return k = I = void 0, H = t, b = e.apply(f, l), b;
24
- }
25
- function Q(t) {
26
- return H = t, g = setTimeout(x, o), M ? j(t) : b;
21
+ var c = k, f = I;
22
+ return k = I = void 0, H = t, g = e.apply(f, c), g;
27
23
  }
28
24
  function Y(t) {
29
- var l = t - S, f = t - H, $ = o - l;
30
- return N ? F($, E - f) : $;
25
+ return H = t, m = setTimeout(W, n), M ? j(t) : g;
26
+ }
27
+ function Z(t) {
28
+ var c = t - T, f = t - H, $ = n - c;
29
+ return N ? F($, P - f) : $;
31
30
  }
32
31
  function y(t) {
33
- var l = t - S, f = t - H;
34
- return S === void 0 || l >= o || l < 0 || N && f >= E;
32
+ var c = t - T, f = t - H;
33
+ return T === void 0 || c >= n || c < 0 || N && f >= P;
35
34
  }
36
- function x() {
35
+ function W() {
37
36
  var t = w();
38
37
  if (y(t))
39
38
  return O(t);
40
- g = setTimeout(x, Y(t));
39
+ m = setTimeout(W, Z(t));
41
40
  }
42
41
  function O(t) {
43
- return g = void 0, U && k ? j(t) : (k = I = void 0, b);
42
+ return m = void 0, q && k ? j(t) : (k = I = void 0, g);
44
43
  }
45
- function d() {
46
- g !== void 0 && clearTimeout(g), H = 0, k = S = I = g = void 0;
44
+ function p() {
45
+ m !== void 0 && clearTimeout(m), H = 0, k = T = I = m = void 0;
47
46
  }
48
- function r() {
49
- return g === void 0 ? b : O(w());
47
+ function o() {
48
+ return m === void 0 ? g : O(w());
50
49
  }
51
- function n() {
52
- var t = w(), l = y(t);
53
- if (k = arguments, I = this, S = t, l) {
54
- if (g === void 0)
55
- return Q(S);
50
+ function r() {
51
+ var t = w(), c = y(t);
52
+ if (k = arguments, I = this, T = t, c) {
53
+ if (m === void 0)
54
+ return Y(T);
56
55
  if (N)
57
- return g = setTimeout(x, o), j(S);
56
+ return m = setTimeout(W, n), j(T);
58
57
  }
59
- return g === void 0 && (g = setTimeout(x, o)), b;
58
+ return m === void 0 && (m = setTimeout(W, n)), g;
60
59
  }
61
- return n.cancel = d, n.flush = r, n;
60
+ return r.cancel = p, r.flush = o, r;
62
61
  }
63
- function _(e) {
64
- var o = typeof e;
65
- return !!e && (o == "object" || o == "function");
62
+ function v(e) {
63
+ var n = typeof e;
64
+ return !!e && (n == "object" || n == "function");
66
65
  }
67
- function z(e) {
66
+ function V(e) {
68
67
  return !!e && typeof e == "object";
69
68
  }
70
- function V(e) {
71
- return typeof e == "symbol" || z(e) && C.call(e) == p;
69
+ function U(e) {
70
+ return typeof e == "symbol" || V(e) && C.call(e) == a;
72
71
  }
73
72
  function u(e) {
74
73
  if (typeof e == "number")
75
74
  return e;
76
- if (V(e))
77
- return s;
78
- if (_(e)) {
79
- var o = typeof e.valueOf == "function" ? e.valueOf() : e;
80
- e = _(o) ? o + "" : o;
75
+ if (U(e))
76
+ return i;
77
+ if (v(e)) {
78
+ var n = typeof e.valueOf == "function" ? e.valueOf() : e;
79
+ e = v(n) ? n + "" : n;
81
80
  }
82
81
  if (typeof e != "string")
83
82
  return e === 0 ? e : +e;
84
- e = e.replace(h, "");
85
- var a = L.test(e);
86
- return a || m.test(e) ? v(e.slice(2), a ? 2 : 8) : W.test(e) ? s : +e;
83
+ e = e.replace(b, "");
84
+ var l = L.test(e);
85
+ return l || h.test(e) ? _(e.slice(2), l ? 2 : 8) : x.test(e) ? i : +e;
87
86
  }
88
- return ee = P, ee;
87
+ return ee = E, ee;
89
88
  }
90
- var be = me();
91
- const ge = /* @__PURE__ */ ce(be), he = { xs: { value: "0px", type: "dimension", scope: ["WIDTH_HEIGHT"] }, sm: { value: "480px", type: "dimension", scope: ["WIDTH_HEIGHT"] }, md: { value: "736px", type: "dimension", scope: ["WIDTH_HEIGHT"] }, lg: { value: "980px", type: "dimension", scope: ["WIDTH_HEIGHT"] }, xl: { value: "1280px", type: "dimension", scope: ["WIDTH_HEIGHT"] }, "2xl": { value: "1440px", type: "dimension", scope: ["WIDTH_HEIGHT"] }, "3xl": { value: "1620px", type: "dimension", scope: ["WIDTH_HEIGHT"] }, "4xl": { value: "1920px", type: "dimension", scope: ["WIDTH_HEIGHT"] } }, we = {
92
- breakpoint: he
89
+ var ge = he();
90
+ const me = /* @__PURE__ */ ce(ge), be = { xs: { value: "0px", type: "dimension", scope: ["WIDTH_HEIGHT"] }, sm: { value: "480px", type: "dimension", scope: ["WIDTH_HEIGHT"] }, md: { value: "736px", type: "dimension", scope: ["WIDTH_HEIGHT"] }, lg: { value: "980px", type: "dimension", scope: ["WIDTH_HEIGHT"] }, xl: { value: "1280px", type: "dimension", scope: ["WIDTH_HEIGHT"] }, "2xl": { value: "1440px", type: "dimension", scope: ["WIDTH_HEIGHT"] }, "3xl": { value: "1620px", type: "dimension", scope: ["WIDTH_HEIGHT"] }, "4xl": { value: "1920px", type: "dimension", scope: ["WIDTH_HEIGHT"] } }, we = {
91
+ breakpoint: be
93
92
  };
94
- function _e() {
95
- return Object.entries(we.breakpoint).reduce((i, [s, p]) => {
96
- if (s !== "$type" && typeof p == "object" && "value" in p) {
97
- const h = typeof p.value == "string" ? Number(p.value.replace("px", "")) : p.value;
98
- isNaN(h) || (i[s] = h);
93
+ function ve() {
94
+ return Object.entries(we.breakpoint).reduce((s, [i, a]) => {
95
+ if (i !== "$type" && typeof a == "object" && "value" in a) {
96
+ const b = typeof a.value == "string" ? Number(a.value.replace("px", "")) : a.value;
97
+ isNaN(b) || (s[i] = b);
99
98
  }
100
- return i;
99
+ return s;
101
100
  }, {});
102
101
  }
103
- const ve = "_root_1uvp8_3", ke = "_dark_1uvp8_9", ye = "_bullet_1uvp8_9", Te = "_container_1uvp8_15", Se = "_arrow_1uvp8_80", Ie = "_pagination_1uvp8_117", xe = {
104
- root: ve,
105
- dark: ke,
106
- bullet: ye,
102
+ const _e = typeof window > "u" ? z : ue;
103
+ function ke() {
104
+ const [s, i] = Q({ height: void 0, width: void 0 });
105
+ return _e(() => {
106
+ i({ height: window.innerHeight, width: window.innerWidth });
107
+ function a() {
108
+ i({ height: window.innerHeight, width: window.innerWidth });
109
+ }
110
+ return window.addEventListener("resize", a), () => window.removeEventListener("resize", a);
111
+ }, []), s;
112
+ }
113
+ const ye = "_root_1uvp8_3", Se = "_dark_1uvp8_9", Te = "_bullet_1uvp8_9", Ie = "_container_1uvp8_15", We = "_arrow_1uvp8_80", xe = "_pagination_1uvp8_117", He = {
114
+ root: ye,
115
+ dark: Se,
116
+ bullet: Te,
107
117
  "bullet-active": "_bullet-active_1uvp8_12",
108
- container: Te,
118
+ container: Ie,
109
119
  "container-mobile": "_container-mobile_1uvp8_44",
110
120
  "container-tablet": "_container-tablet_1uvp8_53",
111
121
  "container-desktop": "_container-desktop_1uvp8_62",
112
122
  "container-full-width": "_container-full-width_1uvp8_75",
113
- arrow: Se,
123
+ arrow: We,
114
124
  "arrow-left": "_arrow-left_1uvp8_91",
115
125
  "arrow-right": "_arrow-right_1uvp8_94",
116
126
  "arrow-mobile": "_arrow-mobile_1uvp8_97",
117
127
  "arrow-desktop": "_arrow-desktop_1uvp8_106",
118
128
  "arrow-background": "_arrow-background_1uvp8_111",
119
- pagination: Ie,
129
+ pagination: xe,
120
130
  "pagination-mobile": "_pagination-mobile_1uvp8_126",
121
131
  "pagination-desktop": "_pagination-desktop_1uvp8_135"
122
- }, We = (i, s) => {
123
- const p = se();
124
- q(() => {
125
- p.current = i;
126
- }, [i]), q(() => {
127
- function h() {
128
- p.current();
132
+ }, Le = (s, i) => {
133
+ const a = se();
134
+ z(() => {
135
+ a.current = s;
136
+ }, [s]), z(() => {
137
+ function b() {
138
+ a.current();
129
139
  }
130
- if (s !== null) {
131
- const W = setInterval(h, s);
132
- return () => clearInterval(W);
140
+ if (i !== null) {
141
+ const x = setInterval(b, i);
142
+ return () => clearInterval(x);
133
143
  }
134
- }, [s]);
135
- }, J = (i, s) => {
136
- if (s === 0)
137
- return `${100 / i}%`;
138
- const h = s * (i === 1 ? 4 : 2) / 16;
139
- return `calc(${100 / i}% - ${h}rem)`;
140
- }, R = ue(xe), De = (i = {}) => {
144
+ }, [i]);
145
+ }, J = (s, i) => {
146
+ if (i === 0)
147
+ return `${100 / s}%`;
148
+ const b = i * (s === 1 ? 4 : 2) / 16;
149
+ return `calc(${100 / s}% - ${b}rem)`;
150
+ }, R = de(He), Ce = (s = {}) => {
141
151
  const {
142
- autoplay: s = !1,
143
- centeredSlides: p = !1,
144
- duration: h = 5e3,
145
- firstSlideToShow: W = 0,
152
+ autoplay: i = !1,
153
+ centeredSlides: a = !1,
154
+ duration: b = 5e3,
155
+ firstSlideToShow: x = 0,
146
156
  fullWidth: L = !1,
147
- id: m = "swiper",
148
- loop: v = !1,
157
+ id: h = "swiper",
158
+ loop: _ = !1,
149
159
  navigationSize: G = "md",
150
- slidesPerView: T = { desktop: 1, mobile: 1, tablet: 1 },
160
+ slidesPerView: S = { desktop: 1, mobile: 1, tablet: 1 },
151
161
  spaceBetween: B = 20,
152
162
  withDarkUI: D = !1,
153
163
  withNavigation: C = { desktop: !0, mobile: !0 },
154
- withPagination: c = { desktop: !1, mobile: !1 }
155
- } = i, F = v || s, { width: w } = fe(), [P, _] = Z(0), [z, V] = Z(!1), [u, e] = Z(!1), o = se(), a = _e(), k = de(() => w <= a.md ? T.mobile : w <= a.lg ? T.tablet : w >= a["4xl"] && L ? T.desktop + 2 : T.desktop, [w, a, L, T]);
164
+ withPagination: d = { desktop: !1, mobile: !1 }
165
+ } = s, F = _ || i, { width: w } = ke(), [E, v] = Q(0), [V, U] = Q(!1), [u, e] = Q(!1), n = se(), l = ve(), k = pe(() => w <= l.md ? S.mobile : w <= l.lg ? S.tablet : w >= l["4xl"] && L ? S.desktop + 2 : S.desktop, [w, l, L, S]);
156
166
  return {
157
- autoplay: s,
158
- centeredSlides: p,
159
- currentPage: P,
167
+ autoplay: i,
168
+ centeredSlides: a,
169
+ currentPage: E,
160
170
  currentSlidesPerView: k,
161
- duration: h,
162
- firstSlideToShow: W,
171
+ duration: b,
172
+ firstSlideToShow: x,
163
173
  fullWidth: L,
164
- id: m,
174
+ id: h,
165
175
  navigationSize: G,
166
- ref: o,
167
- setCurrentPage: _,
168
- setShowLeftArrow: V,
176
+ ref: n,
177
+ setCurrentPage: v,
178
+ setShowLeftArrow: U,
169
179
  setShowRightArrow: e,
170
180
  shouldLoop: F,
171
- showLeftArrow: z,
181
+ showLeftArrow: V,
172
182
  showRightArrow: u,
173
- slidesPerView: T,
183
+ slidesPerView: S,
174
184
  spaceBetween: B,
175
185
  withDarkUI: D,
176
186
  withNavigation: C,
177
- withPagination: c
187
+ withPagination: d
178
188
  };
179
- }, He = ({ children: i, className: s, store: p, ...h }) => {
189
+ }, Ee = ({ children: s, className: i, store: a, ...b }) => {
180
190
  const {
181
- autoplay: W,
191
+ autoplay: x,
182
192
  centeredSlides: L,
183
- currentPage: m,
184
- currentSlidesPerView: v,
193
+ currentPage: h,
194
+ currentSlidesPerView: _,
185
195
  duration: G,
186
- firstSlideToShow: T,
196
+ firstSlideToShow: S,
187
197
  fullWidth: B,
188
198
  id: D,
189
199
  navigationSize: C,
190
- ref: c,
200
+ ref: d,
191
201
  setCurrentPage: F,
192
202
  setShowLeftArrow: w,
193
- setShowRightArrow: P,
194
- shouldLoop: _,
195
- showLeftArrow: z,
196
- showRightArrow: V,
203
+ setShowRightArrow: E,
204
+ shouldLoop: v,
205
+ showLeftArrow: V,
206
+ showRightArrow: U,
197
207
  slidesPerView: u,
198
208
  spaceBetween: e,
199
- withDarkUI: o,
200
- withNavigation: a,
209
+ withDarkUI: n,
210
+ withNavigation: l,
201
211
  withPagination: k
202
- } = p, I = oe.toArray(i).length, E = Math.ceil(I / v), b = Array.from(Array(E).keys()), g = a.mobile || !1, S = a.desktop || !1, H = m === 0, M = m === b.length - 1, N = oe.map(i, (d, r) => {
203
- const n = `${D}-${r}`, t = r + 1, l = Math.ceil(t / v) - 1, f = M ? I - t >= v : l !== m;
204
- return pe(d, {
205
- ...d.props,
212
+ } = a, I = ne.toArray(s).length, P = Math.ceil(I / _), g = Array.from(Array(P).keys()), m = l.mobile || !1, T = l.desktop || !1, H = h === 0, M = h === g.length - 1, N = ne.map(s, (p, o) => {
213
+ const r = `${D}-${o}`, t = o + 1, c = Math.ceil(t / _) - 1, f = M ? I - t >= _ : c !== h;
214
+ return fe(p, {
215
+ ...p.props,
206
216
  "aria-hidden": f,
207
217
  "aria-label": `${t} of ${I}`,
208
218
  "aria-roledescription": "slide",
209
- id: n,
210
- key: n
219
+ id: r,
220
+ key: r
211
221
  });
212
- }), U = L ? (
222
+ }), q = L ? (
213
223
  // if centeredSlides is true, we calculate which number is the middle page
214
- Math.floor(E / 2)
224
+ Math.floor(P / 2)
215
225
  ) : (
216
226
  // if centeredSlides is false, we calculate on which page the number in firstSlideToShow props is
217
- Math.ceil(T / v) - 1
227
+ Math.ceil(S / _) - 1
218
228
  ), j = X(() => {
219
- const d = c == null ? void 0 : c.current;
220
- if (d && !_) {
221
- const { offsetWidth: r, scrollLeft: n, scrollWidth: t } = d, l = !(n > e), f = !(t - (n + r) > e);
222
- w(!l), P(!f);
229
+ const p = d == null ? void 0 : d.current;
230
+ if (p && !v) {
231
+ const { offsetWidth: o, scrollLeft: r, scrollWidth: t } = p, c = !(r > e), f = !(t - (r + o) > e);
232
+ w(!c), E(!f);
223
233
  } else
224
- w(!0), P(!0);
225
- }, [c, w, P, _, e]), Q = () => {
226
- var r, n;
227
- const d = c == null ? void 0 : c.current;
228
- if (d) {
229
- const { children: t, offsetWidth: l, scrollLeft: f, scrollWidth: $ } = d, ae = (n = (r = t == null ? void 0 : t[0]) == null ? void 0 : r.getBoundingClientRect()) == null ? void 0 : n.width, te = !($ - (f + l) > e) ? b.length - 1 : Math.round(f / ((ae + e) * v));
230
- te !== m && F(te);
234
+ w(!0), E(!0);
235
+ }, [d, w, E, v, e]), Y = () => {
236
+ var o, r;
237
+ const p = d == null ? void 0 : d.current;
238
+ if (p) {
239
+ const { children: t, offsetWidth: c, scrollLeft: f, scrollWidth: $ } = p, ae = (r = (o = t == null ? void 0 : t[0]) == null ? void 0 : o.getBoundingClientRect()) == null ? void 0 : r.width, te = !($ - (f + c) > e) ? g.length - 1 : Math.round(f / ((ae + e) * _));
240
+ te !== h && F(te);
231
241
  }
232
- }, Y = ge(() => {
233
- j(), Q();
242
+ }, Z = me(() => {
243
+ j(), Y();
234
244
  }, 100), y = X(
235
- (d, r = !1) => {
236
- var l, f, $;
237
- const n = c == null ? void 0 : c.current, t = ($ = (f = (l = n == null ? void 0 : n.children) == null ? void 0 : l[0]) == null ? void 0 : f.getBoundingClientRect()) == null ? void 0 : $.width;
238
- n == null || n.scrollTo({
245
+ (p, o = !1) => {
246
+ var c, f, $;
247
+ const r = d == null ? void 0 : d.current, t = ($ = (f = (c = r == null ? void 0 : r.children) == null ? void 0 : c[0]) == null ? void 0 : f.getBoundingClientRect()) == null ? void 0 : $.width;
248
+ r == null || r.scrollTo({
239
249
  // We don't want to have a scroll effect when we first render the swiper
240
- behavior: r ? "auto" : "smooth",
241
- left: d * (t + e) * v,
250
+ behavior: o ? "auto" : "smooth",
251
+ left: p * (t + e) * _,
242
252
  top: 0
243
253
  });
244
254
  },
245
- [v, e, c]
246
- ), x = X(() => {
247
- y(_ && M ? 0 : m + 1);
248
- }, [m, y, M, _]), O = X(() => {
249
- y(H && _ ? b.length - 1 : m - 1);
250
- }, [b.length, m, y, H, _]);
251
- return We(
255
+ [_, e, d]
256
+ ), W = X(() => {
257
+ y(v && M ? 0 : h + 1);
258
+ }, [h, y, M, v]), O = X(() => {
259
+ y(H && v ? g.length - 1 : h - 1);
260
+ }, [g.length, h, y, H, v]);
261
+ return Le(
252
262
  () => {
253
- W && x();
263
+ x && W();
254
264
  },
255
- W ? G : null
256
- ), q(() => {
257
- const d = (r) => {
258
- r.code === "ArrowLeft" && O(), r.code === "ArrowRight" && x();
265
+ x ? G : null
266
+ ), z(() => {
267
+ const p = (o) => {
268
+ o.code === "ArrowLeft" && O(), o.code === "ArrowRight" && W();
259
269
  };
260
- return window.addEventListener("keydown", d), () => window.removeEventListener("keydown", d);
261
- }, [O, x]), q(() => {
262
- y(U, !0);
263
- }, []), q(() => {
270
+ return window.addEventListener("keydown", p), () => window.removeEventListener("keydown", p);
271
+ }, [O, W]), z(() => {
272
+ y(q, !0);
273
+ }, []), z(() => {
264
274
  j();
265
- }, [j, i]), /* @__PURE__ */ le("div", { className: R("root", o && "dark", s), ...h, children: [
275
+ }, [j, s]), /* @__PURE__ */ le("div", { className: R("root", n && "dark", i), ...b, children: [
266
276
  /* @__PURE__ */ A(
267
277
  "ul",
268
278
  {
@@ -273,8 +283,8 @@ const ve = "_root_1uvp8_3", ke = "_dark_1uvp8_9", ye = "_bullet_1uvp8_9", Te = "
273
283
  u.tablet && "container-tablet",
274
284
  u.desktop && B && "container-full-width"
275
285
  ),
276
- onScroll: Y,
277
- ref: c,
286
+ onScroll: Z,
287
+ ref: d,
278
288
  style: {
279
289
  "--slideDesktop": u.desktop,
280
290
  "--slideMobile": u.mobile,
@@ -289,39 +299,39 @@ const ve = "_root_1uvp8_3", ke = "_dark_1uvp8_9", ye = "_bullet_1uvp8_9", Te = "
289
299
  }
290
300
  ),
291
301
  /* @__PURE__ */ A(
292
- re,
302
+ oe,
293
303
  {
294
304
  "aria-label": "Previous slide",
295
305
  className: R(
296
306
  "arrow",
297
307
  "arrow-left",
298
- !o && "arrow-background",
299
- g && "arrow-mobile",
300
- S && "arrow-desktop"
308
+ !n && "arrow-background",
309
+ m && "arrow-mobile",
310
+ T && "arrow-desktop"
301
311
  ),
302
- disabled: !z,
312
+ disabled: !V,
303
313
  onClick: O,
304
314
  size: C,
305
- variant: o ? "primary-neutral" : "tertiary",
306
- children: /* @__PURE__ */ A(ne, { name: "angle-left-b" })
315
+ variant: n ? "primary-neutral" : "tertiary",
316
+ children: /* @__PURE__ */ A(re, { name: "angle-left-b" })
307
317
  }
308
318
  ),
309
319
  /* @__PURE__ */ A(
310
- re,
320
+ oe,
311
321
  {
312
322
  "aria-label": "Next slide",
313
323
  className: R(
314
324
  "arrow",
315
325
  "arrow-right",
316
- !o && "arrow-background",
317
- g && "arrow-mobile",
318
- S && "arrow-desktop"
326
+ !n && "arrow-background",
327
+ m && "arrow-mobile",
328
+ T && "arrow-desktop"
319
329
  ),
320
- disabled: !V,
321
- onClick: x,
330
+ disabled: !U,
331
+ onClick: W,
322
332
  size: C,
323
- variant: o ? "primary-neutral" : "tertiary",
324
- children: /* @__PURE__ */ A(ne, { name: "angle-right-b" })
333
+ variant: n ? "primary-neutral" : "tertiary",
334
+ children: /* @__PURE__ */ A(re, { name: "angle-right-b" })
325
335
  }
326
336
  ),
327
337
  /* @__PURE__ */ A(
@@ -333,30 +343,30 @@ const ve = "_root_1uvp8_3", ke = "_dark_1uvp8_9", ye = "_bullet_1uvp8_9", Te = "
333
343
  k.desktop && "pagination-desktop"
334
344
  ),
335
345
  role: "tablist",
336
- children: b.length > 1 && b.map((d, r) => {
337
- const n = {
338
- "aria-controls": `${D}-${r}`,
339
- "aria-label": `${r + 1} of ${b.length}`,
340
- "aria-selected": r === m,
341
- idx: r,
342
- onClick: () => y(r),
346
+ children: g.length > 1 && g.map((p, o) => {
347
+ const r = {
348
+ "aria-controls": `${D}-${o}`,
349
+ "aria-label": `${o + 1} of ${g.length}`,
350
+ "aria-selected": o === h,
351
+ idx: o,
352
+ onClick: () => y(o),
343
353
  role: "tab"
344
354
  };
345
355
  return /* @__PURE__ */ A(
346
356
  "div",
347
357
  {
348
- className: R("bullet", r === m && "bullet-active"),
349
- ...n
358
+ className: R("bullet", o === h && "bullet-active"),
359
+ ...r
350
360
  },
351
- `bullet-${r + 1}`
361
+ `bullet-${o + 1}`
352
362
  );
353
363
  })
354
364
  }
355
365
  )
356
366
  ] });
357
367
  };
358
- He.displayName = "Swiper";
368
+ Ee.displayName = "Swiper";
359
369
  export {
360
- He as Swiper,
361
- De as useSwiper
370
+ Ee as Swiper,
371
+ Ce as useSwiper
362
372
  };
package/dist/Tabs.css CHANGED
@@ -1 +1 @@
1
- @layer components{._root_156xk_2{position:absolute;will-change:width,transform;transition-property:all;transition-duration:var(--duration-medium);transition-timing-function:var(--timing-primary);background-color:var(--components-colors-tab-color-background-checked-pressed)}[aria-orientation=horizontal] ._root_156xk_2{width:var(--activeBarSize);height:var(--components-dimensions-tab-border-width-checked);left:0;bottom:0;transform:translate(var(--activeBarOffset))}[aria-orientation=vertical] ._root_156xk_2{width:var(--components-dimensions-tab-border-width-checked);height:var(--activeBarSize);right:0;top:0;transform:translateY(var(--activeBarOffset))}}@layer components{._root_3pg7f_2{width:100%;position:relative;display:flex;overflow-x:auto;border:0;gap:var(--components-dimensions-tab-size-icon-lg);--tabFontSize: var(--components-dimensions-tab-padding-inline-lg);--tabBoxShadow: inset 0 calc(-1 * var(--components-dimensions-tab-border-width-unchecked)) 0 var(--color-background-neutral-subtlest);font-size:var(--tabFontSize);box-shadow:var(--tabBoxShadow)}._root_3pg7f_2[aria-orientation=vertical]{flex-direction:column;--tabBoxShadow: inset calc(-1 * var(--components-dimensions-tab-border-width-unchecked)) 0 0 var(--color-background-neutral-subtlest)}._size-md_3pg7f_20{--tabFontSize: var(--components-dimensions-tab-padding-inline-lg)}._size-sm_3pg7f_23{--tabFontSize: var(--font-size-14)}}@layer components{._root_etkg6_2:focus{outline:none}[aria-orientation=horizontal] ._root_etkg6_2{margin-top:var(--components-dimensions-tab-size-icon-lg)}[aria-orientation=vertical] ._root_etkg6_2{margin-left:var(--components-dimensions-tab-size-icon-lg)}}@layer components{._root_86cgt_2{border:0;background:none;color:var(--tabsColor, var(--color-background-neutral-tertiary));font-weight:var(--font-weight-medium);line-height:var(--font-size-lg);text-decoration:none;display:flex;align-items:center;flex:none;padding:var(--components-dimensions-tab-padding-inline-md) 0;transition:var(--duration-medium);text-transform:none;cursor:pointer;gap:var(--components-dimensions-tab-padding-block-md)}._root_86cgt_2:focus{outline:none!important}._root_86cgt_2:focus:not([aria-selected=true]){--tabsColor: var(--components-colors-tab-color-text-unchecked-pressed)}._root_86cgt_2[aria-selected=true]{--tabsColor: var(--components-colors-tab-color-text-unchecked-pressed)}._root_86cgt_2[aria-disabled=true]{--tabsColor: var(--color-icon-neutral-subtle);cursor:not-allowed}._root_86cgt_2:hover:not([aria-selected=true]):not([aria-disabled=true]){--tabsColor: var(--components-colors-tab-color-text-unchecked-pressed)}._root_86cgt_2>svg,._root_86cgt_2 img{max-height:var(--components-dimensions-tab-padding-inline-lg);max-width:var(--components-dimensions-tab-padding-inline-lg)}._root_86cgt_2>span{max-height:var(--components-dimensions-tab-padding-inline-lg)}}
1
+ @layer components{._root_nt8z5_2{display:flex;align-items:center;transition-property:background-color,border-color,color,box-shadow;transition-timing-function:ease-in-out;border-radius:var(--radius-md);transition-duration:var(--duration-medium);font-weight:var(--font-weight-medium);gap:var(--tabGap);max-height:var(--tabItemMaxHeight);padding-block:var(--tabPaddingBlock);padding-inline:var(--tabPaddingInline);font-size:var(--tabFontSize);background-color:var(--tabItemBackgroundColor, var(--components-colors-tab-color-background-unchecked-default));color:var(--tabItemColor, var(--components-colors-tab-color-text-unchecked-default));box-shadow:inset 0 0 0 var(--tabItemBorderSize, var(--components-dimensions-tab-border-width-unchecked)) var(--tabItemBorderColor, var(--components-colors-tab-color-border-unchecked-default)),var(--tabItemBoxShadow, var(--elevation-10))}._root_nt8z5_2:focus{outline:none!important;--tabItemColor: var(--components-colors-tab-color-text-unchecked-pressed);--tabItemBackgroundColor: var(--components-colors-tab-color-background-unchecked-pressed);--tabItemBorderColor: var(--components-colors-tab-color-border-unchecked-pressed)}._root_nt8z5_2:focus[aria-selected=true]{--tabItemColor: var(--components-colors-tab-color-text-checked-pressed);--tabItemBackgroundColor: var(--components-colors-tab-color-background-checked-pressed);--tabItemBorderColor: var(--components-colors-tab-color-border-checked-pressed)}._root_nt8z5_2[aria-selected=true]{--tabItemColor: var(--components-colors-tab-color-text-checked-default);--tabItemBackgroundColor: var(--components-colors-tab-color-background-checked-default);--tabItemBorderColor: var(--components-colors-tab-color-border-checked-default);--tabItemBorderSize: var(--components-dimensions-tab-border-width-checked)}._root_nt8z5_2[aria-selected=true]:hover{--tabItemColor: var(--components-colors-tab-color-text-checked-hover);--tabItemBackgroundColor: var(--components-colors-tab-color-background-checked-hover);--tabItemBorderColor: var(--components-colors-tab-color-border-checked-hover);--tabItemBorderSize: var(--components-dimensions-tab-border-width-checked);--tabItemBoxShadow: var(--elevation-20)}._root_nt8z5_2[aria-disabled=true]{--tabItemColor: var(--color-icon-neutral-subtle);cursor:not-allowed}._root_nt8z5_2:hover:not([aria-selected=true]):not([aria-disabled=true]){--tabItemColor: var(--components-colors-tab-color-text-unchecked-hover);--tabItemBackgroundColor: var(--components-colors-tab-color-background-unchecked-hover);--tabItemBorderColor: var(--components-colors-tab-color-border-unchecked-hover);--tabItemBoxShadow: var(--elevation-20)}._size-lg_nt8z5_55{--tabItemMaxHeight: var(--components-dimensions-tab-size-max-height-lg);--tabPaddingBlock: var(--components-dimensions-tab-padding-block-lg);--tabPaddingInline: var(--components-dimensions-tab-padding-inline-lg);--tabFontSize: var(--font-size-sm);--tabGap: var(--components-dimensions-tab-gap-content-lg)}._size-md_nt8z5_62{--tabItemMaxHeight: var(--components-dimensions-tab-size-max-height-md);--tabPaddingBlock: var(--components-dimensions-tab-padding-block-md);--tabPaddingInline: var(--components-dimensions-tab-padding-inline-md);--tabFontSize: var(--font-size-xs);--tabGap: var(--components-dimensions-tab-gap-content-md)}._tab-list_nt8z5_72{display:flex;align-items:center;gap:var(--tabsGap, 0)}._tab-list_nt8z5_72._size-lg_nt8z5_55{--tabsGap: var(--components-dimensions-tab-gap-content-lg)}._tab-list_nt8z5_72._size-md_nt8z5_62{--tabsGap: var(--components-dimensions-tab-gap-content-md)}}