@native-systems/ui 1.0.11 → 1.2.0

package/dist/index.esm.js

@@ -1,7 +1,21 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useForm } from 'react-hook-form';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import { useState, createContext, useRef, useContext } from 'react';
+import {
+  useMemo,
+  Fragment as Fragment$1,
+  useState,
+  createContext,
+  useRef,
+  useContext,
+} from 'react';
+import { useForm } from 'react-hook-form';
+import {
+  Listbox,
+  ListboxButton,
+  Transition,
+  ListboxOptions,
+  ListboxOption,
+} from '@headlessui/react';
 import {
   PatternCompiler,
   eqPlugin,
@@ -11,16 +25,29 @@ import {
   urlPlugin,
 } from '@native-systems/utility';
 
-function EyeSlashIcon({ title, titleId, ...props }, svgRef) {
+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',
-        'fill': 'none',
-        'viewBox': '0 0 24 24',
-        'strokeWidth': 1.5,
-        'stroke': 'currentColor',
+        'viewBox': '0 0 20 20',
+        'fill': 'currentColor',
         'aria-hidden': 'true',
         'data-slot': 'icon',
         'ref': svgRef,
@@ -38,24 +65,22 @@ function EyeSlashIcon({ title, titleId, ...props }, svgRef) {
         )
       : null,
     /*#__PURE__*/ React.createElement('path', {
-      strokeLinecap: 'round',
-      strokeLinejoin: 'round',
-      d: 'M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88',
+      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(EyeSlashIcon);
+const ForwardRef$7 = /*#__PURE__*/ React.forwardRef(ChevronDoubleLeftIcon);
 
-function EyeIcon({ title, titleId, ...props }, svgRef) {
+function ChevronDoubleRightIcon({ title, titleId, ...props }, svgRef) {
   return /*#__PURE__*/ React.createElement(
     'svg',
     Object.assign(
       {
         'xmlns': 'http://www.w3.org/2000/svg',
-        'fill': 'none',
-        'viewBox': '0 0 24 24',
-        'strokeWidth': 1.5,
-        'stroke': 'currentColor',
+        'viewBox': '0 0 20 20',
+        'fill': 'currentColor',
         'aria-hidden': 'true',
         'data-slot': 'icon',
         'ref': svgRef,
@@ -73,223 +98,15 @@ function EyeIcon({ title, titleId, ...props }, svgRef) {
         )
       : null,
     /*#__PURE__*/ React.createElement('path', {
-      strokeLinecap: 'round',
-      strokeLinejoin: 'round',
-      d: 'M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z',
-    }),
-    /*#__PURE__*/ React.createElement('path', {
-      strokeLinecap: 'round',
-      strokeLinejoin: 'round',
-      d: 'M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z',
+      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(EyeIcon);
-
-function InputField({
-  id,
-  label,
-  hideLabel = false,
-  register,
-  type,
-  disabled = false,
-  required,
-  autoCompleteId = 'off',
-  isPasswordField = false,
-}) {
-  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
-  return jsxs('div', {
-    className: 'flex flex-col space-y-2',
-    children: [
-      !hideLabel
-        ? jsx('label', {
-            htmlFor: id,
-            className:
-              'block ml-1 text-sm font-medium text-gray-700 dark:text-white',
-            children: label,
-          })
-        : null,
-      isPasswordField
-        ? jsxs('div', {
-            className: 'relative w-full',
-            children: [
-              jsx('input', {
-                id: id,
-                required: required,
-                type: isPasswordVisible ? 'text' : 'password',
-                autoComplete: autoCompleteId,
-                placeholder: label,
-                className: `relative w-full block py-3 pr-10 pl-3 text-sm text-font-950 bg-base-0 border rounded-lg border-base-500/15 appearance-none focus:outline-none focus:ring-primary-500 placeholder-font-400 dark:text-font-0 dark:text-font-100 dark:bg-base-950 dark:placeholder-font-600 ${type === 'number' ? 'text-right' : ''}`,
-                ...register,
-              }),
-              jsx('div', {
-                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, {
-                      onClick: () => {
-                        setIsPasswordVisible(false);
-                      },
-                    })
-                  : jsx(ForwardRef$4, {
-                      onClick: () => {
-                        setIsPasswordVisible(true);
-                      },
-                    }),
-              }),
-            ],
-          })
-        : jsx('input', {
-            id: id,
-            required: required,
-            type: type,
-            disabled: disabled,
-            autoComplete: autoCompleteId,
-            placeholder: label,
-            className: `relative w-full block py-3 pr-10 pl-3 text-sm text-font-950 bg-base-0 border rounded-lg border-base-500/15 appearance-none focus:outline-none focus:ring-primary-500 placeholder-font-400 dark:text-font-0 dark:text-font-100 dark:bg-base-950 dark:placeholder-font-600 ${type === 'number' ? 'text-right' : ''}`,
-            ...register,
-          }),
-    ],
-  });
-}
-
-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'),
-        type: 'text',
-        hideLabel: hideLabels,
-        required: true,
-        autoCompleteId: 'email',
-        register: register('email', {
-          required: mapText('form.email.validations.required'),
-          onChange: (e) => setEmail(e.target.value),
-        }),
-      }),
-      jsx(InputField, {
-        id: 'password',
-        label: mapText('auth:form.password.label'),
-        type: 'password',
-        hideLabel: hideLabels,
-        required: true,
-        autoCompleteId: 'password',
-        register: register('password', {
-          required: mapText('form.password.validations.required'),
-        }),
-        isPasswordField: true,
-      }),
-      jsxs('div', {
-        children: [
-          jsx('input', {
-            type: 'submit',
-            value: mapText('auth:form.submit.text'),
-            className:
-              'w-full flex justify-center px-4 py-3 text-sm text-white bg-[length:200%_200%] bg-primary-shimmer border-none border rounded-lg shadow-sm transition-transform animate-shimmerdelayed cursor-pointer hover:scale-105 focus:outline-none focus:ring-1 focus:ring-base-600/20 focus:ring-offset-0 dark:focus:ring-base-500',
-          }),
-          errorMessage &&
-            jsx('span', {
-              className: 'block mt-2.5 text-sm text-red-600',
-              children: errorMessage,
-            }),
-        ],
-      }),
-      jsx('div', {
-        className: 'flex justify-between items-center',
-        children: jsx('div', {
-          className: 'text-sm',
-          children: jsx('button', {
-            type: 'button',
-            onClick: () => {
-              if (onForgotPassword) onForgotPassword(email);
-            },
-            className:
-              'font-medium text-primary transition-colors hover:text-primary-500 dark:text-white',
-            children: mapText('auth:form.forgot.text'),
-          }),
-        }),
-      }),
-    ],
-  });
-};
-
-function SigninLayout({
-  mapText,
-  onSubmit,
-  errorMessage,
-  logoSrc,
-  hideLabels,
-  onForgotPassword,
-}) {
-  return jsx('div', {
-    className:
-      'sign-in-layout-container size-full z-10 relative flex justify-end items-center p-5 sm:p-10',
-    children: jsx('div', {
-      className: 'w-full flex flex-row justify-center items-stretch max-w-xl',
-      children: jsxs('div', {
-        className:
-          'sign-in-dialog w-full p-5 bg-base-0/70 rounded-lg sm:p-10 dark:bg-base-950/70',
-        children: [
-          jsx('img', {
-            className: 'w-auto h-10 mb-20 object-cover',
-            src: logoSrc,
-            alt: '',
-          }),
-          jsx('h2', {
-            className: 'dark:text-white',
-            children: mapText('auth:form.submit.text'),
-          }),
-          jsx('div', {
-            className: 'mt-5',
-            children: jsx(SigninForm, {
-              mapText: mapText,
-              onSubmit: (values) => onSubmit(values.email, values.password),
-              errorMessage: errorMessage,
-              hideLabels: hideLabels,
-              onForgotPassword: onForgotPassword,
-            }),
-          }),
-        ],
-      }),
-    }),
-  });
-}
-
-var UI = /*#__PURE__*/ Object.freeze({
-  __proto__: null,
-  SigninForm: SigninForm,
-  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,
-      }),
-    }),
-  });
-}
+const ForwardRef$6 = /*#__PURE__*/ React.forwardRef(ChevronDoubleRightIcon);
 
-function ChevronDoubleLeftIcon({ title, titleId, ...props }, svgRef) {
+function ChevronDownIcon({ title, titleId, ...props }, svgRef) {
   return /*#__PURE__*/ React.createElement(
     'svg',
     Object.assign(
@@ -315,47 +132,14 @@ function ChevronDoubleLeftIcon({ title, titleId, ...props }, svgRef) {
       : 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',
+      d: 'M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z',
       clipRule: 'evenodd',
     })
   );
 }
-const ForwardRef$3 = /*#__PURE__*/ React.forwardRef(ChevronDoubleLeftIcon);
+const ForwardRef$5 = /*#__PURE__*/ React.forwardRef(ChevronDownIcon);
 
-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) {
+function ChevronLeftIcon({ title, titleId, ...props }, svgRef) {
   return /*#__PURE__*/ React.createElement(
     'svg',
     Object.assign(
@@ -386,7 +170,7 @@ function ChevronLeftIcon({ title, titleId, ...props }, svgRef) {
     })
   );
 }
-const ForwardRef$1 = /*#__PURE__*/ React.forwardRef(ChevronLeftIcon);
+const ForwardRef$4 = /*#__PURE__*/ React.forwardRef(ChevronLeftIcon);
 
 function ChevronRightIcon({ title, titleId, ...props }, svgRef) {
   return /*#__PURE__*/ React.createElement(
@@ -419,7 +203,7 @@ function ChevronRightIcon({ title, titleId, ...props }, svgRef) {
     })
   );
 }
-const ForwardRef = /*#__PURE__*/ React.forwardRef(ChevronRightIcon);
+const ForwardRef$3 = /*#__PURE__*/ React.forwardRef(ChevronRightIcon);
 
 function Pagination({
   currentPage,
@@ -443,7 +227,7 @@ function Pagination({
         '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, {
+        'children': jsx(ForwardRef$7, {
           className: 'w-5 h-auto',
         }),
       }),
@@ -453,7 +237,7 @@ function Pagination({
         '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, {
+        'children': jsx(ForwardRef$4, {
           className: 'w-5 h-auto',
         }),
       }),
@@ -468,7 +252,7 @@ function Pagination({
         '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, {
+        'children': jsx(ForwardRef$3, {
           className: 'w-5 h-5',
         }),
       }),
@@ -483,7 +267,7 @@ function Pagination({
         '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, {
+        'children': jsx(ForwardRef$6, {
           className: 'w-5 h-5',
         }),
       }),
@@ -491,6 +275,270 @@ function Pagination({
   });
 }
 
+function CheckIcon({ title, titleId, ...props }, svgRef) {
+  return /*#__PURE__*/ React.createElement(
+    'svg',
+    Object.assign(
+      {
+        'xmlns': 'http://www.w3.org/2000/svg',
+        'fill': 'none',
+        'viewBox': '0 0 24 24',
+        'strokeWidth': 1.5,
+        'stroke': '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', {
+      strokeLinecap: 'round',
+      strokeLinejoin: 'round',
+      d: 'm4.5 12.75 6 6 9-13.5',
+    })
+  );
+}
+const ForwardRef$2 = /*#__PURE__*/ React.forwardRef(CheckIcon);
+
+function EyeSlashIcon({ title, titleId, ...props }, svgRef) {
+  return /*#__PURE__*/ React.createElement(
+    'svg',
+    Object.assign(
+      {
+        'xmlns': 'http://www.w3.org/2000/svg',
+        'fill': 'none',
+        'viewBox': '0 0 24 24',
+        'strokeWidth': 1.5,
+        'stroke': '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', {
+      strokeLinecap: 'round',
+      strokeLinejoin: 'round',
+      d: 'M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88',
+    })
+  );
+}
+const ForwardRef$1 = /*#__PURE__*/ React.forwardRef(EyeSlashIcon);
+
+function EyeIcon({ title, titleId, ...props }, svgRef) {
+  return /*#__PURE__*/ React.createElement(
+    'svg',
+    Object.assign(
+      {
+        'xmlns': 'http://www.w3.org/2000/svg',
+        'fill': 'none',
+        'viewBox': '0 0 24 24',
+        'strokeWidth': 1.5,
+        'stroke': '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', {
+      strokeLinecap: 'round',
+      strokeLinejoin: 'round',
+      d: 'M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z',
+    }),
+    /*#__PURE__*/ React.createElement('path', {
+      strokeLinecap: 'round',
+      strokeLinejoin: 'round',
+      d: 'M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z',
+    })
+  );
+}
+const ForwardRef = /*#__PURE__*/ React.forwardRef(EyeIcon);
+
+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 countryCodeToFlag(countryCode) {
+  return countryCode
+    .toUpperCase()
+    .replace(/./g, (char) =>
+      String.fromCodePoint(0x1f1e6 + char.charCodeAt(0) - 65)
+    );
+}
+function LocaleSelect({
+  locales,
+  value,
+  set,
+  className,
+  buttonClassName,
+  listClassName,
+  disabled,
+  ariaLabel = 'Select language',
+}) {
+  const selected = useMemo(() => {
+    var _locales_find, _ref;
+    return (_ref =
+      (_locales_find = locales.find((l) => l.locale === value)) !== null &&
+      _locales_find !== void 0
+        ? _locales_find
+        : locales[0]) !== null && _ref !== void 0
+      ? _ref
+      : null;
+  }, [locales, value]);
+  if (!locales.length) return null;
+  var _selected_locale;
+  return jsx('div', {
+    className: clsx('relative inline-block', className),
+    children: jsx(Listbox, {
+      value:
+        (_selected_locale =
+          selected === null || selected === void 0
+            ? void 0
+            : selected.locale) !== null && _selected_locale !== void 0
+          ? _selected_locale
+          : null,
+      onChange: (nextLocale) => {
+        set(nextLocale);
+      },
+      disabled: disabled,
+      children: ({ open }) => {
+        var _selected_label;
+        return jsxs(Fragment, {
+          children: [
+            jsxs(ListboxButton, {
+              'aria-label': ariaLabel,
+              'className': clsx(
+                'inline-flex items-center gap-2 px-3 py-2 text-sm border rounded-md',
+                'disabled:opacity-50 disabled:cursor-not-allowed',
+                buttonClassName
+              ),
+              'children': [
+                jsx('span', {
+                  'aria-hidden': 'true',
+                  'className': 'text-base leading-none',
+                  'children': selected
+                    ? countryCodeToFlag(selected.countryCode)
+                    : '🏳️',
+                }),
+                jsx('span', {
+                  className: 'whitespace-nowrap',
+                  children:
+                    (_selected_label =
+                      selected === null || selected === void 0
+                        ? void 0
+                        : selected.label) !== null && _selected_label !== void 0
+                      ? _selected_label
+                      : '',
+                }),
+                jsx(ForwardRef$5, {
+                  'aria-hidden': 'true',
+                  'className': 'size-4 ml-1',
+                }),
+              ],
+            }),
+            jsx(Transition, {
+              as: Fragment$1,
+              show: open,
+              enter: 'transition ease-out duration-100',
+              enterFrom: 'opacity-0 translate-y-1',
+              enterTo: 'opacity-100 translate-y-0',
+              leave: 'transition ease-in duration-75',
+              leaveFrom: 'opacity-100 translate-y-0',
+              leaveTo: 'opacity-0 translate-y-1',
+              children: jsx(ListboxOptions, {
+                className: clsx(
+                  'z-50 absolute min-w-[12rem] mt-2 overflow-hidden bg-white border rounded-md shadow-lg focus:outline-none',
+                  listClassName
+                ),
+                children: locales.map((opt) =>
+                  jsx(
+                    ListboxOption,
+                    {
+                      value: opt.locale,
+                      className: ({ focus }) =>
+                        clsx(
+                          'cursor-pointer select-none px-3 py-2 text-sm',
+                          focus && 'bg-black/5'
+                        ),
+                      children: ({ selected: isSelected }) =>
+                        jsxs('div', {
+                          className: 'flex items-center gap-2',
+                          children: [
+                            jsx('span', {
+                              'aria-hidden': 'true',
+                              'className': 'text-base leading-none',
+                              'children': countryCodeToFlag(opt.countryCode),
+                            }),
+                            jsx('span', {
+                              className: 'flex-1',
+                              children: opt.label,
+                            }),
+                            isSelected &&
+                              jsx(ForwardRef$2, {
+                                'aria-hidden': 'true',
+                                'className': 'size-4',
+                              }),
+                          ],
+                        }),
+                    },
+                    opt.locale
+                  )
+                ),
+              }),
+            }),
+          ],
+        });
+      },
+    }),
+  });
+}
+
 function CancelButton({ onClick }) {
   return jsx('button', {
     type: 'button',
@@ -517,23 +565,71 @@ function HowToCloseText() {
   });
 }
 
-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 InputField({
+  id,
+  label,
+  hideLabel = false,
+  register,
+  type,
+  disabled = false,
+  required,
+  autoCompleteId = 'off',
+  isPasswordField = false,
+}) {
+  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+  return jsxs('div', {
+    className: 'flex flex-col space-y-2',
+    children: [
+      !hideLabel
+        ? jsx('label', {
+            htmlFor: id,
+            className:
+              'block ml-1 text-sm font-medium text-gray-700 dark:text-white',
+            children: label,
+          })
+        : null,
+      isPasswordField
+        ? jsxs('div', {
+            className: 'relative w-full',
+            children: [
+              jsx('input', {
+                id: id,
+                required: required,
+                type: isPasswordVisible ? 'text' : 'password',
+                autoComplete: autoCompleteId,
+                placeholder: label,
+                className: `relative w-full block py-3 pr-10 pl-3 text-sm text-font-950 bg-base-0 border rounded-lg border-base-500/15 appearance-none focus:outline-none focus:ring-primary-500 placeholder-font-400 dark:text-font-0 dark:text-font-100 dark:bg-base-950 dark:placeholder-font-600 ${type === 'number' ? 'text-right' : ''}`,
+                ...register,
+              }),
+              jsx('div', {
+                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$1, {
+                      onClick: () => {
+                        setIsPasswordVisible(false);
+                      },
+                    })
+                  : jsx(ForwardRef, {
+                      onClick: () => {
+                        setIsPasswordVisible(true);
+                      },
+                    }),
+              }),
+            ],
+          })
+        : jsx('input', {
+            id: id,
+            required: required,
+            type: type,
+            disabled: disabled,
+            autoComplete: autoCompleteId,
+            placeholder: label,
+            className: `relative w-full block py-3 pr-10 pl-3 text-sm text-font-950 bg-base-0 border rounded-lg border-base-500/15 appearance-none focus:outline-none focus:ring-primary-500 placeholder-font-400 dark:text-font-0 dark:text-font-100 dark:bg-base-950 dark:placeholder-font-600 ${type === 'number' ? 'text-right' : ''}`,
+            ...register,
+          }),
+    ],
+  });
 }
 
 function LoadingSpinner({ className, innerClassName }) {
@@ -586,10 +682,139 @@ var Util = /*#__PURE__*/ Object.freeze({
   HowToCloseText: HowToCloseText,
   InputField: InputField,
   LoadingSpinner: LoadingSpinner,
+  LocaleSelect: LocaleSelect,
   MainContentFrame: MainContentFrame,
   Pagination: Pagination,
   SaveButton: SaveButton,
   Textarea: Textarea,
+  countryCodeToFlag: countryCodeToFlag,
+});
+
+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: (event) => {
+            setValue('email', event.target.value);
+            setEmail(event.target.value);
+          },
+        }),
+      }),
+      jsx(InputField, {
+        id: 'password',
+        label: mapText('auth:form.password.label'),
+        type: 'password',
+        hideLabel: hideLabels,
+        required: true,
+        autoCompleteId: 'password',
+        register: register('password', {
+          required: mapText('form.password.validations.required'),
+          onChange: (event) => {
+            setValue('password', event.target.value);
+          },
+        }),
+        isPasswordField: true,
+      }),
+      jsxs('div', {
+        children: [
+          jsx('input', {
+            type: 'submit',
+            value: mapText('auth:form.submit.text'),
+            className:
+              'w-full flex justify-center px-4 py-3 text-sm text-white bg-[length:200%_200%] bg-primary-shimmer border-none border rounded-lg shadow-sm transition-transform animate-shimmerdelayed cursor-pointer hover:scale-105 focus:outline-none focus:ring-1 focus:ring-base-600/20 focus:ring-offset-0 dark:focus:ring-base-500',
+          }),
+          errorMessage &&
+            jsx('span', {
+              className: 'block mt-2.5 text-sm text-red-600',
+              children: errorMessage,
+            }),
+        ],
+      }),
+      jsx('div', {
+        className: 'flex justify-between items-center',
+        children: jsx('div', {
+          className: 'text-sm',
+          children: jsx('button', {
+            type: 'button',
+            onClick: () => {
+              if (onForgotPassword) onForgotPassword(email);
+            },
+            className:
+              'font-medium text-primary transition-colors hover:text-primary-500 dark:text-white',
+            children: mapText('auth:form.forgot.text'),
+          }),
+        }),
+      }),
+    ],
+  });
+};
+
+function SigninLayout({
+  mapText,
+  onSubmit,
+  errorMessage,
+  logoSrc,
+  hideLabels,
+  onForgotPassword,
+}) {
+  return jsx('div', {
+    className:
+      'sign-in-layout-container size-full z-10 relative flex justify-end items-center p-5 sm:p-10',
+    children: jsx('div', {
+      className: 'w-full flex flex-row justify-center items-stretch max-w-xl',
+      children: jsxs('div', {
+        className:
+          'sign-in-dialog w-full p-5 bg-base-0/70 rounded-lg sm:p-10 dark:bg-base-950/70',
+        children: [
+          jsx('img', {
+            className: 'w-auto h-10 mb-20 object-cover',
+            src: logoSrc,
+            alt: '',
+          }),
+          jsx('h2', {
+            className: 'dark:text-white',
+            children: mapText('auth:form.submit.text'),
+          }),
+          jsx('div', {
+            className: 'mt-5',
+            children: jsx(SigninForm, {
+              mapText: mapText,
+              onSubmit: (values) => onSubmit(values.email, values.password),
+              errorMessage: errorMessage,
+              hideLabels: hideLabels,
+              onForgotPassword: onForgotPassword,
+            }),
+          }),
+        ],
+      }),
+    }),
+  });
+}
+
+var UI = /*#__PURE__*/ Object.freeze({
+  __proto__: null,
+  SigninForm: SigninForm,
+  SigninLayout: SigninLayout,
 });
 
 const TemplateParserContext = createContext({
@@ -674,6 +899,7 @@ export {
   HowToCloseText,
   InputField,
   LoadingSpinner,
+  LocaleSelect,
   MainContentFrame,
   Pagination,
   SaveButton,
@@ -681,6 +907,7 @@ export {
   SigninLayout,
   TemplateParserProvider,
   Textarea,
+  countryCodeToFlag,
   index as default,
   useTemplateParser,
 };