/// import { AlignContentProps } from 'styled-system'; import { AlignItemsProps } from 'styled-system'; import { BackgroundProps } from 'styled-system'; import { BorderColorProps } from 'styled-system'; import { BorderProps } from 'styled-system'; import { BorderRadiusProps } from 'styled-system'; import { BottomProps } from 'styled-system'; import { BoxShadowProps } from 'styled-system'; import { ColorProps } from 'styled-system'; import { ComponentPropsWithoutRef } from 'react'; import { ComponentPropsWithRef } from 'react'; import { DisplayProps } from 'styled-system'; import { FlexboxProps } from 'styled-system'; import { FlexDirectionProps } from 'styled-system'; import { FlexWrapProps } from 'styled-system'; import { FontSizeProps } from 'styled-system'; import { FontStyleProps } from 'styled-system'; import { FontWeightProps } from 'styled-system'; import { ForwardRefExoticComponent } from 'react'; import { GridProps as GridProps_2 } from 'styled-system'; import { HeightProps } from 'styled-system'; import { HTMLMotionProps } from 'motion/react'; import { JustifyContentProps } from 'styled-system'; import { LayoutProps as LayoutProps_2 } from 'styled-system'; import { LeftProps } from 'styled-system'; import { LineHeightProps } from 'styled-system'; import { MarginProps } from 'styled-system'; import { MaxHeightProps } from 'styled-system'; import { MaxWidthProps } from 'styled-system'; import { MinHeightProps } from 'styled-system'; import { MinWidthProps } from 'styled-system'; import { MouseEventHandler } from 'react'; import { OverflowProps } from 'styled-system'; import { PaddingProps } from 'styled-system'; import { PositionProps } from 'styled-system'; import { default as React_2 } from 'react'; import { RefAttributes } from 'react'; import { RefObject } from 'react'; import { ResponsiveValue } from 'styled-system'; import { RightProps } from 'styled-system'; import { ShadowProps } from 'styled-system'; import { SizeProps } from 'styled-system'; import { SpaceProps } from 'styled-system'; import { styleFn } from 'styled-system'; import { TextAlignProps } from 'styled-system'; import { TextStyleProps } from 'styled-system'; import { Theme } from 'styled-system'; import { TopProps } from 'styled-system'; import { TypographyProps } from 'styled-system'; import { WidthProps } from 'styled-system'; import { ZIndexProps } from 'styled-system'; /** * @public */ export declare const Absolute: React.FC; /** * @public */ export declare type AbsoluteProps = BoxProps & TopProps & RightProps & BottomProps & LeftProps & ZIndexProps; /** * @public */ export declare function Accordion({ items, itemsState, isExternallyControlled, onToggle, type, variation, p, headerDividerColor, useTextToggle, ...props }: AccordionProps): React_2.ReactElement; /** * @public */ export declare type AccordionItemProps = { content: React_2.ReactNode; headerActions?: React_2.ReactNode; headerLabel?: React_2.ReactNode; headerBg?: string; value: string; contentBg?: string; hoverBg?: string; }; /** * @public */ export declare type AccordionProps = SpaceProps & { items: AccordionItemProps[]; itemsState?: string | string[]; onToggle?: (value: string | string[]) => void; type?: string; variation?: string; isExternallyControlled?: boolean; headerDividerColor?: string; useTextToggle?: boolean; }; /** * @public */ export declare const actionBorderRadii: { 'action-sm': string; 'action-md': string; 'action-lg': string; 'action-xl': string; }; /** * @public */ export declare const ALLOWED_GAP_VALUES: readonly ["sm", "md", "lg", "xl"]; /** * @public */ export declare const ALLOWED_LAYOUT_VALUES: readonly ["50-50", "33-33-33", "33-66", "66-33", "25-25-25-25", "60-40", "40-60", "100"]; /** * @public */ export declare const Animate: (props: AnimateProps) => React_2.JSX.Element; /** * @public */ export declare type AnimateProps = { children: React_2.ReactNode; variant: MotionVariant; transition?: TransitionVariant; override?: HTMLMotionProps<'div'>; }; /** * Applies the selected size styles to a styled component. * if size is a string, it will pass that string into the sizes object to return the correct css * if size is an array, it will determine the current screen size and then utilize the getBreakpointSize * helper to determine the css to return from the sizes object * * @param sizes - An object of size styles * * @public */ export declare const applySizes: (sizes?: any, defaultSize?: string, mediaQueriesOptions?: any) => ({ size }: { size: any; }) => any; /** * Applies the selected variation style to a styled component. * Combines the variation style with any custom styling from * theme.componentStyles[component][variation] * * Once updated to styled-components v4, componentName is no * longer needed as it is part of forwardedClass.displayName * * @param componentName - The name of the component * @param variations - An object of variation styles * * @public */ export declare const applyVariations: (componentName: any, variations?: any) => (props: any) => any; export declare type ArrowPosition = 'top' | 'bottom' | 'side' | 'hide'; /** * @public */ export declare function Avatar({ altText, className, color, colorScheme, initials, subtitle, src, size, title, }: AvatarProps): JSX.Element; export declare namespace Avatar { var displayName: string; } /** * @public */ export declare type AvatarProps = { className?: string; title?: string; subtitle?: string; src?: string; altText?: string; initials?: string; size?: string | number | Array; color?: string; colorScheme?: string; }; /** * @public */ export declare const BackgroundImage: React_2.FC; /** * @public */ export declare type BackgroundImageProps = WidthProps & HeightProps & BorderRadiusProps & Omit, 'width' | 'height'> & { variation?: 'parallax' | 'static'; image?: string; borderRadius?: string; rounded?: string; backgroundPosition?: (typeof backgroundPositionList)[number]; }; /** * @public */ export declare const backgroundPositionList: string[]; /** * @public */ export declare const Badge: React_2.FC; /** * @public */ export declare type BadgeProps = SpaceProps & React_2.HtmlHTMLAttributes & { size?: 'captionSmall' | 'captionMedium' | 'small' | 'medium'; color?: string; bg?: string; borderRadius?: string; colorScheme?: ColorSchemeName; textTransform?: string; }; /** * @public */ export declare function Banner({ bg, color, children, header, icon, onClose, showIcon, text, textAlign, ...props }: BannerProps): React_2.ReactElement; /** * @public */ export declare type BannerProps = BoxProps & { bg?: string; color?: string; children?: React_2.ReactNode; header?: string | React_2.ReactNode; icon?: React_2.ReactElement; onClose?: () => void; showIcon?: boolean; text?: string | React_2.ReactNode; textAlign?: string; }; /** * @public */ export declare const Base: any; /** * @public */ export declare const baseBorderRadii: { none: string; xsm: string; sm: string; md: string; lg: string; xl: string; '2xl': string; '3xl': string; full: string; }; export declare const BlockLink: any; /** * @public */ export declare const bold = 700; /** * @public */ export declare const borderRadii: { 'action-sm': string; 'action-md': string; 'action-lg': string; 'action-xl': string; none: string; xsm: string; sm: string; md: string; lg: string; xl: string; '2xl': string; '3xl': string; full: string; }; /** * @public */ export declare type BorderRadius = keyof typeof borderRadii; /** * @public */ export declare function borderRadiusAttrs({ borderRadius, rounded, theme }: { borderRadius: any; rounded: any; theme: any; }): { borderRadius?: undefined; } | { borderRadius: any; }; /** * @public */ export declare const borderRadiusValues: string[]; /** * @public */ export declare const borders: (props: any) => { 'border-color': string; ':focus': { outline: number; 'border-color': string; 'box-shadow': string; }; }; /** * @public */ export declare const Box: React_2.FC; /** * @public */ export declare type BoxProps = Omit & BoxShadowProps & DisplayProps & HeightProps & MaxHeightProps & MaxWidthProps & MinHeightProps & MinWidthProps & OverflowProps & SizeProps & SpaceProps & TextAlignProps & WidthProps & ComponentPropsWithRef<'div'> & { children?: React_2.ReactNode; as?: unknown; role?: string; bg?: string; color?: string; className?: string; borderRadius?: ResponsiveValue | BorderRadiusProps['borderRadius']; boxShadowSize?: ResponsiveValue; boxShadowColor?: 'primary' | 'secondary' | 'text' | 'highlight' | 'success' | 'error' | 'warning' | 'alert' | 'caution' | 'notify' | 'pricePrimary' | 'priceSecondary' | 'promoPrimary' | 'promoSecondary' | 'border' | 'background'; colorScheme?: ColorSchemeName; rounded?: 'round' | 'top' | 'right' | 'bottom' | 'left' | 'topLeft' | 'topRight' | 'bottomRight' | 'bottomLeft'; }; /** * @public */ export declare function boxShadowAttrs(props: any): { boxShadow?: undefined; } | { boxShadow: any; }; /** * @public */ export declare type BoxShadowSize = keyof typeof shadows; /** * @public */ export declare const boxShadowSizeValues: string[]; /** * @public */ export declare const BreadcrumbLink: React_2.FC; /** * @public */ export declare type BreadcrumbLinkProps = React_2.RefAttributes & { className?: string; isLastChild?: boolean; href?: string; icon?: React_2.ReactNode; label?: string; onClick?: LinkProps['onClick']; }; /** * @public */ export declare const Breadcrumbs: React_2.FC & { Link: React_2.FC; }; /** * @public */ export declare type BreadcrumbsProps = { className?: string; children?: React_2.ReactNode; }; /** * @public */ export declare const breakpoints: string[]; /** * @public */ export declare const Button: React_2.ForwardRefExoticComponent & React_2.RefAttributes>; /** * @public */ export declare const ButtonChip: React_2.FC; /** * @public */ export declare type ButtonChipProps = Omit & { expanded?: boolean; id?: string; showActionIcon?: boolean; onClick?: ButtonProps['onClick']; variation?: ButtonChipVariation; }; /** * @public */ export declare type ButtonChipVariation = 'outline' | 'shadow'; /** * @public */ export declare type ButtonProps = WidthProps & HeightProps & SpaceProps & BoxShadowProps & ComponentPropsWithRef<'button'> & { color?: string; variation?: ButtonVariations; size?: ButtonSizes | ButtonSizes[]; borderRadius?: BorderRadius; boxShadowSize?: ResponsiveValue; autoFocus?: boolean; IconLeft?: React_2.Component | React_2.FC; IconRight?: React_2.Component | React_2.FC; flexProps?: FlexProps; }; /** * @public */ export declare type ButtonSizes = 'small' | 'medium' | 'large' | 'extraLarge'; /** * @public */ export declare type ButtonVariations = 'fill' | 'link' | 'outline' | 'plain' | 'subtle' | 'white' | 'lightFill' | 'input'; /** * @public */ export declare const Card: React_2.FC; /** * @public */ export declare type CardProps = BoxProps & BorderProps & { borderColor?: string; }; /** * @public */ export declare function ChatActionContainer({ chatActions }: ChatActionContainerProps): React_2.JSX.Element; /** * @public */ export declare type ChatActionContainerProps = { chatActions: IChatAction[]; }; /** * @public */ export declare function ChatHeader({ children, onClose, onMinimize }: ChatHeaderProps): React_2.JSX.Element; /** * @public */ export declare type ChatHeaderProps = { children: React_2.ReactNode; onClose: () => void; onMinimize?: () => void; }; /** * @public */ export declare function ChatMessage({ footer, header, Icon, message, variation, ...props }: ChatMessageProps): React_2.JSX.Element; /** * @public */ export declare function ChatMessageContainer({ messageMaxWidth, messages }: ChatMessageContainerProps): React_2.JSX.Element; /** * @public */ export declare interface ChatMessageContainerProps { messageMaxWidth: string; messages: ChatMessageIMessage[]; } /** * @public */ export declare interface ChatMessageIMessage { dateTime?: string; message: string; variation: ChatMessageVariation; } /** * @public */ export declare type ChatMessageProps = FlexProps & { footer?: React_2.ReactNode; header?: React_2.ReactNode; Icon?: React_2.FC<{ color?: string; size?: string; }>; message: React_2.ReactNode; variation: (typeof ChatMessageVariations)[number]; }; /** * @public */ export declare function ChatMessageSeparator({ message }: ChatMessageSeparatorProps): React_2.JSX.Element; /** * @public */ export declare type ChatMessageSeparatorProps = { message?: string; }; /** * @public */ export declare type ChatMessageVariation = 'initial' | 'incoming' | 'outgoing'; /** * @public */ export declare const ChatMessageVariations: string[]; /** * @public */ export declare function ChatTrigger(props: FloatingActionButtonProps): JSX.Element; /** * @public */ export declare type ChatTriggerProps = FloatingActionButtonProps; /** * @public */ export declare const Checkbox: React_2.ForwardRefExoticComponent & React_2.RefAttributes>; /** * @public */ export declare type CheckboxProps = ComponentPropsWithRef<'input'> & { id?: string; indeterminate?: boolean; size?: number; color?: string; checked?: boolean; defaultChecked?: boolean; disabled?: boolean; unselectedColor?: string; }; /** * @public */ export declare function ChipContent({ disabled, selected, children, label, Icon, IconTitle, facet, action, image, size, bridgeLabel, BridgeIcon, variation, topLabel, borderRadius, justifyContent, color, py, m, ...props }: ChipContentProps): React_2.ReactElement; export declare namespace ChipContent { var displayName: string; } /** * @public */ export declare type ChipContentProps = BoxProps & { children?: React_2.ReactNode; disabled?: boolean; selected?: boolean; label?: string; Icon?: IconComponent; IconTitle?: string; facet?: string; action?: { Icon?: IconComponent; title?: React_2.ReactNode; }; image?: React_2.ReactNode; size?: ResponsiveValue<'sm' | 'md'>; bridgeLabel?: string; BridgeIcon?: IconComponent; variation?: ChipContentVariation; topLabel?: string; borderRadius?: string; justifyContent?: string; }; /** * @public */ export declare type ChipContentVariation = 'outline' | 'shadow'; /** * @public */ export declare function ChoiceChip({ id, name, color, disabled, selected, children, onClick, label, variation, width, value, ...props }: ChoiceChipProps): React_2.ReactElement; export declare namespace ChoiceChip { var displayName: string; } /** * @public */ export declare type ChoiceChipProps = SpaceProps & FontSizeProps & React_2.HTMLAttributes & { Icon?: IconComponent; size?: ResponsiveValue<'sm' | 'md'>; name?: string; disabled?: boolean; selected?: boolean; label?: string; value?: string | number; variation?: ChoiceChipVariations; topLabel?: string; borderRadius?: string; width?: string; justifyContent?: string; }; /** * @public */ export declare type ChoiceChipVariations = 'outline' | 'shadow'; /** * @public */ export declare const CloseButton: ({ animate, bgColor, boxShadowSize, className, color, onClick, size, title, variant, as, ...props }: MotionButtonProps) => React_2.JSX.Element; /** * @public */ export declare type CloseButtonProps = IStyledSystemProps & { animate?: boolean; bgColor?: PaletteColor; boxShadowSize?: BoxShadowSize; className?: string; color?: PaletteColor; onClick?: MouseEventHandler; size?: CloseButtonSize; title?: string; variant?: CloseButtonVariant; as?: unknown; }; /** @public */ export declare type CloseButtonSize = (typeof closeButtonSizes)[number] | number; /** @public */ export declare const closeButtonSizes: readonly ["sm", "md", "lg"]; /** @public */ export declare type CloseButtonVariant = (typeof closeButtonVariants)[number]; /** @public */ export declare const closeButtonVariants: readonly ["filled", "white"]; /** * @public * Extended color function from styled-system. First checks * for a palette color before falling back to styled-system */ export declare const color: (props: any) => any; /** * @public */ export declare type ColorName = keyof typeof colors; /** * @public */ export declare type ColorProp = ColorName | PaletteFamilyName | PaletteColor; /** * @public */ export declare const colors: { black: string; white: string; lightBlue: string; tintBlue: string; blue: string; toneBlue: string; darkBlue: string; shadeBlue: string; lightGreen: string; tintGreen: string; green: string; toneGreen: string; darkGreen: string; shadeGreen: string; lightRed: string; tintRed: string; red: string; toneRed: string; darkRed: string; shadeRed: string; lightOrange: string; tintOrange: string; orange: string; toneOrange: string; darkOrange: string; shadeOrange: string; lightYellow: string; tintYellow: string; yellow: string; toneYellow: string; darkYellow: string; shadeYellow: string; lightPurple: string; tintPurple: string; purple: string; tonePurple: string; darkPurple: string; shadePurple: string; lightPink: string; tintPink: string; pink: string; tonePink: string; darkPink: string; shadePink: string; lightGray: string; gray: string; darkGray: string; borderGray: string; buttonGray: string; lightestText: string; lightText: string; tintText: string; text: string; darkText: string; headingText: string; lightHighlight: string; tintHighlight: string; highlight: string; toneHighlight: string; darkHighlight: string; shadeHighlight: string; lightestBackground: string; lightBackground: string; tintBackground: string; background: string; toneBackground: string; darkBackground: string; shadeBackground: string; darkestBackground: string; lightBorder: string; tintBorder: string; border: string; toneBorder: string; darkBorder: string; shadeBorder: string; }; /** * @public */ export declare type ColorScheme = { foreground: string; background: string; backgroundName: PaletteColor; }; /** * @public */ export declare const colorScheme: ({ colorScheme, ...props }: { [x: string]: any; colorScheme: any; }) => string; /** * @public * Use this for components where color should not be set based on the colorScheme's foreground. * If a color prop is provided, that color will be used for the foreground color. Otherwise, * the foreground color will be set automatically to text.lightest or text.base depending on the * colorScheme's background color. */ export declare const colorSchemeCustomForeground: ({ colorScheme, color, iconUsesColorScheme, ...props }: { [x: string]: any; colorScheme: any; color: any; iconUsesColorScheme: any; }) => string; /** * @public */ export declare type ColorSchemeName = (typeof colorSchemeNames)[number]; /** * @public */ export declare const colorSchemeNames: readonly ["primary", "primaryLight", "primaryLightest", "primaryDark", "primaryShade", "primaryDarkOnLight", "secondary", "secondaryLight", "secondaryLightest", "secondaryDark", "secondaryDarkOnLight", "neutral", "neutralLight", "neutralLightest", "neutralDark", "neutralDarkOnLight", "neutralDarkOnLightest", "success", "successLight", "successLightest", "successDark", "successDarkOnLight", "warning", "warningLight", "warningLightest", "cautionLight", "highlightLight", "promo", "promoLight", "promoLightest", "promoDark", "promoDarkOnLight", "alert", "alertLight", "alertLightest", "alertDarkOnLight", "heading", "headingBase", "headingLight", "headingOnPrimaryLight"]; /** * @public */ export declare type ColorSchemes = Record; /** * @public */ export declare type ColorStyle = { color: string; backgroundColor: string; }; /** * @public */ export declare type ColorStyleName = (typeof colorStyleNames)[number]; /** * @public */ export declare const colorStyleNames: readonly ["whiteOnText", "whiteOnGray", "textOnLightGray", "whiteOnBlue", "blueOnLightBlue", "whiteOnGreen", "greenOnLightGreen", "whiteOnRed", "redOnLightRed", "textOnOrange", "whiteOnPurple", "purpleOnLightPurple", "textOnWhite", "grayOnWhite", "blueOnWhite", "greenOnWhite", "redOnWhite", "purpleOnWhite", "whiteOnDarkOrange", "info", "success", "warning", "danger"]; /** * @public */ export declare type ColorStyles = Record; /** * @public */ export declare const colorStyles: any; /** * @public */ export declare const ComposedStyleFns: styleFn; /** * @public */ export declare const Container: React_2.FC; /** * @public */ export declare type ContainerProps = BoxProps & { children?: React_2.ReactNode; maxWidth?: number; size?: ContainerSize; }; /** * @public */ export declare type ContainerSize = 'sm' | 'md' | 'lg' | 'xl'; /** * Create colorStyles based on the passed in theme * * @param theme - The passed in theme * * @returns - The generated colorStyles * * @public */ export declare const createColorStyles: any; /** * Create media queries array based on the passed in breakpoints * * @param breakpoints - The passed in breakpoints array * * @returns The generated media queries array * * @public */ export declare const createMediaQueries: (breakpoints: any) => any; /** * Create the palette based on passed in theme * * @param palette - The passed in palette * @param theme - The passed in theme * * @returns The generated palette * * @public */ export declare function createPalette({ palette, ...theme }: { [x: string]: any; palette?: {}; }): PaletteFamilies; /** * Create textStyles based on the passed in theme * * @param theme - The passed in theme * * @returns The generated textStyles * * @public */ export declare const createTextStyles: any; /** * Create the theme * @param theme - The theme to merge against the default * @param customBreakpoints - Custom breakpoints for the theme * @param existingTheme - Existing theme passed from a parent provider (Undefined if it's most outer provider) * * @returns The generated theme * * @public */ export declare const createTheme: (theme?: {}, customBreakpoints?: any, existingTheme?: any) => DesignSystemTheme; /** * Decomposes a color into an array of values * * @example decomposeColor('#0068EF') =\> [0, 122, 255] * * @param color - The color to decompose * * @returns An array of the color values * * @public */ export declare const decomposeColor: (color: any) => any; /** * @public */ export declare const deprecatedColorValue: () => (props: any, propName: any, componentName: any) => Error; /** * @public */ export declare type DesignSystemTheme = { space: string[]; colors: Record; componentStyles: Record>>>; mediaQueries: string[]; breakpoints: string[]; palette: PaletteFamilies; colorStyles: ColorStyles; textStyles: TextStyle[]; contrastRatio: number; colorSchemes: ColorSchemes; zIndices: ZIndices; }; /** * @public */ export declare const Dialog: { ({ ariaDescription, ariaTitle, borderRadius, children, defaultOpen, footerContent, fullWidth, headerColorScheme, headerContent, headerContentProps, headerIcon, headerShowCloseButton, hugColor, innerContentOverflow, open, scrimColor, scrimDismiss, sheet, showCloseButton, showScrollShadow, size, triggerNode, zIndex, overflowX, overflowY, onOpenChange, shouldDisableTabIndex, }: DialogProps): React_2.JSX.Element; displayName: string; }; /** * @public */ export declare type DialogProps = Omit & { ariaDescription: string; ariaTitle: string; borderRadius?: BorderRadius; children?: React_2.ReactNode; defaultOpen?: boolean; footerContent?: React_2.ReactNode; fullWidth?: boolean; headerColorScheme?: keyof ColorSchemes; headerContent?: string | React_2.ReactNode; headerContentProps?: GridProps; headerIcon?: React_2.ReactNode; headerShowCloseButton?: boolean; hugColor?: PaletteColor; innerContentOverflow?: 'auto' | 'clip' | 'hidden' | 'scroll' | 'visible'; open?: boolean; scrimColor?: 'dark' | 'medium' | 'light' | (string & {}); scrimDismiss?: boolean; sheet?: boolean; showCloseButton?: boolean; size?: DialogSize; triggerNode?: React_2.ReactNode; zIndex?: ZIndex; onOpenChange?: (open: boolean) => void; showScrollShadow?: boolean; shouldDisableTabIndex?: boolean; }; /** @public */ export declare type DialogSize = (typeof dialogSizes)[number]; /** @public */ export declare const dialogSizes: readonly ["sm", "md", "lg", "xl", "full"]; /** * @public */ export declare const Divider: React_2.FC; /** * @public */ export declare type DividerProps = SpaceProps & WidthProps & BorderColorProps & { color?: ColorName | PaletteFamilyName | PaletteColor; }; /** * @public */ export declare const DocTable: ({ data, columns, ...rest }: DocTableProps) => React_2.JSX.Element; /** * @public */ export declare type DocTableProps = { data: T[]; columns: { field: string; heading: string; noWrap?: boolean; }[]; }; /** * @public */ export declare const DoDont: ({ doExample, dontExample, doText, dontText }: DoDontProps) => React_2.JSX.Element; /** * @public */ export declare type DoDontProps = { doExample: React_2.ReactNode; doText?: string; dontExample: React_2.ReactNode; dontText?: string; }; /** * @public */ export declare function DotLoader({ color, size, speed, ...props }: DotLoaderProps): React_2.JSX.Element; /** * @public */ export declare type DotLoaderProps = { color?: ColorName | PaletteFamilyName | PaletteColor; size?: DotLoaderSizes; speed?: DotLoaderSpeeds; }; /** * @public */ export declare type DotLoaderSizes = keyof typeof dotLoaderSizes | (keyof typeof dotLoaderSizes)[]; /** * @public */ export declare const dotLoaderSizes: { small: any; medium: any; large: any; }; /** * @public */ export declare type DotLoaderSpeeds = keyof typeof dotLoaderSpeeds; /** * @public */ export declare const dotLoaderSpeeds: { slow: number; medium: number; fast: number; }; export declare const Drawer: React_2.FC; export declare type DrawerProps = SpaceProps & LayoutProps_2 & { children?: React_2.ReactNode; heading?: React_2.ReactNode; isCollapsed?: boolean; isFloating?: boolean; isMobile?: boolean; isOpen?: boolean; isDraggable?: boolean; showDivider?: boolean; onClose?: () => void; onCollapse?: () => void; placement?: PlacementOptions; position?: string; zIndex?: number; snapHeights?: [string, string, string]; snapDimensions?: { width?: string; height?: string; }; onSnapPositionChange?: (params: SnapPositionChangeParams) => void; disableEnterAnimation?: boolean; }; /** * @public */ export declare const duration: { fast: string; normal: string; slow: string; slowest: string; 'duration-100': string; 'duration-200': string; 'duration-250': string; 'duration-300': string; 'duration-450': string; }; /** * @public */ declare function FilterChip({ id, name, color, disabled, selected, children, onClick, label, showActionIcon, actionTitle, value, variation, ...props }: FilterChipProps): React_2.ReactElement; declare namespace FilterChip { var displayName: string; } export { FilterChip as Chip } export { FilterChip } /** * @public */ export declare type FilterChipProps = SpaceProps & FontSizeProps & { id?: string; name?: string; disabled?: boolean; selected?: boolean; onClick?: (unknown: any) => void; label?: string; showActionIcon?: boolean; actionTitle?: string; value?: string | number; color?: string; children?: React_2.ReactNode; variation?: FilterChipVariation; }; /** * @public */ export declare type FilterChipVariation = 'outline' | 'shadow'; /** * @public */ export declare const Flag: React_2.FC; /** * @public */ export declare type FlagProps = SpaceProps & WidthProps & { children?: React_2.ReactNode; color?: ColorProp; bg?: ColorProp; }; /** * @public */ export declare const Flex: React_2.FC; /** * @public */ export declare type FlexProps = BoxProps & SpaceProps & WidthProps & AlignItemsProps & JustifyContentProps & AlignContentProps & FlexWrapProps & FlexDirectionProps; /** * @public */ export declare function FloatingActionButton({ hasNotification, icon, tooltip, onClick, isAbsolutePosition, toolAlignment, ...props }: FloatingActionButtonProps): JSX.Element; /** * @public */ export declare type FloatingActionButtonProps = AbsoluteProps & { hasNotification?: boolean; icon: React_2.Component; tooltip?: string; toolAlignment?: 'center' | 'right' | 'left'; isAbsolutePosition?: boolean; }; /** * @public */ export declare const font = "'Montserrat','Helvetica Neue',Helvetica,Arial,sans-serif"; /** * @public */ export declare const fontSizes: number[]; /** * styled-system's `fontWeight` function can hook into the `fontWeights` object * * @public */ export declare const fontWeights: { medium: number; bold: number; regular: number; }; /** * @public */ declare function FormField({ children, disabled, readOnly, ...props }: FormFieldProps): React_2.JSX.Element; declare namespace FormField { var displayName: string; } export { FormField } export { FormField as InputField } /** * @public */ export declare interface FormFieldProps extends BoxProps { disabled?: boolean; readOnly?: boolean; } /** * @public */ export declare function GenericBanner({ alignItems, borderRadius, buttonClick, buttonSize, buttonVariation, ctaText, fontSize, heading, iconLeft, iconRight, imageLeft, justifyContent, linkVariation, linkColor, text, URLProps, ...props }: GenericBannerProps): React_2.JSX.Element; /** * @public */ export declare type GenericBannerNode = React_2.ReactElement>; /** * @public */ export declare type GenericBannerProps = AlignItemsProps & JustifyContentProps & FontSizeProps & PaddingProps & MarginProps & { buttonClick?: () => unknown; buttonSize?: 'small' | 'medium' | 'large'; buttonVariation?: 'fill' | 'outline' | 'link'; ctaText?: GenericBannerNode; heading?: GenericBannerNode; iconLeft?: GenericBannerNode; iconRight?: GenericBannerNode; imageLeft?: GenericBannerNode; linkVariation?: 'fill' | 'outline' | 'link'; borderRadius?: string; linkColor?: string; text?: GenericBannerNode; URLProps?: { href: string; target?: string; }; color?: string; colorScheme?: ColorSchemeName; }; /** * * @param array - An array of sizes, ex: ['small', null, null, null, null, 'medium'] * @param length - A number: this will be used to slice the above array * * @returns This function's purpose is to determine which item in the provided array to return at each breakpoint * 1) takes in an array, splits the array at the given length and creates a new smaller array * 2) that new smaller array is then passed into a reduceRight function to determine which value to be returned * reduceRight is used so that the reduce function reads from right to left * * @public */ export declare const getBreakpointSize: (array: any, length: any) => any; /** * @public */ export declare const getByPalette: (props: any) => any; /** * Gets the contrast ratio between two colors * * @example getContrastRatio('#0068EF', '#fff') =\> 4.016975780478911 * @see https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests * * @public */ export declare const getContrastRatio: (colorA: any, colorB: any) => number; /** * Gets css styles that make links more accessible depending on a given background color * * @param name - The name of the background color * @param lightColor - Optional light color to use if it meets the contrast ratio, default is text.lightest * @param darkColor - Optional dark color to use if it meets the contrast ratio, default is text.base * @param isBold - Determines the font weight if an alternative color for the link is picked * * @public */ export declare const getLinkStylesOn: (name: any, lightColor?: string, darkColor?: string, isBold?: boolean) => (props: any) => any; /** * Gets the luminance of a color * * @example getLuminance('#0068EF') =\> 0.211 * @see https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests * * @param color - The color to get the luminance of * * @returns The luminance of the color * * @public */ export declare const getLuminance: (color: any) => number; /** * Gets the color of a palette shade, using props.color as * the palette color. If palette shade does not exist, falls * back to theme.colors * * @example getPaletteColor('dark')(props) =\> will return the dark * shade of theme.palette[props.color].dark * @example getPaletteColor('primary.base')(props) =\> theme.palette.primary.base * @example getPaletteColor('primary', 'base')(props) =\> theme.palette.primary.base * * @public */ export declare function getPaletteColor(...args: [ PaletteColor | PaletteFamilyName | PaletteFamilyVariation | string, (PaletteColor | PaletteFamilyVariation)? ]): (props: any) => string; /** * Gets the text color that belongs on a given background color * * @param name - The name of the background color * @public */ export declare const getTextColorOn: (name: any, lightColor?: any, darkColor?: any) => (props: any) => any; /** * @public */ export declare const getValidPaletteColor: (color: any) => (props: any) => string; export declare type GradientRingProps = { strokeWidth?: string; color?: PaletteFamilyName; theme?: Theme; }; /** * @public */ export declare const Grid: (props: GridProps) => React_2.JSX.Element; /** * @public */ export declare interface GridProps extends IStyledSystemProps { children?: React_2.ReactNode; gap?: GridProps_2['gridGap']; rowGap?: GridProps_2['gridRowGap']; columnGap?: GridProps_2['gridColumnGap']; column?: GridProps_2['gridColumn']; row?: GridProps_2['gridRow']; area?: GridProps_2['gridArea']; autoFlow?: GridProps_2['gridAutoFlow']; autoRows?: GridProps_2['gridAutoRows']; autoColumns?: GridProps_2['gridAutoColumns']; templateRows?: GridProps_2['gridTemplateRows']; templateColumns?: GridProps_2['gridTemplateColumns']; templateAreas?: GridProps_2['gridTemplateAreas']; placeItems?: FlexboxProps['alignItems']; colorScheme?: ColorSchemeName; } /** * Checks if the given color prop is a valid palette color * @public */ export declare const hasPaletteColor: (props: any) => boolean; /** * @public */ export declare const hasPaletteColorShade: (props: any, color?: any) => boolean; export declare const Heading: { (props: any): React_2.JSX.Element; displayName: string; h1(props: any): React_2.JSX.Element; h2(props: any): React_2.JSX.Element; h3(props: any): React_2.JSX.Element; h4(props: any): React_2.JSX.Element; h5(props: any): React_2.JSX.Element; h6(props: any): React_2.JSX.Element; }; /** * @public */ export declare const Hero: ({ name, children, img }: HeroProps) => React_2.JSX.Element; /** * @public */ export declare type HeroProps = { name: string; children: string; img: string; }; /** * Converts a hex color to rgb * * @example hexToRgb('#0068EF') =\> 'rgb(0, 104, 239)' * * @param color - The color to transform to rgb * * @returns The color in rgb * * @public */ export declare const hexToRgb: (color: any) => string; /** * @public */ export declare const Hide: React_2.FC & { text: React_2.FC; }; /** * @public */ export declare type HideProps = BoxProps & { xs?: boolean; sm?: boolean; md?: boolean; lg?: boolean; xl?: boolean; xxl?: boolean; print?: boolean; }; /** * @public */ export declare function Hug({ bg, borderRadius, borderWidth, color, p, fontSize, icon, iconDisplay, colorScheme, ...props }: HugProps): React_2.ReactElement; /** * @public */ export declare type HugProps = CardProps & { children?: React_2.ReactNode; iconDisplay?: string[]; icon?: React_2.ReactNode; text?: React_2.ReactNode; color?: string; fontSize?: string | number; }; /** * @public */ export declare interface IChatAction { label: string; onClick: () => void; } export declare const Icon: any; /** * @public */ export declare const IconButton: React_2.ForwardRefExoticComponent & React_2.RefAttributes>; /** * @public */ export declare type IconButtonProps = ButtonProps & { icon: React_2.ReactNode; autoFocus?: boolean; }; /** * @public */ export declare type IconComponent = React_2.FC; /** * @public */ export declare function IconField(props: IconFieldProps): React_2.JSX.Element; /** * @public */ export declare type IconFieldProps = { children: React_2.ReactNode; }; /** * @public */ declare const Image_2: React_2.FC; export { Image_2 as Image } /** * @public */ export declare type ImageProps = BorderRadiusProps & BoxShadowProps & HeightProps & MaxHeightProps & MaxWidthProps & MinHeightProps & MinWidthProps & SpaceProps & WidthProps & Omit, 'width' | 'height'> & { borderRadiusSize?: string; rounded?: string; boxShadowSize?: string; boxShadowColor?: string; objectFit?: ObjectFit; objectPosition?: ObjectPosition; }; /** * @public */ export declare const Input: InputWithRef; /** * @public */ export declare const InputGroup: React_2.FC; /** * @public */ export declare type InputGroupProps = SpaceProps & { borderColor?: PaletteFamilyName; children?: React_2.ReactNode; }; /** * @public */ export declare type InputHelperTextProps = TextProps & { children?: React_2.ReactNode; }; /** * @public */ export declare type InputProps = SpaceProps & FontSizeProps & ZIndexProps & Omit, 'size'> & { children?: React_2.ReactNode; helperText?: React_2.ReactElement>; color?: string; size?: 'sm' | 'md' | 'lg' | 'xl'; borderRadius?: string; }; /** * @public */ export declare type InputWithRef = ForwardRefExoticComponent & RefAttributes> & { isField: boolean; HelperText: React_2.FC; }; /** * @public */ export declare interface IStyledSystemProps extends BackgroundProps, BorderProps, ColorProps, FlexboxProps, GridProps_2, LayoutProps_2, PositionProps, ShadowProps, SpaceProps, TypographyProps { style?: React.CSSProperties; } /** * @public */ export declare const Label: React_2.FC & { isLabel?: boolean; }; /** * @public */ export declare type LabelProps = SpaceProps & FontSizeProps & FontWeightProps & LineHeightProps & TextStyleProps & WidthProps & Partial> & { children?: React_2.ReactNode; color?: string; autoHide?: boolean; nowrap?: boolean; for?: string; as?: unknown; truncate?: boolean; onClick?: (evt: unknown) => void; }; /** * @public */ export declare function Layout({ children, gap, rowGap, variation, stretchHeight, ...props }: LayoutProps): React_2.JSX.Element; export declare namespace Layout { var displayName: string; } /** * @public */ export declare type LayoutGap = (typeof ALLOWED_GAP_VALUES)[number] | Array<(typeof ALLOWED_GAP_VALUES)[number]>; /** * @public */ export declare type LayoutProps = GridProps & { children: React_2.ReactNode; gap?: LayoutGap; rowGap?: LayoutGap; variation?: LayoutVariation; stretchHeight?: boolean; }; /** * @public */ export declare type LayoutVariation = (typeof ALLOWED_LAYOUT_VALUES)[number] | Array<(typeof ALLOWED_LAYOUT_VALUES)[number] | undefined>; /** * @public */ export declare const lineHeights: { standard: number; display: number; }; /** * @public */ export declare const Link: React_2.FC; /** * @public */ export declare type LinkProps = WidthProps & SpaceProps & ComponentPropsWithRef<'a'> & { children?: React_2.ReactNode; color?: string; disabled?: boolean; href?: string; size?: ButtonSizes | ButtonSizes[]; target?: string; variation?: ButtonVariations; }; /** * @public */ export declare const List: React_2.FC & { ol: React_2.FC; ul: React_2.FC; }; /** * @public */ export declare type ListIndentSize = keyof typeof tabSpacingSize | 'none'; /** * @public */ export declare type ListListStyle = (typeof listStyles)[number]; /** * @public */ export declare type ListProps = FontSizeProps & SpaceProps & ComponentPropsWithoutRef<'ul' | 'ol'> & { children?: React_2.ReactNode; listStyle?: ListListStyle; indentSize?: ListIndentSize; color?: PaletteFamilyName | PaletteColor; }; /** * @public */ export declare const listStyles: readonly ["disc", "upper-roman", "lower-roman", "upper-alpha", "lower-alpha", "decimal", "square", "circle"]; /** * @public */ export declare const maxContainerWidth = "1280px"; /** * @public */ export declare const mediaQueries: any; /** * @public */ export declare const medium = 500; /** * @public */ export declare function Motion({ children, isAnimatedState, variation }: MotionProps): React_2.JSX.Element; /** @public */ export declare type MotionButtonProps = HTMLMotionProps<'button'> & CloseButtonProps; /** * @public */ export declare type MotionProps = { children?: React_2.ReactNode; isAnimatedState?: boolean; variation?: string; }; /** * @public */ export declare type MotionVariant = 'expandDown' | 'fadeIn' | 'growFromTopLeft' | 'pulse' | 'scaleFromCenter' | 'scaleFromTopLeft' | 'scaleOnHover' | 'scaleOnTap' | 'slideOutLeft' | 'slideInLeft' | 'slideInTop' | 'slideOutTop' | 'slideInBottom' | 'slideOutBottom' | 'slideOutRight' | 'slideInRight' | 'spin'; /** * @public */ export declare const Note: ({ children }: NoteProps) => React_2.JSX.Element; /** * @public */ export declare type NoteProps = { children: string; }; /** * @public */ export declare type ObjectFit = (typeof objectFitValues)[number]; /** * @public */ export declare function objectFit(): styleFn; /** * @public */ export declare const objectFitValues: readonly ["contain", "cover", "unset"]; /** * @public */ export declare type ObjectPosition = (typeof objectPositionValues)[number]; /** * @public */ export declare function objectPosition(): styleFn; /** * @public */ export declare const objectPositionValues: readonly string[]; /** * @public */ export declare type PaletteColor = `${PaletteFamilyName}.${PaletteFamilyVariation}`; export declare const paletteColors: string[]; /** * @public */ export declare type PaletteFamilies = Record; /** * @public */ export declare type PaletteFamily = { lightest?: string; light?: string; tint?: string; base: string; heading?: string; tone?: string; dark?: string; shade?: string; darkest?: string; }; /** * @public */ export declare type PaletteFamilyName = (typeof paletteFamilyNames)[number]; /** * @public */ export declare const paletteFamilyNames: readonly ["primary", "secondary", "text", "highlight", "success", "error", "warning", "alert", "caution", "notify", "pricePrimary", "priceSecondary", "strike", "promoPrimary", "promoSecondary", "border", "background"]; /** * @public */ export declare type PaletteFamilyVariation = (typeof paletteFamilyVariations)[number]; /** * @public */ export declare const paletteFamilyVariations: readonly ["lightest", "light", "tint", "base", "heading", "tone", "dark", "shade", "darkest"]; /** * @public */ export declare function PasswordInput({ id, isValid, label, hasProgressBar, progressBarSteps, regexChecks, value, onChange, autoComplete, ...props }: PasswordInputProps): React_2.JSX.Element; /** * @public */ export declare type PasswordInputProps = Omit & { id?: string; isValid?: boolean; label?: string; hasProgressBar?: boolean; progressBarSteps?: { color: PaletteColor | PaletteFamilyName; text: string; }[]; progressBarDefaultStep?: number; regexChecks?: { label: string; regex: RegExp; }[]; value?: string; onChange?: (event: { isValid: boolean; value: string; }) => void; autoComplete?: string; }; /** * @public */ export declare function PlaceholderImage({ alt, ariaHidden, blur, chooseSrc, className, height, width, }: PlaceholderImageProps): React_2.JSX.Element; export declare namespace PlaceholderImage { var displayName: string; } /** * @public */ export declare type PlaceholderImageProps = ComponentPropsWithoutRef<'img'> & { ariaHidden?: boolean; blur?: boolean; chooseSrc?: string; height?: string; width?: string; }; export declare type PlacementOptions = 'top' | 'bottom' | 'right' | 'left'; /** * @public */ export declare function Popout(props: PopoutProps): React_2.JSX.Element; /** * @public */ export declare interface PopoutProps { trigger: JSX.Element; content?: JSX.Element | undefined; triggerRef?: RefObject; onOpen?: () => void; onClose?: () => void; closeOnTriggerRefClick?: boolean; } export declare const Popover: ({ borderRadius, children, color, hideArrow, hideOverlay, hideCloseButton, idx, isOpen, onClose, onOpen, openOnMount, openOnHover, overlayOpacity, p, placement, toggleIsOpenOnClick, renderContent, width, maxWidth, }: PopoverProps) => React_2.JSX.Element; export declare type PopoverProps = Pick & { renderContent: React_2.ReactNode; idx: string; isOpen?: boolean; children?: React_2.ReactNode; hideArrow?: boolean; hideCloseButton?: boolean; hideOverlay?: boolean; onOpen?: () => void; onClose?: () => void; openOnHover?: boolean; trapFocus?: boolean; toggleIsOpenOnClick?: boolean; openOnMount?: boolean; overlayOpacity?: number; placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'; }; /** * @public */ export declare function ProgressBar({ steps, currentStep, stepHeight, className }: ProgressBarProps): React_2.JSX.Element; /** * @public */ export declare type ProgressBarProps = { steps: { color: PaletteColor | PaletteFamilyName; }[]; currentStep: number; stepHeight?: string; className?: string; }; /** * styled-system's `borderRadius` function can hook into the `radii` object/array * @public */ export declare const radii: number[]; /** * @public */ export declare const Radio: React_2.FC; /** * @public */ export declare function RadioCheckToggleCard({ backgroundColor, cardType, children, hPosition, isSelected, isTakingFullHeightOfCard, isTitleBold, name, onChange, title, value, vPosition, }: RadioCheckToggleCardProps): React_2.JSX.Element; export declare namespace RadioCheckToggleCard { var displayName: string; } /** * @public */ export declare const RadioCheckToggleCardCardTypes: readonly ["radio", "checkbox", "toggle"]; /** * @public */ export declare const RadioCheckToggleCardHPositions: readonly ["left", "right"]; /** * @public */ export declare type RadioCheckToggleCardProps = { backgroundColor?: PaletteColor; cardType?: TCardTypes; children?: React_2.ReactNode; hPosition?: THPositions; isSelected: boolean; isTakingFullHeightOfCard?: boolean; isTitleBold?: boolean; name: string; onChange?: (e: React_2.ChangeEvent) => void; title: string | React_2.ReactElement; value: string; vPosition?: TVPositions; }; /** * @public */ export declare const RadioCheckToggleCardVPositions: readonly ["top", "center"]; /** * @public */ export declare type RadioProps = ComponentPropsWithoutRef<'input'> & { size?: number; color?: PaletteFamilyName; }; /** * @public */ export declare const radius = "2px"; /** * @public */ export declare const RatingBadge: React_2.FC; /** * @public */ export declare type RatingBadgeProps = BoxProps & { bg?: string; color?: string; fontWeight?: string; }; /** * @public */ export declare const regular = 500; /** * @public */ export declare const RelatedComponent: ({ name, desc, children, onClick }: RelatedComponentProps) => React_2.JSX.Element; /** * @public */ export declare const RelatedComponentContainer: ({ children }: RelatedComponentContainerProps) => React_2.JSX.Element; /** * @public */ export declare type RelatedComponentContainerProps = { children: React_2.ReactNode; }; /** * @public */ export declare type RelatedComponentProps = { name: string; desc?: string; onClick?: () => void; children: React_2.ReactNode; }; /** * @public */ export declare const Relative: React_2.FC; /** * @public */ export declare type RelativeProps = TopProps & RightProps & BottomProps & LeftProps & ZIndexProps & BoxProps; /** * @public */ export declare const roundedValues: string[]; /** * @public */ export declare const Section: ({ heading, children }: SectionProps) => React_2.JSX.Element; /** * @public */ export declare type SectionProps = { heading: string; children: React_2.ReactNode; }; /** * @public */ export declare const Select: React_2.ForwardRefExoticComponent & React_2.RefAttributes>; /** * @public */ export declare type SelectProps = SpaceProps & FontSizeProps & Omit, 'size'> & { children?: React_2.ReactNode; color?: PaletteColor; borderRadius?: BorderRadius; size?: SelectSizes; variation?: SelectVariations; }; /** * @public */ export declare type SelectSizes = keyof typeof selectSizes; /** * @public */ export declare const selectSizes: { sm: any; md: any; lg: any; xl: any; }; /** * @public */ export declare type SelectVariations = 'input' | 'subtle'; /** * @public */ export declare function ShadowEffect({ shouldCloseOnBlur, shouldOpenOnFocus, zIndex, children, onClose, onOpen, ...props }: ShadowEffectProps): React_2.JSX.Element; /** * @public */ export declare type ShadowEffectProps = { shouldCloseOnBlur?: boolean; shouldOpenOnFocus?: boolean; zIndex?: number | string; children?: React_2.ReactNode; onClose?: () => void; onOpen?: () => void; }; /** * @public */ export declare const ShadowOverlay: any; /** * @public */ export declare const shadows: { sm: string; md: string; lg: string; xl: string; '2xl': string; 'overlay-md': string; 'overlay-lg': string; 'overlay-xl': string; }; /** * @public */ export declare function Shimmer({ animationWidth, disable, variation, ...props }: ShimmerProps): JSX.Element; /** * @public */ export declare type ShimmerProps = BoxProps & { animationWidth?: number; className?: string; disable?: boolean; variation?: ShimmerVariation; }; /** * @public */ export declare type ShimmerVariation = 'base' | 'light' | 'dark'; /** * @public */ export declare enum ShimmerVariationType { Base = "base", Light = "light", Dark = "dark" } /** * @public */ export declare function SkipMenu({ className, skipLinks, ...props }: SkipMenuProps): React_2.JSX.Element; export declare namespace SkipMenu { var displayName: string; } /** * @public */ export declare type SkipMenuProps = { className?: string; skipLinks?: { label: string; targetId: string; }[]; }; /** * @public */ export declare function SlideBox({ children, visibleSlides, onSlideChange, slideSpacing, stretchHeight, layout, currentSlideOverride, arrowSizeOverride, arrowButtonVariation, arrowPosition, slideScrollNum, mobileSlideScrollNum, overflowAllowancePxX, overflowAllowancePxY, overflowAllowancePxTop, }: SlideBoxProps): JSX.Element; /** * @public */ export declare type SlideBoxProps = { children?: React_2.ReactNode; visibleSlides?: Array | number; onSlideChange?: (e: any) => unknown; slideSpacing?: number; stretchHeight?: boolean; layout?: string; currentSlideOverride?: number; arrowSizeOverride?: string; arrowButtonVariation?: 'fill' | 'link' | 'outline' | 'plain' | 'subtle' | 'white' | 'lightFill' | 'input'; arrowPosition?: ArrowPosition; slideScrollNum?: number; mobileSlideScrollNum?: number; overflowAllowancePxX?: number; overflowAllowancePxY?: number; overflowAllowancePxTop?: number; }; export declare type SnapPositionChangeParams = { prevSnapPosition: string; currSnapPosition: string; }; export declare const space: string[]; /** * @public */ export declare const spaceValues: number[]; /** * @public */ export declare function Spinner({ children, color, size, useGradient, ...props }: SpinnerProps): React_2.JSX.Element; /** * @public */ export declare type SpinnerProps = GradientRingProps & { children?: React_2.ReactNode; size?: SpinnerSizes | string | Array; useGradient?: boolean; }; /** * @public */ export declare type SpinnerSizes = 'small' | 'medium' | 'large' | number; export declare const SrOnly: any; /** * @public */ export declare const Stamp: React_2.FC; /** * @public */ export declare type StampProps = SpaceProps & FontSizeProps & BorderRadiusProps & { bg?: string; borderColor?: string; children?: React_2.ReactNode; color?: string; size?: 'small' | 'medium'; variation?: 'outline' | 'fill' | 'solid'; colorScheme?: ColorSchemeName; }; /** * @public */ export declare function Step({ className, active, completed, children, onClick, ...props }: StepProps): React_2.ReactElement; export declare namespace Step { var displayName: string; } /** * @public */ export declare function Stepper({ className, children, ...props }: StepperProps): React_2.ReactElement; export declare namespace Stepper { var Step: any; } /** * @public */ export declare type StepperProps = { className?: string; children?: React_2.ReactNode; }; /** * @public */ export declare type StepProps = { className?: string; active?: boolean; completed?: boolean; children?: React_2.ReactNode; onClick?: ButtonProps['onClick']; }; /** * @public */ export declare const storybookArgs: { colorSchemeNames: readonly ["primary", "primaryLight", "primaryLightest", "primaryDark", "primaryShade", "primaryDarkOnLight", "secondary", "secondaryLight", "secondaryLightest", "secondaryDark", "secondaryDarkOnLight", "neutral", "neutralLight", "neutralLightest", "neutralDark", "neutralDarkOnLight", "neutralDarkOnLightest", "success", "successLight", "successLightest", "successDark", "successDarkOnLight", "warning", "warningLight", "warningLightest", "cautionLight", "highlightLight", "promo", "promoLight", "promoLightest", "promoDark", "promoDarkOnLight", "alert", "alertLight", "alertLightest", "alertDarkOnLight", "heading", "headingBase", "headingLight", "headingOnPrimaryLight"]; colors: string[]; borderRadii: string[]; borderStyles: string[]; rounded: string[]; shadows: string[]; textStyles: string[]; inputArgs: string[]; spaceArgs: {}; fontSizes: number[]; objectFits: string[]; objectPositions: string[]; zIndicies: ZIndices; chipWithShadowVariationArgs: ({ label: string; variation: string; selected?: undefined; disabled?: undefined; } | { label: string; selected: boolean; variation: string; disabled?: undefined; } | { label: string; disabled: boolean; variation: string; selected?: undefined; } | { label: string; disabled: boolean; selected: boolean; variation: string; })[]; }; /** * @public */ export declare const StoryHeading: ({ storyName, storyTitle }: StoryHeadingProps) => React_2.JSX.Element; /** * @public */ export declare type StoryHeadingProps = { storyName: string; storyTitle: string; }; /** * @public */ export declare const StoryStage: ({ children, ...rest }: StoryStageProps) => React_2.JSX.Element; /** * @public */ export declare type StoryStageProps = { children: React_2.ReactNode; [x: string]: unknown; }; /** * @public */ export declare type StyledButtonProps = ButtonProps & { hasChildren: boolean; }; /** * @public */ export declare function Swatch({ colors, onClick, ...props }: SwatchProps): React_2.ReactElement; export declare namespace Swatch { var displayName: string; } /** * @public */ export declare type SwatchProps = { colors: string[]; onClick?: (color: string) => void; }; export declare const Tab: { ({ tabsData, orientation, size, type, border, tabGap, isTransparent, dynamicTabWidth, ariaLabel, defaultValue, buttonChipProps, }: TabProps): React_2.JSX.Element; displayName: string; }; /** * Represents the data for a single tab in the tab component. * @public */ export declare type TabDataProps = { id: string; icon?: IconComponent; text: string; children: React_2.ReactNode; onTabSelect: () => void; }; /** * @public */ export declare const TableOfContents: ({ links }: TableOfContentsProps) => React_2.JSX.Element; /** * @public */ export declare type TableOfContentsProps = { links: string[]; }; /** * Represents the props for a tab component. * @public */ export declare type TabProps = { ariaLabel?: string; orientation?: 'horizontal' | 'vertical'; size?: ResponsiveValue<'sm' | 'md'>; tabsData: TabDataProps[]; variant?: string; border?: boolean; tabGap?: number; type: 'chip' | 'radio' | 'button'; isTransparent?: boolean; buttonChipProps?: ChoiceChipProps; dynamicTabWidth?: boolean; defaultValue?: string; }; /** * @public */ export declare const tabSpacingSize: { xsm: string; sm: string; md: string; lg: string; xl: string; }; /** * @public */ export declare type TCardTypes = (typeof RadioCheckToggleCardCardTypes)[number]; /** * @public */ declare const Text_2: any; export { Text_2 as Text } /** * @deprecated align prop is not supported since v5 * @public */ export declare function textAlignAttrs(props: any): { textAlign: any; }; /** * @public */ export declare const TextArea: React_2.FC & { isField?: boolean; }; /** * @public */ export declare type TextAreaProps = SpaceProps & ComponentPropsWithRef<'textarea'> & { isField?: boolean; }; export declare type TextProps = DisplayProps & FontSizeProps & FontStyleProps & FontWeightProps & HeightProps & LineHeightProps & MaxHeightProps & MaxWidthProps & MinHeightProps & MinWidthProps & OverflowProps & SpaceProps & TextAlignProps & TextStyleProps & WidthProps & ZIndexProps & { bg?: string; children?: React.ReactNode; color?: string; }; /** * @public */ export declare const textShadows: { sm: string; md: string; }; /** * @public */ export declare type TextStyle = { fontWeight: number; fontSize: string; lineHeight: string; }; /** * @public */ export declare const textStyles: any; /** * @public */ export declare const textStylesValues: string[]; /** * @public */ export declare const textTransform: (props: any) => { textTransform: any; }; /** * @public */ export declare const textTransformValues: string[]; /** * @public */ export declare const textWrap: (props: any) => { textWrap: any; }; /** * @public */ export declare const textWrapValues: string[]; /** * @public */ export declare const theme: any; /** * @public */ export declare const ThemeProvider: React_2.FC; /** * @public */ export declare type ThemeProviderProps = { theme?: { breakpoints?: string[]; mediaQueries?: string[]; space?: number[]; font?: string; fontSizes?: number[]; fontWeights?: { medium?: number; bold?: number; regular?: number; }; lineHeights?: { standard?: number; display?: number; }; letterSpacings?: { normal?: string; caps?: string; }; regular?: number; bold?: number; colors?: object; palette?: object; radii?: number[]; radius?: string; boxShadows?: string[]; maxContainerWidth?: string; duration?: object; timingFunctions?: object; transitionDelays?: object; }; children?: React_2.ReactNode; customBreakpoints?: string[]; }; /** * @public */ export declare type THPositions = (typeof RadioCheckToggleCardHPositions)[number]; /** * @public */ export declare const timingFunctions: { easeInOut: string; easeOut: string; easeIn: string; 'standard-productive': string; 'entrance-productive': string; 'exit-productive': string; 'standard-expressive': string; 'entrance-expressive': string; 'exit-expressive': string; }; /** * @public */ export declare function Toast({ children, color, hideClose, icon, id, lifespan, variation, onRemoveClick, ...props }: ToastProps): React_2.JSX.Element; /** * @public */ export declare type ToastContextProps = { addToast: (options: ToastOptions) => void; removeToast: (id: number) => void; }; /** * @public */ export declare type ToastOptions = ToastProps & { enterAnimation?: MotionVariant; exitAnimation?: MotionVariant; removed?: boolean; }; /** * @public */ export declare type ToastProps = { children: React_2.ReactNode; hideClose?: boolean; icon?: React_2.ReactElement; id?: number; lifespan?: number; variation?: 'border' | 'fill'; onRemoveClick?: (id: number) => void; } & Omit; /** * @public */ export declare const ToastProvider: any; /** * @public */ export declare type ToastProviderProps = { children: React_2.ReactNode; domRootId?: string; enterAnimation?: MotionVariant; exitAnimation?: MotionVariant; lifespan?: number; maxToasts?: number; theme: unknown; top?: number; bottom?: number; }; /** * Toggle component * * @public */ export declare function Toggle({ isOn, label, onToggle, disabled, height, icon, name, }: ToggleProps): React_2.ReactElement; export declare namespace Toggle { var displayName: string; } /** * @public */ export declare const ToggleBadge: React_2.FC; /** * @public */ export declare type ToggleBadgeProps = { borderRadius?: string; selected?: boolean; color?: string; bg?: string; unSelectedBg?: string; } & SpaceProps & FontSizeProps & ComponentPropsWithRef<'button'>; /** * @public */ export declare type ToggleProps = { isOn?: boolean; label?: string; onToggle?: BoxProps['onClick']; disabled?: boolean; width?: string; height?: number; icon?: React_2.ReactNode; name?: string; }; /** * @public */ export declare const Tooltip: any; /** * @public */ export declare type TooltipProps = BoxProps & { bg?: PaletteColor; bottom?: boolean; center?: boolean; children?: React_2.ReactNode; color?: PaletteColor; left?: boolean; position?: string; right?: boolean; top?: boolean; zIndex?: number | string; }; /** * @public */ export declare type TransitionVariant = 'default' | 'spring' | 'comeAndGo' | 'slow'; /** * @public */ export declare const Truncate: any; /** * @public */ export declare type TVPositions = (typeof RadioCheckToggleCardVPositions)[number]; /** * @public */ export declare const typography: { title1: { fontWeight: number; fontSize: string; lineHeight: string; }; title2: { fontWeight: number; fontSize: string; lineHeight: string; }; title3: { fontWeight: number; fontSize: string; lineHeight: string; }; heading1: { fontWeight: number; fontSize: string; lineHeight: string; }; heading2: { fontWeight: number; fontSize: string; lineHeight: string; }; heading3: { fontWeight: number; fontSize: string; lineHeight: string; }; heading4: { fontWeight: number; fontSize: string; lineHeight: string; }; heading5: { fontWeight: number; fontSize: string; lineHeight: string; }; heading6: { fontWeight: number; fontSize: string; lineHeight: string; }; article: { fontWeight: number; fontSize: string; lineHeight: string; letterSpacing: string; }; paragraph: { fontWeight: number; fontSize: string; lineHeight: string; letterSpacing: string; }; caption: { fontWeight: number; fontSize: string; lineHeight: string; letterSpacing: string; }; overline: { fontWeight: number; fontSize: string; lineHeight: string; letterSpacing: string; }; disclaimer: { fontWeight: number; fontSize: string; lineHeight: string; letterSpacing: string; }; highlight: { fontWeight: number; fontSize: string; lineHeight: string; letterSpacing: string; textTransform: string; caps: boolean; }; highlightBold: { fontWeight: number; fontSize: string; lineHeight: string; letterSpacing: string; textTransform: string; caps: boolean; }; subtitle1: { fontWeight: number; fontSize: string; lineHeight: string; }; subheading1: { fontWeight: number; fontSize: string; lineHeight: string; }; subheading2: { fontWeight: number; fontSize: string; lineHeight: string; }; subheading3: { fontWeight: number; fontSize: string; lineHeight: string; }; subheading4: { fontWeight: number; fontSize: string; lineHeight: string; }; subheading5: { fontWeight: number; fontSize: string; lineHeight: string; }; subheading6: { fontWeight: number; fontSize: string; lineHeight: string; }; articleBold: { fontWeight: number; fontSize: string; lineHeight: string; letterSpacing: string; }; paragraphBold: { fontWeight: number; fontSize: string; lineHeight: string; letterSpacing: string; }; paragraph2: { fontWeight: number; fontSize: string; lineHeight: string; letterSpacing: string; }; paragraph2Bold: { fontWeight: number; fontSize: string; lineHeight: string; letterSpacing: string; }; captionBold: { fontWeight: number; fontSize: string; lineHeight: string; letterSpacing: string; }; overlineMedium: { fontWeight: number; fontSize: string; lineHeight: string; letterSpacing: string; }; disclaimerBold: { fontWeight: number; fontSize: string; lineHeight: string; letterSpacing: string; }; label: { fontWeight: number; fontSize: string; lineHeight: number; letterSpacing: string; }; }; /** * @public */ export declare function typographyAttrs(props: any): any; /** * @public */ export declare const useToast: () => ToastContextProps; /** * @public */ export declare type ZIndex = number | ZIndexStrings; /** * @public */ export declare type ZIndexStrings = 'auto' | 'absolute' | 'dropdown' | 'sticky' | 'fixed' | 'overlay' | 'onOverlay' | 'offCanvas' | 'modal' | 'popover' | 'tooltip'; /** * @public */ export declare type ZIndices = Record; /** * @public */ export declare const zIndices: ZIndices; export { }