@redsift/design-system 11.6.0-muiv5-alpha.5 → 11.6.0-muiv5-alpha.7

package/package.json

@@ -33,7 +33,7 @@
     "version": "version-changelog ../../CHANGELOG.md && changelog-verify ../../CHANGELOG.md && git add ../../CHANGELOG.md"
   },
   "types": "index.d.ts",
-  "version": "11.6.0-muiv5-alpha.5",
+  "version": "11.6.0-muiv5-alpha.7",
   "dependencies": {
     "@react-spring/web": "^9.7.1",
     "classnames": "^2.3.1",
@@ -100,5 +100,5 @@
     "react-dom": ">=17",
     "styled-components": "^5.3.5"
   },
-  "gitHead": "7c58df723ed4fb187d6ff9f43b2cf502f630b3cb"
+  "gitHead": "9b206bde87877e58682621cf219c341f7f7ad8e7"
 }

package/_internal/SideNavigationMenuBar.js

@@ -1,9 +0,0 @@
-import { b as SideNavigationMenuBarProps } from './types23.js';
-import { C as Comp } from './helpers.js';
-
-/**
- * The SideNavigationMenuBar component.
- */
-declare const SideNavigationMenuBar: Comp<SideNavigationMenuBarProps, HTMLElement>;
-
-export { SideNavigationMenuBar as S };

package/_internal/helpers.js

@@ -1,23 +0,0 @@
-import { Ref, ReactElement } from 'react';
-
-/** Component Type. */
-type Comp<P, T = HTMLElement> = {
-    (props: P & {
-        ref?: Ref<T>;
-    }): ReactElement | null;
-    /** React component type. */
-    readonly $$typeof?: symbol;
-    /** Component name. */
-    displayName?: string;
-    /** Component base class name. */
-    className?: string;
-};
-/**
- * JS falsy values.
- * (excluding `NaN` as it can't be distinguished from `number`)
- */
-type Falsy = false | undefined | null | 0 | '';
-/** Get types of the values of a record. */
-type ValueOf<T extends Record<any, any>> = T[keyof T];
-
-export { Comp as C, Falsy as F, ValueOf as V };

package/_internal/types10.js

@@ -1,20 +0,0 @@
-import { ComponentProps } from 'react';
-import { b as HeadingProps } from './types15.js';
-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/types11.js

@@ -1,27 +0,0 @@
-import { ComponentProps, ReactElement } from 'react';
-import { a as BadgeProps } from './types2.js';
-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/types12.js

@@ -1,35 +0,0 @@
-import { ComponentProps, ReactElement } from 'react';
-import { a as PillProps } from './types20.js';
-import { S as ShieldVariant } from './types22.js';
-import { b as IconProps } from './types17.js';
-import { b as TextProps } from './types28.js';
-
-/**
- * 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/types13.js

@@ -1,143 +0,0 @@
-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/types14.js

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

package/_internal/types15.js

@@ -1,62 +0,0 @@
-import { ComponentProps } from 'react';
-import { F as FontFamily } from './fonts.js';
-import { V as ValueOf } from './helpers.js';
-import { h as StylingProps } from './styles2.js';
-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/types16.js

@@ -1,56 +0,0 @@
-import { ComponentProps } from 'react';
-import { b as IconProps } from './types17.js';
-import { B as ButtonsColorPalette, T as Theme } from './colors.js';
-import { V as ValueOf } from './helpers.js';
-import { h as StylingProps } from './styles2.js';
-
-/**
- * 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/types17.js

@@ -1,57 +0,0 @@
-import { ComponentProps, ReactElement } from 'react';
-import { L as LayoutProps, S as SpacingProps, P as PositioningProps } from './styles2.js';
-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/types18.js

@@ -1,40 +0,0 @@
-import { ComponentProps, ElementType } from 'react';
-import { b as IconProps } from './types17.js';
-import { N as NotificationsColorPalette, d as NeutralColorPalette, T as Theme } from './colors.js';
-import { h as StylingProps } from './styles2.js';
-
-/**
- * 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/types19.js

@@ -1,101 +0,0 @@
-import { ComponentProps } from 'react';
-import { U as UseFocusWithinGroupProps, a as FocusWithinGroupOptions } from './types13.js';
-import { V as ValueOf } from './helpers.js';
-import { C as ContainerProps } from './styles2.js';
-
-/**
- * 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/types20.js

@@ -1,47 +0,0 @@
-import { ComponentProps } from 'react';
-import { V as ValueOf } from './helpers.js';
-import { h as StylingProps } from './styles2.js';
-import { c as PresentationColorPalette, d as NeutralColorPalette, T as Theme } from './colors.js';
-
-/**
- * Component size.
- */
-declare const PillSize: {
-    readonly small: "small";
-    readonly large: "large";
-    readonly xlarge: "xlarge";
-};
-type PillSize = ValueOf<typeof PillSize>;
-/**
- * Component props.
- */
-interface PillProps extends ComponentProps<'div'>, StylingProps {
-    /** Whether the badge should automatically break content. */
-    autoBreak?: boolean;
-    /** Color to use for border. */
-    borderColor?: string;
-    /** Color variant. The product colors are available but should only be used to display the Pill in the color of another product. To display a Pill with a color of the current product, use `default`. */
-    color?: PresentationColorPalette | NeutralColorPalette | 'error' | 'warning' | 'success' | 'error-dark' | 'warning-dark' | 'success-dark' | (string & {});
-    /** Color to use when disabled. */
-    disabledColor?: string;
-    /** Color to use on hover. */
-    hoverColor?: string;
-    /** Whether the Pill is disabled or not. */
-    isDisabled?: boolean;
-    /** Size of the Pill. */
-    size?: PillSize;
-    /** Theme. */
-    theme?: Theme;
-}
-type StyledPillProps = Omit<PillProps, 'color' | 'autoBreak'> & {
-    $autoBreak: PillProps['autoBreak'];
-    $borderColor: PillProps['borderColor'];
-    $color: PillProps['color'];
-    $disabledColor: PillProps['disabledColor'];
-    $hoverColor: PillProps['hoverColor'];
-    $isDisabled: PillProps['isDisabled'];
-    $size: PillProps['size'];
-    $theme: PillProps['theme'];
-};
-
-export { PillSize as P, StyledPillProps as S, PillProps as a };