@useloops/design-system/dist/index.d.ts

The official React based Loops design system

export { blueRamp, generateRamp, greenRamp, neutralRamp, peachRamp, purpleRamp, redRamp, yellowRamp } from './systems/BrandCore/colorRamps.js';
export { blue, darkNeutral, darkNeutralAlpha, green, neutral, neutralAlpha, peach, purple, red, yellow } from './systems/BrandCore/primitiveColor.js';
export { GenericSizeMap, base, boxShadow, breakpoints, easing, elevation, elevationFilter, margin, padding, radius, space } from './systems/BrandCore/primitiveVariables.js';
export { semantic } from './systems/BrandCore/semanticColor.js';
import { ColorRange, ColorRangeAlpha } from './systems/BrandCore/types.js';
export { FontWeight, SemanticColor } from './systems/BrandCore/types.js';
export { fonts } from './systems/BrandCore/typography.js';
export { IconName } from './BrandCore/Icon.js';
import { CustomTheme } from './theme/types.js';
export { ScreenSize } from './theme/types.js';
export { default as PlanFeatureTable, PlanFeatureTableProps } from './systems/Marketing/PlanFeatureTable/PlanFeatureTable.js';
export { PlanFeatureTableData } from './systems/Marketing/PlanFeatureTable/PlanFeatureTableData.js';
export { default as PlanTierCard, PlanTierCardProps, Section } from './systems/Marketing/PlanTierCard/PlanTierCard.js';
export { default as TickGroup, TickGroupProps } from './systems/Marketing/TickGroup/TickGroup.js';
export { default as AiContentContainer, AiContentContainerProps } from './systems/Platform/AiContentContainer/AiContentContainer.js';
export { default as AIInsight, AIInsightProps } from './systems/Platform/AIInsight/AIInsight.js';
export { default as AISummary, AISummaryProps } from './systems/Platform/AISummary/AISummary.js';
export { default as AIWrittenByLockUp, AiWrittenByLockUpProps } from './systems/Platform/AIWrittenByLockUp/AiWrittenByLockUp.js';
export { default as AssetItem, AssetItemProps } from './systems/Platform/AssetItem/AssetItem.js';
export { default as AuthContainerSurface } from './systems/Platform/AuthContainerSurface/AuthContainerSurface.js';
export { default as ClipboardCopyingOverlay, ClipboardCopyingOverlayProps } from './systems/Platform/ClipboardCopyingOverlay/ClipboardCopyingOverlay.js';
export { default as CommentCard } from './systems/Platform/CommentCard/CommentCard.js';
export { CommentCardProps } from './systems/Platform/CommentCard/types.js';
export { default as DataPointInfo } from './systems/Platform/DataPointInfo/DataPointInfo.js';
export { DataPointInfoProps } from './systems/Platform/DataPointInfo/types.js';
export { default as DemographicSelectionSection, DemographicSelectionSectionProps } from './systems/Platform/DemographicSelectionSection/DemographicSelectionSection.js';
export { default as EmojiListItem, EmojiListItemProps } from './systems/Platform/EmojiListItem/EmojiListItem.js';
export { default as EmojiQuestionEditorOption, EmojiQuestionEditorOptionProps } from './systems/Platform/EmojiQuestionEditorOption/EmojiQuestionEditorOption.js';
export { default as EmptyStateCard, EmptyStateCardProps } from './systems/Platform/EmptyStateCard/EmptyStateCard.js';
export { default as ExtendedTestStatus, ExtendedTestStatusProps } from './systems/Platform/ExtendedTestStatus/ExtendedTestStatus.js';
export { default as FilterCount, FilterCountProps } from './systems/Platform/FilterCount/FilterCount.js';
export { default as FilteredItemsCard, FilteredItemsCardProps } from './systems/Platform/FilteredItemsCard/FilteredItemsCard.js';
export { default as FilterGroupAccordion, FilterGroupAccordionProps } from './systems/Platform/FilterGroupAccordion/FilterGroupAccordion.js';
export { default as FilterPyramidGraph, FilterPyramidGraphBarProps } from './systems/Platform/FilterPyramidGraph/FilterPyramidGraph.js';
export { default as FilterRow, FilterRowProps } from './systems/Platform/FilterRow/FilterRow.js';
export { default as GraphBar, GraphBarProps } from './systems/Platform/GraphBar/GraphBar.js';
export { default as Header, HeaderProps } from './systems/Platform/Header/Header.js';
export { default as KpiDataPopover, KpiDataPopoverProps, QuestionStats } from './systems/Platform/KpiDataPopover/KpiDataPopover.js';
export { default as KpiIndicator, KpiIndicatorProps } from './systems/Platform/KpiIndicator/KpiIndicator.js';
export { getKpiIndicatorColor, mapKpiColorSchemeByInteger } from './systems/Platform/KpiIndicator/utils.js';
export { default as LikertGraph } from './systems/Platform/LikertGraph/LikertGraph.js';
export { LikertGraphProps } from './systems/Platform/LikertGraph/types.js';
export { default as LoopItem, LoopItemProps } from './systems/Platform/LoopItem/LoopItem.js';
export { default as LoopItemEmpty, LoopItemEmptyProps } from './systems/Platform/LoopItemEmpty/LoopItemEmpty.js';
export { MiniEmojiGraph, MiniLikertGraph, MiniOpenQuestionGraph, MiniPunchGraph, MiniRankGraph, MiniSliderGraph } from './systems/Platform/MiniResultCard/graphVariants.js';
export { default as MiniResultCard, MiniResultCardProps } from './systems/Platform/MiniResultCard/MiniResultCard.js';
export { default as Navigation, NavigationProps, NavigationSizing } from './systems/Platform/Navigation/Navigation.js';
export { default as OnboardingCard, OnboardingCardProps, OnboardingItem } from './systems/Platform/OnboardingCard/OnboardingCard.js';
export { default as PaginationControl, PaginationControlProps } from './systems/Platform/PaginationControl/PaginationControl.js';
export { default as ProjectItem } from './systems/Platform/ProjectItem/ProjectItem.js';
export { ProjectItemEmptyProps, ProjectItemProps } from './systems/Platform/ProjectItem/projectItem.types.js';
export { default as ProjectItemEmpty } from './systems/Platform/ProjectItem/ProjectItemEmpty.js';
export { default as QuestionBlock, QuestionBlockProps } from './systems/Platform/QuestionBlock/QuestionBlock.js';
export { default as QuestionLabel, QuestionLabelProps } from './systems/Platform/QuestionLabel/QuestionLabel.js';
export { default as QuestionSelector, QuestionSelectorProps } from './systems/Platform/QuestionSelector/QuestionSelector.js';
export { default as SearchInput, SearchInputProps } from './systems/Platform/SearchInput/SearchInput.js';
export { default as SectionHeader, SectionHeaderProps } from './systems/Platform/SectionHeader/SectionHeader.js';
export { default as SentimentArrow, SentimentArrowProps } from './systems/Platform/SentimentArrow/SentimentArrow.js';
export { SliderGraphProps } from './systems/Platform/SliderGraph/types.js';
export { default as SliderGraph } from './systems/Platform/SliderGraph/SliderGraph.js';
export { default as Tab, TabProps } from './systems/Platform/Tab/Tab.js';
export { default as TestItem, TestItemProps } from './systems/Platform/TestItem/TestItem.js';
export { default as TestKPICard, TestKPICardProps } from './systems/Platform/TestKPICard/TestKPICard.js';
export { default as VideoControls, VideoControlsProps } from './systems/Platform/VideoControls/VideoControls.js';
export { MarkerComponentProps } from './systems/Platform/VideoControls/components/Timeline/components/Markers/Markers.js';
export { default as ScrollIndicator, ScrollIndicatorProps } from './systems/Platform/ScrollIndicator/ScrollIndicator.js';
export { emailValidation } from './utils/formValidation/email.js';
export { DEFAULT_MAX_INPUT_LENGTH, chooseArticle, defaultInputValidation } from './utils/formValidation/misc.js';
export { passwordValidation } from './utils/formValidation/password.js';
export { ButtonSizing, buttonHeightMap, buttonInteraction, getButtonSizing, getButtonTypography, getIconSizing, outlined, primary, secondary, subtle } from './systems/WebCore/ButtonBase/Button.variant-helpers.js';
export { backgroundCreator } from './systems/WebCore/utils/backgroundCreator.js';
export { default as AnnualController, AnnualControllerProps } from './systems/WebCore/AnnualController/AnnualController.js';
export { default as Accordion, AccordionProps } from './systems/WebCore/Accordion/Accordion.js';
export { default as AuthFormHeader, AuthFormHeaderProps } from './systems/WebCore/AuthFormHeader/AuthFormHeader.js';
export { default as Avatar, AvatarProps } from './systems/WebCore/Avatar/Avatar.js';
export { default as AvatarGroup, AvatarGroupProps } from './systems/WebCore/AvatarGroup/AvatarGroup.js';
export { default as Badge, BadgeProps } from './systems/WebCore/Badge/Badge.js';
export { default as BrandBadge, BrandBadgeProps } from './systems/WebCore/BrandBadge/BrandBadge.js';
export { default as Breadcrumb, BreadcrumbProps } from './systems/WebCore/Breadcrumb/Breadcrumb.js';
export { default as BulletGraphic, BulletGraphicProps } from './systems/WebCore/BulletGraphic/BulletGraphic.js';
export { default as Button, ButtonProps } from './systems/WebCore/Button/Button.js';
export { default as ButtonBase, ButtonBaseProps } from './systems/WebCore/ButtonBase/ButtonBase.js';
export { default as Checkbox, CheckboxProps } from './systems/WebCore/Checkbox/Checkbox.js';
export { default as CheckboxGroup, CheckboxGroupProps } from './systems/WebCore/CheckboxGroup/CheckboxGroup.js';
export { default as ColorBackgroundContainer, ColorBackgroundContainerProps } from './systems/WebCore/ColorBackgroundContainer/ColorBackgroundContainer.js';
export { default as CreatableAutocomplete, CreatableAutocompleteOption, CreatableAutocompleteProps } from './systems/WebCore/CreatableAutocomplete/CreatableAutocomplete.js';
export { default as CustomField, CustomFieldProps } from './systems/WebCore/CustomField/CustomField.js';
export { default as Differential, DifferentialProps } from './systems/WebCore/Differential/Differential.js';
export { default as DropdownMenu } from './systems/WebCore/DropdownMenu/DropdownMenu.js';
export { useDropdownMenu } from './systems/WebCore/DropdownMenu/DropdownMenu.hook.js';
export { default as EmojiWrapper, EmojiWrapperProps } from './systems/WebCore/EmojiWrapper/EmojiWrapper.js';
export { default as ExpandableTypographyClamp, ExpandableTypographyClampProps } from './systems/WebCore/ExpandableTypographyClamp/ExpandableTypographyClamp.js';
export { default as Flag, FlagProps } from './systems/WebCore/Flag/Flag.js';
export { default as FormControlLabel } from './systems/WebCore/FormControlLabel/FormControlLabel.js';
export { default as FormGenerator } from './systems/WebCore/FormGenerator/FormGenerator.js';
export { FieldType, FieldTypes, FormGeneratorConfig, FormGeneratorHandler } from './systems/WebCore/FormGenerator/types.js';
export { default as GridOverlay, GridOverlayProps } from './systems/WebCore/GridOverlay/GridOverlay.js';
export { default as Html, HtmlProps } from './systems/WebCore/Html/Html.js';
export { default as HtmlParser, HtmlParserProps } from './systems/WebCore/HtmlParser/HtmlParser.js';
export { default as IconButton, IconButtonProps } from './systems/WebCore/IconButton/IconButton.js';
import * as IconButton_variantHelpers from './systems/WebCore/IconButtonBase/IconButton.variant-helpers.js';
export { IconButton_variantHelpers as iconButtonHelpers };
export { default as IconButtonBase, IconButtonBaseProps } from './systems/WebCore/IconButtonBase/IconButtonBase.js';
export { default as IconButtonGroup, IconButtonGroupProps } from './systems/WebCore/IconButtonGroup/IconButtonGroup.js';
export { default as Image, ImageProps } from './systems/WebCore/Image/Image.js';
export { default as InputFieldBase, InputFieldBaseProps } from './systems/WebCore/InputFieldBase/InputFieldBase.js';
export { default as InputLabel, InputLabelProps } from './systems/WebCore/InputLabel/InputLabel.js';
export { default as InputLabelHelp, InputLabelHelpProps } from './systems/WebCore/InputLabelHelp/InputLabelHelp.js';
export { default as Label, LabelProps } from './systems/WebCore/Label/Label.js';
export { default as Likert, LikertProps } from './systems/WebCore/Likert/Likert.js';
export { default as Link, LinkProps } from './systems/WebCore/Link/Link.js';
export { default as Loader, LoaderProps } from './systems/WebCore/Loader/Loader.js';
export { default as Logo } from './systems/WebCore/Logo/Logo.js';
export { default as LoopsAiButton, LoopsAiButtonProps } from './systems/WebCore/LoopsAiButton/LoopsAiButton.js';
export { default as Markdown, MarkdownProps } from './systems/WebCore/Markdown/Markdown.js';
export { default as Menu, MenuProps } from './systems/WebCore/Menu/Menu.js';
export { MenuItemProps } from './systems/WebCore/Menu/MenuItem.js';
export { ModalActionsWrapper } from './systems/WebCore/ModalLayout/_partials/ModalActionsWrapper.js';
export { ModalContentWrapper } from './systems/WebCore/ModalLayout/_partials/ModalContentWrapper.js';
export { default as ModalLayout, ModalLayoutProps } from './systems/WebCore/ModalLayout/ModalLayout.js';
export { default as NavigationButton, NavigationButtonProps } from './systems/WebCore/NavigationButton/NavigationButton.js';
export { default as Nudge, NudgeProps } from './systems/WebCore/Nudge/Nudge.js';
export { default as NumberField } from './systems/WebCore/NumberField/NumberField.js';
export { NumberFieldProps } from './systems/WebCore/NumberField/types.js';
export { default as Pill } from './systems/WebCore/Pill/Pill.js';
export { PillProps } from './systems/WebCore/Pill/types.js';
export { default as Popper, PopperProps } from './systems/WebCore/Popper/Popper.js';
export { default as PoweredByWatermarkLogo } from './systems/WebCore/PoweredByWatermarkLogo/PoweredByWatermarkLogo.js';
export { default as Progress, ProgressProps } from './systems/WebCore/Progress/Progress.js';
export { default as ProgressBar, ProgressBarProps } from './systems/WebCore/ProgressBar/ProgressBar.js';
export { default as Radio, RadioProps } from './systems/WebCore/Radio/Radio.js';
export { default as RadioGroup, RadioGroupProps } from './systems/WebCore/RadioGroup/RadioGroup.js';
export { default as Rank, RankProps } from './systems/WebCore/Rank/Rank.js';
export { default as RichTextField, RichTextFieldProps } from './systems/WebCore/RichTextField/RichTextField.js';
export { default as Select, SelectProps } from './systems/WebCore/Select/Select.js';
export { GroupSelectOption, SelectOption } from './systems/WebCore/Select/StyledSelect.variant-helpers.js';
export { default as Skeleton, SkeletonProps } from './systems/WebCore/Skeleton/Skeleton.js';
export { default as Slider, SliderProps } from './systems/WebCore/Slider/Slider.js';
export { default as SortableList, SortableListProps } from './systems/WebCore/SortableList/SortableList.js';
export { default as StarRating, StarRatingProps } from './systems/WebCore/StarRating/StarRating.js';
export { default as Surface, SurfaceProps } from './systems/WebCore/Surface/Surface.js';
export { default as Switch, SwitchProps } from './systems/WebCore/Switch/Switch.js';
export { default as Textarea, TextareaProps } from './systems/WebCore/Textarea/Textarea.js';
export { default as TextBarDivider, TextBarDividerProps } from './systems/WebCore/TextBarDivider/TextBarDivider.js';
export { default as TextField, TextFieldProps } from './systems/WebCore/TextField/TextField.js';
export { default as Toast, ToastProps } from './systems/WebCore/Toast/Toast.js';
export { default as Tooltip, TooltipProps } from './systems/WebCore/Tooltip/Tooltip.js';
export { default as TrialCard, TrialCardProps } from './systems/WebCore/TrialCard/TrialCard.js';
export { default as Typography, TypographyProps } from './systems/WebCore/Typography/Typography.js';
export { default as UserMenu, UserMenuProps } from './systems/WebCore/UserMenu/UserMenu.js';
export { default as VideoModal, VideoModalProps } from './systems/WebCore/VideoModal/VideoModal.js';
export { BreakpointOrNull, useBreakpoint } from './utils/breakpoint.hook.js';
export { compareArrayMembers } from './utils/compareArrayMembers.js';
export { isButton } from './utils/isButton.js';
export { pluralise } from './utils/pluralise.js';
export { useScreenSize } from './utils/screen.hook.js';
export { useKeyCombo } from './utils/useKeyCombo.js';
export { usePrevious } from './utils/usePrevious.js';
export { customTheme } from './theme/theme.js';
export { useTheme, useThemeBuilder } from './theme/theme.hooks.js';
export { ThemeProvider } from './theme/theme.provider.js';
export { ThemeContext, ThemeCtx } from './theme/theme.context.js';
export { default as Icon, iconSizeMap } from './systems/BrandCore/Icon/Icon.js';

declare module '@mui/material/styles' {
    interface BreakpointOverrides {
        xs: false;
        sm: true;
        md: true;
        lg: true;
        lgNav: true;
        xl: true;
        xxl: true;
    }
    interface TypographyVariants {
        xxxl: React.CSSProperties;
        xxl: React.CSSProperties;
        xl: React.CSSProperties;
        lg: React.CSSProperties;
        md: React.CSSProperties;
        sm: React.CSSProperties;
        xs: React.CSSProperties;
        xxs: React.CSSProperties;
    }
    interface TypographyVariantsOptions {
        xxxl?: React.CSSProperties;
        xxl?: React.CSSProperties;
        xl?: React.CSSProperties;
        lg?: React.CSSProperties;
        md?: React.CSSProperties;
        sm?: React.CSSProperties;
        xs?: React.CSSProperties;
        xxs?: React.CSSProperties;
    }
    interface ThemeOptions {
        custom?: {
            palette?: {
                black?: string;
                white?: string;
                neutral?: ColorRange;
                neutralAlpha?: ColorRangeAlpha;
                purple?: ColorRange;
                red?: ColorRange;
                peach?: ColorRange;
                yellow?: ColorRange;
                blue?: ColorRange;
                green?: ColorRange;
                icon?: {
                    primary?: string;
                    secondary?: string;
                    disabled?: string;
                    primaryInverted?: string;
                    secondaryInverted?: string;
                    disabledInverted?: string;
                };
                interaction?: {
                    none?: string;
                    hover?: string;
                    press?: string;
                    hoverOnDark?: string;
                    pressOnDark?: string;
                    disabled?: string;
                    disabledMuted?: string;
                };
                stroke?: {
                    default?: string;
                    focus?: string;
                    disabled?: string;
                };
                surface?: {
                    default?: string;
                    sunken?: string;
                    raised?: string;
                    overlay?: string;
                    scrim?: string;
                };
                text?: {
                    primary?: string;
                    secondary?: string;
                    placeholder?: string;
                    disabled?: string;
                    primaryInverted?: string;
                    secondaryInverted?: string;
                    placeholderInverted?: string;
                    disabledInverted?: string;
                    success?: string;
                    error?: string;
                };
                input?: {
                    default?: string;
                    disabled?: string;
                };
                skeleton?: {
                    default?: string;
                };
                data: {
                    sentimentVeryPositive?: string;
                    sentimentPositive?: string;
                    sentimentNeutral?: string;
                    sentimentNegative?: string;
                    sentimentVeryNegative?: string;
                };
                body?: string;
            };
            margin?: {
                none?: number;
                xs?: number;
                sm?: number;
                md?: number;
                lg?: number;
                xl?: number;
                xxl?: number;
                xxxl?: number;
            };
            padding?: {
                none?: number;
                xs?: number;
                sm?: number;
                md?: number;
                lg?: number;
                xl?: number;
            };
            radius?: {
                none?: number;
                xs?: number;
                sm?: number;
                md?: number;
                lg?: number;
                xl?: number;
                round?: number;
            };
            elevation?: {
                raised?: string;
                overlay?: string;
                aiSummary?: string;
            };
            elevationFilter?: {
                raised?: string;
                overlay?: string;
            };
            easing?: {
                default?: string;
            };
            boxShadow?: {
                input?: {
                    focus?: string;
                    handle?: string;
                };
            };
            typography?: {
                headline?: {
                    xxs?: string;
                    xs?: string;
                    sm?: string;
                    md?: string;
                    lg?: string;
                    xl?: string;
                    xxl?: string;
                    xxxl?: string;
                };
                body?: {
                    xxs?: string;
                    xs?: string;
                    sm?: string;
                    md?: string;
                    lg?: string;
                    xl?: string;
                    xxl?: string;
                    xxxl?: string;
                };
            };
        };
        p?: {
            none?: string;
            xs?: string;
            sm?: string;
            md?: string;
            lg?: string;
            xl?: string;
        };
        m?: {
            none?: string;
            xs?: string;
            sm?: string;
            md?: string;
            lg?: string;
            xl?: string;
            xxl?: string;
            xxxl?: string;
        };
        r?: {
            none?: string;
            xs?: string;
            sm?: string;
            md?: string;
            lg?: string;
            xl?: string;
            round?: string;
        };
    }
    interface Theme {
        custom: CustomTheme;
        p: {
            none: string;
            xs: string;
            sm: string;
            md: string;
            lg: string;
            xl: string;
        };
        m: {
            none: string;
            xs: string;
            sm: string;
            md: string;
            lg: string;
            xl: string;
            xxl: string;
            xxxl: string;
        };
        r: {
            none: string;
            xs: string;
            sm: string;
            md: string;
            lg: string;
            xl: string;
            round: string;
        };
        margin: {
            0: number;
            xs: number;
            sm: number;
            md: number;
            lg: number;
            xl: number;
            xxl: number;
            xxxl: number;
        };
        padding: {
            0: number;
            xs: number;
            sm: number;
            md: number;
            lg: number;
            xl: number;
        };
        radius: {
            0: number;
            xs: number;
            sm: number;
            md: number;
            lg: number;
            xl: number;
            round: number;
        };
    }
}
declare module '@mui/material/Typography' {
    interface TypographyPropsVariantOverrides {
        xxxl: true;
        xxl: true;
        xl: true;
        lg: true;
        md: true;
        sm: true;
        xs: true;
        xxs: true;
    }
}
declare module '@mui/system' {
    interface Shape {
        hotspot: {
            active: number;
            default: number;
        };
    }
}

export { ColorRange, ColorRangeAlpha, CustomTheme };