widenarrow-ui 1.0.2 → 1.0.3

package/lib/index.d.ts

@@ -1,23 +1,733 @@
-export { default as ToolTip } from 'src/components/ToolTip/ToolTip';
-export { default as Checkbox } from 'src/components/Checkbox/Checkbox';
-export { default as SolidSpinner } from 'src/components/SolidSpinner/SolidSpinner';
-export { default as Icon } from 'src/components/Icon/Icon';
-export { default as Button } from 'src/components/Button/Button';
-export { default as InlineButton } from 'src/components/InlineButton/InlineButton';
-export { default as IconButton } from 'src/components/IconButton/IconButton';
-export { default as Separator } from 'src/components/Separator/Separator';
-export { default as Box } from 'src/components/Box/Box';
-export { default as FormSkeleton } from 'src/components/FormSkeleton/FormSkeleton';
-export { default as ListSkeleton } from 'src/components/ListSkeleton/ListSkeleton';
-export { default as ListItem } from 'src/components/ListItem/ListItem';
-export { default as DropDown } from 'src/components/DropDown/DropDown';
-export { default as DropDownItem } from 'src/components/DropDownItem/DropDownItem';
-export { default as FacetButton } from 'src/components/FacetButton/FacetButton';
-export { default as MultiActionButton } from 'src/components/MultiActionButton/MultiActionButton';
-export { default as Grid } from 'src/components/Grid/Grid';
-export { default as SortableTable } from 'src/components/SortableTable/SortableTable';
-export { default as Image } from 'src/components/Image/Image';
-export { default as RadioButton } from 'src/components/RadioButton/RadioButton';
-export { default as SwitchButton } from 'src/components/SwitchButton/SwitchButton';
-export { Heading, Label, Paragraph, Span } from 'src/components/Typography/Typography';
-export { AppColors, AspectRatioTypes, ColorTypes, HierarchyTypes, IconTypes, SizeTypes } from 'src/constants';
+import * as react from 'react';
+import react__default, { CSSProperties, MouseEvent, ReactNode, FC, ChangeEvent } from 'react';
+import { HierarchyTypes as HierarchyTypes$1, ColorTypes as ColorTypes$1, SizeTypes as SizeTypes$1, IconTypes as IconTypes$1 } from 'src/constants';
+import { Placement, PositioningStrategy } from '@popperjs/core';
+
+type baseSizes = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8';
+type baseSizesExtended = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '025' | '05' | '15' | '25' | 'auto';
+interface MarginInterface {
+    margin?: baseSizes;
+    marginX?: baseSizes;
+    marginY?: baseSizes;
+    marginTop?: baseSizesExtended;
+    marginBottom?: baseSizesExtended;
+    marginRight?: baseSizesExtended;
+    marginLeft?: baseSizesExtended;
+}
+interface PaddingInterface {
+    padding?: baseSizesExtended;
+    paddingX?: baseSizes;
+    paddingY?: baseSizes;
+    paddingTop?: baseSizesExtended;
+    paddingBottom?: baseSizesExtended;
+    paddingRight?: baseSizesExtended;
+    paddingLeft?: baseSizesExtended;
+}
+interface FlexStylingInterface {
+    alignItems?: 'center' | 'flexStart' | 'flexEnd' | 'spaceAround' | 'spaceBetween';
+    alignSelf?: 'center' | 'flexStart' | 'flexEnd';
+    displayFlex?: boolean;
+    displayFlexCenter?: boolean;
+    displayFlexCenterSpaceBetween?: boolean;
+    flexDirection?: 'row' | 'rowReverse' | 'column' | 'columnReverse';
+    flexGrow?: '0' | '1' | 'auto';
+    flexWrap?: 'wrap' | 'noWrap' | 'wrapReverse';
+    justifyContent?: 'center' | 'flexStart' | 'flexEnd' | 'spaceAround' | 'spaceBetween';
+}
+interface HierarchyInterface {
+    type: Partial<HierarchyTypes$1>;
+}
+interface ColorStyleInterface {
+    color?: Partial<ColorTypes$1>;
+}
+interface SizeStyleInterface {
+    size?: Partial<SizeTypes$1>;
+}
+interface IconStyleInterface {
+    icon?: Partial<IconTypes$1>;
+}
+
+declare enum IconTypes {
+    ACCOUNT_SETTINGS = "iconAccountSettings",
+    AUTOMATION = "iconAutomation",
+    ADD_CHART = "iconAddChart",
+    ADD_FILLED = "iconAddFilled",
+    ADD_FOLDER = "iconAddFolder",
+    ADD_PAGE_BREAK = "iconAddPageBreak",
+    ADD_POST = "iconAddPost",
+    ADD_SECTION_ABOVE = "iconAddSectionAbove",
+    ADD_SECTION_BELOW = "iconAddSectionBelow",
+    ADD_SECTION_LEFT = "iconAddSectionLeft",
+    ADD_SECTION_RIGHT = "iconAddSectionRight",
+    AI = "iconAi",
+    ARROW_DOWN = "iconArrowDown",
+    ARROW_FIRST_PAGE = "iconArrowFirstPage",
+    ARROW_FORK_RIGHT = "iconArrowForkRight",
+    ARROW_LAST_PAGE = "iconArrowLastPage",
+    ARROW_LEFT = "iconArrowLeft",
+    ASK_WIDE_NARROW = "iconAskWideNarrow",
+    ARROW_RIGHT = "iconArrowRight",
+    ARROW_UP = "iconArrowUp",
+    ATTACHMENT = "iconAttachment",
+    BANNER = "iconBanner",
+    BENCHMARKS = "iconBenchMarks",
+    BLOCK = "iconBlock",
+    CANCEL_TRIAL = "iconCancelTrial",
+    CARD_MODE = "iconCardMode",
+    CHANGE_ORDER = "iconChangeOrder",
+    CHECK = "iconCheck",
+    CHECK_CIRCLE_EXTRA_SMALL = "iconCheckCircleExtraSmall",
+    CHECK_CIRCLE_LARGE = "iconCheckCircleLarge",
+    CHECK_CIRCLE_SMALL = "iconCheckCircleSmall",
+    CHECK_INDETERMINATE = "iconCheckIndeterminate",
+    CHEVRON_DOWN = "iconChevronDown",
+    CHEVRON_LEFT = "iconChevronLeft",
+    CHEVRON_RIGHT = "iconChevronRight",
+    CHEVRON_UP = "iconChevronUp",
+    CLASSIFICATION = "iconClassification",
+    CLIP_BOARD = "iconClipBoard",
+    CLUSTER = "iconCluster",
+    COG_WHEEL = "iconCogWheel",
+    COMMENT = "iconComment",
+    COMPARE = "iconCompare",
+    COPY = "iconCopy",
+    CREATE_NEWSLETTER = "iconCreateNewsletter",
+    CROSS = "iconCross",
+    CROSS_CIRCLE_EXTRA_SMALL = "iconCrossCircleExtraSmall",
+    CROSS_CIRCLE_LARGE = "iconCrossCircleLarge",
+    CROSS_CIRCLE_SMALL = "iconCrossCircleSmall",
+    CROSS_CIRCLE_SMALL_FILLED = "iconCrossCircleSmallFilled",
+    DASHBOARD = "iconDashboard",
+    DATE_RANGE = "iconDateRange",
+    DESCRIPTION = "iconDescription",
+    DESKTOP = "iconDesktop",
+    DOTS = "iconDots",
+    DOTS_BACKGROUND = "iconDotsBackground",
+    DOT_FILLED = "iconDotFilled",
+    DOT_OUTLINED = "iconDotOutlined",
+    DOWN = "iconDown",
+    DOWNLOAD = "iconDownload",
+    DUPLICATE = "iconDuplicate",
+    EDIT = "iconEdit",
+    EMBED = "iconEmbed",
+    ERROR = "iconError",
+    EXIT_TO_APP = "iconExitToApp",
+    EXPAND = "iconExpand",
+    EXPAND_ARROWS = "iconExpandArrows",
+    ETHERNET = "iconEthernet",
+    FEED = "iconFeed",
+    FILTER = "iconFilter",
+    FILTER_SETTINGS = "iconFilterSettings",
+    FOLDER = "iconFolder",
+    FOLDER_FILLED = "iconFolderFilled",
+    FORMAT_FONT_SIZE = "iconFormatFontSize",
+    FORMAT_IMAGE_BOTTOM = "iconFormatImgBottom",
+    FORMAT_IMAGE_CENTER_CENTER = "iconFormatImgCenterCenter",
+    FORMAT_IMAGE_CROP = "iconFormatImgCrop",
+    FORMAT_IMAGE_HERO = "iconFormatHerot",
+    FORMAT_IMAGE_LEFT = "iconFormatImgLeft",
+    FORMAT_IMAGE_LEFT_BOTTOM = "iconFormatImgLeftBottom",
+    FORMAT_IMAGE_LEFT_CENTER = "iconFormatImgLeftCenter",
+    FORMAT_IMAGE_RIGHT = "iconFormatImgRight",
+    FORMAT_IMAGE_RIGHT_BOTTOM = "iconFormatImgRightBottom",
+    FORMAT_IMAGE_RIGHT_CENTER = "iconFormatImgRightCenter",
+    FORMAT_IMAGE_TOP = "iconFormatImgTop",
+    FORMAT_TEXT_ALIGN_CENTER = "iconFormatTextAlignCenter",
+    FORMAT_TEXT_ALIGN_LEFT = "iconFormatTextAlignLeft",
+    FORMAT_TEXT_ALIGN_RIGHT = "iconFormatTextAlignRight",
+    FORMAT_CODE = "iconFormatCode",
+    GRID_MODE = "iconGridMode",
+    HANDLEBAR = "iconHandleBar",
+    HELP = "iconHelp",
+    HISTORY = "iconHistory",
+    INBOX = "iconInbox",
+    INFO = "iconInfo",
+    KEYWORDS = "iconKeywords",
+    LIGHT_BULB = "iconLightBulb",
+    LIKE = "iconLike",
+    LIKE_FILLED = "iconLikeFilled",
+    LINK = "iconLink",
+    LIST_MODE = "iconListMode",
+    LOCK = "iconLock",
+    MAIL = "iconMail",
+    MASONRY = "iconMasonry",
+    MENU = "iconMenu",
+    MINIMIZE_ARROWS = "iconMinimizeArrows",
+    MINUS = "iconMinus",
+    MONITORING_LOGO = "iconMonitoringLogo",
+    MOVIE = "iconMovie",
+    NAVIGATE_DOWN_LARGE = "iconNavigateDownLarge",
+    NAVIGATE_LEFT_LARGE = "iconNavigateLeftLarge",
+    NAVIGATE_RIGHT_LARGE = "iconNavigateRightLarge",
+    NEWS = "iconNews",
+    NEWSLETTER_CLOSED = "iconNewsLetterClosed",
+    NEWSLETTER_OPENED = "iconNewsLetterOpened",
+    NEWSLETTER_SENDER = "iconNewsLetterSender",
+    NEWSLETTER_TEMPLATE = "iconNewsLetterTemplate",
+    NOTIFICATION = "iconNotification",
+    NOTIFICATION_ACTIVE = "iconNotificationActive",
+    NOTIFICATION_SETTINGS = "iconNotificationSettings",
+    NOTIFICATION_OFF = "iconNotificationOff",
+    NO_CHANGE = "iconNoChange",
+    NO_DIRECTION = "iconNoDirection",
+    OPEN_IN_NEW = "iconOpenInNew",
+    PALETTE = "iconPalette",
+    PAUSE = "iconPause",
+    PAUSE_CIRCLE = "iconPauseCircle",
+    PDF = "iconPdf",
+    PHONE = "iconPhone",
+    PHOTO = "iconPhoto",
+    PHOTOS = "iconPhotos",
+    PIN = "iconPin",
+    PLAY = "iconPlay",
+    PLAY_CIRCLE = "iconPlayCircle",
+    PLAY_FLIPPED = "iconPlayFlipped",
+    PLUS = "iconPlus",
+    PORTALS = "iconPortals",
+    PPT = "iconPpt",
+    PRESENT = "iconPresent",
+    PREVIEW = "iconPreview",
+    PREVIEW_OFF = "iconPreviewOff",
+    PURCHASE_INBOX = "iconPurchaseInbox",
+    RECURRING = "iconRecurring",
+    RENEW = "iconRenew",
+    REPORT = "iconReport",
+    REPORT_LIBRARY = "iconReportLibrary",
+    RESET = "iconReset",
+    ROBOT = "iconRobot",
+    RSS = "iconRss",
+    SCHEDULE = "iconSchedule",
+    SEARCH = "iconSearch",
+    SEARCH_USER = "iconSearchUser",
+    SEND = "iconSend",
+    SEND_LIST = "iconSendList",
+    SETTINGS_FILLED = "iconSettingsFilled",
+    SETTINGS_OFF = "iconSettingsOff",
+    SETTINGS_OUTLINED = "iconSettingsOutlined",
+    SHARE = "iconShare",
+    SORT = "iconSort",
+    SSO = "iconSSO",
+    SSO_CONFIG = "iconSSOConfig",
+    STATISTICS = "iconStatistics",
+    STRATEGY = "iconStrategy",
+    SUBSCRIPTIONS = "iconSubscriptions",
+    SUGGESTION = "iconSuggestion",
+    SUMMARIZE = "iconSummarize",
+    TAXONOMY = "iconTaxonomy",
+    TRANSLATE = "iconTranslate",
+    TRASH = "iconTrash",
+    TRIAL = "iconTrial",
+    TEXT_ADD = "iconTextAdd",
+    TEXT_REPLACE = "iconTextReplace",
+    UNFOLD_LESS = "iconUnfoldLess",
+    UNFOLD_MORE = "iconUnfoldMore",
+    UP = "iconUp",
+    UPLOAD = "iconUpload",
+    USER = "iconUser",
+    USERS = "iconUsers",
+    USERS_ADD = "iconUsersAdd",
+    USER_REMOVE = "iconUserRemove",
+    USER_SYS_ADMIN = "iconUserSysAdmin",
+    VERIFIED = "iconVerified",
+    WARNING = "iconWarning",
+    WARNING_OUTLINED = "iconWarningOutlined",
+    WILL_BE_DELETED = "iconWillBeDeleted",
+    WORLD = "iconWorld",
+    ZOOM_IN = "iconZoomIn",
+    ZOOM_OUT = "iconZoomOut",
+    UNDO = "iconUndo",
+    REDO = "iconRedo"
+}
+declare enum HierarchyTypes {
+    PRIMARY = "primary",
+    SECONDARY = "secondary",
+    TERTIARY = "tertiary"
+}
+declare enum AspectRatioTypes {
+    ar4_1 = "ar4_1",
+    ar3_1 = "ar3_1",
+    ar21_9 = "ar21_9",
+    ar16_9 = "ar16_9",
+    ar21_13 = "ar21_13",
+    ar4_3 = "ar4_3",
+    ar1_1 = "ar1_1"
+}
+declare enum ColorTypes {
+    WHITE = "white",
+    BLUE = "blue",
+    LIGHT_BLUE = "lightBlue",
+    GREEN = "green",
+    RED = "red",
+    ORANGE = "orange",
+    YELLOW = "yellow",
+    GREY_1 = "grey1",
+    GREY_2 = "grey2",
+    GREY_3 = "grey3",
+    GREY_4 = "grey4",
+    GREY_5 = "grey5",
+    GREY_6 = "grey6",
+    GREY_7 = "grey7",
+    BLACK = "black",
+    INHERIT = "inherit",
+    CURRENT = "current"
+}
+declare enum SizeTypes {
+    EXTRA_SMALL = "extraSmall",
+    SMALL = "small",
+    MEDIUM = "medium",
+    LARGE = "large",
+    AUTO = "auto"
+}
+declare enum FontFamilyTypes {
+    ASSISTANT = "",
+    VERDANA = "verdana",
+    ARIAL = "arial",
+    TAHOMA = "tahoma",
+    HELVETICA = "helvetica",
+    COURIER = "courier",
+    GEROGIA = "georgia",
+    LUCIDA = "lucida",
+    TIMES = "times",
+    TIMES_NEW_ROMAN = "times new roman",
+    CUSTOM = "custom"
+}
+declare enum AppColors {
+    TRANSPARENT = "transparent",
+    WHITE = "#ffffff",
+    BLUE = "#0069c1",
+    LIGHT_BLUE = "#129dfa",
+    GREEN = "#058736",
+    RED = "#d0341b",
+    ORANGE = "#ff8f00",
+    YELLOW = "#ffc107",
+    RSS = "#f1b355",
+    GREY_1 = "#f1f1f1",
+    GREY_2 = "#dbdbdb",
+    GREY_3 = "#a2a4a6",
+    GREY_4 = "#707070",
+    GREY_5 = "#464646",
+    GREY_6 = "#2b2f3e",
+    GREY_7 = "#19191a",
+    BLACK = "#000000",
+    SKELETON_LIGHT_GREY = "#f1f1f1",
+    SKELETON_NESTED_GREY = "#c1c1c1",
+    SKELETON_NESTED_LIGHT_GREY = "#e6e6e6",
+    CUSTOM = "custom"
+}
+
+interface BoxProps extends MarginInterface, PaddingInterface, FlexStylingInterface {
+    children: react__default.ReactNode;
+    className?: string;
+    position?: string;
+    borderColor?: Partial<ColorTypes>;
+    border?: '1' | '2' | '3';
+    borderTop?: '1' | '2' | '3';
+    borderBottom?: '1' | '2' | '3';
+    borderRight?: '1' | '2' | '3';
+    borderLeft?: '1' | '2' | '3';
+    backgroundColor?: Partial<ColorTypes>;
+    showOnBreakpoint?: string;
+    withBorderRadius?: boolean;
+    width?: string;
+    minWidth?: string;
+    /**
+     * Max width in percentage e.g 50 = 50%
+     */
+    maxWidth?: string;
+    style?: CSSProperties;
+    onClickCallback?: () => void;
+}
+
+declare const Box: react.ForwardRefExoticComponent<BoxProps & react.RefAttributes<HTMLDivElement>>;
+
+interface ButtonProps {
+    text?: string;
+    onClickCallback?: (e: MouseEvent<HTMLButtonElement>) => void;
+    type?: Partial<HierarchyTypes>;
+    size?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
+    icon?: Partial<IconTypes>;
+    iconSize?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE | SizeTypes.AUTO;
+    withIconLeft?: boolean;
+    disabled?: boolean;
+    className?: string;
+    toolTip?: string;
+    style?: CSSProperties;
+    withEllipsis?: boolean;
+    rotateIconByDegree?: 0 | 45 | 90 | 135 | 180 | 225 | 270 | 315;
+    id?: string | number;
+    loading?: boolean;
+    autoFocus?: boolean;
+    children?: ReactNode;
+    ariaLabel?: string;
+    tabIndex?: number;
+}
+
+declare const Button: FC<ButtonProps>;
+
+interface CheckboxProps {
+    name: string;
+    label?: string;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    onChangeFake?: (event: MouseEvent<HTMLDivElement>) => void;
+    className?: string;
+    ariaLabel?: string;
+    helperText?: string;
+    checked?: boolean;
+    blocked?: boolean;
+    indeterminate?: boolean;
+    wordWrap?: boolean;
+    disabled?: boolean;
+    isFake?: boolean;
+}
+
+declare const Checkbox: FC<CheckboxProps>;
+
+interface DropDownProps {
+    children: ReactNode[] | ReactNode;
+    buttonComponent: ReactNode;
+    buttonCallbackName?: string;
+    footerComponent?: ReactNode;
+    title?: string;
+    className?: string;
+    childrenClassName?: string;
+    dark?: boolean;
+    withArrow?: boolean;
+    loading?: boolean;
+    childrenIsList?: boolean;
+    withVisibleOverflow?: boolean;
+    closeDropDownOnClick?: boolean;
+    placement?: Placement;
+    strategy?: PositioningStrategy;
+    offset?: {
+        horizontal: number;
+        vertical: number;
+    };
+    arrowPadding?: number;
+    onCloseCallback?: () => void;
+    onOpenCallback?: () => void;
+}
+
+declare const DropDown: FC<DropDownProps>;
+
+interface DropDownItemProps {
+    text: string;
+    onClickCallback?: (e: MouseEvent<HTMLButtonElement>) => void;
+    size?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
+    active?: boolean;
+    withChevronRight?: boolean;
+    disabled?: boolean;
+    wrapperElement?: 'div' | 'li';
+    className?: string;
+    type?: HierarchyTypes.PRIMARY | HierarchyTypes.SECONDARY;
+    leftIcon?: Partial<IconTypes>;
+    rightIcon?: Partial<IconTypes>;
+    iconSize?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
+    iconColor?: Partial<ColorTypes>;
+    textColor?: 'inherit' | 'white' | 'grey' | 'black' | 'green' | 'red' | 'orange' | 'blue' | undefined;
+    iconClassName?: string;
+}
+
+declare const DropDownItem: FC<DropDownItemProps>;
+
+interface FacetButtonProps {
+    text?: string;
+    component?: ReactNode;
+    id?: string | number;
+    onClickCallback?: (e: MouseEvent<HTMLButtonElement>) => void;
+    disabled?: boolean;
+    selected?: boolean;
+    icon?: Partial<IconTypes>;
+    children?: ReactNode;
+    className?: string;
+    toolTip?: string;
+    percent: number;
+}
+
+declare const FacetButton: FC<FacetButtonProps>;
+
+interface Block {
+    height: number;
+    col: number;
+}
+interface FormSkeletonProps {
+    className?: string;
+    blocks: Array<Block>;
+}
+
+declare const FormSkeleton: FC<FormSkeletonProps>;
+
+interface GridProps extends MarginInterface, PaddingInterface, FlexStylingInterface {
+    /**
+     * Number of columns on viewports < 576px
+     */
+    xs?: number | undefined;
+    /**
+     * Number of columns on viewports < 768px
+     */
+    sm?: number | undefined;
+    /**
+     * Number of columns on viewports < 1024px
+     */
+    md?: number | undefined;
+    /**
+     * Number of columns on viewports < 1200px
+     */
+    lg?: number | undefined;
+    /**
+     * Number of columns on viewports < 1646px
+     */
+    xl?: number | undefined;
+    /**
+     * Number of columns on viewports < 2000px
+     */
+    xxl?: number | undefined;
+    /**
+     * Optionally provide the number of columns in the grid.
+     * @default 12
+     */
+    /**
+     * If the component is a grid container
+     */
+    container?: boolean;
+    /**
+     * Optionally provide the spacing as a multiple of $half-base-size (4px) for each grid item.
+     * Takes either a single string for x and y,
+     * or an array for [y, x],
+     * or an object for different breakpoints, i.e { xs: '4', md: ['4', '6'], lg: '8' }
+     * @default '4'
+     */
+    spacing?: string | Array<string> | Record<never, string | string[]> | undefined;
+    columns?: number | undefined;
+    className?: string | undefined;
+    children?: ReactNode | undefined;
+}
+
+declare const Grid: FC<GridProps>;
+
+interface IconProps extends ColorStyleInterface, IconStyleInterface {
+    size?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE | SizeTypes.AUTO | undefined;
+    rotateIcon?: boolean | undefined;
+    rotateIconByDegree?: 0 | 45 | 90 | 135 | 180 | 225 | 270 | 315 | undefined;
+    disabled?: boolean | undefined;
+    className?: string | undefined;
+    toolTip?: string | undefined;
+}
+
+declare const Icon: FC<IconProps>;
+
+interface IconButtonProps extends IconStyleInterface, SizeStyleInterface {
+    className?: string;
+    rotateIcon?: boolean;
+    rotateIconByDegree?: 0 | 45 | 90 | 135 | 180 | 225 | 270 | 315;
+    iconClassName?: string;
+    type?: HierarchyTypes.PRIMARY | HierarchyTypes.SECONDARY;
+    onClickCallback?: (e: MouseEvent<HTMLButtonElement>) => void;
+    iconSize?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
+    iconColor?: Partial<ColorTypes>;
+    href?: string;
+    disabled?: boolean;
+    toolTip?: string;
+    ariaLabel?: string;
+}
+
+declare const IconButton: FC<IconButtonProps>;
+
+interface ImageProps {
+    src: string;
+    alt?: string;
+    className?: string;
+    imageClassName?: string;
+    customCellComponent?: ReactNode;
+    aspectRatio?: Partial<AspectRatioTypes>;
+    bgImage?: boolean;
+    bgImageProps?: {
+        size: 'cover' | 'contain';
+        position: 'top' | 'bottom' | 'center';
+    };
+    placeHolderColor?: string;
+    customComponent?: ReactNode;
+    withContainer?: boolean;
+}
+
+declare const Image: FC<ImageProps>;
+
+interface InlineButtonProps {
+    text: string;
+    onClickCallback?: (e: MouseEvent<HTMLButtonElement>) => void;
+    className?: string;
+    children?: ReactNode;
+    icon?: Partial<IconTypes>;
+    rotateIcon?: boolean;
+    iconClassName?: string;
+    withIconRight?: boolean;
+    type?: Partial<HierarchyTypes>;
+    size?: SizeTypes.SMALL | SizeTypes.MEDIUM;
+    textClassName?: string;
+    withEllipsis?: boolean;
+    disabled?: boolean | undefined;
+    style?: object;
+    toolTip?: string;
+}
+
+declare const InlineButton: FC<InlineButtonProps>;
+
+interface ListSkeletonProps {
+    items: number;
+    itemHeight?: number;
+    className?: string;
+    itemClassName?: string;
+    withBorderRadius?: boolean;
+    withContent?: boolean;
+    backgroundColor?: Partial<ColorTypes>;
+    marginBottom?: string;
+    padding?: string;
+    borderColor?: Partial<ColorTypes>;
+    border?: '1' | '2' | '3';
+    borderTop?: '1' | '2' | '3';
+    borderBottom?: '1' | '2' | '3';
+    borderRight?: '1' | '2' | '3';
+    borderLeft?: '1' | '2' | '3';
+    contentColor?: Partial<ColorTypes>;
+}
+
+declare const ListSkeleton: FC<ListSkeletonProps>;
+
+interface MultiActionButtonProps {
+    text?: string;
+    onLeftClickCallback?: (e: MouseEvent<HTMLButtonElement>) => void;
+    onRightClickCallback?: (e: MouseEvent<HTMLButtonElement>) => void;
+    type?: Partial<HierarchyTypes>;
+    size?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
+    leftIconSize?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
+    rightIconSize?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
+    leftIcon?: Partial<IconTypes>;
+    rightIcon?: Partial<IconTypes>;
+    rotateLeftIconByDegree?: 0 | 45 | 90 | 135 | 180 | 225 | 270 | 315;
+    rotateRightIconByDegree?: 0 | 45 | 90 | 135 | 180 | 225 | 270 | 315;
+    disabled?: boolean;
+    className?: string;
+    iconClassName?: string;
+    toolTip?: string;
+    id?: string | number;
+    loading?: boolean;
+    withEllipsis?: boolean;
+    autoFocus?: boolean;
+    ariaLabel?: string;
+    tabIndex?: number;
+    withSeparator?: boolean;
+}
+
+declare const MultiActionButton: FC<MultiActionButtonProps>;
+
+interface SeparatorProps extends MarginInterface, PaddingInterface {
+    className?: string;
+    color?: Partial<ColorTypes>;
+    size?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
+}
+
+declare const Separator: FC<SeparatorProps>;
+
+interface SolidSpinnerProps {
+    type?: Partial<HierarchyTypes>;
+    size?: SizeTypes.EXTRA_SMALL | SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
+    disabled?: boolean;
+    className?: string;
+    label?: string;
+    labelClassName?: string;
+    absoluteCenter?: boolean;
+}
+
+declare const SolidSpinner: FC<SolidSpinnerProps>;
+
+interface CellInterface {
+    key: string;
+    title: string;
+    width: string;
+    icon?: Partial<IconTypes>;
+    disableSort?: boolean;
+    alignRight?: boolean;
+    alignCenter?: boolean;
+    withEllipsis?: boolean;
+    toolTip?: string;
+    customHeaderCellComponent?: (cell: CellInterface) => ReactNode;
+    customCellComponent?: (row: object) => ReactNode;
+}
+interface SortableTableProps {
+    cells: Array<CellInterface>;
+    data: Array<object>;
+    sortBy: Array<{
+        keyName: string;
+        ascending: boolean;
+    }>;
+    className?: string;
+    rowClassName?: string;
+    headerClassName?: string;
+    loading?: boolean;
+    skeletonRows?: number;
+    withStickyHeader?: boolean;
+    withIntersectionObserver?: boolean;
+    onSortCallback?: (keyName: string) => void;
+}
+
+declare const SortableTable: FC<SortableTableProps>;
+
+interface ToolTipProps {
+    text?: string;
+    children?: string | number | ReactNode | null;
+    component?: ReactNode;
+    disabled?: boolean;
+    withEllipsis?: boolean | undefined;
+    displayInPortal?: boolean;
+    className?: string;
+    toolTipClassName?: string;
+    id?: string;
+    offset?: number;
+    variant?: 'dark' | 'light';
+    placement?: 'top' | 'right' | 'bottom' | 'left';
+}
+
+/**
+ * @desc This components extends the react-tooltip library.
+ * Full api documentation here: https://github.com/wwayne/react-tooltip
+ */
+declare const ToolTip: FC<ToolTipProps>;
+
+interface TypographyBaseProps extends MarginInterface, PaddingInterface {
+    className?: string;
+    textAlign?: string;
+    fontWeight?: string;
+    fontSize?: string;
+    fontStyle?: string;
+    color?: 'inherit' | 'white' | 'grey' | 'black' | 'green' | 'red' | 'orange' | 'blue' | undefined;
+    meta?: boolean | undefined;
+    error?: boolean | undefined;
+    withBorderBottom?: boolean | undefined;
+    withEllipsis?: boolean | undefined;
+    withAnimation?: boolean | undefined;
+    withNoWordBreak?: boolean | undefined;
+    withWordBreak?: boolean | undefined;
+    disabled?: boolean | undefined;
+}
+interface HeadingProps extends TypographyBaseProps {
+    children: ReactNode;
+    type: string;
+    style?: CSSProperties;
+}
+interface LabelProps extends TypographyBaseProps {
+    children: ReactNode | string;
+    htmlFor?: string;
+    style?: CSSProperties;
+}
+interface ParagraphProps extends TypographyBaseProps {
+    children: ReactNode;
+}
+interface SpanProps extends TypographyBaseProps {
+    children: ReactNode;
+}
+
+declare const Heading: FC<HeadingProps>;
+declare const Label: FC<LabelProps>;
+declare const Paragraph: FC<ParagraphProps>;
+declare const Span: FC<SpanProps>;
+
+export { AppColors, AspectRatioTypes, Box, Button, Checkbox, type ColorStyleInterface, ColorTypes, DropDown, DropDownItem, FacetButton, type FlexStylingInterface, FontFamilyTypes, FormSkeleton, Grid, Heading, type HierarchyInterface, HierarchyTypes, Icon, IconButton, type IconStyleInterface, IconTypes, Image, InlineButton, Label, ListSkeleton, type MarginInterface, MultiActionButton, type PaddingInterface, Paragraph, Separator, type SizeStyleInterface, SizeTypes, SolidSpinner, SortableTable, Span, ToolTip, type baseSizes, type baseSizesExtended };