@sensorario/sg-components 0.0.96 → 0.0.98

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 (6) hide show
  1. package/dist/components/Input/Input.d.ts +1 -1
  2. package/dist/components/PasswordInput/PasswordInput.d.ts +1 -1
  3. package/dist/index.d.ts +2 -0
  4. package/dist/index.es.js +223 -209
  5. package/dist/sg-components.css +1 -1
  6. package/package.json +1 -1
package/dist/components/Input/Input.d.ts CHANGED
@@ -4,5 +4,5 @@ type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
4
4
  label?: string;
5
5
  invalid?: boolean;
6
6
  };
7
- declare const Input: React.FC<InputProps>;
7
+ export declare const Input: React.FC<InputProps>;
8
8
  export default Input;
package/dist/components/PasswordInput/PasswordInput.d.ts CHANGED
@@ -3,5 +3,5 @@ import './PasswordInput.css';
3
3
  type PasswordInputProps = React.InputHTMLAttributes<HTMLInputElement> & {
4
4
  label?: string;
5
5
  };
6
- declare const PasswordInput: React.FC<PasswordInputProps>;
6
+ export declare const PasswordInput: React.FC<PasswordInputProps>;
7
7
  export default PasswordInput;
package/dist/index.d.ts CHANGED
@@ -10,6 +10,8 @@ export * from './components/Authenticator/Authenticator';
10
10
  export * from './components/LoginModal/LoginModal';
11
11
  export * from './components/SetPasswordModal/SetPasswordModal';
12
12
  export * from './components/Modal/Modal';
13
+ export * from './components/Input/Input';
14
+ export * from './components/PasswordInput/PasswordInput';
13
15
  export * from './components/ColorPicker/ColorPicker';
14
16
  export * from './components/FontPicker/FontPicker';
15
17
  export * from './components/Toggle/Toggle';
package/dist/index.es.js CHANGED
@@ -1,172 +1,172 @@
1
- import e, { forwardRef as t, useEffect as n, useImperativeHandle 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";
1
+ import e, { forwardRef as t, useEffect as n, useId as r, useImperativeHandle as i, useRef as a, useState as o } from "react";
2
+ import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
3
3
  //#region src/components/Icon/Icon.tsx
4
- var l = {
5
- menu: /* @__PURE__ */ c(o, { children: [
6
- /* @__PURE__ */ s("line", {
4
+ var u = {
5
+ menu: /* @__PURE__ */ l(s, { children: [
6
+ /* @__PURE__ */ c("line", {
7
7
  x1: "3",
8
8
  y1: "6",
9
9
  x2: "21",
10
10
  y2: "6"
11
11
  }),
12
- /* @__PURE__ */ s("line", {
12
+ /* @__PURE__ */ c("line", {
13
13
  x1: "3",
14
14
  y1: "12",
15
15
  x2: "21",
16
16
  y2: "12"
17
17
  }),
18
- /* @__PURE__ */ s("line", {
18
+ /* @__PURE__ */ c("line", {
19
19
  x1: "3",
20
20
  y1: "18",
21
21
  x2: "21",
22
22
  y2: "18"
23
23
  })
24
24
  ] }),
25
- layout: /* @__PURE__ */ c(o, { children: [
26
- /* @__PURE__ */ s("rect", {
25
+ layout: /* @__PURE__ */ l(s, { children: [
26
+ /* @__PURE__ */ c("rect", {
27
27
  x: "3",
28
28
  y: "3",
29
29
  width: "18",
30
30
  height: "18",
31
31
  rx: "2"
32
32
  }),
33
- /* @__PURE__ */ s("line", {
33
+ /* @__PURE__ */ c("line", {
34
34
  x1: "3",
35
35
  y1: "9",
36
36
  x2: "21",
37
37
  y2: "9"
38
38
  }),
39
- /* @__PURE__ */ s("line", {
39
+ /* @__PURE__ */ c("line", {
40
40
  x1: "9",
41
41
  y1: "9",
42
42
  x2: "9",
43
43
  y2: "21"
44
44
  })
45
45
  ] }),
46
- edit: /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("path", { d: "M4 20l1-4L16 5l3 3L8 19l-4 1z" }), /* @__PURE__ */ s("line", {
46
+ edit: /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c("path", { d: "M4 20l1-4L16 5l3 3L8 19l-4 1z" }), /* @__PURE__ */ c("line", {
47
47
  x1: "14",
48
48
  y1: "7",
49
49
  x2: "17",
50
50
  y2: "10"
51
51
  })] }),
52
- "help-circle": /* @__PURE__ */ c(o, { children: [
53
- /* @__PURE__ */ s("circle", {
52
+ "help-circle": /* @__PURE__ */ l(s, { children: [
53
+ /* @__PURE__ */ c("circle", {
54
54
  cx: "12",
55
55
  cy: "12",
56
56
  r: "9"
57
57
  }),
58
- /* @__PURE__ */ s("path", { d: "M9.5 9a2.5 2.5 0 0 1 5 0c0 2-2.5 2-2.5 4" }),
59
- /* @__PURE__ */ s("line", {
58
+ /* @__PURE__ */ c("path", { d: "M9.5 9a2.5 2.5 0 0 1 5 0c0 2-2.5 2-2.5 4" }),
59
+ /* @__PURE__ */ c("line", {
60
60
  x1: "12",
61
61
  y1: "17",
62
62
  x2: "12",
63
63
  y2: "17.01"
64
64
  })
65
65
  ] }),
66
- check: /* @__PURE__ */ s("polyline", { points: "4 12 9 17 20 6" }),
67
- x: /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("line", {
66
+ check: /* @__PURE__ */ c("polyline", { points: "4 12 9 17 20 6" }),
67
+ x: /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c("line", {
68
68
  x1: "6",
69
69
  y1: "6",
70
70
  x2: "18",
71
71
  y2: "18"
72
- }), /* @__PURE__ */ s("line", {
72
+ }), /* @__PURE__ */ c("line", {
73
73
  x1: "18",
74
74
  y1: "6",
75
75
  x2: "6",
76
76
  y2: "18"
77
77
  })] }),
78
- "file-plus": /* @__PURE__ */ c(o, { children: [
79
- /* @__PURE__ */ s("path", { d: "M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z" }),
80
- /* @__PURE__ */ s("polyline", { points: "14 3 14 8 19 8" }),
81
- /* @__PURE__ */ s("line", {
78
+ "file-plus": /* @__PURE__ */ l(s, { children: [
79
+ /* @__PURE__ */ c("path", { d: "M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z" }),
80
+ /* @__PURE__ */ c("polyline", { points: "14 3 14 8 19 8" }),
81
+ /* @__PURE__ */ c("line", {
82
82
  x1: "12",
83
83
  y1: "12",
84
84
  x2: "12",
85
85
  y2: "17"
86
86
  }),
87
- /* @__PURE__ */ s("line", {
87
+ /* @__PURE__ */ c("line", {
88
88
  x1: "9.5",
89
89
  y1: "14.5",
90
90
  x2: "14.5",
91
91
  y2: "14.5"
92
92
  })
93
93
  ] }),
94
- link: /* @__PURE__ */ c(o, { children: [
95
- /* @__PURE__ */ s("path", { d: "M9 15l6-6" }),
96
- /* @__PURE__ */ s("path", { d: "M8 13.5 5.5 16a3 3 0 0 0 4.24 4.24l2.5-2.5" }),
97
- /* @__PURE__ */ s("path", { d: "M16 10.5 18.5 8a3 3 0 0 0-4.24-4.24l-2.5 2.5" })
94
+ link: /* @__PURE__ */ l(s, { children: [
95
+ /* @__PURE__ */ c("path", { d: "M9 15l6-6" }),
96
+ /* @__PURE__ */ c("path", { d: "M8 13.5 5.5 16a3 3 0 0 0 4.24 4.24l2.5-2.5" }),
97
+ /* @__PURE__ */ c("path", { d: "M16 10.5 18.5 8a3 3 0 0 0-4.24-4.24l-2.5 2.5" })
98
98
  ] }),
99
- "share-2": /* @__PURE__ */ c(o, { children: [
100
- /* @__PURE__ */ s("circle", {
99
+ "share-2": /* @__PURE__ */ l(s, { children: [
100
+ /* @__PURE__ */ c("circle", {
101
101
  cx: "6",
102
102
  cy: "12",
103
103
  r: "2.4"
104
104
  }),
105
- /* @__PURE__ */ s("circle", {
105
+ /* @__PURE__ */ c("circle", {
106
106
  cx: "18",
107
107
  cy: "6",
108
108
  r: "2.4"
109
109
  }),
110
- /* @__PURE__ */ s("circle", {
110
+ /* @__PURE__ */ c("circle", {
111
111
  cx: "18",
112
112
  cy: "18",
113
113
  r: "2.4"
114
114
  }),
115
- /* @__PURE__ */ s("line", {
115
+ /* @__PURE__ */ c("line", {
116
116
  x1: "8.2",
117
117
  y1: "10.8",
118
118
  x2: "15.8",
119
119
  y2: "7.2"
120
120
  }),
121
- /* @__PURE__ */ s("line", {
121
+ /* @__PURE__ */ c("line", {
122
122
  x1: "8.2",
123
123
  y1: "13.2",
124
124
  x2: "15.8",
125
125
  y2: "16.8"
126
126
  })
127
127
  ] }),
128
- download: /* @__PURE__ */ c(o, { children: [
129
- /* @__PURE__ */ s("path", { d: "M12 3v12" }),
130
- /* @__PURE__ */ s("polyline", { points: "7 11 12 16 17 11" }),
131
- /* @__PURE__ */ s("path", { d: "M5 19h14" })
128
+ download: /* @__PURE__ */ l(s, { children: [
129
+ /* @__PURE__ */ c("path", { d: "M12 3v12" }),
130
+ /* @__PURE__ */ c("polyline", { points: "7 11 12 16 17 11" }),
131
+ /* @__PURE__ */ c("path", { d: "M5 19h14" })
132
132
  ] }),
133
- book: /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("path", { d: "M4 5.5A2.5 2.5 0 0 1 6.5 3H12v18H6.5A2.5 2.5 0 0 1 4 18.5z" }), /* @__PURE__ */ s("path", { d: "M20 5.5A2.5 2.5 0 0 0 17.5 3H12v18h5.5a2.5 2.5 0 0 0 2.5-2.5z" })] }),
134
- printer: /* @__PURE__ */ c(o, { children: [
135
- /* @__PURE__ */ s("path", { d: "M6 9V3h12v6" }),
136
- /* @__PURE__ */ s("rect", {
133
+ book: /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c("path", { d: "M4 5.5A2.5 2.5 0 0 1 6.5 3H12v18H6.5A2.5 2.5 0 0 1 4 18.5z" }), /* @__PURE__ */ c("path", { d: "M20 5.5A2.5 2.5 0 0 0 17.5 3H12v18h5.5a2.5 2.5 0 0 0 2.5-2.5z" })] }),
134
+ printer: /* @__PURE__ */ l(s, { children: [
135
+ /* @__PURE__ */ c("path", { d: "M6 9V3h12v6" }),
136
+ /* @__PURE__ */ c("rect", {
137
137
  x: "4",
138
138
  y: "9",
139
139
  width: "16",
140
140
  height: "8",
141
141
  rx: "1.5"
142
142
  }),
143
- /* @__PURE__ */ s("path", { d: "M6 17v4h12v-4" })
143
+ /* @__PURE__ */ c("path", { d: "M6 17v4h12v-4" })
144
144
  ] }),
145
- eye: /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("path", { d: "M2 12c2.5-5 7-8 10-8s7.5 3 10 8c-2.5 5-7 8-10 8s-7.5-3-10-8z" }), /* @__PURE__ */ s("circle", {
145
+ eye: /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c("path", { d: "M2 12c2.5-5 7-8 10-8s7.5 3 10 8c-2.5 5-7 8-10 8s-7.5-3-10-8z" }), /* @__PURE__ */ c("circle", {
146
146
  cx: "12",
147
147
  cy: "12",
148
148
  r: "3"
149
149
  })] }),
150
- columns: /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("rect", {
150
+ columns: /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c("rect", {
151
151
  x: "3",
152
152
  y: "4",
153
153
  width: "8",
154
154
  height: "16",
155
155
  rx: "1.5"
156
- }), /* @__PURE__ */ s("rect", {
156
+ }), /* @__PURE__ */ c("rect", {
157
157
  x: "13",
158
158
  y: "4",
159
159
  width: "8",
160
160
  height: "16",
161
161
  rx: "1.5"
162
162
  })] }),
163
- "sidebar-left": /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("rect", {
163
+ "sidebar-left": /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c("rect", {
164
164
  x: "3",
165
165
  y: "4",
166
166
  width: "18",
167
167
  height: "16",
168
168
  rx: "2"
169
- }), /* @__PURE__ */ s("rect", {
169
+ }), /* @__PURE__ */ c("rect", {
170
170
  x: "4",
171
171
  y: "5",
172
172
  width: "6",
@@ -175,13 +175,13 @@ var l = {
175
175
  fill: "currentColor",
176
176
  stroke: "none"
177
177
  })] }),
178
- "sidebar-right": /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("rect", {
178
+ "sidebar-right": /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c("rect", {
179
179
  x: "3",
180
180
  y: "4",
181
181
  width: "18",
182
182
  height: "16",
183
183
  rx: "2"
184
- }), /* @__PURE__ */ s("rect", {
184
+ }), /* @__PURE__ */ c("rect", {
185
185
  x: "14",
186
186
  y: "5",
187
187
  width: "6",
@@ -190,29 +190,29 @@ var l = {
190
190
  fill: "currentColor",
191
191
  stroke: "none"
192
192
  })] }),
193
- play: /* @__PURE__ */ s("polygon", { points: "5 3 19 12 5 21 5 3" }),
194
- pause: /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("rect", {
193
+ play: /* @__PURE__ */ c("polygon", { points: "5 3 19 12 5 21 5 3" }),
194
+ pause: /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c("rect", {
195
195
  x: "6",
196
196
  y: "4",
197
197
  width: "4",
198
198
  height: "16",
199
199
  rx: "1"
200
- }), /* @__PURE__ */ s("rect", {
200
+ }), /* @__PURE__ */ c("rect", {
201
201
  x: "14",
202
202
  y: "4",
203
203
  width: "4",
204
204
  height: "16",
205
205
  rx: "1"
206
206
  })] }),
207
- "volume-2": /* @__PURE__ */ c(o, { children: [
208
- /* @__PURE__ */ s("polygon", { points: "11 5 6 9 2 9 2 15 6 15 11 19 11 5" }),
209
- /* @__PURE__ */ s("path", { d: "M15.54 8.46a5 5 0 0 1 0 7.07" }),
210
- /* @__PURE__ */ s("path", { d: "M19.07 4.93a10 10 0 0 1 0 14.14" })
207
+ "volume-2": /* @__PURE__ */ l(s, { children: [
208
+ /* @__PURE__ */ c("polygon", { points: "11 5 6 9 2 9 2 15 6 15 11 19 11 5" }),
209
+ /* @__PURE__ */ c("path", { d: "M15.54 8.46a5 5 0 0 1 0 7.07" }),
210
+ /* @__PURE__ */ c("path", { d: "M19.07 4.93a10 10 0 0 1 0 14.14" })
211
211
  ] }),
212
- "tech-node": /* @__PURE__ */ s("polygon", { points: "12,3 19.8,7.5 19.8,16.5 12,21 4.2,16.5 4.2,7.5" }),
213
- "tech-go": /* @__PURE__ */ s("polygon", { points: "12,3 21,12 12,21 3,12" }),
214
- "tech-php": /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("path", { d: "M9 4c-1.5 0-2.5 1-2.5 2.5v3c0 1-.5 1.5-1.5 2.5 1 1 1.5 1.5 1.5 2.5v3c0 1.5 1 2.5 2.5 2.5" }), /* @__PURE__ */ s("path", { d: "M15 4c1.5 0 2.5 1 2.5 2.5v3c0 1 .5 1.5 1.5 2.5-1 1-1.5 1.5-1.5 2.5v3c0 1.5-1 2.5-2.5 2.5" })] })
215
- }, u = ({ name: e, size: t = 18, ...n }) => /* @__PURE__ */ s("svg", {
212
+ "tech-node": /* @__PURE__ */ c("polygon", { points: "12,3 19.8,7.5 19.8,16.5 12,21 4.2,16.5 4.2,7.5" }),
213
+ "tech-go": /* @__PURE__ */ c("polygon", { points: "12,3 21,12 12,21 3,12" }),
214
+ "tech-php": /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c("path", { d: "M9 4c-1.5 0-2.5 1-2.5 2.5v3c0 1-.5 1.5-1.5 2.5 1 1 1.5 1.5 1.5 2.5v3c0 1.5 1 2.5 2.5 2.5" }), /* @__PURE__ */ c("path", { d: "M15 4c1.5 0 2.5 1 2.5 2.5v3c0 1 .5 1.5 1.5 2.5-1 1-1.5 1.5-1.5 2.5v3c0 1.5-1 2.5-2.5 2.5" })] })
215
+ }, d = ({ name: e, size: t = 18, ...n }) => /* @__PURE__ */ c("svg", {
216
216
  className: "sg-icon",
217
217
  width: t,
218
218
  height: t,
@@ -224,8 +224,8 @@ var l = {
224
224
  strokeLinejoin: "round",
225
225
  "aria-hidden": "true",
226
226
  ...n,
227
- children: l[e]
228
- }), d = ({ label: e, icon: t, iconOnly: n, className: r, title: i, ...a }) => /* @__PURE__ */ c("button", {
227
+ children: u[e]
228
+ }), f = ({ label: e, icon: t, iconOnly: n, className: r, title: i, ...a }) => /* @__PURE__ */ l("button", {
229
229
  className: [
230
230
  "custom-button",
231
231
  t ? "custom-button-with-icon" : "",
@@ -233,41 +233,41 @@ var l = {
233
233
  ].filter(Boolean).join(" "),
234
234
  title: i ?? (n ? e : void 0),
235
235
  ...a,
236
- children: [t && /* @__PURE__ */ s(u, { name: t }), /* @__PURE__ */ s("span", {
236
+ children: [t && /* @__PURE__ */ c(d, { name: t }), /* @__PURE__ */ c("span", {
237
237
  className: n ? "custom-button-label-visually-hidden" : void 0,
238
238
  children: e
239
239
  })]
240
- }), f = ({ copyright: e = "© 2026 My Company", href: t = "#", links: n = [] }) => /* @__PURE__ */ c("footer", {
240
+ }), p = ({ copyright: e = "© 2026 My Company", href: t = "#", links: n = [] }) => /* @__PURE__ */ l("footer", {
241
241
  className: "footer",
242
- children: [/* @__PURE__ */ s("span", { children: /* @__PURE__ */ s("a", {
242
+ children: [/* @__PURE__ */ c("span", { children: /* @__PURE__ */ c("a", {
243
243
  href: t,
244
244
  children: e
245
- }) }), n.length > 0 && /* @__PURE__ */ s("nav", { children: n.map(({ label: e, href: t }) => /* @__PURE__ */ s("a", {
245
+ }) }), n.length > 0 && /* @__PURE__ */ c("nav", { children: n.map(({ label: e, href: t }) => /* @__PURE__ */ c("a", {
246
246
  href: t,
247
247
  style: { marginLeft: "16px" },
248
248
  children: e
249
249
  }, t)) })]
250
- }), p = "simonegentili.com-cookie-consent", m = 3600 * 24 * 365;
251
- function h() {
252
- return document.cookie.split("; ").some((e) => e.startsWith(`${p}=`));
253
- }
250
+ }), m = "simonegentili.com-cookie-consent", h = 3600 * 24 * 365;
254
251
  function g() {
255
- document.cookie = `${p}=accepted; path=/; domain=.simonegentili.com; max-age=${m}; secure; samesite=strict`;
252
+ return document.cookie.split("; ").some((e) => e.startsWith(`${m}=`));
253
+ }
254
+ function _() {
255
+ document.cookie = `${m}=accepted; path=/; domain=.simonegentili.com; max-age=${h}; secure; samesite=strict`;
256
256
  }
257
- var _ = ({ privacyPolicyHref: e = "https://simonegentili.com/privacy" }) => {
258
- let [t, r] = a(!1);
257
+ var v = ({ privacyPolicyHref: e = "https://simonegentili.com/privacy" }) => {
258
+ let [t, r] = o(!1);
259
259
  return n(() => {
260
- r(!h());
261
- }, []), t ? /* @__PURE__ */ c("div", {
260
+ r(!g());
261
+ }, []), t ? /* @__PURE__ */ l("div", {
262
262
  className: "cookie-consent",
263
263
  role: "region",
264
264
  "aria-label": "Informativa sui cookie",
265
- children: [/* @__PURE__ */ c("p", {
265
+ children: [/* @__PURE__ */ l("p", {
266
266
  className: "cookie-consent-text",
267
267
  children: [
268
268
  "Questo sito utilizza esclusivamente cookie tecnici necessari al funzionamento (es. autenticazione). Non sono presenti cookie di profilazione o di terze parti. Per saperne di più consulta la",
269
269
  " ",
270
- /* @__PURE__ */ s("a", {
270
+ /* @__PURE__ */ c("a", {
271
271
  href: e,
272
272
  target: "_blank",
273
273
  rel: "noopener noreferrer",
@@ -275,15 +275,15 @@ var _ = ({ privacyPolicyHref: e = "https://simonegentili.com/privacy" }) => {
275
275
  }),
276
276
  "."
277
277
  ]
278
- }), /* @__PURE__ */ s(d, {
278
+ }), /* @__PURE__ */ c(f, {
279
279
  label: "Accetta",
280
280
  onClick: () => {
281
- g(), r(!1);
281
+ _(), r(!1);
282
282
  },
283
283
  className: "cookie-consent-accept"
284
284
  })]
285
285
  }) : null;
286
- }, v = [
286
+ }, y = [
287
287
  {
288
288
  label: "guitar",
289
289
  href: "https://guitar.simonegentili.com"
@@ -304,54 +304,54 @@ var _ = ({ privacyPolicyHref: e = "https://simonegentili.com/privacy" }) => {
304
304
  label: "code2image",
305
305
  href: "https://code2image.simonegentili.com"
306
306
  }
307
- ], y = () => /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s(f, {
307
+ ], b = () => /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(p, {
308
308
  href: "https://simonegentili.com",
309
309
  copyright: "© 2026 simonegentili.com",
310
- links: v
311
- }), /* @__PURE__ */ s(_, {})] }), b = ({ onNavigate: e, title: t = "Simone Gentili - senior web developer, tech author and chess enthusiast", homePageKey: n = "home", children: r, className: i }) => /* @__PURE__ */ s("header", {
310
+ links: y
311
+ }), /* @__PURE__ */ c(v, {})] }), x = ({ onNavigate: e, title: t = "Simone Gentili - senior web developer, tech author and chess enthusiast", homePageKey: n = "home", children: r, className: i }) => /* @__PURE__ */ c("header", {
312
312
  className: i ? `header ${i}` : "header",
313
- children: /* @__PURE__ */ c("div", {
313
+ children: /* @__PURE__ */ l("div", {
314
314
  className: "header-container",
315
- children: [/* @__PURE__ */ s("div", {
315
+ children: [/* @__PURE__ */ c("div", {
316
316
  className: "logo",
317
317
  onClick: () => {
318
318
  e?.(n);
319
319
  },
320
- children: /* @__PURE__ */ s("h1", {
320
+ children: /* @__PURE__ */ c("h1", {
321
321
  className: "logo-text",
322
322
  children: t
323
323
  })
324
- }), r && /* @__PURE__ */ s("div", {
324
+ }), r && /* @__PURE__ */ c("div", {
325
325
  className: "header-actions",
326
326
  children: r
327
327
  })]
328
328
  })
329
- }), x = ({ onNavigate: e }) => /* @__PURE__ */ s(b, {
329
+ }), S = ({ onNavigate: e }) => /* @__PURE__ */ c(x, {
330
330
  onNavigate: e,
331
331
  title: "Simone Gentili - senior web developer, tech author and chess enthusiast",
332
332
  homePageKey: "home"
333
- }), S = ({ isLoggedIn: e, handleLogin: t, handleLogout: n }) => /* @__PURE__ */ s(o, { children: e ? /* @__PURE__ */ s("button", {
333
+ }), C = ({ isLoggedIn: e, handleLogin: t, handleLogout: n }) => /* @__PURE__ */ c(s, { children: e ? /* @__PURE__ */ c("button", {
334
334
  onClick: n,
335
335
  style: {
336
336
  fontSize: "0.9rem",
337
337
  padding: "0.4rem 1rem"
338
338
  },
339
339
  children: "logout"
340
- }) : /* @__PURE__ */ s("button", {
340
+ }) : /* @__PURE__ */ c("button", {
341
341
  onClick: t,
342
342
  style: {
343
343
  fontSize: "0.9rem",
344
344
  padding: "0.4rem 1rem"
345
345
  },
346
346
  children: "Login"
347
- }) }), C = 220, w = ({ open: t, onClose: r, title: i, icon: o, children: l, buttons: u, footer: f, closeLabel: p = "Close", className: m }) => {
348
- let [h, g] = a(!1), [_, v] = a({
347
+ }) }), w = 220, T = ({ open: t, onClose: r, title: i, icon: a, children: s, buttons: u, footer: d, closeLabel: p = "Close", className: m }) => {
348
+ let [h, g] = o(!1), [_, v] = o({
349
349
  x: 0,
350
350
  y: 0
351
- }), y = e.useRef(null), [b, x] = a(!1), S = (e) => {
351
+ }), y = e.useRef(null), [b, x] = o(!1), S = (e) => {
352
352
  h || (g(!0), setTimeout(() => {
353
353
  g(!1), e();
354
- }, C));
354
+ }, w));
355
355
  };
356
356
  n(() => {
357
357
  if (!t) return;
@@ -360,8 +360,8 @@ var _ = ({ privacyPolicyHref: e = "https://simonegentili.com/privacy" }) => {
360
360
  };
361
361
  return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
362
362
  }, [t, r]);
363
- let [w, T] = a(t);
364
- if (t !== w && (T(t), t && v({
363
+ let [C, T] = o(t);
364
+ if (t !== C && (T(t), t && v({
365
365
  x: 0,
366
366
  y: 0
367
367
  })), !t) return null;
@@ -384,10 +384,10 @@ var _ = ({ privacyPolicyHref: e = "https://simonegentili.com/privacy" }) => {
384
384
  function O() {
385
385
  y.current = null, x(!1);
386
386
  }
387
- return /* @__PURE__ */ s("div", {
387
+ return /* @__PURE__ */ c("div", {
388
388
  className: `modal-overlay${h ? " modal-overlay-closing" : ""}`,
389
389
  onClick: () => S(r),
390
- children: /* @__PURE__ */ c("div", {
390
+ children: /* @__PURE__ */ l("div", {
391
391
  className: `modal-content${m ? ` ${m}` : ""}${h ? " modal-content-closing" : ""}`,
392
392
  style: {
393
393
  "--drag-x": `${_.x}px`,
@@ -395,22 +395,22 @@ var _ = ({ privacyPolicyHref: e = "https://simonegentili.com/privacy" }) => {
395
395
  },
396
396
  onClick: (e) => e.stopPropagation(),
397
397
  children: [
398
- /* @__PURE__ */ c("div", {
398
+ /* @__PURE__ */ l("div", {
399
399
  className: `modal-header${b ? " modal-header-dragging" : ""}`,
400
400
  onPointerDown: E,
401
401
  onPointerMove: D,
402
402
  onPointerUp: O,
403
403
  onPointerCancel: O,
404
404
  children: [
405
- o && /* @__PURE__ */ s("span", {
405
+ a && /* @__PURE__ */ c("span", {
406
406
  className: "modal-icon",
407
- children: o
407
+ children: a
408
408
  }),
409
- i && /* @__PURE__ */ s("h2", {
409
+ i && /* @__PURE__ */ c("h2", {
410
410
  className: "modal-title",
411
411
  children: i
412
412
  }),
413
- /* @__PURE__ */ s("button", {
413
+ /* @__PURE__ */ c("button", {
414
414
  type: "button",
415
415
  className: "modal-close",
416
416
  "aria-label": p,
@@ -420,67 +420,81 @@ var _ = ({ privacyPolicyHref: e = "https://simonegentili.com/privacy" }) => {
420
420
  })
421
421
  ]
422
422
  }),
423
- /* @__PURE__ */ s("div", {
423
+ /* @__PURE__ */ c("div", {
424
424
  className: "modal-children",
425
- children: l
425
+ children: s
426
426
  }),
427
- u && /* @__PURE__ */ s("div", {
427
+ u && /* @__PURE__ */ c("div", {
428
428
  className: "modal-footer",
429
- children: u.map((e, t) => /* @__PURE__ */ s(d, {
429
+ children: u.map((e, t) => /* @__PURE__ */ c(f, {
430
430
  label: e.label,
431
431
  onClick: () => S(e.onClick),
432
432
  disabled: h
433
433
  }, t))
434
434
  }),
435
- f && /* @__PURE__ */ s("div", {
435
+ d && /* @__PURE__ */ c("div", {
436
436
  className: "modal-footer",
437
- children: f
437
+ children: d
438
438
  })
439
439
  ]
440
440
  })
441
441
  });
442
- }, T = ({ label: e, invalid: t, ...n }) => /* @__PURE__ */ c("div", {
443
- className: "input-wrapper",
444
- children: [e && /* @__PURE__ */ s("label", {
445
- className: "input-label",
446
- children: e
447
- }), /* @__PURE__ */ s("input", {
448
- className: `input-field${t ? " input-field--invalid" : ""}`,
449
- ...n
450
- })]
451
- }), E = ({ label: e, ...t }) => /* @__PURE__ */ c("div", {
452
- className: "input-wrapper",
453
- children: [e && /* @__PURE__ */ s("label", {
454
- className: "input-label",
455
- children: e
456
- }), /* @__PURE__ */ s("input", {
457
- type: "password",
458
- className: "input-field",
459
- ...t
460
- })]
461
- }), D = ({ open: e, onClose: t, onLogin: n }) => {
462
- let [r, i] = a(""), [o, l] = a("");
463
- return /* @__PURE__ */ s(w, {
442
+ }, E = ({ label: e, invalid: t, className: n, id: i, ...a }) => {
443
+ let o = r(), s = i ?? o;
444
+ return /* @__PURE__ */ l("div", {
445
+ className: "input-wrapper",
446
+ children: [e && /* @__PURE__ */ c("label", {
447
+ className: "input-label",
448
+ htmlFor: s,
449
+ children: e
450
+ }), /* @__PURE__ */ c("input", {
451
+ id: s,
452
+ className: [
453
+ "input-field",
454
+ t ? "input-field--invalid" : "",
455
+ n
456
+ ].filter(Boolean).join(" "),
457
+ ...a
458
+ })]
459
+ });
460
+ }, D = ({ label: e, className: t, id: n, ...i }) => {
461
+ let a = r(), o = n ?? a;
462
+ return /* @__PURE__ */ l("div", {
463
+ className: "input-wrapper",
464
+ children: [e && /* @__PURE__ */ c("label", {
465
+ className: "input-label",
466
+ htmlFor: o,
467
+ children: e
468
+ }), /* @__PURE__ */ c("input", {
469
+ id: o,
470
+ type: "password",
471
+ className: ["input-field", t].filter(Boolean).join(" "),
472
+ ...i
473
+ })]
474
+ });
475
+ }, O = ({ open: e, onClose: t, onLogin: n }) => {
476
+ let [r, i] = o(""), [a, s] = o("");
477
+ return /* @__PURE__ */ c(T, {
464
478
  open: e,
465
479
  onClose: t,
466
480
  title: "Login",
467
- children: /* @__PURE__ */ c("form", {
481
+ children: /* @__PURE__ */ l("form", {
468
482
  onSubmit: (e) => {
469
- e.preventDefault(), n(r, o);
483
+ e.preventDefault(), n(r, a);
470
484
  },
471
485
  children: [
472
- /* @__PURE__ */ s(T, {
486
+ /* @__PURE__ */ c(E, {
473
487
  label: "Username",
474
488
  value: r,
475
489
  onChange: (e) => i(e.target.value),
476
490
  autoFocus: !0
477
491
  }),
478
- /* @__PURE__ */ s(E, {
492
+ /* @__PURE__ */ c(D, {
479
493
  label: "Password",
480
- value: o,
481
- onChange: (e) => l(e.target.value)
494
+ value: a,
495
+ onChange: (e) => s(e.target.value)
482
496
  }),
483
- /* @__PURE__ */ s(d, {
497
+ /* @__PURE__ */ c(f, {
484
498
  label: "Login",
485
499
  type: "submit",
486
500
  style: { width: "100%" }
@@ -488,90 +502,90 @@ var _ = ({ privacyPolicyHref: e = "https://simonegentili.com/privacy" }) => {
488
502
  ]
489
503
  })
490
504
  });
491
- }, O = "simonegentili.com-access-token", k = (e) => document.cookie.split("; ").some((t) => t.startsWith(`${e}=`) && t.slice(e.length + 1).length > 0), A = (e) => {
505
+ }, k = "simonegentili.com-access-token", A = (e) => document.cookie.split("; ").some((t) => t.startsWith(`${e}=`) && t.slice(e.length + 1).length > 0), j = (e) => {
492
506
  let t = document.cookie.split("; ").find((t) => t.startsWith(`${e}=`));
493
507
  return t ? t.slice(e.length + 1) : null;
494
- }, j = (e, t) => {
508
+ }, M = (e, t) => {
495
509
  try {
496
510
  return JSON.parse(atob(e.split(".")[1].replace(/-/g, "+").replace(/_/g, "/")))[t] ?? null;
497
511
  } catch {
498
512
  return null;
499
513
  }
500
- }, M = t(({ title: e = "Quadrato", homePageKey: t = "home", onNavigate: i, cookieName: l = O, username: u = null, usernameJwtField: d = "sub", onLogin: f, onLogout: p, onUserAuthenticated: m }, h) => {
501
- let [g, _] = a(() => k(l)), [v, y] = a(!1);
502
- r(h, () => ({ openLoginModal: () => y(!0) }));
503
- let x = u ?? (g ? j(A(l) ?? "", d) : null);
514
+ }, N = t(({ title: e = "Quadrato", homePageKey: t = "home", onNavigate: r, cookieName: a = k, username: u = null, usernameJwtField: d = "sub", onLogin: f, onLogout: p, onUserAuthenticated: m }, h) => {
515
+ let [g, _] = o(() => A(a)), [v, y] = o(!1);
516
+ i(h, () => ({ openLoginModal: () => y(!0) }));
517
+ let b = u ?? (g ? M(j(a) ?? "", d) : null);
504
518
  return n(() => {
505
- m?.(g, g ? x : null);
506
- }, []), /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s(b, {
507
- onNavigate: i,
519
+ m?.(g, g ? b : null);
520
+ }, []), /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(x, {
521
+ onNavigate: r,
508
522
  title: e,
509
523
  homePageKey: t,
510
524
  className: "quadrato-header",
511
- children: /* @__PURE__ */ c("div", {
525
+ children: /* @__PURE__ */ l("div", {
512
526
  className: "quadrato-header-auth",
513
- children: [g && x && /* @__PURE__ */ s("span", {
527
+ children: [g && b && /* @__PURE__ */ c("span", {
514
528
  className: "quadrato-header-username",
515
- children: x
516
- }), /* @__PURE__ */ s(S, {
529
+ children: b
530
+ }), /* @__PURE__ */ c(C, {
517
531
  isLoggedIn: g,
518
532
  handleLogin: () => y(!0),
519
533
  handleLogout: () => {
520
534
  p?.();
521
- let e = k(l);
535
+ let e = A(a);
522
536
  _(e), m?.(e, null);
523
537
  }
524
538
  })]
525
539
  })
526
- }), /* @__PURE__ */ s(D, {
540
+ }), /* @__PURE__ */ c(O, {
527
541
  open: v,
528
542
  onClose: () => y(!1),
529
543
  onLogin: async (e, t) => {
530
544
  await f(e, t);
531
- let n = k(l);
545
+ let n = A(a);
532
546
  _(n), y(!1), m?.(n, n ? u ?? e : null);
533
547
  }
534
548
  })] });
535
549
  });
536
- M.displayName = "QuadratoHeader";
550
+ N.displayName = "QuadratoHeader";
537
551
  //#endregion
538
552
  //#region src/components/SetPasswordModal/SetPasswordModal.tsx
539
- var N = ({ open: e, onClose: t, onSubmit: n }) => {
540
- let [r, i] = a(""), [o, l] = a(""), [u, f] = a("");
541
- return /* @__PURE__ */ s(w, {
553
+ var P = ({ open: e, onClose: t, onSubmit: n }) => {
554
+ let [r, i] = o(""), [a, s] = o(""), [u, d] = o("");
555
+ return /* @__PURE__ */ c(T, {
542
556
  open: e,
543
557
  onClose: t,
544
558
  title: "Imposta una nuova password",
545
- children: /* @__PURE__ */ c("form", {
559
+ children: /* @__PURE__ */ l("form", {
546
560
  className: "set-password-modal-form",
547
561
  onSubmit: (e) => {
548
- if (e.preventDefault(), r === "" || o === "") {
549
- f("Inserisci ed conferma la nuova password.");
562
+ if (e.preventDefault(), r === "" || a === "") {
563
+ d("Inserisci ed conferma la nuova password.");
550
564
  return;
551
565
  }
552
- if (r !== o) {
553
- f("Le password non coincidono.");
566
+ if (r !== a) {
567
+ d("Le password non coincidono.");
554
568
  return;
555
569
  }
556
- f(""), n(r);
570
+ d(""), n(r);
557
571
  },
558
572
  children: [
559
- /* @__PURE__ */ s(E, {
573
+ /* @__PURE__ */ c(D, {
560
574
  label: "Nuova password",
561
575
  value: r,
562
576
  onChange: (e) => i(e.target.value),
563
577
  autoFocus: !0
564
578
  }),
565
- /* @__PURE__ */ s(E, {
579
+ /* @__PURE__ */ c(D, {
566
580
  label: "Conferma password",
567
- value: o,
568
- onChange: (e) => l(e.target.value)
581
+ value: a,
582
+ onChange: (e) => s(e.target.value)
569
583
  }),
570
- u && /* @__PURE__ */ s("p", {
584
+ u && /* @__PURE__ */ c("p", {
571
585
  className: "set-password-modal-error",
572
586
  children: u
573
587
  }),
574
- /* @__PURE__ */ s(d, {
588
+ /* @__PURE__ */ c(f, {
575
589
  label: "Salva password",
576
590
  type: "submit",
577
591
  style: { width: "100%" }
@@ -579,48 +593,48 @@ var N = ({ open: e, onClose: t, onSubmit: n }) => {
579
593
  ]
580
594
  })
581
595
  });
582
- }, P = ({ value: e, onChange: t, swatches: r }) => {
583
- let [o, l] = a(!1), u = i(null);
596
+ }, F = ({ value: e, onChange: t, swatches: r }) => {
597
+ let [i, s] = o(!1), u = a(null);
584
598
  return n(() => {
585
- if (!o) return;
599
+ if (!i) return;
586
600
  let e = (e) => {
587
- u.current && !u.current.contains(e.target) && l(!1);
601
+ u.current && !u.current.contains(e.target) && s(!1);
588
602
  }, t = (e) => {
589
- e.key === "Escape" && l(!1);
603
+ e.key === "Escape" && s(!1);
590
604
  };
591
605
  return document.addEventListener("mousedown", e), document.addEventListener("keydown", t), () => {
592
606
  document.removeEventListener("mousedown", e), document.removeEventListener("keydown", t);
593
607
  };
594
- }, [o]), /* @__PURE__ */ c("div", {
608
+ }, [i]), /* @__PURE__ */ l("div", {
595
609
  ref: u,
596
610
  className: "sg-color-picker",
597
- children: [/* @__PURE__ */ c("button", {
611
+ children: [/* @__PURE__ */ l("button", {
598
612
  type: "button",
599
613
  className: "sg-color-picker-toggle",
600
- onClick: () => l((e) => !e),
601
- children: [/* @__PURE__ */ s("span", {
614
+ onClick: () => s((e) => !e),
615
+ children: [/* @__PURE__ */ c("span", {
602
616
  className: "sg-color-picker-swatch",
603
617
  style: { background: e }
604
- }), /* @__PURE__ */ s("span", {
618
+ }), /* @__PURE__ */ c("span", {
605
619
  className: "sg-color-picker-toggle-label",
606
620
  children: e
607
621
  })]
608
- }), o && /* @__PURE__ */ c("div", {
622
+ }), i && /* @__PURE__ */ l("div", {
609
623
  className: "sg-color-picker-popover",
610
- children: [/* @__PURE__ */ s("div", {
624
+ children: [/* @__PURE__ */ c("div", {
611
625
  className: "sg-color-picker-grid",
612
- children: r.map((n) => /* @__PURE__ */ s("button", {
626
+ children: r.map((n) => /* @__PURE__ */ c("button", {
613
627
  type: "button",
614
628
  title: n,
615
629
  className: `sg-color-picker-swatch-button${n.toLowerCase() === e?.toLowerCase() ? " active" : ""}`,
616
630
  style: { background: n },
617
631
  onClick: () => {
618
- t(n), l(!1);
632
+ t(n), s(!1);
619
633
  }
620
634
  }, n))
621
- }), /* @__PURE__ */ c("label", {
635
+ }), /* @__PURE__ */ l("label", {
622
636
  className: "sg-color-picker-custom",
623
- children: ["Colore personalizzato", /* @__PURE__ */ s("input", {
637
+ children: ["Colore personalizzato", /* @__PURE__ */ c("input", {
624
638
  type: "color",
625
639
  value: e,
626
640
  onChange: (e) => t(e.target.value)
@@ -628,64 +642,64 @@ var N = ({ open: e, onClose: t, onSubmit: n }) => {
628
642
  })]
629
643
  })]
630
644
  });
631
- }, F = (e) => e.split(",")[0].replace(/'/g, ""), I = ({ value: e, onChange: t, options: r }) => {
632
- let [o, l] = a(!1), u = i(null);
645
+ }, I = (e) => e.split(",")[0].replace(/'/g, ""), L = ({ value: e, onChange: t, options: r }) => {
646
+ let [i, s] = o(!1), u = a(null);
633
647
  return n(() => {
634
- if (!o) return;
648
+ if (!i) return;
635
649
  let e = (e) => {
636
- u.current && !u.current.contains(e.target) && l(!1);
650
+ u.current && !u.current.contains(e.target) && s(!1);
637
651
  }, t = (e) => {
638
- e.key === "Escape" && l(!1);
652
+ e.key === "Escape" && s(!1);
639
653
  };
640
654
  return document.addEventListener("mousedown", e), document.addEventListener("keydown", t), () => {
641
655
  document.removeEventListener("mousedown", e), document.removeEventListener("keydown", t);
642
656
  };
643
- }, [o]), /* @__PURE__ */ c("div", {
657
+ }, [i]), /* @__PURE__ */ l("div", {
644
658
  ref: u,
645
659
  className: "sg-font-picker",
646
- children: [/* @__PURE__ */ c("button", {
660
+ children: [/* @__PURE__ */ l("button", {
647
661
  type: "button",
648
662
  className: "sg-font-picker-toggle",
649
- onClick: () => l((e) => !e),
663
+ onClick: () => s((e) => !e),
650
664
  style: { fontFamily: e },
651
- children: [/* @__PURE__ */ s("span", {
665
+ children: [/* @__PURE__ */ c("span", {
652
666
  className: "sg-font-picker-toggle-label",
653
- children: F(e)
654
- }), /* @__PURE__ */ s("span", {
667
+ children: I(e)
668
+ }), /* @__PURE__ */ c("span", {
655
669
  className: "sg-font-picker-toggle-caret",
656
- children: o ? "▲" : "▼"
670
+ children: i ? "▲" : "▼"
657
671
  })]
658
- }), o && /* @__PURE__ */ s("ul", {
672
+ }), i && /* @__PURE__ */ c("ul", {
659
673
  className: "sg-font-picker-list",
660
- children: r.map((n) => /* @__PURE__ */ s("li", { children: /* @__PURE__ */ s("button", {
674
+ children: r.map((n) => /* @__PURE__ */ c("li", { children: /* @__PURE__ */ c("button", {
661
675
  type: "button",
662
676
  className: `sg-font-picker-option${n === e ? " active" : ""}`,
663
677
  onClick: () => {
664
- t(n), l(!1);
678
+ t(n), s(!1);
665
679
  },
666
680
  style: { fontFamily: n },
667
- children: F(n)
681
+ children: I(n)
668
682
  }) }, n))
669
683
  })]
670
684
  });
671
- }, L = ({ checked: e, onChange: t, label: n }) => /* @__PURE__ */ c("label", {
685
+ }, R = ({ checked: e, onChange: t, label: n }) => /* @__PURE__ */ l("label", {
672
686
  className: "sg-toggle",
673
687
  children: [
674
- /* @__PURE__ */ s("input", {
688
+ /* @__PURE__ */ c("input", {
675
689
  type: "checkbox",
676
690
  checked: e,
677
691
  onChange: (e) => t(e.target.checked),
678
692
  className: "sg-toggle-input"
679
693
  }),
680
- /* @__PURE__ */ s("span", {
694
+ /* @__PURE__ */ c("span", {
681
695
  className: "sg-toggle-track",
682
- children: /* @__PURE__ */ s("span", { className: "sg-toggle-thumb" })
696
+ children: /* @__PURE__ */ c("span", { className: "sg-toggle-thumb" })
683
697
  }),
684
- /* @__PURE__ */ s("span", {
698
+ /* @__PURE__ */ c("span", {
685
699
  className: "sg-toggle-label",
686
700
  children: n
687
701
  })
688
702
  ]
689
703
  });
690
704
  //#endregion
691
- export { S as Authenticator, d as Button, P as ColorPicker, _ as CookieConsent, I as FontPicker, f as Footer, b as Header, u as Icon, w as Modal, M as QuadratoHeader, y as SGFooter, x as SGHeader, N as SetPasswordModal, L as Toggle };
705
+ export { C as Authenticator, f as Button, F as ColorPicker, v as CookieConsent, L as FontPicker, p as Footer, x as Header, d as Icon, E as Input, T as Modal, D as PasswordInput, N as QuadratoHeader, b as SGFooter, S as SGHeader, P as SetPasswordModal, R as Toggle };
package/dist/sg-components.css CHANGED
@@ -1,2 +1,2 @@
1
- .custom-button{border-radius:var(--button-radius);background:var(--button-bg);color:var(--button-color);cursor:pointer;font-size:var(--primary-font);font-weight:600;font-family:var(--font-family);box-shadow:var(--button-shadow);transition:background .15s var(--button-ease-standard), transform var(--button-ease-bounce) .2s;border:none;padding:8px 20px}.custom-button:hover:not(:disabled){background:var(--button-bg-hover);transform:translateY(-1px)}.custom-button:active:not(:disabled){transform:scale(.97)}.custom-button:disabled{opacity:.6;cursor:default}.custom-button-with-icon{align-items:center;gap:8px;display:inline-flex}.custom-button-label-visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.sg-icon{vertical-align:middle;flex-shrink:0;display:inline-block}.footer{background-color:var(--primary-bg);border-top:1px solid var(--primary-border);font-family:var(--font-family);color:#555;justify-content:space-between;align-items:center;width:100%;padding:16px 32px;font-size:14px;display:flex;position:fixed;bottom:0;left:0}.footer a{color:#1ea7fd;text-decoration:none}.footer a:hover{text-decoration:underline}.cookie-consent{background-color:var(--primary-bg);border-top:1px solid var(--primary-border);font-family:var(--font-family);color:#555;z-index:1000;box-sizing:border-box;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;width:100%;padding:16px 32px;font-size:14px;display:flex;position:fixed;bottom:0;left:0}.cookie-consent-text{flex:320px;margin:0}.cookie-consent a{color:#1ea7fd;text-decoration:none}.cookie-consent a:hover{text-decoration:underline}.cookie-consent-accept{flex:none}.logo-text{font-size:var(--font-size-h1);font-family:var(--font-family);margin:0;font-weight:400}.header{z-index:100;width:100%;font-size:var(--font-size);background-color:#fff;border-bottom:1px solid #e1e5e9;position:sticky;top:0;box-shadow:0 2px 4px #0000001a}.header-container{justify-content:flex-start;align-items:center;max-width:1200px;margin:0 auto;padding:16px;display:flex}.header-actions{align-items:center;gap:12px;margin-left:auto;display:flex}.logo{cursor:pointer;color:#333;font-size:24px;font-weight:700;transition:color .2s}.logo:hover{color:#007acc}.logo-full{display:inline}.logo-short{display:none}@media (width<=768px){.header-container{padding:12px 16px}.logo{font-size:var(--font-size)}.logo-full{display:none}.logo-short{display:inline}}@media (width<=480px){.header-container{padding:8px 12px}.logo{font-size:var(--font-size)}}.modal-overlay{background:var(--modal-overlay);z-index:1000;justify-content:center;align-items:center;width:100vw;height:100vh;animation:.25s ease-out sg-modal-overlay-fade-in;display:flex;position:fixed;top:0;left:0}.modal-overlay.modal-overlay-closing{animation:.22s ease-in forwards sg-modal-overlay-fade-out}.modal-content{--drag-x:0px;--drag-y:0px;background:var(--modal-bg);border-radius:var(--primary-radius);font-size:var(--primary-font);min-width:320px;max-width:calc(100vw - 40px);max-height:90vh;transform:translate(var(--drag-x), var(--drag-y));flex-direction:column;animation:.3s ease-out sg-modal-slide-in;display:flex;overflow:hidden;box-shadow:0 2px 16px #00000026}.modal-content.modal-content-closing{animation:.22s ease-in forwards sg-modal-slide-out}@keyframes sg-modal-overlay-fade-in{0%{opacity:0}to{opacity:1}}@keyframes sg-modal-overlay-fade-out{0%{opacity:1}to{opacity:0}}@keyframes sg-modal-slide-in{0%{transform:translate(var(--drag-x), calc(var(--drag-y) - 24px)) scale(.97);opacity:0}to{transform:translate(var(--drag-x), var(--drag-y)) scale(1);opacity:1}}@keyframes sg-modal-slide-out{0%{transform:translate(var(--drag-x), var(--drag-y)) scale(1);opacity:1}to{transform:translate(var(--drag-x), calc(var(--drag-y) - 24px)) scale(.97);opacity:0}}.modal-header{background:var(--primary-bg);border-top-left-radius:var(--primary-radius);border-top-right-radius:var(--primary-radius);cursor:grab;touch-action:none;flex:none;align-items:center;gap:8px;padding:16px;display:flex}.modal-header-dragging{cursor:grabbing;-webkit-user-select:none;user-select:none}.modal-icon{color:var(--modal-title-color);display:inline-flex}.modal-title{color:var(--modal-title-color);font-family:var(--font-family);font-size:var(--primary-font);flex:1;margin:0}.modal-close{cursor:pointer;color:var(--modal-title-color);background:0 0;border:none;padding:4px 8px;font-size:20px;line-height:1}.modal-close:disabled{cursor:default;opacity:.6}.modal-children{font-family:var(--font-family);padding:16px;overflow-y:auto}.modal-footer{border-top:1px solid var(--primary-border);flex-wrap:wrap;flex:none;justify-content:flex-end;gap:8px;padding:12px 16px;display:flex}.input-label{font-weight:500;font-family:var(--font-family);font-size:var(--primary-font);margin-bottom:4px;display:block}.input-field--invalid{background-color:#ffe5e5;border-color:#c00}.input-wrapper{margin-bottom:16px}.input-label{font-weight:500;font-size:var(--primary-font);margin-bottom:4px;display:block}.input-field{border-radius:var(--radius);width:calc(100% - 16px);font-size:var(--primary-font);border-style:solid;border-width:1px;padding:8px}.login-modal-form{font-family:var(--font-family);font-size:var(--primary-font);flex-direction:column;gap:16px;display:flex}.header.quadrato-header{z-index:999}.quadrato-header-auth{align-items:center;gap:12px;display:flex}.quadrato-header-username{font-size:var(--font-size);color:#333}form{font-family:var(--font-family)}.set-password-modal-form{font-family:var(--font-family);font-size:var(--primary-font);flex-direction:column;gap:16px;display:flex}.set-password-modal-error{color:#d32f2f;font-size:var(--primary-font);margin:0}.sg-color-picker{font-family:var(--font-family);position:relative}.sg-color-picker-toggle{border-radius:var(--input-radius);border:1px solid var(--input-border);background:var(--input-bg);width:100%;color:inherit;cursor:pointer;justify-content:space-between;align-items:center;gap:8px;padding:6px 8px;font-family:inherit;font-size:13px;display:flex}.sg-color-picker-toggle-label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.sg-color-picker-swatch{border:1px solid #00000026;border-radius:4px;flex:none;width:18px;height:18px}.sg-color-picker-popover{z-index:30;background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--input-radius);box-shadow:var(--shadow-1);width:170px;padding:10px;position:absolute;top:calc(100% + 4px);left:0}.sg-color-picker-grid{grid-template-columns:repeat(6,1fr);gap:6px;display:grid}.sg-color-picker-swatch-button{cursor:pointer;border:1px solid #00000026;border-radius:4px;width:20px;height:20px;padding:0}.sg-color-picker-swatch-button.active{border:2px solid var(--accent)}.sg-color-picker-custom{border-top:1px solid var(--input-border);color:var(--ink-muted);cursor:pointer;justify-content:space-between;align-items:center;gap:8px;margin-top:8px;padding-top:8px;font-size:11px;display:flex}.sg-color-picker-custom input[type=color]{cursor:pointer;border:none;width:26px;height:20px;padding:0}.sg-font-picker{font-family:var(--font-family);position:relative}.sg-font-picker-toggle{border-radius:var(--input-radius);border:1px solid var(--input-border);background:var(--input-bg);width:100%;color:inherit;cursor:pointer;justify-content:space-between;align-items:center;gap:8px;padding:6px 8px;font-size:13px;display:flex}.sg-font-picker-toggle-label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.sg-font-picker-toggle-caret{opacity:.5;flex:none;font-size:10px}.sg-font-picker-list{background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--input-radius);max-height:260px;box-shadow:var(--shadow-1);z-index:30;margin:0;padding:4px 0;list-style:none;position:absolute;top:calc(100% + 4px);left:0;right:0;overflow-y:auto}.sg-font-picker-option{text-align:left;width:100%;color:inherit;cursor:pointer;background:0 0;border:none;padding:8px 10px;font-size:15px;display:block}.sg-font-picker-option.active{background:var(--accent-soft)}:root{--unit:3px;--primary-bg:#f5f5f5;--primary-border:#ccc;--radius:calc(var(--unit) * 2);--primary-radius:var(--radius);--primary-font:var(--font-size);--primary-hover-bg:#e0e0e0;--modal-bg:#fff;--modal-overlay:#0000004d;--modal-title-color:#222;--input-bg:#fff;--input-border:#ccc;--input-radius:var(--radius);--input-font:1rem;--font-size:14px;--font-family:Arial, sans-serif;--font-size-h1:calc(var(--font-size) * 1.5);--button-bg:#6f9cf7;--button-bg-hover:#5480e6;--button-color:#fff;--button-radius:999px;--button-shadow:0 1px 2px #5480e61f, 0 1px 3px #5480e61a;--button-ease-standard:cubic-bezier(.4, 0, .2, 1);--button-ease-bounce:cubic-bezier(.34, 1.56, .64, 1);--accent:#3d5fc4;--accent-strong:#2e4aa0;--accent-soft:#e2e7f8;--ink-muted:#647089;--shadow-1:0 1px 2px #0f172a14, 0 1px 3px #0f172a0f;--shadow-2:0 4px 12px #0f172a1f}.theme-dark{--primary-bg:#222;--primary-border:#444;--primary-font:1rem;--font-family:"Inter", Arial, sans-serif;--primary-hover-bg:#333;--modal-bg:#222;--modal-title-color:#fff;--input-bg:#333;--input-border:#555;--input-font:1rem;--button-bg:#6f9cf7;--button-bg-hover:#86aefc;--button-color:#fff;--accent:#6f9cf7;--accent-strong:#86aefc;--accent-soft:#6f9cf72e;--ink-muted:#9aa3b5;--shadow-1:0 1px 2px #0000004d, 0 1px 3px #0000003d;--shadow-2:0 4px 12px #0006}.sg-toggle{cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family);align-items:center;gap:6px;display:flex}.sg-toggle-input{opacity:0;width:1px;height:1px;position:absolute}.sg-toggle-track{background:var(--input-border);border-radius:999px;flex:none;width:34px;height:20px;transition:background .15s cubic-bezier(.4,0,.2,1);position:relative}.sg-toggle-input:checked+.sg-toggle-track{background:var(--accent)}.sg-toggle-thumb{background:var(--input-bg);width:16px;height:16px;box-shadow:var(--shadow-1);border-radius:50%;transition:left .15s cubic-bezier(.4,0,.2,1);position:absolute;top:2px;left:2px}.sg-toggle-input:checked+.sg-toggle-track .sg-toggle-thumb{left:16px}.sg-toggle-input:focus-visible+.sg-toggle-track{outline:2px solid var(--accent-strong);outline-offset:2px}.sg-toggle-label{color:var(--ink-muted);white-space:nowrap;font-size:13px}
1
+ .custom-button{border-radius:var(--button-radius);background:var(--button-bg);color:var(--button-color);cursor:pointer;font-size:var(--primary-font);font-weight:600;font-family:var(--font-family);box-shadow:var(--button-shadow);transition:background .15s var(--button-ease-standard), transform var(--button-ease-bounce) .2s;border:none;padding:8px 20px}.custom-button:hover:not(:disabled){background:var(--button-bg-hover);transform:translateY(-1px)}.custom-button:active:not(:disabled){transform:scale(.97)}.custom-button:disabled{opacity:.6;cursor:default}.custom-button-with-icon{align-items:center;gap:8px;display:inline-flex}.custom-button-label-visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.sg-icon{vertical-align:middle;flex-shrink:0;display:inline-block}.footer{background-color:var(--primary-bg);border-top:1px solid var(--primary-border);font-family:var(--font-family);color:#555;justify-content:space-between;align-items:center;width:100%;padding:16px 32px;font-size:14px;display:flex;position:fixed;bottom:0;left:0}.footer a{color:#1ea7fd;text-decoration:none}.footer a:hover{text-decoration:underline}.cookie-consent{background-color:var(--primary-bg);border-top:1px solid var(--primary-border);font-family:var(--font-family);color:#555;z-index:1000;box-sizing:border-box;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;width:100%;padding:16px 32px;font-size:14px;display:flex;position:fixed;bottom:0;left:0}.cookie-consent-text{flex:320px;margin:0}.cookie-consent a{color:#1ea7fd;text-decoration:none}.cookie-consent a:hover{text-decoration:underline}.cookie-consent-accept{flex:none}.logo-text{font-size:var(--font-size-h1);font-family:var(--font-family);margin:0;font-weight:400}.header{z-index:100;width:100%;font-size:var(--font-size);background-color:#fff;border-bottom:1px solid #e1e5e9;position:sticky;top:0;box-shadow:0 2px 4px #0000001a}.header-container{justify-content:flex-start;align-items:center;max-width:1200px;margin:0 auto;padding:16px;display:flex}.header-actions{align-items:center;gap:12px;margin-left:auto;display:flex}.logo{cursor:pointer;color:#333;font-size:24px;font-weight:700;transition:color .2s}.logo:hover{color:#007acc}.logo-full{display:inline}.logo-short{display:none}@media (width<=768px){.header-container{padding:12px 16px}.logo{font-size:var(--font-size)}.logo-full{display:none}.logo-short{display:inline}}@media (width<=480px){.header-container{padding:8px 12px}.logo{font-size:var(--font-size)}}.modal-overlay{background:var(--modal-overlay);z-index:1000;justify-content:center;align-items:center;width:100vw;height:100vh;animation:.25s ease-out sg-modal-overlay-fade-in;display:flex;position:fixed;top:0;left:0}.modal-overlay.modal-overlay-closing{animation:.22s ease-in forwards sg-modal-overlay-fade-out}.modal-content{--drag-x:0px;--drag-y:0px;background:var(--modal-bg);border-radius:var(--primary-radius);font-size:var(--primary-font);min-width:320px;max-width:calc(100vw - 40px);max-height:90vh;transform:translate(var(--drag-x), var(--drag-y));flex-direction:column;animation:.3s ease-out sg-modal-slide-in;display:flex;overflow:hidden;box-shadow:0 2px 16px #00000026}.modal-content.modal-content-closing{animation:.22s ease-in forwards sg-modal-slide-out}@keyframes sg-modal-overlay-fade-in{0%{opacity:0}to{opacity:1}}@keyframes sg-modal-overlay-fade-out{0%{opacity:1}to{opacity:0}}@keyframes sg-modal-slide-in{0%{transform:translate(var(--drag-x), calc(var(--drag-y) - 24px)) scale(.97);opacity:0}to{transform:translate(var(--drag-x), var(--drag-y)) scale(1);opacity:1}}@keyframes sg-modal-slide-out{0%{transform:translate(var(--drag-x), var(--drag-y)) scale(1);opacity:1}to{transform:translate(var(--drag-x), calc(var(--drag-y) - 24px)) scale(.97);opacity:0}}.modal-header{background:var(--primary-bg);border-top-left-radius:var(--primary-radius);border-top-right-radius:var(--primary-radius);cursor:grab;touch-action:none;flex:none;align-items:center;gap:8px;padding:16px;display:flex}.modal-header-dragging{cursor:grabbing;-webkit-user-select:none;user-select:none}.modal-icon{color:var(--modal-title-color);display:inline-flex}.modal-title{color:var(--modal-title-color);font-family:var(--font-family);font-size:var(--primary-font);flex:1;margin:0}.modal-close{cursor:pointer;color:var(--modal-title-color);background:0 0;border:none;padding:4px 8px;font-size:20px;line-height:1}.modal-close:disabled{cursor:default;opacity:.6}.modal-children{font-family:var(--font-family);padding:16px;overflow-y:auto}.modal-footer{border-top:1px solid var(--primary-border);flex-wrap:wrap;flex:none;justify-content:flex-end;gap:8px;padding:12px 16px;display:flex}.input-label{font-weight:500;font-family:var(--font-family);font-size:var(--primary-font);margin-bottom:4px;display:block}.input-field--invalid{background-color:#ffe5e5;border-color:#c00}.input-wrapper{margin-bottom:16px}.input-label{font-weight:500;font-size:var(--primary-font);margin-bottom:4px;display:block}.input-field{box-sizing:border-box;border-radius:var(--radius);width:100%;font-size:var(--primary-font);border-style:solid;border-width:1px;padding:8px}.login-modal-form{font-family:var(--font-family);font-size:var(--primary-font);flex-direction:column;gap:16px;display:flex}.header.quadrato-header{z-index:999}.quadrato-header-auth{align-items:center;gap:12px;display:flex}.quadrato-header-username{font-size:var(--font-size);color:#333}form{font-family:var(--font-family)}.set-password-modal-form{font-family:var(--font-family);font-size:var(--primary-font);flex-direction:column;gap:16px;display:flex}.set-password-modal-error{color:#d32f2f;font-size:var(--primary-font);margin:0}.sg-color-picker{font-family:var(--font-family);position:relative}.sg-color-picker-toggle{border-radius:var(--input-radius);border:1px solid var(--input-border);background:var(--input-bg);width:100%;color:inherit;cursor:pointer;justify-content:space-between;align-items:center;gap:8px;padding:6px 8px;font-family:inherit;font-size:13px;display:flex}.sg-color-picker-toggle-label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.sg-color-picker-swatch{border:1px solid #00000026;border-radius:4px;flex:none;width:18px;height:18px}.sg-color-picker-popover{z-index:30;background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--input-radius);box-shadow:var(--shadow-1);width:170px;padding:10px;position:absolute;top:calc(100% + 4px);left:0}.sg-color-picker-grid{grid-template-columns:repeat(6,1fr);gap:6px;display:grid}.sg-color-picker-swatch-button{cursor:pointer;border:1px solid #00000026;border-radius:4px;width:20px;height:20px;padding:0}.sg-color-picker-swatch-button.active{border:2px solid var(--accent)}.sg-color-picker-custom{border-top:1px solid var(--input-border);color:var(--ink-muted);cursor:pointer;justify-content:space-between;align-items:center;gap:8px;margin-top:8px;padding-top:8px;font-size:11px;display:flex}.sg-color-picker-custom input[type=color]{cursor:pointer;border:none;width:26px;height:20px;padding:0}.sg-font-picker{font-family:var(--font-family);position:relative}.sg-font-picker-toggle{border-radius:var(--input-radius);border:1px solid var(--input-border);background:var(--input-bg);width:100%;color:inherit;cursor:pointer;justify-content:space-between;align-items:center;gap:8px;padding:6px 8px;font-size:13px;display:flex}.sg-font-picker-toggle-label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.sg-font-picker-toggle-caret{opacity:.5;flex:none;font-size:10px}.sg-font-picker-list{background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--input-radius);max-height:260px;box-shadow:var(--shadow-1);z-index:30;margin:0;padding:4px 0;list-style:none;position:absolute;top:calc(100% + 4px);left:0;right:0;overflow-y:auto}.sg-font-picker-option{text-align:left;width:100%;color:inherit;cursor:pointer;background:0 0;border:none;padding:8px 10px;font-size:15px;display:block}.sg-font-picker-option.active{background:var(--accent-soft)}:root{--unit:3px;--primary-bg:#f5f5f5;--primary-border:#ccc;--radius:calc(var(--unit) * 2);--primary-radius:var(--radius);--primary-font:var(--font-size);--primary-hover-bg:#e0e0e0;--modal-bg:#fff;--modal-overlay:#0000004d;--modal-title-color:#222;--input-bg:#fff;--input-border:#ccc;--input-radius:var(--radius);--input-font:1rem;--font-size:14px;--font-family:Arial, sans-serif;--font-size-h1:calc(var(--font-size) * 1.5);--button-bg:#6f9cf7;--button-bg-hover:#5480e6;--button-color:#fff;--button-radius:999px;--button-shadow:0 1px 2px #5480e61f, 0 1px 3px #5480e61a;--button-ease-standard:cubic-bezier(.4, 0, .2, 1);--button-ease-bounce:cubic-bezier(.34, 1.56, .64, 1);--accent:#3d5fc4;--accent-strong:#2e4aa0;--accent-soft:#e2e7f8;--ink-muted:#647089;--shadow-1:0 1px 2px #0f172a14, 0 1px 3px #0f172a0f;--shadow-2:0 4px 12px #0f172a1f}.theme-dark{--primary-bg:#222;--primary-border:#444;--primary-font:1rem;--font-family:"Inter", Arial, sans-serif;--primary-hover-bg:#333;--modal-bg:#222;--modal-title-color:#fff;--input-bg:#333;--input-border:#555;--input-font:1rem;--button-bg:#6f9cf7;--button-bg-hover:#86aefc;--button-color:#fff;--accent:#6f9cf7;--accent-strong:#86aefc;--accent-soft:#6f9cf72e;--ink-muted:#9aa3b5;--shadow-1:0 1px 2px #0000004d, 0 1px 3px #0000003d;--shadow-2:0 4px 12px #0006}.sg-toggle{cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family);align-items:center;gap:6px;display:flex}.sg-toggle-input{opacity:0;width:1px;height:1px;position:absolute}.sg-toggle-track{background:var(--input-border);border-radius:999px;flex:none;width:34px;height:20px;transition:background .15s cubic-bezier(.4,0,.2,1);position:relative}.sg-toggle-input:checked+.sg-toggle-track{background:var(--accent)}.sg-toggle-thumb{background:var(--input-bg);width:16px;height:16px;box-shadow:var(--shadow-1);border-radius:50%;transition:left .15s cubic-bezier(.4,0,.2,1);position:absolute;top:2px;left:2px}.sg-toggle-input:checked+.sg-toggle-track .sg-toggle-thumb{left:16px}.sg-toggle-input:focus-visible+.sg-toggle-track{outline:2px solid var(--accent-strong);outline-offset:2px}.sg-toggle-label{color:var(--ink-muted);white-space:nowrap;font-size:13px}
2
2
  /*$vite$:1*/
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sensorario/sg-components",
3
- "version": "0.0.96",
3
+ "version": "0.0.98",
4
4
  "type": "module",
5
5
  "private": false,
6
6
  "scripts": {