@redsift/design-system 11.6.0-muiv5-alpha.4 → 11.6.0-muiv5-alpha.6

package/_internal/types.d.ts

@@ -0,0 +1,39 @@
+import { ComponentProps, ReactElement, RefObject, MouseEvent } from 'react';
+import { b as IconButtonProps } from './types.d16.ts';
+import { V as ValueOf } from './helpers.js';
+import { T as Theme } from './colors.js';
+
+/**
+ * Component variant.
+ */
+declare const AppSidePanelVariant: {
+    readonly shrinked: "shrinked";
+    readonly standard: "standard";
+    readonly hidden: "hidden";
+};
+type AppSidePanelVariant = ValueOf<typeof AppSidePanelVariant>;
+/**
+ * Component props.
+ */
+interface AppSidePanelProps extends ComponentProps<'div'> {
+    /** Elements to display on top of the navigation menu. Usually a button.  */
+    featuredElements?: ReactElement | ReactElement[];
+    /** Custom props to pass to the IconButton used to collapse the side panel. */
+    iconButtonProps?: Omit<IconButtonProps, 'icon'>;
+    /** Custom ref to pass to the IconButton used to collapse the side panel. */
+    iconButtonRef?: RefObject<HTMLButtonElement>;
+    /** Place to display the logo app.  */
+    logo?: ReactElement | ComponentProps<'img'>;
+    /** Method called when a click occurs on the top open button - which is displayed only in shrinked variant. */
+    onOpen?: (e: MouseEvent) => void;
+    /** Theme. */
+    theme?: Theme;
+    /** Variant. */
+    variant?: AppSidePanelVariant;
+}
+type StyledAppSidePanelProps = Omit<AppSidePanelProps, 'isCollapsed' | 'logo'> & {
+    $variant: AppSidePanelProps['variant'];
+    $theme: AppSidePanelProps['theme'];
+};
+
+export { AppSidePanelVariant as A, StyledAppSidePanelProps as S, AppSidePanelProps as a };

package/_internal/types.d10.ts

@@ -0,0 +1,20 @@
+import { ComponentProps } from 'react';
+import { b as HeadingProps } from './types.d15.ts';
+import { T as Theme } from './colors.js';
+
+/**
+ * Component props.
+ */
+interface DetailedCardHeaderProps extends ComponentProps<'div'> {
+    /** Header. */
+    header?: string;
+    /** Heading props allowing to override the component rendered by the heading without changing its style. */
+    headingProps?: Pick<HeadingProps, 'as' | 'noWrap'>;
+    /** Whether the card is loading or not. */
+    isLoading?: boolean;
+}
+type StyledDetailedCardHeaderProps = DetailedCardHeaderProps & {
+    $theme: Theme;
+};
+
+export { DetailedCardHeaderProps as D, StyledDetailedCardHeaderProps as S };

package/_internal/types.d11.ts

@@ -0,0 +1,27 @@
+import { ComponentProps, ReactElement } from 'react';
+import { a as BadgeProps } from './types.d2.ts';
+import { N as NotificationsColorPalette, c as PresentationColorPalette } from './colors.js';
+
+/**
+ * Component props.
+ */
+interface DetailedCardSectionProps extends ComponentProps<'div'> {
+    /** Props to pass to the badge displayed next to the title. */
+    badge?: Omit<BadgeProps, 'ref'>;
+    /** Color that will be used on the header line. */
+    color?: NotificationsColorPalette | PresentationColorPalette | (string & {});
+    /** Header. */
+    header?: string | ReactElement;
+    /** Whether the section is collapsed or not. */
+    readonly isCollapsed?: boolean;
+    /** Whether the section can be collasped or not. */
+    isCollapsible?: boolean;
+    /** Whether the card is loading or not. */
+    isLoading?: boolean;
+}
+type StyledDetailedCardSectionProps = Omit<DetailedCardSectionProps, 'color' | 'isCollapsed'> & {
+    $color: DetailedCardSectionProps['color'];
+    $isCollapsed: DetailedCardSectionProps['isCollapsed'];
+};
+
+export { DetailedCardSectionProps as D, StyledDetailedCardSectionProps as S };

package/_internal/types.d12.ts

@@ -0,0 +1,35 @@
+import { ComponentProps, ReactElement } from 'react';
+import { a as PillProps } from './types.d20.ts';
+import { S as ShieldVariant } from './types.d22.ts';
+import { b as IconProps } from './types.d17.ts';
+import { b as TextProps } from './types.d28.ts';
+
+/**
+ * Component props.
+ */
+interface DetailedCardSectionItemProps extends ComponentProps<'div'> {
+    /** Description */
+    description?: string | ReactElement;
+    /** TextProps to forward to the description. */
+    descriptionProps?: Omit<TextProps, 'ref'>;
+    /**
+     * Can be a string or an array of strings containing `d` property of the `path` SVG element.<br />
+     * Can also be a ReactElement.
+     */
+    icon?: IconProps['icon'];
+    /** Props to pass to the Icon component. */
+    iconProps?: Omit<IconProps, 'ref' | 'icon'>;
+    /** Whether the section item can be collapsed or not. */
+    isCollapsible?: boolean;
+    /** Whether the card is loading or not. */
+    isLoading?: boolean;
+    /** Text to display inside a Pill. */
+    pill?: string;
+    /** Props to pass to the Pill component. */
+    pillProps?: Omit<PillProps, 'ref'>;
+    /** Shield to display in place of the icon. */
+    shield?: ShieldVariant;
+}
+type StyledDetailedCardSectionItemProps = DetailedCardSectionItemProps & {};
+
+export { DetailedCardSectionItemProps as D, StyledDetailedCardSectionItemProps as S };

package/_internal/types.d13.ts

@@ -0,0 +1,143 @@
+import { ComponentProps } from 'react';
+
+declare enum EventKey {
+    ArrowLeft = "ArrowLeft",
+    ArrowRight = "ArrowRight",
+    ArrowUp = "ArrowUp",
+    ArrowDown = "ArrowDown",
+    Home = "Home",
+    End = "End",
+    Enter = "Enter"
+}
+type KeyDirection = 'horizontal' | 'vertical' | 'both';
+declare enum Navigation {
+    PREVIOUS = "PREVIOUS",
+    NEXT = "NEXT",
+    VERY_FIRST = "VERY_FIRST",
+    VERY_LAST = "VERY_LAST",
+    PREVIOUS_ROW = "PREVIOUS_ROW",
+    NEXT_ROW = "NEXT_ROW",
+    FIRST_IN_ROW = "FIRST_IN_ROW",
+    LAST_IN_ROW = "LAST_IN_ROW"
+}
+type TabStop = Readonly<{
+    id: string;
+    domElementRef: React.RefObject<Element>;
+    isDisabled: boolean;
+    rowIndex: number | null;
+    value: string;
+}>;
+type RowStartMap = Map<Exclude<TabStop['rowIndex'], null>, number>;
+type FocusWithinGroupState = Readonly<{
+    selectedId: string | null;
+    allowFocusing: boolean;
+    tabStops: readonly TabStop[];
+    direction: KeyDirection;
+    focusOnClick: boolean;
+    focusOnInit: boolean;
+    loopAround: boolean;
+    rowStartMap: RowStartMap | null;
+    focusType: 'roving-tabindex' | 'virtual-focus';
+    listRole: 'listbox' | 'menu';
+    activedescendant?: [string, string];
+    filter?: {
+        value: string;
+        type: 'startsWith' | 'contains' | 'endsWith';
+        caseSensitive?: boolean;
+    };
+    delayedAction?: BaseFocusWithinGroupAction;
+    maxOptionsLength?: number;
+}>;
+type FocusWithinGroupOptions = Partial<Pick<FocusWithinGroupState, 'direction' | 'focusOnClick' | 'focusOnInit' | 'loopAround' | 'focusType' | 'listRole' | 'activedescendant' | 'maxOptionsLength'>>;
+declare enum FocusWithinGroupActionType {
+    REGISTER_TAB_STOP = "REGISTER_TAB_STOP",
+    UNREGISTER_TAB_STOP = "UNREGISTER_TAB_STOP",
+    KEY_DOWN_ON_ITEM = "KEY_DOWN_ON_ITEM",
+    CLICK_ON_ITEM = "CLICK_ON_ITEM",
+    KEY_DOWN_ON_LIST = "KEY_DOWN_ON_LIST",
+    FOCUS_ON_LIST = "FOCUS_ON_LIST",
+    BLUR_ON_LIST = "BLUR_ON_LIST",
+    TAB_STOP_UPDATED = "TAB_STOP_UPDATED",
+    OPTIONS_UPDATED = "OPTIONS_UPDATED",
+    FILTER_LIST = "FILTER_LIST",
+    DELAY_ACTION = "DELAY_ACTION"
+}
+type BaseFocusWithinGroupAction = {
+    type: FocusWithinGroupActionType.REGISTER_TAB_STOP;
+    payload: TabStop;
+} | {
+    type: FocusWithinGroupActionType.UNREGISTER_TAB_STOP;
+    payload: {
+        id: TabStop['id'];
+    };
+} | {
+    type: FocusWithinGroupActionType.TAB_STOP_UPDATED;
+    payload: {
+        id: TabStop['id'];
+        rowIndex: TabStop['rowIndex'];
+        isDisabled: TabStop['isDisabled'];
+        value: string;
+    };
+} | {
+    type: FocusWithinGroupActionType.KEY_DOWN_ON_ITEM;
+    payload: {
+        id: TabStop['id'];
+        key: EventKey;
+        ctrlKey: boolean;
+    };
+} | {
+    type: FocusWithinGroupActionType.CLICK_ON_ITEM;
+    payload: {
+        id: TabStop['id'];
+    };
+} | {
+    type: FocusWithinGroupActionType.KEY_DOWN_ON_LIST;
+    payload: {
+        key: EventKey;
+        ctrlKey: boolean;
+    };
+} | {
+    type: FocusWithinGroupActionType.FOCUS_ON_LIST;
+    payload: {
+        id: TabStop['id'];
+        filter?: FocusWithinGroupState['filter'];
+    };
+} | {
+    type: FocusWithinGroupActionType.BLUR_ON_LIST;
+    payload: {};
+} | {
+    type: FocusWithinGroupActionType.OPTIONS_UPDATED;
+    payload: FocusWithinGroupOptions;
+} | {
+    type: FocusWithinGroupActionType.FILTER_LIST;
+    payload: {
+        filter: FocusWithinGroupState['filter'];
+    };
+};
+type FocusWithinGroupAction = BaseFocusWithinGroupAction | {
+    type: FocusWithinGroupActionType.DELAY_ACTION;
+    payload: BaseFocusWithinGroupAction;
+};
+type UseFocusWithinGroupProps = {
+    tabIndex?: number;
+    isFocused: boolean;
+    handleKeyDown: (event: React.KeyboardEvent) => void;
+    handleClick: () => void;
+};
+type UseFocusGroupProps = {
+    activedescendant: [string, string] | undefined;
+    handleKeyDown: (event: React.KeyboardEvent) => void;
+    handleFocus: () => void;
+    handleBlur: () => void;
+};
+type FocusWithinGroupContextProps = {
+    state: FocusWithinGroupState;
+    dispatch: React.Dispatch<FocusWithinGroupAction>;
+};
+/**
+ * Component props.
+ */
+interface FocusWithinGroupProps extends ComponentProps<'div'>, FocusWithinGroupOptions {
+}
+
+export { BaseFocusWithinGroupAction as B, EventKey as E, FocusWithinGroupState as F, KeyDirection as K, Navigation as N, RowStartMap as R, TabStop as T, UseFocusWithinGroupProps as U, FocusWithinGroupOptions as a, FocusWithinGroupActionType as b, FocusWithinGroupAction as c, UseFocusGroupProps as d, FocusWithinGroupContextProps as e, FocusWithinGroupProps as f };

package/_internal/types.d14.ts

@@ -0,0 +1,11 @@
+import { ComponentProps } from 'react';
+import { h as StylingProps, I as InternalSpacingProps, B as BorderProps } from './styles.d2.ts';
+
+/**
+ * Component props.
+ */
+interface GridItemProps extends ComponentProps<'div'>, StylingProps, InternalSpacingProps, BorderProps {
+}
+type StyledGridItemProps = GridItemProps;
+
+export { GridItemProps as G, StyledGridItemProps as S };

package/_internal/types.d15.ts

@@ -0,0 +1,62 @@
+import { ComponentProps } from 'react';
+import { F as FontFamily } from './fonts.js';
+import { V as ValueOf } from './helpers.js';
+import { h as StylingProps } from './styles.d2.ts';
+import { N as NotificationsColorPalette, d as NeutralColorPalette, T as Theme } from './colors.js';
+
+/**
+ * Component variant.
+ */
+declare const HeadingVariant: {
+    readonly h1: "h1";
+    readonly h2: "h2";
+    readonly h3: "h3";
+    readonly h4: "h4";
+    readonly h5: "h5";
+    readonly body: "body";
+};
+type HeadingVariant = ValueOf<typeof HeadingVariant>;
+declare const HeadingComponent: {
+    readonly h1: "h1";
+    readonly h2: "h2";
+    readonly h3: "h3";
+    readonly h4: "h4";
+    readonly h5: "h5";
+    readonly span: "span";
+};
+type HeadingComponent = ValueOf<typeof HeadingComponent>;
+/**
+ * Component props.
+ */
+interface HeadingProps extends ComponentProps<'span'>, StylingProps {
+    /** The actual component rendered in the DOM. */
+    as: HeadingComponent;
+    /** Color variant. Either from color palette or hex or rgb strings. */
+    color?: NotificationsColorPalette | NeutralColorPalette | 'radar' | (string & {});
+    /** Font family. */
+    fontFamily?: FontFamily;
+    /** Font size. */
+    fontSize?: string;
+    /** Font weight. */
+    fontWeight?: string;
+    /** Line height. */
+    lineHeight?: string;
+    /** Whether the text will truncate with a text overflow ellipsis or wrap. */
+    noWrap?: boolean;
+    /** Theme. */
+    theme?: Theme;
+    /** The component the Heading will look like. */
+    variant?: HeadingVariant;
+}
+type StyledHeadingProps = Omit<HeadingProps, 'color' | 'noWrap'> & {
+    $color: HeadingProps['color'];
+    $fontFamily?: HeadingProps['fontFamily'];
+    $fontSize: HeadingProps['fontSize'];
+    $fontWeight: HeadingProps['fontWeight'];
+    $lineHeight: HeadingProps['lineHeight'];
+    $noWrap: HeadingProps['noWrap'];
+    $theme: HeadingProps['theme'];
+    $variant: HeadingProps['variant'];
+};
+
+export { HeadingVariant as H, StyledHeadingProps as S, HeadingComponent as a, HeadingProps as b };

package/_internal/types.d16.ts

@@ -0,0 +1,56 @@
+import { ComponentProps } from 'react';
+import { b as IconProps } from './types.d17.ts';
+import { B as ButtonsColorPalette, T as Theme } from './colors.js';
+import { V as ValueOf } from './helpers.js';
+import { h as StylingProps } from './styles.d2.ts';
+
+/**
+ * Component variant.
+ */
+declare const IconButtonVariant: {
+    readonly primary: "primary";
+    readonly secondary: "secondary";
+    readonly unstyled: "unstyled";
+};
+type IconButtonVariant = ValueOf<typeof IconButtonVariant>;
+/**
+ * Component color.
+ */
+type IconButtonColor = ButtonsColorPalette;
+/**
+ * Component props.
+ */
+interface IconButtonProps extends ComponentProps<'button'>, StylingProps {
+    /** Color variant. */
+    color?: IconButtonColor;
+    /**
+     * Can be a string or an array of strings containing `d` property of the `path` SVG element.<br />
+     * Can also be a ReactElement.
+     */
+    icon: IconProps['icon'];
+    /** Props to forward to the icon. */
+    iconProps?: Omit<IconProps, 'ref' | 'icon'>;
+    /** Whether the component is active or not. */
+    isActive?: boolean;
+    /** Whether the component is disabled or not. */
+    isDisabled?: boolean;
+    /** Whether the component is hovered or not. */
+    isHovered?: boolean;
+    /** Whether the component is in a loading state or not. */
+    isLoading?: boolean;
+    /** Theme. */
+    theme?: Theme;
+    /** Button variant. */
+    variant?: IconButtonVariant;
+}
+type StyledIconButtonProps = Omit<IconButtonProps, 'icon'> & {
+    $color: IconButtonProps['color'];
+    $isActive: IconButtonProps['isActive'];
+    $isDisabled: IconButtonProps['isDisabled'];
+    $isHovered: IconButtonProps['isHovered'];
+    $isLoading: IconButtonProps['isLoading'];
+    $theme: IconButtonProps['theme'];
+    $variant: IconButtonProps['variant'];
+};
+
+export { IconButtonVariant as I, StyledIconButtonProps as S, IconButtonColor as a, IconButtonProps as b };

package/_internal/types.d17.ts

@@ -0,0 +1,57 @@
+import { ComponentProps, ReactElement } from 'react';
+import { L as LayoutProps, S as SpacingProps, P as PositioningProps } from './styles.d2.ts';
+import { N as NotificationsColorPalette, b as ProductColorPalette, T as Theme } from './colors.js';
+import { V as ValueOf } from './helpers.js';
+
+/**
+ * Component size.
+ */
+declare const IconSize: {
+    readonly xsmall: "xsmall";
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+    readonly xlarge: "xlarge";
+    readonly xxlarge: "xxlarge";
+};
+type IconSize = ValueOf<typeof IconSize>;
+type IconDimensions = {
+    width?: number;
+    height?: number;
+    fontSize?: number;
+    lineHeight?: number;
+};
+/**
+ * Component props.
+ */
+interface IconProps extends ComponentProps<'span'>, LayoutProps, SpacingProps, PositioningProps {
+    /** Indicates whether the element is exposed to an accessibility API. */
+    'aria-hidden'?: boolean | 'false' | 'true';
+    /** A screen reader only label for the Icon. */
+    'aria-label'?: string;
+    /** Color variant. Either from color palette or hex or rgb strings. */
+    color?: NotificationsColorPalette | ProductColorPalette | (string & {});
+    /** Whether the icon has a badge attached to it. */
+    badge?: ReactElement;
+    /**
+     * Can be a string or an array of strings containing `d` property of the `path` SVG element.<br />
+     * Can also be a ReactElement.
+     */
+    icon: string | string[] | ReactElement;
+    /** Icon size. */
+    size?: IconSize | IconDimensions;
+    /** Additional properties to forward to the SVG tag. */
+    svgProps?: ComponentProps<'svg'>;
+    /** Theme. */
+    theme?: Theme;
+}
+type StyledIconProps = Omit<IconProps, 'color' | 'size' | 'icon' | 'svgProps'> & {
+    $color: IconProps['color'];
+    $width: IconDimensions['width'];
+    $height: IconDimensions['height'];
+    $fontSize: IconDimensions['fontSize'];
+    $lineHeight: IconDimensions['lineHeight'];
+    $theme: IconProps['theme'];
+};
+
+export { IconSize as I, StyledIconProps as S, IconDimensions as a, IconProps as b };

package/_internal/types.d18.ts

@@ -0,0 +1,40 @@
+import { ComponentProps, ElementType } from 'react';
+import { b as IconProps } from './types.d17.ts';
+import { N as NotificationsColorPalette, d as NeutralColorPalette, T as Theme } from './colors.js';
+import { h as StylingProps } from './styles.d2.ts';
+
+/**
+ * Component props.
+ */
+interface LinkProps extends ComponentProps<'a'>, StylingProps {
+    /** Prop to pass a custom react component instead of a simple HTML anchor (useful for Nextjs or React Router Link component). */
+    as?: 'a' | ElementType;
+    /** Color variant. Either from color palette or hex or rgb strings. */
+    color?: NotificationsColorPalette | NeutralColorPalette | 'radar' | (string & {});
+    /** Whether the component is disabled or not. */
+    isDisabled?: boolean;
+    /**
+     * Can be a string or an array of strings containing `d` property of the `path` SVG element.<br />
+     * Can also be a ReactElement.
+     */
+    leftIcon?: IconProps['icon'];
+    /** Props to add to the left icon. */
+    leftIconProps?: Omit<IconProps, 'icon' | 'ref'>;
+    /**
+     * Can be a string or an array of strings containing `d` property of the `path` SVG element.<br />
+     * Can also be a ReactElement.
+     */
+    rightIcon?: IconProps['icon'];
+    /** Props to add to the right icon. */
+    rightIconProps?: Omit<IconProps, 'icon' | 'ref'>;
+    /** Theme. */
+    theme?: Theme;
+}
+type StyledLinkProps = Omit<LinkProps, 'isDisabled'> & {
+    $isDisabled: LinkProps['isDisabled'];
+    $color: LinkProps['color'];
+    $theme: LinkProps['theme'];
+    $hasIcons: boolean;
+};
+
+export { LinkProps as L, StyledLinkProps as S };

package/_internal/types.d19.ts

@@ -0,0 +1,101 @@
+import { ComponentProps } from 'react';
+import { U as UseFocusWithinGroupProps, a as FocusWithinGroupOptions } from './types.d13.ts';
+import { V as ValueOf } from './helpers.js';
+import { C as ContainerProps } from './styles.d2.ts';
+
+/**
+ * Component variant.
+ */
+declare const ListboxSelectionMode: {
+    readonly single: "single";
+    readonly multiple: "multiple";
+};
+type ListboxSelectionMode = ValueOf<typeof ListboxSelectionMode>;
+/**
+ * Context props.
+ */
+type ListboxState = Readonly<{
+    isDisabled: boolean;
+    isReadOnly: boolean;
+    selectedValues: string[];
+    selectionMode: ListboxSelectionMode;
+    activedescendant?: [string, string];
+}>;
+declare enum ListboxActionType {
+    TOGGLE = "TOGGLE",
+    SET = "SET",
+    UPDATE_OPTIONS = "UPDATE_OPTIONS"
+}
+type ListboxAction = {
+    type: ListboxActionType.TOGGLE;
+    payload: {
+        value: string;
+        activedescendant?: [string, string];
+    };
+} | {
+    type: ListboxActionType.SET;
+    payload: {
+        values: string[];
+        activedescendant?: [string, string];
+    };
+} | {
+    type: ListboxActionType.UPDATE_OPTIONS;
+    payload: {
+        isDisabled: boolean;
+    };
+};
+type UseListboxItemProps = UseFocusWithinGroupProps & {
+    isSelected?: boolean;
+    isDisabled?: boolean;
+};
+type ListboxContextProps = {
+    state: ListboxState;
+    dispatch: React.Dispatch<ListboxAction>;
+};
+/**
+ * Component variant.
+ */
+declare const ListboxVariant: {
+    readonly standalone: "standalone";
+    readonly unstyled: "unstyled";
+};
+type ListboxVariant = ValueOf<typeof ListboxVariant>;
+/**
+ * Component props.
+ */
+interface ListboxProps extends Omit<ComponentProps<'div'>, 'onChange'>, ContainerProps, FocusWithinGroupOptions {
+    /**
+     * Default selected values.
+     * Used for uncontrolled version.
+     */
+    defaultValues?: string[];
+    /** Whether the component is disabled or not. */
+    isDisabled?: boolean;
+    /** Whether the component is invalid or not. */
+    isInvalid?: boolean;
+    /** Whether the component is read only or not. */
+    isReadOnly?: boolean;
+    /** Whether the component is required or not. */
+    isRequired?: boolean;
+    /** Label of the switch group. */
+    label?: string;
+    /** Method to handle component change. */
+    onChange?(values: string[]): void;
+    /** Whether the listbox allows multiple selections or single ones. */
+    selectionMode?: 'single' | 'multiple';
+    /**
+     * Currently selected values.
+     * Used for controlled version.
+     */
+    values?: string[];
+    /** Whether the Listbox is used as standalone or is unstyled within another component. */
+    variant?: ListboxVariant;
+}
+type StyledListboxProps = Omit<ListboxProps, 'onChange'> & {
+    $isDisabled: ListboxProps['isDisabled'];
+    $isInvalid: ListboxProps['isInvalid'];
+    $isReadOnly: ListboxProps['isReadOnly'];
+    $variant: ListboxProps['variant'];
+};
+
+export { ListboxSelectionMode as L, StyledListboxProps as S, UseListboxItemProps as U, ListboxState as a, ListboxActionType as b, ListboxAction as c, ListboxContextProps as d, ListboxVariant as e, ListboxProps as f };

package/_internal/types.d2.ts

@@ -0,0 +1,37 @@
+import { ComponentProps } from 'react';
+import { N as NotificationsColorPalette, c as PresentationColorPalette, T as Theme } from './colors.js';
+import { V as ValueOf } from './helpers.js';
+import { L as LayoutProps, S as SpacingProps, P as PositioningProps } from './styles.d2.ts';
+
+/**
+ * Component variant.
+ */
+declare const BadgeVariant: {
+    readonly dot: "dot";
+    readonly standard: "standard";
+};
+type BadgeVariant = ValueOf<typeof BadgeVariant>;
+/**
+ * Component props.
+ */
+interface BadgeProps extends ComponentProps<'div'>, LayoutProps, SpacingProps, PositioningProps {
+    /** Whether the badge should automatically break content. */
+    autoBreak?: boolean;
+    /** Color variant. The product colors are available but should only be used to display the Badge in the color of another product. To display a Badge with a color of the current product, use `default`. */
+    color?: NotificationsColorPalette | PresentationColorPalette;
+    /** Whether the Badge has its colors reversed or not. */
+    isReversed?: boolean;
+    /** Theme. */
+    theme?: Theme;
+    /** Badge variant. */
+    variant?: BadgeVariant;
+}
+type StyledBadgeProps = Omit<BadgeProps, 'color' | 'variant' | 'isReversed' | 'autoBreak'> & {
+    $autoBreak: BadgeProps['autoBreak'];
+    $color: BadgeProps['color'];
+    $isReversed: BadgeProps['isReversed'];
+    $variant: BadgeProps['variant'];
+    $theme: BadgeProps['theme'];
+};
+
+export { BadgeVariant as B, StyledBadgeProps as S, BadgeProps as a };