@useloops/design-system 1.4.171 → 1.4.173

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as _mui_material from '@mui/material';
 import { SxProps, Theme, PaperProps, 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, LinearProgressProps, SelectProps as SelectProps$1, SelectChangeEvent, SwitchProps as SwitchProps$1, TypographyProps as TypographyProps$1, PaletteMode, Direction } from '@mui/material';
-import react, { FunctionComponent, PropsWithChildren, FC, ReactNode, ReactElement, ChangeEvent } from 'react';
+import react, { FunctionComponent, PropsWithChildren, FC, ReactNode, ReactElement, ChangeEvent, Dispatch, SetStateAction } from 'react';
 import { SubmitHandler } from 'react-hook-form';
 import { Theme as Theme$1 } from '@mui/material/styles';
 import { NumericFormatProps } from 'react-number-format';
@@ -1513,6 +1513,215 @@ interface MenuItem {
 }
 declare const UserMenu: FunctionComponent<UserMenuProps>;
 
+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;
+    sizing?: 'sm' | 'lg';
+    selections?: {
+        value: SupportedCurrency;
+        label: string;
+    }[];
+}
+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 BreakpointOrNull = Breakpoint | null;
+declare const useBreakpoint: () => Breakpoint;
+
+declare function compareArrayMembers(arr1: string[], arr2: string[]): boolean;
+
+declare const useScreenSize: () => {
+    width: number | undefined;
+    height: number | undefined;
+};
+
+declare const usePrevious: <TValue>(value: TValue) => TValue | undefined;
+
 type ScreenSize = 'sm' | 'lg';
 
 interface Props extends PropsWithChildren {
@@ -1727,4 +1936,4 @@ declare module '@mui/system' {
     }
 }
 
-export { AuthContainerSurface, AuthFormHeader, type AuthFormHeaderProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Breadcrumb, type BreadcrumbProps, Button, type ButtonProps, Checkbox, CheckboxGroup, 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, Header, type HeaderProps, Html, type HtmlProps, Icon, IconButton, IconButtonGroup, type IconButtonProps, type IconName, Image, type ImageProps, InputFieldBase, type InputFieldBaseProps, InputLabel, InputLabelHelp, type InputLabelHelpProps, type InputLabelProps, Likert, type LikertProps, Link, type LinkProps, Loader, type LoaderProps, Logo, LoopsAiButton, type LoopsAiButtonProps, Markdown, MenuButton, type MenuButtonProps, Navigation, type NavigationProps, type NavigationSizing, Nudge, type NudgeProps, NumberField, type NumberFieldProps, OnboardingCard, type OnboardingCardProps, Pill, type PillProps, Popper, type PopperProps, Portal, type PortalProps, PoweredByWatermarkLogo, Progress, ProgressBar, type ProgressBarProps, type ProgressProps, ProjectItem, type ProjectItemProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Rank, type RankProps, RichTextField, type RichTextFieldProps, SectionHeader, type SectionHeaderProps, Select, type SelectProps, type SemanticColor, Slider, type SliderProps, SortableList, type SortableListProps, StarRating, type StarRatingProps, Surface, type SurfaceProps, Switch, type SwitchProps, TextBarDivider, type TextBarDividerProps, TextField, type TextFieldProps, Textarea, 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, iconSizeMap, margin, neutral, neutralAlpha, neutralRamp, padding, passwordValidation, peach, peachRamp, purple, purpleRamp, radius, red, redRamp, semantic, space, useDropdownMenu, yellow, yellowRamp };
+export { AnnualController, type AnnualControllerProps, AuthContainerSurface, AuthFormHeader, type AuthFormHeaderProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Breadcrumb, type BreadcrumbProps, type BreakpointOrNull, Button, type ButtonProps, Checkbox, CheckboxGroup, 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, Header, type HeaderProps, Html, type HtmlProps, Icon, IconButton, IconButtonGroup, type IconButtonProps, type IconName, Image, type ImageProps, InputFieldBase, type InputFieldBaseProps, InputLabel, InputLabelHelp, type InputLabelHelpProps, type InputLabelProps, Likert, type LikertProps, Link, type LinkProps, Loader, type LoaderProps, Logo, LoopsAiButton, type LoopsAiButtonProps, Markdown, MenuButton, type MenuButtonProps, Navigation, type NavigationProps, type NavigationSizing, Nudge, type NudgeProps, NumberField, type NumberFieldProps, OnboardingCard, type OnboardingCardProps, Pill, type PillProps, PlanFeatureTable, type PlanFeatureTableProps, PlanTierCard, type PlanTierCardProps, PlanTierCardScale, type PlanTierCardScaleProps, Popper, type PopperProps, Portal, type PortalProps, PoweredByWatermarkLogo, Progress, ProgressBar, type ProgressBarProps, type ProgressProps, ProjectItem, type ProjectItemProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Rank, type RankProps, RichTextField, type RichTextFieldProps, SectionHeader, type SectionHeaderProps, Select, type SelectProps, type SemanticColor, Slider, type SliderProps, SortableList, type SortableListProps, StarRating, type StarRatingProps, Surface, type SurfaceProps, Switch, type SwitchProps, TextBarDivider, type TextBarDividerProps, TextField, type TextFieldProps, Textarea, type TextareaProps, ThemeProvider, TickGroup, type TickGroupProps, Toast, type ToastProps, Tooltip, type TooltipProps, Typography, type TypographyProps, UserMenu, type UserMenuProps, backgroundCreator, base, blue, blueRamp, boxShadow, breakpoints, chooseArticle, compareArrayMembers, darkNeutral, darkNeutralAlpha, defaultInputValidation, easing, elevation, elevationFilter, emailValidation, fonts, generateRamp, green, greenRamp, iconSizeMap, margin, neutral, neutralAlpha, neutralRamp, padding, passwordValidation, peach, peachRamp, purple, purpleRamp, radius, red, redRamp, semantic, space, useBreakpoint, useDropdownMenu, usePrevious, useScreenSize, yellow, yellowRamp };