uibee 2.7.7 → 2.7.9

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.
@@ -9,15 +9,15 @@ export default function Input({ label, name, type = 'text', placeholder, value,
9
9
  const [isOpen, setIsOpen] = useState(false);
10
10
  const containerRef = useClickOutside(() => setIsOpen(false));
11
11
  const isDateType = ['date', 'datetime-local', 'time'].includes(type);
12
- const handleIconClick = () => {
12
+ function handleIconClick() {
13
13
  if (isDateType && !disabled) {
14
14
  setIsOpen(!isOpen);
15
15
  }
16
16
  else if (localRef.current && !disabled) {
17
17
  localRef.current.focus();
18
18
  }
19
- };
20
- const handleDateChange = (date) => {
19
+ }
20
+ function handleDateChange(date) {
21
21
  if (!onChange)
22
22
  return;
23
23
  const pad = (n) => n.toString().padStart(2, '0');
@@ -41,7 +41,7 @@ export default function Input({ label, name, type = 'text', placeholder, value,
41
41
  },
42
42
  };
43
43
  onChange(event);
44
- };
44
+ }
45
45
  let displayIcon = icon;
46
46
  if (!displayIcon && isDateType) {
47
47
  if (type === 'time') {
@@ -51,7 +51,7 @@ export default function Input({ label, name, type = 'text', placeholder, value,
51
51
  displayIcon = _jsx(Calendar, { className: 'w-4 h-4' });
52
52
  }
53
53
  }
54
- const getDateValue = () => {
54
+ function getDateValue() {
55
55
  if (!value)
56
56
  return null;
57
57
  if (type === 'time') {
@@ -60,7 +60,7 @@ export default function Input({ label, name, type = 'text', placeholder, value,
60
60
  }
61
61
  const date = new Date(value);
62
62
  return isNaN(date.getTime()) ? null : date;
63
- };
63
+ }
64
64
  return (_jsx(FieldWrapper, { label: label, name: name, required: required, info: info, error: error, className: className, children: _jsxs("div", { className: 'relative flex items-center', ref: containerRef, children: [displayIcon && (_jsx("div", { className: `
65
65
  absolute left-3 text-login-200
66
66
  ${isDateType && !disabled ? 'cursor-pointer hover:text-login-text' : 'pointer-events-none'}
@@ -12,7 +12,7 @@ export default function Select({ label, name, value, onChange, options, error, c
12
12
  setSelectedOption(options.find(opt => opt.value === value));
13
13
  }, [value, options]);
14
14
  const containerRef = useClickOutside(() => setIsOpen(false));
15
- const handleSelect = (option) => {
15
+ function handleSelect(option) {
16
16
  if (disabled)
17
17
  return;
18
18
  setSelectedOption(option);
@@ -20,8 +20,8 @@ export default function Select({ label, name, value, onChange, options, error, c
20
20
  if (onChange) {
21
21
  onChange(option.value);
22
22
  }
23
- };
24
- const handleClear = (e) => {
23
+ }
24
+ function handleClear(e) {
25
25
  e.stopPropagation();
26
26
  if (disabled)
27
27
  return;
@@ -29,7 +29,7 @@ export default function Select({ label, name, value, onChange, options, error, c
29
29
  if (onChange) {
30
30
  onChange(null);
31
31
  }
32
- };
32
+ }
33
33
  return (_jsxs(FieldWrapper, { label: label, name: name, required: required, info: info, error: error, className: className, children: [_jsxs("div", { className: 'relative', ref: containerRef, children: [_jsxs("button", { type: 'button', onClick: () => !disabled && setIsOpen(!isOpen), disabled: disabled, "aria-haspopup": 'listbox', "aria-expanded": isOpen, "aria-labelledby": label ? undefined : name, className: `
34
34
  w-full rounded-md bg-login-500/50 border border-login-500
35
35
  text-login-text text-left
@@ -21,7 +21,7 @@ export default function DateTimePickerPopup({ value, onChange, type, onClose, })
21
21
  }));
22
22
  }
23
23
  }, [value]);
24
- const handleDateSelect = (day) => {
24
+ function handleDateSelect(day) {
25
25
  const newDate = new Date(currentDate);
26
26
  newDate.setDate(day);
27
27
  if (value) {
@@ -35,8 +35,8 @@ export default function DateTimePickerPopup({ value, onChange, type, onClose, })
35
35
  if (type === 'date' && onClose) {
36
36
  onClose();
37
37
  }
38
- };
39
- const handleTimeChange = (timeUnit, val) => {
38
+ }
39
+ function handleTimeChange(timeUnit, val) {
40
40
  const newDate = value ? new Date(value) : new Date();
41
41
  if (!value) {
42
42
  newDate.setHours(0, 0, 0, 0);
@@ -52,8 +52,8 @@ export default function DateTimePickerPopup({ value, onChange, type, onClose, })
52
52
  newDate.setMinutes(val);
53
53
  }
54
54
  onChange(newDate);
55
- };
56
- const onTimeInputChange = (unit, val) => {
55
+ }
56
+ function onTimeInputChange(unit, val) {
57
57
  if (val === '') {
58
58
  setTimeInput(prev => ({ ...prev, [unit]: '' }));
59
59
  handleTimeChange(unit, 0);
@@ -68,16 +68,20 @@ export default function DateTimePickerPopup({ value, onChange, type, onClose, })
68
68
  return;
69
69
  setTimeInput(prev => ({ ...prev, [unit]: val }));
70
70
  handleTimeChange(unit, num);
71
- };
72
- const onTimeInputBlur = (unit) => {
71
+ }
72
+ function onTimeInputBlur(unit) {
73
73
  if (timeInput[unit] === '') {
74
74
  const num = unit === 'hours' ? (value?.getHours() ?? 0) : (value?.getMinutes() ?? 0);
75
75
  setTimeInput(prev => ({ ...prev, [unit]: num.toString() }));
76
76
  }
77
- };
78
- const getDaysInMonth = (year, month) => new Date(year, month + 1, 0).getDate();
79
- const getFirstDayOfMonth = (year, month) => new Date(year, month, 1).getDay();
80
- const renderCalendar = () => {
77
+ }
78
+ function getDaysInMonth(year, month) {
79
+ return new Date(year, month + 1, 0).getDate();
80
+ }
81
+ function getFirstDayOfMonth(year, month) {
82
+ return new Date(year, month, 1).getDay();
83
+ }
84
+ function renderCalendar() {
81
85
  const year = currentDate.getFullYear();
82
86
  const month = currentDate.getMonth();
83
87
  const daysInMonth = getDaysInMonth(year, month);
@@ -103,8 +107,8 @@ export default function DateTimePickerPopup({ value, onChange, type, onClose, })
103
107
  `, children: i }, i));
104
108
  }
105
109
  return (_jsxs("div", { className: 'p-2', children: [_jsxs("div", { className: 'flex items-center justify-between mb-2', children: [_jsx("button", { type: 'button', onClick: () => setCurrentDate(new Date(year, month - 1)), className: 'p-1 hover:bg-login-500 rounded-full text-login-text', children: _jsx(ChevronLeft, { className: 'w-4 h-4' }) }), _jsxs("span", { className: 'font-medium text-login-text', children: [MONTHS[month], " ", year] }), _jsx("button", { type: 'button', onClick: () => setCurrentDate(new Date(year, month + 1)), className: 'p-1 hover:bg-login-500 rounded-full text-login-text', children: _jsx(ChevronRight, { className: 'w-4 h-4' }) })] }), _jsx("div", { className: 'grid grid-cols-7 gap-1 mb-1', children: DAYS.map(d => (_jsx("div", { className: 'w-8 text-center text-xs text-login-200 font-medium', children: d }, d))) }), _jsx("div", { className: 'grid grid-cols-7 gap-1', children: days })] }));
106
- };
107
- const renderTimePicker = () => {
110
+ }
111
+ function renderTimePicker() {
108
112
  return (_jsxs("div", { className: 'p-2 border-t border-login-500 flex justify-center gap-2', children: [_jsxs("div", { className: 'flex flex-col items-center', children: [_jsx("label", { className: 'text-xs text-login-200 mb-1', children: "Hour" }), _jsx("input", { type: 'text', inputMode: 'numeric', value: timeInput.hours, onChange: (e) => onTimeInputChange('hours', e.target.value), onBlur: () => onTimeInputBlur('hours'), className: `
109
113
  w-16 p-1 bg-login-500 rounded text-center text-login-text
110
114
  border border-login-500 focus:border-login outline-none
@@ -112,6 +116,6 @@ export default function DateTimePickerPopup({ value, onChange, type, onClose, })
112
116
  w-16 p-1 bg-login-500 rounded text-center text-login-text
113
117
  border border-login-500 focus:border-login outline-none
114
118
  ` })] })] }));
115
- };
119
+ }
116
120
  return (_jsxs("div", { className: 'absolute top-full left-0 z-50 mt-1 bg-login-600 border border-login-500 rounded-md shadow-lg p-1 min-w-70', children: [type !== 'time' && renderCalendar(), (type === 'time' || type === 'datetime-local') && renderTimePicker()] }));
117
121
  }
@@ -3,6 +3,7 @@ export type TextareaProps = {
3
3
  label?: string;
4
4
  name: string;
5
5
  placeholder?: string;
6
+ type?: 'markdown' | 'json' | 'text';
6
7
  value?: string;
7
8
  onChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void;
8
9
  error?: string;
@@ -12,4 +13,4 @@ export type TextareaProps = {
12
13
  rows?: number;
13
14
  info?: string;
14
15
  };
15
- export default function Textarea({ label, name, placeholder, value, onChange, error, className, disabled, required, rows, info, }: TextareaProps): import("react/jsx-runtime").JSX.Element;
16
+ export default function Textarea({ label, name, placeholder, value, onChange, error, className, disabled, required, rows, info, type, }: TextareaProps): import("react/jsx-runtime").JSX.Element;
@@ -1,14 +1,35 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { useState } from 'react';
3
+ import ReactMarkdown from 'react-markdown';
4
+ import { Eye, Pencil } from 'lucide-react';
2
5
  import { FieldWrapper } from './shared';
3
- export default function Textarea({ label, name, placeholder, value, onChange, error, className, disabled, required, rows = 4, info, }) {
4
- return (_jsx(FieldWrapper, { label: label, name: name, required: required, info: info, error: error, className: className, children: _jsx("textarea", { id: name, name: name, placeholder: placeholder, value: value, onChange: onChange, disabled: disabled, required: required, rows: rows, title: label, "aria-invalid": !!error, "aria-describedby": error ? `${name}-error` : undefined, className: `
5
- w-full rounded-md bg-login-500/50 border border-login-500
6
- text-login-text placeholder-login-200
7
- focus:outline-none focus:border-login focus:ring-1 focus:ring-login
8
- disabled:opacity-50 disabled:cursor-not-allowed
9
- p-3
10
- transition-all duration-200
11
- resize-y
12
- ${error ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : ''}
13
- ` }) }));
6
+ function isValidJson(str) {
7
+ try {
8
+ JSON.parse(str);
9
+ return null;
10
+ }
11
+ catch (error) {
12
+ return error.message;
13
+ }
14
+ }
15
+ export default function Textarea({ label, name, placeholder, value, onChange, error, className, disabled, required, rows = 4, info, type = 'text', }) {
16
+ const [preview, setPreview] = useState(false);
17
+ const jsonError = type === 'json' && value ? isValidJson(value) : undefined;
18
+ const displayError = jsonError || error;
19
+ return (_jsx(FieldWrapper, { label: label, name: name, required: required, info: info, error: displayError, className: className, children: _jsxs("div", { className: 'relative', children: [type === 'markdown' && (_jsx("div", { className: 'absolute right-2 top-2 z-10 flex gap-2', children: _jsx("button", { type: 'button', onClick: () => setPreview(!preview), className: 'p-1 rounded hover:bg-login-500/50 text-login-text transition-colors', title: preview ? 'Edit' : 'Preview', children: preview ? _jsx(Pencil, { size: 16 }) : _jsx(Eye, { size: 16 }) }) })), type === 'markdown' && preview ? (_jsx("div", { className: `
20
+ w-full rounded-md bg-login-500/50 border border-login-500
21
+ text-login-text
22
+ p-3
23
+ prose prose-invert prose-sm max-w-none overflow-y-auto
24
+ ${error ? 'border-red-500' : ''}
25
+ `, style: { minHeight: `${rows * 1.5}rem` }, children: _jsx(ReactMarkdown, { children: value || '' }) })) : (_jsx("textarea", { id: name, name: name, placeholder: placeholder, value: value, onChange: onChange, disabled: disabled, required: required, rows: rows, title: label, "aria-invalid": !!error, "aria-describedby": error ? `${name}-error` : undefined, className: `
26
+ w-full rounded-md bg-login-500/50 border border-login-500
27
+ text-login-text placeholder-login-200
28
+ focus:outline-none focus:border-login focus:ring-1 focus:ring-login
29
+ disabled:opacity-50 disabled:cursor-not-allowed
30
+ p-3
31
+ transition-all duration-200
32
+ resize-y
33
+ ${error ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : ''}
34
+ ` }))] }) }));
14
35
  }
@@ -2,5 +2,5 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  export default function Logo({ className }) {
3
3
  const corner = 'fill-[var(--foreground)] transition-all duration-1000';
4
4
  const letter = 'fill-none stroke-[var(--color-login)] stroke-[3.5px]';
5
- return (_jsxs("svg", { className: `block w-full max-w-2xl mx-auto ${className || ''}`, viewBox: '0 0 147.02299 59.20511', children: [_jsx("path", { className: corner, d: 'm 28.77713,58.37738 v 0.76465 H 25.531 v -5.61816 h 0.91309 v 4.85351 z' }), _jsx("path", { className: corner, d: 'm 30.47831,59.142 h -0.917 v -5.61813 h 0.917 z' }), _jsx("path", { className: corner, d: 'M 36.46268,53.52387 V 59.142 H 35.99881 A 0.36347,0.36347 0 0 1 35.6785,58.98185 L 32.59256,55.018 c 0.0078,0.07617 0.01368,0.15039 0.01758,0.22461 0.0039,0.07422 0.0059,0.14258 0.0059,0.20508 V 59.142 h -0.80371 v -5.61813 h 0.47656 a 0.71321,0.71321 0 0 1 0.09864,0.0059 0.3128,0.3128 0 0 1 0.07617,0.02148 0.22919,0.22919 0 0 1 0.0664,0.04688 0.63781,0.63781 0 0 1 0.06641,0.07812 l 3.08984,3.96779 c -0.0078,-0.08105 -0.01367,-0.16015 -0.01757,-0.23828 -0.0039,-0.07813 -0.0059,-0.15039 -0.0059,-0.21875 v -3.6631 z' }), _jsx("path", { className: corner, d: 'm 39.84549,57.1684 a 2.91264,2.91264 0 0 1 -0.11523,0.84765 1.748,1.748 0 0 1 -0.34375,0.64063 1.52483,1.52483 0 0 1 -0.56543,0.40527 2.00691,2.00691 0 0 1 -0.78223,0.14258 3.23707,3.23707 0 0 1 -0.40234,-0.0254 3.44454,3.44454 0 0 1 -0.41309,-0.0801 l 0.04688,-0.5459 a 0.2079,0.2079 0 0 1 0.06055,-0.125 0.19754,0.19754 0 0 1 0.14257,-0.0469 0.74035,0.74035 0 0 1 0.18067,0.0293 1.36468,1.36468 0 0 0 0.71387,-0.041 0.74722,0.74722 0 0 0 0.3125,-0.2207 0.9864,0.9864 0 0 0 0.1914,-0.38574 2.19551,2.19551 0 0 0 0.06445,-0.57227 v -3.667 h 0.90918 z' }), _jsx("path", { className: corner, d: 'm 44.6326,58.40473 -0.0039,0.7373 h -3.50391 v -5.61816 h 3.50391 v 0.7373 h -2.58692 v 1.69336 h 2.06739 v 0.71387 h -2.06739 v 1.73633 z' }), _jsx("path", { className: corner, d: 'M 46.53592,54.26117 V 56.06 h 2.19629 v 0.7373 h -2.19629 v 2.3447 h -0.917 v -5.61813 h 3.50391 v 0.7373 z' }), _jsx("path", { className: corner, d: 'm 55.25956,56.33344 a 3.18179,3.18179 0 0 1 -0.20215,1.15039 2.6634,2.6634 0 0 1 -0.57227,0.90722 2.59685,2.59685 0 0 1 -0.88476,0.59473 3.17156,3.17156 0 0 1 -2.29492,0 2.62415,2.62415 0 0 1 -0.88672,-0.59473 2.65327,2.65327 0 0 1 -0.57422,-0.90722 3.37717,3.37717 0 0 1 0,-2.30176 2.67118,2.67118 0 0 1 0.57422,-0.90918 2.61491,2.61491 0 0 1 0.88672,-0.59668 3.1717,3.1717 0 0 1 2.29492,0 2.58781,2.58781 0 0 1 0.88476,0.59668 2.68144,2.68144 0 0 1 0.57227,0.90918 3.1871,3.1871 0 0 1 0.20215,1.15137 z m -0.93164,0 a 2.706,2.706 0 0 0 -0.13086,-0.87012 1.821,1.821 0 0 0 -0.375,-0.65527 1.63008,1.63008 0 0 0 -0.59082,-0.41407 2.16795,2.16795 0 0 0 -1.55664,0 1.65415,1.65415 0 0 0 -0.59278,0.41407 1.84212,1.84212 0 0 0 -0.3789,0.65527 2.92611,2.92611 0 0 0 0,1.74316 1.83766,1.83766 0 0 0 0.3789,0.6543 1.64222,1.64222 0 0 0 0.59278,0.40918 2.19564,2.19564 0 0 0 1.55664,0 1.61838,1.61838 0 0 0 0.59082,-0.40918 1.81652,1.81652 0 0 0 0.375,-0.6543 2.71589,2.71589 0 0 0 0.13086,-0.87304 z' }), _jsx("path", { className: corner, d: 'm 60.534,59.142 h -0.81543 a 0.377,0.377 0 0 1 -0.35156,-0.1875 l -1.31055,-1.8916 a 0.4267,0.4267 0 0 0 -0.14453,-0.14063 0.50286,0.50286 0 0 0 -0.23437,-0.043 H 57.17072 V 59.142 H 56.2576 v -5.61813 h 1.6543 a 3.54427,3.54427 0 0 1 0.9541,0.11328 1.80649,1.80649 0 0 1 0.65723,0.32226 1.25606,1.25606 0 0 1 0.37988,0.501 1.76427,1.76427 0 0 1 0.03516,1.19727 1.50418,1.50418 0 0 1 -0.25293,0.46093 1.61283,1.61283 0 0 1 -0.40821,0.3584 2.04861,2.04861 0 0 1 -0.5498,0.23828 0.92346,0.92346 0 0 1 0.28906,0.28516 z m -2.64551,-2.92578 a 1.763,1.763 0 0 0 0.5459,-0.07617 1.11007,1.11007 0 0 0 0.39063,-0.21289 0.87892,0.87892 0 0 0 0.23437,-0.3252 1.10093,1.10093 0 0 0 0.07715,-0.41992 0.84276,0.84276 0 0 0 -0.30371,-0.70215 1.46527,1.46527 0 0 0 -0.9209,-0.24219 h -0.74121 v 1.97852 z' }), _jsx("path", { className: corner, d: 'm 64.72049,58.40473 -0.0039,0.7373 h -3.50391 v -5.61816 h 3.50391 v 0.7373 h -2.58692 v 1.69336 h 2.06739 v 0.71387 h -2.06739 v 1.73633 z' }), _jsx("path", { className: corner, d: 'M 70.35721,53.52387 V 59.142 H 69.89335 A 0.36347,0.36347 0 0 1 69.57303,58.98185 L 66.4871,55.018 c 0.0078,0.07617 0.01367,0.15039 0.01757,0.22461 0.0039,0.07422 0.0059,0.14258 0.0059,0.20508 V 59.142 h -0.80371 v -5.61813 h 0.47656 a 0.71321,0.71321 0 0 1 0.09864,0.0059 0.3128,0.3128 0 0 1 0.07617,0.02148 0.22936,0.22936 0 0 1 0.06641,0.04688 0.63869,0.63869 0 0 1 0.0664,0.07812 l 3.08985,3.96777 c -0.008,-0.08105 -0.0137,-0.16015 -0.0176,-0.23828 -0.004,-0.07813 -0.006,-0.15039 -0.006,-0.21875 v -3.66308 z' }), _jsx("path", { className: corner, d: 'm 72.6121,59.142 h -0.917 v -5.61813 h 0.917 z' }), _jsx("path", { className: corner, d: 'M 78.59794,53.52387 V 59.142 H 78.13358 A 0.36344,0.36344 0 0 1 77.81327,58.98185 L 74.72733,55.018 c 0.008,0.07617 0.0137,0.15039 0.0176,0.22461 0.004,0.07422 0.006,0.14258 0.006,0.20508 V 59.142 h -0.80371 v -5.61813 h 0.47656 a 0.713,0.713 0 0 1 0.0986,0.0059 0.31254,0.31254 0 0 1 0.0762,0.02148 0.22936,0.22936 0 0 1 0.0664,0.04688 0.63869,0.63869 0 0 1 0.0664,0.07812 l 3.08984,3.96777 c -0.008,-0.08105 -0.0137,-0.16015 -0.0176,-0.23828 -0.004,-0.07813 -0.006,-0.15039 -0.006,-0.21875 v -3.66308 z' }), _jsx("path", { className: corner, d: 'M 84.53544,56.37641 V 58.6 a 3.24425,3.24425 0 0 1 -1.9502,0.60449 3.419,3.419 0 0 1 -1.23535,-0.21289 2.7275,2.7275 0 0 1 -0.94141,-0.59277 2.59231,2.59231 0 0 1 -0.60156,-0.90723 3.08634,3.08634 0 0 1 -0.21,-1.1582 3.23536,3.23536 0 0 1 0.20215,-1.165 2.5484,2.5484 0 0 1 1.49414,-1.498 3.29189,3.29189 0 0 1 1.20215,-0.209 3.52605,3.52605 0 0 1 0.62988,0.05273 3.11559,3.11559 0 0 1 0.54,0.14649 2.535,2.535 0 0 1 0.84668,0.52246 l -0.26074,0.418 a 0.26545,0.26545 0 0 1 -0.16016,0.12109 0.27377,0.27377 0 0 1 -0.21094,-0.04688 c -0.0752,-0.04492 -0.15527,-0.09082 -0.24023,-0.14062 a 2.01137,2.01137 0 0 0 -0.29,-0.13867 2.127,2.127 0 0 0 -0.37891,-0.10547 2.72656,2.72656 0 0 0 -0.50683,-0.041 2.09434,2.09434 0 0 0 -0.80176,0.14649 1.70173,1.70173 0 0 0 -0.61035,0.418 1.84692,1.84692 0 0 0 -0.39063,0.65722 2.5766,2.5766 0 0 0 -0.13672,0.86231 2.62333,2.62333 0 0 0 0.14453,0.89844 1.88731,1.88731 0 0 0 0.41016,0.67187 1.74772,1.74772 0 0 0 0.6416,0.419 2.55647,2.55647 0 0 0 1.459,0.0703 2.80344,2.80344 0 0 0 0.53222,-0.207 V 57.07074 H 82.928 a 0.19287,0.19287 0 0 1 -0.13964,-0.04883 0.16848,0.16848 0 0 1 -0.0508,-0.12695 v -0.51855 z' }), _jsx("path", { className: corner, d: 'm 89.1243,58.40473 -0.004,0.7373 h -3.50391 v -5.61816 h 3.50391 v 0.7373 h -2.58692 v 1.69336 h 2.06739 v 0.71387 h -2.06739 v 1.73633 z' }), _jsx("path", { className: corner, d: 'M 94.761,53.52387 V 59.142 H 94.29713 A 0.36347,0.36347 0 0 1 93.97682,58.98185 L 90.8909,55.018 c 0.008,0.07617 0.0137,0.15039 0.0176,0.22461 0.004,0.07422 0.006,0.14258 0.006,0.20508 V 59.142 h -0.80371 v -5.61813 h 0.47656 a 0.71321,0.71321 0 0 1 0.0986,0.0059 0.3128,0.3128 0 0 1 0.0762,0.02148 0.22919,0.22919 0 0 1 0.0664,0.04688 0.63781,0.63781 0 0 1 0.0664,0.07812 l 3.08984,3.96777 c -0.008,-0.08105 -0.0137,-0.16015 -0.0176,-0.23828 -0.004,-0.07813 -0.006,-0.15039 -0.006,-0.21875 v -3.66308 z' }), _jsx("path", { className: corner, d: 'M 98.95829,54.26117 V 56.06 h 2.19629 v 0.7373 h -2.19629 v 2.3447 h -0.917 v -5.61813 h 3.5039 v 0.7373 z' }), _jsx("path", { className: corner, d: 'm 107.68192,56.33344 a 3.18158,3.18158 0 0 1 -0.20215,1.15039 2.66353,2.66353 0 0 1 -0.57226,0.90722 2.597,2.597 0 0 1 -0.88477,0.59473 3.17156,3.17156 0 0 1 -2.29492,0 2.62415,2.62415 0 0 1 -0.88672,-0.59473 2.65327,2.65327 0 0 1 -0.57422,-0.90722 3.37717,3.37717 0 0 1 0,-2.30176 2.67118,2.67118 0 0 1 0.57422,-0.90918 2.61491,2.61491 0 0 1 0.88672,-0.59668 3.1717,3.1717 0 0 1 2.29492,0 2.588,2.588 0 0 1 0.88477,0.59668 2.68157,2.68157 0 0 1 0.57226,0.90918 3.18689,3.18689 0 0 1 0.20215,1.15137 z m -0.93164,0 a 2.706,2.706 0 0 0 -0.13086,-0.87012 1.82066,1.82066 0 0 0 -0.375,-0.65527 1.63,1.63 0 0 0 -0.59082,-0.41407 2.16795,2.16795 0 0 0 -1.55664,0 1.65411,1.65411 0 0 0 -0.59277,0.41407 1.84214,1.84214 0 0 0 -0.37891,0.65527 2.92632,2.92632 0 0 0 0,1.74316 1.83768,1.83768 0 0 0 0.37891,0.6543 1.64218,1.64218 0 0 0 0.59277,0.40918 2.19564,2.19564 0 0 0 1.55664,0 1.61829,1.61829 0 0 0 0.59082,-0.40918 1.81623,1.81623 0 0 0 0.375,-0.6543 2.71589,2.71589 0 0 0 0.13086,-0.87304 z' }), _jsx("path", { className: corner, d: 'm 112.95731,59.142 h -0.81543 a 0.377,0.377 0 0 1 -0.35156,-0.1875 l -1.31055,-1.8916 a 0.4267,0.4267 0 0 0 -0.14453,-0.14063 0.50286,0.50286 0 0 0 -0.23437,-0.043 H 109.594 V 59.142 h -0.91309 v -5.61813 h 1.6543 a 3.54427,3.54427 0 0 1 0.9541,0.11328 1.80649,1.80649 0 0 1 0.65723,0.32226 1.25606,1.25606 0 0 1 0.37988,0.501 1.76427,1.76427 0 0 1 0.0352,1.19727 1.50418,1.50418 0 0 1 -0.25293,0.46093 1.61283,1.61283 0 0 1 -0.40821,0.3584 2.04861,2.04861 0 0 1 -0.5498,0.23828 0.92346,0.92346 0 0 1 0.28906,0.28516 z m -2.64551,-2.92578 a 1.763,1.763 0 0 0 0.5459,-0.07617 1.11007,1.11007 0 0 0 0.39063,-0.21289 0.87892,0.87892 0 0 0 0.23437,-0.3252 1.10093,1.10093 0 0 0 0.0772,-0.41992 0.84276,0.84276 0 0 0 -0.30371,-0.70215 1.46527,1.46527 0 0 0 -0.9209,-0.24219 H 109.594 v 1.97852 z' }), _jsx("path", { className: corner, d: 'm 116.4954,59.142 h -0.917 v -5.61813 h 0.917 z' }), _jsx("path", { className: corner, d: 'm 121.69559,54.28461 h -1.75195 V 59.142 h -0.9082 v -4.85739 h -1.75586 v -0.76074 h 4.416 z' }), _jsx("polyline", { className: letter, style: { strokeMiterlimit: 10 }, points: '47.871 98.1 33.189 98.1 33.189 83.418', transform: 'translate(-31.392,-41.894)' }), _jsx("polyline", { className: letter, style: { strokeMiterlimit: 10 }, points: '33.142 58.326 33.142 43.644 47.824 43.644', transform: 'translate(-31.392,-41.894)' }), _jsx("polyline", { className: letter, style: { strokeMiterlimit: 10 }, points: '161.983 98.122 176.665 98.122 176.665 83.44', transform: 'translate(-31.392,-41.894)' }), _jsx("polyline", { className: letter, style: { strokeMiterlimit: 10 }, points: '176.665 58.372 176.665 43.69 161.983 43.69', transform: 'translate(-31.392,-41.894)' }), _jsx("path", { className: corner, d: 'm 30.02449,40.19351 v 4.12842 H 12.4991 V 13.99038 h 4.92871 v 26.20313 z' }), _jsx("path", { className: 'fill-login transition-all duration-1000', d: 'm 61.53523,29.1564 a 17.15942,17.15942 0 0 1 -1.09473,6.21338 14.35971,14.35971 0 0 1 -3.08593,4.89746 14.091,14.091 0 0 1 -4.78125,3.21191 17.1289,17.1289 0 0 1 -12.38575,0 13.98317,13.98317 0 0 1 -7.88867,-8.10937 18.18161,18.18161 0 0 1 0,-12.42725 14.39119,14.39119 0 0 1 3.09668,-4.90771 14.13157,14.13157 0 0 1 4.792,-3.22315 17.13565,17.13565 0 0 1 12.38575,0 14.02046,14.02046 0 0 1 4.78125,3.22315 14.47032,14.47032 0 0 1 3.08593,4.90771 17.16209,17.16209 0 0 1 1.09472,6.21387 z m -5.03418,0 a 14.62587,14.62587 0 0 0 -0.70508,-4.69727 9.9446,9.9446 0 0 0 -2.02246,-3.53906 8.80545,8.80545 0 0 0 -3.1914,-2.23242 11.719,11.719 0 0 0 -8.4043,0 8.90077,8.90077 0 0 0 -3.20117,2.23242 9.96735,9.96735 0 0 0 -2.043,3.53906 15.81644,15.81644 0 0 0 0,9.415 9.847,9.847 0 0 0 2.043,3.52832 8.85094,8.85094 0 0 0 3.20117,2.21192 11.87213,11.87213 0 0 0 8.4043,0 8.75623,8.75623 0 0 0 3.1914,-2.21192 9.82454,9.82454 0 0 0 2.02249,-3.52828 14.69371,14.69371 0 0 0 0.70505,-4.71777 z' }), _jsx("path", { className: corner, d: 'm 91.76082,29.38784 v 12.00635 a 17.5354,17.5354 0 0 1 -10.53125,3.26465 18.41512,18.41512 0 0 1 -6.667,-1.148 14.80254,14.80254 0 0 1 -5.08691,-3.20166 14.0148,14.0148 0 0 1 -3.24316,-4.897 16.691,16.691 0 0 1 -1.1377,-6.25586 17.42935,17.42935 0 0 1 1.09473,-6.2876 13.74023,13.74023 0 0 1 8.06738,-8.08838 17.7222,17.7222 0 0 1 6.48828,-1.127 19.10354,19.10354 0 0 1 3.40137,0.28418 16.85244,16.85244 0 0 1 2.917,0.79 13.68442,13.68442 0 0 1 2.48633,1.22168 13.95372,13.95372 0 0 1 2.085,1.60058 l -1.41113,2.25391 a 1.40229,1.40229 0 0 1 -0.86426,0.65283 1.47784,1.47784 0 0 1 -1.13672,-0.25244 q -0.6123,-0.35816 -1.2959,-0.7583 a 11.33129,11.33129 0 0 0 -1.56933,-0.748 11.53387,11.53387 0 0 0 -2.043,-0.56836 14.78335,14.78335 0 0 0 -2.73828,-0.22119 11.32128,11.32128 0 0 0 -4.32813,0.78955 9.26752,9.26752 0 0 0 -3.29687,2.25391 9.99164,9.99164 0 0 0 -2.10645,3.54931 13.90267,13.90267 0 0 0 -0.7373,4.65528 14.11731,14.11731 0 0 0 0.77929,4.855 10.1425,10.1425 0 0 0 2.21192,3.62305 9.43419,9.43419 0 0 0 3.46484,2.26416 13.81975,13.81975 0 0 0 7.87793,0.3789 15.14816,15.14816 0 0 0 2.875,-1.11621 v -6.02383 h -4.2334 a 1.04883,1.04883 0 0 1 -0.75879,-0.26367 0.90553,0.90553 0 0 1 -0.27343,-0.68457 v -2.80127 z' }), _jsx("path", { className: corner, d: 'M 102.546,44.32193 H 97.59581 V 13.99038 h 4.95019 z' }), _jsx("path", { className: corner, d: 'm 134.8575,13.99038 v 30.33155 h -2.50684 a 2.14219,2.14219 0 0 1 -0.96875,-0.2002 2.26108,2.26108 0 0 1 -0.75879,-0.66357 L 113.962,22.05777 q 0.063,0.61083 0.0947,1.21093 0.0322,0.60058 0.0322,1.106 v 19.94723 h -4.3398 V 13.99038 h 2.57031 a 3.89092,3.89092 0 0 1 0.53711,0.03174 1.53328,1.53328 0 0 1 0.41016,0.11572 1.18964,1.18964 0 0 1 0.35839,0.25293 4.01792,4.01792 0 0 1 0.3584,0.4209 l 16.68164,21.42188 q -0.063,-0.65259 -0.0947,-1.28467 -0.0308,-0.63208 -0.0312,-1.17969 V 13.99038 Z' })] }));
5
+ return (_jsxs("svg", { className: `block w-full max-w-2xl mx-auto ${className || ''}`, viewBox: '0 0 147.02299 59.20511', children: [_jsx("path", { className: corner, d: 'm 28.77713,58.37738 v 0.76465 H 25.531 v -5.61816 h 0.91309 v 4.85351 z' }), _jsx("path", { className: corner, d: 'm 30.47831,59.142 h -0.917 v -5.61813 h 0.917 z' }), _jsx("path", { className: corner, d: 'M 36.46268,53.52387 V 59.142 H 35.99881 A 0.36347,0.36347 0 0 1 35.6785,58.98185 L 32.59256,55.018 c 0.0078,0.07617 0.01368,0.15039 0.01758,0.22461 0.0039,0.07422 0.0059,0.14258 0.0059,0.20508 V 59.142 h -0.80371 v -5.61813 h 0.47656 a 0.71321,0.71321 0 0 1 0.09864,0.0059 0.3128,0.3128 0 0 1 0.07617,0.02148 0.22919,0.22919 0 0 1 0.0664,0.04688 0.63781,0.63781 0 0 1 0.06641,0.07812 l 3.08984,3.96779 c -0.0078,-0.08105 -0.01367,-0.16015 -0.01757,-0.23828 -0.0039,-0.07813 -0.0059,-0.15039 -0.0059,-0.21875 v -3.6631 z' }), _jsx("path", { className: corner, d: 'm 39.84549,57.1684 a 2.91264,2.91264 0 0 1 -0.11523,0.84765 1.748,1.748 0 0 1 -0.34375,0.64063 1.52483,1.52483 0 0 1 -0.56543,0.40527 2.00691,2.00691 0 0 1 -0.78223,0.14258 3.23707,3.23707 0 0 1 -0.40234,-0.0254 3.44454,3.44454 0 0 1 -0.41309,-0.0801 l 0.04688,-0.5459 a 0.2079,0.2079 0 0 1 0.06055,-0.125 0.19754,0.19754 0 0 1 0.14257,-0.0469 0.74035,0.74035 0 0 1 0.18067,0.0293 1.36468,1.36468 0 0 0 0.71387,-0.041 0.74722,0.74722 0 0 0 0.3125,-0.2207 0.9864,0.9864 0 0 0 0.1914,-0.38574 2.19551,2.19551 0 0 0 0.06445,-0.57227 v -3.667 h 0.90918 z' }), _jsx("path", { className: corner, d: 'm 44.6326,58.40473 -0.0039,0.7373 h -3.50391 v -5.61816 h 3.50391 v 0.7373 h -2.58692 v 1.69336 h 2.06739 v 0.71387 h -2.06739 v 1.73633 z' }), _jsx("path", { className: corner, d: 'M 46.53592,54.26117 V 56.06 h 2.19629 v 0.7373 h -2.19629 v 2.3447 h -0.917 v -5.61813 h 3.50391 v 0.7373 z' }), _jsx("path", { className: corner, d: 'm 55.25956,56.33344 a 3.18179,3.18179 0 0 1 -0.20215,1.15039 2.6634,2.6634 0 0 1 -0.57227,0.90722 2.59685,2.59685 0 0 1 -0.88476,0.59473 3.17156,3.17156 0 0 1 -2.29492,0 2.62415,2.62415 0 0 1 -0.88672,-0.59473 2.65327,2.65327 0 0 1 -0.57422,-0.90722 3.37717,3.37717 0 0 1 0,-2.30176 2.67118,2.67118 0 0 1 0.57422,-0.90918 2.61491,2.61491 0 0 1 0.88672,-0.59668 3.1717,3.1717 0 0 1 2.29492,0 2.58781,2.58781 0 0 1 0.88476,0.59668 2.68144,2.68144 0 0 1 0.57227,0.90918 3.1871,3.1871 0 0 1 0.20215,1.15137 z m -0.93164,0 a 2.706,2.706 0 0 0 -0.13086,-0.87012 1.821,1.821 0 0 0 -0.375,-0.65527 1.63008,1.63008 0 0 0 -0.59082,-0.41407 2.16795,2.16795 0 0 0 -1.55664,0 1.65415,1.65415 0 0 0 -0.59278,0.41407 1.84212,1.84212 0 0 0 -0.3789,0.65527 2.92611,2.92611 0 0 0 0,1.74316 1.83766,1.83766 0 0 0 0.3789,0.6543 1.64222,1.64222 0 0 0 0.59278,0.40918 2.19564,2.19564 0 0 0 1.55664,0 1.61838,1.61838 0 0 0 0.59082,-0.40918 1.81652,1.81652 0 0 0 0.375,-0.6543 2.71589,2.71589 0 0 0 0.13086,-0.87304 z' }), _jsx("path", { className: corner, d: 'm 60.534,59.142 h -0.81543 a 0.377,0.377 0 0 1 -0.35156,-0.1875 l -1.31055,-1.8916 a 0.4267,0.4267 0 0 0 -0.14453,-0.14063 0.50286,0.50286 0 0 0 -0.23437,-0.043 H 57.17072 V 59.142 H 56.2576 v -5.61813 h 1.6543 a 3.54427,3.54427 0 0 1 0.9541,0.11328 1.80649,1.80649 0 0 1 0.65723,0.32226 1.25606,1.25606 0 0 1 0.37988,0.501 1.76427,1.76427 0 0 1 0.03516,1.19727 1.50418,1.50418 0 0 1 -0.25293,0.46093 1.61283,1.61283 0 0 1 -0.40821,0.3584 2.04861,2.04861 0 0 1 -0.5498,0.23828 0.92346,0.92346 0 0 1 0.28906,0.28516 z m -2.64551,-2.92578 a 1.763,1.763 0 0 0 0.5459,-0.07617 1.11007,1.11007 0 0 0 0.39063,-0.21289 0.87892,0.87892 0 0 0 0.23437,-0.3252 1.10093,1.10093 0 0 0 0.07715,-0.41992 0.84276,0.84276 0 0 0 -0.30371,-0.70215 1.46527,1.46527 0 0 0 -0.9209,-0.24219 h -0.74121 v 1.97852 z' }), _jsx("path", { className: corner, d: 'm 64.72049,58.40473 -0.0039,0.7373 h -3.50391 v -5.61816 h 3.50391 v 0.7373 h -2.58692 v 1.69336 h 2.06739 v 0.71387 h -2.06739 v 1.73633 z' }), _jsx("path", { className: corner, d: 'M 70.35721,53.52387 V 59.142 H 69.89335 A 0.36347,0.36347 0 0 1 69.57303,58.98185 L 66.4871,55.018 c 0.0078,0.07617 0.01367,0.15039 0.01757,0.22461 0.0039,0.07422 0.0059,0.14258 0.0059,0.20508 V 59.142 h -0.80371 v -5.61813 h 0.47656 a 0.71321,0.71321 0 0 1 0.09864,0.0059 0.3128,0.3128 0 0 1 0.07617,0.02148 0.22936,0.22936 0 0 1 0.06641,0.04688 0.63869,0.63869 0 0 1 0.0664,0.07812 l 3.08985,3.96777 c -0.008,-0.08105 -0.0137,-0.16015 -0.0176,-0.23828 -0.004,-0.07813 -0.006,-0.15039 -0.006,-0.21875 v -3.66308 z' }), _jsx("path", { className: corner, d: 'm 72.6121,59.142 h -0.917 v -5.61813 h 0.917 z' }), _jsx("path", { className: corner, d: 'M 78.59794,53.52387 V 59.142 H 78.13358 A 0.36344,0.36344 0 0 1 77.81327,58.98185 L 74.72733,55.018 c 0.008,0.07617 0.0137,0.15039 0.0176,0.22461 0.004,0.07422 0.006,0.14258 0.006,0.20508 V 59.142 h -0.80371 v -5.61813 h 0.47656 a 0.713,0.713 0 0 1 0.0986,0.0059 0.31254,0.31254 0 0 1 0.0762,0.02148 0.22936,0.22936 0 0 1 0.0664,0.04688 0.63869,0.63869 0 0 1 0.0664,0.07812 l 3.08984,3.96777 c -0.008,-0.08105 -0.0137,-0.16015 -0.0176,-0.23828 -0.004,-0.07813 -0.006,-0.15039 -0.006,-0.21875 v -3.66308 z' }), _jsx("path", { className: corner, d: 'M 84.53544,56.37641 V 58.6 a 3.24425,3.24425 0 0 1 -1.9502,0.60449 3.419,3.419 0 0 1 -1.23535,-0.21289 2.7275,2.7275 0 0 1 -0.94141,-0.59277 2.59231,2.59231 0 0 1 -0.60156,-0.90723 3.08634,3.08634 0 0 1 -0.21,-1.1582 3.23536,3.23536 0 0 1 0.20215,-1.165 2.5484,2.5484 0 0 1 1.49414,-1.498 3.29189,3.29189 0 0 1 1.20215,-0.209 3.52605,3.52605 0 0 1 0.62988,0.05273 3.11559,3.11559 0 0 1 0.54,0.14649 2.535,2.535 0 0 1 0.84668,0.52246 l -0.26074,0.418 a 0.26545,0.26545 0 0 1 -0.16016,0.12109 0.27377,0.27377 0 0 1 -0.21094,-0.04688 c -0.0752,-0.04492 -0.15527,-0.09082 -0.24023,-0.14062 a 2.01137,2.01137 0 0 0 -0.29,-0.13867 2.127,2.127 0 0 0 -0.37891,-0.10547 2.72656,2.72656 0 0 0 -0.50683,-0.041 2.09434,2.09434 0 0 0 -0.80176,0.14649 1.70173,1.70173 0 0 0 -0.61035,0.418 1.84692,1.84692 0 0 0 -0.39063,0.65722 2.5766,2.5766 0 0 0 -0.13672,0.86231 2.62333,2.62333 0 0 0 0.14453,0.89844 1.88731,1.88731 0 0 0 0.41016,0.67187 1.74772,1.74772 0 0 0 0.6416,0.419 2.55647,2.55647 0 0 0 1.459,0.0703 2.80344,2.80344 0 0 0 0.53222,-0.207 V 57.07074 H 82.928 a 0.19287,0.19287 0 0 1 -0.13964,-0.04883 0.16848,0.16848 0 0 1 -0.0508,-0.12695 v -0.51855 z' }), _jsx("path", { className: corner, d: 'm 89.1243,58.40473 -0.004,0.7373 h -3.50391 v -5.61816 h 3.50391 v 0.7373 h -2.58692 v 1.69336 h 2.06739 v 0.71387 h -2.06739 v 1.73633 z' }), _jsx("path", { className: corner, d: 'M 94.761,53.52387 V 59.142 H 94.29713 A 0.36347,0.36347 0 0 1 93.97682,58.98185 L 90.8909,55.018 c 0.008,0.07617 0.0137,0.15039 0.0176,0.22461 0.004,0.07422 0.006,0.14258 0.006,0.20508 V 59.142 h -0.80371 v -5.61813 h 0.47656 a 0.71321,0.71321 0 0 1 0.0986,0.0059 0.3128,0.3128 0 0 1 0.0762,0.02148 0.22919,0.22919 0 0 1 0.0664,0.04688 0.63781,0.63781 0 0 1 0.0664,0.07812 l 3.08984,3.96777 c -0.008,-0.08105 -0.0137,-0.16015 -0.0176,-0.23828 -0.004,-0.07813 -0.006,-0.15039 -0.006,-0.21875 v -3.66308 z' }), _jsx("path", { className: corner, d: 'M 98.95829,54.26117 V 56.06 h 2.19629 v 0.7373 h -2.19629 v 2.3447 h -0.917 v -5.61813 h 3.5039 v 0.7373 z' }), _jsx("path", { className: corner, d: 'm 107.68192,56.33344 a 3.18158,3.18158 0 0 1 -0.20215,1.15039 2.66353,2.66353 0 0 1 -0.57226,0.90722 2.597,2.597 0 0 1 -0.88477,0.59473 3.17156,3.17156 0 0 1 -2.29492,0 2.62415,2.62415 0 0 1 -0.88672,-0.59473 2.65327,2.65327 0 0 1 -0.57422,-0.90722 3.37717,3.37717 0 0 1 0,-2.30176 2.67118,2.67118 0 0 1 0.57422,-0.90918 2.61491,2.61491 0 0 1 0.88672,-0.59668 3.1717,3.1717 0 0 1 2.29492,0 2.588,2.588 0 0 1 0.88477,0.59668 2.68157,2.68157 0 0 1 0.57226,0.90918 3.18689,3.18689 0 0 1 0.20215,1.15137 z m -0.93164,0 a 2.706,2.706 0 0 0 -0.13086,-0.87012 1.82066,1.82066 0 0 0 -0.375,-0.65527 1.63,1.63 0 0 0 -0.59082,-0.41407 2.16795,2.16795 0 0 0 -1.55664,0 1.65411,1.65411 0 0 0 -0.59277,0.41407 1.84214,1.84214 0 0 0 -0.37891,0.65527 2.92632,2.92632 0 0 0 0,1.74316 1.83768,1.83768 0 0 0 0.37891,0.6543 1.64218,1.64218 0 0 0 0.59277,0.40918 2.19564,2.19564 0 0 0 1.55664,0 1.61829,1.61829 0 0 0 0.59082,-0.40918 1.81623,1.81623 0 0 0 0.375,-0.6543 2.71589,2.71589 0 0 0 0.13086,-0.87304 z' }), _jsx("path", { className: corner, d: 'm 112.95731,59.142 h -0.81543 a 0.377,0.377 0 0 1 -0.35156,-0.1875 l -1.31055,-1.8916 a 0.4267,0.4267 0 0 0 -0.14453,-0.14063 0.50286,0.50286 0 0 0 -0.23437,-0.043 H 109.594 V 59.142 h -0.91309 v -5.61813 h 1.6543 a 3.54427,3.54427 0 0 1 0.9541,0.11328 1.80649,1.80649 0 0 1 0.65723,0.32226 1.25606,1.25606 0 0 1 0.37988,0.501 1.76427,1.76427 0 0 1 0.0352,1.19727 1.50418,1.50418 0 0 1 -0.25293,0.46093 1.61283,1.61283 0 0 1 -0.40821,0.3584 2.04861,2.04861 0 0 1 -0.5498,0.23828 0.92346,0.92346 0 0 1 0.28906,0.28516 z m -2.64551,-2.92578 a 1.763,1.763 0 0 0 0.5459,-0.07617 1.11007,1.11007 0 0 0 0.39063,-0.21289 0.87892,0.87892 0 0 0 0.23437,-0.3252 1.10093,1.10093 0 0 0 0.0772,-0.41992 0.84276,0.84276 0 0 0 -0.30371,-0.70215 1.46527,1.46527 0 0 0 -0.9209,-0.24219 H 109.594 v 1.97852 z' }), _jsx("path", { className: corner, d: 'm 116.4954,59.142 h -0.917 v -5.61813 h 0.917 z' }), _jsx("path", { className: corner, d: 'm 121.69559,54.28461 h -1.75195 V 59.142 h -0.9082 v -4.85739 h -1.75586 v -0.76074 h 4.416 z' }), _jsx("polyline", { className: letter, style: { strokeMiterlimit: 10 }, points: '47.871 98.1 33.189 98.1 33.189 83.418', transform: 'translate(-31.392,-41.894)' }), _jsx("polyline", { className: letter, style: { strokeMiterlimit: 10 }, points: '33.142 58.326 33.142 43.644 47.824 43.644', transform: 'translate(-31.392,-41.894)' }), _jsx("polyline", { className: letter, style: { strokeMiterlimit: 10 }, points: '161.983 98.122 176.665 98.122 176.665 83.44', transform: 'translate(-31.392,-41.894)' }), _jsx("polyline", { className: letter, style: { strokeMiterlimit: 10 }, points: '176.665 58.372 176.665 43.69 161.983 43.69', transform: 'translate(-31.392,-41.894)' }), _jsx("path", { className: corner, d: 'm 30.02449,40.19351 v 4.12842 H 12.4991 V 13.99038 h 4.92871 v 26.20313 z' }), _jsx("path", { className: corner, d: 'm 61.53523,29.1564 a 17.15942,17.15942 0 0 1 -1.09473,6.21338 14.35971,14.35971 0 0 1 -3.08593,4.89746 14.091,14.091 0 0 1 -4.78125,3.21191 17.1289,17.1289 0 0 1 -12.38575,0 13.98317,13.98317 0 0 1 -7.88867,-8.10937 18.18161,18.18161 0 0 1 0,-12.42725 14.39119,14.39119 0 0 1 3.09668,-4.90771 14.13157,14.13157 0 0 1 4.792,-3.22315 17.13565,17.13565 0 0 1 12.38575,0 14.02046,14.02046 0 0 1 4.78125,3.22315 14.47032,14.47032 0 0 1 3.08593,4.90771 17.16209,17.16209 0 0 1 1.09472,6.21387 z m -5.03418,0 a 14.62587,14.62587 0 0 0 -0.70508,-4.69727 9.9446,9.9446 0 0 0 -2.02246,-3.53906 8.80545,8.80545 0 0 0 -3.1914,-2.23242 11.719,11.719 0 0 0 -8.4043,0 8.90077,8.90077 0 0 0 -3.20117,2.23242 9.96735,9.96735 0 0 0 -2.043,3.53906 15.81644,15.81644 0 0 0 0,9.415 9.847,9.847 0 0 0 2.043,3.52832 8.85094,8.85094 0 0 0 3.20117,2.21192 11.87213,11.87213 0 0 0 8.4043,0 8.75623,8.75623 0 0 0 3.1914,-2.21192 9.82454,9.82454 0 0 0 2.02249,-3.52828 14.69371,14.69371 0 0 0 0.70505,-4.71777 z' }), _jsx("path", { className: corner, d: 'm 91.76082,29.38784 v 12.00635 a 17.5354,17.5354 0 0 1 -10.53125,3.26465 18.41512,18.41512 0 0 1 -6.667,-1.148 14.80254,14.80254 0 0 1 -5.08691,-3.20166 14.0148,14.0148 0 0 1 -3.24316,-4.897 16.691,16.691 0 0 1 -1.1377,-6.25586 17.42935,17.42935 0 0 1 1.09473,-6.2876 13.74023,13.74023 0 0 1 8.06738,-8.08838 17.7222,17.7222 0 0 1 6.48828,-1.127 19.10354,19.10354 0 0 1 3.40137,0.28418 16.85244,16.85244 0 0 1 2.917,0.79 13.68442,13.68442 0 0 1 2.48633,1.22168 13.95372,13.95372 0 0 1 2.085,1.60058 l -1.41113,2.25391 a 1.40229,1.40229 0 0 1 -0.86426,0.65283 1.47784,1.47784 0 0 1 -1.13672,-0.25244 q -0.6123,-0.35816 -1.2959,-0.7583 a 11.33129,11.33129 0 0 0 -1.56933,-0.748 11.53387,11.53387 0 0 0 -2.043,-0.56836 14.78335,14.78335 0 0 0 -2.73828,-0.22119 11.32128,11.32128 0 0 0 -4.32813,0.78955 9.26752,9.26752 0 0 0 -3.29687,2.25391 9.99164,9.99164 0 0 0 -2.10645,3.54931 13.90267,13.90267 0 0 0 -0.7373,4.65528 14.11731,14.11731 0 0 0 0.77929,4.855 10.1425,10.1425 0 0 0 2.21192,3.62305 9.43419,9.43419 0 0 0 3.46484,2.26416 13.81975,13.81975 0 0 0 7.87793,0.3789 15.14816,15.14816 0 0 0 2.875,-1.11621 v -6.02383 h -4.2334 a 1.04883,1.04883 0 0 1 -0.75879,-0.26367 0.90553,0.90553 0 0 1 -0.27343,-0.68457 v -2.80127 z' }), _jsx("path", { className: corner, d: 'M 102.546,44.32193 H 97.59581 V 13.99038 h 4.95019 z' }), _jsx("path", { className: corner, d: 'm 134.8575,13.99038 v 30.33155 h -2.50684 a 2.14219,2.14219 0 0 1 -0.96875,-0.2002 2.26108,2.26108 0 0 1 -0.75879,-0.66357 L 113.962,22.05777 q 0.063,0.61083 0.0947,1.21093 0.0322,0.60058 0.0322,1.106 v 19.94723 h -4.3398 V 13.99038 h 2.57031 a 3.89092,3.89092 0 0 1 0.53711,0.03174 1.53328,1.53328 0 0 1 0.41016,0.11572 1.18964,1.18964 0 0 1 0.35839,0.25293 4.01792,4.01792 0 0 1 0.3584,0.4209 l 16.68164,21.42188 q -0.063,-0.65259 -0.0947,-1.28467 -0.0308,-0.63208 -0.0312,-1.17969 V 13.99038 Z' })] }));
6
6
  }
@@ -299,6 +299,9 @@
299
299
  .top-1\/2 {
300
300
  top: calc(1/2 * 100%);
301
301
  }
302
+ .top-2 {
303
+ top: calc(var(--spacing) * 2);
304
+ }
302
305
  .top-4 {
303
306
  top: calc(var(--spacing) * 4);
304
307
  }
@@ -317,6 +320,9 @@
317
320
  .right-0 {
318
321
  right: calc(var(--spacing) * 0);
319
322
  }
323
+ .right-2 {
324
+ right: calc(var(--spacing) * 2);
325
+ }
320
326
  .right-4 {
321
327
  right: calc(var(--spacing) * 4);
322
328
  }
@@ -359,6 +365,421 @@
359
365
  .mx-auto {
360
366
  margin-inline: auto;
361
367
  }
368
+ .prose {
369
+ color: var(--tw-prose-body);
370
+ max-width: 65ch;
371
+ :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
372
+ margin-top: 1.25em;
373
+ margin-bottom: 1.25em;
374
+ }
375
+ :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
376
+ color: var(--tw-prose-lead);
377
+ font-size: 1.25em;
378
+ line-height: 1.6;
379
+ margin-top: 1.2em;
380
+ margin-bottom: 1.2em;
381
+ }
382
+ :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
383
+ color: var(--tw-prose-links);
384
+ text-decoration: underline;
385
+ font-weight: 500;
386
+ }
387
+ :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
388
+ color: var(--tw-prose-bold);
389
+ font-weight: 600;
390
+ }
391
+ :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
392
+ color: inherit;
393
+ }
394
+ :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
395
+ color: inherit;
396
+ }
397
+ :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
398
+ color: inherit;
399
+ }
400
+ :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
401
+ list-style-type: decimal;
402
+ margin-top: 1.25em;
403
+ margin-bottom: 1.25em;
404
+ padding-inline-start: 1.625em;
405
+ }
406
+ :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
407
+ list-style-type: upper-alpha;
408
+ }
409
+ :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
410
+ list-style-type: lower-alpha;
411
+ }
412
+ :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
413
+ list-style-type: upper-alpha;
414
+ }
415
+ :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
416
+ list-style-type: lower-alpha;
417
+ }
418
+ :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
419
+ list-style-type: upper-roman;
420
+ }
421
+ :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
422
+ list-style-type: lower-roman;
423
+ }
424
+ :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
425
+ list-style-type: upper-roman;
426
+ }
427
+ :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
428
+ list-style-type: lower-roman;
429
+ }
430
+ :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
431
+ list-style-type: decimal;
432
+ }
433
+ :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
434
+ list-style-type: disc;
435
+ margin-top: 1.25em;
436
+ margin-bottom: 1.25em;
437
+ padding-inline-start: 1.625em;
438
+ }
439
+ :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
440
+ font-weight: 400;
441
+ color: var(--tw-prose-counters);
442
+ }
443
+ :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
444
+ color: var(--tw-prose-bullets);
445
+ }
446
+ :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
447
+ color: var(--tw-prose-headings);
448
+ font-weight: 600;
449
+ margin-top: 1.25em;
450
+ }
451
+ :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
452
+ border-color: var(--tw-prose-hr);
453
+ border-top-width: 1px;
454
+ margin-top: 3em;
455
+ margin-bottom: 3em;
456
+ }
457
+ :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
458
+ font-weight: 500;
459
+ font-style: italic;
460
+ color: var(--tw-prose-quotes);
461
+ border-inline-start-width: 0.25rem;
462
+ border-inline-start-color: var(--tw-prose-quote-borders);
463
+ quotes: "\201C""\201D""\2018""\2019";
464
+ margin-top: 1.6em;
465
+ margin-bottom: 1.6em;
466
+ padding-inline-start: 1em;
467
+ }
468
+ :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
469
+ content: open-quote;
470
+ }
471
+ :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
472
+ content: close-quote;
473
+ }
474
+ :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
475
+ color: var(--tw-prose-headings);
476
+ font-weight: 800;
477
+ font-size: 2.25em;
478
+ margin-top: 0;
479
+ margin-bottom: 0.8888889em;
480
+ line-height: 1.1111111;
481
+ }
482
+ :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
483
+ font-weight: 900;
484
+ color: inherit;
485
+ }
486
+ :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
487
+ color: var(--tw-prose-headings);
488
+ font-weight: 700;
489
+ font-size: 1.5em;
490
+ margin-top: 2em;
491
+ margin-bottom: 1em;
492
+ line-height: 1.3333333;
493
+ }
494
+ :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
495
+ font-weight: 800;
496
+ color: inherit;
497
+ }
498
+ :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
499
+ color: var(--tw-prose-headings);
500
+ font-weight: 600;
501
+ font-size: 1.25em;
502
+ margin-top: 1.6em;
503
+ margin-bottom: 0.6em;
504
+ line-height: 1.6;
505
+ }
506
+ :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
507
+ font-weight: 700;
508
+ color: inherit;
509
+ }
510
+ :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
511
+ color: var(--tw-prose-headings);
512
+ font-weight: 600;
513
+ margin-top: 1.5em;
514
+ margin-bottom: 0.5em;
515
+ line-height: 1.5;
516
+ }
517
+ :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
518
+ font-weight: 700;
519
+ color: inherit;
520
+ }
521
+ :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
522
+ margin-top: 2em;
523
+ margin-bottom: 2em;
524
+ }
525
+ :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
526
+ display: block;
527
+ margin-top: 2em;
528
+ margin-bottom: 2em;
529
+ }
530
+ :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
531
+ margin-top: 2em;
532
+ margin-bottom: 2em;
533
+ }
534
+ :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
535
+ font-weight: 500;
536
+ font-family: inherit;
537
+ color: var(--tw-prose-kbd);
538
+ box-shadow: 0 0 0 1px var(--tw-prose-kbd-shadows), 0 3px 0 var(--tw-prose-kbd-shadows);
539
+ font-size: 0.875em;
540
+ border-radius: 0.3125rem;
541
+ padding-top: 0.1875em;
542
+ padding-inline-end: 0.375em;
543
+ padding-bottom: 0.1875em;
544
+ padding-inline-start: 0.375em;
545
+ }
546
+ :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
547
+ color: var(--tw-prose-code);
548
+ font-weight: 600;
549
+ font-size: 0.875em;
550
+ }
551
+ :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
552
+ content: "`";
553
+ }
554
+ :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
555
+ content: "`";
556
+ }
557
+ :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
558
+ color: inherit;
559
+ }
560
+ :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
561
+ color: inherit;
562
+ }
563
+ :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
564
+ color: inherit;
565
+ font-size: 0.875em;
566
+ }
567
+ :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
568
+ color: inherit;
569
+ font-size: 0.9em;
570
+ }
571
+ :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
572
+ color: inherit;
573
+ }
574
+ :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
575
+ color: inherit;
576
+ }
577
+ :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
578
+ color: inherit;
579
+ }
580
+ :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
581
+ color: var(--tw-prose-pre-code);
582
+ background-color: var(--tw-prose-pre-bg);
583
+ overflow-x: auto;
584
+ font-weight: 400;
585
+ font-size: 0.875em;
586
+ line-height: 1.7142857;
587
+ margin-top: 1.7142857em;
588
+ margin-bottom: 1.7142857em;
589
+ border-radius: 0.375rem;
590
+ padding-top: 0.8571429em;
591
+ padding-inline-end: 1.1428571em;
592
+ padding-bottom: 0.8571429em;
593
+ padding-inline-start: 1.1428571em;
594
+ }
595
+ :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
596
+ background-color: transparent;
597
+ border-width: 0;
598
+ border-radius: 0;
599
+ padding: 0;
600
+ font-weight: inherit;
601
+ color: inherit;
602
+ font-size: inherit;
603
+ font-family: inherit;
604
+ line-height: inherit;
605
+ }
606
+ :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
607
+ content: none;
608
+ }
609
+ :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
610
+ content: none;
611
+ }
612
+ :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
613
+ width: 100%;
614
+ table-layout: auto;
615
+ margin-top: 2em;
616
+ margin-bottom: 2em;
617
+ font-size: 0.875em;
618
+ line-height: 1.7142857;
619
+ }
620
+ :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
621
+ border-bottom-width: 1px;
622
+ border-bottom-color: var(--tw-prose-th-borders);
623
+ }
624
+ :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
625
+ color: var(--tw-prose-headings);
626
+ font-weight: 600;
627
+ vertical-align: bottom;
628
+ padding-inline-end: 0.5714286em;
629
+ padding-bottom: 0.5714286em;
630
+ padding-inline-start: 0.5714286em;
631
+ }
632
+ :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
633
+ border-bottom-width: 1px;
634
+ border-bottom-color: var(--tw-prose-td-borders);
635
+ }
636
+ :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
637
+ border-bottom-width: 0;
638
+ }
639
+ :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
640
+ vertical-align: baseline;
641
+ }
642
+ :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
643
+ border-top-width: 1px;
644
+ border-top-color: var(--tw-prose-th-borders);
645
+ }
646
+ :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
647
+ vertical-align: top;
648
+ }
649
+ :where(th, td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
650
+ text-align: start;
651
+ }
652
+ :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
653
+ margin-top: 0;
654
+ margin-bottom: 0;
655
+ }
656
+ :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
657
+ color: var(--tw-prose-captions);
658
+ font-size: 0.875em;
659
+ line-height: 1.4285714;
660
+ margin-top: 0.8571429em;
661
+ }
662
+ --tw-prose-body: oklch(37.3% 0.034 259.733);
663
+ --tw-prose-headings: oklch(21% 0.034 264.665);
664
+ --tw-prose-lead: oklch(44.6% 0.03 256.802);
665
+ --tw-prose-links: oklch(21% 0.034 264.665);
666
+ --tw-prose-bold: oklch(21% 0.034 264.665);
667
+ --tw-prose-counters: oklch(55.1% 0.027 264.364);
668
+ --tw-prose-bullets: oklch(87.2% 0.01 258.338);
669
+ --tw-prose-hr: oklch(92.8% 0.006 264.531);
670
+ --tw-prose-quotes: oklch(21% 0.034 264.665);
671
+ --tw-prose-quote-borders: oklch(92.8% 0.006 264.531);
672
+ --tw-prose-captions: oklch(55.1% 0.027 264.364);
673
+ --tw-prose-kbd: oklch(21% 0.034 264.665);
674
+ --tw-prose-kbd-shadows: color-mix(in oklab, oklch(21% 0.034 264.665) 10%, transparent);
675
+ --tw-prose-code: oklch(21% 0.034 264.665);
676
+ --tw-prose-pre-code: oklch(92.8% 0.006 264.531);
677
+ --tw-prose-pre-bg: oklch(27.8% 0.033 256.848);
678
+ --tw-prose-th-borders: oklch(87.2% 0.01 258.338);
679
+ --tw-prose-td-borders: oklch(92.8% 0.006 264.531);
680
+ --tw-prose-invert-body: oklch(87.2% 0.01 258.338);
681
+ --tw-prose-invert-headings: #fff;
682
+ --tw-prose-invert-lead: oklch(70.7% 0.022 261.325);
683
+ --tw-prose-invert-links: #fff;
684
+ --tw-prose-invert-bold: #fff;
685
+ --tw-prose-invert-counters: oklch(70.7% 0.022 261.325);
686
+ --tw-prose-invert-bullets: oklch(44.6% 0.03 256.802);
687
+ --tw-prose-invert-hr: oklch(37.3% 0.034 259.733);
688
+ --tw-prose-invert-quotes: oklch(96.7% 0.003 264.542);
689
+ --tw-prose-invert-quote-borders: oklch(37.3% 0.034 259.733);
690
+ --tw-prose-invert-captions: oklch(70.7% 0.022 261.325);
691
+ --tw-prose-invert-kbd: #fff;
692
+ --tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%);
693
+ --tw-prose-invert-code: #fff;
694
+ --tw-prose-invert-pre-code: oklch(87.2% 0.01 258.338);
695
+ --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
696
+ --tw-prose-invert-th-borders: oklch(44.6% 0.03 256.802);
697
+ --tw-prose-invert-td-borders: oklch(37.3% 0.034 259.733);
698
+ font-size: 1rem;
699
+ line-height: 1.75;
700
+ :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
701
+ margin-top: 0;
702
+ margin-bottom: 0;
703
+ }
704
+ :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
705
+ margin-top: 0.5em;
706
+ margin-bottom: 0.5em;
707
+ }
708
+ :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
709
+ padding-inline-start: 0.375em;
710
+ }
711
+ :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
712
+ padding-inline-start: 0.375em;
713
+ }
714
+ :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
715
+ margin-top: 0.75em;
716
+ margin-bottom: 0.75em;
717
+ }
718
+ :where(.prose > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
719
+ margin-top: 1.25em;
720
+ }
721
+ :where(.prose > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
722
+ margin-bottom: 1.25em;
723
+ }
724
+ :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
725
+ margin-top: 1.25em;
726
+ }
727
+ :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
728
+ margin-bottom: 1.25em;
729
+ }
730
+ :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
731
+ margin-top: 0.75em;
732
+ margin-bottom: 0.75em;
733
+ }
734
+ :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
735
+ margin-top: 1.25em;
736
+ margin-bottom: 1.25em;
737
+ }
738
+ :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
739
+ margin-top: 0.5em;
740
+ padding-inline-start: 1.625em;
741
+ }
742
+ :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
743
+ margin-top: 0;
744
+ }
745
+ :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
746
+ margin-top: 0;
747
+ }
748
+ :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
749
+ margin-top: 0;
750
+ }
751
+ :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
752
+ margin-top: 0;
753
+ }
754
+ :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
755
+ padding-inline-start: 0;
756
+ }
757
+ :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
758
+ padding-inline-end: 0;
759
+ }
760
+ :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
761
+ padding-top: 0.5714286em;
762
+ padding-inline-end: 0.5714286em;
763
+ padding-bottom: 0.5714286em;
764
+ padding-inline-start: 0.5714286em;
765
+ }
766
+ :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
767
+ padding-inline-start: 0;
768
+ }
769
+ :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
770
+ padding-inline-end: 0;
771
+ }
772
+ :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
773
+ margin-top: 2em;
774
+ margin-bottom: 2em;
775
+ }
776
+ :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
777
+ margin-top: 0;
778
+ }
779
+ :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
780
+ margin-bottom: 0;
781
+ }
782
+ }
362
783
  .highlighted-section {
363
784
  line-height: 1.8rem;
364
785
  border-left: .3rem solid var(--color-login);
@@ -369,6 +790,205 @@
369
790
  font-size: 1.2rem;
370
791
  font-weight: 500;
371
792
  }
793
+ .prose-sm {
794
+ font-size: 0.875rem;
795
+ line-height: 1.7142857;
796
+ :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
797
+ margin-top: 1.1428571em;
798
+ margin-bottom: 1.1428571em;
799
+ }
800
+ :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
801
+ font-size: 1.2857143em;
802
+ line-height: 1.5555556;
803
+ margin-top: 0.8888889em;
804
+ margin-bottom: 0.8888889em;
805
+ }
806
+ :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
807
+ margin-top: 1.3333333em;
808
+ margin-bottom: 1.3333333em;
809
+ padding-inline-start: 1.1111111em;
810
+ }
811
+ :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
812
+ font-size: 2.1428571em;
813
+ margin-top: 0;
814
+ margin-bottom: 0.8em;
815
+ line-height: 1.2;
816
+ }
817
+ :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
818
+ font-size: 1.4285714em;
819
+ margin-top: 1.6em;
820
+ margin-bottom: 0.8em;
821
+ line-height: 1.4;
822
+ }
823
+ :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
824
+ font-size: 1.2857143em;
825
+ margin-top: 1.5555556em;
826
+ margin-bottom: 0.4444444em;
827
+ line-height: 1.5555556;
828
+ }
829
+ :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
830
+ margin-top: 1.4285714em;
831
+ margin-bottom: 0.5714286em;
832
+ line-height: 1.4285714;
833
+ }
834
+ :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
835
+ margin-top: 1.7142857em;
836
+ margin-bottom: 1.7142857em;
837
+ }
838
+ :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
839
+ margin-top: 1.7142857em;
840
+ margin-bottom: 1.7142857em;
841
+ }
842
+ :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
843
+ margin-top: 0;
844
+ margin-bottom: 0;
845
+ }
846
+ :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
847
+ margin-top: 1.7142857em;
848
+ margin-bottom: 1.7142857em;
849
+ }
850
+ :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
851
+ font-size: 0.8571429em;
852
+ border-radius: 0.3125rem;
853
+ padding-top: 0.1428571em;
854
+ padding-inline-end: 0.3571429em;
855
+ padding-bottom: 0.1428571em;
856
+ padding-inline-start: 0.3571429em;
857
+ }
858
+ :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
859
+ font-size: 0.8571429em;
860
+ }
861
+ :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
862
+ font-size: 0.9em;
863
+ }
864
+ :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
865
+ font-size: 0.8888889em;
866
+ }
867
+ :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
868
+ font-size: 0.8571429em;
869
+ line-height: 1.6666667;
870
+ margin-top: 1.6666667em;
871
+ margin-bottom: 1.6666667em;
872
+ border-radius: 0.25rem;
873
+ padding-top: 0.6666667em;
874
+ padding-inline-end: 1em;
875
+ padding-bottom: 0.6666667em;
876
+ padding-inline-start: 1em;
877
+ }
878
+ :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
879
+ margin-top: 1.1428571em;
880
+ margin-bottom: 1.1428571em;
881
+ padding-inline-start: 1.5714286em;
882
+ }
883
+ :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
884
+ margin-top: 1.1428571em;
885
+ margin-bottom: 1.1428571em;
886
+ padding-inline-start: 1.5714286em;
887
+ }
888
+ :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
889
+ margin-top: 0.2857143em;
890
+ margin-bottom: 0.2857143em;
891
+ }
892
+ :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
893
+ padding-inline-start: 0.4285714em;
894
+ }
895
+ :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
896
+ padding-inline-start: 0.4285714em;
897
+ }
898
+ :where(.prose-sm > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
899
+ margin-top: 0.5714286em;
900
+ margin-bottom: 0.5714286em;
901
+ }
902
+ :where(.prose-sm > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
903
+ margin-top: 1.1428571em;
904
+ }
905
+ :where(.prose-sm > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
906
+ margin-bottom: 1.1428571em;
907
+ }
908
+ :where(.prose-sm > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
909
+ margin-top: 1.1428571em;
910
+ }
911
+ :where(.prose-sm > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
912
+ margin-bottom: 1.1428571em;
913
+ }
914
+ :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
915
+ margin-top: 0.5714286em;
916
+ margin-bottom: 0.5714286em;
917
+ }
918
+ :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
919
+ margin-top: 1.1428571em;
920
+ margin-bottom: 1.1428571em;
921
+ }
922
+ :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
923
+ margin-top: 1.1428571em;
924
+ }
925
+ :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
926
+ margin-top: 0.2857143em;
927
+ padding-inline-start: 1.5714286em;
928
+ }
929
+ :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
930
+ margin-top: 2.8571429em;
931
+ margin-bottom: 2.8571429em;
932
+ }
933
+ :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
934
+ margin-top: 0;
935
+ }
936
+ :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
937
+ margin-top: 0;
938
+ }
939
+ :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
940
+ margin-top: 0;
941
+ }
942
+ :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
943
+ margin-top: 0;
944
+ }
945
+ :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
946
+ font-size: 0.8571429em;
947
+ line-height: 1.5;
948
+ }
949
+ :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
950
+ padding-inline-end: 1em;
951
+ padding-bottom: 0.6666667em;
952
+ padding-inline-start: 1em;
953
+ }
954
+ :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
955
+ padding-inline-start: 0;
956
+ }
957
+ :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
958
+ padding-inline-end: 0;
959
+ }
960
+ :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
961
+ padding-top: 0.6666667em;
962
+ padding-inline-end: 1em;
963
+ padding-bottom: 0.6666667em;
964
+ padding-inline-start: 1em;
965
+ }
966
+ :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
967
+ padding-inline-start: 0;
968
+ }
969
+ :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
970
+ padding-inline-end: 0;
971
+ }
972
+ :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
973
+ margin-top: 1.7142857em;
974
+ margin-bottom: 1.7142857em;
975
+ }
976
+ :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
977
+ margin-top: 0;
978
+ margin-bottom: 0;
979
+ }
980
+ :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
981
+ font-size: 0.8571429em;
982
+ line-height: 1.3333333;
983
+ margin-top: 0.6666667em;
984
+ }
985
+ :where(.prose-sm > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
986
+ margin-top: 0;
987
+ }
988
+ :where(.prose-sm > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
989
+ margin-bottom: 0;
990
+ }
991
+ }
372
992
  .-mt-0\.5 {
373
993
  margin-top: calc(var(--spacing) * -0.5);
374
994
  }
@@ -544,6 +1164,9 @@
544
1164
  .max-w-md {
545
1165
  max-width: var(--container-md);
546
1166
  }
1167
+ .max-w-none {
1168
+ max-width: none;
1169
+ }
547
1170
  .max-w-sm {
548
1171
  max-width: var(--container-sm);
549
1172
  }
@@ -690,6 +1313,9 @@
690
1313
  .overflow-hidden {
691
1314
  overflow: hidden;
692
1315
  }
1316
+ .overflow-y-auto {
1317
+ overflow-y: auto;
1318
+ }
693
1319
  .rounded {
694
1320
  border-radius: 0.25rem;
695
1321
  }
@@ -1144,6 +1770,26 @@
1144
1770
  --tw-ease: var(--ease-out);
1145
1771
  transition-timing-function: var(--ease-out);
1146
1772
  }
1773
+ .prose-invert {
1774
+ --tw-prose-body: var(--tw-prose-invert-body);
1775
+ --tw-prose-headings: var(--tw-prose-invert-headings);
1776
+ --tw-prose-lead: var(--tw-prose-invert-lead);
1777
+ --tw-prose-links: var(--tw-prose-invert-links);
1778
+ --tw-prose-bold: var(--tw-prose-invert-bold);
1779
+ --tw-prose-counters: var(--tw-prose-invert-counters);
1780
+ --tw-prose-bullets: var(--tw-prose-invert-bullets);
1781
+ --tw-prose-hr: var(--tw-prose-invert-hr);
1782
+ --tw-prose-quotes: var(--tw-prose-invert-quotes);
1783
+ --tw-prose-quote-borders: var(--tw-prose-invert-quote-borders);
1784
+ --tw-prose-captions: var(--tw-prose-invert-captions);
1785
+ --tw-prose-kbd: var(--tw-prose-invert-kbd);
1786
+ --tw-prose-kbd-shadows: var(--tw-prose-invert-kbd-shadows);
1787
+ --tw-prose-code: var(--tw-prose-invert-code);
1788
+ --tw-prose-pre-code: var(--tw-prose-invert-pre-code);
1789
+ --tw-prose-pre-bg: var(--tw-prose-invert-pre-bg);
1790
+ --tw-prose-th-borders: var(--tw-prose-invert-th-borders);
1791
+ --tw-prose-td-borders: var(--tw-prose-invert-td-borders);
1792
+ }
1147
1793
  .outline-none {
1148
1794
  --tw-outline-style: none;
1149
1795
  outline-style: none;
@@ -1353,6 +1999,16 @@
1353
1999
  }
1354
2000
  }
1355
2001
  }
2002
+ .hover\:bg-login-500\/50 {
2003
+ &:hover {
2004
+ @media (hover: hover) {
2005
+ background-color: color-mix(in srgb, #323232 50%, transparent);
2006
+ @supports (color: color-mix(in lab, red, red)) {
2007
+ background-color: color-mix(in oklab, var(--color-login-500) 50%, transparent);
2008
+ }
2009
+ }
2010
+ }
2011
+ }
1356
2012
  .hover\:bg-login-500\/90 {
1357
2013
  &:hover {
1358
2014
  @media (hover: hover) {
@@ -1,6 +1,7 @@
1
+ import typography from '@tailwindcss/typography';
1
2
  const tailwindConfig = {
2
3
  content: ['./app/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
3
4
  theme: { extend: {} },
4
- plugins: [],
5
+ plugins: [typography],
5
6
  };
6
7
  export default tailwindConfig;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "uibee",
3
- "version": "2.7.7",
3
+ "version": "2.7.9",
4
4
  "description": "Shared components, functions and hooks for reuse across Login projects",
5
5
  "homepage": "https://github.com/Login-Linjeforening-for-IT/uibee#readme",
6
6
  "bugs": {
@@ -40,6 +40,7 @@
40
40
  "@next/eslint-plugin-next": "16.1.1",
41
41
  "@stylistic/eslint-plugin": "^5.6.1",
42
42
  "@tailwindcss/postcss": "^4.1.18",
43
+ "@tailwindcss/typography": "^0.5.19",
43
44
  "@types/node": "^25.0.3",
44
45
  "@types/react": "19.2.7",
45
46
  "eslint": "^9.39.2",
@@ -53,6 +54,7 @@
53
54
  "dependencies": {
54
55
  "lucide-react": "^0.562.0",
55
56
  "react-dom": "19.2.3",
57
+ "react-markdown": "^10.1.0",
56
58
  "utilbee": "^1.1.0"
57
59
  }
58
60
  }
@@ -40,7 +40,7 @@ export default function Input({
40
40
 
41
41
  const isDateType = ['date', 'datetime-local', 'time'].includes(type as string)
42
42
 
43
- const handleIconClick = () => {
43
+ function handleIconClick() {
44
44
  if (isDateType && !disabled) {
45
45
  setIsOpen(!isOpen)
46
46
  } else if (localRef.current && !disabled) {
@@ -48,7 +48,7 @@ export default function Input({
48
48
  }
49
49
  }
50
50
 
51
- const handleDateChange = (date: Date) => {
51
+ function handleDateChange(date: Date) {
52
52
  if (!onChange) return
53
53
 
54
54
  const pad = (n: number) => n.toString().padStart(2, '0')
@@ -82,7 +82,7 @@ export default function Input({
82
82
  }
83
83
  }
84
84
 
85
- const getDateValue = () => {
85
+ function getDateValue() {
86
86
  if (!value) return null
87
87
  if (type === 'time') {
88
88
  const date = new Date(`2000-01-01T${value}`)
@@ -52,7 +52,7 @@ export default function Select({
52
52
 
53
53
  const containerRef = useClickOutside<HTMLDivElement>(() => setIsOpen(false))
54
54
 
55
- const handleSelect = (option: Option) => {
55
+ function handleSelect(option: Option) {
56
56
  if (disabled) return
57
57
  setSelectedOption(option)
58
58
  setIsOpen(false)
@@ -61,7 +61,7 @@ export default function Select({
61
61
  }
62
62
  }
63
63
 
64
- const handleClear = (e: React.MouseEvent) => {
64
+ function handleClear(e: React.MouseEvent) {
65
65
  e.stopPropagation()
66
66
  if (disabled) return
67
67
  setSelectedOption(undefined)
@@ -36,7 +36,7 @@ export default function DateTimePickerPopup({
36
36
  }
37
37
  }, [value])
38
38
 
39
- const handleDateSelect = (day: number) => {
39
+ function handleDateSelect(day: number) {
40
40
  const newDate = new Date(currentDate)
41
41
  newDate.setDate(day)
42
42
 
@@ -54,7 +54,7 @@ export default function DateTimePickerPopup({
54
54
  }
55
55
  }
56
56
 
57
- const handleTimeChange = (timeUnit: 'hours' | 'minutes', val: number) => {
57
+ function handleTimeChange(timeUnit: 'hours' | 'minutes', val: number) {
58
58
  const newDate = value ? new Date(value) : new Date()
59
59
  if (!value) {
60
60
  newDate.setHours(0, 0, 0, 0)
@@ -72,7 +72,7 @@ export default function DateTimePickerPopup({
72
72
  onChange(newDate)
73
73
  }
74
74
 
75
- const onTimeInputChange = (unit: 'hours' | 'minutes', val: string) => {
75
+ function onTimeInputChange(unit: 'hours' | 'minutes', val: string) {
76
76
  if (val === '') {
77
77
  setTimeInput(prev => ({ ...prev, [unit]: '' }))
78
78
  handleTimeChange(unit, 0)
@@ -90,17 +90,22 @@ export default function DateTimePickerPopup({
90
90
  handleTimeChange(unit, num)
91
91
  }
92
92
 
93
- const onTimeInputBlur = (unit: 'hours' | 'minutes') => {
93
+ function onTimeInputBlur(unit: 'hours' | 'minutes') {
94
94
  if (timeInput[unit] === '') {
95
95
  const num = unit === 'hours' ? (value?.getHours() ?? 0) : (value?.getMinutes() ?? 0)
96
96
  setTimeInput(prev => ({ ...prev, [unit]: num.toString() }))
97
97
  }
98
98
  }
99
99
 
100
- const getDaysInMonth = (year: number, month: number) => new Date(year, month + 1, 0).getDate()
101
- const getFirstDayOfMonth = (year: number, month: number) => new Date(year, month, 1).getDay()
100
+ function getDaysInMonth(year: number, month: number) {
101
+ return new Date(year, month + 1, 0).getDate()
102
+ }
103
+
104
+ function getFirstDayOfMonth(year: number, month: number) {
105
+ return new Date(year, month, 1).getDay()
106
+ }
102
107
 
103
- const renderCalendar = () => {
108
+ function renderCalendar() {
104
109
  const year = currentDate.getFullYear()
105
110
  const month = currentDate.getMonth()
106
111
  const daysInMonth = getDaysInMonth(year, month)
@@ -174,7 +179,7 @@ export default function DateTimePickerPopup({
174
179
  )
175
180
  }
176
181
 
177
- const renderTimePicker = () => {
182
+ function renderTimePicker() {
178
183
  return (
179
184
  <div className='p-2 border-t border-login-500 flex justify-center gap-2'>
180
185
  <div className='flex flex-col items-center'>
@@ -1,10 +1,13 @@
1
- import { type ChangeEvent } from 'react'
1
+ import { type ChangeEvent, useState } from 'react'
2
+ import ReactMarkdown from 'react-markdown'
3
+ import { Eye, Pencil } from 'lucide-react'
2
4
  import { FieldWrapper } from './shared'
3
5
 
4
6
  export type TextareaProps = {
5
7
  label?: string
6
8
  name: string
7
9
  placeholder?: string
10
+ type?: 'markdown' | 'json' | 'text'
8
11
  value?: string
9
12
  onChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void
10
13
  error?: string
@@ -15,6 +18,15 @@ export type TextareaProps = {
15
18
  info?: string
16
19
  }
17
20
 
21
+ function isValidJson(str: string): string | null {
22
+ try {
23
+ JSON.parse(str)
24
+ return null
25
+ } catch(error) {
26
+ return (error as Error).message
27
+ }
28
+ }
29
+
18
30
  export default function Textarea({
19
31
  label,
20
32
  name,
@@ -27,39 +39,75 @@ export default function Textarea({
27
39
  required,
28
40
  rows = 4,
29
41
  info,
42
+ type = 'text',
30
43
  }: TextareaProps) {
44
+ const [preview, setPreview] = useState(false)
45
+
46
+ const jsonError = type === 'json' && value ? isValidJson(value) : undefined
47
+ const displayError = jsonError || error
48
+
31
49
  return (
32
50
  <FieldWrapper
33
51
  label={label}
34
52
  name={name}
35
53
  required={required}
36
54
  info={info}
37
- error={error}
55
+ error={displayError}
38
56
  className={className}
39
57
  >
40
- <textarea
41
- id={name}
42
- name={name}
43
- placeholder={placeholder}
44
- value={value}
45
- onChange={onChange}
46
- disabled={disabled}
47
- required={required}
48
- rows={rows}
49
- title={label}
50
- aria-invalid={!!error}
51
- aria-describedby={error ? `${name}-error` : undefined}
52
- className={`
53
- w-full rounded-md bg-login-500/50 border border-login-500
54
- text-login-text placeholder-login-200
55
- focus:outline-none focus:border-login focus:ring-1 focus:ring-login
56
- disabled:opacity-50 disabled:cursor-not-allowed
57
- p-3
58
- transition-all duration-200
59
- resize-y
60
- ${error ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : ''}
61
- `}
62
- />
58
+ <div className='relative'>
59
+ {type === 'markdown' && (
60
+ <div className='absolute right-2 top-2 z-10 flex gap-2'>
61
+ <button
62
+ type='button'
63
+ onClick={() => setPreview(!preview)}
64
+ className='p-1 rounded hover:bg-login-500/50 text-login-text transition-colors'
65
+ title={preview ? 'Edit' : 'Preview'}
66
+ >
67
+ {preview ? <Pencil size={16} /> : <Eye size={16} />}
68
+ </button>
69
+ </div>
70
+ )}
71
+
72
+ {type === 'markdown' && preview ? (
73
+ <div
74
+ className={`
75
+ w-full rounded-md bg-login-500/50 border border-login-500
76
+ text-login-text
77
+ p-3
78
+ prose prose-invert prose-sm max-w-none overflow-y-auto
79
+ ${error ? 'border-red-500' : ''}
80
+ `}
81
+ style={{ minHeight: `${rows * 1.5}rem` }}
82
+ >
83
+ <ReactMarkdown>{value || ''}</ReactMarkdown>
84
+ </div>
85
+ ) : (
86
+ <textarea
87
+ id={name}
88
+ name={name}
89
+ placeholder={placeholder}
90
+ value={value}
91
+ onChange={onChange}
92
+ disabled={disabled}
93
+ required={required}
94
+ rows={rows}
95
+ title={label}
96
+ aria-invalid={!!error}
97
+ aria-describedby={error ? `${name}-error` : undefined}
98
+ className={`
99
+ w-full rounded-md bg-login-500/50 border border-login-500
100
+ text-login-text placeholder-login-200
101
+ focus:outline-none focus:border-login focus:ring-1 focus:ring-login
102
+ disabled:opacity-50 disabled:cursor-not-allowed
103
+ p-3
104
+ transition-all duration-200
105
+ resize-y
106
+ ${error ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : ''}
107
+ `}
108
+ />
109
+ )}
110
+ </div>
63
111
  </FieldWrapper>
64
112
  )
65
113
  }
@@ -35,7 +35,7 @@ export default function Logo({ className }: LogoProps) {
35
35
  <polyline className={letter} style={{strokeMiterlimit: 10}} points='161.983 98.122 176.665 98.122 176.665 83.44' transform='translate(-31.392,-41.894)' />
36
36
  <polyline className={letter} style={{strokeMiterlimit: 10}} points='176.665 58.372 176.665 43.69 161.983 43.69' transform='translate(-31.392,-41.894)' />
37
37
  <path className={corner} d='m 30.02449,40.19351 v 4.12842 H 12.4991 V 13.99038 h 4.92871 v 26.20313 z' />
38
- <path className='fill-login transition-all duration-1000' d='m 61.53523,29.1564 a 17.15942,17.15942 0 0 1 -1.09473,6.21338 14.35971,14.35971 0 0 1 -3.08593,4.89746 14.091,14.091 0 0 1 -4.78125,3.21191 17.1289,17.1289 0 0 1 -12.38575,0 13.98317,13.98317 0 0 1 -7.88867,-8.10937 18.18161,18.18161 0 0 1 0,-12.42725 14.39119,14.39119 0 0 1 3.09668,-4.90771 14.13157,14.13157 0 0 1 4.792,-3.22315 17.13565,17.13565 0 0 1 12.38575,0 14.02046,14.02046 0 0 1 4.78125,3.22315 14.47032,14.47032 0 0 1 3.08593,4.90771 17.16209,17.16209 0 0 1 1.09472,6.21387 z m -5.03418,0 a 14.62587,14.62587 0 0 0 -0.70508,-4.69727 9.9446,9.9446 0 0 0 -2.02246,-3.53906 8.80545,8.80545 0 0 0 -3.1914,-2.23242 11.719,11.719 0 0 0 -8.4043,0 8.90077,8.90077 0 0 0 -3.20117,2.23242 9.96735,9.96735 0 0 0 -2.043,3.53906 15.81644,15.81644 0 0 0 0,9.415 9.847,9.847 0 0 0 2.043,3.52832 8.85094,8.85094 0 0 0 3.20117,2.21192 11.87213,11.87213 0 0 0 8.4043,0 8.75623,8.75623 0 0 0 3.1914,-2.21192 9.82454,9.82454 0 0 0 2.02249,-3.52828 14.69371,14.69371 0 0 0 0.70505,-4.71777 z' />
38
+ <path className={corner} d='m 61.53523,29.1564 a 17.15942,17.15942 0 0 1 -1.09473,6.21338 14.35971,14.35971 0 0 1 -3.08593,4.89746 14.091,14.091 0 0 1 -4.78125,3.21191 17.1289,17.1289 0 0 1 -12.38575,0 13.98317,13.98317 0 0 1 -7.88867,-8.10937 18.18161,18.18161 0 0 1 0,-12.42725 14.39119,14.39119 0 0 1 3.09668,-4.90771 14.13157,14.13157 0 0 1 4.792,-3.22315 17.13565,17.13565 0 0 1 12.38575,0 14.02046,14.02046 0 0 1 4.78125,3.22315 14.47032,14.47032 0 0 1 3.08593,4.90771 17.16209,17.16209 0 0 1 1.09472,6.21387 z m -5.03418,0 a 14.62587,14.62587 0 0 0 -0.70508,-4.69727 9.9446,9.9446 0 0 0 -2.02246,-3.53906 8.80545,8.80545 0 0 0 -3.1914,-2.23242 11.719,11.719 0 0 0 -8.4043,0 8.90077,8.90077 0 0 0 -3.20117,2.23242 9.96735,9.96735 0 0 0 -2.043,3.53906 15.81644,15.81644 0 0 0 0,9.415 9.847,9.847 0 0 0 2.043,3.52832 8.85094,8.85094 0 0 0 3.20117,2.21192 11.87213,11.87213 0 0 0 8.4043,0 8.75623,8.75623 0 0 0 3.1914,-2.21192 9.82454,9.82454 0 0 0 2.02249,-3.52828 14.69371,14.69371 0 0 0 0.70505,-4.71777 z' />
39
39
  <path className={corner} d='m 91.76082,29.38784 v 12.00635 a 17.5354,17.5354 0 0 1 -10.53125,3.26465 18.41512,18.41512 0 0 1 -6.667,-1.148 14.80254,14.80254 0 0 1 -5.08691,-3.20166 14.0148,14.0148 0 0 1 -3.24316,-4.897 16.691,16.691 0 0 1 -1.1377,-6.25586 17.42935,17.42935 0 0 1 1.09473,-6.2876 13.74023,13.74023 0 0 1 8.06738,-8.08838 17.7222,17.7222 0 0 1 6.48828,-1.127 19.10354,19.10354 0 0 1 3.40137,0.28418 16.85244,16.85244 0 0 1 2.917,0.79 13.68442,13.68442 0 0 1 2.48633,1.22168 13.95372,13.95372 0 0 1 2.085,1.60058 l -1.41113,2.25391 a 1.40229,1.40229 0 0 1 -0.86426,0.65283 1.47784,1.47784 0 0 1 -1.13672,-0.25244 q -0.6123,-0.35816 -1.2959,-0.7583 a 11.33129,11.33129 0 0 0 -1.56933,-0.748 11.53387,11.53387 0 0 0 -2.043,-0.56836 14.78335,14.78335 0 0 0 -2.73828,-0.22119 11.32128,11.32128 0 0 0 -4.32813,0.78955 9.26752,9.26752 0 0 0 -3.29687,2.25391 9.99164,9.99164 0 0 0 -2.10645,3.54931 13.90267,13.90267 0 0 0 -0.7373,4.65528 14.11731,14.11731 0 0 0 0.77929,4.855 10.1425,10.1425 0 0 0 2.21192,3.62305 9.43419,9.43419 0 0 0 3.46484,2.26416 13.81975,13.81975 0 0 0 7.87793,0.3789 15.14816,15.14816 0 0 0 2.875,-1.11621 v -6.02383 h -4.2334 a 1.04883,1.04883 0 0 1 -0.75879,-0.26367 0.90553,0.90553 0 0 1 -0.27343,-0.68457 v -2.80127 z' />
40
40
  <path className={corner} d='M 102.546,44.32193 H 97.59581 V 13.99038 h 4.95019 z' />
41
41
  <path className={corner} d='m 134.8575,13.99038 v 30.33155 h -2.50684 a 2.14219,2.14219 0 0 1 -0.96875,-0.2002 2.26108,2.26108 0 0 1 -0.75879,-0.66357 L 113.962,22.05777 q 0.063,0.61083 0.0947,1.21093 0.0322,0.60058 0.0322,1.106 v 19.94723 h -4.3398 V 13.99038 h 2.57031 a 3.89092,3.89092 0 0 1 0.53711,0.03174 1.53328,1.53328 0 0 1 0.41016,0.11572 1.18964,1.18964 0 0 1 0.35839,0.25293 4.01792,4.01792 0 0 1 0.3584,0.4209 l 16.68164,21.42188 q -0.063,-0.65259 -0.0947,-1.28467 -0.0308,-0.63208 -0.0312,-1.17969 V 13.99038 Z' />
@@ -1,9 +1,10 @@
1
1
  import type { Config } from 'tailwindcss'
2
+ import typography from '@tailwindcss/typography'
2
3
 
3
4
  const tailwindConfig: Config = {
4
5
  content: ['./app/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
5
6
  theme: { extend: {} },
6
- plugins: [],
7
+ plugins: [typography],
7
8
  }
8
9
 
9
10
  export default tailwindConfig