@helpwave/hightide 0.1.6 → 0.1.7

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

@@ -1,11 +1,45 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
 // src/components/layout-and-navigation/StepperBar.tsx
-import { Check, ChevronLeft, ChevronRight } from "lucide-react";
+var StepperBar_exports = {};
+__export(StepperBar_exports, {
+  StepperBar: () => StepperBar,
+  StepperBarUncontrolled: () => StepperBarUncontrolled
+});
+module.exports = __toCommonJS(StepperBar_exports);
+var import_lucide_react = require("lucide-react");
 
 // src/localization/LanguageProvider.tsx
-import { createContext, useContext, useEffect as useEffect2, useState as useState2 } from "react";
+var import_react2 = require("react");
 
 // src/hooks/useLocalStorage.ts
-import { useCallback, useEffect, useState } from "react";
+var import_react = require("react");
 
 // src/localization/util.ts
 var languages = ["en", "de"];
@@ -21,12 +55,12 @@ var LanguageUtil = {
 };
 
 // src/localization/LanguageProvider.tsx
-import { jsx } from "react/jsx-runtime";
-var LanguageContext = createContext({
+var import_jsx_runtime = require("react/jsx-runtime");
+var LanguageContext = (0, import_react2.createContext)({
   language: LanguageUtil.DEFAULT_LANGUAGE,
   setLanguage: (v) => v
 });
-var useLanguage = () => useContext(LanguageContext);
+var useLanguage = () => (0, import_react2.useContext)(LanguageContext);
 
 // src/localization/useTranslation.ts
 var useTranslation = (defaults, translationOverwrite = {}) => {
@@ -52,8 +86,8 @@ var range = (start, end, allowEmptyRange = false) => {
 };
 
 // src/components/user-action/Button.tsx
-import clsx from "clsx";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var import_clsx = __toESM(require("clsx"));
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var paddingMapping = {
   small: "btn-sm",
   medium: "btn-md",
@@ -97,25 +131,25 @@ var SolidButton = ({
     negative: "text-button-solid-negative-icon",
     neutral: "text-button-solid-neutral-icon"
   }[color];
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "button",
     {
       onClick: disabled ? void 0 : onClick,
       disabled: disabled || onClick === void 0,
-      className: clsx(
+      className: (0, import_clsx.default)(
         {
           "text-disabled-text bg-disabled-background cursor-not-allowed": disabled,
-          [clsx(colorClasses, "hover:brightness-90")]: !disabled
+          [(0, import_clsx.default)(colorClasses, "hover:brightness-90")]: !disabled
         },
         ButtonUtil.paddingMapping[size],
         className
       ),
       ...restProps,
       children: [
-        startIcon && /* @__PURE__ */ jsx2(
+        startIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "span",
           {
-            className: clsx({
+            className: (0, import_clsx.default)({
               [iconColorClasses]: !disabled,
               [`text-disabled-icon`]: disabled
             }),
@@ -123,10 +157,10 @@ var SolidButton = ({
           }
         ),
         children,
-        endIcon && /* @__PURE__ */ jsx2(
+        endIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "span",
           {
-            className: clsx({
+            className: (0, import_clsx.default)({
               [iconColorClasses]: !disabled,
               [`text-disabled-icon`]: disabled
             }),
@@ -139,9 +173,9 @@ var SolidButton = ({
 };
 
 // src/components/layout-and-navigation/StepperBar.tsx
-import clsx2 from "clsx";
-import { useEffect as useEffect3, useState as useState3 } from "react";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var import_clsx2 = __toESM(require("clsx"));
+var import_react3 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var defaultStepperBarTranslation = {
   en: {
     back: "Back",
@@ -176,12 +210,12 @@ var StepperBar = ({
     seenSteps.add(newStep);
     onChange({ currentStep: newStep, seenSteps });
   };
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "div",
     {
-      className: clsx2("row justify-between", className),
+      className: (0, import_clsx2.default)("row justify-between", className),
       children: [
-        /* @__PURE__ */ jsx3("div", { className: "row flex-[2] justify-start", children: /* @__PURE__ */ jsxs2(
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "row flex-[2] justify-start", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
           SolidButton,
           {
             disabled: currentStep === 0 || disabledSteps.has(currentStep),
@@ -190,18 +224,18 @@ var StepperBar = ({
             },
             className: "row gap-x-1 items-center justify-center",
             children: [
-              /* @__PURE__ */ jsx3(ChevronLeft, { size: 14 }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.ChevronLeft, { size: 14 }),
               translation.back
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx3("div", { className: "row flex-[5] gap-x-2 justify-center items-center", children: showDots && dots.map((value, index) => {
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "row flex-[5] gap-x-2 justify-center items-center", children: showDots && dots.map((value, index) => {
           const seen = seenSteps.has(index);
-          return /* @__PURE__ */ jsx3(
+          return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             "div",
             {
               onClick: () => seen && update(index),
-              className: clsx2(
+              className: (0, import_clsx2.default)(
                 "rounded-full w-4 h-4",
                 {
                   "bg-primary hover:brightness-75": index === currentStep && seen && !disabledSteps.has(currentStep),
@@ -217,7 +251,7 @@ var StepperBar = ({
             index
           );
         }) }),
-        currentStep !== numberOfSteps && /* @__PURE__ */ jsx3("div", { className: "row flex-[2] justify-end", children: /* @__PURE__ */ jsxs2(
+        currentStep !== numberOfSteps && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "row flex-[2] justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
           SolidButton,
           {
             onClick: () => update(currentStep + 1),
@@ -225,18 +259,18 @@ var StepperBar = ({
             disabled: disabledSteps.has(currentStep),
             children: [
               translation.next,
-              /* @__PURE__ */ jsx3(ChevronRight, { size: 14 })
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.ChevronRight, { size: 14 })
             ]
           }
         ) }),
-        currentStep === numberOfSteps && /* @__PURE__ */ jsx3("div", { className: "row flex-[2] justify-end", children: /* @__PURE__ */ jsxs2(
+        currentStep === numberOfSteps && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "row flex-[2] justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
           SolidButton,
           {
             disabled: disabledSteps.has(currentStep),
             onClick: onFinish,
             className: "row gap-x-1 items-center justify-center",
             children: [
-              /* @__PURE__ */ jsx3(Check, { size: 14 }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.Check, { size: 14 }),
               finishText ?? translation.confirm
             ]
           }
@@ -246,11 +280,11 @@ var StepperBar = ({
   );
 };
 var StepperBarUncontrolled = ({ state, onChange, ...props }) => {
-  const [usedState, setUsedState] = useState3(state ?? defaultState);
-  useEffect3(() => {
+  const [usedState, setUsedState] = (0, import_react3.useState)(state ?? defaultState);
+  (0, import_react3.useEffect)(() => {
     setUsedState(state ?? defaultState);
   }, [state]);
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     StepperBar,
     {
       ...props,
@@ -262,8 +296,9 @@ var StepperBarUncontrolled = ({ state, onChange, ...props }) => {
     }
   );
 };
-export {
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
   StepperBar,
   StepperBarUncontrolled
-};
+});
 //# sourceMappingURL=StepperBar.js.map

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'\nimport { useEffect, useState } from 'react'\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 StepperState = {\n  currentStep: number,\n  seenSteps: Set<number>,\n}\n\nexport type StepperBarProps = {\n  state?: StepperState,\n  numberOfSteps: number,\n  disabledSteps: Set<number>,\n  onChange: (state: StepperState) => void,\n  onFinish: () => void,\n  finishText?: string,\n  showDots?: boolean,\n  className?: string,\n}\n\nconst defaultState: StepperState = {\n  currentStep: 0,\n  seenSteps: new Set([0])\n}\n\n/**\n * A Component for stepping\n */\nexport const StepperBar = ({\n                             overwriteTranslation,\n                             state,\n                             numberOfSteps,\n                             disabledSteps = new Set(),\n                             onChange,\n                             onFinish,\n                             finishText,\n                             showDots = true,\n                             className = '',\n                           }: PropsForTranslation<StepperBarTranslation, StepperBarProps>) => {\n  const translation = useTranslation(defaultStepperBarTranslation, overwriteTranslation)\n  const dots = range(0, numberOfSteps)\n  const { currentStep, seenSteps } = state ?? defaultState\n\n  const update = (newStep: number) => {\n    seenSteps.add(newStep)\n    onChange({ currentStep: newStep, seenSteps })\n  }\n\n  return (\n    <div\n      className={clsx('row justify-between',className)}\n    >\n      <div className=\"row flex-[2] justify-start\">\n        <SolidButton\n          disabled={currentStep === 0 || disabledSteps.has(currentStep)}\n          onClick={() => {\n            update(currentStep - 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 === currentStep && seen && !disabledSteps.has(currentStep),\n                  'bg-primary/40 hover:bg-primary': index !== currentStep && seen && !disabledSteps.has(currentStep),\n                  'bg-gray-200 outline-transparent': !seen || disabledSteps.has(currentStep),\n                },\n                {\n                  'cursor-pointer': seen,\n                  'cursor-not-allowed': !seen || disabledSteps.has(currentStep),\n                })}\n            />\n          )\n        })}\n      </div>\n      {currentStep !== numberOfSteps && (\n        <div className=\"row flex-[2] justify-end\">\n          <SolidButton\n            onClick={() => update(currentStep + 1)}\n            className=\"row gap-x-1 items-center justify-center\"\n            disabled={disabledSteps.has(currentStep)}\n          >\n            {translation.next}\n            <ChevronRight size={14}/>\n          </SolidButton>\n        </div>\n      )}\n      {currentStep === numberOfSteps && (\n        <div className=\"row flex-[2] justify-end\">\n          <SolidButton\n            disabled={disabledSteps.has(currentStep)}\n            onClick={onFinish}\n            className=\"row gap-x-1 items-center justify-center\"\n          >\n            <Check size={14}/>\n            {finishText ?? translation.confirm}\n          </SolidButton>\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport const StepperBarUncontrolled = ({ state, onChange, ...props }: StepperBarProps) => {\n  const [usedState, setUsedState] = useState<StepperState>(state ?? defaultState)\n\n  useEffect(() => {\n    setUsedState(state ?? defaultState)\n  }, [state])\n\n  return (\n    <StepperBar\n      {...props}\n      state={usedState}\n      onChange={newState => {\n        setUsedState(newState)\n        onChange(newState)\n      }}\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","useEffect","useState","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'\nimport { useEffect, useState } from 'react'\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 StepperState = {\n  currentStep: number,\n  seenSteps: Set<number>,\n}\n\nexport type StepperBarProps = {\n  state?: StepperState,\n  numberOfSteps: number,\n  disabledSteps?: Set<number>,\n  onChange: (state: StepperState) => void,\n  onFinish: () => void,\n  finishText?: string,\n  showDots?: boolean,\n  className?: string,\n}\n\nconst defaultState: StepperState = {\n  currentStep: 0,\n  seenSteps: new Set([0])\n}\n\n/**\n * A Component for stepping\n */\nexport const StepperBar = ({\n                             overwriteTranslation,\n                             state,\n                             numberOfSteps,\n                             disabledSteps = new Set(),\n                             onChange,\n                             onFinish,\n                             finishText,\n                             showDots = true,\n                             className = '',\n                           }: PropsForTranslation<StepperBarTranslation, StepperBarProps>) => {\n  const translation = useTranslation(defaultStepperBarTranslation, overwriteTranslation)\n  const dots = range(0, numberOfSteps)\n  const { currentStep, seenSteps } = state ?? defaultState\n\n  const update = (newStep: number) => {\n    seenSteps.add(newStep)\n    onChange({ currentStep: newStep, seenSteps })\n  }\n\n  return (\n    <div\n      className={clsx('row justify-between',className)}\n    >\n      <div className=\"row flex-[2] justify-start\">\n        <SolidButton\n          disabled={currentStep === 0 || disabledSteps.has(currentStep)}\n          onClick={() => {\n            update(currentStep - 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 === currentStep && seen && !disabledSteps.has(currentStep),\n                  'bg-primary/40 hover:bg-primary': index !== currentStep && seen && !disabledSteps.has(currentStep),\n                  'bg-gray-200 outline-transparent': !seen || disabledSteps.has(currentStep),\n                },\n                {\n                  'cursor-pointer': seen,\n                  'cursor-not-allowed': !seen || disabledSteps.has(currentStep),\n                })}\n            />\n          )\n        })}\n      </div>\n      {currentStep !== numberOfSteps && (\n        <div className=\"row flex-[2] justify-end\">\n          <SolidButton\n            onClick={() => update(currentStep + 1)}\n            className=\"row gap-x-1 items-center justify-center\"\n            disabled={disabledSteps.has(currentStep)}\n          >\n            {translation.next}\n            <ChevronRight size={14}/>\n          </SolidButton>\n        </div>\n      )}\n      {currentStep === numberOfSteps && (\n        <div className=\"row flex-[2] justify-end\">\n          <SolidButton\n            disabled={disabledSteps.has(currentStep)}\n            onClick={onFinish}\n            className=\"row gap-x-1 items-center justify-center\"\n          >\n            <Check size={14}/>\n            {finishText ?? translation.confirm}\n          </SolidButton>\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport const StepperBarUncontrolled = ({ state, onChange, ...props }: StepperBarProps) => {\n  const [usedState, setUsedState] = useState<StepperState>(state ?? defaultState)\n\n  useEffect(() => {\n    setUsedState(state ?? defaultState)\n  }, [state])\n\n  return (\n    <StepperBar\n      {...props}\n      state={usedState}\n      onChange={newState => {\n        setUsedState(newState)\n        onChange(newState)\n      }}\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_react","import_jsx_runtime","clsx"]}

package/dist/components/layout-and-navigation/{StepperBar.cjs → StepperBar.mjs}

@@ -1,46 +1,11 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
 // src/components/layout-and-navigation/StepperBar.tsx
-var StepperBar_exports = {};
-__export(StepperBar_exports, {
-  StepperBar: () => StepperBar,
-  StepperBarUncontrolled: () => StepperBarUncontrolled
-});
-module.exports = __toCommonJS(StepperBar_exports);
-var import_lucide_react = require("lucide-react");
+import { Check, ChevronLeft, ChevronRight } from "lucide-react";
 
 // src/localization/LanguageProvider.tsx
-var import_react2 = require("react");
+import { createContext, useContext, useEffect as useEffect2, useState as useState2 } from "react";
 
 // src/hooks/useLocalStorage.ts
-var import_react = require("react");
+import { useCallback, useEffect, useState } from "react";
 
 // src/localization/util.ts
 var languages = ["en", "de"];
@@ -56,12 +21,12 @@ var LanguageUtil = {
 };
 
 // src/localization/LanguageProvider.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var LanguageContext = (0, import_react2.createContext)({
+import { jsx } from "react/jsx-runtime";
+var LanguageContext = createContext({
   language: LanguageUtil.DEFAULT_LANGUAGE,
   setLanguage: (v) => v
 });
-var useLanguage = () => (0, import_react2.useContext)(LanguageContext);
+var useLanguage = () => useContext(LanguageContext);
 
 // src/localization/useTranslation.ts
 var useTranslation = (defaults, translationOverwrite = {}) => {
@@ -87,8 +52,8 @@ var range = (start, end, allowEmptyRange = false) => {
 };
 
 // src/components/user-action/Button.tsx
-var import_clsx = __toESM(require("clsx"), 1);
-var import_jsx_runtime2 = require("react/jsx-runtime");
+import clsx from "clsx";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var paddingMapping = {
   small: "btn-sm",
   medium: "btn-md",
@@ -132,25 +97,25 @@ var SolidButton = ({
     negative: "text-button-solid-negative-icon",
     neutral: "text-button-solid-neutral-icon"
   }[color];
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  return /* @__PURE__ */ jsxs(
     "button",
     {
       onClick: disabled ? void 0 : onClick,
       disabled: disabled || onClick === void 0,
-      className: (0, import_clsx.default)(
+      className: clsx(
         {
           "text-disabled-text bg-disabled-background cursor-not-allowed": disabled,
-          [(0, import_clsx.default)(colorClasses, "hover:brightness-90")]: !disabled
+          [clsx(colorClasses, "hover:brightness-90")]: !disabled
         },
         ButtonUtil.paddingMapping[size],
         className
       ),
       ...restProps,
       children: [
-        startIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        startIcon && /* @__PURE__ */ jsx2(
           "span",
           {
-            className: (0, import_clsx.default)({
+            className: clsx({
               [iconColorClasses]: !disabled,
               [`text-disabled-icon`]: disabled
             }),
@@ -158,10 +123,10 @@ var SolidButton = ({
           }
         ),
         children,
-        endIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        endIcon && /* @__PURE__ */ jsx2(
           "span",
           {
-            className: (0, import_clsx.default)({
+            className: clsx({
               [iconColorClasses]: !disabled,
               [`text-disabled-icon`]: disabled
             }),
@@ -174,9 +139,9 @@ var SolidButton = ({
 };
 
 // src/components/layout-and-navigation/StepperBar.tsx
-var import_clsx2 = __toESM(require("clsx"), 1);
-var import_react3 = require("react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+import clsx2 from "clsx";
+import { useEffect as useEffect3, useState as useState3 } from "react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var defaultStepperBarTranslation = {
   en: {
     back: "Back",
@@ -211,12 +176,12 @@ var StepperBar = ({
     seenSteps.add(newStep);
     onChange({ currentStep: newStep, seenSteps });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ jsxs2(
     "div",
     {
-      className: (0, import_clsx2.default)("row justify-between", className),
+      className: clsx2("row justify-between", className),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "row flex-[2] justify-start", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        /* @__PURE__ */ jsx3("div", { className: "row flex-[2] justify-start", children: /* @__PURE__ */ jsxs2(
           SolidButton,
           {
             disabled: currentStep === 0 || disabledSteps.has(currentStep),
@@ -225,18 +190,18 @@ var StepperBar = ({
             },
             className: "row gap-x-1 items-center justify-center",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.ChevronLeft, { size: 14 }),
+              /* @__PURE__ */ jsx3(ChevronLeft, { size: 14 }),
               translation.back
             ]
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "row flex-[5] gap-x-2 justify-center items-center", children: showDots && dots.map((value, index) => {
+        /* @__PURE__ */ jsx3("div", { className: "row flex-[5] gap-x-2 justify-center items-center", children: showDots && dots.map((value, index) => {
           const seen = seenSteps.has(index);
-          return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          return /* @__PURE__ */ jsx3(
             "div",
             {
               onClick: () => seen && update(index),
-              className: (0, import_clsx2.default)(
+              className: clsx2(
                 "rounded-full w-4 h-4",
                 {
                   "bg-primary hover:brightness-75": index === currentStep && seen && !disabledSteps.has(currentStep),
@@ -252,7 +217,7 @@ var StepperBar = ({
             index
           );
         }) }),
-        currentStep !== numberOfSteps && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "row flex-[2] justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        currentStep !== numberOfSteps && /* @__PURE__ */ jsx3("div", { className: "row flex-[2] justify-end", children: /* @__PURE__ */ jsxs2(
           SolidButton,
           {
             onClick: () => update(currentStep + 1),
@@ -260,18 +225,18 @@ var StepperBar = ({
             disabled: disabledSteps.has(currentStep),
             children: [
               translation.next,
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.ChevronRight, { size: 14 })
+              /* @__PURE__ */ jsx3(ChevronRight, { size: 14 })
             ]
           }
         ) }),
-        currentStep === numberOfSteps && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "row flex-[2] justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        currentStep === numberOfSteps && /* @__PURE__ */ jsx3("div", { className: "row flex-[2] justify-end", children: /* @__PURE__ */ jsxs2(
           SolidButton,
           {
             disabled: disabledSteps.has(currentStep),
             onClick: onFinish,
             className: "row gap-x-1 items-center justify-center",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.Check, { size: 14 }),
+              /* @__PURE__ */ jsx3(Check, { size: 14 }),
               finishText ?? translation.confirm
             ]
           }
@@ -281,11 +246,11 @@ var StepperBar = ({
   );
 };
 var StepperBarUncontrolled = ({ state, onChange, ...props }) => {
-  const [usedState, setUsedState] = (0, import_react3.useState)(state ?? defaultState);
-  (0, import_react3.useEffect)(() => {
+  const [usedState, setUsedState] = useState3(state ?? defaultState);
+  useEffect3(() => {
     setUsedState(state ?? defaultState);
   }, [state]);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ jsx3(
     StepperBar,
     {
       ...props,
@@ -297,9 +262,8 @@ var StepperBarUncontrolled = ({ state, onChange, ...props }) => {
     }
   );
 };
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
+export {
   StepperBar,
   StepperBarUncontrolled
-});
-//# sourceMappingURL=StepperBar.cjs.map
+};
+//# sourceMappingURL=StepperBar.mjs.map