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

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

@@ -0,0 +1,10 @@
+import { BrowserName } from '../../../types/chayns';
+import type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';
+type StyledMotionAccordionBodyProps = WithTheme<{
+    $maxHeight?: number;
+    $browser: BrowserName;
+}>;
+export declare const StyledMotionAccordionBody: 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;
+}, StyledMotionAccordionBodyProps>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
+export {};

package/lib/{components → types/components}/accordion/accordion-content/AccordionContent.d.ts

@@ -12,6 +12,10 @@ export type AccordionContentProps = {
      * Function that is executed when the element will be scrolled
      */
     onScroll?: (event: UIEvent<HTMLDivElement>) => void;
+    /**
+     * Whether the bottom space should be removed.
+     */
+    shouldPreventBottomSpace?: boolean;
 };
 declare const AccordionContent: FC<AccordionContentProps>;
 export default AccordionContent;

package/lib/types/components/accordion/accordion-content/AccordionContent.styles.d.ts

@@ -0,0 +1,10 @@
+import { BrowserName } from '../../../types/chayns';
+import type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';
+type StyledAccordionContentProps = WithTheme<{
+    $isWrapped?: boolean;
+    $maxHeight?: number;
+    $browser: BrowserName;
+    $shouldPreventBottomSpace: boolean;
+}>;
+export declare const StyledAccordionContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledAccordionContentProps>> & string;
+export {};

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

@@ -1,10 +1,16 @@
-import React, { FC, ReactNode } from 'react';
+import React, { Dispatch, FC, ReactNode, SetStateAction } from 'react';
 type IUpdateOpenAccordionUuid = (uuid: string, options?: {
     shouldOnlyOpen?: boolean;
 }) => void;
+type IUpdateAccordionUuids = (uuids: string[]) => void;
 interface IAccordionGroupContext {
-    openAccordionUuid: string | undefined;
+    isWrapped?: boolean;
+    openAccordionUuid?: string;
+    setOpenAccordionUuid?: Dispatch<SetStateAction<string | undefined>>;
     updateOpenAccordionUuid?: IUpdateOpenAccordionUuid;
+    accordionUuids?: string[];
+    updateAccordionUuids?: IUpdateAccordionUuids;
+    accordionGroupUuid?: string;
 }
 export declare const AccordionGroupContext: React.Context<IAccordionGroupContext>;
 type AccordionGroupProps = {
@@ -13,6 +19,11 @@ type AccordionGroupProps = {
      * automatically closed when an `Accordion` of the group is opened.
      */
     children: ReactNode;
+    /**
+     * This value must be set for nested AccordionGroup components. This adjusts the style of
+     * the head and the padding of the content accordions.
+     */
+    isWrapped?: boolean;
     /**
      * Function that is executed when all accordions in group are closed.
      */

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

@@ -1,5 +1,6 @@
-import { ChangeEventHandler, FC, MouseEventHandler, ReactNode } from 'react';
-type AccordionHeadProps = {
+import { ChangeEventHandler, FC, MouseEventHandler, ReactNode, type CSSProperties } from 'react';
+import { type InputProps } from '../../input/Input';
+export type AccordionHeadProps = {
     icon?: string;
     isOpen: boolean;
     isFixed: boolean;
@@ -8,10 +9,15 @@ type AccordionHeadProps = {
     onClick: MouseEventHandler<HTMLDivElement>;
     onSearchChange?: ChangeEventHandler<HTMLInputElement>;
     rightElement?: ReactNode;
-    searchIcon?: string[];
     searchPlaceholder?: string;
+    searchValue?: string;
+    shouldRotateIcon?: boolean;
     title: string;
     titleElement?: ReactNode;
+    uuid: string;
+    onTitleInputChange?: ChangeEventHandler<HTMLInputElement>;
+    titleInputProps?: InputProps;
+    titleColor?: CSSProperties['color'];
 };
 declare const AccordionHead: FC<AccordionHeadProps>;
 export default AccordionHead;

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

@@ -0,0 +1,67 @@
+import type { CSSProperties } from 'react';
+import type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';
+export declare const StyledMotionAccordionHead: 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 declare const StyledMotionIconWrapper: 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>>;
+type StyledAccordionIconProps = WithTheme<{
+    $icon: string;
+}>;
+export declare const StyledAccordionIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, StyledAccordionIconProps>> & string;
+type StyledMotionContentWrapperProps = WithTheme<{
+    $isWrapped: boolean;
+}>;
+export declare const StyledMotionContentWrapper: 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;
+}, StyledMotionContentWrapperProps>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledMotionTitleWrapper: 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>>;
+type StyledMotionTitleProps = WithTheme<{
+    $isOpen: boolean;
+    $isWrapped: boolean;
+    $color?: CSSProperties['color'];
+    $hasSearch: boolean;
+}>;
+export declare const StyledMotionTitle: 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;
+}, StyledMotionTitleProps>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledMotionTitleElementWrapper: 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>>;
+type StyledRightWrapperProps = {
+    $isSearchActive: boolean;
+};
+export declare const StyledRightWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledRightWrapperProps>> & string;
+export declare const StyledMotionSearchWrapper: 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 declare const StyledMotionRightElementWrapper: 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>>;
+type StyledMotionRightInputProps = WithTheme<{
+    $hasIcon: boolean;
+}>;
+export declare const StyledMotionRightInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("motion/react").HTMLMotionProps<"input">, "ref"> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
+    ref?: ((instance: HTMLInputElement | 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<HTMLInputElement> | null | undefined;
+}, StyledMotionRightInputProps>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLInputElement, import("motion/react").HTMLMotionProps<"input">>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledMotionRightInputIconWrapper: 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/accordion/accordion-intro/AccordionIntro.styles.d.ts

@@ -0,0 +1 @@
+export declare const StyledAccordionIntro: 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/accordion/accordion-item/AccordionItem.d.ts

@@ -0,0 +1,9 @@
+import { FC, ReactNode } from 'react';
+export type AccordionItemProps = {
+    /**
+     * The content of the accordion content element
+     */
+    children: ReactNode;
+};
+declare const AccordionItem: FC<AccordionItemProps>;
+export default AccordionItem;

package/lib/types/components/accordion/accordion-item/AccordionItem.styles.d.ts

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

package/lib/types/components/accordion/accordion-provider/AccordionContextProvider.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface IAccordionWrappedContextProvider {
+    isWrapped?: boolean;
+}
+export declare const AccordionWrappedContext: React.Context<IAccordionWrappedContextProvider>;
+export {};

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

@@ -0,0 +1,54 @@
+import { FC } from 'react';
+export type DisplayState = 'default' | 'delete' | 'normal' | 'maxAmount' | 'minAmount';
+export type AmountControlProps = {
+    /**
+     * The amount that should be displayed.
+     */
+    amount?: number;
+    /**
+     * The icon that should be displayed if no amount is selected.
+     */
+    icon?: string;
+    /**
+     * The color of the icon.
+     */
+    iconColor?: string;
+    /**
+     * Whether the control should be disabled
+     */
+    isDisabled?: boolean;
+    /**
+     * A Text that should be displayed, if no amount is selected;
+     */
+    label?: string;
+    /**
+     * The maximum allowed amount. If the maxAmount is set to one, a delete button is displayed on the left side.
+     */
+    maxAmount?: number;
+    /**
+     * The minimum allowed amount.
+     */
+    minAmount?: number;
+    /**
+     * A Function that is executed when the amount is changed
+     */
+    onChange?: (amount: number) => void;
+    /**
+     * Whether the add icon should be displayed if the minAmount is reached.
+     */
+    shouldShowAddIconOnMinAmount?: boolean;
+    /**
+     * Whether the icon should be displayed if no amount is selected
+     */
+    shouldShowIcon?: boolean;
+    /**
+     * Whether the input should be wider
+     */
+    shouldShowWideInput?: boolean;
+    /**
+     * Defines the amount that will change when adjusted
+     */
+    step?: number;
+};
+declare const AmountControl: FC<AmountControlProps>;
+export default AmountControl;

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

@@ -0,0 +1,26 @@
+import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';
+import type { DisplayState } from './AmountControl';
+type StyledAmountControlProps = WithTheme<{
+    $isDisabled: boolean;
+}>;
+export declare const StyledAmountControl: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledAmountControlProps>> & string;
+type StyledAmountControlInputProps = WithTheme<{
+    $displayState: DisplayState;
+    $shouldShowIcon: boolean;
+    $hasFocus: boolean;
+    $shouldShowWideInput: boolean;
+}>;
+export declare const StyledAmountControlInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, StyledAmountControlInputProps>> & string;
+type StyledAmountControlPseudoInputProps = WithTheme<{
+    $shouldShowWideInput: boolean;
+}>;
+export declare const StyledAmountControlPseudoInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledAmountControlPseudoInputProps>> & string;
+type StyledAmountControlButtonProps = WithTheme<{
+    $isDisabled: boolean;
+    $color?: string;
+    $isWide?: boolean;
+}>;
+export declare const StyledMotionAmountControlButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("motion/react").HTMLMotionProps<"button">, "ref"> & import("react").RefAttributes<HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | 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<HTMLButtonElement> | null | undefined;
+}, StyledAmountControlButtonProps>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLButtonElement, import("motion/react").HTMLMotionProps<"button">>, keyof import("react").Component<any, {}, any>>;
+export {};

package/lib/types/components/area-provider/AreaContextProvider.d.ts

@@ -0,0 +1,14 @@
+import React, { type ReactNode } from 'react';
+interface IAreaProviderContext {
+    shouldChangeColor?: boolean;
+}
+export declare const AreaContext: React.Context<IAreaProviderContext>;
+interface AreaContextProviderProps {
+    children: ReactNode;
+    shouldChangeColor?: boolean;
+}
+declare const AreaContextProvider: {
+    ({ children, shouldChangeColor }: AreaContextProviderProps): React.JSX.Element;
+    displayName: string;
+};
+export default AreaContextProvider;

package/lib/{components → types/components}/badge/Badge.d.ts

@@ -1,13 +1,13 @@
-import { FC, ReactNode } from 'react';
+import { FC, ReactNode, type CSSProperties, type MouseEventHandler } from 'react';
 export type BadgeProps = {
     /**
      * The background color of the badge
      */
-    backgroundColor?: string;
+    backgroundColor?: CSSProperties['backgroundColor'];
     /**
      * The content of the badge
      */
-    children: ReactNode;
+    children?: ReactNode;
     /**
      * Additional class names for the badge element
      */
@@ -15,7 +15,11 @@ export type BadgeProps = {
     /**
      * The font color of the badge
      */
-    fontColor?: string;
+    fontColor?: CSSProperties['color'];
+    /**
+     * Function to be executed when the badge is clicked
+     */
+    onClick?: MouseEventHandler;
 };
 declare const Badge: FC<BadgeProps>;
 export default Badge;

package/lib/types/components/badge/Badge.styles.d.ts

@@ -0,0 +1,11 @@
+import type { CSSProperties } from 'react';
+import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';
+type StyledBadgeProps = WithTheme<{
+    $cursor: CSSProperties['cursor'];
+    $backgroundColor?: CSSProperties['backgroundColor'];
+    $borderRadius: CSSProperties['borderRadius'];
+    $fontColor?: CSSProperties['color'];
+    $minWidth: CSSProperties['minWidth'];
+}>;
+export declare const StyledBadge: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledBadgeProps>> & string;
+export {};

package/lib/{components → types/components}/button/Button.d.ts

@@ -3,7 +3,7 @@ export type ButtonProps = {
     /**
      * The label of the button
      */
-    children: ReactNode;
+    children?: ReactNode;
     /**
      * Additional class names for the button element
      */
@@ -24,6 +24,18 @@ export type ButtonProps = {
      * Function to be executed when the button is clicked
      */
     onClick: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Whether the button should be displayed as a selectButton.
+     */
+    shouldShowAsSelectButton?: boolean;
+    /**
+     * Whether the text should be 'Roboto Medium'
+     */
+    shouldShowTextAsRobotoMedium?: boolean;
+    /**
+     * Shows a wait cursor instead of button text
+     */
+    shouldShowWaitCursor?: boolean;
     /**
      * Stops event propagation on click
      */

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

@@ -0,0 +1,25 @@
+import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';
+type StyledButtonProps = WithTheme<{
+    $hasIcon: boolean;
+    $hasChildren: boolean;
+    $isDisabled?: boolean;
+    $isSecondary?: boolean;
+    $shouldShowTextAsRobotoMedium: boolean;
+    $shouldShowAsSelectButton: boolean;
+    $shouldShowWaitCursor?: boolean;
+}>;
+export declare const StyledMotionButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("motion/react").HTMLMotionProps<"button">, "ref"> & import("react").RefAttributes<HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | 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<HTMLButtonElement> | null | undefined;
+}, StyledButtonProps>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLButtonElement, import("motion/react").HTMLMotionProps<"button">>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledIconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const StyledMotionChildrenWrapper: 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 declare const StyledMotionWaitCursorWrapper: 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/button/wait-cursor/WaitCursor.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+export type WaitCursorProps = {
+    color: string;
+    shouldHideBackground?: boolean;
+    shouldHideWaitCursor?: boolean;
+};
+declare const WaitCursor: FC<WaitCursorProps>;
+export default WaitCursor;

package/lib/types/components/button/wait-cursor/WaitCursor.styles.d.ts

@@ -0,0 +1,13 @@
+import type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';
+type StyledWaitCursorProps = WithTheme<{
+    $shouldShowWaitCursor: boolean;
+}>;
+export declare const StyledWaitCursor: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledWaitCursorProps>> & string;
+export declare const StyledWaitCursorBackground: 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;
+type StyledWaitCursorWaitCursorProps = WithTheme<{
+    $color: string;
+}>;
+export declare const StyledWaitCursorWaitCursor: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledWaitCursorWaitCursorProps>> & string;
+export {};

package/lib/{components → types/components}/checkbox/Checkbox.d.ts

@@ -1,9 +1,9 @@
-import { ChangeEventHandler, FC, ReactNode } from 'react';
+import { ChangeEventHandler, FC, ReactElement } from 'react';
 export type CheckboxProps = {
     /**
      * Text for checkbox or switch
      */
-    children?: ReactNode;
+    children?: ReactElement | string;
     /**
      * Indicates whether the checkbox or switch is selected
      */
@@ -12,14 +12,26 @@ export type CheckboxProps = {
      * Disables the checkbox or switch so it cannot be toggled
      */
     isDisabled?: boolean;
+    /**
+     * Classname for the label
+     */
+    labelClassName?: string;
     /**
      * Function to be executed if the checked value changes
      */
     onChange?: ChangeEventHandler<HTMLInputElement>;
+    /**
+     * Whether the label should change the state of the checkbox
+     */
+    shouldChangeOnLabelClick?: boolean;
     /**
      * Changes the design to use switch instead of checkbox
      */
     shouldShowAsSwitch?: boolean;
+    /**
+     * Whether the Checkbox should be displayed centered to the label or at the top
+     */
+    shouldShowCentered?: boolean;
 };
 declare const Checkbox: FC<CheckboxProps>;
 export default Checkbox;

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

@@ -0,0 +1,17 @@
+import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';
+import type { CheckboxProps } from './Checkbox';
+export declare const StyledCheckbox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledCheckboxInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
+type StyledCheckboxBoxProps = WithTheme<{
+    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];
+    $isDisabled?: CheckboxProps['isDisabled'];
+    $isChecked?: CheckboxProps['isChecked'];
+    $lineHeight?: number;
+}>;
+export declare const StyledCheckboxBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, StyledCheckboxBoxProps>> & string;
+type StyledCheckboxLabelProps = WithTheme<{
+    $isDisabled?: CheckboxProps['isDisabled'];
+    $shouldChangeOnLabelClick?: CheckboxProps['shouldChangeOnLabelClick'];
+}>;
+export declare const StyledCheckboxLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, StyledCheckboxLabelProps>> & string;
+export {};

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

@@ -0,0 +1,69 @@
+import { ColorMode } from 'chayns-api';
+import React, { FC, ReactNode } from 'react';
+import type { DesignSettings, ParagraphFormat } from '../../types/colorSchemeProvider';
+export type ColorSchemeProviderProps = {
+    /**
+     * The content of the application or the components for which the styles should be set
+     */
+    children: ReactNode;
+    /**
+     * The hex color to be used for the children
+     */
+    color?: string;
+    /**
+     * The colors of the components
+     */
+    colors?: Theme;
+    /**
+     * The color mode to be used for the children
+     */
+    colorMode?: ColorMode;
+    /**
+     * Css variables to be added in addition to the chayns variables
+     */
+    cssVariables?: {
+        [key: string]: string | number;
+    };
+    /**
+     * The design settings of a page.
+     */
+    designSettings?: DesignSettings;
+    /**
+     * The general format settings.
+     */
+    paragraphFormat?: ParagraphFormat[];
+    /**
+     * The secondary hex color to be used for the children
+     */
+    secondaryColor?: string;
+    /**
+     * The site id of the page for which the design settings should be fetched
+     */
+    siteId?: string;
+    /**
+     * Additional styles set on the root element
+     */
+    style?: {
+        [key: string]: string | number;
+    };
+    /**
+     * The theme for the components
+     */
+    theme?: Theme;
+};
+export interface Theme {
+    [key: string]: string;
+}
+export type WithTheme<T> = T & {
+    theme: Theme;
+};
+export type FramerMotionBugFix = WithTheme<unknown>;
+export interface ColorSchemeContextProps {
+    designSettings: DesignSettings;
+    paragraphFormat: ParagraphFormat[];
+    theme: Theme;
+}
+export declare const ColorSchemeContext: React.Context<ColorSchemeContextProps | undefined>;
+export declare const useColorScheme: () => ColorSchemeContextProps | undefined;
+declare const ColorSchemeProvider: FC<ColorSchemeProviderProps>;
+export default ColorSchemeProvider;

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

@@ -0,0 +1,3 @@
+export declare const StyledColorSchemeProvider: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    theme: import("./ColorSchemeProvider").Theme;
+}>> & string;