visits-style 1.4.16 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (72) hide show
  1. package/README.md +59 -26
  2. package/dist/index.cjs.js +1031 -1358
  3. package/dist/index.cjs.js.map +1 -0
  4. package/dist/index.d.cts +404 -0
  5. package/dist/index.d.ts +404 -7
  6. package/dist/index.esm.js +1199 -0
  7. package/dist/index.esm.js.map +1 -0
  8. package/dist/lib.css +26 -0
  9. package/package.json +27 -28
  10. package/dist/components/Accordion/index.d.ts +0 -12
  11. package/dist/components/AppBar/index.d.ts +0 -19
  12. package/dist/components/Modal/index.d.ts +0 -32
  13. package/dist/components/Popover/index.d.ts +0 -46
  14. package/dist/components/Portal/index.d.ts +0 -8
  15. package/dist/components/Spinner/index.d.ts +0 -12
  16. package/dist/components/Toast/ToastItem.d.ts +0 -2
  17. package/dist/components/Toast/index.d.ts +0 -2
  18. package/dist/components/Toast/types.d.ts +0 -44
  19. package/dist/components/Tooltip/index.d.ts +0 -37
  20. package/dist/components/index.d.ts +0 -10
  21. package/dist/elements/Box/index.d.ts +0 -10
  22. package/dist/elements/Button/ButtonGroup.d.ts +0 -3
  23. package/dist/elements/Button/TextButton.d.ts +0 -18
  24. package/dist/elements/Button/index.d.ts +0 -16
  25. package/dist/elements/Content/index.d.ts +0 -3
  26. package/dist/elements/Divider/index.d.ts +0 -3
  27. package/dist/elements/Grid/Col.d.ts +0 -12
  28. package/dist/elements/Grid/Container.d.ts +0 -7
  29. package/dist/elements/Grid/Row.d.ts +0 -3
  30. package/dist/elements/Icons/Approved.d.ts +0 -2
  31. package/dist/elements/Icons/ArrowDown.d.ts +0 -2
  32. package/dist/elements/Icons/ChevronLeftRound.d.ts +0 -2
  33. package/dist/elements/Icons/ChevronRightRound.d.ts +0 -2
  34. package/dist/elements/Icons/Close.d.ts +0 -2
  35. package/dist/elements/Icons/FileRound.d.ts +0 -2
  36. package/dist/elements/Icons/Pencil.d.ts +0 -2
  37. package/dist/elements/Icons/PencilSimple.d.ts +0 -2
  38. package/dist/elements/Icons/Plus.d.ts +0 -2
  39. package/dist/elements/Icons/Refresh.d.ts +0 -2
  40. package/dist/elements/Icons/User.d.ts +0 -2
  41. package/dist/elements/Icons/index.d.ts +0 -11
  42. package/dist/elements/Placeholder/index.d.ts +0 -3
  43. package/dist/elements/Progress/index.d.ts +0 -18
  44. package/dist/elements/Table/index.d.ts +0 -12
  45. package/dist/elements/Tag/index.d.ts +0 -15
  46. package/dist/elements/index.d.ts +0 -14
  47. package/dist/forms/Checkbox/index.d.ts +0 -8
  48. package/dist/forms/Field/index.d.ts +0 -7
  49. package/dist/forms/HelpMessage.d.ts +0 -8
  50. package/dist/forms/Radio/index.d.ts +0 -8
  51. package/dist/forms/Select/index.d.ts +0 -29
  52. package/dist/forms/Switch/index.d.ts +0 -21
  53. package/dist/forms/TextInput/index.d.ts +0 -22
  54. package/dist/forms/Textarea/index.d.ts +0 -11
  55. package/dist/forms/index.d.ts +0 -7
  56. package/dist/hooks/useIsomorphicLayoutEffect.d.ts +0 -3
  57. package/dist/index.es.js +0 -1513
  58. package/dist/styles/normalize.d.ts +0 -3
  59. package/dist/theme.d.ts +0 -3
  60. package/dist/types.d.ts +0 -36
  61. package/dist/utils/arrow.d.ts +0 -1
  62. package/dist/utils/boxShadow.d.ts +0 -1
  63. package/dist/utils/disabledColor.d.ts +0 -2
  64. package/dist/utils/findColorInvert.d.ts +0 -2
  65. package/dist/utils/hambuger.d.ts +0 -1
  66. package/dist/utils/index.d.ts +0 -6
  67. package/dist/utils/isClient.d.ts +0 -2
  68. package/dist/utils/media.d.ts +0 -6
  69. package/dist/utils/setAlign.d.ts +0 -3
  70. package/dist/utils/setSize.d.ts +0 -4
  71. package/dist/utils/stopPropagation.d.ts +0 -2
  72. package/dist/utils/wrapEvent.d.ts +0 -2
package/dist/index.es.js DELETED
@@ -1,1513 +0,0 @@
1
- import { styled, css, keyframes } from 'styled-components';
2
- import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
3
- import React, { forwardRef, useLayoutEffect, useEffect, useRef, useMemo, useImperativeHandle, useState, cloneElement, Children, useCallback, createElement } from 'react';
4
- import { getLuminance, transparentize, darken } from 'polished';
5
- import { useId, useFloating, shift, flip, offset, autoUpdate, useInteractions, useHover, useClientPoint, useClick, FloatingOverlay, useDismiss, useTransitionStyles } from '@floating-ui/react';
6
- import { createPortal } from 'react-dom';
7
-
8
- const Wrapper$6 = /* @__PURE__ */ styled.div.withConfig({
9
- displayName: "Field__Wrapper",
10
- componentId: "sc-1ayqhds-0"
11
- })(["display:block;margin:1.5rem 0;"]);
12
- const Label = /* @__PURE__ */ styled.h5.withConfig({
13
- displayName: "Field__Label",
14
- componentId: "sc-1ayqhds-1"
15
- })(["display:block;font-size:1rem;font-weight:normal;margin-bottom:0.625rem;text-align:left;color:", ";& > i{color:", ";margin-left:0.325rem;}"], ({
16
- theme
17
- }) => theme.textStrong, ({
18
- theme
19
- }) => theme.primary);
20
- function Field({
21
- label,
22
- children,
23
- required,
24
- ...rest
25
- }) {
26
- return /* @__PURE__ */ jsxs(Wrapper$6, { ...rest, children: [
27
- label ? /* @__PURE__ */ jsxs(Label, { children: [
28
- label,
29
- required && /* @__PURE__ */ jsx("i", { children: "*" })
30
- ] }) : null,
31
- children
32
- ] });
33
- }
34
-
35
- function findColorInvert({
36
- black,
37
- white
38
- }, color) {
39
- if (!color || getLuminance(color) > 0.55) {
40
- return black || "#000";
41
- }
42
- return white || "#fff";
43
- }
44
-
45
- function hamburger(size) {
46
- return css(["display:block;position:relative;height:", ";width:", ";cursor:pointer;span{background-color:currentColor;display:block;height:1px;left:calc(50% - 8px);position:absolute;transform-origin:center;transition-duration:100ms;transition-property:background-color,opacity,transform;transition-timing-function:ease-out;width:16px;&:nth-child(1){top:calc(50% - 6px);}&:nth-child(2){top:calc(50% - 1px);}&:nth-child(3){top:calc(50% + 4px);}&:hover{background-color:rgba(black,0.05);}}&.active span{&:nth-child(1){transform:translateY(5px) rotate(45deg);}&:nth-child(2){opacity:0;}&:nth-child(3){transform:translateY(-5px) rotate(-45deg);}}"], size, size);
47
- }
48
-
49
- function boxShadow(size, color, amount) {
50
- const shadowColor = amount ? transparentize(amount, color) : color;
51
- return css(["box-shadow:0 0 0 ", " ", ";"], size, shadowColor);
52
- }
53
-
54
- function Arrow(color) {
55
- return css(["position:absolute;border:3px solid ", ';border-radius:2px;border-right:0;border-top:0;content:" ";display:block;height:0.625em;margin-top:-0.625em;pointer-events:none;top:50%;transform:rotate(-45deg);transform-origin:center;width:0.625em;'], color);
56
- }
57
-
58
- function setSize(name, size) {
59
- switch (size) {
60
- case "small":
61
- return `${name}: 0.75rem;`;
62
- case "medium":
63
- return `${name}: 1.25rem;`;
64
- case "large":
65
- return `${name}: 1.5rem;`;
66
- default:
67
- return `${name}: 1rem;`;
68
- }
69
- }
70
-
71
- function mediaMobile({
72
- theme
73
- }) {
74
- if (!theme.responsive)
75
- return "@media (max-width: 0)";
76
- return `@media screen and (max-width: ${theme.media.mobile})`;
77
- }
78
- function mediaTablet({
79
- theme
80
- }) {
81
- if (!theme.responsive)
82
- return "@media (max-width: 0)";
83
- return `@media screen and (max-width: ${theme.media.tablet})`;
84
- }
85
- function mediaDesktop({
86
- theme
87
- }) {
88
- if (!theme.responsive)
89
- return "@media (max-width: 0)";
90
- return `@media screen and (max-width: ${theme.media.desktop})`;
91
- }
92
- function mediaFullHD({
93
- theme
94
- }) {
95
- if (!theme.responsive)
96
- return "@media (max-width: 0)";
97
- return `@media screen and (max-width: ${theme.media.fullhd})`;
98
- }
99
- function mediaUntilFullHD({
100
- theme
101
- }) {
102
- if (!theme.responsive)
103
- return "@media (max-width: 0)";
104
- return `@media screen and (min-width: ${theme.media.fullhd})`;
105
- }
106
-
107
- function disabledColor(theme) {
108
- const textColor = transparentize(0.15, theme.textDark || "#000");
109
- const backColor = transparentize(0.55, theme.border || "#EEE");
110
- return css(["pointer-events:none;box-shadow:none;color:", ";background-color:", ";"], textColor, backColor);
111
- }
112
-
113
- const Message = /* @__PURE__ */ styled.small.withConfig({
114
- shouldForwardProp: (name) => name !== "error"
115
- }).withConfig({
116
- displayName: "HelpMessage__Message",
117
- componentId: "sc-14wou17-0"
118
- })(["font-size:0.8rem;color:", ";"], ({
119
- error,
120
- theme
121
- }) => error ? theme.danger : theme.textLight);
122
- function HelpMessage({
123
- help,
124
- error,
125
- noErrorMessage
126
- }) {
127
- if (error && !noErrorMessage)
128
- return /* @__PURE__ */ jsx(Message, { error: true, children: error });
129
- if (help)
130
- return /* @__PURE__ */ jsx(Message, { children: help });
131
- return null;
132
- }
133
-
134
- const TextInput = forwardRef(({
135
- className,
136
- outline,
137
- error,
138
- style,
139
- help,
140
- leftIcon: leftIcon2,
141
- rightIcon: rightIcon2,
142
- type = "text",
143
- maxLength = 255,
144
- noErrorMessage,
145
- ...rest
146
- }, ref) => /* @__PURE__ */ jsxs(Wrapper$5, { className, outline, error: !!error, style, disabled: rest.disabled, children: [
147
- leftIcon2 && /* @__PURE__ */ jsx(Icon, { children: leftIcon2 }),
148
- rightIcon2 && /* @__PURE__ */ jsx(Icon, { $right: true, children: rightIcon2 }),
149
- /* @__PURE__ */ jsx("input", { type, maxLength, ref, ...rest }),
150
- /* @__PURE__ */ jsx(HelpMessage, { help, error, noErrorMessage })
151
- ] }));
152
- TextInput.displayName = "TextInput";
153
- const TextInput$1 = TextInput;
154
- const rightIcon = /* @__PURE__ */ css(["right:0.375em;& ~ input{padding-right:1.555em !important;}"]);
155
- const leftIcon = /* @__PURE__ */ css(["left:0.375em;& ~ input{padding-left:1.55em !important;}"]);
156
- const Icon = /* @__PURE__ */ styled.span.withConfig({
157
- displayName: "TextInput__Icon",
158
- componentId: "sc-1myda3q-0"
159
- })(["position:absolute;top:0.375em;bottom:0;z-index:1;color:", ";", " svg,img{height:1em;width:1em;}"], ({
160
- theme
161
- }) => theme.border, ({
162
- $right
163
- }) => $right ? rightIcon : leftIcon);
164
- function shouldForwardProp$9(name) {
165
- return name !== "outline" && name !== "error" && name !== "disabled";
166
- }
167
- const Wrapper$5 = /* @__PURE__ */ styled.span.withConfig({
168
- shouldForwardProp: shouldForwardProp$9
169
- }).withConfig({
170
- displayName: "TextInput__Wrapper",
171
- componentId: "sc-1myda3q-1"
172
- })(["position:relative;display:block;input{max-width:100%;width:100%;height:100%;position:relative;display:block;outline:none;box-shadow:none;appearance:none;text-align:left;color:inherit;padding:", ";border:1px solid ", ";", " ", " transition-property:box-shadow;transition-duration:150ms;transition-timing-function:ease-in-out;&:focus{border-color:", ";box-shadow:", ";}&:disabled,[disabled]{resize:none;}&::placeholder{color:", ";}}&:hover{input:not(:disabled):not(:focus):not(:active){border-color:", ";}", "{color:", ";}}", ""], ({
173
- theme
174
- }) => theme.formPadding, ({
175
- error,
176
- theme
177
- }) => error ? theme.danger : theme.border, ({
178
- outline,
179
- theme
180
- }) => outline ? {
181
- borderRadius: theme.radius
182
- } : {
183
- borderRadius: 0,
184
- borderWidth: 0,
185
- borderBottomWidth: "1px"
186
- }, setSize("font-size"), ({
187
- error,
188
- theme
189
- }) => error ? theme.danger : theme.primary, ({
190
- theme,
191
- outline,
192
- error
193
- }) => outline ? `0 0 0 0.1em ${error ? theme.danger : theme.primary}` : `0 0.1em ${error ? theme.danger : theme.primary}`, ({
194
- theme
195
- }) => theme.placeholder, ({
196
- theme
197
- }) => theme.borderHover, Icon, ({
198
- theme
199
- }) => theme.borderHover, ({
200
- disabled,
201
- theme
202
- }) => disabled ? css(["input{", " border-style:dashed;}"], disabledColor(theme)) : void 0);
203
-
204
- const Textarea = forwardRef(({
205
- className,
206
- help,
207
- error,
208
- style,
209
- noErrorMessage,
210
- ...rest
211
- }, ref) => /* @__PURE__ */ jsxs(InputWrapper$2, { className, error: Boolean(error), style, disabled: Boolean(rest.disabled), children: [
212
- /* @__PURE__ */ jsx("textarea", { ...rest, ref }),
213
- /* @__PURE__ */ jsx(HelpMessage, { help, error, noErrorMessage })
214
- ] }));
215
- Textarea.displayName = "Textarea";
216
- const Textarea$1 = Textarea;
217
- function shouldForwardProp$8(name) {
218
- return name !== "error" && name !== "disabled";
219
- }
220
- const InputWrapper$2 = /* @__PURE__ */ styled.span.withConfig({
221
- shouldForwardProp: shouldForwardProp$8
222
- }).withConfig({
223
- displayName: "Textarea__InputWrapper",
224
- componentId: "sc-z9p0uf-0"
225
- })(["display:block;position:relative;textarea{max-width:100%;width:100%;height:100%;padding:0.625em;resize:vertical;appearance:none;overflow:auto;outline:none;text-align:left;color:inherit;border-radius:", ";border:1px solid ", ";transition-property:box-shadow;transition-duration:0.15s;transition-timing-function:ease-in-out;", " &:focus{border-color:", ";", "}&:disabled,[disabled],&:readonly{", "}&:disabled,[disabled]{resize:none;}&::placeholder{color:", ";}}&:hover{textarea:not(:disabled):not(:focus){border-color:", ";}}", ""], ({
226
- theme
227
- }) => theme.radius, ({
228
- theme,
229
- error
230
- }) => error ? theme.danger : theme.border, setSize("font-size"), ({
231
- theme,
232
- error
233
- }) => error ? theme.danger : theme.primary, ({
234
- theme,
235
- error
236
- }) => boxShadow("0.1em", error ? theme.danger : theme.primary), ({
237
- theme
238
- }) => disabledColor(theme), ({
239
- theme
240
- }) => theme.placeholder, ({
241
- theme
242
- }) => theme.borderHover, ({
243
- disabled,
244
- theme
245
- }) => disabled ? css(["textarea{", " border-style:dashed;}"], disabledColor(theme)) : void 0);
246
-
247
- const isClient = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
248
-
249
- const useIsomorphicLayoutEffect = isClient ? useLayoutEffect : useEffect;
250
-
251
- function Approved$1() {
252
- return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "30", height: "30", viewBox: "0 0 30 30", children: /* @__PURE__ */ jsx("path", { d: "M11.5 18.5l-3.9-4L6 16l5.6 5.6 11.6-11.5-1.7-1.6z", fill: "currentColor" }) });
253
- }
254
- function Indeterminate() {
255
- return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "30", height: "30", viewBox: "0 0 30 30", children: /* @__PURE__ */ jsx("rect", { width: "20", height: "4", y: "13", x: "4.5", fill: "currentColor", stroke: "none", rx: "2" }) });
256
- }
257
- const Checkbox = forwardRef(({
258
- className,
259
- children,
260
- indeterminate,
261
- ...rest
262
- }, ref) => {
263
- const innerRef = useRef(null);
264
- const id = `checkbox_${rest.name}_${rest.value ?? "none"}`;
265
- const innerClass = useMemo(() => {
266
- const arr = [];
267
- if (rest.checked || indeterminate)
268
- arr.push("checked");
269
- if (rest.disabled)
270
- arr.push("disabled");
271
- return arr.join(" ");
272
- }, [rest.checked, rest.disabled, indeterminate]);
273
- useImperativeHandle(ref, () => innerRef.current);
274
- useIsomorphicLayoutEffect(() => {
275
- if (innerRef.current) {
276
- innerRef.current.indeterminate = indeterminate || false;
277
- }
278
- }, [indeterminate]);
279
- return /* @__PURE__ */ jsxs(Wrapper$4, { className, children: [
280
- /* @__PURE__ */ jsx("input", { type: "checkbox", id, ...rest, ref: innerRef }),
281
- /* @__PURE__ */ jsxs("label", { htmlFor: id, children: [
282
- /* @__PURE__ */ jsx(Shape$1, { className: innerClass, children: indeterminate ? /* @__PURE__ */ jsx(Indeterminate, {}) : /* @__PURE__ */ jsx(Approved$1, {}) }),
283
- children
284
- ] })
285
- ] });
286
- });
287
- Checkbox.displayName = "Checkbox";
288
- const Checkbox$1 = Checkbox;
289
- const Shape$1 = /* @__PURE__ */ styled.div.withConfig({
290
- displayName: "Checkbox__Shape",
291
- componentId: "sc-1lh5swj-0"
292
- })(["display:inline-flex;margin:0.5rem;width:1.25em;height:1.25em;background:transparent;border:0.1em solid ", ";border-radius:", ";justify-content:center;align-items:center;will-change:background-color;transition:background-color 150ms ease-out;svg{opacity:0;stroke-width:0.1em;stroke:currentColor;}&.checked{border-color:", ";background-color:", ";color:", ";svg{opacity:1;}&.disabled{color:", ";}}&.disabled{background:", ";border-color:", ";}"], ({
293
- theme
294
- }) => theme.border, ({
295
- theme
296
- }) => theme.radius, ({
297
- theme
298
- }) => theme.primary, ({
299
- theme
300
- }) => theme.primary, ({
301
- theme
302
- }) => theme.white, ({
303
- theme
304
- }) => transparentize(0.15, theme.textDark), ({
305
- theme
306
- }) => transparentize(0.55, theme.border), ({
307
- theme
308
- }) => theme.border);
309
- const Wrapper$4 = /* @__PURE__ */ styled.span.withConfig({
310
- displayName: "Checkbox__Wrapper",
311
- componentId: "sc-1lh5swj-1"
312
- })(["display:block;position:relative;width:auto;label{display:flex;align-items:center;cursor:pointer;padding-left:0.625em;max-width:100%;width:100%;line-height:1.25;margin-right:0.625rem;}input{display:none;&:disabled + label{color:", ";}}"], ({
313
- theme
314
- }) => transparentize(0.25, theme.textDark));
315
-
316
- function ChevronDown(props) {
317
- return /* @__PURE__ */ jsx("svg", { width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx("path", { d: "M10.6 0L6 4.6 1.4 0 0 1.4l6 6 6-6L10.6 0z", fill: "currentColor" }) });
318
- }
319
-
320
- const Select = forwardRef(({
321
- options = [],
322
- placeholder,
323
- render,
324
- help,
325
- error,
326
- className,
327
- inputSize,
328
- outline,
329
- optional,
330
- noErrorMessage,
331
- arrow,
332
- ...rest
333
- }, ref) => {
334
- const list = useMemo(() => options.map((item) => typeof item === "string" ? /* @__PURE__ */ jsx("option", { value: item, children: render ? render(item) : item }, item) : /* @__PURE__ */ jsx("option", { value: item.id, children: render ? render(item.name) : item.name }, item.id)), [options, render]);
335
- return /* @__PURE__ */ jsxs(InputWrapper$1, { className, inputSize, outline, error: !!error, disabled: rest.disabled, children: [
336
- /* @__PURE__ */ jsxs("select", { ...rest, ref, children: [
337
- placeholder && /* @__PURE__ */ jsx("option", { value: "", disabled: !optional, children: placeholder }),
338
- list
339
- ] }),
340
- arrow || /* @__PURE__ */ jsx(ChevronDown, {}),
341
- /* @__PURE__ */ jsx(HelpMessage, { help, error, noErrorMessage })
342
- ] });
343
- });
344
- Select.displayName = "Select";
345
- const Select$1 = Select;
346
- function shouldForwardProp$7(name) {
347
- return name !== "error" && name !== "disabled" && name !== "inputSize" && name !== "outline";
348
- }
349
- const InputWrapper$1 = /* @__PURE__ */ styled.span.withConfig({
350
- shouldForwardProp: shouldForwardProp$7
351
- }).withConfig({
352
- displayName: "Select__InputWrapper",
353
- componentId: "sc-gevlx8-0"
354
- })(["position:relative;display:block;select{display:block;cursor:pointer;appearance:none;outline:none;max-width:100%;width:100%;height:100%;background-color:transparent;padding:", ";padding-right:1.85rem;text-align:left;color:inherit;", " border:1px solid ", ";", " will-change:box-shadow;transition-property:box-shadow;transition-duration:150ms;transition-timing-function:ease-in-out;&:hover{border-color:", ";}&:focus{border-color:", ";box-shadow:", ";}&::-ms-expand{display:none;}&:-moz-focusring{color:transparent;text-shadow:0 0 0 #000;}&:invalid{color:", ";}}svg{position:absolute;right:0.75rem;top:50%;transform:translateY(-50%);color:", ";}select:hover + svg{color:", ";}", ""], ({
355
- theme
356
- }) => theme.formPadding, ({
357
- inputSize
358
- }) => setSize("font-size", inputSize), ({
359
- error,
360
- theme
361
- }) => error ? theme.danger : theme.border, ({
362
- outline,
363
- theme
364
- }) => outline ? css(["border-radius:", ";"], theme.radius) : css(["border-width:0;border-radius:0;border-bottom-width:1px;"]), ({
365
- theme
366
- }) => theme.borderHover, ({
367
- error,
368
- theme
369
- }) => error ? theme.danger : theme.primary, ({
370
- theme,
371
- outline,
372
- error
373
- }) => outline ? `0 0 0 0.1em ${error ? theme.danger : theme.primary}` : `0 0.1em ${error ? theme.danger : theme.primary}`, ({
374
- theme
375
- }) => theme.placeholder, ({
376
- theme
377
- }) => theme.border, ({
378
- theme
379
- }) => theme.borderHover, ({
380
- disabled,
381
- theme
382
- }) => disabled ? css(["select{", " border-style:dashed;}svg{display:none;}"], disabledColor(theme)) : void 0);
383
-
384
- const Radio = forwardRef(({
385
- className,
386
- style,
387
- children,
388
- ...rest
389
- }, ref) => {
390
- const id = `radio_${rest.name}_${rest.value}`;
391
- const innerClass = useMemo(() => {
392
- const arr = [];
393
- if (rest.checked)
394
- arr.push("checked");
395
- if (rest.disabled)
396
- arr.push("disabled");
397
- return arr.join(" ");
398
- }, [rest.checked, rest.disabled]);
399
- return /* @__PURE__ */ jsxs(Wrapper$3, { className, style, children: [
400
- /* @__PURE__ */ jsxs("label", { htmlFor: id, children: [
401
- /* @__PURE__ */ jsx(Shape, { className: innerClass, children: /* @__PURE__ */ jsx("i", {}) }),
402
- children
403
- ] }),
404
- /* @__PURE__ */ jsx("input", { id, type: "radio", ...rest, ref })
405
- ] });
406
- });
407
- Radio.displayName = "Radio";
408
- const Radio$1 = Radio;
409
- const Shape = /* @__PURE__ */ styled.div.withConfig({
410
- displayName: "Radio__Shape",
411
- componentId: "sc-13m0vd4-0"
412
- })(["display:inline-flex;margin:0.5rem;width:1.25em;height:1.25em;background:transparent;border:0.1em solid ", ";border-radius:50%;justify-content:center;align-items:center;will-change:background-color,border-color;transition-property:background-color,border-color;transition-duration:150ms;transition-timing-function:ease-out;&.checked{border-color:", ";& > i{transform:scale(1);}&.disabled > i{background-color:", ";}}&.disabled{background:", ";border-color:", ";}& > i{display:block;width:0.5em;height:0.5em;background:", ";border:none;transform:scale(0);border-radius:50%;will-change:transform;transition:transform 150ms ease-out;}"], ({
413
- theme
414
- }) => theme.border, ({
415
- theme
416
- }) => theme.primary, ({
417
- theme
418
- }) => transparentize(0.15, theme.textDark), ({
419
- theme
420
- }) => transparentize(0.55, theme.border), ({
421
- theme
422
- }) => theme.border, ({
423
- theme
424
- }) => theme.primary);
425
- const Wrapper$3 = /* @__PURE__ */ styled.span.withConfig({
426
- displayName: "Radio__Wrapper",
427
- componentId: "sc-13m0vd4-1"
428
- })(["display:block;width:auto;label{cursor:pointer;max-width:100%;width:100%;line-height:1.25;margin-right:0.625rem;display:flex;align-items:center;&:hover > div:not(.checked):not(.disabled){border-color:", ";}}input{display:none;}"], ({
429
- theme
430
- }) => theme.borderHover);
431
-
432
- const Switch = forwardRef(({
433
- className,
434
- showLabel,
435
- background,
436
- anchorColor,
437
- onLabel = "ON",
438
- offLabel = "OFF",
439
- ...rest
440
- }, ref) => {
441
- const id = `switch_${rest.name}`;
442
- return /* @__PURE__ */ jsxs(InputWrapper, { className, showLabel, background, anchorColor, labelTextOn: onLabel, labelTextOff: offLabel, disabled: rest.disabled, children: [
443
- /* @__PURE__ */ jsx("input", { id, type: "checkbox", ...rest, ref }),
444
- /* @__PURE__ */ jsx("label", { htmlFor: id, "aria-label": id })
445
- ] });
446
- });
447
- Switch.displayName = "Switch";
448
- const Switch$1 = Switch;
449
- const labelStyle = /* @__PURE__ */ css(["label:before{position:absolute;display:block;content:'", "';top:0.5rem;right:0.6875rem;font-size:0.825rem;line-height:0.825rem;color:", ";}input:checked ~ label:before{content:'", "';right:unset;left:0.6875rem;color:", ";}"], ({
450
- offLabel
451
- }) => offLabel, ({
452
- theme
453
- }) => theme.textLight, ({
454
- onLabel
455
- }) => onLabel, ({
456
- theme
457
- }) => findColorInvert(theme, theme.primary));
458
- function shouldForwardProp$6(name) {
459
- return name !== "labelTextOn" && name !== "labelTextOff" && name !== "anchorColor" && name !== "background" && name !== "showLabel";
460
- }
461
- const InputWrapper = /* @__PURE__ */ styled.span.withConfig({
462
- shouldForwardProp: shouldForwardProp$6
463
- }).withConfig({
464
- displayName: "Switch__InputWrapper",
465
- componentId: "sc-1ljdf1-0"
466
- })(["display:inline-block;cursor:pointer;line-height:1.25;position:relative;input{display:none;}label{position:relative;display:block;height:1.875rem;min-width:5rem;background:transparent;border:1px solid ", ";border-radius:1.25rem;cursor:pointer;will-change:background-color;transition:background-color 300ms ease;box-shadow:inset 0 0.25rem 0.25rem rgba(0,0,0,0.05);&:after{position:absolute;display:block;left:0.375rem;top:0.2rem;width:1.375rem;height:1.375rem;border-radius:100%;background:", ";content:'';text-align:right;border:1px solid ", ";will-change:left;transition:left 300ms ease;box-shadow:0 0 0.375rem rgba(0,0,0,0.1);}}input:checked ~ label{background:", ";box-shadow:inset 0 0.25rem 0.25rem rgba(0,0,0,0.15);&:after{left:calc(100% - 1.75rem);box-shadow:0 0 0.375rem rgba(0,0,0,0.15);}}", " ", ""], ({
467
- theme
468
- }) => theme.border, ({
469
- theme,
470
- anchorColor
471
- }) => anchorColor || theme.white, ({
472
- theme
473
- }) => theme.border, ({
474
- theme,
475
- background
476
- }) => background || theme.primary, ({
477
- showLabel
478
- }) => showLabel ? labelStyle : void 0, ({
479
- disabled,
480
- theme
481
- }) => disabled ? css(["cursor:default;label{", " &:after{background:", ";}}input:checked ~ label{background:", ";}"], disabledColor(theme), theme.disabled, theme.grey) : void 0);
482
-
483
- function Accordion({
484
- header,
485
- show,
486
- children,
487
- timeout = 300,
488
- ...rest
489
- }) {
490
- const ref = useRef(null);
491
- const prevHeight = useRef(0);
492
- const timeoutRef = useRef(0);
493
- const init = useRef(true);
494
- useEffect(() => {
495
- timeoutRef.current = timeout;
496
- }, [timeout]);
497
- useIsomorphicLayoutEffect(() => {
498
- if (!ref.current)
499
- return;
500
- ref.current.style.overflow = "hidden";
501
- ref.current.style.opacity = "1";
502
- if (init.current) {
503
- init.current = false;
504
- ref.current.style.height = show ? "auto" : "0px";
505
- if (show) {
506
- requestAnimationFrame(() => {
507
- if (ref.current) {
508
- prevHeight.current = ref.current.offsetHeight;
509
- }
510
- });
511
- } else {
512
- requestAnimationFrame(() => {
513
- if (ref.current) {
514
- ref.current.style.height = "auto";
515
- prevHeight.current = ref.current.offsetHeight;
516
- ref.current.style.height = "0px";
517
- }
518
- });
519
- ref.current.style.opacity = "0";
520
- }
521
- return;
522
- }
523
- if (!show) {
524
- ref.current.style.height = `${prevHeight.current}px`;
525
- }
526
- const frameIds = [];
527
- frameIds[0] = requestAnimationFrame(() => {
528
- frameIds[1] = requestAnimationFrame(() => {
529
- if (!ref.current)
530
- return;
531
- ref.current.style.height = `${show ? prevHeight.current : 0}px`;
532
- ref.current.style.opacity = show ? "1" : "0";
533
- });
534
- });
535
- const timeoutId = setTimeout(() => {
536
- if (!ref.current)
537
- return;
538
- if (show) {
539
- ref.current.style.height = "auto";
540
- ref.current.style.overflow = "";
541
- ref.current.style.opacity = "";
542
- requestAnimationFrame(() => {
543
- if (ref.current) {
544
- prevHeight.current = ref.current.offsetHeight;
545
- }
546
- });
547
- } else {
548
- ref.current.style.height = "0px";
549
- }
550
- }, timeoutRef.current);
551
- return () => {
552
- frameIds.forEach(cancelAnimationFrame);
553
- clearTimeout(timeoutId);
554
- };
555
- }, [show]);
556
- return /* @__PURE__ */ jsxs("div", { ...rest, children: [
557
- header,
558
- /* @__PURE__ */ jsx(AnimatedContent, { "aria-hidden": !show, ref, style: {
559
- transitionDuration: `${timeout}ms`
560
- }, children })
561
- ] });
562
- }
563
- const AnimatedContent = /* @__PURE__ */ styled.div.withConfig({
564
- displayName: "Accordion__AnimatedContent",
565
- componentId: "sc-1yjowun-0"
566
- })(["will-change:opacity,height,transform;transition-property:opacity,height,transform;transition-timing-function:ease-in-out;"]);
567
-
568
- function setAlign({
569
- align
570
- }) {
571
- switch (align) {
572
- case "left":
573
- return "flex-start";
574
- case "right":
575
- return "flex-end";
576
- case "center":
577
- return "center";
578
- default:
579
- return "space-evenly";
580
- }
581
- }
582
-
583
- function AppBar({
584
- children,
585
- align,
586
- brand,
587
- ...rest
588
- }) {
589
- const [show, setShow] = useState(false);
590
- const toggleMenu = () => setShow(!show);
591
- return /* @__PURE__ */ jsx(NavBar, { role: "navigation", ...rest, children: /* @__PURE__ */ jsxs("nav", { children: [
592
- brand,
593
- children && /* @__PURE__ */ jsxs(Burger, { className: show ? "active" : void 0, onClick: toggleMenu, children: [
594
- /* @__PURE__ */ jsx("span", {}),
595
- /* @__PURE__ */ jsx("span", {}),
596
- /* @__PURE__ */ jsx("span", {})
597
- ] }),
598
- /* @__PURE__ */ jsx(NavContent, { className: show ? "active" : void 0, align, children })
599
- ] }) });
600
- }
601
- function setColor$1({
602
- color,
603
- theme,
604
- backdrop
605
- }) {
606
- const backgroundColor = color ? theme[color] : "transparent";
607
- const textColor = findColorInvert(theme, backgroundColor === "transparent" ? theme.background : backgroundColor);
608
- if (backdrop) {
609
- const backColor = transparentize(0.2, backgroundColor === "transparent" ? theme.white : backgroundColor);
610
- return css(["background-color:", ";color:", ";"], backColor, textColor);
611
- }
612
- return css(["background-color:", ";color:", ";"], backgroundColor, textColor);
613
- }
614
- const NavBar = /* @__PURE__ */ styled.header.withConfig({
615
- displayName: "AppBar__NavBar",
616
- componentId: "sc-t8gqca-0"
617
- })(["position:", ";display:flex;top:-1px;min-height:3.25rem;width:100%;z-index:30;padding:", ";& > nav{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;flex:1 0 auto;}", " a{color:inherit;}", "{padding:", ";}"], ({
618
- fixed,
619
- sticky
620
- }) => {
621
- if (sticky)
622
- return "sticky";
623
- if (fixed)
624
- return "fixed";
625
- return "relative";
626
- }, ({
627
- fluid
628
- }) => fluid ? "0 0.75rem" : "0 5%", setColor$1, mediaTablet, ({
629
- fluid
630
- }) => fluid ? "0 0.5rem" : "0 3%");
631
- const Burger = /* @__PURE__ */ styled.button.withConfig({
632
- displayName: "AppBar__Burger",
633
- componentId: "sc-t8gqca-1"
634
- })(["", " display:none;margin-left:auto;border:none;background-color:transparent;color:inherit;outline:none;&:hover{background-color:rgba(0,0,0,.05);}", "{display:block;}"], hamburger("3.25rem"), mediaMobile);
635
- const NavContent = /* @__PURE__ */ styled.div.withConfig({
636
- displayName: "AppBar__NavContent",
637
- componentId: "sc-t8gqca-2"
638
- })(["display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-basis:auto;flex-grow:1;height:100%;& > ul{display:flex;flex-direction:row;list-style:none;flex-grow:1;flex-basis:100%;height:inherit;align-items:center;justify-content:", ";li{padding:0.85rem;}}& > div,& > span,& > form{display:flex;", "}", "{width:100%;flex-direction:column;align-items:flex-start;height:auto;padding-bottom:0.5rem;&:not(.active){display:none;}& > ul{flex-direction:column;align-items:flex-start;width:100%;flex-basis:auto;li{padding:.5rem 0;}}& > div,& > span,& > form{padding:.5rem 0;width:100%;}}"], setAlign, ({
639
- color
640
- }) => color ? `color: ${color};` : "", mediaMobile);
641
-
642
- const Portal = React.forwardRef(({
643
- children,
644
- container,
645
- disabled
646
- }, ref) => {
647
- const [mountNode, setMountNode] = useState(null);
648
- useIsomorphicLayoutEffect(() => {
649
- if (disabled) {
650
- setMountNode(null);
651
- return;
652
- }
653
- if (!container) {
654
- let dom = document.getElementById("visits-style-portals");
655
- if (!dom) {
656
- dom = document.createElement("div");
657
- dom.id = "visits-style-portals";
658
- document.body.appendChild(dom);
659
- }
660
- setMountNode(dom);
661
- return;
662
- }
663
- setMountNode(container);
664
- }, [container, disabled]);
665
- return mountNode ? createPortal(children, mountNode) : null;
666
- });
667
- Portal.displayName = "Portal";
668
- const Portal$1 = Portal;
669
-
670
- const Tooltip$1 = forwardRef(({
671
- children,
672
- position = "bottom",
673
- label,
674
- color,
675
- className = "",
676
- offset: offset$1 = {
677
- x: 0,
678
- y: 6
679
- },
680
- clientPoint = false,
681
- disabled
682
- }, ref) => {
683
- const [open, setOpen] = useState(false);
684
- const nodeId = useId();
685
- const {
686
- refs,
687
- floatingStyles,
688
- context
689
- } = useFloating({
690
- nodeId,
691
- open,
692
- placement: position,
693
- middleware: [shift(), flip(), offset({
694
- mainAxis: offset$1.y,
695
- crossAxis: offset$1.x
696
- })],
697
- whileElementsMounted: disabled ? void 0 : autoUpdate,
698
- onOpenChange: setOpen
699
- });
700
- const {
701
- getReferenceProps,
702
- getFloatingProps
703
- } = useInteractions([useHover(context, {
704
- enabled: !disabled
705
- }), useClientPoint(context, {
706
- enabled: clientPoint
707
- })]);
708
- useImperativeHandle(ref, () => ({
709
- floating: refs.floating,
710
- reference: refs.reference,
711
- open: () => setOpen(true),
712
- close: () => setOpen(false)
713
- }));
714
- const child = typeof children === "string" ? /* @__PURE__ */ jsx("span", { children }) : children;
715
- return /* @__PURE__ */ jsxs(Fragment, { children: [
716
- cloneElement(Children.only(child), {
717
- ref: refs.setReference,
718
- ...getReferenceProps()
719
- }),
720
- /* @__PURE__ */ jsx(Portal$1, { children: open && !disabled ? /* @__PURE__ */ jsx(TooltipWrapper, { className, ref: refs.setFloating, role: "tooltip", $color: color, style: floatingStyles, ...getFloatingProps(), children: label }) : null })
721
- ] });
722
- });
723
- const Tooltip$2 = Tooltip$1;
724
- const TooltipWrapper = /* @__PURE__ */ styled.div.withConfig({
725
- displayName: "Tooltip__TooltipWrapper",
726
- componentId: "sc-1xyhucq-0"
727
- })(["position:relative;box-shadow:0 1px 2px 0 rgba(0,0,0,0.05);z-index:9999;padding:0.375rem 0.625rem;cursor:default;white-space:pre;font-size:0.85rem;z-index:9999;background-color:", ";&:focus{outline:none;}"], ({
728
- $color,
729
- theme
730
- }) => $color ? theme[$color] || theme.background : theme.background);
731
-
732
- const Box = styled.div.withConfig({
733
- shouldForwardProp: (name) => name !== "color" && name !== "borderless"
734
- }).withConfig({
735
- displayName: "Box",
736
- componentId: "sc-kc6ybp-0"
737
- })(["position:relative;display:flex;flex-direction:column;border:", ";border-radius:", ";width:100%;min-width:0;word-wrap:break-word;", ""], ({
738
- borderless,
739
- theme
740
- }) => borderless ? "none" : `1px solid ${theme.border}`, ({
741
- theme
742
- }) => theme.radius, ({
743
- color,
744
- theme
745
- }) => {
746
- if (!color)
747
- return void 0;
748
- const target = theme[color] || color;
749
- const invertColor = findColorInvert(theme, target);
750
- return {
751
- backgroundColor: target,
752
- color: invertColor
753
- };
754
- });
755
-
756
- function stopPropagation$1(e) {
757
- if (!e)
758
- return;
759
- e.stopPropagation();
760
- e.preventDefault();
761
- }
762
-
763
- const Popover = forwardRef(({
764
- position,
765
- label,
766
- children,
767
- color = "background",
768
- onOpen,
769
- onClose,
770
- disabled,
771
- offset: offset$1 = {
772
- x: 0,
773
- y: 6
774
- },
775
- onManualClose,
776
- zIndex = 9996,
777
- ...rest
778
- }, ref) => {
779
- const [open, setOpen] = useState(false);
780
- const nodeId = useId();
781
- const openRef = useRef(onOpen);
782
- const closeRef = useRef(onClose);
783
- const {
784
- refs,
785
- floatingStyles,
786
- context
787
- } = useFloating({
788
- nodeId,
789
- placement: position,
790
- middleware: [shift(), flip({
791
- fallbackAxisSideDirection: "end"
792
- }), offset({
793
- mainAxis: offset$1.y,
794
- crossAxis: offset$1.x
795
- })],
796
- open,
797
- onOpenChange: (value) => {
798
- if (value) {
799
- openRef.current?.(refs.reference.current, refs.floating.current);
800
- } else {
801
- closeRef.current?.(refs.reference.current, refs.floating.current);
802
- }
803
- setOpen(value);
804
- },
805
- whileElementsMounted: autoUpdate
806
- });
807
- const handleBlur = useCallback((e) => {
808
- stopPropagation$1(e);
809
- if (onManualClose)
810
- return onManualClose();
811
- setOpen(false);
812
- closeRef.current?.(refs.reference.current, refs.floating.current);
813
- }, [onManualClose]);
814
- useEffect(() => {
815
- if (disabled && open) {
816
- setOpen(false);
817
- }
818
- }, [disabled, open]);
819
- useImperativeHandle(ref, () => ({
820
- open: () => {
821
- setOpen(true);
822
- openRef.current?.(refs.reference.current, refs.floating.current);
823
- },
824
- close: () => {
825
- setOpen(false);
826
- closeRef.current?.(refs.reference.current, refs.floating.current);
827
- }
828
- // eslint-disable-next-line react-hooks/exhaustive-deps
829
- }), []);
830
- const {
831
- getFloatingProps,
832
- getReferenceProps
833
- } = useInteractions([useClick(context, {
834
- enabled: !disabled
835
- })]);
836
- openRef.current = onOpen;
837
- closeRef.current = onClose;
838
- return /* @__PURE__ */ jsxs(Fragment, { children: [
839
- cloneElement(Children.only(label), getReferenceProps({
840
- ref: refs.setReference,
841
- tabIndex: 0,
842
- role: "button",
843
- disabled,
844
- onClick: stopPropagation$1
845
- })),
846
- /* @__PURE__ */ jsx(Portal$1, { children: open && !disabled ? /* @__PURE__ */ jsx(FloatingOverlay, { "data-testid": "visits-style-shadow", onClick: handleBlur, style: {
847
- zIndex
848
- }, children: /* @__PURE__ */ jsx(Tooltip, { role: "tooltip", ref: refs.setFloating, color, style: floatingStyles, ...getFloatingProps({
849
- ...rest,
850
- onClick: stopPropagation$1
851
- }), children }) }) : null })
852
- ] });
853
- });
854
- Popover.displayName = "Popover";
855
- const Popover$1 = Popover;
856
- const Tooltip = /* @__PURE__ */ styled(Box).withConfig({
857
- displayName: "Popover__Tooltip",
858
- componentId: "sc-1huajr8-0"
859
- })(["display:flex;box-shadow:0 1px 2px 0 rgba(0,0,0,0.05);padding:0.5rem 0;width:auto;height:auto;cursor:auto;z-index:20;"]);
860
-
861
- function stopPropagation(e) {
862
- if (!e)
863
- return;
864
- e.stopPropagation();
865
- }
866
- function Modal({
867
- show,
868
- children,
869
- timeout = 200,
870
- padding = "0.85rem",
871
- verticalAlign = "center",
872
- closeModal,
873
- closeOnOverlay,
874
- closeOnEsc,
875
- onExited,
876
- ...rest
877
- }) {
878
- const exitRef = useRef(onExited);
879
- const isTransMountedRef = useRef(false);
880
- const id = useId();
881
- const {
882
- refs,
883
- context
884
- } = useFloating({
885
- open: show,
886
- onOpenChange: closeModal,
887
- nodeId: id
888
- });
889
- const {
890
- getFloatingProps
891
- } = useInteractions([useDismiss(context, {
892
- enabled: closeOnEsc,
893
- outsidePress: false,
894
- escapeKey: closeOnEsc
895
- })]);
896
- const {
897
- isMounted,
898
- styles
899
- } = useTransitionStyles(context, {
900
- duration: timeout,
901
- initial: {
902
- opacity: 0,
903
- transform: "scale(0.8)"
904
- }
905
- });
906
- useEffect(() => {
907
- if (isTransMountedRef.current === isMounted)
908
- return;
909
- isTransMountedRef.current = isMounted;
910
- if (isMounted)
911
- return;
912
- exitRef.current?.();
913
- }, [isMounted]);
914
- const handleOverlayClose = (e) => {
915
- if (!closeOnOverlay)
916
- return;
917
- closeModal?.();
918
- };
919
- exitRef.current = onExited;
920
- return /* @__PURE__ */ jsx(Portal$1, { children: isMounted ? /* @__PURE__ */ jsx(Overlay, { lockScroll: true, "data-testid": "vs-modal-overlay", onClick: handleOverlayClose, style: {
921
- padding
922
- }, $verticalAlign: verticalAlign, children: /* @__PURE__ */ jsx(Wrapper$2, { ref: refs.setFloating, role: "dialog", ...getFloatingProps({
923
- ...rest,
924
- style: styles,
925
- onClick: stopPropagation
926
- }), children }) }) : null });
927
- }
928
- const Overlay = /* @__PURE__ */ styled(FloatingOverlay).withConfig({
929
- displayName: "Modal__Overlay",
930
- componentId: "sc-pb7lhx-0"
931
- })([" display:flex;display:grid;place-items:", ";align-items:", ";justify-content:center;background:", ";z-index:9997;"], ({
932
- $verticalAlign
933
- }) => {
934
- if ($verticalAlign === "start")
935
- return "flex-start";
936
- if ($verticalAlign === "end")
937
- return "flex-end";
938
- return "center";
939
- }, ({
940
- $verticalAlign
941
- }) => {
942
- if ($verticalAlign === "start")
943
- return "flex-start";
944
- if ($verticalAlign === "end")
945
- return "flex-end";
946
- return "center";
947
- }, ({
948
- theme
949
- }) => theme.backdrop);
950
- const Wrapper$2 = /* @__PURE__ */ styled.div.withConfig({
951
- displayName: "Modal__Wrapper",
952
- componentId: "sc-pb7lhx-1"
953
- })(["will-change:transform,opacity;transform-origin:center top;transition-timing-function:cubic-bezier(0.645,0.045,0.355,1);z-index:9999;"]);
954
-
955
- function ToastItem({
956
- className,
957
- message,
958
- duration = 5e3,
959
- clear,
960
- id,
961
- clearOnClick
962
- }) {
963
- const clearRef = useRef(clear);
964
- const isPrevMountedRef = useRef(false);
965
- const [open, setOpen] = useState(false);
966
- const {
967
- context,
968
- refs
969
- } = useFloating({
970
- open,
971
- onOpenChange: setOpen,
972
- nodeId: id
973
- });
974
- const {
975
- isMounted,
976
- styles
977
- } = useTransitionStyles(context, {
978
- duration: 250,
979
- initial: {
980
- opacity: 0,
981
- transform: "scale(0.8)"
982
- }
983
- });
984
- useEffect(() => setOpen(true), [id]);
985
- useEffect(() => {
986
- if (isPrevMountedRef.current === isMounted)
987
- return;
988
- if (!isMounted) {
989
- clearRef.current?.(id);
990
- }
991
- isPrevMountedRef.current = isMounted;
992
- }, [isMounted, id]);
993
- useEffect(() => {
994
- if (!duration)
995
- return;
996
- const timeout = setTimeout(() => setOpen(false), duration);
997
- return () => clearTimeout(timeout);
998
- }, [duration]);
999
- const handleClickToast = useCallback(() => {
1000
- if (!clearOnClick)
1001
- return;
1002
- setOpen(false);
1003
- }, [clearOnClick]);
1004
- clearRef.current = clear;
1005
- if (!isMounted)
1006
- return null;
1007
- return /* @__PURE__ */ jsx(Item, { ref: refs.setFloating, role: "status", "data-testid": "vs-toast-item", className, style: styles, onClick: handleClickToast, children: message });
1008
- }
1009
- const Item = /* @__PURE__ */ styled.li.withConfig({
1010
- displayName: "ToastItem__Item",
1011
- componentId: "sc-193rp7r-0"
1012
- })(["position:relative;display:flex;width:fit-content;padding:0.375em 0.75em;max-width:100%;transition-timing-function:cubic-bezier(0.645,0.045,0.355,1);"]);
1013
-
1014
- function Toast({
1015
- toasts,
1016
- clear,
1017
- fixed,
1018
- margin = "16px",
1019
- position = "top-left",
1020
- space = "16px"
1021
- }) {
1022
- const style = useMemo(() => {
1023
- const base = {
1024
- position: fixed ? "fixed" : "absolute"
1025
- };
1026
- if (position.indexOf("top") > -1) {
1027
- base.top = margin;
1028
- } else if (position.indexOf("bottom") > -1) {
1029
- base.bottom = margin;
1030
- }
1031
- if (position.indexOf("left") > -1) {
1032
- base.left = margin;
1033
- base.alignItems = "flex-start";
1034
- } else if (position.indexOf("right") > -1) {
1035
- base.right = margin;
1036
- base.alignItems = "flex-end";
1037
- } else {
1038
- base.left = "50%";
1039
- base.alignItems = "center";
1040
- base.transform = "translateX(-50%)";
1041
- }
1042
- return base;
1043
- }, [fixed, margin, position]);
1044
- return /* @__PURE__ */ jsx(Portal$1, { children: /* @__PURE__ */ jsx(ToastList, { style, $space: space, children: toasts.map((props) => /* @__PURE__ */ createElement(ToastItem, { ...props, key: props.id, clear })) }) });
1045
- }
1046
- const ToastList = /* @__PURE__ */ styled.ul.withConfig({
1047
- displayName: "Toast__ToastList",
1048
- componentId: "sc-8192b2-0"
1049
- })(["display:flex;flex-direction:column;z-index:9999;overflow:hidden;li + li{margin-top:", ";}"], ({
1050
- $space
1051
- }) => $space);
1052
-
1053
- function getColor$1({
1054
- theme,
1055
- color
1056
- }) {
1057
- const value = !color || color === "light" ? theme.background : theme[color];
1058
- return css(["border-color:", ";border-right-color:", ";border-top-color:", ";"], value, theme.border, theme.border);
1059
- }
1060
- const spin = /* @__PURE__ */ keyframes(["from{transform:rotate(0deg);}to{transform:rotate(359deg);}"]);
1061
- function shouldForwardProp$5(name) {
1062
- return name !== "color" && name !== "size" && name !== "borderSize";
1063
- }
1064
- const Spinner = /* @__PURE__ */ styled.div.withConfig({
1065
- shouldForwardProp: shouldForwardProp$5
1066
- }).withConfig({
1067
- displayName: "Spinner",
1068
- componentId: "sc-34g0il-0"
1069
- })(["display:inline-block;width:", ";height:", ";margin:0;padding:0;position:relative;&:after{display:block;top:0;left:0;animation:", " 750ms infinite linear;border:", " solid;border-radius:100%;", ' content:"";height:100%;width:100%;position:absolute;}'], ({
1070
- size
1071
- }) => size || "100%", ({
1072
- size
1073
- }) => size || "100%", spin, ({
1074
- borderSize
1075
- }) => borderSize, getColor$1);
1076
- Spinner.defaultProps = {
1077
- borderSize: "2px"
1078
- };
1079
- const Spinner$1 = Spinner;
1080
-
1081
- function setGap(width, gap) {
1082
- return parseInt(width.replace("px", ""), 10) - 2 * gap;
1083
- }
1084
- function setResponsive({
1085
- fluid
1086
- }) {
1087
- if (fluid) {
1088
- return css(["padding-right:0.75rem;padding-left:0.75rem;", "{padding-right:0.5rem;padding-left:0.5rem;}"], mediaTablet);
1089
- }
1090
- return css(["margin-right:auto;margin-left:auto;", "{max-width:", "px;}", "{max-width:", "px;}", "{max-width:", "px;}", "{max-width:", "px;}"], mediaUntilFullHD, ({
1091
- theme
1092
- }) => setGap(theme.media.fullhd, theme.gutter), mediaDesktop, ({
1093
- theme
1094
- }) => setGap(theme.media.desktop, theme.gutter), mediaTablet, ({
1095
- theme
1096
- }) => setGap(theme.media.tablet, theme.smallGutter), mediaMobile, ({
1097
- theme
1098
- }) => setGap(theme.media.mobile, theme.smallGutter));
1099
- }
1100
- const Container = styled.div.withConfig({
1101
- shouldForwardProp: (name) => name !== "fluid"
1102
- }).withConfig({
1103
- displayName: "Container",
1104
- componentId: "sc-1308ay5-0"
1105
- })(["position:relative;width:100%;", ""], setResponsive);
1106
-
1107
- const Row = styled.div.withConfig({
1108
- displayName: "Row",
1109
- componentId: "sc-1qqbtdw-0"
1110
- })(["display:flex;flex:0 1 auto;flex-direction:row;flex-wrap:wrap;margin:-", "px;padding:", "px;", "{margin:-", "px;padding:", "px;}"], ({
1111
- theme
1112
- }) => theme.gutter / 2, ({
1113
- theme
1114
- }) => theme.gutter / 2, mediaTablet, ({
1115
- theme
1116
- }) => theme.smallGutter / 2, ({
1117
- theme
1118
- }) => theme.smallGutter / 2);
1119
-
1120
- const sizes = ["auto", "8.3333333%", "16.666667%", "25%", "33.333333%", "41.666667%", "50%", "58.333333%", "66.666667%", "75%", "83.333333%", "91.666667%", "100%"];
1121
- function setAutoSize({
1122
- size,
1123
- auto
1124
- }) {
1125
- if (!auto || !size)
1126
- return void 0;
1127
- const mobileSize = size >= 4 ? sizes[12] : sizes[Math.round(size * 3)];
1128
- const desktopSize = size >= 8 ? sizes[12] : sizes[Math.round(size * 1.5)];
1129
- return css(["", "{flex-basis:", ";max-width:", ";}", "{flex-basis:", ";max-width:", ";}"], mediaDesktop, desktopSize, desktopSize, mediaMobile, mobileSize, mobileSize);
1130
- }
1131
- function shouldForwardProp$4(name) {
1132
- return name !== "size" && name !== "offset" && name !== "auto";
1133
- }
1134
- const Col = /* @__PURE__ */ styled.div.withConfig({
1135
- shouldForwardProp: shouldForwardProp$4
1136
- }).withConfig({
1137
- displayName: "Col",
1138
- componentId: "sc-16i9d04-0"
1139
- })(["display:flex;flex:0 0 auto;flex-direction:row;flex-wrap:wrap;padding:", "px;", " ", " ", "{padding:", "px;}", ""], ({
1140
- theme
1141
- }) => theme.gutter / 2, ({
1142
- size
1143
- }) => size ? {
1144
- flexBasis: sizes[size],
1145
- maxWidth: sizes[size]
1146
- } : {
1147
- flexGrow: 1,
1148
- flexBasis: 0,
1149
- maxWidth: "100%"
1150
- }, ({
1151
- offset
1152
- }) => offset ? {
1153
- marginLeft: sizes[offset]
1154
- } : void 0, mediaTablet, ({
1155
- theme
1156
- }) => theme.smallGutter / 2, setAutoSize);
1157
- Col.defaultProps = {
1158
- size: 0,
1159
- offset: 0
1160
- };
1161
- const Col$1 = Col;
1162
-
1163
- const index$3 = styled.div.withConfig({
1164
- displayName: "Content",
1165
- componentId: "sc-180oh4h-0"
1166
- })(["color:", ";line-height:1.5;li + li{margin-top:0.25em;}p,dl,ol,ul,blockquote,pre,table{&:not(:last-child){margin-bottom:1em;}}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.125;}h1{font-size:2rem;margin-bottom:0.5em;}h2{font-size:1.75em;margin-bottom:0.5714em;&:not(:first-child){margin-top:1.1428em;}}h3{font-size:1.5em;margin-bottom:0.6666em;&:not(:first-child){margin-top:1.3333em;}}h4{font-size:1.25em;margin-bottom:0.8em;}h5{font-size:1.125em;margin-bottom:0.8888em;}h6{font-size:1em;margin-bottom:1em;}ol{list-style:decimal outside;margin-left:2em;margin-top:1em;}ul{list-style:disc outside;margin-left:2em;margin-top:1em;ul{list-style-type:circle;margin-top:0.5em;ul{list-style-type:square;}}}dd{margin-left:2em;}table{width:100%;td,th{border:1px solid ", ";border-width:0 0 1px;padding:0.5em 0.75em;vertical-align:top;}th{color:", ";text-align:left;}thead{td,th{border-width:0 0 2px;color:", ";}}tfoot{td,th{border-width:2px 0 0;color:", ";}}tbody > tr:last-child{td,th{border-bottom-width:0;}}}"], ({
1167
- theme
1168
- }) => theme.text, ({
1169
- theme
1170
- }) => theme.border, ({
1171
- theme
1172
- }) => theme.text, ({
1173
- theme
1174
- }) => theme.text, ({
1175
- theme
1176
- }) => theme.text);
1177
-
1178
- const setAnimation = ({
1179
- theme
1180
- }) => keyframes(["0%{background-color:", ";}50%{background-color:", ";}100%{background-color:", ";}"], theme.greyLighter, theme.grey, theme.greyLighter);
1181
- const index$2 = styled.span.withConfig({
1182
- displayName: "Placeholder",
1183
- componentId: "sc-1091c0n-0"
1184
- })(["display:inline-block;height:1rem;width:100%;animation:", " 3.5s ease infinite;border-radius:", ";opacity:0.125;"], setAnimation, ({
1185
- theme
1186
- }) => theme.radius);
1187
-
1188
- function setColor({
1189
- theme,
1190
- color,
1191
- outline,
1192
- disabled
1193
- }) {
1194
- if (disabled) {
1195
- return disabledColor(theme);
1196
- }
1197
- if (!color) {
1198
- return css(["border-color:", ";color:", ";&:hover{border-color:", ";}&:active{border-color:", ";}"], theme.border, theme.text, theme.borderHover, theme.borderActive);
1199
- }
1200
- const target = theme[color] || color;
1201
- const invertColor = findColorInvert(theme, target);
1202
- if (outline) {
1203
- return css(["background-color:transparent;border-color:", ";color:", ";&:hover{background-color:", ";color:", ";}&:active{background-color:", ";}&:focus:not(:active){", "}"], target, target, target, invertColor, darken(0.1, target), boxShadow("0.1rem", target, 0.5));
1204
- }
1205
- return css(["background-color:", ";border-color:transparent;color:", ";box-shadow:none;&:hover{color:", ";background-color:", ";}&:active{background-color:", ";}&:focus:not(:active){", "}"], target, invertColor, invertColor, darken(0.05, target), darken(0.1, target), boxShadow("0.1rem", target, 0.5));
1206
- }
1207
- function shouldForwardProp$3(name) {
1208
- return name !== "color" && name !== "size" && name !== "outline" && name !== "round" && name !== "icon";
1209
- }
1210
- const Button = styled.button.withConfig({
1211
- shouldForwardProp: shouldForwardProp$3
1212
- }).withConfig({
1213
- displayName: "Button",
1214
- componentId: "sc-f6cc58-0"
1215
- })(["position:relative;outline:none;appearance:none;box-sizing:border-box;display:inline-block;text-align:center;white-space:nowrap;cursor:pointer;justify-content:center;vertical-align:middle;user-select:none;background:transparent;border:1px solid transparent;border-radius:", ";padding:", ";line-height:", ";", " ", ""], ({
1216
- round,
1217
- theme
1218
- }) => round ? "2456189px" : theme.radius, ({
1219
- icon
1220
- }) => icon ? "0.375em" : "0.375em 0.75em", ({
1221
- icon
1222
- }) => icon ? 1 : 1.5, setColor, ({
1223
- size
1224
- }) => setSize("font-size", size));
1225
-
1226
- function shouldForwardProp$2(name) {
1227
- return name !== "color" && name !== "size" && name !== "pure" && name !== "underline" && name !== "round" && name !== "icon";
1228
- }
1229
- const TextButton = styled.button.withConfig({
1230
- shouldForwardProp: shouldForwardProp$2
1231
- }).withConfig({
1232
- displayName: "TextButton",
1233
- componentId: "sc-14wzat7-0"
1234
- })(["background-color:transparent;border:none;cursor:pointer;display:inline;margin:0;border-radius:", ";padding:", ";line-height:", ";color:", ";", " &:hover,&:focus{", " ", "}&:focus,&:active{outline:none;}&:active{", "}", ""], ({
1235
- round,
1236
- theme
1237
- }) => round ? "2456189px" : theme.radius, ({
1238
- pure,
1239
- icon
1240
- }) => {
1241
- if (pure)
1242
- return "0";
1243
- if (icon)
1244
- return "0.375em";
1245
- return "0.375em 0.75em";
1246
- }, ({
1247
- icon
1248
- }) => icon ? 1 : 1.5, ({
1249
- color,
1250
- theme
1251
- }) => color ? theme[color] : theme.text, ({
1252
- size
1253
- }) => setSize("font-size", size), ({
1254
- underline
1255
- }) => underline ? {
1256
- textDecoration: "underline"
1257
- } : void 0, ({
1258
- pure,
1259
- theme,
1260
- color
1261
- }) => pure ? void 0 : {
1262
- background: transparentize(0.9, color ? theme[color] || theme.text : theme.text)
1263
- }, ({
1264
- pure,
1265
- theme,
1266
- color
1267
- }) => pure ? void 0 : {
1268
- background: transparentize(0.8, color ? theme[color] || theme.text : theme.text)
1269
- }, ({
1270
- disabled,
1271
- theme
1272
- }) => disabled ? css(["color:", ";cursor:default;&:hover{background:transparent;text-decoration:none;}"], transparentize(0.75, theme.textDark)) : void 0);
1273
-
1274
- const ButtonGroup = styled.div.withConfig({
1275
- displayName: "ButtonGroup",
1276
- componentId: "sc-b4d11t-0"
1277
- })(["display:inline-block;&:not(:last-child){margin-right:0.5rem;}", "{margin:0;border-radius:0;&:hover{z-index:1;}&:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px;}&:not(:first-child){margin-left:-1px;}&:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px;}}"], Button);
1278
-
1279
- const stripedStyle = /* @__PURE__ */ css(["tbody > tr:nth-child(odd){background-color:rgba(0,0,0,0.02);}"]);
1280
- const hoverStyle = /* @__PURE__ */ css(["tbody > tr:hover{background-color:rgba(0,0,0,0.04);}"]);
1281
- function shouldForwardProp$1(name) {
1282
- return name !== "size" && name !== "full" && name !== "headerStyle" && name !== "bordered" && name !== "striped" && name !== "hover";
1283
- }
1284
- const index$1 = styled.table.withConfig({
1285
- shouldForwardProp: shouldForwardProp$1
1286
- }).withConfig({
1287
- displayName: "Table",
1288
- componentId: "sc-1x2nuaf-0"
1289
- })(["", " max-width:100%;margin-bottom:1rem;background-color:transparent;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;td,th{vertical-align:top;padding:0.75rem;", " border-width:0 0 1px;}th{white-space:nowrap;}", " ", " ", ""], ({
1290
- full
1291
- }) => full ? css(["width:100%;"]) : void 0, ({
1292
- theme,
1293
- bordered
1294
- }) => bordered ? css(["border:1px solid ", ";"], theme.border) : void 0, ({
1295
- striped
1296
- }) => striped ? stripedStyle : void 0, ({
1297
- hover
1298
- }) => hover ? hoverStyle : void 0, ({
1299
- headerStyle
1300
- }) => headerStyle ? css(["th{", "}"], headerStyle) : void 0);
1301
-
1302
- function Progress({
1303
- value,
1304
- max,
1305
- color = "primary",
1306
- height,
1307
- size,
1308
- ...rest
1309
- }) {
1310
- const percent = useMemo(() => value ? Math.round(value / max * 100) : 0, [value, max]);
1311
- return /* @__PURE__ */ jsx(Wrapper$1, { $color: color, $height: height, $size: size, ...rest, children: /* @__PURE__ */ jsx("div", { role: "progressbar", "aria-label": "progress", className: value !== max ? "in-progress" : void 0, style: {
1312
- width: `${percent > 100 ? 100 : percent}%`
1313
- } }) });
1314
- }
1315
- const Wrapper$1 = /* @__PURE__ */ styled.div.withConfig({
1316
- displayName: "Progress__Wrapper",
1317
- componentId: "sc-807hhi-0"
1318
- })(["position:relative;display:block;width:100%;border-radius:", ";background-color:", ";", ' & > div[role="progressbar"]{position:relative;height:100%;border-radius:', ";background-color:", ";&.in-progress{border-bottom-right-radius:0;border-top-right-radius:0;}will-change:width;transition-property:width;transition-duration:350ms;transition-timing-function:cubic-bezier(0.645,0.045,0.355,1);z-index:1;}"], ({
1319
- theme
1320
- }) => theme.radius, ({
1321
- theme
1322
- }) => theme.background, ({
1323
- $size,
1324
- $height
1325
- }) => $height || setSize("height", $size), ({
1326
- theme
1327
- }) => theme.radius, ({
1328
- $color,
1329
- theme
1330
- }) => theme[$color] || $color);
1331
-
1332
- const index = styled.hr.withConfig({
1333
- displayName: "Divider",
1334
- componentId: "sc-13lwfus-0"
1335
- })(["border:none;height:1px;margin:0;flex-shrink:0;background-color:", ";"], ({
1336
- theme
1337
- }) => theme.border);
1338
-
1339
- function Close(props) {
1340
- return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "30", height: "30", viewBox: "0 0 30 30", ...props, children: /* @__PURE__ */ jsxs("g", { fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: [
1341
- /* @__PURE__ */ jsx("path", { d: "M25.999 26l-12.5-12.5L25.999 1" }),
1342
- /* @__PURE__ */ jsx("path", { d: "M1 26l12.5-12.5L1 1" })
1343
- ] }) });
1344
- }
1345
-
1346
- function getColor(theme, color) {
1347
- return !color || color === "light" ? theme.background : theme[color];
1348
- }
1349
- const closeCss = /* @__PURE__ */ css(["padding-right:1.625rem;", "{display:flex;position:absolute;align-items:center;color:inherit;top:0;right:0;bottom:0;padding:0 0.35rem;svg{width:0.625rem;height:0.625rem;}&:hover{background-color:rgba(0,0,0,0.15);}}"], TextButton);
1350
- function shouldForwardProp(name) {
1351
- return name !== "color" && name !== "round" && name !== "close";
1352
- }
1353
- const Wrapper = /* @__PURE__ */ styled.div.withConfig({
1354
- shouldForwardProp
1355
- }).withConfig({
1356
- displayName: "Tag__Wrapper",
1357
- componentId: "sc-10pvl04-0"
1358
- })(["display:inline-flex;position:relative;font-size:0.75rem;cursor:default;padding:0.325rem 0.5rem;align-items:center;justify-content:center;height:1.5rem;border-radius:", ";white-space:nowrap;", " &:not(:last-child){margin-right:0.5rem;}", "{border-radius:0;border-top-right-radius:", ";border-bottom-right-radius:", ";}", ""], ({
1359
- theme,
1360
- round
1361
- }) => round ? "50rem" : theme.radius, ({
1362
- color,
1363
- theme
1364
- }) => {
1365
- const target = getColor(theme, color);
1366
- const invertColor = findColorInvert(theme, target);
1367
- return css(["color:", ";background-color:", ";a,span{color:", ";}"], invertColor, target, invertColor);
1368
- }, TextButton, ({
1369
- theme,
1370
- round
1371
- }) => round ? "50rem" : theme.radius, ({
1372
- theme,
1373
- round
1374
- }) => round ? "50rem" : theme.radius, ({
1375
- close
1376
- }) => close ? closeCss : void 0);
1377
- function Tag({
1378
- children,
1379
- onClose,
1380
- ...rest
1381
- }) {
1382
- return /* @__PURE__ */ jsxs(Wrapper, { close: !!onClose, ...rest, children: [
1383
- children,
1384
- onClose && /* @__PURE__ */ jsx(TextButton, { onClick: onClose, pure: true, children: /* @__PURE__ */ jsx(Close, {}) })
1385
- ] });
1386
- }
1387
-
1388
- function Approved(props) {
1389
- return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "30", height: "30", viewBox: "0 0 30 30", ...props, children: [
1390
- /* @__PURE__ */ jsxs("g", { fill: "none", children: [
1391
- /* @__PURE__ */ jsx("path", { d: "M15 29c-3.74 0-7.255-1.456-9.9-4.1A13.908 13.908 0 011 15c0-3.74 1.456-7.255 4.1-9.9A13.908 13.908 0 0115 1c3.74 0 7.255 1.456 9.9 4.1A13.908 13.908 0 0129 15c0 3.74-1.456 7.255-4.1 9.9A13.908 13.908 0 0115 29z" }),
1392
- /* @__PURE__ */ jsx("path", { d: "M15 2a12.915 12.915 0 00-9.192 3.808A12.915 12.915 0 002 15c0 3.472 1.352 6.737 3.808 9.192A12.915 12.915 0 0015 28c3.472 0 6.737-1.352 9.192-3.808A12.915 12.915 0 0028 15c0-3.472-1.352-6.737-3.808-9.192A12.915 12.915 0 0015 2m0-2c8.284 0 15 6.716 15 15 0 8.284-6.716 15-15 15-8.284 0-15-6.716-15-15C0 6.716 6.716 0 15 0z", fill: "currentColor" })
1393
- ] }),
1394
- /* @__PURE__ */ jsx("path", { d: "M11.515 18.466l-3.878-3.985L6 16.005l5.59 5.59 11.562-11.533-1.7-1.595z", fill: "currentColor" })
1395
- ] });
1396
- }
1397
-
1398
- function ChevronLeftRound(props) {
1399
- return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "30", height: "30", viewBox: "0 0 30 30", ...props, children: [
1400
- /* @__PURE__ */ jsxs("g", { fill: "none", children: [
1401
- /* @__PURE__ */ jsx("path", { d: "M15 29c-3.74 0-7.255-1.456-9.9-4.1A13.908 13.908 0 011 15c0-3.74 1.456-7.255 4.1-9.9A13.908 13.908 0 0115 1c3.74 0 7.255 1.456 9.9 4.1A13.908 13.908 0 0129 15c0 3.74-1.456 7.255-4.1 9.9A13.908 13.908 0 0115 29z" }),
1402
- /* @__PURE__ */ jsx("path", { d: "M15 2a12.915 12.915 0 00-9.192 3.808A12.915 12.915 0 002 15c0 3.472 1.352 6.737 3.808 9.192A12.915 12.915 0 0015 28c3.472 0 6.737-1.352 9.192-3.808A12.915 12.915 0 0028 15c0-3.472-1.352-6.737-3.808-9.192A12.915 12.915 0 0015 2m0-2c8.284 0 15 6.716 15 15 0 8.284-6.716 15-15 15-8.284 0-15-6.716-15-15C0 6.716 6.716 0 15 0z", fill: "currentColor" })
1403
- ] }),
1404
- /* @__PURE__ */ jsx("path", { d: "M18.066 8.5l-7.567 6.731 7.567 6.2", fill: "none", stroke: "currentColor", strokeWidth: "2" })
1405
- ] });
1406
- }
1407
-
1408
- function ChevronRightRound(props) {
1409
- return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "30", height: "30", viewBox: "0 0 30 30", ...props, children: [
1410
- /* @__PURE__ */ jsxs("g", { fill: "none", children: [
1411
- /* @__PURE__ */ jsx("path", { d: "M15 1c3.74 0 7.255 1.456 9.9 4.1A13.908 13.908 0 0129 15c0 3.74-1.456 7.255-4.1 9.9A13.908 13.908 0 0115 29c-3.74 0-7.255-1.456-9.9-4.1A13.908 13.908 0 011 15c0-3.74 1.456-7.255 4.1-9.9A13.908 13.908 0 0115 1z" }),
1412
- /* @__PURE__ */ jsx("path", { d: "M15 28c3.472 0 6.737-1.352 9.192-3.808A12.915 12.915 0 0028 15c0-3.472-1.352-6.737-3.808-9.192A12.915 12.915 0 0015 2a12.915 12.915 0 00-9.192 3.808A12.915 12.915 0 002 15c0 3.472 1.352 6.737 3.808 9.192A12.915 12.915 0 0015 28m0 2C6.716 30 0 23.284 0 15 0 6.716 6.716 0 15 0c8.284 0 15 6.716 15 15 0 8.284-6.716 15-15 15z", fill: "currentColor" })
1413
- ] }),
1414
- /* @__PURE__ */ jsx("path", { d: "M11.934 21.5l7.567-6.731-7.567-6.2", fill: "none", stroke: "currentColor", strokeWidth: "2" })
1415
- ] });
1416
- }
1417
-
1418
- function FileRound(props) {
1419
- return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "30", height: "30", viewBox: "0 0 30 30", ...props, children: [
1420
- /* @__PURE__ */ jsxs("g", { fill: "none", children: [
1421
- /* @__PURE__ */ jsx("path", { d: "M15 29c-3.74 0-7.255-1.456-9.9-4.1A13.908 13.908 0 011 15c0-3.74 1.456-7.255 4.1-9.9A13.908 13.908 0 0115 1c3.74 0 7.255 1.456 9.9 4.1A13.908 13.908 0 0129 15c0 3.74-1.456 7.255-4.1 9.9A13.908 13.908 0 0115 29z" }),
1422
- /* @__PURE__ */ jsx("path", { d: "M15 2a12.915 12.915 0 00-9.192 3.808A12.915 12.915 0 002 15c0 3.472 1.352 6.737 3.808 9.192A12.915 12.915 0 0015 28c3.472 0 6.737-1.352 9.192-3.808A12.915 12.915 0 0028 15c0-3.472-1.352-6.737-3.808-9.192A12.915 12.915 0 0015 2m0-2c8.284 0 15 6.716 15 15 0 8.284-6.716 15-15 15-8.284 0-15-6.716-15-15C0 6.716 6.716 0 15 0z", fill: "currentColor" })
1423
- ] }),
1424
- /* @__PURE__ */ jsxs("g", { transform: "translate(9 7)", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
1425
- /* @__PURE__ */ jsx("rect", { width: "12", height: "16", rx: "1", stroke: "none" }),
1426
- /* @__PURE__ */ jsx("path", { d: "M1 1h10v14H1z" })
1427
- ] }),
1428
- /* @__PURE__ */ jsx("path", { fill: "currentColor", d: "M13 11h4v1.3h-4zM13 14h4v1.3h-4zM13 17h4v1.3h-4z" })
1429
- ] });
1430
- }
1431
-
1432
- function Pencil(props) {
1433
- return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "17.796", height: "17.908", viewBox: "0 0 17.796 17.908", ...props, children: /* @__PURE__ */ jsx("path", { d: "M1.254 12.674L.5 17.408l4.726-.8L17.3 4.472 13.281.5zM1.375 12.766l3.851 3.838M10.949 2.959l3.836 3.801", fill: "none", stroke: "currentColor" }) });
1434
- }
1435
-
1436
- function PencilSimple(props) {
1437
- return /* @__PURE__ */ jsx("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx("path", { d: "M9.97.22a.75.75 0 011.06 0l3.75 3.75a.75.75 0 010 1.06l-9.75 9.75a.75.75 0 01-.53.22H.75a.75.75 0 01-.75-.75V10.5a.75.75 0 01.22-.53L9.97.22zM1.5 10.81v2.69h2.69l9-9-2.69-2.69-9 9z", fill: "currentColor" }) });
1438
- }
1439
-
1440
- function User(props) {
1441
- return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "30", height: "30", viewBox: "0 0 30 30", ...props, children: [
1442
- /* @__PURE__ */ jsxs("g", { fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
1443
- /* @__PURE__ */ jsx("circle", { cx: "15", cy: "15", r: "15", stroke: "none" }),
1444
- /* @__PURE__ */ jsx("circle", { cx: "15", cy: "15", r: "14" })
1445
- ] }),
1446
- /* @__PURE__ */ jsx("path", { d: "M8 23a6.018 6.018 0 016-6h2a6.018 6.018 0 016 6zm2.6-2h8.9a4.033 4.033 0 00-3.5-2h-1.9a4.035 4.035 0 00-3.5 2zm.4-9v-1a4.012 4.012 0 014-4 4.012 4.012 0 014 4v1a4.012 4.012 0 01-4 4 4.012 4.012 0 01-4-4zm2-1v1a2.006 2.006 0 002 2 2.006 2.006 0 002-2v-1a2.006 2.006 0 00-2-2 2.006 2.006 0 00-2 2z", fill: "currentColor" })
1447
- ] });
1448
- }
1449
-
1450
- function Refresh(props) {
1451
- return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "30", height: "30", viewBox: "0 0 30 30", ...props, children: /* @__PURE__ */ jsx("path", { d: "M15.065 0A15.069 15.069 0 00.142 13.105a1.256 1.256 0 102.478.406c0-.027.008-.055.01-.082a12.52 12.52 0 0121.3-7.226l-2.584 2.584 7.532 1.255-1.255-7.532-1.92 1.92A15 15 0 0015.065 0zm13.7 15.589A1.255 1.255 0 0027.5 16.7a12.512 12.512 0 01-21.893 6.569l1.927-1.927L0 20.086l1.255 7.532 2.572-2.572a15.02 15.02 0 0026.16-8.023 1.256 1.256 0 00-1.064-1.423 1.273 1.273 0 00-.16-.011z", fill: "currentColor" }) });
1452
- }
1453
-
1454
- function Plus(props) {
1455
- return /* @__PURE__ */ jsx("svg", { width: "21", height: "21", viewBox: "0 0 21 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx("path", { d: "M9 0v9H0v3h9v9h3v-9h9V9h-9V0H9z", fill: "currentColor" }) });
1456
- }
1457
-
1458
- const theme = {
1459
- fontFamily: "-apple-system BlinkMacSystemFont, Meiryo, system-ui, sans-serif",
1460
- fontSize: "16px",
1461
- gutter: 24,
1462
- smallGutter: 16,
1463
- media: {
1464
- mobile: "576px",
1465
- tablet: "769px",
1466
- desktop: "960px",
1467
- fullhd: "1344px"
1468
- },
1469
- radius: "4px",
1470
- timeout: 250,
1471
- formPadding: "0.75rem 0.625rem",
1472
- primary: "#37B151",
1473
- link: "#578ba9",
1474
- info: "#209cee",
1475
- success: "#0fa886",
1476
- warning: "#f2b541",
1477
- danger: "#f3575a",
1478
- dark: "#363636",
1479
- light: "#9b9b9b",
1480
- black: "#0a0a0a",
1481
- blackBis: "#121212",
1482
- blackTer: "#242424",
1483
- white: "#ffffff",
1484
- whiteBis: "#fafafa",
1485
- whiteTer: "#f5f5f5",
1486
- grey: "#7a7a7a",
1487
- greyLight: "#9b9b9b",
1488
- greyLighter: "#dbdbdb",
1489
- text: "#4a4a4a",
1490
- textDark: "#4a4a4a",
1491
- textLight: "#7a7a7a",
1492
- textStrong: "#4a4a4a",
1493
- background: "#f5f5f5",
1494
- border: "#dbdbdb",
1495
- borderHover: "#9b9b9b",
1496
- borderActive: "#4a4a4a",
1497
- placeholder: "#7a7a7a",
1498
- backdrop: "rgba(10,10,10,0.25)",
1499
- responsive: true
1500
- };
1501
- const theme$1 = theme;
1502
-
1503
- /*! based on normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
1504
- const normalized = /* @__PURE__ */ css(["*,::after,::before{box-sizing:border-box;}html{line-height:1.15;-webkit-text-size-adjust:100%;-ms-overflow-style:scrollbar;}body{margin:0;font-family:", ";font-size:", ";text-align:left;}h1{font-size:2em;margin:.67em 0;}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace,monospace;font-size:1em;}a{background-color:transparent;color:", ';}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder;}code,kbd,samp{font-family:monospace,monospace;font-size:1em;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sub{bottom:-.25em;}sup{top:-.5em;}img{border-style:none;}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible;}button,select{text-transform:none;}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0;}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText;}input[type=date],input[type=time],input[type=datetime-local],input[type=month]{-webkit-appearance:listbox;}fieldset{padding:.35em .75em .625em;}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline;resize:vertical;}textarea{overflow:auto;}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0;}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto;}[type=search]{-webkit-appearance:textfield;outline-offset:-2px;}[type=search]::-webkit-search-decoration{-webkit-appearance:none;}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block;}summary{display:list-item;}template{display:none;}[hidden]{display:none;}blockquote,body,dd,dl,dt,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,html,iframe,legend,li,ol,p,pre,textarea,ul{margin:0;padding:0;}button{font-size:inherit;}article,aside,figure,footer,header,hgroup,section{display:block;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}a{cursor:pointer;text-decoration:none;color:#3273dc;&:hover{color:currentColor;}}img{vertical-align:middle;border-style:none;}svg{overflow:hidden;vertical-align:middle;}small{font-size:.875em;}span{font-style:inherit;font-weight:inherit;}strong{color:#363636;font-weight:700;}table{border-collapse:collapse;border-spacing:0;}th{text-align:inherit;}ul{list-style-type:none;}'], ({
1505
- theme
1506
- }) => theme ? theme.fontFamily : "sans-serif", ({
1507
- theme
1508
- }) => theme ? theme.fontSize : "16px", ({
1509
- theme
1510
- }) => theme.link);
1511
- const normalized$1 = normalized;
1512
-
1513
- export { Accordion, AppBar, Box, Button, ButtonGroup, Checkbox$1 as Checkbox, Col$1 as Col, Container, index$3 as Content, index as Divider, Field, Approved as IconApproved, ChevronDown as IconArrowDown, ChevronLeftRound as IconChevronLeftRound, ChevronRightRound as IconChevronRightRound, Close as IconClose, FileRound as IconFileRound, Pencil as IconPencil, PencilSimple as IconPencilSimple, Plus as IconPlus, Refresh as IconRefresh, User as IconUser, Modal, index$2 as Placeholder, Popover$1 as Popover, Portal$1 as Portal, Progress, Radio$1 as Radio, Row, Select$1 as Select, Spinner$1 as Spinner, Switch$1 as Switch, index$1 as Table, Tag, TextButton, TextInput$1 as TextInput, Textarea$1 as Textarea, Toast, Tooltip$2 as Tooltip, Arrow as arrow, boxShadow, theme$1 as defaultTheme, findColorInvert, hamburger as hambuger, mediaDesktop, mediaFullHD, mediaMobile, mediaTablet, mediaUntilFullHD, normalized$1 as normalizeStyle, setSize };