@owlmeans/web-panel 0.1.2 → 0.1.4

package/src/@/components/ui/card.tsx

@@ -0,0 +1,93 @@
+// shadcn card — sourced from shadcn (new-york) 2026-05-23
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

package/src/@/components/ui/input.tsx

@@ -0,0 +1,22 @@
+// shadcn input — sourced from shadcn (new-york) 2026-05-23
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

package/src/@/components/ui/label.tsx

@@ -0,0 +1,23 @@
+// shadcn label — sourced from shadcn (new-york) 2026-05-23
+import * as React from 'react'
+import * as LabelPrimitive from '@radix-ui/react-label'
+
+import { cn } from '@/lib/utils'
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }

package/src/@/components/ui/progress.tsx

@@ -0,0 +1,44 @@
+// shadcn progress — sourced from shadcn (new-york) 2026-05-23
+// Extended with `indeterminate` mode: when `value === undefined` (or not passed),
+// the indicator animates left-to-right continuously via the
+// `--animate-progress-indeterminate` token defined in globals.css.
+import * as React from 'react'
+import * as ProgressPrimitive from '@radix-ui/react-progress'
+
+import { cn } from '@/lib/utils'
+
+function Progress({
+  className,
+  value,
+  ...props
+}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
+  const indeterminate = value == null
+
+  return (
+    <ProgressPrimitive.Root
+      data-slot="progress"
+      className={cn(
+        "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
+        className
+      )}
+      value={indeterminate ? undefined : value}
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        data-slot="progress-indicator"
+        data-state={indeterminate ? 'indeterminate' : 'determinate'}
+        className={cn(
+          "bg-primary h-full w-full flex-1 transition-all",
+          indeterminate && "absolute inset-y-0 left-0 w-1/3 animate-[progress-indeterminate_1.5s_linear_infinite]"
+        )}
+        style={
+          indeterminate
+            ? undefined
+            : { transform: `translateX(-${100 - (value || 0)}%)` }
+        }
+      />
+    </ProgressPrimitive.Root>
+  )
+}
+
+export { Progress }

package/src/@/components/ui/separator.tsx

@@ -0,0 +1,27 @@
+// shadcn separator — sourced from shadcn (new-york) 2026-05-23
+import * as React from 'react'
+import * as SeparatorPrimitive from '@radix-ui/react-separator'
+
+import { cn } from '@/lib/utils'
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }

package/src/@/globals.css

@@ -0,0 +1,64 @@
+@import "tailwindcss";
+
+@source "../..";
+
+@theme {
+  --color-background:           oklch(1 0 0);
+  --color-foreground:           oklch(0.145 0 0);
+
+  --color-card:                 oklch(1 0 0);
+  --color-card-foreground:      oklch(0.145 0 0);
+
+  --color-popover:              oklch(1 0 0);
+  --color-popover-foreground:   oklch(0.145 0 0);
+
+  --color-primary:              oklch(0.205 0 0);
+  --color-primary-foreground:   oklch(0.985 0 0);
+
+  --color-secondary:            oklch(0.97 0 0);
+  --color-secondary-foreground: oklch(0.205 0 0);
+
+  --color-muted:                oklch(0.97 0 0);
+  --color-muted-foreground:     oklch(0.556 0 0);
+
+  --color-accent:               oklch(0.97 0 0);
+  --color-accent-foreground:    oklch(0.205 0 0);
+
+  --color-destructive:          oklch(0.577 0.245 27.325);
+  --color-success:              oklch(0.62 0.18 145);
+
+  --color-border:               oklch(0.922 0 0);
+  --color-input:                oklch(0.922 0 0);
+  --color-ring:                 oklch(0.708 0 0);
+
+  --radius:                     0.625rem;
+
+  --animate-progress-indeterminate: progress-indeterminate 1.5s linear infinite;
+
+  @keyframes progress-indeterminate {
+    0%   { transform: translateX(-100%); }
+    100% { transform: translateX(100%); }
+  }
+}
+
+.dark {
+  --color-background:           oklch(0.145 0 0);
+  --color-foreground:           oklch(0.985 0 0);
+  --color-card:                 oklch(0.205 0 0);
+  --color-card-foreground:      oklch(0.985 0 0);
+  --color-popover:              oklch(0.205 0 0);
+  --color-popover-foreground:   oklch(0.985 0 0);
+  --color-primary:              oklch(0.922 0 0);
+  --color-primary-foreground:   oklch(0.205 0 0);
+  --color-secondary:            oklch(0.269 0 0);
+  --color-secondary-foreground: oklch(0.985 0 0);
+  --color-muted:                oklch(0.269 0 0);
+  --color-muted-foreground:     oklch(0.708 0 0);
+  --color-accent:               oklch(0.269 0 0);
+  --color-accent-foreground:    oklch(0.985 0 0);
+  --color-destructive:          oklch(0.704 0.191 22.216);
+  --color-success:              oklch(0.7 0.18 145);
+  --color-border:               oklch(1 0 0 / 10%);
+  --color-input:                oklch(1 0 0 / 15%);
+  --color-ring:                 oklch(0.556 0 0);
+}

package/src/@/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/auth/exports.ts

@@ -3,11 +3,11 @@ export { handler, useModule, useValue, useNavigate } from '@owlmeans/client'
 export type { Navigator } from '@owlmeans/client'
 export { config } from '@owlmeans/client-context'
 export { service } from '@owlmeans/config'
-export { guard, parent, ModuleOutcome, clone } from '@owlmeans/module'
-export type { AbstractRequest } from '@owlmeans/module'
+export { guard, parent, EntrypointOutcome, clone } from '@owlmeans/entrypoint'
+export type { AbstractRequest } from '@owlmeans/entrypoint'
 export { addWebService } from '@owlmeans/client-config'
-export { module, elevate, provideRequest, stab } from '@owlmeans/client-module'
-export type { ClientModule as Module, ClientRequest as Request } from '@owlmeans/client-module'
+export { entrypoint, elevate, provideRequest, stab } from '@owlmeans/client-entrypoint'
+export type { ClientEntrypoint as Module, ClientRequest as Request } from '@owlmeans/client-entrypoint'
 export { route as croute } from '@owlmeans/client-route'
 export { route, frontend, RouteMethod } from '@owlmeans/route'
 export type { ResolvedServiceRoute as ServiceRoute } from '@owlmeans/route'

package/src/auth/plugins/basic-ed25519.tsx

@@ -1,7 +1,7 @@
 import type { Ed22519BasicAuthUIPluginForm as FormData } from '@owlmeans/client-panel/auth/plugins'
 import type { AuthenticationControl, AuthenticationRenderer } from '@owlmeans/client-auth/manager'
 import type { AppContext } from '../types.js'
-import type { ClientModule } from '@owlmeans/client-module'
+import type { ClientEntrypoint } from '@owlmeans/client-entrypoint'
 import type { AuthRequest } from '@owlmeans/auth-common'
 
 import { Ed22519BasicAuthUIPluginFormSchema as Schema } from '@owlmeans/client-panel/auth/plugins'
@@ -9,7 +9,7 @@ import { AuthenticationStage, DISPATCHER } from '@owlmeans/auth'
 import { Form } from '../../components/form/index.js'
 import { TextInput } from '../../components/form/text/index.js'
 import { useCallback } from 'react'
-import LinearProgress from '@mui/material/LinearProgress'
+import { Progress } from '@/components/ui/progress'
 import { BlockScaling } from '@owlmeans/client-panel'
 import { useContext } from '@owlmeans/web-client'
 
@@ -24,7 +24,7 @@ export const Ed22519BasicAuthUIPlugin: AuthenticationRenderer = ({ type, stage,
           name => <TextInput key={name} name={name} label />
         )
       default:
-        return <LinearProgress />
+        return <Progress />
     }
   }, [stage])
 
@@ -46,7 +46,7 @@ const createSubmit = (context: AppContext, control: AuthenticationControl) => as
     return
   }
 
-  const [url] = await context.module<ClientModule<string, AuthRequest>>(DISPATCHER)
+  const [url] = await context.module<ClientEntrypoint<string, AuthRequest>>(DISPATCHER)
     .call({ query: token })
 
   control.setStage?.(control.stage = AuthenticationStage.Authenticated)

package/src/auth/plugins/re-captcha.tsx

@@ -1,6 +1,5 @@
 import type { AuthenticationControl, AuthenticationRenderer } from '@owlmeans/client-auth/manager'
 
-import LinearProgress from '@mui/material/LinearProgress'
 import { AuthenticationStage, AuthorizationError, CMOD_RECAPTCHA, DISPATCHER, GUEST_ID } from '@owlmeans/auth'
 import { useValue } from '@owlmeans/client'
 import { PLUGINS } from '@owlmeans/client-context'
@@ -8,9 +7,7 @@ import ReCAPTCHA from 'react-google-recaptcha'
 import { useCallback, useState } from 'react'
 import { PanelContext } from '@owlmeans/client-panel'
 import { Text } from '../../components/text.js'
-import Stack from '@mui/material/Stack'
-import Box from '@mui/material/Box'
-import type { SxProps } from '@mui/material/styles'
+import { Progress } from '@/components/ui/progress'
 import type { AppContext, Module } from '@owlmeans/web-client'
 import { useContext } from '@owlmeans/web-client'
 import type { AuthRequest } from '@owlmeans/auth-common'
@@ -21,33 +18,28 @@ export const ReCaptchaAuthUIPlugin: AuthenticationRenderer = ({ stage, control }
   const config = useValue(() => context.getConfigResource(PLUGINS).get(CMOD_RECAPTCHA), [])
   const finish = useCallback(createFinish(context, control), [])
 
-  const style: SxProps = {
-    maxWidth: { xs: '100%', sm: '100%', md: '50%' }
-  }
-  const loadingStyle: SxProps = {
-    width: { xs: '100%', sm: '100%', md: '50%' }
-  }
-
   const content = () => {
     switch (config?.value != null ? stage : null) {
       case AuthenticationStage.Authenticate:
-        return <Stack direction="column" sx={style} justifyContent="center" alignItems="center">
-          <Text name="guideline" center />
-          <Box sx={{ pt: 2 }}>
-            <ReCAPTCHA sitekey={config?.value as string ?? ''} onChange={finish}
-              asyncScriptOnLoad={() => setLoading(false)} />
-          </Box>
-        </Stack>
+        return (
+          <div className="flex flex-col items-center justify-center max-w-full md:max-w-[50%]">
+            <Text name="guideline" center />
+            <div className="pt-4">
+              <ReCAPTCHA sitekey={config?.value as string ?? ''} onChange={finish}
+                asyncScriptOnLoad={() => setLoading(false)} />
+            </div>
+          </div>
+        )
       default:
-        return <LinearProgress sx={loadingStyle} />
+        return <Progress className="w-full md:w-1/2" />
     }
   }
 
   return <PanelContext ns="lib" prefix="re-captcha" resource="client-panel-auth">
-    <Stack direction="column" justifyContent="center" alignItems="center">
+    <div className="flex flex-col items-center justify-center">
       {content()}
-      {loading && <LinearProgress sx={loadingStyle} />}
-    </Stack>
+      {loading && <Progress className="w-full md:w-1/2" />}
+    </div>
   </PanelContext>
 }
 

package/src/auth/plugins/tunnel-consumer.tsx

@@ -1,21 +1,38 @@
-import LinearProgress from '@mui/material/LinearProgress'
 import { AuthenticationStage } from '@owlmeans/auth'
 import type { RelyToken } from '@owlmeans/auth'
 import type { TunnelAuthenticationRenderer } from '@owlmeans/client-auth/manager/plugins'
 import { PinSchema } from '@owlmeans/client-auth/manager/plugins'
 import { Form } from '../../components/form/component.js'
 import { TextInput } from '../../components/form/text/component.js'
-// import { Text } from '../../components/text.js'
-import { useMemo } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { EnvelopeKind, makeEnvelopeModel } from '@owlmeans/basic-envelope'
 import { Block } from '../../components/block.js'
 import { BlockScaling } from '@owlmeans/client-panel'
 import { Status } from '../../components/status.js'
-import type { SxProps } from '@mui/material/styles'
-import { useTheme } from '@mui/material/styles'
 import { Button } from '../../components/form/button/component.js'
 import { QRCodeCanvas } from 'qrcode.react'
-import Box from '@mui/material/Box'
+import { Progress } from '@/components/ui/progress'
+
+/**
+ * Read a CSS variable from `:root` (consumer-owned theme). Falls back to
+ * a sane default if the variable is undefined.
+ */
+const readCssVar = (name: string, fallback: string): string => {
+  if (typeof window === 'undefined') return fallback
+  const value = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
+  return value !== '' ? value : fallback
+}
+
+const useThemeColors = () => {
+  const [colors, setColors] = useState({ fg: '#000000', bg: '#ffffff' })
+  useEffect(() => {
+    setColors({
+      fg: readCssVar('--color-primary', '#000000'),
+      bg: readCssVar('--color-card', '#ffffff'),
+    })
+  }, [])
+  return colors
+}
 
 export const TunnelConsumerUIPlugin: TunnelAuthenticationRenderer = ({ type, stage, control, params, submit }) => {
   const rely = useMemo(() => {
@@ -28,38 +45,29 @@ export const TunnelConsumerUIPlugin: TunnelAuthenticationRenderer = ({ type, sta
     ).message()
   }, [stage])
 
-  const theme = useTheme()
-  const prefix = "prefix" in params ? params.prefix as string : ""
-  const i18n = { ns: "lib", resource: 'client-panel-auth' }
-
-  const loadingStyle: SxProps = {
-    width: { xs: '100%', sm: '100%', md: '50%' }
-  }
+  const { fg, bg } = useThemeColors()
+  const prefix = 'prefix' in params ? params.prefix as string : ''
+  const i18n = { ns: 'lib', resource: 'client-panel-auth' }
 
   switch (stage) {
     case AuthenticationStage.Authenticate:
       return <Form decorate name={type} validation={PinSchema} onSubmit={submit} i18n={i18n}>
-        <Box width="fit-content" margin="auto">
+        <div className="w-fit mx-auto">
           {rely?.token != null && <QRCodeCanvas size={256}
-            value={`${prefix}${rely?.token ?? ""}`}
-            fgColor={theme.palette.primary.dark}
-            bgColor={theme.palette.background.paper}
+            value={`${prefix}${rely?.token ?? ''}`}
+            fgColor={fg}
+            bgColor={bg}
           />}
-        </Box>
-        {/* <Text>{rely?.token}</Text> */}
+        </div>
         <TextInput name="pin" label hint />
       </Form>
     case AuthenticationStage.Error:
       return <Block horizontal={BlockScaling.Half} i18n={i18n} Actions={() =>
-        // @TODO document reload looks a bit dirty - cause we can loose the flow
         <Button label="reset" onClick={async () => { document.location.reload() }} />
-        // <Button label="reset" onClick={async () => { 
-        //   await control.updateStage(AuthenticationStage.Authenticate)
-        //  }} />
       }>
         <Status error={control.error} ok={false} />
       </Block>
   }
 
-  return <LinearProgress sx={loadingStyle} />
+  return <Progress className="w-full md:w-1/2" />
 }

package/src/components/block.tsx

@@ -1,27 +1,23 @@
 import { useMemo } from 'react'
 import type { FC } from 'react'
 import type { BlockProps } from './types.js'
-import Card from '@mui/material/Card'
-import CardContent from '@mui/material/CardContent'
 import { PanelContext, usePanelHelper } from '@owlmeans/client-panel'
-import type { SxProps } from '@mui/material/styles'
-import { useTheme } from '@mui/material/styles'
-import CardActions from '@mui/material/CardActions'
+import { Card, CardContent, CardFooter } from '@/components/ui/card'
+import { cn } from '@/lib/utils'
 import { scalingToStyles } from './helper.js'
 
-export const Block: FC<BlockProps> = ({ children, horizontal, vertical, Actions, i18n, styles }) => {
-  const theme = useTheme()
-
-  const style: SxProps = useMemo(() => scalingToStyles(horizontal, vertical, theme), [horizontal])
-
+export const Block: FC<BlockProps> = ({ children, horizontal, vertical, Actions, i18n, className, style }) => {
+  const scaling = useMemo(() => scalingToStyles(horizontal, vertical), [horizontal, vertical])
   const panelProps = { ...usePanelHelper(), ...i18n }
 
   return <PanelContext {...panelProps}>
-    <Card sx={{ ...style, ...styles } as SxProps}>
+    <Card className={cn(scaling, className)} style={style}>
       <CardContent>{children}</CardContent>
-      {Actions != null && <CardActions sx={{ flexDirection: "row", justifyContent: "flex-end", pr: 2, pb: 2 }}>
-        <Actions />
-      </CardActions>}
+      {Actions != null && (
+        <CardFooter className="flex flex-row justify-end gap-2 pr-4 pb-2">
+          <Actions />
+        </CardFooter>
+      )}
     </Card>
   </PanelContext>
 }

package/src/components/button/selector.tsx

@@ -1,16 +1,16 @@
-
-import ButtonGroup from '@mui/material/ButtonGroup'
 import type { FC } from 'react'
 import type { SelectorProps } from './types.js'
 import { Button } from '../form/button/component.js'
 
 export const ButtonSelector: FC<SelectorProps> = ({ name, options, current, onSelect }) => {
   const prefix = name != null ? `${name}.` : ''
-  return <ButtonGroup>
-    {options.map(
-      option => <Button key={option} label={`${prefix}${option}`}
-        onClick={() => onSelect?.(option)}
-        variant={current === option ? 'contained' : 'outlined'} />
-    )}
-  </ButtonGroup>
+  return (
+    <div className="inline-flex rounded-md shadow-xs [&>button:not(:first-child)]:rounded-l-none [&>button:not(:last-child)]:rounded-r-none [&>button:not(:last-child)]:border-r-0">
+      {options.map(option =>
+        <Button key={option} label={`${prefix}${option}`}
+          onClick={() => onSelect?.(option)}
+          variant={current === option ? 'contained' : 'outlined'} />
+      )}
+    </div>
+  )
 }

package/src/components/form/button/component.tsx

@@ -1,15 +1,48 @@
 import { useMemo } from 'react'
 import type { FC } from 'react'
 import { memo } from 'react'
-import type { ButtonProps, SubmitProps } from './types'
-
-import MUIButton from '@mui/material/Button'
-import CircularProgress from '@mui/material/CircularProgress'
-
+import type { ButtonProps, SubmitProps } from './types.js'
 import { useFormContext } from 'react-hook-form'
+import { Loader2 } from 'lucide-react'
 import { I18nProps, useCommonI18n, useI18nApp, useI18nLib } from '@owlmeans/client-i18n'
 import { useContext } from '@owlmeans/client'
 import { useFormI18n, usePanelHelper } from '@owlmeans/client-panel'
+import { Button as UIButton } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+
+/**
+ * MUI → shadcn variant mapping:
+ *   contained → default
+ *   outlined  → outline
+ *   text      → ghost
+ * Any other value is forwarded as-is (shadcn variants: default, destructive,
+ * outline, secondary, ghost, link).
+ */
+const mapVariant = (v: string | undefined): 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link' => {
+  switch (v) {
+    case undefined:
+    case 'contained': return 'default'
+    case 'outlined':  return 'outline'
+    case 'text':      return 'ghost'
+    case 'destructive':
+    case 'outline':
+    case 'secondary':
+    case 'ghost':
+    case 'link':
+    case 'default':
+      return v
+    default:          return 'default'
+  }
+}
+
+const mapSize = (s: ButtonProps['size']): 'sm' | 'default' | 'lg' => {
+  switch (s) {
+    case 'small':  return 'sm'
+    case 'large':  return 'lg'
+    case 'medium':
+    default:       return 'default'
+  }
+}
 
 export const Button: FC<ButtonProps> = memo(({ label, onClick, i18n, loader, size, fullWidth, variant = 'contained' }) => {
   const context = useContext()
@@ -25,15 +58,22 @@ export const Button: FC<ButtonProps> = memo(({ label, onClick, i18n, loader, siz
     defaultValue: appT(label, { defaultValue: libT(label) })
   }), [i18n?.suppress, label])
 
-  size = size ?? 'medium'
-  const progressSize = size === 'large'
-    ? 20
-    : size === 'medium' ? 16 : 14
+  const disabled = loader != null && loader.opened === true
+  const showLoader = disabled
 
-  return <MUIButton variant={variant as any} size={size} fullWidth={fullWidth}
-    startIcon={loader != null && loader.opened === true ? <CircularProgress size={progressSize} /> : undefined}
-    disabled={loader != null && loader.opened === true}
-    onClick={onClick}>{label}</MUIButton>
+  return (
+    <UIButton
+      type="button"
+      variant={mapVariant(variant)}
+      size={mapSize(size)}
+      disabled={disabled}
+      onClick={onClick}
+      className={cn(fullWidth && 'w-full')}
+    >
+      {showLoader && <Loader2 className="animate-spin" aria-hidden />}
+      {label}
+    </UIButton>
+  )
 })
 
 export const SubmitButton: FC<SubmitProps> = memo((props) => {
@@ -42,7 +82,7 @@ export const SubmitButton: FC<SubmitProps> = memo((props) => {
   const t = useFormI18n()
 
   label = label ?? 'submit'
-  const _i18n: I18nProps["i18n"] = { ...i18n }
+  const _i18n: I18nProps['i18n'] = { ...i18n }
   _i18n.suppress = true
 
   return <Button {...props} label={t(label)} i18n={_i18n}