@helpwave/hightide 0.1.25 → 0.1.26

package/dist/components/date/TimePicker.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/date/TimePicker.tsx","../../../src/util/noop.ts","../../../src/util/array.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\nimport { Scrollbars } from 'react-custom-scrollbars-2'\nimport { noop } from '../../util/noop'\nimport { closestMatch, range } from '../../util/array'\nimport clsx from 'clsx'\n\ntype MinuteIncrement = '1min' | '5min' | '10min' | '15min' | '30min'\n\nexport type TimePickerProps = {\n  time?: Date,\n  onChange?: (time: Date) => void,\n  is24HourFormat?: boolean,\n  minuteIncrement?: MinuteIncrement,\n  maxHeight?: number,\n  className?: string,\n}\n\nexport const TimePicker = ({\n                             time = new Date(),\n                             onChange = noop,\n                             is24HourFormat = true,\n                             minuteIncrement = '5min',\n                             maxHeight = 300,\n                             className = ''\n                           }: TimePickerProps) => {\n  const minuteRef = useRef<HTMLButtonElement>(null)\n  const hourRef = useRef<HTMLButtonElement>(null)\n\n  const isPM = time.getHours() >= 11\n  const hours = is24HourFormat ? range(24) : range([1, 12], { exclusiveEnd: false })\n  let minutes = range(60)\n\n  useEffect(() => {\n    const scrollToItem = () => {\n      if (minuteRef.current) {\n        const container = minuteRef.current.parentElement!\n\n        const hasOverflow = container.scrollHeight > maxHeight\n        if (hasOverflow) {\n          minuteRef.current.scrollIntoView({\n            behavior: 'instant',\n            block: 'nearest',\n          })\n        }\n      }\n    }\n    scrollToItem()\n  }, [minuteRef, minuteRef.current]) // eslint-disable-line\n\n  useEffect(() => {\n    const scrollToItem = () => {\n      if (hourRef.current) {\n        const container = hourRef.current.parentElement!\n\n        const hasOverflow = container.scrollHeight > maxHeight\n        if (hasOverflow) {\n          hourRef.current.scrollIntoView({\n            behavior: 'instant',\n            block: 'nearest',\n          })\n        }\n      }\n    }\n    scrollToItem()\n  }, [hourRef, hourRef.current]) // eslint-disable-line\n\n  switch (minuteIncrement) {\n    case '5min':\n      minutes = minutes.filter(value => value % 5 === 0)\n      break\n    case '10min':\n      minutes = minutes.filter(value => value % 10 === 0)\n      break\n    case '15min':\n      minutes = minutes.filter(value => value % 15 === 0)\n      break\n    case '30min':\n      minutes = minutes.filter(value => value % 30 === 0)\n      break\n  }\n\n  const closestMinute = closestMatch(minutes, (item1, item2) => Math.abs(item1 - time.getMinutes()) < Math.abs(item2 - time.getMinutes()))\n\n  const style = (selected: boolean) => clsx('chip-full hover:brightness-90 hover:bg-primary hover:text-on-primary rounded-md mr-3',\n    { 'bg-primary text-on-primary': selected, 'bg-white text-black': !selected })\n\n  const onChangeWrapper = (transformer: (newDate: Date) => void) => {\n    const newDate = new Date(time)\n    transformer(newDate)\n    onChange(newDate)\n  }\n\n  return (\n    <div className={clsx('flex-row-2 w-fit min-w-[150px] select-none', className)}>\n      <Scrollbars autoHeight autoHeightMax={maxHeight} style={{ height: '100%' }}>\n        <div className=\"flex-col-1 h-full\">\n          {hours.map(hour => {\n            const currentHour = hour === time.getHours() - (!is24HourFormat && isPM ? 12 : 0)\n            return (\n              <button\n                key={hour}\n                ref={currentHour ? hourRef : undefined}\n                className={style(currentHour)}\n                onClick={() => onChangeWrapper(newDate => newDate.setHours(hour + (!is24HourFormat && isPM ? 12 : 0)))}\n              >\n                {hour.toString().padStart(2, '0')}\n              </button>\n            )\n          })}\n        </div>\n      </Scrollbars>\n      <Scrollbars autoHeight autoHeightMax={maxHeight} style={{ height: '100%' }}>\n        <div className=\"flex-col-1 h-full\">\n          {minutes.map(minute => {\n            const currentMinute = minute === closestMinute\n            return (\n              <button\n                key={minute + minuteIncrement} // minute increment so that scroll works\n                ref={currentMinute ? minuteRef : undefined}\n                className={style(currentMinute)}\n                onClick={() => onChangeWrapper(newDate => newDate.setMinutes(minute))}\n              >\n                {minute.toString().padStart(2, '0')}\n              </button>\n            )\n          })}\n        </div>\n      </Scrollbars>\n      {!is24HourFormat && (\n        <div className=\"flex-col-1\">\n          <button\n            className={style(!isPM)}\n            onClick={() => onChangeWrapper(newDate => isPM && newDate.setHours(newDate.getHours() - 12))}\n          >\n            AM\n          </button>\n          <button\n            className={style(isPM)}\n            onClick={() => onChangeWrapper(newDate => !isPM && newDate.setHours(newDate.getHours() + 12))}\n          >\n            PM\n          </button>\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport const TimePickerUncontrolled = ({\n                                       time,\n                                       onChange = noop,\n                                       ...props\n                                     }: TimePickerProps) => {\n  const [value, setValue] = useState(time)\n  useEffect(() => setValue(time), [time])\n\n  return (\n    <TimePicker\n      {...props}\n      time={value}\n      onChange={time1 => {\n        setValue(time1)\n        onChange(time1)\n      }}\n    />\n  )\n}\n","export const noop = () => undefined\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\nexport type RangeOptions = {\n  /**  Whether the range can be defined empty via end < start without a warning */\n  allowEmptyRange: boolean,\n  stepSize: number,\n  exclusiveStart: boolean,\n  exclusiveEnd: boolean,\n}\n\nconst defaultRangeOptions: RangeOptions = {\n  allowEmptyRange: false,\n  stepSize: 1,\n  exclusiveStart: false,\n  exclusiveEnd: true,\n}\n\n/**\n * @param endOrRange The end value or a range [start, end], end is exclusive\n * @param options the options for defining the range\n */\nexport const range = (endOrRange: number | [number, number], options?: Partial<RangeOptions>): number[] => {\n  const { allowEmptyRange, stepSize, exclusiveStart, exclusiveEnd } = { ...defaultRangeOptions, ...options }\n  let start = 0\n  let end: number\n  if (typeof endOrRange === 'number') {\n    end = endOrRange\n  } else {\n    start = endOrRange[0]\n    end = endOrRange[1]\n  }\n  if (!exclusiveEnd) {\n    end -= 1\n  }\n  if (exclusiveStart) {\n    start += 1\n  }\n\n  if (end - 1 < start) {\n    if (!allowEmptyRange) {\n      console.warn(`range: end (${end}) < start (${start}) should be allowed explicitly, set options.allowEmptyRange to true`)\n    }\n    return []\n  }\n  return Array.from({ length: end - start }, (_, index) => index * stepSize + 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"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/date/TimePicker.tsx","../../../src/utils/noop.ts","../../../src/utils/array.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\nimport { Scrollbars } from 'react-custom-scrollbars-2'\nimport { noop } from '@/src/utils/noop'\nimport { closestMatch, range } from '@/src/utils/array'\nimport clsx from 'clsx'\n\ntype MinuteIncrement = '1min' | '5min' | '10min' | '15min' | '30min'\n\nexport type TimePickerProps = {\n  time?: Date,\n  onChange?: (time: Date) => void,\n  is24HourFormat?: boolean,\n  minuteIncrement?: MinuteIncrement,\n  maxHeight?: number,\n  className?: string,\n}\n\nexport const TimePicker = ({\n                             time = new Date(),\n                             onChange = noop,\n                             is24HourFormat = true,\n                             minuteIncrement = '5min',\n                             maxHeight = 300,\n                             className = ''\n                           }: TimePickerProps) => {\n  const minuteRef = useRef<HTMLButtonElement>(null)\n  const hourRef = useRef<HTMLButtonElement>(null)\n\n  const isPM = time.getHours() >= 11\n  const hours = is24HourFormat ? range(24) : range([1, 12], { exclusiveEnd: false })\n  let minutes = range(60)\n\n  useEffect(() => {\n    const scrollToItem = () => {\n      if (minuteRef.current) {\n        const container = minuteRef.current.parentElement!\n\n        const hasOverflow = container.scrollHeight > maxHeight\n        if (hasOverflow) {\n          minuteRef.current.scrollIntoView({\n            behavior: 'instant',\n            block: 'nearest',\n          })\n        }\n      }\n    }\n    scrollToItem()\n  }, [minuteRef, minuteRef.current]) // eslint-disable-line\n\n  useEffect(() => {\n    const scrollToItem = () => {\n      if (hourRef.current) {\n        const container = hourRef.current.parentElement!\n\n        const hasOverflow = container.scrollHeight > maxHeight\n        if (hasOverflow) {\n          hourRef.current.scrollIntoView({\n            behavior: 'instant',\n            block: 'nearest',\n          })\n        }\n      }\n    }\n    scrollToItem()\n  }, [hourRef, hourRef.current]) // eslint-disable-line\n\n  switch (minuteIncrement) {\n    case '5min':\n      minutes = minutes.filter(value => value % 5 === 0)\n      break\n    case '10min':\n      minutes = minutes.filter(value => value % 10 === 0)\n      break\n    case '15min':\n      minutes = minutes.filter(value => value % 15 === 0)\n      break\n    case '30min':\n      minutes = minutes.filter(value => value % 30 === 0)\n      break\n  }\n\n  const closestMinute = closestMatch(minutes, (item1, item2) => Math.abs(item1 - time.getMinutes()) < Math.abs(item2 - time.getMinutes()))\n\n  const style = (selected: boolean) => clsx('chip-full hover:brightness-90 hover:bg-primary hover:text-on-primary rounded-md mr-3',\n    { 'bg-primary text-on-primary': selected, 'bg-white text-black': !selected })\n\n  const onChangeWrapper = (transformer: (newDate: Date) => void) => {\n    const newDate = new Date(time)\n    transformer(newDate)\n    onChange(newDate)\n  }\n\n  return (\n    <div className={clsx('flex-row-2 w-fit min-w-[150px] select-none', className)}>\n      <Scrollbars autoHeight autoHeightMax={maxHeight} style={{ height: '100%' }}>\n        <div className=\"flex-col-1 h-full\">\n          {hours.map(hour => {\n            const currentHour = hour === time.getHours() - (!is24HourFormat && isPM ? 12 : 0)\n            return (\n              <button\n                key={hour}\n                ref={currentHour ? hourRef : undefined}\n                className={style(currentHour)}\n                onClick={() => onChangeWrapper(newDate => newDate.setHours(hour + (!is24HourFormat && isPM ? 12 : 0)))}\n              >\n                {hour.toString().padStart(2, '0')}\n              </button>\n            )\n          })}\n        </div>\n      </Scrollbars>\n      <Scrollbars autoHeight autoHeightMax={maxHeight} style={{ height: '100%' }}>\n        <div className=\"flex-col-1 h-full\">\n          {minutes.map(minute => {\n            const currentMinute = minute === closestMinute\n            return (\n              <button\n                key={minute + minuteIncrement} // minute increment so that scroll works\n                ref={currentMinute ? minuteRef : undefined}\n                className={style(currentMinute)}\n                onClick={() => onChangeWrapper(newDate => newDate.setMinutes(minute))}\n              >\n                {minute.toString().padStart(2, '0')}\n              </button>\n            )\n          })}\n        </div>\n      </Scrollbars>\n      {!is24HourFormat && (\n        <div className=\"flex-col-1\">\n          <button\n            className={style(!isPM)}\n            onClick={() => onChangeWrapper(newDate => isPM && newDate.setHours(newDate.getHours() - 12))}\n          >\n            AM\n          </button>\n          <button\n            className={style(isPM)}\n            onClick={() => onChangeWrapper(newDate => !isPM && newDate.setHours(newDate.getHours() + 12))}\n          >\n            PM\n          </button>\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport const TimePickerUncontrolled = ({\n                                       time,\n                                       onChange = noop,\n                                       ...props\n                                     }: TimePickerProps) => {\n  const [value, setValue] = useState(time)\n  useEffect(() => setValue(time), [time])\n\n  return (\n    <TimePicker\n      {...props}\n      time={value}\n      onChange={time1 => {\n        setValue(time1)\n        onChange(time1)\n      }}\n    />\n  )\n}\n","export const noop = () => undefined\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\nexport type RangeOptions = {\n  /**  Whether the range can be defined empty via end < start without a warning */\n  allowEmptyRange: boolean,\n  stepSize: number,\n  exclusiveStart: boolean,\n  exclusiveEnd: boolean,\n}\n\nconst defaultRangeOptions: RangeOptions = {\n  allowEmptyRange: false,\n  stepSize: 1,\n  exclusiveStart: false,\n  exclusiveEnd: true,\n}\n\n/**\n * @param endOrRange The end value or a range [start, end], end is exclusive\n * @param options the options for defining the range\n */\nexport const range = (endOrRange: number | [number, number], options?: Partial<RangeOptions>): number[] => {\n  const { allowEmptyRange, stepSize, exclusiveStart, exclusiveEnd } = { ...defaultRangeOptions, ...options }\n  let start = 0\n  let end: number\n  if (typeof endOrRange === 'number') {\n    end = endOrRange\n  } else {\n    start = endOrRange[0]\n    end = endOrRange[1]\n  }\n  if (!exclusiveEnd) {\n    end -= 1\n  }\n  if (exclusiveStart) {\n    start += 1\n  }\n\n  if (end - 1 < start) {\n    if (!allowEmptyRange) {\n      console.warn(`range: end (${end}) < start (${start}) should be allowed explicitly, set options.allowEmptyRange to true`)\n    }\n    return []\n  }\n  return Array.from({ length: end - start }, (_, index) => index * stepSize + 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\n/**\n * @param list The list to be changed\n * @param move The shifting applied to the array (can be negative)\n */\nconst moveItems = <T>(list: T[], move: number = 0) => {\n  const result = []\n  let start = move\n  if (start < 0) {\n    start = list.length - move\n  }\n  start = start % list.length\n  for (let i = 0; i < list.length; i++) {\n    result[i] = list[(i + start) % list.length]\n  }\n  return result\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  difference: <T>(list: T[], removeList: T[]): T[] => {\n    const remove = new Set<T>(removeList)\n    return list.filter((item) => !remove.has(item))\n  },\n  moveItems,\n}\n"],"mappings":"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","names":[]}

package/dist/components/date/YearMonthPicker.js

@@ -36,10 +36,10 @@ module.exports = __toCommonJS(YearMonthPicker_exports);
 var import_react5 = require("react");
 var import_react_custom_scrollbars_2 = require("react-custom-scrollbars-2");
 
-// src/util/noop.ts
+// src/utils/noop.ts
 var noop = () => void 0;
 
-// src/util/array.ts
+// src/utils/array.ts
 var equalSizeGroups = (array, groupSize) => {
   if (groupSize <= 0) {
     console.warn(`group size should be greater than 0: groupSize = ${groupSize}`);
@@ -94,8 +94,9 @@ var ExpansionIcon = ({ isExpanded, className }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_lucide_react.ChevronDown,
     {
+      "aria-hidden": true,
       className: (0, import_clsx.default)(
-        "min-w-6 w-6 min-h-6 h-6 transition-transform duration-200 ease-in-out",
+        "min-w-6 w-6 min-h-6 h-6 transition-transform motion-safe:duration-200 motion-reduce:duration-0 ease-in-out",
         { "rotate-180": isExpanded },
         className
       )
@@ -104,6 +105,7 @@ var ExpansionIcon = ({ isExpanded, className }) => {
 };
 var Expandable = (0, import_react.forwardRef)(function Expandable2({
   children,
+  id: providedId,
   label,
   icon,
   isExpanded = false,
@@ -117,16 +119,23 @@ var Expandable = (0, import_react.forwardRef)(function Expandable2({
 }, ref) {
   const defaultIcon = (0, import_react.useCallback)((expanded) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ExpansionIcon, { isExpanded: expanded }), []);
   icon ??= defaultIcon;
+  const generatedId = (0, import_react.useId)();
+  const id = providedId ?? generatedId;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
       ref,
-      className: (0, import_clsx.default)("flex-col-0 bg-surface text-on-surface group rounded-lg shadow-sm", { "cursor-pointer": !clickOnlyOnHeader && !disabled }, className),
       onClick: () => !clickOnlyOnHeader && !disabled && onChange(!isExpanded),
+      className: (0, import_clsx.default)(
+        "flex-col-0 bg-surface text-on-surface group rounded-lg shadow-sm",
+        { "cursor-pointer": !clickOnlyOnHeader && !disabled },
+        className
+      ),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          "div",
+          "button",
           {
+            onClick: () => clickOnlyOnHeader && !disabled && onChange(!isExpanded),
             className: (0, import_clsx.default)(
               "flex-row-2 py-2 px-4 rounded-lg justify-between items-center bg-surface text-on-surface select-none",
               {
@@ -136,7 +145,9 @@ var Expandable = (0, import_react.forwardRef)(function Expandable2({
               },
               headerClassName
             ),
-            onClick: () => clickOnlyOnHeader && !disabled && onChange(!isExpanded),
+            "aria-expanded": isExpanded,
+            "aria-controls": `${id}-content`,
+            "aria-disabled": disabled ?? void 0,
             children: [
               label,
               icon(isExpanded)
@@ -146,6 +157,7 @@ var Expandable = (0, import_react.forwardRef)(function Expandable2({
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "div",
           {
+            id: `${id}-content`,
             className: (0, import_clsx.default)(
               "flex-col-2 px-4 transition-all duration-300 ease-in-out",
               {
@@ -154,6 +166,7 @@ var Expandable = (0, import_react.forwardRef)(function Expandable2({
               },
               contentClassName
             ),
+            role: "region",
             children
           }
         )
@@ -184,7 +197,7 @@ var ExpandableUncontrolled = (0, import_react.forwardRef)(function ExpandableUnc
   );
 });
 
-// src/util/date.ts
+// src/utils/date.ts
 var monthsList = ["january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"];
 var changeDuration = (date, duration, isAdding) => {
   const {
@@ -372,6 +385,44 @@ var SolidButton = (0, import_react4.forwardRef)(function SolidButton2({
     }
   );
 });
+var IconButton = (0, import_react4.forwardRef)(function IconButton2({
+  children,
+  color = "primary",
+  size = "medium",
+  className,
+  ...restProps
+}, ref) {
+  const colorClasses = {
+    primary: "not-disabled:bg-button-solid-primary-background not-disabled:text-button-solid-primary-text",
+    secondary: "not-disabled:bg-button-solid-secondary-background not-disabled:text-button-solid-secondary-text",
+    tertiary: "not-disabled:bg-button-solid-tertiary-background not-disabled:text-button-solid-tertiary-text",
+    positive: "not-disabled:bg-button-solid-positive-background not-disabled:text-button-solid-positive-text",
+    warning: "not-disabled:bg-button-solid-warning-background not-disabled:text-button-solid-warning-text",
+    negative: "not-disabled:bg-button-solid-negative-background not-disabled:text-button-solid-negative-text",
+    neutral: "not-disabled:bg-button-solid-neutral-background not-disabled:text-button-solid-neutral-text",
+    transparent: "not-disabled:bg-transparent"
+  }[color];
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "button",
+    {
+      ref,
+      className: (0, import_clsx2.default)(
+        colorClasses,
+        "not-disabled:hover:brightness-90",
+        "disabled:text-disabled-text",
+        {
+          "disabled:bg-disabled-background": color !== "transparent",
+          "disabled:opacity-70": color === "transparent",
+          "not-disabled:hover:bg-button-text-hover-background": color === "transparent"
+        },
+        ButtonUtil.iconPaddingMapping[size],
+        className
+      ),
+      ...restProps,
+      children
+    }
+  );
+});
 
 // src/components/date/YearMonthPicker.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");

package/dist/components/date/YearMonthPicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/date/YearMonthPicker.tsx","../../../src/util/noop.ts","../../../src/util/array.ts","../../../src/components/layout-and-navigation/Expandable.tsx","../../../src/util/date.ts","../../../src/localization/LanguageProvider.tsx","../../../src/hooks/useLocalStorage.ts","../../../src/localization/util.ts","../../../src/components/user-action/Button.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\nimport { Scrollbars } from 'react-custom-scrollbars-2'\nimport { noop } from '../../util/noop'\nimport { equalSizeGroups, range } from '../../util/array'\nimport clsx from 'clsx'\nimport { ExpandableUncontrolled } from '../layout-and-navigation/Expandable'\nimport { addDuration, monthsList, subtractDuration } from '../../util/date'\nimport { useLocale } from '../../localization/LanguageProvider'\nimport { SolidButton } from '../user-action/Button'\n\nexport type YearMonthPickerProps = {\n  displayedYearMonth?: Date,\n  start?: Date,\n  end?: Date,\n  onChange?: (date: Date) => void,\n  className?: string,\n  maxHeight?: number,\n  showValueOpen?: boolean,\n}\n\n// TODO use a dynamically loading infinite list here\nexport const YearMonthPicker = ({\n                                  displayedYearMonth = new Date(),\n                                  start = subtractDuration(new Date(), { years: 50 }),\n                                  end = addDuration(new Date(), { years: 50 }),\n                                  onChange = noop,\n                                  className = '',\n                                  maxHeight = 300,\n                                  showValueOpen = true\n                                }: YearMonthPickerProps) => {\n  const locale = useLocale()\n  const ref = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    const scrollToItem = () => {\n      if (ref.current) {\n        ref.current.scrollIntoView({\n          behavior: 'instant',\n          block: 'center',\n        })\n      }\n    }\n\n    scrollToItem()\n  }, [ref])\n\n  if (end < start) {\n    console.error(`startYear: (${start}) less than endYear: (${end})`)\n    return null\n  }\n\n  const years = range([start.getFullYear(), end.getFullYear()], { exclusiveEnd: false })\n\n  return (\n    <div className={clsx('flex-col-0 select-none', className)}>\n      <Scrollbars autoHeight autoHeightMax={maxHeight} style={{ height: '100%' }}>\n        <div className=\"flex-col-1 mr-3\">\n          {years.map(year => {\n            const selectedYear = displayedYearMonth.getFullYear() === year\n            return (\n              <ExpandableUncontrolled\n                key={year}\n                ref={(displayedYearMonth.getFullYear() ?? new Date().getFullYear()) === year ? ref : undefined}\n                label={<span className={clsx({ 'text-primary font-bold': selectedYear })}>{year}</span>}\n                isExpanded={showValueOpen && selectedYear}\n                contentClassName=\"gap-y-1\"\n              >\n                {equalSizeGroups([...monthsList], 3).map((monthList, index) => (\n                  <div key={index} className=\"flex-row-1\">\n                    {monthList.map(month => {\n                      const monthIndex = monthsList.indexOf(month)\n                      const newDate = new Date(year, monthIndex)\n\n                      const selectedMonth = selectedYear && monthIndex === displayedYearMonth.getMonth()\n                      const firstOfMonth = new Date(year, monthIndex, 1)\n                      const lastOfMonth = new Date(year, monthIndex, 1)\n                      const isAfterStart = start === undefined || start <= addDuration(subtractDuration(lastOfMonth, { days: 1 }), { months: 1 })\n                      const isBeforeEnd = end === undefined || firstOfMonth <= end\n                      const isValid = isAfterStart && isBeforeEnd\n                      return (\n                        <SolidButton\n                          key={month}\n                          disabled={!isValid}\n                          color={selectedMonth && isValid ? 'primary' : 'neutral'}\n                          className=\"flex-1\"\n                          size=\"small\"\n                          onClick={() => {\n                            onChange(newDate)\n                          }}\n                        >\n                          {new Intl.DateTimeFormat(locale, { month: 'short' }).format(newDate)}\n                        </SolidButton>\n                      )\n                    })}\n                  </div>\n                ))}\n              </ExpandableUncontrolled>\n            )\n          })}\n        </div>\n      </Scrollbars>\n    </div>\n  )\n}\n\nexport const YearMonthPickerUncontrolled = ({\n                                              displayedYearMonth,\n                                              onChange = noop,\n                                              ...props\n                                            }: YearMonthPickerProps) => {\n  const [yearMonth, setYearMonth] = useState<Date>(displayedYearMonth ?? new Date())\n\n  useEffect(() => setYearMonth(displayedYearMonth), [displayedYearMonth])\n\n  return (\n    <YearMonthPicker\n      displayedYearMonth={yearMonth}\n      onChange={date => {\n        setYearMonth(date)\n        onChange(date)\n      }}\n      {...props}\n    />\n  )\n}\n","export const noop = () => undefined\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\nexport type RangeOptions = {\n  /**  Whether the range can be defined empty via end < start without a warning */\n  allowEmptyRange: boolean,\n  stepSize: number,\n  exclusiveStart: boolean,\n  exclusiveEnd: boolean,\n}\n\nconst defaultRangeOptions: RangeOptions = {\n  allowEmptyRange: false,\n  stepSize: 1,\n  exclusiveStart: false,\n  exclusiveEnd: true,\n}\n\n/**\n * @param endOrRange The end value or a range [start, end], end is exclusive\n * @param options the options for defining the range\n */\nexport const range = (endOrRange: number | [number, number], options?: Partial<RangeOptions>): number[] => {\n  const { allowEmptyRange, stepSize, exclusiveStart, exclusiveEnd } = { ...defaultRangeOptions, ...options }\n  let start = 0\n  let end: number\n  if (typeof endOrRange === 'number') {\n    end = endOrRange\n  } else {\n    start = endOrRange[0]\n    end = endOrRange[1]\n  }\n  if (!exclusiveEnd) {\n    end -= 1\n  }\n  if (exclusiveStart) {\n    start += 1\n  }\n\n  if (end - 1 < start) {\n    if (!allowEmptyRange) {\n      console.warn(`range: end (${end}) < start (${start}) should be allowed explicitly, set options.allowEmptyRange to true`)\n    }\n    return []\n  }\n  return Array.from({ length: end - start }, (_, index) => index * stepSize + start)\n}\n\n/** Finds the closest match\n * @param list The list of all possible matches\n * @param firstCloser Return whether item1 is closer than item2\n */\nexport const closestMatch = <T>(list: T[], firstCloser: (item1: T, item2: T) => boolean) => {\n  return list.reduce((item1, item2) => {\n    return firstCloser(item1, item2) ? item1 : item2\n  })\n}\n\n/**\n * returns the item in middle of a list and its neighbours before and after\n * e.g. [1,2,3,4,5,6] for item = 1 would return [5,6,1,2,3]\n */\nexport const getNeighbours = <T>(list: T[], item: T, neighbourDistance: number = 2) => {\n  const index = list.indexOf(item)\n  const totalItems = neighbourDistance * 2 + 1\n  if (list.length < totalItems) {\n    console.warn('List is to short')\n    return list\n  }\n\n  if (index === -1) {\n    console.error('item not found in list')\n    return list.splice(0, totalItems)\n  }\n\n  let start = index - neighbourDistance\n  if (start < 0) {\n    start += list.length\n  }\n  const end = (index + neighbourDistance + 1) % list.length\n\n  const result: T[] = []\n  let ignoreOnce = list.length === totalItems\n  for (let i = start; i !== end || ignoreOnce; i = (i + 1) % list.length) {\n    result.push(list[i]!)\n    if (end === i && ignoreOnce) {\n      ignoreOnce = false\n    }\n  }\n  return result\n}\n\nexport const createLoopingListWithIndex = <T>(list: T[], startIndex: number = 0, length: number = 0, forwards: boolean = true) => {\n  if (length < 0) {\n    console.warn(`createLoopingList: length must be >= 0, given ${length}`)\n  } else if (length === 0) {\n    length = list.length\n  }\n\n  const returnList: [number, T][] = []\n\n  if (forwards) {\n    for (let i = startIndex; returnList.length < length; i = (i + 1) % list.length) {\n      returnList.push([i, list[i]!])\n    }\n  } else {\n    for (let i = startIndex; returnList.length < length; i = i === 0 ? i = list.length - 1 : i - 1) {\n      returnList.push([i, list[i]!])\n    }\n  }\n\n  return returnList\n}\n\nexport const createLoopingList = <T>(list: T[], startIndex: number = 0, length: number = 0, forwards: boolean = true) => {\n  return createLoopingListWithIndex(list, startIndex, length, forwards).map(([_, item]) => item)\n}\n\nexport const ArrayUtil = {\n  unique: <T>(list: T[]): T[] => {\n    const seen = new Set<T>()\n    return list.filter((item) => {\n      if (seen.has(item)) {\n        return false\n      }\n      seen.add(item)\n      return true\n    })\n  },\n\n  difference: <T>(list: T[], removeList: T[]): T[] => {\n    const remove = new Set<T>(removeList)\n    return list.filter((item) => !remove.has(item))\n  }\n}\n","import type { PropsWithChildren, ReactNode } from 'react'\nimport { forwardRef, useCallback, useEffect, useState } from 'react'\nimport { ChevronDown } 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  contentExpandedClassName?: string,\n}>\n\n\nexport type ExpansionIconProps = {\n  isExpanded: boolean,\n  className?: string,\n}\n\nexport const ExpansionIcon = ({ isExpanded, className }: ExpansionIconProps) => {\n  return (\n    <ChevronDown\n      className={clsx(\n        'min-w-6 w-6 min-h-6 h-6 transition-transform duration-200 ease-in-out',\n        { 'rotate-180': isExpanded },\n        className\n      )}\n    />\n  )\n}\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                                                                                            contentExpandedClassName,\n                                                                                          }, ref) {\n  const defaultIcon = useCallback((expanded: boolean) => <ExpansionIcon isExpanded={expanded}/>, [])\n  icon ??= defaultIcon\n\n  return (\n    <div\n      ref={ref}\n      className={clsx('flex-col-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          'flex-row-2 py-2 px-4 rounded-lg justify-between items-center bg-surface text-on-surface select-none',\n          {\n            'group-hover:brightness-97': !isExpanded,\n            'hover:brightness-97': 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      <div\n        className={clsx(\n          'flex-col-2 px-4 transition-all duration-300 ease-in-out',\n          {\n            [clsx('max-h-96 opacity-100 pb-2 overflow-y-auto', contentExpandedClassName)]: isExpanded,\n            'max-h-0 opacity-0 overflow-hidden': !isExpanded,\n          },\n          contentClassName\n        )}\n      >\n        {children}\n      </div>\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","import { equalSizeGroups } from './array'\n\nexport const monthsList = ['january', 'february', 'march', 'april', 'may', 'june', 'july', 'august', 'september', 'october', 'november', 'december'] as const\nexport type Month = typeof monthsList[number]\n\nexport const weekDayList = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'] as const\nexport type WeekDay = typeof weekDayList[number]\n\nexport const formatDate = (date: Date) => {\n  const year = date.getFullYear().toString().padStart(4, '0')\n  const month = (date.getMonth() + 1).toString().padStart(2, '0')\n  const day = (date.getDate()).toString().padStart(2, '0')\n  return `${year}-${month}-${day}`\n}\n\nexport const formatDateTime = (date: Date) => {\n  const dateString = formatDate(date)\n  const hours = date.getHours().toString().padStart(2, '0')\n  const minutes = date.getMinutes().toString().padStart(2, '0')\n  return `${dateString}T${hours}:${minutes}`\n}\n\nexport const getDaysInMonth = (year: number, month: number): number => {\n  const lastDayOfMonth = new Date(year, month + 1, 0)\n  return lastDayOfMonth.getDate()\n}\n\nexport type Duration = {\n  years?: number,\n  months?: number,\n  days?: number,\n  hours?: number,\n  minutes?: number,\n  seconds?: number,\n  milliseconds?: number,\n}\n\nexport const changeDuration = (date: Date, duration: Duration, isAdding?: boolean): Date => {\n  const {\n    years = 0,\n    months = 0,\n    days = 0,\n    hours = 0,\n    minutes = 0,\n    seconds = 0,\n    milliseconds = 0,\n  } = duration\n\n  // Check ranges\n  if (years < 0) {\n    console.error(`Range error years must be greater than 0: received ${years}`)\n    return new Date(date)\n  }\n  if (months < 0 || months > 11) {\n    console.error(`Range error month must be 0 <= month <= 11: received ${months}`)\n    return new Date(date)\n  }\n  if (days < 0) {\n    console.error(`Range error days must be greater than 0: received ${days}`)\n    return new Date(date)\n  }\n  if (hours < 0 || hours > 23) {\n    console.error(`Range error hours must be 0 <= hours <= 23: received ${hours}`)\n    return new Date(date)\n  }\n  if (minutes < 0 || minutes > 59) {\n    console.error(`Range error minutes must be 0 <= minutes <= 59: received ${minutes}`)\n    return new Date(date)\n  }\n  if (seconds < 0 || seconds > 59) {\n    console.error(`Range error seconds must be 0 <= seconds <= 59: received ${seconds}`)\n    return new Date(date)\n  }\n  if (milliseconds < 0) {\n    console.error(`Range error seconds must be greater than 0: received ${milliseconds}`)\n    return new Date(date)\n  }\n\n  const multiplier = isAdding ? 1 : -1\n\n  const newDate = new Date(date)\n\n  newDate.setFullYear(newDate.getFullYear() + multiplier * years)\n\n  newDate.setMonth(newDate.getMonth() + multiplier * months)\n\n  newDate.setDate(newDate.getDate() + multiplier * days)\n\n  newDate.setHours(newDate.getHours() + multiplier * hours)\n\n  newDate.setMinutes(newDate.getMinutes() + multiplier * minutes)\n\n  newDate.setSeconds(newDate.getSeconds() + multiplier * seconds)\n\n  newDate.setMilliseconds(newDate.getMilliseconds() + multiplier * milliseconds)\n\n  return newDate\n}\n\nexport const addDuration = (date: Date, duration: Duration): Date => {\n  return changeDuration(date, duration, true)\n}\n\nexport const subtractDuration = (date: Date, duration: Duration): Date => {\n  return changeDuration(date, duration, false)\n}\n\nexport const getBetweenDuration = (startDate: Date, endDate: Date): Duration => {\n  const durationInMilliseconds = endDate.getTime() - startDate.getTime()\n\n  const millisecondsInSecond = 1000\n  const millisecondsInMinute = 60 * millisecondsInSecond\n  const millisecondsInHour = 60 * millisecondsInMinute\n  const millisecondsInDay = 24 * millisecondsInHour\n  const millisecondsInMonth = 30 * millisecondsInDay // Rough estimation, can be adjusted\n\n  const years = Math.floor(durationInMilliseconds / (365.25 * millisecondsInDay))\n  const months = Math.floor(durationInMilliseconds / millisecondsInMonth)\n  const days = Math.floor(durationInMilliseconds / millisecondsInDay)\n  const hours = Math.floor((durationInMilliseconds % millisecondsInDay) / millisecondsInHour)\n  const seconds = Math.floor((durationInMilliseconds % millisecondsInHour) / millisecondsInSecond)\n  const milliseconds = durationInMilliseconds % millisecondsInSecond\n\n  return {\n    years,\n    months,\n    days,\n    hours,\n    seconds,\n    milliseconds,\n  }\n}\n\n/** Checks if a given date is in the range of two dates\n *\n * An undefined value for startDate or endDate means no bound for the start or end respectively\n */\nexport const isInTimeSpan = (value: Date, startDate?: Date, endDate?: Date): boolean => {\n  if (startDate && endDate) {\n    console.assert(startDate <= endDate)\n    return startDate <= value && value <= endDate\n  } else if (startDate) {\n    return startDate <= value\n  } else if (endDate) {\n    return endDate >= value\n  } else {\n    return true\n  }\n}\n\n/** Compare two dates on the year, month, day */\nexport const equalDate = (date1: Date, date2: Date) => {\n  return date1.getFullYear() === date2.getFullYear()\n    && date1.getMonth() === date2.getMonth()\n    && date1.getDate() === date2.getDate()\n}\n\nexport const getWeeksForCalenderMonth = (date: Date, weekStart: WeekDay, weeks: number = 6) => {\n  const month = date.getMonth()\n  const year = date.getFullYear()\n\n  const dayList: Date[] = []\n  let currentDate = new Date(year, month, 1) // Start of month\n  const weekStartIndex = weekDayList.indexOf(weekStart)\n\n  // Move the current day to the week before\n  while (currentDate.getDay() !== weekStartIndex) {\n    currentDate = subtractDuration(currentDate, { days: 1 })\n  }\n\n  while (dayList.length < 7 * weeks) {\n    const date = new Date(currentDate)\n    date.setHours(date.getHours(), date.getMinutes()) // To make sure we are not overwriting the time\n    dayList.push(date)\n    currentDate = addDuration(currentDate, { days: 1 })\n  }\n\n  // weeks\n  return equalSizeGroups(dayList, 7)\n}\n","import type { Dispatch, PropsWithChildren, SetStateAction } from 'react'\nimport { createContext, useContext, useEffect, useState } from 'react'\nimport { useLocalStorage } from '../hooks/useLocalStorage'\nimport type { Language } from './util'\nimport { LanguageUtil } from './util'\n\nexport type LanguageContextValue = {\n  language: Language,\n  setLanguage: Dispatch<SetStateAction<Language>>,\n}\n\nexport const LanguageContext = createContext<LanguageContextValue>({\n  language: LanguageUtil.DEFAULT_LANGUAGE,\n  setLanguage: (v) => v\n})\n\nexport const useLanguage = () => useContext(LanguageContext)\n\nexport const useLocale = (overWriteLanguage?: Language) => {\n  const { language } = useLanguage()\n  const mapping: Record<Language, string> = {\n    en: 'en-US',\n    de: 'de-DE'\n  }\n  return mapping[overWriteLanguage ?? language]\n}\n\ntype LanguageProviderProps = {\n  initialLanguage?: Language,\n}\n\nexport const LanguageProvider = ({ initialLanguage, children }: PropsWithChildren<LanguageProviderProps>) => {\n  const [language, setLanguage] = useState<Language>(initialLanguage ?? LanguageUtil.DEFAULT_LANGUAGE)\n  const [storedLanguage, setStoredLanguage] = useLocalStorage<Language>('language', initialLanguage ?? LanguageUtil.DEFAULT_LANGUAGE)\n\n  useEffect(() => {\n    if (language !== initialLanguage && initialLanguage) {\n      console.warn('LanguageProvider initial state changed: Prefer using languageProvider\\'s setLanguage instead')\n      setLanguage(initialLanguage)\n    }\n  }, [initialLanguage]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  useEffect(() => {\n    document.documentElement.setAttribute('lang', language)\n    setStoredLanguage(language)\n  }, [language])  // eslint-disable-line react-hooks/exhaustive-deps\n\n  useEffect(() => {\n    if (storedLanguage !== null) {\n      setLanguage(storedLanguage)\n      return\n    }\n\n    const LanguageToTestAgainst = Object.values(LanguageUtil.languages)\n\n    const matchingBrowserLanguage = window.navigator.languages\n      .map(language => LanguageToTestAgainst.find((test) => language === test || language.split('-')[0] === test))\n      .filter(entry => entry !== undefined)\n\n    if (matchingBrowserLanguage.length === 0) return\n\n    const firstMatch = matchingBrowserLanguage[0] as Language\n    setLanguage(firstMatch)\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return (\n    <LanguageContext.Provider value={{\n      language,\n      setLanguage\n    }}>\n      {children}\n    </LanguageContext.Provider>\n  )\n}","'use client'\n\nimport type { Dispatch, SetStateAction } from 'react'\nimport { useCallback, useState } from 'react'\nimport { LocalStorageService } from '../util/storage'\nimport { resolveSetState } from '../util/resolveSetState'\n\ntype SetValue<T> = Dispatch<SetStateAction<T>>\nexport const useLocalStorage = <T>(key: string, initValue: T): [T, SetValue<T>] => {\n  const get = useCallback((): T => {\n    if (typeof window === 'undefined') {\n      return initValue\n    }\n    const storageService = new LocalStorageService()\n    const value = storageService.get<T>(key)\n    return value || initValue\n  }, [initValue, key])\n\n  const [storedValue, setStoredValue] = useState<T>(get)\n\n  const setValue: SetValue<T> = useCallback(action => {\n    const newValue = resolveSetState(action, storedValue)\n    const storageService = new LocalStorageService()\n    storageService.set(key, newValue)\n\n    setStoredValue(newValue)\n  }, [storedValue, setStoredValue, key])\n\n  return [storedValue, setValue]\n}","/**\n * The supported languages\n */\nconst languages = ['en', 'de'] as const\n\n/**\n * The supported languages\n */\nexport type Language = typeof languages[number]\n\n/**\n * The supported languages' names in their respective language\n */\nconst languagesLocalNames: Record<Language, string> = {\n  en: 'English',\n  de: 'Deutsch',\n}\n\n/**\n * The default language\n */\nconst DEFAULT_LANGUAGE: Language = 'en'\n\n/**\n * A constant definition for holding data regarding languages\n */\nexport const LanguageUtil = {\n  languages,\n  DEFAULT_LANGUAGE,\n  languagesLocalNames,\n}","import type { ButtonHTMLAttributes, PropsWithChildren, ReactNode } from 'react'\nimport { forwardRef } 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\nexport const IconButtonUtil = {\n  icon: [...ButtonColorUtil.solid, 'transparent'] 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 * The allowed colors for the IconButton\n */\nexport type IconButtonColor = typeof IconButtonUtil.icon[number]\n\n\n/**\n * The different sizes for a button\n */\ntype ButtonSizes = 'small' | 'medium' | 'large'\n\ntype IconButtonSize = 'tiny' | '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<IconButtonSize, string> = {\n  tiny: 'icon-btn-xs',\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  coloredHoverBackground?: boolean,\n}\n\n/**\n * The shard properties between all button types\n */\nexport type IconButtonProps = PropsWithChildren<{\n  /**\n   * @default 'medium'\n   */\n  size?: IconButtonSize,\n  color?: IconButtonColor,\n}> & ButtonHTMLAttributes<Element>\n\n/**\n * A button with a solid background and different sizes\n */\nconst SolidButton = forwardRef<HTMLButtonElement, SolidButtonProps>(function SolidButton({\n                                                                                           children,\n                                                                                           color = 'primary',\n                                                                                           size = 'medium',\n                                                                                           startIcon,\n                                                                                           endIcon,\n                                                                                           onClick,\n                                                                                           className,\n                                                                                           ...restProps\n                                                                                         }, ref) {\n  const colorClasses = {\n    primary: 'not-disabled:bg-button-solid-primary-background not-disabled:text-button-solid-primary-text',\n    secondary: 'not-disabled:bg-button-solid-secondary-background not-disabled:text-button-solid-secondary-text',\n    tertiary: 'not-disabled:bg-button-solid-tertiary-background not-disabled:text-button-solid-tertiary-text',\n    positive: 'not-disabled:bg-button-solid-positive-background not-disabled:text-button-solid-positive-text',\n    warning: 'not-disabled:bg-button-solid-warning-background not-disabled:text-button-solid-warning-text',\n    negative: 'not-disabled:bg-button-solid-negative-background not-disabled:text-button-solid-negative-text',\n    neutral: 'not-disabled:bg-button-solid-neutral-background not-disabled:text-button-solid-neutral-text',\n  }[color]\n\n  const iconColorClasses = {\n    primary: 'not-group-disabled:text-button-solid-primary-icon',\n    secondary: 'not-group-disabled:text-button-solid-secondary-icon',\n    tertiary: 'not-group-disabled:text-button-solid-tertiary-icon',\n    positive: 'not-group-disabled:text-button-solid-positive-icon',\n    warning: 'not-group-disabled:text-button-solid-warning-icon',\n    negative: 'not-group-disabled:text-button-solid-negative-icon',\n    neutral: 'not-group-disabled:text-button-solid-neutral-icon',\n  }[color]\n\n  return (\n    <button\n      ref={ref}\n      onClick={onClick}\n      className={clsx(\n        'group font-semibold',\n        colorClasses,\n        'not-disabled:hover:brightness-90',\n        'disabled:text-disabled-text disabled:bg-disabled-background',\n        ButtonUtil.paddingMapping[size],\n        className\n      )}\n      {...restProps}\n    >\n      {startIcon && (\n        <span\n          className={clsx(\n            iconColorClasses,\n            'group-disabled:text-disabled-icon'\n          )}\n        >\n          {startIcon}\n        </span>\n      )}\n      {children}\n      {endIcon && (\n        <span\n          className={clsx(\n            iconColorClasses,\n            'group-disabled:text-disabled-icon'\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                         color = 'primary',\n                         size = 'medium',\n                         startIcon,\n                         endIcon,\n                         onClick,\n                         className,\n                         ...restProps\n                       }: OutlineButtonProps) => {\n  const colorClasses = {\n    primary: 'not-disabled:border-button-outline-primary-text not-disabled:text-button-outline-primary-text',\n  }[color]\n\n  const iconColorClasses = {\n    primary: 'not-group-disabled:text-button-outline-primary-icon',\n  }[color]\n  return (\n    <button\n      onClick={onClick}\n      className={clsx(\n        'group font-semibold bg-transparent border-2 ',\n        'not-disabled:hover:brightness-80',\n        colorClasses,\n        'disabled:text-disabled-text disabled:border-disabled-outline',\n        ButtonUtil.paddingMapping[size],\n        className\n      )}\n      {...restProps}\n    >\n      {startIcon && (\n        <span\n          className={clsx(\n            iconColorClasses,\n            'group-disabled:text-disabled-icon'\n          )}\n        >\n          {startIcon}\n        </span>\n      )}\n      {children}\n      {endIcon && (\n        <span\n          className={clsx(\n            iconColorClasses,\n            'group-disabled:text-disabled-icon'\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                      color = 'neutral',\n                      size = 'medium',\n                      startIcon,\n                      endIcon,\n                      onClick,\n                      coloredHoverBackground = true,\n                      className,\n                      ...restProps\n                    }: TextButtonProps) => {\n  const colorClasses = {\n    primary: 'not-disabled:bg-transparent not-disabled:text-button-text-primary-text',\n    negative: 'not-disabled:bg-transparent not-disabled:text-button-text-negative-text',\n    neutral: 'not-disabled:bg-transparent not-disabled:text-button-text-neutral-text',\n  }[color]\n\n  const backgroundColor = {\n    primary: 'not-disabled:hover:bg-button-text-primary-text/20',\n    negative: 'not-disabled:hover:bg-button-text-negative-text/20',\n    neutral: 'not-disabled:hover:bg-button-text-neutral-text/20',\n  }[color]\n\n  const iconColorClasses = {\n    primary: 'not-group-disabled:text-button-text-primary-icon',\n    negative: 'not-group-disabled:text-button-text-negative-icon',\n    neutral: 'not-group-disabled:text-button-text-neutral-icon',\n  }[color]\n\n  return (\n    <button\n      onClick={onClick}\n      className={clsx(\n        'group font-semibold',\n        'disabled:text-disabled-text',\n        colorClasses,\n        {\n          [backgroundColor]: coloredHoverBackground,\n          'not-disabled:hover:bg-button-text-hover-background': !coloredHoverBackground,\n        },\n        ButtonUtil.paddingMapping[size],\n        className\n      )}\n      {...restProps}\n    >\n      {startIcon && (\n        <span\n          className={clsx(\n            iconColorClasses,\n            'group-disabled:text-disabled-icon'\n          )}\n        >\n          {startIcon}\n        </span>\n      )}\n      {children}\n      {endIcon && (\n        <span\n          className={clsx(\n            iconColorClasses,\n            'group-disabled:text-disabled-icon'\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                      color = 'primary',\n                      size = 'medium',\n                      className,\n                      ...restProps\n                    }: IconButtonProps) => {\n  const colorClasses = {\n    primary: 'not-disabled:bg-button-solid-primary-background not-disabled:text-button-solid-primary-text',\n    secondary: 'not-disabled:bg-button-solid-secondary-background not-disabled:text-button-solid-secondary-text',\n    tertiary: 'not-disabled:bg-button-solid-tertiary-background not-disabled:text-button-solid-tertiary-text',\n    positive: 'not-disabled:bg-button-solid-positive-background not-disabled:text-button-solid-positive-text',\n    warning: 'not-disabled:bg-button-solid-warning-background not-disabled:text-button-solid-warning-text',\n    negative: 'not-disabled:bg-button-solid-negative-background not-disabled:text-button-solid-negative-text',\n    neutral: 'not-disabled:bg-button-solid-neutral-background not-disabled:text-button-solid-neutral-text',\n    transparent: 'not-disabled:bg-transparent',\n  }[color]\n\n  return (\n    <button\n      className={clsx(\n        colorClasses,\n        'not-disabled:hover:brightness-90',\n        'disabled:text-disabled-text',\n        {\n          'disabled:bg-disabled-background': color !== 'transparent',\n          'disabled:opacity-70': color === 'transparent',\n          'not-disabled:hover:bg-button-text-hover-background': color === 'transparent',\n        },\n        ButtonUtil.iconPaddingMapping[size],\n        className\n      )}\n      {...restProps}\n    >\n      {children}\n    </button>\n  )\n}\n\nexport { SolidButton, OutlineButton, TextButton, IconButton }\n"],"mappings":"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","names":["import_react","import_clsx","clsx","Expandable","ExpandableUncontrolled","import_react","import_react","import_jsx_runtime","import_react","import_clsx","import_jsx_runtime","SolidButton","clsx","import_jsx_runtime","clsx"]}
+{"version":3,"sources":["../../../src/components/date/YearMonthPicker.tsx","../../../src/utils/noop.ts","../../../src/utils/array.ts","../../../src/components/layout-and-navigation/Expandable.tsx","../../../src/utils/date.ts","../../../src/localization/LanguageProvider.tsx","../../../src/hooks/useLocalStorage.ts","../../../src/localization/util.ts","../../../src/components/user-action/Button.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\nimport { Scrollbars } from 'react-custom-scrollbars-2'\nimport { noop } from '@/src/utils/noop'\nimport { equalSizeGroups, range } from '@/src/utils/array'\nimport clsx from 'clsx'\nimport { ExpandableUncontrolled } from '../layout-and-navigation/Expandable'\nimport { addDuration, monthsList, subtractDuration } from '@/src/utils/date'\nimport { useLocale } from '../../localization/LanguageProvider'\nimport { SolidButton } from '../user-action/Button'\n\nexport type YearMonthPickerProps = {\n  displayedYearMonth?: Date,\n  start?: Date,\n  end?: Date,\n  onChange?: (date: Date) => void,\n  className?: string,\n  maxHeight?: number,\n  showValueOpen?: boolean,\n}\n\n// TODO use a dynamically loading infinite list here\nexport const YearMonthPicker = ({\n                                  displayedYearMonth = new Date(),\n                                  start = subtractDuration(new Date(), { years: 50 }),\n                                  end = addDuration(new Date(), { years: 50 }),\n                                  onChange = noop,\n                                  className = '',\n                                  maxHeight = 300,\n                                  showValueOpen = true\n                                }: YearMonthPickerProps) => {\n  const locale = useLocale()\n  const ref = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    const scrollToItem = () => {\n      if (ref.current) {\n        ref.current.scrollIntoView({\n          behavior: 'instant',\n          block: 'center',\n        })\n      }\n    }\n\n    scrollToItem()\n  }, [ref])\n\n  if (end < start) {\n    console.error(`startYear: (${start}) less than endYear: (${end})`)\n    return null\n  }\n\n  const years = range([start.getFullYear(), end.getFullYear()], { exclusiveEnd: false })\n\n  return (\n    <div className={clsx('flex-col-0 select-none', className)}>\n      <Scrollbars autoHeight autoHeightMax={maxHeight} style={{ height: '100%' }}>\n        <div className=\"flex-col-1 mr-3\">\n          {years.map(year => {\n            const selectedYear = displayedYearMonth.getFullYear() === year\n            return (\n              <ExpandableUncontrolled\n                key={year}\n                ref={(displayedYearMonth.getFullYear() ?? new Date().getFullYear()) === year ? ref : undefined}\n                label={<span className={clsx({ 'text-primary font-bold': selectedYear })}>{year}</span>}\n                isExpanded={showValueOpen && selectedYear}\n                contentClassName=\"gap-y-1\"\n              >\n                {equalSizeGroups([...monthsList], 3).map((monthList, index) => (\n                  <div key={index} className=\"flex-row-1\">\n                    {monthList.map(month => {\n                      const monthIndex = monthsList.indexOf(month)\n                      const newDate = new Date(year, monthIndex)\n\n                      const selectedMonth = selectedYear && monthIndex === displayedYearMonth.getMonth()\n                      const firstOfMonth = new Date(year, monthIndex, 1)\n                      const lastOfMonth = new Date(year, monthIndex, 1)\n                      const isAfterStart = start === undefined || start <= addDuration(subtractDuration(lastOfMonth, { days: 1 }), { months: 1 })\n                      const isBeforeEnd = end === undefined || firstOfMonth <= end\n                      const isValid = isAfterStart && isBeforeEnd\n                      return (\n                        <SolidButton\n                          key={month}\n                          disabled={!isValid}\n                          color={selectedMonth && isValid ? 'primary' : 'neutral'}\n                          className=\"flex-1\"\n                          size=\"small\"\n                          onClick={() => {\n                            onChange(newDate)\n                          }}\n                        >\n                          {new Intl.DateTimeFormat(locale, { month: 'short' }).format(newDate)}\n                        </SolidButton>\n                      )\n                    })}\n                  </div>\n                ))}\n              </ExpandableUncontrolled>\n            )\n          })}\n        </div>\n      </Scrollbars>\n    </div>\n  )\n}\n\nexport const YearMonthPickerUncontrolled = ({\n                                              displayedYearMonth,\n                                              onChange = noop,\n                                              ...props\n                                            }: YearMonthPickerProps) => {\n  const [yearMonth, setYearMonth] = useState<Date>(displayedYearMonth ?? new Date())\n\n  useEffect(() => setYearMonth(displayedYearMonth), [displayedYearMonth])\n\n  return (\n    <YearMonthPicker\n      displayedYearMonth={yearMonth}\n      onChange={date => {\n        setYearMonth(date)\n        onChange(date)\n      }}\n      {...props}\n    />\n  )\n}\n","export const noop = () => undefined\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\nexport type RangeOptions = {\n  /**  Whether the range can be defined empty via end < start without a warning */\n  allowEmptyRange: boolean,\n  stepSize: number,\n  exclusiveStart: boolean,\n  exclusiveEnd: boolean,\n}\n\nconst defaultRangeOptions: RangeOptions = {\n  allowEmptyRange: false,\n  stepSize: 1,\n  exclusiveStart: false,\n  exclusiveEnd: true,\n}\n\n/**\n * @param endOrRange The end value or a range [start, end], end is exclusive\n * @param options the options for defining the range\n */\nexport const range = (endOrRange: number | [number, number], options?: Partial<RangeOptions>): number[] => {\n  const { allowEmptyRange, stepSize, exclusiveStart, exclusiveEnd } = { ...defaultRangeOptions, ...options }\n  let start = 0\n  let end: number\n  if (typeof endOrRange === 'number') {\n    end = endOrRange\n  } else {\n    start = endOrRange[0]\n    end = endOrRange[1]\n  }\n  if (!exclusiveEnd) {\n    end -= 1\n  }\n  if (exclusiveStart) {\n    start += 1\n  }\n\n  if (end - 1 < start) {\n    if (!allowEmptyRange) {\n      console.warn(`range: end (${end}) < start (${start}) should be allowed explicitly, set options.allowEmptyRange to true`)\n    }\n    return []\n  }\n  return Array.from({ length: end - start }, (_, index) => index * stepSize + 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\n/**\n * @param list The list to be changed\n * @param move The shifting applied to the array (can be negative)\n */\nconst moveItems = <T>(list: T[], move: number = 0) => {\n  const result = []\n  let start = move\n  if (start < 0) {\n    start = list.length - move\n  }\n  start = start % list.length\n  for (let i = 0; i < list.length; i++) {\n    result[i] = list[(i + start) % list.length]\n  }\n  return result\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  difference: <T>(list: T[], removeList: T[]): T[] => {\n    const remove = new Set<T>(removeList)\n    return list.filter((item) => !remove.has(item))\n  },\n  moveItems,\n}\n","import type { PropsWithChildren, ReactNode } from 'react'\nimport { forwardRef, useCallback, useEffect, useId, useState } from 'react'\nimport { ChevronDown } from 'lucide-react'\nimport clsx from 'clsx'\nimport { noop } from '@/src/utils/noop'\n\nexport type ExpansionIconProps = {\n  isExpanded?: boolean,\n  className?: string,\n}\n\nexport const ExpansionIcon = ({ isExpanded, className }: ExpansionIconProps) => {\n  return (\n    <ChevronDown\n      aria-hidden={true}\n      className={clsx(\n        'min-w-6 w-6 min-h-6 h-6 transition-transform motion-safe:duration-200 motion-reduce:duration-0 ease-in-out',\n        { 'rotate-180': isExpanded },\n        className\n      )}\n    />\n  )\n}\n\ntype IconBuilder = (expanded: boolean) => ReactNode\n\nexport type ExpandableProps = PropsWithChildren<{\n  id?: string,\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  contentExpandedClassName?: string,\n}>\n\n/**\n * A Component for showing and hiding content\n */\nexport const Expandable = forwardRef<HTMLDivElement, ExpandableProps>(function Expandable({\n                                                                                            children,\n                                                                                            id: providedId,\n                                                                                            label,\n                                                                                            icon,\n                                                                                            isExpanded = false,\n                                                                                            onChange = noop,\n                                                                                            clickOnlyOnHeader = true,\n                                                                                            disabled = false,\n                                                                                            className,\n                                                                                            headerClassName,\n                                                                                            contentClassName,\n                                                                                            contentExpandedClassName,\n                                                                                          }, ref) {\n\n  const defaultIcon = useCallback((expanded: boolean) => <ExpansionIcon isExpanded={expanded}/>, [])\n  icon ??= defaultIcon\n\n  const generatedId = useId()\n  const id = providedId ?? generatedId\n\n  return (\n    <div\n      ref={ref}\n      onClick={() => !clickOnlyOnHeader && !disabled && onChange(!isExpanded)}\n\n      className={clsx(\n        'flex-col-0 bg-surface text-on-surface group rounded-lg shadow-sm',\n        { 'cursor-pointer': !clickOnlyOnHeader && !disabled }, className\n      )}\n    >\n      <button\n        onClick={() => clickOnlyOnHeader && !disabled && onChange(!isExpanded)}\n\n        className={clsx(\n          'flex-row-2 py-2 px-4 rounded-lg justify-between items-center bg-surface text-on-surface select-none',\n          {\n            'group-hover:brightness-97': !isExpanded,\n            'hover:brightness-97': isExpanded && !disabled,\n            'cursor-pointer': clickOnlyOnHeader && !disabled,\n          },\n          headerClassName\n        )}\n\n        aria-expanded={isExpanded}\n        aria-controls={`${id}-content`}\n        aria-disabled={disabled ?? undefined}\n      >\n        {label}\n        {icon(isExpanded)}\n      </button>\n      <div\n        id={`${id}-content`}\n        className={clsx(\n          'flex-col-2 px-4 transition-all duration-300 ease-in-out',\n          {\n            [clsx('max-h-96 opacity-100 pb-2 overflow-y-auto', contentExpandedClassName)]: isExpanded,\n            'max-h-0 opacity-0 overflow-hidden': !isExpanded,\n          },\n          contentClassName\n        )}\n\n        role=\"region\"\n      >\n        {children}\n      </div>\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","import { equalSizeGroups } from './array'\n\nexport const monthsList = ['january', 'february', 'march', 'april', 'may', 'june', 'july', 'august', 'september', 'october', 'november', 'december'] as const\nexport type Month = typeof monthsList[number]\n\nexport const weekDayList = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'] as const\nexport type WeekDay = typeof weekDayList[number]\n\nexport const formatDate = (date: Date) => {\n  const year = date.getFullYear().toString().padStart(4, '0')\n  const month = (date.getMonth() + 1).toString().padStart(2, '0')\n  const day = (date.getDate()).toString().padStart(2, '0')\n  return `${year}-${month}-${day}`\n}\n\nexport const formatDateTime = (date: Date) => {\n  const dateString = formatDate(date)\n  const hours = date.getHours().toString().padStart(2, '0')\n  const minutes = date.getMinutes().toString().padStart(2, '0')\n  return `${dateString}T${hours}:${minutes}`\n}\n\nexport const getDaysInMonth = (year: number, month: number): number => {\n  const lastDayOfMonth = new Date(year, month + 1, 0)\n  return lastDayOfMonth.getDate()\n}\n\nexport type Duration = {\n  years?: number,\n  months?: number,\n  days?: number,\n  hours?: number,\n  minutes?: number,\n  seconds?: number,\n  milliseconds?: number,\n}\n\nexport const changeDuration = (date: Date, duration: Duration, isAdding?: boolean): Date => {\n  const {\n    years = 0,\n    months = 0,\n    days = 0,\n    hours = 0,\n    minutes = 0,\n    seconds = 0,\n    milliseconds = 0,\n  } = duration\n\n  // Check ranges\n  if (years < 0) {\n    console.error(`Range error years must be greater than 0: received ${years}`)\n    return new Date(date)\n  }\n  if (months < 0 || months > 11) {\n    console.error(`Range error month must be 0 <= month <= 11: received ${months}`)\n    return new Date(date)\n  }\n  if (days < 0) {\n    console.error(`Range error days must be greater than 0: received ${days}`)\n    return new Date(date)\n  }\n  if (hours < 0 || hours > 23) {\n    console.error(`Range error hours must be 0 <= hours <= 23: received ${hours}`)\n    return new Date(date)\n  }\n  if (minutes < 0 || minutes > 59) {\n    console.error(`Range error minutes must be 0 <= minutes <= 59: received ${minutes}`)\n    return new Date(date)\n  }\n  if (seconds < 0 || seconds > 59) {\n    console.error(`Range error seconds must be 0 <= seconds <= 59: received ${seconds}`)\n    return new Date(date)\n  }\n  if (milliseconds < 0) {\n    console.error(`Range error seconds must be greater than 0: received ${milliseconds}`)\n    return new Date(date)\n  }\n\n  const multiplier = isAdding ? 1 : -1\n\n  const newDate = new Date(date)\n\n  newDate.setFullYear(newDate.getFullYear() + multiplier * years)\n\n  newDate.setMonth(newDate.getMonth() + multiplier * months)\n\n  newDate.setDate(newDate.getDate() + multiplier * days)\n\n  newDate.setHours(newDate.getHours() + multiplier * hours)\n\n  newDate.setMinutes(newDate.getMinutes() + multiplier * minutes)\n\n  newDate.setSeconds(newDate.getSeconds() + multiplier * seconds)\n\n  newDate.setMilliseconds(newDate.getMilliseconds() + multiplier * milliseconds)\n\n  return newDate\n}\n\nexport const addDuration = (date: Date, duration: Duration): Date => {\n  return changeDuration(date, duration, true)\n}\n\nexport const subtractDuration = (date: Date, duration: Duration): Date => {\n  return changeDuration(date, duration, false)\n}\n\nexport const getBetweenDuration = (startDate: Date, endDate: Date): Duration => {\n  const durationInMilliseconds = endDate.getTime() - startDate.getTime()\n\n  const millisecondsInSecond = 1000\n  const millisecondsInMinute = 60 * millisecondsInSecond\n  const millisecondsInHour = 60 * millisecondsInMinute\n  const millisecondsInDay = 24 * millisecondsInHour\n  const millisecondsInMonth = 30 * millisecondsInDay // Rough estimation, can be adjusted\n\n  const years = Math.floor(durationInMilliseconds / (365.25 * millisecondsInDay))\n  const months = Math.floor(durationInMilliseconds / millisecondsInMonth)\n  const days = Math.floor(durationInMilliseconds / millisecondsInDay)\n  const hours = Math.floor((durationInMilliseconds % millisecondsInDay) / millisecondsInHour)\n  const seconds = Math.floor((durationInMilliseconds % millisecondsInHour) / millisecondsInSecond)\n  const milliseconds = durationInMilliseconds % millisecondsInSecond\n\n  return {\n    years,\n    months,\n    days,\n    hours,\n    seconds,\n    milliseconds,\n  }\n}\n\n/** Checks if a given date is in the range of two dates\n *\n * An undefined value for startDate or endDate means no bound for the start or end respectively\n */\nexport const isInTimeSpan = (value: Date, startDate?: Date, endDate?: Date): boolean => {\n  if (startDate && endDate) {\n    console.assert(startDate <= endDate)\n    return startDate <= value && value <= endDate\n  } else if (startDate) {\n    return startDate <= value\n  } else if (endDate) {\n    return endDate >= value\n  } else {\n    return true\n  }\n}\n\n/** Compare two dates on the year, month, day */\nexport const equalDate = (date1: Date, date2: Date) => {\n  return date1.getFullYear() === date2.getFullYear()\n    && date1.getMonth() === date2.getMonth()\n    && date1.getDate() === date2.getDate()\n}\n\nexport const getWeeksForCalenderMonth = (date: Date, weekStart: WeekDay, weeks: number = 6) => {\n  const month = date.getMonth()\n  const year = date.getFullYear()\n\n  const dayList: Date[] = []\n  let currentDate = new Date(year, month, 1) // Start of month\n  const weekStartIndex = weekDayList.indexOf(weekStart)\n\n  // Move the current day to the week before\n  while (currentDate.getDay() !== weekStartIndex) {\n    currentDate = subtractDuration(currentDate, { days: 1 })\n  }\n\n  while (dayList.length < 7 * weeks) {\n    const date = new Date(currentDate)\n    date.setHours(date.getHours(), date.getMinutes()) // To make sure we are not overwriting the time\n    dayList.push(date)\n    currentDate = addDuration(currentDate, { days: 1 })\n  }\n\n  // weeks\n  return equalSizeGroups(dayList, 7)\n}\n","import type { Dispatch, PropsWithChildren, SetStateAction } from 'react'\nimport { createContext, useContext, useEffect, useState } from 'react'\nimport { useLocalStorage } from '../hooks/useLocalStorage'\nimport type { Language } from './util'\nimport { LanguageUtil } from './util'\n\nexport type LanguageContextValue = {\n  language: Language,\n  setLanguage: Dispatch<SetStateAction<Language>>,\n}\n\nexport const LanguageContext = createContext<LanguageContextValue>({\n  language: LanguageUtil.DEFAULT_LANGUAGE,\n  setLanguage: (v) => v\n})\n\nexport const useLanguage = () => useContext(LanguageContext)\n\nexport const useLocale = (overWriteLanguage?: Language) => {\n  const { language } = useLanguage()\n  const mapping: Record<Language, string> = {\n    en: 'en-US',\n    de: 'de-DE'\n  }\n  return mapping[overWriteLanguage ?? language]\n}\n\ntype LanguageProviderProps = {\n  initialLanguage?: Language,\n}\n\nexport const LanguageProvider = ({ initialLanguage, children }: PropsWithChildren<LanguageProviderProps>) => {\n  const [language, setLanguage] = useState<Language>(initialLanguage ?? LanguageUtil.DEFAULT_LANGUAGE)\n  const [storedLanguage, setStoredLanguage] = useLocalStorage<Language>('language', initialLanguage ?? LanguageUtil.DEFAULT_LANGUAGE)\n\n  useEffect(() => {\n    if (language !== initialLanguage && initialLanguage) {\n      console.warn('LanguageProvider initial state changed: Prefer using languageProvider\\'s setLanguage instead')\n      setLanguage(initialLanguage)\n    }\n  }, [initialLanguage]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  useEffect(() => {\n    document.documentElement.setAttribute('lang', language)\n    setStoredLanguage(language)\n  }, [language])  // eslint-disable-line react-hooks/exhaustive-deps\n\n  useEffect(() => {\n    if (storedLanguage !== null) {\n      setLanguage(storedLanguage)\n      return\n    }\n\n    const LanguageToTestAgainst = Object.values(LanguageUtil.languages)\n\n    const matchingBrowserLanguage = window.navigator.languages\n      .map(language => LanguageToTestAgainst.find((test) => language === test || language.split('-')[0] === test))\n      .filter(entry => entry !== undefined)\n\n    if (matchingBrowserLanguage.length === 0) return\n\n    const firstMatch = matchingBrowserLanguage[0] as Language\n    setLanguage(firstMatch)\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return (\n    <LanguageContext.Provider value={{\n      language,\n      setLanguage\n    }}>\n      {children}\n    </LanguageContext.Provider>\n  )\n}","'use client'\n\nimport type { Dispatch, SetStateAction } from 'react'\nimport { useCallback, useState } from 'react'\nimport { LocalStorageService } from '@/src/utils/storage'\nimport { resolveSetState } from '@/src/utils/resolveSetState'\n\ntype SetValue<T> = Dispatch<SetStateAction<T>>\nexport const useLocalStorage = <T>(key: string, initValue: T): [T, SetValue<T>] => {\n  const get = useCallback((): T => {\n    if (typeof window === 'undefined') {\n      return initValue\n    }\n    const storageService = new LocalStorageService()\n    const value = storageService.get<T>(key)\n    return value || initValue\n  }, [initValue, key])\n\n  const [storedValue, setStoredValue] = useState<T>(get)\n\n  const setValue: SetValue<T> = useCallback(action => {\n    const newValue = resolveSetState(action, storedValue)\n    const storageService = new LocalStorageService()\n    storageService.set(key, newValue)\n\n    setStoredValue(newValue)\n  }, [storedValue, setStoredValue, key])\n\n  return [storedValue, setValue]\n}","/**\n * The supported languages\n */\nconst languages = ['en', 'de'] as const\n\n/**\n * The supported languages\n */\nexport type Language = typeof languages[number]\n\n/**\n * The supported languages' names in their respective language\n */\nconst languagesLocalNames: Record<Language, string> = {\n  en: 'English',\n  de: 'Deutsch',\n}\n\n/**\n * The default language\n */\nconst DEFAULT_LANGUAGE: Language = 'en'\n\n/**\n * A constant definition for holding data regarding languages\n */\nexport const LanguageUtil = {\n  languages,\n  DEFAULT_LANGUAGE,\n  languagesLocalNames,\n}","import type { ButtonHTMLAttributes, ReactNode } from 'react'\nimport { forwardRef } 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\nexport const IconButtonUtil = {\n  icon: [...ButtonColorUtil.solid, 'transparent'] 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 * The allowed colors for the IconButton\n */\nexport type IconButtonColor = typeof IconButtonUtil.icon[number]\n\n\n/**\n * The different sizes for a button\n */\ntype ButtonSizes = 'small' | 'medium' | 'large'\n\ntype IconButtonSize = 'tiny' | 'small' | 'medium' | 'large'\n\n/**\n * The shard properties between all button types\n */\nexport type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {\n  /**\n   * @default 'medium'\n   */\n  size?: ButtonSizes,\n}\n\nconst paddingMapping: Record<ButtonSizes, string> = {\n  small: 'btn-sm',\n  medium: 'btn-md',\n  large: 'btn-lg'\n}\n\nconst iconPaddingMapping: Record<IconButtonSize, string> = {\n  tiny: 'icon-btn-xs',\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  coloredHoverBackground?: boolean,\n}\n\n/**\n * The shard properties between all button types\n */\nexport type IconButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {\n  /**\n   * @default 'medium'\n   */\n  size?: IconButtonSize,\n  color?: IconButtonColor,\n}\n\n/**\n * A button with a solid background and different sizes\n */\nexport const SolidButton = forwardRef<HTMLButtonElement, SolidButtonProps>(function SolidButton({\n                                                                                           children,\n                                                                                           color = 'primary',\n                                                                                           size = 'medium',\n                                                                                           startIcon,\n                                                                                           endIcon,\n                                                                                           onClick,\n                                                                                           className,\n                                                                                           ...restProps\n                                                                                         }, ref) {\n  const colorClasses = {\n    primary: 'not-disabled:bg-button-solid-primary-background not-disabled:text-button-solid-primary-text',\n    secondary: 'not-disabled:bg-button-solid-secondary-background not-disabled:text-button-solid-secondary-text',\n    tertiary: 'not-disabled:bg-button-solid-tertiary-background not-disabled:text-button-solid-tertiary-text',\n    positive: 'not-disabled:bg-button-solid-positive-background not-disabled:text-button-solid-positive-text',\n    warning: 'not-disabled:bg-button-solid-warning-background not-disabled:text-button-solid-warning-text',\n    negative: 'not-disabled:bg-button-solid-negative-background not-disabled:text-button-solid-negative-text',\n    neutral: 'not-disabled:bg-button-solid-neutral-background not-disabled:text-button-solid-neutral-text',\n  }[color]\n\n  const iconColorClasses = {\n    primary: 'not-group-disabled:text-button-solid-primary-icon',\n    secondary: 'not-group-disabled:text-button-solid-secondary-icon',\n    tertiary: 'not-group-disabled:text-button-solid-tertiary-icon',\n    positive: 'not-group-disabled:text-button-solid-positive-icon',\n    warning: 'not-group-disabled:text-button-solid-warning-icon',\n    negative: 'not-group-disabled:text-button-solid-negative-icon',\n    neutral: 'not-group-disabled:text-button-solid-neutral-icon',\n  }[color]\n\n  return (\n    <button\n      ref={ref}\n      onClick={onClick}\n      className={clsx(\n        'group font-semibold',\n        colorClasses,\n        'not-disabled:hover:brightness-90',\n        'disabled:text-disabled-text disabled:bg-disabled-background',\n        ButtonUtil.paddingMapping[size],\n        className\n      )}\n      {...restProps}\n    >\n      {startIcon && (\n        <span\n          className={clsx(\n            iconColorClasses,\n            'group-disabled:text-disabled-icon'\n          )}\n        >\n          {startIcon}\n        </span>\n      )}\n      {children}\n      {endIcon && (\n        <span\n          className={clsx(\n            iconColorClasses,\n            'group-disabled:text-disabled-icon'\n          )}\n        >\n          {endIcon}\n        </span>\n      )}\n    </button>\n  )\n})\n\n/**\n * A button with an outline border and different sizes\n */\nexport const OutlineButton = ({\n                         children,\n                         color = 'primary',\n                         size = 'medium',\n                         startIcon,\n                         endIcon,\n                         onClick,\n                         className,\n                         ...restProps\n                       }: OutlineButtonProps) => {\n  const colorClasses = {\n    primary: 'not-disabled:border-button-outline-primary-text not-disabled:text-button-outline-primary-text',\n  }[color]\n\n  const iconColorClasses = {\n    primary: 'not-group-disabled:text-button-outline-primary-icon',\n  }[color]\n  return (\n    <button\n      onClick={onClick}\n      className={clsx(\n        'group font-semibold bg-transparent border-2 ',\n        'not-disabled:hover:brightness-80',\n        colorClasses,\n        'disabled:text-disabled-text disabled:border-disabled-outline',\n        ButtonUtil.paddingMapping[size],\n        className\n      )}\n      {...restProps}\n    >\n      {startIcon && (\n        <span\n          className={clsx(\n            iconColorClasses,\n            'group-disabled:text-disabled-icon'\n          )}\n        >\n          {startIcon}\n        </span>\n      )}\n      {children}\n      {endIcon && (\n        <span\n          className={clsx(\n            iconColorClasses,\n            'group-disabled:text-disabled-icon'\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 */\nexport const TextButton = ({\n                      children,\n                      color = 'neutral',\n                      size = 'medium',\n                      startIcon,\n                      endIcon,\n                      onClick,\n                      coloredHoverBackground = true,\n                      className,\n                      ...restProps\n                    }: TextButtonProps) => {\n  const colorClasses = {\n    primary: 'not-disabled:bg-transparent not-disabled:text-button-text-primary-text focus-style-none focus-visible:ring-2 not-disabled:focus-visible:ring-button-text-primary-text',\n    negative: 'not-disabled:bg-transparent not-disabled:text-button-text-negative-text focus-style-none focus-visible:ring-2 not-disabled:focus-visible:ring-button-text-negative-text',\n    neutral: 'not-disabled:bg-transparent not-disabled:text-button-text-neutral-text focus-style-none focus-visible:ring-2 not-disabled:focus-visible:ring-button-text-neutral-text',\n  }[color]\n\n  const backgroundColor = {\n    primary: 'not-disabled:hover:bg-button-text-primary-text/20 not-disabled:focus-visible:bg-button-text-primary-text/20',\n    negative: 'not-disabled:hover:bg-button-text-negative-text/20 not-disabled:focus-visible:bg-button-text-negative-text/20',\n    neutral: 'not-disabled:hover:bg-button-text-neutral-text/20 not-disabled:focus-visible:bg-button-text-neutral-text/20',\n  }[color]\n\n  const iconColorClasses = {\n    primary: 'not-group-disabled:text-button-text-primary-icon',\n    negative: 'not-group-disabled:text-button-text-negative-icon',\n    neutral: 'not-group-disabled:text-button-text-neutral-icon',\n  }[color]\n\n  return (\n    <button\n      onClick={onClick}\n      className={clsx(\n        'group font-semibold',\n        'disabled:text-disabled-text',\n        colorClasses,\n        {\n          [backgroundColor]: coloredHoverBackground,\n          'not-disabled:hover:bg-button-text-hover-background': !coloredHoverBackground,\n        },\n        ButtonUtil.paddingMapping[size],\n        className\n      )}\n      {...restProps}\n    >\n      {startIcon && (\n        <span\n          className={clsx(\n            iconColorClasses,\n            'group-disabled:text-disabled-icon'\n          )}\n        >\n          {startIcon}\n        </span>\n      )}\n      {children}\n      {endIcon && (\n        <span\n          className={clsx(\n            iconColorClasses,\n            'group-disabled:text-disabled-icon'\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 */\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton({\n                                                                                        children,\n                                                                                        color = 'primary',\n                                                                                        size = 'medium',\n                                                                                        className,\n                                                                                        ...restProps\n                                                                                      }, ref)\n{\n  const colorClasses = {\n    primary: 'not-disabled:bg-button-solid-primary-background not-disabled:text-button-solid-primary-text',\n    secondary: 'not-disabled:bg-button-solid-secondary-background not-disabled:text-button-solid-secondary-text',\n    tertiary: 'not-disabled:bg-button-solid-tertiary-background not-disabled:text-button-solid-tertiary-text',\n    positive: 'not-disabled:bg-button-solid-positive-background not-disabled:text-button-solid-positive-text',\n    warning: 'not-disabled:bg-button-solid-warning-background not-disabled:text-button-solid-warning-text',\n    negative: 'not-disabled:bg-button-solid-negative-background not-disabled:text-button-solid-negative-text',\n    neutral: 'not-disabled:bg-button-solid-neutral-background not-disabled:text-button-solid-neutral-text',\n    transparent: 'not-disabled:bg-transparent',\n  }[color]\n\n  return (\n    <button\n      ref={ref}\n      className={clsx(\n        colorClasses,\n        'not-disabled:hover:brightness-90',\n        'disabled:text-disabled-text',\n        {\n          'disabled:bg-disabled-background': color !== 'transparent',\n          'disabled:opacity-70': color === 'transparent',\n          'not-disabled:hover:bg-button-text-hover-background': color === 'transparent',\n        },\n        ButtonUtil.iconPaddingMapping[size],\n        className\n      )}\n      {...restProps}\n    >\n      {children}\n    </button>\n  )\n})"],"mappings":"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","names":["import_react","import_clsx","clsx","Expandable","ExpandableUncontrolled","import_react","import_react","import_jsx_runtime","import_react","import_clsx","import_jsx_runtime","SolidButton","clsx","IconButton","clsx","import_jsx_runtime","clsx"]}

package/dist/components/date/YearMonthPicker.mjs

@@ -2,10 +2,10 @@
 import { useEffect as useEffect3, useRef, useState as useState4 } from "react";
 import { Scrollbars } from "react-custom-scrollbars-2";
 
-// src/util/noop.ts
+// src/utils/noop.ts
 var noop = () => void 0;
 
-// src/util/array.ts
+// src/utils/array.ts
 var equalSizeGroups = (array, groupSize) => {
   if (groupSize <= 0) {
     console.warn(`group size should be greater than 0: groupSize = ${groupSize}`);
@@ -52,7 +52,7 @@ var range = (endOrRange, options) => {
 import clsx3 from "clsx";
 
 // src/components/layout-and-navigation/Expandable.tsx
-import { forwardRef, useCallback, useEffect, useState } from "react";
+import { forwardRef, useCallback, useEffect, useId, useState } from "react";
 import { ChevronDown } from "lucide-react";
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -60,8 +60,9 @@ var ExpansionIcon = ({ isExpanded, className }) => {
   return /* @__PURE__ */ jsx(
     ChevronDown,
     {
+      "aria-hidden": true,
       className: clsx(
-        "min-w-6 w-6 min-h-6 h-6 transition-transform duration-200 ease-in-out",
+        "min-w-6 w-6 min-h-6 h-6 transition-transform motion-safe:duration-200 motion-reduce:duration-0 ease-in-out",
         { "rotate-180": isExpanded },
         className
       )
@@ -70,6 +71,7 @@ var ExpansionIcon = ({ isExpanded, className }) => {
 };
 var Expandable = forwardRef(function Expandable2({
   children,
+  id: providedId,
   label,
   icon,
   isExpanded = false,
@@ -83,16 +85,23 @@ var Expandable = forwardRef(function Expandable2({
 }, ref) {
   const defaultIcon = useCallback((expanded) => /* @__PURE__ */ jsx(ExpansionIcon, { isExpanded: expanded }), []);
   icon ??= defaultIcon;
+  const generatedId = useId();
+  const id = providedId ?? generatedId;
   return /* @__PURE__ */ jsxs(
     "div",
     {
       ref,
-      className: clsx("flex-col-0 bg-surface text-on-surface group rounded-lg shadow-sm", { "cursor-pointer": !clickOnlyOnHeader && !disabled }, className),
       onClick: () => !clickOnlyOnHeader && !disabled && onChange(!isExpanded),
+      className: clsx(
+        "flex-col-0 bg-surface text-on-surface group rounded-lg shadow-sm",
+        { "cursor-pointer": !clickOnlyOnHeader && !disabled },
+        className
+      ),
       children: [
         /* @__PURE__ */ jsxs(
-          "div",
+          "button",
           {
+            onClick: () => clickOnlyOnHeader && !disabled && onChange(!isExpanded),
             className: clsx(
               "flex-row-2 py-2 px-4 rounded-lg justify-between items-center bg-surface text-on-surface select-none",
               {
@@ -102,7 +111,9 @@ var Expandable = forwardRef(function Expandable2({
               },
               headerClassName
             ),
-            onClick: () => clickOnlyOnHeader && !disabled && onChange(!isExpanded),
+            "aria-expanded": isExpanded,
+            "aria-controls": `${id}-content`,
+            "aria-disabled": disabled ?? void 0,
             children: [
               label,
               icon(isExpanded)
@@ -112,6 +123,7 @@ var Expandable = forwardRef(function Expandable2({
         /* @__PURE__ */ jsx(
           "div",
           {
+            id: `${id}-content`,
             className: clsx(
               "flex-col-2 px-4 transition-all duration-300 ease-in-out",
               {
@@ -120,6 +132,7 @@ var Expandable = forwardRef(function Expandable2({
               },
               contentClassName
             ),
+            role: "region",
             children
           }
         )
@@ -150,7 +163,7 @@ var ExpandableUncontrolled = forwardRef(function ExpandableUncontrolled2({
   );
 });
 
-// src/util/date.ts
+// src/utils/date.ts
 var monthsList = ["january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"];
 var changeDuration = (date, duration, isAdding) => {
   const {
@@ -338,6 +351,44 @@ var SolidButton = forwardRef2(function SolidButton2({
     }
   );
 });
+var IconButton = forwardRef2(function IconButton2({
+  children,
+  color = "primary",
+  size = "medium",
+  className,
+  ...restProps
+}, ref) {
+  const colorClasses = {
+    primary: "not-disabled:bg-button-solid-primary-background not-disabled:text-button-solid-primary-text",
+    secondary: "not-disabled:bg-button-solid-secondary-background not-disabled:text-button-solid-secondary-text",
+    tertiary: "not-disabled:bg-button-solid-tertiary-background not-disabled:text-button-solid-tertiary-text",
+    positive: "not-disabled:bg-button-solid-positive-background not-disabled:text-button-solid-positive-text",
+    warning: "not-disabled:bg-button-solid-warning-background not-disabled:text-button-solid-warning-text",
+    negative: "not-disabled:bg-button-solid-negative-background not-disabled:text-button-solid-negative-text",
+    neutral: "not-disabled:bg-button-solid-neutral-background not-disabled:text-button-solid-neutral-text",
+    transparent: "not-disabled:bg-transparent"
+  }[color];
+  return /* @__PURE__ */ jsx3(
+    "button",
+    {
+      ref,
+      className: clsx2(
+        colorClasses,
+        "not-disabled:hover:brightness-90",
+        "disabled:text-disabled-text",
+        {
+          "disabled:bg-disabled-background": color !== "transparent",
+          "disabled:opacity-70": color === "transparent",
+          "not-disabled:hover:bg-button-text-hover-background": color === "transparent"
+        },
+        ButtonUtil.iconPaddingMapping[size],
+        className
+      ),
+      ...restProps,
+      children
+    }
+  );
+});
 
 // src/components/date/YearMonthPicker.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";