diff --git a/combined.txt b/combined.txt new file mode 100644 index 0000000000..e69de29bb2 diff --git a/common/changes/pcln-menu/fix-HTL-103087-menu-scroll_2024-04-18-15-40.json b/common/changes/pcln-menu/fix-HTL-103087-menu-scroll_2024-04-18-15-40.json deleted file mode 100644 index 08752f6cd5..0000000000 --- a/common/changes/pcln-menu/fix-HTL-103087-menu-scroll_2024-04-18-15-40.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "changes": [ - { - "packageName": "pcln-menu", - "comment": "fix when the menu opens the page scrolls to the top", - "type": "patch" - } - ], - "packageName": "pcln-menu" -} \ No newline at end of file diff --git a/dsConcat.txt b/dsConcat.txt new file mode 100644 index 0000000000..a3eaf4ebef --- /dev/null +++ b/dsConcat.txt @@ -0,0 +1,44515 @@ +/// + +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 { 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 { GridProps as GridProps_2 } from 'styled-system'; +import { HeightProps } from 'styled-system'; +import { HTMLMotionProps } from 'framer-motion'; +import { Icon } from 'pcln-icons'; +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 { MutableRefObject } 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 { RefObject } from 'react'; +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 { TopProps } from 'styled-system'; +import { TypographyProps } from 'styled-system'; +import { WidthProps } from 'styled-system'; +import { ZIndexProps } from 'styled-system'; + +export declare const Absolute: React.FC; + +export declare type AbsoluteProps = BoxProps & TopProps & RightProps & BottomProps & LeftProps & ZIndexProps; + +export declare function Accordion({ items, itemsState, isExternallyControlled, onToggle, type, variation, p, headerDividerColor, ...props }: AccordionProps): React_2.ReactElement; + +export declare type AccordionItemProps = { + content: React_2.ReactNode; + headerActions?: React_2.ReactNode; + headerLabel?: React_2.ReactNode; + headerBg?: string; + value: string; +}; + +export declare type AccordionProps = SpaceProps & { + items: AccordionItemProps[]; + itemsState?: string | string[]; + onToggle?: (value: string | string[]) => void; + type?: string; + variation?: string; + isExternallyControlled?: boolean; + headerDividerColor?: string; +}; + +export declare const actionBorderRadii: { + 'action-sm': string; + 'action-md': string; + 'action-lg': string; + 'action-xl': string; +}; + +declare const ALLOWED_GAP_VALUES: readonly ["sm", "md", "lg", "xl"]; + +declare const ALLOWED_LAYOUT_VALUES: readonly ["50-50", "33-33-33", "33-66", "66-33", "25-25-25-25", "60-40", "40-60", "100"]; + +export declare const Animate: (props: AnimateProps) => React_2.JSX.Element; + +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 + * + */ +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 + */ +export declare const applyVariations: (componentName: any, variations?: any) => (props: any) => any; + +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; +} + +export declare type AvatarProps = { + className?: string; + title?: string; + subtitle?: string; + src?: string; + altText?: string; + initials?: string; + size?: string | number | Array; + color?: string; + colorScheme?: string; +}; + +export declare const BackgroundImage: React_2.FC; + +export declare type BackgroundImageProps = WidthProps & HeightProps & BorderRadiusProps & Omit, 'width' | 'height'> & { + variation?: 'parallax' | 'static'; + image?: string; + borderRadius?: string; + rounded?: string; + backgroundPosition?: (typeof backgroundPositionList)[number]; +}; + +declare const backgroundPositionList: string[]; + +export declare const Badge: React.FC; + +export declare type BadgeProps = SpaceProps & React.HtmlHTMLAttributes & { + size?: 'small' | 'medium'; + color?: string; + bg?: string; + borderRadius?: string; + colorScheme?: ColorSchemeName; + textTransform?: string; +}; + +export declare function Banner(props: BannerProps): React_2.ReactElement; + +export declare namespace Banner { + var displayName: string; + var defaultProps: { + textAlign: string; + showIcon: boolean; + color: string; + }; +} + +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; +}; + +export declare const Base: any; + +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; + +export declare const bold = 700; + +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; +}; + +declare const borderRadii_2: string[]; + +export declare type BorderRadius = keyof typeof borderRadii; + +export declare function borderRadiusAttrs({ borderRadius, rounded, theme }: { + borderRadius: any; + rounded: any; + theme: any; +}): { + borderRadius?: undefined; +} | { + borderRadius: any; +}; + +export declare const borderRadiusValues: string[]; + +export declare const borders: (props: any) => { + 'border-color': any; + ':focus': { + outline: number; + 'border-color': any; + 'box-shadow': string; + }; +}; + +declare const borderStyles: string[]; + +export declare const Box: React_2.FC; + +export declare type BoxProps = BorderRadiusProps & BoxShadowProps & DisplayProps & HeightProps & MaxHeightProps & MaxWidthProps & MinHeightProps & MinWidthProps & OverflowProps & SizeProps & SpaceProps & TextAlignProps & WidthProps & React_2.HTMLAttributes & { + children?: React_2.ReactNode | string; + as?: React_2.ReactNode; + role?: string; + bg?: string; + color?: string; + className?: string; + borderRadiusSize?: 'none' | 'xsm' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full' | 'action-sm' | 'action-md' | 'action-lg'; + boxShadowSize?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'overlay-lg' | 'overlay-xl'; + boxShadowColor?: 'primary' | 'secondary' | 'text' | 'highlight' | 'success' | 'error' | 'warning' | 'alert' | 'caution' | 'notify' | 'pricePrimary' | 'priceSecondary' | 'promoPrimary' | 'promoSecondary' | 'border' | 'background'; + colorScheme?: ColorSchemeName; + onClick?: (unknown: any) => unknown; + ref?: MutableRefObject; + rounded?: 'top' | 'right' | 'bottom' | 'left' | 'topLeft' | 'topRight' | 'bottomRight' | 'bottomLeft'; +}; + +export declare function boxShadowAttrs(props: any): { + boxShadow?: undefined; +} | { + boxShadow: any; +}; + +export declare type BoxShadowSize = keyof typeof shadows; + +export declare const boxShadowSizeValues: string[]; + +declare type BreadcrumbLinkProps = React_2.RefAttributes & { + className?: string; + isLastChild?: boolean; + href?: string; + icon?: React_2.ReactNode; + label?: string; + onClick?: (unknown: any) => unknown; +}; + +export declare const Breadcrumbs: React_2.FC & { + Link: React_2.FC; +}; + +export declare type BreadcrumbsProps = { + className?: string; + children?: React_2.ReactNode; +}; + +export declare const breakpoints: string[]; + +export declare const Button: React_2.ForwardRefExoticComponent & React_2.RefAttributes>; + +export declare const ButtonChip: React_2.FC; + +export declare type ButtonChipProps = SpaceProps & FontSizeProps & { + BridgeIcon?: IconComponent; + bridgeLabel?: string; + children?: React_2.ReactNode; + color?: string; + disabled?: boolean; + expanded?: boolean; + facet?: string; + Icon?: IconComponent; + id?: string; + label?: string; + selected?: boolean; + showActionIcon?: boolean; + onClick?: (unknown: any) => unknown; + width?: string; + variation?: ButtonChipVariation; +}; + +declare type ButtonChipVariation = 'outline' | 'shadow'; + +export declare type ButtonProps = WidthProps & HeightProps & SpaceProps & BoxShadowProps & React_2.ButtonHTMLAttributes & React_2.RefAttributes & { + color?: string; + variation?: Variations; + size?: Sizes | Sizes[]; + borderRadius?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full' | ''; + boxShadowSize?: '' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'overlay-md' | 'overlay-lg' | 'overlay-xl'; + autoFocus?: boolean; + IconLeft?: React_2.Component; + IconRight?: React_2.Component; + flexProps?: FlexProps; + onClick?: (unknown: any) => unknown; + onFocus?: (unknown: any) => unknown; + onMouseEnter?: (unknown: any) => unknown; +}; + +export declare const Card: React_2.FC; + +export declare type CardProps = BoxProps & BorderProps & { + borderColor?: string; +}; + +declare const cardTypes: readonly ["radio", "checkbox", "toggle"]; + +export declare function ChatActionContainer({ chatActions }: ChatActionContainerProps): React_2.JSX.Element; + +declare type ChatActionContainerProps = { + chatActions: IChatAction[]; +}; + +export declare function ChatHeader({ children, onClose, onMinimize }: ChatHeaderProps): React_2.JSX.Element; + +export declare type ChatHeaderProps = { + children: React_2.ReactNode; + onClose: () => void; + onMinimize: () => void; +}; + +export declare function ChatMessage({ footer, header, Icon, message, variation, ...props }: ChatMessageProps): React_2.JSX.Element; + +export declare function ChatMessageContainer({ messageMaxWidth, messages }: ChatMessageContainerProps): React_2.JSX.Element; + +export declare interface ChatMessageContainerProps { + messageMaxWidth: string; + messages: IMessage[]; +} + +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 variationNames)[number]; +}; + +export declare function ChatMessageSeparator({ message }: ChatMessageSeparatorProps): React_2.JSX.Element; + +export declare type ChatMessageSeparatorProps = { + message?: string; +}; + +export declare type ChatMessageVariation = 'initial' | 'incoming' | 'outgoing'; + +export declare function ChatTrigger(props: FloatingActionButtonProps): JSX.Element; + +export declare type ChatTriggerProps = FloatingActionButtonProps; + +export declare const Checkbox: React_2.FC; + +export declare type CheckboxProps = React_2.InputHTMLAttributes & { + id: string; + indeterminate?: boolean; + size?: number; + onChange?: (e: React_2.ChangeEvent) => void; + color?: string; + checked?: boolean; + defaultChecked?: boolean; + disabled?: boolean; + ref?: React_2.Ref; + unselectedColor?: string; +}; + +declare const 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; +})[]; + +export declare function ChoiceChip({ id, name, disabled, selected, children, onClick, label, variation, width, value, ...props }: ChoiceChipProps): React_2.ReactElement; + +export declare namespace ChoiceChip { + var displayName: string; + var defaultProps: { + color: string; + variation: string; + }; +} + +export declare type ChoiceChipProps = SpaceProps & FontSizeProps & React_2.HTMLAttributes & { + name?: string; + disabled?: boolean; + selected?: boolean; + label?: string; + value?: string | number; + variation?: Variations_2; + topLabel?: string; + borderRadius?: string; + width?: string; + justifyContent?: string; +}; + +export declare const CloseButton: ({ animate, bgColor, boxShadowSize, className, color, onClick, size, title, variant, ...props }: CloseButtonProps) => React_2.JSX.Element; + +export declare type CloseButtonProps = IStyledSystemProps & { + animate?: boolean; + bgColor?: PaletteColor; + boxShadowSize?: BoxShadowSize; + className?: string; + color?: PaletteColor; + onClick?: MouseEventHandler; + size?: CloseButtonSize; + title?: string; + variant?: CloseButtonVariant; +}; + +declare type CloseButtonSize = (typeof closeButtonSizes)[number] | number; + +declare const closeButtonSizes: readonly ["sm", "md", "lg"]; + +declare type CloseButtonVariant = (typeof closeButtonVariants)[number]; + +declare const closeButtonVariants: readonly ["filled", "white"]; + +/** + * 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; + +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; +}; + +declare const colors_2: string[]; + +/** @public */ +export declare type ColorScheme = { + foreground: string; + background: string; + backgroundName: PaletteColor; +}; + +export declare const colorScheme: ({ colorScheme, ...props }: { + [x: string]: any; + colorScheme: any; +}) => string; + +/** + * 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"]; + +declare const colorSchemeNames_2: 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"]; + +/** @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; + +export declare const colorStyles: any; + +export declare const ComposedStyleFns: styleFn; + +export declare const Container: React_2.FC; + +export declare type ContainerProps = { + children?: React_2.ReactNode; + maxWidth?: number; + size?: ContainerSize; +}; + +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 + */ +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 + */ +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 + */ +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 + */ +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 + */ +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 + */ +export declare const decomposeColor: (color: any) => any; + +export declare const deprecatedColorValue: () => (props: any, propName: any, componentName: any) => Error; + +export declare const deprecatedPropType: (replacement: any) => (props: any, propName: 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; +}; + +export declare const Dialog: { + ({ ariaDescription, ariaTitle, borderRadius, children, defaultOpen, fullWidth, headerColorScheme, headerContent, headerIcon, headerShowCloseButton, hugColor, open, scrimColor, scrimDismiss, sheet, showCloseButton, size, triggerNode, zIndex, overflowX, overflowY, onOpenChange, }: DialogProps): React_2.JSX.Element; + displayName: string; +}; + +export declare type DialogProps = Omit & { + ariaDescription: string; + ariaTitle: string; + borderRadius?: BorderRadius; + children?: React_2.ReactNode; + defaultOpen?: boolean; + fullWidth?: boolean; + headerColorScheme?: keyof ColorSchemes; + headerContent?: string | React_2.ReactNode; + headerIcon?: React_2.ReactNode; + headerShowCloseButton?: boolean; + hugColor?: PaletteColor; + 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; +}; + +declare type DialogSize = (typeof dialogSizes)[number]; + +declare const dialogSizes: readonly ["sm", "md", "lg", "xl", "full"]; + +export declare const Divider: React_2.FC; + +export declare type DividerProps = SpaceProps & WidthProps & BorderColorProps & { + color?: ColorName | PaletteFamilyName | PaletteColor; +}; + +export declare const DocTable: ({ data, columns, ...rest }: DocTableProps) => React_2.JSX.Element; + +export declare type DocTableProps = { + data: T[]; + columns: { + field: string; + heading: string; + noWrap?: boolean; + }[]; +}; + +export declare const DoDont: ({ doExample, dontExample, doText, dontText }: DoDontProps) => React_2.JSX.Element; + +export declare type DoDontProps = { + doExample: React_2.ReactNode; + doText?: string; + dontExample: React_2.ReactNode; + dontText?: string; +}; + +export declare function DotLoader({ color, size, speed, ...props }: DotLoaderProps): React_2.JSX.Element; + +export declare namespace DotLoader { + var defaultProps: { + color: string; + size: string; + speed: string; + }; +} + +export declare type DotLoaderProps = { + color?: ColorName | PaletteFamilyName | PaletteColor; + size?: keyof typeof sizes | (keyof typeof sizes)[]; + speed?: keyof typeof speeds; +}; + +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; +}; + +declare function FilterChip({ id, name, disabled, selected, children, onClick, label, showActionIcon, actionTitle, value, variation, ...props }: FilterChipProps): React_2.ReactElement; + +declare namespace FilterChip { + var displayName: string; + var defaultProps: { + color: string; + actionTitle: string; + variation: string; + }; +} +export { FilterChip as Chip } +export { FilterChip } + +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 | string; + variation?: FilterChipVariation; +}; + +declare type FilterChipVariation = 'outline' | 'shadow'; + +export declare const Flag: React_2.FC; + +export declare type FlagProps = SpaceProps & WidthProps & { + children?: React_2.ReactNode; + color?: ColorName; + bg?: ColorName; +}; + +export declare const Flex: React_2.FC; + +export declare type FlexProps = BoxProps & SpaceProps & WidthProps & AlignItemsProps & JustifyContentProps & AlignContentProps & FlexWrapProps & FlexDirectionProps; + +export declare function FloatingActionButton({ hasNotification, icon, tooltip, onClick, ...props }: FloatingActionButtonProps): JSX.Element; + +export declare type FloatingActionButtonProps = AbsoluteProps & { + hasNotification?: boolean; + icon: React_2.Component; + tooltip?: string; + onClick: () => void; +}; + +export declare const font = "'Montserrat','Helvetica Neue',Helvetica,Arial,sans-serif"; + +export declare const fontSizes: number[]; + +declare const fontSizes_2: number[]; + +export declare const fontWeights: { + medium: number; + bold: number; + regular: number; +}; + +declare function FormField({ children, disabled, readOnly, ...props }: FormFieldProps): React_2.JSX.Element; + +declare namespace FormField { + var displayName: string; +} +export { FormField } +export { FormField as InputField } + +export declare interface FormFieldProps extends BoxProps { + disabled?: boolean; + readOnly?: boolean; +} + +export declare function GenericBanner({ alignItems, buttonClick, buttonSize, buttonVariation, ctaText, fontSize, heading, iconLeft, iconRight, imageLeft, justifyContent, linkVariation, linkColor, text, URLProps, ...props }: GenericBannerProps): React_2.JSX.Element; + +export declare namespace GenericBanner { + var defaultProps: { + alignItems: string; + buttonVariation: string; + fontSize: number[]; + justifyContent: string; + linkColor: string; + linkVariation: string; + borderRadius: string; + }; +} + +export declare type GenericBannerProps = AlignItemsProps & JustifyContentProps & FontSizeProps & PaddingProps & MarginProps & { + buttonClick?: () => unknown; + buttonSize?: 'small' | 'medium' | 'large'; + buttonVariation?: 'fill' | 'outline' | 'link'; + ctaText?: Node_2; + heading?: Node_2; + iconLeft?: Node_2; + iconRight?: Node_2; + imageLeft?: Node_2; + linkVariation?: 'fill' | 'outline' | 'link'; + borderRadius?: string; + linkColor?: string; + text?: Node_2; + 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 + */ +export declare const getBreakpointSize: (array: any, length: any) => any; + +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 + * + */ +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 + */ +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 + */ +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 + */ +export declare const getPaletteColor: (...args: any[]) => (props: any) => any; + +/** + * Gets the text color that belongs on a given background color + * + * @param name - The name of the background color + * + */ +export declare const getTextColorOn: (name: any, lightColor?: any, darkColor?: any) => (props: any) => any; + +export declare const getValidPaletteColor: (color: any) => (props: any) => any; + +export declare const Grid: (props: GridProps) => React_2.JSX.Element; + +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 + */ +export declare const hasPaletteColor: (props: any) => boolean; + +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; +}; + +export declare const Hero: ({ name, children, img }: HeroProps) => React_2.JSX.Element; + +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 + */ +export declare const hexToRgb: (color: any) => string; + +export declare const Hide: React_2.FC & { + text: React_2.FC; +}; + +export declare type HideProps = BoxProps & { + xs?: boolean; + sm?: boolean; + md?: boolean; + lg?: boolean; + xl?: boolean; + xxl?: boolean; + print?: boolean; +}; + +declare const hPositions: readonly ["left", "right"]; + +export declare function Hug({ bg, color, p, fontSize, icon, iconDisplay, colorScheme, ...props }: HugProps): React_2.ReactElement; + +export declare namespace Hug { + var defaultProps: { + borderRadius: string; + borderWidth: number; + color: string; + fontSize: number; + p: number; + }; +} + +export declare type HugProps = CardProps & { + children?: React_2.ReactNode; + iconDisplay?: string[]; + icon?: React_2.ReactNode; + text?: React_2.ReactNode | React_2.ReactNode[] | string; + color?: string; + fontSize?: string | number; +}; + +declare interface IChatAction { + label: string; + onClick: () => void; +} + +export { Icon } + +export declare const IconButton: React_2.FC & { + isIconButton?: boolean; +}; + +export declare type IconButtonProps = ButtonProps & { + icon: React_2.ReactNode; + autoFocus?: boolean; +}; + +declare type IconComponent = React_2.FC; + +export declare function IconField(props: IconFieldProps): React_2.JSX.Element; + +export declare type IconFieldProps = { + children: React_2.ReactNode; +}; + +declare const Image_2: React_2.FC; +export { Image_2 as Image } + +export declare type ImageProps = BorderRadiusProps & BoxShadowProps & HeightProps & SpaceProps & WidthProps & Partial> & { + borderRadiusSize?: string; + rounded?: string; + boxShadowSize?: string; + boxShadowColor?: string; + objectFit?: ObjectFit; + objectPosition?: ObjectPosition; +}; + +declare interface IMessage { + dateTime?: string; + message: string; + variation: ChatMessageVariation; +} + +export declare const Input: React_2.FC & { + isField?: boolean; + HelperText?: React_2.FC; +}; + +declare const inputArgs: string[]; + +export declare const InputGroup: React_2.FC; + +export declare type InputGroupProps = SpaceProps & { + borderColor?: PaletteFamilyName; + children?: React_2.ReactNode; +}; + +export declare type InputProps = SpaceProps & FontSizeProps & ZIndexProps & Omit, 'size'> & React_2.RefAttributes & { + children?: React_2.ReactNode; + onChange?: (unknown: any) => unknown; + helperText?: React_2.ReactElement>; + color?: string; + size?: 'sm' | 'md' | 'lg' | 'xl'; + borderRadius?: string; +}; + +export declare interface IStyledSystemProps extends BackgroundProps, BorderProps, ColorProps, FlexboxProps, GridProps_2, LayoutProps_2, PositionProps, ShadowProps, SpaceProps, TypographyProps { + style?: React.CSSProperties; +} + +export declare const Label: React_2.FC & { + isLabel?: boolean; +}; + +export declare type LabelProps = SpaceProps & FontSizeProps & FontWeightProps & LineHeightProps & TextStyleProps & WidthProps & Partial> & { + children?: React_2.ReactNode | string; + color?: string; + autoHide?: boolean; + nowrap?: boolean; + for?: string; + onClick?: (evt: unknown) => void; +}; + +export declare function Layout({ children, gap, rowGap, variation, stretchHeight, flexWrap, ...props }: LayoutProps): React_2.JSX.Element; + +export declare namespace Layout { + var defaultProps: { + flexWrap: string; + }; + var displayName: string; +} + +declare type LayoutGap = (typeof ALLOWED_GAP_VALUES)[number] | Array<(typeof ALLOWED_GAP_VALUES)[number]>; + +export declare type LayoutProps = FlexWrapProps & { + children: React_2.ReactElement | React_2.ReactElement[]; + gap?: LayoutGap; + rowGap?: LayoutGap; + variation?: LayoutVariation; + stretchHeight?: boolean; +}; + +declare type LayoutVariation = (typeof ALLOWED_LAYOUT_VALUES)[number] | Array<(typeof ALLOWED_LAYOUT_VALUES)[number]>; + +export declare const lineHeights: { + standard: number; + display: number; +}; + +export declare const Link: React_2.FC; + +export declare type LinkProps = WidthProps & SpaceProps & React_2.AnchorHTMLAttributes & React_2.RefAttributes & { + children?: React_2.ReactNode | string; + color?: string; + disabled?: boolean; + href?: string; + size?: Sizes | Sizes[]; + target?: string; + variation?: Variations; + onClick?: React_2.MouseEventHandler; + onFocus?: React_2.FocusEventHandler; +}; + +export declare const List: React_2.FC & { + ol: React_2.FC; + ul: React_2.FC; +}; + +export declare type ListProps = FontSizeProps & SpaceProps & React_2.HTMLAttributes & { + children?: React_2.ReactNode; + listStyle?: (typeof listStyles)[number]; + indentSize?: keyof typeof tabSpacingSize | 'none'; + color?: PaletteFamilyName | PaletteColor; +}; + +declare const listStyles: readonly ["disc", "upper-roman", "lower-roman", "upper-alpha", "lower-alpha", "decimal", "square", "circle"]; + +export declare const maxContainerWidth = "1280px"; + +export declare const mediaQueries: any; + +export declare const medium = 500; + +export declare function Motion({ children, isAnimatedState, variation }: MotionProps): React_2.JSX.Element; + +export declare namespace Motion { + var defaultProps: { + variation: string; + }; +} + +export declare type MotionProps = { + children?: React_2.ReactNode; + isAnimatedState?: boolean; + variation?: string; +}; + +declare type MotionVariant = 'expandDown' | 'fadeIn' | 'growFromTopLeft' | 'pulse' | 'scaleFromCenter' | 'scaleFromTopLeft' | 'scaleOnHover' | 'scaleOnTap' | 'slideOutLeft' | 'slideInLeft'; + +declare type Node_2 = React_2.ReactElement>; + +export declare const Note: ({ children }: NoteProps) => React_2.JSX.Element; + +export declare type NoteProps = { + children: string; +}; + +export declare type ObjectFit = typeof objectFitValues[number]; + +export declare function objectFit(): styleFn; + +declare const objectFits: string[]; + +export declare const objectFitValues: readonly ["contain", "cover", "unset"]; + +export declare type ObjectPosition = typeof objectPositionValues[number]; + +export declare function objectPosition(): styleFn; + +declare const objectPositions: string[]; + +export declare const objectPositionValues: readonly string[]; + +/** @public */ +export declare type PaletteColor = `${_PaletteFamily}.${_PaletteFamilyOption}`; + +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; +}; + +declare type _PaletteFamily = Array[number]; + +/** @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"]; + +declare type _PaletteFamilyOption = Array[number]; + +/** @public */ +export declare type PaletteFamilyVariation = (typeof paletteFamilyVariations)[number]; + +/** @public */ +export declare const paletteFamilyVariations: readonly ["lightest", "light", "tint", "base", "heading", "tone", "dark", "shade", "darkest"]; + +export declare function PasswordInput({ id, isValid, label, hasProgressBar, progressBarSteps, regexChecks, value, onChange, autoComplete, ...props }: PasswordInputProps): React_2.JSX.Element; + +export declare namespace PasswordInput { + var defaultProps: { + hasProgressBar: boolean; + progressBarSteps: { + color: string; + text: string; + }[]; + progressBarDefaultStep: number; + regexChecks: { + label: string; + regex: RegExp; + }[]; + }; +} + +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; +}; + +export declare function PlaceholderImage(props: PlaceholderImageProps): React_2.JSX.Element; + +export declare namespace PlaceholderImage { + var displayName: string; + var defaultProps: { + ariaHidden: boolean; + blur: boolean; + height: string; + width: string; + }; +} + +export declare type PlaceholderImageProps = React_2.ImgHTMLAttributes & { + ariaHidden?: boolean; + blur?: boolean; + chooseSrc?: string; + height?: string; + width?: string; +}; + +export declare function Popout(props: PopoutProps): React_2.JSX.Element; + +export declare interface PopoutProps { + trigger: JSX.Element; + content?: JSX.Element | undefined; + triggerRef?: RefObject; + onOpen?: () => void; + onClose?: () => void; + closeOnTriggerRefClick?: boolean; +} + +export declare function ProgressBar({ steps, currentStep, stepHeight, className }: ProgressBarProps): React_2.JSX.Element; + +export declare namespace ProgressBar { + var defaultProps: { + stepHeight: string; + }; +} + +export declare type ProgressBarProps = { + steps: { + color: PaletteColor | PaletteFamilyName; + }[]; + currentStep: number; + stepHeight?: string; + className?: string; +}; + +export declare const radii: number[]; + +export declare const Radio: React_2.FC; + +export declare function RadioCheckToggleCard(props: RadioCheckToggleCardProps): React_2.JSX.Element; + +export declare namespace RadioCheckToggleCard { + var displayName: string; + var defaultProps: { + cardType: "toggle" | "checkbox" | "radio"; + isTitleBold: boolean; + hPosition: "left" | "right"; + vPosition: "center" | "top"; + isTakingFullHeightOfCard: boolean; + onChange: () => void; + }; +} + +export declare type RadioCheckToggleCardProps = { + children?: React_2.ReactNode | string; + cardType?: TCardTypes; + hPosition?: THPositions; + vPosition?: TVPositions; + isTakingFullHeightOfCard?: boolean; + title: string; + isTitleBold?: boolean; + name: string; + value: string; + onChange?: (e: React_2.ChangeEvent) => void; + isSelected: boolean; +}; + +export declare type RadioProps = React_2.InputHTMLAttributes & { + size?: number; + color?: PaletteFamilyName; + onClick?: (unknown: any) => unknown; +}; + +export declare const radius = "2px"; + +export declare const RatingBadge: React_2.FC; + +export declare type RatingBadgeProps = BoxProps & { + bg?: string; + color?: string; + fontWeight?: string; +}; + +export declare const regular = 500; + +export declare const RelatedComponent: ({ name, desc, children, onClick }: RelatedComponentProps) => React_2.JSX.Element; + +export declare const RelatedComponentContainer: ({ children }: RelatedComponentContainerProps) => React_2.JSX.Element; + +export declare type RelatedComponentContainerProps = { + children: React_2.ReactNode; +}; + +export declare type RelatedComponentProps = { + name: string; + desc?: string; + onClick?: () => void; + children: React_2.ReactNode; +}; + +export declare const Relative: React_2.FC; + +export declare type RelativeProps = TopProps & RightProps & BottomProps & LeftProps & ZIndexProps & BoxProps; + +declare const rounded: string[]; + +export declare const roundedValues: string[]; + +export declare const Section: ({ heading, children }: SectionProps) => React_2.JSX.Element; + +export declare type SectionProps = { + heading: string; + children: React_2.ReactNode; +}; + +export declare const Select: React_2.FC & { + isField?: boolean; +}; + +export declare type SelectProps = SpaceProps & FontSizeProps & Omit, 'size'> & { + children?: React_2.ReactNode; + color?: PaletteColor; + borderRadius?: BorderRadius; + size?: keyof typeof sizes_2; + ref?: React_2.Ref>; +}; + +export declare function ShadowEffect({ shouldCloseOnBlur, shouldOpenOnFocus, zIndex, children, onClose, onOpen, ...props }: ShadowEffectProps): React_2.JSX.Element; + +export declare type ShadowEffectProps = { + shouldCloseOnBlur?: boolean; + shouldOpenOnFocus?: boolean; + zIndex?: number | string; + children?: React_2.ReactNode; + onClose?: () => void; + onOpen?: () => void; +}; + +export declare const ShadowOverlay: any; + +export declare const shadows: { + sm: string; + md: string; + lg: string; + xl: string; + '2xl': string; + 'overlay-md': string; + 'overlay-lg': string; + 'overlay-xl': string; +}; + +declare const shadows_2: string[]; + +export declare function Shimmer({ animationWidth, disable, ...props }: ShimmerProps): JSX.Element; + +export declare namespace Shimmer { + var defaultProps: { + animationWidth: number; + disable: boolean; + variation: VariationType; + }; +} + +export declare type ShimmerProps = BoxProps & { + animationWidth?: number; + className?: string; + disable?: boolean; + variation?: ShimmerVariation; +}; + +declare type ShimmerVariation = 'base' | 'light' | 'dark'; + +declare type Sizes = 'small' | 'medium' | 'large' | 'extraLarge'; + +declare const sizes: { + small: any; + medium: any; + large: any; +}; + +declare const sizes_2: { + sm: any; + md: any; + lg: any; + xl: any; +}; + +export declare function SkipMenu({ className, skipLinks, ...props }: SkipMenuProps): React_2.JSX.Element; + +export declare namespace SkipMenu { + var displayName: string; +} + +export declare type SkipMenuProps = { + className?: string; + skipLinks?: { + label: string; + targetId: string; + }[]; +}; + +export declare function SlideBox({ children, visibleSlides, onSlideChange, slideSpacing, stretchHeight, layout, currentSlideOverride, arrowSizeOverride, arrowButtonVariation, arrowPosition, slideScrollNum, mobileSlideScrollNum, }: SlideBoxProps): JSX.Element; + +export declare type SlideBoxProps = { + children?: React_2.ReactNode | string; + visibleSlides?: Array | number; + onSlideChange?: (unknown: 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; +}; + +export declare const space: string[]; + +declare const spaceArgs: {}; + +declare const speeds: { + slow: number; + medium: number; + fast: number; +}; + +export declare function Spinner({ children, color, useGradient, ...props }: SpinnerProps): React_2.JSX.Element; + +export declare namespace Spinner { + var defaultProps: { + color: string; + size: string; + }; +} + +export declare type SpinnerProps = { + children?: React_2.ReactNode; + color?: PaletteFamilyName; + size?: SpinnerSizes | SpinnerSizes[]; + useGradient?: boolean; +}; + +declare type SpinnerSizes = 'small' | 'medium' | 'large' | number; + +export declare const SrOnly: any; + +export declare const Stamp: React_2.FC; + +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; +}; + +export declare function Step({ className, active, completed, children, onClick, ...props }: StepProps): React_2.ReactElement; + +export declare namespace Step { + var displayName: string; + var defaultProps: { + className: string; + active: boolean; + completed: boolean; + }; +} + +export declare function Stepper({ className, children, ...props }: StepperProps): React_2.ReactElement; + +export declare namespace Stepper { + var Step: any; +} + +export declare type StepperProps = { + className?: string; + children?: React_2.ReactNode; +}; + +export declare type StepProps = { + className?: string; + active?: boolean; + completed?: boolean; + children?: React_2.ReactNode | string; + onClick?: (unknown: any) => unknown; +}; + +declare namespace storybookArgs { + export { + colorSchemeNames_2 as colorSchemeNames, + colors_2 as colors, + borderRadii_2 as borderRadii, + borderStyles, + rounded, + shadows_2 as shadows, + textStyles_2 as textStyles, + inputArgs, + spaceArgs, + fontSizes_2 as fontSizes, + objectFits, + objectPositions, + zIndicies, + chipWithShadowVariationArgs + } +} +export { storybookArgs } + +export declare const StoryHeading: ({ storyName, storyTitle }: StoryHeadingProps) => React_2.JSX.Element; + +export declare type StoryHeadingProps = { + storyName: string; + storyTitle: string; +}; + +export declare const StoryStage: ({ children, ...rest }: StoryStageProps) => React_2.JSX.Element; + +export declare type StoryStageProps = { + children: React_2.ReactNode; + [x: string]: unknown; +}; + +export declare function Swatch({ colors, onClick, ...props }: SwatchProps): React_2.ReactElement; + +export declare namespace Swatch { + var displayName: string; +} + +export declare type SwatchProps = { + colors: string[]; + onClick?: (color: string) => void; +}; + +export declare const TableOfContents: ({ links }: TableOfContentsProps) => React_2.JSX.Element; + +export declare type TableOfContentsProps = { + links: string[]; +}; + +declare const tabSpacingSize: { + xsm: string; + sm: string; + md: string; + lg: string; + xl: string; +}; + +declare type TCardTypes = (typeof cardTypes)[number]; + +declare const Text_2: any; +export { Text_2 as Text } + +export declare function textAlignAttrs(props: any): { + textAlign: any; +}; + +export declare const TextArea: React_2.FC & { + isField?: boolean; +}; + +export declare type TextAreaProps = SpaceProps & React_2.TextareaHTMLAttributes & React_2.RefAttributes & { + 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; +}; + +export declare const textShadows: { + sm: string; + md: string; +}; + +/** @public */ +export declare type TextStyle = { + fontWeight: number; + fontSize: string; + lineHeight: string; +}; + +export declare const textStyles: any; + +declare const textStyles_2: string[]; + +export declare const textStylesValues: string[]; + +export declare const textTransform: (props: any) => { + textTransform: any; +}; + +export declare const textTransformValues: string[]; + +export declare const textWrap: (props: any) => { + textWrap: any; +}; + +export declare const textWrapValues: string[]; + +export declare const theme: any; + +export declare const ThemeProvider: React_2.FC; + +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[]; +}; + +declare type THPositions = (typeof hPositions)[number]; + +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; +}; + +export declare function Toast({ children, color, hideClose, icon, id, lifespan, variation, onRemoveClick, ...props }: ToastProps): React_2.JSX.Element; + +declare type ToastContextProps = { + addToast: (options: ToastOptions) => void; + removeToast: (id: number) => void; +}; + +declare type ToastOptions = ToastProps & { + enterAnimation?: MotionVariant; + exitAnimation?: MotionVariant; + removed?: boolean; +}; + +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; + +export declare const ToastProvider: any; + +export declare type ToastProviderProps = { + children: React_2.ReactNode; + domRootId?: string; + enterAnimation?: MotionVariant; + exitAnimation?: MotionVariant; + lifespan?: number; + maxToasts?: number; + theme: unknown; +}; + +export declare function Toggle({ isOn, label, onToggle, disabled, height, icon, name, }: ToggleProps): React_2.ReactElement; + +export declare namespace Toggle { + var displayName: string; + var defaultProps: { + isOn: boolean; + height: number; + }; +} + +export declare const ToggleBadge: React_2.FC; + +export declare type ToggleBadgeProps = { + borderRadius?: string; + selected?: boolean; + color?: string; + bg?: string; + unSelectedBg?: string; +} & SpaceProps & FontSizeProps & React_2.HTMLAttributes & React_2.RefAttributes; + +export declare type ToggleProps = { + isOn?: boolean; + label?: string; + onToggle?: (unknown: any) => unknown; + disabled?: boolean; + width?: string; + height?: number; + icon?: React_2.ReactNode; + name?: string; +}; + +export declare const Tooltip: any; + +export declare type TooltipProps = { + children?: React_2.ReactNode; + bg?: PaletteColor; + color?: PaletteColor; + bottom?: boolean; + top?: boolean; + center?: boolean; + left?: boolean; + right?: boolean; + zIndex?: number | string; +}; + +declare type TransitionVariant = 'default' | 'spring' | 'comeAndGo' | 'slow'; + +export declare const Truncate: any; + +declare type TVPositions = (typeof vPositions)[number]; + +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; + }; +}; + +export declare function typographyAttrs(props: any): any; + +export declare const useToast: () => ToastContextProps; + +declare const variationNames: string[]; + +declare type Variations = 'fill' | 'link' | 'outline' | 'plain' | 'subtle' | 'white' | 'lightFill' | 'input'; + +declare type Variations_2 = 'outline' | 'shadow'; + +declare enum VariationType { + Base = "base", + Light = "light", + Dark = "dark" +} + +declare const vPositions: readonly ["top", "center"]; + +export declare type ZIndex = number | ZIndexStrings; + +export declare type ZIndexStrings = 'auto' | 'absolute' | 'dropdown' | 'sticky' | 'fixed' | 'overlay' | 'onOverlay' | 'offCanvas' | 'modal' | 'popover' | 'tooltip'; + +export declare type ZIndices = Record; + +export declare const zIndices: ZIndices; + +declare const zIndicies: ZIndices; + +export { } +/// + +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 { 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 { GridProps as GridProps_2 } from 'styled-system'; +import { HeightProps } from 'styled-system'; +import { HTMLMotionProps } from 'framer-motion'; +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 { MutableRefObject } 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 { RefObject } from 'react'; +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 { 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, ...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; +}; + +/** + * @public + */ +export declare type AccordionProps = SpaceProps & { + items: AccordionItemProps[]; + itemsState?: string | string[]; + onToggle?: (value: string | string[]) => void; + type?: string; + variation?: string; + isExternallyControlled?: boolean; + headerDividerColor?: string; +}; + +/** + * @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.FC; + +/** + * @public + */ +export declare type BadgeProps = SpaceProps & React.HtmlHTMLAttributes & { + size?: 'small' | 'medium'; + color?: string; + bg?: string; + borderRadius?: string; + colorScheme?: ColorSchemeName; + textTransform?: string; +}; + +/** + * @public + */ +export declare function Banner(props: BannerProps): React_2.ReactElement; + +export declare namespace Banner { + var displayName: string; + var defaultProps: { + textAlign: string; + showIcon: boolean; + color: string; + }; +} + +/** + * @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': any; + ':focus': { + outline: number; + 'border-color': any; + 'box-shadow': string; + }; +}; + +/** + * @public + */ +export declare const Box: React_2.FC; + +/** + * @public + */ +export declare type BoxProps = BorderRadiusProps & BoxShadowProps & DisplayProps & HeightProps & MaxHeightProps & MaxWidthProps & MinHeightProps & MinWidthProps & OverflowProps & SizeProps & SpaceProps & TextAlignProps & WidthProps & React_2.HTMLAttributes & { + children?: React_2.ReactNode | string; + as?: unknown; + role?: string; + bg?: string; + color?: string; + className?: string; + borderRadiusSize?: 'none' | 'xsm' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full' | 'action-sm' | 'action-md' | 'action-lg'; + boxShadowSize?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'overlay-lg' | 'overlay-xl'; + boxShadowColor?: 'primary' | 'secondary' | 'text' | 'highlight' | 'success' | 'error' | 'warning' | 'alert' | 'caution' | 'notify' | 'pricePrimary' | 'priceSecondary' | 'promoPrimary' | 'promoSecondary' | 'border' | 'background'; + colorScheme?: ColorSchemeName; + onClick?: (unknown: any) => unknown; + ref?: MutableRefObject; + rounded?: '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?: (unknown: any) => unknown; +}; + +/** + * @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 = SpaceProps & FontSizeProps & { + BridgeIcon?: IconComponent; + bridgeLabel?: string; + children?: React_2.ReactNode; + color?: string; + disabled?: boolean; + expanded?: boolean; + facet?: string; + Icon?: IconComponent; + id?: string; + label?: string; + selected?: boolean; + showActionIcon?: boolean; + onClick?: (unknown: any) => unknown; + width?: string; + variation?: ButtonChipVariation; +}; + +/** + * @public + */ +export declare type ButtonChipVariation = 'outline' | 'shadow'; + +/** + * @public + */ +export declare type ButtonProps = WidthProps & HeightProps & SpaceProps & BoxShadowProps & React_2.ButtonHTMLAttributes & React_2.RefAttributes & { + color?: string; + variation?: ButtonVariations; + size?: ButtonSizes | ButtonSizes[]; + borderRadius?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full' | ''; + boxShadowSize?: '' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'overlay-md' | 'overlay-lg' | 'overlay-xl'; + autoFocus?: boolean; + IconLeft?: React_2.Component; + IconRight?: React_2.Component; + flexProps?: FlexProps; + onClick?: (unknown: any) => unknown; + onFocus?: (unknown: any) => unknown; + onMouseEnter?: (unknown: any) => unknown; +}; + +/** + * @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.FC; + +/** + * @public + */ +export declare type CheckboxProps = React_2.InputHTMLAttributes & { + id: string; + indeterminate?: boolean; + size?: number; + onChange?: (e: React_2.ChangeEvent) => void; + color?: string; + checked?: boolean; + defaultChecked?: boolean; + disabled?: boolean; + ref?: React_2.Ref; + unselectedColor?: string; +}; + +/** + * @public + */ +export declare function ChipContent({ disabled, selected, children, label, Icon, IconTitle, facet, action, image, size, bridgeLabel, BridgeIcon, variation, topLabel, borderRadius, justifyContent, ...props }: ChipContentProps): React_2.ReactElement; + +export declare namespace ChipContent { + var defaultProps: { + BridgeIcon: any; + size: string; + color: string; + py: number; + m: number; + }; + 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?: string; + 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, disabled, selected, children, onClick, label, variation, width, value, ...props }: ChoiceChipProps): React_2.ReactElement; + +export declare namespace ChoiceChip { + var displayName: string; + var defaultProps: { + color: string; + variation: string; + }; +} + +/** + * @public + */ +export declare type ChoiceChipProps = SpaceProps & FontSizeProps & React_2.HTMLAttributes & { + 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, ...props }: CloseButtonProps) => 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; +}; + +/** @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 = { + 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, headerIcon, headerShowCloseButton, hugColor, open, scrimColor, scrimDismiss, sheet, showCloseButton, size, triggerNode, zIndex, overflowX, overflowY, onOpenChange, showScrollShadow, }: 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; + headerIcon?: React_2.ReactNode; + headerShowCloseButton?: boolean; + hugColor?: PaletteColor; + 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; +}; + +/** @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; + +export declare namespace DotLoader { + var defaultProps: { + color: string; + size: string; + speed: string; + }; +} + +/** + * @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; +}; + +/** + * @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, disabled, selected, children, onClick, label, showActionIcon, actionTitle, value, variation, ...props }: FilterChipProps): React_2.ReactElement; + +declare namespace FilterChip { + var displayName: string; + var defaultProps: { + color: string; + actionTitle: string; + variation: 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 | string; + 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, ...props }: FloatingActionButtonProps): JSX.Element; + +/** + * @public + */ +export declare type FloatingActionButtonProps = AbsoluteProps & { + hasNotification?: boolean; + icon: React_2.Component; + tooltip?: string; + onClick: () => void; +}; + +/** + * @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, buttonClick, buttonSize, buttonVariation, ctaText, fontSize, heading, iconLeft, iconRight, imageLeft, justifyContent, linkVariation, linkColor, text, URLProps, ...props }: GenericBannerProps): React_2.JSX.Element; + +export declare namespace GenericBanner { + var defaultProps: { + alignItems: string; + buttonVariation: string; + fontSize: number[]; + justifyContent: string; + linkColor: string; + linkVariation: string; + borderRadius: string; + }; +} + +/** + * @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 const getPaletteColor: (...args: any[]) => (props: any) => any; + +/** + * 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) => any; + +/** + * @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, color, p, fontSize, icon, iconDisplay, colorScheme, ...props }: HugProps): React_2.ReactElement; + +export declare namespace Hug { + var defaultProps: { + borderRadius: string; + borderWidth: number; + color: string; + fontSize: number; + p: number; + }; +} + +/** + * @public + */ +export declare type HugProps = CardProps & { + children?: React_2.ReactNode; + iconDisplay?: string[]; + icon?: React_2.ReactNode; + text?: React_2.ReactNode | React_2.ReactNode[] | string; + 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.FC & { + isIconButton?: boolean; +}; + +/** + * @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 & Partial> & { + borderRadiusSize?: string; + rounded?: string; + boxShadowSize?: string; + boxShadowColor?: string; + objectFit?: ObjectFit; + objectPosition?: ObjectPosition; +}; + +/** + * @public + */ +export declare const Input: React_2.FC & { + isField?: boolean; + HelperText?: React_2.FC; +}; + +/** + * @public + */ +export declare const InputGroup: React_2.FC; + +/** + * @public + */ +export declare type InputGroupProps = SpaceProps & { + borderColor?: PaletteFamilyName; + children?: React_2.ReactNode; +}; + +/** + * @public + */ +export declare type InputProps = SpaceProps & FontSizeProps & ZIndexProps & Omit, 'size'> & React_2.RefAttributes & { + children?: React_2.ReactNode; + onChange?: (unknown: any) => unknown; + helperText?: React_2.ReactElement>; + color?: string; + size?: 'sm' | 'md' | 'lg' | 'xl'; + borderRadius?: string; +}; + +/** + * @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 | string; + color?: string; + autoHide?: boolean; + nowrap?: boolean; + for?: string; + as?: unknown; + 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 = { + children: React_2.ReactElement | React_2.ReactElement[]; + gap?: LayoutGap; + rowGap?: LayoutGap; + variation?: LayoutVariation; + stretchHeight?: boolean; +}; + +/** + * @public + */ +export declare type LayoutVariation = (typeof ALLOWED_LAYOUT_VALUES)[number] | Array<(typeof ALLOWED_LAYOUT_VALUES)[number]>; + +/** + * @public + */ +export declare const lineHeights: { + standard: number; + display: number; +}; + +/** + * @public + */ +export declare const Link: React_2.FC; + +/** + * @public + */ +export declare type LinkProps = WidthProps & SpaceProps & React_2.AnchorHTMLAttributes & React_2.RefAttributes & { + children?: React_2.ReactNode | string; + color?: string; + disabled?: boolean; + href?: string; + size?: ButtonSizes | ButtonSizes[]; + target?: string; + variation?: ButtonVariations; + onClick?: React_2.MouseEventHandler; + onFocus?: React_2.FocusEventHandler; +}; + +/** + * @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 & React_2.HTMLAttributes & { + 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; + +export declare namespace Motion { + var defaultProps: { + variation: string; + }; +} + +/** + * @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'; + +/** + * @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 = `${PaletteColorPaletteFamily}.${PaletteColorPaletteFamilyOption}`; + +/** + * @public + */ +export declare type PaletteColorPaletteFamily = Array[number]; + +/** + * @public + */ +export declare type PaletteColorPaletteFamilyOption = Array[number]; + +/** + * @public + */ +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; + +export declare namespace PasswordInput { + var defaultProps: { + hasProgressBar: boolean; + progressBarSteps: { + color: string; + text: string; + }[]; + progressBarDefaultStep: number; + regexChecks: { + label: string; + regex: RegExp; + }[]; + }; +} + +/** + * @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(props: PlaceholderImageProps): React_2.JSX.Element; + +export declare namespace PlaceholderImage { + var displayName: string; + var defaultProps: { + ariaHidden: boolean; + blur: boolean; + height: string; + width: string; + }; +} + +/** + * @public + */ +export declare type PlaceholderImageProps = React_2.ImgHTMLAttributes & { + ariaHidden?: boolean; + blur?: boolean; + chooseSrc?: string; + height?: string; + width?: string; +}; + +/** + * @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; +} + +/** + * @public + */ +export declare function ProgressBar({ steps, currentStep, stepHeight, className }: ProgressBarProps): React_2.JSX.Element; + +export declare namespace ProgressBar { + var defaultProps: { + stepHeight: string; + }; +} + +/** + * @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(props: RadioCheckToggleCardProps): React_2.JSX.Element; + +export declare namespace RadioCheckToggleCard { + var displayName: string; + var defaultProps: { + cardType: "toggle" | "checkbox" | "radio"; + isTitleBold: boolean; + hPosition: "left" | "right"; + vPosition: "center" | "top"; + isTakingFullHeightOfCard: boolean; + onChange: () => void; + }; +} + +/** + * @public + */ +export declare const RadioCheckToggleCardCardTypes: readonly ["radio", "checkbox", "toggle"]; + +/** + * @public + */ +export declare const RadioCheckToggleCardHPositions: readonly ["left", "right"]; + +/** + * @public + */ +export declare type RadioCheckToggleCardProps = { + children?: React_2.ReactNode | string; + cardType?: TCardTypes; + hPosition?: THPositions; + vPosition?: TVPositions; + isTakingFullHeightOfCard?: boolean; + title: string; + isTitleBold?: boolean; + name: string; + value: string; + onChange?: (e: React_2.ChangeEvent) => void; + isSelected: boolean; +}; + +/** + * @public + */ +export declare const RadioCheckToggleCardVPositions: readonly ["top", "center"]; + +/** + * @public + */ +export declare type RadioProps = React_2.InputHTMLAttributes & { + size?: number; + color?: PaletteFamilyName; + onClick?: (unknown: any) => unknown; +}; + +/** + * @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.FC & { + isField?: boolean; +}; + +/** + * @public + */ +export declare type SelectProps = SpaceProps & FontSizeProps & Omit, 'size'> & { + children?: React_2.ReactNode; + color?: PaletteColor; + borderRadius?: BorderRadius; + size?: SelectSizes; + ref?: React_2.Ref>; +}; + +/** + * @public + */ +export declare type SelectSizes = keyof typeof selectSizes; + +/** + * @public + */ +export declare const selectSizes: { + sm: any; + md: any; + lg: any; + xl: any; +}; + +/** + * @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, ...props }: ShimmerProps): JSX.Element; + +export declare namespace Shimmer { + var defaultProps: { + animationWidth: number; + disable: boolean; + variation: ShimmerVariationType; + }; +} + +/** + * @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, }: SlideBoxProps): JSX.Element; + +/** + * @public + */ +export declare type SlideBoxProps = { + children?: React_2.ReactNode | string; + visibleSlides?: Array | number; + onSlideChange?: (unknown: 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; +}; + +export declare const space: string[]; + +/** + * @public + */ +export declare const spaceValues: number[]; + +/** + * @public + */ +export declare function Spinner({ children, color, useGradient, ...props }: SpinnerProps): React_2.JSX.Element; + +export declare namespace Spinner { + var defaultProps: { + color: string; + size: string; + }; +} + +/** + * @public + */ +export declare type SpinnerProps = { + children?: React_2.ReactNode; + color?: PaletteFamilyName; + 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; + var defaultProps: { + className: string; + active: boolean; + completed: boolean; + }; +} + +/** + * @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 | string; + onClick?: (unknown: any) => unknown; +}; + +/** + * @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; +}; + +/** + * @public + */ +export declare const TableOfContents: ({ links }: TableOfContentsProps) => React_2.JSX.Element; + +/** + * @public + */ +export declare type TableOfContentsProps = { + links: 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 & React_2.TextareaHTMLAttributes & React_2.RefAttributes & { + 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; + var defaultProps: { + isOn: boolean; + height: number; + }; +} + +/** + * @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 & React_2.HTMLAttributes & React_2.RefAttributes; + +/** + * @public + */ +export declare type ToggleProps = { + isOn?: boolean; + label?: string; + onToggle?: (unknown: any) => unknown; + disabled?: boolean; + width?: string; + height?: number; + icon?: React_2.ReactNode; + name?: string; +}; + +/** + * @public + */ +export declare const Tooltip: any; + +/** + * @public + */ +export declare type TooltipProps = { + children?: React_2.ReactNode; + bg?: PaletteColor; + color?: PaletteColor; + bottom?: boolean; + top?: boolean; + center?: boolean; + left?: boolean; + right?: 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 { } +/// + +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 { 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 { GridProps as GridProps_2 } from 'styled-system'; +import { HeightProps } from 'styled-system'; +import { HTMLMotionProps } from 'framer-motion'; +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 { MutableRefObject } 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 { RefObject } from 'react'; +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 { 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, ...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; +}; + +/** + * @public + */ +export declare type AccordionProps = SpaceProps & { + items: AccordionItemProps[]; + itemsState?: string | string[]; + onToggle?: (value: string | string[]) => void; + type?: string; + variation?: string; + isExternallyControlled?: boolean; + headerDividerColor?: string; +}; + +/** + * @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.FC; + +/** + * @public + */ +export declare type BadgeProps = SpaceProps & React.HtmlHTMLAttributes & { + size?: 'small' | 'medium'; + color?: string; + bg?: string; + borderRadius?: string; + colorScheme?: ColorSchemeName; + textTransform?: string; +}; + +/** + * @public + */ +export declare function Banner(props: BannerProps): React_2.ReactElement; + +export declare namespace Banner { + var displayName: string; + var defaultProps: { + textAlign: string; + showIcon: boolean; + color: string; + }; +} + +/** + * @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': any; + ':focus': { + outline: number; + 'border-color': any; + 'box-shadow': string; + }; +}; + +/** + * @public + */ +export declare const Box: React_2.FC; + +/** + * @public + */ +export declare type BoxProps = BorderRadiusProps & BoxShadowProps & DisplayProps & HeightProps & MaxHeightProps & MaxWidthProps & MinHeightProps & MinWidthProps & OverflowProps & SizeProps & SpaceProps & TextAlignProps & WidthProps & React_2.HTMLAttributes & { + children?: React_2.ReactNode | string; + as?: unknown; + role?: string; + bg?: string; + color?: string; + className?: string; + borderRadiusSize?: 'none' | 'xsm' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full' | 'action-sm' | 'action-md' | 'action-lg'; + boxShadowSize?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'overlay-lg' | 'overlay-xl'; + boxShadowColor?: 'primary' | 'secondary' | 'text' | 'highlight' | 'success' | 'error' | 'warning' | 'alert' | 'caution' | 'notify' | 'pricePrimary' | 'priceSecondary' | 'promoPrimary' | 'promoSecondary' | 'border' | 'background'; + colorScheme?: ColorSchemeName; + onClick?: (unknown: any) => unknown; + ref?: MutableRefObject; + rounded?: '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?: (unknown: any) => unknown; +}; + +/** + * @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 = SpaceProps & FontSizeProps & { + BridgeIcon?: IconComponent; + bridgeLabel?: string; + children?: React_2.ReactNode; + color?: string; + disabled?: boolean; + expanded?: boolean; + facet?: string; + Icon?: IconComponent; + id?: string; + label?: string; + selected?: boolean; + showActionIcon?: boolean; + onClick?: (unknown: any) => unknown; + width?: string; + variation?: ButtonChipVariation; +}; + +/** + * @public + */ +export declare type ButtonChipVariation = 'outline' | 'shadow'; + +/** + * @public + */ +export declare type ButtonProps = WidthProps & HeightProps & SpaceProps & BoxShadowProps & React_2.ButtonHTMLAttributes & React_2.RefAttributes & { + color?: string; + variation?: ButtonVariations; + size?: ButtonSizes | ButtonSizes[]; + borderRadius?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full' | ''; + boxShadowSize?: '' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'overlay-md' | 'overlay-lg' | 'overlay-xl'; + autoFocus?: boolean; + IconLeft?: React_2.Component; + IconRight?: React_2.Component; + flexProps?: FlexProps; + onClick?: (unknown: any) => unknown; + onFocus?: (unknown: any) => unknown; + onMouseEnter?: (unknown: any) => unknown; +}; + +/** + * @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.FC; + +/** + * @public + */ +export declare type CheckboxProps = React_2.InputHTMLAttributes & { + id: string; + indeterminate?: boolean; + size?: number; + onChange?: (e: React_2.ChangeEvent) => void; + color?: string; + checked?: boolean; + defaultChecked?: boolean; + disabled?: boolean; + ref?: React_2.Ref; + unselectedColor?: string; +}; + +/** + * @public + */ +export declare function ChipContent({ disabled, selected, children, label, Icon, IconTitle, facet, action, image, size, bridgeLabel, BridgeIcon, variation, topLabel, borderRadius, justifyContent, ...props }: ChipContentProps): React_2.ReactElement; + +export declare namespace ChipContent { + var defaultProps: { + BridgeIcon: any; + size: string; + color: string; + py: number; + m: number; + }; + 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?: string; + 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, disabled, selected, children, onClick, label, variation, width, value, ...props }: ChoiceChipProps): React_2.ReactElement; + +export declare namespace ChoiceChip { + var displayName: string; + var defaultProps: { + color: string; + variation: string; + }; +} + +/** + * @public + */ +export declare type ChoiceChipProps = SpaceProps & FontSizeProps & React_2.HTMLAttributes & { + 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, ...props }: CloseButtonProps) => 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; +}; + +/** @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 = { + 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, headerIcon, headerShowCloseButton, hugColor, open, scrimColor, scrimDismiss, sheet, showCloseButton, size, triggerNode, zIndex, overflowX, overflowY, onOpenChange, showScrollShadow, }: 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; + headerIcon?: React_2.ReactNode; + headerShowCloseButton?: boolean; + hugColor?: PaletteColor; + 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; +}; + +/** @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; + +export declare namespace DotLoader { + var defaultProps: { + color: string; + size: string; + speed: string; + }; +} + +/** + * @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; +}; + +/** + * @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, disabled, selected, children, onClick, label, showActionIcon, actionTitle, value, variation, ...props }: FilterChipProps): React_2.ReactElement; + +declare namespace FilterChip { + var displayName: string; + var defaultProps: { + color: string; + actionTitle: string; + variation: 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 | string; + 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, ...props }: FloatingActionButtonProps): JSX.Element; + +/** + * @public + */ +export declare type FloatingActionButtonProps = AbsoluteProps & { + hasNotification?: boolean; + icon: React_2.Component; + tooltip?: string; + onClick: () => void; +}; + +/** + * @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, buttonClick, buttonSize, buttonVariation, ctaText, fontSize, heading, iconLeft, iconRight, imageLeft, justifyContent, linkVariation, linkColor, text, URLProps, ...props }: GenericBannerProps): React_2.JSX.Element; + +export declare namespace GenericBanner { + var defaultProps: { + alignItems: string; + buttonVariation: string; + fontSize: number[]; + justifyContent: string; + linkColor: string; + linkVariation: string; + borderRadius: string; + }; +} + +/** + * @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 const getPaletteColor: (...args: any[]) => (props: any) => any; + +/** + * 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) => any; + +/** + * @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, color, p, fontSize, icon, iconDisplay, colorScheme, ...props }: HugProps): React_2.ReactElement; + +export declare namespace Hug { + var defaultProps: { + borderRadius: string; + borderWidth: number; + color: string; + fontSize: number; + p: number; + }; +} + +/** + * @public + */ +export declare type HugProps = CardProps & { + children?: React_2.ReactNode; + iconDisplay?: string[]; + icon?: React_2.ReactNode; + text?: React_2.ReactNode | React_2.ReactNode[] | string; + 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.FC & { + isIconButton?: boolean; +}; + +/** + * @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 & Partial> & { + borderRadiusSize?: string; + rounded?: string; + boxShadowSize?: string; + boxShadowColor?: string; + objectFit?: ObjectFit; + objectPosition?: ObjectPosition; +}; + +/** + * @public + */ +export declare const Input: React_2.FC & { + isField?: boolean; + HelperText?: React_2.FC; +}; + +/** + * @public + */ +export declare const InputGroup: React_2.FC; + +/** + * @public + */ +export declare type InputGroupProps = SpaceProps & { + borderColor?: PaletteFamilyName; + children?: React_2.ReactNode; +}; + +/** + * @public + */ +export declare type InputProps = SpaceProps & FontSizeProps & ZIndexProps & Omit, 'size'> & React_2.RefAttributes & { + children?: React_2.ReactNode; + onChange?: (unknown: any) => unknown; + helperText?: React_2.ReactElement>; + color?: string; + size?: 'sm' | 'md' | 'lg' | 'xl'; + borderRadius?: string; +}; + +/** + * @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 | string; + color?: string; + autoHide?: boolean; + nowrap?: boolean; + for?: string; + as?: unknown; + 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 = { + children: React_2.ReactElement | React_2.ReactElement[]; + gap?: LayoutGap; + rowGap?: LayoutGap; + variation?: LayoutVariation; + stretchHeight?: boolean; +}; + +/** + * @public + */ +export declare type LayoutVariation = (typeof ALLOWED_LAYOUT_VALUES)[number] | Array<(typeof ALLOWED_LAYOUT_VALUES)[number]>; + +/** + * @public + */ +export declare const lineHeights: { + standard: number; + display: number; +}; + +/** + * @public + */ +export declare const Link: React_2.FC; + +/** + * @public + */ +export declare type LinkProps = WidthProps & SpaceProps & React_2.AnchorHTMLAttributes & React_2.RefAttributes & { + children?: React_2.ReactNode | string; + color?: string; + disabled?: boolean; + href?: string; + size?: ButtonSizes | ButtonSizes[]; + target?: string; + variation?: ButtonVariations; + onClick?: React_2.MouseEventHandler; + onFocus?: React_2.FocusEventHandler; +}; + +/** + * @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 & React_2.HTMLAttributes & { + 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; + +export declare namespace Motion { + var defaultProps: { + variation: string; + }; +} + +/** + * @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'; + +/** + * @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 = `${PaletteColorPaletteFamily}.${PaletteColorPaletteFamilyOption}`; + +/** + * @public + */ +export declare type PaletteColorPaletteFamily = Array[number]; + +/** + * @public + */ +export declare type PaletteColorPaletteFamilyOption = Array[number]; + +/** + * @public + */ +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; + +export declare namespace PasswordInput { + var defaultProps: { + hasProgressBar: boolean; + progressBarSteps: { + color: string; + text: string; + }[]; + progressBarDefaultStep: number; + regexChecks: { + label: string; + regex: RegExp; + }[]; + }; +} + +/** + * @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(props: PlaceholderImageProps): React_2.JSX.Element; + +export declare namespace PlaceholderImage { + var displayName: string; + var defaultProps: { + ariaHidden: boolean; + blur: boolean; + height: string; + width: string; + }; +} + +/** + * @public + */ +export declare type PlaceholderImageProps = React_2.ImgHTMLAttributes & { + ariaHidden?: boolean; + blur?: boolean; + chooseSrc?: string; + height?: string; + width?: string; +}; + +/** + * @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; +} + +/** + * @public + */ +export declare function ProgressBar({ steps, currentStep, stepHeight, className }: ProgressBarProps): React_2.JSX.Element; + +export declare namespace ProgressBar { + var defaultProps: { + stepHeight: string; + }; +} + +/** + * @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(props: RadioCheckToggleCardProps): React_2.JSX.Element; + +export declare namespace RadioCheckToggleCard { + var displayName: string; + var defaultProps: { + cardType: "toggle" | "checkbox" | "radio"; + isTitleBold: boolean; + hPosition: "left" | "right"; + vPosition: "center" | "top"; + isTakingFullHeightOfCard: boolean; + onChange: () => void; + }; +} + +/** + * @public + */ +export declare const RadioCheckToggleCardCardTypes: readonly ["radio", "checkbox", "toggle"]; + +/** + * @public + */ +export declare const RadioCheckToggleCardHPositions: readonly ["left", "right"]; + +/** + * @public + */ +export declare type RadioCheckToggleCardProps = { + children?: React_2.ReactNode | string; + cardType?: TCardTypes; + hPosition?: THPositions; + vPosition?: TVPositions; + isTakingFullHeightOfCard?: boolean; + title: string; + isTitleBold?: boolean; + name: string; + value: string; + onChange?: (e: React_2.ChangeEvent) => void; + isSelected: boolean; +}; + +/** + * @public + */ +export declare const RadioCheckToggleCardVPositions: readonly ["top", "center"]; + +/** + * @public + */ +export declare type RadioProps = React_2.InputHTMLAttributes & { + size?: number; + color?: PaletteFamilyName; + onClick?: (unknown: any) => unknown; +}; + +/** + * @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.FC & { + isField?: boolean; +}; + +/** + * @public + */ +export declare type SelectProps = SpaceProps & FontSizeProps & Omit, 'size'> & { + children?: React_2.ReactNode; + color?: PaletteColor; + borderRadius?: BorderRadius; + size?: SelectSizes; + ref?: React_2.Ref>; +}; + +/** + * @public + */ +export declare type SelectSizes = keyof typeof selectSizes; + +/** + * @public + */ +export declare const selectSizes: { + sm: any; + md: any; + lg: any; + xl: any; +}; + +/** + * @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, ...props }: ShimmerProps): JSX.Element; + +export declare namespace Shimmer { + var defaultProps: { + animationWidth: number; + disable: boolean; + variation: ShimmerVariationType; + }; +} + +/** + * @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, }: SlideBoxProps): JSX.Element; + +/** + * @public + */ +export declare type SlideBoxProps = { + children?: React_2.ReactNode | string; + visibleSlides?: Array | number; + onSlideChange?: (unknown: 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; +}; + +export declare const space: string[]; + +/** + * @public + */ +export declare const spaceValues: number[]; + +/** + * @public + */ +export declare function Spinner({ children, color, useGradient, ...props }: SpinnerProps): React_2.JSX.Element; + +export declare namespace Spinner { + var defaultProps: { + color: string; + size: string; + }; +} + +/** + * @public + */ +export declare type SpinnerProps = { + children?: React_2.ReactNode; + color?: PaletteFamilyName; + 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; + var defaultProps: { + className: string; + active: boolean; + completed: boolean; + }; +} + +/** + * @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 | string; + onClick?: (unknown: any) => unknown; +}; + +/** + * @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; +}; + +/** + * @public + */ +export declare const TableOfContents: ({ links }: TableOfContentsProps) => React_2.JSX.Element; + +/** + * @public + */ +export declare type TableOfContentsProps = { + links: 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 & React_2.TextareaHTMLAttributes & React_2.RefAttributes & { + 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; + var defaultProps: { + isOn: boolean; + height: number; + }; +} + +/** + * @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 & React_2.HTMLAttributes & React_2.RefAttributes; + +/** + * @public + */ +export declare type ToggleProps = { + isOn?: boolean; + label?: string; + onToggle?: (unknown: any) => unknown; + disabled?: boolean; + width?: string; + height?: number; + icon?: React_2.ReactNode; + name?: string; +}; + +/** + * @public + */ +export declare const Tooltip: any; + +/** + * @public + */ +export declare type TooltipProps = { + children?: React_2.ReactNode; + bg?: PaletteColor; + color?: PaletteColor; + bottom?: boolean; + top?: boolean; + center?: boolean; + left?: boolean; + right?: 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 { } +import React from 'react'; +/** + * @public + */ +export type IconFieldProps = { + children: React.ReactNode; +}; +/** + * @public + */ +export declare function IconField(props: IconFieldProps): React.JSX.Element; +//# sourceMappingURL=IconField.d.ts.mapimport React from 'react'; +import { IconField } from './IconField'; +declare const _default: { + title: string; + component: typeof IconField; +}; +export default _default; +export declare const IconAndInput: () => React.JSX.Element; +export declare const InputAndIcon: () => React.JSX.Element; +export declare const InputWithMultipleIcons: () => React.JSX.Element; +export declare const InputAndIconButton: () => React.JSX.Element; +export declare const IconInputAndIcon: () => React.JSX.Element; +export declare const IconInputAndIconButton: () => React.JSX.Element; +export declare const IconAndSelect: () => React.JSX.Element; +//# sourceMappingURL=IconField.stories.d.ts.mapexport {}; +//# sourceMappingURL=IconField.spec.d.ts.mapimport React from 'react'; +/** + * @public + */ +export type PlaceholderImageProps = React.ImgHTMLAttributes & { + ariaHidden?: boolean; + blur?: boolean; + chooseSrc?: string; + height?: string; + width?: string; +}; +/** + * @public + */ +export declare function PlaceholderImage(props: PlaceholderImageProps): React.JSX.Element; +export declare namespace PlaceholderImage { + var displayName: string; + var defaultProps: { + ariaHidden: boolean; + blur: boolean; + height: string; + width: string; + }; +} +//# sourceMappingURL=PlaceholderImage.d.ts.mapexport {}; +//# sourceMappingURL=PlaceholderImage.spec.d.ts.mapexport {}; +//# sourceMappingURL=ToastProvider.spec.d.ts.mapimport React from 'react'; +declare const _default: { + title: string; + component: any; + argTypes: { + lifespan: { + description: string; + }; + variation: { + control: string; + options: string[]; + defaultValue: string; + }; + }; +}; +export default _default; +export declare const _ToastProvider: any; +export declare const TopAnimation: (args: any) => React.JSX.Element; +//# sourceMappingURL=ToastProvider.stories.d.ts.mapimport React from 'react'; +import { type MotionVariant } from '../Animate/Animate'; +import { type ToastProps } from '../Toast/Toast'; +/** + * @public + */ +export type ToastOptions = ToastProps & { + enterAnimation?: MotionVariant; + exitAnimation?: MotionVariant; + removed?: boolean; +}; +/** + * @public + */ +export type ToastContextProps = { + addToast: (options: ToastOptions) => void; + removeToast: (id: number) => void; +}; +export declare const ToastContext: React.Context; +/** + * @public + */ +export declare const useToast: () => ToastContextProps; +/** + * @public + */ +export type ToastProviderProps = { + children: React.ReactNode; + domRootId?: string; + enterAnimation?: MotionVariant; + exitAnimation?: MotionVariant; + lifespan?: number; + maxToasts?: number; + theme: unknown; + top?: number; + bottom?: number; +}; +/** + * @public + */ +export declare const ToastProvider: any; +//# sourceMappingURL=ToastProvider.d.ts.mapimport React from 'react'; +import { type AbsoluteProps } from '../Absolute/Absolute'; +/** + * @public + */ +export type FloatingActionButtonProps = AbsoluteProps & { + hasNotification?: boolean; + icon: React.Component; + tooltip?: string; + onClick: () => void; +}; +/** + * @public + */ +export declare function FloatingActionButton({ hasNotification, icon, tooltip, onClick, ...props }: FloatingActionButtonProps): JSX.Element; +//# sourceMappingURL=FloatingActionButton.d.ts.mapimport React from 'react'; +import { FloatingActionButton } from './FloatingActionButton'; +declare const _default: { + title: string; + component: typeof FloatingActionButton; + args: { + hasNotification: boolean; + icon: any; + tooltip: string; + }; + argTypes: { + onClick: { + action: boolean; + }; + }; + decorators: ((Story: any) => React.JSX.Element)[]; +}; +export default _default; +export declare const _FloatingActionButton: { + play: ({ args, canvasElement }: { + args: any; + canvasElement: any; + }) => Promise; + render: (args: any) => React.JSX.Element; +}; +export declare const WithNotification: { + render: (args: any) => React.JSX.Element; +}; +export declare const WithCarsIcon: { + render: (args: any) => React.JSX.Element; +}; +export declare const BottomRight: { + render: (args: any) => React.JSX.Element; +}; +//# sourceMappingURL=FloatingActionButton.stories.d.ts.mapexport declare const StyledButton: any; +export declare const NotificationDot: any; +//# sourceMappingURL=FloatingActionButton.styled.d.ts.mapimport React from 'react'; +declare const _default: { + title: string; + component: React.FC; +}; +export default _default; +export declare const Default: () => React.JSX.Element; +export declare const Colors: () => React.JSX.Element; +export declare const CompensatingFor1PxBorder: () => React.JSX.Element; +export declare const WrappedText: () => React.JSX.Element; +export declare const WithIcon: () => React.JSX.Element; +export declare const WithCustomPadding: () => React.JSX.Element; +//# sourceMappingURL=Flag.stories.d.ts.mapimport React from 'react'; +import { SpaceProps, WidthProps } from 'styled-system'; +import { ColorProp } from '../theme/theme'; +/** + * @public + */ +export type FlagProps = SpaceProps & WidthProps & { + children?: React.ReactNode; + color?: ColorProp; + bg?: ColorProp; +}; +/** + * @public + */ +export declare const Flag: React.FC; +//# sourceMappingURL=Flag.d.ts.mapexport {}; +//# sourceMappingURL=Flag.spec.d.ts.mapimport { HTMLMotionProps, Transition } from 'framer-motion'; +import React from 'react'; +/** + * @public + */ +export type TransitionVariant = 'default' | 'spring' | 'comeAndGo' | 'slow'; +/** + * @public + */ +export declare const TransitionVariants: Record; +/** + * @public + */ +export type MotionVariant = 'expandDown' | 'fadeIn' | 'growFromTopLeft' | 'pulse' | 'scaleFromCenter' | 'scaleFromTopLeft' | 'scaleOnHover' | 'scaleOnTap' | 'slideOutLeft' | 'slideInLeft' | 'slideInTop' | 'slideOutTop'; +/** + * @public + */ +export declare const MotionVariants: Record>; +/** + * @public + */ +export type AnimateProps = { + children: React.ReactNode; + variant: MotionVariant; + transition?: TransitionVariant; + override?: HTMLMotionProps<'div'>; +}; +/** + * @public + */ +export declare const Animate: (props: AnimateProps) => React.JSX.Element; +//# sourceMappingURL=Animate.d.ts.mapimport type { Meta, StoryObj } from '@storybook/react'; +import React from 'react'; +import { Animate } from './Animate'; +declare const meta: Meta; +export default meta; +type Story = StoryObj; +export declare const Playground: Story; +export declare const AnimatedListings: () => React.JSX.Element; +export declare const ComposedAnimations: () => React.JSX.Element; +//# sourceMappingURL=Animate.stories.d.ts.mapimport React from 'react'; +/** + * This is a demo component for Storybook that provides a ref to content using a render prop + */ +export default function ForwardRefsDemo({ refChild }: { + refChild: any; +}): React.JSX.Element; +//# sourceMappingURL=ForwardRefsDemo.d.ts.mapexport 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"]; +export declare const colors: string[]; +export declare const borderRadii: string[]; +export declare const borderStyles: string[]; +export declare const rounded: string[]; +export declare const shadows: string[]; +export declare const textStyles: string[]; +export declare const inputArgs: string[]; +export declare const spaceArgs: {}; +export declare const fontSizes: number[]; +export declare const objectFits: string[]; +export declare const objectPositions: string[]; +export declare const zIndicies: import("../../theme").ZIndices; +export declare const 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 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: import("../../theme").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; + })[]; +}; +//# sourceMappingURL=index.d.ts.mapimport React from 'react'; +import { PaletteColor } from '../theme/theme'; +/** + * @public + */ +export type TooltipProps = { + children?: React.ReactNode; + bg?: PaletteColor; + color?: PaletteColor; + bottom?: boolean; + top?: boolean; + center?: boolean; + left?: boolean; + right?: boolean; + zIndex?: number | string; +}; +/** + * @public + */ +export declare const Tooltip: any; +//# sourceMappingURL=Tooltip.d.ts.mapimport React from 'react'; +declare const _default: { + title: string; + component: any; + argTypes: { + borderRadius: { + name: string; + type: { + name: string; + }; + options: string[]; + description: string; + control: { + type: string; + }; + }; + }; +}; +export default _default; +export declare const TooltipComponent: any; +export declare const WithoutAnchors: () => React.JSX.Element; +export declare const WithAnchors: () => React.JSX.Element; +export declare const ColorSchemes: any; +//# sourceMappingURL=Tooltip.stories.d.ts.mapexport {}; +//# sourceMappingURL=Tooltip.spec.d.ts.mapexport declare const argTypes: { + borderRadius: { + name: string; + type: { + name: string; + }; + options: string[]; + description: string; + control: { + type: string; + }; + }; +}; +//# sourceMappingURL=Tooltip.stories.args.d.ts.mapimport { DotLoader } from './DotLoader'; +declare const _default: { + title: string; + component: typeof DotLoader; + args: { + size: string; + speed: string; + color: string; + }; + argTypes: { + size: { + name: string; + type: { + name: string; + required: boolean; + }; + description: string; + table: { + type: { + summary: string; + detail: string; + }; + defaultValue: { + summary: string; + }; + }; + control: { + type: string; + options: string[]; + }; + }; + speed: { + name: string; + type: { + name: string; + required: boolean; + }; + description: string; + table: { + type: { + summary: string; + detail: string; + }; + defaultValue: { + summary: string; + }; + }; + control: { + type: string; + options: string[]; + }; + }; + color: { + name: string; + type: { + name: string; + required: boolean; + }; + description: string; + table: { + type: { + summary: string; + detail: string; + }; + defaultValue: { + summary: string; + }; + }; + control: { + type: string; + options: string[]; + }; + }; + }; +}; +export default _default; +export declare const _DotLoader: any; +export declare const Fast: any; +export declare const Responsive: any; +//# sourceMappingURL=DotLoader.stories.d.ts.mapimport React from 'react'; +import { ColorName, PaletteColor, PaletteFamilyName } from '../theme/theme'; +/** + * @public + */ +export declare const dotLoaderSizes: { + small: any; + medium: any; + large: any; +}; +/** + * @public + */ +export type DotLoaderSizes = keyof typeof dotLoaderSizes | (keyof typeof dotLoaderSizes)[]; +/** + * @public + */ +export declare const dotLoaderSpeeds: { + slow: number; + medium: number; + fast: number; +}; +/** + * @public + */ +export type DotLoaderSpeeds = keyof typeof dotLoaderSpeeds; +/** + * @public + */ +export type DotLoaderProps = { + color?: ColorName | PaletteFamilyName | PaletteColor; + size?: DotLoaderSizes; + speed?: DotLoaderSpeeds; +}; +/** + * @public + */ +export declare function DotLoader({ color, size, speed, ...props }: DotLoaderProps): React.JSX.Element; +export declare namespace DotLoader { + var defaultProps: { + color: string; + size: string; + speed: string; + }; +} +//# sourceMappingURL=DotLoader.d.ts.mapexport declare const sizes: string[]; +export declare const speed: string[]; +export declare const defaultArgs: { + size: string; + speed: string; + color: string; +}; +export declare const argTypes: { + size: { + name: string; + type: { + name: string; + required: boolean; + }; + description: string; + table: { + type: { + summary: string; + detail: string; + }; + defaultValue: { + summary: string; + }; + }; + control: { + type: string; + options: string[]; + }; + }; + speed: { + name: string; + type: { + name: string; + required: boolean; + }; + description: string; + table: { + type: { + summary: string; + detail: string; + }; + defaultValue: { + summary: string; + }; + }; + control: { + type: string; + options: string[]; + }; + }; + color: { + name: string; + type: { + name: string; + required: boolean; + }; + description: string; + table: { + type: { + summary: string; + detail: string; + }; + defaultValue: { + summary: string; + }; + }; + control: { + type: string; + options: string[]; + }; + }; +}; +//# sourceMappingURL=DotLoader.stories.args.d.ts.mapexport {}; +//# sourceMappingURL=DotLoader.spec.d.ts.mapexport {}; +//# sourceMappingURL=Swatch.spec.d.ts.mapimport React from 'react'; +/** + * @public + */ +export type SwatchProps = { + colors: string[]; + onClick?: (color: string) => void; +}; +/** + * @public + */ +export declare function Swatch({ colors, onClick, ...props }: SwatchProps): React.ReactElement; +export declare namespace Swatch { + var displayName: string; +} +//# sourceMappingURL=Swatch.d.ts.mapimport React from 'react'; +import { Swatch } from './Swatch'; +declare const _default: { + title: string; + component: typeof Swatch; +}; +export default _default; +export declare const SingleColor: () => React.JSX.Element; +export declare const MultipleColors: () => React.JSX.Element; +export declare const Wrap: () => React.JSX.Element; +export declare const SelectColor: () => React.JSX.Element; +//# sourceMappingURL=Swatch.stories.d.ts.mapimport React, { MutableRefObject } from 'react'; +import { BorderRadiusProps, BoxShadowProps, DisplayProps, HeightProps, MaxHeightProps, MaxWidthProps, MinHeightProps, MinWidthProps, OverflowProps, SizeProps, SpaceProps, TextAlignProps, WidthProps } from 'styled-system'; +import type { ColorSchemeName } from '../theme/theme'; +/** + * @public + */ +export type BoxProps = BorderRadiusProps & BoxShadowProps & DisplayProps & HeightProps & MaxHeightProps & MaxWidthProps & MinHeightProps & MinWidthProps & OverflowProps & SizeProps & SpaceProps & TextAlignProps & WidthProps & React.HTMLAttributes & { + children?: React.ReactNode | string; + as?: unknown; + role?: string; + bg?: string; + color?: string; + className?: string; + borderRadiusSize?: 'none' | 'xsm' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full' | 'action-sm' | 'action-md' | 'action-lg'; + boxShadowSize?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'overlay-lg' | 'overlay-xl'; + boxShadowColor?: 'primary' | 'secondary' | 'text' | 'highlight' | 'success' | 'error' | 'warning' | 'alert' | 'caution' | 'notify' | 'pricePrimary' | 'priceSecondary' | 'promoPrimary' | 'promoSecondary' | 'border' | 'background'; + colorScheme?: ColorSchemeName; + onClick?: (unknown: any) => unknown; + ref?: MutableRefObject; + rounded?: 'top' | 'right' | 'bottom' | 'left' | 'topLeft' | 'topRight' | 'bottomRight' | 'bottomLeft'; +}; +/** + * @public + */ +export declare const Box: React.FC; +//# sourceMappingURL=Box.d.ts.mapexport {}; +//# sourceMappingURL=Box.spec.d.ts.mapimport React from 'react'; +declare const _default: { + title: string; + component: React.FC; + args: { + height: string; + width: string; + }; + argTypes: { + color: { + name: string; + type: { + name: string; + }; + options: string[]; + description: string; + control: { + type: string; + }; + }; + borderRadius: { + name: string; + type: { + name: string; + }; + options: string[]; + description: string; + control: { + type: string; + }; + }; + rounded: { + name: string; + type: { + name: string; + }; + options: string[]; + description: string; + control: { + type: string; + }; + }; + boxShadowSize: { + name: string; + type: { + name: string; + }; + options: string[]; + description: string; + control: { + type: string; + }; + }; + boxShadowColor: { + name: string; + type: { + name: string; + }; + options: string[]; + description: string; + table: { + type: { + summary: string; + }; + }; + control: { + type: string; + }; + }; + height: { + name: string; + type: { + name: string; + }; + description: string; + }; + width: { + name: string; + type: { + name: string; + }; + description: string; + }; + }; + parameters: { + docs: { + description: { + component: string; + }; + }; + }; +}; +export default _default; +export declare const _Box: any; +export declare const DisplayAndSize: any; +export declare const Padding: any; +export declare const Height: any; +export declare const MaxAndMinValues: any; +export declare const Margin: any; +export declare const Color: any; +export declare const BoxShadow: any; +export declare const Size: any; +export declare const Width: any; +export declare const PixelWidth: any; +export declare const VwWidth: any; +export declare const DirectionalPadding: () => React.JSX.Element; +export declare const DirectionalMargin: () => React.JSX.Element; +export declare const Overflow: () => React.JSX.Element; +export declare const ThemeUserCaseColorText: { + (): React.JSX.Element; + storyName: string; +}; +export declare const CustomColor: any; +export declare const ColorSchemes: any; +//# sourceMappingURL=Box.stories.d.ts.mapexport declare const defaultArgs: { + height: string; + width: string; +}; +export declare const argTypes: { + color: { + name: string; + type: { + name: string; + }; + options: string[]; + description: string; + control: { + type: string; + }; + }; + borderRadius: { + name: string; + type: { + name: string; + }; + options: string[]; + description: string; + control: { + type: string; + }; + }; + rounded: { + name: string; + type: { + name: string; + }; + options: string[]; + description: string; + control: { + type: string; + }; + }; + boxShadowSize: { + name: string; + type: { + name: string; + }; + options: string[]; + description: string; + control: { + type: string; + }; + }; + boxShadowColor: { + name: string; + type: { + name: string; + }; + options: string[]; + description: string; + table: { + type: { + summary: string; + }; + }; + control: { + type: string; + }; + }; + height: { + name: string; + type: { + name: string; + }; + description: string; + }; + width: { + name: string; + type: { + name: string; + }; + description: string; + }; +}; +//# sourceMappingURL=Box.stories.args.d.ts.mapexport {}; +//# sourceMappingURL=Truncate.spec.d.ts.map/** + * @public + */ +export declare const Truncate: any; +//# sourceMappingURL=Truncate.d.ts.mapimport React from 'react'; +declare const _default: { + title: string; + component: any; +}; +export default _default; +export declare const WithoutContainer: () => React.JSX.Element; +export declare const WithContainer: () => React.JSX.Element; +//# sourceMappingURL=Truncate.stories.d.ts.mapexport {}; +//# sourceMappingURL=Radio.spec.d.ts.mapimport React from 'react'; +declare const _default: { + title: string; + component: React.FC; +}; +export default _default; +export declare const _3States: () => React.JSX.Element; +export declare const _MockForm: () => React.JSX.Element; +export declare function ForwardRefs(): React.JSX.Element; +export declare const FontWeight: () => React.JSX.Element; +export declare const Colors: () => React.JSX.Element; +//# sourceMappingURL=Radio.stories.d.ts.mapimport React from 'react'; +import { type PaletteFamilyName } from '../theme/theme'; +/** + * @public + */ +export type RadioProps = React.InputHTMLAttributes & { + size?: number; + color?: PaletteFamilyName; + onClick?: (unknown: any) => unknown; +}; +/** + * @public + */ +export declare const Radio: React.FC; +//# sourceMappingURL=Radio.d.ts.mapimport React from 'react'; +declare const _default: { + title: string; + component: React.FC; +}; +export default _default; +export declare const CustomBreakpoints: () => React.JSX.Element[]; +//# sourceMappingURL=ThemeProvider.stories.d.ts.mapimport React from 'react'; +/** + * @public + */ +export declare const Base: any; +/** + * @public + */ +export 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.ReactNode; + customBreakpoints?: string[]; +}; +/** + * @public + */ +export declare const ThemeProvider: React.FC; +//# sourceMappingURL=ThemeProvider.d.ts.mapexport {}; +//# sourceMappingURL=ThemeProvider.spec.d.ts.mapexport {}; +//# sourceMappingURL=Card.spec.d.ts.mapexport declare const argTypes: unknown; +//# sourceMappingURL=Card.stories.args.d.ts.mapimport type { Meta, StoryObj } from '@storybook/react'; +import React from 'react'; +import { Card, type CardProps } from './Card'; +type CardStory = StoryObj; +export declare const Playground: CardStory; +export declare const ShowcaseCard: () => React.JSX.Element; +export declare const CardHousingButton: () => React.JSX.Element; +declare const meta: Meta; +export default meta; +//# sourceMappingURL=Card.stories.d.ts.mapimport React from 'react'; +import { BorderProps } from 'styled-system'; +import { type BoxProps } from '../Box/Box'; +/** + * @public + */ +export type CardProps = BoxProps & BorderProps & { + borderColor?: string; +}; +/** + * @public + */ +export declare const Card: React.FC; +//# sourceMappingURL=Card.d.ts.mapimport React from 'react'; +declare const _default: { + title: string; + component: React.FC & { + isField?: boolean; + HelperText?: React.FC; + }; + parameters: { + docs: { + description: { + component: string; + }; + }; + }; + argTypes: { + borderRadius: { + name: string; + type: { + name: string; + }; + options: string[]; + description: string; + control: { + type: string; + }; + }; + disabled: { + name: string; + type: { + name: string; + }; + defaultValue: boolean; + }; + readOnly: { + name: string; + type: { + name: string; + }; + defaultValue: boolean; + }; + size: { + name: string; + type: { + name: string; + }; + options: string[]; + description: string; + control: { + type: string; + }; + }; + }; +}; +export default _default; +export declare const InputComponent: any; +export declare const Disabled: () => React.JSX.Element; +export declare const ReadOnly: () => React.JSX.Element; +export declare const Colors: () => React.JSX.Element; +export declare const WithExternalLabel: () => React.JSX.Element; +export declare const WithHelperText: () => React.JSX.Element; +export declare const WithLabel: () => React.JSX.Element; +export declare function ForwardsRefs(): React.JSX.Element; +//# sourceMappingURL=Input.stories.d.ts.mapimport React from 'react'; +import { FontSizeProps, SpaceProps, ZIndexProps } from 'styled-system'; +import { type TextProps } from '../Text/Text'; +/** + * @public + */ +export type InputProps = SpaceProps & FontSizeProps & ZIndexProps & Omit, 'size'> & React.RefAttributes & { + children?: React.ReactNode; + onChange?: (unknown: any) => unknown; + helperText?: React.ReactElement>; + color?: string; + size?: 'sm' | 'md' | 'lg' | 'xl'; + borderRadius?: string; +}; +/** + * @public + */ +export declare const Input: React.FC & { + isField?: boolean; + HelperText?: React.FC; +}; +export type InputHelperTextProps = TextProps & { + children?: React.ReactNode; +}; +//# sourceMappingURL=Input.d.ts.mapexport {}; +//# sourceMappingURL=Input.spec.d.ts.mapexport declare const argTypes: { + borderRadius: { + name: string; + type: { + name: string; + }; + options: string[]; + description: string; + control: { + type: string; + }; + }; + disabled: { + name: string; + type: { + name: string; + }; + defaultValue: boolean; + }; + readOnly: { + name: string; + type: { + name: string; + }; + defaultValue: boolean; + }; + size: { + name: string; + type: { + name: string; + }; + options: string[]; + description: string; + control: { + type: string; + }; + }; +}; +//# sourceMappingURL=Input.stories.args.d.ts.mapimport React from 'react'; +import { Accordion } from './Accordion'; +declare const _default: { + title: string; + component: typeof Accordion; + argTypes: { + onToggle: { + action: boolean; + }; + p: { + options: any; + control: { + type: string; + }; + description: string; + }; + }; +}; +export default _default; +export declare const Basic: { + play: ({ args, canvasElement }: { + args: any; + canvasElement: any; + }) => Promise; + render: (args: any) => React.JSX.Element; +}; +export declare const Underlined: { + render: (args: any) => React.JSX.Element; +}; +export declare const Hug: { + render: (args: any) => React.JSX.Element; +}; +export declare const Ladder: { + render: (args: any) => React.JSX.Element; +}; +export declare const Card: { + render: (args: any) => React.JSX.Element; +}; +export declare const ItemStatePropCard: { + render: (args: any) => React.JSX.Element; +}; +export declare const FlatCard: { + render: (args: any) => React.JSX.Element; +}; +export declare const Singular: { + render: (args: any) => React.JSX.Element; +}; +export declare const ChevronClose: { + render: (args: any) => React.JSX.Element; +}; +export declare const TrackStateMultiple: { + render: (args: any) => React.JSX.Element; +}; +export declare const TrackStateSingular: { + play: ({ canvasElement }: { + canvasElement: any; + }) => Promise; + render: (args: any) => React.JSX.Element; +}; +export declare const HeaderWithFunction: { + render: (args: any) => React.JSX.Element; +}; +//# sourceMappingURL=Accordion.stories.d.ts.mapexport declare const StyledAccordionRoot: any; +export declare const StyledContent: any; +export declare const StyledTrigger: any; +export declare const StyledChevron: any; +export declare const IconContainer: any; +export interface IStyledItem { + variation: string; + headerBg?: string; + headerDividerColor?: string; +} +export declare const StyledItem: any; +//# sourceMappingURL=Accordion.styled.d.ts.mapimport React from 'react'; +import { SpaceProps } from 'styled-system'; +/** + * @public + */ +export type AccordionProps = SpaceProps & { + items: AccordionItemProps[]; + itemsState?: string | string[]; + onToggle?: (value: string | string[]) => void; + type?: string; + variation?: string; + isExternallyControlled?: boolean; + headerDividerColor?: string; +}; +/** + * @public + */ +export type AccordionItemProps = { + content: React.ReactNode; + headerActions?: React.ReactNode; + headerLabel?: React.ReactNode; + headerBg?: string; + value: string; +}; +/** + * @public + */ +export declare function Accordion({ items, itemsState, isExternallyControlled, onToggle, type, variation, p, headerDividerColor, ...props }: AccordionProps): React.ReactElement; +//# sourceMappingURL=Accordion.d.ts.mapimport { Layout } from './Layout'; +declare const _default: { + title: string; + component: typeof Layout; + argTypes: { + children: { + control: boolean; + }; + }; +}; +export default _default; +export declare const Basic: any; +export declare const ResponsiveSmall: any; +export declare const ResponsiveLarge: any; +export declare const Overlap: any; +export declare const Quarters: any; +export declare const Thirds: any; +export declare const Halves: any; +export declare const Uneven: any; +export declare const FullWidth: any; +//# sourceMappingURL=Layout.stories.d.ts.mapimport React from 'react'; +/** + * @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 ALLOWED_GAP_VALUES: readonly ["sm", "md", "lg", "xl"]; +/** + * @public + */ +export type LayoutGap = (typeof ALLOWED_GAP_VALUES)[number] | Array<(typeof ALLOWED_GAP_VALUES)[number]>; +/** + * @public + */ +export type LayoutVariation = (typeof ALLOWED_LAYOUT_VALUES)[number] | Array<(typeof ALLOWED_LAYOUT_VALUES)[number]>; +/** + * @public + */ +export type LayoutProps = { + children: React.ReactElement | React.ReactElement[]; + gap?: LayoutGap; + rowGap?: LayoutGap; + variation?: LayoutVariation; + stretchHeight?: boolean; +}; +/** + * @public + */ +export declare function Layout({ children, gap, rowGap, variation, stretchHeight, ...props }: LayoutProps): React.JSX.Element; +export declare namespace Layout { + var displayName: string; +} +//# sourceMappingURL=Layout.d.ts.mapexport {}; +//# sourceMappingURL=Layout.spec.d.ts.mapimport React from 'react'; +declare const _default: { + title: string; + component: any; +}; +export default _default; +export declare const ContainingBackgroundImage: () => React.JSX.Element; +export declare const ForwardRefs: () => React.JSX.Element; +export declare const CompositionWithoutContainer: () => React.JSX.Element; +//# sourceMappingURL=BlockLink.stories.d.ts.mapexport declare const BlockLink: any; +//# sourceMappingURL=BlockLink.d.ts.mapexport {}; +//# sourceMappingURL=BlockLink.spec.d.ts.mapimport { Meta } from '@storybook/react'; +import React from 'react'; +import { RatingBadge } from './RatingBadge'; +declare const meta: Meta; +export default meta; +export declare const Default: () => React.JSX.Element; +export declare const DeprecatedBgProp: () => React.JSX.Element; +export declare const MixBgAndColorProps: () => React.JSX.Element; +export declare const Colors: () => React.JSX.Element; +export declare const ColorSchemes: any; +//# sourceMappingURL=RatingBadge.stories.d.ts.mapimport React from 'react'; +import { type BoxProps } from '../Box/Box'; +/** + * @public + */ +export type RatingBadgeProps = BoxProps & { + bg?: string; + color?: string; + fontWeight?: string; +}; +/** + * @public + */ +export declare const RatingBadge: React.FC; +//# sourceMappingURL=RatingBadge.d.ts.mapexport {}; +//# sourceMappingURL=RatingBadge.spec.d.ts.mapexport declare function useScrollWithShadow(): { + boxShadow: undefined; + onScrollHandler: (event: any) => void; +}; +//# sourceMappingURL=useScrollWithShadow.d.ts.mapdeclare const _default: { + title: string; +}; +export default _default; +export declare const Basic: any; +//# sourceMappingURL=useScrollWithShadows.stories.d.ts.mapexport {}; +//# sourceMappingURL=Heading.spec.d.ts.mapimport React from 'react'; +declare const _default: { + title: string; + component: { + (props: any): React.JSX.Element; + displayName: string; + h1(props: any): React.JSX.Element; + h2(props: any): React.JSX.Element; + h3(props: any): React.JSX.Element; + h4(props: any): React.JSX.Element; + h5(props: any): React.JSX.Element; + h6(props: any): React.JSX.Element; + }; + parameters: { + docs: { + description: { + component: string; + }; + }; + }; +}; +export default _default; +export declare const HeadingComponent: () => React.JSX.Element; +export declare const UsingDotNotationWithH1H6: () => React.JSX.Element; +export declare const WithTextShadows: () => React.JSX.Element; +export declare const UsingTextProps: () => React.JSX.Element; +export declare const ColorSchemes: () => React.JSX.Element; +//# sourceMappingURL=Heading.stories.d.ts.mapimport React from 'react'; +export declare const Heading: { + (props: any): React.JSX.Element; + displayName: string; + h1(props: any): React.JSX.Element; + h2(props: any): React.JSX.Element; + h3(props: any): React.JSX.Element; + h4(props: any): React.JSX.Element; + h5(props: any): React.JSX.Element; + h6(props: any): React.JSX.Element; +}; +//# sourceMappingURL=Heading.d.ts.mapimport React from 'react'; +import { type FlexProps } from '../Flex/Flex'; +/** + * @public + */ +export type ToastProps = { + children: React.ReactNode; + hideClose?: boolean; + icon?: React.ReactElement; + id?: number; + lifespan?: number; + variation?: 'border' | 'fill'; + onRemoveClick?: (id: number) => void; +} & Omit; +/** + * @public + */ +export declare function Toast({ children, color, hideClose, icon, id, lifespan, variation, onRemoveClick, ...props }: ToastProps): React.JSX.Element; +//# sourceMappingURL=Toast.d.ts.mapexport {}; +//# sourceMappingURL=Toast.spec.d.ts.mapimport React from 'react'; +import { Toast } from './Toast'; +declare const _default: { + title: string; + component: typeof Toast; + args: { + children: string; + color: string; + }; + argTypes: {}; + decorators: ((Story: any) => React.JSX.Element)[]; +}; +export default _default; +export declare const _Toast: any; +export declare const _ColorScheme: any; +export declare const _ColorSchemeBorderVariation: any; +//# sourceMappingURL=Toast.stories.d.ts.mapexport declare const defaultArgs: { + children: string; + color: string; +}; +export declare const argTypes: {}; +//# sourceMappingURL=Toast.stories.args.d.ts.map/// +import { type FlexProps } from '../Flex/Flex'; +declare const variations: { + border: any; + fill: any; +}; +export type HeaderProps = FlexProps & { + iconUsesColorScheme: boolean; + variation?: keyof typeof variations; +}; +export declare const LeftBorderFlex: React.FC; +export declare const RoundIconButton: any; +export {}; +//# sourceMappingURL=Toast.styled.d.ts.mapexport {}; +//# sourceMappingURL=ChoiceChip.spec.d.ts.mapimport React from 'react'; +import { ChoiceChip } from './ChoiceChip'; +export declare const LabelOnly: () => React.JSX.Element; +export declare const NoTextWrap: () => React.JSX.Element; +export declare const WithIcon: () => React.JSX.Element; +export declare const WithFacet: () => React.JSX.Element; +export declare const WithIconAndFacet: () => React.JSX.Element; +export declare const IconOnly: () => React.JSX.Element; +export declare const WithImage: () => React.JSX.Element; +export declare const WithImageAndBridgeLabel: () => React.JSX.Element; +export declare const WithImageBridgeLabelAndTopLabel: () => React.JSX.Element; +export declare const ImageOnly: () => React.JSX.Element; +export declare const CustomChip: () => React.JSX.Element; +export declare const WithVariationShadow: () => React.JSX.Element; +export declare const Usage: () => React.JSX.Element; +declare const _default: { + title: string; + component: typeof ChoiceChip; +}; +export default _default; +//# sourceMappingURL=ChoiceChip.stories.d.ts.mapimport React from 'react'; +import { FontSizeProps, SpaceProps } from 'styled-system'; +/** + * @public + */ +export type ChoiceChipVariations = 'outline' | 'shadow'; +/** + * @public + */ +export type ChoiceChipProps = SpaceProps & FontSizeProps & React.HTMLAttributes & { + name?: string; + disabled?: boolean; + selected?: boolean; + label?: string; + value?: string | number; + variation?: ChoiceChipVariations; + topLabel?: string; + borderRadius?: string; + width?: string; + justifyContent?: string; +}; +/** + * @public + */ +export declare function ChoiceChip({ id, name, disabled, selected, children, onClick, label, variation, width, value, ...props }: ChoiceChipProps): React.ReactElement; +export declare namespace ChoiceChip { + var displayName: string; + var defaultProps: { + color: string; + variation: string; + }; +} +//# sourceMappingURL=ChoiceChip.d.ts.mapexport {}; +//# sourceMappingURL=FilterChip.spec.d.ts.mapimport React from 'react'; +import { FilterChip } from './FilterChip'; +export declare const LabelOnly: () => React.JSX.Element; +export declare const WithIcon: () => React.JSX.Element; +export declare const WithFacet: () => React.JSX.Element; +export declare const WithIconAndFacet: () => React.JSX.Element; +export declare const IconOnly: () => React.JSX.Element; +export declare const WithImage: () => React.JSX.Element; +export declare const WithImageAndBridgeLabel: () => React.JSX.Element; +export declare const ImageOnly: () => React.JSX.Element; +export declare const CustomChip: () => React.JSX.Element; +export declare const ToggleChip: () => React.JSX.Element; +export declare const WithVariationShadow: () => React.JSX.Element; +export declare const Usage: () => React.JSX.Element; +declare const _default: { + title: string; + component: typeof FilterChip; +}; +export default _default; +//# sourceMappingURL=FilterChip.stories.d.ts.mapimport React from 'react'; +import { FontSizeProps, SpaceProps } from 'styled-system'; +/** + * @public + */ +export type FilterChipVariation = 'outline' | 'shadow'; +/** + * @public + */ +export 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.ReactNode | string; + variation?: FilterChipVariation; +}; +/** + * @public + */ +export declare function FilterChip({ id, name, disabled, selected, children, onClick, label, showActionIcon, actionTitle, value, variation, ...props }: FilterChipProps): React.ReactElement; +export declare namespace FilterChip { + var displayName: string; + var defaultProps: { + color: string; + actionTitle: string; + variation: string; + }; +} +//# sourceMappingURL=FilterChip.d.ts.map/// +import { type BoxProps } from '../Box/Box'; +import { type ChipContentVariation } from './ChipContent/ChipContent'; +export type ChipContentWrapperProps = BoxProps & { + borderRadiusOverride?: string; + disabled: boolean; + hasChildren: boolean; + hasTopLabel: boolean; + justifyContent?: string; + selected: boolean; + variation: ChipContentVariation; +}; +export declare const ChipContentWrapper: React.FC; +//# sourceMappingURL=ChipContentWrapper.d.ts.mapexport {}; +//# sourceMappingURL=ChipContent.spec.d.ts.mapimport React from 'react'; +import { type BoxProps } from '../../Box/Box'; +/** + * @public + */ +export type ChipContentVariation = 'outline' | 'shadow'; +/** + * @public + */ +export type IconComponent = React.FC; +/** + * @public + */ +export type ChipContentProps = BoxProps & { + children?: React.ReactNode; + disabled?: boolean; + selected?: boolean; + label?: string; + Icon?: IconComponent; + IconTitle?: string; + facet?: string; + action?: { + Icon?: IconComponent; + title?: React.ReactNode; + }; + image?: React.ReactNode; + size?: string; + bridgeLabel?: string; + BridgeIcon?: IconComponent; + variation?: ChipContentVariation; + topLabel?: string; + borderRadius?: string; + justifyContent?: string; +}; +/** + * @public + */ +export declare function ChipContent({ disabled, selected, children, label, Icon, IconTitle, facet, action, image, size, bridgeLabel, BridgeIcon, variation, topLabel, borderRadius, justifyContent, ...props }: ChipContentProps): React.ReactElement; +export declare namespace ChipContent { + var defaultProps: { + BridgeIcon: any; + size: string; + color: string; + py: number; + m: number; + }; + var displayName: string; +} +//# sourceMappingURL=ChipContent.d.ts.mapexport declare const ChipLabel: any; +//# sourceMappingURL=index.d.ts.mapexport declare const ChipInput: any; +//# sourceMappingURL=index.d.ts.mapimport React from 'react'; +export declare const LabelOnly: () => React.JSX.Element; +export declare const LabelWithWidth: () => React.JSX.Element; +export declare const WithIcon: () => React.JSX.Element; +export declare const WithFacet: () => React.JSX.Element; +export declare const WithIconAndFacet: () => React.JSX.Element; +export declare const IconOnly: () => React.JSX.Element; +export declare const WithImage: () => React.JSX.Element; +export declare const WithImageAndBridgeLabel: () => React.JSX.Element; +export declare const ImageOnly: () => React.JSX.Element; +export declare const CustomChip: () => React.JSX.Element; +export declare const WithVariationShadow: () => React.JSX.Element; +declare const _default: { + title: string; + component: React.FC; +}; +export default _default; +//# sourceMappingURL=ButtonChip.stories.d.ts.mapexport {}; +//# sourceMappingURL=ButtonChip.spec.d.ts.mapimport React from 'react'; +import { FontSizeProps, SpaceProps } from 'styled-system'; +import { type IconComponent } from '../ChipContent/ChipContent'; +/** + * @public + */ +export type ButtonChipVariation = 'outline' | 'shadow'; +/** + * @public + */ +export type ButtonChipProps = SpaceProps & FontSizeProps & { + BridgeIcon?: IconComponent; + bridgeLabel?: string; + children?: React.ReactNode; + color?: string; + disabled?: boolean; + expanded?: boolean; + facet?: string; + Icon?: IconComponent; + id?: string; + label?: string; + selected?: boolean; + showActionIcon?: boolean; + onClick?: (unknown: any) => unknown; + width?: string; + variation?: ButtonChipVariation; +}; +/** + * @public + */ +export declare const ButtonChip: React.FC; +//# sourceMappingURL=ButtonChip.d.ts.mapimport React from 'react'; +import { type BoxProps } from '../Box/Box'; +export type SlideProps = BoxProps & { + onSlideChange: (index: number, numSlides: number) => void; + slideSpacing: number; + stretchHeight: boolean; + index: number; + content?: React.JSX.Element; + isCurrentSlide: boolean; + numSlides: number; + slideBoxRef: React.RefObject; +}; +export declare function Slide({ onSlideChange, slideSpacing, stretchHeight, index, content, isCurrentSlide, width, numSlides, slideBoxRef, }: SlideProps): JSX.Element; +//# sourceMappingURL=Slide.d.ts.mapimport React from 'react'; +export type RenderInViewProps = { + children: React.ReactNode; + onSlideChange: (index: number, numSlides: number) => void; + index: number; + slideRef?: React.RefObject; +}; +export declare function RenderInView({ children, onSlideChange, index, slideRef }: RenderInViewProps): JSX.Element; +//# sourceMappingURL=RenderInView.d.ts.mapexport {}; +//# sourceMappingURL=helpers.spec.d.ts.mapexport {}; +//# sourceMappingURL=Slide.spec.d.ts.mapexport {}; +//# sourceMappingURL=SlideBox.spec.d.ts.mapimport React from 'react'; +import { type ArrowPosition } from './Arrow'; +export type SlideBoxWrapperProps = { + arrowPosition?: ArrowPosition; + children: React.ReactNode; +}; +export declare function SlideBoxWrapper({ children, arrowPosition }: SlideBoxWrapperProps): JSX.Element; +//# sourceMappingURL=SlideBoxWrapper.d.ts.map/// +export type ArrowProps = { + isLeft?: boolean; + arrowButtonVariation?: 'fill' | 'link' | 'outline' | 'plain' | 'subtle' | 'white' | 'lightFill' | 'input'; + size?: string; + leftArrowClick?: (unknown: any) => void; + rightArrowClick?: (unknown: any) => void; + leftDisabled?: boolean; + rightDisabled?: boolean; + mr?: number; + ml?: number; +}; +export type ArrowPosition = 'top' | 'bottom' | 'side' | 'hide'; +export declare function Arrow({ isLeft, arrowButtonVariation, size, leftArrowClick, rightArrowClick, leftDisabled, rightDisabled, ...props }: ArrowProps): JSX.Element; +//# sourceMappingURL=Arrow.d.ts.mapexport declare const AbsoluteTransformLeft: any; +export declare const AbsoluteTransformRight: any; +export declare const ARROW_SIZES: { + sm: { + buttonSize: number; + iconSize: number; + }; + lg: { + buttonSize: number[]; + iconSize: number[]; + }; +}; +//# sourceMappingURL=Arrow.styled.d.ts.map/// +import { type ArrowProps } from './Arrow'; +export type BottomArrowsProps = { + arrowPosition: 'top' | 'bottom' | 'side' | 'hide'; + arrowProps: ArrowProps; +}; +export declare function BottomArrows({ arrowPosition, arrowProps }: BottomArrowsProps): JSX.Element; +//# sourceMappingURL=BottomArrows.d.ts.mapimport React from 'react'; +import { SlideBox } from './SlideBox'; +declare const _default: { + title: string; + component: typeof SlideBox; +}; +export default _default; +export declare const Default: () => React.JSX.Element; +export declare const NoStrechHeight: () => React.JSX.Element; +export declare const CustomLayout: () => React.JSX.Element; +//# sourceMappingURL=SlideBox.stories.d.ts.mapexport declare const getWidth: (visibleSlides: any) => string | number; +export declare const getVisibleSlides: (visibleSlides: any) => (string | number)[]; +export declare const getCustomWidths: (widths: any, index: any) => (string | number)[]; +//# sourceMappingURL=helpers.d.ts.mapexport {}; +//# sourceMappingURL=TestUseSlideBoxNav.spec.d.ts.map/// +declare const useSlideBoxNav: ({ onSlideChange, currentSlideOverride, arrowSizeOverride, arrowButtonVariation, arrowPosition, childArray, slideScrollNum, mobileSlideScrollNum, }: { + onSlideChange: any; + currentSlideOverride: any; + arrowSizeOverride: any; + arrowButtonVariation: any; + arrowPosition: any; + childArray: any; + slideScrollNum: any; + mobileSlideScrollNum: any; +}) => { + setCurrentSlide: import("react").Dispatch; + currentSlide: any; + slideInView: any; + onSlideChangeWrapper: (index: any, slideCount: any) => void; + arrowProps: { + leftDisabled: boolean; + rightDisabled: boolean; + arrowButtonVariation: any; + arrowPosition: any; + size: string; + leftArrowClick: () => void; + rightArrowClick: () => void; + }; +}; +export { useSlideBoxNav }; +//# sourceMappingURL=useSlideBoxNav.d.ts.mapimport React from 'react'; +import { type ArrowPosition } from './Arrow'; +/** + * @public + */ +export type SlideBoxProps = { + children?: React.ReactNode | string; + visibleSlides?: Array | number; + onSlideChange?: (unknown: 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; +}; +/** + * @public + */ +export declare function SlideBox({ children, visibleSlides, onSlideChange, slideSpacing, stretchHeight, layout, currentSlideOverride, arrowSizeOverride, arrowButtonVariation, arrowPosition, slideScrollNum, mobileSlideScrollNum, }: SlideBoxProps): JSX.Element; +//# sourceMappingURL=SlideBox.d.ts.mapdeclare const SlideWrapper: any; +declare const ScrollFlex: any; +export { ScrollFlex, SlideWrapper }; +//# sourceMappingURL=SlideBox.styled.d.ts.map/// +import { type ArrowPosition, type ArrowProps } from './Arrow'; +export type TopArrowsProps = { + arrowPosition: ArrowPosition; + arrowProps: ArrowProps; +}; +export declare function TopArrows({ arrowPosition, arrowProps }: TopArrowsProps): JSX.Element; +//# sourceMappingURL=TopArrows.d.ts.mapexport declare const colors: { + primary: string; + secondary: string; + text: string; + success: string; + error: string; + warning: string; + alert: string; + caution: string; + notify: string; + pricePrimary: string; + priceSecondary: string; + promoPrimary: string; + promoSecondary: string; + border: string; + background: string; +}; +//# sourceMappingURL=colors.d.ts.mapimport React from 'react'; +import { type MotionVariant } from '../../Animate/Animate'; +export declare const errorOptions: { + children: string; + color: string; + icon: React.JSX.Element; +}; +export declare const informationOptions: { + children: string; + color: string; + icon: React.JSX.Element; +}; +export declare const successOptions: { + children: string; + color: string; + icon: React.JSX.Element; +}; +export declare const customOptions: { + children: React.JSX.Element; + enterAnimation: MotionVariant; + exitAnimation: MotionVariant; + hideClose: boolean; + lifespan: number; +}; +export declare const MockToastChildren: ({ variation }: { + variation: 'border' | 'fill'; +}) => React.JSX.Element; +//# sourceMappingURL=toasts.d.ts.mapimport { type RenderResult } from '@testing-library/react'; +declare const customRender: (Element: any, any?: any) => RenderResult; +export * from '@testing-library/react'; +export { customRender as render }; +export declare const sleep: (ms: number) => Promise; +//# sourceMappingURL=testing-library.d.ts.mapimport '@testing-library/jest-dom'; +import 'jest-styled-components'; +//# sourceMappingURL=jest.setup.d.ts.mapimport type { Meta, StoryObj } from '@storybook/react'; +import { CloseButton, type CloseButtonProps } from './CloseButton'; +type CloseButtonStory = StoryObj; +declare const meta: Meta; +export default meta; +export declare const Playground: any; +export declare const NoVariant: CloseButtonStory; +export declare const VariantFilled: CloseButtonStory; +export declare const VariantWhite: CloseButtonStory; +export declare const OnColors: CloseButtonStory; +//# sourceMappingURL=CloseButton.stories.d.ts.mapimport React, { MouseEventHandler } from 'react'; +import { type BoxShadowSize, type IStyledSystemProps, type PaletteColor } from '../theme/theme'; +import { CloseButtonSize, CloseButtonVariant } from './CloseButton.styled'; +/** + * @public + */ +export type CloseButtonProps = IStyledSystemProps & { + animate?: boolean; + bgColor?: PaletteColor; + boxShadowSize?: BoxShadowSize; + className?: string; + color?: PaletteColor; + onClick?: MouseEventHandler; + size?: CloseButtonSize; + title?: string; + variant?: CloseButtonVariant; +}; +/** + * @public + */ +export declare const CloseButton: ({ animate, bgColor, boxShadowSize, className, color, onClick, size, title, variant, ...props }: CloseButtonProps) => React.JSX.Element; +//# sourceMappingURL=CloseButton.d.ts.mapexport {}; +//# sourceMappingURL=CloseButton.spec.d.ts.mapimport { ForwardRefComponent, HTMLMotionProps } from 'framer-motion'; +import React from 'react'; +import type { CloseButtonProps } from './CloseButton'; +/** @public */ +export declare const closeButtonSizes: readonly ["sm", "md", "lg"]; +/** @public */ +export type CloseButtonSize = (typeof closeButtonSizes)[number] | number; +/** @public */ +export type MotionButtonProps = HTMLMotionProps<'button'> & CloseButtonProps; +export declare const closeButtonIconSizes: Record; +export declare const filledVariationSizes: Record; +/** @public */ +export declare const closeButtonVariants: readonly ["filled", "white"]; +/** @public */ +export type CloseButtonVariant = (typeof closeButtonVariants)[number]; +export declare const closeButtonVariantProps: Record>; +export declare const MotionButton: ForwardRefComponent; +export declare const BackgroundAnimation: ForwardRefComponent>; +type CloseIconProps = { + size: CloseButtonSize; +} & React.SVGProps; +export declare const CloseIcon: ForwardRefComponent; +export {}; +//# sourceMappingURL=CloseButton.styled.d.ts.mapimport { ArgTypes } from '@storybook/react'; +import type { CloseButtonProps } from './CloseButton'; +export declare const argTypes: Partial>; +export declare const defaultArgs: Partial; +//# sourceMappingURL=CloseButton.stories.args.d.ts.mapexport {}; +//# sourceMappingURL=Checkbox.spec.d.ts.mapimport React from 'react'; +declare const _default: { + title: string; + component: React.FC; +}; +export default _default; +export declare const CheckboxStates: () => React.JSX.Element; +export declare const Color: () => React.JSX.Element; +export declare function ForwardRefs(): React.JSX.Element; +//# sourceMappingURL=Checkbox.stories.d.ts.mapimport React from 'react'; +/** + * @public + */ +export type CheckboxProps = React.InputHTMLAttributes & { + id: string; + indeterminate?: boolean; + size?: number; + onChange?: (e: React.ChangeEvent) => void; + color?: string; + checked?: boolean; + defaultChecked?: boolean; + disabled?: boolean; + ref?: React.Ref; + unselectedColor?: string; +}; +/** + * @public + */ +export declare const Checkbox: React.FC; +//# sourceMappingURL=Checkbox.d.ts.mapimport React from 'react'; +import { Step } from './Step'; +declare const _default: { + title: string; + component: typeof Step; + parameters: { + docs: { + description: { + component: string; + }; + }; + }; +}; +export default _default; +export declare const StepComponent: () => React.JSX.Element; +export declare const CurrentStep: () => React.JSX.Element; +export declare const CompletedStep: () => React.JSX.Element; +export declare const CurrentAndCompletedStep: () => React.JSX.Element; +export declare const ClickableStep: () => React.JSX.Element; +//# sourceMappingURL=Step.stories.d.ts.mapimport React from 'react'; +/** + * @public + */ +export type StepProps = { + className?: string; + active?: boolean; + completed?: boolean; + children?: React.ReactNode | string; + onClick?: (unknown: any) => unknown; +}; +/** + * @public + */ +export declare function Step({ className, active, completed, children, onClick, ...props }: StepProps): React.ReactElement; +export declare namespace Step { + var displayName: string; + var defaultProps: { + className: string; + active: boolean; + completed: boolean; + }; +} +//# sourceMappingURL=Step.d.ts.mapexport {}; +//# sourceMappingURL=Step.spec.d.ts.mapimport React from 'react'; +import { LabelProps } from './Label'; +declare const _default: { + title: string; + component: React.FC & { + isLabel?: boolean; + }; + args: { + children: string; + width: string; + }; + argTypes: { + color: { + name: string; + options: string[]; + mapping: { + primary: string; + secondary: string; + text: string; + success: string; + error: string; + warning: string; + alert: string; + caution: string; + notify: string; + pricePrimary: string; + priceSecondary: string; + promoPrimary: string; + promoSecondary: string; + border: string; + background: string; + }; + control: string; + }; + fontSize: { + name: string; + options: number[]; + control: string; + }; + width: { + name: string; + options: (string | number)[]; + control: string; + }; + onClick: { + name: string; + options: string[]; + mapping: { + noAction: any; + basicAction: import("@storybook/addon-actions/*").HandlerFunction; + }; + control: string; + }; + }; + parameters: { + docs: { + description: { + component: string; + }; + }; + }; +}; +export default _default; +export declare const _Label: any; +export declare const Spacing: () => React.JSX.Element; +export declare const HtmlFor: () => React.JSX.Element; +export declare const Nowrap: () => React.JSX.Element; +//# sourceMappingURL=Label.stories.d.ts.mapexport {}; +//# sourceMappingURL=Label.spec.d.ts.mapimport React from 'react'; +import { FontSizeProps, FontWeightProps, LineHeightProps, SpaceProps, TextStyleProps, WidthProps } from 'styled-system'; +/** + * @public + */ +export type LabelProps = SpaceProps & FontSizeProps & FontWeightProps & LineHeightProps & TextStyleProps & WidthProps & Partial> & { + children?: React.ReactNode | string; + color?: string; + autoHide?: boolean; + nowrap?: boolean; + for?: string; + as?: unknown; + onClick?: (evt: unknown) => void; +}; +/** + * @public + */ +export declare const Label: React.FC & { + isLabel?: boolean; +}; +//# sourceMappingURL=Label.d.ts.mapexport declare const defaultArgs: { + children: string; + width: string; +}; +export declare const argTypes: { + color: { + name: string; + options: string[]; + mapping: { + primary: string; + secondary: string; + text: string; + success: string; + error: string; + warning: string; + alert: string; + caution: string; + notify: string; + pricePrimary: string; + priceSecondary: string; + promoPrimary: string; + promoSecondary: string; + border: string; + background: string; + }; + control: string; + }; + fontSize: { + name: string; + options: number[]; + control: string; + }; + width: { + name: string; + options: (string | number)[]; + control: string; + }; + onClick: { + name: string; + options: string[]; + mapping: { + noAction: any; + basicAction: import("@storybook/addon-actions/*").HandlerFunction; + }; + control: string; + }; +}; +//# sourceMappingURL=Label.stories.args.d.ts.mapimport React from 'react'; +import { FormField } from './FormField'; +declare const _default: { + title: string; + component: typeof FormField; + args: { + disabled: boolean; + readOnly: boolean; + }; +}; +export default _default; +export declare const _FormField: any; +export declare const DisabledInputFormField: any; +export declare const ReadOnlyInputFormField: any; +export declare const DynamicLabel: () => React.JSX.Element; +export declare const DynamicLabelWithValue: () => React.JSX.Element; +export declare const IconToTheRight: () => React.JSX.Element; +export declare const WithSelect: () => React.JSX.Element; +export declare const WithDisabledSelect: () => React.JSX.Element; +export declare const WithReadOnlySelect: () => React.JSX.Element; +export declare const WithSuccessfulValidation: () => React.JSX.Element; +export declare const WithErrorTooltip: () => React.JSX.Element; +export declare const Usage: () => React.JSX.Element; +//# sourceMappingURL=FormField.stories.d.ts.mapimport React from 'react'; +import { type BoxProps } from '../Box/Box'; +/** + * @public + */ +export interface FormFieldProps extends BoxProps { + disabled?: boolean; + readOnly?: boolean; +} +/** + * @public + */ +export declare function FormField({ children, disabled, readOnly, ...props }: FormFieldProps): React.JSX.Element; +export declare namespace FormField { + var displayName: string; +} +//# sourceMappingURL=FormField.d.ts.mapexport {}; +//# sourceMappingURL=FormField.spec.d.ts.mapexport {}; +//# sourceMappingURL=Stepper.spec.d.ts.mapimport React from 'react'; +/** + * @public + */ +export type StepperProps = { + className?: string; + children?: React.ReactNode; +}; +/** + * @public + */ +export declare function Stepper({ className, children, ...props }: StepperProps): React.ReactElement; +export declare namespace Stepper { + var Step: any; +} +//# sourceMappingURL=Stepper.d.ts.mapimport React from 'react'; +import { Stepper } from './Stepper'; +declare const _default: { + title: string; + component: typeof Stepper; + parameters: { + docs: { + description: { + component: string; + }; + }; + }; +}; +export default _default; +export declare const Default: () => React.JSX.Element; +//# sourceMappingURL=Stepper.stories.d.ts.mapimport { type DesignSystemTheme } from '../theme/theme'; +/** + * 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; +//# sourceMappingURL=createTheme.d.ts.map/** + * @public + */ +export declare const roundedValues: string[]; +/** + * @public + */ +export declare const borderRadiusValues: string[]; +/** + * @public + */ +export declare function borderRadiusAttrs({ borderRadius, rounded, theme }: { + borderRadius: any; + rounded: any; + theme: any; +}): { + borderRadius?: undefined; +} | { + borderRadius: any; +}; +//# sourceMappingURL=borderRadiusAttrs.d.ts.mapexport {}; +//# sourceMappingURL=boxShadowAttrs.spec.d.ts.map/** + * @public + */ +export declare const textStylesValues: string[]; +/** + * @public + */ +export declare const textTransformValues: string[]; +/** + * @public + */ +export declare const textWrapValues: string[]; +/** + * @public + */ +export declare function typographyAttrs(props: any): any; +//# sourceMappingURL=typographyAttrs.d.ts.map/** + * @deprecated align prop is not supported since v5 + * @public + */ +export declare function textAlignAttrs(props: any): { + textAlign: any; +}; +//# sourceMappingURL=textAlignAttrs.d.ts.mapexport {}; +//# sourceMappingURL=typographyAttrs.spec.d.ts.mapexport {}; +//# sourceMappingURL=borderRadiusAttrs.spec.d.ts.map/** + * @public + */ +export declare const boxShadowSizeValues: string[]; +/** + * @public + */ +export declare function boxShadowAttrs(props: any): { + boxShadow?: undefined; +} | { + boxShadow: any; +}; +//# sourceMappingURL=boxShadowAttrs.d.ts.mapexport * from './borderRadiusAttrs'; +export * from './boxShadowAttrs'; +export * from './textAlignAttrs'; +export * from './typographyAttrs'; +//# sourceMappingURL=index.d.ts.map/** + * Create textStyles based on the passed in theme + * + * @param theme - The passed in theme + * + * @returns The generated textStyles + * + * @public + */ +export declare const createTextStyles: any; +//# sourceMappingURL=createTextStyles.d.ts.mapimport { ColorSchemes, PaletteFamilies } from '../theme'; +export declare const createColorScheme: ({ palette }: { + palette: PaletteFamilies; +}) => ColorSchemes; +//# sourceMappingURL=createColorScheme.d.ts.mapexport {}; +//# sourceMappingURL=utils.spec.d.ts.mapexport {}; +//# sourceMappingURL=createPalette.spec.d.ts.map/** + * @public + */ +export declare const objectFitValues: readonly ["contain", "cover", "unset"]; +/** + * @public + */ +export type ObjectFit = (typeof objectFitValues)[number]; +/** + * @public + */ +export declare function objectFit(): import("styled-system").styleFn; +//# sourceMappingURL=objectFit.d.ts.map/** + * @public + */ +export declare const objectPositionValues: readonly string[]; +/** + * @public + */ +export type ObjectPosition = (typeof objectPositionValues)[number]; +/** + * @public + */ +export declare function objectPosition(): import("styled-system").styleFn; +//# sourceMappingURL=objectPosition.d.ts.mapexport * from './objectFit'; +export * from './objectPosition'; +//# sourceMappingURL=index.d.ts.map/** + * 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; +/** + * @public + */ +export declare const deprecatedColorValue: () => (props: any, propName: any, componentName: any) => Error; +/** + * 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; +/** + * 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; +/** + * 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 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; +/** + * + * @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; +/** + * 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; +/** + * 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 const getPaletteColor: (...args: any[]) => (props: any) => any; +/** + * @public + */ +export declare const getValidPaletteColor: (color: any) => (props: any) => any; +/** + * 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 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 getByPalette: (props: any) => any; +/** + * @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 const borders: (props: any) => { + 'border-color': any; + ':focus': { + outline: number; + 'border-color': any; + 'box-shadow': string; + }; +}; +/** + * @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 const textTransform: (props: any) => { + textTransform: any; +}; +/** + * @public + */ +export declare const textWrap: (props: any) => { + textWrap: any; +}; +//# sourceMappingURL=utils.d.ts.map/** + * Create colorStyles based on the passed in theme + * + * @param theme - The passed in theme + * + * @returns - The generated colorStyles + * + * @public + */ +export declare const createColorStyles: any; +//# sourceMappingURL=createColorStyles.d.ts.mapexport {}; +//# sourceMappingURL=createColorStyles.spec.d.ts.map/** + * 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; +//# sourceMappingURL=createMediaQueries.d.ts.mapexport { createMediaQueries } from './createMediaQueries'; +//# sourceMappingURL=index.d.ts.mapexport {}; +//# sourceMappingURL=createMediaQueries.spec.d.ts.mapexport * from './utils'; +export * from './attrs'; +export * from './customStyles'; +export * from './createPalette'; +export { createColorStyles } from './createColorStyles'; +export { createTextStyles } from './createTextStyles'; +export { createMediaQueries } from './createMediaQueries'; +//# sourceMappingURL=index.d.ts.mapimport { type PaletteFamilies } from '../theme'; +/** + * 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; +//# sourceMappingURL=createPalette.d.ts.mapexport {}; +//# sourceMappingURL=createTextStyles.spec.d.ts.mapimport { KEY_FRAMES } from './Motion.keyframes'; +declare const VARIATION_DURATION: { + QUICK_GROW: { + rest: string; + animated: string; + }; + EXPAND_DOWN: { + rest: string; + animated: string; + }; +}; +declare const ACTION_KEY: { + true: string; + false: string; +}; +declare const VARIATION_EASING: { + GROW_XY: { + animated: string; + rest: string; + }; +}; +declare const EASING: { + animated: string; + rest: string; +}; +declare const DURATION: { + rest: string; + animated: string; +}; +export { KEY_FRAMES, ACTION_KEY, DURATION, VARIATION_DURATION, VARIATION_EASING, EASING }; +//# sourceMappingURL=constants.d.ts.mapimport React from 'react'; +/** + * @public + */ +export type MotionProps = { + children?: React.ReactNode; + isAnimatedState?: boolean; + variation?: string; +}; +/** + * @public + */ +export declare function Motion({ children, isAnimatedState, variation }: MotionProps): React.JSX.Element; +export declare namespace Motion { + var defaultProps: { + variation: string; + }; +} +//# sourceMappingURL=Motion.d.ts.mapdeclare const KEY_FRAMES: { + GROW_CENTER: { + rest: { + end: string; + }; + animated: { + start: string; + end: string; + }; + }; + QUICK_GROW: { + rest: { + start: string; + end: string; + }; + animated: { + start: string; + end: string; + }; + }; + EXPAND_DOWN: { + rest: { + end: string; + }; + animated: { + start: string; + end: string; + }; + }; + GROW_Y: { + rest: { + start: string; + end: string; + }; + animated: { + start: string; + end: string; + }; + }; + GROW_XY: { + rest: { + start: string; + end: string; + }; + animated: { + start: string; + end: string; + }; + }; +}; +export { KEY_FRAMES }; +//# sourceMappingURL=Motion.keyframes.d.ts.mapimport React from 'react'; +import { Motion } from './Motion'; +declare const _default: { + title: string; + component: typeof Motion; + parameters: { + docs: { + description: { + component: string; + }; + }; + }; +}; +export default _default; +export declare const GrowCenter: () => React.JSX.Element; +export declare const QuickGrow: () => React.JSX.Element; +export declare const ExpandDown: () => React.JSX.Element; +export declare const ExpandUp: () => React.JSX.Element; +export declare const GrowBottom: () => React.JSX.Element; +export declare const GrowBottomAndRight: () => React.JSX.Element; +//# sourceMappingURL=Motion.stories.d.ts.mapexport {}; +//# sourceMappingURL=Motion.spec.d.ts.mapdeclare const getAnimationCss: ({ isAnimatedState, variation }: { + isAnimatedState: any; + variation: any; +}) => any; +export { getAnimationCss }; +//# sourceMappingURL=helpers.d.ts.mapimport { Spinner } from './Spinner'; +declare const _default: { + title: string; + component: typeof Spinner; + args: { + size: string; + color: string; + }; + argTypes: { + size: { + name: string; + type: { + name: string; + required: boolean; + }; + description: string; + table: { + type: { + summary: string; + detail: string; + }; + defaultValue: { + summary: string; + }; + }; + control: { + type: string; + options: string[]; + }; + }; + color: { + name: string; + type: { + name: string; + required: boolean; + }; + description: string; + table: { + type: { + summary: string; + detail: string; + }; + defaultValue: { + summary: string; + }; + }; + control: { + type: string; + options: string[]; + }; + }; + icon: { + name: string; + type: { + name: string; + required: boolean; + }; + description: string; + table: { + type: { + summary: string; + detail: string; + }; + defaultValue: { + summary: string; + }; + }; + control: { + type: string; + options: string[]; + }; + }; + useGradient: { + name: string; + type: { + name: string; + required: boolean; + }; + description: string; + }; + strokeWidth: { + name: string; + type: { + name: string; + required: boolean; + }; + description: string; + }; + }; +}; +export default _default; +export declare const _Spinner: any; +export declare const WithIcon: any; +export declare const Small: any; +export declare const Large: any; +export declare const OverrideWidthAndHeight: any; +export declare const OverrideIconColor: any; +export declare const MultipleIcons: any; +export declare const Responsive: any; +export declare const WithGradient: any; +export declare const WithGradientCustomWidth: any; +//# sourceMappingURL=Spinner.stories.d.ts.mapexport {}; +//# sourceMappingURL=Spinner.spec.d.ts.mapimport React from 'react'; +import { PaletteFamilyName } from '../theme/theme'; +/** + * @public + */ +export type SpinnerSizes = 'small' | 'medium' | 'large' | number; +/** + * @public + */ +export type SpinnerProps = { + children?: React.ReactNode; + color?: PaletteFamilyName; + size?: SpinnerSizes | string | Array; + useGradient?: boolean; +}; +/** + * @public + */ +export declare function Spinner({ children, color, useGradient, ...props }: SpinnerProps): React.JSX.Element; +export declare namespace Spinner { + var defaultProps: { + color: string; + size: string; + }; +} +//# sourceMappingURL=Spinner.d.ts.mapimport React from 'react'; +export declare const iconMap: { + Cars: React.JSX.Element; + Hotels: React.JSX.Element; + Flights: React.JSX.Element; +}; +export declare const sizes: string[]; +export declare const icons: string[]; +export declare const defaultArgs: { + size: string; + color: string; +}; +export declare const argTypes: { + size: { + name: string; + type: { + name: string; + required: boolean; + }; + description: string; + table: { + type: { + summary: string; + detail: string; + }; + defaultValue: { + summary: string; + }; + }; + control: { + type: string; + options: string[]; + }; + }; + color: { + name: string; + type: { + name: string; + required: boolean; + }; + description: string; + table: { + type: { + summary: string; + detail: string; + }; + defaultValue: { + summary: string; + }; + }; + control: { + type: string; + options: string[]; + }; + }; + icon: { + name: string; + type: { + name: string; + required: boolean; + }; + description: string; + table: { + type: { + summary: string; + detail: string; + }; + defaultValue: { + summary: string; + }; + }; + control: { + type: string; + options: string[]; + }; + }; + useGradient: { + name: string; + type: { + name: string; + required: boolean; + }; + description: string; + }; + strokeWidth: { + name: string; + type: { + name: string; + required: boolean; + }; + description: string; + }; +}; +//# sourceMappingURL=Spinner.stories.args.d.ts.mapimport React from 'react'; +import { type PaletteColor, type PaletteFamilyName } from '../theme/theme'; +/** + * @public + */ +export type ProgressBarProps = { + steps: { + color: PaletteColor | PaletteFamilyName; + }[]; + currentStep: number; + stepHeight?: string; + className?: string; +}; +/** + * @public + */ +export declare function ProgressBar({ steps, currentStep, stepHeight, className }: ProgressBarProps): React.JSX.Element; +export declare namespace ProgressBar { + var defaultProps: { + stepHeight: string; + }; +} +//# sourceMappingURL=ProgressBar.d.ts.mapimport React from 'react'; +import { ProgressBar } from './ProgressBar'; +declare const _default: { + title: string; + component: typeof ProgressBar; +}; +export default _default; +export declare const EmptyProgressBar: () => React.JSX.Element; +export declare const BasicProgressBar: () => React.JSX.Element; +export declare const Thick: () => React.JSX.Element; +export declare const Short: () => React.JSX.Element; +//# sourceMappingURL=ProgressBar.stories.d.ts.mapexport {}; +//# sourceMappingURL=ProgressBar.spec.d.ts.mapexport {}; +//# sourceMappingURL=GenericBanner.spec.d.ts.mapimport React from 'react'; +import { GenericBanner } from './GenericBanner'; +declare const _default: { + title: string; + component: typeof GenericBanner; + argTypes: { + borderRadius: { + name: string; + type: { + name: string; + }; + options: string[]; + description: string; + control: { + type: string; + }; + }; + }; +}; +export default _default; +export declare const BasicBannerAllInline: any; +export declare const BasicBannerAllInlineRightIcon: () => React.JSX.Element; +export declare const BasicBannerBlockWithURLPropsCTA: () => React.JSX.Element; +export declare const BannerWithOnClick: () => React.JSX.Element; +export declare const BannerWithOnClickAndCTA: () => React.JSX.Element; +export declare const BannerWithOnClickButtonStyleCta: () => React.JSX.Element; +export declare const BannerWithURLPropsAndCta: () => React.JSX.Element; +export declare const BannerWithURLProps: () => React.JSX.Element; +export declare const BannerWithURLPropsAndCustomHeadingSize: () => React.JSX.Element; +export declare const BannerWithURLPropsButtonStyleCta: () => React.JSX.Element; +export declare const ColorScheme: () => React.JSX.Element[]; +//# sourceMappingURL=GenericBanner.stories.d.ts.mapimport React from 'react'; +import { AlignItemsProps, FontSizeProps, JustifyContentProps, MarginProps, PaddingProps } from 'styled-system'; +import { ColorSchemeName } from '../theme/theme'; +/** + * @public + */ +export type GenericBannerNode = React.ReactElement>; +/** + * @public + */ +export 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; +}; +/** + * @public + */ +export declare function GenericBanner({ alignItems, buttonClick, buttonSize, buttonVariation, ctaText, fontSize, heading, iconLeft, iconRight, imageLeft, justifyContent, linkVariation, linkColor, text, URLProps, ...props }: GenericBannerProps): React.JSX.Element; +export declare namespace GenericBanner { + var defaultProps: { + alignItems: string; + buttonVariation: string; + fontSize: number[]; + justifyContent: string; + linkColor: string; + linkVariation: string; + borderRadius: string; + }; +} +//# sourceMappingURL=GenericBanner.d.ts.mapexport declare const argTypes: { + borderRadius: { + name: string; + type: { + name: string; + }; + options: string[]; + description: string; + control: { + type: string; + }; + }; +}; +//# sourceMappingURL=GenericBanner.stories.args.d.ts.mapimport React from 'react'; +import { type CardProps } from '../Card/Card'; +/** + * @public + */ +export type HugProps = CardProps & { + children?: React.ReactNode; + iconDisplay?: string[]; + icon?: React.ReactNode; + text?: React.ReactNode | React.ReactNode[] | string; + color?: string; + fontSize?: string | number; +}; +/** + * @public + */ +export declare function Hug({ bg, color, p, fontSize, icon, iconDisplay, colorScheme, ...props }: HugProps): React.ReactElement; +export declare namespace Hug { + var defaultProps: { + borderRadius: string; + borderWidth: number; + color: string; + fontSize: number; + p: number; + }; +} +//# sourceMappingURL=Hug.d.ts.mapimport React from 'react'; +import { Hug } from './Hug'; +declare const _default: { + title: string; + component: typeof Hug; + args: { + color: string; + text: React.JSX.Element; + }; + argTypes: { + color: { + name: string; + type: { + name: string; + required: boolean; + }; + description: string; + table: { + type: { + summary: string; + detail: string; + }; + defaultValue: { + summary: string; + }; + }; + control: { + type: string; + options: string[]; + }; + }; + icon: { + name: string; + description: string; + table: { + defaultValue: { + summary: any; + }; + }; + control: { + type: string; + options: string[]; + }; + }; + borderRadius: { + name: string; + type: { + name: string; + }; + options: string[]; + description: string; + control: { + type: string; + }; + }; + }; + parameters: { + docs: { + description: { + component: string; + }; + }; + }; +}; +export default _default; +export declare const _Hug: any; +export declare const WithAnIcon: any; +export declare const CardInACard: any; +export declare const PlainText: any; +export declare const ArrayOfText: any; +export declare const Responsive: any; +export declare const ColorScheme: () => React.JSX.Element[]; +export declare const ColorSchemeWithCustomHeaderTextAndIconColors: () => React.JSX.Element; +//# sourceMappingURL=Hug.stories.d.ts.mapimport React from 'react'; +export declare const iconMap: { + Accessible: any; + SeatBusiness: any; + ThumbsUp: any; + Trophy: any; + WashingHands: any; +}; +export declare const HugContentText: () => React.JSX.Element; +export declare const defaultArgs: { + color: string; + text: React.JSX.Element; +}; +export declare const argTypes: { + color: { + name: string; + type: { + name: string; + required: boolean; + }; + description: string; + table: { + type: { + summary: string; + detail: string; + }; + defaultValue: { + summary: string; + }; + }; + control: { + type: string; + options: string[]; + }; + }; + icon: { + name: string; + description: string; + table: { + defaultValue: { + summary: any; + }; + }; + control: { + type: string; + options: string[]; + }; + }; + borderRadius: { + name: string; + type: { + name: string; + }; + options: string[]; + description: string; + control: { + type: string; + }; + }; +}; +//# sourceMappingURL=Hug.stories.args.d.ts.map/// +import { type FlexProps } from '../Flex/Flex'; +export declare const HugCard: any; +export declare const BorderConcealer: any; +export type HeaderProps = FlexProps & { + iconUsesColorScheme: boolean; +}; +export declare const Header: React.FC; +//# sourceMappingURL=Hug.styled.d.ts.mapexport {}; +//# sourceMappingURL=Hug.spec.d.ts.mapexport {}; +//# sourceMappingURL=Image.spec.d.ts.mapimport { Meta, StoryObj } from '@storybook/react'; +import { Image, type ImageProps } from './Image'; +type ImageStory = StoryObj; +export declare const Playground: ImageStory; +export declare const ExamplesAndVariations: ImageStory; +export declare const BoxShawdow: ImageStory; +export declare const ResponsiveWidth: ImageStory; +export declare const SpecificWidthAndHeight: ImageStory; +export declare const ObjectFit: ImageStory; +declare const meta: Meta; +export default meta; +//# sourceMappingURL=Image.stories.d.ts.mapimport React from 'react'; +import { BorderRadiusProps, BoxShadowProps, HeightProps, MaxHeightProps, MaxWidthProps, MinHeightProps, MinWidthProps, SpaceProps, WidthProps } from 'styled-system'; +import { ObjectFit, ObjectPosition } from '../utils'; +/** + * @public + */ +export type ImageProps = BorderRadiusProps & BoxShadowProps & HeightProps & MaxHeightProps & MaxWidthProps & MinHeightProps & MinWidthProps & SpaceProps & WidthProps & Partial> & { + borderRadiusSize?: string; + rounded?: string; + boxShadowSize?: string; + boxShadowColor?: string; + objectFit?: ObjectFit; + objectPosition?: ObjectPosition; +}; +/** + * @public + */ +export declare const Image: React.FC; +//# sourceMappingURL=Image.d.ts.mapexport declare const argTypes: { + borderRadius: { + control: string; + name: string; + options: string[]; + }; + rounded: { + control: string; + options: string[]; + }; + boxShadowSize: { + control: string; + options: string[]; + }; + boxShadowColor: { + control: string; + options: string[]; + defaultValue: string; + description: string; + table: { + type: { + summary: string; + }; + }; + }; + height: { + control: string; + }; + width: { + control: string; + }; + objectFit: { + control: string; + options: string[]; + }; + objectPosition: { + control: string; + options: string[]; + }; +}; +//# sourceMappingURL=Image.stories.args.d.ts.mapimport React from 'react'; +/** + * @public + */ +export type ChatMessageVariation = 'initial' | 'incoming' | 'outgoing'; +/** + * @public + */ +export interface ChatMessageIMessage { + dateTime?: string; + message: string; + variation: ChatMessageVariation; +} +/** + * @public + */ +export interface ChatMessageContainerProps { + messageMaxWidth: string; + messages: ChatMessageIMessage[]; +} +/** + * @public + */ +export declare function ChatMessageContainer({ messageMaxWidth, messages }: ChatMessageContainerProps): React.JSX.Element; +//# sourceMappingURL=ChatMessageContainer.d.ts.mapimport { ChatMessageVariation } from './ChatMessageContainer'; +export declare const shortConversation: { + dateTime: string; + message: string; + variation: ChatMessageVariation; +}[]; +export declare const longConversation: { + dateTime: string; + message: string; + variation: ChatMessageVariation; +}[]; +//# sourceMappingURL=ChatMessageContainer.stories.args.d.ts.mapimport type { StoryObj } from '@storybook/react'; +import { ChatMessageContainer, type ChatMessageContainerProps } from './ChatMessageContainer'; +declare const _default: { + title: string; + component: typeof ChatMessageContainer; + args: { + messageMaxWidth: string; + }; +}; +export default _default; +type ChatMessageContainerStory = StoryObj; +export declare const _ChatMessageContainer: ChatMessageContainerStory; +export declare const LongConversation: ChatMessageContainerStory; +export declare const Empty: ChatMessageContainerStory; +export declare const CustomMessageMaxWidth: ChatMessageContainerStory; +//# sourceMappingURL=ChatMessageContainer.stories.d.ts.mapexport {}; +//# sourceMappingURL=Relative.spec.d.ts.mapimport React from 'react'; +import { BottomProps, LeftProps, RightProps, TopProps, ZIndexProps } from 'styled-system'; +import { type BoxProps } from '../Box/Box'; +/** + * @public + */ +export type RelativeProps = TopProps & RightProps & BottomProps & LeftProps & ZIndexProps & BoxProps; +/** + * @public + */ +export declare const Relative: React.FC; +//# sourceMappingURL=Relative.d.ts.mapimport React from 'react'; +declare const _default: { + title: string; + component: React.FC; +}; +export default _default; +export declare const AroundAnImageAndAnAbsolutelyPositionedFlag: () => React.JSX.Element; +export declare const AroundTextAndAnAbsolutelyPositionedIcon: () => React.JSX.Element; +//# sourceMappingURL=Relative.stories.d.ts.mapimport React from 'react'; +import { ShadowEffect } from './ShadowEffect'; +declare const _default: { + title: string; + component: typeof ShadowEffect; +}; +export default _default; +export declare const Effect: () => React.JSX.Element; +export declare const MultipleInputsWithOverlays: () => React.JSX.Element; +export declare const Overlay: () => React.JSX.Element; +//# sourceMappingURL=ShadowEffect.stories.d.ts.mapimport React from 'react'; +/** + * @public + */ +export declare const ShadowOverlay: any; +/** + * @public + */ +export type ShadowEffectProps = { + shouldCloseOnBlur?: boolean; + shouldOpenOnFocus?: boolean; + zIndex?: number | string; + children?: React.ReactNode; + onClose?: () => void; + onOpen?: () => void; +}; +/** + * @public + */ +export declare function ShadowEffect({ shouldCloseOnBlur, shouldOpenOnFocus, zIndex, children, onClose, onOpen, ...props }: ShadowEffectProps): React.JSX.Element; +//# sourceMappingURL=ShadowEffect.d.ts.mapexport {}; +//# sourceMappingURL=ShadowEffect.spec.d.ts.mapimport React from 'react'; +import { BoxProps } from '../Box/Box'; +/** + * @public + */ +export type HideProps = BoxProps & { + xs?: boolean; + sm?: boolean; + md?: boolean; + lg?: boolean; + xl?: boolean; + xxl?: boolean; + print?: boolean; +}; +/** + * @public + */ +export declare const Hide: React.FC & { + text: React.FC; +}; +//# sourceMappingURL=Hide.d.ts.mapimport React from 'react'; +declare const _default: { + title: string; + component: React.FC & { + text: React.FC; + }; +}; +export default _default; +export declare const _Hide: () => React.JSX.Element; +//# sourceMappingURL=Hide.stories.d.ts.mapexport {}; +//# sourceMappingURL=Hide.spec.d.ts.mapimport React from 'react'; +import { Toggle } from './Toggle'; +declare const _default: { + title: string; + component: typeof Toggle; +}; +export default _default; +export declare const ToggleComponent: () => React.JSX.Element; +//# sourceMappingURL=Toggle.stories.d.ts.mapexport {}; +//# sourceMappingURL=Toggle.spec.d.ts.mapimport React from 'react'; +/** + * @public + */ +export type ToggleProps = { + isOn?: boolean; + label?: string; + onToggle?: (unknown: any) => unknown; + disabled?: boolean; + width?: string; + height?: number; + icon?: React.ReactNode; + name?: string; +}; +/** + * Toggle component + * + * @public + */ +export declare function Toggle({ isOn, label, onToggle, disabled, height, icon, name, }: ToggleProps): React.ReactElement; +export declare namespace Toggle { + var displayName: string; + var defaultProps: { + isOn: boolean; + height: number; + }; +} +//# sourceMappingURL=Toggle.d.ts.mapimport React from 'react'; +import { OverflowProps } from 'styled-system'; +import type { BorderRadius, ColorSchemes, PaletteColor, ZIndex } from '../theme/theme'; +import type { DialogSize } from './Dialog.styled'; +/** + * @public + */ +export type DialogProps = Omit & { + ariaDescription: string; + ariaTitle: string; + borderRadius?: BorderRadius; + children?: React.ReactNode; + defaultOpen?: boolean; + footerContent?: React.ReactNode; + fullWidth?: boolean; + headerColorScheme?: keyof ColorSchemes; + headerContent?: string | React.ReactNode; + headerIcon?: React.ReactNode; + headerShowCloseButton?: boolean; + hugColor?: PaletteColor; + open?: boolean; + scrimColor?: 'dark' | 'medium' | 'light' | (string & {}); + scrimDismiss?: boolean; + sheet?: boolean; + showCloseButton?: boolean; + size?: DialogSize; + triggerNode?: React.ReactNode; + zIndex?: ZIndex; + onOpenChange?: (open: boolean) => void; + showScrollShadow?: boolean; +}; +/** + * @public + */ +declare const PclnDialog: { + ({ ariaDescription, ariaTitle, borderRadius, children, defaultOpen, footerContent, fullWidth, headerColorScheme, headerContent, headerIcon, headerShowCloseButton, hugColor, open, scrimColor, scrimDismiss, sheet, showCloseButton, size, triggerNode, zIndex, overflowX, overflowY, onOpenChange, showScrollShadow, }: DialogProps): React.JSX.Element; + displayName: string; +}; +export { PclnDialog as Dialog }; +//# sourceMappingURL=Dialog.d.ts.mapimport React from 'react'; +import { type DialogProps } from './Dialog'; +/** @public */ +export declare const dialogSizes: readonly ["sm", "md", "lg", "xl", "full"]; +/** @public */ +export type DialogSize = (typeof dialogSizes)[number]; +export declare const DialogOverlay: ({ scrimColor, sheet, children, zIndex }: Partial) => React.JSX.Element; +export declare const DialogContent: ({ ariaDescription, ariaTitle, borderRadius, children, footerContent, fullWidth, headerColorScheme, headerContent, headerIcon, headerShowCloseButton, hugColor, scrimDismiss, sheet, showCloseButton, size, zIndex, onOpenChange, overflowX, overflowY, showScrollShadow, }: DialogProps) => React.JSX.Element; +//# sourceMappingURL=Dialog.styled.d.ts.mapimport { ArgTypes } from '@storybook/react'; +import type { DialogProps } from './Dialog'; +export declare const argTypes: Partial>; +export declare const defaultArgs: Partial; +//# sourceMappingURL=Dialog.stories.args.d.ts.mapexport {}; +//# sourceMappingURL=Dialog.spec.d.ts.mapimport type { Meta, StoryObj } from '@storybook/react'; +import { Dialog, type DialogProps } from './Dialog'; +type DialogStory = StoryObj; +export declare const Playground: DialogStory; +export declare const WithHug: DialogStory; +export declare const WithHeaderText: DialogStory; +export declare const WithHeaderContent: DialogStory; +export declare const FullWidthImage: DialogStory; +export declare const OverflowModal: DialogStory; +export declare const OverflowOutsideContainer: DialogStory; +export declare const OverflowContent: DialogStory; +export declare const StickyHeader: DialogStory; +export declare const StickyFooter: DialogStory; +export declare const ScrimColors: DialogStory; +export declare const SheetMode: DialogStory; +export declare const SheetWithHeaderAndFooter: DialogStory; +export declare const Controlled: DialogStory; +declare const meta: Meta; +export default meta; +//# sourceMappingURL=Dialog.stories.d.ts.mapimport type { StoryObj } from '@storybook/react'; +import { ChatMessage, type ChatMessageProps } from './ChatMessage'; +declare const _default: { + title: string; + component: typeof ChatMessage; + args: { + message: string; + variation: string; + }; + argTypes: { + variation: { + options: string[]; + control: { + type: string; + options: string[]; + }; + }; + }; +}; +export default _default; +type ChatMessageStory = StoryObj; +export declare const _ChatMessage: ChatMessageStory; +export declare const InitialMessage: ChatMessageStory; +export declare const WithReactNodeMessage: ChatMessageStory; +export declare const IncomingMessage: ChatMessageStory; +export declare const OutgoingMessage: ChatMessageStory; +export declare const WithIconOverride: ChatMessageStory; +export declare const WithHeader: ChatMessageStory; +export declare const WithFooter: ChatMessageStory; +export declare const OutgoingWithFooter: ChatMessageStory; +export declare const MessageList: ChatMessageStory; +//# sourceMappingURL=ChatMessage.stories.d.ts.mapimport React from 'react'; +import { type FlexProps } from '../Flex/Flex'; +/** + * @public + */ +export declare const ChatMessageVariations: string[]; +/** + * @public + */ +export type ChatMessageProps = FlexProps & { + footer?: React.ReactNode; + header?: React.ReactNode; + Icon?: React.FC<{ + color?: string; + size?: string; + }>; + message: React.ReactNode; + variation: (typeof ChatMessageVariations)[number]; +}; +/** + * @public + */ +export declare function ChatMessage({ footer, header, Icon, message, variation, ...props }: ChatMessageProps): React.JSX.Element; +//# sourceMappingURL=ChatMessage.d.ts.mapimport React from 'react'; +/** + * @public + */ +export type SkipMenuProps = { + className?: string; + skipLinks?: { + label: string; + targetId: string; + }[]; +}; +/** + * @public + */ +export declare function SkipMenu({ className, skipLinks, ...props }: SkipMenuProps): React.JSX.Element; +export declare namespace SkipMenu { + var displayName: string; +} +//# sourceMappingURL=SkipMenu.d.ts.mapexport {}; +//# sourceMappingURL=SkipMenu.spec.d.ts.mapimport React from 'react'; +import { SkipMenu } from './SkipMenu'; +declare const _default: { + title: string; + component: typeof SkipMenu; +}; +export default _default; +export declare const Default: () => React.JSX.Element; +//# sourceMappingURL=SkipMenu.stories.d.ts.mapimport React from 'react'; +declare const _default: { + title: string; + component: React.FC; + argTypes: { + size: { + name: string; + type: { + name: string; + }; + options: string[]; + description: string; + control: { + type: string; + }; + }; + }; +}; +export default _default; +export declare const DefaultAlignWithThemeMaxWidth: () => React.JSX.Element; +export declare const InputMaxWidth: () => React.JSX.Element; +export declare const SizeProp: any; +//# sourceMappingURL=Container.stories.d.ts.mapexport {}; +//# sourceMappingURL=Container.spec.d.ts.mapimport React from 'react'; +/** + * @public + */ +export type ContainerSize = 'sm' | 'md' | 'lg' | 'xl'; +/** + * @public + */ +export type ContainerProps = { + children?: React.ReactNode; + maxWidth?: number; + size?: ContainerSize; +}; +/** + * @public + */ +export declare const Container: React.FC; +//# sourceMappingURL=Container.d.ts.mapexport declare const argTypes: { + size: { + name: string; + type: { + name: string; + }; + options: string[]; + description: string; + control: { + type: string; + }; + }; +}; +//# sourceMappingURL=Container.stories.args.d.ts.mapimport React from 'react'; +/** + * @public + */ +export declare const RadioCheckToggleCardCardTypes: readonly ["radio", "checkbox", "toggle"]; +/** + * @public + */ +export declare const RadioCheckToggleCardHPositions: readonly ["left", "right"]; +/** + * @public + */ +export declare const RadioCheckToggleCardVPositions: readonly ["top", "center"]; +/** + * @public + */ +export type TCardTypes = (typeof RadioCheckToggleCardCardTypes)[number]; +/** + * @public + */ +export type THPositions = (typeof RadioCheckToggleCardHPositions)[number]; +/** + * @public + */ +export type TVPositions = (typeof RadioCheckToggleCardVPositions)[number]; +/** + * @public + */ +export type RadioCheckToggleCardProps = { + children?: React.ReactNode | string; + cardType?: TCardTypes; + hPosition?: THPositions; + vPosition?: TVPositions; + isTakingFullHeightOfCard?: boolean; + title: string; + isTitleBold?: boolean; + name: string; + value: string; + onChange?: (e: React.ChangeEvent) => void; + isSelected: boolean; +}; +/** + * @public + */ +export declare function RadioCheckToggleCard(props: RadioCheckToggleCardProps): React.JSX.Element; +export declare namespace RadioCheckToggleCard { + var displayName: string; + var defaultProps: { + cardType: "toggle" | "checkbox" | "radio"; + isTitleBold: boolean; + hPosition: "left" | "right"; + vPosition: "center" | "top"; + isTakingFullHeightOfCard: boolean; + onChange: () => void; + }; +} +//# sourceMappingURL=RadioCheckToggleCard.d.ts.mapexport {}; +//# sourceMappingURL=RadioCheckToggleCard.spec.d.ts.mapexport declare const argTypes: { + hPosition: { + control: { + type: string; + }; + options: readonly ["left", "right"]; + defaultValue: "left" | "right"; + description: string; + }; + vPosition: { + control: { + type: string; + }; + options: readonly ["top", "center"]; + defaultValue: "center" | "top"; + description: string; + }; + isTakingFullHeightOfCard: { + control: string; + defaultValue: boolean; + description: string; + }; + title: { + control: string; + defaultValue: string; + description: string; + }; + isTitleBold: { + control: string; + defaultValue: boolean; + description: string; + }; + isSelected: { + control: string; + defaultValue: boolean; + description: string; + }; +}; +//# sourceMappingURL=RadioCheckToggleCard.stories.args.d.ts.mapimport { Meta, StoryObj } from '@storybook/react'; +import { RadioCheckToggleCard } from './RadioCheckToggleCard'; +type Story = StoryObj; +declare const meta: Meta; +export default meta; +export declare const Radio: Story; +export declare const Checkbox: Story; +export declare const Toggle: Story; +//# sourceMappingURL=RadioCheckToggleCard.stories.d.ts.mapimport React from 'react'; +declare const _default: { + title: string; +}; +export default _default; +export declare const Palette: () => React.JSX.Element; +export declare const Colors: () => React.JSX.Element; +export declare const ColorScheme: () => React.JSX.Element; +//# sourceMappingURL=Colors.stories.d.ts.mapimport React from 'react'; +declare const _default: { + title: string; +}; +export default _default; +export declare const Grid: () => React.JSX.Element; +export declare const TwoColumn: () => React.JSX.Element; +export declare const Navbar: () => React.JSX.Element; +export declare const TiledCards: () => React.JSX.Element; +//# sourceMappingURL=Layouts.stories.d.ts.mapimport React from 'react'; +declare const _default: { + title: string; +}; +export default _default; +export declare const _ZIndices: () => React.JSX.Element; +export declare const InputWithShadowOverlay: () => React.JSX.Element; +export declare const InputWithShadowEffect: () => React.JSX.Element; +//# sourceMappingURL=ZIndices.stories.d.ts.mapexport declare const defaultArgs: { + p: number; + m: number; + color: string; + size: string; + borderRadius: string; +}; +export declare const argTypes: { + children: { + table: { + disable: boolean; + }; + }; + p: { + table: { + disable: boolean; + }; + }; + m: { + table: { + disable: boolean; + }; + }; + color: { + table: { + disable: boolean; + }; + }; + boxShadowSize: { + table: { + disable: boolean; + }; + }; + size: { + name: string; + type: { + name: string; + }; + description: string; + }; +}; +export declare const borderRadiusArgType: { + name: string; + type: { + name: string; + }; + options: string[]; + description: string; + control: { + type: string; + }; +}; +//# sourceMappingURL=BorderRadius.stories.args.d.ts.mapimport React from 'react'; +declare const _default: { + title: string; + component: React.FC; + args: { + p: number; + m: number; + color: string; + size: string; + borderRadius: string; + }; + argTypes: { + children: { + table: { + disable: boolean; + }; + }; + p: { + table: { + disable: boolean; + }; + }; + m: { + table: { + disable: boolean; + }; + }; + color: { + table: { + disable: boolean; + }; + }; + boxShadowSize: { + table: { + disable: boolean; + }; + }; + size: { + name: string; + type: { + name: string; + }; + description: string; + }; + }; + parameters: { + docs: { + description: { + component: string; + }; + }; + }; +}; +export default _default; +export declare const BorderRadiusDemo: any; +export declare const ResponsiveDemo: any; +//# sourceMappingURL=BorderRadius.stories.d.ts.mapexport {}; +//# sourceMappingURL=TextArea.spec.d.ts.mapimport React from 'react'; +import { SpaceProps } from 'styled-system'; +/** + * @public + */ +export type TextAreaProps = SpaceProps & React.TextareaHTMLAttributes & React.RefAttributes & { + isField?: boolean; +}; +/** + * @public + */ +export declare const TextArea: React.FC & { + isField?: boolean; +}; +//# sourceMappingURL=TextArea.d.ts.mapimport React from 'react'; +declare const _default: { + title: string; + component: React.FC & { + isField?: boolean; + }; + parameters: { + docs: { + description: { + component: string; + }; + }; + }; +}; +export default _default; +export declare const TextAreaComponent: () => React.JSX.Element; +export declare const Colors: () => React.JSX.Element; +export declare const WithExternalLabel: () => React.JSX.Element; +export declare function ForwardRefs(): React.JSX.Element; +//# sourceMappingURL=TextArea.stories.d.ts.mapimport type { Meta, StoryObj } from '@storybook/react'; +import { Button, type ButtonProps } from './Button'; +type ButtonStory = StoryObj; +export declare const Playground: ButtonStory; +export declare const Size: ButtonStory; +export declare const PrimaryVariations: ButtonStory; +export declare const TonalVariations: ButtonStory; +export declare const LinkVariation: ButtonStory; +export declare const AdditionalVariations: ButtonStory; +export declare const Disabled: ButtonStory; +export declare const SemanticStyles: ButtonStory; +export declare const IconButtons: ButtonStory; +export declare const InputVariation: ButtonStory; +export declare const FlexProps: ButtonStory; +declare const meta: Meta; +export default meta; +//# sourceMappingURL=Button.stories.d.ts.mapimport React from 'react'; +import { BoxShadowProps, HeightProps, SpaceProps, WidthProps } from 'styled-system'; +import { type FlexProps } from '../Flex/Flex'; +/** + * @public + */ +export declare const borderRadiusButtonValues: string[]; +/** + * @public + */ +export type ButtonSizes = 'small' | 'medium' | 'large' | 'extraLarge'; +/** + * @public + */ +export type ButtonVariations = 'fill' | 'link' | 'outline' | 'plain' | 'subtle' | 'white' | 'lightFill' | 'input'; +/** + * @public + */ +export type StyledButtonProps = ButtonProps & { + hasChildren: boolean; +}; +/** + * @public + */ +export type ButtonProps = WidthProps & HeightProps & SpaceProps & BoxShadowProps & React.ButtonHTMLAttributes & React.RefAttributes & { + color?: string; + variation?: ButtonVariations; + size?: ButtonSizes | ButtonSizes[]; + borderRadius?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full' | ''; + boxShadowSize?: '' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'overlay-md' | 'overlay-lg' | 'overlay-xl'; + autoFocus?: boolean; + IconLeft?: React.Component; + IconRight?: React.Component; + flexProps?: FlexProps; + onClick?: (unknown: any) => unknown; + onFocus?: (unknown: any) => unknown; + onMouseEnter?: (unknown: any) => unknown; +}; +export declare const buttonStyles: any; +/** + * @public + */ +export declare const Button: React.ForwardRefExoticComponent & React.RefAttributes>; +//# sourceMappingURL=Button.d.ts.mapexport {}; +//# sourceMappingURL=Button.spec.d.ts.mapexport declare const sizeOptions: string[]; +export declare const variationOptions: string[]; +export declare const defaultArgs: { + children: string; + color: string; + disabled: boolean; + href: string; + size: string; + target: string; + variation: string; + onClick: import("@storybook/addon-actions/*").HandlerFunction; +}; +export declare const argTypes: { + color: { + name: string; + options: string[]; + mapping: { + primary: string; + secondary: string; + text: string; + success: string; + error: string; + warning: string; + alert: string; + caution: string; + notify: string; + pricePrimary: string; + priceSecondary: string; + promoPrimary: string; + promoSecondary: string; + border: string; + background: string; + }; + control: string; + }; + size: { + name: string; + options: string[]; + control: string; + }; + target: { + name: string; + options: string[]; + control: string; + }; + variation: { + name: string; + options: string[]; + control: string; + }; +}; +//# sourceMappingURL=Link.stories.args.d.ts.mapimport { StoryObj } from '@storybook/react'; +import React from 'react'; +import { type ButtonProps } from '../Button/Button'; +import { LinkProps } from './Link'; +declare const _default: { + title: string; + component: React.FC; + args: { + children: string; + color: string; + disabled: boolean; + href: string; + size: string; + target: string; + variation: string; + onClick: import("@storybook/addon-actions/*").HandlerFunction; + }; + argTypes: { + color: { + name: string; + options: string[]; + mapping: { + primary: string; + secondary: string; + text: string; + success: string; + error: string; + warning: string; + alert: string; + caution: string; + notify: string; + pricePrimary: string; + priceSecondary: string; + promoPrimary: string; + promoSecondary: string; + border: string; + background: string; + }; + control: string; + }; + size: { + name: string; + options: string[]; + control: string; + }; + target: { + name: string; + options: string[]; + control: string; + }; + variation: { + name: string; + options: string[]; + control: string; + }; + }; +}; +export default _default; +export declare const _Link: any; +type ButtonStory = StoryObj; +export declare const Playground: ButtonStory; +export declare function Variations(args: any): React.JSX.Element; +export declare function Sizes(args: any): React.JSX.Element; +export declare function ForwardRefs(): React.JSX.Element; +export declare const LargeText: () => React.JSX.Element; +export declare const ReactiveStyling: any; +//# sourceMappingURL=Link.stories.d.ts.mapexport {}; +//# sourceMappingURL=Link.spec.d.ts.mapimport React from 'react'; +import { SpaceProps, WidthProps } from 'styled-system'; +import { type ButtonSizes, type ButtonVariations } from '../Button/Button'; +/** + * @public + */ +export type LinkProps = WidthProps & SpaceProps & React.AnchorHTMLAttributes & React.RefAttributes & { + children?: React.ReactNode | string; + color?: string; + disabled?: boolean; + href?: string; + size?: ButtonSizes | ButtonSizes[]; + target?: string; + variation?: ButtonVariations; + onClick?: React.MouseEventHandler; + onFocus?: React.FocusEventHandler; +}; +/** + * @public + */ +export declare const Link: React.FC; +//# sourceMappingURL=Link.d.ts.mapexport {}; +//# sourceMappingURL=theme.spec.d.ts.map/// +import { BackgroundProps, BorderProps, ColorProps, FlexboxProps, GridProps, LayoutProps, PositionProps, ShadowProps, SpaceProps, TypographyProps } from 'styled-system'; +import { colors } from './colors'; +/** + * @public + */ +export { colors }; +/** + * @public + */ +export declare const breakpoints: string[]; +/** + * @public + */ +export declare const mediaQueries: any; +/** + * @public + */ +export declare const spaceValues: number[]; +export declare const space: string[]; +/** + * @public + */ +export declare const font = "'Montserrat','Helvetica Neue',Helvetica,Arial,sans-serif"; +/** + * @public + */ +export declare const fontSizes: number[]; +/** + * @public + */ +export declare const medium = 500; +/** + * @public + */ +export declare const bold = 700; +/** + * @public + */ +export declare const regular = 500; +/** + * styled-system's `fontWeight` function can hook into the `fontWeights` object + * + * @public + */ +export declare const fontWeights: { + medium: number; + bold: number; + regular: number; +}; +/** + * @public + */ +export declare const lineHeights: { + standard: number; + display: 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 type ZIndexStrings = 'auto' | 'absolute' | 'dropdown' | 'sticky' | 'fixed' | 'overlay' | 'onOverlay' | 'offCanvas' | 'modal' | 'popover' | 'tooltip'; +/** + * @public + */ +export type ZIndex = number | ZIndexStrings; +/** + * @public + */ +export type ZIndices = Record; +/** + * @public + */ +export declare const zIndices: ZIndices; +/** + * styled-system's `borderRadius` function can hook into the `radii` object/array + * @public + */ +export declare const radii: number[]; +/** + * @public + */ +export declare const radius = "2px"; +/** + * @public + */ +export declare const baseBorderRadii: { + none: string; + xsm: string; + sm: string; + md: string; + lg: string; + xl: string; + '2xl': string; + '3xl': string; + full: string; +}; +/** + * @public + */ +export declare const actionBorderRadii: { + 'action-sm': string; + 'action-md': string; + 'action-lg': string; + 'action-xl': string; +}; +/** + * @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 type BorderRadius = keyof typeof borderRadii; +/** + * @public + */ +export declare const maxContainerWidth = "1280px"; +/** + * @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 type BoxShadowSize = keyof typeof shadows; +/** + * @public + */ +export declare const textShadows: { + sm: string; + md: string; +}; +/** + * @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 + */ +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 const textStyles: any; +/** + * @public + */ +export declare const colorStyles: any; +/** + * @public + */ +export declare const theme: any; +/** + * @public + */ +export type TextStyle = { + fontWeight: number; + fontSize: string; + lineHeight: string; +}; +/** + * @public + */ +export declare const paletteFamilyVariations: readonly ["lightest", "light", "tint", "base", "heading", "tone", "dark", "shade", "darkest"]; +/** + * @public + */ +export type PaletteFamily = { + lightest?: string; + light?: string; + tint?: string; + base: string; + heading?: string; + tone?: string; + dark?: string; + shade?: string; + darkest?: string; +}; +/** + * @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 type PaletteFamilyVariation = (typeof paletteFamilyVariations)[number]; +/** + * @public + */ +export type PaletteFamilyName = (typeof paletteFamilyNames)[number]; +/** + * @public + */ +export type PaletteFamilies = Record; +/** + * @public + */ +export type PaletteColorPaletteFamily = Array[number]; +/** + * @public + */ +export type PaletteColorPaletteFamilyOption = Array[number]; +/** + * @public + */ +export type PaletteColor = `${PaletteColorPaletteFamily}.${PaletteColorPaletteFamilyOption}`; +/** + * @public + */ +export declare const paletteColors: string[]; +/** + * @public + */ +export type ColorStyle = { + color: string; + backgroundColor: string; +}; +/** + * @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 type ColorStyleName = (typeof colorStyleNames)[number]; +/** + * @public + */ +export type ColorStyles = Record; +/** + * @public + */ +export type ColorScheme = { + foreground: string; + background: string; + backgroundName: PaletteColor; +}; +/** + * @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 type ColorSchemeName = (typeof colorSchemeNames)[number]; +/** + * @public + */ +export type ColorSchemes = Record; +/** + * @public + */ +export type ColorName = keyof typeof colors; +/** + * @public + */ +export type ColorProp = ColorName | PaletteFamilyName | PaletteColor; +/** + * @public + */ +export 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 interface IStyledSystemProps extends BackgroundProps, BorderProps, ColorProps, FlexboxProps, GridProps, LayoutProps, PositionProps, ShadowProps, SpaceProps, TypographyProps { + style?: React.CSSProperties; +} +/** + * @public + */ +export declare const ComposedStyleFns: import("styled-system").styleFn; +//# sourceMappingURL=theme.d.ts.mapexport * from './theme'; +//# sourceMappingURL=index.d.ts.map/** + * @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; +}; +//# sourceMappingURL=colors.d.ts.mapexport {}; +//# sourceMappingURL=List.spec.d.ts.mapexport declare const defaultArgs: { + color: string; + fontSize: number; + type: string; + listStyle: string; + indentSize: string; +}; +export declare const argTypes: { + color: { + name: string; + type: { + name: string; + required: boolean; + }; + description: string; + table: { + type: { + summary: string; + detail: string; + }; + defaultValue: { + summary: string; + }; + }; + control: { + type: string; + options: string[]; + }; + }; + fontSize: { + name: string; + type: { + name: string; + required: boolean; + }; + description: string; + table: { + defaultValue: { + summary: number; + }; + }; + control: { + type: string; + options: number[]; + }; + }; + type: { + name: string; + type: { + name: string; + details: string; + }; + description: string; + control: { + type: string; + options: string[]; + }; + }; + listStyle: { + name: string; + type: { + name: string; + required: boolean; + }; + description: string; + options: string[]; + control: { + type: string; + }; + }; + indentSize: { + name: string; + type: { + name: string; + required: boolean; + }; + description: string; + options: string[]; + control: { + type: string; + }; + }; +}; +//# sourceMappingURL=List.stories.args.d.ts.mapimport React from 'react'; +import { type FontSizeProps, type SpaceProps } from 'styled-system'; +import { type PaletteColor, type PaletteFamilyName } from '../theme/theme'; +/** + * @public + */ +export declare const tabSpacingSize: { + xsm: string; + sm: string; + md: string; + lg: string; + xl: string; +}; +/** + * @public + */ +export type ListIndentSize = keyof typeof tabSpacingSize | 'none'; +/** + * @public + */ +export declare const listStyles: readonly ["disc", "upper-roman", "lower-roman", "upper-alpha", "lower-alpha", "decimal", "square", "circle"]; +/** + * @public + */ +export type ListListStyle = (typeof listStyles)[number]; +/** + * @public + */ +export type ListProps = FontSizeProps & SpaceProps & React.HTMLAttributes & { + children?: React.ReactNode; + listStyle?: ListListStyle; + indentSize?: ListIndentSize; + color?: PaletteFamilyName | PaletteColor; +}; +/** + * @public + */ +export declare const List: React.FC & { + ol: React.FC; + ul: React.FC; +}; +//# sourceMappingURL=List.d.ts.mapimport React from 'react'; +declare const _default: { + title: string; + component: React.FC & { + ol: React.FC; + ul: React.FC; + }; + args: { + color: string; + fontSize: number; + type: string; + listStyle: string; + indentSize: string; + }; + argTypes: { + color: { + name: string; + type: { + name: string; + required: boolean; + }; + description: string; + table: { + type: { + summary: string; + detail: string; + }; + defaultValue: { + summary: string; + }; + }; + control: { + type: string; + options: string[]; + }; + }; + fontSize: { + name: string; + type: { + name: string; + required: boolean; + }; + description: string; + table: { + defaultValue: { + summary: number; + }; + }; + control: { + type: string; + options: number[]; + }; + }; + type: { + name: string; + type: { + name: string; + details: string; + }; + description: string; + control: { + type: string; + options: string[]; + }; + }; + listStyle: { + name: string; + type: { + name: string; + required: boolean; + }; + description: string; + options: string[]; + control: { + type: string; + }; + }; + indentSize: { + name: string; + type: { + name: string; + required: boolean; + }; + description: string; + options: string[]; + control: { + type: string; + }; + }; + }; +}; +export default _default; +export declare const _List: any; +export declare const OrderedList: any; +export declare const UnorderedList: any; +export declare const StructuredRomanList: any; +export declare const StructuredDecimalList: any; +export declare const StructuredBulletList: any; +//# sourceMappingURL=List.stories.d.ts.mapimport React from 'react'; +declare const _default: { + title: string; + component: React.FC; + parameters: { + docs: { + description: { + component: string; + }; + }; + }; +}; +export default _default; +export declare const Default: () => React.JSX.Element; +export declare const Margin: () => React.JSX.Element; +export declare const Width: () => React.JSX.Element; +export declare const PixelWidth: () => React.JSX.Element; +export declare const VWWidth: () => React.JSX.Element; +export declare const BorderColor: () => React.JSX.Element; +export declare const DirectionalMargin: () => React.JSX.Element; +export declare const InsideColumnFlex: () => React.JSX.Element; +//# sourceMappingURL=Divider.stories.d.ts.mapimport React from 'react'; +import { BorderColorProps, SpaceProps, WidthProps } from 'styled-system'; +import { ColorName, PaletteColor, PaletteFamilyName } from '../theme/theme'; +/** + * @public + */ +export type DividerProps = SpaceProps & WidthProps & BorderColorProps & { + color?: ColorName | PaletteFamilyName | PaletteColor; +}; +/** + * @public + */ +export declare const Divider: React.FC; +//# sourceMappingURL=Divider.d.ts.mapexport {}; +//# sourceMappingURL=Divider.spec.d.ts.mapimport React from 'react'; +import { Avatar } from './Avatar'; +declare const _default: { + title: string; + component: typeof Avatar; +}; +export default _default; +export declare const Default: () => React.JSX.Element; +export declare const Initials: () => React.JSX.Element; +export declare const Elon: () => React.JSX.Element; +export declare const Responsive: () => React.JSX.Element; +export declare const ColorScheme: () => React.JSX.Element; +//# sourceMappingURL=Avatar.stories.d.ts.map/// +/** + * @public + */ +export 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 function Avatar({ altText, className, color, colorScheme, initials, subtitle, src, size, title, }: AvatarProps): JSX.Element; +export declare namespace Avatar { + var displayName: string; +} +//# sourceMappingURL=Avatar.d.ts.mapexport {}; +//# sourceMappingURL=Avatar.spec.d.ts.mapexport {}; +//# sourceMappingURL=Note.test.d.ts.mapimport React from 'react'; +/** + * @public + */ +export type NoteProps = { + children: string; +}; +/** + * @public + */ +export declare const Note: ({ children }: NoteProps) => React.JSX.Element; +//# sourceMappingURL=Note.d.ts.mapimport type { Meta, StoryObj } from '@storybook/react'; +import { Note } from './Note'; +type NoteStory = StoryObj; +export declare const Usage: NoteStory; +declare const meta: Meta; +export default meta; +//# sourceMappingURL=Note.stories.d.ts.mapexport {}; +//# sourceMappingURL=Section.test.d.ts.mapimport React from 'react'; +/** + * @public + */ +export type SectionProps = { + heading: string; + children: React.ReactNode; +}; +/** + * @public + */ +export declare const Section: ({ heading, children }: SectionProps) => React.JSX.Element; +//# sourceMappingURL=Section.d.ts.mapimport type { Meta, StoryObj } from '@storybook/react'; +import { Section } from './Section'; +type SectionStory = StoryObj; +export declare const Usage: SectionStory; +declare const meta: Meta; +export default meta; +//# sourceMappingURL=Section.stories.d.ts.mapimport type { Meta, StoryObj } from '@storybook/react'; +import { DoDont } from './DoDont'; +type DoDontStory = StoryObj; +export declare const Usage: DoDontStory; +declare const meta: Meta; +export default meta; +//# sourceMappingURL=DoDont.stories.d.ts.mapexport {}; +//# sourceMappingURL=DoDont.test.d.ts.mapimport React from 'react'; +/** + * @public + */ +export type DoDontProps = { + doExample: React.ReactNode; + doText?: string; + dontExample: React.ReactNode; + dontText?: string; +}; +/** + * @public + */ +export declare const DoDont: ({ doExample, dontExample, doText, dontText }: DoDontProps) => React.JSX.Element; +//# sourceMappingURL=DoDont.d.ts.mapimport { Story, StoryObj } from '@storybook/react'; +export declare const copy: (value: string) => Promise; +export declare const getStoryId: (storyName?: string, storyTitle?: string) => string; +export declare const getStoryCode: (story: Story | StoryObj) => string; +//# sourceMappingURL=utils.d.ts.mapexport {}; +//# sourceMappingURL=StoryHeading.test.d.ts.mapimport type { Meta, StoryObj } from '@storybook/react'; +import { StoryHeading } from './StoryHeading'; +type StoryHeadingStory = StoryObj; +export declare const Usage: StoryHeadingStory; +declare const meta: Meta; +export default meta; +//# sourceMappingURL=StoryHeading.stories.d.ts.mapimport React from 'react'; +/** + * @public + */ +export type StoryHeadingProps = { + storyName: string; + storyTitle: string; +}; +/** + * @public + */ +export declare const StoryHeading: ({ storyName, storyTitle }: StoryHeadingProps) => React.JSX.Element; +//# sourceMappingURL=StoryHeading.d.ts.mapexport {}; +//# sourceMappingURL=TableOfContents.test.d.ts.mapimport React from 'react'; +/** + * @public + */ +export type TableOfContentsProps = { + links: string[]; +}; +/** + * @public + */ +export declare const TableOfContents: ({ links }: TableOfContentsProps) => React.JSX.Element; +//# sourceMappingURL=TableOfContents.d.ts.mapimport type { Meta, StoryObj } from '@storybook/react'; +import { TableOfContents } from './TableOfContents'; +type TableOfContentsStory = StoryObj; +export declare const Usage: TableOfContentsStory; +declare const meta: Meta; +export default meta; +//# sourceMappingURL=TableOfContents.stories.d.ts.mapimport React from 'react'; +/** + * @public + */ +export type StoryStageProps = { + children: React.ReactNode; + [x: string]: unknown; +}; +/** + * @public + */ +export declare const StoryStage: ({ children, ...rest }: StoryStageProps) => React.JSX.Element; +//# sourceMappingURL=StoryStage.d.ts.mapexport {}; +//# sourceMappingURL=StoryStage.test.d.ts.mapimport type { Meta, StoryObj } from '@storybook/react'; +import { StoryStage } from './StoryStage'; +type StoryStageStory = StoryObj; +export declare const Usage: StoryStageStory; +declare const meta: Meta; +export default meta; +//# sourceMappingURL=StoryStage.stories.d.ts.mapexport {}; +//# sourceMappingURL=DocTable.test.d.ts.mapimport React from 'react'; +/** + * @public + */ +export type DocTableProps = { + data: T[]; + columns: { + field: string; + heading: string; + noWrap?: boolean; + }[]; +}; +/** + * @public + */ +export declare const DocTable: ({ data, columns, ...rest }: DocTableProps) => React.JSX.Element; +//# sourceMappingURL=DocTable.d.ts.mapimport type { Meta, StoryObj } from '@storybook/react'; +import { DocTable } from './DocTable'; +type DocTableStory = StoryObj; +export declare const Usage: DocTableStory; +declare const meta: Meta; +export default meta; +//# sourceMappingURL=DocTable.stories.d.ts.mapimport type { Meta, StoryObj } from '@storybook/react'; +import { Hero } from './Hero'; +type HeroStory = StoryObj; +export declare const Usage: HeroStory; +declare const meta: Meta; +export default meta; +//# sourceMappingURL=Hero.stories.d.ts.mapexport {}; +//# sourceMappingURL=Hero.test.d.ts.mapimport React from 'react'; +/** + * @public + */ +export type HeroProps = { + name: string; + children: string; + img: string; +}; +/** + * @public + */ +export declare const Hero: ({ name, children, img }: HeroProps) => React.JSX.Element; +//# sourceMappingURL=Hero.d.ts.mapimport type { Meta, StoryObj } from '@storybook/react'; +import { RelatedComponent } from './RelatedComponent'; +type RelatedComponentStory = StoryObj; +export declare const Usage: RelatedComponentStory; +declare const meta: Meta; +export default meta; +//# sourceMappingURL=RelatedComponent.stories.d.ts.mapimport React from 'react'; +/** + * @public + */ +export type RelatedComponentProps = { + name: string; + desc?: string; + onClick?: () => void; + children: React.ReactNode; +}; +/** + * @public + */ +export declare const RelatedComponent: ({ name, desc, children, onClick }: RelatedComponentProps) => React.JSX.Element; +/** + * @public + */ +export type RelatedComponentContainerProps = { + children: React.ReactNode; +}; +/** + * @public + */ +export declare const RelatedComponentContainer: ({ children }: RelatedComponentContainerProps) => React.JSX.Element; +//# sourceMappingURL=RelatedComponent.d.ts.mapexport {}; +//# sourceMappingURL=RelatedComponent.test.d.ts.mapexport {}; +//# sourceMappingURL=PasswordInput.spec.d.ts.mapimport React from 'react'; +import { PasswordInput } from './PasswordInput'; +declare const _default: { + title: string; + component: typeof PasswordInput; +}; +export default _default; +export declare const Basic: () => React.JSX.Element; +export declare const WithTitle: () => React.JSX.Element; +export declare const WithProgressBar: () => React.JSX.Element; +export declare const WithCustomRegex: () => React.JSX.Element; +export declare const UpdatePasswordForm: () => React.JSX.Element; +//# sourceMappingURL=PasswordInput.stories.d.ts.mapimport React from 'react'; +import { type FlexProps } from '../Flex/Flex'; +import { type PaletteColor, type PaletteFamilyName } from '../theme/theme'; +/** + * @public + */ +export 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 PasswordInput({ id, isValid, label, hasProgressBar, progressBarSteps, regexChecks, value, onChange, autoComplete, ...props }: PasswordInputProps): React.JSX.Element; +export declare namespace PasswordInput { + var defaultProps: { + hasProgressBar: boolean; + progressBarSteps: { + color: string; + text: string; + }[]; + progressBarDefaultStep: number; + regexChecks: { + label: string; + regex: RegExp; + }[]; + }; +} +//# sourceMappingURL=PasswordInput.d.ts.mapimport React from 'react'; +/** + * @public + */ +export type ChatHeaderProps = { + children: React.ReactNode; + onClose: () => void; + onMinimize: () => void; +}; +/** + * @public + */ +export declare function ChatHeader({ children, onClose, onMinimize }: ChatHeaderProps): React.JSX.Element; +//# sourceMappingURL=ChatHeader.d.ts.mapimport type { StoryObj } from '@storybook/react'; +import { ChatHeader, type ChatHeaderProps } from './ChatHeader'; +declare const _default: { + title: string; + component: typeof ChatHeader; + argTypes: { + onClose: { + action: boolean; + }; + onMinimize: { + action: boolean; + }; + }; +}; +export default _default; +type ChatHeaderStory = StoryObj; +export declare const _ChatHeader: ChatHeaderStory; +//# sourceMappingURL=ChatHeader.stories.d.ts.map/// +import { BottomProps, LeftProps, RightProps, TopProps, ZIndexProps } from 'styled-system'; +import { BoxProps } from '../Box/Box'; +/** + * @public + */ +export type AbsoluteProps = BoxProps & TopProps & RightProps & BottomProps & LeftProps & ZIndexProps; +/** + * @public + */ +export declare const Absolute: React.FC; +//# sourceMappingURL=Absolute.d.ts.mapexport {}; +//# sourceMappingURL=Absolute.spec.d.ts.mapimport React from 'react'; +declare const _default: { + title: string; + component: React.FC; +}; +export default _default; +export declare const OverAnImage: () => React.JSX.Element; +export declare const PositioningAnIcon: () => React.JSX.Element; +export declare const MultipleAbsolutelyPositionedBoxes: () => React.JSX.Element; +//# sourceMappingURL=Absolute.stories.d.ts.mapimport React from 'react'; +/** + * @public + */ +export type ChatMessageSeparatorProps = { + message?: string; +}; +/** + * @public + */ +export declare function ChatMessageSeparator({ message }: ChatMessageSeparatorProps): React.JSX.Element; +//# sourceMappingURL=ChatMessageSeparator.d.ts.mapimport React from 'react'; +import { ChatMessageSeparator } from './ChatMessageSeparator'; +declare const _default: { + title: string; + component: typeof ChatMessageSeparator; + args: { + message: string; + }; +}; +export default _default; +export declare const _ChatMessageSeparator: { + render: (args: any) => React.JSX.Element; +}; +export declare const WithMessage: { + render: (args: any) => React.JSX.Element; +}; +//# sourceMappingURL=ChatMessageSeparator.stories.d.ts.mapexport {}; +//# sourceMappingURL=Popout.spec.d.ts.mapimport React, { RefObject } from 'react'; +/** + * @public + */ +export interface PopoutProps { + trigger: JSX.Element; + content?: JSX.Element | undefined; + triggerRef?: RefObject; + onOpen?: () => void; + onClose?: () => void; + closeOnTriggerRefClick?: boolean; +} +/** + * @public + */ +export declare function Popout(props: PopoutProps): React.JSX.Element; +//# sourceMappingURL=Popout.d.ts.mapimport React from 'react'; +import { Popout } from '../Popout/Popout'; +declare const _default: { + component: typeof Popout; +}; +export default _default; +export declare const Basic: () => React.JSX.Element; +export declare const IconPopout: () => React.JSX.Element; +export declare const FormFieldExample: () => React.JSX.Element; +export declare const TabFocusing: () => React.JSX.Element; +//# sourceMappingURL=Popout.stories.d.ts.mapexport {}; +//# sourceMappingURL=BackgroundImage.spec.d.ts.mapimport React from 'react'; +declare const _default: { + title: string; + component: React.FC; + args: { + height: string; + image: string; + variation: string; + }; + argTypes: { + variation: { + name: string; + type: { + name: string; + required: boolean; + }; + description: string; + table: { + type: { + summary: string; + detail: string; + }; + defaultValue: { + summary: string; + }; + }; + control: { + type: string; + options: string[]; + }; + }; + borderRadius: { + name: string; + type: { + name: string; + }; + options: string[]; + description: string; + control: { + type: string; + }; + }; + rounded: { + name: string; + type: { + name: string; + }; + options: string[]; + description: string; + control: { + type: string; + }; + }; + height: { + name: string; + type: { + name: string; + required: boolean; + }; + description: string; + table: { + defaultValue: { + summary: any; + }; + }; + }; + width: { + name: string; + type: { + name: string; + required: boolean; + }; + description: string; + table: { + defaultValue: { + summary: any; + }; + }; + }; + image: { + name: string; + type: { + name: string; + required: boolean; + }; + description: string; + table: { + defaultValue: { + summary: any; + }; + }; + }; + backgroundPosition: { + name: string; + type: { + name: string; + required: boolean; + }; + description: string; + options: string[]; + control: { + type: string; + }; + table: { + defaultValue: { + summary: string; + }; + }; + }; + }; + decorators: ((story: any) => React.JSX.Element)[]; + parameters: { + docs: { + description: { + component: string; + }; + }; + }; +}; +export default _default; +export declare const _BackgroundImage: any; +export declare const FixedHeight: any; +export declare const FixedIntHeight: any; +export declare const Responsive: any; +export declare const Rounded: any; +export declare const BackgroundPosition: any; +//# sourceMappingURL=BackgroundImage.stories.d.ts.mapimport React from 'react'; +import { BorderRadiusProps, HeightProps, WidthProps } from 'styled-system'; +/** + * @public + */ +export declare const backgroundPositionList: string[]; +/** + * @public + */ +export 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 BackgroundImage: React.FC; +//# sourceMappingURL=BackgroundImage.d.ts.mapexport declare const defaultArgs: { + height: string; + image: string; + variation: string; +}; +export declare const argTypes: { + variation: { + name: string; + type: { + name: string; + required: boolean; + }; + description: string; + table: { + type: { + summary: string; + detail: string; + }; + defaultValue: { + summary: string; + }; + }; + control: { + type: string; + options: string[]; + }; + }; + borderRadius: { + name: string; + type: { + name: string; + }; + options: string[]; + description: string; + control: { + type: string; + }; + }; + rounded: { + name: string; + type: { + name: string; + }; + options: string[]; + description: string; + control: { + type: string; + }; + }; + height: { + name: string; + type: { + name: string; + required: boolean; + }; + description: string; + table: { + defaultValue: { + summary: any; + }; + }; + }; + width: { + name: string; + type: { + name: string; + required: boolean; + }; + description: string; + table: { + defaultValue: { + summary: any; + }; + }; + }; + image: { + name: string; + type: { + name: string; + required: boolean; + }; + description: string; + table: { + defaultValue: { + summary: any; + }; + }; + }; + backgroundPosition: { + name: string; + type: { + name: string; + required: boolean; + }; + description: string; + options: string[]; + control: { + type: string; + }; + table: { + defaultValue: { + summary: string; + }; + }; + }; +}; +//# sourceMappingURL=BackgroundImage.stories.args.d.ts.mapimport React from 'react'; +import { BorderRadiusProps, FontSizeProps, SpaceProps } from 'styled-system'; +import type { ColorSchemeName } from '../theme'; +/** + * @public + */ +export type StampProps = SpaceProps & FontSizeProps & BorderRadiusProps & { + bg?: string; + borderColor?: string; + children?: React.ReactNode; + color?: string; + size?: 'small' | 'medium'; + variation?: 'outline' | 'fill' | 'solid'; + colorScheme?: ColorSchemeName; +}; +/** + * @public + */ +export declare const Stamp: React.FC; +//# sourceMappingURL=Stamp.d.ts.mapexport {}; +//# sourceMappingURL=Stamp.spec.d.ts.mapimport React from 'react'; +declare const _default: { + title: string; + component: React.FC; + parameters: { + docs: { + description: { + component: string; + }; + }; + }; + argTypes: { + borderRadius: { + name: string; + type: { + name: string; + }; + options: string[]; + description: string; + control: { + type: string; + }; + }; + }; +}; +export default _default; +export declare const StampComponent: any; +export declare const CustomBackgroundAndBorderColor: () => React.JSX.Element; +export declare const CustomTextSize: () => React.JSX.Element; +export declare const PassAnArrayOfSizes: () => React.JSX.Element; +export declare const ColorSchemes: any; +//# sourceMappingURL=Stamp.stories.d.ts.mapexport declare const argTypes: { + borderRadius: { + name: string; + type: { + name: string; + }; + options: string[]; + description: string; + control: { + type: string; + }; + }; +}; +//# sourceMappingURL=Stamp.stories.args.d.ts.map/// +import { type FloatingActionButtonProps } from '../FloatingActionButton/FloatingActionButton'; +/** + * @public + */ +export type ChatTriggerProps = FloatingActionButtonProps; +/** + * @public + */ +export declare function ChatTrigger(props: FloatingActionButtonProps): JSX.Element; +//# sourceMappingURL=ChatTrigger.d.ts.mapimport React from 'react'; +import { ChatTrigger } from './ChatTrigger'; +declare const _default: { + title: string; + component: typeof ChatTrigger; + args: { + hasNotification: boolean; + tooltip: string; + }; + argTypes: { + onClick: { + action: boolean; + }; + }; + decorators: ((Story: any) => React.JSX.Element)[]; +}; +export default _default; +export declare const _ChatTrigger: { + play: ({ args, canvasElement }: { + args: any; + canvasElement: any; + }) => Promise; + render: (args: any) => React.JSX.Element; +}; +export declare const FloatingActionButton: { + render: (args: any) => React.JSX.Element; +}; +export declare const WithNotification: { + render: (args: any) => React.JSX.Element; +}; +//# sourceMappingURL=ChatTrigger.stories.d.ts.mapimport React from 'react'; +declare const _default: { + title: string; + component: React.FC & { + isIconButton?: boolean; + }; +}; +export default _default; +export declare const Default: () => React.JSX.Element; +export declare const WithColor: () => React.JSX.Element; +export declare const WithSize: () => React.JSX.Element; +export declare const WithDisabled: () => React.JSX.Element; +export declare function ForwardRefs(): React.JSX.Element; +//# sourceMappingURL=IconButton.stories.d.ts.mapexport {}; +//# sourceMappingURL=IconButton.spec.d.ts.mapimport React from 'react'; +import { type ButtonProps } from '../Button/Button'; +/** + * @public + */ +export type IconButtonProps = ButtonProps & { + icon: React.ReactNode; + autoFocus?: boolean; +}; +/** + * @public + */ +export declare const IconButton: React.FC & { + isIconButton?: boolean; +}; +//# sourceMappingURL=IconButton.d.ts.mapexport declare const defaultArgs: {}; +export declare const argTypes: { + textStyle: { + name: string; + type: { + name: string; + }; + options: string[]; + description: string; + control: { + type: string; + }; + }; +}; +//# sourceMappingURL=Text.stories.args.d.ts.mapexport {}; +//# sourceMappingURL=Text.spec.d.ts.map/// +import { DisplayProps, FontSizeProps, FontStyleProps, FontWeightProps, HeightProps, LineHeightProps, MaxHeightProps, MaxWidthProps, MinHeightProps, MinWidthProps, OverflowProps, SpaceProps, TextAlignProps, TextStyleProps, WidthProps, ZIndexProps } from 'styled-system'; +/** + * @public + */ +export declare const caps: (props: any) => { + textTransform: string; +}; +export declare const regular: (props: any) => { + fontWeight: any; +}; +export declare const bold: (props: any) => { + fontWeight: any; +}; +export declare const textDecoration: (props: any) => string; +export declare const textShadow: (props: any) => { + textShadow: any; +}; +export 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 Text: any; +//# sourceMappingURL=Text.d.ts.mapimport React from 'react'; +declare const _default: { + title: string; + component: any; + args: {}; + argTypes: { + textStyle: { + name: string; + type: { + name: string; + }; + options: string[]; + description: string; + control: { + type: string; + }; + }; + }; + parameters: { + docs: { + description: { + component: string; + }; + }; + }; +}; +export default _default; +export declare const TextStyle: any; +export declare const TextStyleGallery: () => React.JSX.Element; +export declare const TextStyleResponsive: any; +export declare const FontSize: () => React.JSX.Element; +export declare const FontStyle: () => React.JSX.Element; +export declare const TextAlign: () => React.JSX.Element; +export declare const TextDecoration: () => React.JSX.Element; +export declare const TextTransform: () => React.JSX.Element; +export declare const Regular: () => React.JSX.Element; +export declare const Bold: () => React.JSX.Element; +export declare const Caps: () => React.JSX.Element; +export declare const Italic: () => React.JSX.Element; +export declare const Strikethrough: () => React.JSX.Element; +export declare const Margin: () => React.JSX.Element; +export declare const Color: () => React.JSX.Element; +export declare const ReactiveColor: any; +export declare const MinMaxHeight: () => React.JSX.Element; +export declare const HideOnLgBreakpoints: () => React.JSX.Element; +export declare const Span: () => React.JSX.Element; +export declare const Paragraph: () => React.JSX.Element; +export declare const ResponsiveTypographyVsFontSize: () => React.JSX.Element; +export declare const ColorSchemes: any; +//# sourceMappingURL=Text.stories.d.ts.mapexport {}; +//# sourceMappingURL=Select.spec.d.ts.mapexport declare const defaultArgs: { + disabled: boolean; +}; +export declare const argTypes: { + borderRadius: { + name: string; + type: { + name: string; + }; + options: string[]; + description: string; + control: { + type: string; + }; + }; + disabled: { + name: string; + type: { + name: string; + }; + defaultValue: boolean; + }; + size: { + name: string; + type: { + name: string; + }; + options: string[]; + description: string; + control: { + type: string; + }; + }; +}; +//# sourceMappingURL=Select.stories.args.d.ts.mapimport React from 'react'; +declare const _default: { + title: string; + component: React.FC & { + isField?: boolean; + }; + args: { + disabled: boolean; + }; + argTypes: { + borderRadius: { + name: string; + type: { + name: string; + }; + options: string[]; + description: string; + control: { + type: string; + }; + }; + disabled: { + name: string; + type: { + name: string; + }; + defaultValue: boolean; + }; + size: { + name: string; + type: { + name: string; + }; + options: string[]; + description: string; + control: { + type: string; + }; + }; + }; +}; +export default _default; +export declare const _Select: any; +export declare const Disabled: any; +export declare const LongOptionString: () => React.JSX.Element; +export declare const HiddenLabel: () => React.JSX.Element; +export declare function ForwardRefs(): React.JSX.Element; +//# sourceMappingURL=Select.stories.d.ts.mapimport React from 'react'; +import { FontSizeProps, SpaceProps } from 'styled-system'; +import { BorderRadius, PaletteColor } from '../theme/theme'; +/** + * @public + */ +export declare const selectSizes: { + sm: any; + md: any; + lg: any; + xl: any; +}; +/** + * @public + */ +export type SelectSizes = keyof typeof selectSizes; +/** + * @public + */ +export type SelectProps = SpaceProps & FontSizeProps & Omit, 'size'> & { + children?: React.ReactNode; + color?: PaletteColor; + borderRadius?: BorderRadius; + size?: SelectSizes; + ref?: React.Ref>; +}; +/** + * @public + */ +export declare const Select: React.FC & { + isField?: boolean; +}; +//# sourceMappingURL=Select.d.ts.mapexport declare const Icon: any; +//# sourceMappingURL=Icon.d.ts.mapexport { Absolute, type AbsoluteProps } from './Absolute/Absolute'; +export { Accordion, type AccordionItemProps, type AccordionProps } from './Accordion/Accordion'; +export { Animate, type AnimateProps, type MotionVariant, type TransitionVariant } from './Animate/Animate'; +export { Avatar, type AvatarProps } from './Avatar/Avatar'; +export { BackgroundImage, backgroundPositionList, type BackgroundImageProps, } from './BackgroundImage/BackgroundImage'; +export { Badge, type BadgeProps } from './Badge/Badge'; +export { Banner, type BannerProps } from './Banner/Banner'; +export { BlockLink } from './BlockLink/BlockLink'; +export { Box, type BoxProps } from './Box/Box'; +export { BreadcrumbLink, type BreadcrumbLinkProps } from './Breadcrumbs/BreadcrumbLink'; +export { Breadcrumbs, type BreadcrumbsProps } from './Breadcrumbs/Breadcrumbs'; +export { Button, type ButtonProps, type ButtonSizes, type ButtonVariations, type StyledButtonProps, } from './Button/Button'; +export { Card, type CardProps } from './Card/Card'; +export { ChatActionContainer, type ChatActionContainerProps, type IChatAction, } from './ChatActionContainer/ChatActionContainer'; +export { ChatHeader, type ChatHeaderProps } from './ChatHeader/ChatHeader'; +export { ChatMessage, ChatMessageVariations, type ChatMessageProps } from './ChatMessage/ChatMessage'; +export { ChatMessageContainer, type ChatMessageContainerProps, type ChatMessageIMessage, type ChatMessageVariation, } from './ChatMessageContainer/ChatMessageContainer'; +export { ChatMessageSeparator, type ChatMessageSeparatorProps, } from './ChatMessageSeparator/ChatMessageSeparator'; +export { ChatTrigger, type ChatTriggerProps } from './ChatTrigger/ChatTrigger'; +export { Checkbox, type CheckboxProps } from './Checkbox/Checkbox'; +export { ButtonChip, type ButtonChipProps, type ButtonChipVariation } from './Chip/ButtonChip/ButtonChip'; +export { ChipContent, type ChipContentProps, type ChipContentVariation, type IconComponent, } from './Chip/ChipContent/ChipContent'; +export { ChoiceChip, type ChoiceChipProps, type ChoiceChipVariations } from './Chip/ChoiceChip/ChoiceChip'; +export { FilterChip as Chip, FilterChip, type FilterChipProps, type FilterChipVariation, } from './Chip/FilterChip/FilterChip'; +export { CloseButton, type CloseButtonProps } from './CloseButton/CloseButton'; +export { closeButtonSizes, closeButtonVariants, type CloseButtonSize, type CloseButtonVariant, } from './CloseButton/CloseButton.styled'; +export { Container, type ContainerProps, type ContainerSize } from './Container/Container'; +export { Dialog, type DialogProps } from './Dialog/Dialog'; +export { dialogSizes, type DialogSize } from './Dialog/Dialog.styled'; +export { Divider, type DividerProps } from './Divider/Divider'; +export { DotLoader, dotLoaderSizes, dotLoaderSpeeds, type DotLoaderProps, type DotLoaderSizes, type DotLoaderSpeeds, } from './DotLoader/DotLoader'; +export { Flag, type FlagProps } from './Flag/Flag'; +export { Flex, type FlexProps } from './Flex/Flex'; +export { FloatingActionButton, type FloatingActionButtonProps, } from './FloatingActionButton/FloatingActionButton'; +export { FormField, FormField as InputField, type FormFieldProps } from './FormField/FormField'; +export { GenericBanner, type GenericBannerNode, type GenericBannerProps } from './GenericBanner/GenericBanner'; +export { Grid, type GridProps } from './Grid/Grid'; +export { Heading } from './Heading/Heading'; +export { Hide, type HideProps } from './Hide/Hide'; +export { Hug, type HugProps } from './Hug/Hug'; +export { Icon } from './Icon/Icon'; +export { IconButton, type IconButtonProps } from './IconButton/IconButton'; +export { IconField, type IconFieldProps } from './IconField/IconField'; +export { Image, type ImageProps } from './Image/Image'; +export { Input, type InputProps } from './Input/Input'; +export { InputGroup, type InputGroupProps } from './InputGroup/InputGroup'; +export { Label, type LabelProps } from './Label/Label'; +export { ALLOWED_GAP_VALUES, ALLOWED_LAYOUT_VALUES, Layout, type LayoutGap, type LayoutProps, type LayoutVariation, } from './Layout/Layout'; +export { Link, type LinkProps } from './Link/Link'; +export { List, listStyles, tabSpacingSize, type ListIndentSize, type ListListStyle, type ListProps, } from './List/List'; +export { Motion, type MotionProps } from './Motion/Motion'; +export { PasswordInput, type PasswordInputProps } from './PasswordInput/PasswordInput'; +export { PlaceholderImage, type PlaceholderImageProps } from './PlaceholderImage/PlaceholderImage'; +export { Popout, type PopoutProps } from './Popout/Popout'; +export { ProgressBar, type ProgressBarProps } from './ProgressBar/ProgressBar'; +export { Radio, type RadioProps } from './Radio/Radio'; +export { RadioCheckToggleCard, RadioCheckToggleCardCardTypes, RadioCheckToggleCardHPositions, RadioCheckToggleCardVPositions, type RadioCheckToggleCardProps, type TCardTypes, type THPositions, type TVPositions, } from './RadioCheckToggleCard/RadioCheckToggleCard'; +export { RatingBadge, type RatingBadgeProps } from './RatingBadge/RatingBadge'; +export { Relative, type RelativeProps } from './Relative/Relative'; +export { Select, selectSizes, type SelectProps, type SelectSizes } from './Select/Select'; +export { ShadowEffect, ShadowOverlay, type ShadowEffectProps } from './ShadowEffect/ShadowEffect'; +export { Shimmer, type ShimmerProps } from './Shimmer/Shimmer'; +export { type ShimmerVariation, type ShimmerVariationType } from './Shimmer/constants'; +export { SkipMenu, type SkipMenuProps } from './SkipMenu/SkipMenu'; +export { type ArrowPosition } from './SlideBox/Arrow'; +export { SlideBox, type SlideBoxProps } from './SlideBox/SlideBox'; +export { Spinner, type SpinnerProps, type SpinnerSizes } from './Spinner/Spinner'; +export { SrOnly } from './SrOnly/SrOnly'; +export { Stamp, type StampProps } from './Stamp/Stamp'; +export { Step, type StepProps } from './Step/Step'; +export { Stepper, type StepperProps } from './Stepper/Stepper'; +export { Swatch, type SwatchProps } from './Swatch/Swatch'; +export { Text, type TextProps } from './Text/Text'; +export { TextArea, type TextAreaProps } from './TextArea/TextArea'; +export { Base, ThemeProvider, type ThemeProviderProps } from './ThemeProvider/ThemeProvider'; +export { Toast, type ToastProps } from './Toast/Toast'; +export { ToastProvider, useToast, type ToastContextProps, type ToastOptions, type ToastProviderProps, } from './ToastProvider/ToastProvider'; +export { Toggle, type ToggleProps } from './Toggle/Toggle'; +export { ToggleBadge, type ToggleBadgeProps } from './ToggleBadge/ToggleBadge'; +export { Tooltip, type TooltipProps } from './Tooltip/Tooltip'; +export { Truncate } from './Truncate/Truncate'; +export * from './utils'; +export { createTheme } from './utils/createTheme'; +export * from './theme'; +export type { PaletteColorPaletteFamily, PaletteColorPaletteFamilyOption, PaletteFamily } from './theme/theme'; +export { DoDont, type DoDontProps } from './DocsUtils/DoDont/DoDont'; +export { DocTable, type DocTableProps } from './DocsUtils/DocTable/DocTable'; +export { Hero, type HeroProps } from './DocsUtils/Hero/Hero'; +export { Note, type NoteProps } from './DocsUtils/Note/Note'; +export { RelatedComponent, RelatedComponentContainer, type RelatedComponentContainerProps, type RelatedComponentProps, } from './DocsUtils/RelatedComponent/RelatedComponent'; +export { Section, type SectionProps } from './DocsUtils/Section/Section'; +export { StoryHeading, type StoryHeadingProps } from './DocsUtils/StoryHeading/StoryHeading'; +export { StoryStage, type StoryStageProps } from './DocsUtils/StoryStage/StoryStage'; +export { TableOfContents, type TableOfContentsProps } from './DocsUtils/TableOfContents/TableOfContents'; +export { storybookArgs } from './storybook/args'; +//# sourceMappingURL=index.d.ts.mapimport React from 'react'; +/** + * @public + */ +export type ChatActionContainerProps = { + chatActions: IChatAction[]; +}; +/** + * @public + */ +export interface IChatAction { + label: string; + onClick: () => void; +} +/** + * @public + */ +export declare function ChatActionContainer({ chatActions }: ChatActionContainerProps): React.JSX.Element; +//# sourceMappingURL=ChatActionContainer.d.ts.mapimport type { StoryObj } from '@storybook/react'; +import { ChatActionContainer, ChatActionContainerProps } from './ChatActionContainer'; +declare const _default: { + title: string; + component: typeof ChatActionContainer; +}; +export default _default; +type ChatActionContainerStory = StoryObj; +export declare const _TwoChatActions: ChatActionContainerStory; +export declare const _ThreeChatActions: ChatActionContainerStory; +//# sourceMappingURL=ChatActionContainer.stories.d.ts.mapimport React from 'react'; +declare const _default: { + title: string; + component: React.FC; +}; +export default _default; +export declare const Basic: () => React.JSX.Element; +export declare const Wrap: () => React.JSX.Element; +export declare const Justify: () => React.JSX.Element; +export declare const DeprecatedBgShim: () => React.JSX.Element; +//# sourceMappingURL=Flex.stories.d.ts.mapexport {}; +//# sourceMappingURL=Flex.spec.d.ts.mapimport React from 'react'; +import { AlignContentProps, AlignItemsProps, FlexDirectionProps, FlexWrapProps, JustifyContentProps, SpaceProps, WidthProps } from 'styled-system'; +import { type BoxProps } from '../Box/Box'; +/** + * @public + */ +export type FlexProps = BoxProps & SpaceProps & WidthProps & AlignItemsProps & JustifyContentProps & AlignContentProps & FlexWrapProps & FlexDirectionProps; +/** + * @public + */ +export declare const Flex: React.FC; +//# sourceMappingURL=Flex.d.ts.mapimport React from 'react'; +declare const _default: { + title: string; + component: React.FC & { + Link: React.FC; + }; +}; +export default _default; +export declare const Basic: () => React.JSX.Element; +export declare const Icons: () => React.JSX.Element; +export declare const ForwardRefsToLinks: { + (): React.JSX.Element; + story: { + name: string; + }; +}; +//# sourceMappingURL=Breadcrumbs.stories.d.ts.mapimport React from 'react'; +/** + * @public + */ +export type BreadcrumbLinkProps = React.RefAttributes & { + className?: string; + isLastChild?: boolean; + href?: string; + icon?: React.ReactNode; + label?: string; + onClick?: (unknown: any) => unknown; +}; +/** + * @public + */ +export declare const BreadcrumbLink: React.FC; +//# sourceMappingURL=BreadcrumbLink.d.ts.mapimport React from 'react'; +import { type BreadcrumbLinkProps } from './BreadcrumbLink'; +/** + * @public + */ +export type BreadcrumbsProps = { + className?: string; + children?: React.ReactNode; +}; +/** + * @public + */ +export declare const Breadcrumbs: React.FC & { + Link: React.FC; +}; +//# sourceMappingURL=Breadcrumbs.d.ts.mapexport {}; +//# sourceMappingURL=Breadcrumbs.spec.d.ts.mapexport declare const argTypes: { + borderRadius: { + name: string; + type: { + name: string; + }; + options: string[]; + description: string; + control: { + type: string; + }; + }; +}; +//# sourceMappingURL=ToggleBadge.stories.args.d.ts.mapimport React from 'react'; +declare const _default: { + title: string; + component: React.FC; + parameters: { + docs: { + description: { + component: string; + }; + }; + }; + argTypes: { + borderRadius: { + name: string; + type: { + name: string; + }; + options: string[]; + description: string; + control: { + type: string; + }; + }; + }; +}; +export default _default; +export declare const ToggleBadgeComponent: any; +export declare const Selected: () => React.JSX.Element; +export declare const Unselected: () => React.JSX.Element; +export declare const UnselectedWithDifferentBackgroundColor: () => React.JSX.Element; +export declare const AGroup: () => React.JSX.Element; +export declare function ForwardRefs(): React.JSX.Element; +//# sourceMappingURL=ToggleBadge.stories.d.ts.mapexport {}; +//# sourceMappingURL=ToggleBadge.spec.d.ts.mapimport React from 'react'; +import { FontSizeProps, SpaceProps } from 'styled-system'; +/** + * @public + */ +export type ToggleBadgeProps = { + borderRadius?: string; + selected?: boolean; + color?: string; + bg?: string; + unSelectedBg?: string; +} & SpaceProps & FontSizeProps & React.HTMLAttributes & React.RefAttributes; +/** + * @public + */ +export declare const ToggleBadge: React.FC; +//# sourceMappingURL=ToggleBadge.d.ts.mapimport React from 'react'; +declare const _default: { + title: string; + component: any; +}; +export default _default; +export declare const ScreenreaderDescriptionOfContent: () => React.JSX.Element; +//# sourceMappingURL=SrOnly.stories.d.ts.mapexport declare const SrOnly: any; +//# sourceMappingURL=SrOnly.d.ts.mapexport {}; +//# sourceMappingURL=SrOnly.spec.d.ts.mapimport React from 'react'; +import { Banner } from './Banner'; +declare const _default: { + title: string; + component: typeof Banner; +}; +export default _default; +export declare const AllBgs: () => React.JSX.Element; +export declare const AllBgsHeaderOnly: () => React.JSX.Element; +export declare const AllBgsTextOnly: () => React.JSX.Element; +export declare const SansCloseButton: () => React.JSX.Element; +export declare const SansIcon: () => React.JSX.Element; +export declare const WithoutIconOrCloseButton: () => React.JSX.Element; +export declare const SansCloseButtonTextOnly: () => React.JSX.Element; +export declare const SansIconTextOnly: () => React.JSX.Element; +export declare const CustomHeaderAsNode: () => React.JSX.Element; +export declare const WithoutIconOrCloseButtonTextOnly: () => React.JSX.Element; +export declare const WithCustomIconsAndSizes: () => React.JSX.Element; +export declare const WithChildren: () => React.JSX.Element; +export declare const ColorScheme: () => React.JSX.Element[]; +//# sourceMappingURL=Banner.stories.d.ts.mapimport React from 'react'; +import { type BoxProps } from '../Box/Box'; +/** + * @public + */ +export type BannerColor = { + backgroundColor?: string; + color?: string; + icon?: React.ReactElement; +}; +/** + * @public + */ +export type BannerProps = BoxProps & { + bg?: string; + color?: string; + children?: React.ReactNode; + header?: string | React.ReactNode; + icon?: React.ReactElement; + onClose?: () => void; + showIcon?: boolean; + text?: string | React.ReactNode; + textAlign?: string; +}; +/** + * @public + */ +export declare function Banner(props: BannerProps): React.ReactElement; +export declare namespace Banner { + var displayName: string; + var defaultProps: { + textAlign: string; + showIcon: boolean; + color: string; + }; +} +//# sourceMappingURL=Banner.d.ts.mapexport {}; +//# sourceMappingURL=Banner.spec.d.ts.map/** + * @public + */ +export declare enum ShimmerVariationType { + Base = "base", + Light = "light", + Dark = "dark" +} +/** + * @public + */ +export type ShimmerVariation = 'base' | 'light' | 'dark'; +export declare const VARIATION_BACKGROUND_COLORS: { + base: string; + light: string; + dark: string; +}; +export declare const VARIATION_GLARE_GRADIENTS: { + base: string; + light: string; + dark: string; +}; +//# sourceMappingURL=constants.d.ts.mapexport {}; +//# sourceMappingURL=Shimmer.spec.d.ts.mapimport React from 'react'; +import { Shimmer } from './Shimmer'; +declare const _default: { + title: string; + component: typeof Shimmer; +}; +export default _default; +export declare const Default: () => React.JSX.Element; +export declare const ComposedAsSkeletonLoader: () => React.JSX.Element; +export declare const LightSkeletonLoader: () => React.JSX.Element; +export declare const DarkSkeletonLoader: () => React.JSX.Element; +//# sourceMappingURL=Shimmer.stories.d.ts.map/// +import { type BoxProps } from '../Box/Box'; +import { ShimmerVariationType, type ShimmerVariation } from './constants'; +/** + * @public + */ +export type ShimmerProps = BoxProps & { + animationWidth?: number; + className?: string; + disable?: boolean; + variation?: ShimmerVariation; +}; +/** + * @public + */ +export declare function Shimmer({ animationWidth, disable, ...props }: ShimmerProps): JSX.Element; +export declare namespace Shimmer { + var defaultProps: { + animationWidth: number; + disable: boolean; + variation: ShimmerVariationType; + }; +} +//# sourceMappingURL=Shimmer.d.ts.mapimport React from 'react'; +import { SpaceProps } from 'styled-system'; +import { PaletteFamilyName } from '../theme/theme'; +/** + * @public + */ +export type InputGroupProps = SpaceProps & { + borderColor?: PaletteFamilyName; + children?: React.ReactNode; +}; +/** + * @public + */ +export declare const InputGroup: React.FC; +//# sourceMappingURL=InputGroup.d.ts.mapimport React from 'react'; +declare const _default: { + title: string; + component: React.FC & { + isField?: boolean; + HelperText?: React.FC; + }; + parameters: { + docs: { + description: { + component: string; + }; + }; + }; +}; +export default _default; +export declare const InputComponent: () => React.JSX.Element; +export declare const Colors: () => React.JSX.Element; +export declare function ForwardRefs(): React.JSX.Element; +export declare const WithExternalLabel: () => React.JSX.Element; +export declare const GroupedInputs: () => React.JSX.Element; +//# sourceMappingURL=InputGroup.stories.d.ts.mapexport {}; +//# sourceMappingURL=InputGroup.spec.d.ts.mapimport type { Meta, StoryObj } from '@storybook/react'; +import { Grid, type GridProps } from '../Grid/Grid'; +type GridStory = StoryObj; +export declare const Playground: GridStory; +export declare const TemplateAreas: GridStory; +export declare const NestedGrids: GridStory; +export declare const ResponsiveLayout: GridStory; +declare const meta: Meta; +export default meta; +//# sourceMappingURL=Grid.stories.d.ts.mapexport {}; +//# sourceMappingURL=Grid.spec.d.ts.mapimport React from 'react'; +import { FlexboxProps, GridProps as SSGridProps } from 'styled-system'; +import { type ColorSchemeName, type IStyledSystemProps } from '../theme/theme'; +/** + * @public + */ +export interface GridProps extends IStyledSystemProps { + children?: React.ReactNode; + gap?: SSGridProps['gridGap']; + rowGap?: SSGridProps['gridRowGap']; + columnGap?: SSGridProps['gridColumnGap']; + column?: SSGridProps['gridColumn']; + row?: SSGridProps['gridRow']; + area?: SSGridProps['gridArea']; + autoFlow?: SSGridProps['gridAutoFlow']; + autoRows?: SSGridProps['gridAutoRows']; + autoColumns?: SSGridProps['gridAutoColumns']; + templateRows?: SSGridProps['gridTemplateRows']; + templateColumns?: SSGridProps['gridTemplateColumns']; + templateAreas?: SSGridProps['gridTemplateAreas']; + placeItems?: FlexboxProps['alignItems']; + colorScheme?: ColorSchemeName; +} +/** + * @public + */ +export declare const Grid: (props: GridProps) => React.JSX.Element; +//# sourceMappingURL=Grid.d.ts.mapexport {}; +//# sourceMappingURL=Badge.spec.d.ts.mapimport React from 'react'; +declare const _default: { + title: string; + component: React.FC; + parameters: { + docs: { + description: { + component: string; + }; + }; + }; + argTypes: { + borderRadius: { + name: string; + type: { + name: string; + }; + options: string[]; + description: string; + control: { + type: string; + }; + }; + bg: { + name: string; + type: { + name: string; + }; + options: string[]; + description: string; + control: { + type: string; + }; + }; + color: { + name: string; + type: { + name: string; + }; + options: string[]; + description: string; + control: { + type: string; + }; + }; + textTransform: { + name: string; + type: { + name: string; + }; + options: string[]; + description: string; + control: { + type: string; + }; + }; + size: { + name: string; + control: string; + options: string[]; + defaultValue: string; + }; + }; +}; +export default _default; +export declare const _Badge: any; +export declare const TextCustom: any; +export declare const LightBlueAndTextCustom: any; +export declare const TextTransforms: any; +export declare const ColorSchemes: any; +//# sourceMappingURL=Badge.stories.d.ts.mapexport declare const argTypes: { + borderRadius: { + name: string; + type: { + name: string; + }; + options: string[]; + description: string; + control: { + type: string; + }; + }; + bg: { + name: string; + type: { + name: string; + }; + options: string[]; + description: string; + control: { + type: string; + }; + }; + color: { + name: string; + type: { + name: string; + }; + options: string[]; + description: string; + control: { + type: string; + }; + }; + textTransform: { + name: string; + type: { + name: string; + }; + options: string[]; + description: string; + control: { + type: string; + }; + }; + size: { + name: string; + control: string; + options: string[]; + defaultValue: string; + }; +}; +//# sourceMappingURL=Badge.stories.args.d.ts.map/// +import { SpaceProps } from 'styled-system'; +import type { ColorSchemeName } from '../theme/theme'; +/** + * @public + */ +export type BadgeProps = SpaceProps & React.HtmlHTMLAttributes & { + size?: 'small' | 'medium'; + color?: string; + bg?: string; + borderRadius?: string; + colorScheme?: ColorSchemeName; + textTransform?: string; +}; +/** + * @public + */ +export declare const Badge: React.FC; +//# sourceMappingURL=Badge.d.ts.mapimport { Calendar, Close, User, Visibility } from 'pcln-icons' +import React from 'react' +import { IconButton } from '../IconButton/IconButton' +import { Input } from '../Input/Input' +import { render, screen } from '../__test__/testing-library' +import { IconField } from './IconField' + +describe('IconField', () => { + it('renders', () => { + render( + + + + + ) + + screen.getByTestId('icon-field') + screen.getAllByTitle('calendar') + screen.getByPlaceholderText('IconField') + }) + + it('renders icon button', () => { + render( + + + } /> + + ) + + screen.getByPlaceholderText('IconField') + screen.getAllByTitle('close') + screen.getByRole('button') + }) + + it('renders icon, input and icon button together', () => { + render( + + + + } /> + + ) + + screen.getAllByTitle('calendar') + screen.getByPlaceholderText('IconField') + screen.getAllByTitle('close') + screen.getByRole('button') + }) + + it('does not render unknown children', () => { + render( + + 
Does not render
+ + ) + expect(screen.queryByTestId('icon-field')).not.toBeInTheDocument() + }) + + it('does not add styles for no icons', () => { + render( + + + + ) + + const prefixIconWrapper = screen.queryByTestId('icon-field-prefix-icons') + const suffixIconWrapper = screen.queryByTestId('icon-field-suffix-icons') + const input = screen.getByPlaceholderText('IconField') + + expect(prefixIconWrapper).not.toBeInTheDocument() + expect(suffixIconWrapper).not.toBeInTheDocument() + expect(input).not.toHaveStyleRule('padding-left') + expect(input).not.toHaveStyleRule('padding-right') + }) + + it('adds styles for single icons', () => { + render( + + + + + + ) + + const calendarIcon = screen.getAllByTitle('calendar')[0] + const closeIcon = screen.getAllByTitle('close')[0] + const prefixIconWrapper = screen.getByTestId('icon-field-prefix-icons') + const suffixIconWrapper = screen.getByTestId('icon-field-suffix-icons') + const input = screen.getByPlaceholderText('IconField') + + expect(calendarIcon).toHaveStyleRule('margin-left', '8px') + expect(calendarIcon).toHaveStyleRule('margin-right', '8px') + expect(closeIcon).toHaveStyleRule('margin-left', '8px') + expect(closeIcon).toHaveStyleRule('margin-right', '8px') + + expect(prefixIconWrapper).toHaveStyleRule('margin-right', '-40px') + expect(suffixIconWrapper).toHaveStyleRule('margin-left', '-40px') + expect(input).toHaveStyleRule('padding-left', '40px') + expect(input).toHaveStyleRule('padding-right', '40px') + }) + + it('adds styles for multiple icons', () => { + render( + + + + + + + + ) + + const prefixIconWrapper = screen.getByTestId('icon-field-prefix-icons') + const suffixIconWrapper = screen.getByTestId('icon-field-suffix-icons') + const input = screen.getByPlaceholderText('IconField') + + const calendarIcon = screen.getAllByTitle('calendar')[0] + const closeIcon = screen.getAllByTitle('close')[0] + + expect(prefixIconWrapper).toHaveStyleRule('margin-right', '-80px') + expect(suffixIconWrapper).toHaveStyleRule('margin-left', '-80px') + expect(input).toHaveStyleRule('padding-left', '80px') + expect(input).toHaveStyleRule('padding-right', '80px') + + expect(calendarIcon).toHaveStyleRule('margin-left', '0px') + expect(calendarIcon).toHaveStyleRule('margin-right', '8px') + expect(closeIcon).toHaveStyleRule('margin-left', '8px') + expect(closeIcon).toHaveStyleRule('margin-right', '0px') + }) +}) +import { action } from '@storybook/addon-actions' +import { + Calendar as CalendarIcon, + Check as CheckIcon, + Close as CloseIcon, + Visibility as VisibilityIcon, +} from 'pcln-icons' +import React from 'react' +import { IconButton } from '../IconButton/IconButton' +import { Input } from '../Input/Input' +import { Select } from '../Select/Select' +import { IconField } from './IconField' + +export default { + title: 'IconField', + component: IconField, +} + +export const IconAndInput = () => ( + + + + +) + +export const InputAndIcon = () => ( + + + + +) + +export const InputWithMultipleIcons = () => ( + + + + + + + +) + +export const InputAndIconButton = () => ( + + + } + color='gray' + title='Clear text' + onClick={action('Icon button clicked')} + /> + +) + +export const IconInputAndIcon = () => ( + + + + + +) + +export const IconInputAndIconButton = () => ( + + + + } + color='gray' + title='Clear text' + onClick={action('Icon button clicked')} + /> + +) + +export const IconAndSelect = () => ( + + + + +) +import React from 'react' +import { Flex } from '../Flex/Flex' + +/** + * @public + */ +export type IconFieldProps = { + children: React.ReactNode +} + +/** + * @public + */ +export function IconField(props: IconFieldProps) { + const isIcon = (item) => item.type.isIcon || item.type.isIconButton + + const children = React.Children.toArray(props.children).filter( + // @ts-ignore + (child) => child?.type.isField || isIcon(child) + ) + + if (children.length === 0) { + return null + } + + // @ts-ignore + const inputIndex = children && children.findIndex((child) => child.type.isField) + + const prefixIcons = children.slice(0, inputIndex) + const input = children[inputIndex] + const suffixIcons = children.slice(inputIndex + 1, children.length) + + const paddingLeft = prefixIcons.length > 0 ? prefixIcons.length * 40 : undefined + const paddingRight = suffixIcons.length > 0 ? suffixIcons.length * 40 : undefined + + const marginRight = prefixIcons.length > 0 ? -(prefixIcons.length * 40) : undefined + const marginLeft = suffixIcons.length > 0 ? -(suffixIcons.length * 40) : undefined + + return ( + + {prefixIcons.length > 0 && ( + + {prefixIcons.map((icon, index) => + React.cloneElement(icon as React.ReactElement, { ml: index === 0 ? 2 : 0, mr: 2 }) + )} + + )} + {input && React.cloneElement(input as React.ReactElement, { pl: paddingLeft, pr: paddingRight })} + {suffixIcons.length > 0 && ( + + {suffixIcons.map((icon, index) => + React.cloneElement(icon as React.ReactElement, { ml: 2, mr: index === 0 ? 2 : 0 }) + )} + + )} + + ) +} +import React from 'react' +import { render } from '../__test__/testing-library' +import { PlaceholderImage } from './PlaceholderImage' + +describe('PlaceholderImage', () => { + it('should use the default height and width when not specified', () => { + const { getByAltText } = render() + + const placeholderImage = getByAltText('Random image used for placeholder content') + expect(placeholderImage).toHaveStyleRule('height', '500px') + expect(placeholderImage).toHaveStyleRule('width', '500px') + }) + + it('should use provided height and width', () => { + const { getByAltText } = render() + + const placeholderImage = getByAltText('Random image used for placeholder content') + + expect(placeholderImage).toHaveStyleRule('height', '300px') + expect(placeholderImage).toHaveStyleRule('width', '600px') + }) + + it('should use a blurred image', () => { + const { getByAltText } = render() + + const placeholderImage = getByAltText('Random image used for placeholder content') + + expect(placeholderImage).toHaveAttribute('src', 'https://picsum.photos/500/500?blur') + }) + + it('should allow the user to specify a placeholder service via chooseSrc', () => { + const { getByAltText } = render() + + const placeholderImage = getByAltText('Random image used for placeholder content') + + expect(placeholderImage).toHaveAttribute('src', 'http://placeimg.com/500/500/any') + }) + + it('should apply the `alt` attribute as specified', () => { + const { getByAltText } = render() + + getByAltText('Test alt text here') + }) +}) +import React from 'react' +import styled from 'styled-components' +import { Image } from '../Image/Image' + +const RandomImage = styled(Image)` + height: ${(props) => props.height}px; + width: ${(props) => props.width}px; +` + +const determineSRC = (blur, chooseSrc, height, width) => { + const imageURLs = [ + `http://placeimg.com/${width}/${height}/any`, + `http://placekitten.com/${width}/${height}`, + `https://picsum.photos/${width}/${height}`, + `https://source.unsplash.com/${width}x${height}`, + `https://www.fillmurray.com/${width}/${height}`, + ] + + if (blur || chooseSrc) { + return blur ? `https://picsum.photos/${width}/${height}?blur` : imageURLs[chooseSrc] + } + + const randomNum = Math.floor(Math.random() * imageURLs.length) + return imageURLs[randomNum] +} + +/** + * @public + */ +export type PlaceholderImageProps = React.ImgHTMLAttributes & { + ariaHidden?: boolean + blur?: boolean + chooseSrc?: string + height?: string + width?: string +} + +/** + * @public + */ +export function PlaceholderImage(props: PlaceholderImageProps) { + const { alt, ariaHidden, blur, chooseSrc, className, height, width } = props + + return ( + + ) +} + +PlaceholderImage.displayName = 'PlaceholderImage' + +PlaceholderImage.defaultProps = { + ariaHidden: true, + blur: false, + height: '500', + width: '500', +} +import React from 'react' +import { MockToastChildren } from '../__test__/mocks/toasts' +import { ToastProvider } from './ToastProvider' + +export default { + title: 'Core / ToastProvider', + component: ToastProvider, + argTypes: { + lifespan: { + description: 'Lifespan in milliseconds before the Toast closes.', + }, + variation: { + control: 'select', + options: ['border', 'fill'], + defaultValue: 'fill', + }, + }, +} + +const Template = (args) => ( + + + +) + +export const _ToastProvider = Template.bind({}) + +export const TopAnimation = (args) => ( + + + +) +import React, { createContext, useCallback, useContext, useEffect, useState } from 'react' +import { createPortal } from 'react-dom' +import styled, { withTheme } from 'styled-components' +import { Absolute } from '../Absolute/Absolute' +import { Animate, type MotionVariant } from '../Animate/Animate' +import { Flex } from '../Flex/Flex' +import { ThemeProvider } from '../ThemeProvider/ThemeProvider' +import { Toast, type ToastProps } from '../Toast/Toast' + +/** + * @public + */ +export type ToastOptions = ToastProps & { + enterAnimation?: MotionVariant + exitAnimation?: MotionVariant + removed?: boolean +} + +/** + * @public + */ +export type ToastContextProps = { + addToast: (options: ToastOptions) => void + removeToast: (id: number) => void +} + +const ClickthroughAbsolute = styled(Absolute)` + pointer-events: none; +` + +/* istanbul ignore next */ +export const ToastContext = createContext({ addToast: () => {}, removeToast: () => {} }) + +/** + * @public + */ +export const useToast = () => { + return useContext(ToastContext) +} + +/** + * @public + */ +export type ToastProviderProps = { + children: React.ReactNode + domRootId?: string + enterAnimation?: MotionVariant + exitAnimation?: MotionVariant + lifespan?: number + maxToasts?: number + theme: unknown + top?: number + bottom?: number +} + +let id = 0 + +function _ToastProvider({ + children, + domRootId = 'root', + enterAnimation = 'slideInLeft', + exitAnimation = 'slideOutLeft', + lifespan, + maxToasts = 3, + theme, + bottom = 20, + top, +}: ToastProviderProps) { + const [toasts, setToasts] = useState([]) + + const addToast = useCallback((options: ToastOptions) => { + setToasts((prevToasts) => [...prevToasts, { ...options, id: id++ }]) + }, []) + + const removeToast = useCallback((id: number) => { + setToasts((prevToasts) => + prevToasts.map((toast) => (toast.id === id ? { ...toast, removed: true } : toast)) + ) + }, []) + + useEffect(() => { + toasts.forEach((toast) => { + if (toast.removed) { + setTimeout(() => { + setToasts((prevToasts) => prevToasts.filter((t) => t.id !== toast.id)) + }, 200) + } + }) + }, [toasts, setToasts]) + + const toastsToRender = toasts.slice(0, maxToasts) + + return ( + + {children} + {createPortal( + + + + + {toastsToRender.map((toast) => { + const enterAnim = toast.enterAnimation || enterAnimation + const exitAnim = toast.exitAnimation || exitAnimation + + return ( + + + + ) + })} + + + + , + document.getElementById(domRootId) + )} + + ) +} +/** + * @public + */ +export const ToastProvider = withTheme(_ToastProvider) +jest.useFakeTimers() + +jest.mock('react-dom', () => ({ + ...jest.requireActual('react-dom'), + createPortal: (children) => children, +})) + +import React from 'react' +import { MockToastChildren } from '../__test__/mocks/toasts' +import { act, fireEvent, render, screen } from '../__test__/testing-library' +import { ToastProvider } from './ToastProvider' + +// TODO: fix the tests that involve closing toasts +describe('ToastProvider', () => { + it('renders success toast and clears it', async () => { + render( + + + + ) + + expect(screen.queryByText('Success Toast Message')).not.toBeInTheDocument() + fireEvent.click(screen.queryByText('Add Success Toast')) + expect(screen.queryByText('Success Toast Message')).toBeInTheDocument() + + screen.getAllByRole('button') + // const closeIcon = screen.getAllByTitle('close-toast')[0] + + // act(() => { + // fireEvent.click(closeIcon) + // jest.runAllTimers() + // }) + + // expect(screen.queryByText('Success Toast Message')).not.toBeInTheDocument() + }) + + it('renders the max number of toasts', () => { + render( + + + + ) + + expect(screen.queryByText('Success Toast')).not.toBeInTheDocument() + fireEvent.click(screen.queryByText('Add Success Toast')) + fireEvent.click(screen.queryByText('Add Success Toast')) + fireEvent.click(screen.queryByText('Add Success Toast')) + fireEvent.click(screen.queryByText('Add Success Toast')) + fireEvent.click(screen.queryByText('Add Success Toast')) + expect(screen.queryAllByText('Success Toast Message').length).toBe(4) + + act(() => { + fireEvent.click(screen.getAllByRole('button')[0]) + jest.runAllTimers() + }) + + expect(screen.queryAllByText('Success Toast Message').length).toBe(4) + + // act(() => { + // fireEvent.click(screen.getAllByTitle('close-toast')[0]) + // jest.runAllTimers() + // }) + + // expect(screen.queryAllByText('Success Toast Message').length).toBe(3) + }) + + it('renders a custom toast', () => { + render( + + + + ) + + expect(screen.queryByText('Custom Toast Message')).not.toBeInTheDocument() + fireEvent.click(screen.queryByText('Add Custom Toast')) + expect(screen.queryByText('Custom Toast Message')).toBeInTheDocument() + }) +}) +import { themeGet } from '@styled-system/theme-get' +import styled from 'styled-components' +import { Box } from '../Box/Box' +import { Button } from '../Button/Button' + +export const StyledButton = styled(Button)` + &:hover { + box-shadow: ${themeGet('shadows.overlay-lg')}; + } +` + +export const NotificationDot = styled(Box)` + border: 1px solid rgba(255, 255, 255, 0.75); +` +import { expect } from '@storybook/jest' +import { userEvent, within } from '@storybook/testing-library' +import { Cars, Chat } from 'pcln-icons' +import React from 'react' +import { Relative } from '../Relative/Relative' +import { FloatingActionButton } from './FloatingActionButton' + +export default { + title: 'FloatingActionButton', + component: FloatingActionButton, + args: { + hasNotification: false, + icon: Chat, + tooltip: 'Tooltip text', + }, + argTypes: { + onClick: { action: true }, + }, + decorators: [ + (Story) => ( + + + + ), + ], +} + +export const _FloatingActionButton = { + play: async ({ args, canvasElement }) => { + const canvas = within(canvasElement) + + await userEvent.click(canvas.getByRole('button')) + await expect(args.onClick).toHaveBeenCalled() + }, + render: (args) => , +} + +export const WithNotification = { + render: (args) => , +} + +export const WithCarsIcon = { + render: (args) => , +} + +export const BottomRight = { + render: (args) => ( + + + + ), +} +import React, { useState } from 'react' +import { Absolute, type AbsoluteProps } from '../Absolute/Absolute' +import { Animate } from '../Animate/Animate' +import { Box } from '../Box/Box' +import { Tooltip } from '../Tooltip/Tooltip' +import { NotificationDot, StyledButton } from './FloatingActionButton.styled' + +/** + * @public + */ +export type FloatingActionButtonProps = AbsoluteProps & { + hasNotification?: boolean + icon: React.Component + tooltip?: string + onClick: () => void +} + +/** + * @public + */ +export function FloatingActionButton({ + hasNotification, + icon, + tooltip, + onClick, + ...props +}: FloatingActionButtonProps): JSX.Element { + const [isTooltipOpen, setTooltipOpen] = useState(false) + + function onMouseOver() { + setTooltipOpen(true) + } + + function onMouseOut() { + setTooltipOpen(false) + } + + return ( + + {hasNotification && ( + + + + + + )} + {isTooltipOpen && ( + + {tooltip} + + )} + + + ) +} +import React from 'react' +import { theme } from '../theme/theme' +import { Flag } from './Flag' + +describe('Flag', () => { + let consoleError + beforeEach(() => { + consoleError = console.error + console.error = jest.fn() + }) + afterEach(() => (console.error = consoleError)) + + test('renders', () => { + const json = rendererCreateWithTheme().toJSON() + expect(json).toMatchSnapshot() + }) + + test('renders with width prop', () => { + const json = rendererCreateWithTheme().toJSON() + expect(json).toMatchSnapshot() + expect(json).toHaveStyleRule('width', '256px') + }) + + test('renders with theme color as bg color', () => { + const json = rendererCreateWithTheme().toJSON() + expect(json).toMatchSnapshot() + expect(json.children[1]).toHaveStyleRule('background-color', theme.colors.purple) + }) +}) +import { Loyalty as LoyaltyIcon } from 'pcln-icons' +import React from 'react' +import { Box } from '../Box/Box' +import { Card } from '../Card/Card' +import { Flex } from '../Flex/Flex' +import { Text } from '../Text/Text' +import { Flag } from './Flag' + +export default { + title: 'Flag', + component: Flag, +} + +export const Default = () => ( + + + Hello Flag + Hello + + +) + +export const Colors = () => ( + + + + Hello Orange + + + Hello Blue + + + Hello Purple + + + +) + +export const CompensatingFor1PxBorder = () => ( + + + + Hello + + + +) + +export const WrappedText = () => ( + + + + Hello + This is a really long string of text that should wrap when it gets too long. But then the flag part to + the right will probably break. + + + +) + +export const WithIcon = () => ( + + + + + + Hello World + + + + +) + +export const WithCustomPadding = () => ( + + + + + Hello World + + + + +) +import themeGet from '@styled-system/theme-get' +import React from 'react' +import styled from 'styled-components' +import { SpaceProps, WidthProps } from 'styled-system' +import { Box } from '../Box/Box' +import { Flex } from '../Flex/Flex' +import { Hide } from '../Hide/Hide' +import { ColorProp } from '../theme/theme' +import { applyVariations, color, getPaletteColor, hasPaletteColor } from '../utils/utils' + +const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1) + +const shadowColor = (props) => { + const darkColor = hasPaletteColor(props) + ? getPaletteColor('dark')(props) + : themeGet(`colors.dark${capitalize(props.color)}`)(props) + + return { + backgroundImage: !darkColor + ? ` + linear-gradient(45deg, transparent 50%, rgba(0, 0, 0, 0.5) 50%), + linear-gradient(45deg, transparent 50%, ${props.color} 50%) + ` + : `linear-gradient(45deg, transparent 50%, ${darkColor} 50%)`, + } +} + +const FlagShadow = styled(Box)` + width: 8px; + height: 8px; + align-self: flex-end; + background-color: inherit; + ${shadowColor}; + position: absolute; + bottom: 0; +` + +const FlagRight = styled(Box)` + flex: none; + background-color: ${(props) => getPaletteColor('base')(props) || props.color}; + border-radius: 0 ${themeGet('radius')} ${themeGet('radius')} 0; + /* for 32 x 8 triangle */ + transform: skew(-14deg); + position: relative; + z-index: 1; +` + +const flexAuto = (props) => + props.flexAuto + ? { + flex: '1 1 auto', + } + : null + +const FlagBody = styled(Box)` + font-size: ${themeGet('fontSizes.0')}px; + border-radius: 0 0 ${themeGet('radius')} 0; + ${flexAuto} ${color}; + z-index: 2; +` + +const RelativeHide = styled(Hide)` + position: relative; +` + +const StyledFlex = styled(Flex)` + ${applyVariations('Flag')} +` + +/** + * @public + */ +export type FlagProps = SpaceProps & + WidthProps & { + children?: React.ReactNode + color?: ColorProp + bg?: ColorProp + } + +/** + * @public + */ +export const Flag: React.FC = ({ color, bg, children, pl, pr, py, width, ...props }) => ( + + + + + + {children} + + + +) + +Flag.defaultProps = { + color: 'white', + bg: 'green', + pl: [1, 3], + pr: null, + py: [1, 2], +} + +Flag.displayName = 'Flag' +import { HTMLMotionProps, motion, Transition } from 'framer-motion' +import React from 'react' + +/** + * @public + */ +export type TransitionVariant = 'default' | 'spring' | 'comeAndGo' | 'slow' + +/** + * @public + */ +export const TransitionVariants: Record = { + default: { duration: 0.25, ease: 'easeInOut' }, + spring: { type: 'spring', duration: 0.75, bounce: 0.5 }, + slow: { duration: 3 }, + comeAndGo: { repeat: 1, repeatType: 'reverse', duration: 0.25 }, +} + +/** + * @public + */ +export type MotionVariant = + | 'expandDown' + | 'fadeIn' + // | 'schwoop' + | 'growFromTopLeft' + | 'pulse' + | 'scaleFromCenter' + | 'scaleFromTopLeft' + | 'scaleOnHover' + | 'scaleOnTap' + | 'slideOutLeft' + | 'slideInLeft' + | 'slideInTop' + | 'slideOutTop' + +/** + * @public + */ +export const MotionVariants: Record> = { + expandDown: { + initial: { scaleY: 0, originY: 0, height: 0 }, + animate: { scaleY: 1, height: 'auto' }, + }, + fadeIn: { + initial: { opacity: 0 }, + animate: { opacity: 1 }, + }, + // schwoop: { + // initial: { scale: 0, width: 0, height: 0 }, + // animate: { scale: 1, width: 'auto', height: 'auto' }, + // }, + growFromTopLeft: { + initial: { scale: 0, originY: 0, originX: 0, width: 0, height: 0 }, + animate: { scale: 1, width: 'auto', height: 'auto' }, + }, + pulse: { + initial: { borderRadius: '100%', boxShadow: '0 0 0 0px rgba(0, 0, 0, 0.0)' }, + animate: { boxShadow: '0 0 0 4px rgba(0, 0, 0, 0.3)' }, + transition: { duration: 1, repeat: Infinity, repeatType: 'reverse' }, + }, + scaleFromCenter: { + initial: { scale: 0 }, + animate: { scale: 1 }, + }, + scaleFromTopLeft: { + initial: { scale: 0, originY: 0, originX: 0 }, + animate: { scale: 1 }, + }, + scaleOnHover: { + whileHover: { scale: 1.1 }, + }, + scaleOnTap: { + whileTap: { scale: 0.9 }, + }, + slideOutLeft: { + initial: { opacity: 1, x: 0 }, + animate: { opacity: 0, x: '-100%' }, + }, + slideInLeft: { + initial: { opacity: 0, x: '-100%' }, + animate: { opacity: 1, x: 0 }, + }, + slideInTop: { + initial: { opacity: 0, y: '-100%' }, + animate: { opacity: 1, y: 0 }, + }, + slideOutTop: { + initial: { opacity: 1, y: 0 }, + animate: { opacity: 0, y: '-100%' }, + }, +} + +/** + * @public + */ +export type AnimateProps = { + children: React.ReactNode + variant: MotionVariant + transition?: TransitionVariant + override?: HTMLMotionProps<'div'> +} + +/** + * @public + */ +export const Animate = (props: AnimateProps) => { + const { children, variant, transition, override } = props + return ( + + {children} + + ) +} +/* eslint-disable jsx-a11y/accessible-emoji */ +import { expect } from '@storybook/jest' +import type { Meta, StoryObj } from '@storybook/react' +import { userEvent, within } from '@storybook/testing-library' +import React, { useState } from 'react' +import { Box } from '../Box/Box' +import { Button } from '../Button/Button' +import { ChoiceChip } from '../Chip/ChoiceChip/ChoiceChip' +import { Flex } from '../Flex/Flex' +import { Image } from '../Image/Image' +import { Text } from '../Text/Text' +import { Animate, MotionVariant, MotionVariants, TransitionVariant, TransitionVariants } from './Animate' + +const meta: Meta = { + component: Animate, +} + +export default meta +type Story = StoryObj + +export const Playground: Story = () => { + const [motion, setMotion] = useState('expandDown') + const [transition, setTransition] = useState('default') + const [isRendered, setIsRendered] = useState(true) + + const rerender = () => { + setIsRendered(false) + setTimeout(() => setIsRendered(true)) + } + + const handleMotionChange = (variant: MotionVariant) => { + setMotion(variant) + rerender() + } + + const handleTransitionChange = (variant: TransitionVariant) => { + setTransition(variant) + rerender() + } + + return ( + + + Motion Variants + + + {Object.keys(MotionVariants).map((variant) => ( + handleMotionChange(variant as MotionVariant)} + > + {variant} + + ))} + + + Transition Variants + + + {Object.keys(TransitionVariants).map((variant) => ( + handleTransitionChange(variant as TransitionVariant)} + > + {variant} + + ))} + + {isRendered && ( + + + + Hello 👋 + + + World 🌎 + + + + )} + + ) +} +const delay = (time: number) => new Promise((resolve) => setTimeout(resolve, time)) + +Playground.play = async ({ canvasElement }) => { + const canvas = within(canvasElement) + await userEvent.click(canvas.getByText('fadeIn')) + await delay(1000) + const playgroundContent = await canvas.getByTestId('playground-content') + await expect(playgroundContent).toBeTruthy() +} + +export const AnimatedListings = () => { + const [isRendered, setIsRendered] = useState(true) + + const rerender = () => { + setIsRendered(false) + setTimeout(() => setIsRendered(true)) + } + + return ( + + + + {isRendered && + Array.from(Array(10).keys()).map((i) => ( + + + random + + + 👈 Travel Here 🏨 ✈️ 🚙 + + + + + ))} + + ) +} + +export const ComposedAnimations = () => { + const [isRendered, setIsRendered] = useState(true) + + const rerender = () => { + setIsRendered(false) + setTimeout(() => setIsRendered(true)) + } + + return ( + + + + + + {isRendered && ( + + + + + + + + + + + + + + + + )} + + ) +} +import React, { useRef } from 'react' + +/** + * This is a demo component for Storybook that provides a ref to content using a render prop + */ +export default function ForwardRefsDemo({ refChild }) { + const dsRef = useRef(null) + + return <>{refChild(dsRef)} +} +import { colorSchemeNames as colorSchemeNamesArr, paletteFamilyNames, zIndices } from '../../theme' +import { + borderRadiusValues, + boxShadowSizeValues, + objectFitValues, + objectPositionValues, + roundedValues, + textStylesValues, +} from '../../utils' + +export const colorSchemeNames = colorSchemeNamesArr + +export const colors = ['', ...paletteFamilyNames, 'NOTVALID'] + +export const borderRadii = ['', ...borderRadiusValues, 'NOTVALID'] + +export const borderStyles = [ + 'none', + 'hidden', + 'dotted', + 'dashed', + 'solid', + 'double', + 'groove', + 'ridge', + 'inset', + 'outset', + 'initial', + 'inherit', +] + +export const rounded = ['', ...roundedValues, 'NOTVALID'] + +export const shadows = ['', ...boxShadowSizeValues, 'NOTVALID'] + +export const textStyles = ['', ...textStylesValues, 'NOTVALID'] + +export const inputArgs = ['sm', 'md', 'lg', 'xl'] + +export const spaceArgs = [ + 'm', + 'mt', + 'mr', + 'mb', + 'ml', + 'mx', + 'my', + 'p', + 'pt', + 'pr', + 'pb', + 'pl', + 'px', + 'py', +].reduce((acc, prop) => { + acc[prop] = { + name: prop, + type: { name: 'string' }, + description: prop, + table: { + disable: true, + }, + } + + return acc +}, {}) + +export const fontSizes = [0, 1, 2, 3, 4, 5, 6, 7, 8] +export const objectFits = ['', ...objectFitValues, 'NOTVALID'] +export const objectPositions = ['', ...objectPositionValues, 'NOTVALID'] +export const zIndicies = zIndices +export const chipWithShadowVariationArgs = [ + { label: 'Enabled', variation: 'shadow' }, + { label: 'Selected', selected: true, variation: 'shadow' }, + { label: 'Disabled', disabled: true, variation: 'shadow' }, + { label: 'Selected Disabled', disabled: true, selected: true, variation: 'shadow' }, +] + +/** + * @public + */ +export const storybookArgs = { + colorSchemeNames, + colors, + borderRadii, + borderStyles, + rounded, + shadows, + textStyles, + inputArgs, + spaceArgs, + fontSizes, + objectFits, + objectPositions, + zIndicies, + chipWithShadowVariationArgs, +} +import React from 'react' +import { Tooltip } from './Tooltip' + +describe('Tooltip', () => { + test('renders', () => { + const json = rendererCreateWithTheme(A Tooltip).toJSON() + expect(json).toMatchSnapshot() + }) + + test('top left', () => { + const json = rendererCreateWithTheme( + + left tooltip + + ).toJSON() + expect(json).toMatchSnapshot() + }) + test('top center', () => { + const json = rendererCreateWithTheme( + + centered tooltip + + ).toJSON() + expect(json).toMatchSnapshot() + }) + test('top right', () => { + const json = rendererCreateWithTheme( + + right tooltip + + ).toJSON() + expect(json).toMatchSnapshot() + }) + test('bottom left', () => { + const json = rendererCreateWithTheme( + + left tooltip + + ).toJSON() + expect(json).toMatchSnapshot() + }) + test('bottom center', () => { + const json = rendererCreateWithTheme( + + centered tooltip + + ).toJSON() + expect(json).toMatchSnapshot() + }) + test('bottom right', () => { + const json = rendererCreateWithTheme( + + right tooltip + + ).toJSON() + expect(json).toMatchSnapshot() + }) +}) +import { themeGet } from '@styled-system/theme-get' +import React from 'react' +import styled, { withTheme } from 'styled-components' +import { Box } from '../Box/Box' +import { PaletteColor } from '../theme/theme' +import { applyVariations, colorScheme, getPaletteColor } from '../utils/utils' + +const arrowShadow = (props) => { + return props.top + ? { + 'box-shadow': '-9.66px 9.66px 8px 0 rgba(0,0,0,0.04), -4px 4px 4px 0 rgba(0,0,0,0.08)', + } + : { + 'box-shadow': '-1.41px 1.41px 1px 0 rgba(0,0,0,0.01), -3.66px 3.66px 8px 0 rgba(0,0,0,0.04)', + } +} + +const arrowAlign = (props) => { + return props.left + ? { left: '16px', 'margin-left': props.top ? 0 : '15px' } + : props.center + ? { left: '50%', 'margin-left': props.top ? '-7px' : '7px' } + : { right: '16px', 'margin-right': props.top ? '5px' : '-10px' } +} + +const arrowPosition = (props) => { + return props.top + ? { + 'transform-origin': '0 0', + transform: 'rotate(-45deg)', + bottom: '-10px', + } + : { + 'transform-origin': '0 0', + transform: 'rotate(-225deg)', + top: '0', + } +} + +const arrow = (props) => { + return props.top + ? { + 'transform-origin': '0 0', + transform: 'rotate(-45deg)', + } + : { + 'transform-origin': '0 0', + transform: 'rotate(-225deg)', + } +} + +const tooltipPosition = (props) => { + return props.top ? { bottom: '-8px' } : { top: 0 } +} + +const tooltipAlign = (props) => { + return props.right + ? { right: 0 } + : props.center + ? { left: '50%', width: 'auto', transform: 'translateX(-50%)' } + : null +} + +const TooltipContent = styled(Box)` + display: inline; + font-size: ${({ theme }) => theme.fontSizes[0]}px; + position: absolute; + box-sizing: border-box; + background: ${(props) => getPaletteColor(props.bg || props.color, 'base')(props)}; + text-align: center; + + ${tooltipPosition} ${tooltipAlign} &::after { + content: ''; + position: absolute; + width: 0; + height: 0; + border-width: 5px; + border-style: solid; + border-color: transparent transparent + ${(props) => getPaletteColor(props.bg || props.color, 'base')(props)} + ${(props) => getPaletteColor(props.bg || props.color, 'base')(props)}; + + ${arrow} ${arrowPosition} ${arrowAlign} ${arrowShadow}; + ${(props) => { + const colorScheme = themeGet(`colorSchemes.${props.colorScheme}`)(props) + return colorScheme + ? ` + color: ${colorScheme.background}; + border-color: ${colorScheme.background}; + ` + : '' + }} + } + + ${colorScheme} + + ${applyVariations('Tooltip')} +` + +const defaultProps = { + borderRadius: 'md', + position: 'bottom', + color: 'background.lightest', + zIndex: 'auto', +} + +/** + * @public + */ +export type TooltipProps = { + children?: React.ReactNode + bg?: PaletteColor + color?: PaletteColor + bottom?: boolean + top?: boolean + center?: boolean + left?: boolean + right?: boolean + zIndex?: number | string +} + +function _Tooltip({ children, ...props }: TooltipProps): React.ReactElement { + return ( +
+ + {children} + +
+ ) +} + +_Tooltip.defaultProps = defaultProps + +/** + * @public + */ +export const Tooltip = withTheme(_Tooltip) +import { borderRadii } from '../storybook/args' + +export const argTypes = { + borderRadius: { + name: 'borderRadius', + type: { name: 'string' }, + options: borderRadii, + description: 'borderRadius', + control: { + type: 'select', + }, + }, +} +import { Bus, Check } from 'pcln-icons' +import React from 'react' +import styled from 'styled-components' +import { Box } from '../Box/Box' +import { Flex } from '../Flex/Flex' +import { FormField } from '../FormField/FormField' +import { Input } from '../Input/Input' +import { Label } from '../Label/Label' +import { colorSchemeNames } from '../storybook/args' +import { Tooltip } from './Tooltip' +import { argTypes } from './Tooltip.stories.args' + +const FlexColumn = styled(Flex)` + flex-direction: column; +` + +export default { + title: 'Tooltip', + component: Tooltip, + argTypes, +} + +const Template = (args) => I am a tooltip! + +export const TooltipComponent = Template.bind({}) +TooltipComponent.args = { color: 'primary' } + +export const WithoutAnchors = () => ( + + + left tooltip + + + centered tooltip + + + right tooltip + +
+ + left tooltip + + + centered tooltip + + + right tooltip + + +) + +export const WithAnchors = () => ( + + + + top left tooltip + +
some text
+ + +
some text
+ + bottom left tooltip + + + + + + + + + + bottom left tooltip + + + + + + + + + + bottom center tooltip + + + + + + + + + + Email Address Invalid + + + + + top left tooltip + + + + + + + + + + top center tooltip + + + + + + + + + + top right tooltip + + + + + + + + +) + +const ColorSchemesTemplate = () => { + return ( + + {colorSchemeNames.map((colorScheme) => ( + + + + + {colorScheme} + + + + + + + + + ))} + + ) +} +export const ColorSchemes = ColorSchemesTemplate.bind({}) +ColorSchemesTemplate.args = {} +import React from 'react' +import { render, screen } from '../__test__/testing-library' +import { DotLoader } from './DotLoader' + +describe('DotLoader', () => { + it('renders a dot loader', () => { + render() + + const container = screen.getByTestId('dot-loader') + const children = container.children + + expect(children).toHaveLength(3) + expect(children[0]).toHaveAttribute('color', 'primary') + expect(children[0]).toHaveStyleRule('animation', expect.stringContaining('2s ease infinite')) + expect(children[0]).toHaveStyleRule('animation-delay', '0s') + + expect(children[1]).toHaveAttribute('color', 'primary') + expect(children[1]).toHaveStyleRule('animation', expect.stringContaining('2s ease infinite')) + expect(children[1]).toHaveStyleRule('animation-delay', `${2 / 6}s`) + + expect(children[2]).toHaveStyleRule('animation-delay', `${4 / 6}s`) + }) + + it('renders a small and slow dot loader', () => { + render() + + const container = screen.getByTestId('dot-loader') + const children = container.children + + expect(children[0]).toHaveStyleRule('animation', 'eKaJJz 2.5s ease infinite') + expect(children[1]).toHaveStyleRule('animation-delay', `${2.5 / 6}s`) + expect(children[2]).toHaveStyleRule('animation-delay', `${5 / 6}s`) + }) + + it('renders a large and fast dot loader', () => { + render() + + const container = screen.getByTestId('dot-loader') + const children = container.children + + expect(children[0]).toHaveStyleRule('animation', 'eKaJJz 1s ease infinite') + expect(children[1]).toHaveStyleRule('animation-delay', `${1 / 6}s`) + expect(children[2]).toHaveStyleRule('animation-delay', `${2 / 6}s`) + }) +}) +import themeGet from '@styled-system/theme-get' +import React from 'react' +import styled, { css, keyframes } from 'styled-components' +import { Box } from '../Box/Box' +import { Flex } from '../Flex/Flex' +import { ColorName, PaletteColor, PaletteFamilyName } from '../theme/theme' +import { applySizes } from '../utils/utils' + +/** + * @public + */ +export const dotLoaderSizes = { + small: css` + height: 18px; + + & > * { + width: 8px; + height: 8px; + } + + & > :not(:last-child) { + margin-right: ${themeGet('space.3')}px; + } + `, + medium: css` + height: 21px; + + & > * { + width: 12px; + height: 12px; + } + + & > :not(:last-child) { + margin-right: ${themeGet('space.4')}px; + } + `, + large: css` + height: 24px; + + & > * { + width: 16px; + height: 16px; + } + + & > :not(:last-child) { + margin-right: ${themeGet('space.4')}px; + } + `, +} + +/** + * @public + */ +export type DotLoaderSizes = keyof typeof dotLoaderSizes | (keyof typeof dotLoaderSizes)[] + +/** + * @public + */ +export const dotLoaderSpeeds = { + slow: 2.5, + medium: 2, + fast: 1, +} + +/** + * @public + */ +export type DotLoaderSpeeds = keyof typeof dotLoaderSpeeds + +const getDelay = (duration, pos = 0) => { + return `${(duration / 6) * pos}s;` +} + +const animation = keyframes` + 0%, 20%, 100% { + transform: translateY(50%) scale(0); + } + 50% { + transform: translateY(-50%) scale(1); + } +` + +const Container = styled(Flex)` + justify-content: center; + align-items: center; + + ${applySizes(dotLoaderSizes, null)}; +` + +const Dot = styled(Box)` + border-radius: 50%; + transform: scale(0); + transform-origin: center; + animation: ${animation} ${(props) => props.duration}s ease infinite; + animation-delay: ${(props) => getDelay(props.duration, props.pos)}s; +` + +/** + * @public + */ +export type DotLoaderProps = { + color?: ColorName | PaletteFamilyName | PaletteColor + size?: DotLoaderSizes + speed?: DotLoaderSpeeds +} + +/** + * @public + */ +export function DotLoader({ color, size, speed, ...props }: DotLoaderProps) { + const duration = dotLoaderSpeeds[speed] + + return ( + + + + + + ) +} + +DotLoader.defaultProps = { + color: 'primary', + size: 'medium', + speed: 'medium', +} +import { colors } from '../storybook/args' + +export const sizes = ['small', 'medium', 'large'] + +export const speed = ['slow', 'medium', 'fast'] + +export const defaultArgs = { + size: 'medium', + speed: 'medium', + color: 'background', +} + +export const argTypes = { + size: { + name: 'size', + type: { name: 'string', required: false }, + description: 'Size to render.\nAccepts string or a number.', + table: { + type: { + summary: 'Sizes', + detail: '- ' + sizes.join('\n- '), + }, + defaultValue: { summary: 'medium' }, + }, + control: { + type: 'select', + options: sizes, + }, + }, + + speed: { + name: 'speed', + type: { name: 'string', required: false }, + description: 'Speed to render.\nAccepts string or a number.', + table: { + type: { + summary: 'Speeds', + detail: '- ' + speed.join('\n- '), + }, + defaultValue: { summary: 'medium' }, + }, + control: { + type: 'select', + options: speed, + }, + }, + + color: { + name: 'color', + type: { name: 'string', required: false }, + description: 'Palette color to use', + table: { + type: { + summary: 'Colors', + detail: '- ' + colors.join('\n- '), + }, + defaultValue: { summary: 'background' }, + }, + control: { + type: 'select', + options: colors, + }, + }, +} +import React, { useState } from 'react' +import { Box } from '../Box/Box' +import { Button } from '../Button/Button' +import { DotLoader } from './DotLoader' +import { argTypes, defaultArgs } from './DotLoader.stories.args' + +export default { + title: 'core / DotLoader', + component: DotLoader, + args: defaultArgs, + argTypes, +} + +const Template = (args) => { + const [isLoading, setLoading] = useState(false) + + function onClick() { + setLoading(true) + setTimeout(() => setLoading(false), 3000) + } + + return ( + + + + ) +} + +export const _DotLoader = Template.bind({}) + +export const Fast = Template.bind({}) +Fast.args = { speed: 'fast' } + +export const Responsive = Template.bind({}) +Responsive.args = { size: ['small', null, 'medium', null, 'large'] } +Responsive.parameters = { viewport: { defaultViewport: 'designSystem_sm' } } +import React, { useState } from 'react' +import { Box } from '../Box/Box' +import { Flex } from '../Flex/Flex' +import { Text } from '../Text/Text' +import { Swatch } from './Swatch' + +export default { + title: 'Swatch', + component: Swatch, +} + +export const SingleColor = () => + +export const MultipleColors = () => + +export const Wrap = () => ( + + + +) + +export const SelectColor = () => { + const [color, setColor] = useState('#D50032') + return ( + <> + setColor(color)} /> + + Color: + {color} + + + ) +} +import React from 'react' +import { fireEvent, render } from '../__test__/testing-library' +import { Swatch } from './Swatch' + +const mockColors = ['red', 'green', 'blue'] + +describe('Swatch', () => { + it('should render correctly', () => { + const { getByTestId } = render() + + mockColors.map((color, idx) => { + expect(getByTestId(`${idx}-${color}`)).toHaveStyle(`background-color: ${color}`) + expect(getByTestId(`${idx}-${color}`)).toHaveStyle(`border: 1px solid #c0cad5}`) + }) + }) + + it('should call onClick callback with selected color value', () => { + const mockOnClick = jest.fn() + + const { getByTestId } = render() + + mockColors.map((color, idx) => { + expect(getByTestId(`${idx}-${color}`)).toHaveStyle('cursor: pointer') + + fireEvent.click(getByTestId(`${idx}-${color}`)) + expect(mockOnClick).toHaveBeenLastCalledWith(color) + }) + }) + + it('does not crash when onClick callback is not provided', () => { + const mockOnClick = jest.fn() + + const { getByTestId } = render() + + mockColors.map((color, idx) => { + expect(getByTestId(`${idx}-${color}`)).toHaveStyle('cursor: default') + + fireEvent.click(getByTestId(`${idx}-${color}`)) + expect(mockOnClick).toHaveBeenCalledTimes(0) + }) + }) +}) +import React from 'react' +import styled from 'styled-components' +import { Flex } from '../Flex/Flex' +import { getPaletteColor } from '../utils/utils' + +const SwatchColor = styled.div` + height: 24px; + width: 24px; + background-color: ${(props) => props.color}; + border-radius: 50%; + border: 1px solid ${getPaletteColor('border.base')}; + display: flex; + margin: 4px; + cursor: ${(props) => (props.onClick ? 'pointer' : 'default')}; +` + +/** + * @public + */ +export type SwatchProps = { + colors: string[] + onClick?: (color: string) => void +} + +/** + * @public + */ +export function Swatch({ colors, onClick, ...props }: SwatchProps): React.ReactElement { + return ( + + {colors.map((color, idx) => ( + onClick(color) : undefined} + /> + ))} + + ) +} + +Swatch.displayName = 'Swatch' +import React from 'react' +import { render } from '../__test__/testing-library' +import { theme } from '../theme/theme' +import { Box } from './Box' + +describe('Box', () => { + test('renders', () => { + const json = rendererCreateWithTheme().toJSON() + expect(json).toMatchSnapshot() + }) + + test('width and height props set width/height', () => { + const json = rendererCreateWithTheme().toJSON() + expect(json).toMatchSnapshot() + expect(json).toHaveStyleRule('height', '50%') + expect(json).toHaveStyleRule('width', '50%') + }) + + test('m prop sets margin', () => { + const json = rendererCreateWithTheme().toJSON() + expect(json).toMatchSnapshot() + expect(json).toHaveStyleRule('margin', theme.space[2]) + }) + + test('maxHeight, maxWidth, minHeight, minWidth', () => { + const json = rendererCreateWithTheme( + + ).toJSON() + expect(json).toMatchSnapshot() + expect(json).toHaveStyleRule('max-height', '250px') + expect(json).toHaveStyleRule('max-width', '250px') + expect(json).toHaveStyleRule('min-height', '55px') + expect(json).toHaveStyleRule('min-width', '55px') + }) + + test('p prop sets padding', () => { + const json = rendererCreateWithTheme().toJSON() + expect(json).toMatchSnapshot() + expect(json).toHaveStyleRule('padding', theme.space[2]) + }) + + test('color prop sets color', () => { + const json = rendererCreateWithTheme().toJSON() + expect(json).toMatchSnapshot() + expect(json).toHaveStyleRule('color', theme.colors.blue) + }) + + test('boxShadowSize prop sets box-shadow', () => { + const json = rendererCreateWithTheme().toJSON() + expect(json).toMatchSnapshot() + expect(json).toHaveStyleRule('box-shadow', theme.shadows.sm) + }) + + test('overflow prop sets overflow', () => { + const { asFragment, getByTestId } = render() + expect(asFragment()).toMatchSnapshot() + expect(getByTestId('Box')).toHaveStyleRule('overflow', 'scroll') + }) +}) +import { Star } from 'pcln-icons' +import React from 'react' +import styled from 'styled-components' +import { Flex } from '../Flex/Flex' +import { Text } from '../Text/Text' +import { colorSchemeNames } from '../storybook/args' +import { Box } from './Box' +import { argTypes, defaultArgs } from './Box.stories.args' + +export default { + title: 'core / Box', + component: Box, + args: defaultArgs, + argTypes, + + parameters: { + docs: { + description: { + component: `A low-level layout component for setting color, display, height, margin, maxHeight, maxWidth, minHeight, minWidth, padding, size, textAlign, and width.`, + }, + }, + }, +} + +const Template = (args) => ( + + Hello! + +) + +export const _Box = Template.bind({}) + +export const DisplayAndSize = Template.bind({}) +DisplayAndSize.storyName = 'Display and Size' +DisplayAndSize.args = { + color: 'alert.base', + display: ['none', null, 'block'], + size: 250, +} + +export const Padding = Template.bind({}) +Padding.args = { + p: 4, + color: 'background.base', +} + +export const Height = Template.bind({}) +Height.args = { + color: 'warning.base', + height: ['250px', '350px', '450px', '550px'], + width: ['150px', '250px', '350px', '450px'], +} + +export const MaxAndMinValues = Template.bind({}) +MaxAndMinValues.storyName = 'Min and Max Values' +MaxAndMinValues.args = { + color: 'priceSecondary.base', + maxHeight: ['300px', null, '400px', null, '500px'], + maxWidth: ['300px', null, '400px', null, '500px'], + minHeight: ['100px', null, '200px', null, '300px'], + minWidth: ['300px', null, '200px', null, '100px'], +} + +export const Margin = Template.bind({}) +Margin.args = { + m: 3, + color: 'background.base', +} + +export const Color = Template.bind({}) +Color.args = { + color: 'primary.base', +} + +export const BoxShadow = Template.bind({}) +BoxShadow.args = { + boxShadowSize: 'overlay-lg', +} + +export const Size = Template.bind({}) +Size.args = { + color: 'primary.base', + size: 200, +} + +const DimsChildren = () => Box Dimensions + +export const Width = Template.bind({}) +Width.args = { + color: 'primary.base', + width: 1 / 2, + children: , +} + +export const PixelWidth = Template.bind({}) +PixelWidth.args = { + color: 'primary.base', + width: 256, + children: , +} + +export const VwWidth = Template.bind({}) +VwWidth.storyName = 'Viewport Width unit' +VwWidth.args = { + color: 'primary.base', + width: '75vw', + children: , +} + +export const DirectionalPadding = () => ( + + + Padding Top + + + Padding Right + + + Padding Bottom + + + Padding Left + + + Padding X-Axis + + + Padding Y-Axis + + +) + +export const DirectionalMargin = () => ( + + + Margin Top + + + Margin Right + + + Margin Bottom + + + Margin Left + + + Margin X-Axis + + + Margin Y-Axis + + +) + +export const Overflow = () => ( + + + This is a box with hidden overflow. This is a box with hidden overflow. + + + This is a box with clip overflow. This is a box with clip overflow. + + + This is a box with scroll overflow. This is a box with scroll overflow. + + + This is a box with auto overflow. This is a box with auto overflow. + + + This is a box with visible overflow. This is a box with visible overflow. + + +) + +export const ThemeUserCaseColorText = () => ( + + + + color="text" w/o bg prop: retains the original "text" color from original color + set as backward compatible: expected style w. "text" color and white background + + + color="purple" as none "text" color w/o bg prop + + + + + Theme 1: color="text.lightest" value & bg="background.dark" + + + Theme 2: color="text" & bg="background.lightest" + + + +) +ThemeUserCaseColorText.storyName = 'Theme user case: color=text' + +export const CustomColor = Template.bind({}) +CustomColor.args = { + color: 'magenta', + bg: '#ebfa', +} + +const ColorSchemeWithAttrs = styled(Box).attrs(() => ({ + colorScheme: 'cautionLight', +}))`` + +const ColorSchemesTemplate = () => { + return ( + + {colorSchemeNames.map((colorScheme) => ( + + + + {colorScheme} + + + Children inherit colors from the color scheme by default + + + + + Custom text and icon colors override the color scheme + + + + + ))} + + Using attrs and colorScheme + + + ) +} +export const ColorSchemes = ColorSchemesTemplate.bind({}) +ColorSchemesTemplate.args = {} +import React, { MutableRefObject } from 'react' +import styled from 'styled-components' +import { + BorderRadiusProps, + BoxShadowProps, + DisplayProps, + HeightProps, + MaxHeightProps, + MaxWidthProps, + MinHeightProps, + MinWidthProps, + OverflowProps, + SizeProps, + SpaceProps, + TextAlignProps, + WidthProps, + borderRadius, + boxShadow, + compose, + display, + height, + maxHeight, + maxWidth, + minHeight, + minWidth, + overflow, + size, + space, + textAlign, + width, +} from 'styled-system' +import type { ColorSchemeName } from '../theme/theme' +import { borderRadiusAttrs } from '../utils/attrs/borderRadiusAttrs' +import { boxShadowAttrs } from '../utils/attrs/boxShadowAttrs' +import { applyVariations, color, colorScheme } from '../utils/utils' + +/** + * @public + */ +export type BoxProps = BorderRadiusProps & + BoxShadowProps & + DisplayProps & + HeightProps & + MaxHeightProps & + MaxWidthProps & + MinHeightProps & + MinWidthProps & + OverflowProps & + SizeProps & + SpaceProps & + TextAlignProps & + WidthProps & + React.HTMLAttributes & { + children?: React.ReactNode | string + as?: unknown + role?: string + bg?: string + color?: string + className?: string + borderRadiusSize?: + | 'none' + | 'xsm' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | '2xl' + | '3xl' + | 'full' + | 'action-sm' + | 'action-md' + | 'action-lg' + boxShadowSize?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'overlay-lg' | 'overlay-xl' + boxShadowColor?: + | 'primary' + | 'secondary' + | 'text' + | 'highlight' + | 'success' + | 'error' + | 'warning' + | 'alert' + | 'caution' + | 'notify' + | 'pricePrimary' + | 'priceSecondary' + | 'promoPrimary' + | 'promoSecondary' + | 'border' + | 'background' + colorScheme?: ColorSchemeName + onClick?: (unknown) => unknown + ref?: MutableRefObject + rounded?: 'top' | 'right' | 'bottom' | 'left' | 'topLeft' | 'topRight' | 'bottomRight' | 'bottomLeft' + } + +/** + * @public + */ +export const Box: React.FC = styled.div.attrs((props) => ({ + ...borderRadiusAttrs(props), + ...boxShadowAttrs(props), +}))` + ${applyVariations('Box')} + ${color} + ${colorScheme} + + ${(props) => + compose( + width, + display, + height, + maxHeight, + maxWidth, + minHeight, + minWidth, + size, + space, + textAlign, + borderRadius, + boxShadow, + overflow + )(props)} +` + +Box.displayName = 'Box' +import { colors, borderRadii, rounded, shadows } from '../storybook/args' + +export const defaultArgs = { + height: '300px', + width: '300px', +} + +export const argTypes = { + color: { + name: 'color', + type: { name: 'string' }, + options: colors, + description: 'Palette color to use', + control: { + type: 'select', + }, + }, + + borderRadius: { + name: 'borderRadius', + type: { name: 'string' }, + options: borderRadii, + description: 'borderRadius', + control: { + type: 'select', + }, + }, + + rounded: { + name: 'rounded', + type: { name: 'string' }, + options: rounded, + description: 'rounded', + control: { + type: 'select', + }, + }, + + boxShadowSize: { + name: 'boxShadowSize', + type: { name: 'string' }, + options: shadows, + description: 'Size of the box shadow', + control: { + type: 'select', + }, + }, + + boxShadowColor: { + name: 'boxShadowColor', + type: { name: 'string' }, + options: colors, + description: 'Palette family for box shadows', + table: { + type: { + summary: 'Palette color to use for box-shadow - always uses "dark" shade', + }, + }, + control: { + type: 'select', + }, + }, + + height: { + name: 'height', + type: { name: 'string' }, + description: 'height', + }, + width: { + name: 'width', + type: { name: 'string' }, + description: 'width', + }, +} +import React from 'react' +import { Box } from '../Box/Box' +import { Truncate } from './Truncate' + +const loripsum = ` +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est, qui non oderit libidinosam, protervam adolescentiam? Sed ego in hoc resisto; Ratio enim nostra consentit, pugnat oratio. Nihil enim hoc differt. + +Quamquam id quidem licebit iis existimare, qui legerint. Poterat autem inpune; Hunc vos beatum; Tibi hoc incredibile, quod beatissimum. Qui non moveatur et offensione turpitudinis et comprobatione honestatis? + +Quod equidem non reprehendo; Facete M. Etsi ea quidem, quae adhuc dixisti, quamvis ad aetatem recte isto modo dicerentur. Quae diligentissime contra Aristonem dicuntur a Chryippo. Dicimus aliquem hilare vivere; Non est igitur summum malum dolor. Quamquam tu hanc copiosiorem etiam soles dicere. + +Equidem, sed audistine modo de Carneade? Confecta res esset. Audeo dicere, inquit. Ampulla enim sit necne sit, quis non iure optimo irrideatur, si laboret? Sed quanta sit alias, nunc tantum possitne esse tanta. Ita similis erit ei finis boni, atque antea fuerat, neque idem tamen; Prave, nequiter, turpiter cenabat; Quod vestri non item. Modo etiam paulum ad dexteram de via declinavi, ut ad Pericli sepulcrum accederem. + +Duo Reges: constructio interrete. Mihi enim satis est, ipsis non satis. Si enim ita est, vide ne facinus facias, cum mori suadeas. Illud dico, ea, quae dicat, praeclare inter se cohaerere. Est enim tanti philosophi tamque nobilis audacter sua decreta defendere. +` + +export default { + title: 'Truncate', + component: Truncate, +} + +export const WithoutContainer = () => {loripsum} + +export const WithContainer = () => ( + + {loripsum} + +) +import React from 'react' +import { Truncate } from './Truncate' + +describe('Truncate', () => { + test('renders', () => { + const json = rendererCreateWithTheme(renders).toJSON() + expect(json).toMatchSnapshot() + }) + + test('generates styles', () => { + const json = rendererCreateWithTheme(generates styles).toJSON() + expect(json).toMatchSnapshot() + expect(json).toHaveStyleRule('overflow', 'hidden') + expect(json).toHaveStyleRule('white-space', 'nowrap') + expect(json).toHaveStyleRule('text-overflow', 'ellipsis') + }) +}) +import styled from 'styled-components' +import { Text } from '../Text/Text' + +/** + * @public + */ +export const Truncate = styled(Text)` + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +` + +Truncate.displayName = 'Truncate' +import { RadioChecked, RadioEmpty } from 'pcln-icons' +import React from 'react' +import styled from 'styled-components' +import { type PaletteFamilyName } from '../theme/theme' +import { applyVariations, getPaletteColor } from '../utils/utils' + +const RadioWrap = styled.div` + display: inline-block; + color: ${getPaletteColor('text.light')}; + cursor: ${(props) => (props.disabled ? `not-allowed` : `pointer`)}; + &:hover > svg { + ${(props) => { + if (props.checked && !props.disabled) { + return `color: ${getPaletteColor('dark')(props)} !important;` + } + + return props.disabled ? null : `color: ${getPaletteColor('base')(props)};` + }}; + } + ${applyVariations('Radio')} +` + +const RadioInput = styled.input` + appearance: none; + opacity: 0; + position: absolute; + z-index: 0; + + & ~ svg { + border: 1px solid transparent; + border-radius: 50%; + padding: 2px; + } + + &:focus { + box-shadow: none; + & ~ svg { + border: 1px solid ${getPaletteColor('border.base')}; + background-color: ${getPaletteColor('background.light')}; + } + } + &:checked ~ svg { + color: ${getPaletteColor('base')}; + } + &:disabled ~ svg { + color: ${getPaletteColor('border.base')}; + cursor: not-allowed; + } +` + +const RadioCheckedIcon = styled(RadioChecked)` + vertical-align: middle; +` +const RadioEmptyIcon = styled(RadioEmpty)` + vertical-align: middle; +` + +type RadioIconProps = { + checked?: boolean + size?: number +} + +const RadioIcon = ({ checked, ...props }: RadioIconProps) => { + return checked ? : +} + +/** + * @public + */ +export type RadioProps = React.InputHTMLAttributes & { + size?: number + color?: PaletteFamilyName + onClick?: (unknown) => unknown +} + +/** + * @public + */ +export const Radio: React.FC = React.forwardRef((props, ref) => { + const { checked, disabled, size } = props + + const borderAdjustedSize = size + 4 + + const dataNameHelper = (checked, disabled) => { + if ((checked && disabled) || (!checked && disabled)) { + return 'disabled' + } + if (checked && !disabled) { + return 'checked' + } + return 'unchecked' + } + + return ( + + + + + ) +}) + +Radio.displayName = 'Radio' +Radio.defaultProps = { + color: 'primary', + size: 24, +} +import React from 'react' +import { Radio } from './Radio' + +describe('Radio', () => { + test('Selected, rendering', () => { + const json = rendererCreateWithTheme().toJSON() + expect(json).toMatchSnapshot() + }) + + test('Not Selected, rendering', () => { + const json = rendererCreateWithTheme().toJSON() + expect(json).toMatchSnapshot() + }) + + test('Disabled, rendering', () => { + const json = rendererCreateWithTheme().toJSON() + expect(json).toMatchSnapshot() + }) +}) +import { action } from '@storybook/addon-actions' +import React from 'react' +import styled from 'styled-components' +import { Button } from '../Button/Button' +import { Label } from '../Label/Label' +import { Radio } from '../Radio/Radio' +import ForwardRefDemo from '../storybook/utils/ForwardRefsDemo' +import { paletteFamilyNames } from '../theme/theme' +import { getPaletteColor } from '../utils/utils' + +const bold = (props) => (props.bold ? { fontWeight: props.theme.fontWeights.bold } : null) +const medium = (props) => (props.medium ? { fontWeight: props.theme.fontWeights.medium } : null) + +const LabelText = styled.span` + vertical-align: middle; + margin-left: 8px; + ${bold} + ${medium} +` +const RadioLabelDisabled = styled(Label)` + cursor: not-allowed; + color: ${getPaletteColor('border.base')}; +` +const RadioLabel = styled(Label)` + cursor: pointer; + color: ${getPaletteColor('text.light')}; + + &:hover { + div[data-name='unchecked'] { + color: ${getPaletteColor('primary.base')}; + } + div[data-name='checked'] { + > svg { + color: ${getPaletteColor('primary.dark')}; + } + } + } +` + +// @ts-ignore +class MockForm extends React.Component { + private setState + private state + + public constructor(props) { + super(props) + this.state = { + selection: 1, + options: [0, 1, 2, 3], + disabled: false, + } + } + + private updateSelection = (event) => { + this.setState({ + selection: Number(event.target.value), + }) + } + + private toggleDisabled = () => { + this.setState((prevState) => ({ + disabled: !prevState.disabled, + })) + } + + public render() { + const { disabled, selection, options } = this.state + return ( +
+
+ {options.map((item, idx) => ( + + ))} +
+ +
+ ) + } +} + +export default { + title: 'Radio', + component: Radio, +} + +export const _3States = () => ( +
+ + + selected + + + + not selected + + + + disabled + +
+) + +// @ts-ignore +export const _MockForm = () => + +export function ForwardRefs() { + function refChild(dsRef) { + function onClick() { + return dsRef.current.focus() + } + return ( + <> + + + selected + + + + ) + } + return +} + +export const FontWeight = () => ( +
+ + + font weight - bold + + + + font weight - medium + +
+) + +export const Colors = () => ( + <> + {paletteFamilyNames.map((color) => ( + + + {color} + + ))} + +) +import React from 'react' +import { Box } from '../Box/Box' +import { Text } from '../Text/Text' +import { ThemeProvider } from './ThemeProvider' + +export default { + title: 'ThemeProvider', + component: ThemeProvider, +} + +// We could create a function to generate these arrays dynamically +const mediaSizes = { + xs: ['99999em', '99999em', '99999em', '99999em', '99999em'], + sm: ['32em', '99999em', '99999em', '99999em', '99999em'], + md: ['0em', '40em', '99999em', '99999em', '99999em'], + lg: ['0em', '0em', '48em', '99999em', '99999em'], + xl: ['0em', '0em', '0em', '64em', '99999em'], + xxl: ['0em', '0em', '0em', '0em', '80em'], +} + +/** @public */ +const FixedThemeWrapper = ({ children, size }) => { + const customBreakpoints = mediaSizes[size] + if (!children) return null + if (!customBreakpoints) return children + return ( + + {children} + + ) +} + +export const CustomBreakpoints = () => { + return ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].map((size) => ( + + + + TEST - {size} + + + + )) +} +import { render } from '@testing-library/react' +import React from 'react' +import { Box } from '../Box/Box' +import { theme } from '../theme/theme' +import { Base, ThemeProvider } from './ThemeProvider' + +describe('ThemeProvider', () => { + describe('ThemeProvider: ThemeProvider', () => { + it('should render correctly without throwing', () => { + expect(() => { + const { asFragment } = render() + + expect(asFragment()).toMatchSnapshot() + }).not.toThrow() + }) + + it('should handle the "customBreakpoints" prop', () => { + expect(() => { + const { asFragment, getByTestId } = render( + + + + ) + + expect(asFragment()).toMatchSnapshot() + + const ResponsiveBox = getByTestId('ResponsiveBox') + + expect(ResponsiveBox).toHaveStyleRule('width', '100%') + expect(ResponsiveBox).toHaveStyleRule('width', '50%', { + media: 'screen and (min-width:20em)', + }) + expect(ResponsiveBox).toHaveStyleRule('width', '25%', { + media: 'screen and (min-width:32em)', + }) + }).not.toThrow() + }) + }) + + describe('ThemeProvider: Base', () => { + it('should render correctly with a "font-family" rule', () => { + expect(() => { + const { asFragment, container } = render( + + + + ) + + expect(asFragment()).toMatchSnapshot() + expect(container.firstChild).toHaveStyleRule('font-family', theme.font) + }).not.toThrow() + }) + }) +}) +import React from 'react' +import styled, { ThemeProvider as StyledThemeProvider } from 'styled-components' +import { createTheme } from '../utils/createTheme' + +/** + * @public + */ +export const Base = styled.div` + font-family: ${(props) => props.theme.font}; + line-height: ${(props) => props.theme.lineHeights.standard}; + font-weight: ${(props) => props.theme.fontWeights.medium}; + + * { + box-sizing: border-box; + } +` + +/** + * @public + */ +export 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.ReactNode + customBreakpoints?: string[] +} + +/** + * @public + */ +export const ThemeProvider: React.FC = ({ theme, customBreakpoints, ...props }) => { + // Once updated to React 16.8 this should be wrapped in React.useMemo() + const mergedTheme = (existingTheme) => createTheme(theme, customBreakpoints, existingTheme) + + return ( + + + + ) +} +import { ArgsTable, Canvas, PRIMARY_STORY, Primary } from '@storybook/addon-docs' +import type { Meta, StoryObj } from '@storybook/react' +import React from 'react' +import styled from 'styled-components' +import { Button } from '../Button/Button' +import { Hero } from '../DocsUtils/Hero/Hero' +import { Note } from '../DocsUtils/Note/Note' +import { Section } from '../DocsUtils/Section/Section' +import { StoryHeading } from '../DocsUtils/StoryHeading/StoryHeading' +import { TableOfContents } from '../DocsUtils/TableOfContents/TableOfContents' +import { Flex } from '../Flex/Flex' +import { Image } from '../Image/Image' +import { Text } from '../Text/Text' +import { ThemeProvider } from '../ThemeProvider/ThemeProvider' +import { Card, type CardProps } from './Card' +import heroImage from './Card.Image.Hero.png' +import cardWithLinks from './Card.Image.Links.png' +import cardStates from './Card.Image.States.png' +import * as CardStories from './Card.stories' +import { argTypes } from './Card.stories.args' + +type CardStory = StoryObj +export const Playground: CardStory = { + render: (args) => ( + + Card + + ), + argTypes, +} + +export const ShowcaseCard = () => ( + <> + + + sm + + + sm + + + sm + + + + + md + + + md + + + + + flat + + + flat + + + flat + + + +) + +const StyledCard = styled(Card)` + font-family: inherit; + &:hover { + cursor: pointer; + box-shadow: ${({ theme }) => theme.shadows.xl}; + } +` + +export const CardHousingButton = () => ( + + + + text + + + + + + text + + + + + + + text + + + + + +) + +const meta: Meta = { + title: 'Card', + component: Card, + parameters: { + docs: { + page: () => ( + + + Cards allow developers to house related elements. Cards are actionable Box components that come in + elevated, filled, or outlined. Contents inside card can include inputs, buttons, toggles, or + general actionable text. + + + + +
+ + Each Card should contain content of the same subject. For example, one card should house one + hotel or one ad. Use Cards to bring user's attention to clickable elements such as the Card + itself. + +
+ +
+ + +
+ +
+ + + The easiest way to make a card focusable and have a hover state is by passing the prop as = + button. This renders the Card on the DOM as html native element button. Try this in the + playground above or look at the examples below. In the example below you can easily tab between + each Card! + + + + + + + +
+ +
+ + + When a Card has an anchor tag or link, the card does not have a focus state only the children. + + + + + + Adding a nested action with the same behavior of the parent card is fully accessible. However, + adding an action with a different action will be accessible if implemented correctly, it is + recommended you avoid doing so. This could add strain on users as they may not be sure of the + expected outcome when clicking anywhere else on the parent card. + + +
+ + ), + }, + }, +} +export default meta +import React from 'react' +import styled from 'styled-components' +import { border, BorderProps } from 'styled-system' +import { Box, type BoxProps } from '../Box/Box' +import { applyVariations, getPaletteColor } from '../utils/utils' + +const styleAsButton = ({ as, ...props }) => + as === 'button' + ? ` + font-family : inherit; + &:hover { + cursor: pointer; + box-shadow: ${props.theme.shadows.xl}; + }` + : '' + +/** + * @public + */ +export type CardProps = BoxProps & + BorderProps & { + borderColor?: string + } + +/** + * @public + */ +export const Card: React.FC = styled(Box)` + ${applyVariations('Card')} + ${styleAsButton} + + border-color: ${(props) => + props.borderWidth === 0 ? '0' : getPaletteColor(props.borderColor, 'base')(props)}; + ${border}; +` + +Card.defaultProps = { + borderColor: 'border', + borderRadius: 'xsm', + borderStyle: 'solid', + borderWidth: 1, +} + +Card.displayName = 'Card' +import React from 'react' +import { theme } from '../theme/theme' +import { Card } from './Card' + +function assertBorderGray(json, borderWidth = 1) { + expect(json).toHaveStyleRule('border-style', `solid`) + expect(json).toHaveStyleRule('border-width', `${borderWidth}px`) + expect(json).toHaveStyleRule('border-color', theme.colors.borderGray) +} + +describe('Card', () => { + test('renders small box shadow with default border', () => { + const json = rendererCreateWithTheme().toJSON() + expect(json).toMatchSnapshot() + expect(json).toHaveStyleRule('box-shadow', theme.shadows.sm) + assertBorderGray(json) + expect(json).toHaveStyleRule('border-radius', theme.radius) + }) + + test('renders medium box shadow with default border', () => { + const json = rendererCreateWithTheme().toJSON() + expect(json).toMatchSnapshot() + expect(json).toHaveStyleRule('box-shadow', theme.shadows.md) + assertBorderGray(json) + expect(json).toHaveStyleRule('border-radius', theme.radius) + }) + + test('renders large box shadow with default border', () => { + const json = rendererCreateWithTheme().toJSON() + expect(json).toMatchSnapshot() + expect(json).toHaveStyleRule('box-shadow', theme.shadows.lg) + assertBorderGray(json) + expect(json).toHaveStyleRule('border-radius', theme.radius) + }) + + test('renders xlarge box shadow with default border', () => { + const json = rendererCreateWithTheme().toJSON() + expect(json).toMatchSnapshot() + expect(json).toHaveStyleRule('box-shadow', theme.shadows.xl) + assertBorderGray(json) + expect(json).toHaveStyleRule('border-radius', theme.radius) + }) + + test('renders medium box shadow with specified borderWidth', () => { + const json = rendererCreateWithTheme().toJSON() + expect(json).toMatchSnapshot() + assertBorderGray(json, 2) + expect(json).toHaveStyleRule('border-radius', theme.radius) + expect(json).toHaveStyleRule('box-shadow', theme.shadows.md) + }) + + test('renders medium box shadow with specified borderRadius', () => { + const json = rendererCreateWithTheme().toJSON() + expect(json).toMatchSnapshot() + assertBorderGray(json) + expect(json).toHaveStyleRule('border-radius', '0') + expect(json).toHaveStyleRule('box-shadow', theme.shadows.md) + }) + + test('renders with as button', () => { + const json = rendererCreateWithTheme().toJSON() + expect(json).toMatchSnapshot() + assertBorderGray(json) + expect(json).toHaveStyleRule('border-radius', theme.radius) + expect(json).toHaveStyleRule('box-shadow', undefined) + }) + + test('renders border 0 without warning', () => { + console.error = jest.fn() + const json = rendererCreateWithTheme().toJSON() + + expect(json).toMatchSnapshot() + expect(json).toHaveStyleRule('border-width', '0') + + expect( + (console.error as jest.Mock).mock.calls + .toString() + .indexOf( + `Failed prop type: Invalid prop 'borderWidth' of value '0' supplied to 'Card', expected one of [1,2].` + ) === -1 + ) + ;(console.error as jest.Mock).mockRestore() + }) +}) +import { borderStyles, colors, inputArgs, shadows } from '../storybook/args' +import { Card } from './Card' + +export const argTypes: unknown = { + as: { + control: 'select', + description: + 'Alter the base render component. Here we can have the Card be rendered on the DOM as a `button` for accessibility. It grants the ability to tab and focus the element', + options: ['', 'button'], + }, + bg: { + control: 'select', + options: colors, + }, + borderColor: { + control: 'select', + options: colors, + defaultValue: Card.defaultProps.borderColor, + }, + borderRadius: { + control: 'select', + options: inputArgs, + defaultValue: Card.defaultProps.borderRadius, + }, + borderStyle: { + control: 'select', + options: borderStyles, + defaultValue: Card.defaultProps.borderStyle, + }, + borderWidth: { + control: { type: 'number', min: 0, max: 5, step: 1 }, + defaultValue: Card.defaultProps.borderWidth, + }, + boxShadowSize: { + control: 'select', + options: shadows, + defaultValue: 'md', + }, +} +import React from 'react' +import { Box } from '../Box/Box' +import { Button } from '../Button/Button' +import { Divider } from '../Divider/Divider' +import { Label } from '../Label/Label' +import ForwardRefDemo from '../storybook/utils/ForwardRefsDemo' +import { Input } from './Input' +import { argTypes } from './Input.stories.args' + +export default { + title: 'Input', + component: Input, + parameters: { + docs: { + description: { + component: + 'Simple styled input component that accepts a color and whether or not to show an error container.', + }, + }, + }, + argTypes, +} + +const Template = (args) => + +export const InputComponent = Template.bind({}) + +export const Disabled = () => + +export const ReadOnly = () => + +export const Colors = () => ( + + + + + + + + +) + +export const WithExternalLabel = () => ( + + + + +) + +export const WithHelperText = () => ( + + + + No soup for you!} + /> + + + + + No soup for you!} + /> + + +) + +export const WithLabel = () => ( + + + +) + +export function ForwardsRefs() { + function refChild(dsRef) { + function onClick() { + return dsRef.current.focus() + } + return ( + <> + + + + ) + } + return +} +import React from 'react' +import { Button } from '../Button/Button' +import { fireEvent, render, screen } from '../__test__/testing-library' +import ForwardRefDemo from '../storybook/utils/ForwardRefsDemo' +import { theme } from '../theme/theme' +import { createTheme } from '../utils/createTheme' +import { getPaletteColor } from '../utils/utils' +import { Input } from './Input' + +const id = 'fake-test-id' + +describe('Input', () => { + test('it renders', () => { + const json = rendererCreateWithTheme().toJSON() + expect(json).toMatchSnapshot() + }) + test('it renders an input element with a red border with a color prop is passed', () => { + const json = rendererCreateWithTheme().toJSON() + expect(json).toMatchSnapshot() + }) + test('it renders an input element with a really large padding and margin', () => { + const json = rendererCreateWithTheme().toJSON() + expect(json).toMatchSnapshot() + }) + test('it renders an input element with large text', () => { + const json = rendererCreateWithTheme().toJSON() + expect(json).toMatchSnapshot() + }) + test('forwards ref to the input', () => { + const target = 'TARGET' + const placeholder = 'Apples' + function refChild(dsRef) { + function onClick() { + dsRef.current.focus() + } + return ( + <> + + + + ) + } + const { getByText, getByPlaceholderText } = render() + fireEvent.click(getByText(target)) + expect(getByPlaceholderText(placeholder)).toHaveFocus() + }) + + test('it renders disabled', () => { + const paletteTheme = createTheme(theme) + render() + + const input = screen.getByPlaceholderText('Disabled Input') + expect(input).toBeDisabled() + expect(input).toHaveStyleRule( + 'background-color', + getPaletteColor('background.light')({ theme: paletteTheme }), + { modifier: ':disabled' } + ) + expect(input).toHaveStyleRule('color', getPaletteColor('text.light')({ theme: paletteTheme }), { + modifier: ':disabled', + }) + expect(input).toHaveStyleRule('cursor', 'not-allowed', { modifier: ':disabled' }) + }) + + describe('helper text', function () { + test('renders with same color as Input', () => { + const helperText = 'hello world' + const color = 'error.base' + const paletteTheme = createTheme(theme) + const { getByText } = render( + {helperText}} /> + ) + const helperTextNode = getByText(helperText) + expect(helperTextNode).not.toBeNull() + expect(helperTextNode).toHaveStyleRule('color', getPaletteColor(color)({ theme: paletteTheme })) + }) + + test('can override the color from Input', () => { + const helperText = 'hello world' + const placeholder = 'click me' + const color = 'error.base' + const helperTextColor = 'secondary.base' + const paletteTheme = createTheme(theme) + const { getByText, getByPlaceholderText } = render( + {helperText}} + /> + ) + const helperTextNode = getByText(helperText) + expect(helperTextNode).not.toBeNull() + expect(helperTextNode).toHaveStyleRule( + 'color', + getPaletteColor(helperTextColor)({ theme: paletteTheme }) + ) + expect(getByPlaceholderText(placeholder)).toHaveStyleRule( + 'border-color', + getPaletteColor(color)({ theme: paletteTheme }) + ) + }) + }) +}) +import { borderRadii, inputArgs } from '../storybook/args' + +export const argTypes = { + borderRadius: { + name: 'borderRadius', + type: { name: 'string' }, + options: borderRadii, + description: 'borderRadius', + control: { + type: 'select', + }, + }, + disabled: { + name: 'disabled', + type: { name: 'boolean' }, + defaultValue: false, + }, + readOnly: { + name: 'readOnly', + type: { name: 'boolean' }, + defaultValue: false, + }, + size: { + name: 'size', + type: { name: 'string' }, + options: inputArgs, + description: 'size', + control: { + type: 'select', + }, + }, +} +import React from 'react' +import styled, { css } from 'styled-components' +import { + FontSizeProps, + SpaceProps, + ZIndexProps, + borderRadius, + compose, + fontSize, + space, + zIndex, +} from 'styled-system' +import { Text, type TextProps } from '../Text/Text' +import { borderRadiusAttrs } from '../utils/attrs/borderRadiusAttrs' +import { applySizes, applyVariations, borders, getPaletteColor } from '../utils/utils' + +const sizes = { + sm: css` + padding: 6px 12px 7px 12px; + `, + md: css` + padding: 10px 12px 11px 12px; + `, + lg: css` + padding: 14px 12px 14px 12px; + `, + xl: css` + padding: 18px 12px 19px 12px; + `, +} + +const StyledInput = styled.input.attrs(borderRadiusAttrs)` + position: relative; + appearance: none; + display: block; + width: 100%; + font-family: inherit; + color: ${getPaletteColor('text.base')}; + background-color: transparent; + border-width: 1px; + border-style: solid; + margin: 0; + + ::placeholder { + color: ${getPaletteColor('text.light')}; + } + + ::-ms-clear { + display: none; + } + + &:disabled { + background-color: ${getPaletteColor('background.light')}; + color: ${getPaletteColor('text.light')}; + cursor: not-allowed; + } + + ${({ theme }) => applySizes(sizes, undefined, theme.mediaQueries)}; + ${applyVariations('Input')} + ${borders} + + ${(props) => compose(space, fontSize, borderRadius, zIndex)(props)} +` + +const INPUT_ERROR_TEXT = 'InputHelperText' + +/** + * @public + */ +export type InputProps = SpaceProps & + FontSizeProps & + ZIndexProps & + Omit, 'size'> & + React.RefAttributes & { + children?: React.ReactNode + onChange?: (unknown) => unknown + // eslint-disable-next-line @typescript-eslint/no-explicit-any + helperText?: React.ReactElement> + color?: string + size?: 'sm' | 'md' | 'lg' | 'xl' + borderRadius?: string + } + +/** + * @public + */ +export const Input: React.FC & { + isField?: boolean + HelperText?: React.FC +} = React.forwardRef((props: InputProps, ref) => { + const { helperText, color, ...restProps } = props + return ( + <> + + {helperText && + React.cloneElement(helperText, { + color: helperText.props.color || color, + })} + + ) +}) + +const HelperText: React.FC = styled(Text).attrs(() => ({ + mt: 2, + fontSize: 1, +}))`` + +export type InputHelperTextProps = TextProps & { + children?: React.ReactNode +} + +Input.HelperText = (props: InputHelperTextProps) => {props.children} + +Input.HelperText.displayName = INPUT_ERROR_TEXT + +Input.displayName = 'Input' +Input.isField = true +Input.defaultProps = { + fontSize: [2, null, 1], + borderRadius: 'lg', + size: 'lg', +} +import { expect } from '@storybook/jest' +import { userEvent, within } from '@storybook/testing-library' +import React, { useState } from 'react' +import { Button } from '../Button/Button' +import { Flex } from '../Flex/Flex' +import { Text } from '../Text/Text' +import { theme } from '../theme/theme' +import { Accordion } from './Accordion' + +export default { + title: 'Accordion', + component: Accordion, + argTypes: { + onToggle: { action: true }, + p: { + options: theme.space, + control: { type: 'select' }, + description: 'Padding for the content and header sections', + }, + }, +} + +const items = [ + { + headerLabel: ( + <> + Header Label First Item + + ), + content: ( + <> + I am some content + I am some content + I am some content + + ), + value: 'item-1', + }, + { + headerLabel: ( + <> + Second Header + + ), + headerActions: , + content: ( + <> + I am secondary content + I am secondary content + I am secondary content + + ), + value: 'item-2', + }, + { + content: ( + <> + No Header Label on Third Item + Tertiary text + Tertiary text + Tertiary text + + ), + value: 'item-3', + }, +] + +export const Basic = { + play: async ({ args, canvasElement }) => { + const canvas = within(canvasElement) + const headerLabel = canvas.getByText('Header Label First Item') + await expect(args.onToggle).not.toHaveBeenCalled() + await expect(canvas.queryAllByText('I am some content')).toHaveLength(3) + await userEvent.click(headerLabel) + setTimeout(async () => { + await expect(canvas.queryAllByText('I am some content')).toHaveLength(0) + await expect(args.onToggle).toHaveBeenCalled() + }, 350) + }, + render: (args) => , +} + +export const Underlined = { render: (args) => } + +export const Hug = { render: (args) => } + +export const Ladder = { + render: (args) => ( + + ), +} + +export const Card = { render: (args) => } + +export const ItemStatePropCard = { + render: (args) => , +} + +export const FlatCard = { render: (args) => } + +export const Singular = { render: (args) => } + +export const ChevronClose = { + render: (args) => , +} + +export const TrackStateMultiple = { + render: (args) => { + const [itemsState, setItemsState] = useState(['item-1', 'item-3']) + return ( + <> + Items Open: {itemsState.join(', ')} + + { + setItemsState(newItemsState as string[]) + console.log('previousState:', itemsState, 'newState:', newItemsState) + }} + /> + + ) + }, +} + +export const TrackStateSingular = { + play: async ({ canvasElement }) => { + const canvas = within(canvasElement) + const headerLabel = canvas.getByText('Header Label First Item') + await expect(canvas.queryAllByText('I am some content')).toHaveLength(0) + await expect(canvas.queryAllByText('I am secondary content')).toHaveLength(3) + await expect(canvas.queryByText('Item Open: item-1')).toBeFalsy() + await expect(canvas.queryByText('Item Open: item-2')).toBeTruthy() + await userEvent.click(headerLabel) + setTimeout(async () => { + await expect(canvas.queryAllByText('I am some content')).toHaveLength(3) + await expect(canvas.queryAllByText('I am secondary content')).toHaveLength(0) + await expect(canvas.queryByText('Item Open: item-1')).toBeTruthy() + await expect(canvas.queryByText('Item Open: item-2')).toBeFalsy() + }, 350) + }, + render: (args) => { + const [itemsState, setItemsState] = useState('item-2') + return ( + <> + Item Open: {itemsState} + { + setItemsState(newItemsState as string) + console.log('previousState:', itemsState, 'newState:', newItemsState) + }} + type='single' + /> + + ) + }, +} + +const itemWithFunc = { + headerLabel: ( + + Header Label First Item + + + ), + content: Single content, + value: 'item-4', +} + +export const HeaderWithFunction = { + render: (args) => , +} +import * as RadixAccordion from '@radix-ui/react-accordion' +import React from 'react' +import { SpaceProps } from 'styled-system' +import { Box } from '../Box/Box' +import { Flex } from '../Flex/Flex' +import { + IconContainer, + StyledAccordionRoot, + StyledChevron, + StyledContent, + StyledItem, + StyledTrigger, +} from './Accordion.styled' + +/** + * @public + */ +export type AccordionProps = SpaceProps & { + items: AccordionItemProps[] + itemsState?: string | string[] + onToggle?: (value: string | string[]) => void + type?: string + variation?: string + isExternallyControlled?: boolean + headerDividerColor?: string +} + +/** + * @public + */ +export type AccordionItemProps = { + content: React.ReactNode + headerActions?: React.ReactNode + headerLabel?: React.ReactNode + headerBg?: string + value: string +} + +/** + * @public + */ +export function Accordion({ + items, + itemsState, + isExternallyControlled, + onToggle, + type = 'multiple', + variation = 'default', + p = '12px', + headerDividerColor, + ...props +}: AccordionProps): React.ReactElement { + return items ? ( + child.value)} + value={isExternallyControlled ? itemsState : undefined} + collapsible + variation={variation} + onValueChange={onToggle} + data-testid='accordion-root' + style={{ + isolation: 'isolate', + }} + > + {items.map((child: AccordionItemProps, index) => ( + + 0 && headerDividerColor} + > + + + {child.headerLabel} + {child.headerActions ? ( + e.preventDefault()}>{child.headerActions} + ) : null} + + + + + + + {child.content} + + + + ))} + + ) : null +} +import * as Accordion from '@radix-ui/react-accordion' +import { themeGet } from '@styled-system/theme-get' +import { ChevronDown } from 'pcln-icons' +import styled, { keyframes } from 'styled-components' +import { space } from 'styled-system' +import { Box } from '../Box/Box' +import { borderRadiusAttrs } from '../utils/attrs/borderRadiusAttrs' +import { getPaletteColor } from '../utils/utils' +import { AccordionProps } from './Accordion' + +const slideDown = keyframes` + from { + height: 0; + } + to { + height: var(--radix-accordion-content-height); + } +` + +const slideUp = keyframes` + from { + height: var(--radix-accordion-content-height); + } + to { + height: 0; + } +` + +export const StyledAccordionRoot = styled(Accordion.Root)` + ${(props) => + props.variation === 'ladder' + ? ` + overflow: hidden; + box-shadow: ${themeGet('shadows.sm')(props)}; + border-radius: ${themeGet('borderRadii.lg')(props)}; + ` + : ''} +` + +export const StyledContent = styled(Accordion.Content)` + overflow: hidden; + ${space} + background-color: ${(props) => + props.variation === 'default' ? getPaletteColor('background.light')(props) : '#fff'}; + &[data-state='open'] { + animation: ${slideDown} ${themeGet('duration.normal')} ${themeGet('timingFunctions.easeInOut')}; + } + &[data-state='closed'] { + animation: ${slideUp} ${themeGet('duration.normal')} ${themeGet('timingFunctions.easeInOut')}; + } +` + +export const StyledTrigger = styled(Accordion.Trigger).attrs(borderRadiusAttrs)` + all: unset; + box-sizing: border-box; + display: flex; + justify-content: space-between; + width: 100%; + color: ${(props) => (props.variation === 'hug' ? getPaletteColor('text.lightest')(props) : '')}; + &[data-state='open'] .chevron { + transform: rotate(180deg); + } + &[data-state='closed'] { + ${(props) => + props.variation === 'flatCard' ? `background-color: ${getPaletteColor('background.light')(props)}` : ''} + } + ${(props) => + props.variation === 'ladder' + ? '' + : ` + border-top-left-radius: ${themeGet('borderRadii.lg')}; + border-top-right-radius: ${themeGet('borderRadii.lg')}; + `} + ${space} + ${(props) => + `border-bottom: 1px solid ${ + props.variation === 'underline' ? getPaletteColor('border.base')(props) : 'transparent' + };`} + &:hover { + cursor: pointer; + ${(props) => + `background-color: ${ + props.variation === 'hug' + ? getPaletteColor('primary.dark')(props) + : getPaletteColor('background.base')(props) + };`} + } + &:focus-visible { + outline: 2px solid ${getPaletteColor('primary.dark')}; + outline-offset: -2px; + } +` +export const StyledChevron = styled(ChevronDown)` + margin: auto 8px; + transition: transform ${themeGet('duration.normal')} ${themeGet('timingFunctions.easeInOut')}; + border-radius: ${themeGet('borderRadii.full')}; + color: ${(props) => + props.variation === 'hug' + ? getPaletteColor('text.lightest')(props) + : getPaletteColor('primary.base')(props)}; +` +export const IconContainer = styled(Box)` + position: relative; + &:after { + content: ''; + position: absolute; + transition: transform ${themeGet('duration.normal')} ${themeGet('timingFunctions.easeInOut')}; + transform: scale(0); + width: 25px; + height: 25px; + left: 8px; + top: 0; + border-radius: ${themeGet('borderRadii.full')}; + } + &:hover { + &:after { + background-color: rgba(0, 0, 0, 0.12); + transform: scale(1.2); + } + } +` + +export interface IStyledItem { + variation: string + headerBg?: string + headerDividerColor?: string +} + +export const StyledItem = styled(Box)` + ${(props) => (['card', 'flatCard'].includes(props.variation) ? 'border: solid 1px transparent;' : '')} + ${(props) => + props.variation === 'default' ? `background-color: ${getPaletteColor('background.light')(props)};` : ''} + ${(props) => + props.variation === 'hug' + ? `background-color: ${getPaletteColor('primary.base')(props)}; + border: 1px solid ${getPaletteColor('primary.base')(props)};` + : ''} + ${(props) => + props.variation === 'ladder' + ? `background-color: ${getPaletteColor(props.headerBg || 'background.light')(props)}; + ${ + props.headerDividerColor + ? `border-top: solid ${getPaletteColor(props.headerDividerColor)(props)} 1px;` + : '' + } + border-radius: 0px; margin-bottom: 0px; + ` + : ''} + + &[data-state='open'], + &:hover { + ${(props) => + ['card', 'flatCard'].includes(props.variation) + ? ` + border-color: ${getPaletteColor('border.base')(props)}; + box-shadow: none; + ` + : ''} + } + + &[data-state='closed'] { + ${(props) => + props.variation === 'underline' + ? ` + border-bottom-left-radius: 0px; + border-bottom-right-radius: 0px;` + : ''} + ${(props) => + ['card'].includes(props.variation) + ? ` + box-shadow: ${themeGet('shadows.sm')(props)}; + border-color: transparent; + ` + : ''} + + &:hover { + ${(props) => + ['card', 'flatCard'].includes(props.variation) + ? ` + box-shadow: ${themeGet('shadows.xl')(props)}; + border-color: transparent; + ` + : ''} + } + } +` +import React from 'react' +import { Box } from '../Box/Box' +import { render } from '../__test__/testing-library' +import { Layout } from './Layout' + +describe('Layout', () => { + it('renders with variations', () => { + const { rerender, getByText } = render( + + 1 + + ) + expect(getByText(1)).toHaveStyle('width: 0.5') + + rerender( + + 1 + + ) + expect(getByText(1)).toHaveStyle('width: 0.33') + + rerender( + + 1 + 2 + 3 + + ) + expect(getByText(1)).toHaveStyle('width: 0.6') + expect(getByText(2)).toHaveStyle('width: 0.4') + expect(getByText(3)).toHaveStyle('width: 0.6') + + rerender( + + 1 + + ) + expect(getByText(1)).toHaveStyle('width: 0.25') + }) +}) +import React, { useEffect, useState } from 'react' +import styled from 'styled-components' +import { zIndex } from 'styled-system' +import { Box } from '../Box/Box' +import { Grid } from '../Grid/Grid' +import { spaceValues } from '../theme' + +const getWidthsForVariation = (variation: string) => { + return ( + variation && + variation + .split('-') + .map((width) => `${parseInt(width, 10) / 10}fr`) + .join(' ') + ) +} + +/** + * Returns an array of responsive arrays of numbers with same length as numChildren. Each value represents the + * width of the corresponding child. + * @param variation - variation string to determine how items are sized + * @param numChildren - number of children + * @returns + */ +const getGridTemplateColumns = (variation: LayoutVariation) => { + if (Array.isArray(variation)) { + return variation.map((v) => { + return getWidthsForVariation(v) + }) + } else { + return getWidthsForVariation(variation) + } +} + +// After converting Layout from using Flex to Grid, we need to multiply +// the space values by 2 since we're using them for gap instead of padding on each child. +const spaceToGapValue = (idx) => `${spaceValues[idx] * 2}px` + +// Map named sizes to responsive size values from theme +const gapValues = { + sm: spaceToGapValue(1), + md: spaceToGapValue(2), + lg: spaceToGapValue(3), + xl: spaceToGapValue(4), +} + +/** + * Returns an object containing responsive arrays of values for mx to apply to + * the wrapper flex and px values to apply to the children. + * @param gapProp - value passed in as gap prop + * @returns + */ +const getGapValues = (gapProp, rowGapProp) => { + let columnGap + let rowGap + + if (Array.isArray(rowGapProp)) { + rowGap = rowGapProp.map((gap) => gapValues[gap] || null) + } else { + rowGap = gapValues[rowGapProp] + } + + if (Array.isArray(gapProp)) { + columnGap = gapProp.map((gap) => gapValues[gap] || null) + } else { + columnGap = gapValues[gapProp] + } + + return { columnGap, rowGap } +} + +/** + * @public + */ +export const ALLOWED_LAYOUT_VALUES = [ + '50-50', + '33-33-33', + '33-66', + '66-33', + '25-25-25-25', + '60-40', + '40-60', + '100', +] as const + +/** + * @public + */ +export const ALLOWED_GAP_VALUES = ['sm', 'md', 'lg', 'xl'] as const + +const ZIndexBox = styled(Box)` + ${zIndex} +` + +/** + * @public + */ +export type LayoutGap = (typeof ALLOWED_GAP_VALUES)[number] | Array<(typeof ALLOWED_GAP_VALUES)[number]> + +/** + * @public + */ +export type LayoutVariation = + | (typeof ALLOWED_LAYOUT_VALUES)[number] + | Array<(typeof ALLOWED_LAYOUT_VALUES)[number]> + +/** + * @public + */ +export type LayoutProps = { + children: React.ReactElement | React.ReactElement[] + gap?: LayoutGap + rowGap?: LayoutGap + variation?: LayoutVariation + stretchHeight?: boolean +} + +/** + * @public + */ +export function Layout({ children, gap, rowGap, variation, stretchHeight, ...props }: LayoutProps) { + const [gapValues, setGapValues] = useState(getGapValues(gap, rowGap)) + const [gridTemplateColumns, setGridTemplateColumns] = useState(getGridTemplateColumns(variation)) + + useEffect(() => { + setGapValues(getGapValues(gap, rowGap)) + }, [gap, rowGap]) + + useEffect(() => { + setGridTemplateColumns(getGridTemplateColumns(variation)) + }, [variation]) + + return ( + + {React.Children.map( + children, + (child, idx) => + child && + React.isValidElement(child) && ( + + {React.cloneElement<{ minHeight?: string }>(child, { + minHeight: stretchHeight ? '100%' : undefined, + })} + + ) + )} + + ) +} + +Layout.displayName = 'Layout' +import React from 'react' +import styled from 'styled-components' +import { Absolute } from '../Absolute/Absolute' +import { Box } from '../Box/Box' +import { Container } from '../Container/Container' +import { Flex } from '../Flex/Flex' +import { Relative } from '../Relative/Relative' +import { Layout } from './Layout' + +export default { + title: 'Layout/Layout', + component: Layout, + argTypes: { + children: { + control: false, + }, + }, +} + +const LayoutDemoBox = styled(Box)` + height: 100px; +` + +const Template = (args) => ( + + {/* @ts-ignore */} + + + + + + + + + + + +) + +export const Basic = Template.bind({}) +Basic.args = { + variation: '33-33-33', + gap: 'sm', + rowGap: 'sm', +} + +const responsiveArgs = { + variation: ['100', '50-50', null, '60-40'], + gap: ['sm', null, 'xl'], + rowGap: ['sm', null, 'xl'], + stretchHeight: true, +} + +export const ResponsiveSmall = Template.bind({}) +ResponsiveSmall.args = responsiveArgs +ResponsiveSmall.parameters = { + viewport: { + defaultViewport: 'designSystem_sm', + }, +} +ResponsiveSmall.storyName = 'Responsive (sm)' + +export const ResponsiveLarge = Template.bind({}) +ResponsiveLarge.args = responsiveArgs +ResponsiveLarge.parameters = { + viewport: { + defaultViewport: 'designSystem_lg', + }, +} +ResponsiveLarge.storyName = 'Responsive (lg)' + +const OverlapTemplate = (args) => ( + + {/* @ts-ignore */} + + + + + + + + + +) + +export const Overlap = OverlapTemplate.bind({}) +Overlap.args = { + variation: '60-40', + gap: 'sm', + rowGap: 'sm', +} + +const LotsOfBoxesTemplate = (args) => ( + + {/* @ts-ignore */} + + + {Array.from({ length: 16 }).map((_, i) => ( + + ))} + + + +) + +export const Quarters = LotsOfBoxesTemplate.bind({}) +Quarters.args = { + variation: '25-25-25-25', + gap: 'sm', + rowGap: 'sm', +} +Quarters.storyName = '25-25-25-25' + +export const Thirds = LotsOfBoxesTemplate.bind({}) +Thirds.args = { + variation: '33-33-33', + gap: 'sm', + rowGap: 'sm', +} +Thirds.storyName = '33-33-33' + +export const Halves = LotsOfBoxesTemplate.bind({}) +Halves.args = { + variation: '50-50', + gap: 'sm', + rowGap: 'sm', +} +Halves.storyName = '50-50' + +export const Uneven = LotsOfBoxesTemplate.bind({}) +Uneven.args = { + variation: '60-40', + gap: 'sm', + rowGap: 'sm', +} +Uneven.storyName = '60-40' + +export const FullWidth = LotsOfBoxesTemplate.bind({}) +FullWidth.args = { + variation: '100', + gap: 'sm', + rowGap: 'sm', +} +import React from 'react' +import { BackgroundImage } from '../BackgroundImage/BackgroundImage' +import { Box } from '../Box/Box' +import { Button } from '../Button/Button' +import { Flex } from '../Flex/Flex' +import { Text } from '../Text/Text' +import ForwardRefDemo from '../storybook/utils/ForwardRefsDemo' +import { BlockLink } from './BlockLink' + +const image = + 'https://images.unsplash.com/photo-1446776811953-b23d57bd21aa?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&s=aee8a50c86478d935556d865624506e4' + +export default { + title: 'BlockLink', + component: BlockLink, +} + +export const ContainingBackgroundImage = () => ( + + + + + Click to open priceline.com in new tab! + + + + +) + +export const ForwardRefs = () => { + function refChild(dsRef) { + function onClick() { + return (dsRef.current.innerHTML = 'Bacon!') + } + return ( + <> + + I am a link! + +
+ + + ) + } + return +} + +export const CompositionWithoutContainer = () => ( + + + + Click to go to google.com! + + + +) +import React from 'react' +import { BlockLink } from './BlockLink' + +describe('BlockLink', () => { + test('renders', () => { + const json = rendererCreateWithTheme(raw text).toJSON() + expect(json).toMatchSnapshot() + }) +}) +import styled from 'styled-components' +import { Link } from '../Link/Link' + +export const BlockLink = styled(Link)` + display: block; + color: inherit; + text-decoration: none; +` + +BlockLink.displayName = 'BlockLink' +import React from 'react' +import { render } from '../__test__/testing-library' +import { RatingBadge } from './RatingBadge' + +const text = '123' + +describe('RatingBadge', () => { + let consoleError + beforeEach(() => { + consoleError = console.error + console.error = jest.fn() + }) + afterEach(() => (console.error = consoleError)) + + test('renders', () => { + const { asFragment } = render(5) + expect(asFragment()).toMatchSnapshot() + }) + + test('has correct background and text colors', () => { + const color = 'secondary' + + const { getByText } = render({text}) + + const badge = getByText(text) + + // Need to check the computed styles because .toHaveStyleRule(..) doesn't evaluate the functions + const computedStyles = window.getComputedStyle(badge) + expect(computedStyles.color).toBe('rgb(255, 255, 255)') + expect(computedStyles.backgroundColor).toBe('rgb(0, 170, 0)') + }) + + test('renders with bg and color', () => { + const color = 'secondary' + const bg = 'primary' + + const { getByText } = render( + + {text} + + ) + + const badge = getByText(text) + + const computedStyles = window.getComputedStyle(badge) + expect(computedStyles.color).toBe('rgb(0, 170, 0)') + expect(computedStyles.backgroundColor).toBe('rgb(0, 104, 239)') + }) + + test('renders bg and no color', () => { + const bg = 'secondary' + + const { getByText } = render({text}) + + const badge = getByText(text) + + const computedStyles = window.getComputedStyle(badge) + expect(computedStyles.backgroundColor).toBe('rgb(0, 170, 0)') + expect(computedStyles.color).toBe('rgb(255, 255, 255)') + }) + + test('renders with no bg and color', () => { + const color = 'secondary' + + const { getByText } = render({text}) + + const badge = getByText(text) + + const computedStyles = window.getComputedStyle(badge) + expect(computedStyles.backgroundColor).toBe('rgb(0, 170, 0)') + expect(computedStyles.color).toBe('rgb(255, 255, 255)') + }) + + test('renders default color with no props', () => { + const { getByText } = render({text}) + + const badge = getByText(text) + + const computedStyles = window.getComputedStyle(badge) + expect(computedStyles.color).toBe('rgb(255, 255, 255)') + expect(computedStyles.backgroundColor).toBe('rgb(240, 111, 32)') + }) +}) +import React from 'react' +import styled from 'styled-components' +import { borderRadius, compose, fontWeight } from 'styled-system' +import { Box, type BoxProps } from '../Box/Box' +import { borderRadiusAttrs } from '../utils/attrs/borderRadiusAttrs' + +const defaultProps = { + fontWeight: 'bold', + px: 2, + color: 'alert', + borderRadius: 'md', + bg: 'alert', +} + +/** + * @public + */ +export type RatingBadgeProps = BoxProps & { + bg?: string + color?: string + fontWeight?: string +} + +function getBgAndColorProps({ color, bg }) { + const { bg: defaultBg, color: defaultColor } = defaultProps + + if (bg && color && bg !== defaultBg && color !== defaultColor) { + // bg and color + return { bg, color } + } else if (bg === defaultBg && color === defaultColor) { + // no bg, no color + return { bg: undefined, color } + } else if (bg === defaultBg && color !== defaultColor) { + // color, no bg + return { bg: undefined, color } + } else if (color === defaultColor) { + // bg, no color + return { color: bg, bg: undefined } + } +} + +/** + * @public + */ +export const RatingBadge: React.FC = styled(Box).attrs((props) => ({ + ...getBgAndColorProps(props), + ...borderRadiusAttrs(props), +}))` + display: inline-block; + line-height: 1.5; + ${(props) => compose(fontWeight, borderRadius)(props)} +` + +RatingBadge.defaultProps = defaultProps +import { Meta } from '@storybook/react' +import React from 'react' +import { Flex } from '../Flex/Flex' +import { colorSchemeNames } from '../storybook/args' +import { RatingBadge } from './RatingBadge' + +const meta: Meta = { + title: 'Core / RatingBadge', + component: RatingBadge, +} +export default meta + +export const Default = () => 9.0 +export const DeprecatedBgProp = () => 9.0 + +export const MixBgAndColorProps = () => ( + + + 9.0 + + + 9.0 + + +) + +export const Colors = () => ( + + 7.6 + 8.1 + 9.0 + +) + +const ColorSchemesTemplate = (args) => { + return ( + + {colorSchemeNames.map((colorScheme) => ( + + {colorScheme} + + ))} + + ) +} +export const ColorSchemes = ColorSchemesTemplate.bind({}) +ColorSchemesTemplate.args = {} +import React from 'react' +import styled from 'styled-components' +import { Box } from '../Box/Box' +import { Text } from '../Text/Text' +import { useScrollWithShadow } from './useScrollWithShadow' + +export default { + title: 'useScrollWithShadows', +} + +const ShadowTransitionBox = styled(Box)` + transition: all 0.3s ease-in-out; +` + +const Template = () => { + // Step 1: Use the hook to get the boxShadow value and scroll handler for the overflow container + const { boxShadow, onScrollHandler } = useScrollWithShadow() + + return ( + // Step 2: Apply the onScrollHandler and boxShadow values to the container + + {/* This is the content of the container that will overflow */} + + + useScrollWithShadow() + + + Use this hook to apply a shadow to the top of a container when the user scrolls. + + + Click the "Show Code" button for usage instructions. Scroll to see the effect. + + + + ) +} + +export const Basic = Template.bind({}) +import { useEffect, useState } from 'react' + +const TOP_BOX_SHADOW_DEFAULT = + 'inset 0px 3px 0px -1px rgba(79, 111, 143, 0.04), inset 0px 1px 0px 0px rgba(79, 111, 143, 0.10)' // thinner shadow +const TOP_BOX_SHADOW_ACTIVE = + 'inset 0 12px 8px -8px rgba(79, 111, 143, 0.1), inset 0px 1px 0px 0px rgba(79, 111, 143, 0.10)' // thicker shadow, line from the default + +function getBoxShadow({ clientHeight, scrollTop, scrollHeight, setBoxShadow }) { + const isBottom = clientHeight === scrollHeight - scrollTop + const isTop = scrollTop === 0 + const isBetween = scrollTop > 0 && clientHeight < scrollHeight - scrollTop + + let computedBoxShadow + + if (isTop) { + computedBoxShadow = TOP_BOX_SHADOW_DEFAULT + } else if (isBetween || isBottom) { + computedBoxShadow = TOP_BOX_SHADOW_ACTIVE + } + + return setBoxShadow(computedBoxShadow) +} + +export function useScrollWithShadow() { + const [scrollTop, setScrollTop] = useState(0) + const [scrollHeight, setScrollHeight] = useState(0) + const [clientHeight, setClientHeight] = useState(0) + const [boxShadow, setBoxShadow] = useState() + + useEffect(() => { + getBoxShadow({ clientHeight, scrollTop, scrollHeight, setBoxShadow }) + }, []) + + const onScrollHandler = (event) => { + setScrollTop(event.target.scrollTop) + setScrollHeight(event.target.scrollHeight) + setClientHeight(event.target.clientHeight) + + getBoxShadow({ + clientHeight: event.target.clientHeight, + scrollTop: event.target.scrollTop, + scrollHeight: event.target.scrollHeight, + setBoxShadow, + }) + } + + return { boxShadow, onScrollHandler } +} +import React from 'react' +import { Text } from '../Text/Text' + +export const Heading = (props) => + +Heading.displayName = 'Heading' + +Heading.h1 = (props) => +Heading.h2 = (props) => +Heading.h3 = (props) => +Heading.h4 = (props) => +Heading.h5 = (props) => +Heading.h6 = (props) => +import React from 'react' +import { Heading } from './Heading' + +const description = + 'A type of the component' + + ' using HTML h1-h6 element for setting section headings,' + + ' supporting all props' + +export default { + title: 'Heading', + component: Heading, + parameters: { + docs: { + description: { + component: description, + }, + }, + }, +} + +export const HeadingComponent = () => Heading component + +export const UsingDotNotationWithH1H6 = () => ( +
+ Heading h1 + Heading h2 + Heading h3 + Heading h4 + Heading h5 + Heading h6 +
+) + +export const WithTextShadows = () => ( +
+ Heading h1 + Heading h2 + Heading h3 + Heading h4 + Heading h5 + Heading h6 +
+) + +export const UsingTextProps = () => ( +
+ + Heading Left + + + Heading Center + + + Heading Right + +
+) + +export const ColorSchemes = () => ( +
+ Heading Left + Heading Left + Heading Left + Heading Left + Heading Left + Heading Left + Heading Left +
+) +import React from 'react' +import { theme } from '../theme/theme' +import { Heading } from './Heading' + +describe('Heading', () => { + test('renders', () => { + const json = rendererCreateWithTheme().toJSON() + expect(json).toMatchSnapshot() + }) + + const dotNotationTestCase = 'Heading component with h1-h6 dot-notation' + test(dotNotationTestCase, () => { + const headingH1json = rendererCreateWithTheme().toJSON() + const headingH2json = rendererCreateWithTheme().toJSON() + const headingH3json = rendererCreateWithTheme().toJSON() + const headingH4json = rendererCreateWithTheme().toJSON() + const headingH5json = rendererCreateWithTheme().toJSON() + const headingH6json = rendererCreateWithTheme().toJSON() + expect(headingH1json).toMatchSnapshot() + expect(headingH2json).toMatchSnapshot() + expect(headingH3json).toMatchSnapshot() + expect(headingH4json).toMatchSnapshot() + expect(headingH5json).toMatchSnapshot() + expect(headingH6json).toMatchSnapshot() + }) + + const defaultFontSizeTestCase = 'Heading component with no default font size, when "fontSize" prop not used' + test(defaultFontSizeTestCase, () => { + const json = rendererCreateWithTheme().toJSON() + expect(json).toMatchSnapshot() + }) + + const usingTextPropsTestCase = 'Heading component using component properties' + test(usingTextPropsTestCase, () => { + const json = rendererCreateWithTheme().toJSON() + expect(json).toMatchSnapshot() + expect(json).toHaveStyleRule('text-align', 'center') + expect(json).toHaveStyleRule('color', theme.colors.gray) + }) +}) +import { InformationOutline } from 'pcln-icons' +import React from 'react' +import { Box } from '../Box/Box' +import { colorSchemeNames } from '../theme/theme' +import { Toast, type ToastProps } from './Toast' +import { argTypes, defaultArgs } from './Toast.stories.args' + +export default { + title: 'Core / Toast', + component: Toast, + args: defaultArgs, + argTypes, + decorators: [ + (Story) => ( + + + + ), + ], +} + +const Template = (args: ToastProps) => + +export const _Toast = Template.bind({}) + +const ColorSchemeTemplate = (args) => { + return colorSchemeNames.map((colorScheme) => ( + + + + )) +} + +export const _ColorScheme = ColorSchemeTemplate.bind({}) +_ColorScheme.args = { + icon: , +} + +export const _ColorSchemeBorderVariation = ColorSchemeTemplate.bind({}) +_ColorSchemeBorderVariation.args = { + icon: , + variation: 'border', +} +export const defaultArgs = { + children: 'Success Message', + color: 'success', +} + +export const argTypes = {} +import { themeGet } from '@styled-system/theme-get' +import styled, { css } from 'styled-components' +import { Flex, type FlexProps } from '../Flex/Flex' +import { IconButton } from '../IconButton/IconButton' +import { applyVariations, colorSchemeCustomForeground, getPaletteColor } from '../utils/utils' + +const variations = { + border: css` + background-color: ${(props) => getPaletteColor(props.color, 'light')(props)}; + color: ${getPaletteColor('text.base')}; + border-left: ${themeGet('borderRadii.sm')} solid ${(props) => getPaletteColor(props.color, 'base')(props)}; + `, + fill: css``, +} + +export type HeaderProps = FlexProps & { + iconUsesColorScheme: boolean + variation?: keyof typeof variations +} + +export const LeftBorderFlex: React.FC = styled(Flex)` + ${applyVariations('Toast', variations)}; + + ${colorSchemeCustomForeground} +` + +export const RoundIconButton = styled(IconButton)` + &&& { + background-color: ${getPaletteColor('background.lightest')}; + padding: ${themeGet('space.1')}; + pointer-events: auto; + + &:hover { + background-color: ${getPaletteColor('background.lightest')}; + } + } +` +jest.useFakeTimers() + +import { Success } from 'pcln-icons' +import React from 'react' +import { fireEvent, render, screen } from '../__test__/testing-library' +import { Toast } from './Toast' + +describe('Toast', () => { + it('renders a success toast that closes after 2 seconds', () => { + const mockRemoveClick = jest.fn() + render( + + Success Message + + ) + + expect(screen.getByText('Success Message')).toBeInTheDocument() + + expect(mockRemoveClick).toHaveBeenCalledTimes(0) + jest.runAllTimers() + expect(mockRemoveClick).toHaveBeenCalledTimes(1) + expect(mockRemoveClick).toHaveBeenCalledWith(10) + }) + + it('renders an error toast that needs to be closed manually', () => { + const mockRemoveClick = jest.fn() + render( + + Error Message + + ) + + expect(screen.getByText('Error Message')).toBeInTheDocument() + + expect(mockRemoveClick).toHaveBeenCalledTimes(0) + jest.runAllTimers() + expect(mockRemoveClick).toHaveBeenCalledTimes(0) + + fireEvent.click(screen.getByRole('button')) + expect(mockRemoveClick).toHaveBeenCalledTimes(1) + expect(mockRemoveClick).toHaveBeenCalledWith(10) + }) + + it('renders a default toast', () => { + const mockRemoveClick = jest.fn() + render( + + Information Message + + ) + expect(screen.getByText('Information Message')).toBeInTheDocument() + }) + + it('renders a success border toast', () => { + render( + } variation='border'> + Success Border Message + + ) + const toast = screen.getByText('Success Border Message') + expect(toast).toBeInTheDocument() + expect(toast.parentNode.parentNode).toHaveStyleRule('background-color', '#ecf7ec') + expect(toast.parentNode.parentNode).toHaveStyleRule('color', '#001833') + expect(toast.parentNode.parentNode).toHaveStyleRule('border-left', '4px solid #0a0') + + const icon = screen.getByTestId('success-icon') + expect(icon).toBeInTheDocument() + expect(icon).toHaveStyleRule('color', '#0a0') + }) +}) +import React, { useEffect } from 'react' +import { Absolute } from '../Absolute/Absolute' +import { Flex, type FlexProps } from '../Flex/Flex' +import { Relative } from '../Relative/Relative' +import { Text } from '../Text/Text' +import { LeftBorderFlex } from './Toast.styled' +import { CloseButton } from '../CloseButton/CloseButton' + +/** + * @public + */ +export type ToastProps = { + children: React.ReactNode + hideClose?: boolean + icon?: React.ReactElement + id?: number + lifespan?: number + variation?: 'border' | 'fill' + onRemoveClick?: (id: number) => void +} & Omit + +/** + * @public + */ +export function Toast({ + children, + color = 'text.light', + hideClose, + icon, + id, + lifespan, + variation = 'fill', + onRemoveClick, + ...props +}: ToastProps) { + useEffect(() => { + let timer + if (lifespan > 0) { + timer = setTimeout(() => { + onRemoveClick(id) + }, lifespan) + } + return () => clearTimeout(timer) + }, []) + + function handleRemoveClick() { + onRemoveClick(id) + } + + return ( + + + {icon && {React.cloneElement(icon, { color: variation === 'border' && color })}} + + {typeof children === 'string' ? {children} : children} + + + {!hideClose && ( + + + + )} + + ) +} +import themeGet from '@styled-system/theme-get' +import styled, { css } from 'styled-components' +import { compose, fontSize, space } from 'styled-system' +import { Box, type BoxProps } from '../Box/Box' +import { applySizes, applyVariations, getPaletteColor } from '../utils/utils' +import { type ChipContentVariation } from './ChipContent/ChipContent' + +const getSizes = ({ + hasChildren, + hasTopLabel, + borderRadiusOverride, +}: { + hasChildren? + hasTopLabel? + borderRadiusOverride? +}) => ({ + sm: css` + border-radius: ${themeGet(`borderRadii.${borderRadiusOverride || 'action-sm'}`)}; + padding-left: 8px; + padding-right: 8px; + ${hasChildren ? '' : hasTopLabel ? 'height: 50px;' : 'height: 32px;'} + font-size: ${themeGet('fontSizes.0')}px; + `, + md: css` + border-radius: ${themeGet(`borderRadii.${borderRadiusOverride || 'action-md'}`)}; + padding-left: 16px; + padding-right: 16px; + ${hasChildren ? '' : hasTopLabel ? 'height: 58px;' : 'height: 40px;'} + font-size: ${themeGet('fontSizes.1')}px; + `, +}) + +const getColor = ({ disabled }) => (disabled ? 'text.light' : 'base') + +const getCursor = ({ disabled }) => (disabled ? 'not-allowed' : 'pointer') + +const getBorderColor = (props) => + props.disabled ? 'transparent' : getPaletteColor(props.selected ? 'base' : 'border.base')(props) + +const getBackgroundColor = (props) => + props.disabled ? 'background.base' : props.selected ? 'light' : 'background.lightest' + +const variations = { + outline: css``, + shadow: css` + box-shadow: ${(props) => (props.disabled || props.selected ? 'none' : themeGet('shadows.md'))}; + &:hover { + box-shadow: ${(props) => (props.disabled ? 'none' : themeGet('shadows.xl'))}; + } + `, +} + +export type ChipContentWrapperProps = BoxProps & { + borderRadiusOverride?: string + disabled: boolean + hasChildren: boolean + hasTopLabel: boolean + justifyContent?: string + selected: boolean + variation: ChipContentVariation +} + +export const ChipContentWrapper: React.FC = styled(Box)` + ${(props) => ` + cursor: ${getCursor(props)}; + color: ${getPaletteColor(getColor(props))(props)}; + background-color: ${getPaletteColor(getBackgroundColor(props))(props)}; + border: 1px solid ${ + props.variation === 'shadow' && !props.selected ? 'transparent' : getBorderColor(props) + }; + ${ + props.disabled + ? '' + : ` + &:hover { + border: 1px solid ${getPaletteColor('base')(props)}; + background-color: ${getPaletteColor('background.lightest')(props)}; + } + ` + } + + ${ + props.selected && !props.disabled + ? ` + &:hover { + color: ${getPaletteColor('dark')(props)}; + border: 1px solid ${getPaletteColor('dark')(props)}; + background-color: ${getPaletteColor('light')(props)}; + } + ` + : '' + } + + ${props.disabled && props.selected ? `border: 1px solid ${getPaletteColor('text.light')(props)};` : ''} + `} + width: 100%; + max-width: 100%; + display: inline-flex; + align-items: center; + justify-content: ${({ justifyContent }) => justifyContent}; + position: relative; + border-radius: 2px; + white-space: nowrap; + ${({ theme, hasChildren }) => applySizes(getSizes({ hasChildren }), undefined, theme.mediaQueries)}; + ${applyVariations('ChipContentWrapper', variations)}; + ${({ theme, hasChildren, hasTopLabel, borderRadiusOverride }) => + applySizes(getSizes({ hasChildren, hasTopLabel, borderRadiusOverride }), undefined, theme.mediaQueries)}; + + ${(props) => compose(space, fontSize)(props)} +` +import { Departure } from 'pcln-icons' +import React, { useState } from 'react' +import { Box } from '../../Box/Box' +import { Flex } from '../../Flex/Flex' +import { Text } from '../../Text/Text' +import { chipWithShadowVariationArgs } from '../../storybook/args' +import { ChoiceChip } from './ChoiceChip' + +const image = ( + Delta +) + +const small = { + title: 'Small', + value: 'sm', +} + +const medium = { + title: 'Medium', + value: 'md', +} + +const responsive = { + title: 'Responsive', + value: ['sm', 'sm', 'sm', 'md'], +} + +const getExamples = (exampleProps, sizes) => ( + + {sizes.map((size) => ( + + {size.title} + + {exampleProps.map((props, i) => ( + + ))} + + + ))} + +) + +//Label Only +const labelOnly = [ + { label: 'Enabled' }, + { label: 'Active', selected: true }, + { label: 'Disabled', disabled: true }, + { label: 'Active and Disabled', selected: true, disabled: true }, +] +export const LabelOnly = () => getExamples(labelOnly, [small, medium, responsive]) + +const noTextWrap = [ + { label: 'Lots of Words that Do Not Wrap' }, + { label: 'Long Words and Things!', selected: true }, + { label: 'This Is A Test Disabled', disabled: true }, + { label: 'This Is A Test Active and Disabled', selected: true, disabled: true }, +] +export const NoTextWrap = () => getExamples(noTextWrap, [small, medium, responsive]) + +//With Icon +const withIcon = [ + { label: 'Enabled', Icon: Departure }, + { label: 'Active', selected: true, Icon: Departure }, + { label: 'Disabled', disabled: true, Icon: Departure }, + { label: 'Active and Disabled', selected: true, disabled: true, Icon: Departure }, +] +export const WithIcon = () => getExamples(withIcon, [small, medium, responsive]) + +//With Facet +const withFacet = [ + { label: 'Enabled', facet: '(00)' }, + { label: 'Active', facet: '(00)', selected: true }, + { label: 'Disabled', facet: '(00)', disabled: true }, + { label: 'Active and Disabled', facet: '(00)', selected: true, disabled: true }, +] +export const WithFacet = () => getExamples(withFacet, [small, medium, responsive]) + +//With Facet And Icon +const withFacetAndIcon = [ + { label: 'Enabled', facet: '(00)', Icon: Departure }, + { label: 'Active', facet: '(00)', Icon: Departure, selected: true }, + { + label: 'Disabled', + facet: '(00)', + Icon: Departure, + disabled: true, + }, + { + label: 'Active and Disabled', + facet: '(00)', + Icon: Departure, + selected: true, + disabled: true, + }, +] +export const WithIconAndFacet = () => getExamples(withFacetAndIcon, [small, medium, responsive]) + +//Icon Only +const iconOnly = [ + { Icon: Departure, title: 'Departure' }, + { selected: true, Icon: Departure, title: 'Departure' }, + { disabled: true, Icon: Departure, title: 'Departure' }, + { selected: true, disabled: true, Icon: Departure, title: 'Departure' }, +] +export const IconOnly = () => getExamples(iconOnly, [small, medium, responsive]) + +//With Image +const withImage = [ + { label: 'Enabled', image: image }, + { label: 'Active', selected: true, image: image }, + { label: 'Disabled', disabled: true, image: image }, + { label: 'Active and Disabled', selected: true, disabled: true, image: image }, +] +export const WithImage = () => getExamples(withImage, [medium]) + +//With Image And Bridge Label +const withImageAndBridgeLabel = [ + { label: 'Enabled', image: image, bridgeLabel: 'Bridge' }, + { label: 'Active', selected: true, image: image, bridgeLabel: 'Bridge' }, + { + label: 'Disabled', + disabled: true, + image: image, + bridgeLabel: 'Bridge', + }, + { + label: 'Active and Disabled', + selected: true, + disabled: true, + image: image, + bridgeLabel: 'Bridge', + }, +] +export const WithImageAndBridgeLabel = () => getExamples(withImageAndBridgeLabel, [medium]) + +//With Image And Bridge Label +const withImageBridgeLabelAndTopLabel = [ + { + label: 'Enabled', + image: image, + bridgeLabel: 'Bridge', + topLabel: 'Departure Flight', + borderRadius: 'lg', + width: '300px', + justifyContent: 'flex-start', + }, + { + label: 'Active', + selected: true, + image: image, + bridgeLabel: 'Bridge', + topLabel: 'Departure Flight', + borderRadius: 'lg', + }, + { + label: 'Disabled', + disabled: true, + image: image, + bridgeLabel: 'Bridge', + topLabel: 'Departure Flight', + borderRadius: 'lg', + }, + { + label: 'Active and Disabled', + selected: true, + disabled: true, + image: image, + bridgeLabel: 'Bridge', + topLabel: 'Departure Flight', + borderRadius: 'lg', + }, +] +export const WithImageBridgeLabelAndTopLabel = () => getExamples(withImageBridgeLabelAndTopLabel, [medium]) + +//Image Only +const imageOnly = [ + { image: image }, + { selected: true, image: image }, + { disabled: true, image: image }, + { selected: true, disabled: true, image: image }, +] +export const ImageOnly = () => getExamples(imageOnly, [medium]) + +//Custom Chip +export const CustomChip = () => ( + + + + + Browse All + + + $161 avg. per night + + + + + + + Pricebreakers + + + Save up to 60% + + + + + + + Express Deals + + + $130 avg. per night + + + + + + + Express Deals + + + $130 avg. per night + + + + + + + Express Deals + + + $130 avg. per night + + + + +) + +// With Variation Shadow +export const WithVariationShadow = () => getExamples(chipWithShadowVariationArgs, [small, medium, responsive]) + +// Usage +export const Usage = () => { + const ROUND_TRIP_CHIP_BUTTON_ID_OUTLINE = 'round-trip-chip-button-id-outline' + const ONE_WAY_CHIP_BUTTON_ID_OUTLINE = 'one-way-chip-button-id-outline' + const ROUND_TRIP_CHIP_BUTTON_ID_SHADOW = 'round-trip-chip-button-id-shadow' + const ONE_WAY_CHIP_BUTTON_ID_SHADOW = 'one-way-chip-button-id-shadow' + const [chipState, setChipState] = useState({ + [`${ROUND_TRIP_CHIP_BUTTON_ID_OUTLINE}`]: true, + [`${ONE_WAY_CHIP_BUTTON_ID_OUTLINE}`]: false, + [`${ROUND_TRIP_CHIP_BUTTON_ID_SHADOW}`]: true, + [`${ONE_WAY_CHIP_BUTTON_ID_SHADOW}`]: false, + }) + + function handleClick(evt) { + if (evt?.target?.id === ROUND_TRIP_CHIP_BUTTON_ID_OUTLINE) { + setChipState((state) => ({ + ...state, + [`${ROUND_TRIP_CHIP_BUTTON_ID_OUTLINE}`]: true, + [`${ONE_WAY_CHIP_BUTTON_ID_OUTLINE}`]: false, + })) + } + + if (evt?.target?.id === ONE_WAY_CHIP_BUTTON_ID_OUTLINE) { + setChipState((state) => ({ + ...state, + [`${ROUND_TRIP_CHIP_BUTTON_ID_OUTLINE}`]: false, + [`${ONE_WAY_CHIP_BUTTON_ID_OUTLINE}`]: true, + })) + } + + if (evt?.target?.id === ROUND_TRIP_CHIP_BUTTON_ID_SHADOW) { + setChipState((state) => ({ + ...state, + [`${ROUND_TRIP_CHIP_BUTTON_ID_SHADOW}`]: true, + [`${ONE_WAY_CHIP_BUTTON_ID_SHADOW}`]: false, + })) + } + + if (evt?.target?.id === ONE_WAY_CHIP_BUTTON_ID_SHADOW) { + setChipState((state) => ({ + ...state, + [`${ROUND_TRIP_CHIP_BUTTON_ID_SHADOW}`]: false, + [`${ONE_WAY_CHIP_BUTTON_ID_SHADOW}`]: true, + })) + } + } + + return ( + + Varation: Outline + + + + +
+ Varation: Shadow + + + + + + ) +} + +//Default +export default { + title: 'core / Chip / ChoiceChip', + component: ChoiceChip, +} +import React from 'react' +import { FontSizeProps, SpaceProps } from 'styled-system' +import { ChipContent } from '../ChipContent/ChipContent' +import { ChipInput } from '../ChipInput' +import { ChipLabel } from '../ChipLabel' + +/** + * @public + */ +export type ChoiceChipVariations = 'outline' | 'shadow' + +/** + * @public + */ +export type ChoiceChipProps = SpaceProps & + FontSizeProps & + React.HTMLAttributes & { + name?: string + disabled?: boolean + selected?: boolean + label?: string + value?: string | number + variation?: ChoiceChipVariations + topLabel?: string + borderRadius?: string + width?: string + justifyContent?: string + } + +/** + * @public + */ +export function ChoiceChip({ + id, + name, + disabled, + selected, + children, + onClick, + label, + variation, + width = 'auto', + value, + ...props +}: ChoiceChipProps): React.ReactElement { + return ( + + + + {children} + + + ) +} + +ChoiceChip.displayName = 'Chip' + +ChoiceChip.defaultProps = { + color: 'primary', + variation: 'outline', +} +import React from 'react' +import { fireEvent, render } from '../../__test__/testing-library' +import { ChoiceChip } from './ChoiceChip' + +const props = { + id: 'testId', + name: 'testName', + expanded: false, + disabled: false, + onClick: jest.fn(), +} + +describe('ChoiceChip', () => { + test('Default', () => { + const { getByTestId } = render() + const choiceChip = getByTestId('testId') + + //id + expect(choiceChip).toHaveAttribute('id', props.id) + + //name + expect(choiceChip).toHaveAttribute('name', props.name) + + //type + expect(choiceChip).toHaveAttribute('type', 'radio') + + //role + expect(choiceChip).toHaveAttribute('role', 'radio') + + //onClick + fireEvent.click(choiceChip) + expect(props.onClick).toHaveBeenCalled() + + //(not) disabled + expect(choiceChip).not.toHaveAttribute('disabled') + + //(not) checked + expect(choiceChip).not.toHaveAttribute('checked') + }) + + test('Disabled', () => { + const { getByTestId } = render() + + expect(getByTestId('testId')).toHaveAttribute('disabled') + }) + + test('Checked', () => { + const { getByTestId } = render() + + expect(getByTestId('testId')).toHaveAttribute('checked') + }) +}) +import { Departure } from 'pcln-icons' +import React, { useState } from 'react' +import { Box } from '../../Box/Box' +import { Flex } from '../../Flex/Flex' +import { Text } from '../../Text/Text' +import { chipWithShadowVariationArgs } from '../../storybook/args' +import { FilterChip } from './FilterChip' + +const image = ( + Delta +) + +const small = { + title: 'Small', + value: 'sm', +} + +const medium = { + title: 'Medium', + value: 'md', +} + +const responsive = { + title: 'Responsive', + value: ['sm', 'sm', 'sm', 'md'], +} + +const getExamples = (exampleProps, sizes) => ( + + {sizes.map((size) => ( + + {size.title} + + {exampleProps.map((props, i) => ( + + ))} + + + ))} + +) + +//Label Only +const labelOnly = [ + { label: 'Enabled' }, + { label: 'Active', selected: true }, + { label: 'Active', selected: true, showActionIcon: true }, + { label: 'Disabled', disabled: true, showActionIcon: true }, + { label: 'Active and Disabled', selected: true, showActionIcon: true, disabled: true }, +] +export const LabelOnly = () => getExamples(labelOnly, [small, medium, responsive]) + +//With Icon +const withIcon = [ + { label: 'Enabled', Icon: Departure }, + { label: 'Active', selected: true, Icon: Departure }, + { label: 'Active', selected: true, showActionIcon: true, Icon: Departure }, + { + label: 'Disabled', + showActionIcon: true, + disabled: true, + Icon: Departure, + }, + { + label: 'Active and Disabled', + selected: true, + showActionIcon: true, + disabled: true, + Icon: Departure, + }, +] +export const WithIcon = () => getExamples(withIcon, [small, medium, responsive]) + +//With Facet +const withFacet = [ + { label: 'Enabled', facet: '(00)' }, + { label: 'Active', facet: '(00)', selected: true }, + { label: 'Active', facet: '(00)', selected: true, showActionIcon: true }, + { + label: 'Disabled', + facet: '(00)', + showActionIcon: true, + disabled: true, + }, + { + label: 'Active and Disabled', + facet: '(00)', + selected: true, + showActionIcon: true, + disabled: true, + }, +] +export const WithFacet = () => getExamples(withFacet, [small, medium, responsive]) + +//With Facet And Icon +const withFacetAndIcon = [ + { label: 'Enabled', facet: '(00)', Icon: Departure }, + { label: 'Active', facet: '(00)', Icon: Departure, selected: true }, + { + label: 'Active', + facet: '(00)', + Icon: Departure, + selected: true, + showActionIcon: true, + }, + { + label: 'Disabled', + facet: '(00)', + Icon: Departure, + showActionIcon: true, + disabled: true, + }, + { + label: 'Active and Disabled', + facet: '(00)', + Icon: Departure, + selected: true, + showActionIcon: true, + disabled: true, + }, +] +export const WithIconAndFacet = () => getExamples(withFacetAndIcon, [small, medium, responsive]) + +//Icon Only +const iconOnly = [ + { Icon: Departure, title: 'Departure' }, + { Icon: Departure, title: 'Departure' }, + { selected: true, showActionIcon: true, Icon: Departure, title: 'Departure' }, + { + showActionIcon: true, + disabled: true, + Icon: Departure, + title: 'Departure', + }, + { + selected: true, + showActionIcon: true, + disabled: true, + Icon: Departure, + title: 'Departure', + }, +] +export const IconOnly = () => getExamples(iconOnly, [small, medium, responsive]) + +//With Image +const withImage = [ + { label: 'Enabled', image: image }, + { label: 'Active', selected: true, image: image }, + { label: 'Active', selected: true, showActionIcon: true, image: image }, + { + label: 'Disabled', + showActionIcon: true, + disabled: true, + image: image, + }, + { + label: 'Active and Disabled', + selected: true, + showActionIcon: true, + disabled: true, + image: image, + }, +] +export const WithImage = () => getExamples(withImage, [medium]) + +//With Image And Bridge Label +const withImageAndBridgeLabel = [ + { label: 'Enabled', image: image, bridgeLabel: 'Bridge' }, + { label: 'Active', selected: true, image: image, bridgeLabel: 'Bridge' }, + { + label: 'Active', + selected: true, + showActionIcon: true, + image: image, + bridgeLabel: 'Bridge', + }, + { + label: 'Disabled', + showActionIcon: true, + disabled: true, + image: image, + bridgeLabel: 'Bridge', + }, + { + label: 'Active and Disabled', + selected: true, + showActionIcon: true, + disabled: true, + image: image, + bridgeLabel: 'Bridge', + }, +] +export const WithImageAndBridgeLabel = () => getExamples(withImageAndBridgeLabel, [medium]) + +//Image Only +const imageOnly = [ + { image: image }, + { selected: true, image: image }, + { selected: true, showActionIcon: true, image: image }, + { showActionIcon: true, disabled: true, image: image }, + { selected: true, showActionIcon: true, disabled: true, image: image }, +] +export const ImageOnly = () => getExamples(imageOnly, [medium]) + +//Custom Chip +export const CustomChip = () => ( + + + + + Browse All + + + $161 avg. per night + + + + + + + Pricebreakers + + + Save up to 60% + + + + + + + Express Deals + + + $130 avg. per night + + + + + + + Express Deals + + + $130 avg. per night + + + + + + + Express Deals + + + $130 avg. per night + + + + +) + +// Toggle Chip +export const ToggleChip = () => { + const [toggle, setToggle] = useState(false) + const label = toggle ? 'Unselect' : 'Select' + return ( + { + setToggle(!toggle) + }} + /> + ) +} + +// With Variation Shadow +export const WithVariationShadow = () => getExamples(chipWithShadowVariationArgs, [small, medium, responsive]) + +// Usage +export const Usage = () => { + const FREE_CANCELLATION_CHIP_BUTTON_ID_OUTLINE = 'free-cancellation-chip-button-id-outline' + const FREE_WIFI_CHIP_BUTTON_ID_OUTLINE = 'free-wifi-chip-button-id-outline' + const FREE_PARKING_CHIP_BUTTON_ID_OUTLINE = 'free-parking-chip-button-id-outline' + const FREE_CANCELLATION_CHIP_BUTTON_ID_SHADOW = 'free-cancellation-chip-button-id-shadow' + const FREE_WIFI_CHIP_BUTTON_ID_SHADOW = 'free-wifi-chip-button-id-shadow' + const FREE_PARKING_CHIP_BUTTON_ID_SHADOW = 'free-parking-chip-button-id-shadow' + const [chipState, setChipState] = useState({ + [`${FREE_CANCELLATION_CHIP_BUTTON_ID_OUTLINE}`]: false, + [`${FREE_WIFI_CHIP_BUTTON_ID_OUTLINE}`]: false, + [`${FREE_PARKING_CHIP_BUTTON_ID_OUTLINE}`]: false, + [`${FREE_CANCELLATION_CHIP_BUTTON_ID_SHADOW}`]: false, + [`${FREE_WIFI_CHIP_BUTTON_ID_SHADOW}`]: false, + [`${FREE_PARKING_CHIP_BUTTON_ID_SHADOW}`]: false, + }) + + function handleClick(evt) { + if (evt?.target?.id) { + const chipButtonId = evt.target.id + setChipState((state) => ({ ...state, [chipButtonId]: !state[chipButtonId] })) + } + } + + return ( + + Varation: Outline + + + + + +
+ Varation: Shadow + + + + + + + ) +} + +//Default +export default { + title: 'core / Chip / FilterChip', + component: FilterChip, +} +import React from 'react' +import { fireEvent, render } from '../../__test__/testing-library' +import { FilterChip } from './FilterChip' + +const props = { + id: 'testId', + name: 'testFilterChipName', + expanded: false, + disabled: false, + onClick: jest.fn(), +} + +describe('FilterChip', () => { + test('Default', () => { + const { getByTestId } = render() + const filterChip = getByTestId('testId') + + //id + expect(filterChip).toHaveAttribute('id', props.id) + + //name + expect(filterChip).toHaveAttribute('name', props.name) + + //type + expect(filterChip).toHaveAttribute('type', 'checkbox') + + //role + expect(filterChip).toHaveAttribute('role', 'checkbox') + + //onClick + fireEvent.click(filterChip) + expect(props.onClick).toHaveBeenCalled() + + //(not) disabled + expect(filterChip).not.toHaveAttribute('disabled') + + //(not) checked + expect(filterChip).not.toHaveAttribute('checked') + }) + + test('Disabled', () => { + const { getByTestId } = render() + + expect(getByTestId('testId')).toHaveAttribute('disabled') + }) + + test('Checked', () => { + const { getByTestId } = render() + + expect(getByTestId('testId')).toHaveAttribute('checked') + }) +}) +import { Close } from 'pcln-icons' +import React from 'react' +import { FontSizeProps, SpaceProps } from 'styled-system' +import { ChipContent } from '../ChipContent/ChipContent' +import { ChipInput } from '../ChipInput' +import { ChipLabel } from '../ChipLabel' + +const getTitle = ({ disabled, actionTitle }) => `${actionTitle}${disabled ? ' disabled' : ''}` + +/** + * @public + */ +export type FilterChipVariation = 'outline' | 'shadow' + +/** + * @public + */ +export type FilterChipProps = SpaceProps & + FontSizeProps & { + id?: string + name?: string + disabled?: boolean + selected?: boolean + onClick?: (unknown) => void + label?: string + showActionIcon?: boolean + actionTitle?: string + value?: string | number + color?: string + children?: React.ReactNode | string + variation?: FilterChipVariation + } + +/** + * @public + */ +export function FilterChip({ + id, + name, + disabled, + selected, + children, + onClick, + label, + showActionIcon, + actionTitle, + value, + variation, + ...props +}: FilterChipProps): React.ReactElement { + return ( + + + + {children} + + + ) +} + +FilterChip.displayName = 'FilterChip' + +FilterChip.defaultProps = { + color: 'primary', + actionTitle: 'Close', + variation: 'outline', +} +import { ArrowRight } from 'pcln-icons' +import React from 'react' +import styled from 'styled-components' +import { Box, type BoxProps } from '../../Box/Box' +import { Flex } from '../../Flex/Flex' +import { Text } from '../../Text/Text' +import { getPaletteColor } from '../../utils/utils' +import { ChipContentWrapper } from '../ChipContentWrapper' + +const ImageWrapper = styled(Flex)` + background-color: ${getPaletteColor('background.lightest')}; + border-radius: ${({ theme }) => theme.radii[2]}px; + ${({ disabled }) => disabled && 'opacity: .33;'} +` + +/** + * @public + */ +export type ChipContentVariation = 'outline' | 'shadow' + +/** + * @public + */ +export type IconComponent = React.FC + +/** + * @public + */ +export type ChipContentProps = BoxProps & { + children?: React.ReactNode + disabled?: boolean + selected?: boolean + label?: string + Icon?: IconComponent + IconTitle?: string + facet?: string + action?: { + Icon?: IconComponent + title?: React.ReactNode + } + image?: React.ReactNode + size?: string + bridgeLabel?: string + BridgeIcon?: IconComponent + variation?: ChipContentVariation + topLabel?: string + borderRadius?: string + justifyContent?: string +} + +/** + * @public + */ +export function ChipContent({ + disabled, + selected, + children, + label, + /* eslint-disable @typescript-eslint/naming-convention */ + Icon, + /* eslint-disable @typescript-eslint/naming-convention */ + IconTitle, + facet, + action, + image, + size, + bridgeLabel, + /* eslint-disable @typescript-eslint/naming-convention */ + BridgeIcon, + variation, + topLabel, + borderRadius, + justifyContent = 'center', + ...props +}: ChipContentProps): React.ReactElement { + return ( + + {children} + + {Boolean(image) && {image}} + {Boolean(Icon) && } + + {Boolean(topLabel) && ( + + {topLabel} + + )} + + {Boolean(label) && ( + + {label} + + )} + {Boolean(facet) && ( + + {facet} + + )} + {Boolean(bridgeLabel) && } + {Boolean(bridgeLabel) && ( + + {bridgeLabel} + + )} + + + {/* @ts-ignore */} + {Boolean(action?.Icon) && action.title && } + + + ) +} + +ChipContent.defaultProps = { + BridgeIcon: ArrowRight, + size: 'sm', + color: 'primary', + py: 1, + m: 0, +} + +ChipContent.displayName = 'Chip' +import { Broom, Departure } from 'pcln-icons' +import React from 'react' +import { render } from '../../__test__/testing-library' +import { ChipContent } from './ChipContent' + +const props = { + id: 'testId', + disabled: false, + selected: false, + facet: '(06)', + label: 'Chips are Delicious', + bridgeLabel: 'Chips are amazing', + Icon: Departure, + IconTitle: 'Departure', + action: { + Icon: Broom, + title: 'Sweep', + }, + image: Delta, +} + +describe('ChipContent', () => { + test('All Prop Options passed in', () => { + const { getByText, getAllByTitle, getByAltText, getByTestId } = render() + + //image + expect(getByAltText('Delta')) + + //Icon + expect(getAllByTitle('Departure')).toHaveLength(2) + + //label + expect(getByText('Chips are Delicious')) + + //bridgeLabel + expect(getAllByTitle('to')).toHaveLength(2) + expect(getByText('Chips are amazing')) + + //action icon + expect(getAllByTitle('Sweep')).toHaveLength(2) + + //facet + expect(getByText('(06)')) + + //style + expect(getByTestId('chipContentWrapper')).toHaveStyleRule('border', '1px solid #c0cad5') + expect(getByTestId('chipContentWrapper')).toHaveStyleRule('background-color', '#fff') + expect(getByTestId('chipContentWrapper')).toHaveStyleRule('cursor', 'pointer') + }) + + test('selected, sm', () => { + const { getByTestId } = render() + expect(getByTestId('chipContentWrapper')).toHaveStyleRule('border', '1px solid #0068ef') + expect(getByTestId('chipContentWrapper')).toHaveStyleRule('cursor', 'pointer') + expect(getByTestId('chipContentWrapper')).toHaveStyleRule('padding-left', '8px') + expect(getByTestId('chipContentWrapper')).toHaveStyleRule('height', '32px') + }) + + test('disabled, md', () => { + const { getByTestId } = render() + expect(getByTestId('chipContentWrapper')).toHaveStyleRule('border', '1px solid transparent') + expect(getByTestId('chipContentWrapper')).toHaveStyleRule('cursor', 'not-allowed') + expect(getByTestId('chipContentWrapper')).toHaveStyleRule('padding-left', '16px') + expect(getByTestId('chipContentWrapper')).toHaveStyleRule('height', '40px') + }) + + test('md, with topLabel', () => { + const { getByTestId, getByText } = render( + + ) + expect(getByTestId('chipContentWrapper')).toHaveStyleRule('height', '58px') + expect(getByText('I love chips')) + }) + + test('Custom contents', () => { + const { getByText } = render(HELLO) + + //Child element + expect(getByText('HELLO')) + }) + + test('No Icon and No image', () => { + const { queryByAltText, queryByTitle } = render( + + ) + expect(queryByAltText('Delta')).not.toBeInTheDocument() + expect(queryByTitle('Departure')).not.toBeInTheDocument() + }) + + test('disabled and selected', () => { + const { getByTestId } = render() + expect(getByTestId('chipContentWrapper')).toHaveStyleRule('border', '1px solid #4f6f8f') + expect(getByTestId('chipContentWrapper')).toHaveStyleRule('cursor', 'not-allowed') + }) +}) +import styled from 'styled-components' +import { Label } from '../../Label/Label' +import { getPaletteColor } from '../../utils/utils' +import { ChipContentWrapper } from '../ChipContentWrapper' + +export const ChipLabel = styled(Label)` + display: inline-flex; + user-select: none; + padding: 0; + margin: 0; + > input:focus-visible ~ ${ChipContentWrapper} { + border-color: ${getPaletteColor('base')}; + outline-offset: 2px; + outline: 3px solid ${getPaletteColor('base')}; + } +` +import styled from 'styled-components' + +export const ChipInput = styled.input` + appearance: none; + opacity: 0; + position: absolute; + z-index: 0; + width: 1px; + height: 1px; +` +import React from 'react' +import { fireEvent, render } from '../../__test__/testing-library' +import { ButtonChip } from './ButtonChip' + +const props = { + id: 'testId', + m: 2, + expanded: false, + disabled: false, + onClick: jest.fn(), +} + +describe('ButtonChip', () => { + test('Default', () => { + const { getByTestId } = render() + const buttonChip = getByTestId('testId') + + //onClick + fireEvent.click(buttonChip) + expect(props.onClick).toHaveBeenCalled() + + //aria-expanded + expect(buttonChip).toHaveAttribute('aria-expanded', 'false') + + //(not) disabled + expect(getByTestId('testId')).not.toHaveAttribute('disabled') + + //style + expect(buttonChip).toHaveStyleRule('margin', '8px') + }) + + test('Disabled', () => { + const { getByTestId } = render() + + expect(getByTestId('testId')).toHaveAttribute('disabled') + }) + + test('Expanded', () => { + const { getByTestId } = render() + + expect(getByTestId('testId')).toHaveAttribute('aria-expanded', 'true') + }) +}) +import { Broom, Departure } from 'pcln-icons' +import React from 'react' +import { Box } from '../../Box/Box' +import { Text } from '../../Text/Text' +import { chipWithShadowVariationArgs } from '../../storybook/args' +import { ButtonChip } from './ButtonChip' + +const image = ( + Delta +) + +const small = { + title: 'Small', + value: 'sm', +} + +const medium = { + title: 'Medium', + value: 'md', +} + +const responsive = { + title: 'Responsive', + value: ['sm', 'sm', 'sm', 'md'], +} + +const getExamples = (exampleProps, sizes, width = '') => ( + + {sizes.map((size) => ( + + {size.title} + + {exampleProps.map((props, i) => ( + + ))} + + + ))} + +) + +//Label Only +const labelOnly = [ + { label: 'Enabled' }, + { label: 'Active', expanded: true }, + { label: 'Active', expanded: true, showActionIcon: true }, + { label: 'Disabled', disabled: true }, + { label: 'Active and Disabled', expanded: true, disabled: true }, +] +export const LabelOnly = () => getExamples(labelOnly, [small, medium, responsive]) + +//Label With Width +const labelWithWidth = [{ label: 'Enabled' }, { label: 'Active', expanded: true }] +export const LabelWithWidth = () => getExamples(labelWithWidth, [small, medium, responsive], '45%') + +//With Icon +const withIcon = [ + { label: 'Enabled', Icon: Departure }, + { label: 'Active', expanded: true, Icon: Departure }, + { label: 'Active', expanded: true, showActionIcon: true, Icon: Departure }, + { + label: 'Disabled', + disabled: true, + showActionIcon: true, + Icon: Departure, + }, + { + label: 'Active and Disabled', + expanded: true, + showActionIcon: true, + disabled: true, + Icon: Departure, + }, +] +export const WithIcon = () => getExamples(withIcon, [small, medium, responsive]) + +//With Facet +const withFacet = [ + { label: 'Enabled', facet: '(00)' }, + { label: 'Active', facet: '(00)', expanded: true }, + { label: 'Active', facet: '(00)', expanded: true, showActionIcon: true }, + { + label: 'Disabled', + facet: '(00)', + showActionIcon: true, + disabled: true, + }, + { + label: 'Active and Disabled', + facet: '(00)', + expanded: true, + showActionIcon: true, + disabled: true, + }, +] +export const WithFacet = () => getExamples(withFacet, [small, medium, responsive]) + +//With Facet And Icon +const withFacetAndIcon = [ + { label: 'Enabled', facet: '(00)', Icon: Departure }, + { label: 'Active', facet: '(00)', Icon: Departure, expanded: true }, + { + label: 'Active', + facet: '(00)', + Icon: Departure, + expanded: true, + showActionIcon: true, + }, + { + label: 'Disabled', + facet: '(00)', + Icon: Departure, + showActionIcon: true, + disabled: true, + }, + { + label: 'Active and Disabled', + facet: '(00)', + Icon: Departure, + expanded: true, + showActionIcon: true, + disabled: true, + }, +] +export const WithIconAndFacet = () => getExamples(withFacetAndIcon, [small, medium, responsive]) + +//Icon Only +const iconOnly = [ + { Icon: Departure, title: 'Departure' }, + { Icon: Departure, title: 'Departure' }, + { expanded: true, showActionIcon: true, Icon: Departure, title: 'Departure' }, + { + showActionIcon: true, + disabled: true, + Icon: Departure, + title: 'Departure', + }, + { + expanded: true, + showActionIcon: true, + disabled: true, + Icon: Departure, + title: 'Departure', + }, +] +export const IconOnly = () => getExamples(iconOnly, [small, medium, responsive]) + +//With Image +const withImage = [ + { label: 'Enabled', image: image }, + { label: 'Active', expanded: true, image: image }, + { label: 'Active', expanded: true, showActionIcon: true, image: image }, + { + label: 'Disabled', + showActionIcon: true, + disabled: true, + image: image, + }, + { + label: 'Active and Disabled', + expanded: true, + showActionIcon: true, + disabled: true, + image: image, + }, +] +export const WithImage = () => getExamples(withImage, [medium]) + +//With Image And Bridge Label +const withImageAndBridgeLabel = [ + { label: 'Enabled', image: image, bridgeLabel: 'Bridge' }, + { label: 'Active', expanded: true, image: image, bridgeLabel: 'Bridge' }, + { + label: 'Active', + expanded: true, + showActionIcon: true, + image: image, + bridgeLabel: 'Bridge', + BridgeIcon: Broom, + }, + { + label: 'Disabled', + showActionIcon: true, + disabled: true, + image: image, + bridgeLabel: 'Bridge', + }, + { + label: 'Active and Disabled', + expanded: true, + showActionIcon: true, + disabled: true, + image: image, + bridgeLabel: 'Bridge', + }, +] +export const WithImageAndBridgeLabel = () => getExamples(withImageAndBridgeLabel, [medium]) + +//Image Only +const imageOnly = [ + { image: image }, + { expanded: true, image: image }, + { expanded: true, showActionIcon: true, image: image }, + { showActionIcon: true, disabled: true, image: image }, + { expanded: true, showActionIcon: true, disabled: true, image: image }, +] +export const ImageOnly = () => getExamples(imageOnly, [medium]) + +//Custom Chip +export const CustomChip = () => ( + + + + + Browse All + + + $161 avg. per night + + + + + + + Pricebreakers + + + Save up to 60% + + + + + + + Express Deals + + + $130 avg. per night + + + + + + + Express Deals + + + $130 avg. per night + + + + + + + Pricebreakers + + + Save up to 60% + + + + +) + +// With Variation Shadow +export const WithVariationShadow = () => getExamples(chipWithShadowVariationArgs, [small, medium, responsive]) + +//Default +export default { + title: 'core / Chip / ButtonChip', + component: ButtonChip, +} +import { ChevronDown } from 'pcln-icons' +import React from 'react' +import styled from 'styled-components' +import { FontSizeProps, SpaceProps } from 'styled-system' +import { Button } from '../../Button/Button' +import { getPaletteColor } from '../../utils/utils' +import { ChipContent, type IconComponent } from '../ChipContent/ChipContent' +import { ChipContentWrapper } from '../ChipContentWrapper' + +const ChipButton = styled(Button)` + background-color: transparent; + border: none; + padding: 0; + &:hover { + background-color: transparent; + } + &:focus-visible { + box-shadow: none; + outline-offset: 2px; + outline: 3px solid ${getPaletteColor('base')}; + } + &:focus-visible > ${ChipContentWrapper} { + border-color: ${getPaletteColor('base')}; + } +` + +const getTitle = ({ disabled, expanded }) => (disabled ? 'Disabled' : expanded ? 'Collapse' : 'Expand') + +/** + * @public + */ +export type ButtonChipVariation = 'outline' | 'shadow' + +/** + * @public + */ +export type ButtonChipProps = SpaceProps & + FontSizeProps & { + BridgeIcon?: IconComponent + bridgeLabel?: string + children?: React.ReactNode + color?: string + disabled?: boolean + expanded?: boolean + facet?: string + Icon?: IconComponent + id?: string + label?: string + selected?: boolean + showActionIcon?: boolean + onClick?: (unknown) => unknown + width?: string + variation?: ButtonChipVariation + } + +/** + * @public + */ +export const ButtonChip: React.FC = React.forwardRef( + ( + { + color, + width, + id, + m, + disabled, + expanded, + children, + onClick, + label, + showActionIcon, + variation, + ...props + }, + ref + ) => ( + + + {children} + + + ) +) + +ButtonChip.displayName = 'ButtonChip' + +ButtonChip.defaultProps = { + color: 'primary', + variation: 'outline', +} +import { action } from '@storybook/addon-actions' +import React from 'react' +import styled from 'styled-components' +import { BackgroundImage } from '../BackgroundImage/BackgroundImage' +import { Box } from '../Box/Box' +import { Card } from '../Card/Card' +import { Flex } from '../Flex/Flex' +import { Text } from '../Text/Text' +import { SlideBox } from './SlideBox' + +const ToutCard = styled(Card)` + overflow: hidden; +` + +export default { + title: 'SlideBox', + component: SlideBox, +} + +const TileContents = ({ index }: { index?: number }) => ( + + + + + + City, {index} + + Hotel for 2 nights + + Round-trip flight + + + + $554 + + + $365 + + + per person + + + + +) + +export const Default = () => ( + + + {Array.from(Array(20)).map((_, idx) => ( + + + + ))} + + +) + +export const NoStrechHeight = () => ( + + + {Array.from(Array(6)).map((_, idx) => ( + + + + ))} + + +) + +export const CustomLayout = () => ( + + + {Array.from(Array(6)).map((_, idx) => ( + + + + ))} + + +) +import styled from 'styled-components' +import { Absolute } from '../Absolute/Absolute' + +export const AbsoluteTransformLeft = styled(Absolute)` + transform: translateX(-50%); +` + +export const AbsoluteTransformRight = styled(Absolute)` + transform: translateX(50%); +` + +export const ARROW_SIZES = { + sm: { + buttonSize: 40, + iconSize: 32, + }, + lg: { + buttonSize: [40, null, null, null, 60], + iconSize: [32, null, null, null, 40], + }, +} +export const getWidth = (visibleSlides) => + visibleSlides < 1 ? `${(100 / visibleSlides).toFixed(0)}%` : 1 / visibleSlides + +export const getVisibleSlides = (visibleSlides) => + Array.isArray(visibleSlides) + ? visibleSlides.map((vs) => getWidth(vs)) + : [getWidth(1.1), null, null, getWidth(2.1), getWidth(visibleSlides)] + +export const getCustomWidths = (widths, index) => [ + getWidth(1.1), + null, + null, + getWidth(2.1), + `${widths[(index + widths.length) % widths.length]}%`, +] +import React from 'react' +import { InView } from 'react-intersection-observer' +import styled from 'styled-components' + +const FullHeightInView = styled(InView)` + height: 100%; +` + +export type RenderInViewProps = { + children: React.ReactNode + onSlideChange: (index: number, numSlides: number) => void + index: number + slideRef?: React.RefObject +} + +export function RenderInView({ children, onSlideChange, index, slideRef }: RenderInViewProps): JSX.Element { + const slideVisible = (inView) => { + if (inView) { + const { offsetParent, offsetWidth } = slideRef?.current || {} + // @ts-ignore + const numSlides = Math.round(offsetParent?.offsetWidth / offsetWidth) + onSlideChange(index, numSlides) + } + } + return ( + + {children} + + ) +} +import React from 'react' +import { Box } from '../Box/Box' +import { Flex } from '../Flex/Flex' +import { Relative } from '../Relative/Relative' +import { type ArrowPosition } from './Arrow' + +export type SlideBoxWrapperProps = { + arrowPosition?: ArrowPosition + children: React.ReactNode +} +export function SlideBoxWrapper({ children, arrowPosition }: SlideBoxWrapperProps): JSX.Element { + return arrowPosition === 'side' ? ( + + {children} + + ) : ( + {children} + ) +} +import { ChevronLeft, ChevronRight } from 'pcln-icons' +import React from 'react' +import { Button } from '../Button/Button' +import { Relative } from '../Relative/Relative' +import { ARROW_SIZES } from './Arrow.styled' + +export type ArrowProps = { + isLeft?: boolean + arrowButtonVariation?: 'fill' | 'link' | 'outline' | 'plain' | 'subtle' | 'white' | 'lightFill' | 'input' + size?: string + leftArrowClick?: (unknown) => void + rightArrowClick?: (unknown) => void + leftDisabled?: boolean + rightDisabled?: boolean + mr?: number + ml?: number +} + +export type ArrowPosition = 'top' | 'bottom' | 'side' | 'hide' + +export function Arrow({ + isLeft, + arrowButtonVariation, + size, + leftArrowClick, + rightArrowClick, + leftDisabled, + rightDisabled, + ...props +}: ArrowProps): JSX.Element { + const Icon = isLeft ? ChevronLeft : ChevronRight + const { buttonSize, iconSize } = ARROW_SIZES[size] + return ( + + + + ) +} +import styled from 'styled-components' +import { Box } from '../Box/Box' +import { Flex } from '../Flex/Flex' + +const SlideWrapper = styled(Box)`` + +const ScrollFlex = styled(Flex)` + position: relative; + overflow: auto; + scroll-behavior: smooth; + & > ${SlideWrapper} { + flex-shrink: 0; + } +` + +export { ScrollFlex, SlideWrapper } +import React, { useEffect, useRef } from 'react' +import { type ArrowPosition } from './Arrow' +import { BottomArrows } from './BottomArrows' +import { Slide } from './Slide' +import { ScrollFlex } from './SlideBox.styled' +import { SlideBoxWrapper } from './SlideBoxWrapper' +import { TopArrows } from './TopArrows' +import { getCustomWidths, getVisibleSlides } from './helpers' +import { useSlideBoxNav } from './useSlideBoxNav' + +/** + * @public + */ +export type SlideBoxProps = { + children?: React.ReactNode | string + visibleSlides?: Array | number + onSlideChange?: (unknown) => 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 +} + +/** + * @public + */ +export function SlideBox({ + children, + visibleSlides, + onSlideChange, + slideSpacing, + stretchHeight, + layout, + currentSlideOverride, + arrowSizeOverride, + arrowButtonVariation = 'white', + arrowPosition = 'hide', + slideScrollNum = 2, + mobileSlideScrollNum = 1, +}: SlideBoxProps): JSX.Element { + const childArray = React.Children.toArray(children) + const ref = useRef() + const { setCurrentSlide, currentSlide, onSlideChangeWrapper, arrowProps } = useSlideBoxNav({ + onSlideChange, + currentSlideOverride, + arrowSizeOverride, + arrowButtonVariation, + arrowPosition, + childArray, + slideScrollNum, + mobileSlideScrollNum, + }) + + useEffect(() => { + setCurrentSlide(currentSlideOverride) + }, [currentSlideOverride]) + + return ( + + + + {childArray.map((item: string & React.JSX.Element, index: number) => ( + + ))} + + + + ) +} +import { useState } from 'react' + +const useSlideBoxNav = ({ + onSlideChange, + currentSlideOverride, + arrowSizeOverride, + arrowButtonVariation, + arrowPosition, + childArray, + slideScrollNum, + mobileSlideScrollNum, +}) => { + const [currentSlide, setCurrentSlide] = useState(currentSlideOverride || 0) + const [slideInView, setSlideInView] = useState(currentSlideOverride || 0) + const [numSlides, setNumSlides] = useState(mobileSlideScrollNum) + + const checkSlideBounds = (index, slideCount = numSlides) => + index < slideCount - 1 + ? slideCount - 1 //Slide 0 to numSlide visible + : index > childArray.length - 1 + ? childArray.length - 1 //Last Slide + : index + + const navigateToSlide = (index) => { + let newIndex = checkSlideBounds(index) + //Edge case when flinging slides around, only seems to happen when scrolling left + /* istanbul ignore next */ + if (newIndex === currentSlide) { + newIndex-- + } + setCurrentSlide(newIndex) + } + + const onSlideChangeWrapper = (index, slideCount) => { + const isRightSlide = slideInView < index + numSlides + const newIndex = checkSlideBounds(isRightSlide ? index : index + numSlides - 1, slideCount) + setNumSlides(slideCount) + setSlideInView(newIndex) + onSlideChange?.(newIndex) + } + + const getSlideScrollNum = () => + typeof window === 'undefined' + ? /* istanbul ignore next */ mobileSlideScrollNum + : window.innerWidth < 1024 + ? mobileSlideScrollNum + : slideScrollNum + + return { + setCurrentSlide, + currentSlide, + slideInView, + onSlideChangeWrapper, + arrowProps: { + leftDisabled: slideInView - numSlides === -1, + rightDisabled: slideInView === childArray.length - 1, + arrowButtonVariation, + arrowPosition, + size: arrowSizeOverride || arrowPosition === 'side' ? 'lg' : 'sm', + leftArrowClick: () => { + navigateToSlide(slideInView - getSlideScrollNum()) + }, + rightArrowClick: () => { + navigateToSlide(slideInView + getSlideScrollNum()) + }, + }, + } +} + +export { useSlideBoxNav } +import React from 'react' +import { mockAllIsIntersecting, mockIsIntersecting } from 'react-intersection-observer/test-utils' +import { Box } from '../Box/Box' +import { render } from '../__test__/testing-library' +import { SlideBox } from './SlideBox' + +describe('SlideBox', () => { + it('renders with layout', () => { + const { getByTestId } = render( + {}} slideSpacing={2} stretchHeight arrowPosition='side'> + 1 + 2 + 3 + + ) + mockAllIsIntersecting(true) + expect(getByTestId('slide1')).toHaveStyle(`width: ${(100 / 1.1).toString()}%;`) + }) + + it('renders with array visible slides', () => { + const { getByTestId } = render( + {}} + slideSpacing={2} + currentSlideOverride={2} + arrowPosition='side' + > + 1 + 2 + 3 + + ) + mockAllIsIntersecting(true) + expect(getByTestId('slide1')).toHaveStyle(`width: 50%;`) + }) + + it('renders with int visible slides (small browser should default to 1.1 slides)', () => { + const slideChange = jest.fn() + + const { getByTestId } = render( + + 1 + 2 + 3 + + ) + mockIsIntersecting(getByTestId('render-in-view-1'), true) + expect(slideChange).toHaveBeenCalledTimes(1) + expect(slideChange).toHaveBeenCalledWith(1) + expect(getByTestId('slide1')).toHaveStyle(`width: ${(100 / 1.1).toString()}%;`) + }) + + it('renders with arrows on top', () => { + const { getByTestId } = render( + + 1 + 2 + 3 + + ) + + getByTestId('top-arrows') + }) + + it('renders with no arrows default', () => { + const { queryByTestId } = render( + + 1 + 2 + 3 + + ) + expect(queryByTestId('top-arrows')).not.toBeInTheDocument() + expect(queryByTestId('bottom-arrows')).not.toBeInTheDocument() + expect(queryByTestId('side-left-arrow')).not.toBeInTheDocument() + expect(queryByTestId('side-right-arrow')).not.toBeInTheDocument() + }) +}) +import React from 'react' +import { mockAllIsIntersecting } from 'react-intersection-observer/test-utils' +import { render } from '../__test__/testing-library' +import { Slide } from './Slide' + +const props = { + onSlideChange: jest.fn(), + stretchHeight: false, + index: 0, + slideSpacing: 2, + width: 1, + numSlides: 2, +} + +describe('Slide', () => { + it('Expect scroll function to trigger', () => { + mockAllIsIntersecting(true) + const slideBoxRef = { + current: { + scroll: jest.fn(), + offsetWidth: 0, + }, + } + const { getByText } = render( + // @ts-ignore + + ) + expect(slideBoxRef.current.scroll).toHaveBeenCalled() + getByText('WOOP') + }) + + it('Expect to render without slideBoxRef', () => { + mockAllIsIntersecting(true) + + // @ts-ignore + const { getByText } = render() + getByText('WOOP') + }) +}) +import { getCustomWidths, getVisibleSlides } from './helpers' + +describe('getVisibleSlidesArray', () => { + it('Array of visible slides', () => { + expect(getVisibleSlides([0.5, 4, 8])).toEqual(['200%', 1 / 4, 1 / 8]) + }) + it('int visible slides', () => { + expect(getVisibleSlides(3)).toEqual([1 / 1.1, null, null, 1 / 2.1, 1 / 3]) + }) +}) + +describe('getCustomWidths', () => { + it('First slide', () => { + expect(getCustomWidths([60, 40], 0)).toEqual([1 / 1.1, null, null, 1 / 2.1, '60%']) + }) + it('Second slide', () => { + expect(getCustomWidths([60, 40], 1)).toEqual([1 / 1.1, null, null, 1 / 2.1, '40%']) + }) +}) +import React from 'react' +import { Flex } from '../Flex/Flex' +import { Arrow, type ArrowPosition, type ArrowProps } from './Arrow' +import { AbsoluteTransformLeft } from './Arrow.styled' + +export type TopArrowsProps = { + arrowPosition: ArrowPosition + arrowProps: ArrowProps +} + +export function TopArrows({ arrowPosition, arrowProps }: TopArrowsProps): JSX.Element { + const isSide = arrowPosition === 'side' + const Wrapper = isSide ? AbsoluteTransformLeft : Flex + return ['top', 'side'].includes(arrowPosition) ? ( + + + {isSide ? null : } + + ) : null +} +import React, { useEffect, useRef } from 'react' +import { Box, type BoxProps } from '../Box/Box' +import { RenderInView } from './RenderInView' +import { SlideWrapper } from './SlideBox.styled' + +export type SlideProps = BoxProps & { + onSlideChange: (index: number, numSlides: number) => void + slideSpacing: number + stretchHeight: boolean + index: number + content?: React.JSX.Element + isCurrentSlide: boolean + numSlides: number + slideBoxRef: React.RefObject +} + +export function Slide({ + onSlideChange, + slideSpacing, + stretchHeight, + index, + content, + isCurrentSlide, + width, + numSlides, + slideBoxRef, +}: SlideProps): JSX.Element { + const ref = useRef() + + useEffect(() => { + /* istanbul ignore next */ + if (isCurrentSlide === true && typeof slideBoxRef?.current?.scroll === 'function' && ref?.current) { + const { offsetLeft, offsetParent, offsetWidth } = ref.current + const { offsetWidth: parentOffset } = offsetParent || {} + slideBoxRef?.current?.scroll({ left: offsetLeft - parentOffset + offsetWidth }) + } + }, [isCurrentSlide, ref]) + + return ( + + + + {stretchHeight && React.isValidElement(content) + ? React.cloneElement(content, { style: { 'min-height': '100%' } }) + : content} + + + + ) +} +import React from 'react' +import { Button } from '../Button/Button' +import { fireEvent, render } from '../__test__/testing-library' +import { useSlideBoxNav } from './useSlideBoxNav' + +const getChildArray = () => { + const childarray = [] + for (let i = 0; i < 10; i++) { + childarray.push(
d{i}
) + } + return childarray +} + +const props = { + onSlideChange: jest.fn(), + currentSlideOverride: 0, + arrowSizeOverride: 'lg', + arrowButtonVariation: 'white', + arrowPosition: 'side', + childArray: getChildArray(), + slideScrollNum: 1, + mobileSlideScrollNum: 1, +} + +const Test = (testProps) => { + const { setCurrentSlide, currentSlide, onSlideChangeWrapper, arrowProps, slideInView } = + useSlideBoxNav(testProps) + const { + leftDisabled, + rightDisabled, + arrowButtonVariation, + arrowPosition, + size, + leftArrowClick, + rightArrowClick, + } = arrowProps + + const slideChange = () => { + onSlideChangeWrapper(6, 3) + } + + const slideChangeOutsideBounds = () => { + onSlideChangeWrapper(-5, 3) + } + + const slideChangeOutsideBoundsUpper = () => { + onSlideChangeWrapper(99, 3) + } + + return ( +
+
{leftDisabled ? 'true' : 'false'}
+
{rightDisabled ? 'true' : 'false'}
+
{arrowButtonVariation}
+
{arrowPosition}
+
{size}
+
slide {currentSlide}
+
slide {slideInView}
+ + + + + + +
+ ) +} + +describe('useSlideBoxNav', () => { + it('Basic functionality', () => { + const { getByTestId, getByText } = render() + expect(getByTestId('leftdisabled').innerHTML).toEqual('true') + expect(getByTestId('rightdisabled').innerHTML).toEqual('false') + expect(getByTestId('arrowButtonVariation').innerHTML).toEqual('white') + expect(getByTestId('arrowPosition').innerHTML).toEqual('side') + expect(getByTestId('arrowSize').innerHTML).toEqual('lg') + expect(getByTestId('currentslide').innerHTML).toEqual('slide 0') + + //Right arrow click + fireEvent.click(getByText('Right Arrow Click')) + expect(getByTestId('currentslide').innerHTML).toEqual('slide 1') + + //Left arrow click + fireEvent.click(getByText('Left Arrow Click')) + expect(getByTestId('currentslide').innerHTML).toEqual('slide 0') + + //Slide Change (used in useEffect) + fireEvent.click(getByText('Slide Change Wrapper')) + expect(getByTestId('slideInView').innerHTML).toEqual('slide 6') + + //Slide Change outside bounds + fireEvent.click(getByText('Slide Change Outside Bounds')) + expect(getByTestId('slideInView').innerHTML).toEqual('slide 2') + + //Slide Change outside bounds (lower) + fireEvent.click(getByText('Slide Change Outside Bounds')) + expect(getByTestId('slideInView').innerHTML).toEqual('slide 2') + + //Slide Change outside bounds (upper) + fireEvent.click(getByText('Slide Change Outside Bounds Upper')) + expect(getByTestId('slideInView').innerHTML).toEqual('slide 9') + }) +}) + +describe('useSlideBoxNav', () => { + beforeAll(() => { + // @ts-ignore + global.window.innerWidth = 800 + }) + + it('Edge cases', () => { + const { getByText, getByTestId } = render( + + ) + + //Slide Change (used in useEffect) + fireEvent.click(getByText('Slide Change Wrapper')) + expect(getByTestId('slideInView').innerHTML).toEqual('slide 6') + + //Right arrow click + fireEvent.click(getByText('Right Arrow Click')) + expect(getByTestId('currentslide').innerHTML).toEqual('slide 7') + + //Default arrow size to lg + expect(getByTestId('arrowSize').innerHTML).toEqual('lg') + }) + + it('Uncovered prop cases', () => { + const { getByTestId } = render( + + ) + + //Default arrow size to sm when arrowPosition top + expect(getByTestId('arrowSize').innerHTML).toEqual('sm') + }) +}) +import React from 'react' +import { Flex } from '../Flex/Flex' +import { Arrow, type ArrowProps } from './Arrow' +import { AbsoluteTransformRight } from './Arrow.styled' + +export type BottomArrowsProps = { + arrowPosition: 'top' | 'bottom' | 'side' | 'hide' + arrowProps: ArrowProps +} + +export function BottomArrows({ arrowPosition, arrowProps }: BottomArrowsProps): JSX.Element { + const isSide = arrowPosition === 'side' + const Wrapper = isSide ? AbsoluteTransformRight : Flex + return ['bottom', 'side'].includes(arrowPosition) ? ( + + {isSide ? null : } + + + ) : null +} +export const colors = { + primary: 'primary', + secondary: 'secondary', + text: 'text', + success: 'success', + error: 'error', + warning: 'warning', + alert: 'alert', + caution: 'caution', + notify: 'notify', + pricePrimary: 'pricePrimary', + priceSecondary: 'priceSecondary', + promoPrimary: 'promoPrimary', + promoSecondary: 'promoSecondary', + border: 'border', + background: 'background', +} +import { + Attention as AttentionIcon, + Check as CheckIcon, + InformationOutline as InformationOutlineIcon, +} from 'pcln-icons' +import React from 'react' +import { type MotionVariant } from '../../Animate/Animate' +import { Button } from '../../Button/Button' +import { Flex } from '../../Flex/Flex' +import { Text } from '../../Text/Text' +import { useToast } from '../../ToastProvider/ToastProvider' + +export const errorOptions = { + children: 'Error Toast Message', + color: 'error', + icon: , +} + +export const informationOptions = { + children: 'Information Toast Message', + color: 'primary', + icon: , +} + +export const successOptions = { + children: 'Success Toast Message', + color: 'success', + icon: , +} + +export const customOptions = { + children: Custom Toast Message, + enterAnimation: 'expandDown' as MotionVariant, + exitAnimation: 'fadeIn' as MotionVariant, + hideClose: true, + lifespan: 2000, +} + +export const MockToastChildren = ({ variation }: { variation: 'border' | 'fill' }) => { + const { addToast } = useToast() + + return ( + + + + + + + ) +} +import { render, type RenderResult } from '@testing-library/react' +import React from 'react' +import { ThemeProvider } from '../ThemeProvider/ThemeProvider' + +const WithThemeProvider = ({ children }) => {children} + +const customRender: (Element, any?) => RenderResult = (ui, options) => + render(ui, { wrapper: WithThemeProvider, ...options }) + +export * from '@testing-library/react' +export { customRender as render } + +export const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms)) +// Type definitions for @testing-library/jest-dom 5.14 +// Project: https://github.com/testing-library/jest-dom +// Definitions by: Ernesto García +// John Gozde +// Seth Macpherson +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 3.8 + +declare namespace jest { + interface Matchers { + /** + * @deprecated + * since v1.9.0 + * @description + * Assert whether a value is a DOM element, or not. Contrary to what its name implies, this matcher only checks + * that you passed to it a valid DOM element. + * + * It does not have a clear definition of what "the DOM" is. Therefore, it does not check whether that element + * is contained anywhere. + * @see + * [testing-library/jest-dom#toBeInTheDom](https://github.com/testing-library/jest-dom#toBeInTheDom) + */ + toBeInTheDOM(container?: HTMLElement | SVGElement): R + /** + * @description + * Assert whether an element is present in the document or not. + * @example + * + * + * expect(queryByTestId('svg-element')).toBeInTheDocument() + * expect(queryByTestId('does-not-exist')).not.toBeInTheDocument() + * @see + * [testing-library/jest-dom#tobeinthedocument](https://github.com/testing-library/jest-dom#tobeinthedocument) + */ + toBeInTheDocument(): R + /** + * @description + * This allows you to check if an element is currently visible to the user. + * + * An element is visible if **all** the following conditions are met: + * * it does not have its css property display set to none + * * it does not have its css property visibility set to either hidden or collapse + * * it does not have its css property opacity set to 0 + * * its parent element is also visible (and so on up to the top of the DOM tree) + * * it does not have the hidden attribute + * * if `
` it has the open attribute + * @example + *
+ * Zero Opacity + *
+ * + *
Visible Example
+ * + * expect(getByTestId('zero-opacity')).not.toBeVisible() + * expect(getByTestId('visible')).toBeVisible() + * @see + * [testing-library/jest-dom#tobevisible](https://github.com/testing-library/jest-dom#tobevisible) + */ + toBeVisible(): R + /** + * @deprecated + * since v5.9.0 + * @description + * Assert whether an element has content or not. + * @example + * + * + * + * + * expect(getByTestId('empty')).toBeEmpty() + * expect(getByTestId('not-empty')).not.toBeEmpty() + * @see + * [testing-library/jest-dom#tobeempty](https://github.com/testing-library/jest-dom#tobeempty) + */ + toBeEmpty(): R + /** + * @description + * Assert whether an element has content or not. + * @example + * + * + * + * + * expect(getByTestId('empty')).toBeEmptyDOMElement() + * expect(getByTestId('not-empty')).not.toBeEmptyDOMElement() + * @see + * [testing-library/jest-dom#tobeemptydomelement](https://github.com/testing-library/jest-dom#tobeemptydomelement) + */ + toBeEmptyDOMElement(): R + /** + * @description + * Allows you to check whether an element is disabled from the user's perspective. + * + * Matches if the element is a form control and the `disabled` attribute is specified on this element or the + * element is a descendant of a form element with a `disabled` attribute. + * @example + * + * + * expect(getByTestId('button')).toBeDisabled() + * @see + * [testing-library/jest-dom#tobedisabled](https://github.com/testing-library/jest-dom#tobedisabled) + */ + toBeDisabled(): R + /** + * @description + * Allows you to check whether an element is not disabled from the user's perspective. + * + * Works like `not.toBeDisabled()`. + * + * Use this matcher to avoid double negation in your tests. + * @example + * + * + * expect(getByTestId('button')).toBeEnabled() + * @see + * [testing-library/jest-dom#tobeenabled](https://github.com/testing-library/jest-dom#tobeenabled) + */ + toBeEnabled(): R + /** + * @description + * Check if a form element, or the entire `form`, is currently invalid. + * + * An `input`, `select`, `textarea`, or `form` element is invalid if it has an `aria-invalid` attribute with no + * value or a value of "true", or if the result of `checkValidity()` is false. + * @example + * + * + *
+ * + *
+ * + * expect(getByTestId('no-aria-invalid')).not.toBeInvalid() + * expect(getByTestId('invalid-form')).toBeInvalid() + * @see + * [testing-library/jest-dom#tobeinvalid](https://github.com/testing-library/jest-dom#tobeinvalid) + */ + toBeInvalid(): R + /** + * @description + * This allows you to check if a form element is currently required. + * + * An element is required if it is having a `required` or `aria-required="true"` attribute. + * @example + * + *
+ * + * expect(getByTestId('required-input')).toBeRequired() + * expect(getByTestId('supported-role')).not.toBeRequired() + * @see + * [testing-library/jest-dom#toberequired](https://github.com/testing-library/jest-dom#toberequired) + */ + toBeRequired(): R + /** + * @description + * Allows you to check if a form element is currently required. + * + * An `input`, `select`, `textarea`, or `form` element is invalid if it has an `aria-invalid` attribute with no + * value or a value of "false", or if the result of `checkValidity()` is true. + * @example + * + * + *
+ * + *
+ * + * expect(getByTestId('no-aria-invalid')).not.toBeValid() + * expect(getByTestId('invalid-form')).toBeInvalid() + * @see + * [testing-library/jest-dom#tobevalid](https://github.com/testing-library/jest-dom#tobevalid) + */ + toBeValid(): R + /** + * @description + * Allows you to assert whether an element contains another element as a descendant or not. + * @example + * + * + * + * + * const ancestor = getByTestId('ancestor') + * const descendant = getByTestId('descendant') + * const nonExistantElement = getByTestId('does-not-exist') + * expect(ancestor).toContainElement(descendant) + * expect(descendant).not.toContainElement(ancestor) + * expect(ancestor).not.toContainElement(nonExistantElement) + * @see + * [testing-library/jest-dom#tocontainelement](https://github.com/testing-library/jest-dom#tocontainelement) + */ + toContainElement(element: HTMLElement | SVGElement | null): R + /** + * @description + * Assert whether a string representing a HTML element is contained in another element. + * @example + * + * + * expect(getByTestId('parent')).toContainHTML('') + * @see + * [testing-library/jest-dom#tocontainhtml](https://github.com/testing-library/jest-dom#tocontainhtml) + */ + toContainHTML(htmlText: string): R + /** + * @description + * Allows you to check if a given element has an attribute or not. + * + * You can also optionally check that the attribute has a specific expected value or partial match using + * [expect.stringContaining](https://jestjs.io/docs/en/expect.html#expectnotstringcontainingstring) or + * [expect.stringMatching](https://jestjs.io/docs/en/expect.html#expectstringmatchingstring-regexp). + * @example + * + * + * expect(button).toHaveAttribute('disabled') + * expect(button).toHaveAttribute('type', 'submit') + * expect(button).not.toHaveAttribute('type', 'button') + * @see + * [testing-library/jest-dom#tohaveattribute](https://github.com/testing-library/jest-dom#tohaveattribute) + */ + toHaveAttribute(attr: string, value?: unknown): R + /** + * @description + * Check whether the given element has certain classes within its `class` attribute. + * + * You must provide at least one class, unless you are asserting that an element does not have any classes. + * @example + * + * + *
no classes
+ * + * const deleteButton = getByTestId('delete-button') + * const noClasses = getByTestId('no-classes') + * expect(deleteButton).toHaveClass('btn') + * expect(deleteButton).toHaveClass('btn-danger xs') + * expect(deleteButton).toHaveClass('btn xs btn-danger', {exact: true}) + * expect(deleteButton).not.toHaveClass('btn xs btn-danger', {exact: true}) + * expect(noClasses).not.toHaveClass() + * @see + * [testing-library/jest-dom#tohaveclass](https://github.com/testing-library/jest-dom#tohaveclass) + */ + toHaveClass(...classNames: string[]): R + toHaveClass(classNames: string, options?: { exact: boolean }): R + /** + * @description + * This allows you to check whether the given form element has the specified displayed value (the one the + * end user will see). It accepts , + * + * + * + * + * + * + * + * const input = screen.getByLabelText('First name') + * const textarea = screen.getByLabelText('Description') + * const selectSingle = screen.getByLabelText('Fruit') + * const selectMultiple = screen.getByLabelText('Fruits') + * + * expect(input).toHaveDisplayValue('Luca') + * expect(textarea).toHaveDisplayValue('An example description here.') + * expect(selectSingle).toHaveDisplayValue('Select a fruit...') + * expect(selectMultiple).toHaveDisplayValue(['Banana', 'Avocado']) + * + * @see + * [testing-library/jest-dom#tohavedisplayvalue](https://github.com/testing-library/jest-dom#tohavedisplayvalue) + */ + toHaveDisplayValue(value: string | RegExp | Array): R + /** + * @description + * Assert whether an element has focus or not. + * @example + *
+ * + *
+ * + * const input = getByTestId('element-to-focus') + * input.focus() + * expect(input).toHaveFocus() + * input.blur() + * expect(input).not.toHaveFocus() + * @see + * [testing-library/jest-dom#tohavefocus](https://github.com/testing-library/jest-dom#tohavefocus) + */ + toHaveFocus(): R + /** + * @description + * Check if a form or fieldset contains form controls for each given name, and having the specified value. + * + * Can only be invoked on a form or fieldset element. + * @example + *
+ * + * + * + * + *
+ * + * expect(getByTestId('login-form')).toHaveFormValues({ + * username: 'jane.doe', + * rememberMe: true, + * }) + * @see + * [testing-library/jest-dom#tohaveformvalues](https://github.com/testing-library/jest-dom#tohaveformvalues) + */ + toHaveFormValues(expectedValues: Record): R + /** + * @description + * Check if an element has specific css properties with specific values applied. + * + * Only matches if the element has *all* the expected properties applied, not just some of them. + * @example + * + * + * const button = getByTestId('submit-button') + * expect(button).toHaveStyle('background-color: green') + * expect(button).toHaveStyle({ + * background-color: 'green', + * display: none + * }) + * @see + * [testing-library/jest-dom#tohavestyle](https://github.com/testing-library/jest-dom#tohavestyle) + */ + toHaveStyle(css: string | Record): R + /** + * @description + * Check whether the given element has a text content or not. + * + * When a string argument is passed through, it will perform a partial case-sensitive match to the element + * content. + * + * To perform a case-insensitive match, you can use a RegExp with the `/i` modifier. + * + * If you want to match the whole content, you can use a RegExp to do it. + * @example + * Text Content + * + * const element = getByTestId('text-content') + * expect(element).toHaveTextContent('Content') + * // to match the whole content + * expect(element).toHaveTextContent(/^Text Content$/) + * // to use case-insentive match + * expect(element).toHaveTextContent(/content$/i) + * expect(element).not.toHaveTextContent('content') + * @see + * [testing-library/jest-dom#tohavetextcontent](https://github.com/testing-library/jest-dom#tohavetextcontent) + */ + toHaveTextContent(text: string | RegExp, options?: { normalizeWhitespace: boolean }): R + /** + * @description + * Check whether the given form element has the specified value. + * + * Accepts ``, ` + * + * + * + * + * + * + * + * const input = screen.getByLabelText('First name') + * const textarea = screen.getByLabelText('Description') + * const selectSingle = screen.getByLabelText('Fruit') + * const selectMultiple = screen.getByLabelText('Fruits') + * + * expect(input).toHaveDisplayValue('Luca') + * expect(textarea).toHaveDisplayValue('An example description here.') + * expect(selectSingle).toHaveDisplayValue('Select a fruit...') + * expect(selectMultiple).toHaveDisplayValue(['Banana', 'Avocado']) + * + * @see + * [testing-library/jest-dom#tohavedisplayvalue](https://github.com/testing-library/jest-dom#tohavedisplayvalue) + */ + toHaveDisplayValue(value: string | RegExp | Array): R + /** + * @description + * Assert whether an element has focus or not. + * @example + *
+ * + *
+ * + * const input = getByTestId('element-to-focus') + * input.focus() + * expect(input).toHaveFocus() + * input.blur() + * expect(input).not.toHaveFocus() + * @see + * [testing-library/jest-dom#tohavefocus](https://github.com/testing-library/jest-dom#tohavefocus) + */ + toHaveFocus(): R + /** + * @description + * Check if a form or fieldset contains form controls for each given name, and having the specified value. + * + * Can only be invoked on a form or fieldset element. + * @example + *
+ * + * + * + * + *
+ * + * expect(getByTestId('login-form')).toHaveFormValues({ + * username: 'jane.doe', + * rememberMe: true, + * }) + * @see + * [testing-library/jest-dom#tohaveformvalues](https://github.com/testing-library/jest-dom#tohaveformvalues) + */ + toHaveFormValues(expectedValues: Record): R + /** + * @description + * Check if an element has specific css properties with specific values applied. + * + * Only matches if the element has *all* the expected properties applied, not just some of them. + * @example + * + * + * const button = getByTestId('submit-button') + * expect(button).toHaveStyle('background-color: green') + * expect(button).toHaveStyle({ + * background-color: 'green', + * display: none + * }) + * @see + * [testing-library/jest-dom#tohavestyle](https://github.com/testing-library/jest-dom#tohavestyle) + */ + toHaveStyle(css: string | Record): R + /** + * @description + * Check whether the given element has a text content or not. + * + * When a string argument is passed through, it will perform a partial case-sensitive match to the element + * content. + * + * To perform a case-insensitive match, you can use a RegExp with the `/i` modifier. + * + * If you want to match the whole content, you can use a RegExp to do it. + * @example + * Text Content + * + * const element = getByTestId('text-content') + * expect(element).toHaveTextContent('Content') + * // to match the whole content + * expect(element).toHaveTextContent(/^Text Content$/) + * // to use case-insentive match + * expect(element).toHaveTextContent(/content$/i) + * expect(element).not.toHaveTextContent('content') + * @see + * [testing-library/jest-dom#tohavetextcontent](https://github.com/testing-library/jest-dom#tohavetextcontent) + */ + toHaveTextContent(text: string | RegExp, options?: { normalizeWhitespace: boolean }): R + /** + * @description + * Check whether the given form element has the specified value. + * + * Accepts ``, `