@useloops/design-system 0.0.1

package/dist/index.d.ts

@@ -0,0 +1,978 @@
+import * as react from 'react';
+import { Dispatch, SetStateAction, FunctionComponent, ReactElement, ChangeEvent, PropsWithChildren, ReactNode } from 'react';
+import * as _mui_material from '@mui/material';
+import { AvatarProps as AvatarProps$1, AvatarGroupProps as AvatarGroupProps$1, ButtonProps as ButtonProps$1, FormControlLabelProps as FormControlLabelProps$1, CheckboxProps as CheckboxProps$1, ContainerProps, Breakpoint, SxProps, IconButtonProps as IconButtonProps$1, ButtonGroupProps, InputLabelProps as InputLabelProps$1, LinkProps as LinkProps$1, RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1, SelectProps as SelectProps$1, MenuItemProps, SliderProps as SliderProps$1, RatingProps, PaperProps, Theme, SwitchProps as SwitchProps$1, TextFieldProps as TextFieldProps$1, TypographyProps as TypographyProps$1, PaletteMode } from '@mui/material';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { UniqueIdentifier } from '@dnd-kit/core';
+import * as _emotion_styled from '@emotion/styled';
+import * as _mui_system from '@mui/system';
+import * as _mui_material_OverridableComponent from '@mui/material/OverridableComponent';
+import { SubmitHandler } from 'react-hook-form';
+
+interface ColorRange {
+    0: string;
+    50?: string;
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+    900: string;
+    950?: string;
+    1000: string;
+    1100?: string;
+}
+interface ColorRangeAlpha {
+    0: string;
+    1: string;
+    2: string;
+    3: string;
+    4: string;
+    5: string;
+}
+
+interface CustomTheme {
+    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;
+            lockedWhite: string;
+        };
+        interaction: {
+            none: string;
+            hover: string;
+            press: string;
+            hoverOnDark: string;
+            pressOnDark: string;
+            disabled: 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;
+            textLink: string;
+            textLinkHover: string;
+            primaryInverted: string;
+            secondaryInverted: string;
+            placeholderInverted: string;
+            disabledInverted: string;
+            positive: string;
+            negative: string;
+            lockedWhite: string;
+        };
+        input: {
+            default: string;
+            disabled: 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;
+    };
+    elevationFilter: {
+        raised: string;
+        overlay: string;
+    };
+    easing: {
+        default: string;
+        input: string;
+    };
+    boxShadow: {
+        input: {
+            focus: string;
+            handle: string;
+        };
+    };
+    typography: {
+        headline: {
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            xxl: string;
+            xxxl: string;
+        };
+        body: {
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            xxl: string;
+            xxxl: string;
+        };
+    };
+}
+
+type SupportedCurrency = 'gbp' | 'eur' | 'usd';
+type SupportedFrequency = 'monthly' | 'annual';
+interface AnnualControllerProps {
+    body: string;
+    currency: string;
+    changeCurrencyEvent?: (value: string) => void;
+    frequency: string;
+    heading: string;
+    setCurrency?: Dispatch<SetStateAction<SupportedCurrency>>;
+    setFrequency?: Dispatch<SetStateAction<SupportedFrequency>>;
+    togglePayAnnuallyEvent?: () => void;
+}
+declare const AnnualController: FunctionComponent<AnnualControllerProps>;
+
+interface AuthFormHeaderProps {
+    logo?: ReactElement | false | undefined;
+    headerText?: string;
+    subText?: ReactElement | string;
+}
+declare const AuthFormHeader: FunctionComponent<AuthFormHeaderProps>;
+
+interface AvatarProps extends Pick<AvatarProps$1, 'src' | 'className' | 'alt'> {
+    variation?: 'sm' | 'lg';
+}
+declare const Avatar: FunctionComponent<AvatarProps>;
+
+interface AvatarGroupProps extends AvatarGroupProps$1 {
+    variation?: 'primary';
+}
+declare const AvatarGroup: FunctionComponent<AvatarGroupProps>;
+
+type GenericSizeMap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+type ButtonSizing = Exclude<GenericSizeMap, 'none'>;
+
+interface ButtonBaseProps extends ButtonProps$1 {
+    loading?: boolean;
+    sizing: any;
+}
+
+interface ButtonProps extends Pick<ButtonBaseProps, 'fullWidth' | 'className' | 'disabled' | 'tabIndex' | 'href' | 'endIcon' | 'startIcon' | 'children' | 'onClick' | 'type'> {
+    loading?: boolean;
+    variation?: 'primary' | 'secondary' | 'outlined' | 'subtle';
+    sizing?: ButtonSizing;
+}
+declare const Button: FunctionComponent<ButtonProps>;
+
+interface FormControlLabelProps extends Omit<FormControlLabelProps$1, 'label'> {
+    label?: string;
+}
+declare const FormControlLabel: FunctionComponent<FormControlLabelProps>;
+
+interface StyledCheckboxProps extends CheckboxProps$1 {
+    sizing?: 'default' | 'lg';
+}
+
+interface CheckboxProps extends Omit<FormControlLabelProps, 'control' | 'disableTypography' | 'classes' | 'labelPlacement' | 'slotProps' | 'label'> {
+    sizing?: StyledCheckboxProps['sizing'];
+    indeterminate?: StyledCheckboxProps['indeterminate'];
+    checkboxLabel?: string;
+    internalChange?: () => void;
+}
+declare const Checkbox: FunctionComponent<CheckboxProps>;
+
+interface CheckboxGroupOption {
+    label: string;
+    value: string;
+    exclusive?: boolean;
+}
+interface CheckboxGroupOther {
+    label?: string;
+    enabled?: boolean;
+    placeholder?: string;
+    name?: string;
+    defaultValue?: string;
+}
+interface CheckboxGroupProps {
+    options: CheckboxGroupOption[];
+    value: string[];
+    sizing?: CheckboxProps['sizing'];
+    onChange: (arrayIds: string[]) => void;
+    id: string;
+    inputRef?: any;
+    other?: CheckboxGroupOther;
+    internalChange?: () => void;
+}
+declare const CheckboxGroup: FunctionComponent<CheckboxGroupProps>;
+
+interface BackgroundOptions {
+    texture?: 'none' | 'noise1';
+    gradient?: 'tone1' | 'tone2' | 'tone3' | 'tone4';
+}
+
+interface ColorBackgroundContainerProps extends ContainerProps, BackgroundOptions {
+}
+declare const ColorBackgroundContainer: FunctionComponent<ColorBackgroundContainerProps>;
+
+interface DifferentialProps {
+    labelLeft: string;
+    labelRight: string;
+    labelCenter?: string;
+    disabled?: boolean;
+    value?: string;
+    onChange?: (event: ChangeEvent<HTMLInputElement>, checked: boolean) => void;
+    internalChange?: () => void;
+}
+declare const Differential: FunctionComponent<DifferentialProps>;
+
+interface Props$1 {
+    id: UniqueIdentifier;
+    top?: JSX.Element;
+    bottom?: JSX.Element;
+}
+declare function SortableItem({ children, top, bottom, id }: PropsWithChildren<Props$1>): react_jsx_runtime.JSX.Element;
+declare function DragHandle(): react_jsx_runtime.JSX.Element;
+
+interface BaseItem {
+    id: UniqueIdentifier;
+}
+interface SortableListProps<T extends BaseItem> {
+    items: T[];
+    onChange(items: T[]): void;
+    renderItem(item: T, isOverlay?: boolean, isDragActive?: boolean): ReactNode;
+    disabled?: boolean;
+    direction?: 'horizontal' | 'vertical';
+}
+declare function SortableList<T extends BaseItem>({ items, onChange, renderItem, disabled, direction }: SortableListProps<T>): react_jsx_runtime.JSX.Element | undefined;
+declare namespace SortableList {
+    var Item: typeof SortableItem;
+    var DragHandle: typeof DragHandle;
+}
+
+interface DragAndDropRankingProps extends Omit<SortableListProps<any>, 'renderItem'> {
+    labelTop: string;
+    labelBottom: string;
+    fullWidth?: boolean;
+    options: any[];
+    internalChange?: () => void;
+    value?: any[];
+}
+declare const DragAndDropRanking: FunctionComponent<DragAndDropRankingProps>;
+
+interface GridOverlayProps {
+    breakpoint?: Breakpoint;
+}
+declare const GridOverlay: FunctionComponent<GridOverlayProps>;
+
+interface IconProps {
+    name: 'arrow-forward' | 'expand-more' | 'close' | 'play' | 'positive' | 'negative' | 'neutral' | 'info' | 'check-circle' | 'error-outline' | 'lightbulb' | 'warning-amber' | 'access-time' | 'linkedin' | 'medium' | 'menu' | 'unfold-more' | 'navigation-arrow' | 'lock' | 'loopsOfficial' | 'google' | 'linkedin-color' | 'check' | 'dash' | 'gift' | string;
+    size?: number;
+    sx?: SxProps;
+}
+declare const Icon: FunctionComponent<IconProps>;
+
+type IconButtonSizing = 'lg' | 'md';
+type IconButtonShapeMap = 'default' | 'round';
+type IconButtonVariation = 'default' | 'toggle' | 'outlined' | 'raised';
+interface IconButtonProps extends Pick<IconButtonProps$1, 'edge' | 'classes' | 'children' | 'onClick' | 'disabled' | 'ref' | 'id' | 'type'> {
+    variation?: IconButtonVariation;
+    shape?: IconButtonShapeMap;
+    sizing?: IconButtonSizing;
+    icon: ReactElement;
+    loading?: boolean;
+}
+
+declare const IconButton: ({ icon, loading, sizing, ...rest }: IconButtonProps) => react_jsx_runtime.JSX.Element;
+
+interface IconButtonGroupProps extends PropsWithChildren {
+    ButtonGroupProps?: ButtonGroupProps;
+    variation?: IconButtonProps['variation'];
+    orientation: ButtonGroupProps['orientation'];
+    sizing?: IconButtonProps['sizing'];
+    divider?: boolean;
+    iconColor?: string;
+    disabled?: boolean;
+}
+declare const IconButtonGroup: FunctionComponent<IconButtonGroupProps>;
+
+type InputVariation = 'default' | 'help';
+
+type InputLabelBaseProps = Pick<InputLabelProps$1, 'children' | 'required' | 'error' | 'disabled' | 'sx' | 'component'> & {
+    variation?: InputVariation;
+    align?: 'left' | 'center' | 'right';
+};
+
+interface InputLabelProps extends Pick<InputLabelBaseProps, 'align' | 'children' | 'disabled' | 'error' | 'required' | 'component'> {
+}
+declare const InputLabel: FunctionComponent<InputLabelProps>;
+
+interface InputLabelHelpProps extends Pick<InputLabelBaseProps, 'align' | 'children' | 'disabled' | 'required'> {
+    state?: 'default' | 'positive' | 'negative' | 'disabled';
+    showicon?: boolean;
+    icon?: ReactNode;
+}
+declare const InputLabelHelp: FunctionComponent<InputLabelHelpProps>;
+
+interface LikertOption {
+    label: string;
+    value: string;
+}
+interface LikertProps {
+    options: LikertOption[];
+    disabled?: boolean;
+    onChange: (event: any) => void;
+    value: string;
+    sizing?: 'default' | 'lg';
+    internalChange?: () => void;
+}
+declare const Likert: FunctionComponent<LikertProps>;
+
+interface LinkProps extends LinkProps$1 {
+}
+declare const Link: FunctionComponent<LinkProps>;
+
+interface LoaderProps {
+}
+declare const Loader: FunctionComponent<LoaderProps>;
+
+declare const Logo: FunctionComponent<React.SVGProps<SVGSVGElement>>;
+
+interface PillProps {
+    body: string;
+    variation?: 'default' | 'peach' | 'peachDark' | 'purple';
+    weight?: 'heavy' | 'light';
+}
+declare const Pill: FunctionComponent<PillProps>;
+
+declare const _default: {
+    headings: {
+        "01-starter": {
+            heading: string;
+            pricing: string;
+        };
+        "02-team": {
+            heading: string;
+            pricing: string;
+        };
+        "03-plus": {
+            heading: string;
+            pricing: string;
+        };
+        "04-scale": {
+            heading: string;
+            pricing: string;
+        };
+    };
+    rows: {
+        "01-seats": {
+            heading: string;
+            description: string;
+            starter: string;
+            team: string;
+            plus: string;
+            scale: string;
+        };
+        "02-servicing": {
+            heading: string;
+            description: string;
+            starter: string;
+            team: string;
+            plus: string;
+            scale: string;
+        };
+        "03-respondents": {
+            heading: string;
+            description: string;
+            starter: string;
+            team: string;
+            plus: string;
+            scale: string;
+        };
+        "04-questions": {
+            heading: string;
+            description: string;
+            starter: string;
+            team: string;
+            plus: string;
+            scale: string;
+        };
+        "05-ai": {
+            heading: string;
+            description: string;
+            starter: string;
+            team: string;
+            plus: string;
+            scale: string;
+        };
+        "06-demographics": {
+            heading: string;
+            description: string;
+            starter: string;
+            team: string;
+            plus: string;
+            scale: string;
+        };
+        "07-training": {
+            heading: string;
+            description: string;
+            starter: string;
+            team: string;
+            plus: string;
+            scale: string;
+        };
+        "08-invite": {
+            heading: string;
+            description: string;
+            starter: string;
+            team: string;
+            plus: string;
+            scale: string;
+        };
+        "09-email": {
+            heading: string;
+            description: string;
+            starter: string;
+            team: string;
+            plus: string;
+            scale: string;
+        };
+        "10-beta": {
+            heading: string;
+            description: string;
+            starter: string;
+            team: string;
+            plus: string;
+            scale: string;
+        };
+        "11-sso": {
+            heading: string;
+            description: string;
+            starter: string;
+            team: string;
+            plus: string;
+            scale: string;
+        };
+        "12-minimum": {
+            heading: string;
+            description: string;
+            starter: string;
+            team: string;
+            plus: string;
+            scale: string;
+        };
+    };
+};
+
+interface PlanFeatureTableProps {
+    currencySymbol: string;
+    data: typeof _default;
+    starterPrice: string;
+    starterRespondentPrice: string;
+    teamPrice: string;
+    teamRespondentPrice: string;
+    plusPrice: string;
+    plusRespondentPrice: string;
+    scalePrice: string;
+    scaleRespondentPrice: string;
+    variation?: 'default' | 'platform';
+}
+declare const PlanFeatureTable: FunctionComponent<PlanFeatureTableProps>;
+
+interface PlanTierCardProps {
+    amount: string;
+    billingType?: string;
+    body: string;
+    ctaEvent?: (heading: string) => void;
+    ctaLink?: string;
+    ctaTarget?: string;
+    ctaText: string;
+    currencySymbol: string;
+    currentPlan?: boolean;
+    features?: string[];
+    freeTrialLength?: string;
+    freeTrialText?: string;
+    frequency: string;
+    heading: string;
+    label?: string;
+    largestHeaderHeight?: number;
+    perMonth: string;
+    setLargestHeaderHeight?: (height: number) => void;
+    variation?: 'default' | 'platform';
+}
+declare const PlanTierCard: FunctionComponent<PlanTierCardProps>;
+
+interface PlanTierCardScaleProps {
+    amount: string;
+    body: string;
+    ctaEvent?: (heading: string) => void;
+    ctaLink?: string;
+    ctaTarget?: string;
+    ctaText: string;
+    currencySymbol: string;
+    heading: string;
+    preText: string;
+    postText: string;
+}
+declare const PlanTierCardScale: FunctionComponent<PlanTierCardScaleProps>;
+
+interface PortalProps extends PropsWithChildren {
+}
+declare const Portal: FunctionComponent<PortalProps>;
+
+declare const PoweredByWatermarkLogo: () => react_jsx_runtime.JSX.Element;
+
+type ProgressSizing = Exclude<GenericSizeMap, 'none'>;
+interface ProgressProps {
+    sizing?: ProgressSizing;
+}
+declare const Progress: FunctionComponent<ProgressProps>;
+
+interface RadioProps extends Pick<RadioProps$1, 'disabled' | 'name' | 'value' | 'autoFocus' | 'onChange' | 'checked' | 'readOnly' | 'required' | 'aria-label'> {
+    sizing?: 'default' | 'lg';
+}
+declare const Radio: FunctionComponent<RadioProps>;
+
+interface RadioGroupOption {
+    label: string;
+    value: string;
+}
+interface RadioGroupOther {
+    label?: string;
+    enabled?: boolean;
+    placeholder?: string;
+    name?: string;
+}
+interface RadioGroupProps extends Omit<RadioGroupProps$1, 'defaultValue' | 'sx' | 'classes' | 'onChange'> {
+    options: RadioGroupOption[];
+    other?: RadioGroupOther;
+    onChange: (value: string) => void;
+    internalChange?: () => void;
+}
+declare const RadioGroup: FunctionComponent<RadioGroupProps>;
+
+type SelectProps = Pick<SelectProps$1, 'onChange' | 'id' | 'onBlur' | 'autoFocus' | 'disabled' | 'error' | 'fullWidth' | 'name' | 'placeholder' | 'readOnly' | 'required' | 'ref' | 'value' | 'inputRef'> & {
+    selections: {
+        value: string;
+        label: string;
+    }[];
+    selectOptionProps?: MenuItemProps;
+    internalChange?: () => void;
+    sx?: SxProps;
+};
+declare const Select: FunctionComponent<SelectProps>;
+
+type SliderComponentProps = Pick<SliderProps$1, 'defaultValue' | 'disabled' | 'max' | 'min' | 'onChange' | 'step' | 'value'>;
+interface SliderProps extends SliderComponentProps {
+    labelLeft: string;
+    labelRight: string;
+    labelMiddle?: string;
+    min: any;
+    labelRightProps?: InputLabelHelpProps;
+    labelLeftProps?: InputLabelHelpProps;
+    internalChange?: () => void;
+}
+declare const Slider: FunctionComponent<SliderProps>;
+
+interface StarRatingProps extends Pick<RatingProps, 'defaultValue' | 'disabled' | 'IconContainerComponent' | 'name' | 'precision' | 'value' | 'readOnly' | 'onChange'> {
+    internalChange?: () => void;
+}
+declare const StarRating: FunctionComponent<StarRatingProps>;
+
+interface SurfaceProps extends PaperProps {
+    variation: 'default' | 'sunken' | 'raised' | 'overlay';
+    borderradius?: GenericSizeMap;
+}
+declare const Surface: _emotion_styled.StyledComponent<_mui_material.PaperOwnProps & _mui_material_OverridableComponent.CommonProps & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLDivElement> | null | undefined;
+}, "children" | "sx" | "style" | "className" | "elevation" | "square" | "classes" | "variant"> & _mui_system.MUIStyledCommonProps<Theme> & SurfaceProps, {}, {}>;
+
+interface SwitchProps extends SwitchProps$1 {
+}
+declare const Switch: _emotion_styled.StyledComponent<SwitchProps & _mui_system.MUIStyledCommonProps<_mui_material.Theme>, {}, {}>;
+
+type InputFieldBaseProps = TextFieldProps$1;
+
+type TextareaProps = InputFieldBaseProps & {
+    iconLeft?: ReactElement;
+    iconRight?: ReactElement;
+    internalChange?: () => void;
+};
+declare const Textarea: FunctionComponent<TextareaProps>;
+
+interface TypographyProps {
+    variation: 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl';
+    component: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p';
+    weight?: 'default' | 'bold';
+    clamp?: number;
+}
+declare const Typography: FunctionComponent<TypographyProps & TypographyProps$1>;
+
+interface TextBarDividerProps {
+    sx?: SxProps;
+    typographyProps?: TypographyProps;
+    text: string;
+}
+declare const TextBarDivider: FunctionComponent<TextBarDividerProps>;
+
+type TextFieldProps = InputFieldBaseProps & {
+    iconLeft?: ReactElement;
+    iconRight?: ReactElement;
+    internalChange?: () => void;
+};
+declare const TextField: FunctionComponent<TextFieldProps>;
+
+interface TickGroupProps {
+    heading: string;
+    ticks: string[];
+}
+declare const TickGroup: FunctionComponent<TickGroupProps>;
+
+interface TooltipProps extends PropsWithChildren {
+    message: string;
+    variation?: 'primary';
+}
+declare const Tooltip: FunctionComponent<TooltipProps>;
+
+interface FormGeneratorHandler {
+    set: () => void;
+    reset: () => void;
+    submit: () => void;
+    values: () => void;
+    valid: () => void;
+    errors: () => void;
+    triggerFormValidation: () => Promise<unknown>;
+}
+type FormGeneratorProps = FunctionComponent<{
+    formConfig: FormGeneratorConfig;
+    onFormSubmit?: SubmitHandler<any>;
+    onFormChange?: (formData: any) => void;
+    submitButton?: ReactElement;
+    secondaryButton?: ReactElement;
+    ref?: any;
+}>;
+interface FormGeneratorConfig {
+    fields: FieldTypes[];
+    autoComplete?: 'off';
+    formId?: string;
+    reValidateMode?: 'onSubmit' | 'onBlur' | 'onChange';
+    styleOverrides?: {
+        sxForm?: SxProps<Theme>;
+        sxButtons?: SxProps<Theme>;
+        sxStack?: SxProps<Theme>;
+    };
+}
+type TextFieldType = BaseField & TextFieldProps;
+type SelectType = BaseField & SelectProps;
+type CheckboxType = BaseField & CheckboxProps;
+type CheckboxGroupType = BaseField & CheckboxGroupProps;
+type SliderType = BaseField & SliderProps;
+type DifferentialType = BaseField & DifferentialProps;
+type LikertType = BaseField & LikertProps;
+type RadioGroupType = BaseField & RadioGroupProps;
+type DragAndDropRankingType = BaseField & DragAndDropRankingProps;
+type FieldType = 'textfield' | 'textarea' | 'select' | 'checkbox' | 'checkboxGroup' | 'slider' | 'differential' | 'likert' | 'starRating' | 'radioGroup' | 'text' | 'dndRanking';
+type FieldTypes = CheckboxType | CheckboxGroupType | SelectType | TextFieldType | SliderType | DifferentialType | LikertType | RadioGroupType | DragAndDropRankingType;
+interface BaseField {
+    name: string;
+    ref?: any;
+    multiline?: boolean;
+    fieldType: FieldType;
+    textContent?: string;
+    typographyProps?: TypographyProps;
+    defaultValue?: string | number | string[] | undefined;
+    label?: string;
+    labelProps?: InputLabelProps;
+    helperText?: string;
+    helpTextProps?: InputLabelHelpProps;
+    validation?: any;
+    valueTransformer?: (valueToTransform: string) => string;
+    disabled?: boolean;
+    styleOverrides?: {
+        sxInputWrapper?: SxProps<Theme>;
+        sxInputBase?: SxProps<Theme>;
+        sxInputStack?: SxProps<Theme>;
+    };
+}
+
+declare const FormGenerator: FormGeneratorProps;
+
+declare const emailValidation: {
+    pattern: {
+        value: RegExp;
+        message: string;
+    };
+};
+
+declare const chooseArticle: (word: string) => string;
+declare const defaultInputValidation: (inputName?: string, isRequired?: boolean, maxLength?: number) => {
+    required?: string | undefined;
+    maxLength: {
+        value: number;
+        message: string;
+    };
+};
+declare const DEFAULT_MAX_INPUT_LENGTH: number;
+
+declare const passwordValidation: (min?: number) => {
+    minLength: {
+        value: number;
+        message: string;
+    };
+    equal: {
+        value: string;
+        message: string;
+    };
+};
+
+interface AuthContainerSurfaceProps extends SurfaceProps {
+    headContent?: ReactNode;
+}
+declare const AuthContainerSurface: FunctionComponent<AuthContainerSurfaceProps>;
+
+type ScreenSize = 'sm' | 'lg';
+
+interface Props {
+    children: any;
+    mode?: PaletteMode;
+    screenSize?: ScreenSize;
+}
+declare const ThemeProvider: FunctionComponent<Props>;
+
+declare module '@mui/material/styles' {
+    interface BreakpointOverrides {
+        xs: false;
+        sm: true;
+        md: true;
+        lg: true;
+        lgNav: true;
+        xl: true;
+        xxl: true;
+    }
+    interface TypographyVariants extends TypographyVariants {
+        xxxl: React.CSSProperties;
+        xxl: React.CSSProperties;
+        xl: React.CSSProperties;
+        lg: React.CSSProperties;
+        md: React.CSSProperties;
+        sm: React.CSSProperties;
+        xs: React.CSSProperties;
+    }
+    interface TypographyVariantsOptions extends TypographyVariantsOptions {
+        xxxl?: React.CSSProperties;
+        xxl?: React.CSSProperties;
+        xl?: React.CSSProperties;
+        lg?: React.CSSProperties;
+        md?: React.CSSProperties;
+        sm?: React.CSSProperties;
+        xs?: React.CSSProperties;
+    }
+    interface ThemeOptions extends 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;
+                };
+                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;
+                };
+            };
+            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;
+            };
+            elevationFilter?: {
+                raised?: string;
+                overlay?: string;
+            };
+            easing?: {
+                default?: string;
+            };
+            boxShadow?: {
+                input?: {
+                    focus?: string;
+                    handle?: string;
+                };
+            };
+            typography?: {
+                headline?: {
+                    xs?: string;
+                    sm?: string;
+                    md?: string;
+                    lg?: string;
+                    xl?: string;
+                    xxl?: string;
+                    xxxl?: string;
+                };
+                body?: {
+                    xs?: string;
+                    sm?: string;
+                    md?: string;
+                    lg?: string;
+                    xl?: string;
+                    xxl?: string;
+                    xxxl?: string;
+                };
+            };
+        };
+    }
+    interface Theme extends Theme {
+        custom: CustomTheme;
+        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 extends TypographyPropsVariantOverrides {
+        xxxl: true;
+        xxl: true;
+        xl: true;
+        lg: true;
+        md: true;
+        sm: true;
+        xs: true;
+    }
+}
+
+export { AnnualController, type AnnualControllerProps, AuthContainerSurface, type AuthContainerSurfaceProps, AuthFormHeader, type AuthFormHeaderProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Button, type ButtonProps, CheckboxGroup as CheckBoxGroup, Checkbox, type CheckboxGroupProps, type CheckboxProps, ColorBackgroundContainer, type ColorBackgroundContainerProps, DEFAULT_MAX_INPUT_LENGTH, Differential, type DifferentialProps, DragAndDropRanking, type DragAndDropRankingProps, type FieldType, type FieldTypes, FormControlLabel, FormGenerator, type FormGeneratorConfig, type FormGeneratorHandler, GridOverlay, type GridOverlayProps, Icon, IconButton, IconButtonGroup, InputLabel, InputLabelHelp, type InputLabelHelpProps, type InputLabelProps, Likert, type LikertProps, Link, type LinkProps, Loader, type LoaderProps, Logo, Pill, type PillProps, PlanFeatureTable, type PlanFeatureTableProps, PlanTierCard, type PlanTierCardProps, PlanTierCardScale, type PlanTierCardScaleProps, Portal, type PortalProps, PoweredByWatermarkLogo, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Select, type SelectProps, Slider, type SliderProps, SortableList, type SortableListProps, StarRating, type StarRatingProps, Surface, type SurfaceProps, Switch, type SwitchProps, Textarea as TextArea, TextBarDivider, type TextBarDividerProps, TextField, type TextFieldProps, type TextareaProps, ThemeProvider, TickGroup, type TickGroupProps, Tooltip, type TooltipProps, Typography, type TypographyProps, chooseArticle, defaultInputValidation, emailValidation, passwordValidation };