@hemerson/design-system 0.1.0 → 0.3.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.
package/dist/index.js CHANGED
@@ -1,72 +1,31 @@
1
- import { forwardRef as e, useEffect as t, useId as n, useLayoutEffect as r, useRef as i, useState as a } from "react";
2
- import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
3
- import { createPortal as l } from "react-dom";
1
+ import { t as e } from "./enableGlassRefraction-CgDeg-2E.js";
2
+ import { a as t, i as n, n as r, o as i, r as a, s as o, t as s } from "./appearance-J15aUjQp.js";
3
+ import { createContext as c, forwardRef as l, useCallback as u, useContext as d, useEffect as f, useId as p, useLayoutEffect as m, useMemo as h, useRef as g, useState as _, useSyncExternalStore as v } from "react";
4
+ import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
5
+ import { createPortal as S } from "react-dom";
4
6
  //#region src/internal/cx.ts
5
- function u(...e) {
7
+ function C(...e) {
6
8
  return e.filter(Boolean).join(" ");
7
9
  }
8
10
  //#endregion
9
11
  //#region src/components/GlassPanel/GlassPanel.tsx
10
- var d = e(function({ as: e = "div", tone: t = "regular", className: n, ...r }, i) {
11
- return /* @__PURE__ */ s(e, {
12
+ var w = l(function({ as: e = "div", tone: t = "regular", className: n, ...r }, i) {
13
+ return /* @__PURE__ */ b(e, {
12
14
  ...r,
13
15
  ref: i,
14
- className: u("hds-glass", t !== "regular" && `hds-glass--${t}`, n)
16
+ className: C("hds-glass", t !== "regular" && `hds-glass--${t}`, n)
15
17
  });
16
- }), f = "http://www.w3.org/2000/svg";
17
- function p() {
18
- if (typeof document > "u") return !1;
19
- let e = (navigator.userAgentData?.brands ?? []).some(({ brand: e }) => e.includes("Chromium")), t = window.matchMedia?.("(prefers-reduced-transparency: reduce)").matches ?? !1;
20
- if (!e || t) return !1;
21
- if (!document.getElementById("hds-glass-defs")) {
22
- let e = document.createElementNS(f, "svg");
23
- e.setAttribute("id", "hds-glass-defs"), e.setAttribute("width", "0"), e.setAttribute("height", "0"), e.setAttribute("aria-hidden", "true"), e.style.position = "absolute";
24
- let t = document.createElementNS(f, "filter");
25
- Object.entries({
26
- id: "hds-glass-distortion",
27
- x: "-20%",
28
- y: "-20%",
29
- width: "140%",
30
- height: "140%",
31
- filterUnits: "objectBoundingBox"
32
- }).forEach(([e, n]) => t.setAttribute(e, n));
33
- for (let [e, n] of [
34
- ["feTurbulence", {
35
- type: "fractalNoise",
36
- baseFrequency: "0.012 0.012",
37
- numOctaves: "2",
38
- seed: "8",
39
- result: "noise"
40
- }],
41
- ["feGaussianBlur", {
42
- in: "noise",
43
- stdDeviation: "3",
44
- result: "blurredNoise"
45
- }],
46
- ["feDisplacementMap", {
47
- in: "SourceGraphic",
48
- in2: "blurredNoise",
49
- scale: "40",
50
- xChannelSelector: "R",
51
- yChannelSelector: "G"
52
- }]
53
- ]) {
54
- let r = document.createElementNS(f, e);
55
- Object.entries(n).forEach(([e, t]) => r.setAttribute(e, t)), t.appendChild(r);
56
- }
57
- e.appendChild(t), document.body.appendChild(e);
58
- }
59
- return document.documentElement.setAttribute("data-glass-refraction", ""), !0;
60
- }
61
- //#endregion
62
- //#region src/internal/Icon.tsx
63
- var m = {
18
+ }), T = {
19
+ cx: 12,
20
+ cy: 12,
21
+ r: 10
22
+ }, E = {
64
23
  check: ["M20 6 9 17l-5-5"],
65
24
  x: ["M18 6 6 18", "m6 6 12 12"],
66
25
  "chevron-down": ["m6 9 6 6 6-6"],
67
- "circle-check": ["circle", "m9 12 2 2 4-4"],
26
+ "circle-check": [T, "m9 12 2 2 4-4"],
68
27
  "circle-x": [
69
- "circle",
28
+ T,
70
29
  "m15 9-6 6",
71
30
  "m9 9 6 6"
72
31
  ],
@@ -76,15 +35,41 @@ var m = {
76
35
  "M12 17h.01"
77
36
  ],
78
37
  info: [
79
- "circle",
38
+ T,
80
39
  "M12 16v-4",
81
40
  "M12 8h.01"
82
41
  ],
83
- loader: ["M21 12a9 9 0 1 1-6.219-8.56"]
42
+ loader: ["M21 12a9 9 0 1 1-6.219-8.56"],
43
+ sun: [
44
+ {
45
+ cx: 12,
46
+ cy: 12,
47
+ r: 4
48
+ },
49
+ "M12 2v2",
50
+ "M12 20v2",
51
+ "m4.93 4.93 1.41 1.41",
52
+ "m17.66 17.66 1.41 1.41",
53
+ "M2 12h2",
54
+ "M20 12h2",
55
+ "m6.34 17.66-1.41 1.41",
56
+ "m19.07 4.93-1.41 1.41"
57
+ ],
58
+ moon: ["M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"],
59
+ blend: [{
60
+ cx: 9,
61
+ cy: 9,
62
+ r: 7
63
+ }, {
64
+ cx: 15,
65
+ cy: 15,
66
+ r: 7
67
+ }]
84
68
  };
85
- function h({ name: e, className: t }) {
86
- return /* @__PURE__ */ s("svg", {
87
- className: u("hds-icon", t),
69
+ function D({ name: e, className: t }) {
70
+ let n = E[e];
71
+ return /* @__PURE__ */ b("svg", {
72
+ className: C("hds-icon", t),
88
73
  viewBox: "0 0 24 24",
89
74
  fill: "none",
90
75
  stroke: "currentColor",
@@ -93,69 +78,69 @@ function h({ name: e, className: t }) {
93
78
  strokeLinejoin: "round",
94
79
  "aria-hidden": "true",
95
80
  focusable: "false",
96
- children: m[e].map((e) => e === "circle" ? /* @__PURE__ */ s("circle", {
97
- cx: 12,
98
- cy: 12,
99
- r: 10
100
- }, e) : /* @__PURE__ */ s("path", { d: e }, e))
81
+ children: n.map((e, t) => typeof e == "string" ? /* @__PURE__ */ b("path", { d: e }, t) : /* @__PURE__ */ b("circle", {
82
+ cx: e.cx,
83
+ cy: e.cy,
84
+ r: e.r
85
+ }, t))
101
86
  });
102
87
  }
103
88
  //#endregion
104
89
  //#region src/components/Button/Button.tsx
105
- var g = e(function({ variant: e = "primary", size: t = "md", icon: n, iconOnly: r = !1, loading: i = !1, disabled: a, type: o = "button", className: l, children: d, ...f }, p) {
106
- return r && !f["aria-label"] && !f["aria-labelledby"] && console.warn("Button: an icon-only button needs an aria-label."), /* @__PURE__ */ c("button", {
107
- ...f,
108
- ref: p,
90
+ var O = l(function({ variant: e = "primary", size: t = "md", icon: n, iconOnly: r = !1, loading: i = !1, disabled: a, type: o = "button", className: s, children: c, ...l }, u) {
91
+ return r && !l["aria-label"] && !l["aria-labelledby"] && console.warn("Button: an icon-only button needs an aria-label."), /* @__PURE__ */ x("button", {
92
+ ...l,
93
+ ref: u,
109
94
  type: o,
110
95
  disabled: a || i,
111
96
  "aria-busy": i || void 0,
112
- className: u("hds-btn", `hds-btn--${e}`, t !== "md" && `hds-btn--${t}`, r && "hds-btn--icon", e === "glass" && "hds-glass", l),
113
- children: [i ? /* @__PURE__ */ s(h, {
97
+ className: C("hds-btn", `hds-btn--${e}`, t !== "md" && `hds-btn--${t}`, r && "hds-btn--icon", e === "glass" && "hds-glass", s),
98
+ children: [i ? /* @__PURE__ */ b(D, {
114
99
  name: "loader",
115
100
  className: "hds-spin"
116
- }) : n, r ? null : d]
101
+ }) : n, r ? null : c]
117
102
  });
118
103
  });
119
104
  //#endregion
120
105
  //#region src/components/NavBar/NavBar.tsx
121
- function _({ active: e = !1, className: t, ...n }) {
122
- return /* @__PURE__ */ s("a", {
106
+ function ee({ active: e = !1, className: t, ...n }) {
107
+ return /* @__PURE__ */ b("a", {
123
108
  ...n,
124
109
  "aria-current": e ? "page" : void 0,
125
- className: u("hds-navbar-link", t)
110
+ className: C("hds-navbar-link", t)
126
111
  });
127
112
  }
128
- function v({ title: e, actions: t, navLabel: n = "Principal", className: r, children: i, ...a }) {
129
- return /* @__PURE__ */ c(d, {
113
+ function k({ title: e, actions: t, navLabel: n = "Principal", className: r, children: i, ...a }) {
114
+ return /* @__PURE__ */ x(w, {
130
115
  ...a,
131
116
  as: "header",
132
- className: u("hds-navbar", r),
117
+ className: C("hds-navbar", r),
133
118
  children: [
134
- e ? /* @__PURE__ */ s("p", {
119
+ e ? /* @__PURE__ */ b("p", {
135
120
  className: "hds-navbar-title",
136
121
  children: e
137
122
  }) : null,
138
- i ? /* @__PURE__ */ s("nav", {
123
+ i ? /* @__PURE__ */ b("nav", {
139
124
  className: "hds-navbar-nav",
140
125
  "aria-label": n,
141
126
  children: i
142
127
  }) : null,
143
- t ? /* @__PURE__ */ s("div", {
128
+ t ? /* @__PURE__ */ b("div", {
144
129
  className: "hds-navbar-actions",
145
130
  children: t
146
131
  }) : null
147
132
  ]
148
133
  });
149
134
  }
150
- var y = Object.assign(v, { Link: _ });
135
+ var te = Object.assign(k, { Link: ee });
151
136
  //#endregion
152
137
  //#region src/components/Sidebar/Sidebar.tsx
153
- function b({ items: e, footer: t, floating: n = !1, label: r = "Navegação", className: i }) {
154
- return /* @__PURE__ */ c(d, {
138
+ function ne({ items: e, footer: t, floating: n = !1, label: r = "Navegação", className: i }) {
139
+ return /* @__PURE__ */ x(w, {
155
140
  as: "nav",
156
141
  "aria-label": r,
157
- className: u("hds-sidebar", n && "hds-sidebar--floating", i),
158
- children: [/* @__PURE__ */ s("ul", {
142
+ className: C("hds-sidebar", n && "hds-sidebar--floating", i),
143
+ children: [/* @__PURE__ */ b("ul", {
159
144
  className: "hds-sidebar-items",
160
145
  children: e.map((e) => {
161
146
  let t = {
@@ -164,19 +149,19 @@ function b({ items: e, footer: t, floating: n = !1, label: r = "Navegação", cl
164
149
  "aria-current": e.active ? "page" : void 0,
165
150
  className: "hds-sidebar-item"
166
151
  };
167
- return /* @__PURE__ */ s("li", { children: e.href ? /* @__PURE__ */ s("a", {
152
+ return /* @__PURE__ */ b("li", { children: e.href ? /* @__PURE__ */ b("a", {
168
153
  ...t,
169
154
  href: e.href,
170
155
  onClick: e.onClick,
171
156
  children: e.icon
172
- }) : /* @__PURE__ */ s("button", {
157
+ }) : /* @__PURE__ */ b("button", {
173
158
  ...t,
174
159
  type: "button",
175
160
  onClick: e.onClick,
176
161
  children: e.icon
177
162
  }) }, e.label);
178
163
  })
179
- }), t ? /* @__PURE__ */ s("div", {
164
+ }), t ? /* @__PURE__ */ b("div", {
180
165
  className: "hds-sidebar-footer",
181
166
  children: t
182
167
  }) : null]
@@ -184,46 +169,46 @@ function b({ items: e, footer: t, floating: n = !1, label: r = "Navegação", cl
184
169
  }
185
170
  //#endregion
186
171
  //#region src/components/SegmentedControl/SegmentedControl.tsx
187
- var x = {
172
+ var A = {
188
173
  ArrowRight: 1,
189
174
  ArrowDown: 1,
190
175
  ArrowLeft: -1,
191
176
  ArrowUp: -1
192
177
  };
193
- function S({ options: e, value: t, defaultValue: n, onChange: o, label: l, className: f }) {
194
- let [p, m] = a(n ?? e[0]?.value), h = t === void 0 ? p : t, g = i([]), _ = i(null), v = Math.max(0, e.findIndex((e) => e.value === h));
195
- r(() => {
178
+ function j({ options: e, value: t, defaultValue: n, onChange: r, label: i, className: a }) {
179
+ let [o, s] = _(n ?? e[0]?.value), c = t === void 0 ? o : t, l = g([]), u = g(null), d = Math.max(0, e.findIndex((e) => e.value === c));
180
+ m(() => {
196
181
  function e() {
197
- let e = g.current[v];
198
- e && _.current && (_.current.style.width = `${e.offsetWidth}px`, _.current.style.transform = `translateX(${e.offsetLeft - 4}px)`, _.current.style.opacity = "1");
182
+ let e = l.current[d];
183
+ e && u.current && (u.current.style.width = `${e.offsetWidth}px`, u.current.style.transform = `translateX(${e.offsetLeft - 4}px)`, u.current.style.opacity = "1");
199
184
  }
200
185
  return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
201
- }, [v, e.length]);
202
- function y(e) {
203
- t === void 0 && m(e), o?.(e);
186
+ }, [d, e.length]);
187
+ function f(e) {
188
+ t === void 0 && s(e), r?.(e);
204
189
  }
205
- function b(t) {
206
- let n = x[t.key];
190
+ function p(t) {
191
+ let n = A[t.key];
207
192
  if (!n) return;
208
193
  t.preventDefault();
209
- let r = (v + n + e.length) % e.length;
210
- y(e[r].value), g.current[r]?.focus();
194
+ let r = (d + n + e.length) % e.length;
195
+ f(e[r].value), l.current[r]?.focus();
211
196
  }
212
- return /* @__PURE__ */ c(d, {
197
+ return /* @__PURE__ */ x(w, {
213
198
  role: "radiogroup",
214
- "aria-label": l,
215
- className: u("hds-segmented", f),
216
- onKeyDown: b,
217
- children: [/* @__PURE__ */ s("span", {
218
- ref: _,
199
+ "aria-label": i,
200
+ className: C("hds-segmented", a),
201
+ onKeyDown: p,
202
+ children: [/* @__PURE__ */ b("span", {
203
+ ref: u,
219
204
  className: "hds-segmented-thumb",
220
205
  "aria-hidden": "true",
221
206
  style: { opacity: 0 }
222
207
  }), e.map((e, t) => {
223
- let n = t === v;
224
- return /* @__PURE__ */ c("button", {
208
+ let n = t === d;
209
+ return /* @__PURE__ */ x("button", {
225
210
  ref: (e) => {
226
- g.current[t] = e;
211
+ l.current[t] = e;
227
212
  },
228
213
  type: "button",
229
214
  role: "radio",
@@ -231,7 +216,7 @@ function S({ options: e, value: t, defaultValue: n, onChange: o, label: l, class
231
216
  "aria-label": e.ariaLabel,
232
217
  tabIndex: n ? 0 : -1,
233
218
  className: "hds-segmented-option",
234
- onClick: () => y(e.value),
219
+ onClick: () => f(e.value),
235
220
  children: [e.icon, e.label]
236
221
  }, String(e.value));
237
222
  })]
@@ -239,89 +224,102 @@ function S({ options: e, value: t, defaultValue: n, onChange: o, label: l, class
239
224
  }
240
225
  //#endregion
241
226
  //#region src/components/Menu/Menu.tsx
242
- function C({ label: e, icon: r, iconOnly: o = !1, items: l, align: f = "end", triggerVariant: p = "glass", className: m }) {
243
- let [h, _] = a(!1), v = i(null), y = i(null), b = i(null), x = n(), S = () => Array.from(b.current?.querySelectorAll("[role=\"menuitem\"]") ?? []);
244
- function C(e) {
245
- _(!1), e && y.current?.focus();
227
+ var M = 8;
228
+ function N(e, t, n) {
229
+ let r = e.getBoundingClientRect(), i = t.offsetWidth, a = t.offsetHeight, o = document.documentElement.clientWidth || window.innerWidth, s = document.documentElement.clientHeight || window.innerHeight, c = r.bottom + M + a <= s - M, l = r.top - M - a >= M, u = c || !l ? r.bottom + M : r.top - M - a, d = n === "end" ? r.right - i : r.left, f = Math.min(Math.max(M, d), Math.max(M, o - i - M));
230
+ t.style.top = `${Math.round(u)}px`, t.style.left = `${Math.round(f)}px`, t.dataset.side = c || !l ? "bottom" : "top";
231
+ }
232
+ function P({ label: e, icon: t, iconOnly: n = !1, items: r, align: i = "end", triggerVariant: a = "glass", className: o }) {
233
+ let [s, c] = _(!1), l = g(null), u = g(null), d = p(), h = () => Array.from(u.current?.querySelectorAll("[role=\"menuitem\"]") ?? []);
234
+ function v(e) {
235
+ c(!1), e && l.current?.focus();
246
236
  }
247
- t(() => {
248
- if (!h) return;
249
- S()[0]?.focus();
237
+ m(() => {
238
+ if (!s || !l.current || !u.current) return;
239
+ let e = () => {
240
+ l.current && u.current && N(l.current, u.current, i);
241
+ };
242
+ return e(), window.addEventListener("scroll", e, !0), window.addEventListener("resize", e), () => {
243
+ window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e);
244
+ };
245
+ }, [s, i]), f(() => {
246
+ if (!s) return;
247
+ h()[0]?.focus();
250
248
  function e(e) {
251
- v.current && !v.current.contains(e.target) && _(!1);
249
+ let t = e.target;
250
+ l.current?.contains(t) || u.current?.contains(t) || c(!1);
252
251
  }
253
252
  return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
254
- }, [h]);
255
- function w(e) {
256
- let t = S(), n = t.indexOf(document.activeElement);
257
- e.key === "Escape" ? (e.preventDefault(), C(!0)) : e.key === "Tab" ? C(!1) : e.key === "ArrowDown" || e.key === "ArrowUp" ? (e.preventDefault(), t[(n + (e.key === "ArrowDown" ? 1 : -1) + t.length) % t.length]?.focus()) : (e.key === "Home" || e.key === "End") && (e.preventDefault(), (e.key === "Home" ? t[0] : t[t.length - 1])?.focus());
253
+ }, [s]);
254
+ function y(e) {
255
+ let t = h(), n = t.indexOf(document.activeElement);
256
+ e.key === "Escape" || e.key === "Tab" ? (e.preventDefault(), v(!0)) : e.key === "ArrowDown" || e.key === "ArrowUp" ? (e.preventDefault(), t[(n + (e.key === "ArrowDown" ? 1 : -1) + t.length) % t.length]?.focus()) : (e.key === "Home" || e.key === "End") && (e.preventDefault(), (e.key === "Home" ? t[0] : t[t.length - 1])?.focus());
258
257
  }
259
- return /* @__PURE__ */ c("div", {
260
- ref: v,
261
- className: u("hds-menu", m),
262
- children: [/* @__PURE__ */ s(g, {
263
- ref: y,
264
- variant: p,
265
- icon: r,
266
- iconOnly: o,
267
- "aria-label": o ? e : void 0,
258
+ return /* @__PURE__ */ x("div", {
259
+ className: C("hds-menu", o),
260
+ children: [/* @__PURE__ */ b(O, {
261
+ ref: l,
262
+ variant: a,
263
+ icon: t,
264
+ iconOnly: n,
265
+ "aria-label": n ? e : void 0,
268
266
  "aria-haspopup": "menu",
269
- "aria-expanded": h,
270
- "aria-controls": h ? x : void 0,
271
- onClick: () => _(!h),
267
+ "aria-expanded": s,
268
+ "aria-controls": s ? d : void 0,
269
+ onClick: () => c(!s),
272
270
  children: e
273
- }), h ? /* @__PURE__ */ s(d, {
274
- ref: b,
275
- id: x,
271
+ }), s ? S(/* @__PURE__ */ b(w, {
272
+ ref: u,
273
+ id: d,
276
274
  role: "menu",
277
275
  "aria-label": e,
278
- className: u("hds-menu-panel", `hds-menu-panel--${f}`),
279
- onKeyDown: w,
280
- children: l.map((e, t) => e.separator ? /* @__PURE__ */ s("div", {
276
+ className: "hds-menu-panel",
277
+ onKeyDown: y,
278
+ children: r.map((e, t) => e.separator ? /* @__PURE__ */ b("div", {
281
279
  role: "separator",
282
280
  className: "hds-menu-separator"
283
- }, `separator-${t}`) : /* @__PURE__ */ c("button", {
281
+ }, `separator-${t}`) : /* @__PURE__ */ x("button", {
284
282
  type: "button",
285
283
  role: "menuitem",
286
284
  tabIndex: -1,
287
- className: u("hds-menu-item", e.danger && "hds-menu-item--danger"),
285
+ className: C("hds-menu-item", e.danger && "hds-menu-item--danger"),
288
286
  onClick: () => {
289
- C(!0), e.onSelect?.();
287
+ v(!0), e.onSelect?.();
290
288
  },
291
289
  children: [e.icon, e.label]
292
290
  }, e.label))
293
- }) : null]
291
+ }), document.body) : null]
294
292
  });
295
293
  }
296
294
  //#endregion
297
295
  //#region src/components/FloatingButton/FloatingButton.tsx
298
- var w = e(function({ label: e, position: t = "bottom-right", type: n = "button", className: r, ...i }, a) {
299
- return /* @__PURE__ */ s("button", {
296
+ var F = l(function({ label: e, position: t = "bottom-right", type: n = "button", className: r, ...i }, a) {
297
+ return /* @__PURE__ */ b("button", {
300
298
  ...i,
301
299
  ref: a,
302
300
  type: n,
303
301
  "aria-label": e,
304
302
  title: e,
305
- className: u("hds-glass", "hds-fab", `hds-fab--${t}`, r)
303
+ className: C("hds-glass", "hds-fab", `hds-fab--${t}`, r)
306
304
  });
307
- }), T = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
308
- function E({ open: e, onClose: r, title: a, description: o, children: f, footer: p, closeLabel: m = "Fechar", initialFocus: _ = "first", className: v }) {
309
- let y = i(null), b = n(), x = n(), S = i(r);
310
- return t(() => {
311
- S.current = r;
312
- }, [r]), t(() => {
305
+ }), I = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
306
+ function re({ open: e, onClose: t, title: n, description: r, children: i, footer: a, closeLabel: o = "Fechar", initialFocus: s = "first", size: c = "md", className: l }) {
307
+ let u = g(null), d = p(), m = p(), h = g(t);
308
+ return f(() => {
309
+ h.current = t;
310
+ }, [t]), f(() => {
313
311
  if (!e) return;
314
312
  let t = document.activeElement, n = document.body.style.overflow;
315
313
  document.body.style.overflow = "hidden";
316
- let r = y.current?.querySelectorAll(T) ?? [];
317
- (_ === "panel" || r.length === 0 ? y.current : r[0])?.focus();
314
+ let r = u.current?.querySelectorAll(I) ?? [];
315
+ (s === "panel" || r.length === 0 ? u.current : r[0])?.focus();
318
316
  function i(e) {
319
317
  if (e.key === "Escape") {
320
- e.preventDefault(), S.current();
318
+ e.preventDefault(), h.current();
321
319
  return;
322
320
  }
323
- if (e.key !== "Tab" || !y.current) return;
324
- let t = Array.from(y.current.querySelectorAll(T));
321
+ if (e.key !== "Tab" || !u.current) return;
322
+ let t = Array.from(u.current.querySelectorAll(I));
325
323
  if (t.length === 0) return;
326
324
  let n = t[0], r = t[t.length - 1];
327
325
  e.shiftKey && document.activeElement === n ? (e.preventDefault(), r.focus()) : !e.shiftKey && document.activeElement === r && (e.preventDefault(), n.focus());
@@ -329,113 +327,181 @@ function E({ open: e, onClose: r, title: a, description: o, children: f, footer:
329
327
  return document.addEventListener("keydown", i), () => {
330
328
  document.removeEventListener("keydown", i), document.body.style.overflow = n, t?.focus();
331
329
  };
332
- }, [e, _]), e ? l(/* @__PURE__ */ s("div", {
330
+ }, [e, s]), e ? S(/* @__PURE__ */ b("div", {
333
331
  className: "hds-scrim",
334
332
  onMouseDown: (e) => {
335
- e.target === e.currentTarget && r();
333
+ e.target === e.currentTarget && t();
336
334
  },
337
- children: /* @__PURE__ */ c(d, {
338
- ref: y,
335
+ children: /* @__PURE__ */ x(w, {
336
+ ref: u,
339
337
  tone: "thick",
340
338
  role: "dialog",
341
339
  "aria-modal": "true",
342
- "aria-labelledby": b,
343
- "aria-describedby": o ? x : void 0,
340
+ "aria-labelledby": d,
341
+ "aria-describedby": r ? m : void 0,
344
342
  tabIndex: -1,
345
- className: u("hds-dialog", v),
343
+ className: C("hds-dialog", c !== "md" && `hds-dialog--${c}`, l),
346
344
  children: [
347
- /* @__PURE__ */ c("div", {
345
+ /* @__PURE__ */ x("div", {
348
346
  className: "hds-dialog-header",
349
- children: [/* @__PURE__ */ c("div", { children: [/* @__PURE__ */ s("h2", {
350
- id: b,
347
+ children: [/* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("h2", {
348
+ id: d,
351
349
  className: "hds-dialog-title",
352
- children: a
353
- }), o ? /* @__PURE__ */ s("p", {
354
- id: x,
350
+ children: n
351
+ }), r ? /* @__PURE__ */ b("p", {
352
+ id: m,
355
353
  className: "hds-dialog-description",
356
- children: o
357
- }) : null] }), /* @__PURE__ */ s(g, {
354
+ children: r
355
+ }) : null] }), /* @__PURE__ */ b(O, {
358
356
  variant: "ghost",
359
357
  size: "sm",
360
358
  iconOnly: !0,
361
- icon: /* @__PURE__ */ s(h, { name: "x" }),
362
- "aria-label": m,
363
- onClick: r
359
+ icon: /* @__PURE__ */ b(D, { name: "x" }),
360
+ "aria-label": o,
361
+ onClick: t
364
362
  })]
365
363
  }),
366
- f,
367
- p ? /* @__PURE__ */ s("div", {
364
+ i,
365
+ a ? /* @__PURE__ */ b("div", {
368
366
  className: "hds-dialog-footer",
369
- children: p
367
+ children: a
370
368
  }) : null
371
369
  ]
372
370
  })
373
371
  }), document.body) : null;
374
372
  }
375
373
  //#endregion
376
- //#region src/components/Toast/Toast.tsx
377
- var D = {
374
+ //#region src/components/Toast/ToastView.tsx
375
+ var ie = {
378
376
  neutral: "info",
379
377
  success: "circle-check",
380
378
  warning: "triangle-alert",
381
379
  danger: "circle-x"
382
380
  };
383
- function O({ open: e, onClose: n, tone: r = "neutral", title: o, description: f, duration: p = 5e3, closeLabel: m = "Fechar aviso", className: _ }) {
384
- let [v, y] = a(!1), b = i(n);
385
- return t(() => {
386
- b.current = n;
387
- }, [n]), t(() => {
388
- if (!e || !p || v) return;
389
- let t = window.setTimeout(() => b.current?.(), p);
390
- return () => window.clearTimeout(t);
391
- }, [
392
- e,
393
- p,
394
- v
395
- ]), e ? l(/* @__PURE__ */ s("div", {
381
+ function L({ tone: e, title: t, description: n, duration: r, onClose: i, closeLabel: a, className: o }) {
382
+ let [s, c] = _(!1), l = g(i);
383
+ return f(() => {
384
+ l.current = i;
385
+ }, [i]), f(() => {
386
+ if (!r || s) return;
387
+ let e = window.setTimeout(() => l.current?.(), r);
388
+ return () => window.clearTimeout(e);
389
+ }, [r, s]), /* @__PURE__ */ x(w, {
390
+ role: e === "danger" ? "alert" : "status",
391
+ className: C("hds-toast", `hds-toast--${e}`, o),
392
+ onMouseEnter: () => c(!0),
393
+ onMouseLeave: () => c(!1),
394
+ onFocus: () => c(!0),
395
+ onBlur: () => c(!1),
396
+ children: [
397
+ /* @__PURE__ */ b(D, { name: ie[e] }),
398
+ /* @__PURE__ */ x("div", {
399
+ className: "hds-toast-body",
400
+ children: [/* @__PURE__ */ b("p", {
401
+ className: "hds-toast-title",
402
+ children: t
403
+ }), n ? /* @__PURE__ */ b("p", {
404
+ className: "hds-toast-description",
405
+ children: n
406
+ }) : null]
407
+ }),
408
+ i ? /* @__PURE__ */ b(O, {
409
+ variant: "ghost",
410
+ size: "sm",
411
+ iconOnly: !0,
412
+ icon: /* @__PURE__ */ b(D, { name: "x" }),
413
+ "aria-label": a,
414
+ onClick: i
415
+ }) : null
416
+ ]
417
+ });
418
+ }
419
+ //#endregion
420
+ //#region src/components/Toast/Toast.tsx
421
+ function R({ open: e, onClose: t, tone: n = "neutral", title: r, description: i, duration: a = 5e3, closeLabel: o = "Fechar aviso", className: s }) {
422
+ return e ? S(/* @__PURE__ */ b("div", {
396
423
  className: "hds-toast-region",
397
- children: /* @__PURE__ */ c(d, {
398
- role: r === "danger" ? "alert" : "status",
399
- className: u("hds-toast", `hds-toast--${r}`, _),
400
- onMouseEnter: () => y(!0),
401
- onMouseLeave: () => y(!1),
402
- onFocus: () => y(!0),
403
- onBlur: () => y(!1),
404
- children: [
405
- /* @__PURE__ */ s(h, { name: D[r] }),
406
- /* @__PURE__ */ c("div", {
407
- className: "hds-toast-body",
408
- children: [/* @__PURE__ */ s("p", {
409
- className: "hds-toast-title",
410
- children: o
411
- }), f ? /* @__PURE__ */ s("p", {
412
- className: "hds-toast-description",
413
- children: f
414
- }) : null]
415
- }),
416
- n ? /* @__PURE__ */ s(g, {
417
- variant: "ghost",
418
- size: "sm",
419
- iconOnly: !0,
420
- icon: /* @__PURE__ */ s(h, { name: "x" }),
421
- "aria-label": m,
422
- onClick: n
423
- }) : null
424
- ]
424
+ children: /* @__PURE__ */ b(L, {
425
+ tone: n,
426
+ title: r,
427
+ description: i,
428
+ duration: a,
429
+ onClose: t,
430
+ closeLabel: o,
431
+ className: s
425
432
  })
426
433
  }), document.body) : null;
427
434
  }
428
435
  //#endregion
436
+ //#region src/components/Toast/ToastProvider.tsx
437
+ var z = c(null);
438
+ function B({ children: e, max: t = 3, closeLabel: n = "Fechar aviso" }) {
439
+ let [r, i] = _([]), a = g(0), o = u((e) => {
440
+ i((t) => t.filter((t) => t.id !== e));
441
+ }, []), s = u(({ title: e, description: n, tone: r = "neutral", duration: o = 5e3 }) => {
442
+ let s = `hds-toast-${++a.current}`;
443
+ return i((i) => [...i, {
444
+ id: s,
445
+ title: e,
446
+ description: n,
447
+ tone: r,
448
+ duration: o
449
+ }].slice(-t)), s;
450
+ }, [t]), c = h(() => ({
451
+ show: s,
452
+ dismiss: o,
453
+ success: (e, t) => s({
454
+ title: e,
455
+ description: t,
456
+ tone: "success"
457
+ }),
458
+ error: (e, t) => s({
459
+ title: e,
460
+ description: t,
461
+ tone: "danger"
462
+ }),
463
+ warning: (e, t) => s({
464
+ title: e,
465
+ description: t,
466
+ tone: "warning"
467
+ }),
468
+ info: (e, t) => s({
469
+ title: e,
470
+ description: t,
471
+ tone: "neutral"
472
+ })
473
+ }), [s, o]);
474
+ return /* @__PURE__ */ x(z.Provider, {
475
+ value: c,
476
+ children: [e, r.length ? S(/* @__PURE__ */ b("div", {
477
+ className: "hds-toast-region",
478
+ children: r.map((e) => /* @__PURE__ */ b(L, {
479
+ tone: e.tone,
480
+ title: e.title,
481
+ description: e.description,
482
+ duration: e.duration,
483
+ closeLabel: n,
484
+ onClose: () => o(e.id)
485
+ }, e.id))
486
+ }), document.body) : null]
487
+ });
488
+ }
489
+ function V() {
490
+ let e = d(z);
491
+ if (!e) throw Error("useToast must be used inside a ToastProvider.");
492
+ return e;
493
+ }
494
+ //#endregion
429
495
  //#region src/internal/field.tsx
430
- function k(e) {
431
- let t = n(), r = e ?? t;
496
+ function H(e) {
497
+ let t = p(), n = e ?? t;
432
498
  return {
433
- id: r,
434
- hint: `${r}-hint`,
435
- error: `${r}-error`
499
+ id: n,
500
+ hint: `${n}-hint`,
501
+ error: `${n}-error`
436
502
  };
437
503
  }
438
- function A(e, t) {
504
+ function U(e, t) {
439
505
  let n = [
440
506
  e.hint && t.hint,
441
507
  e.error && t.error,
@@ -443,111 +509,111 @@ function A(e, t) {
443
509
  ].filter(Boolean);
444
510
  return n.length ? n.join(" ") : void 0;
445
511
  }
446
- function j({ hint: e, error: t, ids: n }) {
447
- return /* @__PURE__ */ c(o, { children: [e ? /* @__PURE__ */ s("p", {
512
+ function W({ hint: e, error: t, ids: n }) {
513
+ return /* @__PURE__ */ x(y, { children: [e ? /* @__PURE__ */ b("p", {
448
514
  id: n.hint,
449
515
  className: "hds-hint",
450
516
  children: e
451
- }) : null, t ? /* @__PURE__ */ c("p", {
517
+ }) : null, t ? /* @__PURE__ */ x("p", {
452
518
  id: n.error,
453
519
  className: "hds-error",
454
- children: [/* @__PURE__ */ s(h, { name: "circle-x" }), t]
520
+ children: [/* @__PURE__ */ b(D, { name: "circle-x" }), t]
455
521
  }) : null] });
456
522
  }
457
523
  //#endregion
458
524
  //#region src/components/Input/Input.tsx
459
- var M = e(function({ label: e, hint: t, error: n, numeric: r = !1, id: i, className: a, ...o }, l) {
460
- let d = k(i);
461
- return /* @__PURE__ */ c("div", {
462
- className: u("hds-field", a),
525
+ var G = l(function({ label: e, hint: t, error: n, numeric: r = !1, id: i, className: a, ...o }, s) {
526
+ let c = H(i);
527
+ return /* @__PURE__ */ x("div", {
528
+ className: C("hds-field", a),
463
529
  children: [
464
- /* @__PURE__ */ s("label", {
530
+ /* @__PURE__ */ b("label", {
465
531
  className: "hds-label",
466
- htmlFor: d.id,
532
+ htmlFor: c.id,
467
533
  children: e
468
534
  }),
469
- /* @__PURE__ */ s("input", {
535
+ /* @__PURE__ */ b("input", {
470
536
  inputMode: r ? "decimal" : void 0,
471
537
  ...o,
472
- ref: l,
473
- id: d.id,
538
+ ref: s,
539
+ id: c.id,
474
540
  "aria-invalid": n ? !0 : void 0,
475
- "aria-describedby": A({
541
+ "aria-describedby": U({
476
542
  hint: t,
477
543
  error: n,
478
544
  "aria-describedby": o["aria-describedby"]
479
- }, d),
480
- className: u("hds-input", r && "hds-input--numeric")
545
+ }, c),
546
+ className: C("hds-input", r && "hds-input--numeric")
481
547
  }),
482
- /* @__PURE__ */ s(j, {
548
+ /* @__PURE__ */ b(W, {
483
549
  hint: t,
484
550
  error: n,
485
- ids: d
551
+ ids: c
486
552
  })
487
553
  ]
488
554
  });
489
- }), N = e(function({ label: e, options: t, placeholder: n, hint: r, error: i, id: a, className: o, ...l }, d) {
490
- let f = k(a);
491
- return /* @__PURE__ */ c("div", {
492
- className: u("hds-field", o),
555
+ }), K = l(function({ label: e, options: t, placeholder: n, hint: r, error: i, id: a, className: o, ...s }, c) {
556
+ let l = H(a);
557
+ return /* @__PURE__ */ x("div", {
558
+ className: C("hds-field", o),
493
559
  children: [
494
- /* @__PURE__ */ s("label", {
560
+ /* @__PURE__ */ b("label", {
495
561
  className: "hds-label",
496
- htmlFor: f.id,
562
+ htmlFor: l.id,
497
563
  children: e
498
564
  }),
499
- /* @__PURE__ */ c("div", {
565
+ /* @__PURE__ */ x("div", {
500
566
  className: "hds-select-wrap",
501
- children: [/* @__PURE__ */ c("select", {
502
- ...l,
503
- ref: d,
504
- id: f.id,
567
+ children: [/* @__PURE__ */ x("select", {
568
+ ...s,
569
+ ref: c,
570
+ id: l.id,
505
571
  "aria-invalid": i ? !0 : void 0,
506
- "aria-describedby": A({
572
+ "aria-describedby": U({
507
573
  hint: r,
508
574
  error: i,
509
- "aria-describedby": l["aria-describedby"]
510
- }, f),
575
+ "aria-describedby": s["aria-describedby"]
576
+ }, l),
511
577
  className: "hds-select",
512
- children: [n ? /* @__PURE__ */ s("option", {
578
+ children: [n ? /* @__PURE__ */ b("option", {
513
579
  value: "",
514
580
  disabled: !0,
515
581
  children: n
516
- }) : null, t.map((e) => /* @__PURE__ */ s("option", {
582
+ }) : null, t.map((e) => /* @__PURE__ */ b("option", {
517
583
  value: e.value,
518
584
  disabled: e.disabled,
519
585
  children: e.label
520
586
  }, e.value))]
521
- }), /* @__PURE__ */ s(h, { name: "chevron-down" })]
587
+ }), /* @__PURE__ */ b(D, { name: "chevron-down" })]
522
588
  }),
523
- /* @__PURE__ */ s(j, {
589
+ /* @__PURE__ */ b(W, {
524
590
  hint: r,
525
591
  error: i,
526
- ids: f
592
+ ids: l
527
593
  })
528
594
  ]
529
595
  });
530
- }), P = e(function({ label: e, hint: t, id: n, className: r, ...i }, a) {
531
- let o = k(n);
532
- return /* @__PURE__ */ c("label", {
533
- className: u("hds-checkbox", r),
596
+ }), q = l(function({ label: e, hint: t, id: n, className: r, ...i }, a) {
597
+ let o = H(n);
598
+ return /* @__PURE__ */ x("label", {
599
+ className: C("hds-checkbox", r),
534
600
  htmlFor: o.id,
535
- children: [/* @__PURE__ */ c("span", {
601
+ children: [/* @__PURE__ */ x("span", {
536
602
  className: "hds-checkbox-control",
537
- children: [/* @__PURE__ */ s("input", {
603
+ children: [/* @__PURE__ */ b("input", {
538
604
  ...i,
539
605
  ref: a,
540
606
  id: o.id,
541
607
  type: "checkbox",
542
608
  className: "hds-checkbox-input",
543
609
  "aria-describedby": t ? o.hint : i["aria-describedby"]
544
- }), /* @__PURE__ */ s("span", {
610
+ }), /* @__PURE__ */ b("span", {
545
611
  className: "hds-checkbox-box",
546
- children: /* @__PURE__ */ s(h, { name: "check" })
612
+ children: /* @__PURE__ */ b(D, { name: "check" })
547
613
  })]
548
- }), /* @__PURE__ */ c("span", {
614
+ }), /* @__PURE__ */ x("span", {
549
615
  className: "hds-checkbox-text",
550
- children: [e, t ? /* @__PURE__ */ s("span", {
616
+ children: [e, t ? /* @__PURE__ */ b("span", {
551
617
  id: o.hint,
552
618
  className: "hds-hint",
553
619
  children: t
@@ -557,34 +623,34 @@ var M = e(function({ label: e, hint: t, error: n, numeric: r = !1, id: i, classN
557
623
  });
558
624
  //#endregion
559
625
  //#region src/components/Card/Card.tsx
560
- function F({ as: e = "article", eyebrow: t, title: n, media: r, footer: i, interactive: a = !1, className: o, children: l, ...d }) {
561
- return /* @__PURE__ */ c(e, {
562
- ...d,
563
- className: u("hds-card", a && "hds-card--interactive", o),
626
+ function J({ as: e = "article", eyebrow: t, title: n, media: r, footer: i, interactive: a = !1, className: o, children: s, ...c }) {
627
+ return /* @__PURE__ */ x(e, {
628
+ ...c,
629
+ className: C("hds-card", a && "hds-card--interactive", o),
564
630
  children: [
565
- r ? /* @__PURE__ */ s("img", {
631
+ r ? /* @__PURE__ */ b("img", {
566
632
  className: "hds-card-media",
567
633
  src: r.src,
568
634
  alt: r.alt ?? ""
569
635
  }) : null,
570
- /* @__PURE__ */ c("div", {
636
+ /* @__PURE__ */ x("div", {
571
637
  className: "hds-card-body",
572
638
  children: [
573
- t ? /* @__PURE__ */ s("p", {
639
+ t ? /* @__PURE__ */ b("p", {
574
640
  className: "hds-card-eyebrow",
575
641
  children: t
576
642
  }) : null,
577
- n ? /* @__PURE__ */ s("h3", {
643
+ n ? /* @__PURE__ */ b("h3", {
578
644
  className: "hds-card-title",
579
645
  children: n
580
646
  }) : null,
581
- l ? /* @__PURE__ */ s("div", {
647
+ s ? /* @__PURE__ */ b("div", {
582
648
  className: "hds-card-text",
583
- children: l
649
+ children: s
584
650
  }) : null
585
651
  ]
586
652
  }),
587
- i ? /* @__PURE__ */ s("div", {
653
+ i ? /* @__PURE__ */ b("div", {
588
654
  className: "hds-card-footer",
589
655
  children: i
590
656
  }) : null
@@ -593,47 +659,47 @@ function F({ as: e = "article", eyebrow: t, title: n, media: r, footer: i, inter
593
659
  }
594
660
  //#endregion
595
661
  //#region src/components/Badge/Badge.tsx
596
- var I = {
662
+ var ae = {
597
663
  accent: "info",
598
664
  success: "circle-check",
599
665
  warning: "triangle-alert",
600
666
  danger: "circle-x"
601
667
  };
602
- function L({ tone: e = "neutral", icon: t, children: n, className: r }) {
603
- let i = I[e], a = t === !1 ? null : t ?? (i ? /* @__PURE__ */ s(h, { name: i }) : null);
604
- return /* @__PURE__ */ c("span", {
605
- className: u("hds-badge", `hds-badge--${e}`, r),
668
+ function oe({ tone: e = "neutral", icon: t, children: n, className: r }) {
669
+ let i = ae[e], a = t === !1 ? null : t ?? (i ? /* @__PURE__ */ b(D, { name: i }) : null);
670
+ return /* @__PURE__ */ x("span", {
671
+ className: C("hds-badge", `hds-badge--${e}`, r),
606
672
  children: [a, n]
607
673
  });
608
674
  }
609
675
  //#endregion
610
676
  //#region src/components/Table/Table.tsx
611
- function R(e) {
677
+ function Y(e) {
612
678
  return e.numeric ? "hds-cell--numeric" : e.align === "center" ? "hds-cell--center" : void 0;
613
679
  }
614
- function z({ columns: e, rows: t, rowKey: n = "id", caption: r, hideCaption: i = !1, empty: a = "Nada para mostrar.", maxHeight: o, className: l }) {
615
- return /* @__PURE__ */ s("div", {
616
- className: u("hds-table-wrap", "hds-scroll", l),
680
+ function se({ columns: e, rows: t, rowKey: n = "id", caption: r, hideCaption: i = !1, empty: a = "Nada para mostrar.", maxHeight: o, className: s }) {
681
+ return /* @__PURE__ */ b("div", {
682
+ className: C("hds-table-wrap", "hds-scroll", s),
617
683
  role: "region",
618
684
  "aria-label": r,
619
685
  tabIndex: 0,
620
686
  style: o === void 0 ? void 0 : { maxHeight: o },
621
- children: /* @__PURE__ */ c("table", {
687
+ children: /* @__PURE__ */ x("table", {
622
688
  className: "hds-table",
623
689
  children: [
624
- r ? /* @__PURE__ */ s("caption", {
690
+ r ? /* @__PURE__ */ b("caption", {
625
691
  className: i ? "hds-visually-hidden" : void 0,
626
692
  children: r
627
693
  }) : null,
628
- /* @__PURE__ */ s("thead", { children: /* @__PURE__ */ s("tr", { children: e.map((e) => /* @__PURE__ */ s("th", {
694
+ /* @__PURE__ */ b("thead", { children: /* @__PURE__ */ b("tr", { children: e.map((e) => /* @__PURE__ */ b("th", {
629
695
  scope: "col",
630
- className: R(e),
696
+ className: Y(e),
631
697
  children: e.header
632
698
  }, e.key)) }) }),
633
- /* @__PURE__ */ s("tbody", { children: t.length ? t.map((t, r) => /* @__PURE__ */ s("tr", { children: e.map((e) => /* @__PURE__ */ s("td", {
634
- className: R(e),
699
+ /* @__PURE__ */ b("tbody", { children: t.length ? t.map((t, r) => /* @__PURE__ */ b("tr", { children: e.map((e) => /* @__PURE__ */ b("td", {
700
+ className: Y(e),
635
701
  children: e.render ? e.render(t) : t[e.key]
636
- }, e.key)) }, String(t[n] ?? r))) : /* @__PURE__ */ s("tr", { children: /* @__PURE__ */ s("td", {
702
+ }, e.key)) }, String(t[n] ?? r))) : /* @__PURE__ */ b("tr", { children: /* @__PURE__ */ b("td", {
637
703
  colSpan: e.length || 1,
638
704
  className: "hds-table-empty",
639
705
  children: a
@@ -643,20 +709,70 @@ function z({ columns: e, rows: t, rowKey: n = "id", caption: r, hideCaption: i =
643
709
  });
644
710
  }
645
711
  //#endregion
712
+ //#region src/appearance/useAppearance.ts
713
+ var X = !1, Z = {
714
+ theme: "dark",
715
+ transparency: "full"
716
+ }, Q = Z;
717
+ function ce() {
718
+ let e = a();
719
+ return (e.theme !== Q.theme || e.transparency !== Q.transparency) && (Q = e), Q;
720
+ }
721
+ function $() {
722
+ f(() => {
723
+ X || (X = !0, document.documentElement.hasAttribute("data-theme") || r());
724
+ }, []);
725
+ let e = v(o, ce, () => Z);
726
+ return {
727
+ ...e,
728
+ setTheme: t,
729
+ setTransparency: i,
730
+ toggleTheme: () => t(e.theme === "dark" ? "light" : "dark"),
731
+ toggleTransparency: () => i(e.transparency === "full" ? "reduced" : "full")
732
+ };
733
+ }
734
+ //#endregion
735
+ //#region src/components/AppearanceToggles/AppearanceToggles.tsx
736
+ function le({ lightLabel: e = "Mudar para o tema claro", darkLabel: t = "Mudar para o tema escuro", variant: n = "ghost", ...r }) {
737
+ let { theme: i, toggleTheme: a } = $(), o = i === "dark" ? e : t;
738
+ return /* @__PURE__ */ b(O, {
739
+ ...r,
740
+ variant: n,
741
+ iconOnly: !0,
742
+ icon: /* @__PURE__ */ b(D, { name: i === "dark" ? "sun" : "moon" }),
743
+ "aria-label": o,
744
+ title: o,
745
+ onClick: a
746
+ });
747
+ }
748
+ function ue({ label: e = "Reduzir transparência", variant: t = "ghost", ...n }) {
749
+ let { transparency: r, toggleTransparency: i } = $();
750
+ return /* @__PURE__ */ b(O, {
751
+ ...n,
752
+ variant: t,
753
+ iconOnly: !0,
754
+ icon: /* @__PURE__ */ b(D, { name: "blend" }),
755
+ "aria-label": e,
756
+ "aria-pressed": r === "reduced",
757
+ title: e,
758
+ onClick: i
759
+ });
760
+ }
761
+ //#endregion
646
762
  //#region src/components/Container/Container.tsx
647
- function B({ as: e = "section", withSidebar: t = !1, className: n, ...r }) {
648
- return /* @__PURE__ */ s(e, {
763
+ function de({ as: e = "section", withSidebar: t = !1, className: n, ...r }) {
764
+ return /* @__PURE__ */ b(e, {
649
765
  ...r,
650
- className: u("hds-container", t && "hds-container--with-sidebar", n)
766
+ className: C("hds-container", t && "hds-container--with-sidebar", n)
651
767
  });
652
768
  }
653
769
  //#endregion
654
770
  //#region src/components/SectionTitle/SectionTitle.tsx
655
- function V({ children: e, index: t, as: n = "h2", id: r, className: i }) {
656
- return /* @__PURE__ */ c(n, {
771
+ function fe({ children: e, index: t, as: n = "h2", id: r, className: i }) {
772
+ return /* @__PURE__ */ x(n, {
657
773
  id: r,
658
- className: u("hds-section-title", i),
659
- children: [t === void 0 ? null : /* @__PURE__ */ s("span", {
774
+ className: C("hds-section-title", i),
775
+ children: [t === void 0 ? null : /* @__PURE__ */ b("span", {
660
776
  className: "hds-section-index",
661
777
  "aria-hidden": "true",
662
778
  children: String(t).padStart(2, "0")
@@ -665,22 +781,22 @@ function V({ children: e, index: t, as: n = "h2", id: r, className: i }) {
665
781
  }
666
782
  //#endregion
667
783
  //#region src/components/Separator/Separator.tsx
668
- function H({ orientation: e = "horizontal", decorative: t = !1, className: n }) {
669
- return /* @__PURE__ */ s("div", {
784
+ function pe({ orientation: e = "horizontal", decorative: t = !1, className: n }) {
785
+ return /* @__PURE__ */ b("div", {
670
786
  role: t ? "none" : "separator",
671
787
  "aria-orientation": t ? void 0 : e,
672
- className: u("hds-separator", `hds-separator--${e}`, n)
788
+ className: C("hds-separator", `hds-separator--${e}`, n)
673
789
  });
674
790
  }
675
791
  //#endregion
676
792
  //#region src/components/ScrollArea/ScrollArea.tsx
677
- function U({ label: e, maxHeight: t, className: n, style: r, ...i }) {
678
- return /* @__PURE__ */ s("div", {
793
+ function me({ label: e, maxHeight: t, className: n, style: r, ...i }) {
794
+ return /* @__PURE__ */ b("div", {
679
795
  ...i,
680
796
  role: "region",
681
797
  "aria-label": e,
682
798
  tabIndex: 0,
683
- className: u("hds-scroll", n),
799
+ className: C("hds-scroll", n),
684
800
  style: {
685
801
  maxHeight: t,
686
802
  ...r
@@ -689,11 +805,11 @@ function U({ label: e, maxHeight: t, className: n, style: r, ...i }) {
689
805
  }
690
806
  //#endregion
691
807
  //#region src/components/Loading/Loading.tsx
692
- function W({ size: e = "md", label: t = "Carregando…", showLabel: n = !1, className: r }) {
693
- return /* @__PURE__ */ c("span", {
808
+ function he({ size: e = "md", label: t = "Carregando…", showLabel: n = !1, className: r }) {
809
+ return /* @__PURE__ */ x("span", {
694
810
  role: "status",
695
- className: u("hds-loading", `hds-loading--${e}`, r),
696
- children: [/* @__PURE__ */ s(h, { name: "loader" }), /* @__PURE__ */ s("span", {
811
+ className: C("hds-loading", `hds-loading--${e}`, r),
812
+ children: [/* @__PURE__ */ b(D, { name: "loader" }), /* @__PURE__ */ b("span", {
697
813
  className: n ? void 0 : "hds-visually-hidden",
698
814
  children: t
699
815
  })]
@@ -701,17 +817,17 @@ function W({ size: e = "md", label: t = "Carregando…", showLabel: n = !1, clas
701
817
  }
702
818
  //#endregion
703
819
  //#region src/components/GlowAvatar/GlowAvatar.tsx
704
- function G({ src: e, alt: t, size: n = 96, className: r }) {
705
- return /* @__PURE__ */ c("span", {
706
- className: u("hds-avatar", r),
820
+ function ge({ src: e, alt: t, size: n = 96, className: r }) {
821
+ return /* @__PURE__ */ x("span", {
822
+ className: C("hds-avatar", r),
707
823
  style: {
708
824
  width: n,
709
825
  height: n
710
826
  },
711
- children: [/* @__PURE__ */ s("span", {
827
+ children: [/* @__PURE__ */ b("span", {
712
828
  className: "hds-avatar-glow",
713
829
  "aria-hidden": "true"
714
- }), /* @__PURE__ */ s("img", {
830
+ }), /* @__PURE__ */ b("img", {
715
831
  className: "hds-avatar-image",
716
832
  src: e,
717
833
  alt: t,
@@ -721,6 +837,6 @@ function G({ src: e, alt: t, size: n = 96, className: r }) {
721
837
  });
722
838
  }
723
839
  //#endregion
724
- export { L as Badge, g as Button, F as Card, P as Checkbox, B as Container, E as Dialog, w as FloatingButton, d as GlassPanel, G as GlowAvatar, M as Input, W as Loading, C as Menu, y as NavBar, U as ScrollArea, V as SectionTitle, S as SegmentedControl, N as Select, H as Separator, b as Sidebar, z as Table, O as Toast, p as enableGlassRefraction };
840
+ export { s as APPEARANCE_STORAGE_KEYS, oe as Badge, O as Button, J as Card, q as Checkbox, de as Container, re as Dialog, F as FloatingButton, w as GlassPanel, ge as GlowAvatar, G as Input, he as Loading, P as Menu, te as NavBar, me as ScrollArea, fe as SectionTitle, j as SegmentedControl, K as Select, pe as Separator, ne as Sidebar, se as Table, le as ThemeToggle, R as Toast, B as ToastProvider, ue as TransparencyToggle, r as applyStoredAppearance, e as enableGlassRefraction, a as getAppearance, n as readStoredAppearance, t as setTheme, i as setTransparency, o as subscribeToAppearance, $ as useAppearance, V as useToast };
725
841
 
726
842
  //# sourceMappingURL=index.js.map