@webiny/admin-ui 6.4.5-beta.0 → 6.6.0-alpha.0

package/EmptyState/EmptyState.js

@@ -0,0 +1,93 @@
+import react from "react";
+import { cn, cva, makeDecoratable } from "../utils.js";
+import { Text } from "../Text/index.js";
+import { ContentIllustration, LayoutIllustration, ListingIllustration, SelectIllustration, TableIllustration, UploadIllustration } from "./illustrations/index.js";
+const ILLUSTRATIONS = {
+    content: ContentIllustration,
+    table: TableIllustration,
+    listing: ListingIllustration,
+    layout: LayoutIllustration,
+    upload: UploadIllustration,
+    select: SelectIllustration
+};
+const emptyStateVariants = cva("w-full flex flex-col items-center justify-center text-center px-lg", {
+    variants: {
+        size: {
+            sm: "gap-md py-[56px]",
+            md: "gap-md-plus py-[80px]",
+            lg: "gap-lg py-[96px]"
+        }
+    },
+    defaultVariants: {
+        size: "md"
+    }
+});
+const ILLUSTRATION_DIMENSIONS = {
+    sm: {
+        width: 88,
+        height: 73
+    },
+    md: {
+        width: 145,
+        height: 120
+    },
+    lg: {
+        width: 181,
+        height: 150
+    }
+};
+const contentVariants = cva("flex flex-col items-center w-full text-neutral-strong [word-break:break-word]", {
+    variants: {
+        size: {
+            sm: "gap-sm",
+            md: "gap-sm",
+            lg: "gap-sm-extra"
+        }
+    },
+    defaultVariants: {
+        size: "md"
+    }
+});
+const TITLE_SIZE = {
+    sm: "lg",
+    md: "lg",
+    lg: "xl"
+};
+const DESCRIPTION_SIZE = {
+    sm: "sm",
+    md: "md",
+    lg: "md"
+};
+const DecoratableEmptyState = ({ size = "md", type = "content", title, description, illustration = true, actions, className, ...props })=>{
+    const resolvedSize = size ?? "md";
+    const Illustration = ILLUSTRATIONS[type];
+    return /*#__PURE__*/ react.createElement("div", {
+        className: cn(emptyStateVariants({
+            size: resolvedSize
+        }), className),
+        ...props
+    }, illustration ? /*#__PURE__*/ react.createElement(Illustration, {
+        className: "shrink-0",
+        width: ILLUSTRATION_DIMENSIONS[resolvedSize].width,
+        height: ILLUSTRATION_DIMENSIONS[resolvedSize].height,
+        "aria-hidden": true
+    }) : null, title || description ? /*#__PURE__*/ react.createElement("div", {
+        className: contentVariants({
+            size: resolvedSize
+        })
+    }, title ? /*#__PURE__*/ react.createElement(Text, {
+        as: "div",
+        size: TITLE_SIZE[resolvedSize],
+        className: "font-semibold max-w-[520px]"
+    }, title) : null, description ? /*#__PURE__*/ react.createElement(Text, {
+        as: "div",
+        size: DESCRIPTION_SIZE[resolvedSize],
+        className: "max-w-[600px]"
+    }, description) : null) : null, actions ? /*#__PURE__*/ react.createElement("div", {
+        className: "flex items-center justify-center gap-sm-extra"
+    }, actions) : null);
+};
+const EmptyState = makeDecoratable("EmptyState", DecoratableEmptyState);
+export { EmptyState };
+
+//# sourceMappingURL=EmptyState.js.map

package/EmptyState/EmptyState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState/EmptyState.js","sources":["../../src/EmptyState/EmptyState.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, cva, type VariantProps, makeDecoratable } from \"~/utils.js\";\nimport { Text } from \"~/Text/index.js\";\nimport {\n    ContentIllustration,\n    LayoutIllustration,\n    ListingIllustration,\n    SelectIllustration,\n    TableIllustration,\n    UploadIllustration\n} from \"./illustrations/index.js\";\n\nconst ILLUSTRATIONS = {\n    content: ContentIllustration,\n    table: TableIllustration,\n    listing: ListingIllustration,\n    layout: LayoutIllustration,\n    upload: UploadIllustration,\n    select: SelectIllustration\n};\n\ntype EmptyStateType = keyof typeof ILLUSTRATIONS;\n\nconst emptyStateVariants = cva(\n    \"w-full flex flex-col items-center justify-center text-center px-lg\",\n    {\n        variants: {\n            size: {\n                sm: \"gap-md py-[56px]\",\n                md: \"gap-md-plus py-[80px]\",\n                lg: \"gap-lg py-[96px]\"\n            }\n        },\n        defaultVariants: {\n            size: \"md\"\n        }\n    }\n);\n\n// Illustration dimensions per size. Set as explicit SVG `width`/`height` so the\n// rendered size is deterministic and doesn't depend on Tailwind generating\n// arbitrary width/height utilities for consumers.\nconst ILLUSTRATION_DIMENSIONS = {\n    sm: { width: 88, height: 73 },\n    md: { width: 145, height: 120 },\n    lg: { width: 181, height: 150 }\n} as const;\n\nconst contentVariants = cva(\n    \"flex flex-col items-center w-full text-neutral-strong [word-break:break-word]\",\n    {\n        variants: {\n            size: {\n                sm: \"gap-sm\",\n                md: \"gap-sm\",\n                lg: \"gap-sm-extra\"\n            }\n        },\n        defaultVariants: {\n            size: \"md\"\n        }\n    }\n);\n\n// The title scales up at the largest size; the description shrinks at the smallest.\nconst TITLE_SIZE = { sm: \"lg\", md: \"lg\", lg: \"xl\" } as const;\nconst DESCRIPTION_SIZE = { sm: \"sm\", md: \"md\", lg: \"md\" } as const;\n\ninterface EmptyStateProps\n    extends\n        Omit<React.HTMLAttributes<HTMLDivElement>, \"title\">,\n        VariantProps<typeof emptyStateVariants> {\n    // The illustration that best matches the empty context.\n    type?: EmptyStateType;\n    title?: React.ReactNode;\n    description?: React.ReactNode;\n    // Whether to render the illustration. Defaults to `true`.\n    illustration?: boolean;\n    // Optional call-to-action buttons, rendered below the text.\n    actions?: React.ReactNode;\n}\n\nconst DecoratableEmptyState = ({\n    size = \"md\",\n    type = \"content\",\n    title,\n    description,\n    illustration = true,\n    actions,\n    className,\n    ...props\n}: EmptyStateProps) => {\n    const resolvedSize = size ?? \"md\";\n    const Illustration = ILLUSTRATIONS[type];\n\n    return (\n        <div className={cn(emptyStateVariants({ size: resolvedSize }), className)} {...props}>\n            {illustration ? (\n                <Illustration\n                    className={\"shrink-0\"}\n                    width={ILLUSTRATION_DIMENSIONS[resolvedSize].width}\n                    height={ILLUSTRATION_DIMENSIONS[resolvedSize].height}\n                    aria-hidden={true}\n                />\n            ) : null}\n            {title || description ? (\n                <div className={contentVariants({ size: resolvedSize })}>\n                    {title ? (\n                        <Text\n                            as={\"div\"}\n                            size={TITLE_SIZE[resolvedSize]}\n                            className={\"font-semibold max-w-[520px]\"}\n                        >\n                            {title}\n                        </Text>\n                    ) : null}\n                    {description ? (\n                        <Text\n                            as={\"div\"}\n                            size={DESCRIPTION_SIZE[resolvedSize]}\n                            className={\"max-w-[600px]\"}\n                        >\n                            {description}\n                        </Text>\n                    ) : null}\n                </div>\n            ) : null}\n            {actions ? (\n                <div className={\"flex items-center justify-center gap-sm-extra\"}>{actions}</div>\n            ) : null}\n        </div>\n    );\n};\n\nconst EmptyState = makeDecoratable(\"EmptyState\", DecoratableEmptyState);\n\nexport { EmptyState, type EmptyStateProps, type EmptyStateType };\n"],"names":["ILLUSTRATIONS","ContentIllustration","TableIllustration","ListingIllustration","LayoutIllustration","UploadIllustration","SelectIllustration","emptyStateVariants","cva","ILLUSTRATION_DIMENSIONS","contentVariants","TITLE_SIZE","DESCRIPTION_SIZE","DecoratableEmptyState","size","type","title","description","illustration","actions","className","props","resolvedSize","Illustration","cn","Text","EmptyState","makeDecoratable"],"mappings":";;;;AAYA,MAAMA,gBAAgB;IAClB,SAASC;IACT,OAAOC;IACP,SAASC;IACT,QAAQC;IACR,QAAQC;IACR,QAAQC;AACZ;AAIA,MAAMC,qBAAqBC,IACvB,sEACA;IACI,UAAU;QACN,MAAM;YACF,IAAI;YACJ,IAAI;YACJ,IAAI;QACR;IACJ;IACA,iBAAiB;QACb,MAAM;IACV;AACJ;AAMJ,MAAMC,0BAA0B;IAC5B,IAAI;QAAE,OAAO;QAAI,QAAQ;IAAG;IAC5B,IAAI;QAAE,OAAO;QAAK,QAAQ;IAAI;IAC9B,IAAI;QAAE,OAAO;QAAK,QAAQ;IAAI;AAClC;AAEA,MAAMC,kBAAkBF,IACpB,iFACA;IACI,UAAU;QACN,MAAM;YACF,IAAI;YACJ,IAAI;YACJ,IAAI;QACR;IACJ;IACA,iBAAiB;QACb,MAAM;IACV;AACJ;AAIJ,MAAMG,aAAa;IAAE,IAAI;IAAM,IAAI;IAAM,IAAI;AAAK;AAClD,MAAMC,mBAAmB;IAAE,IAAI;IAAM,IAAI;IAAM,IAAI;AAAK;AAgBxD,MAAMC,wBAAwB,CAAC,EAC3BC,OAAO,IAAI,EACXC,OAAO,SAAS,EAChBC,KAAK,EACLC,WAAW,EACXC,eAAe,IAAI,EACnBC,OAAO,EACPC,SAAS,EACT,GAAGC,OACW;IACd,MAAMC,eAAeR,QAAQ;IAC7B,MAAMS,eAAevB,aAAa,CAACe,KAAK;IAExC,OAAO,WAAP,GACI,oBAAC;QAAI,WAAWS,GAAGjB,mBAAmB;YAAE,MAAMe;QAAa,IAAIF;QAAa,GAAGC,KAAK;OAC/EH,eAAe,WAAfA,GACG,oBAACK,cAAAA;QACG,WAAW;QACX,OAAOd,uBAAuB,CAACa,aAAa,CAAC,KAAK;QAClD,QAAQb,uBAAuB,CAACa,aAAa,CAAC,MAAM;QACpD,eAAa;SAEjB,MACHN,SAASC,cAAc,WAAdA,GACN,oBAAC;QAAI,WAAWP,gBAAgB;YAAE,MAAMY;QAAa;OAChDN,QAAQ,WAARA,GACG,oBAACS,MAAIA;QACD,IAAI;QACJ,MAAMd,UAAU,CAACW,aAAa;QAC9B,WAAW;OAEVN,SAEL,MACHC,cAAc,WAAdA,GACG,oBAACQ,MAAIA;QACD,IAAI;QACJ,MAAMb,gBAAgB,CAACU,aAAa;QACpC,WAAW;OAEVL,eAEL,QAER,MACHE,UAAU,WAAVA,GACG,oBAAC;QAAI,WAAW;OAAkDA,WAClE;AAGhB;AAEA,MAAMO,aAAaC,gBAAgB,cAAcd"}

package/EmptyState/EmptyState.stories.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { EmptyState } from "./EmptyState.js";
+declare const meta: Meta<typeof EmptyState>;
+export default meta;
+type Story = StoryObj<typeof EmptyState>;
+export declare const Default: Story;
+export declare const WithActions: Story;
+export declare const DescriptionOnly: Story;
+export declare const WithoutIllustration: Story;
+export declare const Small: Story;
+export declare const Large: Story;
+export declare const Types: Story;
+export declare const Documentation: Story;

package/EmptyState/EmptyState.stories.js

@@ -0,0 +1,136 @@
+import react from "react";
+import { EmptyState } from "./EmptyState.js";
+import { Button } from "../Button/index.js";
+const meta = {
+    title: "Components/EmptyState",
+    component: EmptyState,
+    parameters: {
+        layout: "padded"
+    },
+    argTypes: {
+        type: {
+            control: "select",
+            options: [
+                "content",
+                "table",
+                "listing",
+                "layout",
+                "upload",
+                "select"
+            ]
+        },
+        size: {
+            control: "select",
+            options: [
+                "sm",
+                "md",
+                "lg"
+            ]
+        },
+        illustration: {
+            control: "boolean"
+        }
+    }
+};
+const EmptyState_stories = meta;
+const Default = {
+    args: {
+        title: "Nothing to show",
+        description: "There are no entries available."
+    }
+};
+const WithActions = {
+    args: {
+        type: "upload",
+        title: "No files uploaded yet",
+        description: "Upload your first file to get started.",
+        actions: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Button, {
+            variant: "primary",
+            text: "Upload file"
+        }), /*#__PURE__*/ react.createElement(Button, {
+            variant: "secondary",
+            text: "Learn more"
+        }))
+    }
+};
+const DescriptionOnly = {
+    args: {
+        type: "table",
+        description: "There are no entries available."
+    }
+};
+const WithoutIllustration = {
+    args: {
+        illustration: false,
+        title: "Nothing to show",
+        description: "There are no entries available."
+    }
+};
+const Small = {
+    args: {
+        size: "sm",
+        type: "listing",
+        title: "Nothing to show",
+        description: "There are no entries available."
+    }
+};
+const Large = {
+    args: {
+        size: "lg",
+        type: "content",
+        title: "This is an optional title.",
+        description: "This is a description zone where you can add text as supporting content. You can also use the description zone without a title if needed."
+    }
+};
+const Types = {
+    render: ()=>/*#__PURE__*/ react.createElement("div", {
+            className: "grid grid-cols-3 gap-md"
+        }, [
+            "content",
+            "table",
+            "listing",
+            "layout",
+            "upload",
+            "select"
+        ].map((type)=>/*#__PURE__*/ react.createElement(EmptyState, {
+                key: type,
+                type: type,
+                title: type,
+                description: `Type: ${type}`
+            })))
+};
+const Documentation = {
+    args: {
+        type: "content",
+        size: "md",
+        title: "Nothing to show",
+        description: "There are no entries available."
+    },
+    argTypes: {
+        type: {
+            control: "select",
+            description: "The illustration that matches the empty context",
+            options: [
+                "content",
+                "table",
+                "listing",
+                "layout",
+                "upload",
+                "select"
+            ]
+        },
+        size: {
+            control: "select",
+            description: "The size of the empty state",
+            options: [
+                "sm",
+                "md",
+                "lg"
+            ]
+        }
+    }
+};
+export default EmptyState_stories;
+export { Default, DescriptionOnly, Documentation, Large, Small, Types, WithActions, WithoutIllustration };
+
+//# sourceMappingURL=EmptyState.stories.js.map

package/EmptyState/EmptyState.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState/EmptyState.stories.js","sources":["../../src/EmptyState/EmptyState.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { EmptyState } from \"./EmptyState.js\";\nimport { Button } from \"~/Button/index.js\";\n\nconst meta: Meta<typeof EmptyState> = {\n    title: \"Components/EmptyState\",\n    component: EmptyState,\n    parameters: {\n        layout: \"padded\"\n    },\n    argTypes: {\n        type: {\n            control: \"select\",\n            options: [\"content\", \"table\", \"listing\", \"layout\", \"upload\", \"select\"]\n        },\n        size: {\n            control: \"select\",\n            options: [\"sm\", \"md\", \"lg\"]\n        },\n        illustration: {\n            control: \"boolean\"\n        }\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof EmptyState>;\n\nexport const Default: Story = {\n    args: {\n        title: \"Nothing to show\",\n        description: \"There are no entries available.\"\n    }\n};\n\nexport const WithActions: Story = {\n    args: {\n        type: \"upload\",\n        title: \"No files uploaded yet\",\n        description: \"Upload your first file to get started.\",\n        actions: (\n            <>\n                <Button variant={\"primary\"} text={\"Upload file\"} />\n                <Button variant={\"secondary\"} text={\"Learn more\"} />\n            </>\n        )\n    }\n};\n\nexport const DescriptionOnly: Story = {\n    args: {\n        type: \"table\",\n        description: \"There are no entries available.\"\n    }\n};\n\nexport const WithoutIllustration: Story = {\n    args: {\n        illustration: false,\n        title: \"Nothing to show\",\n        description: \"There are no entries available.\"\n    }\n};\n\nexport const Small: Story = {\n    args: {\n        size: \"sm\",\n        type: \"listing\",\n        title: \"Nothing to show\",\n        description: \"There are no entries available.\"\n    }\n};\n\nexport const Large: Story = {\n    args: {\n        size: \"lg\",\n        type: \"content\",\n        title: \"This is an optional title.\",\n        description:\n            \"This is a description zone where you can add text as supporting content. You can also use the description zone without a title if needed.\"\n    }\n};\n\nexport const Types: Story = {\n    render: () => (\n        <div className={\"grid grid-cols-3 gap-md\"}>\n            {([\"content\", \"table\", \"listing\", \"layout\", \"upload\", \"select\"] as const).map(type => (\n                <EmptyState key={type} type={type} title={type} description={`Type: ${type}`} />\n            ))}\n        </div>\n    )\n};\n\nexport const Documentation: Story = {\n    args: {\n        type: \"content\",\n        size: \"md\",\n        title: \"Nothing to show\",\n        description: \"There are no entries available.\"\n    },\n    argTypes: {\n        type: {\n            control: \"select\",\n            description: \"The illustration that matches the empty context\",\n            options: [\"content\", \"table\", \"listing\", \"layout\", \"upload\", \"select\"]\n        },\n        size: {\n            control: \"select\",\n            description: \"The size of the empty state\",\n            options: [\"sm\", \"md\", \"lg\"]\n        }\n    }\n};\n"],"names":["meta","EmptyState","Default","WithActions","Button","DescriptionOnly","WithoutIllustration","Small","Large","Types","type","Documentation"],"mappings":";;;AAKA,MAAMA,OAAgC;IAClC,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;IACA,UAAU;QACN,MAAM;YACF,SAAS;YACT,SAAS;gBAAC;gBAAW;gBAAS;gBAAW;gBAAU;gBAAU;aAAS;QAC1E;QACA,MAAM;YACF,SAAS;YACT,SAAS;gBAAC;gBAAM;gBAAM;aAAK;QAC/B;QACA,cAAc;YACV,SAAS;QACb;IACJ;AACJ;AAEA,2BAAeD;AAIR,MAAME,UAAiB;IAC1B,MAAM;QACF,OAAO;QACP,aAAa;IACjB;AACJ;AAEO,MAAMC,cAAqB;IAC9B,MAAM;QACF,MAAM;QACN,OAAO;QACP,aAAa;QACb,SAAS,WAAT,GACI,wDACI,oBAACC,QAAMA;YAAC,SAAS;YAAW,MAAM;0BAClC,oBAACA,QAAMA;YAAC,SAAS;YAAa,MAAM;;IAGhD;AACJ;AAEO,MAAMC,kBAAyB;IAClC,MAAM;QACF,MAAM;QACN,aAAa;IACjB;AACJ;AAEO,MAAMC,sBAA6B;IACtC,MAAM;QACF,cAAc;QACd,OAAO;QACP,aAAa;IACjB;AACJ;AAEO,MAAMC,QAAe;IACxB,MAAM;QACF,MAAM;QACN,MAAM;QACN,OAAO;QACP,aAAa;IACjB;AACJ;AAEO,MAAMC,QAAe;IACxB,MAAM;QACF,MAAM;QACN,MAAM;QACN,OAAO;QACP,aACI;IACR;AACJ;AAEO,MAAMC,QAAe;IACxB,QAAQ,kBACJ,oBAAC;YAAI,WAAW;WACV;YAAC;YAAW;YAAS;YAAW;YAAU;YAAU;SAAS,CAAW,GAAG,CAACC,CAAAA,OAAAA,WAAAA,GAC1E,oBAACT,YAAUA;gBAAC,KAAKS;gBAAM,MAAMA;gBAAM,OAAOA;gBAAM,aAAa,CAAC,MAAM,EAAEA,MAAM;;AAI5F;AAEO,MAAMC,gBAAuB;IAChC,MAAM;QACF,MAAM;QACN,MAAM;QACN,OAAO;QACP,aAAa;IACjB;IACA,UAAU;QACN,MAAM;YACF,SAAS;YACT,aAAa;YACb,SAAS;gBAAC;gBAAW;gBAAS;gBAAW;gBAAU;gBAAU;aAAS;QAC1E;QACA,MAAM;YACF,SAAS;YACT,aAAa;YACb,SAAS;gBAAC;gBAAM;gBAAM;aAAK;QAC/B;IACJ;AACJ"}

package/EmptyState/illustrations/ContentIllustration.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const ContentIllustration: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;

package/EmptyState/illustrations/ContentIllustration.js

@@ -0,0 +1,100 @@
+import react from "react";
+const ContentIllustration = (props)=>/*#__PURE__*/ react.createElement("svg", {
+        viewBox: "0 0 145 120",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        ...props
+    }, /*#__PURE__*/ react.createElement("g", null, /*#__PURE__*/ react.createElement("g", null, /*#__PURE__*/ react.createElement("g", {
+        filter: "url(#es_content_filter0_d_6795_48832)"
+    }, /*#__PURE__*/ react.createElement("path", {
+        d: "M9.83984 16.4212C9.83984 12.0029 13.4216 8.42117 17.8398 8.42117H126.84C131.258 8.42117 134.84 12.0029 134.84 16.4212V100.421C134.84 104.839 131.258 108.421 126.84 108.421H17.8398C13.4216 108.421 9.83984 104.839 9.83984 100.421V16.4212Z",
+        fill: "white"
+    })), /*#__PURE__*/ react.createElement("ellipse", {
+        cx: "20.7858",
+        cy: "18.8146",
+        rx: "2.47525",
+        ry: "2.5",
+        fill: "#FA5723"
+    }), /*#__PURE__*/ react.createElement("ellipse", {
+        cx: "28.8302",
+        cy: "18.8146",
+        rx: "2.47525",
+        ry: "2.5",
+        fill: "#FA5723"
+    }), /*#__PURE__*/ react.createElement("ellipse", {
+        cx: "37.4933",
+        cy: "18.8146",
+        rx: "2.47525",
+        ry: "2.5",
+        fill: "#FA5723"
+    }), /*#__PURE__*/ react.createElement("rect", {
+        x: "42.1426",
+        y: "37.7204",
+        width: "58.1833",
+        height: "7.25383",
+        rx: "1.71",
+        fill: "#F0F1F3"
+    }), /*#__PURE__*/ react.createElement("rect", {
+        x: "42.1426",
+        y: "59.7589",
+        width: "58.1833",
+        height: "7.25383",
+        rx: "1.71",
+        fill: "#F0F1F3"
+    }), /*#__PURE__*/ react.createElement("rect", {
+        x: "42.1426",
+        y: "48.498",
+        width: "58.1833",
+        height: "7.73742",
+        rx: "1.71",
+        fill: "#F0F1F3"
+    }), /*#__PURE__*/ react.createElement("rect", {
+        x: "42.1426",
+        y: "70.5364",
+        width: "58.1833",
+        height: "7.73742",
+        rx: "1.71",
+        fill: "#F0F1F3"
+    }), /*#__PURE__*/ react.createElement("rect", {
+        x: "42.1426",
+        y: "81.7973",
+        width: "27.7422",
+        height: "7.73742",
+        rx: "1.71",
+        fill: "#F0F1F3"
+    }))), /*#__PURE__*/ react.createElement("defs", null, /*#__PURE__*/ react.createElement("filter", {
+        id: "es_content_filter0_d_6795_48832",
+        x: "-0.000156403",
+        y: "1.3113e-06",
+        width: "144.68",
+        height: "119.68",
+        filterUnits: "userSpaceOnUse",
+        colorInterpolationFilters: "sRGB"
+    }, /*#__PURE__*/ react.createElement("feFlood", {
+        floodOpacity: "0",
+        result: "BackgroundImageFix"
+    }), /*#__PURE__*/ react.createElement("feColorMatrix", {
+        in: "SourceAlpha",
+        type: "matrix",
+        values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
+        result: "hardAlpha"
+    }), /*#__PURE__*/ react.createElement("feOffset", {
+        dy: "1.41884"
+    }), /*#__PURE__*/ react.createElement("feGaussianBlur", {
+        stdDeviation: "4.92"
+    }), /*#__PURE__*/ react.createElement("feColorMatrix", {
+        type: "matrix",
+        values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
+    }), /*#__PURE__*/ react.createElement("feBlend", {
+        mode: "normal",
+        in2: "BackgroundImageFix",
+        result: "effect1_dropShadow_6795_48832"
+    }), /*#__PURE__*/ react.createElement("feBlend", {
+        mode: "normal",
+        in: "SourceGraphic",
+        in2: "effect1_dropShadow_6795_48832",
+        result: "shape"
+    }))));
+export { ContentIllustration };
+
+//# sourceMappingURL=ContentIllustration.js.map

package/EmptyState/illustrations/ContentIllustration.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState/illustrations/ContentIllustration.js","sources":["../../../src/EmptyState/illustrations/ContentIllustration.tsx"],"sourcesContent":["import React from \"react\";\n\nexport const ContentIllustration = (props: React.SVGProps<SVGSVGElement>) => (\n    <svg viewBox=\"0 0 145 120\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n        <g>\n            <g>\n                <g filter=\"url(#es_content_filter0_d_6795_48832)\">\n                    <path\n                        d=\"M9.83984 16.4212C9.83984 12.0029 13.4216 8.42117 17.8398 8.42117H126.84C131.258 8.42117 134.84 12.0029 134.84 16.4212V100.421C134.84 104.839 131.258 108.421 126.84 108.421H17.8398C13.4216 108.421 9.83984 104.839 9.83984 100.421V16.4212Z\"\n                        fill=\"white\"\n                    />\n                </g>\n                <ellipse cx=\"20.7858\" cy=\"18.8146\" rx=\"2.47525\" ry=\"2.5\" fill=\"#FA5723\" />\n                <ellipse cx=\"28.8302\" cy=\"18.8146\" rx=\"2.47525\" ry=\"2.5\" fill=\"#FA5723\" />\n                <ellipse cx=\"37.4933\" cy=\"18.8146\" rx=\"2.47525\" ry=\"2.5\" fill=\"#FA5723\" />\n                <rect\n                    x=\"42.1426\"\n                    y=\"37.7204\"\n                    width=\"58.1833\"\n                    height=\"7.25383\"\n                    rx=\"1.71\"\n                    fill=\"#F0F1F3\"\n                />\n                <rect\n                    x=\"42.1426\"\n                    y=\"59.7589\"\n                    width=\"58.1833\"\n                    height=\"7.25383\"\n                    rx=\"1.71\"\n                    fill=\"#F0F1F3\"\n                />\n                <rect\n                    x=\"42.1426\"\n                    y=\"48.498\"\n                    width=\"58.1833\"\n                    height=\"7.73742\"\n                    rx=\"1.71\"\n                    fill=\"#F0F1F3\"\n                />\n                <rect\n                    x=\"42.1426\"\n                    y=\"70.5364\"\n                    width=\"58.1833\"\n                    height=\"7.73742\"\n                    rx=\"1.71\"\n                    fill=\"#F0F1F3\"\n                />\n                <rect\n                    x=\"42.1426\"\n                    y=\"81.7973\"\n                    width=\"27.7422\"\n                    height=\"7.73742\"\n                    rx=\"1.71\"\n                    fill=\"#F0F1F3\"\n                />\n            </g>\n        </g>\n        <defs>\n            <filter\n                id=\"es_content_filter0_d_6795_48832\"\n                x=\"-0.000156403\"\n                y=\"1.3113e-06\"\n                width=\"144.68\"\n                height=\"119.68\"\n                filterUnits=\"userSpaceOnUse\"\n                colorInterpolationFilters=\"sRGB\"\n            >\n                <feFlood floodOpacity=\"0\" result=\"BackgroundImageFix\" />\n                <feColorMatrix\n                    in=\"SourceAlpha\"\n                    type=\"matrix\"\n                    values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n                    result=\"hardAlpha\"\n                />\n                <feOffset dy=\"1.41884\" />\n                <feGaussianBlur stdDeviation=\"4.92\" />\n                <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0\" />\n                <feBlend\n                    mode=\"normal\"\n                    in2=\"BackgroundImageFix\"\n                    result=\"effect1_dropShadow_6795_48832\"\n                />\n                <feBlend\n                    mode=\"normal\"\n                    in=\"SourceGraphic\"\n                    in2=\"effect1_dropShadow_6795_48832\"\n                    result=\"shape\"\n                />\n            </filter>\n        </defs>\n    </svg>\n);\n"],"names":["ContentIllustration","props"],"mappings":";AAEO,MAAMA,sBAAsB,CAACC,QAAAA,WAAAA,GAChC,oBAAC;QAAI,SAAQ;QAAc,MAAK;QAAO,OAAM;QAA8B,GAAGA,KAAK;qBAC/E,oBAAC,yBACG,oBAAC,yBACG,oBAAC;QAAE,QAAO;qBACN,oBAAC;QACG,GAAE;QACF,MAAK;uBAGb,oBAAC;QAAQ,IAAG;QAAU,IAAG;QAAU,IAAG;QAAU,IAAG;QAAM,MAAK;sBAC9D,oBAAC;QAAQ,IAAG;QAAU,IAAG;QAAU,IAAG;QAAU,IAAG;QAAM,MAAK;sBAC9D,oBAAC;QAAQ,IAAG;QAAU,IAAG;QAAU,IAAG;QAAU,IAAG;QAAM,MAAK;sBAC9D,oBAAC;QACG,GAAE;QACF,GAAE;QACF,OAAM;QACN,QAAO;QACP,IAAG;QACH,MAAK;sBAET,oBAAC;QACG,GAAE;QACF,GAAE;QACF,OAAM;QACN,QAAO;QACP,IAAG;QACH,MAAK;sBAET,oBAAC;QACG,GAAE;QACF,GAAE;QACF,OAAM;QACN,QAAO;QACP,IAAG;QACH,MAAK;sBAET,oBAAC;QACG,GAAE;QACF,GAAE;QACF,OAAM;QACN,QAAO;QACP,IAAG;QACH,MAAK;sBAET,oBAAC;QACG,GAAE;QACF,GAAE;QACF,OAAM;QACN,QAAO;QACP,IAAG;QACH,MAAK;wBAIjB,oBAAC,4BACG,oBAAC;QACG,IAAG;QACH,GAAE;QACF,GAAE;QACF,OAAM;QACN,QAAO;QACP,aAAY;QACZ,2BAA0B;qBAE1B,oBAAC;QAAQ,cAAa;QAAI,QAAO;sBACjC,oBAAC;QACG,IAAG;QACH,MAAK;QACL,QAAO;QACP,QAAO;sBAEX,oBAAC;QAAS,IAAG;sBACb,oBAAC;QAAe,cAAa;sBAC7B,oBAAC;QAAc,MAAK;QAAS,QAAO;sBACpC,oBAAC;QACG,MAAK;QACL,KAAI;QACJ,QAAO;sBAEX,oBAAC;QACG,MAAK;QACL,IAAG;QACH,KAAI;QACJ,QAAO"}

package/EmptyState/illustrations/LayoutIllustration.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const LayoutIllustration: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;

package/EmptyState/illustrations/LayoutIllustration.js

@@ -0,0 +1,93 @@
+import react from "react";
+const LayoutIllustration = (props)=>/*#__PURE__*/ react.createElement("svg", {
+        viewBox: "0 0 145 120",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        ...props
+    }, /*#__PURE__*/ react.createElement("g", null, /*#__PURE__*/ react.createElement("g", null, /*#__PURE__*/ react.createElement("g", null, /*#__PURE__*/ react.createElement("g", {
+        filter: "url(#es_layout_filter0_d_6795_48832)"
+    }, /*#__PURE__*/ react.createElement("path", {
+        d: "M9.83984 16.4212C9.83984 12.0029 13.4216 8.42117 17.8398 8.42117H126.84C131.258 8.42117 134.84 12.0029 134.84 16.4212V100.421C134.84 104.839 131.258 108.421 126.84 108.421H17.8398C13.4216 108.421 9.83984 104.839 9.83984 100.421V16.4212Z",
+        fill: "white"
+    })), /*#__PURE__*/ react.createElement("ellipse", {
+        cx: "20.7853",
+        cy: "18.8145",
+        rx: "2.47525",
+        ry: "2.5",
+        fill: "#FA5723"
+    }), /*#__PURE__*/ react.createElement("ellipse", {
+        cx: "28.8302",
+        cy: "18.8145",
+        rx: "2.47525",
+        ry: "2.5",
+        fill: "#FA5723"
+    }), /*#__PURE__*/ react.createElement("ellipse", {
+        cx: "37.4938",
+        cy: "18.8145",
+        rx: "2.47525",
+        ry: "2.5",
+        fill: "#FA5723"
+    })), /*#__PURE__*/ react.createElement("rect", {
+        x: "21.1948",
+        y: "32.3548",
+        width: "33.4252",
+        height: "64.5089",
+        rx: "1.9666",
+        fill: "#F0F1F3"
+    }), /*#__PURE__*/ react.createElement("rect", {
+        x: "60.4556",
+        y: "32.3548",
+        width: "62.8968",
+        height: "30.1364",
+        rx: "1.9666",
+        fill: "#F0F1F3"
+    }), /*#__PURE__*/ react.createElement("rect", {
+        x: "60.4556",
+        y: "67.1904",
+        width: "29.1788",
+        height: "29.6732",
+        rx: "1.9666",
+        fill: "#F0F1F3"
+    }), /*#__PURE__*/ react.createElement("rect", {
+        x: "94.1738",
+        y: "67.1904",
+        width: "29.1788",
+        height: "29.6732",
+        rx: "1.9666",
+        fill: "#F0F1F3"
+    }))), /*#__PURE__*/ react.createElement("defs", null, /*#__PURE__*/ react.createElement("filter", {
+        id: "es_layout_filter0_d_6795_48832",
+        x: "-0.000156403",
+        y: "8.9407e-06",
+        width: "144.68",
+        height: "119.68",
+        filterUnits: "userSpaceOnUse",
+        colorInterpolationFilters: "sRGB"
+    }, /*#__PURE__*/ react.createElement("feFlood", {
+        floodOpacity: "0",
+        result: "BackgroundImageFix"
+    }), /*#__PURE__*/ react.createElement("feColorMatrix", {
+        in: "SourceAlpha",
+        type: "matrix",
+        values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
+        result: "hardAlpha"
+    }), /*#__PURE__*/ react.createElement("feOffset", {
+        dy: "1.41884"
+    }), /*#__PURE__*/ react.createElement("feGaussianBlur", {
+        stdDeviation: "4.92"
+    }), /*#__PURE__*/ react.createElement("feColorMatrix", {
+        type: "matrix",
+        values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
+    }), /*#__PURE__*/ react.createElement("feBlend", {
+        mode: "normal",
+        in2: "BackgroundImageFix",
+        result: "effect1_dropShadow_6795_48832"
+    }), /*#__PURE__*/ react.createElement("feBlend", {
+        mode: "normal",
+        in: "SourceGraphic",
+        in2: "effect1_dropShadow_6795_48832",
+        result: "shape"
+    }))));
+export { LayoutIllustration };
+
+//# sourceMappingURL=LayoutIllustration.js.map

package/EmptyState/illustrations/LayoutIllustration.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState/illustrations/LayoutIllustration.js","sources":["../../../src/EmptyState/illustrations/LayoutIllustration.tsx"],"sourcesContent":["import React from \"react\";\n\nexport const LayoutIllustration = (props: React.SVGProps<SVGSVGElement>) => (\n    <svg viewBox=\"0 0 145 120\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n        <g>\n            <g>\n                <g>\n                    <g filter=\"url(#es_layout_filter0_d_6795_48832)\">\n                        <path\n                            d=\"M9.83984 16.4212C9.83984 12.0029 13.4216 8.42117 17.8398 8.42117H126.84C131.258 8.42117 134.84 12.0029 134.84 16.4212V100.421C134.84 104.839 131.258 108.421 126.84 108.421H17.8398C13.4216 108.421 9.83984 104.839 9.83984 100.421V16.4212Z\"\n                            fill=\"white\"\n                        />\n                    </g>\n                    <ellipse cx=\"20.7853\" cy=\"18.8145\" rx=\"2.47525\" ry=\"2.5\" fill=\"#FA5723\" />\n                    <ellipse cx=\"28.8302\" cy=\"18.8145\" rx=\"2.47525\" ry=\"2.5\" fill=\"#FA5723\" />\n                    <ellipse cx=\"37.4938\" cy=\"18.8145\" rx=\"2.47525\" ry=\"2.5\" fill=\"#FA5723\" />\n                </g>\n                <rect\n                    x=\"21.1948\"\n                    y=\"32.3548\"\n                    width=\"33.4252\"\n                    height=\"64.5089\"\n                    rx=\"1.9666\"\n                    fill=\"#F0F1F3\"\n                />\n                <rect\n                    x=\"60.4556\"\n                    y=\"32.3548\"\n                    width=\"62.8968\"\n                    height=\"30.1364\"\n                    rx=\"1.9666\"\n                    fill=\"#F0F1F3\"\n                />\n                <rect\n                    x=\"60.4556\"\n                    y=\"67.1904\"\n                    width=\"29.1788\"\n                    height=\"29.6732\"\n                    rx=\"1.9666\"\n                    fill=\"#F0F1F3\"\n                />\n                <rect\n                    x=\"94.1738\"\n                    y=\"67.1904\"\n                    width=\"29.1788\"\n                    height=\"29.6732\"\n                    rx=\"1.9666\"\n                    fill=\"#F0F1F3\"\n                />\n            </g>\n        </g>\n        <defs>\n            <filter\n                id=\"es_layout_filter0_d_6795_48832\"\n                x=\"-0.000156403\"\n                y=\"8.9407e-06\"\n                width=\"144.68\"\n                height=\"119.68\"\n                filterUnits=\"userSpaceOnUse\"\n                colorInterpolationFilters=\"sRGB\"\n            >\n                <feFlood floodOpacity=\"0\" result=\"BackgroundImageFix\" />\n                <feColorMatrix\n                    in=\"SourceAlpha\"\n                    type=\"matrix\"\n                    values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n                    result=\"hardAlpha\"\n                />\n                <feOffset dy=\"1.41884\" />\n                <feGaussianBlur stdDeviation=\"4.92\" />\n                <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0\" />\n                <feBlend\n                    mode=\"normal\"\n                    in2=\"BackgroundImageFix\"\n                    result=\"effect1_dropShadow_6795_48832\"\n                />\n                <feBlend\n                    mode=\"normal\"\n                    in=\"SourceGraphic\"\n                    in2=\"effect1_dropShadow_6795_48832\"\n                    result=\"shape\"\n                />\n            </filter>\n        </defs>\n    </svg>\n);\n"],"names":["LayoutIllustration","props"],"mappings":";AAEO,MAAMA,qBAAqB,CAACC,QAAAA,WAAAA,GAC/B,oBAAC;QAAI,SAAQ;QAAc,MAAK;QAAO,OAAM;QAA8B,GAAGA,KAAK;qBAC/E,oBAAC,yBACG,oBAAC,yBACG,oBAAC,yBACG,oBAAC;QAAE,QAAO;qBACN,oBAAC;QACG,GAAE;QACF,MAAK;uBAGb,oBAAC;QAAQ,IAAG;QAAU,IAAG;QAAU,IAAG;QAAU,IAAG;QAAM,MAAK;sBAC9D,oBAAC;QAAQ,IAAG;QAAU,IAAG;QAAU,IAAG;QAAU,IAAG;QAAM,MAAK;sBAC9D,oBAAC;QAAQ,IAAG;QAAU,IAAG;QAAU,IAAG;QAAU,IAAG;QAAM,MAAK;uBAElE,oBAAC;QACG,GAAE;QACF,GAAE;QACF,OAAM;QACN,QAAO;QACP,IAAG;QACH,MAAK;sBAET,oBAAC;QACG,GAAE;QACF,GAAE;QACF,OAAM;QACN,QAAO;QACP,IAAG;QACH,MAAK;sBAET,oBAAC;QACG,GAAE;QACF,GAAE;QACF,OAAM;QACN,QAAO;QACP,IAAG;QACH,MAAK;sBAET,oBAAC;QACG,GAAE;QACF,GAAE;QACF,OAAM;QACN,QAAO;QACP,IAAG;QACH,MAAK;wBAIjB,oBAAC,4BACG,oBAAC;QACG,IAAG;QACH,GAAE;QACF,GAAE;QACF,OAAM;QACN,QAAO;QACP,aAAY;QACZ,2BAA0B;qBAE1B,oBAAC;QAAQ,cAAa;QAAI,QAAO;sBACjC,oBAAC;QACG,IAAG;QACH,MAAK;QACL,QAAO;QACP,QAAO;sBAEX,oBAAC;QAAS,IAAG;sBACb,oBAAC;QAAe,cAAa;sBAC7B,oBAAC;QAAc,MAAK;QAAS,QAAO;sBACpC,oBAAC;QACG,MAAK;QACL,KAAI;QACJ,QAAO;sBAEX,oBAAC;QACG,MAAK;QACL,IAAG;QACH,KAAI;QACJ,QAAO"}

package/EmptyState/illustrations/ListingIllustration.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const ListingIllustration: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;

package/EmptyState/illustrations/ListingIllustration.js

@@ -0,0 +1,92 @@
+import react from "react";
+const ListingIllustration = (props)=>/*#__PURE__*/ react.createElement("svg", {
+        viewBox: "0 0 145 120",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        ...props
+    }, /*#__PURE__*/ react.createElement("g", null, /*#__PURE__*/ react.createElement("g", null, /*#__PURE__*/ react.createElement("g", null, /*#__PURE__*/ react.createElement("g", {
+        filter: "url(#es_listing_filter0_d_6795_48832)"
+    }, /*#__PURE__*/ react.createElement("path", {
+        d: "M9.83984 16.4212C9.83984 12.0029 13.4216 8.42117 17.8398 8.42117H126.84C131.258 8.42117 134.84 12.0029 134.84 16.4212V100.421C134.84 104.839 131.258 108.421 126.84 108.421H17.8398C13.4216 108.421 9.83984 104.839 9.83984 100.421V16.4212Z",
+        fill: "white"
+    })), /*#__PURE__*/ react.createElement("ellipse", {
+        cx: "20.7853",
+        cy: "18.8145",
+        rx: "2.47525",
+        ry: "2.5",
+        fill: "#FA5723"
+    }), /*#__PURE__*/ react.createElement("ellipse", {
+        cx: "28.8302",
+        cy: "18.8145",
+        rx: "2.47525",
+        ry: "2.5",
+        fill: "#FA5723"
+    }), /*#__PURE__*/ react.createElement("ellipse", {
+        cx: "37.4938",
+        cy: "18.8145",
+        rx: "2.47525",
+        ry: "2.5",
+        fill: "#FA5723"
+    }), /*#__PURE__*/ react.createElement("g", null, /*#__PURE__*/ react.createElement("path", {
+        d: "M25.6772 37.8247C25.6772 35.6156 27.4681 33.8247 29.6772 33.8247H44.2716C46.4808 33.8247 48.2716 35.6156 48.2716 37.8247V48.1318C48.2716 50.341 46.4808 52.1318 44.2716 52.1318H29.6772C27.4681 52.1318 25.6772 50.341 25.6772 48.1318V37.8247Z",
+        fill: "#F0F1F3"
+    }), /*#__PURE__*/ react.createElement("path", {
+        d: "M25.6772 61.2172C25.6772 59.0081 27.4681 57.2172 29.6772 57.2172H44.2716C46.4808 57.2172 48.2716 59.0081 48.2716 61.2172V71.5243C48.2716 73.7334 46.4808 75.5243 44.2716 75.5243H29.6772C27.4681 75.5243 25.6772 73.7334 25.6772 71.5243V61.2172Z",
+        fill: "#F0F1F3"
+    }), /*#__PURE__*/ react.createElement("path", {
+        d: "M25.6772 84.6097C25.6772 82.4006 27.4681 80.6097 29.6772 80.6097H44.2716C46.4808 80.6097 48.2716 82.4006 48.2716 84.6097V94.9169C48.2716 97.126 46.4808 98.9169 44.2716 98.9169H29.6772C27.4681 98.9169 25.6772 97.126 25.6772 94.9169V84.6097Z",
+        fill: "#F0F1F3"
+    }), /*#__PURE__*/ react.createElement("path", {
+        d: "M53.1665 38.8247C53.1665 37.7202 54.0619 36.8247 55.1665 36.8247H83.5845C84.6891 36.8247 85.5845 37.7202 85.5845 38.8247V38.893C85.5845 39.9976 84.6891 40.893 83.5845 40.893H55.1665C54.0619 40.893 53.1665 39.9976 53.1665 38.893V38.8247Z",
+        fill: "#F0F1F3"
+    }), /*#__PURE__*/ react.createElement("path", {
+        d: "M53.1665 62.2172C53.1665 61.1126 54.0619 60.2172 55.1665 60.2172H83.5845C84.6891 60.2172 85.5845 61.1126 85.5845 62.2172V62.2854C85.5845 63.39 84.6891 64.2854 83.5845 64.2854H55.1665C54.0619 64.2854 53.1665 63.39 53.1665 62.2854V62.2172Z",
+        fill: "#F0F1F3"
+    }), /*#__PURE__*/ react.createElement("path", {
+        d: "M53.1665 85.6097C53.1665 84.5051 54.0619 83.6097 55.1665 83.6097H83.5845C84.6891 83.6097 85.5845 84.5051 85.5845 85.6097V85.678C85.5845 86.7825 84.6891 87.678 83.5845 87.678H55.1665C54.0619 87.678 53.1665 86.7825 53.1665 85.678V85.6097Z",
+        fill: "#F0F1F3"
+    }), /*#__PURE__*/ react.createElement("path", {
+        d: "M53.1665 45.9444C53.1665 44.8398 54.0619 43.9444 55.1665 43.9444H116.003C117.107 43.9444 118.003 44.8398 118.003 45.9444V46.0126C118.003 47.1172 117.107 48.0126 116.003 48.0126H55.1665C54.0619 48.0126 53.1665 47.1172 53.1665 46.0126V45.9444Z",
+        fill: "#F0F1F3"
+    }), /*#__PURE__*/ react.createElement("path", {
+        d: "M53.1665 69.3366C53.1665 68.232 54.0619 67.3366 55.1665 67.3366H116.003C117.107 67.3366 118.003 68.232 118.003 69.3366V69.4048C118.003 70.5094 117.107 71.4048 116.003 71.4048H55.1665C54.0619 71.4048 53.1665 70.5094 53.1665 69.4048V69.3366Z",
+        fill: "#F0F1F3"
+    }), /*#__PURE__*/ react.createElement("path", {
+        d: "M53.1665 92.729C53.1665 91.6244 54.0619 90.729 55.1665 90.729H116.003C117.107 90.729 118.003 91.6244 118.003 92.729V92.7972C118.003 93.9018 117.107 94.7972 116.003 94.7972H55.1665C54.0619 94.7972 53.1665 93.9018 53.1665 92.7972V92.729Z",
+        fill: "#F0F1F3"
+    }))))), /*#__PURE__*/ react.createElement("defs", null, /*#__PURE__*/ react.createElement("filter", {
+        id: "es_listing_filter0_d_6795_48832",
+        x: "-0.000156403",
+        y: "8.9407e-06",
+        width: "144.68",
+        height: "119.68",
+        filterUnits: "userSpaceOnUse",
+        colorInterpolationFilters: "sRGB"
+    }, /*#__PURE__*/ react.createElement("feFlood", {
+        floodOpacity: "0",
+        result: "BackgroundImageFix"
+    }), /*#__PURE__*/ react.createElement("feColorMatrix", {
+        in: "SourceAlpha",
+        type: "matrix",
+        values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
+        result: "hardAlpha"
+    }), /*#__PURE__*/ react.createElement("feOffset", {
+        dy: "1.41884"
+    }), /*#__PURE__*/ react.createElement("feGaussianBlur", {
+        stdDeviation: "4.92"
+    }), /*#__PURE__*/ react.createElement("feColorMatrix", {
+        type: "matrix",
+        values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
+    }), /*#__PURE__*/ react.createElement("feBlend", {
+        mode: "normal",
+        in2: "BackgroundImageFix",
+        result: "effect1_dropShadow_6795_48832"
+    }), /*#__PURE__*/ react.createElement("feBlend", {
+        mode: "normal",
+        in: "SourceGraphic",
+        in2: "effect1_dropShadow_6795_48832",
+        result: "shape"
+    }))));
+export { ListingIllustration };
+
+//# sourceMappingURL=ListingIllustration.js.map

package/EmptyState/illustrations/ListingIllustration.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState/illustrations/ListingIllustration.js","sources":["../../../src/EmptyState/illustrations/ListingIllustration.tsx"],"sourcesContent":["import React from \"react\";\n\nexport const ListingIllustration = (props: React.SVGProps<SVGSVGElement>) => (\n    <svg viewBox=\"0 0 145 120\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n        <g>\n            <g>\n                <g>\n                    <g filter=\"url(#es_listing_filter0_d_6795_48832)\">\n                        <path\n                            d=\"M9.83984 16.4212C9.83984 12.0029 13.4216 8.42117 17.8398 8.42117H126.84C131.258 8.42117 134.84 12.0029 134.84 16.4212V100.421C134.84 104.839 131.258 108.421 126.84 108.421H17.8398C13.4216 108.421 9.83984 104.839 9.83984 100.421V16.4212Z\"\n                            fill=\"white\"\n                        />\n                    </g>\n                    <ellipse cx=\"20.7853\" cy=\"18.8145\" rx=\"2.47525\" ry=\"2.5\" fill=\"#FA5723\" />\n                    <ellipse cx=\"28.8302\" cy=\"18.8145\" rx=\"2.47525\" ry=\"2.5\" fill=\"#FA5723\" />\n                    <ellipse cx=\"37.4938\" cy=\"18.8145\" rx=\"2.47525\" ry=\"2.5\" fill=\"#FA5723\" />\n                    <g>\n                        <path\n                            d=\"M25.6772 37.8247C25.6772 35.6156 27.4681 33.8247 29.6772 33.8247H44.2716C46.4808 33.8247 48.2716 35.6156 48.2716 37.8247V48.1318C48.2716 50.341 46.4808 52.1318 44.2716 52.1318H29.6772C27.4681 52.1318 25.6772 50.341 25.6772 48.1318V37.8247Z\"\n                            fill=\"#F0F1F3\"\n                        />\n                        <path\n                            d=\"M25.6772 61.2172C25.6772 59.0081 27.4681 57.2172 29.6772 57.2172H44.2716C46.4808 57.2172 48.2716 59.0081 48.2716 61.2172V71.5243C48.2716 73.7334 46.4808 75.5243 44.2716 75.5243H29.6772C27.4681 75.5243 25.6772 73.7334 25.6772 71.5243V61.2172Z\"\n                            fill=\"#F0F1F3\"\n                        />\n                        <path\n                            d=\"M25.6772 84.6097C25.6772 82.4006 27.4681 80.6097 29.6772 80.6097H44.2716C46.4808 80.6097 48.2716 82.4006 48.2716 84.6097V94.9169C48.2716 97.126 46.4808 98.9169 44.2716 98.9169H29.6772C27.4681 98.9169 25.6772 97.126 25.6772 94.9169V84.6097Z\"\n                            fill=\"#F0F1F3\"\n                        />\n                        <path\n                            d=\"M53.1665 38.8247C53.1665 37.7202 54.0619 36.8247 55.1665 36.8247H83.5845C84.6891 36.8247 85.5845 37.7202 85.5845 38.8247V38.893C85.5845 39.9976 84.6891 40.893 83.5845 40.893H55.1665C54.0619 40.893 53.1665 39.9976 53.1665 38.893V38.8247Z\"\n                            fill=\"#F0F1F3\"\n                        />\n                        <path\n                            d=\"M53.1665 62.2172C53.1665 61.1126 54.0619 60.2172 55.1665 60.2172H83.5845C84.6891 60.2172 85.5845 61.1126 85.5845 62.2172V62.2854C85.5845 63.39 84.6891 64.2854 83.5845 64.2854H55.1665C54.0619 64.2854 53.1665 63.39 53.1665 62.2854V62.2172Z\"\n                            fill=\"#F0F1F3\"\n                        />\n                        <path\n                            d=\"M53.1665 85.6097C53.1665 84.5051 54.0619 83.6097 55.1665 83.6097H83.5845C84.6891 83.6097 85.5845 84.5051 85.5845 85.6097V85.678C85.5845 86.7825 84.6891 87.678 83.5845 87.678H55.1665C54.0619 87.678 53.1665 86.7825 53.1665 85.678V85.6097Z\"\n                            fill=\"#F0F1F3\"\n                        />\n                        <path\n                            d=\"M53.1665 45.9444C53.1665 44.8398 54.0619 43.9444 55.1665 43.9444H116.003C117.107 43.9444 118.003 44.8398 118.003 45.9444V46.0126C118.003 47.1172 117.107 48.0126 116.003 48.0126H55.1665C54.0619 48.0126 53.1665 47.1172 53.1665 46.0126V45.9444Z\"\n                            fill=\"#F0F1F3\"\n                        />\n                        <path\n                            d=\"M53.1665 69.3366C53.1665 68.232 54.0619 67.3366 55.1665 67.3366H116.003C117.107 67.3366 118.003 68.232 118.003 69.3366V69.4048C118.003 70.5094 117.107 71.4048 116.003 71.4048H55.1665C54.0619 71.4048 53.1665 70.5094 53.1665 69.4048V69.3366Z\"\n                            fill=\"#F0F1F3\"\n                        />\n                        <path\n                            d=\"M53.1665 92.729C53.1665 91.6244 54.0619 90.729 55.1665 90.729H116.003C117.107 90.729 118.003 91.6244 118.003 92.729V92.7972C118.003 93.9018 117.107 94.7972 116.003 94.7972H55.1665C54.0619 94.7972 53.1665 93.9018 53.1665 92.7972V92.729Z\"\n                            fill=\"#F0F1F3\"\n                        />\n                    </g>\n                </g>\n            </g>\n        </g>\n        <defs>\n            <filter\n                id=\"es_listing_filter0_d_6795_48832\"\n                x=\"-0.000156403\"\n                y=\"8.9407e-06\"\n                width=\"144.68\"\n                height=\"119.68\"\n                filterUnits=\"userSpaceOnUse\"\n                colorInterpolationFilters=\"sRGB\"\n            >\n                <feFlood floodOpacity=\"0\" result=\"BackgroundImageFix\" />\n                <feColorMatrix\n                    in=\"SourceAlpha\"\n                    type=\"matrix\"\n                    values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n                    result=\"hardAlpha\"\n                />\n                <feOffset dy=\"1.41884\" />\n                <feGaussianBlur stdDeviation=\"4.92\" />\n                <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0\" />\n                <feBlend\n                    mode=\"normal\"\n                    in2=\"BackgroundImageFix\"\n                    result=\"effect1_dropShadow_6795_48832\"\n                />\n                <feBlend\n                    mode=\"normal\"\n                    in=\"SourceGraphic\"\n                    in2=\"effect1_dropShadow_6795_48832\"\n                    result=\"shape\"\n                />\n            </filter>\n        </defs>\n    </svg>\n);\n"],"names":["ListingIllustration","props"],"mappings":";AAEO,MAAMA,sBAAsB,CAACC,QAAAA,WAAAA,GAChC,oBAAC;QAAI,SAAQ;QAAc,MAAK;QAAO,OAAM;QAA8B,GAAGA,KAAK;qBAC/E,oBAAC,yBACG,oBAAC,yBACG,oBAAC,yBACG,oBAAC;QAAE,QAAO;qBACN,oBAAC;QACG,GAAE;QACF,MAAK;uBAGb,oBAAC;QAAQ,IAAG;QAAU,IAAG;QAAU,IAAG;QAAU,IAAG;QAAM,MAAK;sBAC9D,oBAAC;QAAQ,IAAG;QAAU,IAAG;QAAU,IAAG;QAAU,IAAG;QAAM,MAAK;sBAC9D,oBAAC;QAAQ,IAAG;QAAU,IAAG;QAAU,IAAG;QAAU,IAAG;QAAM,MAAK;sBAC9D,oBAAC,yBACG,oBAAC;QACG,GAAE;QACF,MAAK;sBAET,oBAAC;QACG,GAAE;QACF,MAAK;sBAET,oBAAC;QACG,GAAE;QACF,MAAK;sBAET,oBAAC;QACG,GAAE;QACF,MAAK;sBAET,oBAAC;QACG,GAAE;QACF,MAAK;sBAET,oBAAC;QACG,GAAE;QACF,MAAK;sBAET,oBAAC;QACG,GAAE;QACF,MAAK;sBAET,oBAAC;QACG,GAAE;QACF,MAAK;sBAET,oBAAC;QACG,GAAE;QACF,MAAK;0BAMzB,oBAAC,4BACG,oBAAC;QACG,IAAG;QACH,GAAE;QACF,GAAE;QACF,OAAM;QACN,QAAO;QACP,aAAY;QACZ,2BAA0B;qBAE1B,oBAAC;QAAQ,cAAa;QAAI,QAAO;sBACjC,oBAAC;QACG,IAAG;QACH,MAAK;QACL,QAAO;QACP,QAAO;sBAEX,oBAAC;QAAS,IAAG;sBACb,oBAAC;QAAe,cAAa;sBAC7B,oBAAC;QAAc,MAAK;QAAS,QAAO;sBACpC,oBAAC;QACG,MAAK;QACL,KAAI;QACJ,QAAO;sBAEX,oBAAC;QACG,MAAK;QACL,IAAG;QACH,KAAI;QACJ,QAAO"}

package/EmptyState/illustrations/SelectIllustration.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const SelectIllustration: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;