@helpwave/hightide 0.1.7 → 0.1.9

package/dist/components/layout-and-navigation/Carousel.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/layout-and-navigation/Carousel.tsx","../../../src/util/array.ts","../../../src/util/math.ts","../../../src/util/easeFunctions.ts","../../../src/util/loopingArray.ts"],"sourcesContent":["import type { ReactNode } from 'react'\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport clsx from 'clsx'\nimport { ChevronLeft, ChevronRight } from 'lucide-react'\nimport { createLoopingListWithIndex, range } from '../../util/array'\nimport { clamp } from '../../util/math'\nimport { EaseFunctions } from '../../util/easeFunctions'\nimport type { Direction } from '../../util/loopingArray'\nimport { LoopingArrayCalculator } from '../../util/loopingArray'\n\n\ntype CarouselProps = {\n  children: ReactNode[],\n  animationTime?: number,\n  isLooping?: boolean,\n  isAutoLooping?: boolean,\n  autoLoopingTimeOut?: number,\n  autoLoopAnimationTime?: number,\n  hintNext?: boolean,\n  arrows?: boolean,\n  dots?: boolean,\n  /**\n   * Percentage that is allowed to be scrolled further\n   */\n  overScrollThreshold?: number,\n  blurColor?: string,\n  className?: string,\n  heightClassName?: string,\n  widthClassName?: string,\n}\n\ntype ItemType = {\n  item: ReactNode,\n  index: number,\n}\n\ntype CarouselAnimationState = {\n  targetPosition: number,\n  /**\n   * Value of either 1 or -1, 1 is forwards -1 is backwards\n   */\n  direction: Direction,\n  startPosition: number,\n  startTime?: number,\n  lastUpdateTime?: number,\n  isAutoLooping: boolean,\n}\n\ntype DragState = {\n  startX: number,\n  startTime: number,\n  lastX: number,\n  startIndex: number,\n}\n\ntype CarouselInformation = {\n  currentPosition: number,\n  dragState?: DragState,\n  animationState?: CarouselAnimationState,\n}\n\nexport const Carousel = ({\n                           children,\n                           animationTime = 200,\n                           isLooping = false,\n                           isAutoLooping = false,\n                           autoLoopingTimeOut = 5000,\n                           autoLoopAnimationTime = 500,\n                           hintNext = false,\n                           arrows = false,\n                           dots = true,\n                           overScrollThreshold = 0.1,\n                           blurColor = 'from-white',\n                           className = '',\n                           heightClassName = 'h-[24rem]',\n                           widthClassName = 'w-[70%] desktop:w-1/2',\n                         }: CarouselProps) => {\n  if (isAutoLooping && !isLooping) {\n    console.error('When isAutoLooping is true, isLooping should also be true')\n    isLooping = true\n  }\n\n  const [{\n    currentPosition,\n    dragState,\n    animationState,\n  }, setCarouselInformation] = useState<CarouselInformation>({\n    currentPosition: 0,\n  })\n  const animationId = useRef<number | undefined>(undefined)\n  const timeOut = useRef<NodeJS.Timeout | undefined>(undefined)\n  autoLoopingTimeOut = Math.max(0, autoLoopingTimeOut)\n\n  const length = children.length\n  const paddingItemCount = 3 // The number of items to append left and right of the list to allow for clean transition when looping\n\n  const util = useMemo(() => new LoopingArrayCalculator(length, isLooping, overScrollThreshold), [length, isLooping, overScrollThreshold])\n  const currentIndex = util.getCorrectedPosition(LoopingArrayCalculator.withoutOffset(currentPosition))\n  animationTime = Math.max(200, animationTime) // in ms, must be > 0\n  autoLoopAnimationTime = Math.max(200, autoLoopAnimationTime)\n\n  const getStyleOffset = (index: number) => {\n    const baseOffset = -50 + (index - currentPosition) * 100\n    return `${baseOffset}%`\n  }\n\n  const animation = useCallback((time: number) => {\n    let keepAnimating: boolean = true\n\n    // Other calculation in the setState call to avoid updating the useCallback to often\n    setCarouselInformation((state) => {\n      const {\n        animationState,\n        dragState\n      } = state\n      if (animationState === undefined || dragState !== undefined) {\n        keepAnimating = false\n        return state\n      }\n      if (!animationState.startTime || !animationState.lastUpdateTime) {\n        return {\n          ...state,\n          animationState: {\n            ...animationState,\n            startTime: time,\n            lastUpdateTime: time\n          }\n        }\n      }\n      const useAnimationTime = animationState.isAutoLooping ? autoLoopAnimationTime : animationTime\n      const progress = clamp((time - animationState.startTime) / useAnimationTime) // progress\n      const easedProgress = EaseFunctions.easeInEaseOut(progress)\n      const distance = util.getDistanceDirectional(animationState.startPosition, animationState.targetPosition, animationState.direction)\n      const newPosition = util.getCorrectedPosition(easedProgress * distance * animationState.direction + animationState.startPosition)\n\n      if (animationState.targetPosition === newPosition || progress === 1) {\n        keepAnimating = false\n        return ({\n          currentPosition: LoopingArrayCalculator.withoutOffset(newPosition),\n          animationState: undefined\n        })\n      }\n      return ({\n        currentPosition: newPosition,\n        animationState: {\n          ...animationState!,\n          lastUpdateTime: time\n        }\n      })\n    })\n    if (keepAnimating) {\n      animationId.current = requestAnimationFrame(time1 => animation(time1))\n    }\n  }, [animationTime, autoLoopAnimationTime, util])\n\n  useEffect(() => {\n    if (animationState) {\n      animationId.current = requestAnimationFrame(animation)\n    }\n    return () => {\n      if (animationId.current) {\n        cancelAnimationFrame(animationId.current)\n        animationId.current = 0\n      }\n    }\n  }, [animationState]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  const startAutoLoop = () => setCarouselInformation(prevState => ({\n    ...prevState,\n    dragState: prevState.dragState,\n    animationState: prevState.animationState || prevState.dragState ? prevState.animationState : {\n      startPosition: currentPosition,\n      targetPosition: (currentPosition + 1) % length,\n      direction: 1, // always move forward\n      isAutoLooping: true\n    }\n  }))\n\n  useEffect(() => {\n    if (!animationId.current && !animationState && !dragState && !timeOut.current) {\n      if (autoLoopingTimeOut > 0) {\n        timeOut.current = setTimeout(() => {\n          startAutoLoop()\n          timeOut.current = undefined\n        }, autoLoopingTimeOut)\n      } else {\n        startAutoLoop()\n      }\n    }\n  }, [animationState, dragState, animationId.current, timeOut.current]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  const startAnimation = (targetPosition?: number) => {\n    if (targetPosition === undefined) {\n      targetPosition = LoopingArrayCalculator.withoutOffset(currentPosition)\n    }\n    if (targetPosition === currentPosition) {\n      return // we are exactly where we want to be\n    }\n\n    // find target index and fastest path to it\n    const direction = util.getBestDirection(currentPosition, targetPosition)\n    clearTimeout(timeOut.current)\n    timeOut.current = undefined\n    if (animationId.current) {\n      cancelAnimationFrame(animationId.current)\n      animationId.current = undefined\n    }\n\n    setCarouselInformation(prevState => ({\n      ...prevState,\n      dragState: undefined,\n      animationState: {\n        targetPosition: targetPosition!,\n        direction,\n        startPosition: currentPosition,\n        isAutoLooping: false\n      },\n      timeOut: undefined\n    }))\n  }\n\n  const canGoLeft = () => {\n    return isLooping || currentPosition !== 0\n  }\n\n  const canGoRight = () => {\n    return isLooping || currentPosition !== length - 1\n  }\n\n  const left = () => {\n    if (canGoLeft()) {\n      startAnimation(currentPosition === 0 ? length - 1 : LoopingArrayCalculator.withoutOffset(currentPosition - 1))\n    }\n  }\n\n  const right = () => {\n    if (canGoRight()) {\n      startAnimation(LoopingArrayCalculator.withoutOffset((currentPosition + 1) % length))\n    }\n  }\n\n  let items: ItemType[] = children.map((item, index) => ({\n    index,\n    item\n  }))\n\n  if (isLooping) {\n    const before = createLoopingListWithIndex(children, length - 1, paddingItemCount, false).reverse().map(([index, item]) => ({\n      index,\n      item\n    }))\n    const after = createLoopingListWithIndex(children, 0, paddingItemCount).map(([index, item]) => ({\n      index,\n      item\n    }))\n    items = [\n      ...before,\n      ...items,\n      ...after\n    ]\n  }\n\n  const onDragStart = (x: number) => setCarouselInformation(prevState => ({\n    ...prevState,\n    dragState: {\n      lastX: x,\n      startX: x,\n      startTime: Date.now(),\n      startIndex: currentPosition,\n    },\n    animationState: undefined // cancel animation\n  }))\n\n  const onDrag = (x: number, width: number) => {\n    // For some weird reason the clientX is 0 on the last dragUpdate before drag end causing issues\n    if (!dragState || x === 0) {\n      return\n    }\n    const offsetUpdate = (dragState.lastX - x) / width\n    const newPosition = util.getCorrectedPosition(currentPosition + offsetUpdate)\n\n    setCarouselInformation(prevState => ({\n      ...prevState,\n      currentPosition: newPosition,\n      dragState: {\n        ...dragState,\n        lastX: x\n      },\n    }))\n  }\n\n  const onDragEnd = (x: number, width: number) => {\n    if (!dragState) {\n      return\n    }\n    const distance = dragState.startX - x\n    const relativeDistance = distance / width\n    const duration = (Date.now() - dragState.startTime) // in milliseconds\n    const velocity = distance / (Date.now() - dragState.startTime)\n\n    const isSlide = Math.abs(velocity) > 2 || (duration < 200 && (Math.abs(relativeDistance) > 0.2 || Math.abs(distance) > 50))\n    if (isSlide) {\n      if (distance > 0 && canGoRight()) {\n        right()\n        return\n      } else if (distance < 0 && canGoLeft()) {\n        left()\n        return\n      }\n    }\n    startAnimation()\n  }\n\n  const dragHandlers = {\n    draggable: true,\n    onDragStart: (event: React.DragEvent<HTMLDivElement>) => {\n      onDragStart(event.clientX)\n      event.dataTransfer.setDragImage(document.createElement('div'), 0, 0)\n    },\n    onDrag: (event: React.DragEvent<HTMLDivElement>) => onDrag(event.clientX, (event.target as HTMLDivElement).getBoundingClientRect().width),\n    onDragEnd: (event: React.DragEvent<HTMLDivElement>) => onDragEnd(event.clientX, (event.target as HTMLDivElement).getBoundingClientRect().width),\n    onTouchStart: (event: React.TouchEvent<HTMLDivElement>) => onDragStart(event.touches[0]!.clientX),\n    onTouchMove: (event: React.TouchEvent<HTMLDivElement>) => onDrag(event.touches[0]!.clientX, (event.target as HTMLDivElement).getBoundingClientRect().width),\n    onTouchEnd: (event: React.TouchEvent<HTMLDivElement>) => onDragEnd(event.changedTouches[0]!.clientX, (event.target as HTMLDivElement).getBoundingClientRect().width),\n    onTouchCancel: (event: React.TouchEvent<HTMLDivElement>) => onDragEnd(event.changedTouches[0]!.clientX, (event.target as HTMLDivElement).getBoundingClientRect().width),\n  }\n\n  return (\n    <div className=\"col items-center w-full gap-y-2\">\n      <div className={clsx(`relative w-full overflow-hidden`, heightClassName, className)}>\n        {arrows && (\n          <>\n            <div\n              className={clsx('absolute z-10 left-0 top-1/2 -translate-y-1/2 bg-gray-200 hover:bg-gray-300 rounded-lg cursor-pointer border-black border-2', { hidden: !canGoLeft() })}\n              onClick={() => left()}\n            >\n              <ChevronLeft size={32}/>\n            </div>\n            <div\n              className={clsx('absolute z-10 right-0 top-1/2 -translate-y-1/2 bg-gray-200 hover:bg-gray-300 rounded-lg cursor-pointer border-black border-2', { hidden: !canGoRight() })}\n              onClick={() => right()}\n            >\n              <ChevronRight size={32}/>\n            </div>\n          </>\n        )}\n        {hintNext ? (\n          <div className={clsx(`relative row h-full`, heightClassName)}>\n            <div className=\"relative row h-full w-full px-2 overflow-hidden\">\n              {items.map(({\n                            item,\n                            index\n                          }, listIndex) => (\n                <div\n                  key={listIndex}\n                  className={clsx(`absolute left-[50%] h-full overflow-hidden`, widthClassName, { '!cursor-grabbing': !!dragState })}\n                  style={{ translate: getStyleOffset(listIndex - (isLooping ? paddingItemCount : 0)) }}\n                  {...dragHandlers}\n                  onClick={() => startAnimation(index)}\n                >\n                  {item}\n                </div>\n              ))}\n            </div>\n            <div\n              className={clsx(`hidden pointer-events-none desktop:block absolute left-0 h-full w-[20%] bg-gradient-to-r to-transparent`, blurColor)}\n            />\n            <div\n              className={clsx(`hidden pointer-events-none desktop:block absolute right-0 h-full w-[20%] bg-gradient-to-l to-transparent`, blurColor)}\n            />\n          </div>\n        ) : (\n          <div className={clsx('px-16 h-full', { '!cursor-grabbing': !!dragState })} {...dragHandlers}>\n            {children[currentIndex]}\n          </div>\n        )}\n      </div>\n      {dots && (\n        <div\n          className=\"row items-center justify-center w-full my-2\">\n          {range(0, length - 1).map(index => (\n            <button\n              key={index}\n              className={clsx('w-[2rem] min-w-[2rem] h-[0.75rem] min-h-[0.75rem] hover:bg-primary hover:brightness-90 first:rounded-l-md last:rounded-r-md', {\n                'bg-gray-200': currentIndex !== index,\n                'bg-primary': currentIndex === index\n              })}\n              onClick={() => startAnimation(index)}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  )\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","export const clamp = (value: number, min: number = 0, max: number = 1): number => {\n  return Math.min(Math.max(value, min), max)\n}\n","import { clamp } from './math'\n\nexport type EaseFunction = (t: number) => number\n\nexport class EaseFunctions {\n  static cubicBezierGeneric(x1: number, y1: number, x2: number, y2: number): { x: EaseFunction, y: EaseFunction } {\n    // Calculate the x and y coordinates using the cubic Bézier formula\n    const cx = 3 * x1\n    const bx = 3 * (x2 - x1) - cx\n    const ax = 1 - cx - bx\n\n    const cy = 3 * y1\n    const by = 3 * (y2 - y1) - cy\n    const ay = 1 - cy - by\n\n    // Compute x and y values at parameter t\n    const x = (t: number) => ((ax * t + bx) * t + cx) * t\n    const y = (t: number) => ((ay * t + by) * t + cy) * t\n\n    return {\n      x,\n      y\n    }\n  }\n\n  static cubicBezier(x1: number, y1: number, x2: number, y2: number): EaseFunction {\n    const { y } = EaseFunctions.cubicBezierGeneric(x1, y1, x2, y2)\n    return (t: number) => {\n      t = clamp(t)\n      return y(t) // <= equal to x(t) * 0 + y(t) * 1\n    }\n  }\n\n  static easeInEaseOut(t: number): number {\n    return EaseFunctions.cubicBezier(0.65, 0, 0.35, 1)(t)\n  };\n}\n","/**\n *  1 is forwards\n *\n * -1 is backwards\n */\nexport type Direction = 1 | -1\n\nexport class LoopingArrayCalculator {\n  length: number\n  isLooping: boolean\n  allowedOverScroll: number\n\n  constructor(length: number, isLooping: boolean = true, allowedOverScroll: number = 0.1) {\n    if (allowedOverScroll < 0 || length < 1) {\n      throw new Error('Invalid parameters: allowedOverScroll >= 0 and length >= 1 must be true')\n    }\n\n    this.length = length\n    this.isLooping = isLooping\n    this.allowedOverScroll = allowedOverScroll\n  }\n\n  getCorrectedPosition(position: number): number {\n    if (!this.isLooping) {\n      return Math.max(-this.allowedOverScroll, Math.min(this.allowedOverScroll + this.length - 1, position))\n    }\n    if (position >= this.length) {\n      return position % this.length\n    }\n    if (position < 0) {\n      return this.length - (Math.abs(position) % this.length)\n    }\n    return position\n  }\n\n  static withoutOffset(position: number): number {\n    return position + LoopingArrayCalculator.getOffset(position)\n  }\n\n  static getOffset(position: number): number {\n    return Math.round(position) - position // For example: 45.5 => 46 - 45.5 = 0.5\n  }\n\n  /**\n   * @return absolute distance forwards or Infinity when the target cannot be reached (only possible when not isLooping)\n   */\n  getDistanceDirectional(position: number, target: number, direction: Direction): number {\n    if (!this.isLooping && (position < -this.allowedOverScroll || position > this.allowedOverScroll + this.length - 1)) {\n      throw new Error('Invalid parameters: position is out of bounds.')\n    }\n\n    const isForwardInvalid = (direction === 1 && position > target)\n    const isBackwardInvalid = (direction === -1 && target < position)\n\n    if (!this.isLooping && (isForwardInvalid || isBackwardInvalid)) {\n      return Infinity\n    }\n\n    if (direction === -1) {\n      return this.getDistanceDirectional(target, position, 1)\n    }\n\n    position = this.getCorrectedPosition(position)\n    target = this.getCorrectedPosition(target)\n\n    let distance = (target - position) * direction\n    if (distance < 0) {\n      distance = this.length - (Math.abs(position) % this.length) + target\n    }\n\n    return distance\n  }\n\n  getDistanceForward(position: number, target: number): number {\n    return this.getDistanceDirectional(position, target, 1)\n  }\n\n  getDistanceBackward(position: number, target: number): number {\n    return this.getDistanceDirectional(position, target, -1)\n  }\n\n  getDistance(position: number, target: number): number {\n    const forwardDistance = this.getDistanceForward(position, target)\n    const backwardDistance = this.getDistanceBackward(position, target)\n\n    return Math.min(forwardDistance, backwardDistance)\n  }\n\n  getBestDirection(position: number, target: number): Direction {\n    const forwardDistance = this.getDistanceForward(position, target)\n    const backwardDistance = this.getDistanceBackward(position, target)\n    return forwardDistance < backwardDistance ? 1 : -1\n  }\n}\n"],"mappings":"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","names":["animationState","dragState"]}
+{"version":3,"sources":["../../../src/components/layout-and-navigation/Carousel.tsx","../../../src/util/array.ts","../../../src/util/math.ts","../../../src/util/easeFunctions.ts","../../../src/util/loopingArray.ts","../../../src/components/user-action/Button.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport clsx from 'clsx'\nimport { ChevronLeft, ChevronRight } from 'lucide-react'\nimport { createLoopingListWithIndex, range } from '../../util/array'\nimport { clamp } from '../../util/math'\nimport { EaseFunctions } from '../../util/easeFunctions'\nimport type { Direction } from '../../util/loopingArray'\nimport { LoopingArrayCalculator } from '../../util/loopingArray'\nimport { IconButton } from '../user-action/Button'\n\n\nexport type CarouselProps = {\n  children: ReactNode[],\n  animationTime?: number,\n  isLooping?: boolean,\n  isAutoLooping?: boolean,\n  autoLoopingTimeOut?: number,\n  autoLoopAnimationTime?: number,\n  hintNext?: boolean,\n  arrows?: boolean,\n  dots?: boolean,\n  /**\n   * Percentage that is allowed to be scrolled further\n   */\n  overScrollThreshold?: number,\n  blurColor?: string,\n  className?: string,\n  heightClassName?: string,\n  widthClassName?: string,\n}\n\ntype ItemType = {\n  item: ReactNode,\n  index: number,\n}\n\ntype CarouselAnimationState = {\n  targetPosition: number,\n  /**\n   * Value of either 1 or -1, 1 is forwards -1 is backwards\n   */\n  direction: Direction,\n  startPosition: number,\n  startTime?: number,\n  lastUpdateTime?: number,\n  isAutoLooping: boolean,\n}\n\ntype DragState = {\n  startX: number,\n  startTime: number,\n  lastX: number,\n  startIndex: number,\n}\n\ntype CarouselInformation = {\n  currentPosition: number,\n  dragState?: DragState,\n  animationState?: CarouselAnimationState,\n}\n\nexport const Carousel = ({\n                           children,\n                           animationTime = 200,\n                           isLooping = false,\n                           isAutoLooping = false,\n                           autoLoopingTimeOut = 5000,\n                           autoLoopAnimationTime = 500,\n                           hintNext = false,\n                           arrows = false,\n                           dots = true,\n                           overScrollThreshold = 0.1,\n                           blurColor = 'from-background',\n                           className = '',\n                           heightClassName = 'h-[24rem]',\n                           widthClassName = 'w-[70%] desktop:w-1/2',\n                         }: CarouselProps) => {\n  if (isAutoLooping && !isLooping) {\n    console.error('When isAutoLooping is true, isLooping should also be true')\n    isLooping = true\n  }\n\n  const [{\n    currentPosition,\n    dragState,\n    animationState,\n  }, setCarouselInformation] = useState<CarouselInformation>({\n    currentPosition: 0,\n  })\n  const animationId = useRef<number | undefined>(undefined)\n  const timeOut = useRef<NodeJS.Timeout | undefined>(undefined)\n  autoLoopingTimeOut = Math.max(0, autoLoopingTimeOut)\n\n  const length = children.length\n  const paddingItemCount = 3 // The number of items to append left and right of the list to allow for clean transition when looping\n\n  const util = useMemo(() => new LoopingArrayCalculator(length, isLooping, overScrollThreshold), [length, isLooping, overScrollThreshold])\n  const currentIndex = util.getCorrectedPosition(LoopingArrayCalculator.withoutOffset(currentPosition))\n  animationTime = Math.max(200, animationTime) // in ms, must be > 0\n  autoLoopAnimationTime = Math.max(200, autoLoopAnimationTime)\n\n  const getStyleOffset = (index: number) => {\n    const baseOffset = -50 + (index - currentPosition) * 100\n    return `${baseOffset}%`\n  }\n\n  const animation = useCallback((time: number) => {\n    let keepAnimating: boolean = true\n\n    // Other calculation in the setState call to avoid updating the useCallback to often\n    setCarouselInformation((state) => {\n      const {\n        animationState,\n        dragState\n      } = state\n      if (animationState === undefined || dragState !== undefined) {\n        keepAnimating = false\n        return state\n      }\n      if (!animationState.startTime || !animationState.lastUpdateTime) {\n        return {\n          ...state,\n          animationState: {\n            ...animationState,\n            startTime: time,\n            lastUpdateTime: time\n          }\n        }\n      }\n      const useAnimationTime = animationState.isAutoLooping ? autoLoopAnimationTime : animationTime\n      const progress = clamp((time - animationState.startTime) / useAnimationTime) // progress\n      const easedProgress = EaseFunctions.easeInEaseOut(progress)\n      const distance = util.getDistanceDirectional(animationState.startPosition, animationState.targetPosition, animationState.direction)\n      const newPosition = util.getCorrectedPosition(easedProgress * distance * animationState.direction + animationState.startPosition)\n\n      if (animationState.targetPosition === newPosition || progress === 1) {\n        keepAnimating = false\n        return ({\n          currentPosition: LoopingArrayCalculator.withoutOffset(newPosition),\n          animationState: undefined\n        })\n      }\n      return ({\n        currentPosition: newPosition,\n        animationState: {\n          ...animationState!,\n          lastUpdateTime: time\n        }\n      })\n    })\n    if (keepAnimating) {\n      animationId.current = requestAnimationFrame(time1 => animation(time1))\n    }\n  }, [animationTime, autoLoopAnimationTime, util])\n\n  useEffect(() => {\n    if (animationState) {\n      animationId.current = requestAnimationFrame(animation)\n    }\n    return () => {\n      if (animationId.current) {\n        cancelAnimationFrame(animationId.current)\n        animationId.current = 0\n      }\n    }\n  }, [animationState]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  const startAutoLoop = () => setCarouselInformation(prevState => ({\n    ...prevState,\n    dragState: prevState.dragState,\n    animationState: prevState.animationState || prevState.dragState ? prevState.animationState : {\n      startPosition: currentPosition,\n      targetPosition: (currentPosition + 1) % length,\n      direction: 1, // always move forward\n      isAutoLooping: true\n    }\n  }))\n\n  useEffect(() => {\n    if (!animationId.current && !animationState && !dragState && !timeOut.current) {\n      if (autoLoopingTimeOut > 0) {\n        timeOut.current = setTimeout(() => {\n          startAutoLoop()\n          timeOut.current = undefined\n        }, autoLoopingTimeOut)\n      } else {\n        startAutoLoop()\n      }\n    }\n  }, [animationState, dragState, animationId.current, timeOut.current]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  const startAnimation = (targetPosition?: number) => {\n    if (targetPosition === undefined) {\n      targetPosition = LoopingArrayCalculator.withoutOffset(currentPosition)\n    }\n    if (targetPosition === currentPosition) {\n      return // we are exactly where we want to be\n    }\n\n    // find target index and fastest path to it\n    const direction = util.getBestDirection(currentPosition, targetPosition)\n    clearTimeout(timeOut.current)\n    timeOut.current = undefined\n    if (animationId.current) {\n      cancelAnimationFrame(animationId.current)\n      animationId.current = undefined\n    }\n\n    setCarouselInformation(prevState => ({\n      ...prevState,\n      dragState: undefined,\n      animationState: {\n        targetPosition: targetPosition!,\n        direction,\n        startPosition: currentPosition,\n        isAutoLooping: false\n      },\n      timeOut: undefined\n    }))\n  }\n\n  const canGoLeft = () => {\n    return isLooping || currentPosition !== 0\n  }\n\n  const canGoRight = () => {\n    return isLooping || currentPosition !== length - 1\n  }\n\n  const left = () => {\n    if (canGoLeft()) {\n      startAnimation(currentPosition === 0 ? length - 1 : LoopingArrayCalculator.withoutOffset(currentPosition - 1))\n    }\n  }\n\n  const right = () => {\n    if (canGoRight()) {\n      startAnimation(LoopingArrayCalculator.withoutOffset((currentPosition + 1) % length))\n    }\n  }\n\n  let items: ItemType[] = children.map((item, index) => ({\n    index,\n    item\n  }))\n\n  if (isLooping) {\n    const before = createLoopingListWithIndex(children, length - 1, paddingItemCount, false).reverse().map(([index, item]) => ({\n      index,\n      item\n    }))\n    const after = createLoopingListWithIndex(children, 0, paddingItemCount).map(([index, item]) => ({\n      index,\n      item\n    }))\n    items = [\n      ...before,\n      ...items,\n      ...after\n    ]\n  }\n\n  const onDragStart = (x: number) => setCarouselInformation(prevState => ({\n    ...prevState,\n    dragState: {\n      lastX: x,\n      startX: x,\n      startTime: Date.now(),\n      startIndex: currentPosition,\n    },\n    animationState: undefined // cancel animation\n  }))\n\n  const onDrag = (x: number, width: number) => {\n    // For some weird reason the clientX is 0 on the last dragUpdate before drag end causing issues\n    if (!dragState || x === 0) {\n      return\n    }\n    const offsetUpdate = (dragState.lastX - x) / width\n    const newPosition = util.getCorrectedPosition(currentPosition + offsetUpdate)\n\n    setCarouselInformation(prevState => ({\n      ...prevState,\n      currentPosition: newPosition,\n      dragState: {\n        ...dragState,\n        lastX: x\n      },\n    }))\n  }\n\n  const onDragEnd = (x: number, width: number) => {\n    if (!dragState) {\n      return\n    }\n    const distance = dragState.startX - x\n    const relativeDistance = distance / width\n    const duration = (Date.now() - dragState.startTime) // in milliseconds\n    const velocity = distance / (Date.now() - dragState.startTime)\n\n    const isSlide = Math.abs(velocity) > 2 || (duration < 200 && (Math.abs(relativeDistance) > 0.2 || Math.abs(distance) > 50))\n    if (isSlide) {\n      if (distance > 0 && canGoRight()) {\n        right()\n        return\n      } else if (distance < 0 && canGoLeft()) {\n        left()\n        return\n      }\n    }\n    startAnimation()\n  }\n\n  const dragHandlers = {\n    draggable: true,\n    onDragStart: (event: React.DragEvent<HTMLDivElement>) => {\n      onDragStart(event.clientX)\n      event.dataTransfer.setDragImage(document.createElement('div'), 0, 0)\n    },\n    onDrag: (event: React.DragEvent<HTMLDivElement>) => onDrag(event.clientX, (event.target as HTMLDivElement).getBoundingClientRect().width),\n    onDragEnd: (event: React.DragEvent<HTMLDivElement>) => onDragEnd(event.clientX, (event.target as HTMLDivElement).getBoundingClientRect().width),\n    onTouchStart: (event: React.TouchEvent<HTMLDivElement>) => onDragStart(event.touches[0]!.clientX),\n    onTouchMove: (event: React.TouchEvent<HTMLDivElement>) => onDrag(event.touches[0]!.clientX, (event.target as HTMLDivElement).getBoundingClientRect().width),\n    onTouchEnd: (event: React.TouchEvent<HTMLDivElement>) => onDragEnd(event.changedTouches[0]!.clientX, (event.target as HTMLDivElement).getBoundingClientRect().width),\n    onTouchCancel: (event: React.TouchEvent<HTMLDivElement>) => onDragEnd(event.changedTouches[0]!.clientX, (event.target as HTMLDivElement).getBoundingClientRect().width),\n  }\n\n  return (\n    <div className=\"col items-center w-full gap-y-2\">\n      <div className={clsx(`relative w-full overflow-hidden`, heightClassName, className)}>\n        {arrows && (\n          <>\n            <IconButton\n              color=\"neutral\"\n              className={clsx('absolute z-10 left-0 top-1/2 -translate-y-1/2 shadow-md', { hidden: !canGoLeft() })}\n              disabled={!canGoLeft()}\n              onClick={() => left()}\n            >\n              <ChevronLeft size={24}/>\n            </IconButton>\n            <IconButton\n              color=\"neutral\"\n              className={clsx('absolute z-10 right-0 top-1/2 -translate-y-1/2 shadow-md', { hidden: !canGoRight() })}\n              disabled={!canGoRight()}\n              onClick={() => right()}\n            >\n              <ChevronRight size={24}/>\n            </IconButton>\n          </>\n        )}\n        {hintNext ? (\n          <div className={clsx(`relative row h-full`, heightClassName)}>\n            <div className=\"relative row h-full w-full px-2 overflow-hidden\">\n              {items.map(({\n                            item,\n                            index\n                          }, listIndex) => (\n                <div\n                  key={listIndex}\n                  className={clsx(`absolute left-[50%] h-full overflow-hidden`, widthClassName, { '!cursor-grabbing': !!dragState })}\n                  style={{ translate: getStyleOffset(listIndex - (isLooping ? paddingItemCount : 0)) }}\n                  {...dragHandlers}\n                  onClick={() => startAnimation(index)}\n                >\n                  {item}\n                </div>\n              ))}\n            </div>\n            <div\n              className={clsx(`hidden pointer-events-none desktop:block absolute left-0 h-full w-[20%] bg-gradient-to-r to-transparent`, blurColor)}\n            />\n            <div\n              className={clsx(`hidden pointer-events-none desktop:block absolute right-0 h-full w-[20%] bg-gradient-to-l to-transparent`, blurColor)}\n            />\n          </div>\n        ) : (\n          <div className={clsx('px-16 h-full', { '!cursor-grabbing': !!dragState })} {...dragHandlers}>\n            {children[currentIndex]}\n          </div>\n        )}\n      </div>\n      {dots && (\n        <div\n          className=\"row items-center justify-center w-full my-2\">\n          {range(0, length - 1).map(index => (\n            <button\n              key={index}\n              className={clsx('w-[2rem] min-w-[2rem] h-[0.75rem] min-h-[0.75rem] first:rounded-l-md last:rounded-r-md', {\n                'bg-carousel-dot-disabled hover:bg-carousel-dot-active': currentIndex !== index,\n                'bg-carousel-dot-active hover:brightness-90': currentIndex === index\n              })}\n              onClick={() => startAnimation(index)}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  )\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","export const clamp = (value: number, min: number = 0, max: number = 1): number => {\n  return Math.min(Math.max(value, min), max)\n}\n","import { clamp } from './math'\n\nexport type EaseFunction = (t: number) => number\n\nexport class EaseFunctions {\n  static cubicBezierGeneric(x1: number, y1: number, x2: number, y2: number): { x: EaseFunction, y: EaseFunction } {\n    // Calculate the x and y coordinates using the cubic Bézier formula\n    const cx = 3 * x1\n    const bx = 3 * (x2 - x1) - cx\n    const ax = 1 - cx - bx\n\n    const cy = 3 * y1\n    const by = 3 * (y2 - y1) - cy\n    const ay = 1 - cy - by\n\n    // Compute x and y values at parameter t\n    const x = (t: number) => ((ax * t + bx) * t + cx) * t\n    const y = (t: number) => ((ay * t + by) * t + cy) * t\n\n    return {\n      x,\n      y\n    }\n  }\n\n  static cubicBezier(x1: number, y1: number, x2: number, y2: number): EaseFunction {\n    const { y } = EaseFunctions.cubicBezierGeneric(x1, y1, x2, y2)\n    return (t: number) => {\n      t = clamp(t)\n      return y(t) // <= equal to x(t) * 0 + y(t) * 1\n    }\n  }\n\n  static easeInEaseOut(t: number): number {\n    return EaseFunctions.cubicBezier(0.65, 0, 0.35, 1)(t)\n  };\n}\n","/**\n *  1 is forwards\n *\n * -1 is backwards\n */\nexport type Direction = 1 | -1\n\nexport class LoopingArrayCalculator {\n  length: number\n  isLooping: boolean\n  allowedOverScroll: number\n\n  constructor(length: number, isLooping: boolean = true, allowedOverScroll: number = 0.1) {\n    if (allowedOverScroll < 0 || length < 1) {\n      throw new Error('Invalid parameters: allowedOverScroll >= 0 and length >= 1 must be true')\n    }\n\n    this.length = length\n    this.isLooping = isLooping\n    this.allowedOverScroll = allowedOverScroll\n  }\n\n  getCorrectedPosition(position: number): number {\n    if (!this.isLooping) {\n      return Math.max(-this.allowedOverScroll, Math.min(this.allowedOverScroll + this.length - 1, position))\n    }\n    if (position >= this.length) {\n      return position % this.length\n    }\n    if (position < 0) {\n      return this.length - (Math.abs(position) % this.length)\n    }\n    return position\n  }\n\n  static withoutOffset(position: number): number {\n    return position + LoopingArrayCalculator.getOffset(position)\n  }\n\n  static getOffset(position: number): number {\n    return Math.round(position) - position // For example: 45.5 => 46 - 45.5 = 0.5\n  }\n\n  /**\n   * @return absolute distance forwards or Infinity when the target cannot be reached (only possible when not isLooping)\n   */\n  getDistanceDirectional(position: number, target: number, direction: Direction): number {\n    if (!this.isLooping && (position < -this.allowedOverScroll || position > this.allowedOverScroll + this.length - 1)) {\n      throw new Error('Invalid parameters: position is out of bounds.')\n    }\n\n    const isForwardInvalid = (direction === 1 && position > target)\n    const isBackwardInvalid = (direction === -1 && target < position)\n\n    if (!this.isLooping && (isForwardInvalid || isBackwardInvalid)) {\n      return Infinity\n    }\n\n    if (direction === -1) {\n      return this.getDistanceDirectional(target, position, 1)\n    }\n\n    position = this.getCorrectedPosition(position)\n    target = this.getCorrectedPosition(target)\n\n    let distance = (target - position) * direction\n    if (distance < 0) {\n      distance = this.length - (Math.abs(position) % this.length) + target\n    }\n\n    return distance\n  }\n\n  getDistanceForward(position: number, target: number): number {\n    return this.getDistanceDirectional(position, target, 1)\n  }\n\n  getDistanceBackward(position: number, target: number): number {\n    return this.getDistanceDirectional(position, target, -1)\n  }\n\n  getDistance(position: number, target: number): number {\n    const forwardDistance = this.getDistanceForward(position, target)\n    const backwardDistance = this.getDistanceBackward(position, target)\n\n    return Math.min(forwardDistance, backwardDistance)\n  }\n\n  getBestDirection(position: number, target: number): Direction {\n    const forwardDistance = this.getDistanceForward(position, target)\n    const backwardDistance = this.getDistanceBackward(position, target)\n    return forwardDistance < backwardDistance ? 1 : -1\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":["clsx","jsx","jsxs","animationState","dragState","clsx"]}

package/dist/components/layout-and-navigation/Expandable.d.mts

@@ -14,6 +14,7 @@ type ExpandableProps = PropsWithChildren<{
     disabled?: boolean;
     className?: string;
     headerClassName?: string;
+    contentClassName?: string;
 }>;
 /**
  * A Component for showing and hiding content
@@ -30,6 +31,7 @@ declare const Expandable: react.ForwardRefExoticComponent<{
     disabled?: boolean;
     className?: string;
     headerClassName?: string;
+    contentClassName?: string;
 } & {
     children?: ReactNode | undefined;
 } & react.RefAttributes<HTMLDivElement>>;
@@ -45,6 +47,7 @@ declare const ExpandableUncontrolled: react.ForwardRefExoticComponent<{
     disabled?: boolean;
     className?: string;
     headerClassName?: string;
+    contentClassName?: string;
 } & {
     children?: ReactNode | undefined;
 } & react.RefAttributes<HTMLDivElement>>;

package/dist/components/layout-and-navigation/Expandable.d.ts

@@ -14,6 +14,7 @@ type ExpandableProps = PropsWithChildren<{
     disabled?: boolean;
     className?: string;
     headerClassName?: string;
+    contentClassName?: string;
 }>;
 /**
  * A Component for showing and hiding content
@@ -30,6 +31,7 @@ declare const Expandable: react.ForwardRefExoticComponent<{
     disabled?: boolean;
     className?: string;
     headerClassName?: string;
+    contentClassName?: string;
 } & {
     children?: ReactNode | undefined;
 } & react.RefAttributes<HTMLDivElement>>;
@@ -45,6 +47,7 @@ declare const ExpandableUncontrolled: react.ForwardRefExoticComponent<{
     disabled?: boolean;
     className?: string;
     headerClassName?: string;
+    contentClassName?: string;
 } & {
     children?: ReactNode | undefined;
 } & react.RefAttributes<HTMLDivElement>>;

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

@@ -51,8 +51,9 @@ var Expandable = (0, import_react.forwardRef)(function Expandable2({
   onChange = noop,
   clickOnlyOnHeader = true,
   disabled = false,
-  className = "",
-  headerClassName = ""
+  className,
+  headerClassName,
+  contentClassName
 }, ref) {
   icon ??= DefaultIcon;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -81,7 +82,7 @@ var Expandable = (0, import_react.forwardRef)(function Expandable2({
             ]
           }
         ),
-        isExpanded && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "col px-4 pb-2", children })
+        isExpanded && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_clsx.default)("col px-4 pb-2", contentClassName), children })
       ]
     }
   );

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/layout-and-navigation/Expandable.tsx","../../../src/util/noop.ts"],"sourcesContent":["import type { PropsWithChildren, ReactNode } from 'react'\nimport { forwardRef, useEffect, useState } from 'react'\nimport { ChevronDown, ChevronUp } from 'lucide-react'\nimport clsx from 'clsx'\nimport { noop } from '../../util/noop'\n\ntype IconBuilder = (expanded: boolean) => ReactNode\n\nexport type ExpandableProps = PropsWithChildren<{\n  label: ReactNode,\n  icon?: IconBuilder,\n  isExpanded?: boolean,\n  onChange?: (isExpanded: boolean) => void,\n  /**\n   * Whether the expansion should only happen when the header is clicked or on the entire component\n   */\n  clickOnlyOnHeader?: boolean,\n  disabled?: boolean,\n  className?: string,\n  headerClassName?: string,\n}>\n\nconst DefaultIcon: IconBuilder = (expanded) => expanded ?\n  (<ChevronUp size={16} className=\"min-w-[16px]\"/>)\n  : (<ChevronDown size={16} className=\"min-w-[16px]\"/>)\n\n\n/**\n * A Component for showing and hiding content\n */\nexport const Expandable = forwardRef<HTMLDivElement, ExpandableProps>(function Expandable({\n                                                                                            children,\n                                                                                            label,\n                                                                                            icon,\n                                                                                            isExpanded = false,\n                                                                                            onChange = noop,\n                                                                                            clickOnlyOnHeader = true,\n                                                                                            disabled = false,\n                                                                                            className = '',\n                                                                                            headerClassName = ''\n                                                                                          }, ref) {\n  icon ??= DefaultIcon\n\n  return (\n    <div\n      ref={ref}\n      className={clsx('col gap-y-0 bg-surface text-on-surface group rounded-lg shadow-sm', { 'cursor-pointer': !clickOnlyOnHeader && !disabled }, className)}\n      onClick={() => !clickOnlyOnHeader && !disabled && onChange(!isExpanded)}\n    >\n      <div\n        className={clsx(\n          'row py-2 px-4 rounded-lg justify-between items-center bg-surface text-on-surface select-none',\n          {\n            'group-hover:brightness-95': !isExpanded,\n            'hover:brightness-95': isExpanded && !disabled,\n            'cursor-pointer': clickOnlyOnHeader && !disabled,\n          },\n          headerClassName\n        )}\n        onClick={() => clickOnlyOnHeader && !disabled && onChange(!isExpanded)}\n      >\n        {label}\n        {icon(isExpanded)}\n      </div>\n      {isExpanded && (\n        <div className=\"col px-4 pb-2\">\n          {children}\n        </div>\n      )}\n    </div>\n  )\n})\n\nexport const ExpandableUncontrolled = forwardRef<HTMLDivElement, ExpandableProps>(function ExpandableUncontrolled({\n                                                                                                                    isExpanded,\n                                                                                                                    onChange = noop,\n                                                                                                                    ...props\n                                                                                                                  },\n                                                                                                                  ref) {\n  const [usedIsExpanded, setUsedIsExpanded] = useState(isExpanded)\n\n  useEffect(() => {\n    setUsedIsExpanded(isExpanded)\n  }, [isExpanded])\n\n  return (\n    <Expandable\n      {...props}\n      ref={ref}\n      isExpanded={usedIsExpanded}\n      onChange={value => {\n        onChange(value)\n        setUsedIsExpanded(value)\n      }}\n    />\n  )\n})\n","export const noop = () => undefined\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAgD;AAChD,0BAAuC;AACvC,kBAAiB;;;ACHV,IAAM,OAAO,MAAM;;;ADuBvB;AADH,IAAM,cAA2B,CAAC,aAAa,WAC5C,4CAAC,iCAAU,MAAM,IAAI,WAAU,gBAAc,IAC3C,4CAAC,mCAAY,MAAM,IAAI,WAAU,gBAAc;AAM7C,IAAM,iBAAa,yBAA4C,SAASA,YAAW;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,WAAW;AAAA,EACX,oBAAoB;AAAA,EACpB,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,kBAAkB;AACpB,GAAG,KAAK;AAChG,WAAS;AAET,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAW,YAAAC,SAAK,qEAAqE,EAAE,kBAAkB,CAAC,qBAAqB,CAAC,SAAS,GAAG,SAAS;AAAA,MACrJ,SAAS,MAAM,CAAC,qBAAqB,CAAC,YAAY,SAAS,CAAC,UAAU;AAAA,MAEtE;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,eAAW,YAAAA;AAAA,cACT;AAAA,cACA;AAAA,gBACE,6BAA6B,CAAC;AAAA,gBAC9B,uBAAuB,cAAc,CAAC;AAAA,gBACtC,kBAAkB,qBAAqB,CAAC;AAAA,cAC1C;AAAA,cACA;AAAA,YACF;AAAA,YACA,SAAS,MAAM,qBAAqB,CAAC,YAAY,SAAS,CAAC,UAAU;AAAA,YAEpE;AAAA;AAAA,cACA,KAAK,UAAU;AAAA;AAAA;AAAA,QAClB;AAAA,QACC,cACC,4CAAC,SAAI,WAAU,iBACZ,UACH;AAAA;AAAA;AAAA,EAEJ;AAEJ,CAAC;AAEM,IAAM,6BAAyB,yBAA4C,SAASC,wBAAuB;AAAA,EACE;AAAA,EACA,WAAW;AAAA,EACX,GAAG;AACL,GACA,KAAK;AACrH,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAAS,UAAU;AAE/D,8BAAU,MAAM;AACd,sBAAkB,UAAU;AAAA,EAC9B,GAAG,CAAC,UAAU,CAAC;AAEf,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,YAAY;AAAA,MACZ,UAAU,WAAS;AACjB,iBAAS,KAAK;AACd,0BAAkB,KAAK;AAAA,MACzB;AAAA;AAAA,EACF;AAEJ,CAAC;","names":["Expandable","clsx","ExpandableUncontrolled"]}
+{"version":3,"sources":["../../../src/components/layout-and-navigation/Expandable.tsx","../../../src/util/noop.ts"],"sourcesContent":["import type { PropsWithChildren, ReactNode } from 'react'\nimport { forwardRef, useEffect, useState } from 'react'\nimport { ChevronDown, ChevronUp } from 'lucide-react'\nimport clsx from 'clsx'\nimport { noop } from '../../util/noop'\n\ntype IconBuilder = (expanded: boolean) => ReactNode\n\nexport type ExpandableProps = PropsWithChildren<{\n  label: ReactNode,\n  icon?: IconBuilder,\n  isExpanded?: boolean,\n  onChange?: (isExpanded: boolean) => void,\n  /**\n   * Whether the expansion should only happen when the header is clicked or on the entire component\n   */\n  clickOnlyOnHeader?: boolean,\n  disabled?: boolean,\n  className?: string,\n  headerClassName?: string,\n  contentClassName?: string,\n}>\n\nconst DefaultIcon: IconBuilder = (expanded) => expanded ?\n  (<ChevronUp size={16} className=\"min-w-[16px]\"/>)\n  : (<ChevronDown size={16} className=\"min-w-[16px]\"/>)\n\n\n/**\n * A Component for showing and hiding content\n */\nexport const Expandable = forwardRef<HTMLDivElement, ExpandableProps>(function Expandable({\n                                                                                            children,\n                                                                                            label,\n                                                                                            icon,\n                                                                                            isExpanded = false,\n                                                                                            onChange = noop,\n                                                                                            clickOnlyOnHeader = true,\n                                                                                            disabled = false,\n                                                                                            className,\n                                                                                            headerClassName,\n                                                                                            contentClassName,\n                                                                                          }, ref) {\n  icon ??= DefaultIcon\n\n  return (\n    <div\n      ref={ref}\n      className={clsx('col gap-y-0 bg-surface text-on-surface group rounded-lg shadow-sm', { 'cursor-pointer': !clickOnlyOnHeader && !disabled }, className)}\n      onClick={() => !clickOnlyOnHeader && !disabled && onChange(!isExpanded)}\n    >\n      <div\n        className={clsx(\n          'row py-2 px-4 rounded-lg justify-between items-center bg-surface text-on-surface select-none',\n          {\n            'group-hover:brightness-95': !isExpanded,\n            'hover:brightness-95': isExpanded && !disabled,\n            'cursor-pointer': clickOnlyOnHeader && !disabled,\n          },\n          headerClassName\n        )}\n        onClick={() => clickOnlyOnHeader && !disabled && onChange(!isExpanded)}\n      >\n        {label}\n        {icon(isExpanded)}\n      </div>\n      {isExpanded && (\n        <div className={clsx('col px-4 pb-2', contentClassName)}>\n          {children}\n        </div>\n      )}\n    </div>\n  )\n})\n\nexport const ExpandableUncontrolled = forwardRef<HTMLDivElement, ExpandableProps>(function ExpandableUncontrolled({\n                                                                                                                    isExpanded,\n                                                                                                                    onChange = noop,\n                                                                                                                    ...props\n                                                                                                                  },\n                                                                                                                  ref) {\n  const [usedIsExpanded, setUsedIsExpanded] = useState(isExpanded)\n\n  useEffect(() => {\n    setUsedIsExpanded(isExpanded)\n  }, [isExpanded])\n\n  return (\n    <Expandable\n      {...props}\n      ref={ref}\n      isExpanded={usedIsExpanded}\n      onChange={value => {\n        onChange(value)\n        setUsedIsExpanded(value)\n      }}\n    />\n  )\n})\n","export const noop = () => undefined\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAgD;AAChD,0BAAuC;AACvC,kBAAiB;;;ACHV,IAAM,OAAO,MAAM;;;ADwBvB;AADH,IAAM,cAA2B,CAAC,aAAa,WAC5C,4CAAC,iCAAU,MAAM,IAAI,WAAU,gBAAc,IAC3C,4CAAC,mCAAY,MAAM,IAAI,WAAU,gBAAc;AAM7C,IAAM,iBAAa,yBAA4C,SAASA,YAAW;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,WAAW;AAAA,EACX,oBAAoB;AAAA,EACpB,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AACF,GAAG,KAAK;AAChG,WAAS;AAET,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAW,YAAAC,SAAK,qEAAqE,EAAE,kBAAkB,CAAC,qBAAqB,CAAC,SAAS,GAAG,SAAS;AAAA,MACrJ,SAAS,MAAM,CAAC,qBAAqB,CAAC,YAAY,SAAS,CAAC,UAAU;AAAA,MAEtE;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,eAAW,YAAAA;AAAA,cACT;AAAA,cACA;AAAA,gBACE,6BAA6B,CAAC;AAAA,gBAC9B,uBAAuB,cAAc,CAAC;AAAA,gBACtC,kBAAkB,qBAAqB,CAAC;AAAA,cAC1C;AAAA,cACA;AAAA,YACF;AAAA,YACA,SAAS,MAAM,qBAAqB,CAAC,YAAY,SAAS,CAAC,UAAU;AAAA,YAEpE;AAAA;AAAA,cACA,KAAK,UAAU;AAAA;AAAA;AAAA,QAClB;AAAA,QACC,cACC,4CAAC,SAAI,eAAW,YAAAA,SAAK,iBAAiB,gBAAgB,GACnD,UACH;AAAA;AAAA;AAAA,EAEJ;AAEJ,CAAC;AAEM,IAAM,6BAAyB,yBAA4C,SAASC,wBAAuB;AAAA,EACE;AAAA,EACA,WAAW;AAAA,EACX,GAAG;AACL,GACA,KAAK;AACrH,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAAS,UAAU;AAE/D,8BAAU,MAAM;AACd,sBAAkB,UAAU;AAAA,EAC9B,GAAG,CAAC,UAAU,CAAC;AAEf,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,YAAY;AAAA,MACZ,UAAU,WAAS;AACjB,iBAAS,KAAK;AACd,0BAAkB,KAAK;AAAA,MACzB;AAAA;AAAA,EACF;AAEJ,CAAC;","names":["Expandable","clsx","ExpandableUncontrolled"]}

package/dist/components/layout-and-navigation/Expandable.mjs

@@ -17,8 +17,9 @@ var Expandable = forwardRef(function Expandable2({
   onChange = noop,
   clickOnlyOnHeader = true,
   disabled = false,
-  className = "",
-  headerClassName = ""
+  className,
+  headerClassName,
+  contentClassName
 }, ref) {
   icon ??= DefaultIcon;
   return /* @__PURE__ */ jsxs(
@@ -47,7 +48,7 @@ var Expandable = forwardRef(function Expandable2({
             ]
           }
         ),
-        isExpanded && /* @__PURE__ */ jsx("div", { className: "col px-4 pb-2", children })
+        isExpanded && /* @__PURE__ */ jsx("div", { className: clsx("col px-4 pb-2", contentClassName), children })
       ]
     }
   );

package/dist/components/layout-and-navigation/Expandable.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/layout-and-navigation/Expandable.tsx","../../../src/util/noop.ts"],"sourcesContent":["import type { PropsWithChildren, ReactNode } from 'react'\nimport { forwardRef, useEffect, useState } from 'react'\nimport { ChevronDown, ChevronUp } from 'lucide-react'\nimport clsx from 'clsx'\nimport { noop } from '../../util/noop'\n\ntype IconBuilder = (expanded: boolean) => ReactNode\n\nexport type ExpandableProps = PropsWithChildren<{\n  label: ReactNode,\n  icon?: IconBuilder,\n  isExpanded?: boolean,\n  onChange?: (isExpanded: boolean) => void,\n  /**\n   * Whether the expansion should only happen when the header is clicked or on the entire component\n   */\n  clickOnlyOnHeader?: boolean,\n  disabled?: boolean,\n  className?: string,\n  headerClassName?: string,\n}>\n\nconst DefaultIcon: IconBuilder = (expanded) => expanded ?\n  (<ChevronUp size={16} className=\"min-w-[16px]\"/>)\n  : (<ChevronDown size={16} className=\"min-w-[16px]\"/>)\n\n\n/**\n * A Component for showing and hiding content\n */\nexport const Expandable = forwardRef<HTMLDivElement, ExpandableProps>(function Expandable({\n                                                                                            children,\n                                                                                            label,\n                                                                                            icon,\n                                                                                            isExpanded = false,\n                                                                                            onChange = noop,\n                                                                                            clickOnlyOnHeader = true,\n                                                                                            disabled = false,\n                                                                                            className = '',\n                                                                                            headerClassName = ''\n                                                                                          }, ref) {\n  icon ??= DefaultIcon\n\n  return (\n    <div\n      ref={ref}\n      className={clsx('col gap-y-0 bg-surface text-on-surface group rounded-lg shadow-sm', { 'cursor-pointer': !clickOnlyOnHeader && !disabled }, className)}\n      onClick={() => !clickOnlyOnHeader && !disabled && onChange(!isExpanded)}\n    >\n      <div\n        className={clsx(\n          'row py-2 px-4 rounded-lg justify-between items-center bg-surface text-on-surface select-none',\n          {\n            'group-hover:brightness-95': !isExpanded,\n            'hover:brightness-95': isExpanded && !disabled,\n            'cursor-pointer': clickOnlyOnHeader && !disabled,\n          },\n          headerClassName\n        )}\n        onClick={() => clickOnlyOnHeader && !disabled && onChange(!isExpanded)}\n      >\n        {label}\n        {icon(isExpanded)}\n      </div>\n      {isExpanded && (\n        <div className=\"col px-4 pb-2\">\n          {children}\n        </div>\n      )}\n    </div>\n  )\n})\n\nexport const ExpandableUncontrolled = forwardRef<HTMLDivElement, ExpandableProps>(function ExpandableUncontrolled({\n                                                                                                                    isExpanded,\n                                                                                                                    onChange = noop,\n                                                                                                                    ...props\n                                                                                                                  },\n                                                                                                                  ref) {\n  const [usedIsExpanded, setUsedIsExpanded] = useState(isExpanded)\n\n  useEffect(() => {\n    setUsedIsExpanded(isExpanded)\n  }, [isExpanded])\n\n  return (\n    <Expandable\n      {...props}\n      ref={ref}\n      isExpanded={usedIsExpanded}\n      onChange={value => {\n        onChange(value)\n        setUsedIsExpanded(value)\n      }}\n    />\n  )\n})\n","export const noop = () => undefined\n"],"mappings":";AACA,SAAS,YAAY,WAAW,gBAAgB;AAChD,SAAS,aAAa,iBAAiB;AACvC,OAAO,UAAU;;;ACHV,IAAM,OAAO,MAAM;;;ADuBvB,cA0BG,YA1BH;AADH,IAAM,cAA2B,CAAC,aAAa,WAC5C,oBAAC,aAAU,MAAM,IAAI,WAAU,gBAAc,IAC3C,oBAAC,eAAY,MAAM,IAAI,WAAU,gBAAc;AAM7C,IAAM,aAAa,WAA4C,SAASA,YAAW;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,WAAW;AAAA,EACX,oBAAoB;AAAA,EACpB,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,kBAAkB;AACpB,GAAG,KAAK;AAChG,WAAS;AAET,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,KAAK,qEAAqE,EAAE,kBAAkB,CAAC,qBAAqB,CAAC,SAAS,GAAG,SAAS;AAAA,MACrJ,SAAS,MAAM,CAAC,qBAAqB,CAAC,YAAY,SAAS,CAAC,UAAU;AAAA,MAEtE;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,gBACE,6BAA6B,CAAC;AAAA,gBAC9B,uBAAuB,cAAc,CAAC;AAAA,gBACtC,kBAAkB,qBAAqB,CAAC;AAAA,cAC1C;AAAA,cACA;AAAA,YACF;AAAA,YACA,SAAS,MAAM,qBAAqB,CAAC,YAAY,SAAS,CAAC,UAAU;AAAA,YAEpE;AAAA;AAAA,cACA,KAAK,UAAU;AAAA;AAAA;AAAA,QAClB;AAAA,QACC,cACC,oBAAC,SAAI,WAAU,iBACZ,UACH;AAAA;AAAA;AAAA,EAEJ;AAEJ,CAAC;AAEM,IAAM,yBAAyB,WAA4C,SAASC,wBAAuB;AAAA,EACE;AAAA,EACA,WAAW;AAAA,EACX,GAAG;AACL,GACA,KAAK;AACrH,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,UAAU;AAE/D,YAAU,MAAM;AACd,sBAAkB,UAAU;AAAA,EAC9B,GAAG,CAAC,UAAU,CAAC;AAEf,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,YAAY;AAAA,MACZ,UAAU,WAAS;AACjB,iBAAS,KAAK;AACd,0BAAkB,KAAK;AAAA,MACzB;AAAA;AAAA,EACF;AAEJ,CAAC;","names":["Expandable","ExpandableUncontrolled"]}
+{"version":3,"sources":["../../../src/components/layout-and-navigation/Expandable.tsx","../../../src/util/noop.ts"],"sourcesContent":["import type { PropsWithChildren, ReactNode } from 'react'\nimport { forwardRef, useEffect, useState } from 'react'\nimport { ChevronDown, ChevronUp } from 'lucide-react'\nimport clsx from 'clsx'\nimport { noop } from '../../util/noop'\n\ntype IconBuilder = (expanded: boolean) => ReactNode\n\nexport type ExpandableProps = PropsWithChildren<{\n  label: ReactNode,\n  icon?: IconBuilder,\n  isExpanded?: boolean,\n  onChange?: (isExpanded: boolean) => void,\n  /**\n   * Whether the expansion should only happen when the header is clicked or on the entire component\n   */\n  clickOnlyOnHeader?: boolean,\n  disabled?: boolean,\n  className?: string,\n  headerClassName?: string,\n  contentClassName?: string,\n}>\n\nconst DefaultIcon: IconBuilder = (expanded) => expanded ?\n  (<ChevronUp size={16} className=\"min-w-[16px]\"/>)\n  : (<ChevronDown size={16} className=\"min-w-[16px]\"/>)\n\n\n/**\n * A Component for showing and hiding content\n */\nexport const Expandable = forwardRef<HTMLDivElement, ExpandableProps>(function Expandable({\n                                                                                            children,\n                                                                                            label,\n                                                                                            icon,\n                                                                                            isExpanded = false,\n                                                                                            onChange = noop,\n                                                                                            clickOnlyOnHeader = true,\n                                                                                            disabled = false,\n                                                                                            className,\n                                                                                            headerClassName,\n                                                                                            contentClassName,\n                                                                                          }, ref) {\n  icon ??= DefaultIcon\n\n  return (\n    <div\n      ref={ref}\n      className={clsx('col gap-y-0 bg-surface text-on-surface group rounded-lg shadow-sm', { 'cursor-pointer': !clickOnlyOnHeader && !disabled }, className)}\n      onClick={() => !clickOnlyOnHeader && !disabled && onChange(!isExpanded)}\n    >\n      <div\n        className={clsx(\n          'row py-2 px-4 rounded-lg justify-between items-center bg-surface text-on-surface select-none',\n          {\n            'group-hover:brightness-95': !isExpanded,\n            'hover:brightness-95': isExpanded && !disabled,\n            'cursor-pointer': clickOnlyOnHeader && !disabled,\n          },\n          headerClassName\n        )}\n        onClick={() => clickOnlyOnHeader && !disabled && onChange(!isExpanded)}\n      >\n        {label}\n        {icon(isExpanded)}\n      </div>\n      {isExpanded && (\n        <div className={clsx('col px-4 pb-2', contentClassName)}>\n          {children}\n        </div>\n      )}\n    </div>\n  )\n})\n\nexport const ExpandableUncontrolled = forwardRef<HTMLDivElement, ExpandableProps>(function ExpandableUncontrolled({\n                                                                                                                    isExpanded,\n                                                                                                                    onChange = noop,\n                                                                                                                    ...props\n                                                                                                                  },\n                                                                                                                  ref) {\n  const [usedIsExpanded, setUsedIsExpanded] = useState(isExpanded)\n\n  useEffect(() => {\n    setUsedIsExpanded(isExpanded)\n  }, [isExpanded])\n\n  return (\n    <Expandable\n      {...props}\n      ref={ref}\n      isExpanded={usedIsExpanded}\n      onChange={value => {\n        onChange(value)\n        setUsedIsExpanded(value)\n      }}\n    />\n  )\n})\n","export const noop = () => undefined\n"],"mappings":";AACA,SAAS,YAAY,WAAW,gBAAgB;AAChD,SAAS,aAAa,iBAAiB;AACvC,OAAO,UAAU;;;ACHV,IAAM,OAAO,MAAM;;;ADwBvB,cA2BG,YA3BH;AADH,IAAM,cAA2B,CAAC,aAAa,WAC5C,oBAAC,aAAU,MAAM,IAAI,WAAU,gBAAc,IAC3C,oBAAC,eAAY,MAAM,IAAI,WAAU,gBAAc;AAM7C,IAAM,aAAa,WAA4C,SAASA,YAAW;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,WAAW;AAAA,EACX,oBAAoB;AAAA,EACpB,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AACF,GAAG,KAAK;AAChG,WAAS;AAET,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,KAAK,qEAAqE,EAAE,kBAAkB,CAAC,qBAAqB,CAAC,SAAS,GAAG,SAAS;AAAA,MACrJ,SAAS,MAAM,CAAC,qBAAqB,CAAC,YAAY,SAAS,CAAC,UAAU;AAAA,MAEtE;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,gBACE,6BAA6B,CAAC;AAAA,gBAC9B,uBAAuB,cAAc,CAAC;AAAA,gBACtC,kBAAkB,qBAAqB,CAAC;AAAA,cAC1C;AAAA,cACA;AAAA,YACF;AAAA,YACA,SAAS,MAAM,qBAAqB,CAAC,YAAY,SAAS,CAAC,UAAU;AAAA,YAEpE;AAAA;AAAA,cACA,KAAK,UAAU;AAAA;AAAA;AAAA,QAClB;AAAA,QACC,cACC,oBAAC,SAAI,WAAW,KAAK,iBAAiB,gBAAgB,GACnD,UACH;AAAA;AAAA;AAAA,EAEJ;AAEJ,CAAC;AAEM,IAAM,yBAAyB,WAA4C,SAASC,wBAAuB;AAAA,EACE;AAAA,EACA,WAAW;AAAA,EACX,GAAG;AACL,GACA,KAAK;AACrH,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,UAAU;AAE/D,YAAU,MAAM;AACd,sBAAkB,UAAU;AAAA,EAC9B,GAAG,CAAC,UAAU,CAAC;AAEf,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,YAAY;AAAA,MACZ,UAAU,WAAS;AACjB,iBAAS,KAAK;AACd,0BAAkB,KAAK;AAAA,MACzB;AAAA;AAAA,EACF;AAEJ,CAAC;","names":["Expandable","ExpandableUncontrolled"]}

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

@@ -54,8 +54,9 @@ var Expandable = (0, import_react.forwardRef)(function Expandable2({
   onChange = noop,
   clickOnlyOnHeader = true,
   disabled = false,
-  className = "",
-  headerClassName = ""
+  className,
+  headerClassName,
+  contentClassName
 }, ref) {
   icon ??= DefaultIcon;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -84,7 +85,7 @@ var Expandable = (0, import_react.forwardRef)(function Expandable2({
             ]
           }
         ),
-        isExpanded && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "col px-4 pb-2", children })
+        isExpanded && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_clsx.default)("col px-4 pb-2", contentClassName), children })
       ]
     }
   );

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/layout-and-navigation/FAQSection.tsx","../../../src/components/layout-and-navigation/Expandable.tsx","../../../src/util/noop.ts","../../../src/components/layout-and-navigation/MarkdownInterpreter.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport clsx from 'clsx'\nimport { ChevronDown, ChevronUp } from 'lucide-react'\nimport type { ExpandableProps } from './Expandable'\nimport { ExpandableUncontrolled } from './Expandable'\nimport { MarkdownInterpreter } from './MarkdownInterpreter'\n\ntype ContentType = {\n  type: 'markdown',\n  value: string,\n} | {\n  type: 'custom',\n  value: ReactNode,\n}\n\nexport type FAQItem = Pick<ExpandableProps, 'isExpanded' | 'className'> & {\n  id: string,\n  title: string,\n  content: ContentType,\n}\n\nexport type FAQSectionProps = {\n  entries: FAQItem[],\n  expandableClassName?: string,\n}\n\n/**\n * Description\n */\nexport const FAQSection = ({\n                             entries,\n                             expandableClassName\n                           }: FAQSectionProps) => {\n  const chevronSize = 28\n  return (\n    <div className=\"col gap-y-4\">\n      {entries.map(({ id, title, content, ...restProps }) => (\n        <ExpandableUncontrolled\n          key={id}\n          {...restProps}\n          label={(<h3 id={id} className=\"textstyle-title-md\">{title}</h3>)}\n          clickOnlyOnHeader={false}\n          icon={(expanded) => expanded ?\n            (<ChevronUp size={chevronSize} className=\"text-primary\" style={{ minWidth: `${chevronSize}px` }}/>) :\n            (<ChevronDown size={chevronSize} className=\"text-primary\"/>)\n          }\n          className={clsx('rounded-xl', expandableClassName)}\n        >\n          <div className=\"mt-2\">\n            {content.type === 'markdown' ? (<MarkdownInterpreter text={content.value}/>) : content.value}\n          </div>\n        </ExpandableUncontrolled>\n      ))}\n    </div>\n  )\n}\n","import type { PropsWithChildren, ReactNode } from 'react'\nimport { forwardRef, useEffect, useState } from 'react'\nimport { ChevronDown, ChevronUp } from 'lucide-react'\nimport clsx from 'clsx'\nimport { noop } from '../../util/noop'\n\ntype IconBuilder = (expanded: boolean) => ReactNode\n\nexport type ExpandableProps = PropsWithChildren<{\n  label: ReactNode,\n  icon?: IconBuilder,\n  isExpanded?: boolean,\n  onChange?: (isExpanded: boolean) => void,\n  /**\n   * Whether the expansion should only happen when the header is clicked or on the entire component\n   */\n  clickOnlyOnHeader?: boolean,\n  disabled?: boolean,\n  className?: string,\n  headerClassName?: string,\n}>\n\nconst DefaultIcon: IconBuilder = (expanded) => expanded ?\n  (<ChevronUp size={16} className=\"min-w-[16px]\"/>)\n  : (<ChevronDown size={16} className=\"min-w-[16px]\"/>)\n\n\n/**\n * A Component for showing and hiding content\n */\nexport const Expandable = forwardRef<HTMLDivElement, ExpandableProps>(function Expandable({\n                                                                                            children,\n                                                                                            label,\n                                                                                            icon,\n                                                                                            isExpanded = false,\n                                                                                            onChange = noop,\n                                                                                            clickOnlyOnHeader = true,\n                                                                                            disabled = false,\n                                                                                            className = '',\n                                                                                            headerClassName = ''\n                                                                                          }, ref) {\n  icon ??= DefaultIcon\n\n  return (\n    <div\n      ref={ref}\n      className={clsx('col gap-y-0 bg-surface text-on-surface group rounded-lg shadow-sm', { 'cursor-pointer': !clickOnlyOnHeader && !disabled }, className)}\n      onClick={() => !clickOnlyOnHeader && !disabled && onChange(!isExpanded)}\n    >\n      <div\n        className={clsx(\n          'row py-2 px-4 rounded-lg justify-between items-center bg-surface text-on-surface select-none',\n          {\n            'group-hover:brightness-95': !isExpanded,\n            'hover:brightness-95': isExpanded && !disabled,\n            'cursor-pointer': clickOnlyOnHeader && !disabled,\n          },\n          headerClassName\n        )}\n        onClick={() => clickOnlyOnHeader && !disabled && onChange(!isExpanded)}\n      >\n        {label}\n        {icon(isExpanded)}\n      </div>\n      {isExpanded && (\n        <div className=\"col px-4 pb-2\">\n          {children}\n        </div>\n      )}\n    </div>\n  )\n})\n\nexport const ExpandableUncontrolled = forwardRef<HTMLDivElement, ExpandableProps>(function ExpandableUncontrolled({\n                                                                                                                    isExpanded,\n                                                                                                                    onChange = noop,\n                                                                                                                    ...props\n                                                                                                                  },\n                                                                                                                  ref) {\n  const [usedIsExpanded, setUsedIsExpanded] = useState(isExpanded)\n\n  useEffect(() => {\n    setUsedIsExpanded(isExpanded)\n  }, [isExpanded])\n\n  return (\n    <Expandable\n      {...props}\n      ref={ref}\n      isExpanded={usedIsExpanded}\n      onChange={value => {\n        onChange(value)\n        setUsedIsExpanded(value)\n      }}\n    />\n  )\n})\n","export const noop = () => undefined\n","type ASTNodeModifierType =\n  'none'\n  | 'italic'\n  | 'bold'\n  | 'underline'\n  | 'font-space'\n  | 'primary'\n  | 'secondary'\n  | 'warn'\n  | 'positive'\n  | 'negative'\n\nconst astNodeInserterType = ['helpwave', 'newline'] as const\ntype ASTNodeInserterType = typeof astNodeInserterType[number]\ntype ASTNodeDefaultType = 'text'\n\ntype ASTNode = {\n  type: ASTNodeModifierType,\n  children: ASTNode[],\n} | {\n  type: ASTNodeInserterType,\n} | {\n  type: ASTNodeDefaultType,\n  text: string,\n}\n\nexport type ASTNodeInterpreterProps = {\n  node: ASTNode,\n  isRoot?: boolean,\n  className?: string,\n}\nexport const ASTNodeInterpreter = ({\n                                     node,\n                                     isRoot = false,\n                                     className = '',\n                                   }: ASTNodeInterpreterProps) => {\n  switch (node.type) {\n    case 'newline':\n      return <br/>\n    case 'text':\n      return isRoot ? <span className={className}>{node.text}</span> : node.text\n    case 'helpwave':\n      return (<span className=\"font-bold font-space no-underline\">helpwave</span>)\n    case 'none':\n      return isRoot ? (\n          <span className={className}>{node.children.map((value, index) => (\n            <ASTNodeInterpreter key={index}\n                                node={value}/>\n          ))}</span>\n        ) :\n        <>{node.children.map((value, index) => <ASTNodeInterpreter key={index} node={value}/>)}</>\n    case 'bold':\n      return <b>{node.children.map((value, index) => <ASTNodeInterpreter key={index} node={value}/>)}</b>\n    case 'italic':\n      return <i>{node.children.map((value, index) => <ASTNodeInterpreter key={index} node={value}/>)}</i>\n    case 'underline':\n      return (<u>{node.children.map((value, index) => (<ASTNodeInterpreter key={index} node={value}/>))}</u>)\n    case 'font-space':\n      return (\n        <span className=\"font-space\">{node.children.map((value, index) => (\n          <ASTNodeInterpreter key={index}\n                              node={value}/>\n        ))}</span>\n      )\n    case 'primary':\n      return (\n        <span className=\"text-primary\">{node.children.map((value, index) => (\n          <ASTNodeInterpreter\n            key={index} node={value}/>\n        ))}</span>\n      )\n    case 'secondary':\n      return (\n        <span className=\"text-secondary\">{node.children.map((value, index) => (\n          <ASTNodeInterpreter\n            key={index} node={value}/>\n        ))}</span>\n      )\n    case 'warn':\n      return (\n        <span className=\"text-warning\">{node.children.map((value, index) => (\n          <ASTNodeInterpreter\n            key={index} node={value}/>\n        ))}</span>\n      )\n    case 'positive':\n      return (\n        <span className=\"text-positive\">{node.children.map((value, index) => (\n          <ASTNodeInterpreter\n            key={index} node={value}/>\n        ))}</span>\n      )\n    case 'negative':\n      return (\n        <span className=\"text-negative\">{node.children.map((value, index) => (\n          <ASTNodeInterpreter\n            key={index} node={value}/>\n        ))}</span>\n      )\n    default:\n      return null\n  }\n}\n\nconst modifierIdentifierMapping = [\n  { id: 'i', name: 'italic' },\n  { id: 'b', name: 'bold' },\n  { id: 'u', name: 'underline' },\n  { id: 'space', name: 'font-space' },\n  { id: 'primary', name: 'primary' },\n  { id: 'secondary', name: 'secondary' },\n  { id: 'warn', name: 'warn' },\n  { id: 'positive', name: 'positive' },\n  { id: 'negative', name: 'negative' },\n] as const\n\nconst inserterIdentifierMapping = [\n  { id: 'helpwave', name: 'helpwave' },\n  { id: 'newline', name: 'newline' }\n] as const\nconst parseMarkdown = (\n  text: string,\n  commandStart: string = '\\\\',\n  open: string = '{',\n  close: string = '}'\n): ASTNode => {\n  let start = text.indexOf(commandStart)\n  const children: ASTNode[] = []\n\n  // parse the text step by step\n  while (text !== '') {\n    if (start === -1) {\n      children.push({\n        type: 'text',\n        text\n      })\n      break\n    }\n    children.push(parseMarkdown(text.substring(0, start)))\n    text = text.substring(start)\n    if (text.length <= 1) {\n      children.push({\n        type: 'text',\n        text\n      })\n      text = ''\n      continue\n    }\n    const simpleReplace = [commandStart, open, close]\n    if (simpleReplace.some(value => text[1] === value)) {\n      children.push({\n        type: 'text',\n        text: simpleReplace.find(value => text[1] === value)!\n      })\n      text = text.substring(2)\n      start = text.indexOf(commandStart)\n      continue\n    }\n    const inserter = inserterIdentifierMapping.find(value => text.substring(1).startsWith(value.id))\n    if (inserter) {\n      children.push({\n        type: inserter.name,\n      })\n      text = text.substring(inserter.id.length + 1)\n      start = text.indexOf(commandStart)\n      continue\n    }\n    const modifier = modifierIdentifierMapping.find(value => text.substring(1).startsWith(value.id))\n    if (modifier) {\n      // check brackets\n      if (text[modifier.id.length + 1] !== open) {\n        children.push({\n          type: 'text',\n          text: text.substring(0, modifier.id.length + 1)\n        })\n        text = text.substring(modifier.id.length + 2)\n        start = text.indexOf(commandStart)\n        continue\n      }\n      let closing = -1\n      let index = modifier.id.length + 2\n      let counter = 1\n      let escaping = false\n      while (index < text.length) {\n        if (text[index] === open && !escaping) {\n          counter++\n        }\n        if (text[index] === close && !escaping) {\n          counter--\n          if (counter === 0) {\n            closing = index\n            break\n          }\n        }\n        escaping = text[index] === commandStart\n        index++\n      }\n\n      if (closing !== -1) {\n        children.push({\n          type: modifier.name,\n          children: [parseMarkdown(text.substring(modifier.id.length + 2, closing))]\n        })\n        text = text.substring(closing + 1)\n        start = text.indexOf(commandStart)\n        continue\n      }\n    }\n    // nothing could be applied to command start\n    children.push({\n      type: 'text',\n      text: text[0]!\n    })\n    text = text.substring(1)\n    start = text.indexOf(commandStart)\n  }\n\n  return {\n    type: 'none',\n    children\n  }\n}\n\nconst optimizeTree = (node: ASTNode) => {\n  if (node.type === 'text') {\n    return !node.text ? undefined : node\n  }\n  if (astNodeInserterType.some(value => value === node.type)) {\n    return node\n  }\n\n  const currentNode = node as\n    { type: ASTNodeModifierType, children: ASTNode[] }\n\n  if (currentNode.children.length === 0) {\n    return undefined\n  }\n\n  let children: ASTNode[] = []\n  for (let i = 0; i < currentNode.children.length; i++) {\n    const child = optimizeTree(currentNode.children[i]!)\n    if (!child) {\n      continue\n    }\n    if (child.type === 'none') {\n      children.push(...child.children)\n    } else {\n      children.push(child)\n    }\n  }\n\n  currentNode.children = children\n  children = []\n\n  for (let i = 0; i < currentNode.children.length; i++) {\n    const child = currentNode.children[i]!\n    if (child) {\n      if (child.type === 'text' && children[children.length - 1]?.type === 'text') {\n        (children[children.length - 1]! as { type: ASTNodeDefaultType, text: string }).text += child.text\n      } else {\n        children.push(child)\n      }\n    }\n  }\n  currentNode.children = children\n  return currentNode\n}\n\nexport type MarkdownInterpreterProps = {\n  text: string,\n  className?: string,\n}\n\nexport const MarkdownInterpreter = ({ text, className }: MarkdownInterpreterProps) => {\n  const tree = parseMarkdown(text)\n  const optimizedTree = optimizeTree(tree)!\n  return <ASTNodeInterpreter node={optimizedTree} isRoot={true} className={className}/>\n}\n"],"mappings":"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","names":["import_clsx","import_lucide_react","Expandable","clsx","ExpandableUncontrolled","import_jsx_runtime","import_jsx_runtime","clsx"]}
+{"version":3,"sources":["../../../src/components/layout-and-navigation/FAQSection.tsx","../../../src/components/layout-and-navigation/Expandable.tsx","../../../src/util/noop.ts","../../../src/components/layout-and-navigation/MarkdownInterpreter.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport clsx from 'clsx'\nimport { ChevronDown, ChevronUp } from 'lucide-react'\nimport type { ExpandableProps } from './Expandable'\nimport { ExpandableUncontrolled } from './Expandable'\nimport { MarkdownInterpreter } from './MarkdownInterpreter'\n\ntype ContentType = {\n  type: 'markdown',\n  value: string,\n} | {\n  type: 'custom',\n  value: ReactNode,\n}\n\nexport type FAQItem = Pick<ExpandableProps, 'isExpanded' | 'className'> & {\n  id: string,\n  title: string,\n  content: ContentType,\n}\n\nexport type FAQSectionProps = {\n  entries: FAQItem[],\n  expandableClassName?: string,\n}\n\n/**\n * Description\n */\nexport const FAQSection = ({\n                             entries,\n                             expandableClassName\n                           }: FAQSectionProps) => {\n  const chevronSize = 28\n  return (\n    <div className=\"col gap-y-4\">\n      {entries.map(({ id, title, content, ...restProps }) => (\n        <ExpandableUncontrolled\n          key={id}\n          {...restProps}\n          label={(<h3 id={id} className=\"textstyle-title-md\">{title}</h3>)}\n          clickOnlyOnHeader={false}\n          icon={(expanded) => expanded ?\n            (<ChevronUp size={chevronSize} className=\"text-primary\" style={{ minWidth: `${chevronSize}px` }}/>) :\n            (<ChevronDown size={chevronSize} className=\"text-primary\"/>)\n          }\n          className={clsx('rounded-xl', expandableClassName)}\n        >\n          <div className=\"mt-2\">\n            {content.type === 'markdown' ? (<MarkdownInterpreter text={content.value}/>) : content.value}\n          </div>\n        </ExpandableUncontrolled>\n      ))}\n    </div>\n  )\n}\n","import type { PropsWithChildren, ReactNode } from 'react'\nimport { forwardRef, useEffect, useState } from 'react'\nimport { ChevronDown, ChevronUp } from 'lucide-react'\nimport clsx from 'clsx'\nimport { noop } from '../../util/noop'\n\ntype IconBuilder = (expanded: boolean) => ReactNode\n\nexport type ExpandableProps = PropsWithChildren<{\n  label: ReactNode,\n  icon?: IconBuilder,\n  isExpanded?: boolean,\n  onChange?: (isExpanded: boolean) => void,\n  /**\n   * Whether the expansion should only happen when the header is clicked or on the entire component\n   */\n  clickOnlyOnHeader?: boolean,\n  disabled?: boolean,\n  className?: string,\n  headerClassName?: string,\n  contentClassName?: string,\n}>\n\nconst DefaultIcon: IconBuilder = (expanded) => expanded ?\n  (<ChevronUp size={16} className=\"min-w-[16px]\"/>)\n  : (<ChevronDown size={16} className=\"min-w-[16px]\"/>)\n\n\n/**\n * A Component for showing and hiding content\n */\nexport const Expandable = forwardRef<HTMLDivElement, ExpandableProps>(function Expandable({\n                                                                                            children,\n                                                                                            label,\n                                                                                            icon,\n                                                                                            isExpanded = false,\n                                                                                            onChange = noop,\n                                                                                            clickOnlyOnHeader = true,\n                                                                                            disabled = false,\n                                                                                            className,\n                                                                                            headerClassName,\n                                                                                            contentClassName,\n                                                                                          }, ref) {\n  icon ??= DefaultIcon\n\n  return (\n    <div\n      ref={ref}\n      className={clsx('col gap-y-0 bg-surface text-on-surface group rounded-lg shadow-sm', { 'cursor-pointer': !clickOnlyOnHeader && !disabled }, className)}\n      onClick={() => !clickOnlyOnHeader && !disabled && onChange(!isExpanded)}\n    >\n      <div\n        className={clsx(\n          'row py-2 px-4 rounded-lg justify-between items-center bg-surface text-on-surface select-none',\n          {\n            'group-hover:brightness-95': !isExpanded,\n            'hover:brightness-95': isExpanded && !disabled,\n            'cursor-pointer': clickOnlyOnHeader && !disabled,\n          },\n          headerClassName\n        )}\n        onClick={() => clickOnlyOnHeader && !disabled && onChange(!isExpanded)}\n      >\n        {label}\n        {icon(isExpanded)}\n      </div>\n      {isExpanded && (\n        <div className={clsx('col px-4 pb-2', contentClassName)}>\n          {children}\n        </div>\n      )}\n    </div>\n  )\n})\n\nexport const ExpandableUncontrolled = forwardRef<HTMLDivElement, ExpandableProps>(function ExpandableUncontrolled({\n                                                                                                                    isExpanded,\n                                                                                                                    onChange = noop,\n                                                                                                                    ...props\n                                                                                                                  },\n                                                                                                                  ref) {\n  const [usedIsExpanded, setUsedIsExpanded] = useState(isExpanded)\n\n  useEffect(() => {\n    setUsedIsExpanded(isExpanded)\n  }, [isExpanded])\n\n  return (\n    <Expandable\n      {...props}\n      ref={ref}\n      isExpanded={usedIsExpanded}\n      onChange={value => {\n        onChange(value)\n        setUsedIsExpanded(value)\n      }}\n    />\n  )\n})\n","export const noop = () => undefined\n","type ASTNodeModifierType =\n  'none'\n  | 'italic'\n  | 'bold'\n  | 'underline'\n  | 'font-space'\n  | 'primary'\n  | 'secondary'\n  | 'warn'\n  | 'positive'\n  | 'negative'\n\nconst astNodeInserterType = ['helpwave', 'newline'] as const\ntype ASTNodeInserterType = typeof astNodeInserterType[number]\ntype ASTNodeDefaultType = 'text'\n\ntype ASTNode = {\n  type: ASTNodeModifierType,\n  children: ASTNode[],\n} | {\n  type: ASTNodeInserterType,\n} | {\n  type: ASTNodeDefaultType,\n  text: string,\n}\n\nexport type ASTNodeInterpreterProps = {\n  node: ASTNode,\n  isRoot?: boolean,\n  className?: string,\n}\nexport const ASTNodeInterpreter = ({\n                                     node,\n                                     isRoot = false,\n                                     className = '',\n                                   }: ASTNodeInterpreterProps) => {\n  switch (node.type) {\n    case 'newline':\n      return <br/>\n    case 'text':\n      return isRoot ? <span className={className}>{node.text}</span> : node.text\n    case 'helpwave':\n      return (<span className=\"font-bold font-space no-underline\">helpwave</span>)\n    case 'none':\n      return isRoot ? (\n          <span className={className}>{node.children.map((value, index) => (\n            <ASTNodeInterpreter key={index}\n                                node={value}/>\n          ))}</span>\n        ) :\n        <>{node.children.map((value, index) => <ASTNodeInterpreter key={index} node={value}/>)}</>\n    case 'bold':\n      return <b>{node.children.map((value, index) => <ASTNodeInterpreter key={index} node={value}/>)}</b>\n    case 'italic':\n      return <i>{node.children.map((value, index) => <ASTNodeInterpreter key={index} node={value}/>)}</i>\n    case 'underline':\n      return (<u>{node.children.map((value, index) => (<ASTNodeInterpreter key={index} node={value}/>))}</u>)\n    case 'font-space':\n      return (\n        <span className=\"font-space\">{node.children.map((value, index) => (\n          <ASTNodeInterpreter key={index}\n                              node={value}/>\n        ))}</span>\n      )\n    case 'primary':\n      return (\n        <span className=\"text-primary\">{node.children.map((value, index) => (\n          <ASTNodeInterpreter\n            key={index} node={value}/>\n        ))}</span>\n      )\n    case 'secondary':\n      return (\n        <span className=\"text-secondary\">{node.children.map((value, index) => (\n          <ASTNodeInterpreter\n            key={index} node={value}/>\n        ))}</span>\n      )\n    case 'warn':\n      return (\n        <span className=\"text-warning\">{node.children.map((value, index) => (\n          <ASTNodeInterpreter\n            key={index} node={value}/>\n        ))}</span>\n      )\n    case 'positive':\n      return (\n        <span className=\"text-positive\">{node.children.map((value, index) => (\n          <ASTNodeInterpreter\n            key={index} node={value}/>\n        ))}</span>\n      )\n    case 'negative':\n      return (\n        <span className=\"text-negative\">{node.children.map((value, index) => (\n          <ASTNodeInterpreter\n            key={index} node={value}/>\n        ))}</span>\n      )\n    default:\n      return null\n  }\n}\n\nconst modifierIdentifierMapping = [\n  { id: 'i', name: 'italic' },\n  { id: 'b', name: 'bold' },\n  { id: 'u', name: 'underline' },\n  { id: 'space', name: 'font-space' },\n  { id: 'primary', name: 'primary' },\n  { id: 'secondary', name: 'secondary' },\n  { id: 'warn', name: 'warn' },\n  { id: 'positive', name: 'positive' },\n  { id: 'negative', name: 'negative' },\n] as const\n\nconst inserterIdentifierMapping = [\n  { id: 'helpwave', name: 'helpwave' },\n  { id: 'newline', name: 'newline' }\n] as const\nconst parseMarkdown = (\n  text: string,\n  commandStart: string = '\\\\',\n  open: string = '{',\n  close: string = '}'\n): ASTNode => {\n  let start = text.indexOf(commandStart)\n  const children: ASTNode[] = []\n\n  // parse the text step by step\n  while (text !== '') {\n    if (start === -1) {\n      children.push({\n        type: 'text',\n        text\n      })\n      break\n    }\n    children.push(parseMarkdown(text.substring(0, start)))\n    text = text.substring(start)\n    if (text.length <= 1) {\n      children.push({\n        type: 'text',\n        text\n      })\n      text = ''\n      continue\n    }\n    const simpleReplace = [commandStart, open, close]\n    if (simpleReplace.some(value => text[1] === value)) {\n      children.push({\n        type: 'text',\n        text: simpleReplace.find(value => text[1] === value)!\n      })\n      text = text.substring(2)\n      start = text.indexOf(commandStart)\n      continue\n    }\n    const inserter = inserterIdentifierMapping.find(value => text.substring(1).startsWith(value.id))\n    if (inserter) {\n      children.push({\n        type: inserter.name,\n      })\n      text = text.substring(inserter.id.length + 1)\n      start = text.indexOf(commandStart)\n      continue\n    }\n    const modifier = modifierIdentifierMapping.find(value => text.substring(1).startsWith(value.id))\n    if (modifier) {\n      // check brackets\n      if (text[modifier.id.length + 1] !== open) {\n        children.push({\n          type: 'text',\n          text: text.substring(0, modifier.id.length + 1)\n        })\n        text = text.substring(modifier.id.length + 2)\n        start = text.indexOf(commandStart)\n        continue\n      }\n      let closing = -1\n      let index = modifier.id.length + 2\n      let counter = 1\n      let escaping = false\n      while (index < text.length) {\n        if (text[index] === open && !escaping) {\n          counter++\n        }\n        if (text[index] === close && !escaping) {\n          counter--\n          if (counter === 0) {\n            closing = index\n            break\n          }\n        }\n        escaping = text[index] === commandStart\n        index++\n      }\n\n      if (closing !== -1) {\n        children.push({\n          type: modifier.name,\n          children: [parseMarkdown(text.substring(modifier.id.length + 2, closing))]\n        })\n        text = text.substring(closing + 1)\n        start = text.indexOf(commandStart)\n        continue\n      }\n    }\n    // nothing could be applied to command start\n    children.push({\n      type: 'text',\n      text: text[0]!\n    })\n    text = text.substring(1)\n    start = text.indexOf(commandStart)\n  }\n\n  return {\n    type: 'none',\n    children\n  }\n}\n\nconst optimizeTree = (node: ASTNode) => {\n  if (node.type === 'text') {\n    return !node.text ? undefined : node\n  }\n  if (astNodeInserterType.some(value => value === node.type)) {\n    return node\n  }\n\n  const currentNode = node as\n    { type: ASTNodeModifierType, children: ASTNode[] }\n\n  if (currentNode.children.length === 0) {\n    return undefined\n  }\n\n  let children: ASTNode[] = []\n  for (let i = 0; i < currentNode.children.length; i++) {\n    const child = optimizeTree(currentNode.children[i]!)\n    if (!child) {\n      continue\n    }\n    if (child.type === 'none') {\n      children.push(...child.children)\n    } else {\n      children.push(child)\n    }\n  }\n\n  currentNode.children = children\n  children = []\n\n  for (let i = 0; i < currentNode.children.length; i++) {\n    const child = currentNode.children[i]!\n    if (child) {\n      if (child.type === 'text' && children[children.length - 1]?.type === 'text') {\n        (children[children.length - 1]! as { type: ASTNodeDefaultType, text: string }).text += child.text\n      } else {\n        children.push(child)\n      }\n    }\n  }\n  currentNode.children = children\n  return currentNode\n}\n\nexport type MarkdownInterpreterProps = {\n  text: string,\n  className?: string,\n}\n\nexport const MarkdownInterpreter = ({ text, className }: MarkdownInterpreterProps) => {\n  const tree = parseMarkdown(text)\n  const optimizedTree = optimizeTree(tree)!\n  return <ASTNodeInterpreter node={optimizedTree} isRoot={true} className={className}/>\n}\n"],"mappings":"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","names":["import_clsx","import_lucide_react","Expandable","clsx","ExpandableUncontrolled","import_jsx_runtime","import_jsx_runtime","clsx"]}

package/dist/components/layout-and-navigation/FAQSection.mjs

@@ -21,8 +21,9 @@ var Expandable = forwardRef(function Expandable2({
   onChange = noop,
   clickOnlyOnHeader = true,
   disabled = false,
-  className = "",
-  headerClassName = ""
+  className,
+  headerClassName,
+  contentClassName
 }, ref) {
   icon ??= DefaultIcon;
   return /* @__PURE__ */ jsxs(
@@ -51,7 +52,7 @@ var Expandable = forwardRef(function Expandable2({
             ]
           }
         ),
-        isExpanded && /* @__PURE__ */ jsx("div", { className: "col px-4 pb-2", children })
+        isExpanded && /* @__PURE__ */ jsx("div", { className: clsx("col px-4 pb-2", contentClassName), children })
       ]
     }
   );