@helpwave/hightide 0.0.15 → 0.0.16

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 (111) hide show
  1. package/dist/index.d.mts +86 -2
  2. package/dist/index.d.ts +86 -2
  3. package/dist/index.js +5714 -0
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +5541 -0
  6. package/dist/index.mjs.map +1 -1
  7. package/dist/util/news.d.mts +9 -9
  8. package/dist/util/news.d.ts +9 -9
  9. package/package.json +11 -7
  10. package/dist/components/Span.d.mts +0 -2
  11. package/dist/components/Span.d.ts +0 -2
  12. package/dist/components/Span.js +0 -2
  13. package/dist/components/Span.js.map +0 -1
  14. package/dist/components/Span.mjs +0 -1
  15. package/dist/components/Span.mjs.map +0 -1
  16. package/dist/components/examples/InputGroupExample.d.mts +0 -11
  17. package/dist/components/examples/InputGroupExample.d.ts +0 -11
  18. package/dist/components/examples/InputGroupExample.js +0 -466
  19. package/dist/components/examples/InputGroupExample.js.map +0 -1
  20. package/dist/components/examples/InputGroupExample.mjs +0 -436
  21. package/dist/components/examples/InputGroupExample.mjs.map +0 -1
  22. package/dist/components/examples/MultiSelectExample.d.mts +0 -14
  23. package/dist/components/examples/MultiSelectExample.d.ts +0 -14
  24. package/dist/components/examples/MultiSelectExample.js +0 -661
  25. package/dist/components/examples/MultiSelectExample.js.map +0 -1
  26. package/dist/components/examples/MultiSelectExample.mjs +0 -631
  27. package/dist/components/examples/MultiSelectExample.mjs.map +0 -1
  28. package/dist/components/examples/SearchableSelectExample.d.mts +0 -13
  29. package/dist/components/examples/SearchableSelectExample.d.ts +0 -13
  30. package/dist/components/examples/SearchableSelectExample.js +0 -365
  31. package/dist/components/examples/SearchableSelectExample.js.map +0 -1
  32. package/dist/components/examples/SearchableSelectExample.mjs +0 -335
  33. package/dist/components/examples/SearchableSelectExample.mjs.map +0 -1
  34. package/dist/components/examples/SelectExample.d.mts +0 -9
  35. package/dist/components/examples/SelectExample.d.ts +0 -9
  36. package/dist/components/examples/SelectExample.js +0 -180
  37. package/dist/components/examples/SelectExample.js.map +0 -1
  38. package/dist/components/examples/SelectExample.mjs +0 -145
  39. package/dist/components/examples/SelectExample.mjs.map +0 -1
  40. package/dist/components/examples/StackingModals.d.mts +0 -8
  41. package/dist/components/examples/StackingModals.d.ts +0 -8
  42. package/dist/components/examples/StackingModals.js +0 -498
  43. package/dist/components/examples/StackingModals.js.map +0 -1
  44. package/dist/components/examples/StackingModals.mjs +0 -463
  45. package/dist/components/examples/StackingModals.mjs.map +0 -1
  46. package/dist/components/examples/TableExample.d.mts +0 -13
  47. package/dist/components/examples/TableExample.d.ts +0 -13
  48. package/dist/components/examples/TableExample.js +0 -853
  49. package/dist/components/examples/TableExample.js.map +0 -1
  50. package/dist/components/examples/TableExample.mjs +0 -823
  51. package/dist/components/examples/TableExample.mjs.map +0 -1
  52. package/dist/components/examples/TextareaExample.d.mts +0 -12
  53. package/dist/components/examples/TextareaExample.d.ts +0 -12
  54. package/dist/components/examples/TextareaExample.js +0 -176
  55. package/dist/components/examples/TextareaExample.js.map +0 -1
  56. package/dist/components/examples/TextareaExample.mjs +0 -141
  57. package/dist/components/examples/TextareaExample.mjs.map +0 -1
  58. package/dist/components/examples/TileExample.d.mts +0 -14
  59. package/dist/components/examples/TileExample.d.ts +0 -14
  60. package/dist/components/examples/TileExample.js +0 -79
  61. package/dist/components/examples/TileExample.js.map +0 -1
  62. package/dist/components/examples/TileExample.mjs +0 -44
  63. package/dist/components/examples/TileExample.mjs.map +0 -1
  64. package/dist/components/examples/Title.d.mts +0 -2
  65. package/dist/components/examples/Title.d.ts +0 -2
  66. package/dist/components/examples/Title.js +0 -2
  67. package/dist/components/examples/Title.js.map +0 -1
  68. package/dist/components/examples/Title.mjs +0 -1
  69. package/dist/components/examples/Title.mjs.map +0 -1
  70. package/dist/components/examples/date/DateTimePickerExample.d.mts +0 -18
  71. package/dist/components/examples/date/DateTimePickerExample.d.ts +0 -18
  72. package/dist/components/examples/date/DateTimePickerExample.js +0 -879
  73. package/dist/components/examples/date/DateTimePickerExample.js.map +0 -1
  74. package/dist/components/examples/date/DateTimePickerExample.mjs +0 -844
  75. package/dist/components/examples/date/DateTimePickerExample.mjs.map +0 -1
  76. package/dist/components/examples/properties/CheckboxPropertyExample.d.mts +0 -16
  77. package/dist/components/examples/properties/CheckboxPropertyExample.d.ts +0 -16
  78. package/dist/components/examples/properties/CheckboxPropertyExample.js +0 -349
  79. package/dist/components/examples/properties/CheckboxPropertyExample.js.map +0 -1
  80. package/dist/components/examples/properties/CheckboxPropertyExample.mjs +0 -314
  81. package/dist/components/examples/properties/CheckboxPropertyExample.mjs.map +0 -1
  82. package/dist/components/examples/properties/DatePropertyExample.d.mts +0 -16
  83. package/dist/components/examples/properties/DatePropertyExample.d.ts +0 -16
  84. package/dist/components/examples/properties/DatePropertyExample.js +0 -460
  85. package/dist/components/examples/properties/DatePropertyExample.js.map +0 -1
  86. package/dist/components/examples/properties/DatePropertyExample.mjs +0 -430
  87. package/dist/components/examples/properties/DatePropertyExample.mjs.map +0 -1
  88. package/dist/components/examples/properties/MultiSelectPropertyExample.d.mts +0 -18
  89. package/dist/components/examples/properties/MultiSelectPropertyExample.d.ts +0 -18
  90. package/dist/components/examples/properties/MultiSelectPropertyExample.js +0 -848
  91. package/dist/components/examples/properties/MultiSelectPropertyExample.js.map +0 -1
  92. package/dist/components/examples/properties/MultiSelectPropertyExample.mjs +0 -818
  93. package/dist/components/examples/properties/MultiSelectPropertyExample.mjs.map +0 -1
  94. package/dist/components/examples/properties/NumberPropertyExample.d.mts +0 -14
  95. package/dist/components/examples/properties/NumberPropertyExample.d.ts +0 -14
  96. package/dist/components/examples/properties/NumberPropertyExample.js +0 -456
  97. package/dist/components/examples/properties/NumberPropertyExample.js.map +0 -1
  98. package/dist/components/examples/properties/NumberPropertyExample.mjs +0 -426
  99. package/dist/components/examples/properties/NumberPropertyExample.mjs.map +0 -1
  100. package/dist/components/examples/properties/SelectPropertyExample.d.mts +0 -17
  101. package/dist/components/examples/properties/SelectPropertyExample.d.ts +0 -17
  102. package/dist/components/examples/properties/SelectPropertyExample.js +0 -584
  103. package/dist/components/examples/properties/SelectPropertyExample.js.map +0 -1
  104. package/dist/components/examples/properties/SelectPropertyExample.mjs +0 -554
  105. package/dist/components/examples/properties/SelectPropertyExample.mjs.map +0 -1
  106. package/dist/components/examples/properties/TextPropertyExample.d.mts +0 -16
  107. package/dist/components/examples/properties/TextPropertyExample.d.ts +0 -16
  108. package/dist/components/examples/properties/TextPropertyExample.js +0 -405
  109. package/dist/components/examples/properties/TextPropertyExample.js.map +0 -1
  110. package/dist/components/examples/properties/TextPropertyExample.mjs +0 -370
  111. package/dist/components/examples/properties/TextPropertyExample.mjs.map +0 -1
@@ -1,430 +0,0 @@
1
- // src/components/examples/properties/DatePropertyExample.tsx
2
- import { useEffect as useEffect5, useState as useState5 } from "react";
3
-
4
- // src/components/properties/DateProperty.tsx
5
- import { CalendarDays } from "lucide-react";
6
- import clsx4 from "clsx";
7
-
8
- // src/util/date.ts
9
- var formatDate = (date) => {
10
- const year = date.getFullYear().toString().padStart(4, "0");
11
- const month = (date.getMonth() + 1).toString().padStart(2, "0");
12
- const day = date.getDate().toString().padStart(2, "0");
13
- return `${year}-${month}-${day}`;
14
- };
15
- var formatDateTime = (date) => {
16
- const dateString = formatDate(date);
17
- const hours = date.getHours().toString().padStart(2, "0");
18
- const minutes = date.getMinutes().toString().padStart(2, "0");
19
- return `${dateString}T${hours}:${minutes}`;
20
- };
21
-
22
- // src/util/noop.ts
23
- var noop = () => void 0;
24
-
25
- // src/components/user-input/Input.tsx
26
- import {
27
- useEffect as useEffect2,
28
- useRef,
29
- useState as useState2,
30
- forwardRef
31
- } from "react";
32
- import clsx from "clsx";
33
-
34
- // src/hooks/useSaveDelay.ts
35
- import { useEffect, useState } from "react";
36
- function useSaveDelay(setNotificationStatus, delay) {
37
- const [updateTimer, setUpdateTimer] = useState(void 0);
38
- const [notificationTimer, setNotificationTimer] = useState(void 0);
39
- const restartTimer = (onSave) => {
40
- clearTimeout(updateTimer);
41
- setUpdateTimer(setTimeout(() => {
42
- onSave();
43
- setNotificationStatus(true);
44
- clearTimeout(notificationTimer);
45
- setNotificationTimer(setTimeout(() => {
46
- setNotificationStatus(false);
47
- clearTimeout(notificationTimer);
48
- }, delay));
49
- clearTimeout(updateTimer);
50
- }, delay));
51
- };
52
- const clearUpdateTimer = (hasSaved = true) => {
53
- clearTimeout(updateTimer);
54
- if (hasSaved) {
55
- setNotificationStatus(true);
56
- clearTimeout(notificationTimer);
57
- setNotificationTimer(setTimeout(() => {
58
- setNotificationStatus(false);
59
- clearTimeout(notificationTimer);
60
- }, delay));
61
- } else {
62
- setNotificationStatus(false);
63
- }
64
- };
65
- useEffect(() => {
66
- return () => {
67
- clearTimeout(updateTimer);
68
- clearTimeout(notificationTimer);
69
- };
70
- }, []);
71
- return { restartTimer, clearUpdateTimer };
72
- }
73
- var useSaveDelay_default = useSaveDelay;
74
-
75
- // src/components/user-input/Label.tsx
76
- import { jsx } from "react/jsx-runtime";
77
- var styleMapping = {
78
- labelSmall: "textstyle-label-sm",
79
- labelMedium: "textstyle-label-md",
80
- labelBig: "textstyle-label-lg"
81
- };
82
- var Label = ({
83
- children,
84
- name,
85
- labelType = "labelSmall",
86
- ...props
87
- }) => {
88
- return /* @__PURE__ */ jsx("label", { ...props, children: children ? children : /* @__PURE__ */ jsx("span", { className: styleMapping[labelType], children: name }) });
89
- };
90
-
91
- // src/components/user-input/Input.tsx
92
- import { jsx as jsx2, jsxs } from "react/jsx-runtime";
93
- var ControlledInput = ({
94
- id,
95
- type = "text",
96
- value,
97
- label,
98
- onChange = noop,
99
- onChangeEvent = noop,
100
- className = "",
101
- onEditCompleted,
102
- expanded = true,
103
- onBlur,
104
- containerClassName,
105
- ...restProps
106
- }) => {
107
- const {
108
- restartTimer,
109
- clearUpdateTimer
110
- } = useSaveDelay_default(() => void 0, 3e3);
111
- const ref = useRef(null);
112
- useEffect2(() => {
113
- if (restProps.autoFocus) {
114
- ref.current?.focus();
115
- }
116
- }, [restProps.autoFocus]);
117
- return /* @__PURE__ */ jsxs("div", { className: clsx({ "w-full": expanded }, containerClassName), children: [
118
- label && /* @__PURE__ */ jsx2(Label, { ...label, htmlFor: id, className: clsx("mb-1", label.className) }),
119
- /* @__PURE__ */ jsx2(
120
- "input",
121
- {
122
- ref,
123
- value,
124
- id,
125
- type,
126
- className: clsx("block bg-surface text-on-surface px-3 py-2 rounded-md w-full border-2 border-gray-200 hover:border-primary focus:outline-none focus:border-primary focus:ring-primary", className),
127
- onBlur: (event) => {
128
- if (onBlur) {
129
- onBlur(event);
130
- }
131
- if (onEditCompleted) {
132
- onEditCompleted(event.target.value, event);
133
- clearUpdateTimer();
134
- }
135
- },
136
- onChange: (e) => {
137
- const value2 = e.target.value;
138
- if (onEditCompleted) {
139
- restartTimer(() => {
140
- onEditCompleted(value2, e);
141
- clearUpdateTimer();
142
- });
143
- }
144
- onChange(value2, e);
145
- onChangeEvent(e);
146
- },
147
- ...restProps
148
- }
149
- )
150
- ] });
151
- };
152
- var FormInput = forwardRef(function FormInput2({
153
- id,
154
- labelText,
155
- errorText,
156
- className,
157
- labelClassName,
158
- errorClassName,
159
- containerClassName,
160
- required,
161
- ...restProps
162
- }, ref) {
163
- const input = /* @__PURE__ */ jsx2(
164
- "input",
165
- {
166
- ref,
167
- id,
168
- ...restProps,
169
- className: clsx(
170
- "block bg-surface text-on-surface px-3 py-2 rounded-md w-full border-2 border-gray-200 hover:border-primary focus:outline-none focus:border-primary focus:ring-primary",
171
- {
172
- "focus:border-primary focus:ring-primary": !errorText,
173
- "focus:border-negative focus:ring-negative text-negative": !!errorText
174
- },
175
- className
176
- )
177
- }
178
- );
179
- return /* @__PURE__ */ jsxs("div", { className: clsx("flex flex-col gap-y-1", containerClassName), children: [
180
- labelText && /* @__PURE__ */ jsxs("label", { htmlFor: id, className: clsx("textstyle-label-md", labelClassName), children: [
181
- labelText,
182
- required && /* @__PURE__ */ jsx2("span", { className: "text-primary font-bold", children: "*" })
183
- ] }),
184
- input,
185
- errorText && /* @__PURE__ */ jsx2("label", { htmlFor: id, className: clsx("text-negative", errorClassName), children: errorText })
186
- ] });
187
- });
188
-
189
- // src/components/properties/PropertyBase.tsx
190
- import { AlertTriangle } from "lucide-react";
191
- import clsx3 from "clsx";
192
-
193
- // src/components/Button.tsx
194
- import clsx2 from "clsx";
195
- import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
196
- var ButtonSizePaddings = {
197
- small: "btn-sm",
198
- medium: "btn-md",
199
- large: "btn-lg"
200
- };
201
- var TextButton = ({
202
- children,
203
- disabled = false,
204
- color = "neutral",
205
- size = "medium",
206
- startIcon,
207
- endIcon,
208
- onClick,
209
- className,
210
- ...restProps
211
- }) => {
212
- const colorClasses = {
213
- negative: "bg-transparent text-button-text-negative-text",
214
- neutral: "bg-transparent text-button-text-neutral-text"
215
- }[color];
216
- const iconColorClasses = {
217
- negative: "text-button-text-negative-icon",
218
- neutral: "text-button-text-neutral-icon"
219
- }[color];
220
- return /* @__PURE__ */ jsxs2(
221
- "button",
222
- {
223
- onClick: disabled ? void 0 : onClick,
224
- disabled: disabled || onClick === void 0,
225
- className: clsx2(
226
- className,
227
- {
228
- "text-disabled-text": disabled,
229
- [clsx2(colorClasses, "hover:bg-button-text-hover-background rounded-full")]: !disabled
230
- },
231
- ButtonSizePaddings[size]
232
- ),
233
- ...restProps,
234
- children: [
235
- startIcon && /* @__PURE__ */ jsx3(
236
- "span",
237
- {
238
- className: clsx2({
239
- [iconColorClasses]: !disabled,
240
- [`text-disabled-icon`]: disabled
241
- }),
242
- children: startIcon
243
- }
244
- ),
245
- children,
246
- endIcon && /* @__PURE__ */ jsx3(
247
- "span",
248
- {
249
- className: clsx2({
250
- [iconColorClasses]: !disabled,
251
- [`text-disabled-icon`]: disabled
252
- }),
253
- children: endIcon
254
- }
255
- )
256
- ]
257
- }
258
- );
259
- };
260
-
261
- // src/hooks/useLanguage.tsx
262
- import { createContext, useContext, useEffect as useEffect4, useState as useState4 } from "react";
263
-
264
- // src/hooks/useLocalStorage.tsx
265
- import { useCallback, useEffect as useEffect3, useState as useState3 } from "react";
266
-
267
- // src/hooks/useLanguage.tsx
268
- import { jsx as jsx4 } from "react/jsx-runtime";
269
- var DEFAULT_LANGUAGE = "en";
270
- var LanguageContext = createContext({ language: DEFAULT_LANGUAGE, setLanguage: (v) => v });
271
- var useLanguage = () => useContext(LanguageContext);
272
-
273
- // src/hooks/useTranslation.ts
274
- var useTranslation = (defaults, translationOverwrite = {}) => {
275
- const { language: languageProp, translation: overwrite } = translationOverwrite;
276
- const { language: inferredLanguage } = useLanguage();
277
- const usedLanguage = languageProp ?? inferredLanguage;
278
- let defaultValues = defaults[usedLanguage];
279
- if (overwrite && overwrite[usedLanguage]) {
280
- defaultValues = { ...defaultValues, ...overwrite[usedLanguage] };
281
- }
282
- return defaultValues;
283
- };
284
-
285
- // src/components/properties/PropertyBase.tsx
286
- import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
287
- var defaultPropertyBaseTranslation = {
288
- en: {
289
- remove: "Remove"
290
- },
291
- de: {
292
- remove: "Entfernen"
293
- }
294
- };
295
- var PropertyBase = ({
296
- overwriteTranslation,
297
- name,
298
- input,
299
- softRequired = false,
300
- hasValue,
301
- icon,
302
- readOnly,
303
- onRemove,
304
- className = ""
305
- }) => {
306
- const translation = useTranslation(defaultPropertyBaseTranslation, overwriteTranslation);
307
- const requiredAndNoValue = softRequired && !hasValue;
308
- return /* @__PURE__ */ jsxs3("div", { className: clsx3("row gap-x-0 group", className), children: [
309
- /* @__PURE__ */ jsxs3(
310
- "div",
311
- {
312
- className: clsx3("row gap-x-2 !w-[200px] px-4 py-2 items-center rounded-l-xl border-2 border-r-0", {
313
- "bg-gray-100 text-black group-hover:border-primary border-gray-400": !requiredAndNoValue,
314
- "bg-warning text-surface-warning group-hover:border-warning border-warning/90": requiredAndNoValue
315
- }, className),
316
- children: [
317
- icon,
318
- name
319
- ]
320
- }
321
- ),
322
- /* @__PURE__ */ jsxs3(
323
- "div",
324
- {
325
- className: clsx3("row grow justify-between items-center rounded-r-xl border-2 border-l-0", {
326
- "bg-white group-hover:border-primary border-gray-400": !requiredAndNoValue,
327
- "bg-surface-warning group-hover:border-warning border-warning/90": requiredAndNoValue
328
- }, className),
329
- children: [
330
- input({ softRequired, hasValue }),
331
- requiredAndNoValue && /* @__PURE__ */ jsx5("div", { className: "text-warning pr-4", children: /* @__PURE__ */ jsx5(AlertTriangle, { size: 24 }) }),
332
- onRemove && /* @__PURE__ */ jsx5(
333
- TextButton,
334
- {
335
- onClick: onRemove,
336
- color: "negative",
337
- className: clsx3("pr-4 items-center", { "!text-transparent": !hasValue || readOnly }),
338
- disabled: !hasValue || readOnly,
339
- children: translation.remove
340
- }
341
- )
342
- ]
343
- }
344
- )
345
- ] });
346
- };
347
-
348
- // src/components/properties/DateProperty.tsx
349
- import { jsx as jsx6 } from "react/jsx-runtime";
350
- var DateProperty = ({
351
- value,
352
- onChange = noop,
353
- onEditComplete = noop,
354
- readOnly,
355
- type = "dateTime",
356
- ...baseProps
357
- }) => {
358
- const hasValue = !!value;
359
- const dateText = value ? type === "dateTime" ? formatDateTime(value) : formatDate(value) : "";
360
- return /* @__PURE__ */ jsx6(
361
- PropertyBase,
362
- {
363
- ...baseProps,
364
- hasValue,
365
- icon: /* @__PURE__ */ jsx6(CalendarDays, { size: 16 }),
366
- input: ({ softRequired }) => /* @__PURE__ */ jsx6(
367
- "div",
368
- {
369
- className: clsx4("row grow py-2 px-4 cursor-pointer", { "text-warning": softRequired && !hasValue }),
370
- children: /* @__PURE__ */ jsx6(
371
- ControlledInput,
372
- {
373
- className: clsx4("!ring-0 !border-0 !outline-0 !p-0 !m-0 !shadow-none !w-fit !rounded-none", { "bg-surface-warning": softRequired && !hasValue }),
374
- value: dateText,
375
- type: type === "dateTime" ? "datetime-local" : "date",
376
- readOnly,
377
- onChange: (value2, event) => {
378
- if (!event.target.value) {
379
- event.preventDefault();
380
- return;
381
- }
382
- const dueDate = new Date(value2);
383
- onChange(dueDate);
384
- },
385
- onEditCompleted: (value2) => onEditComplete(new Date(value2))
386
- }
387
- )
388
- }
389
- )
390
- }
391
- );
392
- };
393
-
394
- // src/components/examples/properties/DatePropertyExample.tsx
395
- import { jsx as jsx7 } from "react/jsx-runtime";
396
- var DatePropertyExample = ({
397
- value,
398
- onChange = noop,
399
- onRemove = noop,
400
- onEditComplete = noop,
401
- ...restProps
402
- }) => {
403
- const [usedDate, setUsedDate] = useState5(value);
404
- useEffect5(() => {
405
- setUsedDate(value);
406
- }, [value]);
407
- return /* @__PURE__ */ jsx7(
408
- DateProperty,
409
- {
410
- ...restProps,
411
- onChange: (date) => {
412
- setUsedDate(date);
413
- onChange(date);
414
- },
415
- onEditComplete: (date) => {
416
- setUsedDate(date);
417
- onEditComplete(date);
418
- },
419
- onRemove: () => {
420
- setUsedDate(void 0);
421
- onRemove();
422
- },
423
- value: usedDate
424
- }
425
- );
426
- };
427
- export {
428
- DatePropertyExample
429
- };
430
- //# sourceMappingURL=DatePropertyExample.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../../src/components/examples/properties/DatePropertyExample.tsx","../../../../src/components/properties/DateProperty.tsx","../../../../src/util/date.ts","../../../../src/util/noop.ts","../../../../src/components/user-input/Input.tsx","../../../../src/hooks/useSaveDelay.ts","../../../../src/components/user-input/Label.tsx","../../../../src/components/properties/PropertyBase.tsx","../../../../src/components/Button.tsx","../../../../src/hooks/useLanguage.tsx","../../../../src/hooks/useLocalStorage.tsx","../../../../src/hooks/useTranslation.ts"],"sourcesContent":["import { useEffect, useState } from 'react'\nimport type { DatePropertyProps } from '../../properties/DateProperty'\nimport { DateProperty } from '../../properties/DateProperty'\nimport { noop } from '../../../util/noop'\n\nexport type DatePropertyExampleProps = DatePropertyProps & {\n readOnly: boolean,\n}\n\n/**\n * Example for using the DateProperty\n */\nexport const DatePropertyExample = ({\n value,\n onChange = noop,\n onRemove = noop,\n onEditComplete = noop,\n ...restProps\n}: DatePropertyExampleProps) => {\n const [usedDate, setUsedDate] = useState<Date | undefined>(value)\n\n useEffect(() => {\n setUsedDate(value)\n }, [value])\n\n return (\n <DateProperty\n {...restProps}\n onChange={date => {\n setUsedDate(date)\n onChange(date)\n }}\n onEditComplete={date => {\n setUsedDate(date)\n onEditComplete(date)\n }}\n onRemove={() => {\n setUsedDate(undefined)\n onRemove()\n }}\n value={usedDate}\n />\n )\n}\n","import { CalendarDays } from 'lucide-react'\nimport clsx from 'clsx'\nimport { formatDate, formatDateTime } from '../../util/date'\nimport { noop } from '../../util/noop'\nimport { Input } from '../user-input/Input'\nimport type { PropertyBaseProps } from './PropertyBase'\nimport { PropertyBase } from './PropertyBase'\n\nexport type DatePropertyProps = Omit<PropertyBaseProps, 'icon' | 'input' | 'hasValue'> & {\n value?: Date,\n onChange?: (date: Date) => void,\n onEditComplete?: (value: Date) => void,\n type?: 'dateTime' | 'date',\n}\n\n/**\n * An Input for date properties\n */\nexport const DateProperty = ({\n value,\n onChange = noop,\n onEditComplete = noop,\n readOnly,\n type = 'dateTime',\n ...baseProps\n}: DatePropertyProps) => {\n const hasValue = !!value\n\n const dateText = value ? (type === 'dateTime' ? formatDateTime(value) : formatDate(value)) : ''\n return (\n <PropertyBase\n {...baseProps}\n hasValue={hasValue}\n icon={<CalendarDays size={16}/>}\n input={({ softRequired }) => (\n <div\n className={clsx('row grow py-2 px-4 cursor-pointer', { 'text-warning': softRequired && !hasValue })}\n >\n <Input\n className={clsx('!ring-0 !border-0 !outline-0 !p-0 !m-0 !shadow-none !w-fit !rounded-none', { 'bg-surface-warning': softRequired && !hasValue })}\n value={dateText}\n type={type === 'dateTime' ? 'datetime-local' : 'date'}\n readOnly={readOnly}\n onChange={(value, event) => {\n if (!event.target.value) {\n event.preventDefault()\n return\n }\n const dueDate = new Date(value)\n onChange(dueDate)\n }}\n onEditCompleted={(value) => onEditComplete(new Date(value))}\n />\n </div>\n )}\n />\n )\n}\n","import { equalSizeGroups } from './array'\n\nexport const monthsList = ['january', 'february', 'march', 'april', 'may', 'june', 'july', 'august', 'september', 'october', 'november', 'december'] as const\nexport type Month = typeof monthsList[number]\n\nexport const weekDayList = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'] as const\nexport type WeekDay = typeof weekDayList[number]\n\nexport const formatDate = (date: Date) => {\n const year = date.getFullYear().toString().padStart(4, '0')\n const month = (date.getMonth() + 1).toString().padStart(2, '0')\n const day = (date.getDate()).toString().padStart(2, '0')\n return `${year}-${month}-${day}`\n}\n\nexport const formatDateTime = (date: Date) => {\n const dateString = formatDate(date)\n const hours = date.getHours().toString().padStart(2, '0')\n const minutes = date.getMinutes().toString().padStart(2, '0')\n return `${dateString}T${hours}:${minutes}`\n}\n\nexport const getDaysInMonth = (year: number, month: number): number => {\n const lastDayOfMonth = new Date(year, month + 1, 0)\n return lastDayOfMonth.getDate()\n}\n\nexport type Duration = {\n years?: number,\n months?: number,\n days?: number,\n hours?: number,\n minutes?: number,\n seconds?: number,\n milliseconds?: number,\n}\n\nexport const changeDuration = (date: Date, duration: Duration, isAdding?: boolean): Date => {\n const {\n years = 0,\n months = 0,\n days = 0,\n hours = 0,\n minutes = 0,\n seconds = 0,\n milliseconds = 0,\n } = duration\n\n // Check ranges\n if (years < 0) {\n console.error(`Range error years must be greater than 0: received ${years}`)\n return new Date(date)\n }\n if (months < 0 || months > 11) {\n console.error(`Range error month must be 0 <= month <= 11: received ${months}`)\n return new Date(date)\n }\n if (days < 0) {\n console.error(`Range error days must be greater than 0: received ${days}`)\n return new Date(date)\n }\n if (hours < 0 || hours > 23) {\n console.error(`Range error hours must be 0 <= hours <= 23: received ${hours}`)\n return new Date(date)\n }\n if (minutes < 0 || minutes > 59) {\n console.error(`Range error minutes must be 0 <= minutes <= 59: received ${minutes}`)\n return new Date(date)\n }\n if (seconds < 0 || seconds > 59) {\n console.error(`Range error seconds must be 0 <= seconds <= 59: received ${seconds}`)\n return new Date(date)\n }\n if (milliseconds < 0) {\n console.error(`Range error seconds must be greater than 0: received ${milliseconds}`)\n return new Date(date)\n }\n\n const multiplier = isAdding ? 1 : -1\n\n const newDate = new Date(date)\n\n newDate.setFullYear(newDate.getFullYear() + multiplier * years)\n\n newDate.setMonth(newDate.getMonth() + multiplier * months)\n\n newDate.setDate(newDate.getDate() + multiplier * days)\n\n newDate.setHours(newDate.getHours() + multiplier * hours)\n\n newDate.setMinutes(newDate.getMinutes() + multiplier * minutes)\n\n newDate.setSeconds(newDate.getSeconds() + multiplier * seconds)\n\n newDate.setMilliseconds(newDate.getMilliseconds() + multiplier * milliseconds)\n\n return newDate\n}\n\nexport const addDuration = (date: Date, duration: Duration): Date => {\n return changeDuration(date, duration, true)\n}\n\nexport const subtractDuration = (date: Date, duration: Duration): Date => {\n return changeDuration(date, duration, false)\n}\n\nexport const getBetweenDuration = (startDate: Date, endDate: Date): Duration => {\n const durationInMilliseconds = endDate.getTime() - startDate.getTime()\n\n const millisecondsInSecond = 1000\n const millisecondsInMinute = 60 * millisecondsInSecond\n const millisecondsInHour = 60 * millisecondsInMinute\n const millisecondsInDay = 24 * millisecondsInHour\n const millisecondsInMonth = 30 * millisecondsInDay // Rough estimation, can be adjusted\n\n const years = Math.floor(durationInMilliseconds / (365.25 * millisecondsInDay))\n const months = Math.floor(durationInMilliseconds / millisecondsInMonth)\n const days = Math.floor(durationInMilliseconds / millisecondsInDay)\n const hours = Math.floor((durationInMilliseconds % millisecondsInDay) / millisecondsInHour)\n const seconds = Math.floor((durationInMilliseconds % millisecondsInHour) / millisecondsInSecond)\n const milliseconds = durationInMilliseconds % millisecondsInSecond\n\n return {\n years,\n months,\n days,\n hours,\n seconds,\n milliseconds,\n }\n}\n\n/** Checks if a given date is in the range of two dates\n *\n * An undefined value for startDate or endDate means no bound for the start or end respectively\n */\nexport const isInTimeSpan = (value: Date, startDate?: Date, endDate?: Date): boolean => {\n if(startDate && endDate) {\n console.assert(startDate <= endDate)\n return startDate <= value && value <= endDate\n } else if (startDate) {\n return startDate <= value\n } else if(endDate) {\n return endDate >= value\n } else {\n return true\n }\n}\n\n/** Compare two dates on the year, month, day */\nexport const equalDate = (date1: Date, date2: Date) => {\n return date1.getFullYear() === date2.getFullYear()\n && date1.getMonth() === date2.getMonth()\n && date1.getDate() === date2.getDate()\n}\n\nexport const getWeeksForCalenderMonth = (date: Date, weekStart: WeekDay, weeks: number = 6) => {\n const month = date.getMonth()\n const year = date.getFullYear()\n\n const dayList: Date[] = []\n let currentDate = new Date(year, month, 1) // Start of month\n const weekStartIndex = weekDayList.indexOf(weekStart)\n\n // Move the current day to the week before\n while (currentDate.getDay() !== weekStartIndex) {\n currentDate = subtractDuration(currentDate, { days: 1 })\n }\n\n while (dayList.length < 7 * weeks) {\n const date = new Date(currentDate)\n date.setHours(date.getHours(), date.getMinutes()) // To make sure we are not overwriting the time\n dayList.push(date)\n currentDate = addDuration(currentDate, { days: 1 })\n }\n\n // weeks\n return equalSizeGroups(dayList, 7)\n}\n","export const noop = () => undefined\n","import React, {\n useEffect,\n useRef,\n useState,\n type ChangeEvent,\n type HTMLInputTypeAttribute,\n type InputHTMLAttributes, forwardRef\n} from 'react'\nimport clsx from 'clsx'\nimport useSaveDelay from '../../hooks/useSaveDelay'\nimport { noop } from '../../util/noop'\nimport type { LabelProps } from './Label'\nimport { Label } from './Label'\n\nexport type InputProps = {\n /**\n * used for the label's `for` attribute\n */\n id?: string,\n value: string,\n label?: Omit<LabelProps, 'id'>,\n /**\n * @default 'text'\n */\n type?: HTMLInputTypeAttribute,\n /**\n * Callback for when the input's value changes\n * This is pretty much required but made optional for the rare cases where it actually isn't need such as when used with disabled\n * That could be enforced through a union type but that seems a bit overkill\n * @default noop\n */\n onChange?: (text: string, event: ChangeEvent<HTMLInputElement>) => void,\n onChangeEvent?: (event: ChangeEvent<HTMLInputElement>) => void,\n className?: string,\n onEditCompleted?: (text: string, event: ChangeEvent<HTMLInputElement>) => void,\n expanded?: boolean,\n containerClassName?: string,\n} & Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'value' | 'label' | 'type' | 'onChange' | 'crossOrigin'>\n\n/**\n * A Component for inputting text or other information\n *\n * Its state is managed must be managed by the parent\n */\nconst ControlledInput = ({\n id,\n type = 'text',\n value,\n label,\n onChange = noop,\n onChangeEvent = noop,\n className = '',\n onEditCompleted,\n expanded = true,\n onBlur,\n containerClassName,\n ...restProps\n }: InputProps) => {\n const {\n restartTimer,\n clearUpdateTimer\n } = useSaveDelay(() => undefined, 3000)\n const ref = useRef<HTMLInputElement>(null)\n\n useEffect(() => {\n if (restProps.autoFocus) {\n ref.current?.focus()\n }\n }, [restProps.autoFocus])\n return (\n <div className={clsx({ 'w-full': expanded }, containerClassName)}>\n {label && <Label {...label} htmlFor={id} className={clsx('mb-1', label.className)}/>}\n <input\n ref={ref}\n value={value}\n id={id}\n type={type}\n className={clsx('block bg-surface text-on-surface px-3 py-2 rounded-md w-full border-2 border-gray-200 hover:border-primary focus:outline-none focus:border-primary focus:ring-primary', className)}\n onBlur={event => {\n if (onBlur) {\n onBlur(event)\n }\n if (onEditCompleted) {\n onEditCompleted(event.target.value, event)\n clearUpdateTimer()\n }\n }}\n onChange={e => {\n const value = e.target.value\n if (onEditCompleted) {\n restartTimer(() => {\n onEditCompleted(value, e)\n clearUpdateTimer()\n })\n }\n onChange(value, e)\n onChangeEvent(e)\n }}\n {...restProps}\n />\n </div>\n )\n}\n\ntype UncontrolledInputProps = Omit<InputProps, 'value'> & {\n /**\n * @default ''\n */\n defaultValue?: string,\n}\n\n/**\n * A Component for inputting text or other information\n *\n * Its state is managed by the component itself\n */\nconst UncontrolledInput = ({\n defaultValue = '',\n onChange = noop,\n ...props\n }: UncontrolledInputProps) => {\n const [value, setValue] = useState(defaultValue)\n\n const handleChange = (text: string, event: ChangeEvent<HTMLInputElement>) => {\n setValue(text)\n onChange(text, event)\n }\n\n return (\n <ControlledInput\n {...props}\n value={value}\n onChange={handleChange}\n />\n )\n}\n\nexport type FormInputProps = InputHTMLAttributes<HTMLInputElement> & {\n id: string,\n labelText?: string,\n errorText?: string,\n labelClassName?: string,\n errorClassName?: string,\n containerClassName?: string,\n}\n\nconst FormInput = forwardRef<HTMLInputElement, FormInputProps>(function FormInput({\n id,\n labelText,\n errorText,\n className,\n labelClassName,\n errorClassName,\n containerClassName,\n required,\n ...restProps\n }, ref) {\n const input = (\n <input\n ref={ref}\n id={id}\n {...restProps}\n className={clsx(\n 'block bg-surface text-on-surface px-3 py-2 rounded-md w-full border-2 border-gray-200 hover:border-primary focus:outline-none focus:border-primary focus:ring-primary',\n {\n 'focus:border-primary focus:ring-primary': !errorText,\n 'focus:border-negative focus:ring-negative text-negative': !!errorText,\n },\n className\n )}\n />\n )\n\n return (\n <div className={clsx('flex flex-col gap-y-1', containerClassName)}>\n {labelText && (\n <label htmlFor={id} className={clsx('textstyle-label-md', labelClassName)}>\n {labelText}\n {required && <span className=\"text-primary font-bold\">*</span>}\n </label>\n )}\n {input}\n {errorText && <label htmlFor={id} className={clsx('text-negative', errorClassName)}>{errorText}</label>}\n </div>\n )\n})\n\nexport {\n UncontrolledInput,\n ControlledInput as Input,\n FormInput\n}\n","import { useEffect, useState } from 'react'\n\nfunction useSaveDelay(setNotificationStatus: (isShowing: boolean) => void, delay: number) {\n const [updateTimer, setUpdateTimer] = useState<NodeJS.Timeout | undefined>(undefined)\n const [notificationTimer, setNotificationTimer] = useState<NodeJS.Timeout | undefined>(undefined)\n\n const restartTimer = (onSave: () => void) => {\n clearTimeout(updateTimer)\n setUpdateTimer(setTimeout(() => {\n onSave()\n setNotificationStatus(true)\n // Show Saved Notification for fade animation duration\n clearTimeout(notificationTimer)\n setNotificationTimer(setTimeout(() => {\n setNotificationStatus(false)\n clearTimeout(notificationTimer)\n }, delay))\n clearTimeout(updateTimer)\n }, delay))\n }\n\n const clearUpdateTimer = (hasSaved = true) => {\n clearTimeout(updateTimer)\n if (hasSaved) {\n setNotificationStatus(true)\n clearTimeout(notificationTimer)\n setNotificationTimer(setTimeout(() => {\n setNotificationStatus(false)\n clearTimeout(notificationTimer)\n }, delay))\n } else {\n setNotificationStatus(false)\n }\n }\n\n useEffect(() => {\n return () => {\n clearTimeout(updateTimer)\n clearTimeout(notificationTimer)\n }\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return { restartTimer, clearUpdateTimer }\n}\n\nexport default useSaveDelay\n","import type { LabelHTMLAttributes } from 'react'\n\nexport type LabelType = 'labelSmall' | 'labelMedium' | 'labelBig'\nconst styleMapping: Record<LabelType, string> = {\n labelSmall: 'textstyle-label-sm',\n labelMedium: 'textstyle-label-md',\n labelBig: 'textstyle-label-lg',\n}\n\n\nexport type LabelProps = {\n /** The text for the label */\n name?: string,\n /** The styling for the label */\n labelType?: LabelType,\n} & LabelHTMLAttributes<HTMLLabelElement>\n\n/**\n * A Label component\n */\nexport const Label = ({\n children,\n name,\n labelType = 'labelSmall',\n ...props\n}: LabelProps) => {\n return (\n <label {...props}>\n {children ? children : (<span className={styleMapping[labelType]}>{name}</span>)}\n </label>\n )\n}\n","import type { ReactNode } from 'react'\nimport { AlertTriangle } from 'lucide-react'\nimport clsx from 'clsx'\nimport type { Languages } from '../../hooks/useLanguage'\nimport { TextButton } from '../Button'\nimport type { PropsForTranslation } from '../../hooks/useTranslation'\nimport { useTranslation } from '../../hooks/useTranslation'\n\ntype PropertyBaseTranslation = {\n remove: string,\n}\n\nconst defaultPropertyBaseTranslation: Record<Languages, PropertyBaseTranslation> = {\n en: {\n remove: 'Remove'\n },\n de: {\n remove: 'Entfernen'\n }\n}\n\nexport type PropertyBaseProps = {\n name: string,\n input: (props: { softRequired: boolean, hasValue: boolean }) => ReactNode,\n onRemove?: () => void,\n hasValue: boolean,\n softRequired?: boolean,\n readOnly?: boolean,\n icon?: ReactNode,\n className?: string,\n}\n\n/**\n * A component for showing a properties with uniform styling\n */\nexport const PropertyBase = ({\n overwriteTranslation,\n name,\n input,\n softRequired = false,\n hasValue,\n icon,\n readOnly,\n onRemove,\n className = '',\n}: PropsForTranslation<PropertyBaseTranslation, PropertyBaseProps>) => {\n const translation = useTranslation(defaultPropertyBaseTranslation, overwriteTranslation)\n const requiredAndNoValue = softRequired && !hasValue\n return (\n <div className={clsx('row gap-x-0 group', className)}>\n <div\n className={\n clsx('row gap-x-2 !w-[200px] px-4 py-2 items-center rounded-l-xl border-2 border-r-0', {\n 'bg-gray-100 text-black group-hover:border-primary border-gray-400': !requiredAndNoValue,\n 'bg-warning text-surface-warning group-hover:border-warning border-warning/90': requiredAndNoValue,\n }, className)}\n >\n {icon}\n {name}\n </div>\n <div className={\n clsx('row grow justify-between items-center rounded-r-xl border-2 border-l-0', {\n 'bg-white group-hover:border-primary border-gray-400': !requiredAndNoValue,\n 'bg-surface-warning group-hover:border-warning border-warning/90': requiredAndNoValue,\n }, className)}\n >\n {input({ softRequired, hasValue })}\n {requiredAndNoValue && (\n <div className=\"text-warning pr-4\"><AlertTriangle size={24}/></div>\n )}\n {onRemove && (\n <TextButton\n onClick={onRemove}\n color=\"negative\"\n className={clsx('pr-4 items-center', { '!text-transparent': !hasValue || readOnly })}\n disabled={!hasValue || readOnly}\n >\n {translation.remove}\n </TextButton>\n )}\n </div>\n </div>\n )\n}\n","import type { PropsWithChildren, ButtonHTMLAttributes, ReactNode } from 'react'\nimport clsx from 'clsx'\n\nexport type SolidButtonColor = 'primary' | 'secondary' | 'tertiary' | 'positive' | 'warning'| 'negative'\nexport type OutlineButtonColor = 'primary'\nexport type TextButtonColor = 'negative' | 'neutral'\n\ntype ButtonSizes = 'small' | 'medium' | 'large'\n\n/**\n * The shard properties between all button types\n */\nexport type ButtonProps = PropsWithChildren<{\n /**\n * @default 'medium'\n */\n size?: ButtonSizes,\n}> & ButtonHTMLAttributes<Element>\n\nexport const ButtonSizePaddings: Record<ButtonSizes, string> = {\n small: 'btn-sm',\n medium: 'btn-md',\n large: 'btn-lg'\n}\n\ntype ButtonWithIconsProps = ButtonProps & {\n startIcon?: ReactNode,\n endIcon?: ReactNode,\n}\n\nexport type SolidButtonProps = ButtonWithIconsProps & {\n color?: SolidButtonColor,\n}\n\nexport type OutlineButtonProps = ButtonWithIconsProps & {\n color?: OutlineButtonColor,\n}\n\nexport type TextButtonProps = ButtonWithIconsProps & {\n color?: TextButtonColor,\n}\n\n/**\n * A button with a solid background and different sizes\n */\nconst SolidButton = ({\n children,\n disabled = false,\n color = 'primary',\n size = 'medium',\n startIcon,\n endIcon,\n onClick,\n className,\n ...restProps\n }: SolidButtonProps) => {\n const colorClasses = {\n primary: 'bg-button-solid-primary-background text-button-solid-primary-text',\n secondary: 'bg-button-solid-secondary-background text-button-solid-secondary-text',\n tertiary: 'bg-button-solid-tertiary-background text-button-solid-tertiary-text',\n positive: 'bg-button-solid-positive-background text-button-solid-positive-text',\n warning: 'bg-button-solid-warning-background text-button-solid-warning-text',\n negative: 'bg-button-solid-negative-background text-button-solid-negative-text',\n }[color]\n\n const iconColorClasses = {\n primary: 'text-button-solid-primary-icon',\n secondary: 'text-button-solid-secondary-icon',\n tertiary: 'text-button-solid-tertiary-icon',\n positive: 'text-button-solid-positive-icon',\n warning: 'text-button-solid-warning-icon',\n negative: 'text-button-solid-negative-icon',\n }[color]\n\n return (\n <button\n onClick={disabled ? undefined : onClick}\n disabled={disabled || onClick === undefined}\n className={clsx(\n className,\n {\n 'text-disabled-text bg-disabled-background': disabled,\n [clsx(colorClasses, 'hover:brightness-90')]: !disabled\n },\n ButtonSizePaddings[size]\n )}\n {...restProps}\n >\n {startIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {startIcon}\n </span>\n )}\n {children}\n {endIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {endIcon}\n </span>\n )}\n </button>\n )\n}\n\n/**\n * A button with an outline border and different sizes\n */\nconst OutlineButton = ({\n children,\n disabled = false,\n color = 'primary',\n size = 'medium',\n startIcon,\n endIcon,\n onClick,\n className,\n ...restProps\n }: OutlineButtonProps) => {\n const colorClasses = {\n primary: 'bg-transparent border-2 border-button-outline-primary-text text-button-outline-primary-text',\n }[color]\n\n const iconColorClasses = {\n primary: 'text-button-outline-primary-icon',\n }[color]\n return (\n <button\n onClick={disabled ? undefined : onClick}\n disabled={disabled || onClick === undefined}\n className={clsx(\n className, {\n 'text-disabled-text border-disabled-outline)': disabled,\n [clsx(colorClasses, 'hover:brightness-80')]: !disabled,\n },\n ButtonSizePaddings[size]\n )}\n {...restProps}\n >\n {startIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {startIcon}\n </span>\n )}\n {children}\n {endIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {endIcon}\n </span>\n )}\n </button>\n )\n}\n\n/**\n * A text that is a button that can have different sizes\n */\nconst TextButton = ({\n children,\n disabled = false,\n color = 'neutral',\n size = 'medium',\n startIcon,\n endIcon,\n onClick,\n className,\n ...restProps\n }: TextButtonProps) => {\n const colorClasses = {\n negative: 'bg-transparent text-button-text-negative-text',\n neutral: 'bg-transparent text-button-text-neutral-text',\n }[color]\n\n const iconColorClasses = {\n negative: 'text-button-text-negative-icon',\n neutral: 'text-button-text-neutral-icon',\n }[color]\n return (\n <button\n onClick={disabled ? undefined : onClick}\n disabled={disabled || onClick === undefined}\n className={clsx(\n className, {\n 'text-disabled-text': disabled,\n [clsx(colorClasses, 'hover:bg-button-text-hover-background rounded-full')]: !disabled,\n },\n ButtonSizePaddings[size]\n )}\n {...restProps}\n >\n {startIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {startIcon}\n </span>\n )}\n {children}\n {endIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {endIcon}\n </span>\n )}\n </button>\n )\n}\n\n// TODO Icon button\n\nexport { SolidButton, OutlineButton, TextButton }\n","import type { Dispatch, PropsWithChildren, SetStateAction } from 'react'\nimport { createContext, useContext, useEffect, useState } from 'react'\nimport useLocalStorage from './useLocalStorage'\n\nexport const languages = ['en', 'de'] as const\nexport type Languages = typeof languages[number]\nexport const languagesLocalNames: Record<Languages, string> = {\n en: 'English',\n de: 'Deutsch',\n}\n\nexport const DEFAULT_LANGUAGE = 'en'\n\nexport type LanguageContextValue = {\n language: Languages,\n setLanguage: Dispatch<SetStateAction<Languages>>,\n}\n\nexport const LanguageContext = createContext<LanguageContextValue>({ language: DEFAULT_LANGUAGE, setLanguage: (v) => v })\n\nexport const useLanguage = () => useContext(LanguageContext)\n\nexport const useLocale = (overWriteLanguage?: Languages) => {\n const { language } = useLanguage()\n const mapping: Record<Languages, string> = {\n en: 'en-US',\n de: 'de-DE'\n }\n return mapping[overWriteLanguage ?? language]\n}\n\ntype ProvideLanguageProps = {\n initialLanguage?: Languages,\n}\n\nexport const ProvideLanguage = ({ initialLanguage, children }: PropsWithChildren<ProvideLanguageProps>) => {\n const [language, setLanguage] = useState<Languages>(initialLanguage ?? DEFAULT_LANGUAGE)\n const [storedLanguage, setStoredLanguage] = useLocalStorage<Languages>('language', initialLanguage ?? DEFAULT_LANGUAGE)\n\n useEffect(() => {\n if(language !== initialLanguage && initialLanguage){\n console.warn('LanguageProvider initial state changed: Prefer using useLanguages\\'s setLanguage instead')\n setLanguage(initialLanguage)\n }\n }, [initialLanguage]) // eslint-disable-line react-hooks/exhaustive-deps\n\n useEffect(() => {\n // TODO set locale of html tag here as well\n setStoredLanguage(language)\n }, [language, setStoredLanguage])\n\n useEffect(() => {\n if (storedLanguage !== null) {\n setLanguage(storedLanguage)\n return\n }\n\n const languagesToTestAgainst = Object.values(languages)\n\n const matchingBrowserLanguages = window.navigator.languages\n .map(language => languagesToTestAgainst.find((test) => language === test || language.split('-')[0] === test))\n .filter(entry => entry !== undefined)\n\n if (matchingBrowserLanguages.length === 0) return\n\n const firstMatch = matchingBrowserLanguages[0] as Languages\n setLanguage(firstMatch)\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return (\n <LanguageContext.Provider value={{\n language,\n setLanguage\n }}>\n {children}\n </LanguageContext.Provider>\n )\n}\n","import type { Dispatch, SetStateAction } from 'react'\nimport { useCallback, useEffect, useState } from 'react'\nimport { LocalStorageService } from '../util/storage'\n\ntype SetValue<T> = Dispatch<SetStateAction<T>>\nconst useLocalStorage = <T, >(key: string, initValue: T): [T, SetValue<T>] => {\n const get = useCallback((): T => {\n if (typeof window === 'undefined') {\n return initValue\n }\n const storageService = new LocalStorageService()\n const value = storageService.get<T>(key)\n return value || initValue\n }, [initValue, key])\n\n const [storedValue, setStoredValue] = useState<T>(get)\n\n const setValue: SetValue<T> = useCallback(value => {\n const newValue = value instanceof Function ? value(storedValue) : value\n const storageService = new LocalStorageService()\n storageService.set(key, value)\n\n setStoredValue(newValue)\n }, [storedValue, setStoredValue, key])\n\n useEffect(() => {\n setStoredValue(get())\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return [storedValue, setValue]\n}\n\nexport default useLocalStorage\n","import type { Languages } from './useLanguage'\nimport { useLanguage } from './useLanguage'\n\nexport type Translation<T> = Record<Languages, T>\n\ntype OverwriteTranslationType<Translation extends Record<string, unknown>> = {\n language?: Languages,\n translation?: Partial<Record<Languages, Partial<Translation>>>,\n}\n\n/**\n * Adds the `language` prop to the component props.\n *\n * @param Translation the type of the translation object\n *\n * @param Props the type of the component props, defaults to `Record<string, never>`,\n * if you don't expect any other props other than `language` and get an\n * error when using your component (because it uses `forwardRef` etc.)\n * you can try out `Record<string, unknown>`, this might resolve your\n * problem as `SomeType & never` is still `never` but `SomeType & unknown`\n * is `SomeType` which means that adding back props (like `ref` etc.)\n * works properly\n */\nexport type PropsForTranslation<\n Translation extends Record<string, unknown>,\n Props = Record<string, never>\n> = Props & {\n overwriteTranslation?: OverwriteTranslationType<Translation>,\n};\n\nexport const useTranslation = <Translation extends Record<string, unknown>>(\n defaults: Record<Languages, Translation>,\n translationOverwrite: OverwriteTranslationType<Translation> = {}\n) : Translation => {\n const { language: languageProp, translation: overwrite } = translationOverwrite\n const { language: inferredLanguage } = useLanguage()\n const usedLanguage = languageProp ?? inferredLanguage\n let defaultValues: Translation = defaults[usedLanguage]\n if (overwrite && overwrite[usedLanguage]) {\n defaultValues = { ...defaultValues, ...overwrite[usedLanguage] }\n }\n return defaultValues\n}\n"],"mappings":";AAAA,SAAS,aAAAA,YAAW,YAAAC,iBAAgB;;;ACApC,SAAS,oBAAoB;AAC7B,OAAOC,WAAU;;;ACOV,IAAM,aAAa,CAAC,SAAe;AACxC,QAAM,OAAO,KAAK,YAAY,EAAE,SAAS,EAAE,SAAS,GAAG,GAAG;AAC1D,QAAM,SAAS,KAAK,SAAS,IAAI,GAAG,SAAS,EAAE,SAAS,GAAG,GAAG;AAC9D,QAAM,MAAO,KAAK,QAAQ,EAAG,SAAS,EAAE,SAAS,GAAG,GAAG;AACvD,SAAO,GAAG,IAAI,IAAI,KAAK,IAAI,GAAG;AAChC;AAEO,IAAM,iBAAiB,CAAC,SAAe;AAC5C,QAAM,aAAa,WAAW,IAAI;AAClC,QAAM,QAAQ,KAAK,SAAS,EAAE,SAAS,EAAE,SAAS,GAAG,GAAG;AACxD,QAAM,UAAU,KAAK,WAAW,EAAE,SAAS,EAAE,SAAS,GAAG,GAAG;AAC5D,SAAO,GAAG,UAAU,IAAI,KAAK,IAAI,OAAO;AAC1C;;;ACpBO,IAAM,OAAO,MAAM;;;ACA1B;AAAA,EACE,aAAAC;AAAA,EACA;AAAA,EACA,YAAAC;AAAA,EAG0B;AAAA,OACrB;AACP,OAAO,UAAU;;;ACRjB,SAAS,WAAW,gBAAgB;AAEpC,SAAS,aAAa,uBAAqD,OAAe;AACxF,QAAM,CAAC,aAAa,cAAc,IAAI,SAAqC,MAAS;AACpF,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAqC,MAAS;AAEhG,QAAM,eAAe,CAAC,WAAuB;AAC3C,iBAAa,WAAW;AACxB,mBAAe,WAAW,MAAM;AAC9B,aAAO;AACP,4BAAsB,IAAI;AAE1B,mBAAa,iBAAiB;AAC9B,2BAAqB,WAAW,MAAM;AACpC,8BAAsB,KAAK;AAC3B,qBAAa,iBAAiB;AAAA,MAChC,GAAG,KAAK,CAAC;AACT,mBAAa,WAAW;AAAA,IAC1B,GAAG,KAAK,CAAC;AAAA,EACX;AAEA,QAAM,mBAAmB,CAAC,WAAW,SAAS;AAC5C,iBAAa,WAAW;AACxB,QAAI,UAAU;AACZ,4BAAsB,IAAI;AAC1B,mBAAa,iBAAiB;AAC9B,2BAAqB,WAAW,MAAM;AACpC,8BAAsB,KAAK;AAC3B,qBAAa,iBAAiB;AAAA,MAChC,GAAG,KAAK,CAAC;AAAA,IACX,OAAO;AACL,4BAAsB,KAAK;AAAA,IAC7B;AAAA,EACF;AAEA,YAAU,MAAM;AACd,WAAO,MAAM;AACX,mBAAa,WAAW;AACxB,mBAAa,iBAAiB;AAAA,IAChC;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO,EAAE,cAAc,iBAAiB;AAC1C;AAEA,IAAO,uBAAQ;;;ACjBe;AAzB9B,IAAM,eAA0C;AAAA,EAC9C,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,UAAU;AACZ;AAaO,IAAM,QAAQ,CAAC;AAAA,EACpB;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,GAAG;AACL,MAAkB;AAChB,SACE,oBAAC,WAAO,GAAG,OACR,qBAAW,WAAY,oBAAC,UAAK,WAAW,aAAa,SAAS,GAAI,gBAAK,GAC1E;AAEJ;;;AFuCI,SACY,OAAAC,MADZ;AA1BJ,IAAM,kBAAkB,CAAC;AAAA,EACE;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAkB;AACzC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,IAAI,qBAAa,MAAM,QAAW,GAAI;AACtC,QAAM,MAAM,OAAyB,IAAI;AAEzC,EAAAC,WAAU,MAAM;AACd,QAAI,UAAU,WAAW;AACvB,UAAI,SAAS,MAAM;AAAA,IACrB;AAAA,EACF,GAAG,CAAC,UAAU,SAAS,CAAC;AACxB,SACE,qBAAC,SAAI,WAAW,KAAK,EAAE,UAAU,SAAS,GAAG,kBAAkB,GAC5D;AAAA,aAAS,gBAAAD,KAAC,SAAO,GAAG,OAAO,SAAS,IAAI,WAAW,KAAK,QAAQ,MAAM,SAAS,GAAE;AAAA,IAClF,gBAAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW,KAAK,yKAAyK,SAAS;AAAA,QAClM,QAAQ,WAAS;AACf,cAAI,QAAQ;AACV,mBAAO,KAAK;AAAA,UACd;AACA,cAAI,iBAAiB;AACnB,4BAAgB,MAAM,OAAO,OAAO,KAAK;AACzC,6BAAiB;AAAA,UACnB;AAAA,QACF;AAAA,QACA,UAAU,OAAK;AACb,gBAAME,SAAQ,EAAE,OAAO;AACvB,cAAI,iBAAiB;AACnB,yBAAa,MAAM;AACjB,8BAAgBA,QAAO,CAAC;AACxB,+BAAiB;AAAA,YACnB,CAAC;AAAA,UACH;AACA,mBAASA,QAAO,CAAC;AACjB,wBAAc,CAAC;AAAA,QACjB;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,KACF;AAEJ;AA4CA,IAAM,YAAY,WAA6C,SAASC,WAAU;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,KAAK;AACxF,QAAM,QACJ,gBAAAC;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACJ,WAAW;AAAA,QACT;AAAA,QACA;AAAA,UACE,2CAA2C,CAAC;AAAA,UAC5C,2DAA2D,CAAC,CAAC;AAAA,QAC/D;AAAA,QACA;AAAA,MACA;AAAA;AAAA,EACJ;AAGF,SACE,qBAAC,SAAI,WAAW,KAAK,yBAAyB,kBAAkB,GAC7D;AAAA,iBACC,qBAAC,WAAM,SAAS,IAAI,WAAW,KAAK,sBAAsB,cAAc,GACrE;AAAA;AAAA,MACA,YAAY,gBAAAA,KAAC,UAAK,WAAU,0BAAyB,eAAC;AAAA,OACzD;AAAA,IAED;AAAA,IACA,aAAa,gBAAAA,KAAC,WAAM,SAAS,IAAI,WAAW,KAAK,iBAAiB,cAAc,GAAI,qBAAU;AAAA,KACjG;AAEJ,CAAC;;;AGxLD,SAAS,qBAAqB;AAC9B,OAAOC,WAAU;;;ACDjB,OAAOC,WAAU;AA0Eb,SAcI,OAAAC,MAdJ,QAAAC,aAAA;AAxDG,IAAM,qBAAkD;AAAA,EAC7D,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT;AAwJA,IAAM,aAAa,CAAC;AAAA,EACE;AAAA,EACA,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAuB;AACzC,QAAM,eAAe;AAAA,IACnB,UAAU;AAAA,IACV,SAAS;AAAA,EACX,EAAE,KAAK;AAEP,QAAM,mBAAmB;AAAA,IACvB,UAAU;AAAA,IACV,SAAS;AAAA,EACX,EAAE,KAAK;AACP,SACE,gBAAAC;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,WAAW,SAAY;AAAA,MAChC,UAAU,YAAY,YAAY;AAAA,MAClC,WAAWC;AAAA,QACT;AAAA,QAAW;AAAA,UACT,sBAAsB;AAAA,UACtB,CAACA,MAAK,cAAc,oDAAoD,CAAC,GAAG,CAAC;AAAA,QAC/E;AAAA,QACA,mBAAmB,IAAI;AAAA,MACzB;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,qBACC,gBAAAC;AAAA,UAAC;AAAA;AAAA,YACC,WAAWD,MAAK;AAAA,cACd,CAAC,gBAAgB,GAAG,CAAC;AAAA,cACrB,CAAC,oBAAoB,GAAG;AAAA,YAC1B,CAAC;AAAA,YAEF;AAAA;AAAA,QACH;AAAA,QAEC;AAAA,QACA,WACC,gBAAAC;AAAA,UAAC;AAAA;AAAA,YACC,WAAWD,MAAK;AAAA,cACd,CAAC,gBAAgB,GAAG,CAAC;AAAA,cACrB,CAAC,oBAAoB,GAAG;AAAA,YAC1B,CAAC;AAAA,YAEF;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EAEF;AAEJ;;;ACtOA,SAAS,eAAe,YAAY,aAAAE,YAAW,YAAAC,iBAAgB;;;ACA/D,SAAS,aAAa,aAAAC,YAAW,YAAAC,iBAAgB;;;ADqE7C,gBAAAC,YAAA;AA3DG,IAAM,mBAAmB;AAOzB,IAAM,kBAAkB,cAAoC,EAAE,UAAU,kBAAkB,aAAa,CAAC,MAAM,EAAE,CAAC;AAEjH,IAAM,cAAc,MAAM,WAAW,eAAe;;;AEUpD,IAAM,iBAAiB,CAC5B,UACA,uBAA8D,CAAC,MAC9C;AACjB,QAAM,EAAE,UAAU,cAAc,aAAa,UAAU,IAAI;AAC3D,QAAM,EAAE,UAAU,iBAAiB,IAAI,YAAY;AACnD,QAAM,eAAe,gBAAgB;AACrC,MAAI,gBAA6B,SAAS,YAAY;AACtD,MAAI,aAAa,UAAU,YAAY,GAAG;AACxC,oBAAgB,EAAE,GAAG,eAAe,GAAG,UAAU,YAAY,EAAE;AAAA,EACjE;AACA,SAAO;AACT;;;AJQM,SAkBuC,OAAAC,MAlBvC,QAAAC,aAAA;AAtCN,IAAM,iCAA6E;AAAA,EACjF,IAAI;AAAA,IACF,QAAQ;AAAA,EACV;AAAA,EACA,IAAI;AAAA,IACF,QAAQ;AAAA,EACV;AACF;AAgBO,IAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AACd,MAAuE;AACrE,QAAM,cAAc,eAAe,gCAAgC,oBAAoB;AACvF,QAAM,qBAAqB,gBAAgB,CAAC;AAC5C,SACE,gBAAAA,MAAC,SAAI,WAAWC,MAAK,qBAAqB,SAAS,GACjD;AAAA,oBAAAD;AAAA,MAAC;AAAA;AAAA,QACC,WACEC,MAAK,kFAAkF;AAAA,UACrF,qEAAqE,CAAC;AAAA,UACtE,gFAAgF;AAAA,QAClF,GAAG,SAAS;AAAA,QAEb;AAAA;AAAA,UACA;AAAA;AAAA;AAAA,IACH;AAAA,IACA,gBAAAD;AAAA,MAAC;AAAA;AAAA,QAAI,WACHC,MAAK,0EAA0E;AAAA,UAC7E,uDAAuD,CAAC;AAAA,UACxD,mEAAmE;AAAA,QACrE,GAAG,SAAS;AAAA,QAEX;AAAA,gBAAM,EAAE,cAAc,SAAS,CAAC;AAAA,UAChC,sBACC,gBAAAF,KAAC,SAAI,WAAU,qBAAoB,0BAAAA,KAAC,iBAAc,MAAM,IAAG,GAAE;AAAA,UAE9D,YACC,gBAAAA;AAAA,YAAC;AAAA;AAAA,cACC,SAAS;AAAA,cACT,OAAM;AAAA,cACN,WAAWE,MAAK,qBAAqB,EAAE,qBAAqB,CAAC,YAAY,SAAS,CAAC;AAAA,cACnF,UAAU,CAAC,YAAY;AAAA,cAEtB,sBAAY;AAAA;AAAA,UACf;AAAA;AAAA;AAAA,IAEJ;AAAA,KACF;AAEJ;;;ANlDY,gBAAAC,YAAA;AAfL,IAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB;AAAA,EACA,OAAO;AAAA,EACP,GAAG;AACL,MAAyB;AACvB,QAAM,WAAW,CAAC,CAAC;AAEnB,QAAM,WAAW,QAAS,SAAS,aAAa,eAAe,KAAK,IAAI,WAAW,KAAK,IAAK;AAC7F,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,MAAM,gBAAAA,KAAC,gBAAa,MAAM,IAAG;AAAA,MAC7B,OAAO,CAAC,EAAE,aAAa,MACrB,gBAAAA;AAAA,QAAC;AAAA;AAAA,UACC,WAAWC,MAAK,qCAAqC,EAAE,gBAAgB,gBAAgB,CAAC,SAAS,CAAC;AAAA,UAElG,0BAAAD;AAAA,YAAC;AAAA;AAAA,cACC,WAAWC,MAAK,4EAA4E,EAAE,sBAAsB,gBAAgB,CAAC,SAAS,CAAC;AAAA,cAC/I,OAAO;AAAA,cACP,MAAM,SAAS,aAAa,mBAAmB;AAAA,cAC/C;AAAA,cACA,UAAU,CAACC,QAAO,UAAU;AAC1B,oBAAI,CAAC,MAAM,OAAO,OAAO;AACvB,wBAAM,eAAe;AACrB;AAAA,gBACF;AACA,sBAAM,UAAU,IAAI,KAAKA,MAAK;AAC9B,yBAAS,OAAO;AAAA,cAClB;AAAA,cACA,iBAAiB,CAACA,WAAU,eAAe,IAAI,KAAKA,MAAK,CAAC;AAAA;AAAA,UAC5D;AAAA;AAAA,MACF;AAAA;AAAA,EAEJ;AAEJ;;;AD/BI,gBAAAC,YAAA;AAdG,IAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA,WAAW;AAAA,EACX,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,GAAG;AACL,MAAgC;AAC9B,QAAM,CAAC,UAAU,WAAW,IAAIC,UAA2B,KAAK;AAEhE,EAAAC,WAAU,MAAM;AACd,gBAAY,KAAK;AAAA,EACnB,GAAG,CAAC,KAAK,CAAC;AAEV,SACE,gBAAAF;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,UAAU,UAAQ;AAChB,oBAAY,IAAI;AAChB,iBAAS,IAAI;AAAA,MACf;AAAA,MACA,gBAAgB,UAAQ;AACtB,oBAAY,IAAI;AAChB,uBAAe,IAAI;AAAA,MACrB;AAAA,MACA,UAAU,MAAM;AACd,oBAAY,MAAS;AACrB,iBAAS;AAAA,MACX;AAAA,MACA,OAAO;AAAA;AAAA,EACT;AAEJ;","names":["useEffect","useState","clsx","useEffect","useState","jsx","useEffect","value","FormInput","jsx","clsx","clsx","jsx","jsxs","jsxs","clsx","jsx","useEffect","useState","useEffect","useState","jsx","jsx","jsxs","clsx","jsx","clsx","value","jsx","useState","useEffect"]}
@@ -1,18 +0,0 @@
1
- import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { MultiSelectPropertyProps } from '../../properties/MultiSelectProperty.mjs';
3
- import '../../../hooks/useTranslation.mjs';
4
- import '../../../hooks/useLanguage.mjs';
5
- import 'react';
6
- import '../../user-input/MultiSelect.mjs';
7
- import '../../user-input/Label.mjs';
8
- import '../../properties/PropertyBase.mjs';
9
-
10
- type MultiSelectPropertyExample = Omit<MultiSelectPropertyProps<string>, 'onChange' | 'onRemove' | 'search' | 'selectedDisplay'> & {
11
- enableSearch: boolean;
12
- };
13
- /**
14
- * Example for using the MultiSelectProperty
15
- */
16
- declare const MultiSelectPropertyExample: ({ options, hintText, enableSearch, ...restProps }: MultiSelectPropertyExample) => react_jsx_runtime.JSX.Element;
17
-
18
- export { MultiSelectPropertyExample };
@@ -1,18 +0,0 @@
1
- import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { MultiSelectPropertyProps } from '../../properties/MultiSelectProperty.js';
3
- import '../../../hooks/useTranslation.js';
4
- import '../../../hooks/useLanguage.js';
5
- import 'react';
6
- import '../../user-input/MultiSelect.js';
7
- import '../../user-input/Label.js';
8
- import '../../properties/PropertyBase.js';
9
-
10
- type MultiSelectPropertyExample = Omit<MultiSelectPropertyProps<string>, 'onChange' | 'onRemove' | 'search' | 'selectedDisplay'> & {
11
- enableSearch: boolean;
12
- };
13
- /**
14
- * Example for using the MultiSelectProperty
15
- */
16
- declare const MultiSelectPropertyExample: ({ options, hintText, enableSearch, ...restProps }: MultiSelectPropertyExample) => react_jsx_runtime.JSX.Element;
17
-
18
- export { MultiSelectPropertyExample };