@newtonschool/grauity 0.0.13 → 0.1.10

package/dist/index.d.ts

@@ -1,7 +1,5 @@
-import * as React from "react";
-type grauityIconSizeName = '4' | '8' | '12' | '16' | '20' | '24' | '28' | '32' | '36' | '40';
-type grauityIconColorName = 'white' | 'black' | 'grey' | 'blue' | 'red' | 'green' | 'orange' | 'yellow' | 'purple';
-type grauityIconName = 'exclamation-circle' | 'exclamation-triangle' | 'info-circle' | 'question-circle' | 'code-alt' | 'code' | 'terminal' | 'desktop' | 'gamepad' | 'lamp' | 'laptop' | 'mobile' | 'archive' | 'bookmark-fill' | 'bookmark' | 'file-alt' | 'file' | 'folder-open' | 'folder' | 'label-fill' | 'label' | 'note' | 'pen' | 'pin' | 'mic-off' | 'mic' | 'pause-circle-fill' | 'pause-circle' | 'pause' | 'play-circle-fill' | 'play-circle' | 'play' | 'video-off' | 'video' | 'volume-maximum' | 'volume-minimum' | 'volume-mute' | 'heart-fill' | 'heart' | 'lock-close' | 'lock-open' | 'message-circle' | 'message-double-question' | 'message-square-info' | 'message-square' | 'milestone' | 'quiz' | 'smiley' | 'spark-fill' | 'spark' | 'sparkle' | 'target' | 'check-badge' | 'crown' | 'flag' | 'gift' | 'medal' | 'star-fill' | 'star-half-fill' | 'star' | 'trophy' | 'arrow-double' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrow-up' | 'bin' | 'call-end' | 'call-start' | 'caret-double' | 'caret-down' | 'caret-left' | 'caret-right' | 'caret-up' | 'check-circle-fill' | 'check-circle' | 'check-square-fill' | 'check-square' | 'check' | 'chevron-double-down' | 'chevron-double-left' | 'chevron-double-right' | 'chevron-double-up' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'circle' | 'close-circle-fill' | 'close-circle' | 'close-square-fill' | 'close-square' | 'close' | 'download' | 'forward' | 'grip-hortizontal' | 'grip-vertical' | 'growth-down' | 'growth-up' | 'home' | 'kebab-horizontal' | 'kebab-vertical' | 'link' | 'list' | 'load' | 'maximize' | 'menu-grid' | 'menu' | 'minimize' | 'minus-circle-fill' | 'minus-circle' | 'minus-square-fill' | 'minus-square' | 'moon' | 'new-tab' | 'plus-circle-fill' | 'plus-circle' | 'plus-square-fill' | 'plus-square' | 'plus' | 'refresh' | 'reply' | 'screenshare-start' | 'screenshare-stop' | 'search' | 'settings' | 'signin' | 'signout' | 'square' | 'sun' | 'upload' | 'bell' | 'calender-check' | 'calender-plus' | 'calender' | 'clock' | 'rewatch' | 'stopwatch' | 'bot' | 'person-check' | 'person-plus' | 'person' | 'users';
+import React, { ReactNode } from "react";
+import PropTypes from "prop-types";
 export const ICON_TAGS: {
     "exclamation-circle": string[];
     "exclamation-triangle": string[];
@@ -159,8 +157,10 @@ export const TAG_ICONS: {
     Time: string[];
     User: string[];
 };
+type grauityIconName = 'exclamation-circle' | 'exclamation-triangle' | 'info-circle' | 'question-circle' | 'code-alt' | 'code' | 'terminal' | 'desktop' | 'gamepad' | 'lamp' | 'laptop' | 'mobile' | 'archive' | 'bookmark-fill' | 'bookmark' | 'file-alt' | 'file' | 'folder-open' | 'folder' | 'label-fill' | 'label' | 'note' | 'pen' | 'pin' | 'mic-off' | 'mic' | 'pause-circle-fill' | 'pause-circle' | 'pause' | 'play-circle-fill' | 'play-circle' | 'play' | 'video-off' | 'video' | 'volume-maximum' | 'volume-minimum' | 'volume-mute' | 'heart-fill' | 'heart' | 'lock-close' | 'lock-open' | 'message-circle' | 'message-double-question' | 'message-square-info' | 'message-square' | 'milestone' | 'quiz' | 'smiley' | 'spark-fill' | 'spark' | 'sparkle' | 'target' | 'check-badge' | 'crown' | 'flag' | 'gift' | 'medal' | 'star-fill' | 'star-half-fill' | 'star' | 'trophy' | 'arrow-double' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrow-up' | 'bin' | 'call-end' | 'call-start' | 'caret-double' | 'caret-down' | 'caret-left' | 'caret-right' | 'caret-up' | 'check-circle-fill' | 'check-circle' | 'check-square-fill' | 'check-square' | 'check' | 'chevron-double-down' | 'chevron-double-left' | 'chevron-double-right' | 'chevron-double-up' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'circle' | 'close-circle-fill' | 'close-circle' | 'close-square-fill' | 'close-square' | 'close' | 'download' | 'forward' | 'grip-hortizontal' | 'grip-vertical' | 'growth-down' | 'growth-up' | 'home' | 'kebab-horizontal' | 'kebab-vertical' | 'link' | 'list' | 'load' | 'maximize' | 'menu-grid' | 'menu' | 'minimize' | 'minus-circle-fill' | 'minus-circle' | 'minus-square-fill' | 'minus-square' | 'moon' | 'new-tab' | 'plus-circle-fill' | 'plus-circle' | 'plus-square-fill' | 'plus-square' | 'plus' | 'refresh' | 'reply' | 'screenshare-start' | 'screenshare-stop' | 'search' | 'settings' | 'signin' | 'signout' | 'square' | 'sun' | 'upload' | 'bell' | 'calender-check' | 'calender-plus' | 'calender' | 'clock' | 'rewatch' | 'stopwatch' | 'bot' | 'person-check' | 'person-plus' | 'person' | 'users';
 type grauityFlippedChoiceName = 'vertically' | 'horizontally';
 type grauityRotatedChoiceName = 'clockwise' | 'counterclockwise';
+type grauityIconSizeName = '4' | '8' | '12' | '14' | '16' | '20' | '24' | '28' | '32' | '36' | '40';
 export interface GrauityInitProps {
     /**
      * An element type to render as (string or function).
@@ -169,35 +169,67 @@ export interface GrauityInitProps {
     /**
      * The font size to be applied on this element and so will act as standard for the `ems` of all grauity components.
      * */
-    fontSize: string;
+    fontSize?: string;
     /**
      * The multiplier is multiplied will all the `ems` of the grauity components.
      * */
     multiplier?: number;
+    /**
+     * Additional classes to be added to the component
+     * */
+    className?: string;
     /**
      * The children to be rendered inside this component.
      * */
     children?: React.ReactNode;
+    /**
+     * Additional styles to be added to the component
+     * */
+    style?: object;
 }
 /**
  * This component is used to initialize the Grauity library. Ideally, it should be the root component of your application.
  * But nonetheless all the grauity components should be the children of this component.
  * */
-export function GrauityInit({ as, fontSize, multiplier, children }: GrauityInitProps): JSX.Element;
+export function GrauityInit({ as, fontSize, multiplier, className, style, children, }: GrauityInitProps): JSX.Element;
 declare namespace GrauityInit {
     var propTypes: {
         as: PropTypes.Requireable<PropTypes.ReactComponentLike>;
         fontSize: PropTypes.Requireable<string>;
         multiplier: PropTypes.Requireable<number>;
+        className: PropTypes.Requireable<string>;
+        style: PropTypes.Requireable<object>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
     };
     var defaultProps: {
         as: string;
         fontSize: string;
         multiplier: number;
+        className: string;
+        style: {};
         children: any;
     };
 }
+type ThemeType = 'light' | 'dark';
+export const ThemeContext: React.Context<any>;
+interface ThemeWrapperProps {
+    children: React.ReactNode;
+    defaultTheme?: ThemeType;
+    usePreferredColorScheme?: boolean;
+}
+export const ThemeWrapper: {
+    ({ children, defaultTheme, usePreferredColorScheme, }: ThemeWrapperProps): JSX.Element;
+    propTypes: {
+        children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        defaultTheme: PropTypes.Requireable<ThemeType>;
+        usePreferredColorScheme: PropTypes.Requireable<boolean>;
+    };
+    defaultProps: {
+        defaultTheme: ThemeType;
+        usePreferredColorScheme: boolean;
+    };
+};
+export const ThemeConsumer: React.Consumer<any>;
 export interface IconProps {
     /**
      * Icon can have the aria hidden attribute
@@ -222,7 +254,7 @@ export interface IconProps {
     /**
      * Color of the icon
      * */
-    color?: grauityIconColorName;
+    color?: string;
     /**
      * Additional classes to be added to the component
      * */
@@ -268,6 +300,9 @@ export interface IconProps {
      * */
     style?: React.CSSProperties;
 }
+/**
+ * An icon is a glyph used to represent something else.
+ */
 export function Icon({ ariaHidden, ariaLabel, as, bordered, circular, color, className, disabled, fitted, flipped, inverted, link, loading, name, rotated, size, style, ...props }: IconProps): JSX.Element;
 declare namespace Icon {
     var propTypes: {
@@ -276,17 +311,17 @@ declare namespace Icon {
         as: PropTypes.Requireable<PropTypes.ReactComponentLike>;
         bordered: PropTypes.Requireable<boolean>;
         circular: PropTypes.Requireable<boolean>;
-        color: PropTypes.Requireable<import("core").GRAUITY_COLOR>;
+        color: PropTypes.Requireable<string>;
         className: PropTypes.Requireable<string>;
         disabled: PropTypes.Requireable<boolean>;
         fitted: PropTypes.Requireable<boolean>;
-        flipped: PropTypes.Requireable<import("core/miscellaneous-choices").GRAUITY_FLIPPED_CHOICES>;
+        flipped: PropTypes.Requireable<import("ui/core/miscellaneous-choices").GRAUITY_FLIPPED_CHOICES>;
         inverted: PropTypes.Requireable<boolean>;
         link: PropTypes.Requireable<boolean>;
         loading: PropTypes.Requireable<boolean>;
         name: PropTypes.Validator<string>;
-        rotated: PropTypes.Requireable<import("core/miscellaneous-choices").GRAUITY_ROTATED_CHOICES>;
-        size: PropTypes.Requireable<import("core").GRAUITY_SIZE>;
+        rotated: PropTypes.Requireable<import("ui/core/miscellaneous-choices").GRAUITY_ROTATED_CHOICES>;
+        size: PropTypes.Requireable<import("ui/core").GRAUITY_SIZE>;
         style: PropTypes.Requireable<object>;
     };
     var defaultProps: {
@@ -308,5 +343,789 @@ declare namespace Icon {
         style: any;
     };
 }
+export enum BUTTON_VARIANTS_ENUM {
+    PRIMARY = "primary",
+    SECONDARY = "secondary",
+    TERTIARY = "tertiary",
+    SUCCESS = "success",
+    DANGER = "danger",
+    WARNING = "warning",
+    PRIMARY_OUTLINED = "primary-outlined",
+    SECONDARY_OUTLINED = "secondary-outlined",
+    TERTIARY_OUTLINED = "tertiary-outlined",
+    SUCCESS_OUTLINED = "success-outlined",
+    DANGER_OUTLINED = "danger-outlined",
+    WARNING_OUTLINED = "warning-outlined"
+}
+export enum BUTTON_SIZES_ENUM {
+    SMALL = "small",
+    MEDIUM = "medium",
+    LARGE = "large",
+    EXTRA_LARGE = "extra-large"
+}
+export enum BUTTON_ICON_POSITIONS_ENUM {
+    LEFT = "left",
+    RIGHT = "right"
+}
+export const BUTTON_VARIANTS: BUTTON_VARIANTS_ENUM[];
+type ButtonVariants = 'primary' | 'secondary' | 'tertiary' | 'success' | 'danger' | 'warning' | 'primary-outlined' | 'secondary-outlined' | 'tertiary-outlined' | 'success-outlined' | 'danger-outlined' | 'warning-outlined';
+type ButtonSizes = 'small' | 'medium' | 'large' | 'extra-large';
+type ButtonIconPositions = 'left' | 'right';
+export interface ButtonProps {
+    /**
+     * Variant of the button
+     *
+     * Available choices: `primary`, `secondary`, `tertiary`, `success`, `danger`, `warning`, `primary-outlined`, `secondary-outlined`, `tertiary-outlined`, `success-outlined`, `danger-outlined`, `warning-outlined`
+     *
+     * Default: `primary`
+     * */
+    variant?: ButtonVariants;
+    /**
+     * Size of the button
+     * Available choices: `small`, `medium`, `large`
+     *
+     * Default: `medium`
+     * */
+    size?: ButtonSizes;
+    /**
+     * Icon to be displayed in the button.
+     * */
+    icon?: grauityIconName;
+    /**
+     * Size of the icon
+     * */
+    iconSize?: grauityIconSizeName;
+    /**
+     * Position of the icon
+     *
+     * Available choices: `left`, `right`
+     *
+     * Default: `left`
+     * */
+    iconPosition?: ButtonIconPositions;
+    /**
+     * Additional classes to be added to the component.
+     * */
+    className?: string;
+    /**
+     * Show that the button is inactive
+     *
+     * Default: `false`
+     * */
+    disabled?: boolean;
+    /**
+     * Show that the button is loading
+     *
+     * Default: `false`
+     * */
+    loading?: boolean;
+    /**
+     * Function to be called on click
+     *
+     * If the button is disabled, the function will not be called
+     * */
+    onClick?: (e?: any) => void;
+    /**
+     * Additional styles to be used over the element
+     *
+     * Default: `{}`
+     * */
+    style?: React.CSSProperties;
+    /**
+     * Make the button full width
+     *
+     * Default: `false`
+     * */
+    fullWidth?: boolean;
+    /**
+     * Children of the component
+     * */
+    children?: React.ReactNode;
+    /**
+     * Type of the button
+     *
+     * Default: `button`
+     * */
+    type?: 'button' | 'submit' | 'reset';
+    /**
+     * Aria label for the button
+     * */
+    ariaLabel?: string;
+    /**
+     * Tooltip to be displayed on hover, uses the `title` attribute
+     * */
+    tooltip?: string;
+    /**
+     * Tab index of the button
+     * */
+    tabIndex?: number;
+    /**
+     * Function to be called on mouse enter
+     * */
+    onMouseEnter?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Function to be called on mouse leave
+     * */
+    onMouseLeave?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Additional props to be passed to the button element
+     * */
+    buttonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
+}
+interface ButtonGroupProps {
+    children: React.ReactNode;
+}
+/**
+ * A Button is a component that is used to trigger an action.
+ * It can contain text and an icon, or only text.
+ *
+ * To create an icon button, checkout the IconButton component.
+ */
+export const NSButton: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export const NSButtonGroup: {
+    ({ children }: ButtonGroupProps): JSX.Element;
+    defaultProps: ButtonGroupProps;
+    propTypes: {
+        children: PropTypes.Requireable<any>;
+    };
+};
+type TypographyAsType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'label' | 'caption' | 'code' | 'auto';
+type TypographyVariantType = 'heading-semibold-h40' | 'heading-semibold-h36' | 'heading-semibold-h28' | 'heading-semibold-h24' | 'heading-semibold-h20' | 'heading-semibold-h16' | 'paragraph-semibold-body1' | 'paragraph-semibold-body2' | 'paragraph-semibold-body3' | 'paragraph-semibold-body4' | 'paragraph-semibold-label' | 'paragraph-semibold-label2' | 'paragraph-semibold-callout' | 'paragraph-medium-body1' | 'paragraph-medium-body2' | 'paragraph-medium-body3' | 'paragraph-medium-body4' | 'paragraph-medium-label' | 'paragraph-medium-label2' | 'paragraph-medium-callout' | 'paragraph-medium-code' | 'heading-semibold-overline1' | 'heading-semibold-overline2' | 'action-semibold-primary' | 'action-semibold-link' | 'blog-semibold-title' | 'blog-medium-regular' | 'blog-medium-bold' | 'blog-medium-italic';
+export interface TypographyProps {
+    /**
+     * Variant of the Typography element
+     *
+     * Available choices:
+     *
+     * Default: `paragraph-medium-body1`
+     * */
+    variant?: TypographyVariantType;
+    /**
+     * Color of the Typography element
+     * */
+    color?: string;
+    /**
+     * Determines the type of the element rendered
+     * Available choices:
+     *
+     * Default: `p`
+     * */
+    as?: TypographyAsType;
+    /**
+     * Text alignment of the Typography element
+     * */
+    textAlign?: string;
+    /**
+     * Text transformation of the Typography element
+     * */
+    textTransform?: string;
+    /**
+     * Font size of the Typography element
+     * */
+    fontSize?: string;
+    /**
+     * Children of the component
+     * */
+    children: React.ReactNode;
+}
+export const TYPOGRAPHY_VARIANTS_ENUM: {
+    [x: string]: TypographyVariantType;
+};
+export const TYPOGRAPHY_VARIANTS: readonly TypographyVariantType[];
+export const TYPOGRAPHY_AS_ENUM: {
+    [x: string]: TypographyAsType;
+};
+export const TYPOGRAPHY_AS_LIST: readonly TypographyAsType[];
+/**
+ * A typography component can be used to display text in different styles.
+ *
+ * Use the prop `variant` to select the style of the text.
+ *
+ * By default, prop `as` is set to `'auto'`, and the component will automatically
+ * select the HTML tag based on the prop `variant`.
+
+ * If you want the text to be rendered as a different HTML tag, provide your desired
+ * value to prop `as`, such as `'h1'`, `'h2'`, `'p'`, etc.
+ */
+export const NSTypography: {
+    ({ variant, as, color, textAlign, textTransform, fontSize, children, }: TypographyProps): JSX.Element;
+    propTypes: {
+        variant: PropTypes.Requireable<import("ui/elements/Typography/types").TypographyVariantType>;
+        as: PropTypes.Requireable<string>;
+        color: PropTypes.Requireable<string>;
+        textAlign: PropTypes.Requireable<string>;
+        textTransform: PropTypes.Requireable<string>;
+        fontSize: PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<any>;
+    };
+    defaultProps: {
+        variant: string;
+        as: string;
+        color: string;
+        textAlign: any;
+        textTransform: any;
+        fontSize: any;
+        children: string;
+    };
+};
+interface TableColumn {
+    /**
+     * Column key
+     * */
+    key: string;
+    /**
+     * Column display name
+     * */
+    display: string;
+    /**
+     * Column width
+     * */
+    width?: string;
+    /**
+     * Column alignment, default is center
+     * */
+    align?: 'left' | 'right' | 'center';
+    /**
+     * Row span, default is 1
+     * */
+    rowSpan?: number;
+    /**
+     * Col span, default is 1
+     * */
+    colSpan?: number;
+}
+interface TableCellInterface {
+    /**
+     * Cell display, can be a string or a React element
+     * */
+    display?: ReactNode;
+    /**
+     * Custom cell render function. If provided, display will be ignored
+     * */
+    render?: (args: TableCellInterface) => ReactNode;
+    /**
+     * Row vertical alignment, default is top
+     * */
+    vAlign?: 'top' | 'bottom' | 'middle';
+    /**
+     * Row span, default is 1
+     * */
+    rowSpan?: number;
+    /**
+     * Col span, default is 1
+     * */
+    colSpan?: number;
+    /**
+     * Row actions (rendered as buttons by default)
+     * */
+    actions?: TableCellAction[];
+    /**
+     * Row alignment
+     * */
+    align?: 'left' | 'right' | 'center';
+}
+interface TableCellAction {
+    /**
+     * Action key
+     * */
+    key: string;
+    /**
+     * Action display, can be a string or a React element
+     * */
+    display: any;
+    /**
+     * Action icon
+     * */
+    icon?: grauityIconName;
+    /**
+     * Action type, can be a button or a link, default is button
+     * */
+    as?: 'button' | 'link';
+    /**
+     * Action href, only used if the action type is link
+     * */
+    href?: string;
+    /**
+     * Action click handler
+     * */
+    handleClick?: (data: any) => void;
+}
+interface TableRow {
+    /**
+     * Table data, in JS Object format, with table column keys as keys of object
+     */
+    [columnKey: string]: TableCellInterface;
+}
+export interface TableProps {
+    /**
+     * Table columns, see type `TableColumn`
+     * */
+    columns?: TableColumn[];
+    /**
+     * Table rows, see type `TableRow`
+     * */
+    rows?: TableRow[];
+    /**
+     * Determines if the table is condensed (Reduced padding).
+     * Available choices: true, false
+     *
+     * Default: `true`
+     * */
+    condensed?: boolean;
+    /**
+     * Are alternate rows striped (shaded).
+     * Available choices: true, false
+     *
+     * Default: `false`
+     * */
+    striped?: boolean;
+    /**
+     * Determines if the table has a border around it.
+     * Available choices: true, false
+     *
+     * Default: `true`
+     * */
+    borderAround?: boolean;
+    /**
+     * Determines if the table has a border between rows.
+     * Available choices: true, false
+     *
+     * Has more precedence than `borderHorizontal` and `borderVertical`.
+     *
+     * Default: `true`
+     * */
+    borderWithin?: boolean;
+    /**
+     * Determines if the table has a border between columns.
+     *
+     * Default: `true`
+     * */
+    borderHorizontal?: boolean;
+    /**
+     * Determines if the table has a border between rows.
+     *
+     * Default: `true`
+     * */
+    borderVertical?: boolean;
+    /**
+     * Additional classes to be added to the component.
+     * */
+    className?: string;
+    /**
+     * Show that the table is loading
+     *
+     * Default: `false`
+     * */
+    loading?: boolean;
+    /**
+     * Additional styles to be used over the element
+     *
+     * Default: `{}`
+     * */
+    style?: React.CSSProperties;
+    /**
+     * Capitalize the header
+     *
+     * Default: `true`
+     * */
+    capitalizeHeaders?: boolean;
+    /**
+     * Determines if table headers should be highlighted
+     *
+     * Default: `true`
+     * */
+    highlightHeaders?: boolean;
+}
+/**
+ * A table is a component that is used to display data in a tabular format.
+ * It is composed of rows and columns.
+ */
+export const NSTable: {
+    ({ rows, columns, ...props }: TableProps): JSX.Element;
+    propTypes: {
+        rows: PropTypes.Requireable<any[]>;
+        columns: PropTypes.Requireable<any[]>;
+        condensed: PropTypes.Requireable<boolean>;
+        striped: PropTypes.Requireable<boolean>;
+        borderAround: PropTypes.Requireable<boolean>;
+        borderWithin: PropTypes.Requireable<boolean>;
+        borderHorizontal: PropTypes.Requireable<boolean>;
+        borderVertical: PropTypes.Requireable<boolean>;
+        className: PropTypes.Requireable<string>;
+        loading: PropTypes.Requireable<boolean>;
+        style: PropTypes.Requireable<object>;
+        capitalizeHeaders: PropTypes.Requireable<boolean>;
+        highlightHeaders: PropTypes.Requireable<boolean>;
+    };
+    defaultProps: {
+        rows: any[];
+        columns: any[];
+        condensed: boolean;
+        striped: boolean;
+        borderAround: boolean;
+        borderWithin: boolean;
+        borderHorizontal: boolean;
+        borderVertical: boolean;
+        className: string;
+        loading: boolean;
+        style: {};
+        capitalizeHeaders: boolean;
+        highlightHeaders: boolean;
+    };
+    NSTable: import("styled-components").StyledComponent<string, any, import("ui/elements/Table/types").TableComponentProps, never>;
+    TableBody: import("styled-components").StyledComponent<string, any, import("ui/elements/Table/types").TableBodyComponentProps, never>;
+    TableDataCell: import("styled-components").StyledComponent<string, any, import("ui/elements/Table/types").TableDataCellComponentProps, never>;
+    TableHead: import("styled-components").StyledComponent<string, any, import("ui/elements/Table/types").TableHeadComponentProps, never>;
+    TableHeadingCell: import("styled-components").StyledComponent<string, any, import("ui/elements/Table/types").TableHeadingCellComponentProps, never>;
+    TableRow: import("styled-components").StyledComponent<string, any, import("ui/elements/Table/types").TableRowComponentProps, never>;
+};
+type ModalContentType = React.ReactNode;
+interface ModalStep {
+    /**
+     * Banner for the modal, can be a valid React node
+     * */
+    banner?: ModalContentType;
+    /**
+     * Title for the modal, can be a valid React node
+     * */
+    title: ModalContentType;
+    /**
+     * Description for the modal, can be a string
+     * */
+    description?: string | null;
+    /**
+     * Body for the modal, can be a valid React node
+     * */
+    body?: ModalContentType;
+    /**
+     * Text for the next button
+     * */
+    nextButtonText?: string;
+    /**
+     * Determines if the back button should be shown
+     * Available choices: `true`, `false`
+     *
+     * Default: `false`
+     * */
+    showBackButton?: boolean;
+    /**
+     * Variant for the button
+     * */
+    buttonVariant?: ButtonVariants | null;
+}
+export interface ModalProps {
+    /**
+     * Banner for the modal, can be a valid React node
+     * */
+    banner?: ModalContentType;
+    /**
+     * Title for the modal, can be a valid React node
+     * */
+    title?: ModalContentType;
+    /**
+     * Description for the modal, can be a string
+     * */
+    description?: string;
+    /**
+     * Body for the modal, can be a valid React node
+     * */
+    body?: ModalContentType;
+    /**
+     * Action for the modal, can be a valid React node
+     * */
+    action?: ModalContentType;
+    /**
+     * Determines if the modal should hide on click away
+     * Available choices: `true`, `false`
+     *
+     * Default: `false`
+     * */
+    hideOnClickAway: boolean;
+    /**
+     * Determines if the modal should blur the background
+     * Available choices: `true`, `false`
+     *
+     * Default: `false`
+     * */
+    blurBackground?: boolean;
+    /**
+     * Callback function to be called when the modal is hidden
+     * */
+    onHide?: () => void;
+    /**
+     * Determines if the modal should be full width on mobile
+     * Available choices: `true`, `false`
+     *
+     * Default: `false`
+     * */
+    mobileBottomFullWidth?: boolean;
+    /**
+     * Padding for the modal
+     * */
+    modalPadding?: string;
+    /**
+     * Margin for the modal body
+     * */
+    modalBodyMargin?: string;
+    /**
+     * Width of the modal
+     * */
+    width?: string;
+    /**
+     * Height of the modal
+     * */
+    height?: string;
+    /**
+     * Minimum height of the modal
+     * */
+    minHeight?: string;
+    /**
+     * Determines if the close button should be shown
+     *
+     * Available choices: `true`, `false`
+     *
+     * Default: `false`
+     * */
+    showCloseButton?: boolean;
+}
+interface MultiStepModalProps {
+    /**
+     * Modal steps
+     * */
+    modalSteps: ModalStep[];
+    /**
+     * Determines if the modal should show pagination if there are multiple modal steps
+     * Available choices: true, false
+     *
+     * Default: `true`
+     * */
+    showModalStepsPagination?: boolean;
+    /**
+     * Determines if the modal should hide on click away
+     * Available choices: true, false
+     *
+     * Default: `false`
+     * */
+    hideOnClickAway?: boolean;
+    /**
+     * Determines if the modal should blur the background
+     * Available choices: true, false
+     *
+     * Default: `false`
+     * */
+    blurBackground?: boolean;
+    /**
+     * Callback function to be called when the modal is hidden
+     * */
+    onHide?: () => void;
+    /**
+     * Callback function to be called when the final step is reached
+     * */
+    onFinalStep?: () => void;
+    /**
+     * Determines if the modal should be full width on mobile
+     * Available choices: true, false
+     *
+     * Default: `false`
+     * */
+    mobileBottomFullWidth?: boolean;
+    /**
+     * Callback function to be called when the step changes
+     * */
+    onStepChange?: () => void;
+    /**
+     * Determines if the modal buttons should be shown
+     * Available choices: true, false
+     *
+     * Default: `true`
+     * */
+    showModalButtons?: boolean;
+    /**
+     * Determines if the modal header should be shown
+     * Available choices: true, false
+     *
+     * Default: `true`
+     * */
+    showHeader?: boolean;
+    /**
+     * Padding for the modal
+     * */
+    modalPadding?: string;
+    /**
+     * Margin for the modal body
+     * */
+    modalBodyMargin?: string;
+    /**
+     * Width of the modal
+     * */
+    width?: string;
+    /**
+     * Height of the modal
+     * */
+    height?: string;
+    /**
+     * Minimum height of the modal
+     * */
+    minHeight?: string;
+    /**
+     * Determines if the close button should be shown
+     *
+     * Available choices: true, false
+     *
+     * NOTE: If Modal has a banner, the close button will be hidden by default
+     *
+     * Default: `false`
+     * */
+    showCloseButton?: boolean;
+}
+export interface ConfirmationDialogProps {
+    /**
+     * Text for the cancel button
+     * */
+    cancelText?: string;
+    /**
+     * Text for the confirm button
+     * */
+    confirmText?: string;
+    /**
+     * Callback function to be called when the cancel button is clicked
+     * */
+    onCancel: () => void;
+    /**
+     * Callback function to be called when the confirm button is clicked
+     * */
+    onConfirm: () => void;
+    /**
+     * Banner for the modal, can be a valid React node
+     * */
+    banner?: ModalContentType;
+    /**
+     * Title for the modal, can be a valid React node
+     * */
+    title?: ModalContentType;
+    /**
+     * Description for the modal, can be a string
+     * */
+    description?: string;
+    /**
+     * Body for the modal, can be a valid React node
+     * */
+    body?: ModalContentType;
+    /**
+     * Variant for the cancel button
+     * */
+    cancelButtonVariant?: ButtonVariants;
+    /**
+     * Variant for the confirm button
+     * */
+    confirmButtonVariant?: ButtonVariants;
+    /**
+     * Determines if the close button should be shown
+     * Available choices: `true`, `false`
+     *
+     * Default: `false`
+     * */
+    showCloseButton?: boolean;
+    /**
+     * Determines if the modal should hide on click away
+     * Available choices: `true`, `false`
+     *
+     * Default: `false`
+     * */
+    hideOnClickAway?: boolean;
+    /**
+     * Determines if the modal should blur the background
+     * Available choices: `true`, `false`
+     *
+     * Default: `false`
+     * */
+    blurBackground?: boolean;
+    /**
+     * Determines if the modal should be at bottom with full width on mobile
+     * Available choices: `true`, `false`
+     *
+     * Default: `false`
+     * */
+    mobileBottomFullWidth?: boolean;
+}
+/**
+ * A confirmation dialog is a dialog box that asks the user to confirm an action.
+ */
+export const NSModal: {
+    ({ cancelText, confirmText, onCancel, onConfirm, banner, title, description, body, cancelButtonVariant, confirmButtonVariant, showCloseButton, hideOnClickAway, blurBackground, mobileBottomFullWidth, }: ConfirmationDialogProps): JSX.Element;
+    propTypes: {
+        cancelText: PropTypes.Requireable<string>;
+        confirmText: PropTypes.Requireable<string>;
+        onCancel: PropTypes.Requireable<(...args: any[]) => any>;
+        onConfirm: PropTypes.Requireable<(...args: any[]) => any>;
+        banner: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        description: PropTypes.Requireable<string>;
+        body: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        cancelButtonVariant: PropTypes.Requireable<string>;
+        confirmButtonVariant: PropTypes.Requireable<string>;
+        showCloseButton: PropTypes.Requireable<boolean>;
+        hideOnClickAway: PropTypes.Requireable<boolean>;
+        blurBackground: PropTypes.Requireable<boolean>;
+        mobileBottomFullWidth: PropTypes.Requireable<boolean>;
+    };
+    defaultProps: {
+        cancelText: string;
+        confirmText: string;
+        banner: any;
+        title: string;
+        description: string;
+        body: any;
+        onCancel: () => void;
+        onConfirm: () => void;
+        cancelButtonVariant: string;
+        confirmButtonVariant: string;
+        showCloseButton: boolean;
+        hideOnClickAway: boolean;
+        blurBackground: boolean;
+        mobileBottomFullWidth: boolean;
+    };
+};
+/**
+ * A multi-step modal is a modal that has multiple steps.
+ */
+export const NSMultiStepModal: {
+    ({ modalSteps, showModalStepsPagination, hideOnClickAway, blurBackground, onHide, onFinalStep, mobileBottomFullWidth, onStepChange, modalPadding, modalBodyMargin, width, height, minHeight, showCloseButton, }: MultiStepModalProps): JSX.Element;
+    propTypes: {
+        modalSteps: PropTypes.Requireable<any[]>;
+        showModalStepsPagination: PropTypes.Requireable<boolean>;
+        hideOnClickAway: PropTypes.Requireable<boolean>;
+        blurBackground: PropTypes.Requireable<boolean>;
+        onHide: PropTypes.Requireable<(...args: any[]) => any>;
+        onFinalStep: PropTypes.Requireable<(...args: any[]) => any>;
+        mobileBottomFullWidth: PropTypes.Requireable<boolean>;
+        onStepChange: PropTypes.Requireable<(...args: any[]) => any>;
+        modalPadding: PropTypes.Requireable<string>;
+        modalBodyMargin: PropTypes.Requireable<string>;
+        width: PropTypes.Requireable<string>;
+        height: PropTypes.Requireable<string>;
+        minHeight: PropTypes.Requireable<string>;
+        showCloseButton: PropTypes.Requireable<boolean>;
+    };
+    defaultProps: {
+        modalSteps: any[];
+        showModalStepsPagination: boolean;
+        hideOnClickAway: boolean;
+        blurBackground: boolean;
+        onHide: () => void;
+        onFinalStep: () => void;
+        mobileBottomFullWidth: boolean;
+        onStepChange: () => void;
+        modalPadding: string;
+        modalBodyMargin: string;
+        width: any;
+        height: any;
+        minHeight: any;
+        showCloseButton: boolean;
+    };
+    PaginatedActions: import("styled-components").StyledComponent<string, any, {}, never>;
+    Pagination: import("styled-components").StyledComponent<string, any, {}, never>;
+    PaginationItem: import("styled-components").StyledComponent<string, any, import("ui/elements/Modal/types").ModalPaginationItemProps, never>;
+};
 
 //# sourceMappingURL=index.d.ts.map