@webiny/admin-ui 0.0.0-unstable.7be00a75a9 → 0.0.0-unstable.7c2def32a7

package/FilePicker/primitives/components/previews/RichItemPreview/RichItemThumbnail.d.ts

@@ -4,6 +4,16 @@ import type { RichItemPreviewProps } from "../../../../../FilePicker/primitives/
 type RichItemThumbnailProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & FileItemFormatted & {
     preview?: RichItemPreviewProps["preview"];
     disabled?: boolean;
+    /**
+     * `tile` is the fixed square that sits beside the file details; `banner` spans the full
+     * width of a stacked layout, where the panel is too narrow to afford a column for it.
+     */
+    variant?: "tile" | "banner";
+    /** Optional custom image renderer for the thumbnail (e.g. a cropped preview). */
+    renderImage?: (args: {
+        url: string;
+        name: string;
+    }) => React.ReactNode;
 };
-declare const RichItemThumbnail: ({ url, name, className, mimeType, preview, disabled }: RichItemThumbnailProps) => React.JSX.Element;
+declare const RichItemThumbnail: ({ url, name, className, mimeType, preview, disabled, variant, renderImage }: RichItemThumbnailProps) => React.JSX.Element;
 export { RichItemThumbnail, type RichItemThumbnailProps };

package/FilePicker/primitives/components/previews/RichItemPreview/RichItemThumbnail.js

@@ -1,70 +1,17 @@
 import react from "react";
-import { ReactComponent } from "@webiny/icons/image.svg";
-import { Icon } from "../../../../../Icon/index.js";
 import { cn } from "../../../../../utils.js";
-import csv from "../assets/csv.js";
-import doc from "../assets/doc.js";
-import docx from "../assets/docx.js";
-import file from "../assets/file.js";
-import pdf from "../assets/pdf.js";
-import ppt from "../assets/ppt.js";
-import pptx from "../assets/pptx.js";
-import txt from "../assets/txt.js";
-import xls from "../assets/xls.js";
-import xlsx from "../assets/xlsx.js";
-const Thumbnail = ({ url, name })=>/*#__PURE__*/ react.createElement("div", {
-        className: "size-full bg-neutral-muted"
-    }, /*#__PURE__*/ react.createElement("img", {
-        src: url,
-        alt: name,
-        className: "size-full object-cover"
-    }));
-const FileType = ({ mimeType = "", name })=>{
-    const getMimeTypeSrc = (mimeType)=>{
-        switch(mimeType){
-            case "text/csv":
-                return csv;
-            case "application/msword":
-                return doc;
-            case "application/vnd.openxmlformats-officedocument.wordprocessingml.document":
-                return docx;
-            case "application/pdf":
-                return pdf;
-            case "application/vnd.ms-powerpoint":
-                return ppt;
-            case "application/vnd.openxmlformats-officedocument.presentationml.presentation":
-                return pptx;
-            case "text/plain":
-                return txt;
-            case "application/vnd.ms-excel":
-                return xls;
-            case "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet":
-                return xlsx;
-            default:
-                return file;
-        }
-    };
-    return /*#__PURE__*/ react.createElement("img", {
-        src: getMimeTypeSrc(mimeType),
-        alt: name,
-        className: "size-full p-sm-extra"
-    });
-};
-const Placeholder = ({ name })=>/*#__PURE__*/ react.createElement("div", {
-        className: "size-full flex justify-center items-center bg-transparent"
-    }, /*#__PURE__*/ react.createElement(Icon, {
-        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
-        label: name,
-        size: "lg",
-        color: "neutral-light"
-    }));
-const RichItemThumbnail = ({ url, name, className, mimeType, preview, disabled })=>{
+import { FileType } from "./FileType.js";
+import { Placeholder } from "./Placeholder.js";
+import { Thumbnail } from "./Thumbnail.js";
+const RichItemThumbnail = ({ url, name, className, mimeType, preview, disabled, variant = "tile", renderImage })=>{
     const isImage = mimeType?.startsWith("image/");
     return /*#__PURE__*/ react.createElement("div", {
-        className: cn("size-[56px] m-xs rounded-sm overflow-hidden relative", disabled && "[&_img]:filter [&_img]:grayscale [&_img]:opacity-50", className)
+        className: cn("rounded-sm overflow-hidden relative", "banner" === variant ? "w-full h-[96px]" : "size-[56px] m-xs", disabled && "[&_img]:filter [&_img]:grayscale [&_img]:opacity-50", className)
     }, "thumbnail" === preview || isImage ? /*#__PURE__*/ react.createElement(Thumbnail, {
         url: url,
-        name: name
+        name: name,
+        fit: "banner" === variant ? "contain" : "cover",
+        renderImage: renderImage
     }) : "placeholder" === preview ? /*#__PURE__*/ react.createElement(Placeholder, {
         name: name
     }) : /*#__PURE__*/ react.createElement(FileType, {

package/FilePicker/primitives/components/previews/RichItemPreview/RichItemThumbnail.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilePicker/primitives/components/previews/RichItemPreview/RichItemThumbnail.js","sources":["../../../../../../src/FilePicker/primitives/components/previews/RichItemPreview/RichItemThumbnail.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as PlaceholderIcon } from \"@webiny/icons/image.svg\";\nimport type { FileItemFormatted } from \"~/FilePicker/index.js\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { cn } from \"~/utils.js\";\nimport type { RichItemPreviewProps } from \"~/FilePicker/primitives/components/index.js\";\n\nimport csvThumb from \"../assets/csv.svg\";\nimport docThumb from \"../assets/doc.svg\";\nimport docxThumb from \"../assets/docx.svg\";\nimport fileThumb from \"../assets/file.svg\";\nimport pdfThumb from \"../assets/pdf.svg\";\nimport pptThumb from \"../assets/ppt.svg\";\nimport pptxThumb from \"../assets/pptx.svg\";\nimport txtThumb from \"../assets/txt.svg\";\nimport xlsThumb from \"../assets/xls.svg\";\nimport xlsxThumb from \"../assets/xlsx.svg\";\n\ntype RichItemThumbnailProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"children\"> &\n    FileItemFormatted & {\n        preview?: RichItemPreviewProps[\"preview\"];\n        disabled?: boolean;\n    };\n\ntype ThumbnailProps = Pick<FileItemFormatted, \"url\" | \"name\">;\n\nconst Thumbnail = ({ url, name }: ThumbnailProps) => {\n    return (\n        <div className={\"size-full bg-neutral-muted\"}>\n            <img src={url} alt={name} className=\"size-full object-cover\" />\n        </div>\n    );\n};\n\ntype FileTypeProps = Pick<FileItemFormatted, \"mimeType\" | \"name\">;\n\nconst FileType = ({ mimeType = \"\", name }: FileTypeProps) => {\n    const getMimeTypeSrc = (mimeType: string) => {\n        switch (mimeType) {\n            case \"text/csv\": // .csv\n                return csvThumb;\n            case \"application/msword\": // .doc\n                return docThumb;\n            case \"application/vnd.openxmlformats-officedocument.wordprocessingml.document\": // .docx\n                return docxThumb;\n            case \"application/pdf\": // .pdf\n                return pdfThumb;\n            case \"application/vnd.ms-powerpoint\": // .ppt\n                return pptThumb;\n            case \"application/vnd.openxmlformats-officedocument.presentationml.presentation\": // .pptx\n                return pptxThumb;\n            case \"text/plain\": // .txt\n                return txtThumb;\n            case \"application/vnd.ms-excel\": // .xls\n                return xlsThumb;\n            case \"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet\": // .xlsx\n                return xlsxThumb;\n            default:\n                return fileThumb;\n        }\n    };\n\n    return <img src={getMimeTypeSrc(mimeType)} alt={name} className=\"size-full p-sm-extra\" />;\n};\n\ntype PlaceholderProps = Pick<FileItemFormatted, \"name\">;\n\nconst Placeholder = ({ name }: PlaceholderProps) => {\n    return (\n        <div className={\"size-full flex justify-center items-center bg-transparent\"}>\n            <Icon icon={<PlaceholderIcon />} label={name} size={\"lg\"} color={\"neutral-light\"} />\n        </div>\n    );\n};\n\nconst RichItemThumbnail = ({\n    url,\n    name,\n    className,\n    mimeType,\n    preview,\n    disabled\n}: RichItemThumbnailProps) => {\n    const isImage = mimeType?.startsWith(\"image/\");\n\n    return (\n        <div\n            className={cn(\n                \"size-[56px] m-xs rounded-sm overflow-hidden relative\",\n                disabled && \"[&_img]:filter [&_img]:grayscale [&_img]:opacity-50\",\n                className\n            )}\n        >\n            {preview === \"thumbnail\" || isImage ? (\n                <Thumbnail url={url} name={name} />\n            ) : preview === \"placeholder\" ? (\n                <Placeholder name={name} />\n            ) : (\n                <FileType mimeType={mimeType} name={name} />\n            )}\n        </div>\n    );\n};\n\nexport { RichItemThumbnail, type RichItemThumbnailProps };\n"],"names":["Thumbnail","url","name","FileType","mimeType","getMimeTypeSrc","csvThumb","docThumb","docxThumb","pdfThumb","pptThumb","pptxThumb","txtThumb","xlsThumb","xlsxThumb","fileThumb","Placeholder","Icon","PlaceholderIcon","RichItemThumbnail","className","preview","disabled","isImage","cn"],"mappings":";;;;;;;;;;;;;;AA0BA,MAAMA,YAAY,CAAC,EAAEC,GAAG,EAAEC,IAAI,EAAkB,GACrC,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAI,KAAKD;QAAK,KAAKC;QAAM,WAAU;;AAOhD,MAAMC,WAAW,CAAC,EAAEC,WAAW,EAAE,EAAEF,IAAI,EAAiB;IACpD,MAAMG,iBAAiB,CAACD;QACpB,OAAQA;YACJ,KAAK;gBACD,OAAOE;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX;gBACI,OAAOC;QACf;IACJ;IAEA,OAAO,WAAP,GAAO,oBAAC;QAAI,KAAKV,eAAeD;QAAW,KAAKF;QAAM,WAAU;;AACpE;AAIA,MAAMc,cAAc,CAAC,EAAEd,IAAI,EAAoB,GACpC,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACe,MAAIA;QAAC,oBAAM,oBAACC,gBAAeA;QAAK,OAAOhB;QAAM,MAAM;QAAM,OAAO;;AAK7E,MAAMiB,oBAAoB,CAAC,EACvBlB,GAAG,EACHC,IAAI,EACJkB,SAAS,EACThB,QAAQ,EACRiB,OAAO,EACPC,QAAQ,EACa;IACrB,MAAMC,UAAUnB,UAAU,WAAW;IAErC,OAAO,WAAP,GACI,oBAAC;QACG,WAAWoB,GACP,wDACAF,YAAY,uDACZF;OAGHC,AAAY,gBAAZA,WAA2BE,UAAU,WAAVA,GACxB,oBAACvB,WAASA;QAAC,KAAKC;QAAK,MAAMC;SAC3BmB,AAAY,kBAAZA,UAA4B,WAAhB,GACZ,oBAACL,aAAWA;QAAC,MAAMd;uBAEnB,oBAACC,UAAQA;QAAC,UAAUC;QAAU,MAAMF;;AAIpD"}
+{"version":3,"file":"FilePicker/primitives/components/previews/RichItemPreview/RichItemThumbnail.js","sources":["../../../../../../src/FilePicker/primitives/components/previews/RichItemPreview/RichItemThumbnail.tsx"],"sourcesContent":["import React from \"react\";\nimport type { FileItemFormatted } from \"~/FilePicker/index.js\";\nimport { cn } from \"~/utils.js\";\nimport type { RichItemPreviewProps } from \"~/FilePicker/primitives/components/index.js\";\nimport { FileType } from \"./FileType.js\";\nimport { Placeholder } from \"./Placeholder.js\";\nimport { Thumbnail } from \"./Thumbnail.js\";\n\ntype RichItemThumbnailProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"children\"> &\n    FileItemFormatted & {\n        preview?: RichItemPreviewProps[\"preview\"];\n        disabled?: boolean;\n        /**\n         * `tile` is the fixed square that sits beside the file details; `banner` spans the full\n         * width of a stacked layout, where the panel is too narrow to afford a column for it.\n         */\n        variant?: \"tile\" | \"banner\";\n        /** Optional custom image renderer for the thumbnail (e.g. a cropped preview). */\n        renderImage?: (args: { url: string; name: string }) => React.ReactNode;\n    };\n\nconst RichItemThumbnail = ({\n    url,\n    name,\n    className,\n    mimeType,\n    preview,\n    disabled,\n    variant = \"tile\",\n    renderImage\n}: RichItemThumbnailProps) => {\n    const isImage = mimeType?.startsWith(\"image/\");\n\n    return (\n        <div\n            className={cn(\n                \"rounded-sm overflow-hidden relative\",\n                variant === \"banner\" ? \"w-full h-[96px]\" : \"size-[56px] m-xs\",\n                disabled && \"[&_img]:filter [&_img]:grayscale [&_img]:opacity-50\",\n                className\n            )}\n        >\n            {preview === \"thumbnail\" || isImage ? (\n                <Thumbnail\n                    url={url}\n                    name={name}\n                    fit={variant === \"banner\" ? \"contain\" : \"cover\"}\n                    renderImage={renderImage}\n                />\n            ) : preview === \"placeholder\" ? (\n                <Placeholder name={name} />\n            ) : (\n                <FileType mimeType={mimeType} name={name} />\n            )}\n        </div>\n    );\n};\n\nexport { RichItemThumbnail, type RichItemThumbnailProps };\n"],"names":["RichItemThumbnail","url","name","className","mimeType","preview","disabled","variant","renderImage","isImage","cn","Thumbnail","Placeholder","FileType"],"mappings":";;;;;AAqBA,MAAMA,oBAAoB,CAAC,EACvBC,GAAG,EACHC,IAAI,EACJC,SAAS,EACTC,QAAQ,EACRC,OAAO,EACPC,QAAQ,EACRC,UAAU,MAAM,EAChBC,WAAW,EACU;IACrB,MAAMC,UAAUL,UAAU,WAAW;IAErC,OAAO,WAAP,GACI,oBAAC;QACG,WAAWM,GACP,uCACAH,AAAY,aAAZA,UAAuB,oBAAoB,oBAC3CD,YAAY,uDACZH;OAGHE,AAAY,gBAAZA,WAA2BI,UAAU,WAAVA,GACxB,oBAACE,WAASA;QACN,KAAKV;QACL,MAAMC;QACN,KAAKK,AAAY,aAAZA,UAAuB,YAAY;QACxC,aAAaC;SAEjBH,AAAY,kBAAZA,UAA4B,WAAhB,GACZ,oBAACO,aAAWA;QAAC,MAAMV;uBAEnB,oBAACW,UAAQA;QAAC,UAAUT;QAAU,MAAMF;;AAIpD"}

package/FilePicker/primitives/components/previews/RichItemPreview/Thumbnail.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import type { FileItemFormatted } from "../../../../../FilePicker/index.js";
+type ThumbnailProps = Pick<FileItemFormatted, "url" | "name"> & {
+    fit: "cover" | "contain";
+    renderImage?: (args: {
+        url: string;
+        name: string;
+    }) => React.ReactNode;
+};
+declare const Thumbnail: ({ url, name, fit, renderImage }: ThumbnailProps) => React.JSX.Element;
+export { Thumbnail, type ThumbnailProps };

package/FilePicker/primitives/components/previews/RichItemPreview/Thumbnail.js

@@ -0,0 +1,24 @@
+import react from "react";
+const Thumbnail = ({ url, name, fit, renderImage })=>{
+    const customImage = "function" == typeof renderImage ? renderImage({
+        url,
+        name
+    }) : false;
+    if ("contain" === fit) return /*#__PURE__*/ react.createElement("div", {
+        className: "size-full p-xs bg-neutral-muted flex items-center justify-center"
+    }, customImage || /*#__PURE__*/ react.createElement("img", {
+        src: url,
+        alt: name,
+        className: "max-h-full max-w-full rounded-xs"
+    }));
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "size-full bg-neutral-muted"
+    }, customImage || /*#__PURE__*/ react.createElement("img", {
+        src: url,
+        alt: name,
+        className: "size-full object-cover"
+    }));
+};
+export { Thumbnail };
+
+//# sourceMappingURL=Thumbnail.js.map

package/FilePicker/primitives/components/previews/RichItemPreview/Thumbnail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilePicker/primitives/components/previews/RichItemPreview/Thumbnail.js","sources":["../../../../../../src/FilePicker/primitives/components/previews/RichItemPreview/Thumbnail.tsx"],"sourcesContent":["import React from \"react\";\nimport type { FileItemFormatted } from \"~/FilePicker/index.js\";\n\ntype ThumbnailProps = Pick<FileItemFormatted, \"url\" | \"name\"> & {\n    fit: \"cover\" | \"contain\";\n    renderImage?: (args: { url: string; name: string }) => React.ReactNode;\n};\n\nconst Thumbnail = ({ url, name, fit, renderImage }: ThumbnailProps) => {\n    const customImage = typeof renderImage === \"function\" ? renderImage({ url, name }) : false;\n\n    if (fit === \"contain\") {\n        return (\n            <div className={\"size-full p-xs bg-neutral-muted flex items-center justify-center\"}>\n                {customImage || (\n                    <img src={url} alt={name} className={\"max-h-full max-w-full rounded-xs\"} />\n                )}\n            </div>\n        );\n    }\n\n    return (\n        <div className={\"size-full bg-neutral-muted\"}>\n            {customImage || <img src={url} alt={name} className={\"size-full object-cover\"} />}\n        </div>\n    );\n};\n\nexport { Thumbnail, type ThumbnailProps };\n"],"names":["Thumbnail","url","name","fit","renderImage","customImage"],"mappings":";AAQA,MAAMA,YAAY,CAAC,EAAEC,GAAG,EAAEC,IAAI,EAAEC,GAAG,EAAEC,WAAW,EAAkB;IAC9D,MAAMC,cAAc,AAAuB,cAAvB,OAAOD,cAA6BA,YAAY;QAAEH;QAAKC;IAAK,KAAK;IAErF,IAAIC,AAAQ,cAARA,KACA,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;OACXE,eAAe,WAAfA,GACG,oBAAC;QAAI,KAAKJ;QAAK,KAAKC;QAAM,WAAW;;IAMrD,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;OACXG,eAAe,WAAfA,GAAe,oBAAC;QAAI,KAAKJ;QAAK,KAAKC;QAAM,WAAW;;AAGjE"}

package/FilePicker/primitives/components/previews/RichItemPreview/ThumbnailActions.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+interface ThumbnailActionsProps {
+    onRemoveItem?: () => void;
+    onEditItem?: () => void;
+    onReplaceItem?: () => void;
+    disabled?: boolean;
+    className?: string;
+}
+declare const ThumbnailActions: ({ className, disabled, onEditItem, onRemoveItem, onReplaceItem }: ThumbnailActionsProps) => React.JSX.Element;
+export { ThumbnailActions, type ThumbnailActionsProps };

package/FilePicker/primitives/components/previews/RichItemPreview/ThumbnailActions.js

@@ -0,0 +1,46 @@
+import react, { useCallback } from "react";
+import { ReactComponent } from "@webiny/icons/file_upload.svg";
+import { ReactComponent as edit_svg_ReactComponent } from "@webiny/icons/edit.svg";
+import { ReactComponent as delete_svg_ReactComponent } from "@webiny/icons/delete.svg";
+import { IconButton } from "../../../../../Button/index.js";
+import { Tooltip } from "../../../../../Tooltip/index.js";
+import { cn } from "../../../../../utils.js";
+const Action = ({ icon, label, onAction, disabled })=>{
+    const onClick = useCallback((event)=>{
+        event.stopPropagation();
+        onAction();
+    }, [
+        onAction
+    ]);
+    return /*#__PURE__*/ react.createElement(Tooltip, {
+        content: label,
+        trigger: /*#__PURE__*/ react.createElement(IconButton, {
+            variant: "tertiary",
+            size: "sm",
+            icon: icon,
+            onClick: onClick,
+            disabled: disabled
+        })
+    });
+};
+const ThumbnailActions = ({ className, disabled, onEditItem, onRemoveItem, onReplaceItem })=>/*#__PURE__*/ react.createElement("div", {
+        className: cn("invisible group-hover:visible", "flex items-center gap-xxs", "absolute top-xs-plus right-xs-plus", className)
+    }, onReplaceItem && /*#__PURE__*/ react.createElement(Action, {
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        label: "Replace",
+        onAction: onReplaceItem,
+        disabled: disabled
+    }), onEditItem && /*#__PURE__*/ react.createElement(Action, {
+        icon: /*#__PURE__*/ react.createElement(edit_svg_ReactComponent, null),
+        label: "Edit",
+        onAction: onEditItem,
+        disabled: disabled
+    }), onRemoveItem && /*#__PURE__*/ react.createElement(Action, {
+        icon: /*#__PURE__*/ react.createElement(delete_svg_ReactComponent, null),
+        label: "Remove",
+        onAction: onRemoveItem,
+        disabled: disabled
+    }));
+export { ThumbnailActions };
+
+//# sourceMappingURL=ThumbnailActions.js.map

package/FilePicker/primitives/components/previews/RichItemPreview/ThumbnailActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilePicker/primitives/components/previews/RichItemPreview/ThumbnailActions.js","sources":["../../../../../../src/FilePicker/primitives/components/previews/RichItemPreview/ThumbnailActions.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { ReactComponent as ReplaceIcon } from \"@webiny/icons/file_upload.svg\";\nimport { ReactComponent as EditIcon } from \"@webiny/icons/edit.svg\";\nimport { ReactComponent as TrashIcon } from \"@webiny/icons/delete.svg\";\nimport { IconButton } from \"~/Button/index.js\";\nimport { Tooltip } from \"~/Tooltip/index.js\";\nimport { cn } from \"~/utils.js\";\n\ninterface ActionProps {\n    icon: React.JSX.Element;\n    label: string;\n    onAction: () => void;\n    disabled?: boolean;\n}\n\nconst Action = ({ icon, label, onAction, disabled }: ActionProps) => {\n    const onClick = useCallback(\n        (event: React.MouseEvent<HTMLButtonElement>) => {\n            event.stopPropagation();\n            onAction();\n        },\n        [onAction]\n    );\n\n    return (\n        <Tooltip\n            content={label}\n            trigger={\n                <IconButton\n                    variant={\"tertiary\"}\n                    size={\"sm\"}\n                    icon={icon}\n                    onClick={onClick}\n                    disabled={disabled}\n                />\n            }\n        />\n    );\n};\n\ninterface ThumbnailActionsProps {\n    onRemoveItem?: () => void;\n    onEditItem?: () => void;\n    onReplaceItem?: () => void;\n    disabled?: boolean;\n    className?: string;\n}\n\nconst ThumbnailActions = ({\n    className,\n    disabled,\n    onEditItem,\n    onRemoveItem,\n    onReplaceItem\n}: ThumbnailActionsProps) => {\n    return (\n        <div\n            className={cn(\n                \"invisible group-hover:visible\",\n                \"flex items-center gap-xxs\",\n                \"absolute top-xs-plus right-xs-plus\",\n                className\n            )}\n        >\n            {onReplaceItem && (\n                <Action\n                    icon={<ReplaceIcon />}\n                    label={\"Replace\"}\n                    onAction={onReplaceItem}\n                    disabled={disabled}\n                />\n            )}\n            {onEditItem && (\n                <Action\n                    icon={<EditIcon />}\n                    label={\"Edit\"}\n                    onAction={onEditItem}\n                    disabled={disabled}\n                />\n            )}\n            {onRemoveItem && (\n                <Action\n                    icon={<TrashIcon />}\n                    label={\"Remove\"}\n                    onAction={onRemoveItem}\n                    disabled={disabled}\n                />\n            )}\n        </div>\n    );\n};\n\nexport { ThumbnailActions, type ThumbnailActionsProps };\n"],"names":["Action","icon","label","onAction","disabled","onClick","useCallback","event","Tooltip","IconButton","ThumbnailActions","className","onEditItem","onRemoveItem","onReplaceItem","cn","ReplaceIcon","EditIcon","TrashIcon"],"mappings":";;;;;;;AAeA,MAAMA,SAAS,CAAC,EAAEC,IAAI,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,QAAQ,EAAe;IAC5D,MAAMC,UAAUC,YACZ,CAACC;QACGA,MAAM,eAAe;QACrBJ;IACJ,GACA;QAACA;KAAS;IAGd,OAAO,WAAP,GACI,oBAACK,SAAOA;QACJ,SAASN;QACT,uBACI,oBAACO,YAAUA;YACP,SAAS;YACT,MAAM;YACN,MAAMR;YACN,SAASI;YACT,UAAUD;;;AAK9B;AAUA,MAAMM,mBAAmB,CAAC,EACtBC,SAAS,EACTP,QAAQ,EACRQ,UAAU,EACVC,YAAY,EACZC,aAAa,EACO,GACb,WAAP,GACI,oBAAC;QACG,WAAWC,GACP,iCACA,6BACA,sCACAJ;OAGHG,iBAAiB,WAAjBA,GACG,oBAACd,QAAMA;QACH,oBAAM,oBAACgB,gBAAWA;QAClB,OAAO;QACP,UAAUF;QACV,UAAUV;QAGjBQ,cAAc,WAAdA,GACG,oBAACZ,QAAMA;QACH,oBAAM,oBAACiB,yBAAQA;QACf,OAAO;QACP,UAAUL;QACV,UAAUR;QAGjBS,gBAAgB,WAAhBA,GACG,oBAACb,QAAMA;QACH,oBAAM,oBAACkB,2BAASA;QAChB,OAAO;QACP,UAAUL;QACV,UAAUT"}

package/FilePicker/primitives/components/previews/TextOnlyPreview/TextOnlyPreview.d.ts

@@ -6,21 +6,22 @@ declare const textOnlyPreviewVariants: (props?: ({
     small?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type TextOnlyPreviewProps = FilePreviewDefaultProps & React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof previewVariants> & VariantProps<typeof textOnlyPreviewVariants>;
-declare const TextOnlyPreview: (({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: TextOnlyPreviewProps) => React.JSX.Element) & {
-    original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: TextOnlyPreviewProps) => React.JSX.Element;
+declare const DecoratableTextOnlyPreview: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: TextOnlyPreviewProps) => React.JSX.Element;
+declare const TextOnlyPreview: typeof DecoratableTextOnlyPreview & {
+    original: typeof DecoratableTextOnlyPreview;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: TextOnlyPreviewProps) => React.JSX.Element) & {
-        original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: TextOnlyPreviewProps) => React.JSX.Element;
+    original: typeof DecoratableTextOnlyPreview & {
+        original: typeof DecoratableTextOnlyPreview;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: TextOnlyPreviewProps) => React.JSX.Element) & {
-        original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: TextOnlyPreviewProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableTextOnlyPreview & {
+        original: typeof DecoratableTextOnlyPreview;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/FilePicker/primitives/components/previews/TruncatedFileName.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface TruncatedFileNameProps {
+    name: string;
+    className?: string;
+}
+declare const TruncatedFileName: ({ name, className }: TruncatedFileNameProps) => React.JSX.Element;
+export { TruncatedFileName, type TruncatedFileNameProps };

package/FilePicker/primitives/components/previews/TruncatedFileName.js

@@ -0,0 +1,20 @@
+import react from "react";
+import { Text } from "../../../../Text/index.js";
+import { cn } from "../../../../utils.js";
+import { splitFileName } from "./fileName.js";
+const TruncatedFileName = ({ name, className })=>{
+    const { head, tail } = splitFileName(name);
+    return /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        as: "div",
+        className: cn("flex min-w-0", className),
+        title: name
+    }, /*#__PURE__*/ react.createElement("span", {
+        className: "truncate"
+    }, head), tail ? /*#__PURE__*/ react.createElement("span", {
+        className: "shrink-0 whitespace-pre"
+    }, tail) : null);
+};
+export { TruncatedFileName };
+
+//# sourceMappingURL=TruncatedFileName.js.map

package/FilePicker/primitives/components/previews/TruncatedFileName.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilePicker/primitives/components/previews/TruncatedFileName.js","sources":["../../../../../src/FilePicker/primitives/components/previews/TruncatedFileName.tsx"],"sourcesContent":["import React from \"react\";\nimport { Text } from \"~/Text/index.js\";\nimport { cn } from \"~/utils.js\";\nimport { splitFileName } from \"./fileName.js\";\n\ninterface TruncatedFileNameProps {\n    name: string;\n    className?: string;\n}\n\nconst TruncatedFileName = ({ name, className }: TruncatedFileNameProps) => {\n    const { head, tail } = splitFileName(name);\n\n    return (\n        <Text size=\"sm\" as=\"div\" className={cn(\"flex min-w-0\", className)} title={name}>\n            <span className={\"truncate\"}>{head}</span>\n            {tail ? <span className={\"shrink-0 whitespace-pre\"}>{tail}</span> : null}\n        </Text>\n    );\n};\n\nexport { TruncatedFileName, type TruncatedFileNameProps };\n"],"names":["TruncatedFileName","name","className","head","tail","splitFileName","Text","cn"],"mappings":";;;;AAUA,MAAMA,oBAAoB,CAAC,EAAEC,IAAI,EAAEC,SAAS,EAA0B;IAClE,MAAM,EAAEC,IAAI,EAAEC,IAAI,EAAE,GAAGC,cAAcJ;IAErC,OAAO,WAAP,GACI,oBAACK,MAAIA;QAAC,MAAK;QAAK,IAAG;QAAM,WAAWC,GAAG,gBAAgBL;QAAY,OAAOD;qBACtE,oBAAC;QAAK,WAAW;OAAaE,OAC7BC,OAAO,WAAPA,GAAO,oBAAC;QAAK,WAAW;OAA4BA,QAAe;AAGhF"}

package/FilePicker/primitives/components/previews/fileName.d.ts

@@ -0,0 +1,4 @@
+export declare const splitFileName: (name: string) => {
+    head: string;
+    tail: string;
+};

package/FilePicker/primitives/components/previews/fileName.js

@@ -0,0 +1,26 @@
+const TAIL_STEM_CHARS = 3;
+const splitFileName = (name)=>{
+    const dot = name.lastIndexOf(".");
+    if (dot <= 0) return {
+        head: name,
+        tail: ""
+    };
+    const cut = dot - Math.min(TAIL_STEM_CHARS, dot);
+    if (cut <= 0) return {
+        head: name,
+        tail: ""
+    };
+    const head = name.slice(0, cut);
+    const tail = name.slice(cut);
+    if (head.length <= tail.length) return {
+        head: name,
+        tail: ""
+    };
+    return {
+        head,
+        tail
+    };
+};
+export { splitFileName };
+
+//# sourceMappingURL=fileName.js.map

package/FilePicker/primitives/components/previews/fileName.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilePicker/primitives/components/previews/fileName.js","sources":["../../../../../src/FilePicker/primitives/components/previews/fileName.ts"],"sourcesContent":["const TAIL_STEM_CHARS = 3;\n\nexport const splitFileName = (name: string) => {\n    const dot = name.lastIndexOf(\".\");\n\n    if (dot <= 0) {\n        return { head: name, tail: \"\" };\n    }\n\n    const cut = dot - Math.min(TAIL_STEM_CHARS, dot);\n\n    if (cut <= 0) {\n        return { head: name, tail: \"\" };\n    }\n\n    const head = name.slice(0, cut);\n    const tail = name.slice(cut);\n\n    if (head.length <= tail.length) {\n        return { head: name, tail: \"\" };\n    }\n\n    return { head, tail };\n};\n"],"names":["TAIL_STEM_CHARS","splitFileName","name","dot","cut","Math","head","tail"],"mappings":"AAAA,MAAMA,kBAAkB;AAEjB,MAAMC,gBAAgB,CAACC;IAC1B,MAAMC,MAAMD,KAAK,WAAW,CAAC;IAE7B,IAAIC,OAAO,GACP,OAAO;QAAE,MAAMD;QAAM,MAAM;IAAG;IAGlC,MAAME,MAAMD,MAAME,KAAK,GAAG,CAACL,iBAAiBG;IAE5C,IAAIC,OAAO,GACP,OAAO;QAAE,MAAMF;QAAM,MAAM;IAAG;IAGlC,MAAMI,OAAOJ,KAAK,KAAK,CAAC,GAAGE;IAC3B,MAAMG,OAAOL,KAAK,KAAK,CAACE;IAExB,IAAIE,KAAK,MAAM,IAAIC,KAAK,MAAM,EAC1B,OAAO;QAAE,MAAML;QAAM,MAAM;IAAG;IAGlC,OAAO;QAAEI;QAAMC;IAAK;AACxB"}

package/FilePicker/primitives/components/previews/index.d.ts

@@ -2,3 +2,4 @@ export * from "./FilePreview.js";
 export * from "./ImagePreview/index.js";
 export * from "./RichItemPreview/index.js";
 export * from "./TextOnlyPreview/index.js";
+export * from "./TruncatedFileName.js";

package/FilePicker/primitives/components/previews/index.js

@@ -2,3 +2,4 @@ export * from "./FilePreview.js";
 export * from "./ImagePreview/index.js";
 export * from "./RichItemPreview/index.js";
 export * from "./TextOnlyPreview/index.js";
+export * from "./TruncatedFileName.js";

package/FilePicker/primitives/components/previews/variants.d.ts

@@ -1,4 +1,4 @@
 export declare const previewVariants: (props?: ({
-    variant?: "base" | "transparent" | "light" | null | undefined;
+    variant?: "base" | "light" | "transparent" | null | undefined;
     disabled?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/FillViewport/FillViewport.d.ts

@@ -0,0 +1,63 @@
+import React from "react";
+type FillViewportProps = React.HTMLAttributes<HTMLDivElement>;
+declare const BaseFillViewportHeight: ({ children, style: userStyle, ...rest }: FillViewportProps) => React.JSX.Element;
+declare const BaseFillViewportWidth: ({ children, style: userStyle, ...rest }: FillViewportProps) => React.JSX.Element;
+declare const BaseFillViewport: ({ children, style: userStyle, ...rest }: FillViewportProps) => React.JSX.Element;
+declare const FillViewportHeight: typeof BaseFillViewportHeight & {
+    original: typeof BaseFillViewportHeight;
+    originalName: string;
+    displayName: string;
+} & {
+    original: typeof BaseFillViewportHeight & {
+        original: typeof BaseFillViewportHeight;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof BaseFillViewportHeight & {
+        original: typeof BaseFillViewportHeight;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+declare const FillViewportWidth: typeof BaseFillViewportWidth & {
+    original: typeof BaseFillViewportWidth;
+    originalName: string;
+    displayName: string;
+} & {
+    original: typeof BaseFillViewportWidth & {
+        original: typeof BaseFillViewportWidth;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof BaseFillViewportWidth & {
+        original: typeof BaseFillViewportWidth;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+declare const FillViewport: typeof BaseFillViewport & {
+    original: typeof BaseFillViewport;
+    originalName: string;
+    displayName: string;
+} & {
+    original: typeof BaseFillViewport & {
+        original: typeof BaseFillViewport;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof BaseFillViewport & {
+        original: typeof BaseFillViewport;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export { FillViewportHeight, FillViewportWidth, FillViewport };

package/FillViewport/FillViewport.js

@@ -0,0 +1,67 @@
+import react, { useEffect, useRef, useState } from "react";
+import { makeDecoratable } from "../utils.js";
+function useFillViewportStyle(axis) {
+    const ref = useRef(null);
+    const [style, setStyle] = useState();
+    useEffect(()=>{
+        const el = ref.current;
+        if (!el) return;
+        const measure = ()=>{
+            const rect = el.getBoundingClientRect();
+            const next = {};
+            if ("width" === axis || "both" === axis) next.width = window.innerWidth - rect.left;
+            if ("height" === axis || "both" === axis) next.height = window.innerHeight - rect.top;
+            setStyle(next);
+        };
+        measure();
+        const ro = new ResizeObserver(measure);
+        ro.observe(document.documentElement);
+        return ()=>ro.disconnect();
+    }, []);
+    return {
+        ref,
+        style
+    };
+}
+const BaseFillViewportHeight = ({ children, style: userStyle, ...rest })=>{
+    const { ref, style } = useFillViewportStyle("height");
+    return /*#__PURE__*/ react.createElement("div", {
+        ...rest,
+        ref: ref,
+        "data-fill-viewport": "height",
+        style: void 0 !== style ? {
+            height: style.height,
+            ...userStyle
+        } : userStyle
+    }, children);
+};
+const BaseFillViewportWidth = ({ children, style: userStyle, ...rest })=>{
+    const { ref, style } = useFillViewportStyle("width");
+    return /*#__PURE__*/ react.createElement("div", {
+        ...rest,
+        ref: ref,
+        "data-fill-viewport": "width",
+        style: void 0 !== style ? {
+            width: style.width,
+            ...userStyle
+        } : userStyle
+    }, children);
+};
+const BaseFillViewport = ({ children, style: userStyle, ...rest })=>{
+    const { ref, style } = useFillViewportStyle("both");
+    return /*#__PURE__*/ react.createElement("div", {
+        ...rest,
+        ref: ref,
+        "data-fill-viewport": "both",
+        style: void 0 !== style ? {
+            ...style,
+            ...userStyle
+        } : userStyle
+    }, children);
+};
+const FillViewportHeight = makeDecoratable("FillViewportHeight", BaseFillViewportHeight);
+const FillViewportWidth = makeDecoratable("FillViewportWidth", BaseFillViewportWidth);
+const FillViewport = makeDecoratable("FillViewport", BaseFillViewport);
+export { FillViewport, FillViewportHeight, FillViewportWidth };
+
+//# sourceMappingURL=FillViewport.js.map

package/FillViewport/FillViewport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FillViewport/FillViewport.js","sources":["../../src/FillViewport/FillViewport.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport { makeDecoratable } from \"~/utils.js\";\n\ninterface FillViewportStyle {\n    width?: number;\n    height?: number;\n}\n\nfunction useFillViewportStyle(axis: \"width\" | \"height\" | \"both\") {\n    const ref = useRef<HTMLDivElement>(null);\n    const [style, setStyle] = useState<FillViewportStyle>();\n\n    useEffect(() => {\n        const el = ref.current;\n        if (!el) {\n            return;\n        }\n\n        const measure = () => {\n            const rect = el.getBoundingClientRect();\n            const next: FillViewportStyle = {};\n\n            if (axis === \"width\" || axis === \"both\") {\n                next.width = window.innerWidth - rect.left;\n            }\n\n            if (axis === \"height\" || axis === \"both\") {\n                next.height = window.innerHeight - rect.top;\n            }\n\n            setStyle(next);\n        };\n\n        measure();\n\n        const ro = new ResizeObserver(measure);\n        ro.observe(document.documentElement);\n\n        return () => ro.disconnect();\n    }, []);\n\n    return { ref, style };\n}\n\ntype FillViewportProps = React.HTMLAttributes<HTMLDivElement>;\n\nconst BaseFillViewportHeight = ({ children, style: userStyle, ...rest }: FillViewportProps) => {\n    const { ref, style } = useFillViewportStyle(\"height\");\n\n    return (\n        <div\n            {...rest}\n            ref={ref}\n            data-fill-viewport=\"height\"\n            style={style !== undefined ? { height: style.height, ...userStyle } : userStyle}\n        >\n            {children}\n        </div>\n    );\n};\n\nconst BaseFillViewportWidth = ({ children, style: userStyle, ...rest }: FillViewportProps) => {\n    const { ref, style } = useFillViewportStyle(\"width\");\n\n    return (\n        <div\n            {...rest}\n            ref={ref}\n            data-fill-viewport=\"width\"\n            style={style !== undefined ? { width: style.width, ...userStyle } : userStyle}\n        >\n            {children}\n        </div>\n    );\n};\n\nconst BaseFillViewport = ({ children, style: userStyle, ...rest }: FillViewportProps) => {\n    const { ref, style } = useFillViewportStyle(\"both\");\n\n    return (\n        <div\n            {...rest}\n            ref={ref}\n            data-fill-viewport=\"both\"\n            style={style !== undefined ? { ...style, ...userStyle } : userStyle}\n        >\n            {children}\n        </div>\n    );\n};\n\nconst FillViewportHeight = makeDecoratable(\"FillViewportHeight\", BaseFillViewportHeight);\nconst FillViewportWidth = makeDecoratable(\"FillViewportWidth\", BaseFillViewportWidth);\nconst FillViewport = makeDecoratable(\"FillViewport\", BaseFillViewport);\n\nexport { FillViewportHeight, FillViewportWidth, FillViewport };\n"],"names":["useFillViewportStyle","axis","ref","useRef","style","setStyle","useState","useEffect","el","measure","rect","next","window","ro","ResizeObserver","document","BaseFillViewportHeight","children","userStyle","rest","undefined","BaseFillViewportWidth","BaseFillViewport","FillViewportHeight","makeDecoratable","FillViewportWidth","FillViewport"],"mappings":";;AAQA,SAASA,qBAAqBC,IAAiC;IAC3D,MAAMC,MAAMC,OAAuB;IACnC,MAAM,CAACC,OAAOC,SAAS,GAAGC;IAE1BC,UAAU;QACN,MAAMC,KAAKN,IAAI,OAAO;QACtB,IAAI,CAACM,IACD;QAGJ,MAAMC,UAAU;YACZ,MAAMC,OAAOF,GAAG,qBAAqB;YACrC,MAAMG,OAA0B,CAAC;YAEjC,IAAIV,AAAS,YAATA,QAAoBA,AAAS,WAATA,MACpBU,KAAK,KAAK,GAAGC,OAAO,UAAU,GAAGF,KAAK,IAAI;YAG9C,IAAIT,AAAS,aAATA,QAAqBA,AAAS,WAATA,MACrBU,KAAK,MAAM,GAAGC,OAAO,WAAW,GAAGF,KAAK,GAAG;YAG/CL,SAASM;QACb;QAEAF;QAEA,MAAMI,KAAK,IAAIC,eAAeL;QAC9BI,GAAG,OAAO,CAACE,SAAS,eAAe;QAEnC,OAAO,IAAMF,GAAG,UAAU;IAC9B,GAAG,EAAE;IAEL,OAAO;QAAEX;QAAKE;IAAM;AACxB;AAIA,MAAMY,yBAAyB,CAAC,EAAEC,QAAQ,EAAE,OAAOC,SAAS,EAAE,GAAGC,MAAyB;IACtF,MAAM,EAAEjB,GAAG,EAAEE,KAAK,EAAE,GAAGJ,qBAAqB;IAE5C,OAAO,WAAP,GACI,oBAAC;QACI,GAAGmB,IAAI;QACR,KAAKjB;QACL,sBAAmB;QACnB,OAAOE,AAAUgB,WAAVhB,QAAsB;YAAE,QAAQA,MAAM,MAAM;YAAE,GAAGc,SAAS;QAAC,IAAIA;OAErED;AAGb;AAEA,MAAMI,wBAAwB,CAAC,EAAEJ,QAAQ,EAAE,OAAOC,SAAS,EAAE,GAAGC,MAAyB;IACrF,MAAM,EAAEjB,GAAG,EAAEE,KAAK,EAAE,GAAGJ,qBAAqB;IAE5C,OAAO,WAAP,GACI,oBAAC;QACI,GAAGmB,IAAI;QACR,KAAKjB;QACL,sBAAmB;QACnB,OAAOE,AAAUgB,WAAVhB,QAAsB;YAAE,OAAOA,MAAM,KAAK;YAAE,GAAGc,SAAS;QAAC,IAAIA;OAEnED;AAGb;AAEA,MAAMK,mBAAmB,CAAC,EAAEL,QAAQ,EAAE,OAAOC,SAAS,EAAE,GAAGC,MAAyB;IAChF,MAAM,EAAEjB,GAAG,EAAEE,KAAK,EAAE,GAAGJ,qBAAqB;IAE5C,OAAO,WAAP,GACI,oBAAC;QACI,GAAGmB,IAAI;QACR,KAAKjB;QACL,sBAAmB;QACnB,OAAOE,AAAUgB,WAAVhB,QAAsB;YAAE,GAAGA,KAAK;YAAE,GAAGc,SAAS;QAAC,IAAIA;OAEzDD;AAGb;AAEA,MAAMM,qBAAqBC,gBAAgB,sBAAsBR;AACjE,MAAMS,oBAAoBD,gBAAgB,qBAAqBH;AAC/D,MAAMK,eAAeF,gBAAgB,gBAAgBF"}

package/FillViewport/index.d.ts

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

package/FillViewport/index.js

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

package/FormComponent/Description.d.ts

@@ -7,21 +7,22 @@ declare const formComponentDescriptionVariants: (props?: ({
 type FormComponentDescriptionProps = TextProps & VariantProps<typeof formComponentDescriptionVariants> & {
     text?: React.ReactNode;
 };
-declare const FormComponentDescription: (({ text, disabled, className, ...props }: FormComponentDescriptionProps) => React.JSX.Element | null) & {
-    original: ({ text, disabled, className, ...props }: FormComponentDescriptionProps) => React.JSX.Element | null;
+declare const DecoratableFormComponentDescription: ({ text, disabled, className, ...props }: FormComponentDescriptionProps) => React.JSX.Element | null;
+declare const FormComponentDescription: typeof DecoratableFormComponentDescription & {
+    original: typeof DecoratableFormComponentDescription;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ text, disabled, className, ...props }: FormComponentDescriptionProps) => React.JSX.Element | null) & {
-        original: ({ text, disabled, className, ...props }: FormComponentDescriptionProps) => React.JSX.Element | null;
+    original: typeof DecoratableFormComponentDescription & {
+        original: typeof DecoratableFormComponentDescription;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ text, disabled, className, ...props }: FormComponentDescriptionProps) => React.JSX.Element | null) & {
-        original: ({ text, disabled, className, ...props }: FormComponentDescriptionProps) => React.JSX.Element | null;
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof DecoratableFormComponentDescription & {
+        original: typeof DecoratableFormComponentDescription;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/FormComponent/ErrorMessage.d.ts

@@ -8,21 +8,22 @@ type FormComponentErrorMessageProps = TextProps & VariantProps<typeof formCompon
     text?: React.ReactNode;
     invalid?: boolean;
 };
-declare const FormComponentErrorMessage: (({ invalid, disabled, className, text, ...props }: FormComponentErrorMessageProps) => React.JSX.Element | null) & {
-    original: ({ invalid, disabled, className, text, ...props }: FormComponentErrorMessageProps) => React.JSX.Element | null;
+declare const DecoratableFormComponentErrorMessage: ({ invalid, disabled, className, text, ...props }: FormComponentErrorMessageProps) => React.JSX.Element | null;
+declare const FormComponentErrorMessage: typeof DecoratableFormComponentErrorMessage & {
+    original: typeof DecoratableFormComponentErrorMessage;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ invalid, disabled, className, text, ...props }: FormComponentErrorMessageProps) => React.JSX.Element | null) & {
-        original: ({ invalid, disabled, className, text, ...props }: FormComponentErrorMessageProps) => React.JSX.Element | null;
+    original: typeof DecoratableFormComponentErrorMessage & {
+        original: typeof DecoratableFormComponentErrorMessage;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ invalid, disabled, className, text, ...props }: FormComponentErrorMessageProps) => React.JSX.Element | null) & {
-        original: ({ invalid, disabled, className, text, ...props }: FormComponentErrorMessageProps) => React.JSX.Element | null;
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof DecoratableFormComponentErrorMessage & {
+        original: typeof DecoratableFormComponentErrorMessage;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/FormComponent/Label.d.ts

@@ -8,21 +8,22 @@ interface FormComponentLabelProps extends React.HTMLAttributes<HTMLDivElement> {
     hint?: React.ReactNode;
     htmlFor?: string;
 }
-declare const FormComponentLabel: (({ htmlFor, text, required, disabled, hint, invalid, className, ...props }: FormComponentLabelProps) => React.JSX.Element | null) & {
-    original: ({ htmlFor, text, required, disabled, hint, invalid, className, ...props }: FormComponentLabelProps) => React.JSX.Element | null;
+declare const DecoratableFormComponentLabel: ({ htmlFor, text, required, disabled, hint, invalid, className, ...props }: FormComponentLabelProps) => React.JSX.Element | null;
+declare const FormComponentLabel: typeof DecoratableFormComponentLabel & {
+    original: typeof DecoratableFormComponentLabel;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ htmlFor, text, required, disabled, hint, invalid, className, ...props }: FormComponentLabelProps) => React.JSX.Element | null) & {
-        original: ({ htmlFor, text, required, disabled, hint, invalid, className, ...props }: FormComponentLabelProps) => React.JSX.Element | null;
+    original: typeof DecoratableFormComponentLabel & {
+        original: typeof DecoratableFormComponentLabel;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ htmlFor, text, required, disabled, hint, invalid, className, ...props }: FormComponentLabelProps) => React.JSX.Element | null) & {
-        original: ({ htmlFor, text, required, disabled, hint, invalid, className, ...props }: FormComponentLabelProps) => React.JSX.Element | null;
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof DecoratableFormComponentLabel & {
+        original: typeof DecoratableFormComponentLabel;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;