@ballistix.digital/react-components 0.2.0 → 0.3.2

package/dist/index.d.ts

@@ -1,16 +1,23 @@
-import React, { FC, ReactNode, RefObject, ReactElement, Dispatch, SetStateAction, ElementType } from 'react';
+import React, { FC, ReactNode, RefObject, ReactElement, HTMLInputTypeAttribute, ElementType, Dispatch, SetStateAction } from 'react';
+import { DeepPartial as DeepPartial$1 } from 'types/DeepPartial';
 import { Menu } from '@headlessui/react';
+import { IconName } from '@fortawesome/fontawesome-svg-core';
+import { ColumnDef } from '@tanstack/react-table';
+import { TButtonElementStyles as TButtonElementStyles$1 } from 'components/Element/Button';
+import { TDropdownElementStyles as TDropdownElementStyles$1 } from 'components/Element/Dropdown';
+import { TPagePaginationNavigationStyles as TPagePaginationNavigationStyles$1 } from 'components/Navigation/PagePagination';
+
+declare const base$i: {
+    loading: string;
+    spinner: string;
+    empty: string;
+    placeholder: string;
+    container: string;
+    indicator: string;
+};
+type TAvatarElementStyles = DeepPartial$1<typeof base$i>;
 
-type StylesType$f = {
-    loading?: string;
-    empty?: string;
-    placeholder?: string;
-    container?: string;
-    indicator?: string;
-    spinner?: string;
-};
-
-interface Props$e {
+type TProps$h = {
     src?: string | undefined;
     placeholder?: string | undefined;
     children?: ReactNode | ReactNode[] | string;
@@ -20,233 +27,308 @@ interface Props$e {
     status?: 'offline' | 'online' | 'blocked';
     isDisabled?: boolean;
     isLoading?: boolean;
-    styles?: StylesType$f;
-}
-declare const AvatarElement: FC<Props$e>;
+    styles?: TAvatarElementStyles;
+};
+declare const AvatarElement: FC<TProps$h>;
 
-type StylesType$e = {
-    container?: string;
-};
+declare const base$h: {
+    container: string;
+    indicator: string;
+    button: string;
+};
+type TBadgeElementStyles = DeepPartial$1<typeof base$h>;
+
+type TProps$g = {
+    children: string | ReactNode;
+    color?: 'gray' | 'red' | 'yellow' | 'green' | 'blue' | 'indigo' | 'purple' | 'pink';
+    type?: 'normal' | 'indicator' | 'close';
+    size?: 'sm' | 'lg';
+    figure?: 'block' | 'rounded';
+    isDisabled?: boolean;
+    isLoading?: boolean;
+    onClose?: () => void;
+    styles?: TBadgeElementStyles;
+};
+declare const BadgeElement: FC<TProps$g>;
+
+declare const base$g: {
+    container: string;
+    content: string;
+    icon: string;
+    spinner: string;
+};
+type TButtonElementStyles = DeepPartial$1<typeof base$g>;
 
-interface Props$d {
+type TProps$f = {
     children: string | ReactNode;
+    innerRef?: RefObject<HTMLButtonElement>;
     type?: 'primary' | 'secondary' | 'outline';
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     figure?: 'block' | 'rounded';
     status?: 'idle' | 'loading' | 'success' | 'error';
-    ref?: RefObject<HTMLButtonElement>;
     isDisabled?: boolean;
-    styles?: StylesType$e;
+    styles?: TButtonElementStyles;
     onClick: () => void;
-}
-declare const ButtonElement: FC<Props$d>;
-
-type StylesType$d = {
-    container?: string;
-    firstButton?: string;
-    button?: string;
-    lastButton?: string;
-};
+};
+declare const ButtonElement: FC<TProps$f>;
 
-interface Props$c {
+declare const base$f: {
+    container: string;
+    firstButton: string;
+    button: string;
+    lastButton: string;
+};
+type TButtonGroupElementStyles = DeepPartial$1<typeof base$f>;
+
+type TProps$e = {
     children: ReactElement[];
-    styles?: StylesType$d;
-}
-declare const ButtonGroupElement: FC<Props$c>;
-
-type StylesType$c = {
-    container?: string;
-    button?: string;
-    compact?: string;
-    dots?: string;
-    items?: string;
-    left?: string;
-    right?: string;
-};
+    styles?: TButtonGroupElementStyles;
+};
+declare const ButtonGroupElement: FC<TProps$e>;
 
-interface Props$b {
+declare const base$e: {
+    container: string;
+    button: string;
+    compact: string;
+    dots: string;
+    items: string;
+};
+type TDropdownElementStyles = DeepPartial$1<typeof base$e>;
+
+type TProps$d = {
     children: ReactElement | ReactElement[];
-    label: string;
+    label: string | ReactElement;
     type?: 'button' | 'compact';
     direction?: 'left' | 'right';
-    styles?: StylesType$c;
-}
+    styles?: TDropdownElementStyles;
+};
 declare const DropdownElement: {
-    Container: FC<Props$b>;
+    Container: FC<TProps$d>;
     Item: typeof Menu.Item;
 };
 
-type StylesType$b = {
-    container?: string;
-    indicator?: string;
-    button?: string;
-};
+type TProps$c = {
+    accessor: IconName;
+    type: 'brands' | 'light' | 'regular' | 'solid';
+    className?: string;
+};
+declare const IconElement: FC<TProps$c>;
 
-interface Props$a {
-    children: string | ReactNode;
-    color?: 'gray' | 'red' | 'yellow' | 'green' | 'blue' | 'indigo' | 'purple' | 'pink';
-    type?: 'normal' | 'indicator' | 'close';
-    size?: 'sm' | 'lg';
-    figure?: 'block' | 'rounded';
+declare const base$d: {
+    container: string;
+    head: string;
+    body: string;
+    foot: string;
+    label: string;
+    hint: string;
+    leading: string;
+    input: string;
+    trailing: string;
+    description: string;
+};
+type TInputGroupStyles = DeepPartial$1<typeof base$d>;
+
+type TProps$b = {
+    name: string;
+    htmlType: HTMLInputTypeAttribute;
+    label?: string;
+    description?: string;
+    placeholder?: string;
+    leading?: string;
+    trailing?: string;
+    value: string;
+    type: 'normal' | 'inset' | 'overlapping' | 'pill' | 'floored';
+    isValid?: boolean;
     isDisabled?: boolean;
-    isLoading?: boolean;
-    onClose?: () => void;
-    styles?: StylesType$b;
-}
-declare const BadgeElement: FC<Props$a>;
+    isRequired?: boolean;
+    onChange: any;
+    styles?: TInputGroupStyles;
+};
+declare const InputGroupForm: FC<TProps$b>;
 
-type StylesType$a = {
-    container?: string;
-    content?: string;
-};
+declare const base$c: {
+    container: string;
+    content: string;
+};
+type TContainerLayoutStyles = DeepPartial$1<typeof base$c>;
 
-interface Props$9 {
+type TProps$a = {
     children: ReactNode;
     type?: 'break' | 'center' | 'fill';
-    styles?: StylesType$a;
-}
-declare const ContainerLayout: FC<Props$9>;
-
-type StylesType$9 = {
-    container?: string;
-    head?: string;
-    line?: string;
-    body?: string;
-    content?: string;
-};
+    styles?: TContainerLayoutStyles;
+};
+declare const ContainerLayout: FC<TProps$a>;
 
-interface Props$8 {
-    children: ReactNode;
+declare const base$b: {
+    container: string;
+    head: string;
+    line: string;
+    body: string;
+    content: string;
+};
+type TDividerLayoutStyles = DeepPartial$1<typeof base$b>;
+
+type TProps$9 = {
+    children?: ReactNode;
     type?: 'left' | 'center' | 'right';
-    styles?: StylesType$9;
-}
-declare const DividerLayout: FC<Props$8>;
+    styles?: TDividerLayoutStyles;
+};
+declare const DividerLayout: FC<TProps$9>;
 
-type StylesType$8 = {
-    container?: string;
-    list?: string;
-    item?: string;
-};
+declare const base$a: {
+    container: string;
+    list: string;
+    item: string;
+};
+type TListContainerLayoutStyles = DeepPartial$1<typeof base$a>;
 
-interface Props$7 {
+type TProps$8 = {
     children: ReactElement | ReactElement[];
     type?: 'fill' | 'fill-sticky' | 'center' | 'center-sticky' | 'card' | 'card-sticky';
-    styles?: StylesType$8;
-}
-declare const ListContainerLayout: FC<Props$7>;
-
-type StylesType$7 = {
-    container?: string;
-    figure?: string;
-    svg?: string;
-    title?: string;
-    paragraph?: string;
-};
+    styles?: TListContainerLayoutStyles;
+};
+declare const ListContainerLayout: FC<TProps$8>;
 
-interface Props$6 {
+declare const base$9: {
+    container: string;
+    figure: string;
+    svg: string;
+    title: string;
+    paragraph: string;
+};
+type TMediaObjectLayoutStyles = DeepPartial$1<typeof base$9>;
+
+type TProps$7 = {
     title: string;
     paragraph: string;
     figure?: ReactNode;
     type?: 'top' | 'top-reversed' | 'center' | 'center-reversed' | 'bottom' | 'bottom-reversed' | 'stretch' | 'stretch-reversed' | 'responsive' | 'responsive-reversed' | 'wide' | 'wide-reversed';
-    styles?: StylesType$7;
-}
-declare const MediaObjectLayout: FC<Props$6>;
+    styles?: TMediaObjectLayoutStyles;
+};
+declare const MediaObjectLayout: FC<TProps$7>;
 
-type StylesType$6 = {
-    container?: string;
-    section?: string;
-};
+declare const base$8: {
+    container: string;
+    section: string;
+};
+type TPanelLayoutStyles = DeepPartial$1<typeof base$8>;
 
-interface ContainerProps$3 {
+type TContainerProps$2 = {
     children: ReactNode;
     type?: 'normal' | 'sticky';
-    styles?: StylesType$6;
-}
-interface HeadProps {
+    styles?: TPanelLayoutStyles;
+};
+type THeadProps = {
     children: ReactNode;
-    styles?: StylesType$6;
-}
+    styles?: TPanelLayoutStyles;
+};
 declare const LayoutPanel: {
-    Container: React.FC<ContainerProps$3>;
-    Section: React.FC<HeadProps>;
+    Container: React.FC<TContainerProps$2>;
+    Section: React.FC<THeadProps>;
 };
 
-type StylesType$5 = {
-    slashes?: {
-        container?: string;
-        list?: string;
-        separator?: string;
-        home?: {
-            container?: string;
-            content?: string;
-            link?: string;
-            icon?: string;
-            span?: string;
-        };
-        page?: {
-            container?: string;
-            content?: string;
-            link?: string;
-            span?: string;
-        };
+declare const base$7: {
+    container: string;
+    head: {
+        container: string;
+        head: string;
+        body: string;
+        heading: string;
+        paragraph: string;
     };
-    chevrons?: {
-        container?: string;
-        list?: string;
-        separator?: string;
-        home?: {
-            container?: string;
-            content?: string;
-            link?: string;
-            icon?: string;
-            span?: string;
-        };
-        page?: {
-            container?: string;
-            content?: string;
-            link?: string;
-            span?: string;
+    body: {
+        container: string;
+        wrapper: string;
+        content: string;
+        styleWrapper: string;
+        table: {
+            container: string;
+            head: {
+                container: string;
+                row: string;
+                cell: string;
+                checkbox: string;
+            };
+            body: {
+                container: string;
+                row: string;
+                cell: string;
+                checkbox: string;
+                indicator: string;
+            };
         };
     };
-    panel?: {
-        container?: string;
-        list?: string;
-        separator?: string;
-        home?: {
-            container?: string;
-            content?: string;
-            link?: string;
-            icon?: string;
-            span?: string;
-        };
-        page?: {
-            container?: string;
-            content?: string;
-            link?: string;
-            span?: string;
+    sortIndicator: {
+        container: string;
+        isSorted: string;
+        isNotSorted: string;
+        icon: {
+            container: string;
         };
     };
-    bar?: {
-        container?: string;
-        list?: string;
-        separator?: string;
-        home?: {
-            container?: string;
-            content?: string;
-            link?: string;
-            icon?: string;
-            span?: string;
+    controls: {
+        container: string;
+        content: string;
+        dropdown: {
+            container: string;
+            input: string;
+            label: string;
+            actions: string;
+            upIcon: string;
+            downIcon: string;
         };
-        page?: {
-            container?: string;
-            content?: string;
-            link?: string;
-            span?: string;
+    };
+};
+type TTableListStyles = DeepPartial$1<typeof base$7>;
+
+type TData = any;
+type TProps$6<TData> = {
+    id: string;
+    columns: ColumnDef<TData>[];
+    data: TData[];
+    page: {
+        total: number;
+    };
+    children: ({ min, max, current, }: {
+        min: number;
+        max: number;
+        current: number;
+    }) => ReactNode;
+    type?: 'normal' | 'panel' | 'full';
+    isStriped?: boolean;
+    hasStickyHeader?: boolean;
+    hasVerticalSeparators?: boolean;
+    areControlsVisible?: boolean;
+    styles?: TTableListStyles & {
+        components: {
+            buttonElement: TButtonElementStyles$1;
+            dropdownElement: TDropdownElementStyles$1;
+            panelPaginationNavigation: TPagePaginationNavigationStyles$1;
         };
     };
-};
+};
+declare const TableList: FC<TProps$6<TData>>;
 
-interface Props$5 {
+declare const base$6: {
+    container: string;
+    list: string;
+    separator: string;
+    home: {
+        container: string;
+        content: string;
+        link: string;
+        icon: string;
+        span: string;
+    };
+    page: {
+        container: string;
+        content: string;
+        link: string;
+    };
+};
+type TBreadcrumbsNavigationStyles = DeepPartial$1<typeof base$6>;
+
+type TProps$5 = {
     href: string;
     pages: {
         name: string;
@@ -255,33 +337,34 @@ interface Props$5 {
     }[];
     type?: 'slashes' | 'chevrons' | 'panel' | 'bar';
     separator?: ReactNode;
-    styles?: StylesType$5;
-}
-declare const BreadcrumbsNavigation: FC<Props$5>;
-
-type StylesType$4 = {
-    container?: string;
-    mobile?: {
-        container?: string;
-        button?: string;
+    styles?: TBreadcrumbsNavigationStyles;
+};
+declare const BreadcrumbsNavigation: FC<TProps$5>;
+
+declare const base$5: {
+    container: string;
+    mobile: {
+        container: string;
+        button: string;
     };
-    desktop?: {
-        container?: string;
-        leftButton?: string;
-        rightButton?: string;
-        navigation?: string;
+    desktop: {
+        container: string;
+        leftButton: string;
+        rightButton: string;
+        navigation: string;
     };
-    button?: {
-        default?: string;
-        active?: string;
-        disabled?: string;
+    button: {
+        default: string;
+        active: string;
+        disabled: string;
     };
-    divider?: string;
+    divider: string;
     label: string;
     icon: string;
-};
+};
+type TPanelPaginationNavigationStyles = DeepPartial$1<typeof base$5>;
 
-interface Props$4 {
+type TProps$4 = {
     min?: number;
     max: number;
     children: ({ min, max, current, }: {
@@ -289,125 +372,94 @@ interface Props$4 {
         max: number;
         current: number;
     }) => ReactNode;
-    styles?: StylesType$4;
+    styles?: TPanelPaginationNavigationStyles;
     onChange?: (current: number) => void;
-}
-declare const PanelPaginationNavigation: React.FC<Props$4>;
-
-type StylesType$3 = {
-    container?: string;
-    left?: {
-        container?: string;
-        button?: string;
-        icon?: string;
+};
+declare const PanelPaginationNavigation: React.FC<TProps$4>;
+
+declare const base$4: {
+    container: string;
+    left: {
+        container: string;
+        button: string;
+        icon: string;
     };
-    center?: {
-        container?: string;
+    center: {
+        container: string;
     };
-    right?: {
-        container?: string;
-        button?: string;
-        icon?: string;
+    right: {
+        container: string;
+        button: string;
+        icon: string;
     };
-    button?: {
-        default?: string;
-        active?: string;
-        disabled?: string;
+    button: {
+        default: string;
+        active: string;
+        disabled: string;
     };
-    divider?: string;
-};
+    divider: string;
+};
+type TPagePaginationNavigationStyles = DeepPartial$1<typeof base$4>;
 
-interface Props$3 {
+type TProps$3 = {
     min?: number;
     max: number;
-    styles?: StylesType$3;
+    styles?: TPagePaginationNavigationStyles;
     onChange?: (current: number) => void;
-}
-declare const PagePaginationNavigation: React.FC<Props$3>;
-
-type ContainerStylesType$2 = {
-    root?: string;
-    panel?: string;
-    container?: string;
-    content?: string;
 };
-type NavigationStylesType$2 = {
-    list?: string;
-};
-
-interface ContainerProps$2 {
-    children: ({ active, setActive, }: {
-        active: string;
-        setActive: Dispatch<SetStateAction<string>>;
-    }) => ReactNode;
-    styles?: ContainerStylesType$2;
-}
-interface ListProps {
-    children: ReactElement;
-    active: string;
-    setActive: Dispatch<SetStateAction<string>>;
-    styles?: NavigationStylesType$2;
-}
-interface ItemProps {
-    accessor: string;
-    href?: string;
-    type?: string;
-    children: ReactNode;
-    linkComponent?: ElementType;
-    isCurrent?: boolean;
-    isInitial?: boolean;
-    onClick?: (accessor: MouseEvent) => void;
-}
-interface FooterProps {
-    children: ReactNode | ReactNode[];
-    styles?: NavigationStylesType$2;
-}
-declare const SidebarNavigation: {
-    Container: React.FC<ContainerProps$2>;
-    List: React.FC<ListProps>;
-    Item: React.FC<ItemProps>;
-    Footer: React.FC<FooterProps>;
-};
+declare const PagePaginationNavigation: React.FC<TProps$3>;
 
-type ContainerStylesType$1 = {
+declare const base$3: {
     container: string;
+    list: {
+        container: string;
+        head: string;
+        body: string;
+        label: string;
+        select: string;
+        navigation: string;
+    };
+    tab: {
+        base: string;
+        active: string;
+        inactive: string;
+    };
 };
-type NavigationStylesType$1 = {
-    select?: string;
-    navigation?: string;
-};
+type TTabNavigationStyles = DeepPartial$1<typeof base$3>;
 
-interface ContainerProps$1 {
+type TContainerProps$1 = {
     children: ({ active, setActive, }: {
         active: string;
-        setActive: Dispatch<SetStateAction<string>>;
-    }) => ReactNode;
-    styles?: ContainerStylesType$1;
-}
-interface NavigationProps$1 {
-    children: ReactElement;
+        setActive: any;
+    }) => ReactNode | ReactNode[];
+    styles?: Pick<TTabNavigationStyles, 'container'>;
+};
+type TListProps = {
+    name: string;
+    children: ReactNode | ReactNode[];
     active: string;
-    setActive: Dispatch<SetStateAction<string>>;
-    styles?: NavigationStylesType$1;
-}
-interface NavigationItemProps$1 {
+    setActive: any;
+    styles?: Pick<TTabNavigationStyles, 'list'>;
+};
+type TNavigationItemProps$1 = {
     accessor: string;
     href?: string;
     type?: 'underline' | 'pills' | 'buttons';
     children: ReactNode;
-    linkComponent?: ElementType;
+    as?: ElementType;
     isCurrent?: boolean;
     isInitial?: boolean;
     onClick?: (accessor: MouseEvent) => void;
-}
-interface ViewProps$1 {
+    styles?: Pick<TTabNavigationStyles, 'tab'>;
+};
+type TViewProps$1 = {
     children: ReactNode;
-}
+};
 declare const TabNavigation: {
-    Container: React.FC<ContainerProps$1>;
-    List: React.FC<NavigationProps$1>;
-    Item: React.FC<NavigationItemProps$1>;
-    View: React.FC<ViewProps$1>;
+    Container: React.FC<TContainerProps$1>;
+    List: React.FC<TListProps>;
+    Item: React.FC<TNavigationItemProps$1>;
+    View: React.FC<TViewProps$1>;
 };
 
 type ContainerStylesType = {
@@ -417,70 +469,71 @@ type NavigationStylesType = {
     list?: string;
 };
 
-interface ContainerProps {
+type TContainerProps = {
     children: ({ active, setActive, }: {
         active: string;
         setActive: Dispatch<SetStateAction<string>>;
-    }) => ReactNode;
+    }) => ReactNode | ReactNode[];
     styles?: ContainerStylesType;
-}
-interface NavigationProps {
-    children: ReactElement;
+};
+type TNavigationProps = {
+    children: ReactNode | ReactNode[];
     active: string;
     setActive: Dispatch<SetStateAction<string>>;
     styles?: NavigationStylesType;
-}
-interface NavigationItemProps {
+};
+type TNavigationItemProps = {
     accessor: string;
     href?: string;
     type?: string;
-    children: ReactNode;
+    children: ReactNode | ReactNode[];
     linkComponent?: ElementType;
     isCurrent?: boolean;
     isInitial?: boolean;
     onClick?: (accessor: MouseEvent) => void;
-}
-interface ViewProps {
+};
+type TViewProps = {
     children: ReactNode;
-}
+};
 declare const VerticalNavigation: {
-    Container: React.FC<ContainerProps>;
-    List: React.FC<NavigationProps>;
-    Item: React.FC<NavigationItemProps>;
-    View: React.FC<ViewProps>;
+    Container: React.FC<TContainerProps>;
+    List: React.FC<TNavigationProps>;
+    Item: React.FC<TNavigationItemProps>;
+    View: React.FC<TViewProps>;
 };
 
-type StylesType$2 = {
-    container?: string;
-    background?: {
-        container?: string;
-        transition?: {
-            enter?: string;
-            enterFrom?: string;
-            enterTo?: string;
-            leave?: string;
-            leaveFrom?: string;
-            leaveTo?: string;
+declare const base$2: {
+    container: string;
+    background: {
+        container: string;
+        transition: {
+            enter: string;
+            enterFrom: string;
+            enterTo: string;
+            leave: string;
+            leaveFrom: string;
+            leaveTo: string;
         };
     };
-    layout?: {
-        container?: string;
-        content?: string;
+    layout: {
+        container: string;
+        content: string;
     };
-    panel?: {
-        container?: string;
-        transition?: {
-            enter?: string;
-            enterFrom?: string;
-            enterTo?: string;
-            leave?: string;
-            leaveFrom?: string;
-            leaveTo?: string;
+    panel: {
+        container: string;
+        transition: {
+            enter: string;
+            enterFrom: string;
+            enterTo: string;
+            leave: string;
+            leaveFrom: string;
+            leaveTo: string;
         };
     };
-};
+};
+type TModalOverlayStyles = DeepPartial$1<typeof base$2>;
 
-interface Props$2 {
+type TProps$2 = {
     trigger?: ({ onOpen, onClose, }: {
         onOpen: () => void;
         onClose: () => void;
@@ -490,48 +543,42 @@ interface Props$2 {
         onClose: () => void;
     }) => ReactNode;
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    styles?: StylesType$2;
-}
-declare const ModalOverlay: FC<Props$2>;
-
-type StylesType$1 = {
-    container?: {
-        outer?: string;
-        inner?: string;
+    styles?: TModalOverlayStyles;
+};
+declare const ModalOverlay: FC<TProps$2>;
+
+declare const base$1: {
+    container: {
+        outer: string;
+        inner: string;
     };
-    item?: {
-        container?: string;
-        background?: {
-            container?: string;
-            transition?: {
-                enter?: string;
-                enterFrom?: string;
-                enterTo?: string;
-                leave?: string;
-                leaveFrom?: string;
-                leaveTo?: string;
-            };
+    item: {
+        container: string;
+        layout: {
+            container: string;
+            content: string;
+            inner: string;
         };
-        layout?: {
-            container?: string;
-            content?: string;
-            inner?: string;
-        };
-        panel?: {
-            container?: string;
-            transition?: {
-                enter?: string;
-                enterFrom?: string;
-                enterTo?: string;
-                leave?: string;
-                leaveFrom?: string;
-                leaveTo?: string;
+        panel: {
+            container: string;
+            transition: {
+                enter: string;
+                enterFrom: string;
+                enterTo: string;
+                leave: string;
+                leaveFrom: string;
+                leaveTo: string;
             };
         };
     };
+};
+type TNotificationOverlayStyles = DeepPartial$1<typeof base$1>;
+
+type DeepPartial<T> = {
+    [P in keyof T]?: DeepPartial<T[P]>;
 };
 
-interface Props$1 {
+type TProps$1 = {
     trigger?: ({ onOpen, onClose, }: {
         onOpen: () => void;
         onClose: () => void;
@@ -541,48 +588,73 @@ interface Props$1 {
         onClose: () => void;
     }) => ReactNode;
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    styles?: StylesType$1;
-}
-declare const _default: {
-    Container: ({ children, styles: customStyles, }: {
-        children: React.ReactNode;
-        styles?: StylesType$1 | undefined;
+    styles?: TNotificationOverlayStyles;
+};
+declare const NotificationOverlay: {
+    Container: ({ children, styles: stylesOverrides, }: {
+        children: ReactNode;
+        styles?: DeepPartial<{
+            container: {
+                outer: string;
+                inner: string;
+            };
+            item: {
+                container: string;
+                layout: {
+                    container: string;
+                    content: string;
+                    inner: string;
+                };
+                panel: {
+                    container: string;
+                    transition: {
+                        enter: string;
+                        enterFrom: string;
+                        enterTo: string;
+                        leave: string;
+                        leaveFrom: string;
+                        leaveTo: string;
+                    };
+                };
+            };
+        }> | undefined;
     }) => JSX.Element;
-    Item: React.FC<Props$1>;
+    Item: React.FC<TProps$1>;
 };
 
-type StylesType = {
-    container?: string;
-    background?: {
-        container?: string;
-        transition?: {
-            enter?: string;
-            enterFrom?: string;
-            enterTo?: string;
-            leave?: string;
-            leaveFrom?: string;
-            leaveTo?: string;
+declare const base: {
+    container: string;
+    background: {
+        container: string;
+        transition: {
+            enter: string;
+            enterFrom: string;
+            enterTo: string;
+            leave: string;
+            leaveFrom: string;
+            leaveTo: string;
         };
     };
-    layout?: {
-        container?: string;
-        content?: string;
-        inner?: string;
+    layout: {
+        container: string;
+        content: string;
+        inner: string;
     };
-    panel?: {
-        container?: string;
-        transition?: {
-            enter?: string;
-            enterFrom?: string;
-            enterTo?: string;
-            leave?: string;
-            leaveFrom?: string;
-            leaveTo?: string;
+    panel: {
+        container: string;
+        transition: {
+            enter: string;
+            enterFrom: string;
+            enterTo: string;
+            leave: string;
+            leaveFrom: string;
+            leaveTo: string;
         };
     };
-};
+};
+type TSlideOverOverlayStyles = DeepPartial$1<typeof base>;
 
-interface Props {
+type TProps = {
     trigger?: ({ onOpen, onClose, }: {
         onOpen: () => void;
         onClose: () => void;
@@ -592,8 +664,8 @@ interface Props {
         onClose: () => void;
     }) => ReactNode;
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    styles?: StylesType;
-}
-declare const SlideOverOverlay: FC<Props>;
+    styles?: TSlideOverOverlayStyles;
+};
+declare const SlideOverOverlay: FC<TProps>;
 
-export { AvatarElement as Avatar, BadgeElement as Badge, BreadcrumbsNavigation as Breadcrumbs, ButtonElement as Button, ButtonGroupElement as ButtonGroup, ContainerLayout as Container, DividerLayout as Divider, DropdownElement as Dropdown, ListContainerLayout as ListContainer, MediaObjectLayout as MediaObject, ModalOverlay as Modal, _default as Notification, PagePaginationNavigation as PagePagination, LayoutPanel as Panel, PanelPaginationNavigation as PanelPagination, SidebarNavigation as Sidebar, SlideOverOverlay as SlideOver, TabNavigation as Tab, VerticalNavigation as Vertical };
+export { AvatarElement, BadgeElement, BreadcrumbsNavigation, ButtonElement, ButtonGroupElement, ContainerLayout, DividerLayout, DropdownElement, IconElement, InputGroupForm, ListContainerLayout, MediaObjectLayout, ModalOverlay, NotificationOverlay, PagePaginationNavigation, LayoutPanel as PanelLayout, PanelPaginationNavigation, SlideOverOverlay, TabNavigation, TableList, VerticalNavigation };