@orangesk/orange-design-system 2.0.0-beta.8 → 2.0.0

package/build/components/types/index.d.ts

@@ -1,12 +1,13 @@
 import React$1, { ReactNode, ReactElement, HTMLAttributes, AnchorHTMLAttributes, FC } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
 interface AccordionProps$1 {
     /** Heading level from 1 to 6 */
     headingLevel?: number;
     /** Accordion is enclosed in another component */
     isEnclosed?: boolean;
-    /** If true, the last item will not have a bottom border */
-    lastItemNoBottomBorder?: boolean;
+    /** If true, the top border on the first item will be removed */
+    noTopBorder?: boolean;
     /** Adjustable spacing */
     size?: "large";
     /** Additional CSS classes */
@@ -71,8 +72,6 @@ interface AlertProps extends React$1.HTMLAttributes<HTMLDivElement> {
     /** Type of alert, sets icon and color */
     type?: AlertType;
     className?: string;
-    /** Sets Alert to use specific color scheme */
-    colorScheme?: "dark" | "light";
 }
 declare const Alert: React$1.FC<AlertProps>;
 
@@ -84,53 +83,13 @@ interface AnchorNavigationItem {
 interface AnchorNavigationProps {
     items: AnchorNavigationItem[];
     className?: string;
-    colorScheme?: "light" | "dark";
     children?: React$1.ReactNode;
 }
 declare const AnchorNavigation: {
-    ({ items, className, colorScheme, children, ...other }: AnchorNavigationProps): React$1.JSX.Element;
+    ({ items, className, children, ...other }: AnchorNavigationProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
-type TagButtonProps = {
-    className?: string;
-    onClick?: React$1.MouseEventHandler<HTMLButtonElement>;
-    children?: React$1.ReactNode;
-    isDisabled?: boolean;
-    ariaLabel?: string;
-    iconName: string;
-    size?: string;
-};
-declare const TagButton: React$1.ForwardRefExoticComponent<TagButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
-
-declare const colors$1: readonly ["black", "orange", "yellow", "green", "blue", "success", "info", "warning", "danger", "transparent"];
-type TagColor = (typeof colors$1)[number];
-type TagSize = "small" | "large";
-interface CommonProps$2 {
-    color?: TagColor;
-    size?: TagSize;
-    /** @deprecated */
-    isInverse?: boolean;
-    isDisabled?: boolean;
-    className?: string;
-    children?: React$1.ReactNode;
-    actionButton?: React$1.ReactElement<TagButtonProps>;
-}
-type SpanProps = CommonProps$2 & Omit<React$1.HTMLAttributes<HTMLSpanElement>, keyof CommonProps$2> & {
-    onClick?: undefined;
-    href?: undefined;
-};
-type ButtonProps$1 = CommonProps$2 & Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, keyof CommonProps$2> & {
-    onClick: React$1.MouseEventHandler<HTMLButtonElement>;
-    href?: undefined;
-};
-type AnchorProps$1 = CommonProps$2 & Omit<React$1.AnchorHTMLAttributes<HTMLAnchorElement>, keyof CommonProps$2> & {
-    href: string;
-    onClick?: undefined;
-};
-type TagProps = SpanProps | ButtonProps$1 | AnchorProps$1;
-declare const Tag: React$1.ForwardRefExoticComponent<TagProps & React$1.RefAttributes<HTMLElement>>;
-
 type BarAlign = "start" | "end" | "center";
 type BarSpace = "small" | "large";
 interface BarProps extends React$1.HTMLAttributes<HTMLElement> {
@@ -151,34 +110,36 @@ interface BarProps extends React$1.HTMLAttributes<HTMLElement> {
 }
 declare const Bar: React$1.ForwardRefExoticComponent<BarProps & React$1.RefAttributes<HTMLElement>>;
 
-interface CommonProps$1 {
-    /** Bar item could shrink and wrap content if there is not enough empty space */
-    canShrink?: boolean;
-    /** Bar item should fill empty space */
-    isFilling?: boolean;
-    /** Tag of the item */
+interface BarBreakProps extends React$1.HTMLAttributes<HTMLElement> {
+    /** HTML tag to render the compontent with */
     tag?: React$1.ElementType;
-    /** Additional class name */
+    /** Additional class names */
     className?: string;
     /** Child content */
     children?: React$1.ReactNode;
 }
-declare const BarItem: React$1.ForwardRefExoticComponent<CommonProps$1 & React$1.HTMLAttributes<HTMLElement> & React$1.RefAttributes<HTMLElement>>;
+declare const BarBreak: React$1.ForwardRefExoticComponent<BarBreakProps & React$1.RefAttributes<HTMLElement>>;
 
-interface BarBreakProps extends React$1.HTMLAttributes<HTMLElement> {
-    /** HTML tag to render the compontent with */
+interface CommonProps$3 {
+    /** Bar item could shrink and wrap content if there is not enough empty space */
+    canShrink?: boolean;
+    /** Bar item should fill empty space */
+    isFilling?: boolean;
+    /** Tag of the item */
     tag?: React$1.ElementType;
-    /** Additional class names */
+    /** Additional class name */
     className?: string;
     /** Child content */
     children?: React$1.ReactNode;
 }
-declare const BarBreak: React$1.ForwardRefExoticComponent<BarBreakProps & React$1.RefAttributes<HTMLElement>>;
+declare const BarItem: React$1.ForwardRefExoticComponent<CommonProps$3 & React$1.HTMLAttributes<HTMLElement> & React$1.RefAttributes<HTMLElement>>;
 
 interface BlockActionProps {
     /** 1 and only one single element */
     children: ReactElement;
     className?: string;
+    /** Add border on hover */
+    hasBorderOnHover?: boolean;
     [key: string]: any;
 }
 declare const BlockAction: React$1.FC<BlockActionProps>;
@@ -208,24 +169,24 @@ interface BlockActionOverrideProps {
 
 declare const BlockActionOverride: React$1.FC<BlockActionOverrideProps>;
 
+declare const bodyBannerColors: readonly ["background-primary", "background-accent", "surface-subtle"];
+type BodyBannerColor = (typeof bodyBannerColors)[number];
 interface BodyBannerProps {
-    size: "small" | "large";
-    /** Color scheme for whole BodyBanner */
-    colorScheme: "light" | "dark";
-    /** Color scheme for whole BodyBanner */
-    color?: "gray" | "orange";
+    size?: "large";
+    /** Background color using design tokens */
+    color?: BodyBannerColor;
     /** Additional CSS classes */
     className?: string;
-    /** Image URL */
-    imageUrl?: string;
-    /** Title */
-    title?: string;
-    /** Subtitle */
-    description?: string;
+    /** Image element */
+    image?: React$1.ReactNode;
+    /** Content area - typically heading and description */
+    children?: React$1.ReactNode;
     /** Button text */
     buttonText?: string;
+    /** Additional CSS classes for button */
+    buttonClassName?: string;
 }
-declare const BodyBanner: (props: BodyBannerProps) => React$1.JSX.Element;
+declare const BodyBanner: ({ className, size, color, image, children, buttonText, buttonClassName, ...other }: BodyBannerProps) => react_jsx_runtime.JSX.Element;
 
 interface BreadcrumbItemData {
     /** Item text */
@@ -236,8 +197,6 @@ interface BreadcrumbItemData {
 interface BreadcrumbsProps {
     /** Additional CSS classes */
     className?: string;
-    /** Use white breadcrumbs on dark background */
-    colorScheme?: "dark" | "light";
     /** Breadcrumb items */
     items: BreadcrumbItemData[];
     /** Navigation label */
@@ -249,27 +208,27 @@ declare const Breadcrumbs: React.FC<BreadcrumbsProps>;
 
 type ButtonSize = "small" | "large";
 type ButtonType = "primary" | "fill" | "ghost";
-interface CommonProps {
+interface CommonProps$2 {
     elemRef?: React$1.Ref<any>;
     htmlType?: "button" | "submit" | "reset";
     isActive?: boolean;
     isDefault?: boolean;
     isDisabled?: boolean;
-    colorScheme?: "dark" | "light";
     isSquare?: boolean;
     size?: ButtonSize;
     type?: ButtonType;
     className?: string;
     children?: React$1.ReactNode;
+    preserveWidth?: boolean;
 }
-type AnchorProps = CommonProps & Omit<React$1.AnchorHTMLAttributes<HTMLAnchorElement>, keyof CommonProps | "type" | "ref"> & {
+type AnchorProps$1 = CommonProps$2 & Omit<React$1.AnchorHTMLAttributes<HTMLAnchorElement>, keyof CommonProps$2 | "type" | "ref"> & {
     href: string;
 };
-type NativeButtonProps = CommonProps & Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, keyof CommonProps | "href" | "ref"> & {
+type NativeButtonProps = CommonProps$2 & Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, keyof CommonProps$2 | "href" | "ref"> & {
     href?: undefined;
 };
-type ButtonProps = AnchorProps | NativeButtonProps;
-declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<any>>;
+type ButtonProps$2 = AnchorProps$1 | NativeButtonProps;
+declare const Button: React$1.ForwardRefExoticComponent<ButtonProps$2 & React$1.RefAttributes<any>>;
 
 type IconPosition = "left" | "right";
 interface IconButtonProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "ref"> {
@@ -288,15 +247,15 @@ interface IconButtonProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonEl
 declare const IconButton: React$1.ForwardRefExoticComponent<IconButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
 
 declare const ButtonPrimary: {
-    (props: ButtonProps): React$1.JSX.Element;
+    (props: ButtonProps$2): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 declare const ButtonFill: {
-    (props: ButtonProps): React$1.JSX.Element;
+    (props: ButtonProps$2): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 declare const ButtonGhost: {
-    (props: ButtonProps): React$1.JSX.Element;
+    (props: ButtonProps$2): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -308,28 +267,65 @@ interface ButtonsProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare const Buttons: React.FC<ButtonsProps>;
 
+declare const cardColors: readonly ["background-primary", "background-secondary", "background-contrast", "background-accent", "background-accent1-blog", "background-accent2-blog", "fill-subtle", "fill-accent1", "fill-accent2", "fill-accent3", "fill-accent4", "fill-accent5"];
+type CardColor = (typeof cardColors)[number];
+interface CardProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /** Custom background color */
+    color?: CardColor;
+    noBorder?: boolean;
+}
+declare const Card: React$1.ForwardRefExoticComponent<CardProps & React$1.RefAttributes<HTMLDivElement>>;
+
+interface CardProductHeaderProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    image?: React$1.ReactNode;
+    /** Use small spacing */
+    space?: "small";
+}
+declare const CardProductHeader: React$1.ForwardRefExoticComponent<CardProductHeaderProps & React$1.RefAttributes<HTMLDivElement>>;
+
+type CardSectionColor = (typeof cardColors)[number];
+interface CardSectionProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /** Custom background color */
+    color?: CardSectionColor;
+    /** Fill available space using flexbox */
+    isFilling?: boolean;
+    /** Use small spacing */
+    space?: "small";
+}
+declare const CardSection: React$1.ForwardRefExoticComponent<CardSectionProps & React$1.RefAttributes<HTMLDivElement>>;
+
 interface CarouselProps extends HTMLAttributes<HTMLDivElement> {
     /** Swiper.js (https://swiperjs.com/) options object */
     swiperOptions?: Record<string, any>;
-    /** Inverse colors */
-    colorScheme?: "light" | "dark";
     /** Carousel items */
     items: ReactNode[];
+    /** Always show scrollbar and hide dots */
+    showScrollbar?: boolean;
+    /** Make carousel bleed to the right edge of screen while keeping left aligned with container */
+    bleedRight?: boolean;
     className?: string;
 }
 declare const Carousel: React$1.FC<CarouselProps>;
 
+interface CarouselHeroItemProps extends HTMLAttributes<HTMLDivElement> {
+    className?: string;
+    children?: ReactNode;
+    image: string;
+}
+declare const CarouselHeroItem: React$1.FC<CarouselHeroItemProps>;
+
 interface TabItem {
     label: string;
+    id?: string;
     [key: string]: any;
 }
 interface CarouselHeroProps {
     className?: string;
     swiperOptions?: Record<string, any>;
-    colorScheme?: "light" | "dark";
     children?: ReactNode;
     tabs?: TabItem[];
     interval?: number;
+    enableAutoplay?: boolean;
     [key: string]: any;
 }
 declare const CarouselHero: React$1.FC<CarouselHeroProps>;
@@ -337,7 +333,6 @@ declare const CarouselHero: React$1.FC<CarouselHeroProps>;
 interface CarouselPromotionsProps {
     className?: string;
     swiperOptions?: Record<string, any>;
-    colorScheme?: "light" | "dark";
     children?: ReactNode;
     [key: string]: any;
 }
@@ -397,22 +392,58 @@ interface IControlsProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>
     elemRef?: React$1.Ref<any>;
     icon: string;
     className?: string;
-    colorScheme?: "dark" | "light";
     isDisabled?: boolean;
 }
 declare const Controls: React$1.ForwardRefExoticComponent<IControlsProps & Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "ref" | "href" | keyof IControlsProps> & {
     href?: undefined;
 } & React$1.RefAttributes<any>>;
 
+interface CoverProps {
+    /** Background image source. URL string or an object of breakpoint: url pairs
+     *
+     * ```
+  {
+    default: string, // default image to load (fallback)
+    xxxl: string, // different image for each breakpoint (optional). while these are mobile first breakpoints, they MUST be ordered from largest to smallest
+    xxl: string,
+    xl: string,
+    lg: string,
+    md: string,
+    sm: string,
+    xs: string,
+  }
+    * ```
+    */
+    bgSrc: string | {
+        default: string;
+        xs?: string;
+        sm?: string;
+        md?: string;
+        lg?: string;
+        xl?: string;
+        xxl?: string;
+        xxxl?: string;
+    };
+    /** Set vertical position of image */
+    bgPosition?: "top" | "center" | "bottom";
+    /** Applies custom classNames to overlay content */
+    contentClass?: string;
+    /** Cover size */
+    size?: "small" | "medium" | "large" | "xlarge";
+    /** Additional className for the cover container */
+    className?: string;
+    /** Children content */
+    children?: React$1.ReactNode;
+    /** Additional props passed to Image component */
+    [key: string]: any;
+}
+declare const Cover: React$1.FC<CoverProps>;
+
 interface DividerProps extends Omit<HTMLAttributes<HTMLDivElement>, "content"> {
-    /** Custom background color */
-    color?: "black" | "white";
     /** Custom content inside divider */
     content?: ReactNode;
     /** Icon which will be rendered inside divider */
     icon?: string;
-    /** Divider line has width of 1px */
-    thinLine?: boolean;
 }
 declare const Divider: React$1.FC<DividerProps>;
 
@@ -420,7 +451,7 @@ type DropdownButtonProps = {
     className?: string;
     children?: ReactNode;
     iconName?: string;
-    type?: ButtonProps["type"];
+    type?: ButtonProps$2["type"];
 };
 type DropdownProps = {
     button: DropdownButtonProps;
@@ -435,6 +466,8 @@ type DropdownProps = {
 };
 declare const Dropdown: React$1.FC<DropdownProps>;
 
+declare const DropdownDivider: React$1.FC<React$1.HTMLAttributes<HTMLDivElement>>;
+
 interface DropdownItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
     className?: string;
     children?: ReactNode;
@@ -443,8 +476,6 @@ interface DropdownItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
 }
 declare const DropdownItem: React$1.FC<DropdownItemProps>;
 
-declare const DropdownDivider: React$1.FC<React$1.HTMLAttributes<HTMLDivElement>>;
-
 interface DropdownToggleButtonProps extends React$1.HTMLAttributes<HTMLButtonElement> {
     id: string;
     className?: string;
@@ -452,9 +483,6 @@ interface DropdownToggleButtonProps extends React$1.HTMLAttributes<HTMLButtonEle
 declare const DropdownToggleButton: React$1.FC<DropdownToggleButtonProps>;
 
 interface ExpanderProps {
-    /** Inverse buttons for dark backgrounds */
-    /** Dark theme */
-    colorScheme?: "light" | "dark";
     /** Custom summary text renderer. Passes props as function parameter. */
     renderSummary?: (props: ExpanderProps) => React$1.ReactNode;
     /** Custom summary text renderer when details are opened. Passes props as function parameter. */
@@ -469,102 +497,344 @@ interface ExpanderProps {
     children?: React$1.ReactNode;
     /** Expander takes full width of its container */
     isFullWidth?: boolean;
+    /** Position of trigger relative to content when opened */
+    placement?: "top" | "bottom";
+    /** Group identifier for syncing multiple expanders together */
+    toggleGroup?: string;
+    /** Initial open state */
+    open?: boolean;
 }
 declare const Expander: React$1.FC<ExpanderProps>;
 
 interface AccordionProps {
-    /** Color scheme for whole FeatureAccordion */
-    colorScheme?: "light" | "dark" | "white";
     /** Additional CSS classes */
     className?: string;
 }
 declare const FeatureAccordion: (props: AccordionProps & {
     children: React$1.ReactNode;
-}) => React$1.JSX.Element;
+}) => react_jsx_runtime.JSX.Element;
 
 interface FeatureAccordionItemProps extends AccordionItemProps {
+    image?: string | object;
     imageUrl?: string;
     imageAlt?: string;
+    imageSrcSet?: string;
     [key: string]: any;
 }
-declare const FeatureAccordionItem: React$1.FC<FeatureAccordionItemProps & {
-    defaultOpen?: boolean;
-}>;
+declare const FeatureAccordionItem: React$1.FC<FeatureAccordionItemProps>;
 
-declare const cardColors: readonly ["white", "black", "orange", "gray", "gray-lighter", "blue", "green", "pink", "yellow", "violet", "accent1-blog", "accent2-blog", "accent"];
-type CardColor = (typeof cardColors)[number];
-interface CardProps extends React$1.HTMLAttributes<HTMLDivElement> {
-    /** Custom background color */
-    color?: CardColor;
+type AutocompleteOption = string | {
+    title: string;
+    value: string;
+};
+interface AutocompleteProps extends Omit<React$1.SelectHTMLAttributes<HTMLSelectElement>, "size" | "value"> {
+    /** Module config. For more see accessible-autocomplete docs */
+    autocompleteConfig?: Record<string, any>;
+    /** Array of string options */
+    options?: AutocompleteOption[];
+    /** Placeholder text */
+    placeholder?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** Select value */
+    value?: string | string[];
 }
-declare const Card: React$1.ForwardRefExoticComponent<CardProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const Autocomplete: React$1.FC<AutocompleteProps>;
 
-type CardSectionColor = (typeof cardColors)[number];
-interface CardSectionProps extends React$1.HTMLAttributes<HTMLDivElement> {
-    /** Custom background color */
-    color?: CardSectionColor;
-    /** Fill available space using flexbox */
-    isFilling?: boolean;
-    /** Use small spacing */
-    space?: "small";
+type CheckboxSize = "default" | "large";
+interface CheckboxProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size"> {
+    /** Html id attribute */
+    id: string;
+    /** Checked state. */
+    isChecked?: boolean;
+    /** Disabled state. */
+    isDisabled?: boolean;
+    /** Invalid state */
+    isInvalid?: boolean;
+    /** Checkbox is displayed as Toggle */
+    isToggle?: boolean;
+    /** Html name attribute. Id is used when not set.*/
+    name?: string;
+    /** Size of element. */
+    size?: CheckboxSize;
+    className?: string;
 }
-declare const CardSection: React$1.ForwardRefExoticComponent<CardSectionProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const Checkbox: React$1.FC<CheckboxProps>;
 
-interface CardProductHeaderProps extends React$1.HTMLAttributes<HTMLDivElement> {
-    image?: React$1.ReactNode;
-    /** Use small spacing */
-    space?: "small";
+interface FieldContextType {
+    controlId?: string;
+    messages?: any[];
+    control?: {
+        type?: string;
+        control?: any;
+        renderControl?: (props: any) => React.ReactNode;
+        isToggle?: boolean;
+        [key: string]: any;
+    };
+    hint?: React.ReactNode;
+    label?: React.ReactNode;
+    labelAfter?: React.ReactNode;
+    tooltip?: React.ReactNode;
+    isRadioCheck?: boolean;
 }
-declare const CardProductHeader: React$1.ForwardRefExoticComponent<CardProductHeaderProps & React$1.RefAttributes<HTMLDivElement>>;
 
-type IconColor = "info" | "success" | "warning" | "danger" | "orange";
-type IconSize = "small" | "medium" | "large" | "xlarge" | "xxlarge" | "huge";
-type IconType = "icon" | "pictogram";
-interface IconProps extends React$1.SVGAttributes<SVGSVGElement> {
-    /** Accessible label for the icon. */
-    alt?: string;
-    /** Icon color. */
-    color?: IconColor;
-    /** Icon name (required). */
-    name: string;
-    /** Icon size. */
-    size?: IconSize;
-    /** Path to the SVG sprite. */
-    spritePath?: string;
-    /**
-     * Icon type. When set to "pictogram", the component will automatically
-     * switch between light and dark versions based on theme classes (.is-light/.is-dark).
-     */
-    type?: IconType;
-    /**
-     * @deprecated Use type="pictogram" instead.
-     * Whether this icon should adapt to theme (light/dark).
-     * When true, the component will automatically switch between
-     * light and dark versions based on theme classes (.is-light/.is-dark).
-     */
+interface InputFieldProps {
     className?: string;
+    control: FieldContextType["control"];
+    hint?: React$1.ReactNode;
+    label?: React$1.ReactNode;
+    labelAfter?: React$1.ReactNode;
+    messages?: Array<{
+        type: string;
+        text: string;
+    }>;
+    tooltip?: React$1.ReactNode;
+    [key: string]: any;
 }
-declare const Icon: React$1.FC<IconProps>;
+declare const Field: React$1.FC<InputFieldProps>;
 
-interface PictogramProps extends Omit<IconProps, "type"> {
-    /**
-     * Pictogram name. Should correspond to your pictogram sprite entries.
-     * For example: 'pictogram-skylink' will look for 'pictogram-skylink' (light)
-     * and 'pictogram-skylink--dark' (dark) in the sprite.
-     */
-    name: string;
+interface FieldsetMessage {
+    [key: string]: any;
 }
-/**
- * Pictogram component for theme-aware pictographic icons.
- *
- * This component automatically handles light/dark theme switching by using
- * different sprite entries based on the current theme (.is-light/.is-dark classes).
- *
- * Your sprite should contain both light and dark versions:
- * - Light version: Use the exact name provided (e.g., 'pictogram-skylink')
- * - Dark version: Add '--dark' suffix (e.g., 'pictogram-skylink--dark')
- */
-declare const Pictogram: React$1.FC<PictogramProps>;
+interface FieldsetProps extends React$1.FieldsetHTMLAttributes<HTMLFieldSetElement> {
+    /** Required `<legend />` for fieldset */
+    legend: ReactNode;
+    /** Additional legend props */
+    legendProps?: React$1.HTMLAttributes<HTMLLegendElement>;
+    description?: ReactNode;
+    messages?: FieldsetMessage[];
+    className?: string;
+    children?: ReactNode;
+}
+declare const Fieldset: React$1.FC<FieldsetProps>;
+
+type FileSize = "default" | "large";
+interface FileProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size"> {
+    /** Html id attribute. Generated automatically if omitted. */
+    id?: string;
+    /** Disabled state. */
+    isDisabled?: boolean;
+    /** Invalid state */
+    isInvalid?: boolean;
+    /** Input name. */
+    name?: string;
+    /** Size of element. */
+    size?: FileSize;
+    className?: string;
+}
+declare const File: FC<FileProps>;
+
+interface ControlShape {
+    type: "autocomplete" | "text" | "select";
+    [key: string]: any;
+}
+interface GroupProps extends HTMLAttributes<HTMLDivElement> {
+    control: ControlShape;
+    addonPrefix?: ReactNode | ReactNode[];
+    size?: "large";
+    addonSuffix?: ReactNode | ReactNode[];
+    className?: string;
+    /** Invalid state */
+    isInvalid?: boolean;
+}
+declare const Group: React$1.FC<GroupProps>;
+
+interface HintProps extends React$1.HTMLAttributes<HTMLParagraphElement> {
+    className?: string;
+    children?: React$1.ReactNode;
+}
+declare const Hint: React$1.FC<HintProps>;
+
+interface InputStepperConfig {
+    min?: number;
+    max?: number;
+    defaultValue?: number;
+    nonEditableInput?: boolean;
+}
+interface InputStepperProps {
+    config?: InputStepperConfig;
+    id: string;
+    inputClassName?: string;
+    isDisabled?: boolean;
+    /** Invalid state */
+    isInvalid?: boolean;
+    name?: string;
+    nonEditableInput?: boolean;
+    className?: string;
+    [key: string]: any;
+}
+declare const InputStepper: React$1.FC<InputStepperProps>;
+
+interface LabelProps extends React$1.LabelHTMLAttributes<HTMLLabelElement> {
+    htmlFor: string;
+    className?: string;
+    children?: React$1.ReactNode;
+}
+declare const Label: React$1.FC<LabelProps>;
+
+type MessageType = "info" | "warning" | "error" | "invalid";
+interface MessageProps extends React$1.HTMLAttributes<HTMLParagraphElement> {
+    /** Type of message */
+    type?: MessageType;
+    /** Additional CSS classes */
+    className?: string;
+    /** Message content */
+    children?: React$1.ReactNode;
+}
+declare const Message: React$1.FC<MessageProps>;
+
+type RadioSize = "default" | "large";
+interface RadioProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size"> {
+    /** Html id attribute */
+    id: string;
+    /** Checked state. */
+    isChecked?: boolean;
+    /** Disabled state. */
+    isDisabled?: boolean;
+    /** Invalid state */
+    isInvalid?: boolean;
+    /** Html name attribute. */
+    name: string;
+    /** Size of element. */
+    size?: RadioSize;
+    /** HTML value. Uses id when not set. */
+    value?: string;
+    className?: string;
+}
+declare const Radio: React$1.FC<RadioProps>;
+
+type RangeSliderWidth = "default" | "fullwidth";
+interface RangeSliderConfig {
+    connect?: boolean | boolean[];
+    format?: (value: number) => string;
+    handleAttributes?: Array<Record<string, any>>;
+    pips?: {
+        mode?: "positions" | "count" | "values";
+        filter?: (value: number) => boolean;
+        format?: (value: number) => string;
+        values?: number[] | number;
+        density?: number;
+    };
+    range: {
+        min: number | number[];
+        max: number | number[];
+    };
+    start: number[];
+    [key: string]: any;
+}
+interface RangeSliderProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /** [noUiSlider config object](https://refreshless.com/nouislider/slider-options/) */
+    config: RangeSliderConfig;
+    /** insert arbitrary element after rangeslider */
+    elementAfter?: React$1.ReactNode;
+    /** insert arbitrary element before rangeslider */
+    elementBefore?: React$1.ReactNode;
+    /** render data-rangeslider attribute and initialize RangeSlider.static.js */
+    hasDataAttr?: boolean;
+    /** element id. required by RangeSlider.static.js and generated automatically in React environment. */
+    id?: string;
+    /** Invalid state */
+    isInvalid?: boolean;
+    /** width of the element */
+    width?: RangeSliderWidth;
+    /** Additional CSS classes */
+    className?: string;
+}
+declare const RangeSlider: React$1.FC<RangeSliderProps>;
+
+type SelectOption = {
+    text: string;
+    value: string;
+} | string;
+type SelectSize = "default" | "large";
+type SelectWidth = "default" | "12ch" | "shrink" | "fullwidth";
+interface SelectProps extends Omit<React$1.SelectHTMLAttributes<HTMLSelectElement>, "size"> {
+    /** Forwarded DOM element ref. */
+    elemRef?: React$1.Ref<HTMLSelectElement>;
+    /** Html id attribute. */
+    id?: string;
+    /** Disabled state. */
+    isDisabled?: boolean;
+    /** Invalid state. */
+    isInvalid?: boolean;
+    /** Html name attribute. */
+    name?: string;
+    /** Select option can be specified via children or as options array */
+    options?: SelectOption[];
+    /** Size of element. */
+    size?: SelectSize;
+    /** Select value. */
+    value?: string | string[];
+    /** Element width */
+    width?: SelectWidth;
+    /** Additional CSS classes */
+    className?: string;
+    /** Child elements */
+    children?: React$1.ReactNode;
+}
+declare const Select: React$1.FC<SelectProps>;
+
+type TextAreaSize = "default" | "large";
+type TextAreaWidth = "default" | "fullwidth";
+interface TextAreaProps extends React$1.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    /** Html id attribute. */
+    id: string;
+    /** Disabled state. */
+    isDisabled?: boolean;
+    /** Invalid state */
+    isInvalid?: boolean;
+    /** Readonly state. */
+    isReadonly?: boolean;
+    /** Valid state */
+    isValid?: boolean;
+    /** Html name attribute. If not present, id is used.*/
+    name?: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Size of element. */
+    size?: TextAreaSize;
+    /** Input width */
+    width?: TextAreaWidth;
+    /** Additional CSS classes */
+    className?: string;
+    /** Child elements */
+    children?: React$1.ReactNode;
+}
+declare const TextArea: React$1.FC<TextAreaProps>;
+
+type TextInputSize = "default" | "large";
+type TextInputWidth = "3ch" | "8ch" | "12ch" | "default" | "fullwidth";
+type TextInputType = "email" | "hidden" | "password" | "search" | "tel" | "number" | "text" | "url";
+type TextInputSearchIcon = "none" | "transient" | "persistent";
+interface TextInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size"> {
+    /** Input html type. */
+    htmlType?: TextInputType;
+    /** Html id attribute. */
+    id: string;
+    /** Disabled state. */
+    isDisabled?: boolean;
+    /** Invalid state */
+    isInvalid?: boolean;
+    /** Readonly state. */
+    isReadonly?: boolean;
+    /** Valid state */
+    isValid?: boolean;
+    /** Html name attribute. If not present, id is used.*/
+    name?: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Size of element. */
+    size?: TextInputSize;
+    /** Input value. */
+    value?: string;
+    /** Input width */
+    width?: TextInputWidth;
+    /** Additional CSS classes */
+    className?: string;
+    /** Search icon mode. `transient` shows icon only on empty unfocused input, `persistent` keeps it visible with placeholder. */
+    searchIcon?: TextInputSearchIcon;
+}
+declare const TextInput: React$1.ForwardRefExoticComponent<TextInputProps & React$1.RefAttributes<HTMLInputElement>>;
 
 interface GaugeProps {
     /** Text inside the gauge */
@@ -578,8 +848,8 @@ declare const Gauge: React$1.ForwardRefExoticComponent<Omit<GaugeProps, "ref"> &
 
 type GridVAlign = "stretch" | "start" | "end" | "center";
 type GridHAlign = "end" | "center" | "space-around" | "space-between";
-type GridRowGapSize = "medium" | "large" | "xlarge" | Record<string, "medium" | "large" | "xlarge">;
-type GridColumnGapSize = "none";
+type GridRowGapSize = "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | Record<string, "none" | "xsmall" | "small" | "medium" | "large" | "xlarge">;
+type GridColumnGapSize = "none" | "small" | "default" | "large" | "xlarge" | Record<string, "none" | "small" | "default" | "large" | "xlarge">;
 interface GridProps extends React$1.HTMLAttributes<HTMLElement> {
     vAlign?: GridVAlign;
     hAlign?: GridHAlign;
@@ -590,18 +860,143 @@ interface GridProps extends React$1.HTMLAttributes<HTMLElement> {
 }
 declare const Grid: React$1.ForwardRefExoticComponent<GridProps & React$1.RefAttributes<HTMLElement>>;
 
-type GridColAlign = 'top' | 'middle' | 'bottom' | 'stretch';
-type GridColSize = number | 'shrink' | 'fill' | 'auto' | Record<string, number | 'shrink' | 'fill' | 'auto'>;
+type GridColAlign = "top" | "middle" | "bottom" | "stretch";
+type GridColSize = number | "shrink" | "fill" | "auto" | Record<string, number | "shrink" | "fill" | "auto">;
 interface GridColProps extends React$1.HTMLAttributes<HTMLElement> {
     align?: GridColAlign;
     tag?: React$1.ElementType;
     size?: GridColSize;
 }
 declare const GridCol: {
-    ({ className, align, tag, size, ...other }: GridColProps): React$1.JSX.Element;
+    ({ className, align, tag, size, ...other }: GridColProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
+type HeroTextSize = "medium" | "large";
+type StickerColor = "black" | "orange";
+interface HeroImageSrc {
+    src: string;
+    srcSet?: string;
+}
+interface HeroImageResponsive {
+    default: string;
+    sm?: string;
+    lg?: string;
+    xl?: string;
+    xxl?: string;
+    [key: string]: string | undefined;
+}
+type HeroImage = HeroImageSrc | HeroImageResponsive;
+interface HeroPriceObject {
+    amount: number;
+    prefix?: React$1.ReactNode;
+    suffix?: React$1.ReactNode;
+}
+type HeroPrice = string | HeroPriceObject;
+interface HeroButtonProps {
+    children: React$1.ReactNode;
+    [key: string]: any;
+}
+interface HeroStickerProps {
+    color?: StickerColor;
+    children?: React$1.ReactNode;
+    className?: string;
+}
+interface HeroProps {
+    /** Action button props */
+    button?: HeroButtonProps;
+    /** Main text */
+    description?: React$1.ReactNode;
+    hasFullwidthImage?: boolean;
+    /** Gradient overlay ensures proper text readability */
+    hasGradientOverlay?: boolean;
+    /** Use svg illustrations, png for product images and jpg for photos */
+    image?: HeroImage;
+    price?: HeroPrice;
+    sticker?: HeroStickerProps;
+    /** Adjust title and description size. Medium sets display-2 title and 18px text, large uses display-1 title and 20px text.  */
+    textSize?: HeroTextSize;
+    /** Hero title */
+    title: string;
+}
+declare const Hero: React$1.FC<HeroProps>;
+
+type IconColor = "info" | "success" | "warning" | "danger" | "orange";
+type IconSize = "small" | "medium" | "large" | "xlarge" | "xxlarge" | "huge";
+type IconType = "icon" | "pictogram";
+interface IconProps extends React$1.SVGAttributes<SVGSVGElement> {
+    /** Accessible label for the icon. */
+    alt?: string;
+    /** Icon color. */
+    color?: IconColor;
+    /** Icon name (required). */
+    name: string;
+    /** Icon size. */
+    size?: IconSize;
+    /** Path to the SVG sprite. */
+    spritePath?: string;
+    /**
+     * Icon type. When set to "pictogram", the component will automatically
+     * switch between light and dark versions based on theme classes (.is-light/.is-dark).
+     */
+    type?: IconType;
+    /**
+     * @deprecated Use type="pictogram" instead.
+     * Whether this icon should adapt to theme (light/dark).
+     * When true, the component will automatically switch between
+     * light and dark versions based on theme classes (.is-light/.is-dark).
+     */
+    className?: string;
+}
+declare const Icon: React$1.FC<IconProps>;
+
+interface PictogramProps extends Omit<IconProps, "type"> {
+    /**
+     * Pictogram name. Should correspond to your pictogram sprite entries.
+     * For example: 'pictogram-skylink' will look for 'pictogram-skylink' (light)
+     * and 'pictogram-skylink--dark' (dark) in the sprite.
+     */
+    name: string;
+}
+/**
+ * Pictogram component for theme-aware pictographic icons.
+ *
+ * This component automatically handles light/dark theme switching by using
+ * different sprite entries based on the current theme (.is-light/.is-dark classes).
+ *
+ * Your sprite should contain both light and dark versions:
+ * - Light version: Use the exact name provided (e.g., 'pictogram-skylink')
+ * - Dark version: Add '--dark' suffix (e.g., 'pictogram-skylink--dark')
+ */
+declare const Pictogram: React$1.FC<PictogramProps>;
+
+declare const SpritePathContext: React$1.Context<string>;
+interface SpritePathProviderProps {
+    children: ReactNode;
+    value?: string;
+}
+declare const SpritePathProvider: React$1.FC<SpritePathProviderProps>;
+
+interface IconListItem {
+    icon: string;
+    content: React$1.ReactNode;
+    tooltip?: React$1.ReactNode;
+}
+interface IconListProps {
+    items?: IconListItem[];
+    className?: string;
+    [key: string]: any;
+}
+declare const IconList: React$1.FC<IconListProps>;
+
+interface ItemProps {
+    icon: string;
+    children: React$1.ReactNode;
+    tooltip?: React$1.ReactNode;
+    [key: string]: any;
+}
+declare const Item: React$1.FC<ItemProps>;
+
 interface ImageSrcObject {
     default: string;
     xxxl?: string;
@@ -621,7 +1016,7 @@ interface ImageProps {
 }
 declare const Image: React$1.FC<ImageProps>;
 
-interface LinkProps {
+interface LinkProps$1 {
     /** destination address */
     href?: string;
     /** rendered HTML element */
@@ -630,14 +1025,41 @@ interface LinkProps {
     className?: string;
     /** link content */
     children?: React$1.ReactNode;
-    /** color scheme for link: dark (white text) or light (black text) */
-    colorScheme?: "dark" | "light";
     /** whether the link should be underlined */
     isUnderline?: boolean;
     /** whether the link should have normal font weight */
     isNormal?: boolean;
+    /** when true, adds the .no-accent modifier to disable orange accent color on hover (useful for dark backgrounds) */
+    noAccent?: boolean;
+}
+declare const Link: React$1.FC<LinkProps$1 & React$1.HTMLAttributes<HTMLElement>>;
+
+interface ListProps {
+    /** Size determines color of list items and color of their borders*/
+    color?: "gray";
+    /** Spacious lists have horizontal spacing */
+    isEnclosed?: boolean;
+    /** Size determines vertical spacing */
+    size?: "small";
+    className?: string;
+    children?: React$1.ReactNode;
+}
+declare const List: React$1.FC<ListProps>;
+
+interface ControlProps {
+    href?: string;
+    className?: string;
+    children?: React$1.ReactNode;
+    [key: string]: any;
+}
+interface ListItemProps {
+    /** Item with control props automatically creates a clickable item and renders an interactive element. If the object contains a href property, it renders an anchor element. If not, it renders a button of type="button" instead. */
+    controlProps?: ControlProps;
+    className?: string;
+    children?: React$1.ReactNode;
+    [key: string]: any;
 }
-declare const Link: React$1.FC<LinkProps & React$1.HTMLAttributes<HTMLElement>>;
+declare const ListItem: React$1.FC<ListItemProps>;
 
 interface LoaderProps {
     colour?: "default" | "inverse";
@@ -652,6 +1074,24 @@ interface LoaderProps {
 }
 declare const Loader: React$1.FC<LoaderProps>;
 
+interface LoaderFullscreenProps {
+    className?: string;
+    children?: ReactNode;
+}
+declare const LoaderFullscreen: React$1.FC<LoaderFullscreenProps>;
+
+type MegamenuProps = {
+    className?: string;
+    title?: string;
+    isSticky?: boolean;
+    searchEmpty?: boolean;
+    searchFilled?: boolean;
+    compactLogoOnly?: boolean;
+};
+declare const Megamenu: ({ className, title, isSticky, searchEmpty, searchFilled, compactLogoOnly, }: MegamenuProps) => react_jsx_runtime.JSX.Element;
+
+declare const MegamenuBlog: ({ className, title, isSticky, searchEmpty, searchFilled, compactLogoOnly, }: MegamenuProps) => react_jsx_runtime.JSX.Element;
+
 declare const sizes$1: readonly ["small", "large"];
 type ModalSize = (typeof sizes$1)[number];
 interface ModalProps extends React$1.HTMLAttributes<HTMLDivElement> {
@@ -665,8 +1105,8 @@ interface ModalProps extends React$1.HTMLAttributes<HTMLDivElement> {
     id: string;
     /** isActive controls if modal is opened or closed */
     isActive?: boolean;
-    /** Disable plugin initialization. */
-    noInit?: boolean;
+    /** Callback fired when modal is closed */
+    onHide?: () => void;
     /** Custom header renderer. Receives id as function param. Returned element(s) must contain a header with close button. */
     renderHeader?: (id: string) => React$1.ReactNode;
     /** Custom body renderer. Receives title as function param. Returned element(s) must contain a title. */
@@ -683,21 +1123,17 @@ interface ModalProps extends React$1.HTMLAttributes<HTMLDivElement> {
     children?: React$1.ReactNode;
     /** Additional CSS classes */
     className?: string;
-    /** Color scheme for the modal */
-    colorScheme?: "dark" | "light";
     /** Disables header paddings */
     disableHeaderSpacing?: boolean;
-    /** Disables body paddings */
-    disableBodySpacing?: boolean;
     /** Disables footer paddings */
     disableFooterSpacing?: boolean;
 }
 declare const Modal: React$1.FC<ModalProps>;
 
-declare const colors: readonly ["white", "gray", "orange", "orange-dark", "black", "blue", "green", "pink", "violet", "yellow"];
-type BodyColor = (typeof colors)[number];
+declare const modalBodyColors: readonly ["background-primary", "background-secondary", "background-contrast", "background-accent", "background-accent1-blog", "background-accent2-blog", "surface-primary", "surface-secondary", "surface-tertiary", "surface-subtle", "surface-moderate", "surface-contrast", "surface-accent", "fill-subtle", "fill-accent1", "fill-accent2", "fill-accent3", "fill-accent4", "fill-accent5"];
+type ModalBodyColor = (typeof modalBodyColors)[number];
 interface ModalBodyProps extends React$1.HTMLAttributes<HTMLDivElement> {
-    color?: BodyColor;
+    color?: ModalBodyColor;
     className?: string;
     children?: React$1.ReactNode;
     withTopPadding?: boolean;
@@ -705,496 +1141,186 @@ interface ModalBodyProps extends React$1.HTMLAttributes<HTMLDivElement> {
 }
 declare const ModalBody: React$1.FC<ModalBodyProps>;
 
-declare const sizes: readonly ["small", "large"];
-type TitleSize = (typeof sizes)[number];
-interface ModalTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
-    size?: TitleSize;
-    className?: string;
-    children?: React.ReactNode;
-}
-declare const ModalTitle: React.FC<ModalTitleProps>;
-
 interface ExtendedIconButtonProps extends IconButtonProps {
     type?: ButtonType;
 }
 type ModalCloseButtonProps = Omit<ExtendedIconButtonProps, "iconName">;
 declare const ModalCloseButton: React.FC<ModalCloseButtonProps>;
 
-interface ModalProductHeaderProps extends React$1.HTMLAttributes<HTMLDivElement> {
+interface ModalProductFooterProps extends React$1.HTMLAttributes<HTMLDivElement> {
     image?: React$1.ReactNode;
     /** Use small spacing */
     space?: "small";
+    button?: React$1.ReactNode;
 }
-declare const ModalProductHeader: React$1.ForwardRefExoticComponent<ModalProductHeaderProps & React$1.RefAttributes<HTMLDivElement>>;
-
-type SectionColor = "white" | "gray" | "black" | "orange" | "accent1-blog" | "accent2-blog";
-type SectionSpacing = "default" | "small" | "xsmall";
-interface SectionProps {
-    /** Background color of section */
-    color?: SectionColor;
-    /**
-     * Spacing between sections
-     *
-     * if two sections with different color meet
-     * use default (larger) spacing, if two section have same color
-     * use small spacing on second one. Use xsmall for specific
-     * cases e.g. as part of Megamenu
-     */
-    spacing?: SectionSpacing;
-    /** Rendered HTML element */
-    tag?: React$1.ElementType;
-    /** Additional CSS classes */
-    className?: string;
-    /** Section content */
-    children?: React$1.ReactNode;
-}
-declare const Section: React$1.FC<SectionProps>;
-
-interface StickerProps {
-    color?: 'black' | 'orange';
-    size?: 'small';
-    children?: React$1.ReactNode;
-    className?: string;
-    [key: string]: any;
-}
-declare const Sticker: React$1.FC<StickerProps>;
-
-interface SkipLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
-    href?: string;
-}
-declare const SkipLink: React$1.FC<SkipLinkProps>;
-
-interface ListProps {
-    /** Size determines color of list items and color of their borders*/
-    color?: 'gray';
-    /** Spacious lists have horizontal spacing */
-    isEnclosed?: boolean;
-    /** Size determines vertical spacing */
-    size?: 'small';
-    className?: string;
-    children?: React$1.ReactNode;
-}
-declare const List: React$1.FC<ListProps>;
+declare const ModalProductFooter: React$1.ForwardRefExoticComponent<ModalProductFooterProps & React$1.RefAttributes<HTMLDivElement>>;
 
-interface ControlProps {
-    href?: string;
-    className?: string;
-    children?: React$1.ReactNode;
-    [key: string]: any;
-}
-interface ListItemProps {
-    /** Item with control props automatically creates a clickable item and renders an interactive element. If the object contains a href property, it renders an anchor element. If not, it renders a button of type="button" instead. */
-    controlProps?: ControlProps;
-    className?: string;
-    children?: React$1.ReactNode;
-    [key: string]: any;
+interface ModalProductHeaderProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    image?: React$1.ReactNode;
+    /** Use small spacing */
+    space?: "small";
+    /** Optional id for accessibility (e.g., for aria-labelledby) */
+    titleId?: string;
 }
-declare const ListItem: React$1.FC<ListItemProps>;
+declare const ModalProductHeader: React$1.ForwardRefExoticComponent<ModalProductHeaderProps & React$1.RefAttributes<HTMLDivElement>>;
 
-interface ProgressProps {
-    /** Color of the indicator */
-    color?: "orange" | "green" | "yellow" | "red" | "blue";
-    /** Provides clear instruction on what the horizontal bar represents */
-    label: React$1.ReactNode;
-    /** Textual representation of the indicator */
-    value: React$1.ReactNode;
-    /** Width of the progress indicator where 0 = empty, 1 = full */
-    width?: number;
+declare const sizes: readonly ["small", "large"];
+type TitleSize = (typeof sizes)[number];
+interface ModalTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    size?: TitleSize;
     className?: string;
-    children?: React$1.ReactNode;
-    colorMode?: "light" | "dark";
+    children?: React.ReactNode;
 }
-declare const Progress: React$1.FC<ProgressProps>;
+declare const ModalTitle: React.FC<ModalTitleProps>;
 
 interface PaginationItemProps {
     /** Page link href */
     href: string;
     /** Text label inside page item */
     label: string;
-    /** Active state. */
-    isActive?: boolean;
-    /** aria-label of page item */
-    ariaLabel?: string;
-}
-interface PaginationProps {
-    /** Collapsed version */
-    isCompact?: boolean;
-    /** Dark theme */
-    colorScheme?: "light" | "dark";
-    /** All pagination items - buttons & numbers */
-    items: PaginationItemProps[];
-    /** Accessibility label */
-    label?: string;
-    /** Additional CSS class name */
-    className?: string;
-    /** Additional props */
-    [key: string]: any;
-}
-declare const Pagination: React$1.FC<PaginationProps>;
-
-interface PromoBannerProps {
-    colorScheme?: "light" | "dark";
-    className?: string;
-    title: string;
-    secondaryTitle?: string;
-    description: string;
-    buttonText: string;
-    image?: string;
-}
-declare const PromoBanner: ({ title, secondaryTitle, description, buttonText, image, colorScheme, className, }: PromoBannerProps) => React$1.JSX.Element;
-
-interface PromotionCardProps {
-    /** Inverse colors */
-    colorScheme?: 'light' | 'dark';
-    className?: string;
-    children?: React$1.ReactNode;
-    [key: string]: any;
-}
-declare const PromotionCard: React$1.FC<PromotionCardProps>;
-
-interface PromotionCardContentProps {
-    className?: string;
-    children?: React$1.ReactNode;
-    [key: string]: any;
-}
-declare const PromotionCardContent: React$1.FC<PromotionCardContentProps>;
-
-interface PromotionCardImageWrapperProps {
-    className?: string;
-    children?: React$1.ReactNode;
-    [key: string]: any;
-}
-declare const PromotionCardImageWrapper: React$1.FC<PromotionCardImageWrapperProps>;
-
-interface PromotionCardSectionProps {
-    /** Inverse colors */
-    isInverse?: boolean;
-    className?: string;
-    children?: React$1.ReactNode;
-    [key: string]: any;
-}
-declare const PromotionCardSection: React$1.FC<PromotionCardSectionProps>;
-
-interface PromotionCardTitleProps {
-    className?: string;
-    children: React$1.ReactElement;
-    [key: string]: any;
-}
-declare const PromotionCardTitle: React$1.FC<PromotionCardTitleProps>;
-
-type AutocompleteOption = string | {
-    title: string;
-    value: string;
-};
-interface AutocompleteProps extends React$1.HTMLAttributes<HTMLSelectElement> {
-    /** Module config. For more see accessible-autocomplete docs */
-    autocompleteConfig?: Record<string, any>;
-    /** Array of string options */
-    options?: AutocompleteOption[];
-    /** Placeholder text */
-    placeholder?: string;
-    /** Additional CSS classes */
-    className?: string;
-}
-declare const Autocomplete: React$1.FC<AutocompleteProps>;
-
-type CheckboxSize = "default" | "large";
-interface CheckboxProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size"> {
-    /** Html id attribute */
-    id: string;
-    /** Checked state. */
-    isChecked?: boolean;
-    /** Disabled state. */
-    isDisabled?: boolean;
-    /** Invalid state */
-    isInvalid?: boolean;
-    /** Checkbox is displayed as Toggle */
-    isToggle?: boolean;
-    /** Html name attribute. Id is used when not set.*/
-    name?: string;
-    /** Size of element. */
-    size?: CheckboxSize;
-    className?: string;
-}
-declare const Checkbox: React$1.FC<CheckboxProps>;
-
-interface FieldContextType {
-    controlId?: string;
-    messages?: any[];
-    control?: {
-        type?: string;
-        control?: any;
-        renderControl?: (props: any) => React.ReactNode;
-        isToggle?: boolean;
-        [key: string]: any;
-    };
-    hint?: React.ReactNode;
-    label?: React.ReactNode;
-    labelAfter?: React.ReactNode;
-    tooltip?: React.ReactNode;
-    isRadioCheck?: boolean;
-}
-
-interface InputFieldProps {
-    className?: string;
-    control: FieldContextType["control"];
-    hint?: React$1.ReactNode;
-    label?: React$1.ReactNode;
-    labelAfter?: React$1.ReactNode;
-    messages?: Array<{
-        type: string;
-        text: string;
-    }>;
-    tooltip?: React$1.ReactNode;
-    [key: string]: any;
-}
-declare const Field: React$1.FC<InputFieldProps>;
-
-interface FieldsetMessage {
-    [key: string]: any;
-}
-interface FieldsetProps extends React$1.FieldsetHTMLAttributes<HTMLFieldSetElement> {
-    /** Required `<legend />` for fieldset */
-    legend: ReactNode;
-    /** Additional legend props */
-    legendProps?: React$1.HTMLAttributes<HTMLLegendElement>;
-    description?: ReactNode;
-    messages?: FieldsetMessage[];
-    className?: string;
-    children?: ReactNode;
-}
-declare const Fieldset: React$1.FC<FieldsetProps>;
-
-type FileSize = "default" | "large";
-interface FileProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size"> {
-    /** Html id attribute. Generated automatically if omitted. */
-    id?: string;
-    /** Disabled state. */
-    isDisabled?: boolean;
-    /** Input name. */
-    name?: string;
-    /** Size of element. */
-    size?: FileSize;
-    className?: string;
+    /** Active state. */
+    isActive?: boolean;
+    /** aria-label of page item */
+    ariaLabel?: string;
 }
-declare const File: FC<FileProps>;
-
-interface ControlShape {
-    type: "text" | "select";
+interface PaginationProps {
+    /** Collapsed version */
+    isCompact?: boolean;
+    /** All pagination items - buttons & numbers */
+    items: PaginationItemProps[];
+    /** Accessibility label */
+    label?: string;
+    /** Additional CSS class name */
+    className?: string;
+    /** Additional props */
     [key: string]: any;
 }
-interface GroupProps extends HTMLAttributes<HTMLDivElement> {
-    control: ControlShape;
-    addonPrefix?: ReactNode | ReactNode[];
-    size?: "large";
-    addonSuffix?: ReactNode | ReactNode[];
+declare const Pagination: React$1.FC<PaginationProps>;
+
+declare const pillColors: readonly ["surface-primary", "surface-secondary", "surface-tertiary", "surface-subtle", "surface-moderate", "surface-contrast", "surface-accent", "fill-moderate", "fill-disabled", "transparent"];
+type PillColor = (typeof pillColors)[number];
+interface PillProps extends HTMLAttributes<HTMLSpanElement> {
     className?: string;
+    children?: ReactNode;
+    color?: PillColor;
+    size?: "small" | "medium" | "large" | "xlarge" | "xxlarge";
 }
-declare const Group: React$1.FC<GroupProps>;
+declare const Pill: React$1.FC<PillProps>;
 
-interface HintProps extends React$1.HTMLAttributes<HTMLParagraphElement> {
+interface ProgressProps {
+    /** Color of the indicator */
+    color?: "orange" | "green" | "yellow" | "red" | "blue";
+    /** Provides clear instruction on what the horizontal bar represents */
+    label: React$1.ReactNode;
+    /** Textual representation of the indicator */
+    value: React$1.ReactNode;
+    /** Width of the progress indicator where 0 = empty, 1 = full */
+    width?: number;
     className?: string;
     children?: React$1.ReactNode;
 }
-declare const Hint: React$1.FC<HintProps>;
+declare const Progress: React$1.FC<ProgressProps>;
 
-interface LabelProps extends React$1.LabelHTMLAttributes<HTMLLabelElement> {
-    htmlFor: string;
+interface PromoBannerProps {
     className?: string;
+    image?: string;
+    alignImage?: "bottom" | "top";
+    /** Remove top padding from item on sm and smaller breakpoints */
+    flushTopSmDown?: boolean;
+    /** Remove bottom padding from item on sm and smaller breakpoints */
+    flushBottomSmDown?: boolean;
+    imageFullWidth?: boolean;
+    /** Make image extend to the edge of viewport even when inside container */
+    bleedImage?: boolean;
     children?: React$1.ReactNode;
+    itemClassName?: string;
+    imageClassName?: string;
+    variant?: "vertical" | "reverse";
 }
-declare const Label: React$1.FC<LabelProps>;
+declare const PromoBanner: ({ image, className, alignImage, flushTopSmDown, flushBottomSmDown, bleedImage, children, itemClassName, imageClassName, variant, imageFullWidth, }: PromoBannerProps) => react_jsx_runtime.JSX.Element;
 
-type MessageType = "info" | "warning" | "error" | "invalid";
-interface MessageProps extends React$1.HTMLAttributes<HTMLParagraphElement> {
-    /** Type of message */
-    type?: MessageType;
-    /** Additional CSS classes */
+interface PromotionCardProps {
     className?: string;
-    /** Message content */
     children?: React$1.ReactNode;
+    color?: CardColor;
+    [key: string]: any;
 }
-declare const Message: React$1.FC<MessageProps>;
+declare const PromotionCard: React$1.FC<PromotionCardProps>;
 
-type RadioSize = "default" | "large";
-interface RadioProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size"> {
-    /** Html id attribute */
-    id: string;
-    /** Checked state. */
-    isChecked?: boolean;
-    /** Disabled state. */
-    isDisabled?: boolean;
-    /** Invalid state */
-    isInvalid?: boolean;
-    /** Html name attribute. */
-    name: string;
-    /** Size of element. */
-    size?: RadioSize;
-    /** HTML value. Uses id when not set. */
-    value?: string;
+interface PromotionCardContentProps {
     className?: string;
-}
-declare const Radio: React$1.FC<RadioProps>;
-
-type RangeSliderWidth = "default" | "fullwidth";
-interface RangeSliderConfig {
-    connect?: boolean | boolean[];
-    format?: (value: number) => string;
-    handleAttributes?: Array<Record<string, any>>;
-    pips?: {
-        mode?: "positions" | "count" | "values";
-        filter?: (value: number) => boolean;
-        format?: (value: number) => string;
-        values?: number[] | number;
-        density?: number;
-    };
-    range: {
-        min: number | number[];
-        max: number | number[];
-    };
-    start: number[];
+    children?: React$1.ReactNode;
     [key: string]: any;
 }
-interface RangeSliderProps extends React$1.HTMLAttributes<HTMLDivElement> {
-    /** [noUiSlider config object](https://refreshless.com/nouislider/slider-options/) */
-    config: RangeSliderConfig;
-    /** insert arbitrary element after rangeslider */
-    elementAfter?: React$1.ReactNode;
-    /** insert arbitrary element before rangeslider */
-    elementBefore?: React$1.ReactNode;
-    /** render data-rangeslider attribute and initialize RangeSlider.static.js */
-    hasDataAttr?: boolean;
-    /** element id. required by RangeSlider.static.js and generated automatically in React environment. */
-    id?: string;
-    /** width of the element */
-    width?: RangeSliderWidth;
-    /** Additional CSS classes */
-    className?: string;
-}
-declare const RangeSlider: React$1.FC<RangeSliderProps>;
+declare const PromotionCardContent: React$1.FC<PromotionCardContentProps>;
 
-type SelectOption = {
-    text: string;
-    value: string;
-} | string;
-type SelectSize = "default" | "large";
-type SelectWidth = "default" | "12ch" | "shrink" | "fullwidth";
-interface SelectProps extends Omit<React$1.SelectHTMLAttributes<HTMLSelectElement>, "size"> {
-    /** Forwarded DOM element ref. */
-    elemRef?: React$1.Ref<HTMLSelectElement>;
-    /** Html id attribute. */
-    id?: string;
-    /** Disabled state. */
-    isDisabled?: boolean;
-    /** Invalid state. */
-    isInvalid?: boolean;
-    /** Html name attribute. */
-    name?: string;
-    /** Select option can be specified via children or as options array */
-    options?: SelectOption[];
-    /** Size of element. */
-    size?: SelectSize;
-    /** Select value. */
-    value?: string | string[];
-    /** Element width */
-    width?: SelectWidth;
-    /** Additional CSS classes */
+interface PromotionCardImageWrapperProps {
     className?: string;
-    /** Child elements */
     children?: React$1.ReactNode;
+    [key: string]: any;
 }
-declare const Select: React$1.FC<SelectProps>;
+declare const PromotionCardImageWrapper: React$1.FC<PromotionCardImageWrapperProps>;
 
-type TextAreaSize = "default" | "large";
-type TextAreaWidth = "default" | "fullwidth";
-interface TextAreaProps extends React$1.TextareaHTMLAttributes<HTMLTextAreaElement> {
-    /** Html id attribute. */
-    id: string;
-    /** Disabled state. */
-    isDisabled?: boolean;
-    /** Invalid state */
-    isInvalid?: boolean;
-    /** Readonly state. */
-    isReadonly?: boolean;
-    /** Valid state */
-    isValid?: boolean;
-    /** Html name attribute. If not present, id is used.*/
-    name?: string;
-    /** Placeholder text */
-    placeholder?: string;
-    /** Size of element. */
-    size?: TextAreaSize;
-    /** Input width */
-    width?: TextAreaWidth;
-    /** Additional CSS classes */
+interface PromotionCardSectionProps {
+    /** Inverse colors */
+    isInverse?: boolean;
     className?: string;
-    /** Child elements */
     children?: React$1.ReactNode;
+    [key: string]: any;
 }
-declare const TextArea: React$1.FC<TextAreaProps>;
+declare const PromotionCardSection: React$1.FC<PromotionCardSectionProps>;
 
-type TextInputSize = "default" | "large";
-type TextInputWidth = "3ch" | "8ch" | "12ch" | "default" | "fullwidth";
-type TextInputType = "email" | "hidden" | "password" | "search" | "tel" | "number" | "text" | "url";
-interface TextInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size"> {
-    /** Input html type. */
-    htmlType?: TextInputType;
-    /** Html id attribute. */
-    id: string;
-    /** Disabled state. */
-    isDisabled?: boolean;
-    /** Invalid state */
-    isInvalid?: boolean;
-    /** Readonly state. */
-    isReadonly?: boolean;
-    /** Valid state */
-    isValid?: boolean;
-    /** Html name attribute. If not present, id is used.*/
-    name?: string;
-    /** Placeholder text */
-    placeholder?: string;
-    /** Size of element. */
-    size?: TextInputSize;
-    /** Input value. */
-    value?: string;
-    /** Input width */
-    width?: TextInputWidth;
-    /** Additional CSS classes */
+interface PromotionCardTitleProps {
     className?: string;
+    children: React$1.ReactElement;
+    [key: string]: any;
 }
-declare const TextInput: React$1.ForwardRefExoticComponent<TextInputProps & React$1.RefAttributes<HTMLInputElement>>;
+declare const PromotionCardTitle: React$1.FC<PromotionCardTitleProps>;
 
-interface InputStepperConfig {
-    min?: number;
-    max?: number;
-    defaultValue?: number;
-    nonEditableInput?: boolean;
-}
-interface InputStepperProps {
-    config?: InputStepperConfig;
-    id: string;
-    inputClassName?: string;
-    isDisabled?: boolean;
-    colorScheme?: "light" | "dark";
-    name?: string;
-    nonEditableInput?: boolean;
+declare const sectionColors: readonly ["background-secondary", "background-contrast", "background-accent", "background-accent1-blog", "background-accent2-blog", "background-none", "surface-subtle"];
+type SectionColor = (typeof sectionColors)[number];
+type SectionSpacing = "default" | "small" | "xsmall";
+interface SectionProps {
+    /** Background color of section */
+    color?: SectionColor;
+    /**
+     * Spacing between sections
+     *
+     * if two sections with different color meet
+     * use default (larger) spacing, if two section have same color
+     * use small spacing on second one. Use xsmall for specific
+     * cases e.g. as part of Megamenu
+     */
+    spacing?: SectionSpacing;
+    /** Rendered HTML element */
+    tag?: React$1.ElementType;
+    /** Additional CSS classes */
     className?: string;
-    [key: string]: any;
+    /** Section content */
+    children?: React$1.ReactNode;
+    /** Additional classes passed to the container */
+    containerClassName?: string;
 }
-declare const InputStepper: React$1.FC<InputStepperProps>;
+declare const Section: React$1.FC<SectionProps>;
 
 declare const Skeleton: React$1.FC<React$1.HTMLAttributes<HTMLSpanElement>>;
 
-declare const pillColors: readonly ["white", "gray", "transparent"];
-type PillColor = (typeof pillColors)[number];
-interface PillProps extends HTMLAttributes<HTMLSpanElement> {
-    className?: string;
-    children?: ReactNode;
-    color?: PillColor;
-    size?: "small" | "medium" | "large" | "xlarge" | "xxlarge";
-    colorScheme?: "light" | "dark";
+interface SkipLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    href?: string;
 }
-declare const Pill: React$1.FC<PillProps>;
+declare const SkipLink: React$1.FC<SkipLinkProps>;
+
+type SocialName = "x" | "facebook-2" | "linkedin-2" | "instagram" | "pinterest" | "snapchat" | "tiktok" | "whatsapp" | "youtube" | "email";
+type CommonProps$1 = {
+    name: SocialName;
+    className?: string;
+};
+type ButtonProps$1 = CommonProps$1 & Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "type" | keyof CommonProps$1>;
+type LinkProps = CommonProps$1 & Omit<React$1.AnchorHTMLAttributes<HTMLAnchorElement>, keyof CommonProps$1> & {
+    href: string;
+};
+type SocialButtonProps = ButtonProps$1 | LinkProps;
+declare const SocialButton: React$1.ForwardRefExoticComponent<SocialButtonProps & React$1.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 
 declare const showTitlesFromOptions: readonly ["md", "lg", "xl"];
 type ShowTitlesFrom = (typeof showTitlesFromOptions)[number];
@@ -1210,65 +1336,17 @@ interface StepbarProps extends React$1.HTMLAttributes<HTMLElement> {
     showTitlesFrom?: ShowTitlesFrom;
     /** Array of step objects */
     steps: StepbarStep[];
-    /** Visual variant of the stepbar */
-    colorScheme?: "dark" | "light";
 }
 declare const Stepbar: React$1.FC<StepbarProps>;
 
-interface TabPanelProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** Optional href for the tab */
-    href?: string;
-    /** Tabpanel id */
-    id?: string;
-    /** Active state */
-    isActive?: boolean;
-    /** Whether the tab is disabled */
-    isDisabled?: boolean;
-    /** Tab content/label */
-    tab?: React.ReactNode;
-    /** Custom render function for tab */
-    renderTab?: (props: TabPanelProps) => React.ReactElement;
-    /** Additional class names */
-    className?: string;
-    /** Children components */
-    children?: React.ReactNode;
-}
-declare const TabPanel: React.FC<TabPanelProps>;
-
-declare const variants: readonly ["standard", "light"];
-type TabsVariant = (typeof variants)[number];
-interface TabsProps extends React$1.HTMLAttributes<HTMLUListElement> {
-    /** Active Tab index */
-    activeTabIndex?: number;
-    /** Additional classes for tabs header. */
-    classesTabNav?: string;
-    /** Color theme for the tabs */
-    colorScheme?: "dark" | "light";
-    /** All tabs have equal width inside a full-width container */
-    hasEqualTabWidth?: boolean;
-    /** Fullwidth container */
-    isFullWidth?: boolean;
-    /** Tabs behave as links rather than tabs */
-    isLink?: boolean;
-    /** Visual variant of the tabs */
-    variant?: TabsVariant;
-    /** Tab panels as children */
-    children: React$1.ReactElement<TabPanelProps>[];
-}
-declare const Tabs: React$1.FC<TabsProps>;
-
-interface TabProps extends React.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {
-    /** Id of the tabpanel this tab controls. */
-    controls?: string;
-    href?: string;
-    /** Active state */
-    isActive?: boolean;
-    /** Disabled state. */
-    isDisabled?: boolean;
+interface StickerProps {
+    color?: "black" | "orange";
+    size?: "small";
+    children?: React$1.ReactNode;
     className?: string;
-    children?: React.ReactNode;
+    [key: string]: any;
 }
-declare const Tab: React.FC<TabProps>;
+declare const Sticker: React$1.FC<StickerProps>;
 
 interface CellValue {
     value: React$1.ReactNode;
@@ -1304,6 +1382,8 @@ interface TableProps extends React$1.TableHTMLAttributes<HTMLTableElement> {
     headers: TableHeader[];
     /** Compact table only takes spaced needed to display its content */
     isCompact?: boolean;
+    /** Enable responsive card layout below md breakpoint for better accessibility */
+    isResponsive?: boolean;
     /** If table has horizontal scrollbar */
     isScrollable?: boolean;
     /** Different colors for even and odd rows. */
@@ -1311,27 +1391,114 @@ interface TableProps extends React$1.TableHTMLAttributes<HTMLTableElement> {
     /** rows to print out in the table. */
     rows: TableRow[];
     className?: string;
-    /** Sets color scheme */
-    colorScheme?: "dark" | "light";
 }
 declare const Table: React$1.FC<TableProps>;
 
-type TileColor = "default" | "white";
+interface TabProps extends React.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {
+    /** Id of the tabpanel this tab controls. */
+    controls?: string;
+    href?: string;
+    /** Active state */
+    isActive?: boolean;
+    /** Disabled state. */
+    isDisabled?: boolean;
+    className?: string;
+    children?: React.ReactNode;
+}
+declare const Tab: React.FC<TabProps>;
+
+interface TabPanelProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Optional href for the tab */
+    href?: string;
+    /** Tabpanel id */
+    id?: string;
+    /** Active state */
+    isActive?: boolean;
+    /** Whether the tab is disabled */
+    isDisabled?: boolean;
+    /** Tab content/label */
+    tab?: React.ReactNode;
+    /** Custom render function for tab */
+    renderTab?: (props: TabPanelProps) => React.ReactElement;
+    /** Additional class names */
+    className?: string;
+    /** Children components */
+    children?: React.ReactNode;
+}
+declare const TabPanel: React.FC<TabPanelProps>;
+
+interface TabsProps extends React$1.HTMLAttributes<HTMLUListElement> {
+    /** Active Tab index */
+    activeTabIndex?: number;
+    /** Additional classes for tabs header. */
+    classesTabNav?: string;
+    /** All tabs have equal width inside a full-width container */
+    hasEqualTabWidth?: boolean;
+    /** Fullwidth container */
+    isFullWidth?: boolean;
+    /** Tabs behave as links rather than tabs */
+    isLink?: boolean;
+    /** Tab panels as children */
+    children: React$1.ReactElement<TabPanelProps>[];
+}
+declare const Tabs: React$1.FC<TabsProps>;
+
+type TagButtonProps = {
+    className?: string;
+    onClick?: React$1.MouseEventHandler<HTMLButtonElement>;
+    children?: React$1.ReactNode;
+    isDisabled?: boolean;
+    ariaLabel?: string;
+    iconName: string;
+    size?: string;
+};
+declare const TagButton: React$1.ForwardRefExoticComponent<TagButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+declare const colors: readonly ["black", "orange", "yellow", "green", "blue", "success", "info", "warning", "danger", "transparent"];
+type TagColor = (typeof colors)[number];
+type TagSize = "small" | "large";
+interface CommonProps {
+    color?: TagColor;
+    size?: TagSize;
+    isDisabled?: boolean;
+    className?: string;
+    children?: React$1.ReactNode;
+    actionButton?: React$1.ReactElement<TagButtonProps>;
+}
+type SpanProps = CommonProps & Omit<React$1.HTMLAttributes<HTMLSpanElement>, keyof CommonProps> & {
+    onClick?: undefined;
+    href?: undefined;
+};
+type ButtonProps = CommonProps & Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, keyof CommonProps> & {
+    onClick: React$1.MouseEventHandler<HTMLButtonElement>;
+    href?: undefined;
+};
+type AnchorProps = CommonProps & Omit<React$1.AnchorHTMLAttributes<HTMLAnchorElement>, keyof CommonProps> & {
+    href: string;
+    onClick?: undefined;
+};
+type TagProps = SpanProps | ButtonProps | AnchorProps;
+declare const Tag: React$1.ForwardRefExoticComponent<TagProps & React$1.RefAttributes<HTMLElement>>;
+
+interface TestimonialProps {
+    className?: string;
+    children?: React$1.ReactNode;
+    color?: "default" | "orange";
+    isDiv?: boolean;
+    [key: string]: any;
+}
+declare const Testimonial: React$1.FC<TestimonialProps>;
+
 type TileHAlign = "center";
 type TileVAlign = "center" | "end" | "space-between";
+type TileVariant = "compact" | "action";
 interface TileProps extends React$1.HTMLAttributes<HTMLDivElement> {
-    /** Tile color. */
-    color?: TileColor;
     /** Horizontal alignment of the tile content. */
     hAlign?: TileHAlign;
     /** Vertical alignment of the tile content. */
     vAlign?: TileVAlign;
-    /** variant can be "image" or "action" */
-    variant?: "image" | "action";
-    /** Alt and src attributes are required */
-    backgroundImage?: React$1.ComponentProps<typeof Image>;
-    /** Use small spacing */
-    space?: "small";
+    /** Tile variant. */
+    variant?: TileVariant;
     children?: ReactNode;
     className?: string;
 }
@@ -1357,7 +1524,6 @@ interface TooltipProps extends React$1.HTMLAttributes<HTMLElement> {
     /** Additional CSS classes */
     className?: string;
     children?: React$1.ReactNode;
-    colorScheme?: "dark" | "light";
 }
 declare const Tooltip: React$1.FC<TooltipProps>;
 
@@ -1367,126 +1533,4 @@ type InfoTooltipProps = Omit<TooltipProps, "onAbort"> & Omit<React$1.HTMLAttribu
 };
 declare const InfoTooltip: React$1.FC<InfoTooltipProps>;
 
-interface CoverProps {
-    /** Background image source. URL string or an object of breakpoint: url pairs
-     *
-     * ```
-  {
-    default: string, // default image to load (fallback)
-    xxxl: string, // different image for each breakpoint (optional). while these are mobile first breakpoints, they MUST be ordered from largest to smallest
-    xxl: string,
-    xl: string,
-    lg: string,
-    md: string,
-    sm: string,
-    xs: string,
-  }
-    * ```
-    */
-    bgSrc: string | {
-        default: string;
-        xs?: string;
-        sm?: string;
-        md?: string;
-        lg?: string;
-        xl?: string;
-        xxl?: string;
-        xxxl?: string;
-    };
-    /** Set vertical position of image */
-    bgPosition?: 'top' | 'center' | 'bottom';
-    /** Applies custom classNames to overlay content */
-    contentClass?: string;
-    /** Cover size */
-    size?: 'small' | 'medium' | 'large';
-    /** Additional className for the cover container */
-    className?: string;
-    /** Children content */
-    children?: React$1.ReactNode;
-    /** Additional props passed to Image component */
-    [key: string]: any;
-}
-declare const Cover: React$1.FC<CoverProps>;
-
-interface TestimonialProps {
-    className?: string;
-    children?: React$1.ReactNode;
-    color?: 'default' | 'orange';
-    isDiv?: boolean;
-    [key: string]: any;
-}
-declare const Testimonial: React$1.FC<TestimonialProps>;
-
-type HeroBackground = "white" | "black" | "gray";
-type HeroTextSize = "medium" | "large";
-type StickerColor = "black" | "orange";
-interface HeroImageSrc {
-    src: string;
-    srcSet?: string;
-}
-interface HeroImageResponsive {
-    default: string;
-    sm?: string;
-    lg?: string;
-    xl?: string;
-    xxl?: string;
-    [key: string]: string | undefined;
-}
-type HeroImage = HeroImageSrc | HeroImageResponsive;
-interface HeroPriceObject {
-    amount: number;
-    prefix?: React$1.ReactNode;
-    suffix?: React$1.ReactNode;
-}
-type HeroPrice = string | HeroPriceObject;
-interface HeroButtonProps {
-    children: React$1.ReactNode;
-    [key: string]: any;
-}
-interface HeroStickerProps {
-    color?: StickerColor;
-    children?: React$1.ReactNode;
-    className?: string;
-}
-interface HeroProps {
-    /** Background spanning whole viewport width */
-    colorScheme?: HeroBackground;
-    /** Action button props */
-    button?: HeroButtonProps;
-    /** Main text */
-    description?: React$1.ReactNode;
-    hasFullwidthImage?: boolean;
-    /** Gradient overlay ensures proper text readability */
-    hasGradientOverlay?: boolean;
-    /** Use svg illustrations, png for product images and jpg for photos */
-    image?: HeroImage;
-    price?: HeroPrice;
-    sticker?: HeroStickerProps;
-    /** Adjust title and description size. Medium sets display-2 title and 18px text, large uses display-1 title and 20px text.  */
-    textSize?: HeroTextSize;
-    /** Hero title */
-    title: string;
-}
-declare const Hero: React$1.FC<HeroProps>;
-
-interface IconListItem {
-    icon: string;
-    content: React$1.ReactNode;
-    tooltip?: React$1.ReactNode;
-}
-interface IconListProps {
-    items?: IconListItem[];
-    className?: string;
-    [key: string]: any;
-}
-declare const IconList: React$1.FC<IconListProps>;
-
-interface ItemProps {
-    icon: string;
-    children: React$1.ReactNode;
-    tooltip?: React$1.ReactNode;
-    [key: string]: any;
-}
-declare const Item: React$1.FC<ItemProps>;
-
-export { Accordion, AccordionItem, Alert, AnchorNavigation, Autocomplete, Bar, BarBreak, BarItem, BlockAction, BlockActionControl, BlockActionIndicator, BlockActionOverride, BodyBanner, Breadcrumbs, Button, ButtonFill, ButtonGhost, ButtonPrimary, Buttons, Card, CardProductHeader, CardSection, Carousel, CarouselHero, CarouselPromotions, CartTable, Checkbox, Container, Controls, Cover, Divider, Dropdown, DropdownDivider, DropdownItem, DropdownToggleButton, Expander, FeatureAccordion, FeatureAccordionItem, Field, Fieldset, File, Gauge, Grid, GridCol, Group, Hero, Hint, Icon, IconButton, IconList, Image, InfoTooltip, InputStepper, Item, Label, Link, List, ListItem, Loader, Message, Modal, ModalBody, ModalCloseButton, ModalProductHeader, ModalTitle, Pagination, Pictogram, Pill, Progress, PromoBanner, PromotionCard, PromotionCardContent, PromotionCardImageWrapper, PromotionCardSection, PromotionCardTitle, Radio, RangeSlider, Section, Select, Skeleton, SkipLink, Stepbar, Sticker, Tab, TabPanel, Table, Tabs, Tag, TagButton, Testimonial, TextArea, TextInput, Tile, Tooltip };
+export { Accordion, AccordionItem, Alert, AnchorNavigation, Autocomplete, Bar, BarBreak, BarItem, BlockAction, BlockActionControl, BlockActionIndicator, BlockActionOverride, BodyBanner, Breadcrumbs, Button, ButtonFill, ButtonGhost, ButtonPrimary, Buttons, Card, CardProductHeader, CardSection, Carousel, CarouselHero, CarouselHeroItem, CarouselPromotions, CartTable, Checkbox, Container, Controls, Cover, Divider, Dropdown, DropdownDivider, DropdownItem, DropdownToggleButton, Expander, FeatureAccordion, FeatureAccordionItem, Field, Fieldset, File, Gauge, Grid, GridCol, Group, Hero, Hint, Icon, IconButton, IconList, Image, InfoTooltip, InputStepper, Item, Label, Link, List, ListItem, Loader, LoaderFullscreen, Megamenu, MegamenuBlog, Message, Modal, ModalBody, ModalCloseButton, ModalProductFooter, ModalProductHeader, ModalTitle, Pagination, Pictogram, Pill, Progress, PromoBanner, PromotionCard, PromotionCardContent, PromotionCardImageWrapper, PromotionCardSection, PromotionCardTitle, Radio, RangeSlider, Section, Select, Skeleton, SkipLink, SocialButton, SpritePathContext, SpritePathProvider, Stepbar, Sticker, Tab, TabPanel, Table, Tabs, Tag, TagButton, Testimonial, TextArea, TextInput, Tile, Tooltip };