@webiny/admin-ui 0.0.0-unstable.e6f0dc8ca7 → 0.0.0-unstable.e9333b3f0b

package/EditableTitle/EditableTitle.js

@@ -0,0 +1,73 @@
+import react, { useCallback, useState } from "react";
+import { Heading } from "../Heading/index.js";
+import { Input } from "../Input/index.js";
+import { Tooltip } from "../Tooltip/index.js";
+import { cn, makeDecoratable } from "../utils.js";
+const DecoratableEditableTitle = ({ value, onCommit, readOnly, placeholder, autoFocus = true, autoSelect = true, startContent, tooltip, isEditing: controlledEditing, onEditingChange, className, "data-testid": dataTestId })=>{
+    const isControlled = void 0 !== controlledEditing;
+    const [uncontrolledEditing, setUncontrolledEditing] = useState(false);
+    const [localValue, setLocalValue] = useState();
+    const isEditing = isControlled ? controlledEditing : uncontrolledEditing;
+    const setEditing = useCallback((editing)=>{
+        if (!isControlled) setUncontrolledEditing(editing);
+        onEditingChange?.(editing);
+    }, [
+        isControlled,
+        onEditingChange
+    ]);
+    const startEditing = useCallback(()=>{
+        setLocalValue(value);
+        setEditing(true);
+    }, [
+        value,
+        setEditing
+    ]);
+    const commit = useCallback((next)=>{
+        onCommit(next);
+        setLocalValue(void 0);
+        setEditing(false);
+    }, [
+        onCommit,
+        setEditing
+    ]);
+    const cancel = useCallback(()=>{
+        setLocalValue(void 0);
+        setEditing(false);
+    }, [
+        setEditing
+    ]);
+    const wrapper = (children)=>/*#__PURE__*/ react.createElement("div", {
+            className: cn("flex min-w-0 flex-row items-center gap-sm", className)
+        }, startContent, children);
+    if (readOnly) return wrapper(/*#__PURE__*/ react.createElement(Heading, {
+        level: 5,
+        className: "text-accent-primary truncate px-sm-extra py-xs-plus",
+        "data-testid": dataTestId
+    }, value));
+    if (isEditing) return wrapper(/*#__PURE__*/ react.createElement(Input, {
+        autoFocus: autoFocus,
+        autoSelect: autoSelect,
+        size: "md",
+        variant: "secondary",
+        placeholder: placeholder,
+        value: localValue ?? value,
+        onChange: setLocalValue,
+        onBlur: (e)=>commit(e.currentTarget.value),
+        onEnter: (e)=>commit(e.currentTarget.value),
+        onEscape: cancel
+    }));
+    const trigger = /*#__PURE__*/ react.createElement("div", {
+        onClick: startEditing,
+        "data-testid": dataTestId,
+        className: cn("font-sans text-h5 cursor-pointer truncate rounded-md", "px-[calc(var(--padding-sm-extra)-var(--border-width-sm))] py-[calc(var(--padding-xs)-var(--border-width-sm))]", "border-sm border-transparent text-accent-primary", "hover:bg-neutral-light")
+    }, value);
+    return wrapper(tooltip ? /*#__PURE__*/ react.createElement(Tooltip, {
+        side: "bottom",
+        content: tooltip,
+        trigger: trigger
+    }) : trigger);
+};
+const EditableTitle = makeDecoratable("EditableTitle", DecoratableEditableTitle);
+export { EditableTitle };
+
+//# sourceMappingURL=EditableTitle.js.map

package/EditableTitle/EditableTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditableTitle/EditableTitle.js","sources":["../../src/EditableTitle/EditableTitle.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\nimport { Heading } from \"~/Heading/index.js\";\nimport { Input } from \"~/Input/index.js\";\nimport { Tooltip } from \"~/Tooltip/index.js\";\nimport { cn, makeDecoratable } from \"~/utils.js\";\n\ninterface EditableTitleProps {\n    /**\n     * The current title value.\n     */\n    value: string;\n    /**\n     * Called with the new value when editing is committed (blur or Enter).\n     */\n    onCommit: (value: string) => void;\n    /**\n     * If true, the title is rendered as plain (non-editable) text.\n     */\n    readOnly?: boolean;\n    /**\n     * Placeholder shown in the input while editing.\n     */\n    placeholder?: string;\n    /**\n     * Focus the input when entering edit mode. Defaults to `true`.\n     */\n    autoFocus?: boolean;\n    /**\n     * Select the input's content when entering edit mode. Defaults to `true`.\n     */\n    autoSelect?: boolean;\n    /**\n     * Content rendered before the title (e.g. a language tag).\n     */\n    startContent?: React.ReactNode;\n    /**\n     * Tooltip content shown when hovering the resting title.\n     */\n    tooltip?: React.ReactNode;\n    /**\n     * Controls the editing state. When provided, the component is controlled\n     * and `onEditingChange` must be used to react to state changes.\n     */\n    isEditing?: boolean;\n    /**\n     * Called whenever the editing state should change.\n     */\n    onEditingChange?: (editing: boolean) => void;\n    className?: string;\n    \"data-testid\"?: string;\n}\n\nconst DecoratableEditableTitle = ({\n    value,\n    onCommit,\n    readOnly,\n    placeholder,\n    autoFocus = true,\n    autoSelect = true,\n    startContent,\n    tooltip,\n    isEditing: controlledEditing,\n    onEditingChange,\n    className,\n    \"data-testid\": dataTestId\n}: EditableTitleProps) => {\n    const isControlled = controlledEditing !== undefined;\n    const [uncontrolledEditing, setUncontrolledEditing] = useState(false);\n    const [localValue, setLocalValue] = useState<string | undefined>();\n\n    const isEditing = isControlled ? controlledEditing : uncontrolledEditing;\n\n    const setEditing = useCallback(\n        (editing: boolean) => {\n            if (!isControlled) {\n                setUncontrolledEditing(editing);\n            }\n            onEditingChange?.(editing);\n        },\n        [isControlled, onEditingChange]\n    );\n\n    const startEditing = useCallback(() => {\n        setLocalValue(value);\n        setEditing(true);\n    }, [value, setEditing]);\n\n    const commit = useCallback(\n        (next: string) => {\n            onCommit(next);\n            setLocalValue(undefined);\n            setEditing(false);\n        },\n        [onCommit, setEditing]\n    );\n\n    const cancel = useCallback(() => {\n        setLocalValue(undefined);\n        setEditing(false);\n    }, [setEditing]);\n\n    const wrapper = (children: React.ReactNode) => (\n        <div className={cn(\"flex min-w-0 flex-row items-center gap-sm\", className)}>\n            {startContent}\n            {children}\n        </div>\n    );\n\n    if (readOnly) {\n        return wrapper(\n            <Heading\n                level={5}\n                className={\"text-accent-primary truncate px-sm-extra py-xs-plus\"}\n                data-testid={dataTestId}\n            >\n                {value}\n            </Heading>\n        );\n    }\n\n    if (isEditing) {\n        return wrapper(\n            <Input\n                autoFocus={autoFocus}\n                autoSelect={autoSelect}\n                size={\"md\"}\n                variant={\"secondary\"}\n                placeholder={placeholder}\n                value={localValue ?? value}\n                onChange={setLocalValue}\n                onBlur={e => commit(e.currentTarget.value)}\n                onEnter={e => commit(e.currentTarget.value)}\n                onEscape={cancel}\n            />\n        );\n    }\n\n    const trigger = (\n        <div\n            onClick={startEditing}\n            data-testid={dataTestId}\n            className={cn(\n                \"font-sans text-h5 cursor-pointer truncate rounded-md\",\n                \"px-[calc(var(--padding-sm-extra)-var(--border-width-sm))] py-[calc(var(--padding-xs)-var(--border-width-sm))]\",\n                \"border-sm border-transparent text-accent-primary\",\n                \"hover:bg-neutral-light\"\n            )}\n        >\n            {value}\n        </div>\n    );\n\n    return wrapper(\n        tooltip ? <Tooltip side={\"bottom\"} content={tooltip} trigger={trigger} /> : trigger\n    );\n};\n\nconst EditableTitle = makeDecoratable(\"EditableTitle\", DecoratableEditableTitle);\n\nexport { EditableTitle, type EditableTitleProps };\n"],"names":["DecoratableEditableTitle","value","onCommit","readOnly","placeholder","autoFocus","autoSelect","startContent","tooltip","controlledEditing","onEditingChange","className","dataTestId","isControlled","undefined","uncontrolledEditing","setUncontrolledEditing","useState","localValue","setLocalValue","isEditing","setEditing","useCallback","editing","startEditing","commit","next","cancel","wrapper","children","cn","Heading","Input","e","trigger","Tooltip","EditableTitle","makeDecoratable"],"mappings":";;;;;AAoDA,MAAMA,2BAA2B,CAAC,EAC9BC,KAAK,EACLC,QAAQ,EACRC,QAAQ,EACRC,WAAW,EACXC,YAAY,IAAI,EAChBC,aAAa,IAAI,EACjBC,YAAY,EACZC,OAAO,EACP,WAAWC,iBAAiB,EAC5BC,eAAe,EACfC,SAAS,EACT,eAAeC,UAAU,EACR;IACjB,MAAMC,eAAeJ,AAAsBK,WAAtBL;IACrB,MAAM,CAACM,qBAAqBC,uBAAuB,GAAGC,SAAS;IAC/D,MAAM,CAACC,YAAYC,cAAc,GAAGF;IAEpC,MAAMG,YAAYP,eAAeJ,oBAAoBM;IAErD,MAAMM,aAAaC,YACf,CAACC;QACG,IAAI,CAACV,cACDG,uBAAuBO;QAE3Bb,kBAAkBa;IACtB,GACA;QAACV;QAAcH;KAAgB;IAGnC,MAAMc,eAAeF,YAAY;QAC7BH,cAAclB;QACdoB,WAAW;IACf,GAAG;QAACpB;QAAOoB;KAAW;IAEtB,MAAMI,SAASH,YACX,CAACI;QACGxB,SAASwB;QACTP,cAAcL;QACdO,WAAW;IACf,GACA;QAACnB;QAAUmB;KAAW;IAG1B,MAAMM,SAASL,YAAY;QACvBH,cAAcL;QACdO,WAAW;IACf,GAAG;QAACA;KAAW;IAEf,MAAMO,UAAU,CAACC,WAAAA,WAAAA,GACb,oBAAC;YAAI,WAAWC,GAAG,6CAA6CnB;WAC3DJ,cACAsB;IAIT,IAAI1B,UACA,OAAOyB,QAAQ,WAARA,GACH,oBAACG,SAAOA;QACJ,OAAO;QACP,WAAW;QACX,eAAanB;OAEZX;IAKb,IAAImB,WACA,OAAOQ,QAAQ,WAARA,GACH,oBAACI,OAAKA;QACF,WAAW3B;QACX,YAAYC;QACZ,MAAM;QACN,SAAS;QACT,aAAaF;QACb,OAAOc,cAAcjB;QACrB,UAAUkB;QACV,QAAQc,CAAAA,IAAKR,OAAOQ,EAAE,aAAa,CAAC,KAAK;QACzC,SAASA,CAAAA,IAAKR,OAAOQ,EAAE,aAAa,CAAC,KAAK;QAC1C,UAAUN;;IAKtB,MAAMO,UAAU,WAAVA,GACF,oBAAC;QACG,SAASV;QACT,eAAaZ;QACb,WAAWkB,GACP,wDACA,iHACA,oDACA;OAGH7B;IAIT,OAAO2B,QACHpB,UAAU,WAAVA,GAAU,oBAAC2B,SAAOA;QAAC,MAAM;QAAU,SAAS3B;QAAS,SAAS0B;SAAcA;AAEpF;AAEA,MAAME,gBAAgBC,gBAAgB,iBAAiBrC"}

package/EditableTitle/index.d.ts

@@ -0,0 +1 @@
+export * from "./EditableTitle.js";

package/EditableTitle/index.js

@@ -0,0 +1 @@
+export * from "./EditableTitle.js";

package/EmptyState/EmptyState.d.ts

@@ -0,0 +1,43 @@
+import React from "react";
+import { type VariantProps } from "../utils.js";
+import { ContentIllustration, LayoutIllustration, ListingIllustration, SelectIllustration, TableIllustration, UploadIllustration } from "./illustrations/index.js";
+declare const ILLUSTRATIONS: {
+    content: typeof ContentIllustration;
+    table: typeof TableIllustration;
+    listing: typeof ListingIllustration;
+    layout: typeof LayoutIllustration;
+    upload: typeof UploadIllustration;
+    select: typeof SelectIllustration;
+};
+type EmptyStateType = keyof typeof ILLUSTRATIONS;
+declare const emptyStateVariants: (props?: ({
+    size?: "lg" | "md" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof emptyStateVariants> {
+    type?: EmptyStateType;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    illustration?: boolean;
+    actions?: React.ReactNode;
+}
+declare const DecoratableEmptyState: ({ size, type, title, description, illustration, actions, className, ...props }: EmptyStateProps) => React.JSX.Element;
+declare const EmptyState: typeof DecoratableEmptyState & {
+    original: typeof DecoratableEmptyState;
+    originalName: string;
+    displayName: string;
+} & {
+    original: typeof DecoratableEmptyState & {
+        original: typeof DecoratableEmptyState;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableEmptyState & {
+        original: typeof DecoratableEmptyState;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export { EmptyState, type EmptyStateProps, type EmptyStateType };

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;