diff --git a/src/Button.tsx b/src/Button.tsx
index 578aeabc..e44c457b 100644
--- a/src/Button.tsx
+++ b/src/Button.tsx
@@ -12,7 +12,6 @@ export interface ButtonProps {
   loading?: boolean
   onClick?: (e?: React.MouseEvent<HTMLButtonElement>) => void
   className?: {
-    override?: string
     root?: string
     active?: string
   }
@@ -54,7 +53,6 @@ export function Button({
   ...props
 }: ButtonProps) {
   const computedClassName = twMerge(
-    className?.override,
     !basic && 'border rounded px-[0.75em] py-[0.25em] shadow bg-white',
     'inline-flex flex-row items-center font-sans gap-2 cursor-pointer',
     fluid && 'w-full justify-center',
diff --git a/src/Checkbox.tsx b/src/Checkbox.tsx
index ac1ab48a..47dbd741 100644
--- a/src/Checkbox.tsx
+++ b/src/Checkbox.tsx
@@ -18,7 +18,6 @@ export interface CheckboxProps {
   label?: string | React.ReactNode
   size?: 'sm' | 'md' | 'lg' | 'xl'
   className?: {
-    override?: string
     root?: string
     label?: string
   }
@@ -80,7 +79,6 @@ export function Checkbox({
         defaultChecked
         checked={checked || partial}
         className={twMerge(
-          className?.override,
           'border-grey-80 align-center my-auto flex justify-center rounded-md border border-solid bg-white p-0',
           (checked || partial) && 'border-black',
           disabled && 'cursor-not-allowed',
diff --git a/src/Collapsible.tsx b/src/Collapsible.tsx
index f8d57c59..57348cbd 100644
--- a/src/Collapsible.tsx
+++ b/src/Collapsible.tsx
@@ -21,7 +21,6 @@ export interface CollapsibleProps {
   secondary?: string | React.ReactNode
   onSecondaryClick?: () => void
   className?: {
-    override?: string
     root?: string
     staticContent?: string
     closedContent?: string
@@ -71,11 +70,7 @@ export function Collapsible({
   children,
 }: CollapsibleProps) {
   return (
-    <RadixCollapsible.Root
-      open={open}
-      onOpenChange={onChange}
-      className={className?.override}
-    >
+    <RadixCollapsible.Root open={open} onOpenChange={onChange}>
       <div
         className={twMerge(
           'w-full rounded-md border-2 border-solid border-uzh-grey-80 p-2 pb-0',
diff --git a/src/DateChanger.tsx b/src/DateChanger.tsx
index 7ed4dff5..e5f13be0 100644
--- a/src/DateChanger.tsx
+++ b/src/DateChanger.tsx
@@ -7,7 +7,6 @@ import Button from './Button'
 import Label from './forms/Label'
 
 export interface DateChangerClassName {
-  override?: string
   root?: string
   label?: string
   field?: string
@@ -117,7 +116,6 @@ export function DateChanger({
             id={id}
             type="date"
             className={twMerge(
-              className?.override,
               'w-max border-none px-0 py-1 pl-2',
               className?.input
             )}
diff --git a/src/Dropdown.tsx b/src/Dropdown.tsx
index 4aede9ed..1e92a56a 100644
--- a/src/Dropdown.tsx
+++ b/src/Dropdown.tsx
@@ -190,7 +190,6 @@ const DropdownItem = ({
   shorting?: string
   selected?: boolean
   className?: {
-    override?: string
     root?: string
     active?: string
   }
@@ -202,7 +201,6 @@ const DropdownItem = ({
         data-cy={data?.cy}
         data-test={data?.test}
         className={twMerge(
-          className?.override,
           `flex flex-row rounded px-2 py-0.5 hover:cursor-pointer hover:bg-primary-20 hover:text-primary`,
           active && twMerge('font-bold', className?.active),
           className?.root
diff --git a/src/Header.tsx b/src/Header.tsx
index 47a7bfdd..aec1f652 100644
--- a/src/Header.tsx
+++ b/src/Header.tsx
@@ -8,7 +8,6 @@ interface HeaderProps {
     test?: string
   }
   className?: {
-    override?: string
     root?: string
   }
   children: React.ReactNode
@@ -30,7 +29,6 @@ export function H1({ id, data, className, children }: HeaderProps) {
       data-cy={data?.cy}
       data-test={data?.test}
       className={twMerge(
-        className?.override,
         'mb-[0.2em] font-sans text-2xl font-bold',
         className?.root
       )}
@@ -56,7 +54,6 @@ export function H2({ id, data, className, children }: HeaderProps) {
       data-cy={data?.cy}
       data-test={data?.test}
       className={twMerge(
-        className?.override,
         'mb-[0.2em] font-sans text-xl font-bold',
         className?.root
       )}
@@ -82,7 +79,6 @@ export function H3({ id, data, className, children }: HeaderProps) {
       data-cy={data?.cy}
       data-test={data?.test}
       className={twMerge(
-        className?.override,
         'mb-[0.2em] font-sans text-lg font-bold',
         className?.root
       )}
@@ -108,7 +104,6 @@ export function H4({ id, data, className, children }: HeaderProps) {
       data-cy={data?.cy}
       data-test={data?.test}
       className={twMerge(
-        className?.override,
         'text-md mb-[0.2em] font-sans font-bold',
         className?.root
       )}
diff --git a/src/Modal.tsx b/src/Modal.tsx
index f405bc1e..811f0b8d 100644
--- a/src/Modal.tsx
+++ b/src/Modal.tsx
@@ -36,8 +36,6 @@ export interface ModalProps {
     test?: string
   }
   className?: {
-    overlayOverride?: string
-    contentOverride?: string
     overlay?: string
     content?: string
     title?: string
@@ -131,7 +129,6 @@ export function Modal({
   const overlayContent = (
     <RadixDialog.Overlay
       className={twMerge(
-        className?.overlayOverride,
         'fixed bottom-0 left-0 right-0 top-0 z-20 flex justify-center gap-4 bg-uzh-grey-100 bg-opacity-50 p-4 md:items-center',
         className?.overlay
       )}
@@ -151,7 +148,6 @@ export function Modal({
 
       <RadixDialog.Content
         className={twMerge(
-          className?.contentOverride,
           'z-30 flex flex-col gap-4 overflow-y-auto rounded-lg bg-white p-4 shadow',
           fullScreen
             ? 'h-full w-full'
diff --git a/src/Navigation.tsx b/src/Navigation.tsx
index ecf9800d..ff2d9142 100644
--- a/src/Navigation.tsx
+++ b/src/Navigation.tsx
@@ -10,7 +10,6 @@ export interface NavigationProps {
   }
   children: React.ReactNode
   className?: {
-    override?: string
     root?: string
     indicator?: string
     viewport?: string
@@ -42,7 +41,6 @@ export function Navigation({
   return (
     <NavigationMenuPrimitive.Root
       className={twMerge(
-        className?.override,
         'relative w-max rounded-md bg-primary-20',
         className?.root
       )}
@@ -86,8 +84,6 @@ interface TriggerProps {
   children: React.ReactNode
   disabled?: boolean
   className?: {
-    override?: string
-    dropdownOverride?: string
     root?: string
     label?: string
     icon?: string
@@ -144,7 +140,6 @@ Navigation.TriggerItem = function TriggerItem({
         data-cy={data?.cy}
         data-test={data?.test}
         className={twMerge(
-          className?.override,
           'flex flex-row items-center rounded-md px-3 py-2 text-sm font-medium text-black hover:text-white focus:outline-none focus-visible:ring',
           icon && !label && 'h-9 w-9 justify-center',
           !disabled && 'hover:bg-primary-60',
@@ -177,7 +172,6 @@ Navigation.TriggerItem = function TriggerItem({
 
       <NavigationMenuPrimitive.Content
         className={twMerge(
-          className?.dropdownOverride,
           'flex flex-col gap-2 rounded-lg p-2',
           dropdownWidth,
           className?.dropdown
@@ -200,7 +194,6 @@ interface DropdownItemProps {
   subtitle?: string
   icon?: React.ReactNode
   className?: {
-    override?: string
     root?: string
     title?: string
     icon?: string
@@ -258,7 +251,6 @@ Navigation.DropdownItem = function DropdownItem({
       href={href}
       onClick={onClick}
       className={twMerge(
-        className?.override,
         'w-full rounded-md px-4 py-3 text-black hover:bg-primary-60',
         'hover:text-white focus:outline-none focus-visible:ring focus-visible:ring-opacity-75',
         className?.root
@@ -308,7 +300,6 @@ interface ButtonItemProps {
   disabled?: boolean
   icon?: React.ReactNode
   className?: {
-    override?: string
     root?: string
     label?: string
     icon?: string
@@ -366,7 +357,6 @@ Navigation.ButtonItem = function ButtonItem({
         href={!disabled ? href : undefined}
         onClick={!disabled ? onClick : undefined}
         className={twMerge(
-          className?.override,
           'cursor-pointer rounded-md px-3 py-2 text-sm font-medium text-black hover:text-white',
           !disabled && 'hover:bg-primary-60',
           disabled && 'hover:text-none cursor-not-allowed text-gray-400',
@@ -402,7 +392,6 @@ interface IconItemProps {
   icon: React.ReactNode
   disabled?: boolean
   className?: {
-    override?: string
     root?: string
     disabled?: string
   }
@@ -454,7 +443,6 @@ Navigation.IconItem = function IconItem({
         href={!disabled ? href : undefined}
         onClick={!disabled ? onClick : undefined}
         className={twMerge(
-          className?.override,
           'flex h-9 w-9 items-center justify-center rounded-md text-black hover:text-white',
           !disabled && 'hover:bg-primary-60',
           disabled && 'hover:text-none cursor-not-allowed text-gray-400',
diff --git a/src/Progress.tsx b/src/Progress.tsx
index 88afa32a..8601b187 100644
--- a/src/Progress.tsx
+++ b/src/Progress.tsx
@@ -15,7 +15,6 @@ export interface ProgressProps {
   formatter: (value: any) => any
   isMaxVisible?: boolean
   className?: {
-    override?: string
     root?: string
     indicator?: string
   }
@@ -61,11 +60,7 @@ export function Progress({
       id={id}
       data-cy={data?.cy}
       data-test={data?.test}
-      className={twMerge(
-        className?.override,
-        'relative h-7 rounded text-sm',
-        className?.root
-      )}
+      className={twMerge('relative h-7 rounded text-sm', className?.root)}
       value={internalValue}
       max={max}
       {...props}
diff --git a/src/Select.tsx b/src/Select.tsx
index 5ab63d31..8b55cc33 100644
--- a/src/Select.tsx
+++ b/src/Select.tsx
@@ -9,9 +9,6 @@ import React, { useState } from 'react'
 import { twMerge } from 'tailwind-merge'
 
 export interface SelectClassName {
-  triggerOverride?: string
-  contentOverride?: string
-  itemOverride?: string
   root?: string
   trigger?: string
   content?: string
@@ -115,7 +112,6 @@ export function Select({
     <RadixSelect.Content
       position={contentPosition}
       className={twMerge(
-        className?.contentOverride,
         'z-50 overflow-hidden rounded-md bg-white shadow-md',
         className?.content
       )}
@@ -185,7 +181,6 @@ export function Select({
           data-cy={data?.cy}
           data-test={data?.test}
           className={twMerge(
-            className?.triggerOverride,
             'rounded-md px-2 py-1',
             !basic &&
               'inline-flex h-7 items-center justify-between gap-2 border  bg-white p-4 shadow-sm hover:bg-primary-20 hover:text-primary',
@@ -259,7 +254,6 @@ const SelectItem = React.forwardRef(
         data-cy={data?.cy}
         data-test={data?.test}
         className={twMerge(
-          className?.itemOverride,
           'relative flex select-none items-center rounded-md px-8 py-2 font-medium text-gray-700',
           'hover:cursor-pointer hover:bg-primary-20 hover:text-primary hover:outline-none focus:border-primary-40',
           disabled &&
diff --git a/src/Slider.tsx b/src/Slider.tsx
index 08ba9e9f..56e0bff4 100644
--- a/src/Slider.tsx
+++ b/src/Slider.tsx
@@ -20,9 +20,6 @@ interface SliderProps {
   rangeColorMap?: Record<string, string>
   borderColorMap?: Record<string, string>
   className?: {
-    override?: string
-    rangeOverride?: string
-    thumbOverride?: string
     root?: string
     icons?: string
     labels?: string
@@ -91,7 +88,6 @@ export function Slider({
       data-cy={data?.cy}
       data-test={data?.test}
       className={twMerge(
-        className?.override,
         'relative flex h-24 w-full select-none items-center',
         className?.root
       )}
@@ -130,7 +126,6 @@ export function Slider({
       <RadixSlider.Track className="relative h-4 flex-1 rounded-xl bg-gray-200">
         <RadixSlider.Range
           className={twMerge(
-            className?.rangeOverride,
             'absolute h-full rounded-full',
             rangeColorMap && Object.keys(rangeColorMap).length === steps
               ? rangeColorMap[String(value)]
@@ -142,7 +137,6 @@ export function Slider({
 
       <RadixSlider.Thumb
         className={twMerge(
-          className?.thumbOverride,
           'flex h-12 w-12 flex-col items-center justify-center rounded-full border-[3px] border-solid bg-white shadow-lg focus:outline-none',
           disabled ? 'cursor-not-allowed' : 'cursor-move',
           disabled ||
diff --git a/src/StepProgress.tsx b/src/StepProgress.tsx
index cbde8e7f..3629392f 100644
--- a/src/StepProgress.tsx
+++ b/src/StepProgress.tsx
@@ -62,7 +62,6 @@ interface StepProgressBaseProps {
   displayOffsetLeft?: number
   displayOffsetRight?: number
   className?: {
-    override?: string
     root?: string
   }
   formatter?: ({ element, ix }: { element: StepItem; ix: number }) => {
@@ -126,7 +125,6 @@ export function StepProgress({
           <button
             data-cy={data?.cy ? `${data?.cy}-left` : undefined}
             className={twMerge(
-              className?.override,
               'rounded-l px-3 py-1 hover:bg-primary-20 hover:text-primary',
               !items && 'bg-primary-60 text-white'
             )}
@@ -147,7 +145,6 @@ export function StepProgress({
             key={ix}
             data-cy={data?.cy ? `${data?.cy}-${ix}` : undefined}
             className={twMerge(
-              className?.override,
               'flex flex-1 items-center justify-center border-r border-white p-1 last:border-r-0 hover:bg-primary-20 hover:text-primary',
               ix === 0 && 'rounded-l',
               ix === length - 1 && 'rounded-r',
@@ -173,7 +170,6 @@ export function StepProgress({
           <button
             data-cy={data?.cy ? `${data?.cy}-right` : undefined}
             className={twMerge(
-              className?.override,
               'rounded-r px-3 py-1 hover:bg-primary-20 hover:text-primary'
             )}
             onClick={() =>
diff --git a/src/Tabs.tsx b/src/Tabs.tsx
index f51f4e6e..20f810d4 100644
--- a/src/Tabs.tsx
+++ b/src/Tabs.tsx
@@ -14,7 +14,6 @@ interface TabProps {
   children?: React.ReactNode
   disabled?: boolean
   className?: {
-    override?: string
     root?: string
     label?: string
     disabled?: string
@@ -63,7 +62,6 @@ export function Tab({
       key={`tab-trigger-${key}`}
       value={value}
       className={twMerge(
-        className?.override,
         'group flex-1 border-b border-r border-gray-300 px-3 py-2.5 first:rounded-tl-lg last:rounded-tr-lg last:border-r-0',
         'rdx-state-active:border-b-slate-600 focus-visible:rdx-state-active:border-b-transparent rdx-state-inactive:bg-gray-50 hover:rdx-state-inactive:bg-gray-200',
         'focus:rdx-state-active:border-b-red focus:z-10 focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75',
@@ -90,7 +88,6 @@ interface TabListProps {
     test?: string
   }
   className?: {
-    override?: string
     root?: string
   }
 }
@@ -116,7 +113,6 @@ export function TabList({
       data-cy={data?.cy}
       data-test={data?.test}
       className={twMerge(
-        className?.override,
         'flex w-full flex-col rounded-t-lg bg-white md:flex-row',
         className?.root
       )}
@@ -135,7 +131,6 @@ interface TabContentProps {
   key: string
   value: string
   className?: {
-    override?: string
     root?: string
   }
 }
@@ -167,11 +162,7 @@ export function TabContent({
       data-test={data?.test}
       key={`tab-content-${key}`}
       value={value}
-      className={twMerge(
-        className?.override,
-        'rounded-t-lg bg-white py-4 md:px-6',
-        className?.root
-      )}
+      className={twMerge('rounded-t-lg bg-white py-4 md:px-6', className?.root)}
     >
       {children}
     </TabsPrimitive.Content>
diff --git a/src/Toast.tsx b/src/Toast.tsx
index 4ec682a0..529da507 100644
--- a/src/Toast.tsx
+++ b/src/Toast.tsx
@@ -25,8 +25,6 @@ interface ToastProps {
   type?: 'default' | 'success' | 'warning' | 'error'
   children?: React.ReactNode
   className?: {
-    override?: string
-    viewportOverride?: string
     root?: string
     viewport?: string
     trigger?: string
@@ -126,7 +124,6 @@ export function Toast({
 
       <RadixToast.Root
         className={twMerge(
-          className?.override,
           'border-md grid items-center gap-x-4 rounded-md bg-white p-3 shadow-md',
           type === 'success' && 'border-2 border-solid border-green-500',
           type === 'warning' && 'border-2 border-solid border-orange-500',
@@ -210,7 +207,6 @@ export function Toast({
       </RadixToast.Root>
       <RadixToast.Viewport
         className={twMerge(
-          className?.viewportOverride,
           'fixed right-0 top-0 z-[1000] m-0 flex min-w-[20rem] max-w-3xl list-none flex-col gap-2 p-3 outline-none',
           positionDict[position || 'topRight'],
           className?.viewport
diff --git a/src/Tooltip.tsx b/src/Tooltip.tsx
index c1e6bac0..6f04147d 100644
--- a/src/Tooltip.tsx
+++ b/src/Tooltip.tsx
@@ -19,7 +19,6 @@ export interface TooltipProps {
   withIndicator?: boolean
   children: React.ReactNode
   className?: {
-    override?: string
     tooltip?: string
     trigger?: string
     arrow?: string
@@ -69,7 +68,6 @@ export function Tooltip({
           data-cy={dataContent?.cy}
           data-test={dataContent?.test}
           className={twMerge(
-            className?.override,
             'rounded-md bg-gray-800 p-2 text-white',
             className?.tooltip
           )}
diff --git a/src/forms/FormikDateField.tsx b/src/forms/FormikDateField.tsx
index 90b2eaac..a1f744e5 100644
--- a/src/forms/FormikDateField.tsx
+++ b/src/forms/FormikDateField.tsx
@@ -17,7 +17,6 @@ export interface DateFieldProps {
   hideError?: boolean
   disabled?: boolean
   className?: {
-    override?: string
     root?: string
     field?: string
     label?: string
@@ -106,7 +105,6 @@ export function FormikDateField({
           placeholder={placeholder}
           disabled={disabled}
           className={twMerge(
-            className?.override,
             'focus:border-uzh-blue-50 h-9 w-full rounded border border-uzh-grey-60 bg-uzh-grey-20',
             disabled && 'cursor-not-allowed text-uzh-grey-100',
             meta.error && meta.touched && 'border-red-400 bg-red-50',
diff --git a/src/forms/FormikPinField.tsx b/src/forms/FormikPinField.tsx
index fb8cffd6..23d5c33a 100644
--- a/src/forms/FormikPinField.tsx
+++ b/src/forms/FormikPinField.tsx
@@ -11,7 +11,6 @@ export interface PinFieldProps {
   labelType?: 'small' | 'normal'
   tooltip?: string | React.ReactNode
   className?: {
-    override?: string
     root?: string
     field?: string
     label?: string
@@ -64,7 +63,6 @@ export function PinField({
         data-test={data?.test}
         placeholder="### ### ###"
         className={twMerge(
-          className?.override,
           'mb-2 w-full rounded border border-uzh-grey-60 bg-uzh-grey-20 bg-opacity-50 focus:border-primary-40',
           meta.error && meta.touched && 'mb-0 border-red-400 bg-red-50',
           className?.field
diff --git a/src/forms/FormikTextField.tsx b/src/forms/FormikTextField.tsx
index 01e42f15..cb62bb2b 100644
--- a/src/forms/FormikTextField.tsx
+++ b/src/forms/FormikTextField.tsx
@@ -21,7 +21,6 @@ interface TextFieldProps {
   hideError?: boolean
   disabled?: boolean
   className?: {
-    override?: string
     root?: string
     field?: string
     icon?: string
@@ -131,7 +130,6 @@ export function FormikTextField({
               placeholder={placeholder}
               disabled={disabled}
               className={twMerge(
-                className?.override,
                 'focus:border-uzh-blue-50 h-9 w-full rounded border border-uzh-grey-60 bg-uzh-grey-20',
                 disabled && 'cursor-not-allowed',
                 meta.error && meta.touched && 'border-red-400 bg-red-50',
@@ -164,7 +162,6 @@ export function FormikTextField({
               placeholder={placeholder}
               disabled={disabled}
               className={twMerge(
-                className?.override,
                 'focus:border-uzh-blue-50 h-9 w-full rounded border border-uzh-grey-60 bg-uzh-grey-20',
                 disabled && 'cursor-not-allowed',
                 meta.error && meta.touched && 'border-red-400 bg-red-50',
diff --git a/src/forms/FormikTextareaField.tsx b/src/forms/FormikTextareaField.tsx
index 878bd8d0..10f1e15a 100644
--- a/src/forms/FormikTextareaField.tsx
+++ b/src/forms/FormikTextareaField.tsx
@@ -19,7 +19,6 @@ export interface TextareaFieldProps {
   hideError?: boolean
   disabled?: boolean
   className?: {
-    override?: string
     root?: string
     field?: string
     label?: string
@@ -123,7 +122,6 @@ export function FormikTextareaField({
             maxLength={maxLength}
             disabled={disabled}
             className={twMerge(
-              className?.override,
               'focus:border-uzh-blue-50 min-h-12 w-full rounded border border-uzh-grey-60 bg-uzh-grey-20',
               disabled && 'cursor-not-allowed',
               meta.error && meta.touched && 'border-red-400 bg-red-50',
@@ -144,7 +142,6 @@ export function FormikTextareaField({
             maxLength={maxLength}
             disabled={disabled}
             className={twMerge(
-              className?.override,
               'focus:border-uzh-blue-50 min-h-12 w-full rounded border border-uzh-grey-60 bg-uzh-grey-20',
               disabled && 'cursor-not-allowed',
               meta.error && meta.touched && 'border-red-400 bg-red-50',
diff --git a/src/forms/Label.tsx b/src/forms/Label.tsx
index 6f5e0227..1ca4320f 100644
--- a/src/forms/Label.tsx
+++ b/src/forms/Label.tsx
@@ -18,7 +18,6 @@ export interface LabelProps {
   showTooltipSymbol?: boolean
   tooltipSymbolSize?: 'sm' | 'md' | 'lg' | 'xl'
   className?: {
-    override?: string
     root?: string
     tooltip?: string
     tooltipSymbol?: string
@@ -67,11 +66,7 @@ export function Label({
             data-cy={data?.cy}
             data-test={data?.test}
             htmlFor={forId}
-            className={twMerge(
-              className?.override,
-              'cursor-default',
-              className?.root
-            )}
+            className={twMerge('cursor-default', className?.root)}
           >
             {label}
           </RadixLabel.Root>
@@ -89,11 +84,7 @@ export function Label({
           data-cy={data?.cy}
           data-test={data?.test}
           htmlFor={forId}
-          className={twMerge(
-            className?.override,
-            'mr-2 cursor-default',
-            required && 'mr-0'
-          )}
+          className={twMerge('mr-2 cursor-default', required && 'mr-0')}
         >
           {label}
         </RadixLabel.Root>
@@ -128,7 +119,6 @@ export function Label({
         data-test={data?.test}
         htmlFor={forId}
         className={twMerge(
-          className?.override,
           'flex cursor-default flex-row items-center',
           className?.root
         )}
diff --git a/src/forms/NumberField.tsx b/src/forms/NumberField.tsx
index bfcfce5f..bd3998ea 100644
--- a/src/forms/NumberField.tsx
+++ b/src/forms/NumberField.tsx
@@ -3,7 +3,6 @@ import { twMerge } from 'tailwind-merge'
 import Label from './Label'
 
 export interface NumberFieldClassName {
-  override?: string
   root?: string
   input?: string
   label?: string
@@ -114,7 +113,6 @@ export function NumberField({
         placeholder={placeholder}
         disabled={disabled}
         className={twMerge(
-          className?.override,
           'focus:border-uzh-blue-50 h-9 w-full rounded border border-uzh-grey-60 bg-uzh-grey-20',
           disabled && 'cursor-not-allowed',
           className?.input