@cronocode/react-box 1.6.1 → 1.6.2

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 (12) hide show
  1. package/baseSvg.module.css.cjs +1 -1
  2. package/baseSvg.module.css.mjs +2 -2
  3. package/box.module.css.cjs +1 -1
  4. package/box.module.css.mjs +1 -1
  5. package/components/dox/doxStyles.d.ts +111 -114
  6. package/components/dox/doxStylesFormatters.d.ts +15 -0
  7. package/components/dox/stylesContext.d.ts +1 -0
  8. package/components/dox.cjs +7 -1
  9. package/components/dox.mjs +377 -316
  10. package/package.json +1 -1
  11. package/style.css +1 -1
  12. package/types.d.ts +0 -9
package/components/dox.mjs CHANGED
@@ -1,177 +1,207 @@
1
- import A, { useLayoutEffect as D, useMemo as E, forwardRef as F, useState as P } from "react";
2
- import { I as _, C as M } from "../utils/utils.mjs";
3
- import { useTheme as W } from "../theme.mjs";
4
- const G = ["H", "F", "A"], t = [
5
- 0,
6
- 1,
7
- 2,
8
- 3,
9
- 4,
10
- 5,
11
- 6,
12
- 7,
13
- 8,
14
- 9,
15
- 10,
16
- 11,
17
- 12,
18
- 13,
19
- 14,
20
- 15,
21
- 16,
22
- 17,
23
- 18,
24
- 19,
25
- 20,
26
- 22,
27
- 24,
28
- 26,
29
- 28,
30
- 30,
31
- 32,
32
- 34,
33
- 36,
34
- 38,
35
- 40,
36
- 42,
37
- 44,
38
- 46,
39
- 48,
40
- 50,
41
- 52,
42
- 54,
43
- 56,
44
- 58,
45
- 60,
46
- 64,
47
- 68,
48
- 72,
49
- 76,
50
- 80,
51
- 84,
52
- 88,
53
- 92,
54
- 96,
55
- 100
56
- ], q = [
57
- -1,
58
- -2,
59
- -3,
60
- -4,
61
- -5,
62
- -6,
63
- -7,
64
- -8,
65
- -9,
66
- -10,
67
- -11,
68
- -12,
69
- -13,
70
- -14,
71
- -15,
72
- -16,
73
- -17,
74
- -18,
75
- -19,
76
- -20,
77
- -22,
78
- -24,
79
- -26,
80
- -28,
81
- -30,
82
- -32,
83
- -34,
84
- -36,
85
- -38,
86
- -40,
87
- -44,
88
- -48,
89
- -52,
90
- -56,
91
- -60,
92
- -64,
93
- -68,
94
- -72,
95
- -76,
96
- -80,
97
- -84,
98
- -88,
99
- -92,
100
- -96,
101
- -100
102
- ], r = [...t, ...q], L = ["solid", "dashed", "dotted", "double", "groove", "ridge", "inset", "outset", "none", "hidden"], R = ["auto", "hidden", "scroll", "visible"], V = [
103
- "1/2",
104
- "1/3",
105
- "2/3",
106
- "1/4",
107
- "2/4",
108
- "3/4",
109
- "1/5",
110
- "2/5",
111
- "3/5",
112
- "4/5",
113
- "1/6",
114
- "2/6",
115
- "3/6",
116
- "4/6",
117
- "5/6",
118
- "1/12",
119
- "2/12",
120
- "3/12",
121
- "4/12",
122
- "5/12",
123
- "6/12",
124
- "7/12",
125
- "8/12",
126
- "9/12",
127
- "10/12",
128
- "11/12"
129
- ], y = ["fit", "fit-screen", "auto", "fit-content", "max-content", "min-content"];
1
+ import E, { useLayoutEffect as B, useMemo as T, forwardRef as O, useState as I } from "react";
2
+ import { I as A, C as F } from "../utils/utils.mjs";
3
+ import { useTheme as _ } from "../theme.mjs";
130
4
  var e;
131
- ((s) => {
132
- function a(f, m) {
133
- return `${m / 4}rem`;
134
- }
135
- s.rem = a;
136
- function d(f, m) {
137
- return `${m}px`;
138
- }
139
- s.px = d;
140
- function i(f, m) {
141
- const [b, c] = m.split("/");
142
- return `${+b / +c * 100}%`;
143
- }
144
- s.fraction = i;
145
- function n(f, m) {
146
- switch (m) {
147
- case "fit":
148
- return "100%";
149
- case "fit-screen":
150
- return f.toLocaleLowerCase().includes("height") ? "100vh" : "100vw";
151
- default:
152
- return m;
5
+ ((a) => {
6
+ ((u) => {
7
+ function c(n, m) {
8
+ return `${n}${m.replace("/", "-")}`;
153
9
  }
154
- }
155
- s.widthHeight = n;
156
- function p(f) {
157
- return (m, b) => `var(--${f}${b});`;
158
- }
159
- s.variables = p;
10
+ u.fraction = c;
11
+ })(a.ClassName || (a.ClassName = {})), ((u) => {
12
+ function c(o, i) {
13
+ return `${i / 4}rem`;
14
+ }
15
+ u.rem = c;
16
+ function n(o, i) {
17
+ return `${i}px`;
18
+ }
19
+ u.px = n;
20
+ function m(o, i) {
21
+ const [V, t] = i.split("/");
22
+ return `${+V / +t * 100}%`;
23
+ }
24
+ u.fraction = m;
25
+ function g(o, i) {
26
+ switch (i) {
27
+ case "fit":
28
+ return "100%";
29
+ case "fit-screen":
30
+ return o.toLocaleLowerCase().includes("height") ? "100vh" : "100vw";
31
+ default:
32
+ return i;
33
+ }
34
+ }
35
+ u.widthHeight = g;
36
+ function h(o) {
37
+ return (i, V) => `var(--${o}${V});`;
38
+ }
39
+ u.variables = h;
40
+ function N(o, i) {
41
+ return `repeat(${i},minmax(0,1fr))`;
42
+ }
43
+ u.gridColumns = N;
44
+ function z(o, i) {
45
+ return i === "full-row" ? "1/-1" : `span ${i}/span ${i}`;
46
+ }
47
+ u.gridColumn = z;
48
+ function d(o, i) {
49
+ return `${i}ms`;
50
+ }
51
+ u.ms = d;
52
+ })(a.Value || (a.Value = {}));
160
53
  })(e || (e = {}));
161
- var h;
162
- ((s) => {
163
- function a(d, i) {
164
- return `${d}${i.replace("/", "-")}`;
165
- }
166
- s.fraction = a;
167
- })(h || (h = {}));
168
- const j = {
169
- shadow: { cssNames: ["box-shadow"], formatValue: e.variables("shadow") },
170
- background: { cssNames: ["background"], formatValue: e.variables("background") },
171
- color: { cssNames: ["color"], formatValue: e.variables("color") },
172
- bgColor: { cssNames: ["background-color"], formatValue: e.variables("color") },
173
- borderColor: { cssNames: ["border-color"], formatValue: e.variables("color") },
174
- outlineColor: { cssNames: ["outline-color"], formatValue: e.variables("color") }
54
+ const D = ["H", "F", "A"];
55
+ var s;
56
+ ((a) => {
57
+ a.positiveSizes = [
58
+ 0,
59
+ 1,
60
+ 2,
61
+ 3,
62
+ 4,
63
+ 5,
64
+ 6,
65
+ 7,
66
+ 8,
67
+ 9,
68
+ 10,
69
+ 11,
70
+ 12,
71
+ 13,
72
+ 14,
73
+ 15,
74
+ 16,
75
+ 17,
76
+ 18,
77
+ 19,
78
+ 20,
79
+ 22,
80
+ 24,
81
+ 26,
82
+ 28,
83
+ 30,
84
+ 32,
85
+ 34,
86
+ 36,
87
+ 38,
88
+ 40,
89
+ 42,
90
+ 44,
91
+ 46,
92
+ 48,
93
+ 50,
94
+ 52,
95
+ 54,
96
+ 56,
97
+ 58,
98
+ 60,
99
+ 64,
100
+ 68,
101
+ 72,
102
+ 76,
103
+ 80,
104
+ 84,
105
+ 88,
106
+ 92,
107
+ 96,
108
+ 100
109
+ ], a.negativeSizes = [
110
+ -1,
111
+ -2,
112
+ -3,
113
+ -4,
114
+ -5,
115
+ -6,
116
+ -7,
117
+ -8,
118
+ -9,
119
+ -10,
120
+ -11,
121
+ -12,
122
+ -13,
123
+ -14,
124
+ -15,
125
+ -16,
126
+ -17,
127
+ -18,
128
+ -19,
129
+ -20,
130
+ -22,
131
+ -24,
132
+ -26,
133
+ -28,
134
+ -30,
135
+ -32,
136
+ -34,
137
+ -36,
138
+ -38,
139
+ -40,
140
+ -44,
141
+ -48,
142
+ -52,
143
+ -56,
144
+ -60,
145
+ -64,
146
+ -68,
147
+ -72,
148
+ -76,
149
+ -80,
150
+ -84,
151
+ -88,
152
+ -92,
153
+ -96,
154
+ -100
155
+ ], a.sizes = [...a.positiveSizes, ...a.negativeSizes], a.borderAndOutlineStyles = [
156
+ "solid",
157
+ "dashed",
158
+ "dotted",
159
+ "double",
160
+ "groove",
161
+ "ridge",
162
+ "inset",
163
+ "outset",
164
+ "none",
165
+ "hidden"
166
+ ], a.overflows = ["auto", "hidden", "scroll", "visible"], a.widthHeightFractions = [
167
+ "1/2",
168
+ "1/3",
169
+ "2/3",
170
+ "1/4",
171
+ "2/4",
172
+ "3/4",
173
+ "1/5",
174
+ "2/5",
175
+ "3/5",
176
+ "4/5",
177
+ "1/6",
178
+ "2/6",
179
+ "3/6",
180
+ "4/6",
181
+ "5/6",
182
+ "1/12",
183
+ "2/12",
184
+ "3/12",
185
+ "4/12",
186
+ "5/12",
187
+ "6/12",
188
+ "7/12",
189
+ "8/12",
190
+ "9/12",
191
+ "10/12",
192
+ "11/12"
193
+ ], a.widthHeightValues = ["fit", "fit-screen", "auto", "fit-content", "max-content", "min-content"], a.alignSelf = ["auto", "flex-start", "flex-end", "center", "baseline", "stretch"];
194
+ })(s || (s = {}));
195
+ const H = {
196
+ shadow: { cssNames: ["box-shadow"], formatValue: e.Value.variables("shadow") },
197
+ background: { cssNames: ["background"], formatValue: e.Value.variables("background") },
198
+ color: { cssNames: ["color"], formatValue: e.Value.variables("color") },
199
+ bgColor: { cssNames: ["background-color"], formatValue: e.Value.variables("color") },
200
+ borderColor: { cssNames: ["border-color"], formatValue: e.Value.variables("color") },
201
+ outlineColor: { cssNames: ["outline-color"], formatValue: e.Value.variables("color") }
202
+ }, S = {
203
+ hover: { className: "_h" },
204
+ focus: { className: "_f" }
175
205
  }, l = {
176
206
  display: {
177
207
  cssNames: ["display"],
@@ -187,39 +217,63 @@ const j = {
187
217
  },
188
218
  width: {
189
219
  cssNames: ["width"],
190
- values1: { values: y, formatValue: e.widthHeight },
191
- values2: { values: t, formatValue: e.rem },
192
- values3: { values: V, formatValue: e.fraction, formatClassName: h.fraction }
220
+ values1: { values: s.widthHeightValues, formatValue: e.Value.widthHeight },
221
+ values2: { values: s.positiveSizes, formatValue: e.Value.rem },
222
+ values3: {
223
+ values: s.widthHeightFractions,
224
+ formatValue: e.Value.fraction,
225
+ formatClassName: e.ClassName.fraction
226
+ }
193
227
  },
194
228
  minWidth: {
195
229
  cssNames: ["min-width"],
196
- values1: { values: y, formatValue: e.widthHeight },
197
- values2: { values: t, formatValue: e.rem },
198
- values3: { values: V, formatValue: e.fraction, formatClassName: h.fraction }
230
+ values1: { values: s.widthHeightValues, formatValue: e.Value.widthHeight },
231
+ values2: { values: s.positiveSizes, formatValue: e.Value.rem },
232
+ values3: {
233
+ values: s.widthHeightFractions,
234
+ formatValue: e.Value.fraction,
235
+ formatClassName: e.ClassName.fraction
236
+ }
199
237
  },
200
238
  maxWidth: {
201
239
  cssNames: ["max-width"],
202
- values1: { values: y, formatValue: e.widthHeight },
203
- values2: { values: t, formatValue: e.rem },
204
- values3: { values: V, formatValue: e.fraction, formatClassName: h.fraction }
240
+ values1: { values: s.widthHeightValues, formatValue: e.Value.widthHeight },
241
+ values2: { values: s.positiveSizes, formatValue: e.Value.rem },
242
+ values3: {
243
+ values: s.widthHeightFractions,
244
+ formatValue: e.Value.fraction,
245
+ formatClassName: e.ClassName.fraction
246
+ }
205
247
  },
206
248
  height: {
207
249
  cssNames: ["height"],
208
- values1: { values: y, formatValue: e.widthHeight },
209
- values2: { values: t, formatValue: e.rem },
210
- values3: { values: V, formatValue: e.fraction, formatClassName: h.fraction }
250
+ values1: { values: s.widthHeightValues, formatValue: e.Value.widthHeight },
251
+ values2: { values: s.positiveSizes, formatValue: e.Value.rem },
252
+ values3: {
253
+ values: s.widthHeightFractions,
254
+ formatValue: e.Value.fraction,
255
+ formatClassName: e.ClassName.fraction
256
+ }
211
257
  },
212
258
  minHeight: {
213
259
  cssNames: ["min-height"],
214
- values1: { values: y, formatValue: e.widthHeight },
215
- values2: { values: t, formatValue: e.rem },
216
- values3: { values: V, formatValue: e.fraction, formatClassName: h.fraction }
260
+ values1: { values: s.widthHeightValues, formatValue: e.Value.widthHeight },
261
+ values2: { values: s.positiveSizes, formatValue: e.Value.rem },
262
+ values3: {
263
+ values: s.widthHeightFractions,
264
+ formatValue: e.Value.fraction,
265
+ formatClassName: e.ClassName.fraction
266
+ }
217
267
  },
218
268
  maxHeight: {
219
269
  cssNames: ["max-height"],
220
- values1: { values: y, formatValue: e.widthHeight },
221
- values2: { values: t, formatValue: e.rem },
222
- values3: { values: V, formatValue: e.fraction, formatClassName: h.fraction }
270
+ values1: { values: s.widthHeightValues, formatValue: e.Value.widthHeight },
271
+ values2: { values: s.positiveSizes, formatValue: e.Value.rem },
272
+ values3: {
273
+ values: s.widthHeightFractions,
274
+ formatValue: e.Value.fraction,
275
+ formatClassName: e.ClassName.fraction
276
+ }
223
277
  },
224
278
  position: {
225
279
  cssNames: ["position"],
@@ -229,217 +283,217 @@ const j = {
229
283
  },
230
284
  top: {
231
285
  cssNames: ["top"],
232
- values1: { values: r, formatValue: e.rem },
286
+ values1: { values: s.sizes, formatValue: e.Value.rem },
233
287
  values2: { values: [] },
234
288
  values3: { values: [] }
235
289
  },
236
290
  right: {
237
291
  cssNames: ["right"],
238
- values1: { values: r, formatValue: e.rem },
292
+ values1: { values: s.sizes, formatValue: e.Value.rem },
239
293
  values2: { values: [] },
240
294
  values3: { values: [] }
241
295
  },
242
296
  bottom: {
243
297
  cssNames: ["bottom"],
244
- values1: { values: r, formatValue: e.rem },
298
+ values1: { values: s.sizes, formatValue: e.Value.rem },
245
299
  values2: { values: [] },
246
300
  values3: { values: [] }
247
301
  },
248
302
  left: {
249
303
  cssNames: ["left"],
250
- values1: { values: r, formatValue: e.rem },
304
+ values1: { values: s.sizes, formatValue: e.Value.rem },
251
305
  values2: { values: [] },
252
306
  values3: { values: [] }
253
307
  },
254
308
  inset: {
255
309
  cssNames: ["inset"],
256
- values1: { values: r, formatValue: e.rem },
310
+ values1: { values: s.sizes, formatValue: e.Value.rem },
257
311
  values2: { values: [] },
258
312
  values3: { values: [] }
259
313
  },
260
314
  margin: {
261
315
  cssNames: ["margin"],
262
- values1: { values: r, formatValue: e.rem },
316
+ values1: { values: s.sizes, formatValue: e.Value.rem },
263
317
  values2: { values: ["auto"] },
264
318
  values3: { values: [] }
265
319
  },
266
320
  marginHorizontal: {
267
321
  cssNames: ["margin-inline"],
268
- values1: { values: r, formatValue: e.rem },
322
+ values1: { values: s.sizes, formatValue: e.Value.rem },
269
323
  values2: { values: ["auto"] },
270
324
  values3: { values: [] }
271
325
  },
272
326
  marginVertical: {
273
327
  cssNames: ["margin-block"],
274
- values1: { values: r, formatValue: e.rem },
328
+ values1: { values: s.sizes, formatValue: e.Value.rem },
275
329
  values2: { values: ["auto"] },
276
330
  values3: { values: [] }
277
331
  },
278
332
  marginTop: {
279
333
  cssNames: ["margin-top"],
280
- values1: { values: r, formatValue: e.rem },
334
+ values1: { values: s.sizes, formatValue: e.Value.rem },
281
335
  values2: { values: ["auto"] },
282
336
  values3: { values: [] }
283
337
  },
284
338
  marginRight: {
285
339
  cssNames: ["margin-right"],
286
- values1: { values: r, formatValue: e.rem },
340
+ values1: { values: s.sizes, formatValue: e.Value.rem },
287
341
  values2: { values: ["auto"] },
288
342
  values3: { values: [] }
289
343
  },
290
344
  marginBottom: {
291
345
  cssNames: ["margin-bottom"],
292
- values1: { values: r, formatValue: e.rem },
346
+ values1: { values: s.sizes, formatValue: e.Value.rem },
293
347
  values2: { values: ["auto"] },
294
348
  values3: { values: [] }
295
349
  },
296
350
  marginLeft: {
297
351
  cssNames: ["margin-left"],
298
- values1: { values: r, formatValue: e.rem },
352
+ values1: { values: s.sizes, formatValue: e.Value.rem },
299
353
  values2: { values: ["auto"] },
300
354
  values3: { values: [] }
301
355
  },
302
356
  padding: {
303
357
  cssNames: ["padding"],
304
- values1: { values: r, formatValue: e.rem },
358
+ values1: { values: s.sizes, formatValue: e.Value.rem },
305
359
  values2: { values: [] },
306
360
  values3: { values: [] }
307
361
  },
308
362
  paddingHorizontal: {
309
363
  cssNames: ["padding-inline"],
310
- values1: { values: r, formatValue: e.rem },
364
+ values1: { values: s.sizes, formatValue: e.Value.rem },
311
365
  values2: { values: [] },
312
366
  values3: { values: [] }
313
367
  },
314
368
  paddingVertical: {
315
369
  cssNames: ["padding-block"],
316
- values1: { values: r, formatValue: e.rem },
370
+ values1: { values: s.sizes, formatValue: e.Value.rem },
317
371
  values2: { values: [] },
318
372
  values3: { values: [] }
319
373
  },
320
374
  paddingTop: {
321
375
  cssNames: ["padding-top"],
322
- values1: { values: r, formatValue: e.rem },
376
+ values1: { values: s.sizes, formatValue: e.Value.rem },
323
377
  values2: { values: [] },
324
378
  values3: { values: [] }
325
379
  },
326
380
  paddingRight: {
327
381
  cssNames: ["padding-right"],
328
- values1: { values: r, formatValue: e.rem },
382
+ values1: { values: s.sizes, formatValue: e.Value.rem },
329
383
  values2: { values: [] },
330
384
  values3: { values: [] }
331
385
  },
332
386
  paddingBottom: {
333
387
  cssNames: ["padding-bottom"],
334
- values1: { values: r, formatValue: e.rem },
388
+ values1: { values: s.sizes, formatValue: e.Value.rem },
335
389
  values2: { values: [] },
336
390
  values3: { values: [] }
337
391
  },
338
392
  paddingLeft: {
339
393
  cssNames: ["padding-left"],
340
- values1: { values: r, formatValue: e.rem },
394
+ values1: { values: s.sizes, formatValue: e.Value.rem },
341
395
  values2: { values: [] },
342
396
  values3: { values: [] }
343
397
  },
344
398
  border: {
345
399
  cssNames: ["border-width"],
346
- values1: { values: t, formatValue: e.px },
400
+ values1: { values: s.positiveSizes, formatValue: e.Value.px },
347
401
  values2: { values: [] },
348
402
  values3: { values: [] }
349
403
  },
350
404
  borderHorizontal: {
351
405
  cssNames: ["border-inline-width"],
352
- values1: { values: r, formatValue: e.px },
406
+ values1: { values: s.sizes, formatValue: e.Value.px },
353
407
  values2: { values: [] },
354
408
  values3: { values: [] }
355
409
  },
356
410
  borderVertical: {
357
411
  cssNames: ["border-block-width"],
358
- values1: { values: r, formatValue: e.px },
412
+ values1: { values: s.sizes, formatValue: e.Value.px },
359
413
  values2: { values: [] },
360
414
  values3: { values: [] }
361
415
  },
362
416
  borderTop: {
363
417
  cssNames: ["border-top-width"],
364
- values1: { values: r, formatValue: e.px },
418
+ values1: { values: s.sizes, formatValue: e.Value.px },
365
419
  values2: { values: [] },
366
420
  values3: { values: [] }
367
421
  },
368
422
  borderRight: {
369
423
  cssNames: ["border-right-width"],
370
- values1: { values: r, formatValue: e.px },
424
+ values1: { values: s.sizes, formatValue: e.Value.px },
371
425
  values2: { values: [] },
372
426
  values3: { values: [] }
373
427
  },
374
428
  borderBottom: {
375
429
  cssNames: ["border-bottom-width"],
376
- values1: { values: r, formatValue: e.px },
430
+ values1: { values: s.sizes, formatValue: e.Value.px },
377
431
  values2: { values: [] },
378
432
  values3: { values: [] }
379
433
  },
380
434
  borderLeft: {
381
435
  cssNames: ["border-left-width"],
382
- values1: { values: r, formatValue: e.px },
436
+ values1: { values: s.sizes, formatValue: e.Value.px },
383
437
  values2: { values: [] },
384
438
  values3: { values: [] }
385
439
  },
386
440
  borderStyle: {
387
441
  cssNames: ["border-style"],
388
- values1: { values: L },
442
+ values1: { values: s.borderAndOutlineStyles },
389
443
  values2: { values: [] },
390
444
  values3: { values: [] }
391
445
  },
392
446
  borderRadius: {
393
447
  cssNames: ["border-radius"],
394
- values1: { values: t, formatValue: e.rem },
448
+ values1: { values: s.positiveSizes, formatValue: e.Value.rem },
395
449
  values2: { values: [] },
396
450
  values3: { values: [] }
397
451
  },
398
452
  borderRadiusTop: {
399
453
  cssNames: ["border-top-left-radius", "border-top-right-radius"],
400
- values1: { values: t, formatValue: e.rem },
454
+ values1: { values: s.positiveSizes, formatValue: e.Value.rem },
401
455
  values2: { values: [] },
402
456
  values3: { values: [] }
403
457
  },
404
458
  borderRadiusRight: {
405
459
  cssNames: ["border-top-right-radius", "border-bottom-right-radius"],
406
- values1: { values: t, formatValue: e.rem },
460
+ values1: { values: s.positiveSizes, formatValue: e.Value.rem },
407
461
  values2: { values: [] },
408
462
  values3: { values: [] }
409
463
  },
410
464
  borderRadiusBottom: {
411
465
  cssNames: ["border-bottom-left-radius", "border-bottom-right-radius"],
412
- values1: { values: t, formatValue: e.rem },
466
+ values1: { values: s.positiveSizes, formatValue: e.Value.rem },
413
467
  values2: { values: [] },
414
468
  values3: { values: [] }
415
469
  },
416
470
  borderRadiusLeft: {
417
471
  cssNames: ["border-top-left-radius", "border-bottom-left-radius"],
418
- values1: { values: t, formatValue: e.rem },
472
+ values1: { values: s.positiveSizes, formatValue: e.Value.rem },
419
473
  values2: { values: [] },
420
474
  values3: { values: [] }
421
475
  },
422
476
  borderRadiusTopLeft: {
423
477
  cssNames: ["border-top-left-radius"],
424
- values1: { values: t, formatValue: e.rem },
478
+ values1: { values: s.positiveSizes, formatValue: e.Value.rem },
425
479
  values2: { values: [] },
426
480
  values3: { values: [] }
427
481
  },
428
482
  borderRadiusTopRight: {
429
483
  cssNames: ["border-top-right-radius"],
430
- values1: { values: t, formatValue: e.rem },
484
+ values1: { values: s.positiveSizes, formatValue: e.Value.rem },
431
485
  values2: { values: [] },
432
486
  values3: { values: [] }
433
487
  },
434
488
  borderRadiusBottomLeft: {
435
489
  cssNames: ["border-bottom-left-radius"],
436
- values1: { values: t, formatValue: e.rem },
490
+ values1: { values: s.positiveSizes, formatValue: e.Value.rem },
437
491
  values2: { values: [] },
438
492
  values3: { values: [] }
439
493
  },
440
494
  borderRadiusBottomRight: {
441
495
  cssNames: ["border-bottom-right-radius"],
442
- values1: { values: t, formatValue: e.rem },
496
+ values1: { values: s.positiveSizes, formatValue: e.Value.rem },
443
497
  values2: { values: [] },
444
498
  values3: { values: [] }
445
499
  },
@@ -498,19 +552,19 @@ const j = {
498
552
  },
499
553
  overflow: {
500
554
  cssNames: ["overflow"],
501
- values1: { values: R },
555
+ values1: { values: s.overflows },
502
556
  values2: { values: [] },
503
557
  values3: { values: [] }
504
558
  },
505
559
  overflowX: {
506
560
  cssNames: ["overflow-x"],
507
- values1: { values: R },
561
+ values1: { values: s.overflows },
508
562
  values2: { values: [] },
509
563
  values3: { values: [] }
510
564
  },
511
565
  overflowY: {
512
566
  cssNames: ["overflow-y"],
513
- values1: { values: R },
567
+ values1: { values: s.overflows },
514
568
  values2: { values: [] },
515
569
  values3: { values: [] }
516
570
  },
@@ -522,7 +576,7 @@ const j = {
522
576
  },
523
577
  fontSize: {
524
578
  cssNames: ["font-size"],
525
- values1: { values: t, formatValue: e.px },
579
+ values1: { values: s.positiveSizes, formatValue: e.Value.px },
526
580
  values2: { values: ["inherit"] },
527
581
  values3: { values: [] }
528
582
  },
@@ -540,13 +594,13 @@ const j = {
540
594
  },
541
595
  letterSpacing: {
542
596
  cssNames: ["letter-spacing"],
543
- values1: { values: t, formatValue: e.px },
597
+ values1: { values: s.positiveSizes, formatValue: e.Value.px },
544
598
  values2: { values: [] },
545
599
  values3: { values: [] }
546
600
  },
547
601
  lineHeight: {
548
602
  cssNames: ["line-height"],
549
- values1: { values: t, formatValue: e.px },
603
+ values1: { values: s.positiveSizes, formatValue: e.Value.px },
550
604
  values2: { values: ["font-size"], formatValue: () => "1" },
551
605
  values3: { values: [] }
552
606
  },
@@ -635,91 +689,91 @@ const j = {
635
689
  },
636
690
  gap: {
637
691
  cssNames: ["gap"],
638
- values1: { values: t, formatValue: e.rem },
692
+ values1: { values: s.positiveSizes, formatValue: e.Value.rem },
639
693
  values2: { values: [] },
640
694
  values3: { values: [] }
641
695
  },
642
696
  rowGap: {
643
697
  cssNames: ["row-gap"],
644
- values1: { values: t, formatValue: e.rem },
698
+ values1: { values: s.positiveSizes, formatValue: e.Value.rem },
645
699
  values2: { values: [] },
646
700
  values3: { values: [] }
647
701
  },
648
702
  columnGap: {
649
703
  cssNames: ["column-gap"],
650
- values1: { values: t, formatValue: e.rem },
704
+ values1: { values: s.positiveSizes, formatValue: e.Value.rem },
651
705
  values2: { values: [] },
652
706
  values3: { values: [] }
653
707
  },
654
708
  order: {
655
709
  cssNames: ["order"],
656
- values1: { values: t },
710
+ values1: { values: s.positiveSizes },
657
711
  values2: { values: [] },
658
712
  values3: { values: [] }
659
713
  },
660
714
  flexGrow: {
661
715
  cssNames: ["flex-grow"],
662
- values1: { values: t },
716
+ values1: { values: s.positiveSizes },
663
717
  values2: { values: [] },
664
718
  values3: { values: [] }
665
719
  },
666
720
  flexShrink: {
667
721
  cssNames: ["flex-shrink"],
668
- values1: { values: t },
722
+ values1: { values: s.positiveSizes },
669
723
  values2: { values: [] },
670
724
  values3: { values: [] }
671
725
  },
672
726
  alignSelf: {
673
727
  cssNames: ["align-self"],
674
- values1: { values: ["auto", "flex-start", "flex-end", "center", "baseline", "stretch"] },
728
+ values1: { values: s.alignSelf },
675
729
  values2: { values: [] },
676
730
  values3: { values: [] }
677
731
  },
678
732
  justifySelf: {
679
733
  cssNames: ["justify-self"],
680
- values1: { values: ["auto", "flex-start", "flex-end", "center", "baseline", "stretch"] },
734
+ values1: { values: s.alignSelf },
681
735
  values2: { values: [] },
682
736
  values3: { values: [] }
683
737
  },
684
738
  gridColumns: {
685
739
  cssNames: ["grid-template-columns"],
686
- values1: { values: t, formatValue: (s, a) => `repeat(${a},minmax(0,1fr))` },
740
+ values1: { values: s.positiveSizes, formatValue: e.Value.gridColumns },
687
741
  values2: { values: [] },
688
742
  values3: { values: [] }
689
743
  },
690
744
  colSpan: {
691
745
  cssNames: ["grid-column"],
692
- values1: { values: t, formatValue: (s, a) => `span ${a}/span ${a}` },
693
- values2: { values: ["full-row"], formatValue: (s, a) => "1/-1" },
746
+ values1: { values: s.positiveSizes, formatValue: e.Value.gridColumn },
747
+ values2: { values: ["full-row"], formatValue: e.Value.gridColumn },
694
748
  values3: { values: [] }
695
749
  },
696
750
  colStart: {
697
751
  cssNames: ["grid-column-start"],
698
- values1: { values: t, formatValue: (s, a) => `${a}` },
752
+ values1: { values: s.positiveSizes },
699
753
  values2: { values: [] },
700
754
  values3: { values: [] }
701
755
  },
702
756
  colEnd: {
703
757
  cssNames: ["grid-column-end"],
704
- values1: { values: t, formatValue: (s, a) => `${a}` },
758
+ values1: { values: s.positiveSizes },
705
759
  values2: { values: [] },
706
760
  values3: { values: [] }
707
761
  },
708
762
  outline: {
709
763
  cssNames: ["outline-width"],
710
- values1: { values: t, formatValue: e.px },
764
+ values1: { values: s.positiveSizes, formatValue: e.Value.px },
711
765
  values2: { values: [] },
712
766
  values3: { values: [] }
713
767
  },
714
768
  outlineStyle: {
715
769
  cssNames: ["outline-style"],
716
- values1: { values: L },
770
+ values1: { values: s.borderAndOutlineStyles },
717
771
  values2: { values: [] },
718
772
  values3: { values: [] }
719
773
  },
720
774
  outlineOffset: {
721
775
  cssNames: ["outline-offset"],
722
- values1: { values: t, formatValue: e.px },
776
+ values1: { values: s.positiveSizes, formatValue: e.Value.px },
723
777
  values2: { values: [] },
724
778
  values3: { values: [] }
725
779
  },
@@ -733,7 +787,7 @@ const j = {
733
787
  cssNames: ["transition-duration"],
734
788
  values1: {
735
789
  values: [50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950, 1e3],
736
- formatValue: (s, a) => `${a}ms`
790
+ formatValue: e.Value.ms
737
791
  },
738
792
  values2: { values: [] },
739
793
  values3: { values: [] }
@@ -769,10 +823,10 @@ const j = {
769
823
  values3: { values: [] }
770
824
  }
771
825
  };
772
- Object.keys(j).forEach((s) => {
773
- l[s] = j[s], l[s].isThemeStyle = !0;
826
+ Object.keys(H).forEach((a) => {
827
+ l[a] = H[a], l[a].isThemeStyle = !0;
774
828
  });
775
- const x = {
829
+ const b = {
776
830
  m: { ...l.margin, key: "margin" },
777
831
  mx: { ...l.marginHorizontal, key: "marginHorizontal" },
778
832
  my: { ...l.marginVertical, key: "marginVertical" },
@@ -798,85 +852,92 @@ const x = {
798
852
  ai: { ...l.alignItems, key: "alignItems" },
799
853
  ac: { ...l.alignContent, key: "alignContent" },
800
854
  d: { ...l.flexDirection, key: "flexDirection" }
801
- }, U = Object.keys(l), X = Object.keys(x);
802
- G.forEach((s) => {
803
- U.forEach((a) => {
804
- l[`${a}${s}`] = { ...l[a] }, l[`${a}${s}`].pseudoSuffix = s;
805
- }), X.forEach((a) => {
806
- x[`${a}${s}`] = { ...x[a], key: `${x[a].key}${s}` }, x[`${a}${s}`].pseudoSuffix = s;
855
+ }, P = Object.keys(l), M = Object.keys(b);
856
+ D.forEach((a) => {
857
+ P.forEach((u) => {
858
+ l[`${u}${a}`] = { ...l[u] }, l[`${u}${a}`].pseudoSuffix = a;
859
+ }), M.forEach((u) => {
860
+ b[`${u}${a}`] = { ...b[u], key: `${b[u].key}${a}` }, b[`${u}${a}`].pseudoSuffix = a;
807
861
  });
808
862
  });
809
863
  var w;
810
- ((s) => {
811
- const a = new _(), d = [...Object.keys(l), ...Object.keys(j)], i = z();
812
- let n = !1;
813
- const p = d.reduce((v, u) => (v[u] = /* @__PURE__ */ new Set(), v), {});
814
- s.doxClassName = "_dox";
815
- function f(v, u) {
816
- if (v in l)
817
- return b(v, u);
864
+ ((a) => {
865
+ a.doxClassName = "_dox", a.svgClassName = "_svg";
866
+ const u = `:root{--borderColor: black;--outlineColor: black;--lineHeight: 1.2;--fontSize: 14px;--transitionTime: 0.25s;--svgTransitionTime: 0.3s;#crono-box {position: absolute;top: 0;left: 0;height: 0;}}
867
+ html{font-size: 16px;font-family: Arial, sans-serif;}
868
+ body{margin: 0;line-height: var(--lineHeight);font-size: var(--fontSize);}
869
+ a,ul{all: unset;}
870
+ .${a.doxClassName}{display: block;border: 0 solid var(--borderColor);outline: 0px solid var(--outlineColor);margin: 0;padding: 0;background-color: initial;transition: all var(--transitionTime);box-sizing: border-box;font-family: inherit;font-size: inherit;}
871
+ .${a.svgClassName}{width: 1.5rem;transition: all var(--svgTransitionTime);path,circle,rect,line {transition: all var(--svgTransitionTime);}}
872
+ `, c = new A(), n = [...Object.keys(l), ...Object.keys(H)], m = V();
873
+ let g = !1;
874
+ const h = n.reduce((t, r) => (t[r] = /* @__PURE__ */ new Set(), t), {});
875
+ function N(t, r) {
876
+ if (t in l)
877
+ return d(t, r);
878
+ if (t in S)
879
+ return S[t].className;
818
880
  }
819
- s.get = f;
820
- function m() {
821
- if (n) {
881
+ a.get = N;
882
+ function z() {
883
+ if (g) {
822
884
  console.info("%c💬Flush Dox Styles", "color: #00ffff");
823
- const v = `.${s.doxClassName}{display: block;border: 0 solid black;outline: 0px solid black;margin: 0;padding: 0;background-color: initial;transition: all 250ms;box-sizing: border-box;font-family: inherit;font-size: inherit;}`;
824
- let u = c([v]);
825
- u = c(u, "H"), u = c(u, "F"), u = c(u, "A"), i.innerHTML = u.join(""), n = !1;
885
+ let t = o([u]);
886
+ t = o(t, "H"), t = o(t, "F"), t = o(t, "A"), m.innerHTML = t.join(""), g = !1;
826
887
  }
827
888
  }
828
- s.flush = m;
829
- function b(v, u) {
830
- var $;
831
- p[v].has(u) || (n = !0, p[v].add(u));
832
- const o = k(v, u), g = (($ = o.formatClassName) == null ? void 0 : $.call(o, v, u)) ?? `${v}${u}`;
833
- return `-${a.getIdentity(g)}`;
889
+ a.flush = z;
890
+ function d(t, r) {
891
+ var y;
892
+ h[t].has(r) || (g = !0, h[t].add(r));
893
+ const v = i(t, r), f = ((y = v.formatClassName) == null ? void 0 : y.call(v, t, r)) ?? `${t}${r}`;
894
+ return `-${c.getIdentity(f)}`;
834
895
  }
835
- function c(v, u) {
836
- return Object.entries(p).filter(([o]) => {
837
- var g;
838
- return ((g = l[o]) == null ? void 0 : g.pseudoSuffix) === u;
839
- }).reduce((o, [g, $]) => ($.forEach((H) => {
840
- var T;
841
- let N = b(g, H);
842
- u === "H" && (N = `${N}:hover`), u === "F" && (N = `${N}:focus-within`), u === "A" && (N = `${N}:active`);
843
- const C = k(g, H), B = ((T = C.formatValue) == null ? void 0 : T.call(C, g, H)) ?? H, I = l[g].cssNames.map((O) => `${O}:${B};`).join("");
844
- o.push(`.${N}{${I}}`);
845
- }), o), v);
896
+ function o(t, r) {
897
+ return Object.entries(h).filter(([v]) => {
898
+ var f;
899
+ return ((f = l[v]) == null ? void 0 : f.pseudoSuffix) === r;
900
+ }).reduce((v, [f, y]) => (y.forEach((x) => {
901
+ var $;
902
+ let p = d(f, x);
903
+ r === "H" && (p = `${p}:hover,.${S.hover.className}:hover>.${p}`), r === "F" && (p = `${p}:focus-within,.${S.focus.className}:focus-within>.${p}`), r === "A" && (p = `${p}:active`);
904
+ const C = i(f, x), R = (($ = C.formatValue) == null ? void 0 : $.call(C, f, x)) ?? x, j = l[f].cssNames.map((L) => `${L}:${R};`).join("");
905
+ v.push(`.${p}{${j}}`);
906
+ }), v), t);
846
907
  }
847
- function k(v, u) {
848
- const o = l[v];
849
- return o.isThemeStyle ? o : o.values1.values.includes(u) ? o.values1 : o.values2.values.includes(u) ? o.values2 : o.values3;
908
+ function i(t, r) {
909
+ const v = l[t];
910
+ return v.isThemeStyle ? v : v.values1.values.includes(r) ? v.values1 : v.values2.values.includes(r) ? v.values2 : v.values3;
850
911
  }
851
- function z() {
852
- const v = "crono-styles";
853
- let u = document.getElementById(v);
854
- return u || (u = document.createElement("style"), u.setAttribute("id", v), u.setAttribute("type", "text/css"), document.head.insertBefore(u, document.head.firstChild)), u;
912
+ function V() {
913
+ const t = "crono-styles";
914
+ let r = document.getElementById(t);
915
+ return r || (r = document.createElement("style"), r.setAttribute("id", t), r.setAttribute("type", "text/css"), document.head.insertBefore(r, document.head.firstChild)), r;
855
916
  }
856
917
  })(w || (w = {}));
857
- function Y(s) {
858
- const a = W(s);
859
- return D(w.flush, [s]), E(() => {
860
- const d = [w.doxClassName], i = a ? { ...S(a), ...S(s) } : S(s);
861
- return Object.entries(i).forEach(([n, p]) => {
862
- d.push(w.get(n, p));
863
- }), d;
864
- }, [s, a]);
918
+ function W(a) {
919
+ const u = _(a);
920
+ return B(w.flush, [a]), T(() => {
921
+ const c = [w.doxClassName], n = u ? { ...k(u), ...k(a) } : k(a);
922
+ return Object.entries(n).forEach(([m, g]) => {
923
+ c.push(w.get(m, g));
924
+ }), c;
925
+ }, [a, u]);
865
926
  }
866
- function S(s) {
867
- const a = { ...s };
868
- return Object.keys(a).forEach((i) => {
869
- const n = x[i];
870
- n && (n.key in a || (a[n.key] = a[i]), delete a[i]);
871
- }), a;
927
+ function k(a) {
928
+ const u = { ...a };
929
+ return Object.keys(u).forEach((n) => {
930
+ const m = b[n];
931
+ m && (m.key in u || (u[m.key] = u[n]), delete u[n]);
932
+ }), u;
872
933
  }
873
- function J(s, a) {
874
- const { tag: d, children: i, props: n, className: p, style: f } = s, m = Y(s), b = E(() => M.classNames(p, m).join(" "), [s]), c = { ...n, className: b };
875
- f && (c.style = f), a && (c.ref = a);
876
- const [k, z] = P(!1), v = typeof i == "function";
877
- return v && (c.onMouseEnter = () => z(!0), c.onMouseLeave = () => z(!1)), A.createElement(d || "div", c, v ? i({ isHover: k }) : i);
934
+ function G(a, u) {
935
+ const { tag: c, children: n, props: m, className: g, style: h } = a, N = W(a), z = T(() => F.classNames(g, N).join(" "), [a]), d = { ...m, className: z };
936
+ h && (d.style = h), u && (d.ref = u);
937
+ const [o, i] = I(!1), V = typeof n == "function";
938
+ return V && (d.onMouseEnter = () => i(!0), d.onMouseLeave = () => i(!1)), E.createElement(c || "div", d, V ? n({ isHover: o }) : n);
878
939
  }
879
- const se = F(J);
940
+ const J = O(G);
880
941
  export {
881
- se as default
942
+ J as default
882
943
  };