@cyber-harbour/ui 1.0.60 → 1.0.61

package/dist/index.d.ts

@@ -1,13 +1,14 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as react from 'react';
-import react__default, { SVGProps, CSSProperties as CSSProperties$1, ElementType, InputHTMLAttributes, TextareaHTMLAttributes } from 'react';
+import * as React$1 from 'react';
+import React__default, { SVGProps, CSSProperties as CSSProperties$1, ElementType, InputHTMLAttributes, TextareaHTMLAttributes } from 'react';
 import * as styled_components from 'styled-components';
 import { CSSProperties, DefaultTheme } from 'styled-components';
 import * as styled_components_dist_types from 'styled-components/dist/types';
 import { DefaultTheme as DefaultTheme$1 } from 'styled-components/dist/types';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import { PopoverPosition, PopoverAlign } from 'react-tiny-popover';
+import { IContentLoaderProps } from 'react-content-loader';
 
-declare const GlobalStyle: react.NamedExoticComponent<styled_components.ExecutionProps & object>;
+declare const GlobalStyle: React$1.NamedExoticComponent<styled_components.ExecutionProps & object>;
 
 interface ThemeProviderProps {
     children: any;
@@ -412,18 +413,35 @@ type SpaceProps = {
     px?: string | number;
     py?: string | number;
 };
-type FabricComponent<T = object> = T & SpaceProps;
 type GeneratedFabricMarginProperties = 'margin' | 'margin-top' | 'margin-right' | 'margin-bottom' | 'margin-left' | 'margin-inline' | 'margin-block' | 'padding' | 'padding-top' | 'padding-right' | 'padding-bottom' | 'padding-left' | 'padding-inline' | 'padding-block';
-declare const generatePropertySpaceStyle: (theme: DefaultTheme, property: GeneratedFabricMarginProperties, value?: string | number, ignoredOptions?: GeneratedFabricMarginProperties[]) => string;
-type FabricComponentOptions = {
+type MediaProps<T = object> = {
+    media?: {
+        [key in Breakpoint]?: Partial<T>;
+    };
+};
+type FabricStyledComponentOptions = {
     ignoreStyles?: GeneratedFabricMarginProperties[] | undefined;
 };
-declare const createComponent: <T extends object = {}>(component: React.ComponentType<T>, options?: FabricComponentOptions) => styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<T | (react.PropsWithoutRef<T> & react.RefAttributes<react.Component<T, any, any>>), T & object & SpaceProps>> & (string & (Omit<react.ComponentClass<T, any>, keyof react.Component<any, {}, any>> | Omit<react.FunctionComponent<T>, keyof react.Component<any, {}, any>>));
+type CreatedFabricComponent<T extends FabricComponent> = React__default.ComponentType<Omit<T, 'media'>> | React__default.ForwardRefExoticComponent<Omit<T, 'media'>>;
+type FabricComponent<T = object> = T & SpaceProps & MediaProps<T>;
+type StyledFabricComponent<T = object> = T & SpaceProps;
 declare const destructSpaceProps: <T extends FabricComponent>(props: T) => SpaceProps;
+declare const generatePropertySpaceStyle: (theme: DefaultTheme, property: GeneratedFabricMarginProperties, value?: string | number, ignoredOptions?: GeneratedFabricMarginProperties[]) => string;
+declare function getResponsiveProps<T = object>({ media, ...props }: T & MediaProps<T>, currentBreakpoint: Breakpoint, breakpointOrder: Breakpoint[]): Omit<T & MediaProps<T>, "media">;
+declare const createComponent: <T extends FabricComponent, R = unknown>(Component: CreatedFabricComponent<T>) => React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<FabricComponent<T>> & React__default.RefAttributes<R>>;
+declare const createStyledComponent: <T extends object = StyledFabricComponent>(component: React__default.ComponentType<T>, options?: FabricStyledComponentOptions) => styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<T | (React__default.PropsWithoutRef<T> & React__default.RefAttributes<React__default.Component<T, any, any>>), StyledFabricComponent<T>>> & (string & (Omit<React__default.ComponentClass<T, any>, keyof React__default.Component<any, {}, any>> | Omit<React__default.FunctionComponent<T>, keyof React__default.Component<any, {}, any>>));
 
 declare const useTheme: () => Theme;
 
-type BaseButtonProps = FabricComponent<{
+declare const BreakpointProvider: ({ children }: {
+    children: any;
+}) => react_jsx_runtime.JSX.Element;
+declare const useBreakpoint: () => {
+    currentBreakpoint: Breakpoint;
+    breakpointsOrder: Breakpoint[];
+};
+
+type BaseButtonProps = {
     children?: any;
     variant?: ButtonVariant;
     color?: ButtonColor;
@@ -434,9 +452,9 @@ type BaseButtonProps = FabricComponent<{
     icon?: any;
     iconPosition?: 'left' | 'right';
     iconVariant?: 'filled' | 'empty';
-}>;
-type ButtonProps = (Omit<react__default.AnchorHTMLAttributes<HTMLAnchorElement>, 'children'> | Omit<react__default.ButtonHTMLAttributes<HTMLButtonElement>, 'children'>) & BaseButtonProps;
-declare const Button: ({ children, variant, color, size, disabled, fullWidth, className, icon, iconPosition, iconVariant, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
+};
+type ButtonProps = (Omit<React__default.AnchorHTMLAttributes<HTMLAnchorElement>, 'children' | 'media'> | Omit<React__default.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'media'>) & BaseButtonProps;
+declare const Button: React__default.ForwardRefExoticComponent<FabricComponent<ButtonProps> & React__default.RefAttributes<unknown>>;
 
 interface AlertIconProps extends SVGProps<SVGSVGElement> {
     fill?: string;
@@ -754,7 +772,7 @@ interface SidebarContext {
     collapsed: boolean;
     setCollapsed: React.Dispatch<React.SetStateAction<boolean>>;
 }
-declare const SidebarContext: react.Context<SidebarContext>;
+declare const SidebarContext: React$1.Context<SidebarContext>;
 
 interface SidebarItemBase {
     active?: boolean;
@@ -794,7 +812,98 @@ type TypographyProps = FabricComponent<{
     className?: string;
     ellipsis?: boolean;
 }> & Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>;
-declare const Typography: ({ variant, element, children, weight, fontStyle, color, className, style, ellipsis, ...props }: TypographyProps) => react_jsx_runtime.JSX.Element;
+declare const Typography: React$1.ForwardRefExoticComponent<{
+    style?: CSSProperties$1;
+    variant?: TypographyVariant;
+    element?: ElementType;
+    children: any;
+    weight?: CSSProperties$1["fontWeight"];
+    fontStyle?: CSSProperties$1["fontStyle"];
+    color?: ColorVariant | string;
+    className?: string;
+    ellipsis?: boolean;
+} & {
+    m?: string | number;
+    mt?: string | number;
+    mr?: string | number;
+    mb?: string | number;
+    ml?: string | number;
+    mx?: string | number;
+    my?: string | number;
+    p?: string | number;
+    pt?: string | number;
+    pr?: string | number;
+    pb?: string | number;
+    pl?: string | number;
+    px?: string | number;
+    py?: string | number;
+} & {
+    media?: {
+        xs?: Partial<{
+            style?: CSSProperties$1;
+            variant?: TypographyVariant;
+            element?: ElementType;
+            children: any;
+            weight?: CSSProperties$1["fontWeight"];
+            fontStyle?: CSSProperties$1["fontStyle"];
+            color?: ColorVariant | string;
+            className?: string;
+            ellipsis?: boolean;
+        }> | undefined;
+        s?: Partial<{
+            style?: CSSProperties$1;
+            variant?: TypographyVariant;
+            element?: ElementType;
+            children: any;
+            weight?: CSSProperties$1["fontWeight"];
+            fontStyle?: CSSProperties$1["fontStyle"];
+            color?: ColorVariant | string;
+            className?: string;
+            ellipsis?: boolean;
+        }> | undefined;
+        m?: Partial<{
+            style?: CSSProperties$1;
+            variant?: TypographyVariant;
+            element?: ElementType;
+            children: any;
+            weight?: CSSProperties$1["fontWeight"];
+            fontStyle?: CSSProperties$1["fontStyle"];
+            color?: ColorVariant | string;
+            className?: string;
+            ellipsis?: boolean;
+        }> | undefined;
+        l?: Partial<{
+            style?: CSSProperties$1;
+            variant?: TypographyVariant;
+            element?: ElementType;
+            children: any;
+            weight?: CSSProperties$1["fontWeight"];
+            fontStyle?: CSSProperties$1["fontStyle"];
+            color?: ColorVariant | string;
+            className?: string;
+            ellipsis?: boolean;
+        }> | undefined;
+        xl?: Partial<{
+            style?: CSSProperties$1;
+            variant?: TypographyVariant;
+            element?: ElementType;
+            children: any;
+            weight?: CSSProperties$1["fontWeight"];
+            fontStyle?: CSSProperties$1["fontStyle"];
+            color?: ColorVariant | string;
+            className?: string;
+            ellipsis?: boolean;
+        }> | undefined;
+    } | undefined;
+} & Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> & {
+    media?: {
+        xs?: Partial<TypographyProps> | undefined;
+        s?: Partial<TypographyProps> | undefined;
+        m?: Partial<TypographyProps> | undefined;
+        l?: Partial<TypographyProps> | undefined;
+        xl?: Partial<TypographyProps> | undefined;
+    } | undefined;
+} & React$1.RefAttributes<unknown>>;
 
 interface ListMenuProps {
     children: any;
@@ -893,7 +1002,7 @@ declare const ContextMenu: ({ isOpen, onClickOutside, onClick, anchor, size, dis
 
 interface StyledProps {
 }
-declare const ContextMenuDelimiter: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledProps>> & string;
+declare const ContextMenuDelimiter: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledProps>> & string;
 
 declare const useContextMenuControl: () => {
     isOpen: boolean;
@@ -961,7 +1070,49 @@ type TextAreaElementProps = BaseInputProps & TextareaHTMLAttributes<HTMLTextArea
 type InputProps = InputElementProps | TextAreaElementProps;
 declare const Input: any;
 
-declare const FlexContainer: any;
+type FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
+type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
+type FlexJustify = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
+type FlexAlign = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
+type FlexGap = string | number;
+interface FlexContainerProps extends FabricComponent<Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>> {
+    children: any;
+    direction?: FlexDirection;
+    wrap?: FlexWrap;
+    justify?: FlexJustify;
+    align?: FlexAlign;
+    alignContent?: FlexAlign;
+    gap?: FlexGap;
+    rowGap?: FlexGap;
+    columnGap?: FlexGap;
+    className?: string;
+    style?: CSSProperties$1;
+    as?: any;
+}
+declare const FlexContainer: React$1.ForwardRefExoticComponent<FlexContainerProps & {
+    m?: string | number;
+    mt?: string | number;
+    mr?: string | number;
+    mb?: string | number;
+    ml?: string | number;
+    mx?: string | number;
+    my?: string | number;
+    p?: string | number;
+    pt?: string | number;
+    pr?: string | number;
+    pb?: string | number;
+    pl?: string | number;
+    px?: string | number;
+    py?: string | number;
+} & {
+    media?: {
+        xs?: Partial<FlexContainerProps> | undefined;
+        s?: Partial<FlexContainerProps> | undefined;
+        m?: Partial<FlexContainerProps> | undefined;
+        l?: Partial<FlexContainerProps> | undefined;
+        xl?: Partial<FlexContainerProps> | undefined;
+    } | undefined;
+} & React$1.RefAttributes<HTMLDivElement>>;
 
 type FlexItemGrow = number;
 type FlexItemShrink = number;
@@ -978,20 +1129,43 @@ interface FlexItemProps {
     style?: CSSProperties$1;
     as?: any;
 }
-declare const FlexItem: ({ children, grow, shrink, basis, align, order, className, style, as, }: FlexItemProps) => react_jsx_runtime.JSX.Element;
-
-type BoxProps = FabricComponent<{
-    children: any;
+declare const FlexItem: React$1.ForwardRefExoticComponent<FlexItemProps & {
+    m?: string | number;
+    mt?: string | number;
+    mr?: string | number;
+    mb?: string | number;
+    ml?: string | number;
+    mx?: string | number;
+    my?: string | number;
+    p?: string | number;
+    pt?: string | number;
+    pr?: string | number;
+    pb?: string | number;
+    pl?: string | number;
+    px?: string | number;
+    py?: string | number;
+} & {
+    media?: {
+        xs?: Partial<FlexItemProps> | undefined;
+        s?: Partial<FlexItemProps> | undefined;
+        m?: Partial<FlexItemProps> | undefined;
+        l?: Partial<FlexItemProps> | undefined;
+        xl?: Partial<FlexItemProps> | undefined;
+    } | undefined;
+} & React$1.RefAttributes<unknown>>;
+
+type BoxProps = {
+    children?: any;
     element?: 'div' | 'section';
     hasBorder?: boolean;
     color?: ColorVariant | string;
-} & React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
-declare const Box: ({ children, element, hasBorder, color, ...props }: BoxProps) => react_jsx_runtime.JSX.Element;
+} & React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+declare const Box: React$1.ForwardRefExoticComponent<Omit<FabricComponent<BoxProps>, "ref"> & React$1.RefAttributes<unknown>>;
 
 type LineProps = FabricComponent<{
     direction?: 'horizontal' | 'vertical';
 } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'children'>>;
-declare const Line: ({ direction, ...props }: LineProps) => react_jsx_runtime.JSX.Element;
+declare const Line: React$1.ForwardRefExoticComponent<Omit<FabricComponent<LineProps>, "ref"> & React$1.RefAttributes<unknown>>;
 
 interface EmptyDataProps {
     children?: any;
@@ -1010,14 +1184,148 @@ type TagProps = FabricComponent<{
     disabled?: boolean;
     onClick?: () => void;
     onDelete?: () => void;
-}> & Omit<react__default.HTMLAttributes<HTMLDivElement>, 'children'>;
-declare const Tag: ({ children, variant, color, className, disabled, icon, onClick, onDelete, ...props }: TagProps) => react_jsx_runtime.JSX.Element;
+}> & Omit<React__default.HTMLAttributes<HTMLDivElement>, 'children'>;
+declare const Tag: React__default.ForwardRefExoticComponent<{
+    children?: any;
+    variant?: TagVariant;
+    color?: TagColor;
+    className?: string;
+    icon?: any;
+    disabled?: boolean;
+    onClick?: () => void;
+    onDelete?: () => void;
+} & {
+    m?: string | number;
+    mt?: string | number;
+    mr?: string | number;
+    mb?: string | number;
+    ml?: string | number;
+    mx?: string | number;
+    my?: string | number;
+    p?: string | number;
+    pt?: string | number;
+    pr?: string | number;
+    pb?: string | number;
+    pl?: string | number;
+    px?: string | number;
+    py?: string | number;
+} & {
+    media?: {
+        xs?: Partial<{
+            children?: any;
+            variant?: TagVariant;
+            color?: TagColor;
+            className?: string;
+            icon?: any;
+            disabled?: boolean;
+            onClick?: () => void;
+            onDelete?: () => void;
+        }> | undefined;
+        s?: Partial<{
+            children?: any;
+            variant?: TagVariant;
+            color?: TagColor;
+            className?: string;
+            icon?: any;
+            disabled?: boolean;
+            onClick?: () => void;
+            onDelete?: () => void;
+        }> | undefined;
+        m?: Partial<{
+            children?: any;
+            variant?: TagVariant;
+            color?: TagColor;
+            className?: string;
+            icon?: any;
+            disabled?: boolean;
+            onClick?: () => void;
+            onDelete?: () => void;
+        }> | undefined;
+        l?: Partial<{
+            children?: any;
+            variant?: TagVariant;
+            color?: TagColor;
+            className?: string;
+            icon?: any;
+            disabled?: boolean;
+            onClick?: () => void;
+            onDelete?: () => void;
+        }> | undefined;
+        xl?: Partial<{
+            children?: any;
+            variant?: TagVariant;
+            color?: TagColor;
+            className?: string;
+            icon?: any;
+            disabled?: boolean;
+            onClick?: () => void;
+            onDelete?: () => void;
+        }> | undefined;
+    } | undefined;
+} & Omit<React__default.HTMLAttributes<HTMLDivElement>, "children"> & {
+    media?: {
+        xs?: Partial<TagProps> | undefined;
+        s?: Partial<TagProps> | undefined;
+        m?: Partial<TagProps> | undefined;
+        l?: Partial<TagProps> | undefined;
+        xl?: Partial<TagProps> | undefined;
+    } | undefined;
+} & React__default.RefAttributes<unknown>>;
 
 type AlertProps = FabricComponent<{
     title?: any;
     note?: any;
-}> & Omit<react__default.HTMLAttributes<HTMLDivElement>, 'children'>;
-declare const Alert: ({ title, note, ...props }: AlertProps) => react_jsx_runtime.JSX.Element;
+}> & Omit<React__default.HTMLAttributes<HTMLDivElement>, 'children'>;
+declare const Alert: React__default.ForwardRefExoticComponent<{
+    title?: any;
+    note?: any;
+} & {
+    m?: string | number;
+    mt?: string | number;
+    mr?: string | number;
+    mb?: string | number;
+    ml?: string | number;
+    mx?: string | number;
+    my?: string | number;
+    p?: string | number;
+    pt?: string | number;
+    pr?: string | number;
+    pb?: string | number;
+    pl?: string | number;
+    px?: string | number;
+    py?: string | number;
+} & {
+    media?: {
+        xs?: Partial<{
+            title?: any;
+            note?: any;
+        }> | undefined;
+        s?: Partial<{
+            title?: any;
+            note?: any;
+        }> | undefined;
+        m?: Partial<{
+            title?: any;
+            note?: any;
+        }> | undefined;
+        l?: Partial<{
+            title?: any;
+            note?: any;
+        }> | undefined;
+        xl?: Partial<{
+            title?: any;
+            note?: any;
+        }> | undefined;
+    } | undefined;
+} & Omit<React__default.HTMLAttributes<HTMLDivElement>, "children"> & {
+    media?: {
+        xs?: Partial<AlertProps> | undefined;
+        s?: Partial<AlertProps> | undefined;
+        m?: Partial<AlertProps> | undefined;
+        l?: Partial<AlertProps> | undefined;
+        xl?: Partial<AlertProps> | undefined;
+    } | undefined;
+} & React__default.RefAttributes<unknown>>;
 
 type LabelProps = FabricComponent<{
     label?: any;
@@ -1026,32 +1334,88 @@ type LabelProps = FabricComponent<{
     size?: LabelSize;
     children: any;
     fullWidth?: boolean;
-}> & Omit<react__default.LabelHTMLAttributes<HTMLLabelElement>, 'children'> & (LabelDirection | LabelDirectionRaw);
+}> & Omit<React__default.LabelHTMLAttributes<HTMLLabelElement>, 'children'> & (LabelDirection | LabelDirectionRaw);
 type LabelDirectionRaw = {
     direction?: 'row' | 'row-reverse';
     childrenWidth?: number | string;
 };
 type LabelDirection = {
-    direction?: Omit<react__default.CSSProperties['flexDirection'], 'row' | 'row-reverse'>;
+    direction?: Omit<React__default.CSSProperties['flexDirection'], 'row' | 'row-reverse'>;
 };
-declare const Label: ({ label, helpText, children, direction, size, errorText, fullWidth, ...props }: LabelProps) => react_jsx_runtime.JSX.Element;
+declare const Label: React__default.ForwardRefExoticComponent<FabricComponent<LabelProps> & React__default.RefAttributes<unknown>>;
 
-type CheckboxProps = FabricComponent<{
+type CheckboxProps = {
     label?: any;
-}> & Omit<react__default.InputHTMLAttributes<HTMLInputElement>, 'type'>;
-declare const Checkbox: ({ label, className, disabled, ...props }: CheckboxProps) => react_jsx_runtime.JSX.Element;
+} & Omit<React__default.InputHTMLAttributes<HTMLInputElement>, 'type'>;
+declare const Checkbox: React__default.ForwardRefExoticComponent<{
+    label?: any;
+} & Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "type"> & {
+    m?: string | number;
+    mt?: string | number;
+    mr?: string | number;
+    mb?: string | number;
+    ml?: string | number;
+    mx?: string | number;
+    my?: string | number;
+    p?: string | number;
+    pt?: string | number;
+    pr?: string | number;
+    pb?: string | number;
+    pl?: string | number;
+    px?: string | number;
+    py?: string | number;
+} & {
+    media?: {
+        xs?: Partial<CheckboxProps> | undefined;
+        s?: Partial<CheckboxProps> | undefined;
+        m?: Partial<CheckboxProps> | undefined;
+        l?: Partial<CheckboxProps> | undefined;
+        xl?: Partial<CheckboxProps> | undefined;
+    } | undefined;
+} & React__default.RefAttributes<unknown>>;
 
 type Direction = 'horizontal' | 'vertical';
-type LinerProgressProps = FabricComponent<{
+type LinerProgressProps = {
     height?: number;
     width?: string | number;
     direction?: Direction;
     value: number;
-} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'children'>>;
-declare const LinerProgress: ({ height, width, direction, value, ...props }: LinerProgressProps) => react_jsx_runtime.JSX.Element;
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'children'>;
+declare const LinerProgress: React$1.ForwardRefExoticComponent<Omit<FabricComponent<LinerProgressProps>, "ref"> & React$1.RefAttributes<unknown>>;
 
 type SwitchProps = FabricComponent<Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>>;
-declare const Switch: ({ className, ...props }: SwitchProps) => react_jsx_runtime.JSX.Element;
+declare const Switch: React$1.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type"> & {
+    m?: string | number;
+    mt?: string | number;
+    mr?: string | number;
+    mb?: string | number;
+    ml?: string | number;
+    mx?: string | number;
+    my?: string | number;
+    p?: string | number;
+    pt?: string | number;
+    pr?: string | number;
+    pb?: string | number;
+    pl?: string | number;
+    px?: string | number;
+    py?: string | number;
+} & {
+    media?: {
+        xs?: Partial<Omit<InputHTMLAttributes<HTMLInputElement>, "type">> | undefined;
+        s?: Partial<Omit<InputHTMLAttributes<HTMLInputElement>, "type">> | undefined;
+        m?: Partial<Omit<InputHTMLAttributes<HTMLInputElement>, "type">> | undefined;
+        l?: Partial<Omit<InputHTMLAttributes<HTMLInputElement>, "type">> | undefined;
+        xl?: Partial<Omit<InputHTMLAttributes<HTMLInputElement>, "type">> | undefined;
+    } | undefined;
+} & {
+    media?: {
+        xs?: Partial<SwitchProps> | undefined;
+        s?: Partial<SwitchProps> | undefined;
+        m?: Partial<SwitchProps> | undefined;
+        l?: Partial<SwitchProps> | undefined;
+        xl?: Partial<SwitchProps> | undefined;
+    } | undefined;
+} & React$1.RefAttributes<unknown>>;
 
 type DrawerProps = {
     isOpen: boolean;
@@ -1060,7 +1424,30 @@ type DrawerProps = {
     header?: number;
     width?: string | number;
 };
-declare const Drawer: (props: DrawerProps) => react.ReactPortal | null;
+declare const Drawer: React$1.ForwardRefExoticComponent<DrawerProps & {
+    m?: string | number;
+    mt?: string | number;
+    mr?: string | number;
+    mb?: string | number;
+    ml?: string | number;
+    mx?: string | number;
+    my?: string | number;
+    p?: string | number;
+    pt?: string | number;
+    pr?: string | number;
+    pb?: string | number;
+    pl?: string | number;
+    px?: string | number;
+    py?: string | number;
+} & {
+    media?: {
+        xs?: Partial<DrawerProps> | undefined;
+        s?: Partial<DrawerProps> | undefined;
+        m?: Partial<DrawerProps> | undefined;
+        l?: Partial<DrawerProps> | undefined;
+        xl?: Partial<DrawerProps> | undefined;
+    } | undefined;
+} & React$1.RefAttributes<unknown>>;
 declare const DrawerHeader: any;
 declare const DrawerBody: any;
 
@@ -1073,7 +1460,35 @@ interface TooltipProps {
     anchorClassName?: string;
     offset?: number;
 }
-declare const Tooltip: ({ className, positions, align, anchorClassName, content, offset, children, }: TooltipProps) => react_jsx_runtime.JSX.Element;
+declare const Tooltip: React$1.ForwardRefExoticComponent<TooltipProps & {
+    m?: string | number;
+    mt?: string | number;
+    mr?: string | number;
+    mb?: string | number;
+    ml?: string | number;
+    mx?: string | number;
+    my?: string | number;
+    p?: string | number;
+    pt?: string | number;
+    pr?: string | number;
+    pb?: string | number;
+    pl?: string | number;
+    px?: string | number;
+    py?: string | number;
+} & {
+    media?: {
+        xs?: Partial<TooltipProps> | undefined;
+        s?: Partial<TooltipProps> | undefined;
+        m?: Partial<TooltipProps> | undefined;
+        l?: Partial<TooltipProps> | undefined;
+        xl?: Partial<TooltipProps> | undefined;
+    } | undefined;
+} & React$1.RefAttributes<unknown>>;
+
+interface ContentLoaderProps extends Omit<IContentLoaderProps, 'backgroundColor' | 'foregroundColor'> {
+    children?: any;
+}
+declare const ContentLoader: (props: ContentLoaderProps) => react_jsx_runtime.JSX.Element;
 
 interface PageLayoutProps {
     header?: any;
@@ -1086,13 +1501,36 @@ interface StyledContainerProps {
     $withHeader?: boolean;
     $withSidebar?: boolean;
 }
-declare const StyledContainer: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledContainerProps>> & string;
+declare const StyledContainer: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledContainerProps>> & string;
 
-type ContainerProps = FabricComponent<{
+type ContainerProps = {
     children: any;
     maxWidth?: string | number;
-}>;
-declare const Container: ({ maxWidth, ...props }: ContainerProps) => react_jsx_runtime.JSX.Element;
+};
+declare const Container: React$1.ForwardRefExoticComponent<ContainerProps & {
+    m?: string | number;
+    mt?: string | number;
+    mr?: string | number;
+    mb?: string | number;
+    ml?: string | number;
+    mx?: string | number;
+    my?: string | number;
+    p?: string | number;
+    pt?: string | number;
+    pr?: string | number;
+    pb?: string | number;
+    pl?: string | number;
+    px?: string | number;
+    py?: string | number;
+} & {
+    media?: {
+        xs?: Partial<ContainerProps> | undefined;
+        s?: Partial<ContainerProps> | undefined;
+        m?: Partial<ContainerProps> | undefined;
+        l?: Partial<ContainerProps> | undefined;
+        xl?: Partial<ContainerProps> | undefined;
+    } | undefined;
+} & React$1.RefAttributes<unknown>>;
 
 declare const Graph2D: any;
 
@@ -1218,4 +1656,4 @@ interface FullscreenCardProps {
 }
 declare const FullscreenCard: ({ isActive, position, top, left, right, bottom, ...props }: FullscreenCardProps) => react_jsx_runtime.JSX.Element;
 
-export { type Action, Alert, AlertIcon, AndroidIcon, ApiIcon, ArrowCircleTopRightIcon, ArrowRightIcon, BallsMenu, Box, type Breakpoint, BugReportIcon, BusIcon, Button, type ButtonColor, type ButtonElementStyle, type ButtonProps, type ButtonSize, type ButtonSizeStyle, type ButtonState, type ButtonVariant, CalendarIcon, CarIcon, CheckIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseCircleIcon, ClosedLockIcon, type ColorVariant, type ColumnTable, Container, ContextMenu, ContextMenuDelimiter, CrossIcon, DataSetsIcon, DeepSearchIcon, DisabledVisibleIcon, DocsIcon, DownloadIcon, Drawer, DrawerBody, DrawerHeader, EditUserIcon, EmptyData, type EmptyDataProps, EnableVisibleIcon, EnterArrowLeftIcon, type FabricComponent, FileIcon, FiltersIcon, FlexContainer, FlexItem, FolderAlertIcon, FullscreenCard, GlobalStyle, Graph2D, type Graph2DProps, type Graph2DRef, type GraphData, type GraphState, Header, HeaderDelimeter, HeaderSection, HomepageIcon, InfoCircleFilledIcon, InfoCircleIcon, Input, type InputElementProps, type InputElementStyle, type InputProps, type InputSize, type InputSizeStyle, type InputState, type InputVariant, IosIcon, Label, type LabelSize, type LabelSizeStyle, Line, LinerProgress, type LinkObject, ListMenu, ListMenuItem, type ListMenuItemAnchorProps, type ListMenuItemBase, type ListMenuItemButtonProps, type ListMenuItemProps, type ListMenuProps, ListMenuSection, type ListMenuSectionProps, MapRadarIcon, MaximizeIcon, MicrosoftIcon, MoonIcon, type NestedColorPaths, type NodeButton, type NodeObject, OpenLockIcon, OrganizationIcon, PageLayout, Pagination, type PaginationProps, PassportIcon, PasswordFinderIcon, PencilIcon, PhonebookIcon, PlaneIcon, PlusIcon, PointIcon, PrintIcon, Profiler2Icon, ProfilerIcon, RelationIcon, RelationPointsIcon, type RenderCellProps, type RenderHeaderCellProps, RowActionsMenu, SandBoxIcon, SearchIcon, Select, ShipIcon, Sidebar, SidebarContext, SidebarDelimeter, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, type SidebarSectionProps, StatisticIcon, StyledContainer, SunIcon, Switch, type SwitchState, Table, Tag, type TagColor, type TagElementStyle, type TagVariant, type TextAreaElementProps, type Theme, type ThemeMode, ThemeProvider, Tooltip, Typography, type TypographyVariant, UnfoldIcon, UpRightArrowCircleIcon, UsersIcon, VectorIcon, WayIcon, convertPaletteToRem, createComponent, darkTheme, darkThemePx, destructSpaceProps, generatePropertySpaceStyle, getBreakpoint, getButtonSizeStyles, getButtonStyles, getInputStyles, getTypographyStyles, hexToRgba, lightTheme, lightThemePx, propToRem, pxToRem, remToPx, resolveThemeColor, useContextMenuControl, useTheme };
+export { type Action, Alert, AlertIcon, AndroidIcon, ApiIcon, ArrowCircleTopRightIcon, ArrowRightIcon, BallsMenu, Box, type Breakpoint, BreakpointProvider, BugReportIcon, BusIcon, Button, type ButtonColor, type ButtonElementStyle, type ButtonProps, type ButtonSize, type ButtonSizeStyle, type ButtonState, type ButtonVariant, CalendarIcon, CarIcon, CheckIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseCircleIcon, ClosedLockIcon, type ColorVariant, type ColumnTable, Container, ContentLoader, type ContentLoaderProps, ContextMenu, ContextMenuDelimiter, CrossIcon, DataSetsIcon, DeepSearchIcon, DisabledVisibleIcon, DocsIcon, DownloadIcon, Drawer, DrawerBody, DrawerHeader, EditUserIcon, EmptyData, type EmptyDataProps, EnableVisibleIcon, EnterArrowLeftIcon, type FabricComponent, FileIcon, FiltersIcon, FlexContainer, FlexItem, FolderAlertIcon, FullscreenCard, GlobalStyle, Graph2D, type Graph2DProps, type Graph2DRef, type GraphData, type GraphState, Header, HeaderDelimeter, HeaderSection, HomepageIcon, InfoCircleFilledIcon, InfoCircleIcon, Input, type InputElementProps, type InputElementStyle, type InputProps, type InputSize, type InputSizeStyle, type InputState, type InputVariant, IosIcon, Label, type LabelSize, type LabelSizeStyle, Line, LinerProgress, type LinkObject, ListMenu, ListMenuItem, type ListMenuItemAnchorProps, type ListMenuItemBase, type ListMenuItemButtonProps, type ListMenuItemProps, type ListMenuProps, ListMenuSection, type ListMenuSectionProps, MapRadarIcon, MaximizeIcon, MicrosoftIcon, MoonIcon, type NestedColorPaths, type NodeButton, type NodeObject, OpenLockIcon, OrganizationIcon, PageLayout, Pagination, type PaginationProps, PassportIcon, PasswordFinderIcon, PencilIcon, PhonebookIcon, PlaneIcon, PlusIcon, PointIcon, PrintIcon, Profiler2Icon, ProfilerIcon, RelationIcon, RelationPointsIcon, type RenderCellProps, type RenderHeaderCellProps, RowActionsMenu, SandBoxIcon, SearchIcon, Select, ShipIcon, Sidebar, SidebarContext, SidebarDelimeter, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, type SidebarSectionProps, StatisticIcon, StyledContainer, type StyledFabricComponent, SunIcon, Switch, type SwitchState, Table, Tag, type TagColor, type TagElementStyle, type TagVariant, type TextAreaElementProps, type Theme, type ThemeMode, ThemeProvider, Tooltip, Typography, type TypographyVariant, UnfoldIcon, UpRightArrowCircleIcon, UsersIcon, VectorIcon, WayIcon, convertPaletteToRem, createComponent, createStyledComponent, darkTheme, darkThemePx, destructSpaceProps, generatePropertySpaceStyle, getBreakpoint, getButtonSizeStyles, getButtonStyles, getInputStyles, getResponsiveProps, getTypographyStyles, hexToRgba, lightTheme, lightThemePx, propToRem, pxToRem, remToPx, resolveThemeColor, useBreakpoint, useContextMenuControl, useTheme };