@mmb-digital/design-system-web 0.1.16 → 0.1.18

package/dist/index.d.ts

@@ -0,0 +1,1244 @@
+import React, { ReactNode, FC, ReactElement, SyntheticEvent, RefAttributes, HTMLInputTypeAttribute, MouseEvent, HTMLAttributes } from 'react';
+import { ColorScheme as ColorScheme$1 } from '@/util/colorScheme';
+import { ModalProps as ModalProps$1 } from '@/components/modal/modal/modal.types';
+import { TooltipFloatingElement as TooltipFloatingElement$1, TooltipParentElement as TooltipParentElement$1, TooltipPlacement as TooltipPlacement$1 } from '@/components/tooltip/tooltip.types';
+import { FormattedMessageTypes as FormattedMessageTypes$1 } from '@/components/formatted/message';
+import { MessageDescriptor } from 'react-intl';
+import { TooltipFloatingElement as TooltipFloatingElement$2 } from '@/components/tooltip';
+import { CalculatorResultBoxProps as CalculatorResultBoxProps$1 } from '@/components/calculator/calculatorResult/calculatorResultBox/calculatorResultBox.types';
+import { CalculatorResultValues as CalculatorResultValues$1 } from '@/components/calculator/calculatorResult/calculatorResult.types';
+import { MediaType as MediaType$1 } from '@/media';
+import { PrimitiveType } from 'intl-messageformat';
+import { ReactDatePickerProps } from 'react-datepicker';
+import { CheckboxBaseProps } from '@/components/formElement/checkbox/checkboxBase';
+import { RadioButtonLabel as RadioButtonLabel$1 } from '@/components/formElement/radio';
+import { FieldValues, Control, FieldPath } from 'react-hook-form';
+import { Options, Props, PropsValue, SingleValue as SingleValue$1 } from 'react-select';
+import { MinMaxLabels as MinMaxLabels$1, SliderStepType as SliderStepType$1, SliderSteps as SliderSteps$1 } from '@/components/slider/slider/slider.types';
+import { ColorScheme as ColorScheme$2, ChooseColor as ChooseColor$1 } from '@/util/colorScheme/colorScheme.types';
+
+declare enum ButtonStyle {
+    PRIMARY = "primary",
+    SECONDARY = "secondary",
+    TERTIARY = "tertiary"
+}
+declare enum ButtonSize {
+    MD = "md",
+    SM = "sm",
+    XL = "xl",
+    XS = "xs",
+    XXL = "xxl"
+}
+declare enum ButtonType {
+    BUTTON = "button",
+    RESET = "reset",
+    SUBMIT = "submit"
+}
+interface ButtonProps {
+    buttonStyle: ButtonStyle;
+    children: ReactNode;
+    disabled?: boolean;
+    displayOnlyIcon?: boolean;
+    fullWidth?: boolean | undefined;
+    iconLeft?: ReactNode;
+    iconRight?: ReactNode;
+    onClick?: () => void;
+    size: ButtonSize;
+    type?: ButtonType;
+}
+
+declare const Button: FC<ButtonProps>;
+
+interface SliderBreakpoint {
+    readonly bottomBreakpoint: number;
+    readonly step: number;
+}
+interface SliderSteps {
+    readonly baseStep: number;
+    readonly breakpointList: SliderBreakpoint[];
+}
+declare enum SliderStepType {
+    VISUALLY_LINEAR_BY_VALUE = "visuallyLinearByValue",// step changes dynamically (visually steps are of different sizes)
+    VISUALLY_SAME_STEP_SIZE = "visuallySameStepSize"
+}
+interface MinMaxLabels {
+    readonly max: ReactElement | string;
+    readonly min: ReactElement | string;
+}
+interface SliderProps {
+    readonly disable?: boolean | undefined;
+    readonly max: number;
+    readonly min: number;
+    readonly minMaxLabels: MinMaxLabels | undefined;
+    readonly onChange: (value: number) => void;
+    readonly onFinalChange: (value: number) => void;
+    readonly stepType: SliderStepType;
+    readonly steps: SliderSteps;
+    readonly value: number;
+}
+
+declare const Slider: React.FC<SliderProps>;
+
+declare enum InfoboxVariant {
+    DARK = "dark",
+    PRIMARY = "primary",
+    SECONDARY = "secondary"
+}
+declare enum InfoboxSize {
+    MD = "md",
+    SM = "sm",
+    XS = "xs"
+}
+interface InfoboxProps {
+    children: ReactNode;
+    isWarning?: boolean;
+    size: InfoboxSize;
+    variant: InfoboxVariant;
+}
+
+declare const Infobox: FC<InfoboxProps>;
+
+declare enum TableVariant {
+    EXCHANGE = "exchange",
+    SIMPLE = "simple"
+}
+interface TableProps {
+    children: ReactNode;
+    variant: TableVariant;
+}
+
+declare const Table: FC<TableProps>;
+
+declare const TableBody: FC<TableProps>;
+
+declare const TableData: FC<TableProps>;
+
+declare const TableHead: FC<TableProps>;
+
+declare const TableHeadData: FC<TableProps>;
+
+declare const TableRow: FC<TableProps>;
+
+declare enum TabsVariant {
+    primary = "primary",
+    secondary = "secondary",
+    tertiary = "tertiary"
+}
+interface TabsItemProps {
+    colorScheme: ColorScheme$1;
+    icon?: ReactNode;
+    id: string;
+    isActive?: boolean;
+    onClick?: () => void;
+    text?: ReactNode | string;
+    variant: TabsVariant;
+}
+interface TabsProps {
+    colorScheme?: ColorScheme$1;
+    defaultActiveStep?: number;
+    steps: TabsItemProps[];
+    variant: TabsVariant;
+}
+
+declare const TabsItem: FC<TabsItemProps>;
+
+declare const Tabs: FC<TabsProps>;
+
+declare enum IconProductType {
+    information = "information",
+    warningTriangle = "warningTriangle"
+}
+declare enum IconProductSize {
+    big = "big",
+    small = "small"
+}
+declare enum IconProductVariant {
+    active = "active",
+    default = "default"
+}
+interface IconProductProps {
+    readonly colorScheme?: ColorScheme$1;
+    readonly size: IconProductSize;
+    readonly type: IconProductType;
+    readonly variant?: IconProductVariant | undefined;
+}
+
+declare const IconProduct: React.FC<IconProductProps>;
+
+declare enum IconSystemType {
+    arrowDown = "arrowDown",
+    arrowLeft = "arrowLeft",
+    arrowRight = "arrowRight",
+    arrowUp = "arrowUp",
+    arrowUpRight = "arrowUpRight",
+    bank = "bank",
+    checkmark = "checkmark",
+    chevronDown = "chevronDown",
+    chevronLeft = "chevronLeft",
+    chevronRight = "chevronRight",
+    chevronUp = "chevronUp",
+    close = "close",
+    minus = "minus",
+    plus = "plus",
+    search = "search"
+}
+declare enum IconSystemSize {
+    big = "big",
+    small = "small"
+}
+interface IconSystemProps {
+    readonly colorScheme?: ColorScheme$1;
+    readonly fill?: string;
+    readonly size: IconSystemSize;
+    readonly stroke?: string;
+    readonly type: IconSystemType;
+}
+
+declare const IconSystem: React.FC<IconSystemProps>;
+
+declare const Modal: React.FC<ModalProps$1>;
+
+type ModalOnClose = (reasonForClosing: ReasonForClosing) => void;
+interface ModalProps {
+    readonly children: ReactElement | string;
+    readonly hideCloseButton: boolean;
+    readonly isOpen: boolean;
+    readonly modalRootElementId?: string | undefined;
+    readonly onClose: ModalOnClose;
+    readonly title?: ReactElement | string | undefined;
+}
+declare enum ReasonForClosing {
+    CLOSE_BUTTON = "closeButton",
+    ESC = "esc",
+    OVERLAY = "overlay"
+}
+
+interface TooltipInfoProps {
+    readonly colorScheme?: ColorScheme$1;
+    readonly floatingElement: TooltipFloatingElement$1;
+}
+
+declare const TooltipInfo: React.FC<TooltipInfoProps>;
+
+interface TooltipGeneralProps {
+    readonly colorScheme: ColorScheme$1;
+    readonly floatingElement: TooltipFloatingElement$1;
+    readonly onClose?: (() => void) | undefined;
+    readonly onOpen?: (() => void) | undefined;
+    readonly parentElement: TooltipParentElement$1;
+    readonly placement?: TooltipPlacement$1 | undefined;
+}
+
+declare const TooltipGeneral: React.FC<TooltipGeneralProps>;
+
+interface TooltipParentElementProps extends Record<string, unknown> {
+    ref: (node: Element | null) => void;
+}
+type TooltipParentElement = (props: TooltipParentElementProps) => ReactElement;
+declare enum TooltipPlacement {
+    bottom = "bottom",
+    left = "left",
+    right = "right",
+    top = "top"
+}
+interface TooltipFloatingElement {
+    body: ReactElement | string;
+    title?: ReactElement | string | undefined;
+}
+declare enum TooltipInfoDisplayMethod {
+    ONLY_TOOLTIP = "onlyTooltip",
+    WITH_NBSP = "withNbsp"
+}
+
+interface TooltipInfoDisplayableCheckProps {
+    body: FormattedMessageTypes$1;
+    colorScheme?: ColorScheme$1;
+    displayMethod: TooltipInfoDisplayMethod;
+    title?: FormattedMessageTypes$1 | undefined;
+}
+
+declare const TooltipInfoDisplayableCheck: React.FC<TooltipInfoDisplayableCheckProps>;
+
+interface TooltipInfoConditionalProps {
+    colorScheme?: ColorScheme$1;
+    displayMethod: TooltipInfoDisplayMethod;
+    floatingElement?: Partial<TooltipFloatingElement> | undefined;
+}
+
+declare const TooltipInfoConditional: React.FC<TooltipInfoConditionalProps>;
+
+type CreateTooltipFloatingElementHookReturnFunction = (body: FormattedMessageTypes$1, title?: MessageDescriptor | undefined) => TooltipFloatingElement | undefined;
+
+declare const useCreateTooltipFloatingElement: () => CreateTooltipFloatingElementHookReturnFunction;
+
+interface CalculatorResultHeader {
+    bottom?: ReactElement | string | undefined;
+    main?: ReactElement | string | undefined;
+    top?: ReactElement | string | undefined;
+}
+interface CalculatorResultBodyItem {
+    left: {
+        element: ReactElement | string;
+        tooltip?: {
+            floatingElement: TooltipFloatingElement$2;
+        } | undefined;
+    };
+    right: {
+        element: ReactElement | string;
+    };
+}
+interface CalculatorResultMain {
+    element: ReactElement | string;
+    topSeparator?: boolean;
+}
+interface CalculatorResultValues {
+    bodyItems: CalculatorResultBodyItem[];
+    header: CalculatorResultHeader;
+    main: CalculatorResultMain;
+}
+
+interface CalculatorResultProps extends CalculatorResultValues {
+}
+
+/**
+ * If you want to display text below result (for example a representative example), consider using CalculatorResultBox component
+ */
+declare const CalculatorResult: React.FC<CalculatorResultProps>;
+
+/**
+ * If you just want CalculatorResult without text below it, consider using CalculatorResult
+ */
+declare const CalculatorResultBox: React.FC<CalculatorResultBoxProps$1>;
+
+interface CalculatorResultBoxModal {
+    content: ReactElement | string;
+    text: ReactElement | string;
+}
+interface CalculatorResultBoxProps extends CalculatorResultValues$1 {
+    description?: ReactElement | string;
+    mediaType: MediaType$1;
+    modal: CalculatorResultBoxModal | undefined;
+}
+
+declare enum LoaderSize {
+    LG = "lg",
+    SM = "sm"
+}
+interface LoaderProps {
+    colorScheme: ColorScheme$1;
+    loaderSize: LoaderSize;
+}
+
+declare const Loader: React.FC<LoaderProps>;
+
+interface LoaderOverlayBoxProps {
+    colorScheme: ColorScheme$1;
+    loaderSize: LoaderSize;
+}
+
+declare const LoaderOverlayBox: React.FC<LoaderOverlayBoxProps>;
+
+interface FormattedPercentageProps {
+    readonly maximumFractionDigits?: number;
+    readonly minimumFractionDigits?: number;
+    readonly value: number;
+}
+
+declare const _default$1: React.NamedExoticComponent<FormattedPercentageProps>;
+
+interface UseFormatPercentageTypeParam {
+    maximumFractionDigits?: number;
+    minimumFractionDigits?: number;
+    value: number;
+}
+type UseFormatPercentage = (param: UseFormatPercentageTypeParam) => string;
+declare const useFormattedPercentage: () => UseFormatPercentage;
+
+interface FormattedMessageTypes extends MessageDescriptor {
+    values?: Record<string, PrimitiveType>;
+}
+
+type FormattedMessageProps = FormattedMessageTypes;
+
+declare const FormattedMessage: React.FC<FormattedMessageProps>;
+
+type FormattedHtmlMessageProps = FormattedMessageTypes;
+
+declare const FormattedHtmlMessage: React.FC<FormattedHtmlMessageProps>;
+
+type IsMessageDisplayableHookReturnFunction = (messageDescriptor: MessageDescriptor) => boolean;
+
+declare const useIsMessageDisplayable: () => IsMessageDisplayableHookReturnFunction;
+
+interface FormattedAmountProps {
+    readonly amount: number;
+    readonly currency?: string;
+    readonly maximumFractionDigits?: number;
+    readonly minimumFractionDigits?: number;
+}
+
+declare const _default: React.NamedExoticComponent<FormattedAmountProps>;
+
+interface UseFormatAmountTypeParam {
+    amount: number;
+    currency?: string;
+    maximumFractionDigits?: number;
+    minimumFractionDigits?: number;
+}
+type UseFormatAmountType = (param: UseFormatAmountTypeParam) => string;
+declare const useFormatAmount: () => UseFormatAmountType;
+
+interface DatePickerProps extends Omit<ReactDatePickerProps, 'calendarContainer' | 'customInput' | 'onChange' | 'renderCustomHeader' | 'showTimeSelect'> {
+    dateFormat?: string[] | string;
+    locale?: string;
+    maxDate?: Date;
+    minDate?: Date;
+    name: string;
+    onChange(date: Date | null, event: SyntheticEvent<never> | undefined): void;
+    startDate?: Date | null;
+}
+
+declare const DatePicker: (props: DatePickerProps) => React.JSX.Element;
+
+declare enum CheckboxPosition {
+    left = "left",
+    right = "right"
+}
+interface CheckboxLabel {
+    readonly label: React.ReactElement | string;
+    readonly tooltip?: TooltipFloatingElement$2 | undefined;
+}
+interface CheckboxProps extends CheckboxBaseProps {
+    readonly errorMessage?: React.ReactElement | string | undefined;
+    readonly label?: CheckboxLabel | undefined;
+    readonly position?: CheckboxPosition | undefined;
+}
+
+declare const Checkbox: React.FC<CheckboxProps>;
+
+interface RadioGeneralProps extends RefAttributes<HTMLInputElement> {
+    readonly disabled?: boolean;
+    readonly id?: string | undefined;
+    readonly isError?: boolean | undefined;
+    readonly name: string;
+    readonly onBlur?: ((event: React.FocusEvent<HTMLInputElement>) => Promise<boolean | void>) | undefined;
+    readonly onChange?: ((event: React.ChangeEvent<HTMLInputElement>) => Promise<boolean | void>) | undefined;
+    readonly value: string;
+}
+
+interface RadioLabel {
+    readonly label: React.ReactElement | string;
+    readonly tooltip?: TooltipFloatingElement$2 | undefined;
+}
+declare enum RadioPosition {
+    left = "left",
+    right = "right"
+}
+interface RadioBaseWithLabelProps extends RadioGeneralProps {
+    readonly errorMessage?: React.ReactElement | string | undefined;
+    readonly label?: RadioLabel | undefined;
+    readonly position?: RadioPosition | undefined;
+}
+
+declare const Radio: React.FC<RadioBaseWithLabelProps>;
+
+interface RadioButtonLabel {
+    main: React.ReactElement | string;
+    top?: React.ReactElement | string | undefined;
+}
+interface RadioButtonProps extends RadioGeneralProps {
+    readonly errorMessage?: React.ReactElement | string | undefined;
+    readonly label: RadioButtonLabel;
+}
+
+declare const RadioButton: React.FC<RadioButtonProps>;
+
+interface RadioButtonsHorizontalLabel {
+    readonly element: React.ReactElement | string;
+    readonly tooltip?: TooltipFloatingElement$2 | undefined;
+}
+interface RadioButtonsHorizontalItem {
+    id?: string | undefined;
+    label: RadioButtonLabel$1;
+    value: string;
+}
+interface RadioButtonsHorizontalProps {
+    disabled?: boolean;
+    isError?: boolean | undefined;
+    items: RadioButtonsHorizontalItem[];
+    label?: RadioButtonsHorizontalLabel | undefined;
+    minWidthOfItem?: string;
+    name: string;
+    onBlur?: ((event: React.FocusEvent<HTMLInputElement>) => Promise<boolean | void>) | undefined;
+    onChange?: ((event: React.ChangeEvent<HTMLInputElement>) => Promise<boolean | void>) | undefined;
+}
+
+declare const RadioButtonsHorizontal: React.FC<RadioButtonsHorizontalProps>;
+
+type SelectProps<T extends FieldValues> = SelectBaseProps & {
+    control: Control<T, any>;
+    defaultValue?: Options<SelectOption> | null;
+    name: FieldPath<T>;
+};
+type SelectBaseProps = Props<SelectOption, false> & {
+    readonly isError?: boolean;
+    readonly options: Options<SelectOption>;
+    readonly value?: PropsValue<SelectOption>;
+};
+interface SelectOption {
+    readonly icon?: ReactNode | string;
+    readonly label: string;
+    readonly value?: string;
+}
+type SingleValue = SingleValue$1<SelectOption>;
+
+declare const SelectBase: FC<SelectBaseProps>;
+
+declare const Select: <T extends FieldValues>(props: SelectProps<T>) => React.JSX.Element;
+
+interface ToggleProps {
+    defaultValue?: boolean;
+    disabled?: boolean;
+    id: string | undefined;
+    label?: ReactNode | string;
+    name: string;
+    onChange?: (value: boolean) => void;
+}
+
+/**
+ * Currently not compatible with react-hook-form
+ */
+declare const Toggle: FC<ToggleProps>;
+
+declare enum InputSize {
+    MD = "md",
+    XL = "xl"
+}
+declare enum TextAlign {
+    center = "center",
+    left = "left",
+    right = "right"
+}
+interface InputProps {
+    disabled?: boolean;
+    errorMessage?: ReactNode | string;
+    halfWidth?: boolean;
+    hasError?: boolean;
+    hintText?: ReactNode | string;
+    id?: string | undefined;
+    label?: ReactNode | string;
+    maxLength?: number;
+    name: string;
+    onBlur?: ((event: React.FocusEvent<HTMLInputElement>) => Promise<boolean | void>) | undefined;
+    onChange?: ((event: React.ChangeEvent<HTMLInputElement>) => Promise<boolean | void>) | undefined;
+    size: InputSize;
+    tooltip?: TooltipFloatingElement$2 | undefined;
+    value?: string;
+}
+
+interface InputBaseProps extends RefAttributes<HTMLInputElement> {
+    button?: ReactNode;
+    colorInput?: string | undefined;
+    disabled?: boolean;
+    halfWidth?: boolean;
+    hasError?: boolean;
+    icon?: ReactNode;
+    id?: string | undefined;
+    maxLength?: number;
+    name: string;
+    onBlur?: ((event: React.FocusEvent<HTMLInputElement>) => Promise<boolean | void>) | undefined;
+    onChange?: ((event: React.ChangeEvent<HTMLInputElement>) => Promise<boolean | void>) | undefined;
+    placeholder?: string;
+    prefix?: ReactNode | string;
+    size: InputSize;
+    suffix?: ReactNode | string;
+    textAlign?: TextAlign;
+    type?: HTMLInputTypeAttribute;
+    value?: string;
+}
+
+declare const InputBase: FC<InputBaseProps>;
+
+interface InputLabelProps {
+    hasError?: boolean;
+    id?: string;
+    label?: ReactNode | string;
+    tooltip?: TooltipFloatingElement$2 | undefined;
+}
+
+declare const InputLabel: FC<InputLabelProps>;
+
+interface EmailInputProps extends InputProps {
+    placeholder?: string;
+}
+
+declare const EmailInput: FC<EmailInputProps>;
+
+interface PhoneInputProps extends InputProps {
+    placeholder?: string;
+    prefix?: string;
+}
+
+declare const PhoneInput: FC<PhoneInputProps>;
+
+interface SearchInputProps extends InputProps {
+    buttonAction?: () => void;
+    buttonText?: ReactNode | string;
+    placeholder?: string;
+}
+
+declare const SearchInput: FC<SearchInputProps>;
+
+interface SliderInputLabel {
+    element: ReactNode | string;
+    tooltip?: TooltipFloatingElement$2 | undefined;
+}
+interface SliderInputMinMax {
+    max: number;
+    min: number;
+}
+interface SliderInputProps extends RefAttributes<HTMLInputElement> {
+    disabled?: boolean | undefined;
+    hasError?: boolean;
+    id?: string | undefined;
+    isInputHidden?: boolean | undefined;
+    label: SliderInputLabel;
+    mediaType: MediaType$1;
+    minMax: SliderInputMinMax;
+    minMaxLabels: MinMaxLabels$1 | undefined;
+    name: string;
+    onBlur?: ((event: React.FocusEvent<HTMLInputElement>) => Promise<boolean | void>) | undefined;
+    onChange?: ((event: React.ChangeEvent<HTMLInputElement>) => Promise<boolean | void>) | undefined;
+    prefix?: ReactNode | string | undefined;
+    stepType: SliderStepType$1;
+    steps: SliderSteps$1;
+    suffix?: ReactNode | string | undefined;
+}
+
+declare const SliderInput: React.FC<SliderInputProps>;
+
+interface TextInputProps extends InputProps {
+    placeholder?: string;
+}
+
+declare const TextInput: FC<TextInputProps>;
+
+interface TrailingTextInputProps extends InputProps {
+    placeholder?: string;
+    suffix?: ReactNode | string;
+}
+
+declare const TrailingTextInput: FC<TrailingTextInputProps>;
+
+declare enum TypographyVariant {
+    H1 = "h1",
+    H2 = "h2",
+    H3 = "h3",
+    H4 = "h4",
+    H5 = "h5",
+    TEXT_LG = "textLg",
+    TEXT_MD = "textMd",
+    TEXT_SM = "textSm",
+    TEXT_XS = "textXs"
+}
+declare enum TypographyTextAlign {
+    CENTER = "center",
+    LEFT = "left",
+    RIGHT = "right"
+}
+declare enum TypographyWeight {
+    THIN_100 = "thin",
+    EXTRA_LIGHT_200 = "extraLight",
+    LIGHT_300 = "light",
+    REGULAR_400 = "normal",
+    MEDIUM_500 = "medium",
+    SEMI_BOLD_600 = "semiBold",
+    BOLD_700 = "bold",
+    EXTRA_BOLD_800 = "extraBold",
+    HEAVY_900 = "heavy",
+    ULTRA_950 = "ultra"
+}
+interface TypographyProps {
+    children: ReactNode;
+    color?: string;
+    fullWidth?: boolean;
+    onClick?: ((event: MouseEvent<HTMLElement>) => void) | undefined;
+    textAlign?: TypographyTextAlign;
+    variant: TypographyVariant;
+    weight?: TypographyWeight;
+}
+
+declare const Typography: FC<TypographyProps>;
+
+declare enum GapSize {
+    XXS = "xxs",
+    XS = "xs",
+    SM = "sm",
+    MD = "md",
+    LG = "lg",
+    XL = "xl",
+    XXL = "xxl",
+    XXXL = "xxxl",
+    XXXXL = "xxxxl",
+    XXXXXL = "xxxxxl"
+}
+declare enum StackDirection {
+    column = "column",
+    row = "row"
+}
+type StackProps = HTMLAttributes<HTMLDivElement> & {
+    direction?: StackDirection;
+    gap?: GapSize;
+};
+
+declare const Stack: React.FC<StackProps>;
+
+declare enum MediaType {
+    desktop = "desktop",
+    mobile = "mobile"
+}
+
+declare const useColorScheme: (colorScheme: ColorScheme$2) => ChooseColor$1;
+
+declare enum ColorScheme {
+    dark = "dark",
+    light = "light"
+}
+interface ColorSchemeObject<Dark extends string = string, Light extends string = string> {
+    dark: Dark;
+    light: Light;
+}
+type ChooseColor = <Dark extends string = string, Light extends string = string>(colorSchemeObject: ColorSchemeObject<Dark, Light>) => Dark | Light;
+type GetColor = <Dark extends string = string, Light extends string = string>(colorScheme: ColorScheme, colorSchemeObject: ColorSchemeObject<Dark, Light>) => Dark | Light;
+
+declare const getColor: GetColor;
+
+declare const theme: {
+    palette: {
+        gold100: string;
+        gold200: string;
+        gold500: string;
+        gold600: string;
+        gold700: string;
+        gold800: string;
+        pink100: string;
+        pink200: string;
+        pink300: string;
+        pink400: string;
+        pink500: string;
+        pink600: string;
+        pink700: string;
+        pink800: string;
+        pink900: string;
+        pink1000: string;
+        grey100: string;
+        grey200: string;
+        grey300: string;
+        grey400: string;
+        grey500: string;
+        grey600: string;
+        grey700: string;
+        grey800: string;
+        grey900: string;
+        grey1000: string;
+        black: string;
+        white: string;
+        transparent: string;
+        yellow100: string;
+        yellow200: string;
+        yellow300: string;
+        yellow400: string;
+        yellow500: string;
+        yellow600: string;
+        yellow700: string;
+        yellow800: string;
+        yellow900: string;
+        yellow1000: string;
+        green100: string;
+        green200: string;
+        green300: string;
+        green400: string;
+        green500: string;
+        green600: string;
+        green700: string;
+        green800: string;
+        green900: string;
+        green1000: string;
+        red100: string;
+        red200: string;
+        red300: string;
+        red400: string;
+        red500: string;
+        red600: string;
+        red700: string;
+        red800: string;
+        red900: string;
+        red1000: string;
+        blue100: string;
+        blue200: string;
+        blue300: string;
+        blue400: string;
+        blue500: string;
+        blue600: string;
+        blue700: string;
+        blue800: string;
+        blue900: string;
+        blue1000: string;
+    };
+    colors: {
+        fg: {
+            neutral: {
+                default: {
+                    light: string;
+                    dark: string;
+                };
+                subtle: {
+                    light: string;
+                    dark: string;
+                };
+                subtlest: {
+                    light: string;
+                    dark: string;
+                };
+                white: {
+                    light: string;
+                    dark: string;
+                };
+            };
+            disabled: {
+                light: string;
+                dark: string;
+            };
+            inverse: {
+                light: string;
+                dark: string;
+            };
+            link: {
+                default: {
+                    light: string;
+                    dark: string;
+                };
+                hover: {
+                    light: string;
+                    dark: string;
+                };
+                pressed: {
+                    light: string;
+                    dark: string;
+                };
+            };
+            success: {
+                light: string;
+                dark: string;
+            };
+            warning: {
+                light: string;
+                dark: string;
+            };
+            error: {
+                light: string;
+                dark: string;
+            };
+            info: {
+                light: string;
+                dark: string;
+            };
+            promo: {
+                light: string;
+                dark: string;
+            };
+            brand: {
+                default: {
+                    light: string;
+                    dark: string;
+                };
+                bold: {
+                    light: string;
+                    dark: string;
+                };
+            };
+            accent: {
+                default: {
+                    light: string;
+                    dark: string;
+                };
+                bold: {
+                    light: string;
+                    dark: string;
+                };
+            };
+        };
+        bg: {
+            neutral: {
+                default: {
+                    light: string;
+                    dark: string;
+                };
+                subtle: {
+                    light: string;
+                    dark: string;
+                };
+                subtlest: {
+                    light: string;
+                    dark: string;
+                };
+                white: {
+                    light: string;
+                    dark: string;
+                };
+            };
+            disabled: {
+                light: string;
+                dark: string;
+            };
+            promo: {
+                default: {
+                    light: string;
+                    dark: string;
+                };
+                bold: {
+                    light: string;
+                    dark: string;
+                };
+            };
+            error: {
+                default: {
+                    light: string;
+                    dark: string;
+                };
+                bold: {
+                    light: string;
+                    dark: string;
+                };
+            };
+            warning: {
+                default: {
+                    light: string;
+                    dark: string;
+                };
+                bold: {
+                    light: string;
+                    dark: string;
+                };
+            };
+            inverse: {
+                light: string;
+                dark: string;
+            };
+            success: {
+                default: {
+                    light: string;
+                    dark: string;
+                };
+                bold: {
+                    light: string;
+                    dark: string;
+                };
+            };
+            info: {
+                default: {
+                    light: string;
+                    dark: string;
+                };
+                bold: {
+                    light: string;
+                    dark: string;
+                };
+            };
+            accent: {
+                light: string;
+                dark: string;
+            };
+            brand: {
+                default: {
+                    light: string;
+                    dark: string;
+                    hover: {
+                        light: string;
+                        dark: string;
+                    };
+                    pressed: {
+                        light: string;
+                        dark: string;
+                    };
+                };
+                bold: {
+                    light: string;
+                    dark: string;
+                    hover: {
+                        light: string;
+                        dark: string;
+                    };
+                    pressed: {
+                        light: string;
+                        dark: string;
+                    };
+                };
+            };
+        };
+        surface: {
+            overlay: {
+                light: string;
+                dark: string;
+            };
+            risen: {
+                light: string;
+                dark: string;
+            };
+            default: {
+                light: string;
+                dark: string;
+            };
+            sunken: {
+                light: string;
+                dark: string;
+            };
+        };
+        border: {
+            neutral: {
+                default: {
+                    light: string;
+                    dark: string;
+                };
+                subtle: {
+                    light: string;
+                    dark: string;
+                };
+                subtlest: {
+                    light: string;
+                    dark: string;
+                };
+            };
+            disabled: {
+                light: string;
+                dark: string;
+            };
+            success: {
+                light: string;
+                dark: string;
+            };
+            warning: {
+                light: string;
+                dark: string;
+            };
+            error: {
+                light: string;
+                dark: string;
+            };
+            promo: {
+                light: string;
+                dark: string;
+            };
+            brand: {
+                bold: {
+                    light: string;
+                    dark: string;
+                };
+                default: {
+                    light: string;
+                    dark: string;
+                };
+                subtle: {
+                    light: string;
+                    dark: string;
+                };
+                subtlest: {
+                    light: string;
+                    dark: string;
+                };
+            };
+            inverse: {
+                light: string;
+                dark: string;
+            };
+            accent: {
+                light: string;
+                dark: string;
+            };
+        };
+        icon: {
+            bg: {
+                light: string;
+                dark: string;
+            };
+            brand: {
+                light: string;
+                dark: string;
+            };
+            neutral: {
+                light: string;
+                dark: string;
+            };
+            inverse: {
+                light: string;
+                dark: string;
+            };
+            disabled: {
+                light: string;
+                dark: string;
+            };
+            error: {
+                light: string;
+                dark: string;
+            };
+        };
+        shadow: {
+            buttonFocus: string;
+            cards: string;
+            ultraStrongBlueLg: string;
+            strongBlueMd: string;
+        };
+        focus: {
+            light: string;
+            dark: string;
+        };
+    };
+    font: {
+        size: {
+            heading: {
+                h1: {
+                    desktop: string;
+                    mobile: string;
+                };
+                h2: {
+                    desktop: string;
+                    mobile: string;
+                };
+                h3: {
+                    desktop: string;
+                    mobile: string;
+                };
+                h4: {
+                    desktop: string;
+                    mobile: string;
+                };
+                h5: {
+                    desktop: string;
+                    mobile: string;
+                };
+            };
+            body: {
+                xs: string;
+                sm: string;
+                md: string;
+                lg: string;
+            };
+        };
+        lineHeight: {
+            heading: {
+                h1: {
+                    desktop: string;
+                    mobile: string;
+                };
+                h2: {
+                    desktop: string;
+                    mobile: string;
+                };
+                h3: {
+                    desktop: string;
+                    mobile: string;
+                };
+                h4: {
+                    desktop: string;
+                    mobile: string;
+                };
+                h5: {
+                    desktop: string;
+                    mobile: string;
+                };
+            };
+            body: {
+                lg: string;
+                md: string;
+                sm: string;
+                xs: string;
+            };
+        };
+        weight: {
+            thin: number;
+            extraLight: number;
+            light: number;
+            normal: number;
+            medium: number;
+            semiBold: number;
+            bold: number;
+            extraBold: number;
+            heavy: number;
+            ultra: number;
+        };
+        letterSpacing: {
+            heading: {
+                h1: {
+                    desktop: string;
+                    mobile: string;
+                };
+                h2: {
+                    desktop: string;
+                    mobile: string;
+                };
+                h3: {
+                    desktop: string;
+                    mobile: string;
+                };
+                h4: {
+                    desktop: string;
+                    mobile: string;
+                };
+                h5: {
+                    desktop: string;
+                    mobile: string;
+                };
+            };
+            body: {
+                lg: string;
+                md: string;
+                sm: string;
+                xs: string;
+            };
+        };
+    };
+    spacing: {
+        xxs: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        xxl: string;
+        xxxl: string;
+        xxxxl: string;
+        xxxxxl: string;
+    };
+    borderRadius: {
+        xxs: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        full: string;
+    };
+    shadow: {
+        box: {
+            sm: string;
+            md: string;
+            lg: string;
+        };
+        border: {
+            sm: string;
+        };
+    };
+    container: {
+        xl: string;
+    };
+    breakpoints: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        xxl: string;
+    };
+};
+
+export { Button, type ButtonProps, ButtonSize, ButtonStyle, ButtonType, CalculatorResult, CalculatorResultBox, type CalculatorResultBoxModal, type CalculatorResultBoxProps, type CalculatorResultProps, Checkbox, type CheckboxLabel, CheckboxPosition, type CheckboxProps, type ChooseColor, ColorScheme, type ColorSchemeObject, DatePicker, type DatePickerProps, EmailInput, type EmailInputProps, _default as FormattedAmount, FormattedHtmlMessage, type FormattedHtmlMessageProps, FormattedMessage, type FormattedMessageProps, type FormattedMessageTypes, _default$1 as FormattedPercentage, GapSize, type GetColor, IconProduct, IconProductSize, IconProductType, IconSystem, IconSystemSize, IconSystemType, TooltipInfoConditional as InfoConditional, Infobox, type InfoboxProps, InfoboxSize, InfoboxVariant, InputBase, type InputBaseProps, InputLabel, type InputLabelProps, InputSize, Loader, LoaderOverlayBox, type LoaderOverlayBoxProps, type LoaderProps, LoaderSize, MediaType, Modal, type ModalOnClose, type ModalProps, PhoneInput, type PhoneInputProps, Radio, type RadioBaseWithLabelProps, RadioButton, type RadioButtonLabel, type RadioButtonProps, RadioButtonsHorizontal, type RadioButtonsHorizontalItem, type RadioButtonsHorizontalLabel, type RadioButtonsHorizontalProps, type RadioLabel, RadioPosition, ReasonForClosing, SearchInput, type SearchInputProps, Select, SelectBase, type SelectOption, type SelectProps, type SingleValue, Slider, type SliderBreakpoint, SliderInput, type SliderInputLabel, type SliderInputMinMax, type SliderInputProps, type SliderProps, SliderStepType, type SliderSteps, Stack, StackDirection, type StackProps, Table, TableBody, TableData, TableHead, TableHeadData, TableRow, TableVariant, Tabs, TabsItem, TextInput, type TextInputProps, Toggle, type ToggleProps, type TooltipFloatingElement, TooltipGeneral, type TooltipGeneralProps, TooltipInfo, type TooltipInfoConditionalProps, TooltipInfoDisplayMethod, TooltipInfoDisplayableCheck, type TooltipInfoDisplayableCheckProps, type TooltipInfoProps, type TooltipParentElement, type TooltipParentElementProps, TooltipPlacement, TrailingTextInput, type TrailingTextInputProps, Typography, type TypographyProps, TypographyTextAlign, TypographyVariant, TypographyWeight, getColor, theme, useColorScheme, useCreateTooltipFloatingElement, useFormatAmount, useFormattedPercentage, useIsMessageDisplayable };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mmb-digital/design-system-web",
-  "version": "0.1.16",
+  "version": "0.1.18",
   "description": "MMB design-system-web",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/dist/rollup.config.d.ts

@@ -1,3 +0,0 @@
-import { RollupOptions } from 'rollup';
-declare const rollupConfig: RollupOptions;
-export default rollupConfig;

package/rollup.config.ts

@@ -1,43 +0,0 @@
-import resolve from '@rollup/plugin-node-resolve';
-import commonjs from '@rollup/plugin-commonjs';
-import typescript from '@rollup/plugin-typescript';
-// import dts from 'rollup-plugin-dts';
-import { terser } from 'rollup-plugin-terser';
-import peerDepsExternal from 'rollup-plugin-peer-deps-external';
-import json from '@rollup/plugin-json';
-import css from 'rollup-plugin-import-css';
-import { RollupOptions } from 'rollup';
-
-import packageJson from './package.json' assert { type: 'json' };
-
-const rollupConfig: RollupOptions = {
-	input: 'src/index.ts',
-	output: [
-		{
-			file: packageJson.main,
-			format: 'cjs',
-			sourcemap: true,
-		},
-		{
-			file: packageJson.module,
-			format: 'esm',
-			sourcemap: true,
-		},
-	],
-	plugins: [
-		// @ts-ignore
-		peerDepsExternal(),
-		resolve(),
-		commonjs(),
-		typescript({
-			tsconfig: 'tsconfig.json',
-			exclude: ['**/*.test.ts', '**/*.stories.tsx', 'jest.config.ts'],
-		}),
-		json(),
-		css(),
-		terser(),
-	],
-	external: [],
-};
-
-export default rollupConfig;