@useloops/design-system 1.4.163 → 1.4.165

package/dist/index.d.ts

@@ -1,19 +1,23 @@
-import react, { ReactElement, FunctionComponent, ChangeEvent, PropsWithChildren, ReactNode, FC, Dispatch, SetStateAction } from 'react';
+import { Icons } from 'BrandCore/Icon';
+export { default as Icon, Icons, iconSizeMap, icons } from 'BrandCore/Icon';
 import * as _mui_material from '@mui/material';
-import { AvatarGroupProps as AvatarGroupProps$1, SxProps, ButtonProps as ButtonProps$1, CheckboxProps as CheckboxProps$1, ContainerProps, MenuProps, MenuItemProps as MenuItemProps$1, FormControlLabelProps as FormControlLabelProps$1, Theme, Breakpoint, TooltipProps as TooltipProps$1, IconButtonProps as IconButtonProps$1, ButtonGroupProps, TextFieldProps as TextFieldProps$1, LinkProps as LinkProps$1, PopperProps as PopperProps$1, ClickAwayListenerProps, FadeProps, SelectProps as SelectProps$1, SelectChangeEvent, PaperProps, SwitchProps as SwitchProps$1, TypographyProps as TypographyProps$1, PaletteMode, Direction } from '@mui/material';
+import { SxProps, Theme, AvatarGroupProps as AvatarGroupProps$1, ButtonProps as ButtonProps$1, CheckboxProps as CheckboxProps$1, ContainerProps, MenuProps, MenuItemProps as MenuItemProps$1, FormControlLabelProps as FormControlLabelProps$1, Breakpoint, TooltipProps as TooltipProps$1, IconButtonProps as IconButtonProps$1, ButtonGroupProps, TextFieldProps as TextFieldProps$1, LinkProps as LinkProps$1, PopperProps as PopperProps$1, ClickAwayListenerProps, FadeProps, SelectProps as SelectProps$1, SelectChangeEvent, PaperProps, SwitchProps as SwitchProps$1, TypographyProps as TypographyProps$1, PaletteMode, Direction } from '@mui/material';
+import react, { FunctionComponent, ReactNode, PropsWithChildren, ReactElement, ChangeEvent, FC } from 'react';
+import { SurfaceProps as SurfaceProps$1 } from 'WebCore/Surface';
+import { GenericSizeMap as GenericSizeMap$1 } from 'BrandCore/primitiveVariables';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as _emotion_styled from '@emotion/styled';
 import * as _mui_system from '@mui/system';
 import { Theme as Theme$1 } from '@mui/material/styles';
-import { NavigationSizing as NavigationSizing$1 } from 'Platform/Navigation/Navigation';
+import { NavigationSizing as NavigationSizing$1 } from 'Platform/Navigation';
 import { NumericFormatProps } from 'react-number-format';
+import { InputFieldBaseProps as InputFieldBaseProps$1 } from 'WebCore/InputFieldBase';
 import { PopupState } from 'material-ui-popup-state/hooks';
-import { SurfaceProps as SurfaceProps$1 } from 'WebCore/Surface';
 import { UniqueIdentifier } from '@dnd-kit/core';
 import { SubmitHandler } from 'react-hook-form';
 import { TextFieldProps as TextFieldProps$2, NumberFieldProps as NumberFieldProps$1, TextareaProps as TextareaProps$1, SelectProps as SelectProps$2, CheckboxProps as CheckboxProps$2, CheckboxGroupProps as CheckboxGroupProps$1, SwitchProps as SwitchProps$2, SliderProps as SliderProps$1, DifferentialProps as DifferentialProps$1, LikertProps as LikertProps$1, RadioGroupProps as RadioGroupProps$1, RankProps as RankProps$1, RichTextFieldProps as RichTextFieldProps$1, StarRatingProps as StarRatingProps$1, HtmlProps as HtmlProps$1, CustomFieldProps as CustomFieldProps$1, InputLabelProps as InputLabelProps$1, InputLabelHelpProps as InputLabelHelpProps$1 } from 'WebCore';
 
-interface ColorRange {
+interface ColorRange$1 {
     0: string;
     50?: string;
     100: string;
@@ -29,7 +33,7 @@ interface ColorRange {
     1000: string;
     1100?: string;
 }
-interface ColorRangeAlpha {
+interface ColorRangeAlpha$1 {
     0: string;
     0.01: string;
     1: string;
@@ -38,6 +42,462 @@ interface ColorRangeAlpha {
     4: string;
     5: string;
 }
+declare enum FontWeight {
+    DEFAULT = 400,
+    BOLD = 500
+}
+interface SemanticColor {
+    light: {
+        surface: {
+            sunken: string | undefined;
+            default: string | undefined;
+            raised: string | undefined;
+            overlay: string | undefined;
+            scrim: string | undefined;
+            transparent: string | undefined;
+        };
+        interaction: {
+            none: string | undefined;
+            hover: string | undefined;
+            press: string | undefined;
+            hoverOnDark: string | undefined;
+            pressOnDark: string | undefined;
+            disabled: string | undefined;
+        };
+        stroke: {
+            default: string | undefined;
+            focus: string | undefined;
+            disabled: string | undefined;
+        };
+        text: {
+            primary: string | undefined;
+            secondary: string | undefined;
+            placeholder: string | undefined;
+            disabled: string | undefined;
+            textLink: string | undefined;
+            textLinkHover: string | undefined;
+            primaryInverted: string | undefined;
+            secondaryInverted: string | undefined;
+            placeholderInverted: string | undefined;
+            disabledInverted: string | undefined;
+            positive: string | undefined;
+            negative: string | undefined;
+            lockedWhite: string | undefined;
+        };
+        icon: {
+            primary: string | undefined;
+            secondary: string | undefined;
+            disabled: string | undefined;
+            primaryInverted: string | undefined;
+            secondaryInverted: string | undefined;
+            disabledInverted: string | undefined;
+            positive: string | undefined;
+            negative: string | undefined;
+            lockedWhite: string | undefined;
+        };
+        input: {
+            default: string | undefined;
+            disabled: string | undefined;
+        };
+    };
+    dark: {
+        surface: {
+            sunken: string | undefined;
+            default: string | undefined;
+            raised: string | undefined;
+            overlay: string | undefined;
+            scrim: string | undefined;
+            transparent: string | undefined;
+        };
+        interaction: {
+            none: string | undefined;
+            hover: string | undefined;
+            press: string | undefined;
+            hoverOnDark: string | undefined;
+            pressOnDark: string | undefined;
+            disabled: string | undefined;
+        };
+        stroke: {
+            default: string | undefined;
+            focus: string | undefined;
+            disabled: string | undefined;
+        };
+        text: {
+            primary: string | undefined;
+            secondary: string | undefined;
+            placeholder: string | undefined;
+            disabled: string | undefined;
+            textLink: string | undefined;
+            textLinkHover: string | undefined;
+            primaryInverted: string | undefined;
+            secondaryInverted: string | undefined;
+            placeholderInverted: string | undefined;
+            disabledInverted: string | undefined;
+            positive: string | undefined;
+            negative: string | undefined;
+            lockedWhite: string | undefined;
+        };
+        icon: {
+            primary: string | undefined;
+            secondary: string | undefined;
+            disabled: string | undefined;
+            primaryInverted: string | undefined;
+            secondaryInverted: string | undefined;
+            disabledInverted: string | undefined;
+            positive: string | undefined;
+            negative: string | undefined;
+            lockedWhite: string | undefined;
+        };
+        input: {
+            default: string | undefined;
+            disabled: string | undefined;
+        };
+    };
+}
+
+declare const neutralRamp: {
+    light: {
+        0: string;
+        50: string | undefined;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string | undefined;
+        1000: string;
+        1100: string | undefined;
+    };
+    dark: {
+        0: string;
+        50: string | undefined;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string | undefined;
+        1000: string;
+        1100: string | undefined;
+    };
+};
+declare const generateRamp: (color: ColorRange$1) => {
+    light: {
+        0: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        1000: string;
+    };
+    dark: {
+        0: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        1000: string;
+    };
+};
+declare const purpleRamp: {
+    light: {
+        0: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        1000: string;
+    };
+    dark: {
+        0: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        1000: string;
+    };
+};
+declare const redRamp: {
+    light: {
+        0: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        1000: string;
+    };
+    dark: {
+        0: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        1000: string;
+    };
+};
+declare const peachRamp: {
+    light: {
+        0: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        1000: string;
+    };
+    dark: {
+        0: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        1000: string;
+    };
+};
+declare const yellowRamp: {
+    light: {
+        0: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        1000: string;
+    };
+    dark: {
+        0: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        1000: string;
+    };
+};
+declare const blueRamp: {
+    light: {
+        0: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        1000: string;
+    };
+    dark: {
+        0: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        1000: string;
+    };
+};
+declare const greenRamp: {
+    light: {
+        0: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        1000: string;
+    };
+    dark: {
+        0: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        1000: string;
+    };
+};
+
+declare const neutral: ColorRange$1;
+declare const darkNeutral: ColorRange$1;
+declare const neutralAlpha: ColorRangeAlpha$1;
+declare const darkNeutralAlpha: ColorRangeAlpha$1;
+declare const purple: ColorRange$1;
+declare const red: ColorRange$1;
+declare const peach: ColorRange$1;
+declare const yellow: ColorRange$1;
+declare const blue: ColorRange$1;
+declare const green: ColorRange$1;
+
+type GenericSizeMap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl';
+declare const breakpoints: {
+    sm: number;
+    md: number;
+    lg: number;
+    lgNav: number;
+    xl: number;
+    xxl: number;
+};
+declare const space: {
+    0: number;
+    25: number;
+    50: number;
+    100: number;
+    150: number;
+    200: number;
+    300: number;
+    350: number;
+    400: number;
+    500: number;
+    600: number;
+    800: number;
+    1000: number;
+    2000: number;
+};
+declare const base: number;
+declare const margin: {
+    none: number;
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    xxl: number;
+    xxxl: number;
+};
+declare const padding: {
+    none: number;
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+};
+declare const radius: {
+    none: number;
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    round: number;
+};
+declare const elevation: {
+    raised: string;
+    overlay: string;
+};
+declare const elevationFilter: {
+    raised: string;
+    overlay: string;
+};
+declare const boxShadow: {
+    input: {
+        focus: string;
+    };
+};
+declare const easing: {
+    default: string;
+    input: string;
+};
+
+declare const semantic: SemanticColor;
+
+declare const fonts: {
+    Domaine: {
+        name: string;
+        default: {
+            fileName: string;
+            weight: FontWeight;
+        };
+        bold: {
+            fileName: string;
+            weight: FontWeight;
+        };
+    };
+    FoundersGrotesk: {
+        name: string;
+        default: {
+            fileName: string;
+            weight: FontWeight;
+        };
+        bold: {
+            fileName: string;
+            weight: FontWeight;
+        };
+    };
+    FontStack: {
+        Serif: string;
+        SansSerif: string;
+    };
+};
 
 interface CustomTheme {
     palette: {
@@ -146,13 +606,13 @@ interface CustomTheme {
             handle: string;
         };
     };
-	shape: {
-		borderRadius: number;
-		hotspot: {
-			active: number;
-			default: number
-		}
-	},
+    shape: {
+        borderRadius: number;
+        hotspot: {
+            active: number;
+            default: number;
+        };
+    };
     typography: {
         headline: {
             xs: string;
@@ -175,6 +635,49 @@ interface CustomTheme {
     };
 }
 
+interface AuthContainerSurfaceProps extends SurfaceProps$1 {
+    headContent?: ReactNode;
+    sx?: SxProps<Theme>;
+}
+declare const AuthContainerSurface: FunctionComponent<AuthContainerSurfaceProps>;
+
+type NavigationSizing = 'sm' | 'lg';
+interface NavigationProps {
+    isMobile?: boolean;
+    logoLink?: string;
+    nudgeProps: NudgeProps$1;
+    primaryMenuItemProps: MenuItemProps[];
+    secondaryMenuItemProps: MenuItemProps[];
+    sizing?: NavigationSizing;
+    tertiaryMenuItemProps: MenuItemProps[];
+    toggleMenuOnClick?: () => void;
+    userMenuProps: UserMenuProps$1;
+}
+interface MenuItemProps {
+    active?: boolean;
+    children?: MenuItemProps[];
+    danger?: boolean;
+    fullWidth?: boolean;
+    href?: string;
+    icon?: Icons;
+    label: string;
+    onClick?: () => void;
+    selected?: boolean;
+    sizing?: NavigationSizing;
+}
+interface UserMenuProps$1 {
+    avatar: string;
+    email: string;
+    menuItems: MenuItemProps[];
+    name: string;
+}
+interface NudgeProps$1 extends PropsWithChildren {
+    description: string;
+    notification: boolean;
+    title: string;
+}
+declare const Navigation: FunctionComponent<NavigationProps>;
+
 interface AuthFormHeaderProps {
     logo?: ReactElement | false | undefined;
     headerText?: string;
@@ -198,9 +701,7 @@ interface AvatarGroupProps extends AvatarGroupProps$1 {
 }
 declare const AvatarGroup: FunctionComponent<AvatarGroupProps>;
 
-type GenericSizeMap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl';
-
-type ButtonSizing = Exclude<GenericSizeMap, 'none'>;
+type ButtonSizing = Exclude<GenericSizeMap$1, 'none'>;
 
 interface ButtonBaseProps extends ButtonProps$1 {
     loading?: boolean;
@@ -351,13 +852,6 @@ interface HtmlProps {
 }
 declare const Html: FunctionComponent<HtmlProps>;
 
-interface IconProps {
-    name: 'access-time' | 'arrow-forward' | 'check-circle' | 'check-thin' | 'check' | 'chevron-right' | 'close' | 'dash' | 'error-outline' | 'expand-more' | 'folder' | 'gift' | 'google' | 'help' | 'home' | 'info' | 'lightbulb' | 'linkedin-color' | 'linkedin' | 'lock' | 'loopsOfficial' | 'medium' | 'menu' | 'navigation-arrow' | 'negative' | 'neutral' | 'notification' | 'open-in-new' | 'play' | 'positive' | 'push-left' | 'push-right' | 'settings' | 'star' | 'unfold-more' | 'warning-amber' | string;
-    size?: number;
-    sx?: SxProps;
-}
-declare const Icon: FunctionComponent<IconProps>;
-
 interface TooltipProps extends PropsWithChildren {
     message: TooltipProps$1['title'];
     variation?: 'primary';
@@ -477,52 +971,15 @@ declare const Logo: FunctionComponent<React.SVGProps<SVGSVGElement>>;
 
 declare const Markdown: (props: any) => react_jsx_runtime.JSX.Element;
 
-type NavigationSizing = 'sm' | 'lg';
-interface NavigationProps {
-    isMobile?: boolean;
-    logoLink?: string;
-    nudgeProps: NudgeProps$1;
-    primaryMenuItemProps: MenuItemProps[];
-    secondaryMenuItemProps: MenuItemProps[];
-    sizing?: NavigationSizing;
-    tertiaryMenuItemProps: MenuItemProps[];
-    toggleMenuOnClick?: () => void;
-    userMenuProps: UserMenuProps$1;
-}
-interface MenuItemProps {
-    active?: boolean;
-    children?: MenuItemProps[];
-    danger?: boolean;
-    fullWidth?: boolean;
-    href?: string;
-    icon?: string;
-    label: string;
-    onClick?: () => void;
-    selected?: boolean;
-    sizing?: NavigationSizing;
-}
-interface UserMenuProps$1 {
-    avatar: string;
-    email: string;
-    menuItems: MenuItemProps[];
-    name: string;
-}
-interface NudgeProps$1 extends PropsWithChildren {
-    description: string;
-    notification: boolean;
-    title: string;
-}
-declare const Navigation: FunctionComponent<NavigationProps>;
-
 type MenuButtonSizing = 'sm' | 'md' | 'lg';
 interface MenuButtonProps {
     active?: boolean;
     danger?: boolean;
     fullWidth?: boolean;
     href?: string;
-    icon?: string;
+    icon?: Icons;
     label: string;
-    navigationSizing: NavigationSizing;
+    navigationSizing: NavigationSizing$1;
     onClick?: () => void;
     sizing?: MenuButtonSizing;
 }
@@ -536,7 +993,7 @@ interface NudgeProps extends PropsWithChildren {
 }
 declare const Nudge: FunctionComponent<NudgeProps>;
 
-type NumberFieldProps = InputFieldBaseProps & {
+type NumberFieldProps = InputFieldBaseProps$1 & {
     hideActionButtons?: boolean;
     max?: number;
     min?: number;
@@ -578,7 +1035,7 @@ declare const Portal: FunctionComponent<PortalProps>;
 
 declare const PoweredByWatermarkLogo: () => react_jsx_runtime.JSX.Element;
 
-type ProgressSizing = Exclude<GenericSizeMap, 'none'>;
+type ProgressSizing = Exclude<GenericSizeMap$1, 'none'>;
 interface ProgressProps {
     sizing?: ProgressSizing;
 }
@@ -619,41 +1076,6 @@ interface RadioGroupProps {
 }
 declare const RadioGroup: FunctionComponent<RadioGroupProps>;
 
-type SelectOption = {
-    label: string;
-    value: string;
-};
-
-type SelectOnChange = (event: SelectChangeEvent<any>, child: React.ReactNode) => void;
-type AutocompleteOnChange = (value: string | string[]) => void;
-type SelectProps = {
-    selections: SelectOption[];
-    autoComplete?: boolean;
-    autoFocus?: boolean;
-    disabled?: boolean;
-    disablePortal?: boolean;
-    error?: boolean;
-    fullWidth?: boolean;
-    id?: string;
-    inputRef?: SelectProps$1['inputRef'];
-    internalChange?: () => void;
-    MenuProps?: SelectProps$1['MenuProps'];
-    multi?: boolean;
-    name: string;
-    onBlur?: SelectProps$1['onBlur'];
-    onChange?: SelectOnChange | AutocompleteOnChange;
-    placeholder?: string | undefined;
-    readOnly?: boolean;
-    ref?: SelectProps$1['ref'];
-    required?: boolean;
-    selectOptionProps?: MenuItemProps$1;
-    sizing?: 'xs' | 'md' | 'lg';
-    sx?: SelectProps$1['sx'];
-    value?: SelectProps$1['value'];
-    renderListItem?: (value: string, label: string) => ReactElement;
-};
-declare const Select: FunctionComponent<SelectProps>;
-
 interface Option {
     label: string;
     value: string;
@@ -707,6 +1129,41 @@ type RichTextFieldProps = Omit<InputFieldBaseProps, 'value' | 'onChange'> & {
 };
 declare const RichTextField: FunctionComponent<RichTextFieldProps>;
 
+type SelectOption = {
+    label: string;
+    value: string;
+};
+
+type SelectOnChange = (event: SelectChangeEvent<any>, child: React.ReactNode) => void;
+type AutocompleteOnChange = (value: string | string[]) => void;
+type SelectProps = {
+    selections: SelectOption[];
+    autoComplete?: boolean;
+    autoFocus?: boolean;
+    disabled?: boolean;
+    disablePortal?: boolean;
+    error?: boolean;
+    fullWidth?: boolean;
+    id?: string;
+    inputRef?: SelectProps$1['inputRef'];
+    internalChange?: () => void;
+    MenuProps?: SelectProps$1['MenuProps'];
+    multi?: boolean;
+    name: string;
+    onBlur?: SelectProps$1['onBlur'];
+    onChange?: SelectOnChange | AutocompleteOnChange;
+    placeholder?: string | undefined;
+    readOnly?: boolean;
+    ref?: SelectProps$1['ref'];
+    required?: boolean;
+    selectOptionProps?: MenuItemProps$1;
+    sizing?: 'xs' | 'md' | 'lg';
+    sx?: SelectProps$1['sx'];
+    value?: SelectProps$1['value'];
+    renderListItem?: (value: string, label: string) => ReactElement;
+};
+declare const Select: FunctionComponent<SelectProps>;
+
 interface SliderProps {
     labelLeft: string;
     labelRight: string;
@@ -748,9 +1205,11 @@ interface SurfaceProps extends PropsWithChildren {
 declare const Surface: FC<SurfaceProps>;
 
 interface StyledSwitchProps extends SwitchProps$1 {
+    sizing?: 'sm' | 'lg';
 }
 
 interface SwitchProps extends StyledSwitchProps {
+    sizing?: 'sm' | 'lg';
     value?: boolean;
     label?: string | ReactElement;
     labelPlacement?: Exclude<FormControlLabelProps['labelPlacement'], 'top' | 'bottom'>;
@@ -760,7 +1219,7 @@ interface SwitchProps extends StyledSwitchProps {
 }
 declare const Switch: FunctionComponent<SwitchProps>;
 
-type TextareaProps = InputFieldBaseProps & {
+type TextareaProps = InputFieldBaseProps$1 & {
     startAdornment?: ReactElement;
     endAdornment?: ReactElement;
     internalChange?: () => void;
@@ -783,7 +1242,7 @@ interface TextBarDividerProps {
 }
 declare const TextBarDivider: FunctionComponent<TextBarDividerProps>;
 
-type TextFieldProps = InputFieldBaseProps & {
+type TextFieldProps = InputFieldBaseProps$1 & {
     startAdornment?: ReactElement;
     endAdornment?: ReactElement;
     internalChange?: () => void;
@@ -942,204 +1401,6 @@ declare const passwordValidation: (min?: number) => {
     };
 };
 
-interface AuthContainerSurfaceProps extends SurfaceProps {
-    headContent?: ReactNode;
-    sx?: SxProps<Theme>;
-}
-declare const AuthContainerSurface: FunctionComponent<AuthContainerSurfaceProps>;
-
-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>;
-
-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;
-    ctaVariation?: 'primary' | 'secondary' | 'outlined';
-    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 TickGroupProps {
-    heading: string;
-    ticks: string[];
-}
-declare const TickGroup: FunctionComponent<TickGroupProps>;
-
 type ScreenSize = 'sm' | 'lg';
 
 interface Props extends PropsWithChildren {
@@ -1182,14 +1443,14 @@ declare module '@mui/material/styles' {
             palette?: {
                 black?: string;
                 white?: string;
-                neutral?: ColorRange;
-                neutralAlpha?: ColorRangeAlpha;
-                purple?: ColorRange;
-                red?: ColorRange;
-                peach?: ColorRange;
-                yellow?: ColorRange;
-                blue?: ColorRange;
-                green?: ColorRange;
+                neutral?: ColorRange$1;
+                neutralAlpha?: ColorRangeAlpha$1;
+                purple?: ColorRange$1;
+                red?: ColorRange$1;
+                peach?: ColorRange$1;
+                yellow?: ColorRange$1;
+                blue?: ColorRange$1;
+                green?: ColorRange$1;
                 icon?: {
                     primary?: string;
                     secondary?: string;
@@ -1349,4 +1610,4 @@ declare module '@mui/system' {
     }
 }
 
-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, CustomField, type CustomFieldProps, DEFAULT_MAX_INPUT_LENGTH, Differential, type DifferentialProps, DropdownMenu, type FieldType, type FieldTypes, FormControlLabel, FormGenerator, type FormGeneratorConfig, type FormGeneratorHandler, GridOverlay, type GridOverlayProps, Html, type HtmlProps, Icon, IconButton, IconButtonGroup, type IconButtonProps, InputFieldBase, type InputFieldBaseProps, InputLabel, InputLabelHelp, type InputLabelHelpProps, type InputLabelProps, Likert, type LikertProps, Link, type LinkProps, Loader, type LoaderProps, Logo, Markdown, MenuButton, type MenuButtonProps, Navigation, type NavigationProps, type NavigationSizing, Nudge, type NudgeProps, NumberField, type NumberFieldProps, Pill, type PillProps, PlanFeatureTable, type PlanFeatureTableProps, PlanTierCard, type PlanTierCardProps, PlanTierCardScale, type PlanTierCardScaleProps, Popper, type PopperProps, Portal, type PortalProps, PoweredByWatermarkLogo, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Rank, type RankProps, RichTextField, type RichTextFieldProps, 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, Toast, type ToastProps, Tooltip, type TooltipProps, Typography, type TypographyProps, UserMenu, type UserMenuProps, backgroundCreator, chooseArticle, defaultInputValidation, emailValidation, passwordValidation, useDropdownMenu };
+export { AuthContainerSurface, AuthFormHeader, type AuthFormHeaderProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Button, type ButtonProps, CheckboxGroup as CheckBoxGroup, Checkbox, type CheckboxGroupProps, type CheckboxProps, ColorBackgroundContainer, type ColorBackgroundContainerProps, type ColorRange$1 as ColorRange, type ColorRangeAlpha$1 as ColorRangeAlpha, CustomField, type CustomFieldProps, DEFAULT_MAX_INPUT_LENGTH, Differential, type DifferentialProps, DropdownMenu, type FieldType, type FieldTypes, FontWeight, FormControlLabel, FormGenerator, type FormGeneratorConfig, type FormGeneratorHandler, type GenericSizeMap, GridOverlay, type GridOverlayProps, Html, type HtmlProps, IconButton, IconButtonGroup, type IconButtonProps, InputFieldBase, type InputFieldBaseProps, InputLabel, InputLabelHelp, type InputLabelHelpProps, type InputLabelProps, Likert, type LikertProps, Link, type LinkProps, Loader, type LoaderProps, Logo, Markdown, MenuButton, type MenuButtonProps, Navigation, type NavigationProps, type NavigationSizing, Nudge, type NudgeProps, NumberField, type NumberFieldProps, Pill, type PillProps, Popper, type PopperProps, Portal, type PortalProps, PoweredByWatermarkLogo, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Rank, type RankProps, RichTextField, type RichTextFieldProps, Select, type SelectProps, type SemanticColor, 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, Toast, type ToastProps, Tooltip, type TooltipProps, Typography, type TypographyProps, UserMenu, type UserMenuProps, backgroundCreator, base, blue, blueRamp, boxShadow, breakpoints, chooseArticle, darkNeutral, darkNeutralAlpha, defaultInputValidation, easing, elevation, elevationFilter, emailValidation, fonts, generateRamp, green, greenRamp, margin, neutral, neutralAlpha, neutralRamp, padding, passwordValidation, peach, peachRamp, purple, purpleRamp, radius, red, redRamp, semantic, space, useDropdownMenu, yellow, yellowRamp };