@helpwave/hightide 0.1.1 → 0.1.3

package/dist/components/layout-and-navigation/StepperBar.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/layout-and-navigation/StepperBar.tsx","../../../src/localization/LanguageProvider.tsx","../../../src/hooks/useLocalStorage.ts","../../../src/localization/util.ts","../../../src/localization/useTranslation.ts","../../../src/util/array.ts","../../../src/components/user-action/Button.tsx"],"sourcesContent":["import { Check, ChevronLeft, ChevronRight } from 'lucide-react'\nimport type { Language } from '../../localization/util'\nimport type { PropsForTranslation } from '../../localization/useTranslation'\nimport { useTranslation } from '../../localization/useTranslation'\nimport { range } from '../../util/array'\nimport { SolidButton } from '../user-action/Button'\nimport clsx from 'clsx'\n\ntype StepperBarTranslation = {\n  back: string,\n  next: string,\n  confirm: string,\n}\n\nconst defaultStepperBarTranslation: Record<Language, StepperBarTranslation> = {\n  en: {\n    back: 'Back',\n    next: 'Next Step',\n    confirm: 'Create'\n  },\n  de: {\n    back: 'Zurück',\n    next: 'Nächster Schritt',\n    confirm: 'Erstellen'\n  }\n}\n\nexport type StepperInformation = {\n  step: number,\n  lastStep: number,\n  seenSteps: Set<number>,\n}\n\nexport type StepperBarProps = {\n  stepper: StepperInformation,\n  onChange: (step: StepperInformation) => void,\n  onFinish: () => void,\n  showDots?: boolean,\n  className?: string,\n}\n\n/**\n * A Component for stepping\n */\nexport const StepperBar = ({\n                             overwriteTranslation,\n                             stepper,\n                             onChange,\n                             onFinish,\n                             showDots = true,\n                             className = '',\n                           }: PropsForTranslation<StepperBarTranslation, StepperBarProps>) => {\n  const translation = useTranslation(defaultStepperBarTranslation, overwriteTranslation)\n  const dots = range(0, stepper.lastStep)\n  const { step, seenSteps, lastStep } = stepper\n\n  const update = (newStep: number) => {\n    seenSteps.add(newStep)\n    onChange({ step: newStep, seenSteps, lastStep })\n  }\n\n  return (\n    <div\n      className={clsx('sticky row p-2 border-2 justify-between rounded-lg shadow-lg', className)}\n    >\n      <div className=\"flex-[2] justify-start\">\n        <SolidButton\n          disabled={step === 0}\n          onClick={() => {\n            update(step - 1)\n          }}\n          className=\"row gap-x-1 items-center justify-center\"\n        >\n          <ChevronLeft size={14}/>\n          {translation.back}\n        </SolidButton>\n      </div>\n      <div className=\"row flex-[5] gap-x-2 justify-center items-center\">\n        {showDots && dots.map((value, index) => {\n          const seen = seenSteps.has(index)\n          return (\n            <div\n              key={index}\n              onClick={() => seen && update(index)}\n              className={clsx('rounded-full w-4 h-4', {\n                  'bg-primary hover:brightness-75': index === step && seen,\n                  'bg-primary/40 hover:bg-primary': index !== step && seen,\n                  'bg-gray-200 outline-transparent': !seen,\n                },\n                {\n                  'cursor-pointer': seen,\n                  'cursor-not-allowed': !seen,\n                })}\n            />\n          )\n        })}\n      </div>\n      {step !== lastStep && (\n        <div className=\"flex-[2] justify-end\">\n          <SolidButton\n            onClick={() => update(step + 1)}\n            className=\"row gap-x-1 items-center justify-center\"\n          >\n            {translation.next}\n            <ChevronRight size={14}/>\n          </SolidButton>\n        </div>\n      )}\n      {step === lastStep && (\n        <div className=\"flex-[2] justify-end\">\n          <SolidButton\n            // TODO check form validity\n            disabled={false}\n            onClick={onFinish}\n            className=\"row gap-x-1 items-center justify-center\"\n          >\n            <Check size={14}/>\n            {translation.confirm}\n          </SolidButton>\n        </div>\n      )}\n    </div>\n  )\n}\n","import type { Dispatch, PropsWithChildren, SetStateAction } from 'react'\nimport { createContext, useContext, useEffect, useState } from 'react'\nimport { useLocalStorage } from '@/hooks/useLocalStorage'\nimport type { Language } from './util'\nimport { LanguageUtil } from './util'\n\nexport type LanguageContextValue = {\n  language: Language,\n  setLanguage: Dispatch<SetStateAction<Language>>,\n}\n\nexport const LanguageContext = createContext<LanguageContextValue>({\n  language: LanguageUtil.DEFAULT_LANGUAGE,\n  setLanguage: (v) => v\n})\n\nexport const useLanguage = () => useContext(LanguageContext)\n\nexport const useLocale = (overWriteLanguage?: Language) => {\n  const { language } = useLanguage()\n  const mapping: Record<Language, string> = {\n    en: 'en-US',\n    de: 'de-DE'\n  }\n  return mapping[overWriteLanguage ?? language]\n}\n\ntype LanguageProviderProps = {\n  initialLanguage?: Language,\n}\n\nexport const LanguageProvider = ({ initialLanguage, children }: PropsWithChildren<LanguageProviderProps>) => {\n  const [language, setLanguage] = useState<Language>(initialLanguage ?? LanguageUtil.DEFAULT_LANGUAGE)\n  const [storedLanguage, setStoredLanguage] = useLocalStorage<Language>('language', initialLanguage ?? LanguageUtil.DEFAULT_LANGUAGE)\n\n  useEffect(() => {\n    if (language !== initialLanguage && initialLanguage) {\n      console.warn('LanguageProvider initial state changed: Prefer using languageProvider\\'s setLanguage instead')\n      setLanguage(initialLanguage)\n    }\n  }, [initialLanguage]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  useEffect(() => {\n    // TODO set locale of html tag here as well\n    setStoredLanguage(language)\n  }, [language, setStoredLanguage])\n\n  useEffect(() => {\n    if (storedLanguage !== null) {\n      setLanguage(storedLanguage)\n      return\n    }\n\n    const LanguageToTestAgainst = Object.values(LanguageUtil.languages)\n\n    const matchingBrowserLanguage = window.navigator.languages\n      .map(language => LanguageToTestAgainst.find((test) => language === test || language.split('-')[0] === test))\n      .filter(entry => entry !== undefined)\n\n    if (matchingBrowserLanguage.length === 0) return\n\n    const firstMatch = matchingBrowserLanguage[0] as Language\n    setLanguage(firstMatch)\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return (\n    <LanguageContext.Provider value={{\n      language,\n      setLanguage\n    }}>\n      {children}\n    </LanguageContext.Provider>\n  )\n}","import type { Dispatch, SetStateAction } from 'react'\nimport { useCallback, useEffect, useState } from 'react'\nimport { LocalStorageService } from '../util/storage'\n\ntype SetValue<T> = Dispatch<SetStateAction<T>>\nexport const useLocalStorage = <T>(key: string, initValue: T): [T, SetValue<T>] => {\n  const get = useCallback((): T => {\n    if (typeof window === 'undefined') {\n      return initValue\n    }\n    const storageService = new LocalStorageService()\n    const value = storageService.get<T>(key)\n    return value || initValue\n  }, [initValue, key])\n\n  const [storedValue, setStoredValue] = useState<T>(get)\n\n  const setValue: SetValue<T> = useCallback(value => {\n    const newValue = value instanceof Function ? value(storedValue) : value\n    const storageService = new LocalStorageService()\n    storageService.set(key, value)\n\n    setStoredValue(newValue)\n  }, [storedValue, setStoredValue, key])\n\n  useEffect(() => {\n    setStoredValue(get())\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return [storedValue, setValue]\n}","/**\n * The supported languages\n */\nconst languages = ['en', 'de'] as const\n\n/**\n * The supported languages\n */\nexport type Language = typeof languages[number]\n\n/**\n * The supported languages' names in their respective language\n */\nconst languagesLocalNames: Record<Language, string> = {\n  en: 'English',\n  de: 'Deutsch',\n}\n\n/**\n * The default language\n */\nconst DEFAULT_LANGUAGE: Language = 'en'\n\n/**\n * A constant definition for holding data regarding languages\n */\nexport const LanguageUtil = {\n  languages,\n  DEFAULT_LANGUAGE,\n  languagesLocalNames,\n}","import { useLanguage } from './LanguageProvider'\nimport type { Language } from './util'\n\nexport type Translation<T> = Record<Language, T>\n\ntype OverwriteTranslationType<Translation extends Record<string, unknown>> = {\n  language?: Language,\n  translation?: Partial<Record<Language, Partial<Translation>>>,\n}\n\n/**\n * Adds the `language` prop to the component props.\n *\n * @param Translation the type of the translation object\n *\n * @param Props the type of the component props, defaults to `Record<string, never>`,\n *              if you don't expect any other props other than `language` and get an\n *              error when using your component (because it uses `forwardRef` etc.)\n *              you can try out `Record<string, unknown>`, this might resolve your\n *              problem as `SomeType & never` is still `never` but `SomeType & unknown`\n *              is `SomeType` which means that adding back props (like `ref` etc.)\n *              works properly\n */\nexport type PropsForTranslation<\n  Translation extends Record<string, unknown>,\n  Props = Record<string, never>\n> = Props & {\n  overwriteTranslation?: OverwriteTranslationType<Translation>,\n};\n\nexport const useTranslation = <Translation extends Record<string, unknown>>(\n  defaults: Record<Language, Translation>,\n  translationOverwrite: OverwriteTranslationType<Translation> = {}\n): Translation => {\n  const { language: languageProp, translation: overwrite } = translationOverwrite\n  const { language: inferredLanguage } = useLanguage()\n  const usedLanguage = languageProp ?? inferredLanguage\n  let defaultValues: Translation = defaults[usedLanguage]\n  if (overwrite && overwrite[usedLanguage]) {\n    defaultValues = { ...defaultValues, ...overwrite[usedLanguage] }\n  }\n  return defaultValues\n}\n","export const equalSizeGroups = <T>(array: T[], groupSize: number): T[][] => {\n  if (groupSize <= 0) {\n    console.warn(`group size should be greater than 0: groupSize = ${groupSize}`)\n    return [[...array]]\n  }\n\n  const groups = []\n  for (let i = 0; i < array.length; i += groupSize) {\n    groups.push(array.slice(i, Math.min(i + groupSize, array.length)))\n  }\n  return groups\n}\n\n/**\n * @param start\n * @param end inclusive\n * @param allowEmptyRange Whether the range can be defined empty via end < start\n */\nexport const range = (start: number, end: number, allowEmptyRange: boolean = false): number[] => {\n  if (end < start) {\n    if (!allowEmptyRange) {\n      console.warn(`range: end (${end}) < start (${start}) should be allowed explicitly, set allowEmptyRange to true`)\n    }\n    return []\n  }\n  return Array.from({ length: end - start + 1 }, (_, index) => index + start)\n}\n\n/** Finds the closest match\n * @param list The list of all possible matches\n * @param firstCloser Return whether item1 is closer than item2\n */\nexport const closestMatch = <T>(list: T[], firstCloser: (item1: T, item2: T) => boolean) => {\n  return list.reduce((item1, item2) => {\n    return firstCloser(item1, item2) ? item1 : item2\n  })\n}\n\n/**\n * returns the item in middle of a list and its neighbours before and after\n * e.g. [1,2,3,4,5,6] for item = 1 would return [5,6,1,2,3]\n */\nexport const getNeighbours = <T>(list: T[], item: T, neighbourDistance: number = 2) => {\n  const index = list.indexOf(item)\n  const totalItems = neighbourDistance * 2 + 1\n  if (list.length < totalItems) {\n    console.warn('List is to short')\n    return list\n  }\n\n  if (index === -1) {\n    console.error('item not found in list')\n    return list.splice(0, totalItems)\n  }\n\n  let start = index - neighbourDistance\n  if (start < 0) {\n    start += list.length\n  }\n  const end = (index + neighbourDistance + 1) % list.length\n\n  const result: T[] = []\n  let ignoreOnce = list.length === totalItems\n  for (let i = start; i !== end || ignoreOnce; i = (i + 1) % list.length) {\n    result.push(list[i]!)\n    if (end === i && ignoreOnce) {\n      ignoreOnce = false\n    }\n  }\n  return result\n}\n\nexport const createLoopingListWithIndex = <T>(list: T[], startIndex: number = 0, length: number = 0, forwards: boolean = true) => {\n  if (length < 0) {\n    console.warn(`createLoopingList: length must be >= 0, given ${length}`)\n  } else if (length === 0) {\n    length = list.length\n  }\n\n  const returnList: [number, T][] = []\n\n  if (forwards) {\n    for (let i = startIndex; returnList.length < length; i = (i + 1) % list.length) {\n      returnList.push([i, list[i]!])\n    }\n  } else {\n    for (let i = startIndex; returnList.length < length; i = i === 0 ? i = list.length - 1 : i - 1) {\n      returnList.push([i, list[i]!])\n    }\n  }\n\n  return returnList\n}\n\nexport const createLoopingList = <T>(list: T[], startIndex: number = 0, length: number = 0, forwards: boolean = true) => {\n  return createLoopingListWithIndex(list, startIndex, length, forwards).map(([_, item]) => item)\n}\n\nexport const ArrayUtil = {\n  unique: <T>(list: T[]): T[] => {\n    const seen = new Set<T>()\n    return list.filter((item) => {\n      if (seen.has(item)) {\n        return false\n      }\n      seen.add(item)\n      return true\n    })\n  },\n\n  difference: <T>(list: T[], removeList: T[]): T[] => {\n    const remove = new Set<T>(removeList)\n    return list.filter((item) => !remove.has(item))\n  }\n}\n","import type { ButtonHTMLAttributes, PropsWithChildren, ReactNode } from 'react'\nimport clsx from 'clsx'\n\n\nexport const ButtonColorUtil = {\n  solid: ['primary', 'secondary', 'tertiary', 'positive', 'warning', 'negative', 'neutral'] as const,\n  text: ['primary', 'negative', 'neutral'] as const,\n  outline: ['primary'] as const,\n}\n\n\n/**\n * The allowed colors for the SolidButton and IconButton\n */\nexport type SolidButtonColor = typeof ButtonColorUtil.solid[number]\n/**\n * The allowed colors for the OutlineButton\n */\nexport type OutlineButtonColor = typeof ButtonColorUtil.outline[number]\n/**\n * The allowed colors for the TextButton\n */\nexport type TextButtonColor = typeof ButtonColorUtil.text[number]\n\n/**\n * The different sizes for a button\n */\ntype ButtonSizes = 'small' | 'medium' | 'large'\n\n/**\n * The shard properties between all button types\n */\nexport type ButtonProps = PropsWithChildren<{\n  /**\n   * @default 'medium'\n   */\n  size?: ButtonSizes,\n}> & ButtonHTMLAttributes<Element>\n\nconst paddingMapping: Record<ButtonSizes, string> = {\n  small: 'btn-sm',\n  medium: 'btn-md',\n  large: 'btn-lg'\n}\n\nconst iconPaddingMapping: Record<ButtonSizes, string> = {\n  small: 'icon-btn-sm',\n  medium: 'icon-btn-md',\n  large: 'icon-btn-lg'\n}\n\nexport const ButtonUtil = {\n  paddingMapping,\n  iconPaddingMapping\n}\n\ntype ButtonWithIconsProps = ButtonProps & {\n  startIcon?: ReactNode,\n  endIcon?: ReactNode,\n}\n\nexport type SolidButtonProps = ButtonWithIconsProps & {\n  color?: SolidButtonColor,\n}\n\nexport type OutlineButtonProps = ButtonWithIconsProps & {\n  color?: OutlineButtonColor,\n}\n\nexport type TextButtonProps = ButtonWithIconsProps & {\n  color?: TextButtonColor,\n}\n\nexport type IconButtonProps = ButtonProps & {\n  color?: SolidButtonColor,\n}\n\n/**\n * A button with a solid background and different sizes\n */\nconst SolidButton = ({\n                       children,\n                       disabled = false,\n                       color = 'primary',\n                       size = 'medium',\n                       startIcon,\n                       endIcon,\n                       onClick,\n                       className,\n                       ...restProps\n                     }: SolidButtonProps) => {\n  const colorClasses = {\n    primary: 'bg-button-solid-primary-background text-button-solid-primary-text',\n    secondary: 'bg-button-solid-secondary-background text-button-solid-secondary-text',\n    tertiary: 'bg-button-solid-tertiary-background text-button-solid-tertiary-text',\n    positive: 'bg-button-solid-positive-background text-button-solid-positive-text',\n    warning: 'bg-button-solid-warning-background text-button-solid-warning-text',\n    negative: 'bg-button-solid-negative-background text-button-solid-negative-text',\n    neutral: 'bg-button-solid-neutral-background text-button-solid-neutral-text',\n  }[color]\n\n  const iconColorClasses = {\n    primary: 'text-button-solid-primary-icon',\n    secondary: 'text-button-solid-secondary-icon',\n    tertiary: 'text-button-solid-tertiary-icon',\n    positive: 'text-button-solid-positive-icon',\n    warning: 'text-button-solid-warning-icon',\n    negative: 'text-button-solid-negative-icon',\n    neutral: 'text-button-solid-neutral-icon',\n  }[color]\n\n  return (\n    <button\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled || onClick === undefined}\n      className={clsx(\n        className,\n        {\n          'text-disabled-text bg-disabled-background': disabled,\n          [clsx(colorClasses, 'hover:brightness-90')]: !disabled\n        },\n        ButtonUtil.paddingMapping[size]\n      )}\n      {...restProps}\n    >\n      {startIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {startIcon}\n      </span>\n      )}\n      {children}\n      {endIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {endIcon}\n      </span>\n      )}\n    </button>\n  )\n}\n\n/**\n * A button with an outline border and different sizes\n */\nconst OutlineButton = ({\n                         children,\n                         disabled = false,\n                         color = 'primary',\n                         size = 'medium',\n                         startIcon,\n                         endIcon,\n                         onClick,\n                         className,\n                         ...restProps\n                       }: OutlineButtonProps) => {\n  const colorClasses = {\n    primary: 'bg-transparent border-2 border-button-outline-primary-text text-button-outline-primary-text',\n  }[color]\n\n  const iconColorClasses = {\n    primary: 'text-button-outline-primary-icon',\n  }[color]\n  return (\n    <button\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled || onClick === undefined}\n      className={clsx(\n        className, {\n          'text-disabled-text border-disabled-outline': disabled,\n          [clsx(colorClasses, 'hover:brightness-80')]: !disabled,\n        },\n        ButtonUtil.paddingMapping[size]\n      )}\n      {...restProps}\n    >\n      {startIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {startIcon}\n      </span>\n      )}\n      {children}\n      {endIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {endIcon}\n      </span>\n      )}\n    </button>\n  )\n}\n\n/**\n * A text that is a button that can have different sizes\n */\nconst TextButton = ({\n                      children,\n                      disabled = false,\n                      color = 'neutral',\n                      size = 'medium',\n                      startIcon,\n                      endIcon,\n                      onClick,\n                      className,\n                      ...restProps\n                    }: TextButtonProps) => {\n  const colorClasses = {\n    primary: 'bg-transparent text-button-text-primary-text',\n    negative: 'bg-transparent text-button-text-negative-text',\n    neutral: 'bg-transparent text-button-text-neutral-text',\n  }[color]\n\n  const iconColorClasses = {\n    primary: 'text-button-text-primary-icon',\n    negative: 'text-button-text-negative-icon',\n    neutral: 'text-button-text-neutral-icon',\n  }[color]\n  return (\n    <button\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled || onClick === undefined}\n      className={clsx(\n        className, {\n          'text-disabled-text': disabled,\n          [clsx(colorClasses, 'hover:bg-button-text-hover-background rounded-full')]: !disabled,\n        },\n        ButtonUtil.paddingMapping[size]\n      )}\n      {...restProps}\n    >\n      {startIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {startIcon}\n      </span>\n      )}\n      {children}\n      {endIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {endIcon}\n      </span>\n      )}\n    </button>\n  )\n}\n\n\n/**\n * A button for icons with a solid background and different sizes\n */\nconst IconButton = ({\n                      children,\n                      disabled = false,\n                      color = 'primary',\n                      size = 'medium',\n                      onClick,\n                      className,\n                      ...restProps\n                    }: IconButtonProps) => {\n  const colorClasses = {\n    primary: 'bg-button-solid-primary-background text-button-solid-primary-text',\n    secondary: 'bg-button-solid-secondary-background text-button-solid-secondary-text',\n    tertiary: 'bg-button-solid-tertiary-background text-button-solid-tertiary-text',\n    positive: 'bg-button-solid-positive-background text-button-solid-positive-text',\n    warning: 'bg-button-solid-warning-background text-button-solid-warning-text',\n    negative: 'bg-button-solid-negative-background text-button-solid-negative-text',\n    neutral: 'bg-button-solid-neutral-background text-button-solid-neutral-text',\n  }[color]\n\n  return (\n    <button\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled || onClick === undefined}\n      className={clsx(\n        className,\n        {\n          'text-disabled-text bg-disabled-background': disabled,\n          [clsx(colorClasses, 'hover:brightness-90')]: !disabled\n        },\n        ButtonUtil.iconPaddingMapping[size]\n      )}\n      {...restProps}\n    >\n      {children}\n    </button>\n  )\n}\n\nexport { SolidButton, OutlineButton, TextButton, IconButton }\n"],"mappings":"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","names":["import_react","import_jsx_runtime","clsx","import_clsx","import_jsx_runtime","clsx"]}
+{"version":3,"sources":["../../../src/components/layout-and-navigation/StepperBar.tsx","../../../src/localization/LanguageProvider.tsx","../../../src/hooks/useLocalStorage.ts","../../../src/localization/util.ts","../../../src/localization/useTranslation.ts","../../../src/util/array.ts","../../../src/components/user-action/Button.tsx"],"sourcesContent":["import { Check, ChevronLeft, ChevronRight } from 'lucide-react'\nimport type { Language } from '../../localization/util'\nimport type { PropsForTranslation } from '../../localization/useTranslation'\nimport { useTranslation } from '../../localization/useTranslation'\nimport { range } from '../../util/array'\nimport { SolidButton } from '../user-action/Button'\nimport clsx from 'clsx'\n\ntype StepperBarTranslation = {\n  back: string,\n  next: string,\n  confirm: string,\n}\n\nconst defaultStepperBarTranslation: Record<Language, StepperBarTranslation> = {\n  en: {\n    back: 'Back',\n    next: 'Next Step',\n    confirm: 'Create'\n  },\n  de: {\n    back: 'Zurück',\n    next: 'Nächster Schritt',\n    confirm: 'Erstellen'\n  }\n}\n\nexport type StepperInformation = {\n  step: number,\n  lastStep: number,\n  seenSteps: Set<number>,\n}\n\nexport type StepperBarProps = {\n  stepper: StepperInformation,\n  onChange: (step: StepperInformation) => void,\n  onFinish: () => void,\n  showDots?: boolean,\n  className?: string,\n}\n\n/**\n * A Component for stepping\n */\nexport const StepperBar = ({\n                             overwriteTranslation,\n                             stepper,\n                             onChange,\n                             onFinish,\n                             showDots = true,\n                             className = '',\n                           }: PropsForTranslation<StepperBarTranslation, StepperBarProps>) => {\n  const translation = useTranslation(defaultStepperBarTranslation, overwriteTranslation)\n  const dots = range(0, stepper.lastStep)\n  const { step, seenSteps, lastStep } = stepper\n\n  const update = (newStep: number) => {\n    seenSteps.add(newStep)\n    onChange({ step: newStep, seenSteps, lastStep })\n  }\n\n  return (\n    <div\n      className={clsx('sticky row p-2 border-2 justify-between rounded-lg shadow-lg', className)}\n    >\n      <div className=\"flex-[2] justify-start\">\n        <SolidButton\n          disabled={step === 0}\n          onClick={() => {\n            update(step - 1)\n          }}\n          className=\"row gap-x-1 items-center justify-center\"\n        >\n          <ChevronLeft size={14}/>\n          {translation.back}\n        </SolidButton>\n      </div>\n      <div className=\"row flex-[5] gap-x-2 justify-center items-center\">\n        {showDots && dots.map((value, index) => {\n          const seen = seenSteps.has(index)\n          return (\n            <div\n              key={index}\n              onClick={() => seen && update(index)}\n              className={clsx('rounded-full w-4 h-4', {\n                  'bg-primary hover:brightness-75': index === step && seen,\n                  'bg-primary/40 hover:bg-primary': index !== step && seen,\n                  'bg-gray-200 outline-transparent': !seen,\n                },\n                {\n                  'cursor-pointer': seen,\n                  'cursor-not-allowed': !seen,\n                })}\n            />\n          )\n        })}\n      </div>\n      {step !== lastStep && (\n        <div className=\"flex-[2] justify-end\">\n          <SolidButton\n            onClick={() => update(step + 1)}\n            className=\"row gap-x-1 items-center justify-center\"\n          >\n            {translation.next}\n            <ChevronRight size={14}/>\n          </SolidButton>\n        </div>\n      )}\n      {step === lastStep && (\n        <div className=\"flex-[2] justify-end\">\n          <SolidButton\n            // TODO check form validity\n            disabled={false}\n            onClick={onFinish}\n            className=\"row gap-x-1 items-center justify-center\"\n          >\n            <Check size={14}/>\n            {translation.confirm}\n          </SolidButton>\n        </div>\n      )}\n    </div>\n  )\n}\n","import type { Dispatch, PropsWithChildren, SetStateAction } from 'react'\nimport { createContext, useContext, useEffect, useState } from 'react'\nimport { useLocalStorage } from '@/hooks/useLocalStorage'\nimport type { Language } from './util'\nimport { LanguageUtil } from './util'\n\nexport type LanguageContextValue = {\n  language: Language,\n  setLanguage: Dispatch<SetStateAction<Language>>,\n}\n\nexport const LanguageContext = createContext<LanguageContextValue>({\n  language: LanguageUtil.DEFAULT_LANGUAGE,\n  setLanguage: (v) => v\n})\n\nexport const useLanguage = () => useContext(LanguageContext)\n\nexport const useLocale = (overWriteLanguage?: Language) => {\n  const { language } = useLanguage()\n  const mapping: Record<Language, string> = {\n    en: 'en-US',\n    de: 'de-DE'\n  }\n  return mapping[overWriteLanguage ?? language]\n}\n\ntype LanguageProviderProps = {\n  initialLanguage?: Language,\n}\n\nexport const LanguageProvider = ({ initialLanguage, children }: PropsWithChildren<LanguageProviderProps>) => {\n  const [language, setLanguage] = useState<Language>(initialLanguage ?? LanguageUtil.DEFAULT_LANGUAGE)\n  const [storedLanguage, setStoredLanguage] = useLocalStorage<Language>('language', initialLanguage ?? LanguageUtil.DEFAULT_LANGUAGE)\n\n  useEffect(() => {\n    if (language !== initialLanguage && initialLanguage) {\n      console.warn('LanguageProvider initial state changed: Prefer using languageProvider\\'s setLanguage instead')\n      setLanguage(initialLanguage)\n    }\n  }, [initialLanguage]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  useEffect(() => {\n    // TODO set locale of html tag here as well\n    setStoredLanguage(language)\n  }, [language, setStoredLanguage])\n\n  useEffect(() => {\n    if (storedLanguage !== null) {\n      setLanguage(storedLanguage)\n      return\n    }\n\n    const LanguageToTestAgainst = Object.values(LanguageUtil.languages)\n\n    const matchingBrowserLanguage = window.navigator.languages\n      .map(language => LanguageToTestAgainst.find((test) => language === test || language.split('-')[0] === test))\n      .filter(entry => entry !== undefined)\n\n    if (matchingBrowserLanguage.length === 0) return\n\n    const firstMatch = matchingBrowserLanguage[0] as Language\n    setLanguage(firstMatch)\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return (\n    <LanguageContext.Provider value={{\n      language,\n      setLanguage\n    }}>\n      {children}\n    </LanguageContext.Provider>\n  )\n}","import type { Dispatch, SetStateAction } from 'react'\nimport { useCallback, useEffect, useState } from 'react'\nimport { LocalStorageService } from '../util/storage'\n\ntype SetValue<T> = Dispatch<SetStateAction<T>>\nexport const useLocalStorage = <T>(key: string, initValue: T): [T, SetValue<T>] => {\n  const get = useCallback((): T => {\n    if (typeof window === 'undefined') {\n      return initValue\n    }\n    const storageService = new LocalStorageService()\n    const value = storageService.get<T>(key)\n    return value || initValue\n  }, [initValue, key])\n\n  const [storedValue, setStoredValue] = useState<T>(get)\n\n  const setValue: SetValue<T> = useCallback(value => {\n    const newValue = value instanceof Function ? value(storedValue) : value\n    const storageService = new LocalStorageService()\n    storageService.set(key, value)\n\n    setStoredValue(newValue)\n  }, [storedValue, setStoredValue, key])\n\n  useEffect(() => {\n    setStoredValue(get())\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return [storedValue, setValue]\n}","/**\n * The supported languages\n */\nconst languages = ['en', 'de'] as const\n\n/**\n * The supported languages\n */\nexport type Language = typeof languages[number]\n\n/**\n * The supported languages' names in their respective language\n */\nconst languagesLocalNames: Record<Language, string> = {\n  en: 'English',\n  de: 'Deutsch',\n}\n\n/**\n * The default language\n */\nconst DEFAULT_LANGUAGE: Language = 'en'\n\n/**\n * A constant definition for holding data regarding languages\n */\nexport const LanguageUtil = {\n  languages,\n  DEFAULT_LANGUAGE,\n  languagesLocalNames,\n}","import { useLanguage } from './LanguageProvider'\nimport type { Language } from './util'\n\nexport type Translation<T> = Record<Language, T>\n\ntype OverwriteTranslationType<Translation extends Record<string, unknown>> = {\n  language?: Language,\n  translation?: Partial<Record<Language, Partial<Translation>>>,\n}\n\n/**\n * Adds the `language` prop to the component props.\n *\n * @param Translation the type of the translation object\n *\n * @param Props the type of the component props, defaults to `Record<string, never>`,\n *              if you don't expect any other props other than `language` and get an\n *              error when using your component (because it uses `forwardRef` etc.)\n *              you can try out `Record<string, unknown>`, this might resolve your\n *              problem as `SomeType & never` is still `never` but `SomeType & unknown`\n *              is `SomeType` which means that adding back props (like `ref` etc.)\n *              works properly\n */\nexport type PropsForTranslation<\n  Translation extends Record<string, unknown>,\n  Props = Record<string, never>\n> = Props & {\n  overwriteTranslation?: OverwriteTranslationType<Translation>,\n};\n\nexport const useTranslation = <Translation extends Record<string, unknown>>(\n  defaults: Record<Language, Translation>,\n  translationOverwrite: OverwriteTranslationType<Translation> = {}\n): Translation => {\n  const { language: languageProp, translation: overwrite } = translationOverwrite\n  const { language: inferredLanguage } = useLanguage()\n  const usedLanguage = languageProp ?? inferredLanguage\n  let defaultValues: Translation = defaults[usedLanguage]\n  if (overwrite && overwrite[usedLanguage]) {\n    defaultValues = { ...defaultValues, ...overwrite[usedLanguage] }\n  }\n  return defaultValues\n}\n","export const equalSizeGroups = <T>(array: T[], groupSize: number): T[][] => {\n  if (groupSize <= 0) {\n    console.warn(`group size should be greater than 0: groupSize = ${groupSize}`)\n    return [[...array]]\n  }\n\n  const groups = []\n  for (let i = 0; i < array.length; i += groupSize) {\n    groups.push(array.slice(i, Math.min(i + groupSize, array.length)))\n  }\n  return groups\n}\n\n/**\n * @param start\n * @param end inclusive\n * @param allowEmptyRange Whether the range can be defined empty via end < start\n */\nexport const range = (start: number, end: number, allowEmptyRange: boolean = false): number[] => {\n  if (end < start) {\n    if (!allowEmptyRange) {\n      console.warn(`range: end (${end}) < start (${start}) should be allowed explicitly, set allowEmptyRange to true`)\n    }\n    return []\n  }\n  return Array.from({ length: end - start + 1 }, (_, index) => index + start)\n}\n\n/** Finds the closest match\n * @param list The list of all possible matches\n * @param firstCloser Return whether item1 is closer than item2\n */\nexport const closestMatch = <T>(list: T[], firstCloser: (item1: T, item2: T) => boolean) => {\n  return list.reduce((item1, item2) => {\n    return firstCloser(item1, item2) ? item1 : item2\n  })\n}\n\n/**\n * returns the item in middle of a list and its neighbours before and after\n * e.g. [1,2,3,4,5,6] for item = 1 would return [5,6,1,2,3]\n */\nexport const getNeighbours = <T>(list: T[], item: T, neighbourDistance: number = 2) => {\n  const index = list.indexOf(item)\n  const totalItems = neighbourDistance * 2 + 1\n  if (list.length < totalItems) {\n    console.warn('List is to short')\n    return list\n  }\n\n  if (index === -1) {\n    console.error('item not found in list')\n    return list.splice(0, totalItems)\n  }\n\n  let start = index - neighbourDistance\n  if (start < 0) {\n    start += list.length\n  }\n  const end = (index + neighbourDistance + 1) % list.length\n\n  const result: T[] = []\n  let ignoreOnce = list.length === totalItems\n  for (let i = start; i !== end || ignoreOnce; i = (i + 1) % list.length) {\n    result.push(list[i]!)\n    if (end === i && ignoreOnce) {\n      ignoreOnce = false\n    }\n  }\n  return result\n}\n\nexport const createLoopingListWithIndex = <T>(list: T[], startIndex: number = 0, length: number = 0, forwards: boolean = true) => {\n  if (length < 0) {\n    console.warn(`createLoopingList: length must be >= 0, given ${length}`)\n  } else if (length === 0) {\n    length = list.length\n  }\n\n  const returnList: [number, T][] = []\n\n  if (forwards) {\n    for (let i = startIndex; returnList.length < length; i = (i + 1) % list.length) {\n      returnList.push([i, list[i]!])\n    }\n  } else {\n    for (let i = startIndex; returnList.length < length; i = i === 0 ? i = list.length - 1 : i - 1) {\n      returnList.push([i, list[i]!])\n    }\n  }\n\n  return returnList\n}\n\nexport const createLoopingList = <T>(list: T[], startIndex: number = 0, length: number = 0, forwards: boolean = true) => {\n  return createLoopingListWithIndex(list, startIndex, length, forwards).map(([_, item]) => item)\n}\n\nexport const ArrayUtil = {\n  unique: <T>(list: T[]): T[] => {\n    const seen = new Set<T>()\n    return list.filter((item) => {\n      if (seen.has(item)) {\n        return false\n      }\n      seen.add(item)\n      return true\n    })\n  },\n\n  difference: <T>(list: T[], removeList: T[]): T[] => {\n    const remove = new Set<T>(removeList)\n    return list.filter((item) => !remove.has(item))\n  }\n}\n","import type { ButtonHTMLAttributes, PropsWithChildren, ReactNode } from 'react'\nimport clsx from 'clsx'\n\n\nexport const ButtonColorUtil = {\n  solid: ['primary', 'secondary', 'tertiary', 'positive', 'warning', 'negative', 'neutral'] as const,\n  text: ['primary', 'negative', 'neutral'] as const,\n  outline: ['primary'] as const,\n}\n\n\n/**\n * The allowed colors for the SolidButton and IconButton\n */\nexport type SolidButtonColor = typeof ButtonColorUtil.solid[number]\n/**\n * The allowed colors for the OutlineButton\n */\nexport type OutlineButtonColor = typeof ButtonColorUtil.outline[number]\n/**\n * The allowed colors for the TextButton\n */\nexport type TextButtonColor = typeof ButtonColorUtil.text[number]\n\n/**\n * The different sizes for a button\n */\ntype ButtonSizes = 'small' | 'medium' | 'large'\n\n/**\n * The shard properties between all button types\n */\nexport type ButtonProps = PropsWithChildren<{\n  /**\n   * @default 'medium'\n   */\n  size?: ButtonSizes,\n}> & ButtonHTMLAttributes<Element>\n\nconst paddingMapping: Record<ButtonSizes, string> = {\n  small: 'btn-sm',\n  medium: 'btn-md',\n  large: 'btn-lg'\n}\n\nconst iconPaddingMapping: Record<ButtonSizes, string> = {\n  small: 'icon-btn-sm',\n  medium: 'icon-btn-md',\n  large: 'icon-btn-lg'\n}\n\nexport const ButtonUtil = {\n  paddingMapping,\n  iconPaddingMapping\n}\n\ntype ButtonWithIconsProps = ButtonProps & {\n  startIcon?: ReactNode,\n  endIcon?: ReactNode,\n}\n\nexport type SolidButtonProps = ButtonWithIconsProps & {\n  color?: SolidButtonColor,\n}\n\nexport type OutlineButtonProps = ButtonWithIconsProps & {\n  color?: OutlineButtonColor,\n}\n\nexport type TextButtonProps = ButtonWithIconsProps & {\n  color?: TextButtonColor,\n}\n\nexport type IconButtonProps = ButtonProps & {\n  color?: SolidButtonColor,\n}\n\n/**\n * A button with a solid background and different sizes\n */\nconst SolidButton = ({\n                       children,\n                       disabled = false,\n                       color = 'primary',\n                       size = 'medium',\n                       startIcon,\n                       endIcon,\n                       onClick,\n                       className,\n                       ...restProps\n                     }: SolidButtonProps) => {\n  const colorClasses = {\n    primary: 'bg-button-solid-primary-background text-button-solid-primary-text',\n    secondary: 'bg-button-solid-secondary-background text-button-solid-secondary-text',\n    tertiary: 'bg-button-solid-tertiary-background text-button-solid-tertiary-text',\n    positive: 'bg-button-solid-positive-background text-button-solid-positive-text',\n    warning: 'bg-button-solid-warning-background text-button-solid-warning-text',\n    negative: 'bg-button-solid-negative-background text-button-solid-negative-text',\n    neutral: 'bg-button-solid-neutral-background text-button-solid-neutral-text',\n  }[color]\n\n  const iconColorClasses = {\n    primary: 'text-button-solid-primary-icon',\n    secondary: 'text-button-solid-secondary-icon',\n    tertiary: 'text-button-solid-tertiary-icon',\n    positive: 'text-button-solid-positive-icon',\n    warning: 'text-button-solid-warning-icon',\n    negative: 'text-button-solid-negative-icon',\n    neutral: 'text-button-solid-neutral-icon',\n  }[color]\n\n  return (\n    <button\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled || onClick === undefined}\n      className={clsx(\n        {\n          'text-disabled-text bg-disabled-background cursor-not-allowed': disabled,\n          [clsx(colorClasses, 'hover:brightness-90')]: !disabled\n        },\n        ButtonUtil.paddingMapping[size],\n        className\n      )}\n      {...restProps}\n    >\n      {startIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {startIcon}\n      </span>\n      )}\n      {children}\n      {endIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {endIcon}\n      </span>\n      )}\n    </button>\n  )\n}\n\n/**\n * A button with an outline border and different sizes\n */\nconst OutlineButton = ({\n                         children,\n                         disabled = false,\n                         color = 'primary',\n                         size = 'medium',\n                         startIcon,\n                         endIcon,\n                         onClick,\n                         className,\n                         ...restProps\n                       }: OutlineButtonProps) => {\n  const colorClasses = {\n    primary: 'bg-transparent border-2 border-button-outline-primary-text text-button-outline-primary-text',\n  }[color]\n\n  const iconColorClasses = {\n    primary: 'text-button-outline-primary-icon',\n  }[color]\n  return (\n    <button\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled || onClick === undefined}\n      className={clsx(\n        {\n          'text-disabled-text border-disabled-outline cursor-not-allowed': disabled,\n          [clsx(colorClasses, 'hover:brightness-80')]: !disabled,\n        },\n        ButtonUtil.paddingMapping[size],\n        className\n      )}\n      {...restProps}\n    >\n      {startIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {startIcon}\n      </span>\n      )}\n      {children}\n      {endIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {endIcon}\n      </span>\n      )}\n    </button>\n  )\n}\n\n/**\n * A text that is a button that can have different sizes\n */\nconst TextButton = ({\n                      children,\n                      disabled = false,\n                      color = 'neutral',\n                      size = 'medium',\n                      startIcon,\n                      endIcon,\n                      onClick,\n                      className,\n                      ...restProps\n                    }: TextButtonProps) => {\n  const colorClasses = {\n    primary: 'bg-transparent text-button-text-primary-text',\n    negative: 'bg-transparent text-button-text-negative-text',\n    neutral: 'bg-transparent text-button-text-neutral-text',\n  }[color]\n\n  const iconColorClasses = {\n    primary: 'text-button-text-primary-icon',\n    negative: 'text-button-text-negative-icon',\n    neutral: 'text-button-text-neutral-icon',\n  }[color]\n  return (\n    <button\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled || onClick === undefined}\n      className={clsx(\n        {\n          'text-disabled-text cursor-not-allowed': disabled,\n          [clsx(colorClasses, 'hover:bg-button-text-hover-background rounded-full')]: !disabled,\n        },\n        ButtonUtil.paddingMapping[size],\n        className\n      )}\n      {...restProps}\n    >\n      {startIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {startIcon}\n      </span>\n      )}\n      {children}\n      {endIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {endIcon}\n      </span>\n      )}\n    </button>\n  )\n}\n\n\n/**\n * A button for icons with a solid background and different sizes\n */\nconst IconButton = ({\n                      children,\n                      disabled = false,\n                      color = 'primary',\n                      size = 'medium',\n                      onClick,\n                      className,\n                      ...restProps\n                    }: IconButtonProps) => {\n  const colorClasses = {\n    primary: 'bg-button-solid-primary-background text-button-solid-primary-text',\n    secondary: 'bg-button-solid-secondary-background text-button-solid-secondary-text',\n    tertiary: 'bg-button-solid-tertiary-background text-button-solid-tertiary-text',\n    positive: 'bg-button-solid-positive-background text-button-solid-positive-text',\n    warning: 'bg-button-solid-warning-background text-button-solid-warning-text',\n    negative: 'bg-button-solid-negative-background text-button-solid-negative-text',\n    neutral: 'bg-button-solid-neutral-background text-button-solid-neutral-text',\n  }[color]\n\n  return (\n    <button\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled || onClick === undefined}\n      className={clsx(\n        {\n          'text-disabled-text bg-disabled-background cursor-not-allowed': disabled,\n          [clsx(colorClasses, 'hover:brightness-90')]: !disabled\n        },\n        ButtonUtil.iconPaddingMapping[size],\n        className\n      )}\n      {...restProps}\n    >\n      {children}\n    </button>\n  )\n}\n\nexport { SolidButton, OutlineButton, TextButton, IconButton }\n"],"mappings":"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","names":["import_react","import_jsx_runtime","clsx","import_clsx","import_jsx_runtime","clsx"]}

package/dist/components/layout-and-navigation/StepperBar.js

@@ -103,12 +103,12 @@ var SolidButton = ({
       onClick: disabled ? void 0 : onClick,
       disabled: disabled || onClick === void 0,
       className: clsx(
-        className,
         {
-          "text-disabled-text bg-disabled-background": disabled,
+          "text-disabled-text bg-disabled-background cursor-not-allowed": disabled,
           [clsx(colorClasses, "hover:brightness-90")]: !disabled
         },
-        ButtonUtil.paddingMapping[size]
+        ButtonUtil.paddingMapping[size],
+        className
       ),
       ...restProps,
       children: [

package/dist/components/layout-and-navigation/StepperBar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/layout-and-navigation/StepperBar.tsx","../../../src/localization/LanguageProvider.tsx","../../../src/hooks/useLocalStorage.ts","../../../src/localization/util.ts","../../../src/localization/useTranslation.ts","../../../src/util/array.ts","../../../src/components/user-action/Button.tsx"],"sourcesContent":["import { Check, ChevronLeft, ChevronRight } from 'lucide-react'\nimport type { Language } from '../../localization/util'\nimport type { PropsForTranslation } from '../../localization/useTranslation'\nimport { useTranslation } from '../../localization/useTranslation'\nimport { range } from '../../util/array'\nimport { SolidButton } from '../user-action/Button'\nimport clsx from 'clsx'\n\ntype StepperBarTranslation = {\n  back: string,\n  next: string,\n  confirm: string,\n}\n\nconst defaultStepperBarTranslation: Record<Language, StepperBarTranslation> = {\n  en: {\n    back: 'Back',\n    next: 'Next Step',\n    confirm: 'Create'\n  },\n  de: {\n    back: 'Zurück',\n    next: 'Nächster Schritt',\n    confirm: 'Erstellen'\n  }\n}\n\nexport type StepperInformation = {\n  step: number,\n  lastStep: number,\n  seenSteps: Set<number>,\n}\n\nexport type StepperBarProps = {\n  stepper: StepperInformation,\n  onChange: (step: StepperInformation) => void,\n  onFinish: () => void,\n  showDots?: boolean,\n  className?: string,\n}\n\n/**\n * A Component for stepping\n */\nexport const StepperBar = ({\n                             overwriteTranslation,\n                             stepper,\n                             onChange,\n                             onFinish,\n                             showDots = true,\n                             className = '',\n                           }: PropsForTranslation<StepperBarTranslation, StepperBarProps>) => {\n  const translation = useTranslation(defaultStepperBarTranslation, overwriteTranslation)\n  const dots = range(0, stepper.lastStep)\n  const { step, seenSteps, lastStep } = stepper\n\n  const update = (newStep: number) => {\n    seenSteps.add(newStep)\n    onChange({ step: newStep, seenSteps, lastStep })\n  }\n\n  return (\n    <div\n      className={clsx('sticky row p-2 border-2 justify-between rounded-lg shadow-lg', className)}\n    >\n      <div className=\"flex-[2] justify-start\">\n        <SolidButton\n          disabled={step === 0}\n          onClick={() => {\n            update(step - 1)\n          }}\n          className=\"row gap-x-1 items-center justify-center\"\n        >\n          <ChevronLeft size={14}/>\n          {translation.back}\n        </SolidButton>\n      </div>\n      <div className=\"row flex-[5] gap-x-2 justify-center items-center\">\n        {showDots && dots.map((value, index) => {\n          const seen = seenSteps.has(index)\n          return (\n            <div\n              key={index}\n              onClick={() => seen && update(index)}\n              className={clsx('rounded-full w-4 h-4', {\n                  'bg-primary hover:brightness-75': index === step && seen,\n                  'bg-primary/40 hover:bg-primary': index !== step && seen,\n                  'bg-gray-200 outline-transparent': !seen,\n                },\n                {\n                  'cursor-pointer': seen,\n                  'cursor-not-allowed': !seen,\n                })}\n            />\n          )\n        })}\n      </div>\n      {step !== lastStep && (\n        <div className=\"flex-[2] justify-end\">\n          <SolidButton\n            onClick={() => update(step + 1)}\n            className=\"row gap-x-1 items-center justify-center\"\n          >\n            {translation.next}\n            <ChevronRight size={14}/>\n          </SolidButton>\n        </div>\n      )}\n      {step === lastStep && (\n        <div className=\"flex-[2] justify-end\">\n          <SolidButton\n            // TODO check form validity\n            disabled={false}\n            onClick={onFinish}\n            className=\"row gap-x-1 items-center justify-center\"\n          >\n            <Check size={14}/>\n            {translation.confirm}\n          </SolidButton>\n        </div>\n      )}\n    </div>\n  )\n}\n","import type { Dispatch, PropsWithChildren, SetStateAction } from 'react'\nimport { createContext, useContext, useEffect, useState } from 'react'\nimport { useLocalStorage } from '@/hooks/useLocalStorage'\nimport type { Language } from './util'\nimport { LanguageUtil } from './util'\n\nexport type LanguageContextValue = {\n  language: Language,\n  setLanguage: Dispatch<SetStateAction<Language>>,\n}\n\nexport const LanguageContext = createContext<LanguageContextValue>({\n  language: LanguageUtil.DEFAULT_LANGUAGE,\n  setLanguage: (v) => v\n})\n\nexport const useLanguage = () => useContext(LanguageContext)\n\nexport const useLocale = (overWriteLanguage?: Language) => {\n  const { language } = useLanguage()\n  const mapping: Record<Language, string> = {\n    en: 'en-US',\n    de: 'de-DE'\n  }\n  return mapping[overWriteLanguage ?? language]\n}\n\ntype LanguageProviderProps = {\n  initialLanguage?: Language,\n}\n\nexport const LanguageProvider = ({ initialLanguage, children }: PropsWithChildren<LanguageProviderProps>) => {\n  const [language, setLanguage] = useState<Language>(initialLanguage ?? LanguageUtil.DEFAULT_LANGUAGE)\n  const [storedLanguage, setStoredLanguage] = useLocalStorage<Language>('language', initialLanguage ?? LanguageUtil.DEFAULT_LANGUAGE)\n\n  useEffect(() => {\n    if (language !== initialLanguage && initialLanguage) {\n      console.warn('LanguageProvider initial state changed: Prefer using languageProvider\\'s setLanguage instead')\n      setLanguage(initialLanguage)\n    }\n  }, [initialLanguage]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  useEffect(() => {\n    // TODO set locale of html tag here as well\n    setStoredLanguage(language)\n  }, [language, setStoredLanguage])\n\n  useEffect(() => {\n    if (storedLanguage !== null) {\n      setLanguage(storedLanguage)\n      return\n    }\n\n    const LanguageToTestAgainst = Object.values(LanguageUtil.languages)\n\n    const matchingBrowserLanguage = window.navigator.languages\n      .map(language => LanguageToTestAgainst.find((test) => language === test || language.split('-')[0] === test))\n      .filter(entry => entry !== undefined)\n\n    if (matchingBrowserLanguage.length === 0) return\n\n    const firstMatch = matchingBrowserLanguage[0] as Language\n    setLanguage(firstMatch)\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return (\n    <LanguageContext.Provider value={{\n      language,\n      setLanguage\n    }}>\n      {children}\n    </LanguageContext.Provider>\n  )\n}","import type { Dispatch, SetStateAction } from 'react'\nimport { useCallback, useEffect, useState } from 'react'\nimport { LocalStorageService } from '../util/storage'\n\ntype SetValue<T> = Dispatch<SetStateAction<T>>\nexport const useLocalStorage = <T>(key: string, initValue: T): [T, SetValue<T>] => {\n  const get = useCallback((): T => {\n    if (typeof window === 'undefined') {\n      return initValue\n    }\n    const storageService = new LocalStorageService()\n    const value = storageService.get<T>(key)\n    return value || initValue\n  }, [initValue, key])\n\n  const [storedValue, setStoredValue] = useState<T>(get)\n\n  const setValue: SetValue<T> = useCallback(value => {\n    const newValue = value instanceof Function ? value(storedValue) : value\n    const storageService = new LocalStorageService()\n    storageService.set(key, value)\n\n    setStoredValue(newValue)\n  }, [storedValue, setStoredValue, key])\n\n  useEffect(() => {\n    setStoredValue(get())\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return [storedValue, setValue]\n}","/**\n * The supported languages\n */\nconst languages = ['en', 'de'] as const\n\n/**\n * The supported languages\n */\nexport type Language = typeof languages[number]\n\n/**\n * The supported languages' names in their respective language\n */\nconst languagesLocalNames: Record<Language, string> = {\n  en: 'English',\n  de: 'Deutsch',\n}\n\n/**\n * The default language\n */\nconst DEFAULT_LANGUAGE: Language = 'en'\n\n/**\n * A constant definition for holding data regarding languages\n */\nexport const LanguageUtil = {\n  languages,\n  DEFAULT_LANGUAGE,\n  languagesLocalNames,\n}","import { useLanguage } from './LanguageProvider'\nimport type { Language } from './util'\n\nexport type Translation<T> = Record<Language, T>\n\ntype OverwriteTranslationType<Translation extends Record<string, unknown>> = {\n  language?: Language,\n  translation?: Partial<Record<Language, Partial<Translation>>>,\n}\n\n/**\n * Adds the `language` prop to the component props.\n *\n * @param Translation the type of the translation object\n *\n * @param Props the type of the component props, defaults to `Record<string, never>`,\n *              if you don't expect any other props other than `language` and get an\n *              error when using your component (because it uses `forwardRef` etc.)\n *              you can try out `Record<string, unknown>`, this might resolve your\n *              problem as `SomeType & never` is still `never` but `SomeType & unknown`\n *              is `SomeType` which means that adding back props (like `ref` etc.)\n *              works properly\n */\nexport type PropsForTranslation<\n  Translation extends Record<string, unknown>,\n  Props = Record<string, never>\n> = Props & {\n  overwriteTranslation?: OverwriteTranslationType<Translation>,\n};\n\nexport const useTranslation = <Translation extends Record<string, unknown>>(\n  defaults: Record<Language, Translation>,\n  translationOverwrite: OverwriteTranslationType<Translation> = {}\n): Translation => {\n  const { language: languageProp, translation: overwrite } = translationOverwrite\n  const { language: inferredLanguage } = useLanguage()\n  const usedLanguage = languageProp ?? inferredLanguage\n  let defaultValues: Translation = defaults[usedLanguage]\n  if (overwrite && overwrite[usedLanguage]) {\n    defaultValues = { ...defaultValues, ...overwrite[usedLanguage] }\n  }\n  return defaultValues\n}\n","export const equalSizeGroups = <T>(array: T[], groupSize: number): T[][] => {\n  if (groupSize <= 0) {\n    console.warn(`group size should be greater than 0: groupSize = ${groupSize}`)\n    return [[...array]]\n  }\n\n  const groups = []\n  for (let i = 0; i < array.length; i += groupSize) {\n    groups.push(array.slice(i, Math.min(i + groupSize, array.length)))\n  }\n  return groups\n}\n\n/**\n * @param start\n * @param end inclusive\n * @param allowEmptyRange Whether the range can be defined empty via end < start\n */\nexport const range = (start: number, end: number, allowEmptyRange: boolean = false): number[] => {\n  if (end < start) {\n    if (!allowEmptyRange) {\n      console.warn(`range: end (${end}) < start (${start}) should be allowed explicitly, set allowEmptyRange to true`)\n    }\n    return []\n  }\n  return Array.from({ length: end - start + 1 }, (_, index) => index + start)\n}\n\n/** Finds the closest match\n * @param list The list of all possible matches\n * @param firstCloser Return whether item1 is closer than item2\n */\nexport const closestMatch = <T>(list: T[], firstCloser: (item1: T, item2: T) => boolean) => {\n  return list.reduce((item1, item2) => {\n    return firstCloser(item1, item2) ? item1 : item2\n  })\n}\n\n/**\n * returns the item in middle of a list and its neighbours before and after\n * e.g. [1,2,3,4,5,6] for item = 1 would return [5,6,1,2,3]\n */\nexport const getNeighbours = <T>(list: T[], item: T, neighbourDistance: number = 2) => {\n  const index = list.indexOf(item)\n  const totalItems = neighbourDistance * 2 + 1\n  if (list.length < totalItems) {\n    console.warn('List is to short')\n    return list\n  }\n\n  if (index === -1) {\n    console.error('item not found in list')\n    return list.splice(0, totalItems)\n  }\n\n  let start = index - neighbourDistance\n  if (start < 0) {\n    start += list.length\n  }\n  const end = (index + neighbourDistance + 1) % list.length\n\n  const result: T[] = []\n  let ignoreOnce = list.length === totalItems\n  for (let i = start; i !== end || ignoreOnce; i = (i + 1) % list.length) {\n    result.push(list[i]!)\n    if (end === i && ignoreOnce) {\n      ignoreOnce = false\n    }\n  }\n  return result\n}\n\nexport const createLoopingListWithIndex = <T>(list: T[], startIndex: number = 0, length: number = 0, forwards: boolean = true) => {\n  if (length < 0) {\n    console.warn(`createLoopingList: length must be >= 0, given ${length}`)\n  } else if (length === 0) {\n    length = list.length\n  }\n\n  const returnList: [number, T][] = []\n\n  if (forwards) {\n    for (let i = startIndex; returnList.length < length; i = (i + 1) % list.length) {\n      returnList.push([i, list[i]!])\n    }\n  } else {\n    for (let i = startIndex; returnList.length < length; i = i === 0 ? i = list.length - 1 : i - 1) {\n      returnList.push([i, list[i]!])\n    }\n  }\n\n  return returnList\n}\n\nexport const createLoopingList = <T>(list: T[], startIndex: number = 0, length: number = 0, forwards: boolean = true) => {\n  return createLoopingListWithIndex(list, startIndex, length, forwards).map(([_, item]) => item)\n}\n\nexport const ArrayUtil = {\n  unique: <T>(list: T[]): T[] => {\n    const seen = new Set<T>()\n    return list.filter((item) => {\n      if (seen.has(item)) {\n        return false\n      }\n      seen.add(item)\n      return true\n    })\n  },\n\n  difference: <T>(list: T[], removeList: T[]): T[] => {\n    const remove = new Set<T>(removeList)\n    return list.filter((item) => !remove.has(item))\n  }\n}\n","import type { ButtonHTMLAttributes, PropsWithChildren, ReactNode } from 'react'\nimport clsx from 'clsx'\n\n\nexport const ButtonColorUtil = {\n  solid: ['primary', 'secondary', 'tertiary', 'positive', 'warning', 'negative', 'neutral'] as const,\n  text: ['primary', 'negative', 'neutral'] as const,\n  outline: ['primary'] as const,\n}\n\n\n/**\n * The allowed colors for the SolidButton and IconButton\n */\nexport type SolidButtonColor = typeof ButtonColorUtil.solid[number]\n/**\n * The allowed colors for the OutlineButton\n */\nexport type OutlineButtonColor = typeof ButtonColorUtil.outline[number]\n/**\n * The allowed colors for the TextButton\n */\nexport type TextButtonColor = typeof ButtonColorUtil.text[number]\n\n/**\n * The different sizes for a button\n */\ntype ButtonSizes = 'small' | 'medium' | 'large'\n\n/**\n * The shard properties between all button types\n */\nexport type ButtonProps = PropsWithChildren<{\n  /**\n   * @default 'medium'\n   */\n  size?: ButtonSizes,\n}> & ButtonHTMLAttributes<Element>\n\nconst paddingMapping: Record<ButtonSizes, string> = {\n  small: 'btn-sm',\n  medium: 'btn-md',\n  large: 'btn-lg'\n}\n\nconst iconPaddingMapping: Record<ButtonSizes, string> = {\n  small: 'icon-btn-sm',\n  medium: 'icon-btn-md',\n  large: 'icon-btn-lg'\n}\n\nexport const ButtonUtil = {\n  paddingMapping,\n  iconPaddingMapping\n}\n\ntype ButtonWithIconsProps = ButtonProps & {\n  startIcon?: ReactNode,\n  endIcon?: ReactNode,\n}\n\nexport type SolidButtonProps = ButtonWithIconsProps & {\n  color?: SolidButtonColor,\n}\n\nexport type OutlineButtonProps = ButtonWithIconsProps & {\n  color?: OutlineButtonColor,\n}\n\nexport type TextButtonProps = ButtonWithIconsProps & {\n  color?: TextButtonColor,\n}\n\nexport type IconButtonProps = ButtonProps & {\n  color?: SolidButtonColor,\n}\n\n/**\n * A button with a solid background and different sizes\n */\nconst SolidButton = ({\n                       children,\n                       disabled = false,\n                       color = 'primary',\n                       size = 'medium',\n                       startIcon,\n                       endIcon,\n                       onClick,\n                       className,\n                       ...restProps\n                     }: SolidButtonProps) => {\n  const colorClasses = {\n    primary: 'bg-button-solid-primary-background text-button-solid-primary-text',\n    secondary: 'bg-button-solid-secondary-background text-button-solid-secondary-text',\n    tertiary: 'bg-button-solid-tertiary-background text-button-solid-tertiary-text',\n    positive: 'bg-button-solid-positive-background text-button-solid-positive-text',\n    warning: 'bg-button-solid-warning-background text-button-solid-warning-text',\n    negative: 'bg-button-solid-negative-background text-button-solid-negative-text',\n    neutral: 'bg-button-solid-neutral-background text-button-solid-neutral-text',\n  }[color]\n\n  const iconColorClasses = {\n    primary: 'text-button-solid-primary-icon',\n    secondary: 'text-button-solid-secondary-icon',\n    tertiary: 'text-button-solid-tertiary-icon',\n    positive: 'text-button-solid-positive-icon',\n    warning: 'text-button-solid-warning-icon',\n    negative: 'text-button-solid-negative-icon',\n    neutral: 'text-button-solid-neutral-icon',\n  }[color]\n\n  return (\n    <button\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled || onClick === undefined}\n      className={clsx(\n        className,\n        {\n          'text-disabled-text bg-disabled-background': disabled,\n          [clsx(colorClasses, 'hover:brightness-90')]: !disabled\n        },\n        ButtonUtil.paddingMapping[size]\n      )}\n      {...restProps}\n    >\n      {startIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {startIcon}\n      </span>\n      )}\n      {children}\n      {endIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {endIcon}\n      </span>\n      )}\n    </button>\n  )\n}\n\n/**\n * A button with an outline border and different sizes\n */\nconst OutlineButton = ({\n                         children,\n                         disabled = false,\n                         color = 'primary',\n                         size = 'medium',\n                         startIcon,\n                         endIcon,\n                         onClick,\n                         className,\n                         ...restProps\n                       }: OutlineButtonProps) => {\n  const colorClasses = {\n    primary: 'bg-transparent border-2 border-button-outline-primary-text text-button-outline-primary-text',\n  }[color]\n\n  const iconColorClasses = {\n    primary: 'text-button-outline-primary-icon',\n  }[color]\n  return (\n    <button\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled || onClick === undefined}\n      className={clsx(\n        className, {\n          'text-disabled-text border-disabled-outline': disabled,\n          [clsx(colorClasses, 'hover:brightness-80')]: !disabled,\n        },\n        ButtonUtil.paddingMapping[size]\n      )}\n      {...restProps}\n    >\n      {startIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {startIcon}\n      </span>\n      )}\n      {children}\n      {endIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {endIcon}\n      </span>\n      )}\n    </button>\n  )\n}\n\n/**\n * A text that is a button that can have different sizes\n */\nconst TextButton = ({\n                      children,\n                      disabled = false,\n                      color = 'neutral',\n                      size = 'medium',\n                      startIcon,\n                      endIcon,\n                      onClick,\n                      className,\n                      ...restProps\n                    }: TextButtonProps) => {\n  const colorClasses = {\n    primary: 'bg-transparent text-button-text-primary-text',\n    negative: 'bg-transparent text-button-text-negative-text',\n    neutral: 'bg-transparent text-button-text-neutral-text',\n  }[color]\n\n  const iconColorClasses = {\n    primary: 'text-button-text-primary-icon',\n    negative: 'text-button-text-negative-icon',\n    neutral: 'text-button-text-neutral-icon',\n  }[color]\n  return (\n    <button\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled || onClick === undefined}\n      className={clsx(\n        className, {\n          'text-disabled-text': disabled,\n          [clsx(colorClasses, 'hover:bg-button-text-hover-background rounded-full')]: !disabled,\n        },\n        ButtonUtil.paddingMapping[size]\n      )}\n      {...restProps}\n    >\n      {startIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {startIcon}\n      </span>\n      )}\n      {children}\n      {endIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {endIcon}\n      </span>\n      )}\n    </button>\n  )\n}\n\n\n/**\n * A button for icons with a solid background and different sizes\n */\nconst IconButton = ({\n                      children,\n                      disabled = false,\n                      color = 'primary',\n                      size = 'medium',\n                      onClick,\n                      className,\n                      ...restProps\n                    }: IconButtonProps) => {\n  const colorClasses = {\n    primary: 'bg-button-solid-primary-background text-button-solid-primary-text',\n    secondary: 'bg-button-solid-secondary-background text-button-solid-secondary-text',\n    tertiary: 'bg-button-solid-tertiary-background text-button-solid-tertiary-text',\n    positive: 'bg-button-solid-positive-background text-button-solid-positive-text',\n    warning: 'bg-button-solid-warning-background text-button-solid-warning-text',\n    negative: 'bg-button-solid-negative-background text-button-solid-negative-text',\n    neutral: 'bg-button-solid-neutral-background text-button-solid-neutral-text',\n  }[color]\n\n  return (\n    <button\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled || onClick === undefined}\n      className={clsx(\n        className,\n        {\n          'text-disabled-text bg-disabled-background': disabled,\n          [clsx(colorClasses, 'hover:brightness-90')]: !disabled\n        },\n        ButtonUtil.iconPaddingMapping[size]\n      )}\n      {...restProps}\n    >\n      {children}\n    </button>\n  )\n}\n\nexport { SolidButton, OutlineButton, TextButton, IconButton }\n"],"mappings":";AAAA,SAAS,OAAO,aAAa,oBAAoB;;;ACCjD,SAAS,eAAe,YAAY,aAAAA,YAAW,YAAAC,iBAAgB;;;ACA/D,SAAS,aAAa,WAAW,gBAAgB;;;ACEjD,IAAM,YAAY,CAAC,MAAM,IAAI;AAU7B,IAAM,sBAAgD;AAAA,EACpD,IAAI;AAAA,EACJ,IAAI;AACN;AAKA,IAAM,mBAA6B;AAK5B,IAAM,eAAe;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AACF;;;AFoCI;AAvDG,IAAM,kBAAkB,cAAoC;AAAA,EACjE,UAAU,aAAa;AAAA,EACvB,aAAa,CAAC,MAAM;AACtB,CAAC;AAEM,IAAM,cAAc,MAAM,WAAW,eAAe;;;AGcpD,IAAM,iBAAiB,CAC5B,UACA,uBAA8D,CAAC,MAC/C;AAChB,QAAM,EAAE,UAAU,cAAc,aAAa,UAAU,IAAI;AAC3D,QAAM,EAAE,UAAU,iBAAiB,IAAI,YAAY;AACnD,QAAM,eAAe,gBAAgB;AACrC,MAAI,gBAA6B,SAAS,YAAY;AACtD,MAAI,aAAa,UAAU,YAAY,GAAG;AACxC,oBAAgB,EAAE,GAAG,eAAe,GAAG,UAAU,YAAY,EAAE;AAAA,EACjE;AACA,SAAO;AACT;;;ACxBO,IAAM,QAAQ,CAAC,OAAe,KAAa,kBAA2B,UAAoB;AAC/F,MAAI,MAAM,OAAO;AACf,QAAI,CAAC,iBAAiB;AACpB,cAAQ,KAAK,eAAe,GAAG,cAAc,KAAK,6DAA6D;AAAA,IACjH;AACA,WAAO,CAAC;AAAA,EACV;AACA,SAAO,MAAM,KAAK,EAAE,QAAQ,MAAM,QAAQ,EAAE,GAAG,CAAC,GAAG,UAAU,QAAQ,KAAK;AAC5E;;;ACzBA,OAAO,UAAU;AA+Gb,SAcI,OAAAC,MAdJ;AAzEJ,IAAM,iBAA8C;AAAA,EAClD,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT;AAEA,IAAM,qBAAkD;AAAA,EACtD,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT;AAEO,IAAM,aAAa;AAAA,EACxB;AAAA,EACA;AACF;AA0BA,IAAM,cAAc,CAAC;AAAA,EACE;AAAA,EACA,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAwB;AAC3C,QAAM,eAAe;AAAA,IACnB,SAAS;AAAA,IACT,WAAW;AAAA,IACX,UAAU;AAAA,IACV,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,EACX,EAAE,KAAK;AAEP,QAAM,mBAAmB;AAAA,IACvB,SAAS;AAAA,IACT,WAAW;AAAA,IACX,UAAU;AAAA,IACV,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,EACX,EAAE,KAAK;AAEP,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,WAAW,SAAY;AAAA,MAChC,UAAU,YAAY,YAAY;AAAA,MAClC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,UACE,6CAA6C;AAAA,UAC7C,CAAC,KAAK,cAAc,qBAAqB,CAAC,GAAG,CAAC;AAAA,QAChD;AAAA,QACA,WAAW,eAAe,IAAI;AAAA,MAChC;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,qBACC,gBAAAC;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,KAAK;AAAA,cACd,CAAC,gBAAgB,GAAG,CAAC;AAAA,cACrB,CAAC,oBAAoB,GAAG;AAAA,YAC1B,CAAC;AAAA,YAEF;AAAA;AAAA,QACH;AAAA,QAEC;AAAA,QACA,WACC,gBAAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,KAAK;AAAA,cACd,CAAC,gBAAgB,GAAG,CAAC;AAAA,cACrB,CAAC,oBAAoB,GAAG;AAAA,YAC1B,CAAC;AAAA,YAEF;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EAEF;AAEJ;;;AN9IA,OAAOC,WAAU;AA4DT,SAOE,OAAAC,MAPF,QAAAC,aAAA;AApDR,IAAM,+BAAwE;AAAA,EAC5E,IAAI;AAAA,IACF,MAAM;AAAA,IACN,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA,IAAI;AAAA,IACF,MAAM;AAAA,IACN,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AACF;AAmBO,IAAM,aAAa,CAAC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,YAAY;AACd,MAAmE;AAC5F,QAAM,cAAc,eAAe,8BAA8B,oBAAoB;AACrF,QAAM,OAAO,MAAM,GAAG,QAAQ,QAAQ;AACtC,QAAM,EAAE,MAAM,WAAW,SAAS,IAAI;AAEtC,QAAM,SAAS,CAAC,YAAoB;AAClC,cAAU,IAAI,OAAO;AACrB,aAAS,EAAE,MAAM,SAAS,WAAW,SAAS,CAAC;AAAA,EACjD;AAEA,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC,WAAWF,MAAK,gEAAgE,SAAS;AAAA,MAEzF;AAAA,wBAAAC,KAAC,SAAI,WAAU,0BACb,0BAAAC;AAAA,UAAC;AAAA;AAAA,YACC,UAAU,SAAS;AAAA,YACnB,SAAS,MAAM;AACb,qBAAO,OAAO,CAAC;AAAA,YACjB;AAAA,YACA,WAAU;AAAA,YAEV;AAAA,8BAAAD,KAAC,eAAY,MAAM,IAAG;AAAA,cACrB,YAAY;AAAA;AAAA;AAAA,QACf,GACF;AAAA,QACA,gBAAAA,KAAC,SAAI,WAAU,oDACZ,sBAAY,KAAK,IAAI,CAAC,OAAO,UAAU;AACtC,gBAAM,OAAO,UAAU,IAAI,KAAK;AAChC,iBACE,gBAAAA;AAAA,YAAC;AAAA;AAAA,cAEC,SAAS,MAAM,QAAQ,OAAO,KAAK;AAAA,cACnC,WAAWD;AAAA,gBAAK;AAAA,gBAAwB;AAAA,kBACpC,kCAAkC,UAAU,QAAQ;AAAA,kBACpD,kCAAkC,UAAU,QAAQ;AAAA,kBACpD,mCAAmC,CAAC;AAAA,gBACtC;AAAA,gBACA;AAAA,kBACE,kBAAkB;AAAA,kBAClB,sBAAsB,CAAC;AAAA,gBACzB;AAAA,cAAC;AAAA;AAAA,YAVE;AAAA,UAWP;AAAA,QAEJ,CAAC,GACH;AAAA,QACC,SAAS,YACR,gBAAAC,KAAC,SAAI,WAAU,wBACb,0BAAAC;AAAA,UAAC;AAAA;AAAA,YACC,SAAS,MAAM,OAAO,OAAO,CAAC;AAAA,YAC9B,WAAU;AAAA,YAET;AAAA,0BAAY;AAAA,cACb,gBAAAD,KAAC,gBAAa,MAAM,IAAG;AAAA;AAAA;AAAA,QACzB,GACF;AAAA,QAED,SAAS,YACR,gBAAAA,KAAC,SAAI,WAAU,wBACb,0BAAAC;AAAA,UAAC;AAAA;AAAA,YAEC,UAAU;AAAA,YACV,SAAS;AAAA,YACT,WAAU;AAAA,YAEV;AAAA,8BAAAD,KAAC,SAAM,MAAM,IAAG;AAAA,cACf,YAAY;AAAA;AAAA;AAAA,QACf,GACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":["useEffect","useState","jsx","jsx","clsx","jsx","jsxs"]}
+{"version":3,"sources":["../../../src/components/layout-and-navigation/StepperBar.tsx","../../../src/localization/LanguageProvider.tsx","../../../src/hooks/useLocalStorage.ts","../../../src/localization/util.ts","../../../src/localization/useTranslation.ts","../../../src/util/array.ts","../../../src/components/user-action/Button.tsx"],"sourcesContent":["import { Check, ChevronLeft, ChevronRight } from 'lucide-react'\nimport type { Language } from '../../localization/util'\nimport type { PropsForTranslation } from '../../localization/useTranslation'\nimport { useTranslation } from '../../localization/useTranslation'\nimport { range } from '../../util/array'\nimport { SolidButton } from '../user-action/Button'\nimport clsx from 'clsx'\n\ntype StepperBarTranslation = {\n  back: string,\n  next: string,\n  confirm: string,\n}\n\nconst defaultStepperBarTranslation: Record<Language, StepperBarTranslation> = {\n  en: {\n    back: 'Back',\n    next: 'Next Step',\n    confirm: 'Create'\n  },\n  de: {\n    back: 'Zurück',\n    next: 'Nächster Schritt',\n    confirm: 'Erstellen'\n  }\n}\n\nexport type StepperInformation = {\n  step: number,\n  lastStep: number,\n  seenSteps: Set<number>,\n}\n\nexport type StepperBarProps = {\n  stepper: StepperInformation,\n  onChange: (step: StepperInformation) => void,\n  onFinish: () => void,\n  showDots?: boolean,\n  className?: string,\n}\n\n/**\n * A Component for stepping\n */\nexport const StepperBar = ({\n                             overwriteTranslation,\n                             stepper,\n                             onChange,\n                             onFinish,\n                             showDots = true,\n                             className = '',\n                           }: PropsForTranslation<StepperBarTranslation, StepperBarProps>) => {\n  const translation = useTranslation(defaultStepperBarTranslation, overwriteTranslation)\n  const dots = range(0, stepper.lastStep)\n  const { step, seenSteps, lastStep } = stepper\n\n  const update = (newStep: number) => {\n    seenSteps.add(newStep)\n    onChange({ step: newStep, seenSteps, lastStep })\n  }\n\n  return (\n    <div\n      className={clsx('sticky row p-2 border-2 justify-between rounded-lg shadow-lg', className)}\n    >\n      <div className=\"flex-[2] justify-start\">\n        <SolidButton\n          disabled={step === 0}\n          onClick={() => {\n            update(step - 1)\n          }}\n          className=\"row gap-x-1 items-center justify-center\"\n        >\n          <ChevronLeft size={14}/>\n          {translation.back}\n        </SolidButton>\n      </div>\n      <div className=\"row flex-[5] gap-x-2 justify-center items-center\">\n        {showDots && dots.map((value, index) => {\n          const seen = seenSteps.has(index)\n          return (\n            <div\n              key={index}\n              onClick={() => seen && update(index)}\n              className={clsx('rounded-full w-4 h-4', {\n                  'bg-primary hover:brightness-75': index === step && seen,\n                  'bg-primary/40 hover:bg-primary': index !== step && seen,\n                  'bg-gray-200 outline-transparent': !seen,\n                },\n                {\n                  'cursor-pointer': seen,\n                  'cursor-not-allowed': !seen,\n                })}\n            />\n          )\n        })}\n      </div>\n      {step !== lastStep && (\n        <div className=\"flex-[2] justify-end\">\n          <SolidButton\n            onClick={() => update(step + 1)}\n            className=\"row gap-x-1 items-center justify-center\"\n          >\n            {translation.next}\n            <ChevronRight size={14}/>\n          </SolidButton>\n        </div>\n      )}\n      {step === lastStep && (\n        <div className=\"flex-[2] justify-end\">\n          <SolidButton\n            // TODO check form validity\n            disabled={false}\n            onClick={onFinish}\n            className=\"row gap-x-1 items-center justify-center\"\n          >\n            <Check size={14}/>\n            {translation.confirm}\n          </SolidButton>\n        </div>\n      )}\n    </div>\n  )\n}\n","import type { Dispatch, PropsWithChildren, SetStateAction } from 'react'\nimport { createContext, useContext, useEffect, useState } from 'react'\nimport { useLocalStorage } from '@/hooks/useLocalStorage'\nimport type { Language } from './util'\nimport { LanguageUtil } from './util'\n\nexport type LanguageContextValue = {\n  language: Language,\n  setLanguage: Dispatch<SetStateAction<Language>>,\n}\n\nexport const LanguageContext = createContext<LanguageContextValue>({\n  language: LanguageUtil.DEFAULT_LANGUAGE,\n  setLanguage: (v) => v\n})\n\nexport const useLanguage = () => useContext(LanguageContext)\n\nexport const useLocale = (overWriteLanguage?: Language) => {\n  const { language } = useLanguage()\n  const mapping: Record<Language, string> = {\n    en: 'en-US',\n    de: 'de-DE'\n  }\n  return mapping[overWriteLanguage ?? language]\n}\n\ntype LanguageProviderProps = {\n  initialLanguage?: Language,\n}\n\nexport const LanguageProvider = ({ initialLanguage, children }: PropsWithChildren<LanguageProviderProps>) => {\n  const [language, setLanguage] = useState<Language>(initialLanguage ?? LanguageUtil.DEFAULT_LANGUAGE)\n  const [storedLanguage, setStoredLanguage] = useLocalStorage<Language>('language', initialLanguage ?? LanguageUtil.DEFAULT_LANGUAGE)\n\n  useEffect(() => {\n    if (language !== initialLanguage && initialLanguage) {\n      console.warn('LanguageProvider initial state changed: Prefer using languageProvider\\'s setLanguage instead')\n      setLanguage(initialLanguage)\n    }\n  }, [initialLanguage]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  useEffect(() => {\n    // TODO set locale of html tag here as well\n    setStoredLanguage(language)\n  }, [language, setStoredLanguage])\n\n  useEffect(() => {\n    if (storedLanguage !== null) {\n      setLanguage(storedLanguage)\n      return\n    }\n\n    const LanguageToTestAgainst = Object.values(LanguageUtil.languages)\n\n    const matchingBrowserLanguage = window.navigator.languages\n      .map(language => LanguageToTestAgainst.find((test) => language === test || language.split('-')[0] === test))\n      .filter(entry => entry !== undefined)\n\n    if (matchingBrowserLanguage.length === 0) return\n\n    const firstMatch = matchingBrowserLanguage[0] as Language\n    setLanguage(firstMatch)\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return (\n    <LanguageContext.Provider value={{\n      language,\n      setLanguage\n    }}>\n      {children}\n    </LanguageContext.Provider>\n  )\n}","import type { Dispatch, SetStateAction } from 'react'\nimport { useCallback, useEffect, useState } from 'react'\nimport { LocalStorageService } from '../util/storage'\n\ntype SetValue<T> = Dispatch<SetStateAction<T>>\nexport const useLocalStorage = <T>(key: string, initValue: T): [T, SetValue<T>] => {\n  const get = useCallback((): T => {\n    if (typeof window === 'undefined') {\n      return initValue\n    }\n    const storageService = new LocalStorageService()\n    const value = storageService.get<T>(key)\n    return value || initValue\n  }, [initValue, key])\n\n  const [storedValue, setStoredValue] = useState<T>(get)\n\n  const setValue: SetValue<T> = useCallback(value => {\n    const newValue = value instanceof Function ? value(storedValue) : value\n    const storageService = new LocalStorageService()\n    storageService.set(key, value)\n\n    setStoredValue(newValue)\n  }, [storedValue, setStoredValue, key])\n\n  useEffect(() => {\n    setStoredValue(get())\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return [storedValue, setValue]\n}","/**\n * The supported languages\n */\nconst languages = ['en', 'de'] as const\n\n/**\n * The supported languages\n */\nexport type Language = typeof languages[number]\n\n/**\n * The supported languages' names in their respective language\n */\nconst languagesLocalNames: Record<Language, string> = {\n  en: 'English',\n  de: 'Deutsch',\n}\n\n/**\n * The default language\n */\nconst DEFAULT_LANGUAGE: Language = 'en'\n\n/**\n * A constant definition for holding data regarding languages\n */\nexport const LanguageUtil = {\n  languages,\n  DEFAULT_LANGUAGE,\n  languagesLocalNames,\n}","import { useLanguage } from './LanguageProvider'\nimport type { Language } from './util'\n\nexport type Translation<T> = Record<Language, T>\n\ntype OverwriteTranslationType<Translation extends Record<string, unknown>> = {\n  language?: Language,\n  translation?: Partial<Record<Language, Partial<Translation>>>,\n}\n\n/**\n * Adds the `language` prop to the component props.\n *\n * @param Translation the type of the translation object\n *\n * @param Props the type of the component props, defaults to `Record<string, never>`,\n *              if you don't expect any other props other than `language` and get an\n *              error when using your component (because it uses `forwardRef` etc.)\n *              you can try out `Record<string, unknown>`, this might resolve your\n *              problem as `SomeType & never` is still `never` but `SomeType & unknown`\n *              is `SomeType` which means that adding back props (like `ref` etc.)\n *              works properly\n */\nexport type PropsForTranslation<\n  Translation extends Record<string, unknown>,\n  Props = Record<string, never>\n> = Props & {\n  overwriteTranslation?: OverwriteTranslationType<Translation>,\n};\n\nexport const useTranslation = <Translation extends Record<string, unknown>>(\n  defaults: Record<Language, Translation>,\n  translationOverwrite: OverwriteTranslationType<Translation> = {}\n): Translation => {\n  const { language: languageProp, translation: overwrite } = translationOverwrite\n  const { language: inferredLanguage } = useLanguage()\n  const usedLanguage = languageProp ?? inferredLanguage\n  let defaultValues: Translation = defaults[usedLanguage]\n  if (overwrite && overwrite[usedLanguage]) {\n    defaultValues = { ...defaultValues, ...overwrite[usedLanguage] }\n  }\n  return defaultValues\n}\n","export const equalSizeGroups = <T>(array: T[], groupSize: number): T[][] => {\n  if (groupSize <= 0) {\n    console.warn(`group size should be greater than 0: groupSize = ${groupSize}`)\n    return [[...array]]\n  }\n\n  const groups = []\n  for (let i = 0; i < array.length; i += groupSize) {\n    groups.push(array.slice(i, Math.min(i + groupSize, array.length)))\n  }\n  return groups\n}\n\n/**\n * @param start\n * @param end inclusive\n * @param allowEmptyRange Whether the range can be defined empty via end < start\n */\nexport const range = (start: number, end: number, allowEmptyRange: boolean = false): number[] => {\n  if (end < start) {\n    if (!allowEmptyRange) {\n      console.warn(`range: end (${end}) < start (${start}) should be allowed explicitly, set allowEmptyRange to true`)\n    }\n    return []\n  }\n  return Array.from({ length: end - start + 1 }, (_, index) => index + start)\n}\n\n/** Finds the closest match\n * @param list The list of all possible matches\n * @param firstCloser Return whether item1 is closer than item2\n */\nexport const closestMatch = <T>(list: T[], firstCloser: (item1: T, item2: T) => boolean) => {\n  return list.reduce((item1, item2) => {\n    return firstCloser(item1, item2) ? item1 : item2\n  })\n}\n\n/**\n * returns the item in middle of a list and its neighbours before and after\n * e.g. [1,2,3,4,5,6] for item = 1 would return [5,6,1,2,3]\n */\nexport const getNeighbours = <T>(list: T[], item: T, neighbourDistance: number = 2) => {\n  const index = list.indexOf(item)\n  const totalItems = neighbourDistance * 2 + 1\n  if (list.length < totalItems) {\n    console.warn('List is to short')\n    return list\n  }\n\n  if (index === -1) {\n    console.error('item not found in list')\n    return list.splice(0, totalItems)\n  }\n\n  let start = index - neighbourDistance\n  if (start < 0) {\n    start += list.length\n  }\n  const end = (index + neighbourDistance + 1) % list.length\n\n  const result: T[] = []\n  let ignoreOnce = list.length === totalItems\n  for (let i = start; i !== end || ignoreOnce; i = (i + 1) % list.length) {\n    result.push(list[i]!)\n    if (end === i && ignoreOnce) {\n      ignoreOnce = false\n    }\n  }\n  return result\n}\n\nexport const createLoopingListWithIndex = <T>(list: T[], startIndex: number = 0, length: number = 0, forwards: boolean = true) => {\n  if (length < 0) {\n    console.warn(`createLoopingList: length must be >= 0, given ${length}`)\n  } else if (length === 0) {\n    length = list.length\n  }\n\n  const returnList: [number, T][] = []\n\n  if (forwards) {\n    for (let i = startIndex; returnList.length < length; i = (i + 1) % list.length) {\n      returnList.push([i, list[i]!])\n    }\n  } else {\n    for (let i = startIndex; returnList.length < length; i = i === 0 ? i = list.length - 1 : i - 1) {\n      returnList.push([i, list[i]!])\n    }\n  }\n\n  return returnList\n}\n\nexport const createLoopingList = <T>(list: T[], startIndex: number = 0, length: number = 0, forwards: boolean = true) => {\n  return createLoopingListWithIndex(list, startIndex, length, forwards).map(([_, item]) => item)\n}\n\nexport const ArrayUtil = {\n  unique: <T>(list: T[]): T[] => {\n    const seen = new Set<T>()\n    return list.filter((item) => {\n      if (seen.has(item)) {\n        return false\n      }\n      seen.add(item)\n      return true\n    })\n  },\n\n  difference: <T>(list: T[], removeList: T[]): T[] => {\n    const remove = new Set<T>(removeList)\n    return list.filter((item) => !remove.has(item))\n  }\n}\n","import type { ButtonHTMLAttributes, PropsWithChildren, ReactNode } from 'react'\nimport clsx from 'clsx'\n\n\nexport const ButtonColorUtil = {\n  solid: ['primary', 'secondary', 'tertiary', 'positive', 'warning', 'negative', 'neutral'] as const,\n  text: ['primary', 'negative', 'neutral'] as const,\n  outline: ['primary'] as const,\n}\n\n\n/**\n * The allowed colors for the SolidButton and IconButton\n */\nexport type SolidButtonColor = typeof ButtonColorUtil.solid[number]\n/**\n * The allowed colors for the OutlineButton\n */\nexport type OutlineButtonColor = typeof ButtonColorUtil.outline[number]\n/**\n * The allowed colors for the TextButton\n */\nexport type TextButtonColor = typeof ButtonColorUtil.text[number]\n\n/**\n * The different sizes for a button\n */\ntype ButtonSizes = 'small' | 'medium' | 'large'\n\n/**\n * The shard properties between all button types\n */\nexport type ButtonProps = PropsWithChildren<{\n  /**\n   * @default 'medium'\n   */\n  size?: ButtonSizes,\n}> & ButtonHTMLAttributes<Element>\n\nconst paddingMapping: Record<ButtonSizes, string> = {\n  small: 'btn-sm',\n  medium: 'btn-md',\n  large: 'btn-lg'\n}\n\nconst iconPaddingMapping: Record<ButtonSizes, string> = {\n  small: 'icon-btn-sm',\n  medium: 'icon-btn-md',\n  large: 'icon-btn-lg'\n}\n\nexport const ButtonUtil = {\n  paddingMapping,\n  iconPaddingMapping\n}\n\ntype ButtonWithIconsProps = ButtonProps & {\n  startIcon?: ReactNode,\n  endIcon?: ReactNode,\n}\n\nexport type SolidButtonProps = ButtonWithIconsProps & {\n  color?: SolidButtonColor,\n}\n\nexport type OutlineButtonProps = ButtonWithIconsProps & {\n  color?: OutlineButtonColor,\n}\n\nexport type TextButtonProps = ButtonWithIconsProps & {\n  color?: TextButtonColor,\n}\n\nexport type IconButtonProps = ButtonProps & {\n  color?: SolidButtonColor,\n}\n\n/**\n * A button with a solid background and different sizes\n */\nconst SolidButton = ({\n                       children,\n                       disabled = false,\n                       color = 'primary',\n                       size = 'medium',\n                       startIcon,\n                       endIcon,\n                       onClick,\n                       className,\n                       ...restProps\n                     }: SolidButtonProps) => {\n  const colorClasses = {\n    primary: 'bg-button-solid-primary-background text-button-solid-primary-text',\n    secondary: 'bg-button-solid-secondary-background text-button-solid-secondary-text',\n    tertiary: 'bg-button-solid-tertiary-background text-button-solid-tertiary-text',\n    positive: 'bg-button-solid-positive-background text-button-solid-positive-text',\n    warning: 'bg-button-solid-warning-background text-button-solid-warning-text',\n    negative: 'bg-button-solid-negative-background text-button-solid-negative-text',\n    neutral: 'bg-button-solid-neutral-background text-button-solid-neutral-text',\n  }[color]\n\n  const iconColorClasses = {\n    primary: 'text-button-solid-primary-icon',\n    secondary: 'text-button-solid-secondary-icon',\n    tertiary: 'text-button-solid-tertiary-icon',\n    positive: 'text-button-solid-positive-icon',\n    warning: 'text-button-solid-warning-icon',\n    negative: 'text-button-solid-negative-icon',\n    neutral: 'text-button-solid-neutral-icon',\n  }[color]\n\n  return (\n    <button\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled || onClick === undefined}\n      className={clsx(\n        {\n          'text-disabled-text bg-disabled-background cursor-not-allowed': disabled,\n          [clsx(colorClasses, 'hover:brightness-90')]: !disabled\n        },\n        ButtonUtil.paddingMapping[size],\n        className\n      )}\n      {...restProps}\n    >\n      {startIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {startIcon}\n      </span>\n      )}\n      {children}\n      {endIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {endIcon}\n      </span>\n      )}\n    </button>\n  )\n}\n\n/**\n * A button with an outline border and different sizes\n */\nconst OutlineButton = ({\n                         children,\n                         disabled = false,\n                         color = 'primary',\n                         size = 'medium',\n                         startIcon,\n                         endIcon,\n                         onClick,\n                         className,\n                         ...restProps\n                       }: OutlineButtonProps) => {\n  const colorClasses = {\n    primary: 'bg-transparent border-2 border-button-outline-primary-text text-button-outline-primary-text',\n  }[color]\n\n  const iconColorClasses = {\n    primary: 'text-button-outline-primary-icon',\n  }[color]\n  return (\n    <button\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled || onClick === undefined}\n      className={clsx(\n        {\n          'text-disabled-text border-disabled-outline cursor-not-allowed': disabled,\n          [clsx(colorClasses, 'hover:brightness-80')]: !disabled,\n        },\n        ButtonUtil.paddingMapping[size],\n        className\n      )}\n      {...restProps}\n    >\n      {startIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {startIcon}\n      </span>\n      )}\n      {children}\n      {endIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {endIcon}\n      </span>\n      )}\n    </button>\n  )\n}\n\n/**\n * A text that is a button that can have different sizes\n */\nconst TextButton = ({\n                      children,\n                      disabled = false,\n                      color = 'neutral',\n                      size = 'medium',\n                      startIcon,\n                      endIcon,\n                      onClick,\n                      className,\n                      ...restProps\n                    }: TextButtonProps) => {\n  const colorClasses = {\n    primary: 'bg-transparent text-button-text-primary-text',\n    negative: 'bg-transparent text-button-text-negative-text',\n    neutral: 'bg-transparent text-button-text-neutral-text',\n  }[color]\n\n  const iconColorClasses = {\n    primary: 'text-button-text-primary-icon',\n    negative: 'text-button-text-negative-icon',\n    neutral: 'text-button-text-neutral-icon',\n  }[color]\n  return (\n    <button\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled || onClick === undefined}\n      className={clsx(\n        {\n          'text-disabled-text cursor-not-allowed': disabled,\n          [clsx(colorClasses, 'hover:bg-button-text-hover-background rounded-full')]: !disabled,\n        },\n        ButtonUtil.paddingMapping[size],\n        className\n      )}\n      {...restProps}\n    >\n      {startIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {startIcon}\n      </span>\n      )}\n      {children}\n      {endIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {endIcon}\n      </span>\n      )}\n    </button>\n  )\n}\n\n\n/**\n * A button for icons with a solid background and different sizes\n */\nconst IconButton = ({\n                      children,\n                      disabled = false,\n                      color = 'primary',\n                      size = 'medium',\n                      onClick,\n                      className,\n                      ...restProps\n                    }: IconButtonProps) => {\n  const colorClasses = {\n    primary: 'bg-button-solid-primary-background text-button-solid-primary-text',\n    secondary: 'bg-button-solid-secondary-background text-button-solid-secondary-text',\n    tertiary: 'bg-button-solid-tertiary-background text-button-solid-tertiary-text',\n    positive: 'bg-button-solid-positive-background text-button-solid-positive-text',\n    warning: 'bg-button-solid-warning-background text-button-solid-warning-text',\n    negative: 'bg-button-solid-negative-background text-button-solid-negative-text',\n    neutral: 'bg-button-solid-neutral-background text-button-solid-neutral-text',\n  }[color]\n\n  return (\n    <button\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled || onClick === undefined}\n      className={clsx(\n        {\n          'text-disabled-text bg-disabled-background cursor-not-allowed': disabled,\n          [clsx(colorClasses, 'hover:brightness-90')]: !disabled\n        },\n        ButtonUtil.iconPaddingMapping[size],\n        className\n      )}\n      {...restProps}\n    >\n      {children}\n    </button>\n  )\n}\n\nexport { SolidButton, OutlineButton, TextButton, IconButton }\n"],"mappings":"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","names":["useEffect","useState","jsx","jsx","clsx","jsx","jsxs"]}

package/dist/components/layout-and-navigation/Table.cjs

@@ -267,12 +267,12 @@ var TextButton = ({
       onClick: disabled ? void 0 : onClick,
       disabled: disabled || onClick === void 0,
       className: (0, import_clsx4.default)(
-        className,
         {
-          "text-disabled-text": disabled,
+          "text-disabled-text cursor-not-allowed": disabled,
           [(0, import_clsx4.default)(colorClasses, "hover:bg-button-text-hover-background rounded-full")]: !disabled
         },
-        ButtonUtil.paddingMapping[size]
+        ButtonUtil.paddingMapping[size],
+        className
       ),
       ...restProps,
       children: [

package/dist/components/layout-and-navigation/Table.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/layout-and-navigation/Table.tsx","../../../src/util/noop.ts","../../../src/components/user-action/Checkbox.tsx","../../../src/components/user-action/Label.tsx","../../../src/components/layout-and-navigation/Pagination.tsx","../../../src/localization/LanguageProvider.tsx","../../../src/hooks/useLocalStorage.ts","../../../src/localization/util.ts","../../../src/localization/useTranslation.ts","../../../src/components/user-action/Button.tsx"],"sourcesContent":["import type { ReactElement } from 'react'\nimport { useEffect, useRef, useState } from 'react'\nimport { Scrollbars } from 'react-custom-scrollbars-2'\nimport { noop } from '../../util/noop'\nimport { Checkbox } from '../user-action/Checkbox'\nimport { Pagination } from './Pagination'\nimport clsx from 'clsx'\nimport type { TextButtonProps } from '../user-action/Button'\nimport { TextButton } from '../user-action/Button'\nimport { ChevronDown, ChevronsUpDown, ChevronUp } from 'lucide-react'\n\nexport type TableStatePagination = {\n  currentPage: number,\n  entriesPerPage: number,\n}\nexport const defaultTableStatePagination = {\n  currentPage: 0,\n  entriesPerPage: 5\n}\n\nexport type TableStateSelection<T> = {\n  currentSelection: T[],\n  hasSelectedAll: boolean,\n  hasSelectedSome: boolean,\n  hasSelectedNone: boolean,\n}\n\nexport const defaultTableStateSelection = {\n  currentSelection: [],\n  hasSelectedAll: false,\n  hasSelectedSome: false,\n  hasSelectedNone: true\n}\n\nexport type TableState = {\n  pagination?: TableStatePagination,\n  selection?: {\n    /**\n     * The mapped ids of the dataType\n     */\n    currentSelection: string[],\n    hasSelectedAll: boolean,\n    hasSelectedSome: boolean,\n    hasSelectedNone: boolean,\n  },\n}\n\ntype IdentifierMapping<T> = (dataObject: T) => string\n\nexport const isDataObjectSelected = <T, >(tableState: TableState, dataObject: T, identifierMapping: IdentifierMapping<T>) => {\n  if (!tableState.selection) {\n    return false\n  }\n\n  return !!tableState.selection.currentSelection.find(value => value.localeCompare(identifierMapping(dataObject)) === 0)\n}\n\nexport const pageForItem = <T, >(data: T[], item: T, entriesPerPage: number, identifierMapping: IdentifierMapping<T>) => {\n  const index = data.findIndex(value => identifierMapping(value) === identifierMapping(item))\n  if (index !== -1) {\n    return Math.floor(index / entriesPerPage)\n  }\n  console.warn(\"item doesn't exist on data\", item, data)\n  return 0\n}\n\nexport const updatePagination = (pagination: TableStatePagination, dataLength: number): TableStatePagination => ({\n  ...pagination,\n  currentPage: Math.min(Math.max(Math.ceil(dataLength / pagination.entriesPerPage) - 1, 0), pagination.currentPage)\n})\n\nexport const addElementToTable = <T, >(tableState: TableState, data: T[], dataObject: T, identifierMapping: IdentifierMapping<T>) => {\n  return {\n    ...tableState,\n    pagination: tableState.pagination ? {\n      ...tableState.pagination,\n      currentPage: pageForItem(data, dataObject, tableState.pagination.entriesPerPage, identifierMapping)\n    } : undefined,\n    selection: tableState.selection ? {\n      ...tableState.selection,\n      hasSelectedAll: false,\n      hasSelectedSome: tableState.selection.hasSelectedAll || tableState.selection.hasSelectedSome\n    } : undefined\n  }\n}\n\n/**\n * data length before delete\n */\nexport const removeFromTableSelection = <T, >(tableState: TableState, deletedObjects: T[], dataLength: number, identifierMapping: IdentifierMapping<T>): TableState => {\n  if (!tableState.selection) {\n    return tableState\n  }\n\n  const deletedObjectIds = deletedObjects.map(identifierMapping)\n  const elementsBefore = tableState.selection.currentSelection.length\n  const currentSelection = tableState.selection.currentSelection.filter((value) => !deletedObjectIds.includes(value))\n  dataLength -= elementsBefore - currentSelection.length\n\n  return {\n    ...tableState,\n    selection: {\n      currentSelection,\n      hasSelectedAll: currentSelection.length === dataLength && dataLength !== 0,\n      hasSelectedSome: currentSelection.length > 0 && currentSelection.length !== dataLength,\n      hasSelectedNone: currentSelection.length === 0,\n    },\n    pagination: tableState.pagination ? updatePagination(tableState.pagination, dataLength) : undefined\n  }\n}\n\nexport const changeTableSelectionSingle = <T, >(tableState: TableState, dataObject: T, dataLength: number, identifierMapping: IdentifierMapping<T>) => {\n  if (!tableState.selection) {\n    return tableState\n  }\n\n  const hasSelectedObject = isDataObjectSelected(tableState, dataObject, identifierMapping)\n  let currentSelection = [...tableState.selection.currentSelection, identifierMapping(dataObject)] // case !hasSelectedObject\n  if (hasSelectedObject) {\n    currentSelection = tableState.selection.currentSelection.filter(value => value.localeCompare(identifierMapping(dataObject)) !== 0)\n  }\n\n  return {\n    ...tableState,\n    selection: {\n      currentSelection,\n      hasSelectedAll: currentSelection.length === dataLength,\n      hasSelectedSome: currentSelection.length > 0 && currentSelection.length !== dataLength,\n      hasSelectedNone: currentSelection.length === 0,\n    }\n  }\n}\n\nconst changeTableSelectionAll = <T, >(tableState: TableState, data: T[], identifierMapping: IdentifierMapping<T>) => {\n  if (!tableState.selection) {\n    return tableState\n  }\n\n  if (data.length === 0) {\n    return {\n      ...tableState,\n      selection: {\n        currentSelection: [],\n        hasSelectedAll: false,\n        hasSelectedSome: false,\n        hasSelectedNone: true\n      }\n    }\n  }\n\n  const hasSelectedAll = !(tableState.selection.hasSelectedSome || tableState.selection.hasSelectedAll)\n  return {\n    ...tableState,\n    selection: {\n      currentSelection: hasSelectedAll ? data.map(identifierMapping) : [],\n      hasSelectedAll,\n      hasSelectedSome: false,\n      hasSelectedNone: !hasSelectedAll\n    }\n  }\n}\n\nexport type TableSortingType = 'ascending' | 'descending'\nexport type TableSortingFunctionType<T> = (t1: T, t2: T) => number\n\nexport type TableProps<T> = {\n  data: T[],\n  /**\n   * When using selection or pagination\n   */\n  stateManagement?: [TableState, (tableState: TableState) => void],\n  identifierMapping: IdentifierMapping<T>,\n  /**\n   * Only the cell itself no boilerplate <tr> or <th> required\n   */\n  header?: ReactElement[],\n  /**\n   * Only the cells of the row no boilerplate <tr> or <td> required\n   */\n  rowMappingToCells: (dataObject: T) => ReactElement[],\n  sorting?: [TableSortingFunctionType<T>, TableSortingType],\n  /**\n   * Always go to the page of this element\n   */\n  focusElement?: T,\n  className?: string,\n}\n\n/*  Possible extension for better customization\n    * Map each element to the displayed row\n    * make sure to wrap it in the <tr> and <td> you require\n    rowMappingToHTMLRow?: (dataObject: T) => ReactElement\n */\n\n/**\n * A Basic stateless reusable table\n * The state must be handled and saved with the updateTableState method\n */\nexport const Table = <T, >({\n                             data,\n                             stateManagement = [{}, noop],\n                             identifierMapping,\n                             header,\n                             rowMappingToCells,\n                             sorting,\n                             focusElement,\n                             className\n                           }: TableProps<T>) => {\n  const sortedData = [...data]\n  if (sorting) {\n    const [sortingFunction, sortingType] = sorting\n    sortedData.sort((a, b) => sortingFunction(a, b) * (sortingType === 'ascending' ? 1 : -1))\n  }\n  let currentPage = 0\n  let pageCount = 1\n  let entriesPerPage = 5\n  const [tableState, updateTableState] = stateManagement\n\n  let shownElements = sortedData\n\n  if (tableState?.pagination) {\n    if (tableState.pagination.entriesPerPage < 1) {\n      console.error('tableState.pagination.entriesPerPage must be >= 1', tableState.pagination.entriesPerPage)\n    }\n    entriesPerPage = Math.max(1, tableState.pagination.entriesPerPage)\n    pageCount = Math.ceil(sortedData.length / entriesPerPage)\n\n    if (tableState.pagination.currentPage < 0 || (tableState.pagination.currentPage >= pageCount && pageCount !== 0)) {\n      console.error('tableState.pagination.currentPage < 0 || (tableState.pagination.currentPage >= pageCount && pageCount !== 0) must be fullfilled',\n        [`pageCount: ${pageCount}`, `tableState.pagination.currentPage: ${tableState.pagination.currentPage}`])\n    } else {\n      currentPage = tableState.pagination.currentPage\n    }\n\n    if (focusElement) {\n      currentPage = pageForItem(sortedData, focusElement, entriesPerPage, identifierMapping)\n    }\n\n    shownElements = sortedData.slice(currentPage * entriesPerPage, Math.min(sortedData.length, (currentPage + 1) * entriesPerPage))\n  } else {\n    currentPage = 0\n  }\n\n  const headerRow = 'border-b-2 border-gray-300'\n  const headerPaddingHead = 'pb-2'\n  const headerPaddingBody = 'pt-2'\n  const cellPadding = 'py-1 px-2'\n\n  const [scrollbarsAutoHeightMin, setScrollbarsAutoHeightMin] = useState(0)\n  const tableRef = useRef<HTMLTableElement>(null)\n\n  const calculateHeight = () => {\n    if (tableRef.current) {\n      const tableHeight = tableRef.current.offsetHeight\n      const offset = 25\n      setScrollbarsAutoHeightMin(tableHeight + offset)\n    }\n  }\n\n  useEffect(() => {\n    calculateHeight()\n\n    // New function to unbind properly\n    const handleResize = () => {\n      calculateHeight()\n    }\n\n    window.addEventListener('resize', handleResize)\n\n    return () => {\n      window.removeEventListener('resize', handleResize)\n    }\n  }, [data, currentPage])\n\n  return (\n    <div className={clsx('col gap-y-4 overflow-hidden', className)}>\n      <div>\n        <Scrollbars autoHeight autoHeightMin={scrollbarsAutoHeightMin}>\n          <table ref={tableRef} className=\"w-full mb-[12px]\">\n            <thead>\n            <tr className={headerRow}>\n              {header && tableState.selection && (\n                <th className={headerPaddingHead}>\n                  <Checkbox\n                    checked={tableState.selection.hasSelectedSome ? 'indeterminate' : tableState.selection.hasSelectedAll}\n                    onChange={() => updateTableState(changeTableSelectionAll(tableState, data, identifierMapping))}\n                  />\n                </th>\n              )}\n              {header && header.map((value, index) => (\n                <th key={`tableHeader${index}`} className={headerPaddingHead}>\n                  <div className=\"row justify-start px-2\">\n                    {value}\n                  </div>\n                </th>\n              ))}\n            </tr>\n            </thead>\n            <tbody>\n            {shownElements.map((value, rowIndex) => (\n              <tr key={identifierMapping(value)}>\n                {tableState.selection && (\n                  <td className={clsx(cellPadding, { [headerPaddingBody]: rowIndex === 0 })}>\n                    <Checkbox\n                      checked={isDataObjectSelected(tableState, value, identifierMapping)}\n                      onChange={() => {\n                        updateTableState(changeTableSelectionSingle(tableState, value, data.length, identifierMapping))\n                      }}\n                    />\n                  </td>\n                )}\n                {rowMappingToCells(value).map((value1, index) => (\n                  <td key={index}\n                      className={clsx(cellPadding, { [headerPaddingBody]: rowIndex === 0 })}>\n                    {value1}\n                  </td>\n                ))}\n              </tr>\n            ))}\n            </tbody>\n          </table>\n        </Scrollbars>\n      </div>\n      <div className=\"row justify-center\">\n        {tableState.pagination && (\n          <Pagination page={currentPage} numberOfPages={pageCount} onPageChanged={page => updateTableState({\n            ...tableState,\n            pagination: { entriesPerPage, currentPage: page }\n          })}/>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport type SortButtonProps = Omit<TextButtonProps, 'onClick'> & {\n  ascending?: TableSortingType,\n  onClick: (newTableSorting: TableSortingType) => void,\n}\n\n/**\n * A Extension of the normal button that displays the sorting state right of the content\n */\nexport const SortButton = ({\n                             children,\n                             ascending,\n                             color,\n                             onClick,\n                             ...buttonProps\n                           }: SortButtonProps) => {\n  return (\n    <TextButton\n      color={color}\n      onClick={() => onClick(ascending === 'descending' ? 'ascending' : 'descending')}\n      {...buttonProps}\n    >\n      <div className=\"row gap-x-2\">\n        {children}\n        {ascending === 'ascending' ? <ChevronUp/> : (!ascending ? <ChevronsUpDown/> : <ChevronDown/>)}\n      </div>\n    </TextButton>\n  )\n}\n\n","export const noop = () => undefined\n","import { useState } from 'react'\nimport type { CheckedState } from '@radix-ui/react-checkbox'\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox'\nimport { Check, Minus } from 'lucide-react'\nimport clsx from 'clsx'\nimport type { LabelProps } from './Label'\nimport { Label } from './Label'\n\ntype CheckBoxSize = 'small' | 'medium' | 'large'\n\nconst checkboxSizeMapping: Record<CheckBoxSize, string> = {\n  small: 'size-4',\n  medium: 'size-6',\n  large: 'size-8',\n}\n\nconst checkboxIconSizeMapping: Record<CheckBoxSize, string> = {\n  small: 'size-3',\n  medium: 'size-5',\n  large: 'size-7',\n}\n\ntype CheckboxProps = {\n  /** used for the label's `for` attribute */\n  id?: string,\n  label?: Omit<LabelProps, 'id'>,\n  /**\n   * @default false\n   */\n  checked: CheckedState,\n  disabled?: boolean,\n  onChange?: (checked: boolean) => void,\n  onChangeTristate?: (checked: CheckedState) => void,\n  size?: CheckBoxSize,\n  className?: string,\n  containerClassName?: string,\n}\n\n/**\n * A Tristate checkbox\n *\n * The state is managed by the parent\n */\nconst Checkbox = ({\n                    id,\n                    label,\n                    checked,\n                    disabled,\n                    onChange,\n                    onChangeTristate,\n                    size = 'medium',\n                    className = '',\n                    containerClassName\n                  }: CheckboxProps) => {\n  const usedSizeClass = checkboxSizeMapping[size]\n  const innerIconSize = checkboxIconSizeMapping[size]\n\n  const propagateChange = (checked: CheckedState) => {\n    if (onChangeTristate) {\n      onChangeTristate(checked)\n    }\n    if (onChange) {\n      onChange(checked === 'indeterminate' ? false : checked)\n    }\n  }\n\n  const changeValue = () => {\n    const newValue = checked === 'indeterminate' ? false : !checked\n    propagateChange(newValue)\n  }\n\n  return (\n    <div className={clsx('row justify-center items-center', containerClassName)}>\n      <CheckboxPrimitive.Root\n        onCheckedChange={propagateChange}\n        checked={checked}\n        disabled={disabled}\n        id={id}\n        className={clsx(usedSizeClass, `items-center border-2 rounded outline-none focus:border-primary`, {\n          'text-disabled-text border-disabled-text': disabled,\n          'border-on-background': !disabled,\n          'bg-primary/30 border-primary text-primary': checked === true || checked === 'indeterminate',\n          'hover:border-gray-400 focus:hover:border-primary': !checked\n        }, className)}\n      >\n        <CheckboxPrimitive.Indicator>\n          {checked === true && <Check className={innerIconSize}/>}\n          {checked === 'indeterminate' && <Minus className={innerIconSize}/>}\n        </CheckboxPrimitive.Indicator>\n      </CheckboxPrimitive.Root>\n      {label && (\n        <Label {...label} className={clsx('cursor-pointer', label.className)} htmlFor={id}\n               onClick={changeValue}/>\n      )}\n    </div>\n  )\n}\n\ntype CheckboxUncontrolledProps = Omit<CheckboxProps, 'value' | 'checked'> & {\n  /**\n   * @default false\n   */\n  defaultValue?: CheckedState,\n}\n\n/**\n * A Tristate checkbox\n *\n * The state is managed by this component\n */\nconst CheckboxUncontrolled = ({\n                                onChange,\n                                onChangeTristate,\n                                defaultValue = false,\n                                ...props\n                              }: CheckboxUncontrolledProps) => {\n  const [checked, setChecked] = useState(defaultValue)\n\n  const handleChange = (checked: CheckedState) => {\n    if (onChangeTristate) {\n      onChangeTristate(checked)\n    }\n    if (onChange) {\n      onChange(checked === 'indeterminate' ? false : checked)\n    }\n    setChecked(checked)\n  }\n\n  return (\n    <Checkbox\n      {...props}\n      checked={checked}\n      onChangeTristate={handleChange}\n    />\n  )\n}\n\nexport {\n  CheckboxProps,\n  CheckboxUncontrolled,\n  Checkbox,\n}\n","import type { LabelHTMLAttributes } from 'react'\nimport clsx from 'clsx'\n\nexport type LabelType = 'labelSmall' | 'labelMedium' | 'labelBig'\n\nconst styleMapping: Record<LabelType, string> = {\n  labelSmall: 'textstyle-label-sm',\n  labelMedium: 'textstyle-label-md',\n  labelBig: 'textstyle-label-lg',\n}\n\nexport type LabelProps = {\n  /** The text for the label */\n  name?: string,\n  /** The styling for the label */\n  labelType?: LabelType,\n} & LabelHTMLAttributes<HTMLLabelElement>\n\n/**\n * A Label component\n */\nexport const Label = ({\n                        children,\n                        name,\n                        labelType = 'labelSmall',\n                        className,\n                        ...props\n                      }: LabelProps) => {\n  return (\n    <label {...props} className={clsx(styleMapping[labelType], className)}>\n      {children ? children : name}\n    </label>\n  )\n}\n","import { ChevronFirst, ChevronLast, ChevronLeft, ChevronRight } from 'lucide-react'\nimport clsx from 'clsx'\nimport type { PropsForTranslation } from '../../localization/useTranslation'\nimport { useTranslation } from '../../localization/useTranslation'\nimport type { Language } from '../../localization/util'\n\ntype PaginationTranslation = {\n  of: string,\n}\nconst defaultPaginationTranslations: Record<Language, PaginationTranslation> = {\n  en: {\n    of: 'of'\n  },\n  de: {\n    of: 'von'\n  }\n}\n\nexport type PaginationProps = {\n  page: number, // starts with 0\n  numberOfPages: number,\n  onPageChanged: (page: number) => void,\n}\n\n/**\n * A Component showing the pagination allowing first, before, next and last page navigation\n */\nexport const Pagination = ({\n                             overwriteTranslation,\n                             page,\n                             numberOfPages,\n                             onPageChanged\n                           }: PropsForTranslation<PaginationTranslation, PaginationProps>) => {\n  const translation = useTranslation(defaultPaginationTranslations, overwriteTranslation)\n\n  const changePage = (page: number) => {\n    onPageChanged(page)\n  }\n\n  const noPages = numberOfPages === 0\n  const onFirstPage = page === 0 && !noPages\n  const onLastPage = page === numberOfPages - 1\n\n  return (\n    <div className={clsx('row', { 'opacity-30': noPages })}>\n      <button onClick={() => changePage(0)} disabled={onFirstPage}>\n        <ChevronFirst className={clsx({ 'opacity-30': onFirstPage })}/>\n      </button>\n      <button onClick={() => changePage(page - 1)} disabled={onFirstPage}>\n        <ChevronLeft className={clsx({ 'opacity-30': onFirstPage })}/>\n      </button>\n      <div className=\"min-w-[80px] justify-center mx-2\">\n        <span className=\"select-none text-right flex-1\">{noPages ? 0 : page + 1}</span>\n        <span className=\"select-none mx-2\">{translation.of}</span>\n        <span className=\"select-none text-left flex-1\">{numberOfPages}</span>\n      </div>\n      <button onClick={() => changePage(page + 1)} disabled={onLastPage || noPages}>\n        <ChevronRight className={clsx({ 'opacity-30': onLastPage })}/>\n      </button>\n      <button onClick={() => changePage(numberOfPages - 1)} disabled={onLastPage || noPages}>\n        <ChevronLast className={clsx({ 'opacity-30': onLastPage })}/>\n      </button>\n    </div>\n  )\n}\n","import type { Dispatch, PropsWithChildren, SetStateAction } from 'react'\nimport { createContext, useContext, useEffect, useState } from 'react'\nimport { useLocalStorage } from '@/hooks/useLocalStorage'\nimport type { Language } from './util'\nimport { LanguageUtil } from './util'\n\nexport type LanguageContextValue = {\n  language: Language,\n  setLanguage: Dispatch<SetStateAction<Language>>,\n}\n\nexport const LanguageContext = createContext<LanguageContextValue>({\n  language: LanguageUtil.DEFAULT_LANGUAGE,\n  setLanguage: (v) => v\n})\n\nexport const useLanguage = () => useContext(LanguageContext)\n\nexport const useLocale = (overWriteLanguage?: Language) => {\n  const { language } = useLanguage()\n  const mapping: Record<Language, string> = {\n    en: 'en-US',\n    de: 'de-DE'\n  }\n  return mapping[overWriteLanguage ?? language]\n}\n\ntype LanguageProviderProps = {\n  initialLanguage?: Language,\n}\n\nexport const LanguageProvider = ({ initialLanguage, children }: PropsWithChildren<LanguageProviderProps>) => {\n  const [language, setLanguage] = useState<Language>(initialLanguage ?? LanguageUtil.DEFAULT_LANGUAGE)\n  const [storedLanguage, setStoredLanguage] = useLocalStorage<Language>('language', initialLanguage ?? LanguageUtil.DEFAULT_LANGUAGE)\n\n  useEffect(() => {\n    if (language !== initialLanguage && initialLanguage) {\n      console.warn('LanguageProvider initial state changed: Prefer using languageProvider\\'s setLanguage instead')\n      setLanguage(initialLanguage)\n    }\n  }, [initialLanguage]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  useEffect(() => {\n    // TODO set locale of html tag here as well\n    setStoredLanguage(language)\n  }, [language, setStoredLanguage])\n\n  useEffect(() => {\n    if (storedLanguage !== null) {\n      setLanguage(storedLanguage)\n      return\n    }\n\n    const LanguageToTestAgainst = Object.values(LanguageUtil.languages)\n\n    const matchingBrowserLanguage = window.navigator.languages\n      .map(language => LanguageToTestAgainst.find((test) => language === test || language.split('-')[0] === test))\n      .filter(entry => entry !== undefined)\n\n    if (matchingBrowserLanguage.length === 0) return\n\n    const firstMatch = matchingBrowserLanguage[0] as Language\n    setLanguage(firstMatch)\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return (\n    <LanguageContext.Provider value={{\n      language,\n      setLanguage\n    }}>\n      {children}\n    </LanguageContext.Provider>\n  )\n}","import type { Dispatch, SetStateAction } from 'react'\nimport { useCallback, useEffect, useState } from 'react'\nimport { LocalStorageService } from '../util/storage'\n\ntype SetValue<T> = Dispatch<SetStateAction<T>>\nexport const useLocalStorage = <T>(key: string, initValue: T): [T, SetValue<T>] => {\n  const get = useCallback((): T => {\n    if (typeof window === 'undefined') {\n      return initValue\n    }\n    const storageService = new LocalStorageService()\n    const value = storageService.get<T>(key)\n    return value || initValue\n  }, [initValue, key])\n\n  const [storedValue, setStoredValue] = useState<T>(get)\n\n  const setValue: SetValue<T> = useCallback(value => {\n    const newValue = value instanceof Function ? value(storedValue) : value\n    const storageService = new LocalStorageService()\n    storageService.set(key, value)\n\n    setStoredValue(newValue)\n  }, [storedValue, setStoredValue, key])\n\n  useEffect(() => {\n    setStoredValue(get())\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return [storedValue, setValue]\n}","/**\n * The supported languages\n */\nconst languages = ['en', 'de'] as const\n\n/**\n * The supported languages\n */\nexport type Language = typeof languages[number]\n\n/**\n * The supported languages' names in their respective language\n */\nconst languagesLocalNames: Record<Language, string> = {\n  en: 'English',\n  de: 'Deutsch',\n}\n\n/**\n * The default language\n */\nconst DEFAULT_LANGUAGE: Language = 'en'\n\n/**\n * A constant definition for holding data regarding languages\n */\nexport const LanguageUtil = {\n  languages,\n  DEFAULT_LANGUAGE,\n  languagesLocalNames,\n}","import { useLanguage } from './LanguageProvider'\nimport type { Language } from './util'\n\nexport type Translation<T> = Record<Language, T>\n\ntype OverwriteTranslationType<Translation extends Record<string, unknown>> = {\n  language?: Language,\n  translation?: Partial<Record<Language, Partial<Translation>>>,\n}\n\n/**\n * Adds the `language` prop to the component props.\n *\n * @param Translation the type of the translation object\n *\n * @param Props the type of the component props, defaults to `Record<string, never>`,\n *              if you don't expect any other props other than `language` and get an\n *              error when using your component (because it uses `forwardRef` etc.)\n *              you can try out `Record<string, unknown>`, this might resolve your\n *              problem as `SomeType & never` is still `never` but `SomeType & unknown`\n *              is `SomeType` which means that adding back props (like `ref` etc.)\n *              works properly\n */\nexport type PropsForTranslation<\n  Translation extends Record<string, unknown>,\n  Props = Record<string, never>\n> = Props & {\n  overwriteTranslation?: OverwriteTranslationType<Translation>,\n};\n\nexport const useTranslation = <Translation extends Record<string, unknown>>(\n  defaults: Record<Language, Translation>,\n  translationOverwrite: OverwriteTranslationType<Translation> = {}\n): Translation => {\n  const { language: languageProp, translation: overwrite } = translationOverwrite\n  const { language: inferredLanguage } = useLanguage()\n  const usedLanguage = languageProp ?? inferredLanguage\n  let defaultValues: Translation = defaults[usedLanguage]\n  if (overwrite && overwrite[usedLanguage]) {\n    defaultValues = { ...defaultValues, ...overwrite[usedLanguage] }\n  }\n  return defaultValues\n}\n","import type { ButtonHTMLAttributes, PropsWithChildren, ReactNode } from 'react'\nimport clsx from 'clsx'\n\n\nexport const ButtonColorUtil = {\n  solid: ['primary', 'secondary', 'tertiary', 'positive', 'warning', 'negative', 'neutral'] as const,\n  text: ['primary', 'negative', 'neutral'] as const,\n  outline: ['primary'] as const,\n}\n\n\n/**\n * The allowed colors for the SolidButton and IconButton\n */\nexport type SolidButtonColor = typeof ButtonColorUtil.solid[number]\n/**\n * The allowed colors for the OutlineButton\n */\nexport type OutlineButtonColor = typeof ButtonColorUtil.outline[number]\n/**\n * The allowed colors for the TextButton\n */\nexport type TextButtonColor = typeof ButtonColorUtil.text[number]\n\n/**\n * The different sizes for a button\n */\ntype ButtonSizes = 'small' | 'medium' | 'large'\n\n/**\n * The shard properties between all button types\n */\nexport type ButtonProps = PropsWithChildren<{\n  /**\n   * @default 'medium'\n   */\n  size?: ButtonSizes,\n}> & ButtonHTMLAttributes<Element>\n\nconst paddingMapping: Record<ButtonSizes, string> = {\n  small: 'btn-sm',\n  medium: 'btn-md',\n  large: 'btn-lg'\n}\n\nconst iconPaddingMapping: Record<ButtonSizes, string> = {\n  small: 'icon-btn-sm',\n  medium: 'icon-btn-md',\n  large: 'icon-btn-lg'\n}\n\nexport const ButtonUtil = {\n  paddingMapping,\n  iconPaddingMapping\n}\n\ntype ButtonWithIconsProps = ButtonProps & {\n  startIcon?: ReactNode,\n  endIcon?: ReactNode,\n}\n\nexport type SolidButtonProps = ButtonWithIconsProps & {\n  color?: SolidButtonColor,\n}\n\nexport type OutlineButtonProps = ButtonWithIconsProps & {\n  color?: OutlineButtonColor,\n}\n\nexport type TextButtonProps = ButtonWithIconsProps & {\n  color?: TextButtonColor,\n}\n\nexport type IconButtonProps = ButtonProps & {\n  color?: SolidButtonColor,\n}\n\n/**\n * A button with a solid background and different sizes\n */\nconst SolidButton = ({\n                       children,\n                       disabled = false,\n                       color = 'primary',\n                       size = 'medium',\n                       startIcon,\n                       endIcon,\n                       onClick,\n                       className,\n                       ...restProps\n                     }: SolidButtonProps) => {\n  const colorClasses = {\n    primary: 'bg-button-solid-primary-background text-button-solid-primary-text',\n    secondary: 'bg-button-solid-secondary-background text-button-solid-secondary-text',\n    tertiary: 'bg-button-solid-tertiary-background text-button-solid-tertiary-text',\n    positive: 'bg-button-solid-positive-background text-button-solid-positive-text',\n    warning: 'bg-button-solid-warning-background text-button-solid-warning-text',\n    negative: 'bg-button-solid-negative-background text-button-solid-negative-text',\n    neutral: 'bg-button-solid-neutral-background text-button-solid-neutral-text',\n  }[color]\n\n  const iconColorClasses = {\n    primary: 'text-button-solid-primary-icon',\n    secondary: 'text-button-solid-secondary-icon',\n    tertiary: 'text-button-solid-tertiary-icon',\n    positive: 'text-button-solid-positive-icon',\n    warning: 'text-button-solid-warning-icon',\n    negative: 'text-button-solid-negative-icon',\n    neutral: 'text-button-solid-neutral-icon',\n  }[color]\n\n  return (\n    <button\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled || onClick === undefined}\n      className={clsx(\n        className,\n        {\n          'text-disabled-text bg-disabled-background': disabled,\n          [clsx(colorClasses, 'hover:brightness-90')]: !disabled\n        },\n        ButtonUtil.paddingMapping[size]\n      )}\n      {...restProps}\n    >\n      {startIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {startIcon}\n      </span>\n      )}\n      {children}\n      {endIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {endIcon}\n      </span>\n      )}\n    </button>\n  )\n}\n\n/**\n * A button with an outline border and different sizes\n */\nconst OutlineButton = ({\n                         children,\n                         disabled = false,\n                         color = 'primary',\n                         size = 'medium',\n                         startIcon,\n                         endIcon,\n                         onClick,\n                         className,\n                         ...restProps\n                       }: OutlineButtonProps) => {\n  const colorClasses = {\n    primary: 'bg-transparent border-2 border-button-outline-primary-text text-button-outline-primary-text',\n  }[color]\n\n  const iconColorClasses = {\n    primary: 'text-button-outline-primary-icon',\n  }[color]\n  return (\n    <button\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled || onClick === undefined}\n      className={clsx(\n        className, {\n          'text-disabled-text border-disabled-outline': disabled,\n          [clsx(colorClasses, 'hover:brightness-80')]: !disabled,\n        },\n        ButtonUtil.paddingMapping[size]\n      )}\n      {...restProps}\n    >\n      {startIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {startIcon}\n      </span>\n      )}\n      {children}\n      {endIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {endIcon}\n      </span>\n      )}\n    </button>\n  )\n}\n\n/**\n * A text that is a button that can have different sizes\n */\nconst TextButton = ({\n                      children,\n                      disabled = false,\n                      color = 'neutral',\n                      size = 'medium',\n                      startIcon,\n                      endIcon,\n                      onClick,\n                      className,\n                      ...restProps\n                    }: TextButtonProps) => {\n  const colorClasses = {\n    primary: 'bg-transparent text-button-text-primary-text',\n    negative: 'bg-transparent text-button-text-negative-text',\n    neutral: 'bg-transparent text-button-text-neutral-text',\n  }[color]\n\n  const iconColorClasses = {\n    primary: 'text-button-text-primary-icon',\n    negative: 'text-button-text-negative-icon',\n    neutral: 'text-button-text-neutral-icon',\n  }[color]\n  return (\n    <button\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled || onClick === undefined}\n      className={clsx(\n        className, {\n          'text-disabled-text': disabled,\n          [clsx(colorClasses, 'hover:bg-button-text-hover-background rounded-full')]: !disabled,\n        },\n        ButtonUtil.paddingMapping[size]\n      )}\n      {...restProps}\n    >\n      {startIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {startIcon}\n      </span>\n      )}\n      {children}\n      {endIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {endIcon}\n      </span>\n      )}\n    </button>\n  )\n}\n\n\n/**\n * A button for icons with a solid background and different sizes\n */\nconst IconButton = ({\n                      children,\n                      disabled = false,\n                      color = 'primary',\n                      size = 'medium',\n                      onClick,\n                      className,\n                      ...restProps\n                    }: IconButtonProps) => {\n  const colorClasses = {\n    primary: 'bg-button-solid-primary-background text-button-solid-primary-text',\n    secondary: 'bg-button-solid-secondary-background text-button-solid-secondary-text',\n    tertiary: 'bg-button-solid-tertiary-background text-button-solid-tertiary-text',\n    positive: 'bg-button-solid-positive-background text-button-solid-positive-text',\n    warning: 'bg-button-solid-warning-background text-button-solid-warning-text',\n    negative: 'bg-button-solid-negative-background text-button-solid-negative-text',\n    neutral: 'bg-button-solid-neutral-background text-button-solid-neutral-text',\n  }[color]\n\n  return (\n    <button\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled || onClick === undefined}\n      className={clsx(\n        className,\n        {\n          'text-disabled-text bg-disabled-background': disabled,\n          [clsx(colorClasses, 'hover:brightness-90')]: !disabled\n        },\n        ButtonUtil.iconPaddingMapping[size]\n      )}\n      {...restProps}\n    >\n      {children}\n    </button>\n  )\n}\n\nexport { SolidButton, OutlineButton, TextButton, IconButton }\n"],"mappings":"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","names":["import_react","import_clsx","clsx","import_jsx_runtime","checked","clsx","import_lucide_react","import_clsx","import_react","import_react","import_jsx_runtime","import_jsx_runtime","page","clsx","import_clsx","import_clsx","import_jsx_runtime","clsx","import_lucide_react","import_jsx_runtime","clsx"]}
+{"version":3,"sources":["../../../src/components/layout-and-navigation/Table.tsx","../../../src/util/noop.ts","../../../src/components/user-action/Checkbox.tsx","../../../src/components/user-action/Label.tsx","../../../src/components/layout-and-navigation/Pagination.tsx","../../../src/localization/LanguageProvider.tsx","../../../src/hooks/useLocalStorage.ts","../../../src/localization/util.ts","../../../src/localization/useTranslation.ts","../../../src/components/user-action/Button.tsx"],"sourcesContent":["import type { ReactElement } from 'react'\nimport { useEffect, useRef, useState } from 'react'\nimport { Scrollbars } from 'react-custom-scrollbars-2'\nimport { noop } from '../../util/noop'\nimport { Checkbox } from '../user-action/Checkbox'\nimport { Pagination } from './Pagination'\nimport clsx from 'clsx'\nimport type { TextButtonProps } from '../user-action/Button'\nimport { TextButton } from '../user-action/Button'\nimport { ChevronDown, ChevronsUpDown, ChevronUp } from 'lucide-react'\n\nexport type TableStatePagination = {\n  currentPage: number,\n  entriesPerPage: number,\n}\nexport const defaultTableStatePagination = {\n  currentPage: 0,\n  entriesPerPage: 5\n}\n\nexport type TableStateSelection<T> = {\n  currentSelection: T[],\n  hasSelectedAll: boolean,\n  hasSelectedSome: boolean,\n  hasSelectedNone: boolean,\n}\n\nexport const defaultTableStateSelection = {\n  currentSelection: [],\n  hasSelectedAll: false,\n  hasSelectedSome: false,\n  hasSelectedNone: true\n}\n\nexport type TableState = {\n  pagination?: TableStatePagination,\n  selection?: {\n    /**\n     * The mapped ids of the dataType\n     */\n    currentSelection: string[],\n    hasSelectedAll: boolean,\n    hasSelectedSome: boolean,\n    hasSelectedNone: boolean,\n  },\n}\n\ntype IdentifierMapping<T> = (dataObject: T) => string\n\nexport const isDataObjectSelected = <T, >(tableState: TableState, dataObject: T, identifierMapping: IdentifierMapping<T>) => {\n  if (!tableState.selection) {\n    return false\n  }\n\n  return !!tableState.selection.currentSelection.find(value => value.localeCompare(identifierMapping(dataObject)) === 0)\n}\n\nexport const pageForItem = <T, >(data: T[], item: T, entriesPerPage: number, identifierMapping: IdentifierMapping<T>) => {\n  const index = data.findIndex(value => identifierMapping(value) === identifierMapping(item))\n  if (index !== -1) {\n    return Math.floor(index / entriesPerPage)\n  }\n  console.warn(\"item doesn't exist on data\", item, data)\n  return 0\n}\n\nexport const updatePagination = (pagination: TableStatePagination, dataLength: number): TableStatePagination => ({\n  ...pagination,\n  currentPage: Math.min(Math.max(Math.ceil(dataLength / pagination.entriesPerPage) - 1, 0), pagination.currentPage)\n})\n\nexport const addElementToTable = <T, >(tableState: TableState, data: T[], dataObject: T, identifierMapping: IdentifierMapping<T>) => {\n  return {\n    ...tableState,\n    pagination: tableState.pagination ? {\n      ...tableState.pagination,\n      currentPage: pageForItem(data, dataObject, tableState.pagination.entriesPerPage, identifierMapping)\n    } : undefined,\n    selection: tableState.selection ? {\n      ...tableState.selection,\n      hasSelectedAll: false,\n      hasSelectedSome: tableState.selection.hasSelectedAll || tableState.selection.hasSelectedSome\n    } : undefined\n  }\n}\n\n/**\n * data length before delete\n */\nexport const removeFromTableSelection = <T, >(tableState: TableState, deletedObjects: T[], dataLength: number, identifierMapping: IdentifierMapping<T>): TableState => {\n  if (!tableState.selection) {\n    return tableState\n  }\n\n  const deletedObjectIds = deletedObjects.map(identifierMapping)\n  const elementsBefore = tableState.selection.currentSelection.length\n  const currentSelection = tableState.selection.currentSelection.filter((value) => !deletedObjectIds.includes(value))\n  dataLength -= elementsBefore - currentSelection.length\n\n  return {\n    ...tableState,\n    selection: {\n      currentSelection,\n      hasSelectedAll: currentSelection.length === dataLength && dataLength !== 0,\n      hasSelectedSome: currentSelection.length > 0 && currentSelection.length !== dataLength,\n      hasSelectedNone: currentSelection.length === 0,\n    },\n    pagination: tableState.pagination ? updatePagination(tableState.pagination, dataLength) : undefined\n  }\n}\n\nexport const changeTableSelectionSingle = <T, >(tableState: TableState, dataObject: T, dataLength: number, identifierMapping: IdentifierMapping<T>) => {\n  if (!tableState.selection) {\n    return tableState\n  }\n\n  const hasSelectedObject = isDataObjectSelected(tableState, dataObject, identifierMapping)\n  let currentSelection = [...tableState.selection.currentSelection, identifierMapping(dataObject)] // case !hasSelectedObject\n  if (hasSelectedObject) {\n    currentSelection = tableState.selection.currentSelection.filter(value => value.localeCompare(identifierMapping(dataObject)) !== 0)\n  }\n\n  return {\n    ...tableState,\n    selection: {\n      currentSelection,\n      hasSelectedAll: currentSelection.length === dataLength,\n      hasSelectedSome: currentSelection.length > 0 && currentSelection.length !== dataLength,\n      hasSelectedNone: currentSelection.length === 0,\n    }\n  }\n}\n\nconst changeTableSelectionAll = <T, >(tableState: TableState, data: T[], identifierMapping: IdentifierMapping<T>) => {\n  if (!tableState.selection) {\n    return tableState\n  }\n\n  if (data.length === 0) {\n    return {\n      ...tableState,\n      selection: {\n        currentSelection: [],\n        hasSelectedAll: false,\n        hasSelectedSome: false,\n        hasSelectedNone: true\n      }\n    }\n  }\n\n  const hasSelectedAll = !(tableState.selection.hasSelectedSome || tableState.selection.hasSelectedAll)\n  return {\n    ...tableState,\n    selection: {\n      currentSelection: hasSelectedAll ? data.map(identifierMapping) : [],\n      hasSelectedAll,\n      hasSelectedSome: false,\n      hasSelectedNone: !hasSelectedAll\n    }\n  }\n}\n\nexport type TableSortingType = 'ascending' | 'descending'\nexport type TableSortingFunctionType<T> = (t1: T, t2: T) => number\n\nexport type TableProps<T> = {\n  data: T[],\n  /**\n   * When using selection or pagination\n   */\n  stateManagement?: [TableState, (tableState: TableState) => void],\n  identifierMapping: IdentifierMapping<T>,\n  /**\n   * Only the cell itself no boilerplate <tr> or <th> required\n   */\n  header?: ReactElement[],\n  /**\n   * Only the cells of the row no boilerplate <tr> or <td> required\n   */\n  rowMappingToCells: (dataObject: T) => ReactElement[],\n  sorting?: [TableSortingFunctionType<T>, TableSortingType],\n  /**\n   * Always go to the page of this element\n   */\n  focusElement?: T,\n  className?: string,\n}\n\n/*  Possible extension for better customization\n    * Map each element to the displayed row\n    * make sure to wrap it in the <tr> and <td> you require\n    rowMappingToHTMLRow?: (dataObject: T) => ReactElement\n */\n\n/**\n * A Basic stateless reusable table\n * The state must be handled and saved with the updateTableState method\n */\nexport const Table = <T, >({\n                             data,\n                             stateManagement = [{}, noop],\n                             identifierMapping,\n                             header,\n                             rowMappingToCells,\n                             sorting,\n                             focusElement,\n                             className\n                           }: TableProps<T>) => {\n  const sortedData = [...data]\n  if (sorting) {\n    const [sortingFunction, sortingType] = sorting\n    sortedData.sort((a, b) => sortingFunction(a, b) * (sortingType === 'ascending' ? 1 : -1))\n  }\n  let currentPage = 0\n  let pageCount = 1\n  let entriesPerPage = 5\n  const [tableState, updateTableState] = stateManagement\n\n  let shownElements = sortedData\n\n  if (tableState?.pagination) {\n    if (tableState.pagination.entriesPerPage < 1) {\n      console.error('tableState.pagination.entriesPerPage must be >= 1', tableState.pagination.entriesPerPage)\n    }\n    entriesPerPage = Math.max(1, tableState.pagination.entriesPerPage)\n    pageCount = Math.ceil(sortedData.length / entriesPerPage)\n\n    if (tableState.pagination.currentPage < 0 || (tableState.pagination.currentPage >= pageCount && pageCount !== 0)) {\n      console.error('tableState.pagination.currentPage < 0 || (tableState.pagination.currentPage >= pageCount && pageCount !== 0) must be fullfilled',\n        [`pageCount: ${pageCount}`, `tableState.pagination.currentPage: ${tableState.pagination.currentPage}`])\n    } else {\n      currentPage = tableState.pagination.currentPage\n    }\n\n    if (focusElement) {\n      currentPage = pageForItem(sortedData, focusElement, entriesPerPage, identifierMapping)\n    }\n\n    shownElements = sortedData.slice(currentPage * entriesPerPage, Math.min(sortedData.length, (currentPage + 1) * entriesPerPage))\n  } else {\n    currentPage = 0\n  }\n\n  const headerRow = 'border-b-2 border-gray-300'\n  const headerPaddingHead = 'pb-2'\n  const headerPaddingBody = 'pt-2'\n  const cellPadding = 'py-1 px-2'\n\n  const [scrollbarsAutoHeightMin, setScrollbarsAutoHeightMin] = useState(0)\n  const tableRef = useRef<HTMLTableElement>(null)\n\n  const calculateHeight = () => {\n    if (tableRef.current) {\n      const tableHeight = tableRef.current.offsetHeight\n      const offset = 25\n      setScrollbarsAutoHeightMin(tableHeight + offset)\n    }\n  }\n\n  useEffect(() => {\n    calculateHeight()\n\n    // New function to unbind properly\n    const handleResize = () => {\n      calculateHeight()\n    }\n\n    window.addEventListener('resize', handleResize)\n\n    return () => {\n      window.removeEventListener('resize', handleResize)\n    }\n  }, [data, currentPage])\n\n  return (\n    <div className={clsx('col gap-y-4 overflow-hidden', className)}>\n      <div>\n        <Scrollbars autoHeight autoHeightMin={scrollbarsAutoHeightMin}>\n          <table ref={tableRef} className=\"w-full mb-[12px]\">\n            <thead>\n            <tr className={headerRow}>\n              {header && tableState.selection && (\n                <th className={headerPaddingHead}>\n                  <Checkbox\n                    checked={tableState.selection.hasSelectedSome ? 'indeterminate' : tableState.selection.hasSelectedAll}\n                    onChange={() => updateTableState(changeTableSelectionAll(tableState, data, identifierMapping))}\n                  />\n                </th>\n              )}\n              {header && header.map((value, index) => (\n                <th key={`tableHeader${index}`} className={headerPaddingHead}>\n                  <div className=\"row justify-start px-2\">\n                    {value}\n                  </div>\n                </th>\n              ))}\n            </tr>\n            </thead>\n            <tbody>\n            {shownElements.map((value, rowIndex) => (\n              <tr key={identifierMapping(value)}>\n                {tableState.selection && (\n                  <td className={clsx(cellPadding, { [headerPaddingBody]: rowIndex === 0 })}>\n                    <Checkbox\n                      checked={isDataObjectSelected(tableState, value, identifierMapping)}\n                      onChange={() => {\n                        updateTableState(changeTableSelectionSingle(tableState, value, data.length, identifierMapping))\n                      }}\n                    />\n                  </td>\n                )}\n                {rowMappingToCells(value).map((value1, index) => (\n                  <td key={index}\n                      className={clsx(cellPadding, { [headerPaddingBody]: rowIndex === 0 })}>\n                    {value1}\n                  </td>\n                ))}\n              </tr>\n            ))}\n            </tbody>\n          </table>\n        </Scrollbars>\n      </div>\n      <div className=\"row justify-center\">\n        {tableState.pagination && (\n          <Pagination page={currentPage} numberOfPages={pageCount} onPageChanged={page => updateTableState({\n            ...tableState,\n            pagination: { entriesPerPage, currentPage: page }\n          })}/>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport type SortButtonProps = Omit<TextButtonProps, 'onClick'> & {\n  ascending?: TableSortingType,\n  onClick: (newTableSorting: TableSortingType) => void,\n}\n\n/**\n * A Extension of the normal button that displays the sorting state right of the content\n */\nexport const SortButton = ({\n                             children,\n                             ascending,\n                             color,\n                             onClick,\n                             ...buttonProps\n                           }: SortButtonProps) => {\n  return (\n    <TextButton\n      color={color}\n      onClick={() => onClick(ascending === 'descending' ? 'ascending' : 'descending')}\n      {...buttonProps}\n    >\n      <div className=\"row gap-x-2\">\n        {children}\n        {ascending === 'ascending' ? <ChevronUp/> : (!ascending ? <ChevronsUpDown/> : <ChevronDown/>)}\n      </div>\n    </TextButton>\n  )\n}\n\n","export const noop = () => undefined\n","import { useState } from 'react'\nimport type { CheckedState } from '@radix-ui/react-checkbox'\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox'\nimport { Check, Minus } from 'lucide-react'\nimport clsx from 'clsx'\nimport type { LabelProps } from './Label'\nimport { Label } from './Label'\n\ntype CheckBoxSize = 'small' | 'medium' | 'large'\n\nconst checkboxSizeMapping: Record<CheckBoxSize, string> = {\n  small: 'size-4',\n  medium: 'size-6',\n  large: 'size-8',\n}\n\nconst checkboxIconSizeMapping: Record<CheckBoxSize, string> = {\n  small: 'size-3',\n  medium: 'size-5',\n  large: 'size-7',\n}\n\ntype CheckboxProps = {\n  /** used for the label's `for` attribute */\n  id?: string,\n  label?: Omit<LabelProps, 'id'>,\n  /**\n   * @default false\n   */\n  checked: CheckedState,\n  disabled?: boolean,\n  onChange?: (checked: boolean) => void,\n  onChangeTristate?: (checked: CheckedState) => void,\n  size?: CheckBoxSize,\n  className?: string,\n  containerClassName?: string,\n}\n\n/**\n * A Tristate checkbox\n *\n * The state is managed by the parent\n */\nconst Checkbox = ({\n                    id,\n                    label,\n                    checked,\n                    disabled,\n                    onChange,\n                    onChangeTristate,\n                    size = 'medium',\n                    className = '',\n                    containerClassName\n                  }: CheckboxProps) => {\n  const usedSizeClass = checkboxSizeMapping[size]\n  const innerIconSize = checkboxIconSizeMapping[size]\n\n  const propagateChange = (checked: CheckedState) => {\n    if (onChangeTristate) {\n      onChangeTristate(checked)\n    }\n    if (onChange) {\n      onChange(checked === 'indeterminate' ? false : checked)\n    }\n  }\n\n  const changeValue = () => {\n    const newValue = checked === 'indeterminate' ? false : !checked\n    propagateChange(newValue)\n  }\n\n  return (\n    <div className={clsx('row justify-center items-center', containerClassName)}>\n      <CheckboxPrimitive.Root\n        onCheckedChange={propagateChange}\n        checked={checked}\n        disabled={disabled}\n        id={id}\n        className={clsx(usedSizeClass, `items-center border-2 rounded outline-none focus:border-primary`, {\n          'text-disabled-text border-disabled-text': disabled,\n          'border-on-background': !disabled,\n          'bg-primary/30 border-primary text-primary': checked === true || checked === 'indeterminate',\n          'hover:border-gray-400 focus:hover:border-primary': !checked\n        }, className)}\n      >\n        <CheckboxPrimitive.Indicator>\n          {checked === true && <Check className={innerIconSize}/>}\n          {checked === 'indeterminate' && <Minus className={innerIconSize}/>}\n        </CheckboxPrimitive.Indicator>\n      </CheckboxPrimitive.Root>\n      {label && (\n        <Label {...label} className={clsx('cursor-pointer', label.className)} htmlFor={id}\n               onClick={changeValue}/>\n      )}\n    </div>\n  )\n}\n\ntype CheckboxUncontrolledProps = Omit<CheckboxProps, 'value' | 'checked'> & {\n  /**\n   * @default false\n   */\n  defaultValue?: CheckedState,\n}\n\n/**\n * A Tristate checkbox\n *\n * The state is managed by this component\n */\nconst CheckboxUncontrolled = ({\n                                onChange,\n                                onChangeTristate,\n                                defaultValue = false,\n                                ...props\n                              }: CheckboxUncontrolledProps) => {\n  const [checked, setChecked] = useState(defaultValue)\n\n  const handleChange = (checked: CheckedState) => {\n    if (onChangeTristate) {\n      onChangeTristate(checked)\n    }\n    if (onChange) {\n      onChange(checked === 'indeterminate' ? false : checked)\n    }\n    setChecked(checked)\n  }\n\n  return (\n    <Checkbox\n      {...props}\n      checked={checked}\n      onChangeTristate={handleChange}\n    />\n  )\n}\n\nexport {\n  CheckboxProps,\n  CheckboxUncontrolled,\n  Checkbox,\n}\n","import type { LabelHTMLAttributes } from 'react'\nimport clsx from 'clsx'\n\nexport type LabelType = 'labelSmall' | 'labelMedium' | 'labelBig'\n\nconst styleMapping: Record<LabelType, string> = {\n  labelSmall: 'textstyle-label-sm',\n  labelMedium: 'textstyle-label-md',\n  labelBig: 'textstyle-label-lg',\n}\n\nexport type LabelProps = {\n  /** The text for the label */\n  name?: string,\n  /** The styling for the label */\n  labelType?: LabelType,\n} & LabelHTMLAttributes<HTMLLabelElement>\n\n/**\n * A Label component\n */\nexport const Label = ({\n                        children,\n                        name,\n                        labelType = 'labelSmall',\n                        className,\n                        ...props\n                      }: LabelProps) => {\n  return (\n    <label {...props} className={clsx(styleMapping[labelType], className)}>\n      {children ? children : name}\n    </label>\n  )\n}\n","import { ChevronFirst, ChevronLast, ChevronLeft, ChevronRight } from 'lucide-react'\nimport clsx from 'clsx'\nimport type { PropsForTranslation } from '../../localization/useTranslation'\nimport { useTranslation } from '../../localization/useTranslation'\nimport type { Language } from '../../localization/util'\n\ntype PaginationTranslation = {\n  of: string,\n}\nconst defaultPaginationTranslations: Record<Language, PaginationTranslation> = {\n  en: {\n    of: 'of'\n  },\n  de: {\n    of: 'von'\n  }\n}\n\nexport type PaginationProps = {\n  page: number, // starts with 0\n  numberOfPages: number,\n  onPageChanged: (page: number) => void,\n}\n\n/**\n * A Component showing the pagination allowing first, before, next and last page navigation\n */\nexport const Pagination = ({\n                             overwriteTranslation,\n                             page,\n                             numberOfPages,\n                             onPageChanged\n                           }: PropsForTranslation<PaginationTranslation, PaginationProps>) => {\n  const translation = useTranslation(defaultPaginationTranslations, overwriteTranslation)\n\n  const changePage = (page: number) => {\n    onPageChanged(page)\n  }\n\n  const noPages = numberOfPages === 0\n  const onFirstPage = page === 0 && !noPages\n  const onLastPage = page === numberOfPages - 1\n\n  return (\n    <div className={clsx('row', { 'opacity-30': noPages })}>\n      <button onClick={() => changePage(0)} disabled={onFirstPage}>\n        <ChevronFirst className={clsx({ 'opacity-30': onFirstPage })}/>\n      </button>\n      <button onClick={() => changePage(page - 1)} disabled={onFirstPage}>\n        <ChevronLeft className={clsx({ 'opacity-30': onFirstPage })}/>\n      </button>\n      <div className=\"min-w-[80px] justify-center mx-2\">\n        <span className=\"select-none text-right flex-1\">{noPages ? 0 : page + 1}</span>\n        <span className=\"select-none mx-2\">{translation.of}</span>\n        <span className=\"select-none text-left flex-1\">{numberOfPages}</span>\n      </div>\n      <button onClick={() => changePage(page + 1)} disabled={onLastPage || noPages}>\n        <ChevronRight className={clsx({ 'opacity-30': onLastPage })}/>\n      </button>\n      <button onClick={() => changePage(numberOfPages - 1)} disabled={onLastPage || noPages}>\n        <ChevronLast className={clsx({ 'opacity-30': onLastPage })}/>\n      </button>\n    </div>\n  )\n}\n","import type { Dispatch, PropsWithChildren, SetStateAction } from 'react'\nimport { createContext, useContext, useEffect, useState } from 'react'\nimport { useLocalStorage } from '@/hooks/useLocalStorage'\nimport type { Language } from './util'\nimport { LanguageUtil } from './util'\n\nexport type LanguageContextValue = {\n  language: Language,\n  setLanguage: Dispatch<SetStateAction<Language>>,\n}\n\nexport const LanguageContext = createContext<LanguageContextValue>({\n  language: LanguageUtil.DEFAULT_LANGUAGE,\n  setLanguage: (v) => v\n})\n\nexport const useLanguage = () => useContext(LanguageContext)\n\nexport const useLocale = (overWriteLanguage?: Language) => {\n  const { language } = useLanguage()\n  const mapping: Record<Language, string> = {\n    en: 'en-US',\n    de: 'de-DE'\n  }\n  return mapping[overWriteLanguage ?? language]\n}\n\ntype LanguageProviderProps = {\n  initialLanguage?: Language,\n}\n\nexport const LanguageProvider = ({ initialLanguage, children }: PropsWithChildren<LanguageProviderProps>) => {\n  const [language, setLanguage] = useState<Language>(initialLanguage ?? LanguageUtil.DEFAULT_LANGUAGE)\n  const [storedLanguage, setStoredLanguage] = useLocalStorage<Language>('language', initialLanguage ?? LanguageUtil.DEFAULT_LANGUAGE)\n\n  useEffect(() => {\n    if (language !== initialLanguage && initialLanguage) {\n      console.warn('LanguageProvider initial state changed: Prefer using languageProvider\\'s setLanguage instead')\n      setLanguage(initialLanguage)\n    }\n  }, [initialLanguage]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  useEffect(() => {\n    // TODO set locale of html tag here as well\n    setStoredLanguage(language)\n  }, [language, setStoredLanguage])\n\n  useEffect(() => {\n    if (storedLanguage !== null) {\n      setLanguage(storedLanguage)\n      return\n    }\n\n    const LanguageToTestAgainst = Object.values(LanguageUtil.languages)\n\n    const matchingBrowserLanguage = window.navigator.languages\n      .map(language => LanguageToTestAgainst.find((test) => language === test || language.split('-')[0] === test))\n      .filter(entry => entry !== undefined)\n\n    if (matchingBrowserLanguage.length === 0) return\n\n    const firstMatch = matchingBrowserLanguage[0] as Language\n    setLanguage(firstMatch)\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return (\n    <LanguageContext.Provider value={{\n      language,\n      setLanguage\n    }}>\n      {children}\n    </LanguageContext.Provider>\n  )\n}","import type { Dispatch, SetStateAction } from 'react'\nimport { useCallback, useEffect, useState } from 'react'\nimport { LocalStorageService } from '../util/storage'\n\ntype SetValue<T> = Dispatch<SetStateAction<T>>\nexport const useLocalStorage = <T>(key: string, initValue: T): [T, SetValue<T>] => {\n  const get = useCallback((): T => {\n    if (typeof window === 'undefined') {\n      return initValue\n    }\n    const storageService = new LocalStorageService()\n    const value = storageService.get<T>(key)\n    return value || initValue\n  }, [initValue, key])\n\n  const [storedValue, setStoredValue] = useState<T>(get)\n\n  const setValue: SetValue<T> = useCallback(value => {\n    const newValue = value instanceof Function ? value(storedValue) : value\n    const storageService = new LocalStorageService()\n    storageService.set(key, value)\n\n    setStoredValue(newValue)\n  }, [storedValue, setStoredValue, key])\n\n  useEffect(() => {\n    setStoredValue(get())\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return [storedValue, setValue]\n}","/**\n * The supported languages\n */\nconst languages = ['en', 'de'] as const\n\n/**\n * The supported languages\n */\nexport type Language = typeof languages[number]\n\n/**\n * The supported languages' names in their respective language\n */\nconst languagesLocalNames: Record<Language, string> = {\n  en: 'English',\n  de: 'Deutsch',\n}\n\n/**\n * The default language\n */\nconst DEFAULT_LANGUAGE: Language = 'en'\n\n/**\n * A constant definition for holding data regarding languages\n */\nexport const LanguageUtil = {\n  languages,\n  DEFAULT_LANGUAGE,\n  languagesLocalNames,\n}","import { useLanguage } from './LanguageProvider'\nimport type { Language } from './util'\n\nexport type Translation<T> = Record<Language, T>\n\ntype OverwriteTranslationType<Translation extends Record<string, unknown>> = {\n  language?: Language,\n  translation?: Partial<Record<Language, Partial<Translation>>>,\n}\n\n/**\n * Adds the `language` prop to the component props.\n *\n * @param Translation the type of the translation object\n *\n * @param Props the type of the component props, defaults to `Record<string, never>`,\n *              if you don't expect any other props other than `language` and get an\n *              error when using your component (because it uses `forwardRef` etc.)\n *              you can try out `Record<string, unknown>`, this might resolve your\n *              problem as `SomeType & never` is still `never` but `SomeType & unknown`\n *              is `SomeType` which means that adding back props (like `ref` etc.)\n *              works properly\n */\nexport type PropsForTranslation<\n  Translation extends Record<string, unknown>,\n  Props = Record<string, never>\n> = Props & {\n  overwriteTranslation?: OverwriteTranslationType<Translation>,\n};\n\nexport const useTranslation = <Translation extends Record<string, unknown>>(\n  defaults: Record<Language, Translation>,\n  translationOverwrite: OverwriteTranslationType<Translation> = {}\n): Translation => {\n  const { language: languageProp, translation: overwrite } = translationOverwrite\n  const { language: inferredLanguage } = useLanguage()\n  const usedLanguage = languageProp ?? inferredLanguage\n  let defaultValues: Translation = defaults[usedLanguage]\n  if (overwrite && overwrite[usedLanguage]) {\n    defaultValues = { ...defaultValues, ...overwrite[usedLanguage] }\n  }\n  return defaultValues\n}\n","import type { ButtonHTMLAttributes, PropsWithChildren, ReactNode } from 'react'\nimport clsx from 'clsx'\n\n\nexport const ButtonColorUtil = {\n  solid: ['primary', 'secondary', 'tertiary', 'positive', 'warning', 'negative', 'neutral'] as const,\n  text: ['primary', 'negative', 'neutral'] as const,\n  outline: ['primary'] as const,\n}\n\n\n/**\n * The allowed colors for the SolidButton and IconButton\n */\nexport type SolidButtonColor = typeof ButtonColorUtil.solid[number]\n/**\n * The allowed colors for the OutlineButton\n */\nexport type OutlineButtonColor = typeof ButtonColorUtil.outline[number]\n/**\n * The allowed colors for the TextButton\n */\nexport type TextButtonColor = typeof ButtonColorUtil.text[number]\n\n/**\n * The different sizes for a button\n */\ntype ButtonSizes = 'small' | 'medium' | 'large'\n\n/**\n * The shard properties between all button types\n */\nexport type ButtonProps = PropsWithChildren<{\n  /**\n   * @default 'medium'\n   */\n  size?: ButtonSizes,\n}> & ButtonHTMLAttributes<Element>\n\nconst paddingMapping: Record<ButtonSizes, string> = {\n  small: 'btn-sm',\n  medium: 'btn-md',\n  large: 'btn-lg'\n}\n\nconst iconPaddingMapping: Record<ButtonSizes, string> = {\n  small: 'icon-btn-sm',\n  medium: 'icon-btn-md',\n  large: 'icon-btn-lg'\n}\n\nexport const ButtonUtil = {\n  paddingMapping,\n  iconPaddingMapping\n}\n\ntype ButtonWithIconsProps = ButtonProps & {\n  startIcon?: ReactNode,\n  endIcon?: ReactNode,\n}\n\nexport type SolidButtonProps = ButtonWithIconsProps & {\n  color?: SolidButtonColor,\n}\n\nexport type OutlineButtonProps = ButtonWithIconsProps & {\n  color?: OutlineButtonColor,\n}\n\nexport type TextButtonProps = ButtonWithIconsProps & {\n  color?: TextButtonColor,\n}\n\nexport type IconButtonProps = ButtonProps & {\n  color?: SolidButtonColor,\n}\n\n/**\n * A button with a solid background and different sizes\n */\nconst SolidButton = ({\n                       children,\n                       disabled = false,\n                       color = 'primary',\n                       size = 'medium',\n                       startIcon,\n                       endIcon,\n                       onClick,\n                       className,\n                       ...restProps\n                     }: SolidButtonProps) => {\n  const colorClasses = {\n    primary: 'bg-button-solid-primary-background text-button-solid-primary-text',\n    secondary: 'bg-button-solid-secondary-background text-button-solid-secondary-text',\n    tertiary: 'bg-button-solid-tertiary-background text-button-solid-tertiary-text',\n    positive: 'bg-button-solid-positive-background text-button-solid-positive-text',\n    warning: 'bg-button-solid-warning-background text-button-solid-warning-text',\n    negative: 'bg-button-solid-negative-background text-button-solid-negative-text',\n    neutral: 'bg-button-solid-neutral-background text-button-solid-neutral-text',\n  }[color]\n\n  const iconColorClasses = {\n    primary: 'text-button-solid-primary-icon',\n    secondary: 'text-button-solid-secondary-icon',\n    tertiary: 'text-button-solid-tertiary-icon',\n    positive: 'text-button-solid-positive-icon',\n    warning: 'text-button-solid-warning-icon',\n    negative: 'text-button-solid-negative-icon',\n    neutral: 'text-button-solid-neutral-icon',\n  }[color]\n\n  return (\n    <button\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled || onClick === undefined}\n      className={clsx(\n        {\n          'text-disabled-text bg-disabled-background cursor-not-allowed': disabled,\n          [clsx(colorClasses, 'hover:brightness-90')]: !disabled\n        },\n        ButtonUtil.paddingMapping[size],\n        className\n      )}\n      {...restProps}\n    >\n      {startIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {startIcon}\n      </span>\n      )}\n      {children}\n      {endIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {endIcon}\n      </span>\n      )}\n    </button>\n  )\n}\n\n/**\n * A button with an outline border and different sizes\n */\nconst OutlineButton = ({\n                         children,\n                         disabled = false,\n                         color = 'primary',\n                         size = 'medium',\n                         startIcon,\n                         endIcon,\n                         onClick,\n                         className,\n                         ...restProps\n                       }: OutlineButtonProps) => {\n  const colorClasses = {\n    primary: 'bg-transparent border-2 border-button-outline-primary-text text-button-outline-primary-text',\n  }[color]\n\n  const iconColorClasses = {\n    primary: 'text-button-outline-primary-icon',\n  }[color]\n  return (\n    <button\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled || onClick === undefined}\n      className={clsx(\n        {\n          'text-disabled-text border-disabled-outline cursor-not-allowed': disabled,\n          [clsx(colorClasses, 'hover:brightness-80')]: !disabled,\n        },\n        ButtonUtil.paddingMapping[size],\n        className\n      )}\n      {...restProps}\n    >\n      {startIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {startIcon}\n      </span>\n      )}\n      {children}\n      {endIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {endIcon}\n      </span>\n      )}\n    </button>\n  )\n}\n\n/**\n * A text that is a button that can have different sizes\n */\nconst TextButton = ({\n                      children,\n                      disabled = false,\n                      color = 'neutral',\n                      size = 'medium',\n                      startIcon,\n                      endIcon,\n                      onClick,\n                      className,\n                      ...restProps\n                    }: TextButtonProps) => {\n  const colorClasses = {\n    primary: 'bg-transparent text-button-text-primary-text',\n    negative: 'bg-transparent text-button-text-negative-text',\n    neutral: 'bg-transparent text-button-text-neutral-text',\n  }[color]\n\n  const iconColorClasses = {\n    primary: 'text-button-text-primary-icon',\n    negative: 'text-button-text-negative-icon',\n    neutral: 'text-button-text-neutral-icon',\n  }[color]\n  return (\n    <button\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled || onClick === undefined}\n      className={clsx(\n        {\n          'text-disabled-text cursor-not-allowed': disabled,\n          [clsx(colorClasses, 'hover:bg-button-text-hover-background rounded-full')]: !disabled,\n        },\n        ButtonUtil.paddingMapping[size],\n        className\n      )}\n      {...restProps}\n    >\n      {startIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {startIcon}\n      </span>\n      )}\n      {children}\n      {endIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {endIcon}\n      </span>\n      )}\n    </button>\n  )\n}\n\n\n/**\n * A button for icons with a solid background and different sizes\n */\nconst IconButton = ({\n                      children,\n                      disabled = false,\n                      color = 'primary',\n                      size = 'medium',\n                      onClick,\n                      className,\n                      ...restProps\n                    }: IconButtonProps) => {\n  const colorClasses = {\n    primary: 'bg-button-solid-primary-background text-button-solid-primary-text',\n    secondary: 'bg-button-solid-secondary-background text-button-solid-secondary-text',\n    tertiary: 'bg-button-solid-tertiary-background text-button-solid-tertiary-text',\n    positive: 'bg-button-solid-positive-background text-button-solid-positive-text',\n    warning: 'bg-button-solid-warning-background text-button-solid-warning-text',\n    negative: 'bg-button-solid-negative-background text-button-solid-negative-text',\n    neutral: 'bg-button-solid-neutral-background text-button-solid-neutral-text',\n  }[color]\n\n  return (\n    <button\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled || onClick === undefined}\n      className={clsx(\n        {\n          'text-disabled-text bg-disabled-background cursor-not-allowed': disabled,\n          [clsx(colorClasses, 'hover:brightness-90')]: !disabled\n        },\n        ButtonUtil.iconPaddingMapping[size],\n        className\n      )}\n      {...restProps}\n    >\n      {children}\n    </button>\n  )\n}\n\nexport { SolidButton, OutlineButton, TextButton, IconButton }\n"],"mappings":"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","names":["import_react","import_clsx","clsx","import_jsx_runtime","checked","clsx","import_lucide_react","import_clsx","import_react","import_react","import_jsx_runtime","import_jsx_runtime","page","clsx","import_clsx","import_clsx","import_jsx_runtime","clsx","import_lucide_react","import_jsx_runtime","clsx"]}

package/dist/components/layout-and-navigation/Table.js

@@ -224,12 +224,12 @@ var TextButton = ({
       onClick: disabled ? void 0 : onClick,
       disabled: disabled || onClick === void 0,
       className: clsx4(
-        className,
         {
-          "text-disabled-text": disabled,
+          "text-disabled-text cursor-not-allowed": disabled,
           [clsx4(colorClasses, "hover:bg-button-text-hover-background rounded-full")]: !disabled
         },
-        ButtonUtil.paddingMapping[size]
+        ButtonUtil.paddingMapping[size],
+        className
       ),
       ...restProps,
       children: [