@useloops/design-system 1.4.35 → 1.4.36

package/dist/index.d.ts

@@ -1,9 +1,10 @@
 import * as react from 'react';
-import { Dispatch, SetStateAction, FunctionComponent, ReactElement, ChangeEvent, PropsWithChildren, ReactNode } from 'react';
+import { ReactElement, FunctionComponent, ChangeEvent, PropsWithChildren, ReactNode, Dispatch, SetStateAction } 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, Direction } from '@mui/material';
+import { AvatarGroupProps as AvatarGroupProps$1, SxProps, CheckboxProps as CheckboxProps$1, FormControlLabelProps as FormControlLabelProps$1, Theme, Breakpoint, ButtonGroupProps, LinkProps as LinkProps$1, MenuItemProps, SelectProps as SelectProps$1, PaperProps, SwitchProps as SwitchProps$1, TextFieldProps as TextFieldProps$1, TypographyProps as TypographyProps$1, PaletteMode, Direction } from '@mui/material';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { UniqueIdentifier } from '@dnd-kit/core';
+import { Theme as Theme$1 } from '@mui/material/styles';
 import * as _emotion_styled from '@emotion/styled';
 import * as _mui_system from '@mui/system';
 import * as _mui_material_OverridableComponent from '@mui/material/OverridableComponent';
@@ -27,6 +28,7 @@ interface ColorRange {
 }
 interface ColorRangeAlpha {
     0: string;
+    0.01: string;
     1: string;
     2: string;
     3: string;
@@ -170,20 +172,6 @@ interface CustomTheme {
     };
 }
 
-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;
@@ -191,13 +179,18 @@ interface AuthFormHeaderProps {
 }
 declare const AuthFormHeader: FunctionComponent<AuthFormHeaderProps>;
 
-interface AvatarProps extends Pick<AvatarProps$1, 'src' | 'className' | 'alt'> {
+interface AvatarProps {
     variation?: 'sm' | 'lg';
+    src: string;
+    alt: string;
+    className: string;
 }
 declare const Avatar: FunctionComponent<AvatarProps>;
 
 interface AvatarGroupProps extends AvatarGroupProps$1 {
     variation?: 'primary';
+    max?: number;
+    sx: SxProps;
 }
 declare const AvatarGroup: FunctionComponent<AvatarGroupProps>;
 
@@ -205,32 +198,40 @@ 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'> {
+interface ButtonProps {
     loading?: boolean;
     variation?: 'primary' | 'secondary' | 'outlined' | 'subtle';
     sizing?: ButtonSizing;
+    fullWidth?: boolean;
+    className?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    href?: string;
+    endIcon?: ReactElement;
+    startIcon?: ReactElement;
+    children: ReactElement | string;
+    onClick?: () => void;
+    type?: 'button' | 'submit' | 'reset';
 }
 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'> {
+interface CheckboxProps {
     sizing?: StyledCheckboxProps['sizing'];
+    checked?: boolean;
     indeterminate?: StyledCheckboxProps['indeterminate'];
     checkboxLabel?: string;
     internalChange?: () => void;
+    onChange?: (event: React.SyntheticEvent<Element, Event>, checked: boolean) => void;
+    inputRef?: React.RefObject<HTMLInputElement>;
+    defaultChecked?: boolean;
+    disabled?: boolean;
+    id?: string;
+    required?: boolean;
+    value?: any;
 }
 declare const Checkbox: FunctionComponent<CheckboxProps>;
 
@@ -258,13 +259,12 @@ interface CheckboxGroupProps {
 }
 declare const CheckboxGroup: FunctionComponent<CheckboxGroupProps>;
 
-interface BackgroundOptions {
+interface ColorBackgroundContainerProps {
+    sx?: SxProps;
+    children: ReactElement;
     texture?: 'none' | 'noise1';
     gradient?: 'tone1' | 'tone2' | 'tone3' | 'tone4';
 }
-
-interface ColorBackgroundContainerProps extends ContainerProps, BackgroundOptions {
-}
 declare const ColorBackgroundContainer: FunctionComponent<ColorBackgroundContainerProps>;
 
 interface DifferentialProps {
@@ -312,6 +312,22 @@ interface DragAndDropRankingProps extends Omit<SortableListProps<any>, 'renderIt
 }
 declare const DragAndDropRanking: FunctionComponent<DragAndDropRankingProps>;
 
+interface FormControlLabelProps {
+    control: FormControlLabelProps$1['control'];
+    checked?: boolean;
+    disabled?: boolean;
+    label?: string;
+    sx?: SxProps<Theme>;
+    onChange?: FormControlLabelProps$1['onChange'];
+    value?: unknown;
+    required?: boolean;
+    error?: boolean;
+    name?: string;
+    id?: string;
+    inputRef?: FormControlLabelProps$1['inputRef'];
+}
+declare const FormControlLabel: FunctionComponent<FormControlLabelProps>;
+
 interface GridOverlayProps {
     breakpoint?: Breakpoint;
 }
@@ -327,14 +343,22 @@ 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'> {
+
+interface IconButtonProps {
     variation?: IconButtonVariation;
     shape?: IconButtonShapeMap;
     sizing?: IconButtonSizing;
     icon: ReactElement;
     loading?: boolean;
+    edge?: 'start' | 'end';
+    children?: ReactNode | string;
+    onClick?: () => void;
+    disabled?: boolean;
+    ref?: React.Ref<HTMLButtonElement>;
+    id?: string;
+    type?: 'button' | 'submit' | 'reset';
+    className?: string;
 }
-
 declare const IconButton: ({ icon, loading, sizing, ...rest }: IconButtonProps) => react_jsx_runtime.JSX.Element;
 
 interface IconButtonGroupProps extends PropsWithChildren {
@@ -350,19 +374,25 @@ declare const IconButtonGroup: FunctionComponent<IconButtonGroupProps>;
 
 type InputVariation = 'default' | 'help';
 
-type InputLabelBaseProps = Pick<InputLabelProps$1, 'children' | 'required' | 'error' | 'disabled' | 'sx' | 'component'> & {
+interface InputLabelProps {
     variation?: InputVariation;
-    align?: 'left' | 'center' | 'right';
-};
-
-interface InputLabelProps extends Pick<InputLabelBaseProps, 'align' | 'children' | 'disabled' | 'error' | 'required' | 'component' | 'sx'> {
+    align?: 'left' | 'center' | 'right' | undefined;
+    sx?: SxProps<Theme$1>;
+    children?: ReactElement | string;
+    disabled?: boolean;
+    error?: boolean;
+    required?: boolean;
 }
 declare const InputLabel: FunctionComponent<InputLabelProps>;
 
-interface InputLabelHelpProps extends Pick<InputLabelBaseProps, 'align' | 'children' | 'disabled' | 'required'> {
+interface InputLabelHelpProps {
     state?: 'default' | 'positive' | 'negative' | 'disabled';
     showicon?: boolean;
     icon?: ReactNode;
+    align?: 'left' | 'center' | 'right';
+    children?: ReactNode;
+    disabled?: boolean;
+    required?: boolean;
 }
 declare const InputLabelHelp: FunctionComponent<InputLabelHelpProps>;
 
@@ -397,178 +427,6 @@ interface PillProps {
 }
 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;
-    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 PortalProps extends PropsWithChildren {
 }
 declare const Portal: FunctionComponent<PortalProps>;
@@ -581,8 +439,17 @@ interface ProgressProps {
 }
 declare const Progress: FunctionComponent<ProgressProps>;
 
-interface RadioProps extends Pick<RadioProps$1, 'disabled' | 'name' | 'value' | 'autoFocus' | 'onChange' | 'checked' | 'readOnly' | 'required' | 'aria-label'> {
+interface RadioProps {
     sizing?: 'default' | 'lg';
+    disabled?: boolean;
+    name?: string;
+    value?: unknown;
+    autoFocus?: boolean;
+    onChange?: ((event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void) | undefined;
+    checked?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    'aria-label'?: string;
 }
 declare const Radio: FunctionComponent<RadioProps>;
 
@@ -596,42 +463,70 @@ interface RadioGroupOther {
     placeholder?: string;
     name?: string;
 }
-interface RadioGroupProps extends Omit<RadioGroupProps$1, 'defaultValue' | 'sx' | 'classes' | 'onChange'> {
+interface RadioGroupProps {
     options: RadioGroupOption[];
+    children?: ReactNode;
     other?: RadioGroupOther;
     onChange: (value: string) => void;
     internalChange?: () => void;
+    name?: string | undefined;
+    value: string;
 }
 declare const RadioGroup: FunctionComponent<RadioGroupProps>;
 
-type StyledSelectProps = SelectProps$1 & {
-    sizing?: 'lg' | 'md' | 'xs';
-};
-
-type SelectProps = Pick<StyledSelectProps, 'onChange' | 'id' | 'onBlur' | 'autoFocus' | 'disabled' | 'error' | 'fullWidth' | 'name' | 'placeholder' | 'readOnly' | 'required' | 'ref' | 'value' | 'inputRef' | 'MenuProps' | 'sizing'> & {
+type SelectProps = {
     selections: {
         value: string;
         label: string;
     }[];
     selectOptionProps?: MenuItemProps;
     internalChange?: () => void;
-    sx?: SxProps;
+    sx?: SelectProps$1['sx'];
+    onChange?: SelectProps$1['onChange'];
+    onBlur?: SelectProps$1['onBlur'];
+    ref?: SelectProps$1['ref'];
+    inputRef?: SelectProps$1['inputRef'];
+    MenuProps?: SelectProps$1['MenuProps'];
+    value?: SelectProps$1['value'];
+    id?: string;
+    autoFocus?: boolean;
+    disabled?: boolean;
+    error?: boolean;
+    fullWidth?: boolean;
+    name?: string | undefined;
+    placeholder?: string | undefined;
+    readOnly?: boolean;
+    required?: boolean;
+    sizing?: 'xs' | 'md' | 'lg';
 };
 declare const Select: FunctionComponent<SelectProps>;
 
-type SliderComponentProps = Pick<SliderProps$1, 'defaultValue' | 'disabled' | 'max' | 'min' | 'onChange' | 'step' | 'value'>;
-interface SliderProps extends SliderComponentProps {
+interface SliderProps {
     labelLeft: string;
     labelRight: string;
     labelMiddle?: string;
-    min: any;
+    min: number;
     labelRightProps?: InputLabelHelpProps;
     labelLeftProps?: InputLabelHelpProps;
     internalChange?: () => void;
+    defaultValue?: number;
+    disabled?: boolean;
+    max?: number;
+    onChange?: (event: Event, value: number | number[], activeThumb: number) => void;
+    step?: number;
+    value?: number;
 }
 declare const Slider: FunctionComponent<SliderProps>;
 
-interface StarRatingProps extends Pick<RatingProps, 'defaultValue' | 'disabled' | 'IconContainerComponent' | 'name' | 'precision' | 'value' | 'readOnly' | 'onChange'> {
+interface StarRatingProps {
+    defaultValue?: number;
+    disabled?: boolean;
+    readOnly?: boolean;
+    onChange?: (event: React.ChangeEvent<{}>, value: number | null) => void;
+    precision?: number;
+    name?: string;
+    IconContainerComponent?: any;
+    value?: number | null;
     internalChange?: () => void;
 }
 declare const StarRating: FunctionComponent<StarRatingProps>;
@@ -642,7 +537,7 @@ interface SurfaceProps extends PaperProps {
 }
 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, {}, {}>;
+}, "sx" | "className" | "style" | "classes" | "children" | "elevation" | "square" | "variant"> & _mui_system.MUIStyledCommonProps<Theme> & SurfaceProps, {}, {}>;
 
 interface SwitchProps extends SwitchProps$1 {
 }
@@ -679,12 +574,6 @@ type TextFieldProps = InputFieldBaseProps & {
 };
 declare const TextField: FunctionComponent<TextFieldProps>;
 
-interface TickGroupProps {
-    heading: string;
-    ticks: string[];
-}
-declare const TickGroup: FunctionComponent<TickGroupProps>;
-
 type ToastStatus = 'neutral' | 'success' | 'warning' | 'danger' | 'discover';
 type ToastVariation = 'sm' | 'lg';
 interface ToastProps {
@@ -800,6 +689,198 @@ interface AuthContainerSurfaceProps extends SurfaceProps {
 }
 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 {