@arc-ui/components 12.0.0-beta.13 → 12.0.0-beta.14.1

package/lib/index.d.mts

@@ -0,0 +1,4040 @@
+import React$1, { FC, ReactNode, SVGProps, HTMLAttributes, MouseEvent as MouseEvent$1, ChangeEvent, ReactElement } from 'react';
+import { ImageProps as ImageProps$1 } from 'src/components/Image/Image';
+import { VideoPlayerProps as VideoPlayerProps$1 } from 'src/components/VideoPlayer';
+import { SwitchProps as SwitchProps$1 } from '@radix-ui/react-switch';
+import { ArcIcon as ArcIcon$1 } from 'src/types/arc-icon';
+import { ReactPlayerProps } from 'react-player';
+
+/**
+ * Use `Align` to align items horizontally or vertically.
+ */
+declare const Align: FC<AlignProps>;
+interface AlignProps {
+    /**
+     * Contents of the Align. Each item will be wrapped in an AlignItem component.
+     */
+    children: ReactNode;
+    /**
+     * Horizontal alignment of the Align children.
+     */
+    horizontal?: "left" | "center" | "right";
+    /**
+     * Should the Align child wrappers be visible for debugging and documentation
+     * purposes?
+     */
+    isDebugVisible?: boolean;
+    /**
+     * Vertical alignment of the Align children.
+     */
+    vertical?: "top" | "center" | "bottom";
+}
+
+type ArcIcon = React.FC<SVGProps<SVGSVGElement>>;
+
+/** Use `Alert` to inform the user of important changes or actions. */
+declare const Alert: FC<AlertProps>;
+interface AlertProps {
+    /**
+     * Determine a heading for `<Alert />`
+     */
+    heading: string;
+    /**
+     * Determine a description for `<Alert />`
+     */
+    description?: string | ReactNode;
+    /**
+     * Determine a link for `<Alert />`
+     */
+    link?: string;
+    /**
+     * Determine the text to link
+     */
+    linkText?: string;
+    /**
+     * Determine a icon to display within `<Alert />`. This overrides the default icons.
+     */
+    icon?: ArcIcon;
+    /**
+     * Determine the type of alert
+     */
+    status?: AlertStatus;
+    /**
+     * Determine showing a dismiss icon within `<Alert />`
+     */
+    isDismissable?: boolean;
+    /**
+     * Execute a function when dismiss is envoked
+     */
+    onDismiss?: () => void;
+    /**
+     * Execute a function when link is envoked. This prevents the default behaviour for `<a >` Tag
+     */
+    onLinkClick?: () => void;
+    /**
+     * Text to override `linkText` with additional, more precise information
+     * specifically for screen reader users.
+     */
+    linkAriaLabel?: string;
+}
+type AlertStatus = "general" | "error" | "warning" | "success";
+
+declare const AppButton: React$1.FC<AppButtonProps>;
+type AppButtonType = "google-play" | "apple-app-store";
+interface AppButtonProps {
+    type: AppButtonType;
+    screenReaderText: string;
+    url: string;
+}
+
+declare const anchorPoints: readonly ["N", "NE", "E", "SE", "S", "SW", "W", "NW", "C"];
+
+/**
+ * Use `Image` to render a single image, or set of images, with support for
+ * image fitting and art direction.
+ */
+declare const Image: FC<ImageProps> & {
+    Source: typeof ImageSource;
+};
+declare const ImageSource: FC<ImageSourceProps>;
+interface ImageSourceProps {
+    /**
+     * The intrinsic height of the ImageSource, in pixels
+     */
+    height?: number;
+    /**
+     * Media condition (similar to a media query) that the user agent will evaluate for each ImageSource element. Same format as [media](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#attr-media), i.e. `(min-width: 600px)`
+     */
+    media?: string;
+    /**
+     * The HTML [sizes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#attr-sizes) attribute. Only required if srcSet is switching widths.
+     */
+    sizes?: string;
+    /**
+     * A comma-separated list indicating a set of possible sources for the user agent to use for different screen sizes for the ImageSource element. Same format as [srcSet](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#attr-srcset), i.e. `my-image-200.png 200w, my-image-200.png 200w`.
+     */
+    srcSet: string;
+    /**
+     * MIME type for the resource URL(s) in the ImageSource element's srcset attribute. If the user agent does not support the given type, the element is skipped. Same format as [type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#attr-type), i.e. `image/jpeg`.
+     */
+    type?: string;
+    /**
+     * The intrinsic width of the ImageSource, in pixels
+     */
+    width?: number;
+}
+declare const fitOptions: readonly ["cover"];
+declare const loadingOptions: readonly ["eager", "lazy"];
+declare const overlayOptions: readonly ["scrimBottomDark"];
+interface ImageProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * Alternative text for the Image, shown if the image cannot be displayed.
+     */
+    alt?: string;
+    /**
+     * Anchor point for the Image if using fit="cover".
+     */
+    anchor?: (typeof anchorPoints)[number];
+    /**
+     * Optionally enable HTML <picture> functionality by passing `Image.Source`
+     * components as children.
+     */
+    children?: ReactNode;
+    /**
+     * Fallback hexadecimal fill color. The intent is to increase perceived loading speed. Do not use on images with transparency. Requires that an explicit width and height be set for the image.
+     */
+    fillColor?: string;
+    /**
+     * Fit of the Image.
+     */
+    fit?: (typeof fitOptions)[number];
+    /**
+     * Height dimension of the Image, in pixels. If fit="cover", the height in which
+     * to fit the Image. Otherwise, the intrinsic height of the Image element.
+     */
+    height?: number;
+    /**
+     * If true the image will fade in when its loaded, resulting in a smooth user experience.
+     */
+    fadeOnLoad?: boolean;
+    /**
+     * Loading behaviour of the Image.
+     */
+    loading?: (typeof loadingOptions)[number];
+    /**
+     * Apply an overlay to the Image, e.g. a scrim gradient for text legibility.
+     * Should not be used if the image has a rasterized overlay.
+     */
+    overlay?: (typeof overlayOptions)[number];
+    /**
+     * The HTML [sizes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Example_4_Using_the_srcset_and_sizes_attributes) attribute. Only required if srcSet is switching widths. Ignored if `children` (<source> elements) are present.
+     */
+    sizes?: string;
+    /**
+     * Image `src`. Used if srcSet is not defined, or as a fallback.
+     */
+    src: string;
+    /**
+     * A comma-separated list indicating a set of possible sources for the user agent to use for different screen sizes for the Image. Same format as [srcSet](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Example_4_Using_the_srcset_and_sizes_attributes), i.e. `my-image-200.png 200w, my-image-200.png 200w`. Ignored if `children` (<source> elements) are present.
+     */
+    srcSet?: string;
+    /**
+     * Width dimension of the Image, in pixels. If fit="cover", the width in which
+     * to fit the Image. Otherwise, the intrinsic width of the Image element.
+     */
+    width?: number;
+}
+
+type AvatarImage = Pick<ImageProps, "src" | "loading" | "sizes" | "srcSet" | "width" | "height" | "alt" | "fadeOnLoad">;
+
+type AvatarSize = "s" | "m" | "l" | "xl";
+
+/** Use `Avatar` to visually represent a user. */
+declare const Avatar: React$1.FC<AvatarProps>;
+interface AvatarProps {
+    initials?: string;
+    href?: string;
+    title?: string;
+    ariaLabel?: string;
+    onClick?: (e: React$1.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
+    img?: AvatarImage;
+    size?: AvatarSize;
+}
+
+type GroupAvatar = Omit<AvatarProps, "size" | "title" | "href" | "onClick">;
+
+/** Use `AvatarGroup` to visually represent a group of users. */
+declare const AvatarGroup: React$1.FC<AvatarGroupProps>;
+interface AvatarGroupProps {
+    avatars: GroupAvatar[];
+    size?: AvatarSize;
+    max?: number;
+    title?: string;
+    ariaLabel?: string;
+    href?: string;
+    onClick?: (e: React$1.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
+}
+
+/** Use `Badge` as a static, non-interactive way to provide short updates. */
+declare const Badge: FC<BadgeProps>;
+interface BadgeProps {
+    /**
+     * Text to display within Badge
+     */
+    children: ReactNode;
+    /**
+     * State of the Badge
+     */
+    state?: "default" | "error" | "warning" | "success";
+    /**
+     * Aria label for accessibility
+     */
+    ariaLabel?: string;
+    /**
+     * Aria Role for accessibility
+     */
+    ariaRole?: "status" | "alert";
+}
+
+/**
+ * Use `Heading` to display heading text.
+ */
+declare const Heading: FC<HeadingProps> & {
+    Proposition: typeof HeadingProposition;
+};
+declare const HeadingProposition: FC<HeadingPropositionProps>;
+interface HeadingPropositionProps {
+    /**
+     * Text to display in the Proposition.
+     */
+    children: ReactNode;
+}
+type HeadingCasing = "auto" | "none";
+type HeadingColor = "auto" | "brand";
+type HeadingLevel = "1" | "2" | "3" | "4" | "5" | "6";
+type HeadingSize = "xxxs" | "xxs" | "xs" | "s" | "m" | "l" | "xl" | "xxl" | "xxxl";
+interface HeadingProps {
+    /**
+     * Text alignment of the Heading.
+     */
+    align?: "left" | "center" | "right";
+    /**
+     * Typographic casing of the Heading.
+     */
+    casing?: HeadingCasing;
+    /**
+     * Text and inline markup to display in the Heading.
+     */
+    children: ReactNode;
+    /**
+     * The color of the Heading.
+     */
+    color?: HeadingColor;
+    /**
+     * Id for the Heading.
+     */
+    id?: string;
+    /**
+     * HTML section heading level. If not provided, the Heading will render as
+     * a span.
+     */
+    level?: HeadingLevel;
+    /**
+     * Typographic size of the Heading.
+     */
+    size?: HeadingSize;
+    /**
+     * Should the Heading component be styled as an inline element?
+     */
+    isInline?: boolean;
+}
+
+declare const TemplateBanner: React$1.FC<TemplateBannerProps>;
+type TemplateBannerStyle = "light" | "dark" | "contained";
+type TemplateBannerAlignment = "top" | "bottom" | "center";
+interface TemplateBannerImage extends Pick<ImageProps, "src" | "alt" | "loading" | "sizes" | "srcSet" | "anchor" | "fadeOnLoad" | "fit"> {
+    alignment?: TemplateBannerAlignment;
+}
+interface TemplateBannerProps {
+    /**
+     * Align content for TemplateBanner
+     */
+    alignment?: "start" | "center";
+    /**
+     * Heading for the TemplateBanner.
+     */
+    heading: string;
+    /**
+     * Image props for the TemplateBanner. Consider avoiding alt if the image is for decorative purposes only.
+     */
+    img?: TemplateBannerImage;
+    /**
+     * Provides a min height for the TemplateBanner.
+     */
+    minHeight?: string | number;
+    /**
+     * If true the image will appear on the left and the content will be on the right. Doesn't apply to mobile devices.
+     */
+    isReversed?: boolean;
+    /**
+     * Adds a gradient box shadow to the TemplateBanner.
+     */
+    isElevated?: boolean;
+    /**
+     * Content for the TemplateBanner.
+     */
+    children?: React$1.ReactNode;
+    /**
+     * Heading level for the ImpactCard heading.
+     */
+    headingLevel?: HeadingLevel;
+    /**
+     * Heading size for the ImpactCard heading.
+     */
+    headingSize?: Extract<HeadingSize, "m" | "xl">;
+    /**
+     * Uppercase label for the TemplateBanner.
+     */
+    label?: string;
+    /**
+     * Text content for the TemplateBanner.
+     */
+    text?: ReactNode;
+    /**
+     * Sets a dark or light background for the TemplateBanner.
+     */
+    type?: TemplateBannerStyle;
+    /**
+     * Defines the ratio of the content area within the banner layout.
+     */
+    contentRatio?: "2/3" | "1/1" | "1/0";
+    /**
+     * Add Additional top margin to banner
+     */
+    additionalTopMargin?: boolean;
+}
+
+declare const Banner: FC<BannerProps>;
+type BannerProps = Omit<TemplateBannerProps, "headingSize" | "additionalTopMargin">;
+
+type SurfaceBackground = "light" | "dark";
+declare const Context$1: React$1.Context<{
+    surface: SurfaceBackground;
+}>;
+/**
+ * Use `Surface` to compose content using the Arc system.
+ */
+declare const Surface: FC<SurfaceProps>;
+declare const backgrounds: readonly ["dark-black", "dark-brand-01", "dark-brand-02", "dark-neutral-01", "dark-neutral-02", "light-brand-01", "light-brand-02", "light-neutral-01", "light-neutral-02", "light-white"];
+declare const backgroundsBT: readonly ["dark-black", "dark-brand-01", "dark-brand-02", "dark-neutral-01", "dark-neutral-02", "light-brand-01", "light-brand-02", "light-neutral-01", "light-neutral-02", "light-white"];
+type SurfacePadding = "8" | "12" | "16" | "24" | "32" | "48" | "64";
+type SurfaceBackgroundColor = "dark-black" | "dark-brand-01" | "dark-brand-02" | "dark-neutral-01" | "dark-neutral-02" | "light-brand-01" | "light-brand-02" | "light-neutral-01" | "light-neutral-02" | "light-white";
+interface SurfaceProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * Background colour of the Surface. Contents will change colour to meet
+     * accessibility requirements.
+     */
+    background?: SurfaceBackgroundColor;
+    /**
+     * Should the Surface be transparent? When true, no background colour will be applied.
+     */
+    isTransparent?: boolean;
+    /**
+     * Content to display on the Surface.
+     */
+    children?: any;
+    /**
+     * Should the Surface grow to take up all the available vertical space? Most
+     * of the time this should not be required, but useful to fix issues in
+     * certain layout combinations.
+     */
+    growVertically?: boolean;
+    /**
+     * _Caution: This is an experimental property and may be removed at any time._
+     *
+     * Size of the padding applied to all sides of the Surface. Use to prevent margin collapsing issues.
+     */
+    padding?: SurfacePadding;
+    /**
+     * _Caution: This is an experimental property and may be removed at any time._
+     *
+     * Size of the horizontal padding applied to the left and right of the Surface.
+     */
+    paddingHorizontal?: SurfacePadding;
+    /**
+     * _Caution: This is an experimental property and may be removed at any time._
+     *
+     * Size of the vertical padding applied to the top and bottom of the Surface.
+     */
+    paddingVertical?: SurfacePadding;
+}
+
+/**
+ * Use `Box` as a simple way to group bespoke content and interactive elements together.
+ */
+declare const Box: FC<BoxProps>;
+interface BoxProps {
+    /**
+     * Contents of the Box.
+     */
+    children: React$1.ReactNode;
+    /**
+     * Set Box to fill parent element.
+     */
+    isFullHeight?: boolean;
+    /**
+     * Add rounded corners to the box.
+     */
+    isBorderRadius?: boolean;
+    /**
+     * The border width of the box.
+     */
+    borderWidth?: "thin" | "medium";
+    /**
+     * Box shadow for the box.
+     */
+    elevationLevel?: "1" | "2";
+    /**
+     * Padding for the box.
+     */
+    padding?: SurfacePadding;
+    /**
+     * Background color for the box.
+     */
+    surface?: SurfaceBackgroundColor;
+    /**
+     * Determine if the background color is transparent.
+     */
+    isSurfaceTransparent?: boolean;
+}
+
+/**
+ * Use `BrandLogo` to display the brand logo.
+ */
+declare const BrandLogo: FC<BrandLogoProps>;
+declare const colors$1: readonly ["auto", "brand"];
+declare const subBrands: readonly ["redcare", "wholesale", "ee"];
+interface BrandLogoProps {
+    /**
+     * Color of the BrandLogo. The `brand` color only shows on light surfaces.
+     */
+    color?: (typeof colors$1)[number];
+    /**
+     * Accessible text for the BrandLogo.
+     */
+    label?: string;
+    /**
+     * Size of the BrandLogo, in pixels.
+     */
+    size?: number;
+    /**
+     * Optional sub-brand variant.
+     */
+    subBrand?: (typeof subBrands)[number];
+}
+
+declare const BreadcrumbsItem: FC<ItemProps$2>;
+interface ItemProps$2 {
+    /**
+     * Render child elements within `Breadcrumbs.Item`
+     */
+    children?: ReactNode;
+    /**
+     * Use icon as a spacer that will be positioned after `Breadcrumbs.Item`.
+     */
+    spacerIconAfter?: boolean;
+    /**
+     * Use icon as a spacer that will be positioned before `Breadcrumbs.Item`.
+     */
+    spacerIconBefore?: boolean;
+}
+
+declare const BreadcrumbsLink: FC<LinkProps$1>;
+interface LinkProps$1 {
+    /**
+     * Render children of `breadcrumbs.link`
+     */
+    children?: ReactNode;
+    /**
+     * Where breadcrumb linkshould lead too
+     */
+    href?: string;
+    /**
+     * Pass a function to the breadcrumb item
+     */
+    onClick?: () => void;
+    /**
+     * Highlights item in breadcrumb (This also removes the a tag and any links)
+     */
+    isActive?: boolean;
+    /**
+     * Ref to `<a>` tag
+     */
+    ref?: React$1.Ref<HTMLAnchorElement>;
+    /**
+     * React router property
+     */
+    navigate?: () => void;
+}
+
+/** Use `Breadcrumbs` to add a secondary navigation scheme that reveals the user’s location. Each item should be wrapped with `Breadcrumbs.Item` */
+declare const Breadcrumbs: FC<BreadcrumbsProps> & {
+    Item: typeof BreadcrumbsItem;
+    Link: typeof BreadcrumbsLink;
+};
+interface BreadcrumbsProps {
+    /**
+     * Contents of the Breadcrumbs. Should only contain `Breadcrumb.Item`.
+     */
+    children: ReactNode;
+    /**
+     * Select if you want the Nav items to be Light
+     */
+    isLight?: boolean;
+}
+
+type ElementUnion$2 = HTMLButtonElement | HTMLAnchorElement;
+type Ref$2 = React$1.Ref<ElementUnion$2> | null;
+/**
+ * Use `Button` to let a user complete an action like ‘Log in’ or ‘Register’.
+ */
+declare const Button: FC<ButtonProps>;
+interface ButtonElementProps {
+    /**
+     * Default behavior of the Button element. If not provided, 'submit' will
+     * be inferred. Type 'reset' deliberately excluded.
+     */
+    type?: "button" | "submit";
+    /**
+     * Refers to the id of a form so it can be submitted if the button exists outside of it.
+     */
+    form?: string;
+}
+interface LinkElementProps$2 {
+    /**
+     * URL to link to if Button elementType is 'a'.
+     */
+    href?: string;
+    /**
+     * Target window for the Button href URL.
+     */
+    target?: string;
+    /**
+     * Relationship between the Button href URL and the current page. See
+     * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).
+     */
+    rel?: string;
+}
+interface ButtonProps extends ButtonElementProps, LinkElementProps$2 {
+    /**
+     * Text to override `label` with additional, more precise information
+     * specifically for screen reader users.
+     */
+    ariaLabel?: string;
+    /**
+     * Button fill.
+     */
+    fill?: "solid" | "outlined" | "flat";
+    /**
+     * Button icon variant.
+     */
+    icon?: ArcIcon;
+    /**
+     * How should a Button icon be displayed?
+     */
+    iconPosition?: "afterText" | "beforeText" | "iconOnly";
+    /**
+     * HTML ID for the Button
+     */
+    id?: string;
+    /**
+     * Should the Button be disabled?
+     */
+    isDisabled?: boolean;
+    /**
+     * Should the Button’s CSS display property be set to block?
+     */
+    isDisplayBlock?: boolean;
+    /**
+     * Should the Button take up the full width of its container?
+     */
+    isFullWidth?: boolean;
+    /**
+     * Button text.
+     */
+    label: string;
+    /**
+     * Optional click handler for the Button.
+     */
+    onClick?: () => void;
+    /**
+     * Optional property to provide component Ref
+     */
+    ref?: Ref$2;
+    /**
+     * How should a Button icon be displayed?
+     */
+    size?: "s" | "m" | "l";
+    /**
+     * Optional supporting text for the Button.
+     */
+    supportingText?: string;
+    /**
+     * Indicates the availability and type of a popup triggered by the button.
+     */
+    ariaHasPopup?: false | true | "menu" | "listbox" | "dialog" | "grid" | "tree";
+    /**
+     * Indicates whether the popup controlled by the button is expanded or collapsed.
+     */
+    ariaExpanded?: boolean;
+    /**
+     * Defines the ID of the element controlled by the button.
+     */
+    ariaControls?: string;
+}
+
+declare const ButtonGroup: FC<ButtonGroupProps>;
+interface ButtonGroupProps {
+    /**
+     * Components to appear within the ButtonGroup.
+     * Can be Button, ButtonV2 only.
+     */
+    children: React$1.ReactNode;
+    /**
+     * Size of the buttons in the ButtonGroup. This will override the size prop for each individual button.
+     */
+    size?: ButtonProps["size"];
+    /**
+     * Determines the alignment of the buttons within the ButtonGroup.
+     */
+    align?: "flex-start" | "center" | "flex-end";
+    /**
+     * Orientation of the ButtonGroup. Defaults to 'horizontal'. 'vertical' Persists on mobile.
+     */
+    orientation?: "horizontal" | "vertical";
+    /**
+     * Spacing between buttons in the group.
+     */
+    gap?: 4 | 8 | 12 | 16;
+    /**
+     * Accessible label for the ButtonGroup, improving screen reader support.
+     */
+    ariaLabel?: string;
+    /**
+     * Should the buttons within `ButtonGroup` take up the full width of its container?
+     */
+    isFullWidth?: boolean;
+}
+
+type ElementUnion$1 = HTMLButtonElement | HTMLAnchorElement;
+type Ref$1 = React$1.Ref<ElementUnion$1> | null;
+declare const ButtonV2: FC<ButtonV2Props>;
+interface LinkElementProps$1 {
+    /**
+     * URL to link to if `ButtonV2` elementType is 'a'.
+     */
+    href?: string;
+    /**
+     * Target window for the `ButtonV2` href URL.
+     */
+    target?: string;
+    /**
+     * Relationship between the Button href URL and the current page. See
+     * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).
+     */
+    rel?: string;
+}
+interface ButtonV2ElementProps {
+    /**
+     * Default behavior of the Button element. If not provided, 'submit' will
+     * be inferred. Type 'reset' deliberately excluded.
+     */
+    type?: "button" | "submit";
+    /**
+     * Refers to the id of a form so it can be submitted if the button exists outside of it.
+     */
+    form?: string;
+}
+interface ButtonV2Props extends ButtonV2ElementProps, LinkElementProps$1 {
+    /**
+     * Label for `ButtonV2`
+     */
+    label?: string;
+    /**
+     * Determine the buttonStyle for `ButtonV2`. Default style is `primary`
+     */
+    buttonStyle?: "primary" | "secondary" | "tertiary" | "warning" | "compact";
+    /**
+     * Render icon within `ButtonV2`
+     */
+    icon?: ArcIcon;
+    /**
+     * Determine the style position for the icon. Default is `afterText`
+     */
+    iconPosition?: "beforeText" | "afterText";
+    /**
+     * Optional click handler for the `ButtonV2`.
+     */
+    onClick?: () => void;
+    /**
+     * Optional property to provide component Ref
+     */
+    ref?: Ref$1;
+    /**
+     * Should the `ButtonV2` take up the full width of its container?
+     */
+    isFullWidth?: boolean;
+    /**
+     * Text to override `label` with additional, more precise information
+     * specifically for screen reader users.
+     */
+    ariaLabel?: string;
+    /**
+     * Size of `ButtonV2`
+     */
+    size?: "s" | "m" | "l";
+    /**
+     * HTML ID for the `ButtonV2`
+     */
+    id?: string;
+    /**
+     * `ButtonV2` will be in a loading state. This will override / add a loading icon to the button in it's respective style
+     */
+    isLoading?: boolean;
+    /**
+     * Indicates the availability and type of a popup triggered by the button.
+     */
+    ariaHasPopup?: false | true | "menu" | "listbox" | "dialog" | "grid" | "tree";
+    /**
+     * Indicates whether the popup controlled by the button is expanded or collapsed.
+     */
+    ariaExpanded?: boolean;
+    /**
+     * Defines the ID of the element controlled by the button.
+     */
+    ariaControls?: string;
+}
+
+interface RangeSelection {
+    dates: {
+        disabled: boolean;
+        value: Date;
+    }[];
+    selectedDate: Date;
+    isSelectionComplete: boolean;
+    start: Date;
+    end: Date;
+}
+
+type SelectionType = "single" | "range";
+
+type CalendarType = "month" | "year" | "double";
+
+/** Use `Calendar` to clearly present available dates and allowing users to choose a way to enter information. */
+declare const Calendar: FC<CalendarProps>;
+interface CalendarProps {
+    /**
+     * Select single date or range
+     */
+    selectionType?: SelectionType;
+    /**
+     * Dates before this will be disabled.
+     */
+    minDate?: Date;
+    /**
+     * Dates after this will be disabled.
+     */
+    maxDate?: Date;
+    /**
+     * Selected Date for Calendar
+     */
+    selectedDate?: Date;
+    /**
+     * Selected range for Calendar
+     */
+    selectedRange?: Date[];
+    /**
+     * Called when cancel button is clicked.
+     */
+    onCancelClick?: () => void;
+    /**
+     * Called when a range is selected.
+     */
+    onRangeSelect?: (range: RangeSelection) => void;
+    /**
+     * Called when a date is selected.
+     */
+    onDateSelect?: (date: Date) => void;
+    /**
+     * Array of disabled dates
+     */
+    disabledDates?: Date[];
+    /**
+     * Calendar type.
+     */
+    type?: CalendarType;
+    /**
+     * Focus will be set on the selected day when the component mounts, defaults to false.
+     */
+    autoFocusOnMount?: boolean;
+}
+
+type BreakPoints = "xs" | "s" | "m" | "l" | "xl";
+
+interface SlideConfig {
+    itemsToScroll?: number;
+    itemsPerSlide?: number;
+    isPartialVisible?: boolean;
+}
+
+type Responsive = Partial<Record<BreakPoints, SlideConfig>>;
+
+declare const Carousel: React$1.FC<CarouselProps>;
+interface CarouselProps {
+    /**
+     * Adds a gap between the slides.
+     */
+    withGutter?: boolean;
+    /**
+     * How many slides to scroll on each navigation.
+     */
+    itemsToScroll?: number;
+    /**
+     * How many items to show for each slide.
+     */
+    itemsPerSlide?: number;
+    /**
+     * Shows some of the first item in the next slide if true.
+     */
+    isPartialVisible?: boolean;
+    /**
+     * Allows the carousel to scroll infinitely.
+     */
+    loop?: boolean;
+    /**
+     * Configure the carousel options for different breakpoints.
+     */
+    responsive?: Responsive;
+    /**
+     * items for the carousel.
+     */
+    children: React$1.ReactNode;
+}
+
+/**
+ *  Use `Checkbox` to allow users to select individual options.
+ */
+declare const Checkbox: FC<CheckboxProps>;
+type CheckedProps = {
+    /**
+     * Is the input checked?
+     */
+    checked?: boolean;
+    /**
+     * The initial checked state of the Checkbox.
+     */
+    defaultChecked?: boolean;
+    /**
+     * sets the state of the Checkbox to be indeterminate
+     */
+    indeterminate?: boolean;
+};
+interface CheckboxProps extends Omit<CheckedProps, "defaultChecked"> {
+    /**
+     * Error message for the Checkbox.
+     */
+    errorMessage?: string;
+    /**
+     * Helper text for the Checkbox, shown below the label.
+     */
+    helper?: React$1.ReactNode;
+    /**
+     * Determine the alignment of the Checkbox.
+     */
+    checkboxAlignment?: "top" | "center";
+    /**
+     * ID for the Checkbox.
+     */
+    id: string;
+    /**
+     * `isDisabled` is a legacy property and not recommended from a UX usability best practice perspective.
+     */
+    isDisabled?: boolean;
+    /**
+     * Is the Checkbox required?
+     */
+    isRequired?: boolean;
+    /**
+     * Label for the Checkbox.
+     */
+    label: React$1.ReactNode;
+    /**
+     * Use `hideLabel` to visually hide the `Checkbox` label. This still allows screen readers to have access to labels. This is set to `false` by default.
+     */
+    hideLabel?: boolean;
+    /**
+     * Name for the Checkbox.
+     */
+    name?: string;
+    /**
+     * Function to call when the Checkbox loses focus.
+     */
+    onBlur?: (e: React$1.FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Callback function to update the Checkbox's controlled `checked` prop, for
+     * example `e => setChecked(e.target.checked)`.
+     */
+    onChange?: (event: React$1.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Size of the Checkbox.
+     */
+    size?: "s" | "m";
+    /**
+     * Value for the Checkbox.
+     */
+    value?: string;
+}
+
+type RequirementStatus = "required" | "optional" | "not-applicable";
+declare const Context: React$1.Context<{
+    requirementStatus: RequirementStatus | null;
+}>;
+/**
+ * Use `FormControl` to provide inputs with labels, helper text and error messages
+ */
+declare const FormControl: FC<FormControlProps>;
+interface FormControlProps {
+    /**
+     * Render the input or series of inputs
+     */
+    children: React$1.ReactNode;
+    /**
+     * HTML Element type for the FormControl.
+     * @default 'div'
+     */
+    elementType?: "div" | "fieldset";
+    /**
+     * Error message for the FormControl. Replaces helper when helperUnderLabel is false.
+     */
+    errorMessage?: string;
+    /**
+     * Helper text for the FormControl, shown below the label.
+     */
+    helper?: React$1.ReactNode;
+    /**
+     * ID for the input that the FormControl points towards.
+     */
+    htmlFor?: string;
+    /**
+     * ID for the FormControl. Used for helper and errorMessage if `htmlFor` is undefined.
+     */
+    id?: string;
+    /**
+     * Are all of the inputs in the FormControl required, optional, or is a
+     * uniform requirement status for all inputs not applicable?
+     */
+    requirementStatus?: RequirementStatus;
+    /**
+     * Label for the FormControl.
+     */
+    label: string;
+    /**
+     * Determins if the Label should be in a disabled state
+     */
+    isDisabled?: boolean;
+    /**
+     * Label size.
+     */
+    labelSize?: "s" | "l";
+    /**
+     * Position of Label (Switch component only)
+     */
+    labelPosition?: "top" | "left";
+    /**
+     *   Use `DisclosureTitle` to display content that is only visible when toggled into
+     * an "open" state. This overrides helper text.
+     */
+    disclosureTitle?: string;
+    /**
+     * Text to display within the disclosure
+     */
+    disclosureText?: string;
+    /**
+     * onClick handler for FormControlDisclosure
+     */
+    onClickDisclosure?: () => void;
+    /**
+     * Optional additional information for the FormControl.
+     */
+    supplementaryInfo?: React$1.ReactNode;
+    /**
+     * Position helper text under label. This is set to `false` by default.
+     */
+    helperUnderLabel?: boolean;
+    /**
+     * Use `hideLabel` to visually hide the `FormControl` label. This still allows screen readers to have access to labels. This is set to `false` by default.
+     */
+    hideLabel?: boolean;
+}
+
+declare const ComboBox: React$1.ForwardRefExoticComponent<ComboBoxProps & React$1.RefAttributes<HTMLInputElement>>;
+interface ComboBoxProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "helperUnderLabel" | "supplementaryInfo" | "labelPosition"> {
+    listBoxAriaLabel: string;
+    options: string[];
+    name?: string;
+    isRequired?: boolean;
+    defaultValue?: string;
+    onBlur?: (e: React$1.FocusEvent<HTMLInputElement, Element>) => void;
+    onFocus?: (e: React$1.FocusEvent<HTMLInputElement, Element>) => void;
+    isMultiSelectable?: boolean;
+    isAutocomplete?: boolean;
+    isReadOnly?: boolean;
+    isFluid?: boolean;
+}
+
+interface ExtentableContainer {
+    /**
+     * Allows the component to use extended grid values when set to true.
+     */
+    isExtended?: boolean;
+}
+
+/**
+ * Use `Columns` to compose layouts on a 12-column grid.
+ */
+declare const Columns: FC<ColumnsProps> & {
+    Col: typeof Col$1;
+};
+declare const Col$1: FC<ColProps$1>;
+type Span = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+type Offset = "0" | "24" | "48" | "72" | "96" | "120" | "144" | "168" | "192" | "216" | "240" | "264" | "288" | "312" | "336" | "360" | "384";
+interface ColProps$1 {
+    /**
+     * Vertically align the Column.
+     */
+    align?: "top" | "center" | "bottom";
+    /**
+     * Content to display in the Column.
+     */
+    children?: ReactNode;
+    /**
+     * Should the Column be visible for debugging and documentation
+     * purposes?
+     */
+    isDebugVisible?: boolean;
+    /**
+     * Overlay the column over the previous content on the default breakpoint and above. Multiples of 24 up to 384. Use with caution, and ensure to check responsive behaviour.
+     */
+    offset?: Offset;
+    /**
+     * Overlay the column over the previous content on the S breakpoint and above. Multiples of 24 up to 384. Use with caution, and ensure to check responsive behaviour.
+     */
+    offsetS?: Offset;
+    /**
+     * Overlay the column over the previous content on the M breakpoint and above. Multiples of 24 up to 384. Use with caution, and ensure to check responsive behaviour.
+     */
+    offsetM?: Offset;
+    /**
+     * Overlay the column over the previous content on the L breakpoint and above. Multiples of 24 up to 384. Use with caution, and ensure to check responsive behaviour.
+     */
+    offsetL?: Offset;
+    /**
+     * Overlay the column over the previous content on the XL breakpoint and above. Multiples of 24 up to 384. Use with caution, and ensure to check responsive behaviour.
+     */
+    offsetXL?: Offset;
+    /**
+     * The number of columns to span on the default breakpoint and above, from 1 to 12.
+     */
+    span?: Span;
+    /**
+     * The number of columns to span on the S breakpoint and above, from 1 to 12.
+     */
+    spanS?: Span;
+    /**
+     * The number of columns to span on the M breakpoint and above, from 1 to 12.
+     */
+    spanM?: Span;
+    /**
+     * The number of columns to span on the L breakpoint and above, from 1 to 12.
+     */
+    spanL?: Span;
+    /**
+     * The number of columns to span on the XL breakpoint and above, from 1 to 12.
+     */
+    spanXL?: Span;
+}
+interface ColumnsProps extends ExtentableContainer {
+    /**
+     * Contents of the Columns. Should only contain `Columns.Col`.
+     */
+    children: ReactNode;
+    /**
+     * Should the Columns be gutterless?
+     */
+    isGutterless?: boolean;
+}
+
+declare const ContentSwitcherTab: FC<ContentSwitcherTabProps>;
+interface ContentSwitcherTabProps {
+    /**
+     * Label to display on the ContentSwitcherTab
+     */
+    label: string;
+    /**
+     * Value to link `ContentSwitcherTab` to `ContentSwitcherTabContent`
+     */
+    value: string;
+    /**
+     * Pass a function to `ContentSwitcherTab`
+     */
+    onClick?: () => void;
+}
+
+declare const ContentSwitcherContent: FC<ContentSwitcherContentProps>;
+interface ContentSwitcherContentProps {
+    /**
+     * Content to display
+     */
+    children: ReactNode;
+    /**
+     * This value links the `ContentSwitcherContent` with `ContentSwitcherTab`
+     */
+    value: string;
+}
+
+declare const ContentSwitcherList: FC<ContentSwitcherListProps>;
+interface ContentSwitcherListProps {
+    /**
+     * Contents of the `ContentSwitcherList` Should contain `Tab`
+     */
+    children: ReactNode;
+    /**
+     * Determine if `ContentSwitcherList` should be justified
+     */
+    isJustified?: boolean;
+    /**
+     * Determine the type of `ContentSwitcherList`. Default is standard
+     */
+    type?: "standard" | "contained";
+    /**
+     * Determine a accessible label for `ContentSwitcherList`
+     */
+    ariaLabel?: string;
+    /**
+     * Determines if the `ContentSwitcherList` should be inset within the content panel.
+     */
+    isInset?: boolean;
+}
+
+/** Use `ContentSwitcher` to allow users to navigate between different sections of relevant content. */
+declare const ContentSwitcher: FC<ContentSwitcherProps> & {
+    Tab: typeof ContentSwitcherTab;
+    Content: typeof ContentSwitcherContent;
+    List: typeof ContentSwitcherList;
+};
+interface ContentSwitcherProps {
+    /**
+     * Render children
+     */
+    children: ReactNode;
+    /**
+     * Default to an inital value of a tab. If this is left blank it is possible for there to be no active tabs
+     */
+    defaultValue?: string;
+    /**
+     * Event handler called when the value changes.
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * When automatic, tabs are activated when receiving focus. When manual, tabs are activated when clicked.
+     */
+    activationMode?: "automatic" | "manual";
+    /**
+     * value for the `ContentSwitcher`. Passing a value makes the Select a controlled component.
+     */
+    value?: string;
+}
+
+declare const ContentSwitcherDropdown: FC<ContentSwitcherDropdownProps> & {
+    Content: typeof ContentSwitcherDropdownContent;
+};
+declare const ContentSwitcherDropdownContent: FC<ContentSwitcherDropdownContentProps>;
+interface ContentSwitcherDropdownContentProps {
+    /**
+     * Content to display
+     */
+    children: ReactNode;
+    /**
+     * This value links the `ContentSwitcherDropdown.Content` with `ContentSwitcherDropdown` property `Tabs`
+     */
+    value: string;
+}
+interface ContentSwitcherDropdownProps {
+    /**
+     * Render children
+     */
+    children?: ReactNode;
+    /**
+     * Default to an inital value of a tab. If this is not set default to first tab.
+     */
+    defaultValue?: string;
+    /**
+     * Event handler called when the value changes. This can only be active when child elements are not present
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * Determine what tabs to render. They need both a `value` and `label` prop
+     */
+    tabs: {
+        value: string;
+        label: string;
+    }[];
+    /**
+     * Determines if the `ContentSwitcherDropdown` should be inset within the content panel.
+     */
+    isInset?: boolean;
+    /**
+     * value for the `ContentSwitcherDropdown`. Passing a value makes the Select a controlled component.
+     */
+    value?: string;
+    /**
+     * Aria label for the `ContentSwitcherDropdown`.
+     */
+    ariaLabel?: string;
+    /**
+     * Sets the `ContentSwitcherDropdown` to 100% width.
+     */
+    isFluid?: boolean;
+    /**
+     * Sets the width of the `ContentSwitcherDropdown`.
+     */
+    width?: string;
+}
+
+declare const parseRangeString: (value?: string) => {
+    start: {
+        date: string;
+        day: string;
+        month: string;
+        year: string;
+    };
+    end: {
+        date: string;
+        day: string;
+        month: string;
+        year: string;
+    };
+};
+
+declare const parseDateString: (value: string) => {
+    day: string;
+    month: string;
+    year: string;
+};
+
+declare const isRangeValid: (value?: string) => boolean;
+
+declare const isDateValid: (value?: string) => boolean;
+
+declare const DATE_FORMAT = "dd/MM/yyyy";
+
+type AutoCompleteTypes = "on" | "off" | "name" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "country" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "email" | "impp" | "url" | "photo" | "organization-unit";
+
+declare const iconNames: readonly ["alertDismiss", "alertError", "alertGeneral", "alertSuccess", "alertWarning", "avatarUser", "breadcrumbLeft", "breadcrumbRight", "buttonLeft", "buttonRight", "cardButton", "carouselRight", "carouselLeft", "checkboxChecked", "checkboxError", "datePickerCalendar", "disclosureExpand", "disclosureMiniExpand", "downloadFile", "downloadAccessibility", "drawerClose", "formControlAlert", "modalClose", "paginationPrevious", "paginationNext", "paginationSimplePrevious", "paginationSimpleNext", "progressBarSuccess", "progressBarError", "progressBarRefresh", "progressStepperComplete", "progressStepperCurrent", "progressStepperWarning", "progressStepperError", "scrollToTop", "selectTrigger", "selectScrollUp", "selectScrollDown", "selectIndicator", "siteFooterExpand", "siteHeaderBack", "siteHeaderLink", "siteHeaderItemGroupExpand", "siteHeaderNavItemExpand", "siteHeaderNavItemExpandAlt", "siteHeaderViewAll", "siteHeaderSubNavOpen", "switchToggle", "tabsNext", "tabsPrevious", "tagRemove", "toastGeneral", "toastSuccess", "toastWarning", "toastError", "toastDismiss", "videoPlayerTranscript"];
+
+declare const ThemeIcon: FC<ThemeIconProps>;
+interface ThemeIconProps {
+    /**
+     * Size of the Icon, in pixels.
+     */
+    size?: number;
+    /**
+     * Icon color
+     */
+    color?: "auto" | "brand" | "statusRed" | "statusAmber" | "statusGreen";
+    /**
+     * Icon
+     */
+    icon?: ThemeIconNames;
+}
+type ThemeIconNames = (typeof iconNames)[number];
+
+type EventType$4 = React$1.ChangeEvent<HTMLInputElement>;
+/**
+ * Use `TextInput` to allow users to enter short form text.
+ */
+declare const TextInput: React$1.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
+interface TextInputComponentProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "helperUnderLabel" | "supplementaryInfo" | "labelPosition"> {
+    /**
+     * Uncontrolled default value of the TextInput. If the TextInput is controlled
+     * via `value`/`onChange`, `defaultValue` will be ignored.
+     *
+     * `defaultValue` is not to be used instead of helper text.
+     */
+    defaultValue?: string;
+    /**
+     * ID for the TextInput.
+     */
+    id: string;
+    /**
+     * Mode for the input. If not defined, inferred by type.
+     */
+    inputMode?: "email" | "numeric" | "tel" | "url";
+    /**
+     * Should the control be disabled?
+     */
+    isDisabled?: boolean;
+    /**
+     * Should the control be read-only?
+     */
+    isReadOnly?: boolean;
+    /**
+     * Should the control be required?
+     */
+    isRequired?: boolean;
+    /**
+     * Maximum number of characters.
+     */
+    maxLength?: number;
+    /**
+     * Minimum number of characters.
+     */
+    minLength?: number;
+    /**
+     * Name of the input.
+     */
+    name?: string;
+    /**
+     * Function to call when the TextInput loses focus.
+     */
+    onBlur?: (e: React$1.FocusEvent<HTMLInputElement, Element>) => void;
+    /**
+     * Function to call when the TextInput is focused.
+     */
+    onFocus?: (e: React$1.FocusEvent<HTMLInputElement, Element>) => void;
+    /**
+     * Callback function commonly used to update the TextInput's controlled
+     * `value`, for example `e => setValue(e.target.value)`.
+     */
+    onChange?: (e: EventType$4) => void;
+    /**
+     * Validation regex pattern.
+     */
+    pattern?: string;
+    /**
+     * Size of the input.
+     */
+    inputSize?: "s" | "m" | "l";
+    /**
+     * Determine the alignment of the text within the input
+     */
+    inputAlignment?: "left" | "right";
+    /**
+     * Enable button to toggle TextInput type from `Selected Type` to `Text`. This will override any `suffix` elements
+     */
+    showPassword?: boolean;
+    /**
+     * Add a prefixed value within `TextInput`
+     */
+    prefix?: string;
+    /**
+     * Add a suffixed value within `TextInput`. If `showPassword` is true, suffix will not be displayed   */
+    suffix?: string;
+    /**
+     * Type for the input. `number` will be changed to `text` and set the `numeric` inputMode.
+     */
+    type?: "email" | "number" | "password" | "tel" | "text" | "url";
+    /**
+     * Current value of the TextInput. Must be controlled via an
+     * `onChange` callback function. Otherwise, use `defaultValue` (or `isReadOnly`).
+     */
+    value?: string;
+    /**
+     * Placeholder for the input
+     */
+    placeholder?: string;
+    /**
+     * Icon button to show at the end of the input
+     */
+    iconButton?: {
+        ref?: React$1.Ref<HTMLButtonElement>;
+        onFocus?: React$1.FocusEventHandler<HTMLButtonElement>;
+        onClick: () => void;
+        label: string;
+        icon: ThemeIconNames;
+    };
+    /**
+     * Sets the width of the TextInput.
+     */
+    width?: string;
+    /**
+     *  Sets autoComplete value for TextInput.
+     */
+    autoComplete?: AutoCompleteTypes;
+    /**
+     * A reference to TextInput
+     */
+    ref?: React$1.Ref<HTMLInputElement>;
+    /**
+     * Indicates whether the TextInput is in a loading state
+     */
+    isLoading?: boolean;
+}
+type TextInputProps = Omit<TextInputComponentProps, "placeholder">;
+type TextInputWithPlaceholderProps = TextInputComponentProps;
+
+/**
+ * Use `DatePicker` to clearly present available dates and allow users to choose a way to enter information.
+ */
+declare const DatePicker: React$1.ForwardRefExoticComponent<Omit<DatePickerProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
+interface DatePickerRangeSelection extends RangeSelection {
+    formattedRange: string;
+}
+interface DatePickerProps extends Omit<TextInputWithPlaceholderProps, "defaultValue" | "inputMode" | "minLength" | "maxLength" | "pattern" | "type" | "showPassword" | "placeholder" | "iconButton" | "prefix" | "suffix">, Omit<CalendarProps, "onDateSelect" | "onRangeSelect" | "selectedDate" | "selectedRange"> {
+    isFluid?: boolean;
+    onDateSelect?: (value: {
+        date: Date;
+        formattedDate: string;
+    }) => void;
+    onRangeSelect?: (value: DatePickerRangeSelection) => void;
+}
+
+/**
+ * Use `Disclosure` to show and hide sections of content.
+ */
+declare const Disclosure: FC<DisclosureProps>;
+interface DisclosureProps {
+    /**
+     * Content to display in the Disclosure.
+     */
+    children: ReactNode;
+    /**
+     * HTML section heading level of the Disclosure summary. If not provided, will
+     * render as a span.
+     */
+    headingLevel?: HeadingLevel;
+    /**
+     * Should Disclosure details be indented to line-up with summary text?
+     */
+    indentDetails?: boolean;
+    /**
+     * Should the Disclosure content be open by default?
+     */
+    isOpen?: boolean;
+    /**
+     * The Disclosure summary text.
+     */
+    summary: string;
+}
+
+/**
+ * Use `DisclosureMini` to show and hide sections of content.
+ */
+declare const DisclosureMini: FC<DisclosureMiniProps>;
+interface DisclosureMiniProps {
+    /**
+     * Content to display in the DisclosureMini.
+     */
+    children: ReactNode;
+    /**
+     * DisclosureMini ID.
+     */
+    id?: string;
+    /**
+     * The DisclosureMini summary text.
+     */
+    summary: string;
+    /**
+     * Should the Disclosure content be open by default?
+     */
+    isOpen?: boolean;
+    /**
+     * Position of the DisclosureMini icon?
+     */
+    iconPosition?: "left" | "right";
+    /**
+     * On Click handler for DisclosureMini summary disclosure.
+     */
+    onClick?: () => void;
+    /**
+     * Disclosure size.
+     */
+    size?: "s" | "l";
+}
+
+declare const Drawer: React$1.FC<DrawerProps>;
+interface DrawerProps {
+    /**
+     * Title for the drawer. This will be announced by screen readers when the drawer opens.
+     */
+    title: string;
+    /**
+     * The position on the screen the drawer should render.
+     */
+    position?: "top" | "right" | "bottom" | "left";
+    /**
+     * Show or hide page overlay.
+     */
+    isOverlayVisible?: boolean;
+    /**
+     * Footer content for the drawer.
+     */
+    footer?: React$1.ReactNode;
+    /**
+     * Function to be called when the Drawer has been requested to close by either the esc key being pressed, outside the dialog being clicked or the close button being clicked. The callback must set the open state of the Drawer to false.
+     */
+    onRequestClose: () => void;
+    /**
+     * Whether to return focus to the element that was focused before the Drawer opened. True by default.
+     */
+    shouldReturnFocus?: boolean;
+    /**
+     * Size of the Drawer dialog.
+     */
+    size?: "s" | "l";
+    /**
+     * Set Drawer open or closed.
+     */
+    isOpen?: boolean;
+    /**
+     * Custom content for `Modal`.
+     */
+    children?: React$1.ReactNode;
+}
+
+declare const Download: React$1.FC<DownloadProps>;
+interface DownloadProps {
+    /**
+     * Name for `<Download />`
+     */
+    name: string;
+    /**
+     * File type for `<Download />`
+     */
+    type: string;
+    /**
+     * File url for `<Download />`
+     */
+    href?: string;
+    /**
+     * If true, the spacing will be reduced resulting in a tighter look and feel.
+     */
+    isCompact?: boolean;
+    /**
+     * If false the width will be the same as the inner content
+     */
+    isFullWidth?: boolean;
+    /**
+     * Description for `<Download />`
+     */
+    description?: string;
+    /**
+     * File size for `<Download />`
+     */
+    size?: string;
+    /**
+     * Icon for `<Download />`
+     */
+    icon?: Extract<ThemeIconNames, "downloadFile" | "downloadAccessibility">;
+    /**
+     * Click handler for `<Download />`
+     */
+    onClick?: (e: MouseEvent$1<HTMLAnchorElement>) => void;
+}
+
+/**
+ * Use `Elevation` to elevate what matters.
+ */
+declare const Elevation: FC<ElevationProps>;
+interface ElevationProps {
+    /**
+     * Contents to Elevate.
+     */
+    children: ReactNode;
+    /**
+     * Shadow Elevation level.
+     */
+    elevationLevel?: "1" | "2";
+    /**
+     * Should the Elevation be full width?
+     */
+    isFullWidth?: boolean;
+}
+
+declare const FilterControl: FC<FilterControlProps>;
+interface FilterControlProps {
+    /**
+     * Name of the `<FilterControl />`
+     */
+    children: ReactNode;
+    /**
+     * Determine if the `<FilterControl />` is selected
+     */
+    isSelected?: boolean;
+    /**
+     * onClick handler
+     */
+    onClick?: () => void;
+}
+
+declare const FilterControls: FC<FilterControlsProps>;
+interface FilterControlsProps {
+    /**
+     * Contents of the `<FilterControls />` Should contain `<FilterControl />`
+     */
+    children: ReactNode;
+    /**
+     * Detmine how to align <FilterControl /> with in <FilterControls />. Default `center`
+     */
+    controlsAlignment?: "left" | "right" | "center";
+}
+
+declare const FilterItem: FC<FilterItemProps>;
+interface FilterItemProps {
+    /**
+     * Content to display within `Filter.Item`
+     */
+    children: ReactNode;
+    /**
+     * Attach Tags to content provided within `Filter.Item`
+     */
+    tags: string[];
+}
+
+declare const FilterItems: FC<FilterItemsProps>;
+interface FilterItemsProps {
+    /**
+     * Render children of `<Filter.Items />`. This should only use `<Filter.Item />`
+     */
+    children: ReactNode;
+    /**
+     * Error to display for `<Filter.Item />`
+     */
+    error?: ReactNode;
+    /**
+     * Determine the display style of `<Filter.Item />`
+     */
+    displayType?: "grid" | "list";
+}
+
+/** Use `Filter` to filter and categorise page content. */
+declare const Filter: FC<FilterProps> & {
+    Item: typeof FilterItem;
+    Items: typeof FilterItems;
+    Control: typeof FilterControl;
+    Controls: typeof FilterControls;
+};
+interface FilterProps {
+    /**
+     * Contents of the `<Filter />` Should contain `<Filter.Item />`
+     */
+    children?: ReactNode;
+    /**
+     * onChange handler called everytime `<FilterControl />` is pressed
+     */
+    onChange?: (selectedControls: string[]) => void;
+    /**
+     * Detmine how to display the content within `<Filter.Items />`. Default is `grid`
+     */
+    displayType?: FilterItemsProps["displayType"];
+    /**
+     * Detmine how to align <Filter.Controls />. Default `center`
+     */
+    controlsAlignment?: FilterControlsProps["controlsAlignment"];
+    /**
+     * Detmine if the `<Filter.Control />` have to partially match or match all
+     */
+    logicType?: "AND" | "OR";
+    /**
+     * Detmine what is display when no items match the filtering criteria
+     */
+    error?: ReactNode;
+}
+
+declare const BREAKPOINTS: readonly ["xs", "s", "m", "l", "xl", "xxl", "xxxl"];
+
+type Breakpoints = (typeof BREAKPOINTS)[number];
+type ColumnConfig<T> = Partial<Record<Breakpoints, T>>;
+type GridValue = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+type AlignmentValue = "normal" | "start" | "center" | "end" | "stretch" | "baseline";
+type ColumnValue = GridValue | "auto" | "equal";
+type Column$1 = ColumnConfig<ColumnValue>;
+type Arrangement = ColumnConfig<GridValue>;
+type Alignment = ColumnConfig<AlignmentValue>;
+
+declare const Col: React$1.FC<ColProps>;
+interface ColProps extends Column$1 {
+    offset?: Arrangement;
+    order?: Arrangement;
+    align?: Alignment;
+    children: React$1.ReactNode;
+}
+
+declare const Row: React$1.FC<RowProps>;
+interface RowProps {
+    align?: AlignmentValue;
+    direction?: "column" | "row" | "column-reverse" | "row-reverse";
+    justify?: "start" | "center" | "end" | "between" | "around" | "normal";
+    children: React$1.ReactNode;
+}
+
+/**
+ * Use `Grid` to compose layouts on a 12-column grid.
+ */
+declare const Grid: React$1.FC<GridProps> & {
+    Col: typeof Col;
+    Row: typeof Row;
+};
+interface GridProps extends ExtentableContainer {
+    /**
+     * `Grid` is set to 100% width if true.
+     */
+    isFluid?: boolean;
+    /**
+     * Removes gap between columns for an edge to edge layout if true.
+     */
+    isGutterless?: boolean;
+    /**
+     * Allows the rows and columns be visible for debugging.
+     */
+    isDebugVisible?: boolean;
+    /**
+     * Contents of the Grid. Should only contain `Grid.Row`.
+     */
+    children: React$1.ReactNode;
+}
+
+/**
+ * Use `Group` to arrange flexible items in a row.
+ */
+declare const Group: FC<GroupProps> & {
+    Item: typeof GroupItem;
+};
+declare const GroupItem: FC<ItemProps$1>;
+interface ItemProps$1 {
+    /**
+     * Content to display in the Group.Item.
+     */
+    children?: ReactNode;
+    /**
+     * Should the Group.Item be visible for debugging and documentation
+     * purposes?
+     */
+    isDebugVisible?: boolean;
+    /**
+     * Should the Group.Item stretch to fill the available space?
+     */
+    grow?: boolean;
+}
+interface GroupProps extends ExtentableContainer {
+    /**
+     * Contents of the Group. Should only contain `Group.Item`.
+     */
+    children: ReactNode;
+    /**
+     * Should all Group.Items in the Group stretch to fill the available space?
+     */
+    grow?: boolean;
+    /**
+     * Should all Group.Items in the Group stretch to fill the available space with equal widths?
+     */
+    growEqual?: boolean;
+    /**
+     * Should a border be shown between Group.Items? **Warning: Sets CSS property `overflow:hidden`.**
+     */
+    gutterBorder?: boolean;
+    /**
+     * Should wrapping of Group.Items in the Group be disabled?
+     */
+    noWrap?: boolean;
+}
+
+declare const HeroBanner: FC<HeroBannerProps>;
+interface HeroBannerProps extends Omit<TemplateBannerProps, "headingSize" | "alignment" | "additionalTopMargin"> {
+    /**
+     * Extend HeroBanner 56px beyond its container on both sides at larger breakpoints (e.g., 1440px and above).
+     */
+    extendBeyondContainer?: boolean;
+}
+
+type ElementUnion = HTMLButtonElement | HTMLAnchorElement;
+type Ref = React$1.Ref<ElementUnion> | null;
+declare const HeroButton: FC<HeroButtonProps>;
+interface LinkElementProps {
+    /**
+     * URL to link to if `HeroButton` elementType is 'a'.
+     */
+    href?: string;
+    /**
+     * Target window for the `HeroButton` href URL.
+     */
+    target?: string;
+    /**
+     * Relationship between the Button href URL and the current page. See
+     * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).
+     */
+    rel?: string;
+}
+interface HeroButtonElementProps {
+    /**
+     * Default behavior of the Button element. If not provided, 'submit' will
+     * be inferred. Type 'reset' deliberately excluded.
+     */
+    type?: "button" | "submit";
+    /**
+     * Refers to the id of a form so it can be submitted if the button exists outside of it.
+     */
+    form?: string;
+}
+interface HeroButtonProps extends HeroButtonElementProps, LinkElementProps {
+    /**
+     * Label for `HeroButton`
+     */
+    label?: string;
+    /**
+     * Determine the buttonStyle for `HeroButton`. Default style is `primary`
+     */
+    buttonStyle?: "primary" | "primary-gradient" | "secondary" | "secondary-gradient" | "warning";
+    /**
+     * Render icon within `HeroButton`. Warning icon will only render when buttonStyle = 'warning'
+     */
+    icon?: "arrow-right" | "arrow-down" | "play" | "warning";
+    /**
+     * Optional click handler for the `HeroButton`.
+     */
+    onClick?: () => void;
+    /**
+     * Optional property to provide component Ref
+     */
+    ref?: Ref;
+    /**
+     * Text to override `label` with additional, more precise information
+     * specifically for screen reader users.
+     */
+    ariaLabel?: string;
+    /**
+     * HTML ID for the `HeroButton`
+     */
+    id?: string;
+    /**
+     * `HeroButton` will be in a loading state. This will override / add a loading icon to the button in it's respective style
+     */
+    isLoading?: boolean;
+}
+
+declare const Hidden: React$1.FC<HiddenProps>;
+interface HiddenProps {
+    xs?: boolean;
+    s?: boolean;
+    m?: boolean;
+    l?: boolean;
+    xl?: boolean;
+    children: React$1.ReactNode;
+}
+
+/**
+ * Use `Icon` to display brand iconography.
+ */
+declare const Icon: FC<IconProps>;
+declare const colors: readonly ["auto", "brand", "statusRed", "statusAmber", "statusGreen"];
+interface IconProps {
+    /**
+     * Color of the Icon.
+     */
+    color?: (typeof colors)[number];
+    /**
+     * Should the Icon component be styled as an inline element?
+     */
+    isInline?: boolean;
+    /**
+     * Icon variant.
+     */
+    icon?: ArcIcon | React$1.ReactElement<SVGElement>;
+    /**
+     * Alternative text label for the Icon.
+     */
+    label?: string;
+    /**
+     * Size of the Icon, in pixels.
+     */
+    size?: number;
+    /**
+     * value for data-testid
+     */
+    testId?: string;
+    /**
+     * hides the icon from screenreaders
+     */
+    isPresentationIcon?: boolean;
+}
+
+type CardFooterIcon = "play" | "arrow";
+interface CardFooterProps {
+    metaText?: string | Date;
+    isDarkPathway?: boolean;
+    buttonIcon?: CardFooterIcon;
+    showButton?: boolean;
+    isHovered?: boolean;
+}
+
+type CardHeadingSize = Extract<HeadingSize, "m" | "l">;
+
+/** Use `ImpactCard` for important content that needs additional hierarchy and prominence.  */
+declare const ImpactCard: FC<ImpactCardProps>;
+type ImpactCardPathway = "light" | "dark";
+interface ImpactCardProps {
+    /**
+     * Heading for the ImpactCard.
+     */
+    heading: string;
+    /**
+     * Heading size for the ImpactCard.
+     */
+    headingSize?: CardHeadingSize;
+    /**
+     * Url for the ImpactCard. Makes the whole card a link
+     */
+    url: string;
+    /**
+     * Sets a dark or light background for the ImpactCard.
+     */
+    pathway?: ImpactCardPathway;
+    /**
+     * Heading level for the ImpactCard heading.
+     */
+    headingLevel?: HeadingLevel;
+    /**
+     * Uppercase label for the ImpactCard.
+     */
+    label?: string;
+    /**
+     * Sets a minimum height for the ImpactCard.
+     */
+    minHeight?: number;
+    /**
+     * Click handler for the ImpactCard.
+     */
+    onClick?: (e: React$1.MouseEvent<HTMLAnchorElement>) => void;
+    /**
+     * Object of `data-` attributes to render on internal anchor element, e.g.
+     * `{ data-analytics-link: "My link"}` => `<a data-analytics-link="My link">`.
+     */
+    linkData?: {
+        [key: string]: string;
+    };
+    /**
+     * Image props for the ImpactCard. Consider avoiding alt if the image is for decorative purposes only.
+     */
+    img: Pick<ImageProps, "src" | "alt" | "loading" | "sizes" | "srcSet" | "anchor" | "fadeOnLoad">;
+    /**
+     * Icon for the ImpactCard CTA button
+     */
+    buttonIcon?: CardFooterProps["buttonIcon"];
+}
+
+/** Use `InformationCard` for flexibility and the ability to focus and highlight product specific content. */
+declare const InformationCard: FC<InformationCardProps>;
+type InformationCardImage = Pick<ImageProps, "alt" | "loading" | "width" | "height" | "src" | "fadeOnLoad">;
+type InformationCardButtonProps = Pick<ButtonV2Props, "label" | "onClick" | "href">;
+interface minHeightsProps {
+    xs?: number;
+    s?: number;
+    m?: number;
+    l?: number;
+    xl?: number;
+    xxl?: number;
+    xxxl?: number;
+}
+interface InformationCardProps {
+    /**
+     * Heading for the InformationCard.
+     */
+    heading: string;
+    /**
+     * Heading level for the InformationCard heading.
+     */
+    headingLevel?: HeadingLevel;
+    /**
+     * Text content for the InformationCard
+     */
+    text?: string;
+    /**
+     * Uppercase label for the InformationCard.
+     */
+    label?: string;
+    /**
+     * Url for the InformationCard. Makes the whole card a link and hides `button` if provided.
+     */
+    cardUrl?: string;
+    /**
+     * Click handler for the InformationCard. Only applied when a card url is provided.
+     */
+    onClick?: (e: React$1.MouseEvent<HTMLAnchorElement>) => void;
+    /**
+     * Footer logo for the InformationCard.
+     */
+    footerLogo?: InformationCardImage;
+    /**
+     * Header image for the InformationCard.
+     */
+    image?: InformationCardImage;
+    /**
+     * Header icon for the InformationCard.
+     */
+    icon?: ArcIcon;
+    /**
+     * Sets a minimum height for the InformationCard. Overrules minHeights values.
+     */
+    minHeight?: number;
+    /**
+     * Badges for the InformationCard.
+     */
+    badges?: {
+        text: string;
+    }[];
+    /**
+     * Cta button for the InformationCard. Hidden if there is a card url.
+     */
+    button?: InformationCardButtonProps;
+    /**
+     * Sets a minimum height for the InformationCard at each breakpoint (xs, s, m, l, xl, xxl). inherits from smaller breakpoints
+     */
+    minHeights?: minHeightsProps;
+}
+
+/**
+ * Use `Link` to direct users to a new page or piece of information.
+ */
+declare const Link: React$1.FC<LinkProps>;
+interface LinkProps {
+    /**
+     * Id attribute for `Link`.
+     */
+    id?: string;
+    /**
+     * href attribute for `Link`.
+     */
+    href?: string;
+    /**
+     * Screen reader text for `Link`, which is visually hidden.
+     */
+    screenReaderText?: string;
+    /**
+     * title attribute for `Link`.
+     */
+    title?: string;
+    /**
+     * Rel attribute for `Link`.
+     */
+    rel?: string;
+    /**
+     * Configures the size of `Link`.
+     */
+    size?: "s" | "m" | "l";
+    /**
+     * Removes underline if true.
+     */
+    isImplied?: boolean;
+    /**
+     * Renders as a button element if true.
+     */
+    isButton?: boolean;
+    /**
+     * Click handler for `Link`.
+     */
+    onClick?: (e: React$1.MouseEvent) => void;
+    /**
+     * Target for `Link`.
+     */
+    target?: "_self" | "_blank" | "_parent" | "_top";
+    /**
+     * Content for `Link`.
+     */
+    children: string;
+}
+
+/**
+ * Use `Markup` to display HTML-formatted text.
+ */
+declare const Markup: FC<MarkupProps>;
+interface MarkupProps {
+    /**
+     * HTML-formatted text to display in Markup.
+     */
+    children: ReactNode;
+    /**
+     * Should the Markup width be constrained to a typographic measure?
+     */
+    isMeasured?: boolean;
+}
+
+interface MediaCardImage extends Partial<Pick<ImageProps$1, "alt" | "loading" | "sizes" | "srcSet" | "width" | "height" | "fadeOnLoad">>, Pick<ImageProps$1, "src"> {
+    type: "img";
+}
+
+interface MediaCardVideo extends Partial<Omit<VideoPlayerProps$1, "url" | "title" | "description" | "transcriptLink" | "isSupportingTextHidden">>, Pick<VideoPlayerProps$1, "title" | "url" | "description"> {
+    type: "video";
+}
+
+/**
+ * Use `MediaCard` to contain content and an image about a single subject.
+ */
+declare const MediaCard: FC<MediaCardProps>;
+type MediaCardIcon = "play" | "arrow";
+interface MediaCardProps {
+    /**
+     * Heading for the MediaCard.
+     */
+    heading: string;
+    /**
+     * Heading level for the MediaCard heading.
+     */
+    headingLevel?: HeadingLevel;
+    /**
+     * Text content for the MediaCard
+     */
+    text?: string;
+    /**
+     * Uppercase label for the MediaCard.
+     */
+    label?: string;
+    /**
+     * Url for the MediaCard. Makes the whole card a link.
+     */
+    url?: string;
+    /**
+     * Text to show adjacent to the cta, can be either a date or text. Its recommended to pass dates as Date objects so the component can render them correctly.
+     */
+    metaText?: CardFooterProps["metaText"];
+    /**
+     * MediaCard will have a contained look and feel with a white background if set to true.
+     */
+    isContained?: boolean;
+    /**
+     * Image for video embed for the MediaCard. Supported video platforms are YouTube and Vimeo.
+     */
+    media: MediaCardImage | MediaCardVideo;
+    /**
+     * Icon for the MediaCard Cta button
+     */
+    buttonIcon?: MediaCardIcon;
+    /**
+     * Sets a minimum height for the MediaCard.
+     */
+    minHeight?: number;
+    /**
+     * Click handler for the MediaCard. Only applied when a url is provided.
+     */
+    onClick?: (e: React$1.MouseEvent<HTMLAnchorElement>) => void;
+}
+
+/** Use `Modal` to display information that needs immediate action from a user. */
+declare const Modal: FC<ModalProps>;
+interface ModalProps {
+    /**
+     * Title for the modal. This will be announced by screen readers when the modal opens.
+     */
+    title: string;
+    /**
+     * Role for the modal. use alertdialog if explicit user input is required e.g deleting an account. role alertdialog will remove the ability to close the modal by either the esc key being pressed, clicking the cross icon or clicking outside.
+     */
+    role?: "dialog" | "alertdialog";
+    /**
+     * Whether to return focus to the element that was focused before the modal opened. True by default.
+     */
+    shouldReturnFocus?: boolean;
+    /**
+     * Description for the modal. This will be announced by screen readers when the modal opens.
+     */
+    description?: string;
+    /**
+     * ID for the element description to be announced by screenreaders in addition to the title.
+     */
+    ariaDescribedBy?: string;
+    /**
+     * Configurable actions for the modal.
+     */
+    actions?: Pick<ButtonV2Props, "form" | "type" | "buttonStyle" | "icon" | "iconPosition" | "href" | "id" | "label" | "onClick" | "isLoading" | "ariaLabel" | "rel">[];
+    /**
+     * Function to be called when the modal has been requested to close by either the esc key being pressed, outside the dialog being clicked or the close button being clicked. The callback must set the open state of the modal to false. This function is ignored if the `role` prop is set to `alertdialog`. You can prevent this behavior with the `dialog` role by ommitting this prop.
+     */
+    onRequestClose?: () => void;
+    /**
+     * Size of the modal dialog.
+     */
+    size?: "s" | "m" | "l";
+    /**
+     * Set modal open or closed.
+     */
+    isOpen?: boolean;
+    /**
+     * Enables the dialog content to be scrolled internally.
+     */
+    isContentScrollable?: boolean;
+    /**
+     * Custom content for `Modal`.
+     */
+    children?: React$1.ReactNode;
+}
+
+/**
+ * Use `Pagination` to navigate through multiple pages of content.
+ */
+declare const Pagination: FC<PaginationProps>;
+interface PaginationProps {
+    /**
+     * Number of pages for the pagination
+     */
+    pageCount: number;
+    /**
+     * Default page to be selected on render. If not provided defaults to 1.
+     */
+    defaultSelectedPage?: number;
+    /**
+     * Function to call when the page changes
+     */
+    onPageChange: (selectedPage: number) => void;
+}
+
+/**
+ * TODO! Revise method of aligning svg's
+ */
+/**
+ * Use `PaginationSimple` to navigate through multiple pages of content.
+ */
+declare const PaginationSimple: FC<PaginationSimpleProps>;
+interface PaginationSimpleProps {
+    /**
+     * hide buttons if true.
+     */
+    hide?: {
+        first?: boolean;
+        prev?: boolean;
+        next?: boolean;
+        last?: boolean;
+    };
+    /**
+     * makes each button a link
+     */
+    hrefs?: {
+        first?: string;
+        prev?: string;
+        next?: string;
+        last?: string;
+    };
+    /**
+     * if true buttons will hug either edge of the parent element
+     */
+    isFluid?: boolean;
+    /**
+     * if true ellipsis will show in-between previous and next
+     */
+    /**
+     * Function to call when page is changed. This is called with type and event
+     */
+    showEllipsis?: boolean;
+    /**
+     * Function to call when page is changed. This is called with type and event
+     */
+    onPageChange?: (e: React$1.MouseEvent, type?: "prev" | "next" | "first" | "last") => void;
+}
+
+/** Use `Popover` to display content in a portal, triggered by a button. */
+declare const Popover: FC<PopoverProps>;
+interface PopoverProps {
+    /**
+     * Content to render within Popover Trigger
+     */
+    children?: React$1.ReactNode;
+    /**
+     * The preferred side of the anchor to render against when open
+     */
+    side?: "left" | "right" | "bottom" | "top";
+    /**
+     * The distance in pixels from the anchor
+     */
+    sideOffset?: 0 | 4 | 8 | 12 | 16 | 32;
+    /**
+     * The arrow connecting the `Popover` content to the trigger
+     */
+    arrow?: boolean;
+    /**
+     * The preferred alignment against the anchor. May change when collisions occur.
+     */
+    align?: "start" | "center" | "end";
+    /**
+     * An offset in pixels from the "start" or "end" alignment options.
+     */
+    alignOffset?: number;
+    /**
+     * Content inside the Popover
+     */
+    content?: ReactNode;
+    /**
+     * Determine if the popover is open
+     */
+    open?: boolean;
+    /**
+     * Maximum width of the Popover
+     */
+    maxWidth?: number;
+    /**
+     * Background theme of the Popover
+     */
+    background?: "dark" | "light" | "brand";
+    /**
+     * Called when focus moves into the popover
+     */
+    onOpenAutoFocus?: (event: Event) => void;
+    /**
+     * Called when focus moves out of the popover
+     */
+    onCloseAutoFocus?: (event: Event) => void;
+    /**
+     * Called when the Escape key is pressed
+     */
+    onEscapeKeyDown?: (event: KeyboardEvent) => void;
+    /**
+     * Called when a pointer down event occurs outside the popover
+     */
+    onPointerDownOutside?: (event: Event) => void;
+    /**
+     * Called when focus moves outside the popover
+     */
+    onFocusOutside?: (event: Event) => void;
+    /**
+     * Called when any interaction happens outside the popover
+     */
+    onInteractOutside?: (event: Event) => void;
+    /**
+     * Called when the open state of the popover changes.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Z-index for the `Popover`. Used to fine tune the overlapping of other page elements.
+     */
+    zIndex?: number;
+}
+
+declare const PosterImage: FC<PosterImageProps>;
+interface PosterImageProps {
+    /**
+     * Alternative text for the Poster.Image, shown if the image cannot be displayed. Consider avoiding this prop if the image is for decorative purposes only.
+     */
+    alt?: string;
+    /**
+     * Anchor point for the Poster.Image.
+     */
+    anchor?: (typeof anchorPoints)[number];
+    /**
+     * Loading behaviour of the Poster.Image.
+     */
+    loading?: (typeof loadingOptions)[number];
+    /**
+     * The HTML [sizes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Example_4_Using_the_srcset_and_sizes_attributes) attribute for the Poster.Image. Required if `srcSet` is defined.
+     */
+    sizes?: string;
+    /**
+     * The `src` for the Poster.Image. Used if srcSet is not defined, or as a fallback.
+     */
+    src: string;
+    /**
+     * A comma-separated list indicating a set of possible sources for the user agent to use for different screen sizes for the Poster.Image. Same format as [srcSet](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Example_4_Using_the_srcset_and_sizes_attributes), i.e. `my-image-200.png 200w, my-image-200.png 200w`.
+     */
+    srcSet?: string;
+    /**
+     * Contents of the PosterImage.
+     */
+    children?: React$1.ReactNode;
+}
+
+declare const PosterVideo: FC<PosterVideoProps>;
+interface PosterVideoProps {
+    /**
+     * Anchor point for the Poster.Video,
+     */
+    anchor?: (typeof anchorPoints)[number];
+    /**
+     * Should the Poster.Video autoplay?
+     */
+    autoPlay?: boolean;
+    /**
+     * HTML video sources for the Poster.Video. [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video).
+     */
+    children: ReactNode;
+    /**
+     * Should the Poster.Video loop?
+     */
+    loop?: boolean;
+}
+
+/**
+ * Use `Poster` to compose content on an image or video background. BT Brand Only.
+ */
+declare const Poster: FC<PosterProps> & {
+    Image: typeof PosterImage;
+    Video: typeof PosterVideo;
+};
+interface PosterProps {
+    /**
+     * Poster background to overlay content on top of. Must be one of Poster.Image or Poster.Video.
+     */
+    background: ReactNode;
+    /**
+     * Contents of the Poster. Each item will be wrapped in an PosterItem component.
+     */
+    children: ReactNode;
+    /**
+     * Apply an overlay to the Poster background, e.g. a scrim gradient for text legibility.
+     */
+    overlay?: boolean;
+    /**
+     * The background surface colour to show behind the Poster content before it loads.
+     * If using `overlay`, the gradient will match the surface.
+     */
+    surface?: "dark-neutral-02" | "light-neutral-01";
+}
+
+type ProgressBarState = "loading" | "error" | "success";
+
+type ProgressBarIcons = "refresh" | "cross" | "tick";
+
+/**
+ * Use `ProgressBar` to show the progress of a specific task within a page.
+ */
+declare const ProgressBar: FC<ProgressBarProps>;
+interface ProgressBarProps {
+    /**
+     * Label for screen readers.
+     */
+    ariaLabel: string;
+    /**
+     * Headline for the progress bar.
+     */
+    headline?: string;
+    /**
+     * Title for the progress bar, (e.g. an uploading file's name).
+     */
+    title?: string;
+    /**
+     * Percentage value for the progress bar (negative numbers are rounded to 0, numbers over 100 are rounded to 100).
+     */
+    value?: number;
+    /**
+     * Provide an additional informative description for the progress bar, or brand building slot for secondary messaging which can change over time with progress.
+     */
+    description?: string;
+    /**
+     * Value to display for the progress bar. This is fully customisable, and can be a percentage (15%) Time remaining (1m 15s remaining), proportion of data uploaded/to upload (100KB out of 256KB).
+     */
+    displayValue?: string;
+    /**
+     * State of the progress bar.
+     */
+    state?: ProgressBarState;
+    /**
+     * Sets progress bar to infinitely animate. Use if the progress of a given task cannot be known. The value prop will have no effect if this prop is set to true.
+     */
+    isIndeterminate?: boolean;
+    /**
+     * Action for the progress bar.
+     */
+    action?: {
+        autofocusOnMount?: boolean;
+        text: string;
+        action: () => void;
+        icon?: ProgressBarIcons;
+    };
+}
+
+type ProgressStatus = "completed" | "current" | "warning" | "error" | "todo";
+
+declare const ProgressStepperItem: FC<ProgressStepperItemProps>;
+interface ProgressStepperItemProps {
+    /**
+     * Determine a title for `<ProgressStepper.Item />`
+     */
+    title: string;
+    /**
+     * Determine a title for `<ProgressStepper.Item />`
+     */
+    titleHref?: string;
+    /**
+     * Text to override `linkTitle` with additional, more precise information
+     * specifically for screen reader users.
+     */
+    ariaLabel?: string;
+    /**
+     * Execute a function on title click `<ProgressStepper.Item />`
+     */
+    onClick?: () => void;
+    /**
+     * Determine a sub title for `<ProgressStepper.Item />`
+     */
+    subTitle?: string;
+    /**
+     * Determine a direction for `<ProgressStepper.Item />`
+     */
+    direction?: "horizontal" | "vertical";
+    /**
+     * Determine a status for `<ProgressStepper.Item />`
+     */
+    status?: ProgressStatus;
+    /**
+     * Determine the size for `<ProgressStepper.Item />`
+     */
+    size?: "small" | "large";
+    /**
+     * Determine if `<ProgressStepper.Item /> should be Fluid`
+     */
+    isFluid?: boolean;
+    /**
+     * Determine the context `<ProgressStepper.Item /> should be`
+     */
+    previousStep?: ProgressStatus;
+    /**
+     * DEPRECATED: Determine if `<ProgressStepper.Item /> should have expandable content`
+     */
+    isExpandable?: boolean;
+    /**
+     * Invert `<ProgressStepper.Item />` labels. Only appliciable for `horizontal direction.`
+     */
+    invertLabelPosition?: boolean;
+    /**
+     * Determine what content to display in `<ProgressStepper.Item />. To use this option isExpandable must be `true``
+     */
+    stepContent?: ReactNode;
+    /**
+     * Determine if `stepContent` is hidden
+     */
+    isStepContentHidden?: boolean;
+}
+
+/** Use `ProgressStepper` to provide an overview of a series of steps in a digital journey. */
+declare const ProgressStepper: FC<ProgressStepperProps> & {
+    Item: typeof ProgressStepperItem;
+};
+interface ProgressStepperProps {
+    /**
+     * Children of `<ProgressStepper />` should only contain `<ProgressStepper.Item />`
+     */
+    children?: ReactNode;
+    /**
+     * Determine a direction for `<ProgressStepper.Item />`
+     */
+    direction?: "horizontal" | "vertical";
+    /**
+     * Determine the size for `<ProgressStepper.Item />`
+     */
+    size?: "small" | "large";
+    /**
+     * Determine if `<ProgressStepper.Item />` should be Fluid. Only appliciable for `horizontal direction.`
+     */
+    isFluid?: boolean;
+    /**
+     * Invert all labels in `<ProgressStepper.Item />`. Only appliciable for `horizontal direction.`
+     */
+    invertLabelPosition?: boolean;
+    /**
+     * <b>DEPRECATED</b>: This will be removed in a future release.
+     */
+    isExpandable?: boolean;
+}
+
+type EventType$3 = ChangeEvent<HTMLInputElement>;
+type ContextProps$1 = {
+    blurEvent: (event: EventType$3) => void;
+    changeEvent: (event: EventType$3) => void;
+    groupDisabled: boolean;
+    checkedValue: string;
+    name: string;
+};
+
+interface RadioCardProps {
+    children?: ReactElement;
+    /**
+     * ID for the`RadioCard`.
+     */
+    id: string;
+    /**
+     * Should the `RadioCard` be disabled?
+     */
+    isDisabled?: boolean;
+    /**
+     * Helper text for the `RadioCard`, shown below the label.
+     */
+    support?: string;
+    /**
+     * Label for the `RadioCard`.
+     */
+    label: string;
+    /**
+     * Current value (controlled).
+     */
+    value: string;
+    /**
+     * Render icon within `RadioCard`
+     */
+    icon?: ArcIcon | React$1.ReactElement<SVGElement>;
+    /**
+     * Set control location within `RadioCard`.
+     */
+    controlLocation?: "left" | "right" | "bottom";
+    /**
+     * Hide the radio button icon from the `RadioCard`.
+     */
+    hideButton?: boolean;
+    /**
+     * Should the `RadioCard` be checked by default?
+     */
+    defaultChecked?: boolean;
+    /**
+     * State of the checked prop.
+     */
+    checked?: boolean;
+    /**
+     * Function called when the RadioCard's value changes.
+     */
+    changeEvent?: ContextProps$1["changeEvent"];
+    /**
+     * Function called when the RadioCard loses focus.
+     */
+    blurEvent?: ContextProps$1["blurEvent"];
+    /**
+     * Reference to radio group name property.
+     */
+    name: ContextProps$1["name"];
+}
+
+/**
+ * Radio Card component.
+ */
+declare const RadioCardGroupInput: React$1.ForwardRefExoticComponent<RadioCardGroupInputProps & React$1.RefAttributes<HTMLInputElement>>;
+interface RadioCardGroupInputProps extends Omit<RadioCardProps, "name"> {
+    /**
+     * Determine the alignment the RadioButton.
+     *
+     */
+    radioButtonAlignment?: "top" | "center";
+    /**
+     * ID for the Radio Button.
+     */
+    id: string;
+    /**
+     * Should the RadioButton label be visually hidden? (it will still be announced by screen readers)
+     */
+    hideLabel?: boolean;
+    /**
+     * Should the RadioButton be disabled?
+     */
+    isDisabled?: boolean;
+    /**
+     * Helper text for the RadioButton, shown below the label.
+     */
+    helper?: string;
+    /**
+     * Label for the RadioButton.
+     */
+    label: string;
+    /**
+     * Current value (controlled).
+     */
+    value: string;
+}
+
+type EventType$2 = React$1.ChangeEvent<HTMLInputElement>;
+/**
+ * Use `RadioCardGroup` to wrap and control `RadioCard` buttons and apply default values
+ */
+declare const RadioCardGroup: FC<RadioCardGroupProps> & {
+    RadioCard: typeof RadioCardGroupInput;
+};
+interface RadioCardGroupProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "disclosureText" | "disclosureTitle" | "onClickDisclosure" | "supplementaryInfo" | "labelPosition"> {
+    /**
+     * Contents of the `RadioCardGroup`. Should only contain `RadioCardGroup.RadioCard`
+     */
+    children: React$1.ReactNode;
+    /**
+     * Value of the `RadioCard` that should be checked by default.
+     */
+    checkedValue: string;
+    /**
+     * Should all `RadioCard` components be disabled?
+     */
+    isDisabled?: boolean;
+    /**
+     * Helper message for the `RadioCardGroup`.
+     */
+    helper?: string;
+    /**
+     * ID for the `RadioCardGroup`.
+     */
+    id: string;
+    /**
+     * Label for the `RadioCardGroup`.
+     */
+    label: string;
+    /**
+     * Label Size for the `RadioCardGroup`.
+     */
+    labelSize?: "l" | "s";
+    /**
+     * Name for the `RadioCardGroup`.
+     */
+    name: string;
+    /**
+     * Sets the `RadioCardGroup` to 100% width.
+     */
+    isFluid?: boolean;
+    /**
+     * Sets the `RadioCardGroup` width.
+     */
+    width?: number;
+    /**
+     * Function to call when the `RadioCardGroup` loses focus.
+     */
+    onBlur?: (e: EventType$2) => void;
+    /**
+     * Callback function to update the `RadioCardGroup`'s controlled `checkedValue` prop,
+     * for example `e => setCheckedValue(e.target.value)`.
+     */
+    onChange?: (event: EventType$2) => void;
+    /**
+     * Error message for the `RadioCardGroup`.
+     */
+    errorMessage?: string;
+    /**
+     * Is `RadioCardGroup` required?
+     */
+    isRequired?: boolean;
+    /**
+     * Is `RadioCardGroup` layout orientation?
+     */
+    layout?: "column" | "row";
+}
+
+/**
+ * Radio Button component.
+ */
+declare const RadioButtonGroupInput: React$1.ForwardRefExoticComponent<RadioButtonGroupInputProps & React$1.RefAttributes<HTMLInputElement>>;
+interface RadioButtonGroupInputProps {
+    /**
+     * Determine the alignment the RadioButton.
+     *
+     */
+    radioButtonAlignment?: "top" | "center";
+    /**
+     * ID for the Radio Button.
+     */
+    id: string;
+    /**
+     * Should the RadioButton label be visually hidden? (it will still be announced by screen readers)
+     */
+    hideLabel?: boolean;
+    /**
+     * Should the RadioButton be disabled?
+     */
+    isDisabled?: boolean;
+    /**
+     * Helper text for the RadioButton, shown below the label.
+     */
+    helper?: string;
+    /**
+     * Label for the RadioButton.
+     */
+    label: string;
+    /**
+     * Current value (controlled).
+     */
+    value: string;
+}
+
+type EventType$1 = React$1.ChangeEvent<HTMLInputElement>;
+/**
+ * Use `RadioGroup` to wrap and control radio buttons and apply default values
+ */
+declare const RadioGroup: FC<RadioGroupProps> & {
+    RadioButton: typeof RadioButtonGroupInput;
+};
+interface RadioGroupProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "labelSize" | "requirementStatus" | "disclosureText" | "disclosureTitle" | "onClickDisclosure" | "supplementaryInfo" | "hideLabel" | "labelPosition"> {
+    /**
+     * Contents of the RadioGroup. Should only contain `RadioGroup.RadioButton`
+     */
+    children?: React$1.ReactNode;
+    /**
+     * Value of the RadioButton that should be checked by default.
+     */
+    checkedValue: string;
+    /**
+     * Should all controls be disabled?
+     */
+    isDisabled?: boolean;
+    /**
+     * Helper message for the RadioGroup.
+     */
+    helper?: string;
+    /**
+     * ID for the RadioGroup.
+     */
+    id: string;
+    /**
+     * Label for the RadioGroup.
+     */
+    label: string;
+    /**
+     * Label size for the RadioGroup
+     */
+    labelSize?: "s" | "l";
+    /**
+     * Name for the RadioGroup.
+     */
+    name: string;
+    /**
+     * Function to call when the RadioGroup loses focus.
+     */
+    onBlur?: (e: EventType$1) => void;
+    /**
+     * Callback function to update the RadioGroup's controlled `checkedValue` prop,
+     * for example `e => setCheckedValue(e.target.value)`.
+     */
+    onChange?: (event: EventType$1) => void;
+    /**
+     * Size of the RadioGroup.
+     */
+    size?: "s" | "l";
+    /**
+     * Error message for the RadioGroup.
+     */
+    errorMessage?: string;
+    /**
+     * Is RadioGroup required?
+     */
+    isRequired?: boolean;
+}
+
+type EventType = ChangeEvent<HTMLInputElement>;
+type ContextProps = {
+    blurEvent: (event: EventType) => void;
+    changeEvent: (event: EventType) => void;
+    groupDisabled: boolean;
+    checkedValue: string;
+    labelSize: "s" | "l";
+    name: string;
+    size: "s" | "l";
+};
+
+declare const RadioButton: React$1.ForwardRefExoticComponent<RadioButtonProps & React$1.RefAttributes<HTMLInputElement>>;
+interface RadioButtonProps {
+    id: string;
+    label: string;
+    hideLabel?: boolean;
+    name: ContextProps["name"];
+    withMargin?: boolean;
+    defaultChecked?: boolean;
+    checked?: boolean;
+    value?: string;
+    isDisabled?: boolean;
+    helper?: string;
+    labelSize?: ContextProps["labelSize"];
+    size?: ContextProps["size"];
+    radioButtonAlignment?: "top" | "center";
+    changeEvent?: ContextProps["changeEvent"];
+    blurEvent?: ContextProps["blurEvent"];
+}
+
+/**
+ * Use `Rule` to display a horizontal or vertical rule.
+ */
+declare const Rule: FC<RuleProps>;
+interface RuleProps {
+    orientation?: "horizontal" | "vertical";
+}
+
+/**
+ * Use `ScrollToTop` to allow the user to scroll to the top of the page by clicking a button.
+ */
+declare const ScrollToTop: FC<ScrollToTopProps>;
+interface ScrollToTopProps {
+    /**
+     * If true, the button will stick to the bottom right corner of the screen.
+     */
+    isFixed?: boolean;
+    /**
+     * Sets when the scroll button should appear. `always` will show the button all the time.
+     * `afterScroll` will show the button when the user has stopped scrolling and have passed the fold.
+     */
+    appear?: "always" | "afterScroll";
+    /**
+     * Z-index for the button. Used to fine tune the overlapping of other page elements.
+     */
+    zIndex?: number;
+    /**
+     * Button fill.
+     */
+    fill?: "solid" | "outlined";
+}
+
+/**
+ * Use `Section` to compose content into vertical page layouts.
+ */
+declare const Section: FC<SectionProps>;
+interface SectionProps extends ExtentableContainer {
+    /**
+     * Content to display in the Section.
+     */
+    children: ReactNode;
+    /**
+     * Should the Section be visible for debugging and documentation
+     * purposes?
+     */
+    isDebugVisible?: boolean;
+    /**
+     * Should the width of this Section be unconstrained (filling the viewport)?
+     */
+    isFullWidth?: boolean;
+}
+
+/** Use `Select` to choose from a dropdown list of options. */
+declare const Select: React$1.FC<SelectProps>;
+interface SelectProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "id" | "helperUnderLabel" | "supplementaryInfo"> {
+    /**
+     * Name for the Select.
+     */
+    name: string;
+    /**
+     * Label for the Select.
+     */
+    label: string;
+    /**
+     * Aria label for the Select.
+     */
+    ariaLabel?: string;
+    /**
+     * Placeholder text for the Select.
+     */
+    placeholder: string;
+    /**
+     * Options for the Select.
+     */
+    options: {
+        name: string;
+        value: string;
+    }[];
+    /**
+     * value for the Select. Passing a value makes the Select a controlled component.
+     */
+    value?: string;
+    /**
+     * error message for the Select.
+     */
+    errorMessage?: string;
+    /**
+     * Default value for the Select.
+     */
+    defaultValue?: string;
+    /**
+     * onChange handler for the Select.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * onBlur handler for the Select.
+     */
+    onBlur?: (e: React$1.FocusEvent<HTMLButtonElement>) => void;
+    /**
+     * onFocus handler for the Select.
+     */
+    onFocus?: (e: React$1.FocusEvent<HTMLButtonElement>) => void;
+    /**
+     * onOpenChange handler for the Select.
+     */
+    onOpenChange?: (isOpen: boolean) => void;
+    /**
+     * The controlled open state of the select. Must be used in conjunction with onOpenChange.
+     */
+    open?: boolean;
+    /**
+     * select handler for the Select.
+     */
+    selectSize?: "s" | "m" | "l";
+    /**
+     * Sets the Select to 100% width.
+     */
+    isFluid?: boolean;
+    /**
+     * Sets the width of the Select.
+     */
+    width?: string;
+    /**
+     * Disables the Select.
+     */
+    isDisabled?: boolean;
+    /**
+     * Sets the Select to be open by default.
+     */
+    isDefaultOpen?: boolean;
+    /**
+     * Sets the Select to be open by default.
+     */
+    isRequired?: boolean;
+}
+
+/**
+ * Use `SiteFooter` to display information at the bottom of a page.
+ */
+declare const SiteFooter: FC<SiteFooterProps> & {
+    Item: typeof SiteFooterItem;
+    ItemGroup: typeof SiteFooterItemGroup;
+};
+declare const SiteFooterItemGroup: FC<SiteFooterItemGroupProps>;
+declare const SiteFooterItem: FC<SiteFooterItemProps>;
+interface SiteFooterItemGroupProps {
+    /**
+     * Contents of the SiteFooterItemGroup. Must be SiteFooter.Item components.
+     */
+    children: ReactNode;
+    /**
+     * Title text for the SiteFooterItemGroup.
+     */
+    title: string;
+}
+interface SiteFooterItemProps {
+    /**
+     * Contents of the SiteFooterItem.
+     */
+    children: ReactNode;
+    /**
+     * A URL to link to when the Item is clicked or touched.
+     */
+    href: string;
+    /**
+     * On click handler.
+     */
+    onClick?: () => void;
+}
+interface SiteFooterProps {
+    /**
+     * Secondary content of the SiteFooter. Must be SiteFooter.Item components.
+     */
+    children?: ReactNode;
+    /**
+     * Copyright year.
+     */
+    currentYear?: string;
+    /**
+     * Accessible text for the SiteFooter logo.
+     */
+    logoLabel?: string;
+    /**
+     * Main content of the SiteFooter. Must be SiteFooter.ItemGroup components.
+     */
+    main?: ReactNode;
+    /**
+     * Text that appears at the top of the footer. Can be the name of the site, a
+     * brand strapline, or similar.
+     */
+    siteName?: string;
+}
+
+declare const Column: FC<ColumnProps>;
+interface ColumnProps {
+    /**
+     * Contents of the Column. Must be SiteHeaderV2.ItemGroup components.
+     */
+    children: ReactNode;
+}
+
+declare const Item: FC<ItemProps>;
+interface ItemProps {
+    /**
+     * Contents of the Item. Usually text to be displayed in the Item link.
+     */
+    children: ReactNode;
+    /**
+     * A URL to link to when the Item is clicked or touched.
+     */
+    href: string;
+    /**
+     * On click handler.
+     */
+    onClick?: () => void;
+}
+
+declare const ItemGroup: FC<ItemGroupProps>;
+interface ItemGroupProps {
+    /**
+     * Contents of the ItemGroup. Must be Item components.
+     */
+    children: ReactNode;
+    subtitle?: string;
+    /**
+     * A top-level URL for the ItemGroup to link to.
+     */
+    href?: string;
+    /**
+     * Title text to be displayed in the ItemGroup summary.
+     */
+    title?: string;
+    /**
+     * Text to display in top-level link inside the ItemGroup in narrow viewports.
+     * Only applies if `href` is present. If not provided, top-level link text
+     * will be automatically generated from `title`.
+     */
+    viewAllTitle?: string;
+    /**
+     * On click handler.
+     */
+    onClick?: () => void;
+}
+
+declare const NavItem: FC<NavItemProps>;
+interface NavItemProps {
+    /**
+     * Contents of the NavItem. Must be SiteHeaderV2.ItemGroup or
+     * SiteHeaderV2.Column components.
+     */
+    children?: ReactNode;
+    /**
+     * A top-level URL for the NavItem to link to.
+     *
+     * When `children` are not present, the URL to link to when the NavItem is
+     * clicked or touched.
+     *
+     * When `children` are present, the URL to link to when a top-level link
+     * inside the NavItem panel is clicked or touched.
+     */
+    href?: string;
+    /**
+     * Should the NavItem be highlighted as the current item/page? Only applies if
+     * `children` are not present (and `href` is present).
+     */
+    isCurrent?: boolean;
+    /**
+     * Top-level text to display in the NavItem.
+     */
+    title: string;
+    /**
+     * On click handler.
+     */
+    onClick?: () => void;
+    isPrimary?: boolean;
+    opensFirstWithPanel?: boolean;
+    subTitle?: string;
+}
+
+declare const NavItemWithSubNav: FC<NavItemWithSubNavProps>;
+interface NavItemWithSubNavProps {
+    /**
+     * The URL to link to when a top-level link inside the NavItemWithSubNav panel
+     * is clicked or touched.
+     */
+    href?: string;
+    /**
+     * Content to be displayed in the first slot of the NavItemWithSubNav. Must be
+     * a single SiteHeaderV2.SubNavItem component.
+     */
+    slot1: ReactElement;
+    /**
+     * Content to be displayed in the second slot of the NavItemWithSubNav. Must
+     * be a single SiteHeaderV2.SubNavItem component.
+     */
+    slot2?: ReactNode;
+    /**
+     * Content to be displayed in the third slot of the NavItemWithSubNav. Must be
+     * a single SiteHeaderV2.SubNavItem component.
+     */
+    slot3?: ReactNode;
+    /**
+     * Content to be displayed in the fourth slot of the NavItemWithSubNav. Must be
+     * a single SiteHeaderV2.SubNavItem component.
+     */
+    slot4?: ReactNode;
+    slot5?: ReactNode;
+    slot6?: ReactNode;
+    /**
+     * Title text to display inside the NavItemWithSubNav panel.
+     */
+    subTitle?: string;
+    /**
+     * Top-level text to display in the NavItemWithSubNav.
+     */
+    title: string;
+    /**
+     * Text to display in top-level link inside the NavItemWithSubNav panel. Only
+     * applies if `href` is true. If not provided, text will be automatically
+     * generated from `title`.
+     */
+    viewAllTitle?: string;
+    /**
+     * view all click handler.
+     */
+    onViewAllClick?: () => void;
+    isPrimary?: boolean;
+    opensFirstWithPanel?: boolean;
+}
+
+declare const NodeItem: FC<NodeItemProps>;
+interface NodeItemProps {
+    /**
+     * Content to display with `SiteHeaderV2.NodeItem`
+     */
+    children?: ReactNode;
+}
+
+declare const SubNavItem: FC<SubNavItemProps>;
+interface SubNavItemProps {
+    /**
+     * Contents of the SubNavItem. Must be SiteHeaderV2.ItemGroup or
+     * SiteHeaderV2.Column components.
+     */
+    children?: ReactNode;
+    /**
+     * Should the SubNavItem be the default open item in a
+     * SiteHeaderV2.NavItemWithSubNav? If not specified, the default open item will
+     * be set automatically.
+     */
+    isDefaultItem?: boolean;
+    /**
+     * Optionally shift the SubNavItem-link upwards (in "desktop" viewports only)
+     * to close off any empty space between items due to content size.
+     */
+    offsetXL?: "24" | "48";
+    /**
+     * A URL to link to when the SubNavItem is clicked or touched. Only applies if
+     * `children` are not present.
+     */
+    href?: string;
+    /**
+     * Optional subtitle text for the SubNavItem.
+     */
+    subTitle?: string;
+    /**
+     * Title text for the SubNavItem.
+     */
+    title: string;
+    /**
+     * Text to display in top-level link inside the SubNavItem panel. Only
+     * applies if both `children` are present and `href` is true. If not
+     * provided, top-level link text will be automatically generated from `title`.
+     */
+    viewAllTitle?: string;
+    icon?: ArcIcon;
+    /**
+     * On click handler.
+     */
+    onClick?: () => void;
+}
+
+declare const VerticalDivider: () => JSX.Element;
+
+/**
+ * Use `SiteHeaderV2` to display brand logo and navigation at the top of a page.
+ */
+declare const SiteHeaderV2: FC<SiteHeaderV2Props> & {
+    Column: typeof Column;
+    Item: typeof Item;
+    ItemGroup: typeof ItemGroup;
+    NavItem: typeof NavItem;
+    NodeItem: typeof NodeItem;
+    NavItemWithSubNav: typeof NavItemWithSubNav;
+    SubNavItem: typeof SubNavItem;
+    VerticalDivider: typeof VerticalDivider;
+};
+interface SiteHeaderV2Props {
+    /**
+     * Contents of the SiteHeaderV2. Must be SiteHeaderV2.NavItem or
+     * SiteHeaderV2.NavItemWithSubNav components.
+     */
+    children?: ReactNode;
+    /**
+     * Basket component for the SiteHeaderV2.
+     */
+    basket?: ReactNode;
+    /**
+     * Should account login links be included in the SiteHeaderV2?
+     */
+    hasLogin?: boolean;
+    /**
+     * Should the SiteHeaderV2 have a transparent background?
+     */
+    isTransparent?: boolean;
+    /**
+     * A URL to link to when SiteHeaderV2 logo is clicked or touched.
+     */
+    loginHref?: string;
+    /**
+     * A Function to run to when SiteHeaderV2 logo is clicked or touched.
+     */
+    logoOnClick?: () => void;
+    /**
+     * A Function to run to when SiteHeaderV2 login links are clicked or touched.
+     */
+    loginOnClick?: () => void;
+    /**
+     * Text to display in SiteHeaderV2 login links.
+     */
+    loginTitle?: string;
+    /**
+     * A URL to link to when the SiteHeaderV2 brand logo link is clicked or touched.
+     */
+    logoHref?: string;
+    /**
+     * Accessible text for the SiteHeaderV2 brand logo link.
+     */
+    logoLabel?: string;
+    /**
+     * Search component for the SiteHeaderV2.
+     */
+    search?: ReactNode;
+    /**
+     * Optional sub-brand variant. Only applies to BT.
+     */
+    subBrand?: (typeof subBrands)[number];
+}
+
+/**
+ * Use `Skeleton` to display a placeholder preview of your page before the data gets loaded to reduce load-time frustration.
+ */
+declare const Skeleton: FC<SkeletonProps>;
+interface SkeletonProps {
+    /**
+     * Animation for `Skeleton`.
+     */
+    animation?: "pulse" | "shimmer" | "none";
+    /**
+     * Make `Skeleton` a circle.
+     */
+    isCircle?: boolean;
+    /**
+     * Width of `Skeleton`.
+     */
+    width?: string | number;
+    /**
+     * Height of `Skeleton`.
+     */
+    height?: string | number;
+}
+
+declare const SkipLinkItem: FC<SkipLinkItemProps>;
+interface SkipLinkItemProps {
+    /**
+     * The label to display for SkipLink.Item.
+     */
+    label: string;
+    /**
+     * The URL the skip link navigates to.
+     */
+    href?: string;
+    /**
+     * The ID attribute of the target element the skip link navigates to.
+     */
+    id?: string;
+}
+
+/** Use `SkipLink` to help keyboard-only users skip to the main content on a page. */
+declare const SkipLink: FC<SkipLinkProps> & {
+    Item: typeof SkipLinkItem;
+};
+interface SkipLinkProps {
+    /**
+     * Links to display in the SkipLink.Item.
+     */
+    children?: ReactNode;
+}
+
+/**
+ * Use `Spinner` to display a loading state.
+ */
+declare const Spinner: FC<SpinnerProps>;
+type SpinnerSize = "s" | "m" | "l" | "xl" | "xxl";
+interface SpinnerProps {
+    /**
+     * Colour options. If no `color` option defined, the colour will use currentColor.
+     */
+    color?: "light" | "dark" | undefined;
+    /**
+     * Set sizes of spinner `s`, `m`, `l`, `xl`, `xxl` or a custom number value e.g. `100`px.
+     */
+    size?: SpinnerSize | number | null;
+}
+
+/** Use `Switch` to allow users to immediately toggle between two states. */
+declare const Switch: FC<SwitchProps>;
+interface SwitchProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "disclosureText" | "disclosureTitle" | "onClickDisclosure" | "helper" | "helpUnderLabel" | "supplementaryInfo"> {
+    /**
+     * Hide Label above toggle?
+     */
+    hideLabel?: boolean;
+    /**
+     * Position of Label
+     */
+    labelPosition?: "top" | "left";
+    /**
+     * Text to display next to `Switch` when checked. If no value is provided onStatusText will equal offStatusText.
+     */
+    onStatusText?: string;
+    /**
+     * Text to display next to `Switch` when unchecked. If no value is provided offStatusText will equal onStatusText.
+     */
+    offStatusText?: string;
+    /**
+     * Should the `Switch` be disabled?
+     */
+    isDisabled?: FormControlProps["isDisabled"];
+    /**
+     * handler for blur
+     */
+    onBlur?: SwitchProps$1["onBlur"];
+    /**
+     * set the switch to be checked by default
+     */
+    defaultChecked?: SwitchProps$1["defaultChecked"];
+    /**
+     * value for the switch, is applied to a hidden checkbox if within a form
+     */
+    value?: SwitchProps$1["value"];
+    /**
+     * name for the hidden checkbox if within a form
+     */
+    name?: SwitchProps$1["name"];
+    /**
+     * Aria label to add a description to the switch button
+     */
+    ariaLabel?: string;
+    /**
+     * callback for when the switch is toggled
+     */
+    onCheckedChange?: SwitchProps$1["onCheckedChange"];
+}
+
+declare const Tab: FC<TabProps>;
+interface TabProps {
+    /**
+     * Label to display on the Tab
+     */
+    label: string;
+    /**
+     * Value to link `Tab` to `TabContent`
+     */
+    value: string;
+    /**
+     * Determine what icon to display within the Tab.
+     */
+    icon?: ArcIcon;
+    /**
+     * Determine what to display when `Tab` is active
+     */
+    iconActive?: ArcIcon;
+}
+
+declare const TabContent: FC<TabContentProps>;
+interface TabContentProps {
+    /**
+     * Content to display
+     */
+    children: ReactNode;
+    /**
+     * This value links the `TabContent` with `Tab`
+     */
+    value: string;
+}
+
+declare const TabsList: FC<TabsListProps>;
+interface TabsListProps {
+    /**
+     * Contents of the `Tabs` Should contain `Tab`
+     */
+    children: ReactNode;
+    /**
+     * Determine if `Tabs` should be justified
+     */
+    isJustified?: boolean;
+    /**
+     * Determine the type of `Tabs`. Default is standard
+     */
+    type?: "standard" | "contained";
+    /**
+     * Determine a accessible label for `Tabs`
+     */
+    ariaLabel?: string;
+}
+
+/** Use `Tabs` to allow users to navigate between different sections of relevant content. */
+declare const Tabs: FC<TabsProps> & {
+    Tab: typeof Tab;
+    Content: typeof TabContent;
+    List: typeof TabsList;
+};
+interface TabsProps {
+    /**
+     * Render children
+     */
+    children: ReactNode;
+    /**
+     * Default to an inital value of a tab. If this is left blank it is possible for there to be no active tabs
+     */
+    defaultValue?: string;
+    /**
+     * Event handler called when the value changes.
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * When automatic, tabs are activated when receiving focus. When manual, tabs are activated when clicked.
+     */
+    activationMode?: "automatic" | "manual";
+}
+
+declare const TabbedBanner: FC<TabbedBannerProps>;
+interface TabbedBannerProps {
+    /**
+     * Determine what tabs to render. They need both a `value` and `label` prop
+     */
+    tabs: {
+        value: string;
+        label: string;
+        content: TemplateBannerProps;
+    }[];
+    /**
+     * Default to an inital value of a tab. If this is left blank it will default to first tab.
+     */
+    defaultValue?: string;
+    /**
+     * The minimum height of the all banners M and above`.
+     */
+    minHeight?: TemplateBannerProps["minHeight"];
+    /**
+     * The minimum height of the banner for the M breakpoint.
+     * This will be active when the TabbedBanner switches to the mobile layout at the medium breakpoint.
+     */
+    minHeightM?: TemplateBannerProps["minHeight"];
+}
+
+/**
+ * Use `Tag` to promote features and manage filtering.
+ */
+declare const Tag: FC<TagProps>;
+interface TagProps {
+    /**
+     * Content to render within the Tag
+     */
+    children: ReactNode;
+    /**
+     * Determine if the Tag is removable.
+     */
+    isRemovable?: boolean;
+    /**
+     * Provide a link for the tag
+     */
+    link?: string;
+    /**
+     * Determine a icon to display within the tag.
+     */
+    icon?: ArcIcon;
+    /**
+     * onClick Handler for Tag
+     */
+    onClick?: () => void;
+    /**
+     * Execute function on remove
+     */
+    onRemove?: () => void;
+    /**
+     * Specify extra information about the Tag.
+     */
+    title?: string;
+}
+
+/**
+ * Use `Text` to display text.
+ */
+declare const Text: FC<TextProps>;
+type Tone = "default" | "supporting" | "muted";
+type TextSize = "xs" | "s" | "m" | "l";
+interface TextProps {
+    /**
+     * Alignment of the Text.
+     */
+    align?: "left" | "center" | "right";
+    /**
+     * Text and inline markup to display.
+     */
+    children: ReactNode;
+    /**
+     * Should the Text component be styled as an inline element?
+     */
+    isInline?: boolean;
+    /**
+     * Should the Text width be constrained to a typographic measure?
+     */
+    isMeasured?: boolean;
+    /**
+     * Typographic Text size.
+     */
+    size?: TextSize;
+    /**
+     * Visual emphasis of the Text.
+     */
+    tone?: Tone;
+    /**
+     * Id for the Text.
+     */
+    id?: string;
+    /**
+     * Element type for text component. Default value is span
+     */
+    elementType?: "span" | "p";
+}
+
+/** Use `TextArea` to allow custom user text entry via keyboard, for long-form and multi-line descriptions */
+declare const TextArea: React$1.ForwardRefExoticComponent<TextAreaProps & React$1.RefAttributes<HTMLTextAreaElement>>;
+interface TextAreaProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "helperUnderLabel" | "labelPosition"> {
+    /**
+     * Uncontrolled default value of the TextArea. If the TextArea is controlled
+     * via `value`/`onChange`, `defaultValue` will be ignored.
+     *
+     * `defaultValue` is not to be used instead of helper text.
+     */
+    defaultValue?: string;
+    /**
+     * ID for the TextArea.
+     */
+    id: string;
+    /**
+     * Should the control be disabled?
+     */
+    isDisabled?: boolean;
+    /**
+     * Should the control be read-only?
+     */
+    isReadOnly?: boolean;
+    /**
+     * Should the control be required?
+     */
+    isRequired?: boolean;
+    /**
+     * Maximum number of characters.
+     */
+    maxLength?: number;
+    /**
+     * Shows the current character count and maxLength. Ignored if maxLength is undefined.
+     */
+    showCharacterCount?: boolean;
+    /**
+     * Name of the input.
+     */
+    name?: string;
+    /**
+     * `none` will prevent any resizing.
+     * `manual` will allow the user to resize the TextArea.
+     * `auto` will resize the text area as needed when the user types.
+     */
+    resize?: "none" | "manual" | "auto";
+    /**
+     * Function to call when the TextArea loses focus.
+     */
+    onBlur?: (e: React$1.FocusEvent<HTMLTextAreaElement>) => void;
+    /**
+     * Function to call when the TextArea is focused.
+     */
+    onFocus?: (e: React$1.FocusEvent<HTMLTextAreaElement>) => void;
+    /**
+     * Callback function commonly used to update the TextArea's controlled
+     * `value`, for example `e => setValue(e.target.value)`.
+     */
+    onChange?: (e: React$1.ChangeEvent<HTMLTextAreaElement>) => void;
+    /**
+     * Current value of the TextArea. Must be controlled via an
+     * `onChange` callback function. Otherwise, use `defaultValue` (or `isReadOnly`).
+     */
+    value?: string;
+    /**
+     * Sets the width of the TextArea.
+     */
+    width?: string;
+    /**
+     *  Sets autoComplete value for TextArea.
+     */
+    autoComplete?: AutoCompleteTypes;
+    /**
+     *  Sets minimum height value for TextArea.
+     */
+    minHeight?: string;
+    /**
+     *  Sets max-height value for TextArea.
+     */
+    maxHeight?: string;
+}
+
+/**
+ * Use `Theme` component to apply a specific theme to its children.
+ */
+declare const Theme: FC<ThemeProps>;
+declare const themes: readonly ["bt-enterprise", "bt-business", "ee"];
+type ThemeType = "bt-enterprise" | "bt-business" | "ee";
+interface ThemeProps {
+    /**
+     * Theme to apply to all children. Should be one of "bt-enterprise"
+     */
+    theme?: ThemeType;
+    /**
+     * Applies a style reset to everything within theme component, defaults to true.
+     */
+    resetCssStyles?: boolean;
+    /**
+     * Content to display inside Theme.
+     */
+    children: any;
+}
+
+declare const ToastNotification: FC<ToastNotificationProps>;
+type ToastStatus = "general" | "error" | "warning" | "success";
+interface ToastNotificationProps {
+    /**
+     * Title for `<Toast />`
+     */
+    title: string;
+    /**
+     * Set open state for `<Toast />`
+     */
+    isOpen: boolean;
+    /**
+     * Function to call when the open state of `<Toast />` changes. This needs to be supplied in order for the auto dismiss and the close button to work.
+     */
+    onOpenChange: (isOpen: boolean) => void;
+    /**
+     * Set whether close button shows
+     */
+    isCloseButtonVisible?: boolean;
+    /**
+     * Set whether to include a status icon
+     */
+    isStatusIconVisible?: boolean;
+    /**
+     * Link for `<Toast />`
+     */
+    link?: {
+        text: string;
+        ariaLabel?: string;
+        href?: string;
+        onClick?: () => void;
+    };
+    /**
+     * Status of `<Toast />`
+     */
+    status?: ToastStatus;
+}
+
+/** Use `Toast` to display temporary messages at the bottom of the screen. */
+declare const Toast: FC<ToastProps> & {
+    Notification: typeof ToastNotification;
+};
+interface ToastProps {
+    /**
+     * Content to display within `Toast`
+     */
+    children: React$1.ReactNode;
+    /**
+     * Colour scheme for `Toast` - Use 'default' in almost all cases.
+     */
+    colorScheme?: "default" | "alternative";
+}
+
+/** Use `Tooltip` to display information related to an element when the element receives keyboard focus or the mouse hovers over it */
+declare const Tooltip: FC<TooltipProps>;
+interface TooltipProps {
+    /**
+     * Content to render within Tooltip
+     */
+    children?: React$1.ReactNode;
+    /**
+     * The preferred side of the anchor to render against when open
+     */
+    side?: "left" | "right" | "bottom" | "top";
+    /**
+     * The distance in pixels from the anchor
+     */
+    sideOffset?: 8 | 16 | 32;
+    /**
+     * The preferred alignment against the anchor. May change when collisions occur.
+     */
+    align?: "start" | "center" | "end";
+    /**
+     * Alignment for content within the tooltip
+     */
+    alignContent?: "start" | "center" | "end";
+    /**
+     * The main title text displayed within the tooltip.
+     */
+    title: string;
+    /**
+     * Additional supporting text displayed below the title, if provided.
+     */
+    supportingCopy?: string;
+    /**
+     * Icon displayed next to the tooltip title or content.
+     */
+    icon?: React$1.ReactElement<SVGElement> | ArcIcon$1;
+    /**
+     * Delay in milliseconds before the tooltip appears.
+     */
+    delayDuration?: number;
+    /**
+     * Maximum width for the tooltip container.
+     */
+    maxWidth?: string;
+    /**
+     * The controlled open state of the tooltip. Must be used in conjunction with `onOpenChange`.
+     */
+    open?: boolean;
+    /**
+     * Event handler called when the open state of the tooltip changes.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Z-index for the `Tooltip`. Used to fine tune the overlapping of other page elements.
+     */
+    zIndex?: number;
+}
+
+/** Use `Truncate` component to shorten text with an ellipsis. Add a `title` attribute to the truncated element so the full text remains accessible. */
+declare const Truncate: FC<TruncateProps>;
+interface TruncateProps {
+    /**
+     * Content to truncate.
+     */
+    children: ReactNode;
+    /**
+     * Use title to provide extra information about text that is truncated.
+     */
+    title: string;
+    /**
+     * Set max width of visible content within `Truncate`. Default is `100%`.
+     */
+    maxWidth?: string;
+}
+
+/** Use `TypographyCard` for content that benefits from larger and energetic typography. */
+declare const TypographyCard: FC<TypographyCardProps>;
+type TypographyCardIcon = "play" | "arrow";
+type TypographyCardPathway = "light" | "dark";
+interface TypographyCardProps {
+    /**
+     * Heading for the TypographyCard.
+     */
+    heading: string;
+    /**
+     * Heading size for the ImpactCard.
+     */
+    headingSize?: CardHeadingSize;
+    /**
+     * Url for the TypographyCard.
+     */
+    url: string;
+    /**
+     * Sets a dark or light background for the TypographyCard.
+     */
+    pathway?: TypographyCardPathway;
+    /**
+     * Icon for the TypographyCard Cta button.
+     */
+    buttonIcon?: TypographyCardIcon;
+    /**
+     * Heading level for the TypographyCard heading.
+     */
+    headingLevel?: HeadingLevel;
+    /**
+     * Uppercase label for the TypographyCard.
+     */
+    label?: string;
+    /**
+     * Click handler for the TypographyCard.
+     */
+    onClick?: (e: React$1.MouseEvent<HTMLAnchorElement>) => void;
+    /**
+     * Text to show adjacent to the cta, can be either a date or text. Its recommended to pass dates as Date objects so the component can render them correctly.
+     */
+    metaText?: CardFooterProps["metaText"];
+    /**
+     * Sets a minimum height for the TypographyCard.
+     */
+    minHeight?: number;
+    /**
+     * Object of `data-` attributes to render on internal anchor element, e.g.
+     * `{ data-analytics-link: "My link"}` => `<a data-analytics-link="My link">`.
+     */
+    linkData?: {
+        [key: string]: string;
+    };
+}
+
+/**
+ * Use `UniversalHeader` to display a group-level page header.
+ */
+declare const UniversalHeader: FC<UniversalHeaderProps> & {
+    Item: typeof UniversalHeaderItem;
+};
+declare const UniversalHeaderItem: FC<UniversalHeaderItemProps>;
+interface UniversalHeaderItemProps {
+    /**
+     * Contents of the UniversalHeaderItem.
+     */
+    children: ReactNode;
+    /**
+     * A URL to link to when the Item is clicked or touched.
+     */
+    href: string;
+    /**
+     * An isActive prop state if the current link is active.
+     */
+    isActive?: boolean;
+}
+interface UniversalHeaderProps {
+    /**
+     * Contents of the UniversalHeader. Must be
+     * UniversalHeader.Item components.
+     */
+    children: ReactNode;
+    /**
+     * A Slot to accept react node. Any content with this slot will be aligned right.
+     */
+    ContentSlot?: ReactNode;
+}
+
+/**
+ * Use `VerticalSpace` to create vertical space between components.
+ */
+declare const VerticalSpace: FC<VerticalSpaceProps>;
+type VerticalSpaceSize = "4" | "8" | "12" | "16" | "20" | "24" | "28" | "32" | "40" | "48" | "64" | "96" | "128";
+interface VerticalSpaceProps {
+    /**
+     * Should the VerticalSpace be visible for debugging and documentation
+     * purposes?
+     */
+    isDebugVisible?: boolean;
+    /**
+     * Size of the VerticalSpace.
+     */
+    size?: VerticalSpaceSize;
+    /**
+     * Size of the VerticalSpace from the small breakpoint upwards.
+     */
+    sizeS?: VerticalSpaceSize;
+    /**
+     * Size of the VerticalSpace from the medium breakpoint upwards.
+     */
+    sizeM?: VerticalSpaceSize;
+    /**
+     * Size of the VerticalSpace from the large breakpoint upwards.
+     */
+    sizeL?: VerticalSpaceSize;
+    /**
+     * Size of the VerticalSpace from the extra large breakpoint upwards.
+     */
+    sizeXL?: VerticalSpaceSize;
+}
+
+/**
+ * Use `VideoPlayer` to embed videos from YouTube or Vimeo.
+ */
+declare const VideoPlayer: React$1.FC<VideoPlayerProps>;
+interface VideoPlayerProps extends Pick<ReactPlayerProps, "onReady" | "onPlay" | "onStart" | "onPause" | "onEnded" | "onError" | "light"> {
+    url: string;
+    title: string;
+    description: string;
+    isBorderRadius?: boolean;
+    transcriptLink?: {
+        url: string;
+        text: string;
+        fileSize: string;
+        format: string;
+    };
+    transcriptContent?: {
+        heading: string;
+        description: string;
+        content: {
+            heading?: string;
+            text?: string;
+        }[];
+    };
+    isSupportingTextHidden?: boolean;
+}
+
+declare const Visible: React$1.FC<VisibleProps>;
+interface VisibleProps {
+    xs?: boolean;
+    s?: boolean;
+    m?: boolean;
+    l?: boolean;
+    xl?: boolean;
+    children: React$1.ReactNode;
+}
+
+/**
+ * Use `VisuallyHidden` to provide text for screen readers that is visually hidden on screen.
+ */
+declare const VisuallyHidden: FC<VisuallyHiddenProps>;
+interface VisuallyHiddenProps {
+    /**
+     * Content to be Visually Hidden.
+     */
+    children?: ReactNode;
+}
+
+/**
+ * @typedef MediaQueryOutputs
+ * @param {boolean} matches - does the document match the media query?
+ */
+/**
+ * Handle with care!
+ *
+ * If you need to change something in the browser based on @media query, you
+ * probably don’t need this hook. Use CSS media queries instead.
+ *
+ * Sometimes UI requirements are not achievable with CSS media queries alone. In
+ * these rare cases, use this hook to make media query matches available
+ * to React JavaScript code.
+ *
+ * @param {string} mediaQuery - the media query to parse
+ * @returns {MediaQueryOutputs}
+ */
+declare const useMediaQuery: (mediaQuery: string) => boolean;
+
+export { Alert, type AlertProps, Align, type AlignProps, type AlignmentValue, AppButton, type AppButtonProps, type RangeSelection as ArcCalendarRangeSelection, type SelectionType as ArcCalendarSelectionType, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, Banner, type BannerProps, Box, type BoxProps, BrandLogo, colors$1 as BrandLogoColors, type BrandLogoProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, ButtonV2, type ButtonV2Props, Calendar, type CalendarProps, Carousel, type CarouselProps, Checkbox, type CheckboxProps, type ColumnValue, Columns, ComboBox, type ComboBoxProps, ContentSwitcher, ContentSwitcherContent, ContentSwitcherDropdown, type ContentSwitcherDropdownProps, ContentSwitcherList, type ContentSwitcherProps, ContentSwitcherTab, DATE_FORMAT, DatePicker, type DatePickerProps, Disclosure, DisclosureMini, type DisclosureMiniProps, type DisclosureProps, Download, type DownloadProps, Drawer, type DrawerProps, Elevation, type ElevationProps, Filter, type FilterProps, FormControl, Context as FormControlContext, type FormControlProps, Grid, type GridProps, type GridValue, Group, type GroupProps, Heading, type HeadingLevel, HeadingProposition, type HeadingProps, HeroBanner, type HeroBannerProps, HeroButton, type HeroButtonProps, Hidden, type HiddenProps, Icon, colors as IconColors, type IconProps, Image, fitOptions as ImageFitOptions, overlayOptions as ImageOverlayOptions, type ImageProps, type ImageSourceProps, ImpactCard, type ImpactCardProps, InformationCard, type InformationCardProps, Link, type LinkProps, Markup, type MarkupProps, MediaCard, type MediaCardProps, Modal, type ModalProps, Pagination, type PaginationProps, PaginationSimple, type PaginationSimpleProps, Popover, type PopoverProps, Poster, type PosterProps, ProgressBar, type ProgressBarProps, type ProgressBarState, ProgressStepper, ProgressStepperItem, type ProgressStepperItemProps, type ProgressStepperProps, RadioButton, type RadioButtonProps, RadioCardGroup, RadioGroup, type RadioGroupProps, Rule, type RuleProps, ScrollToTop, type ScrollToTopProps, Section, type SectionProps, Select, type SelectProps, SiteFooter, SiteFooterItem, SiteFooterItemGroup, type SiteFooterProps, SiteHeaderV2, type SiteHeaderV2Props, Skeleton, type SkeletonProps, SkipLink, type SkipLinkProps, type Span, Spinner, type SpinnerProps, Surface, type SurfaceBackgroundColor, Context$1 as SurfaceContext, type SurfacePadding, type SurfaceProps, Switch, type SwitchProps, TabbedBanner, type TabbedBannerProps, Tabs, TabsList, type TabsProps, Tag, type TagProps, TemplateBanner, type TemplateBannerProps, Text, TextArea, type TextAreaProps, TextInput, type TextInputProps, type TextProps, Theme, ThemeIcon, type ThemeIconNames, type ThemeIconProps, type ThemeProps, type ThemeType, Toast, type ToastProps, Tooltip, type TooltipProps, Truncate, type TruncateProps, TypographyCard, type TypographyCardProps, UniversalHeader, type UniversalHeaderProps, VerticalSpace, type VerticalSpaceProps, VideoPlayer, type VideoPlayerProps, Visible, type VisibleProps, VisuallyHidden, type VisuallyHiddenProps, backgrounds, backgroundsBT, isDateValid, isRangeValid, loadingOptions, parseDateString, parseRangeString, themes, useMediaQuery };