@webiny/admin-ui 6.0.0-alpha.0

package/FilePicker/primitives/components/Label.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","FormComponentDescription","FormComponentLabel","FormPickerLabel","label","description","required","disabled","invalid","className","createElement","Fragment","text"],"sources":["Label.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {\n    FormComponentDescription,\n    FormComponentLabel,\n    type FormComponentProps\n} from \"~/FormComponent\";\n\ntype FormPickerLabelProps = Pick<\n    FormComponentProps,\n    \"label\" | \"description\" | \"disabled\" | \"required\"\n> & {\n    invalid?: boolean;\n    className?: string;\n};\n\nconst FormPickerLabel = ({\n    label,\n    description,\n    required,\n    disabled,\n    invalid,\n    className\n}: FormPickerLabelProps) => {\n    return (\n        <>\n            <FormComponentLabel\n                text={label}\n                required={required}\n                disabled={disabled}\n                className={className}\n                invalid={invalid}\n            />\n            <FormComponentDescription text={description} disabled={disabled} />\n        </>\n    );\n};\n\nexport { FormPickerLabel, type FormPickerLabelProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SACIC,wBAAwB,EACxBC,kBAAkB;AAYtB,MAAMC,eAAe,GAAGA,CAAC;EACrBC,KAAK;EACLC,WAAW;EACXC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC;AACkB,CAAC,KAAK;EACxB,oBACIT,KAAA,CAAAU,aAAA,CAAAV,KAAA,CAAAW,QAAA,qBACIX,KAAA,CAAAU,aAAA,CAACR,kBAAkB;IACfU,IAAI,EAAER,KAAM;IACZE,QAAQ,EAAEA,QAAS;IACnBC,QAAQ,EAAEA,QAAS;IACnBE,SAAS,EAAEA,SAAU;IACrBD,OAAO,EAAEA;EAAQ,CACpB,CAAC,eACFR,KAAA,CAAAU,aAAA,CAACT,wBAAwB;IAACW,IAAI,EAAEP,WAAY;IAACE,QAAQ,EAAEA;EAAS,CAAE,CACpE,CAAC;AAEX,CAAC;AAED,SAASJ,eAAe","ignoreList":[]}

package/FilePicker/primitives/components/Trigger.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { type VariantProps } from "../../../utils";
+import type { TriggerDefaultProps } from "./types";
+declare const triggerVariants: (props?: ({
+    type?: "area" | "compact" | null | undefined;
+    variant?: "primary" | "secondary" | "ghost" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+interface TriggerProps extends TriggerDefaultProps, VariantProps<typeof triggerVariants> {
+    renderTrigger?: (props: any) => React.ReactElement<any>;
+}
+declare const Trigger: ({ renderTrigger, type, variant, text, className, disabled, onSelectItem, ...props }: TriggerProps) => React.JSX.Element;
+export { Trigger, type TriggerProps, triggerVariants };

package/FilePicker/primitives/components/Trigger.js

@@ -0,0 +1,73 @@
+import * as React from "react";
+import { ReactComponent as ImageIcon } from "@webiny/icons/image.svg";
+import { Button } from "../../../Button";
+import { cn, cva } from "../../../utils";
+const triggerVariants = cva(["wby-flex", "data-[disabled=true]:wby-cursor-not-allowed"], {
+  variants: {
+    type: {
+      area: ["wby-justify-center", "wby-px-xl wby-py-md-extra"],
+      compact: "wby-w-full [&>span]:!wby-flex-1 [&_button]:!wby-w-full"
+    },
+    variant: {
+      primary: "",
+      secondary: "",
+      ghost: ""
+    }
+  },
+  compoundVariants: [
+  // Combination of `type = area` and different `variant`
+  {
+    type: "area",
+    variant: "primary",
+    className: ["wby-bg-neutral-subtle", "hover:wby-bg-neutral-light", "data-[disabled=true]:wby-bg-neutral-disabled"]
+  }, {
+    type: "area",
+    variant: "secondary",
+    className: ["wby-bg-neutral-base", "hover:wby-bg-neutral-base", "data-[disabled=true]:wby-bg-neutral-disabled"]
+  }, {
+    type: "area",
+    variant: "ghost",
+    className: ["wby-bg-neutral-subtle", "hover:wby-bg-neutral-light", "data-[disabled=true]:wby-bg-neutral-base"]
+  }],
+  defaultVariants: {
+    type: "area",
+    variant: "primary"
+  }
+});
+const Trigger = ({
+  renderTrigger,
+  type,
+  variant,
+  text,
+  className,
+  disabled,
+  onSelectItem,
+  ...props
+}) => {
+  if (typeof renderTrigger === "function") {
+    return renderTrigger({
+      disabled,
+      text,
+      onSelectItem,
+      ...props
+    });
+  }
+  return /*#__PURE__*/React.createElement("div", Object.assign({
+    "data-role": "select-image",
+    "data-disabled": disabled,
+    className: cn(triggerVariants({
+      type,
+      variant
+    }), className)
+  }, props), /*#__PURE__*/React.createElement(Button, {
+    disabled: disabled,
+    icon: /*#__PURE__*/React.createElement(ImageIcon, null),
+    onClick: onSelectItem,
+    size: "sm",
+    text: text ?? "Select from library",
+    variant: "ghost"
+  }));
+};
+export { Trigger, triggerVariants };
+
+//# sourceMappingURL=Trigger.js.map

package/FilePicker/primitives/components/Trigger.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","ReactComponent","ImageIcon","Button","cn","cva","triggerVariants","variants","type","area","compact","variant","primary","secondary","ghost","compoundVariants","className","defaultVariants","Trigger","renderTrigger","text","disabled","onSelectItem","props","createElement","Object","assign","icon","onClick","size"],"sources":["Trigger.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ReactComponent as ImageIcon } from \"@webiny/icons/image.svg\";\nimport { Button } from \"~/Button\";\nimport { cn, cva, type VariantProps } from \"~/utils\";\nimport type { TriggerDefaultProps } from \"~/FilePicker/primitives/components/types\";\n\nconst triggerVariants = cva([\"wby-flex\", \"data-[disabled=true]:wby-cursor-not-allowed\"], {\n    variants: {\n        type: {\n            area: [\"wby-justify-center\", \"wby-px-xl wby-py-md-extra\"],\n            compact: \"wby-w-full [&>span]:!wby-flex-1 [&_button]:!wby-w-full\"\n        },\n        variant: {\n            primary: \"\",\n            secondary: \"\",\n            ghost: \"\"\n        }\n    },\n    compoundVariants: [\n        // Combination of `type = area` and different `variant`\n        {\n            type: \"area\",\n            variant: \"primary\",\n            className: [\n                \"wby-bg-neutral-subtle\",\n                \"hover:wby-bg-neutral-light\",\n                \"data-[disabled=true]:wby-bg-neutral-disabled\"\n            ]\n        },\n        {\n            type: \"area\",\n            variant: \"secondary\",\n            className: [\n                \"wby-bg-neutral-base\",\n                \"hover:wby-bg-neutral-base\",\n                \"data-[disabled=true]:wby-bg-neutral-disabled\"\n            ]\n        },\n        {\n            type: \"area\",\n            variant: \"ghost\",\n            className: [\n                \"wby-bg-neutral-subtle\",\n                \"hover:wby-bg-neutral-light\",\n                \"data-[disabled=true]:wby-bg-neutral-base\"\n            ]\n        }\n    ],\n    defaultVariants: {\n        type: \"area\",\n        variant: \"primary\"\n    }\n});\n\ninterface TriggerProps extends TriggerDefaultProps, VariantProps<typeof triggerVariants> {\n    renderTrigger?: (props: any) => React.ReactElement<any>;\n}\n\nconst Trigger = ({\n    renderTrigger,\n    type,\n    variant,\n    text,\n    className,\n    disabled,\n    onSelectItem,\n    ...props\n}: TriggerProps) => {\n    if (typeof renderTrigger === \"function\") {\n        return renderTrigger({ disabled, text, onSelectItem, ...props });\n    }\n\n    return (\n        <div\n            data-role={\"select-image\"}\n            data-disabled={disabled}\n            className={cn(triggerVariants({ type, variant }), className)}\n            {...props}\n        >\n            <Button\n                disabled={disabled}\n                icon={<ImageIcon />}\n                onClick={onSelectItem}\n                size={\"sm\"}\n                text={text ?? \"Select from library\"}\n                variant={\"ghost\"}\n            />\n        </div>\n    );\n};\n\nexport { Trigger, type TriggerProps, triggerVariants };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,cAAc,IAAIC,SAAS,QAAQ,yBAAyB;AACrE,SAASC,MAAM;AACf,SAASC,EAAE,EAAEC,GAAG;AAGhB,MAAMC,eAAe,GAAGD,GAAG,CAAC,CAAC,UAAU,EAAE,6CAA6C,CAAC,EAAE;EACrFE,QAAQ,EAAE;IACNC,IAAI,EAAE;MACFC,IAAI,EAAE,CAAC,oBAAoB,EAAE,2BAA2B,CAAC;MACzDC,OAAO,EAAE;IACb,CAAC;IACDC,OAAO,EAAE;MACLC,OAAO,EAAE,EAAE;MACXC,SAAS,EAAE,EAAE;MACbC,KAAK,EAAE;IACX;EACJ,CAAC;EACDC,gBAAgB,EAAE;EACd;EACA;IACIP,IAAI,EAAE,MAAM;IACZG,OAAO,EAAE,SAAS;IAClBK,SAAS,EAAE,CACP,uBAAuB,EACvB,4BAA4B,EAC5B,8CAA8C;EAEtD,CAAC,EACD;IACIR,IAAI,EAAE,MAAM;IACZG,OAAO,EAAE,WAAW;IACpBK,SAAS,EAAE,CACP,qBAAqB,EACrB,2BAA2B,EAC3B,8CAA8C;EAEtD,CAAC,EACD;IACIR,IAAI,EAAE,MAAM;IACZG,OAAO,EAAE,OAAO;IAChBK,SAAS,EAAE,CACP,uBAAuB,EACvB,4BAA4B,EAC5B,0CAA0C;EAElD,CAAC,CACJ;EACDC,eAAe,EAAE;IACbT,IAAI,EAAE,MAAM;IACZG,OAAO,EAAE;EACb;AACJ,CAAC,CAAC;AAMF,MAAMO,OAAO,GAAGA,CAAC;EACbC,aAAa;EACbX,IAAI;EACJG,OAAO;EACPS,IAAI;EACJJ,SAAS;EACTK,QAAQ;EACRC,YAAY;EACZ,GAAGC;AACO,CAAC,KAAK;EAChB,IAAI,OAAOJ,aAAa,KAAK,UAAU,EAAE;IACrC,OAAOA,aAAa,CAAC;MAAEE,QAAQ;MAAED,IAAI;MAAEE,YAAY;MAAE,GAAGC;IAAM,CAAC,CAAC;EACpE;EAEA,oBACIvB,KAAA,CAAAwB,aAAA,QAAAC,MAAA,CAAAC,MAAA;IACI,aAAW,cAAe;IAC1B,iBAAeL,QAAS;IACxBL,SAAS,EAAEZ,EAAE,CAACE,eAAe,CAAC;MAAEE,IAAI;MAAEG;IAAQ,CAAC,CAAC,EAAEK,SAAS;EAAE,GACzDO,KAAK,gBAETvB,KAAA,CAAAwB,aAAA,CAACrB,MAAM;IACHkB,QAAQ,EAAEA,QAAS;IACnBM,IAAI,eAAE3B,KAAA,CAAAwB,aAAA,CAACtB,SAAS,MAAE,CAAE;IACpB0B,OAAO,EAAEN,YAAa;IACtBO,IAAI,EAAE,IAAK;IACXT,IAAI,EAAEA,IAAI,IAAI,qBAAsB;IACpCT,OAAO,EAAE;EAAQ,CACpB,CACA,CAAC;AAEd,CAAC;AAED,SAASO,OAAO,EAAqBZ,eAAe","ignoreList":[]}

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

@@ -0,0 +1,3 @@
+export * from "./previews";
+export * from "./Label";
+export * from "./Trigger";

package/FilePicker/primitives/components/index.js

@@ -0,0 +1,5 @@
+export * from "./previews";
+export * from "./Label";
+export * from "./Trigger";
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./previews\";\nexport * from \"./Label\";\nexport * from \"./Trigger\";\n"],"mappings":"AAAA;AACA;AACA","ignoreList":[]}

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

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { type VariantProps } from "../../../../utils";
+import { filePickerVariants } from "../../..";
+import { FilePreviewDefaultProps } from "../types";
+type FilePreviewProps = FilePreviewDefaultProps & {
+    type: VariantProps<typeof filePickerVariants>["type"];
+    renderFilePreview?: (props: any) => React.ReactElement<any>;
+};
+declare const FilePreview: ({ type, renderFilePreview, ...props }: FilePreviewProps) => React.JSX.Element;
+export { FilePreview, type FilePreviewProps };

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

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { RichItemPreview, TextOnlyPreview } from "../previews";
+const FilePreview = ({
+  type,
+  renderFilePreview,
+  ...props
+}) => {
+  if (typeof renderFilePreview === "function") {
+    return renderFilePreview(props);
+  }
+  if (type === "compact") {
+    return /*#__PURE__*/React.createElement(TextOnlyPreview, props);
+  }
+  return /*#__PURE__*/React.createElement(RichItemPreview, props);
+};
+export { FilePreview };
+
+//# sourceMappingURL=FilePreview.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","RichItemPreview","TextOnlyPreview","FilePreview","type","renderFilePreview","props","createElement"],"sources":["FilePreview.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { type VariantProps } from \"~/utils\";\nimport { filePickerVariants } from \"~/FilePicker\";\nimport { FilePreviewDefaultProps } from \"../types\";\nimport { RichItemPreview, TextOnlyPreview } from \"../previews\";\n\ntype FilePreviewProps = FilePreviewDefaultProps & {\n    type: VariantProps<typeof filePickerVariants>[\"type\"];\n    renderFilePreview?: (props: any) => React.ReactElement<any>;\n};\n\nconst FilePreview = ({ type, renderFilePreview, ...props }: FilePreviewProps) => {\n    if (typeof renderFilePreview === \"function\") {\n        return renderFilePreview(props);\n    }\n\n    if (type === \"compact\") {\n        return <TextOnlyPreview {...props} />;\n    }\n\n    return <RichItemPreview {...props} />;\n};\n\nexport { FilePreview, type FilePreviewProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAI9B,SAASC,eAAe,EAAEC,eAAe;AAOzC,MAAMC,WAAW,GAAGA,CAAC;EAAEC,IAAI;EAAEC,iBAAiB;EAAE,GAAGC;AAAwB,CAAC,KAAK;EAC7E,IAAI,OAAOD,iBAAiB,KAAK,UAAU,EAAE;IACzC,OAAOA,iBAAiB,CAACC,KAAK,CAAC;EACnC;EAEA,IAAIF,IAAI,KAAK,SAAS,EAAE;IACpB,oBAAOJ,KAAA,CAAAO,aAAA,CAACL,eAAe,EAAKI,KAAQ,CAAC;EACzC;EAEA,oBAAON,KAAA,CAAAO,aAAA,CAACN,eAAe,EAAKK,KAAQ,CAAC;AACzC,CAAC;AAED,SAASH,WAAW","ignoreList":[]}

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

@@ -0,0 +1,23 @@
+import React from "react";
+import type { FilePreviewDefaultProps } from "../../types";
+type ImagePreviewProps = FilePreviewDefaultProps;
+declare const ImagePreview: (({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: ImagePreviewProps) => React.JSX.Element) & {
+    original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: ImagePreviewProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: ImagePreviewProps) => React.JSX.Element) & {
+        original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: ImagePreviewProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: ImagePreviewProps) => React.JSX.Element) & {
+        original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: ImagePreviewProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export { ImagePreview, type ImagePreviewProps };

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

@@ -0,0 +1,39 @@
+import React from "react";
+import { cn, makeDecoratable } from "../../../../../utils";
+import { previewVariants } from "../variants";
+import { ItemActions } from "../ItemActions";
+const DecoratableImagePreview = ({
+  value,
+  className,
+  variant,
+  disabled,
+  onRemoveItem,
+  onReplaceItem,
+  onEditItem
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn("wby-flex wby-justify-center wby-items-center wby-py-sm wby-rounded-md wby-relative", previewVariants({
+      variant
+    }), className),
+    "data-testid": "image-preview"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "wby-cursor-pointer wby-size-[128px] wby-flex wby-justify-center wby-items-center",
+    "data-role": "select-image",
+    onClick: onReplaceItem
+  }, /*#__PURE__*/React.createElement("img", {
+    src: value.url,
+    alt: value.name,
+    className: "wby-object-contain wby-size-full"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "wby-absolute wby-top-1 wby-right-1.5"
+  }, /*#__PURE__*/React.createElement(ItemActions, {
+    onRemoveItem: onRemoveItem,
+    onEditItem: onEditItem,
+    disabled: disabled,
+    className: "wby-flex-col"
+  })));
+};
+const ImagePreview = makeDecoratable("FileImagePreview", DecoratableImagePreview);
+export { ImagePreview };
+
+//# sourceMappingURL=ImagePreview.js.map

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

@@ -0,0 +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":[]}

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./ImagePreview\";\n"],"mappings":"AAAA","ignoreList":[]}

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

@@ -0,0 +1,10 @@
+import React from "react";
+interface ItemActionsProps extends React.HTMLAttributes<HTMLDivElement> {
+    onRemoveItem?: () => void;
+    onEditItem?: () => void;
+    onReplaceItem?: () => void;
+    disabled?: boolean;
+    small?: boolean;
+}
+declare const ItemActions: ({ disabled, onRemoveItem, onEditItem, onReplaceItem, small, className, ...props }: ItemActionsProps) => React.JSX.Element;
+export { ItemActions, type ItemActionsProps };

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

@@ -0,0 +1,61 @@
+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
+  }));
+};
+export { ItemActions };
+
+//# sourceMappingURL=ItemActions.js.map

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

@@ -0,0 +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":[]}

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

@@ -0,0 +1,9 @@
+import React from "react";
+import type { FileItemFormatted } from "../../..";
+interface ItemDescriptionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    item: FileItemFormatted;
+    disabled?: boolean;
+    small?: boolean;
+}
+declare const ItemDescription: ({ className, disabled, item, small, ...props }: ItemDescriptionProps) => React.JSX.Element;
+export { ItemDescription, type ItemDescriptionProps };

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

@@ -0,0 +1,28 @@
+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(" - ")));
+};
+export { ItemDescription };
+
+//# sourceMappingURL=ItemDescription.js.map

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

@@ -0,0 +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":[]}

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

@@ -0,0 +1,25 @@
+import React from "react";
+import type { FilePreviewDefaultProps } from "../../types";
+type RichItemPreviewProps = FilePreviewDefaultProps & {
+    preview?: "thumbnail" | "file-type" | "placeholder";
+};
+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;
+    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;
+        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;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export { RichItemPreview, type RichItemPreviewProps };

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

@@ -0,0 +1,47 @@
+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"
+  })));
+};
+const RichItemPreview = makeDecoratable("RichItemPreview", DecoratableRichItemPreview);
+export { RichItemPreview };
+
+//# sourceMappingURL=RichItemPreview.js.map

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

@@ -0,0 +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":[]}

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

@@ -0,0 +1,9 @@
+import React from "react";
+import type { FileItemFormatted } from "../../../..";
+import type { RichItemPreviewProps } from "../..";
+type RichItemThumbnailProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & FileItemFormatted & {
+    preview?: RichItemPreviewProps["preview"];
+    disabled?: boolean;
+};
+declare const RichItemThumbnail: ({ url, name, className, mimeType, preview, disabled }: RichItemThumbnailProps) => React.JSX.Element;
+export { RichItemThumbnail, type RichItemThumbnailProps };

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

@@ -0,0 +1,105 @@
+import React from "react";
+import { ReactComponent as PlaceholderIcon } from "@webiny/icons/image.svg";
+import { Icon } from "../../../../../Icon";
+import { cn } from "../../../../../utils";
+import csvThumb from "../assets/csv.svg";
+import docThumb from "../assets/doc.svg";
+import docxThumb from "../assets/docx.svg";
+import fileThumb from "../assets/file.svg";
+import pdfThumb from "../assets/pdf.svg";
+import pptThumb from "../assets/ppt.svg";
+import pptxThumb from "../assets/pptx.svg";
+import txtThumb from "../assets/txt.svg";
+import xlsThumb from "../assets/xls.svg";
+import xlsxThumb from "../assets/xlsx.svg";
+const Thumbnail = ({
+  url,
+  name
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "wby-size-full wby-bg-neutral-muted"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: url,
+    alt: name,
+    className: "wby-size-full wby-object-cover"
+  }));
+};
+const FileType = ({
+  mimeType = "",
+  name
+}) => {
+  const getMimeTypeSrc = mimeType => {
+    switch (mimeType) {
+      case "text/csv":
+        // .csv
+        return csvThumb;
+      case "application/msword":
+        // .doc
+        return docThumb;
+      case "application/vnd.openxmlformats-officedocument.wordprocessingml.document":
+        // .docx
+        return docxThumb;
+      case "application/pdf":
+        // .pdf
+        return pdfThumb;
+      case "application/vnd.ms-powerpoint":
+        // .ppt
+        return pptThumb;
+      case "application/vnd.openxmlformats-officedocument.presentationml.presentation":
+        // .pptx
+        return pptxThumb;
+      case "text/plain":
+        // .txt
+        return txtThumb;
+      case "application/vnd.ms-excel":
+        // .xls
+        return xlsThumb;
+      case "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet":
+        // .xlsx
+        return xlsxThumb;
+      default:
+        return fileThumb;
+    }
+  };
+  return /*#__PURE__*/React.createElement("img", {
+    src: getMimeTypeSrc(mimeType),
+    alt: name,
+    className: "wby-size-full wby-p-sm-extra"
+  });
+};
+const Placeholder = ({
+  name
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "wby-size-full wby-flex wby-justify-center wby-items-center wby-bg-transparent"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/React.createElement(PlaceholderIcon, null),
+    label: name,
+    size: "lg",
+    color: "neutral-light"
+  }));
+};
+const RichItemThumbnail = ({
+  url,
+  name,
+  className,
+  mimeType,
+  preview,
+  disabled
+}) => {
+  const isImage = mimeType?.startsWith("image/");
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn("wby-size-[56px] wby-m-xs wby-rounded-sm wby-overflow-hidden wby-relative", disabled && "[&_img]:wby-filter [&_img]:wby-grayscale [&_img]:wby-opacity-50", className)
+  }, preview === "thumbnail" || isImage ? /*#__PURE__*/React.createElement(Thumbnail, {
+    url: url,
+    name: name
+  }) : preview === "placeholder" ? /*#__PURE__*/React.createElement(Placeholder, {
+    name: name
+  }) : /*#__PURE__*/React.createElement(FileType, {
+    mimeType: mimeType,
+    name: name
+  }));
+};
+export { RichItemThumbnail };
+
+//# sourceMappingURL=RichItemThumbnail.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","ReactComponent","PlaceholderIcon","Icon","cn","csvThumb","docThumb","docxThumb","fileThumb","pdfThumb","pptThumb","pptxThumb","txtThumb","xlsThumb","xlsxThumb","Thumbnail","url","name","createElement","className","src","alt","FileType","mimeType","getMimeTypeSrc","Placeholder","icon","label","size","color","RichItemThumbnail","preview","disabled","isImage","startsWith"],"sources":["RichItemThumbnail.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as PlaceholderIcon } from \"@webiny/icons/image.svg\";\nimport type { FileItemFormatted } from \"~/FilePicker\";\nimport { Icon } from \"~/Icon\";\nimport { cn } from \"~/utils\";\nimport type { RichItemPreviewProps } from \"~/FilePicker/primitives/components\";\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={\"wby-size-full wby-bg-neutral-muted\"}>\n            <img src={url} alt={name} className=\"wby-size-full wby-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 (\n        <img src={getMimeTypeSrc(mimeType)} alt={name} className=\"wby-size-full wby-p-sm-extra\" />\n    );\n};\n\ntype PlaceholderProps = Pick<FileItemFormatted, \"name\">;\n\nconst Placeholder = ({ name }: PlaceholderProps) => {\n    return (\n        <div\n            className={\n                \"wby-size-full wby-flex wby-justify-center wby-items-center wby-bg-transparent\"\n            }\n        >\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                \"wby-size-[56px] wby-m-xs wby-rounded-sm wby-overflow-hidden wby-relative\",\n                disabled && \"[&_img]:wby-filter [&_img]:wby-grayscale [&_img]:wby-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"],"mappings":"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","ignoreList":[]}

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./RichItemPreview\";\n"],"mappings":"AAAA","ignoreList":[]}