@layers-app/shared 0.0.38 → 0.0.39

package/dist/KanbanLayout-k814Ysrn.js

@@ -0,0 +1,297 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import { Flex, Text, ActionIcon, Divider, Box, Avatar, Skeleton } from "@mantine/core";
+import "react";
+import { IconCheck, IconBug, IconSquareRotated, IconPlus, IconCalendarEvent, IconEqual } from "@tabler/icons-react";
+import "react-router-dom";
+import { randomId } from "@mantine/hooks";
+import "@tanstack/react-query";
+import "query-string";
+import "@mantine/form";
+import "@mantine/dropzone";
+import "@mantine/notifications";
+import "lodash-es";
+import { u as useOnboardingState, S as StatusBadge } from "./index-BHgJVazX.js";
+import "react-dom";
+import "draggable-ui";
+import "@mantine/modals";
+import "i18next";
+import "framer-motion";
+import "@mantine/dates";
+const column = "_column_1trmk_1";
+const card = "_card_1trmk_6";
+const styles = {
+  column,
+  card
+};
+const KanbanLayout = () => {
+  const { tasksList, statusesList } = useOnboardingState();
+  const today = /* @__PURE__ */ new Date();
+  const getPlusDays = (prop) => {
+    const plusThreeDays = new Date(today);
+    plusThreeDays.setDate(plusThreeDays.getDate() + (3 + prop));
+    return plusThreeDays.toDateString();
+  };
+  const { t } = useTranslation("onboarding");
+  const defaultTypes = [
+    {
+      id: randomId(),
+      color: "blue",
+      icon: IconCheck,
+      name: t("selectCategory.options.task"),
+      type: "task",
+      order: 1
+    },
+    {
+      id: randomId(),
+      color: "orange",
+      icon: IconBug,
+      name: t("selectCategory.options.bug"),
+      type: "bug",
+      order: 2
+    },
+    {
+      id: randomId(),
+      color: "grape",
+      icon: IconSquareRotated,
+      name: t("selectCategory.options.milestone"),
+      type: "milestone",
+      order: 3
+    }
+  ];
+  const getCurrentType = (type) => {
+    const current = defaultTypes.find((t2) => t2.type === type);
+    if (!current) return null;
+    return /* @__PURE__ */ jsx(ActionIcon, { size: 16, variant: "filled", color: current.color, children: /* @__PURE__ */ jsx(current.icon, {}) });
+  };
+  return /* @__PURE__ */ jsxs(Flex, { gap: 13, align: "start", w: "100%", children: [
+    /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        gap: 11,
+        p: 7,
+        direction: "column",
+        w: 340,
+        className: styles.column,
+        children: [
+          /* @__PURE__ */ jsxs(Flex, { w: "100%", justify: "space-between", children: [
+            /* @__PURE__ */ jsxs(Flex, { gap: 14, align: "center", children: [
+              /* @__PURE__ */ jsx(StatusBadge, { color: "#228BE6", title: statusesList[0] }),
+              /* @__PURE__ */ jsxs(Text, { c: "#868E96", fz: 14, children: [
+                "(",
+                t("defineStatuses.tasks"),
+                ": ",
+                tasksList.length,
+                ")"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(ActionIcon, { variant: "subtle", size: 18, children: /* @__PURE__ */ jsx(IconPlus, {}) })
+          ] }),
+          /* @__PURE__ */ jsx(Divider, { w: "100%" }),
+          tasksList.map((task, idx) => /* @__PURE__ */ jsxs(
+            Flex,
+            {
+              gap: 0,
+              direction: "column",
+              align: "start",
+              justify: "space-between",
+              w: "100%",
+              h: 105,
+              className: styles.card,
+              px: 14,
+              py: 9,
+              children: [
+                /* @__PURE__ */ jsxs(Box, { children: [
+                  /* @__PURE__ */ jsx(Text, { fz: 18, fw: 400, children: task.title }),
+                  /* @__PURE__ */ jsxs(Flex, { align: "center", children: [
+                    /* @__PURE__ */ jsx(IconCalendarEvent, { color: "#495057", size: 13 }),
+                    /* @__PURE__ */ jsx(Text, { fz: 16, c: "#495057", children: getPlusDays(idx) })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs(Flex, { justify: "space-between", w: "100%", children: [
+                  /* @__PURE__ */ jsxs(Flex, { children: [
+                    getCurrentType(task.type),
+                    /* @__PURE__ */ jsxs(Text, { fz: 13, children: [
+                      "DEMO-",
+                      idx + 1
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs(Flex, { children: [
+                    /* @__PURE__ */ jsx(IconEqual, { color: "#F59F00", size: 16 }),
+                    /* @__PURE__ */ jsx(
+                      Avatar,
+                      {
+                        variant: "filled",
+                        color: "#228BE6",
+                        radius: "xl",
+                        size: 24
+                      }
+                    )
+                  ] })
+                ] })
+              ]
+            },
+            task.id
+          ))
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        gap: 11,
+        p: 7,
+        direction: "column",
+        w: 340,
+        className: styles.column,
+        children: [
+          /* @__PURE__ */ jsxs(Flex, { w: "100%", justify: "space-between", children: [
+            /* @__PURE__ */ jsxs(Flex, { gap: 14, align: "center", children: [
+              /* @__PURE__ */ jsx(StatusBadge, { color: "#12B886", title: statusesList[1] }),
+              /* @__PURE__ */ jsxs(Text, { c: "#868E96", fz: 14, children: [
+                "(",
+                t("defineStatuses.tasks"),
+                ": 2)"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(ActionIcon, { variant: "subtle", size: 18, children: /* @__PURE__ */ jsx(IconPlus, {}) })
+          ] }),
+          /* @__PURE__ */ jsx(Divider, { w: "100%" }),
+          Array(2).fill(0).map((_, idx) => /* @__PURE__ */ jsxs(
+            Flex,
+            {
+              gap: 0,
+              direction: "column",
+              align: "start",
+              justify: "space-between",
+              w: "100%",
+              h: 105,
+              className: styles.card,
+              px: 14,
+              py: 9,
+              children: [
+                /* @__PURE__ */ jsxs(Box, { children: [
+                  /* @__PURE__ */ jsx(
+                    Skeleton,
+                    {
+                      animate: false,
+                      mb: 15,
+                      w: idx === 0 ? 128 : 172,
+                      h: 18
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(Flex, { align: "center", children: [
+                    /* @__PURE__ */ jsx(IconCalendarEvent, { color: "#495057", size: 13 }),
+                    /* @__PURE__ */ jsx(Skeleton, { animate: false, w: idx === 0 ? 52 : 63, h: 12 })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs(Flex, { justify: "space-between", w: "100%", children: [
+                  /* @__PURE__ */ jsxs(Flex, { children: [
+                    /* @__PURE__ */ jsx(ActionIcon, { size: 16, variant: "filled", color: "#ADB5BD", children: /* @__PURE__ */ jsx(IconCheck, {}) }),
+                    /* @__PURE__ */ jsxs(Text, { c: "#ADB5BD", fz: 13, children: [
+                      "DEMO-",
+                      idx + 4
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs(Flex, { children: [
+                    /* @__PURE__ */ jsx(IconEqual, { color: "#F59F00", size: 16 }),
+                    /* @__PURE__ */ jsx(
+                      Avatar,
+                      {
+                        variant: "filled",
+                        color: "#228BE6",
+                        radius: "xl",
+                        size: 24
+                      }
+                    )
+                  ] })
+                ] })
+              ]
+            },
+            idx
+          ))
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        gap: 11,
+        p: 7,
+        direction: "column",
+        w: 340,
+        className: styles.column,
+        children: [
+          /* @__PURE__ */ jsxs(Flex, { w: "100%", justify: "space-between", children: [
+            /* @__PURE__ */ jsxs(Flex, { gap: 14, align: "center", children: [
+              /* @__PURE__ */ jsx(StatusBadge, { color: "#FA5252", title: statusesList[2] }),
+              /* @__PURE__ */ jsxs(Text, { c: "#868E96", fz: 14, children: [
+                "(",
+                t("defineStatuses.tasks"),
+                ": 2)"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(ActionIcon, { variant: "subtle", size: 18, children: /* @__PURE__ */ jsx(IconPlus, {}) })
+          ] }),
+          /* @__PURE__ */ jsx(Divider, { w: "100%" }),
+          Array(2).fill(0).map((_, idx) => /* @__PURE__ */ jsxs(
+            Flex,
+            {
+              gap: 0,
+              direction: "column",
+              align: "start",
+              justify: "space-between",
+              w: "100%",
+              h: 105,
+              className: styles.card,
+              px: 14,
+              py: 9,
+              children: [
+                /* @__PURE__ */ jsxs(Box, { children: [
+                  /* @__PURE__ */ jsx(
+                    Skeleton,
+                    {
+                      animate: false,
+                      mb: 15,
+                      w: idx === 0 ? 266 : 150,
+                      h: 18
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(Flex, { align: "center", children: [
+                    /* @__PURE__ */ jsx(IconCalendarEvent, { color: "#495057", size: 13 }),
+                    /* @__PURE__ */ jsx(Skeleton, { animate: false, w: idx === 0 ? 72 : 46, h: 12 })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs(Flex, { justify: "space-between", w: "100%", children: [
+                  /* @__PURE__ */ jsxs(Flex, { children: [
+                    /* @__PURE__ */ jsx(ActionIcon, { size: 16, variant: "filled", color: "#ADB5BD", children: /* @__PURE__ */ jsx(IconCheck, {}) }),
+                    /* @__PURE__ */ jsxs(Text, { c: "#ADB5BD", fz: 13, children: [
+                      "DEMO-",
+                      idx + 6
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs(Flex, { children: [
+                    /* @__PURE__ */ jsx(IconEqual, { color: "#F59F00", size: 16 }),
+                    /* @__PURE__ */ jsx(
+                      Avatar,
+                      {
+                        variant: "filled",
+                        color: "#228BE6",
+                        radius: "xl",
+                        size: 24
+                      }
+                    )
+                  ] })
+                ] })
+              ]
+            },
+            idx
+          ))
+        ]
+      }
+    )
+  ] });
+};
+export {
+  KanbanLayout as default
+};

package/dist/components/AppContainer/types.d.ts

@@ -7,6 +7,8 @@ export type ToolDef = {
     icon: ReactNode;
     path: string;
     onClick?: () => void;
+    withBackButton?: boolean;
+    entityName?: string;
 };
 export type AppContainerProps = {
     content?: ReactNode;

package/dist/components/CircleColorPicker/CircleColorPicker.d.ts

@@ -0,0 +1,7 @@
+import { ColorPickerProps, MenuProps } from '@mantine/core';
+export declare const CircleColorPicker: ({ value, onChange, menuProps, colorPickerProps, }: {
+    value: string;
+    onChange: (value: string) => void;
+    menuProps?: MenuProps;
+    colorPickerProps?: ColorPickerProps;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Copyright/index.d.ts

@@ -1,9 +1,10 @@
 import { default as React } from 'react';
+import { ButtonProps } from '@mantine/core';
 interface CopyrightProps {
     className?: string;
     color?: string;
     title?: string;
-    absolute?: boolean;
+    size?: ButtonProps['size'];
 }
 export declare const Copyright: React.FC<CopyrightProps>;
 export {};

package/dist/components/EmojiPicker/EmojiPanel.d.ts

@@ -1,5 +1,5 @@
 import { EmojiPickerProps } from '../..';
-export declare const EmojiPanel: ({ locales, onChange, onClose, setRandomIcon, }: Pick<EmojiPickerProps, "locales" | "value" | "onChange"> & {
+export declare const EmojiPanel: ({ locales, onChange, onClose, setRandomIcon, querySearch, }: Pick<EmojiPickerProps, "locales" | "value" | "onChange" | "querySearch"> & {
     onClose: () => void;
     setRandomIcon: (icon: string) => void;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/components/EmojiPicker/EmojiPicker.d.ts

@@ -1,6 +1,7 @@
 import { PropsWithChildren } from 'react';
 import { FloatingPosition, PopoverProps } from '@mantine/core';
 export type EmojiPickerProps = {
+    project?: string;
     value?: string | null;
     onChange?: (v: string) => void;
     position?: FloatingPosition;
@@ -9,7 +10,14 @@ export type EmojiPickerProps = {
     showIcons?: boolean;
     showColors?: boolean;
     showEmojis?: boolean;
+    querySearch?: string;
     defaultActiveTab?: string | null;
+    /** Controls how the popover opens. 'click' preserves current behavior; 'realtime' opens only when typing matches triggerRegex. */
+    openWhen?: 'click' | 'realtime';
+    /** Regex used to detect a live trigger (default matches ":" plus at least one non-space, non-":" char). */
+    triggerRegex?: RegExp;
+    /** Monotonically increasing counter updated by the parent on each keypress; used to detect real-time typing. */
+    typingSeq?: number;
 };
 export type EmojiPickerLocales = {
     emojis?: string;
@@ -20,4 +28,4 @@ export type EmojiPickerLocales = {
     icons?: string;
     emojiCategory?: Record<string, string>;
 };
-export declare const EmojiPicker: ({ value, children, onChange, position, popoverProps, showIcons, showColors, defaultActiveTab, showEmojis, locales: _locales, }: PropsWithChildren<EmojiPickerProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const EmojiPicker: ({ project, value, querySearch, children, onChange, position, popoverProps, showIcons, showColors, defaultActiveTab, showEmojis, locales: _locales, openWhen, triggerRegex, typingSeq, }: PropsWithChildren<EmojiPickerProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/EmojiPicker/IconsPanel.d.ts

@@ -1,4 +1,4 @@
 import { EmojiPickerProps } from './EmojiPicker';
-export declare const IconsPanel: import('react').MemoExoticComponent<({ showColors, locales, onChange, value, onClose, }: Pick<EmojiPickerProps, "locales" | "showColors" | "value" | "onChange"> & {
+export declare const IconsPanel: import('react').MemoExoticComponent<({ showColors, locales, onChange, value, onClose, project, }: Pick<EmojiPickerProps, "locales" | "showColors" | "value" | "onChange" | "project"> & {
     onClose: () => void;
 }) => import("react/jsx-runtime").JSX.Element>;

package/dist/components/EmojiPicker/custom-icons/StatusCancel.d.ts

@@ -0,0 +1,2 @@
+import { SVGProps } from 'react';
+export declare const StatusCancel: ({ color, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/EmojiPicker/custom-icons/StatusDone.d.ts

@@ -0,0 +1,2 @@
+import { SVGProps } from 'react';
+export declare const StatusDone: ({ color, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/EmojiPicker/custom-icons/StatusProgress00.d.ts

@@ -0,0 +1,2 @@
+import { SVGProps } from 'react';
+export declare const StatusProgress00: ({ color, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/EmojiPicker/custom-icons/StatusProgress10.d.ts

@@ -0,0 +1,2 @@
+import { SVGProps } from 'react';
+export declare const StatusProgress10: ({ color, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/EmojiPicker/custom-icons/StatusProgress100.d.ts

@@ -0,0 +1,2 @@
+import { SVGProps } from 'react';
+export declare const StatusProgress100: ({ color, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/EmojiPicker/custom-icons/StatusProgress20.d.ts

@@ -0,0 +1,2 @@
+import { SVGProps } from 'react';
+export declare const StatusProgress20: ({ color, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/EmojiPicker/custom-icons/StatusProgress30.d.ts

@@ -0,0 +1,2 @@
+import { SVGProps } from 'react';
+export declare const StatusProgress30: ({ color, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/EmojiPicker/custom-icons/StatusProgress40.d.ts

@@ -0,0 +1,2 @@
+import { SVGProps } from 'react';
+export declare const StatusProgress40: ({ color, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/EmojiPicker/custom-icons/StatusProgress50.d.ts

@@ -0,0 +1,2 @@
+import { SVGProps } from 'react';
+export declare const StatusProgress50: ({ color, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/EmojiPicker/custom-icons/StatusProgress60.d.ts

@@ -0,0 +1,2 @@
+import { SVGProps } from 'react';
+export declare const StatusProgress60: ({ color, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/EmojiPicker/custom-icons/StatusProgress70.d.ts

@@ -0,0 +1,2 @@
+import { SVGProps } from 'react';
+export declare const StatusProgress70: ({ color, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/EmojiPicker/custom-icons/StatusProgress80.d.ts

@@ -0,0 +1,2 @@
+import { SVGProps } from 'react';
+export declare const StatusProgress80: ({ color, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/EmojiPicker/custom-icons/StatusProgress90.d.ts

@@ -0,0 +1,2 @@
+import { SVGProps } from 'react';
+export declare const StatusProgress90: ({ color, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/EmojiPicker/custom-icons/customIcons.d.ts

@@ -0,0 +1,12 @@
+import { ComponentType, SVGProps } from 'react';
+type CustomIconData = {
+    name: string;
+    component: ComponentType<SVGProps<SVGSVGElement>>;
+    category: string;
+    tags: string[];
+};
+export declare const customIconsData: CustomIconData[];
+export declare const customIcons: {
+    [k: string]: ComponentType<SVGProps<SVGSVGElement>>;
+};
+export {};

package/dist/components/EntityTitle/EntityTitle.d.ts

@@ -0,0 +1,17 @@
+declare global {
+    interface Window {
+        isTitleFocused: boolean;
+    }
+}
+export declare const EntityTitle: ({ lock, title, handleTitle, placeholder, error, isReadOnly, accessEdit, nowrap, maxLength, fw, }: {
+    title: string;
+    lock?: boolean;
+    handleTitle?: (title: string) => void;
+    placeholder?: string;
+    error?: boolean;
+    isReadOnly?: boolean;
+    accessEdit?: boolean;
+    nowrap?: boolean;
+    maxLength?: number;
+    fw?: number;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/FilePicker/FilePicker.d.ts

@@ -1,12 +1,12 @@
 import { PropsWithChildren } from 'react';
-import { FloatingPosition, PopoverProps } from '@mantine/core';
+import { FlexProps, FloatingPosition, PopoverProps } from '@mantine/core';
 import { DropzoneProps, FileWithPath } from '@mantine/dropzone';
 import { FilePickerLocales, FileType, ImagePickerGalleryCollection } from './types';
 declare const baseTabsList: readonly ["gallery", "upload", "link", "unsplash", "giphy"];
 type TabType = (typeof baseTabsList)[number];
 export type FilePickerProps = PropsWithChildren<{
     onChange?: (v: string) => void;
-    onRemove?: () => void;
+    onRemove?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     onUpload?: (files: FileWithPath[], setOpened: (state: boolean) => void) => void;
     uploading?: boolean;
     showTabs?: readonly TabType[];
@@ -22,6 +22,7 @@ export type FilePickerProps = PropsWithChildren<{
     locales?: FilePickerLocales;
     type?: FileType;
     isValidMediaUrl?: (url: string) => boolean;
+    targetProps?: FlexProps;
 }>;
-export declare const FilePicker: ({ onChange, onRemove, onUpload, uploading, showTabs, children, width, position, readOnly, hasImage, giphyToken, unsplashClientId, type, galleryCollection, isValidMediaUrl, popoverProps, dropZoneProps, locales, }: PropsWithChildren<FilePickerProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const FilePicker: ({ onChange, onRemove, onUpload, uploading, showTabs, children, width, position, readOnly, hasImage, giphyToken, unsplashClientId, type, galleryCollection, isValidMediaUrl, popoverProps, dropZoneProps, targetProps, locales, }: PropsWithChildren<FilePickerProps>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/NoData/NoData.d.ts

@@ -1,26 +1,132 @@
 import { FC, ReactNode } from 'react';
 import { ButtonProps, PolymorphicComponentProps, StackProps, TextProps, TitleProps } from '@mantine/core';
 export declare const illustrationMap: {
-    empty: FC<import('react').SVGProps<SVGSVGElement>>;
-    noAccess: FC<import('react').SVGProps<SVGSVGElement>>;
-    trash: FC<import('react').SVGProps<SVGSVGElement>>;
-    noImage: FC<import('react').SVGProps<SVGSVGElement>>;
-    noResults: FC<import('react').SVGProps<SVGSVGElement>>;
-    noTasks: FC<import('react').SVGProps<SVGSVGElement>>;
-    noComments: FC<import('react').SVGProps<SVGSVGElement>>;
-    noData: FC<import('react').SVGProps<SVGSVGElement>>;
-    emptyFolder: FC<import('react').SVGProps<SVGSVGElement>>;
-    noTaskResults: FC<import('react').SVGProps<SVGSVGElement>>;
-    noSearchResults: FC<import('react').SVGProps<SVGSVGElement>>;
-    noMembers: FC<import('react').SVGProps<SVGSVGElement>>;
-    noGroups: FC<import('react').SVGProps<SVGSVGElement>>;
-    noNotifications: FC<import('react').SVGProps<SVGSVGElement>>;
-    noWorkspaces: FC<import('react').SVGProps<SVGSVGElement>>;
-    paymentSuccess: FC<import('react').SVGProps<SVGSVGElement>>;
-    notSuccessMan: FC<import('react').SVGProps<SVGSVGElement>>;
-    alertMan: FC<import('react').SVGProps<SVGSVGElement>>;
-    '404': FC<import('react').SVGProps<SVGSVGElement>>;
-    '500': FC<import('react').SVGProps<SVGSVGElement>>;
+    empty: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+        titleId?: string;
+        desc?: string;
+        descId?: string;
+    }>;
+    noAccess: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+        titleId?: string;
+        desc?: string;
+        descId?: string;
+    }>;
+    trash: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+        titleId?: string;
+        desc?: string;
+        descId?: string;
+    }>;
+    noImage: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+        titleId?: string;
+        desc?: string;
+        descId?: string;
+    }>;
+    noResults: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+        titleId?: string;
+        desc?: string;
+        descId?: string;
+    }>;
+    noTasks: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+        titleId?: string;
+        desc?: string;
+        descId?: string;
+    }>;
+    noComments: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+        titleId?: string;
+        desc?: string;
+        descId?: string;
+    }>;
+    noData: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+        titleId?: string;
+        desc?: string;
+        descId?: string;
+    }>;
+    emptyFolder: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+        titleId?: string;
+        desc?: string;
+        descId?: string;
+    }>;
+    noTaskResults: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+        titleId?: string;
+        desc?: string;
+        descId?: string;
+    }>;
+    noSearchResults: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+        titleId?: string;
+        desc?: string;
+        descId?: string;
+    }>;
+    noMembers: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+        titleId?: string;
+        desc?: string;
+        descId?: string;
+    }>;
+    noGroups: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+        titleId?: string;
+        desc?: string;
+        descId?: string;
+    }>;
+    noNotifications: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+        titleId?: string;
+        desc?: string;
+        descId?: string;
+    }>;
+    noWorkspaces: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+        titleId?: string;
+        desc?: string;
+        descId?: string;
+    }>;
+    paymentSuccess: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+        titleId?: string;
+        desc?: string;
+        descId?: string;
+    }>;
+    notSuccessMan: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+        titleId?: string;
+        desc?: string;
+        descId?: string;
+    }>;
+    noAnswers: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+        titleId?: string;
+        desc?: string;
+        descId?: string;
+    }>;
+    alertMan: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+        titleId?: string;
+        desc?: string;
+        descId?: string;
+    }>;
+    '404': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+        titleId?: string;
+        desc?: string;
+        descId?: string;
+    }>;
+    '500': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+        titleId?: string;
+        desc?: string;
+        descId?: string;
+    }>;
 };
 export type IllustrationType = keyof typeof illustrationMap | string;
 export type NoDataProps = {
@@ -31,7 +137,8 @@ export type NoDataProps = {
     buttons?: PolymorphicComponentProps<'button', ButtonProps>[];
     illustration?: IllustrationType;
     size?: number;
-    width?: number;
-    height?: number;
+    width?: number | string;
+    height?: number | string;
+    showDots?: boolean;
 } & StackProps;
 export declare const NoData: FC<NoDataProps>;