@nuskin/foundation-ui-components 1.32.1-cdb-1.4 → 1.32.1-cdb-1.6

package/dist/index.d.mts

@@ -0,0 +1,1220 @@
+import * as react from 'react';
+import react__default, { ReactElement, HTMLProps, PropsWithChildren, ReactNode, SyntheticEvent, HTMLAttributes } from 'react';
+import { FoundationTheme } from '@nuskin/foundation-theme';
+import * as _mui_material from '@mui/material';
+import { AutocompleteChangeReason, AutocompleteChangeDetails, ComponentsProps, ButtonProps, TextFieldProps, InputLabelProps, RadioGroupProps } from '@mui/material';
+import { SvgIconProps } from '@mui/material/SvgIcon';
+import * as _emotion_styled from '@emotion/styled';
+import * as _emotion_react from '@emotion/react';
+import * as _mui_material_OverridableComponent from '@mui/material/OverridableComponent';
+import * as _mui_material_Card from '@mui/material/Card';
+import * as _mui_material_CardMedia from '@mui/material/CardMedia';
+import { CheckboxProps } from '@material-ui/core/Checkbox';
+import { React } from 'React';
+import * as notistack from 'notistack';
+import { SnackbarProviderProps, VariantType } from 'notistack';
+
+/**
+ * NsCollapse component adds css animation while showing children items if prop `isOpen` is true,
+ * and while removing children if prop `isOpen` is false
+ */
+declare const NsCollapse: ({ isOpen, content, additionalProps, variant, level, invert, isChild, type, cslp, allowMultipleExpanded, }: NsCollapseProps) => ReactElement;
+
+/**
+ * NsAccordionHeader is primarily used by NsToggleSection and NsAccordionItem
+ * as a header, so it accepts `title` , `isOpen` and `onClick`
+ */
+declare const NsAccordionHeader: ({ title, onClick, isOpen, additionalProps, openedIconName, closedIconName, variant, headerTypographyVariant, startIcon, invert, cslp, showEndIconWhenEmpty, content, }: NsAccordionHeaderProps) => ReactElement;
+
+/**
+ * NsToggleSection takes prop `title` and prop `children` and toggles
+ * children with animation when clicked on title
+ *
+ * it also has a `defaultOpen` prop, which when true, children is visible
+ * by default, otherwise children is hidden by default and toggles between visible
+ * and hidden on clicking title
+ */
+declare const NsToggleSection: ({ title, content, additionalProps, defaultOpen, variant, invert, isChild, type, }: NsToggleSectionProps) => ReactElement;
+
+/**
+ * this component is used by accordion to pass title
+ * and content
+ * cslp:{header:CslpTag, content:CslpTag}
+ */
+declare const NsAccordionItem: ({ isOpen, isChild, toggleOpen, title, content, variant, headerTypographyVariant, closedIconName, openedIconName, startIcon, level, additionalProps, invert, type, cslp, allowMultipleExpanded, showEndIconWhenEmpty, }: NsAccordionItemProps) => ReactElement;
+
+declare const NsAccordion: ({ allowMultipleExpanded, invert, level, variant, items, headerTypographyVariant, closedIconName, openedIconName, additionalProps, isChild, showEndIconWhenEmpty, }: NsAccordionProps) => ReactElement;
+
+type CslpTag = { 'data-cslp': string };
+
+type AdditionalProps = {
+    additionalProps?: {
+        ariaLabel?: string;
+        testid?: string;
+        className?: string;
+        'data-testid'?: string;
+    } & Partial<CslpTag>;
+    cslp?: Record<string, CslpTag>;
+} & DarkModeEnabledOption;
+
+type Themed = {
+    theme: FoundationTheme.Theme;
+};
+
+type DarkModeEnabledOption = {
+    darkModeEnabled?: boolean;
+};
+
+type NsIconSizeType = 'small' | 'medium' | 'large' | 'xLarge';
+
+type NsIconNameType = keyof typeof IconVariants;
+
+type NsIconProps = HTMLProps & {
+    name: NsIconNameType;
+    size?: NsIconSizeType;
+    color?: FoundationTheme.PaletteColors;
+    testId?: string;
+    colorOverride?: string;
+    cursor?:
+        | 'auto'
+        | 'default'
+        | 'none'
+        | 'context-menu'
+        | 'help'
+        | 'pointer'
+        | 'progress'
+        | 'wait'
+        | 'cell'
+        | 'crosshair'
+        | 'text'
+        | 'vertical-text'
+        | 'alias'
+        | 'copy'
+        | 'move'
+        | 'no-drop'
+        | 'not-allowed'
+        | 'grab'
+        | 'grabbing'
+        | 'e-resize'
+        | 'n-resize'
+        | 'ne-resize'
+        | 'nw-resize'
+        | 's-resize'
+        | 'se-resize'
+        | 'sw-resize'
+        | 'w-resize'
+        | 'ew-resize'
+        | 'ns-resize'
+        | 'nesw-resize'
+        | 'nwse-resize'
+        | 'col-resize'
+        | 'row-resize'
+        | 'all-scroll'
+        | 'zoom-in'
+        | 'zoom-out';
+};
+
+declare const NsIcon: ({ name, size, color, testId, className, colorOverride, onClick, cursor, ...rest }: NsIconProps) => ReactElement | null;
+
+/**
+ *  * pass colorOverride = '#272525'
+ */
+declare function UserOutline(props: SvgIconProps): ReactElement;
+
+declare const IconVariants: {
+    arrowDown: (props: _mui_material.SvgIconProps) => react.ReactElement;
+    arrowUp: (props: _mui_material.SvgIconProps) => react.ReactElement;
+    arrowLeft: (props: _mui_material.SvgIconProps) => react.ReactElement;
+    arrowRight: (props: _mui_material.SvgIconProps) => react.ReactElement;
+    alertError: (props: _mui_material.SvgIconProps) => react.ReactElement;
+    cart: (props: _mui_material.SvgIconProps) => react.ReactElement;
+    cartBadge: (props: _mui_material.SvgIconProps) => react.ReactElement;
+    close: (props: _mui_material.SvgIconProps) => react.ReactElement;
+    check: (props: _mui_material.SvgIconProps) => react.ReactElement;
+    checkShield: (props: _mui_material.SvgIconProps) => react.ReactElement;
+    checkVerified: (props: _mui_material.SvgIconProps) => react.ReactElement;
+    error: (props: _mui_material.SvgIconProps) => react.ReactElement;
+    hamburgerIcon: (props: _mui_material.SvgIconProps) => react.ReactElement;
+    home: (props: _mui_material.SvgIconProps) => react.ReactElement;
+    infoFilled: (props: _mui_material.SvgIconProps) => react.ReactElement;
+    infoOutlined: (props: _mui_material.SvgIconProps) => react.ReactElement;
+    search: (props: _mui_material.SvgIconProps) => react.ReactElement;
+    success: (props: _mui_material.SvgIconProps) => react.ReactElement;
+    slash: (props: _mui_material.SvgIconProps) => react.ReactElement;
+    trash: (props: _mui_material.SvgIconProps) => react.ReactElement;
+    userIcon: (props: _mui_material.SvgIconProps) => react.ReactElement;
+    userOutline: typeof UserOutline;
+    warning: (props: _mui_material.SvgIconProps) => react.ReactElement;
+    roundedClose: (props: _mui_material.SvgIconProps) => react.ReactElement;
+    chevronRight: (props: _mui_material.SvgIconProps) => react.ReactElement;
+};
+
+type Variants =
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'title-l'
+    | 'title-m'
+    | 'title-s'
+    | 'label-l'
+    | 'label-m'
+    | 'label-s'
+    | 'body-xl'
+    | 'body-l'
+    | 'body-m'
+    | 'body-s'
+    | 'body-xs'
+    | 'CTA';
+
+type HtmlTagVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'p' | 'label';
+
+type NsTypographyProps = {
+    variant: Variants;
+    decoration?: 'underline' | 'none';
+    weight?: 'bold' | 'normal' | 'light';
+    color?: FoundationTheme.PaletteColors;
+    component?: 'div' | 'span' | 'p';
+    as?: HtmlTagVariant;
+    className?: string;
+    colorOverride?: string;
+    renderHTMLNode?: boolean;
+    noSpacing?:boolean;
+} & AdditionalProps;
+
+declare const NsTypography: ({ children, weight, className, variant, decoration, color, additionalProps, colorOverride, noSpacing, renderHTMLNode, }: PropsWithChildren<NsTypographyProps>) => ReactElement;
+
+declare const GlobalFontInter: () => ReactElement;
+
+declare const AccordionVariant: {
+    readonly Basic: "basic";
+    readonly Compact: "compact";
+    readonly Gray: "gray";
+    readonly Stripe: "stripe";
+};
+declare const variantValues: ("basic" | "compact" | "gray" | "stripe")[];
+type AccordionVariantType = (typeof variantValues)[number];
+declare const AccordionContentTypeObject: {
+    text: string;
+    html: string;
+    accordion: string;
+    jsx: string;
+};
+declare const contentValues: string[];
+type AccordionContentType = (typeof contentValues)[number];
+
+type AccordionItem = {
+    allowMultipleExpanded?: boolean;
+    type: AccordionContentType;
+    id: string;
+    content: string | AccordionItem[] | ReactElement | null;
+    icon?: NsIconProps;
+    title: string | ReactElement;
+    isDefaultOpen?: boolean;
+    $?: {
+        rte: CslpTag;
+        item_title: CslpTag;
+    };
+};
+
+type NsAccordionProps = AdditionalProps & {
+    invert: boolean;
+    level: number;
+    variant: AccordionVariantType;
+    items?: AccordionItem[];
+    isChild?: boolean;
+    headerTypographyVariant?: Variants;
+    /** NsIcon's icon name to be shown in opened state */
+    openedIconName?: NsIconNameType;
+    /** NsIcon's icon name to be shown in closed state */
+    closedIconName?: NsIconNameType;
+    allowMultipleExpanded: boolean;
+    showEndIconWhenEmpty?: boolean;
+};
+
+type CommonAccordionType = {
+    invert: boolean;
+    level: number;
+    variant: AccordionVariantType;
+    content: AccordionItem['content'];
+};
+
+type NsAccordionHeaderProps = AdditionalProps & {
+    title: string | ReactNode;
+    // eslint-disable-next-line no-unused-vars
+    onClick: (...args: any[]) => void;
+    /** a flag for the header, based on which header can change properties */
+    isOpen: boolean;
+    /** NsIcon's icon name to be shown in opened state */
+    openedIconName?: NsIconNameType;
+    /** NsIcon's icon name to be shown in closed state */
+    closedIconName?: NsIconNameType;
+    headerTypographyVariant?: Variants;
+    startIcon?: NsIconProps;
+    showEndIconWhenEmpty?: boolean;
+    content: AccordionItem['content'];
+} & Pick<CommonAccordionType, 'invert' | 'variant'>;
+
+type NsCollapseProps = AdditionalProps & {
+    isOpen: boolean;
+    isChild: boolean;
+    allowMultipleExpanded?: boolean;
+    type: AccordionContentType;
+} & CommonAccordionType;
+
+type NsToggleSectionProps = AdditionalProps & {
+    title: string | ReactNode;
+    /** if true, NsToggle is rendered in open state, that collapsible section is visible */
+    defaultOpen?: boolean;
+    isChild: boolean;
+    type: AccordionContentType;
+} & Pick<CommonAccordionType, 'invert' | 'variant' | 'content'>;
+
+type NsAccordionItemProps = AdditionalProps & {
+    isOpen: boolean;
+    // eslint-disable-next-line no-unused-vars
+    toggleOpen(index: number, isOpen: boolean): void;
+    title: string | ReactNode;
+    headerTypographyVariant?: Variants;
+    /** NsIcon's icon name to be shown in opened state */
+    openedIconName?: NsIconNameType;
+    /** NsIcon's icon name to be shown in closed state */
+    closedIconName?: NsIconNameType;
+    startIcon?: NsIconProps;
+    isChild: boolean;
+    type: AccordionContentType;
+    allowMultipleExpanded?: boolean;
+    showEndIconWhenEmpty?: boolean;
+} & CommonAccordionType;
+
+interface NsAlertProps {
+    context?: string;
+    title?: string;
+    threshold?: number;
+    type?: string;
+    visible?: boolean;
+    head?: ReactNode;
+    body?: ReactNode;
+    onDismiss?: () => void;
+    foot?: ReactNode;
+}
+
+declare function NsAlert({ context, title, threshold, type, visible, head, body, foot, onDismiss, }: NsAlertProps): ReactElement;
+
+type NsAuthDropdownProps = {
+    signInRedirectLink: string;
+    signUpRedirectLink: string;
+    signInBtnText: string;
+    signUpLinkText: string;
+    signUpLinkPrefixText: string;
+    titleText: string;
+    closeOnMouseLeave?: boolean;
+} & AdditionalProps;
+
+declare const NsAuthDropdown: ({ signInRedirectLink, signUpRedirectLink, signInBtnText, signUpLinkText, signUpLinkPrefixText, titleText, closeOnMouseLeave, darkModeEnabled, }: NsAuthDropdownProps) => ReactElement;
+
+type NsAutocompleteProps = {
+    id?: string;
+    options: OptionsProps[];
+    loading?: boolean;
+    OptionsUI: react__default.ComponentType<any>;
+    noOptionsText?: string;
+    /*
+        Callback fired when the input value changes.
+        event The event source of the callback.
+        value The new value of the text input.
+        reason Can be: "input" (user input), "reset" (programmatic change), "clear".
+     */
+    onInputChange(event: SyntheticEvent, value: string, reason: string): void;
+    onKeypress?:(event:SyntheticEvent) => void;
+    /*
+        event The event source of the callback.
+        value The new value of the component.
+        reason One of "createOption", "selectOption", "removeOption", "blur" or "clear".
+     */
+    onChange(
+        event: SyntheticEvent<Element, Event>,
+        value: string | OptionsProps | null,
+        reason: AutocompleteChangeReason,
+        details?: AutocompleteChangeDetails<OptionsProps> | undefined
+    ): void;
+    onFocus?:() => void;
+    clear?: {
+        text?: string;
+        show?: boolean; //default to false
+        onClear: () => void;
+        recentSearchText?: string;
+    };
+    seeMore?: {
+        text?: string;
+        show?: boolean; //default to false
+        onSeeMore: () => void;
+    };
+    placeholder?: string;
+    className?: string;
+    iconStart?: string | react__default.ReactNode;
+    iconEnd?: string | react__default.ReactNode;
+    inputValue: string;
+    value: string | OptionsProps | null;
+    isFilterEnabled?: boolean;
+    fullWidth?:boolean
+} & AdditionalProps;
+
+type ListUiProps = {
+    option: OptionsProps;
+};
+
+type OptionsProps = {
+    id: string;
+    group?: string;
+    value: string;
+    icon?: NsIconNameType;
+    image?: string;
+    groupBgColor?: string;
+};
+
+type ComponentBoxProps = ComponentsProps & HTMLAttributes<HTMLElement>;
+
+declare const NsAutocomplete: ({ id, options, OptionsUI, loading, noOptionsText, onInputChange, onChange, onFocus, clear, seeMore, placeholder, className, iconStart, iconEnd, inputValue, value, isFilterEnabled, fullWidth, onKeypress, }: PropsWithChildren<NsAutocompleteProps>) => ReactElement;
+
+type NsImageProps = {
+    alt: string;
+    className?: string;
+    fill?: boolean;
+    height?: number | string;
+    id?: string;
+    src: string;
+    variant?: 'product' | 'award' | 'icon' | 'fill';
+    width?: number | string;
+};
+type BynderImageDataType = {
+    /** selected is manually added, using additionalInfo from bynder */
+    selected?: {
+        url: string;
+        fileSize: number | null;
+        width: number | null;
+        height: number | null;
+        imageType?: string;
+        type: 'VIDEO' | 'IMAGE';
+        altText?: string;
+        fit: 'cover' | 'contain' | 'scale-down' | 'none';
+        position: string;
+        bgColor: string;
+    };
+    isPublic: boolean;
+    __typename?: 'Image';
+    id: string;
+    name: string;
+    description: string | null;
+    databaseId: string;
+    originalUrl?: string;
+    type: 'VIDEO' | 'IMAGE' | 'DOCUMENT';
+    url?: string;
+    previewUrls?: string[];
+    extensions?: string[];
+    textMetaproperties?: ({
+        name: string;
+        value: string;
+    } | null)[];
+    files: {
+        [key: string]: {
+            url: string;
+            width: number | null;
+            height: number | null;
+            fileSize: number | null;
+        };
+    };
+};
+
+type AlignmentType$1 = 'start' | 'center' | 'end';
+
+
+type NsBannerProps = {
+    children: react__default.ReactNode;
+    image: BynderImageDataType;
+    alignment?: AlignmentType$1;
+    justify?: AlignmentType$1;
+    className?: string;
+} & AdditionalProps;
+
+/**
+ * @author [Vijayaprathap Kumar] (vpkumar@nuskin.com)
+ * NsBanner.tsx
+ * @description NsBanner component with a image background
+ */
+
+declare const NsBanner: (props: PropsWithChildren<NsBannerProps>) => ReactElement;
+
+type NsBrandComponentProps = {
+    variant?: 'stacked' | 'horizontal' | 'poweredBy' | 'logomark' | 'wordmark';
+    size?: string;
+    color?: FoundationTheme.PaletteColors;
+};
+
+declare const NsBrandComponent: (props: PropsWithChildren<NsBrandComponentProps>) => ReactElement;
+
+type NsBreadcrumbProps = {
+    items?: ItemProps[];
+    underline?: boolean;
+    separator?: 'chevronRight' | 'slash';
+};
+
+type ItemProps = {
+    label?: string;
+    href?: string;
+    icon?: NsIconNameType;
+} & AdditionalProps;
+
+/**
+ * @author [Vijayaprathap Kumar] (vpkumar@nuskin.com)
+ * NsBreadcrumb.tsx
+ * @description NsBreadcrumb component with a navigation items array props
+ */
+
+declare const NsBreadcrumb: (props: PropsWithChildren<NsBreadcrumbProps>) => ReactElement;
+
+type NsButtonProps = Pick<
+    ButtonProps,
+    | 'aria-label'
+    | 'className'
+    | 'color'
+    | 'disabled'
+    | 'endIcon'
+    | 'fullWidth'
+    | 'href'
+    | 'onBlur'
+    | 'onClick'
+    | 'onChange'
+    | 'onFocus'
+    | 'size'
+    | 'startIcon'
+    | 'type'
+    | 'variant'
+> & {
+    iconOnly?: boolean;
+    darkModeEnabled?: boolean;
+    startIconName?: NsIconProps['name'];
+    endIconName?: NsIconProps['name'];
+};
+
+declare const NsButton: ({ children, darkModeEnabled, ...props }: PropsWithChildren<NsButtonProps>) => ReactElement;
+
+declare function NsBrandWrapper({ children }: PropsWithChildren): ReactElement;
+
+type NsBgCardProps = {
+    backgroundImageUrl: string;
+};
+declare const NsBgCard: _emotion_styled.StyledComponent<_mui_material_Card.CardOwnProps & _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;
+}, "variant" | "style" | "children" | "className" | "classes" | "sx" | "elevation" | "square" | "raised"> & {
+    theme?: _emotion_react.Theme;
+} & NsBgCardProps, {}, {}>;
+
+declare const NsBrandLogo: _emotion_styled.StyledComponent<_mui_material_CardMedia.CardMediaOwnProps & _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;
+}, "style" | "image" | "children" | "className" | "classes" | "sx" | "src"> & {
+    theme?: _emotion_react.Theme;
+} & {
+    component: "img";
+}, {}, {}>;
+
+type NsFfgCardProps = AdditionalProps & {
+    topImageUrl: string;
+    topImageAlt: string;
+    text: string;
+    cardLink: { href: string; title: string };
+    onClick(): void;
+    cslp?: {
+        card_text: CslpTag;
+        action_text: CslpTag;
+    };
+};
+
+type NsCardButton = {
+    showButton?: boolean;
+    fullWidth?: boolean;
+    url?: string;
+    endIcon?: NsIconNameType;
+    buttonText: string;
+    buttonVariant?: 'text' | 'outlined' | 'contained';
+    buttonColor?: 'secondary' | 'primary';
+    showArrowWithText?: boolean;
+};
+
+type NsHeroCardLevel1Props = {
+    cardTitle: string;
+    cardDescription: string;
+    backgroundImageDetail: BynderImageDataType;
+    button?: NsCardButton;
+    className?: string;
+    imagePosition?: 'top' | 'bottom';
+    fontColor?: 'primary' | 'secondary';
+};
+declare function NsHeroCardLevel1({ cardTitle, cardDescription, backgroundImageDetail, button, className, imagePosition, fontColor, }: NsHeroCardLevel1Props): ReactElement;
+
+type NsHeroCardLevel2Props = {
+    brandName: string;
+    cardTitle: string;
+    cardDescription: string;
+    backgroundImageDetail: BynderImageDataType;
+    button?: NsCardButton;
+    className?: string;
+    fontColor?: 'primary' | 'secondary';
+};
+declare const NsHeroCardLevel2: ({ brandName, cardTitle, cardDescription, backgroundImageDetail, button, className, fontColor, }: NsHeroCardLevel2Props) => ReactElement;
+
+type NsPostProps = {
+    text: string;
+    body: string;
+    backgroundImageDetail: BynderImageDataType;
+    className?: string;
+    fontColor?: 'primary' | 'secondary';
+};
+declare const NsPost: ({ text, body, backgroundImageDetail, className, fontColor }: NsPostProps) => ReactElement;
+
+type NsBrandCardProps = {
+    title?: string;
+    brandImageUrl: string;
+    backgroundImageUrl: string;
+    size?: 'small' | 'large';
+    button?: NsCardButton;
+    className?: string;
+    fontColor?: 'primary' | 'secondary';
+};
+declare function NsBrandCard({ title, brandImageUrl, backgroundImageUrl, button, size, className, fontColor, }: NsBrandCardProps): ReactElement;
+
+type NsIconTextProps = {
+    text: string;
+    body: string;
+    className?: string;
+    fontColor?: 'primary' | 'secondary';
+};
+declare const NsIconText: ({ text, body, className, fontColor }: NsIconTextProps) => react.JSX.Element;
+
+type NsCheckoutCardProps = {
+    icon: NsIconNameType;
+    title: string;
+    linkText: string;
+    url: string;
+    className?: string;
+    fontColor?: 'primary' | 'secondary';
+};
+declare function NsCheckoutCard({ title, icon, linkText, url, className, fontColor, }: NsCheckoutCardProps): ReactElement;
+
+type NsSmallFullCardProps = {
+    title: string;
+    subtitle: string;
+    backgroundImageDetail: BynderImageDataType;
+    button?: NsCardButton;
+    className?: string;
+    fontColor?: 'primary' | 'secondary';
+};
+declare function NsSmallFullCard({ title, subtitle, backgroundImageDetail, button, className, fontColor, }: NsSmallFullCardProps): ReactElement;
+
+type NsXLargeCardProps = {
+    title: string;
+    subtitle: string;
+    backgroundImageDetail: BynderImageDataType;
+    button?: NsCardButton;
+    className?: string;
+    fontColor?: 'primary' | 'secondary';
+};
+declare function NsXLargeCard({ title, subtitle, backgroundImageDetail, button, className, fontColor, }: NsXLargeCardProps): ReactElement;
+
+type NsLargeCardProps = {
+    title: string;
+    subtitle?: string;
+    intro: string;
+    backgroundImageDetail: BynderImageDataType;
+    isHorizontal?: boolean;
+    button?: NsCardButton;
+    className?: string;
+    fontColor?: 'primary' | 'secondary';
+};
+declare function NsLargeCard({ title, subtitle, backgroundImageDetail, intro, isHorizontal, button, className, fontColor, }: NsLargeCardProps): ReactElement;
+
+type NsMediumCardProps = {
+    title: string;
+    titleFontWeight?: 'bold' | 'normal' | 'light';
+    subtitle: string;
+    backgroundImageDetail: BynderImageDataType;
+    button?: NsCardButton;
+    className?: string;
+    fluid?: boolean;
+    showArrowWithButtonText?: boolean;
+    fontColor?: 'primary' | 'secondary';
+};
+declare function NsMediumCard({ title, titleFontWeight, subtitle, backgroundImageDetail, button, className, fluid, showArrowWithButtonText, fontColor, }: NsMediumCardProps): ReactElement;
+
+type NsAwardCardProps = {
+    title: string;
+    awardName: string;
+    mediaOutlet: string;
+    backgroundImageDetail: BynderImageDataType;
+    className?: string;
+    fontColor?: 'primary' | 'secondary';
+};
+declare function NsAwardCard({ title, awardName, mediaOutlet, backgroundImageDetail, className, fontColor, }: NsAwardCardProps): ReactElement;
+
+interface CarousalProps<T = any> {
+    entries: T[];
+    renderEntry(entry: T, index: number): ReactNode;
+    allEntryLink?: string;
+    allEntryLabel?: string;
+    settings: any;
+    showControlButtons?: boolean;
+}
+declare function NsCarousal({ entries, renderEntry, allEntryLink, settings, allEntryLabel, showControlButtons, }: CarousalProps): ReactElement;
+
+declare const NsScrollingCarousal: ({ slides, scrollSeconds, stillSeconds, renderSlide, settings, dotsBottomPixel, additionalProps, }: NsScrollingCarousalProps) => ReactElement;
+
+declare const settings: {
+    dots: boolean;
+    infinite: boolean;
+    speed: number;
+    slidesToShow: number;
+    slidesToScroll: number;
+    swipeToSlide: boolean;
+    responsive: ({
+        breakpoint: number;
+        settings: {
+            slidesToShow: number;
+            slidesToScroll: number;
+            infinite: boolean;
+            dots: boolean;
+            initialSlide?: undefined;
+        };
+    } | {
+        breakpoint: number;
+        settings: {
+            slidesToShow: number;
+            slidesToScroll: number;
+            initialSlide: number;
+            infinite?: undefined;
+            dots?: undefined;
+        };
+    } | {
+        breakpoint: number;
+        settings: {
+            slidesToShow: number;
+            slidesToScroll: number;
+            infinite?: undefined;
+            dots?: undefined;
+            initialSlide?: undefined;
+        };
+    })[];
+};
+
+type NsCarousalProps<T = any> = {
+    entries: T[];
+    // eslint-disable-next-line no-unused-vars
+    renderEntry(entry: T, index: number): ReactNode;
+    allEntryLink: string;
+    settings: any;
+};
+
+type NsScrollingCarousalProps<T = any> = {
+    slides: T;
+    // eslint-disable-next-line no-unused-vars
+    renderSlide(slide: T, index: number): ReactNode;
+    /* time it takes while scrolling */
+    scrollSeconds: number;
+    /* time for which slide stays still before scrolling */
+    stillSeconds: number;
+    settings: any;
+    /* value in number, specifying how much the dots should be from bottom of slides container */
+    dotsBottomPixel?: number;
+} & AdditionalProps;
+
+type NsCartIconProps = {
+    itemCount?: number;
+    size?: 'small' | 'medium' | 'large' | 'xLarge';
+    color?: FoundationTheme.PaletteColors;
+    maxItemCount?: number;
+};
+
+declare const NsCartIcon: ({ itemCount, size, color, maxItemCount, }: NsCartIconProps) => ReactElement;
+
+/**
+ * @description Extend the FlagProps interface to include message, color and size prop.
+ */
+
+
+
+type NsFlagSize = 'small' | 'medium' | 'large';
+
+type NsFlagProps = {
+    className?: string;
+    size?: NsFlagSize;
+    message?: string;
+    testId?: string;
+    /** Displays background color for flag container */
+    color?: FoundationTheme.PaletteColors;
+};
+
+/**
+ * @author [Vijayaprathap Kumar] (vpkumar@nuskin.com)
+ * flag.tsx
+ * @description NsFlag component with a themed background
+ */
+
+declare const NsFlag: (props: PropsWithChildren<NsFlagProps>) => ReactElement | null;
+
+// Define the props for the custom checkbox component
+type NsCheckboxProps = Pick<CheckboxProps, 'label' | 'onChange'> & {
+    name: string;
+    className?: string;
+    checked: boolean;
+    /* Aria label for the checkbox area. */
+    ariaLabel?: string;
+    /* True if you want disable the checkbox and label . */
+    disabled?: boolean;
+    /* Size of the checkbox component. Either small / medium. */
+    size?: 'small' | 'medium';
+    /* Flag component props */
+    flag?: NsFlagProps;
+    /*  Test Id for testing purpose */
+    testid?: string;
+};
+
+/**
+ * @author [Vijayaprathap Kumar] (vpkumar@nuskin.com)
+ * checkbox.tsx
+ * @description
+ */
+
+declare const NsCheckbox: (props: PropsWithChildren<NsCheckboxProps>) => ReactElement;
+
+/*
+    options to be shown on content stack
+		1 Column (100%)
+		2 Columns (50%, 50%)
+		2 Columns (33%, 67%)
+		2 Columns (67%, 33%)
+		3 Columns (33%, 33%, 33%)
+		3 Columns (50%, 25%, 25%)
+		3 Columns (25%, 25%, 50%)
+		4 Columns (25%, 25%, 25%, 25%)
+*/
+type NsColumnControlProps = PropsWithChildren<{
+    /**
+     * follows the convention of ns-col-lg-(column-ratio) (for large screens >= 960px),
+     *  ns-col-md-(column-ratio) (for tablet screens >= 600px),
+     *  and ns-col-sm-(column-ratio) (for mobile screens i.e < 600px)
+     * sample values
+     * 'ns-col-lg-2-1', 'ns-col-lg-1-2', 'ns-col-lg-1-1',
+     */
+    columnClass: string;
+    gap?: number;
+}> &
+    AdditionalProps;
+
+type NsFlexColumnsProps = PropsWithChildren<{
+    /**
+     * follows the convention of ns-col-lg-{column-ratio}
+     * sample value for column-ratio = 2-1 ==>ns-col-lg-2-1
+     */
+    columnClass: string;
+    gap: number;
+    /* when this boolean is true, column control takes full width of page instead of being restricted to 1200px */
+    isFullWidth?: boolean;
+}> &
+    AdditionalProps;
+
+type NsGridColumnsProps = NsFlexColumnsProps;
+
+declare const NsColumnControl: ({ columnClass, children, gap, additionalProps }: NsColumnControlProps) => ReactElement;
+
+declare const NsFlexColumns: ({ columnClass, children, gap, additionalProps, isFullWidth, }: NsFlexColumnsProps) => ReactElement;
+
+declare const NsGridColumns: ({ columnClass, children, gap, isFullWidth, additionalProps, }: NsGridColumnsProps) => ReactElement;
+
+interface DropdownProps extends AdditionalProps {
+    selectedLabel: ReactNode;
+    onSelect: (arg: ReactNode) => void; // eslint-disable-line
+    children: ReactNode[];
+    disabled?: boolean;
+    type?: 'outlined' | 'unfilled';
+    placeholder?: string;
+    dropdownBorderColor?: FoundationTheme.PaletteColors;
+    closeOnMouseLeave?: boolean;
+    showListDivider?: boolean;
+    className?: string;
+    placeholder?: string;
+}
+
+interface DropdownOptionProps {
+    value: string;
+    children: ReactNode;
+}
+
+declare const NsDropdown: react__default.FC<DropdownProps>;
+
+declare const NsDropdownOption: react__default.FC<DropdownOptionProps>;
+
+type NsEmailSimpleProps = Pick<TextFieldProps> &
+    AdditionalProps & {
+        disabled?: boolean;
+        label?: string;
+        required?: boolean;
+        maxLength?: number;
+        invalidEmailText?: string;
+        dupedEmailText?: string;
+        requiredErrorMessage?: string;
+        checkEmail?: Function;
+    };
+
+declare const NsEmailSimple: (props: NsEmailSimpleProps) => ReactElement;
+
+declare const useWindowSize: () => {
+    width: number;
+    height: number;
+};
+
+type ItemMap = Record<string, boolean>;
+type UseAccordionProp = {
+    allowMultipleExpanded?: boolean;
+    defaultOpenIds?: string[];
+};
+declare const useAccordionMap: ({ allowMultipleExpanded, defaultOpenIds }: UseAccordionProp) => {
+    itemStateMap: ItemMap;
+    toggleOpen: (index: string | number) => void;
+};
+
+declare const NsImage: ({ src, width, height, alt, variant, ...rest }: NsImageProps) => ReactElement;
+
+// TODO: check if fieldStateType could be converted to enum, since we also have to account for undefined
+type fieldStateType = undefined | 'error' | 'success';
+type NsInputFieldProps = Omit<
+    TextFieldProps,
+    | 'sx'
+    | 'hiddenLabel'
+    | 'style'
+    | 'classes'
+    | 'className'
+    | 'color'
+    | 'error'
+    | 'margin'
+    | 'size'
+    | 'variant'
+    | 'select'
+    | 'SelectProps'
+> & {
+    /**
+     * has default undefined value, and we can update the value to success
+     * on successful validation and update value to 'error' in case of error
+     */
+
+    fieldState?: fieldStateType;
+    iconStart?: ReactNode;
+    /**
+     * assign react component for end icon
+     */
+    iconEnd?: ReactNode;
+    /**
+     * assign react component for side icon
+     */
+
+    iconSide?: ReactNode;
+    /** purpose of showOptional props is to show additional text 'optional' in the label,
+     *  if required = false and this flag is true */
+    showOptional?: boolean;
+    defaultValue?: string;
+    rows?: number;
+    id?: string;
+    labelSize?: number;
+} & AdditionalProps;
+
+/**
+ * we are using fieldState in place of error prop
+ * @param props { placeholder, fieldState, iconStart, iconEnd, iconSide }
+ * @returns Input Field
+ */
+declare const NsInputField: (props: NsInputFieldProps) => ReactElement;
+
+type NsLabelProps = PropsWithChildren &
+    Omit<InputLabelProps, 'sx' | 'classes' | 'color' | 'margin' | 'variant' | 'classes'> & {
+        /** purpose of showOptional props is to show additional text 'optional' in the label,
+         *  if required = false and this flag is true */
+        showOptional?: boolean;
+        size?: number;
+    };
+
+declare const NsLabel: (props: NsLabelProps) => ReactElement;
+
+/**
+ * @author [Vijayaprathap Kumar] (vpkumar@nuskin.com)
+ * @name types.tsx
+ * @description Exports types for components - NsLink
+ */
+
+
+type NsLinkProps = AdditionalProps & {
+    className?: string;
+    href: string;
+    // Used to enable the underline when hover the element
+    underlineOnHover?: boolean;
+    disabled?: boolean;
+    target?: string;
+    isSsr?: boolean;
+    passHref?: boolean;
+    prefetch?: boolean;
+};
+
+/**
+ * @name NsLink.tsx
+ * @description Exports one components - NsLink
+ */
+
+declare const NsLink: (props: PropsWithChildren<NsLinkProps>) => ReactElement;
+
+interface NsModalProps extends NsModalComponentProps {
+    open: boolean;
+    fullScreen?: boolean;
+}
+interface NsModalComponentProps {
+    handleClose?: () => void;
+    additionalProps?: NsModalAdditionalProps;
+    variant?: NsModalVariant | 'default';
+    header?: NsModalContentProps;
+    body?: NsModalContentProps;
+    footer?: NsModalContentProps;
+    statusInfo?: NsModalStatusProps;
+}
+interface NsModalContentProps {
+    show?: boolean;
+    children?: string | ReactNode;
+    isCloseIcon?: boolean;
+    iconName?: NsIconNameType;
+}
+interface NsModalStatusProps {
+    title: string;
+    description: string;
+}
+interface NsModalAdditionalProps {
+    className?: string;
+    scrollType?: 'paper' | 'body';
+    ariaLabel?: NsModalAriaLabelProps;
+    dividers?: boolean;
+}
+interface NsModalAriaLabelProps {
+    ariaLabelledby?: string;
+    ariaDescribedby?: string;
+}
+type NsModalVariant = 'success' | 'warning' | 'error' | 'info';
+
+declare const NsModal: (props: NsModalProps) => ReactElement;
+
+interface NsNavProductCardProps extends AdditionalProps {
+    productImg: BynderImageDataType;
+    productName: string;
+    className?: string;
+    productDescription: string;
+}
+
+declare const NsNavProductCard: ({ productImg, productDescription, productName, className, }: NsNavProductCardProps) => ReactElement;
+
+type NavTabs = {
+    tabName: string;
+    tabLink?: string;
+    tabContent?: ReactNode;
+    activeColor: FoundationTheme.PaletteColors;
+    color?: FoundationTheme.PaletteColors;
+    textVariant: Variants;
+    liveTag?: CslpTag;
+};
+
+type NsNavTabComponentProps = {
+    tabs: NavTabs[];
+    className?: string;
+    tabTitleClassName?: string;
+    showDrawer?: boolean;
+} & AdditionalProps;
+
+declare const NsNavTabComponent: ({ tabs, className, tabTitleClassName, showDrawer, }: NsNavTabComponentProps) => ReactElement;
+
+declare module '@mui/material/LinearProgress' {
+    // eslint-disable-next-line no-unused-vars
+    interface LinearProgressPropsColorOverrides {
+        neutral: true;
+        accentColorA: true;
+        accentColorB: true;
+        accentColorC: true;
+        accentColorD: true;
+    }
+}
+
+type NsProgressProps = {
+    barColor?: FoundationTheme.PaletteColors;
+    backgroundColor?: FoundationTheme.PaletteColors;
+    height?: string;
+    value: number;
+    body?: ReactNode;
+};
+
+declare const NsProgress: (props: NsProgressProps) => ReactElement;
+
+type NsRadioGroupProps = Pick<RadioGroupProps, 'name' | 'onChange' | 'value' | 'defaultValue' | 'row'> & {
+    disable: boolean;
+    helperText: string;
+    label: string;
+    items: RadioItems[];
+    color: FoundationTheme.PaletteColors;
+    size: number;
+    labelFontSize: number;
+} & AdditionalProps;
+
+type RadioItems = {
+    label: string;
+    value: string | number;
+    id: string | number;
+};
+
+declare const NsRadioGroup: (props: NsRadioGroupProps) => ReactElement;
+
+interface SelectProps {
+    selected: LabelValueType;
+    onSelect(arg: LabelValueType): void; // eslint-disable-line
+    children?: ReactNode | null;
+    disabled?: boolean;
+    type?: 'outlined' | 'unfilled';
+    placeholder?: string;
+    selectBorderColor?: FoundationTheme.PaletteColors;
+    closeOnMouseLeave?: boolean;
+    showListDivider?: boolean;
+    label?: string;
+    readOnly?: boolean;
+    name?: string;
+    errorMessage?: string;
+    menuProps?: string | object;
+    reverseArrowControls?: boolean;
+    validateOnBlur?: boolean;
+    autoComplete?: string;
+    // eslint-disable-next-line no-undef
+    rules?: Array;
+    hasArrows?: boolean;
+    options: LabelValueType[];
+    RenderOption?(x: any): any; // eslint-disable-line
+}
+
+interface SelectOptionProps {
+    value: string;
+    label: string;
+    selected?: LabelValueType;
+    index: number;
+    onClick: () => void;
+    showListDivider?: boolean;
+}
+
+type LabelValueType = {
+    label: string;
+    value: string;
+    id?: string;
+    index?: number;
+};
+
+declare const NsSelect: react__default.FC<SelectProps>;
+
+declare const NsSelectOption: react__default.FC<SelectOptionProps>;
+
+type NsSpinnerProps = {
+    size?: number;
+} & Omit<AdditionalProps, 'darkModeEnabled'>;
+
+declare const NsSpinner: react__default.FC<NsSpinnerProps>;
+
+/* eslint-disable no-unused-vars */
+
+
+interface Header {
+    label: string;
+    id: string | number;
+    numeric: boolean;
+    sortable?: boolean;
+}
+
+interface Item {
+    [key: string]: string | number;
+}
+  
+interface NsTableProps {
+    headers: Header[];
+    items: Item[];
+    rows: number;
+    itemKey: string;
+    rowsPerPageOptions: number[];
+    isExpandableAll?: boolean;
+    showActions?: boolean;
+    showExpandedContent?: boolean;
+    loading?: boolean;
+    expandableContent: (selectedItem: Item, index: number) => React.ReactNode;
+    actionClick: (item: Item) => React.ReactNode;
+}
+
+declare function NsTable({ headers, items, rows, rowsPerPageOptions, itemKey, expandableContent, actionClick, showActions, showExpandedContent, loading, isExpandableAll, }: NsTableProps): ReactElement;
+
+type AlignmentType = 'start' | 'center' | 'end';
+
+type TextCtaDataType = {
+    link: {
+        href?: string;
+        title?: string;
+    };
+    description?: string;
+};
+type NsTextStripProps = {
+    alignment?: AlignmentType;
+    className?: string;
+} & AdditionalProps &
+    TextCtaDataType;
+
+/**
+ * NsTextStrip.tsx
+ * @description NsTextStrip component for scrolling text CTA
+ */
+
+declare const NsTextStrip: (props: NsTextStripProps) => ReactElement;
+
+declare const NsToastProvider: (props: PropsWithChildren<SnackbarProviderProps>) => ReactElement;
+
+type ToastActionLink = {
+    label: string;
+    onClick?: () => void;
+};
+type ToastOptions = {
+    className?: string;
+    autoHideDuration?: number | null;
+    persist?: boolean;
+    showCloseIcon?: boolean;
+    actions?: ToastActionLink[];
+};
+declare const useToast: () => {
+    showToast: (variant?: VariantType, message?: string, options?: ToastOptions) => notistack.SnackbarKey | undefined;
+    closeToast: (toastId?: string) => void;
+};
+
+type ShowType = PropsWithChildren & {
+    when?: boolean;
+    elseContent?: ReactElement;
+};
+declare const Show: ({ when, children, elseContent }: ShowType) => ReactElement;
+
+type NsVideoProps = {
+    src: string;
+    title?: string;
+    width?: string;
+    height?: string;
+    allowFullScreen?: boolean;
+} & AdditionalProps;
+
+/**
+ * @author [Vijayaprathap Kumar] (vpkumar@nuskin.com)
+ * NsVideo.tsx
+ * @description NsVideo component with a Iframe video url props
+ */
+
+declare const NsVideo: (props: PropsWithChildren<NsVideoProps>) => ReactElement;
+
+export { type AccordionContentType, AccordionContentTypeObject, type AccordionItem, AccordionVariant, type AccordionVariantType, type AdditionalProps, type BynderImageDataType, type ComponentBoxProps, type CslpTag, type DarkModeEnabledOption, type DropdownOptionProps, type DropdownProps, GlobalFontInter, type ListUiProps, type NavTabs, NsAccordion, NsAccordionHeader, type NsAccordionHeaderProps, NsAccordionItem, type NsAccordionItemProps, type NsAccordionProps, NsAlert, type NsAlertProps, NsAuthDropdown, type NsAuthDropdownProps, NsAutocomplete, type NsAutocompleteProps, NsAwardCard, NsBanner, type NsBannerProps, NsBgCard, NsBrandCard, NsBrandComponent, type NsBrandComponentProps, NsBrandLogo, NsBrandWrapper, NsBreadcrumb, type NsBreadcrumbProps, NsButton, type NsButtonProps, type NsCardButton, NsCarousal, type NsCarousalProps, NsCartIcon, type NsCartIconProps, NsCheckbox, type NsCheckboxProps, NsCheckoutCard, NsCollapse, type NsCollapseProps, NsColumnControl, type NsColumnControlProps, settings as NsDefaultCarousalSettings, NsDropdown, NsDropdownOption, NsEmailSimple, type NsEmailSimpleProps, type NsFfgCardProps, NsFlag, type NsFlagProps, type NsFlagSize, NsFlexColumns, NsGridColumns, NsHeroCardLevel1, NsHeroCardLevel2, NsIcon, type NsIconNameType, type NsIconProps, type NsIconSizeType, NsIconText, IconVariants as NsIconVariants, NsImage, NsInputField, type NsInputFieldProps, NsLabel, type NsLabelProps, NsLargeCard, NsLink, type NsLinkProps, NsMediumCard, NsModal, type NsModalProps, NsNavProductCard, type NsNavProductCardProps, NsNavTabComponent as NsNavTab, type NsNavTabComponentProps, NsPost, NsProgress, type NsProgressProps, NsRadioGroup, type NsRadioGroupProps, NsScrollingCarousal, type NsScrollingCarousalProps, NsSelect, NsSelectOption, NsSmallFullCard, NsSpinner, type NsSpinnerProps, NsTable, type NsTableProps, NsTextStrip, type NsTextStripProps, NsToastProvider, NsToggleSection, type NsToggleSectionProps, NsTypography, type NsTypographyProps, NsVideo, type NsVideoProps, NsXLargeCard, type OptionsProps, type SelectOptionProps, type SelectProps, Show, type Themed, type ToastOptions, type Variants, useAccordionMap, useToast, useWindowSize };