@webiny/admin-ui 0.0.0-unstable.a4637c5ce6 → 0.0.0-unstable.a85ef555b2

package/DynamicFieldset/Fieldset.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","FormComponentErrorMessage","FormComponentNote","DynamicFieldset","Component","defaultProps","value","header","footer","rows","empty","actions","add","index","addData","remove","removeData","onChange","props","slice","onAdd","newValue","renderHeader","cb","renderFooter","renderRow","map","record","createElement","key","data","renderEmpty","renderComponent","children","row","length","Fragment","render","description","validation","isValid","validationIsValid","message","validationMessage","invalid","Boolean","text"],"sources":["Fieldset.tsx"],"sourcesContent":["import React from \"react\";\nimport { FormComponentErrorMessage, FormComponentNote } from \"~/FormComponent\";\n\ninterface ChildrenRenderPropRowCallableParams {\n    index: number;\n    data: any;\n}\ninterface ChildrenRenderPropRowCallable {\n    (params: ChildrenRenderPropRowCallableParams): React.ReactNode;\n}\ninterface ChildrenRenderPropHeaderCallable {\n    (): React.ReactNode;\n}\ninterface ChildrenRenderPropEmptyCallable {\n    (): React.ReactNode;\n}\ninterface ChildrenRenderPropFooterCallable {\n    (): React.ReactNode;\n}\n\ninterface ChildrenRenderProp {\n    actions: {\n        add: (index?: number) => () => void;\n        remove: (index: number) => () => void;\n    };\n    header: (cb: ChildrenRenderPropHeaderCallable) => React.ReactNode;\n    footer: (cb: ChildrenRenderPropFooterCallable) => React.ReactNode;\n    row: (cb: ChildrenRenderPropRowCallable) => React.ReactNode;\n    empty: (cb: ChildrenRenderPropEmptyCallable) => React.ReactNode;\n}\n\ninterface DynamicFieldsetProps {\n    value?: any[];\n    description?: string;\n    validation?: { isValid: null | boolean; message?: string };\n    onChange: (value: any) => void;\n    // Create a new value to be added to the fieldset.\n    onAdd: () => any;\n    children: (props: ChildrenRenderProp) => React.ReactNode;\n}\n\nclass DynamicFieldset extends React.Component<DynamicFieldsetProps> {\n    static defaultProps: Partial<DynamicFieldsetProps> = {\n        value: []\n    };\n\n    header: React.ReactNode = null;\n    footer: React.ReactNode = null;\n    rows: React.ReactNode = null;\n    empty: React.ReactNode = null;\n\n    actions = {\n        add:\n            (index = -1) =>\n            () =>\n                this.addData(index),\n        remove:\n            (index = -1) =>\n            () =>\n                this.removeData(index)\n    };\n\n    removeData = (index: number) => {\n        const { value, onChange } = this.props;\n        if (!value) {\n            return;\n        }\n        onChange([...value.slice(0, index), ...value.slice(index + 1)]);\n    };\n\n    addData = (index = -1) => {\n        const { onChange, onAdd } = this.props;\n        let value = this.props.value;\n        if (!value) {\n            value = [];\n        }\n\n        const newValue = typeof onAdd === \"function\" ? onAdd() : {};\n\n        if (index < 0) {\n            onChange([...value, newValue]);\n        } else {\n            onChange([...value.slice(0, index + 1), newValue, ...value.slice(index + 1)]);\n        }\n    };\n\n    renderHeader = (cb: () => React.ReactNode): React.ReactNode => {\n        this.header = cb();\n        return null;\n    };\n\n    renderFooter = (cb: () => React.ReactNode): React.ReactNode => {\n        this.footer = cb();\n        return null;\n    };\n\n    renderRow = (cb: ChildrenRenderPropRowCallable): React.ReactNode => {\n        const { value } = this.props;\n        if (!value) {\n            return null;\n        }\n        this.rows = value.map((record, index) => {\n            return <div key={index}>{cb({ data: record, index })}</div>;\n        });\n        return null;\n    };\n\n    renderEmpty = (cb: () => React.ReactNode): React.ReactNode => {\n        this.empty = cb();\n        return null;\n    };\n\n    public renderComponent(): React.ReactNode {\n        const { value } = this.props;\n        const { children } = this.props;\n\n        children({\n            actions: this.actions,\n            header: this.renderHeader,\n            footer: this.renderFooter,\n            row: this.renderRow,\n            empty: this.renderEmpty\n        });\n\n        if (!value || value.length === 0) {\n            return this.empty;\n        }\n\n        return (\n            <React.Fragment>\n                {this.header}\n                {this.rows}\n                {this.footer}\n            </React.Fragment>\n        );\n    }\n\n    public override render() {\n        const { description, validation } = this.props;\n        const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n        return (\n            <>\n                {this.renderComponent()}\n                <FormComponentErrorMessage\n                    invalid={Boolean(validationIsValid === false)}\n                    text={validationMessage}\n                />\n                <FormComponentNote text={description} />\n            </>\n        );\n    }\n}\n\nexport { DynamicFieldset, type DynamicFieldsetProps };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"DynamicFieldset/Fieldset.js","sources":["../../src/DynamicFieldset/Fieldset.tsx"],"sourcesContent":["import React from \"react\";\nimport { FormComponentErrorMessage, FormComponentNote } from \"~/FormComponent/index.js\";\n\ninterface ChildrenRenderPropRowCallableParams {\n    index: number;\n    data: any;\n}\ninterface ChildrenRenderPropRowCallable {\n    (params: ChildrenRenderPropRowCallableParams): React.ReactNode;\n}\ninterface ChildrenRenderPropHeaderCallable {\n    (): React.ReactNode;\n}\ninterface ChildrenRenderPropEmptyCallable {\n    (): React.ReactNode;\n}\ninterface ChildrenRenderPropFooterCallable {\n    (): React.ReactNode;\n}\n\ninterface ChildrenRenderProp {\n    actions: {\n        add: (index?: number) => () => void;\n        remove: (index: number) => () => void;\n    };\n    header: (cb: ChildrenRenderPropHeaderCallable) => React.ReactNode;\n    footer: (cb: ChildrenRenderPropFooterCallable) => React.ReactNode;\n    row: (cb: ChildrenRenderPropRowCallable) => React.ReactNode;\n    empty: (cb: ChildrenRenderPropEmptyCallable) => React.ReactNode;\n}\n\ninterface DynamicFieldsetProps {\n    value?: any[];\n    description?: string;\n    validation?: { isValid: null | boolean; message?: string };\n    onChange: (value: any) => void;\n    // Create a new value to be added to the fieldset.\n    onAdd: () => any;\n    children: (props: ChildrenRenderProp) => React.ReactNode;\n}\n\nclass DynamicFieldset extends React.Component<DynamicFieldsetProps> {\n    static defaultProps: Partial<DynamicFieldsetProps> = {\n        value: []\n    };\n\n    header: React.ReactNode = null;\n    footer: React.ReactNode = null;\n    rows: React.ReactNode = null;\n    empty: React.ReactNode = null;\n\n    actions = {\n        add:\n            (index = -1) =>\n            () =>\n                this.addData(index),\n        remove:\n            (index = -1) =>\n            () =>\n                this.removeData(index)\n    };\n\n    removeData = (index: number) => {\n        const { value, onChange } = this.props;\n        if (!value) {\n            return;\n        }\n        onChange([...value.slice(0, index), ...value.slice(index + 1)]);\n    };\n\n    addData = (index = -1) => {\n        const { onChange, onAdd } = this.props;\n        let value = this.props.value;\n        if (!value) {\n            value = [];\n        }\n\n        const newValue = typeof onAdd === \"function\" ? onAdd() : {};\n\n        if (index < 0) {\n            onChange([...value, newValue]);\n        } else {\n            onChange([...value.slice(0, index + 1), newValue, ...value.slice(index + 1)]);\n        }\n    };\n\n    renderHeader = (cb: () => React.ReactNode): React.ReactNode => {\n        this.header = cb();\n        return null;\n    };\n\n    renderFooter = (cb: () => React.ReactNode): React.ReactNode => {\n        this.footer = cb();\n        return null;\n    };\n\n    renderRow = (cb: ChildrenRenderPropRowCallable): React.ReactNode => {\n        const { value } = this.props;\n        if (!value) {\n            return null;\n        }\n        this.rows = value.map((record, index) => {\n            return <div key={index}>{cb({ data: record, index })}</div>;\n        });\n        return null;\n    };\n\n    renderEmpty = (cb: () => React.ReactNode): React.ReactNode => {\n        this.empty = cb();\n        return null;\n    };\n\n    public renderComponent(): React.ReactNode {\n        const { value } = this.props;\n        const { children } = this.props;\n\n        children({\n            actions: this.actions,\n            header: this.renderHeader,\n            footer: this.renderFooter,\n            row: this.renderRow,\n            empty: this.renderEmpty\n        });\n\n        if (!value || value.length === 0) {\n            return this.empty;\n        }\n\n        return (\n            <React.Fragment>\n                {this.header}\n                {this.rows}\n                {this.footer}\n            </React.Fragment>\n        );\n    }\n\n    public override render() {\n        const { description, validation } = this.props;\n        const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n        return (\n            <>\n                {this.renderComponent()}\n                <FormComponentErrorMessage\n                    invalid={Boolean(validationIsValid === false)}\n                    text={validationMessage}\n                />\n                <FormComponentNote text={description} />\n            </>\n        );\n    }\n}\n\nexport { DynamicFieldset, type DynamicFieldsetProps };\n"],"names":["DynamicFieldset","React","value","children","description","validation","validationIsValid","validationMessage","FormComponentErrorMessage","Boolean","FormComponentNote","index","onChange","onAdd","newValue","cb","record"],"mappings":";;AAyCA,MAAMA,wBAAwBC,MAAAA,SAAe;;aAClC,YAAY,GAAkC;YACjD,OAAO,EAAE;QACb;;IAoEO,kBAAmC;QACtC,MAAM,EAAEC,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK;QAC5B,MAAM,EAAEC,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK;QAE/BA,SAAS;YACL,SAAS,IAAI,CAAC,OAAO;YACrB,QAAQ,IAAI,CAAC,YAAY;YACzB,QAAQ,IAAI,CAAC,YAAY;YACzB,KAAK,IAAI,CAAC,SAAS;YACnB,OAAO,IAAI,CAAC,WAAW;QAC3B;QAEA,IAAI,CAACD,SAASA,AAAiB,MAAjBA,MAAM,MAAM,EACtB,OAAO,IAAI,CAAC,KAAK;QAGrB,OAAO,WAAP,GACI,oBAACD,MAAAA,QAAc,QACV,IAAI,CAAC,MAAM,EACX,IAAI,CAAC,IAAI,EACT,IAAI,CAAC,MAAM;IAGxB;IAEgB,SAAS;QACrB,MAAM,EAAEG,WAAW,EAAEC,UAAU,EAAE,GAAG,IAAI,CAAC,KAAK;QAC9C,MAAM,EAAE,SAASC,iBAAiB,EAAE,SAASC,iBAAiB,EAAE,GAAGF,cAAc,CAAC;QAElF,OAAO,WAAP,GACI,0CACK,IAAI,CAAC,eAAe,kBACrB,oBAACG,2BAAyBA;YACtB,SAASC,QAAQH,AAAsB,UAAtBA;YACjB,MAAMC;0BAEV,oBAACG,mBAAiBA;YAAC,MAAMN;;IAGrC;;QA9GJ,qBAKI,MAAM,GAAoB,WAC1B,MAAM,GAAoB,WAC1B,IAAI,GAAoB,WACxB,KAAK,GAAoB,WAEzB,OAAO,GAAG;YACN,KACI,CAACO,QAAQ,EAAE,GACX,IACI,IAAI,CAAC,OAAO,CAACA;YACrB,QACI,CAACA,QAAQ,EAAE,GACX,IACI,IAAI,CAAC,UAAU,CAACA;QAC5B,QAEA,UAAU,GAAG,CAACA;YACV,MAAM,EAAET,KAAK,EAAEU,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK;YACtC,IAAI,CAACV,OACD;YAEJU,SAAS;mBAAIV,MAAM,KAAK,CAAC,GAAGS;mBAAWT,MAAM,KAAK,CAACS,QAAQ;aAAG;QAClE,QAEA,OAAO,GAAG,CAACA,QAAQ,EAAE;YACjB,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK;YACtC,IAAIX,QAAQ,IAAI,CAAC,KAAK,CAAC,KAAK;YAC5B,IAAI,CAACA,OACDA,QAAQ,EAAE;YAGd,MAAMY,WAAW,AAAiB,cAAjB,OAAOD,QAAuBA,UAAU,CAAC;YAGtDD,SAAS,AADTD,QAAQ,IACC;mBAAIT;gBAAOY;aAAS,GAEpB;mBAAIZ,MAAM,KAAK,CAAC,GAAGS,QAAQ;gBAAIG;mBAAaZ,MAAM,KAAK,CAACS,QAAQ;aAAG;QAEpF,QAEA,YAAY,GAAG,CAACI;YACZ,IAAI,CAAC,MAAM,GAAGA;YACd,OAAO;QACX,QAEA,YAAY,GAAG,CAACA;YACZ,IAAI,CAAC,MAAM,GAAGA;YACd,OAAO;QACX,QAEA,SAAS,GAAG,CAACA;YACT,MAAM,EAAEb,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK;YAC5B,IAAI,CAACA,OACD,OAAO;YAEX,IAAI,CAAC,IAAI,GAAGA,MAAM,GAAG,CAAC,CAACc,QAAQL,QACpB,WAAP,GAAO,oBAAC;oBAAI,KAAKA;mBAAQI,GAAG;oBAAE,MAAMC;oBAAQL;gBAAM;YAEtD,OAAO;QACX,QAEA,WAAW,GAAG,CAACI;YACX,IAAI,CAAC,KAAK,GAAGA;YACb,OAAO;QACX;;AA0CJ"}

package/DynamicFieldset/index.d.ts

@@ -1 +1 @@
-export * from "./Fieldset";
+export * from "./Fieldset.js";

package/DynamicFieldset/index.js

@@ -1,3 +1 @@
-export * from "./Fieldset";
-
-//# sourceMappingURL=index.js.map
+export * from "./Fieldset.js";

package/EditableTitle/EditableTitle.d.ts

@@ -0,0 +1,67 @@
+import React from "react";
+interface EditableTitleProps {
+    /**
+     * The current title value.
+     */
+    value: string;
+    /**
+     * Called with the new value when editing is committed (blur or Enter).
+     */
+    onCommit: (value: string) => void;
+    /**
+     * If true, the title is rendered as plain (non-editable) text.
+     */
+    readOnly?: boolean;
+    /**
+     * Placeholder shown in the input while editing.
+     */
+    placeholder?: string;
+    /**
+     * Focus the input when entering edit mode. Defaults to `true`.
+     */
+    autoFocus?: boolean;
+    /**
+     * Select the input's content when entering edit mode. Defaults to `true`.
+     */
+    autoSelect?: boolean;
+    /**
+     * Content rendered before the title (e.g. a language tag).
+     */
+    startContent?: React.ReactNode;
+    /**
+     * Tooltip content shown when hovering the resting title.
+     */
+    tooltip?: React.ReactNode;
+    /**
+     * Controls the editing state. When provided, the component is controlled
+     * and `onEditingChange` must be used to react to state changes.
+     */
+    isEditing?: boolean;
+    /**
+     * Called whenever the editing state should change.
+     */
+    onEditingChange?: (editing: boolean) => void;
+    className?: string;
+    "data-testid"?: string;
+}
+declare const DecoratableEditableTitle: ({ value, onCommit, readOnly, placeholder, autoFocus, autoSelect, startContent, tooltip, isEditing: controlledEditing, onEditingChange, className, "data-testid": dataTestId }: EditableTitleProps) => React.JSX.Element;
+declare const EditableTitle: typeof DecoratableEditableTitle & {
+    original: typeof DecoratableEditableTitle;
+    originalName: string;
+    displayName: string;
+} & {
+    original: typeof DecoratableEditableTitle & {
+        original: typeof DecoratableEditableTitle;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof DecoratableEditableTitle & {
+        original: typeof DecoratableEditableTitle;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export { EditableTitle, type EditableTitleProps };

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