@chayns-components/core 5.0.0-beta.104 → 5.0.0-beta.1040

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

@@ -0,0 +1,95 @@
+import { ChangeEventHandler, type CSSProperties, FC, FocusEventHandler, ReactHTML, type ReactNode } from 'react';
+import { ComboBoxDirection } from '../../types/comboBox';
+export interface IComboBoxItems {
+    groupName?: string;
+    list: Array<IComboBoxItem>;
+    shouldShowRoundImage?: boolean;
+}
+export interface ComboBoxTextStyles {
+    tagName?: keyof ReactHTML;
+    styles?: CSSProperties;
+}
+export interface IComboBoxItem {
+    icons?: string[];
+    imageBackground?: CSSProperties['background'];
+    imageUrl?: string;
+    isDisabled?: boolean;
+    rightElement?: ReactNode;
+    subtext?: string;
+    suffixElement?: ReactNode;
+    text: string;
+    value: string | number;
+    textStyles?: ComboBoxTextStyles;
+}
+export type ComboBoxProps = {
+    bodyWidth?: number;
+    /**
+     * The element where the content of the `ComboBox` should be rendered via React Portal.
+     */
+    container?: Element;
+    /**
+     * The direction in which the combobox should open.
+     */
+    direction?: ComboBoxDirection;
+    /**
+     * The value of the optional input.
+     */
+    inputValue?: string;
+    /**
+     * Whether the combobox should be disabled.
+     */
+    isDisabled?: boolean;
+    /**
+     * The list of the items that should be displayed.
+     */
+    lists: IComboBoxItems[];
+    /**
+     * The maximum height of the combobox content.
+     */
+    maxHeight?: CSSProperties['maxHeight'];
+    /**
+     * Function to be executed when the value of the optional input is changed.
+     */
+    onInputChange?: ChangeEventHandler<HTMLInputElement>;
+    /**
+     * Function to be executed when the optional input lost its focus.
+     */
+    onInputBlur?: FocusEventHandler<HTMLInputElement> /**
+     * Function to be executed when the optional input gets its focus.
+     */;
+    onInputFocus?: FocusEventHandler<HTMLInputElement>;
+    /**
+     * Function that should be executed when an item is selected. If the function returns false, the item will not be selected.
+     */
+    onSelect?: (comboboxItem: IComboBoxItem) => Promise<boolean> | boolean | void;
+    /**
+     * A text that should be displayed when no item is selected.
+     */
+    placeholder: string;
+    /**
+     * A prefix that should be displayed before the placeholder.
+     */
+    prefix?: string;
+    /**
+     * An item that should be preselected.
+     */
+    selectedItem?: IComboBoxItem;
+    /**
+     * If true, the images of the items are displayed in a bigger shape. This prop will automatically be set to true if the subtext of an item is given.
+     */
+    shouldShowBigImage?: boolean;
+    /**
+     * If true, the images of the items are displayed in a round shape.
+     */
+    shouldShowRoundImage?: boolean;
+    /**
+     * Whether the width of the ComboBox should be the width of the current item.
+     */
+    shouldUseCurrentItemWidth?: boolean;
+    /**
+     * Whether the width of the 'ComboBox' should be the width of the parent or of the widest item.
+     */
+    shouldUseFullWidth?: boolean;
+};
+declare const ComboBox: FC<ComboBoxProps>;
+export default ComboBox;

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

@@ -0,0 +1,49 @@
+import type { CSSProperties } from 'react';
+import { BrowserName } from '../../types/chayns';
+import { ComboBoxDirection } from '../../types/comboBox';
+import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';
+import type { ComboBoxProps } from './ComboBox';
+type StyledComboBoxProps = WithTheme<{
+    $minWidth?: number;
+    $shouldUseFullWidth: ComboBoxProps['shouldUseFullWidth'];
+    $shouldUseCurrentItemWidth: ComboBoxProps['shouldUseCurrentItemWidth'];
+}>;
+export declare const StyledComboBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledComboBoxProps>> & string;
+type StyledComboBoxHeaderProps = WithTheme<{
+    $isTouch: boolean;
+    $isOpen: boolean;
+    $direction: ComboBoxDirection;
+    $isDisabled?: boolean;
+    $shouldChangeColor: boolean;
+    $shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];
+}>;
+export declare const StyledComboBoxHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledComboBoxHeaderProps>> & string;
+type StyledComboBoxPlaceholderProps = WithTheme<{
+    $shouldReduceOpacity: boolean;
+}>;
+export declare const StyledComboBoxPlaceholder: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledComboBoxPlaceholderProps>> & string;
+export declare const StyledComboBoxPlaceholderText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledComboBoxPrefixAndPlaceholderWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledComboBoxPrefix: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledComboBoxInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
+type StyledComboBoxPlaceholderImageProps = WithTheme<{
+    $shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];
+    $shouldShowRoundImage: ComboBoxProps['shouldShowRoundImage'];
+}>;
+export declare const StyledComboBoxPlaceholderImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, StyledComboBoxPlaceholderImageProps>> & string;
+export declare const StyledComboBoxIconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+type StyledComboBoxBodyProps = WithTheme<{
+    $overflowY: CSSProperties['overflowY'];
+    $maxHeight: CSSProperties['maxHeight'];
+    $translateX: string;
+    $translateY: string;
+    $direction: ComboBoxDirection;
+    $browser: BrowserName;
+    $minWidth: number;
+    $shouldUseCurrentItemWidth: boolean;
+}>;
+export declare const StyledMotionComboBoxBody: 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?: ((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]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, StyledComboBoxBodyProps>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledComboBoxTopic: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export {};

package/lib/types/components/combobox/combobox-item/ComboBoxItem.d.ts

@@ -0,0 +1,21 @@
+import { FC, ReactNode } from 'react';
+import type { ComboBoxProps, IComboBoxItem } from '../ComboBox';
+export type ComboBoxItemProps = {
+    icons?: IComboBoxItem['icons'];
+    id: IComboBoxItem['value'];
+    imageBackground?: IComboBoxItem['imageBackground'];
+    imageUrl: IComboBoxItem['imageUrl'];
+    isDisabled?: IComboBoxItem['isDisabled'];
+    isSelected: boolean;
+    onSelect: (itemToSelect: IComboBoxItem) => void;
+    rightElement: IComboBoxItem['rightElement'];
+    shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];
+    shouldShowRoundImage: ComboBoxProps['shouldShowRoundImage'];
+    subtext: IComboBoxItem['subtext'];
+    suffixElement?: ReactNode;
+    text: IComboBoxItem['text'];
+    value: IComboBoxItem['value'];
+    textStyles?: IComboBoxItem['textStyles'];
+};
+declare const ComboBoxItem: FC<ComboBoxItemProps>;
+export default ComboBoxItem;

package/lib/types/components/combobox/combobox-item/ComboBoxItem.styles.d.ts

@@ -0,0 +1,25 @@
+import { CSSProperties } from 'react';
+import type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';
+type StyledComboBoxItemProps = WithTheme<{
+    $isDisabled?: boolean;
+    $isSelected: boolean;
+    $isTouch: boolean;
+}>;
+export declare const StyledComboBoxItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledComboBoxItemProps>> & string;
+type StyledComboBoxItemImageProps = WithTheme<{
+    $background?: CSSProperties['background'];
+    $shouldShowBigImage?: boolean;
+    $shouldShowRoundImage?: boolean;
+}>;
+export declare const StyledComboBoxItemImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, StyledComboBoxItemImageProps>> & string;
+export declare const StyledComboBoxItemContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+type StyledComboBoxItemContentHeaderProps = {
+    $text?: string;
+    $subtext?: string;
+};
+export declare const StyledComboBoxItemContentHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledComboBoxItemContentHeaderProps>> & string;
+export declare const StyledComboBoxItemContentHeaderWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledComboBoxItemContentHeaderWrapperText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledComboBoxItemContentHeaderRightElement: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledComboBoxItemContentSubtext: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export {};

package/lib/types/components/content-card/ContentCard.d.ts

@@ -0,0 +1,18 @@
+import { FC, ReactNode } from 'react';
+import { ContentCardType } from '../../types/contentCard';
+export type ContentCardProps = {
+    /**
+     * The content of the content card
+     */
+    children?: ReactNode;
+    /**
+     * The onClick event handler
+     */
+    onClick?: () => void;
+    /**
+     * The type of the content card
+     */
+    type?: ContentCardType;
+};
+declare const ContentCard: FC<ContentCardProps>;
+export default ContentCard;

package/lib/types/components/content-card/ContentCard.styles.d.ts

@@ -0,0 +1,8 @@
+import { ContentCardType } from '../../types/contentCard';
+import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';
+type StyledContentCardProps = WithTheme<{
+    $type: ContentCardType;
+    $shouldChangeColor: boolean;
+}>;
+export declare const StyledContentCard: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledContentCardProps>> & string;
+export {};

package/lib/{components → types/components}/context-menu/ContextMenu.d.ts

@@ -1,5 +1,5 @@
 import React, { MouseEvent, ReactNode } from 'react';
-import { ContextMenuAlignment } from './constants/alignment';
+import { ContextMenuAlignment } from '../../types/contextMenu';
 export type ContextMenuCoordinates = {
     x: number;
     y: number;
@@ -7,10 +7,10 @@ export type ContextMenuCoordinates = {
 export type ContextMenuItem = {
     icons: string[];
     key: string;
-    onClick: (event?: MouseEvent<HTMLDivElement>) => void;
+    onClick: (event?: MouseEvent<HTMLDivElement>) => Promise<void> | void;
     text: string;
 };
-type ContextMenuRef = {
+export type ContextMenuRef = {
     hide: VoidFunction;
     show: VoidFunction;
 };
@@ -22,7 +22,7 @@ type ContextMenuProps = {
      */
     alignment?: ContextMenuAlignment;
     /**
-     * The element over which the content of the `ContextMenu` should be displayed.
+     * The element over which the content of the `ContextMenu` should be displayed. The default is an ellipsis icon.
      */
     children?: ReactNode;
     /**
@@ -46,6 +46,14 @@ type ContextMenuProps = {
      * Function to be executed when the content of the Context menu has been shown.
      */
     onShow?: VoidFunction;
+    /**
+     * Whether the popup should be closed if its clicked.
+     */
+    shouldCloseOnPopupClick?: boolean;
+    /**
+     * The z-index of the popup.
+     */
+    zIndex?: number;
 };
 declare const ContextMenu: React.ForwardRefExoticComponent<ContextMenuProps & React.RefAttributes<ContextMenuRef>>;
 export default ContextMenu;

package/lib/types/components/context-menu/ContextMenu.styles.d.ts

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

package/lib/{components → types/components}/context-menu/context-menu-content/ContextMenuContent.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
-import { ContextMenuAlignment } from '../constants/alignment';
+import { ContextMenuAlignment } from '../../../types/contextMenu';
 import type { ContextMenuCoordinates, ContextMenuItem } from '../ContextMenu';
 type ContextMenuContentProps = {
     alignment: ContextMenuAlignment;
     coordinates: ContextMenuCoordinates;
     items: ContextMenuItem[];
+    zIndex: number;
 };
 declare const ContextMenuContent: React.ForwardRefExoticComponent<ContextMenuContentProps & React.RefAttributes<HTMLDivElement>>;
 export default ContextMenuContent;

package/lib/types/components/context-menu/context-menu-content/ContextMenuContent.styles.d.ts

@@ -0,0 +1,15 @@
+import { ContextMenuAlignment } from '../../../types/contextMenu';
+import type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';
+type StyledMotionContextMenuContentProps = WithTheme<{
+    $position: ContextMenuAlignment;
+    $zIndex: number;
+}>;
+export declare const StyledMotionContextMenuContent: 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?: ((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]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, StyledMotionContextMenuContentProps>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledContextMenuContentItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    theme: import("../../color-scheme-provider/ColorSchemeProvider").Theme;
+}>> & string;
+export declare const StyledContextMenuContentItemIconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledContextMenuContentItemText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export {};

package/lib/types/components/expandable-content/ExpandableContent.d.ts

@@ -0,0 +1,13 @@
+import { FC, ReactNode } from 'react';
+export type ExpandableContentProps = {
+    /**
+     * The children that should be animated.
+     */
+    children: ReactNode;
+    /**
+     * Whether the content is expanded.
+     */
+    isOpen: boolean;
+};
+declare const ExpandableContent: FC<ExpandableContentProps>;
+export default ExpandableContent;

package/lib/types/components/expandable-content/ExpandableContent.styles.d.ts

@@ -0,0 +1,7 @@
+type StyledMotionExpandableContentProps = {
+    $isOpen: boolean;
+};
+export declare const StyledMotionExpandableContent: 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?: ((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]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, StyledMotionExpandableContentProps>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
+export {};

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

@@ -0,0 +1,57 @@
+import React from 'react';
+import type { FileInputFileItem } from '../../types/fileInput';
+export type FileInputProps = {
+    /**
+     * Already uploaded files to display.
+     */
+    files?: FileInputFileItem[];
+    /**
+     * 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 | FileInputFileItem | 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,23 @@
+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/dist/types").Substitute<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: ((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]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, {
+    theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
+}>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
+export {};

package/lib/types/components/file-input/file-list/FileListItem.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+export type FileListItemProps = {
+    fileName?: string;
+    fileSize?: number;
+    fileType?: string;
+    url?: string;
+    onRemove: (name: string) => void;
+};
+declare const FileListItem: FC<FileListItemProps>;
+export default FileListItem;

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

@@ -0,0 +1 @@
+export declare const StyledFileListItem: 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/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,15 @@
+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;
+    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,30 @@
+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;
+}>;
+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?: ((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]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, StyledFilterButtonItemBackgroundProps>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
+export {};

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

@@ -1,13 +1,19 @@
-import { FC } from 'react';
+import { CSSProperties, FC, MouseEventHandler } from 'react';
 type GridImageProps = {
     /**
-     * The images to be displayed in the `GridImage`. Only the first three
-     * images are displayed.
+     * 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[];
     /**
-     * Images of users should always be displayed in a round shape. Therefore
-     * this property can be set to true.
+     * 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;
     /**

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/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 {};