uibee 2.7.8 → 2.7.10

package/dist/src/components/index.d.ts

@@ -2,6 +2,7 @@ export { default as Input } from './inputs/input';
 export { default as Textarea } from './inputs/textarea';
 export { default as Checkbox } from './inputs/checkbox';
 export { default as Select } from './inputs/select';
+export { default as TagInput } from './inputs/tagInput';
 export { default as Switch } from './inputs/switch';
 export { default as Radio } from './inputs/radio';
 export { default as Range } from './inputs/range';

package/dist/src/components/index.js

@@ -3,6 +3,7 @@ export { default as Input } from './inputs/input';
 export { default as Textarea } from './inputs/textarea';
 export { default as Checkbox } from './inputs/checkbox';
 export { default as Select } from './inputs/select';
+export { default as TagInput } from './inputs/tagInput';
 export { default as Switch } from './inputs/switch';
 export { default as Radio } from './inputs/radio';
 export { default as Range } from './inputs/range';

package/dist/src/components/inputs/input.js

@@ -9,15 +9,15 @@ export default function Input({ label, name, type = 'text', placeholder, value,
     const [isOpen, setIsOpen] = useState(false);
     const containerRef = useClickOutside(() => setIsOpen(false));
     const isDateType = ['date', 'datetime-local', 'time'].includes(type);
-    const handleIconClick = () => {
+    function handleIconClick() {
         if (isDateType && !disabled) {
             setIsOpen(!isOpen);
         }
         else if (localRef.current && !disabled) {
             localRef.current.focus();
         }
-    };
-    const handleDateChange = (date) => {
+    }
+    function handleDateChange(date) {
         if (!onChange)
             return;
         const pad = (n) => n.toString().padStart(2, '0');
@@ -41,7 +41,7 @@ export default function Input({ label, name, type = 'text', placeholder, value,
             },
         };
         onChange(event);
-    };
+    }
     let displayIcon = icon;
     if (!displayIcon && isDateType) {
         if (type === 'time') {
@@ -51,7 +51,7 @@ export default function Input({ label, name, type = 'text', placeholder, value,
             displayIcon = _jsx(Calendar, { className: 'w-4 h-4' });
         }
     }
-    const getDateValue = () => {
+    function getDateValue() {
         if (!value)
             return null;
         if (type === 'time') {
@@ -60,7 +60,7 @@ export default function Input({ label, name, type = 'text', placeholder, value,
         }
         const date = new Date(value);
         return isNaN(date.getTime()) ? null : date;
-    };
+    }
     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: `
                             absolute left-3 text-login-200
                             ${isDateType && !disabled ? 'cursor-pointer hover:text-login-text' : 'pointer-events-none'}
@@ -69,7 +69,7 @@ export default function Input({ label, name, type = 'text', placeholder, value,
                         text-login-text placeholder-login-200
                         focus:outline-none focus:border-login focus:ring-1 focus:ring-login
                         disabled:opacity-50 disabled:cursor-not-allowed
-                        py-2 ${displayIcon ? 'pl-10 pr-3' : 'px-3'}
+                        h-10.5 py-2 ${displayIcon ? 'pl-10 pr-3' : 'px-3'}
                         transition-all duration-200
                         input-reset
                         ${error ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : ''}

package/dist/src/components/inputs/select.js

@@ -12,7 +12,7 @@ export default function Select({ label, name, value, onChange, options, error, c
         setSelectedOption(options.find(opt => opt.value === value));
     }, [value, options]);
     const containerRef = useClickOutside(() => setIsOpen(false));
-    const handleSelect = (option) => {
+    function handleSelect(option) {
         if (disabled)
             return;
         setSelectedOption(option);
@@ -20,8 +20,8 @@ export default function Select({ label, name, value, onChange, options, error, c
         if (onChange) {
             onChange(option.value);
         }
-    };
-    const handleClear = (e) => {
+    }
+    function handleClear(e) {
         e.stopPropagation();
         if (disabled)
             return;
@@ -29,13 +29,13 @@ export default function Select({ label, name, value, onChange, options, error, c
         if (onChange) {
             onChange(null);
         }
-    };
+    }
     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: `
                         w-full rounded-md bg-login-500/50 border border-login-500 
                         text-login-text text-left
                         focus:outline-none focus:border-login focus:ring-1 focus:ring-login
                         disabled:opacity-50 disabled:cursor-not-allowed
-                        py-2 pl-3 pr-10
+                        h-10.5 py-2 pl-3 pr-10
                         transition-all duration-200
                         flex items-center justify-between
                         ${error ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : ''}

package/dist/src/components/inputs/shared/dateTimePickerPopup.js

@@ -21,7 +21,7 @@ export default function DateTimePickerPopup({ value, onChange, type, onClose, })
             }));
         }
     }, [value]);
-    const handleDateSelect = (day) => {
+    function handleDateSelect(day) {
         const newDate = new Date(currentDate);
         newDate.setDate(day);
         if (value) {
@@ -35,8 +35,8 @@ export default function DateTimePickerPopup({ value, onChange, type, onClose, })
         if (type === 'date' && onClose) {
             onClose();
         }
-    };
-    const handleTimeChange = (timeUnit, val) => {
+    }
+    function handleTimeChange(timeUnit, val) {
         const newDate = value ? new Date(value) : new Date();
         if (!value) {
             newDate.setHours(0, 0, 0, 0);
@@ -52,8 +52,8 @@ export default function DateTimePickerPopup({ value, onChange, type, onClose, })
             newDate.setMinutes(val);
         }
         onChange(newDate);
-    };
-    const onTimeInputChange = (unit, val) => {
+    }
+    function onTimeInputChange(unit, val) {
         if (val === '') {
             setTimeInput(prev => ({ ...prev, [unit]: '' }));
             handleTimeChange(unit, 0);
@@ -68,16 +68,20 @@ export default function DateTimePickerPopup({ value, onChange, type, onClose, })
             return;
         setTimeInput(prev => ({ ...prev, [unit]: val }));
         handleTimeChange(unit, num);
-    };
-    const onTimeInputBlur = (unit) => {
+    }
+    function onTimeInputBlur(unit) {
         if (timeInput[unit] === '') {
             const num = unit === 'hours' ? (value?.getHours() ?? 0) : (value?.getMinutes() ?? 0);
             setTimeInput(prev => ({ ...prev, [unit]: num.toString() }));
         }
-    };
-    const getDaysInMonth = (year, month) => new Date(year, month + 1, 0).getDate();
-    const getFirstDayOfMonth = (year, month) => new Date(year, month, 1).getDay();
-    const renderCalendar = () => {
+    }
+    function getDaysInMonth(year, month) {
+        return new Date(year, month + 1, 0).getDate();
+    }
+    function getFirstDayOfMonth(year, month) {
+        return new Date(year, month, 1).getDay();
+    }
+    function renderCalendar() {
         const year = currentDate.getFullYear();
         const month = currentDate.getMonth();
         const daysInMonth = getDaysInMonth(year, month);
@@ -103,8 +107,8 @@ export default function DateTimePickerPopup({ value, onChange, type, onClose, })
                     `, children: i }, i));
         }
         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 })] }));
-    };
-    const renderTimePicker = () => {
+    }
+    function renderTimePicker() {
         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: `
                             w-16 p-1 bg-login-500 rounded text-center text-login-text 
                             border border-login-500 focus:border-login outline-none
@@ -112,6 +116,6 @@ export default function DateTimePickerPopup({ value, onChange, type, onClose, })
                             w-16 p-1 bg-login-500 rounded text-center text-login-text 
                             border border-login-500 focus:border-login outline-none
                         ` })] })] }));
-    };
+    }
     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()] }));
 }

package/dist/src/components/inputs/switch.js

@@ -1,14 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { SelectionWrapper } from './shared';
 export default function Switch({ label, name, checked, onChange, className, disabled, error, info, required, }) {
-    return (_jsx(SelectionWrapper, { label: label, name: name, required: required, info: info, error: error, className: className, disabled: disabled, children: _jsxs("label", { className: 'relative inline-flex items-center cursor-pointer', children: [_jsx("input", { type: 'checkbox', id: name, name: name, checked: checked, onChange: onChange, disabled: disabled, required: required, className: 'sr-only peer' }), _jsx("div", { className: `
-                    w-11 h-6 bg-login-500/50 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-login/50 
-                    rounded-full peer 
+    return (_jsx(SelectionWrapper, { label: label, name: name, required: required, info: info, error: error, className: className, disabled: disabled, children: _jsxs("label", { className: 'relative inline-flex items-center cursor-pointer h-10.5', children: [_jsx("input", { type: 'checkbox', id: name, name: name, checked: checked, onChange: onChange, disabled: disabled, required: required, className: 'sr-only peer' }), _jsx("div", { className: `
+                    w-11 h-6 bg-login-500/50 rounded-full peer 
                     peer-checked:after:translate-x-full peer-checked:after:border-white 
-                    after:content-[''] after:absolute after:top-0.5 after:left-0.5 
+                    after:content-[''] after:absolute after:top-2.75 after:left-0.5 
                     after:bg-white after:border-gray-300 after:border after:rounded-full 
-                    after:h-5 after:w-5 after:transition-all 
-                    peer-checked:bg-login
+                    after:h-5 after:w-5 after:transition-all peer-checked:bg-login
                     ${disabled ? 'opacity-50 cursor-not-allowed' : ''}
                     ${error ? 'ring-1 ring-red-500' : ''}
                 ` })] }) }));

package/dist/src/components/inputs/tagInput.d.ts

@@ -0,0 +1,13 @@
+export type TagInputProps = {
+    label?: string;
+    name: string;
+    value?: string[];
+    onChange?: (value: string[]) => void;
+    placeholder?: string;
+    error?: string;
+    className?: string;
+    disabled?: boolean;
+    required?: boolean;
+    info?: string;
+};
+export default function TagInput({ label, name, value, onChange, placeholder, error, className, disabled, required, info, }: TagInputProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/inputs/tagInput.js

@@ -0,0 +1,40 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { X } from 'lucide-react';
+import { FieldWrapper } from './shared';
+export default function TagInput({ label, name, value = [], onChange, placeholder = 'Add...', error, className, disabled, required, info, }) {
+    const [inputValue, setInputValue] = useState('');
+    function handleKeyDown(e) {
+        if ((e.key === 'Enter' || e.key === ',') && inputValue.trim()) {
+            e.preventDefault();
+            const val = inputValue.trim().replace(/,$/, '');
+            if (val && !value.includes(val)) {
+                const newValue = [...value, val];
+                if (onChange)
+                    onChange(newValue);
+            }
+            setInputValue('');
+        }
+        else if (e.key === 'Backspace' && !inputValue && value.length > 0) {
+            const newValue = value.slice(0, -1);
+            if (onChange)
+                onChange(newValue);
+        }
+    }
+    function removeTag(index) {
+        if (disabled)
+            return;
+        const newValue = value.filter((_, i) => i !== index);
+        if (onChange)
+            onChange(newValue);
+    }
+    return (_jsxs(FieldWrapper, { label: label, name: name, required: required, info: info, error: error, className: className, children: [_jsxs("div", { className: `
+                    flex flex-wrap gap-2 p-2 rounded-md bg-login-500/50 border border-login-500 
+                    text-login-text min-h-10.5
+                    focus-within:border-login focus-within:ring-1 focus-within:ring-login
+                    disabled:opacity-50 disabled:cursor-not-allowed
+                    transition-all duration-200
+                    ${error ? 'border-red-500 focus-within:border-red-500 focus-within:ring-red-500' : ''}
+                `, children: [value.map((tag, index) => (_jsxs("span", { className: 'flex items-center gap-1 px-2 py-1 bg-login rounded text-sm text-white', children: [tag, !disabled && (_jsx("button", { type: 'button', onClick: () => removeTag(index), className: 'hover:text-red-200 transition-colors', children: _jsx(X, { size: 14 }) }))] }, index))), _jsx("input", { type: 'text', value: inputValue, required: required && value.length === 0, onChange: (e) => setInputValue(e.target.value), onKeyDown: handleKeyDown, disabled: disabled, placeholder: value.length === 0 ? placeholder : '', className: 'flex-1 bg-transparent outline-none min-w-30 text-login-text placeholder:text-login-200' })] }), value.map((tag, index) => (_jsx("input", { type: 'hidden', name: `${name}[${index}]`, value: tag }, index)))] }));
+}

package/dist/src/components/inputs/textarea.d.ts

@@ -3,6 +3,7 @@ export type TextareaProps = {
     label?: string;
     name: string;
     placeholder?: string;
+    type?: 'markdown' | 'json' | 'text';
     value?: string;
     onChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void;
     error?: string;
@@ -11,6 +12,5 @@ export type TextareaProps = {
     required?: boolean;
     rows?: number;
     info?: string;
-    markdown?: boolean;
 };
-export default function Textarea({ label, name, placeholder, value, onChange, error, className, disabled, required, rows, info, markdown, }: TextareaProps): import("react/jsx-runtime").JSX.Element;
+export default function Textarea({ label, name, placeholder, value, onChange, error, className, disabled, required, rows, info, type, }: TextareaProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/inputs/textarea.js

@@ -3,9 +3,20 @@ import { useState } from 'react';
 import ReactMarkdown from 'react-markdown';
 import { Eye, Pencil } from 'lucide-react';
 import { FieldWrapper } from './shared';
-export default function Textarea({ label, name, placeholder, value, onChange, error, className, disabled, required, rows = 4, info, markdown = false, }) {
+function isValidJson(str) {
+    try {
+        JSON.parse(str);
+        return null;
+    }
+    catch (error) {
+        return error.message;
+    }
+}
+export default function Textarea({ label, name, placeholder, value, onChange, error, className, disabled, required, rows = 4, info, type = 'text', }) {
     const [preview, setPreview] = useState(false);
-    return (_jsx(FieldWrapper, { label: label, name: name, required: required, info: info, error: error, className: className, children: _jsxs("div", { className: 'relative', children: [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 }) }) })), markdown && preview ? (_jsx("div", { className: `
+    const jsonError = type === 'json' && value ? isValidJson(value) : undefined;
+    const displayError = jsonError || error;
+    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: `
                         w-full rounded-md bg-login-500/50 border border-login-500 
                         text-login-text 
                         p-3

package/dist/src/components/logo/logo.js

@@ -2,5 +2,5 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function Logo({ className }) {
     const corner = 'fill-[var(--foreground)] transition-all duration-1000';
     const letter = 'fill-none stroke-[var(--color-login)] stroke-[3.5px]';
-    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' })] }));
+    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' })] }));
 }

package/dist/src/globals.css

@@ -7,6 +7,7 @@
       "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
+    --color-red-200: oklch(88.5% 0.062 18.334);
     --color-red-400: oklch(70.4% 0.191 22.216);
     --color-red-500: oklch(63.7% 0.237 25.331);
     --color-yellow-500: oklch(79.5% 0.184 86.047);
@@ -1071,6 +1072,9 @@
   .h-8 {
     height: calc(var(--spacing) * 8);
   }
+  .h-10\.5 {
+    height: calc(var(--spacing) * 10.5);
+  }
   .h-11 {
     height: calc(var(--spacing) * 11);
   }
@@ -1098,6 +1102,9 @@
   .min-h-8 {
     min-height: calc(var(--spacing) * 8);
   }
+  .min-h-10\.5 {
+    min-height: calc(var(--spacing) * 10.5);
+  }
   .min-h-16 {
     min-height: calc(var(--spacing) * 16);
   }
@@ -1179,6 +1186,9 @@
   .min-w-10 {
     min-width: calc(var(--spacing) * 10);
   }
+  .min-w-30 {
+    min-width: calc(var(--spacing) * 30);
+  }
   .min-w-70 {
     min-width: calc(var(--spacing) * 70);
   }
@@ -1262,6 +1272,9 @@
   .flex-row {
     flex-direction: row;
   }
+  .flex-wrap {
+    flex-wrap: wrap;
+  }
   .place-items-center {
     place-items: center;
   }
@@ -1849,24 +1862,9 @@
       opacity: 100%;
     }
   }
-  .peer-focus\:ring-2 {
-    &:is(:where(.peer):focus ~ *) {
-      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
-  }
-  .peer-focus\:ring-login\/50 {
-    &:is(:where(.peer):focus ~ *) {
-      --tw-ring-color: color-mix(in srgb, #fd8738 50%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-login) 50%, transparent);
-      }
-    }
-  }
-  .peer-focus\:outline-none {
-    &:is(:where(.peer):focus ~ *) {
-      --tw-outline-style: none;
-      outline-style: none;
+  .placeholder\:text-login-200 {
+    &::placeholder {
+      color: var(--color-login-200);
     }
   }
   .after\:absolute {
@@ -1875,10 +1873,10 @@
       position: absolute;
     }
   }
-  .after\:top-0\.5 {
+  .after\:top-2\.75 {
     &::after {
       content: var(--tw-content);
-      top: calc(var(--spacing) * 0.5);
+      top: calc(var(--spacing) * 2.75);
     }
   }
   .after\:left-0\.5 {
@@ -1965,6 +1963,32 @@
       background-color: var(--color-login);
     }
   }
+  .focus-within\:border-login {
+    &:focus-within {
+      border-color: var(--color-login);
+    }
+  }
+  .focus-within\:border-red-500 {
+    &:focus-within {
+      border-color: var(--color-red-500);
+    }
+  }
+  .focus-within\:ring-1 {
+    &:focus-within {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+  .focus-within\:ring-login {
+    &:focus-within {
+      --tw-ring-color: var(--color-login);
+    }
+  }
+  .focus-within\:ring-red-500 {
+    &:focus-within {
+      --tw-ring-color: var(--color-red-500);
+    }
+  }
   .hover\:bg-gray-400\/10 {
     &:hover {
       @media (hover: hover) {
@@ -2053,6 +2077,13 @@
       }
     }
   }
+  .hover\:text-red-200 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-red-200);
+      }
+    }
+  }
   .hover\:text-red-400 {
     &:hover {
       @media (hover: hover) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uibee",
-  "version": "2.7.8",
+  "version": "2.7.10",
   "description": "Shared components, functions and hooks for reuse across Login projects",
   "homepage": "https://github.com/Login-Linjeforening-for-IT/uibee#readme",
   "bugs": {

package/src/components/index.ts

@@ -3,6 +3,7 @@ export { default as Input } from './inputs/input'
 export { default as Textarea } from './inputs/textarea'
 export { default as Checkbox } from './inputs/checkbox'
 export { default as Select } from './inputs/select'
+export { default as TagInput } from './inputs/tagInput'
 export { default as Switch } from './inputs/switch'
 export { default as Radio } from './inputs/radio'
 export { default as Range } from './inputs/range'

package/src/components/inputs/input.tsx

@@ -40,7 +40,7 @@ export default function Input({
 
     const isDateType = ['date', 'datetime-local', 'time'].includes(type as string)
 
-    const handleIconClick = () => {
+    function handleIconClick() {
         if (isDateType && !disabled) {
             setIsOpen(!isOpen)
         } else if (localRef.current && !disabled) {
@@ -48,7 +48,7 @@ export default function Input({
         }
     }
 
-    const handleDateChange = (date: Date) => {
+    function handleDateChange(date: Date) {
         if (!onChange) return
 
         const pad = (n: number) => n.toString().padStart(2, '0')
@@ -82,7 +82,7 @@ export default function Input({
         }
     }
 
-    const getDateValue = () => {
+    function getDateValue() {
         if (!value) return null
         if (type === 'time') {
             const date = new Date(`2000-01-01T${value}`)
@@ -133,7 +133,7 @@ export default function Input({
                         text-login-text placeholder-login-200
                         focus:outline-none focus:border-login focus:ring-1 focus:ring-login
                         disabled:opacity-50 disabled:cursor-not-allowed
-                        py-2 ${displayIcon ? 'pl-10 pr-3' : 'px-3'}
+                        h-10.5 py-2 ${displayIcon ? 'pl-10 pr-3' : 'px-3'}
                         transition-all duration-200
                         input-reset
                         ${error ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : ''}

package/src/components/inputs/select.tsx

@@ -52,7 +52,7 @@ export default function Select({
 
     const containerRef = useClickOutside<HTMLDivElement>(() => setIsOpen(false))
 
-    const handleSelect = (option: Option) => {
+    function handleSelect(option: Option) {
         if (disabled) return
         setSelectedOption(option)
         setIsOpen(false)
@@ -61,7 +61,7 @@ export default function Select({
         }
     }
 
-    const handleClear = (e: React.MouseEvent) => {
+    function handleClear(e: React.MouseEvent) {
         e.stopPropagation()
         if (disabled) return
         setSelectedOption(undefined)
@@ -92,7 +92,7 @@ export default function Select({
                         text-login-text text-left
                         focus:outline-none focus:border-login focus:ring-1 focus:ring-login
                         disabled:opacity-50 disabled:cursor-not-allowed
-                        py-2 pl-3 pr-10
+                        h-10.5 py-2 pl-3 pr-10
                         transition-all duration-200
                         flex items-center justify-between
                         ${error ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : ''}

package/src/components/inputs/shared/dateTimePickerPopup.tsx

@@ -36,7 +36,7 @@ export default function DateTimePickerPopup({
         }
     }, [value])
 
-    const handleDateSelect = (day: number) => {
+    function handleDateSelect(day: number) {
         const newDate = new Date(currentDate)
         newDate.setDate(day)
 
@@ -54,7 +54,7 @@ export default function DateTimePickerPopup({
         }
     }
 
-    const handleTimeChange = (timeUnit: 'hours' | 'minutes', val: number) => {
+    function handleTimeChange(timeUnit: 'hours' | 'minutes', val: number) {
         const newDate = value ? new Date(value) : new Date()
         if (!value) {
             newDate.setHours(0, 0, 0, 0)
@@ -72,7 +72,7 @@ export default function DateTimePickerPopup({
         onChange(newDate)
     }
 
-    const onTimeInputChange = (unit: 'hours' | 'minutes', val: string) => {
+    function onTimeInputChange(unit: 'hours' | 'minutes', val: string) {
         if (val === '') {
             setTimeInput(prev => ({ ...prev, [unit]: '' }))
             handleTimeChange(unit, 0)
@@ -90,17 +90,22 @@ export default function DateTimePickerPopup({
         handleTimeChange(unit, num)
     }
 
-    const onTimeInputBlur = (unit: 'hours' | 'minutes') => {
+    function onTimeInputBlur(unit: 'hours' | 'minutes') {
         if (timeInput[unit] === '') {
             const num = unit === 'hours' ? (value?.getHours() ?? 0) : (value?.getMinutes() ?? 0)
             setTimeInput(prev => ({ ...prev, [unit]: num.toString() }))
         }
     }
 
-    const getDaysInMonth = (year: number, month: number) => new Date(year, month + 1, 0).getDate()
-    const getFirstDayOfMonth = (year: number, month: number) => new Date(year, month, 1).getDay()
+    function getDaysInMonth(year: number, month: number) {
+        return new Date(year, month + 1, 0).getDate()
+    }
+
+    function getFirstDayOfMonth(year: number, month: number) {
+        return new Date(year, month, 1).getDay()
+    }
 
-    const renderCalendar = () => {
+    function renderCalendar() {
         const year = currentDate.getFullYear()
         const month = currentDate.getMonth()
         const daysInMonth = getDaysInMonth(year, month)
@@ -174,7 +179,7 @@ export default function DateTimePickerPopup({
         )
     }
 
-    const renderTimePicker = () => {
+    function renderTimePicker() {
         return (
             <div className='p-2 border-t border-login-500 flex justify-center gap-2'>
                 <div className='flex flex-col items-center'>

package/src/components/inputs/switch.tsx

@@ -34,7 +34,7 @@ export default function Switch({
             className={className}
             disabled={disabled}
         >
-            <label className='relative inline-flex items-center cursor-pointer'>
+            <label className='relative inline-flex items-center cursor-pointer h-10.5'>
                 <input
                     type='checkbox'
                     id={name}
@@ -46,13 +46,11 @@ export default function Switch({
                     className='sr-only peer'
                 />
                 <div className={`
-                    w-11 h-6 bg-login-500/50 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-login/50 
-                    rounded-full peer 
+                    w-11 h-6 bg-login-500/50 rounded-full peer 
                     peer-checked:after:translate-x-full peer-checked:after:border-white 
-                    after:content-[''] after:absolute after:top-0.5 after:left-0.5 
+                    after:content-[''] after:absolute after:top-2.75 after:left-0.5 
                     after:bg-white after:border-gray-300 after:border after:rounded-full 
-                    after:h-5 after:w-5 after:transition-all 
-                    peer-checked:bg-login
+                    after:h-5 after:w-5 after:transition-all peer-checked:bg-login
                     ${disabled ? 'opacity-50 cursor-not-allowed' : ''}
                     ${error ? 'ring-1 ring-red-500' : ''}
                 `}></div>

package/src/components/inputs/tagInput.tsx

@@ -0,0 +1,112 @@
+'use client'
+
+import { useState, KeyboardEvent, ChangeEvent } from 'react'
+import { X } from 'lucide-react'
+import { FieldWrapper } from './shared'
+
+export type TagInputProps = {
+    label?: string
+    name: string
+    value?: string[]
+    onChange?: (value: string[]) => void
+    placeholder?: string
+    error?: string
+    className?: string
+    disabled?: boolean
+    required?: boolean
+    info?: string
+}
+
+export default function TagInput({
+    label,
+    name,
+    value = [],
+    onChange,
+    placeholder = 'Add...',
+    error,
+    className,
+    disabled,
+    required,
+    info,
+}: TagInputProps) {
+    const [inputValue, setInputValue] = useState('')
+
+    function handleKeyDown(e: KeyboardEvent<HTMLInputElement>) {
+        if ((e.key === 'Enter' || e.key === ',') && inputValue.trim()) {
+            e.preventDefault()
+            const val = inputValue.trim().replace(/,$/, '')
+            if (val && !value.includes(val)) {
+                const newValue = [...value, val]
+                if (onChange) onChange(newValue)
+            }
+            setInputValue('')
+        } else if (e.key === 'Backspace' && !inputValue && value.length > 0) {
+            const newValue = value.slice(0, -1)
+            if (onChange) onChange(newValue)
+        }
+    }
+
+    function removeTag(index: number) {
+        if (disabled) return
+        const newValue = value.filter((_, i) => i !== index)
+        if (onChange) onChange(newValue)
+    }
+
+    return (
+        <FieldWrapper
+            label={label}
+            name={name}
+            required={required}
+            info={info}
+            error={error}
+            className={className}
+        >
+            <div
+                className={`
+                    flex flex-wrap gap-2 p-2 rounded-md bg-login-500/50 border border-login-500 
+                    text-login-text min-h-10.5
+                    focus-within:border-login focus-within:ring-1 focus-within:ring-login
+                    disabled:opacity-50 disabled:cursor-not-allowed
+                    transition-all duration-200
+                    ${error ? 'border-red-500 focus-within:border-red-500 focus-within:ring-red-500' : ''}
+                `}
+            >
+                {value.map((tag, index) => (
+                    <span
+                        key={index}
+                        className='flex items-center gap-1 px-2 py-1 bg-login rounded text-sm text-white'
+                    >
+                        {tag}
+                        {!disabled && (
+                            <button
+                                type='button'
+                                onClick={() => removeTag(index)}
+                                className='hover:text-red-200 transition-colors'
+                            >
+                                <X size={14} />
+                            </button>
+                        )}
+                    </span>
+                ))}
+                <input
+                    type='text'
+                    value={inputValue}
+                    required={required && value.length === 0}
+                    onChange={(e: ChangeEvent<HTMLInputElement>) => setInputValue(e.target.value)}
+                    onKeyDown={handleKeyDown}
+                    disabled={disabled}
+                    placeholder={value.length === 0 ? placeholder : ''}
+                    className='flex-1 bg-transparent outline-none min-w-30 text-login-text placeholder:text-login-200'
+                />
+            </div>
+            {value.map((tag, index) => (
+                <input
+                    key={index}
+                    type='hidden'
+                    name={`${name}[${index}]`}
+                    value={tag}
+                />
+            ))}
+        </FieldWrapper>
+    )
+}

package/src/components/inputs/textarea.tsx

@@ -7,6 +7,7 @@ export type TextareaProps = {
     label?: string
     name: string
     placeholder?: string
+    type?: 'markdown' | 'json' | 'text'
     value?: string
     onChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void
     error?: string
@@ -15,7 +16,15 @@ export type TextareaProps = {
     required?: boolean
     rows?: number
     info?: string
-    markdown?: boolean
+}
+
+function isValidJson(str: string): string | null {
+    try {
+        JSON.parse(str)
+        return null
+    } catch(error) {
+        return (error as Error).message
+    }
 }
 
 export default function Textarea({
@@ -30,21 +39,24 @@ export default function Textarea({
     required,
     rows = 4,
     info,
-    markdown = false,
+    type = 'text',
 }: TextareaProps) {
     const [preview, setPreview] = useState(false)
 
+    const jsonError = type === 'json' && value ? isValidJson(value) : undefined
+    const displayError = jsonError || error
+
     return (
         <FieldWrapper
             label={label}
             name={name}
             required={required}
             info={info}
-            error={error}
+            error={displayError}
             className={className}
         >
             <div className='relative'>
-                {markdown && (
+                {type === 'markdown' && (
                     <div className='absolute right-2 top-2 z-10 flex gap-2'>
                         <button
                             type='button'
@@ -57,7 +69,7 @@ export default function Textarea({
                     </div>
                 )}
 
-                {markdown && preview ? (
+                {type === 'markdown' && preview ? (
                     <div
                         className={`
                         w-full rounded-md bg-login-500/50 border border-login-500 

package/src/components/logo/logo.tsx

@@ -35,7 +35,7 @@ export default function Logo({ className }: LogoProps) {
             <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)' />
             <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)' />
             <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' />
-            <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' />
+            <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' />
             <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' />
             <path className={corner} d='M 102.546,44.32193 H 97.59581 V 13.99038 h 4.95019 z' />
             <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' />