@chayns-components/core 5.4.5-alpha.0 → 5.4.5

package/lib/esm/hooks/dropdown.js

@@ -50,6 +50,11 @@ export const useDropdownAlignment = ({
     y: translateY
   }), [translateX, translateY]);
 };
+/**
+ * The space (in pixels) that should be kept between the dropdown content and the edge of the
+ * container when calculating the available maximum height.
+ */
+const AVAILABLE_HEIGHT_SPACING = 16;
 export const useDropdownPosition = ({
   anchorElement,
   container,
@@ -62,6 +67,7 @@ export const useDropdownPosition = ({
     y: 0
   });
   const [shouldUseTopAlignment, setShouldUseTopAlignment] = useState(false);
+  const [availableMaxHeight, setAvailableMaxHeight] = useState(0);
   const calculateCoordinates = useCallback(() => {
     if (container) {
       const {
@@ -84,6 +90,16 @@ export const useDropdownPosition = ({
       } else {
         setShouldUseTopAlignment(false);
       }
+
+      // Calculate the space that is available for the dropdown content. When the dropdown is
+      // opened to the top, the available space reaches from the anchor to the top edge of the
+      // container. When it is opened to the bottom, it reaches from the bottom of the anchor
+      // to the bottom edge of the container. A small spacing is subtracted so the content does
+      // not touch the container edge (e.g. to leave room for shadows).
+      const spaceToTop = y;
+      const spaceToBottom = height - (y + anchorHeight);
+      const nextAvailableMaxHeight = Math.max((useTopAlignment ? spaceToTop : spaceToBottom) - AVAILABLE_HEIGHT_SPACING, 0);
+      setAvailableMaxHeight(nextAvailableMaxHeight);
       setCoordinates({
         x,
         y: useTopAlignment ? y : y + anchorHeight
@@ -105,8 +121,9 @@ export const useDropdownPosition = ({
   }, [calculateCoordinates, shouldShowDropdown]);
   return useMemo(() => ({
     shouldUseTopAlignment,
-    coordinates
-  }), [coordinates, shouldUseTopAlignment]);
+    coordinates,
+    availableMaxHeight
+  }), [availableMaxHeight, coordinates, shouldUseTopAlignment]);
 };
 export const useDropdown = ({
   anchorElement,
@@ -118,7 +135,8 @@ export const useDropdown = ({
 }) => {
   const {
     shouldUseTopAlignment,
-    coordinates
+    coordinates,
+    availableMaxHeight
   } = useDropdownPosition({
     anchorElement,
     container,
@@ -136,7 +154,8 @@ export const useDropdown = ({
   return useMemo(() => ({
     coordinates,
     transform,
-    width
-  }), [coordinates, transform, width]);
+    width,
+    availableMaxHeight
+  }), [availableMaxHeight, coordinates, transform, width]);
 };
 //# sourceMappingURL=dropdown.js.map

package/lib/esm/hooks/dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.js","names":["useCallback","useEffect","useLayoutEffect","useMemo","useState","DropdownDirection","useIsomorphicLayoutEffect","window","useDropdownListener","onClick","onClose","onTouchEnd","onTouchStart","shouldCaptureEvents","document","addEventListener","removeEventListener","useDropdownAlignment","anchorElement","contentWidth","direction","shouldUseTopAlignment","translateX","setTranslateX","translateY","setTranslateY","BOTTOM_LEFT","TOP_LEFT","LEFT","includes","difference","clientWidth","useTopAlignment","TOP","TOP_RIGHT","x","y","useDropdownPosition","container","contentHeight","shouldShowDropdown","coordinates","setCoordinates","setShouldUseTopAlignment","calculateCoordinates","left","anchorLeft","top","anchorTop","height","anchorHeight","getBoundingClientRect","scrollLeft","scrollTop","hasBottomAlignment","BOTTOM","BOTTOM_RIGHT","handleResize","setTimeout","useDropdown","transform","width"],"sources":["../../../src/hooks/dropdown.ts"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';\nimport { DropdownCoordinates, DropdownDirection } from '../types/dropdown';\n\nconst useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\ninterface UseDropdownListenerOptions {\n    onClick: (event: MouseEvent) => void;\n    onClose: () => void;\n    onTouchEnd: (event: TouchEvent) => void;\n    onTouchStart: (event: TouchEvent) => void;\n    shouldCaptureEvents?: boolean;\n}\n\nexport const useDropdownListener = ({\n    onClick,\n    onClose,\n    onTouchEnd,\n    onTouchStart,\n    shouldCaptureEvents,\n}: UseDropdownListenerOptions) => {\n    useEffect(() => {\n        document.addEventListener('click', onClick, shouldCaptureEvents);\n        document.addEventListener('touchend', onTouchEnd, shouldCaptureEvents);\n        document.addEventListener('touchstart', onTouchStart, shouldCaptureEvents);\n\n        window.addEventListener('blur', onClose);\n\n        return () => {\n            document.removeEventListener('click', onClick, shouldCaptureEvents);\n            document.removeEventListener('touchend', onTouchEnd, shouldCaptureEvents);\n            document.removeEventListener('touchstart', onTouchStart, shouldCaptureEvents);\n\n            window.removeEventListener('blur', onClose);\n        };\n    }, [onClick, onClose, onTouchEnd, onTouchStart]);\n};\n\ninterface UseDropdownAlignmentOptions {\n    direction: DropdownDirection;\n    shouldUseTopAlignment: boolean;\n    contentWidth: number;\n    anchorElement: Element;\n}\n\nexport const useDropdownAlignment = ({\n    anchorElement,\n    contentWidth,\n    direction,\n    shouldUseTopAlignment,\n}: UseDropdownAlignmentOptions) => {\n    const [translateX, setTranslateX] = useState<string>('0px');\n    const [translateY, setTranslateY] = useState<string>('0px');\n\n    useEffect(() => {\n        if (\n            [\n                DropdownDirection.BOTTOM_LEFT,\n                DropdownDirection.TOP_LEFT,\n                DropdownDirection.LEFT,\n            ].includes(direction)\n        ) {\n            const difference = anchorElement.clientWidth - contentWidth;\n\n            setTranslateX(`${difference}px`);\n        } else {\n            setTranslateX('0px');\n        }\n    }, [anchorElement.clientWidth, contentWidth, direction]);\n\n    useEffect(() => {\n        const useTopAlignment =\n            shouldUseTopAlignment ||\n            [\n                DropdownDirection.TOP,\n                DropdownDirection.TOP_LEFT,\n                DropdownDirection.TOP_RIGHT,\n            ].includes(direction);\n\n        if (useTopAlignment) {\n            setTranslateY('-100%');\n        } else {\n            setTranslateY('0px');\n        }\n    }, [direction, shouldUseTopAlignment]);\n\n    return useMemo(() => ({ x: translateX, y: translateY }), [translateX, translateY]);\n};\n\ninterface UseDropdownPositionOptions {\n    anchorElement: Element;\n    container?: Element;\n    contentHeight?: number;\n    direction: DropdownDirection;\n    shouldShowDropdown: boolean;\n}\n\nexport const useDropdownPosition = ({\n    anchorElement,\n    container,\n    contentHeight = 0,\n    direction,\n    shouldShowDropdown,\n}: UseDropdownPositionOptions) => {\n    const [coordinates, setCoordinates] = useState<DropdownCoordinates>({ x: 0, y: 0 });\n    const [shouldUseTopAlignment, setShouldUseTopAlignment] = useState(false);\n\n    const calculateCoordinates = useCallback(() => {\n        if (container) {\n            const {\n                left: anchorLeft,\n                top: anchorTop,\n                height: anchorHeight,\n            } = anchorElement.getBoundingClientRect();\n\n            const { left, top, height } = container.getBoundingClientRect();\n\n            const x = anchorLeft - left + container.scrollLeft;\n            const y = anchorTop - top + container.scrollTop;\n\n            let useTopAlignment = [\n                DropdownDirection.TOP,\n                DropdownDirection.TOP_LEFT,\n                DropdownDirection.TOP_RIGHT,\n            ].includes(direction);\n\n            const hasBottomAlignment = [\n                DropdownDirection.BOTTOM,\n                DropdownDirection.BOTTOM_LEFT,\n                DropdownDirection.BOTTOM_RIGHT,\n            ].includes(direction);\n\n            if (!hasBottomAlignment && y + anchorHeight + contentHeight > height) {\n                useTopAlignment = true;\n\n                setShouldUseTopAlignment(true);\n            } else {\n                setShouldUseTopAlignment(false);\n            }\n\n            setCoordinates({ x, y: useTopAlignment ? y : y + anchorHeight });\n        }\n    }, [anchorElement, container, contentHeight, direction]);\n\n    useIsomorphicLayoutEffect(() => {\n        const handleResize = () => {\n            calculateCoordinates();\n\n            setTimeout(calculateCoordinates, 300);\n        };\n\n        handleResize();\n\n        if (shouldShowDropdown) {\n            window.addEventListener('resize', handleResize);\n        }\n\n        return () => {\n            window.removeEventListener('resize', handleResize);\n        };\n    }, [calculateCoordinates, shouldShowDropdown]);\n\n    return useMemo(\n        () => ({ shouldUseTopAlignment, coordinates }),\n        [coordinates, shouldUseTopAlignment],\n    );\n};\n\ninterface UseDropdownOptions {\n    anchorElement: Element;\n    container?: Element;\n    contentHeight?: number;\n    contentWidth: number;\n    direction: DropdownDirection;\n    shouldShowDropdown: boolean;\n}\n\nexport const useDropdown = ({\n    anchorElement,\n    container,\n    contentHeight,\n    contentWidth,\n    direction,\n    shouldShowDropdown,\n}: UseDropdownOptions) => {\n    const { shouldUseTopAlignment, coordinates } = useDropdownPosition({\n        anchorElement,\n        container,\n        contentHeight,\n        direction,\n        shouldShowDropdown,\n    });\n\n    const transform = useDropdownAlignment({\n        anchorElement,\n        contentWidth,\n        direction,\n        shouldUseTopAlignment,\n    });\n\n    const width = anchorElement.clientWidth;\n\n    return useMemo(() => ({ coordinates, transform, width }), [coordinates, transform, width]);\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"dropdown.js","names":["useCallback","useEffect","useLayoutEffect","useMemo","useState","DropdownDirection","useIsomorphicLayoutEffect","window","useDropdownListener","onClick","onClose","onTouchEnd","onTouchStart","shouldCaptureEvents","document","addEventListener","removeEventListener","useDropdownAlignment","anchorElement","contentWidth","direction","shouldUseTopAlignment","translateX","setTranslateX","translateY","setTranslateY","BOTTOM_LEFT","TOP_LEFT","LEFT","includes","difference","clientWidth","useTopAlignment","TOP","TOP_RIGHT","x","y","AVAILABLE_HEIGHT_SPACING","useDropdownPosition","container","contentHeight","shouldShowDropdown","coordinates","setCoordinates","setShouldUseTopAlignment","availableMaxHeight","setAvailableMaxHeight","calculateCoordinates","left","anchorLeft","top","anchorTop","height","anchorHeight","getBoundingClientRect","scrollLeft","scrollTop","hasBottomAlignment","BOTTOM","BOTTOM_RIGHT","spaceToTop","spaceToBottom","nextAvailableMaxHeight","Math","max","handleResize","setTimeout","useDropdown","transform","width"],"sources":["../../../src/hooks/dropdown.ts"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';\nimport { DropdownCoordinates, DropdownDirection } from '../types/dropdown';\n\nconst useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\ninterface UseDropdownListenerOptions {\n    onClick: (event: MouseEvent) => void;\n    onClose: () => void;\n    onTouchEnd: (event: TouchEvent) => void;\n    onTouchStart: (event: TouchEvent) => void;\n    shouldCaptureEvents?: boolean;\n}\n\nexport const useDropdownListener = ({\n    onClick,\n    onClose,\n    onTouchEnd,\n    onTouchStart,\n    shouldCaptureEvents,\n}: UseDropdownListenerOptions) => {\n    useEffect(() => {\n        document.addEventListener('click', onClick, shouldCaptureEvents);\n        document.addEventListener('touchend', onTouchEnd, shouldCaptureEvents);\n        document.addEventListener('touchstart', onTouchStart, shouldCaptureEvents);\n\n        window.addEventListener('blur', onClose);\n\n        return () => {\n            document.removeEventListener('click', onClick, shouldCaptureEvents);\n            document.removeEventListener('touchend', onTouchEnd, shouldCaptureEvents);\n            document.removeEventListener('touchstart', onTouchStart, shouldCaptureEvents);\n\n            window.removeEventListener('blur', onClose);\n        };\n    }, [onClick, onClose, onTouchEnd, onTouchStart]);\n};\n\ninterface UseDropdownAlignmentOptions {\n    direction: DropdownDirection;\n    shouldUseTopAlignment: boolean;\n    contentWidth: number;\n    anchorElement: Element;\n}\n\nexport const useDropdownAlignment = ({\n    anchorElement,\n    contentWidth,\n    direction,\n    shouldUseTopAlignment,\n}: UseDropdownAlignmentOptions) => {\n    const [translateX, setTranslateX] = useState<string>('0px');\n    const [translateY, setTranslateY] = useState<string>('0px');\n\n    useEffect(() => {\n        if (\n            [\n                DropdownDirection.BOTTOM_LEFT,\n                DropdownDirection.TOP_LEFT,\n                DropdownDirection.LEFT,\n            ].includes(direction)\n        ) {\n            const difference = anchorElement.clientWidth - contentWidth;\n\n            setTranslateX(`${difference}px`);\n        } else {\n            setTranslateX('0px');\n        }\n    }, [anchorElement.clientWidth, contentWidth, direction]);\n\n    useEffect(() => {\n        const useTopAlignment =\n            shouldUseTopAlignment ||\n            [\n                DropdownDirection.TOP,\n                DropdownDirection.TOP_LEFT,\n                DropdownDirection.TOP_RIGHT,\n            ].includes(direction);\n\n        if (useTopAlignment) {\n            setTranslateY('-100%');\n        } else {\n            setTranslateY('0px');\n        }\n    }, [direction, shouldUseTopAlignment]);\n\n    return useMemo(() => ({ x: translateX, y: translateY }), [translateX, translateY]);\n};\n\ninterface UseDropdownPositionOptions {\n    anchorElement: Element;\n    container?: Element;\n    contentHeight?: number;\n    direction: DropdownDirection;\n    shouldShowDropdown: boolean;\n}\n\n/**\n * The space (in pixels) that should be kept between the dropdown content and the edge of the\n * container when calculating the available maximum height.\n */\nconst AVAILABLE_HEIGHT_SPACING = 16;\n\nexport const useDropdownPosition = ({\n    anchorElement,\n    container,\n    contentHeight = 0,\n    direction,\n    shouldShowDropdown,\n}: UseDropdownPositionOptions) => {\n    const [coordinates, setCoordinates] = useState<DropdownCoordinates>({ x: 0, y: 0 });\n    const [shouldUseTopAlignment, setShouldUseTopAlignment] = useState(false);\n    const [availableMaxHeight, setAvailableMaxHeight] = useState<number>(0);\n\n    const calculateCoordinates = useCallback(() => {\n        if (container) {\n            const {\n                left: anchorLeft,\n                top: anchorTop,\n                height: anchorHeight,\n            } = anchorElement.getBoundingClientRect();\n\n            const { left, top, height } = container.getBoundingClientRect();\n\n            const x = anchorLeft - left + container.scrollLeft;\n            const y = anchorTop - top + container.scrollTop;\n\n            let useTopAlignment = [\n                DropdownDirection.TOP,\n                DropdownDirection.TOP_LEFT,\n                DropdownDirection.TOP_RIGHT,\n            ].includes(direction);\n\n            const hasBottomAlignment = [\n                DropdownDirection.BOTTOM,\n                DropdownDirection.BOTTOM_LEFT,\n                DropdownDirection.BOTTOM_RIGHT,\n            ].includes(direction);\n\n            if (!hasBottomAlignment && y + anchorHeight + contentHeight > height) {\n                useTopAlignment = true;\n\n                setShouldUseTopAlignment(true);\n            } else {\n                setShouldUseTopAlignment(false);\n            }\n\n            // Calculate the space that is available for the dropdown content. When the dropdown is\n            // opened to the top, the available space reaches from the anchor to the top edge of the\n            // container. When it is opened to the bottom, it reaches from the bottom of the anchor\n            // to the bottom edge of the container. A small spacing is subtracted so the content does\n            // not touch the container edge (e.g. to leave room for shadows).\n            const spaceToTop = y;\n            const spaceToBottom = height - (y + anchorHeight);\n\n            const nextAvailableMaxHeight = Math.max(\n                (useTopAlignment ? spaceToTop : spaceToBottom) - AVAILABLE_HEIGHT_SPACING,\n                0,\n            );\n\n            setAvailableMaxHeight(nextAvailableMaxHeight);\n\n            setCoordinates({ x, y: useTopAlignment ? y : y + anchorHeight });\n        }\n    }, [anchorElement, container, contentHeight, direction]);\n\n    useIsomorphicLayoutEffect(() => {\n        const handleResize = () => {\n            calculateCoordinates();\n\n            setTimeout(calculateCoordinates, 300);\n        };\n\n        handleResize();\n\n        if (shouldShowDropdown) {\n            window.addEventListener('resize', handleResize);\n        }\n\n        return () => {\n            window.removeEventListener('resize', handleResize);\n        };\n    }, [calculateCoordinates, shouldShowDropdown]);\n\n    return useMemo(\n        () => ({ shouldUseTopAlignment, coordinates, availableMaxHeight }),\n        [availableMaxHeight, coordinates, shouldUseTopAlignment],\n    );\n};\n\ninterface UseDropdownOptions {\n    anchorElement: Element;\n    container?: Element;\n    contentHeight?: number;\n    contentWidth: number;\n    direction: DropdownDirection;\n    shouldShowDropdown: boolean;\n}\n\nexport const useDropdown = ({\n    anchorElement,\n    container,\n    contentHeight,\n    contentWidth,\n    direction,\n    shouldShowDropdown,\n}: UseDropdownOptions) => {\n    const { shouldUseTopAlignment, coordinates, availableMaxHeight } = useDropdownPosition({\n        anchorElement,\n        container,\n        contentHeight,\n        direction,\n        shouldShowDropdown,\n    });\n\n    const transform = useDropdownAlignment({\n        anchorElement,\n        contentWidth,\n        direction,\n        shouldUseTopAlignment,\n    });\n\n    const width = anchorElement.clientWidth;\n\n    return useMemo(\n        () => ({ coordinates, transform, width, availableMaxHeight }),\n        [availableMaxHeight, coordinates, transform, width],\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/utils/file.js.map

@@ -1 +1 @@
-{"version":3,"file":"file.js","names":["hasDuplicate","items","newItem","comparator","some","item","filterDuplicateFile","files","newFile","a","b","name","size","filterDuplicateFileUrls","getHumanSize","bytes","FILE_SIZE_UNITS","unitIndex","Math","round","toString","replace","isValidFileType","types","file","allowedTypesArray","split","map","type","trim","fileType","endsWith","baseType","slice","startsWith","MIME_TYPE_MAPPING","getIconByMimeType","mimeType","matchedType","Object","keys","find"],"sources":["../../../src/utils/file.ts"],"sourcesContent":["import type { UploadedFile } from '../components/file-select/FileSelect';\n\nexport const hasDuplicate = <T>(\n    items: T[],\n    newItem: T,\n    comparator: (a: T, b: T) => boolean,\n): boolean => items.some((item) => comparator(item, newItem));\n\ninterface FilerDuplicateFileOptions {\n    files: File[];\n    newFile: File;\n}\n\nexport const filterDuplicateFile = ({ files, newFile }: FilerDuplicateFileOptions) =>\n    hasDuplicate(files, newFile, (a, b) => a.name === b.name && a.size === b.size);\n\ninterface FilterDuplicateFileUrlsOptions {\n    files: UploadedFile[];\n    newFile: UploadedFile;\n}\n\nexport const filterDuplicateFileUrls = ({ files, newFile }: FilterDuplicateFileUrlsOptions) =>\n    hasDuplicate(files, newFile, (a, b) => a === b);\n\nexport const getHumanSize = (bytes: number): string => {\n    const FILE_SIZE_UNITS = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];\n    let size = bytes || 0;\n    let unitIndex = 0;\n\n    while (size >= 1024) {\n        size /= 1024;\n        unitIndex += 1;\n    }\n\n    size = Math.round(size * 10) / 10;\n\n    return `${size.toString().replace('.', ',')} ${FILE_SIZE_UNITS[unitIndex] ?? ''}`;\n};\n\ninterface IsValidFileTypeOptions {\n    file: File;\n    types: string;\n}\n\nexport const isValidFileType = ({ types, file }: IsValidFileTypeOptions) => {\n    const allowedTypesArray = types.split(',').map((type) => type.trim());\n    const fileType = file.type;\n\n    return allowedTypesArray.some((type) => {\n        if (type.endsWith('/*')) {\n            const baseType = type.slice(0, -2); // remove '/*'\n            return fileType.startsWith(baseType);\n        }\n        return fileType === type;\n    });\n};\n\nexport const MIME_TYPE_MAPPING: Record<string, string> = {\n    // Haupttypen\n    'application/pdf': 'fa fa-file-pdf',\n    'application/zip': 'fa fa-file-archive',\n    'application/msword': 'fa fa-file-word',\n    'application/vnd.ms-excel': 'fa fa-file-excel',\n    // Typen mit Wildcards\n    'application/vnd.openxmlformats-officedocument.': 'fa fa-file-word',\n    'application/x-': 'fa fa-file-archive',\n    // Addiere nur spezifische Fälle\n    'text/pdf': 'fa fa-file-pdf',\n};\n\nexport const getIconByMimeType = (mimeType?: string): string => {\n    const matchedType = Object.keys(MIME_TYPE_MAPPING).find((type) => mimeType?.startsWith(type));\n    return MIME_TYPE_MAPPING[matchedType!] || 'fa fa-file';\n};\n"],"mappings":"AAEA,OAAO,MAAMA,YAAY,GAAGA,CACxBC,KAAU,EACVC,OAAU,EACVC,UAAmC,KACzBF,KAAK,CAACG,IAAI,CAAEC,IAAI,IAAKF,UAAU,CAACE,IAAI,EAAEH,OAAO,CAAC,CAAC;AAO7D,OAAO,MAAMI,mBAAmB,GAAGA,CAAC;EAAEC,KAAK;EAAEC;AAAmC,CAAC,KAC7ER,YAAY,CAACO,KAAK,EAAEC,OAAO,EAAE,CAACC,CAAC,EAAEC,CAAC,KAAKD,CAAC,CAACE,IAAI,KAAKD,CAAC,CAACC,IAAI,IAAIF,CAAC,CAACG,IAAI,KAAKF,CAAC,CAACE,IAAI,CAAC;AAOlF,OAAO,MAAMC,uBAAuB,GAAGA,CAAC;EAAEN,KAAK;EAAEC;AAAwC,CAAC,KACtFR,YAAY,CAACO,KAAK,EAAEC,OAAO,EAAE,CAACC,CAAC,EAAEC,CAAC,KAAKD,CAAC,KAAKC,CAAC,CAAC;AAEnD,OAAO,MAAMI,YAAY,GAAIC,KAAa,IAAa;EACnD,MAAMC,eAAe,GAAG,CAAC,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;EAC3D,IAAIJ,IAAI,GAAGG,KAAK,IAAI,CAAC;EACrB,IAAIE,SAAS,GAAG,CAAC;EAEjB,OAAOL,IAAI,IAAI,IAAI,EAAE;IACjBA,IAAI,IAAI,IAAI;IACZK,SAAS,IAAI,CAAC;EAClB;EAEAL,IAAI,GAAGM,IAAI,CAACC,KAAK,CAACP,IAAI,GAAG,EAAE,CAAC,GAAG,EAAE;EAEjC,OAAO,GAAGA,IAAI,CAACQ,QAAQ,CAAC,CAAC,CAACC,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,IAAIL,eAAe,CAACC,SAAS,CAAC,IAAI,EAAE,EAAE;AACrF,CAAC;AAOD,OAAO,MAAMK,eAAe,GAAGA,CAAC;EAAEC,KAAK;EAAEC;AAA6B,CAAC,KAAK;EACxE,MAAMC,iBAAiB,GAAGF,KAAK,CAACG,KAAK,CAAC,GAAG,CAAC,CAACC,GAAG,CAAEC,IAAI,IAAKA,IAAI,CAACC,IAAI,CAAC,CAAC,CAAC;EACrE,MAAMC,QAAQ,GAAGN,IAAI,CAACI,IAAI;EAE1B,OAAOH,iBAAiB,CAACrB,IAAI,CAAEwB,IAAI,IAAK;IACpC,IAAIA,IAAI,CAACG,QAAQ,CAAC,IAAI,CAAC,EAAE;MACrB,MAAMC,QAAQ,GAAGJ,IAAI,CAACK,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;MACpC,OAAOH,QAAQ,CAACI,UAAU,CAACF,QAAQ,CAAC;IACxC;IACA,OAAOF,QAAQ,KAAKF,IAAI;EAC5B,CAAC,CAAC;AACN,CAAC;AAED,OAAO,MAAMO,iBAAyC,GAAG;EACrD;EACA,iBAAiB,EAAE,gBAAgB;EACnC,iBAAiB,EAAE,oBAAoB;EACvC,oBAAoB,EAAE,iBAAiB;EACvC,0BAA0B,EAAE,kBAAkB;EAC9C;EACA,gDAAgD,EAAE,iBAAiB;EACnE,gBAAgB,EAAE,oBAAoB;EACtC;EACA,UAAU,EAAE;AAChB,CAAC;AAED,OAAO,MAAMC,iBAAiB,GAAIC,QAAiB,IAAa;EAC5D,MAAMC,WAAW,GAAGC,MAAM,CAACC,IAAI,CAACL,iBAAiB,CAAC,CAACM,IAAI,CAAEb,IAAI,IAAKS,QAAQ,EAAEH,UAAU,CAACN,IAAI,CAAC,CAAC;EAC7F,OAAOO,iBAAiB,CAACG,WAAW,CAAE,IAAI,YAAY;AAC1D,CAAC","ignoreList":[]}
+{"version":3,"file":"file.js","names":["hasDuplicate","items","newItem","comparator","some","item","filterDuplicateFile","files","newFile","a","b","name","size","filterDuplicateFileUrls","getHumanSize","bytes","FILE_SIZE_UNITS","unitIndex","Math","round","toString","replace","isValidFileType","types","file","allowedTypesArray","split","map","type","trim","fileType","endsWith","baseType","slice","startsWith","MIME_TYPE_MAPPING","getIconByMimeType","mimeType","matchedType","Object","keys","find"],"sources":["../../../src/utils/file.ts"],"sourcesContent":["import { UploadedFile } from '../components/file-select/FileSelect';\n\nexport const hasDuplicate = <T>(\n    items: T[],\n    newItem: T,\n    comparator: (a: T, b: T) => boolean,\n): boolean => items.some((item) => comparator(item, newItem));\n\ninterface FilerDuplicateFileOptions {\n    files: File[];\n    newFile: File;\n}\n\nexport const filterDuplicateFile = ({ files, newFile }: FilerDuplicateFileOptions) =>\n    hasDuplicate(files, newFile, (a, b) => a.name === b.name && a.size === b.size);\n\ninterface FilterDuplicateFileUrlsOptions {\n    files: UploadedFile[];\n    newFile: UploadedFile;\n}\n\nexport const filterDuplicateFileUrls = ({ files, newFile }: FilterDuplicateFileUrlsOptions) =>\n    hasDuplicate(files, newFile, (a, b) => a === b);\n\nexport const getHumanSize = (bytes: number): string => {\n    const FILE_SIZE_UNITS = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];\n    let size = bytes || 0;\n    let unitIndex = 0;\n\n    while (size >= 1024) {\n        size /= 1024;\n        unitIndex += 1;\n    }\n\n    size = Math.round(size * 10) / 10;\n\n    return `${size.toString().replace('.', ',')} ${FILE_SIZE_UNITS[unitIndex] ?? ''}`;\n};\n\ninterface IsValidFileTypeOptions {\n    file: File;\n    types: string;\n}\n\nexport const isValidFileType = ({ types, file }: IsValidFileTypeOptions) => {\n    const allowedTypesArray = types.split(',').map((type) => type.trim());\n    const fileType = file.type;\n\n    return allowedTypesArray.some((type) => {\n        if (type.endsWith('/*')) {\n            const baseType = type.slice(0, -2); // remove '/*'\n            return fileType.startsWith(baseType);\n        }\n        return fileType === type;\n    });\n};\n\nexport const MIME_TYPE_MAPPING: Record<string, string> = {\n    // Haupttypen\n    'application/pdf': 'fa fa-file-pdf',\n    'application/zip': 'fa fa-file-archive',\n    'application/msword': 'fa fa-file-word',\n    'application/vnd.ms-excel': 'fa fa-file-excel',\n    // Typen mit Wildcards\n    'application/vnd.openxmlformats-officedocument.': 'fa fa-file-word',\n    'application/x-': 'fa fa-file-archive',\n    // Addiere nur spezifische Fälle\n    'text/pdf': 'fa fa-file-pdf',\n};\n\nexport const getIconByMimeType = (mimeType?: string): string => {\n    const matchedType = Object.keys(MIME_TYPE_MAPPING).find((type) => mimeType?.startsWith(type));\n    return MIME_TYPE_MAPPING[matchedType!] || 'fa fa-file';\n};\n"],"mappings":"AAEA,OAAO,MAAMA,YAAY,GAAGA,CACxBC,KAAU,EACVC,OAAU,EACVC,UAAmC,KACzBF,KAAK,CAACG,IAAI,CAAEC,IAAI,IAAKF,UAAU,CAACE,IAAI,EAAEH,OAAO,CAAC,CAAC;AAO7D,OAAO,MAAMI,mBAAmB,GAAGA,CAAC;EAAEC,KAAK;EAAEC;AAAmC,CAAC,KAC7ER,YAAY,CAACO,KAAK,EAAEC,OAAO,EAAE,CAACC,CAAC,EAAEC,CAAC,KAAKD,CAAC,CAACE,IAAI,KAAKD,CAAC,CAACC,IAAI,IAAIF,CAAC,CAACG,IAAI,KAAKF,CAAC,CAACE,IAAI,CAAC;AAOlF,OAAO,MAAMC,uBAAuB,GAAGA,CAAC;EAAEN,KAAK;EAAEC;AAAwC,CAAC,KACtFR,YAAY,CAACO,KAAK,EAAEC,OAAO,EAAE,CAACC,CAAC,EAAEC,CAAC,KAAKD,CAAC,KAAKC,CAAC,CAAC;AAEnD,OAAO,MAAMI,YAAY,GAAIC,KAAa,IAAa;EACnD,MAAMC,eAAe,GAAG,CAAC,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;EAC3D,IAAIJ,IAAI,GAAGG,KAAK,IAAI,CAAC;EACrB,IAAIE,SAAS,GAAG,CAAC;EAEjB,OAAOL,IAAI,IAAI,IAAI,EAAE;IACjBA,IAAI,IAAI,IAAI;IACZK,SAAS,IAAI,CAAC;EAClB;EAEAL,IAAI,GAAGM,IAAI,CAACC,KAAK,CAACP,IAAI,GAAG,EAAE,CAAC,GAAG,EAAE;EAEjC,OAAO,GAAGA,IAAI,CAACQ,QAAQ,CAAC,CAAC,CAACC,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,IAAIL,eAAe,CAACC,SAAS,CAAC,IAAI,EAAE,EAAE;AACrF,CAAC;AAOD,OAAO,MAAMK,eAAe,GAAGA,CAAC;EAAEC,KAAK;EAAEC;AAA6B,CAAC,KAAK;EACxE,MAAMC,iBAAiB,GAAGF,KAAK,CAACG,KAAK,CAAC,GAAG,CAAC,CAACC,GAAG,CAAEC,IAAI,IAAKA,IAAI,CAACC,IAAI,CAAC,CAAC,CAAC;EACrE,MAAMC,QAAQ,GAAGN,IAAI,CAACI,IAAI;EAE1B,OAAOH,iBAAiB,CAACrB,IAAI,CAAEwB,IAAI,IAAK;IACpC,IAAIA,IAAI,CAACG,QAAQ,CAAC,IAAI,CAAC,EAAE;MACrB,MAAMC,QAAQ,GAAGJ,IAAI,CAACK,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;MACpC,OAAOH,QAAQ,CAACI,UAAU,CAACF,QAAQ,CAAC;IACxC;IACA,OAAOF,QAAQ,KAAKF,IAAI;EAC5B,CAAC,CAAC;AACN,CAAC;AAED,OAAO,MAAMO,iBAAyC,GAAG;EACrD;EACA,iBAAiB,EAAE,gBAAgB;EACnC,iBAAiB,EAAE,oBAAoB;EACvC,oBAAoB,EAAE,iBAAiB;EACvC,0BAA0B,EAAE,kBAAkB;EAC9C;EACA,gDAAgD,EAAE,iBAAiB;EACnE,gBAAgB,EAAE,oBAAoB;EACtC;EACA,UAAU,EAAE;AAChB,CAAC;AAED,OAAO,MAAMC,iBAAiB,GAAIC,QAAiB,IAAa;EAC5D,MAAMC,WAAW,GAAGC,MAAM,CAACC,IAAI,CAACL,iBAAiB,CAAC,CAACM,IAAI,CAAEb,IAAI,IAAKS,QAAQ,EAAEH,UAAU,CAACN,IAAI,CAAC,CAAC;EAC7F,OAAOO,iBAAiB,CAACG,WAAW,CAAE,IAAI,YAAY;AAC1D,CAAC","ignoreList":[]}

package/lib/types/components/accordion/Accordion.d.ts

@@ -135,11 +135,6 @@ export type AccordionProps = {
      * Whether the accordion should be indexed.
      */
     shouldIndex?: boolean;
-    /**
-     * Enables keyboard-only focus highlighting. The highlighting is only visible while the
-     * user navigates with the keyboard and is reset on mouse movement or click.
-     */
-    shouldEnableKeyboardHighlighting?: boolean;
 };
 declare const Accordion: FC<AccordionProps>;
 export default Accordion;

package/lib/types/components/accordion/Accordion.styles.d.ts

@@ -1,6 +1,6 @@
 export declare const StyledMotionAccordion: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
-}, "theme" | "$shouldShowKeyboardHighlighting" | "$isWrapped" | "$isOpen" | "$isParentWrapped" | "$shouldForceBackground" | "$shouldHideBackground" | "$shouldShowLines" | "$shouldHideBottomLine" | "$bottomBorderColor" | "$shouldEnableKeyboardHighlighting"> & {
+    ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
+}, "theme" | "$isWrapped" | "$isOpen" | "$isParentWrapped" | "$shouldForceBackground" | "$shouldHideBackground" | "$shouldShowLines" | "$shouldHideBottomLine" | "$bottomBorderColor"> & {
     $isOpen: boolean;
     $isParentWrapped?: boolean;
     $isWrapped?: boolean;
@@ -9,13 +9,11 @@ export declare const StyledMotionAccordion: import("styled-components/dist/types
     $shouldShowLines?: boolean;
     $shouldHideBottomLine: boolean;
     $bottomBorderColor?: string;
-    $shouldEnableKeyboardHighlighting?: boolean;
-    $shouldShowKeyboardHighlighting?: boolean;
 } & {
     theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
 }, never> & Partial<Pick<import("styled-components").FastOmit<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
-}, "theme" | "$shouldShowKeyboardHighlighting" | "$isWrapped" | "$isOpen" | "$isParentWrapped" | "$shouldForceBackground" | "$shouldHideBackground" | "$shouldShowLines" | "$shouldHideBottomLine" | "$bottomBorderColor" | "$shouldEnableKeyboardHighlighting"> & {
+    ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
+}, "theme" | "$isWrapped" | "$isOpen" | "$isParentWrapped" | "$shouldForceBackground" | "$shouldHideBackground" | "$shouldShowLines" | "$shouldHideBottomLine" | "$bottomBorderColor"> & {
     $isOpen: boolean;
     $isParentWrapped?: boolean;
     $isWrapped?: boolean;
@@ -24,8 +22,6 @@ export declare const StyledMotionAccordion: import("styled-components/dist/types
     $shouldShowLines?: boolean;
     $shouldHideBottomLine: boolean;
     $bottomBorderColor?: string;
-    $shouldEnableKeyboardHighlighting?: boolean;
-    $shouldShowKeyboardHighlighting?: boolean;
 } & {
     theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
 }, never>>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>, keyof React.Component<any, {}, any>>;

package/lib/types/components/accordion/accordion-body/AccordionBody.styles.d.ts

@@ -1,11 +1,11 @@
 export declare const StyledMotionAccordionBody: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
+    ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
 }, "theme" | "$maxHeight"> & {
     $maxHeight?: number;
 } & {
     theme: import("../../color-scheme-provider/ColorSchemeProvider").Theme;
 }, never> & Partial<Pick<import("styled-components").FastOmit<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
+    ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
 }, "theme" | "$maxHeight"> & {
     $maxHeight?: number;
 } & {

package/lib/types/components/accordion/accordion-group/AccordionGroup.d.ts

@@ -2,19 +2,14 @@ import React, { Dispatch, FC, ReactNode, SetStateAction } from 'react';
 type IUpdateOpenAccordionUuid = (uuid: string, options?: {
     shouldOnlyOpen?: boolean;
 }) => void;
-type IUpdateActiveAccordionUuid = (uuid?: string) => void;
-type IRegisterAccordionUuid = (uuid: string) => void;
-type IUnregisterAccordionUuid = (uuid: string) => void;
+type IUpdateAccordionUuids = (uuids: string[]) => void;
 interface IAccordionGroupContext {
     isWrapped?: boolean;
     openAccordionUuid?: string;
     setOpenAccordionUuid?: Dispatch<SetStateAction<string | undefined>>;
     updateOpenAccordionUuid?: IUpdateOpenAccordionUuid;
     accordionUuids?: string[];
-    registerAccordionUuid?: IRegisterAccordionUuid;
-    unregisterAccordionUuid?: IUnregisterAccordionUuid;
-    activeAccordionUuid?: string;
-    updateActiveAccordionUuid?: IUpdateActiveAccordionUuid;
+    updateAccordionUuids?: IUpdateAccordionUuids;
     accordionGroupUuid?: string;
 }
 export declare const AccordionGroupContext: React.Context<IAccordionGroupContext>;

package/lib/types/components/accordion/accordion-head/AccordionHead.d.ts

@@ -19,7 +19,6 @@ export type AccordionHeadProps = {
     titleInputProps?: InputProps;
     titleColor?: CSSProperties['color'];
     shouldSkipAnimation?: boolean;
-    shouldEnableKeyboardHighlighting?: boolean;
 };
 declare const AccordionHead: FC<AccordionHeadProps>;
 export default AccordionHead;

package/lib/types/components/accordion/accordion-head/AccordionHead.styles.d.ts

@@ -1,39 +1,39 @@
 import type { CSSProperties } from 'react';
 export declare const StyledMotionAccordionHead: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
+    ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
 }, "theme"> & {
     theme: import("../../color-scheme-provider/ColorSchemeProvider").Theme;
 }, never> & Partial<Pick<import("styled-components").FastOmit<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
+    ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
 }, "theme"> & {
     theme: import("../../color-scheme-provider/ColorSchemeProvider").Theme;
 }, never>>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>, keyof React.Component<any, {}, any>>;
 export declare const StyledMotionIconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
+    ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
 }, never> & Partial<Pick<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
+    ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
 }, never>>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>, keyof React.Component<any, {}, any>>;
 export declare const StyledMotionContentWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
+    ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
 }, "theme" | "$isWrapped"> & {
     $isWrapped: boolean;
 } & {
     theme: import("../../color-scheme-provider/ColorSchemeProvider").Theme;
 }, never> & Partial<Pick<import("styled-components").FastOmit<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
+    ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
 }, "theme" | "$isWrapped"> & {
     $isWrapped: boolean;
 } & {
     theme: import("../../color-scheme-provider/ColorSchemeProvider").Theme;
 }, never>>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>, keyof React.Component<any, {}, any>>;
 export declare const StyledMotionTitleWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
+    ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
 }, never> & Partial<Pick<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
+    ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
 }, never>>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>, keyof React.Component<any, {}, any>>;
 export declare const StyledTitleInputWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export declare const StyledMotionTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
+    ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
 }, "theme" | "$color" | "$isWrapped" | "$isOpen" | "$hasSearch"> & {
     $isOpen: boolean;
     $isWrapped: boolean;
@@ -42,7 +42,7 @@ export declare const StyledMotionTitle: import("styled-components/dist/types").I
 } & {
     theme: import("../../color-scheme-provider/ColorSchemeProvider").Theme;
 }, never> & Partial<Pick<import("styled-components").FastOmit<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
+    ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
 }, "theme" | "$color" | "$isWrapped" | "$isOpen" | "$hasSearch"> & {
     $isOpen: boolean;
     $isWrapped: boolean;
@@ -52,23 +52,23 @@ export declare const StyledMotionTitle: import("styled-components/dist/types").I
     theme: import("../../color-scheme-provider/ColorSchemeProvider").Theme;
 }, never>>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>, keyof React.Component<any, {}, any>>;
 export declare const StyledMotionTitleElementWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
+    ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
 }, never> & Partial<Pick<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
+    ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
 }, never>>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>, keyof React.Component<any, {}, any>>;
 type StyledRightWrapperProps = {
     $isSearchActive: boolean;
 };
 export declare const StyledRightWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$isSearchActive"> & StyledRightWrapperProps, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$isSearchActive"> & StyledRightWrapperProps, never>>> & string;
 export declare const StyledMotionSearchWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
+    ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
 }, never> & Partial<Pick<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
+    ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
 }, never>>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>, keyof React.Component<any, {}, any>>;
 export declare const StyledMotionRightElementWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
+    ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
 }, never> & Partial<Pick<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
+    ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
 }, never>>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>, keyof React.Component<any, {}, any>>;
 export declare const StyledMotionRightInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<Omit<Omit<import("motion/react").HTMLMotionProps<"input">, "ref"> & React.RefAttributes<HTMLInputElement>, "ref"> & {
     ref?: ((instance: HTMLInputElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLInputElement> | null | undefined;
@@ -84,8 +84,8 @@ export declare const StyledMotionRightInput: import("styled-components/dist/type
     theme: import("../../color-scheme-provider/ColorSchemeProvider").Theme;
 }, never>>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLInputElement, import("motion/react").HTMLMotionProps<"input">>, keyof React.Component<any, {}, any>>;
 export declare const StyledMotionRightInputIconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
+    ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
 }, never> & Partial<Pick<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
+    ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
 }, never>>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>, keyof React.Component<any, {}, any>>;
 export {};

package/lib/types/components/amount-control/AmountControl.d.ts

@@ -33,11 +33,6 @@ export type AmountControlProps = {
      * A Function that is executed when the amount is changed
      */
     onChange?: (amount: number) => void;
-    /**
-     * Enables keyboard-only focus highlighting. The highlighting is only visible while the
-     * user navigates with the keyboard and is reset on mouse movement or click.
-     */
-    shouldEnableKeyboardHighlighting?: boolean;
     /**
      * Whether the label should be displayed even if an amount is selected.
      */

package/lib/types/components/amount-control/AmountControl.styles.d.ts

@@ -13,20 +13,18 @@ export declare const StyledInputWrapper: import("styled-components/dist/types").
 }, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "theme"> & {
     theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
 }, never>>> & string;
-export declare const StyledAmountControlInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "theme" | "$shouldShowKeyboardHighlighting" | "$displayState" | "$shouldShowIcon" | "$hasFocus" | "$shouldShowWideInput"> & {
+export declare const StyledAmountControlInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "theme" | "$displayState" | "$shouldShowIcon" | "$hasFocus" | "$shouldShowWideInput"> & {
     $displayState: DisplayState;
     $shouldShowIcon: boolean;
     $hasFocus: boolean;
     $shouldShowWideInput: boolean;
-    $shouldShowKeyboardHighlighting?: boolean;
 } & {
     theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
-}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "theme" | "$shouldShowKeyboardHighlighting" | "$displayState" | "$shouldShowIcon" | "$hasFocus" | "$shouldShowWideInput"> & {
+}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "theme" | "$displayState" | "$shouldShowIcon" | "$hasFocus" | "$shouldShowWideInput"> & {
     $displayState: DisplayState;
     $shouldShowIcon: boolean;
     $hasFocus: boolean;
     $shouldShowWideInput: boolean;
-    $shouldShowKeyboardHighlighting?: boolean;
 } & {
     theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
 }, never>>> & string;
@@ -43,18 +41,16 @@ export declare const StyledAmountControlPseudoInput: import("styled-components/d
 }, never>>> & string;
 export declare const StyledMotionAmountControlButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<Omit<Omit<import("motion/react").HTMLMotionProps<"button">, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLButtonElement> | null | undefined;
-}, "theme" | "$isDisabled" | "$shouldShowKeyboardHighlighting" | "$color"> & {
+}, "theme" | "$isDisabled" | "$color"> & {
     $isDisabled: boolean;
     $color?: string;
-    $shouldShowKeyboardHighlighting?: boolean;
 } & {
     theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
 }, never> & Partial<Pick<import("styled-components").FastOmit<Omit<Omit<import("motion/react").HTMLMotionProps<"button">, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLButtonElement> | null | undefined;
-}, "theme" | "$isDisabled" | "$shouldShowKeyboardHighlighting" | "$color"> & {
+}, "theme" | "$isDisabled" | "$color"> & {
     $isDisabled: boolean;
     $color?: string;
-    $shouldShowKeyboardHighlighting?: boolean;
 } & {
     theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
 }, never>>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLButtonElement, import("motion/react").HTMLMotionProps<"button">>, keyof React.Component<any, {}, any>>;

package/lib/types/components/button/Button.styles.d.ts

@@ -1,6 +1,6 @@
 export declare const StyledMotionButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<Omit<Omit<import("motion/react").HTMLMotionProps<"button">, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLButtonElement> | null | undefined;
-}, "theme" | "$isDisabled" | "$shouldShowKeyboardHighlighting" | "$hasIcon" | "$hasChildren" | "$isSecondary" | "$shouldShowTextAsRobotoMedium" | "$shouldShowAsSelectButton" | "$shouldShowWaitCursor" | "$effectiveButtonDesign"> & {
+}, "theme" | "$isDisabled" | "$hasIcon" | "$hasChildren" | "$isSecondary" | "$shouldShowTextAsRobotoMedium" | "$shouldShowAsSelectButton" | "$shouldShowWaitCursor" | "$effectiveButtonDesign"> & {
     $hasIcon: boolean;
     $hasChildren: boolean;
     $isDisabled?: boolean;
@@ -9,12 +9,11 @@ export declare const StyledMotionButton: import("styled-components/dist/types").
     $shouldShowAsSelectButton: boolean;
     $shouldShowWaitCursor?: boolean;
     $effectiveButtonDesign: number;
-    $shouldShowKeyboardHighlighting?: boolean;
 } & {
     theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
 }, never> & Partial<Pick<import("styled-components").FastOmit<Omit<Omit<import("motion/react").HTMLMotionProps<"button">, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLButtonElement> | null | undefined;
-}, "theme" | "$isDisabled" | "$shouldShowKeyboardHighlighting" | "$hasIcon" | "$hasChildren" | "$isSecondary" | "$shouldShowTextAsRobotoMedium" | "$shouldShowAsSelectButton" | "$shouldShowWaitCursor" | "$effectiveButtonDesign"> & {
+}, "theme" | "$isDisabled" | "$hasIcon" | "$hasChildren" | "$isSecondary" | "$shouldShowTextAsRobotoMedium" | "$shouldShowAsSelectButton" | "$shouldShowWaitCursor" | "$effectiveButtonDesign"> & {
     $hasIcon: boolean;
     $hasChildren: boolean;
     $isDisabled?: boolean;
@@ -23,18 +22,17 @@ export declare const StyledMotionButton: import("styled-components/dist/types").
     $shouldShowAsSelectButton: boolean;
     $shouldShowWaitCursor?: boolean;
     $effectiveButtonDesign: number;
-    $shouldShowKeyboardHighlighting?: boolean;
 } & {
     theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
 }, never>>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLButtonElement, import("motion/react").HTMLMotionProps<"button">>, keyof React.Component<any, {}, any>>;
 export declare const StyledIconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
 export declare const StyledMotionChildrenWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
+    ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
 }, never> & Partial<Pick<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
+    ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
 }, never>>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>, keyof React.Component<any, {}, any>>;
 export declare const StyledMotionWaitCursorWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
+    ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
 }, never> & Partial<Pick<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
+    ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
 }, never>>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>, keyof React.Component<any, {}, any>>;

package/lib/types/components/button/Button.types.d.ts

@@ -97,12 +97,4 @@ export type ButtonProps = {
      * @optional
      */
     tapDuration?: number;
-    /**
-     * Enables keyboard-only focus highlighting.
-     * @description
-     * Focus styles are only shown while navigating with the keyboard and are reset on mouse interaction.
-     * @optional
-     * @default false
-     */
-    shouldEnableKeyboardHighlighting?: boolean;
 };

package/lib/types/components/checkbox/Checkbox.d.ts

@@ -51,10 +51,6 @@ export type CheckboxProps = {
      * Whether the Checkbox should be displayed centered to the label or at the top
      */
     shouldShowCentered?: boolean;
-    /**
-     * Enables keyboard-only focus highlighting.
-     */
-    shouldEnableKeyboardHighlighting?: boolean;
 };
 declare const Checkbox: FC<CheckboxProps>;
 export default Checkbox;

package/lib/types/components/checkbox/Checkbox.styles.d.ts

@@ -1,10 +1,7 @@
 import type { CSSProperties } from 'react';
 import type { CheckboxProps } from './Checkbox';
 export declare const StyledCheckbox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-type StyledCheckboxInputProps = {
-    $shouldShowKeyboardHighlighting?: boolean;
-};
-export declare const StyledCheckboxInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "$shouldShowKeyboardHighlighting"> & StyledCheckboxInputProps, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "$shouldShowKeyboardHighlighting"> & StyledCheckboxInputProps, never>>> & string;
+export declare const StyledCheckboxInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>>> & string;
 export declare const StyledCheckboxBoxWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "theme" | "$shouldShowAsSwitch"> & {
     $shouldShowAsSwitch?: CheckboxProps["shouldShowAsSwitch"];
 } & {
@@ -48,4 +45,3 @@ export declare const StyledCheckboxLabel: import("styled-components/dist/types")
 } & {
     theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
 }, never>>> & string;
-export {};

package/lib/types/components/color-scheme-provider/ColorSchemeProvider.d.ts

@@ -35,10 +35,6 @@ export type ColorSchemeProviderProps = {
      * An optional color for all icons
      */
     iconColor?: string;
-    /**
-     * Enables keyboard-only focus highlighting globally for child components.
-     */
-    shouldEnableKeyboardHighlighting?: boolean;
 };
 export interface Theme {
     [key: string]: string;
@@ -50,7 +46,6 @@ export interface ColorSchemeContextProps {
     designSettings?: ChaynsDesignSettings;
     paragraphFormat: ChaynsParagraphFormat[];
     theme: Theme;
-    shouldEnableKeyboardHighlighting: boolean;
 }
 export declare const ColorSchemeContext: React.Context<ColorSchemeContextProps | undefined>;
 export declare const useColorScheme: () => ColorSchemeContextProps | undefined;

package/lib/types/components/combobox/ComboBox.styles.d.ts

@@ -12,7 +12,7 @@ export declare const StyledComboBox: import("styled-components/dist/types").ISty
 } & {
     theme: Theme;
 }, never>>> & string;
-export declare const StyledComboBoxHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "theme" | "$isDisabled" | "$size" | "$shouldShowKeyboardHighlighting" | "$shouldShowTransparentBackground" | "$isOpen" | "$isTouch" | "$shouldShowBigImage" | "$direction" | "$shouldChangeColor"> & {
+export declare const StyledComboBoxHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "theme" | "$isDisabled" | "$size" | "$shouldShowTransparentBackground" | "$isOpen" | "$isTouch" | "$shouldShowBigImage" | "$direction" | "$shouldChangeColor"> & {
     $isTouch: boolean;
     $isOpen: boolean;
     $direction: DropdownDirection;
@@ -21,10 +21,9 @@ export declare const StyledComboBoxHeader: import("styled-components/dist/types"
     $shouldShowBigImage: ComboBoxProps["shouldShowBigImage"];
     $shouldShowTransparentBackground: boolean;
     $size: ComboBoxSize;
-    $shouldShowKeyboardHighlighting: boolean;
 } & {
     theme: Theme;
-}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "theme" | "$isDisabled" | "$size" | "$shouldShowKeyboardHighlighting" | "$shouldShowTransparentBackground" | "$isOpen" | "$isTouch" | "$shouldShowBigImage" | "$direction" | "$shouldChangeColor"> & {
+}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "theme" | "$isDisabled" | "$size" | "$shouldShowTransparentBackground" | "$isOpen" | "$isTouch" | "$shouldShowBigImage" | "$direction" | "$shouldChangeColor"> & {
     $isTouch: boolean;
     $isOpen: boolean;
     $direction: DropdownDirection;
@@ -33,7 +32,6 @@ export declare const StyledComboBoxHeader: import("styled-components/dist/types"
     $shouldShowBigImage: ComboBoxProps["shouldShowBigImage"];
     $shouldShowTransparentBackground: boolean;
     $size: ComboBoxSize;
-    $shouldShowKeyboardHighlighting: boolean;
 } & {
     theme: Theme;
 }, never>>> & string;

package/lib/types/components/combobox/ComboBox.types.d.ts

@@ -233,11 +233,6 @@ export type ComboBoxProps = {
      * @default ComboBoxSize.NORMAL
      */
     size?: ComboBoxSize;
-    /**
-     * Enables the shared keyboard-only focus ring for the combobox header.
-     * @default false
-     */
-    shouldEnableKeyboardHighlighting?: boolean;
     /**
      * Optional min width for the prefix element.
      * @default undefined