@chayns-components/core 5.0.0-beta.12 → 5.0.0-beta.1200

package/lib/types/components/file-input/FileInput.d.ts

@@ -0,0 +1,57 @@
+import React from 'react';
+import { IFileItem } from '../file-list/FileList';
+export type FileInputProps = {
+    /**
+     * Already uploaded files to display.
+     */
+    files?: IFileItem[];
+    /**
+     * An array of icons that should be displayed inside the FileInput
+     */
+    fileSelectionIcons?: string[];
+    /**
+     * The text that should be displayed inside the FileInput.
+     */
+    fileSelectionPlaceholder?: string;
+    /**
+     * The filetypes that could be selected. Example for multiple types: 'image/*, video/*'.
+     */
+    fileTypes?: string;
+    /**
+     * The icon of the image selection.
+     */
+    imageSelectIcons?: string[];
+    /**
+     * If set, pictures can be select via Pixabay.
+     */
+    imageSelectPlaceholder?: string;
+    /**
+     * Whether the FileInput is disabled.
+     */
+    isDisabled?: boolean;
+    /**
+     * The maximum amount of Files that can be uploaded.
+     */
+    maxFiles?: number;
+    /**
+     * The maximum size of a file in MB.
+     */
+    maxFileSizeInMB?: number;
+    /**
+     * A function to be executed when files are added.
+     */
+    onAdd?: (files: File[] | string[]) => void;
+    /**
+     * Function to be executed when the maximum amount of Files are reached.
+     */
+    onMaxFilesReached?: () => void;
+    /**
+     * A function to be executed when a file is removed.
+     */
+    onRemove?: (file: File | IFileItem | string) => void;
+};
+export type FileInputRef = {
+    clear: () => void;
+};
+declare const FileInput: React.ForwardRefExoticComponent<FileInputProps & React.RefAttributes<FileInputRef>>;
+export default FileInput;

package/lib/types/components/file-input/FileInput.styles.d.ts

@@ -0,0 +1,21 @@
+import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';
+export declare const StyledFileInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+type StyledFileInputWrapperProps = WithTheme<{
+    $isDisabled?: boolean;
+}>;
+export declare const StyledFileInputWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledFileInputWrapperProps>> & string;
+type StyledFileInputContainerProps = WithTheme<{
+    $isImageSelection?: boolean;
+}>;
+type StyledUploadedFilesListProps = WithTheme<{
+    $shouldShowBorder: boolean;
+}>;
+export declare const StyledUploadedFilesList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledUploadedFilesListProps>> & string;
+export declare const StyledFileInputContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledFileInputContainerProps>> & string;
+export declare const StyledFileInputText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {
+    theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
+}>> & string;
+export declare const StyledMotionFileInputList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("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 import("react").Component<any, {}, any>>;
+export {};

package/lib/types/components/file-list/FileList.d.ts

@@ -0,0 +1,19 @@
+import { FC } from 'react';
+export interface IFileItem {
+    id: string;
+    name: string;
+    size: number;
+    mimeType: string;
+}
+export type FileListProps = {
+    /**
+     * Already uploaded files to display.
+     */
+    files?: IFileItem[];
+    /**
+     * A function to be executed when a file is removed.
+     */
+    onRemove?: (id: IFileItem['id']) => void;
+};
+declare const FileList: FC<FileListProps>;
+export default FileList;

package/lib/types/components/file-list/FileList.styles.d.ts

@@ -0,0 +1 @@
+export declare const StyledFileList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/lib/types/components/file-list/file-item/FileItem.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+export type FileItemProps = {
+    id: string;
+    name: string;
+    size: number;
+    mimeType: string;
+    onRemove?: (name: string) => void;
+};
+declare const FileItem: FC<FileItemProps>;
+export default FileItem;

package/lib/types/components/file-list/file-item/FileItem.styles.d.ts

@@ -0,0 +1 @@
+export declare const StyledFileItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/lib/types/components/file-select/FileSelect.d.ts

@@ -0,0 +1,41 @@
+import { FC } from 'react';
+export type FileSelectProps = {
+    /**
+     * An array of icons that should be displayed inside the FileInput
+     */
+    fileSelectionIcons?: string[];
+    /**
+     * The text that should be displayed inside the FileInput.
+     */
+    fileSelectionPlaceholder?: string;
+    /**
+     * The filetypes that could be selected. Example for multiple types: 'image/*, video/*'.
+     */
+    fileTypes?: string;
+    /**
+     * The icon of the image selection.
+     */
+    imageSelectIcons?: string[];
+    /**
+     * If set, pictures can be select via Pixabay.
+     */
+    imageSelectPlaceholder?: string;
+    /**
+     * Whether the FileInput is disabled.
+     */
+    isDisabled?: boolean;
+    /**
+     * The maximum amount of Files that can be uploaded.
+     */
+    maxFiles?: number;
+    /**
+     * The maximum size of a file in MB.
+     */
+    maxFileSizeInMB?: number;
+    /**
+     * A function to be executed when files are added.
+     */
+    onAdd?: (files: File[] | string[]) => void;
+};
+declare const FileSelect: FC<FileSelectProps>;
+export default FileSelect;

package/lib/types/components/file-select/FileSelect.styles.d.ts

@@ -0,0 +1,21 @@
+import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';
+export declare const StyledFileSelect: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+type StyledFileSelectWrapperProps = WithTheme<{
+    $isDisabled?: boolean;
+}>;
+export declare const StyledFileSelectWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledFileSelectWrapperProps>> & string;
+type StyledFileSelectContainerProps = WithTheme<{
+    $isImageSelection?: boolean;
+}>;
+type StyledUploadedFilesListProps = WithTheme<{
+    $shouldShowBorder: boolean;
+}>;
+export declare const StyledUploadedFilesList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledUploadedFilesListProps>> & string;
+export declare const StyledFileSelectContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledFileSelectContainerProps>> & string;
+export declare const StyledFileSelectText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {
+    theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
+}>> & string;
+export declare const StyledMotionFileSelectList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("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 import("react").Component<any, {}, any>>;
+export {};

package/lib/types/components/filter-buttons/FilterButtons.d.ts

@@ -0,0 +1,30 @@
+import { FC } from 'react';
+import { FilterButtonSize, IFilterButtonItem } from '../../types/filterButtons';
+export type FilterButtonsProps = {
+    /**
+     * The number that should be displayed as count in the "all" button.
+     */
+    allCount?: number;
+    /**
+     * The items that should be displayed.
+     */
+    items: IFilterButtonItem[];
+    /**
+     * A function that should be executed when an item is selected.
+     */
+    onSelect?: (keys: string[]) => void;
+    /**
+     * The keys of items that should be selected.
+     */
+    selectedItemIds?: string[];
+    /**
+     * If true, the count of all items will be shown in the "all" button.
+     */
+    shouldCalcCountForAll?: boolean;
+    /**
+     * The size auf the filter buttons. Use the FilterButtonSize enum.
+     */
+    size?: FilterButtonSize;
+};
+declare const FilterButtons: FC<FilterButtonsProps>;
+export default FilterButtons;

package/lib/types/components/filter-buttons/FilterButtons.styles.d.ts

@@ -0,0 +1 @@
+export declare const StyledFilterButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/lib/types/components/filter-buttons/filter-button/FilterButton.d.ts

@@ -0,0 +1,16 @@
+import { CSSProperties, FC } from 'react';
+import type { FilterButtonItemShape, FilterButtonSize } from '../../../types/filterButtons';
+export type FilterButtonProps = {
+    color?: CSSProperties['color'];
+    icons?: string[];
+    isSelected: boolean;
+    shape: FilterButtonItemShape;
+    size: FilterButtonSize;
+    count?: number;
+    text: string;
+    id: string;
+    isDisabled?: boolean;
+    onSelect: (key: string) => void;
+};
+declare const FilterButton: FC<FilterButtonProps>;
+export default FilterButton;

package/lib/types/components/filter-buttons/filter-button/FilterButton.styles.d.ts

@@ -0,0 +1,31 @@
+import type { CSSProperties } from 'react';
+import { FilterButtonItemShape, FilterButtonSize } from '../../../types/filterButtons';
+import type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';
+type StyledFilterButtonItemProps = WithTheme<{
+    $size: FilterButtonSize;
+    $isSelected: boolean;
+    $isDisabled?: boolean;
+}>;
+export declare const StyledFilterButtonItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledFilterButtonItemProps>> & string;
+export declare const StyledFilterButtonItemLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledFilterButtonItemLabelText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {
+    theme: import("../../color-scheme-provider/ColorSchemeProvider").Theme;
+}>> & string;
+export declare const StyledFilterButtonItemLabelCount: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {
+    theme: import("../../color-scheme-provider/ColorSchemeProvider").Theme;
+}>> & string;
+type StyledFilterButtonItemBorderProps = WithTheme<{
+    $shape: FilterButtonItemShape;
+    $color: CSSProperties['color'];
+    $isSelected: boolean;
+}>;
+export declare const StyledFilterButtonItemBorder: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledFilterButtonItemBorderProps>> & string;
+type StyledFilterButtonItemBackgroundProps = WithTheme<{
+    $shape: FilterButtonItemShape;
+    $color: CSSProperties['color'];
+    $isSelected: boolean;
+}>;
+export declare const StyledMotionFilterButtonItemBackground: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
+}, StyledFilterButtonItemBackgroundProps>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
+export {};

package/lib/types/components/grid-image/GridImage.d.ts

@@ -0,0 +1,25 @@
+import { CSSProperties, FC, MouseEventHandler } from 'react';
+type GridImageProps = {
+    /**
+     * The background color of the image.
+     */
+    background?: CSSProperties['background'];
+    /**
+     * The images to be displayed in the `GridImage`. Only the first three images are displayed.
+     */
+    images: string[];
+    /**
+     * Function to be executed when the images are clicked.
+     */
+    onClick?: MouseEventHandler<HTMLDivElement>;
+    /**
+     * Images of users should always be displayed in a round shape. Therefore, this property can be set to true.
+     */
+    shouldShowRoundImage?: boolean;
+    /**
+     * The size of the `GridImage` in pixels, which is set as both width and height.
+     */
+    size: number;
+};
+declare const GridImage: FC<GridImageProps>;
+export default GridImage;

package/lib/types/components/grid-image/GridImage.styles.d.ts

@@ -0,0 +1,23 @@
+import { CSSProperties } from 'react';
+import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';
+type StyledGridImageProps = WithTheme<{
+    $background?: CSSProperties['background'];
+    $shouldShowRoundImage?: boolean;
+    $size: number;
+}>;
+export declare const StyledGridImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledGridImageProps>> & string;
+type StyledGridLeftImageProps = {
+    $isHidden: boolean;
+    $size: number;
+};
+export declare const StyledGridLeftImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, StyledGridLeftImageProps>> & string;
+type StyledGridTopRightImageProps = {
+    $isHidden: boolean;
+    $size: number;
+};
+export declare const StyledGridTopRightImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, StyledGridTopRightImageProps>> & string;
+type StyledGridBottomRightImageProps = {
+    $isHidden: boolean;
+};
+export declare const StyledGridBottomRightImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, StyledGridBottomRightImageProps>> & string;
+export {};

package/lib/types/components/grouped-image/GroupedImage.d.ts

@@ -0,0 +1,33 @@
+import { CSSProperties, FC, MouseEventHandler } from 'react';
+type GroupedImageProps = {
+    /**
+     * Optional image to display in the bottom right corner of the grouped image.
+     */
+    cornerImage?: string;
+    /**
+     * Height of the grouped image container.
+     */
+    height?: CSSProperties['height'];
+    /**
+     * Background for the single images.
+     */
+    imageBackground?: CSSProperties['background'];
+    /**
+     * Array of image URLs to display in the grouped image. If only one image is provided, it will be displayed as a full image.
+     */
+    images: string[];
+    /**
+     * Optional click handler for the grouped image.
+     */
+    onClick?: MouseEventHandler<HTMLDivElement>;
+    /**
+     * Whether to prevent the background of the images from being set.
+     */
+    shouldPreventBackground?: boolean;
+    /**
+     * Whether to show the images in a round shape.
+     */
+    shouldShowRoundImage?: boolean;
+};
+declare const GroupedImage: FC<GroupedImageProps>;
+export default GroupedImage;

package/lib/types/components/grouped-image/GroupedImage.styles.d.ts

@@ -0,0 +1,26 @@
+import { CSSProperties } from 'react';
+import { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';
+type StyledGroupedImageProps = WithTheme<{
+    $height: CSSProperties['height'];
+}>;
+export declare const StyledGroupedImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledGroupedImageProps>> & string;
+export declare enum ImageSize {
+    Full = "100%",
+    Small = "75%",
+    Grouped = "80%",
+    GroupedSmall = "65%"
+}
+type StyledImageProps = WithTheme<{
+    $background?: CSSProperties['background'];
+    $imageSize: ImageSize;
+    $isSecondImage?: boolean;
+    $shouldPreventBackground?: boolean;
+    $shouldShowRoundImage?: boolean;
+}>;
+export declare const StyledGroupImageElement: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, StyledImageProps>> & string;
+type StyledCornerImageProps = WithTheme<{
+    $background?: CSSProperties['background'];
+    $shouldPreventBackground?: boolean;
+}>;
+export declare const StyledCornerImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, StyledCornerImageProps>> & string;
+export {};

package/lib/types/components/highlight-slider/HighlightSlider.d.ts

@@ -0,0 +1,26 @@
+import { FC } from 'react';
+import { HighlightSliderItemColors } from './highlight-slider-item/HighlightSliderItem';
+export type HighlightSliderProps = {
+    /**
+     * The Colors of the slider.
+     */
+    colors?: HighlightSliderItemColors;
+    /**
+     * The total number of sections, that should be displayed.
+     */
+    count: number;
+    /**
+     * The current index.
+     */
+    currentIndex: number;
+    /**
+     * The duration of the animation of a single item in seconds.
+     */
+    duration?: number;
+    /**
+     * Function to be executed if the index has changed.
+     */
+    onIndexChange?: (index: number) => void;
+};
+declare const HighlightSlider: FC<HighlightSliderProps>;
+export default HighlightSlider;

package/lib/types/components/highlight-slider/HighlightSlider.styles.d.ts

@@ -0,0 +1 @@
+export declare const StyledHighlightSlider: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/lib/types/components/highlight-slider/highlight-slider-item/HighlightSliderItem.d.ts

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+export interface HighlightSliderItemColors {
+    backgroundColor: string;
+    fillColor: string;
+}
+export type HighlightSliderItemProps = {
+    index: number;
+    isActive: boolean;
+    isFinished: boolean;
+    onClick: (index: number) => void;
+    onFinish: (index: number) => void;
+    duration: number;
+    colors: HighlightSliderItemColors;
+};
+declare const HighlightSliderItem: FC<HighlightSliderItemProps>;
+export default HighlightSliderItem;

package/lib/types/components/highlight-slider/highlight-slider-item/HighlightSliderItem.styles.d.ts

@@ -0,0 +1,15 @@
+import { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';
+export declare const StyledHighlightSliderItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+type StyledHighlightSliderItemProgressProps = WithTheme<{
+    $backgroundColor: string;
+}>;
+export declare const StyledHighlightSliderItemProgress: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
+}, StyledHighlightSliderItemProgressProps>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
+type StyledHighlightSliderItemBackgroundProps = WithTheme<{
+    $backgroundColor: string;
+}>;
+export declare const StyledHighlightSliderItemBackground: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
+}, StyledHighlightSliderItemBackgroundProps>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
+export {};

package/lib/{components → types/components}/icon/Icon.d.ts

@@ -1,5 +1,5 @@
 import { FC, MouseEventHandler } from 'react';
-export declare type IconProps = {
+export type IconProps = {
     /**
      * Additional class names for the root element
      */
@@ -11,7 +11,7 @@ export declare type IconProps = {
     /**
      * The FontAwesome or tobit icons to render. Multiple icons are stacked.
      */
-    icons: [string, ...string[]];
+    icons: string[];
     /**
      * Disables the icon so that it cannot be clicked anymore
      */
@@ -21,9 +21,13 @@ export declare type IconProps = {
      */
     onClick?: MouseEventHandler<HTMLSpanElement>;
     /**
-     * Function to be executed when the icon was double clicked
+     * Function to be executed when the icon was double-clicked
      */
     onDoubleClick?: MouseEventHandler<HTMLSpanElement>;
+    /**
+     * Function to be executed when a mouse button is pressed on the icon
+     */
+    onMouseDown?: MouseEventHandler<HTMLSpanElement>;
     /**
      * Size of the icon in pixel
      */

package/lib/types/components/icon/Icon.styles.d.ts

@@ -0,0 +1,15 @@
+import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';
+type StyledIconWrapperProps = {
+    $isDisabled?: boolean;
+    $isOnClick: boolean;
+    $size: number;
+};
+export declare const StyledIconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, StyledIconWrapperProps>> & string;
+type StyledIconProps = WithTheme<{
+    $fontSize: number;
+    $isStacked?: boolean;
+    $color?: string;
+    $size: number;
+}>;
+export declare const StyledIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, StyledIconProps>> & string;
+export {};

package/lib/types/components/input/Input.d.ts

@@ -0,0 +1,98 @@
+import React, { ChangeEventHandler, FocusEventHandler, HTMLInputTypeAttribute, KeyboardEventHandler, type ReactElement, ReactNode } from 'react';
+export type InputRef = {
+    focus: VoidFunction;
+    blur: VoidFunction;
+};
+type InputMode = 'email' | 'search' | 'tel' | 'text' | 'url' | 'none' | 'numeric' | 'decimal' | undefined;
+export declare enum InputSize {
+    Small = "small",
+    Medium = "medium"
+}
+export type InputProps = {
+    /**
+     * An element to be displayed on the left side of the input field
+     */
+    leftElement?: ReactNode;
+    /**
+     * The id of the input
+     */
+    id?: string;
+    /**
+     * Defines the input mode of the input
+     */
+    inputMode?: InputMode;
+    /**
+     * Disables the input so that it cannot be changed anymore
+     */
+    isDisabled?: boolean;
+    /**
+     * If true, the input field is marked as invalid
+     */
+    isInvalid?: boolean;
+    /**
+     * Function that is executed when the input field loses focus
+     */
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    /**
+     * Function that is executed when the text of the input changes
+     */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    /**
+     * Function that is executed when the input field is focused
+     */
+    onFocus?: FocusEventHandler<HTMLInputElement>;
+    /**
+     * Function that is executed when content is pasted into the input field
+     */
+    onPaste?: (event: React.ClipboardEvent<HTMLInputElement>) => void;
+    /**
+     * Function that is executed when a letter is pressed
+     */
+    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
+    /**
+     * Placeholder for the input field
+     */
+    placeholder?: ReactNode;
+    /**
+     * An element that should be displayed on the right side of the Input.
+     */
+    rightElement?: ReactElement;
+    /**
+     * Whether the placeholder animation should be prevented.
+     */
+    shouldPreventPlaceholderAnimation?: boolean;
+    /**
+     * Whether the placeholder should remain at its position if a value is typed.
+     */
+    shouldRemainPlaceholder?: boolean;
+    /**
+     * Whether the content should be displayed centered inside the input.
+     */
+    shouldShowCenteredContent?: boolean;
+    /**
+     * If true, a clear icon is displayed at the end of the input field
+     */
+    shouldShowClearIcon?: boolean;
+    /**
+     * Whether only the bottom border should be displayed
+     */
+    shouldShowOnlyBottomBorder?: boolean;
+    /**
+     * If true, the input field is focused when the component is mounted
+     */
+    shouldUseAutoFocus?: boolean;
+    /**
+     * The size of the input field
+     */
+    size?: InputSize;
+    /**
+     * Input type set for an input element (e.g. 'text', 'number' or 'password')
+     */
+    type?: HTMLInputTypeAttribute;
+    /**
+     * Value if the input field should be controlled
+     */
+    value?: string;
+};
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>>;
+export default Input;