@webiny/admin-ui 0.0.0-unstable.2aaa1916d9 → 0.0.0-unstable.33e4fd9647

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

@@ -1 +1 @@
-{"version":3,"names":["React","cn","makeDecoratable","previewVariants","ItemActions","DecoratableImagePreview","value","className","variant","disabled","onRemoveItem","onReplaceItem","onEditItem","createElement","onClick","src","url","alt","name","ImagePreview"],"sources":["ImagePreview.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, makeDecoratable } from \"~/utils\";\nimport { previewVariants } from \"../variants\";\nimport type { FilePreviewDefaultProps } from \"../../types\";\nimport { ItemActions } from \"~/FilePicker/primitives/components/previews/ItemActions\";\n\ntype ImagePreviewProps = FilePreviewDefaultProps;\n\nconst DecoratableImagePreview = ({\n    value,\n    className,\n    variant,\n    disabled,\n    onRemoveItem,\n    onReplaceItem,\n    onEditItem\n}: ImagePreviewProps) => {\n    return (\n        <div\n            className={cn(\n                \"wby-flex wby-justify-center wby-items-center wby-py-sm wby-rounded-md wby-relative\",\n                previewVariants({ variant }),\n                className\n            )}\n            data-testid={\"image-preview\"}\n        >\n            <div\n                className={\n                    \"wby-cursor-pointer wby-size-[128px] wby-flex wby-justify-center wby-items-center\"\n                }\n                data-role={\"select-image\"}\n                onClick={onReplaceItem}\n            >\n                <img\n                    src={value.url}\n                    alt={value.name}\n                    className={\"wby-object-contain wby-size-full\"}\n                />\n            </div>\n            <div className={\"wby-absolute wby-top-1 wby-right-1.5\"}>\n                <ItemActions\n                    onRemoveItem={onRemoveItem}\n                    onEditItem={onEditItem}\n                    disabled={disabled}\n                    className={\"wby-flex-col\"}\n                />\n            </div>\n        </div>\n    );\n};\n\nconst ImagePreview = makeDecoratable(\"FileImagePreview\", DecoratableImagePreview);\n\nexport { ImagePreview, type ImagePreviewProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,EAAE,EAAEC,eAAe;AAC5B,SAASC,eAAe;AAExB,SAASC,WAAW;AAIpB,MAAMC,uBAAuB,GAAGA,CAAC;EAC7BC,KAAK;EACLC,SAAS;EACTC,OAAO;EACPC,QAAQ;EACRC,YAAY;EACZC,aAAa;EACbC;AACe,CAAC,KAAK;EACrB,oBACIZ,KAAA,CAAAa,aAAA;IACIN,SAAS,EAAEN,EAAE,CACT,oFAAoF,EACpFE,eAAe,CAAC;MAAEK;IAAQ,CAAC,CAAC,EAC5BD,SACJ,CAAE;IACF,eAAa;EAAgB,gBAE7BP,KAAA,CAAAa,aAAA;IACIN,SAAS,EACL,kFACH;IACD,aAAW,cAAe;IAC1BO,OAAO,EAAEH;EAAc,gBAEvBX,KAAA,CAAAa,aAAA;IACIE,GAAG,EAAET,KAAK,CAACU,GAAI;IACfC,GAAG,EAAEX,KAAK,CAACY,IAAK;IAChBX,SAAS,EAAE;EAAmC,CACjD,CACA,CAAC,eACNP,KAAA,CAAAa,aAAA;IAAKN,SAAS,EAAE;EAAuC,gBACnDP,KAAA,CAAAa,aAAA,CAACT,WAAW;IACRM,YAAY,EAAEA,YAAa;IAC3BE,UAAU,EAAEA,UAAW;IACvBH,QAAQ,EAAEA,QAAS;IACnBF,SAAS,EAAE;EAAe,CAC7B,CACA,CACJ,CAAC;AAEd,CAAC;AAED,MAAMY,YAAY,GAAGjB,eAAe,CAAC,kBAAkB,EAAEG,uBAAuB,CAAC;AAEjF,SAASc,YAAY","ignoreList":[]}
+{"version":3,"file":"FilePicker/primitives/components/previews/ImagePreview/ImagePreview.js","sources":["../../../../../../src/FilePicker/primitives/components/previews/ImagePreview/ImagePreview.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, makeDecoratable } from \"~/utils.js\";\nimport { previewVariants } from \"../variants.js\";\nimport type { FilePreviewDefaultProps } from \"../../types.js\";\nimport { ItemActions } from \"~/FilePicker/primitives/components/previews/ItemActions.js\";\n\ntype ImagePreviewProps = FilePreviewDefaultProps & {\n    /**\n     * Optional custom image renderer. Lets a consumer render, e.g., a cropped /\n     * focal-point-aware thumbnail while keeping all of the preview chrome. When\n     * omitted (or it returns a falsy value) a plain `<img>` is rendered.\n     */\n    renderImage?: (args: { url: string; name: string; className: string }) => React.ReactNode;\n};\n\nconst IMAGE_CLASS = \"object-contain size-full\";\n\nconst DecoratableImagePreview = ({\n    value,\n    className,\n    variant,\n    disabled,\n    onRemoveItem,\n    onReplaceItem,\n    onEditItem,\n    renderImage\n}: ImagePreviewProps) => {\n    let image: React.ReactElement | React.ReactNode = (\n        <img src={value.url} alt={value.name} className={IMAGE_CLASS} />\n    );\n\n    if (typeof renderImage === \"function\") {\n        image = renderImage({ url: value.url, name: value.name, className: IMAGE_CLASS });\n    }\n\n    return (\n        <div\n            className={cn(\n                \"flex justify-center items-center py-sm rounded-md relative\",\n                previewVariants({ variant }),\n                className\n            )}\n            data-testid={\"image-preview\"}\n        >\n            <div\n                className={\"cursor-pointer size-[128px] flex justify-center items-center\"}\n                data-role={\"select-image\"}\n                onClick={onReplaceItem}\n            >\n                {image}\n            </div>\n            <div className={\"absolute top-1 right-1.5\"}>\n                <ItemActions\n                    onRemoveItem={onRemoveItem}\n                    onEditItem={onEditItem}\n                    disabled={disabled}\n                    className={\"flex-col\"}\n                />\n            </div>\n        </div>\n    );\n};\n\nconst ImagePreview = makeDecoratable(\"FileImagePreview\", DecoratableImagePreview);\n\nexport { ImagePreview, type ImagePreviewProps };\n"],"names":["IMAGE_CLASS","DecoratableImagePreview","value","className","variant","disabled","onRemoveItem","onReplaceItem","onEditItem","renderImage","image","cn","previewVariants","ItemActions","ImagePreview","makeDecoratable"],"mappings":";;;;AAeA,MAAMA,cAAc;AAEpB,MAAMC,0BAA0B,CAAC,EAC7BC,KAAK,EACLC,SAAS,EACTC,OAAO,EACPC,QAAQ,EACRC,YAAY,EACZC,aAAa,EACbC,UAAU,EACVC,WAAW,EACK;IAChB,IAAIC,QAAAA,WAAAA,GACA,oBAAC;QAAI,KAAKR,MAAM,GAAG;QAAE,KAAKA,MAAM,IAAI;QAAE,WAAWF;;IAGrD,IAAI,AAAuB,cAAvB,OAAOS,aACPC,QAAQD,YAAY;QAAE,KAAKP,MAAM,GAAG;QAAE,MAAMA,MAAM,IAAI;QAAE,WAAWF;IAAY;IAGnF,OAAO,WAAP,GACI,oBAAC;QACG,WAAWW,GACP,8DACAC,gBAAgB;YAAER;QAAQ,IAC1BD;QAEJ,eAAa;qBAEb,oBAAC;QACG,WAAW;QACX,aAAW;QACX,SAASI;OAERG,QAAAA,WAAAA,GAEL,oBAAC;QAAI,WAAW;qBACZ,oBAACG,aAAWA;QACR,cAAcP;QACd,YAAYE;QACZ,UAAUH;QACV,WAAW;;AAK/B;AAEA,MAAMS,eAAeC,gBAAgB,oBAAoBd"}

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

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

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

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

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

@@ -1,60 +1,53 @@
-import React from "react";
-import { ReactComponent as ReplaceIcon } from "@webiny/icons/file_upload.svg";
-import { ReactComponent as EditIcon } from "@webiny/icons/edit.svg";
-import { ReactComponent as TrashIcon } from "@webiny/icons/delete.svg";
-import { IconButton } from "../../../../Button";
-import { Icon } from "../../../../Icon";
-import { cn } from "../../../../utils";
-const ItemActions = ({
-  disabled,
-  onRemoveItem,
-  onEditItem,
-  onReplaceItem,
-  small,
-  className,
-  ...props
-}) => {
-  const iconSize = small ? "default" : "lg";
-  const buttonSize = small ? "xs" : "sm";
-  return /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
-    className: cn("wby-flex wby-justify-center wby-items-center wby-gap-xs", className)
-  }), small && onReplaceItem && /*#__PURE__*/React.createElement(IconButton, {
-    icon: /*#__PURE__*/React.createElement(Icon, {
-      icon: /*#__PURE__*/React.createElement(ReplaceIcon, null),
-      label: "Replace",
-      size: "md",
-      color: "neutral-light"
-    }),
-    variant: "ghost",
-    size: buttonSize,
-    iconSize: iconSize,
-    onClick: onReplaceItem,
-    disabled: disabled
-  }), onEditItem && /*#__PURE__*/React.createElement(IconButton, {
-    icon: /*#__PURE__*/React.createElement(Icon, {
-      icon: /*#__PURE__*/React.createElement(EditIcon, null),
-      label: "Edit",
-      size: "md",
-      color: "neutral-light"
-    }),
-    variant: "ghost",
-    size: buttonSize,
-    iconSize: iconSize,
-    onClick: onEditItem,
-    disabled: disabled
-  }), onRemoveItem && /*#__PURE__*/React.createElement(IconButton, {
-    icon: /*#__PURE__*/React.createElement(Icon, {
-      icon: /*#__PURE__*/React.createElement(TrashIcon, null),
-      label: "Remove",
-      size: "md",
-      color: "neutral-light"
-    }),
-    variant: "ghost",
-    size: buttonSize,
-    iconSize: iconSize,
-    onClick: onRemoveItem,
-    disabled: disabled
-  }));
+import react 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 { Icon } from "../../../../Icon/index.js";
+import { cn } from "../../../../utils.js";
+const ItemActions = ({ disabled, onRemoveItem, onEditItem, onReplaceItem, small, className, ...props })=>{
+    const iconSize = small ? "default" : "lg";
+    const buttonSize = small ? "xs" : "sm";
+    return /*#__PURE__*/ react.createElement("div", {
+        ...props,
+        className: cn("flex justify-center items-center gap-xs", className)
+    }, onReplaceItem && /*#__PURE__*/ react.createElement(IconButton, {
+        icon: /*#__PURE__*/ react.createElement(Icon, {
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            label: "Replace",
+            size: "md",
+            color: "neutral-light"
+        }),
+        variant: "ghost",
+        size: buttonSize,
+        iconSize: iconSize,
+        onClick: onReplaceItem,
+        disabled: disabled
+    }), onEditItem && /*#__PURE__*/ react.createElement(IconButton, {
+        icon: /*#__PURE__*/ react.createElement(Icon, {
+            icon: /*#__PURE__*/ react.createElement(edit_svg_ReactComponent, null),
+            label: "Edit",
+            size: "md",
+            color: "neutral-light"
+        }),
+        variant: "ghost",
+        size: buttonSize,
+        iconSize: iconSize,
+        onClick: onEditItem,
+        disabled: disabled
+    }), onRemoveItem && /*#__PURE__*/ react.createElement(IconButton, {
+        icon: /*#__PURE__*/ react.createElement(Icon, {
+            icon: /*#__PURE__*/ react.createElement(delete_svg_ReactComponent, null),
+            label: "Remove",
+            size: "md",
+            color: "neutral-light"
+        }),
+        variant: "ghost",
+        size: buttonSize,
+        iconSize: iconSize,
+        onClick: onRemoveItem,
+        disabled: disabled
+    }));
 };
 export { ItemActions };
 

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

@@ -1 +1 @@
-{"version":3,"names":["React","ReactComponent","ReplaceIcon","EditIcon","TrashIcon","IconButton","Icon","cn","ItemActions","disabled","onRemoveItem","onEditItem","onReplaceItem","small","className","props","iconSize","buttonSize","createElement","Object","assign","icon","label","size","color","variant","onClick"],"sources":["ItemActions.tsx"],"sourcesContent":["import React 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\";\nimport { Icon } from \"~/Icon\";\nimport { cn } from \"~/utils\";\n\ninterface ItemActionsProps extends React.HTMLAttributes<HTMLDivElement> {\n    onRemoveItem?: () => void;\n    onEditItem?: () => void;\n    onReplaceItem?: () => void;\n    disabled?: boolean;\n    small?: boolean;\n}\n\nconst ItemActions = ({\n    disabled,\n    onRemoveItem,\n    onEditItem,\n    onReplaceItem,\n    small,\n    className,\n    ...props\n}: ItemActionsProps) => {\n    const iconSize = small ? \"default\" : \"lg\";\n    const buttonSize = small ? \"xs\" : \"sm\";\n\n    return (\n        <div\n            {...props}\n            className={cn(\"wby-flex wby-justify-center wby-items-center wby-gap-xs\", className)}\n        >\n            {small && onReplaceItem && (\n                <IconButton\n                    icon={\n                        <Icon\n                            icon={<ReplaceIcon />}\n                            label={\"Replace\"}\n                            size={\"md\"}\n                            color={\"neutral-light\"}\n                        />\n                    }\n                    variant={\"ghost\"}\n                    size={buttonSize}\n                    iconSize={iconSize}\n                    onClick={onReplaceItem}\n                    disabled={disabled}\n                />\n            )}\n\n            {onEditItem && (\n                <IconButton\n                    icon={\n                        <Icon\n                            icon={<EditIcon />}\n                            label={\"Edit\"}\n                            size={\"md\"}\n                            color={\"neutral-light\"}\n                        />\n                    }\n                    variant={\"ghost\"}\n                    size={buttonSize}\n                    iconSize={iconSize}\n                    onClick={onEditItem}\n                    disabled={disabled}\n                />\n            )}\n\n            {onRemoveItem && (\n                <IconButton\n                    icon={\n                        <Icon\n                            icon={<TrashIcon />}\n                            label={\"Remove\"}\n                            size={\"md\"}\n                            color={\"neutral-light\"}\n                        />\n                    }\n                    variant={\"ghost\"}\n                    size={buttonSize}\n                    iconSize={iconSize}\n                    onClick={onRemoveItem}\n                    disabled={disabled}\n                />\n            )}\n        </div>\n    );\n};\n\nexport { ItemActions, type ItemActionsProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,cAAc,IAAIC,WAAW,QAAQ,+BAA+B;AAC7E,SAASD,cAAc,IAAIE,QAAQ,QAAQ,wBAAwB;AACnE,SAASF,cAAc,IAAIG,SAAS,QAAQ,0BAA0B;AACtE,SAASC,UAAU;AACnB,SAASC,IAAI;AACb,SAASC,EAAE;AAUX,MAAMC,WAAW,GAAGA,CAAC;EACjBC,QAAQ;EACRC,YAAY;EACZC,UAAU;EACVC,aAAa;EACbC,KAAK;EACLC,SAAS;EACT,GAAGC;AACW,CAAC,KAAK;EACpB,MAAMC,QAAQ,GAAGH,KAAK,GAAG,SAAS,GAAG,IAAI;EACzC,MAAMI,UAAU,GAAGJ,KAAK,GAAG,IAAI,GAAG,IAAI;EAEtC,oBACIb,KAAA,CAAAkB,aAAA,QAAAC,MAAA,CAAAC,MAAA,KACQL,KAAK;IACTD,SAAS,EAAEP,EAAE,CAAC,yDAAyD,EAAEO,SAAS;EAAE,IAEnFD,KAAK,IAAID,aAAa,iBACnBZ,KAAA,CAAAkB,aAAA,CAACb,UAAU;IACPgB,IAAI,eACArB,KAAA,CAAAkB,aAAA,CAACZ,IAAI;MACDe,IAAI,eAAErB,KAAA,CAAAkB,aAAA,CAAChB,WAAW,MAAE,CAAE;MACtBoB,KAAK,EAAE,SAAU;MACjBC,IAAI,EAAE,IAAK;MACXC,KAAK,EAAE;IAAgB,CAC1B,CACJ;IACDC,OAAO,EAAE,OAAQ;IACjBF,IAAI,EAAEN,UAAW;IACjBD,QAAQ,EAAEA,QAAS;IACnBU,OAAO,EAAEd,aAAc;IACvBH,QAAQ,EAAEA;EAAS,CACtB,CACJ,EAEAE,UAAU,iBACPX,KAAA,CAAAkB,aAAA,CAACb,UAAU;IACPgB,IAAI,eACArB,KAAA,CAAAkB,aAAA,CAACZ,IAAI;MACDe,IAAI,eAAErB,KAAA,CAAAkB,aAAA,CAACf,QAAQ,MAAE,CAAE;MACnBmB,KAAK,EAAE,MAAO;MACdC,IAAI,EAAE,IAAK;MACXC,KAAK,EAAE;IAAgB,CAC1B,CACJ;IACDC,OAAO,EAAE,OAAQ;IACjBF,IAAI,EAAEN,UAAW;IACjBD,QAAQ,EAAEA,QAAS;IACnBU,OAAO,EAAEf,UAAW;IACpBF,QAAQ,EAAEA;EAAS,CACtB,CACJ,EAEAC,YAAY,iBACTV,KAAA,CAAAkB,aAAA,CAACb,UAAU;IACPgB,IAAI,eACArB,KAAA,CAAAkB,aAAA,CAACZ,IAAI;MACDe,IAAI,eAAErB,KAAA,CAAAkB,aAAA,CAACd,SAAS,MAAE,CAAE;MACpBkB,KAAK,EAAE,QAAS;MAChBC,IAAI,EAAE,IAAK;MACXC,KAAK,EAAE;IAAgB,CAC1B,CACJ;IACDC,OAAO,EAAE,OAAQ;IACjBF,IAAI,EAAEN,UAAW;IACjBD,QAAQ,EAAEA,QAAS;IACnBU,OAAO,EAAEhB,YAAa;IACtBD,QAAQ,EAAEA;EAAS,CACtB,CAEJ,CAAC;AAEd,CAAC;AAED,SAASD,WAAW","ignoreList":[]}
+{"version":3,"file":"FilePicker/primitives/components/previews/ItemActions.js","sources":["../../../../../src/FilePicker/primitives/components/previews/ItemActions.tsx"],"sourcesContent":["import React 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 { Icon } from \"~/Icon/index.js\";\nimport { cn } from \"~/utils.js\";\n\ninterface ItemActionsProps extends React.HTMLAttributes<HTMLDivElement> {\n    onRemoveItem?: () => void;\n    onEditItem?: () => void;\n    onReplaceItem?: () => void;\n    disabled?: boolean;\n    small?: boolean;\n}\n\nconst ItemActions = ({\n    disabled,\n    onRemoveItem,\n    onEditItem,\n    onReplaceItem,\n    small,\n    className,\n    ...props\n}: ItemActionsProps) => {\n    const iconSize = small ? \"default\" : \"lg\";\n    const buttonSize = small ? \"xs\" : \"sm\";\n\n    return (\n        <div {...props} className={cn(\"flex justify-center items-center gap-xs\", className)}>\n            {onReplaceItem && (\n                <IconButton\n                    icon={\n                        <Icon\n                            icon={<ReplaceIcon />}\n                            label={\"Replace\"}\n                            size={\"md\"}\n                            color={\"neutral-light\"}\n                        />\n                    }\n                    variant={\"ghost\"}\n                    size={buttonSize}\n                    iconSize={iconSize}\n                    onClick={onReplaceItem}\n                    disabled={disabled}\n                />\n            )}\n\n            {onEditItem && (\n                <IconButton\n                    icon={\n                        <Icon\n                            icon={<EditIcon />}\n                            label={\"Edit\"}\n                            size={\"md\"}\n                            color={\"neutral-light\"}\n                        />\n                    }\n                    variant={\"ghost\"}\n                    size={buttonSize}\n                    iconSize={iconSize}\n                    onClick={onEditItem}\n                    disabled={disabled}\n                />\n            )}\n\n            {onRemoveItem && (\n                <IconButton\n                    icon={\n                        <Icon\n                            icon={<TrashIcon />}\n                            label={\"Remove\"}\n                            size={\"md\"}\n                            color={\"neutral-light\"}\n                        />\n                    }\n                    variant={\"ghost\"}\n                    size={buttonSize}\n                    iconSize={iconSize}\n                    onClick={onRemoveItem}\n                    disabled={disabled}\n                />\n            )}\n        </div>\n    );\n};\n\nexport { ItemActions, type ItemActionsProps };\n"],"names":["ItemActions","disabled","onRemoveItem","onEditItem","onReplaceItem","small","className","props","iconSize","buttonSize","cn","IconButton","Icon","ReplaceIcon","EditIcon","TrashIcon"],"mappings":";;;;;;;AAgBA,MAAMA,cAAc,CAAC,EACjBC,QAAQ,EACRC,YAAY,EACZC,UAAU,EACVC,aAAa,EACbC,KAAK,EACLC,SAAS,EACT,GAAGC,OACY;IACf,MAAMC,WAAWH,QAAQ,YAAY;IACrC,MAAMI,aAAaJ,QAAQ,OAAO;IAElC,OAAO,WAAP,GACI,oBAAC;QAAK,GAAGE,KAAK;QAAE,WAAWG,GAAG,2CAA2CJ;OACpEF,iBAAiB,WAAjBA,GACG,oBAACO,YAAUA;QACP,oBACI,oBAACC,MAAIA;YACD,oBAAM,oBAACC,gBAAWA;YAClB,OAAO;YACP,MAAM;YACN,OAAO;;QAGf,SAAS;QACT,MAAMJ;QACN,UAAUD;QACV,SAASJ;QACT,UAAUH;QAIjBE,cAAc,WAAdA,GACG,oBAACQ,YAAUA;QACP,oBACI,oBAACC,MAAIA;YACD,oBAAM,oBAACE,yBAAQA;YACf,OAAO;YACP,MAAM;YACN,OAAO;;QAGf,SAAS;QACT,MAAML;QACN,UAAUD;QACV,SAASL;QACT,UAAUF;QAIjBC,gBAAgB,WAAhBA,GACG,oBAACS,YAAUA;QACP,oBACI,oBAACC,MAAIA;YACD,oBAAM,oBAACG,2BAASA;YAChB,OAAO;YACP,MAAM;YACN,OAAO;;QAGf,SAAS;QACT,MAAMN;QACN,UAAUD;QACV,SAASN;QACT,UAAUD;;AAK9B"}

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

@@ -1,5 +1,5 @@
 import React from "react";
-import type { FileItemFormatted } from "../../..";
+import type { FileItemFormatted } from "../../../../FilePicker/index.js";
 interface ItemDescriptionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
     item: FileItemFormatted;
     disabled?: boolean;

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

@@ -1,27 +1,25 @@
-import React from "react";
+import react from "react";
 import bytes from "bytes";
-import { Text } from "../../../../Text";
-import { cn } from "../../../../utils";
-const ItemDescription = ({
-  className,
-  disabled,
-  item,
-  small,
-  ...props
-}) => {
-  const formattedSize = item.size && bytes.format(item.size, {
-    unitSeparator: " "
-  });
-  return /*#__PURE__*/React.createElement("div", Object.assign({
-    className: cn("wby-flex wby-flex-col wby-gap-xxs wby-overflow-hidden wby-flex-1 wby-min-w-0", className)
-  }, props), /*#__PURE__*/React.createElement(Text, {
-    size: "sm",
-    as: "div",
-    className: cn("wby-truncate wby-overflow-hidden wby-whitespace-nowrap wby-w-full", disabled ? "wby-text-neutral-disabled" : "wby-text-neutral-primary")
-  }, item.name), !small && (formattedSize || item.mimeType) && /*#__PURE__*/React.createElement(Text, {
-    size: "sm",
-    className: cn("wby-truncate wby-overflow-hidden wby-whitespace-nowrap wby-w-full", disabled ? "wby-text-neutral-disabled" : "wby-text-neutral-muted")
-  }, [formattedSize, item.mimeType].filter(Boolean).join(" - ")));
+import { Text } from "../../../../Text/index.js";
+import { cn } from "../../../../utils.js";
+const ItemDescription = ({ className, disabled, item, small, ...props })=>{
+    const formattedSize = item.size && bytes.format(item.size, {
+        unitSeparator: " "
+    });
+    return /*#__PURE__*/ react.createElement("div", {
+        className: cn("flex flex-col gap-xxs overflow-hidden min-w-0", className),
+        ...props
+    }, /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        as: "div",
+        className: cn("truncate overflow-hidden whitespace-nowrap w-full", disabled ? "text-neutral-disabled" : "text-neutral-primary")
+    }, item.name), !small && (formattedSize || item.mimeType) && /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        className: cn("truncate overflow-hidden whitespace-nowrap w-full", disabled ? "text-neutral-disabled" : "text-neutral-muted")
+    }, [
+        formattedSize,
+        item.mimeType
+    ].filter(Boolean).join(" - ")));
 };
 export { ItemDescription };
 

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

@@ -1 +1 @@
-{"version":3,"names":["React","bytes","Text","cn","ItemDescription","className","disabled","item","small","props","formattedSize","size","format","unitSeparator","createElement","Object","assign","as","name","mimeType","filter","Boolean","join"],"sources":["ItemDescription.tsx"],"sourcesContent":["import React from \"react\";\nimport bytes from \"bytes\";\nimport { Text } from \"~/Text\";\nimport { cn } from \"~/utils\";\nimport type { FileItemFormatted } from \"~/FilePicker\";\n\ninterface ItemDescriptionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"children\"> {\n    item: FileItemFormatted;\n    disabled?: boolean;\n    small?: boolean;\n}\n\nconst ItemDescription = ({ className, disabled, item, small, ...props }: ItemDescriptionProps) => {\n    const formattedSize = item.size && bytes.format(item.size, { unitSeparator: \" \" });\n\n    return (\n        <div\n            className={cn(\n                \"wby-flex wby-flex-col wby-gap-xxs wby-overflow-hidden wby-flex-1 wby-min-w-0\",\n                className\n            )}\n            {...props}\n        >\n            <Text\n                size=\"sm\"\n                as=\"div\"\n                className={cn(\n                    \"wby-truncate wby-overflow-hidden wby-whitespace-nowrap wby-w-full\",\n                    disabled ? \"wby-text-neutral-disabled\" : \"wby-text-neutral-primary\"\n                )}\n            >\n                {item.name}\n            </Text>\n            {!small && (formattedSize || item.mimeType) && (\n                <Text\n                    size=\"sm\"\n                    className={cn(\n                        \"wby-truncate wby-overflow-hidden wby-whitespace-nowrap wby-w-full\",\n                        disabled ? \"wby-text-neutral-disabled\" : \"wby-text-neutral-muted\"\n                    )}\n                >\n                    {[formattedSize, item.mimeType].filter(Boolean).join(\" - \")}\n                </Text>\n            )}\n        </div>\n    );\n};\n\nexport { ItemDescription, type ItemDescriptionProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI;AACb,SAASC,EAAE;AASX,MAAMC,eAAe,GAAGA,CAAC;EAAEC,SAAS;EAAEC,QAAQ;EAAEC,IAAI;EAAEC,KAAK;EAAE,GAAGC;AAA4B,CAAC,KAAK;EAC9F,MAAMC,aAAa,GAAGH,IAAI,CAACI,IAAI,IAAIV,KAAK,CAACW,MAAM,CAACL,IAAI,CAACI,IAAI,EAAE;IAAEE,aAAa,EAAE;EAAI,CAAC,CAAC;EAElF,oBACIb,KAAA,CAAAc,aAAA,QAAAC,MAAA,CAAAC,MAAA;IACIX,SAAS,EAAEF,EAAE,CACT,8EAA8E,EAC9EE,SACJ;EAAE,GACEI,KAAK,gBAETT,KAAA,CAAAc,aAAA,CAACZ,IAAI;IACDS,IAAI,EAAC,IAAI;IACTM,EAAE,EAAC,KAAK;IACRZ,SAAS,EAAEF,EAAE,CACT,mEAAmE,EACnEG,QAAQ,GAAG,2BAA2B,GAAG,0BAC7C;EAAE,GAEDC,IAAI,CAACW,IACJ,CAAC,EACN,CAACV,KAAK,KAAKE,aAAa,IAAIH,IAAI,CAACY,QAAQ,CAAC,iBACvCnB,KAAA,CAAAc,aAAA,CAACZ,IAAI;IACDS,IAAI,EAAC,IAAI;IACTN,SAAS,EAAEF,EAAE,CACT,mEAAmE,EACnEG,QAAQ,GAAG,2BAA2B,GAAG,wBAC7C;EAAE,GAED,CAACI,aAAa,EAAEH,IAAI,CAACY,QAAQ,CAAC,CAACC,MAAM,CAACC,OAAO,CAAC,CAACC,IAAI,CAAC,KAAK,CACxD,CAET,CAAC;AAEd,CAAC;AAED,SAASlB,eAAe","ignoreList":[]}
+{"version":3,"file":"FilePicker/primitives/components/previews/ItemDescription.js","sources":["../../../../../src/FilePicker/primitives/components/previews/ItemDescription.tsx"],"sourcesContent":["import React from \"react\";\nimport bytes from \"bytes\";\nimport { Text } from \"~/Text/index.js\";\nimport { cn } from \"~/utils.js\";\nimport type { FileItemFormatted } from \"~/FilePicker/index.js\";\n\ninterface ItemDescriptionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"children\"> {\n    item: FileItemFormatted;\n    disabled?: boolean;\n    small?: boolean;\n}\n\nconst ItemDescription = ({ className, disabled, item, small, ...props }: ItemDescriptionProps) => {\n    const formattedSize = item.size && bytes.format(item.size, { unitSeparator: \" \" });\n\n    return (\n        <div className={cn(\"flex flex-col gap-xxs overflow-hidden min-w-0\", className)} {...props}>\n            <Text\n                size=\"sm\"\n                as=\"div\"\n                className={cn(\n                    \"truncate overflow-hidden whitespace-nowrap w-full\",\n                    disabled ? \"text-neutral-disabled\" : \"text-neutral-primary\"\n                )}\n            >\n                {item.name}\n            </Text>\n            {!small && (formattedSize || item.mimeType) && (\n                <Text\n                    size=\"sm\"\n                    className={cn(\n                        \"truncate overflow-hidden whitespace-nowrap w-full\",\n                        disabled ? \"text-neutral-disabled\" : \"text-neutral-muted\"\n                    )}\n                >\n                    {[formattedSize, item.mimeType].filter(Boolean).join(\" - \")}\n                </Text>\n            )}\n        </div>\n    );\n};\n\nexport { ItemDescription, type ItemDescriptionProps };\n"],"names":["ItemDescription","className","disabled","item","small","props","formattedSize","bytes","cn","Text","Boolean"],"mappings":";;;;AAYA,MAAMA,kBAAkB,CAAC,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGC,OAA6B;IACzF,MAAMC,gBAAgBH,KAAK,IAAI,IAAII,MAAM,MAAM,CAACJ,KAAK,IAAI,EAAE;QAAE,eAAe;IAAI;IAEhF,OAAO,WAAP,GACI,oBAAC;QAAI,WAAWK,GAAG,iDAAiDP;QAAa,GAAGI,KAAK;qBACrF,oBAACI,MAAIA;QACD,MAAK;QACL,IAAG;QACH,WAAWD,GACP,qDACAN,WAAW,0BAA0B;OAGxCC,KAAK,IAAI,GAEb,CAACC,SAAUE,CAAAA,iBAAiBH,KAAK,QAAO,mBACrC,oBAACM,MAAIA;QACD,MAAK;QACL,WAAWD,GACP,qDACAN,WAAW,0BAA0B;OAGxC;QAACI;QAAeH,KAAK,QAAQ;KAAC,CAAC,MAAM,CAACO,SAAS,IAAI,CAAC;AAKzE"}

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

@@ -0,0 +1,5 @@
+import React from "react";
+import type { FileItemFormatted } from "../../../../../FilePicker/index.js";
+type FileTypeProps = Pick<FileItemFormatted, "mimeType" | "name">;
+declare const FileType: ({ mimeType, name }: FileTypeProps) => React.JSX.Element;
+export { FileType, type FileTypeProps };

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

@@ -0,0 +1,45 @@
+import react from "react";
+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 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 object-contain p-sm-extra"
+    });
+};
+export { FileType };
+
+//# sourceMappingURL=FileType.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilePicker/primitives/components/previews/RichItemPreview/FileType.js","sources":["../../../../../../src/FilePicker/primitives/components/previews/RichItemPreview/FileType.tsx"],"sourcesContent":["import React from \"react\";\nimport type { FileItemFormatted } from \"~/FilePicker/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 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 (\n        <img\n            src={getMimeTypeSrc(mimeType)}\n            alt={name}\n            className=\"size-full object-contain p-sm-extra\"\n        />\n    );\n};\n\nexport { FileType, type FileTypeProps };\n"],"names":["FileType","mimeType","name","getMimeTypeSrc","csvThumb","docThumb","docxThumb","pdfThumb","pptThumb","pptxThumb","txtThumb","xlsThumb","xlsxThumb","fileThumb"],"mappings":";;;;;;;;;;;AAgBA,MAAMA,WAAW,CAAC,EAAEC,WAAW,EAAE,EAAEC,IAAI,EAAiB;IACpD,MAAMC,iBAAiB,CAACF;QACpB,OAAQA;YACJ,KAAK;gBACD,OAAOG;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,GACI,oBAAC;QACG,KAAKV,eAAeF;QACpB,KAAKC;QACL,WAAU;;AAGtB"}

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

@@ -0,0 +1,5 @@
+import React from "react";
+import type { FileItemFormatted } from "../../../../../FilePicker/index.js";
+type PlaceholderProps = Pick<FileItemFormatted, "name">;
+declare const Placeholder: ({ name }: PlaceholderProps) => React.JSX.Element;
+export { Placeholder, type PlaceholderProps };

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

@@ -0,0 +1,14 @@
+import react from "react";
+import { ReactComponent } from "@webiny/icons/image.svg";
+import { Icon } from "../../../../../Icon/index.js";
+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"
+    }));
+export { Placeholder };
+
+//# sourceMappingURL=Placeholder.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilePicker/primitives/components/previews/RichItemPreview/Placeholder.js","sources":["../../../../../../src/FilePicker/primitives/components/previews/RichItemPreview/Placeholder.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\";\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\nexport { Placeholder, type PlaceholderProps };\n"],"names":["Placeholder","name","Icon","PlaceholderIcon"],"mappings":";;;AAOA,MAAMA,cAAc,CAAC,EAAEC,IAAI,EAAoB,GACpC,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACC,MAAIA;QAAC,oBAAM,oBAACC,gBAAeA;QAAK,OAAOF;QAAM,MAAM;QAAM,OAAO"}

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

@@ -1,23 +1,29 @@
 import React from "react";
-import type { FilePreviewDefaultProps } from "../../types";
+import type { FilePreviewDefaultProps } from "../../types.js";
 type RichItemPreviewProps = FilePreviewDefaultProps & {
     preview?: "thumbnail" | "file-type" | "placeholder";
+    /** Optional custom image renderer for the thumbnail (e.g. a cropped preview). */
+    renderImage?: (args: {
+        url: string;
+        name: string;
+    }) => React.ReactNode;
 };
-declare const RichItemPreview: (({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: RichItemPreviewProps) => React.JSX.Element) & {
-    original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: RichItemPreviewProps) => React.JSX.Element;
+declare const DecoratableRichItemPreview: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, renderImage, ...props }: RichItemPreviewProps) => React.JSX.Element;
+declare const RichItemPreview: typeof DecoratableRichItemPreview & {
+    original: typeof DecoratableRichItemPreview;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: RichItemPreviewProps) => React.JSX.Element) & {
-        original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: RichItemPreviewProps) => React.JSX.Element;
+    original: typeof DecoratableRichItemPreview & {
+        original: typeof DecoratableRichItemPreview;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: RichItemPreviewProps) => React.JSX.Element) & {
-        original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: RichItemPreviewProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableRichItemPreview & {
+        original: typeof DecoratableRichItemPreview;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

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

@@ -1,45 +1,77 @@
-import React from "react";
-import { cn, makeDecoratable } from "../../../../../utils";
-import { RichItemThumbnail } from "./RichItemThumbnail";
-import { ItemDescription } from "../ItemDescription";
-import { ItemActions } from "../ItemActions";
-import { previewVariants } from "../variants";
-const DecoratableRichItemPreview = ({
-  className,
-  disabled,
-  onRemoveItem,
-  onReplaceItem,
-  onEditItem,
-  value,
-  variant,
-  preview,
-  ...props
-}) => {
-  return /*#__PURE__*/React.createElement("div", Object.assign({
-    "data-testid": "image-preview",
-    className: cn("wby-w-full wby-rounded-md", previewVariants({
-      variant,
-      disabled
-    }), className)
-  }, props), /*#__PURE__*/React.createElement("div", {
-    "data-role": "select-image",
-    className: "wby-flex wby-items-center wby-justify-between wby-gap-sm-extra wby-min-w-0"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "wby-flex wby-items-center wby-justify-between wby-flex-1 wby-cursor-pointer wby-gap-sm-extra wby-self-stretch wby-min-w-0",
-    onClick: onReplaceItem
-  }, /*#__PURE__*/React.createElement(RichItemThumbnail, Object.assign({}, value, {
-    disabled: disabled,
-    preview: preview
-  })), /*#__PURE__*/React.createElement(ItemDescription, {
-    item: value,
-    disabled: disabled
-  })), /*#__PURE__*/React.createElement(ItemActions, {
-    onRemoveItem: onRemoveItem,
-    onReplaceItem: onReplaceItem,
-    onEditItem: onEditItem,
-    disabled: disabled,
-    className: "wby-pr-sm-extra"
-  })));
+import react from "react";
+import bytes from "bytes";
+import { cn, makeDecoratable } from "../../../../../utils.js";
+import { Text } from "../../../../../Text/index.js";
+import { RichItemThumbnail } from "./RichItemThumbnail.js";
+import { ThumbnailActions } from "./ThumbnailActions.js";
+import { ItemDescription } from "../ItemDescription.js";
+import { ItemActions } from "../ItemActions.js";
+import { TruncatedFileName } from "../TruncatedFileName.js";
+import { previewVariants } from "../variants.js";
+const DecoratableRichItemPreview = ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, renderImage, ...props })=>{
+    const actions = {
+        onRemoveItem,
+        onReplaceItem,
+        onEditItem,
+        disabled
+    };
+    const formattedSize = value.size ? bytes.format(value.size, {
+        unitSeparator: " ",
+        decimalPlaces: 0
+    }) : "";
+    const details = [
+        value.mimeType,
+        formattedSize
+    ].filter(Boolean).join(" - ");
+    return /*#__PURE__*/ react.createElement("div", {
+        "data-testid": "image-preview",
+        className: cn("w-full rounded-md @container", previewVariants({
+            variant,
+            disabled
+        }), className),
+        ...props
+    }, /*#__PURE__*/ react.createElement("div", {
+        "data-role": "select-image",
+        className: "@min-[280px]:hidden"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-xs p-xs"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "group relative cursor-pointer",
+        onClick: onReplaceItem
+    }, /*#__PURE__*/ react.createElement(RichItemThumbnail, {
+        ...value,
+        variant: "banner",
+        disabled: disabled,
+        preview: preview,
+        renderImage: renderImage
+    }), /*#__PURE__*/ react.createElement(ThumbnailActions, actions)), /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-xxs min-w-0 px-xxs pb-xxs"
+    }, /*#__PURE__*/ react.createElement(TruncatedFileName, {
+        name: value.name,
+        className: disabled ? "text-neutral-disabled" : "text-neutral-primary"
+    }), details ? /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        className: cn("truncate", disabled ? "text-neutral-disabled" : "text-neutral-muted")
+    }, details) : null))), /*#__PURE__*/ react.createElement("div", {
+        "data-role": "select-image",
+        className: "hidden @min-[280px]:flex items-center gap-sm-extra min-w-0"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "shrink-0 cursor-pointer",
+        onClick: onReplaceItem
+    }, /*#__PURE__*/ react.createElement(RichItemThumbnail, {
+        ...value,
+        disabled: disabled,
+        preview: preview,
+        renderImage: renderImage
+    })), /*#__PURE__*/ react.createElement(ItemDescription, {
+        item: value,
+        disabled: disabled,
+        onClick: onReplaceItem,
+        className: "grow basis-0 cursor-pointer"
+    }), /*#__PURE__*/ react.createElement(ItemActions, {
+        ...actions,
+        className: "ml-auto pr-sm-extra"
+    })));
 };
 const RichItemPreview = makeDecoratable("RichItemPreview", DecoratableRichItemPreview);
 export { RichItemPreview };

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

@@ -1 +1 @@
-{"version":3,"names":["React","cn","makeDecoratable","RichItemThumbnail","ItemDescription","ItemActions","previewVariants","DecoratableRichItemPreview","className","disabled","onRemoveItem","onReplaceItem","onEditItem","value","variant","preview","props","createElement","Object","assign","onClick","item","RichItemPreview"],"sources":["RichItemPreview.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, makeDecoratable } from \"~/utils\";\nimport { RichItemThumbnail } from \"./RichItemThumbnail\";\nimport { ItemDescription } from \"../ItemDescription\";\nimport { ItemActions } from \"~/FilePicker/primitives/components/previews/ItemActions\";\nimport { previewVariants } from \"../variants\";\nimport type { FilePreviewDefaultProps } from \"../../types\";\n\ntype RichItemPreviewProps = FilePreviewDefaultProps & {\n    preview?: \"thumbnail\" | \"file-type\" | \"placeholder\";\n};\n\nconst DecoratableRichItemPreview = ({\n    className,\n    disabled,\n    onRemoveItem,\n    onReplaceItem,\n    onEditItem,\n    value,\n    variant,\n    preview,\n    ...props\n}: RichItemPreviewProps) => {\n    return (\n        <div\n            data-testid=\"image-preview\"\n            className={cn(\n                \"wby-w-full wby-rounded-md\",\n                previewVariants({ variant, disabled }),\n                className\n            )}\n            {...props}\n        >\n            <div\n                data-role=\"select-image\"\n                className=\"wby-flex wby-items-center wby-justify-between wby-gap-sm-extra wby-min-w-0\"\n            >\n                <div\n                    className=\"wby-flex wby-items-center wby-justify-between wby-flex-1 wby-cursor-pointer wby-gap-sm-extra wby-self-stretch wby-min-w-0\"\n                    onClick={onReplaceItem}\n                >\n                    <RichItemThumbnail {...value} disabled={disabled} preview={preview} />\n                    <ItemDescription item={value} disabled={disabled} />\n                </div>\n\n                <ItemActions\n                    onRemoveItem={onRemoveItem}\n                    onReplaceItem={onReplaceItem}\n                    onEditItem={onEditItem}\n                    disabled={disabled}\n                    className={\"wby-pr-sm-extra\"}\n                />\n            </div>\n        </div>\n    );\n};\n\nconst RichItemPreview = makeDecoratable(\"RichItemPreview\", DecoratableRichItemPreview);\n\nexport { RichItemPreview, type RichItemPreviewProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,EAAE,EAAEC,eAAe;AAC5B,SAASC,iBAAiB;AAC1B,SAASC,eAAe;AACxB,SAASC,WAAW;AACpB,SAASC,eAAe;AAOxB,MAAMC,0BAA0B,GAAGA,CAAC;EAChCC,SAAS;EACTC,QAAQ;EACRC,YAAY;EACZC,aAAa;EACbC,UAAU;EACVC,KAAK;EACLC,OAAO;EACPC,OAAO;EACP,GAAGC;AACe,CAAC,KAAK;EACxB,oBACIhB,KAAA,CAAAiB,aAAA,QAAAC,MAAA,CAAAC,MAAA;IACI,eAAY,eAAe;IAC3BX,SAAS,EAAEP,EAAE,CACT,2BAA2B,EAC3BK,eAAe,CAAC;MAAEQ,OAAO;MAAEL;IAAS,CAAC,CAAC,EACtCD,SACJ;EAAE,GACEQ,KAAK,gBAEThB,KAAA,CAAAiB,aAAA;IACI,aAAU,cAAc;IACxBT,SAAS,EAAC;EAA4E,gBAEtFR,KAAA,CAAAiB,aAAA;IACIT,SAAS,EAAC,2HAA2H;IACrIY,OAAO,EAAET;EAAc,gBAEvBX,KAAA,CAAAiB,aAAA,CAACd,iBAAiB,EAAAe,MAAA,CAAAC,MAAA,KAAKN,KAAK;IAAEJ,QAAQ,EAAEA,QAAS;IAACM,OAAO,EAAEA;EAAQ,EAAE,CAAC,eACtEf,KAAA,CAAAiB,aAAA,CAACb,eAAe;IAACiB,IAAI,EAAER,KAAM;IAACJ,QAAQ,EAAEA;EAAS,CAAE,CAClD,CAAC,eAENT,KAAA,CAAAiB,aAAA,CAACZ,WAAW;IACRK,YAAY,EAAEA,YAAa;IAC3BC,aAAa,EAAEA,aAAc;IAC7BC,UAAU,EAAEA,UAAW;IACvBH,QAAQ,EAAEA,QAAS;IACnBD,SAAS,EAAE;EAAkB,CAChC,CACA,CACJ,CAAC;AAEd,CAAC;AAED,MAAMc,eAAe,GAAGpB,eAAe,CAAC,iBAAiB,EAAEK,0BAA0B,CAAC;AAEtF,SAASe,eAAe","ignoreList":[]}
+{"version":3,"file":"FilePicker/primitives/components/previews/RichItemPreview/RichItemPreview.js","sources":["../../../../../../src/FilePicker/primitives/components/previews/RichItemPreview/RichItemPreview.tsx"],"sourcesContent":["import React from \"react\";\nimport bytes from \"bytes\";\nimport { cn, makeDecoratable } from \"~/utils.js\";\nimport { Text } from \"~/Text/index.js\";\nimport { RichItemThumbnail } from \"./RichItemThumbnail.js\";\nimport { ThumbnailActions } from \"./ThumbnailActions.js\";\nimport { ItemDescription } from \"../ItemDescription.js\";\nimport { ItemActions } from \"~/FilePicker/primitives/components/previews/ItemActions.js\";\nimport { TruncatedFileName } from \"../TruncatedFileName.js\";\nimport { previewVariants } from \"../variants.js\";\nimport type { FilePreviewDefaultProps } from \"../../types.js\";\n\ntype RichItemPreviewProps = FilePreviewDefaultProps & {\n    preview?: \"thumbnail\" | \"file-type\" | \"placeholder\";\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 DecoratableRichItemPreview = ({\n    className,\n    disabled,\n    onRemoveItem,\n    onReplaceItem,\n    onEditItem,\n    value,\n    variant,\n    preview,\n    renderImage,\n    ...props\n}: RichItemPreviewProps) => {\n    const actions = { onRemoveItem, onReplaceItem, onEditItem, disabled };\n\n    const formattedSize = value.size\n        ? bytes.format(value.size, { unitSeparator: \" \", decimalPlaces: 0 })\n        : \"\";\n    const details = [value.mimeType, formattedSize].filter(Boolean).join(\" - \");\n\n    return (\n        <div\n            data-testid=\"image-preview\"\n            className={cn(\n                \"w-full rounded-md @container\",\n                previewVariants({ variant, disabled }),\n                className\n            )}\n            {...props}\n        >\n            {/* Stacked layout for narrow containers (below 280px). */}\n            <div data-role=\"select-image\" className={\"@min-[280px]:hidden\"}>\n                <div className={\"flex flex-col gap-xs p-xs\"}>\n                    <div className={\"group relative cursor-pointer\"} onClick={onReplaceItem}>\n                        <RichItemThumbnail\n                            {...value}\n                            variant={\"banner\"}\n                            disabled={disabled}\n                            preview={preview}\n                            renderImage={renderImage}\n                        />\n                        <ThumbnailActions {...actions} />\n                    </div>\n\n                    <div className={\"flex flex-col gap-xxs min-w-0 px-xxs pb-xxs\"}>\n                        <TruncatedFileName\n                            name={value.name}\n                            className={disabled ? \"text-neutral-disabled\" : \"text-neutral-primary\"}\n                        />\n                        {details ? (\n                            <Text\n                                size=\"sm\"\n                                className={cn(\n                                    \"truncate\",\n                                    disabled ? \"text-neutral-disabled\" : \"text-neutral-muted\"\n                                )}\n                            >\n                                {details}\n                            </Text>\n                        ) : null}\n                    </div>\n                </div>\n            </div>\n\n            {/* Side-by-side layout for wider containers (280px+). */}\n            <div\n                data-role=\"select-image\"\n                className={\"hidden @min-[280px]:flex items-center gap-sm-extra min-w-0\"}\n            >\n                <div className={\"shrink-0 cursor-pointer\"} onClick={onReplaceItem}>\n                    <RichItemThumbnail\n                        {...value}\n                        disabled={disabled}\n                        preview={preview}\n                        renderImage={renderImage}\n                    />\n                </div>\n\n                <ItemDescription\n                    item={value}\n                    disabled={disabled}\n                    onClick={onReplaceItem}\n                    className={\"grow basis-0 cursor-pointer\"}\n                />\n\n                <ItemActions {...actions} className={\"ml-auto pr-sm-extra\"} />\n            </div>\n        </div>\n    );\n};\n\nconst RichItemPreview = makeDecoratable(\"RichItemPreview\", DecoratableRichItemPreview);\n\nexport { RichItemPreview, type RichItemPreviewProps };\n"],"names":["DecoratableRichItemPreview","className","disabled","onRemoveItem","onReplaceItem","onEditItem","value","variant","preview","renderImage","props","actions","formattedSize","bytes","details","Boolean","cn","previewVariants","RichItemThumbnail","ThumbnailActions","TruncatedFileName","Text","ItemDescription","ItemActions","RichItemPreview","makeDecoratable"],"mappings":";;;;;;;;;;AAkBA,MAAMA,6BAA6B,CAAC,EAChCC,SAAS,EACTC,QAAQ,EACRC,YAAY,EACZC,aAAa,EACbC,UAAU,EACVC,KAAK,EACLC,OAAO,EACPC,OAAO,EACPC,WAAW,EACX,GAAGC,OACgB;IACnB,MAAMC,UAAU;QAAER;QAAcC;QAAeC;QAAYH;IAAS;IAEpE,MAAMU,gBAAgBN,MAAM,IAAI,GAC1BO,MAAM,MAAM,CAACP,MAAM,IAAI,EAAE;QAAE,eAAe;QAAK,eAAe;IAAE,KAChE;IACN,MAAMQ,UAAU;QAACR,MAAM,QAAQ;QAAEM;KAAc,CAAC,MAAM,CAACG,SAAS,IAAI,CAAC;IAErE,OAAO,WAAP,GACI,oBAAC;QACG,eAAY;QACZ,WAAWC,GACP,gCACAC,gBAAgB;YAAEV;YAASL;QAAS,IACpCD;QAEH,GAAGS,KAAK;qBAGT,oBAAC;QAAI,aAAU;QAAe,WAAW;qBACrC,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAI,WAAW;QAAiC,SAASN;qBACtD,oBAACc,mBAAiBA;QACb,GAAGZ,KAAK;QACT,SAAS;QACT,UAAUJ;QACV,SAASM;QACT,aAAaC;sBAEjB,oBAACU,kBAAqBR,WAAAA,WAAAA,GAG1B,oBAAC;QAAI,WAAW;qBACZ,oBAACS,mBAAiBA;QACd,MAAMd,MAAM,IAAI;QAChB,WAAWJ,WAAW,0BAA0B;QAEnDY,UAAU,WAAVA,GACG,oBAACO,MAAIA;QACD,MAAK;QACL,WAAWL,GACP,YACAd,WAAW,0BAA0B;OAGxCY,WAEL,uBAMhB,oBAAC;QACG,aAAU;QACV,WAAW;qBAEX,oBAAC;QAAI,WAAW;QAA2B,SAASV;qBAChD,oBAACc,mBAAiBA;QACb,GAAGZ,KAAK;QACT,UAAUJ;QACV,SAASM;QACT,aAAaC;uBAIrB,oBAACa,iBAAeA;QACZ,MAAMhB;QACN,UAAUJ;QACV,SAASE;QACT,WAAW;sBAGf,oBAACmB,aAAWA;QAAE,GAAGZ,OAAO;QAAE,WAAW;;AAIrD;AAEA,MAAMa,kBAAkBC,gBAAgB,mBAAmBzB"}

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

@@ -1,9 +1,19 @@
 import React from "react";
-import type { FileItemFormatted } from "../../../..";
-import type { RichItemPreviewProps } from "../..";
+import type { FileItemFormatted } from "../../../../../FilePicker/index.js";
+import type { RichItemPreviewProps } from "../../../../../FilePicker/primitives/components/index.js";
 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 };