@webiny/admin-ui 0.0.0-unstable.06b2ede40f

package/FilePicker/primitives/components/Description.js

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { FormComponentDescription } from "../../../FormComponent";
+const FilePickerDescription = ({
+  description,
+  disabled,
+  className
+}) => {
+  if (!description) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(FormComponentDescription, {
+    text: description,
+    disabled: disabled,
+    className: className
+  });
+};
+export { FilePickerDescription };
+
+//# sourceMappingURL=Description.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","FormComponentDescription","FilePickerDescription","description","disabled","className","createElement","text"],"sources":["Description.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { FormComponentDescription, type FormComponentProps } from \"~/FormComponent\";\n\ntype FilePickerDescriptionProps = Pick<FormComponentProps, \"description\" | \"disabled\"> & {\n    invalid?: boolean;\n    className?: string;\n};\n\nconst FilePickerDescription = ({\n    description,\n    disabled,\n    className\n}: FilePickerDescriptionProps) => {\n    if (!description) {\n        return null;\n    }\n\n    return (\n        <FormComponentDescription text={description} disabled={disabled} className={className} />\n    );\n};\n\nexport { FilePickerDescription, type FilePickerDescriptionProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,wBAAwB;AAOjC,MAAMC,qBAAqB,GAAGA,CAAC;EAC3BC,WAAW;EACXC,QAAQ;EACRC;AACwB,CAAC,KAAK;EAC9B,IAAI,CAACF,WAAW,EAAE;IACd,OAAO,IAAI;EACf;EAEA,oBACIH,KAAA,CAAAM,aAAA,CAACL,wBAAwB;IAACM,IAAI,EAAEJ,WAAY;IAACC,QAAQ,EAAEA,QAAS;IAACC,SAAS,EAAEA;EAAU,CAAE,CAAC;AAEjG,CAAC;AAED,SAASH,qBAAqB","ignoreList":[]}

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

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { type FormComponentProps } from "../../../FormComponent";
+type FilePickerLabelProps = Pick<FormComponentProps, "label" | "disabled" | "required"> & {
+    invalid?: boolean;
+    className?: string;
+};
+declare const FilePickerLabel: ({ label, required, disabled, invalid, className }: FilePickerLabelProps) => React.JSX.Element | null;
+export { FilePickerLabel, type FilePickerLabelProps };

package/FilePicker/primitives/components/Label.js

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { FormComponentLabel } from "../../../FormComponent";
+const FilePickerLabel = ({
+  label,
+  required,
+  disabled,
+  invalid,
+  className
+}) => {
+  if (!label) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(FormComponentLabel, {
+    text: label,
+    required: required,
+    disabled: disabled,
+    className: className,
+    invalid: invalid
+  });
+};
+export { FilePickerLabel };
+
+//# sourceMappingURL=Label.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","FormComponentLabel","FilePickerLabel","label","required","disabled","invalid","className","createElement","text"],"sources":["Label.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { FormComponentLabel, type FormComponentProps } from \"~/FormComponent\";\n\ntype FilePickerLabelProps = Pick<FormComponentProps, \"label\" | \"disabled\" | \"required\"> & {\n    invalid?: boolean;\n    className?: string;\n};\n\nconst FilePickerLabel = ({\n    label,\n    required,\n    disabled,\n    invalid,\n    className\n}: FilePickerLabelProps) => {\n    if (!label) {\n        return null;\n    }\n\n    return (\n        <FormComponentLabel\n            text={label}\n            required={required}\n            disabled={disabled}\n            className={className}\n            invalid={invalid}\n        />\n    );\n};\n\nexport { FilePickerLabel, type FilePickerLabelProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,kBAAkB;AAO3B,MAAMC,eAAe,GAAGA,CAAC;EACrBC,KAAK;EACLC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC;AACkB,CAAC,KAAK;EACxB,IAAI,CAACJ,KAAK,EAAE;IACR,OAAO,IAAI;EACf;EAEA,oBACIH,KAAA,CAAAQ,aAAA,CAACP,kBAAkB;IACfQ,IAAI,EAAEN,KAAM;IACZC,QAAQ,EAAEA,QAAS;IACnBC,QAAQ,EAAEA,QAAS;IACnBE,SAAS,EAAEA,SAAU;IACrBD,OAAO,EAAEA;EAAQ,CACpB,CAAC;AAEV,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,79 @@
+import * as React from "react";
+import { ReactComponent as ImageIcon } from "@webiny/icons/image.svg";
+import { cn, cva } from "../../../utils";
+import { Icon } from "../../../Icon";
+import { Text } from "../../../Text";
+const triggerVariants = cva(["wby-w-full wby-flex wby-items-center wby-justify-center", "data-[disabled=true]:wby-cursor-not-allowed data-[disabled=true]:wby-bg-neutral-disabled", "focus-visible:wby-outline-none  focus-visible:wby-ring-primary-dimmed", "wby-text-neutral-strong data-[disabled=true]:wby-text-neutral-disabled", "wby-fill-neutral-strong data-[disabled=true]:wby-fill-neutral-disabled"], {
+  variants: {
+    type: {
+      area: "wby-px-xs wby-py-md-extra wby-rounded-md focus-visible:wby-ring-lg",
+      compact: "wby-px-sm wby-py-xs wby-rounded-sm focus-visible:wby-ring-md"
+    },
+    variant: {
+      primary: ["wby-bg-neutral-subtle", "hover:wby-bg-neutral-light"],
+      secondary: ["wby-bg-neutral-base", "hover:wby-bg-neutral-base"],
+      ghost: ["wby-bg-neutral-subtle", "hover:wby-bg-neutral-light"]
+    }
+  },
+  compoundVariants: [
+  // Combination of `type = area` and different `variant`
+  {
+    type: "area",
+    variant: "primary",
+    className: ["wby-bg-neutral-subtle", "hover:wby-bg-neutral-light"]
+  }, {
+    type: "area",
+    variant: "secondary",
+    className: ["wby-bg-neutral-base", "hover:wby-bg-neutral-base"]
+  }, {
+    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
+    });
+  }
+  const label = text ?? "Select from library";
+  return /*#__PURE__*/React.createElement("button", Object.assign({
+    "data-role": "select-image",
+    "data-disabled": disabled,
+    disabled: disabled,
+    onClick: onSelectItem,
+    className: cn(triggerVariants({
+      type,
+      variant
+    }), className)
+  }, props), /*#__PURE__*/React.createElement("span", {
+    className: "wby-inline-flex wby-items-center wby-justify-center wby-whitespace-nowrap wby-gap-xs"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/React.createElement(ImageIcon, null),
+    label: label,
+    color: "inherit"
+  }), /*#__PURE__*/React.createElement(Text, {
+    size: "sm",
+    className: "wby-leading-none"
+  }, label)));
+};
+export { Trigger, triggerVariants };
+
+//# sourceMappingURL=Trigger.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","ReactComponent","ImageIcon","cn","cva","Icon","Text","triggerVariants","variants","type","area","compact","variant","primary","secondary","ghost","compoundVariants","className","defaultVariants","Trigger","renderTrigger","text","disabled","onSelectItem","props","label","createElement","Object","assign","onClick","icon","color","size"],"sources":["Trigger.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ReactComponent as ImageIcon } from \"@webiny/icons/image.svg\";\nimport { cn, cva, type VariantProps } from \"~/utils\";\nimport type { TriggerDefaultProps } from \"~/FilePicker/primitives/components/types\";\nimport { Icon } from \"~/Icon\";\nimport { Text } from \"~/Text\";\n\nconst triggerVariants = cva(\n    [\n        \"wby-w-full wby-flex wby-items-center wby-justify-center\",\n        \"data-[disabled=true]:wby-cursor-not-allowed data-[disabled=true]:wby-bg-neutral-disabled\",\n        \"focus-visible:wby-outline-none  focus-visible:wby-ring-primary-dimmed\",\n        \"wby-text-neutral-strong data-[disabled=true]:wby-text-neutral-disabled\",\n        \"wby-fill-neutral-strong data-[disabled=true]:wby-fill-neutral-disabled\"\n    ],\n    {\n        variants: {\n            type: {\n                area: \"wby-px-xs wby-py-md-extra wby-rounded-md focus-visible:wby-ring-lg\",\n                compact: \"wby-px-sm wby-py-xs wby-rounded-sm focus-visible:wby-ring-md\"\n            },\n            variant: {\n                primary: [\"wby-bg-neutral-subtle\", \"hover:wby-bg-neutral-light\"],\n                secondary: [\"wby-bg-neutral-base\", \"hover:wby-bg-neutral-base\"],\n                ghost: [\"wby-bg-neutral-subtle\", \"hover:wby-bg-neutral-light\"]\n            }\n        },\n        compoundVariants: [\n            // Combination of `type = area` and different `variant`\n            {\n                type: \"area\",\n                variant: \"primary\",\n                className: [\"wby-bg-neutral-subtle\", \"hover:wby-bg-neutral-light\"]\n            },\n            {\n                type: \"area\",\n                variant: \"secondary\",\n                className: [\"wby-bg-neutral-base\", \"hover:wby-bg-neutral-base\"]\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);\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    const label = text ?? \"Select from library\";\n\n    return (\n        <button\n            data-role={\"select-image\"}\n            data-disabled={disabled}\n            disabled={disabled}\n            onClick={onSelectItem}\n            className={cn(triggerVariants({ type, variant }), className)}\n            {...props}\n        >\n            <span\n                className={\n                    \"wby-inline-flex wby-items-center wby-justify-center wby-whitespace-nowrap wby-gap-xs\"\n                }\n            >\n                <Icon icon={<ImageIcon />} label={label} color={\"inherit\"} />\n                <Text size={\"sm\"} className={\"wby-leading-none\"}>\n                    {label}\n                </Text>\n            </span>\n        </button>\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,EAAE,EAAEC,GAAG;AAEhB,SAASC,IAAI;AACb,SAASC,IAAI;AAEb,MAAMC,eAAe,GAAGH,GAAG,CACvB,CACI,yDAAyD,EACzD,0FAA0F,EAC1F,uEAAuE,EACvE,wEAAwE,EACxE,wEAAwE,CAC3E,EACD;EACII,QAAQ,EAAE;IACNC,IAAI,EAAE;MACFC,IAAI,EAAE,oEAAoE;MAC1EC,OAAO,EAAE;IACb,CAAC;IACDC,OAAO,EAAE;MACLC,OAAO,EAAE,CAAC,uBAAuB,EAAE,4BAA4B,CAAC;MAChEC,SAAS,EAAE,CAAC,qBAAqB,EAAE,2BAA2B,CAAC;MAC/DC,KAAK,EAAE,CAAC,uBAAuB,EAAE,4BAA4B;IACjE;EACJ,CAAC;EACDC,gBAAgB,EAAE;EACd;EACA;IACIP,IAAI,EAAE,MAAM;IACZG,OAAO,EAAE,SAAS;IAClBK,SAAS,EAAE,CAAC,uBAAuB,EAAE,4BAA4B;EACrE,CAAC,EACD;IACIR,IAAI,EAAE,MAAM;IACZG,OAAO,EAAE,WAAW;IACpBK,SAAS,EAAE,CAAC,qBAAqB,EAAE,2BAA2B;EAClE,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,CACJ,CAAC;AAMD,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,MAAMC,KAAK,GAAGJ,IAAI,IAAI,qBAAqB;EAE3C,oBACIrB,KAAA,CAAA0B,aAAA,WAAAC,MAAA,CAAAC,MAAA;IACI,aAAW,cAAe;IAC1B,iBAAeN,QAAS;IACxBA,QAAQ,EAAEA,QAAS;IACnBO,OAAO,EAAEN,YAAa;IACtBN,SAAS,EAAEd,EAAE,CAACI,eAAe,CAAC;MAAEE,IAAI;MAAEG;IAAQ,CAAC,CAAC,EAAEK,SAAS;EAAE,GACzDO,KAAK,gBAETxB,KAAA,CAAA0B,aAAA;IACIT,SAAS,EACL;EACH,gBAEDjB,KAAA,CAAA0B,aAAA,CAACrB,IAAI;IAACyB,IAAI,eAAE9B,KAAA,CAAA0B,aAAA,CAACxB,SAAS,MAAE,CAAE;IAACuB,KAAK,EAAEA,KAAM;IAACM,KAAK,EAAE;EAAU,CAAE,CAAC,eAC7D/B,KAAA,CAAA0B,aAAA,CAACpB,IAAI;IAAC0B,IAAI,EAAE,IAAK;IAACf,SAAS,EAAE;EAAmB,GAC3CQ,KACC,CACJ,CACF,CAAC;AAEjB,CAAC;AAED,SAASN,OAAO,EAAqBZ,eAAe","ignoreList":[]}

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

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

package/FilePicker/primitives/components/index.js

@@ -0,0 +1,6 @@
+export * from "./previews";
+export * from "./Description";
+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 \"./Description\";\nexport * from \"./Label\";\nexport * from \"./Trigger\";\n"],"mappings":"AAAA;AACA;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 type { filePickerVariants } from "../../..";
+import type { 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 type { filePickerVariants } from \"~/FilePicker\";\nimport type { 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 };