@native-systems/ui 1.0.10 → 1.1.1

package/dist/index.esm.js

@@ -1,7 +1,7 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useForm } from 'react-hook-form';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
 import { useState, createContext, useRef, useContext } from 'react';
+import { useForm } from 'react-hook-form';
 import {
   PatternCompiler,
   eqPlugin,
@@ -11,6 +11,249 @@ import {
   urlPlugin,
 } from '@native-systems/utility';
 
+function MainContentFrame({ children }) {
+  return jsx('main', {
+    className:
+      'w-full pb-2 overflow-hidden bg-zinc-100 lg:pt-2 lg:pr-2 dark:bg-zinc-950',
+    children: jsx('div', {
+      className:
+        'w-full h-full p-6 content-canvas bg-white border-zinc-950/10 lg:p-10 lg:border lg:rounded-lg lg:shadow-xs dark:bg-zinc-900 dark:border-white/5',
+      children: jsx('div', {
+        className: 'mx-auto max-w-[1400px]',
+        children: children,
+      }),
+    }),
+  });
+}
+
+function ChevronDoubleLeftIcon({ title, titleId, ...props }, svgRef) {
+  return /*#__PURE__*/ React.createElement(
+    'svg',
+    Object.assign(
+      {
+        'xmlns': 'http://www.w3.org/2000/svg',
+        'viewBox': '0 0 20 20',
+        'fill': 'currentColor',
+        'aria-hidden': 'true',
+        'data-slot': 'icon',
+        'ref': svgRef,
+        'aria-labelledby': titleId,
+      },
+      props
+    ),
+    title
+      ? /*#__PURE__*/ React.createElement(
+          'title',
+          {
+            id: titleId,
+          },
+          title
+        )
+      : null,
+    /*#__PURE__*/ React.createElement('path', {
+      fillRule: 'evenodd',
+      d: 'M4.72 9.47a.75.75 0 0 0 0 1.06l4.25 4.25a.75.75 0 1 0 1.06-1.06L6.31 10l3.72-3.72a.75.75 0 1 0-1.06-1.06L4.72 9.47Zm9.25-4.25L9.72 9.47a.75.75 0 0 0 0 1.06l4.25 4.25a.75.75 0 1 0 1.06-1.06L11.31 10l3.72-3.72a.75.75 0 0 0-1.06-1.06Z',
+      clipRule: 'evenodd',
+    })
+  );
+}
+const ForwardRef$5 = /*#__PURE__*/ React.forwardRef(ChevronDoubleLeftIcon);
+
+function ChevronDoubleRightIcon({ title, titleId, ...props }, svgRef) {
+  return /*#__PURE__*/ React.createElement(
+    'svg',
+    Object.assign(
+      {
+        'xmlns': 'http://www.w3.org/2000/svg',
+        'viewBox': '0 0 20 20',
+        'fill': 'currentColor',
+        'aria-hidden': 'true',
+        'data-slot': 'icon',
+        'ref': svgRef,
+        'aria-labelledby': titleId,
+      },
+      props
+    ),
+    title
+      ? /*#__PURE__*/ React.createElement(
+          'title',
+          {
+            id: titleId,
+          },
+          title
+        )
+      : null,
+    /*#__PURE__*/ React.createElement('path', {
+      fillRule: 'evenodd',
+      d: 'M15.28 9.47a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 1 1-1.06-1.06L13.69 10 9.97 6.28a.75.75 0 0 1 1.06-1.06l4.25 4.25ZM6.03 5.22l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L8.69 10 4.97 6.28a.75.75 0 0 1 1.06-1.06Z',
+      clipRule: 'evenodd',
+    })
+  );
+}
+const ForwardRef$4 = /*#__PURE__*/ React.forwardRef(ChevronDoubleRightIcon);
+
+function ChevronLeftIcon({ title, titleId, ...props }, svgRef) {
+  return /*#__PURE__*/ React.createElement(
+    'svg',
+    Object.assign(
+      {
+        'xmlns': 'http://www.w3.org/2000/svg',
+        'viewBox': '0 0 20 20',
+        'fill': 'currentColor',
+        'aria-hidden': 'true',
+        'data-slot': 'icon',
+        'ref': svgRef,
+        'aria-labelledby': titleId,
+      },
+      props
+    ),
+    title
+      ? /*#__PURE__*/ React.createElement(
+          'title',
+          {
+            id: titleId,
+          },
+          title
+        )
+      : null,
+    /*#__PURE__*/ React.createElement('path', {
+      fillRule: 'evenodd',
+      d: 'M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z',
+      clipRule: 'evenodd',
+    })
+  );
+}
+const ForwardRef$3 = /*#__PURE__*/ React.forwardRef(ChevronLeftIcon);
+
+function ChevronRightIcon({ title, titleId, ...props }, svgRef) {
+  return /*#__PURE__*/ React.createElement(
+    'svg',
+    Object.assign(
+      {
+        'xmlns': 'http://www.w3.org/2000/svg',
+        'viewBox': '0 0 20 20',
+        'fill': 'currentColor',
+        'aria-hidden': 'true',
+        'data-slot': 'icon',
+        'ref': svgRef,
+        'aria-labelledby': titleId,
+      },
+      props
+    ),
+    title
+      ? /*#__PURE__*/ React.createElement(
+          'title',
+          {
+            id: titleId,
+          },
+          title
+        )
+      : null,
+    /*#__PURE__*/ React.createElement('path', {
+      fillRule: 'evenodd',
+      d: 'M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z',
+      clipRule: 'evenodd',
+    })
+  );
+}
+const ForwardRef$2 = /*#__PURE__*/ React.forwardRef(ChevronRightIcon);
+
+function Pagination({
+  currentPage,
+  totalPages,
+  hasPrevPage,
+  hasNextPage,
+  goToFirstPage,
+  goToPreviousPage,
+  goToNextPage,
+  goToLastPage,
+}) {
+  if (totalPages === 0) {
+    return null;
+  }
+  return jsxs('div', {
+    className: 'w-full flex justify-center items-center gap-x-2 mt-6',
+    children: [
+      jsx('button', {
+        'onClick': goToFirstPage,
+        'disabled': !hasPrevPage,
+        'aria-label': 'Zur ersten Seite',
+        'className':
+          'flex gap-0.5 px-4 py-2.5 text-sm text-white bg-primary-500 rounded-lg transition-colors disabled:bg-zinc-300 enabled:hover:bg-primary-400 dark:disabled:bg-zinc-800',
+        'children': jsx(ForwardRef$5, {
+          className: 'w-5 h-auto',
+        }),
+      }),
+      jsx('button', {
+        'onClick': goToPreviousPage,
+        'disabled': !hasPrevPage,
+        'aria-label': 'Zur vorherigen Seite',
+        'className':
+          'flex gap-0.5 px-4 py-2.5 text-sm text-white bg-primary-500 rounded-lg transition-colors disabled:bg-zinc-300 enabled:hover:bg-primary-400 dark:disabled:bg-zinc-800',
+        'children': jsx(ForwardRef$3, {
+          className: 'w-5 h-auto',
+        }),
+      }),
+      jsx('span', {
+        className:
+          'size-10 flex justify-center items-center text-sm text-black rounded-md dark:text-white',
+        children: currentPage,
+      }),
+      jsx('button', {
+        'onClick': goToNextPage,
+        'disabled': !hasNextPage,
+        'aria-label': 'Zur nächsten Seite',
+        'className':
+          'flex gap-0.5 px-4 py-2.5 text-sm text-white bg-primary-500 rounded-lg transition-colors disabled:bg-zinc-300 enabled:hover:bg-primary-400 dark:disabled:bg-zinc-800',
+        'children': jsx(ForwardRef$2, {
+          className: 'w-5 h-5',
+        }),
+      }),
+      jsx('button', {
+        'onClick': () =>
+          goToLastPage(
+            totalPages !== null && totalPages !== void 0
+              ? totalPages
+              : currentPage
+          ),
+        'disabled': !hasNextPage,
+        'aria-label': 'Zur letzten Seite',
+        'className':
+          'flex gap-0.5 px-4 py-2.5 text-sm text-white bg-primary-500 rounded-lg transition-colors disabled:bg-zinc-300 enabled:hover:bg-primary-400 dark:disabled:bg-zinc-800',
+        'children': jsx(ForwardRef$4, {
+          className: 'w-5 h-5',
+        }),
+      }),
+    ],
+  });
+}
+
+function CancelButton({ onClick }) {
+  return jsx('button', {
+    type: 'button',
+    className:
+      'px-5 py-1.5 isolate text-sm font-semibold text-white bg-zinc-500 rounded-lg transition-colors cursor-pointer hover:bg-zinc-400 ',
+    onClick: onClick,
+    children: 'Cancel',
+  });
+}
+
+function ErrorDisplay({ error }) {
+  if (!error) return null;
+  return jsx('div', {
+    className:
+      'error-display p-4 mb-4 text-red-700 bg-red-100 border rounded border-red-400',
+    children: error,
+  });
+}
+
+function HowToCloseText() {
+  return jsx('p', {
+    className: 'absolute top-full mt-2 text-xs text-black dark:text-white',
+    children: 'Schließen: außerhalb klicken oder die Esc-Taste drücken',
+  });
+}
+
 function EyeSlashIcon({ title, titleId, ...props }, svgRef) {
   return /*#__PURE__*/ React.createElement(
     'svg',
@@ -44,7 +287,7 @@ function EyeSlashIcon({ title, titleId, ...props }, svgRef) {
     })
   );
 }
-const ForwardRef$5 = /*#__PURE__*/ React.forwardRef(EyeSlashIcon);
+const ForwardRef$1 = /*#__PURE__*/ React.forwardRef(EyeSlashIcon);
 
 function EyeIcon({ title, titleId, ...props }, svgRef) {
   return /*#__PURE__*/ React.createElement(
@@ -84,7 +327,7 @@ function EyeIcon({ title, titleId, ...props }, svgRef) {
     })
   );
 }
-const ForwardRef$4 = /*#__PURE__*/ React.forwardRef(EyeIcon);
+const ForwardRef = /*#__PURE__*/ React.forwardRef(EyeIcon);
 
 function InputField({
   id,
@@ -126,12 +369,12 @@ function InputField({
                 className:
                   'size-5 absolute top-1/2 right-2 -translate-y-1/2 text-font-400 transition-colors cursor-pointer hover:text-font-300 dark:text-font-600 dark:hover:text-font-500',
                 children: isPasswordVisible
-                  ? jsx(ForwardRef$5, {
+                  ? jsx(ForwardRef$1, {
                       onClick: () => {
                         setIsPasswordVisible(false);
                       },
                     })
-                  : jsx(ForwardRef$4, {
+                  : jsx(ForwardRef, {
                       onClick: () => {
                         setIsPasswordVisible(true);
                       },
@@ -153,31 +396,109 @@ function InputField({
   });
 }
 
-const SigninForm = ({
-  mapText,
-  onSubmit,
-  errorMessage,
-  hideLabels,
-  onForgotPassword,
-}) => {
-  const { register, handleSubmit } = useForm({
-    shouldUseNativeValidation: true,
-  });
-  const [email, setEmail] = useState('');
-  return jsxs('form', {
-    onSubmit: handleSubmit(onSubmit),
-    className: 'space-y-6',
-    children: [
-      jsx(InputField, {
-        id: 'email',
-        label: mapText('auth:form.email.label'),
+function r(e) {
+  var t,
+    f,
+    n = '';
+  if ('string' == typeof e || 'number' == typeof e) n += e;
+  else if ('object' == typeof e)
+    if (Array.isArray(e)) {
+      var o = e.length;
+      for (t = 0; t < o; t++)
+        e[t] && (f = r(e[t])) && (n && (n += ' '), (n += f));
+    } else for (f in e) e[f] && (n && (n += ' '), (n += f));
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = '', o = arguments.length; f < o; f++)
+    (e = arguments[f]) && (t = r(e)) && (n && (n += ' '), (n += t));
+  return n;
+}
+
+function LoadingSpinner({ className, innerClassName }) {
+  return jsx('div', {
+    className: clsx(
+      'loading-spinner w-full h-full flex flex-col justify-center items-center px-1',
+      className
+    ),
+    children: jsx('div', {
+      'className': clsx(
+        'size-5 inline-block border-[3px] border-t-transparent rounded-full border-current animate-spin',
+        innerClassName
+      ),
+      'role': 'status',
+      'aria-label': 'loading',
+      'children': jsx('span', {
+        className: 'sr-only',
+        children: 'Loading...',
+      }),
+    }),
+  });
+}
+
+function SaveButton({ isSaving, onClick, disabled }) {
+  return jsx('button', {
+    type: 'submit',
+    className:
+      'px-5 py-1.5 isolate text-sm font-semibold text-white bg-primary-500 rounded-lg transition-colors cursor-pointer disabled:bg-zinc-300 disabled:cursor-default enabled:hover:bg-primary-400 dark:disabled:bg-zinc-800',
+    onClick: onClick,
+    disabled: disabled || isSaving,
+    children: isSaving ? jsx(LoadingSpinner, {}) : 'Save',
+  });
+}
+
+function Textarea({ value, onChange, rows = 2 }) {
+  return jsx('textarea', {
+    className: clsx(
+      'w-full block px-3 py-1.5 mt-3 text-sm/6 text-white bg-white/5 border-none rounded-lg'
+    ),
+    rows: rows,
+    value: value,
+    onChange: (e) => onChange(e.target.value),
+  });
+}
+
+var Util = /*#__PURE__*/ Object.freeze({
+  __proto__: null,
+  CancelButton: CancelButton,
+  ErrorDisplay: ErrorDisplay,
+  HowToCloseText: HowToCloseText,
+  InputField: InputField,
+  LoadingSpinner: LoadingSpinner,
+  MainContentFrame: MainContentFrame,
+  Pagination: Pagination,
+  SaveButton: SaveButton,
+  Textarea: Textarea,
+});
+
+const SigninForm = ({
+  mapText,
+  onSubmit,
+  errorMessage,
+  hideLabels,
+  onForgotPassword,
+}) => {
+  const { register, handleSubmit, setValue } = useForm({
+    shouldUseNativeValidation: true,
+  });
+  const [email, setEmail] = useState('');
+  return jsxs('form', {
+    onSubmit: handleSubmit(onSubmit),
+    className: 'space-y-6',
+    children: [
+      jsx(InputField, {
+        id: 'email',
+        label: mapText('auth:form.email.label'),
         type: 'text',
         hideLabel: hideLabels,
         required: true,
         autoCompleteId: 'email',
         register: register('email', {
           required: mapText('form.email.validations.required'),
-          onChange: (e) => setEmail(e.target.value),
+          onChange: (event) => {
+            setValue('email', event.target.value);
+            setEmail(event.target.value);
+          },
         }),
       }),
       jsx(InputField, {
@@ -189,6 +510,9 @@ const SigninForm = ({
         autoCompleteId: 'password',
         register: register('password', {
           required: mapText('form.password.validations.required'),
+          onChange: (event) => {
+            setValue('password', event.target.value);
+          },
         }),
         isPasswordField: true,
       }),
@@ -274,324 +598,6 @@ var UI = /*#__PURE__*/ Object.freeze({
   SigninLayout: SigninLayout,
 });
 
-function MainContentFrame({ children }) {
-  return jsx('main', {
-    className:
-      'w-full pb-2 overflow-hidden bg-zinc-100 lg:pt-2 lg:pr-2 dark:bg-zinc-950',
-    children: jsx('div', {
-      className:
-        'w-full h-full p-6 content-canvas bg-white border-zinc-950/10 lg:p-10 lg:border lg:rounded-lg lg:shadow-xs dark:bg-zinc-900 dark:border-white/5',
-      children: jsx('div', {
-        className: 'mx-auto max-w-[1400px]',
-        children: children,
-      }),
-    }),
-  });
-}
-
-function ChevronDoubleLeftIcon({ title, titleId, ...props }, svgRef) {
-  return /*#__PURE__*/ React.createElement(
-    'svg',
-    Object.assign(
-      {
-        'xmlns': 'http://www.w3.org/2000/svg',
-        'viewBox': '0 0 20 20',
-        'fill': 'currentColor',
-        'aria-hidden': 'true',
-        'data-slot': 'icon',
-        'ref': svgRef,
-        'aria-labelledby': titleId,
-      },
-      props
-    ),
-    title
-      ? /*#__PURE__*/ React.createElement(
-          'title',
-          {
-            id: titleId,
-          },
-          title
-        )
-      : null,
-    /*#__PURE__*/ React.createElement('path', {
-      fillRule: 'evenodd',
-      d: 'M4.72 9.47a.75.75 0 0 0 0 1.06l4.25 4.25a.75.75 0 1 0 1.06-1.06L6.31 10l3.72-3.72a.75.75 0 1 0-1.06-1.06L4.72 9.47Zm9.25-4.25L9.72 9.47a.75.75 0 0 0 0 1.06l4.25 4.25a.75.75 0 1 0 1.06-1.06L11.31 10l3.72-3.72a.75.75 0 0 0-1.06-1.06Z',
-      clipRule: 'evenodd',
-    })
-  );
-}
-const ForwardRef$3 = /*#__PURE__*/ React.forwardRef(ChevronDoubleLeftIcon);
-
-function ChevronDoubleRightIcon({ title, titleId, ...props }, svgRef) {
-  return /*#__PURE__*/ React.createElement(
-    'svg',
-    Object.assign(
-      {
-        'xmlns': 'http://www.w3.org/2000/svg',
-        'viewBox': '0 0 20 20',
-        'fill': 'currentColor',
-        'aria-hidden': 'true',
-        'data-slot': 'icon',
-        'ref': svgRef,
-        'aria-labelledby': titleId,
-      },
-      props
-    ),
-    title
-      ? /*#__PURE__*/ React.createElement(
-          'title',
-          {
-            id: titleId,
-          },
-          title
-        )
-      : null,
-    /*#__PURE__*/ React.createElement('path', {
-      fillRule: 'evenodd',
-      d: 'M15.28 9.47a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 1 1-1.06-1.06L13.69 10 9.97 6.28a.75.75 0 0 1 1.06-1.06l4.25 4.25ZM6.03 5.22l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L8.69 10 4.97 6.28a.75.75 0 0 1 1.06-1.06Z',
-      clipRule: 'evenodd',
-    })
-  );
-}
-const ForwardRef$2 = /*#__PURE__*/ React.forwardRef(ChevronDoubleRightIcon);
-
-function ChevronLeftIcon({ title, titleId, ...props }, svgRef) {
-  return /*#__PURE__*/ React.createElement(
-    'svg',
-    Object.assign(
-      {
-        'xmlns': 'http://www.w3.org/2000/svg',
-        'viewBox': '0 0 20 20',
-        'fill': 'currentColor',
-        'aria-hidden': 'true',
-        'data-slot': 'icon',
-        'ref': svgRef,
-        'aria-labelledby': titleId,
-      },
-      props
-    ),
-    title
-      ? /*#__PURE__*/ React.createElement(
-          'title',
-          {
-            id: titleId,
-          },
-          title
-        )
-      : null,
-    /*#__PURE__*/ React.createElement('path', {
-      fillRule: 'evenodd',
-      d: 'M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z',
-      clipRule: 'evenodd',
-    })
-  );
-}
-const ForwardRef$1 = /*#__PURE__*/ React.forwardRef(ChevronLeftIcon);
-
-function ChevronRightIcon({ title, titleId, ...props }, svgRef) {
-  return /*#__PURE__*/ React.createElement(
-    'svg',
-    Object.assign(
-      {
-        'xmlns': 'http://www.w3.org/2000/svg',
-        'viewBox': '0 0 20 20',
-        'fill': 'currentColor',
-        'aria-hidden': 'true',
-        'data-slot': 'icon',
-        'ref': svgRef,
-        'aria-labelledby': titleId,
-      },
-      props
-    ),
-    title
-      ? /*#__PURE__*/ React.createElement(
-          'title',
-          {
-            id: titleId,
-          },
-          title
-        )
-      : null,
-    /*#__PURE__*/ React.createElement('path', {
-      fillRule: 'evenodd',
-      d: 'M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z',
-      clipRule: 'evenodd',
-    })
-  );
-}
-const ForwardRef = /*#__PURE__*/ React.forwardRef(ChevronRightIcon);
-
-function Pagination({
-  currentPage,
-  totalPages,
-  hasPrevPage,
-  hasNextPage,
-  goToFirstPage,
-  goToPreviousPage,
-  goToNextPage,
-  goToLastPage,
-}) {
-  if (totalPages === 0) {
-    return null;
-  }
-  return jsxs('div', {
-    className: 'w-full flex justify-center items-center gap-x-2 mt-6',
-    children: [
-      jsx('button', {
-        'onClick': goToFirstPage,
-        'disabled': !hasPrevPage,
-        'aria-label': 'Zur ersten Seite',
-        'className':
-          'flex gap-0.5 px-4 py-2.5 text-sm text-white bg-primary-500 rounded-lg transition-colors disabled:bg-zinc-300 enabled:hover:bg-primary-400 dark:disabled:bg-zinc-800',
-        'children': jsx(ForwardRef$3, {
-          className: 'w-5 h-auto',
-        }),
-      }),
-      jsx('button', {
-        'onClick': goToPreviousPage,
-        'disabled': !hasPrevPage,
-        'aria-label': 'Zur vorherigen Seite',
-        'className':
-          'flex gap-0.5 px-4 py-2.5 text-sm text-white bg-primary-500 rounded-lg transition-colors disabled:bg-zinc-300 enabled:hover:bg-primary-400 dark:disabled:bg-zinc-800',
-        'children': jsx(ForwardRef$1, {
-          className: 'w-5 h-auto',
-        }),
-      }),
-      jsx('span', {
-        className:
-          'size-10 flex justify-center items-center text-sm text-black rounded-md dark:text-white',
-        children: currentPage,
-      }),
-      jsx('button', {
-        'onClick': goToNextPage,
-        'disabled': !hasNextPage,
-        'aria-label': 'Zur nächsten Seite',
-        'className':
-          'flex gap-0.5 px-4 py-2.5 text-sm text-white bg-primary-500 rounded-lg transition-colors disabled:bg-zinc-300 enabled:hover:bg-primary-400 dark:disabled:bg-zinc-800',
-        'children': jsx(ForwardRef, {
-          className: 'w-5 h-5',
-        }),
-      }),
-      jsx('button', {
-        'onClick': () =>
-          goToLastPage(
-            totalPages !== null && totalPages !== void 0
-              ? totalPages
-              : currentPage
-          ),
-        'disabled': !hasNextPage,
-        'aria-label': 'Zur letzten Seite',
-        'className':
-          'flex gap-0.5 px-4 py-2.5 text-sm text-white bg-primary-500 rounded-lg transition-colors disabled:bg-zinc-300 enabled:hover:bg-primary-400 dark:disabled:bg-zinc-800',
-        'children': jsx(ForwardRef$2, {
-          className: 'w-5 h-5',
-        }),
-      }),
-    ],
-  });
-}
-
-function CancelButton({ onClick }) {
-  return jsx('button', {
-    type: 'button',
-    className:
-      'px-5 py-1.5 isolate text-sm font-semibold text-white bg-zinc-500 rounded-lg transition-colors cursor-pointer hover:bg-zinc-400 ',
-    onClick: onClick,
-    children: 'Cancel',
-  });
-}
-
-function ErrorDisplay({ error }) {
-  if (!error) return null;
-  return jsx('div', {
-    className:
-      'error-display p-4 mb-4 text-red-700 bg-red-100 border rounded border-red-400',
-    children: error,
-  });
-}
-
-function HowToCloseText() {
-  return jsx('p', {
-    className: 'absolute top-full mt-2 text-xs text-black dark:text-white',
-    children: 'Schließen: außerhalb klicken oder die Esc-Taste drücken',
-  });
-}
-
-function r(e) {
-  var t,
-    f,
-    n = '';
-  if ('string' == typeof e || 'number' == typeof e) n += e;
-  else if ('object' == typeof e)
-    if (Array.isArray(e)) {
-      var o = e.length;
-      for (t = 0; t < o; t++)
-        e[t] && (f = r(e[t])) && (n && (n += ' '), (n += f));
-    } else for (f in e) e[f] && (n && (n += ' '), (n += f));
-  return n;
-}
-function clsx() {
-  for (var e, t, f = 0, n = '', o = arguments.length; f < o; f++)
-    (e = arguments[f]) && (t = r(e)) && (n && (n += ' '), (n += t));
-  return n;
-}
-
-function LoadingSpinner({ className, innerClassName }) {
-  return jsx('div', {
-    className: clsx(
-      'loading-spinner w-full h-full flex flex-col justify-center items-center px-1',
-      className
-    ),
-    children: jsx('div', {
-      'className': clsx(
-        'size-5 inline-block border-[3px] border-t-transparent rounded-full border-current animate-spin',
-        innerClassName
-      ),
-      'role': 'status',
-      'aria-label': 'loading',
-      'children': jsx('span', {
-        className: 'sr-only',
-        children: 'Loading...',
-      }),
-    }),
-  });
-}
-
-function SaveButton({ isSaving, onClick, disabled }) {
-  return jsx('button', {
-    type: 'submit',
-    className:
-      'px-5 py-1.5 isolate text-sm font-semibold text-white bg-primary-500 rounded-lg transition-colors cursor-pointer disabled:bg-zinc-300 disabled:cursor-default enabled:hover:bg-primary-400 dark:disabled:bg-zinc-800',
-    onClick: onClick,
-    disabled: disabled || isSaving,
-    children: isSaving ? jsx(LoadingSpinner, {}) : 'Save',
-  });
-}
-
-function Textarea({ value, onChange, rows = 2 }) {
-  return jsx('textarea', {
-    className: clsx(
-      'w-full block px-3 py-1.5 mt-3 text-sm/6 text-white bg-white/5 border-none rounded-lg'
-    ),
-    rows: rows,
-    value: value,
-    onChange: (e) => onChange(e.target.value),
-  });
-}
-
-var Util = /*#__PURE__*/ Object.freeze({
-  __proto__: null,
-  CancelButton: CancelButton,
-  ErrorDisplay: ErrorDisplay,
-  HowToCloseText: HowToCloseText,
-  InputField: InputField,
-  LoadingSpinner: LoadingSpinner,
-  MainContentFrame: MainContentFrame,
-  Pagination: Pagination,
-  SaveButton: SaveButton,
-  Textarea: Textarea,
-});
-
 const TemplateParserContext = createContext({
   parse: () => String(),
   addToTemporaryView: () => {},