@mmb-digital/design-system-web 0.1.183 → 0.1.185

package/dist/index.d.ts

@@ -1,14 +1,14 @@
 import * as React from 'react';
-import React__default, { ReactNode, FC, PropsWithChildren, RefObject, MouseEvent, TouchEvent, ReactElement, MouseEventHandler, KeyboardEventHandler, HTMLProps, RefAttributes, HTMLInputAutoCompleteAttribute, FocusEvent, ChangeEvent, ComponentType, ComponentProps, TextareaHTMLAttributes, AriaAttributes, HTMLAttributes, HTMLInputTypeAttribute, FocusEventHandler } from 'react';
+import React__default, { ReactNode, RefObject, MouseEvent, AriaAttributes, TouchEvent, ReactElement, MouseEventHandler, KeyboardEventHandler, HTMLProps, RefAttributes, HTMLInputAutoCompleteAttribute, FocusEvent, ChangeEvent, ComponentType, ComponentProps, TextareaHTMLAttributes, HTMLAttributes, HTMLInputTypeAttribute, FC, FocusEventHandler } from 'react';
 import { MessageDescriptor } from 'react-intl';
 import { FormatXMLElementFn, PrimitiveType } from 'intl-messageformat';
+import * as styled_components from 'styled-components';
+import { DefaultTheme, WebTarget } from 'styled-components';
 import * as csstype from 'csstype';
 import { Property } from 'csstype';
 import { DatePickerProps as DatePickerProps$1 } from 'react-datepicker';
 import * as react_hook_form from 'react-hook-form';
 import { RegisterOptions, FieldValues, Control, FieldPath } from 'react-hook-form';
-import * as styled_components from 'styled-components';
-import { WebTarget, DefaultTheme } from 'styled-components';
 import * as react_select_dist_declarations_src_useStateManager from 'react-select/dist/declarations/src/useStateManager';
 import * as react_select_dist_declarations_src_Select from 'react-select/dist/declarations/src/Select';
 import * as react_select from 'react-select';
@@ -18,125 +18,20 @@ import * as afformative from 'afformative';
 import { Formatter } from 'afformative';
 
 interface AccordionItemType {
+    closeActionAriaLabel?: string;
     content: ReactNode;
-    description?: ReactNode | string;
+    description?: ReactNode;
     icon?: ReactNode;
     id: string;
     isOpen?: boolean;
-    label: ReactNode | string;
+    label: ReactNode;
     onClick?: () => void;
+    openActionAriaLabel?: string;
 }
-interface AccordionItemProps extends AccordionItemType {
-    variant: AccordionVariant;
-}
-
 declare enum AccordionVariant {
     default = "default",
     table = "table"
 }
-interface AccordionProps {
-    data: AccordionItemType[];
-    variant: AccordionVariant;
-}
-
-declare const Accordion: FC<AccordionProps>;
-
-declare const AccordionItem: FC<AccordionItemProps>;
-
-declare enum ColorScheme {
-    dark = "dark",
-    light = "light"
-}
-interface ColorObject<Dark extends string = string, Light extends string = string> {
-    dark: Dark;
-    light: Light;
-}
-type ChooseColor = <Dark extends string = string, Light extends string = string>(colorSchemeObject: ColorObject<Dark, Light>) => Dark | Light;
-type GetColor = <Dark extends string = string, Light extends string = string>(colorScheme: ColorScheme, colorSchemeObject: ColorObject<Dark, Light>) => Dark | Light;
-
-declare const useChooseColor: (colorScheme: ColorScheme) => ChooseColor;
-
-declare const getColor: GetColor;
-
-interface AccordionContentType extends PropsWithChildren {
-    colorScheme?: ColorScheme;
-}
-
-declare const AccordionContent: FC<AccordionContentType>;
-
-interface AccordionKeyValueType {
-    colorScheme?: ColorScheme;
-    label: ReactNode | string;
-    value: ReactNode | string;
-}
-
-declare const AccordionKeyValue: FC<AccordionKeyValueType>;
-
-declare enum ButtonStyle {
-    primary = "primary",
-    secondary = "secondary",
-    tertiary = "tertiary"
-}
-declare enum ButtonSize {
-    xs = "xs",
-    sm = "sm",
-    md = "md",
-    xl = "xl",
-    xxl = "xxl"
-}
-declare enum ButtonType {
-    anchor = "anchor",
-    button = "button",
-    reset = "reset",
-    submit = "submit"
-}
-
-declare enum IconSystemType {
-    arrowDown = "arrowDown",
-    arrowLeft = "arrowLeft",
-    arrowRight = "arrowRight",
-    arrowUp = "arrowUp",
-    arrowUpRight = "arrowUpRight",
-    bank = "bank",
-    checkmark = "checkmark",
-    chevronDown = "chevronDown",
-    chevronLeft = "chevronLeft",
-    chevronRight = "chevronRight",
-    chevronRightCircle = "chevronRightCircle",
-    chevronUp = "chevronUp",
-    close = "close",
-    crosshair = "crosshair",
-    download = "download",
-    event = "event",
-    fileText = "fileText",
-    logout = "logout",
-    map = "map",
-    minus = "minus",
-    pin = "pin",
-    plus = "plus",
-    plusCircle = "plusCircle",
-    refresh = "refresh",
-    search = "search",
-    share = "share",
-    spinner = "spinner",
-    trash = "trash",
-    unorderedList = "unorderedList",
-    uploadCloud = "uploadCloud"
-}
-declare enum IconSystemSize {
-    big = "big",
-    small = "small"
-}
-
-interface IconSystemProps {
-    ariaHidden?: boolean;
-    colorScheme?: ColorScheme;
-    fill?: string;
-    size: IconSystemSize;
-    stroke?: string;
-    type: IconSystemType;
-}
-declare const IconSystem: (props: IconSystemProps) => React__default.JSX.Element;
 
 declare enum MediaType {
     desktop = "desktop",
@@ -166,6 +61,21 @@ interface UseMediaTypeOptions {
  */
 declare const useMediaType: (param?: UseMediaTypeParam, options?: UseMediaTypeOptions) => MediaType;
 
+declare enum ColorScheme {
+    dark = "dark",
+    light = "light"
+}
+interface ColorObject<Dark extends string = string, Light extends string = string> {
+    dark: Dark;
+    light: Light;
+}
+type ChooseColor = <Dark extends string = string, Light extends string = string>(colorSchemeObject: ColorObject<Dark, Light>) => Dark | Light;
+type GetColor = <Dark extends string = string, Light extends string = string>(colorScheme: ColorScheme, colorSchemeObject: ColorObject<Dark, Light>) => Dark | Light;
+
+declare const useChooseColor: (colorScheme: ColorScheme) => ChooseColor;
+
+declare const getColor: GetColor;
+
 interface ColorSchemeProviderProps {
     children: ReactNode;
     colorScheme: ColorScheme;
@@ -239,6 +149,95 @@ interface FieldConfigProviderProps extends FieldConfig {
 declare const FieldConfigProvider: (props: FieldConfigProviderProps) => React__default.JSX.Element;
 declare const useFieldConfig: () => FieldConfig;
 
+interface AccordionProps extends DesignSystemBaseProps {
+    data: AccordionItemType[];
+    variant?: AccordionVariant;
+}
+declare const Accordion: (props: AccordionProps) => React__default.JSX.Element;
+
+interface AccordionItemProps extends AccordionItemType, DesignSystemBaseProps {
+    variant: AccordionVariant;
+}
+declare const AccordionItem: (props: AccordionItemProps) => React__default.JSX.Element;
+
+interface AccordionContentType extends DesignSystemBaseProps {
+    children: ReactNode;
+}
+declare const AccordionContent: (props: AccordionContentType) => React__default.JSX.Element;
+
+interface AccordionKeyValueProps extends DesignSystemBaseProps {
+    colorScheme?: ColorScheme;
+    label: ReactNode;
+    value: ReactNode;
+}
+declare const AccordionKeyValue: (props: AccordionKeyValueProps) => React__default.JSX.Element;
+
+declare enum ButtonStyle {
+    primary = "primary",
+    secondary = "secondary",
+    tertiary = "tertiary"
+}
+declare enum ButtonSize {
+    xs = "xs",
+    sm = "sm",
+    md = "md",
+    xl = "xl",
+    xxl = "xxl"
+}
+declare enum ButtonType {
+    anchor = "anchor",
+    button = "button",
+    reset = "reset",
+    submit = "submit"
+}
+
+declare enum IconSystemType {
+    arrowDown = "arrowDown",
+    arrowLeft = "arrowLeft",
+    arrowRight = "arrowRight",
+    arrowUp = "arrowUp",
+    arrowUpRight = "arrowUpRight",
+    bank = "bank",
+    checkmark = "checkmark",
+    chevronDown = "chevronDown",
+    chevronLeft = "chevronLeft",
+    chevronRight = "chevronRight",
+    chevronRightCircle = "chevronRightCircle",
+    chevronUp = "chevronUp",
+    close = "close",
+    crosshair = "crosshair",
+    download = "download",
+    event = "event",
+    fileText = "fileText",
+    logout = "logout",
+    map = "map",
+    minus = "minus",
+    pin = "pin",
+    plus = "plus",
+    plusCircle = "plusCircle",
+    refresh = "refresh",
+    search = "search",
+    share = "share",
+    spinner = "spinner",
+    trash = "trash",
+    unorderedList = "unorderedList",
+    uploadCloud = "uploadCloud"
+}
+declare enum IconSystemSize {
+    big = "big",
+    small = "small"
+}
+
+interface IconSystemProps {
+    ariaHidden?: boolean;
+    colorScheme?: ColorScheme;
+    fill?: string;
+    size: IconSystemSize;
+    stroke?: string;
+    type: IconSystemType;
+}
+declare const IconSystem: (props: IconSystemProps) => React__default.JSX.Element;
+
 type MessageValues = Record<string, FormatXMLElementFn<ReactNode, ReactNode> | PrimitiveType | ReactNode>;
 type PrimitiveMessageValues = Record<string, PrimitiveType>;
 
@@ -285,646 +284,34 @@ interface ButtonProps extends SsrProps, DesignSystemBaseProps {
 }
 declare const Button: (props: ButtonProps) => React__default.JSX.Element;
 
-interface SpanButtonProps extends DesignSystemBaseProps {
-    ariaDisabled?: boolean;
-    ariaLabel?: string;
-    children?: ReactNode;
-    className?: string;
-    disabled?: boolean;
-    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
-    onMouseDown?: (event: MouseEvent<HTMLButtonElement>) => void;
-    onMouseUp?: (event: MouseEvent<HTMLButtonElement>) => void;
-    onTouchStart?: (event: TouchEvent<HTMLButtonElement>) => void;
+declare enum Spacing {
+    none = "none",
+    xxs = "xxs",
+    xs = "xs",
+    sm = "sm",
+    md = "md",
+    lg = "lg",
+    xl = "xl",
+    xxl = "xxl",
+    xxxl = "xxxl",
+    xxxxl = "xxxxl",
+    xxxxxl = "xxxxxl"
 }
-declare const SpanButton: (props: SpanButtonProps) => React__default.JSX.Element;
+declare const resolveSpacingValue: (theme: DefaultTheme, spacing: Spacing) => "0" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "48px" | "56px" | "64px";
 
-interface SliderBreakpoint {
-    readonly bottomBreakpoint: number;
-    readonly step: number;
-}
-interface SliderSteps {
-    readonly baseStep: number;
-    readonly breakpointList: SliderBreakpoint[];
-}
-declare enum SliderStepType {
-    visuallyLinearByValue = "visuallyLinearByValue",// step changes dynamically (visually steps are of different sizes)
-    visuallySameStepSize = "visuallySameStepSize"
-}
-interface MinMaxLabels {
-    readonly max: ReactElement | string;
-    readonly min: ReactElement | string;
+declare enum FontWeight {
+    thin100 = "thin",
+    extraLight200 = "extraLight",
+    light300 = "light",
+    regular400 = "regular",
+    medium500 = "medium",
+    semiBold600 = "semiBold",
+    bold700 = "bold",
+    extraBold800 = "extraBold",
+    heavy900 = "heavy",
+    ultra950 = "ultra"
 }
-
-interface SliderProps extends DesignSystemBaseProps {
-    ariaLabelForHandle?: string[] | string;
-    ariaLabelledByForHandle?: string[] | string;
-    ariaValueTextFormatterForHandle?: ((value: number) => string)[] | ((value: number) => string);
-    disable?: boolean | undefined;
-    max: number;
-    min: number;
-    minMaxLabels: MinMaxLabels | undefined;
-    onChange: (value: number) => void;
-    onFinalChange: (value: number) => void;
-    stepType: SliderStepType;
-    steps: SliderSteps;
-    value: number;
-}
-declare const Slider: (props: SliderProps) => React__default.JSX.Element;
-
-interface ErrorBoxItem {
-    body: ReactElement | string;
-    onClick?: () => void;
-}
-
-interface ErrorBoxProps {
-    colorScheme: ColorScheme;
-    content?: ReactElement | string;
-    items?: ErrorBoxItem[];
-    tabIndex?: number;
-    title?: ReactElement | string;
-}
-declare const ErrorBox: React__default.ForwardRefExoticComponent<ErrorBoxProps & React__default.RefAttributes<HTMLDivElement>>;
-
-declare enum InfoboxVariant {
-    primary = "primary",
-    secondary = "secondary"
-}
-declare enum InfoboxSize {
-    md = "md",
-    sm = "sm",
-    xs = "xs"
-}
-interface InfoboxTextContent {
-    primary: ReactElement | string;
-    secondary?: ReactElement | string;
-}
-
-declare enum IconProductType {
-    atm = "atm",
-    bank = "bank",
-    billingPayment = "billingPayment",
-    check = "check",
-    creditCard = "creditCard",
-    helpChat = "helpChat",
-    information = "information",
-    mailCheck = "mailCheck",
-    mobilePhone = "mobilePhone",
-    moneta = "moneta",
-    passwordLock = "passwordLock",
-    reward = "reward",
-    suitcase = "suitcase",
-    warningCircle = "warningCircle",
-    warningTriangle = "warningTriangle"
-}
-declare enum IconProductSize {
-    big = "big",
-    small = "small"
-}
-declare enum IconProductVariant {
-    active = "active",
-    default = "default"
-}
-
-interface IconProductProps {
-    colorScheme?: ColorScheme;
-    fill?: string;
-    size: IconProductSize;
-    stroke?: string;
-    type: IconProductType;
-    variant?: IconProductVariant | undefined;
-}
-declare const IconProduct: (props: IconProductProps) => React__default.JSX.Element;
-
-interface InfoboxProps {
-    /** Cannot be used alongside `children`. */
-    actionNode?: ReactNode;
-    children?: ReactNode;
-    colorScheme: ColorScheme;
-    fullWidth?: boolean;
-    iconProduct?: IconProductType;
-    isWarning?: boolean;
-    mediaType: MediaType;
-    size: InfoboxSize;
-    /** Cannot be used alongside `children`. */
-    textContent?: InfoboxTextContent;
-    variant: InfoboxVariant;
-}
-declare const Infobox: (props: InfoboxProps) => React__default.JSX.Element;
-
-declare enum TableVariant {
-    exchange = "exchange",
-    simple = "simple",
-    simpleWithoutShadow = "simpleWithoutShadow"
-}
-declare enum TableTextAlign {
-    center = "center",
-    left = "left",
-    right = "right"
-}
-
-interface TableProps {
-    children: ReactNode;
-    variant: TableVariant;
-    width?: Property.Width;
-}
-declare const Table: (props: TableProps) => React__default.JSX.Element;
-
-interface TableBodyProps {
-    children: ReactNode;
-}
-declare const TableBody: (props: TableBodyProps) => React__default.JSX.Element;
-
-interface TableDataProps extends DesignSystemBaseProps {
-    children: ReactNode;
-    delimiter?: boolean;
-    textAlign?: TableTextAlign;
-    variant: TableVariant;
-}
-declare const TableData: (props: TableDataProps) => React__default.JSX.Element;
-
-interface TableHeadProps {
-    children: ReactNode;
-}
-declare const TableHead: (props: TableHeadProps) => React__default.JSX.Element;
-
-interface TableHeadDataProps extends DesignSystemBaseProps {
-    children: ReactNode;
-    delimiter?: boolean;
-    textAlign?: TableTextAlign;
-    variant: TableVariant;
-    width?: Property.Width;
-}
-declare const TableHeadData: (props: TableHeadDataProps) => React__default.JSX.Element;
-
-interface TableRowProps extends DesignSystemBaseProps {
-    children: ReactNode;
-    variant: TableVariant;
-}
-declare const TableRow: (props: TableRowProps) => React__default.JSX.Element;
-
-declare enum TabsVariant {
-    primary = "primary",
-    secondary = "secondary",
-    tertiary = "tertiary"
-}
-declare enum TabsSize {
-    lg = "lg",
-    md = "md",
-    sm = "sm",
-    xs = "xs"
-}
-declare enum TabsActiveTabDefaultPosition {
-    center = "center",
-    noScrolling = "noScrolling",
-    scrollOnlyWhenNotVisible = "scrollOnlyWhenNotVisible"
-}
-interface TabItemType {
-    ariaControls?: string;
-    icon?: ReactNode;
-    id: string;
-    isActive?: boolean;
-    onActivate?: () => void;
-    text?: ReactElement | string;
-}
-interface TabsType {
-    activeTabDefaultPosition: TabsActiveTabDefaultPosition;
-    fullWidth?: boolean;
-    size?: TabsSize;
-    tabItems: TabItemType[];
-    variant: TabsVariant;
-}
-
-interface TabsItemProps extends Omit<TabItemType, 'onActivate'>, DesignSystemBaseProps {
-    fullWidth?: boolean;
-    htmlRef?: RefObject<HTMLButtonElement> | ((instance: HTMLButtonElement | null) => void);
-    onClick?: MouseEventHandler<HTMLButtonElement> | undefined;
-    onKeyDown?: KeyboardEventHandler<HTMLButtonElement> | undefined;
-    size?: TabsSize;
-    variant: TabsVariant;
-}
-declare const TabsItem: (props: TabsItemProps) => React__default.JSX.Element;
-
-interface TabsProps extends TabsType, DesignSystemBaseProps {
-}
-/**
- * This component implements accessibility for tabs according to W3C WAI-ARIA guidelines.
- * To ensure proper functionality, tab panels must also be described using ARIA attributes.
- *
- * More info: https://www.w3.org/WAI/ARIA/apg/patterns/tabs/examples/tabs-manual/
- */
-declare const Tabs: (props: TabsProps) => React__default.JSX.Element;
-
-type ModalOnClose = (reasonForClosing: ReasonForClosing) => void;
-declare enum ModalWidthType {
-    default = "default",
-    narrow = "narrow",// on desktop
-    narrowOnDesktopAndTablet = "narrowOnDesktopAndTablet"
-}
-declare enum ModalVerticalPosition {
-    centerOnTablet = "centerOnTablet",
-    default = "default"
-}
-declare enum ReasonForClosing {
-    closeButton = "closeButton",
-    esc = "esc",
-    overlay = "overlay"
-}
-
-interface ModalProps extends DesignSystemBaseProps {
-    children: ReactElement | string;
-    className?: string;
-    closeButtonAriaLabel?: string;
-    hideCloseButton: boolean;
-    id?: string;
-    isOpen: boolean;
-    onClose: ModalOnClose;
-    /** string for document.getElementById */
-    rootElement?: Element | string;
-    title?: ReactElement | string;
-    verticalPosition?: ModalVerticalPosition;
-    widthType?: ModalWidthType | undefined;
-    withoutPadding?: boolean;
-}
-declare const Modal: (props: ModalProps) => React__default.ReactPortal | null;
-
-type TooltipRenderParent = (getParentProps: (userProps?: HTMLProps<Element>) => Record<string, unknown>) => ReactElement;
-declare enum TooltipPlacement {
-    bottom = "bottom",
-    left = "left",
-    right = "right",
-    top = "top"
-}
-interface TooltipDescriptor {
-    body: ReactElement | string;
-    closeButtonAriaLabel?: string;
-    title?: ReactElement | string;
-}
-interface TooltipInfoDescriptor extends TooltipDescriptor {
-    triggerAriaLabel?: string;
-}
-declare enum TooltipInfoDisplayMethod {
-    onlyTooltip = "onlyTooltip",
-    withNbsp = "withNbsp"
-}
-interface TooltipDelays {
-    /** ms */
-    closeDelay?: number;
-    /** ms */
-    openDelay?: number;
-}
-interface BaseTooltipInfoProps {
-    triggerAriaLabel?: string;
-}
-
-interface TooltipInfoDisplayableCheckProps extends DesignSystemBaseProps {
-    body: MessageDescriptorWithPrimitiveValues;
-    closeButtonAriaLabel?: MessageDescriptorWithPrimitiveValues;
-    displayMethod: TooltipInfoDisplayMethod;
-    title?: MessageDescriptorWithPrimitiveValues;
-    triggerAriaLabel?: MessageDescriptorWithPrimitiveValues;
-}
-declare const TooltipInfoDisplayableCheck: (props: TooltipInfoDisplayableCheckProps) => React__default.JSX.Element | null;
-
-interface TooltipInfoConditionalProps extends DesignSystemBaseProps, BaseTooltipInfoProps {
-    displayMethod: TooltipInfoDisplayMethod;
-    floatingElement?: Partial<TooltipDescriptor>;
-}
-declare const TooltipInfoConditional: (props: TooltipInfoConditionalProps) => React__default.JSX.Element | null;
-
-interface CreateTooltipInfoDescriptorParam {
-    body: MessageDescriptorWithPrimitiveValues;
-    closeButtonAriaLabel?: MessageDescriptorWithPrimitiveValues;
-    title?: MessageDescriptorWithPrimitiveValues;
-    triggerAriaLabel?: MessageDescriptorWithPrimitiveValues;
-}
-type CreateTooltipInfoDescriptor = (param: CreateTooltipInfoDescriptorParam) => TooltipInfoDescriptor | undefined;
-declare const useCreateTooltipInfoDescriptor: () => CreateTooltipInfoDescriptor;
-
-interface TooltipInfoProps extends DesignSystemBaseProps, TooltipDelays, BaseTooltipInfoProps {
-    floatingElement: TooltipDescriptor;
-}
-declare const TooltipInfo: (props: TooltipInfoProps) => React__default.JSX.Element;
-
-interface TooltipGeneralProps extends DesignSystemBaseProps, TooltipDelays {
-    floatingElement: TooltipDescriptor;
-    onClose?: (() => void) | undefined;
-    onOpen?: (() => void) | undefined;
-    placement?: TooltipPlacement | undefined;
-    portalRootElement?: HTMLElement | React__default.MutableRefObject<HTMLElement | null> | null;
-    renderParent: TooltipRenderParent;
-}
-declare const TooltipGeneral: (props: TooltipGeneralProps) => React__default.JSX.Element;
-
-interface CalculatorResultHeader {
-    bottom?: ReactElement | string | undefined;
-    main?: ReactElement | string | undefined;
-    top?: ReactElement | string | undefined;
-    topTooltip?: TooltipInfoDescriptor;
-}
-interface CalculatorResultBodyItem {
-    left: {
-        element: ReactElement | string;
-        tooltip?: TooltipInfoDescriptor;
-    };
-    right: {
-        element: ReactElement | string;
-    };
-}
-interface CalculatorResultMain {
-    element: ReactElement | string;
-    topSeparator?: boolean;
-}
-interface CalculatorResultModalDescriptor {
-    content: ReactElement | string;
-    modalCloseButtonAriaLabel?: string;
-    triggerText: ReactElement | string;
-}
-declare enum CalculatorResultInfoPosition {
-    inBox = "inBox",
-    underBox = "underBox"
-}
-
-interface CalculatorResultProps extends DesignSystemBaseProps {
-    bodyItems: CalculatorResultBodyItem[];
-    containerRef?: RefObject<HTMLDivElement>;
-    description?: ReactElement | string;
-    header: CalculatorResultHeader;
-    infoPosition?: CalculatorResultInfoPosition;
-    main: CalculatorResultMain;
-    modal?: CalculatorResultModalDescriptor;
-    resultBoxRef?: RefObject<HTMLDivElement>;
-}
-declare const CalculatorResult: (props: CalculatorResultProps) => React__default.JSX.Element;
-
-declare enum LoaderSize {
-    lg = "lg",
-    sm = "sm"
-}
-interface LoaderProps {
-    colorScheme: ColorScheme;
-    loaderSize: LoaderSize;
-}
-
-declare const Loader: React__default.FC<LoaderProps>;
-
-interface LoaderOverlayBoxProps {
-    colorScheme: ColorScheme;
-    loaderSize: LoaderSize;
-}
-
-declare const LoaderOverlayBox: React__default.FC<LoaderOverlayBoxProps>;
-
-interface FormattedPercentageProps {
-    readonly maximumFractionDigits?: number;
-    readonly minimumFractionDigits?: number;
-    readonly value: number;
-}
-
-declare const _default: React__default.NamedExoticComponent<FormattedPercentageProps>;
-
-interface UseFormatPercentageTypeParam {
-    maximumFractionDigits?: number;
-    minimumFractionDigits?: number;
-    value: number;
-}
-type UseFormatPercentage = (param: UseFormatPercentageTypeParam) => string;
-declare const useFormattedPercentage: () => UseFormatPercentage;
-
-declare enum FormatAmountCurrencyDisplay {
-    code = "code",
-    name = "name",
-    none = "none",
-    symbol = "symbol"
-}
-declare enum FormatAmountGrouping {
-    always = "always",
-    auto = "auto",
-    none = "none"
-}
-
-interface UseFormatAmountParam {
-    currency?: string;
-    currencyDisplay?: FormatAmountCurrencyDisplay;
-    grouping?: FormatAmountGrouping;
-    maximumFractionDigits?: number;
-    minimumFractionDigits?: number;
-    value: number;
-}
-type UseFormatAmountType = (param: UseFormatAmountParam) => string;
-declare const useFormatAmount: () => UseFormatAmountType;
-
-interface FormattedAmountProps {
-    currency?: string;
-    currencyDisplay?: FormatAmountCurrencyDisplay;
-    grouping?: FormatAmountGrouping;
-    maximumFractionDigits?: number;
-    minimumFractionDigits?: number;
-    value: number;
-}
-/**
- * displays formatted amount with currency and formatting options
- * it includes an accessibility-friendly version without grouping for screen readers
- * if the formatted amount with and without grouping is the same, only one version is displayed
- */
-declare const FormattedAmount: (props: FormattedAmountProps) => React__default.JSX.Element;
-
-interface CheckboxBaseProps extends RefAttributes<HTMLInputElement> {
-    readonly checked?: boolean | undefined;
-    readonly colorScheme?: ColorScheme;
-    readonly disabled?: boolean | undefined;
-    readonly id?: string | undefined;
-    readonly isError?: boolean | undefined;
-    readonly name: string;
-    readonly onBlur?: ((event: React__default.FocusEvent<HTMLInputElement>) => void) | undefined;
-    readonly onChange?: ((event: React__default.ChangeEvent<HTMLInputElement>) => void) | undefined;
-    readonly value?: string;
-}
-
-declare enum CheckboxPosition {
-    left = "left",
-    right = "right"
-}
-interface CheckboxLabel {
-    readonly label: React__default.ReactElement | string;
-    readonly tooltip?: TooltipInfoDescriptor | undefined;
-}
-interface CheckboxProps extends CheckboxBaseProps {
-    readonly colorScheme?: ColorScheme;
-    readonly errorMessage?: React__default.ReactElement | string | undefined;
-    readonly label?: CheckboxLabel | undefined;
-    readonly labelColor?: string | undefined;
-    readonly position?: CheckboxPosition | undefined;
-}
-
-declare const Checkbox: React__default.FC<CheckboxProps>;
-
-interface FieldControlProps extends DesignSystemBaseProps {
-    describedBy?: string;
-    id?: string;
-    invalid?: boolean;
-    labelledBy?: string;
-    name?: string;
-    required?: boolean;
-}
-declare enum FieldRequirement {
-    optional = "optional",
-    optionalWithoutLabelSuffix = "optionalWithoutLabelSuffix",
-    required = "required"
-}
-
-declare enum InputSize {
-    md = "md",
-    xl = "xl"
-}
-declare enum InputTextAlign {
-    center = "center",
-    left = "left",
-    right = "right"
-}
-declare enum FieldWrapperLayout {
-    horizontal = "horizontal",
-    vertical = "vertical"
-}
-interface InputProps extends FieldControlProps {
-    ariaLabel?: string;
-    autoComplete?: HTMLInputAutoCompleteAttribute;
-    colorInput?: Property.Color | undefined;
-    disabled?: boolean;
-    halfWidth?: boolean;
-    maxLength?: number;
-    name: string;
-    onBlur?: ((event: FocusEvent<HTMLInputElement>) => void) | undefined;
-    onChange?: ((event: ChangeEvent<HTMLInputElement>) => void) | undefined;
-    size: InputSize;
-    value?: string;
-}
-
-type FieldWrapperControlProps = Required<Pick<FieldControlProps, 'describedBy' | 'id' | 'invalid' | 'labelledBy' | 'required'>>;
-declare enum FieldControlAddonPosition {
-    afterControl = "afterControl",
-    beforeControl = "beforeControl",
-    bottom = "bottom"
-}
-interface FieldControlAddon {
-    children: ReactNode;
-    key: React__default.Key;
-    position: FieldControlAddonPosition;
-}
-interface FieldWrapperProps extends DesignSystemBaseProps {
-    children?: ReactNode | ((controlProps: FieldWrapperControlProps) => ReactNode);
-    /** @deprecated Use `controlSectionWidth` instead. */
-    childrenWidth?: Property.Width;
-    controlAddons?: FieldControlAddon[];
-    controlId?: string;
-    controlMobileWidth?: Property.Width;
-    /** `controlSection` represents the right section in horizontal layout. */
-    controlSectionWidth?: Property.Width;
-    controlWidth?: Property.Width;
-    errorMessage?: ReactNode;
-    /** @default FieldRequirement.required */
-    fieldRequirement?: FieldRequirement;
-    /** @deprecated Use `invalid` instead. */
-    hasError?: boolean;
-    hintText?: ReactNode;
-    /** @deprecated Use `controlId` instead. */
-    id?: string;
-    /** @default isRenderable(errorMessage) */
-    invalid?: boolean;
-    label?: ReactNode;
-    labelAs?: WebTarget;
-    labelId?: string;
-    labelSuffix?: ReactNode;
-    layout?: FieldWrapperLayout;
-    /** Necessary for registration of `label` to `FieldLabelStore`. */
-    name?: string;
-    note?: ReactNode;
-    successMessage?: ReactNode;
-    tooltip?: TooltipInfoDescriptor;
-}
-/** @deprecated Use `FieldWrapperProps` or `ComponentProps<typeof YourWrappedComponent>`  instead. */
-type FieldWrapperValues = Omit<FieldWrapperProps, 'children'>;
-declare const FieldWrapper: (props: FieldWrapperProps) => React__default.JSX.Element;
-
-type WithFieldWrapperProps = Omit<FieldWrapperProps, 'children' | 'controlId' | 'id'>;
-declare const withFieldWrapper: <TProps extends FieldControlProps, TElement extends HTMLElement>(FieldControl: ComponentType<TProps>) => React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<TProps & WithFieldWrapperProps> & React__default.RefAttributes<TElement>>;
-
-interface RadioGeneralProps extends RefAttributes<HTMLInputElement> {
-    readonly checked?: boolean;
-    readonly disabled?: boolean;
-    readonly id?: string | undefined;
-    readonly invalid?: boolean | undefined;
-    readonly name: string;
-    readonly onBlur?: ((event: React__default.FocusEvent<HTMLInputElement>) => void) | undefined;
-    readonly onChange?: ((event: React__default.ChangeEvent<HTMLInputElement>) => void) | undefined;
-    readonly value: string;
-}
-
-interface RadioBaseProps extends DesignSystemBaseProps, RadioGeneralProps {
-}
-declare const RadioBase: React__default.FC<RadioBaseProps>;
-
-interface RadioLabel {
-    readonly label: ReactElement | string;
-    readonly tooltip?: TooltipInfoDescriptor;
-}
-declare enum RadioPosition {
-    left = "left",
-    right = "right"
-}
-
-interface RadioProps extends RadioGeneralProps, DesignSystemBaseProps {
-    errorMessage?: ReactElement | string | undefined;
-    label?: RadioLabel | undefined;
-    position?: RadioPosition | undefined;
-}
-declare const Radio: React__default.FC<RadioProps>;
-
-interface RadioFieldProps extends Omit<RadioProps, 'onChange'> {
-    name: string;
-    options?: RegisterOptions;
-}
-declare const RadioField: (props: RadioFieldProps) => React__default.JSX.Element;
-
-interface RadioGroupItem {
-    id?: string;
-    label: RadioLabel;
-    value: string;
-}
-declare enum RadioGroupDirection {
-    column = "column",
-    columnReverse = "columnReverse",
-    row = "row",
-    rowReverse = "rowReverse"
-}
-
-declare enum Spacing {
-    none = "none",
-    xxs = "xxs",
-    xs = "xs",
-    sm = "sm",
-    md = "md",
-    lg = "lg",
-    xl = "xl",
-    xxl = "xxl",
-    xxxl = "xxxl",
-    xxxxl = "xxxxl",
-    xxxxxl = "xxxxxl"
-}
-declare const resolveSpacingValue: (theme: DefaultTheme, spacing: Spacing) => "0" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "48px" | "56px" | "64px";
-
-declare enum FontWeight {
-    thin100 = "thin",
-    extraLight200 = "extraLight",
-    light300 = "light",
-    regular400 = "regular",
-    medium500 = "medium",
-    semiBold600 = "semiBold",
-    bold700 = "bold",
-    extraBold800 = "extraBold",
-    heavy900 = "heavy",
-    ultra950 = "ultra"
-}
-declare const resolveFontWeightValue: (theme: DefaultTheme, fontWeight: FontWeight) => 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950;
+declare const resolveFontWeightValue: (theme: DefaultTheme, fontWeight: FontWeight) => 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950;
 
 declare const theme: {
     readonly palette: {
@@ -1456,27 +843,654 @@ declare const theme: {
         readonly xl: "1280px";
         readonly xxl: "1920px";
     };
-    readonly zIndex: {
-        readonly dropdown: 1000;
-        readonly sticky: 1020;
-        readonly fixed: 1030;
-        readonly modalBackdrop: 1040;
-        readonly offcanvas: 1050;
-        readonly modal: 1060;
-        readonly popover: 1070;
-        readonly tooltip: 1080;
+    readonly zIndex: {
+        readonly dropdown: 1000;
+        readonly sticky: 1020;
+        readonly fixed: 1030;
+        readonly modalBackdrop: 1040;
+        readonly offcanvas: 1050;
+        readonly modal: 1060;
+        readonly popover: 1070;
+        readonly tooltip: 1080;
+    };
+};
+type Theme = typeof theme;
+
+declare enum Overflow {
+    auto = "auto",
+    clip = "clip",
+    hidden = "hidden",
+    inherit = "inherit",
+    visible = "visible"
+}
+declare const resolveOverflowValue: (overflow: Overflow) => string;
+
+declare enum BorderRadius {
+    none = "none",
+    xxs = "xxs",
+    xs = "xs",
+    sm = "sm",
+    md = "md",
+    lg = "lg",
+    xl = "xl",
+    full = "full"
+}
+declare const resolveBorderRadiusValue: (theme: DefaultTheme, borderRadius: BorderRadius) => "0" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "9999px";
+
+interface SpanButtonProps extends DesignSystemBaseProps, AriaAttributes {
+    borderRadius?: BorderRadius;
+    children?: ReactNode;
+    className?: string;
+    disabled?: boolean;
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    onMouseDown?: (event: MouseEvent<HTMLButtonElement>) => void;
+    onMouseUp?: (event: MouseEvent<HTMLButtonElement>) => void;
+    onTouchStart?: (event: TouchEvent<HTMLButtonElement>) => void;
+}
+declare const SpanButton: (props: SpanButtonProps) => React__default.JSX.Element;
+
+interface SliderBreakpoint {
+    readonly bottomBreakpoint: number;
+    readonly step: number;
+}
+interface SliderSteps {
+    readonly baseStep: number;
+    readonly breakpointList: SliderBreakpoint[];
+}
+declare enum SliderStepType {
+    visuallyLinearByValue = "visuallyLinearByValue",// step changes dynamically (visually steps are of different sizes)
+    visuallySameStepSize = "visuallySameStepSize"
+}
+interface MinMaxLabels {
+    readonly max: ReactElement | string;
+    readonly min: ReactElement | string;
+}
+
+interface SliderProps extends DesignSystemBaseProps {
+    ariaLabelForHandle?: string[] | string;
+    ariaLabelledByForHandle?: string[] | string;
+    ariaValueTextFormatterForHandle?: ((value: number) => string)[] | ((value: number) => string);
+    disable?: boolean | undefined;
+    max: number;
+    min: number;
+    minMaxLabels: MinMaxLabels | undefined;
+    onChange: (value: number) => void;
+    onFinalChange: (value: number) => void;
+    stepType: SliderStepType;
+    steps: SliderSteps;
+    value: number;
+}
+declare const Slider: (props: SliderProps) => React__default.JSX.Element;
+
+interface ErrorBoxItem {
+    body: ReactElement | string;
+    onClick?: () => void;
+}
+
+interface ErrorBoxProps {
+    colorScheme: ColorScheme;
+    content?: ReactElement | string;
+    items?: ErrorBoxItem[];
+    tabIndex?: number;
+    title?: ReactElement | string;
+}
+declare const ErrorBox: React__default.ForwardRefExoticComponent<ErrorBoxProps & React__default.RefAttributes<HTMLDivElement>>;
+
+declare enum InfoboxVariant {
+    primary = "primary",
+    secondary = "secondary"
+}
+declare enum InfoboxSize {
+    md = "md",
+    sm = "sm",
+    xs = "xs"
+}
+interface InfoboxTextContent {
+    primary: ReactElement | string;
+    secondary?: ReactElement | string;
+}
+
+declare enum IconProductType {
+    atm = "atm",
+    bank = "bank",
+    bill = "bill",
+    billingPayment = "billingPayment",
+    check = "check",
+    creditCard = "creditCard",
+    helpChat = "helpChat",
+    information = "information",
+    mailCheck = "mailCheck",
+    mobilePhone = "mobilePhone",
+    moneta = "moneta",
+    passwordLock = "passwordLock",
+    piggyBank = "piggyBank",
+    reward = "reward",
+    suitcase = "suitcase",
+    user = "user",
+    userAddPlus = "userAddPlus",
+    warningCircle = "warningCircle",
+    warningTriangle = "warningTriangle"
+}
+declare enum IconProductSize {
+    big = "big",
+    small = "small"
+}
+declare enum IconProductVariant {
+    active = "active",
+    default = "default"
+}
+
+interface IconProductProps {
+    colorScheme?: ColorScheme;
+    fill?: string;
+    size: IconProductSize;
+    stroke?: string;
+    type: IconProductType;
+    variant?: IconProductVariant | undefined;
+}
+declare const IconProduct: (props: IconProductProps) => React__default.JSX.Element;
+
+interface InfoboxProps {
+    /** Cannot be used alongside `children`. */
+    actionNode?: ReactNode;
+    children?: ReactNode;
+    colorScheme: ColorScheme;
+    fullWidth?: boolean;
+    iconProduct?: IconProductType;
+    isWarning?: boolean;
+    mediaType: MediaType;
+    size: InfoboxSize;
+    /** Cannot be used alongside `children`. */
+    textContent?: InfoboxTextContent;
+    variant: InfoboxVariant;
+}
+declare const Infobox: (props: InfoboxProps) => React__default.JSX.Element;
+
+declare enum TableVariant {
+    exchange = "exchange",
+    simple = "simple",
+    simpleWithoutShadow = "simpleWithoutShadow"
+}
+declare enum TableTextAlign {
+    center = "center",
+    left = "left",
+    right = "right"
+}
+
+interface TableProps {
+    children: ReactNode;
+    variant: TableVariant;
+    width?: Property.Width;
+}
+declare const Table: (props: TableProps) => React__default.JSX.Element;
+
+interface TableBodyProps {
+    children: ReactNode;
+}
+declare const TableBody: (props: TableBodyProps) => React__default.JSX.Element;
+
+interface TableDataProps extends DesignSystemBaseProps {
+    children: ReactNode;
+    delimiter?: boolean;
+    textAlign?: TableTextAlign;
+    variant: TableVariant;
+}
+declare const TableData: (props: TableDataProps) => React__default.JSX.Element;
+
+interface TableHeadProps {
+    children: ReactNode;
+}
+declare const TableHead: (props: TableHeadProps) => React__default.JSX.Element;
+
+interface TableHeadDataProps extends DesignSystemBaseProps {
+    children: ReactNode;
+    delimiter?: boolean;
+    textAlign?: TableTextAlign;
+    variant: TableVariant;
+    width?: Property.Width;
+}
+declare const TableHeadData: (props: TableHeadDataProps) => React__default.JSX.Element;
+
+interface TableRowProps extends DesignSystemBaseProps {
+    children: ReactNode;
+    variant: TableVariant;
+}
+declare const TableRow: (props: TableRowProps) => React__default.JSX.Element;
+
+declare enum TabsVariant {
+    primary = "primary",
+    secondary = "secondary",
+    tertiary = "tertiary"
+}
+declare enum TabsSize {
+    lg = "lg",
+    md = "md",
+    sm = "sm",
+    xs = "xs"
+}
+declare enum TabsActiveTabDefaultPosition {
+    center = "center",
+    noScrolling = "noScrolling",
+    scrollOnlyWhenNotVisible = "scrollOnlyWhenNotVisible"
+}
+interface TabItemType {
+    ariaControls?: string;
+    icon?: ReactNode;
+    id: string;
+    isActive?: boolean;
+    onActivate?: () => void;
+    text?: ReactElement | string;
+}
+interface TabsType {
+    activeTabDefaultPosition: TabsActiveTabDefaultPosition;
+    fullWidth?: boolean;
+    size?: TabsSize;
+    tabItems: TabItemType[];
+    variant: TabsVariant;
+}
+
+interface TabsItemProps extends Omit<TabItemType, 'onActivate'>, DesignSystemBaseProps {
+    fullWidth?: boolean;
+    htmlRef?: RefObject<HTMLButtonElement> | ((instance: HTMLButtonElement | null) => void);
+    onClick?: MouseEventHandler<HTMLButtonElement> | undefined;
+    onKeyDown?: KeyboardEventHandler<HTMLButtonElement> | undefined;
+    size?: TabsSize;
+    variant: TabsVariant;
+}
+declare const TabsItem: (props: TabsItemProps) => React__default.JSX.Element;
+
+interface TabsProps extends TabsType, DesignSystemBaseProps {
+}
+/**
+ * This component implements accessibility for tabs according to W3C WAI-ARIA guidelines.
+ * To ensure proper functionality, tab panels must also be described using ARIA attributes.
+ *
+ * More info: https://www.w3.org/WAI/ARIA/apg/patterns/tabs/examples/tabs-manual/
+ */
+declare const Tabs: (props: TabsProps) => React__default.JSX.Element;
+
+type ModalOnClose = (reasonForClosing: ReasonForClosing) => void;
+declare enum ModalWidthType {
+    default = "default",
+    narrow = "narrow",// on desktop
+    narrowOnDesktopAndTablet = "narrowOnDesktopAndTablet"
+}
+declare enum ModalVerticalPosition {
+    centerOnTablet = "centerOnTablet",
+    default = "default"
+}
+declare enum ReasonForClosing {
+    closeButton = "closeButton",
+    esc = "esc",
+    overlay = "overlay"
+}
+
+interface ModalProps extends DesignSystemBaseProps {
+    children: ReactElement | string;
+    className?: string;
+    closeButtonAriaLabel?: string;
+    hideCloseButton: boolean;
+    id?: string;
+    isOpen: boolean;
+    onClose: ModalOnClose;
+    /** string for document.getElementById */
+    rootElement?: Element | string;
+    title?: ReactElement | string;
+    verticalPosition?: ModalVerticalPosition;
+    widthType?: ModalWidthType | undefined;
+    withoutPadding?: boolean;
+}
+declare const Modal: (props: ModalProps) => React__default.ReactPortal | null;
+
+type TooltipRenderParent = (getParentProps: (userProps?: HTMLProps<Element>) => Record<string, unknown>) => ReactElement;
+declare enum TooltipPlacement {
+    bottom = "bottom",
+    left = "left",
+    right = "right",
+    top = "top"
+}
+interface TooltipDescriptor {
+    body: ReactElement | string;
+    closeButtonAriaLabel?: string;
+    title?: ReactElement | string;
+}
+interface TooltipInfoDescriptor extends TooltipDescriptor {
+    triggerAriaLabel?: string;
+}
+declare enum TooltipInfoDisplayMethod {
+    onlyTooltip = "onlyTooltip",
+    withNbsp = "withNbsp"
+}
+interface TooltipDelays {
+    /** ms */
+    closeDelay?: number;
+    /** ms */
+    openDelay?: number;
+}
+interface BaseTooltipInfoProps {
+    triggerAriaLabel?: string;
+}
+
+interface TooltipInfoDisplayableCheckProps extends DesignSystemBaseProps {
+    body: MessageDescriptorWithPrimitiveValues;
+    closeButtonAriaLabel?: MessageDescriptorWithPrimitiveValues;
+    displayMethod: TooltipInfoDisplayMethod;
+    title?: MessageDescriptorWithPrimitiveValues;
+    triggerAriaLabel?: MessageDescriptorWithPrimitiveValues;
+}
+declare const TooltipInfoDisplayableCheck: (props: TooltipInfoDisplayableCheckProps) => React__default.JSX.Element | null;
+
+interface TooltipInfoConditionalProps extends DesignSystemBaseProps, BaseTooltipInfoProps {
+    displayMethod: TooltipInfoDisplayMethod;
+    floatingElement?: Partial<TooltipDescriptor>;
+}
+declare const TooltipInfoConditional: (props: TooltipInfoConditionalProps) => React__default.JSX.Element | null;
+
+interface CreateTooltipInfoDescriptorParam {
+    body: MessageDescriptorWithPrimitiveValues;
+    closeButtonAriaLabel?: MessageDescriptorWithPrimitiveValues;
+    title?: MessageDescriptorWithPrimitiveValues;
+    triggerAriaLabel?: MessageDescriptorWithPrimitiveValues;
+}
+type CreateTooltipInfoDescriptor = (param: CreateTooltipInfoDescriptorParam) => TooltipInfoDescriptor | undefined;
+declare const useCreateTooltipInfoDescriptor: () => CreateTooltipInfoDescriptor;
+
+interface TooltipInfoProps extends DesignSystemBaseProps, TooltipDelays, BaseTooltipInfoProps {
+    floatingElement: TooltipDescriptor;
+}
+declare const TooltipInfo: (props: TooltipInfoProps) => React__default.JSX.Element;
+
+interface TooltipGeneralProps extends DesignSystemBaseProps, TooltipDelays {
+    floatingElement: TooltipDescriptor;
+    onClose?: (() => void) | undefined;
+    onOpen?: (() => void) | undefined;
+    placement?: TooltipPlacement | undefined;
+    portalRootElement?: HTMLElement | React__default.MutableRefObject<HTMLElement | null> | null;
+    renderParent: TooltipRenderParent;
+}
+declare const TooltipGeneral: (props: TooltipGeneralProps) => React__default.JSX.Element;
+
+interface CalculatorResultHeader {
+    bottom?: ReactElement | string | undefined;
+    main?: ReactElement | string | undefined;
+    top?: ReactElement | string | undefined;
+    topTooltip?: TooltipInfoDescriptor;
+}
+interface CalculatorResultBodyItem {
+    left: {
+        element: ReactElement | string;
+        tooltip?: TooltipInfoDescriptor;
+    };
+    right: {
+        element: ReactElement | string;
     };
-};
-type Theme = typeof theme;
+}
+interface CalculatorResultMain {
+    element: ReactElement | string;
+    topSeparator?: boolean;
+}
+interface CalculatorResultModalDescriptor {
+    content: ReactElement | string;
+    modalCloseButtonAriaLabel?: string;
+    triggerText: ReactElement | string;
+}
+declare enum CalculatorResultInfoPosition {
+    inBox = "inBox",
+    underBox = "underBox"
+}
 
-declare enum Overflow {
+interface CalculatorResultProps extends DesignSystemBaseProps {
+    bodyItems: CalculatorResultBodyItem[];
+    containerRef?: RefObject<HTMLDivElement>;
+    description?: ReactElement | string;
+    header: CalculatorResultHeader;
+    infoPosition?: CalculatorResultInfoPosition;
+    main: CalculatorResultMain;
+    modal?: CalculatorResultModalDescriptor;
+    resultBoxRef?: RefObject<HTMLDivElement>;
+}
+declare const CalculatorResult: (props: CalculatorResultProps) => React__default.JSX.Element;
+
+declare enum LoaderSize {
+    lg = "lg",
+    sm = "sm"
+}
+interface LoaderProps {
+    colorScheme: ColorScheme;
+    loaderSize: LoaderSize;
+}
+
+declare const Loader: React__default.FC<LoaderProps>;
+
+interface LoaderOverlayBoxProps {
+    colorScheme: ColorScheme;
+    loaderSize: LoaderSize;
+}
+
+declare const LoaderOverlayBox: React__default.FC<LoaderOverlayBoxProps>;
+
+interface FormattedPercentageProps {
+    readonly maximumFractionDigits?: number;
+    readonly minimumFractionDigits?: number;
+    readonly value: number;
+}
+
+declare const _default: React__default.NamedExoticComponent<FormattedPercentageProps>;
+
+interface UseFormatPercentageTypeParam {
+    maximumFractionDigits?: number;
+    minimumFractionDigits?: number;
+    value: number;
+}
+type UseFormatPercentage = (param: UseFormatPercentageTypeParam) => string;
+declare const useFormattedPercentage: () => UseFormatPercentage;
+
+declare enum FormatAmountCurrencyDisplay {
+    code = "code",
+    name = "name",
+    none = "none",
+    symbol = "symbol"
+}
+declare enum FormatAmountGrouping {
+    always = "always",
     auto = "auto",
-    clip = "clip",
-    hidden = "hidden",
-    inherit = "inherit",
-    visible = "visible"
+    none = "none"
+}
+
+interface UseFormatAmountParam {
+    currency?: string;
+    currencyDisplay?: FormatAmountCurrencyDisplay;
+    grouping?: FormatAmountGrouping;
+    maximumFractionDigits?: number;
+    minimumFractionDigits?: number;
+    value: number;
+}
+type UseFormatAmountType = (param: UseFormatAmountParam) => string;
+declare const useFormatAmount: () => UseFormatAmountType;
+
+interface FormattedAmountProps {
+    currency?: string;
+    currencyDisplay?: FormatAmountCurrencyDisplay;
+    grouping?: FormatAmountGrouping;
+    maximumFractionDigits?: number;
+    minimumFractionDigits?: number;
+    value: number;
+}
+/**
+ * displays formatted amount with currency and formatting options
+ * it includes an accessibility-friendly version without grouping for screen readers
+ * if the formatted amount with and without grouping is the same, only one version is displayed
+ */
+declare const FormattedAmount: (props: FormattedAmountProps) => React__default.JSX.Element;
+
+interface CheckboxBaseProps extends RefAttributes<HTMLInputElement> {
+    readonly checked?: boolean | undefined;
+    readonly colorScheme?: ColorScheme;
+    readonly disabled?: boolean | undefined;
+    readonly id?: string | undefined;
+    readonly isError?: boolean | undefined;
+    readonly name: string;
+    readonly onBlur?: ((event: React__default.FocusEvent<HTMLInputElement>) => void) | undefined;
+    readonly onChange?: ((event: React__default.ChangeEvent<HTMLInputElement>) => void) | undefined;
+    readonly value?: string;
+}
+
+declare enum CheckboxPosition {
+    left = "left",
+    right = "right"
+}
+interface CheckboxLabel {
+    readonly label: React__default.ReactElement | string;
+    readonly tooltip?: TooltipInfoDescriptor | undefined;
+}
+interface CheckboxProps extends CheckboxBaseProps {
+    readonly colorScheme?: ColorScheme;
+    readonly errorMessage?: React__default.ReactElement | string | undefined;
+    readonly label?: CheckboxLabel | undefined;
+    readonly labelColor?: string | undefined;
+    readonly position?: CheckboxPosition | undefined;
+}
+
+declare const Checkbox: React__default.FC<CheckboxProps>;
+
+interface FieldControlProps extends DesignSystemBaseProps {
+    describedBy?: string;
+    id?: string;
+    invalid?: boolean;
+    labelledBy?: string;
+    name?: string;
+    required?: boolean;
+}
+declare enum FieldRequirement {
+    optional = "optional",
+    optionalWithoutLabelSuffix = "optionalWithoutLabelSuffix",
+    required = "required"
+}
+
+declare enum InputSize {
+    md = "md",
+    xl = "xl"
+}
+declare enum InputTextAlign {
+    center = "center",
+    left = "left",
+    right = "right"
+}
+declare enum FieldWrapperLayout {
+    horizontal = "horizontal",
+    vertical = "vertical"
+}
+interface InputProps extends FieldControlProps {
+    ariaLabel?: string;
+    autoComplete?: HTMLInputAutoCompleteAttribute;
+    colorInput?: Property.Color | undefined;
+    disabled?: boolean;
+    halfWidth?: boolean;
+    maxLength?: number;
+    name: string;
+    onBlur?: ((event: FocusEvent<HTMLInputElement>) => void) | undefined;
+    onChange?: ((event: ChangeEvent<HTMLInputElement>) => void) | undefined;
+    size: InputSize;
+    value?: string;
+}
+
+type FieldWrapperControlProps = Required<Pick<FieldControlProps, 'describedBy' | 'id' | 'invalid' | 'labelledBy' | 'required'>>;
+declare enum FieldControlAddonPosition {
+    afterControl = "afterControl",
+    beforeControl = "beforeControl",
+    bottom = "bottom"
+}
+interface FieldControlAddon {
+    children: ReactNode;
+    key: React__default.Key;
+    position: FieldControlAddonPosition;
+}
+interface FieldWrapperProps extends DesignSystemBaseProps {
+    children?: ReactNode | ((controlProps: FieldWrapperControlProps) => ReactNode);
+    /** @deprecated Use `controlSectionWidth` instead. */
+    childrenWidth?: Property.Width;
+    controlAddons?: FieldControlAddon[];
+    controlId?: string;
+    controlMobileWidth?: Property.Width;
+    /** `controlSection` represents the right section in horizontal layout. */
+    controlSectionWidth?: Property.Width;
+    controlWidth?: Property.Width;
+    errorMessage?: ReactNode;
+    /** @default FieldRequirement.required */
+    fieldRequirement?: FieldRequirement;
+    /** @deprecated Use `invalid` instead. */
+    hasError?: boolean;
+    hintText?: ReactNode;
+    /** @deprecated Use `controlId` instead. */
+    id?: string;
+    /** @default isRenderable(errorMessage) */
+    invalid?: boolean;
+    label?: ReactNode;
+    labelAs?: WebTarget;
+    labelId?: string;
+    labelSuffix?: ReactNode;
+    layout?: FieldWrapperLayout;
+    /** Necessary for registration of `label` to `FieldLabelStore`. */
+    name?: string;
+    note?: ReactNode;
+    successMessage?: ReactNode;
+    tooltip?: TooltipInfoDescriptor;
+}
+/** @deprecated Use `FieldWrapperProps` or `ComponentProps<typeof YourWrappedComponent>`  instead. */
+type FieldWrapperValues = Omit<FieldWrapperProps, 'children'>;
+declare const FieldWrapper: (props: FieldWrapperProps) => React__default.JSX.Element;
+
+type WithFieldWrapperProps = Omit<FieldWrapperProps, 'children' | 'controlId' | 'id'>;
+declare const withFieldWrapper: <TProps extends FieldControlProps, TElement extends HTMLElement>(FieldControl: ComponentType<TProps>) => React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<TProps & WithFieldWrapperProps> & React__default.RefAttributes<TElement>>;
+
+interface RadioGeneralProps extends RefAttributes<HTMLInputElement> {
+    readonly checked?: boolean;
+    readonly disabled?: boolean;
+    readonly id?: string | undefined;
+    readonly invalid?: boolean | undefined;
+    readonly name: string;
+    readonly onBlur?: ((event: React__default.FocusEvent<HTMLInputElement>) => void) | undefined;
+    readonly onChange?: ((event: React__default.ChangeEvent<HTMLInputElement>) => void) | undefined;
+    readonly value: string;
+}
+
+interface RadioBaseProps extends DesignSystemBaseProps, RadioGeneralProps {
+}
+declare const RadioBase: React__default.FC<RadioBaseProps>;
+
+interface RadioLabel {
+    readonly label: ReactElement | string;
+    readonly tooltip?: TooltipInfoDescriptor;
+}
+declare enum RadioPosition {
+    left = "left",
+    right = "right"
+}
+
+interface RadioProps extends RadioGeneralProps, DesignSystemBaseProps {
+    errorMessage?: ReactElement | string | undefined;
+    label?: RadioLabel | undefined;
+    position?: RadioPosition | undefined;
+}
+declare const Radio: React__default.FC<RadioProps>;
+
+interface RadioFieldProps extends Omit<RadioProps, 'onChange'> {
+    name: string;
+    options?: RegisterOptions;
+}
+declare const RadioField: (props: RadioFieldProps) => React__default.JSX.Element;
+
+interface RadioGroupItem {
+    id?: string;
+    label: RadioLabel;
+    value: string;
+}
+declare enum RadioGroupDirection {
+    column = "column",
+    columnReverse = "columnReverse",
+    row = "row",
+    rowReverse = "rowReverse"
 }
-declare const resolveOverflowValue: (overflow: Overflow) => string;
 
 interface RadioGroupControlProps extends FieldControlProps, DesignSystemBaseProps {
     columnGap?: Spacing;
@@ -2268,4 +2282,4 @@ declare const useMessageFormatter: <TInput extends unknown>(getMessage: (value:
     [x: string]: any;
 }>;
 
-export { Accordion, AccordionContent, AccordionItem, type AccordionItemProps, AccordionKeyValue, type AccordionProps, AccordionVariant, AsyncSelect as AsyncReactSelect, Button, type ButtonProps, ButtonSize, ButtonStyle, ButtonType, ButtonsLayout, ButtonsLayoutAlign, ButtonsLayoutDirection, type ButtonsLayoutProps, ButtonsLayoutWrap, CalculatorResult, type CalculatorResultBodyItem, type CalculatorResultHeader, CalculatorResultInfoPosition, type CalculatorResultMain, type CalculatorResultModalDescriptor, type CalculatorResultProps, Checkbox, type CheckboxLabel, CheckboxPosition, type CheckboxProps, type ChooseColor, type ColorObject, ColorScheme, ColorSchemeProvider, type ColorSchemeProviderProps, ComboBox, ComboBoxControl, type ComboBoxControlProps, ComboBoxField, type ComboBoxFieldProps, type ComboBoxItem, type ComboBoxItemOrder, ComboBoxItemOrderSource, type ComboBoxProps, type CreateTooltipInfoDescriptor, type CreateTooltipInfoDescriptorParam, DatePicker, DatePickerControl, type DatePickerControlProps, DatePickerField, type DatePickerFieldProps, type DatePickerProps, type DesignSystemBaseProps, DesignSystemProvider, type DesignSystemProviderProps, EmailInput, type EmailInputProps, ErrorBox, type ErrorBoxItem, type ErrorBoxProps, type FieldConfig, FieldConfigProvider, type FieldConfigProviderProps, type FieldControlAddon, FieldControlAddonPosition, type FieldControlProps, FieldLabelStoreProvider, type FieldLabelStoreProviderProps, FieldRequirement, FieldWrapper, FieldWrapperLayout, type FieldWrapperProps, type FieldWrapperValues, FontWeight, FormatAmountCurrencyDisplay, FormatAmountGrouping, FormattedAmount, type FormattedAmountProps, FormattedHtmlMessage, type FormattedHtmlMessageProps, FormattedMessage, type FormattedMessageProps, _default as FormattedPercentage, type GetColor, IconProduct, type IconProductProps, IconProductSize, IconProductType, IconProductVariant, IconSystem, type IconSystemProps, IconSystemSize, IconSystemType, Infobox, type InfoboxProps, InfoboxSize, type InfoboxTextContent, InfoboxVariant, InputBase, type InputBaseProps, InputLabel, type InputLabelProps, InputLabelSize, InputSize, InputTextAlign, Loader, LoaderOverlayBox, type LoaderOverlayBoxProps, type LoaderProps, LoaderSize, MaskedInput, MaskedInputBase, type MaskedInputBaseProps, MaskedInputField, type MaskedInputProps, MediaType, MediaTypeProvider, type MediaTypeProviderProps, type MessageDescriptorWithPrimitiveValues, type MessageDescriptorWithValues, type MessageValues, Modal, type ModalOnClose, type ModalProps, ModalVerticalPosition, ModalWidthType, NumberInput, NumberInputField, type NumberInputProps, Overflow, Paper, type PaperProps, PaperShadow, PhoneInput, PhoneInputField, PhoneInputNext, type PhoneInputNextProps, type PhoneInputProps, type PrimitiveMessageValues, ProgressPaper, type ProgressPaperProps, Radio, RadioBase, type RadioBaseProps, RadioButton, RadioButtonGroup, RadioButtonGroupControl, type RadioButtonGroupControlProps, RadioButtonGroupField, type RadioButtonGroupFieldProps, type RadioButtonGroupItem, type RadioButtonGroupProps, type RadioButtonLabel, type RadioButtonProps, RadioField, type RadioFieldProps, RadioGroup, RadioGroupControl, type RadioGroupControlProps, RadioGroupDirection, RadioGroupField, type RadioGroupFieldProps, type RadioGroupItem, type RadioGroupProps, type RadioLabel, RadioPosition, type RadioProps, Select$1 as ReactSelect, SelectBase as ReactSelectBase, SelectField$1 as ReactSelectField, type SelectOption as ReactSelectOption, type SelectProps$1 as ReactSelectProps, ReasonForClosing, SearchInput, type SearchInputProps, Select, SelectControl, type SelectControlProps, SelectField, type SelectFieldProps, type SelectItem, type SelectItemOrder, SelectItemOrderSource, type SelectProps, Slider, type SliderBreakpoint, SliderInput, type SliderInputLabel, type SliderInputMinMax, type SliderInputProps, SliderInputRoundingType, type SliderProps, SliderStepType, type SliderSteps, Spacing, SpanButton, type SpanButtonProps, Stack, StackDirection, type StackProps, type TabItemType, Table, TableBody, type TableBodyProps, TableData, type TableDataProps, TableHead, TableHeadData, type TableHeadDataProps, type TableHeadProps, type TableProps, TableRow, type TableRowProps, TableTextAlign, TableVariant, Tabs, TabsActiveTabDefaultPosition, TabsItem, type TabsItemProps, type TabsProps, TabsSize, type TabsType, TabsVariant, Tag, TagIconPosition, type TagProps, TagSize, TagTextTransform, TagType, TextArea, type TextAreaProps, TextInput, type TextInputProps, type Theme, Toggle, type ToggleProps, type TooltipDescriptor, TooltipGeneral, type TooltipGeneralProps, TooltipInfo, TooltipInfoConditional, type TooltipInfoConditionalProps, type TooltipInfoDescriptor, TooltipInfoDisplayMethod, TooltipInfoDisplayableCheck, type TooltipInfoDisplayableCheckProps, type TooltipInfoProps, TooltipPlacement, type TooltipRenderParent, TrailingTextInput, type TrailingTextInputProps, Typography, type TypographyProps, TypographyTextAlign, TypographyVariant, type UseColorSchemeOptions, type UseColorSchemeParam, type UseDesignSystemOptions, type UseDesignSystemParam, type UseFormatAmountParam, type UseMediaTypeOptions, type UseMediaTypeParam, VisuallyHidden, type VisuallyHiddenProps, datePickerValueFormat, getColor, identityFormatter, isRenderable, resolveFontWeightValue, resolveOverflowValue, resolveSpacingValue, theme, useChooseColor, useColorScheme, useCreateTooltipInfoDescriptor, useDesignSystem, useFieldConfig, useFieldLabels, useFormatAmount, useFormattedPercentage, useIsMessageDisplayable, useMediaType, useMessageFormatter, useRegisterFieldLabel, withFieldWrapper, withMaskedInputField };
+export { Accordion, AccordionContent, type AccordionContentType, AccordionItem, type AccordionItemProps, type AccordionItemType, AccordionKeyValue, type AccordionKeyValueProps, type AccordionProps, AccordionVariant, AsyncSelect as AsyncReactSelect, BorderRadius, Button, type ButtonProps, ButtonSize, ButtonStyle, ButtonType, ButtonsLayout, ButtonsLayoutAlign, ButtonsLayoutDirection, type ButtonsLayoutProps, ButtonsLayoutWrap, CalculatorResult, type CalculatorResultBodyItem, type CalculatorResultHeader, CalculatorResultInfoPosition, type CalculatorResultMain, type CalculatorResultModalDescriptor, type CalculatorResultProps, Checkbox, type CheckboxLabel, CheckboxPosition, type CheckboxProps, type ChooseColor, type ColorObject, ColorScheme, ColorSchemeProvider, type ColorSchemeProviderProps, ComboBox, ComboBoxControl, type ComboBoxControlProps, ComboBoxField, type ComboBoxFieldProps, type ComboBoxItem, type ComboBoxItemOrder, ComboBoxItemOrderSource, type ComboBoxProps, type CreateTooltipInfoDescriptor, type CreateTooltipInfoDescriptorParam, DatePicker, DatePickerControl, type DatePickerControlProps, DatePickerField, type DatePickerFieldProps, type DatePickerProps, type DesignSystemBaseProps, DesignSystemProvider, type DesignSystemProviderProps, EmailInput, type EmailInputProps, ErrorBox, type ErrorBoxItem, type ErrorBoxProps, type FieldConfig, FieldConfigProvider, type FieldConfigProviderProps, type FieldControlAddon, FieldControlAddonPosition, type FieldControlProps, FieldLabelStoreProvider, type FieldLabelStoreProviderProps, FieldRequirement, FieldWrapper, FieldWrapperLayout, type FieldWrapperProps, type FieldWrapperValues, FontWeight, FormatAmountCurrencyDisplay, FormatAmountGrouping, FormattedAmount, type FormattedAmountProps, FormattedHtmlMessage, type FormattedHtmlMessageProps, FormattedMessage, type FormattedMessageProps, _default as FormattedPercentage, type GetColor, IconProduct, type IconProductProps, IconProductSize, IconProductType, IconProductVariant, IconSystem, type IconSystemProps, IconSystemSize, IconSystemType, Infobox, type InfoboxProps, InfoboxSize, type InfoboxTextContent, InfoboxVariant, InputBase, type InputBaseProps, InputLabel, type InputLabelProps, InputLabelSize, InputSize, InputTextAlign, Loader, LoaderOverlayBox, type LoaderOverlayBoxProps, type LoaderProps, LoaderSize, MaskedInput, MaskedInputBase, type MaskedInputBaseProps, MaskedInputField, type MaskedInputProps, MediaType, MediaTypeProvider, type MediaTypeProviderProps, type MessageDescriptorWithPrimitiveValues, type MessageDescriptorWithValues, type MessageValues, Modal, type ModalOnClose, type ModalProps, ModalVerticalPosition, ModalWidthType, NumberInput, NumberInputField, type NumberInputProps, Overflow, Paper, type PaperProps, PaperShadow, PhoneInput, PhoneInputField, PhoneInputNext, type PhoneInputNextProps, type PhoneInputProps, type PrimitiveMessageValues, ProgressPaper, type ProgressPaperProps, Radio, RadioBase, type RadioBaseProps, RadioButton, RadioButtonGroup, RadioButtonGroupControl, type RadioButtonGroupControlProps, RadioButtonGroupField, type RadioButtonGroupFieldProps, type RadioButtonGroupItem, type RadioButtonGroupProps, type RadioButtonLabel, type RadioButtonProps, RadioField, type RadioFieldProps, RadioGroup, RadioGroupControl, type RadioGroupControlProps, RadioGroupDirection, RadioGroupField, type RadioGroupFieldProps, type RadioGroupItem, type RadioGroupProps, type RadioLabel, RadioPosition, type RadioProps, Select$1 as ReactSelect, SelectBase as ReactSelectBase, SelectField$1 as ReactSelectField, type SelectOption as ReactSelectOption, type SelectProps$1 as ReactSelectProps, ReasonForClosing, SearchInput, type SearchInputProps, Select, SelectControl, type SelectControlProps, SelectField, type SelectFieldProps, type SelectItem, type SelectItemOrder, SelectItemOrderSource, type SelectProps, Slider, type SliderBreakpoint, SliderInput, type SliderInputLabel, type SliderInputMinMax, type SliderInputProps, SliderInputRoundingType, type SliderProps, SliderStepType, type SliderSteps, Spacing, SpanButton, type SpanButtonProps, Stack, StackDirection, type StackProps, type TabItemType, Table, TableBody, type TableBodyProps, TableData, type TableDataProps, TableHead, TableHeadData, type TableHeadDataProps, type TableHeadProps, type TableProps, TableRow, type TableRowProps, TableTextAlign, TableVariant, Tabs, TabsActiveTabDefaultPosition, TabsItem, type TabsItemProps, type TabsProps, TabsSize, type TabsType, TabsVariant, Tag, TagIconPosition, type TagProps, TagSize, TagTextTransform, TagType, TextArea, type TextAreaProps, TextInput, type TextInputProps, type Theme, Toggle, type ToggleProps, type TooltipDescriptor, TooltipGeneral, type TooltipGeneralProps, TooltipInfo, TooltipInfoConditional, type TooltipInfoConditionalProps, type TooltipInfoDescriptor, TooltipInfoDisplayMethod, TooltipInfoDisplayableCheck, type TooltipInfoDisplayableCheckProps, type TooltipInfoProps, TooltipPlacement, type TooltipRenderParent, TrailingTextInput, type TrailingTextInputProps, Typography, type TypographyProps, TypographyTextAlign, TypographyVariant, type UseColorSchemeOptions, type UseColorSchemeParam, type UseDesignSystemOptions, type UseDesignSystemParam, type UseFormatAmountParam, type UseMediaTypeOptions, type UseMediaTypeParam, VisuallyHidden, type VisuallyHiddenProps, datePickerValueFormat, getColor, identityFormatter, isRenderable, resolveBorderRadiusValue, resolveFontWeightValue, resolveOverflowValue, resolveSpacingValue, theme, useChooseColor, useColorScheme, useCreateTooltipInfoDescriptor, useDesignSystem, useFieldConfig, useFieldLabels, useFormatAmount, useFormattedPercentage, useIsMessageDisplayable, useMediaType, useMessageFormatter, useRegisterFieldLabel, withFieldWrapper, withMaskedInputField };